/* ==========================================================================
   Caribia Sailing — demo de rediseño (Nibiru AIgency)
   Dirección: "cuaderno de bitácora". El casco del Nereida es el fondo,
   el teal del logotipo el acento, el teca el calor. Rótulos y cifras en
   Jost; las cifras, con figuras tabulares para que alineen en columna
   como los instrumentos de a bordo (ver bloque "Cifras": la monoespaciada
   se retiró porque su cero punteado se leía como un ocho).

   Tipografía (18-ago-2026): la fuente de marca es Futura Futuris Italic,
   comercial y sin licencia aquí. Se sustituye por Jost, geométrica de la
   misma familia visual y disponible en Google Fonts. JOST NO ES LA FUENTE
   DE MARCA: es un sustituto documentado. Si se compra la licencia de
   Futura Futuris, basta cambiar --ff-brand.

   El resto de familias se cargan desde el <link> de cada HTML. Jost entra
   por @import porque esta tanda no podía tocar los .html; al integrar,
   moverlo al <link> de la cabecera y borrar este import (evita la cadena
   serie CSS -> import, que retrasa el primer render).
   ========================================================================== */
/* Jost se carga desde el <link> de cada pagina, junto a Bodoni y Karla. */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, li { overflow-wrap: break-word; }
ul[class] { list-style: none; padding: 0; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Casco del Nereida, teal del logotipo, cubierta de teca */
  --hull:      #08161f;
  --hull-2:    #0d2432;
  --hull-3:    #143246;
  --foam:      #edf3f3;
  --haze:      #8fa8b4;

  /* Teal de marca: el 83,5 % de los píxeles del logotipo. Es el acento.
     Sobre --hull da 6,48:1 y sobre --hull-2 5,64:1, así que aguanta texto
     pequeño en todas las superficies sólidas del sitio.
     OJO: sobre BLANCO da 2,83:1. No vale para texto sobre fondo claro; si
     algún día hay superficie blanca, hace falta un teal oscurecido. */
  --cala:      #00abac;
  /* Variante de flyer de la propia clienta (#36B8BD). Se usa solo donde el
     fondo es una foto velada y el teal puro se queda corto: el antetítulo y la
     cursiva del hero. Sobre el velo más claro posible del hero da 5,94:1,
     frente a 3,21:1 del teal puro. */
  --cala-lite: #36b8bd;
  /* Aclarado de hover: el texto oscuro encima gana contraste, no lo pierde. */
  --cala-hi:   #00c6c7;
  --teak:      #c79357;

  --line:      rgba(143, 168, 180, .22);
  --line-soft: rgba(143, 168, 180, .12);

  --ff-display: "Bodoni Moda", Georgia, serif;
  --ff-brand:   "Jost", "Century Gothic", system-ui, -apple-system, sans-serif;
  --ff-body:    "Karla", system-ui, -apple-system, sans-serif;
  /* Fuente de las cifras. Ver el bloque "Cifras" más abajo: NO puede ser una
     monoespaciada con cero punteado. Va atada a --ff-brand para que rótulo y
     cifra no se separen dentro del mismo chip. */
  --ff-num:     var(--ff-brand);
  /* AVISO: IBM Plex Mono tiene el cero PUNTEADO. Comprobado ampliando la glifa
     a 108 px el 18-ago-2026: a tamaño pequeño el 0 se lee como un 8, y el
     cliente lo detectó en la demo. No la uses para nada que lleve dígitos.
     Se mantiene el token definido porque el <link> de los HTML sigue cargando
     la familia y para que nada que la referencie quede sin resolver. */
  --ff-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Texto corrido pequeño: nunca por debajo de 15px efectivos. */
  --step--1: clamp(.9375rem, .91rem + .14vw, 1rem);
  /* Rótulos en versalita con tracking. No es texto corrido, por eso puede
     bajar de 15px, pero sube desde los 9-11px que había antes. */
  --step-ui:   clamp(.875rem, .85rem + .12vw, .9375rem);
  --step-ui-s: clamp(.8125rem, .79rem + .1vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.34rem + .8vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.7rem + 4.4vw, 6rem);

  /* Alto de la fila de cabecera. El menú desplegable de móvil se ancla
     justo debajo, así que los dos valores tienen que moverse juntos: si esto
     cambia y el `inset` del .nav no, el menú se solapa con la cabecera. */
  --head-h: 5.25rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 62ch;
  --wrap: 1280px;
  --section-y: clamp(4.5rem, 9vw, 9rem);
}

/* --- Base ----------------------------------------------------------------- */
body {
  background: var(--hull);
  color: var(--foam);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.65;
}

/* Bodoni se queda: es la voz editorial de la demo y solo aparece a partir de
   ~19px (titulares, citas, motto, FAQ), donde su trazo fino no estorba. Lo que
   se corrige es el peso: en fondo oscuro el 400 desaparece, así que los
   titulares van a 500 (el peso está cargado). La cursiva solo existe en 400,
   por eso los elementos en cursiva se fijan explícitamente a 400 más abajo. */
h1, h2, h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.015em;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--cala); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--panel { background: var(--hull-2); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cala); color: var(--hull); padding: .7rem 1.1rem;
  font-family: var(--ff-brand); font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- Utilidades de texto -------------------------------------------------- */
.eyebrow {
  font-family: var(--ff-brand);
  font-size: var(--step-ui);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cala);
}
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--haze); max-width: var(--measure); }
.prose { color: var(--haze); max-width: var(--measure); line-height: 1.7; }
.prose + .prose { margin-top: 1rem; }
/* .mono conserva el nombre porque puede haber HTML que lo use, pero ya no da
   monoespaciada: da cifras alineadas en la sans del sitio. Ver bloque "Cifras". */
.mono { font-family: var(--ff-num); font-variant-numeric: tabular-nums lining-nums; }
.teak { color: var(--teak); }

/* --- Cifras ---------------------------------------------------------------
   Los números salen de la monoespaciada (18-ago-2026, aviso del cliente).
   Comprobado a 108 px sobre la propia demo, no deducido: el cero de IBM Plex
   Mono lleva un PUNTO dentro, y a var(--step--1) el punto empasta y el 0 pasa
   por 8. En una web donde los números son precios y horas de salida, "10:00"
   podía leerse "18:88".

   Lo único que aportaba la mono era alinear las cifras en columna, y eso lo da
   tabular-nums sin necesidad de monoespaciada: medido en Jost a 100 px de
   cuerpo, "1111", "0000", "8888" y "4747" ocupan los mismos 240 px exactos.

   Jost pasa las tres comprobaciones: el 0 es un óvalo abierto y limpio, el 1
   lleva bandera diagonal (la l y la I son barras desnudas, no se confunden) y
   el 6 y el 8 no se parecen ni de lejos.
   Pega conocida: en Jost el 0 y la O mayúscula son casi el mismo círculo. No
   hay ningún dato del sitio que los mezcle —el código postal 07670 va en Karla,
   en el pie—, pero no metas aquí texto con Oes.
   -------------------------------------------------------------------------- */
.rail__v,
.leg__time,
.prod__amount,
.specs dd,
.base__coord,
.boat__model {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Estos ya van en la fuente de rótulos; solo les falta la alineación tabular. */
.chip, .passage__head, .prod__base, .specs dt, .rail__k, .foot__bar {
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Cabecera de sección: eyebrow + regla + título ------------------------ */
.head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head__rule {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.4rem;
}
.head__rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.head__title { font-size: var(--step-3); max-width: 20ch; }
.head__sub { margin-top: 1.2rem; }

/* --- Botones -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.6rem;
  font-family: var(--ff-brand); font-size: var(--step-ui);
  font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  /* Sin esto, el <button type="submit"> del formulario de contacto hereda el
     ButtonFace del navegador (#f0f0f0) y pinta el texto --foam encima: blanco
     sobre blanco, el botón de enviar era ilegible. Los <a class="btn"> no lo
     notaban porque su fondo por defecto ya es transparente. */
  background: transparent;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s;
}
/* Texto oscuro sobre el teal: 6,48:1. Al revés (blanco sobre teal) serían
   2,83:1 y no pasaría, así que el botón principal nunca lleva texto claro. */
.btn--primary { background: var(--cala); color: var(--hull); font-weight: 700; }
.btn--primary:hover { background: var(--cala-hi); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line); color: var(--foam); }
.btn--ghost:hover { border-color: var(--cala); color: var(--cala); }
.btn__wa { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* --- Cabecera ------------------------------------------------------------- */
/* El velo sube de .78 a .9: la cabecera flota sobre la foto del hero y con .78
   el rótulo turquesa caía a 3,2:1 sobre una vela blanca. Con .9 el peor caso
   posible del teal es 5,03:1 y el del texto haze, 5,71:1. El blur sigue igual,
   así que la foto se sigue intuyendo detrás. */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8, 22, 31, .9);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
/* La fila sube de 4.5rem a 5.25rem para que quepa el logotipo con aire. */
.site-head__inner {
  display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.5rem);
  min-height: var(--head-h);
}
/* flex: none en los dos. Sin esto el logotipo es un elemento flexible más y,
   cuando la fila va justa (medido a 961 px), el navegador le quita ancho pero
   no alto: el lockup salía aplastado en horizontal y nadie se entera. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
         text-decoration: none; margin-right: auto; flex: none; }
/* El lema va bajo el logotipo. En versal fina y pequeño para que no compita
   con la palabra SAILING del propio lockup, que está justo encima. */
.brand__tag { font-family: var(--ff-brand); font-size: var(--step-ui-s);
         text-transform: uppercase; letter-spacing: .16em; font-weight: 500;
         color: var(--cala); line-height: 1; }
/* El logotipo se dimensiona por ALTO, no por ancho: la vela ocupa el 100 % del
   alto del lockup y las letras solo el 22 %, así que es el alto el que decide
   si "CARIBIA SAILING" se lee. A 3.75rem (60 px) las letras miden ~13 px de
   caja alta y el lockup ocupa ~120 px de ancho: menos que el bloque de texto
   que había antes, con lo que la cabecera va más holgada que nunca. */
.brand__logo { height: 3.75rem; width: auto; flex: none; }
.nav { display: flex; gap: clamp(.85rem, 1.5vw, 1.5rem); }
.nav a {
  font-size: var(--step-ui-s); font-family: var(--ff-brand);
  font-weight: 500; white-space: nowrap;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; color: var(--haze); padding-block: .4rem;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--foam); }
.nav a[aria-current="page"] { color: var(--foam); border-bottom-color: var(--cala); }
/* Franja crítica: el menú horizontal aparece a partir de 60rem, y justo ahí
   arriba conviven el logotipo y siete entradas que en castellano son largas
   ("Velero compartido"). Medido a 961 px la fila cabía al píxel exacto, así que
   aquí el logotipo baja un punto y los huecos se aprietan. */
/* 60.001rem y no 60.0625rem: con 60.0625rem (=961px exactos) el navegador dejaba
   una rendija de 1px justo en 961, donde ni esta consulta ni la de móvil
   casaban, y ahí la fila quedaba sin un píxel de holgura. Medido. */
@media (min-width: 60.001rem) and (max-width: 80rem) {
  .site-head__inner { gap: .75rem; }
  .brand__logo { height: 3.1rem; }
  .nav { gap: clamp(.6rem, .9vw, 1.2rem); }
  .nav a { letter-spacing: .02em; }
}

/* Selector de idioma con banderas SVG en línea: nada de emoji, que en Windows
   no se dibujan y salen como dos letras. */
.lang { display: flex; align-items: center; gap: .45rem; }
.lang button {
  background: none; border: 0; padding: 0; cursor: pointer; line-height: 0;
  border-radius: 2px; opacity: .45;
  transition: opacity .2s, box-shadow .2s;
}
.lang button:hover { opacity: .85; }
.lang button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 1.5px var(--cala); }
.lang svg {
  display: block; width: 24px; height: 16px; border-radius: 2px;
  box-shadow: inset 0 0 0 .5px rgba(237,243,243,.35);
}

.burger { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--foam); transition: transform .3s, opacity .3s; }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------- */
/* La foto va en color: el velo solo cubre el pie y el flanco donde cae el texto.
   Oscurecer la parte alta apagaba la imagen (nota de la clienta, 17-ago-2026). */
.hero { position: relative; display: grid; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.12) contrast(1.04);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(8,22,31,.9) 0%, rgba(8,22,31,.55) 28%, rgba(8,22,31,.12) 58%, rgba(8,22,31,0) 82%),
    linear-gradient(to right, rgba(8,22,31,.62) 0%, rgba(8,22,31,.18) 45%, rgba(8,22,31,0) 70%);
}
.hero__inner { padding-block: clamp(5rem, 16vh, 10rem) clamp(1.25rem, 2vw, 1.75rem); }
.hero__title {
  font-size: var(--step-4); max-width: 14ch; margin-block: 1.4rem 1.6rem;
  text-shadow: 0 2px 24px rgba(8,22,31,.55);
}
/* Sobre foto el teal puro pierde: aquí manda la variante clara de la clienta.
   Aun así, el titular cruza la vela, que es lo más claro de la portada, y
   ningún teal de esta marca llega a 3:1 contra blanco (el anterior tampoco:
   1,95:1 frente a 2,16:1 de este). No se puede oscurecer más el velo —la
   clienta se quejó justo de que la foto salía apagada—, así que las letras
   llevan halo propio: sombra corta y dura pegada al trazo, no difusa. */
.hero__title em {
  font-style: italic; font-weight: 400; color: var(--cala-lite);
  text-shadow: 0 1px 2px rgba(8,22,31,.95), 0 2px 10px rgba(8,22,31,.9), 0 0 34px rgba(8,22,31,.7);
}
.hero__lede {
  max-width: 46ch; color: rgba(237,243,243,.94); font-size: var(--step-1);
  text-shadow: 0 1px 16px rgba(8,22,31,.6);
}
.hero .eyebrow { color: var(--cala-lite); text-shadow: 0 1px 12px rgba(8,22,31,.7); }
.hero .btn-row { margin-top: 2.2rem; }

/* La portada respira más: el velo arranca aún más abajo. */
.hero--bright { min-height: min(88vh, 46rem); align-content: end; }
.hero--bright::after {
  background:
    linear-gradient(to top, rgba(8,22,31,.92) 0%, rgba(8,22,31,.5) 32%, rgba(8,22,31,.06) 62%, rgba(8,22,31,0) 85%),
    linear-gradient(to right, rgba(8,22,31,.62) 0%, rgba(8,22,31,.22) 34%, rgba(8,22,31,0) 58%);
}
/* Titular estrecho para que no se cruce con los pasajeros de la botavara. */
.hero--bright .hero__title { max-width: 11ch; }
.hero--bright .hero__lede { max-width: 34ch; }

.hero--page .hero__inner { padding-block: clamp(4rem, 12vh, 7rem) clamp(2.5rem, 5vw, 3.5rem); }
.hero--page .hero__title { font-size: var(--step-3); max-width: 18ch; }

/* --- Riel de instrumentos ------------------------------------------------- */
.rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.rail__cell { padding: 1.1rem 1.2rem 1.1rem 0; border-right: 1px solid var(--line-soft); }
.rail__cell:last-child { border-right: 0; }
.rail__v {
  font-size: var(--step-1); color: var(--foam); line-height: 1.2;
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}

/* Estrellas con relleno proporcional: el degradado marca hasta dónde llega la
   nota y la máscara recorta las cinco puntas. Un 4,8 no se pinta como un 5. */
.stars {
  --v: 5;
  display: inline-block; flex: none;
  font-size: .62em; width: calc(5 * 1.18em); height: 1em;
  /* Las estrellas pasan del dorado al teal de marca: el acento es uno solo. */
  background: linear-gradient(to right,
    var(--cala) calc(var(--v) / 5 * 100%), rgba(143,168,180,.32) 0);
  -webkit-mask: var(--star) repeat-x left center / 1.18em 1em;
          mask: var(--star) repeat-x left center / 1.18em 1em;
}
:root {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
}
.rail__k {
  font-family: var(--ff-brand); font-size: var(--step-ui-s); font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase; color: var(--haze); margin-top: .5rem;
}

/* --- Rejillas ------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --- Panel de línea de negocio (privado / compartido) --------------------- */
.line-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 30rem; overflow: hidden;
  border: 1px solid var(--line-soft); text-decoration: none;
  transition: border-color .3s;
}
.line-card:hover { border-color: var(--cala); }
.line-card__media { position: absolute; inset: 0; z-index: 0; }
.line-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.line-card:hover .line-card__media img { transform: scale(1.05); }
.line-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,22,31,.96) 12%, rgba(8,22,31,.55) 55%, rgba(8,22,31,.25));
}
.line-card__body { position: relative; z-index: 2; margin-top: auto; padding: clamp(1.5rem, 3vw, 2.2rem); }
.line-card__title { font-size: var(--step-2); margin-block: .85rem .7rem; }
.line-card__text { color: rgba(237,243,243,.88); font-size: var(--step-0); line-height: 1.6; max-width: 40ch; }
.line-card__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-family: var(--ff-brand); font-size: var(--step-ui); font-weight: 500;
}
.line-card__price { color: var(--cala-lite); }
.line-card__go { letter-spacing: .1em; text-transform: uppercase; color: var(--haze); }
.line-card:hover .line-card__go { color: var(--foam); }

/* --- Plan de navegación (elemento firma) ---------------------------------- */
.passage { border: 1px solid var(--line-soft); background: var(--hull-2); }
.passage__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 1.5rem;
  padding: 1.4rem clamp(1.25rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--ff-brand); font-size: var(--step-ui); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--haze);
}
.passage__head strong { color: var(--foam); font-weight: 700; }
.passage__legs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.2rem) clamp(1.75rem, 3vw, 2.5rem);
}
.leg { position: relative; padding-top: 2.4rem; padding-right: 1rem; }
.leg::before { /* la línea de rumbo */
  content: ""; position: absolute; top: .48rem; left: 0; right: 0; height: 1px;
  background: var(--line); transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.4,0,.2,1);
}
.leg:last-child::before { right: calc(100% - .55rem); }
.leg::after { /* la marca de waypoint */
  content: ""; position: absolute; top: 0; left: 0;
  width: .55rem; height: .55rem; border-radius: 50%;
  border: 1px solid var(--cala); background: var(--hull-2);
  opacity: 0; transform: scale(.4); transition: opacity .4s, transform .4s;
}
.leg--stop::after { background: var(--cala); }
.is-plotted .leg::before { transform: scaleX(1); }
.is-plotted .leg::after { opacity: 1; transform: scale(1); }
.leg:nth-child(2)::before, .leg:nth-child(2)::after { transition-delay: .12s; }
.leg:nth-child(3)::before, .leg:nth-child(3)::after { transition-delay: .24s; }
.leg:nth-child(4)::before, .leg:nth-child(4)::after { transition-delay: .36s; }
.leg:nth-child(5)::before, .leg:nth-child(5)::after { transition-delay: .48s; }
.leg:nth-child(6)::before, .leg:nth-child(6)::after { transition-delay: .60s; }
/* El día entero tiene 6 etapas: en pantallas medias no caben en fila. */
@media (max-width: 68rem) {
  .passage__legs { grid-auto-flow: row; gap: 0 1rem; }
  .leg::before { top: 0; bottom: 0; left: .26rem; right: auto; width: 1px; height: auto;
                 transform: scaleY(0); transform-origin: top; }
  .is-plotted .leg::before { transform: scaleY(1); }
  .leg:last-child::before { bottom: calc(100% - .55rem); right: auto; }
  .leg { padding: 0 0 1.6rem 1.6rem; }
  .leg::after { top: .1rem; }
}
.leg__time { font-size: var(--step-1); font-weight: 500; color: var(--cala); line-height: 1; }
.leg__name { margin-top: .6rem; font-size: var(--step-0); font-weight: 500; color: var(--foam); }
.leg__note { margin-top: .35rem; font-size: var(--step--1); line-height: 1.55; color: var(--haze); }
.passage__foot {
  padding: 1.1rem clamp(1.25rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line-soft);
  font-size: var(--step--1); line-height: 1.6; color: var(--haze);
}
.passage--second { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* --- Tarjeta de contenido (recuadros de "Por qué nosotros") ---------------- */
.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft); background: var(--hull-2);
  transition: border-color .3s;
}
.card:hover { border-color: var(--line); }
.card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card__body { padding: clamp(1.3rem, 2.4vw, 1.9rem); }
.card__title {
  font-family: var(--ff-brand); font-size: var(--step-ui); font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase; color: var(--cala);
}
.card__text { margin-top: .9rem; font-size: var(--step-0); line-height: 1.62; color: var(--foam); }
/* Cinco recuadros: la tarjeta con foto ocupa dos columnas y la rejilla queda llena. */
.grid--why { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
@media (min-width: 60rem) {
  .grid--why { grid-template-columns: repeat(3, 1fr); }
  .card--wide { grid-column: span 2; }
  .card--wide .card__img { aspect-ratio: 21 / 9; }
}

/* --- Ficha de producto ---------------------------------------------------- */
.prod {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft); background: var(--hull-2);
}
.prod__media { aspect-ratio: 4 / 3; overflow: hidden; }
.prod__media img { width: 100%; height: 100%; object-fit: cover; }
.prod__body { padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.prod__title { font-size: var(--step-2); margin-block: .75rem .5rem; }
.prod__text { color: var(--haze); font-size: var(--step--1); line-height: 1.68; }
.prod__specs { margin-top: 1.4rem; display: grid; gap: .6rem; }
.prod__spec {
  display: flex; gap: .7rem; align-items: baseline;
  font-family: var(--ff-brand); font-size: var(--step--1); color: var(--haze);
}
.prod__spec b { color: var(--foam); font-weight: 600; }
.prod__spec::before { content: "—"; color: var(--cala); flex: none; }
.prod__price {
  margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.prod__price + .prod__price { border-top: 0; padding-top: .8rem; margin-top: 0; }
.prod__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.prod__base {
  font-family: var(--ff-brand); font-size: var(--step-ui-s); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--haze);
}
.prod__amount { font-size: var(--step-1); font-weight: 500; color: var(--cala); white-space: nowrap; }
.prod__note { margin-top: .5rem; font-size: var(--step--1); line-height: 1.55; color: var(--haze); }
.prod .btn { margin-top: 1.4rem; align-self: flex-start; }

/* El chip de precio va encima de la foto: sin fondo no se leía sobre las velas.
   Y con .16em de tracking el espacio antes del € se confundía con el de las
   cifras, así que el símbolo parecía pegado al número.
   El velo sube de .72 a .82 porque el teal de marca es más oscuro que el
   turquesa anterior: con .82, el peor caso (foto blanca bajo el degradado más
   claro de la tarjeta) da 5,26:1 en el chip teal y 5,46:1 en el dorado. */
.chip {
  display: inline-block; white-space: nowrap;
  font-family: var(--ff-brand); font-size: var(--step-ui-s); font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase; padding: .4rem .9rem;
  border: 1px solid var(--teak); color: var(--teak); border-radius: 999px;
  background: rgba(8, 22, 31, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.chip--sea { border-color: var(--cala); color: var(--cala); }

/* --- Bloque incluido / no incluido ---------------------------------------- */
.incl { display: grid; gap: .8rem; }
.incl li { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--step-0); line-height: 1.6; }
.incl li::before {
  content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .55rem;
  background: var(--cala); transform: rotate(45deg);
}
.incl--out li::before { background: transparent; border: 1px solid var(--haze); }

/* --- Flota ---------------------------------------------------------------- */
.boat { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) {
  .boat { grid-template-columns: 1.1fr .9fr; }
  .boat--flip .boat__media { order: 2; }
}
.boat__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.boat__title { font-size: var(--step-3); margin-block: .9rem 1rem; }
.boat__model {
  display: inline-block; white-space: nowrap;
  font-size: .42em; letter-spacing: .06em;
  color: var(--haze); vertical-align: middle;
}

/* Lista dato/valor. El rótulo va en Jost (palabras) y el valor en mono
   (cifras): así se distinguen de un vistazo sin necesidad de color. */
.specs { margin-top: 1.8rem; border-top: 1px solid var(--line); }
.specs div {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1.5rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
}
.specs dt {
  font-family: var(--ff-brand); font-weight: 600; font-size: var(--step-ui);
  color: var(--haze); letter-spacing: .1em; text-transform: uppercase;
}
.specs dd { font-weight: 500; color: var(--foam); text-align: right; }

/* Datos de contacto: petición literal de la clienta, "letra grande y fácil de
   leer". Solo en contacto.html, para no inflar las fichas técnicas de la flota,
   que comparten el mismo componente. Se engancha al data-page del <body>
   porque esta tanda no podía tocar el HTML. */
body[data-page="contact"] .specs div { padding: 1.05rem 0; align-items: baseline; }
body[data-page="contact"] .specs dt { font-size: var(--step-0); letter-spacing: .08em; }
body[data-page="contact"] .specs dd {
  /* Teléfono y correo también son cifras: misma familia y mismas figuras
     tabulares que el resto de datos del sitio. */
  font-family: var(--ff-num); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--step-1); font-weight: 700;
  color: var(--foam); line-height: 1.3;
}
/* Teléfono y correo son las dos primeras filas y las dos que hay que ver desde
   el otro lado de la habitación: van un escalón por encima del resto. */
body[data-page="contact"] .specs > div:nth-child(-n+2) dd { font-size: var(--step-2); letter-spacing: .01em; }
body[data-page="contact"] .specs dd a {
  color: var(--foam); text-decoration: none;
  border-bottom: 2px solid var(--cala); padding-bottom: .08em;
  transition: color .2s, border-color .2s;
}
body[data-page="contact"] .specs dd a:hover { color: var(--cala); border-bottom-color: var(--cala-hi); }

/* --- Calas ---------------------------------------------------------------- */
/* Cuatro bloques (dos bases × dos duraciones) al lado de la foto. */
.grid--coves { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--coves { grid-template-columns: repeat(2, 1fr); } }
.coast { border-left: 1px solid var(--line); padding-left: clamp(1.2rem, 3vw, 2rem); }
.coast__name {
  font-family: var(--ff-brand); font-size: var(--step-ui); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cala);
}
.coast__from { font-size: var(--step--1); color: var(--haze); margin-top: .35rem; }
.coast__list { margin-top: 1.2rem; display: grid; gap: .5rem; }
.coast__list li { font-family: var(--ff-display); font-size: var(--step-1); color: var(--foam); }

/* --- Reseñas -------------------------------------------------------------- */
.quote { border-top: 1px solid var(--line); padding-top: 1.6rem; display: flex; flex-direction: column; }
.quote__text { font-family: var(--ff-display); font-weight: 500; font-size: var(--step-1); line-height: 1.5; color: var(--foam); }
.quote__by { margin-top: auto; padding-top: 1.4rem; font-family: var(--ff-brand); font-size: var(--step--1); color: var(--haze); }
.quote__by b { display: block; color: var(--foam); font-weight: 600; letter-spacing: .02em; }

/* --- Banda de cierre ------------------------------------------------------ */
.closer { position: relative; isolation: isolate; text-align: center; }
.closer__media { position: absolute; inset: 0; z-index: -2; }
.closer__media img { width: 100%; height: 100%; object-fit: cover; }
.closer::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8,22,31,.88), rgba(8,22,31,.72));
}
.closer__title { font-size: var(--step-3); max-width: 18ch; margin-inline: auto; }
.closer .lede { margin-inline: auto; margin-top: 1.2rem; text-align: center; }
.closer .btn-row { justify-content: center; margin-top: 2.2rem; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: var(--ff-display); font-weight: 500; font-size: var(--step-1);
  line-height: 1.35; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font-family: var(--ff-brand); color: var(--cala); transition: transform .3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__a { padding-bottom: 1.4rem; color: var(--haze); line-height: 1.7; max-width: var(--measure); }

/* --- Galería -------------------------------------------------------------- */
.gal { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.gal button { padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.gal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .7s cubic-bezier(.2,.7,.3,1), opacity .3s; }
.gal button:hover img { transform: scale(1.06); opacity: .88; }
.gal button:nth-child(1), .gal button:nth-child(6) { grid-column: span 2; }
.gal button:nth-child(1) img, .gal button:nth-child(6) img { aspect-ratio: 16 / 9; }
@media (max-width: 40rem) { .gal button:nth-child(1), .gal button:nth-child(6) { grid-column: span 1; } }

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: var(--gutter);
  background: rgba(4, 11, 16, .95); backdrop-filter: blur(6px);
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox img { max-width: min(100%, 1100px); max-height: 88vh; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 1.2rem; right: 1.4rem; background: none; border: 0;
  cursor: pointer; font-family: var(--ff-brand); font-size: 1.6rem; color: var(--foam);
}

/* --- Contacto ------------------------------------------------------------- */
.field { display: grid; gap: .55rem; margin-bottom: 1.3rem; }
.field label {
  font-family: var(--ff-brand); font-size: var(--step-ui); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--haze);
}
/* 16px mínimo en los campos: por debajo, Safari en iPhone hace zoom al enfocar. */
.field input, .field textarea, .field select {
  background: var(--hull); border: 1px solid var(--line); color: var(--foam);
  padding: .85rem 1rem; border-radius: 2px; font-size: var(--step-0);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cala); outline: none; }
.form-note { font-size: var(--step--1); line-height: 1.6; color: var(--haze); margin-top: 1rem; }

.base { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.base__name { font-family: var(--ff-display); font-weight: 500; font-size: var(--step-2); }
.base__coord { font-weight: 500; font-size: var(--step--1); color: var(--cala); margin-top: .45rem; }
.base__meta { color: var(--haze); font-size: var(--step--1); margin-top: .8rem; line-height: 1.8; }

/* --- Pie ------------------------------------------------------------------ */
.site-foot { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* El mismo lockup de la cabecera, aquí al doble de alto porque el pie tiene
   sitio: a 200 px de ancho son 100 px de alto y las letras rondan los 22 px,
   que es donde "CARIBIA SAILING" se lee cómodo. Proporción 2,008:1. */
.foot__sail { width: auto; height: 5.5rem; margin-bottom: 1.4rem; }
/* La clase antigua se queda por si algún HTML la usa todavía. */
.foot__logo { width: 100%; max-width: 200px; height: auto; margin-bottom: 1.6rem; }

.foot__h {
  font-family: var(--ff-brand); font-size: var(--step-ui); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cala); margin-bottom: 1.1rem;
}
.foot__list { display: grid; gap: .7rem; }
.foot__list a, .foot__list li { color: var(--haze); font-size: var(--step--1); }
.foot__list a { text-decoration: none; transition: color .2s; }
.foot__list a:hover { color: var(--foam); }

/* Segundo bloque de datos de contacto (el otro está en contacto.html): mismo
   encargo de la clienta, letra grande y fácil de leer. */
.foot__list--contact { gap: .9rem; }
.foot__list--contact a {
  font-family: var(--ff-num); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--step-1); font-weight: 700;
  color: var(--foam); letter-spacing: .01em;
  border-bottom: 2px solid var(--line); padding-bottom: .1em;
  transition: color .2s, border-color .2s;
}
.foot__list--contact a:hover { color: var(--cala); border-bottom-color: var(--cala); }

.foot__motto { font-family: var(--ff-display); font-size: var(--step-2); font-style: italic; font-weight: 400; color: var(--foam); }
.foot__bar {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-family: var(--ff-brand); font-size: var(--step-ui-s); font-weight: 500;
  letter-spacing: .04em; color: var(--haze);
}

/* --- Aviso de demo -------------------------------------------------------- */
.demo-bar {
  background: var(--teak); color: #1b1108;
  font-family: var(--ff-brand); font-size: var(--step-ui-s); font-weight: 500;
  letter-spacing: .06em;
  text-align: center; padding: .6rem 1rem;
}
.demo-bar b { font-weight: 700; }

/* --- Botón flotante WhatsApp ---------------------------------------------- */
.wa-float {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--cala); color: var(--hull);
  box-shadow: 0 8px 30px rgba(4, 11, 16, .5);
  transition: transform .25s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }

/* --- Revelado al hacer scroll ---------------------------------------------
   Se oculta solo si el JS ha arrancado (.js en <html>). Sin JS, o si el script
   falla, el contenido se ve igual: una demo nunca debe quedarse en blanco. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 60rem) {
  .burger { display: block; }
  /* El hero es más bajo aquí y el texto sube a la zona clara de la foto: el velo
     tiene que llegar más arriba para que el titular se lea. */
  .hero--bright::after {
    background:
      linear-gradient(to top, rgba(8,22,31,.94) 0%, rgba(8,22,31,.82) 38%, rgba(8,22,31,.45) 68%, rgba(8,22,31,.1) 100%);
  }
  .hero--page::after {
    background:
      linear-gradient(to top, rgba(8,22,31,.92) 0%, rgba(8,22,31,.78) 45%, rgba(8,22,31,.4) 75%, rgba(8,22,31,.12) 100%);
  }
  /* El antetítulo es turquesa pequeño y queda por encima de la parte fuerte del
     velo: sobre una vela blanca necesita sombra propia. */
  .hero .eyebrow { text-shadow: 0 1px 2px rgba(8,22,31,.95), 0 2px 12px rgba(8,22,31,.9); }
  .nav {
    position: fixed; inset: var(--head-h) 0 auto; flex-direction: column; gap: 0;
    background: var(--hull-2); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem; transform: translateY(-120%);
    transition: transform .35s cubic-bezier(.4,0,.2,1); visibility: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav a { padding-block: .9rem; border-bottom: 1px solid var(--line-soft); font-size: var(--step-0); }
  .passage__legs { grid-auto-flow: row; gap: 0; }
  .leg { padding: 0 0 2rem 1.8rem; }
  .leg::before { top: .55rem; left: .26rem; right: auto; bottom: -.3rem; width: 1px; height: auto;
    transform: scaleY(0); transform-origin: top; }
  .is-plotted .leg::before { transform: scaleY(1); }
  .leg:last-child::before { display: none; }
  .leg__time { font-size: var(--step-0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .leg::before { transform: none !important; }
  .leg::after { opacity: 1 !important; transform: none !important; }
}