/* ==========================================================================
   EFECTOS — profundidad 3D, luz y movimiento.
   Todo con CSS y JavaScript nativos: cero librerías, cero peticiones externas.
   Que la web cargue en menos de un segundo también es parte del argumento.
   ========================================================================== */

/* --- 1. Grano de película ---------------------------------------------- */
/* Una capa de ruido muy sutil por encima de todo: rompe los degradados
   planos y le da textura de material, no de pantalla. */
.grano {
  position: fixed;
  inset: -50%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  background-image: 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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: granear 0.7s steps(3) infinite;
}
@keyframes granear {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* --- 2. Barra de progreso de lectura ------------------------------------ */
.progreso {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--rojo-oscuro), var(--rojo-claro), #fff);
  box-shadow: 0 0 12px var(--rojo-sombra);
  transition: width 0.1s linear;
}

/* --- 3. Orbes de luz ---------------------------------------------------- */
/* Manchas de luz que flotan muy despacio detrás del contenido. */
/* Van en position:fixed a propósito: así nunca ensanchan el documento ni
   provocan scroll lateral, y no hace falta recortar nada por encima
   (recortar rompería el sticky del panel de compra). */
.orbe {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.orbe--rojo   { background: rgba(225, 6, 0, 0.28); }
.orbe--plata  { background: rgba(160, 170, 190, 0.14); }
.orbe--a { width: 420px; height: 420px; top: -60px;  right: -80px; animation: flotar 17s ease-in-out infinite; }
.orbe--b { width: 340px; height: 340px; bottom: -90px; left: -60px; animation: flotar 21s ease-in-out infinite reverse; }

@keyframes flotar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(38px, -26px) scale(1.07); }
  66%      { transform: translate(-24px, 30px) scale(0.95); }
}

/* --- 4. Escena tridimensional del hero ---------------------------------- */
.escena {
  position: relative;
  perspective: 1400px;
  perspective-origin: 55% 45%;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.escena__mundo {
  position: relative;
  width: 100%;
  max-width: 540px;
  transform-style: preserve-3d;
  /* Las variables las mueve el JavaScript según el ratón */
  transform:
    rotateX(var(--rx, 4deg))
    rotateY(var(--ry, -13deg))
    rotateZ(var(--rz, 0deg));
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.escena__mundo.siguiendo { transition: transform 0.18s ease-out; }

/* Cada capa vive a una profundidad distinta: eso es lo que crea el 3D real,
   no un simple degradado que lo simule. */
.capa {
  transform-style: preserve-3d;
  will-change: transform;
}

.capa--principal {
  position: relative;
  transform: translateZ(0px);
  border: 1px solid var(--borde-claro);
  border-radius: 18px;
  background: var(--superficie);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  animation: respirar 7s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { transform: translateZ(0) translateY(0); }
  50%      { transform: translateZ(0) translateY(-10px); }
}

/* Tarjetas flotantes que salen del plano principal */
.capa--flotante {
  position: absolute;
  padding: 13px 16px;
  border-radius: 13px;
  border: 1px solid var(--borde-claro);
  background: rgba(22, 22, 27, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.6);
  font-size: 0.8rem;
  white-space: nowrap;
}
.capa--flotante b { display: block; font-size: 1.02rem; letter-spacing: -0.01em; }
.capa--flotante span { color: var(--texto-tenue); font-size: 0.72rem; }

.capa--precio {
  top: 8%; left: -13%;
  transform: translateZ(88px);
  animation: flotarCapa 6s ease-in-out infinite;
}
.capa--velocidad {
  bottom: 16%; right: -15%;
  transform: translateZ(120px);
  animation: flotarCapa 7.5s ease-in-out infinite 0.8s;
}
.capa--movil {
  bottom: -9%; left: 4%;
  transform: translateZ(56px);
  animation: flotarCapa 8.5s ease-in-out infinite 1.6s;
}

@keyframes flotarCapa {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -13px; }
}

.punto-vivo {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 7px;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: latir 2s ease-out infinite;
}
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Rejilla en fuga bajo la escena: refuerza la sensación de profundidad */
.suelo {
  position: absolute;
  left: 50%; bottom: -40px;
  width: 190%;
  height: 320px;
  transform: translateX(-50%) rotateX(76deg) translateZ(-120px);
  background-image:
    linear-gradient(rgba(225, 6, 0, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225, 6, 0, 0.22) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 55% 70% at 50% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 50% 0%, #000, transparent 72%);
  pointer-events: none;
  z-index: -1;
  animation: correrSuelo 3.6s linear infinite;
}
@keyframes correrSuelo {
  from { background-position: 0 0; }
  to   { background-position: 0 46px; }
}

/* --- 5. Inclinación 3D de las tarjetas ---------------------------------- */
.tilt {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tilt.activo { transition: transform 0.1s linear; }
.tilt > * { transform: translateZ(0.01px); }

/* Una tarjeta que además entra con scroll necesita transicionar la opacidad:
   si no, la regla de .tilt se come la transición de .aparece y la tarjeta
   aparece de golpe en lugar de fundirse. */
.aparece.tilt { transition: opacity 0.6s ease, transform 0.6s ease; }

/* El brillo que recorre la tarjeta al pasar el ratón */
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.09),
    transparent 42%
  );
}
.tilt:hover::after { opacity: 1; }

/* --- 6. Foco que sigue al cursor en bloques grandes --------------------- */
.foco { position: relative; overflow: hidden; }
.foco::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 50%),
    rgba(225, 6, 0, 0.14),
    transparent 45%
  );
}
.foco:hover::before { opacity: 1; }

/* --- 7. Borde con luz giratoria ---------------------------------------- */
/* Se usa en el plan destacado y en la llamada final. */
.borde-vivo { position: relative; isolation: isolate; }
.borde-vivo::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--angulo, 0deg),
    transparent 0%,
    var(--rojo) 12%,
    #ffffff 20%,
    var(--rojo) 28%,
    transparent 45%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: girarBorde 5s linear infinite;
}
@property --angulo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes girarBorde {
  to { --angulo: 360deg; }
}

/* --- 8. Brillo metálico que recorre los títulos ------------------------- */
.brillo {
  background: linear-gradient(
    100deg,
    #8d919b 0%, #ffffff 42%, #ffffff 48%, #8d919b 62%, #8d919b 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: recorrerBrillo 6.5s ease-in-out infinite;
}
@keyframes recorrerBrillo {
  0%, 100% { background-position: 130% 0; }
  50%      { background-position: -30% 0; }
}

/* --- 9. Botón magnético + destello ------------------------------------- */
.magnetico { will-change: transform; }

.btn--rojo { position: relative; overflow: hidden; }
.btn--rojo::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-22deg);
  transition: left 0.6s ease;
}
.btn--rojo:hover::before { left: 130%; }

/* --- 10. Texto que se revela palabra a palabra ------------------------- */
/* El recorte es lo que hace que las palabras suban "desde debajo del suelo".
   El padding compensa las letras con rabo (p, g, j) para que no se corten. */
.revelar {
  overflow: hidden;
  padding-block: 0.08em 0.16em;
  margin-bottom: calc(0.5em - 0.16em);
}
.revelar > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(90%) rotate(4deg);
  animation: subirPalabra 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes subirPalabra {
  to { opacity: 1; transform: none; }
}

/* --- 11. Contador animado ---------------------------------------------- */
.dato__cifra { font-variant-numeric: tabular-nums; }

/* --- 12. Cinta de logos en movimiento ---------------------------------- */
.cinta {
  overflow: hidden;
  border-block: 1px solid var(--borde);
  padding: 18px 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cinta__pista {
  display: flex;
  gap: 52px;
  width: max-content;
  animation: desplazar 32s linear infinite;
}
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto-tenue);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cinta__item svg { width: 17px; height: 17px; fill: var(--rojo); flex-shrink: 0; }
@keyframes desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 13. Números de sección grandes ------------------------------------ */
.paso { counter-increment: paso; }
.paso::before {
  content: "0" counter(paso);
  position: absolute;
  top: -18px; right: 6px;
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  user-select: none;
}
.rejilla--pasos { counter-reset: paso; }

/* --- 14. Respeto por quien prefiere no ver animaciones ----------------- */
@media (prefers-reduced-motion: reduce) {
  .grano, .orbe, .suelo, .cinta__pista, .brillo,
  .capa--principal, .capa--flotante, .punto-vivo, .borde-vivo::before {
    animation: none !important;
  }
  .revelar > span { opacity: 1; transform: none; animation: none; }
  .escena__mundo { transform: none; }
  .grano { display: none; }
}

/* --- 15. Ajustes en pantallas pequeñas --------------------------------- */
@media (max-width: 860px) {
  .escena { min-height: 380px; perspective: 1000px; }
  .escena__mundo { transform: rotateX(2deg) rotateY(-5deg); max-width: 100%; }
  .capa--precio { left: -4%; top: 4%; }
  .capa--velocidad { right: -4%; }
  .capa--movil { display: none; }
  .suelo { display: none; }
  .paso::before { font-size: 3.2rem; }
}

@media (max-width: 620px) {
  .capa--flotante { font-size: 0.72rem; padding: 10px 12px; }
  .capa--flotante b { font-size: 0.9rem; }
}