/* ============================================================ ZAIWEBS — Home en modo oscuro (dirección A) ------------------------------------------------------------ Se carga SOLO en index.html, después de los otros CSS. La estrategia es redefinir los design tokens en , no reescribir cada componente. Como todo el resto del CSS consume var(--c-...), la página entera cambia de mundo con este bloque. Lo que viene después son solo las piezas nuevas del hero y los ajustes de contraste que el fondo oscuro obliga. Si algún día el sitio entero va a oscuro, estos tokens se mudan a variables.css y este archivo desaparece casi por completo. ============================================================ */ body.tema-oscuro { /* Fondos */ --c-bg: #071A2C; /* base */ --c-bg-alt: #0C2438; /* alternancia de secciones. Hubo un intento de bajarlo a #0A2032 para suavizar el corte, pero nunca llegó a verse: las bandas se pintaban con un gemelo en RGB que quedó sin actualizar. Se vuelve a este, que es el que da 4.68 puntos de salto y hace que el cambio se note. */ --c-bg-dark: #04121F; /* el más profundo: CTA y footer */ --c-superficie: #102B41; /* tarjetas sobre el fondo base */ /* Texto — verificado sobre #071A2C: #E7EFF6 = 14.1:1 · #9FB4C6 = 7.4:1 · #35D6EE = 9.5:1 */ --c-text: #E7EFF6; --c-text-muted: #9FB4C6; --c-text-invert: #E7EFF6; --c-primary: #E7EFF6; /* invertido: lo que era azul oscuro ahora es claro */ --c-border: #1E3A52; /* Acento: sobre oscuro el cian brilla, no hace falta la versión ink */ --c-accent: #00B8D4; --c-accent-ink: #35D6EE; --c-accent-hover:#35D6EE; --c-accent-soft: #0E3245; background: var(--c-bg); color: var(--c-text); } /* ============ Ajustes que el fondo oscuro obliga ============ */ body.tema-oscuro .site-header { background: rgba(7, 26, 44, 0.86); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; } body.tema-oscuro .site-header.is-scrolled { border-bottom-color: var(--c-border); box-shadow: none; } body.tema-oscuro .menu-toggle__icon span { background: var(--c-text); } body.tema-oscuro .mobile-menu { background: var(--c-bg); } /* El botón primario mantiene el cian de fondo con texto oscuro: 6.5:1 */ body.tema-oscuro .btn-primary { background: var(--c-accent); color: #05202F; } body.tema-oscuro .btn-primary:hover { background: var(--c-accent-ink); color: #05202F; } body.tema-oscuro .btn-secondary { border-color: #2E4A63; color: var(--c-text); } body.tema-oscuro .btn-secondary:hover { background: transparent; border-color: var(--c-text-muted); color: #FFFFFF; } /* Tarjetas: se levantan del fondo con superficie propia, no con sombra */ body.tema-oscuro .card, body.tema-oscuro .portfolio-card, body.tema-oscuro .testimonio { background: var(--c-superficie); border-color: var(--c-border); } body.tema-oscuro .portfolio-card:hover, body.tema-oscuro .card:hover { border-color: #2F5570; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42); } body.tema-oscuro .portfolio-card__tag { background: #0B2336; color: var(--c-text-muted); } body.tema-oscuro .badge { background: var(--c-accent-soft); color: var(--c-accent-ink); } body.tema-oscuro .filter-chip { border-color: var(--c-border); color: var(--c-text-muted); } body.tema-oscuro .filter-chip:hover { color: var(--c-text); border-color: var(--c-text-muted); } body.tema-oscuro .filter-chip[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #05202F; } body.tema-oscuro .why-item__icon { background: var(--c-accent-soft); } body.tema-oscuro .why-item__icon svg { stroke: var(--c-accent-ink); } body.tema-oscuro .card__icon, body.tema-oscuro .card__icon svg { color: var(--c-accent-ink); stroke: var(--c-accent-ink); } body.tema-oscuro .process-step__number { color: var(--c-accent-ink); } /* Color plano y filete, sin degradado. Se probó desvaneciendo los bordes y quedaba más suave, pero se perdía justamente lo que se buscaba: que el cambio de sección se note. El degradado disolvía la línea y también el aviso de que empezó otra cosa. */ body.tema-oscuro .section-alt { background: var(--c-bg-alt); border-block: 1px solid var(--c-border); } body.tema-oscuro .cta-final { background: var(--c-bg-dark); } /* La CTA final y el pie comparten el mismo fondo, así que sin filete se leen como un solo bloque larguísimo y la CTA pierde el cierre. Es el único borde entre secciones que no viene de .section-alt. */ body.tema-oscuro .site-footer { background: var(--c-bg-dark); border-top: 1px solid var(--c-border); } /* ============ Hero ============ */ body.tema-oscuro .hero { position: relative; overflow: hidden; /* Arriba menos que abajo, a propósito. El header es sticky y ocupa su propio lugar en el flujo, así que este relleno no está despejando nada: era aire decorativo. Eran 120px y dejaban las solapas muy hundidas. Los dos valores no son iguales porque un bloque centrado en su caja se percibe caído: el ojo lo lee más arriba de lo que está. Con el de abajo un poco mayor, el conjunto queda ópticamente centrado. */ padding-block: clamp(2rem, 3.6vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); max-width: none; /* el hero rompe el container para que el fondo sea a sangre */ padding-inline: 0; } .hero__fondo { position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 184, 212, 0.26), transparent 72%) 20% 28% / 56% 56% no-repeat, radial-gradient(closest-side, rgba(27, 69, 112, 0.55), transparent 72%) 78% 66% / 62% 62% no-repeat; filter: blur(14px); animation: derivar 26s ease-in-out infinite alternate; } @keyframes derivar { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.09); } } body.tema-oscuro .hero__inner { position: relative; z-index: 2; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); } /* Titular grande, entra línea por línea */ body.tema-oscuro .hero__title { font-size: clamp(2.5rem, 6.6vw, 4.6rem); line-height: 0.99; letter-spacing: -0.035em; color: #FFFFFF; max-width: 16ch; margin-bottom: var(--sp-6); } /* overflow:hidden es lo que permite que el texto entre desde abajo, pero recorta las colas de g, j, p, q, y. El padding agranda la caja y el margen negativo lo descuenta, así las líneas no se separan. */ .linea { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; } .linea > span { display: block; transform: translateY(120%); opacity: 0; animation: subir 820ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .linea:nth-child(2) > span { animation-delay: 95ms; } .linea:nth-child(3) > span { animation-delay: 190ms; } @keyframes subir { to { transform: translateY(0); opacity: 1; } } .acento { color: var(--c-accent-ink); font-style: normal; } body.tema-oscuro .hero__lede { color: var(--c-text-muted); font-size: 1.1rem; max-width: 48ch; } /* ============ Reveal con más recorrido ============ El original desplazaba 20px, tan poco que no se percibía. Con 38px y un pelo de escala, el movimiento se lee. */ body.tema-oscuro .reveal-init { opacity: 0; transform: translateY(38px) scale(0.985); } body.tema-oscuro .reveal-init.is-visible { opacity: 1; transform: none; transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1), transform 640ms cubic-bezier(0.22, 1, 0.36, 1); } /* ============ Tarjetas de proyecto con más vida ============ */ body.tema-oscuro .portfolio-card { transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms ease, border-color 280ms ease; } body.tema-oscuro .portfolio-card:hover { transform: translateY(-7px); } body.tema-oscuro .portfolio-card__img { background: #0A2540; transition: transform 460ms cubic-bezier(0.4, 0, 0.2, 1); } body.tema-oscuro .portfolio-card:hover .portfolio-card__img { transform: scale(1.05); } body.tema-oscuro .portfolio-card__link { color: var(--c-accent-ink); } body.tema-oscuro .portfolio-card__link svg { transition: transform 220ms ease; } body.tema-oscuro .portfolio-card:hover .portfolio-card__link svg { transform: translate(3px, -3px); } /* ============ Testimonios sobre oscuro ============ */ body.tema-oscuro .testimonio__cita { color: var(--c-text); } body.tema-oscuro .testimonio__cliente { color: #FFFFFF; } body.tema-oscuro .testimonio__rubro { color: var(--c-text-muted); } body.tema-oscuro .testimonio__pie { border-top-color: var(--c-border); } /* ============ WhatsApp siempre a la vista ============ */ body.tema-oscuro .whatsapp-float { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } /* En celular queda solo el círculo con el ícono. Antes se expandía a una píldora con la palabra "Escribime": 153px de ancho flotando sobre una pantalla de 390, que es el 39% del ancho tapando contenido de forma permanente. El ícono de WhatsApp ya se reconoce solo; la palabra costaba más de lo que aportaba. El aria-label del enlace sigue diciendo qué hace, así que para un lector de pantalla no cambia nada. */ /* ============ Respeto por quien pide menos movimiento ============ */ @media (prefers-reduced-motion: reduce) { .hero__fondo { animation: none; } .linea > span { animation: none; transform: none; opacity: 1; } body.tema-oscuro .reveal-init, body.tema-oscuro .reveal-init.is-visible { opacity: 1; transform: none; transition: none; } body.tema-oscuro .portfolio-card:hover { transform: none; } body.tema-oscuro .portfolio-card:hover .portfolio-card__img { transform: none; } } /* ============================================================ LANDING — una sola página ============================================================ */ /* Las anclas tienen que frenar por debajo del header pegajoso */ .seccion-ancla { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); } @media (max-width: 899px) { .seccion-ancla { scroll-margin-top: calc(var(--header-h-mobile) + var(--sp-4)); } } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Enlace de la nav correspondiente a la sección visible */ body.tema-oscuro .site-nav__link.is-active { color: #FFFFFF; } .titulo-menor { font-size: var(--fs-h3); font-weight: 700; color: var(--c-text); } /* ============ Servicios: columna fija + columna que scrollea ============ La izquierda queda pegada mientras la derecha recorre los servicios. Es position: sticky puro, sin JavaScript. Debajo de 900px las dos columnas se apilan y la izquierda deja de pegarse. */ .servicios-doble { display: grid; gap: var(--sp-12); grid-template-columns: 1fr; } @media (min-width: 900px) { .servicios-doble { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-16); align-items: start; } .servicios-fijo { position: sticky; top: calc(var(--header-h) + var(--sp-12)); } } .servicios-fijo h2 { margin-bottom: var(--sp-4); } .servicios-fijo .lede { margin-bottom: var(--sp-6); } .servicios-fijo__nota { color: var(--c-text-muted); font-size: var(--fs-small); margin-bottom: var(--sp-8); max-width: 34ch; } .servicios-lista { display: flex; flex-direction: column; gap: var(--sp-8); } .servicio { background: var(--c-superficie, var(--c-bg-alt)); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-8); transition: border-color 260ms ease, transform 260ms cubic-bezier(0.4, 0, 0.2, 1); } .servicio:hover { border-color: #2F5570; transform: translateY(-3px); } .servicio__icono { width: 44px; height: 44px; border-radius: var(--radius); background: var(--c-accent-soft); display: grid; place-content: center; margin-bottom: var(--sp-5, 1.25rem); } .servicio__icono svg { width: 22px; height: 22px; stroke: var(--c-accent-ink); fill: none; stroke-width: 2; } .servicio__titulo { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--sp-3); color: var(--c-text); } .servicio__intro { color: var(--c-text-muted); margin-bottom: var(--sp-6); } .servicio .check-list { margin-bottom: var(--sp-6); } .servicio__meta { font-size: var(--fs-small); color: var(--c-text-muted); margin-bottom: var(--sp-6); } .servicio__meta strong { color: var(--c-text); } @media (prefers-reduced-motion: reduce) { .servicio:hover { transform: none; } } /* ============ Tarjeta final de la pista: lleva al portfolio ============ */ .tarjeta-mas { flex: 0 0 clamp(240px, 24vw, 320px); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); padding: var(--sp-8); border: 1px dashed var(--c-border); border-radius: var(--radius-lg); background: transparent; transition: border-color 260ms ease, background 260ms ease; } .tarjeta-mas:hover { border-color: var(--c-accent); background: var(--c-accent-soft); } .tarjeta-mas h3 { font-size: var(--fs-h3); color: var(--c-text); margin: 0; } .tarjeta-mas p { color: var(--c-text-muted); font-size: var(--fs-small); margin: 0; } /* Los tildes venían en verde de éxito. Sobre el fondo oscuro el cian de marca es más coherente y contrasta mejor. */ body.tema-oscuro .check-list svg { color: var(--c-accent-ink); stroke: var(--c-accent-ink); } /* Dupla de botones bajo una grilla: uno convierte, el otro deja explorar. */ .acciones-par { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-12); } @media (max-width: 520px) { .acciones-par { flex-direction: column; align-items: stretch; } .acciones-par .btn { width: 100%; } } /* ============================================================ Hero con solapas por servicio ============================================================ */ /* A todo el ancho, sin imagen: el titular ocupa el escenario */ body.tema-oscuro .hero__inner { display: block; max-width: 1000px; } .hero-solapas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); padding: 5px; border: 1px solid var(--c-border); border-radius: 999px; width: fit-content; background: rgba(16, 43, 65, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-solapa { padding: 0.7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: var(--fs-small); color: var(--c-text-muted); white-space: nowrap; min-height: 44px; transition: background 220ms ease, color 220ms ease; } .hero-solapa:hover { color: var(--c-text); } .hero-solapa.is-activa { background: var(--c-text); /* claro sobre oscuro: 14:1 con el texto */ color: #05202F; } .hero-solapa:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } @media (max-width: 620px) { .hero-solapas { width: 100%; border-radius: var(--radius-lg); justify-content: stretch; } .hero-solapa { flex: 1 1 auto; text-align: center; padding-inline: 0.9rem; } } .hero__eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-accent-ink); margin-bottom: var(--sp-4); } body.tema-oscuro .hero__title { max-width: 18ch; font-size: clamp(2.5rem, 7.2vw, 5rem); } /* Sin imagen al costado, la bajada puede respirar más */ body.tema-oscuro .hero__lede { max-width: 54ch; } /* Los paneles ocultos no ocupan lugar; el visible reproduce la entrada de líneas cada vez que se lo elige. */ .hero-panel[hidden] { display: none; } .hero-panel:focus { outline: none; } @media (prefers-reduced-motion: reduce) { .hero-solapa { transition: none; } } /* ============================================================ Hero centrado Para volver al alineado a la izquierda, borrá este bloque entero. ============================================================ */ body.tema-oscuro .hero__inner { text-align: center; } .hero-solapas { margin-inline: auto; } /* El

del hero hereda max-width 65ch: sin margen automático queda pegado a la izquierda aunque su texto esté centrado. */ .hero__eyebrow { margin-inline: auto; } body.tema-oscuro .hero__title { margin-inline: auto; max-width: 20ch; } /* Centrado, el texto corrido se lee peor: la bajada va más angosta */ body.tema-oscuro .hero__lede { margin-inline: auto; max-width: 46ch; } body.tema-oscuro .hero__actions { justify-content: center; } @media (max-width: 620px) { /* En pantallas angostas el centrado deja renglones muy dispares: conviene volver a la izquierda, que se lee mejor. */ body.tema-oscuro .hero__inner { text-align: left; } .hero__eyebrow, body.tema-oscuro .hero__title, body.tema-oscuro .hero__lede { margin-inline: 0; } body.tema-oscuro .hero__actions { justify-content: flex-start; } } /* ============================================================ Cinta de clientes Sin encabezado: los logos son el mensaje. ============================================================ */ /* La tira NO usa el tono claro de .section-alt aunque lleve esa clase. Motivo: ese tono es el de las secciones, y esto no es una sección — no tiene título ni contenido propio, es una tira de prueba social. Vestida de sección, el ojo la lee como una sección vacía. Va en el tono más profundo, el mismo de la CTA final. Tres consecuencias: los logos blancos resaltan más, el salto contra el hero y contra Servicios es de 3.67 puntos de L* de cada lado (se lee), y la tira gana identidad propia en vez de imitar a las bandas de arriba y abajo. Sin borde arriba y con borde abajo: así la tira sale del hero sin costura —parece que el hero se hunde— pero cierra contra Servicios con un límite claro. Con borde arriba se veía como un cajón pegado; sin el de abajo, Servicios arrancaba sin aviso. El relleno es la mitad del de una sección. Antes eran 128px de aire para 55px de logo: el 70% de la banda era vacío. */ .clientes { padding-block: clamp(1.6rem, 2.4vw, 2.2rem); background: var(--c-bg-dark); border-top: 0; border-bottom: 1px solid var(--c-border); } body.tema-oscuro .clientes { background: var(--c-bg-dark); } /* El viewport recorta la cinta y la desvanece en los bordes. Sin la máscara los logos aparecen y desaparecen de golpe contra el borde de la pantalla, que es lo que delata que hay un truco atrás. Va a todo el ancho a propósito: una cinta que arranca y termina dentro del container se ve como una caja, no como algo que sigue de largo. */ .clientes-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } /* ---- Estado base: SIN JavaScript ---- Una sola tanda, quieta, envuelta y centrada. Es también lo que se ve con "reducir movimiento" activado. Todo lo de la animación cuelga de la clase .cinta-lista, que agrega main.js recién después de clonar las tandas: así nunca se ve una cinta a medio armar. */ .clientes-cinta { display: flex; justify-content: center; } .clientes-tanda { --gap: clamp(2rem, 3.4vw, 3.4rem); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--gap); row-gap: clamp(1.75rem, 3vw, 2.5rem); padding-inline: calc(var(--gap) / 2); list-style: none; margin-inline: auto; max-width: var(--container); } .clientes-tanda li { display: flex; align-items: center; justify-content: center; flex: none; } /* ---- Estado con JavaScript: la cinta desfila ---- main.js clona la tanda hasta que la cinta mide más del doble que la pantalla, escribe cuántas quedaron en --tandas y pone esta clase. El desplazamiento es -100% ÷ --tandas: exactamente el ancho de UNA tanda. Al llegar ahí la tanda 2 está donde arrancó la 1, así que volver a cero no se nota y el loop parece infinito. Calcularlo con la variable (en vez de un -33% escrito a mano) es lo que permite que la cantidad de copias cambie según el tamaño de pantalla sin romper el calce. */ .clientes-cinta.cinta-lista { width: max-content; justify-content: flex-start; animation: desfilar var(--dur-cinta, 30s) linear infinite; will-change: transform; } /* width:max-content en la cinta no alcanza: sin flex:none, flex igual comprimiría las tandas, y ahí el tercio dejaría de calzar. */ .cinta-lista .clientes-tanda { flex: none; flex-wrap: nowrap; max-width: none; margin-inline: 0; } @keyframes desfilar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100% / var(--tandas, 3)), 0, 0); } } /* SIN pausa al pasar el mouse. La había puesto "por si alguien quiere mirar un logo", y era una mala idea: la tira ocupa todo el ancho y está justo debajo del hero, así que al scrollear el cursor le queda encima casi siempre. La cinta se frenaba sola y parecía rota. Además no había nada que mirar con calma: los logos no son enlaces ni tienen texto para leer. Una pausa que no sirve para nada, que se dispara sin querer y que hace parecer que la página se colgó. */ /* SIN filtro de blanqueo. Antes había un `filter: brightness(0) invert(1)` para forzar todo a blanco: destruye los logos que tienen texto calado adentro de una forma (CELP y SWS quedaban como manchas blancas macizas, porque el filtro pinta de blanco tanto el fondo del badge como las letras que van encima). Los siete archivos ya vienen en blanco, así que no hace falta. Si alguna vez entra un logo oscuro, se blanquea el archivo, no acá. */ .clientes-tanda img { width: auto; max-width: none; object-fit: contain; opacity: 0.78; transition: opacity 260ms ease; } /* Altos por proporción, no uno solo para todos. Un logo apaisado y uno cuadrado al mismo alto no pesan lo mismo en la fila: el cuadrado se ve diminuto. Estos valores igualan el área aproximada de cada uno. */ .clientes-tanda .logo--ancho img { height: clamp(26px, 2.6vw, 36px); } .clientes-tanda .logo--medio img { height: clamp(33px, 3.3vw, 45px); } .clientes-tanda .logo--alto img { height: clamp(41px, 4.1vw, 56px); } /* Excepción para el logo que trae dos renglones de texto adentro (CELP). Con el alto de `logo--ancho` los renglones quedaban en 6px y se leían como una mancha. Va un poco más grande aunque rompa el equilibrio de áreas: entre un logo parejo pero ilegible y uno legible, gana el legible. */ .clientes-tanda .logo--lockup img { height: clamp(31px, 3.1vw, 43px); } .clientes-tanda img:hover { opacity: 1; } /* Con "reducir movimiento" main.js ni siquiera clona, así que alcanza con apagar la máscara y las transiciones: el estado base ya es la grilla quieta. */ @media (prefers-reduced-motion: reduce) { .clientes-viewport { -webkit-mask-image: none; mask-image: none; padding-inline: var(--sp-6); } .clientes-tanda img { transition: none; } } /* ============================================================ Servicios — tarjetas que se reemplazan al scrollear ============================================================ .pin-alto es una caja alta y vacía cuyo único trabajo es dar scroll. .pin-clavado va adentro con position:sticky y se queda quieta mientras ese scroll se consume. La altura la escribe main.js, porque depende del alto de la ventana y de cuántas tarjetas haya. Todo cuelga de .con-pin, que main.js agrega solo cuando corresponde. Sin esa clase el bloque se comporta como la lista de siempre, que es lo que se ve en celular, con movimiento reducido o sin JavaScript. ============================================================ */ @media (min-width: 900px) { /* Sin relleno de sección: la caja pegajosa ya centra su contenido en el alto de la ventana. Los dos juntos daban 274px vacíos antes del título. */ #servicios { padding-block: 0; } .pin-alto.con-pin { position: relative; } .con-pin .pin-clavado { position: sticky; top: var(--header-h); min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; } /* Las cuatro tarjetas comparten la MISMA celda de grilla: por eso se superponen en vez de apilarse. El alto de la pila lo marca la más alta, así que al cambiar de tarjeta la caja no salta de tamaño. */ .con-pin .servicios-lista { display: grid; grid-template-columns: 1fr; gap: 0; } .con-pin .servicio { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 420ms; } /* visibility además de opacity: una tarjeta en opacity:0 sigue siendo clickeable y sus enlaces siguen entrando en el recorrido del tabulador. El delay en la transición de visibility es para que no desaparezca de golpe antes de terminar de desvanecerse. */ .con-pin .servicio.is-activa { opacity: 1; visibility: visible; transition-delay: 0s; } /* La que todavía no llegó espera abajo, la que ya pasó se va para arriba: el movimiento cuenta hacia dónde va el scroll. Sin esto el cambio se nota poco si el visitante está leyendo en vez de mirando. */ .con-pin .servicio { transform: translateY(26px); } .con-pin .servicio.ya-paso { transform: translateY(-26px); } .con-pin .servicio.is-activa { transform: translateY(0); } /* El hover no puede mover la tarjeta acá adentro: usa el mismo transform que la transición de entrada y salida, y se pisarían. */ .con-pin .servicio.is-activa:hover { transform: translateY(0); } .con-pin .pin-progreso { display: block; } } /* Barra de avance. Escondida por defecto: sin pin no significa nada. */ .pin-progreso { display: none; height: 2px; margin-top: var(--sp-10, 2.5rem); background: var(--c-border); border-radius: 2px; overflow: hidden; } .pin-progreso > span { display: block; height: 100%; width: 0; background: var(--c-accent); border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .con-pin .servicio { transition: none; } } /* ============================================================ Estudio — presentación en dos columnas y tarjetas numeradas ============================================================ */ .estudio-doble { display: grid; gap: var(--sp-12); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { /* La izquierda un poco más angosta que la derecha: es texto corrido y por encima de 70 caracteres por renglón se vuelve incómodo de leer. */ .estudio-doble { grid-template-columns: 0.92fr 1.08fr; gap: var(--sp-16); } } /* :not(.volanta) no es un detalle: la volanta también es un

hijo directo, así que sin la exclusión se comía su color celeste y encima le sumaba un margen superior de 20px que ninguna otra sección tiene. Eso hacía que esta columna arrancara 19px más abajo que la de al lado. */ .estudio-doble__texto > p:not(.volanta) { color: var(--c-text-muted); margin-top: var(--sp-5, 1.25rem); } /* Un solo párrafo cargando toda la presentación: va un punto más grande que el texto corrido normal, para que tenga el peso de una bajada y no el de un párrafo suelto. El del nombre es lo único que se destaca. */ .estudio-doble__lede { font-size: 1.0625rem; line-height: 1.65; max-width: 46ch; } .estudio-doble__lede strong { color: var(--c-text); font-weight: 700; } .estudio-doble__texto h2 { margin-bottom: var(--sp-2); } /* ---- Píldoras de tecnología ---- */ .pildoras { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: var(--sp-8) 0 0; padding: 0; } .pildora { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem var(--sp-4); border: 1px solid var(--c-border); border-radius: 999px; font-size: var(--fs-small); color: var(--c-text-muted); } /* El puntito de color: hace que la lista se lea como un conjunto y no como botones. Va en ::before para no ensuciar el HTML con spans vacíos. */ .pildora::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); flex: none; } .estudio-doble__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); } /* ---- Columna derecha ---- */ .estudio-doble__pruebas { display: flex; flex-direction: column; gap: var(--sp-5, 1.25rem); } .dato-grande { display: flex; align-items: center; gap: var(--sp-6); background: var(--c-superficie); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-8); } .dato-grande__cifra { font-size: clamp(2.6rem, 4.5vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--c-text); margin: 0; flex: none; } .dato-grande__texto { margin: 0; color: var(--c-text-muted); font-size: var(--fs-small); max-width: 30ch; } .capacidad { background: var(--c-superficie); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-8); } .capacidad__titulo { font-size: 1.0625rem; margin-bottom: var(--sp-2); } .capacidad p { color: var(--c-text-muted); margin: 0; } /* ---- El proceso: línea de tiempo ---- Sin tarjetas a propósito. Con el molde de tarjeta (superficie, borde, esquinas) el bloque se leía como una sección más, huérfana: era la misma caja que Servicios, las capacidades y los testimonios. Los números sobre una línea que los une hacen que el 01–04 signifique orden de verdad. En pantallas anchas la línea es horizontal y los pasos van en fila; en angostas la línea baja por la izquierda y los pasos se apilan. El anillo del color del fondo alrededor de cada número es lo que "corta" la línea para que no lo atraviese. */ .numeradas { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; position: relative; } /* línea vertical (pantallas angostas): pasa por el centro de los números */ .numeradas::before { content: ""; position: absolute; left: 20px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, transparent, var(--c-border) 6%, var(--c-border) 94%, transparent); } .numerada { position: relative; } .numerada__cabeza { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); } .numerada__numero { flex: none; width: 42px; height: 42px; display: grid; place-content: center; border-radius: var(--radius); background: var(--c-accent); color: #05202F; /* 6.5:1 sobre el cian, igual que el botón primario */ font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; position: relative; z-index: 1; /* el anillo que interrumpe la línea al pasar por atrás del número */ box-shadow: 0 0 0 6px var(--c-bg); } .numerada h4 { margin: 0; font-size: 1.0625rem; line-height: 1.25; } .numerada p { color: var(--c-text-muted); margin: 0; /* alineado con el título, no con el número: en angosto la línea vertical pasa por la izquierda y el texto no debe pisarla */ padding-left: calc(42px + var(--sp-4)); } @media (min-width: 900px) { .numeradas { grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); } /* línea horizontal: a la altura del centro de los números (21px) */ .numeradas::before { left: 2%; right: 2%; top: 21px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, transparent, var(--c-border) 6%, var(--c-border) 94%, transparent); } /* el número arriba, el título debajo: cada paso es una columnita */ .numerada__cabeza { flex-direction: column; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-2); } .numerada p { padding-left: 0; font-size: 0.9375rem; } } /* ============================================================ Resplandor de fondo fuera del hero ------------------------------------------------------------ Misma receta que .hero__fondo, con dos diferencias: 1. Se mueve más. La deriva del hero dura 26s y recorre poco, porque ahí compite con el titular que entra línea por línea. Acá dura 17s y recorre casi el doble. 2. Solo se anima mientras la sección está en pantalla. main.js pone y saca .glow-activo con un IntersectionObserver. Sin eso el navegador sostiene dos animaciones con blur para siempre, aunque estén a tres pantallas de distancia, y eso se paga en el scroll de un celular. ============================================================ */ .fondo-glow { position: absolute; inset: -45%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 184, 212, 0.20), transparent 72%) 24% 30% / 58% 58% no-repeat, radial-gradient(closest-side, rgba(27, 69, 112, 0.48), transparent 72%) 76% 68% / 64% 64% no-repeat; filter: blur(16px); } .fondo-glow.glow-activo { animation: derivar-amplio 17s ease-in-out infinite alternate; will-change: transform; } @keyframes derivar-amplio { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(7%, 5%, 0) scale(1.16); } } /* El resplandor de la CTA es un poco más intenso: es el cierre de la página y no tiene contenido compitiéndole al lado. */ .fondo-glow--cta { background: radial-gradient(closest-side, rgba(0, 184, 212, 0.26), transparent 70%) 28% 42% / 62% 78% no-repeat, radial-gradient(closest-side, rgba(27, 69, 112, 0.55), transparent 72%) 74% 58% / 66% 82% no-repeat; } /* --- Contenedores --- */ /* En Servicios el recorte va en .pin-clavado, que ES el elemento sticky. Si se pusiera en la

, el sticky dejaría de pegarse. */ .pin-clavado { position: relative; overflow: hidden; } .pin-clavado > .container { position: relative; z-index: 1; } .cta-final { position: relative; overflow: hidden; } .cta-final > .container { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .fondo-glow.glow-activo { animation: none; } } /* ============================================================ Contacto — argumento a la izquierda, formulario a la derecha ============================================================ */ .contacto-doble { display: grid; gap: var(--sp-12); /* minmax(0, 1fr) y no 1fr a secas. Es la misma columna elástica pero con mínimo cero, y esa diferencia era el bug del contacto en celular. Un track `1fr` tiene mínimo automático: no baja del ancho mínimo de su contenido. Y adentro había dos cosas que se niegan a achicarse — el