/* ==========================================================================
   NOMANTIS — Sistema de landings (propuesta La Hormiga Digital)
   Design tokens extraídos de nomantis.com
   ========================================================================== */

:root{
  --ink:#0E2529;
  --teal:#22494E;
  --teal-d:#173135;
  --teal-l:#2F6167;
  --gold:#F59E0B;
  --gold-d:#C87F09;
  --gold-soft:#FDF6E7;
  --sand:#FAF8F5;
  --paper:#FFFFFF;
  --muted:#5C6B6D;
  --muted-2:#8A9799;
  --line:rgba(14,37,41,.12);
  --line-2:rgba(14,37,41,.06);
  --wa:#25D366;
  --r-sm:10px; --r:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(14,37,41,.06), 0 1px 3px rgba(14,37,41,.05);
  --shadow:0 8px 24px -8px rgba(14,37,41,.18), 0 2px 6px rgba(14,37,41,.06);
  --shadow-lg:0 24px 60px -20px rgba(14,37,41,.32), 0 8px 20px -12px rgba(14,37,41,.18);
  --font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --header-h:68px;
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.12; letter-spacing:-.025em; font-weight:800}
p{margin:0}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:20px}
.wrap-lg{max-width:1340px}
.sec{padding:72px 0}
.sec-sm{padding:52px 0}
.sec-sand{background:var(--sand)}
.sec-teal{background:var(--teal); color:#fff}
.sec-ink{background:var(--ink); color:#fff}
.grid{display:grid; gap:20px}
.center{text-align:center}

/* ---------- Tipografía ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-l);
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold)}
.sec-teal .eyebrow,.sec-ink .eyebrow,.on-dark .eyebrow{color:rgba(255,255,255,.72)}
h1,.h1{font-size:clamp(2.1rem,5.2vw,3.75rem)}
h2,.h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3,.h3{font-size:1.2rem; font-weight:700; letter-spacing:-.01em}
.lead{font-size:clamp(1rem,1.4vw,1.125rem); color:var(--muted); max-width:62ch}
.sec-teal .lead,.sec-ink .lead,.on-dark .lead{color:rgba(255,255,255,.82)}
.sec-head{display:flex; flex-direction:column; gap:14px; margin-bottom:36px}
.sec-head.row{flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:var(--r-lg); padding:14px 24px; font-size:16px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  text-align:center; line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--teal); box-shadow:var(--shadow-lg)}
.btn-gold{background:var(--gold); color:#2B1B00; box-shadow:0 10px 24px -10px rgba(245,158,11,.7)}
.btn-gold:hover{background:#FFB020}
.btn-white{background:#fff; color:var(--ink); box-shadow:var(--shadow)}
.btn-ghost{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink)}
.btn-lg{padding:16px 30px; font-size:17px}
.btn-block{width:100%}
.btn-sm{padding:10px 18px; font-size:14px; border-radius:var(--r)}

/* ---------- Header ---------- */
.hdr{position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h); display:flex; align-items:center;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s;
  border-bottom:1px solid transparent; color:#fff}
.hdr .wrap{display:flex; align-items:center; gap:24px; width:100%; max-width:1340px}
.hdr.scrolled{background:rgba(255,255,255,.92); backdrop-filter:blur(12px); color:var(--ink); border-color:var(--line-2); box-shadow:0 1px 0 rgba(14,37,41,.04)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:19px}
.brand img{width:26px; height:26px; object-fit:contain}
.brand img{border-radius:7px}
.nav{display:flex; align-items:center; gap:26px; margin-left:auto; font-size:14.5px; font-weight:500}
.nav a{opacity:.9} .nav a:hover{opacity:1}
.hdr-cta{margin-left:8px}
.hdr .btn-sm{background:#fff; color:var(--ink); border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow-sm)}
.hdr.scrolled .btn-sm{background:var(--ink); color:#fff; border-color:var(--ink)}
.burger{display:none; margin-left:auto; background:none; border:0; padding:10px; min-width:44px; min-height:44px; cursor:pointer}
.burger span{display:block; width:22px; height:2px; background:currentColor; margin:5px 0; border-radius:2px; transition:.25s}
.mnav{position:fixed; inset:var(--header-h) 0 auto 0; background:#fff; color:var(--ink); z-index:68;
  border-bottom:1px solid var(--line); display:none; padding:10px 20px 20px; box-shadow:var(--shadow)}
.mnav.open{display:block}
.mnav a{display:block; padding:13px 4px; border-bottom:1px solid var(--line-2); font-weight:600}
.mnav .btn{margin-top:14px}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:640px; display:flex; align-items:center; color:#fff; overflow:hidden; padding:calc(var(--header-h) + 48px) 0 56px}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,20,22,.88) 0%, rgba(6,20,22,.66) 42%, rgba(6,20,22,.32) 100%)}
.hero .wrap{position:relative; z-index:1; max-width:1340px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) 480px; gap:56px; align-items:center}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .lead{color:rgba(255,255,255,.88); font-size:clamp(1rem,1.5vw,1.18rem)}
.hero-points{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px; font-size:15px}
.hero-points li{display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.9)}
.hero-points svg{flex:none; margin-top:3px}

/* Trust inline */
.trust-inline{display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap; font-size:14px; color:rgba(255,255,255,.85)}
.stars{color:var(--gold); letter-spacing:1px; font-size:15px}
.chip-glass{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); font-weight:500}

/* ---------- Cards ---------- */
.card{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden}
.card-pad{padding:26px}
.feature{display:grid; gap:12px; padding:26px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); height:100%}
.feature .ico{width:42px; height:42px; border-radius:12px; background:var(--gold-soft); color:var(--gold-d); display:grid; place-items:center}
.sec-teal .feature,.sec-ink .feature{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff; box-shadow:none}
.sec-teal .feature .ico,.sec-ink .feature .ico{background:rgba(245,158,11,.16); color:var(--gold)}
.feature p{color:var(--muted); font-size:15px}
.sec-teal .feature p,.sec-ink .feature p{color:rgba(255,255,255,.78)}

/* ---------- Formulario ---------- */
.form-card{background:#fff; color:var(--ink); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden}
.form-card .fc-head{padding:22px 26px 18px; background:linear-gradient(160deg,#fff, #F6F4F0); border-bottom:1px solid var(--line-2)}
.form-card .fc-head h2,.form-card .fc-head h3{font-size:1.25rem}
.form-card .fc-head p{font-size:14px; color:var(--muted); margin-top:6px}
.form-body{padding:22px 26px 26px}
.steps{display:flex; gap:6px; align-items:center; margin-top:16px}
.step-dot{flex:1; height:5px; border-radius:99px; background:var(--line); overflow:hidden}
.step-dot.done{background:var(--teal)}
.step-dot.active{background:linear-gradient(90deg,var(--teal) 50%, var(--line) 50%)}
.step-label{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
.fstep{display:none} .fstep.active{display:block; animation:fade .3s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.field{display:grid; gap:7px; margin-bottom:16px}
.field > label,.flabel{font-size:13.5px; font-weight:600}
.hint{font-size:12.5px; color:var(--muted-2)}
.input,select.input,textarea.input{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; font-size:15px; transition:border-color .15s, box-shadow .15s;
}
.input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(34,73,78,.12)}
.input.err{border-color:#D14343; box-shadow:0 0 0 3px rgba(209,67,67,.1)}
.err-msg{color:#C0392B; font-size:12.5px; display:none}
.err-msg.show{display:block}
select.input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6B6D' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:11px 15px; min-height:44px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:#fff; font-size:14px; font-weight:500; cursor:pointer;
  transition:.16s; user-select:none;
}
.chip:hover{border-color:var(--teal-l)}
.chip:has(input:focus-visible){outline:3px solid var(--gold); outline-offset:2px}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip.on{background:var(--teal); border-color:var(--teal); color:#fff}
.chip .fl{font-size:15px; line-height:1}
.chip.on .fl{filter:grayscale(0)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.5}
.check input{margin-top:2px; width:16px; height:16px; accent-color:var(--teal); flex:none}
.form-nav{display:flex; gap:10px; margin-top:6px}
.form-nav .btn{flex:1}
.form-foot{display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; color:var(--muted-2); margin-top:14px}
.ok-panel{display:none; text-align:center; padding:16px 4px}
.ok-panel.show{display:block}
.ok-ico{width:64px; height:64px; border-radius:50%; background:#E7F5EC; color:#1E8E4A; display:grid; place-items:center; margin:0 auto 16px}

/* ---------- Destinos ---------- */
.dest-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.dest{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/4; display:block; box-shadow:var(--shadow-sm); cursor:pointer; border:0; padding:0; text-align:left; width:100%}
.dest img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.dest:hover img{transform:scale(1.07)}
.dest::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,20,22,.85) 0%, rgba(6,20,22,.15) 55%, rgba(6,20,22,0) 100%)}
.dest-info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px; color:#fff}
.dest-info .k,.dest-info .n,.dest-info .d{display:block}
.dest-info .k{font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; font-weight:700}
.dest-info .n{font-size:1.15rem; font-weight:800; letter-spacing:-.02em; margin-top:3px}
.dest-info .d{font-size:13px; opacity:.85; margin-top:4px}
.dest-pick{display:block; position:absolute; top:12px; right:12px; z-index:3; background:rgba(255,255,255,.92); color:var(--ink);
  font-size:12px; font-weight:700; padding:6px 11px; border-radius:var(--r-pill); opacity:0; transform:translateY(-4px); transition:.2s}
.dest:hover .dest-pick,.dest:focus-visible .dest-pick{opacity:1; transform:none}
@media (hover:none){.dest-pick{opacity:1; transform:none}}

/* ---------- Tipos de viaje ---------- */
.types{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.type{display:grid; gap:10px; padding:24px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:#fff; box-shadow:var(--shadow-sm); transition:.2s}
.type:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.type .em{font-size:24px}
.type p{font-size:14.5px; color:var(--muted)}

/* ---------- Pasos ---------- */
.steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s}
.stepc{position:relative; padding-top:8px}
.stepc .num{width:38px; height:38px; border-radius:50%; background:var(--gold); color:#2B1B00; font-weight:800; display:grid; place-items:center; margin-bottom:14px}
.sec-teal .stepc .num,.sec-ink .stepc .num{background:var(--gold); color:#2B1B00}
.stepc h3{margin-bottom:6px}
.stepc p{font-size:14.5px; color:var(--muted)}
.sec-teal .stepc p,.sec-ink .stepc p{color:rgba(255,255,255,.78)}

/* ---------- Reseñas ---------- */
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.rev{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px}
.rev-top{display:flex; align-items:center; gap:12px}
.avatar{width:40px; height:40px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; flex:none}
.rev .who{font-weight:700; font-size:14.5px}
.rev .when{font-size:12px; color:var(--muted-2)}
.rev p{font-size:14.5px; color:#33474A}
.g-badge{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 16px; box-shadow:var(--shadow-sm); font-size:14px; font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:10px}
.qa{background:#fff; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden}
.qa summary{cursor:pointer; padding:18px 20px; font-weight:650; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; font-size:22px; color:var(--teal-l); font-weight:400; line-height:1}
.qa[open] summary::after{content:"–"}
.qa .a{padding:0 20px 20px; color:var(--muted); font-size:15px}

/* ---------- Footer ---------- */
.ftr{background:var(--ink); color:rgba(255,255,255,.72); padding:56px 0 34px; font-size:14.5px}
.ftr a:hover{color:#fff}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
.ftr h3,.ftr h4{color:#fff; font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.ftr li{padding:6px 0}
.ftr li a{display:inline-block; padding:3px 0}
.ftr-bottom{margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.55)}

/* ---------- Flotantes ---------- */
.wa{position:fixed; right:18px; bottom:18px; z-index:70; width:54px; height:54px; border-radius:50%; background:var(--wa); color:#fff;
  display:grid; place-items:center; box-shadow:0 12px 28px -8px rgba(37,211,102,.6); transition:.2s}
.wa:hover{transform:scale(1.06)}
.mob-cta{position:fixed; left:0; right:0; bottom:0; z-index:65; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line)}
.mob-cta .btn{flex:1}

/* ---------- Utils ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:.02em}
.pill-gold{background:var(--gold-soft); color:var(--gold-d)}
.pill-teal{background:rgba(34,73,78,.08); color:var(--teal)}
.pill-red{background:#FDECEC; color:#C0392B}
.pill-green{background:#E7F5EC; color:#1E7D45}
.divider{height:1px; background:var(--line-2); border:0; margin:0}
.mt-6{margin-top:24px} .mt-4{margin-top:16px} .mt-8{margin-top:32px}
.hide{display:none !important}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .dest-grid{grid-template-columns:repeat(3,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr); gap:26px}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:34px}
  .hero{padding-top:calc(var(--header-h) + 34px); min-height:0}
  .nav{display:none}
  .hdr-cta{display:none}
  .burger{display:block}
  .rev-grid,.types{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .sec{padding:52px 0}
  .dest-grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .rev-grid,.types{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr; gap:26px}
  .mob-cta{display:flex}
  .wa{display:none}
  .ftr{padding-bottom:110px}
  .form-body{padding-bottom:34px}
  .form-card .fc-head,.form-body{padding-inline:18px}
  .sec-head.row{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ==========================================================================
   VIAJES EN GRUPO — listado, ficha y reserva
   ========================================================================== */

/* Buscador del hero */
.hsearch{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; background:#fff; color:var(--ink); padding:12px;
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg); max-width:780px}
.hsearch .field{margin:0}
.hsearch label{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
.hsearch .input{border-color:transparent; background:#F6F4F0; color:var(--ink)}
.hsearch select.input option{color:var(--ink)}

/* Barra de filtros */
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:18px; background:#fff;
  border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); position:sticky; top:calc(var(--header-h) + 8px); z-index:20}
.filters .field{margin:0; min-width:150px; flex:1 1 150px}
.filters .btn{white-space:nowrap}
.count{font-size:14px; color:var(--muted); font-weight:600; margin:22px 0 14px}

/* Tarjeta de salida */
.trips{display:grid; gap:16px}
.trip{display:grid; grid-template-columns:280px 1fr 230px; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s}
.trip:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.trip-img{position:relative; display:block; min-height:220px}
.trip-img img{width:100%; height:100%; object-fit:cover}
.trip-date{position:absolute; top:14px; left:14px; background:#fff; border-radius:var(--r); padding:8px 12px; text-align:center;
  box-shadow:var(--shadow-sm); line-height:1}
.trip-date b{display:block; font-size:20px; font-weight:800; color:var(--ink)}
.trip-date i{display:block; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--teal-l); margin-top:3px}
.trip-body{padding:22px 24px; display:flex; flex-direction:column; gap:10px}
.trip-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.trip-region{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); font-weight:700}
.trip h3{font-size:1.3rem; font-weight:800; letter-spacing:-.02em}
.trip h3 a:hover{color:var(--teal)}
.trip-claim{font-size:14.5px; color:var(--muted)}
.trip-meta{list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; font-size:14px; color:#3B5053}
.trip-cta{border-left:1px solid var(--line-2); padding:22px; display:flex; flex-direction:column; justify-content:center; gap:10px; text-align:center; background:#FCFBF9}
.trip-price{display:flex; flex-direction:column; align-items:center; line-height:1.1}
.price{font-size:1.7rem; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
.price-old{font-size:14px; color:var(--muted-2); text-decoration:line-through}
.pp{font-size:12px; color:var(--muted-2); margin-top:4px}
.trip-left{font-size:12.5px; color:var(--muted)}
.empty{padding:40px; text-align:center; color:var(--muted); background:#fff; border:1px dashed var(--line); border-radius:var(--r-lg)}

/* Coordinadores */
.coords{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.coord{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:22px; text-align:center; box-shadow:var(--shadow-sm)}
.coord .avatar{width:64px; height:64px; font-size:22px; margin:0 auto 12px}
.coord p{font-size:14px; color:var(--muted); margin-top:6px}

/* ---------- FICHA DE VIAJE ---------- */
.tHero{position:relative; min-height:460px; display:flex; align-items:flex-end; color:#fff; padding:calc(var(--header-h) + 60px) 0 42px; overflow:hidden}
.tHero .hero-bg::after{background:linear-gradient(to top, rgba(6,20,22,.92) 0%, rgba(6,20,22,.45) 55%, rgba(6,20,22,.35) 100%)}
.tHero .wrap{position:relative; z-index:1}
.tHero .back{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:rgba(255,255,255,.85); margin-bottom:18px}
.tHero .back:hover{color:#fff}
.tHero h1{font-size:clamp(1.9rem,4vw,3rem); max-width:18ch}
.tHero .tmeta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}

/* Tabs */
.tabs{position:sticky; top:var(--header-h); z-index:30; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2)}
.tabs .wrap{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs a{padding:16px 14px; font-size:14.5px; font-weight:600; color:var(--muted); white-space:nowrap; border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a.active{color:var(--teal); border-color:var(--gold)}

.tGrid{display:grid; grid-template-columns:1fr 380px; gap:44px; align-items:start; padding:44px 0 72px}
.tBlock{margin-bottom:44px; scroll-margin-top:130px}
.tBlock h2{font-size:1.55rem; margin-bottom:16px}
.tBlock p + p{margin-top:12px}
.tBlock .lead{max-width:none}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{padding:7px 13px; border-radius:var(--r-pill); background:rgba(34,73,78,.07); color:var(--teal); font-size:13.5px; font-weight:600}

.hl{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; list-style:none; padding:0; margin:0}
.hl li{display:flex; gap:10px; align-items:flex-start; font-size:15px}
.hl li::before{content:"✦"; color:var(--gold); font-size:14px; line-height:1.5}

.days{display:grid; gap:10px}
.day{border:1px solid var(--line-2); border-radius:var(--r); background:#fff; overflow:hidden}
.day summary{list-style:none; cursor:pointer; display:flex; gap:14px; align-items:center; padding:16px 18px}
.day summary::-webkit-details-marker{display:none}
.day .dn{flex:none; width:52px; height:52px; border-radius:12px; background:var(--sand); display:grid; place-items:center; text-align:center; line-height:1.05}
.day .dn b{display:block; font-size:16px; font-weight:800}
.day .dn i{font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
.day .dt{font-weight:700; font-size:15.5px}
.day .chev{margin-left:auto; color:var(--teal-l); transition:transform .2s}
.day[open] .chev{transform:rotate(180deg)}
.day .dbody{padding:0 18px 18px 84px; color:var(--muted); font-size:15px}
.day .dinc{display:inline-block; margin-top:10px; font-size:13px; color:var(--teal); background:rgba(34,73,78,.07); padding:6px 11px; border-radius:var(--r-pill); font-weight:600}

.two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.inc{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:22px}
.inc h3{margin-bottom:12px; font-size:1.05rem}
.inc ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14.5px; color:#33474A}
.inc li{display:flex; gap:9px; align-items:flex-start}
.inc.yes li::before{content:"✓"; color:#1E8E4A; font-weight:800; flex:none}
.inc.no li::before{content:"×"; color:#C0392B; font-weight:800; flex:none; font-size:16px; line-height:1.3}

.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.gal img{width:100%; height:100%; object-fit:cover; border-radius:var(--r); aspect-ratio:4/3}

/* Sidebar reserva */
.tGrid aside{position:sticky; top:calc(var(--header-h) + 74px); align-self:start; max-height:calc(100vh - 160px); overflow-y:auto; scrollbar-width:thin}
.book{scroll-margin-top:150px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden}
.book-head{padding:18px 22px; border-bottom:1px solid var(--line-2); background:linear-gradient(160deg,#fff,#F6F4F0)}
.book-price{display:flex; align-items:baseline; gap:10px}
.book-price .price{font-size:2.1rem}
.book-note{font-size:13px; color:var(--muted-2); margin-top:6px}
.price-note{font-size:11.5px; color:var(--muted-2); margin-top:2px}
.book-body{padding:16px 22px 20px}
.book-list{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:9px; font-size:14px; color:#33474A}
.book-list li{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--line-2); padding-bottom:8px}
.book-list li span:last-child{font-weight:600; text-align:right}
.book .field{margin-bottom:10px}
.book-foot{font-size:12px; color:var(--muted-2); text-align:center; margin-top:12px}

.tBar{position:fixed; left:0; right:0; bottom:0; z-index:66; display:none; align-items:center; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line); box-shadow:0 -6px 24px -12px rgba(14,37,41,.25)}
.tBar .price{font-size:1.25rem}
.tBar .btn{margin-left:auto; min-height:46px}

@media (max-width:1080px){
  .trip{grid-template-columns:230px 1fr 200px}
  .coords{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .tGrid{grid-template-columns:1fr; gap:0; padding-bottom:96px}
  .tGrid aside{position:static; max-height:none; overflow:visible}
  .book{margin-bottom:40px}
  .tBar{display:flex}
  .hsearch{grid-template-columns:1fr}
}
@media (max-width:820px){
  .trip{grid-template-columns:1fr}
  .trip-img{min-height:190px; aspect-ratio:16/9}
  .trip-cta{border-left:0; border-top:1px solid var(--line-2); flex-direction:row; align-items:center; justify-content:space-between; text-align:left; flex-wrap:wrap}
  .trip-cta .btn{flex:1 1 160px}
  .trip-price{align-items:flex-start}
  .filters{position:static}
  .hl,.two{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .trip-meta{grid-template-columns:1fr}
}

/* El formulario vive dentro del hero: forzamos la escala clara */
.hero .form-card .lead,
.hero .form-card p,
.book .lead{color:var(--muted)}
.hero .form-card h3,.hero .form-card .flabel,.hero .form-card label{color:var(--ink)}

/* Atajos de salida en el hero de grupo */
.quick{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:780px}
.qs{display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px); color:#fff; transition:.18s; min-height:44px}
.qs:hover{background:rgba(255,255,255,.22); transform:translateY(-2px)}
.qs b{font-size:16px; font-weight:700; letter-spacing:-.01em}
.qs i{font-style:normal; font-size:12.5px; color:rgba(255,255,255,.8)}
.qs em{font-style:normal; font-size:13px; font-weight:700; color:var(--gold)}

@media (max-width:820px){
  .quick{grid-template-columns:1fr 1fr}
  .hero .trust-inline{gap:7px; margin-top:18px}
  .hero .chip-glass{padding:7px 11px; font-size:12.5px}
  .hero .lead{font-size:15px}
  .hero{min-height:0 !important; padding-bottom:38px}
  .hero h1{font-size:clamp(1.9rem,7.4vw,2.4rem)}
}

/* Salidas agotadas */
.pill-gris{background:rgba(14,37,41,.08); color:var(--muted)}
.trip-agotado .trip-img img{filter:grayscale(.75) brightness(.86)}
.trip-agotado .trip-body h3 a{color:var(--muted)}
.trip-agotado .price{color:var(--muted)}
.trip-sold{position:absolute; inset:auto 0 0 0; background:rgba(14,37,41,.86); color:#fff; text-align:center;
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:8px 6px}
.is-agotado .tHero .hero-bg img{filter:grayscale(.5)}
.filtro-switch{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; min-height:44px; cursor:pointer; white-space:nowrap}
.filtro-switch input{width:18px; height:18px; accent-color:var(--teal)}
.tHero .pill-gris{background:rgba(255,255,255,.24); color:#fff}
