/* ==========================================================================
   OSZILA — Landing (prototipo estático)
   CSS plano, sin frameworks ni preprocesadores.
   Reglas: solo flexbox · breakpoints 767px / 1024px · espaciado múltiplo de 8.
   Los valores viven en css/tokens.css — aquí no se escribe ningún literal.
   Ver CLAUDE.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET MÍNIMO
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--peso-body);
  line-height: var(--lh-body);
  color: var(--texto-principal);
  background-color: var(--fondo-pagina);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--peso-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;          /* titulares equilibrados, sin viudas */
}

h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }

p { margin: 0; max-width: var(--medida); text-wrap: pretty; }

img, svg { max-width: 100%; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   2. SUPERFICIES DEL NAVEGADOR
   Las partes que no dibujamos también llevan la marca: selección, caret,
   scrollbar, anillo de foco, subrayados y cifras tabulares.
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--oszila-azul);
  color: var(--oszila-blanco);
}

body { caret-color: var(--oszila-azul-texto); }

html {
  scrollbar-color: var(--gris-30) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gris-06); }
::-webkit-scrollbar-thumb {
  background: var(--gris-30);
  border: 2px solid var(--gris-06);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gris-45); }

a {
  color: var(--oszila-azul-texto);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

/* Anillo de foco visible y de marca, solo para navegación por teclado */
:focus-visible {
  outline: 2px solid var(--oszila-azul-texto);
  outline-offset: 3px;
  border-radius: var(--radio);
}

/* Cifras alineadas en columnas de datos y en la numeración del proceso */
.num, table { font-variant-numeric: tabular-nums; }

/* Rutas de archivo y valores: monoespaciada solo para datos reales, tintada */
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--gris-75);
  background-color: var(--gris-06);
  padding: 1px 4px;
  border-radius: var(--radio);
}

/* Sobre fondo oscuro cambian los enlaces y el anillo de foco.
   El :not(.btn) es obligatorio: sin el, esta regla gana en especificidad a
   .btn--primario y pinta la etiqueta del boton en azul sobre azul. */
.is-oscuro a:not(.btn) { color: var(--oszila-azul-claro); }
.is-oscuro :focus-visible { outline-color: var(--oszila-azul-claro); }

/* --------------------------------------------------------------------------
   3. PRIMITIVAS DE LAYOUT — el mapa 1:1 con contenedores Elementor Pro
   Solo flexbox. Sin CSS Grid, floats ni position:absolute para layout.
   -------------------------------------------------------------------------- */

/* Elementor: Container raíz, banda horizontal a ancho completo */
.e-section {
  display: flex;
  /* El header fijo taparia el titular al llegar por ancla.
     Elementor: Advanced > Scroll Margin Top, o el offset del menu. */
  scroll-margin-top: var(--altura-header);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--seccion-y);
  padding-bottom: var(--seccion-y);
}

/* Elementor: Content Width = Boxed */
.e-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--ancho-contenido);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* Elementor: Container anidado, dirección horizontal */
.e-flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Elementor: Container anidado, dirección vertical */
.e-flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Modificadores de sección (Elementor: color de fondo del Container raíz) */
.seccion--crema  { background-color: var(--fondo-alterno); }
.seccion--oscuro { background-color: var(--fondo-oscuro); color: var(--texto-sobre-oscuro); }
.seccion--ancha  { padding-top: var(--seccion-y-ancha); padding-bottom: var(--seccion-y-ancha); }

/* --------------------------------------------------------------------------
   4. TIPOS DE TEXTO REUTILIZABLES
   -------------------------------------------------------------------------- */

/* Versales de marca: las letras del logotipo. Etiquetas, nav, botones. */
.marca-label {
  font-family: var(--font-brand);
  font-size: var(--fs-label);
  font-weight: var(--peso-brand);
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.texto-lg  { font-size: var(--fs-body-lg); }
.texto-sm  { font-size: var(--fs-body-sm); }
.texto-sec { color: var(--texto-secundario); }
.is-oscuro .texto-sec { color: var(--texto-secundario-oscuro); }
.medida-corta { max-width: var(--medida-corta); }

/* Énfasis editorial: la cursiva de la Didone, como en las publicaciones */
.enfasis {
  font-style: italic;
  color: var(--oszila-azul-texto);
}
.is-oscuro .enfasis { color: var(--oszila-azul-claro); }

/* --------------------------------------------------------------------------
   5. BOTONES  (Elementor: widget Button)
   El relleno usa --oszila-azul-texto, no --oszila-azul: el azul de marca
   no da 4.5:1 con texto blanco encima.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--font-brand);
  font-size: var(--fs-boton);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn--primario {
  background-color: var(--oszila-azul-texto);
  color: var(--oszila-blanco);
}
.btn--primario:hover { background-color: var(--oszila-marino); }

.btn--secundario {
  background-color: transparent;
  border-color: var(--borde);
  color: var(--texto-principal);
}
.btn--secundario:hover {
  border-color: var(--oszila-marino);
  background-color: var(--oszila-marino);
  color: var(--oszila-blanco);
}

/* Botón de cristal: translúcido con desenfoque de lo que hay detrás. Se usa
   en la cabecera, sobre la fotografía del hero.
   Elementor: color de fondo translúcido y borde nativos, más una línea en
   Advanced > Custom CSS para el `backdrop-filter`. */
.btn--cristal {
  background-color: rgba(249, 246, 234, 0.10);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-color: rgba(249, 246, 234, 0.34);
  color: var(--oszila-crema);
}
.btn--cristal:hover {
  background-color: rgba(249, 246, 234, 0.18);
  border-color: rgba(249, 246, 234, 0.58);
}

/* Sobre fondo oscuro o fotografía */
.is-oscuro .btn--secundario {
  border-color: rgba(249, 246, 234, 0.45);
  color: var(--oszila-crema);
}
.is-oscuro .btn--secundario:hover {
  border-color: var(--oszila-crema);
  background-color: var(--oszila-crema);
  color: var(--oszila-marino);
}

.btn[aria-disabled="true"] {
  background-color: var(--gris-06);
  border-color: var(--borde-sutil);
  color: var(--gris-45);
  pointer-events: none;
}
.is-oscuro .btn[aria-disabled="true"] {
  background-color: transparent;
  border-color: var(--gris-75);
  color: var(--gris-45);
}

/* --------------------------------------------------------------------------
   6. ARCOS DE MARCA
   Los dos recursos son los arcos de la O del logotipo. Se usan como marco
   simétrico. Con moderación: no en todas las secciones.
   -------------------------------------------------------------------------- */
.arco {
  flex: 0 0 auto;
  width: auto;
  height: var(--space-8);
  align-self: center;
}

/* --------------------------------------------------------------------------
   7. TIPOS DE TITULAR CON ACENTO EN CURSIVA
   Recurso heredado de las publicaciones de la marca: la segunda mitad del
   titular en cursiva. Un titular por sección, nunca dos.
   Elementor: dentro del Heading widget, envolver el texto en <em>.
   -------------------------------------------------------------------------- */
h1 em, h2 em {
  font-style: italic;
  font-weight: var(--peso-display);
}

/* Enlace de salto para navegación por teclado */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background-color: var(--oszila-marino);
  color: var(--oszila-crema);
  font-family: var(--font-brand);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
}
.salto-contenido:focus { left: var(--space-2); top: var(--space-2); }


/* --------------------------------------------------------------------------
   8. HEADER
   Enlaces izquierda · logotipo CENTRADO · acción derecha.
   Las dos columnas exteriores llevan el mismo flex, así que el logo cae en
   el centro exacto sin position:absolute.
   Elementor: Container raíz + Motion Effects > Sticky: Top.
   El cambio de fondo al bajar lo aplica js/main.js con .esta-fijado;
   Elementor lo resuelve con los ajustes del propio Sticky.
   -------------------------------------------------------------------------- */
.sitio-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  width: 100%;
  height: var(--altura-header);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.sitio-header.esta-fijado {
  background-color: rgba(11, 27, 53, 0.90);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(249, 246, 234, 0.14);
}

/* La cabecera NO va a caja: ocupa el ancho completo de la pantalla con una
   sangría fija de 40px (5 x 8) a cada lado, así que el menú y el botón se van
   a tope a los extremos. Es la única fila del sitio que se salta el ancho
   máximo del contenido, a propósito.
   Elementor: en el Container de la cabecera, Content Width: Full Width y
   Padding horizontal de 40. */
.sitio-header__interior {
  justify-content: center;
  height: 100%;
  max-width: none;
  padding-left: 40px;
  padding-right: 40px;
}

.sitio-header__fila {
  align-items: center;
  flex-wrap: nowrap;
  height: 100%;
  gap: var(--space-4);
}

/* Los dos grupos de nav llevan el mismo flex, así que el logotipo cae en el
   centro exacto. Cada grupo se va a SU extremo del contenido, con la sangría
   del propio contenedor para no quedar pegado al borde.
   Elementor: dos Containers de ancho 1fr con Align a un lado y al otro. */
.nav { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-start; }

.sitio-header__acciones { flex: 1 1 0; justify-content: flex-end; }

/* 24 y no 32: con los rótulos nuevos —más descriptivos y por tanto más
   largos— el nav pedía 546px y solo tiene 534 a 1280. Con 24 sobra sitio en
   todo el rango de escritorio. */
.nav__lista { flex-wrap: nowrap; gap: var(--space-3); }

/* Los enlaces del nav van en DM Sans minúscula, como la referencia: no son
   versales con tracking. Eso queda para las etiquetas de dato. */
.nav__enlace {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--peso-body);
  color: var(--oszila-crema);
  text-decoration: none;
  opacity: 0.85;
  white-space: nowrap;
  transition: opacity var(--dur) var(--ease);
}
.nav__enlace:hover { opacity: 1; }

.sitio-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 48px;   /* el logo es un enlace: tiene que ser pulsable */
}
.sitio-header__logo img { width: 132px; height: auto; }



/* --- El botón del menú y su panel -----------------------------------------
   El botón es el MISMO `.btn--cristal` que «Área de usuario»: mismo relleno
   crema al 10 %, mismo filete al 34 % y mismo `backdrop-filter`. Lo único
   que cambia es que es cuadrado y lleva un icono en lugar de texto, así que
   no hay un segundo lenguaje de botón en la cabecera.
   En escritorio no se ve: ahí está el menú en línea.
   Elementor Pro: widget Off-Canvas con su Toggle Button. */

.u-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn--icono {
  display: none;              /* solo a partir de 1024 hacia abajo */
  padding: var(--space-2);
  width: 48px;                /* área táctil de 48, como el resto */
  height: 48px;
}
/* Dos trazos y no tres: el icono de tres barras es el genérico de todas las
   webs. Con dos, y con el trazo a 1.5, tiene el mismo peso que los filetes
   del resto de la página. Al abrir se cambia por la cruz. */
.menu-boton__icono { display: flex; }
.menu-boton__icono svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.menu-boton__cerrar { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__abrir  { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__cerrar { display: block; }

.menu-panel { outline: none; }   /* recibe el foco al abrir, pero sin aro:
                                    el aro se lo quedan los enlaces al tabular */
.menu-panel {
  position: fixed;
  inset: var(--altura-header) 0 auto 0;
  z-index: 49;
  padding: var(--space-4) var(--space-3) var(--space-6);
  background: rgba(11, 27, 53, 0.94);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(249, 246, 234, 0.16);
  animation: menu-baja var(--dur) var(--ease) both;
}
@keyframes menu-baja {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel { animation: none; }
}

.menu-panel__nav {
  display: flex;
  flex-direction: column;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
}
/* Playfair, como los titulares: el menú es la tabla de contenidos de la
   página, no una barra de interfaz. */
.menu-panel__enlace {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--peso-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--oszila-crema);          /* 15.87:1 sobre el marino del panel */
  text-decoration: none;
  padding-block: var(--space-2);       /* 48px de alto real por item */
  transition: color var(--dur) var(--ease);
}
.menu-panel__enlace:hover,
.menu-panel__enlace:focus-visible { color: var(--oszila-azul-claro); }

/* «Área de usuario» cierra la lista, separada por un filete: es una acción,
   no una sección, y en móvil sustituye al botón de la cabecera. Va en las
   versales de marca, igual que el botón al que reemplaza. */
.menu-panel__enlace--accion {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(249, 246, 234, 0.16);
  font-family: var(--font-brand);
  font-size: var(--fs-boton);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--oszila-azul-claro);     /* 5.48:1 sobre el marino del panel */
}
.menu-panel__enlace--accion:hover { color: var(--oszila-crema); }

/* --------------------------------------------------------------------------
   9. HERO
   Dos capas: el mar es el fondo del Container y el yate es una imagen con
   alfa que se mete ENTRE las líneas del titular con margin negativo.
   Elementor: Container raíz · Min Height 92vh · Background Image
   img/hero-mar.jpg · Background Overlay > Gradient.
   -------------------------------------------------------------------------- */
.hero {
  justify-content: center;
  min-height: 92svh;
  margin-top: calc(var(--altura-header) * -1);
  padding-top: calc(var(--altura-header) + var(--space-6));
  padding-bottom: var(--space-8);
  overflow: hidden;                 /* el yate se va fuera del marco */
  background-color: var(--oszila-marino);
  /* Velo de DOS paradas, que es lo único que admite el overlay de Elementor.
     Sube desde arriba, donde va el nav, hasta abajo, donde entra el panel
     del problema. Medido sobre la foto: la mediana bajo el titular queda a
     12:1 y el percentil 99 por encima de 7:1.
     Elementor: Background Overlay > Gradient, ángulo 180°, 0.42 → 0.74. */
  background-image: linear-gradient(
                      to bottom,
                      rgba(11, 27, 53, 0.42) 0%,
                      rgba(11, 27, 53, 0.74) 100%),
                    url("../img/hero-mar.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero__marco { gap: 0; }

.hero__pila {
  align-items: center;
  text-align: center;
  gap: 0;
}

/* --- El titular ---------------------------------------------------------- */
/* DM Sans Bold en minúscula. El tamaño es el de la referencia: enorme y con
   interlineado por debajo de 1. */
.hero__titulo {
  margin: 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--oszila-crema);
  text-wrap: wrap;   /* los <br> mandan; sin balance ni pretty encima */
}

/* Playfair Display Italic para la palabra que lleva el peso.
   Va un poco más grande porque su altura de x es menor y con menos tracking
   negativo, que la cursiva ya aprieta por sí sola. */
.hero__titulo em {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.012em;
}

/* --- La banda del yate --------------------------------------------------- */
/* El margin negativo mete el yate entre la segunda y la tercera línea.
   Elementor: Margin Top y Bottom negativos en el Container. */
.hero__banda {
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  gap: var(--space-3);
  margin-top: 0;
  margin-bottom: calc(var(--space-2) * -1);
  z-index: 2;
}



.hero__yate-marco {
  flex: 0 1 54%;
  min-width: 0;
}

.hero__yate {
  width: 100%;
  height: auto;
  /* --p es el progreso del scroll dentro del hero, de 0 a 1. js/main.js lo
     escribe en la sección y se hereda hasta aquí.
     Solo se animan transform y opacity: nunca layout. */
  transform: translate3d(calc(var(--p, 0) * -82%), calc(var(--p, 0) * -14px), 0)
             rotate(calc(var(--p, 0) * -3.5deg))
             scale(calc(1 - var(--p, 0) * 0.14));
  opacity: calc(1 - var(--p, 0) * 1.2);
  will-change: transform, opacity;
}

/* --- Entradilla y acciones ---------------------------------------------- */
.hero__entradilla {
  max-width: 58ch;
  margin-top: var(--space-2);
  font-size: var(--fs-body);
  color: var(--gris-18);
  text-align: center;
}

.hero__acciones {
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* --- El momento animado ------------------------------------------------- */
/* Una sola idea: el yate llega al cargar y se va al hacer scroll. Nada más
   se anima en toda la página.
   Elementor: Entrance Animations por elemento con Animation Delay. */
@keyframes heroEntra {
  from { opacity: 0; transform: translateY(20px); filter: blur(7px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes yateLlega {
  from { opacity: 0; transform: translateX(-13%); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero__titulo           { animation: heroEntra 1s   var(--ease) 0.08s both; }
.hero__yate-marco       { animation: yateLlega 1.7s var(--ease) 0.22s both; }
.hero__titulo--dos      { animation: heroEntra 1s   var(--ease) 0.34s both; }
.hero__entradilla       { animation: heroEntra 0.9s var(--ease) 0.72s both; }
.hero__acciones         { animation: heroEntra 0.9s var(--ease) 0.82s both; }

/* --- El repliegue al hacer scroll --------------------------------------- */
/* Los dos bloques de titular convergen hacia el yate y pasan POR DETRÁS
   (el yate va en z-index 2). El de arriba baja, el de abajo sube. Se
   desvanecen antes de llegar al centro, así que nunca se pisan legibles.
   `overflow: hidden` en el hero remata el recorte.
   --p lo escribe js/main.js en la sección y se hereda a todo el hero.
   Elementor: Scrolling Effects > Vertical Scroll en cada Container, uno
   hacia abajo y otro hacia arriba, más Transparency > Fade Out. */
.hero__mov {
  width: 100%;
  will-change: transform, opacity;
}
/* 300px de recorrido cada uno: sumados cierran más que el alto de la banda
   del yate, así que los dos titulares se juntan detrás de él. El
   desvanecimiento va a 1.6 y no más rápido: con 2.3 el texto desaparecía
   antes de haberse movido y no se veía el repliegue. */
.hero__mov--arriba {
  transform: translate3d(0, calc(var(--p, 0) * 300px), 0);
  opacity: calc(1 - var(--p, 0) * 1.6);
}
.hero__mov--abajo {
  align-items: center;
  transform: translate3d(0, calc(var(--p, 0) * -300px), 0);
  opacity: calc(1 - var(--p, 0) * 1.6);
}

/* Los datos laterales pertenecen a la banda del yate: se van con él. */
.hero__banda { opacity: calc(1 - var(--p, 0) * 1.1); }


/* --------------------------------------------------------------------------
   10. LA ESCENA — fotografía a sangre con el texto encima
   Mecánica tomada de la v2, copy de la v1. `js/main.js` escribe --r (0 a 1:
   el avance de la sección por la ventana) una sola vez en la sección, y todo
   lo de dentro lo lee. 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.
   -------------------------------------------------------------------------- */

.escena {
  position: relative;
  display: flex;
  align-items: center;
  /* Recorrido suficiente para que el paralaje se lea y para que la
     fotografía tenga presencia propia: con solo la altura del contenido
     (815px) la imagen quedaba tapada por el texto y las cajas. */
  min-height: 1100px;
  overflow: hidden;          /* la foto se sale por arriba y por abajo */
  background: var(--oszila-marino);
  /* El COLOR se declara en la SECCIÓN. Sin esta línea el titular hereda el
     marino del texto principal y da 1.46:1 sobre la fotografía. */
  color: var(--oszila-crema);
  isolation: isolate;
}

/* La fotografía es una CAPA, no un background-image: el paralaje es entonces
   un transform (una capa compuesta, un repintado por frame) y no un
   recolocado del fondo. Sobresale por arriba y por abajo para tener recorrido:
   el paralaje la mueve 75px en cada sentido, así que ese es el mínimo de
   holgura que necesita cada lado para no dejar hueco. */
.escena__foto {
  position: absolute;
  inset: -9% 0 auto 0;
  width: 100%;
  height: 118%;
  z-index: -2;
  object-fit: cover;
  object-position: center center;
  transform: translate3d(0, calc((var(--r, 0.5) - 0.5) * -150px), 0);
  will-change: transform;
}

/* Velo de dos paradas, que es lo único que admite el Background Overlay de
   Elementor. La foto es un aéreo de agua oscura, pero el texto ocupa ahora
   toda la altura de la sección y las crestas de la parte baja son claras.
   Medido sobre los píxeles: ver el registro en CLAUDE.md. */
.escena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
              rgba(11, 27, 53, 0.46),
              rgba(11, 27, 53, 0.72));
  pointer-events: none;
}

.escena__lienzo { gap: var(--space-12); }

/* Composición asimétrica: el titular a la izquierda y el párrafo a la
   derecha, los dos arrancando en la misma horizontal.
   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. */
.escena__cabeza {
  gap: var(--space-8);
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  flex-wrap: nowrap;
}
.escena__izq { flex: 1 1 auto; min-width: 0; }
.escena__der { flex: 0 0 340px; }

.escena__titular {
  font-family: var(--font-heading);
  font-size: var(--fs-escena);
  font-weight: var(--peso-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  margin: 0;
}
.escena__titular em {
  font-style: italic;
  /* Sobre fotografía el acento va en crema, no en azul: el azul claro sobre
     una imagen no llega al mínimo y el titular es lo que se lee de lejos. */
  color: var(--oszila-crema);
  opacity: 0.92;
}

/* Cada línea entra por separado: sube, se enfoca y aparece. El retardo lo da
   --l (0 o 1), que va en el propio HTML. --a es el avance de ESTA línea:
   0 antes de su umbral, 1 pasado el tramo. */
.escena__linea {
  --t: calc(0.13 + var(--l) * 0.06);
  --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;
}

.escena__parrafo {
  --a: clamp(0, calc((var(--r, 1) - 0.26) / 0.16), 1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--oszila-crema);
  max-width: 40ch;
  margin: 0;
  opacity: var(--a);
  transform: translate3d(0, calc((1 - var(--a)) * 34px), 0);
}

/* Los cuatro resultados, ahora sobre la fotografía y en cristal. El cristal
   NO es adorno: es lo que permite leer el texto blanco sobre una imagen cuya
   luminosidad cambia debajo de cada caja.
   Elementor: Container con color de fondo translúcido y filete nativos, más
   una línea en Advanced > Custom CSS para el desenfoque. */
.indice {
  --a: clamp(0, calc((var(--r, 1) - 0.36) / 0.18), 1);
  gap: var(--space-3);
  align-items: stretch;
  opacity: var(--a);
  transform: translate3d(0, calc((1 - var(--a)) * 40px), 0);
  will-change: transform, opacity;
}

.indice__item {
  flex: 1 1 calc(25% - var(--space-3));
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background-color: var(--cristal-escena);
  border: 1px solid var(--cristal-escena-filete);
  border-radius: var(--radio-card);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.indice__icono {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-1);
  fill: none;
  stroke: var(--oszila-blanco);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.indice__termino {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--peso-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--oszila-blanco);
  margin: 0;
}

.indice__def {
  font-size: var(--fs-body-sm);
  color: var(--oszila-blanco);
  max-width: none;
}


/* --------------------------------------------------------------------------
   11. METODOLOGÍA OSZILA — ruta de pespunte anclada al scroll
       (clase .proceso e id #proceso heredados: se conservan porque el JS
       engancha por [data-proceso] y los enlaces del menú y del pie apuntan
       a #proceso. Lo que cambia es el nombre visible, que el cliente pidió
       expresamente: «más que cómo trabaja… sería la metodología».)
   La sección mide varias pantallas de alto y dentro lleva una ESCENA anclada
   (`position: sticky`). Al recorrer esa altura extra, la escena se queda fija
   y `js/main.js` escribe `--q` (0 a 1): con eso el CSS dibuja la ruta y
   despliega los cinco hitos uno tras otro. Al llegar al último, la sección
   termina y el scroll continúa a la siguiente.

   AVISO PARA ELEMENTOR: esto es lo ÚNICO de la página sin equivalente
   nativo. Elementor Pro sí tiene Sticky y Scrolling Effects, pero no sabe
   dibujar un trazado sincronizado con el scroll ni colocar hitos sobre una
   ruta libre. En la web final esta sección es un widget de código (HTML +
   este CSS + el bloque de `--q` del JS), o se simplifica a cinco Containers
   con Entrance Animation.

   Es también el único sitio del sitio con `position: absolute`, porque no hay
   forma en flexbox de poner cinco etiquetas en puntos arbitrarios de un
   zigzag. El resto de la página sigue siendo flex puro.
   -------------------------------------------------------------------------- */
.proceso {
  /* Sin JS se queda en una pantalla y todo se ve: es js/main.js quien la
     estira para dar recorrido a la animación. */
  min-height: 100svh;
  padding-top: 0;
  padding-bottom: 0;
  /* SIN overflow:hidden. Un ancestro con overflow distinto de visible mata el
     `position: sticky` del hijo, y aquí no hace falta: un background-image ya
     se recorta a su propia caja. */
  background-image: url("../img/carta-topografica.svg");
  background-repeat: no-repeat;
  background-position: right -80px center;
  background-size: auto 128%;
  background-attachment: fixed;   /* la carta no se arrastra con el anclaje */
}

.proceso__escena {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--ancho-contenido);
  height: 100svh;
  padding: calc(var(--altura-header) + var(--space-4)) var(--space-3) var(--space-6);
  gap: var(--space-3);
}

.proceso__titulo { color: var(--oszila-crema); max-width: 20ch; flex: 0 0 auto; }

/* La caja de la ruta: el SVG y las etiquetas comparten este mismo marco, así
   que van siempre alineados por muy alta o ancha que sea la pantalla. */
.proceso__mapa {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.proceso__trazo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* La ruta prevista, tenue: se ve entera desde el principio, como en una carta */
.proceso__ruta-guia {
  fill: none;
  stroke: rgba(53, 100, 143, 0.42);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* La ruta recorrida: se dibuja con el scroll. El pespunte lo hace la máscara,
   así que aquí el trazo es continuo y solo avanza. */
.proceso__ruta-hecha {
  fill: none;
  stroke: var(--oszila-azul);
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(1000 * (1 - clamp(0, calc(var(--q, 1) / 0.88), 1)));
}

/* Los puntos del mapa */
.proceso__punto {
  fill: var(--oszila-marino);
  stroke: var(--oszila-azul);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  opacity: clamp(0, calc((var(--q, 1) - var(--t)) * 12), 1);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(clamp(0.4, calc(0.4 + (var(--q, 1) - var(--t)) * 7.2), 1));
}

/* --- Los cinco hitos ----------------------------------------------------- */
.proceso__hito {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 240px;
  display: flex;
  flex-direction: row;      /* la cifra AL LADO, no encima: la etiqueta baja
                               de ~185px a ~100px y cabe fuera del zigzag */
  align-items: flex-start;
  gap: var(--space-2);
  opacity: clamp(0, calc((var(--q, 1) - var(--t)) * 9), 1);
  will-change: opacity, transform;
}

/* Arriba del punto o abajo, alternando, para que la etiqueta no pise la ruta */
.proceso__hito-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.proceso__hito--arriba {
  transform: translate(-50%, calc(-100% - 26px))
             translateY(calc(16px * (1 - clamp(0, calc((var(--q, 1) - var(--t)) * 9), 1))));
}
.proceso__hito--abajo {
  transform: translate(-50%, 26px)
             translateY(calc(16px * (1 - clamp(0, calc((var(--q, 1) - var(--t)) * 9), 1))));
}

/* Playfair Black, el peso del moodboard. La cifra lleva información: es la
   secuencia del proceso. */
.proceso__numero {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 56px;          /* menor que --fs-numero: aquí va en línea */
  font-weight: var(--peso-black);
  line-height: 0.74;
  letter-spacing: -0.03em;
  color: var(--oszila-azul);
  font-variant-numeric: tabular-nums;
}

.proceso__termino {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--peso-display);
  line-height: var(--lh-heading);
  color: var(--oszila-crema);
  margin: 0;
}

.proceso__texto {
  color: var(--gris-30);
  font-size: var(--fs-body-sm);
  max-width: none;
}


/* --------------------------------------------------------------------------
   12. SERVICIOS — maqueta de la v2, cromática invertida
   En la v2 era contenido marino sobre crema. Aquí el fondo es marino, el
   contenido blanco y los destacados —rótulo, acento en cursiva y lema— van
   en azul claro, que es el único azul que pasa 4.5:1 sobre marino.
   La fotografía manda en 4:5 y el texto va DEBAJO, no encima: sin velo ni
   cristal, porque el fondo es plano y el contraste no depende de la imagen.
   Elementor: Container raíz con Background Color marino y un Container
   horizontal con dos Containers hijos a 1fr.
   -------------------------------------------------------------------------- */

.servicios__cabecera { gap: var(--space-3); margin-bottom: var(--space-8); }
/* El rótulo de sección, en el azul claro que es el único que pasa 4.5:1
   sobre marino. Mismo tratamiento que los rótulos del pie. */
.servicios__rotulo { color: var(--oszila-azul-claro); }

.servicios__titular {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--peso-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--oszila-blanco);
  text-wrap: balance;
  max-width: 24ch;
  margin: 0;
}
.servicios__titular em { font-style: italic; color: var(--oszila-azul-claro); }

.servicios__entrada {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--gris-18);
  max-width: 56ch;
  margin: var(--space-1) 0 0;
}

.servicios__fila { gap: var(--space-6); width: 100%; align-items: stretch; }

.servicio {
  flex: 1 1 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.servicio__media { position: relative; width: 100%; isolation: isolate; }

/* Rectangular: sin arcada ni filo azul, igual que en la v2. */
.servicio__foto {
  display: block;
  width: 100%;
  height: auto;            /* sin esto gana el atributo height del HTML */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.servicio__cuerpo {
  gap: var(--space-3);
  padding-top: var(--space-2);
  align-items: flex-start;
}

.servicio__nombre {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--peso-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--oszila-blanco);
  margin: 0;
}
.servicio__nombre em { font-style: italic; color: var(--oszila-azul-claro); }

/* El lema: la frase que resume el servicio, en versales DM Sans.
   Elementor: Text Editor con Transform: Uppercase. */
.servicio__lema {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--peso-medio);
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  text-transform: uppercase;
  color: var(--oszila-azul-claro);
  max-width: none;
  margin: 0;
}

.servicio__texto {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--gris-18);
  max-width: var(--medida);
  margin: 0;
}

/* La frase de cierre, antes del botón: en blanco, para que cierre el bloque
   con más peso que los párrafos. */
.servicio__cierre {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--oszila-blanco);
  max-width: 40ch;
  margin: 0;
}

.servicio__cuerpo .btn { margin-top: var(--space-2); }




/* --------------------------------------------------------------------------
   13. REPRESENTACIÓN DEL ARMADOR — índice numerado con el aro de marca
   Maqueta importada de la sección «¿Cómo trabajamos en Oszila?» de la v2,
   tal cual: fila 1 con el titular y el aro partido de la O, fila 2 con la
   lista numerada en dos columnas y un filete por entrada.
   Aquí la cifra lleva información: numera los encargos que el armador
   delega. Playfair Black en azul claro, el único azul que pasa 4.5:1 sobre
   marino, igual que en el resto de la sección oscura.
   El prefijo es `armador__` y no `proceso__` porque ese ya lo ocupa la ruta
   de pespunte de «Metodología OSZILA».
   -------------------------------------------------------------------------- */

/* Va justo después de Servicios, que también es marino: entre las dos hay
   96 + 96 = 192px de costura, que es el valor que en la v2 sustituyó a los
   320px que leían como un campo vacío. */

/* FILA 1: titular a la izquierda, aro con la foto a la derecha. */
.armador__intro {
  gap: var(--space-8);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Un titular grande tiene un ancho máximo enorme, así que con `wrap` su
     columna se iría sola a la línea siguiente aunque quepa encogida.
     Elementor: Container > Wrap: No Wrap. */
  flex-wrap: nowrap;
  margin-bottom: var(--space-12);
}
.armador__cabecera { flex: 1 1 auto; min-width: 0; }

.armador__titular {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--peso-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--oszila-crema);
  margin: 0;
}
/* El titular va en DOS líneas fijas, una por span, sin rótulo encima. */
.armador__linea { display: block; }
.armador__titular em { font-style: italic; color: var(--oszila-azul-claro); }

/* FILA 2: los cuatro encargos en dos columnas de dos. */
.armador__fila {
  gap: var(--space-8);
  align-items: flex-start;
  width: 100%;
  flex-wrap: nowrap;   /* Elementor: Container > Wrap: No Wrap */
}
.armador__lista { flex: 1 1 0; flex-direction: column; min-width: 0; }
.armador__media { flex: 0 0 300px; }

.armador__paso {
  display: flex;
  flex-direction: row;
  /* CENTRADO, no baseline: con baseline el término y el texto se apoyarían
     en la línea base de la cifra, o sea a su altura MÁS BAJA.
     Elementor: Container > Align Items: Center. */
  align-items: center;
  /* Dos líneas: la cifra y el término 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);
}
.armador__paso:first-child { border-top: 1px solid rgba(249, 246, 234, 0.16); }

.armador__cifra {
  flex: 0 0 auto;
  /* Ancho fijo y glifo a la izquierda. Las cifras son de dos dígitos y todas
     empiezan por «0», así que su espacio lateral izquierdo es el mismo en las
     cuatro y no hace falta compensación óptica por cifra.
     Elementor: Text Indent en el widget. */
  width: 78px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--peso-black);
  font-size: var(--fs-cifra);
  line-height: 1;
  color: var(--oszila-azul-claro);   /* 5.48:1 sobre marino */
  font-variant-numeric: lining-nums tabular-nums;
}
.armador__nombre {
  flex: 1 1 auto;
  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;
  color: var(--oszila-crema);
}
/* La descripción ocupa la segunda línea entera, sangrada bajo el término
   para que la cifra quede como una entrada de índice. */
.armador__texto {
  flex: 1 1 100%;
  padding-left: calc(78px + var(--space-3));
  color: var(--gris-30);             /* 7.70:1 sobre marino */
  max-width: none;
}

/* La fotografía montada sobre la geometría de marca: una imagen circular con
   el aro partido de la O apoyado EXACTAMENTE sobre su borde.

   La proporción sale del propio SVG y no se estima. Cuerda del arco 283.38,
   flecha 81.38, luego R = (c²/4 + f²)/(2f) = 164.03 y el diámetro, 328.06.
   Para un círculo de diámetro D, la altura del arco es D/1.1577 y su ancho,
   0.2872 × esa altura. Con D = 300: arcos de 259 de alto y 74 de ancho, que
   `space-between` deja con los extremos SOBRE la circunferencia.
   Elementor: Container circular con imagen de fondo + dos Image widgets SVG,
   Wrap: No Wrap, Justify: Space Between, Align: Center. */
.armador__aro {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--oszila-marino) url("../img/costado.jpg") center / cover no-repeat;
  color: var(--oszila-azul);
}
.armador__aro svg { height: 259px; width: auto; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   14. PROFESIONALIDAD LEGAL (clase .equipo, heredada de la sección que
       ocupaba este sitio: la maqueta es la misma, foto con sello a la
       izquierda y texto a la derecha)
   El sello de garantía va montado sobre la esquina superior derecha de la
   foto con margin negativo. Va ANTES de la imagen en el flujo y se tira
   hacia abajo: así queda encima sin position:absolute.
   Elementor: Container del sello con Margin Bottom y Right negativos.
   -------------------------------------------------------------------------- */
/* La declaración de marca abre la sección. Las dos frases son copy literal
   del PDF de contenido y el titular de la fotografía baja a H3, así que la
   jerarquía la dice el tamaño y no hay dos H2 compitiendo.
   Elementor: Container vertical con Heading (H2) y Text Editor. */
.equipo__cabecera { gap: var(--space-3); margin-bottom: var(--space-8); }
.equipo__declaracion { color: var(--oszila-marino); }
.equipo__declaracion em { font-style: italic; color: var(--oszila-azul-texto); }
.equipo__entrada { max-width: 56ch; }

.equipo__fila { gap: var(--space-8); align-items: center; flex-wrap: nowrap; }

.equipo__medios {
  flex: 0 0 46%;
  gap: 0;
  align-items: flex-end;   /* el sello se pega al lado derecho */
}

.equipo__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* 3:4 dentro de un marco 4:5: solo se recorta un 6 % de la altura, y ese
     poco se quita por arriba para no perder la escena de trabajo de abajo. */
  object-position: center 58%;
  border-radius: var(--radio-media);
}

/* --- Sello de garantía -------------------------------------------------- */
.sello {
  flex: 0 0 auto;
  z-index: 2;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 132px;
  height: 132px;
  /* Montado SOBRE la esquina: 104 de sus 132px caen dentro de la foto, para
     que el cristal tenga imagen que desenfocar. Con media altura fuera, la
     mitad de arriba quedaba sobre el fondo crema y no desenfocaba nada. */
  margin-bottom: -104px;
  margin-right: calc(var(--space-3) * -1);
  border-radius: 50%;
  background-color: var(--cristal-claro);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--cristal-borde-claro);
  box-shadow: var(--sombra-2);
  text-align: center;
}

/* El icono son los dos arcos de la O del logotipo abrazando la marca de
   comprobación: la garantía dicha con el alfabeto de la propia marca. */
.sello__icono {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--oszila-azul-texto);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sello__texto {
  max-width: none;
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: var(--peso-medio);
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oszila-marino);
}

.equipo__texto { flex: 1 1 44%; gap: var(--space-3); }
.equipo__titulo em { color: var(--oszila-azul-texto); }



/* --------------------------------------------------------------------------
   15. TESTIMONIOS — importados de la v2
   Ni tarjetas ni carrusel: cuatro citas en dos columnas, la segunda
   escalonada hacia abajo, separadas por filete. La cita va en la cursiva de
   Playfair, que es el acento de la marca, y la firma en versales.
   Elementor: Container horizontal con dos Containers verticales.
   -------------------------------------------------------------------------- */

/* La sección anterior (Profesionalidad) ya va en crema: sin aire arriba las
   dos leen como un mismo campo, con el filete de la primera cita haciendo de
   costura. */
.testimonios { padding-top: 0; padding-bottom: var(--seccion-y-ancha); }
.testimonios__cabecera { gap: var(--space-3); margin-bottom: var(--space-12); }
.testimonios__rotulo { color: var(--oszila-azul-texto); }

.testimonios__titular {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--peso-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--oszila-marino);
  max-width: 22ch;
  margin: 0;
}
.testimonios__titular em { font-style: italic; color: var(--oszila-azul-texto); }

.testimonios__fila { gap: var(--space-12); align-items: flex-start; width: 100%; }
.testimonios__col { flex: 1 1 0; min-width: 300px; gap: var(--space-8); }
/* La segunda columna baja: dos columnas a la misma altura leen como rejilla.
   Elementor: Margin Top en el Container. */
.testimonios__col--baja { margin-top: 112px; }

.cita { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--borde); }
.cita blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-h5);
  line-height: 1.42;
  letter-spacing: var(--tracking-playfair-i);
  color: var(--oszila-marino);       /* 15.87:1 sobre crema */
  max-width: 42ch;
}
/* Las comillas las pone el CSS, no el copy: así el texto entra literal y sin
   caracteres añadidos. */
.cita blockquote::before { content: "\201C"; }
.cita blockquote::after  { content: "\201D"; }
.cita figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  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(--texto-secundario);    /* 5.44:1 sobre crema */
}

/* Entrada al aparecer en pantalla. La clase `espera` la pone el JS, así que
   sin JavaScript no se esconde nada.
   Elementor: Entrance Animation + Animation Delay por elemento (nativo). */
.aparece.espera {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
}
.aparece {
  transition: opacity var(--dur-lento) var(--ease),
              transform var(--dur-lento) var(--ease),
              filter var(--dur-lento) var(--ease);
  transition-delay: calc(var(--i, 0) * 0.11s);
}
.aparece.esta-dentro {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* --------------------------------------------------------------------------
   16. CTA FINAL
   Los dos arcos flanquean el bloque. Es el único sitio de la página donde
   se usan, para que signifiquen algo.
   Elementor: Container raíz con Background Image del isotipo
   (Position: right center · Size: contain · Opacity baja).
   -------------------------------------------------------------------------- */
.cta {
  padding-top: var(--seccion-y-ancha);
  padding-bottom: var(--seccion-y-ancha);
}

.cta__fila {
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--space-6);
}

.cta__arco { flex: 0 0 auto; height: 208px; width: auto; }

.cta__contenido {
  flex: 0 1 720px;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.cta__titulo { color: var(--oszila-crema); }
.cta__titulo em { color: var(--oszila-azul-claro); }
.cta__cuerpo { color: var(--gris-18); }
.cta__acciones { padding-top: var(--space-1); }

.btn--grande {
  font-size: var(--fs-boton);
  padding: var(--space-3) var(--space-6);
}


/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.pie {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--gris-75);
}

.pie__fila { gap: var(--space-8); align-items: flex-start; justify-content: space-between; }

.pie__marca { flex: 1 1 340px; gap: var(--space-2); max-width: 44ch; }
.pie__logo { width: 148px; height: auto; }

.pie__bloque { flex: 0 1 200px; gap: var(--space-1); }
.pie__rotulo { color: var(--oszila-azul-claro); padding-bottom: var(--space-1); }

.is-oscuro a.pie__enlace {
  color: var(--oszila-crema);
  text-decoration: none;
  opacity: 0.8;
  padding-block: 3px;   /* 24px de alto es el mínimo justo; esto da holgura */
}
.pie__enlace:hover { opacity: 1; text-decoration: underline; }

.pie__legales { gap: var(--space-3); flex-wrap: wrap; }

.pie__legal {
  gap: var(--space-3);
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-75);
}

/* --------------------------------------------------------------------------
   18. BREAKPOINTS
   Exactamente los dos activos por defecto en Elementor Pro.
   Elementor apila los Containers horizontales al pasar a móvil.
   -------------------------------------------------------------------------- */

/* ============================ TABLET · 1024px ============================ */
@media (max-width: 1024px) {

  .e-container { gap: var(--space-4); }

  /* A 1024px el nav YA NO CABE junto al logotipo centrado: el logotipo se
     centra con dos columnas de `flex: 1 1 0`, así que el nav solo dispone de
     430px y los cuatro rótulos piden 482. Se oculta aquí, igual que en
     móvil; la página es un solo scroll y el pie lleva el índice completo.
     Elementor: Responsive > Hide on Tablet en el Nav Menu.
     (Ojo: esto ya pasaba antes de renombrar los rótulos —con «Servicios»
     el nav se metía 40px bajo el logotipo a 1024— solo que no se había
     medido.)

     Se oculta la LISTA, no el `.nav`: el `.nav` es la columna de
     `flex: 1 1 0` que equilibra a la de acciones, y sin ella el logotipo se
     iría 406px a la izquierda en vez de quedarse centrado. */
  .nav__lista { display: none; }

  /* Y en su lugar entra el botón del menú, que a partir de aquí es la única
     forma de llegar a las secciones desde arriba.
     Elementor: Responsive > Show on Tablet en el Toggle del Off-Canvas. */
  .btn--icono { display: inline-flex; }

  .hero { min-height: auto; padding-bottom: var(--space-8); }
  .hero__yate-marco { flex-basis: 62%; }
  .hero__banda { margin-top: calc(var(--space-1) * -1); margin-bottom: 0; }
  .hero__entradilla { margin-top: var(--space-3); }

  .escena__lienzo { gap: var(--space-8); }
  /* En tablet las dos columnas se apilan: a 340px fijos el titular se queda
     sin sitio y rompe en cinco líneas. */
  .escena__cabeza { flex-direction: column; flex-wrap: wrap; gap: var(--space-6); }
  .escena__izq, .escena__der { flex: 1 1 auto; width: 100%; }
  .escena__parrafo { max-width: 56ch; }

  /* Dos por fila en lugar de cuatro */
  .indice__item { flex-basis: calc(50% - var(--space-3)); }

  /* La carta batimétrica pierde protagonismo y las etiquetas de la ruta se
     estrechan para que quepan cinco en el ancho de tablet */
  .proceso { background-position: right -200px center; background-size: auto 112%; }
  .proceso__hito { width: 184px; }
  .proceso__numero { font-size: 44px; }

  .servicios__titular { max-width: none; }

  /* El aro baja bajo el titular y los cuatro encargos pasan a una columna.
     Elementor: Wrap: Wrap en los dos Containers a partir de Tablet. */
  .armador__intro { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .armador__media { flex: 0 0 auto; align-self: flex-start; }
  .armador__fila { flex-direction: column; gap: 0; }

  .equipo__fila { gap: var(--space-6); }

  .testimonios__col--baja { margin-top: 64px; }

  .cta { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .cta__arco { height: 120px; }
  .cta__fila { gap: var(--space-4); }

  .pie__fila { gap: var(--space-6); }
}

/* ============================ MOBILE · 767px ============================= */
@media (max-width: 767px) {

  /* Regla global: los Containers horizontales se apilan, igual que en
     Elementor al cambiar la dirección en el breakpoint móvil. */
  .e-flex-row { flex-direction: column; }
  .e-container { padding-left: var(--space-2); padding-right: var(--space-2); }

  /* Header en móvil: logotipo a la izquierda y SOLO el botón del menú a la
     derecha. «Área de usuario» sale de la cabecera y pasa a ser el último
     item del panel: dos botones a este ancho dejan el logotipo sin sitio.
     Elementor: Responsive > Hide on Mobile en el Button, y el enlace de
     usuario como último item del Off-Canvas. */
  .sitio-header__fila { flex-direction: row; gap: var(--space-1); justify-content: space-between; }
  .nav { display: none; }
  .sitio-header__area { display: none; }
  .sitio-header__acciones { flex: 0 0 auto; }
  .sitio-header__logo img { width: 120px; }

  /* El panel arranca justo bajo la cabecera y llega, como mucho, hasta el
     borde inferior: con seis items no hace falta más, pero si el texto
     creciera se desplaza dentro en vez de salirse de pantalla. */
  .menu-panel {
    max-height: calc(100svh - var(--altura-header));
    overflow-y: auto;
  }

  /* Hero. El velo sube de opacidad porque el titular ya ocupa todo el ancho.
     Elementor: el Background Overlay se configura por dispositivo. */
  .hero {
    min-height: auto;
    padding-top: calc(var(--altura-header) + var(--space-6));
    padding-bottom: var(--space-8);
    background-image: linear-gradient(
                        to bottom,
                        rgba(11, 27, 53, 0.56) 0%,
                        rgba(11, 27, 53, 0.86) 100%),
                      url("../img/hero-mar.jpg");
    background-position: center center;
  }

  /* La banda se reordena con wrap en lugar de apilarse en tres: el yate
     ocupa una fila entera y los dos datos caen debajo, uno a cada extremo.
     Elementor: en el breakpoint móvil, Width 100 % en la imagen y
     Justify Content: Space Between en el Container. */
  .hero__banda {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-top: 0;
    margin-bottom: 0;
  }
  .hero__yate-marco { flex: 0 0 100%; order: -1; }

  .hero__titulo { letter-spacing: -0.03em; }
  .hero__entradilla { margin-top: var(--space-3); }
  .hero__acciones { align-items: stretch; margin-top: var(--space-3); gap: var(--space-2); }
  .hero__acciones .btn { width: 100%; }

  .escena__lienzo { gap: var(--space-6); }
  .indice { gap: var(--space-4); }
  .indice__item { flex-basis: auto; }

  /* Proceso en móvil: sin anclaje ni ruta. La escena vuelve al flujo y los
     cinco hitos se apilan legibles. Móvil está aparcado por decisión del
     cliente, pero al menos no se rompe. */
  .proceso { height: auto !important; min-height: 0; background-attachment: scroll; }
  .proceso__escena { position: static; height: auto; padding: var(--space-8) var(--space-2); }
  .proceso__mapa { height: auto; }
  .proceso__trazo { display: none; }
  .proceso__hito {
    position: static;
    width: auto;
    transform: none !important;
    opacity: 1 !important;
    padding-top: var(--space-3);
    border-top: 1px solid var(--gris-75);
  }
  .proceso__mapa { display: flex; flex-direction: column; gap: var(--space-3); }

  /* Servicios: las dos tarjetas apiladas, cada una a media pantalla */
  .servicios__fila { flex-direction: column; gap: var(--space-8); }
  .servicio { flex-basis: auto; min-width: 0; }

  /* La descripción deja de ir sangrada: a este ancho la sangría de 102px se
     come media caja de texto. */
  .armador__texto { padding-left: 0; }
  .armador__aro { width: 200px; height: 200px; }
  .armador__aro svg { height: 173px; }

  .testimonios__fila { flex-direction: column; gap: var(--space-8); }
  .testimonios__col { min-width: 0; }
  .testimonios__col--baja { margin-top: 0; }

  .equipo__cabecera { margin-bottom: var(--space-6); }
  .equipo__fila { gap: var(--space-4); }
  .equipo__medios, .equipo__texto { flex-basis: auto; }
  .equipo__foto { aspect-ratio: 3 / 4; }
  .sello { width: 108px; height: 108px; margin-bottom: -84px; margin-right: calc(var(--space-2) * -1); }
  .sello__icono { width: 34px; height: 34px; }

  /* Los arcos no caben a 375px: se ocultan, no se apilan.
     Elementor: Responsive > Hide on Mobile en el Container del arco. */
  .cta {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .cta__arco { display: none; }
  .cta__contenido { flex-basis: auto; }
  .cta__acciones { align-items: stretch; }
  .cta__acciones .btn { width: 100%; }

  .pie__fila { gap: var(--space-4); }
  .pie__marca, .pie__bloque { flex-basis: auto; }
  .pie__legal { gap: var(--space-2); margin-top: var(--space-6); }
}