/* ============================================================
   GLASS+  ·  iOS / Liquid Glass premium para cajas y animaciones
   ============================================================ */

/* ---- Cajas de vidrio (tarjetas, automatizaciones, planes, CTA) ---- */
.card,.auto,.plan,.cta-box{
  position:relative; overflow:hidden;
  border-radius:28px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)), var(--glass-bg);
  -webkit-backdrop-filter:blur(30px) saturate(185%); backdrop-filter:blur(30px) saturate(185%);
  border:1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 30px 70px -30px rgba(0,0,0,.72);
  transition:transform .6s cubic-bezier(.22,1,.36,1),
             box-shadow .6s cubic-bezier(.22,1,.36,1),
             border-color .5s ease;
}
.auto{border-radius:22px}

/* Barrido de luz (sheen) al pasar el mouse — sello liquid glass */
.card::before,.auto::before,.plan::before{
  content:"";position:absolute;top:0;left:-45%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.12) 85%,transparent);
  transform:skewX(-14deg);pointer-events:none;
  transition:none}   /* al salir: reset instantáneo (sin rayo de vuelta) */
.card:hover::before,.auto:hover::before,.plan:hover::before{
  left:150%;transition:left 2s cubic-bezier(.25,1,.4,1)}   /* aparece al instante al tocar; lento y elegante */

/* Hover con física suave + glow de marca */
.card:hover,.auto:hover,.plan:hover{
  transform:translateY(-9px) scale(1.012);
  border-color:color-mix(in srgb,var(--lime) 45%,var(--glass-brd));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 48px 96px -34px rgba(118,49,253,.55);
}
/* Iconos con lente de vidrio */
.card .ic,.auto .ic,.bento .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 20px -10px rgba(0,0,0,.5)}

/* ---- Navbar y teléfono más vidrio + más profundidad ---- */
.nav{
  -webkit-backdrop-filter:blur(34px) saturate(190%);backdrop-filter:blur(34px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 26px 64px -26px rgba(0,0,0,.72)}
.phone{animation:phoneFloat 7s ease-in-out infinite}
.phone::after{content:"";position:absolute;inset:0;border-radius:40px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 40px rgba(255,255,255,.04)}
@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- Eyebrow / chip como vidrio ---- */
.eyebrow{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),var(--chip-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* ---- Botones: brillo + press iOS ---- */
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 34px -12px rgba(198,255,61,.55)}
.btn-ghost{-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn:active{transform:scale(.96)}

/* ---- Value banner premium ---- */
.value-in{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 50px 100px -40px rgba(118,49,253,.7)}

/* ---- Reveal premium con desenfoque ---- */
.reveal{opacity:0;transform:translateY(28px);filter:blur(10px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),
             transform .85s cubic-bezier(.22,1,.36,1),
             filter .85s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none;filter:none}

/* ---- Selector de fondo (pill) más vidrio ---- */
.ver-switch{-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 20px 50px -18px rgba(0,0,0,.7)}

@media (prefers-reduced-motion:reduce){
  .phone{animation:none}
  .reveal{filter:none}
  .card::before,.auto::before,.plan::before{display:none}
}