/* ==========================================================================
   Claveles Maritime Limited
   Identidad tomada de los flyers del cliente: azul marino + oro, títulos
   serif. Tres idiomas (en / es / zh-Hans) sobre el mismo documento.

   Contraste (medido sobre los tokens de abajo):
     oro   #C49444 sobre navy #041C44 .... 6.1:1  → texto normal OK
     blanco #FFFFFF sobre navy ........... 16.4:1 → OK
     navy sobre blanco ................... 16.4:1 → OK
     navy sobre oro claro #F4D494 ........ 11.8:1 → OK
     oro #C49444 sobre blanco ............  2.7:1 → NUNCA como texto
     oro oscuro #AC843C sobre blanco .....  3.4:1 → solo texto grande
   ========================================================================== */

/* ---------- fuentes auto-alojadas (sin CDN) ----------
   Los nombres llevan el hash del contenido: los sirve Netlify con cache de un
   año, así que un archivo nuevo tiene que tener nombre nuevo. Los escribe
   tools/build-fonts.py; no editarlos a mano. */
@font-face{
  font-family:'Playfair Display';
  src:url('../fonts/playfair-display-latin-700-normal.28453852.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Playfair Display';
  src:url('../fonts/playfair-display-latin-600-normal.5d228694.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Source Sans 3';
  src:url('../fonts/source-sans-3-latin-400-normal.0f73f35e.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Source Sans 3';
  src:url('../fonts/source-sans-3-latin-600-normal.14527d19.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
/* chino: subconjunto con solo los caracteres que usa la página */
@font-face{
  font-family:'Noto Serif SC';
  src:url('../fonts/noto-serif-sc-subset-600.7ef3d38d.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Noto Sans SC';
  src:url('../fonts/noto-sans-sc-subset-400.603b4288.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Noto Sans SC';
  src:url('../fonts/noto-sans-sc-subset-600.700f61cb.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --navy:#041C44;
  --navy-deep:#03152F;
  --navy-soft:#0A2A5E;
  --gold:#C49444;
  --gold-deep:#AC843C;      /* solo texto grande sobre fondo claro */
  --gold-light:#F4D494;
  --white:#FFFFFF;
  --cream:#FCFCFC;
  --danger:#A3261B;         /* solo errores del formulario: 7.4:1 sobre blanco */

  --ink:var(--navy);                         /* texto sobre fondo claro */
  --ink-soft:#415066;                        /* 7.4:1 sobre blanco */
  --on-navy:#FFFFFF;
  --on-navy-soft:rgba(255,255,255,.76);      /* 11.7:1 sobre navy */

  --hairline:rgba(196,148,68,.32);
  --hairline-light:rgba(4,28,68,.14);
  --field-border:rgba(4,28,68,.36);          /* 3.4:1 sobre blanco */

  --font-display:'Playfair Display','Noto Serif SC',Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3','Noto Sans SC',system-ui,-apple-system,'Segoe UI',sans-serif;

  --shell:1180px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --topbar-h:68px;
  --radius:2px;                              /* una sola escala: casi recto */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:160ms;
  --t-base:220ms;
  --t-slow:280ms;
  --section-y:clamp(4rem,10vw,7rem);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topbar-h) + 16px);
  -webkit-text-size-adjust:100%;
  background:var(--navy);
}
html.is-locked{overflow:hidden;}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;line-height:1.15;text-wrap:balance;}
p{margin:0;}
ul{list-style:none;margin:0;padding:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
svg{display:block;}
button,input,select{font:inherit;}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--radius);
}
/* sobre fondo claro el oro no llega a 3:1: el foco va en oro oscuro */
.quote :focus-visible{outline-color:var(--gold-deep);}

::selection{background:var(--gold);color:var(--navy);}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--gold);
  color:var(--navy);
  font-weight:600;
  padding:.75rem 1.25rem;
}
.skip-link:focus{left:0;}

/* ---------- wordmark: marca (ancla clavel) + nombre ---------- */
.wordmark{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;}
.wordmark__mark{
  width:var(--mark);
  height:var(--mark);
  flex:none;
}
.wordmark__name{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--on-navy);
  font-size:1.18rem;
  line-height:1;
}
.wordmark__rule{
  display:block;
  width:1px;
  height:1.35em;
  background:var(--gold);
}
.wordmark__sub{
  font-family:'Source Sans 3',system-ui,sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--gold);
  font-size:.72rem;
  line-height:1;
}
.wordmark--inline{--mark:32px;}
.wordmark--sm{--mark:27px;}
.wordmark--sm .wordmark__name{font-size:1rem;}
.wordmark--sm .wordmark__sub{font-size:.64rem;}

/* ---------- barra superior: fija y encima del hero ----------
   No ocupa lugar en el flujo, así que no empuja el centro del hero. Sobre el
   hero es transparente y sin wordmark (el nombre ya está en grande); al bajar
   se vuelve sólida. */
.topbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  display:flex;
  align-items:center;
  background:var(--navy);
  border-bottom:1px solid var(--hairline);
  transition:background-color var(--t-slow) var(--ease),border-color var(--t-slow) var(--ease);
}
.has-js .topbar:not(.is-solid){background:transparent;border-bottom-color:transparent;}
.topbar .wordmark{transition:opacity var(--t-slow) var(--ease),visibility var(--t-slow);}
.has-js .topbar:not(.is-solid) .wordmark{opacity:0;visibility:hidden;}
.topbar__inner{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.lang{display:flex;align-items:center;gap:2px;margin-left:auto;}
.lang__btn{
  appearance:none;
  background:none;
  border:1px solid transparent;
  border-radius:var(--radius);
  color:var(--on-navy-soft);
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.06em;
  min-height:44px;
  min-width:44px;
  padding:0 .6rem;
  cursor:pointer;
  transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.lang__btn:hover{color:var(--gold-light);}
.lang__btn.is-active{
  color:var(--navy);
  background:var(--gold);
  border-color:var(--gold);
}

/* ==========================================================================
   HERO
   El nombre ocupa la fila central de una grilla 1fr / auto / 1fr de alto
   100svh: las filas de los extremos miden siempre lo mismo, así que el centro
   de la caja del nombre cae en el centro de la pantalla, haya lo que haya
   arriba y abajo.
   ========================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--on-navy);
  background:
    radial-gradient(90% 70% at 50% 50%,rgba(10,42,94,.95) 0%,rgba(4,28,68,0) 70%),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
}
/* paralelos muy tenues, que se apagan hacia los bordes */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:repeating-linear-gradient(180deg,rgba(196,148,68,.07) 0 1px,transparent 1px 72px);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 50%,#000 0%,transparent 100%);
          mask-image:radial-gradient(60% 55% at 50% 50%,#000 0%,transparent 100%);
}
.hero__stage{
  height:100vh;
  height:100svh;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
  justify-items:center;
  text-align:center;
  padding-inline:var(--gutter);
}
.hero__above{
  align-self:end;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(.9rem,2.2svh,1.4rem);
  padding-bottom:clamp(1.5rem,5svh,3rem);
}
.hero__mark{
  width:min(clamp(4rem,11vw,7rem),13svh);
  height:auto;
  aspect-ratio:1;
}
.hero__kicker{
  font-size:clamp(.74rem,1.6vw,.86rem);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  max-width:34ch;
  text-wrap:balance;
}

.hero__name{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(.75rem,2svh,1.2rem);
  margin:0;
  font-weight:inherit;
}
/* el tracking deja aire después de la última letra: el padding izquierdo del
   mismo tamaño lo compensa, para que el texto quede centrado de verdad */
.hero__name-main{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(2.75rem,min(13vw,12svh),7.5rem);
  line-height:.95;
  letter-spacing:.12em;
  padding-left:.12em;
  color:var(--on-navy);
}
.hero__name-rule{
  display:block;
  width:clamp(5rem,18vw,9.5rem);
  height:2px;
  background:linear-gradient(90deg,rgba(196,148,68,0),var(--gold) 22%,var(--gold) 78%,rgba(196,148,68,0));
}
.hero__name-sub{
  font-family:'Source Sans 3',system-ui,sans-serif;
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(.8rem,2.9vw,1.25rem);
  line-height:1.2;
  letter-spacing:.46em;
  padding-left:.46em;
  color:var(--gold);
}

.hero__below{
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.25rem,3.5svh,2rem);
  padding-top:clamp(1.5rem,5svh,3rem);
}
.hero__values{
  font-size:clamp(.74rem,1.6vw,.86rem);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--on-navy-soft);
  text-wrap:balance;
}

/* indicador de scroll: una gota de luz que baja por una línea */
.hero__cue{
  position:absolute;
  left:50%;
  bottom:clamp(1rem,3svh,1.75rem);
  width:1px;
  height:clamp(2rem,6svh,3rem);
  background:linear-gradient(180deg,rgba(196,148,68,0),rgba(196,148,68,.55));
  overflow:hidden;
}
.hero__cue::after{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  width:3px;
  height:14px;
  border-radius:2px;
  background:var(--gold-light);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{transform:translateY(-16px);opacity:0;}
  30%{opacity:1;}
  100%{transform:translateY(3rem);opacity:0;}
}

/* entrada: solo opacidad y recortes; nada mueve la caja del nombre */
.hero__mark{animation:fade-up .9s var(--ease) .1s both;}
.hero__kicker{animation:fade-up .9s var(--ease) .25s both;}
.hero__name-main{animation:reveal-up 1s var(--ease) .35s both;}
.hero__name-rule{animation:grow 1s var(--ease) .7s both;}
.hero__name-sub{animation:fade 1s var(--ease) .85s both;}
.hero__below{animation:fade-up .9s var(--ease) 1s both;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes fade-up{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes reveal-up{from{opacity:0;clip-path:inset(0 0 100% 0);}to{opacity:1;clip-path:inset(0 0 0 0);}}
@keyframes grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* pantallas bajas (celular acostado): fuera la marca, menos aire */
@media (max-height:520px){
  .hero__mark{display:none;}
  .hero__above{padding-bottom:1rem;}
  .hero__below{padding-top:1rem;gap:.9rem;}
  .hero__below .btn{min-height:46px;padding-block:.6rem;}
  .hero__cue{display:none;}
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:52px;
  padding:.85rem 1.6rem;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),transform var(--t-fast) var(--ease);
}
.btn--gold{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.btn--gold:hover{background:var(--gold-light);border-color:var(--gold-light);}
.btn--navy{background:var(--navy);color:var(--white);border-color:var(--navy);}
.btn--navy:hover{background:var(--navy-soft);border-color:var(--navy-soft);}
.btn:active{transform:translateY(1px);}
.btn__icon{width:21px;height:21px;fill:currentColor;flex:none;}

/* ---------- títulos de sección ---------- */
.section__title{
  font-size:clamp(1.75rem,4vw,2.6rem);
  max-width:22ch;
}
.section__title::before{
  content:"";
  display:block;
  width:2.5rem;
  height:2px;
  margin-bottom:1.1rem;
  background:var(--gold);
}
.section__title--light{color:var(--on-navy);}
.section__lead{
  margin-top:1rem;
  max-width:52ch;
  font-size:clamp(1rem,1.5vw,1.12rem);
  color:var(--ink-soft);
}
.section__lead--light{color:var(--on-navy-soft);}

/* ==========================================================================
   RUTAS: globo + tarjetas de tarifa
   ========================================================================== */
.routes{
  background:var(--navy-deep);
  color:var(--on-navy);
  padding-block:var(--section-y);
  border-top:1px solid var(--hairline);
}
.routes__grid{
  margin-top:clamp(2rem,5vw,3.5rem);
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
}

.globe{margin:0;position:relative;}
html:not(.has-js) .globe{display:none;}   /* sin JS no hay globo: las tarifas van en el aviso <noscript> */
.globe__stage{
  position:relative;
  width:100%;
  max-width:620px;
  aspect-ratio:1 / 1;
  margin-inline:auto;
}
.globe__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  /* lente redonda: de cerca el globo se sigue leyendo como globo y no como
     un mapa cuadrado; de lejos el borde cae fuera del halo */
  -webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);
  touch-action:pan-y;
  cursor:grab;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
          user-select:none;
}
.globe__canvas.is-dragging{cursor:grabbing;}
.globe.is-static .globe__canvas{cursor:default;touch-action:auto;}
.globe.is-static .globe__hint{display:none;}
.globe__labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.globe__label{
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.2;
  color:var(--white);
  text-shadow:0 1px 2px rgba(3,21,47,.95),0 0 10px rgba(3,21,47,.9);
  opacity:0;
  transition:opacity var(--t-slow) var(--ease);
}
.globe__label.is-on{opacity:1;}
.globe__label--origin{color:var(--gold-light);}
.globe__label.is-dim{opacity:.45;}
.globe__hint{
  margin-top:.9rem;
  text-align:center;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-navy-soft);
}
.globe__pause{
  position:absolute;
  right:0;
  bottom:0;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--hairline);
  border-radius:50%;
  background:rgba(3,21,47,.72);
  color:var(--gold-light);
  cursor:pointer;
  transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.globe__pause:hover{border-color:var(--gold);color:var(--white);}
.globe__pause-icon{width:18px;height:18px;fill:currentColor;}
.globe__pause-icon--play,
.globe__pause[aria-pressed="true"] .globe__pause-icon--pause{display:none;}
.globe__pause[aria-pressed="true"] .globe__pause-icon--play{display:block;}

.routes__list{display:flex;flex-direction:column;gap:1rem;}
.routes__unit{font-size:.95rem;color:var(--on-navy-soft);}
.routes__noscript{color:var(--on-navy-soft);}
.route-cards{display:grid;gap:1rem;}
.route-card{
  padding:clamp(1.25rem,3vw,1.75rem);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(10,42,94,.6),rgba(4,28,68,.6));
  transition:border-color var(--t-base) var(--ease);
}
.route-card.is-active{border-color:rgba(196,148,68,.8);}
.route-card__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.35rem 1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--hairline);
}
.route-card__dest{
  font-size:clamp(1.3rem,2.6vw,1.6rem);
  color:var(--on-navy);
}
.route-card__from{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.route-card__rates li + li{border-top:1px solid rgba(255,255,255,.09);}
.route-card__rate{
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:58px;
  padding:.55rem .65rem;
  margin-inline:-.65rem;
  border-radius:var(--radius);
  transition:background-color var(--t-base) var(--ease);
}
.route-card__rate:hover{background:rgba(196,148,68,.1);}
.route-card__size{flex:1;font-size:1rem;color:var(--on-navy-soft);}
.route-card__price{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,1.85rem);
  line-height:1.1;
  color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;
}
.route-card__go{
  width:18px;
  height:18px;
  fill:var(--gold);
  flex:none;
  transition:transform var(--t-base) var(--ease);
}
.route-card__rate:hover .route-card__go{transform:translateX(3px);}

/* ---------- banda dorada ---------- */
.band{background:var(--gold-light);color:var(--navy);padding-block:clamp(1.75rem,4vw,2.5rem);}
.band__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem,3vw,2rem);
  text-align:center;
}
.band__rule{flex:0 1 7rem;min-width:1.5rem;height:1px;background:rgba(4,28,68,.4);}
.band__origin{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.15rem,2.8vw,1.6rem);
  line-height:1.3;
  text-wrap:balance;
}

/* ==========================================================================
   FLOTA: collage bento por barco
   Escritorio: la foto principal ocupa 7 de 12 columnas y dos filas; las
   otras cuatro la rodean en 2×2. Las áreas cambian según cuántas fotos tenga
   el barco, para que nunca quede una celda vacía.
   ========================================================================== */
.fleet{background:var(--navy);color:var(--on-navy);padding-block:var(--section-y);}
.fleet__tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1.5rem,4vw,2rem);}
.fleet__tabs[hidden]{display:none;}
.fleet__tab{
  min-height:44px;
  padding:0 1.15rem;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:transparent;
  color:var(--on-navy-soft);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.fleet__tab:hover{color:var(--gold-light);border-color:rgba(196,148,68,.65);}
.fleet__tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.fleet__panels{margin-top:clamp(1.75rem,4vw,2.5rem);}
.fleet__panel[hidden]{display:none;}

.bento{
  display:grid;
  gap:clamp(.6rem,1.2vw,.9rem);
  grid-template-columns:7fr 2.5fr 2.5fr;
  grid-template-rows:repeat(2,clamp(275px,21vw,320px));
}
.bento--n1{grid-template-areas:"a a a" "a a a";}
.bento--n2{grid-template-areas:"a b b" "a b b";}
.bento--n3{grid-template-areas:"a b b" "a c c";}
.bento--n4{grid-template-areas:"a b c" "a d d";}
.bento--n5{grid-template-areas:"a b c" "a d e";}
.bento__cell{position:relative;min-width:0;min-height:0;}
.bento__cell:nth-child(1){grid-area:a;}
.bento__cell:nth-child(2){grid-area:b;}
.bento__cell:nth-child(3){grid-area:c;}
.bento__cell:nth-child(4){grid-area:d;}
.bento__cell:nth-child(5){grid-area:e;}

.bento__tile{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  padding:5px;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  background:var(--navy-deep);
  cursor:zoom-in;
}
.bento__img{display:block;width:100%;height:100%;overflow:hidden;}
.bento__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--t-slow) var(--ease);
}
.bento__tile:hover .bento__img img{transform:scale(1.04);}
.bento__tile:focus-visible{outline-offset:4px;}

/* nombre del barco sobre la foto principal */
.bento__name{
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  padding:4.5rem clamp(1rem,2.5vw,1.75rem) clamp(1rem,2.2vw,1.5rem);
  background:linear-gradient(0deg,rgba(4,28,68,.94) 0%,rgba(4,28,68,.7) 45%,rgba(4,28,68,0) 100%);
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  font-size:clamp(1.25rem,2.6vw,2rem);
  letter-spacing:.14em;
  line-height:1.15;
  color:var(--gold);
  pointer-events:none;
}
.bento__more{
  position:absolute;
  inset:6px;
  display:grid;
  place-items:center;
  background:rgba(4,28,68,.72);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.06em;
  color:var(--white);
  pointer-events:none;
}

/* tablet: la grande arriba, el resto en una fila */
@media (max-width:999px){
  .bento{grid-template-rows:none;grid-template-areas:none;}
  .bento--n2{grid-template-columns:minmax(0,1fr);}
  .bento--n3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bento--n4{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bento--n5{grid-template-columns:repeat(4,minmax(0,1fr));}
  .bento__cell:nth-child(n){grid-area:auto;aspect-ratio:4 / 5;}
  .bento__cell:first-child{grid-column:1 / -1;aspect-ratio:16 / 10;}
  .bento--n1 .bento__cell:first-child{aspect-ratio:16 / 10;}
  .bento--n2 .bento__cell:nth-child(2){aspect-ratio:16 / 10;}
}
/* celular: la grande arriba y un 2×2 debajo; si sobra una, va a lo ancho */
@media (max-width:599px){
  .bento,
  .bento--n4,
  .bento--n5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bento--n1,
  .bento--n2{grid-template-columns:minmax(0,1fr);}
  .bento__cell:first-child{aspect-ratio:4 / 3;}
  .bento__cell:last-child:nth-child(even){grid-column:1 / -1;aspect-ratio:16 / 10;}
}

/* ---------- visor de fotos ---------- */
.lightbox{
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--white);
  overflow:hidden;
}
.lightbox::backdrop{background:rgba(3,21,47,.95);}
.lightbox[open]{display:block;}
.lightbox__frame{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"prev fig next";
  align-items:center;
  gap:clamp(.5rem,2vw,1.5rem);
  padding:4.25rem clamp(.75rem,3vw,2rem) clamp(1rem,3vh,2rem);
}
.lightbox__figure{
  grid-area:fig;
  margin:0;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  touch-action:pan-y pinch-zoom;
}
.lightbox__img{
  max-width:100%;
  max-height:calc(100vh - 10rem);
  max-height:calc(100dvh - 10rem);
  min-height:0;
  width:auto;
  height:auto;
  object-fit:contain;
  padding:5px;
  border:1px solid var(--gold);
  background:var(--navy-deep);
  -webkit-user-select:none;
          user-select:none;
}
.lightbox__caption{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem 1rem;
  max-width:62ch;
  text-align:center;
  font-size:.95rem;
  color:var(--on-navy-soft);
}
.lightbox__counter{color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.06em;white-space:nowrap;}
.lightbox__btn{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--hairline);
  border-radius:50%;
  background:rgba(4,28,68,.7);
  color:var(--white);
  cursor:pointer;
  transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.lightbox__btn svg{width:22px;height:22px;fill:currentColor;}
.lightbox__btn:hover{border-color:var(--gold);color:var(--gold-light);}
.lightbox__btn[hidden]{display:none;}
.lightbox__nav--prev{grid-area:prev;}
.lightbox__nav--next{grid-area:next;}
.lightbox__close{position:absolute;top:.75rem;right:clamp(.75rem,3vw,2rem);z-index:1;}
@media (max-width:640px){
  .lightbox__frame{
    grid-template-columns:1fr 1fr;
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"fig fig" "prev next";
    padding-inline:.75rem;
  }
  .lightbox__nav--prev{justify-self:start;}
  .lightbox__nav--next{justify-self:end;}
}

/* ==========================================================================
   COTIZACIÓN
   En escritorio el formulario va a la izquierda y la tarifa publicada a la
   derecha, fija mientras se llena. En celular la tarifa aparece justo debajo
   de tamaño y destino, que es donde se elige.
   ========================================================================== */
.quote{background:var(--cream);padding-block:var(--section-y);}
.quote__head{max-width:46rem;}

.qform{
  margin-top:clamp(2rem,5vw,3rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  column-gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.qform > *{grid-column:1;}
.qform > .rate-panel{
  grid-column:2;
  grid-row:1 / span 9;
  position:sticky;
  top:calc(var(--topbar-h) + 1.5rem);
}

.qform__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.25rem;}

.field{min-width:0;margin:0 0 1.4rem;padding:0;border:0;}
.field__label{
  display:block;
  margin-bottom:.45rem;
  padding:0;
  font-size:.96rem;
  font-weight:600;
  color:var(--ink);
}
.field__opt{margin-left:.3em;font-weight:400;color:var(--ink-soft);}
html[lang="zh-Hans"] .field__opt{margin-left:0;}   /* el paréntesis ancho ya trae aire */
.field__input{
  width:100%;
  min-height:52px;
  padding:.7rem .95rem;
  border:1px solid var(--field-border);
  border-radius:var(--radius);
  background:var(--white);
  color:var(--ink);
  font-size:1rem;
  line-height:1.3;
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.field__input::placeholder{color:#677489;opacity:1;}   /* 4.7:1 sobre blanco */
.field__input:hover{border-color:rgba(4,28,68,.6);}
.field__input:focus{border-color:var(--navy);}
.field.is-invalid .field__input{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger);}
.field__error{
  display:flex;
  align-items:flex-start;
  gap:.45rem;
  margin-top:.5rem;
  font-size:.92rem;
  font-weight:600;
  line-height:1.4;
  color:var(--danger);
}
.field__error[hidden]{display:none;}
.field__error::before{
  content:"";
  flex:none;
  width:16px;
  height:16px;
  margin-top:.12em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* opciones de tamaño y destino: radios nativos, vestidos */
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));gap:.6rem;}
.choice__opt{position:relative;display:block;}
.choice__input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.choice__box{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:52px;
  padding:.7rem 1rem;
  border:1px solid var(--field-border);
  border-radius:var(--radius);
  background:var(--white);
  color:var(--ink);
  font-weight:600;
  line-height:1.25;
  transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.choice__box::before{
  content:"";
  flex:none;
  width:18px;
  height:18px;
  border:1.5px solid rgba(4,28,68,.6);
  border-radius:50%;
  background:var(--white);
  transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.choice__opt:hover .choice__box{border-color:rgba(4,28,68,.65);}
.choice__input:checked + .choice__box{background:var(--navy);border-color:var(--navy);color:var(--white);}
.choice__input:checked + .choice__box::before{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px var(--navy);}
.choice__input:focus-visible + .choice__box{outline:2px solid var(--gold-deep);outline-offset:2px;}
.field.is-invalid .choice__box{border-color:var(--danger);}

/* cantidad */
.stepper{display:flex;max-width:13rem;}
.stepper__btn{
  flex:none;
  width:52px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--field-border);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  transition:background-color var(--t-base) var(--ease);
}
.stepper__btn:first-child{border-right:0;border-radius:var(--radius) 0 0 var(--radius);}
.stepper__btn:last-child{border-left:0;border-radius:0 var(--radius) var(--radius) 0;}
.stepper__btn:hover{background:rgba(4,28,68,.06);}
.stepper__btn svg{width:18px;height:18px;fill:currentColor;}
.stepper__input{
  min-width:0;
  text-align:center;
  border-radius:0;
  -moz-appearance:textfield;
  appearance:textfield;
}
.stepper__input::-webkit-inner-spin-button,
.stepper__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

/* mes */
.select{position:relative;}
.select .field__input{appearance:none;-webkit-appearance:none;padding-right:2.75rem;cursor:pointer;}
.select::after{
  content:"";
  position:absolute;
  right:1.1rem;
  top:50%;
  width:9px;
  height:9px;
  border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}

.qform__submit{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;margin-top:.4rem;}
.qform__hint{max-width:46ch;font-size:.9rem;color:var(--ink-soft);}

.qform__summary{
  margin-bottom:1.75rem;
  padding:1rem 1.2rem;
  border:1px solid var(--danger);
  border-left-width:4px;
  border-radius:var(--radius);
  background:#FFF7F5;
}
.qform__summary[hidden]{display:none;}
.qform__summary:focus{outline:2px solid var(--gold-deep);outline-offset:3px;}
.qform__summary-title{font-weight:600;color:var(--danger);}
.qform__summary-list{margin-top:.2rem;display:grid;}
.qform__summary-list a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* tarifa publicada */
.rate-panel{
  padding:clamp(1.4rem,3vw,1.9rem);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  background:var(--navy);
  color:var(--on-navy);
}
.rate-panel__label{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}
.rate-panel__body{
  min-height:8.5rem;
  margin-block:1rem 1.15rem;
  padding-block:1.15rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-block:1px solid var(--hairline);
}
.rate-panel__empty{color:var(--on-navy-soft);}
.rate-panel__route{font-size:.98rem;line-height:1.4;color:var(--on-navy-soft);}
.rate-panel__price{
  margin-top:.35rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.3rem,4.6vw,2.9rem);
  line-height:1.1;
  color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;
}
.rate-panel__unit{font-size:.88rem;color:var(--on-navy-soft);}
.rate-panel__note{
  position:relative;
  padding-left:1rem;
  font-size:.9rem;
  line-height:1.45;
  color:var(--on-navy-soft);
}
.rate-panel__note + .rate-panel__note{margin-top:.4rem;}
.rate-panel__note::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:5px;
  height:5px;
  background:var(--gold);
  transform:rotate(45deg);
}
.rate-panel__body.is-updated .rate-panel__price{animation:fade-up var(--t-slow) var(--ease) both;}

/* contacto: franja debajo del formulario */
.contact-card{
  margin-top:clamp(3rem,7vw,4.5rem);
  padding-top:clamp(2rem,4vw,2.5rem);
  border-top:1px solid var(--hairline-light);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1.25rem clamp(1.5rem,4vw,3rem);
}
.contact-card__title{grid-column:1 / -1;font-size:clamp(1.3rem,2.6vw,1.6rem);}
.contact-card__list{margin:0;display:flex;flex-wrap:wrap;gap:1rem clamp(1.5rem,4vw,3rem);}
.contact-card__item dt{
  margin-bottom:.2rem;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.contact-card__item dd{margin:0;}
.contact-card__link{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:44px;
  font-size:1.06rem;
  color:var(--ink);
  transition:color var(--t-base) var(--ease);
}
a.contact-card__link:hover{color:var(--navy-soft);text-decoration:underline;text-underline-offset:3px;}
.contact-card__icon{width:20px;height:20px;fill:var(--gold-deep);flex:none;}
.contact-card__note{max-width:36ch;color:var(--ink-soft);}
.contact-card__wa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:52px;
  padding:.8rem 1.4rem;
  border:1px solid var(--navy);
  border-radius:var(--radius);
  color:var(--navy);
  font-weight:600;
  line-height:1.2;
  text-align:center;
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.contact-card__wa:hover{background:var(--navy);color:var(--white);}

/* ---------- footer ---------- */
.footer{background:var(--navy);color:var(--on-navy-soft);padding-block:2rem calc(2rem + env(safe-area-inset-bottom));border-top:1px solid var(--hairline);}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;}
.footer__legal{font-size:.84rem;}

/* ---------- revelado en scroll (solo si main.js cargó) ---------- */
.reveal-on .reveal{opacity:0;transform:translateY(14px);}
.reveal-on .reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}

/* ==========================================================================
   Chino simplificado: la tipografía latina no aplica, los tracking amplios
   rompen el ritmo de los ideogramas y el interlineado necesita más aire.
   ========================================================================== */
html[lang="zh-Hans"] body{line-height:1.75;}
html[lang="zh-Hans"] h1,
html[lang="zh-Hans"] h2,
html[lang="zh-Hans"] h3{font-family:'Noto Serif SC',var(--font-display);letter-spacing:0;}
html[lang="zh-Hans"] .hero__kicker,
html[lang="zh-Hans"] .hero__values,
html[lang="zh-Hans"] .route-card__from,
html[lang="zh-Hans"] .globe__hint,
html[lang="zh-Hans"] .rate-panel__label,
html[lang="zh-Hans"] .contact-card__item dt{letter-spacing:.08em;}
html[lang="zh-Hans"] .section__title{line-height:1.4;}
html[lang="zh-Hans"] .band__origin{line-height:1.5;}
/* el nombre de la empresa y el del buque se mantienen en alfabeto latino */
html[lang="zh-Hans"] .wordmark__name,
html[lang="zh-Hans"] .bento__name{font-family:'Playfair Display',serif;}
html[lang="zh-Hans"] .wordmark__sub{font-family:'Source Sans 3',sans-serif;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .routes__grid{grid-template-columns:minmax(0,1fr);}
  .globe__stage{max-width:560px;}
  .qform{grid-template-columns:minmax(0,1fr);}
  .qform > .rate-panel{grid-column:1;grid-row:auto;position:static;margin-bottom:1.6rem;}
  .contact-card{grid-template-columns:minmax(0,1fr);justify-items:start;}
}
@media (max-width:560px){
  .qform__row{grid-template-columns:minmax(0,1fr);}
  .qform__submit .btn{width:100%;}
  .contact-card__wa{width:100%;}
}
@media (max-width:420px){
  /* solo en la barra superior, donde compite con el selector de idioma */
  .topbar .wordmark__sub,
  .topbar .wordmark__rule{display:none;}
  .lang__btn{padding:0 .4rem;}
  .band__rule{display:none;}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero__cue{display:none;}
  .reveal-on .reveal{opacity:1;transform:none;}
}