/* ============================================================
   Versiones A / B
   html[data-version="a"] → luces y animaciones actuales (video original)
   html[data-version="b"] → glitch + textura metálica integrados
   Todo lo de este archivo que empieza con [data-version="b"] se puede
   borrar para quitar ese efecto puntual.
   ============================================================ */

/* ---------- Selector flotante (para comparar; se apaga en version.js) ---------- */
.tt-version { position: fixed; left: 16px; bottom: 16px; z-index: 100010; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 40px;
  background: rgba(10, 10, 10, .85); border: 1px solid rgba(25, 255, 0, .25); backdrop-filter: blur(10px); font-family: 'Inter', sans-serif; }
.tt-version span { padding: 0 8px 0 10px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-secondary); }
.tt-version a { padding: 7px 12px; border-radius: 30px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: #fff; text-decoration: none; }
.tt-version a[aria-current] { background: var(--color-primary); color: #000; }
.tt-version a:not([aria-current]):hover { color: var(--color-primary); }

/* ---------- Hero: qué fondo se ve en cada versión ---------- */
.hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: none; }
[data-version="a"] .hero-video { display: block; }
[data-version="a"] .hero-bg,
[data-version="a"] .hero-float { display: none; }
/* Overlay original de Elementor en la versión A */
[data-version="a"] .sec-hero::after { background: linear-gradient(141deg, #000 44%, #021a00 100%); opacity: .92; }

/* ============================================================
   VERSIÓN B
   ============================================================ */

/* 1) Objetos cromados + fragmentos de redes flotando en el hero */
.hero-float { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hf { position: absolute; left: var(--x); top: var(--y); width: var(--s, auto); height: var(--s, auto);
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)); transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  animation: hf-in 1.2s cubic-bezier(.16, 1, .3, 1) both; }
.hf > * { animation: hf-float 7s ease-in-out infinite alternate; }
.hf:nth-child(2n) > * { animation-duration: 9s; animation-delay: -3s; }
.hf:nth-child(3n) > * { animation-duration: 11s; animation-delay: -5s; }
@keyframes hf-in { from { opacity: 0; } }
@keyframes hf-float { from { transform: translateY(-10px) rotate(-4deg); } to { transform: translateY(12px) rotate(5deg); } }

/* cromo: esfera, aro, cubo, píldora */
.hf--sphere::before, .hf--cube::before, .hf--pill::before, .hf--ring::before { content: ""; display: block; width: 100%; height: 100%; animation: hf-float 8s ease-in-out infinite alternate; }
.hf--sphere::before { border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 6%, #d9ffd2 9%, #7d8f7a 32%, #1d261c 58%, #9fdc94 78%, #0c120b 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .6), inset -8px -10px 20px rgba(0, 0, 0, .5); }
.hf--ring::before { border-radius: 50%;
  background: conic-gradient(from 30deg, #f4fff2, #516050, #dfffd8, #1c2a1a, #c9f5c0, #3b4a39, #f4fff2);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%, #000 66%, transparent 68%); mask: radial-gradient(circle, transparent 46%, #000 48%, #000 66%, transparent 68%);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); transform: rotateX(58deg); }
.hf--cube::before { border-radius: 16px;
  background: linear-gradient(135deg, #f0fff0 0%, #8ea08b 22%, #1a2419 45%, #b8e8b0 62%, #2b3a29 80%, #e2ffdc 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .25); transform: rotate(18deg); }
.hf--pill::before { width: 100%; height: 220%; border-radius: 40px; margin-top: -60%;
  background: linear-gradient(90deg, #26331f 0%, #d8ffd0 30%, #5f705c 55%, #19ff00 80%, #0c160a 100%); box-shadow: 0 16px 30px rgba(0, 0, 0, .6); transform: rotate(-25deg); }
.hf--squiggle svg { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }

/* tarjetas de contenido (placeholders de UGC) */
.hf--card { width: 128px; padding: 7px 7px 9px; border-radius: 14px; background: rgba(15, 15, 15, .82); border: 1px solid rgba(25, 255, 0, .25);
  backdrop-filter: blur(6px); box-shadow: 0 20px 40px rgba(0, 0, 0, .55); font-family: 'Inter', sans-serif; rotate: var(--r, 0deg); }
.hf-card__img { display: block; aspect-ratio: 4 / 5; border-radius: 9px; margin-bottom: 7px; background-size: cover; background-position: center; }
.hf-card__img--1 { background-image: linear-gradient(160deg, rgba(25, 255, 0, .45), transparent 60%), url('../img/textura-metal-2.webp'); }
.hf-card__img--2 { background-image: linear-gradient(200deg, rgba(25, 255, 0, .3), transparent 60%), url('../img/textura-mercurio-liquido.webp'); }
.hf--card b { display: block; font-size: .66rem; color: #fff; }
.hf--card small { font-size: .62rem; color: var(--color-primary); }

/* chips tipo notificación */
.hf--chip { width: auto; height: auto; padding: 7px 13px; border-radius: 30px; white-space: nowrap; font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 600;
  background: var(--color-primary); color: #000; box-shadow: 0 10px 30px rgba(25, 255, 0, .25); }
.hf--chip-dark { background: rgba(10, 10, 10, .85); color: var(--color-primary); border: 1px solid rgba(25, 255, 0, .35); box-shadow: none; }

@media (max-width: 900px) {
  .hf--card, .hf--pill, .hf--chip-dark { display: none; }
  .hf--sphere { --s: 52px !important; --x: 11% !important; --y: 84% !important; }
  .hf--ring { --s: 58px !important; --x: 88% !important; --y: 20% !important; }
  .hf--cube { --s: 40px !important; --x: 8% !important; --y: 88% !important; }
  .hf--squiggle { --s: 80px !important; --x: 86% !important; --y: 92% !important; }
  .hf--chip { font-size: .64rem; }
}
@media (max-width: 600px) { .hf--chip, .hf--cube { display: none; } }

/* 2) Grano + líneas de escaneo en toda la página (une las secciones) */
[data-version="b"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 99990; pointer-events: none; opacity: .09;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; animation: grain 1s steps(4) infinite;
}
@keyframes grain { 25% { background-position: 0 0, 30px -20px; } 50% { background-position: 0 1px, -20px 40px; } 75% { background-position: 0 2px, 50px 10px; } }

/* 3) Costuras de glitch entre secciones (en vez de cortes rectos) */
.glitch-seam { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 3px; pointer-events: none; overflow: hidden; }
.glitch-seam::before, .glitch-seam::after { content: ""; position: absolute; inset: 0; }
.glitch-seam::before { background: linear-gradient(90deg, transparent, rgba(25, 255, 0, .7) 20%, transparent 22%, transparent 48%, rgba(255, 255, 255, .6) 50%, transparent 53%, transparent 70%, rgba(25, 255, 0, .6) 74%, transparent 80%);
  animation: seam 6s steps(1) infinite; }
.glitch-seam::after { top: 1px; background: linear-gradient(90deg, transparent 10%, rgba(255, 0, 170, .45) 12%, transparent 16%, transparent 60%, rgba(0, 255, 255, .4) 63%, transparent 66%);
  animation: seam 6s steps(1) infinite reverse; }
@keyframes seam { 0%, 86%, 100% { opacity: 0; transform: none; } 88% { opacity: 1; transform: translateX(-4%); } 91% { opacity: .8; transform: translateX(6%); } 94% { opacity: 1; transform: translateX(-2%); } }

/* 4) Borde metálico que recorre las tarjetas */
.tt-sheen { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1px;
  background: conic-gradient(from var(--a, 0deg), transparent 0 55%, rgba(233, 255, 228, .75) 62%, rgba(25, 255, 0, .8) 66%, transparent 74% 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 exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s; animation: sheen-spin 4s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sheen-spin { to { --a: 360deg; } }
:hover > .tt-sheen, .tt-reel__media:hover .tt-sheen { opacity: 1; }

/* 5) Proceso (brief → recomendación): números cromados + glitch al pasar el mouse */
[data-version="b"] .sec-proceso { --overlay-opacity: .86; }
[data-version="b"] .tutte-proceso-num {
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .55), rgba(25, 255, 0, .12) 45%, rgba(0, 0, 0, .6) 100%);
  border-color: rgba(220, 255, 214, .45); text-shadow: 0 0 8px rgba(25, 255, 0, .6); }
.is-glitching { animation: txt-glitch .45s steps(2) 1; }
@keyframes txt-glitch {
  0%   { text-shadow: 2px 0 rgba(255, 0, 170, .8), -2px 0 rgba(0, 255, 255, .8); transform: translateX(0); }
  25%  { text-shadow: -3px 0 rgba(255, 0, 170, .8), 3px 0 rgba(0, 255, 255, .8); transform: translateX(-2px) skewX(-6deg); clip-path: inset(10% 0 55% 0); }
  50%  { text-shadow: 3px 0 rgba(255, 0, 170, .8), -1px 0 rgba(0, 255, 255, .8); transform: translateX(2px); clip-path: inset(50% 0 10% 0); }
  75%  { text-shadow: -1px 0 rgba(255, 0, 170, .8), 2px 0 rgba(0, 255, 255, .8); transform: none; clip-path: none; }
  100% { text-shadow: none; transform: none; }
}

/* 6) Títulos en Asimovian: pequeño glitch al pasar el mouse */
[data-version="b"] .tutte-hero-accent:hover,
[data-version="b"] .tt-content__title span:hover { animation: txt-glitch .45s steps(2) 1; }

@media (prefers-reduced-motion: reduce) {
  .hf, .hf > *, .hf::before, [data-version="b"] body::after, .glitch-seam::before, .glitch-seam::after, .tt-sheen, .is-glitching { animation: none !important; }
}