/* ============================================================
   CARTAGENA TE AMO — sistema de diseño
   Caribe premium contemporáneo. Navy + aqua de marca + oro de atardecer.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca */
  --navy-950: oklch(0.155 0.030 250);
  --navy-900: oklch(0.198 0.035 250);
  --navy-850: oklch(0.230 0.037 250);
  --navy-800: oklch(0.262 0.038 250);
  --navy-700: oklch(0.345 0.040 248);
  --navy-600: oklch(0.455 0.042 246);
  --navy-500: oklch(0.565 0.038 246);

  --aqua-200: oklch(0.940 0.030 190);
  --aqua-300: oklch(0.895 0.052 190);
  --aqua-400: oklch(0.845 0.070 190); /* color del logo */
  --aqua-500: oklch(0.775 0.086 191);
  --aqua-600: oklch(0.660 0.093 193);
  --aqua-700: oklch(0.498 0.088 196);

  --gold-300: oklch(0.895 0.075 82);
  --gold-400: oklch(0.830 0.110 78);
  --gold-500: oklch(0.760 0.132 72);
  --gold-600: oklch(0.650 0.125 68);

  --coral-400: oklch(0.760 0.130 30);
  --coral-500: oklch(0.688 0.158 28);
  --coral-600: oklch(0.600 0.160 28);

  /* Neutros */
  --paper: oklch(0.987 0.003 250);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.968 0.005 250);
  --surface-3: oklch(0.938 0.007 250);
  --line: oklch(0.905 0.008 250);
  --line-strong: oklch(0.845 0.010 250);

  --text: var(--navy-900);
  --text-soft: oklch(0.470 0.022 250);
  --text-mute: oklch(0.528 0.020 250);
  --on-dark: oklch(0.985 0.004 250);
  --on-dark-soft: oklch(0.845 0.012 245);
  --on-dark-mute: oklch(0.710 0.016 245);

  --ok: oklch(0.640 0.115 155);
  --warn: oklch(0.740 0.130 75);
  --err: oklch(0.585 0.170 27);

  /* Tipografía */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.25rem, 8.6vw, 5.25rem);
  --fs-h1: clamp(1.95rem, 6.4vw, 3.7rem);
  --fs-h2: clamp(1.55rem, 5vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 3.6vw, 1.6rem);
  --fs-lead: clamp(1rem, 2.6vw, 1.175rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-eyebrow: 0.72rem;

  /* Espaciado */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
  --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;
  --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  --section-y: clamp(2.75rem, 6vw, 6rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 1280px;
  --maxw-narrow: 760px;

  /* Formas */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px;  --r-pill: 999px;

  /* Sombras: discretas, nunca infladas */
  --sh-1: 0 1px 2px oklch(0.155 0.03 250 / 0.06), 0 1px 3px oklch(0.155 0.03 250 / 0.05);
  --sh-2: 0 2px 6px oklch(0.155 0.03 250 / 0.07), 0 6px 16px oklch(0.155 0.03 250 / 0.06);
  --sh-3: 0 8px 24px oklch(0.155 0.03 250 / 0.10), 0 2px 6px oklch(0.155 0.03 250 / 0.06);
  --sh-pop: 0 18px 48px oklch(0.155 0.03 250 / 0.20);

  /* Movimiento */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 300ms;

  /* Capas — z-index semántico */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-bottomnav: 250;
  --z-fab: 300;
  --z-overlay: 400;
  --z-drawer: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-loader: 900;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --header-h: 62px;
  --bottomnav-h: calc(58px + var(--safe-b));
}

@media (min-width: 900px) {
  :root { --header-h: 76px; --bottomnav-h: 0px; }
}

/* ---------- 2. Fuentes ---------- */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  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: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Inter";
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 3. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  padding-bottom: var(--bottomnav-h);
}
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible {
  outline: 2px solid var(--aqua-600);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.dark :focus-visible, [data-theme="dark"] :focus-visible { outline-color: var(--aqua-400); }
::selection { background: var(--aqua-300); color: var(--navy-950); }

/* ---------- 4. Utilidades ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--dark { background: var(--navy-950); color: var(--on-dark); }
.section--tint { background: var(--surface-2); }
.section--tight { padding-block: clamp(2rem, 4.5vw, 4rem); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 12px; inset-block-start: -100px;
  z-index: var(--z-toast); background: var(--navy-950); color: var(--on-dark);
  padding: 10px 16px; border-radius: var(--r-sm); font-size: var(--fs-sm);
  transition: top var(--t-fast) var(--e-out);
}
.skip-link:focus { inset-block-start: calc(12px + var(--safe-t)); }
.display { font-family: var(--font-display); font-optical-sizing: auto; }
.no-scroll { overflow: hidden; }

/* Eyebrow / kicker */
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--aqua-700);
  display: inline-flex; align-items: center; gap: 8px;
}
.section--dark .eyebrow { color: var(--aqua-400); }
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.65;
}

/* Encabezado de sección */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.sec-head__title { font-family: var(--font-display); font-size: var(--fs-h2); margin-top: 10px; }
.sec-head__sub { color: var(--text-soft); font-size: var(--fs-sm); margin-top: 8px; max-width: 56ch; }
.section--dark .sec-head__sub { color: var(--on-dark-soft); }
.sec-head__link {
  font-size: var(--fs-sm); font-weight: 600; color: var(--aqua-700);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 2px; flex-shrink: 0;
}
.section--dark .sec-head__link { color: var(--aqua-400); }
.sec-head__link svg { transition: transform var(--t-base) var(--e-out); }
.sec-head__link:hover svg { transform: translateX(3px); }

/* ---------- 5. Botones ---------- */
.btn {
  --btn-bg: var(--navy-900);
  --btn-fg: var(--on-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.005em;
  text-align: center; white-space: nowrap;
  transition: transform var(--t-fast) var(--e-out), background-color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out), opacity var(--t-base) var(--e-out);
  border: 1px solid transparent;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn--primary { --btn-bg: var(--gold-500); --btn-fg: var(--navy-950); }
.btn--primary:hover { --btn-bg: var(--gold-400); }
.btn--aqua { --btn-bg: var(--aqua-600); --btn-fg: var(--navy-950); }
.btn--aqua:hover { --btn-bg: var(--aqua-500); }
.btn--dark:hover { --btn-bg: var(--navy-800); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { --btn-bg: var(--surface-2); border-color: var(--navy-500); }
.section--dark .btn--ghost, .btn--ghost-light {
  --btn-fg: var(--on-dark); border-color: oklch(1 0 0 / 0.28);
}
.section--dark .btn--ghost:hover, .btn--ghost-light:hover {
  --btn-bg: oklch(1 0 0 / 0.10); border-color: oklch(1 0 0 / 0.5);
}
.btn--glass {
  --btn-bg: oklch(1 0 0 / 0.14); --btn-fg: var(--on-dark);
  border-color: oklch(1 0 0 / 0.28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn--glass:hover { --btn-bg: oklch(1 0 0 / 0.24); }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 1rem; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn--wa { --btn-bg: #0e7c3a; --btn-fg: #fff; }
.btn--wa:hover { --btn-bg: #0b6a31; }

/* Botón icónico */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  color: inherit; flex-shrink: 0;
  transition: background-color var(--t-base) var(--e-out), transform var(--t-fast) var(--e-out), color var(--t-base) var(--e-out);
}
.iconbtn:hover { background: oklch(0.5 0.02 250 / 0.10); }
.iconbtn:active { transform: scale(0.94); }
.iconbtn--onvideo { color: var(--on-dark); }
.iconbtn--onvideo:hover { background: oklch(1 0 0 / 0.16); }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; color: var(--text-soft);
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out), transform var(--t-fast) var(--e-out);
}
.chip:hover { border-color: var(--navy-500); color: var(--text); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--navy-900); color: var(--on-dark); border-color: var(--navy-900);
}
.chip__count { font-size: var(--fs-xs); opacity: 0.6; font-variant-numeric: tabular-nums; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em;
  background: var(--surface-3); color: var(--text-soft);
}
.badge--aqua { background: var(--aqua-200); color: var(--aqua-700); }
.badge--gold { background: oklch(0.93 0.055 82); color: var(--gold-600); }
.badge--dark { background: oklch(0.155 0.03 250 / 0.72); color: var(--on-dark); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.badge--pending { background: oklch(0.95 0.04 75); color: oklch(0.48 0.10 60); }

/* ---------- 6. Pantalla de carga ---------- */
#loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--navy-950);
  display: grid; place-items: center;
  transition: opacity 420ms var(--e-out), visibility 420ms;
}
#loader[hidden] { display: grid; }
body.is-ready #loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__inner { display: grid; place-items: center; gap: 22px; padding: 24px; }
.loader__mark { width: 74px; height: 74px; opacity: 0; animation: markIn 700ms var(--e-out) 60ms forwards; }
.loader__word {
  font-family: var(--font-display); color: var(--on-dark);
  font-size: 0.95rem; letter-spacing: 0.42em; text-transform: uppercase;
  opacity: 0; animation: markIn 700ms var(--e-out) 220ms forwards;
  padding-inline-start: 0.42em;
}
.loader__bar {
  width: 132px; height: 2px; border-radius: 2px;
  background: oklch(1 0 0 / 0.16); overflow: hidden; position: relative;
}
.loader__bar::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -40%;
  width: 40%; background: var(--aqua-400);
  animation: sweep 1.15s var(--e-inout) infinite;
}
@keyframes markIn { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes sweep { to { inset-inline-start: 100%; } }

/* ---------- 7. Header ---------- */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header);
  padding-block-start: var(--safe-t);
  transition: background-color var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out),
              border-color var(--t-slow) var(--e-out);
  border-block-end: 1px solid transparent;
}
.header__bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
}
.header__logo { display: flex; align-items: center; height: 100%; padding-block: 14px; flex-shrink: 0; }
.header__logo img { height: 100%; width: auto; max-height: 34px; }
@media (min-width: 900px) { .header__logo img { max-height: 40px; } }
.header__logo .logo-dark { display: none; }

.header__nav { display: none; }
@media (min-width: 1000px) {
  .header__nav { display: flex; align-items: center; gap: 2px; margin-inline-start: var(--sp-6); }
}
.navlink {
  padding: 9px 13px; border-radius: var(--r-sm);
  font-size: 0.9rem; font-weight: 500; color: var(--on-dark);
  position: relative;
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.navlink:hover { background: oklch(1 0 0 / 0.12); }
.navlink[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 3px; inset-inline: 13px;
  height: 1.5px; background: var(--aqua-400); border-radius: 2px;
}
.header__actions { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; color: var(--on-dark); }
.header__cta { display: none; }
@media (min-width: 1000px) { .header__cta { display: inline-flex; margin-inline-start: 8px; } }

/* Estado con scroll / páginas internas */
.header.is-solid, body.page-solid .header {
  background: oklch(0.155 0.03 250 / 0.90);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-block-end-color: oklch(1 0 0 / 0.10);
}
.header.is-hidden { transform: translateY(-100%); transition: transform var(--t-slow) var(--e-out); }
.header { transform: translateY(0); }

/* Contador de Mi Viaje */
.trip-btn { position: relative; }
.trip-count {
  position: absolute; inset-block-start: 4px; inset-inline-end: 3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--gold-500); color: var(--navy-950);
  border-radius: var(--r-pill); font-size: 0.66rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transform: scale(0); transition: transform var(--t-base) var(--e-out);
}
.trip-count.is-on { transform: scale(1); }
.trip-count.is-bump { animation: bump 380ms var(--e-out); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Menú móvil */
.mobilemenu {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  visibility: hidden; pointer-events: none;
}
.mobilemenu.is-open { visibility: visible; pointer-events: auto; }
.mobilemenu__scrim {
  position: absolute; inset: 0; background: oklch(0.155 0.03 250 / 0.55);
  opacity: 0; transition: opacity var(--t-slow) var(--e-out);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mobilemenu.is-open .mobilemenu__scrim { opacity: 1; }
.mobilemenu__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(88vw, 400px); background: var(--navy-950); color: var(--on-dark);
  display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 14px) 0 calc(var(--safe-b) + 18px);
  transform: translateX(100%);
  transition: transform 320ms var(--e-out);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobilemenu.is-open .mobilemenu__panel { transform: none; }
.mobilemenu__top { display: flex; align-items: center; justify-content: space-between; padding-inline: 20px; margin-bottom: 22px; }
.mobilemenu__top img { max-height: 30px; width: auto; }
.mobilemenu__list { padding-inline: 12px; display: grid; gap: 2px; }
.mobilemenu__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 12px; border-radius: var(--r-md);
  font-size: 1.06rem; font-weight: 500;
  transition: background-color var(--t-base) var(--e-out);
}
.mobilemenu__list a:hover, .mobilemenu__list a:active { background: oklch(1 0 0 / 0.08); }
.mobilemenu__list a span.count { font-size: var(--fs-xs); color: var(--on-dark-mute); }
.mobilemenu__sep { height: 1px; background: oklch(1 0 0 / 0.10); margin: 16px 24px; }
.mobilemenu__foot { margin-top: auto; padding: 18px 24px 0; display: grid; gap: 12px; }
.mobilemenu__meta { display: flex; gap: 10px; }
.mobilemenu__meta .chip {
  background: oklch(1 0 0 / 0.07); border-color: oklch(1 0 0 / 0.18); color: var(--on-dark-soft);
}
.mobilemenu__meta .chip.is-active { background: var(--aqua-400); color: var(--navy-950); border-color: var(--aqua-400); }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh; min-height: 100dvh;
  display: grid; grid-template-rows: 1fr auto;
  color: var(--on-dark); overflow: clip;
  background: var(--navy-950);
}
@media (min-width: 900px) { .hero { min-height: min(96svh, 900px); } }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, oklch(0.155 0.03 250 / 0.86) 0%, oklch(0.155 0.03 250 / 0.42) 28%, oklch(0.155 0.03 250 / 0.02) 55%),
    linear-gradient(to bottom, oklch(0.155 0.03 250 / 0.55) 0%, transparent 26%);
}
@media (min-width: 900px) {
  .hero__media video, .hero__media img { object-position: center 45%; }
  .hero__scrim {
    background:
      linear-gradient(100deg, oklch(0.155 0.03 250 / 0.82) 0%, oklch(0.155 0.03 250 / 0.55) 32%, oklch(0.155 0.03 250 / 0.06) 62%, transparent 78%),
      linear-gradient(to bottom, oklch(0.155 0.03 250 / 0.45) 0%, transparent 22%),
      linear-gradient(to top, oklch(0.155 0.03 250 / 0.35) 0%, transparent 30%);
  }
}
.hero__body {
  align-self: end;
  padding-block: 0 clamp(1.5rem, 4vw, 3rem);
  padding-inline: var(--gutter);
  max-width: var(--maxw); margin-inline: auto; width: 100%;
}
@media (min-width: 900px) {
  .hero { grid-template-rows: 1fr auto; }
  .hero__body { align-self: center; padding-block: 0; }
}
.hero__inner { max-width: 34ch; }
@media (min-width: 900px) { .hero__inner { max-width: 19ch; } }
.hero__eyebrow {
  font-size: var(--fs-eyebrow); letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; color: var(--aqua-300); display: block; margin-bottom: 14px;
}
.hero__title {
  font-family: var(--font-display); font-size: var(--fs-hero);
  line-height: 0.98; letter-spacing: -0.02em;
  text-shadow: 0 2px 28px oklch(0.155 0.03 250 / 0.5);
}
.hero__title em { font-style: italic; color: var(--aqua-300); }
.hero__sub {
  margin-top: clamp(0.85rem, 2vw, 1.35rem);
  font-size: var(--fs-lead); color: var(--on-dark-soft);
  max-width: 40ch; text-shadow: 0 1px 16px oklch(0.155 0.03 250 / 0.55);
}
@media (min-width: 900px) { .hero__sub { max-width: 44ch; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(1.15rem, 3vw, 1.85rem); }
.hero__cta .btn { flex: 1 1 auto; min-width: 150px; }
@media (min-width: 640px) { .hero__cta .btn { flex: 0 0 auto; } }

.hero__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter) clamp(1rem, 2.5vw, 1.5rem);
  max-width: var(--maxw); margin-inline: auto; width: 100%;
}
.hero__trust { display: flex; gap: 18px; font-size: var(--fs-xs); color: var(--on-dark-mute); flex-wrap: wrap; }
.hero__trust li { display: flex; align-items: center; gap: 6px; }
.hero__scroll {
  display: none; font-size: var(--fs-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-dark-mute);
  align-items: center; gap: 10px;
}
@media (min-width: 900px) { .hero__scroll { display: flex; } }
.hero__scroll span.line {
  width: 1px; height: 34px; background: linear-gradient(to bottom, transparent, var(--aqua-400));
  animation: scrollHint 2.2s var(--e-inout) infinite;
}
@keyframes scrollHint { 0%,100% { opacity: 0.35; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }
.hero__sound {
  position: absolute; inset-block-start: calc(var(--header-h) + var(--safe-t) + 12px);
  inset-inline-end: var(--gutter);
}

/* ---------- 9. Buscador flotante ---------- */
.finder {
  position: relative; z-index: var(--z-raised);
  margin-top: clamp(-2.5rem, -5vw, -3.5rem);
}
.finder__card {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-pop); border: 1px solid var(--line);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.finder__row { display: grid; gap: 10px; }
@media (min-width: 820px) { .finder__row { grid-template-columns: 1.6fr 1fr 1fr auto; align-items: end; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field__label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-mute);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.field__control {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out);
}
.field__control:focus-within { border-color: var(--aqua-600); background: var(--surface); }
.field__control svg { color: var(--text-mute); flex-shrink: 0; }
.field__control input, .field__control select {
  border: 0; background: none; outline: none; width: 100%; min-width: 0;
  font-size: 0.95rem; padding: 0; appearance: none;
}
.field__control select { cursor: pointer; }
.finder__hint { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.finder__hint span { font-size: var(--fs-xs); color: var(--text-mute); }
.finder__hint .chip { min-height: 36px; padding: 0 13px; font-size: var(--fs-xs); }

/* ---------- 10. Categorías ---------- */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .cats { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1000px) { .cats { grid-template-columns: repeat(5, 1fr); } }
.cat {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); aspect-ratio: 4 / 3;
  background: var(--navy-800); isolation: isolate;
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
@media (min-width: 1000px) { .cat { aspect-ratio: 3 / 4; } }
.cat:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.cat:active { transform: scale(0.985); }
.cat img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 500ms var(--e-out), filter var(--t-slow) var(--e-out);
}
.cat:hover img { transform: scale(1.06); }
.cat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, oklch(0.155 0.03 250 / 0.88) 4%, oklch(0.155 0.03 250 / 0.28) 46%, oklch(0.155 0.03 250 / 0.05) 78%);
}
.cat__body { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 12px 13px; color: var(--on-dark); }
.cat__title { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.2; }
@media (min-width: 700px) { .cat__title { font-size: 1.06rem; } }
.cat__meta { display: block; font-size: var(--fs-xs); color: var(--on-dark-mute); margin-top: 3px; }
.cat__icon {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center; color: var(--on-dark);
}

/* ---------- 11. Carrusel horizontal ---------- */
.rail { position: relative; }
.rail__track {
  display: grid; grid-auto-flow: column; gap: 12px;
  grid-auto-columns: minmax(228px, 76vw);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter); padding-block: 4px 14px;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
@media (min-width: 640px) { .rail__track { grid-auto-columns: minmax(252px, 40vw); gap: 16px; } }
@media (min-width: 1000px) { .rail__track { grid-auto-columns: minmax(288px, 1fr); grid-auto-flow: column; } }
.rail__nav { display: none; gap: 8px; }
@media (min-width: 1000px) { .rail__nav { display: flex; } }
.rail__nav .iconbtn {
  width: 40px; height: 40px; border: 1px solid var(--line-strong); background: var(--surface);
}
.section--dark .rail__nav .iconbtn { border-color: oklch(1 0 0 / 0.2); background: oklch(1 0 0 / 0.05); }
.rail__nav .iconbtn:disabled { opacity: 0.3; pointer-events: none; }
.rail__dots { display: flex; gap: 5px; justify-content: center; margin-top: 4px; }
@media (min-width: 1000px) { .rail__dots { display: none; } }
.rail__dots i {
  width: 5px; height: 5px; border-radius: var(--r-pill);
  background: var(--line-strong); transition: width var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out);
}
.rail__dots i.is-on { width: 18px; background: var(--navy-700); }
.section--dark .rail__dots i { background: oklch(1 0 0 / 0.22); }
.section--dark .rail__dots i.is-on { background: var(--aqua-400); }

/* ---------- 12. Tarjeta de experiencia ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; height: 100%;
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
.section--dark .card { background: var(--navy-900); border-color: oklch(1 0 0 / 0.09); color: var(--on-dark); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--e-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__tags { position: absolute; inset-block-start: 9px; inset-inline-start: 9px; display: flex; gap: 5px; flex-wrap: wrap; max-width: calc(100% - 60px); }
.card__fav {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  background: oklch(0.155 0.03 250 / 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center; color: var(--on-dark);
  transition: background-color var(--t-base) var(--e-out), transform var(--t-fast) var(--e-out), color var(--t-base) var(--e-out);
}
.card__fav:hover { background: oklch(0.155 0.03 250 / 0.62); }
.card__fav:active { transform: scale(0.9); }
.card__fav[aria-pressed="true"] { color: var(--coral-400); }
.card__fav[aria-pressed="true"] svg { fill: currentColor; }
.card__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
@media (min-width: 640px) { .card__body { padding: 14px 15px 16px; } }
.card__cat { font-size: var(--fs-xs); font-weight: 600; color: var(--aqua-700); letter-spacing: 0.05em; text-transform: uppercase; }
.section--dark .card__cat { color: var(--aqua-400); }
.card__title {
  font-size: 1rem; font-weight: 600; line-height: 1.28; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--text-mute); margin-top: 2px; }
.section--dark .card__meta { color: var(--on-dark-mute); }
.card__meta li { display: flex; align-items: center; gap: 4px; }
.card__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.card__price { line-height: 1.15; }
.card__price small { display: block; font-size: var(--fs-xs); color: var(--text-mute); font-weight: 500; }
.section--dark .card__price small { color: var(--on-dark-mute); }
.card__price b { font-size: 1.02rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.card__price .askprice { font-size: 0.9rem; font-weight: 600; color: var(--text-soft); }
.card__add {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  background: var(--navy-900); color: var(--on-dark);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background-color var(--t-base) var(--e-out), transform var(--t-fast) var(--e-out);
}
.card__add:hover { background: var(--gold-500); color: var(--navy-950); }
.card__add:active { transform: scale(0.92); }
.card__add.is-in { background: var(--ok); color: #fff; }
.section--dark .card__add { background: var(--aqua-500); color: var(--navy-950); }
.card__media, .card__body { position: relative; }
.card__fav, .card__add { position: relative; z-index: 2; }
.card__fav { position: absolute; }

/* Variante ancha (mosaico editorial) */
.card--wide { flex-direction: row; align-items: stretch; }
.card--wide .card__media { aspect-ratio: 1; width: 40%; flex-shrink: 0; }
.card--wide .card__body { padding: 12px 14px; }

/* Variante grande (destacada) */
.card--feature .card__media { aspect-ratio: 3 / 4; }
@media (min-width: 900px) { .card--feature .card__media { aspect-ratio: 4 / 5; } }

/* ---------- 13. Rejilla de catálogo ---------- */
.grid-cards {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
@media (min-width: 560px) { .grid-cards { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (min-width: 1000px) { .grid-cards { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); } }

/* ---------- 14. Mosaico editorial ---------- */
.mosaic { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .mosaic { gap: 14px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; } }
.mosaic__item {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 1; isolation: isolate; background: var(--navy-800);
  transition: transform var(--t-base) var(--e-out);
}
@media (min-width: 900px) { .mosaic__item { aspect-ratio: auto; } }
.mosaic__item:hover { transform: translateY(-3px); }
.mosaic__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms var(--e-out); }
.mosaic__item:hover img { transform: scale(1.05); }
.mosaic__item::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, oklch(0.155 0.03 250 / 0.85), oklch(0.155 0.03 250 / 0.12) 55%, transparent);
}
.mosaic__item--tall { grid-row: span 2; aspect-ratio: 3/4; }
@media (min-width: 900px) { .mosaic__item--tall { aspect-ratio: auto; } }
.mosaic__item--wide { grid-column: span 2; aspect-ratio: 3/2; }
@media (min-width: 900px) { .mosaic__item--wide { aspect-ratio: auto; } }
.mosaic__body { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 14px; color: var(--on-dark); }
.mosaic__body h3 { font-size: 1.05rem; font-weight: 600; }
.mosaic__body p { font-size: var(--fs-xs); color: var(--on-dark-mute); margin-top: 2px; }

/* ---------- 15. Bloque editorial ---------- */
.editorial { position: relative; overflow: clip; }
.editorial__media { position: relative; }
.editorial__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-lg); }
@media (min-width: 900px) { .editorial__media img { aspect-ratio: 4/5; } }
.editorial__grid { display: grid; gap: clamp(1.25rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .editorial__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .editorial--rev .editorial__media { order: 2; } }
.editorial__title { font-family: var(--font-display); font-size: var(--fs-h2); margin-top: 12px; }
.editorial__text { margin-top: 14px; color: var(--text-soft); font-size: var(--fs-lead); }
.section--dark .editorial__text { color: var(--on-dark-soft); }
.editorial__list { margin-top: 18px; display: grid; gap: 10px; }
.editorial__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; }
.editorial__list svg { color: var(--aqua-600); flex-shrink: 0; margin-top: 2px; }
.section--dark .editorial__list svg { color: var(--aqua-400); }

/* Franja a sangre con cita */
.bleed {
  position: relative; isolation: isolate; overflow: clip;
  min-height: clamp(360px, 62svh, 620px);
  display: grid; place-items: end start;
  color: var(--on-dark);
}
.bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bleed::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, oklch(0.155 0.03 250 / 0.86), oklch(0.155 0.03 250 / 0.30) 48%, oklch(0.155 0.03 250 / 0.10));
}
.bleed__inner { padding: var(--gutter); padding-block-end: clamp(1.5rem, 4vw, 3rem); max-width: var(--maxw); margin-inline: auto; width: 100%; }
.bleed__quote { font-family: var(--font-display); font-size: var(--fs-h1); max-width: 18ch; line-height: 1.02; }
.bleed__quote em { font-style: italic; color: var(--aqua-300); }

/* ---------- 16. Arma tu Cartagena (quiz) ---------- */
.quiz { background: var(--navy-950); color: var(--on-dark); border-radius: var(--r-xl); overflow: hidden; }
.quiz__inner { padding: clamp(1.25rem, 4vw, 2.75rem); }
.quiz__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.quiz__steps { display: flex; gap: 5px; margin-top: 16px; }
.quiz__steps i { height: 3px; flex: 1; border-radius: 3px; background: oklch(1 0 0 / 0.14); transition: background-color var(--t-slow) var(--e-out); }
.quiz__steps i.is-on { background: var(--aqua-400); }
.quiz__q { margin-top: 22px; }
.quiz__q h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 4.5vw, 2rem); }
.quiz__opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
@media (min-width: 700px) { .quiz__opts { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
.quiz__opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 13px; border-radius: var(--r-md); text-align: start;
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.12);
  transition: background-color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out), transform var(--t-fast) var(--e-out);
  min-height: 74px; justify-content: center;
}
.quiz__opt:hover { background: oklch(1 0 0 / 0.10); border-color: oklch(1 0 0 / 0.28); }
.quiz__opt:active { transform: scale(0.97); }
.quiz__opt[aria-pressed="true"] { background: var(--aqua-400); border-color: var(--aqua-400); color: var(--navy-950); }
.quiz__opt svg { color: var(--aqua-400); }
.quiz__opt[aria-pressed="true"] svg { color: var(--navy-950); }
.quiz__opt b { font-size: 0.94rem; font-weight: 600; }
.quiz__opt span { font-size: var(--fs-xs); opacity: 0.7; }
.quiz__nav { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.quiz__result { display: grid; gap: 14px; }
.quiz__resultgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
@media (min-width: 700px) { .quiz__resultgrid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

/* ---------- 17. Embarcaciones ---------- */
.boat {
  display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden;
  background: var(--navy-900); color: var(--on-dark); border: 1px solid oklch(1 0 0 / 0.09);
}
@media (min-width: 860px) { .boat { grid-template-columns: 1.15fr 1fr; } }
.boat__media { position: relative; aspect-ratio: 4/3; background: var(--navy-800); }
@media (min-width: 860px) { .boat__media { aspect-ratio: auto; min-height: 380px; } }
.boat__media img { width: 100%; height: 100%; object-fit: cover; }
.boat__thumbs { position: absolute; inset-block-end: 10px; inset-inline: 10px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.boat__thumbs::-webkit-scrollbar { display: none; }
.boat__thumbs button {
  width: 48px; height: 38px; border-radius: var(--r-xs); overflow: hidden; flex-shrink: 0;
  border: 2px solid transparent; opacity: 0.65;
  transition: opacity var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.boat__thumbs button.is-on { opacity: 1; border-color: var(--aqua-400); }
.boat__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.boat__body { padding: clamp(1.1rem, 3vw, 1.9rem); display: flex; flex-direction: column; }
.boat__name { font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.4rem); }
.boat__type { font-size: var(--fs-sm); color: var(--aqua-400); margin-top: 4px; font-weight: 500; }
.boat__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
@media (min-width: 480px) { .boat__specs { grid-template-columns: repeat(4, 1fr); } }
.boat__spec { padding: 10px; border-radius: var(--r-sm); background: oklch(1 0 0 / 0.05); }
.boat__spec b { display: block; font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.boat__spec span { font-size: var(--fs-xs); color: var(--on-dark-mute); }
.boat__amen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.boat__amen li {
  font-size: var(--fs-xs); padding: 5px 10px; border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.06); color: var(--on-dark-soft);
}
.boat__foot { margin-top: auto; padding-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Comparador */
.compare { overflow-x: auto; scrollbar-width: thin; }
.compare table { width: 100%; border-collapse: collapse; min-width: 520px; }
.compare th, .compare td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); font-size: 0.92rem; vertical-align: top; }
.compare thead th { font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); }
.compare tbody th { font-weight: 500; color: var(--text-mute); width: 132px; }
.compare td b { font-weight: 600; }
.compare__pick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* ---------- 18. Mapa ---------- */
.mapwrap { display: grid; gap: 14px; }
@media (min-width: 940px) { .mapwrap { grid-template-columns: 340px 1fr; align-items: stretch; } }
.map {
  height: clamp(320px, 48svh, 520px); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2); position: relative; z-index: 0;
}
@media (min-width: 940px) { .map { height: 520px; } }
.map__hint {
  position: absolute; inset-block-end: 10px; inset-inline-start: 10px; z-index: 500;
  font-size: var(--fs-xs); background: oklch(1 0 0 / 0.92); padding: 6px 10px;
  border-radius: var(--r-pill); box-shadow: var(--sh-1); color: var(--text-soft);
  pointer-events: none; opacity: 0; transition: opacity var(--t-slow) var(--e-out);
}
.map__hint.is-on { opacity: 1; }
.maplist { display: grid; gap: 8px; max-height: 520px; overflow-y: auto; scrollbar-width: thin; padding-inline-end: 4px; }
@media (max-width: 939px) {
  .maplist { grid-auto-flow: column; grid-auto-columns: 224px; overflow-x: auto; max-height: none;
    scroll-snap-type: x mandatory; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); }
  .maplist > * { scroll-snap-align: start; }
}
.maplist__item {
  display: flex; gap: 10px; align-items: center; text-align: start;
  padding: 9px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); width: 100%;
  transition: border-color var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out), transform var(--t-fast) var(--e-out);
}
.maplist__item:hover { border-color: var(--navy-500); }
.maplist__item:active { transform: scale(0.985); }
.maplist__item.is-active { border-color: var(--aqua-600); background: var(--aqua-200); }
.maplist__item img { width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.maplist__item b { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.25; }
.maplist__item span { font-size: var(--fs-xs); color: var(--text-mute); }
.leaflet-popup-content-wrapper { border-radius: var(--r-md) !important; box-shadow: var(--sh-3) !important; padding: 0 !important; overflow: hidden; }
.leaflet-popup-content { margin: 0 !important; width: 232px !important; font-family: var(--font-ui); }
.leaflet-container { font-family: var(--font-ui); background: var(--surface-2) !important; }
.mappop img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.mappop__b { padding: 10px 12px 12px; }
.mappop__b .k { font-size: var(--fs-xs); color: var(--aqua-700); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.mappop__b b { display: block; font-size: 0.94rem; margin: 3px 0 6px; line-height: 1.25; }
.mappop__b .m { font-size: var(--fs-xs); color: var(--text-mute); display: flex; gap: 10px; margin-bottom: 9px; }
.marker-pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--navy-900); border: 2px solid var(--on-dark);
  box-shadow: 0 3px 8px oklch(0.155 0.03 250 / 0.35);
  display: grid; place-items: center;
}
.marker-pin span { transform: rotate(45deg); color: var(--on-dark); display: grid; place-items: center; }
.marker-pin.is-sea { background: var(--aqua-600); }
.marker-pin.is-culture { background: var(--gold-600); }
.marker-pin.is-nature { background: oklch(0.52 0.09 150); }
.marker-pin.is-city { background: var(--navy-700); }
.marker-pin.is-active { background: var(--coral-500); transform: rotate(-45deg) scale(1.18); }

/* ---------- 19. Sostenibilidad ---------- */
.sust { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .sust { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.sust__item {
  padding: 14px; border-radius: var(--r-md);
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.10);
}
.sust__item svg { color: var(--aqua-400); margin-bottom: 9px; }
.sust__item b { display: block; font-size: 0.95rem; font-weight: 600; }
.sust__item p { font-size: var(--fs-xs); color: var(--on-dark-mute); margin-top: 5px; line-height: 1.5; }

/* ---------- 20. Testimonios ---------- */
.testi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; height: 100%;
}
.testi__stars { display: flex; gap: 2px; color: var(--gold-500); }
.testi__text { font-size: 0.95rem; color: var(--text-soft); flex: 1; }
.testi__who { display: flex; align-items: center; gap: 10px; }
.testi__avatar {
  width: 38px; height: 38px; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center; font-weight: 650; font-size: 0.85rem;
  background: var(--aqua-200); color: var(--aqua-700);
}
.testi__who b { display: block; font-size: 0.88rem; font-weight: 600; }
.testi__who span { font-size: var(--fs-xs); color: var(--text-mute); }
.demo-note {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: var(--fs-xs); color: var(--text-mute);
}

/* ---------- 21. FAQ ---------- */
.faq { display: grid; gap: 8px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.faq__item[open] { border-color: var(--line-strong); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 0.95rem;
  transition: background-color var(--t-base) var(--e-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--surface-2); }
.faq__q svg { flex-shrink: 0; color: var(--text-mute); transition: transform var(--t-base) var(--e-out); }
.faq__item[open] .faq__q svg { transform: rotate(45deg); }
.faq__a { padding: 0 16px 16px; color: var(--text-soft); font-size: 0.93rem; }
.faq__a p + p { margin-top: 10px; }
.faq__a ul { display: grid; gap: 6px; margin-top: 8px; }
.faq__a li { padding-inline-start: 16px; position: relative; }
.faq__a li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--aqua-600); }

/* ---------- 22. Barra inferior móvil ---------- */
.bottomnav {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-bottomnav);
  background: oklch(1 0 0 / 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-block-start: 1px solid var(--line);
  padding-block-end: var(--safe-b);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 900px) { .bottomnav { display: none; } }
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 58px; font-size: 0.66rem; font-weight: 550; color: var(--text-mute);
  position: relative;
  transition: color var(--t-base) var(--e-out);
}
.bottomnav a[aria-current="page"] { color: var(--navy-900); }
.bottomnav a:active { color: var(--aqua-700); }
.bottomnav a .dot {
  position: absolute; inset-block-start: 6px; inset-inline-start: calc(50% + 8px);
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--gold-500); color: var(--navy-950);
  border-radius: var(--r-pill); font-size: 0.6rem; font-weight: 700;
  display: grid; place-items: center; transform: scale(0);
  transition: transform var(--t-base) var(--e-out);
}
.bottomnav a .dot.is-on { transform: scale(1); }

/* FAB WhatsApp */
.fab-wa {
  position: fixed; inset-inline-end: 14px;
  inset-block-end: calc(var(--bottomnav-h) + 14px);
  z-index: var(--z-fab);
  width: 50px; height: 50px; border-radius: var(--r-pill);
  background: #1faf54; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px oklch(0.5 0.15 150 / 0.35);
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.fab-wa:hover { transform: translateY(-2px); }
.fab-wa:active { transform: scale(0.93); }
@media (min-width: 900px) { .fab-wa { inset-inline-end: 22px; inset-block-end: 22px; width: 56px; height: 56px; } }

/* ---------- 23. Drawer / bottom sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; pointer-events: none; }
.sheet.is-open { visibility: visible; pointer-events: auto; }
.sheet__scrim {
  position: absolute; inset: 0; background: oklch(0.155 0.03 250 / 0.5);
  opacity: 0; transition: opacity var(--t-slow) var(--e-out);
}
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet__panel {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  max-height: 88svh; background: var(--surface);
  border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 340ms var(--e-out);
  padding-block-end: var(--safe-b);
}
.sheet.is-open .sheet__panel { transform: none; }
@media (min-width: 900px) {
  .sheet__panel {
    inset-block: 0; inset-inline-start: auto; inset-inline-end: 0;
    width: min(94vw, 440px); max-height: none; border-radius: 0;
    transform: translateX(100%);
  }
}
.sheet__grab { width: 38px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 9px auto 0; }
@media (min-width: 900px) { .sheet__grab { display: none; } }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 12px; border-block-end: 1px solid var(--line);
}
.sheet__head h2 { font-family: var(--font-display); font-size: 1.35rem; }
.sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; }
.sheet__foot { border-block-start: 1px solid var(--line); padding: 14px 16px; background: var(--surface); display: grid; gap: 10px; }

/* Ítems de Mi Viaje */
.tripitem { display: flex; gap: 11px; padding: 11px 0; border-block-end: 1px solid var(--line); }
.tripitem:last-child { border-block-end: 0; }
.tripitem img { width: 76px; height: 76px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.tripitem__b { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: start; }
.tripitem__b b { font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
.tripitem__b .meta { font-size: var(--fs-xs); color: var(--text-mute); }
.tripitem__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.tripitem__price { font-weight: 650; font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2px; }
.stepper button { width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--text-soft); transition: background-color var(--t-fast) var(--e-out); }
.stepper button:hover { background: var(--surface-2); }
.stepper button:disabled { opacity: 0.3; pointer-events: none; }
.stepper output { min-width: 22px; text-align: center; font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.triptotal { display: grid; gap: 6px; font-size: 0.9rem; }
.triptotal div { display: flex; justify-content: space-between; gap: 12px; }
.triptotal .grand { font-size: 1.05rem; font-weight: 650; padding-top: 8px; border-top: 1px solid var(--line); }
.triptotal .note { font-size: var(--fs-xs); color: var(--text-mute); }

/* ---------- 24. Modal / lightbox ---------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; pointer-events: none; }
.modal.is-open { visibility: visible; pointer-events: auto; }
.modal__scrim { position: absolute; inset: 0; background: oklch(0.11 0.02 250 / 0.92); opacity: 0; transition: opacity var(--t-slow) var(--e-out); }
.modal.is-open .modal__scrim { opacity: 1; }
.modal__panel {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto;
  padding-block-start: var(--safe-t); padding-block-end: var(--safe-b);
  opacity: 0; transition: opacity var(--t-slow) var(--e-out);
}
.modal.is-open .modal__panel { opacity: 1; }
.modal__top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; color: var(--on-dark); }
.modal__count { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--on-dark-mute); }
.lightbox__stage { position: relative; display: grid; place-items: center; overflow: hidden; padding: 0 10px; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); }
.lightbox__arrow {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.14); color: var(--on-dark); display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--t-base) var(--e-out);
}
.lightbox__arrow:hover { background: oklch(1 0 0 / 0.26); }
.lightbox__arrow--prev { inset-inline-start: 10px; }
.lightbox__arrow--next { inset-inline-end: 10px; }
.lightbox__thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 12px 14px; scrollbar-width: none; }
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumbs button { width: 56px; height: 42px; border-radius: var(--r-xs); overflow: hidden; flex-shrink: 0; opacity: 0.5; border: 2px solid transparent; transition: opacity var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out); }
.lightbox__thumbs button.is-on { opacity: 1; border-color: var(--aqua-400); }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 25. Filtros ---------- */
.filterbar {
  position: sticky; inset-block-start: calc(var(--header-h) + var(--safe-t)); z-index: var(--z-sticky);
  background: oklch(0.987 0.003 250 / 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-block-end: 1px solid var(--line);
  padding-block: 10px;
}
.filterbar__row { display: flex; gap: 8px; align-items: center; }
.filterbar__chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; flex: 1; padding-block: 2px; }
.filterbar__chips::-webkit-scrollbar { display: none; }
.filterbar__count { font-size: var(--fs-xs); color: var(--text-mute); white-space: nowrap; }
.filters__group { padding-block: 16px; border-block-end: 1px solid var(--line); }
.filters__group:last-child { border-block-end: 0; }
.filters__group h4 { font-size: var(--fs-sm); font-weight: 650; margin-bottom: 10px; }
.filters__opts { display: flex; flex-wrap: wrap; gap: 7px; }
.range { display: grid; gap: 10px; }
.range__vals { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--aqua-600); }

/* ---------- 26. Estados ---------- */
.empty { text-align: center; padding: clamp(2rem, 8vw, 4rem) var(--gutter); display: grid; gap: 12px; justify-items: center; }
.empty__icon { width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--surface-3); display: grid; place-items: center; color: var(--text-mute); }
.empty h3 { font-family: var(--font-display); font-size: 1.5rem; }
.empty p { color: var(--text-soft); max-width: 44ch; font-size: 0.95rem; }
.empty__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -135% 0; } }
.skel-card { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.skel-card .a { aspect-ratio: 4/3; }
.skel-card .b { height: 12px; margin: 12px 13px 0; border-radius: 4px; }
.skel-card .c { height: 12px; margin: 8px 13px 16px; width: 60%; border-radius: 4px; }

/* Toast */
.toasts { position: fixed; inset-block-end: calc(var(--bottomnav-h) + 70px); inset-inline: 0; z-index: var(--z-toast); display: grid; gap: 8px; justify-items: center; pointer-events: none; padding-inline: 14px; }
@media (min-width: 900px) { .toasts { inset-block-end: 22px; inset-inline-start: auto; inset-inline-end: 22px; justify-items: end; } }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy-900); color: var(--on-dark);
  padding: 11px 15px; border-radius: var(--r-pill);
  box-shadow: var(--sh-pop); font-size: 0.88rem; font-weight: 500;
  pointer-events: auto; max-width: min(92vw, 400px);
  animation: toastIn 280ms var(--e-out);
}
.toast svg { color: var(--aqua-400); flex-shrink: 0; }
.toast.is-out { animation: toastOut 220ms var(--e-inout) forwards; }
.toast a { color: var(--aqua-400); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ---------- 27. Detalle de experiencia ---------- */
.detail { padding-block-start: calc(var(--header-h) + var(--safe-t)); }
.crumbs { display: flex; gap: 6px; align-items: center; font-size: var(--fs-xs); color: var(--text-mute); padding-block: 14px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.gallery { display: grid; gap: 6px; border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 800px) { .gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 470px; } }
.gallery__item { position: relative; overflow: hidden; background: var(--surface-3); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--e-out); }
.gallery__item:hover img { transform: scale(1.04); }
@media (min-width: 800px) { .gallery__item:first-child { grid-row: span 2; } }
@media (max-width: 799px) {
  .gallery { grid-auto-flow: column; grid-auto-columns: 88%; overflow-x: auto; scroll-snap-type: x mandatory;
    border-radius: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery__item { scroll-snap-align: start; aspect-ratio: 4/3; border-radius: var(--r-md); }
}
.gallery__more {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px;
  background: oklch(1 0 0 / 0.94); color: var(--text); font-size: var(--fs-xs); font-weight: 600;
  padding: 8px 13px; border-radius: var(--r-pill); box-shadow: var(--sh-2);
  display: flex; align-items: center; gap: 6px;
}
.detail__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: clamp(1.25rem, 3vw, 2.25rem); }
@media (min-width: 940px) { .detail__grid { grid-template-columns: 1fr 380px; } }
.detail__title { font-family: var(--font-display); font-size: var(--fs-h1); }
.detail__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
@media (min-width: 620px) { .detail__facts { grid-template-columns: repeat(4, 1fr); } }
.fact { padding: 11px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.fact svg { color: var(--aqua-700); margin-bottom: 6px; }
.fact b { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
.fact span { font-size: var(--fs-xs); color: var(--text-mute); }
.detail__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-block-end: 1px solid var(--line); margin-top: 26px; }
.detail__tabs::-webkit-scrollbar { display: none; }
.detail__tab {
  padding: 11px 13px; font-size: 0.9rem; font-weight: 600; color: var(--text-mute);
  border-block-end: 2px solid transparent; white-space: nowrap;
  transition: color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.detail__tab[aria-selected="true"] { color: var(--text); border-block-end-color: var(--navy-900); }
.tabpanel { padding-block: 18px; }
.tabpanel[hidden] { display: none; }
.prose { color: var(--text-soft); font-size: 0.97rem; line-height: 1.68; }
.prose p + p { margin-top: 12px; }
.prose h3 { font-size: 1.1rem; font-weight: 650; color: var(--text); margin: 20px 0 8px; letter-spacing: 0; }
.prose ul { display: grid; gap: 7px; margin-top: 10px; }
.prose li { padding-inline-start: 18px; position: relative; }
.prose li::before { content: ""; position: absolute; inset-inline-start: 5px; inset-block-start: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--aqua-600); }
.inc-exc { display: grid; gap: 16px; }
@media (min-width: 640px) { .inc-exc { grid-template-columns: 1fr 1fr; gap: 22px; } }
.inc-exc h4 { font-size: 0.95rem; font-weight: 650; display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.inc-exc ul { display: grid; gap: 8px; }
.inc-exc li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.92rem; color: var(--text-soft); }
.inc-exc li svg { flex-shrink: 0; margin-top: 3px; }
.inc li svg { color: var(--ok); }
.exc li svg { color: var(--text-mute); }

.booking {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  padding: 16px; box-shadow: var(--sh-2);
}
@media (min-width: 940px) { .booking { position: sticky; inset-block-start: calc(var(--header-h) + 18px); } }
.booking__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.booking__price b { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.booking__price small { color: var(--text-mute); font-size: var(--fs-sm); }
.booking__fields { display: grid; gap: 10px; margin-top: 16px; }
.booking__sum { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.booking__actions { display: grid; gap: 8px; margin-top: 14px; }
.booking__note { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 10px; display: flex; gap: 7px; align-items: flex-start; }
.booking__note svg { flex-shrink: 0; margin-top: 2px; }

/* Barra fija móvil en detalle */
.stickybar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky);
  background: oklch(1 0 0 / 0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--line);
  padding: 10px var(--gutter) calc(10px + var(--safe-b));
  display: flex; align-items: center; gap: 12px;
  transform: translateY(110%); transition: transform var(--t-slow) var(--e-out);
}
.stickybar.is-on { transform: none; }
@media (min-width: 940px) { .stickybar { display: none; } }
.stickybar__price { line-height: 1.15; flex: 1; min-width: 0; }
.stickybar__price small { display: block; font-size: var(--fs-xs); color: var(--text-mute); }
.stickybar__price b { font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; }
body.has-stickybar { padding-bottom: calc(var(--bottomnav-h) + 66px); }
body.has-stickybar .bottomnav { display: none; }
body.has-stickybar .fab-wa { inset-block-end: calc(74px + var(--safe-b)); }

/* ---------- 28. Checkout ---------- */
.steps { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.steps__i { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-mute); }
.steps__i b { width: 24px; height: 24px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--surface-3); font-size: 0.72rem; font-weight: 700; }
.steps__i.is-on { color: var(--text); font-weight: 600; }
.steps__i.is-on b { background: var(--navy-900); color: var(--on-dark); }
.steps__i.is-done b { background: var(--ok); color: #fff; }
.steps__line { flex: 1; height: 1px; background: var(--line-strong); }
.form { display: grid; gap: 14px; }
.form__row { display: grid; gap: 14px; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: 6px; }
.form__field > label { font-size: var(--fs-sm); font-weight: 600; }
.form__field input, .form__field select, .form__field textarea {
  min-height: 48px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  outline: none; width: 100%;
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.form__field textarea { min-height: 96px; resize: vertical; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  border-color: var(--aqua-600); box-shadow: 0 0 0 3px oklch(0.66 0.093 193 / 0.16);
}
.form__field .err { font-size: var(--fs-xs); color: var(--err); display: none; align-items: center; gap: 5px; }
.form__field.is-invalid input, .form__field.is-invalid select, .form__field.is-invalid textarea { border-color: var(--err); }
.form__field.is-invalid .err { display: flex; }
.form__hint { font-size: var(--fs-xs); color: var(--text-mute); }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--text-soft); }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--aqua-600); flex-shrink: 0; }

.success { text-align: center; display: grid; gap: 14px; justify-items: center; padding-block: clamp(1.5rem, 5vw, 3rem); }
.success__icon { width: 62px; height: 62px; border-radius: var(--r-pill); background: oklch(0.92 0.06 155); color: var(--ok); display: grid; place-items: center; }
.success__code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.15rem; font-weight: 600;
  letter-spacing: 0.06em; background: var(--surface-2); padding: 10px 18px; border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
}
.success__next { text-align: start; display: grid; gap: 10px; max-width: 480px; width: 100%; margin-top: 8px; }
.success__next li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text-soft); }
.success__next b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.success__num { width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--navy-900); color: var(--on-dark); display: grid; place-items: center; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* ---------- 29. Footer ---------- */
.footer { background: var(--navy-950); color: var(--on-dark); padding-block: clamp(2.25rem, 5vw, 4rem) 0; }
.footer__grid { display: grid; gap: 26px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; } }
.footer__brand img { max-height: 34px; width: auto; margin-bottom: 14px; }
.footer__brand p { font-size: 0.88rem; color: var(--on-dark-mute); max-width: 34ch; }
.footer__social { display: flex; gap: 8px; margin-top: 16px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: oklch(1 0 0 / 0.07); color: var(--on-dark-soft);
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out), transform var(--t-fast) var(--e-out);
}
.footer__social a:hover { background: var(--aqua-400); color: var(--navy-950); }
.footer__social a:active { transform: scale(0.93); }
.footer__col h4 { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua-400); font-weight: 600; margin-bottom: 12px; }
.footer__col ul { display: grid; gap: 9px; }
.footer__col a { font-size: 0.88rem; color: var(--on-dark-soft); transition: color var(--t-base) var(--e-out); }
.footer__col a:hover { color: var(--on-dark); }
.footer__bottom {
  margin-top: 30px; border-block-start: 1px solid oklch(1 0 0 / 0.10);
  padding-block: 18px calc(18px + var(--bottomnav-h));
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--on-dark-mute);
}
.footer__bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__bottom a:hover { color: var(--on-dark); }

/* ---------- 30. Revelado en scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 460ms var(--e-out), transform 460ms var(--e-out); }

/* ---------- 31. Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card:hover, .cat:hover, .mosaic__item:hover { transform: none; }
  .card:hover .card__media img, .cat:hover img, .mosaic__item:hover img { transform: none; }
}

/* ---------- 32. Impresión ---------- */
@media print {
  .header, .bottomnav, .fab-wa, .stickybar, #loader, .sheet, .modal { display: none !important; }
  body { padding: 0; background: #fff; }
}

/* ---------- 33. Ajustes de compacidad móvil ---------- */
@media (max-width: 699px) {
  .cats--rail {
    grid-template-columns: none;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scroll-padding-inline: var(--gutter);
  }
  .cats--rail::-webkit-scrollbar { display: none; }
  .cats--rail > * { scroll-snap-align: start; aspect-ratio: 5 / 4; }
}
.sm-show { position: static; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; }
@media (max-width: 520px) { .sm-show { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } }
.filt-n { font-size: var(--fs-xs); font-weight: 700; color: var(--aqua-700); }

/* Selects nativos dentro de chips */
select.chip { appearance: none; background-image: none; padding-inline-end: 12px; }

/* Tarjeta: la superficie completa es enlace, pero los botones quedan por encima */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__media, .card__body { position: relative; }
.card__fav, .card__add { position: relative; z-index: 2; }
.card__fav { position: absolute; }

/* Galería en detalle: primera imagen destacada en escritorio */
@media (min-width: 800px) {
  .gallery { grid-template-areas: "a b c" "a d e"; }
  .gallery__item:nth-child(1) { grid-area: a; }
  .gallery__item:nth-child(2) { grid-area: b; }
  .gallery__item:nth-child(3) { grid-area: c; }
  .gallery__item:nth-child(4) { grid-area: d; }
  .gallery__item:nth-child(5) { grid-area: e; }
}

/* Mapa: en móvil la lista va antes */
@media (max-width: 939px) {
  .mapwrap { grid-template-columns: 1fr !important; }
  .mapwrap .maplist { order: 2; }
  .mapwrap .map { order: 1; }
}

/* ---------- 34. Accesibilidad táctil y legibilidad (QA) ---------- */
.bottomnav a { font-size: 0.72rem; }
.bottomnav a .dot { font-size: 0.66rem; min-width: 17px; height: 17px; }
.trip-count { font-size: 0.7rem; min-width: 19px; height: 19px; }

.footer__bottom nav a { padding-block: 8px; display: inline-flex; align-items: center; min-height: 34px; }
.footer__bottom > span { padding-block: 6px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 34px; }
.footer__legal { font-size: 0.78rem; }

.crumbs { padding-block: 10px; }
.crumbs a { padding-block: 8px; display: inline-flex; align-items: center; min-height: 34px; }
.crumbs > span:last-child { padding-block: 8px; display: inline-flex; align-items: center; }

.sec-head__link { padding: 10px 2px; min-height: 40px; }

/* El input ocupa toda la altura del control para que el toque no falle */
.field__control input,
.field__control select { padding-block: 13px; }
.field__control { padding-block: 0; }

/* Controles de Leaflet con tamaño táctil */
.leaflet-touch .leaflet-bar a,
.leaflet-bar a { width: 36px !important; height: 36px !important; line-height: 36px !important; font-size: 20px !important; }
.leaflet-control-attribution { font-size: 10px; }

/* ---------- 35. Flota compacta en móvil ---------- */
@media (max-width: 859px) {
  .boat__media { aspect-ratio: 16 / 11; }
  .boat__body { padding: 14px; }
  .boat__name { font-size: 1.55rem; }
  .boat__specs { gap: 7px; margin-top: 14px; }
  .boat__spec { padding: 8px 9px; }
  .boat__spec b { font-size: 0.98rem; }
  .boat__amen { max-height: 4.6rem; overflow: hidden; position: relative; }
  .boat__amen.is-open { max-height: none; }
  .boat__amen-more {
    font-size: var(--fs-xs); font-weight: 600; color: var(--aqua-400);
    margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; min-height: 34px;
  }
  .boat__foot { padding-top: 14px; }
  .boat__foot .btn { flex: 1 1 100%; }
}
@media (min-width: 860px) { .boat__amen-more { display: none; } }

/* ---------- 36. Densidad de cabecera de sección en móvil ---------- */
@media (max-width: 559px) {
  .sec-head { margin-bottom: 14px; }
  .sec-head__sub { font-size: 0.86rem; }
  .section { padding-block: 2.5rem; }
  .section--tight { padding-block: 1.9rem; }
}

/* ---------- 37. Correcciones de QA visual ---------- */
/* Enlace estirado correcto: el pseudo-elemento cubre la tarjeta, el <a> queda en flujo */
.card__title { position: static; }
.card__link { position: static; display: block; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card { position: relative; }

/* Hero: el pie no puede quedar bajo la barra inferior */
.hero__foot { padding-block-end: calc(clamp(0.75rem, 2vw, 1.5rem) + var(--bottomnav-h)); }
@media (min-width: 900px) { .hero__foot { padding-block-end: clamp(1rem, 2.5vw, 1.5rem); } }

/* Hero móvil: velo inferior más firme para que el texto se lea sobre cualquier fotograma */
@media (max-width: 899px) {
  .hero__scrim {
    background:
      linear-gradient(to top, oklch(0.155 0.03 250 / 0.94) 0%, oklch(0.155 0.03 250 / 0.78) 22%, oklch(0.155 0.03 250 / 0.34) 46%, oklch(0.155 0.03 250 / 0.04) 68%),
      linear-gradient(to bottom, oklch(0.155 0.03 250 / 0.62) 0%, transparent 24%);
  }
  .hero__eyebrow { color: var(--aqua-200); }
}

/* Tarjeta de categoría: el texto siempre legible */
.cat::after {
  background: linear-gradient(to top, oklch(0.155 0.03 250 / 0.92) 2%, oklch(0.155 0.03 250 / 0.45) 42%, oklch(0.155 0.03 250 / 0.06) 76%);
}

/* El recorte de líneas debe ir en el <a>: un hijo flex directo pierde -webkit-box */
.card__title { display: block; overflow: hidden; }
.card__link {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}

/* ---------- 38. Testimonios: la firma no debe estrangularse ---------- */
.testi__who { flex-wrap: wrap; row-gap: 8px; }
.testi__who > div { min-width: 0; flex: 1 1 auto; }
.testi__who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testi__who span { display: block; }
.testi__who .badge { flex-shrink: 0; }
@media (max-width: 520px) {
  .testi { padding: 14px; gap: 10px; }
  .testi__who .badge { order: 3; margin-inline-start: 0 !important; }
}

/* ---------- 39. Pie compacto en móvil ---------- */
@media (max-width: 759px) {
  .footer { padding-block-start: 2.25rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col ul { gap: 2px; }
  .footer__col a { min-height: 34px; font-size: 0.86rem; }
  .footer__col h4 { margin-bottom: 8px; }
  .footer__bottom { margin-top: 22px; padding-block: 14px; }
}

/* ---------- 40. Franja editorial más contenida en móvil ---------- */
@media (max-width: 699px) {
  .bleed { min-height: clamp(300px, 46svh, 420px); }
  .bleed__quote { font-size: clamp(1.7rem, 7.6vw, 2.4rem); max-width: 15ch; }
}

/* Eyebrow del hero en una sola línea */
@media (max-width: 480px) { .hero__eyebrow { letter-spacing: 0.14em; font-size: 0.74rem; } }

/* ---------- 41. Hero: escala tipográfica corregida en escritorio ---------- */
:root { --fs-hero: clamp(2.2rem, 8.2vw, 3.4rem); }
@media (min-width: 900px) {
  :root { --fs-hero: clamp(3.2rem, 5.4vw, 4.6rem); }
  .hero__inner { max-width: 22ch; }
  .hero__body { padding-block-start: calc(var(--header-h) + var(--safe-t) + 8px); }
  .hero__title { line-height: 0.96; }
}
@media (min-width: 1400px) { .hero__inner { max-width: 20ch; } }

/* ---------- 42. Hero escritorio: ancho real, no medido en ch de una didone ---------- */
@media (min-width: 900px) {
  .hero { min-height: min(92svh, 880px); }
  .hero__inner { max-width: min(62vw, 720px); }
  .hero__sub { max-width: 42ch; font-size: 1.1rem; }
  .hero__cta { gap: 12px; }
}
@media (min-width: 1400px) { .hero__inner { max-width: 780px; } }

/* ---------- 43. Precio de tarjeta legible en rejilla de 2 columnas ---------- */
.card__price b { white-space: nowrap; font-size: 0.98rem; }
.card__price small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card__price { min-width: 0; }
.card__foot { gap: 8px; }
@media (max-width: 400px) {
  .card__price b { font-size: 0.92rem; }
  .card__body { padding: 11px 11px 12px; }
  .card__add { width: 36px; height: 36px; }
}
.card__meta li { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 44. Los paneles fuera de pantalla no deben ensanchar el documento ---------- */
/* Un elemento fijo escapa al overflow del body, asi que el recorte va en el propio contenedor */
.mobilemenu, .sheet { overflow: hidden; }
.mobilemenu.is-open, .sheet.is-open { overflow: visible; }
.modal { overflow: hidden; }

/* ---------- 45. min-width:0 en items de grid/flex: si no, el contenido ancho estira la columna ---------- */
.detail__grid > *, .mapwrap > *, .editorial__grid > *, .finder__row > *,
.boat > *, .card__body > *, .grid-cards > *, .sust > *, .cats > * { min-width: 0; }
.detail__tabs, .compare, .filterbar__chips, .rail__track, .maplist, .gallery { max-width: 100%; }

/* ---------- 46. Pie: la rejilla de 4 columnas no debe estirarse con un correo largo ---------- */
.footer__grid > * { min-width: 0; }
.footer__col a, .footer__brand p { overflow-wrap: anywhere; }
.footer__bottom > span { overflow-wrap: anywhere; }

/* Botones tipo badge con área táctil */
button.badge { min-height: 34px; padding-inline: 11px; }

/* ---------- 47. Pantallas de 320 px ---------- */
@media (max-width: 360px) {
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 9px; }
  .steps { gap: 4px; }
  .steps__i { font-size: 0.7rem; gap: 5px; }
  .steps__i b { width: 21px; height: 21px; font-size: 0.66rem; }
  .steps__i span, .steps__i { min-width: 0; }
  .steps__line { min-width: 6px; }
}
.steps { flex-wrap: nowrap; min-width: 0; }
.steps__i { min-width: 0; }
.steps__i b { flex-shrink: 0; }

/* Los anclajes no deben quedar bajo la barra inferior fija */
html { scroll-padding-bottom: calc(var(--bottomnav-h) + 12px); }

/* ---------- 48. Contraste AA en textos pequeños ---------- */
.maplist__item b { color: var(--text); }
.steps__i b { color: var(--text-soft); background: var(--surface-3); }
.steps__i.is-on b { color: var(--on-dark); }
.steps__i.is-done b { color: #fff; }
.badge--aqua { color: var(--aqua-700); }
.form__hint, .demo-note { color: var(--text-soft); }
.card__meta, .section--dark .card__meta { }
.card__price small { color: var(--text-soft); }
.field__label { color: var(--text-soft); }
.detail__tab { color: var(--text-soft); }
.fact span, .maplist__item span span { color: var(--text-soft); }
.crumbs { color: var(--text-soft); }

/* ---------- 49. Contraste sobre superficies oscuras y velo del header ---------- */
.section--dark .card__price .askprice,
.section--dark .card__price small { color: var(--on-dark-soft); }
.section--dark .card__price b { color: var(--on-dark); }
.badge--gold { background: oklch(0.93 0.055 82); color: oklch(0.46 0.105 58); }
.badge--pending { background: oklch(0.95 0.04 75); color: oklch(0.44 0.10 58); }

/* Header transparente: velo propio para no depender del fotograma del vídeo */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, oklch(0.155 0.03 250 / 0.72) 0%, oklch(0.155 0.03 250 / 0.34) 62%, transparent 100%);
  opacity: 1; transition: opacity var(--t-slow) var(--e-out);
}
.header { isolation: isolate; }
.header.is-solid::before, body.page-solid .header::before { opacity: 0; }

/* ---------- 50. La tarjeta nunca hereda color de una sección oscura ---------- */
.card { color: var(--text); }
.section--dark .card { color: var(--on-dark); }
.quiz .card, .quiz__resultgrid .card { color: var(--text); }
.quiz .card__title, .quiz .card__price b { color: var(--text); }

/* Los avisos flotantes no tapan el pie del cajón */
.sheet.is-open ~ .toasts, body:has(.sheet.is-open) .toasts { inset-block-end: calc(var(--bottomnav-h) + 150px); }

/* ---------- 51. Hero: el vídeo se apila SOBRE el póster, no debajo ---------- */
/* Eran hermanos en flujo normal: el <img> ocupaba el alto y el <video> caía fuera de vista. */
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* El póster va dentro de un <picture> para que el móvil descargue solo el vertical:
   por eso el <img> ya no es hijo directo y el selector tiene que contar con el <picture>. */
.hero__media > picture { position: absolute; inset: 0; display: block; }
.hero__media img,
.hero__media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__media > video { z-index: 1; }
@media (min-width: 900px) {
  .hero__media img,
  .hero__media > video { object-position: center 45%; }
}

/* ---------- 52. Móvil en horizontal: el hero debe caber en pantalla ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { min-height: 100svh; }
  .hero__body { padding-block-end: 0.5rem; }
  .hero__inner { max-width: min(64vw, 640px); }
  .hero__title { font-size: clamp(1.7rem, 5.6vh, 2.6rem); }
  .hero__eyebrow { margin-bottom: 6px; }
  .hero__sub { margin-top: 0.5rem; font-size: 0.92rem; max-width: 46ch; }
  .hero__cta { margin-top: 0.75rem; }
  .hero__cta .btn { min-height: 42px; }
  .hero__trust { display: none; }
  .hero__foot { padding-block-end: calc(0.5rem + var(--bottomnav-h)); }
}

/* ---------- 53. Cabecera en pantallas de 320-380 px ---------- */
@media (max-width: 380px) {
  .header__bar { gap: 2px; padding-inline: 12px; }
  .header__logo { padding-block: 16px; }
  .header__logo img { max-height: 26px; }
  .header__actions .iconbtn { width: 40px; height: 40px; }
  .header__actions { gap: 0; }
}
@media (max-width: 340px) {
  .header__logo img { max-height: 23px; }
  .header__actions .iconbtn { width: 38px; height: 38px; }
}

/* ---------- 54. Un botón nunca puede ser más ancho que su contenedor ---------- */
.btn { max-width: 100%; }
@media (max-width: 560px) {
  .btn { white-space: normal; text-wrap: balance; padding-block: 9px; line-height: 1.25; }
  .btn--lg { padding-block: 11px; }
}

/* ---------- 55. Franja editorial del atardecer ---------- */
.bleed__img { object-position: center 40%; }
@media (max-width: 699px) { .bleed__img { object-position: center 46%; } }
/* El atardecer es claro: el velo inferior tiene que ser más firme que el genérico */
.bleed::after {
  background: linear-gradient(to top, oklch(0.155 0.03 250 / 0.92) 0%, oklch(0.155 0.03 250 / 0.62) 30%, oklch(0.155 0.03 250 / 0.18) 62%, transparent 88%);
}

/* ---------- 56. Carrusel: el borde se desvanece en vez de cortar en seco ---------- */
@media (min-width: 1000px) {
  .rail__track {
    --fade: 0px;
    --fade-l: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade)), transparent 100%);
    transition: -webkit-mask-image var(--t-slow) var(--e-out), mask-image var(--t-slow) var(--e-out);
  }
  .rail.can-next .rail__track { --fade: 84px; }
  .rail.can-prev .rail__track { --fade-l: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail__track { transition: none; }
}

/* La máscara recorta al borde de la caja: hace falta aire para sombra y foco */
@media (min-width: 1000px) {
  .rail__track { padding-block: 8px 18px; }
}

/* ---------- 57. Vídeos de sección: material grabado por el cliente ---------- */
/* El <video> no trae src hasta que initSectionVideos() lo monta al acercarse a pantalla.
   Mientras tanto se ve el <img> del póster, que sí carga como una imagen normal. */
.vidbox { margin: 0; display: grid; gap: 8px; }
.vidbox__frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface-3);
  border: 1px solid var(--line);
}
.vidbox__poster,
.vidbox__el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.vidbox__el { z-index: 1; opacity: 0; transition: opacity var(--t-slow) var(--e-out); }
.vidbox__el.is-on { opacity: 1; }
.vidbox__cap { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .vidbox__el { transition: none; }
}

/* Tira de clips de la flota */
.vidstrip { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .vidstrip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vidstrip { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* Bloque de despedidas: vídeo vertical junto al texto y dos tarjetas */
.party { display: grid; gap: 22px; align-items: start; }
.party__clip { max-width: 320px; width: 100%; justify-self: center; }
.party__sub {
  color: var(--text-soft); margin: 12px 0 20px;
  font-size: var(--fs-lead); max-width: 56ch;
}
.party__cards {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
@media (min-width: 560px) { .party__cards { gap: 14px; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .party { grid-template-columns: minmax(260px, 340px) 1fr; gap: 34px; }
  .party__clip { justify-self: start; max-width: none; }
}

/* ---------- 58. Botón «ver el vídeo» ---------- */
/* Con «menos movimiento» o ahorro de datos no se reproduce nada por su cuenta. Antes el hero
   se quedaba en el póster fijo y parecía roto; ahora hay una forma de pedirlo. Al pulsarlo
   queda activado para todas las páginas. */
.hero__playvid,
.vidbox__play {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid oklch(1 0 0 / 0.28);
  border-radius: var(--r-pill);
  background: oklch(0.155 0.03 250 / 0.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: oklch(1 0 0);
  font: 600 0.86rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.hero__playvid svg,
.vidbox__play svg { fill: currentColor; flex: none; }
.hero__playvid:hover,
.vidbox__play:hover { background: oklch(0.155 0.03 250 / 0.82); border-color: oklch(1 0 0 / 0.5); }
.hero__playvid:active,
.vidbox__play:active { transform: scale(0.97); }
.hero__playvid:focus-visible,
.vidbox__play:focus-visible { outline: 3px solid var(--aqua-400); outline-offset: 3px; }

/* Va arriba a la derecha, justo bajo la cabecera: es la única zona del hero que está libre.
   Abajo a la derecha lo tapa el botón flotante de WhatsApp y el clic no le llega; abajo a la
   izquierda se come la lista de «155+ experiencias / concierge / precios en pesos». */
.hero__playvid {
  z-index: 3;
  inset-block-start: calc(var(--header-h, 64px) + 14px);
  inset-inline-end: 16px;
}
@media (min-width: 900px) {
  .hero__playvid { inset-block-start: calc(var(--header-h, 76px) + 20px); inset-inline-end: 28px; }
}

/* En los bloques de vídeo va centrado sobre el póster */
.vidbox__play { z-index: 2; inset: 50% auto auto 50%; translate: -50% -50%; }

@media (prefers-reduced-motion: reduce) {
  .hero__playvid, .vidbox__play { transition: none; }
  .hero__playvid:active, .vidbox__play:active { transform: none; }
}