/* =========================================================
   CHULLAPSD — style.css
   Blanco y negro. El color es el trabajo.
   ========================================================= */

:root {
  --black: #0A0A0A;
  --ink: #121212;
  --graphite: #1C1C1C;
  --mute: #8A8A8A;
  --bone: #F5F5F3;
  --white: #FFFFFF;
  --accent: #FF0033;     /* rojo YouTube — solo detalles sutiles */
  --accent-rgb: 255, 0, 51;

  /* SF Pro: se usa la del sistema en Apple (Mac/iPhone/iPad); Inter como respaldo en Windows/Android */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-body);   /* etiquetas: misma familia, en mayúsculas con tracking */
  --font-script: "Black Theory", "Brush Script MT", cursive;
  --font-pixel: "Press Start 2P", monospace;

  --fs-mega: clamp(64px, 14vw, 260px);
  --fs-h1: clamp(56px, 10.5vw, 190px);
  --fs-h2: clamp(40px, 6.2vw, 110px);
  --fs-h3: clamp(24px, 2.6vw, 40px);
  --fs-body: clamp(16px, 1.15vw, 19px);
  --fs-label: 12px;

  --gutter: clamp(16px, 4vw, 64px);
  --radius: 18px;
  --line: color-mix(in srgb, currentColor 14%, transparent);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Fuentes ---------- */
@font-face {
  font-family: "Black Theory";
  src: url("assets/fonts/black-theory.woff2?v=2b4e77d2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip; /* clip: no se puede desplazar en horizontal ni por foco */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--white); color: var(--black); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* sobre superficies rojas el foco de teclado pasa a blanco para seguir siendo visible */
.btn--red:focus-visible, .nav__cta:focus-visible, .cta__btn:focus-visible, .to-top:focus-visible, .mock__card.is-hot:focus-visible, .footer :focus-visible { outline-color: var(--white); }

/* Sin JS: cada sección pinta su propio fondo. Con JS el body se interpola. */
[data-theme="light"] { background: var(--bone); color: var(--black); }
html.js [data-theme] { background: transparent; color: inherit; }

/* ---------- Utilidades ---------- */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6; font-weight: 500;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: .92;
  letter-spacing: -.045em;
}
.muted { opacity: .38; }
.line { display: block; overflow: hidden; padding: .1em .12em .18em; margin: -.1em -.12em -.18em; }
.line > span, .split-w > span { display: inline-block; will-change: transform; }
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .1em .2em; margin: -.12em -.1em -.2em; }

.link { position: relative; display: inline-block; }
.link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1.05em 1.7em; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  white-space: nowrap;
}
.btn i { font-style: normal; display: inline-block; transition: transform .4s var(--ease); }
.btn:hover i { transform: translateX(4px); }
.btn--solid { background: var(--white); color: var(--black); position: relative; }
.btn--solid::before {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--accent);
  opacity: 0; transition: opacity .4s var(--ease);
}
.btn--solid:hover::before { opacity: 1; }
.btn--ghost { border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--white); color: var(--black); }
.btn--red { background: var(--accent); color: var(--white); box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), .6); }
.btn--red:hover { background: #e0002d; }
.btn--pill { padding: .7em 1.3em; font-size: 14px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.btn--pill:hover { background: var(--white); color: var(--black); }

section { position: relative; padding: clamp(80px, 9vw, 140px) var(--gutter); }
.section-head { margin-bottom: clamp(48px, 7vw, 110px); }
.section-head .label { margin-bottom: 24px; }
.section-head--row { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -15%; z-index: 90; pointer-events: none; opacity: .07; will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  /* mismo recorrido que antes (capa al 200%), escalado a la capa del 130% */
  0% { transform: translate(0, 0); } 20% { transform: translate(-7.7%, 4.6%); } 40% { transform: translate(6.2%, -9.2%); }
  60% { transform: translate(-4.6%, 10.8%); } 80% { transform: translate(9.2%, 3.1%); } 100% { transform: translate(0, 0); }
}

/* ---------- Progreso ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; pointer-events: none; }
.progress span {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: var(--accent);
}

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 99; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 0; /* cuadrado: alusión al píxel */
  background: var(--white); mix-blend-mode: difference;
  display: grid; place-items: center;
  transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), opacity .3s;
  opacity: 0;
}
.cursor__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--black); opacity: 0; transition: opacity .25s;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-link { width: 20px; height: 20px; margin: -10px 0 0 -10px; mix-blend-mode: normal; background: var(--accent); }
.cursor.is-link.on-red { background: var(--white); }
html.is-touch .cursor { display: none; }
@media (hover: hover) and (pointer: fine) { html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; } }

/* ---------- Preloader (mínimo · analógico) ---------- */
.loader {
  --lp: 0;
  position: fixed; inset: 0; z-index: 100; background: var(--black); color: var(--white); /* mismo tono que los píxeles de salida */
  display: grid; place-items: center; font-family: var(--font-pixel); overflow: hidden;
}
html:not(.js) .loader { display: none; }
.loader__screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(40px, 6vh, 64px); filter: url(#crt); }
/* Logo: rejilla LED + glow como "Soy Caleb". El filtro y la máscara van en el contenedor (con aire alrededor)
   y la máscara se desvanece en círculo: el resplandor no forma una caja */
.loader__boot {
  opacity: 0; padding: 90px; margin-top: -90px; /* el aire superior del glow no descentra el conjunto logo + barra */
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px), radial-gradient(closest-side, #000 62%, transparent);
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect;
}
.loader__boot img { display: block; width: min(30vmin, 240px); height: auto; filter: blur(2.6px) drop-shadow(0 0 22px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.22)); }
.loader__boot.is-flicker { animation: bootFlicker 1.6s steps(1) 1 forwards; }
@keyframes bootFlicker {
  0% { opacity: 0; } 5% { opacity: .8; } 8% { opacity: .05; } 13% { opacity: .95; } 16% { opacity: .3; }
  21% { opacity: 1; } 44% { opacity: .82; } 47% { opacity: 1; } 73% { opacity: .55; } 75% { opacity: 1; } 100% { opacity: 1; }
}
.loader__boot.is-on img { animation: bootBreath 3.4s ease-in-out infinite; }
@keyframes bootBreath { 0%, 100% { filter: blur(2.6px) drop-shadow(0 0 22px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.22)); } 50% { filter: blur(1.6px) drop-shadow(0 0 30px rgba(255,255,255,.7)) drop-shadow(0 0 80px rgba(255,255,255,.3)); } }
/* Logo CHULLA gigante de fondo: cubre la pantalla, muy desenfocado y tenue; aparece de abajo hacia arriba */
.loader__logo {
  position: absolute; left: 50%; top: 50%; width: max(112vw, 117vh); max-width: none; height: auto; translate: -50% -50%; pointer-events: none;
  opacity: calc(.008 + var(--lp) * .032); filter: brightness(.8) blur(calc(12px - var(--lp) * 3px));
  /* analógico: rejilla LED + revelado de abajo hacia arriba + leve parpadeo */
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, #000 1px 5px), repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, #000 1px 5px),
    linear-gradient(0deg, #000 calc(var(--lp) * 110% - 10%), transparent calc(var(--lp) * 110% + 14%));
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect;
  animation: bgLogoFlicker 2.8s steps(1) infinite;
}
@keyframes bgLogoFlicker { 0%, 100% { translate: -50% -50%; } 37% { translate: calc(-50% + 3px) -50%; } 38% { translate: -50% -50%; } 71% { translate: calc(-50% - 2px) calc(-50% + 1px); } 72% { translate: -50% -50%; } }
/* barra fina */
.loader__load { width: min(520px, 78vw); opacity: 0; margin-top: -50px; }
.loader__line {
  position: relative; height: 12px; background: rgba(var(--accent-rgb), .12); filter: blur(1.2px);
}
.loader__load { position: relative; }
.loader__load::before { /* rejilla LED sobre la barra y su glow, desvanecida en los bordes */
  content: ""; position: absolute; left: -40px; right: -40px; top: -30px; height: 70px; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(5,4,4,.55) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(5,4,4,.55) 0 1px, transparent 1px 4px);
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent);
}
.loader__line i {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--lp) * 100%);
  background: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .9), 0 0 40px rgba(var(--accent-rgb), .55), 0 0 calc(30px + var(--lp) * 60px) rgba(var(--accent-rgb), .35);
  transition: width .25s ease-out;
}
.loader__line i::after { /* cabeza brillante: glow rojo intenso en el extremo que va avanzando */
  content: ""; position: absolute; right: -6px; top: 50%; width: 26px; height: 26px; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #ffb3c0 22%, rgba(var(--accent-rgb), .9) 45%, transparent 72%);
  box-shadow: 0 0 30px 10px rgba(var(--accent-rgb), .85), 0 0 80px 26px rgba(var(--accent-rgb), .45);
  opacity: calc(1 - var(--lp) * .3);
}
.loader__meta {
  display: flex; justify-content: space-between; margin-top: 16px;
  font-size: 10px; letter-spacing: .3em; color: rgba(255,255,255,.4); filter: blur(.5px);
}
.loader__meta span:last-child { color: var(--accent); letter-spacing: .12em; text-shadow: 0 0 12px rgba(var(--accent-rgb), .7); }
/* Capa CRT: líneas de barrido, estática oscura animada y viñeta curva */
.loader__crt { position: absolute; inset: 0; pointer-events: none; }
.loader__crt::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .18; animation: crtNoise .6s steps(4) infinite;
}
@keyframes crtNoise { 0% { translate: 0 0; } 25% { translate: -7% 4%; } 50% { translate: 5% -6%; } 75% { translate: -3% -2%; } 100% { translate: 0 0; } }
.loader__crt::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 85% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 82%, #000 100%);
  box-shadow: inset 0 0 140px 50px rgba(0,0,0,.85);
}
.loader__pixels { position: absolute; inset: 0; display: grid; pointer-events: none; z-index: 3; }
.loader__pixels i { background: var(--black); }
.loader.is-out { background: transparent; }
.loader.is-out .loader__crt, .loader.is-out .loader__logo { opacity: 0; transition: opacity .5s ease; }

/* ---------- Nav ---------- */
.nav__burger {
  display: none; place-content: center; gap: 5px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); border: 0; cursor: pointer; position: relative; z-index: 2;
  box-shadow: 0 10px 26px -10px rgba(var(--accent-rgb), .8);
}
.nav__burger i { display: block; width: 20px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .45s var(--ease), opacity .3s; }
.nav.is-menu .nav__burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-menu .nav__burger i:nth-child(2) { opacity: 0; }
.nav.is-menu .nav__burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mnav {
  position: fixed; inset: 0; z-index: 79; display: flex; align-items: center; padding: 120px var(--gutter) 60px;
  background: rgba(10,10,10,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav__list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mnav__list a {
  display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 9vw, 44px); letter-spacing: -.03em; text-transform: uppercase; color: var(--white);
  opacity: 0; translate: 0 18px; transition: opacity .5s var(--ease), translate .6s var(--ease), color .3s;
}
.mnav.is-open .mnav__list a { opacity: 1; translate: 0 0; }
.mnav.is-open .mnav__list a:nth-child(2) { transition-delay: .06s; } .mnav.is-open .mnav__list a:nth-child(3) { transition-delay: .12s; } .mnav.is-open .mnav__list a:nth-child(4) { transition-delay: .18s; }
.mnav__list small { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--accent); }
.mnav__list em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; color: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .4em .8em; align-self: center; }
.mnav__list a.is-soon { color: rgba(255,255,255,.55); }
.mnav__cta { color: var(--accent) !important; }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  color: var(--white);
  transition: transform .6s var(--ease);
}
.nav.is-hidden { transform: translateY(-110%); }
/* Fondo del header al volver a aparecer: fundido oscuro de arriba hacia abajo + desenfoque
   analógico/digital (rejilla LED en la máscara), que se apaga suavemente hacia abajo */
.nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 70px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.7) 38%, rgba(8,8,8,.3) 68%, transparent 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.82) 0 1px, #000 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.82) 0 1px, #000 1px 3px),
    linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,.55) 72%, transparent 100%);
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect;
  opacity: 0; transition: opacity .6s var(--ease);
}
.nav.is-scrolled::before { opacity: 1; }
/* en secciones claras el fundido es del tono del fondo (una franja negra sobre blanco pesaría demasiado) */
body[data-tone="light"] .nav::before { background: linear-gradient(180deg, rgba(245,245,243,.92) 0%, rgba(245,245,243,.7) 38%, rgba(245,245,243,.3) 68%, transparent 100%); }
.nav.is-hidden::before { opacity: 0; transition-duration: .3s; }
/* al reaparecer, las píldoras entran con un leve desenfoque que se enfoca (transiciones al final del archivo) */
.nav.is-hidden > * { filter: blur(6px); opacity: .4; }
.nav.is-menu::before { opacity: 0; }
.nav__logo, .nav__links {
  background: rgba(10,10,10,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.nav__logo:hover, .nav__links:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.nav__logo { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.03em; padding: .55em 1.1em; }
.nav__logo b { font-weight: 800; }
.nav__links { display: flex; gap: 30px; font-size: 14px; padding: .8em 1.6em; }
.nav__links a { position: relative; display: inline-grid; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; opacity: .85; transition: opacity .3s; }
.nav__links a::before { /* reserva el ancho del peso Heavy: el cambio de grosor no mueve el resto */
  content: attr(data-text); grid-area: 1 / 1; font-weight: 900; visibility: hidden; height: 0; overflow: hidden;
}
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a.is-hover { font-weight: 900; opacity: 1; }
/* sin subrayado: el hover solo cambia a peso Black */
.nav__links a::after { display: none; }
.nav__cta { padding: .8em 1.5em; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- 01 Hero editorial ---------- */
.hero {
  height: 100svh; min-height: 560px; padding: 0;
  position: relative; z-index: 2; overflow: visible; /* el título puede desbordar hacia la sección siguiente */
  color: var(--white);
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; background: #0A0A0A; }
.hero__media, .hero__shade, .hero__fade { position: absolute; inset: 0; }
.hero__media { transform-origin: 50% 0; }
/* La foto sube para que el título (abajo) no tape la figura; su borde inferior se funde en negro */
.hero__bg .hero__media {
  top: -7%; bottom: -1%; /* algo más grande (108% de alto) y un poco más arriba, sin cortar la cabeza */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
}
.hero__vid { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
/* Fundido suave del gris claro de la foto al negro de la página */
.hero__fade {
  top: auto; height: 46%; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,10,10,0) 0%, rgba(10,10,10,.18) 30%, rgba(10,10,10,.55) 60%, rgba(10,10,10,.88) 85%, #0A0A0A 100%);
}
.hero__shade { background: var(--black); opacity: 0; pointer-events: none; }

.hero__meta {
  position: absolute; top: clamp(84px, 11vh, 120px); left: var(--gutter); right: var(--gutter); z-index: 2;
  display: flex; justify-content: flex-end; gap: 24px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--white);
}
.hero__meta > span, .hero__cue {
  padding: .6em 1em; border-radius: 999px;
  background: rgba(10,10,10,.6); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dot.dot--live { background: #2bd46b; box-shadow: 0 0 10px #2bd46b; }
.hero__name {
  --hfs: min(26vw, 72vh);
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: center;
  font-weight: inherit; line-height: 1; text-align: center;
}
.hero__lockup { display: inline-flex; flex-direction: column; }
.hero__scripts {
  display: flex; justify-content: space-between; align-items: baseline;
  /* los textos rojos se montan sobre la parte alta del título (como en la referencia) */
  position: relative; z-index: 2;
  padding: 0 calc(var(--hfs) * .34); margin-bottom: calc(var(--hfs) * -.17);
}
.hero__word {
  display: flex; justify-content: center; overflow: hidden;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--hfs); line-height: .74; letter-spacing: -.06em;
  /* margen interno: la máscara de la animación no recorta la C ni el descendente de la "y" */
  padding: .14em .12em .3em; margin: -.1em 0 -.34em; /* el título desborda por abajo hacia la sección siguiente: al scrollear se ve entero */
  color: var(--white);
}
.hero__word span { display: inline-block; will-change: transform; }
/* Desenfoque analógico/digital al hacer scroll (JS anima --hb blur, --ga rejilla, --hg glow) */
.hero__word, .hero__script {
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,var(--ga, 1)) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,var(--ga, 1)) 0 1px, #000 1px 4px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero__word { filter: blur(var(--hb, 0px)); text-shadow: 0 0 40px rgba(255,255,255,var(--hg, 0)); }
.hero__script { padding: .45em .3em; margin: -.45em -.3em; /* aire dentro de la máscara: la firma no se recorta */
  filter: blur(calc(var(--hb, 0px) * .5)); text-shadow: 0 0 22px rgba(var(--accent-rgb), calc(var(--hg, 0) * 1.4)); }
.hero__word .hero__gap { width: .22em; }
.hero__script {
  font-family: var(--font-script); font-style: normal; font-weight: 400;
  font-size: clamp(24px, 3.8vw, 70px); line-height: 1; letter-spacing: .02em;
  color: var(--accent); white-space: nowrap;
}
.hero__cue {
  position: absolute; right: var(--gutter); top: 50%; z-index: 2; color: var(--white);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.hero__cue i::after { background: var(--accent) !important; }

.status { display: inline-flex; align-items: center; gap: 10px; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
.scrollcue { display: inline-flex; align-items: center; gap: 12px; }
.scrollcue i { width: 48px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.scrollcue i::after {
  content: ""; position: absolute; inset: 0; background: var(--white);
  animation: cue 2s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- 02 Pitch (CTA principal) ---------- */
.pitch { padding: clamp(80px, 9vw, 140px) 0 0; text-align: center; overflow: hidden; }
.pitch__inner { position: relative; z-index: 2; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; }
.pill {
  display: inline-block; padding: .65em 1.3em; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03);
  font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: -.01em;
}
.pitch__title {
  margin-top: clamp(24px, 3vw, 40px);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(46px, 7.6vw, 140px); line-height: .98; letter-spacing: -.055em;
}
.pitch__title .line { padding-bottom: .24em; margin-bottom: -.24em; }
.serif {
  font-family: var(--font-script); font-style: normal; font-weight: 400;
  letter-spacing: 0; font-size: 1.2em; line-height: .8; color: var(--accent);
}
.pitch__title strong { font-weight: 800; }
.acc { font-style: normal; color: var(--accent); }
.pill--live { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.proof {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px 14px;
  margin-top: 28px; padding: 8px 18px 8px 8px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.proof__avatars { display: flex; }
.proof__avatars img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; margin-left: -10px;
  border: 2px solid var(--black); background: #222;
}
.proof__avatars img:first-child { margin-left: 0; }
.proof__stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; }
.proof__text { font-size: 15px; color: #bdbdbd; }
.proof__text b { color: var(--white); font-weight: 600; }
.pitch__actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }

.pitch__glow { position: absolute; inset: auto 0 0 0; height: 75%; z-index: 0; pointer-events: none; }
.pitch__glow i {
  position: absolute; bottom: 0; width: 9vw; height: 100%; transform-origin: bottom;
  background: linear-gradient(to top, rgba(var(--accent-rgb),.32), rgba(var(--accent-rgb),.06) 55%, transparent);
  filter: blur(18px);
}
.pitch__glow i:nth-child(1) { left: 0; height: 80%; }
.pitch__glow i:nth-child(2) { left: 9vw; height: 55%; opacity: .55; }
.pitch__glow i:nth-child(3) { right: 9vw; height: 55%; opacity: .55; }
.pitch__glow i:nth-child(4) { right: 0; height: 80%; }

.mock { position: relative; z-index: 1; margin-top: clamp(40px, 4.5vw, 72px); padding: 0 var(--gutter); perspective: 1600px; }
.mock__window {
  max-width: 1440px; margin: 0 auto; height: min(84vh, 820px); overflow: hidden;
  background: #0c0c0c; border-radius: 22px 22px 0 0; text-align: left;
  border: 1px solid rgba(var(--accent-rgb),.45); border-bottom: 0;
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.07), 0 -30px 120px -30px rgba(var(--accent-rgb),.4);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent);
          mask-image: linear-gradient(180deg, #000 88%, transparent);
}
.mock__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mock__dots { display: flex; gap: 7px; }
.mock__dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a2a2a; }
.mock__search {
  min-width: min(380px, 40vw); padding: 8px 18px; border-radius: 999px; background: #161616; border: 1px solid rgba(255,255,255,.06);
  font-family: var(--font-mono); font-size: 12px; color: var(--mute); text-align: center;
}
.mock__avatar {
  justify-self: end; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--black); font-family: var(--font-display); font-weight: 800; font-size: 14px;
  box-shadow: 0 0 0 2px #0c0c0c, 0 0 0 3px var(--accent);
}
.mock__feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; padding: 26px; }
.mock__card { position: relative; display: block; }
.mock__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #151515; }
.mock__card:not(.is-hot) { cursor: zoom-in; }
/* destello blanco al entrar el cursor (igual que las miniaturas de "Mi trabajo") */
.mock__card:not(.is-hot) .mock__thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #fff; opacity: 0; border-radius: inherit;
}
.mock__card:not(.is-hot):hover .mock__thumb::before, .mock__card:not(.is-hot):focus-visible .mock__thumb::before { animation: citemFlash .55s ease-out; }
.mock__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(2.5px) brightness(.9); transform: scale(1.03);
  transition: filter .7s var(--ease), transform .9s var(--ease);
}
.mock__card:hover .mock__thumb img, .mock__card.is-focus .mock__thumb img { filter: none; transform: scale(1); }
.mock__thumb { transition: box-shadow .5s var(--ease); }
.mock__card:hover .mock__thumb, .mock__card.is-focus .mock__thumb {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .7), 0 0 28px 2px rgba(var(--accent-rgb), .45), 0 0 70px rgba(var(--accent-rgb), .2);
}
.mock__eye {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mock__eye svg { width: 22px; height: 22px; fill: var(--white); }
.mock__card:hover .mock__eye, .mock__card.is-focus .mock__eye { opacity: 0; transform: scale(.7); }
.perf { /* badge de rendimiento, estilo addon vidIQ */
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(10,10,10,.84); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55);
  /* sin backdrop-filter: van sobre filas en movimiento y el desenfoque de fondo se recalculaba en cada fotograma */
}
.perf::before { content: "▲ "; color: var(--accent); font-size: .8em; }
.perf--lg { top: 14px; right: 14px; bottom: auto; padding: 5px 10px; font-size: clamp(12px, .95vw, 15px); border-radius: 8px; }
.mock__meta small { display: block; font-size: 11px; color: #6f6f6f; margin-top: -3px; }
.mock__thumb--you {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center;
  padding: 0 clamp(12px, 1.6vw, 24px); background: var(--white); color: var(--black);
  outline: 3px solid var(--accent); outline-offset: 4px;
  box-shadow: 0 0 0 10px rgba(var(--accent-rgb), .12);
  transition: background .4s var(--ease);
}
.mock__card.is-hot { z-index: 2; transition: scale .6s var(--ease); }
@media (hover: hover) { .mock__card.is-hot:hover { scale: 1.12; z-index: 5; } }
.mock__card.is-hot .you__title { transition: scale .6s var(--ease); }
@media (hover: hover) { .mock__card.is-hot:hover .you__title { scale: 1.18; } }
.mock__card.is-hot:hover .mock__thumb--you { background: var(--accent); color: var(--white); outline-color: var(--white); box-shadow: 0 0 0 10px rgba(var(--accent-rgb), .3), 0 30px 60px -20px rgba(var(--accent-rgb), .6); animation: none; }
/* Parpadeo de atención cada pocos segundos */
.mock__thumb--you { animation: hotBlink 4.2s infinite; }
@keyframes hotBlink {
  0%, 86%, 100% { background: var(--white); color: var(--black); outline-color: var(--accent); }
  88% { background: var(--accent); color: var(--white); outline-color: var(--white); }
  90% { background: var(--white); color: var(--black); outline-color: var(--accent); }
  92% { background: var(--accent); color: var(--white); outline-color: var(--white); }
  95% { background: var(--white); color: var(--black); outline-color: var(--accent); }
}
.mock__thumb--you .acc { animation: hotBlinkAcc 4.2s infinite; }
@keyframes hotBlinkAcc { 0%, 86%, 90%, 95%, 100% { color: var(--accent); } 88%, 92% { color: var(--white); } }
.mock__card.is-hot:hover .acc { animation: none; }
.mock__card.is-hot:hover .you__title .acc { color: var(--white); }
.you__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 1.9vw, 32px);
  line-height: .98; letter-spacing: -.04em;
}
.you__sub { font-family: var(--font-body); font-weight: 500; font-size: clamp(11px, .9vw, 14px); color: var(--accent); }
.mock__meta { display: flex; gap: 12px; margin-top: 14px; }
.mock__meta > div { flex: 1; display: grid; gap: 7px; }
.mock__av { width: 30px; height: 30px; border-radius: 50%; background: #222; flex: none; }
.mock__meta b { display: block; height: 10px; border-radius: 4px; background: #222; }
.mock__meta b:nth-child(2) { width: 65%; }
.mock__meta s {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  font-family: var(--font-body); font-size: 12px; color: var(--mute);
}
.mock__av--you { display: grid; place-items: center; background: var(--white); color: var(--black); font-style: normal; font-weight: 800; font-size: 13px; }

/* ---------- 03 Perfil + Stats ---------- */
.intro { padding: clamp(56px, 6vw, 96px) 0 0; }

.stats__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px);
  margin: 0 var(--gutter);
}
.stat {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px;
  min-height: clamp(220px, 19vw, 300px); padding: clamp(48px, 4vw, 64px) clamp(20px, 2vw, 32px);
  border-radius: 24px; background: linear-gradient(180deg, #151515, #0e0e0e);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .5s var(--ease), border-color .5s var(--ease), translate .6s var(--ease), scale .25s var(--ease);
}
.stat::before { /* brillo rojo sutil desde arriba */
  content: ""; position: absolute; inset: -40% 10% auto; height: 70%; z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .16), transparent);
  opacity: .7; transition: opacity .5s var(--ease);
}
@media (hover: hover) { .stat:hover { background: var(--accent); border-color: var(--accent); translate: 0 -4px; } }
.stat:active { scale: .98; }
.stat:hover::before { opacity: 0; }
/* icono: complemento discreto en la esquina */
.stat__icon {
  position: absolute; top: 18px; left: 20px;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.stat__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.stat__icon svg path[d^="M10"] { fill: var(--accent); stroke: none; transition: fill .5s var(--ease); }
.stat:hover .stat__icon { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); }
.stat:hover .stat__icon svg path[d^="M10"] { fill: var(--white); }
.stat__num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 6.4vw, 116px);
  line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
}
.stat__num em { font-style: normal; color: var(--accent); display: inline-block; transition: color .5s var(--ease); }
.stat:hover .stat__num em { color: var(--white); }
.stat__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); transition: color .5s var(--ease); }
.stat:hover .stat__label { color: rgba(255,255,255,.85); }
.stat__idx { position: absolute; top: 20px; right: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.3); }
.stat:hover .stat__idx { color: rgba(255,255,255,.7); }

.marquee { overflow: hidden; padding: 28px 0; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 2.2rem; will-change: transform; }
.marquee__track span {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 28px);
  letter-spacing: -.02em; text-transform: uppercase; color: var(--mute);
}

/* ---------- Thumb (plantilla + imagen) ---------- */
.thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: var(--graphite); isolation: isolate;
}
.thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.thumb__ph {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 80% at 22% 30%, var(--h1, #444) 0%, transparent 70%),
    radial-gradient(55% 75% at 82% 75%, var(--h2, #666) 0%, transparent 70%),
    #0d0d0d;
  display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.thumb__ph::before {
  content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(255,255,255,.28); border-radius: calc(var(--radius) - 8px);
}
.thumb__ph::after {
  content: "16:9"; position: absolute; right: 22px; bottom: 18px; opacity: .6;
}
.thumb__n {
  font-family: var(--font-display); font-size: clamp(40px, 6vw, 96px); font-weight: 800; letter-spacing: -.06em; line-height: 1;
  align-self: flex-end; color: rgba(255,255,255,.92); mix-blend-mode: overlay;
}
.thumb__lbl { position: relative; }
.thumb .shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 45%);
}
.work:hover .shine { opacity: 1; }

/* ---------- 04 Trabajo: collage ---------- */
.collage { padding: clamp(80px, 9vw, 140px) 0; overflow: hidden; }
.collage::before {
  content: ""; position: absolute; right: -10%; top: 20%; width: 50vw; height: 50vw; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .16), transparent 70%);
}
.collage__head { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); margin-bottom: clamp(36px, 4.5vw, 72px); }
.collage__head .label { margin-bottom: 24px; }
.collage__cta { margin-top: clamp(24px, 2.6vw, 36px); }
.collage__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(46px, 8vw, 150px); line-height: .92; letter-spacing: -.055em; }
.collage__plane { display: grid; gap: clamp(12px, 1.4vw, 22px); }
.crow__track { display: flex; width: max-content; will-change: transform; }
.citem {
  position: relative; flex: none; width: 32vw; aspect-ratio: 16 / 9; margin: 0 clamp(12px, 1.4vw, 22px) 0 0;
  border-radius: 16px; overflow: hidden; background: #111; isolation: isolate;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.8);
}
.citem img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease);
}
.citem:hover img { transform: scale(1.05); }
/* Destello blanco breve al entrar el cursor */
.citem::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #fff; opacity: 0; border-radius: inherit;
}
.citem:hover::before, .citem:focus-visible::before { animation: citemFlash .55s ease-out; }
@keyframes citemFlash { 0% { opacity: 0; } 18% { opacity: .22; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .citem:hover::before { animation: none; } }
.citem::after { /* degradado para legibilidad del nombre */
  content: ""; position: absolute; inset: 55% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.citem figcaption {
  position: absolute; left: 18px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(13px, 1vw, 16px); letter-spacing: -.01em;
  color: var(--white); text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.verified { width: 1.05em; height: 1.05em; fill: #aaa; flex: none; }
.citem figcaption .verified { fill: rgba(255,255,255,.85); }

/* ---------- 05 Clientes ---------- */
.clients__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 0; position: relative; z-index: 2; }
.clients__head .label { margin-bottom: 24px; }
.clients__title { white-space: nowrap; font-size: min(var(--fs-h2), 6.2vw); }
.clients__sub { margin-top: 18px; font-family: var(--font-body); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.4; opacity: .55; max-width: 46ch; }
.clients__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .45; }
.clients { padding-inline: 0; }
.clients__head { padding: 0 var(--gutter); }
/* el padding superior deja sitio a todo lo que sobresale el retrato (alto ≈ 1.34 × ancho) */
.clients__marquee { position: relative; overflow: hidden; padding: calc(var(--pw) * 1.28 - var(--pin) + 30px) 0 90px; margin: calc(var(--pw) * -.16) 0 -66px; cursor: grab; } /* aire inferior: la sombra del hover no se corta */
.clients__marquee.is-dragging, .crow.is-dragging { cursor: grabbing; }
.is-dragging { -webkit-user-select: none; user-select: none; }
.crow img, .review img { -webkit-user-drag: none; user-select: none; }
/* desenfoque lateral: la reseña del centro tiene prioridad */
.clients__rail { display: flex; width: max-content; will-change: transform; }
.clients__rail .review { flex: none; width: calc((100vw - 2 * var(--gutter) - 48px) / 3); margin-right: 24px; min-height: 440px; }
.clients__rail .review__text { font-size: clamp(20px, 1.7vw, 28px); }
.review {
  position: relative; min-height: 380px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: clamp(28px, 3vw, 44px); border-radius: 22px;
  background: var(--white); color: var(--black); border: 1px solid rgba(0,0,0,.06);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.review:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); }
.review { transition: transform .6s var(--ease), box-shadow .6s var(--ease), background-color .45s var(--ease), color .45s var(--ease); }
.review__q, .review__who span { transition: color .45s var(--ease); }
/* hover: solo la reseña bajo el cursor se tiñe con el color de su cliente */
.review { --rc: var(--white); --rt: var(--black); }
.review[data-c="domingo"] { --rc: #54b6ff; }
.review[data-c="rubi"] { --rc: var(--accent); --rt: var(--white); }
.review[data-c="sielmann"] { --rc: #f0b419; }
.review[data-c="rinku"] { --rc: #8a86ff; }
.review[data-c="guillem"] { --rc: #a9dc1e; }
.review[data-c="kelbert"] { --rc: #ff7a5c; }
@media (hover: hover) {
  .review:hover { background-color: var(--rc); color: var(--rt); border-color: transparent; }
  .review:hover .review__q { color: var(--rt); }
  .review:hover .review__who { border-top-color: color-mix(in srgb, var(--rt) 18%, transparent); }
  .review:hover .review__who span { color: color-mix(in srgb, var(--rt) 65%, transparent); }
  .review[data-c="rubi"]:hover .verified--blue { fill: var(--white); }
}
@media (hover: none) {
  .review { background-color: var(--rc); color: var(--rt); border-color: transparent; }
  .review .review__q { color: var(--rt); }
  .review .review__who { border-top-color: color-mix(in srgb, var(--rt) 18%, transparent); }
  .review .review__who span { color: color-mix(in srgb, var(--rt) 65%, transparent); }
  .review[data-c="rubi"] .verified--blue { fill: var(--white); }
  .review .review__av { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt) 85%, transparent), 0 10px 24px -6px rgba(0,0,0,.4); }
}
.review__q { font-family: var(--font-display); font-weight: 800; font-size: 88px; line-height: .7; color: var(--accent); height: 40px; align-self: flex-end; }
/* Retrato recortado (sin fondo): cabeza y cuerpo sobresalen por encima de la tarjeta;
   la base se funde con el blanco de la tarjeta */
/* Retrato realista: todos al mismo ancho (mismo tamaño de cuerpo) y apoyados a la misma altura;
   un degradado elíptico desvanece hombros y brazos en la tarjeta (sin cortes rectos) */
.clients__marquee { --pw: clamp(290px, 23vw, 370px); --pin: clamp(175px, 14vw, 225px); }
/* el texto arranca sobre la zona ya desvanecida del retrato: foto y texto quedan pegados */
.review { padding-top: calc(var(--pin) - 34px); }
.review__text, .review__who { position: relative; z-index: 1; }
.review__photo {
  position: absolute; left: 50%; bottom: calc(100% - var(--pin)); margin: 0;
  width: var(--pw); pointer-events: none;
  transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .8s var(--ease);
}
.review__photo img {
  width: 100%; height: auto; display: block;
  /* desvanecido solo de abajo hacia arriba, en curva suave */
  -webkit-mask-image: linear-gradient(180deg, #000 0 56%, rgba(0,0,0,.9) 64%, rgba(0,0,0,.7) 72%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.22) 87%, rgba(0,0,0,.07) 93%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 0 56%, rgba(0,0,0,.9) 64%, rgba(0,0,0,.7) 72%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.22) 87%, rgba(0,0,0,.07) 93%, transparent 98%);
}
.review:hover .review__photo { transform: translateX(-50%) translateY(-6px) scale(1.02); }
.review[data-c="kelbert"] .review__photo { bottom: calc(100% - var(--pin) + var(--pw) * .1); } /* el sombrero sobresale; la cara queda a la altura del resto */
.review__q { position: absolute; top: clamp(20px, 2vw, 30px); right: clamp(22px, 2.4vw, 34px); }
.review__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.45vw, 24px); line-height: 1.3; letter-spacing: -.02em; }
.review__who { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,.08); }
.review__who strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.review__who strong { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(18px, 1.45vw, 22px); letter-spacing: -.02em; }
.review__who span { display: block; margin-top: 6px; font-family: var(--font-body); font-size: clamp(14px, 1.05vw, 16px); letter-spacing: 0; color: #8a8a8a; line-height: 1.35; }
.verified--blue { width: 1.05em; height: 1.05em; fill: #1d9bf0; }
/* foto de perfil del canal, esquina inferior derecha */
.review__who { position: relative; padding-right: 64px; }
.review__av {
  position: absolute; right: 0; bottom: 0; width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--white), 0 8px 20px -6px rgba(0,0,0,.35); transition: box-shadow .45s var(--ease);
}
.review:hover .review__av { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt) 85%, transparent), 0 10px 24px -6px rgba(0,0,0,.4); }

/* ---------- 08 Servicio ---------- */
.service__intro { margin-bottom: clamp(48px, 6vw, 88px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.service__kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 22px; font-weight: 500; }
.service__title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 6.6vw, 120px);
  line-height: .95; letter-spacing: -.05em; max-width: 16ch;
}
/* color heredado del fondo (claro/oscuro): texto atenuado, palabras clave al 100% */
.service__title .split-w > span { opacity: .45; }
.service__title strong { font-weight: 800; text-transform: uppercase; }
.service__title strong .split-w > span, .service__title .serif .split-w > span { opacity: 1; }
.service__title .serif { font-size: 1.15em; margin: 0 .04em; }
.cta__title .bline { display: block; }
.service__ask { margin-top: 26px; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 22px); color: var(--accent); }
/* Pasos de cada pedido: 3 píldoras */
.steps__label { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .55; margin-bottom: 18px; }
.steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 18px; margin-bottom: clamp(44px, 5vw, 72px); }
.step-pill {
  display: inline-flex; align-items: center; gap: 16px; padding: 12px 34px 12px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.step-pill:hover { border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .06); }
.step-pill__n {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--white); color: var(--black); font-family: var(--font-display); font-size: 15px; font-weight: 800;
}
.step-pill__t { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; line-height: 1.05; }
.step-pill__t small { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .5; margin-bottom: 4px; }
.steps__arrow { color: var(--accent); font-size: 22px; }

/* Planes */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 350px)); justify-content: center; gap: clamp(14px, 1.6vw, 24px); align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(28px, 3vw, 44px); border-radius: 26px;
  background: linear-gradient(180deg, #151515, #0e0e0e); border: 1px solid rgba(255,255,255,.08);
  /* scale/filter como propiedades propias: no chocan con el transform de GSAP */
  transition: scale .45s var(--ease), filter .35s ease-out, opacity .35s ease-out, border-color .4s var(--ease);
}
@media (hover: hover) {
  .plan.is-active { scale: 1.05; z-index: 2; border-color: rgba(255,255,255,.2); }
  .plans.is-focus .plan:not(.is-active) { scale: .95; filter: blur(4px) brightness(.9) drop-shadow(0 0 14px rgba(var(--accent-rgb), .18)); opacity: .55; }
}
.plan--featured { background: var(--white); color: var(--black); border-color: transparent; box-shadow: 0 0 0 1px var(--accent), 0 40px 80px -40px rgba(var(--accent-rgb), .5); }
.plan--featured:hover { border-color: transparent; }
.plan__tag {
  position: absolute; top: 20px; right: 20px; padding: .45em .9em; border-radius: 999px;
  background: var(--accent); color: var(--white); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.plan__name { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -.03em; font-weight: 700; }
.plan__note { margin-top: -10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__price span { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 4.6vw, 76px); letter-spacing: -.05em; line-height: 1; }
.plan__price small { font-size: 14px; opacity: .55; }
.plan__desc { opacity: .7; font-size: 15px; line-height: 1.45; }
.plan__list { display: grid; gap: 12px; padding: 22px 0; margin: 4px 0 auto; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.plan__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.plan__list li::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 11-11-1.4-1.4z' fill='white'/></svg>") center / 12px no-repeat;
}
.plan__cta { justify-content: center; }
.plan--featured .btn--solid { background: var(--black); color: var(--white); }
.plan .btn--ghost { border-color: rgba(255,255,255,.2); }

/* Plan custom: píldora */
.plan-custom {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); width: fit-content; max-width: 100%;
  margin: clamp(24px, 2.8vw, 40px) auto 0; padding: 14px 14px 14px 32px; border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.28); background: rgba(255,255,255,.02);
  transition: background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.plan-custom:hover { background: var(--accent); border-color: var(--accent); border-style: solid; color: var(--white); }
.plan-custom:hover .plan-custom__k { color: var(--white); }
.plan-custom__k { font-family: var(--font-mono); font-size: 13px; font-weight: 600; transition: color .45s var(--ease); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.plan-custom__t { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.6vw, 24px); letter-spacing: -.01em; }
.plan-custom__go {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--white); color: var(--black); font-size: 20px; transition: transform .4s var(--ease);
}
.plan-custom:hover .plan-custom__go { transform: translateX(4px); }

/* ---------- Han confiado en mí (logos) ---------- */
.marquee--logos { padding: 8px 0; }
.marquee--logos { padding: 16px 0; }
.marquee--logos .marquee__track { gap: clamp(72px, 9vw, 160px); align-items: center; }
.logo-slot {
  flex: none; height: clamp(60px, 6.4vw, 96px); min-width: clamp(160px, 15vw, 240px);
  display: grid; place-items: center; position: relative;
}
.logo-slot img { height: 100%; width: auto; max-width: 280px; object-fit: contain; filter: brightness(0) invert(1); opacity: .7; transition: opacity .4s, filter .8s var(--ease); position: relative; z-index: 1; }
body[data-tone="light"] .logo-slot img { filter: brightness(0); }
.logo-slot:hover img { opacity: 1; }
.logo-slot em {
  font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -.02em; color: color-mix(in srgb, currentColor 32%, transparent);
  border: 1px dashed color-mix(in srgb, currentColor 22%, transparent); border-radius: 12px; padding: .5em 1em;
}
.logo-slot img + em { display: none; }
/* Canales (mientras no haya logos): avatar + nombre + verificado */
.logo-slot--ch { display: inline-flex; align-items: center; gap: clamp(14px, 1.3vw, 20px); height: auto; min-width: 0; padding: 0 clamp(20px, 2.4vw, 40px); }
.logo-slot--ch .ch__av {
  width: clamp(54px, 5vw, 76px); height: clamp(54px, 5vw, 76px); max-width: none; border-radius: 50%; object-fit: cover;
  filter: grayscale(1) contrast(1.05); opacity: .85; transition: filter .6s var(--ease), opacity .4s;
}
body[data-tone="light"] .logo-slot--ch .ch__av { filter: grayscale(1); }
.logo-slot--ch:hover .ch__av { filter: none; opacity: 1; }
.logo-slot--ch b { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 44px); letter-spacing: -.03em; white-space: nowrap; opacity: .8; transition: opacity .4s; }
.logo-slot--ch:hover b { opacity: 1; }
.logo-slot--ch .verified { width: .95em; height: .95em; fill: #1d9bf0; font-size: clamp(20px, 2vw, 30px); }

/* ---------- 09 Trust ---------- */
.trust { position: relative; padding: clamp(56px, 6vw, 92px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust .label { position: absolute; top: clamp(14px, 1.4vw, 20px); left: var(--gutter); margin: 0; padding: 0; opacity: .32; font-size: 11px; pointer-events: none; }
.marquee--big .marquee__track { gap: 3rem; align-items: center; }
.marquee--big .marquee__track span {
  font-size: clamp(48px, 8vw, 150px); font-weight: 800; letter-spacing: -.05em; color: var(--white); text-transform: none;
}
.marquee--big .outline { color: transparent !important; -webkit-text-stroke: 1px rgba(255,255,255,.5); }
.marquee--big .star { font-size: clamp(24px, 3vw, 48px) !important; color: var(--mute) !important; }

/* ---------- 10 CTA / Contacto ---------- */
.cta { min-height: 0; padding-top: clamp(32px, 4vw, 64px); display: grid; place-items: center; text-align: center; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; z-index: 0; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.cta__bg img {
  /* el rostro (≈36% de la foto) queda a la altura del título */
  height: 175vh; width: auto; max-width: none; object-fit: cover; opacity: .3;
  margin-top: -6vh;
  -webkit-mask-image: radial-gradient(48% 34% at 50% 36%, #000 30%, transparent 80%);
          mask-image: radial-gradient(48% 34% at 50% 36%, #000 30%, transparent 80%);
}
.cta::after { /* velo inferior para legibilidad */
  content: ""; position: absolute; inset: 40% 0 0; z-index: 0; pointer-events: none;
  background: linear-gradient(transparent, rgba(10,10,10,.85) 70%, #0A0A0A);
}
.cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: 0; }
.cta__title {
  margin-top: 28px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 10vw, 190px);
  line-height: .9; letter-spacing: -.055em; will-change: transform;
}
.cta__sub { max-width: 480px; margin-top: 28px; color: #e2e2e2; font-size: clamp(16px, 1.3vw, 19px); }
.cta__btn {
  margin-top: clamp(32px, 4vw, 48px); display: inline-flex; align-items: center; gap: 16px;
  padding: 10px 10px 10px 28px; border-radius: 999px; background: var(--accent); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: -.01em;
  box-shadow: 0 16px 40px -14px rgba(var(--accent-rgb), .7); transition: background .4s var(--ease);
}
.cta__btn:hover { background: #e0002d; }
.cta__btn-go {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--black); font-size: 18px; transition: transform .4s var(--ease);
}
.cta__btn:hover .cta__btn-go { transform: translateX(4px); }
.socials { display: flex; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }
.socials a {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .4s var(--ease), border-color .4s var(--ease), translate .4s var(--ease), scale .25s var(--ease);
}
.socials a:hover { background: var(--accent); border-color: var(--accent); translate: 0 -4px; }
.socials a:active { scale: .92; transition-duration: .1s; }
.socials svg { width: 22px; height: 22px; fill: var(--white); }

/* ---------- 11 Footer ---------- */
/* el contenido sube y descubre el footer, que queda fijo debajo (efecto "reveal") */
main { position: relative; z-index: 1; background-color: inherit; }
.footer {
  position: sticky; bottom: 0; z-index: 0; overflow: hidden;
  background: var(--accent); color: var(--black);
}
.footer__inner { will-change: transform; }
.footer__top { display: flex; border-bottom: 1px solid rgba(0,0,0,.22); }
.footer__cta, .footer__links { width: 50%; padding: clamp(24px, 2.6vw, 40px) var(--gutter); }
.footer__cta { border-right: 1px solid rgba(0,0,0,.22); }
.footer__headline {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 56px); line-height: .9; letter-spacing: -.04em;
}
.footer__cta { display: flex; align-items: center; }
.footer__links { display: grid; align-content: center; gap: 0; }
.footer__link {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.18); color: var(--black);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  transition: padding .4s var(--ease), opacity .3s;
}
.footer__link:last-child { border-bottom: 0; }
.footer__link span { color: rgba(0,0,0,.55); }
.footer__link b { font-weight: 700; text-transform: none; letter-spacing: .02em; font-size: 15px; }
.footer__link:hover { padding-left: 10px; }
/* nombre gigante a todo el ancho (puede recortarse por los lados) */
.footer__big { position: relative; height: .86em; font-size: 19vw; overflow: hidden; }
.footer__bigtext {
  position: absolute; left: 50%; top: .02em; translate: -50% 0;
  font-family: var(--font-display); font-weight: 900; line-height: .8; letter-spacing: -.045em;
  white-space: nowrap; color: var(--black);
  filter: blur(9px); text-shadow: 0 0 30px rgba(0,0,0,.5);
}
.footer__bigtext.is-flick { color: var(--accent); text-shadow: -.04em 0 0 rgba(0,0,0,.85), .03em 0 0 rgba(0,0,0,.45); translate: calc(-50% + 6px) 0; }
.footer__bigtext.is-flick-b { color: rgba(0,0,0,.55); translate: calc(-50% - 4px) 0; }
.to-top.on-footer { background: var(--black); box-shadow: 0 14px 34px -12px rgba(0,0,0,.6); }

/* =========================================================
   Responsive
   ========================================================= */
/* ---------- 01b Sobre mí · estilo glitch ---------- */
/* padding-top extra: la cola de la "y" del título de portada desborda sobre esta sección */
.about {
  --g: var(--accent);
  position: relative; overflow: hidden;
  padding: max(clamp(64px, 7vw, 110px), calc(min(26vw, 72vh) * .32)) 0 clamp(60px, 7vw, 120px);
}
.about__stage {
  position: relative; height: clamp(560px, 62vw, 960px); max-width: 1500px; margin: 0 auto;
  color: var(--g);
}
/* Pantalla LED: rejilla de píxeles como máscara. Los textos llevan padding extra para que
   el desenfoque no se recorte en el borde de su caja; las fotos se desvanecen hacia los bordes. */
/* Máscara LED + desvanecimiento en los bordes: el padding (--pad) da sitio al desenfoque y al glow,
   y el degradado lo apaga suavemente antes del límite de la caja (sin cortes). */
.about__txt > *, .footer__bigtext {
  --pad: 120px; --fade: 100px;
  padding: var(--pad); margin: calc(var(--pad) * -1);
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(0deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect;
}
.footer__bigtext { --pad: 70px; --fade: 55px; margin: calc(var(--pad) * -1) 0 0; }
.gframe::before, .gframe__img {
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(0deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect;
}
/* Recuadros con asas (como una selección en Photoshop) */
.gframe {
  position: absolute; border: 1px solid var(--g); background: transparent; will-change: transform; /* capa propia: moverla no repinta el desenfoque */
  box-shadow: 0 0 30px rgba(var(--accent-rgb), .25);
}
/* desenfoque analógico: las fotos respiran entre foco y desenfoque */
/* la imagen va en ::before para que el borde y las asas queden nítidos */
.gframe::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("assets/img/caleb-glitch.webp?v=0103b066") var(--bp, 50% 50%) / var(--bz, cover) no-repeat;
  filter: blur(var(--blur, 3px));
}
.gframe--main::before { display: none; }
.gframe__img { filter: blur(var(--blur)) contrast(1.08); }
@keyframes gFocus { 0%, 100% { filter: blur(var(--blur)); } 50% { filter: blur(calc(var(--blur) * .45)); } }
@keyframes gFocusImg { 0%, 100% { filter: blur(var(--blur)) contrast(1.08); } 50% { filter: blur(calc(var(--blur) * .45)) contrast(1.08); } }
.gframe--b::before, .gframe--d::before { animation-delay: -3s; }
.gframe--c::before { animation-delay: -5s; }
.gframe--a { --blur: 9px; } .gframe--b { --blur: 7px; } .gframe--c { --blur: 11px; } .gframe--d { --blur: 8px; }
.gframe--main { --blur: 5px; }

/* Recuadro principal: el borde va en un pseudo para poder ocultar el tramo izquierdo que cruza
   "CALEB" (el texto desenfocado dejaba ver esa línea roja a través) */
@media (min-width: 1025px) {
  .gframe--main { border-color: transparent; }
  .gframe--main::after {
    content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none; border: 1px solid var(--g);
    /* solo se oculta el tramo central del borde izquierdo (donde cruza CALEB); la esquina superior se mantiene */
    -webkit-mask-image: linear-gradient(90deg, transparent 0 4px, #000 4px), linear-gradient(180deg, #000 0 10%, transparent 17% 45%, #000 54%);
    mask-image: linear-gradient(90deg, transparent 0 4px, #000 4px), linear-gradient(180deg, #000 0 10%, transparent 17% 45%, #000 54%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
}
.gframe__h { position: absolute; z-index: 3; width: 9px; height: 9px; background: var(--g); margin: -5px; }
.gframe__h:nth-of-type(1) { left: 0; top: 0; }
.gframe__h:nth-of-type(2) { right: 0; top: 0; }
.gframe__h:nth-of-type(3) { left: 0; bottom: 0; }
.gframe__h:nth-of-type(4) { right: 0; bottom: 0; }
/* centrado con left (no translate): GSAP limpia el translate CSS al animar transformaciones */
.gframe--main { left: calc(50% - min(37vw, 560px) / 2); top: 4%; width: min(37vw, 560px); aspect-ratio: 4 / 5; }
.gframe__img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gframe--a { left: calc(50% + min(14vw, 210px)); top: 0; width: min(13vw, 200px); aspect-ratio: 1 / 2; }
.gframe--b { left: calc(50% - min(27vw, 400px)); top: 44%; width: min(17vw, 260px); aspect-ratio: 2 / 1; }
.gframe--c { left: calc(50% + min(7vw, 105px)); top: 68%; width: min(17vw, 250px); aspect-ratio: 1 / 1; }
.gframe--d { left: calc(50% - min(38vw, 560px)); top: 72%; width: min(8vw, 120px); aspect-ratio: 1 / 1; }

/* Glitch: cortes horizontales desplazados con separación de canales (lo activa JS) */
.gframe.is-glitch { animation: gShake .32s steps(2) 1; }
.gframe.is-glitch::before, .gframe.is-glitch .gframe__img { filter: blur(0) contrast(1.3); }
.gframe .gslice {
  position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  background: inherit; background-image: url("assets/img/caleb-glitch.webp?v=0103b066"); background-repeat: no-repeat;
  mix-blend-mode: screen; opacity: .9;
}
@keyframes gShake { 0% { translate: var(--tx, 0) 0; } 50% { translate: calc(var(--tx, 0) + 4px) 0; } 100% { translate: var(--tx, 0) 0; } }
@keyframes gShakeMain { 0% { translate: -50% 0; } 50% { translate: calc(-50% + 5px) 0; } 100% { translate: -50% 0; } }

.about__txt { position: absolute; z-index: 4; text-shadow: 0 0 18px rgba(var(--accent-rgb), .7), 0 0 50px rgba(var(--accent-rgb), .35); }
.about__txt > * { filter: blur(var(--tblur, 2px)); will-change: transform; }
.about__name { text-shadow: 0 0 40px rgba(var(--accent-rgb), .8), 0 0 90px rgba(var(--accent-rgb), .4); }
.about__txt--l { left: var(--gutter); top: 14%; }
.about__txt--r { right: var(--gutter); top: 52%; text-align: right; }
.about__name {
  font-family: var(--font-display); font-weight: 800; --tblur: 6px;
  font-size: clamp(72px, 11vw, 190px); line-height: .85; letter-spacing: -.05em; text-transform: uppercase;
}
.about__handle { margin-top: calc(var(--pad) * -1 + 8px); font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 28px); font-weight: 700; letter-spacing: -.01em; --tblur: .6px; }
.about__age { font-family: var(--font-display); font-size: clamp(56px, 7vw, 120px); font-weight: 800; letter-spacing: -.05em; line-height: .9; --tblur: 6px; }
.about__age { display: block; }
/* Roles apilados (estilo cartel LED): una palabra en foco, el resto desenfocado; corchetes a los lados */
.about__skills {
  --tblur: 0px; list-style: none; position: relative; margin-top: calc(var(--pad) * -1 + 10px);
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(26px, 2.9vw, 50px); line-height: .92; letter-spacing: -.03em;
}
.about__skills li { --sb: 7px; filter: blur(var(--sb)); cursor: default; padding: 0 .04em; }
.about__skills::before, .about__skills::after { /* corchetes [ ] */
  content: ""; position: absolute; top: calc(var(--pad) + .1em); bottom: calc(var(--pad) + .1em); width: .28em;
  border: .09em solid currentColor; filter: blur(.6px);
}
.about__skills::before { left: calc(var(--pad) - .55em); border-right: 0; }
.about__skills::after { right: calc(var(--pad) - .55em); border-left: 0; }
/* Texto glitch: copias desplazadas en canales cuando .is-glitch */
.glitch-txt { position: relative; display: inline-block; }
.glitch-txt::before, .glitch-txt::after {
  content: attr(data-text); position: absolute; inset: var(--pad); opacity: 0; pointer-events: none;
}
.glitch-txt::before { color: var(--accent); filter: brightness(1.3); }
.glitch-txt::after { color: var(--accent); }
.glitch-txt.is-glitch::before { opacity: .8; animation: gTxtA .35s steps(3) 1; }
.glitch-txt.is-glitch::after { opacity: .6; animation: gTxtB .35s steps(3) 1; }
@keyframes gTxtA { 0% { clip-path: inset(10% 0 60% 0); translate: -4px 0; } 50% { clip-path: inset(55% 0 20% 0); translate: 5px 0; } 100% { clip-path: inset(30% 0 45% 0); translate: -2px 0; } }
@keyframes gTxtB { 0% { clip-path: inset(65% 0 5% 0); translate: 4px 0; } 50% { clip-path: inset(5% 0 70% 0); translate: -5px 0; } 100% { clip-path: inset(40% 0 35% 0); translate: 3px 0; } }

/* ---------- Reglas (estilo danielkiss.hu, a nuestro estilo) ---------- */
.rulers { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .6s; --rc: 255,255,255; }
.rulers.is-ready { opacity: 1; }
body[data-tone="light"] .rulers { --rc: 10,10,10; }
.ruler { position: absolute; contain: layout; }
.ruler--top { top: 0; left: 0; right: 0; height: 28px; }
.ruler--left { top: 0; bottom: 0; left: 0; width: 48px; }
.ruler__mark {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 8px; font-weight: 400; letter-spacing: .05em; font-variant-numeric: tabular-nums;
  color: rgb(var(--rc)); opacity: .22; transition: color .35s, opacity .2s;
}
.ruler--top .ruler__mark { top: 9px; padding-left: 0; }
.ruler--left .ruler__mark { left: 9px; transform: translateY(-50%); }
.ruler__mark::before { content: ""; position: absolute; background: rgb(var(--rc)); opacity: .6; }
.ruler--top .ruler__mark::before { width: 1px; height: 7px; left: 50%; top: -9px; }
.ruler--left .ruler__mark::before { height: 1px; width: 7px; top: 50%; left: -9px; }
.ruler__tick { position: absolute; background: rgb(var(--rc)); opacity: .14; transition: background-color .35s; }
.ruler--top .ruler__tick { width: 1px; height: 6px; top: 0; }
.ruler--left .ruler__tick { height: 1px; width: 6px; left: 0; }
.ruler__cur { position: absolute; top: 0; left: 0; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .8); will-change: transform; }
.ruler__cur--x { width: 2px; height: 12px; }
.ruler__cur--y { width: 12px; height: 2px; }
.readout {
  position: fixed; right: 14px; bottom: 104px; z-index: 70; pointer-events: none;
  writing-mode: vertical-rl; display: flex; gap: 10px; opacity: 0; transition: opacity .6s, color .35s;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.5);
}
.readout.is-ready { opacity: 1; }
.readout [data-r="s"] { color: var(--accent); }
body[data-tone="light"] .readout { color: rgba(10,10,10,.55); }
@media (max-width: 767px) { .rulers, .readout { display: none; } }

@media (max-width: 1024px) {
  .about__stage { height: auto; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 var(--gutter); }
  .about__txt { position: relative; left: auto; right: auto; top: auto; text-align: center; }
  .about__txt--l { order: 1; margin-bottom: 36px; }
  .about__txt--r { order: 3; margin-top: 44px; }
  .about__skills { align-items: center; }
  .gframe--main { order: 2; position: relative; left: auto; top: auto; translate: none; width: min(78vw, 420px); }
  .gframe--main.is-glitch { animation-name: gShake; }
  .gframe--a { left: auto; right: 3vw; top: 120px; width: 22vw; }
  .gframe--b { left: 3vw; top: 38%; width: 34vw; }
  .gframe--c { left: auto; right: 4vw; top: 50%; width: 28vw; }
  .gframe--d { display: none; }
  .clients__rail .review { width: calc((100vw - 2 * var(--gutter) - 24px) / 2); }
  .plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .hero__meta span:nth-child(2) { display: none; }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: grid; }
}

@media (max-width: 700px) {
  .footer__top { flex-direction: column; }
  .footer__cta, .footer__links { width: 100%; }
  .footer__cta { border-right: 0; border-bottom: 1px solid rgba(0,0,0,.22); }
  .footer__link { font-size: 11px; }
  .footer__link b { font-size: 13px; }
  .steps__arrow { display: none; }
  .plan-custom { flex-wrap: wrap; border-radius: 24px; padding: 1.2em; }
  .clients__rail .review { width: 80vw; margin-right: 14px; }
  .clients__rail .review { width: 74vw; min-height: 0; gap: 22px; padding-left: 24px; padding-right: 24px; padding-bottom: 24px; }
  .clients__rail .review__text { font-size: 18px; }
  .clients__marquee { --pw: 230px; --pin: 128px; }
  .clients__title { white-space: normal; font-size: var(--fs-h2); }
  .clients__marquee { margin-top: 0; } /* el sombrero de Kelbert no pisa el subtítulo */
  .citem { width: 74vw; }
  section { padding-top: 96px; padding-bottom: 96px; }
  .nav { padding: 16px var(--gutter); }

  .hero { min-height: 600px; }
  .hero__name { --hfs: 22.5vw; }
  .hero__script { font-size: 4.8vw; }
  .hero__scripts { padding: 0 calc(var(--hfs) * .1); }
  .hero__cue { display: none; }

  .pitch__title { font-size: clamp(36px, 10.6vw, 64px); }
  .pitch__actions { flex-wrap: nowrap; }
  .pitch__actions .btn { padding: .95em 1.3em; font-size: 15px; }
  .pitch__glow i { width: 18vw; }
  .pitch__glow i:nth-child(2), .pitch__glow i:nth-child(3) { display: none; }
  .mock__window { height: 420px; border-radius: 16px 16px 0 0; }
  .mock__feed { grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 14px; }
  .mock__card:nth-child(n+5) { display: none; }
  .mock__search { min-width: 0; font-size: 10px; padding: 6px 12px; }
  .mock__card .thumb__ph { font-size: 8px; }
  .mock__card .thumb__ph::after { display: none; }
  .mock__meta { gap: 8px; }
  .mock__av { width: 20px; height: 20px; }

  .stats__grid { grid-template-columns: 1fr; }
  .stat__num { font-size: clamp(52px, 16vw, 72px); }
  .stat { min-height: 0; padding: 30px 20px 26px; gap: 8px; border-radius: 20px; }
  /* Hero */
  .hero__script { font-size: 5.2vw; }
  /* Portada móvil: el video 16:9 se muestra más abierto (cabeza + iconos) en vez de recortarse a solo la cabeza */
  .hero { height: min(100svh, 205vw); min-height: 0; }
  .hero__vid { position: absolute; left: 50%; top: 1%; width: 320vw; height: auto; aspect-ratio: 16 / 9; translate: -50% 0; object-position: 50% 30%; }
  .hero__bg .hero__media { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 86%); mask-image: linear-gradient(180deg, #000 60%, transparent 86%); }
  /* Sobre mí: menos desenfoque para el tamaño móvil, misma jerarquía de profundidad */
  .about__name { --tblur: 3.5px; }
  .about__age { --tblur: 3.5px; }
  .gframe--main { --blur: 3.5px; }
  .about__txt > * { --pad: 64px; --fade: 52px; }
  /* Reseñas: desenfoque lateral más estrecho */
  .is-touch .clients__hint { display: none; }
  /* Planes más compactos */
  .plan { padding: 26px 22px; gap: 14px; border-radius: 22px; }
  .plan__list { padding: 16px 0; gap: 10px; }
  /* Footer: nombre gigante legible y botón "arriba" fuera del pie */
  .footer__bigtext { filter: blur(3.5px); --pad: 36px; --fade: 28px; }
  .footer__big { font-size: 19.5vw; }
  .to-top.is-visible.on-footer { opacity: 0; visibility: hidden; pointer-events: none; }


}

/* =========================================================
   Movimiento reducido
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .grain, .dot, .scrollcue i::after, .blink, .cta__circle::before { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- Vista previa (lightbox) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: var(--gutter);
  background: rgba(10,10,10,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lightbox[hidden] { display: none; }
.lightbox__fig { position: relative; margin: 0; width: min(1200px, 100%); }
.lightbox__img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; display: block;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.8);
}
/* etiqueta del canal dentro de la vista previa, en la esquina inferior izquierda */
.lightbox__fig figcaption {
  position: absolute; left: clamp(12px, 1.6vw, 22px); bottom: clamp(12px, 1.6vw, 22px);
  display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px;
  background: rgba(10,10,10,.62); border: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 1.2vw, 17px); color: var(--white); line-height: 1;
}
.lightbox__av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; flex: none; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.lightbox__fig figcaption .verified { width: 16px; height: 16px; flex: none; }
.lightbox__fig figcaption .verified { fill: rgba(255,255,255,.85); }
.lightbox__close {
  position: absolute; top: 20px; right: var(--gutter); width: 48px; height: 48px;
  display: grid; place-items: center; font-size: 18px; color: var(--white);
  border: 1px solid rgba(255,255,255,.3); border-radius: 50%; transition: background .3s;
}
.lightbox__close:hover { background: rgba(255,255,255,.12); }

/* ---------- Volver al inicio ---------- */
.to-top {
  position: fixed; right: var(--gutter); bottom: 28px; z-index: 85;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--white);
  box-shadow: 0 14px 34px -12px rgba(var(--accent-rgb), .8);
  opacity: 0; visibility: hidden; translate: 0 16px;
  transition: opacity .4s var(--ease), visibility .4s, translate .4s var(--ease), background .3s, scale .25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.to-top:hover { background: #e0002d; translate: 0 -3px; }
.to-top:active { scale: .92; }
.to-top svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- Reseñas: cita bajo las tarjetas ---------- */
.clients__quote { position: relative; margin: clamp(48px, 6vw, 96px) auto 0; padding: 0 var(--gutter); max-width: 1100px; text-align: center; }
.clients__quote p { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 58px); line-height: 1.02; letter-spacing: -.045em; }
.clients__quote p::before, .clients__quote p::after { color: var(--accent); font-weight: 800; }
.clients__quote p::before { content: "“"; margin-right: .06em; }
.clients__quote p::after { content: "”"; margin-left: .04em; }
.clients__quote b { font-family: var(--font-script); font-weight: 400; font-size: 1.15em; letter-spacing: 0; color: var(--accent); }
.clients__quote strong { font-weight: 900; letter-spacing: -.03em; }
.clients__quote cite { display: block; margin-top: 20px; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .5; }

/* ---------- Plan bloqueado: Unlimited Pack ---------- */
.plan--locked { cursor: pointer; overflow: hidden; outline: none; min-height: 700px; }
.plan--locked::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
@media (hover: hover) { .plan--locked:hover::after, .plan--locked:focus-visible::after { opacity: 1; } }
.plan__price--inf span { font-weight: 800; font-size: clamp(60px, 6.2vw, 102px); line-height: .5; transform: translateY(.06em); letter-spacing: 0; }
.plan__price--inf small { white-space: nowrap; }
/* info confidencial: desenfoque analógico (rejilla LED + blur + glow), como "Sobre mí" */
.plan__secret {
  --pad: 30px; --fade: 26px;
  display: flex; flex-direction: column; gap: 18px; flex: 1; user-select: none; pointer-events: none;
  padding: var(--pad); margin: calc(var(--pad) * -1);
  filter: blur(4.2px); text-shadow: 0 0 14px rgba(255,255,255,.45);
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(0deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect;
}
.plan__secret .plan__list { margin-bottom: auto; }
.plan__lock { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; perspective: 900px; }
.plan__lockmove { transition: transform .8s var(--ease); }
.plan__lockstage { will-change: transform; }
/* candado rojo gigante, desenfocado "cerca de cámara", con rejilla LED y glow (como "Sobre mí") */
.plan__lockled, .plan__lockword {
  --pad: 70px; --fade: 60px;
  display: block; padding: var(--pad); margin: calc(var(--pad) * -1);
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(0deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect;
}
.plan__lockled svg { display: block; width: min(260px, 66vw); height: auto; fill: var(--accent);
  filter: blur(4.2px) brightness(1.15) drop-shadow(0 0 26px rgba(var(--accent-rgb), .9)) drop-shadow(0 0 80px rgba(var(--accent-rgb), .5)) drop-shadow(0 0 140px rgba(var(--accent-rgb), .25));
  transition: filter .6s var(--ease); animation: lockBlink 4.2s steps(1) infinite; }
@keyframes lockBlink { 0%, 100% { opacity: 1; } 18% { opacity: .78; } 19% { opacity: 1; } 52% { opacity: .62; } 53% { opacity: .95; } 55% { opacity: 1; } 83% { opacity: .85; } 84% { opacity: 1; } }
.plan__lockword {
  position: absolute; left: 50%; top: 50%; margin: 0; white-space: nowrap; text-align: center;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 3.6vw, 56px); line-height: .92; letter-spacing: -.04em;
  color: var(--accent); filter: blur(1.4px);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), .8), 0 0 50px rgba(var(--accent-rgb), .4);
  opacity: 0; transform: translate(-50%, 50px); transition: opacity .4s ease-out, transform .7s var(--ease);
}
.plan__lockword b { display: block; font-weight: 900; letter-spacing: -.02em; }
@media (hover: hover) {
  .plan--locked:hover .plan__lockmove, .plan--locked:focus-visible .plan__lockmove { transform: translateY(-80px) scale(.8); }
  .plan--locked:hover .plan__lockword, .plan--locked:focus-visible .plan__lockword { opacity: 1; transform: translate(-50%, 10px); animation: lockFlick 3s steps(1) infinite .4s; }
  .plan--locked:hover .plan__lockled svg { filter: blur(3.4px) brightness(1.25) drop-shadow(0 0 30px rgba(var(--accent-rgb), 1)) drop-shadow(0 0 90px rgba(var(--accent-rgb), .6)) drop-shadow(0 0 160px rgba(var(--accent-rgb), .3)); }
}
@media (hover: none) {
  .plan__lockmove { transform: translateY(-80px) scale(.8); }
  .plan__lockword { opacity: 1; transform: translate(-50%, 10px); }
}
@keyframes lockFlick { 0%, 100% { opacity: 1; } 22% { opacity: .6; } 23% { opacity: 1; } 61% { opacity: .4; } 62% { opacity: .95; } 64% { opacity: 1; } }

/* ---------- Popup del pack bloqueado ---------- */
.lockpop {
  position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 32px);
  width: min(820px, calc(100vw - 32px)); min-height: min(520px, calc(100dvh - 32px)); padding: clamp(72px, 9vw, 110px) clamp(28px, 6vw, 80px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border: 1px solid rgba(255,255,255,.08); border-radius: 26px; background: linear-gradient(180deg, #151515, #0e0e0e); color: var(--white);
  text-align: center; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .22), 0 60px 140px -40px rgba(var(--accent-rgb), .4);
  overflow: hidden;
  overscroll-behavior: contain;
}
.lockpop::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lockpop:not([open]) { display: none; }
.lockpop[open] { animation: lockFade .3s ease-out; }
.lockpop[open] > :not(.cursor) { animation: lockPopIn .6s var(--ease) backwards; }
.lockpop[open] > :nth-child(3) { animation-delay: .05s; } .lockpop[open] > :nth-child(4) { animation-delay: .1s; } .lockpop[open] > :nth-child(5) { animation-delay: .15s; }
.lockpop[open]::backdrop { animation: lockFade .4s ease-out; }
@keyframes lockPopIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes lockFade { from { opacity: 0; } }
.lockpop__x { position: absolute; top: 24px; right: 24px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: none; color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; transition: background .3s, border-color .3s; }
.lockpop__x:hover { background: var(--accent); border-color: var(--accent); }
.lockpop__sub { margin: 22px auto 0; max-width: 40ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; opacity: .75; }

/* popup: misma piel que la tarjeta del Unlimited Pack, con el candado rojo desenfocado de fondo */
.lockpop > :not(.cursor):not(.lockpop__x) { position: relative; z-index: 1; }
.lockpop__x { z-index: 2; }
/* alerta roja grande: mismo look que el candado / "Sobre mí" (rejilla LED + desenfoque + glow) */
.lockpop__alert, .lockpop__cta {
  --pad: 46px; --fade: 38px;
  display: block; padding: var(--pad); margin: calc(var(--pad) * -1);
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px),
    linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(0deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect;
  color: var(--accent); text-shadow: 0 0 18px rgba(var(--accent-rgb), .85), 0 0 50px rgba(var(--accent-rgb), .45);
}
.lockpop__alert {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 6.6vw, 80px); line-height: .86; letter-spacing: -.045em;
  filter: blur(2px); animation: lockBlink 4.6s steps(1) infinite;
}
.lockpop__alert span { display: block; white-space: nowrap; }
.lockpop[open] .lockpop__alert { animation: lockPopIn .6s var(--ease) backwards, lockBlink 4.6s steps(1) infinite .8s; }
.lockpop[open] .lockpop__cta { animation: lockPopIn .6s var(--ease) backwards .15s, lockBlink 3.4s steps(1) infinite 1.2s; }
/* botón tipo "rol" de Sobre mí: [ DESBLOQUEAR AHORA ] */
.lockpop__cta {
  width: fit-content; margin: calc(30px - var(--pad)) auto calc(var(--pad) * -1); cursor: pointer;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1; letter-spacing: -.03em;
  filter: blur(.9px); animation: lockBlink 3.4s steps(1) infinite .7s;
}
.lockpop__cta span { position: relative; display: inline-block; padding: .12em .5em; }
.lockpop__cta span::before, .lockpop__cta span::after { /* corchetes [ ] */
  content: ""; position: absolute; top: .02em; bottom: .02em; width: .28em; border: .09em solid currentColor;
}
.lockpop__cta span::before { left: 0; border-right: 0; }
.lockpop__cta span::after { right: 0; border-left: 0; }
.lockpop__cta:focus-visible { outline: none; }
.lockpop__cta:focus-visible span { text-decoration: underline; }

/* ---------- Popup: estética glitch / sistema roto ---------- */
.lockpop { background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    radial-gradient(120% 70% at 50% 120%, rgba(var(--accent-rgb), .22), transparent 60%),
    linear-gradient(180deg, #141414, #0b0b0b); }
.lockpop__hud { position: absolute !important; z-index: 2 !important; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38); animation: none !important; }
.lockpop__hud--tl { top: 30px; left: 34px; color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb), .6); }
.lockpop__hud--bl { bottom: 28px; left: 34px; }
.lockpop__hud--br { bottom: 28px; right: 34px; display: inline-flex; align-items: center; gap: 8px; }
.lockpop__hud--br i { width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: hudBlink 1s steps(1) infinite; }
@keyframes hudBlink { 50% { opacity: 0; } }
/* esquinas tipo visor */
.lockpop__corners { position: absolute !important; inset: 14px; z-index: 1 !important; pointer-events: none; animation: none !important;
  --c: rgba(var(--accent-rgb), .7);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 0 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px;
  background-repeat: no-repeat; }
.lockpop__x { top: 20px; right: 22px; }
/* alerta con separación RGB y cortes */
.lockpop__alert span { position: relative; }
.lockpop__alert span::before, .lockpop__alert span::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.lockpop__alert span::before { color: rgba(255,255,255,.75); text-shadow: none; mix-blend-mode: screen; animation: alertSliceA 2.8s steps(1) infinite; }
.lockpop__alert span::after { color: #00e1ff; opacity: .55; text-shadow: none; mix-blend-mode: screen; animation: alertSliceB 3.3s steps(1) infinite; }
@keyframes alertSliceA {
  0%, 100% { clip-path: inset(100% 0 0 0); translate: 0 0; }
  8% { clip-path: inset(18% 0 58% 0); translate: -7px 0; } 11% { clip-path: inset(62% 0 14% 0); translate: 5px 0; } 14% { clip-path: inset(100% 0 0 0); }
  57% { clip-path: inset(40% 0 44% 0); translate: 9px 0; } 60% { clip-path: inset(100% 0 0 0); }
}
@keyframes alertSliceB {
  0%, 100% { clip-path: inset(100% 0 0 0); translate: 0 0; }
  22% { clip-path: inset(70% 0 6% 0); translate: 6px 0; } 25% { clip-path: inset(8% 0 76% 0); translate: -5px 0; } 28% { clip-path: inset(100% 0 0 0); }
  79% { clip-path: inset(30% 0 50% 0); translate: -8px 0; } 82% { clip-path: inset(100% 0 0 0); }
}
/* bandas de interferencia y sacudida al abrir y de forma aleatoria */
.lockpop__bands { position: absolute !important; inset: 0; z-index: 3 !important; pointer-events: none; opacity: 0; animation: none; }
.lockpop.is-glitch .lockpop__bands { animation: glitchBands .42s steps(1) 1 !important; }

/* ---------- Unlimited Pack: botón rojo con candado gris ---------- */
.plan__lockbtn {
  position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto;
  padding: 15px 1.4em; border-radius: 999px; background: var(--accent); color: var(--white);
  font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), .7); transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.plan__lockbtn svg { width: 17px; height: auto; fill: var(--black); }
@media (hover: hover) { .plan--locked:hover .plan__lockbtn { background: #e0002d; box-shadow: 0 14px 40px -10px rgba(var(--accent-rgb), .9); } }
.plan--locked .plan__secret { flex: 0 0 auto; }
.plan__secret .plan__note { text-shadow: 0 0 14px rgba(var(--accent-rgb), .8), 0 0 30px rgba(var(--accent-rgb), .4); }
.plan__secret .plan__list li::before { box-shadow: 0 0 12px rgba(var(--accent-rgb), .8); }

/* ---------- Unlimited Pack: glitch / rotura ---------- */
.plan__glitch { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; border-radius: inherit; }
.plan--locked.is-glitch { animation: cardGlitch .42s steps(1) 1; }
.plan--locked.is-glitch .plan__glitch { animation: glitchBands .42s steps(1) 1; }
/* popup: sacudida más contenida que la de la tarjeta */
.lockpop.is-glitch { animation: popGlitch .3s steps(1) 1 !important; }
@keyframes popGlitch {
  0%, 100% { translate: 0 0; clip-path: inset(0 0 0 0 round 26px); }
  20% { translate: -2px 0; clip-path: inset(40% 0 44% 0); }
  40% { translate: 2px 0; clip-path: inset(0 0 0 0 round 26px); }
  60% { translate: -1px 0; clip-path: inset(68% 0 12% 0); }
}
@keyframes cardGlitch {
  0% { translate: 0 0; clip-path: inset(0 0 0 0 round 26px); }
  10% { translate: -6px 0; clip-path: inset(12% 0 64% 0); }
  20% { translate: 5px 1px; clip-path: inset(48% 0 30% 0); }
  30% { translate: -3px 0; clip-path: inset(0 0 0 0 round 26px); }
  45% { translate: 8px -1px; clip-path: inset(70% 0 8% 0); }
  55% { translate: -4px 0; clip-path: inset(30% 0 52% 0); }
  70% { translate: 2px 0; clip-path: inset(0 0 0 0 round 26px); }
  85% { translate: -2px 1px; clip-path: inset(0 0 0 0 round 26px); }
  100% { translate: 0 0; clip-path: inset(0 0 0 0 round 26px); }
}
@keyframes glitchBands {
  0%, 100% { opacity: 0; }
  10% { opacity: 1; background: linear-gradient(180deg, transparent 18%, rgba(var(--accent-rgb), .55) 18% 21%, transparent 21% 58%, rgba(255,255,255,.18) 58% 59%, transparent 59%); }
  20% { opacity: 1; background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,.22) 40% 42%, transparent 42% 74%, rgba(var(--accent-rgb), .5) 74% 78%, transparent 78%); }
  30% { opacity: 0; }
  45% { opacity: 1; background: linear-gradient(180deg, transparent 8%, rgba(var(--accent-rgb), .4) 8% 10%, transparent 10% 86%, rgba(255,255,255,.2) 86% 87%, transparent 87%); }
  55% { opacity: 1; background: linear-gradient(180deg, transparent 52%, rgba(var(--accent-rgb), .6) 52% 55%, transparent 55%); }
  70% { opacity: 0; }
}

/* CTA del popup: texto blanco con glow, corchetes en rojo */
.lockpop__cta { color: var(--white); text-shadow: 0 0 14px rgba(255,255,255,.55), 0 0 36px rgba(var(--accent-rgb), .45); }
.lockpop__cta span::before, .lockpop__cta span::after { border-color: var(--accent); filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .8)); }
/* cerrar: solo una X roja */
.lockpop__x { width: 40px; height: 40px; border: 0 !important; background: none !important; padding: 0; color: var(--accent); font-size: 34px; font-weight: 300; line-height: 1;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), .7); transition: transform .4s var(--ease), text-shadow .3s; }
.lockpop__x:hover { transform: rotate(90deg) scale(1.1); text-shadow: 0 0 18px rgba(var(--accent-rgb), 1); }

/* ---------- Feed del CTA: miniaturas "Más recientes" rotativas ---------- */
.mock__bar { position: relative; }
.mock__right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.mock__timer { display: inline-flex; align-items: center; gap: 10px; }
.mock__refresh {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--white);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background .3s, border-color .3s;
}
.mock__refresh svg { width: 14px; height: 14px; fill: currentColor; transition: transform .6s var(--ease); }
.mock__refresh:hover { background: var(--accent); border-color: var(--accent); }
/* área táctil de al menos 44px sin cambiar el tamaño visible */
.mock__refresh { position: relative; }
.mock__refresh::after { content: ""; position: absolute; inset: -12px; }
.mock__refresh:hover svg, .mock__refresh.is-spin svg { transform: rotate(-200deg); }
.mock__count { min-width: 3.2em; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.mock__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
/* "NUEVA": badge tipo notificación (rojo, grande, con punto que late) */
.perf--new {
  top: 10px; right: 10px; left: auto; bottom: auto; z-index: 4; /* misma esquina que el rendimiento de Trabajos */
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 11px; border-radius: 999px;
  background: var(--accent); color: var(--white); box-shadow: 0 6px 18px -4px rgba(var(--accent-rgb), .8), 0 0 0 2px rgba(255,255,255,.12);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(12px, 1vw, 14px); letter-spacing: .08em;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: newPop 3.2s var(--ease) infinite;
}
.perf--new::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--white); font-size: 0;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: newPing 1.6s ease-out infinite;
}
@keyframes newPing { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
@keyframes newPop { 0%, 86%, 100% { transform: scale(1); } 90% { transform: scale(1.12); } 94% { transform: scale(.97); } }
@media (max-width: 700px) { .perf--new { top: 7px; right: 7px; left: auto; padding: 5px 9px 5px 8px; font-size: 11px; gap: 5px; } .perf--new::before { width: 6px; height: 6px; } }
@media (prefers-reduced-motion: reduce) { .perf--new, .perf--new::before { animation: none; } }
.mock__av { background-size: cover; background-position: center; }
.mock__thumb img { transition: opacity .35s ease, filter .5s var(--ease), transform .9s var(--ease); }
.mock__thumb.is-swapping img { opacity: 0; filter: blur(8px); }
@media (max-width: 700px) {
  .mock__refresh span { display: none; }
  .mock__refresh { padding: 6px; }
  .mock__timer { gap: 6px; }
  .mock__right { gap: 8px; }
  .mock__count { min-width: 2.8em; font-size: 10px; }
}

/* ---------- Perfiles: foto de canal junto al nombre de cada miniatura ---------- */
.cap__av, .citem figcaption .cap__av { width: 22px; height: 22px; transform: none !important; display: block; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85), 0 2px 8px rgba(0,0,0,.4); }
.citem figcaption { gap: 7px; }
/* reseñas nuevas generadas: misma proporción que los recortes a mano */
.review__photo--auto img { aspect-ratio: 700 / 825; object-fit: cover; object-position: 50% 0; }

/* Header: transiciones completas (incluye el enfoque al reaparecer) */
.nav > .nav__logo, .nav > .nav__links { transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), filter .7s var(--ease), opacity .6s var(--ease); }
.nav > .nav__cta { transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), filter .7s var(--ease), opacity .6s var(--ease); }
.nav > .nav__burger { transition: filter .7s var(--ease), opacity .6s var(--ease); }

/* ---------- Cambio de página: las dos páginas se deslizan juntas (View Transitions entre documentos) ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; } /* la nav no viaja con la página: queda fija encima */
.cursor { view-transition-name: site-cursor; } /* el cursor tampoco viaja: sigue visible sobre la nav */
::view-transition-group(site-cursor) { animation: none; z-index: 100; }
::view-transition-old(site-cursor) { display: none; }
::view-transition-new(site-cursor) { animation: none; }
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav) { display: none; }
::view-transition-new(site-nav) { animation: none; }
::view-transition-group(root) { animation-duration: .95s; }
/* curva que arranca rápida: el movimiento empieza en cuanto el cursor toca la sección */
/* desenfoque analógico/digital durante el cambio:
   - la página que sale se desenfoca, se oscurece, toma la rejilla LED y su borde de unión se funde
   - la que entra llega desenfocada y su borde fundido se va abriendo hasta quedar nítida (sin saltos al terminar) */
::view-transition-old(root) { -webkit-mask-composite: source-in, source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat, repeat, repeat; mask-repeat: no-repeat, repeat, repeat; }
::view-transition-new(root) { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html:active-view-transition-type(fwd)::view-transition-old(root) {
  -webkit-mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,.75) 68%, rgba(0,0,0,.4) 82%, rgba(0,0,0,.12) 93%, transparent), repeating-linear-gradient(0deg, rgba(0,0,0,.88) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.88) 0 1px, #000 1px 4px); mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,.75) 68%, rgba(0,0,0,.4) 82%, rgba(0,0,0,.12) 93%, transparent), repeating-linear-gradient(0deg, rgba(0,0,0,.88) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.88) 0 1px, #000 1px 4px);
  -webkit-mask-position: left; mask-position: left; animation: vtOutL .95s cubic-bezier(.16, 1, .3, 1) both, vtEdgeIn .95s cubic-bezier(.16, 1, .3, 1) both;
}
html:active-view-transition-type(back)::view-transition-old(root) {
  -webkit-mask-image: linear-gradient(270deg, #000 55%, rgba(0,0,0,.75) 68%, rgba(0,0,0,.4) 82%, rgba(0,0,0,.12) 93%, transparent), repeating-linear-gradient(0deg, rgba(0,0,0,.88) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.88) 0 1px, #000 1px 4px); mask-image: linear-gradient(270deg, #000 55%, rgba(0,0,0,.75) 68%, rgba(0,0,0,.4) 82%, rgba(0,0,0,.12) 93%, transparent), repeating-linear-gradient(0deg, rgba(0,0,0,.88) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.88) 0 1px, #000 1px 4px);
  -webkit-mask-position: right; mask-position: right; animation: vtOutR .95s cubic-bezier(.16, 1, .3, 1) both, vtEdgeIn .95s cubic-bezier(.16, 1, .3, 1) both;
}
html:active-view-transition-type(fwd)::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(270deg, #000 55%, rgba(0,0,0,.75) 68%, rgba(0,0,0,.4) 82%, rgba(0,0,0,.12) 93%, transparent); mask-image: linear-gradient(270deg, #000 55%, rgba(0,0,0,.75) 68%, rgba(0,0,0,.4) 82%, rgba(0,0,0,.12) 93%, transparent);
  -webkit-mask-position: right; mask-position: right; animation: vtInR .95s cubic-bezier(.16, 1, .3, 1) both, vtEdgeOut .95s cubic-bezier(.16, 1, .3, 1) both;
}
html:active-view-transition-type(back)::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,.75) 68%, rgba(0,0,0,.4) 82%, rgba(0,0,0,.12) 93%, transparent); mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,.75) 68%, rgba(0,0,0,.4) 82%, rgba(0,0,0,.12) 93%, transparent);
  -webkit-mask-position: left; mask-position: left; animation: vtInL .95s cubic-bezier(.16, 1, .3, 1) both, vtEdgeOut .95s cubic-bezier(.16, 1, .3, 1) both;
}
/* las dos páginas se solapan un 15% en la zona difuminada: se funden como una sola imagen */
@keyframes vtOutL { 0% { filter: blur(0) brightness(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(-85%); filter: blur(14px) brightness(.6); opacity: 0; } }
@keyframes vtOutR { 0% { filter: blur(0) brightness(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(85%); filter: blur(14px) brightness(.6); opacity: 0; } }
@keyframes vtInR { 0% { transform: translateX(85%); filter: blur(14px) brightness(.6); } 100% { filter: blur(0) brightness(1); } }
@keyframes vtInL { 0% { transform: translateX(-85%); filter: blur(14px) brightness(.6); } 100% { filter: blur(0) brightness(1); } }
/* el degradado del borde aparece en la que sale y se abre en la que entra (sin salto al terminar) */
@keyframes vtEdgeIn { 0% { -webkit-mask-size: 190% 100%, auto, auto; mask-size: 190% 100%, auto, auto; } 100% { -webkit-mask-size: 100% 100%, auto, auto; mask-size: 100% 100%, auto, auto; } }
@keyframes vtEdgeOut { 0% { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } 100% { -webkit-mask-size: 190% 100%; mask-size: 190% 100%; } }
html.is-vt-in .loader { display: none; }
html.is-vt-in .nav { opacity: 1 !important; visibility: visible !important; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }

/* ---------- Respaldo sin View Transitions: entrada deslizada (nav) ---------- */
/* la página nace fuera de pantalla (antes de que cargue el JS); la nav queda visible encima */
html.is-sweep-in main, html.is-sweep-in .footer { transform: translateX(calc(var(--sweepd, 1) * 100vw)); }
html.is-sweep-in .loader { display: none; }
html.is-sweep-in .nav { opacity: 1 !important; visibility: visible !important; }
/* la barra de la nav toma el color de la sección bajo el cursor */
.nav__links:hover, .nav__links.is-hover { background: var(--navc, var(--accent)); border-color: var(--navc, var(--accent)); color: var(--navi, var(--white)); }
/* tras cambiar de página el ratón aún no se ha movido: el estado hover se conserva hasta retirar el cursor
   (html[data-hov] lo aplica desde el primer pintado, antes del JS) */
html[data-hov] .nav__links { background: var(--hovc); border-color: var(--hovc); color: var(--hovi); transition: none; }
html[data-hov="Miniaturas"] .nav__links a[data-text="Miniaturas"],
html[data-hov="Digital Products"] .nav__links a[data-text="Digital Products"],
html[data-hov="Music"] .nav__links a[data-text="Music"] { font-weight: 900; opacity: 1; }
.nav__links.is-hover { transition: none; }

/* ---------- Portadas: barra en el borde que previsualiza la página siguiente/anterior ---------- */
.edgepeek {
  position: fixed; top: 0; bottom: 0; z-index: 70; width: 124px; overflow: hidden; color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  opacity: calc(var(--ep, 0) * 1.6); pointer-events: none; cursor: pointer;
}
.edgepeek.is-on { pointer-events: auto; }
.edgepeek--r { right: 0; }
.edgepeek--l { left: 0; }
.edgepeek::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--edir), rgba(10,10,10,.82) 20%, rgba(10,10,10,.4) 60%, transparent); } /* separa la barra del contenido de la portada */
/* imagen de la otra página: desenfocada, con rejilla LED y desvanecida hacia dentro */
.edgepeek__img {
  position: absolute; inset: 0; background: center / cover no-repeat;
  filter: grayscale(.4) blur(6px) brightness(.85);
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.6) 0 1px, #000 1px 4px), linear-gradient(var(--edir), #000 10%, rgba(0,0,0,.55) 55%, transparent);
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect;
}
.edgepeek--r { --edir: 270deg; } .edgepeek--l { --edir: 90deg; }
.edgepeek__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--edir), color-mix(in srgb, var(--ec) 45%, transparent), transparent 80%); mix-blend-mode: screen; }
.edgepeek__txt { position: relative; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; gap: 12px; line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.edgepeek--r .edgepeek__txt { transform: translateX(.3em); } /* centra la tinta (mayúsculas sin descendentes) con la flecha */
.edgepeek--l .edgepeek__txt { transform: rotate(180deg) translateX(.3em); }
.edgepeek__txt small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ec); }
.edgepeek__txt b { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.edgepeek__arrow {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ec); color: #0a0a0a; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ec) 25%, transparent), 0 8px 24px -6px color-mix(in srgb, var(--ec) 70%, transparent);
  transition: transform .5s var(--ease);
}
.edgepeek[style*="#FF0033"] .edgepeek__arrow { color: var(--white); }
.edgepeek__arrow svg { width: 18px; height: 18px; fill: currentColor; }
.edgepeek--r .edgepeek__arrow { animation: epNudgeR 1.6s var(--ease) infinite; }
.edgepeek--l .edgepeek__arrow { animation: epNudgeL 1.6s var(--ease) infinite; }
.edgepeek:hover .edgepeek__arrow { transform: scale(1.12); }
@keyframes epNudgeR { 0%, 100% { translate: 0 0; } 50% { translate: 6px 0; } }
@keyframes epNudgeL { 0%, 100% { translate: 0 0; } 50% { translate: -6px 0; } }
.edgepeek { view-transition-name: none; }
@media (max-width: 1024px) { .edgepeek { display: none; } }

/* accesibilidad + batería: con "reducir movimiento" se detienen las animaciones decorativas en bucle */
@media (prefers-reduced-motion: reduce) {
  .grain, .dot, .scrollcue i::after, .edgepeek__arrow, .loader__boot.is-on img { animation: none !important; }
}

/* Revisión final · táctil: los enlaces del pie con altura cómoda para el dedo (44 px) en pantallas táctiles */
@media (hover: none), (max-width: 700px) { .footer__link { min-height: 44px; align-items: center; padding: 8px 0; } }

/* Rendimiento: mientras la página se desplaza, nada reacciona al cursor (los elementos que pasan por debajo del cursor
   quieto encendían sus efectos de hover uno tras otro). Se reactiva al parar (JS: html.is-scrolling, 140 ms). */
html.is-scrolling main, html.is-scrolling .footer { pointer-events: none; }

/* Rendimiento (Sobre mí): ningún desenfoque vive en una capa que se mueve sin parar.
   · Textos: la capa (h2/p) tiembla y sube con el scroll; el desenfoque va en su hijo .fx (y en los cortes del glitch).
   · Foto principal: el zoom con el scroll lo hace .gframe__zoom (capa); la imagen con desenfoque y máscara va dentro. */
.about__txt > * { filter: none; }
.about__txt > * > .fx { filter: blur(var(--tblur, 2px)); }
.about__txt .glitch-txt > .fx { display: inline-block; }
.about__txt .glitch-txt::before, .about__txt .glitch-txt::after { filter: blur(var(--tblur, 2px)); }
.about__txt .glitch-txt::before { filter: blur(var(--tblur, 2px)) brightness(1.3); }
.gframe__zoom { position: relative; z-index: 0; display: block; width: 100%; height: 100%; will-change: transform; }

/* Rendimiento (portada): el nombre y las firmas suben / se separan con el scroll → capa propia (solo transform).
   El desenfoque y la máscara LED de las firmas van en su hijo .fx (se pintan dentro de la capa, no por la GPU). */
.hero__name { will-change: transform; }
.hero__script { will-change: transform; padding: 0; filter: none; -webkit-mask-image: none; mask-image: none; }
.hero__script > .fx { display: inline-block; padding: .45em .3em; filter: blur(calc(var(--hb, 0px) * .5));
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,var(--ga, 1)) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,var(--ga, 1)) 0 1px, #000 1px 4px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }

/* Título de la portada: capa nítida + capa desenfocada (ya pintadas) que se funden con el scroll (JS). Las dos capas
   comparten celda de rejilla; ninguna usa variables que cambien al hacer scroll (no se repintan). */
.hero__lockup { display: inline-grid; grid-template-columns: 100%; }
.hero__scripts { grid-row: 1; grid-column: 1; }
.hero__wordwrap { grid-row: 2; grid-column: 1; display: flex; justify-content: center; will-change: opacity; }
.hero__wordwrap .hero__word { --ga: 1; --hg: 0; filter: none; }
.hero__wordwrap--blur { opacity: 0; pointer-events: none; }
.hero__wordwrap--blur .hero__word { --ga: .35; filter: blur(11px); text-shadow: 0 0 40px rgba(255,255,255,.55); }