/* IMPOLAPTOPS · vidrio líquido y animaciones (en prueba: el dueño decide si se quedan)
   Vidrio: fondo translúcido + desenfoque + realce de borde arriba + sombra interna abajo + reflejo diagonal.
   Movimiento: transform/opacity/clip-path, curvas fuertes de salida; con "reducir movimiento" casi todo queda quieto. */

/* ---------- Vidrio líquido ---------- */
:root {
  --vidrio-fondo: rgba(255, 255, 255, .58);
  --vidrio-borde: rgba(255, 255, 255, .75);
  --vidrio-sombra: 0 10px 30px -12px rgba(11, 31, 42, .28);
}
:root[data-tema="oscuro"] {
  --vidrio-fondo: rgba(28, 48, 58, .5);
  --vidrio-borde: rgba(255, 255, 255, .14);
  --vidrio-sombra: 0 12px 34px -12px rgba(0, 0, 0, .7);
}
.nav-capsula,
.escena-precio,
.portada-tienda,
.flotante,
.buscar-fila,
.carrusel-flechas .icono-boton,
.galeria-flecha,
.aviso,
.confianza-franja {
  background: var(--vidrio-fondo) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 var(--vidrio-borde),
    inset 0 0 0 1px color-mix(in srgb, var(--vidrio-borde) 45%, transparent),
    inset 0 -10px 18px -14px rgba(11, 31, 42, .25),
    var(--vidrio-sombra) !important;
  isolation: isolate;
}
/* el reflejo necesita un padre posicionado; las piezas flotantes ya son absolutas */
.nav-capsula, .buscar-fila, .confianza-franja { position: relative; }
/* reflejo diagonal, como luz sobre vidrio */
.nav-capsula::after,
.escena-precio::after,
.portada-tienda::after,
.flotante::after,
.confianza-franja::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .22) 100%);
  opacity: .55;
}
[data-tema="oscuro"] .nav-capsula::after,
[data-tema="oscuro"] .escena-precio::after,
[data-tema="oscuro"] .portada-tienda::after,
[data-tema="oscuro"] .flotante::after,
[data-tema="oscuro"] .confianza-franja::after { opacity: .14; }
.carrusel-flechas .icono-boton { color: #fff; --vidrio-fondo: rgba(255, 255, 255, .16); --vidrio-borde: rgba(255, 255, 255, .45); }
.aviso { color: var(--texto); }
.aviso button { color: var(--turquesa-fuerte); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-capsula, .escena-precio, .portada-tienda, .flotante, .buscar-fila, .aviso, .confianza-franja { background: var(--blanco) !important; }
}

/* ---------- 1. WhatsApp: se llena en línea recta con un verde más oscuro ---------- */
.boton-wa, .tp-seguir { position: relative; overflow: hidden; isolation: isolate; }
.wa-flotante { isolation: isolate; }   /* sigue fijo (position: fixed en estilos.css); sin overflow para que se vea la onda de entrada */
.wa-flotante::before { border-radius: inherit; }
.boton-wa::before, .wa-flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #128c4a;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 160ms ease-out;
}
.boton-wa.cargando::before, .wa-flotante.cargando::before { clip-path: inset(0 0 0 0); transition: clip-path 520ms linear; }
.boton-wa.cargando, .wa-flotante.cargando { color: #fff; }
.boton-wa.cargando .ico, .wa-flotante.cargando .ico { animation: wa-pulso 520ms ease-out; }
@keyframes wa-pulso { 50% { transform: scale(1.18); } }

/* ---------- 2. Agregar: la laptop vuela a la bolsa ---------- */
.vuelo { position: fixed; z-index: 120; pointer-events: none; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(11, 31, 42, .3)); }
.icono-boton.recibe { animation: recibe 360ms var(--ease-out); }
@keyframes recibe { 40% { transform: scale(1.18) rotate(-8deg); } }

/* ---------- 3. Cambio de modo: círculo que se expande desde el botón ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- 4. Aparición al bajar (solo si JS está listo, para que nada quede oculto sin JS) ---------- */
.js-revelar .revelar { opacity: 0; translate: 0 22px; transition: opacity 560ms var(--ease-out), translate 640ms var(--ease-out); transition-delay: var(--retraso, 0ms); }
.js-revelar .revelar.visible { opacity: 1; translate: 0 0; }

/* ---------- 5. Portada: las laptops flotan despacio ---------- */
@keyframes flotar { 50% { translate: 0 -8px; } }
.escena-frente { animation: flotar 6s ease-in-out infinite; }
.escena-atras { animation: flotar 7s ease-in-out -2s infinite; }
.escena-precio { animation: flotar 6s ease-in-out -.6s infinite; }

/* ---------- Detalles: chips, categorías, flechas ---------- */
.categoria .categoria-foto img { transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .categoria:hover .categoria-foto img { transform: scale(1.08) rotate(-2deg); }
  .boton-claro:hover .ico, .enlace:hover .ico { transform: translateX(4px); }
}
.boton-claro .ico { transition: transform 200ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .escena-frente, .escena-atras, .escena-precio { animation: none; }
  .js-revelar .revelar { translate: 0 0; transition: opacity 200ms ease; }
  .boton-wa.cargando::before, .wa-flotante.cargando::before { transition: none; }
  .boton-wa.cargando .ico, .wa-flotante.cargando .ico, .icono-boton.recibe { animation: none; }
}
/* sobre fotos con mucho color, el vidrio va más lechoso para que el texto se lea */
.escena-precio, .flotante { --vidrio-fondo: rgba(255, 255, 255, .78); }
[data-tema="oscuro"] .escena-precio, [data-tema="oscuro"] .flotante { --vidrio-fondo: rgba(19, 34, 41, .78); }

/* ---------- Portada como Roca: fondo desenfocado de color y tarjeta de vidrio encima ---------- */
.portada { position: relative; isolation: isolate; }
.portada-fondo { position: absolute; z-index: -1; top: -150px; left: 50%; width: 100vw; height: calc(100% + 190px); translate: -50% 0; overflow: hidden; pointer-events: none; }
.portada-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(243, 246, 248, 0) 55%, var(--fondo) 96%); }
.portada-fondo img { position: absolute; width: 62vw; max-width: none; filter: blur(70px) saturate(1.4); opacity: .55; }
.portada-fondo img:first-child { right: -6vw; top: 0; }
.portada-fondo img:last-child { left: -12vw; top: 18%; opacity: .35; }
[data-tema="oscuro"] .portada-fondo img { opacity: .35; }
[data-tema="oscuro"] .portada-fondo::after { background: linear-gradient(180deg, rgba(12, 23, 29, 0) 50%, var(--fondo) 96%); }
.portada-tarjeta {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .6), 0 30px 60px -28px rgba(11, 31, 42, .35);
}
.portada-tarjeta::before { background: linear-gradient(105deg, rgba(255, 255, 255, .92) 34%, rgba(255, 255, 255, .55) 52%, rgba(255, 255, 255, 0) 78%) !important; }
[data-tema="oscuro"] .portada-tarjeta { background: rgba(19, 34, 41, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -28px rgba(0, 0, 0, .8); }
[data-tema="oscuro"] .portada-tarjeta::before { background: linear-gradient(105deg, rgba(19, 34, 41, .92) 34%, rgba(19, 34, 41, .5) 52%, rgba(19, 34, 41, 0) 78%) !important; }
.categoria { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
[data-tema="oscuro"] .categoria { background: rgba(19, 34, 41, .7); }
@media (max-width: 920px) {
  .portada-fondo img { width: 120vw; }
  .portada-tarjeta::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .85) 55%) !important; }
  [data-tema="oscuro"] .portada-tarjeta::before { background: linear-gradient(180deg, rgba(19, 34, 41, 0) 30%, rgba(19, 34, 41, .85) 55%) !important; }
}

/* ---------- Luz que sigue el cursor (cierre, cifras, redes) ---------- */
[data-luz] { --mx: 50%; --my: 40%; --luz: 0; position: relative; isolation: isolate; overflow: hidden; }
[data-luz]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(0, 175, 204, .26), transparent 60%);
  opacity: var(--luz); transition: opacity 400ms ease;
}
/* cuadrícula tenue que solo se ve alrededor del cursor */
.cierre::after, .cifras::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask: radial-gradient(380px circle at var(--mx) var(--my), #000, transparent 70%);
          mask: radial-gradient(380px circle at var(--mx) var(--my), #000, transparent 70%);
  opacity: var(--luz); transition: opacity 400ms ease;
}
.redes a[data-luz]::before { background: radial-gradient(240px circle at var(--mx) var(--my), rgba(0, 175, 204, .3), transparent 65%); }
.redes a[data-luz] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.redes a[data-luz]:hover { box-shadow: inset 0 0 0 1px rgba(95, 214, 234, .35); }
/* esferas de luz que flotan en el cierre */
.orbe { position: absolute; z-index: -2; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.orbe-1 { width: 420px; height: 420px; left: 6%; top: 12%; background: rgba(0, 175, 204, .32); animation: orbe 16s ease-in-out infinite; }
.orbe-2 { width: 360px; height: 360px; right: 8%; bottom: -8%; background: rgba(64, 96, 200, .26); animation: orbe 19s ease-in-out -6s infinite reverse; }
@keyframes orbe { 33% { translate: 60px -30px; } 66% { translate: -40px 40px; } }
@media (hover: none) { [data-luz] { --luz: .55; } }
@media (prefers-reduced-motion: reduce) { .orbe { animation: none; } }
html, body { overflow-x: clip; }