/* ==========================================================================
   Caribe Tours Cartagena — sistema de diseño "Litoral"
   Inspirado en portales de viajes modernos: nav blanco, tarjetas limpias,
   buscador flotante sobre el hero, franjas de confianza.
   ========================================================================== */

/* Respaldo general para "prefers-reduced-motion": además de las reglas
   específicas más abajo (hero, reveal-on-scroll, nav, FAB), esta regla
   general acorta a casi cero la duración de CUALQUIER transición o
   animación CSS que exista hoy o se agregue después, para quien haya
   pedido reducir el movimiento en su sistema operativo — sin usar
   "transition:none" (que puede romper código JS que espera el evento
   transitionend). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
:root{
  /* Paleta tomada directamente del logo de la agencia (sol dorado, texto
     "Caribe Tours" en coral, ola/texto "Cartagena" en azul) — reemplaza el
     teal genérico que se usaba antes. Los nombres de variable (--teal...)
     se conservan para no tener que tocar cada regla que ya los usa; lo que
     cambió es el color detrás de cada nombre. */
  --teal:#0F5E8E;
  --teal-dark:#0B4A70;
  --teal-deep:#0A3B57;
  --teal-pale:#E4EEF5;
  --navy:#0A1B2C;
  --coral:#D64528;
  --coral-dark:#B23620;
  --coral-pale:#FBDCD5;
  --gold:#F5C518;
  --gold-pale:#FDF3D2;
  --gold-ink:#8C6F06; /* variante de --gold con contraste AA sobre fondos claros (ej. estrellas de reseñas) */
  --ok:#2F9153;
  --ok-pale:#E6F1E5;
  --warn:#8F6314;
  --warn-pale:#FBF0DC;
  --danger:#C6532E;
  --danger-pale:#FAE7DE;
  --bg:#F5F8F7;
  --paper:#FFFFFF;
  --sand:#F5F8F7;
  --sand-2:#E9F0EE;
  --ink:#122320;
  --ink-dim:rgba(18,35,32,.66);
  --ink-faint:rgba(18,35,32,.62);
  --line:rgba(18,35,32,.12);
  --on-dark:#FFFFFF;
  --on-dark-dim:rgba(255,255,255,.76);
  --shadow:0 24px 50px -22px rgba(10,30,26,.22);
  --shadow-sm:0 10px 26px -16px rgba(10,30,26,.18);
  --radius-lg:22px;
  --radius:16px;
  --radius-sm:12px;
  --header-h:80px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.9,.34,1);
  /* legacy alias so untouched component rules keep working */
  --deep:var(--teal-deep);
  --deep-2:#0D4A73;
  --deep-3:#11557F;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }
h1,h2,h3{
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  line-height:1.12; text-wrap:balance; margin:0; letter-spacing:-.01em;
}
h1 i, h2 i, h3 i, .accent-italic{ font-style:normal; font-weight:800; color:var(--coral); }
p{ margin:0; line-height:1.65; }
.eyebrow{
  font-family:"Work Sans", sans-serif;
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--teal-pale); color:var(--teal-dark); padding:7px 14px; border-radius:999px;
}
.eyebrow::before{ content:"●"; font-size:8px; color:var(--coral); }
.wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(22px,5vw,64px); }
.wrap--narrow{ max-width:900px; }
section{ position:relative; }
main{ display:block; padding-top:var(--header-h); }

/* ---------------- word-stagger (disabled — kept as no-op for legacy markup) ---------------- */
.word{ display:inline; }
.word-inner{ display:inline; }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Work Sans",sans-serif; font-weight:700; font-size:14.5px; letter-spacing:.01em;
  padding:15px 28px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; position:relative;
  transition:transform .35s var(--ease), box-shadow .3s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn--coral{ background:var(--teal); color:#fff; box-shadow:0 14px 28px -12px rgba(15,94,142,.5); }
.btn--coral:hover{ background:var(--teal-dark); transform:translateY(-2px); }
.btn--accent{ background:var(--coral); color:#fff; box-shadow:0 14px 28px -12px rgba(214,69,40,.5); }
.btn--accent:hover{ background:var(--coral-dark); transform:translateY(-2px); }
.btn--ghost{ background:rgba(255,255,255,.1); color:var(--on-dark); border-color:rgba(255,255,255,.5); backdrop-filter:blur(6px); }
.btn--ghost:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }
.btn--dark{ background:var(--teal-deep); color:#fff; }
.btn--dark:hover{ background:var(--deep-2); transform:translateY(-2px); }
.btn--teal{ background:var(--teal); color:#fff; }
.btn--teal:hover{ background:var(--teal-dark); transform:translateY(-2px); }
.btn--outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--outline:hover{ border-color:var(--teal); color:var(--teal-dark); }
.btn--sm{ padding:10px 18px; font-size:13px; }
.btn--block{ width:100%; }
.btn:active{ transform:scale(.96); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }
.btn svg{ width:15px; height:15px; flex:none; }
.link{ color:var(--teal-dark); text-decoration:none; font-weight:600; font-size:13.5px; border-bottom:1px solid transparent; transition:border-color .2s; }
.link:hover{ border-color:var(--teal-dark); }

/* ---------------- reveal-on-scroll ---------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__content, .hero__content .hero__cta, .hero__content .hero__chips, .hero-stack__card{ animation:none; opacity:1; transform:none; }
  .hero-stack__card:nth-child(3){ opacity:.92; }
  .hero__rail-dot{ transition:none; }
  .site-header{ transition:none; }
  .brand img{ transition:none; }
}

/* ---------------- header (blanco, siempre sólido) ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:14px 0; background:#fff;
  box-shadow:0 2px 18px -8px rgba(10,30,26,.14);
  transition:padding .35s var(--ease), box-shadow .35s var(--ease), background .35s ease;
}
.site-header.is-compact{ padding:8px 0; box-shadow:0 10px 28px -12px rgba(10,30,26,.24); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ height:44px; width:auto; transition:height .35s var(--ease), transform .35s var(--ease), filter .35s ease; }
.site-header.is-compact .brand img{ height:36px; }
.brand:hover img{ transform:scale(1.06) rotate(-1deg); filter:drop-shadow(0 8px 16px rgba(11,74,112,.35)); }

/* sticky hero header: transparente sobre la foto, blanco al hacer scroll */
.site-header.is-transparent{ background:transparent; box-shadow:none; }
.site-header.is-transparent .main-nav a{ color:rgba(255,255,255,.88); }
.site-header.is-transparent .main-nav a:hover, .site-header.is-transparent .main-nav a.is-active{ color:#fff; }
.site-header.is-transparent .main-nav a::after{ background:var(--gold); }
.site-header.is-transparent .header-phone{ color:#fff; border-right-color:rgba(255,255,255,.35); }
.site-header.is-transparent .header-phone svg{ color:var(--gold); }
.site-header.is-transparent .icon-btn{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.1); color:#fff; }
.site-header.is-transparent .icon-btn:hover{ background:rgba(255,255,255,.2); }
.site-header.is-transparent .burger{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.1); color:#fff; }
.site-header.is-transparent .brand:hover img{ filter:drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
.main-nav a, .header-phone, .icon-btn, .burger{ transition:color .3s ease, background .3s ease, border-color .3s ease; }
.main-nav{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.main-nav a{
  font-size:14.5px; font-weight:600; letter-spacing:.01em; text-decoration:none;
  color:var(--ink-dim); position:relative; padding:6px 0; transition:color .25s ease;
}
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.is-active{ color:var(--teal-dark); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--coral); border-radius:2px; transition:right .35s var(--ease);
}
.main-nav a:hover::after, .main-nav a.is-active::after{ right:0; }
.header-actions{ display:flex; align-items:center; gap:12px; }

/* ---------------- menú desplegable "Pasadías" (tipos de tour) ---------------- */
.nav-item{ position:relative; }
.nav-item.has-dropdown > a{ display:inline-flex; align-items:center; gap:5px; }
.nav-item__chevron{ display:inline-flex; width:12px; height:12px; flex:none; transition:transform .3s var(--ease); }
.nav-item__chevron svg{ width:100%; height:100%; display:block; }
.nav-item.has-dropdown:hover .nav-item__chevron,
.nav-item.has-dropdown:focus-within .nav-item__chevron{ transform:rotate(180deg); }
.nav-dropdown{
  position:absolute; top:calc(100% + 20px); left:50%; z-index:70;
  width:440px; max-width:min(440px, 84vw);
  background:#fff; border-radius:var(--radius-lg); border:1px solid var(--line);
  box-shadow:0 30px 60px -24px rgba(6,20,17,.35);
  padding:16px; opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%, 6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s;
}
/* puente invisible entre el link y el panel para que el hover no se corte al bajar el mouse */
.nav-dropdown::before{ content:""; position:absolute; left:0; right:0; top:-20px; height:20px; }
.nav-dropdown__grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.nav-dropdown__item{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px;
  text-decoration:none; transition:background .2s ease;
}
.nav-dropdown__item:hover, .nav-dropdown__item:focus-visible{ background:var(--bg); }
.nav-dropdown__item-name{ font-size:13.5px; font-weight:700; color:var(--ink); transition:color .2s ease; }
.nav-dropdown__item:hover .nav-dropdown__item-name{ color:var(--teal-dark); }
.nav-dropdown__item-tag{ font-size:11.5px; color:var(--ink-faint); }
.nav-dropdown__all{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:12px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--coral); text-decoration:none;
}
.nav-dropdown__all svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.nav-dropdown__all:hover svg{ transform:translateX(3px); }

/* ---------------- selector de idioma ES/EN ---------------- */
.lang-switch{ display:flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:var(--bg); border:1.5px solid var(--line); flex:none; }
.lang-switch__btn{ border:none; background:none; padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.03em; color:var(--ink-faint); cursor:pointer; transition:background .25s ease, color .25s ease; font-family:inherit; }
.lang-switch__btn:hover{ color:var(--ink); }
.lang-switch__btn.is-active{ background:var(--teal); color:#fff; }
.site-header.is-transparent .lang-switch{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.38); }
.site-header.is-transparent .lang-switch__btn{ color:rgba(255,255,255,.75); }
.site-header.is-transparent .lang-switch__btn.is-active{ background:rgba(255,255,255,.24); color:#fff; }
.mobile-menu .lang-switch{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); margin:2px clamp(22px,6vw,42px) 4px; }
.mobile-menu .lang-switch__btn{ color:rgba(255,255,255,.7); }
.mobile-menu .lang-switch__btn.is-active{ background:rgba(255,255,255,.22); color:#fff; }
.header-phone{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--teal-dark); text-decoration:none; padding:0 8px 0 0; border-right:1px solid var(--line); margin-right:4px; }
.header-phone svg{ width:17px; height:17px; color:var(--coral); flex:none; }
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--bg);
  color:var(--ink); cursor:pointer; align-items:center; justify-content:center; display:flex;
  text-decoration:none; transition:background .25s ease, border-color .25s ease, transform .3s var(--ease);
}
.icon-btn:hover{ background:var(--teal-pale); border-color:var(--teal); transform:translateY(-2px); }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn__badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; border-radius:999px;
  background:var(--coral); color:#fff; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.burger{
  display:none; width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--bg);
  color:var(--ink); cursor:pointer; align-items:center; justify-content:center;
}
.burger svg{ width:18px; height:18px; }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:80; background:var(--navy);
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .5s var(--ease); visibility:hidden;
}
.mobile-menu.is-open{ transform:translateX(0); visibility:visible; }
.mobile-menu__top{ display:flex; align-items:center; justify-content:space-between; padding:20px clamp(22px,6vw,42px); }
.mobile-menu__close{
  width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.mobile-menu__close svg{ width:18px; height:18px; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:4px; padding:20px clamp(22px,6vw,42px); }
.mobile-menu nav a{
  font-size:clamp(24px,7vw,32px); font-weight:700;
  color:#fff; text-decoration:none; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.14);
}

/* ---------------- acordeón de categorías dentro del menú móvil ---------------- */
.menu-item-group{ border-bottom:1px solid rgba(255,255,255,.14); }
.menu-item-group .menu-link{ border-bottom:none; flex:1; }
.menu-link-row{ display:flex; align-items:center; gap:12px; }
.menu-caret{
  flex:none; width:38px; height:38px; border-radius:50%; margin:8px 0;
  border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .2s ease;
}
.menu-caret svg{ width:15px; height:15px; }
.menu-caret[aria-expanded="true"]{ transform:rotate(180deg); background:rgba(255,255,255,.2); }
.mobile-submenu{ max-height:0; overflow:hidden; display:flex; flex-direction:column; transition:max-height .4s var(--ease); }
.mobile-submenu.is-open{ max-height:640px; }
.mobile-submenu a.mobile-submenu__link{
  font-size:15.5px; font-weight:600; color:rgba(255,255,255,.75); text-decoration:none;
  padding:9px 0 9px 16px; border-bottom:none; border-left:2px solid rgba(255,255,255,.22); margin-bottom:6px;
}
.mobile-submenu a.mobile-submenu__link:hover{ color:#fff; border-left-color:var(--gold); }
.mobile-menu__footer{ margin-top:auto; padding:24px clamp(22px,6vw,42px) 38px; display:flex; flex-direction:column; gap:14px; }
.mobile-menu__footer a{ color:rgba(255,255,255,.8); text-decoration:none; font-size:14px; }
body.menu-open{ overflow:hidden; }

/* ---------------- page hero (subpages) ---------------- */
.page-hero{
  position:relative; min-height:380px; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--teal-deep); padding:calc(var(--header-h) + 60px) 0 64px;
}
.page-hero__media{ position:absolute; inset:0; z-index:0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }
.page-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(6,20,17,.88) 0%, rgba(6,20,17,.3) 60%, rgba(6,20,17,.5) 100%);
}
.page-hero .wrap{ position:relative; z-index:2; }
.breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--on-dark-dim); margin-bottom:18px; font-weight:600;
}
.breadcrumb a{ color:var(--on-dark-dim); text-decoration:none; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span{ opacity:.5; }
.page-hero h1{ color:#fff; font-size:clamp(34px,5vw,56px); max-width:20ch; }
.page-hero p{ color:var(--on-dark-dim); font-size:16px; max-width:52ch; margin-top:16px; line-height:1.6; }

/* ---------------- hero (home) ---------------- */
.hero{
  position:relative; width:100%; min-height:100vh; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; background:var(--teal-deep); padding:60px 0 130px;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%;
  opacity:0; transition:opacity 1.2s var(--ease); transform:scale(1);
}
.hero__media img.is-active{ opacity:1; animation:heroZoom 7s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce){
  .hero__media img.is-active{ animation:none; }
}

.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(6,20,17,.88) 0%, rgba(6,20,17,.62) 38%, rgba(6,20,17,.28) 68%, rgba(6,20,17,.5) 100%);
}

/* ---------------- hero: riel de progreso lateral + tipografía fantasma ---------------- */
.hero__rail{
  display:none; position:absolute; left:28px; top:calc(var(--header-h) + 64px); bottom:110px; width:20px; z-index:2;
  flex-direction:column; align-items:center; justify-content:space-between;
  color:rgba(255,255,255,.72); font:600 11px/1 'JetBrains Mono', monospace; letter-spacing:.05em;
}
.hero__rail-line{ position:relative; flex:1; width:1px; background:rgba(255,255,255,.25); margin:14px 0; }
.hero__rail-dot{
  position:absolute; left:50%; top:0; width:7px; height:7px; border-radius:50%; background:var(--gold);
  transform:translate(-50%,-50%); transition:top .6s var(--ease); box-shadow:0 0 0 5px rgba(245,197,24,.22);
}
.hero__ghost{
  display:none; position:absolute; left:0; right:0; z-index:1; pointer-events:none; overflow:hidden;
  font-family:'Fraunces', serif; font-weight:600; font-style:italic; color:rgba(255,255,255,.08);
  font-size:clamp(64px,9.5vw,150px); white-space:nowrap; letter-spacing:-.01em; transition:opacity .4s var(--ease);
  padding:0 40px;
}
.hero__ghost--prev{ top:15%; }
.hero__ghost--next{ bottom:6%; text-align:right; }
@media (min-width:980px){
  .hero__rail{ display:flex; }
  .hero__ghost{ display:block; }
}

.hero__layout{ position:relative; z-index:2; width:100%; display:flex; align-items:center; gap:56px; }
.hero__content{ flex:1 1 460px; max-width:600px; animation:heroRise 1s var(--ease) both; }
.hero__content .hero__cta{ animation:heroRise 1s var(--ease) .12s both; }
.hero__content .hero__chips{ animation:heroRise 1s var(--ease) .22s both; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
.hero__content .eyebrow{ background:rgba(255,255,255,.14); color:#fff; margin-bottom:20px; }
.hero__content .eyebrow::before{ color:var(--gold); }
.hero__content h1{ color:#fff; font-size:clamp(38px,5.6vw,64px); max-width:15ch; transition:opacity .25s ease; }
.hero__content h1 i{ color:var(--gold); }
.hero__sub{ color:var(--on-dark-dim); font-size:17px; line-height:1.65; max-width:46ch; margin:22px 0 32px; transition:opacity .25s ease; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; }
.hero__chips{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:38px; padding-top:26px; border-top:1px solid rgba(255,255,255,.18); }
.hero__chips span{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--on-dark-dim); font-weight:600; }

/* ---------------- hero: pila de tarjetas de tours (lado derecho) ---------------- */
.hero__stack{ position:relative; flex:none; width:300px; height:360px; display:none; }
.hero-stack__card{
  position:absolute; border-radius:18px; overflow:hidden; box-shadow:0 24px 44px -20px rgba(4,16,14,.6);
  border:3px solid rgba(255,255,255,.14); background:var(--teal-deep); animation:heroRise 1s var(--ease) both;
}
.hero-stack__card a{ display:block; width:100%; height:100%; position:relative; text-decoration:none; }
.hero-stack__card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.hero-stack__card:hover img{ transform:scale(1.06); }
.hero-stack__card:nth-child(1){ width:178px; height:250px; left:0; top:55px; z-index:3; }
.hero-stack__card:nth-child(2){ width:150px; height:196px; left:132px; top:0; z-index:2; }
.hero-stack__card:nth-child(3){ width:128px; height:168px; left:222px; top:150px; z-index:1; opacity:.92; }
.hero-stack__card .tour-card__cat{ font-size:9px; padding:5px 9px; top:10px; left:10px; max-width:calc(100% - 44px); overflow:hidden; text-overflow:ellipsis; }
.hero-stack__card .tour-card__fav{ width:30px; height:30px; top:10px; right:10px; }
.hero-stack__card .tour-card__fav svg{ width:14px; height:14px; }
.hero-stack__price{
  position:absolute; left:10px; right:10px; bottom:10px; color:#fff; font-size:12.5px; font-weight:700;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
@media (min-width:980px){ .hero__stack{ display:block; } }

/* ---------------- hero: flechas + contador ---------------- */
.hero__nav{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:18px; }
.hero__arrow{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s var(--ease), transform .3s var(--ease);
}
.hero__arrow:hover{ background:rgba(255,255,255,.28); transform:scale(1.06); }
.hero__arrow svg{ width:16px; height:16px; }
.hero__count{ color:rgba(255,255,255,.85); font:600 13px/1 'JetBrains Mono', monospace; letter-spacing:.04em; }
.hero__count b{ color:#fff; font-size:15px; }
.hero__chips svg{ width:15px; height:15px; color:var(--gold); flex:none; }

/* ---------------- search widget — tarjeta flotante sobre el hero ---------------- */
#searchWidgetWrap{ position:relative; }
.search-widget{
  position:relative; z-index:5; margin-top:-108px; background:#fff; border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -24px rgba(6,20,17,.35); padding:14px 18px;
  transition:box-shadow .5s var(--ease), border-radius .5s var(--ease), padding .5s var(--ease), width .5s var(--ease);
}
.search-widget__row{ display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; }
.sw-field{ display:flex; align-items:center; gap:12px; flex:1; min-width:190px; padding:10px 18px; border-radius:var(--radius-sm); transition:background .2s ease, padding .5s var(--ease); }
.sw-field:hover{ background:var(--bg); }
.sw-field + .sw-field{ border-left:1px solid var(--line); }
.sw-field__icon{ width:38px; height:38px; border-radius:50%; background:var(--teal-pale); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; flex:none; transition:width .4s var(--ease), height .4s var(--ease); }
.sw-field__icon svg{ width:18px; height:18px; }
.sw-field label{ display:block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px; }
.sw-field select, .sw-field input{
  background:none; border:none; color:var(--ink); font-family:inherit; font-weight:600; font-size:14.5px; outline:none; width:100%; padding:0;
}
.sw-submit{ flex:0 0 auto; align-self:center; margin-left:6px; padding:16px 30px; }
@media (max-width:900px){
  .sw-field + .sw-field{ border-left:none; border-top:1px solid var(--line); }
  .search-widget__row{ flex-direction:column; }
  .sw-submit{ width:100%; margin-left:0; margin-top:6px; }
}

/* ---------------- search widget: se vuelve fijo (pegado bajo el header) al hacer scroll ---------------- */
.search-widget.is-fixed{
  position:fixed; left:50%; top:calc(var(--header-h) + 14px);
  width:min(1160px, calc(100% - 44px));
  margin-top:0; z-index:60;
  padding:10px 16px;
  border-radius:calc(var(--radius-lg) - 6px);
  box-shadow:0 24px 48px -20px rgba(6,20,17,.3), 0 2px 0 rgba(6,20,17,.04);
  transform:translateX(-50%);
  animation:searchWidgetDock .6s var(--ease);
}
.search-widget.is-fixed .sw-field{ padding:7px 16px; }
.search-widget.is-fixed .sw-field__icon{ width:32px; height:32px; }
@keyframes searchWidgetDock{
  0%{ opacity:0; transform:translate(-50%,-26px) scale(.94); }
  60%{ opacity:1; transform:translate(-50%,4px) scale(1.01); }
  100%{ opacity:1; transform:translate(-50%,0) scale(1); }
}
.search-widget:not(.is-fixed){ animation:none; }

/* ---------------- section head ---------------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:42px; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ font-size:clamp(28px,3.6vw,42px); color:var(--ink); }
.section-head p{ color:var(--ink-dim); font-size:15.5px; max-width:44ch; margin:14px 0 0; }
.section-head--dark .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }
.section-head--dark h2{ color:#fff; }
.section-head--dark p{ color:var(--on-dark-dim); }
.section-head a.link{ font-weight:700; }

/* ---------------- destinos — grid de tarjetas ---------------- */
.destinos{ padding:88px 0 20px; }
.dest-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:22px; }
.dest-card{
  position:relative; display:block; aspect-ratio:3/3.6; border-radius:var(--radius); overflow:hidden;
  text-decoration:none; box-shadow:var(--shadow-sm);
}
.dest-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); background:var(--teal-pale); pointer-events:none; }
.dest-card:hover img{ transform:scale(1.08); }
.dest-card__scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,16,14,.85) 0%, rgba(6,16,14,.05) 55%); }
.dest-card__label{ position:absolute; left:16px; right:16px; bottom:16px; color:#fff; }
.dest-card__label .eyebrow{ background:none; padding:0; color:var(--gold); font-size:10.5px; margin-bottom:5px; }
.dest-card__label .eyebrow::before{ display:none; }
.dest-card__label strong{ font-size:18px; font-weight:700; display:block; }

/* ---------------- tour cards / grid ---------------- */
.tours{ padding:64px 0 100px; }
.tours-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.tours-grid--4{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:26px; }
.tour-card{
  background:var(--paper); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
}
/* halo neón suave — un contorno de luz tenue en los colores de marca, apenas
   perceptible, para no competir con la foto ni con las insignias */
.tour-card:hover{
  transform:translateY(-7px) scale(1.012);
  border-color:rgba(15,94,142,.4);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(15,94,142,.28),
    0 0 20px 1px rgba(15,94,142,.16),
    0 0 30px 4px rgba(214,69,40,.08);
}
.tour-card__media{ position:relative; aspect-ratio:4/3.1; overflow:hidden; background:var(--sand-2); }
.tour-card__media a{ display:block; width:100%; height:100%; }
.tour-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.tour-card:hover .tour-card__media img{ transform:scale(1.07); }
.tour-card__body h3{ transition:color .3s ease; }
.tour-card:hover .tour-card__body h3{ color:var(--teal-dark); }
.tour-card__cat{
  position:absolute; top:14px; left:14px; background:rgba(10,59,87,.85); backdrop-filter:blur(4px);
  color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:999px;
}
.tour-card__ribbon{
  position:absolute; top:14px; right:14px; background:var(--coral);
  color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:999px;
  box-shadow:0 8px 16px -8px rgba(226,99,46,.6);
}
.tour-card__ribbon--vip{
  background:linear-gradient(120deg,#caa24a,#8a6a1f);
  box-shadow:0 8px 16px -8px rgba(138,106,31,.65);
}
.tour-card__ribbon--oferta{
  background:var(--coral-dark);
  box-shadow:0 8px 16px -8px rgba(178,54,32,.6);
}
.tour-card__fav{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.94); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
  transition:transform .3s var(--ease);
}
.tour-card__media:has(.tour-card__ribbon) .tour-card__fav{ top:52px; }
.tour-card__fav:hover{ transform:scale(1.1); }
.tour-card__fav svg{ width:16px; height:16px; }
.tour-card__fav.is-active{ color:var(--coral); }
.tour-card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tour-card__body h3{ font-size:18.5px; color:var(--ink); }
.tour-card__body p{ font-size:13.5px; color:var(--ink-dim); line-height:1.6; margin:0; flex:1; }
.tour-card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px;
  padding-top:16px; border-top:1px solid var(--line);
}
.tour-card__price{ font-size:11.5px; color:var(--ink-faint); }
.tour-card__price b{ display:block; font-size:20px; color:var(--teal-dark); font-weight:800; }
/* precio con descuento: "Desde" arriba, precio normal tachado + insignia de
   % justo debajo, y el precio final ya rebajado abajo del todo — mismo
   patrón visual en las tarjetas de tour, el detalle y el carrito. */
.tour-card__price-row{ display:flex; align-items:center; gap:6px; margin-top:2px; }
.tour-card__price-antes{ font-size:12px; color:var(--ink-faint); text-decoration:line-through; }
.tour-card__discount-badge{
  display:inline-block; background:var(--coral-pale); color:var(--coral-dark);
  font-size:10.5px; font-weight:800; letter-spacing:.01em; padding:1px 7px; border-radius:999px;
}
.price-antes{ font-size:13px; color:var(--ink-faint); text-decoration:line-through; margin-right:8px; }
.price-discount-badge{
  display:inline-flex; align-items:center; background:var(--coral-pale); color:var(--coral-dark);
  font-size:11.5px; font-weight:800; padding:2px 9px; border-radius:999px; vertical-align:middle;
}
.tour-card__cta{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color:#fff; background:var(--teal); padding:10px 16px; border-radius:999px; text-decoration:none;
  transition:background .25s ease, transform .3s var(--ease); border:none; cursor:pointer;
}
.tour-card__cta:hover{ background:var(--teal-dark); transform:translateY(-2px); }
.tour-card__cta svg{ width:14px; height:14px; }
.tours-more{ text-align:center; margin-top:48px; }

/* ---------------- menú desplegable de categoría (pasadias) ----------------
   Reemplaza la barra de pestañas anterior: con 10 categorías, un solo botón
   "Categoría: X" que abre una lista es más simple de usar que una fila con
   scroll horizontal, y se comporta igual en escritorio, tablet y celular
   (nada que reacomodar por ancho de pantalla). El botón usa el mismo
   lenguaje visual que el resto del sitio (píldora con borde, panel
   flotante con sombra suave) — ver .nav-dropdown en el header, tratamiento
   hermano de este mismo componente. */
.pasadias-toolbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:32px; }
.pasadias-toolbar .cat-select{ margin-bottom:0; }
.cat-select{ position:relative; display:inline-block; margin-bottom:32px; }
.cat-select__btn{
  display:flex; align-items:center; gap:22px; justify-content:space-between;
  min-width:250px; padding:12px 18px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; font-family:inherit; text-align:left;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.cat-select__btn:hover{ border-color:var(--teal); }
.cat-select.is-open .cat-select__btn{ border-color:var(--teal-dark); box-shadow:0 0 0 4px var(--teal-pale); }
.cat-select__label-group{ display:flex; flex-direction:column; gap:1px; }
.cat-select__eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.cat-select__label{ font-size:14.5px; font-weight:700; color:var(--ink); }
.cat-select__chevron{ width:14px; height:14px; flex:none; color:var(--ink-faint); transition:transform .3s var(--ease); }
.cat-select.is-open .cat-select__chevron{ transform:rotate(180deg); }
.cat-select__panel{
  position:absolute; top:calc(100% + 10px); left:0; z-index:40; width:min(420px, 90vw);
  max-height:min(70vh, 460px); overflow-y:auto;
  background:#fff; border-radius:var(--radius-lg); border:1px solid var(--line);
  box-shadow:0 30px 60px -24px rgba(6,20,17,.35); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.cat-select.is-open .cat-select__panel{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
}
.cat-select__option{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  text-align:left; padding:11px 14px; border-radius:10px; border:none; background:none; cursor:pointer;
  font-family:inherit; transition:background .2s ease;
}
.cat-select__option:hover, .cat-select__option:focus-visible{ background:var(--bg); }
.cat-select__option-text{ display:flex; flex-direction:column; gap:1px; }
.cat-select__option-name{ font-size:14px; font-weight:700; color:var(--ink); transition:color .2s ease; }
.cat-select__option-tag{ font-size:11.5px; color:var(--ink-faint); }
.cat-select__option.is-active{ background:var(--teal-pale); }
.cat-select__option.is-active .cat-select__option-name{ color:var(--teal-dark); }
.cat-select__check{ width:16px; height:16px; color:var(--teal-dark); flex:none; opacity:0; transition:opacity .2s ease; }
.cat-select__option.is-active .cat-select__check{ opacity:1; }
/* ---- barra de búsqueda, al lado derecho del desplegable de categoría ---- */
.search-box{
  display:flex; align-items:center; gap:10px; flex:1 1 280px; max-width:360px;
  padding:0 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.search-box:focus-within{ border-color:var(--teal-dark); box-shadow:0 0 0 4px var(--teal-pale); }
.search-box__icon{ width:17px; height:17px; color:var(--ink-faint); flex:none; }
.search-box__input{
  border:none; outline:none; background:none; font-family:inherit;
  font-size:14.5px; font-weight:600; color:var(--ink); width:100%; padding:13px 0;
}
.search-box__input::placeholder{ color:var(--ink-faint); font-weight:500; }
.search-box__input::-webkit-search-cancel-button{ display:none; }
.search-box__clear{
  flex:none; width:22px; height:22px; border-radius:50%; border:none; background:var(--bg);
  color:var(--ink-faint); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.search-box__clear svg{ width:11px; height:11px; }
.search-box__clear:hover{ background:var(--coral-pale); color:var(--coral-dark); }
.results-count{ font-size:13px; color:var(--ink-faint); margin-bottom:24px; }
@media (max-width:640px){
  .pasadias-toolbar{ flex-direction:column; align-items:stretch; }
  .cat-select{ display:block; }
  .cat-select__btn{ width:100%; min-width:0; }
  .cat-select__panel{ width:100%; }
  /* en columna, el eje principal del flex pasa a ser vertical: sin este
     reset, el "280px" de flex-basis (pensado como ancho mínimo en fila)
     se aplica como alto y deja la barra de búsqueda enorme y casi circular
     (border-radius:999px sobre una caja mucho más alta que ancha). */
  .search-box{ flex:0 0 auto; max-width:none; }
}
.empty-state{ text-align:center; padding:70px 20px; color:var(--ink-dim); }
.empty-state svg{ width:44px; height:44px; color:var(--ink-faint); margin-bottom:18px; }
.empty-state h3{ font-size:21px; margin-bottom:10px; color:var(--ink); }

/* ---------------- banda "¿Necesitas ayuda?" ---------------- */
.assist{ padding:0 0 20px; }
.assist-banner{
  position:relative; background:var(--teal-deep); border-radius:var(--radius-lg); overflow:hidden;
  display:grid; grid-template-columns:1.3fr 1fr; align-items:stretch; box-shadow:var(--shadow);
}
.assist-banner__content{ padding:48px clamp(28px,4vw,56px); color:#fff; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.assist-banner__content .eyebrow{ background:rgba(255,255,255,.14); color:#fff; align-self:flex-start; }
.assist-banner__content .eyebrow::before{ color:var(--gold); }
.assist-banner__content h2{ color:#fff; font-size:clamp(24px,3vw,34px); }
.assist-banner__content p{ color:var(--on-dark-dim); font-size:15px; max-width:42ch; }
.assist-banner__cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
.assist-banner__cta a.header-phone{ border:none; color:#fff; margin:0; padding:0; }
.assist-stats{ display:flex; gap:22px; flex-wrap:wrap; margin-top:10px; }
.assist-stat{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:#fff; }
.assist-stat svg{ width:20px; height:20px; color:var(--gold); flex:none; }
.assist-banner__media{ position:relative; min-height:260px; }
.assist-banner__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.assist-banner__media::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,59,87,.55), rgba(10,59,87,0)); }
@media (max-width:860px){
  .assist-banner{ grid-template-columns:1fr; }
  .assist-banner__media{ min-height:200px; order:-1; }
}

/* ---------------- por qué elegirnos (reemplaza testimonios genéricos) ---------------- */
.why{ padding:20px 0 96px; }
.why-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:22px; }
.why-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; text-align:left; }
.why-card__icon{ width:50px; height:50px; border-radius:14px; background:var(--teal-pale); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.why-card__icon svg{ width:24px; height:24px; }
.why-card h3{ font-size:16.5px; margin-bottom:8px; }
.why-card p{ font-size:13.5px; color:var(--ink-dim); line-height:1.6; }

/* ---------------- franja de confianza ---------------- */
.trust-strip{ padding:0 0 96px; }
.trust-strip__row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.trust-strip__item{ display:flex; align-items:center; gap:14px; }
.trust-strip__item svg{ width:30px; height:30px; color:var(--teal); flex:none; }
.trust-strip__item b{ display:block; font-size:14.5px; color:var(--ink); }
.trust-strip__item span{ font-size:12.5px; color:var(--ink-faint); }

/* ---------------- newsletter ---------------- */
.newsletter{ padding:0 0 96px; }
.newsletter-banner{
  background:var(--teal); border-radius:var(--radius-lg); padding:40px clamp(24px,4vw,52px);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; color:#fff;
}
.newsletter-banner__icon{ width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex:none; }
.newsletter-banner__icon svg{ width:24px; height:24px; }
.newsletter-banner h3{ color:#fff; font-size:20px; margin-bottom:5px; }
.newsletter-banner p{ color:rgba(255,255,255,.82); font-size:13.5px; }
.newsletter-banner form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-banner input{ padding:14px 18px; border-radius:999px; border:none; font-size:14px; min-width:240px; outline:none; }
.newsletter-banner .btn{ background:#fff; color:var(--teal-dark); }
.newsletter-banner .btn:hover{ background:var(--bg); }

/* ---------------- nosotros ---------------- */
.nosotros{ background:var(--teal-deep); color:#fff; padding:100px 0; overflow:hidden; position:relative; }
.nosotros .wrap{ display:grid; grid-template-columns:1fr .92fr; gap:64px; align-items:start; }
.nosotros p{ color:var(--on-dark-dim); font-size:16px; line-height:1.75; max-width:52ch; }
.nosotros h2{ color:#fff; }
.quote{ margin:30px 0 0; padding:24px 0 0; border-top:1px solid rgba(255,255,255,.18); font-style:italic; font-size:19px; font-weight:500; line-height:1.5; color:#fff; }
.quote span{ color:var(--gold); }
.values{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.value-chip{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:10px 16px; border-radius:999px; color:rgba(255,255,255,.85); }
.value-chip svg{ width:14px; height:14px; color:var(--gold); }
.nosotros__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 70px -28px rgba(0,0,0,.55); }
.nosotros__media img{ width:100%; height:520px; object-fit:cover; }
.nosotros__strip{ position:absolute; left:20px; right:20px; bottom:20px; display:flex; gap:11px; }
.nosotros__strip img{ height:64px; width:64px; border-radius:12px; object-fit:cover; border:2px solid rgba(255,255,255,.85); }

/* ---------------- contacto / footer ---------------- */
.contacto{ padding:110px 0 70px; }
.contacto .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.contacto h2{ font-size:clamp(28px,3.6vw,42px); margin-bottom:16px; }
.info-list{ display:flex; flex-direction:column; gap:18px; margin:0 0 32px; padding:0; list-style:none; }
.info-list li{ display:flex; align-items:flex-start; gap:15px; font-size:14.5px; color:var(--ink); }
.info-list a{ text-decoration:none; color:inherit; border-bottom:1px solid transparent; transition:border-color .2s ease; }
.info-list a:hover{ border-color:var(--teal); }
.info-list svg{ width:18px; height:18px; color:var(--teal-dark); flex:none; margin-top:1px; }
.social-row{ display:flex; gap:12px; }
.social-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background .3s var(--ease), color .3s ease, transform .3s var(--ease); }
.social-btn:hover{ background:var(--teal); color:#fff; transform:translateY(-3px); }
.social-btn svg{ width:17px; height:17px; }
.contact-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-sm); }
.contact-card h3{ font-size:22px; margin-bottom:10px; }
.contact-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6; margin:0 0 24px; }
.pay-badge{ display:flex; align-items:center; gap:10px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.pay-badge img{ height:22px; width:auto; }
.pay-badge span{ font-size:11px; color:var(--ink-faint); }

footer.site-footer{ background:var(--navy); color:var(--on-dark-dim); padding:70px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr 1fr; gap:34px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-grid h4{ color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; font-weight:700; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer-grid a{ color:var(--on-dark-dim); text-decoration:none; font-size:14px; transition:color .25s ease; }
.footer-grid a:hover{ color:#fff; }
.footer-brand p{ font-size:14px; line-height:1.65; margin:16px 0 22px; max-width:32ch; }
.footer-pay{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:#fff; opacity:.75; }
.footer-pay svg{ width:20px; height:20px; flex:none; }
.footer-pay__label{ font-size:12px; font-weight:600; letter-spacing:.01em; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; font-size:12.5px; }
.footer-bottom a{ text-decoration:none; color:var(--on-dark-dim); }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom__right{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-bottom__legal{ display:flex; align-items:center; gap:18px; }
@media (max-width:620px){ .footer-bottom__right{ width:100%; justify-content:space-between; } }

/* ---------------- floating whatsapp ---------------- */
.fab-wa{
  position:fixed; right:22px; bottom:22px; z-index:70; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 16px 34px -10px rgba(37,211,102,.65); transition:transform .35s var(--ease);
}
.fab-wa:hover{ transform:scale(1.08); }
.fab-wa svg{ width:26px; height:26px; }
.fab-wa::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; animation:vc-pulse 2.4s ease-out infinite; z-index:-1; }
@keyframes vc-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .fab-wa::before{ animation:none; } }

/* ---------------- banner de consentimiento de cookies ---------------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--ink,#122320); color:#F6FAF9; padding:18px 22px;
  box-shadow:0 -10px 30px -12px rgba(0,0,0,.45);
}
.cookie-banner__inner{
  max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.cookie-banner__inner p{ margin:0; font-size:13.5px; line-height:1.55; max-width:72ch; color:rgba(246,250,249,.88); }
.cookie-banner__inner p a{ color:#fff; text-decoration:underline; }
.cookie-banner__actions{ display:flex; gap:10px; flex-wrap:wrap; flex:none; }
.cookie-banner .btn--sm{ padding:10px 18px; font-size:13px; }
@media (max-width:620px){
  .cookie-banner{ padding:16px; }
  .cookie-banner__inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner__actions{ justify-content:stretch; }
  .cookie-banner__actions .btn{ flex:1; text-align:center; }
}

/* ==========================================================================
   Catálogo / detalle de tour
   ========================================================================== */
.gallery{ display:grid; grid-template-columns:1.5fr 1fr; gap:12px; border-radius:var(--radius-lg); overflow:hidden; }
/* Sin esto, el track de 1.5fr puede colapsar a 0 ("grid blowout"): por
   defecto min-width de un hijo de grid es "auto" (= su min-content), y con
   pocas imágenes del lado derecho (p.ej. solo 2, como en la galería de un
   paquete) el navegador puede calcular mal el reparto de espacio entre
   columnas cuando una imagen todavía no cargó. min-width:0 fuerza a que el
   fr se reparta proporcionalmente siempre, sin afectar el tamaño visual
   una vez las imágenes cargan normalmente. */
.gallery > *{ min-width:0; min-height:0; }
.gallery__main{ position:relative; aspect-ratio:4/3.1; overflow:hidden; background:var(--sand-2); }
.gallery__main img{ width:100%; height:100%; object-fit:cover; }
[data-lightbox-src]{ cursor:zoom-in; }
.gallery__view-all{
  position:absolute; left:18px; bottom:18px; background:rgba(10,59,87,.85); color:#fff; font-size:12.5px; font-weight:600;
  padding:9px 16px; border-radius:999px; display:flex; align-items:center; gap:7px; backdrop-filter:blur(4px);
}
.gallery__side{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gallery__side img{ width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; aspect-ratio:1/.92; background:var(--sand-2); }
.fav-btn{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.94);
  border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:transform .3s var(--ease);
}
.fav-btn:hover{ transform:scale(1.1); }
.fav-btn svg{ width:17px; height:17px; }
.fav-btn.is-active{ color:var(--coral); }

.product-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:28px 0 12px; }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:6px 13px; border-radius:999px; text-transform:uppercase; }
.badge--teal{ background:var(--teal-pale); color:var(--teal-dark); }
.badge--gold{ background:var(--warn-pale); color:#9C6A16; }
.badge--ok{ background:var(--ok-pale); color:var(--ok); }
.badge--warn{ background:var(--warn-pale); color:var(--warn); }
.badge--danger{ background:var(--danger-pale); color:var(--danger); }
.product-title{ font-size:clamp(28px,4vw,40px); margin-bottom:14px; }
.product-meta{ display:flex; flex-wrap:wrap; gap:22px; margin:18px 0 24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.product-meta__item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-dim); }
.product-meta__item svg{ width:17px; height:17px; color:var(--teal-dark); flex:none; }
.product-meta__item b{ color:var(--ink); font-weight:700; }
.trust-row{ display:flex; flex-wrap:wrap; gap:24px; margin-bottom:32px; }
.trust-row span{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-dim); font-weight:500; }
.trust-row svg{ width:16px; height:16px; color:var(--ok); flex:none; }

.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:30px; overflow-x:auto; }
.tab-btn{
  padding:13px 20px; font-size:14px; font-weight:700; color:var(--ink-faint); background:none; border:none;
  cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color .25s ease, border-color .25s ease;
}
.tab-btn.is-active{ color:var(--coral); border-color:var(--coral); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }
.check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.check-list li{ display:flex; align-items:flex-start; gap:11px; font-size:14px; line-height:1.55; color:var(--ink-dim); }
.check-list svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.check-list--yes svg{ color:var(--ok); }
.check-list--no svg{ color:var(--ink-faint); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.itinerary{ list-style:none; margin:0; padding:0; position:relative; }
.itinerary li{ position:relative; padding:0 0 26px 30px; border-left:2px solid var(--line); }
.itinerary li:last-child{ border-color:transparent; padding-bottom:0; }
.itinerary li::before{ content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--coral); }
.itinerary b{ display:block; font-size:14.5px; color:var(--ink); margin-bottom:3px; font-weight:700; }
.itinerary span{ font-size:13.5px; color:var(--ink-dim); }
.notice{ display:flex; gap:13px; padding:18px 20px; border-radius:var(--radius); background:var(--teal-pale); color:var(--teal-dark); font-size:13.5px; line-height:1.6; }
.notice svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.notice--coral{ background:var(--coral-pale); color:var(--coral-dark); }

.booking-card{ position:sticky; top:calc(var(--header-h) + 24px); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow); }
.booking-card__price{ font-size:12.5px; color:var(--ink-faint); margin-bottom:3px; }
.booking-card__price b{ display:block; font-size:30px; color:var(--ink); font-weight:800; }
.field-block{ margin:20px 0; }
.field-block label{ display:block; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.select-wrap{ position:relative; }
.select-wrap select{
  width:100%; appearance:none; padding:12px 34px 12px 14px; border-radius:var(--radius-sm); border:1px solid var(--line);
  font-size:14px; font-weight:600; color:var(--ink); background:var(--paper); font-family:inherit; cursor:pointer;
}
.select-wrap svg{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--ink-faint); pointer-events:none; }
.stepper{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 15px; }
.stepper span{ font-size:14px; font-weight:600; }
.stepper small{ display:block; font-size:11px; color:var(--ink-faint); font-weight:400; }
.stepper-btn{ width:29px; height:29px; border-radius:8px; border:1px solid var(--line); background:var(--sand); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background .25s ease; }
.stepper-btn:hover{ background:var(--sand-2); }
.stepper-btn:disabled{ opacity:.4; cursor:not-allowed; }
.price-lines{ display:flex; flex-direction:column; gap:10px; padding:20px 0; margin:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.price-lines .row{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-dim); }
.price-lines .row.total{ font-size:16.5px; font-weight:700; color:var(--ink); padding-top:9px; border-top:1px dashed var(--line); }

/* map placeholder */
.map-card{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.map-card__visual{
  height:180px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(11,74,112,.4), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(226,99,46,.28), transparent 50%),
    var(--teal-deep);
}
.map-card__pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50% 50% 50% 0; background:var(--coral); rotate:-45deg; box-shadow:0 9px 20px -6px rgba(0,0,0,.4); }
.map-card__body{ padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--paper); }

/* reviews */
.review-summary{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.review-summary .score{ font-size:44px; font-weight:800; color:var(--ink); }
.stars{ color:var(--gold-ink); font-size:14px; letter-spacing:2px; }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.review-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.review-card__head{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.review-avatar{ width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; }
.review-card__name{ font-size:13.5px; font-weight:700; }
.review-card__meta{ font-size:11.5px; color:var(--ink-faint); }
.review-card p{ font-size:13.5px; color:var(--ink-dim); line-height:1.6; }

/* ==========================================================================
   Carrito / checkout
   ========================================================================== */
.cart-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:52px; align-items:flex-start; }
.cart-item{ display:grid; grid-template-columns:100px 1fr auto; gap:18px; padding:24px 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-item img{ width:100px; height:100px; border-radius:var(--radius-sm); object-fit:cover; }
.cart-item h4{ font-size:16.5px; margin-bottom:5px; font-weight:700; }
.cart-item__meta{ font-size:12.5px; color:var(--ink-faint); display:flex; gap:10px; flex-wrap:wrap; margin-bottom:9px; }
.cart-item__price{ font-weight:700; font-size:14px; color:var(--ink); }
.cart-item__actions{ display:flex; flex-direction:column; align-items:flex-end; gap:11px; }
.remove-btn{ background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:12px; display:flex; align-items:center; gap:5px; }
.remove-btn:hover{ color:var(--coral); }
.remove-btn svg{ width:14px; height:14px; }

.stepper-nav{ display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:58px; max-width:840px; margin-left:auto; margin-right:auto; }
.stepper-nav__step{ display:flex; align-items:center; gap:12px; flex:1; }
.stepper-nav__circle{ width:36px; height:36px; border-radius:50%; background:var(--sand-2); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none; transition:all .35s var(--ease); }
.stepper-nav__label{ font-size:12.5px; }
.stepper-nav__label b{ display:block; font-size:13.5px; color:var(--ink); font-weight:700; }
.stepper-nav__label span{ color:var(--ink-faint); }
.stepper-nav__line{ height:1px; background:var(--line); flex:1; margin:0 4px; }
.stepper-nav__step.is-active .stepper-nav__circle{ background:var(--coral); color:#fff; }
.stepper-nav__step.is-done .stepper-nav__circle{ background:var(--ok); color:#fff; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
/* separación entre el último campo de un formulario (ej. contraseña) y el
   botón de envío que viene justo debajo — sin esto quedan pegados */
.form-grid + .btn, .form-grid + p + .btn{ margin-top:22px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size:12.5px; font-weight:600; color:var(--ink); }
.form-field label small{ color:var(--coral); }
.form-field input, .form-field select, .form-field textarea{
  padding:13px 15px; border-radius:var(--radius-sm); border:1px solid var(--line); font-size:14px; font-family:inherit; color:var(--ink);
  background:var(--paper); outline:none; transition:border-color .25s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--teal); }
.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; margin-bottom:24px; }
.form-card h3{ font-size:19px; margin-bottom:5px; }
.form-card > p{ font-size:13.5px; color:var(--ink-dim); margin-bottom:22px; }
.check-row{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-dim); margin-top:18px; }
.check-row input{ margin-top:3px; }

.pay-methods{ display:flex; flex-direction:column; gap:11px; }
.pay-method{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; cursor:pointer; transition:border-color .25s ease, background .25s ease; }
.pay-method:has(input:checked){ border-color:var(--coral); background:var(--coral-pale); }
.pay-method input{ accent-color:var(--coral); }
.pay-method span{ font-size:14px; font-weight:600; flex:1; }
.pay-method small{ font-size:11px; color:var(--ink-faint); font-weight:400; display:block; }

.summary-card{ position:sticky; top:calc(var(--header-h) + 24px); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow); }
.summary-card h3{ font-size:18px; margin-bottom:20px; }
.summary-product{ display:flex; gap:13px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.summary-product img{ width:66px; height:66px; border-radius:var(--radius-sm); object-fit:cover; }
.summary-product b{ font-size:14px; display:block; }
.summary-product span{ font-size:12px; color:var(--ink-faint); }
.summary-row{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-dim); padding:7px 0; }
.summary-row.total{ font-size:18px; font-weight:700; color:var(--ink); padding-top:16px; margin-top:9px; border-top:1px dashed var(--line); }
.coupon-row{ display:flex; gap:8px; margin:18px 0; }
.coupon-row input{ flex:1; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--line); font-size:13px; }
.trust-mini{ display:flex; flex-direction:column; gap:13px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.trust-mini div{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-dim); }
.trust-mini svg{ width:16px; height:16px; color:var(--teal-dark); flex:none; }

.confirm-box{ text-align:center; max-width:580px; margin:0 auto; padding:70px 20px; }
.confirm-icon{ width:80px; height:80px; border-radius:50%; background:var(--ok-pale); color:var(--ok); display:flex; align-items:center; justify-content:center; margin:0 auto 28px; }
.confirm-icon svg{ width:36px; height:36px; }
.confirm-box h1{ font-size:32px; margin-bottom:14px; }
.confirm-box p{ color:var(--ink-dim); font-size:15.5px; line-height:1.65; margin-bottom:32px; }
.confirm-code{ display:inline-block; background:var(--sand-2); border-radius:var(--radius-sm); padding:13px 24px; font-weight:700; letter-spacing:.06em; margin-bottom:32px; }

/* ==========================================================================
   Mi cuenta — login / registro / recuperar contraseña (pantalla dividida)
   ========================================================================== */
/* El login/registro/recuperar de Mi cuenta se ve sin header ni footer del
   sitio — pantalla completa, igual que la mayoría de pantallas de acceso.
   Se activa con la clase "is-auth-gate" en <body> (puesta por defecto en
   el HTML y quitada por JS en cuanto hay sesión de cliente). */
body.is-auth-gate #site-header, body.is-auth-gate #site-footer{ display:none; }
body.is-auth-gate main{ padding-top:0; min-height:100vh; display:grid; align-items:center; }
.cuenta-wrap{ padding-top:calc(var(--header-h) + 34px); padding-bottom:100px; }
body.is-auth-gate .cuenta-wrap{ padding-top:28px; padding-bottom:28px; width:100%; }

.auth-wrap{ max-width:940px; margin:0 auto; }
.auth-card{
  /* --teal/--teal-deep/--coral/--gold ya son los colores del logo a nivel
     de todo el sitio (ver :root) — aquí solo se agrega un tono claro para
     el degradado del panel, que no existe como variable global. */
  --auth-blue-light:#1C7CAE;
  position:relative;
  display:grid; grid-template-columns:1fr 1.2fr; align-items:stretch; min-height:580px;
  background:var(--paper); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  border-top:5px solid var(--gold);
}
/* el header (donde normalmente vive el selector ES/EN) está oculto en esta
   pantalla, así que el selector se repite aquí, sobre el lado blanco del
   formulario, para que siempre haya una forma de cambiar de idioma. */
.auth-card__lang{ position:absolute; top:16px; right:16px; z-index:5; }
@media (max-width:900px){ .auth-card__lang{ top:12px; right:12px; } }
.auth-side{
  position:relative; overflow:hidden; z-index:0;
  padding:48px 42px; display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(160deg, var(--auth-blue-light) 0%, var(--teal) 55%, var(--teal-deep) 100%);
  color:#fff;
}
.auth-side::before, .auth-side::after{ content:""; position:absolute; border-radius:50%; z-index:-1; background:rgba(255,255,255,.09); }
.auth-side::before{ width:300px; height:300px; top:-130px; left:-110px; }
.auth-side::after{ width:230px; height:230px; bottom:-110px; right:-90px; background:rgba(255,255,255,.07); }
.auth-logo{
  width:64px; height:64px; border-radius:50%; background:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; padding:5px; margin-bottom:28px;
  box-shadow:0 12px 26px -10px rgba(6,30,27,.45);
}
.auth-logo img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.auth-side__title{ font-size:25px; font-weight:800; line-height:1.25; margin-bottom:10px; }
.auth-side__sub{ font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.82); max-width:290px; }
.auth-side__switch{ margin-top:30px; }
.auth-form-side{ padding:50px 46px; display:flex; flex-direction:column; justify-content:center; }
.auth-form-title{ font-size:25px; font-weight:800; margin-bottom:6px; }
.auth-form-sub{ font-size:13.5px; color:var(--ink-dim); margin-bottom:26px; }
.auth-form-side .form-field{ margin-bottom:16px; }
.auth-form-side .btn--coral{ background:var(--coral); box-shadow:0 14px 28px -12px rgba(214,69,40,.5); }
.auth-form-side .btn--coral:hover{ background:var(--coral-dark); }
.auth-forgot{ display:inline-block; margin:-4px 0 20px; }
.auth-back{ display:inline-block; margin-top:18px; }

@media (max-width:900px){
  .auth-card{ grid-template-columns:1fr; min-height:0; }
  .auth-side{ padding:38px 30px 50px; border-radius:0 0 46px 46px; }
  .auth-form-side{ padding:36px 28px 42px; }
}
@media (max-width:480px){
  .auth-side{ padding:32px 24px 42px; border-radius:0 0 32px 32px; }
  .auth-form-side{ padding:30px 22px 36px; }
  .auth-side__title, .auth-form-title{ font-size:21px; }
}

.account-layout{ display:grid; grid-template-columns:270px 1fr; gap:40px; align-items:flex-start; }
.account-sidebar{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; position:sticky; top:calc(var(--header-h) + 24px); }
.account-user{ display:flex; align-items:center; gap:13px; padding-bottom:20px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.account-avatar{ width:48px; height:48px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex:none; }
.account-user b{ display:block; font-size:15px; font-weight:700; }
.account-user span{ font-size:12px; color:var(--ink-faint); }
.account-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.account-nav button{
  width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:12px;
  background:none; border:none; font-size:14px; font-weight:600; color:var(--ink-dim); cursor:pointer; transition:all .25s ease;
}
.account-nav button:hover{ background:var(--sand); color:var(--ink); }
.account-nav button.is-active{ background:var(--coral-pale); color:var(--coral-dark); }
.account-nav svg{ width:17px; height:17px; flex:none; }
.account-panel{ display:none; }
.account-panel.is-active{ display:block; }
.account-panel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:22px; }
.stat-tile{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.stat-tile__label{ font-size:12px; color:var(--ink-faint); margin-bottom:9px; }
.stat-tile__value{ font-size:26px; font-weight:800; }
.stat-mini-row{ display:flex; gap:15px; flex-wrap:wrap; margin-top:11px; }
.stat-mini{ flex:1; min-width:90px; text-align:center; padding:16px 8px; border-radius:14px; background:var(--sand); }
.stat-mini b{ display:block; font-size:20px; }
.stat-mini span{ font-size:11px; color:var(--ink-faint); }
.panel-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; margin-bottom:22px; }
.panel-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.panel-card__head h3{ font-size:17px; }
.trip-row{ display:flex; gap:15px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.trip-row:last-child{ border-bottom:none; }
.trip-row img{ width:66px; height:66px; border-radius:var(--radius-sm); object-fit:cover; flex:none; }
.trip-row b{ display:block; font-size:14.5px; font-weight:700; }
.trip-row span{ font-size:12px; color:var(--ink-faint); }
.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th{ text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:0 11px 11px; font-weight:600; }
.data-table td{ padding:13px 11px; border-top:1px solid var(--line); color:var(--ink-dim); }
.data-table tr:hover td{ background:var(--sand); }
.pill{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:700; }
.fav-mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.fav-mini a{ position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1/.85; text-decoration:none; transition:transform .35s var(--ease); }
.fav-mini a:hover{ transform:translateY(-4px); }
.fav-mini img{ width:100%; height:100%; object-fit:cover; }
.fav-mini span{ position:absolute; left:11px; bottom:11px; color:#fff; font-size:12.5px; font-weight:700; }
.fav-mini a::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,16,14,.78), transparent 60%); }

/* ==========================================================================
   responsive
   ========================================================================== */

/* ---------------- selector de fecha elegante (reemplaza <input type=date>) ---------------- */
.ctc-datepicker{ position:relative; }
.ctc-datepicker__native{ position:absolute; opacity:0; visibility:hidden; width:1px; height:1px; pointer-events:none; }
.ctc-datepicker__trigger{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  padding:11px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); cursor:pointer; font-family:inherit; font-size:14.5px; color:var(--ink-faint);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ctc-datepicker__trigger svg{ width:19px; height:19px; flex:none; color:var(--teal); }
.ctc-datepicker__trigger .ctc-datepicker__label{ flex:1; }
.ctc-datepicker__trigger.has-value{ color:var(--ink); font-weight:600; }
.ctc-datepicker__trigger:hover{ border-color:var(--teal); }
.ctc-datepicker__trigger.is-open{ border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-pale); }
.ctc-datepicker__panel{
  position:absolute; z-index:61; top:calc(100% + 8px); left:0; width:300px; max-width:calc(100vw - 32px);
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
  border:1px solid var(--line); padding:16px; opacity:0; transform:translateY(-6px) scale(.98);
  pointer-events:none; transition:opacity .18s var(--ease-soft), transform .18s var(--ease-soft);
}
.ctc-datepicker__panel.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.ctc-datepicker__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ctc-datepicker__month{ font-weight:700; font-size:14px; color:var(--ink); text-transform:capitalize; }
.ctc-datepicker__nav{
  width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--sand);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); transition:background .2s ease;
}
.ctc-datepicker__nav svg{ width:16px; height:16px; }
.ctc-datepicker__nav:hover{ background:var(--sand-2); }
.ctc-datepicker__nav:disabled{ opacity:.35; cursor:not-allowed; }
.ctc-datepicker__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.ctc-datepicker__grid--dow{ margin-bottom:4px; }
.ctc-datepicker__grid--dow span{ font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-faint); text-align:center; padding:4px 0; }
.ctc-datepicker__day{
  aspect-ratio:1; width:100%; border:none; background:none; border-radius:9px; font-family:inherit;
  font-size:13px; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.ctc-datepicker__day:hover:not(:disabled){ background:var(--teal-pale); }
.ctc-datepicker__day.is-today{ font-weight:700; color:var(--teal-dark); box-shadow:inset 0 0 0 1.5px var(--teal-pale); }
.ctc-datepicker__day.is-selected{ background:var(--teal); color:#fff; font-weight:700; }
.ctc-datepicker__day.is-selected.is-today{ box-shadow:none; }
.ctc-datepicker__day:disabled{ color:var(--ink-faint); opacity:.35; cursor:not-allowed; }
.ctc-datepicker__foot{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); text-align:center; }
.ctc-datepicker__today{
  border:none; background:none; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--coral);
  cursor:pointer; padding:4px 10px; border-radius:8px; transition:background .2s ease;
}
.ctc-datepicker__today:hover{ background:var(--coral-pale); }

@media (max-width: 980px){
  .main-nav, .header-actions .btn--coral, .header-phone, .header-actions .lang-switch{ display:none; }
  .burger{ display:flex; }
  .tours-grid, .tours-grid--4{ grid-template-columns:repeat(2,1fr); }
  .nosotros .wrap{ grid-template-columns:1fr; }
  .nosotros__media{ position:relative; top:0; }
  .nosotros__media img{ height:360px; }
  .contacto .wrap{ grid-template-columns:1fr; gap:44px; }
  .cart-layout{ grid-template-columns:1fr; }
  .account-layout{ grid-template-columns:1fr; }
  .account-sidebar{ position:relative; top:0; }
  .form-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; gap:26px; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; gap:34px; }
  .review-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .gallery__side{ display:none; }
  .account-panel-grid{ grid-template-columns:1fr 1fr; }
  .fav-mini{ grid-template-columns:repeat(2,1fr); }
  .dest-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 620px){
  .tours-grid, .tours-grid--4{ grid-template-columns:1fr; }
  .dest-grid{ grid-template-columns:repeat(2,1fr); }
  .hero{ padding-bottom:150px; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .stepper-nav__label{ display:none; }
  .account-panel-grid{ grid-template-columns:1fr; }
  .cart-item{ grid-template-columns:70px 1fr; }
  .cart-item__actions{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
  .ctc-datepicker__panel{ width:280px; }
}

/* ---------------- lightbox de fotos (galería de tour/paquete) ---------------- */
body.lightbox-open{ overflow:hidden; }
.lightbox-overlay{
  position:fixed; inset:0; z-index:10000; background:rgba(6,20,18,.92);
  display:flex; align-items:center; justify-content:center; padding:56px 70px;
  animation:lightboxFade .2s ease;
}
@keyframes lightboxFade{ from{ opacity:0; } to{ opacity:1; } }
.lightbox-figure{ margin:0; max-width:100%; max-height:100%; display:flex; }
.lightbox-img{ max-width:100%; max-height:calc(100vh - 112px); object-fit:contain; border-radius:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.lightbox-close, .lightbox-nav{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
  border:none; cursor:pointer; transition:background .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ background:rgba(255,255,255,.28); }
.lightbox-close{ top:20px; right:20px; }
.lightbox-close svg{ width:20px; height:20px; }
.lightbox-nav{ top:50%; transform:translateY(-50%); }
.lightbox-nav svg{ width:22px; height:22px; }
.lightbox-nav--prev{ left:20px; }
.lightbox-nav--next{ right:20px; }
.lightbox-count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#fff; font-size:12.5px; font-weight:600; background:rgba(255,255,255,.14); padding:5px 14px; border-radius:999px; }
@media (max-width:640px){
  .lightbox-overlay{ padding:80px 16px; }
  .lightbox-close{ top:12px; right:12px; }
  .lightbox-nav--prev{ left:8px; }
  .lightbox-nav--next{ right:8px; }
}

/* ---------------- cross-page view transitions (progressive enhancement) ---------------- */
@view-transition{ navigation:auto; }
.site-header{ view-transition-name:site-header; }
.fab-wa{ view-transition-name:fab-wa; }
::view-transition-old(root){ animation-duration:.4s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
::view-transition-new(root){ animation-duration:.4s; animation-timing-function:cubic-bezier(.16,1,.3,1); }