/* ==========================================================
   Nico Almang — Consultor de marketing 1 a 1
   Tokens y reglas del manual de marca (sección 07)
   ========================================================== */
:root {
  --rojo-golpe: #E63946;
  --azul-heroe: #3557E0;
  --amarillo-pum: #FFD60A;
  --tinta: #14110F;
  --papel: #FFFDF5;
  --crema: #FFF8DC;
  --gris-relato: #9C948A;
  --gris-cuerpo: #3C3831;

  --font-display: 'Luckiest Guy', cursive;
  --font-ui: 'Baloo 2', sans-serif;
  --font-data: 'IBM Plex Mono', monospace;

  --border-comic: 3px solid var(--tinta);
  --shadow-comic: 4px 4px 0 var(--tinta);
  --shadow-comic-lg: 6px 6px 0 var(--tinta);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Base tipográfica más grande: la marca es amigable, el texto tiene que
   leerse cómodo de un vistazo, sobre todo en celular. */
html {
  scroll-behavior: smooth;
  font-size: 17px;
}
@media (min-width: 760px) { html { font-size: 18px; } }
@media (min-width: 1200px) { html { font-size: 19px; } }

body {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---------- Estados iniciales SOLO con JS activo ----------
   Sin la clase .js (JS bloqueado, snapshot estático, buscador),
   la página se muestra entera y quieta en lugar de quedar vacía. */
html:not(.js) .escena { height: auto !important; }
html:not(.js) .escena-sticky { position: static; height: auto; padding: 40px 0; }
html:not(.js) .escena-pintura .escena-svg,
html:not(.js) .mancha-wrap,
html:not(.js) .valor-sello { display: none; }
html:not(.js) .pintura-contenido {
  position: static;
  opacity: 1;
  pointer-events: auto;
  background: var(--azul-heroe);
  padding: 60px 0;
}
html:not(.js) .hamaca-card { position: static; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 14px; }
html:not(.js) .tobogan-caption,
html:not(.js) .fuente-caption,
html:not(.js) .valores-caption { position: static; opacity: 1; transform: none; margin: 14px auto; }
html:not(.js) .arcoiris-banda { stroke-dashoffset: 0 !important; }

::selection { background: var(--amarillo-pum); color: var(--tinta); }

img, svg { max-width: 100%; }

.container { width: min(1060px, 91%); margin-inline: auto; }

/* ---------- Utilidades de marca ---------- */
.label-mono {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-relato);
}

.titulo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  color: var(--rojo-golpe);
  -webkit-text-stroke: 1.5px var(--tinta);
  line-height: 1.12;
  margin: 8px 0 6px;
}

.titulo-letras .palabra { display: inline-block; white-space: nowrap; }
.js .titulo-letras .letra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(6deg) scale(0.6);
}
.titulo-letras.in .letra {
  animation: saltoLetra 0.55s cubic-bezier(0.2, 1.2, 0.3, 1.3) both;
  animation-delay: calc(var(--i) * 35ms);
}
@keyframes saltoLetra {
  0% { opacity: 0; transform: translateY(0.6em) rotate(6deg) scale(0.6); }
  70% { opacity: 1; transform: translateY(-0.08em) rotate(-2deg) scale(1.06); }
  100% { opacity: 1; transform: none; }
}

.regla {
  height: 4px;
  background: var(--tinta);
  border-radius: 99px;
  margin-bottom: 24px;
  max-width: 620px;
}

.seccion { padding: 76px 0; position: relative; }

.seccion-intro {
  font-size: 1.05rem;
  max-width: 560px;
  margin-bottom: 34px;
  color: var(--gris-cuerpo);
}

.divisor {
  position: absolute;
  top: -44px;
  left: 0;
  width: 100%;
  height: 46px;
  display: block;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 14px 26px;
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}
.btn-primario { background: var(--rojo-golpe); color: var(--papel); }
.btn-secundario { background: var(--papel); color: var(--tinta); }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--azul-heroe); outline-offset: 2px; }
.btn-grande { font-size: 1.2rem; padding: 18px 34px; }

.icono-wa { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- Aparición al scrollear ---------- */
.js .pop { opacity: 0; transform: translateY(26px) scale(0.96); }
.pop.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

/* ==========================================================
   PORTERO DE IDIOMA — la pantalla de bienvenida
   ========================================================== */
.portero {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--amarillo-pum);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.portero.cerrado {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
/* si el JS no corre, la página se ve igual: el portero no bloquea */
html:not(.js) .portero { display: none; }

.portero-caja {
  background: var(--papel);
  border: 4px solid var(--tinta);
  border-radius: 22px;
  box-shadow: 10px 10px 0 var(--tinta);
  padding: 30px 32px 28px;
  text-align: center;
  max-width: 460px;
  width: 100%;
  animation: entraPortero 0.55s cubic-bezier(0.2, 1.2, 0.3, 1.25) both;
}
@keyframes entraPortero {
  0% { opacity: 0; transform: translateY(-40px) rotate(-2deg) scale(0.94); }
  70% { opacity: 1; transform: translateY(6px) rotate(1deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

.portero-heroe { width: clamp(96px, 22vw, 130px); height: auto; margin-bottom: 4px; }

.portero-marca {
  display: inline-block;
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: 8px 22px 5px;
  margin-bottom: 20px;
}
.portero-nombre {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.5vw, 1.8rem);
  color: var(--rojo-golpe);
  -webkit-text-stroke: 1.2px var(--tinta);
  line-height: 1;
}

.portero-pregunta {
  font-weight: 800;
  font-size: clamp(1.02rem, 3.4vw, 1.22rem);
  line-height: 1.35;
  margin-bottom: 22px;
}
.portero-pregunta span {
  display: block;
  font-family: var(--font-data);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-relato);
  margin-top: 5px;
}

.portero-botones { display: flex; flex-direction: column; gap: 12px; }
.btn-idioma {
  width: 100%;
  font-size: 1.1rem;
  padding: 15px 20px;
  gap: 12px;
}
.btn-idioma-es { background: var(--rojo-golpe); color: var(--papel); }
.btn-idioma-en { background: var(--azul-heroe); color: var(--papel); }
.idioma-bandera { font-size: 1.35rem; line-height: 1; }

/* botón flotante para cambiar de idioma después */
.cambia-idioma {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 60;
  width: 46px;
  height: 46px;
  background: var(--papel);
  color: var(--tinta);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cambia-idioma:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.cambia-idioma:focus-visible { outline: 3px solid var(--azul-heroe); outline-offset: 2px; }
html:not(.js) .cambia-idioma { display: none; }

@media (min-width: 480px) {
  .portero-botones { flex-direction: row; }
}

/* ==========================================================
   1 · HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh;   /* respaldo por si el navegador no entiende svh */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 20px 5% 24px;
  overflow: hidden;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  z-index: 2;
}

/* logo chico + slogan como firma */
.marca-mini {
  display: inline-flex;
  flex-direction: column;
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: 8px 16px 6px;
}
.marca-mini-nombre {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  color: var(--rojo-golpe);
  -webkit-text-stroke: 1px var(--tinta);
  line-height: 1.05;
}
.marca-mini-slogan {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--gris-cuerpo);
}
.hero-top-dato { padding-top: 8px; text-align: right; }

.hero-centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 24px 0 120px;
  position: relative;
  z-index: 2;
}

.hero-titulo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.6vw, 3.6rem);
  line-height: 1.1;
  color: var(--rojo-golpe);
  -webkit-text-stroke: 1.5px var(--tinta);
  max-width: 15ch;
}

.hero-bajada {
  font-weight: 800;
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  background: var(--amarillo-pum);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: 8px 20px 6px;
  transform: rotate(-1.5deg);
}

.hero-sub { max-width: 30ch; font-size: 1.05rem; color: var(--gris-cuerpo); }
.hero-sub strong { color: var(--tinta); }

/* línea de credenciales */
.credenciales {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  font-family: var(--font-data);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris-cuerpo);
}
.credenciales li {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 2.5px solid var(--tinta);
  border-radius: 99px;
  padding: 4px 13px;
  background: var(--papel);
}
.cred-num { font-family: var(--font-ui); font-weight: 800; font-size: 0.95rem; color: var(--rojo-golpe); }

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

/* cielo animado */
.cielo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sol { position: absolute; top: 8%; left: 3%; width: clamp(80px, 11vw, 140px); }
.sol-rayos { animation: girarSol 24s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes girarSol { to { transform: rotate(360deg); } }

.nube { position: absolute; opacity: 0.95; }
.nube-1 { top: 14%; width: 120px; animation: derivar 38s linear infinite; }
.nube-2 { top: 32%; width: 90px; animation: derivar 52s linear infinite; animation-delay: -18s; }
.nube-3 { top: 7%; width: 70px; animation: derivar 44s linear infinite; animation-delay: -33s; }
@keyframes derivar {
  from { left: -160px; }
  to { left: 110%; }
}

.entra-globo { animation: caeGlobo 0.7s cubic-bezier(0.2, 1.2, 0.3, 1.25) both; }
.entra-slogan { animation: aparecePop 0.5s 0.45s cubic-bezier(0.2, 1.2, 0.3, 1.3) both; }
.entra-sub { animation: apareceSuave 0.5s 0.7s ease both; }
.entra-ctas { animation: apareceSuave 0.5s 0.85s ease both; }
@keyframes caeGlobo {
  0% { opacity: 0; transform: translateY(-70px) rotate(-3deg); }
  70% { opacity: 1; transform: translateY(6px) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes aparecePop {
  0% { opacity: 0; transform: scale(0.4) rotate(-6deg); }
  70% { opacity: 1; transform: scale(1.08) rotate(1deg); }
  100% { opacity: 1; transform: rotate(-1.5deg); }
}
@keyframes apareceSuave {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hero-nico {
  position: absolute;
  bottom: 50px;
  right: clamp(3%, 7vw, 11%);
  width: clamp(84px, 11vw, 124px);
  z-index: 1;
}
.brazo-saludo {
  animation: saludar 1.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: left bottom;
}
@keyframes saludar {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(16deg); }
}
.ojos { animation: parpadear 4.5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes parpadear {
  0%, 93%, 100% { transform: scaleY(1); }
  95%, 97% { transform: scaleY(0.1); }
}

.cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  position: relative;
  z-index: 2;
}
.cue .label-mono { color: var(--gris-relato); font-size: 0.66rem; }
.cue-flecha { width: 32px; height: 32px; animation: rebotar 1.4s ease-in-out infinite; }
@keyframes rebotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(9px); }
}

/* ==========================================================
   2 · MARCAS — el héroe las pinta a pistolazos
   ========================================================== */
#stickyMarcas { background: var(--crema); }
.marcas-sticky { align-items: center; }
.marcas-inner {
  position: relative;
  width: min(1060px, 94%);
  padding-bottom: 150px;   /* lugar para el tirador */
}
.marcas-titulo {
  font-weight: 800;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  text-align: center;
  margin-bottom: 22px;
}

/* el chorro de la pistola de agua */
.chorro-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
#chorroPath, #chorroBorde { animation: fluirChorro 0.4s linear infinite; }
@keyframes fluirChorro { to { stroke-dashoffset: -26; } }

/* el héroe con la pistola, se mueve de logo en logo */
.tirador {
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(120px, 15vw, 168px);
  z-index: 5;
  will-change: transform;
}
.tirador svg { width: 100%; height: auto; overflow: visible; }
#brazoPistola { transform-box: fill-box; transform-origin: 0 -52px; }
.tirador.dispara #pistola { animation: retroceso 0.18s ease-out; }
@keyframes retroceso {
  0% { transform: translate(0, 0); }
  40% { transform: translate(-7px, 4px); }
  100% { transform: translate(0, 0); }
}

/* guirnalda de banderines */
.guirnalda {
  position: relative;
  height: 54px;
  margin-bottom: 26px;
}
.guirnalda svg { width: 100%; height: 54px; display: block; }
.banderin {
  position: absolute;
  top: 8px;
  width: 26px;
  height: 34px;
  border: 2.5px solid var(--tinta);
  border-bottom: none;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: ondearBanderin 2.4s ease-in-out infinite alternate;
  transform-origin: top center;
}
.b1 { left: 8%;  background: var(--rojo-golpe);   top: 12px; }
.b2 { left: 24%; background: var(--amarillo-pum); top: 20px; animation-delay: -0.4s; }
.b3 { left: 40%; background: var(--azul-heroe);   top: 24px; animation-delay: -0.8s; }
.b4 { left: 56%; background: var(--rojo-golpe);   top: 20px; animation-delay: -1.2s; }
.b5 { left: 72%; background: var(--amarillo-pum); top: 14px; animation-delay: -1.6s; }
.b6 { left: 88%; background: var(--azul-heroe);   top: 10px; animation-delay: -2s; }
@keyframes ondearBanderin {
  from { transform: rotate(-6deg); }
  to { transform: rotate(6deg); }
}

.marcas-fila {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
/* Cada logo cuelga de la guirnalda y se balancea, como un cartelito
   de plaza. El hilo es el ::before. */
.marca-logo {
  position: relative;
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--tinta);
  padding: 12px 18px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-origin: top center;
  animation: colgarLogo 3.4s ease-in-out infinite alternate;
  transition: box-shadow 0.15s ease;
}
.marca-logo::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 3px;
  height: 16px;
  margin-left: -1.5px;
  background: var(--tinta);
}
.marca-logo:nth-child(2) { animation-delay: -0.7s; }
.marca-logo:nth-child(3) { animation-delay: -1.4s; }
.marca-logo:nth-child(4) { animation-delay: -2.1s; }
.marca-logo:nth-child(5) { animation-delay: -2.8s; }
@keyframes colgarLogo {
  from { transform: rotate(-2.6deg); }
  to { transform: rotate(2.6deg); }
}
.marca-logo:hover { box-shadow: 1px 1px 0 var(--tinta); animation-play-state: paused; }

/* el logo arranca apagado y se "pinta" cuando le pega el chorro */
.marca-logo img {
  max-height: 46px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.js .marca-logo img { filter: grayscale(1) contrast(0.2) brightness(1.25); opacity: 0.35; }
.js .marca-logo.pintado img { filter: none; opacity: 1; }

/* la salpicadura que estalla sobre el logo */
.salpicadura {
  position: absolute;
  inset: -14%;
  width: 128%;
  height: 128%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.2) rotate(-25deg);
  z-index: 3;
}
.marca-logo.salpicando .salpicadura {
  animation: salpicar 0.75s cubic-bezier(0.2, 1.1, 0.3, 1.3) forwards;
}
@keyframes salpicar {
  0% { opacity: 0; transform: scale(0.15) rotate(-30deg); }
  30% { opacity: 0.95; transform: scale(1.15) rotate(6deg); }
  60% { opacity: 0.7; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.05) rotate(2deg); }
}
/* Estos archivos traen el logo descentrado o con mucho margen vacío,
   así que se reencuadran para que todos pesen ópticamente igual. */
.marca-logo img[alt="Ancora"] { transform: scale(2.2); }
.marca-logo img[alt="Vans"] { transform: scale(1.45) translateX(-11%); }

/* ==========================================================
   ESCENAS CON SCROLL (motor común)
   ========================================================== */
/* Todas las escenas comparten el fondo Papel: si una usara otro color,
   al despegarse el bloque pegado se vería un corte horizontal contra
   la sección siguiente. Los cambios de color van adentro del sticky. */
.escena { position: relative; background: var(--papel); }
.escena-marcas { height: 320vh; }
.escena-tobogan { height: 340vh; }
.escena-monstruo { height: 340vh; }
.escena-retrato { height: 340vh; }
.escena-faq { height: 400vh; }
.escena-hamaca { height: 380vh; }
.escena-pintura { height: 400vh; }
.escena-valores { height: 420vh; }
.escena-pasamanos { height: 360vh; }
.escena-fuente { height: 280vh; }
/* el monstruo vive sobre Crema, pero pintado adentro del sticky */
#stickyMonstruo { background: var(--crema); }

.escena-sticky {
  position: sticky;
  top: 0;
  height: 100vh;   /* respaldo por si el navegador no entiende svh */
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--papel);
}

.escena-svg {
  width: min(940px, 96vw);
  max-height: 86svh;
  height: auto;
}

.sacudida { animation: sacudir 0.4s ease; }
@keyframes sacudir {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-7px, 5px); }
  35% { transform: translate(6px, -4px); }
  55% { transform: translate(-4px, 3px); }
  75% { transform: translate(3px, -2px); }
}

.burst {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
.burst.estalla {
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.2, 1.1, 0.3, 1.4);
}
.burst-texto {
  font-family: var(--font-display);
  font-size: 44px;
  fill: var(--rojo-golpe);
  stroke: var(--tinta);
  stroke-width: 1.5px;
}
.burst-texto-chico { font-size: 34px; }

.bubble-texto { font-family: var(--font-display); font-size: 30px; fill: var(--azul-heroe); }
.bubble-texto-agencia { font-size: 26px; fill: var(--gris-relato); }
.bubble-sorpresa-texto { font-size: 38px; fill: var(--rojo-golpe); }

.capa-flamea {
  animation: ondearCapa 1.9s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: top left;
}
@keyframes ondearCapa {
  from { transform: skewX(0deg) scaleX(1); }
  to { transform: skewX(-7deg) scaleX(1.08); }
}

.orbita-estrellas {
  animation: girarEstrellas 1.5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes girarEstrellas { to { transform: rotate(360deg); } }

.patalea .piernas-colgado {
  animation: patalear 0.22s linear infinite alternate;
  transform-box: fill-box;
  transform-origin: top center;
}
@keyframes patalear {
  from { transform: rotate(-10deg); }
  to { transform: rotate(10deg); }
}

.camina .piernas {
  animation: zancada 0.35s linear infinite alternate;
  transform-box: fill-box;
  transform-origin: top center;
}
@keyframes zancada {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}

.tobogan-caption {
  position: absolute;
  left: 50%;
  bottom: 6svh;
  transform: translateX(-50%) translateY(26px);
  width: min(560px, 88%);
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: 14px 20px;
  text-align: center;
  font-size: 1.05rem;
  z-index: 3;
}
.tobogan-caption.in { transform: translateX(-50%) translateY(0); }

/* ==========================================================
   3b · EL PROBLEMA (texto + caja negra)
   ========================================================== */
.seccion-problema { background: var(--crema); padding: 70px 0 80px; }
.problema-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.problema-texto p { font-size: 1.04rem; margin-bottom: 16px; max-width: 62ch; color: var(--gris-cuerpo); }
.problema-texto p strong { color: var(--tinta); }
.problema-texto .titulo::before { content: "«"; }
.problema-texto .titulo::after { content: "»"; }
.problema-remate {
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-comic);
  padding: 18px 22px;
  font-size: 1.12rem !important;
  color: var(--tinta) !important;
  margin-top: 24px;
}
.problema-remate strong { font-size: 1.2rem; color: var(--rojo-golpe); }

/* ---------- El agujero negro que se traga todo ---------- */
.agujero-wrap { display: flex; justify-content: center; }
.agujero { width: min(320px, 84%); overflow: visible; }
.caja-signo { font-family: var(--font-data); font-weight: 600; font-size: 15px; fill: var(--tinta); }

.disco-gira {
  animation: girarDisco 9s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes girarDisco { to { transform: rotate(360deg); } }

/* todo lo que orbita cae en espiral hacia el centro y desaparece */
.cae {
  animation: espiral 3.6s cubic-bezier(0.5, 0, 0.85, 0.5) infinite;
  transform-box: fill-box;
  transform-origin: center;
  offset-path: none;
}
.cae-1 { animation-delay: 0s; }
.cae-2 { animation-delay: -0.9s; }
.cae-3 { animation-delay: -1.8s; }
.cae-4 { animation-delay: -2.7s; }
@keyframes espiral {
  0% { transform: translate(150px, 150px) rotate(0deg) translateX(140px) scale(1); opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(150px, 150px) rotate(560deg) translateX(6px) scale(0.15); opacity: 0; }
}

/* el héroe cae de cabeza, girando, y se lo traga */
.heroe-cae {
  animation: caerAlPozo 4.4s cubic-bezier(0.45, 0, 0.85, 0.55) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes caerAlPozo {
  0% { transform: translate(150px, 150px) rotate(-10deg) translate(-120px, -118px) scale(1); opacity: 0; }
  10% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(150px, 150px) rotate(430deg) translate(-8px, -6px) scale(0.12); opacity: 0; }
}

/* ==========================================================
   3c · EL MONSTRUO AGENCIA
   ========================================================== */
#monstruo, #actorMonstruo { will-change: transform; }

.tentaculo {
  animation: retorcerse 2.6s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: right center;
}
.t2 { animation-delay: -0.7s; }
.t3 { animation-delay: -1.3s; transform-origin: left center; }
.t4 { animation-delay: -1.9s; transform-origin: left center; }
@keyframes retorcerse {
  from { transform: rotate(-4deg) translateY(0); }
  to { transform: rotate(4deg) translateY(-8px); }
}

.cartel {
  animation: colgarCartel 3s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: top center;
}
.c2 { animation-delay: -0.8s; }
.c3 { animation-delay: -1.5s; }
.c4 { animation-delay: -2.2s; }
@keyframes colgarCartel {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}
.cartel-texto {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.08em;
  fill: var(--gris-relato);
}

.bubble-monstruo-texto {
  font-family: var(--font-display);
  font-size: 30px;
  fill: var(--tinta);
}

#pupilas { animation: mirarFijo 3.4s ease-in-out infinite alternate; }
@keyframes mirarFijo {
  from { transform: translateX(-7px); }
  to { transform: translateX(7px); }
}

.monstruo-caption {
  position: absolute;
  left: 50%;
  bottom: 5svh;
  transform: translateX(-50%) translateY(26px);
  opacity: 0;
  width: min(600px, 90%);
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: 14px 20px;
  text-align: center;
  font-size: 1.05rem;
  z-index: 3;
}
.monstruo-caption.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 1, 0.3, 1.3);
}

/* ==========================================================
   4 · CON VOS, NO POR VOS (hamaca)
   ========================================================== */
.hamaca-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 4%;
}

.hamaca-stage { flex: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.hamaca-svg { width: min(400px, 82vw); max-height: 44svh; height: auto; }

#columpio { will-change: transform; }

.hamaca-textos { padding-bottom: 3svh; }
.titulo-convos {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(1.25rem, 3.6vw, 1.9rem);
  color: var(--tinta);
  -webkit-text-stroke: 0;
  line-height: 1.25;
}
.titulo-convos s { color: var(--gris-relato); text-decoration-thickness: 3px; text-decoration-color: var(--rojo-golpe); }
.titulo-convos .letra { display: inline; opacity: 1; transform: none; }

.hamaca-cards { position: relative; min-height: 210px; }
.hamaca-card {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-comic);
  padding: 18px 22px;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(30px) rotate(1.5deg) scale(0.97);
  pointer-events: none;
}
/* la primera tarjeta se ve aunque el motor no haya arrancado todavía */
.hamaca-card:first-child { opacity: 1; transform: none; pointer-events: auto; }
.hamaca-card.activa {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1, 0.3, 1.25);
}
.hamaca-card.pasada {
  opacity: 0;
  transform: translateY(-30px) rotate(-1.5deg) scale(0.97);
  transition: opacity 0.3s ease, transform 0.35s ease;
}
.hamaca-card-azul { background: var(--azul-heroe); border-width: 4px; }
.hamaca-card-azul p { color: var(--papel); font-weight: 700; }

.hamaca-progreso { display: flex; gap: 8px; margin-top: 14px; }
.hamaca-progreso span {
  width: 12px; height: 12px;
  border: 2.5px solid var(--tinta);
  border-radius: 50%;
  background: var(--papel);
  transition: background 0.25s ease;
}
.hamaca-progreso span.lleno { background: var(--amarillo-pum); }

/* ==========================================================
   5 · CÓMO TRABAJAMOS JUNTOS (pintura)
   ========================================================== */
.mancha-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.mancha {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 130px;
  height: 130px;
  margin: -65px 0 0 -65px;
  transform: scale(0);
  will-change: transform;
}
.splash-texto {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0) rotate(-6deg);
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 6.5rem);
  color: var(--papel);
  -webkit-text-stroke: 2.5px var(--tinta);
  opacity: 0;
}
.splash-texto.estalla {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-4deg);
  transition: transform 0.3s cubic-bezier(0.2, 1.2, 0.3, 1.4), opacity 0.15s ease;
}
.splash-texto.fuera { opacity: 0; transition: opacity 0.4s ease; }

.pintura-contenido {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  padding: 3svh 0;
}
.pintura-contenido.visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s ease;
}
.pintura-label { color: #C6D2FF; }
.titulo-pintura {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  color: var(--amarillo-pum);
  -webkit-text-stroke: 1.5px var(--tinta);
  line-height: 1.15;
  margin: 6px 0 18px;
  max-width: 24ch;
}

.servicios-bloques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.servicio-bloque { display: flex; flex-direction: column; gap: 8px; }
.bloque-label {
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--amarillo-pum);
  border: 2.5px solid var(--tinta);
  border-radius: 99px;
  padding: 4px 14px;
  align-self: flex-start;
}
.habilidad-card {
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: 11px 15px 10px;
}
.js .habilidad-card { opacity: 0; transform: translateY(22px) rotate(1.5deg) scale(0.96); }
.habilidad-card.encendida {
  opacity: 1;
  transform: rotate(-0.4deg);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1, 0.3, 1.3);
}
.habilidad-card:nth-child(odd).encendida { transform: rotate(0.6deg); }
.habilidad-card h3 { font-weight: 800; font-size: 0.98rem; line-height: 1.25; margin-bottom: 2px; }
.habilidad-card p { color: var(--gris-cuerpo); font-size: 0.82rem; line-height: 1.4; }

.heroe-empapado {
  position: absolute;
  bottom: 8px;
  left: 3%;
  width: clamp(74px, 9vw, 108px);
}

/* ==========================================================
   6 · CON QUIÉN TRABAJO (sube y baja)
   ========================================================== */
.valores-layout {
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding-top: max(2.5svh, 14px);
}

.valores-encabezado { width: min(1060px, 91%); }
.valores-encabezado .titulo { font-size: clamp(1.7rem, 4.6vw, 2.5rem); margin-bottom: 2px; }
.valores-sub { font-weight: 700; color: var(--gris-cuerpo); font-size: 0.98rem; }

.valores-svg {
  width: min(940px, 96vw);
  aspect-ratio: 900 / 480;
  max-height: 34svh;
  height: auto;
  flex: none;
}

#tablon, #globosNo { will-change: transform; }

.listas-quien {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(1060px, 94%);
}
.lista-quien ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lista-titulo {
  font-weight: 800;
  font-size: 0.98rem;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lista-titulo::before {
  font-family: var(--font-display);
  font-size: 0.9rem;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
  border: 2.5px solid var(--tinta);
  border-radius: 8px;
  flex-shrink: 0;
}
.lista-titulo-si::before { content: "SÍ"; background: var(--amarillo-pum); }
.lista-titulo-no::before { content: "NO"; background: var(--papel); color: var(--gris-relato); }

.valor-chip, .chip-no {
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  padding: 9px 13px;
  box-shadow: 3px 3px 0 var(--tinta);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 1, 0.3, 1.3), filter 0.35s ease;
}
.js .valor-chip, .js .chip-no { opacity: 0.2; transform: scale(0.95); filter: grayscale(1); }
.valor-chip h3, .chip-no h3 { font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.valor-chip.encendido { opacity: 1; transform: none; filter: none; }

.chip-no {
  border-style: dashed;
  box-shadow: none;
  background: transparent;
}
.chip-no h3 { color: var(--gris-relato); font-weight: 600; }
.chip-no.tachado { opacity: 0.75; transform: none; filter: none; }
.chip-no.tachado h3 { text-decoration: line-through; text-decoration-color: var(--rojo-golpe); text-decoration-thickness: 2px; }

.valor-sello {
  position: absolute;
  left: 50%;
  top: max(17svh, 106px);
  transform: translateX(-50%) rotate(-5deg) scale(0);
  opacity: 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.4vw, 1.5rem);
  color: var(--tinta);
  background: var(--amarillo-pum);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-comic);
  padding: 10px 20px 5px;
  max-width: 84%;
  text-align: center;
  line-height: 1.2;
  z-index: 3;
  pointer-events: none;
}
.valor-sello.estampado { animation: estampar 0.45s cubic-bezier(0.2, 1.2, 0.3, 1.3) both; }
@keyframes estampar {
  0% { opacity: 0; transform: translateX(-50%) rotate(8deg) scale(2); }
  60% { opacity: 1; transform: translateX(-50%) rotate(-7deg) scale(0.94); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-5deg) scale(1); }
}

/* ==========================================================
   7 · EL PROCESO (pasamanos)
   ========================================================== */
.pasamanos-layout {
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding-top: max(2.5svh, 14px);
}
.pasamanos-encabezado { width: min(1060px, 91%); }
.pasamanos-encabezado .titulo { font-size: clamp(1.7rem, 4.6vw, 2.5rem); margin-bottom: 2px; }
.pasamanos-sub { font-weight: 700; color: var(--gris-cuerpo); font-size: 0.95rem; max-width: 56ch; }

/* aspect-ratio + flex:none para que el contenedor flex no lo aplaste */
.pasamanos-svg {
  width: min(1080px, 98vw);
  aspect-ratio: 900 / 300;
  height: auto;
  max-height: 34svh;
  flex: none;
}
#actorPasamanos { will-change: transform; }

.pasos-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: min(1060px, 94%);
}
.paso-card {
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-md);
  padding: 10px 13px 9px;
  box-shadow: 3px 3px 0 var(--tinta);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 1, 0.3, 1.3), filter 0.35s ease;
}
.js .paso-card { opacity: 0.22; transform: scale(0.95); filter: grayscale(1); }
.paso-card.encendido { opacity: 1; transform: none; filter: none; }
.paso-card h3 { font-weight: 800; font-size: 0.94rem; line-height: 1.2; margin: 4px 0 3px; }
.paso-card > p { color: var(--gris-cuerpo); font-size: 0.78rem; line-height: 1.4; }

.paso-num {
  font-family: var(--font-display);
  font-size: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
  border: 2.5px solid var(--tinta);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--tinta);
  color: var(--papel);
}
.chip-rojo { background: var(--rojo-golpe); }
.chip-azul-num { background: var(--azul-heroe); }

.pasamanos-cierre {
  width: min(1060px, 94%);
  margin-top: 10px;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gris-cuerpo);
  opacity: 0;
  transform: translateY(16px);
}
.pasamanos-cierre.visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.45s ease;
}
.pasamanos-cierre strong { color: var(--tinta); font-style: normal; }

/* ==========================================================
   8 · QUIÉN SOY (el héroe pinta el retrato)
   ========================================================== */
#stickyRetrato { background: var(--crema); }
.retrato-layout {
  flex-direction: column;
  gap: 12px;
  padding: 12px 4%;
}
.retrato-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.retrato-svg { width: min(340px, 78vw); max-height: 42svh; height: auto; }
#heroeRetrato, #brazoRetrato { will-change: transform; }

.quien-texto { width: 100%; }
.quien-texto .titulo { font-size: clamp(1.7rem, 4.6vw, 2.5rem); }
.quien-cards { position: relative; min-height: 190px; }
.quien-card {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-comic);
  padding: 16px 20px;
  font-size: 0.98rem;
  opacity: 0;
  transform: translateY(26px) rotate(1.2deg) scale(0.97);
  pointer-events: none;
}
.quien-card:first-child { opacity: 1; transform: none; pointer-events: auto; }
.quien-card.activa {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1, 0.3, 1.25);
}
.quien-card.pasada {
  opacity: 0;
  transform: translateY(-26px) rotate(-1.2deg) scale(0.97);
  transition: opacity 0.3s ease, transform 0.35s ease;
}
.quien-card-destacada { background: var(--amarillo-pum); }
.quien-card p strong { color: var(--tinta); }

/* ==========================================================
   9 · PREGUNTAS (casita del árbol, escena con scroll)
   ========================================================== */
.faq-sticky { align-items: center; }
.faq-sticky > .container { width: min(1060px, 91%); }
.faq-sticky .titulo { font-size: clamp(1.6rem, 4.4vw, 2.4rem); margin-bottom: 14px; }

.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}
.casita-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.casita { width: min(210px, 54%); max-height: 34svh; }
.casita-nota { font-size: 0.6rem; text-align: center; }

#heroeTrepa { will-change: transform; }
.piernas-trepa {
  animation: pasitosTrepa 0.5s linear infinite alternate;
  transform-box: fill-box;
  transform-origin: top center;
}
@keyframes pasitosTrepa {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}
#manoSaluda {
  animation: saludarVentana 1.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: right center;
}
@keyframes saludarVentana {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-20deg); }
}

.faq-lista { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-comic);
  overflow: hidden;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 1, 0.3, 1.3), filter 0.35s ease;
}
/* cada pregunta se "desbloquea" cuando el héroe llega a su escalón */
.js .faq-item { opacity: 0.22; transform: translateX(-14px) scale(0.97); filter: grayscale(1); }
.js .faq-item.desbloqueada { opacity: 1; transform: none; filter: none; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 0.98rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--crema); }
.faq-item summary:focus-visible { outline: 3px solid var(--azul-heroe); outline-offset: -3px; }
.faq-signo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--tinta);
  background: var(--amarillo-pum);
  border: 2.5px solid var(--tinta);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.2, 1, 0.3, 1.4), background 0.2s ease;
}
.faq-item[open] .faq-signo { transform: rotate(180deg); background: var(--rojo-golpe); color: var(--papel); }
.faq-item[open] summary { background: var(--crema); border-bottom: var(--border-comic); }
.faq-item p {
  padding: 12px 16px 14px;
  color: var(--gris-cuerpo);
  font-size: 0.92rem;
  animation: abrirRespuesta 0.3s ease both;
}
@keyframes abrirRespuesta {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================
   10 · LA FUENTE + CTA FINAL
   ========================================================== */
.agua { stroke-dasharray: 10 14; animation: fluir 0.9s linear infinite; opacity: 0.85; }
.agua-2 { animation-delay: -0.45s; }
@keyframes fluir { to { stroke-dashoffset: -24; } }

.moneda-flota { animation: flotarMoneda 2.4s ease-in-out infinite alternate; transform-box: fill-box; }
.moneda-b { animation-delay: -0.9s; }
.moneda-c { animation-delay: -1.6s; }
@keyframes flotarMoneda {
  from { transform: translateY(0); }
  to { transform: translateY(-16px); }
}
.destello { animation: titilar 1.7s ease-in-out infinite; }
.destello-2 { animation-delay: -0.6s; }
.destello-3 { animation-delay: -1.1s; }
@keyframes titilar {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}
.moneda-signo { font-family: var(--font-data); font-weight: 600; font-size: 13px; fill: var(--tinta); }

.fuente-caption {
  position: absolute;
  left: 50%;
  bottom: 7svh;
  transform: translateX(-50%) translateY(30px) scale(0.7) rotate(-2deg);
  opacity: 0;
  background: var(--papel);
  border: 4px solid var(--tinta);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-comic-lg);
  padding: 16px 30px 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
  width: min(440px, 88%);
  z-index: 3;
}
.fuente-caption.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 1.1, 0.3, 1.35);
}
.pum {
  font-family: var(--font-display);
  color: var(--azul-heroe);
  -webkit-text-stroke: 1px var(--tinta);
  display: inline-block;
  transform: rotate(-2deg);
}
.pum-grande { font-size: clamp(2rem, 6vw, 2.9rem); }
.fuente-caption-texto { font-weight: 800; font-size: clamp(1.3rem, 4vw, 1.8rem); }

.cta-final { background: var(--amarillo-pum); padding: 90px 0; margin-top: 44px; overflow: hidden; }
.cta-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  position: relative;
  z-index: 2;
}
.titulo-cta {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.4rem);
  color: var(--tinta);
  line-height: 1.08;
  max-width: 18ch;
}
.cta-remate { font-weight: 600; font-size: 0.98rem; color: var(--gris-cuerpo); }
.cta-tel { color: var(--tinta); }

.confeti-capa { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.confeti {
  position: absolute;
  top: -24px;
  width: 12px;
  height: 16px;
  border: 2.5px solid var(--tinta);
  border-radius: 3px;
  animation: caerConfeti linear both;
}
@keyframes caerConfeti {
  from { transform: translateY(-30px) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  to { transform: translateY(110vh) rotate(660deg); opacity: 0; }
}

/* ==========================================================
   ¿YA SOS CLIENTE? — acceso a la app
   ========================================================== */
.seccion-login {
  background: var(--crema);
  border-top: var(--border-comic);
  padding: 64px 0 58px;
}
.login-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.puerta-wrap { width: min(320px, 84%); }
.puerta-svg { width: 100%; height: auto; overflow: visible; }

.haz-luz { animation: latirLuz 2.6s ease-in-out infinite alternate; }
@keyframes latirLuz {
  from { opacity: 0.75; }
  to { opacity: 1; }
}
.hoja-puerta {
  animation: abrirPuerta 4s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: left center;
}
@keyframes abrirPuerta {
  from { transform: perspective(300px) rotateY(0deg); }
  to { transform: perspective(300px) rotateY(22deg); }
}
.chispa {
  animation: titilar 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.ch-2 { animation-delay: -0.6s; }
.ch-3 { animation-delay: -1.2s; }

.login-texto { max-width: 460px; }
.login-texto .titulo { font-size: clamp(1.7rem, 5vw, 2.5rem); }
.login-texto .regla { margin-inline: auto; }
.login-sub { font-size: 1.02rem; color: var(--gris-cuerpo); margin-bottom: 18px; }
.btn-login { background: var(--azul-heroe); color: var(--papel); }
.icono-login { width: 22px; height: 22px; flex-shrink: 0; }
.login-nota { margin-top: 10px; font-size: 0.6rem; }

/* ==========================================================
   FOOTER + WHATSAPP FLOTANTE
   ========================================================== */
.footer {
  background: var(--tinta);
  color: var(--papel);
  text-align: center;
  padding: 46px 5% 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.monograma {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--amarillo-pum);
  background: var(--azul-heroe);
  border: 3px solid var(--papel);
  border-radius: var(--radius-md);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
  margin-bottom: 6px;
}
.footer-nombre { font-weight: 800; font-size: 1.05rem; }
.footer-slogan { color: var(--amarillo-pum); }
.footer-datos, .footer-copy { color: var(--gris-relato); }

.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: 58px;
  height: 58px;
  background: var(--rojo-golpe);
  color: var(--papel);
  border: var(--border-comic);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-comic);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wa-flotante svg { width: 30px; height: 30px; }
.wa-flotante:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.wa-flotante:focus-visible { outline: 3px solid var(--azul-heroe); outline-offset: 2px; }

/* ==========================================================
   PANTALLAS MÁS GRANDES
   ========================================================== */
@media (min-width: 760px) {
  .seccion { padding: 110px 0; }

  .problema-layout { grid-template-columns: 1.35fr 1fr; gap: 44px; }

  .hamaca-layout { flex-direction: row; align-items: center; gap: 30px; padding: 0 5%; }
  .hamaca-stage { flex: 0 0 42%; align-items: center; }
  .hamaca-svg { width: 100%; max-height: 76svh; }
  .hamaca-textos { flex: 1; padding-bottom: 0; max-width: 540px; }
  .hamaca-cards { min-height: 220px; }

  .servicios-bloques { grid-template-columns: 1fr 1fr; gap: 20px; }

  .listas-quien { grid-template-columns: 1.5fr 1fr; gap: 22px; }
  .lista-quien ul { gap: 8px; }

  .pasos-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .pasamanos-svg { max-height: 26svh; }

  .faq-layout { grid-template-columns: 260px 1fr; gap: 38px; }
  .casita { width: 100%; max-height: 62svh; }

  .login-layout {
    grid-template-columns: 320px 1fr;
    gap: 44px;
    text-align: left;
    justify-items: start;
  }
  .login-texto .regla { margin-inline: 0; }

  .retrato-layout { flex-direction: row; align-items: center; gap: 40px; padding: 0 5%; }
  .retrato-stage { flex: 0 0 40%; }
  .retrato-svg { width: 100%; max-height: 78svh; }
  .quien-texto { flex: 1; max-width: 560px; }
  .quien-cards { min-height: 210px; }
}

@media (min-width: 1040px) {
  .pasos-grid { grid-template-columns: repeat(6, 1fr); }
  .paso-card > p { font-size: 0.76rem; }
}

/* ----------------------------------------------------------
   Pantallas angostas: las escenas sticky tienen que entrar
   completas en una pantalla, así que el detalle se recorta.
   ---------------------------------------------------------- */
@media (max-width: 759px) {
  .valores-svg { max-height: 19svh; }
  .valor-chip, .chip-no { padding: 6px 10px; border-width: 2.5px; box-shadow: 2px 2px 0 var(--tinta); }
  .valor-chip h3, .chip-no h3 { font-size: 0.76rem; line-height: 1.25; }
  .lista-titulo { font-size: 0.84rem; margin-bottom: 6px; gap: 6px; }
  .lista-titulo::before { width: 22px; height: 22px; font-size: 0.76rem; }
  .valores-encabezado .titulo { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .valores-sub { font-size: 0.84rem; }
  .valor-sello {
    font-size: 0.88rem;
    padding: 8px 14px 4px;
    max-width: 78%;
    top: max(15svh, 92px);
  }

  .pasamanos-svg { max-height: 26svh; }
  .paso-card { padding: 8px 10px 7px; box-shadow: 2px 2px 0 var(--tinta); }
  .paso-card h3 { font-size: 0.84rem; }
  .paso-card > p { display: none; }
  .paso-num { width: 26px; height: 26px; font-size: 0.86rem; }
  .pasamanos-encabezado .titulo { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .pasamanos-sub { font-size: 0.82rem; }
  .pasamanos-cierre { font-size: 0.82rem; margin-top: 8px; }

  .titulo-pintura { font-size: clamp(1.15rem, 4.4vw, 1.5rem); margin-bottom: 12px; }
  .habilidad-card { padding: 8px 11px 7px; box-shadow: 2px 2px 0 var(--tinta); }
  .habilidad-card h3 { font-size: 0.82rem; }
  .habilidad-card p { display: none; }
  .bloque-label { font-size: 0.6rem; padding: 3px 11px; }

  .hamaca-svg { max-height: 36svh; }
  .hamaca-card { padding: 14px 16px; font-size: 0.92rem; }
  .hamaca-cards { min-height: 190px; }
}

/* pantallas bajitas (celular apaisado, notebooks chicas) */
@media (max-height: 680px) {
  .valores-svg { max-height: 28svh; }
  .pasamanos-svg { max-height: 30svh; }
  .paso-card > p { display: none; }
  .habilidad-card p { display: none; }
  .valor-chip h3, .chip-no h3 { font-size: 0.76rem; }
  .valor-chip, .chip-no { padding: 6px 10px; }
  .lista-quien ul { gap: 5px; }
  .retrato-svg { max-height: 46svh; }
}

/* ==========================================================
   MOVIMIENTO REDUCIDO (accesibilidad)
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .pop, .titulo-letras .letra { opacity: 1 !important; transform: none !important; }
  .burst { transform: scale(1); }
  .escena { height: auto !important; }
  .escena-sticky { position: static; height: auto; padding: 40px 0; }
  .tobogan-caption { position: static; transform: none; margin: 10px auto 30px; }
  .hamaca-card { position: static; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 14px; }
  .paso-card, .valor-chip, .chip-no, .habilidad-card { opacity: 1; transform: none; filter: none; }
  .escena-pintura .escena-svg, .mancha-wrap { display: none; }
  .pintura-contenido {
    position: static;
    opacity: 1;
    pointer-events: auto;
    background: var(--azul-heroe);
    padding: 60px 0;
  }
  .heroe-empapado { display: none; }
  .fuente-caption, .valores-caption { position: static; opacity: 1; transform: none; margin: 14px auto 30px; }
  .pasamanos-cierre { opacity: 1; transform: none; }
  .valor-sello { display: none; }
  .arcoiris-banda { stroke-dashoffset: 0 !important; }
}