/* La portada de cutfish.app. Va después de styles.css y cambia solo lo de la portada: la app
   (clip.cutfish.app) no carga este archivo.

   Lectura de diseño (DESIGN.md): herramienta pro, profesional y directa, diales ENERGY 2 /
   RHYTHM 2 / MOTION 1. La referencia del dueño es la página de Apple: todo centrado, pocas
   palabras, bloques grandes y el producto a la vista.
   - Fondo azul oscuro y paneles de precios: los de siempre, son del dueño.
   - El producto se muestra con capturas reales de la app, con el encuadre que arma el dueño.
   - Títulos en Inter Tight 700, tipo Apple (la "C" que eligió el dueño), en minúscula normal:
     se leen como una frase. Archivo Black (la del logo) queda solo en los paneles de precios.
   - Nada se mueve al cargar: lo único que se mueve es el giro de los precios, que responde a
     un botón. */

.portada-sola { --letra-titulos: 'Fjalla One', 'Impact', 'Arial Narrow', sans-serif; }

/* ---------- Barra ---------- */

.portada-sola .landing-nav {
  /* Marca a la izquierda, secciones al centro, entrar a la derecha. */
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  /* Sin desenfoque en vivo: el color casi opaco alcanza para leer encima del fondo. */
  background: rgba(3, 10, 31, .94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.portada-sola .landing-links { gap: 30px; }
.portada-sola .landing-links a { font-size: 14px; }

/* Saltar al contenido: invisible hasta que llega el foco del teclado. */
.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 5;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: #0a1020;
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }
#main:focus { outline: none; }

/* ---------- Arriba de todo ---------- */

.portada-sola .landing-hero {
  min-height: auto;
  gap: 56px;
  padding: clamp(56px, 9vh, 104px) 16px 24px;
}
/* El título en dos líneas en pantallas grandes: la caja de styles.css (720 px) lo partía en tres. */
.portada-sola .landing-centro { width: min(1000px, 100%); gap: 0; }
/* Sin la entrada en escalera: el mensaje está desde el primer cuadro. */
/* !important: styles.css tiene una variante para "reducir movimiento" (solo-aparecer) más
   específica que esta regla, y la portada no se mueve en ningún caso. */
.portada-sola .landing-centro > *,
.portada-sola .demo { animation: none !important; }

.portada-sola .landing-titulo {
  max-width: none;
  margin: 0;
  font-family: var(--letra-titulos);
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.07;
  letter-spacing: -.02em;
  color: #fff;
}
.portada-sola .landing-titulo br { display: inline; }
.portada-sola .landing-sub { max-width: 30ch; text-wrap: balance; margin: 18px 0 30px; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; }
.portada-sola .landing-nota { margin-top: 18px; font-size: 13px; }
.portada-sola .landing-nota a { color: var(--text-dim); }

/* El botón de Google y, al lado, un enlace simple: una sola acción fuerte por pantalla. */
.acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.enlace {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.enlace:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Capturas de la app ---------- */
/* El producto de verdad es el punto focal: marco fino, esquinas suaves y una sombra honda que lo
   separa del fondo. */
.captura {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0a1128;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85);
}
.captura img { display: block; width: 100%; height: auto; }
.captura picture { display: block; }
.captura-hero { width: min(1200px, 100%); }

/* ---------- La baldosa ---------- */

.mosaico {
  width: min(1200px, calc(100% - 32px));
  margin: 96px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.baldosa {
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 64px 24px 56px;
  border-radius: 28px;
  background: linear-gradient(180deg, #0d1838 0%, #081128 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
}
.baldosa h2 {
  margin: 0;
  font-family: var(--letra-titulos);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-transform: none;
  text-wrap: balance;
}
.baldosa > p { text-wrap: balance; margin: 12px 0 40px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.4; color: var(--text-dim); }

/* Un teléfono sin dibujar el teléfono: la pantalla 9:16 con un borde negro fino. */
.telefono {
  position: relative;
  width: min(320px, 80%);
  margin: 0;
  padding: 7px;
  border-radius: 38px;
  background: #02050f;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .9);
}
.telefono img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 31px;
  background: #000;
}


/* ---------- Secciones ---------- */

.portada-sola .landing-seccion { width: min(1040px, 100%); padding: 120px 20px 24px; }
.portada-sola .landing-seccion h2 {
  max-width: 24ch;
  margin: 0 auto 40px;
  font-family: var(--letra-titulos);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}

/* Cómo funciona: la línea de tiempo de un VOD con cuatro paradas. Mientras bajás, una línea
   verde avanza sobre la gris y el punto verde pasa de un paso al siguiente (portada.js pone
   --relleno y las clases hecho / actual). */
.recorrido {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.recorrido::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
}
.recorrido li { position: relative; }
.recorrido li::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0b1633;
  border: 3px solid rgba(255, 255, 255, .5);
  z-index: 1;
  transition: background-color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
/* La línea verde del avance, encima de la gris y debajo de los puntos. */
.recorrido::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: var(--relleno, 0px);
  height: 3px;
  border-radius: 2px;
  background: #53fc18;
  box-shadow: 0 0 10px rgba(83, 252, 24, .55);
  transition: width .3s var(--ease);
}
/* Los pasos que ya pasaste: punto verde lleno. El paso en el que estás: anillo verde que brilla. */
/* .portada-sola adelante: le tiene que ganar al fondo oscuro de los puntos del tema verde. */
.portada-sola .recorrido li.hecho::before { background: #53fc18; border-color: #53fc18; }
.portada-sola .recorrido li.actual::before {
  background: #07120a;
  border-color: #53fc18;
  box-shadow: 0 0 0 5px rgba(83, 252, 24, .16), 0 0 16px rgba(83, 252, 24, .7);
  transform: scale(1.3);
}
.recorrido.con-avance::before { right: auto; width: var(--pista, 100%); }
/* Los que faltan, apagados (solo si el avance anda: sin JavaScript se ven todos). */
.recorrido.con-avance li { transition: opacity .35s; }
.recorrido.con-avance li:not(.hecho):not(.actual) { opacity: .4; }
.recorrido strong { display: block; margin-bottom: 6px; font-size: 17px; color: #fff; }
.recorrido p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-dim); }

/* Quién lo hizo: una frase grande y centrada, sin adornos. */
.historia p {
  max-width: 40ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.5;
  color: var(--text-dim);
  text-wrap: pretty;
}
.historia p strong { color: #fff; font-weight: 700; }

/* Planes: los paneles son los de siempre; acá solo el texto de arriba, centrado. */
.portada-sola .planes-intro { margin: -24px auto 30px; text-align: center; font-size: 16px; }

/* Planes con cobro (moneda, período, Suscribirme): en styles.css, compartido con la entrada del portal. */

/* Preguntas: respuestas cortas, a lo ancho de lectura y al centro. */
.portada-sola .faq { max-width: 760px; margin: 0 auto; }
.portada-sola .faq summary { font-size: 15px; }
.portada-sola .faq p { font-size: 14px; }

/* Cierre: la misma puerta de entrada, para quien llegó hasta abajo. */
.cierre { display: grid; justify-items: center; text-align: center; }
.portada-sola .cierre h2 { margin-bottom: 28px; }
.cierre .btn.google { min-width: 240px; padding: 13px 26px; font-size: 15px; }

/* Pie */
.portada-sola .landing-pie { margin-top: 96px; font-size: 13px; }
.portada-sola .landing-pie a { color: var(--text-dim); }

/* ---------- Celular ---------- */

@media (max-width: 860px) {
  .recorrido { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .recorrido::before, .recorrido::after { display: none; }
  .recorrido li { padding-top: 26px; border-top: 3px solid rgba(255, 255, 255, .14); }
  .recorrido li::before { top: -9px; }
  /* En el celular cada paso tiene su rayita: se pone verde cuando llegás a ese paso. */
  .recorrido.con-avance li { transition: opacity .35s, border-color .35s; }
  .recorrido li.hecho, .recorrido li.actual { border-top-color: #53fc18; }
}
@media (max-width: 760px) {
  .mosaico { margin-top: 64px; }
  .baldosa { padding: 48px 20px 44px; }
  .portada-sola .landing-seccion { padding-top: 88px; }
}
@media (max-width: 720px) {
  .portada-sola .landing-nav { grid-template-columns: 1fr auto; }
}
@media (max-width: 520px) {
  .recorrido { grid-template-columns: 1fr; row-gap: 32px; }
  .recorrido { width: fit-content; max-width: 100%; margin: 0 auto; }
}

/* ---------- Tamaño para el dedo (44 px) ---------- */
/* Se agranda lo que se toca sin cambiar cómo se ve: padding con margen negativo en los textos. */
.portada-sola .landing-entrar { min-height: 44px; display: inline-flex; align-items: center; }
.portada-sola .periodo button { min-height: 44px; }
.portada-sola .landing-marca { padding: 10px 0; margin: -10px 0; }
.portada-sola .plan-desglose summary { padding: 13px 0; margin: -13px 0; }
.portada-sola .landing-pie a,
.portada-sola .landing-nota a { display: inline-block; padding: 13px 2px; margin: -13px 0; }

/* ---------- arriba de todo a dos columnas ---------- */
/* Con el estilo de las referencias del dueño (IRL Control, Paradise): el mensaje a la izquierda,
   el editor a la derecha en perspectiva con un canto rosa, una palabra resaltada en un bloque y
   una grilla fina de fondo. Nada se mueve. */
.portada-sola .hero-dos {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* En pantallas muy altas no se estira de más: así asoma lo que sigue. */
  min-height: min(calc(100vh - 57px), 900px);
  min-height: min(calc(100dvh - 57px), 900px);
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  align-items: center;
  align-content: center;
  justify-items: stretch;
  gap: clamp(32px, 5vw, 80px);
  padding: 48px max(clamp(20px, 4vw, 56px), calc((100% - 1600px) / 2)) 72px;
}
/* La grilla: líneas finas que se apagan hacia los bordes. */
.hero-dos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 88px 88px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 50% 45%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 70% at 50% 45%, #000 25%, transparent 78%);
}
.hero-dos .hero-texto { width: auto; justify-items: start; text-align: left; }
.portada-sola .hero-dos .landing-titulo { font-size: clamp(40px, 4.2vw, 88px); }
.hero-dos .acciones { justify-content: flex-start; }
/* La palabra resaltada, en un bloque verde Kick con letra oscura (como el de Paradise Dev). */
.landing-titulo mark {
  padding: 0 .12em .03em;
  border-radius: .1em;
  background: #53fc18;
  color: #07120a;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Se escribe sola: VOD, VIDEO, VOD… con el cursor titilando al final (portada.js). */
.tipeo-palabra::after {
  content: "";
  display: inline-block;
  width: .06em;
  height: .8em;
  margin-left: .05em;
  vertical-align: -.04em;
  background: currentColor;
  animation: tipeo-cursor 1s steps(1) infinite;
}
@keyframes tipeo-cursor { 50% { opacity: 0; } }
/* El segundo botón, con borde, como en las referencias. */
.hero-dos .enlace {
  min-height: 48px;
  padding: 0 22px 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
}
.hero-dos .enlace:hover { text-decoration: none; border-color: rgba(255, 255, 255, .65); }
/* El editor en perspectiva, con un canto de color que le da cuerpo. La caja inclinada lleva
   adentro la captura y los garabatos, así se inclinan juntos. */
.hero-visual { perspective: 1800px; }
.pantalla-3d {
  position: relative;
  transform: rotateY(-14deg) rotateX(5deg) rotateZ(-.6deg);
  transform-origin: 30% 50%;
}
.pantalla-3d > .captura { box-shadow: 16px 16px 0 -1px var(--pink), 0 60px 110px -40px rgba(0, 0, 0, .95); }
.portada-sola .hero-dos .captura-hero { width: 100%; }

@media (max-width: 900px) {
  .portada-sola .hero-dos { grid-template-columns: 1fr; min-height: auto; padding-top: 56px; gap: 48px; }
  .pantalla-3d { transform: rotateY(-8deg) rotateX(4deg); }
  .pantalla-3d > .captura { box-shadow: 10px 10px 0 -1px var(--pink), 0 40px 80px -30px rgba(0, 0, 0, .95); }
}

/* ---------- la página en verde, tipo Kick ---------- */
/* Negro con un tinte verde y el verde de Kick como acento. Los celestes y violetas de los
   degradados pasan a verde y verde agua; el dorado del PRO queda como está. */
body.tema-verde {
  --bg: #050b07;
  --pink: #53fc18;
  --cyan: #53fc18;
  --violet: #1eff9a;
  --scene:
    radial-gradient(40rem 34rem at 12% 8%, rgba(34, 197, 94, .2), transparent 62%),
    radial-gradient(36rem 32rem at 88% 12%, rgba(83, 252, 24, .1), transparent 60%),
    radial-gradient(44rem 38rem at 50% 100%, rgba(16, 185, 129, .16), transparent 64%),
    radial-gradient(30rem 28rem at 95% 85%, rgba(21, 128, 61, .18), transparent 60%),
    linear-gradient(180deg, #050d08, #010402);
}
.tema-verde .portada-sola .landing-nav,
body.tema-verde .landing-nav { background: rgba(5, 11, 7, .94); }
.tema-verde .baldosa { background: linear-gradient(180deg, #0c1a10 0%, #07100a 100%); }
.tema-verde .captura { background: #08120b; }
.tema-verde .recorrido li::before { background: #0b160e; }
.tema-verde .plan.destacado {
  background: linear-gradient(170deg, rgba(83, 252, 24, .12), rgba(30, 255, 154, .05));
  border-color: rgba(83, 252, 24, .35);
  box-shadow: 0 24px 50px -30px rgba(83, 252, 24, .45);
}
.tema-verde .planes.con-activa .plan.destacado.activa { box-shadow: 0 34px 70px -30px rgba(83, 252, 24, .45); }
.tema-verde .faq details[open] { border-color: rgba(83, 252, 24, .35); }
/* Sobre verde, la letra de los botones y chapas que antes iba sobre celeste queda oscura. */
.tema-verde .periodo button i,
.tema-verde .plan-chapa:not(.dorada) { color: #07120a; }
/* Suscribirme del Medio: texto oscuro sobre el verde, como la chapa (y como en la entrada del portal). */
.tema-verde #planes .plan.destacado .plan-suscribir { color: #07120a; }

/* ---------- títulos en mayúsculas, con la letra de Paradise (body.titulos-caps) ---------- */
/* Fjalla One: angosta y en mayúsculas, más divertida y amigable. Solo tiene un grosor. */
body.titulos-caps { --letra-titulos: 'Fjalla One', 'Impact', 'Arial Narrow', sans-serif; }
.titulos-caps .landing-titulo,
.titulos-caps.portada-sola .landing-seccion h2,
.titulos-caps .baldosa h2 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.04;
}
.titulos-caps.portada-sola .hero-dos .landing-titulo { font-size: clamp(52px, 6.2vw, 112px); }
.titulos-caps.portada-sola .landing-seccion h2 { font-size: clamp(32px, 4vw, 54px); }
.titulos-caps .baldosa h2 { font-size: clamp(32px, 3.4vw, 48px); }
/* El saludo de arriba, chico y en mayúsculas, como el "HOLA MUNDO" de Paradise. */
.hero-saludo {
  margin: 0 0 10px;
  font-family: var(--letra-titulos);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
/* La palabra verde, sola en su renglón: se escribe y se borra sin mover nada de lo de arriba. */
.titulos-caps .landing-titulo mark { padding: .02em .1em 0; border-radius: .06em; }

/* ---------- resaltados verdes con glitch en los títulos ---------- */
/* El mismo bloque verde del título de arriba, en una palabra por título. Cuando el título aparece
   en pantalla hace un glitch corto, y después, cada tanto, otro (portada.js). */
mark.resaltado {
  display: inline-block;
  padding: .04em .12em 0;
  border-radius: .06em;
  background: #53fc18;
  color: #07120a;
  line-height: 1;
}

/* ---------- la cinta de streamers ---------- */
/* Pastillas que pasan de derecha a izquierda, sin fin. Se frena con el mouse encima (o con el
   foco del teclado); con "reducir movimiento" va más lenta. portada.js repite las pastillas
   hasta llenar dos anchos de pantalla: la animación corre medio recorrido y vuelve. */
.portada-sola .landing-seccion.streamers { width: 100%; max-width: none; padding-inline: 0; }
.streamers h2 { padding-inline: 20px; }
.cinta {
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cinta-pista {
  display: flex;
  gap: 14px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cinta.andando .cinta-pista { animation: cinta var(--cinta-duracion, 30s) linear infinite; }
.cinta.andando:hover .cinta-pista,
.cinta.andando:focus-within .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }
.cinta:not(.andando) .cinta-pista { margin-inline: auto; }
.streamer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 20px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.streamer:hover { border-color: rgba(83, 252, 24, .45); }
.streamer-foto { position: relative; flex: none; }
.streamer-foto img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
/* El distintivo de Kick en la esquina de la foto. */
.streamer-kick {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #53fc18;
  border: 2px solid #07120a;
}
.streamer-datos { display: grid; gap: 2px; text-align: left; }
.streamer-nombre { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; }
.streamer-seguidores { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }

/* El saludo cambia de palabra con un glitch: streamer, editor, clipero (portada.js). */
.saludo-palabra { display: inline-block; }

/* ---------- El glitch (la palabra que se escribe, el saludo y los resaltados) ---------- */
/* La palabra queda entera. Dos copias suyas (::before y ::after, con el texto de data-text) se
   ven solo en franjas finas que saltan de costado, una con borde rosa y otra celeste, a los
   tirones (steps). Dentro del bloque verde, las copias llevan el mismo verde: la franja corrida
   tapa lo de abajo, como una imagen que se descompone. La clase .glitch la pone portada.js. */
.glitchable { position: relative; display: inline-block; }
.glitchable::before,
.glitchable::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
mark .glitchable::before,
mark .glitchable::after { background: #53fc18; }
.glitch > .glitchable,
.glitchable.glitch { animation: glitch-rgb .45s steps(1, end) 1; }
.glitch > .glitchable::before,
.glitchable.glitch::before { text-shadow: -2px 0 #ff2bd6; animation: glitch-franja-a .45s steps(1, end) 1; }
.glitch > .glitchable::after,
.glitchable.glitch::after { text-shadow: 2px 0 #25f4ee; animation: glitch-franja-b .45s steps(1, end) 1; }
@keyframes glitch-rgb {
  0%, 30%, 60% { text-shadow: 2px 0 #ff2bd6, -2px 0 #25f4ee; }
  15%, 45%, 75% { text-shadow: -2px 0 #ff2bd6, 2px 0 #25f4ee; }
  90%, 100% { text-shadow: none; }
}
@keyframes glitch-franja-a {
  0% { opacity: 1; clip-path: inset(8% 0 72% 0); transform: translateX(-6px); }
  15% { opacity: 1; clip-path: inset(62% 0 18% 0); transform: translateX(5px); }
  30% { opacity: 1; clip-path: inset(35% 0 45% 0); transform: translateX(-4px); }
  45% { opacity: 1; clip-path: inset(80% 0 4% 0); transform: translateX(7px); }
  60% { opacity: 1; clip-path: inset(20% 0 64% 0); transform: translateX(-5px); }
  75% { opacity: 1; clip-path: inset(50% 0 30% 0); transform: translateX(3px); }
  90%, 100% { opacity: 0; }
}
@keyframes glitch-franja-b {
  0% { opacity: 1; clip-path: inset(70% 0 12% 0); transform: translateX(5px); }
  15% { opacity: 1; clip-path: inset(15% 0 70% 0); transform: translateX(-7px); }
  30% { opacity: 1; clip-path: inset(48% 0 34% 0); transform: translateX(4px); }
  45% { opacity: 1; clip-path: inset(4% 0 82% 0); transform: translateX(-3px); }
  60% { opacity: 1; clip-path: inset(58% 0 26% 0); transform: translateX(6px); }
  75% { opacity: 1; clip-path: inset(30% 0 55% 0); transform: translateX(-4px); }
  90%, 100% { opacity: 0; }
}
/* El golpe eléctrico de televisor viejo (CRT): el bloque tiembla de costado, parpadea y se le ven
   las rayas de la pantalla, sin cambiar nunca de tamaño. Las rayas están solo durante el golpe. */
.tipeo-palabra { display: inline-block; }
mark.glitch { animation: glitch-crt .45s steps(1, end) 1; }
.glitchable.glitch { animation: glitch-rgb .45s steps(1, end) 1, glitch-crt .45s steps(1, end) 1; }
@keyframes glitch-crt {
  0% { transform: translateX(2px); filter: brightness(1.35) contrast(1.2); background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .24) 0 2px, transparent 2px 4px); }
  15% { transform: translateX(-3px); filter: brightness(.85); background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); }
  30% { transform: translateX(1px) skewX(-4deg); filter: brightness(1.4) saturate(1.3); background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .24) 0 2px, transparent 2px 4px); }
  45% { transform: translateX(-2px); filter: brightness(1); background-image: none; }
  60% { transform: translateX(3px) skewX(3deg); filter: brightness(1.3); background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
  75% { transform: translateX(-1px); filter: brightness(.9); background-image: none; }
  90%, 100% { transform: none; filter: none; background-image: none; }
}
/* Con "reducir animaciones" (Windows, celulares) no hay temblor ni franjas que salten: queda solo
   el parpadeo de colores. Así lo ve todo el mundo, sin movimiento para quien lo pidió. */
@media (prefers-reduced-motion: reduce) {
  mark.glitch { animation: none; }
  .glitchable.glitch { animation: glitch-rgb .45s steps(1, end) 1; }
  .glitch > .glitchable::before,
  .glitch > .glitchable::after,
  .glitchable.glitch::before,
  .glitchable.glitch::after { animation: none; }
}

/* ---------- garabatos tipo WigglyPaint en el fondo ---------- */
/* Palabras y dibujitos en verde, con letra de marcador, detrás del contenido. Tiemblan como un
   dibujo animado a mano: portada.js les cambia el filtro de ruido (tres cuadros) varias veces por
   segundo. Nunca tapan texto ni botones: van en los huecos, y en el celular quedan menos. */
.temblor-filtros { position: absolute; width: 0; height: 0; overflow: hidden; }
.garabatos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-dos > .landing-centro,
.hero-dos > .hero-visual,
.streamers > h2,
.streamers > .cinta,
.cierre > * { position: relative; z-index: 1; }
.streamers, .cierre { position: relative; }
.garabato {
  position: absolute;
  overflow: visible;
  color: #53fc18;
  opacity: .5;
  font-family: 'Permanent Marker', 'Comic Sans MS', cursive;
  /* El temblor (portada.js cambia --temblor entre tres cuadros) y un halo de neón del mismo color. */
  filter: var(--temblor, url(#temblor-0)) drop-shadow(0 0 5px currentColor);
}
/* Los colores de neón, elegidos por el dueño: el rosa, el verde de Kick, el rojo de YouTube y el
   naranja de Instagram. Lo que no lleva clase de color queda en el verde de Kick. */
.neon-verde { color: #53fc18; }
.neon-rosa { color: #ff3fd4; }
.neon-rojo { color: #ff0033; }
.neon-naranja { color: #f77737; }
.g-clip { width: 200px; top: 6%; right: 8%; transform: rotate(-9deg); opacity: .6; }
.g-estrella { width: 46px; top: 5%; right: 3%; transform: rotate(12deg); }
.g-stream { width: 260px; bottom: 4%; right: 12%; transform: rotate(4deg); opacity: .42; }
.g-video { width: 190px; bottom: 6%; left: 4%; transform: rotate(-6deg); opacity: .38; }
/* Hasta 1599 px el texto de la izquierda llega al fondo y "VIDEO" quedaba detrás de "Acceso
   con invitación…": va a su derecha, más chico (su renglón termina a 4vw + 315 px). Más angosto no hay
   lugar entre ese renglón y el pez, y se va. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .g-video { width: 150px; left: calc(min(4vw, 56px) + 340px); bottom: 3%; }
}
@media (min-width: 901px) and (max-width: 1199px) { .g-video { display: none; } }
.g-vod { width: 170px; top: 22%; left: 6%; transform: rotate(-12deg); }
.g-chispas { width: 54px; top: 18%; right: 9%; transform: rotate(8deg); }
/* "¡Este es el lugar!" va a la izquierda del botón de Google, con la flecha apuntándolo. */
.cierre-boton { position: relative; }
.cierre-boton .garabatos { inset: auto; top: 0; right: 0; bottom: 0; left: 0; }
.g-lugar { width: 330px; top: -46px; right: calc(100% + 96px); transform: rotate(-6deg); opacity: .7; }
.g-flecha { width: 96px; top: -26px; right: calc(100% + 8px); transform: rotate(4deg); opacity: .7; }
@media (max-width: 900px) {
  .g-stream, .g-video, .g-chispas, .g-flecha { display: none; }
  .g-clip { width: 100px; top: 26px; right: 30px; opacity: .5; }
  .g-estrella { width: 26px; top: 10px; right: 10px; }
  .g-vod { width: 110px; top: 4%; left: 4%; }
  .g-lugar { width: 240px; top: -64px; right: auto; left: calc(50% - 120px); transform: rotate(-4deg); }
}

/* Garabatos encima del editor: el contorno lo rodea un poco más afuera, la carita asoma por la
   esquina de arriba a la izquierda y "SUPER FÁCIL" va en el medio, sobre el video. */
.garabatos-editor { z-index: 2; }
.g-contorno { top: -16px; left: -14px; width: calc(100% + 32px); height: calc(100% + 38px); opacity: .85; }
.g-cara { width: 84px; top: -58px; left: -46px; transform: rotate(-12deg); opacity: .9; }
/* "SUPER FÁCIL" no está hasta que pasás el mouse por el editor (en el celular, hasta que el
   editor entra en pantalla): ahí aparece con un glitch, y al sacar el mouse se va (portada.js). */
.g-facil { width: 44%; top: 30%; left: 20%; transform: rotate(-7deg); opacity: 0; transition: opacity .15s; }
.pantalla-3d.ver-facil .g-facil { opacity: 1; animation: facil-aparece .55s steps(1, end) 1; }
@keyframes facil-aparece {
  0% { opacity: 1; transform: rotate(-7deg) translateX(-10px); clip-path: inset(0 0 62% 0); filter: drop-shadow(4px 0 #ff2bd6) drop-shadow(-4px 0 #25f4ee); }
  12% { opacity: .15; }
  24% { opacity: 1; transform: rotate(-7deg) translateX(8px); clip-path: inset(45% 0 0 0); filter: drop-shadow(-4px 0 #ff2bd6) drop-shadow(4px 0 #25f4ee); }
  36% { opacity: 0; }
  48% { opacity: 1; transform: rotate(-7deg) translateX(-4px) skewX(-8deg); clip-path: inset(18% 0 28% 0); filter: drop-shadow(3px 0 #ff2bd6) drop-shadow(-3px 0 #25f4ee); }
  62% { opacity: 1; transform: rotate(-7deg) translateX(2px); clip-path: none; filter: drop-shadow(-2px 0 #ff2bd6) drop-shadow(2px 0 #25f4ee); }
  78% { opacity: .55; }
  90%, 100% { opacity: 1; transform: rotate(-7deg); clip-path: none; }
}
@keyframes facil-suave {
  0%, 40% { opacity: 1; filter: drop-shadow(3px 0 #ff2bd6) drop-shadow(-3px 0 #25f4ee); }
  20%, 60% { opacity: .3; }
  80%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pantalla-3d.ver-facil .g-facil { animation: facil-suave .45s steps(1, end) 1; }
}
@media (max-width: 900px) {
  .g-cara { width: 56px; top: -40px; left: -10px; }
  .g-contorno { top: -10px; left: -8px; width: calc(100% + 18px); height: calc(100% + 24px); }
}

/* ---------- más garabatos de neón (estilo muro de grafitis) ---------- */
.g-loca { width: 96px; top: 7%; left: 41%; transform: rotate(-10deg); opacity: .55; }
.g-cruz1 { width: 26px; top: 16%; left: 36%; transform: rotate(10deg); opacity: .7; }
.g-destello1 { width: 30px; top: 58%; left: 47%; opacity: .6; }
.g-zigzag1 { width: 64px; top: 4%; left: 58%; transform: rotate(-6deg); opacity: .55; }
.g-cruz2 { width: 24px; top: 12%; left: 30%; transform: rotate(-14deg); opacity: .6; }
#preguntas { position: relative; }
#preguntas > h2, #preguntas > .faq { position: relative; z-index: 1; }
.g-sonrisa { width: 84px; top: 18%; left: -2%; transform: rotate(-8deg); opacity: .5; }
.g-gg { width: 110px; top: 44%; right: -3%; transform: rotate(10deg); opacity: .5; }
.g-destello2 { width: 26px; top: 12%; right: 6%; opacity: .6; }
.firma { position: relative; width: min(1040px, 100%); height: 0; margin: 0 auto; pointer-events: none; }
.g-firma { width: 190px; bottom: -8px; right: 2%; transform: rotate(-8deg); opacity: .55; }
.g-zigzag2 { width: 56px; bottom: 40px; right: 22%; transform: rotate(8deg); opacity: .5; }
@media (max-width: 900px) {
  .g-loca, .g-cruz1, .g-destello1, .g-zigzag1, .g-cruz2, .g-gg, .g-destello2, .g-zigzag2 { display: none; }
  .g-sonrisa { width: 56px; top: 0; left: auto; right: 4%; }
  .g-firma { width: 150px; right: 4%; }
}

/* El lema debajo del título, grafiteado como los garabatos: letra de marcador en blanco, un
   poco torcido, con el mismo temblor y un brillo suave. Es texto de verdad (se lee y se puede
   copiar); solo cambia cómo se dibuja. */
.titulos-caps.portada-sola .hero-lema {
  max-width: none;
  margin: 22px 0 30px;
  font-family: 'Permanent Marker', 'Comic Sans MS', cursive;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  transform: rotate(-3deg);
  transform-origin: left center;
  filter: var(--temblor, url(#temblor-0)) drop-shadow(0 0 6px rgba(255, 255, 255, .45));
}

/* ---------- la pantalla de TikTok en el teléfono ---------- */
/* Encima del clip: la columna de la derecha, el texto de abajo, la barrita de progreso y, debajo
   del video, la barra de navegación. Todo se mide en cqw (el ancho del teléfono), así se achica
   junto con él. Sin números de likes: no hay datos reales para mostrar. */
.telefono.con-tiktok { container-type: inline-size; }
.con-tiktok .tt-video { position: relative; }
.telefono.con-tiktok .tt-video > img { border-radius: 31px 31px 0 0; }
.tt-capa { position: absolute; inset: 0; border-radius: 31px 31px 0 0; overflow: hidden; color: #fff; }
/* Una sombra suave abajo, como en TikTok, para que el texto se lea sobre cualquier video. */
.tt-capa::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
}
.tt-lado {
  position: absolute;
  right: 2.4cqw;
  bottom: 13cqw;
  display: grid;
  justify-items: center;
  gap: 3.4cqw;
}
.tt-avatar { position: relative; display: block; width: 11.5cqw; height: 11.5cqw; margin-bottom: 1.6cqw; }
.tt-avatar img { width: 100%; height: 100%; border-radius: 50%; border: .55cqw solid #fff; object-fit: cover; aspect-ratio: 1; }
.tt-avatar i {
  position: absolute;
  left: 50%;
  bottom: -2.4cqw;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 5cqw;
  height: 5cqw;
  border-radius: 50%;
  background: #fe2c55;
  font: 700 4cqw/1 var(--font-body);
  font-style: normal;
}
/* Cada acción: el ícono y su número debajo, como en TikTok. */
.tt-accion { display: grid; justify-items: center; gap: .7cqw; width: 13cqw; }
.tt-accion svg { display: block; width: 8.6cqw; height: auto; filter: drop-shadow(0 .4cqw .9cqw rgba(0, 0, 0, .45)); }
.tt-num {
  font: 700 3.1cqw/1 var(--font-body);
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .6);
}
.tt-corazon { position: relative; color: #fe2c55; }
.tt-avatar { z-index: 1; }
/* Los corazoncitos que suben desde el me gusta, hacia la izquierda y meciéndose. Cada uno lo crea
   portada.js con su tamaño, color, recorrido y giro, y se borra solo cuando termina de subir. */
.tt-lluvia { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; }
.tt-lluvia i {
  position: absolute;
  left: calc(var(--t) / -2);
  top: calc(var(--t) / -2);
  width: var(--t);
  height: var(--t);
  background: var(--c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2s-7.6-4.7-10.1-9.5C.3 8.4 2 4.4 5.9 4c2.3-.2 4.3 1 5.1 2.9C11.8 5 13.8 3.8 16.1 4c3.9.4 5.6 4.4 4 7.7-2.5 4.8-8.1 9.5-8.1 9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2s-7.6-4.7-10.1-9.5C.3 8.4 2 4.4 5.9 4c2.3-.2 4.3 1 5.1 2.9C11.8 5 13.8 3.8 16.1 4c3.9.4 5.6 4.4 4 7.7-2.5 4.8-8.1 9.5-8.1 9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  animation: tt-sube var(--d) cubic-bezier(.25, .6, .4, 1) forwards;
}
@keyframes tt-sube {
  0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); }
  12% { opacity: 1; transform: translate(calc(var(--dx) * .15), -6cqw) scale(1) rotate(calc(var(--giro) * -.4)); }
  45% { transform: translate(calc(var(--dx) * .55), calc(var(--sube) * .45)) scale(1) rotate(calc(var(--giro) * .5)); }
  75% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--sube)) scale(.85) rotate(var(--giro)); }
}
/* Con "reducir animaciones", suben menos y hay menos (portada.js). */
@media (prefers-reduced-motion: reduce) { .tt-lluvia i { --sube: -26cqw !important; } }
/* Debajo del teléfono: los números son de ejemplo. */
.baldosa > p.baldosa-nota { margin: 16px 0 0; font-size: 12px; color: var(--muted); }
/* El disco del sonido, girando despacio. */
.tt-disco {
  display: grid;
  place-items: center;
  width: 10.5cqw;
  height: 10.5cqw;
  border-radius: 50%;
  background: radial-gradient(circle, #3a3a3a 0 35%, #161616 36% 100%);
  border: 1.4cqw solid #222;
  animation: tt-gira 7s linear infinite;
}
.tt-disco img { width: 5.4cqw; height: 5.4cqw; border-radius: 50%; object-fit: cover; aspect-ratio: 1; }
@keyframes tt-gira { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .tt-disco { animation-duration: 16s; } }
.tt-texto {
  position: absolute;
  left: 3.6cqw;
  right: 18cqw;
  bottom: 4.4cqw;
  display: grid;
  gap: 1.2cqw;
  font-size: 3.5cqw;
  line-height: 1.3;
  text-align: left;
  text-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .5);
}
.tt-texto b { font-size: 4.1cqw; font-weight: 700; }
.tt-sonido { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La barrita de progreso, pegada abajo del video. */
.tt-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: max(2px, .7cqw); background: rgba(255, 255, 255, .25); }
.tt-progreso::before { content: ""; position: absolute; inset: 0 62% 0 0; background: rgba(255, 255, 255, .9); }
/* La barra de navegación de TikTok, debajo del video. */
.tt-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 2.4cqw 1.5cqw 4.6cqw;
  border-radius: 0 0 31px 31px;
  background: #000;
  color: rgba(255, 255, 255, .62);
  font-size: 2.7cqw;
  font-weight: 500;
}
.tt-nav span { display: grid; justify-items: center; gap: .6cqw; }
.tt-nav span.activo { color: #fff; font-weight: 700; }
.tt-nav svg { width: 6.6cqw; height: 6.6cqw; }
.tt-mas {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 10.5cqw;
  height: 7cqw;
  border-radius: 2cqw;
  background: #fff;
  color: #000;
  font: 800 5.4cqw/1 var(--font-body);
  box-shadow: -.9cqw 0 0 #25f4ee, .9cqw 0 0 #fe2c55;
}

/* ---------- peces y tijeras (Cut + Fish) ---------- */
#como-funciona, #planes { position: relative; }
#como-funciona > h2, #planes > h2 { position: relative; z-index: 1; }
.g-pez-cortado { width: 120px; bottom: 5%; left: 45%; transform: rotate(-8deg); opacity: .55; }
.g-tijeras { width: 90px; top: 46%; right: 6%; transform: rotate(-18deg); opacity: .55; }
.g-pez { width: 110px; top: 110px; left: 7%; transform: rotate(6deg) scaleX(-1); opacity: .5; }
.g-tijeras-linea { width: 150px; top: 100px; right: 8%; transform: rotate(-6deg); opacity: .55; }
@media (max-width: 900px) {
  .g-pez-cortado, .g-tijeras, .g-pez { display: none; }
  .g-tijeras-linea { width: 96px; top: 76px; right: 4%; }
}

/* ---------- Entrar: el botón de Google y, abajo, la línea de datos ---------- */
/* La línea de datos es la misma que en la app (styles.css); acá solo cómo se acomoda en el hero
   (a la izquierda) y en el cierre (al centro). Los Términos se aceptan adentro del portal. */
.entrar-form { display: grid; gap: 12px; justify-items: inherit; max-width: 560px; }
.cierre .entrar-form { justify-items: center; }
.cierre .leyenda-datos { text-align: center; }

/* La cinta de streamers: aclaración chica abajo. */

/* ---------- Pie: lo legal, en una línea que se parte ---------- */
.landing-pie .pie-legales {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
  max-width: 980px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
}
.portada-sola .landing-pie .pie-legales a,
.pie-cookies { display: inline-block; padding: 6px 0; margin: 0; color: var(--text-dim); text-decoration: none; }
.portada-sola .landing-pie .pie-legales a:hover,
.pie-cookies:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pie-legales > span { padding: 6px 0; color: var(--muted); }
/* Data Fiscal (F. 960/D): el enlace con la imagen de ARCA, cuando ADMIN lo carga. */
.pie-legales > .pie-fiscal:empty { display: none; }
.pie-fiscal img { display: block; width: auto; height: 56px; }
.pie-cookies { border: 0; background: none; font: inherit; cursor: pointer; }
.pie-cookies[hidden] { display: none; }

/* ---------- Aviso de cookies (aviso-cookies.js; solo si hay IDs de Google cargados) ---------- */
/* Abajo, sin tapar el centro. Casi opaco y sin desenfoque en vivo: detrás hay garabatos que se
   mueven. Los tres botones son iguales a propósito: ninguno empuja más que otro. */
.aviso-cookies {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 100;   /* .portada va en 60 */
  width: min(680px, calc(100% - 32px));
  translate: -50% 0;
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(8, 16, 10, .97);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
  color: #fff;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies h2 { margin: 0; font-family: var(--letra-titulos); font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.aviso-cookies p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .84); }
.aviso-cookies a { color: #53fc18; }
.aviso-cookies-opciones { display: grid; gap: 10px; }
.aviso-cookies-opciones[hidden] { display: none; }
.aviso-cookies-cat { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 400; line-height: 1.45; color: rgba(255, 255, 255, .8); cursor: pointer; }
.aviso-cookies-cat input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #53fc18; }
.aviso-cookies-cat b { display: block; color: #fff; }
.aviso-cookies-botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.aviso-cookies-botones button {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font: 600 14px var(--font-body);
  cursor: pointer;
}
.aviso-cookies-botones button:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.aviso-cookies-botones button:active { box-shadow: 0 0 22px 2px rgb(83 252 24 / .5); }
@media (max-width: 520px) {
  .aviso-cookies-botones { grid-template-columns: 1fr; }
}