/* ==================== MODO HOTEL: AZUL IXTAPA GRAND (spec 34) ====================
   Claro y cálido: arena y turquesa del Pacífico. Sin neón; el único bloque oscuro es la Noche Nación Azul.
   Texto: --ixtapa-ink sobre arena o blanco, --ixtapa-sea-ink para acentos (5:1 sobre arena). --ixtapa-sea y --ixtapa-sun solo decoran */

/* ---------- Héroe: la foto del hotel al atardecer ---------- */
.ht-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;height:clamp(176px,33vh,320px);border-radius:var(--r-card);color:var(--white);
  background:radial-gradient(80% 70% at 70% 30%,rgba(232,161,58,.85),transparent 70%),linear-gradient(180deg,var(--ixtapa-sun) 0%,var(--ixtapa-sea) 70%,var(--ixtapa-sea-ink) 100%);box-shadow:var(--shadow-soft)}
.ht-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.ht-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,6,0) 30%,rgba(20,14,6,.38) 58%,rgba(20,14,6,.78) 100%);pointer-events:none}
.ht-hero-tx{position:relative;z-index:1;width:100%;padding:16px;display:flex;flex-direction:column;gap:2px}
.ht-hero-eb{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ht-hero-h{font-family:var(--tech-wide);font-weight:700;font-size:clamp(1.9rem,8.5vw,2.4rem);line-height:1;letter-spacing:.01em;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.ht-hero-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.ht-hero-fe{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;min-width:0;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ht-hero-fe svg{width:16px;height:16px;flex:none}
.ht-key-btn{flex:none;height:44px;padding:0 16px;border-radius:22px;background:var(--white);color:var(--ixtapa-sea-ink);box-shadow:0 6px 18px rgba(20,14,6,.3)}

/* ---------- Noche Nación Azul: el único bloque oscuro ---------- */
.ht-noche{margin-top:12px;padding:16px;border-radius:var(--r-card);color:var(--white);
  background:radial-gradient(90% 80% at 100% 0%,rgba(25,163,179,.28),transparent 60%),linear-gradient(160deg,var(--navy-g1) 0%,var(--abyss) 100%);box-shadow:var(--shadow-card)}
.ht-noche-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ht-flag-sun{background:var(--ixtapa-sun);color:var(--ixtapa-ink)}
.ht-noche-fe{font-family:var(--tech);font-size:1rem;font-weight:600;letter-spacing:.03em;color:var(--on-dark-2);white-space:nowrap}
.ht-vs{display:flex;align-items:center;gap:12px;margin:12px 0 14px}
.ht-vs img{flex:none;width:44px;height:44px;object-fit:contain}
.ht-vs-tx{flex:1;min-width:0;display:flex;flex-direction:column;text-align:center}
.ht-vs-tx b{font-family:var(--tech);font-size:1.35rem;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.ht-vs-tx small{font-size:.8rem;color:var(--on-dark-2);margin-top:3px}
.ht-btn-sun{background:var(--ixtapa-sun);color:var(--ixtapa-ink)}
.ht-btn-sun:hover{filter:brightness(1.05)}
.ht-mesa-ok{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:8px 14px;border-radius:var(--r-btn);background:var(--glass);border:1px solid var(--glass-line);color:var(--white);font-weight:600;font-size:.9rem;text-align:left}
.ht-mesa-ok svg{flex:none;width:18px;height:18px;color:var(--ixtapa-sun)}

/* ---------- Tarjetas claras ---------- */
.ht-card{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:14px;border-radius:var(--r-tile);background:var(--white);box-shadow:var(--shadow-soft);color:var(--ixtapa-ink);text-align:left}
.ht-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--ixtapa-sand);color:var(--ixtapa-sea-ink)}
.ht-ic svg{width:22px;height:22px}
.ht-ic.sm{width:36px;height:36px;border-radius:10px}
.ht-ic.sm svg{width:18px;height:18px}
.ht-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ht-tx small{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ixtapa-sea-ink)}
.ht-tx b{font-size:.95rem;font-weight:600;line-height:1.3;color:var(--ixtapa-ink)}
.ht-link{align-self:flex-start;min-height:40px;margin:-6px 0 -10px;padding:0;font-size:.82rem;font-weight:700;color:var(--ixtapa-sea-ink);text-align:left;}
.ht-link u{text-underline-offset:3px;white-space:nowrap}
.ht-chev{flex:none;color:var(--ixtapa-sea-ink)}
.ht-chev svg{width:18px;height:18px}
.ht-row{min-height:72px}
.ht-row:active,.ht-exp:active{transform:scale(.99)}
.ht-ok{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;color:var(--ixtapa-sea-ink)}
.ht-ok svg{width:14px;height:14px}

/* Tu familia: Cruz Azulito y Blu */
.ht-fam{align-items:center}
.ht-masc{flex:none;display:flex;align-items:flex-end;width:88px;height:76px}
.ht-masc img{height:76px;width:auto;object-fit:contain}
.ht-masc img+img{margin-left:-26px;height:68px}
.ht-fam .btn{align-self:flex-start;margin-top:6px}
.ht-btn-sea{background:var(--ixtapa-sea-ink);color:var(--white)}
.ht-btn-sea:hover{filter:brightness(1.08)}

.ht-out{margin-top:20px;background:transparent;color:var(--ixtapa-sea-ink);border:1.5px solid var(--ixtapa-sea-ink)}
.ht-out:hover{background:var(--white)}

/* ---------- #reservar ---------- */
.ht-rhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.ht-rhead h1{font-family:var(--tech-wide);font-weight:700;font-size:1.9rem;line-height:1.05;text-transform:uppercase;color:var(--ixtapa-ink)}
.ht-rhab{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;background:var(--white);color:var(--ixtapa-sea-ink);font-size:.82rem;font-weight:700;white-space:nowrap}
.ht-rhab svg{width:15px;height:15px}
.ht-h2{font-family:var(--tech-wide);font-weight:600;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ixtapa-ink);margin:18px 0 10px}
.ht-vacio{padding:14px;border-radius:var(--r-tile);border:1.5px dashed var(--ixtapa-sand-2);color:var(--ixtapa-ink);font-size:.88rem;background:rgba(255,255,255,.5)}
.ht-ag,.ht-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ht-ag-it{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:10px 12px;border-radius:var(--r-tile);background:var(--white);border:1px solid var(--ixtapa-sand-2);text-align:left;color:var(--ixtapa-ink)}
.ht-ag-it .ht-tx small{text-transform:none;letter-spacing:0;font-weight:600;font-size:.8rem}
.ht-ag-ok{flex:none;width:18px;height:18px;color:var(--ixtapa-sea-ink)}
.ht-exp{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px;border-radius:var(--r-tile);background:var(--white);box-shadow:var(--shadow-soft);text-align:left;color:var(--ixtapa-ink)}
.ht-exp .ht-tx small{text-transform:none;letter-spacing:0;font-weight:400;font-size:.8rem;color:var(--muted);line-height:1.3}
.ht-exp .ht-tx b{font-weight:700}
.ht-pr{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;max-width:30%}
.ht-pr b{font-family:var(--num);font-size:1.15rem;font-weight:700;color:var(--ixtapa-ink);font-variant-numeric:tabular-nums}
.ht-pr s{font-size:.76rem;color:var(--muted)}
.ht-pr small{font-size:.72rem;font-weight:700;color:var(--ixtapa-sea-ink)}
.ht-pr .ht-incl{font-family:var(--font);font-size:.82rem;color:var(--ixtapa-sea-ink)}
.ht-pr-pts{font-size:.8rem;font-weight:700;color:var(--ixtapa-sea-ink)}

/* ---------- Hojas del hotel ---------- */
.ht-sh h3{color:var(--ixtapa-ink);text-transform:uppercase}
.ht-eb{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ixtapa-sea-ink);margin-bottom:4px}
.ht-sh-sub{margin-top:6px;font-size:.88rem;color:var(--muted);line-height:1.4}
.ht-lbl{font-size:.85rem;font-weight:700;color:var(--ixtapa-ink);margin-bottom:8px}
.ht-chips{flex-wrap:wrap;overflow:visible}
.ht-sh .chip.on{background:var(--ixtapa-sea-ink);border-color:var(--ixtapa-sea-ink);color:var(--white)}
.ht-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-tile);background:var(--ixtapa-sand)}
.ht-fila b{display:block;color:var(--ixtapa-ink)}
.ht-fila small{display:block;margin-top:2px;font-size:.8rem;color:var(--muted)}
.ht-qty{flex:none;height:44px;background:var(--white);border-color:var(--ixtapa-sand-2)}
.ht-qty button{color:var(--ixtapa-sea-ink)}
.ht-qty button[disabled]{opacity:.35;cursor:not-allowed}
.ht-qty span{min-width:28px;text-align:center;font-family:var(--num);font-size:1.2rem;font-weight:700;color:var(--ixtapa-ink)}
.ht-pagos{display:flex;flex-direction:column;gap:8px}
.ht-pago{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border-radius:var(--r-tile);border:1.5px solid var(--gray-light);background:var(--white);text-align:left;color:var(--ixtapa-ink)}
.ht-pago>svg{flex:none;width:20px;height:20px;color:var(--ixtapa-sea-ink)}
.ht-pago span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ht-pago b{font-size:.92rem}
.ht-pago small{font-size:.8rem;color:var(--muted)}
.ht-pago.on{border-color:var(--ixtapa-sea-ink);box-shadow:inset 0 0 0 1px var(--ixtapa-sea-ink);background:var(--ixtapa-sand)}
.ht-pago[disabled]{opacity:.45;cursor:not-allowed}
.ht-sh-pie{min-height:1.2em;margin-top:6px;text-align:center;font-size:.8rem;color:var(--muted)}
.ht-fechas{display:flex;flex-wrap:wrap;gap:8px}

/* Mi llave */
.ht-llave{text-align:center}
.ht-qr{width:min(220px,62vw);aspect-ratio:1;margin:14px auto 0;padding:10px;border-radius:var(--r-tile);background:var(--white);box-shadow:0 0 0 1px var(--ixtapa-sand-2)}
.ht-qr .qr{display:block;width:100%;height:100%}
.ht-llave-tip{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:700;color:var(--ixtapa-sea-ink)}
.ht-llave-tip svg{width:18px;height:18px}

/* Pantallas bajas: el héroe y la Noche caben juntos */
@media (max-height:620px){
  .ht-hero{height:172px}
  .ht-hero-tx{padding:12px 14px}
  .ht-noche{padding:12px 14px}
  .ht-vs{margin:8px 0 10px}
  .ht-vs img{width:38px;height:38px}
}
@media (max-width:340px){
  .ht-hero-h{font-size:1.7rem}
  .ht-key-btn{padding:0 12px}
  .ht-hero-fe{font-size:.8rem}
  .ht-vs{gap:8px}
  .ht-vs img{width:34px;height:34px}
  .ht-vs-tx b{font-size:1.12rem}
  .ht-vs-tx small{font-size:.74rem}
  .ht-noche-fe{font-size:.9rem}
  .ht-masc{width:70px}
  .ht-masc img{height:62px}.ht-masc img+img{height:56px;margin-left:-22px}
}
@media (prefers-reduced-motion:reduce){
  .ht-row:active,.ht-exp:active{transform:none}
}