/* Propuesta A · Costa: portada inmersiva, barra de reserva de vidrio, destinos en mosaico, tours en banda oscura. Se carga después de brand.css. */
:root{--noche:#130a0e;--vino:#6b1f2f}
html{scroll-padding-top:84px}

/* ---------- encabezado: transparente sobre la portada, sólido al bajar ---------- */
body:has(.hero) .site-header{position:fixed;left:0;right:0;top:0;z-index:50;background:transparent;border-bottom-color:transparent;box-shadow:none;transition:background .25s,border-color .25s}
body:has(.hero) .site-header .brand img{filter:brightness(0) invert(1);transition:filter .25s}
body:has(.hero) .site-header nav a,body:has(.hero) .site-header .wa,body:has(.hero) .site-header .lang-btn,body:has(.hero) .site-header .lang-switch span{color:#fff}
body:has(.hero) .site-header .lang-switch{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
body:has(.hero) .site-header .lang-btn.active{background:#fff;color:#8e2c3e}
body:has(.hero) .site-header .reserve{background:#fff;color:#8e2c3e;box-shadow:none}
body.scrolled:has(.hero) .site-header{background:#faf6f3f2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:#efe4e2}
body.scrolled:has(.hero) .site-header .brand img{filter:none}
body.scrolled:has(.hero) .site-header nav a,body.scrolled:has(.hero) .site-header .lang-btn,body.scrolled:has(.hero) .site-header .lang-switch span{color:var(--ink)}
body.scrolled:has(.hero) .site-header .wa{color:var(--success)}
body.scrolled:has(.hero) .site-header .lang-switch{background:#fff;border-color:#e4dcda}
body.scrolled:has(.hero) .site-header .lang-btn.active{background:var(--ink);color:#fff}
body.scrolled:has(.hero) .site-header .reserve{background:var(--brand);color:#fff}

/* ---------- portada ---------- */
.hero{position:relative;min-height:min(100vh,900px);margin:0;padding:150px 64px 56px;display:flex;flex-direction:column;justify-content:flex-end;gap:34px;background:linear-gradient(180deg,rgba(19,10,14,.58) 0%,rgba(19,10,14,.12) 36%,rgba(19,10,14,.82) 100%),url('assets/hero-playa.webp') center/cover no-repeat;color:#fff;border-radius:0}
.hero-copy{margin:0;max-width:900px}
.hero .eyebrow{color:#f3d9de;font-weight:800;letter-spacing:.24em}.hero .eyebrow:before{background:#f3d9de}
.hero h1{color:#fff;font-size:clamp(54px,8.6vw,118px);font-weight:600!important;line-height:.93;letter-spacing:-.015em!important;margin:18px 0 0}
.hero h1 em{color:#f6b8c1}
.hero p{color:#f5ebe8;font-size:clamp(16px,1.5vw,19px);line-height:1.55;max-width:560px;margin:22px 0 0;font-weight:500}

/* barra de reserva de vidrio */
.hero .booking{background:rgba(42,20,24,.55);border:1px solid rgba(255,255,255,.3);border-radius:28px;padding:16px 20px 20px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:none;max-width:1280px;width:100%;margin:0 auto}
.hero .booking-head{display:none}
.hero .booking .tabs{background:transparent;border:0;padding:0;margin:0 0 12px;gap:6px}
.hero .booking .tab{background:transparent;color:#f3d9de;border:0;box-shadow:none;border-radius:999px;font-weight:800;padding:9px 18px;font-size:13px}
.hero .booking .tab.active{background:#fff;color:#8e2c3e}
.hero .promo-banner{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.28);color:#fff!important;border-radius:14px;margin:0 0 12px}
.hero .field label,.hero .compact-booking label{color:#f3d9de}
.hero .field{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3)}
.hero .field input,.hero .field select,.hero .field textarea{background:transparent;color:#fff;color-scheme:dark}
.hero .field input::placeholder,.hero .field textarea::placeholder{color:#e8cfd5}
.hero .field select option{color:#2a1418}
.hero .pill{background:transparent;border:1px solid rgba(255,255,255,.35);color:#f5ebe8}.hero .pill.active{background:#fff;color:#8e2c3e;border-color:#fff}
.hero .primary,.hero .booking-line .primary{background:#fff;color:#8e2c3e;box-shadow:none;border-radius:16px}
.hero .primary:hover{background:#f3e3e5}
.hero .mode-intro b,.hero .mode-intro span,.hero .form-note{color:#f5ebe8}
.hero .return-fields{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}

/* ---------- franja de confianza ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:34px 64px;border-bottom:1px solid #efe4e2;font-size:14px;font-weight:700;background:#faf6f3}
.trust div{display:flex;align-items:center;gap:12px}
.trust svg{width:26px;height:26px;flex:none;stroke:#8e2c3e;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- secciones ---------- */
.section-title h2{font-size:clamp(40px,5.2vw,68px);font-weight:600!important;line-height:1}
.section-title h2 em{color:var(--brand)}
.section{padding-top:100px;padding-bottom:20px}
.why{padding-top:100px}
/* destinos: mosaico */
.dest-grid{grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:300px 300px;gap:16px}
.dest{border-radius:30px;min-height:0!important;height:auto!important;display:flex;align-items:flex-end;padding:24px 26px;background-size:cover!important;background-position:center!important}
.dest b{font-family:var(--font-display);font-size:38px;font-weight:700;color:#fff;letter-spacing:0}
.dest:first-child{grid-row:span 2}.dest:first-child b{font-size:50px}
.dest:last-child{grid-column:span 2}.dest:last-child b{font-size:44px}
/* tours: banda oscura */
.tours-showcase{background:var(--noche);color:#f5ebe8;max-width:none!important;margin:120px 0 0!important;padding:100px max(64px,calc((100% - 1200px)/2)) 110px!important}
.tours-showcase .section-title h2,.tours-showcase h3{color:#f5ebe8}.tours-showcase .section-title p,.tours-showcase .tour-card p{color:#a8929a}
.tours-showcase .eyebrow,.tours-showcase .tour-card span{color:#d9b97f}
.tours-showcase .tour-card{background:transparent!important;border:0!important;box-shadow:none!important}
.tours-showcase .tour-photo{border-radius:28px;height:340px}
.tours-showcase .tour-card button{color:#e58a98}
/* empresas: vino en lugar de negro para no repetir la banda de tours */
.corporate{background:var(--vino)!important;border-radius:0;margin:0}
.corporate h2,.corporate h3{color:#fff}.corporate p,.corporate small{color:#f3d9de}
.corporate .corp-cta{background:#fff;color:#8e2c3e}
/* llamado final */
.cta{border-radius:44px;background:linear-gradient(135deg,#a33548,#6b1f2f)}
.cta h2{font-size:clamp(40px,5vw,68px);font-weight:600!important}

@media(max-width:980px){
  .hero{padding:120px 20px 24px;min-height:auto;max-height:none;gap:24px}
  .hero .booking{border-radius:26px;padding:14px}
  .hero h1{font-size:clamp(50px,15vw,70px)}
  .trust{grid-template-columns:1fr;padding:26px 20px;gap:14px}
  .dest-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .dest{height:200px!important}.dest:first-child,.dest:last-child{grid-row:auto;grid-column:span 2}
  .tours-showcase{padding:64px 20px 70px!important;margin-top:70px!important}
}
@media(min-width:981px){.hero .booking-line{grid-template-columns:1.3fr 1.3fr 1fr .7fr .8fr .8fr 150px;align-items:end}.hero .booking-line .primary{min-height:54px;white-space:nowrap}}

/* ======================= Flujo de reserva (vehículo → pago → confirmación) ======================= */
/* pasos */
#progress{position:sticky;top:78px;z-index:30;display:flex;justify-content:center;gap:0;padding:14px 20px;background:#faf6f3f2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #efe4e2;margin:0}
#progress .step{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:#8a7478;padding:0 18px;position:relative;background:none;border:0}
#progress .step:not(:last-child):after{content:'';position:absolute;right:-14px;top:50%;width:28px;height:1px;background:#e3c7cb}
#progress .step i{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:800;background:#fff;border:1px solid #e3c7cb;color:#8a7478}
#progress .step.active{color:#2a1418}#progress .step.active i{background:#8e2c3e;border-color:#8e2c3e;color:#fff}
#progress .step.done{color:#1f6a44}#progress .step.done i{background:#e6f1ea;border-color:#bfdccb;color:#1f6a44}
/* encabezado de cada paso */
.page-banner{position:relative;min-height:250px;margin:0;display:flex;align-items:flex-end;padding:0 max(64px,calc((100% - 1200px)/2)) 40px;background:linear-gradient(180deg,rgba(19,10,14,.35),rgba(19,10,14,.78)),url('assets/hero-playa.webp') center 60%/cover no-repeat;border-radius:0}
.page-banner .eyebrow{color:#f3d9de!important;font-weight:800;letter-spacing:.22em}
.page-banner h2{color:#fff!important;font-size:clamp(38px,5vw,66px);font-weight:600!important;line-height:1;margin-top:10px}
.page{max-width:1200px;margin:0 auto;padding:60px 64px 100px}
.page>.eyebrow{display:flex;align-items:center;gap:12px;color:#8a6a33;font-weight:800;letter-spacing:.2em}.page>.eyebrow:before{content:'';width:34px;height:1px;background:#b08d57}
.page>h1{font-size:clamp(38px,4.6vw,60px);font-weight:600!important;line-height:1;margin:14px 0 22px}
.summary{display:inline-flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:12px 20px;border-radius:999px;background:#fff;border:1px solid #efe4e2;font-size:14px;font-weight:700;margin:0 0 22px}
.promo-note{padding:14px 18px;border-radius:16px;background:#fbf3e4;border:1px solid #ead7ae;color:#6b4806;font-weight:700;font-size:14px;margin-bottom:18px}
/* vehículos */
.cards{display:grid;gap:16px}
.vehicle{display:grid;grid-template-columns:230px 1fr auto;gap:30px;align-items:center;padding:22px 30px 22px 22px;background:#fff;border:1px solid #efe4e2;border-radius:30px;box-shadow:0 10px 30px #4a14210d;transition:transform .2s,box-shadow .2s}
.vehicle:hover{transform:translateY(-3px);box-shadow:0 22px 48px #4a142118}
.vehicle img{width:230px;height:150px;object-fit:contain;border-radius:22px;background:#f6efec}
.vehicle h2{font-size:38px;font-weight:700!important;margin:0 0 4px}
.vehicle p{margin:5px 0;color:#6f5b60;font-weight:600;font-size:14.5px}
.vehicle .price{text-align:right;display:grid;gap:4px;justify-items:end}
.vehicle .price small{font-size:10px;font-weight:800;letter-spacing:.18em;color:#8a6a33}
.vehicle .price strong{font-family:var(--font-display);font-size:44px;font-weight:700;line-height:1;color:#8e2c3e;font-variant-numeric:lining-nums}
.vehicle .price button{margin-top:10px;min-height:50px;padding:0 28px;border-radius:999px}
.price-strike{text-decoration:line-through;color:#8a7478;font-size:14px}
/* paneles y formularios */
.panel-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:start}
.panel{background:#fff;border:1px solid #efe4e2;border-radius:30px;padding:34px;box-shadow:0 10px 30px #4a14210d}
.panel h2{font-size:30px;font-weight:700!important;margin:0 0 14px}
.panel .field{background:#f6efec;border:1px solid #efe4e2;border-radius:14px;margin:0 0 12px;padding:12px 16px}
.panel .field label{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;color:#8a6a33;margin-bottom:4px}
.panel .field input,.panel .field select,.panel .field textarea{background:transparent;color:#2a1418;font-weight:700;font-size:16px}
.panel .field:focus-within{outline:2px solid #8e2c3e;outline-offset:1px;background:#fff}
.panel .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{display:flex;gap:8px;margin-bottom:16px}.choice button{border:1px solid #e3c7cb;background:#fff;color:#6f5b60;border-radius:999px;padding:10px 20px;font-weight:800}.choice button.on{background:#8e2c3e;border-color:#8e2c3e;color:#fff}
.panel .primary{width:100%;min-height:58px;border-radius:18px;font-size:15px;margin-top:6px}
.secure,.note{color:#6f5b60;font-size:13px;font-weight:600}
.note{margin:14px 0 0;padding:0}
/* tarjeta lateral */
.side{position:sticky;top:150px;padding:28px}
.side-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.side-title h2{margin:0;font-size:28px}
.side .outline{border-radius:999px;border:1px solid #e3c7cb;background:#fff;color:#8e2c3e;font-weight:800;padding:8px 16px}
.side-vehicle{display:flex;gap:14px;align-items:center;padding:14px;border-radius:20px;background:#f6efec;margin-bottom:8px}.side-vehicle img{width:92px;height:62px;object-fit:contain;border-radius:12px;background:#fff}
.side .line{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #efe4e2;font-size:14.5px;font-weight:600}
.side .line.total{border-bottom:0;font-family:var(--font-display);font-size:34px;font-weight:700;color:#8e2c3e;padding-top:18px}
/* pago */
.payment-options{display:grid;gap:12px;margin:8px 0 6px}
.payment-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1.5px solid #e3c7cb;border-radius:22px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.payment-card.selected{border-color:#8e2c3e;background:#fbf3f4}
.payment-card span{flex:1;display:grid;gap:3px}.payment-card b{font-size:15.5px}.payment-card small{color:#6f5b60;font-weight:600;font-size:13px}
.payment-card strong{font-family:var(--font-display);font-size:30px;font-weight:700;color:#8e2c3e;font-variant-numeric:lining-nums}
.terms-line{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;color:#6f5b60;margin-top:16px}
/* confirmación */
.success{max-width:760px;margin:60px auto 100px;padding:48px 44px;background:#fff;border:1px solid #efe4e2;border-radius:36px;box-shadow:0 24px 60px #4a142114;text-align:center}
.success .check{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;background:#e6f1ea;color:#2f7d55;font-size:44px;line-height:84px;border:1.5px solid #bfdccb}
.success h1{font-size:clamp(36px,4.4vw,54px);font-weight:600!important;line-height:1;margin:10px 0}
.success .code{display:inline-block;margin:14px 0;padding:14px 28px;border-radius:20px;border:1.5px dashed #b08d57;font-family:var(--font-display);font-size:40px;font-weight:700;color:#8e2c3e;letter-spacing:.04em}
.success .brand-stamp{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}.success .brand-stamp img{height:52px}
.confirmation-grid span{background:#faf6f3;border:1px solid #efe4e2;border-radius:14px;color:#2a1418}
.success-actions a,.success .primary{border-radius:16px}
@media(max-width:980px){
  #progress{top:68px;padding:10px 8px;overflow-x:auto;justify-content:flex-start}#progress .step{padding:0 12px;font-size:11.5px;white-space:nowrap}#progress .step:not(:last-child):after{display:none}
  .page-banner{min-height:170px;padding:0 20px 26px}.page{padding:34px 18px 80px}
  .panel-grid{grid-template-columns:1fr}.side{position:static}
  .vehicle{grid-template-columns:1fr;gap:14px;padding:18px}.vehicle img{width:100%;height:150px}.vehicle .price{justify-items:stretch;text-align:left}.vehicle .price strong{font-size:38px}
  .panel{padding:22px}.panel .row{grid-template-columns:1fr}
  .success{margin:30px 16px 70px;padding:30px 20px}
}
.side .line,.side .line.total,.payment-card strong,.vehicle .price strong,.success .code,.success h1{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}