/* ============================================================ VELNET S.A. — Tokens de marca (Breakbook 2026) Azul #0d3c95 · Naranja #ff4e3c · Negro · Blanco · Montserrat ============================================================ */ /* ---------- Tipografia autoalojada ---------- Antes venia de Google Fonts: 2 conexiones extra (googleapis -> gstatic) antes de la primera letra. En gama baja la fuente llegaba a los 4,8 s y el titulo de la home recien ahi. Montserrat es variable: un archivo trae los 5 pesos. latin (38 KB) cubre todo el espanol; latin-ext solo baja si aparece un caracter de ese rango. */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap; src:url('/assets/fonts/montserrat-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap; src:url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* Fallback con las medidas de Montserrat: mientras la fuente carga, el texto ocupa lo mismo y no salta al cambiar (en Nosotros el titulo ganaba una linea y empujaba todo 34px: CLS 0,119 en gama baja). size-adjust medido contra Arial sobre frases reales del sitio (400: 1,124 / 800: 1,117); ascent y descent salen de la tabla OS/2 de la fuente (968/-251 sobre 1000), divididos por el size-adjust. Android resuelve Arial a Roboto. */ @font-face{font-family:'Montserrat Fallback';font-weight:100 500;src:local('Arial'),local('ArialMT'),local('Roboto'); size-adjust:112.4%;ascent-override:86.1%;descent-override:22.3%;line-gap-override:0%} @font-face{font-family:'Montserrat Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold'); size-adjust:111.7%;ascent-override:86.7%;descent-override:22.5%;line-gap-override:0%} :root{ --azul:#0d3c95; --azul-800:#0a2f75; --azul-900:#082558; --azul-950:#061b41; --naranja:#ff4e3c; --naranja-hover:#e93c2a; /* El naranja de marca da 3.28:1 sobre blanco: falla WCAG AA (4.5) como texto. Esta variante da 4.99:1 sobre blanco y 4.57:1 sobre --bg-elev y ya pertenece a la familia (esta en el gradiente de .av.or). Sobre fondos oscuros el naranja pleno da 5.16:1, asi que ahi se vuelve a usar. */ --naranja-texto:#cf3626; /* Criterio de marca (definido con el cliente): el naranja PLENO manda en todo lo que se lee como color -- botones, barras, badges, iconos, avatares. La variante oscura queda solo para naranja usado como TEXTO chico sobre fondo claro (--naranja-texto), que es donde 3.28:1 realmente lastima la lectura. Nota: el texto blanco sobre el relleno pleno da 3.28:1 y no cumple AA para texto; es una decision de marca tomada a conciencia, no un descuido. */ --naranja-fill:var(--naranja); --negro:#000000; --blanco:#ffffff; --bg:var(--blanco); --bg-elev:#f2f5fb; --bg-hover:#e9eef8; --text:#0b1530; --text-muted:#55617a; --text-inv:#ffffff; --text-inv-muted:rgba(255,255,255,.72); --accent:var(--naranja); --accent-contrast:#ffffff; --border:rgba(13,60,149,.12); --border-inv:rgba(255,255,255,.16); --font:'Montserrat','Montserrat Fallback',system-ui,-apple-system,sans-serif; --ease-out-expo:cubic-bezier(0.16,1,0.3,1); /* Escala de motion por ROL, no por tamaño. Antes habia 3 duraciones para 5 trabajos distintos y el hover heredaba los 350ms del movimiento: se movia detras del mouse. Referencia: presion 100-160ms, hover 120-200ms, desplegables 150-250ms, paneles 200-500ms, scroll de marketing puede ser mas largo. */ --dur-press:.12s; /* respuesta al click */ --dur-hover:.18s; /* color, borde, sombra al pasar el mouse */ --dur-move:.35s; /* algo se desplaza o cambia de tamaño en pantalla */ --dur-panel:.5s; /* acordeon, menu, panel que se abre */ --dur-reveal:.7s; /* entrada por scroll (marketing, puede ser larga) */ /* alias heredados para no romper reglas existentes */ --dur-fast:var(--dur-press); --dur:var(--dur-move); --dur-slow:var(--dur-reveal); --radius:20px; --radius-sm:12px; --radius-lg:28px; --section-y:clamp(80px,12vw,150px); /* Despeje bajo la pastilla fija del nav (18px de inset + 66px de alto = 84px) + 64px de aire (con 44 el usuario lo seguia viendo pegado en movil). El primer bloque de cada pagina interna lo usa como piso. */ --nav-clear:148px; --container:1240px; /* ---------- Escala tipografica ---------- Antes habia 27 tamanos literales y 23 clamps distintos, muchos separados por 0.02rem (.78 / .8 / .82 · .85 / .88 / .9 / .92 · .68 / .7 / .72 / .74 / .75 / .76). Diferencias invisibles de a una, pero juntas hacen que la pagina se lea como si nadie hubiera decidido nada. Diez escalones. */ --fs-3xs:.72rem; /* badges, pills, contadores */ --fs-2xs:.8rem; /* eyebrows, captions, meta */ --fs-xs:.88rem; /* cuerpo chico, items de lista */ --fs-sm:.95rem; /* cuerpo, botones */ --fs-md:1rem; /* cuerpo base */ --fs-lg:clamp(1.15rem,1.9vw,1.5rem); /* titulos de card, cita destacada */ --fs-xl:clamp(1.3rem,2.2vw,1.8rem); /* h3 */ --fs-2xl:clamp(1.65rem,2.8vw,2.4rem); /* h3 grande, h2 de card */ --fs-3xl:clamp(2rem,4.2vw,3.4rem); /* h2 */ --fs-4xl:clamp(2.4rem,4.6vw,3.8rem); /* h2 de seccion protagonista */ --fs-5xl:clamp(2.7rem,6.4vw,5.4rem); /* h1 */ --fs-giant:clamp(min(13vw,3rem),8vw,6rem); /* "Servicios." / "FAQ": a 320px 3rem (48px) desbordaba 10px, baja solo donde no entra */ --fs-num:clamp(2.4rem,4.6vw,4rem); /* cifras grandes */ --fs-lead:clamp(1.05rem,1.4vw,1.22rem);/* bajadas */ --fs-stat:2rem; /* cifra mediana en linea */ /* ---------- Escala de espaciado ---------- Ritmo de bloque. Los micro-gaps internos de cada componente quedan como estan: ahi el valor suele ser una alineacion optica con un icono concreto, no una decision de ritmo. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:56px; --sp-11:64px; /* Ritmo: el hueco "encabezado de seccion -> grilla de contenido" estaba escrito como 52, 56 y 64px segun la seccion. Es un solo gesto: un token. Se comprime en mobile desde aca, en vez de 6 overrides sueltos. */ --rhythm:64px; --rhythm-sm:40px; /* Hueco entre cards de una misma grilla. Estaba escrito como 14, 18, 20 y 22px segun el bloque: cuatro valores para el mismo gesto. */ --gap-cards:20px; /* Ancho REAL del viewport (sin scrollbar). 100vw lo incluye: con scrollbar clasica (15px) un sangrado a borde hecho con 50vw se pasa 15px y aparece scroll horizontal. app.js lo mantiene con documentElement.clientWidth; 100vw queda solo como valor de partida antes de que corra el script. */ --vw:100vw; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; } a{text-decoration:none;color:inherit} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:none;background:none} ::selection{background:var(--naranja);color:#fff} .wrap{width:min(var(--container),92%);margin-inline:auto} section{padding:var(--section-y) 0} /* ---------- Ritmo entre secciones ---------- Antes cada seccion parcheaba su padding con style="padding-top:0" inline. El parche codificaba una suposicion sobre QUE venia antes, asi que al mover o eliminar una seccion quedaba huerfano: al sacar el statement, "Quienes somos" se pego al hero. Y las que no tenian el parche sumaban 150+150=300px. Con el selector hermano el ritmo se recalcula solo. Hueco unico: --section-y. */ section + section{padding-top:0} /* Hay secciones cuyo padding vive en un wrapper interno (.hero -> .hero-bleed, .contacto -> .contacto-bleed): la seccion en si tiene padding:0, asi que NO aporta el hueco inferior del que depende `section + section`. La siguiente tiene que poner el suyo. */ .hero + section, .contacto + section{padding-top:var(--section-y)} /* En una banda de color el padding es interno, no separacion entre bloques: se mantiene para que el contenido no toque el borde de la banda. */ section + .sec-banda{padding-top:var(--section-y)} /* ...salvo entre dos bandas del MISMO tono: ahi el borde entre bandas no se ve, asi que los dos paddings se suman en un hueco muerto del doble. */ .sec-elev + .sec-elev, .sec-azul + .sec-azul, .sec-azul950 + .sec-azul950{padding-top:0} /* Y al reves: cuando una banda TERMINA, su padding inferior queda dentro del color. Pasado el cambio de fondo no hay nada, y la seccion siguiente arranca pegada al borde. Necesita su propio padding, igual que al entrar a la banda. */ .sec-banda + section:not(.sec-banda){padding-top:var(--section-y)} /* Bandas de apertura: Servicios y Nosotros abren con el mismo celeste que Casos de exito, para que las paginas interiores se lean como una familia. */ #servicios.sec-elev,#nosotros.sec-elev{background:var(--bg-elev)} /* Dentro de una banda celeste las cards no pueden ser del mismo celeste o desaparecen: van en blanco, igual que .caso-card en la pagina de Casos. */ .sec-elev .qs-card{background:#fff} /* ---------- Tipografía ---------- */ h1,h2,h3,h4{font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--azul-950)} /* Cada pagina interior abre con su h1. Hereda el tamaño del contexto donde antes habia un h2, asi que nada cambia visualmente: es solo semantica. */ h1{font-size:var(--fs-3xl)} .faq h1.giant,.svc-intro h1.giant{font-size:var(--fs-giant)} .mapa-copy h1,.contacto h1{font-size:var(--fs-4xl)} .on-dark h1{color:#fff} h2{font-size:var(--fs-3xl)} h3{font-size:var(--fs-lg)} .lead{font-size:var(--fs-lead);color:var(--text-muted);max-width:640px} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:var(--fs-3xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--naranja-texto);margin-bottom:18px; } /* En 2 lineas la raya quedaba centrada entre ambas: se ancla a la mitad de la primera. */ .eyebrow::before{content:"";width:22px;height:2px;background:var(--naranja);border-radius:2px;flex-shrink:0;align-self:flex-start;margin-top:calc(.5lh - 1px)} .on-dark,.mapa-panel,.roles-panel,.oper-band,.plan.popular,.contacto-bleed,footer,.p-card.active{--naranja-texto:var(--naranja)} .on-dark h1,.on-dark h2,.on-dark h3{color:#fff} .on-dark .lead{color:var(--text-inv-muted)} /* ---------- Logo (asset oficial del breakbook) ---------- */ .logo-img{display:block;width:auto} /* solo elige WebP o PNG: no debe participar del layout */ .logo-pic{display:contents} /* ---------- Botones ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-weight:700;font-size:var(--fs-sm);line-height:1; padding:16px 28px;border-radius:999px; transition:transform var(--dur-press) var(--ease-out-expo), background var(--dur-hover) ease, box-shadow var(--dur-hover) ease; } .btn:active{transform:scale(.98)} .btn-primary{background:var(--naranja-fill);color:var(--accent-contrast);box-shadow:0 12px 30px -12px rgba(255,78,60,.55);border:1px solid transparent} @media (hover:hover){.btn-primary:hover{background:var(--naranja-hover);box-shadow:0 16px 36px -12px rgba(255,78,60,.65);transform:translateY(-2px)}} /* va DESPUES del hover: con el mouse encima, el hover (misma especificidad) ganaba y el click no se sentia */ .btn.btn-primary:active{transform:translateY(0) scale(.98);box-shadow:0 8px 20px -10px rgba(255,78,60,.55)} .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)} @media (hover:hover){.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}} .btn-dark{background:var(--azul-950);color:#fff} @media (hover:hover){.btn-dark:hover{background:var(--azul)}} .btn-outline{background:transparent;color:var(--azul);border:1.5px solid var(--border)} @media (hover:hover){.btn-outline:hover{border-color:var(--azul);background:var(--bg-elev)}} .btn .arr{transition:transform var(--dur) var(--ease-out-expo)} @media (hover:hover){.btn:hover .arr{transform:translateX(4px)}} /* ============================================================ NAV ============================================================ */ .nav{ position:fixed;inset:18px 0 auto;z-index:100; display:flex;justify-content:center; pointer-events:none; } .nav-inner{ pointer-events:auto; width:min(var(--container),94%); display:flex;align-items:center;justify-content:space-between;gap:20px; background:rgba(255,255,255,.92); border:1px solid transparent; border-radius:999px; padding:10px 12px 10px 26px; transition:background var(--dur-hover) var(--ease-out-expo),box-shadow var(--dur-hover) var(--ease-out-expo),border-color var(--dur-hover); } .nav.scrolled .nav-inner{ background:rgba(255,255,255,.82); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-color:var(--border); box-shadow:0 12px 40px -18px rgba(6,27,65,.25); } .nav-links{display:flex;gap:28px;list-style:none} .nav-links a{font-size:var(--fs-sm);font-weight:600;color:var(--text);position:relative;padding:6px 0} .nav-links a::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:100%; background:var(--naranja);border-radius:2px; transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease-out-expo); } @media (hover:hover){.nav-links a:hover::after{transform:scaleX(1)}} .nav-cta{display:flex;align-items:center;gap:12px} .nav-cta .btn{padding:14px 22px;min-height:44px} .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;padding:0 12px;min-height:44px;min-width:44px;transition:scale var(--dur-press) var(--ease-out-expo)} .hamburger:active{scale:.9} .hamburger span{width:22px;height:2px;background:var(--azul-950);border-radius:2px;transition:transform var(--dur),opacity var(--dur-hover)} .mobile-menu{ position:fixed;inset:0;z-index:99;background:var(--azul-950); display:flex;flex-direction:column;justify-content:flex-start; padding:96px 8% 40px; /* en pantallas bajas (landscape, SE con teclado) los 5 links + el boton no entran: sin esto el CTA quedaba inalcanzable con body.menu-open{overflow:hidden} */ overflow-y:auto;overscroll-behavior:contain; transform:translateX(100%);transition:transform .5s var(--ease-out-expo),visibility .5s; /* cerrado no debe existir para el teclado ni para lectores de pantalla: sin visibility sus 6 enlaces seguian en el orden de tabulacion en TODOS los breakpoints, incluido desktop, donde el menu ni siquiera se usa */ visibility:hidden; } .mobile-menu.open{transform:translateX(0);visibility:visible} /* :not(.btn): con .mobile-menu a (0,1,1) pisando a .btn (0,1,0), el CTA perdia su relleno y heredaba la letra gigante de los enlaces (texto contra el borde). */ .mobile-menu a:not(.btn){color:#fff;font-size:clamp(1.45rem,5.5vw,1.8rem);font-weight:800;padding:14px 0;border-bottom:1px solid var(--border-inv)} .mobile-menu a:not(.btn){transition:opacity var(--dur-press) ease} .mobile-menu a:not(.btn):active{opacity:.6} .mobile-menu .btn{margin-top:28px;align-self:flex-start} /* Centrado con margenes auto y no con justify-content:center: cuando el contenido no entra (landscape, 375px de alto) el centrado real lo reparte arriba Y abajo y la parte de arriba queda fuera del scroll, tapada por el nav. Con auto, el sobrante se reparte solo si existe; si no, el menu empieza abajo del nav. */ .mobile-menu>:first-child{margin-top:auto} .mobile-menu>:last-child{margin-bottom:auto} /* Entrada escalonada de los enlaces al abrir. Es una ANIMACION con fill "backwards" (no una transition): asi el retraso no se hereda al :active del boton y, al terminar, el elemento vuelve a sus valores normales. */ .mobile-menu.open>a{animation:menuItemIn var(--dur-move) var(--ease-out-expo) backwards} .mobile-menu.open>a:nth-child(1){animation-delay:.10s} .mobile-menu.open>a:nth-child(2){animation-delay:.14s} .mobile-menu.open>a:nth-child(3){animation-delay:.18s} .mobile-menu.open>a:nth-child(4){animation-delay:.22s} .mobile-menu.open>a:nth-child(5){animation-delay:.26s} .mobile-menu.open>a:nth-child(6){animation-delay:.30s} @keyframes menuItemIn{from{opacity:0;transform:translateY(14px)}} body.menu-open{overflow:hidden} body.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .hamburger span:nth-child(2){opacity:0} body.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ============================================================ 1 · HERO ============================================================ */ .hero{padding:0;margin:0} .hero-bleed{ position:relative;min-height:100vh;min-height:100svh; border-radius:0 0 var(--radius-lg) var(--radius-lg); overflow:hidden; display:flex;flex-direction:column;justify-content:flex-end; background:var(--azul-950); } /* El poster va de fondo del contenedor y NO en el atributo poster del video: asi se ve desde el primer pintado aunque el video todavia este en opacity 0, y el video entra encima con un fundido en vez de aparecer de golpe. */ .hero-bleed{background:var(--azul-950) url("/assets/video/hero-poster.jpg") center/cover no-repeat} .hero-bg{ position:absolute;inset:-8% 0;width:100%;height:116%; object-fit:cover;object-position:center; opacity:0;transition:opacity var(--dur-reveal) var(--ease-out-expo); } .hero-bg.listo{opacity:1} /* Velo oscuro para que el texto despegue del video. Mas denso a la izquierda, que es donde viven el h1, el lead y los botones, y abajo, donde van los logos de clientes. La derecha queda mas clara para que el video se vea. */ .hero-velo{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(102deg,rgba(6,27,65,.95) 0%,rgba(6,27,65,.90) 30%,rgba(6,27,65,.74) 52%, rgba(6,27,65,.38) 78%,rgba(6,27,65,.50) 100%), linear-gradient(to top,rgba(6,27,65,.85) 0%,rgba(6,27,65,0) 46%); } /* will-change es una pista puntual para una animacion cara en curso, no un ajuste permanente: el JS la enciende mientras corre el parallax y la apaga cuando el hero sale de pantalla. */ .hero-bg.moviendose{will-change:transform} .hero-content{position:relative;z-index:2;width:min(var(--container),92%);margin:0 auto;padding:160px 0 56px} .hero h1{color:#fff;font-size:var(--fs-5xl);max-width:14ch} .hero .hero-kicker{color:#fff} .hero-sub{color:var(--text-inv-muted);font-size:var(--fs-lead);max-width:560px;margin-top:26px} .hero-ctas{display:flex;gap:14px;margin-top:var(--rhythm-sm);flex-wrap:wrap} .hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:72px;flex-wrap:wrap} .hero-trust{color:var(--text-inv-muted);font-size:var(--fs-xs)} .avatars{display:flex;margin-bottom:12px} .avatars .av{ width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.85); background:linear-gradient(135deg,var(--azul),var(--azul-800)); color:#fff;font-size:var(--fs-2xs);font-weight:800;display:grid;place-items:center; margin-left:-10px; } .avatars .av:first-child{margin-left:0} .avatars .av.or{background:linear-gradient(135deg,var(--naranja),var(--naranja-hover))} .hero-logos{display:flex;gap:clamp(20px,2.4vw,34px);align-items:center;margin-top:18px;flex-wrap:wrap} /* Antes eran los nombres tipeados a mano ("Cargill LDC Bunge ACA"), redundantes con el muro de logos reales que esta 200px mas abajo en la misma pagina. Ahora son los logos de verdad, pintados de blanco con la misma tecnica de mascara que usa el muro. */ .hero-logos .hl{ display:block;flex-shrink:0; height:var(--h);width:calc(var(--h) * var(--r)); background:rgba(255,255,255,.88); -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; } .hero-card{ background:rgba(255,255,255,.96); border-radius:var(--radius); padding:14px;display:flex;gap:16px;align-items:stretch; max-width:480px;box-shadow:0 30px 70px -30px rgba(6,27,65,.6); } .hero-card .thumb{ width:132px;border-radius:var(--radius-sm);flex-shrink:0; /* miniatura de 132px: bajaba la foto entera de 1004px (159 KB) en la primera pantalla de la home. La version thumb es de 320px (23 KB). */ background:url("/assets/tecnico-torre-thumb.jpg") center/cover; } .hero-card .body{padding:6px 8px 4px 0} .hero-card .badge{ display:inline-block;background:var(--azul-950);color:#fff; font-size:var(--fs-3xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:6px 12px;border-radius:999px;margin-bottom:10px; } .hero-card p{font-size:var(--fs-xs);font-weight:600;color:var(--text);line-height:1.45} .hero-card .metric{display:flex;align-items:baseline;gap:10px;margin-top:12px;border-top:1px solid var(--border);padding-top:10px} .hero-card .metric b{font-size:var(--fs-stat);font-weight:800;color:var(--azul);letter-spacing:-.03em} .hero-card .metric b .sym{color:var(--naranja-texto)} .hero-card .metric span{font-size:var(--fs-2xs);color:var(--text-muted);line-height:1.3} /* ============================================================ 3 · QUIÉNES SOMOS — atributos propios ============================================================ */ .qs-head{max-width:800px} /* Variante con CTA: la cabecera pasa a ancho completo y el boton se va a la derecha. Llena el vacio que quedaba al lado del lead y saca un elemento centrado mas de la pagina. La columna derecha lleva un elemento interactivo, no texto de relleno: por eso es valida. */ .qs-head.qs-head-cta{ max-width:none;display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,5vw,64px);align-items:end; } .qs-head.qs-head-cta .qs-head-txt{max-width:800px} .qs-head.qs-head-cta .home-cta{margin-top:0;padding-bottom:4px;justify-content:flex-end} .qs-head h2 .hl{color:var(--naranja-texto)} .qs-head .lead{margin-top:var(--sp-5)} /* Antes: 3x2 de celdas identicas, el MISMO componente que los pilares de Home. Las dos secciones se leian como la misma cosa. Ahora una grilla de 10 columnas con anchos alternados: la fila 1 pesa a la izquierda y la 2 a la derecha. Siguen siendo exactamente 6 celdas para 6 items. */ .qs-grid{ display:grid;grid-template-columns:repeat(10,minmax(0,1fr)); gap:var(--gap-cards);margin-top:var(--rhythm); } .qs-card:nth-child(1),.qs-card:nth-child(6){grid-column:span 4} .qs-card:nth-child(2),.qs-card:nth-child(3), .qs-card:nth-child(4),.qs-card:nth-child(5){grid-column:span 3} /* Una sola celda oscura: "Gestion" es el paraguas de los otros cinco ("un solo equipo responde por toda tu conectividad"), asi que se gana el foco. Una celda y no tres: el brief pide bajo ruido visual. */ .sec-elev .qs-card:nth-child(1){background:var(--azul-950);border-color:transparent} .qs-card:nth-child(1) h2,.qs-card:nth-child(1) h3{color:#fff;font-size:var(--fs-xl)} .qs-card:nth-child(1) p{color:var(--text-inv-muted);font-size:var(--fs-sm)} .qs-card:nth-child(1) .ic{background:rgba(255,255,255,.10);border-color:var(--border-inv);color:#fff} @media (hover:hover){.qs-card:nth-child(1):hover{box-shadow:0 24px 50px -30px rgba(6,27,65,.55)}} .qs-card{ background:var(--bg-elev);border:1px solid var(--border); border-radius:var(--radius-lg);padding:clamp(24px,2.6vw,34px); transition:transform var(--dur) var(--ease-out-expo),box-shadow var(--dur-hover) var(--ease-out-expo); } @media (hover:hover){.qs-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(6,27,65,.32)}} .qs-card .ic{ width:46px;height:46px;border-radius:var(--radius-sm);display:grid;place-items:center; background:#fff;border:1px solid var(--border);color:var(--azul);margin-bottom:20px; } .qs-card h2,.qs-card h3{font-size:var(--fs-lg);letter-spacing:-.01em} .qs-card p{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.6;margin-top:10px} /* ============================================================ 4 · SERVICIOS — intro + gráfico ============================================================ */ .svc-intro h2.giant{font-size:var(--fs-giant);letter-spacing:-.03em} .svc-intro .lead{margin-top:18px;max-width:60ch} .svc-intro .lead .hl{color:var(--naranja-texto)} .svc-claim{ font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.15; color:var(--azul-950);margin-top:var(--rhythm-sm);max-width:20ch; } /* 3 pilares que reemplazan al grafico de barras */ /* Antes: 3 tarjetas identicas de 400px con un parrafo corto adentro. La caja no comunicaba ninguna jerarquia, solo agregaba borde y relleno, y "tres feature cards iguales" es de los patrones mas gastados que hay. Ahora: sin cajas, ancho de cada columna segun el largo real de su texto, escalonadas, con un filete arriba. El label sube de 12.8px versalita a tamano de titulo: manda la tipografia, no el contenedor. Los pilares NO son clickeables: no llevan transicion ni hover. */ .pilares{ display:grid;grid-template-columns:1.15fr .82fr 1.03fr; gap:clamp(30px,4.5vw,68px);margin-top:var(--rhythm); } .pilar{border-top:2px solid var(--azul-950);padding-top:26px} /* Asimetria controlada: cada columna baja un escalon. */ .pilar:nth-child(2){margin-top:32px} .pilar:nth-child(3){margin-top:64px} .pilar .ic{ display:block;width:auto;height:auto;background:none;border:0;border-radius:0; color:var(--naranja-texto);margin-bottom:20px; } .pilar .ic svg{width:30px;height:30px;display:block} .pilar .k{ display:block;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em; text-transform:none;color:var(--azul-950);margin:0 0 14px;line-height:1.12; } .pilar p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.65} /* ============================================================ 5 · SERVICIOS — lista 01–06 ============================================================ */ .service{padding:clamp(48px,6vw,84px) 0;border-top:1px solid var(--border)} .service-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:stretch} .service:nth-child(even) .service-grid .service-media{order:-1} .service-copy{display:flex;flex-direction:column} .service-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px} /* Los indices 01..06 llevan aria-hidden="true": son decorativos y quedan fuera del requisito de contraste. El tono claro es la intencion. */ .service-num{font-size:var(--fs-num);font-weight:800;color:#cbd5ec;letter-spacing:-.04em;line-height:1} .service-copy h2,.service-copy h3{font-size:var(--fs-2xl);margin-top:10px;max-width:16ch} .service-copy .desc{color:var(--text-muted);margin-top:16px;max-width:46ch} .offer{margin-top:auto;padding-top:36px} .offer h3,.offer h4{font-size:var(--fs-sm);font-weight:700;color:var(--azul-950);margin-bottom:14px} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{ background:var(--bg-elev);border:1px solid var(--border);color:var(--text); font-size:var(--fs-2xs);font-weight:600;padding:9px 16px;border-radius:999px; } .service-copy .btn{margin-top:28px;align-self:flex-start} .service-media{position:relative;min-height:440px} .service-img{ position:absolute;inset:0;border-radius:var(--radius-lg); background-size:cover;background-position:center; overflow:hidden; } .service-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,27,65,.55))} /* ============================================================ 5b · ROL TECNOLÓGICO ============================================================ */ .roles-panel{ background:var(--azul-950);border-radius:var(--radius-lg); padding:clamp(36px,5vw,72px); } .roles-panel h2{max-width:18ch} .roles-panel .lead{margin-top:16px;max-width:60ch} .roles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-cards);margin-top:var(--rhythm)} .rol{ background:rgba(255,255,255,.06);border:1px solid var(--border-inv); border-radius:var(--radius);padding:28px 26px; } .rol .n{ display:block;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em; color:var(--naranja);margin-bottom:16px; } .rol h3{font-size:var(--fs-lg);color:#fff;letter-spacing:-.01em} .rol p{font-size:var(--fs-xs);color:rgba(255,255,255,.72);line-height:1.6;margin-top:10px} /* ============================================================ 6 · PROCESO — 5 fases (cards expandibles estilo Kora) ============================================================ */ .process-head{max-width:840px} .process-head h2 .muted{color:#7d8ba7} .process-cards{display:flex;gap:var(--gap-cards);margin-top:var(--rhythm);min-height:520px} .p-card{ border-radius:var(--radius-lg);padding:34px 30px;cursor:pointer; display:flex;flex-direction:column;position:relative;overflow:hidden; flex:1;min-width:0; background:var(--bg-elev);border:1px solid var(--border); } .p-card .p-top{display:flex;justify-content:space-between;align-items:center;gap:10px} .p-card .p-label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap} .p-card .p-label .lbl{opacity:0;transition:opacity .3s ease} .p-card .p-num{font-weight:800;font-size:var(--fs-md);color:var(--naranja-texto)} .p-card .p-body{margin-top:auto;transition:opacity .35s ease,transform .5s var(--ease-out-expo)} /* Colapsada, la card mostraba solo el numero arriba y ~500px de vacio. El titulo en vertical llena ese hueco con informacion util y es lo que invita a abrirla: se ve QUE hay detras de cada fase. */ .p-card h3{ font-size:var(--fs-xl); writing-mode:vertical-rl;transform:rotate(180deg); white-space:nowrap;color:var(--azul-950); transition:color .45s ease; } .p-card p{ font-size:var(--fs-sm);color:var(--text-muted);margin-top:12px;max-width:44ch; opacity:0;transform:translateY(14px); transition:opacity .3s ease,transform .5s var(--ease-out-expo); } /* Colapsado el parrafo es invisible pero SEGUIA ocupando 243-292px segun su largo, empujando cada titulo vertical a una altura distinta. Fuera de flujo los cinco apoyan en la misma linea. */ .p-card:not(.active) p{position:absolute;visibility:hidden;pointer-events:none} .p-card.active h3{writing-mode:horizontal-tb;transform:none} .p-card.active p{opacity:1;transform:none;transition-delay:.3s} .p-card .p-dots{display:flex;gap:5px;opacity:0;transition:opacity .3s} .p-card .p-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)} .p-card .p-dots i.on{background:var(--naranja)} /* Es clickeable (role=button) y no daba ninguna señal: el cursor cambiaba pero la superficie no. Feedback de hover + presion, ambos rapidos. */ @media (hover:hover){.p-card:not(.active):hover{background:var(--bg-hover);border-color:rgba(13,60,149,.22)}} @media (hover:hover){.p-card:not(.active):hover h3{color:var(--azul)}} .p-card:not(.active):active{transform:scale(.985)} .p-card{transition:flex .65s var(--ease-out-expo),background var(--dur-hover) ease, border-color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out-expo)} .p-card.active{ flex:3.2;cursor:default; background:var(--azul-950);border-color:var(--azul-950); } .p-card.active .p-label{color:rgba(255,255,255,.6)} .p-card.active .p-label .lbl{opacity:1} .p-card.active .p-num{color:var(--naranja-texto)} .p-card.active .p-dots{opacity:1} .p-card.active h3{color:#fff} .p-card.active p{color:rgba(255,255,255,.75)} /* ============================================================ 7 · MAPA — dónde operamos ============================================================ */ /* El mapa era una tarjeta oscura dentro de .wrap, con bandas blancas a los lados. Ahora la banda es la SECCION (de borde a borde, como Sectores o Casos) y el panel es solo la grilla del contenido. */ .mapa{background:var(--azul-950)} .mapa-panel{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,80px);align-items:center; } .mapa-fig{position:relative;display:flex;justify-content:center} .mapa-svg{width:100%;max-width:420px;height:auto;overflow:visible} /* ---------- Mapa: animación ---------- Tres capas, en este orden: 1. el contorno del pais se dibuja solo (pathLength="1" normaliza el largo del trazo a 1, asi el dibujado se anima en CSS sin medirlo con JS) 2. los 9 nodos entran en cascada 3. la malla aparece y las lineas quedan "fluyendo": el guion marcha a lo largo de cada linea, que es lo que hace que la red se lea transmitiendo y no como un dibujo quieto. Todo arranca cuando la seccion entra en pantalla (.reveal -> .in), no antes. ------------------------------------- */ .mp-pais{ fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.28); stroke-width:1.6;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0; } .mapa-panel.in .mp-pais{ animation:mpTrazo 1.9s var(--ease-out-expo) forwards, mpRelleno .9s ease .95s forwards; } @keyframes mpTrazo{to{stroke-dashoffset:0}} @keyframes mpRelleno{to{fill-opacity:1}} .mp-red{opacity:0} .mapa-panel.in .mp-red{animation:mpAparece .9s ease 1.25s forwards} @keyframes mpAparece{to{opacity:1}} .mp-red line{stroke:rgba(46,204,113,.32);stroke-width:1.2;stroke-dasharray:4 5} /* el guion marcha 9px = el largo del patron (4+5), asi el loop es continuo */ /* Los dos loops infinitos corren SOLO con la seccion en pantalla: stroke-dashoffset no se compone en GPU, repinta. 11 lineas + 9 halos animando para siempre en segundo plano es bateria regalada. */ .mapa-panel.in.mapa-vivo .mp-red line{animation:mpFlujo 1.6s linear infinite 1.25s} @keyframes mpFlujo{to{stroke-dashoffset:-9}} .mp-nodo{ cursor:pointer;outline:none; opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3); } .mapa-panel.in .mp-nodo{ animation:mpNodo .55s var(--ease-out-expo) forwards; animation-delay:calc(.9s + var(--i,0) * .09s); } @keyframes mpNodo{to{opacity:1;transform:scale(1)}} .mp-nodo .hit{fill:transparent} .mp-nodo .dot{fill:#2ecc71;transition:r var(--dur) var(--ease-out-expo)} .mp-nodo .halo{fill:#2ecc71;opacity:0;transform-box:fill-box;transform-origin:center} .mapa-panel.in .mp-nodo .halo{opacity:.16} .mapa-panel.in.mapa-vivo .mp-nodo .halo{ opacity:0; animation:mpPulso 3s ease-out infinite; animation-delay:calc(1.5s + var(--i,0) * .33s); } @keyframes mpPulso{0%{transform:scale(.45);opacity:.32}70%{transform:scale(1);opacity:0}100%{opacity:0}} .mp-nodo:focus-visible .dot{r:10} @media (hover:hover){.mp-nodo:hover .dot{r:10}} .mp-nodo:focus-visible .hit{stroke:var(--naranja);stroke-width:2.5;fill:rgba(255,78,60,.12)} .mp-nodo.is-on .dot{r:10} /* Cartel de estado: el cliente pidio que al posicionarse salga "red operativa, disponibilidad de red y guardia activa" */ .mapa-tip{ position:absolute;z-index:3;pointer-events:none; background:#fff;color:var(--text);border-radius:var(--radius-sm); padding:12px 14px;min-width:186px; box-shadow:0 22px 44px -18px rgba(0,0,0,.55); transform:translate(-50%,-118%); /* El origen abajo al centro apunta al nodo del que sale. */ transform-origin:50% 100%; } /* Aparecia de golpe: usa el atributo [hidden], que es display:none y no se puede transicionar. Con una animacion sobre :not([hidden]) entra creciendo desde el nodo. 180ms: un tooltip que tarda mas se siente pegajoso. La salida es instantanea, que es lo normal en un tooltip de hover. */ .mapa-tip:not([hidden]){animation:tipEntra var(--dur-hover) var(--ease-out-expo)} @keyframes tipEntra{from{opacity:0;transform:translate(-50%,-108%) scale(.96)}} .mapa-tip b{display:block;font-size:var(--fs-xs);color:var(--azul-950);margin-bottom:6px} .mapa-tip span{display:flex;align-items:center;gap:7px;font-size:var(--fs-3xs);color:var(--text-muted);line-height:1.7} .mapa-tip i.ok{width:6px;height:6px;border-radius:50%;background:#2ecc71;flex-shrink:0} .mapa-tip::after{ content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px; background:#fff;transform:translateX(-50%) rotate(45deg); } .mapa-copy h2{max-width:15ch} .mapa-copy .lead{margin-top:16px;max-width:52ch} .mapa-legend{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px} .mapa-legend li{display:flex;align-items:center;gap:9px;font-size:var(--fs-2xs);color:rgba(255,255,255,.75)} .mapa-legend i{width:9px;height:9px;border-radius:50%;flex-shrink:0} .mapa-legend i.on{background:#2ecc71;box-shadow:0 0 0 4px rgba(46,204,113,.18)} .mapa-legend i.off{background:rgba(255,255,255,.28)} .mapa-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-cards);margin-top:var(--rhythm-sm)} .mapa-datos b{display:block;font-size:var(--fs-stat);font-weight:800;color:#fff;letter-spacing:-.02em;white-space:nowrap} .mapa-datos b .sym{color:var(--naranja);font-size:.55em} .mapa-datos>div>span{display:block;font-size:var(--fs-3xs);color:rgba(255,255,255,.6);margin-top:5px;line-height:1.4} .mapa-datos b .sym{display:inline} .mapa-hint{font-size:var(--fs-3xs);color:rgba(255,255,255,.5);margin-top:22px} .mapa-copy .btn{margin-top:14px} /* ============================================================ 8 · OPERACIÓN — 3 pilares ============================================================ */ .oper h2{max-width:20ch} .oper h2 .muted{color:#7d8ba7} .oper-band{ margin-top:var(--rhythm);background:var(--azul-950);border-radius:var(--radius-lg); padding:clamp(36px,5vw,64px); display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px); } .oper-item .ic{width:44px;height:44px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--naranja);margin-bottom:20px} .oper-item p{font-size:var(--fs-sm);color:rgba(255,255,255,.72);line-height:1.6} .oper-item p b{color:#fff;display:block;margin-bottom:6px;font-size:var(--fs-md)} /* ============================================================ 9 · SECTORES (grilla estilo team de Kora) ============================================================ */ .sectores{background:var(--azul);margin:0;padding:var(--section-y) 0} .sectores .logo-chip{margin-bottom:28px} .sectores h2{color:#fff;max-width:16ch} .sectores h2 .dim{color:rgba(255,255,255,.55)} /* Ilustracion "sitios dificiles, conectados" (solo home). El estado POR DEFECTO es el dibujo terminado: sin JS o con reduced-motion se ve completo y quieto. La coreografia solo corre cuando app.js le pone .armada (y .in al entrar). */ .sect-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center} .sect-ilu{width:100%;max-width:520px;justify-self:end} .sect-ilu svg{display:block;width:100%;height:auto;overflow:visible} .ilu-pts{opacity:.13} .ilu-ridge{stroke:rgba(255,255,255,.22);stroke-width:1.4} .ilu-link{stroke:rgba(255,255,255,.38);stroke-width:1.4} .ilu-link-sat{stroke-dasharray:.03 .025} .ilu-sitio{stroke:rgba(255,255,255,.9);stroke-width:1.3;transform-box:fill-box;transform-origin:50% 100%} .ilu-humo,.ilu-ondas{stroke:rgba(255,255,255,.45)} .ilu-aspas{transform-box:fill-box;transform-origin:50% 66.7%} .ilu-dot{fill:var(--naranja);stroke:var(--naranja);stroke-width:1.6;transform-box:fill-box;transform-origin:center} .ilu-hub-base{fill:var(--azul-950);stroke:#fff;stroke-width:1.6} .ilu-hub-core{fill:var(--naranja)} .ilu-hub-onda{fill:none;stroke:var(--naranja);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center} .ilu-flujo{stroke:var(--naranja);stroke-width:3;stroke-dasharray:.09 1.2;stroke-dashoffset:.09;opacity:0} /* Entrada: los sitios aparecen, las lineas salen del nodo y cada sitio se "enciende" cuando la linea llega. */ .sect-ilu.armada .ilu-sitio{opacity:0} .sect-ilu.armada .ilu-link{stroke-dasharray:1;stroke-dashoffset:1} .sect-ilu.armada .ilu-link-sat{stroke-dasharray:1;stroke-dashoffset:1} .sect-ilu.armada .ilu-dot{fill:var(--azul);stroke:#fff} .sect-ilu.armada .ilu-hub{opacity:0} .sect-ilu.armada.in .ilu-hub{animation:iluFade var(--dur-panel) var(--ease-out-expo) forwards} .sect-ilu.armada.in .ilu-sitio{animation:iluSitio var(--dur-reveal) var(--ease-out-expo) var(--d) forwards} .sect-ilu.armada.in .ilu-link{animation:iluTrazo .8s var(--ease-out-expo) var(--d) forwards} .sect-ilu.armada.in .ilu-link-sat{animation:iluTrazo .7s var(--ease-out-expo) var(--d) forwards,iluSat 0s linear calc(var(--d) + .7s) forwards} .sect-ilu.armada.in .ilu-dot{animation:iluDot var(--dur-panel) var(--ease-out-expo) var(--d) forwards} @keyframes iluFade{to{opacity:1}} @keyframes iluSitio{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes iluTrazo{to{stroke-dashoffset:0}} @keyframes iluSat{to{stroke-dasharray:.03 .025;stroke-dashoffset:0}} @keyframes iluDot{ 0%{fill:var(--azul);stroke:#fff;transform:scale(1)} 40%{fill:var(--naranja);stroke:var(--naranja);transform:scale(1.7)} 100%{fill:var(--naranja);stroke:var(--naranja);transform:scale(1)} } /* Vida en reposo: datos viajando por las lineas, el nodo latiendo y las aspas girando. Solo con .vivo (seccion en pantalla); fuera de pantalla se pausa. */ .sect-ilu.armada.in .ilu-flujo{animation:iluFlujo 2.6s linear var(--f) infinite paused} .sect-ilu.armada.in .ilu-hub-onda{animation:iluOnda 2.8s var(--ease-out-expo) 2.4s infinite paused} .sect-ilu.armada.in .ilu-hub-onda2{animation-delay:3.8s} .sect-ilu.armada.in .ilu-aspas{animation:iluGiro 7s linear 1s infinite paused} .sect-ilu.armada.in.vivo .ilu-flujo,.sect-ilu.armada.in.vivo .ilu-hub-onda,.sect-ilu.armada.in.vivo .ilu-aspas{animation-play-state:running} @keyframes iluFlujo{0%{stroke-dashoffset:.09;opacity:1}90%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}} @keyframes iluOnda{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(2.6)}} @keyframes iluGiro{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .sect-ilu .ilu-flujo,.sect-ilu .ilu-hub-onda{display:none} .sect-ilu .ilu-aspas{animation:none!important} } @media (max-width:900px){ .sect-intro{grid-template-columns:minmax(0,1fr)} .sect-ilu{justify-self:start;max-width:440px} } .sect-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:var(--rhythm)} .sect-row{ display:flex;align-items:center;gap:20px;padding:26px 18px; border-bottom:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm); transition:background var(--dur-hover) var(--ease-out-expo),transform var(--dur) var(--ease-out-expo); } @media (hover:hover){.sect-row:hover{background:rgba(255,255,255,.07);transform:translateY(-4px)}} .sect-row .ic{ width:58px;height:58px;border-radius:50%;flex-shrink:0; background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center; } .sect-row .tx b{display:block;font-size:var(--fs-lg);font-weight:800;color:#fff;letter-spacing:-.01em} .sect-row .tx span{font-size:var(--fs-xs);color:rgba(255,255,255,.7);line-height:1.45;display:block;margin-top:4px} .sect-row .idx{margin-left:auto;color:rgba(255,255,255,.62);font-weight:700;font-size:var(--fs-xs)} .sect-cta{ margin-top:var(--rhythm);display:flex;align-items:center;justify-content:space-between;gap:28px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15); border-radius:var(--radius);padding:clamp(24px,3vw,40px);flex-wrap:wrap; } .sect-cta h3{color:#fff;font-size:var(--fs-xl)} .sect-cta p{color:rgba(255,255,255,.7);font-size:var(--fs-sm);margin-top:6px} /* ============================================================ 9b · CLIENTES (muro de logos: corporativos + ISP) ============================================================ */ .clientes{background:var(--bg-elev)} .cli-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-7);flex-wrap:wrap} /* Iba con text-align:right: texto corrido en bandera izquierda, mas dificil de leer y ademas inconsistente con el bloque equivalente de Novedades, que va alineado a la izquierda en la misma posicion. */ .cli-note{font-size:var(--fs-xs);line-height:1.6;color:var(--text-muted);font-weight:600;max-width:34ch;padding-bottom:6px} .cli-group{margin-top:var(--rhythm)} .cli-group + .cli-group{ margin-top:44px;padding-top:44px;border-top:1px solid var(--border); } .cli-label{ display:flex;align-items:center;gap:12px; font-size:var(--fs-3xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--azul);margin-bottom:30px; } .cli-label .n{ font-size:var(--fs-3xs);font-weight:700;letter-spacing:.06em; color:var(--text-muted);background:var(--blanco); border:1px solid var(--border);border-radius:999px;padding:4px 10px; } .cli-label::after{content:"";flex:1;height:1px;background:var(--border)} /* El grupo ISP tiene 3 logos: en la grilla de 5 quedaban a la izquierda con dos columnas vacias y leia como si faltara algo. Debajo de 400px las 3 columnas no dan el ancho del logo mas grande, asi que ahi vuelve a 2. */ @media (min-width:401px){ .cli-group:last-child .cli-row{grid-template-columns:repeat(3,minmax(0,1fr))} } .cli-row{ list-style:none; display:grid;grid-template-columns:repeat(5,1fr); gap:clamp(30px,3.6vw,52px) clamp(24px,3vw,44px); align-items:center;justify-items:center; } .cli{ position:relative;flex:0 0 auto; height:calc(var(--h,34px) * var(--k,1)); width:calc(var(--h,34px) * var(--k,1) * var(--r)); color:var(--azul-950); transition:color var(--dur-hover) var(--ease-out-expo); } /* Capa monocroma: usa el canal alfa del logo como máscara y lo pinta con currentColor */ .cli::before{ content:"";position:absolute;inset:0; background:currentColor;opacity:.72; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; transition:opacity var(--dur-hover) var(--ease-out-expo); } .cli img{ width:100%;height:100%;object-fit:contain; opacity:0;transition:opacity var(--dur-hover) var(--ease-out-expo); } @media (hover:hover){.cli:hover::before{opacity:0}} @media (hover:hover){.cli:hover img{opacity:1}} @media (hover:none){ /* en tactil la capa mono no se ve nunca: sin mask no descarga sus 13 PNG (~260 KB) */ .cli::before{opacity:0;-webkit-mask:none;mask:none} .cli img{opacity:1} } /* ============================================================ 10 · TESTIMONIOS ============================================================ */ .testi-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap} .rating{display:flex;align-items:center;gap:12px;font-size:var(--fs-xs);color:var(--text-muted);font-weight:600} .rating .stars{color:var(--naranja-texto);letter-spacing:.18em} .testi-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--gap-cards);margin-top:var(--rhythm)} .testi-card{ background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg); padding:clamp(24px,3vw,40px);display:flex;flex-direction:column; transition:transform var(--dur) var(--ease-out-expo),box-shadow var(--dur-hover) var(--ease-out-expo); } @media (hover:hover){.testi-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px -30px rgba(6,27,65,.35)}} .testi-card .stars{color:var(--naranja-texto);letter-spacing:.2em;font-size:var(--fs-xs);margin-bottom:20px} .testi-card blockquote{font-size:var(--fs-md);font-weight:600;line-height:1.6;color:var(--text)} .testi-card.big blockquote{font-size:var(--fs-lg);letter-spacing:-.01em} .testi-card .who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:32px} .testi-card .who .av{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:var(--azul);color:#fff;font-weight:800;font-size:var(--fs-xs);display:grid;place-items:center} .testi-card .who .av.or{background:var(--naranja-fill)} .testi-card .who b{display:block;font-size:var(--fs-xs);color:var(--text)} .testi-card .who span{font-size:var(--fs-2xs);color:var(--text-muted)} /* Bloque de comentarios al pie del caso destacado. Sin esto el h3 quedaba pegado a las cifras y se leia como parte de esa card. */ .testi-mas{margin-top:var(--rhythm);padding-top:var(--rhythm-sm);border-top:1px solid var(--border)} .testi-mas>h3{ font-size:var(--fs-2xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--azul);margin-bottom:var(--sp-6); display:flex;align-items:center;gap:14px; } .testi-mas>h3::after{content:"";flex:1;height:1px;background:var(--border)} .testi-mas .testi-grid{margin-top:0} /* ============================================================ 11 · STATS + GRUPO ============================================================ */ .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border)} .stat{padding:clamp(28px,3.6vw,56px) clamp(16px,2vw,32px);border-right:1px solid var(--border)} .stat:last-child{border-right:none} .stat .num{font-size:var(--fs-num);font-weight:800;letter-spacing:-.03em;color:var(--azul-950);line-height:1;font-variant-numeric:tabular-nums} .stat .num .sym{color:var(--naranja-texto);font-size:.6em;font-weight:800;margin-left:2px} .stat p{font-size:var(--fs-xs);color:var(--text-muted);margin-top:14px;max-width:22ch} .grupo{ margin-top:80px;background:var(--bg-elev);border-radius:var(--radius-lg); padding:clamp(32px,5vw,64px); display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center; } .grupo-img{border-radius:var(--radius);aspect-ratio:4/3;background:url("/assets/equipo-oficina.jpg") center/cover} .grupo h3{font-size:var(--fs-2xl);max-width:16ch} .grupo p{color:var(--text-muted);margin-top:16px;max-width:46ch} .grupo-marcas{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap} .marca-pill{border:1px solid var(--border);border-radius:999px;padding:10px 20px;font-weight:700;font-size:var(--fs-xs);color:var(--azul)} .marca-pill small{display:block;font-weight:500;color:var(--text-muted);font-size:var(--fs-3xs)} .marca-pill.is-velnet{border-color:var(--naranja);color:var(--naranja-texto)} .grupo .btn{margin-top:30px} /* ============================================================ 12 · CASO DESTACADO ============================================================ */ .caso{background:var(--bg-elev);margin:0;padding:var(--section-y) 0} /* El primer bloque de cada pagina interna usaba --section-y (80-92px en movil) y el contenido quedaba pegado o TAPADO (-4 a 3px) bajo la pastilla fija del nav, que llega a 84px. La home no entra: su hero tiene layout propio. */ main>.sec-banda:first-child,main>.caso:first-child,main>.err404:first-child{padding-top:max(var(--section-y),var(--nav-clear))} main>.contacto:first-child .contacto-bleed{padding-top:max(var(--section-y),var(--nav-clear))} .caso-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-cards);margin-top:var(--rhythm)} .caso-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(26px,3.4vw,48px)} .caso-date{font-size:var(--fs-2xs);font-weight:700;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase} .caso-card h2{font-size:var(--fs-2xl);margin-top:14px;max-width:20ch} .caso-meta{display:grid;gap:14px;margin-top:var(--rhythm-sm)} .caso-meta .row{display:flex;justify-content:space-between;gap:18px;font-size:var(--fs-xs);border-bottom:1px dashed var(--border);padding-bottom:12px} .caso-meta .row .k{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-weight:600} .caso-meta .row .v{font-weight:700;color:var(--text)} .caso-nums{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-cards);margin-top:var(--gap-cards)} .caso-num{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:clamp(22px,2.6vw,36px)} .caso-num .num{font-size:var(--fs-num);font-weight:800;color:var(--azul-950);letter-spacing:-.03em;line-height:1} .caso-num .num .sym{color:var(--naranja-texto);font-size:.55em} .caso-num p{font-size:var(--fs-xs);color:var(--text-muted);margin-top:10px} .caso-right{display:flex;flex-direction:column;gap:var(--gap-cards)} /* Tenia una cita que era el MISMO testimonio del "Gerente de Operaciones" que aparece completo 700px mas abajo, misma atribucion. Sacada la cita, el bloque quedo solo con los chips: tres chips no necesitan una caja con borde y 26px de padding. Sin caja, y los chips un punto mas grandes. Las reglas de .caso-quote p / .who / .av quedaron muertas y se van. */ .caso-quote{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:2px} .caso-quote .tags{display:flex;flex-wrap:wrap;gap:8px} .caso-quote .tags .chip{font-size:var(--fs-2xs);padding:8px 15px} .caso-img{flex:1;min-height:280px;border-radius:var(--radius);background:linear-gradient(180deg,transparent 40%,rgba(6,27,65,.5)),url("/assets/datacenter.jpg") 78% center/128%} .caso-btn{width:100%;justify-content:center} /* ============================================================ 13 · NIVELES DE SERVICIO (pricing) ============================================================ */ .planes-head{text-align:center;max-width:720px;margin-inline:auto} .planes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-cards);margin-top:var(--rhythm);align-items:stretch} .plan{ border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(26px,2.8vw,40px); display:flex;flex-direction:column;background:#fff;position:relative; transition:transform var(--dur) var(--ease-out-expo),box-shadow var(--dur-hover) var(--ease-out-expo); } @media (hover:hover){.plan:hover{transform:translateY(-6px);box-shadow:0 30px 60px -32px rgba(6,27,65,.35)}} .plan .p-name{font-size:var(--fs-lg);font-weight:800;color:var(--azul-950)} .plan .p-for{font-size:var(--fs-xs);color:var(--text-muted);margin-top:8px;min-height:44px} .plan .p-price{font-size:var(--fs-md);font-weight:800;color:var(--azul);margin-top:22px} .plan .p-price small{display:block;font-weight:500;color:var(--text-muted);font-size:var(--fs-2xs);margin-top:2px} .plan ul{list-style:none;margin-top:26px;display:grid;gap:12px} .plan li{display:flex;gap:10px;font-size:var(--fs-xs);font-weight:500;color:var(--text)} .plan li .ck{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--bg-elev);color:var(--azul);display:grid;place-items:center;margin-top:1px} /* margin-top estaba declarado dos veces: el "auto" que empuja el boton al pie de la card lo pisaba un "32px" posterior, y los tres botones quedaban a alturas distintas segun cuantos items tuviera cada plan. */ .plan .btn{margin-top:auto;padding-top:16px;justify-content:center} .plan ul{margin-bottom:32px} .plan.popular{background:var(--azul-950);border-color:var(--azul-950);transform:scale(1.03)} @media (hover:hover){.plan.popular:hover{transform:scale(1.03) translateY(-6px)}} .plan.popular .p-name,.plan.popular li{color:#fff} .plan.popular .p-for{color:rgba(255,255,255,.7)} .plan.popular .p-price{color:#fff} .plan.popular .p-price small{color:rgba(255,255,255,.6)} .plan.popular li .ck{background:rgba(255,255,255,.12);color:var(--naranja)} .plan .pop-badge{ position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--naranja-fill);color:#fff;font-size:var(--fs-3xs);font-weight:800;letter-spacing:.08em; text-transform:uppercase;padding:7px 16px;border-radius:999px;white-space:nowrap; } .planes-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:var(--rhythm-sm);color:var(--text-muted);font-size:var(--fs-xs);flex-wrap:wrap;text-align:center} .planes-foot .av{width:40px;height:40px;border-radius:50%;background:var(--azul);color:#fff;font-weight:800;font-size:var(--fs-2xs);display:grid;place-items:center} /* ============================================================ 14 · FAQ ============================================================ */ .faq h2.giant{font-size:var(--fs-giant);text-align:center;letter-spacing:-.03em} .faq-box{max-width:780px;margin:var(--rhythm) auto 0;background:var(--bg-elev);border-radius:var(--radius-lg);padding:clamp(18px,2.6vw,32px)} .faq-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px} .faq-tab{ border-radius:999px;padding:0 20px;min-height:44px;display:inline-flex;align-items:center; font-size:var(--fs-xs);font-weight:700;color:var(--text-muted); transition:background var(--dur-hover),color var(--dur-hover),scale var(--dur-press) var(--ease-out-expo); } .faq-tab:active{scale:.96} .faq-tab.active{background:var(--azul);color:#fff} @media (hover:hover){.faq-tab:not(.active):hover{background:var(--bg-hover)}} .faq-list{display:grid;gap:12px} .faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .faq-q{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px; padding:20px 24px;font-size:var(--fs-md);font-weight:700;color:var(--azul-950);text-align:left; transition:background var(--dur-hover) ease,color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out-expo); } /* Es un