/* ============================================================
   Recovery TLV — Home Premium Polish (CH-244)
   Capa aditiva, aprobada por el dueño. Se carga DESPUÉS del
   <style> inline de public/index.html: todo acá SUMA (sombras,
   pseudo-elementos, custom properties nuevas, @keyframes) — nunca
   pisa color de texto ni layout existente. Aislada y reversible:
   basta con quitar el <link> para volver al estado anterior.
   ============================================================ */

:root{
  /* sombras premium multicapa — ambient + key + contacto */
  --depth:0 1px 1px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35),0 24px 48px rgba(0,0,0,.28);
  --depth-hi:0 2px 2px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.42),0 40px 72px rgba(0,0,0,.35);
  /* easing refinado — el detalle que hace que todo se sienta caro */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- transición nativa entre páginas (sitewide, costo 0) ---- */
@view-transition{ navigation:auto }

/* ============ AURA + GRANO DE FONDO (estático, sin JS) ============
   Un solo pseudo-elemento fijo detrás de todo el contenido (z-index:0
   queda por debajo de .sec{z-index:1}, el mismo patrón que ya usa el
   sitio). No toca `background` del body (que define --bg real vía
   shorthand) — solo agrega background-image en una capa aparte. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(60% 40% at 78% 8%, rgba(0,217,255,.08), transparent 60%),
    radial-gradient(50% 40% at 12% 22%, rgba(25,90,254,.08), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat;
}

/* ============ HERO EYEBROW — cápsula de vidrio ============
   Solo sumamos box-shadow (glass highlight + glow) y un fondo
   translúcido nuevo; el color del texto (var(--cyan)) no se toca. */
.heyebrow{
  background:rgba(0,217,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 20px rgba(0,217,255,.10);
}

/* ============ .bdot — halo que respira ============
   Anillo oculto por defecto (opacity:0); solo se activa con motion
   permitido, ver guard más abajo. Requiere position:relative nuevo
   (.bdot no lo tenía) — no cambia tamaño ni posición del punto. */
.bdot{ position:relative }
.bdot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid rgba(245,158,11,.5);
  opacity:0;
  pointer-events:none;
}

/* ============ .bp — shimmer diagonal (solo transform) ============
   overflow:hidden nuevo en un elemento que ya se comporta como bloque
   (flex item dentro de .hcta-primary / .fs-bottom): no altera tamaño. */
.bp{ position:relative; overflow:hidden }
.bp::after{
  content:"";
  position:absolute;
  top:0; left:0; width:60%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-220%) skewX(-18deg);
  pointer-events:none;
}

/* ============ .wt-card / .tstep / .rcard — profundidad + borde-luz ============
   Solo agregamos box-shadow en reposo (ninguna de las tres lo tenía a
   nivel base) y lo reforzamos en :hover reemplazando ÚNICAMENTE la
   propiedad box-shadow (transform/border-color existentes quedan
   intactos, cascada por propiedad, no por regla completa). */
.wt-card,.tstep,.rcard{ box-shadow:var(--depth) }
.wt-card:hover,.tstep:hover,.rcard:hover{ box-shadow:var(--depth-hi) }

/* .wt-card ya tiene overflow:hidden + border-radius → el hairline se
   recorta solo en las esquinas superiores, igual que .tc/.stage del
   preview aprobado. .rcard ya trae su propio marco degradado (::before
   con mask) y .tstep ya trae su barra de color superior (::after) —
   ninguna de las dos necesita un hairline extra encima. */
.wt-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  pointer-events:none;
}

/* ============ Motion — solo si el usuario lo permite ============ */
@media (prefers-reduced-motion:no-preference){
  @keyframes rtlv-breathe-ring{0%{opacity:.7;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.9)}}
  .bdot::after{ opacity:.7; animation:rtlv-breathe-ring 4.5s var(--ease) infinite }

  @keyframes rtlv-breathe-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(0,217,255,.55))}50%{filter:drop-shadow(0 0 6px rgba(0,217,255,.85))}}
  .heyebrow svg{ animation:rtlv-breathe-glow 3.2s var(--ease) infinite }

  .bp::after{ transition:transform .6s var(--ease) }
  .bp:hover::after{ transform:translateX(280%) skewX(-18deg) }

  ::view-transition-old(root),::view-transition-new(root){
    animation-duration:.4s;
    animation-timing-function:var(--ease);
  }
}