/* styles.css — componentes y pantallas de la landing de reservas */
.wrap{width:100%;max-width:var(--app-max);margin:0 auto;padding:0 20px}
.wrap--wide{max-width:var(--wide-max)}

/* ---------- topbar ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(15,15,15,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea-osc)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:var(--wide-max)}
.top__logo{height:34px;width:auto}
.top__acciones{display:flex;align-items:center;gap:10px}
.top__ig{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--oro);border:1px solid var(--linea-osc)}
.top__ig svg{width:18px;height:18px}
.btn{appearance:none;border:0;cursor:pointer;border-radius:6px;padding:12px 18px;font-family:var(--f-marca);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,transform .15s;text-decoration:none;min-height:46px}
.btn--oro{background:var(--oro);color:var(--negro)} .btn--oro:hover{background:var(--oro-claro)}
.btn--carbon{background:var(--carbon);color:var(--marfil)} .btn--carbon:hover{background:var(--negro)}
.btn--linea{background:transparent;color:var(--carbon);border:1px solid var(--carbon)}
.oscuro .btn--linea{color:var(--marfil);border-color:var(--humo)}
.btn--bloque{width:100%}
.btn--chico{padding:8px 12px;font-size:11px;min-height:36px}
.btn:disabled{opacity:.5;cursor:default}
.btn--wa{background:#1F8A57;color:#fff} .btn--wa:hover{background:#176F45}
.btn svg{width:18px;height:18px}

/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 90% at 50% 0%,#2A2A2A 0%,#171717 55%,#0F0F0F 100%);color:var(--marfil);padding:38px 0 46px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--oro),transparent);opacity:.7}
.hero__sello{width:110px;height:110px;margin:0 auto 18px;filter:drop-shadow(0 0 30px rgba(201,162,76,.25))}
.hero h1{font-size:26px;text-align:center;color:var(--marfil);font-weight:600}
.hero .bajada{text-align:center;color:#C9C4B8;margin:12px auto 0;max-width:40ch;font-size:16px}
.hero .eyebrow{text-align:center;display:block;margin-bottom:12px}
.confianza{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:22px;color:#C9C4B8;font-size:12.5px}
.confianza span{display:inline-flex;align-items:center;gap:6px}
.confianza svg{width:14px;height:14px;color:var(--oro)}

/* ---------- buscador ---------- */
.buscador{background:var(--blanco);color:var(--carbon);border-radius:var(--radio);padding:22px 20px 20px;box-shadow:var(--sombra-osc);margin:28px auto 0;max-width:var(--app-max);position:relative}
.buscador::before{content:"";position:absolute;left:20px;right:20px;top:0;height:3px;background:var(--oro);border-radius:0 0 3px 3px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label{font-family:var(--f-marca);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-profundo);font-weight:600}
.campo input,.campo select,.campo textarea{width:100%;border:1px solid var(--linea);border-radius:6px;padding:12px 12px;background:#fff;font-size:16px;min-height:48px;color:var(--carbon)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oro);outline:2px solid rgba(201,162,76,.25);outline-offset:0}
.campo textarea{min-height:92px;resize:vertical}
.campo .ayuda{font-size:12.5px;color:var(--grafito)}
.campo--error input,.campo--error select{border-color:var(--danger)}
.fila2{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.error{color:var(--danger);font-size:13.5px;margin:-4px 0 12px;display:flex;gap:8px;align-items:flex-start}
.error:empty{display:none}
.chips-destinos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{appearance:none;background:transparent;border:1px solid var(--linea);border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer;color:var(--carbon)}
.chip:hover,.chip[aria-pressed="true"]{border-color:var(--oro);color:var(--oro-profundo)}

/* ---------- secciones ---------- */
.sec{padding:52px 0}
.sec--oscura{background:var(--carbon);color:var(--marfil)}
.sec__head{margin-bottom:26px}
.sec__head h2{font-size:18px;margin:10px 0 12px}
.sec__head p{color:var(--grafito);max-width:56ch}
.sec--oscura .sec__head p{color:#C9C4B8}
.pasos{display:grid;gap:14px}
.paso{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:18px}
.paso__n{width:44px;height:44px;border-radius:50%;border:1px solid var(--oro);display:grid;place-items:center;font-family:var(--f-marca);font-weight:700;color:var(--oro-profundo);font-size:16px}
.paso h3{font-size:13px;margin-bottom:4px}
.paso p{color:var(--grafito);font-size:14.5px}
.destinos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.destino{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,transform .15s}
.destino:hover{border-color:var(--oro);transform:translateY(-1px)}
.destino b{font-family:var(--f-marca);font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.destino span{font-size:13px;color:var(--grafito)}
.destino i{font-style:normal;font-size:12px;color:var(--oro-profundo);font-family:var(--f-marca);letter-spacing:.1em;text-transform:uppercase}
.valores{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.valor{border:1px solid var(--linea-osc);border-radius:var(--radio);padding:18px 16px}
.valor h3{font-size:13px;color:var(--oro);margin-bottom:6px}
.valor p{font-size:14px;color:#C9C4B8}
.red{display:grid;gap:10px}
.red__item{display:flex;justify-content:space-between;align-items:center;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;font-size:14.5px}
.red__item b{font-weight:600}
.red__item span{color:var(--grafito);font-size:13px}
.faq{display:grid;gap:8px}
.faq details{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:0 16px}
.faq summary{cursor:pointer;list-style:none;padding:15px 0;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-marca);color:var(--oro-profundo);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 16px;color:var(--grafito);font-size:14.5px}
.ig{display:flex;align-items:center;gap:16px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:18px}
.ig__icono{width:46px;height:46px;border-radius:12px;background:var(--carbon);display:grid;place-items:center;color:var(--oro);flex-shrink:0}
.ig__icono svg{width:22px;height:22px}
.ig b{display:block;font-family:var(--f-marca);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ig span{font-size:13.5px;color:var(--grafito)}

/* ---------- pie ---------- */
.pie{background:var(--negro);color:#C9C4B8;padding:40px 0 28px;font-size:13px}
.pie__logo{width:150px;margin-bottom:16px}
.pie p{max-width:60ch}
.pie__links{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 22px}
.pie__links a{color:var(--oro);text-decoration:none;font-family:var(--f-marca);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.pie small{display:block;color:var(--humo);font-size:12px;border-top:1px solid var(--linea-osc);padding-top:14px}

/* ---------- flujo (resultados / formulario / gracias) ---------- */
.flujo{min-height:70vh;padding:22px 20px 60px}
.resumen{background:var(--carbon);color:var(--marfil);border-radius:var(--radio);padding:16px 18px;display:grid;gap:8px;margin-bottom:18px;box-shadow:var(--sombra)}
.resumen__fila{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.resumen__fila b{font-family:var(--f-marca);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.resumen__fila span{font-size:14px;color:#C9C4B8;text-align:right}
.resumen a{color:var(--oro);font-family:var(--f-marca);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.titulo-flujo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 14px}
.titulo-flujo h2{font-size:15px}
.titulo-flujo span{font-size:13px;color:var(--grafito)}
.cats{display:grid;gap:14px}
.cat{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:18px;display:grid;gap:12px;box-shadow:0 6px 18px rgba(20,14,0,.05);position:relative;overflow:hidden}
.cat--agotada{opacity:.85}
.cat__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cat__head .eyebrow{margin-bottom:4px}
.cat h3{font-size:16px}
.cat__ejemplo{font-size:13.5px;color:var(--grafito);margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0}
.pill--ok{background:rgba(79,138,91,.12);color:#2F6B3B}
.pill--ultima{background:rgba(184,134,43,.14);color:#7C5A12}
.pill--no{background:rgba(90,90,90,.1);color:var(--grafito)}
.pill svg{width:12px;height:12px}
.cat__specs{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--grafito)}
.cat__specs span{display:inline-flex;align-items:center;gap:6px}
.cat__specs svg{width:16px;height:16px;color:var(--oro-profundo)}
.cat__precio{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-top:1px solid var(--linea);padding-top:12px}
.precio{font-family:var(--f-marca);font-weight:700;font-size:22px;color:var(--carbon);line-height:1}
.precio small{font-family:var(--f-texto);font-weight:400;font-size:12.5px;color:var(--grafito);letter-spacing:0;text-transform:none;margin-left:4px}
.total{text-align:right;font-size:13px;color:var(--grafito)}
.total b{display:block;font-family:var(--f-marca);font-size:15px;color:var(--oro-profundo);letter-spacing:.04em}
.cat__incluye{font-size:12.5px;color:var(--grafito);display:flex;flex-wrap:wrap;gap:6px 14px}
.cat__incluye span::before{content:"◆";color:var(--oro);font-size:8px;margin-right:6px;vertical-align:middle}
.nota{font-size:12.5px;color:var(--grafito);margin-top:16px;line-height:1.5}
.vacio{background:var(--blanco);border:1px dashed var(--linea);border-radius:var(--radio);padding:26px 18px;text-align:center;color:var(--grafito)}
.form{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 18px;box-shadow:var(--sombra)}
.form h2{font-size:15px;margin-bottom:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--grafito);margin:4px 0 16px}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--oro-profundo);flex-shrink:0}
.detalle{display:grid;gap:6px;font-size:13.5px;color:var(--grafito);border-top:1px solid var(--linea);padding-top:12px;margin-top:4px}
.detalle div{display:flex;justify-content:space-between;gap:10px}
.detalle b{color:var(--carbon);font-weight:500}
.detalle .tot{font-family:var(--f-marca);font-weight:700;color:var(--oro-profundo);font-size:16px}
.gracias{text-align:center;padding:10px 0}
.gracias__sello{width:96px;height:96px;margin:0 auto 18px}
.gracias h2{font-size:18px;margin-bottom:8px}
.gracias .num{font-family:var(--f-mono);font-size:22px;color:var(--oro-profundo);letter-spacing:.08em;margin:6px 0 14px}
.gracias p{color:var(--grafito);max-width:40ch;margin:0 auto 18px}
.gracias .acciones{display:grid;gap:10px;margin-top:18px}
.cargando{display:flex;justify-content:center;padding:40px 0;color:var(--grafito);font-size:14px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--carbon);color:var(--marfil);padding:12px 18px;border-radius:8px;font-size:14px;box-shadow:var(--sombra-osc);z-index:50;max-width:calc(100% - 40px);text-align:center}
.volver svg{width:16px;height:16px;flex-shrink:0}
.volver{display:inline-flex;align-items:center;gap:8px;color:var(--oro-profundo);text-decoration:none;font-family:var(--f-marca);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}

@media (min-width:720px){
  .hero{padding:56px 0 64px}
  .hero h1{font-size:34px}
  .hero__sello{width:130px;height:130px}
  .buscador{padding:28px 28px 24px}
  .fila2{grid-template-columns:1.6fr 1fr}
  .pasos{grid-template-columns:repeat(3,1fr)}
  .destinos{grid-template-columns:repeat(3,1fr)}
  .valores{grid-template-columns:repeat(4,1fr)}
  .sec__head h2{font-size:22px}
  .flujo .wrap{max-width:var(--app-max)}
}
@media print{.top,.pie{display:none}}