/* ══════════════════════════════════════════════════════════════════
   EXPLOTOURS · Liquid Glass layer — v1.0 (2026-07-06) — PREPARADO, NO DESPLEGADO
   Sitio claro, photo-heavy. Paleta real: azure #0192F9 + naranja #F97316
   (vars --exp-primary / --exp-accent ya definidas en exp-home-inline).
   Scope: header sticky (.exp-head), cards de planes (.exp-plan),
   tiles why (.exp-why-item). Glass = frost blanco para que las fotos
   refracten detrás sin sacrificar legibilidad del texto oscuro.
   NO toca: forms, .exp-wa-float, .exp-cta-float, botones .exp-btn*.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --lgx-blur: 28px;
  --lgx-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Header sticky: frost sobre el hero fotográfico al scrollear ── */
.exp-head{
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(var(--lgx-blur)) saturate(180%);
  backdrop-filter: blur(var(--lgx-blur)) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
              0 2px 12px rgba(3,112,182,.06),
              0 10px 32px rgba(0,0,0,.07);
}

/* ── Cards de planes / tours ─────────────────────────────────────── */
.exp-plan{
  background: rgba(255,255,255,.60);
  -webkit-backdrop-filter: blur(var(--lgx-blur)) saturate(180%);
  backdrop-filter: blur(var(--lgx-blur)) saturate(180%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 4px 14px rgba(3,112,182,.08),
              0 18px 44px -18px rgba(8,145,178,.35);
  transition: transform .35s var(--lgx-ease), box-shadow .35s var(--lgx-ease),
              border-color .35s var(--lgx-ease);
}
.exp-plan:hover{
  transform: translateY(-5px);
  border-color: rgba(1,146,249,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 8px 22px rgba(3,112,182,.12),
              0 28px 60px -18px rgba(8,145,178,.45);
}

/* ── Tiles "por qué Explotours" ──────────────────────────────────── */
.exp-why-item{
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  padding: 24px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
              0 4px 14px rgba(3,112,182,.06);
  transition: transform .35s var(--lgx-ease), box-shadow .35s var(--lgx-ease);
}
.exp-why-item:hover{
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
              0 10px 28px rgba(3,112,182,.12);
}

/* ── Móvil: blur reducido (performance) ─────────────────────────── */
@media (max-width: 640px){
  :root{ --lgx-blur: 12px; }
  .exp-why-item{ -webkit-backdrop-filter: blur(10px) saturate(160%);
                 backdrop-filter: blur(10px) saturate(160%); }
  .exp-plan:hover, .exp-why-item:hover{ transform: none; }
}

/* ── Fallback sin backdrop-filter ───────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .exp-head{ background: rgba(255,255,255,.97) !important; }
  .exp-plan, .exp-why-item{ background: rgba(255,255,255,.97); }
}

/* ── Movimiento reducido ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .exp-plan, .exp-why-item{ transition: none; }
  .exp-plan:hover, .exp-why-item:hover{ transform: none; }
}