/* ========================================================================== OSZILA — VERSIÓN 2 Hoja única de la landing v2. Depende de tokens.css, que se enlaza antes. La v1 (styles.css) no se toca: los dos prototipos conviven. IDEA ESTRUCTURAL (revisada 03-09-2026) La página es una secuencia de planos fotográficos con el texto encima, a la manera de la referencia aprobada. El hero es vídeo a sangre de borde recto; la sección siguiente es una escena a pantalla completa donde titular, párrafos y fotografías se mueven a distinta velocidad con el scroll. El aro partido de la O sobrevive en un solo sitio, rodeando la foto circular del proceso. El cliente retiró el arco del hero y de las tarjetas de servicio: no reintroducirlos. REGISTRO TIPOGRÁFICO (encargo del cliente, 03-09-2026) · Titulares → Playfair Display. Nunca DM Sans en minúscula para titular. · Rótulos, navegación, botones y términos → DM Sans VERSALES, tracking 0.2em. Es el registro dominante de la v2. · Cuerpo de texto → DM Sans redonda. Cada bloque lleva su equivalente en Elementor Pro. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS PROPIOS DE LA V2 Solo lo que tokens.css no cubre. Todo lo demás se hereda. Elementor: Site Settings > Global Colors / Global Fonts. -------------------------------------------------------------------------- */ :root { /* EL SISTEMA DE MARCO. Medido sobre la referencia aprobada a 1903px de ancho: el bloque del hero está a 38px de los CUATRO bordes, y los items de la cabecera, a 76px — exactamente el doble. De ahí la regla: · el marco se separa --marco del borde de la ventana, arriba también; · los items de la cabecera se separan --marco del borde DEL MARCO, o sea el doble desde el borde de la ventana; · el pie usa la misma sangría que los items de la cabecera, así que sus dos extremos se alinean con el menú y el botón de arriba. Elementor: Container con Content Width: Full Width y estos paddings. */ --marco: 40px; --marco-items: calc(var(--marco) * 2); /* 80px */ /* Escala de la v2. Playfair pide más tamaño que la DM Sans de la v1 para pesar lo mismo, porque su altura de x es menor. */ --fs-hero-v2: 74px; --fs-h2-v2: 62px; --fs-h3-v2: 34px; --fs-ambito: 80px; /* titular de la escena, mayor que un H2 normal */ --fs-cifra: 46px; /* cifra del proceso, Playfair Black */ --sangria-cifra: 0px; /* compensación óptica: se mide sobre el render */ --fs-versal: 12px; /* versal de interfaz: menú, idioma, botones */ --fs-rotulo: 16px; /* rótulo de sección: EL ÁMBITO, SERVICIOS, EQUIPO… */ --fs-versal-lg: 14px; /* etiqueta de botón */ --fs-termino: 22px; /* término de resultado: CONTROL, ANTICIPACIÓN… */ /* Tracking 200 (0.2em) del encargo. Es la firma de la v2. */ --tracking-versal: 0.2em; /* Playfair en display pide tracking negativo; en cursiva menos, porque la itálica ya aprieta sola. */ --tracking-playfair: -0.02em; --tracking-playfair-i: -0.005em; /* Velo sobre fotografía. Dos paradas, que es lo único que admite el Background Overlay de Elementor. Medido sobre cada foto, no estimado. */ /* MEDIDO, no estimado. El hero lleva el MONTAJE COMPLETO (25,5 s, seis planos), así que la medición se hizo sobre 51 fotogramas repartidos por todo el vídeo y no sobre un solo plano: hay tomas de cubierta blanca y de cielo mucho más claras que el aéreo del final. Peor fotograma de los 51, muestreando TODO el ancho del marco (más exigente que la caja real del texto, que va centrada y es más estrecha): rótulo 5.47 · titular 5.69 · párrafo 6.68 banda del menú y el idioma 6.94 (con el velo propio de la cabecera) Con el velo anterior (0.56 → 0.78) el rótulo se quedaba en 4.55, a cinco centésimas del mínimo. Si se cambia el vídeo hay que repetir esto: la espuma y las cubiertas blancas no se ven venir en una captura. */ --velo-hero: linear-gradient(to bottom, rgba(11, 27, 53, 0.62) 0%, rgba(11, 27, 53, 0.82) 100%); --velo-banda: linear-gradient(to bottom, rgba(11, 27, 53, 0.58) 0%, rgba(11, 27, 53, 0.80) 100%); /* Los items arrancan a --marco-items del borde superior y el bloque deja 24px por debajo: 80 + 72 + 24. */ --altura-header: 176px; --dur-lento: 0.9s; } @media (max-width: 1024px) { :root { --marco: 24px; --altura-header: 128px; --fs-hero-v2: 60px; --fs-h2-v2: 44px; --fs-h3-v2: 28px; --fs-ambito: 56px; --fs-termino: 19px; --fs-rotulo: 15px; --fs-cifra: 38px; } } @media (max-width: 767px) { :root { --marco: 16px; --altura-header: 112px; --fs-hero-v2: 38px; --fs-h2-v2: 31px; --fs-h3-v2: 24px; --fs-ambito: 36px; --fs-termino: 16px; --fs-rotulo: 13px; --fs-cifra: 30px; --tracking-versal: 0.16em; /* a 12px, 0.2em rompe demasiadas líneas */ } } /* -------------------------------------------------------------------------- 2. RESET Y SUPERFICIES DEL NAVEGADOR Las partes que no dibujo también llevan el diseño: selección, cursor, barra de desplazamiento y anillo de foco salen del sistema, no del navegador. Elementor: Advanced > Custom CSS del Kit global. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Barra de desplazamiento tintada de marino sobre crema. */ scrollbar-color: var(--gris-45) var(--oszila-crema); scrollbar-width: thin; } body { margin: 0; background: var(--oszila-crema); color: var(--texto-principal); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--oszila-azul); color: var(--oszila-blanco); } :focus-visible { outline: 2px solid var(--oszila-azul-texto); outline-offset: 3px; border-radius: 1px; } .sobre-oscuro :focus-visible { outline-color: var(--oszila-azul-claro); } img, video, svg { display: block; max-width: 100%; } h1, h2, h3, h4 { margin: 0; font-weight: var(--peso-display); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--oszila-azul-texto); text-underline-offset: 0.22em; } /* Salto al contenido: obligatorio y casi siempre olvidado. */ .saltar { position: absolute; left: -9999px; background: var(--oszila-marino); color: var(--oszila-crema); padding: var(--space-2) var(--space-3); font: var(--peso-medio) var(--fs-versal)/1 var(--font-body); letter-spacing: var(--tracking-versal); text-transform: uppercase; } .saltar:focus { left: var(--marco); top: var(--space-1); z-index: 100; } /* -------------------------------------------------------------------------- 3. PRIMITIVAS DE LAYOUT La jerarquía que se traduce 1:1 a Containers de Elementor Pro. Solo flexbox. Ni grid, ni float, ni position:absolute para maquetar. -------------------------------------------------------------------------- */ /* Una banda horizontal de ancho completo = Container raíz. `width: auto`, no 100%: las bandas que van dentro del marco crema llevan margen horizontal, y un 100% se lo suma en vez de descontarlo. */ .e-section { width: auto; } /* Ancho máximo del contenido = Content Width: Boxed. */ .e-container { width: 100%; max-width: var(--ancho-contenido); margin-inline: auto; padding-inline: var(--marco); } /* Container anidado horizontal. */ .e-flex-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; } /* Container anidado vertical. */ .e-flex-col { display: flex; flex-direction: column; align-items: flex-start; } /* -------------------------------------------------------------------------- 4. TIPOGRAFÍA — LAS TRES VOCES -------------------------------------------------------------------------- */ /* 4.1 El rótulo en versales. La firma de la v2. Elementor: Global Font "Rótulo" + Text Editor con Transform: Uppercase. */ .versal { font-family: var(--font-body); font-size: var(--fs-versal); font-weight: var(--peso-medio); line-height: 1.4; letter-spacing: var(--tracking-versal); text-transform: uppercase; /* El tracking abre un hueco al final de la última letra que descoloca cualquier centrado. Se compensa aquí y no elemento a elemento. */ text-indent: var(--tracking-versal); color: var(--oszila-azul-texto); margin: 0; } .sobre-oscuro .versal { color: var(--oszila-azul-claro); } /* El rótulo de sección va limpio y a su propio tamaño, mayor que la versal de interfaz: es un subtítulo, no una etiqueta de control. Sin filete delante: el tracking 0.2em ya lo separa de todo lo demás. */ .versal--rotulo { display: flex; align-items: center; font-size: var(--fs-rotulo); } /* 4.2 Los titulares. Playfair Display, con un acento en cursiva por titular. */ .titular { font-family: var(--font-heading); font-weight: var(--peso-display); line-height: var(--lh-display); letter-spacing: var(--tracking-playfair); text-wrap: balance; margin: 0; } .titular em { font-style: italic; letter-spacing: var(--tracking-playfair-i); } .titular--hero { font-size: var(--fs-hero-v2); } .titular--h2 { font-size: var(--fs-h2-v2); line-height: var(--lh-heading); } .titular--h3 { font-size: var(--fs-h3-v2); line-height: var(--lh-heading); } /* Sobre fondo claro el acento en cursiva va en azul; sobre oscuro, en crema, porque el azul de marca no llega a 4.5:1 y el titular es lo único que se lee de lejos. */ .sobre-claro .titular em { color: var(--oszila-azul-texto); } .sobre-oscuro .titular em { color: var(--oszila-crema); opacity: 0.92; } /* 4.3 El cuerpo. DM Sans redonda, medida de 65–75 caracteres. */ .cuerpo { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--texto-secundario); max-width: var(--medida); } .cuerpo--corto { max-width: var(--medida-corta); } .cuerpo--lg { font-size: var(--fs-body-lg); } .sobre-oscuro .cuerpo { color: var(--gris-30); } /* REGLA DE LA PÁGINA: sobre FOTOGRAFÍA todo el texto va en crema. Medido sobre los píxeles reales: el azul claro sobre la estela del yate da 1.01:1 y el gris secundario sobre la foto del ámbito, 3.75:1. Los dos cumplen de sobra sobre marino PLANO (5.48 y 7.70), que es donde se quedan. Este bloque tiene que ir DESPUÉS de las reglas .sobre-oscuro de arriba: la especificidad es la misma (0,2,0) y a igualdad manda el orden. Colocado antes, perdía en silencio y el párrafo salía gris. */ .hero .versal, .hero .cuerpo, .ambito .versal, .ambito .cuerpo { color: var(--oszila-crema); } /* -------------------------------------------------------------------------- 5. BOTONES Radio 2px: el logotipo no tiene curvas blandas. Elementor: Button widget, Normal / Hover. -------------------------------------------------------------------------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 48px; /* área táctil */ padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radio); font-family: var(--font-body); font-size: var(--fs-versal-lg); font-weight: var(--peso-medio); letter-spacing: var(--tracking-versal); text-indent: var(--tracking-versal); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* Primario: crema sólido. Sobre fotografía es la lectura más segura que existe y es la que usa la referencia aprobada. */ .boton--primario { background: var(--oszila-crema); color: var(--oszila-marino); /* 15.24:1 */ border-color: var(--oszila-crema); } .boton--primario:hover { background: var(--oszila-blanco); border-color: var(--oszila-blanco); } /* Primario sobre fondo claro: relleno azul de texto, no el azul gráfico. */ .sobre-claro .boton--primario { background: var(--oszila-azul-texto); color: var(--oszila-blanco); /* 4.97:1 */ border-color: var(--oszila-azul-texto); } .sobre-claro .boton--primario:hover { background: var(--oszila-marino); border-color: var(--oszila-marino); } /* Secundario: solo filete. */ .boton--secundario { background: transparent; color: var(--oszila-crema); border-color: rgba(249, 246, 234, 0.45); } .boton--secundario:hover { border-color: var(--oszila-crema); background: rgba(249, 246, 234, 0.10); } .sobre-claro .boton--secundario { color: var(--oszila-marino); border-color: var(--gris-18); } /* Botón de cristal: sin relleno, con filete y desenfoque de lo que hay detrás. Solo en la cabecera, sobre el vídeo. Elementor: color de fondo translúcido + borde nativos, y una línea de Custom CSS para el backdrop-filter. */ .boton--cristal { background: rgba(249, 246, 234, 0.10); color: var(--oszila-crema); border-color: rgba(249, 246, 234, 0.42); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); } .boton--cristal:hover { background: rgba(249, 246, 234, 0.20); border-color: var(--oszila-crema); } /* Botón de contorno marino: filete y texto en marino, sin relleno. Al pasar por encima se invierte. Elementor: Button con Border + Hover. Contraste: marino sobre crema 15.87, y blanco sobre marino 15.24. */ .boton--contorno { background: transparent; color: var(--oszila-marino); border-color: var(--oszila-marino); } .boton--contorno:hover { background: var(--oszila-marino); color: var(--oszila-blanco); border-color: var(--oszila-marino); } .sobre-claro .boton--secundario:hover { border-color: var(--oszila-marino); background: transparent; } /* -------------------------------------------------------------------------- 6. CABECERA — misma estructura que la referencia aprobada Tres grupos: botón de menú a la izquierda, emblema centrado, idioma y acción a la derecha. Los dos grupos exteriores llevan el mismo flex, así que el emblema cae en el centro exacto sin position:absolute. Elementor: Container Full Width, padding horizontal = --marco. -------------------------------------------------------------------------- */ .cabecera { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: var(--space-4); height: var(--altura-header); /* Los items respiran --marco DENTRO del marco: por eso el doble desde el borde de la ventana, arriba y a los lados. */ padding: var(--marco-items) var(--marco-items) var(--space-3); /* La caja NO cambia de tamaño al bajar: recoger la cabecera animando su altura y su padding es animar el layout, y eso repinta en cada frame. Lo que se mueve son los items (transform) y lo que cambia es cuál de las dos capas de fondo está visible (opacity). Las dos cosas las resuelve el compositor. */ pointer-events: none; /* la caja es más alta que sus items */ } .cabecera > * { pointer-events: auto; } /* Los items suben al bajar la página: es lo que se lee como que la cabecera se recoge. El valor NO es a ojo: en reposo el bloque de items ocupa de 80 a 136 (padding-top 80 + alto 56), así que su centro está en 108; el cristal del sticky mide 96 de alto y su centro está en 48. 108 - 48 = 60. Elementor: Motion Effects sobre los Containers. */ .cabecera__grupo, .cabecera__emblema { transition: transform var(--dur) var(--ease); } .cabecera.esta-abajo .cabecera__grupo, .cabecera.esta-abajo .cabecera__emblema { transform: translateY(-68px); } /* TODO lo que pinta la cabecera vive en esta capa, y la capa está SIEMPRE dentro del marco: ni el degradado de reposo ni el cristal de al bajar se salen por los lados. Antes el cristal iba en la propia .cabecera, que es de ancho completo, y cruzaba la franja de crema. Elementor: Background Overlay sobre el Container de cabecera, con el mismo Margin horizontal que el resto de bandas. */ .cabecera::before { content: ""; position: absolute; /* Arranca en el borde SUPERIOR DEL MARCO: por encima hay crema, y un velo oscuro ahí sería una mancha. */ inset: var(--marco) var(--marco) -48px var(--marco); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(11, 27, 53, 0.66), rgba(11, 27, 53, 0)); transition: opacity var(--dur) var(--ease); } /* Capa 2: el cristal de cuando ya se ha bajado. Es una capa aparte, no un cambio de tamaño de la anterior: las dos tienen geometría fija y se cruzan por opacidad. Va A SANGRE, de borde a borde. Es la diferencia con la capa de reposo: en reposo el degradado se recorta al marco porque el marco está ahí, a la vista; al bajar el marco ya ha salido de pantalla y la barra se comporta como cualquier cabecera fija. */ .cabecera::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 96px; z-index: -1; opacity: 0; pointer-events: none; background: rgba(11, 27, 53, 0.72); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); border-bottom: 1px solid rgba(249, 246, 234, 0.14); transition: opacity var(--dur) var(--ease); } .cabecera.esta-abajo::before { opacity: 0; } .cabecera.esta-abajo::after { opacity: 1; } .cabecera__grupo { flex: 1 1 0; display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .cabecera__grupo--izq { justify-content: flex-start; } .cabecera__grupo--der { justify-content: flex-end; } /* El botón de menú: cuadro con el icono + rótulo al lado, como la referencia. Elementor Pro: widget Off-Canvas, que trae su propio disparador. */ .menu-boton { display: flex; align-items: center; gap: var(--space-2); height: 56px; /* área táctil */ padding: 0; background: none; border: 0; cursor: pointer; color: var(--oszila-crema); font-family: inherit; } .menu-boton__icono { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(249, 246, 234, 0.45); border-radius: var(--radio); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .menu-boton__icono svg { width: 24px; height: 24px; } .menu-boton__icono path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; fill: none; } .menu-boton:hover .menu-boton__icono { background: rgba(249, 246, 234, 0.14); border-color: var(--oszila-crema); } .menu-boton[aria-expanded="true"] .menu-boton__icono { background: var(--oszila-crema); border-color: var(--oszila-crema); color: var(--oszila-marino); } .menu-boton__texto { font-size: var(--fs-versal); font-weight: var(--peso-medio); letter-spacing: var(--tracking-versal); text-indent: var(--tracking-versal); text-transform: uppercase; } /* El emblema. En reposo, solo el isotipo; al bajar, el logotipo completo. Los dos están siempre en el DOM y se cruzan por opacidad: ni salto de layout ni una descarga a mitad de scroll. NADA de `left:50% + translate(-50%,-50%)` aquí. Con la altura en 52 y el ancho en auto, el isotipo caía en x=66.89 e y=6.44: posición fraccionaria, que es lo que hacía que los trazos diagonales de la A se vieran dentellados a 1x. Ancho, alto y posición van los tres en PÍXELES ENTEROS. Desde el 03-09-2026 las dos piezas son los PNG que entregó el cliente (isotipo 113x171, logotipo 359x93). Las proporciones se desvían menos del 0.7 % de las nativas, que es invisible, a cambio de que los bordes caigan sobre la rejilla de píxeles. Los PNG dan justo para 2x a estos tamaños. Elementor: dos Image widgets superpuestos con posición absoluta. */ .cabecera__emblema { position: relative; flex: 0 0 auto; width: 176px; height: 72px; } .cabecera__isotipo, .cabecera__wordmark { position: absolute; transition: opacity var(--dur) var(--ease); } .cabecera__isotipo { left: 67px; top: 4px; width: 42px; height: 64px; opacity: 1; } .cabecera__wordmark { left: 3px; top: 14px; width: 170px; height: 44px; opacity: 0; } .cabecera.esta-abajo .cabecera__isotipo { opacity: 0; } .cabecera.esta-abajo .cabecera__wordmark { opacity: 1; } .cabecera__idioma { font-size: var(--fs-versal); font-weight: var(--peso-medio); letter-spacing: var(--tracking-versal); text-indent: var(--tracking-versal); text-transform: uppercase; color: var(--oszila-crema); } /* El panel del menú. Elementor Pro: widget Off-Canvas. */ /* El panel arranca justo debajo de la capa visible de la cabecera, en los dos estados, y también se mueve con transform y no con `top`. */ .cabecera.esta-abajo ~ .menu-panel { transform: translateY(-80px); } .menu-panel { position: fixed; inset: var(--altura-header) 0 auto 0; transition: transform var(--dur) var(--ease); z-index: 49; padding: var(--space-6) var(--marco) var(--space-8); background: rgba(11, 27, 53, 0.94); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); border-bottom: 1px solid rgba(249, 246, 234, 0.16); animation: baja var(--dur) var(--ease) both; } @keyframes baja { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } .menu-panel__nav { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--ancho-contenido); margin-inline: auto; } .menu-panel__enlace { font-family: var(--font-heading); font-size: var(--fs-h3-v2); line-height: 1.24; letter-spacing: var(--tracking-playfair); color: var(--oszila-crema); text-decoration: none; width: fit-content; transition: color var(--dur) var(--ease); } .menu-panel__enlace:hover { color: var(--oszila-azul-claro); } /* -------------------------------------------------------------------------- 7. HERO — EL PORTILLO Vídeo a sangre dentro del marco crema, recortado abajo por el arco de la O. Tres planos a tres velocidades al hacer scroll; --p (0 a 1) lo escribe js/v2.js y todo lo demás lo resuelve el CSS. -------------------------------------------------------------------------- */ /* El marco rodea el hero por los cuatro lados con EL MISMO valor: arriba, abajo, izquierda y derecha. La cabecera flota por encima y sus items caen ya dentro del marco. Elementor: Container Full Width con este padding. */ .hero { position: relative; padding: var(--marco); } /* El portillo. El recorte inferior es border-radius, no una máscara SVG, para que Elementor lo reproduzca nativo. Elementor: Container > Border Radius 0 0 50% 50% / 0 0 13% 13%. */ .hero__marco { position: relative; /* solo para el vídeo de fondo y el velo */ display: flex; flex-direction: column; justify-content: center; /* centrado óptico dentro del marco */ min-height: 820px; /* Elementor: Container > Min Height */ /* El marco ya empieza --marco por debajo del borde, así que aquí solo hace falta el resto hasta pasar la cabecera. */ padding: calc(var(--altura-header) - var(--marco) + var(--space-6)) 0 var(--space-12); overflow: hidden; /* Borde inferior RECTO. La curva y el filo azul se retiraron el 03-09-2026 por decisión del cliente. No reintroducirlos. */ background: var(--oszila-marino); isolation: isolate; } /* El vídeo es el FONDO del Container. Elementor: Container > Background > Video, con Play On Mobile y Loop. El paralaje es Motion Effects > Scrolling Effects > Vertical Scroll + Scale, aplicado a ese fondo. */ .hero__video { position: absolute; inset: -6% 0 0 0; /* holgura para que el paralaje no descubra */ width: 100%; height: 112%; object-fit: cover; z-index: -2; transform: translate3d(0, calc(var(--p, 0) * 130px), 0) scale(calc(1 + var(--p, 0) * 0.08)); will-change: transform; } /* Velo de dos paradas. Elementor: Background Overlay con degradado. */ .hero__velo { position: absolute; inset: 0; z-index: -1; background: var(--velo-hero); } /* El contenido sube y se desvanece más deprisa que el vídeo: eso es lo que se lee como profundidad. */ .hero__contenido { align-items: center; text-align: center; gap: var(--space-3); width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--marco); color: var(--oszila-crema); transform: translate3d(0, calc(var(--p, 0) * -70px), 0); /* Opacidad plena hasta que el bloque está saliendo de verdad (--p 0.72, con los botones ya a la altura de la cabecera) y a cero justo al final del hero. Antes caía a 0.69 con 180px de scroll. */ opacity: clamp(0, calc((1 - var(--p, 0)) / 0.28), 1); will-change: transform, opacity; } .hero__contenido .versal--rotulo { justify-content: center; } .hero__contenido .cuerpo { text-align: center; margin-inline: auto; max-width: 52ch; } /* Dos líneas, una por frase. Cada span es un bloque, así que la frase no se parte aunque el ancho dé de sí. El cuerpo es 74 y no 78 porque «nosotros nos ocupamos del resto» pedía 1101px a 78 y solo había 1080: se iba a una tercera línea. A 74 pide 1045 y le sobran 115. Medido, no estimado. */ .hero__titular { max-width: none; } .hero__linea { display: block; } .hero__acciones { gap: var(--space-2); margin-top: var(--space-3); justify-content: center; } /* -------------------------------------------------------------------------- 8. ÁMBITO — la escena, calcada de la referencia aprobada Fotografía a sangre y TODO encima. Cuatro capas que se mueven a distinta velocidad con el scroll: la foto, las tres líneas del titular, los dos párrafos y las dos fotografías que suben desde abajo. js/v2.js escribe --r en la sección: 0 cuando la sección aún no ha entrado por abajo, 1 cuando ya ha salido por arriba. Todo lo demás es CSS. Con JS desactivado --r vale 1 por defecto y la escena se ve entera y quieta. Elementor: Motion Effects > Vertical Scroll con distinta velocidad en cada capa, y Transparency en las líneas del titular. -------------------------------------------------------------------------- */ .ambito { position: relative; display: flex; align-items: flex-start; min-height: 1400px; /* recorrido suficiente para que el paralaje se lea */ /* El texto se ancla ARRIBA con su propio margen, en vez de centrarse: así el aire superior es un valor declarado y no el resto de una división. 160px: aire suficiente para que no toque el borde, poco para que el bloque no baje hasta el barco. */ padding-block: var(--seccion-y-ancha); overflow: hidden; /* la foto se sale por arriba y por abajo al moverse */ background: var(--oszila-marino); /* El COLOR se fija en la sección. Sin esta línea el titular heredaba --texto-principal (marino) y daba 1.46:1 sobre la foto. */ color: var(--oszila-crema); isolation: isolate; } /* La fotografía es una CAPA, no un background-image: así el paralaje es un transform (una capa compuesta, un repintado por frame) y no un recolocado del fondo. Sobresale un 12% arriba y abajo para tener recorrido. Elementor: Image widget a pantalla completa con Vertical Scroll. */ .ambito__foto { position: absolute; /* La caja sobresale por arriba y por abajo, pero NO por igual. El paralaje mueve la foto 75px arriba y 75px abajo desde su reposo, así que ese es el mínimo de holgura que necesita cada lado para no dejar hueco. Arriba sobra sitio (12% = 168px); abajo se queda en el mínimo justo (6% = 84px) para que el encuadre `bottom` enseñe el barco lo más entero posible. */ inset: -12% 0 auto 0; width: 100%; height: 118%; /* 12% de holgura arriba + 6% abajo */ z-index: -2; object-fit: cover; object-position: center bottom; transform: translate3d(0, calc((var(--r, 0.5) - 0.5) * -150px), 0); will-change: transform; } /* SIN velo. El cliente lo retiró el 03-09-2026 y la fotografía nueva es un aéreo de agua profunda, lo bastante oscura por sí sola. El contraste de esta sección depende ahora ENTERAMENTE de la imagen: si se cambia, hay que volver a medirlo sobre los píxeles. */ .ambito__lienzo { display: flex; flex-direction: column; gap: var(--space-12); } /* Composición asimétrica: el titular ocupa la izquierda y el párrafo cae a la derecha, más arriba. Nunca dos columnas simétricas. */ /* No puede envolver: el ancho máximo del titular supera la línea y flex envuelve ANTES de encoger. Con nowrap + min-width:0 el titular encoge y las dos columnas se quedan donde tienen que estar. Elementor: Container > Wrap: No Wrap. */ .ambito__cabeza { gap: var(--space-8); justify-content: space-between; align-items: flex-start; width: 100%; flex-wrap: nowrap; } .ambito__izq { flex: 1 1 auto; min-width: 0; gap: var(--space-2); } /* El párrafo de la derecha arranca a la altura de la PRIMERA línea del titular, no a media altura: el rótulo versal que había encima desapareció y las dos columnas empiezan ya en la misma horizontal. */ .ambito__der { flex: 0 0 300px; margin-top: 0; } .ambito__parrafo--izq { margin-top: var(--space-4); } /* El titular, a tres líneas y muy grande, como la referencia. */ .ambito__titular { font-size: var(--fs-ambito); line-height: 1.02; letter-spacing: var(--tracking-playfair); } /* Cada línea entra por separado: sube, se enfoca y aparece. El retardo lo da --l (0 a 3), que va en el propio HTML. --a es el avance de ESTA línea: 0 antes de su umbral, 1 pasado el tramo. */ .ambito__linea { --t: calc(0.13 + var(--l) * 0.055); --a: clamp(0, calc((var(--r, 1) - var(--t)) / 0.13), 1); display: block; opacity: var(--a); transform: translate3d(0, calc((1 - var(--a)) * 52px), 0); filter: blur(calc((1 - var(--a)) * 9px)); will-change: transform, opacity, filter; } .ambito__parrafo { --a: clamp(0, calc((var(--r, 1) - 0.24) / 0.16), 1); max-width: 40ch; opacity: var(--a); transform: translate3d(0, calc((1 - var(--a)) * 34px), 0); } .ambito__parrafo--izq { max-width: 34ch; } /* -------------------------------------------------------------------------- 9. RESULTADOS — cuatro términos en escalera Ni tarjetas ni rejilla: cuatro bloques que descienden en diagonal, cada uno con más sangría que el anterior. La composición es la información. Elementor: cuatro Containers verticales con distinto padding-left. -------------------------------------------------------------------------- */ .resultados { padding-block: var(--seccion-y-ancha) var(--space-12); } /* Esta sección no lleva titular: es la respuesta a la pregunta que hace la escena inmediatamente anterior, y repetirla sería decirla dos veces. */ .resultados__cabecera { gap: var(--space-3); margin-bottom: var(--space-6); } .resultados__lista { flex-direction: column; width: 100%; gap: 0; } .resultado { display: flex; flex-direction: row; align-items: baseline; gap: var(--space-6); width: 100%; padding-block: var(--space-4); border-top: 1px solid var(--gris-18); } .resultado:last-child { border-bottom: 1px solid var(--gris-18); } /* La escalera. Seis escalones de 40px, replicables con el slider de padding de Elementor. Con los cuatro anteriores el paso era de 64; con seis, ese paso llevaría el último bloque a 320px y partiría el texto. */ .resultado:nth-child(1) { padding-left: 0; } .resultado:nth-child(2) { padding-left: 40px; } .resultado:nth-child(3) { padding-left: 80px; } .resultado:nth-child(4) { padding-left: 120px; } .resultado:nth-child(5) { padding-left: 160px; } .resultado:nth-child(6) { padding-left: 200px; } .resultado__termino { flex: 0 0 320px; font-family: var(--font-body); font-size: var(--fs-termino); font-weight: var(--peso-medio); letter-spacing: var(--tracking-versal); text-indent: var(--tracking-versal); text-transform: uppercase; color: var(--oszila-marino); } .resultado__texto { flex: 1 1 auto; font-size: var(--fs-body-lg); line-height: 1.45; color: var(--gris-75); max-width: 52ch; } /* La fotografía que acompaña, montada sobre el arco de marca. Elementor: dos Containers, el del arco con la imagen de fondo. */ /* -------------------------------------------------------------------------- 10. PROCESO — cinco pasos numerados Aquí la cifra SÍ lleva información: es la secuencia del ciclo de trabajo. Playfair Black en azul, que es el único sitio de la marca donde va la Black. -------------------------------------------------------------------------- */ .proceso { padding-block: var(--seccion-y-ancha); background: var(--oszila-marino); color: var(--oszila-crema); } /* FILA 1: titular a la izquierda, aro con la foto a la derecha. */ .proceso__intro { gap: var(--space-8); align-items: center; justify-content: space-between; width: 100%; flex-wrap: nowrap; margin-bottom: var(--space-12); } .proceso__cabecera { flex: 1 1 auto; min-width: 0; } /* El titular va en DOS líneas fijas, una por span, sin rótulo encima. */ .proceso__linea { display: block; } /* FILA 2: los seis pasos en dos columnas de tres. */ .proceso__fila { gap: var(--space-8); align-items: flex-start; width: 100%; flex-wrap: nowrap; /* Elementor: Container > Wrap: No Wrap */ } .proceso__pasos { flex: 1 1 0; flex-direction: column; min-width: 0; } .proceso__media { flex: 0 0 300px; } .paso { display: flex; flex-direction: row; /* CENTRADO, no baseline. Con baseline el rótulo y el texto se apoyaban en la línea base de la cifra, es decir a su altura MÁS BAJA. Centrados, el bloque de texto queda a media altura de la cifra aunque ocupe dos líneas. Elementor: Container > Align Items: Center. */ align-items: center; /* Dos líneas: la cifra y el nombre arriba, la descripción debajo. En una columna de media página no caben los tres en la misma línea. */ flex-wrap: wrap; gap: var(--space-2) var(--space-3); width: 100%; padding-block: var(--space-4); border-bottom: 1px solid rgba(249, 246, 234, 0.16); } .paso:first-child { border-top: 1px solid rgba(249, 246, 234, 0.16); } .paso__cifra { flex: 0 0 auto; /* Ancho fijo, glifo a la izquierda y compensación óptica por cifra. Dos cosas hacían que la columna no cayera sobre el titular: 1. La lista es un
    y el reset solo cubría