/* =========================================================
   INFANTO-JUVENIL — v3 "fotocopia"
   ========================================================= */

:root{
  --ink:#0d0d0d;
  --paper:#f1ece1;
  --paper-2:#e4dccb;
  --pink:#ff298f;
  --mint:#42ffda;

  --f-shout:"Anton", Impact, "Arial Narrow", sans-serif;
  --f-marker:"Permanent Marker", "Comic Sans MS", cursive;
  --f-type:"Special Elite", "Courier New", monospace;

  --beat:0;              /* 0..1, lo setea el JS con el audio */
  --cursor:url("../img/layout/cursor.png") 4 2, auto;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth;  }
body{
  margin:0;
  font-family:var(--f-type);
  font-size:18px;
  line-height:1.5;
  color:var(--ink);
  background:var(--ink);
  overflow-x:hidden;
  cursor:var(--cursor);
}
img,video,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
::selection{ background:var(--pink); color:var(--ink); }

.skip{
  position:fixed; left:12px; top:-60px; z-index:200;
  padding:8px 14px; background:var(--mint); font-family:var(--f-marker);
  transition:top .2s;
}
.skip:focus{ top:12px; }

:focus-visible{ outline:3px dashed var(--pink); outline-offset:4px; }

/* ---------- Grano de fotocopia sobre todo ---------- */
body::after{
  content:""; position:fixed; inset:-50%; z-index:150; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.22;
  animation:grain .5s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-1%,3%)} 100%{transform:translate(3%,-1%)}
}

.wrap{ width:min(1120px, 100% - 32px); margin-inline:auto; position:relative; }

/* ---------- Ransom note (letras recortadas) ---------- */
.rn{ display:inline-block; white-space:nowrap; }
.rn-l{
  display:inline-block;
  padding:.02em .08em;
  margin:0 .015em;
  line-height:1;
  transform:rotate(var(--lr,0deg)) translateY(var(--ly,0));
  background:var(--lb,transparent);
  color:var(--lc,inherit);
  font-family:var(--lf,inherit);
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.rn-sp{ display:inline-block; width:.35em; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.hero-bg video{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.7) brightness(.95);
  transform:scale(calc(1.08 + var(--beat) * .06));
}
.hero-tint{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 45%, transparent 0 35%, rgba(13,13,13,.7) 80%),
    var(--mint);
  mix-blend-mode:multiply;
}
.hero-bg::after{
  /* levanta las sombras hacia el verde (duotono) */
  content:""; position:absolute; inset:0;
  background:#00d2a8;
  mix-blend-mode:screen;
  pointer-events:none;
}
.hero-stage{
  position:relative; z-index:1; text-align:center;
  width:min(560px,100%); padding:40px 16px 120px;
}
.hero-logo{ position:relative; display:inline-block; animation:slam .9s cubic-bezier(.2,1.4,.4,1) both .2s; }
.hero-logo .beat{
  display:block;
  transform:scale(calc(1 + var(--beat) * .12)) rotate(calc(var(--beat) * -3deg));
  transition:transform .05s linear;
}
.hero-logo img{
  width:min(480px, 80vw, 50svh); height:auto;
  filter:drop-shadow(8px 8px 0 var(--pink)) drop-shadow(-4px -2px 0 var(--mint));
  animation:jitter 3.4s steps(1) infinite 1.4s;
}
@keyframes slam{
  0%{ transform:scale(3.2) rotate(-14deg); opacity:0; filter:blur(8px); }
  55%{ transform:scale(.92) rotate(3deg); opacity:1; filter:blur(0); }
  75%{ transform:scale(1.04) rotate(-1deg); }
  100%{ transform:none; }
}
@keyframes jitter{
  0%,100%{ transform:none; }
  4%{ transform:translate(-3px,2px) rotate(-1deg); }
  8%{ transform:translate(3px,-2px) skewX(4deg); filter:drop-shadow(8px 8px 0 var(--mint)) drop-shadow(-6px 0 0 var(--pink)); }
  12%{ transform:none; }
  60%{ transform:translate(2px,0) rotate(.6deg); }
  62%{ transform:none; }
}
/* sacudón de pantalla cuando cae el logo */
.hero.shake{ animation:shake .4s linear; }
@keyframes shake{
  0%,100%{ transform:none; }
  20%{ transform:translate(-8px,5px) rotate(-.6deg); }
  40%{ transform:translate(7px,-6px) rotate(.5deg); }
  60%{ transform:translate(-5px,3px); }
  80%{ transform:translate(4px,-2px); }
}

.hero-tag{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin:16px auto 0;
  font-family:var(--f-type); font-size:clamp(16px, 2.2vw, 22px);
  text-transform:uppercase; letter-spacing:.08em;
}
.hero-tag span{
  display:inline-block; padding:.2em .6em .15em;
  background:var(--ink); color:var(--paper);
  box-shadow:3px 3px 0 var(--pink);
  opacity:0; animation:tagIn .45s cubic-bezier(.3,1.6,.5,1) forwards 1.05s;
}
.hero-tag span:first-child{ --tr:-1.5deg; }
.hero-tag span:last-child{ --tr:1.2deg; animation-delay:1.25s; background:var(--paper); color:var(--ink); }
@keyframes tagIn{
  from{ opacity:0; transform:translateY(-30px) rotate(calc(var(--tr) * 6)) scale(1.3); }
  to{ opacity:1; transform:rotate(var(--tr)); }
}
@keyframes drop{
  from{ opacity:0; transform:translateY(-60px) rotate(calc(var(--lr) * 6)) scale(1.6); }
  to{ opacity:1; transform:rotate(var(--lr)) translateY(var(--ly)); }
}

@keyframes pop{ from{ transform:scale(0) rotate(-40deg); opacity:0; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-caras{
  position:relative; z-index:1;
  width:min(330px, 66vw); margin:10px auto 0;
  animation:rise .9s cubic-bezier(.2,1.5,.4,1) both 1.6s;
  cursor:var(--cursor);
}
@keyframes rise{ from{ transform:translateY(90px) scale(.6); opacity:0; } }
.hero-caras img{ width:100%; height:auto; filter:drop-shadow(0 -2px 0 var(--paper)); }
.hero-caras:focus-visible{ outline-offset:8px; }

/* la baba de Oscar */
.baba{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.baba g{ transform-box:fill-box; }
.boca{ transform-origin:50% 0; transform:scale(.2, 0); transition:transform .18s cubic-bezier(.3,1.8,.5,1); }
.hilo{ transform-origin:50% 0; transform:scaleY(0); }
.gota{ opacity:0; transform-origin:50% 0; }
.hero-caras:hover .boca,.hero-caras.babea .boca,.hero-caras:focus-visible .boca{ transform:none; }
.hero-caras:hover .hilo,.hero-caras.babea .hilo,.hero-caras:focus-visible .hilo{ animation:hilo 1.7s cubic-bezier(.5,0,.6,1) infinite .15s; }
.hero-caras:hover .gota,.hero-caras.babea .gota,.hero-caras:focus-visible .gota{ animation:gota 1.7s cubic-bezier(.5,0,.6,1) infinite .15s; }
@keyframes hilo{
  0%{ transform:scaleY(0) rotate(0); }
  30%{ transform:scaleY(.5) rotate(4deg); }
  55%{ transform:scaleY(.85) rotate(-3deg); }
  62%{ transform:scaleY(1) rotate(1deg); }
  66%{ transform:scaleY(.25) rotate(6deg); }
  80%{ transform:scaleY(.4) rotate(-4deg); }
  100%{ transform:scaleY(0) rotate(0); }
}
@keyframes gota{
  0%,58%{ opacity:0; transform:translateY(-22px) scale(.4,.6); }
  62%{ opacity:1; transform:translateY(0) scale(1,1.2); }
  66%{ opacity:1; transform:translateY(6px) scale(.9,1.3); }
  92%{ opacity:1; transform:translateY(70px) scale(.8,1.4); }
  100%{ opacity:0; transform:translateY(80px) scale(.8,1.4); }
}

/* cintas marquee */
.tape{
  position:absolute; left:-5%; width:110%;
  overflow:hidden; white-space:nowrap;
  font-family:var(--f-shout); font-size:clamp(18px,2.4vw,28px); letter-spacing:.06em;
  padding:8px 0;
  box-shadow:0 4px 0 rgba(0,0,0,.4);
}
.tape-track{ display:inline-flex; animation:marquee 26s linear infinite; }
.tape-track span{ padding-right:0; }
.tape-a{ bottom:24px; background:var(--pink); color:var(--ink); transform:rotate(-2.5deg); z-index:2; }
.tape-b{ bottom:30px; background:var(--ink); color:var(--mint); transform:rotate(2deg); }
.tape-b .tape-track{ animation-direction:reverse; animation-duration:32s; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================================================
   Rasgado de papel entre secciones
   ========================================================= */
.rip{
  position:absolute; left:0; right:0; height:34px; z-index:3;
  background:inherit;
  clip-path:polygon(0 100%,0 40%,4% 70%,7% 20%,11% 60%,15% 10%,19% 55%,23% 30%,27% 80%,31% 25%,36% 65%,40% 5%,44% 50%,49% 20%,53% 75%,57% 30%,61% 60%,66% 0,70% 55%,74% 25%,79% 70%,83% 15%,87% 60%,91% 30%,95% 75%,100% 20%,100% 100%);
}
.rip-top{ top:-33px; }

.section-title{
  font-family:var(--f-shout); font-weight:400; text-transform:uppercase;
  font-size:clamp(34px, 9vw, 128px); line-height:.95; letter-spacing:.01em;
  margin-bottom:36px;
}
.section-title .rn-l{ opacity:0; }
.section-title.in .rn-l{ animation:drop .45s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay:calc(var(--i) * 45ms); }
.section-title.light{ color:var(--paper); }
.kicker{ font-size:20px; margin:-18px 0 40px; max-width:40ch; }

/* =========================================================
   HISTORIA
   ========================================================= */
.historia{
  position:relative; padding:110px 0 120px;
  background:var(--paper);
  background-image:radial-gradient(rgba(0,0,0,.13) 1.2px, transparent 1.4px);
  background-size:12px 12px;
}
.manifiesto{
  font-family:var(--f-type);
  font-size:clamp(28px, 4.6vw, 56px); line-height:1.25;
  max-width:22ch;
}
.manifiesto .w{ display:inline-block; opacity:0; transform:translateY(.6em) rotate(4deg); }
.manifiesto.in .w{ animation:wordIn .35s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay:calc(var(--i) * 70ms); }
@keyframes wordIn{ to{ opacity:1; transform:none; } }
.manifiesto mark{ background:none; color:inherit; }
.manifiesto mark .w{
  background:var(--mint); padding:0 .12em; margin-top:.08em;
  box-shadow:3px 3px 0 var(--ink);
}
.manifiesto strong{ font-weight:400; }
.manifiesto .hl-pink .w{ background:var(--pink); color:var(--ink); padding:0 .12em; box-shadow:3px 3px 0 var(--ink); }

.historia-ctas{ display:flex; flex-wrap:wrap; gap:18px; margin-top:48px; }
.btn-punk{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px;
  font-family:var(--f-marker); font-size:22px; text-decoration:none;
  background:var(--ink); color:var(--paper);
  box-shadow:6px 6px 0 var(--pink);
  transform:rotate(-1.5deg);
  transition:transform .15s, box-shadow .15s, background .15s;
  cursor:var(--cursor);
}
.btn-punk.btn-alt{ background:var(--pink); color:var(--ink); box-shadow:6px 6px 0 var(--ink); transform:rotate(1.5deg); }
.btn-punk:hover{ transform:rotate(0) translate(-3px,-3px); box-shadow:10px 10px 0 var(--mint); }
.btn-punk:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--mint); }

.stamp{
  position:absolute; right:6%; bottom:16%;
  font-family:var(--f-shout); font-size:clamp(38px,6vw,72px); letter-spacing:.08em;
  color:var(--pink); border:6px solid var(--pink); padding:4px 18px;
  transform:rotate(-14deg) scale(2.5); opacity:0;
  mix-blend-mode:multiply;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.08' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.08' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;
}
.stamp.in{ animation:stamp .35s cubic-bezier(.5,0,.7,1.6) forwards .9s; }
@keyframes stamp{ to{ opacity:.85; transform:rotate(-14deg) scale(1); } }

/* =========================================================
   INTEGRANTES
   ========================================================= */
.integrantes{
  position:relative; padding:110px 0 120px;
  background:var(--ink); color:var(--paper);
}
.integrantes .wrap{ z-index:1; }
.integrantes .rip{ z-index:4; }

.polaroid{
  position:relative; background:var(--paper); color:var(--ink);
  padding:14px 14px 12px;
  box-shadow:10px 12px 0 rgba(0,0,0,.5);
}
.polaroid img{ width:100%; height:auto; filter:contrast(1.1) saturate(1.15); }
.polaroid figcaption{
  margin-top:10px; padding:0 4px;
  font-family:var(--f-marker); font-size:clamp(15px, 2vw, 20px); line-height:1.3;
}
.polaroid-big{ width:min(900px, 100%); margin:0 auto; transform:rotate(-1.5deg); }
.tape-piece{
  position:absolute; width:130px; height:34px;
  background:rgba(241,236,225,.7);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  clip-path:polygon(3% 0,97% 4%,100% 30%,96% 55%,100% 100%,2% 96%,0 60%,4% 35%);
}
.tp-1{ top:-14px; left:-30px; transform:rotate(-30deg); }
.tp-2{ top:-12px; right:-34px; transform:rotate(28deg); background:rgba(66,255,218,.7); }

.foto{ position:relative; }
.flechas{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.flechas path{ fill:none; stroke:var(--pink); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(2px 2px 0 var(--ink)); }
.flechas .linea{ stroke-dasharray:1; stroke-dashoffset:1; }
.flechas .punta{ opacity:0; }
.polaroid.in .flechas .linea{ animation:trazo .5s ease-out forwards; animation-delay:calc(.8s + var(--i) * .25s); }
.polaroid.in .flechas .punta{ animation:aparece .15s forwards; animation-delay:calc(1.25s + var(--i) * .25s); }
@keyframes trazo{ to{ stroke-dashoffset:0; } }
@keyframes aparece{ to{ opacity:1; } }
.etiqueta{
  position:absolute; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:.2em .55em .3em;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-marker); font-size:clamp(11px, 1.6vw, 16px); line-height:1.05;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(var(--r)) scale(0); opacity:0;
}
.etiqueta b{ font-family:var(--f-shout); font-weight:400; font-size:1.6em; text-transform:uppercase; line-height:1; }
.polaroid.in .etiqueta{ animation:etq .4s cubic-bezier(.3,1.8,.5,1) forwards; animation-delay:calc(.6s + var(--i) * .25s); }
@keyframes etq{ to{ transform:rotate(var(--r)) scale(1); opacity:1; } }
.etiqueta:nth-of-type(odd){ background:var(--mint); }
@keyframes glitch{
  0%{ transform:translate(0); clip-path:inset(0 0 0 0); }
  20%{ transform:translate(-4px,2px); clip-path:inset(10% 0 60% 0); }
  40%{ transform:translate(4px,-2px); clip-path:inset(50% 0 20% 0); }
  60%{ transform:translate(-2px,0); clip-path:inset(0 0 0 0); }
  80%{ transform:translate(3px,1px); clip-path:inset(30% 0 40% 0); }
  100%{ transform:none; clip-path:inset(0); }
}
@keyframes rgb{
  0%{ text-shadow:-3px 0 var(--pink), 3px 0 var(--mint); }
  50%{ text-shadow:3px 0 var(--pink), -3px 0 var(--mint); }
}

/* =========================================================
   DISCOGRAFÍA
   ========================================================= */
.discografia{
  position:relative; padding:110px 0 130px;
  background:#e8197a; color:var(--ink);
}
.discos{
  display:grid;
  grid-template-columns:1.5fr 1fr .6fr;
  gap:36px 30px; align-items:end;
}
.disco{ position:relative; display:block; text-decoration:none; cursor:var(--cursor); transform:rotate(var(--r,0deg)); }
.sleeve{ position:relative; }
.sleeve img{ position:relative; z-index:1; width:100%; height:auto; box-shadow:8px 8px 0 var(--ink); }
.vinilo{
  position:absolute; top:4%; left:4%; width:92%; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle, var(--mint) 0 13%, var(--ink) 13.5% 15%, transparent 15.5%),
    repeating-radial-gradient(circle, #111 0 2px, #222 2px 4px);
  box-shadow:0 0 0 2px #000;
  transition:transform .6s cubic-bezier(.3,1.4,.5,1);
}
.disco:hover{ z-index:3; }
.cd{
  position:absolute; top:3%; left:3%; width:94%; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle, #f4f4f4 0 14%, rgba(0,0,0,.25) 14.5% 15.2%, transparent 15.7%),
    conic-gradient(from 20deg, #e9e9e9, #bff7ec, #f7c9e2, #f6f2c8, #d3d3ff, #e9e9e9 50%, #c7f0ff, #ffd2ea, #f3f0c4, #e9e9e9);
  -webkit-mask:radial-gradient(circle, transparent 0 6%, #000 6.5%);
          mask:radial-gradient(circle, transparent 0 6%, #000 6.5%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
  transition:transform .6s cubic-bezier(.3,1.4,.5,1);
}
.disco:hover .cd{ transform:translateY(-46%) rotate(-160deg); }
.disco-main:hover .vinilo{ transform:translateX(52%) rotate(200deg); }
.disco-info{ margin-top:16px; }
.disco-info h3{ font-family:var(--f-shout); font-weight:400; font-size:28px; line-height:1; text-transform:uppercase; }
.disco-main .disco-info h3{ font-size:44px; }
.disco-info p{ font-family:var(--f-marker); }
.disco-info small{ font-size:14px; display:block; }
.badge{
  position:absolute; top:-18px; left:-18px; z-index:2;
  background:var(--ink); color:var(--mint); padding:6px 12px; font-family:var(--f-shout); font-size:20px;
  transform:rotate(-10deg); box-shadow:3px 3px 0 var(--paper);
}
.disco-tape img{ width:100%; height:auto; filter:drop-shadow(6px 6px 0 var(--ink)); transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
.disco-tape:hover img{ transform:rotate(calc(var(--r) * -1.5)) scale(1.06); }
.disco-sq:hover .sleeve img, .disco-main:hover .sleeve img{ transform:rotate(-2deg); }
.sleeve img{ transition:transform .3s; }

/* =========================================================
   LETRAS
   ========================================================= */
.letras{
  position:relative; padding:110px 0 120px;
  background:#1a1a1a; color:var(--paper);
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
}
.letras-grid{ display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:start; }
.temas{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.temas button{
  font-family:var(--f-marker); font-size:19px; line-height:1.2; text-align:left;
  padding:4px 10px; color:var(--paper);
  transition:transform .15s, background .15s, color .15s;
  cursor:var(--cursor);
}
.temas button[data-track]::after{ content:" ♪"; color:var(--mint); }
.temas button:hover{ background:var(--pink); color:var(--ink); transform:rotate(-2deg) translateX(6px); }
.temas button[aria-selected="true"]{ background:var(--mint); color:var(--ink); transform:rotate(-1.5deg) translateX(10px); box-shadow:4px 4px 0 var(--pink); }
.temas button[aria-selected="true"]::after{ color:var(--ink); }

.hoja{
  position:relative;
  background:var(--paper); color:var(--ink);
  box-shadow:12px 12px 0 var(--pink);
  transform:rotate(.8deg);
  background-image:
    linear-gradient(90deg, transparent 54px, rgba(255,41,143,.45) 54px 56px, transparent 56px),
    repeating-linear-gradient(transparent 0 31px, rgba(13,13,13,.13) 31px 32px);
}
.hoja-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:34px 30px 6px 74px;
}
.hoja-titulo{ font-family:var(--f-shout); font-weight:400; font-size:clamp(30px, 4vw, 46px); line-height:1; text-transform:uppercase; }
.hoja-play{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:var(--f-marker); background:var(--ink); color:var(--mint);
  padding:6px 12px; transform:rotate(3deg); box-shadow:3px 3px 0 var(--pink);
  cursor:var(--cursor);
}
.hoja-play[hidden]{ display:none; }
.hoja-play:hover{ background:var(--pink); color:var(--ink); }
.hoja-body{ height:min(520px, 62vh); overflow:auto; padding:10px 30px 36px 74px; overscroll-behavior:contain; }
.hoja-body p{ font-size:18px; line-height:32px; margin-bottom:32px; }
.hoja-body footer{ font-family:var(--f-marker); color:var(--pink); transform:rotate(-2deg); display:inline-block; }
.hoja.swap .hoja-body,.hoja.swap .hoja-titulo{ animation:xerox .45s steps(5); }
@keyframes xerox{
  0%{ filter:contrast(4) brightness(1.6); transform:translateX(-12px) skewX(10deg); opacity:.2; }
  40%{ filter:contrast(2) brightness(.6); transform:translateX(8px); opacity:.7; }
  100%{ filter:none; transform:none; opacity:1; }
}

/* =========================================================
   MENSAJES
   ========================================================= */
.mensajes{
  position:relative; padding:110px 0 120px;
  background:var(--mint); color:var(--ink);
}
.notas{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:40px 34px; align-items:start; }
.nota{
  position:relative; z-index:2;
  background:var(--paper); padding:34px 26px 24px;
  box-shadow:8px 8px 0 var(--ink);
  transform:rotate(var(--r));
  font-family:var(--f-marker); font-size:19px; line-height:1.35;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1);
}
.nota:nth-of-type(2){ background:var(--pink); margin-top:50px; }
.nota:nth-of-type(3){ background:var(--ink); color:var(--paper); }
.nota:nth-of-type(3)::before{ background:var(--pink); }
.nota::before{
  /* chinche */
  content:""; position:absolute; top:-12px; left:50%; width:26px; height:26px; margin-left:-13px;
  border-radius:50%; background:var(--ink); box-shadow:inset -4px -4px 0 rgba(255,255,255,.18);
  box-shadow:2px 4px 0 rgba(0,0,0,.35);
}
.nota:hover{ transform:rotate(0) scale(1.04); }
.nota cite{ display:block; margin-top:14px; font-style:normal; font-family:var(--f-type); font-size:16px; }
.respuesta{
  margin-top:22px; padding:14px 16px; font-size:22px;
  background:var(--pink); color:var(--ink); transform:rotate(-3deg);
  box-shadow:4px 4px 0 var(--ink);
}
.respuesta cite{ color:var(--ink); margin-top:6px; }

/* =========================================================
   REDES
   ========================================================= */
.redes{
  position:relative;
  background:var(--ink); color:var(--paper);
  padding:46px 0 50px;
}
.redes-mini{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; }
.redes-mini p{ font-family:var(--f-marker); font-size:16px; opacity:.7; }
.redes-mini{ gap:12px 40px; }
.redes-mini .grupo{ display:flex; align-items:center; gap:10px; }
.redes-mini ul{ display:flex; gap:4px; }
.redes-mini a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; cursor:var(--cursor); transition:background .15s, color .15s, transform .15s; }
.redes-mini svg{ width:20px; height:20px; }
.redes-mini a:hover{ background:var(--pink); color:var(--ink); transform:rotate(-8deg) scale(1.1); }
.clubfans{
  position:absolute; z-index:3; top:150px; left:62%;
  display:block; width:330px; transform:rotate(var(--r)); transition:transform .2s;
}
.clubfans img{ width:100%; height:auto; }
.clubfans:hover{ transform:rotate(-2deg) scale(1.06); }
.globo{
  position:absolute; pointer-events:none; height:auto;
  opacity:0; transform:scale(.3) rotate(-6deg); transform-origin:50% 100%;
  transition:transform .25s cubic-bezier(.3,1.8,.5,1), opacity .15s;
}
.clubfans .globo-over{ width:136%; right:-19%; bottom:86%; }
.clubfans .globo-like{ width:50%; right:-22%; bottom:86%; }
.clubfans:hover .globo-over,.clubfans:focus-visible .globo-over{ opacity:1; transform:none; }
.clubfans.like .globo-over{ opacity:0; transform:scale(.3); }
.clubfans.like .globo-like{ opacity:1; transform:none; }

/* =========================================================
   FOOTER
   ========================================================= */

/* =========================================================
   PLAYER
   ========================================================= */
.player{
  --p:0;
  position:fixed; right:20px; top:20px; z-index:120;
  font-size:15px; width:20em;
  padding:.65em .65em 0;
  color:var(--paper);
  border-radius:.9em;
  border:3px solid var(--paper);
  box-shadow:7px 7px 0 var(--pink);
  /* carcasa + 4 tornillos */
  background:
    radial-gradient(circle at .55em .55em, #8a8a8a 0 .18em, #333 .2em .3em, transparent .32em),
    radial-gradient(circle at calc(100% - .55em) .55em, #8a8a8a 0 .18em, #333 .2em .3em, transparent .32em),
    radial-gradient(circle at .55em calc(100% - .55em), #8a8a8a 0 .18em, #333 .2em .3em, transparent .32em),
    radial-gradient(circle at calc(100% - .55em) calc(100% - .55em), #8a8a8a 0 .18em, #333 .2em .3em, transparent .32em),
    linear-gradient(160deg, #262626, #121212);
  transform:translateY(calc(-100% - 40px));
  animation:playerIn .6s cubic-bezier(.2,1.3,.4,1) forwards 2.6s;
}
@keyframes playerIn{ to{ transform:none; } }

/* etiqueta */
.c-label{
  position:relative; overflow:hidden;
  background:var(--paper); color:var(--ink);
  border-radius:.35em;
  padding:.4em .6em 0;
}
.c-top{ display:flex; align-items:center; gap:.5em; }
.c-side{
  flex:none; width:1.45em; height:1.45em; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  font-family:var(--f-shout); font-size:.85em;
}
.p-title{
  flex:1; min-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--f-marker); font-size:1.05em; line-height:1.45;
  border-bottom:1px solid rgba(13,13,13,.35);
}
.p-title-text{ display:inline-block; }
.p-title.long .p-title-text{ animation:titleScroll 9s linear infinite alternate; }
@keyframes titleScroll{ 0%,15%{ transform:translateX(0);} 85%,100%{ transform:translateX(var(--overflow,0)); } }
.p-time{ flex:none; font-size:.75em; }

/* ventana con bobinas */
.c-window{
  position:relative; overflow:hidden;
  height:4.3em; margin:.45em 1.4em .4em;
  background:#0d0d0d; border-radius:2.15em;
  box-shadow:inset 0 0 0 .18em #2b2b2b;
}
.p-viz{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none; }
.reel{
  position:absolute; top:50%; width:4em; height:4em; margin-top:-2em;
  display:grid; place-items:center;
}
.reel-l{ left:.15em; }
.reel-r{ right:.15em; }
.cinta{
  position:absolute; border-radius:50%;
  background:repeating-radial-gradient(circle, #4a2c1c 0 1px, #2a170f 1px 2.5px);
  box-shadow:0 0 0 1px #000;
  transition:width .3s linear, height .3s linear;
}
.reel-l .cinta{ width:calc(2.1em + 1.8em * (1 - var(--p))); height:calc(2.1em + 1.8em * (1 - var(--p))); }
.reel-r .cinta{ width:calc(2.1em + 1.8em * var(--p)); height:calc(2.1em + 1.8em * var(--p)); }
.hub{
  position:relative; width:1.75em; height:1.75em; border-radius:50%;
  background:var(--paper); box-shadow:inset 0 0 0 .12em #bdb6a6;
  display:grid; place-items:center;
}
.hub::before{
  content:""; width:.95em; height:.95em; border-radius:50%;
  background:
    radial-gradient(circle, var(--paper) 0 .2em, transparent .21em),
    repeating-conic-gradient(var(--ink) 0 22deg, var(--paper) 22deg 60deg);
}
.player.playing .hub{ animation:spin 1.6s linear infinite; }

.p-bar{
  height:.4em; margin:0 .2em .45em; background:#cfc8b8; cursor:var(--cursor);
  clip-path:polygon(0 20%,8% 0,20% 25%,35% 5%,50% 20%,62% 0,78% 30%,90% 5%,100% 20%,100% 80%,92% 100%,80% 75%,66% 95%,50% 80%,36% 100%,22% 75%,10% 100%,0 80%);
}
.p-fill{ height:100%; width:0; background:var(--ink); }
.c-stripe{
  display:flex; justify-content:space-between;
  margin:0 -.6em; padding:.15em .6em .2em;
  background:var(--pink); color:var(--ink);
  font-family:var(--f-shout); font-size:.8em; letter-spacing:.06em; text-transform:uppercase;
}

/* parte de abajo (trapecio) con controles */
.c-bottom{
  display:flex; align-items:center; justify-content:center; gap:.7em;
  width:74%; height:2.9em; margin:.4em auto 0;
  background:
    radial-gradient(circle at 12% 62%, #0d0d0d 0 .26em, transparent .28em),
    radial-gradient(circle at 88% 62%, #0d0d0d 0 .26em, transparent .28em),
    #2c2c2c;
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
}
.p-btn{ width:1.9em; height:1.9em; display:grid; place-items:center; cursor:var(--cursor); transition:color .15s, transform .15s; }
.p-btn svg{ width:1.1em; height:1.1em; }
.p-btn:hover{ color:var(--mint); transform:scale(1.2); }
.p-play{ width:2.3em; height:2.3em; background:var(--pink); color:var(--ink); border-radius:50%; }
.p-play:hover{ background:var(--mint); color:var(--ink); }

.p-list-toggle{
  position:absolute; top:-.9em; left:-1em;
  font-family:var(--f-shout); font-size:.95em; letter-spacing:.05em;
  background:var(--mint); color:var(--ink); padding:.3em .8em; transform:rotate(-6deg);
  box-shadow:3px 3px 0 var(--ink); cursor:var(--cursor);
}
/* hoja de cuaderno con la lista de temas */
.p-list{
  --row:2.25em;
  position:absolute; right:-3px; top:calc(100% + 16px);
  width:min(22em, calc(100vw - 28px)); max-height:calc(100vh - 100% - 60px); overflow:auto;
  color:var(--ink);
  background:
    radial-gradient(circle at 1.1em 50%, var(--ink) 0 .32em, transparent .34em) 0 calc(var(--row) * .5) / 100% calc(var(--row) * 3) repeat-y,
    linear-gradient(90deg, transparent 2.3em, rgba(255,41,143,.6) 2.3em calc(2.3em + 2px), transparent calc(2.3em + 2px)),
    repeating-linear-gradient(transparent 0 calc(var(--row) - 1px), rgba(13,13,13,.16) calc(var(--row) - 1px) var(--row)),
    var(--paper);
  box-shadow:8px 8px 0 var(--pink);
  padding:var(--row) 0 calc(var(--row) * .5);
  clip-path:polygon(0 .5em,4% 0,9% .45em,15% .05em,21% .5em,28% .1em,34% .45em,41% 0,48% .5em,55% .1em,62% .45em,69% 0,76% .5em,83% .1em,90% .45em,96% 0,100% .4em,100% 100%,0 100%);
  transform-origin:50% 0;
  transform:scaleY(0) rotate(-2deg); opacity:0; visibility:hidden;
  transition:transform .45s cubic-bezier(.3,1.4,.5,1), opacity .15s, visibility .45s;
  counter-reset:t;
}
.p-list::before{
  content:"Lado A"; position:absolute; top:.15em; left:2.9em;
  font-family:var(--f-marker); font-size:1.05em; color:var(--pink);
  transform:rotate(-2deg);
}
.player.list-open .p-list{ transform:rotate(1deg); opacity:1; visibility:visible; }
/* en escritorio la hoja queda siempre a la vista */
@media (min-width:761px){
  .p-list-toggle{ display:none; }
  .p-list{
    opacity:1; visibility:visible; transform:rotate(1deg);
    transition:none;
    animation:unroll .7s cubic-bezier(.3,1.4,.5,1) both 3.1s;
  }
}
@keyframes unroll{
  from{ transform:scaleY(0) rotate(-2deg); opacity:0; }
  to{ transform:rotate(1deg); opacity:1; }
}
.p-list button{
  display:flex; justify-content:space-between; align-items:center; gap:.6em; width:100%;
  height:var(--row); padding:0 1em 0 2.9em; text-align:left;
  font-family:var(--f-marker); font-size:1em; line-height:1;
  cursor:var(--cursor);
}
.p-list button::before{ counter-increment:t; content:counter(t) "."; font-family:var(--f-marker); opacity:.45; min-width:1.2em; }
.p-list button span:first-of-type{ flex:1; }
.p-list button span:last-of-type{ font-size:.85em; opacity:.6; }
.p-list button:hover{ background:rgba(66,255,218,.45); }
.p-list button[aria-current="true"]{ color:var(--pink); }
.p-list button[aria-current="true"] span:first-of-type{ text-decoration:underline wavy var(--pink); text-underline-offset:.25em; }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{ opacity:0; }
.reveal.in[data-fx="drop"]{ animation:revDrop .7s cubic-bezier(.2,1.5,.4,1) forwards; animation-delay:var(--d,0s); }
.reveal.in[data-fx="slam"]{ animation:revSlam .55s cubic-bezier(.2,1.5,.4,1) forwards; animation-delay:var(--d,0s); }
.reveal.in[data-fx="pin"]{ animation:revPin .6s cubic-bezier(.3,1.7,.5,1) forwards; animation-delay:var(--d,0s); }
@keyframes revDrop{ from{ opacity:0; transform:translateY(-80px) rotate(calc(var(--r,0deg) * -4)); } to{ opacity:1; transform:rotate(var(--r,0deg)); } }
@keyframes revSlam{ from{ opacity:0; transform:scale(1.6) rotate(calc(var(--r,0deg) * 3)); } to{ opacity:1; transform:rotate(var(--r,0deg)); } }
@keyframes revPin{ from{ opacity:0; transform:scale(.3) rotate(-30deg); } to{ opacity:1; transform:rotate(var(--r,0deg)); } }

/* manchas al hacer click */
.splat{
  position:fixed; z-index:140; pointer-events:none;
  font-family:var(--f-shout); font-size:42px; line-height:1;
  transform:translate(-50%,-50%) scale(0) rotate(var(--sr));
  animation:splat .8s cubic-bezier(.3,1.8,.5,1) forwards;
  text-shadow:3px 3px 0 var(--ink);
}
@keyframes splat{
  40%{ transform:translate(-50%,-50%) scale(1.2) rotate(var(--sr)); opacity:1; }
  100%{ transform:translate(-50%,-90%) scale(.9) rotate(var(--sr)); opacity:0; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .clubfans{ position:relative; top:auto; left:auto; width:220px; margin:0 auto 10px; }
  .discos{ grid-template-columns:1fr 1fr; }
  .disco-tape{ max-width:220px; justify-self:center; }
  .notas{ grid-template-columns:1fr; max-width:560px; }
  .nota:nth-of-type(2){ margin-top:0; }
}
@media (max-width:760px){
  body{ font-size:17px; }
  body{ padding-bottom:170px; }
  .hero-stage{ padding:40px 16px 120px; }
  .hero{ min-height:640px; }
  .letras-grid{ grid-template-columns:1fr; gap:26px; }
  .temas{ flex-direction:row; overflow-x:auto; padding:6px 4px 14px; gap:8px; scrollbar-width:thin; }
  .temas button{ flex:none; border:2px solid var(--paper); }
  .hoja-head{ padding:30px 18px 6px 40px; flex-wrap:wrap; }
  .hoja-body{ padding:8px 18px 30px 40px; }
  .hoja{ background-image:
    linear-gradient(90deg, transparent 26px, rgba(255,41,143,.45) 26px 28px, transparent 28px),
    repeating-linear-gradient(transparent 0 31px, rgba(13,13,13,.13) 31px 32px); }
  .hoja-body p{ font-size:16px; }
  .player{ font-size:11.5px; left:10px; bottom:10px; right:auto; top:auto; transform:translateY(calc(100% + 40px)); }
  .p-list-toggle{ left:auto; right:-1em; transform:rotate(6deg); }
  .p-list{ right:auto; left:-3px; top:auto; bottom:calc(100% + 16px); max-height:60vh; transform-origin:50% 100%; }
  .stamp{ right:4%; bottom:5%; }
}
@media (max-width:480px){
  .etiqueta{ font-size:8.5px; padding:.15em .4em .25em; }
  .discos{ grid-template-columns:1fr; }
    }

/* =========================================================
   Menos movimiento
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  body::after{ animation:none; }
  .hero-bg video{ display:none; }
  .hero-bg{ background:url(../img/v3/historia-poster.jpg) center/cover; }
}

/* cuando termina la entrada, vuelve el transform normal (para los hovers) */
.reveal.done{ opacity:1; animation:none; }

.mensajes .section-title{ position:relative; z-index:2; }
.mensajes .kicker{ position:relative; z-index:1; }

/* ---------- arrastrable ---------- */
.rn-l,.hero-tag span,.btn-punk{ position:relative; }
@media (hover:hover){
  .nota,.polaroid-big,.etiqueta,.hero-tag span,.hero-logo,.tape-piece,.section-title .rn-l,.hoja-head,.c-label{ cursor:grab; }
}
.arrastrando{ z-index:60 !important; cursor:grabbing !important; scale:1.04; filter:drop-shadow(6px 10px 0 rgba(13,13,13,.25)); transition:none !important; }
.mensajes .section-title{ font-size:clamp(34px, 7vw, 100px); }