/* ==========================================================================
   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 {
  /* Paleta clara (28/10/2026). La clienta: «se ve más azul marino que turquesa;
     la queremos más turquesa y clara, como su página». Sale de caribia.es leída
     el 28/10: fondos blancos, turquesa #01ABAC y teal oscuro #036D6E.
     Los nombres de token se quedan (--hull, --foam...) para no tocar cada regla:
     --hull ya no es el casco oscuro, es el fondo blanco. */
  --hull:      #ffffff;
  --hull-2:    #e3f5f5;   /* paneles y tarjetas, turquesa muy claro */
  --hull-3:    #c9eeee;
  --foam:      #0f2b2c;   /* texto principal: 14,98:1 sobre blanco */
  --haze:      #3f5f60;   /* texto secundario: 6,96:1 blanco, 6,18:1 panel */

  /* Dos turquesas: el de RELLENO es el de la marca y el de caribia.es (botones,
     viñetas, estrellas); sobre blanco da 2,83:1 y NO vale para texto. El de
     TEXTO es un turquesa oscurecido: 5,23:1 sobre blanco y 4,64:1 sobre panel. */
  --cala-fill: #01abac;
  --on-cala:   #062a2b;   /* texto encima del relleno: 5,4:1 */
  --cala:      #02797a;
  --cala-lite: #9be6e6;   /* solo sobre velo de foto */
  --cala-hi:   #00c6c7;
  --teak:      #c79357;
  --teal-deep: #036d6e;   /* el teal oscuro de caribia.es: pie */

  --line:      rgba(2, 121, 122, .24);
  --line-soft: rgba(2, 121, 122, .13);

  --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-fill); color: var(--on-cala); 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-fill); color: var(--on-cala); 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(255, 255, 255, .92);
  -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(2,74,75,.9) 0%, rgba(2,74,75,.55) 28%, rgba(2,74,75,.12) 58%, rgba(2,74,75,0) 82%),
    linear-gradient(to right, rgba(2,74,75,.62) 0%, rgba(2,74,75,.18) 45%, rgba(2,74,75,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(2,74,75,.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(2,74,75,.95), 0 2px 10px rgba(2,74,75,.9), 0 0 34px rgba(2,74,75,.7);
}
.hero__lede {
  max-width: 46ch; color: rgba(237,243,243,.94); font-size: var(--step-1);
  text-shadow: 0 1px 16px rgba(2,74,75,.6);
}
.hero .eyebrow { color: var(--cala-lite); text-shadow: 0 1px 12px rgba(2,74,75,.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(2,74,75,.92) 0%, rgba(2,74,75,.5) 32%, rgba(2,74,75,.06) 62%, rgba(2,74,75,0) 85%),
    linear-gradient(to right, rgba(2,74,75,.62) 0%, rgba(2,74,75,.22) 34%, rgba(2,74,75,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-fill) calc(var(--v) / 5 * 100%), rgba(143,168,180,.45) 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(2,74,75,.96) 12%, rgba(2,74,75,.55) 55%, rgba(2,74,75,.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-fill); }
.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(2,74,75,.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-fill); 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(2,74,75,.88), rgba(2,74,75,.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(2,40,41,.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-fill); color: var(--on-cala);
  box-shadow: 0 8px 30px rgba(2,74,75,.28);
  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(2,74,75,.94) 0%, rgba(2,74,75,.82) 38%, rgba(2,74,75,.45) 68%, rgba(2,74,75,.1) 100%);
  }
  .hero--page::after {
    background:
      linear-gradient(to top, rgba(2,74,75,.92) 0%, rgba(2,74,75,.78) 45%, rgba(2,74,75,.4) 75%, rgba(2,74,75,.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(2,74,75,.95), 0 2px 12px rgba(2,74,75,.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; }
}

/* Reservas online (Turitop, 25/10/2026). El botón lo construye el cargador de
   Turitop dentro de .tt-book con nuestras clases btn btn--primary btn--tt. */
.tt-book { margin-top: .9rem; min-height: 2.9rem; }
.prod .tt-book .btn { margin-top: 0; }
.btn--tt { padding: .75rem 1.4rem; }
.prod .btn--ghost[data-wa] { margin-top: 1.2rem; }

/* --- Paleta clara: superficies oscuras (28/10/2026) ------------------------
   Sobre foto con velo (portada, banda de cierre, tarjetas con foto, chips) y en
   el pie el texto vuelve a ser claro. Se redefinen los tokens en el ámbito
   para que las reglas de arriba sigan valiendo sin tocarlas. */
.hero, .closer, .line-card, .chip, .lightbox {
  --foam: #ffffff;
  --haze: rgba(255, 255, 255, .88);
  --cala: #9be6e6;
  --line: rgba(255, 255, 255, .3);
  --line-soft: rgba(255, 255, 255, .16);
  color: var(--foam);
}
.chip { color: var(--teak); }
.chip--sea { color: var(--cala); }
/* Pie en el teal oscuro de caribia.es. Blanco encima: 6,15:1. */
.site-foot {
  background: var(--teal-deep); border-top: 0;
  --foam: #ffffff;
  --haze: rgba(255, 255, 255, .86);
  --cala: #bff0f0;
  --line: rgba(255, 255, 255, .3);
  --line-soft: rgba(255, 255, 255, .18);
  color: var(--foam);
}
.site-foot :focus-visible { outline-color: #ffffff; }
/* La cabecera es blanca: la sombra separa la franja de la portada. */
.site-head { box-shadow: 0 1px 14px rgba(2, 74, 75, .08); }
/* Banner de cookies: lo pinta medicion.js (v4, no se toca) en azul noche.
   Se recolorea aquí con más especificidad que su <style>. */
html body .cookie-bar { background: var(--teal-deep); color: #ffffff; }
html body .cookie-bar a { color: #bff0f0; }
html body .cookie-bar button { border-color: #ffffff; }
html body .cookie-bar .si { background: #ffffff; color: var(--teal-deep); }
html body .cookie-bar .si:hover { background: #bff0f0; }
html body .cookie-bar .no { color: #ffffff; }

/* --- Arreglos del 04/11/2026 (auditoría de la versión turquesa en vivo) -----
   1. El dorado de marca (#C79357) se diseñó para fondo oscuro: sobre blanco
      da 2,71:1 y sobre el panel turquesa claro 2,41:1 («Solo desde Port
      d'Alcúdia», «Solo desde Portocolom», catering). Sobre superficies claras
      se usa un dorado oscurecido: 5,9:1 blanco, 5,24:1 panel.
   2. Los chips de las tarjetas de producto (privadas y compartidas) no van
      sobre foto: se estiraban a todo el ancho y salían como una barra de
      teal oscuro. Ahora miden lo que su texto, sin velo, con borde y texto
      turquesa de texto (5,23:1 blanco, 4,64:1 panel).
   Lo que va sobre foto (.hero, .closer, .line-card, .lightbox) no cambia. */
:root { --teak-ink: #8a5a1c; }
span.teak { color: var(--teak-ink); }
.hero .teak, .closer .teak, .line-card .teak, .site-foot .teak { color: var(--teak); }
.prod__body > .chip {
  align-self: flex-start; justify-self: start; width: auto;
  background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: var(--teak-ink); color: var(--teak-ink);
}
.prod__body > .chip.chip--sea { border-color: #02797a; color: #02797a; }

/* --- Cambios pedidos por la clienta (WhatsApp, 01/11/2026, con capturas) -----
   a) «Aca no colocaste lo que te enviamos»: su documento del 18/08 pide «tus
      vacaciones en la misma fuente de El mejor día de». Sin cursiva ni color
      aparte; el halo se queda para que se lea sobre la vela.
   b) «Esta letra salta mucho a los ojos. No es una letra suave o relajada»:
      las reseñas dejan la Bodoni (alto contraste) y pasan a Jost, la letra de
      marca, en peso normal y con más interlineado.
   c) «Aca quedó el borde diferente color»: el chip «A medida» (y el de «La
      opción más vendida») llevaban borde dorado y el resto turquesa. Todos
      turquesa. */
.hero__title em { font-style: normal; font-weight: inherit; color: inherit; }
.quote__text {
  font-family: var(--ff-brand); font-weight: 400; font-size: var(--step-0);
  line-height: 1.75; letter-spacing: .005em;
}
.chip { border-color: var(--cala); color: var(--cala); }
.prod__body > .chip { border-color: #02797a; color: #02797a; }