/* Cabo yacht charters. Editorial layout, salt-white paper + marine ink, one turquoise accent (the water).
   Sin frameworks. Tokens, base, componentes compartidos, secciones, carta, temporadas, planificador, movimiento, responsive. */

/* ================= fuentes (autoalojadas en /fonts/) ================= */
/* Los mismos archivos woff2 que servía Google Fonts (subconjunto latin, con su unicode-range), para no depender de
   fonts.googleapis.com en el primer pantallazo. Cormorant Garamond y Manrope son variables: un archivo cubre los pesos.
   El ?v= lo pone real_i18n.py (misma huella en el preload de cada página). */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/manrope-latin.woff2?v=938c6e80) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(../fonts/cormorant-garamond-latin.woff2?v=c47ff128) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-italic-latin.woff2?v=9b8a16c9) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #0d1b2a;
  --ink-2: #132638;
  --ink-3: #1b3247;
  --paper: #f5f4ef;
  --paper-2: #ebeae3;
  --paper-3: #dedcd3;
  --white: #fffefb;
  --text: #182633;
  --muted: #5b6670;
  --line: #d3d3cb;
  --line-ink: rgba(245, 244, 239, 0.16);
  --sea-bright: #5fd4de;
  --sea-deep: #0b7280;
  --sea: #13909f;
  --warn: #d99a2b;
  --wa: #25d366;
  --wa-ink: #0b3d20;
  --im: #0071e3;
  --danger: #b3261e;

  --chart-sea: #d6eaeb;
  --chart-shelf: #c2e0e3;
  --chart-shelf-2: #cde6e8;
  --chart-land: #efeadf;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --wrap: 1360px;
  --radius: 4px;
  --r-card: 10px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.7s;
  --shadow: 0 20px 50px -30px rgba(13, 27, 42, 0.45);
  --shadow-sm: 0 8px 24px -16px rgba(13, 27, 42, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
img { background-size: cover; background-position: center; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { width: 1.1em; height: 1.1em; flex: none; }
strong { font-weight: 600; }
small { font-size: 0.82em; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 999; }
.skip:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* los contenedores con desplazamiento lateral son el bloque contenedor de lo que llevan dentro:
   sin esto, los textos ocultos con position:absolute escapan del recorte y ensanchan la página en celular */
.season__scroll, .forecast__days, .table-scroll, .rates, .mtabs, .bk__progress, .scroller { position: relative; }
[hidden] { display: none !important; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.center { text-align: center; }

/* ---------- tipografía ---------- */
.display {
  font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em;
  font-size: clamp(2.3rem, 4.6vw, 4.4rem); line-height: 1.02; color: var(--ink);
  text-wrap: balance; max-width: 18ch;
}
.display--light { color: var(--paper); }
.display--sm { font-size: clamp(1.8rem, 2.9vw, 2.6rem); }
.eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sea-deep); margin: 0 0 1rem; display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }
.eyebrow--light { color: var(--sea-bright); }
.eyebrow a { text-decoration: none; }
.lead { font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.4; color: var(--ink); max-width: 60ch; }
.note { font-size: 0.85rem; color: var(--muted); margin: 0.75rem 0 0; max-width: 70ch; }
.link {
  display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none;
  color: var(--ink); border-bottom: 1px solid var(--sea-bright); padding-bottom: 0.15rem; transition: gap 0.25s var(--ease), color 0.2s;
}
.link:hover { gap: 0.8rem; color: var(--sea-deep); }
.link--light { color: var(--paper); }
.link--light:hover { color: var(--sea-bright); }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1.45rem; min-height: 48px;
  border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 0.95rem; text-decoration: none; line-height: 1.2;
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; white-space: nowrap;
  touch-action: manipulation; user-select: none; background: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn svg { width: 1.15rem; height: 1.15rem; }
.btn--sm { padding: 0.55rem 1rem; min-height: 40px; font-size: 0.86rem; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-3); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: #fff; }
/* Botón principal con la paleta del logo: azul marino sobre fondo claro, blanco sobre fotos y fondos oscuros */
.btn--sun { background: var(--ink); color: #fff; }
.btn--sun:hover { background: var(--ink-3); }
.hero .btn--sun, .yhero .btn--sun, .contact .btn--sun, .footer .btn--sun, .cta-band .btn--sun,
body:not(:has(.page-head)) .nav:not(.is-solid):not(.is-open) .nav__cta .btn--sun { background: #fff; color: var(--ink); }
.hero .btn--sun:hover, .yhero .btn--sun:hover, .contact .btn--sun:hover, .footer .btn--sun:hover, .cta-band .btn--sun:hover,
body:not(:has(.page-head)) .nav:not(.is-solid):not(.is-open) .nav__cta .btn--sun:hover { background: var(--paper); }
.btn--wa { background: var(--wa); color: var(--wa-ink); }
.btn--wa:hover { background: #3be07a; }
.btn--im { background: var(--im); color: #fff; }
.btn--im:hover { background: #0a84ff; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost.btn--light { border-color: var(--line-ink); color: var(--paper); }
.btn--ghost.btn--light:hover { border-color: var(--paper); }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn--text { background: none; border: 0; padding: 0.6rem 0.3rem; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Canal principal: WhatsApp, salvo Apple en EE. UU./Canadá y páginas ja/zh (html.im-first, ver script del head).
   is-apple solo decide la etiqueta "iMessage" o "SMS". */
.if-apple { display: none; }
html.is-apple .if-apple { display: inline; }
html.is-apple .if-other { display: none; }
.contact-pair { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
html:not(.im-first) .contact-pair .btn--im { background: transparent; color: var(--ink); border-color: var(--line); }
html:not(.im-first) .contact-pair--light .btn--im { color: var(--paper); border-color: var(--line-ink); }
html.im-first .contact-pair .btn--im { order: -1; }
html.im-first .contact-pair .btn--wa { background: transparent; color: var(--ink); border-color: var(--line); }
html.im-first .contact-pair--light .btn--wa { color: var(--paper); border-color: var(--line-ink); }
.btn--wa svg, .btn--im svg { width: 1.4rem; height: 1.4rem; }

/* ---------- navegación ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: transform 0.4s var(--ease), background 0.3s, box-shadow 0.3s; color: var(--paper); }
.nav__in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 78px; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.82rem; }
.brand__mark { width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; flex: none; }
.brand__mark svg { width: 1.05rem; height: 1.05rem; }
.nav__links { display: flex; gap: 1.8rem; }
.nav__links a { text-decoration: none; font-size: 0.9rem; font-weight: 500; opacity: 0.85; padding: 0.4rem 0; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--sea-bright); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); }
.nav__links a:hover { opacity: 1; }
.nav__cta { display: flex; gap: 0.6rem; align-items: center; }
.nav .btn--ghost { border-color: var(--line-ink); color: inherit; }
html.im-first .nav__text:not(.nav__text--im), html:not(.im-first) .nav__text--im { display: none; }
.nav__text svg { width: 1.35rem; height: 1.35rem; }
.nav__burger { display: none; background: none; border: 1px solid var(--line-ink); border-radius: 50%; width: 44px; height: 44px; place-items: center; }
.nav__burger svg { width: 1.3rem; height: 1.3rem; }
.nav__sheet { display: none; }
.nav.is-solid { background: rgba(245, 244, 239, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.nav.is-solid .btn--ghost { border-color: var(--line); }
.nav.is-open { background: var(--paper); color: var(--ink); }
.nav.is-open .nav__sheet { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding: 1rem var(--gutter) 1.5rem; max-height: calc(100svh - 68px); overflow: auto; }
.nav__sheet > a { padding: 0.85rem 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--serif); font-size: 1.5rem; }
.nav__sheet-cta { padding-top: 1.2rem; }
body:has(.page-head) .nav:not(.is-solid) { color: var(--ink); }
body:has(.page-head) .nav:not(.is-solid) .btn--ghost { border-color: var(--line); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 94svh; display: grid; align-content: end; color: var(--paper); overflow: hidden; isolation: isolate; padding: 7rem var(--gutter) 3rem; background: var(--ink); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,27,42,0.45) 0%, rgba(13,27,42,0.05) 32%, rgba(13,27,42,0.45) 66%, rgba(13,27,42,0.9) 100%); }
.hero__in { width: min(100%, var(--wrap)); margin-inline: auto; }
.hero__title { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(3.2rem, 9.5vw, 8.4rem); max-width: 12ch; margin: 0 0 1.4rem; text-wrap: balance; }
.hero__lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); max-width: 54ch; margin: 0 0 2rem; opacity: 0.92; line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 3rem; }
.hero__stats { width: min(100%, var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-ink); padding-top: 1.4rem; gap: 1rem; }
.hero__stats strong { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; font-weight: 500; }
.hero__stats strong small { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; opacity: 0.72; margin-left: 0.35rem; letter-spacing: 0; }
.hero__stats span { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.hero__toggle { position: absolute; right: var(--gutter); top: 96px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-ink); background: rgba(13,27,42,0.35); color: var(--paper); display: grid; place-items: center; z-index: 2; }
.hero__toggle svg { width: 0.95rem; height: 0.95rem; }
/* En celular el texto ocupa casi toda la altura del video y pasa sobre el sol: velo parejo y más oscuro */
@media (max-width: 760px) {
  .hero__veil { background: linear-gradient(180deg, rgba(13,27,42,0.6) 0%, rgba(13,27,42,0.5) 30%, rgba(13,27,42,0.55) 55%, rgba(13,27,42,0.72) 75%, rgba(13,27,42,0.92) 100%); }
  .hero__title, .hero__lead, .hero .eyebrow, .hero__stats { text-shadow: 0 1px 14px rgba(13,27,42,0.55); }
  .hero__lead { opacity: 1; }
  .hero__stats span, .hero__stats strong small { opacity: 0.9; }
}

/* franja de confianza */
.trust { background: var(--ink); color: var(--paper); padding-block: 1.6rem; border-top: 1px solid var(--line-ink); }
.trust__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem 1.6rem; }
.trust__list li { display: flex; gap: 0.8rem; align-items: flex-start; }
.trust__list svg { width: 1.5rem; height: 1.5rem; color: var(--sea-bright); margin-top: 0.1rem; }
.trust__list strong { display: block; font-weight: 600; font-size: 0.98rem; }
.trust__list span { font-size: 0.86rem; opacity: 0.72; line-height: 1.4; display: block; }

/* ---------- secciones ---------- */
section { position: relative; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.section-head--tight { margin-bottom: 1.25rem; }
.section-head__note { color: var(--muted); font-size: 0.92rem; max-width: 36ch; margin: 0; text-align: right; }

.intro { padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); }
.intro__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.intro__text p:not(.eyebrow) { max-width: 52ch; }
.intro__text .display { margin-bottom: 1.5rem; }
.intro__media { position: relative; }
.frame { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--small { position: absolute; width: 42%; aspect-ratio: 4 / 3; left: -12%; bottom: -8%; border: 6px solid var(--paper); }

.exps { padding: clamp(3rem, 6vw, 5rem) 0; }
/* overflow-y: hidden: si el carrusel también pudiera desplazarse en vertical (le sobran unos px), la rueda del mouse se quedaba "trabada" en él */
.scroller { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; padding-bottom: 0.5rem; }
.scroller::-webkit-scrollbar { display: none; }
.scroller.is-drag { cursor: grabbing; scroll-snap-type: none; }
.scroller__track { display: flex; gap: 1.25rem; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); width: max-content; }
.scroller__track::after { content: ""; flex: none; width: 1px; }
.scroller__nav { display: none; gap: 0.5rem; }
@media (hover: hover) and (pointer: fine) { .scroller__nav { display: inline-flex; } }
.scroller__nav[hidden] { display: none; }
.scroller__nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s; }
.scroller__nav button:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.scroller__nav button:disabled { opacity: 0.35; cursor: default; }
.scroller__nav svg { width: 1.2rem; height: 1.2rem; }
.section-head__links { align-items: center; }
.exp-card { flex: none; width: clamp(250px, 26vw, 360px); scroll-snap-align: start; text-decoration: none; color: var(--ink); display: block; }
.exp-card__media { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.exp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.exp-card:hover .exp-card__media img { transform: scale(1.05); }
.exp-card__body { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 1rem 0 0; gap: 0.35rem 0.5rem; }
.exp-card__body .eyebrow { grid-column: 1 / -1; margin-bottom: 0.15rem; }
.exp-card__body h3, .exp-card__body h2 { font-family: var(--serif); font-size: 1.7rem; line-height: 1.05; }
.exp-card__go { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background 0.25s, color 0.25s, transform 0.3s var(--ease); }
.exp-card:hover .exp-card__go { background: var(--ink); color: var(--paper); transform: rotate(45deg); }
.exp-card__facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: 0; font-size: 0.82rem; color: var(--muted); }
.exp-card__facts span + span::before { content: "·"; margin-right: 0.9rem; color: var(--sea); }
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
.exp-grid .exp-card { width: auto; }

.fleet { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); }
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin-bottom: 2rem; align-items: center; }
.filters__group { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filters__label { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 0.25rem; }
@media (max-width: 640px) { .filters__label { width: 100%; margin-bottom: -0.1rem; } }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 0.5rem 0.95rem; min-height: 44px; font-size: 0.86rem; font-weight: 600; transition: background 0.2s, color 0.2s, border-color 0.2s; touch-action: manipulation; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[disabled] { opacity: 0.4; pointer-events: none; }
.yacht-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.4rem; margin-bottom: 3rem; }
.yacht-grid__empty { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 3rem 0; }
.yacht-card { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.yacht-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.yacht-card.is-out { display: none; }
.yacht-card__media { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; background: var(--paper-2); }
.yacht-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.yacht-card:hover .yacht-card__media img { transform: scale(1.05); }
.yacht-card__len { position: absolute; left: 0.9rem; top: 0.9rem; background: rgba(13,27,42,0.75); color: var(--paper); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.6rem; border-radius: 999px; backdrop-filter: blur(6px); }
.yacht-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.yacht-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.yacht-card__top h3, .yacht-card__top h2 { font-family: var(--serif); font-size: 1.8rem; line-height: 1; }
.yacht-card__from { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yacht-card__from small { font-weight: 500; color: var(--muted); margin-right: 0.15rem; }
.yacht-card__tag { color: var(--muted); font-size: 0.95rem; margin: 0; }
.yacht-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.84rem; }
.yacht-card__meta li { display: inline-flex; align-items: center; gap: 0.35rem; }
.yacht-card__meta svg { color: var(--sea-deep); }
.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.badges span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sea-deep); border: 1px solid currentColor; border-radius: 999px; padding: 0.22rem 0.55rem; }
.badges--big span { font-size: 0.78rem; padding: 0.35rem 0.75rem; }
.yacht-card__go { margin-top: auto; padding-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; transition: gap 0.25s var(--ease); }
.yacht-card:hover .yacht-card__go { gap: 0.85rem; }
.yacht-grid--three { grid-template-columns: repeat(3, 1fr); }
.yacht-grid--four { grid-template-columns: repeat(4, 1fr); gap: 1.2rem 1rem; }
.yacht-grid--four .yacht-card__top h3, .yacht-grid--four .yacht-card__top h2 { font-size: 1.5rem; }

.flagship { position: relative; min-height: 80vh; display: grid; align-items: center; color: var(--paper); overflow: hidden; isolation: isolate; padding: clamp(5rem, 10vw, 8rem) 0; }
.flagship__media { position: absolute; inset: -12% 0; z-index: -2; }
.flagship__media img { width: 100%; height: 100%; object-fit: cover; }
.flagship__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,27,42,0.85) 0%, rgba(13,27,42,0.55) 50%, rgba(13,27,42,0.15) 100%); }
.flagship__in p:not(.eyebrow) { max-width: 46ch; font-size: 1.1rem; margin-bottom: 2rem; }
.flagship__in .display { margin-bottom: 1.2rem; max-width: 16ch; }

.where { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.seasons { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); background: var(--paper-2); }
.seasons--tight { padding-block: clamp(3rem, 5vw, 4rem); }
.seasons--forecast { background: var(--paper); padding-top: 0; }

.how { padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 6rem); }
.how__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 6vw, 6rem); }
.how__head p:not(.eyebrow) { max-width: 44ch; }
.how__head .display { margin-bottom: 1.2rem; }
.how__head .btn { margin-top: 0.8rem; }
.steps { display: flex; flex-direction: column; }
.steps li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1.2rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps__n { font-family: var(--serif); font-size: 2.6rem; line-height: 0.9; color: var(--sea-deep); }
.steps h3 { font-family: var(--serif); font-size: 1.6rem; margin-bottom: 0.4rem; }
.steps p { margin: 0; max-width: 54ch; }

.promise { margin-top: 3.5rem; display: grid; grid-template-columns: minmax(220px, 0.8fr) 2fr; gap: 1.5rem 3rem; background: var(--ink); color: var(--paper); border-radius: var(--r-card); padding: clamp(1.6rem, 3vw, 2.4rem); }
.promise__head { display: flex; gap: 1rem; align-items: flex-start; }
.promise__head svg { width: 2.2rem; height: 2.2rem; color: var(--sea-bright); }
.promise__head .eyebrow { margin-bottom: 0.5rem; }
.promise__head h3 { font-family: var(--serif); font-size: 1.9rem; line-height: 1.05; }
.promise ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.promise li { padding-left: 1.1rem; position: relative; font-size: 0.94rem; color: rgba(245,244,239,0.82); line-height: 1.5; }
.promise li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--sea-bright); }
.promise li strong { display: block; color: var(--paper); }

.faq { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--paper-2); }
.faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 6rem); }
.faq__head p:not(.eyebrow) { color: var(--muted); max-width: 36ch; margin-top: 1rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform 0.35s var(--ease), background 0.25s, color 0.25s; flex: none; }
.faq details[open] summary span { transform: rotate(180deg); background: var(--ink); color: var(--paper); }
.faq details p { margin: 0 0 1.3rem; max-width: 62ch; }

.contact { background: var(--ink); color: var(--paper); padding: clamp(5rem, 10vw, 8rem) 0; }
.contact__in { max-width: 780px; }
.contact__in p:not(.eyebrow) { font-size: 1.1rem; opacity: 0.9; max-width: 52ch; }
.contact__in .display { margin-bottom: 1.2rem; }
.contact__in .contact-pair { margin: 2rem 0 1.5rem; }

.cta-band { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 6vw, 4.5rem); }
.cta-band__in { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-band__in p:not(.eyebrow) { opacity: 0.8; margin: 0.8rem 0 0; max-width: 46ch; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* ---------- pie ---------- */
.footer { background: var(--ink-2); color: var(--paper); padding: 3.5rem 0 2rem; font-size: 0.92rem; }
.footer__in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: 1.2fr 0.8fr 1.3fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-ink); }
.footer__brand { display: flex; gap: 1rem; align-items: start; }
.footer__brand p { margin: 0.3rem 0 0; opacity: 0.75; max-width: 34ch; }
.footer__nav { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__nav a { text-decoration: none; opacity: 0.85; }
.footer__nav a:hover { opacity: 1; color: var(--sea-bright); }
.footer__contact p { opacity: 0.78; margin: 0 0 0.9rem; }
.footer__contact .eyebrow { margin-bottom: 0.6rem; }
.footer__legal { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-top: 1.5rem; font-size: 0.78rem; opacity: 0.62; }
.footer__legal p { margin: 0 0 0.4rem; max-width: 100ch; }

/* botón flotante: aparece a los 10 s, WhatsApp o iMessage según el dispositivo */
.float-cta { position: fixed; right: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; padding: 0.75rem 1.15rem 0.75rem 0.85rem; font-weight: 700; font-size: 0.92rem; text-decoration: none; box-shadow: 0 14px 34px -12px rgba(0,0,0,0.5); transform: translateY(160%) scale(0.9); opacity: 0; pointer-events: none; transition: transform 0.6s var(--ease), opacity 0.4s; }
.float-cta svg { width: 1.8rem; height: 1.8rem; }
.float-cta.is-in { transform: none; opacity: 1; pointer-events: auto; }
.float-cta.is-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 currentColor; animation: ring 1.6s var(--ease) 0.3s 2; opacity: 0.5; }
.float-cta:hover { transform: translateY(-2px); }
.float-cta--wa { background: var(--wa); color: var(--wa-ink); }
.float-cta--im { background: var(--im); color: #fff; }
html.im-first .float-cta--wa, html:not(.im-first) .float-cta--im { display: none; }
.to-quote { display: none; }

/* ---------- páginas interiores ---------- */
.page-head { padding: clamp(8rem, 14vw, 11rem) 0 clamp(2rem, 4vw, 3.5rem); }
.page-head--book { padding-bottom: 1.5rem; }
.page-head .display { font-size: clamp(2.6rem, 6vw, 5.4rem); max-width: 16ch; }
.page-head__lead { margin-top: 1.4rem; font-size: 1.1rem; max-width: 60ch; }

.compare { padding: clamp(3rem, 6vw, 5rem) 0; }
.compare .display { margin-bottom: 1.6rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 900px; }
.cmp th, .cmp td { padding: 0.8rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.cmp thead th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); }
.cmp tbody th { font-weight: 600; }
.cmp tbody th a { text-decoration: none; }
.cmp tbody th a:hover { color: var(--sea-deep); }
/* foto a la izquierda; nombre y "pies · tipo" apilados a su derecha */
.cmp__yacht { display: grid; grid-template-columns: 72px auto; column-gap: 0.75rem; align-items: center; }
.cmp__thumb { grid-row: span 2; width: 72px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--paper-2); transition: transform 0.25s var(--ease); }
.cmp__yacht span { align-self: end; }
.cmp__yacht small { align-self: start; }
.cmp__yacht:hover .cmp__thumb { transform: scale(1.06); }
.cmp tbody th small, .cmp td small { display: block; color: var(--muted); font-weight: 400; white-space: normal; }
.cmp td { font-variant-numeric: tabular-nums; }
.cmp svg { color: var(--sea); width: 1.1rem; height: 1.1rem; }
.dash { display: inline-block; width: 0.8rem; height: 1px; background: var(--line); vertical-align: middle; }

/* yate */
.yhero { position: relative; min-height: 78vh; display: grid; align-content: end; color: var(--paper); overflow: hidden; isolation: isolate; padding: 8rem 0 3rem; background: var(--ink); }
.yhero--exp { min-height: 80vh; }
.yhero--guide { min-height: 76vh; }
.yhero__media { position: absolute; inset: -10% 0; z-index: -2; }
.yhero__media.hero__media { inset: 0; }
.yhero__media img:not(.hero__poster) { width: 100%; height: 100%; object-fit: cover; }
.yhero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,27,42,0.45) 0%, rgba(13,27,42,0.05) 30%, rgba(13,27,42,0.55) 62%, rgba(13,27,42,0.92) 100%); }
.yhero__title { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(3rem, 8vw, 7rem); margin-bottom: 1.2rem; max-width: 16ch; text-wrap: balance; }
.yhero__title em { display: block; font-style: italic; font-size: 0.42em; letter-spacing: 0; line-height: 1.15; opacity: 0.9; margin-top: 0.5rem; max-width: 44ch; }
.yhero .hero__lead { margin-bottom: 1.6rem; }
.specs { display: grid; grid-template-columns: repeat(6, auto); gap: 1rem 2.2rem; border-top: 1px solid var(--line-ink); padding-top: 1.2rem; justify-content: start; }
.yhero--exp .specs { grid-template-columns: repeat(4, auto); }
.specs span { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.2rem; }
.specs strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.1; }
.specs strong small { font-family: var(--sans); font-size: 0.75rem; opacity: 0.7; }

.ylayout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 5vw, 4.5rem) 0; align-items: start; }
.yblock { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.yblock .display--sm { margin-bottom: 1rem; }
.ycols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; }
.list { display: flex; flex-direction: column; gap: 0.45rem; }
.list li { display: flex; gap: 0.6rem; align-items: start; line-height: 1.45; }
.list svg { color: var(--sea); margin-top: 0.25rem; width: 1rem; height: 1rem; }
.list--no svg { color: var(--muted); }
.sticky { position: sticky; top: 96px; }

.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 0.6rem; }
.gallery__item { border: 0; padding: 0; background: var(--paper-2); overflow: hidden; border-radius: var(--radius); position: relative; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item.is-tall { grid-row: span 2; }
.gallery__item.is-lead { grid-column: span 2; grid-row: span 2; }

/* clip corto del Sea Ray 55 (vertical): celda en la galería de la ficha y figura en experiencias; site.js lo carga al acercarse (data-video) */
.gallery__clip { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); position: relative; }
.gallery__clip.is-tall { grid-row: span 2; }
.yclip { margin: 1.4rem auto 0; max-width: 22rem; }
.yclip__box { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.gallery__clip img, .gallery__clip video, .yclip__box img, .yclip__box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery__clip video, .yclip__box video { opacity: 0; transition: opacity 1.2s var(--ease); }
.gallery__clip video.is-playing, .yclip__box video.is-playing { opacity: 1; }
.yclip figcaption { margin-top: 0.55rem; font-size: 0.85rem; color: var(--muted); text-align: center; }
/* /clip corto */


.rates { overflow-x: auto; }
.rates table { width: 100%; border-collapse: collapse; }
.rates th, .rates td { padding: 0.85rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rates thead th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rates thead th small { display: block; letter-spacing: 0.05em; text-transform: none; font-weight: 500; margin-top: 0.15rem; }
.rates tbody th { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; white-space: nowrap; }
.rates td { font-variant-numeric: tabular-nums; }
.rates td strong { font-size: 1.05rem; }
.rates td small { display: block; color: var(--muted); }
.rates--two td { min-width: 8rem; }

.routes-list { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.routes-list li { display: grid; grid-template-columns: 5.2rem 1fr auto; gap: 1rem; align-items: center; border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.85rem 1rem; background: var(--white); }
.routes-list__h { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sea-deep); }
.routes-list strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.routes-list p { margin: 0.1rem 0 0; font-size: 0.88rem; color: var(--muted); }
.routes-list__nm { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--muted); white-space: nowrap; text-align: right; }
.routes-list__nm small { display: block; font-size: 0.78rem; }

.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1rem; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.notes { background: var(--paper-2); border-radius: var(--radius); padding: 1.4rem 1.6rem; }
.notes ul { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.92rem; }
.notes li, .tips li { padding-left: 1rem; position: relative; }
.notes li::before, .tips li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--sea); }
.tips { display: flex; flex-direction: column; gap: 0.6rem; }

.others { padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--line); }
.more-exps { padding: clamp(3rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem); }

/* experiencia */
.xintro { padding-block: clamp(3.5rem, 7vw, 6rem); }
.xintro__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.xintro__body p:not(.lead) { max-width: 62ch; }
.glance { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); }
.glance dl { margin: 0 0 1.2rem; }
.glance dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--paper-2); }
.glance dt { color: var(--muted); font-size: 0.88rem; }
.glance dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.glance dd small { display: block; font-weight: 500; color: var(--muted); }
.glance dd a { text-decoration-color: var(--sea-bright); text-underline-offset: 3px; }
.glance .glance__list { flex-direction: column; gap: 0.25rem; }
.glance .glance__list dd { text-align: left; font-weight: 500; }

.xday { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--paper-2); }
.xday__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.xday__map { position: sticky; top: 96px; }
.timeline { position: relative; margin-top: 2rem; --p: 0; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: calc(4.6rem + 0.8rem - 1px); top: 0.5rem; width: 2px; border-radius: 2px; }
.timeline::before { bottom: 1.2rem; background: var(--paper-3); }
.timeline::after { height: calc((100% - 1.7rem) * var(--p)); background: var(--sea); transition: height 0.15s linear; }
.timeline li { display: grid; grid-template-columns: 4.6rem 1fr; gap: 1.6rem; padding-bottom: 1.4rem; position: relative; }
.timeline time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sea-deep); font-size: 0.9rem; padding-top: 0.2rem; text-align: right; }
.timeline li div { position: relative; }
.timeline li div::before { content: ""; position: absolute; left: calc(-0.8rem - 5.5px); top: 0.45rem; width: 11px; height: 11px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--sea); }
.timeline h3 { font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; }
.timeline p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.95rem; }

.xseason { padding-block: clamp(3rem, 6vw, 5rem); }
.monthbar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.4rem; margin-top: 1rem; }
.monthbar li { display: grid; gap: 0.35rem; text-align: center; }
.monthbar__bar { height: 96px; background: var(--paper-2); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.monthbar__bar i { display: block; width: 100%; height: calc(var(--h) * 100%); background: var(--paper-3); border-radius: 6px 6px 0 0; transform-origin: bottom; }
.monthbar .lvl-1 i { background: #a9d7db; }
.monthbar .lvl-2 i { background: var(--sea); }
.monthbar .lvl-3 i { background: var(--sea-deep); }
.monthbar__m { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.monthbar__l { font-size: 0.72rem; color: var(--muted); }
.monthbar .is-now .monthbar__bar { box-shadow: 0 0 0 2px var(--ink); }
.monthbar .is-now .monthbar__m::after { content: " · now"; color: var(--sea-deep); text-transform: none; letter-spacing: 0; font-weight: 600; }
.js .monthbar.is-in i { animation: grow 0.9s var(--ease) both; }
.monthbar li:nth-child(n) i { animation-delay: calc(var(--d, 0) * 1ms); }

.xgallery { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.xgallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 0.6rem; }
.xgallery__grid .gallery__item:first-child { grid-column: span 2; grid-row: span 2; }

.xbring { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.xbring__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.faq--exp { padding-block: clamp(3.5rem, 7vw, 5rem); }

/* guía */
.guide-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.guide-jump a { text-decoration: none; border: 1px solid var(--line-ink); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.88rem; font-weight: 600; transition: background 0.2s, color 0.2s; }
.guide-jump a:hover { background: var(--paper); color: var(--ink); }
.places { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.place { border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.1rem 1.2rem; background: var(--white); }
.place h3 { font-family: var(--serif); font-size: 1.4rem; line-height: 1.1; }
.place p { font-size: 0.9rem; margin: 0.4rem 0 0; }
.place .place__short { color: var(--sea-deep); font-weight: 600; font-size: 0.84rem; }
.place .place__nm { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.pin-kind { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem !important; }
.pin-kind::before, .lg::before { content: ""; width: 10px; height: 10px; background: var(--ink); flex: none; }
.pin-kind--marina::before, .lg--marina::before { border-radius: 2px; }
.pin-kind--landmark::before, .lg--landmark::before { transform: rotate(45deg) scale(0.85); }
.pin-kind--beach::before, .lg--beach::before { border-radius: 50%; background: var(--chart-land); border: 2px solid var(--ink); }
.pin-kind--snorkel::before, .lg--snorkel::before { border-radius: 50%; background: var(--sea); border: 2px solid var(--ink); }
.pin-kind--wildlife::before, .lg--wildlife::before { width: 0; height: 0; background: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--warn); }
.lg--whales::before { border-radius: 3px; background: rgba(11,114,128,0.14); border: 1px dashed var(--sea-deep); width: 16px; }
.tips-grid { padding-block: clamp(4rem, 8vw, 6rem); }
.tips-grid__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tips-grid__list article { background: var(--paper-2); border-radius: var(--r-card); padding: 1.4rem 1.4rem 1.2rem; }
.tips-grid__list svg { width: 1.6rem; height: 1.6rem; color: var(--sea-deep); }
.tips-grid__list h3 { font-family: var(--serif); font-size: 1.4rem; margin: 0.7rem 0 0.4rem; line-height: 1.1; }
.tips-grid__list p { font-size: 0.92rem; margin: 0; }

/* ---------- carta náutica ---------- */
.chart { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); }
.chart__stage { position: relative; background: var(--chart-sea); min-height: clamp(460px, 44vw, 640px); min-width: 0; overflow: hidden; cursor: grab; touch-action: pan-y; outline-offset: -3px; }
.chart.is-dragging .chart__stage { cursor: grabbing; }
.chart.is-dragging .pin { cursor: grabbing; }
.chart.is-moved .chart__stage { touch-action: none; }
.chart__zbtn { position: absolute; right: 0.8rem; top: 4.4rem; display: grid; background: rgba(255, 254, 251, 0.94); border-radius: 8px; box-shadow: var(--shadow-sm); overflow: hidden; }
.chart__zbtn button { width: 38px; height: 38px; border: 0; background: none; font-size: 1.3rem; font-weight: 600; line-height: 1; color: var(--ink); }
.chart__zbtn button + button { border-top: 1px solid var(--line); }
.chart__zbtn button:hover { background: var(--paper-2); }
.chart__hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; background: rgba(13, 27, 42, 0.85); color: var(--paper); padding: 0.6rem 1.1rem; border-radius: 999px; font-size: 0.86rem; font-weight: 600; pointer-events: none !important; white-space: nowrap; animation: fade 0.2s var(--ease); }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; --u: 1; user-select: none; -webkit-user-select: none; }
.chart__sea { fill: var(--chart-sea); }
.chart__grid line { stroke: rgba(13, 27, 42, 0.09); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.chart__shelf { fill: none; stroke: var(--chart-shelf); stroke-width: 9px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__shelf--2 { stroke: var(--chart-shelf-2); stroke-width: 24px; }
.chart__land { fill: var(--chart-land); stroke: rgba(13, 27, 42, 0.75); stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__zone { fill: rgba(11, 114, 128, 0.07); stroke: rgba(11, 114, 128, 0.5); stroke-width: 1px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.5s; }
.chart.show-whales .chart__zone { opacity: 1; }
.chart__lbl { font-family: var(--sans); font-weight: 600; font-size: calc(10.5px * var(--u)); letter-spacing: 0.22em; fill: rgba(13, 27, 42, 0.42); pointer-events: none; }
.chart__lbl--ocean { fill: rgba(11, 114, 128, 0.62); letter-spacing: 0.34em; font-size: calc(11px * var(--u)); }
.chart__lbl--bay { font-family: var(--serif); font-style: italic; letter-spacing: 0; font-size: calc(15px * var(--u)); fill: rgba(11, 114, 128, 0.75); font-weight: 500; }
.chart__lbl--town { fill: rgba(13, 27, 42, 0.32); }
.chart__lbl--area { fill: rgba(13, 27, 42, 0.38); font-size: calc(9.5px * var(--u)); }
.chart__route { fill: none; stroke: var(--ink); stroke-width: calc(1.3px * var(--u)); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: calc(2px * var(--u)) calc(5px * var(--u)); opacity: 0; transition: opacity 0.35s; }
.chart__route.is-on { opacity: 1; stroke: var(--sea-deep); stroke-width: calc(2.6px * var(--u)); stroke-dasharray: none; }
.chart__relief, .chart__coast, .chart__sun { pointer-events: none; }
.chart__coast { fill: none; stroke: rgba(13, 27, 42, 0.75); stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__sun circle { fill: #f4b544; stroke: #fff; stroke-width: 2.5px; }
.chart__sun path { stroke: #e9a23b; stroke-width: 2.5px; stroke-linecap: round; }
.chart__sun text { font-family: var(--sans); font-size: 12.5px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--chart-sea); stroke-width: 4px; stroke-linejoin: round; }
.chart__onroute { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chart__onroute p { width: 100%; margin: 0 0 0.1rem !important; font-size: 0.8rem !important; color: var(--muted); }
.chart__card .chart__onroute button { position: static; width: auto; height: auto; border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.chart__card .chart__onroute button:hover { border-color: var(--ink); }
.chart__book { margin-top: 0.75rem; }
.chart__boat { fill: var(--white); stroke: var(--sea-deep); stroke-width: calc(2.4px * var(--u)); r: calc(4.5px * var(--u)); }
.pin { cursor: pointer; outline: none; transition: opacity 0.3s; }
.pin__s { transform: scale(var(--u)); }
.pin__hit { fill: transparent; }
.pin__g > * { fill: var(--ink); stroke: var(--white); stroke-width: 2px; transition: transform 0.25s var(--ease); }
.pin--beach .pin__g > * { fill: var(--chart-land); stroke: var(--ink); stroke-width: 2.2px; }
.pin--snorkel .pin__g > * { fill: var(--sea); stroke: var(--ink); stroke-width: 2px; }
.pin--wildlife .pin__g > * { fill: var(--warn); stroke: var(--ink); stroke-width: 1.6px; }
.pin text:not(.pin__badge text) { font-family: var(--sans); font-size: 12.5px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--chart-sea); stroke-width: 4px; stroke-linejoin: round; }
.pin__badge circle { fill: var(--sea-deep); stroke: var(--white); stroke-width: 1.5px; }
.pin__badge text { font-family: var(--sans); font-size: 8.5px; font-weight: 700; fill: #fff; }
.pin:not(.is-stop) .pin__badge { display: none; }
.chart .pin:not(.is-stop) { opacity: 0.62; }
.pin:hover .pin__g > *, .pin:focus-visible .pin__g > *, .pin.is-active .pin__g > * { transform: scale(1.35); stroke: var(--sea-deep); }
.pin:focus-visible text:not(.pin__badge text), .pin.is-active text:not(.pin__badge text) { fill: var(--sea-deep); }
.chart .is-close-only { display: none; }
.chart.is-close .is-close-only { display: inline; }
.chart__ticks { position: absolute; inset: 0; pointer-events: none; }
/* mapa satelital (Mapbox) encima de la carta: la carta SVG y sus controles se ocultan */
/* Mapbox pone .mapboxgl-map { position: relative } al contenedor: sin el !important queda con alto 0 */
.chart__real { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity .6s; }
.chart.is-real .chart__real { opacity: 1; }
.chart.is-real .chart__stage { cursor: auto; touch-action: auto; background: #0d2436; }
.chart.is-real .chart__svg, .chart.is-real .chart__ticks, .chart.is-real .chart__overlay { visibility: hidden; }
.chart__rot { position: absolute; left: 10px; bottom: 36px; z-index: 2; display: none; gap: 6px; }
.chart.is-real .chart__rot { display: flex; }
.chart__rot button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.real-pin { display: block; border: 0; background: none; padding: 0; cursor: pointer; opacity: .7; }
.real-pin.is-stop, .real-pin.is-active { opacity: 1; }
.real-pin i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.real-pin.is-stop i { border-color: #e9a23b; }
.real-pin.is-active i { background: #e9a23b; border-color: #fff; transform: scale(1.25); }
.real-pin span { position: absolute; top: 50%; left: calc(100% + 6px); transform: translateY(-50%); font: 700 12.5px var(--sans); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.6); white-space: nowrap; }
/* el nombre va a la derecha, a la izquierda, arriba o abajo según dónde no choque con otro; si no cabe se oculta (el punto sigue) */
.real-pin--izq span { left: auto; right: calc(100% + 6px); }
.real-pin--arr span, .real-pin--aba span { left: 50%; transform: translateX(-50%); }
.real-pin--arr span { top: auto; bottom: calc(100% + 1px); }
.real-pin--aba span { top: calc(100% + 1px); }
.real-pin.is-apretado span { visibility: hidden; }
.real-sun { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.real-sun i { width: 22px; height: 22px; border-radius: 50%; background: #f6b443; border: 3px solid #fff; box-shadow: 0 0 18px 6px rgba(246,180,67,.75); }
.real-sun span { font: 700 12.5px var(--sans); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.95); white-space: nowrap; }
@media (max-width: 760px) { .real-pin:not(.is-stop):not(.is-active) span { display: none; } }
.chart__tick { position: absolute; font-size: 0.62rem; letter-spacing: 0.06em; color: rgba(13, 27, 42, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart__tick--lat { left: 0.45rem; transform: translateY(-120%); }
.chart__tick--lon { bottom: 0.35rem; transform: translateX(4px); }
.chart__overlay { position: absolute; inset: 0; pointer-events: none; }
.chart__overlay > * { pointer-events: auto; }
.chart__compass { position: absolute; top: 0.8rem; right: 0.8rem; width: 46px; height: 46px; display: grid; place-items: center; }
.chart__compass svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart__compass circle { fill: rgba(255, 254, 251, 0.75); stroke: rgba(13, 27, 42, 0.35); }
.chart__compass path { fill: rgba(13, 27, 42, 0.35); }
.chart__compass path.n { fill: var(--ink); }
.chart__compass span { position: absolute; top: -0.9rem; font-size: 0.66rem; font-weight: 700; }
.chart__zoom { position: absolute; top: 0.8rem; left: 3.2rem; display: flex; background: rgba(255, 254, 251, 0.92); border-radius: 999px; padding: 3px; box-shadow: var(--shadow-sm); }
.chart__zoom button { border: 0; background: none; border-radius: 999px; padding: 0.4rem 0.8rem; font-size: 0.78rem; font-weight: 600; min-height: 34px; }
.chart__zoom button.is-on { background: var(--ink); color: var(--paper); }
.chart__scale { position: absolute; left: 3.2rem; bottom: 1.6rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(13, 27, 42, 0.7); display: grid; gap: 0.2rem; width: 100%; pointer-events: none !important; }
.chart__scale i { display: block; height: 6px; border: 1.5px solid rgba(13, 27, 42, 0.7); border-top: 0; }
.chart__panel { padding: 1.2rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; min-width: 0; font-size: 0.92rem; }
.chart__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.chart__tab { text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.7rem; background: var(--white); font-weight: 600; font-size: 0.84rem; line-height: 1.2; min-height: 52px; transition: border-color 0.2s, box-shadow 0.2s; }
.chart__tab span { display: block; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea-deep); margin-bottom: 0.15rem; }
.chart__tab:hover { border-color: var(--ink); }
.chart__tab.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chart__summary { margin: 0; line-height: 1.45; }
.chart__summary strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.15; margin-bottom: 0.25rem; }
.chart__summary em { display: block; font-style: normal; color: var(--muted); font-size: 0.82rem; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.chart__stops-cap { margin: 0.7rem 0 0; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.chart__stops { display: grid; gap: 0.15rem; margin-top: 0.3rem; }
.chart__stops button { width: 100%; display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.6rem; align-items: center; text-align: left; background: none; border: 0; border-radius: 6px; padding: 0.4rem 0.4rem; min-height: 40px; }
.chart__stops button:hover, .chart__stops button.is-on { background: var(--paper); }
.chart__stops b { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sea-deep); color: #fff; display: grid; place-items: center; font-size: 0.72rem; }
.chart__stops small { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart__card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--white); animation: fade 0.3s var(--ease); }
.chart__media { display: block; }
.chart__card h4 a { text-decoration: none; color: inherit; }
.chart__card h4 a:hover { color: var(--sea-deep); text-decoration: underline; text-underline-offset: 0.15em; }
.chart__card img, .chart__card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--chart-sea); }
.chart__card div { padding: 0.8rem 0.9rem 0.9rem; position: relative; }
.chart__card h4 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.1; padding-right: 2rem; }
.chart__card p { margin: 0.35rem 0 0; font-size: 0.88rem; }
.chart__card .pin-kind { margin-bottom: 0.3rem !important; }
.chart__card .nm { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.chart__card button { position: absolute; top: 0.6rem; right: 0.6rem; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); display: grid; place-items: center; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: auto 0 0; font-size: 0.74rem; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.chart:not(.show-whales) .lg--whales { display: none; }
.chart__note { margin: 0; font-size: 0.72rem; color: var(--muted); }
.chart--compact { grid-template-columns: 1fr; }
.chart--compact .chart__stage { min-height: 0; aspect-ratio: 4 / 3; }
.chart--compact .chart__panel { border-left: 0; border-top: 1px solid var(--line); }
.chart--compact .chart__tabs, .chart--compact .chart__legend { display: none; }
.chart--compact .chart__stops { grid-template-columns: 1fr 1fr; gap: 0.15rem 0.6rem; }

/* ---------- temporadas ---------- */
.season { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); overflow: hidden; }
.season__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.season__table { width: 100%; border-collapse: collapse; min-width: 820px; font-size: 0.86rem; }
.season__table th[scope="row"] { position: sticky; left: 0; background: var(--white); text-align: left; padding: 0.55rem 1rem; white-space: nowrap; font-weight: 600; z-index: 1; min-width: 150px; }
.season__table th[scope="row"] svg { color: var(--sea-deep); width: 1rem; height: 1rem; vertical-align: -0.15em; margin-right: 0.45rem; }
.season__table thead th { padding: 0.5rem 0.15rem 0.3rem; }
.season__table thead th:first-child { position: sticky; left: 0; background: var(--white); }
.season__table thead button { width: 100%; border: 0; background: none; border-radius: 6px; padding: 0.45rem 0.1rem; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); min-height: 36px; }
.season__table thead button:hover { color: var(--ink); background: var(--paper); }
.season__table thead button.is-on { background: var(--ink); color: var(--paper); }
.season__table td { text-align: center; padding: 0.5rem 0.15rem; border-top: 1px solid var(--paper-2); font-variant-numeric: tabular-nums; }
.season__table td.is-on { background: rgba(95, 212, 222, 0.14); }
.season__val th[scope="row"] { color: var(--muted); font-weight: 500; }
.season__val td { color: var(--text); font-size: 0.84rem; line-height: 1.2; }
.alt { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; color: var(--muted); letter-spacing: 0; font-style: normal; }
.season__val td .alt { font-size: 0.68rem; }
.lvl { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.lvl i { width: 6px; border-radius: 1.5px; background: var(--paper-3); }
.lvl i:nth-child(1) { height: 6px; } .lvl i:nth-child(2) { height: 11px; } .lvl i:nth-child(3) { height: 16px; }
.lvl--1 i:nth-child(1), .lvl--2 i:nth-child(-n+2) { background: var(--sea); }
.lvl--3 i { background: var(--sea-deep); }
.lvl b { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.season__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin: 0; padding: 0.9rem 1.2rem 0; font-size: 0.8rem; color: var(--muted); }
.season__legend .lvl { height: 16px; }
.season__legend .lvl b { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-weight: 500; margin-left: 0.4rem; align-self: center; }
.season__how { padding: 0.6rem 1.2rem 1rem; font-size: 0.8rem; color: var(--muted); }
.season__how summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.season__how ul { display: grid; gap: 0.3rem; margin-top: 0.5rem; max-width: 90ch; }
.season__detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem 2.5rem; padding: 1.3rem 1.3rem 1.2rem; border-top: 1px solid var(--line); background: var(--paper); }
.season__detail:empty { display: none; }
.season__detail h3 { font-family: var(--serif); font-size: 2rem; line-height: 1; margin-bottom: 0.8rem; }
.season__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem 1rem; margin: 0; }
.season__stats div { display: grid; gap: 0.05rem; }
.season__stats dt { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.season__stats dd { margin: 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.season__stats dd small { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); }
.season__good p { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 0.5rem; }
.season__good .pills { gap: 0.4rem; margin-bottom: 0.9rem; }
.season__good .pill { padding: 0.4rem 0.8rem; font-size: 0.82rem; }
.season__good ul { display: grid; gap: 0.35rem; font-size: 0.88rem; }
.season__good li { padding-left: 1rem; position: relative; }
.season__good li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }

/* pronóstico */
.forecast { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); padding: 1.1rem 1.2rem 1.2rem; }
.forecast__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; flex-wrap: wrap; }
.forecast__head h3 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.forecast__src { margin: 0; font-size: 0.78rem; color: var(--muted); }
.forecast__days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 0.5rem; overflow-x: auto; margin-top: 0.9rem; padding-bottom: 0.2rem; scroll-snap-type: x proximity; }
.forecast__days li { border-radius: 8px; background: var(--paper); padding: 0.75rem 0.5rem 0.7rem; text-align: center; display: grid; gap: 0.2rem; justify-items: center; scroll-snap-align: start; font-variant-numeric: tabular-nums; }
.forecast__days .d { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.forecast__days .d b { color: var(--ink); }
.forecast__days svg { width: 34px; height: 34px; margin: 0.15rem 0; }
.forecast__days .t { font-weight: 700; }
.forecast__days .t span { color: var(--muted); font-weight: 500; }
.forecast__days .c { font-size: 0.72rem; color: var(--muted); margin-top: -0.2rem; }
.nw { white-space: nowrap; }
.forecast__days .x { font-size: 0.72rem; color: var(--muted); line-height: 1.35; }
.forecast__days li.is-rain { background: #e6eef3; }
.forecast__days li.is-skel span { display: block; width: 70%; height: 10px; border-radius: 4px; background: var(--paper-2); animation: shimmer 1.2s ease-in-out infinite alternate; }
.forecast__days li.is-skel span:nth-child(2) { height: 30px; width: 30px; border-radius: 50%; }
.wx-sun { color: #d99a2b; } .wx-partly { color: #c08a2c; } .wx-cloud, .wx-fog { color: #7d8a95; } .wx-rain { color: var(--sea-deep); } .wx-storm { color: #5b4d8a; }

/* ---------- planificador ---------- */
.booking--page { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto clamp(4rem, 8vw, 7rem); }
.booking__loading { padding: 3rem 1rem; text-align: center; }
.bk__progress { display: flex; gap: 0.3rem; margin-bottom: 1.6rem; overflow-x: auto; }
.bk__progress button { display: inline-flex; align-items: center; gap: 0.55rem; border: 0; background: none; padding: 0.45rem 0.8rem 0.45rem 0.45rem; border-radius: 999px; font-weight: 600; font-size: 0.88rem; color: var(--muted); white-space: nowrap; min-height: 44px; }
.bk__progress button b { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 0.8rem; }
.bk__progress button b svg { width: 0.9rem; height: 0.9rem; }
.bk__progress button.is-done { color: var(--ink); }
.bk__progress button.is-done b { background: var(--sea); border-color: var(--sea); color: #fff; }
.bk__progress button.is-on { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.bk__progress button.is-on b { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bk__progress button[disabled] { cursor: default; opacity: 0.7; }
.bk__progress i { align-self: center; width: 18px; height: 1px; background: var(--line); flex: none; }
.bk__grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.bk__main { min-width: 0; }
.bk__aside { position: sticky; top: 96px; }
.bk__panel { display: grid; gap: 1.4rem; }
.bk__panel.is-enter { animation: stepIn 0.45s var(--ease); }
.bk__h { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; }
.bk__hint { color: var(--muted); font-size: 0.92rem; margin: 0.35rem 0 0; max-width: 62ch; }
.bk__sec { display: grid; gap: 0.6rem; }
.bk__label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.bk__label small { letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 0.8rem; }
.bk__err { color: var(--danger); font-size: 0.9rem; margin: 0; font-weight: 600; }
.bk__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.bk__two { display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.bk__two > div { display: grid; gap: 1.3rem; align-content: start; min-width: 0; }

.field { width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font: inherit; color: var(--ink); }
.field:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(95, 212, 222, 0.35); }
textarea.field { min-height: 96px; resize: vertical; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.fields label { display: grid; gap: 0.35rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.fields label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.fields .full { grid-column: 1 / -1; }
.fields .field { font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink); }
.fields .field::placeholder { color: var(--muted); font-weight: 400; }
.fields label small { display: inline; margin-left: 0.3rem; }
.if-narrow { display: none; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.stepper button { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; }
.stepper button:hover { background: var(--paper); }
.stepper button[disabled] { opacity: 0.3; }
.stepper output { min-width: 2.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper--sm button { width: 36px; height: 36px; }
.stepper--sm output { min-width: 1.8rem; font-size: 0.92rem; }
.guests { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.8rem 1rem; }
.guests strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.guests p { margin: 0; color: var(--muted); font-size: 0.85rem; flex: 1; min-width: 180px; }

.ypick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.ypick button { position: relative; text-align: left; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--white); padding: 0; display: flex; flex-direction: column; transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s var(--ease), opacity 0.2s; }
.ypick button:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ypick img { width: 100%; height: auto; flex: none; aspect-ratio: 4 / 3; object-fit: cover; }
.ypick span.b { padding: 0.7rem 0.8rem 0.8rem; display: grid; gap: 0.15rem; }
.ypick strong { font-family: var(--serif); font-size: 1.3rem; line-height: 1.05; font-weight: 600; }
.ypick small { color: var(--muted); font-size: 0.8rem; }
.ypick em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.ypick em small { font-weight: 500; }
.ypick .tag { position: absolute; top: 0.6rem; left: 0.6rem; background: rgba(13,27,42,0.78); color: var(--paper); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 999px; }
.ypick .ok { position: absolute; top: 0.6rem; right: 0.6rem; width: 28px; height: 28px; border-radius: 50%; background: var(--sea-bright); color: var(--ink); display: none; place-items: center; }
.ypick button.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.ypick button.is-on .ok { display: grid; }
.ypick button.is-small { opacity: 0.45; }
.ypick button.is-small em::after { content: " · too small for your group"; color: var(--danger); font-weight: 600; font-size: 0.78rem; }

.modes { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.modes button { border: 0; background: none; padding: 0.6rem 0.8rem; min-height: 44px; font-weight: 600; font-size: 0.9rem; }
.modes button small { display: block; font-weight: 500; font-size: 0.74rem; color: var(--muted); }
.modes button.is-on { background: var(--ink); color: var(--paper); }
.modes button.is-on small { color: rgba(245,244,239,0.7); }

.cal { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); padding: 0.9rem; }
.cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.cal__head strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.cal__head button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; display: grid; place-items: center; }
.cal__head button:hover { background: var(--paper); }
.cal__head button[disabled] { opacity: 0.3; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 0.3rem 0; font-weight: 700; }
.cal__day { aspect-ratio: 1; min-height: 38px; border: 0; background: none; border-radius: 8px; font-variant-numeric: tabular-nums; font-weight: 600; position: relative; display: grid; place-items: center; font-size: 0.95rem; transition: background 0.15s, color 0.15s; }
.cal__day:hover:not([disabled]) { background: var(--paper); }
.cal__day[disabled] { color: var(--paper-3); cursor: default; }
.cal__day.is-busy { color: var(--muted); text-decoration: line-through; }
.cal__day.is-busy::after, .cal__day.is-limited::after, .cal__day.is-fc::after { content: ""; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; }
.cal__day.is-busy::after { background: var(--danger); }
.cal__day.is-limited::after { background: var(--warn); }
.cal__day.is-on { background: var(--ink); color: var(--paper); }
.cal__day.is-today { box-shadow: inset 0 0 0 1px var(--line); }
.cal__legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.74rem; color: var(--muted); margin-top: 0.6rem; }
.cal__legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.35rem; vertical-align: middle; }
.cal__legend .l-open::before { background: var(--sea); }
.cal__legend .l-limited::before { background: var(--warn); }
.cal__legend .l-busy::before { background: var(--danger); }
.cal__legend .l-ask::before { background: var(--paper-3); }

.wx { border-radius: var(--r-card); padding: 1rem 1.1rem; background: linear-gradient(135deg, #e9f5f5, #f6f1e3); border: 1px solid var(--line); display: grid; gap: 0.6rem; }
.wx.is-rain, .wx.is-storm { background: linear-gradient(135deg, #e3ecf2, #eef0f2); }
.wx__top { display: flex; gap: 0.9rem; align-items: center; }
.wx__top svg { width: 46px; height: 46px; }
.wx__top p { margin: 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.wx__top .alt { margin-top: 0.1rem; font-size: 0.78rem; }
.wx__top strong { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; font-weight: 600; }
.wx__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin: 0; }
.wx__stats div { background: rgba(255,254,251,0.7); border-radius: 6px; padding: 0.45rem 0.5rem; }
.wx__stats dt { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.wx__stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.wx__note { margin: 0; font-size: 0.8rem; color: var(--muted); }
.wx__note strong { color: var(--ink); }
.wx--empty { background: var(--white); color: var(--muted); font-size: 0.9rem; }

.hchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.5rem; }
.hchips button { border: 1px solid var(--line); background: var(--white); border-radius: 8px; padding: 0.55rem 0.6rem; text-align: left; display: grid; gap: 0.05rem; min-height: 64px; transition: border-color 0.2s, box-shadow 0.2s; }
.hchips button strong { font-size: 1.05rem; }
.hchips button span { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.86rem; }
.hchips button small { color: var(--muted); font-size: 0.72rem; }
.hchips button:hover { border-color: var(--ink); }
.hchips button.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #f3fbfb; }
.hchips button.is-late { opacity: 0.45; cursor: not-allowed; background: var(--paper); }
.hchips button.is-late:hover { border-color: var(--line); }
.tnote { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--muted); }
.tnote--anchor { color: var(--sea-deep); font-weight: 600; }
.tpicks {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tpicks button { border: 1px solid var(--line); background: var(--white); border-radius: 8px; padding: 0.55rem 0.6rem; text-align: left; min-height: 58px; display: grid; gap: 0.05rem; }
.tpicks button span { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; gap: 0.3rem; align-items: center; }
.tpicks button span svg { width: 0.9rem; height: 0.9rem; color: var(--warn); }
.tpicks button strong { font-variant-numeric: tabular-nums; }
.tpicks button.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #f3fbfb; }
.tother { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--muted); }
.tother select { max-width: 160px; min-height: 42px; }
.occ { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.occ .chip { min-height: 44px; }

/* menú */
.mtabs { display: flex; gap: 0.2rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.mtabs::-webkit-scrollbar { display: none; }
.mtabs button { position: relative; padding: 0.8rem 1rem; border: 0; background: none; font-weight: 600; white-space: nowrap; color: var(--muted); min-height: 48px; }
.mtabs button::after { content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transition: transform 0.25s var(--ease); }
.mtabs button.is-on { color: var(--ink); }
.mtabs button.is-on::after { transform: scaleX(1); }
.mtabs b { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--sea); color: #fff; font-size: 0.72rem; margin-left: 0.35rem; }
.mpanel { display: grid; gap: 1.3rem; animation: fade 0.3s var(--ease); }
.mpanel__hint { margin: 0; color: var(--muted); font-size: 0.9rem; }
.mgroup { display: grid; gap: 0.6rem; }
.mgroup h4 { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.mgroup > p { margin: -0.3rem 0 0; font-size: 0.84rem; color: var(--muted); }
.mitems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.mitem { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0.8rem; border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.5rem; background: var(--white); align-items: stretch; transition: border-color 0.2s, box-shadow 0.2s; }
.mitem img { width: 92px; height: 100%; min-height: 76px; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.mitem__t { display: grid; gap: 0.2rem; align-content: space-between; min-width: 0; padding: 0.1rem 0.1rem 0.05rem 0; }
.mitem__t strong { line-height: 1.2; font-size: 0.95rem; }
.mitem__t p { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mitem__f { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
.mitem__f em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.mitem.is-on { border-color: var(--sea); box-shadow: 0 0 0 1px var(--sea); background: #f5fbfb; }
.add { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--ink); border-radius: 999px; padding: 0 0.85rem; min-height: 36px; font-weight: 600; font-size: 0.84rem; background: var(--white); }
.add svg { width: 0.9rem; height: 0.9rem; }
.add:hover { background: var(--ink); color: var(--paper); }
.feast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.feast img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
/* los platillos del festín como texto corrido: en pastillas parecían botones para elegir */
.feast__dishes { margin: 0; font-size: 0.9rem; color: var(--muted); }
.feast__dishes strong { color: var(--ink); font-weight: 700; }
/* tarjetas de comida sugerida: decir si ya está agregada o hay que tocarla */
.addhint { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--sea-deep); }
.addhint.is-on { color: #2b7549; }
.addhint svg { width: 1rem; height: 1rem; }
.chip__p { font-weight: 500; opacity: 0.75; margin-left: 0.15rem; }
.plan__est dd { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.plan__est dd small { font-family: var(--sans); font-size: 0.82rem; font-weight: 400; display: block; }
.feast__sizes { display: grid; gap: 0.5rem; }
.feast__sizes button { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; text-align: left; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); padding: 0.75rem 0.9rem; }
.feast__sizes button strong { font-size: 1rem; }
.feast__sizes button em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.feast__sizes button small { grid-column: 1 / -1; color: var(--muted); }
.feast__sizes button.is-on { border-color: var(--sea); box-shadow: 0 0 0 1px var(--sea); background: #f5fbfb; }
.feast__sizes button.is-hint small::after { content: " · fits your group"; color: var(--sea-deep); font-weight: 600; }
.mreq { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; border: 1px dashed var(--line); border-radius: var(--r-card); padding: 0.5rem; background: var(--white); }
.mreq img { width: 92px; height: 70px; object-fit: cover; border-radius: 6px; }
.mreq p { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--muted); }
.mreq.is-on { border-style: solid; border-color: var(--sea); background: #f5fbfb; }
.switch { position: relative; width: 48px; height: 28px; border-radius: 999px; border: 0; background: var(--paper-3); flex: none; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.25s var(--ease); }
.switch[aria-checked="true"] { background: var(--sea); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.mnote { font-size: 0.78rem; color: var(--muted); margin: 0; }
.included-note { display: flex; gap: 0.6rem; align-items: flex-start; background: #eef8f8; border: 1px solid #cde8ea; border-radius: var(--r-card); padding: 0.8rem 0.9rem; font-size: 0.9rem; margin: 0; }
.included-note svg { color: var(--sea-deep); margin-top: 0.2rem; }

/* revisión y envío */
.review { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.review > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 0.8rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--paper-2); align-items: baseline; }
.review > div:last-child { border-bottom: 0; }
.review dt { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.review dd { margin: 0; font-weight: 600; }
.review dd small { display: block; font-weight: 500; color: var(--muted); }
.review button { font-size: 0.84rem; }
.sendbox { display: grid; gap: 0.6rem; }
.sendbox .btn { justify-content: center; min-height: 54px; font-size: 1rem; }
/* Paso 4: en Apple (iPhone, iPad, Mac) iMessage arriba y WhatsApp abajo; en lo demás WhatsApp arriba y SMS abajo */
html.is-apple .sendbox .btn--im { order: -1; }
html:not(.is-apple) .sendbox .btn--im, html.is-apple .sendbox .btn--wa { background: var(--white); color: var(--ink); border-color: var(--line); }
.nextsteps { display: grid; gap: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
.nextsteps li { display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.7rem; padding: 0.45rem 0; font-size: 0.9rem; }
.nextsteps b { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font-size: 0.74rem; }
.bk__done { border: 1px solid #cde8ea; border-radius: var(--r-card); padding: 1rem 1.1rem; background: #eef8f8; font-size: 0.95rem; display: flex; gap: 0.7rem; }
.bk__done svg { color: var(--sea-deep); width: 1.4rem; height: 1.4rem; }

/* tarjeta del viaje */
.trip { border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; box-shadow: var(--shadow); }
.trip__media { position: relative; aspect-ratio: 4 / 3; background: var(--ink); }   /* foto completa del yate (las tarjetas son 4:3) */
.trip__chg { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 1; border: 0; border-radius: 999px; padding: 0.35rem 0.8rem; background: rgba(245, 244, 239, 0.92); color: var(--ink); font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.trip__chg:hover { background: var(--paper); }
.trip__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.trip__media div { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1rem 0.7rem; background: linear-gradient(180deg, transparent, rgba(13,27,42,0.85)); color: var(--paper); }
.trip__media strong { font-family: var(--serif); font-size: 1.6rem; line-height: 1; font-weight: 600; display: block; }
.trip__media small { opacity: 0.8; }
.trip__empty { padding: 1.2rem; }
.trip__empty strong { font-family: var(--serif); font-size: 1.4rem; display: block; }
.trip__empty p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.9rem; }
.trip__body { padding: 0.9rem 1.1rem 1.1rem; display: grid; gap: 0.9rem; }
.trip__rows { margin: 0; display: grid; }
.trip__rows div { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--paper-2); font-size: 0.9rem; }
.trip__rows svg { color: var(--sea-deep); width: 1rem; height: 1rem; }
.trip__rows dd { margin: 0; font-weight: 600; min-width: 0; }
.trip__rows dd small { display: block; font-weight: 500; color: var(--muted); font-size: 0.78rem; }
.trip__rows dt { order: 3; }
.trip__rows .muted { color: var(--muted); font-weight: 500; }
.trip__rows button { font-size: 0.8rem; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; padding: 0.2rem; color: var(--sea-deep); font-weight: 600; }
.trip__wx { display: flex; gap: 0.6rem; align-items: center; font-size: 0.86rem; background: var(--paper); border-radius: 8px; padding: 0.5rem 0.65rem; }
.trip__wx svg { width: 28px; height: 28px; }
.trip__wx small { display: block; color: var(--muted); font-size: 0.74rem; }
.price { margin: 0; display: grid; gap: 0.3rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.price div { display: flex; justify-content: space-between; gap: 1rem; }
.price dt { color: var(--muted); }
.price dd { margin: 0; font-weight: 600; text-align: right; }
.price dd small { display: block; font-weight: 500; color: var(--muted); font-size: 0.74rem; }
.price .total { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.6rem; align-items: baseline; }
.price .total dt { color: var(--ink); font-weight: 700; }
.price .total dd { font-family: var(--serif); font-size: 1.9rem; line-height: 1; font-weight: 600; }
.price .tipline dt, .price .tipline dd { color: var(--muted); font-weight: 500; font-size: 0.82rem; }
.trip__fine { margin: 0; font-size: 0.74rem; color: var(--muted); line-height: 1.45; }
.trip__promise { display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--paper-2); padding-top: 0.8rem; }
.trip__promise li { display: flex; gap: 0.45rem; align-items: flex-start; }
.trip__promise svg { color: var(--sea); width: 0.95rem; height: 0.95rem; margin-top: 0.15rem; }
.bk__bar { display: none; }

/* cotizador lateral (página de yate) */
.quote { border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 1.1rem; box-shadow: var(--shadow); display: grid; gap: 1rem; }
.quote__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.quote__head h2 { font-family: var(--serif); font-size: 1.6rem; line-height: 1; }
.quote__head span { font-size: 0.82rem; color: var(--muted); }
.quote .cal { padding: 0.6rem; border-radius: 8px; }
.quote .cal__day { min-height: 34px; font-size: 0.88rem; }
.quote .hchips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote .hchips button { min-height: 56px; padding: 0.45rem 0.5rem; }
.quote .guests { padding: 0.5rem 0.8rem; }

/* ---------- visor ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(13,27,42,0.96); display: grid; place-items: center; padding: 3rem; animation: fade 0.25s var(--ease); }
.lightbox__fig { margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.lightbox__fig img { max-width: min(92vw, 1400px); max-height: 82vh; object-fit: contain; border-radius: var(--radius); animation: pop 0.35s var(--ease); }
.lightbox__fig figcaption { color: var(--paper); font-size: 0.85rem; opacity: 0.75; }
.lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-ink); background: rgba(255,255,255,0.06); color: var(--paper); display: grid; place-items: center; }
.lightbox button:hover { background: rgba(255,255,255,0.15); }
.lightbox button svg { width: 1.3rem; height: 1.3rem; }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%) rotate(180deg); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- movimiento ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split .w > span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.split.is-in .w > span { transform: none; }
[data-parallax] { will-change: transform; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes shimmer { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.45; } 100% { box-shadow: 0 0 0 18px currentColor; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .split .w > span { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
  .exp-card__media img, .yacht-card__media img, .gallery__item img { transition: none; }
  .hero__video { display: none; }
  .bk__panel, .mpanel, .chart__card { animation: none; }
  .js .monthbar.is-in i { animation: none; }
  .float-cta { transition: opacity 0.2s; transform: none; }
  .float-cta.is-in::after { animation: none; }
}

/* ---------- lugares ---------- */
.place-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.places-page { padding-bottom: clamp(3rem, 6vw, 5rem); }
/* los dos destacados van a doble ancho: con diez lugares, las filas quedan completas */
.place-card--big { grid-column: span 2; }
.place-card--big .place-card__media { aspect-ratio: 8 / 3; }
@media (max-width: 640px) { .place-card--big { grid-column: auto; } .place-card--big .place-card__media { aspect-ratio: 4 / 3; } .place-card--big h3, .place-card--big h2 { font-size: 1.55rem; } }
.place-card--big h3, .place-card--big h2 { font-size: 1.9rem; }
.place-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.place-card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.place-card__media img { width: 100%; height: 100%; object-fit: cover; background-size: cover; transition: transform 0.9s var(--ease); }
.place-card:hover .place-card__media img { transform: scale(1.05); }
.place-card__body { padding-top: 0.9rem; }
.place-card__body .pin-kind { margin: 0 0 0.25rem; }
.place-card h3, .place-card h2 { font-family: var(--serif); font-size: 1.55rem; line-height: 1.1; }
.place-card p { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--muted); }
.place-card__nm { display: block; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--sea-deep); font-variant-numeric: tabular-nums; }
.place__more { display: inline-flex; margin-top: 0.6rem; font-size: 0.86rem; }
.chart__more { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.6rem; font-weight: 600; font-size: 0.86rem; color: var(--sea-deep); text-decoration: none; }
.chart__more svg { width: 1rem; height: 1rem; transition: transform 0.25s var(--ease); }
.chart__more:hover svg { transform: translateX(3px); }

.yhero--place { min-height: 80vh; }
.yhero--place .specs { grid-template-columns: repeat(4, auto); }
.yhero__credit { position: absolute; right: var(--gutter); bottom: 0.7rem; margin: 0; font-size: 0.7rem; color: var(--paper); opacity: 0.7; z-index: 2; max-width: 60ch; text-align: right; }
.cite { font-size: 0.66em; line-height: 0; margin-left: 0.1em; }
.cite a { text-decoration: none; color: var(--sea-deep); font-weight: 700; padding: 0 0.1em; }
.yhero .cite a { color: var(--sea-bright); }
.cite a:hover { text-decoration: underline; }

.psee { padding-block: clamp(3.5rem, 7vw, 6rem); }
/* 6 columnas: 3 o 6 tarjetas van de tres en tres; 4 van en 2 x 2; con 5, la segunda fila lleva dos anchas */
.psee__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.psee__grid article { grid-column: span 2; }
.psee__grid--n4 article, .psee__grid--n5 article:nth-child(n+4), .psee__grid--n2 article { grid-column: span 3; }
.psee__grid article { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.4rem 1.4rem 1.3rem; }
.psee__grid svg { width: 1.6rem; height: 1.6rem; color: var(--sea-deep); }
.psee__grid h3 { font-family: var(--serif); font-size: 1.45rem; margin: 0.7rem 0 0.35rem; line-height: 1.1; }
.psee__grid p { font-size: 0.94rem; margin: 0; }

.pstory { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--paper-2); }
.pstory__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pstory__body { margin-top: 1.4rem; max-width: 64ch; }
.pstory__body p { margin: 0 0 1rem; }
.pnums { border-top: 2px solid var(--ink); padding-top: 1rem; }
.pnums dl { margin: 0.4rem 0 0; }
.pnums dl div { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.pnums dt { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.pnums dd { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--muted); }

.proutes { display: grid; gap: 0.6rem; margin: 1.4rem 0 0; }
.proutes li { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem 1rem; }
.proutes strong { display: block; font-size: 0.95rem; }
.proutes span { display: block; font-size: 0.88rem; color: var(--muted); margin-top: 0.15rem; }
.proutes__cap { margin-top: 2rem; margin-bottom: 0.7rem; }

.xgallery__grid--n3 { grid-template-columns: 2fr 1fr; }
.xgallery__grid--n4 { grid-template-columns: 2fr 1fr; grid-auto-rows: 140px; }
.xgallery__grid--n4 .gallery__item:first-child { grid-column: span 1; grid-row: span 3; }
.xgallery__grid--n3 .gallery__item:first-child { grid-column: span 1; grid-row: span 2; }

.psources { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--muted); }
.psources__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); }
.psources ol, .psources ul { margin: 0.6rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.35rem; }
.psources ol { list-style: decimal outside; }
.psources ol li::marker { color: var(--sea-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.psources ul { list-style: none; padding-left: 0; }
.psources li { overflow-wrap: anywhere; }
.psources a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 2px; }
.psources li:target { background: var(--paper-2); outline: 4px solid var(--paper-2); border-radius: 2px; }

/* ---------- términos ---------- */
.legal { padding-bottom: clamp(4rem, 8vw, 6rem); }
.legal__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.legal__toc { position: sticky; top: 96px; }
.legal__toc ol { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.15rem; counter-reset: sec; }
.legal__toc li { counter-increment: sec; }
.legal__toc a { display: flex; gap: 0.6rem; padding: 0.3rem 0; text-decoration: none; font-size: 0.9rem; color: var(--muted); }
.legal__toc a::before { content: counter(sec); min-width: 1.2rem; font-variant-numeric: tabular-nums; color: var(--sea-deep); font-weight: 700; }
.legal__toc a:hover { color: var(--ink); }
.legal__body { max-width: 70ch; }
.legal__sec { padding: 1.6rem 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.legal__sec:first-child { border-top: 0; padding-top: 0; }
.legal__sec h2 { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.15; display: flex; gap: 0.8rem; align-items: baseline; }
.legal__sec h2 span { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--sea-deep); font-variant-numeric: tabular-nums; min-width: 1.4rem; }
.legal__sec ul { margin: 0.9rem 0 0; padding-left: 2.2rem; display: grid; gap: 0.55rem; }
.legal__sec li { line-height: 1.6; }
.legal__sec li::marker { color: var(--sea-deep); }
.legal__contact { margin-top: 2rem; padding: 1.4rem 1.5rem; background: var(--paper-2); border-radius: var(--r-card); }
.legal__contact p:not(.eyebrow) { margin: 0.5rem 0 1rem; }
.link-inline { color: inherit; text-decoration-color: var(--sea-bright); text-underline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .yacht-grid, .yacht-grid--three, .yacht-grid--four { grid-template-columns: repeat(2, 1fr); }
  .exp-grid, .places, .tips-grid__list { grid-template-columns: repeat(2, 1fr); }
  .place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .psee__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psee__grid article, .psee__grid--n4 article, .psee__grid--n5 article:nth-child(n+4) { grid-column: auto; }
  .psee__grid--n3 article:last-child, .psee__grid--n5 article:last-child { grid-column: 1 / -1; }
  .ylayout { grid-template-columns: minmax(0, 1fr) 360px; }
  .specs { grid-template-columns: repeat(3, auto); }
  .ypick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk__grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .bk__two { grid-template-columns: 1fr; }
  .chart { grid-template-columns: minmax(0, 1fr) 300px; }
  .mitems { grid-template-columns: 1fr; }
  .trust__list { grid-template-columns: repeat(2, 1fr); }
  .trust__list li:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  body { font-size: 1rem; }
  .nav__links, .nav__cta .nav__text { display: none !important; }
  .nav__burger { display: grid; }
  .nav__in { height: 68px; }
  .hero { padding-top: 6rem; min-height: 88svh; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__toggle { top: 80px; }
  .intro__grid, .how__grid, .faq__grid, .xintro__grid, .xday__grid, .xbring__grid { grid-template-columns: 1fr; }
  .xday__map { position: static; }
  .intro__media { margin-top: 1rem; }
  .frame--small { left: auto; right: -4%; bottom: -10%; }
  .section-head { flex-direction: column; align-items: start; gap: 0.8rem; }
  .section-head__note { text-align: left; }
  .promise { grid-template-columns: 1fr; }
  .ylayout { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
  /* el cotizador baja al final de la ficha: un botón fijo lleva a él (site.js lo esconde cuando ya se ve) */
  .to-quote { position: fixed; left: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; gap: 0.5rem; border: 0; border-radius: 999px; padding: 0.85rem 1.25rem 0.85rem 1rem; background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; font-size: 0.95rem; box-shadow: 0 14px 34px -12px rgba(0,0,0,0.55); cursor: pointer; transition: transform 0.4s var(--ease), opacity 0.3s; }
  .to-quote svg { width: 1.25rem; height: 1.25rem; flex: none; }
  .to-quote.is-off { transform: translateY(160%); opacity: 0; pointer-events: none; }
  .quote { scroll-margin-top: 84px; }
  .ycols { grid-template-columns: 1fr; }
  .gallery__grid { grid-auto-rows: 180px; }
  .footer__in { grid-template-columns: 1fr; gap: 1.8rem; }
  .yhero { min-height: 72vh; padding-top: 6rem; }
  .specs, .yhero--exp .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.5rem; }
  .chart { grid-template-columns: 1fr; }
  .chart__stage { min-height: 0; aspect-ratio: 4 / 3.4; }
  .chart__panel { border-left: 0; border-top: 1px solid var(--line); }
  /* en una sola columna la ficha del lugar va justo debajo del mapa, no al final del panel */
  .chart__card { order: -1; }
  .chart__stops { grid-template-columns: 1fr 1fr; gap: 0.15rem 0.6rem; }
  .season__detail { grid-template-columns: 1fr; }
  .xgallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pstory__grid, .psources__grid, .legal__grid { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
  .yhero--place .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xgallery__grid--n3, .xgallery__grid--n4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .xgallery__grid--n3 .gallery__item:first-child, .xgallery__grid--n4 .gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
  .rates--two td { min-width: 0; }
  .bk__grid { grid-template-columns: 1fr; }
  .bk__aside { position: static; }
  .bk__bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; background: rgba(255,254,251,0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom)); justify-content: space-between; align-items: center; gap: 1rem; box-shadow: 0 -10px 30px -20px rgba(13,27,42,0.4); }
  .bk__bar div { line-height: 1.15; }
  .bk__bar small { display: block; color: var(--muted); font-size: 0.74rem; }
  .bk__bar strong { font-family: var(--serif); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
  .bk__bar .btn { min-height: 46px; }
  body.book-page { padding-bottom: 5rem; }
  body.book-page .float-cta { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .if-wide { display: none; }
  .if-narrow { display: inline; }
  .brand { font-size: 0.74rem; letter-spacing: 0.02em; }
  .brand__name { max-width: 9.5rem; line-height: 1.2; }
  .season__table { min-width: 700px; font-size: 0.8rem; }
  .season__table th[scope="row"] { min-width: 108px; padding: 0.5rem 0.6rem; font-size: 0.78rem; white-space: normal; line-height: 1.2; }
  .season__table th[scope="row"] svg { display: none; }
  .chart__tick--lon { display: none; }
  .yacht-grid, .yacht-grid--three, .yacht-grid--four, .exp-grid, .places, .tips-grid__list, .place-grid, .psee__grid { grid-template-columns: 1fr; }
  .yhero__credit { left: var(--gutter); right: var(--gutter); text-align: left; bottom: 0.4rem; }
  .psee__grid article, .psee__grid--n3 article:last-child, .psee__grid--n5 article:last-child { grid-column: auto; }
  .trust__list { grid-template-columns: 1fr; gap: 0.9rem; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
  .gallery__item.is-lead, .gallery__item.is-wide { grid-column: span 2; grid-row: span 2; }
  .gallery__item.is-tall { grid-column: span 1; grid-row: span 2; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .contact-pair .btn { flex: 1 1 calc(50% - 0.3rem); justify-content: center; }
  .ypick { grid-template-columns: 1fr 1fr; }
  .ypick strong { font-size: 1.1rem; }
  .float-cta span { display: none; }
  .float-cta { padding: 0.85rem; }
  .steps li { grid-template-columns: 2.4rem 1fr; }
  .exp-card { width: 78vw; }
  .lightbox { padding: 1rem; }
  .lightbox__prev, .lightbox__next { display: none; }
  .promise ul { grid-template-columns: 1fr; }
  .chart__tabs { grid-template-columns: 1fr 1fr; }
  .chart__stops, .chart--compact .chart__stops { grid-template-columns: 1fr; }
  .chart__stage { aspect-ratio: 1 / 1.05; }
  .chart__zoom { left: 0.6rem; top: auto; bottom: 0.6rem; }
  .chart__zbtn { top: auto; right: 0.6rem; bottom: 2.6rem; }
  .chart__zbtn button { width: 40px; height: 40px; }
  .chart__scale { left: auto; right: 0.6rem; bottom: 0.9rem; width: 40%; text-align: right; justify-items: end; }
  .chart__tick--lat { display: none; }
  .season__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monthbar { grid-template-columns: repeat(6, 1fr); row-gap: 0.9rem; }
  .monthbar__bar { height: 70px; }
  .xgallery__grid .gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
  .fields { grid-template-columns: 1fr; }
  .tpicks { grid-template-columns: 1fr 1fr 1fr; }
  .tpicks button { padding: 0.45rem; }
  .wx__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review > div { grid-template-columns: 5.5rem minmax(0, 1fr) auto; padding: 0.7rem 0.8rem; }
  .feast { grid-template-columns: 1fr; }
  .mitem { grid-template-columns: 80px minmax(0, 1fr); }
  .mitem img { width: 80px; }
  .mreq { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .mreq img { width: 64px; height: 56px; }
  .routes-list li { grid-template-columns: 1fr auto; }
  .routes-list__h { grid-column: 1 / -1; }
  .quote .hchips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- planificador v3: recomendado, inicio, asistente, extras, crucero ---------- */
/* verde semántico solo para "recomendado"; el acento de marca sigue siendo el turquesa */
:root { --rec: #2b7549; --rec-bg: #e7f3eb; --rec-line: #9fcfb1; }
.rec { display: inline-flex; align-items: center; width: max-content; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--rec); background: var(--rec-bg); border-radius: 999px; padding: 0.14rem 0.5rem; margin-bottom: 0.2rem; }
.recnote { display: flex; gap: 0.55rem; align-items: center; margin: 0; font-size: 0.86rem; }
/* punto lleno, no un cuadrito: el contorno parecía una casilla para marcar (prueba con alguien poco tecnológico) */
.recnote i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #2b7549; flex: none; }
.ypick button.is-rec { border-color: var(--rec-line); box-shadow: inset 0 0 0 1px var(--rec-line); }
.ypick button.is-rec.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.hchips button.is-rec, .tpicks button.is-rec { border-color: var(--rec); background: var(--rec-bg); }
.hchips button.is-rec small, .tpicks button.is-rec small { color: var(--rec); font-weight: 700; }
.hchips button.is-rec.is-on, .tpicks button.is-rec.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tpicks small { display: block; font-size: 0.66rem; }
.tpicks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Días recomendados por el clima: verde lleno, que se vea pintado (13 oct 2026); día con lluvia o viento en el
   pronóstico: punto gris arriba a la derecha (los puntos de abajo son disponibilidad) */
.cal__day.is-best { background: #d4ecdc; color: #1f5e39; font-weight: 700; }
.cal__day.is-best:hover:not([disabled]) { background: #bfe2cb; }
.cal__day.is-best.is-on { background: var(--ink); color: var(--paper); }
.cal__day.is-wxbad { color: var(--muted); }
.cal__day.is-wxbad::before { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #7d8a95; }
.cal__day.is-wxbad.is-on { color: var(--paper); }
.cal__legend .l-best::before { width: 10px; height: 10px; background: #bfe2cb; border-radius: 3px; }   /* lleno, sin contorno: con contorno parecía una casilla */
.cal__legend .l-ask::before { display: none; }   /* nota, no un color del calendario (el punto gris es lluvia o viento) */
.cal__legend .l-wx::before { background: #7d8a95; }
.cal__legend .l-season::before { display: none; }
.fold__why { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--rec); font-weight: 600; }
.fold__why svg { width: 0.95rem; height: 0.95rem; }
.mitem.is-rec { border-color: var(--rec-line); }
.mitem.is-rec.is-on { border-color: var(--sea); }
.feast__sizes button.is-rec { border-color: var(--rec); }
.feast__sizes button .rec { grid-column: 1 / -1; }
.mtabs .recdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rec); margin-right: 0.4rem; vertical-align: middle; }
.mtabs button.is-closed { color: var(--muted); opacity: 0.7; }
.mclosed { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--paper-2); border-radius: var(--r-card); padding: 1rem 1.1rem; }
.mclosed svg { width: 1.3rem; height: 1.3rem; color: var(--muted); flex: none; margin-top: 0.15rem; }
.mclosed p { margin: 0 0 0.7rem; }

.extras { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.xchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; }
.xchip { position: relative; text-align: left; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 8px; padding: 0.6rem 0.75rem 0.6rem 2.3rem; display: grid; gap: 0.1rem; min-height: 56px; align-content: center; transition: border-color 0.2s, background 0.2s; }
.xchip:hover { border-color: var(--ink); }
.xchip strong { font-size: 0.9rem; line-height: 1.2; }
.xchip small { color: var(--muted); font-size: 0.76rem; line-height: 1.3; }
.xchip__ok { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 1.5px solid var(--line); display: grid; place-items: center; background: var(--white); }
.xchip__ok svg { width: 0.75rem; height: 0.75rem; opacity: 0; }
.xchip.is-on { border-color: var(--sea); background: #f5fbfb; box-shadow: inset 0 0 0 1px var(--sea); }
.xchip.is-on .xchip__ok { background: var(--sea); border-color: var(--sea); color: #fff; }
.xchip.is-on .xchip__ok svg { opacity: 1; }

.cruisebox { display: grid; gap: 0.6rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.9rem 1rem; }
.cruisebox__f { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.cruisebox label { display: grid; gap: 0.3rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.cruisebox select { min-height: 44px; font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink); }
.cruisebox p { margin: 0; font-size: 0.88rem; }
.cruisebox__warn { color: var(--danger); font-weight: 600; font-size: 0.88rem; margin: 0; }
.cruisenote { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; font-size: 0.88rem; background: var(--rec-bg); border-radius: 8px; padding: 0.6rem 0.75rem; }
.cruisenote svg { width: 1.1rem; height: 1.1rem; color: var(--rec); flex: none; margin-top: 0.1rem; }
.cruisenote.is-late { background: #fbeceb; }
.cruisenote.is-late svg { color: var(--danger); }

details.wx { display: block; }
details.wx > summary { list-style: none; cursor: pointer; }
details.wx > summary::-webkit-details-marker { display: none; }
details.wx[open] > summary { margin-bottom: 0.75rem; }
details.wx .wx__stats { margin-bottom: 0.6rem; }
.wx__more { margin-left: auto; display: none; align-self: center; color: var(--muted); }
.wx__more svg { width: 1.1rem; height: 1.1rem; transform: rotate(90deg); transition: transform 0.25s var(--ease); }
details.wx[open] .wx__more svg { transform: rotate(-90deg); }
.nextwrap summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; padding: 0.4rem 0; list-style: none; }
.nextwrap summary::-webkit-details-marker { display: none; }
.nextwrap summary::after { content: " +"; color: var(--muted); }
.nextwrap[open] summary::after { content: " \2212"; }

.bkstart { display: grid; gap: 1.1rem; max-width: 900px; }
.bkstart.is-enter, .wz.is-enter { animation: stepIn 0.45s var(--ease); }
.bkstart__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.bkstart__opt { text-align: left; display: grid; gap: 0.45rem; align-content: start; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: var(--r-card); padding: 1.3rem 1.3rem 1.2rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.bkstart__opt:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.bkstart__opt:active { transform: translateY(1px); }
.bkstart__opt strong { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; font-weight: 600; }
.bkstart__opt > span:not(.bkstart__ic) { color: var(--muted); font-size: 0.92rem; }
.bkstart__opt em { font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.bkstart__opt em svg { width: 1rem; height: 1rem; }
.bkstart__ic { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--sea-deep); }
.bkstart__ic svg { width: 1.3rem; height: 1.3rem; }
.bkstart__opt.is-main { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bkstart__opt.is-main > span:not(.bkstart__ic) { color: rgba(245, 244, 239, 0.8); }
.bkstart__opt.is-main .bkstart__ic { background: rgba(95, 212, 222, 0.16); color: var(--sea-bright); }
.bkstart__cruise { display: flex; align-items: center; gap: 0.7rem; text-align: left; border: 0; background: var(--paper-2); color: var(--ink); border-radius: var(--r-card); padding: 0.85rem 1rem; font-size: 0.95rem; min-height: 52px; }
.bkstart__cruise svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--sea-deep); }
.bkstart__cruise span { flex: 1; }
/* plan guardado: una sola tarjeta para retomarlo; las opciones de abajo empiezan uno nuevo */
.bkresume { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 1rem; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: var(--r-card); padding: 0.55rem 1.2rem 0.55rem 0.55rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.bkresume:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.bkresume:active { transform: translateY(1px); }
.bkresume img { width: 104px; height: 78px; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.bkresume__b { display: grid; gap: 0.1rem; min-width: 0; }
.bkresume__b small { font-size: 0.82rem; font-weight: 600; color: var(--sea-deep); }
.bkresume__b strong { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; font-weight: 600; }
.bkresume__b > span { color: var(--muted); font-size: 0.9rem; }
.bkresume em { font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.bkresume em svg { width: 1rem; height: 1rem; }
.bkstart__or { margin: 0.3rem 0 -0.5rem; font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.bk__restart { justify-self: start; color: var(--muted); font-size: 0.88rem; }
@media (max-width: 640px) {
  .bkresume { grid-template-columns: 76px minmax(0, 1fr); gap: 0.2rem 0.85rem; padding: 0.5rem 0.9rem 0.6rem 0.5rem; }
  .bkresume img { width: 76px; height: 60px; grid-row: span 2; }
  .bkresume__b strong { font-size: 1.3rem; }
  .bkresume em { grid-column: 2; font-size: 0.92rem; }
}

.wz { max-width: 780px; display: grid; gap: 1.2rem; }
.wz__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem 1rem; }
.wz__head > span { font-size: 0.8rem; color: var(--muted); font-weight: 600; justify-self: end; }
.wz__head i, .bk__mhead i { grid-column: 1 / -1; height: 3px; background: var(--paper-3); border-radius: 3px; position: relative; overflow: hidden; }
.wz__head i::after, .bk__mhead i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--sea); border-radius: 3px; transition: width 0.35s var(--ease); }
.wz__body { display: grid; gap: 1.1rem; }
.wz__body .bk__hint { margin-top: -0.6rem; }
.wz__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.wz__opt { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.8rem; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: var(--r-card); padding: 0.5rem; min-height: 64px; transition: border-color 0.2s; }
.wz__opt img { width: 64px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.wz__ic { width: 64px; height: 52px; border-radius: 6px; background: var(--paper-2); display: grid; place-items: center; color: var(--sea-deep); }
.wz__ic svg { width: 1.5rem; height: 1.5rem; }
.wz__opt strong { display: block; font-size: 0.98rem; line-height: 1.2; }
.wz__opt small { color: var(--muted); font-size: 0.8rem; }
.wz__opt:hover, .wz__tile:hover { border-color: var(--ink); }
.wz__opt.is-on, .wz__tile.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wz__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.wz__tile { text-align: left; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: var(--r-card); padding: 0.9rem 1rem; display: grid; gap: 0.15rem; min-height: 72px; }
.wz__tile strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.wz__tile small { color: var(--muted); font-size: 0.8rem; }
.wz__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wz__chips .chip { min-height: 44px; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.92rem; }
.wz__chips .chip svg { width: 0.95rem; height: 0.95rem; }
.guests--big { padding: 1.1rem 1.2rem; }

.plan { display: grid; gap: 1rem; }
.plan__hero { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--ink); color: var(--paper); aspect-ratio: 16 / 7; }
.plan__hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.plan__hero div { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.2rem 1rem; background: linear-gradient(180deg, transparent, rgba(13, 27, 42, 0.9)); }
.plan__hero p { margin: 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--sea-bright); }
.plan__hero .bk__h { color: var(--paper); }
.plan__hero span { font-size: 0.9rem; opacity: 0.88; }
.plan__rows { margin: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.plan__rows > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.8rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--paper-2); }
.plan__rows > div:last-child { border-bottom: 0; }
.plan__rows dt { display: flex; gap: 0.45rem; align-items: center; align-self: start; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding-top: 0.15rem; }
.plan__rows dt svg { width: 1rem; height: 1rem; color: var(--rec); }
.plan__rows dd { margin: 0; font-weight: 600; }
.plan__rows dd small { display: block; font-weight: 500; color: var(--muted); font-size: 0.82rem; }
.plan__alts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.plan__alts .chip { min-height: 36px; font-size: 0.8rem; padding: 0.35rem 0.75rem; }

.bk__mhead { display: none; }
@keyframes sheetUp { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* portada: día de crucero */
.cruise { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--paper-2); }
.cruise__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cruise__media { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; }
.cruise__media img { width: 100%; height: 100%; object-fit: cover; }
.cruise__text > p { max-width: 52ch; margin: 0.9rem 0 0; }
.cruise__points { display: grid; gap: 0.9rem; margin: 1.5rem 0; }
.cruise__points li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.8rem; }
.cruise__points svg { width: 1.4rem; height: 1.4rem; color: var(--sea-deep); margin-top: 0.1rem; }
.cruise__points strong { display: block; }
.cruise__points span { color: var(--muted); font-size: 0.92rem; }
.cruise__cta { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.section-head__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }

@media (max-width: 960px) {
  .cruise__grid { grid-template-columns: 1fr; }
  body.book-page .page-head { padding-top: 5.4rem; padding-bottom: 0.4rem; }
  body.book-page .page-head .display { font-size: 2rem; }
  body.book-page .page-head__lead { font-size: 0.86rem; margin-top: 0.3rem; }
  body.book-page { padding-bottom: 0; }
  body.bk-planner { padding-bottom: 5.4rem; }
  body.book-page .float-cta { display: none !important; }
  .bk__progress, .bk__aside { display: none; }
  .bk__mhead { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 0.3rem 0.7rem; position: sticky; top: 68px; z-index: 30; background: var(--paper); padding: 0.5rem 0 0.45rem; margin-bottom: 0.7rem; }
  .bk__mhead small { display: block; font-size: 0.7rem; color: var(--muted); font-weight: 600; }
  .bk__mhead strong { font-family: var(--serif); font-size: 1.35rem; line-height: 1.05; font-weight: 600; }
  .bk__back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; }
  .bk__back svg { width: 1rem; height: 1rem; }
  .bk__panel { gap: 1rem; }
  .bk__panel > div:first-child .bk__h { display: none; }
  .bk__hint { margin-top: 0; font-size: 0.86rem; }
  .bk__actions [data-next] { display: none; }
  .bk__bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; padding: 0; background: rgba(255, 254, 251, 0.98); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(13, 27, 42, 0.4); }
  .bk__barin { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.55rem var(--gutter) calc(0.55rem + env(safe-area-inset-bottom)); }
  .bk__sum { border: 0; background: none; color: var(--ink); text-align: left; padding: 0; display: grid; line-height: 1.1; min-height: 44px; align-content: center; }
  .bk__sum small { color: var(--muted); font-size: 0.7rem; }
  .bk__sum strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .bk__sum-c { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; font-weight: 700; color: var(--sea-deep); }
  .bk__sum-c svg { width: 0.85rem; height: 0.85rem; transition: transform 0.25s var(--ease); }
  .bk__bar.is-open .bk__sum-c svg { transform: rotate(180deg); }
  .bk__barin .btn { min-height: 48px; padding-inline: 1.3rem; }
  .bk__sheet { max-height: 62vh; overflow: auto; border-bottom: 1px solid var(--line); background: var(--white); animation: sheetUp 0.28s var(--ease); }
  .bk__sheet-in { padding: 1rem var(--gutter) 1.1rem; display: grid; gap: 0.8rem; }
  .bk__sheet-y { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
  .bk__sheet-y small { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); font-weight: 500; margin-left: 0.4rem; }
  .wx__more { display: inline-flex; }
  details.wx { padding: 0.7rem 0.8rem; }
  details.wx .wx__top svg { width: 34px; height: 34px; }
  details.wx .wx__top strong { font-size: 1.15rem; }
  /* los chips envuelven: una tira con scroll de lado escondía opciones (queja del dueño) */
  .occ { flex-wrap: wrap; }
  .ypick { grid-template-columns: 1fr; gap: 0.5rem; }
  .ypick button { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; }
  .ypick button:hover { transform: none; }
  .ypick img { aspect-ratio: auto; height: 100%; min-height: 84px; }
  .ypick .tag { top: 0.4rem; left: 0.4rem; font-size: 0.58rem; padding: 0.12rem 0.35rem; }
  .ypick .ok { top: 50%; right: 0.7rem; transform: translateY(-50%); }
  .ypick span.b { padding: 0.55rem 2.6rem 0.55rem 0.8rem; align-content: center; }
  .ypick strong { font-size: 1.15rem; }
  .ypick button.is-small em::after { content: " · too small"; }
  .guests { padding: 0.55rem 0.8rem; gap: 0.3rem 0.8rem; }
  .guests p { flex-basis: 100%; min-width: 0; font-size: 0.78rem; }
  /* las horas en dos columnas que envuelven: todas a la vista, nada se corta, y en pesos ("$102,599 MXN") cabe */
  .hchips, .quote .hchips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hchips button span, .hchips button strong { white-space: nowrap; }
  .tpicks--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tother select { max-width: none; flex: 1; }
  .cal { padding: 0.6rem; }
  .cal__day { min-height: 36px; }
  .bk__two { gap: 1rem; }
  .feast { grid-template-columns: 1fr; }
  .feast img { display: none; }
  .mtabs { position: sticky; top: calc(68px + 3.7rem); z-index: 20; background: var(--paper); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .mitems { grid-template-columns: 1fr; }
  .mitem { grid-template-columns: 64px minmax(0, 1fr); padding: 0.45rem; gap: 0.6rem; }
  .mitem img { width: 64px; min-height: 64px; }
  .mitem__t p { -webkit-line-clamp: 1; }
  .mgroup > p { display: none; }
  /* minmax(0, 1fr): con 1fr a secas el ancho mínimo de cada chip ensanchaba el panel 2 px a 360 (y con él las pestañas y la página) */
  .xchips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xchip { min-height: 48px; padding-block: 0.5rem; }
  .xchip small { display: none; }
  .review > div { grid-template-columns: 4.4rem minmax(0, 1fr) auto; padding: 0.6rem 0.8rem; gap: 0.6rem; }
  .sendbox .btn { min-height: 50px; }
  .wz__opts, .bkstart__opts { grid-template-columns: 1fr; }
  .wz__grid { grid-template-columns: 1fr 1fr; }
  .bkstart__opt { padding: 1rem 1.1rem; }
  .bkstart__opt strong { font-size: 1.35rem; }
  .plan__rows > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .plan__hero { aspect-ratio: 4 / 3; }
}

/* fotos de referencia en el paso de envío */
.refs { display: grid; gap: 0.7rem; border: 1px dashed var(--line); border-radius: var(--r-card); padding: 0.9rem 1rem; background: var(--white); }
.refs p { margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--muted); }
.refs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 0.45rem; }
.refs__item { position: relative; margin: 0; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--paper-2); }
.refs__item img { width: 100%; height: 100%; object-fit: cover; }
.refs__item button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(13, 27, 42, 0.78); color: #fff; display: grid; place-items: center; }
.refs__item button svg { width: 0.8rem; height: 0.8rem; }
.refs__add { aspect-ratio: 1; border: 1.5px dashed var(--line); border-radius: 8px; display: grid; place-items: center; align-content: center; gap: 0.25rem; font-size: 0.74rem; font-weight: 700; color: var(--sea-deep); cursor: pointer; text-align: center; padding: 0.3rem; }
.refs__add:hover { border-color: var(--sea); background: #f5fbfb; }
.refs__add svg { width: 1.3rem; height: 1.3rem; }
.refs input:focus-visible + .refs__grid .refs__add { outline: 2px solid var(--sea); outline-offset: 2px; }
.sendbox__cap { margin: 0; font-weight: 700; font-size: 0.92rem; }
/* Aviso del paso 4 sobre los botones de envío; «Send the request» del resumen lo resalta (is-cue) junto con los botones */
.sendbox__head { display: grid; gap: 0.2rem; }
.sendbox__sub { margin: 0; font-size: 0.88rem; color: var(--muted); }
.sendbox__head.is-cue .sendbox__cap { color: var(--sea-deep); }
.sendbox.is-cue .btn { animation: cue 1.1s ease-out 2; }
@keyframes cue { from { box-shadow: 0 0 0 0 rgba(11, 114, 128, 0.5); } to { box-shadow: 0 0 0 12px rgba(11, 114, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .sendbox.is-cue .btn { animation: none; outline: 2px solid var(--sea-deep); outline-offset: 2px; } }
/* SMS en computadora sin Apple: el número y copiar el mensaje (data-smsbox) */
.smsbox { display: grid; gap: 0.6rem; border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.9rem 1rem; background: var(--white); }
.smsbox p { margin: 0; display: grid; gap: 0.15rem; font-size: 0.9rem; }
.smsbox p span { color: var(--muted); }
.smsbox .btn { justify-content: center; }
.smsbox__ok { display: flex !important; gap: 0.4rem; align-items: center; color: var(--rec); font-weight: 600; }
.smsbox__ok[hidden] { display: none !important; }
.smsbox__ok svg { width: 1.1rem; height: 1.1rem; }
/* Paso 4 en computadora: el resumen ya está en la tarjeta de la derecha, que es donde se edita todo */
@media (min-width: 961px) { .rev4, .solo-movil { display: none; } }
@media (max-width: 960px) { .solo-escritorio { display: none; } }
.refs__share { display: grid; gap: 0.5rem; background: var(--paper-2); border-radius: var(--r-card); padding: 0.9rem 1rem; }
.refs__share p:not(.sendbox__cap) { margin: 0; font-size: 0.84rem; color: var(--muted); }
.refs__share .btn { justify-content: center; min-height: 50px; }
.refs__share .btn svg { width: 1.1rem; height: 1.1rem; }

/* ---------- pago y admin ---------- */
.page-head--pay { padding-bottom: 0.5rem; }
.payw { padding-bottom: clamp(4rem, 8vw, 6rem); }
.pay { display: grid; gap: 1.6rem; max-width: 1000px; }
.pay__head { display: grid; gap: 0.8rem; max-width: 62ch; }
.pay__head .lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.pay__ok { width: 3rem; height: 3rem; border-radius: 50%; background: var(--rec-bg); color: var(--rec); display: grid; place-items: center; }
.pay__ok svg { width: 1.5rem; height: 1.5rem; }
.pay__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: 1.4rem; align-items: start; }
.pay__card { border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm); }
.pay__media { aspect-ratio: 16 / 9; background: var(--ink); }
.pay__media img { width: 100%; height: 100%; object-fit: cover; }
.pay__body { padding: 1.1rem 1.3rem 1.3rem; }
.pay__body h2 { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.05; margin: 0.2rem 0 0.8rem; }
.pay__rows { margin: 0; display: grid; }
.pay__rows div { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--paper-2); }
.pay__rows div:last-child { border-bottom: 0; }
.pay__rows svg { width: 1rem; height: 1rem; color: var(--sea-deep); }
.pay__rows dd { margin: 0; font-weight: 600; }
.pay__rows dd small { display: block; font-weight: 500; color: var(--muted); font-size: 0.8rem; }
.pay__side { border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 1.2rem 1.3rem 1.3rem; display: grid; gap: 0.9rem; position: sticky; top: 96px; }
.pay__price .total dd { font-size: 2.1rem; }
.pay__btn { min-height: 54px; font-size: 1.05rem; }
.pay__btn[disabled] { opacity: 0.7; }
.pay--off .contact-pair, .pay--done .contact-pair { margin-top: 0.4rem; }
body.pay-page .float-cta, body.admin-page .float-cta { display: none !important; }

.st { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.15rem 0.55rem; background: var(--paper-2); }
.st--ok { background: var(--rec-bg); color: var(--rec); }
.st--pend { background: #fff4dc; color: #8a5a00; }
.st--off { background: #f2e4e3; color: var(--danger); }
@media (max-width: 960px) {
  .pay__grid { grid-template-columns: 1fr; }
  .pay__side { position: static; }
}

/* ---------- admin: ligas de pago (tres pasos, pensado para el celular) ---------- */
.adm-top { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
/* seis pestañas no caben en el celular: la barra se desliza de lado en vez de ensanchar la página */
.adm-top > .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-top > .seg::-webkit-scrollbar { display: none; }
.adm-top > .seg button { flex: none; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--white); padding: 3px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 0.45rem 1rem; min-height: 40px; font-weight: 600; font-size: 0.9rem; color: var(--muted); transition: background 0.2s, color 0.2s; }
.seg button.is-on { background: var(--ink); color: var(--paper); }
.seg b { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: var(--sea-bright); color: var(--ink); font-size: 0.68rem; margin-left: 0.4rem; }
.seg--full { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.seg--full button { padding-inline: 0.5rem; }
.adm-test { font-size: 0.76rem; font-weight: 700; color: #8a5a00; background: #fff4dc; border-radius: 999px; padding: 0.3rem 0.7rem; cursor: help; }
.adm { max-width: 720px; display: grid; gap: 1.3rem; }
.adm-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 0.35rem 0.7rem; }
.adm-step small { display: block; font-size: 0.7rem; color: var(--muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.adm-step strong { font-family: var(--serif); font-size: 1.6rem; line-height: 1.05; font-weight: 600; }
.adm-step i { grid-column: 1 / -1; height: 3px; background: var(--paper-3); border-radius: 3px; position: relative; overflow: hidden; }
.adm-step i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--sea); border-radius: 3px; transition: width 0.35s var(--ease); }
.adm-back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; }
.adm-back svg { width: 1rem; height: 1rem; }
.adm-sec { display: grid; gap: 0.55rem; }
.adm-row2 { grid-template-columns: 1fr 1fr; gap: 0.7rem; align-items: start; }
.adm-f { display: grid; gap: 0.3rem; }
.adm-f__l { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.adm-f__l small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.adm-f .field, .adm-money .field { font-size: 1rem; }
.adm-f.is-bad .field, .adm-money__row.is-bad .field { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); }
.adm-f__e { font-size: 0.8rem; color: var(--danger); font-weight: 600; }
.adm-warn { color: var(--danger); font-weight: 600; }
.adm-y { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.adm-y button { position: relative; text-align: left; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); color: var(--ink); padding: 0; overflow: hidden; display: grid; transition: border-color 0.2s, box-shadow 0.2s; }
.adm-y button:hover { border-color: var(--ink); }
.adm-y img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--paper-2); }
.adm-y .b { display: grid; gap: 0.1rem; padding: 0.55rem 0.7rem 0.65rem; }
.adm-y strong { font-size: 0.95rem; line-height: 1.15; }
.adm-y small { color: var(--muted); font-size: 0.76rem; }
.adm-y .ok { position: absolute; top: 0.5rem; right: 0.5rem; width: 26px; height: 26px; border-radius: 50%; background: var(--sea-bright); color: var(--ink); display: none; place-items: center; }
.adm-y .ok svg { width: 0.9rem; height: 0.9rem; }
.adm-y button.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.adm-y button.is-on .ok { display: grid; }
.adm-money { display: grid; gap: 0.7rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.9rem 1rem 1rem; }
.adm-money__row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 0.7rem; align-items: center; }
.adm-money__row label { display: grid; gap: 0.1rem; }
.adm-money__row strong { font-size: 0.95rem; }
.adm-money__row small { color: var(--muted); font-size: 0.78rem; }
.adm-money__row .field { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.adm-sum { border-top: 1px solid var(--line); padding-top: 0.6rem; }
.adm-lead { margin: 0; color: var(--muted); font-size: 0.95rem; max-width: 60ch; }
.adm-prev { max-width: 520px; }
.adm-prev .pay__price { margin-top: 0.8rem; border-top: 1px solid var(--paper-2); padding-top: 0.6rem; }
.adm-msg { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.92rem; line-height: 1.5; background: var(--white); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 0.85rem 1rem; margin: 0; max-width: 520px; }
.adm-bar { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0 calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(245, 244, 239, 0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.adm-bar div { display: grid; line-height: 1.15; min-width: 0; }
.adm-bar small { font-size: 0.7rem; color: var(--muted); font-weight: 600; }
.adm-bar strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-bar .btn { min-height: 48px; flex: none; }
.adm-done { max-width: 560px; display: grid; gap: 1rem; }
.adm-done h2 { line-height: 1.05; }
.adm-send { display: grid; gap: 0.6rem; }
.adm-send .btn { justify-content: center; min-height: 52px; font-size: 1rem; }
.adm-send__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.adm-send__row--links { grid-template-columns: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.adm-send__row--links .link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.lk-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lk-head .occ .chip b { font-weight: 700; opacity: 0.7; }
.lk { display: grid; gap: 0.6rem; max-width: 720px; }
.lk-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.9rem 1.1rem 0.8rem; display: grid; gap: 0.45rem; }
.lk-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.7rem; }
.lk-card h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.lk-card header p, .lk-card__meta { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--muted); }
.lk-card__mid { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.lk-card__mid .amt { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lk-card__mid span { font-size: 0.84rem; color: var(--muted); }
.lk-acts { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-top: 0.2rem; }
.lk-acts .btn--text { font-size: 0.86rem; min-height: 40px; display: inline-flex; align-items: center; }
.lk-acts .danger { color: var(--danger); }
.adm-empty { text-align: center; padding: 2.5rem 1.2rem; background: var(--white); border: 1px dashed var(--line); border-radius: var(--r-card); display: grid; gap: 0.5rem; justify-items: center; max-width: 720px; }
.adm-empty strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.adm-empty p { margin: 0; color: var(--muted); }
.adm-login { max-width: 380px; display: grid; gap: 0.8rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem 1.5rem 1.5rem; }
.adm-login h2 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; line-height: 1.05; }
.adm-login p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.adm-login__ic { background: var(--paper-2); color: var(--sea-deep); }
@media (max-width: 640px) {
  .adm-y { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 150px; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding: 0.15rem var(--gutter) 0.4rem; scrollbar-width: none; }
  .adm-y::-webkit-scrollbar { display: none; }
  .adm-y button { scroll-snap-align: start; }
  .adm-row2 { grid-template-columns: 1fr; }
  .adm-money__row { grid-template-columns: minmax(0, 1fr) 120px; }
  .adm-send__row { grid-template-columns: 1fr; }
  .lk-card header { flex-direction: column; }
}

/* ---------- pase de abordar (/pay/ pagada): talón impreso del booking desk ---------- */
.pass { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; width: 100%; max-width: 460px; justify-self: center; }
.pass__top { background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.85rem 1.25rem; }
.pass__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 0.92rem; }
.pass__brand svg { width: 1.25rem; height: 1.25rem; color: var(--sea-bright); flex: none; }
.pass__kind { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sea-bright); white-space: nowrap; }
.pass__main { padding: 1.2rem 1.35rem 1.25rem; }
.pass__concept { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sea-deep); }
.pass__yacht { font-family: var(--serif); font-size: clamp(2rem, 7vw, 2.4rem); font-weight: 600; line-height: 1; margin: 0.25rem 0 1.05rem; }
.pass__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem 1rem; }
.pass__facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pass__facts dd { margin: 0.12rem 0 0; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.pass__facts dd small { display: block; font-weight: 500; font-size: 0.8rem; color: var(--muted); }
.pass__facts .wide { grid-column: 1 / -1; }
.pass__cut { position: relative; border-top: 2px dashed var(--line); margin: 0 1.1rem; }
.pass__cut::before, .pass__cut::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.pass__cut::before { left: calc(-1.1rem - 12px); }
.pass__cut::after { right: calc(-1.1rem - 12px); }
.pass__stub { padding: 1.25rem 1.35rem 1.4rem; display: grid; justify-items: center; gap: 0.65rem; text-align: center; }
.pass__qr { width: min(230px, 72%); height: auto; display: block; }
.pass__ref { margin: 0; display: grid; gap: 0.1rem; }
.pass__ref small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pass__ref span { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.pass__how { margin: 0; font-size: 0.86rem; color: var(--muted); max-width: 32ch; }
.pass__boarded { margin: 0; display: inline-flex; gap: 0.45rem; align-items: center; font-weight: 700; color: var(--rec); background: var(--rec-bg); border-radius: 999px; padding: 0.35rem 0.85rem; }
.pass__boarded svg { width: 1rem; height: 1rem; }
.pay__btn svg { width: 1.15rem; height: 1.15rem; }

/* ---------- escáner del muelle (/admin/, pestaña Escanear): se lee de un vistazo, a pleno sol ---------- */
.scan { max-width: 560px; display: grid; gap: 1rem; }
.scan__intro { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.3rem 1.3rem; display: grid; gap: 0.7rem; }
.scan__intro > svg { width: 2.4rem; height: 2.4rem; color: var(--sea-deep); }
.scan__intro h2 { font-family: var(--serif); font-size: 1.8rem; line-height: 1.05; font-weight: 600; }
.scan__intro p { margin: 0; color: var(--muted); }
.scan__go { min-height: 56px; font-size: 1.05rem; justify-content: center; }
.scan__go svg { width: 1.25rem; height: 1.25rem; }
.scan__manual { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: end; }
.scan__manual .btn { min-height: 48px; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
.scan__cam { position: relative; aspect-ratio: 3 / 4; max-height: 68vh; width: 100%; background: var(--ink); border-radius: 14px; overflow: hidden; }
.scan__cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan__frame { position: absolute; inset: 20% 14%; border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(13, 27, 42, 0.45); outline: 3px solid var(--sea-bright); }
.scan__hint { text-align: center; font-weight: 600; margin: 0; }
.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.95rem; align-items: center; border-radius: 14px; padding: 1.1rem 1.2rem; border: 2px solid; }
.verdict__ic { width: 3.3rem; height: 3.3rem; border-radius: 50%; display: grid; place-items: center; }
.verdict__ic svg { width: 1.8rem; height: 1.8rem; }
.verdict strong { display: block; font-size: 1.45rem; line-height: 1.15; }
.verdict p { margin: 0.25rem 0 0; font-weight: 500; }
.verdict--ok { background: var(--rec-bg); border-color: var(--rec); color: #1c4f33; }
.verdict--ok .verdict__ic { background: var(--rec); color: #fff; }
.verdict--aviso { background: #fff4dc; border-color: var(--warn); color: #5e3e00; }
.verdict--aviso .verdict__ic { background: var(--warn); color: var(--ink); }
.verdict--no { background: #f7e3e1; border-color: var(--danger); color: #6f1712; }
.verdict--no .verdict__ic { background: var(--danger); color: #fff; }
.scan__facts { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.25rem 1.1rem; }
.scan__facts div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.8rem; padding: 0.6rem 0; border-bottom: 1px solid var(--paper-2); }
.scan__facts div:last-child { border-bottom: 0; }
.scan__facts dt { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.scan__facts dd { margin: 0; font-weight: 600; }
.scan__facts dd small { display: block; font-weight: 500; color: var(--muted); }
.scan__acts { display: grid; gap: 0.6rem; }
.scan__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; }
.btn--ok { background: var(--rec); color: #fff; border-color: var(--rec); }
.btn--ok:hover { background: #235f3b; }
@media (max-width: 640px) {
  .pass__main, .pass__stub { padding-inline: 1.1rem; }
  .scan__facts div { grid-template-columns: 5.2rem minmax(0, 1fr); }
  .verdict strong { font-size: 1.3rem; }
}
.pass-col { display: grid; gap: 0.8rem; justify-items: center; }
.pass-col .pay__btn, .pass-col .trip__fine { width: 100%; max-width: 460px; }
/* Punto de encuentro dentro del pase (entre los datos y el corte): foto 16:9 si hay, lugar, muelle y el pin */
.pass__meet { border-top: 1px solid var(--paper-2); margin: 0 1.35rem; padding: 1rem 0 1.25rem; display: grid; gap: 0.5rem; }
.pass__meet-k { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pass__meet-k svg { width: 0.95rem; height: 0.95rem; color: var(--sea-deep); }
.pass__meet-ph { margin: 0.15rem 0 0.1rem; display: grid; gap: 0.3rem; }
.pass__meet-ph img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; background: var(--paper-2); }
.pass__meet-ph figcaption { font-size: 0.68rem; line-height: 1.35; color: var(--muted); }
.pass__meet-n { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.pass__meet-t { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--muted); }
.pass__map { justify-self: start; margin-top: 0.25rem; gap: 0.4rem; }
.pass__map svg { width: 1rem; height: 1rem; }
@media (max-width: 640px) { .pass__meet { margin-inline: 1.1rem; } }
/* Contacto en el pago y la reseña: WhatsApp e iMessage/SMS lado a lado y el correo debajo, a todo lo ancho */
.btn--mail svg { width: 1.2rem; height: 1.2rem; }
.contact-pair .btn--mail { order: 1; }
.pay .contact-pair .btn { flex: 1 1 calc(50% - 0.3rem); justify-content: center; }
.pay .contact-pair .btn--mail { flex-basis: 100%; }
.pay--off .contact-pair, .pay--off .smsbox { max-width: 440px; }
.pay .smsbox { margin-top: 0.2rem; }

/* ================= admin: contabilidad interna (solo para el equipo) ================= */
.adm-acct { background: #fff8e6; border: 1px solid #f0d9a0; border-radius: var(--r-card); padding: 0.9rem 1rem 1rem; display: grid; gap: 0.6rem; }
.adm-acct__t { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #8a5a00; }
.adm-acct__t svg { width: 16px; height: 16px; }
.adm-acct .price div { align-items: flex-start; }
.adm-acct .price dt small { display: block; font-size: 0.74rem; color: var(--muted); font-weight: 400; }
.adm-acct .price .total dd { font-size: 1.35rem; white-space: nowrap; }   /* cifra en pesos + USD chico: en una línea a 390 px */
.adm-acct .price .total dt, .adm-acct .price .total dd { font-weight: 700; color: #6a4500; }
.adm-acct__warn { margin: 0; color: var(--danger); font-size: 0.85rem; font-weight: 600; }
.adm-money__row--main .field { font-weight: 700; }
.acct-tot { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin-bottom: 0.8rem; }
.acct-tot div { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.9rem; display: grid; gap: 0.15rem; }
.acct-tot small { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.acct-tot strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.acct-tot em { font-style: normal; font-size: 0.74rem; color: #8a5a00; }
.acct-row dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.4rem 0.8rem; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.acct-row dt { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.acct-row dd { margin: 0; font-weight: 600; }
.acct-row dd small { font-weight: 400; color: var(--muted); }
.acct-row .lk-acts { align-items: center; gap: 0.8rem; flex-wrap: wrap; }
/* cuentas de los socios: desglose por cobro, diferencia con la tarifa, falta cobrar y balance en la marina */
.acct-regla { max-width: 720px; margin-bottom: 0.8rem; }
.acct-row dd small { display: block; }   /* los pesos debajo de los dólares, no partidos a media cifra */
.acct-cobros { display: grid; gap: 0.35rem; padding: 0.55rem 0.7rem; background: var(--paper-2); border-radius: 10px; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.acct-cobro { display: grid; gap: 0.05rem; }
.acct-cobro strong { font-weight: 700; }
.acct-cobro strong small { font-weight: 400; color: var(--muted); }
.acct-cobro span { color: var(--muted); }
.acct-dif, .acct-falta { margin: 0; font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.acct-dif.is-neg { color: var(--danger); }
.acct-dif.is-pos { color: var(--rec); }
.acct-falta { color: #8a5a00; }
.acct-dock span { font-size: 0.86rem; }
.acct-dockf { display: grid; gap: 0.5rem; padding: 0.7rem; border: 1px solid #f0d9a0; background: #fff8e6; border-radius: 10px; }
.acct-dockf__t { margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #8a5a00; }
.acct-dockf__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.acct-dockf .field { font-size: 1rem; }
.acct-dockf .occ { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ================= extras de una reserva (admin y página de pago) ================= */
/* lista: las ligas de extras van debajo de su reserva, una línea compacta cada una */
.lk-acts .btn--text svg { width: 1rem; height: 1rem; margin-right: 0.2rem; }
.lk-xs { border-top: 1px solid var(--paper-2); padding-top: 0.5rem; display: grid; gap: 0.45rem; }
.lk-xs__t { margin: 0; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.lk-x { background: var(--paper); border-radius: 8px; padding: 0.5rem 0.75rem 0.3rem; display: grid; gap: 0.15rem; }
.lk-x__t { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lk-x__t strong { font-variant-numeric: tabular-nums; }
.lk-x p { margin: 0; font-size: 0.84rem; color: var(--muted); }
.lk-x .lk-acts { margin-top: 0; gap: 0 1rem; }
.lk-aviso { max-width: 720px; margin-bottom: 0.8rem; }
.lk-aviso svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--rec); }
/* vista "Añadir extras": el menú con un contador por platillo */
.xm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.xm__row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.45rem 0.45rem 0.45rem 0.8rem; transition: border-color 0.2s, box-shadow 0.2s; }
.xm__row > div:first-child { display: grid; gap: 0.1rem; min-width: 0; }
.xm__row strong { font-size: 0.92rem; line-height: 1.2; }
.xm__row small { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.xm__row .stepper { flex: none; }
.xm__row.is-on { border-color: var(--sea); box-shadow: 0 0 0 1px var(--sea); background: #f5fbfb; }
.xm__sep { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.5rem; }
/* liga nueva, paso 2: comida y bebida del menú (plegable) */
.adm-food > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.adm-food > summary::-webkit-details-marker { display: none; }
.adm-food > summary::before { content: "+"; font-weight: 700; color: var(--sea); }
.adm-food[open] > summary::before { content: "−"; }
.adm-food[open] > summary { margin-bottom: 0.4rem; }
.adm-food .xm { margin-bottom: 0.9rem; }
.adm-money__row output.field { display: flex; align-items: center; font-variant-numeric: tabular-nums; background: var(--paper); }
.xfree { display: grid; grid-template-columns: minmax(0, 1fr) 130px 40px; gap: 0.5rem; align-items: center; }
.xfree .field { font-size: 1rem; }
.xfree input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.xadd .adm-money > .btn { justify-self: start; }
.xadd .bk__label { flex-wrap: wrap; justify-content: flex-start; gap: 0.15rem 0.6rem; }
.xadd .bk__label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.xadd .btn svg { width: 1rem; height: 1rem; }
/* escáner: extras sin pagar (no impiden abordar) */
.scan__extra { margin: 0; display: flex; gap: 0.6rem; align-items: flex-start; background: #fff4dc; border: 1px solid var(--warn); color: #5e3e00; border-radius: 12px; padding: 0.75rem 0.9rem; }
.scan__extra svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.1rem; }
/* página de pago: lo que lleva la liga de extras, y los extras en el pase de la reserva */
.pay__media--x { aspect-ratio: 16 / 6; }
.pay-x__ref { margin: 0.9rem 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.pay-x__ref span[translate] { color: var(--ink); letter-spacing: 0.06em; }
.pay-x__items dt { color: var(--ink); }
.pay-x { display: grid; gap: 0.55rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.pay-x .eyebrow { margin: 0; }
.pay-x__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; background: var(--paper); border-radius: 8px; padding: 0.6rem 0.75rem; }
.pay-x__t { margin: 0; flex: 1 1 100%; display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.9rem; }
.pay-x__t strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-x__row .btn { margin-left: auto; }
@media (max-width: 640px) {
  .xm { grid-template-columns: 1fr; }
  .xfree { grid-template-columns: minmax(0, 1fr) 100px 40px; }
}

/* ================= menú: platos sin foto (solo texto y descripción) ================= */
.mitem.mitem--text { grid-template-columns: minmax(0, 1fr); padding: 0.8rem 0.95rem; }
.mitem--text .mitem__t { gap: 0.55rem; padding: 0; }
.mitem--text .mitem__t strong { font-size: 1rem; }
.mitem--text .mitem__t p { display: block; -webkit-line-clamp: unset; overflow: visible; margin-top: 0.25rem; font-size: 0.84rem; line-height: 1.45; }
.feast.feast--text { grid-template-columns: minmax(0, 1fr); }

/* ================= extras: extra destacado con foto (bajo pedido) ================= */
.xfeat { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 0.95rem; border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.55rem; background: var(--white); margin-bottom: 0.6rem; transition: border-color 0.2s, box-shadow 0.2s; }
.xfeat img { width: 148px; height: 100%; min-height: 124px; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.xfeat__t { display: grid; gap: 0.6rem; align-content: space-between; min-width: 0; padding: 0.2rem 0.3rem 0.15rem 0; }
.xfeat__tag { display: inline-block; margin-bottom: 0.35rem; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #8a5a00; background: #fff4dc; border-radius: 999px; padding: 0.18rem 0.6rem; }
.xfeat strong { display: block; font-size: 1rem; line-height: 1.2; }
.xfeat p { margin: 0.3rem 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--muted); }
.xfeat__f { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.xfeat__f small { color: var(--muted); font-size: 0.78rem; }
.xfeat.is-on { border-color: var(--sea); box-shadow: 0 0 0 1px var(--sea); background: #f5fbfb; }
.xfeat .add.is-on { background: var(--sea); border-color: var(--sea); color: #fff; }
@media (max-width: 560px) {
  .xfeat { grid-template-columns: 1fr; padding: 0.5rem; }
  .xfeat img { width: 100%; height: 150px; min-height: 0; }
  .xfeat__t { padding: 0 0.3rem 0.3rem; }
}

/* ================= lugares: lo que cuesta llegar en yate ================= */
.pcost { padding-block: clamp(3rem, 6vw, 5rem); background: var(--white); border-block: 1px solid var(--line); }
.pcost__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pcost__head p:not(.eyebrow) { color: var(--muted); max-width: 38ch; margin-top: 1rem; }
.pcost__body { display: grid; gap: 1.4rem; min-width: 0; }
.cmp--routes th small, .cmp--routes td small { display: block; color: var(--muted); font-weight: 400; font-size: 0.8rem; margin-top: 0.15rem; }
.cmp--routes td:nth-child(3) { font-weight: 700; white-space: nowrap; }
.cmp.cmp--routes { min-width: 560px; }
.cmp--routes th, .cmp--routes td { white-space: normal; padding: 0.8rem 0.8rem; }
.cmp--routes td:nth-child(2) { white-space: nowrap; }
.cmp--routes td a { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.cmp--routes td a:hover { color: var(--sea-deep); border-bottom-color: currentColor; }
.pcost__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; }
@media (max-width: 900px) { .pcost__grid { grid-template-columns: 1fr; } }

/* >>> i18n:start */
/* ================= idioma y moneda: selector ================= */
.prefs { position: relative; }
.prefs__btn { display: inline-flex; align-items: center; gap: 0.38rem; height: 40px; padding: 0 0.7rem 0 0.75rem; border: 1px solid var(--line-ink); border-radius: 999px; background: none; color: inherit; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; transition: border-color 0.2s, background 0.2s; }
.prefs__btn svg { width: 1rem; height: 1rem; flex: none; }
.prefs__btn i { font-style: normal; opacity: 0.45; }
.prefs__btn .prefs__chev { width: 0.8rem; height: 0.8rem; opacity: 0.7; transition: transform 0.25s var(--ease); }
.prefs__btn[aria-expanded="true"] .prefs__chev { transform: rotate(180deg); }
.prefs__btn:hover { border-color: currentColor; }
.nav.is-solid .prefs__btn, body:has(.page-head) .nav:not(.is-solid) .prefs__btn { border-color: var(--line); }
.nav.is-solid .prefs__btn:hover, body:has(.page-head) .nav:not(.is-solid) .prefs__btn:hover { border-color: var(--ink); }
.prefs__menu { position: absolute; right: 0; top: calc(100% + 0.6rem); width: 248px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 0.85rem; display: grid; gap: 0.55rem; z-index: 5; }
.prefs__menu[hidden] { display: none; }
.prefs__t { margin: 0; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.prefs__menu .prefs__t + .seg { margin-top: -0.1rem; }
.prefs__langs { list-style: none; margin: 0 0 0.35rem; padding: 0; display: grid; gap: 0.1rem; }
.prefs__langs a { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 6px; text-decoration: none; font-family: var(--sans); font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.prefs__langs a:hover { background: var(--paper); }
.prefs__langs a[aria-current] { background: var(--paper-2); font-weight: 700; }
.flags { display: inline-flex; gap: 3px; flex: none; align-items: center; }
.flags img { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.18); display: block; }
.prefs__langs a > span:not(.flags) { flex: 1; }
.prefs__btn .flags img { width: 17px; height: 11px; }
.prefs-sheet__langs .chip, .footer__langs a { display: inline-flex; align-items: center; gap: 0.4rem; }
.prefs__langs small { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.08em; font-weight: 700; }
.prefs .seg button, .prefs-sheet .seg button { min-height: 38px; font-size: 0.82rem; letter-spacing: 0.06em; }
.seg--full { display: flex; }
.seg--full button { flex: 1; }
.prefs-sheet { display: grid; gap: 0.55rem; padding: 1.2rem 0 0.2rem; }
.prefs-sheet__langs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.prefs-sheet__langs .chip { text-decoration: none; font-family: var(--sans); font-size: 0.9rem; }
.nav__sheet .prefs-sheet a { border-bottom: 0; padding: 0.45rem 0.9rem; }
.footer__prefs { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.9rem 2.5rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line-ink); }
.footer__prefs .prefs__t { color: inherit; opacity: 0.55; margin-right: 0.4rem; }
.footer__langs, .footer__cur { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.1rem; }
.footer__langs a { text-decoration: none; opacity: 0.8; padding: 0.2rem 0; border-bottom: 1px solid transparent; }
.footer__langs a:hover { opacity: 1; color: var(--sea-bright); }
.footer__langs a[aria-current] { opacity: 1; border-bottom-color: var(--sea-bright); }
.footer__cur button { background: none; border: 0; border-bottom: 1px solid transparent; color: inherit; font: inherit; font-weight: 600; letter-spacing: 0.06em; opacity: 0.7; padding: 0.2rem 0; cursor: pointer; }
.footer__cur button:hover { opacity: 1; color: var(--sea-bright); }
.footer__cur button.is-on { opacity: 1; border-bottom-color: var(--sea-bright); }
@media (max-width: 960px) {
  .nav__cta .prefs { display: none; }
}
.nav__links a, .brand__name { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1240px) {
  .nav__links { gap: 1.15rem; }
  .nav__in { gap: 1rem; }
  .nav__cta .nav__text { display: none !important; }
}
@media (min-width: 961px) and (max-width: 1060px) {
  .nav__links { gap: 0.9rem; }
  .nav__links a { font-size: 0.84rem; }
}

/* ================= precios: la moneda va siempre junto al número ================= */
.px { white-space: nowrap; }
.px::after { content: "\00a0" attr(data-cur); font-size: 0.66em; font-weight: 700; letter-spacing: 0.06em; opacity: 0.62; }
.rates .px::after, .cmp .px::after { font-size: 0.72em; }
/* dentro de las fichas de datos el precio no debe heredar el estilo de etiqueta de los <span> */
.specs strong .px, .glance .px, .quote .px { display: inline; font-size: inherit; letter-spacing: inherit; text-transform: none; opacity: 1; margin: 0; }
.specs strong .px::after { font-family: var(--sans); font-size: 0.55em; }

/* ================= logo ================= */
.brand { gap: 0.8rem; }
.brand__mark--logo { width: 56px; height: 56px; border: 0; box-shadow: 0 0 0 1px rgba(245, 244, 239, 0.28); }
.brand__mark--logo svg, .brand__mark.brand__mark--logo svg, .brand__mark--logo img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.nav.is-solid .brand__mark--logo, .nav.is-open .brand__mark--logo, body:has(.page-head) .nav:not(.is-solid) .brand__mark--logo { box-shadow: none; }
.brand__name--logo { display: inline-flex; flex-direction: column; gap: 6px; line-height: 1; max-width: none; }
.brand__word { height: 30px; width: auto; display: block; overflow: visible; }
.brand__word .w1 { fill: currentColor; }
/* "Private Charters" como texto: el trazo dentro del SVG medía menos de 5 px de alto */
.brand__sub { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; white-space: nowrap; color: var(--sea-bright); text-align: justify; text-align-last: justify; margin-right: -0.17em; }
.nav.is-solid .brand__sub, .nav.is-open .brand__sub, body:has(.page-head) .nav:not(.is-solid) .brand__sub { color: var(--sea-deep); }
.footer__brand .brand__mark--logo { width: 60px; height: 60px; }
/* Nombre «Private Charters» + «CABO» (13 oct 2026; antes wordmark SVG «CABO» + «Private Charters») */
.brand__title { font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: 0.01em; text-transform: none; line-height: 1; white-space: nowrap; }
.brand__sub--cabo { letter-spacing: 0.6em; text-align: left; text-align-last: auto; margin-right: 0; }
@media (max-width: 1180px) { .brand__title { font-size: 21px; } }
@media (max-width: 640px) { .brand__title { font-size: 18px; } .brand__sub--cabo { letter-spacing: 0.5em; } }
@media (max-width: 380px) { .brand__title { font-size: 15px; } .brand__sub--cabo { letter-spacing: 0.4em; } }
.pass__brand .pass__logo { width: 1.7rem; height: 1.7rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(245, 244, 239, 0.28); display: block; }
@media (max-width: 640px) { .brand { gap: 0.6rem; } .brand__mark--logo { width: 48px; height: 48px; } .brand__word { height: 26px; } .brand__sub { font-size: 9.5px; } .brand__name--logo { gap: 5px; } }
@media (max-width: 380px) { .brand__word { height: 23px; } .brand__sub { font-size: 8.5px; } .brand__mark--logo { width: 42px; height: 42px; } }
/* ================= fin logo ================= */

/* ================= aceptación de términos antes de pagar ================= */
.accept { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; margin: 1rem 0 0.9rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink); cursor: pointer; }
.accept input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--sea-deep); flex: none; }
.accept a { color: var(--sea-deep); text-underline-offset: 0.15em; }

/* ================= aviso de idiomas junto a los botones de contacto ================= */
.langnote { margin: 0.2rem 0 0.9rem; padding-left: 0.85rem; border-left: 2px solid var(--sea); font-size: 0.88rem; line-height: 1.55; color: var(--muted); max-width: 46em; }
.contact .langnote, .footer__contact .langnote { color: inherit; opacity: 0.82; border-left-color: var(--sea-bright); }
.contact .langnote { margin: 1rem 0 0; }
.sendbox + .langnote, .contact-pair + .langnote { margin-top: 0.9rem; }

/* ================= tipografía para japonés y chino ================= */
/* Los títulos usan Noto Serif (se carga solo en estas páginas) para que se vean igual en cualquier equipo;
   el texto corrido usa la letra del sistema, que ya viene instalada y no pesa. */
:lang(ja) { --serif: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif; --sans: "Manrope", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; }
:lang(zh) { --serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; --sans: "Manrope", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif; }
:lang(ja) body, :lang(zh) body { line-break: strict; word-break: normal; overflow-wrap: anywhere; font-variant-numeric: lining-nums; }
/* los caracteres ocupan el cuadro completo: a igual tamaño se ven mucho más grandes que las letras latinas */
:lang(ja) .display, :lang(zh) .display, :lang(ja) .hero__title, :lang(zh) .hero__title, :lang(ja) .yhero__title, :lang(zh) .yhero__title { letter-spacing: 0; line-height: 1.25; font-weight: 600; text-wrap: balance; }
:lang(ja) .hero__title, :lang(zh) .hero__title { font-size: clamp(2.3rem, 5.4vw, 5rem); max-width: 13em; }
:lang(ja) .yhero__title, :lang(zh) .yhero__title { max-width: 18em; }
:lang(ja) .display, :lang(zh) .display { font-size: clamp(1.75rem, 3.3vw, 3.1rem); max-width: 17em; }
:lang(ja) .display--sm, :lang(zh) .display--sm { font-size: clamp(1.45rem, 2.3vw, 2.1rem); }
:lang(ja) .yhero__title em, :lang(zh) .yhero__title em { line-height: 1.4; max-width: 30em; }
/* japonés: que el corte de línea caiga entre frases y no a media palabra */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .hero__title, :lang(ja) .display, :lang(ja) .lead { word-break: auto-phrase; }
:lang(ja) .eyebrow, :lang(zh) .eyebrow, :lang(ja) .prefs__t, :lang(zh) .prefs__t, :lang(ja) .bk__label, :lang(zh) .bk__label { letter-spacing: 0.06em; }
:lang(ja) em, :lang(zh) em, :lang(ja) i:not([class]), :lang(zh) i:not([class]) { font-style: normal; }
/* <<< i18n:end */






/* ================= blog: índice y artículos (pensado primero para iPhone, 390-440 px) ================= */
.post-head { padding: clamp(6.5rem, 11vw, 8.5rem) 0 clamp(1.2rem, 3vw, 2rem); }
.post-narrow { max-width: 46rem; }
.post-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem; }
.post-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.post-crumbs a:hover { color: var(--sea-deep); border-bottom-color: currentColor; }
.post-head .post-title { font-size: clamp(2.15rem, 6.2vw, 3.7rem); line-height: 1.06; max-width: 20ch; text-wrap: balance; padding-bottom: 0.1em; }
.post-dek { margin: 1rem 0 0; font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--muted); max-width: 58ch; }
/* caja "Ready to book?" al inicio de los artículos que tienen página de venta (paginas_venta.py) */
.post-book { background: var(--paper-2); border-left: 3px solid var(--sea); border-radius: var(--r-card); padding: 0.9rem 1.1rem; margin: 0 0 1.6rem; font-weight: 600; }
.post-book a { color: var(--sea-deep); }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 1.1rem 0 0; font-size: 0.85rem; color: var(--muted); }
.post-hero { margin: 0 auto clamp(1.5rem, 4vw, 2.6rem); max-width: 1100px; }
.post-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-card); display: block; background: var(--paper-2); }

.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.5rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.post-grid > * { width: 100%; max-width: 42rem; }
.post-toc { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); padding: 0.2rem 1rem; }
.post-toc summary { cursor: pointer; padding: 0.75rem 0; font-weight: 700; font-size: 0.92rem; list-style-position: inside; }
.post-toc ol { margin: 0 0 0.9rem; padding-left: 1.2rem; display: grid; gap: 0.45rem; font-size: 0.95rem; }
.post-toc a { color: var(--ink); text-decoration: none; }
.post-toc a:hover { color: var(--sea-deep); text-decoration: underline; }
@media (min-width: 1180px) {
  .post-grid { grid-template-columns: 15rem minmax(0, 42rem); justify-content: center; justify-items: stretch; column-gap: 3.5rem; align-items: start; }
  .post-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; border: 0; background: none; padding: 0; }
  .post-toc summary { pointer-events: none; list-style: none; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .post-toc summary::-webkit-details-marker { display: none; }
  .post-toc ol { padding-left: 0; list-style: none; font-size: 0.9rem; }
}

.post-body { font-size: 1.125rem; line-height: 1.75; color: var(--ink); overflow-wrap: break-word; }
.post-body > p, .post-body > ul, .post-body > ol { margin: 0 0 1.15rem; }
.post-body h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.65rem, 3.2vw, 2.15rem); line-height: 1.15; margin: 2.6rem 0 0.9rem; scroll-margin-top: 90px; text-wrap: balance; }
.post-body h3 { font-family: var(--sans); font-weight: 700; font-size: 1.14rem; line-height: 1.35; margin: 1.9rem 0 0.6rem; scroll-margin-top: 90px; }
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li { margin: 0.35rem 0; }
.post-body li::marker { color: var(--sea-deep); }
.post-body a { color: var(--sea-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body strong { font-weight: 700; }
.post-body blockquote { margin: 1.5rem 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 3px solid var(--sea); color: var(--muted); }
.post-fig { margin: 1.8rem 0; }
.post-fig img, .post-body > p img { width: 100%; height: auto; border-radius: var(--r-card); display: block; background: var(--paper-2); }
.post-table { margin: 1.5rem 0 1.7rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.post-table:focus-visible { outline: 2px solid var(--sea-deep); outline-offset: 2px; }
.post-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.45; }
.post-table th, .post-table td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; }
.post-table thead th { background: var(--paper-2); font-size: 0.8rem; letter-spacing: 0.04em; font-weight: 700; white-space: nowrap; }
.post-table tbody tr + tr td { border-top: 1px solid var(--line); }
.post-table .nw { white-space: nowrap; }

.post-yachts, .post-faq, .post-cta { margin-top: 2.6rem; }
.post-yachts > div { display: grid; gap: 0.7rem; }
.post-yacht { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; align-items: center; padding: 0.55rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); text-decoration: none !important; color: var(--ink) !important; transition: border-color 0.2s, transform 0.2s; }
.post-yacht:hover { border-color: var(--ink); transform: translateY(-1px); }
.post-yacht img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; }
.post-yacht span { display: grid; gap: 0.1rem; line-height: 1.35; }
.post-yacht strong { font-size: 1rem; }
.post-yacht small { color: var(--muted); font-size: 0.82rem; }
.post-yacht em { font-style: normal; font-weight: 700; font-size: 0.92rem; }
@media (min-width: 700px) { .post-yachts > div { grid-template-columns: 1fr 1fr; } }
.post-faq details { border-top: 1px solid var(--line); }
.post-faq details:last-child { border-bottom: 1px solid var(--line); }
.post-faq summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 700; font-size: 1.04rem; line-height: 1.4; list-style: none; position: relative; }
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.85rem; font-size: 1.4rem; font-weight: 400; color: var(--sea-deep); }
.post-faq details[open] summary::after { content: "\2212"; }
.post-faq details p { margin: 0 0 1.1rem; font-size: 1.02rem; }
.post-cta { background: var(--ink); color: var(--paper); border-radius: var(--r-card); padding: clamp(1.4rem, 4vw, 2.2rem); }
.post-cta h2 { margin-top: 0 !important; color: var(--paper); }
.post-cta p { color: rgba(245, 244, 239, 0.86); font-size: 1rem; }
.post-cta__btns { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.post-cta .btn { text-decoration: none !important; }
.post-cta .btn--sun { background: #fff; color: var(--ink) !important; }
.post-cta .btn--ghost { color: var(--paper) !important; border-color: rgba(245, 244, 239, 0.4); }
.post-related { padding-bottom: clamp(3rem, 7vw, 5rem); }
.post-related h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 1.2rem; }
.post-related__list { display: grid; gap: 1rem; }
@media (min-width: 760px) { .post-related__list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; } }

/* tarjetas */
.post-card, .post-feature { display: grid; text-decoration: none; color: var(--ink); border-radius: var(--r-card); }
.post-card[hidden], .post-feature[hidden] { display: none; }
.post-card__img, .post-feature__img { display: block; overflow: hidden; border-radius: var(--r-card); background: var(--paper-2); }
.post-card__img img, .post-feature__img img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.post-card:hover img, .post-feature:hover img { transform: scale(1.03); }
.post-card__txt, .post-feature__txt { display: grid; gap: 0.35rem; padding: 0.85rem 0.1rem 0; }
.post-card__txt small, .post-feature__txt small { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sea-deep); }
.post-card__txt strong { font-family: var(--serif); font-weight: 600; font-size: 1.42rem; line-height: 1.15; }
.post-card__txt span, .post-feature__txt span { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.post-card__txt em, .post-feature__txt em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.post-feature { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.post-feature__txt strong { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.08; text-wrap: balance; }
@media (min-width: 900px) {
  .post-feature { grid-template-columns: 1.35fr 1fr; gap: 2.5rem; align-items: center; }
  .post-feature__txt { padding: 0; gap: 0.6rem; }
  .post-feature__img img { aspect-ratio: 16 / 10; }
}

/* índice */
.blog-head { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.blog-tools { display: grid; gap: 1rem; margin-top: 1.6rem; max-width: 60rem; }
.blog-search { display: grid; gap: 0.4rem; max-width: 30rem; }
.blog-search span { font-size: 0.85rem; font-weight: 700; }
.blog-search input { font: inherit; font-size: 16px; min-height: 48px; padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); }
.blog-search input::placeholder { color: #737d86; }
.blog-search input:focus { outline: 2px solid var(--sea-deep); outline-offset: 1px; border-color: transparent; }
/* los temas envuelven también en celular: la tira con scroll escondía la mitad */
.blog-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.blog-chips .chip { flex: none; cursor: pointer; }
.blog-list { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.blog-grid { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 2rem; } }
.post-credit { margin-top: 0.45rem; font-size: 0.72rem; line-height: 1.4; color: var(--muted); }
.post-body .post-credit a { color: var(--muted); text-decoration: underline; }

/* componentes interactivos de los artículos: [[clima]] [[mapa]] [[checklist]] [[calculadora]] [[video]] */
.post-body .post-wx, .post-body .post-map, .post-body .post-check, .post-body .post-calc, .post-body .post-anim { margin: 2rem 0 2.2rem; }
.post-body .forecast__days, .post-body .calc__list, .post-body .post-map__list, .post-body .post-check ul { list-style: none; padding: 0; margin: 0; }
.post-body .forecast__days li, .post-body .calc__list li, .post-body .post-map__list li, .post-body .post-check li { margin: 0; }
.post-body .forecast { margin-top: 0; }
.post-body .forecast__head h3 { font-size: 1.35rem; margin: 0; }

.post-anim { border-radius: var(--r-card); overflow: hidden; background: var(--ink); }
.post-anim video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post-anim figcaption { padding: 0.7rem 1rem; font-size: 0.85rem; color: var(--paper); background: var(--ink-2); }

.post-check { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); padding: 0.4rem 0.4rem 0.6rem; }
.post-check__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0.8rem 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--sea-deep); }
.post-check__bar button { font: inherit; font-weight: 600; font-size: 0.8rem; color: var(--muted); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0.3rem; }
.post-check li label { display: grid; grid-template-columns: 28px 1fr; gap: 0.7rem; align-items: start; padding: 0.75rem 0.8rem; border-radius: 8px; cursor: pointer; }
.post-check li + li label { border-top: 1px solid var(--paper-2); }
.post-check li label:hover { background: var(--paper); }
.post-check input { appearance: none; width: 26px; height: 26px; margin: 0.1rem 0 0; border: 2px solid var(--sea); border-radius: 7px; display: grid; place-items: center; background: var(--white); cursor: pointer; }
.post-check input::after { content: ""; width: 12px; height: 7px; border: solid var(--white); border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.post-check input:checked { background: var(--sea); }
.post-check input:checked::after { opacity: 1; }
.post-check input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(11, 114, 128, 0.45); }
.post-check input:focus-visible { outline: 2px solid var(--sea-deep); outline-offset: 2px; }
.post-check.is-done .post-check__bar span { color: var(--rec); }

.post-calc { border-radius: var(--r-card); background: var(--ink); color: var(--paper); padding: 1.3rem 1.1rem 1.1rem; }
.post-calc h3 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; margin: 0 0 1rem; color: var(--white); }
.calc__ctl { display: grid; gap: 1rem; margin-bottom: 1.1rem; }
.calc__guests span { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.4rem; }
.calc__guests output { font-size: 1.25rem; font-weight: 700; color: var(--sea-bright); }
.calc__guests input { width: 100%; accent-color: var(--sea-bright); height: 32px; }
.calc__hours { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.calc__hours span { font-size: 0.9rem; font-weight: 600; margin-right: 0.3rem; }
.calc__hours button { font: inherit; font-weight: 700; font-size: 0.95rem; min-width: 56px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line-ink); background: transparent; color: var(--paper); cursor: pointer; }
.calc__hours button.is-on { background: var(--sea-bright); border-color: var(--sea-bright); color: var(--ink); }
.calc__list { display: grid; gap: 0.5rem; }
.calc__list li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.8rem; align-items: center; background: var(--ink-2); border-radius: 8px; padding: 0.8rem 0.9rem; }
.calc__list li.is-best { outline: 2px solid var(--sea-bright); }
.calc__list li.is-off { opacity: 0.55; grid-template-columns: 1fr; }
.calc__name { color: var(--white); text-decoration: none; display: grid; }
.calc__name small { font-size: 0.78rem; color: rgba(245, 244, 239, 0.7); font-weight: 500; }
.calc__pp { text-align: right; font-size: 1.25rem; font-weight: 700; color: var(--sea-bright); display: grid; line-height: 1.1; }
.calc__pp small { font-size: 0.7rem; font-weight: 600; color: rgba(245, 244, 239, 0.7); }
.calc__total { font-size: 0.8rem; color: rgba(245, 244, 239, 0.75); }
.calc__list .rec { grid-column: 1; margin: 0.2rem 0 0; }
.calc__go { grid-column: 2; grid-row: 2 / span 2; justify-self: end; font-size: 0.85rem; font-weight: 700; color: var(--ink); background: var(--paper); border-radius: 999px; padding: 0.55rem 0.9rem; text-decoration: none; white-space: nowrap; }
.calc__none { background: none !important; color: rgba(245, 244, 239, 0.8); padding: 0.4rem 0 !important; }
.calc__list li.is-hidden { display: none; }
.post-body .calc__name, .post-body .calc__name strong { color: var(--white); text-decoration: none; }
.post-body .calc__name strong { font-size: 1.05rem; }
.post-body .calc__go { color: var(--ink); text-decoration: none; }
.post-body .calc__go:hover { background: var(--sea-bright); }
.calc__more { font: inherit; font-weight: 700; font-size: 0.9rem; width: 100%; min-height: 44px; margin-top: 0.6rem; border-radius: 999px; border: 1px solid var(--line-ink); background: transparent; color: var(--paper); cursor: pointer; }
.calc__note { margin: 0.9rem 0 0; font-size: 0.78rem; color: rgba(245, 244, 239, 0.7); }

.post-map { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--white); }
.post-map h3 { font-family: var(--serif); font-size: 1.5rem; margin: 0; padding: 1rem 1.1rem 0.8rem; }
.post-map__canvas { height: 360px; background: #b9d3d6; }
@media (min-width: 760px) { .post-map__canvas { height: 440px; } }
.post-map figcaption { padding: 0.4rem 0.6rem 0.6rem; }
.post-map__note { margin: 0.4rem 0.5rem 0.5rem; font-size: 0.8rem; color: var(--muted); }
.post-map__list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.75rem; align-items: center; padding: 0.65rem 0.5rem; border-top: 1px solid var(--paper-2); }
.post-map__list strong { display: block; font-size: 1rem; }
.post-map__list span { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.post-map__list a { font-size: 0.82rem; font-weight: 700; color: var(--sea-deep); white-space: nowrap; }
.map-num, .map-pin { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--white); background: var(--ink); color: var(--white); font: 700 0.9rem/1 var(--sans); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(13, 27, 42, 0.35); padding: 0; }
.map-num { background: var(--sea-deep); }
.post-map .mapboxgl-popup-content { font: 600 0.9rem/1.3 var(--sans); padding: 0.5rem 0.7rem; border-radius: 8px; }

/* enlaces al blog desde yates, lugares, experiencias e inicio */
.pills--guides .pill { border-radius: 14px; line-height: 1.35; text-align: left; }
.pills--guides .pill svg { flex: none; }
@media (max-width: 640px) { .pills--guides { flex-direction: column; align-items: stretch; } .pills--guides .pill { justify-content: space-between; padding: 0.8rem 1rem; } }
.more-guides { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.home-blog { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.home-blog h2 { margin-bottom: 0.6rem; }
.home-blog__lead { color: var(--muted); max-width: 34rem; margin-bottom: 1.8rem; }
.home-blog .blog-grid { grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 0.4rem; scroll-padding-inline: var(--gutter); }
.home-blog .blog-grid::-webkit-scrollbar { display: none; }
.home-blog .blog-grid > * { scroll-snap-align: start; }
@media (min-width: 900px) { .home-blog .blog-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; overflow: visible; margin-inline: 0; padding: 0; } }
.home-blog__all { margin-top: 2rem; }
.blog-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-card); }

@media (max-width: 640px) {
  .post-body { font-size: 1.0625rem; line-height: 1.72; }
  .post-body h2 { margin-top: 2.2rem; }
  .post-hero { width: 100%; }
  .post-hero img { border-radius: 0; aspect-ratio: 4 / 3; }
  .post-table table { font-size: 0.9rem; }
  .post-table th, .post-table td { padding: 0.65rem 0.6rem; }
  .post-card__txt strong { font-size: 1.32rem; }
}
:lang(ja) .post-body, :lang(zh) .post-body { line-height: 1.9; letter-spacing: 0.01em; }
:lang(ja) .post-body h2, :lang(zh) .post-body h2 { font-size: clamp(1.4rem, 2.8vw, 1.8rem); line-height: 1.4; }
:lang(ja) .post-head .post-title, :lang(zh) .post-head .post-title { font-size: clamp(1.7rem, 4.6vw, 2.8rem); line-height: 1.3; max-width: 24em; }
/* ---------- portada D (12 oct 2026): hero de revista, barra de temas, bento, colecciones, temas y archivo ---------- */
.sec-h { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
.sec-p { margin: 0.5rem 0 0; color: var(--muted); max-width: 56ch; }
/* hero a pantalla completa con la historia de portada; el velo solo oscurece abajo para que la roca conserve su color */
.mag-hero { position: relative; min-height: 92svh; display: grid; align-content: end; color: var(--paper); background: var(--ink); isolation: isolate; overflow: hidden; padding: 7rem var(--gutter) clamp(1.8rem, 4vw, 3rem); }
.mag-hero__media { position: absolute; inset: 0; z-index: -2; }
.mag-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: hero-in 2.2s var(--ease) both; }
@keyframes hero-in { from { transform: scale(1.06); } to { transform: none; } }
.mag-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,27,42,0.22) 0%, rgba(13,27,42,0) 26%, rgba(13,27,42,0) 48%, rgba(13,27,42,0.5) 72%, rgba(13,27,42,0.9) 100%); }
.mag-hero__in { width: min(100%, var(--wrap)); margin-inline: auto; display: grid; gap: 2.2rem; align-items: end; }
.mag-hero h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(3.4rem, 9vw, 7.6rem); max-width: 10ch; margin: 0 0 1rem; text-wrap: balance; }
:lang(ja) .mag-hero h1, :lang(zh) .mag-hero h1 { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.2; max-width: 14ch; }
.mag-hero__lead { font-size: clamp(1.02rem, 1.3vw, 1.2rem); max-width: 46ch; margin: 0; opacity: 0.92; line-height: 1.5; }
.cover { display: grid; gap: 0.55rem; padding: 1.3rem 1.4rem 1.4rem; border: 1px solid rgba(245,244,239,0.22); border-radius: var(--r-card); background: rgba(13,27,42,0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-decoration: none; color: var(--paper); max-width: 34rem; transition: background 0.2s, border-color 0.2s; }
.cover:hover { background: rgba(13,27,42,0.74); border-color: rgba(245,244,239,0.45); }
@media (prefers-reduced-transparency: reduce) { .cover { background: rgba(13,27,42,0.92); backdrop-filter: none; } }
.cover small { font-size: 0.8rem; font-weight: 700; color: var(--paper); }
.cover strong { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; text-wrap: balance; }
:lang(ja) .cover strong, :lang(zh) .cover strong { line-height: 1.3; }
.cover p { margin: 0; font-size: 0.95rem; line-height: 1.5; opacity: 0.92; }
.cover em { font-style: normal; font-size: 0.82rem; opacity: 0.94; }
@media (max-width: 640px) { .cover p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
.cover span.link { margin-top: 0.3rem; color: var(--paper); border-bottom-color: var(--sea-bright); align-self: start; justify-self: start; }
@media (min-width: 960px) { .mag-hero__in { grid-template-columns: 1.2fr 1fr; } .cover { justify-self: end; } }
/* barra pegajosa: temas (enlaces) con conteo y buscador */
.mag-tools { position: sticky; top: 0; z-index: 20; background: rgba(245,244,239,0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.blog-coll .mag-tools, .blog-all .mag-tools { border-top: 1px solid var(--line); }
.mag-tools__in { display: grid; gap: 0.7rem; padding: 0.75rem 0; }
.mag-tools__chips { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.mag-tools__chips::-webkit-scrollbar { display: none; }
.mag-tools .chip { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; text-decoration: none; color: var(--ink); }
.mag-tools .chip small { font-size: 0.72rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.mag-tools .chip.is-on { color: var(--paper); }
.mag-tools .chip.is-on small { color: rgba(245,244,239,0.8); }
.mag-search { position: relative; }
.mag-search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; min-height: 44px; padding: 0.55rem 1rem 0.55rem 2.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); }
.mag-search input::placeholder { color: #6b747c; }
.mag-search input:focus { outline: 2px solid var(--sea-deep); outline-offset: 1px; border-color: transparent; }
.mag-search label svg { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; color: var(--muted); pointer-events: none; }
.srch { position: absolute; left: 0; right: 0; top: calc(100% + 0.4rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 0.4rem; z-index: 30; max-height: 60vh; overflow: auto; }
.srch p { margin: 0; padding: 0.6rem 0.8rem; font-size: 0.85rem; color: var(--muted); }
.srch a { display: grid; gap: 0.1rem; padding: 0.6rem 0.8rem; border-radius: 6px; text-decoration: none; color: var(--ink); }
.srch a:hover, .srch a:focus-visible { background: var(--paper); }
.srch a strong { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.srch a small { font-size: 0.74rem; color: var(--muted); }
@media (min-width: 900px) { .mag-tools__in { grid-template-columns: minmax(0, 1fr) 20rem; align-items: center; } .mag-search { order: 2; } .mag-tools__chips { order: 1; margin: 0; padding: 0; } }
/* bento de 7 piezas destacadas: texto sobre scrim, extracto al pasar el cursor (siempre en la grande; nunca en táctil) */
.bento { padding: clamp(2.2rem, 5vw, 3.5rem) 0 0; }
.bento .sec-h { margin-bottom: 1.4rem; }
.bento__grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
.bt-tile { position: relative; display: block; border-radius: var(--r-card); overflow: hidden; background: var(--ink); color: var(--paper); text-decoration: none; min-height: 240px; isolation: isolate; }
.bt-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 0.22s var(--ease); }
.bt-tile:hover img, .bt-tile:focus-visible img { transform: scale(1.02); }
.bt-tile__body { position: absolute; inset: auto 0 0 0; padding: 4.5rem 1.2rem 1.2rem; background: linear-gradient(180deg, rgba(13,27,42,0) 0%, rgba(13,27,42,0.62) 34%, rgba(13,27,42,0.92) 100%); display: grid; gap: 0.3rem; }
.bt-tile small { font-size: 0.78rem; font-weight: 700; color: var(--paper); }
.bt-tile strong { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.1; text-wrap: balance; }
:lang(ja) .bt-tile strong, :lang(zh) .bt-tile strong { line-height: 1.3; }
.bt-tile em { font-style: normal; font-size: 0.76rem; opacity: 0.85; }
.bt-tile__ex { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s var(--ease), opacity 0.25s; opacity: 0; }
.bt-tile__ex p { overflow: hidden; margin: 0; font-size: 0.92rem; line-height: 1.45; opacity: 0.92; }
.bt-tile:hover .bt-tile__ex, .bt-tile:focus-visible .bt-tile__ex { grid-template-rows: 1fr; opacity: 1; }
.bt-tile--hero { min-height: 420px; }
.bt-tile--hero strong { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.bt-tile--hero .bt-tile__ex { grid-template-rows: 1fr; opacity: 1; }
@media (hover: none) { .bt-tile__ex { display: none; } .bt-tile--hero .bt-tile__ex { display: grid; } }
@media (min-width: 640px) { .bento__grid { grid-template-columns: repeat(2, 1fr); } .bt-tile--hero, .bt-tile--wide { grid-column: span 2; } }
@media (min-width: 1000px) { .bento__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 1rem; } .bt-tile { min-height: 0; } .bt-tile--hero { grid-column: span 2; grid-row: span 2; min-height: 0; } .bt-tile--tall { grid-row: span 2; } .bt-tile--wide { grid-column: span 2; } }
/* filas con desplazamiento lateral dentro del contenedor: asoma la siguiente tarjeta y se desvanece el borde */
.colls { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.colls__row, .strip__row { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.8rem; scrollbar-width: thin; margin-top: 1.6rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); }
.coll { flex: none; width: calc((100% - 0.3 * 1.2rem) / 1.3); scroll-snap-align: start; }
.coll__cover { display: block; border-radius: var(--r-card); overflow: hidden; background: var(--paper-2); position: relative; }
.coll__cover img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.22s var(--ease); }
.coll:hover .coll__cover img { transform: scale(1.02); }
.coll h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; line-height: 1.05; margin: 0.9rem 0 0.4rem; }
.coll h3 a { text-decoration: none; color: var(--ink); }
.coll ul { display: grid; }
.coll li { border-top: 1px solid var(--line); }
.coll li a { display: block; padding: 0.5rem 0; font-size: 0.9rem; line-height: 1.35; text-decoration: none; color: var(--ink); }
.coll li a:hover { color: var(--sea-deep); }
.coll li:last-child a { font-weight: 600; color: var(--sea-deep); }
@media (min-width: 640px) { .coll { width: calc((100% - 2.3 * 1.2rem) / 3.3); } }
@media (min-width: 1240px) { .colls__row { overflow: visible; -webkit-mask-image: none; mask-image: none; } .coll { width: calc((100% - 4 * 1.2rem) / 5); } }
.strip { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.strip .g-card { flex: none; width: calc((100% - 0.3 * 1.2rem) / 1.3); scroll-snap-align: start; }
@media (min-width: 640px) { .strip .g-card { width: calc((100% - 1.5 * 1.2rem) / 2.5); } }
@media (min-width: 1000px) { .strip .g-card { width: calc((100% - 3.5 * 1.2rem) / 4.5); } }
/* lo primero que preguntan */
.first { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.first ol { counter-reset: n; display: grid; border-top: 1px solid var(--line); margin-top: 1.4rem; }
.first li { counter-increment: n; border-bottom: 1px solid var(--line); }
.first li a { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.9rem; align-items: baseline; padding: 0.95rem 0; text-decoration: none; color: var(--ink); }
.first li a::before { content: counter(n, decimal-leading-zero); font-family: var(--serif); font-size: 1.3rem; color: var(--sea-deep); font-variant-numeric: tabular-nums; }
.first li strong { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.15; }
.first li a:hover strong { color: var(--sea-deep); }
.first li span { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
@media (min-width: 900px) { .first ol { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
/* tarjetas de la rejilla (temas, colecciones y archivo) */
.g-card { display: grid; }
.g-card__a { display: grid; gap: 0.75rem; align-content: start; text-decoration: none; color: var(--ink); }
.g-card__img { display: block; border-radius: var(--r-card); overflow: hidden; background: var(--paper-2); }
.g-card__img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.22s var(--ease); }
.g-card:hover img { transform: scale(1.02); }
.g-card__txt { display: grid; gap: 0.3rem; }
.g-card small { font-size: 0.76rem; font-weight: 600; color: var(--sea-deep); }
.g-card strong { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.15; }
:lang(ja) .g-card strong, :lang(zh) .g-card strong { line-height: 1.35; font-size: 1.2rem; }
.g-card:hover strong { color: var(--sea-deep); }
.g-card__ex { color: var(--muted); font-size: 0.93rem; line-height: 1.5; }
.g-card em { font-style: normal; font-size: 0.76rem; color: var(--muted); }
.all__grid { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 640px) { .all__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .all__grid { grid-template-columns: repeat(3, 1fr); gap: 2.4rem 2rem; } .g-card--wide { grid-column: span 2; } .g-card--wide .g-card__img img { aspect-ratio: 2 / 1; } .g-card--wide strong { font-size: 1.8rem; } }
/* enlace al archivo y CTA sobrio */
.all-link { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 4rem); }
.all-link__in { display: grid; gap: 1rem; align-items: center; border-top: 1px solid var(--line); padding-top: clamp(1.6rem, 4vw, 2.6rem); }
.all-link p { margin: 0.3rem 0 0; color: var(--muted); max-width: 48ch; }
.all-link__cats { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-top: 0.8rem; font-size: 0.9rem; }
.all-link__cats a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.all-link__cats a:hover { border-bottom-color: var(--ink); }
.all-link__cats a small { color: var(--muted); margin-left: 0.25rem; }
@media (min-width: 900px) { .all-link__in { grid-template-columns: 1fr auto; } }
.cta-soft { border-top: 1px solid var(--line); padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--paper-2); }
.cta-soft__in { display: grid; gap: 1.6rem; align-items: center; }
.cta-soft h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; margin: 0 0 0.6rem; }
.cta-soft p { margin: 0; color: var(--muted); max-width: 48ch; }
.cta-soft__btns { display: flex; flex-wrap: wrap; gap: 0.7rem; }
@media (min-width: 900px) { .cta-soft__in { grid-template-columns: 1fr auto; } }
/* páginas de tema, colección y archivo */
.col-head { padding: clamp(6.5rem, 11vw, 8.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.col-head__in { display: grid; gap: 1.6rem; align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--sea-deep); border-bottom-color: currentColor; }
.col-head h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 0.98; margin: 0; max-width: 12ch; text-wrap: balance; }
:lang(ja) .col-head h1, :lang(zh) .col-head h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.25; }
.col-head__intro { margin: 1rem 0 0; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.55; color: var(--text); max-width: 56ch; }
.col-head__n { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
.col-head__sale { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.col-head__img { border-radius: var(--r-card); overflow: hidden; background: var(--paper-2); }
.col-head__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; max-height: 58vh; }
@media (min-width: 960px) { .col-head__in { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } .col-head__img img { aspect-ratio: 5 / 4; } }
.col-grid { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem); }
.pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; margin-top: clamp(2rem, 5vw, 3rem); }
.pages a, .pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 0.9rem; font-weight: 600; }
.pages a:hover { border-color: var(--ink); }
.pages [aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pages .is-off { color: var(--muted); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .mag-hero__media img { animation: none; } .bt-tile img, .g-card__img img, .coll__cover img, .bt-tile__ex, .cover { transition: none; } }
/* venta en artículos (20 oct 2026, blog_venta.py): caja después del primer párrafo y barra fija en celular */
.post-sell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.2rem; margin: 0.2rem 0 1.6rem; padding: 0.95rem 1.1rem; background: var(--paper-2); border-left: 3px solid var(--sea); border-radius: var(--r-card); }
.post-sell__txt { flex: 1 1 17rem; margin: 0; font-size: 0.95rem; line-height: 1.45; }
.post-sell__txt strong { display: block; font-size: 1.02rem; }
.post-sell__txt span:not(.px) { color: var(--muted); }
.post-body .post-sell .btn { flex: none; color: #fff; text-decoration: none; }
.sell-bar { display: none; }
@media (max-width: 960px) {
  body.post-page { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
  /* la barra sale a los 15 s de navegar en el blog (js/site.js, sessionStorage: cuenta desde el primer artículo de la
     visita); antes se ve el botón de chat de siempre, y al salir la barra el chat pasa a la barra (dueño, 20 oct 2026) */
  body.post-page.sell-on .float-cta { display: none !important; }
  .sell-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; align-items: center; gap: 0.6rem; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(255, 254, 251, 0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(13, 27, 42, 0.4);
    transform: translateY(110%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 0.6s var(--ease), opacity 0.4s, visibility 0s linear 0.6s; }
  .sell-bar.is-shown { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition: transform 0.6s var(--ease), opacity 0.4s, visibility 0s; }
  .sell-bar__txt { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.86rem; line-height: 1.3; color: var(--muted); }
  .sell-bar__txt strong { display: block; font-size: 0.95rem; color: var(--ink); }
  .sell-bar__sep { display: none; }
  .sell-bar .btn { flex: none; }
  .sell-bar__chat { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; }
  .sell-bar__chat svg { width: 1.45rem; height: 1.45rem; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .sell-bar, .sell-bar.is-shown { transform: none; transition: opacity 0.2s, visibility 0s; }
}
/* ================= fin blog ================= */

/* ================= reseñas verificadas ================= */
/* /review/ (js/review.js): estrellas, texto, consentimiento y gracias */
.rv { max-width: 720px; }
.rv-who { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline; margin: 0; font-size: 0.86rem; color: var(--muted); }
.rv-who strong { color: var(--ink); font-size: 0.95rem; }
.rv-form { display: grid; gap: 1.1rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.3rem 1.3rem; box-shadow: var(--shadow-sm); }
.rv-form .accept { margin: 0; }
.rv-rate { border: 0; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.rv-pick { display: flex; gap: 0.35rem; }
.rv-pick button { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--paper-3); transition: color 0.15s, border-color 0.15s, background 0.15s; touch-action: manipulation; }
.rv-pick button svg { width: 30px; height: 30px; }
.rv-pick button:hover { border-color: var(--ink); }
.rv-pick button.is-on { color: var(--warn); border-color: #ecc98a; background: #fff8ea; }
.rv-hint { margin: 0; font-size: 0.85rem; color: var(--muted); min-height: 1.4em; }
.rv-f { display: grid; gap: 0.4rem; }
.rv-f textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.rv-count { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.78rem; color: var(--muted); }
.rv-count b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.rv-count b.is-ok { color: var(--rec); }
.rv-stars { display: inline-flex; gap: 2px; color: var(--warn); }
.rv-stars i { display: inline-flex; color: var(--paper-3); }
.rv-stars i.is-on { color: var(--warn); }
.rv-stars svg { width: 1.1rem; height: 1.1rem; }
.rv-mine { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; display: grid; gap: 0.5rem; }
.rv-mine blockquote { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.rv-mine figcaption { font-size: 0.86rem; color: var(--muted); font-weight: 600; }
.rv-google { background: var(--rec-bg); border: 1px solid var(--rec-line); border-radius: 12px; padding: 1rem 1.2rem; display: grid; gap: 0.3rem; }
.rv-google p { margin: 0; }
.rv-google__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.rv-reply { border-left: 3px solid var(--sea); padding: 0.2rem 0 0.2rem 0.9rem; }
.rv-reply p { margin: 0.2rem 0 0; }
/* pase: botón de reseña */
.pay__side [data-review-link] svg { width: 1.15rem; height: 1.15rem; }
/* ficha del yate: "What guests say" (lo hornea resenas_publicar.py, sin JavaScript) */
.yrev__sum { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: -0.3rem 0 1.1rem; font-weight: 600; color: var(--ink); }
.yrev__sum .yrev__stars { font-size: 1.15rem; }
.yrev__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.yrev__item { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.yrev__stars { color: var(--warn); letter-spacing: 0.08em; font-size: 1.05rem; line-height: 1; }
.yrev__item blockquote { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.yrev__item blockquote p { margin: 0; }
.yrev__item figcaption { margin-top: auto; font-size: 0.84rem; color: var(--muted); }
.yrev__item figcaption strong { color: var(--ink); }
.yrev__ok { display: inline-block; margin-left: 0.3rem; color: var(--rec); font-weight: 600; }
.yrev__reply { background: var(--paper); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.88rem; }
.yrev__reply strong { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
.yrev__reply p { margin: 0; }
.yrev__note { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--muted); }
/* admin: pestaña Reseñas */
.rv-adm-aviso { display: flex; gap: 0.7rem; align-items: flex-start; background: #fff4dc; border: 1px solid #ecc98a; border-radius: var(--r-card); padding: 0.8rem 1rem; margin-bottom: 1rem; max-width: 820px; }
.rv-adm-aviso > svg { color: #8a5a00; margin-top: 0.2rem; }
.rv-adm-aviso p { margin: 0 0 0.3rem; font-size: 0.9rem; }
.rv-card__st { color: var(--warn); letter-spacing: 0.04em; }
.rv-card__txt { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.rv-card__reply { background: var(--paper); border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.88rem; }
.rv-card__reply p { margin: 0.15rem 0 0; }
.rv-card__form { display: grid; gap: 0.5rem; }
@media (max-width: 640px) {
  .rv-form { padding: 1rem; }
  .rv-pick button { width: 48px; height: 48px; }
  .rv-form .fields { grid-template-columns: 1fr; }
}
/* ================= fin reseñas ================= */

/* ================= planificador v4: pasos progresivos y compactos (js/booking.js, .bk--v4) ================= */
/* cabecera: volver (solo celular) y progreso de 4 segmentos */
.bk__top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; max-width: 620px; }
.bk__top .bk__back { display: none; }
.bk__seg { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.bk__seg button { border: 0; background: none; padding: 0.3rem 0 0.2rem; min-height: 44px; display: grid; gap: 0.4rem; align-content: center; text-align: left; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.bk__seg button i { display: block; height: 4px; border-radius: 4px; background: var(--paper-3); transition: background 0.3s; }
.bk__seg button span { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk__seg button span svg { width: 0.85rem; height: 0.85rem; color: var(--sea-deep); flex: none; }
.bk__seg button.is-done { color: var(--ink); }
.bk__seg button.is-done i { background: var(--sea); }
.bk__seg button.is-on { color: var(--ink); font-weight: 700; }
.bk__seg button.is-on i { background: var(--ink); }
.bk__seg button[disabled] { cursor: default; }
.bk--v4 .bk__panel { gap: 1.3rem; }
.bk--v4 .bk__q { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.bk--v4 .bk__label > span { letter-spacing: inherit; }

/* paso 1: filas compactas de yate */
.ylist { display: grid; gap: 0.5rem; }
.yrow { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) 28px; gap: 0.85rem; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); color: var(--ink); padding: 0.5rem 0.8rem 0.5rem 0.5rem; min-height: 80px; transition: border-color 0.2s, box-shadow 0.2s; }
.yrow:hover { border-color: var(--ink); }
.yrow__img { position: relative; display: block; width: 84px; height: 64px; }
.yrow__img img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--paper-2); }
.yrow__img .tag { position: absolute; left: 0.25rem; bottom: 0.25rem; background: rgba(13, 27, 42, 0.78); color: var(--paper); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1rem 0.35rem; border-radius: 999px; }
.yrow__b { display: grid; gap: 0.1rem; min-width: 0; }
.yrow__b strong { font-family: var(--serif); font-size: 1.25rem; line-height: 1.05; font-weight: 600; }
.yrow__b small { color: var(--muted); font-size: 0.8rem; }
.yrow__b em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.yrow__b em small { font-weight: 500; }
.yrow__b .rec { margin-bottom: 0.1rem; }
.yrow__no { color: var(--danger) !important; font-weight: 600; }
.yrow__ok { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: transparent; background: var(--white); }
.yrow__ok svg { width: 0.9rem; height: 0.9rem; }
.yrow.is-rec { border-color: var(--rec-line); }
.yrow.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.yrow.is-on .yrow__ok { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.yrow.is-small { opacity: 0.5; cursor: not-allowed; }
.yrow.is-small:hover { border-color: var(--line); }
.yall { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; border: 1px dashed var(--line); background: transparent; color: var(--ink); border-radius: var(--r-card); padding: 0.7rem 1rem; min-height: 48px; font-weight: 700; font-size: 0.92rem; }
.yall:hover { border-color: var(--ink); }
.yall small { color: var(--muted); font-weight: 500; font-size: 0.82rem; }
.yall small::before { content: "·"; margin: 0 0.45rem 0 0.1rem; }
.yall__ic { margin-left: auto; display: inline-flex; }
.yall__ic svg { width: 1rem; height: 1rem; }
.yall[aria-expanded="false"] .yall__ic svg { transform: rotate(90deg); }
.bk__help { margin: -0.4rem 0 0; }
.bk__help .btn--text { color: var(--sea-deep); padding-left: 0; }

/* paso 2: lo elegido se pliega en una tarjeta de una línea */
.fold { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.55rem 0.6rem 0.55rem 0.8rem; }
.fold__ic, .xfold .fold__ic { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--paper-2); color: var(--sea-deep); display: grid; place-items: center; }
.fold__ic svg { width: 1.1rem; height: 1.1rem; }
.fold__b { display: grid; gap: 0.05rem; min-width: 0; }
.fold__k { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.fold__b > strong { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.fold__s { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.4rem; font-size: 0.82rem; color: var(--muted); }
.fold__wx { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.4rem; }
.fold__wx svg { width: 20px; height: 20px; flex: none; }
.fold__wx span:first-of-type { color: var(--ink); font-weight: 600; }
.fold__wx small { font-size: inherit; }
.fold__ch { color: var(--sea-deep); font-size: 0.88rem; padding-inline: 0.5rem; }
.bk__two--cal { grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }
.tpicks small { color: var(--muted); }
.tpicks .tpicks__rec { color: var(--rec); font-weight: 700; }
.tother__btn { justify-self: start; color: var(--sea-deep); padding-left: 0; font-size: 0.9rem; }
.tnote--i { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0; font-size: 0.8rem; line-height: 1.45; }
.tnote--i > svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; color: var(--sea-deep); }
.bk--v4 .tnote--anchor { margin: 0; }

/* paso 3: comida */
.bk__hint--row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; }
.bk__hint--row .btn--text { color: var(--sea-deep); padding-inline: 0.2rem; }
.morder { display: flex; align-items: center; gap: 0.6rem; margin: 0; background: var(--rec-bg); border: 1px solid var(--rec-line); border-radius: var(--r-card); padding: 0.6rem 0.85rem; font-size: 0.88rem; }
.morder > svg { width: 1.1rem; height: 1.1rem; color: var(--rec); flex: none; }
.morder__t { flex: 1; min-width: 0; }
.morder__t > span:first-child { font-weight: 700; color: var(--rec); }
.morder strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtabs--chips { border-bottom: 0; gap: 0.4rem; padding-block: 0.15rem; }
.mtabs--chips button { border: 1px solid var(--line); border-radius: 999px; background: var(--white); min-height: 44px; padding: 0.4rem 0.95rem; font-size: 0.88rem; display: inline-flex; align-items: center; }
.mtabs--chips button::after { display: none; }
.mtabs--chips button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mtabs--chips button.is-on .recdot { background: var(--sea-bright); }
.mrows { display: grid; gap: 0.5rem; }
.mrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); padding: 0.5rem 0.6rem 0.5rem 0.5rem; transition: border-color 0.2s, box-shadow 0.2s; }
.mrow > img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--paper-2); }
.mrow--text { grid-template-columns: minmax(0, 1fr) auto; padding-left: 0.9rem; }
.mrow__t { display: grid; gap: 0.05rem; min-width: 0; }
.mrow__t strong { font-size: 0.95rem; line-height: 1.25; }
.mrow__t .rec { margin-bottom: 0.1rem; }
.mrow__d { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.mrow__d p { margin: 0; flex: 1; min-width: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__d.is-open { align-items: flex-start; flex-direction: column; gap: 0; }
.mrow__d.is-open p { white-space: normal; }
.mrow__more { border: 0; background: none; padding: 0 0.15rem; min-height: 32px; font-size: 0.78rem; font-weight: 700; color: var(--sea-deep); text-decoration: underline; text-underline-offset: 2px; flex: none; }
.mrow__f { display: grid; justify-items: end; gap: 0.3rem; }
.mrow__f em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem; white-space: nowrap; }
.mrow .add { min-height: 40px; }
.mrow .stepper--sm button { width: 38px; height: 40px; }
.mrow.is-rec { border-color: var(--rec-line); }
.mrow.is-on { border-color: var(--sea); box-shadow: 0 0 0 1px var(--sea); background: #f5fbfb; }
.mmore { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; border: 1px dashed var(--line); background: transparent; color: var(--ink); border-radius: var(--r-card); min-height: 46px; font-weight: 700; font-size: 0.9rem; }
.mmore:hover { border-color: var(--ink); }
.mmore svg { width: 1rem; height: 1rem; }
.mmore[aria-expanded="false"] svg { transform: rotate(90deg); }
.xfold { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.xfold__h { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); padding: 0.65rem 0.9rem 0.65rem 0.8rem; min-height: 56px; }
.xfold__b { display: grid; gap: 0.05rem; min-width: 0; }
.xfold__b strong { font-size: 0.98rem; }
.xfold__b small { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfold.has-sel .xfold__b small { color: var(--sea-deep); font-weight: 600; }
.xfold__ic svg { width: 1rem; height: 1rem; }
.xfold:not(.is-open) .xfold__ic svg { transform: rotate(90deg); }
.xfold__in { display: grid; gap: 0.6rem; padding: 0 0.8rem 0.9rem; }

/* paso 4: total con desglose, nota plegable */
.tot4 { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); padding: 0.75rem 1rem; display: grid; gap: 0.6rem; }
.tot4__r { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tot4__r small { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.tot4__r strong { font-family: var(--serif); font-size: 2rem; line-height: 1.05; font-weight: 600; font-variant-numeric: tabular-nums; }
.tot4__r .btn--text { color: var(--sea-deep); font-size: 0.88rem; }
.tot4__bd { border-top: 1px solid var(--paper-2); padding-top: 0.7rem; display: grid; gap: 0.6rem; }
.notefold { border: 1px dashed var(--line); border-radius: var(--r-card); background: var(--white); }
.notefold__h { display: flex; align-items: center; gap: 0.55rem; width: 100%; border: 0; background: none; color: var(--ink); text-align: left; padding: 0.6rem 0.9rem; min-height: 50px; font-weight: 700; font-size: 0.92rem; }
.notefold__h svg { width: 1.05rem; height: 1.05rem; color: var(--sea-deep); flex: none; }
.notefold__in { display: grid; gap: 0.8rem; padding: 0 0.9rem 0.9rem; }
.notefold .refs { border: 0; padding: 0; }
.notefold .fields { grid-template-columns: 1fr; }

@media (min-width: 1181px) {
  .bk--v4 .ylist, .bk--v4 .mrows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .bk__top { position: sticky; top: 68px; z-index: 30; background: var(--paper); padding: 0.4rem 0 0.35rem; margin-bottom: 0.6rem; max-width: none; }
  .bk__top .bk__back { display: grid; flex: none; }
  .bk--v4 .bk__panel > div:first-child .bk__h, .bk--v4 .bk__panel > .bk__sec:first-child .bk__h { display: block; font-size: 1.55rem; }
  .bk--v4 .bk__panel { gap: 1.1rem; }
  .bk--v4 .mtabs { top: calc(68px + 3.4rem); padding-block: 0.35rem; }
  .bk--v4 .guests { padding: 0.5rem 0.8rem; }
  .bk--v4 .bk__two--cal { grid-template-columns: 1fr; }
  .bk--v4 .tpicks--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk__bar .bk__sum small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
  .bk__bar.is-send .bk__barin .btn { background: var(--white); color: var(--ink); border-color: var(--line); }
}
@media (max-width: 400px) {
  .yrow { grid-template-columns: 72px minmax(0, 1fr) 26px; gap: 0.7rem; }
  .yrow__img, .yrow__img img { width: 72px; height: 58px; }
}
/* ================= fin planificador v4 ================= */

/* ================= calendario de cruceros (/cruise-ships/, /es/cruceros/) ================= */
.ctoday-sec { padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.ctoday { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1rem, 3vw, 1.6rem); display: grid; gap: 1rem; }
.ctoday__date { margin: 0; font-size: 1.05rem; }
.ctoday__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.ctoday__item { border: 1px solid var(--line); border-left: 4px solid var(--sea); border-radius: var(--r-card); padding: 0.9rem 1rem; display: grid; gap: 0.35rem; align-content: start; }
.ctoday__item.is-later { border-left-color: var(--warn); }
.ctoday__item.is-gone { border-left-color: var(--line); color: var(--muted); }
.ctoday__ship strong { display: block; font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; }
.ctoday__ship span, .ctoday__t { font-size: 0.86rem; color: var(--muted); margin: 0; }
.ctoday__st { margin: 0; font-weight: 600; font-size: 0.92rem; }
.ctoday__item .btn { justify-self: start; margin-top: 0.3rem; }
.ctoday__next ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.ctoday__next small { color: var(--muted); }
.ctoday__note, .ctoday__empty { margin: 0; font-size: 0.86rem; color: var(--muted); }
.ct-sec { padding-block: clamp(3rem, 6vw, 4.5rem); }
.ct-jump { margin-bottom: 1.5rem; }
.ct-jump .pill[hidden] { display: none; }
.ct-past { margin: -0.5rem 0 1rem; }
.ct-month { margin-bottom: 2rem; scroll-margin-top: 90px; }
.ct-month__h { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 0.6rem; }
.ct-month__h small { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-left: 0.4rem; }
.ct { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ct th, .ct td { text-align: left; padding: 0.55rem 0.6rem; vertical-align: middle; }
.ct thead th { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
.ct__row td, .ct__row th { border-top: 1px solid var(--paper-2); }
.ct__row.is-first td, .ct__row.is-first th { border-top-color: var(--line); }
.ct__date { font-weight: 600; white-space: nowrap; }
.ct__ship { font-weight: 600; }
.ct__line { color: var(--muted); }
.ct__t { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct__go { text-align: right; }
.ct__go .btn { white-space: nowrap; }
.ct__tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sea-deep); border: 1px solid currentColor; border-radius: 999px; padding: 0.1rem 0.45rem; margin-left: 0.3rem; }
.ct__tag--today { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ct__row.is-past { opacity: 0.45; }
.ct__row.is-past .ct__go .btn { visibility: hidden; }
.ct__row.is-today { background: #e1f3f4; }
.ct__row.is-today th, .ct__row.is-today td { border-top-color: var(--sea); }
.ct__row.is-soon .ct__date { color: var(--sea-deep); }
@media (max-width: 720px) {
  .ct thead { display: none; }
  .ct, .ct tbody { display: block; }
  .ct__row { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.8rem; padding: 0.8rem 0.2rem; border-top: 1px solid var(--line); }
  .ct__row td, .ct__row th { border: 0; padding: 0; }
  .ct__date { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); }
  .ct__row.is-soon .ct__date { color: var(--sea-deep); }
  .ct__ship { font-size: 1.02rem; }
  .ct__line { grid-column: 1; font-size: 0.84rem; }
  .ct__t { grid-column: 1; white-space: normal; font-size: 0.88rem; }
  .ct__t::before { content: attr(data-label) " "; color: var(--muted); }
  .ct__go { grid-column: 2; grid-row: 2 / span 3; align-self: center; }
  .ct__go .btn { white-space: normal; text-align: center; max-width: 9.5rem; }
  .ct__row.is-today { padding-inline: 0.6rem; border-radius: var(--r-card); }
}
/* ================= fin calendario de cruceros ================= */

/* ================= cruceros: tarjetas por naviera, fotos de barcos y filtros (/cruise-ships/, /es/cruceros/) =================
   Fotos reales de Wikimedia Commons (3:2, webp de 400/800/1600 px en img/cruise-ships/) con crédito en la sección de
   fuentes. Movimiento: entrada con resorte (curva propia muestreada de un resorte amortiguado, en linear()), hover que
   levanta la tarjeta, filtros que desvanecen y reaparecen; todo se apaga con prefers-reduced-motion. */
:root { --spring: linear(0, 0.031 2%, 0.111 4%, 0.225 6%, 0.627 12%, 0.75 14%, 0.857 16%, 0.947 18%, 1.018 20%, 1.071 22%, 1.106 24%, 1.127 26%, 1.135 28%, 1.133 30%, 1.11 34%, 1.023 44%, 0.992 50%, 0.983 60%, 1); }

/* hero del hub y de cada barco: foto del barco y crédito discreto */
.yhero__credit { position: absolute; right: var(--gutter); bottom: 0.6rem; z-index: 1; font-size: 0.68rem; opacity: 0.6; color: var(--paper); margin: 0; }
.yhero__credit a { text-decoration: none; border-bottom: 1px solid rgba(245,244,239,0.4); }

/* naviera: chips de filtro (con desplazamiento lateral en celular) */
.cl-sec { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.cl-filter { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding: 0.2rem 0 0.6rem; margin: 0 0 1.5rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.cl-filter::-webkit-scrollbar { display: none; }
.cl-filter .chip { flex: none; scroll-snap-align: start; }
.cl-filter .chip small { font-weight: 500; opacity: 0.7; margin-left: 0.3rem; }
@media (min-width: 761px) { .cl-filter { flex-wrap: wrap; overflow: visible; } }

/* grupo por naviera: título + carrusel (celular) o rejilla (escritorio) */
.cl-group { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.cl-group.is-out { opacity: 0; transform: translateY(8px); pointer-events: none; }
.cl-group[hidden] { display: none; }
.cl-group__h { margin: 0 0 0.9rem; align-items: center; }
.cl-group__h h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 500; }
.cl-group__h h3 small { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-left: 0.5rem; }
.cl-group .scroller { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.cl-group .scroller__track { padding-inline: 0; }
@media (min-width: 761px) {
  .cl-group .scroller { overflow: visible; margin-inline: 0; padding-inline: 0; cursor: auto; }
  .cl-group .scroller__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); width: auto; gap: 1.1rem; }
  .cl-group .scroller__track::after { display: none; }
}

/* tarjeta de barco: foto 3:2, nombre, próxima escala (la actualiza js/cruises.js con la fecha de Cabo), patrón y botones */
.ship-card { flex: none; width: min(78vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); transition: transform 0.45s var(--spring), box-shadow 0.35s var(--ease); }
@media (min-width: 761px) { .ship-card { width: auto; } }
.ship-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ship-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); display: block; }
.ship-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), opacity 0.5s var(--ease); }
/* mientras la foto está diferida (data-src, js/cruises.js) el recuadro queda en papel; la foto aparece con un fundido */
.ship-card__media img[data-src] { opacity: 0; }
.cl-group__h h3 small { white-space: nowrap; }
.ship-card:hover .ship-card__media img { transform: scale(1.045); }
.ship-card__media--none, .sister__none { display: grid; place-items: center; background: linear-gradient(135deg, var(--ink-3), var(--sea-deep)); color: var(--paper); font-family: var(--serif); font-size: 1.5rem; text-align: center; padding: 1rem; }
.ship-card__media--none span { opacity: 0.85; font-size: 0.7rem; font-family: var(--sans); letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-top: 0.4rem; }
.ship-card__body { padding: 0.95rem 1.05rem 1.05rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.ship-card__body h4 { font-family: var(--serif); font-size: 1.45rem; line-height: 1.05; font-weight: 500; }
.ship-card__body h4 a { text-decoration: none; }
.ship-card__body h4 a:hover { color: var(--sea-deep); }
.ship-card__line { font-size: 0.8rem; color: var(--muted); margin: 0; }
.ship-card__next { margin: 0.2rem 0 0; font-size: 0.88rem; line-height: 1.35; padding-left: 0.7rem; border-left: 3px solid var(--sea); }
.ship-card__next strong { display: block; font-weight: 700; }
.ship-card__next.is-today { border-left-color: var(--warn); }
.ship-card__pat { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.ship-card__go { margin-top: auto; padding-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ship-card__go .btn--sm { padding-inline: 0.85rem; }
/* entrada con resorte al revelarse (data-reveal ya pone opacity y translate; aquí solo cambia el easing) */
.js .ship-card[data-reveal] { transition: opacity 0.6s var(--ease), transform 0.7s var(--spring), box-shadow 0.35s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js .ship-card[data-reveal].is-in { transition-delay: 0s; }

/* miniatura en la tabla de escalas y en «Hoy en Cabo» */
.ct__ship { display: flex; align-items: center; gap: 0.65rem; }
.ct__thumb { width: 56px; height: 37px; flex: none; object-fit: cover; border-radius: 4px; background: var(--paper-2); }
.ctoday__item { grid-template-columns: 72px 1fr; column-gap: 0.75rem; }
.ctoday__img { grid-row: 1 / span 4; width: 72px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--paper-2); }
.ctoday__item > :not(.ctoday__img) { grid-column: 2; }
.ctoday__item--noimg { grid-template-columns: 1fr; }
.ctoday__item--noimg > * { grid-column: 1; }
.ctoday__item > .btn { grid-column: 1 / -1; justify-self: stretch; justify-content: center; text-align: center; white-space: normal; margin-top: 0.45rem; }   /* el botón ocupa todo el ancho de la tarjeta: nunca se sale */
@media (max-width: 760px) {
  /* el encabezado del grupo sigue en una fila (el .section-head general se apila y centra en celular) */
  .cl-group__h { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 0.8rem; }
  .cl-group__h h3 { font-size: 1.45rem; }
}
@media (max-width: 720px) {
  .ct__ship { gap: 0.5rem; }
  .ct__thumb { width: 40px; height: 27px; }
}

/* página de barco: yates con foto y barcos hermanos con foto */
.ycards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ycard { display: grid; grid-template-columns: 112px 1fr; gap: 0.9rem; background: var(--paper-2); border-radius: var(--r-card); overflow: hidden; align-items: start; }
.ycard img { width: 112px; height: 100%; min-height: 120px; object-fit: cover; }
.ycard div { padding: 0.9rem 0.9rem 0.9rem 0; }
.ycard h3 { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; margin: 0 0 0.3rem; }
.ycard h3 a { text-decoration: none; }
.ycard p { font-size: 0.88rem; margin: 0; }
.sisters { display: flex; gap: 0.8rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-top: 0.8rem; padding-bottom: 0.4rem; }
.sisters::-webkit-scrollbar { display: none; }
.sister { flex: none; width: 200px; scroll-snap-align: start; text-decoration: none; color: var(--ink); }
.sister img, .sister__none { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-radius: var(--radius); background: var(--paper-2); transition: transform 0.6s var(--ease); }
.sister__none { font-size: 1.1rem; }
.sister:hover img { transform: translateY(-3px); }
.sister strong { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; margin-top: 0.45rem; }
.sister span { font-size: 0.8rem; color: var(--muted); }

/* créditos de fotos (Wikimedia Commons) en la sección de fuentes */
.pcredits { margin-top: 1rem; font-size: 0.78rem; }
.pcredits summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.pcredits ul { margin-top: 0.5rem; columns: 2; column-gap: 2rem; padding-left: 0; display: block; }
.pcredits li { break-inside: avoid; margin-bottom: 0.25rem; }
@media (max-width: 760px) {
  .ycards { grid-template-columns: 1fr; }
  .pcredits ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ship-card, .ship-card__media img, .cl-group, .sister img { transition: none; }
  .ship-card:hover, .ship-card:hover .ship-card__media img, .sister:hover img { transform: none; }
}
/* ================= fin cruceros: tarjetas por naviera ================= */


/* ================= ocasión en tarjetas (paso 1 del planificador y pregunta 1 del asistente) =================
   Rejilla que envuelve, nada se corta: foto, nombre y una línea útil (horas típicas y resumen). La elegida lleva
   borde de tinta y palomita; en celular se ven 6 y "Show all occasions" abre el resto (.occs__more). */
.occs { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 0.55rem; }
.occs__opt { position: relative; display: grid; gap: 0.5rem; align-content: start; text-align: left; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: var(--r-card); padding: 0.4rem 0.4rem 0.65rem; min-height: 44px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; touch-action: manipulation; cursor: pointer; }
.occs__opt img, .occs__ic { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.occs__ic { display: grid; place-items: center; color: var(--sea-deep); }
.occs__ic svg { width: 1.7rem; height: 1.7rem; }
.occs__b { display: grid; gap: 0.15rem; padding-inline: 0.25rem; min-width: 0; }
.occs__b strong { font-size: 0.94rem; line-height: 1.2; }
.occs__b small { color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.occs__b small b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.occs__ok { position: absolute; top: 0.75rem; right: 0.75rem; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(13, 27, 42, 0.35); color: transparent; display: grid; place-items: center; transition: background 0.2s, color 0.2s; }
.occs__ok svg { width: 0.9rem; height: 0.9rem; }
.occs__opt:hover { border-color: var(--ink); }
.occs__opt.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #f3fbfb; }
.occs__opt.is-on .occs__ok { background: var(--sea-bright); border-color: var(--sea-bright); color: var(--ink); }
.occs__more { margin-top: 0.55rem; }
.occs--wiz { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 640px) {
  .occs, .occs--wiz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .occs__b strong { font-size: 0.88rem; }
  .occs__b small { font-size: 0.72rem; }
}
/* ================= fin ocasión en tarjetas ================= */

/* pestañas de la carta: mientras haya más a la derecha, el borde se desvanece (pista de que la fila sigue); .is-end lo quita */
.mtabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.4rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.4rem), transparent); }
.mtabs.is-end { -webkit-mask-image: none; mask-image: none; }

/* ================= auditoría móvil (oct 2026): objetivos de 44 px, nada fuera del borde =================
   Lo que medía menos de 44 px en celular sube a 44; el menú ya no aprieta el botón de hamburguesa (salía 3 px fuera a 390);
   la barra de meses no ensancha la página en español ("Fuera de temporada"). */
/* (consejo del asesor) los objetivos de 44 px son para dedos: en escritorio con mouse no se engorda el pie ni el menú */
@media (max-width: 960px), (pointer: coarse) {
.nav__burger { flex: none; }
.pill { min-height: 44px; }
.link { min-height: 44px; align-items: center; }
.add, .mrow .add { min-height: 44px; }
.stepper--sm button { width: 44px; height: 44px; }
.plan__alts .chip { min-height: 44px; }
.map-num, .map-pin { width: 44px; height: 44px; }
.chart__zoom button { min-height: 40px; padding-block: 0.5rem; }
.trip__rows button { min-height: 44px; padding-inline: 0.5rem; }
.post-crumbs a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
.post-calc input[type="range"] { min-height: 44px; }
.footer__nav { gap: 0; }
.footer__nav a { display: flex; align-items: center; min-height: 44px; }
.monthbar li { min-width: 0; }
.monthbar__l { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 960px) {
  /* el flotante de WhatsApp tapaba la última línea legal del pie al llegar al fondo */
  .footer { padding-bottom: calc(2rem + 3.8rem + env(safe-area-inset-bottom)); }
  .nav__in { gap: 0.8rem; }
  .nav__cta { gap: 0.5rem; }
  .nav__cta .btn { min-height: 44px; }
  .hero__toggle { width: 44px; height: 44px; }
  .bk__back { width: 44px; height: 44px; }
  .cal__day { min-height: 40px; }
}
/* ================= fin auditoría móvil ================= */
/* segunda pasada de la auditoría móvil: lo que seguía por debajo de 44 px */
.btn, .btn--sm { min-height: 44px; }
.brand { min-height: 44px; }
.footer__langs a { min-height: 44px; }
.cal__head button, .chart__zbtn button, .chart__rot button, .exp-card__go { width: 44px; height: 44px; }
.chart__zoom button { min-height: 44px; }
.chart__stops button { min-height: 44px; }
.mrow__more { min-height: 44px; }
.mrow .stepper--sm button { width: 44px; height: 44px; }
.btn--text { min-width: 44px; }
.post-crumbs a { padding-block: 0.7rem; margin-block: -0.7rem; }
.seg button, .prefs .seg button, .prefs-sheet .seg button { min-height: 44px; }
.prefs__btn { height: 44px; }
/* pines del mapa real: la zona que se toca crece sin mover el pin */
.real-pin::before { content: ''; position: absolute; inset: -14px -15px; }
.xchip { min-width: 0; }
/* tercera pasada: moneda del pie, saltos de la guía, rutas y meses de la carta, lista de pendientes, galería, mapa real */
.footer__cur button { min-height: 44px; }
.guide-jump a { min-height: 44px; display: inline-flex; align-items: center; }
.chart__card .chart__onroute button { min-height: 44px; }
.season__table th button { min-height: 44px; }
.post-check__bar button { min-height: 44px; }
.lightbox button { width: 48px; height: 48px; }
.mrow__more { min-width: 44px; }
.post-crumbs a { padding-inline: 0.6rem; margin-inline: -0.6rem; }
.mapboxgl-ctrl-group button { width: 44px !important; height: 44px !important; }
/* moneda del pie: la zona que se toca crece a los lados sin mover el texto */
.footer__cur button { min-width: 44px; padding-inline: 0.45rem; margin-inline: -0.45rem; text-align: center; }
}

/* ================= portada: «Arriving on a cruise ship?» con «Today in Cabo» (js/cruises.js) ================= */
.cruise-now { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--paper-2); }
.cruise-now__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.cruise-now__text > p:not(.eyebrow) { margin: 0.8rem 0 0; max-width: 34rem; }
.cruise-now__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.cruise-now__today > .eyebrow { margin-bottom: 0.6rem; }
.cruise-now .ctoday__list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* cuadro compacto de la portada (js/cruises.js): tarjetas más bajas, sin la línea de horario (el estado ya da la hora) */
.ctoday--compact { gap: 0.7rem; }
.ctoday--compact .ctoday__item { padding: 0.7rem 0.85rem; gap: 0.25rem; }
.ctoday--compact .ctoday__ship strong { font-size: 1.15rem; }
.ctoday--compact .ctoday__t { display: none; }
.ctoday--compact .ctoday__item .btn { margin-top: 0.15rem; }
.ctoday__all { margin: 0; font-size: 0.92rem; font-weight: 600; }
.ctoday__all a { display: inline-block; padding: 0.45rem 0; }
@media (max-width: 860px) {
  .cruise-now__grid { grid-template-columns: minmax(0, 1fr); }
}
/* planificador en escritorio: el resumen lateral es pegajoso y más alto que la pantalla, y el flotante de WhatsApp le
   tapaba el pie (nota de la propina). Dentro de los pasos se esconde, como en celular; el paso 4 ya manda por WhatsApp
   y la pantalla de inicio del planificador lo conserva. */
@media (min-width: 861px) {
  body.bk-planner .float-cta { display: none !important; }
}
@media (max-width: 480px) {
  .cruise-now__cta .btn { flex: 1 1 100%; justify-content: center; }
}
/* menú de escritorio con «Cruise ships» / «Cruceros» (sin FAQ en la barra): justo arriba de 960 px y justo arriba de
   1240 px (cuando vuelve «Text us») los botones de la derecha se salían del borde; se aprieta un poco el espacio */
@media (min-width: 961px) and (max-width: 1000px) {
  .nav__links { gap: 0.7rem; }
  .nav__links a { font-size: 0.8rem; }
}
@media (min-width: 1241px) and (max-width: 1320px) {
  .nav__links { gap: 1.3rem; }
}

/* ================= clientes reales: fotos y clips de huéspedes (oct 2026, aplicar_clientes.py) ================= */
/* portada: las tarjetas reutilizan .exp-card. Clip apaisado en la ficha del yate: poster <img> y <video data-video> encima,
   con la misma carga diferida y play/pausa a la vista del video del hero (js/site.js); con reduced-motion queda el poster */
.gclip__fig { margin: 0; }
.gclip__box { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.gclip__box img, .gclip__box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gclip__box video { opacity: 0; transition: opacity 1.2s var(--ease); }
.gclip__box video.is-playing { opacity: 1; }
.gclip__fig figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); }
/* galería de seis fotos (parejas): la primera a doble ancho y alto, dos a su derecha y tres abajo */
.xgallery__grid--n6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) {
  .xgallery__grid--n6 { grid-template-columns: repeat(2, 1fr); }
  .xgallery__grid--n6 .gallery__item:last-child { grid-column: span 2; }
}
/* clip vertical en una tarjeta de la portada (18 oct 2026): poster <img> y <video data-video> encima, igual que .gclip__box */
.exp-card__media--clip { position: relative; }
.exp-card__media--clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.exp-card__media--clip video.is-playing { opacity: 1; }
/* ================= fin clientes reales ================= */

/* ================= menú siempre visible (10 oct 2026) ================= */
/* .nav ya no se esconde al bajar (js/site.js), así que los saltos a un ancla (#rates, #faq, #fleet...) dejan espacio para él:
   96 px en escritorio y 68 px en celular, las mismas alturas que usan los elementos pegajosos (top: 96px / 68px) */
html { scroll-padding-top: 96px; }
@media (max-width: 960px) {
  html { scroll-padding-top: 68px; }
}
/* ================= fin menú siempre visible ================= */

/* ================= pickup en el hotel (14 oct 2026) ================= */
/* Bloque del paso 3 (js/booking.js, bloquePickup): la misma tarjeta que "Extras on request", con una casilla como la de
   .xchip. Zonas en lista (nombre, descripción y precio), sencillo o redondo con .modes y vehículos con .hchips.
   El precio va en USD y fuera del estimado: renglón aparte en .price y nota bajo el total del paso 4. */
.pkup__h { cursor: pointer; }
.pkup__h:has(input:focus-visible) { outline: 2px solid var(--sea); outline-offset: -2px; border-radius: var(--r-card); }
.pkup__box { width: 1.35rem; height: 1.35rem; border-radius: 5px; border: 1.5px solid var(--line); display: grid; place-items: center; background: var(--white); }
.pkup__box svg { width: 0.85rem; height: 0.85rem; opacity: 0; }
.pkup.is-open { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.pkup.is-open .pkup__box { background: var(--sea); border-color: var(--sea); color: #fff; }
.pkup.is-open .pkup__box svg { opacity: 1; }
.pkup__in { gap: 1rem; }
.pkup__sec { border: 0; margin: 0; padding: 0; min-width: 0; }
.pkup__sec legend { padding: 0; margin-bottom: 0.6rem; width: 100%; }
.pkzones { display: grid; gap: 0.45rem; }
.pkzone { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem 0.8rem; background: var(--white); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.pkzone:hover { border-color: var(--ink); }
.pkzone input { margin: 0.15rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--sea); }
.pkzone:has(input:focus-visible) { outline: 2px solid var(--sea); outline-offset: 2px; }
.pkzone__b { display: grid; gap: 0.15rem; min-width: 0; }
.pkzone__b strong { font-size: 0.92rem; line-height: 1.25; }
.pkzone__b small { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.pkzone em { font-style: normal; font-weight: 700; font-size: 0.86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pkzone.is-on { border-color: var(--sea); background: #f5fbfb; box-shadow: inset 0 0 0 1px var(--sea); }
.pkup__trip button { line-height: 1.25; }
.pkveh { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.pkveh button { align-content: start; }
/* los dos precios del chofer: efectivo arriba y tarjeta abajo, más chico (js/booking.js pkDos) */
.pkzone em { display: grid; justify-items: end; gap: 0.05rem; }
.pkcard { font-weight: 500 !important; color: var(--muted); font-size: 0.76rem !important; }
.pkup__sum { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; padding: 0.6rem 0.8rem; border-radius: 8px; background: #f5fbfb; color: var(--sea-deep); font-weight: 700; font-size: 0.9rem; line-height: 1.35; }
.pkup__sum svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.1rem; }
.pkup__sum.is-todo { background: var(--paper); color: var(--muted); font-weight: 600; }
.pkup__link { color: var(--sea-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* tarjeta lateral, hoja del celular y resumen del paso 4 */
.price .pkline { border-top: 1px dashed var(--line); padding-top: 0.45rem; }
.price .pkline dt { color: var(--ink); font-weight: 600; }
.price .total dd small { font-family: var(--sans); font-size: 0.72rem; line-height: 1.3; margin-top: 0.3rem; }
.tot4__r small.tot4__pk { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--sea-deep); font-size: 0.8rem; margin-top: 0.35rem; }
.review dd small.review__pkp { color: var(--sea-deep); font-weight: 600; }
@media (max-width: 640px) {
  .pkzone { padding: 0.6rem 0.7rem; gap: 0.6rem; }
  /* descripción corta en celular: dos líneas; la zona elegida la muestra completa */
  .pkzone:not(.is-on) .pkzone__b small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pkveh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkup__trip button { padding-inline: 0.5rem; font-size: 0.86rem; }
}
/* ================= fin pickup en el hotel ================= */

/* ================= extras pagados directo al proveedor (14 oct 2026) ================= */
/* js/booking.js chipExtra y extrasLista: el extra con precio (fotógrafo) muestra "USD 180, paid directly to the
   photographer" también en celular (ahí .xchip small se oculta); el que no cabe en el yate (DJ, 40 ft) sale apagado. */
.xchip .xchip__p { display: block; color: var(--sea-deep); font-weight: 600; }
.xchip .xchip__no, .xline .xchip__no { display: block; color: var(--danger); font-weight: 600; }
.xchip.is-off { opacity: 0.6; cursor: not-allowed; background: var(--paper); }
.xchip.is-off:hover { border-color: var(--line); }
.xline { display: block; }
.xline + .xline { margin-top: 0.35rem; }
.xline small.review__pkp { color: var(--sea-deep); font-weight: 600; }
.xgone { margin-bottom: 0.2rem; }
/* Jet ski (15 oct 2026): .xchip--opts es una tarjeta (no botón) con un botón por opción (30 min, 1 h); ocupa el ancho de
   la fila para que quepan los dos. */
.xchip--opts { grid-column: 1 / -1; cursor: default; }
.xchip--opts:hover { border-color: var(--line); }
.xchip--opts.is-on:hover { border-color: var(--sea); }
.xopts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.15rem; }
.xopts button { border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; min-height: 40px; padding: 0.35rem 0.85rem; display: inline-flex; gap: 0.4rem; align-items: baseline; font-size: 0.85rem; }
.xopts button span { color: var(--sea-deep); font-weight: 600; }
.xopts button:hover { border-color: var(--ink); }
.xopts button.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.xopts button.is-on span { color: var(--paper); }
.xchip .xchip__n, .xchip--opts small { display: block; }   /* en celular también: dice que es solo en Playa El Médano */
/* Pase pagado (js/pay.js): "Music on board" con el WhatsApp del DJ y la línea del jet ski; solo con la reserva pagada */
.pay-music { display: grid; gap: 0.5rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.pay-music .eyebrow { margin: 0; }
.pay-music p { margin: 0; font-size: 0.92rem; }
.pay-music .pay-music__jet { color: var(--muted); font-size: 0.85rem; }
.pay-music .btn svg { width: 1.1rem; height: 1.1rem; }
.pay-music__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* ================= fin extras pagados directo al proveedor ================= */
/* ================= mapa de sitio en el pie (pie_mapa.py, 15 oct 2026) =================
   El <nav class="footer__nav" data-mapa> pasa a cuatro columnas a todo lo ancho, debajo de la marca y del contacto.
   Va después de la auditoría móvil (que deja .footer__nav sin gap y cada enlace de 44 px) para que las columnas
   conserven su separación. */
.footer__in:has(> .footer__nav[data-mapa]) { grid-template-columns: 1.2fr 1fr; }
.footer__nav[data-mapa] { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 2.5rem; padding-top: 2.4rem; border-top: 1px solid var(--line-ink); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; min-width: 0; }
.footer__col .eyebrow { margin: 0 0 0.5rem; }
.footer__nav[data-mapa] a { opacity: 0.78; transition: opacity 0.2s, color 0.2s; }
.footer__nav[data-mapa] a:hover, .footer__nav[data-mapa] a:focus-visible { opacity: 1; color: var(--sea-bright); }
@media (max-width: 960px), (pointer: coarse) {
  .footer__col { gap: 0; }
  .footer__col .eyebrow { margin-bottom: 0.2rem; }
}
@media (max-width: 960px) {
  .footer__in:has(> .footer__nav[data-mapa]) { grid-template-columns: 1fr; }
  .footer__nav[data-mapa] { padding-top: 1.8rem; }
}
@media (max-width: 640px) {
  .footer__nav[data-mapa] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
}
/* sin :has() (navegadores viejos) el contacto abarca las columnas 2 y 3; con :has() equivale a la 2 */
@media (min-width: 961px) { .footer__nav[data-mapa] ~ .footer__contact { grid-column: 2 / -1; } }
/* ================= fin mapa de sitio en el pie ================= */
/* ================= pago seguro con Stripe (22 oct 2026, pago_stripe.py) ================= */
.stripe-line { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.stripe-line strong { color: var(--ink); font-weight: 700; }
.stripe-line__logo { flex: none; width: 48px; height: 20px; margin-top: 0.05rem; }
.notes .stripe-line { margin-top: 1rem; }
.how__head .stripe-line { margin-top: 1.6rem; }
.stripe-line--pay { align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; }
.stripe-line--pay svg { width: 0.95rem; height: 0.95rem; flex: none; }
.stripe-line--pay .stripe-line__logo { width: 43px; height: 18px; margin: 0; }
/* ================= fin pago seguro con Stripe ================= */