/* ==========================================================================
   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; }

.nav__lista { flex-wrap: nowrap; gap: var(--space-4); }

/* 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; }


/* --------------------------------------------------------------------------
   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. PROBLEMA
   Va justo debajo del hero, sin montarse encima. El titular lleva el mismo
   estilo que el de la sección de equipo: Playfair a --fs-h2, marino, y la
   segunda frase en cursiva azul.
   -------------------------------------------------------------------------- */
.problema__contenedor { gap: var(--space-12); }

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

/* Mismo estilo que el titular de la sección de equipo: Playfair a --fs-h2,
   marino, y la segunda frase en cursiva azul. */
.problema__titulo { max-width: 26ch; }
.problema__titulo em { color: var(--oszila-azul-texto); }

.problema__cuerpo { color: var(--texto-secundario); }

/* Los cuatro resultados: índice con iconos náuticos, SIN línea separadora.
   Elementor: Container con un Icon widget (SVG personalizado), un Heading y
   un Text Editor. Sin bordes. */
.indice { gap: var(--space-3); align-items: stretch; }

/* Cada resultado va en su tarjetita, en el mismo crema un 5 % más oscuro.
   Elementor: Container con Background Color #F4EED7, Border Radius 10 y
   padding, con un Icon widget, un Heading y un Text Editor dentro. */
.indice__item {
  flex: 1 1 calc(25% - var(--space-3));
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background-color: var(--beige-tarjeta);
  border-radius: var(--radio-card);
}

.indice__icono {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-1);
  fill: none;
  stroke: var(--oszila-azul-texto);
  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);
  margin: 0;
}

.indice__def { color: var(--texto-secundario); font-size: var(--fs-body-sm); }


/* --------------------------------------------------------------------------
   11. PROCESO — ruta de pespunte anclada al scroll
   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 — a sangre y a pantalla completa
   Dos tarjetas al 50 %, sin margen arriba ni abajo, sin contenedor de ancho
   máximo y sin titular de sección. Cada una lleva la fotografía a sangre y
   el texto ENCIMA de la imagen, dentro de un velo degradado con desenfoque
   que sube desde el borde inferior. Sin caja: ni borde, ni radio, ni fondo
   recortado.
   Elementor: Container raíz con Content Width: Full Width, Min Height 100vh
   y padding 0, con dos Containers hijos al 50 %. El desenfoque progresivo
   son dos líneas en Advanced > Custom CSS (backdrop-filter y mask-image).
   -------------------------------------------------------------------------- */
.servicios {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100svh;
}

.servicios__fila {
  width: 100%;
  min-height: 100svh;
  gap: 0;
  flex-wrap: nowrap;
  align-items: stretch;
}

.servicio {
  flex: 1 1 50%;                  /* mitad y mitad */
  min-width: 0;
  justify-content: flex-end;      /* el velo se apoya en el borde inferior */
  gap: 0;
  padding: 0;                     /* la foto va a sangre */
  overflow: hidden;
  background-color: var(--oszila-marino);
  background-size: cover;
  background-repeat: no-repeat;
}

.servicio--control {
  background-image: url("../img/servicio-control.jpg");
  background-position: center 34%;
}

.servicio--operativa {
  background-image: url("../img/servicio-operativa.jpg?v=2");
  /* La foto viene a 0.806 y la tarjeta es 0.80, así que se ve casi entera y
     el encuadre vertical apenas influye. */
  background-position: center center;
}

.servicio__velo {
  width: 100%;
  gap: var(--space-2);
  /* El aire de arriba es lo que le da recorrido al degradado */
  padding: var(--space-12) var(--space-6) var(--space-8);

  /* 1. El color: sube desde el borde inferior hasta desaparecer.
        Elementor: Background > Gradient, ángulo 0°. */
  background-image: linear-gradient(
                      to top,
                      rgba(11, 27, 53, 0.96) 0%,
                      rgba(11, 27, 53, 0.90) 26%,
                      rgba(11, 27, 53, 0.60) 58%,
                      rgba(11, 27, 53, 0.18) 82%,
                      rgba(11, 27, 53, 0) 100%);

  /* 2. El cristal: el desenfoque se desvanece en la misma dirección que el
        color, porque la máscara recorta el propio backdrop-filter. */
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 92%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 92%);
}

.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-crema);
  margin: 0;
}

.servicio__texto {
  font-size: var(--fs-body);
  /* Crema, no gris: sobre fotografía el gris no aguanta si la foto es clara.
     La jerarquía con el nombre la llevan el tamaño y la familia. */
  color: var(--oszila-crema);
  max-width: 42ch;
}


/* --------------------------------------------------------------------------
   13. EQUIPO
   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.
   -------------------------------------------------------------------------- */
.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;
  object-position: center 42%;
  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); }


/* --------------------------------------------------------------------------
   14. 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);
}


/* --------------------------------------------------------------------------
   15. 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);
}

/* --------------------------------------------------------------------------
   16. 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 caben logo, nav y botón; solo se aprieta el nav */
  .nav__lista { gap: var(--space-3); }

  .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); }

  .problema__contenedor { gap: var(--space-8); }
  .problema__titulo { max-width: 24ch; }

  /* 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; }

  .servicio__velo { padding: var(--space-8) var(--space-4) var(--space-6); }

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

  .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: sin hamburguesa. El nav se oculta y quedan logo y botón.
     Elementor: Responsive > Hide on Mobile en el Container del Nav Menu. */
  .sitio-header__fila { flex-direction: row; gap: var(--space-1); }
  .nav { display: none; }
  /* Sin botón en la cabecera, el logotipo se centra solo */
  .sitio-header__fila { justify-content: center; }
  .sitio-header__logo img { width: 120px; }

  /* 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%; }

  .problema__contenedor { gap: var(--space-6); }
  .problema__titulo { max-width: none; }
  .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, .servicios__fila { min-height: 0; }
  .servicios__fila { flex-direction: column; }
  .servicio { flex-basis: auto; min-height: 60svh; }
  .servicio__velo { padding: var(--space-8) var(--space-3) var(--space-4); }

  .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); }
}