/* SIDE MUSIC BCN
   Una sola idea de movimiento: el logo se construye, se abre, se desmonta,
   se reagrupa y se disuelve. Todo lo demás está quieto. */

@font-face{
  font-family:'SIDE Display';
  src:url(../fonts/archivo-xcond-900.woff2) format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SIDE Mono';
  src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SIDE Mono';
  src:url(../fonts/ibm-plex-mono-500.woff2) format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  --fondo:#0D0C0C;
  --acento:#6D15FC;
  --acento-2:#9F1FFE;
  --texto:#F9F8F5;
  --gris:#7A7A7A;

  --display:'SIDE Display','Arial Narrow',Impact,sans-serif;
  --mono:'SIDE Mono',ui-monospace,Menlo,Consolas,monospace;

  --gutter:clamp(16px,4vw,48px);
  --pad:max(var(--gutter), calc((100vw - 1760px) / 2));
  --copy:clamp(15px, calc(.55vw + 8px), 19px);   /* texto corrido, crece con la pantalla */
  /* Tamaño del logo: manda la altura en escritorio, el ancho en móvil */
  --mark-w:min(64vw, calc(52svh * 0.8916));
  --mark-h:calc(var(--mark-w) * 1.1216);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--fondo); -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--mono); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--acento-2); outline-offset:4px;
}
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,p,figure{ margin:0; }
img{ display:block; max-width:100%; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mono{ font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
.meta{ color:var(--gris); }
.sep, .manifiesto .link{ display:inline-flex; flex-wrap:wrap; gap:4px 1.6em; }
.ep .c{ display:flex; flex-wrap:wrap; gap:0 1.4em; }
.display{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  line-height:.86; letter-spacing:-.01em;
}

/* Grano fino constante */
body::after{
  content:""; position:fixed; inset:-50%; z-index:50; pointer-events:none;
  background:url(../img/grano.webp) repeat; background-size:160px;
  opacity:calc(.075 + var(--nivel, 0) * .1); mix-blend-mode:screen;   /* con audio, el grano late con el bajo */
  animation:grano .6s steps(5) infinite;
}
@keyframes grano{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)}
  60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* ── Logo fijo ─────────────────────────────── */
.mark-layer{  /* sin animación: logo quieto sobre la apertura */
  position:absolute; top:0; left:0; right:0; height:100svh; z-index:1; pointer-events:none;
  display:grid; place-items:center;
}
.motion .mark-layer{ position:fixed; inset:0; height:auto; }
.mark{ width:var(--mark-w); height:var(--mark-h); overflow:visible; will-change:transform; }
.mark .st{ fill:none; stroke:var(--texto); stroke-width:5; opacity:0; }
.mark rect.st{ stroke-width:42.78; stroke-linejoin:miter; stroke-linecap:square; opacity:1; }
.mark .fl{ fill:var(--texto); }
.motion .mark .st{ stroke-dasharray:1 1; stroke-dashoffset:1; opacity:1; }
.motion .mark .fl{ opacity:0; }

/* ── Estructura de secciones ───────────────── */
main{ position:relative; }
section{ position:relative; }
.pin{ position:relative; min-height:100svh; }
.motion .pin{ position:sticky; top:0; height:100svh; min-height:0; overflow:hidden; }
.bg{ position:absolute; inset:0; z-index:0; }
.bg-sticky{ position:sticky; top:0; height:100svh; margin-bottom:-100svh; }
.ap-foto{ position:absolute; inset:0; overflow:hidden; }
.ap-foto .poster{ object-position:50% 50%; filter:contrast(1.05) brightness(.85); }
/* respira despacio aunque no haya scroll: la foto nunca está congelada */
.motion .ap-foto{ animation:respira 16s ease-in-out infinite alternate; }
@keyframes respira{ from{ transform:scale(1); } to{ transform:scale(1.045) translate(-.6%, -.4%); } }
.bg canvas, .bg .still, .bg .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Sustituto mientras no hay material generado: un único foco púrpura */
.bg{ background:
  radial-gradient(60% 45% at 62% 40%, rgba(109,21,252,.22), transparent 70%),
  var(--fondo); }
.bg::after{ /* viñeta para que el texto respire sobre cualquier clip */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,12,12,.55), rgba(13,12,12,.1) 30%, rgba(13,12,12,.1) 70%, rgba(13,12,12,.85));
}

/* 1 · Apertura */
.apertura{ height:100svh; }
.motion .apertura{ height:210svh; }   /* menos recorrido: el scroll responde antes */
.desde{
  position:absolute; left:0; right:0; z-index:2; text-align:center;
  top:calc(50% + var(--mark-h) / 2 + 28px);
  color:var(--texto); letter-spacing:.24em; font-weight:400; line-height:1.6;
  max-width:min(92vw, 640px); margin:0 auto;
}
.motion .desde{ opacity:0; }
.hint{ display:none; }
.motion .hint{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  position:absolute; left:0; right:0; bottom:max(28px, env(safe-area-inset-bottom)); z-index:2;
  color:var(--gris); font-size:10px; letter-spacing:.3em;
}
.motion .hint::after{ content:""; width:1px; height:44px; background:linear-gradient(var(--texto), transparent); transform-origin:top; animation:desliza 1.8s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes desliza{ 0%{ transform:scaleY(0); opacity:1; } 60%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

/* 2 · Manifiesto: plano, sin vídeo */
.manifiesto{ background:var(--fondo); }
.manifiesto .pin{ display:grid; place-items:center; padding:18svh 0; }
.motion .manifiesto{ height:175svh; }
.motion .manifiesto .pin{ padding:0; }
.manifiesto-in{ position:relative; z-index:2; width:min(100%, 1400px); padding:0 var(--gutter); text-align:center; }
.manifiesto .display{ font-size:clamp(2.4rem, min(8.6vw, 9.4svh), 8.6rem); max-width:18ch; margin:0 auto; line-height:.98; text-wrap:balance; }
.manifiesto .link{ display:inline-block; margin-top:clamp(24px,4vh,48px); color:var(--gris); border-bottom:1px solid currentColor; padding-bottom:4px; }
.manifiesto .link:hover{ color:var(--texto); }

/* 3 · Artistas */
.artistas{ min-height:180svh; padding:30svh 0 20svh; }
.artistas .bg::after{ background:rgba(13,12,12,.55); }
.artistas-in{ position:relative; z-index:2; padding:0 var(--pad); }
.artistas h2{ margin-bottom:24px; }
.rejilla{ display:flex; flex-direction:column; gap:40px; }
.art{ position:relative; outline-offset:8px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.art figure{ aspect-ratio:4/5; overflow:hidden; background:#000; max-width:560px; width:100%; }
.art figure a{ display:block; width:100%; height:100%; }
.art figure img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .4s; }
.art figure a:hover img, .art figure a:focus-visible img{ filter:grayscale(1) contrast(1.15) brightness(1.08); }
.art .nombre{ display:block; font-size:clamp(4rem, 22vw, 16rem); margin-top:-.42em; position:relative; }
.art .meta a{ border-bottom:1px solid currentColor; }
.art .meta a:hover{ color:var(--texto); }

@media (min-width:900px){
  /* Las dos fotos siempre a la vista; al pasar por encima la columna activa crece */
  .rejilla{ flex-direction:row; gap:0; border-top:1px solid rgba(249,248,245,.14); }
  .art{ flex:1 1 0; min-width:0; padding:32px 24px 0; border-right:1px solid rgba(249,248,245,.14);
        transition:flex-grow .5s cubic-bezier(.2,.7,.1,1), opacity .5s cubic-bezier(.2,.7,.1,1); }
  .art:last-child{ border-right:0; }
  .art figure{ width:min(78%, 34vw, 680px); max-width:none; }
  .art .nombre{ font-size:clamp(4.5rem, 10.5vw, 13rem); white-space:nowrap; margin-top:-.38em; }
}
@media (min-width:900px) and (hover:hover){
  .rejilla:hover .art, .rejilla:focus-within .art{ flex-grow:.75; opacity:.45; }
  .rejilla .art:hover, .rejilla .art:focus-within{ flex-grow:1.5; opacity:1; }
}

/* 4 · Radio: archivo denso, deliberadamente quieto */
.radio{ padding:22svh var(--pad) 18svh; }
.radio-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px;
             border-bottom:1px solid var(--texto); padding-bottom:16px; }
.radio-head h2{ font-size:clamp(3rem, 12vw, 9rem); }
.radio-head a{ border-bottom:1px solid currentColor; }
.archivo li{ border-bottom:1px solid rgba(249,248,245,.14); }
.ep{
  width:100%; display:grid; grid-template-columns:4.2em 1fr auto; gap:4px 16px; align-items:baseline;
  padding:clamp(14px, 1.2vw, 22px) 0; background:none; border:0; color:var(--texto); text-align:left; cursor:pointer;
  font:inherit; font-size:13px; letter-spacing:.06em;
}
.ep .n{ color:var(--gris); }
.ep .a{ font-family:var(--display); font-weight:900; font-size:clamp(1.4rem, 3.2vw, 3.6rem); line-height:1; letter-spacing:0; }
.ep .y{ color:var(--gris); }
.ep .c{ grid-column:2 / -1; color:var(--gris); font-size:11px; }
.ep:hover .a, .ep[aria-expanded="true"] .a{ color:var(--acento-2); }
.ep .go{ grid-column:3; grid-row:1; color:var(--gris); justify-self:end; padding:6px 10px; white-space:nowrap; }
.ep[aria-expanded="true"] .go{ background:var(--acento); color:var(--texto); }
.ep[aria-expanded="true"]:hover .go{ background:var(--acento-2); }
.player{ position:relative; padding:0 0 18px; }
.player iframe{ width:100%; height:120px; border:0; display:block; }
/* Interferencia: la fila se abre como una señal que entra antes de mostrar el player */
.player .ruido{
  position:absolute; left:0; right:0; top:0; height:120px; pointer-events:none; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(249,248,245,.10) 0 1px, transparent 1px 3px),
    url(../img/grano.webp) repeat, #0D0C0C;
  background-size:auto, 160px;
  animation:ruido .12s steps(3) infinite;
}
.player .ruido::before, .player .ruido::after{
  content:""; position:absolute; left:0; right:0; height:18%; background:var(--acento); mix-blend-mode:screen; opacity:.75;
  animation:banda .5s steps(6) infinite;
}
.player .ruido::after{ background:var(--texto); opacity:.25; height:4%; animation-duration:.37s; animation-direction:reverse; }
.player.sintonizando{ animation:abrir .7s cubic-bezier(.2,.7,.1,1) both; }
.player.sintonizando iframe{ opacity:0; }
.player.listo .ruido{ animation:apagar .35s steps(4) forwards; }
@keyframes abrir{ 0%{ clip-path:inset(48% 0 48% 0); } 35%{ clip-path:inset(46% 0 46% 0); } 100%{ clip-path:inset(0 0 0 0); } }
@keyframes ruido{ 0%{ background-position:0 0, 0 0; } 50%{ background-position:0 2px, -37px 21px; } 100%{ background-position:0 1px, 23px -14px; } }
@keyframes banda{ 0%{ top:8%; transform:translateX(-3%); } 33%{ top:61%; transform:translateX(2%); } 66%{ top:30%; } 100%{ top:84%; transform:translateX(-1%); } }
@keyframes apagar{ 0%{ opacity:1; } 50%{ opacity:.3; } 75%{ opacity:.8; } 100%{ opacity:0; visibility:hidden; } }
@media (min-width:760px){
  .ep{ grid-template-columns:5em minmax(0,1fr) 4em minmax(0,18em) 6em; }
  .ep .c{ grid-column:auto; font-size:11px; }
  .ep .go{ grid-column:auto; grid-row:auto; text-align:right; }
}

/* 5 · Cierre */
.cierre-in{
  position:relative; min-height:100svh; z-index:2; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; padding:0 var(--gutter);
}
.motion .cierre{ height:230svh; }
.pregunta-capa{ display:none; }
.motion .pregunta-capa{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:0 var(--gutter); pointer-events:none; }
.pregunta{ width:min(100%, 1180px); height:auto; overflow:visible; }
.pregunta text{
  font-family:var(--display); font-weight:900; font-size:176px; letter-spacing:-1px;
  fill:var(--texto); fill-opacity:0; stroke:var(--texto); stroke-width:2.2;
  stroke-dasharray:1400 1400; stroke-dashoffset:1400;
}
@media (max-width:760px){ .pregunta{ width:100%; } }
.motion .cierre-in{ position:absolute; inset:0; min-height:0; opacity:0; }
.cierre h2{ font-size:clamp(3.4rem, 15vw, 14rem); max-width:9ch; }
.cta{
  margin-top:clamp(28px,5vh,56px); display:inline-block; font-size:14px; font-weight:500;
  padding:16px 22px; background:var(--acento); color:var(--texto);
}
.cta:hover{ background:var(--acento-2); }
.redes{ margin-top:32px; display:flex; flex-wrap:wrap; gap:8px 28px; color:var(--gris); font-size:11px; text-transform:none; letter-spacing:.06em; }
.redes a{ color:var(--texto); }
.redes a:hover{ color:var(--acento-2); }

/* ── Menú ─────────────────────────────────── */
.top{
  position:fixed; top:0; left:0; right:0; z-index:40; height:72px;
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad);
  pointer-events:none;                      /* solo los enlaces reciben clics */
  background:linear-gradient(180deg, rgba(13,12,12,.92) 0%, rgba(13,12,12,.6) 60%, rgba(13,12,12,0) 100%);
}
.mark-layer.arriba{ z-index:45; }          /* en la esquina, el logo queda sobre la barra */
.top a, .top button{ pointer-events:auto; }
.nav-list a, .brand{ text-shadow:0 0 12px rgba(13,12,12,.9); }
.brand{ font-weight:500; }
.motion .brand{ visibility:hidden; }       /* con animación, la marca es el logo fijo */
.nav-list{ display:flex; gap:28px; }
.nav-list a{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto); }
.nav-list a:hover{ color:var(--acento-2); }
.nav-toggle{ display:none; background:none; border:0; color:var(--texto); padding:10px 0 10px 10px; cursor:pointer; }
@media (max-width:759px){
  .nav-toggle{ display:block; position:relative; z-index:2; }
  .nav-list{
    position:fixed; inset:0; z-index:1; flex-direction:column; justify-content:center; gap:6px;
    padding:0 var(--gutter); background:var(--fondo); visibility:hidden; opacity:0; transition:opacity .3s, visibility 0s .3s;
  }
  .nav-list a{ font-family:var(--display); font-weight:900; font-size:clamp(2.6rem, 13vw, 4.4rem); letter-spacing:0; line-height:1.05; }
  .nav.open .nav-list{ visibility:visible; opacity:1; transition:opacity .3s; pointer-events:auto; }
}

/* 5 · Participar */
.participar{ padding:18svh var(--pad); display:grid; gap:48px; }
.pt-txt{ max-width:68ch; }
.pt-txt > p{ font-size:var(--copy); line-height:1.7; color:#cfccc6; margin:0 0 1.1em; }
.pt-txt .meta{ font-size:12px; color:var(--gris); margin-bottom:20px; }
.pt-txt h2{ font-size:clamp(2.4rem, 6.4vw, 5.6rem); margin-bottom:32px; text-wrap:balance; }
.pt-txt .fuerte{ color:var(--texto); font-weight:500; margin-top:1.8em; }
.pt-txt h3.fuerte{ font-family:var(--mono); font-size:var(--copy); line-height:1.7; margin:1.8em 0 1.1em; text-transform:none; letter-spacing:0; }
.pt-txt .pt-cierre{ font-size:clamp(2.4rem, 6.2vw, 5.6rem); color:var(--texto); line-height:.95; margin:1.4em 0 0; }
.pt-txt .pt-cierre span{ display:block; }
@media (min-width:1000px){ .pt-txt .pt-cierre{ font-size:min(3.3vw, 5rem); max-width:none; } .pt-txt .pt-cierre span{ white-space:nowrap; } }
.pt-txt .fuerte.sigue{ margin-top:0; }
.pt-txt .cta{ margin-top:28px; }
.pt-lado{ order:2; display:grid; place-items:center; padding:4svh 0; }
@media (min-width:1000px){
  .participar{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:6vw; align-items:start; }
  .pt-lado{ order:0; position:sticky; top:14svh; padding:0; }
}

/* 6 · About */
.about{ padding:14svh var(--pad); border-top:1px solid rgba(249,248,245,.14); }
.about .meta{ margin-bottom:20px; }
.about h2{ font-size:clamp(2.4rem, 6.6vw, 6.4rem); max-width:17ch; line-height:.95; text-wrap:balance; }
.about-txt{ margin-top:36px; max-width:58ch; }
.about-txt p{ font-size:clamp(1rem, calc(.6vw + .55rem), 1.35rem); line-height:1.65; margin:0 0 1em; color:#cfccc6; }
.about-txt .fuerte{ color:var(--texto); font-weight:500; }
.about-grid{ margin:56px 0 0; display:grid; gap:32px; }
.about-grid h3{ margin:0; font-weight:400; }
.about-grid p{ margin:10px 0 0; font-size:var(--copy); line-height:1.6; color:#cfccc6; max-width:38ch; }
@media (min-width:760px){ .about-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .about-grid{ grid-template-columns:repeat(4,1fr); } }

/* 7 · Merch */
.merch{ padding:14svh var(--pad); }
.merch-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px;
             border-bottom:1px solid var(--texto); padding-bottom:16px; margin-bottom:24px; }
.merch-head h2{ font-size:clamp(3rem, 12vw, 9rem); }
.merch-head .link{ color:var(--gris); border-bottom:1px solid currentColor; padding-bottom:4px; }
.merch-head .link:hover{ color:var(--texto); }
.merch-grid{ display:grid; gap:24px; }
.merch-grid img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:#000; }
/* 5 fotos: 2 por fila en móvil (la última entera), 3 en tablet, las 5 en fila en escritorio */
.merch-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
.merch-grid li:last-child:nth-child(odd){ grid-column:1 / -1; }
@media (min-width:760px){ .merch-grid{ grid-template-columns:repeat(3,1fr); } .merch-grid li:last-child:nth-child(odd){ grid-column:auto; } }
@media (min-width:1100px){ .merch-grid{ grid-template-columns:repeat(5,1fr); gap:16px; } }

/* Reseñas de Google */
.resenas{ padding:14svh var(--pad); }
.resenas-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 32px; border-bottom:1px solid var(--texto); padding-bottom:16px; }
.resenas-head h2{ font-size:clamp(3rem, 10vw, 8rem); }
.resenas-nota{ display:grid; gap:6px; justify-items:start; }
.resenas-nota .estrellas{ color:var(--acento-2); font-size:22px; letter-spacing:4px; }
.resenas-nota .mono{ font-size:12px; }
.resenas-nota:hover .meta{ color:var(--texto); }
.resenas-lista{ margin-top:28px; display:grid; gap:20px; }
.resenas-lista blockquote{ margin:0; height:100%; padding:24px; border:1px solid rgba(249,248,245,.14); display:flex; align-items:center; }
.resenas-lista p{ margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1.3rem, 2vw, 1.9rem); line-height:1.05; }
.resenas-lista footer{ font-size:10px; }
@media (min-width:900px){ .resenas-lista{ grid-template-columns:repeat(3,1fr); } }

/* 8 · FAQ */
.faq{ padding:14svh var(--pad); }
.faq h2{ font-size:clamp(3rem, 12vw, 9rem); border-bottom:1px solid var(--texto); padding-bottom:16px; }
.faq details{ border-bottom:1px solid rgba(249,248,245,.14); }
.faq summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1.3rem, 3.4vw, 2.2rem); line-height:1.05;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary h3{ font:inherit; margin:0; display:inline; }
.faq summary::after{ content:"+"; position:absolute; right:0; top:18px; font-family:var(--mono); font-weight:400; color:var(--gris); }
.faq details[open] summary::after{ content:"−"; color:var(--acento-2); }
.faq details p{ margin:0 0 22px; max-width:60ch; font-size:var(--copy); line-height:1.6; color:#cfccc6; }
.faq details a{ color:var(--texto); border-bottom:1px solid currentColor; }

/* 10 · Newsletter: cajas como las barras del logo */
.newsletter{ padding:18svh var(--pad) 14svh; }
.pills{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; line-height:1; }
.pill{ display:inline-block; background:var(--texto); color:var(--fondo); border-radius:18px;
       padding:.14em .42em .1em; font-size:clamp(2.2rem, 7vw, 5.6rem); }
.pill > span{ display:inline-block; }
.news-sub{ margin-top:28px; font-size:clamp(1.5rem, 3.4vw, 2.4rem); line-height:1.1; max-width:20ch; }
.news-txt{ margin-top:18px; max-width:56ch; color:var(--gris); font-size:var(--copy); line-height:1.7; }
.news-form{ margin-top:32px; display:flex; max-width:520px; border-bottom:2px solid var(--texto); }
.news-form input{
  flex:1; min-width:0; background:none; border:0; color:var(--texto); font:inherit; font-size:15px; padding:14px 4px;
}
.news-form input::placeholder{ color:var(--gris); }
.news-form input:focus{ outline:none; }
.news-form:focus-within{ border-color:var(--acento-2); }
.news-form button{
  border:0; background:var(--acento); color:var(--texto); padding:0 22px; font-size:12px; font-weight:500; cursor:pointer;
}
.news-form button:hover{ background:var(--acento-2); }
.news-nota{ margin-top:14px; font-size:10px; }

/* Contacto */
.contacto{ padding:14svh var(--pad) 10svh; border-top:1px solid rgba(249,248,245,.14); position:relative; }
.contacto h2{ font-size:clamp(3rem, 12vw, 9rem); }
.contacto-grid{ margin-top:32px; display:grid; gap:28px; }
.contacto-mail{ display:inline-block; margin-top:10px; font-family:var(--display); font-weight:900; font-size:clamp(1.6rem, 5vw, 3.4rem); text-transform:uppercase; border-bottom:2px solid var(--acento); }
.contacto-mail:hover{ color:var(--acento-2); }
.redes-iconos{ display:flex; flex-wrap:wrap; gap:clamp(18px, 2vw, 30px); align-items:center; }
.redes-iconos a{ display:grid; place-items:center; width:clamp(30px, 2.4vw, 40px); height:clamp(30px, 2.4vw, 40px); color:var(--texto); transition:color .2s, transform .2s; }
.redes-iconos svg{ width:100%; height:100%; fill:currentColor; display:block; }
.redes-iconos a:has(.ra){ width:auto; }
.redes-iconos svg.ra{ width:auto; height:62%; }   /* logo apaisado: mismo peso visual que los cuadrados */
.redes-iconos a:hover{ color:var(--acento-2); transform:translateY(-2px); }
.redes-iconos a.falta{ opacity:.3; pointer-events:none; }
@media (min-width:760px){ .contacto-grid{ grid-template-columns:1fr auto; align-items:end; } }

/* ── Fallo en títulos: solo mientras hay scroll, con intensidad según la velocidad ── */
.gl{ position:relative; }
.gl::before, .gl::after{
  content:attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:0;
}
.gl.falla::before{ opacity:.9; color:var(--acento); transform:translateX(calc(var(--gi, .5) * -9px)); animation:corte-a .22s steps(2) infinite; }
.gl.falla::after{ opacity:.9; color:var(--acento-2); transform:translateX(calc(var(--gi, .5) * 7px)); animation:corte-b .27s steps(2) infinite; mix-blend-mode:screen; }
.gl.falla{ text-shadow:calc(var(--gi, .5) * 2px) 0 rgba(249,248,245,.35); }
@keyframes corte-a{
  0%{ clip-path:inset(12% 0 70% 0); } 25%{ clip-path:inset(58% 0 22% 0); } 50%{ clip-path:inset(30% 0 52% 0); }
  75%{ clip-path:inset(80% 0 4% 0); } 100%{ clip-path:inset(4% 0 86% 0); }
}
@keyframes corte-b{
  0%{ clip-path:inset(66% 0 18% 0); } 25%{ clip-path:inset(8% 0 78% 0); } 50%{ clip-path:inset(44% 0 40% 0); }
  75%{ clip-path:inset(22% 0 64% 0); } 100%{ clip-path:inset(86% 0 2% 0); }
}

/* ── Fin: la cabina dentro del logo, como una señal que falla ── */
.fin-logo{ position:relative; width:min(100%, 760px, calc(76svh * .8)); aspect-ratio:4/5; overflow:hidden; }
/* clases propias (.fx) para no chocar con el relleno .fl del logo principal */
.fx{ position:absolute; inset:0; background-size:cover; background-position:center; }
.fx-base{ background-color:var(--texto); }
.fx-a, .fx-b{ opacity:0; mix-blend-mode:screen; }
.fx-a{ background-color:var(--acento); background-blend-mode:multiply; }
.fx-b{ background-color:var(--texto); background-blend-mode:luminosity; filter:contrast(1.6); }
.fx-scan{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(0deg, rgba(13,12,12,.55) 0 2px, transparent 2px 4px);
}

/* ── Cursor: vinilo de trazo discontinuo ── */
.cursor{ display:none; }
.cur, .cur *{ cursor:none !important; }
.cur input, .cur textarea{ cursor:text !important; }
.cur .cursor{
  display:block; position:fixed; left:0; top:0; z-index:80; pointer-events:none;
  width:30px; height:30px; margin:-15px 0 0 -15px; opacity:0;
  transition:width .3s cubic-bezier(.2,.7,.1,1), height .3s cubic-bezier(.2,.7,.1,1), margin .3s cubic-bezier(.2,.7,.1,1), opacity .2s;
}
.cur .cursor.visible{ opacity:1; }
.cursor svg{ width:100%; height:100%; display:block; overflow:visible; }
.cursor circle{ fill:none; stroke:var(--texto); stroke-width:1.4; vector-effect:non-scaling-stroke; transition:stroke .25s, stroke-dasharray .3s; }
.cursor .surco{ stroke-dasharray:6 5; }
.cursor b{ position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); font-size:10px; font-weight:400; white-space:nowrap; color:var(--acento-2); }
.cursor.sobre{ width:44px; height:44px; margin:-22px 0 0 -22px; }
.cursor.sobre circle{ stroke:var(--acento-2); }
.cursor.sobre .surco{ stroke-dasharray:107 0; }   /* el surco se cierra */
.cursor.texto{ opacity:0 !important; }

/* ── Me gusta: corazón de trazo encima del audio ── */
.corazon{
  position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:calc(max(16px, env(safe-area-inset-bottom)) + 58px);
  z-index:60; min-width:48px; height:48px; padding:0 13px; display:flex; align-items:center; gap:8px;
  border:1px solid rgba(249,248,245,.35); background:rgba(13,12,12,.6); color:var(--texto); cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.corazon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; overflow:visible; transition:fill .25s, stroke .25s; }
.corazon .cuenta{ font-size:11px; letter-spacing:.06em; }
.corazon:hover{ border-color:var(--acento-2); }
.corazon[aria-pressed="true"]{ border-color:var(--acento); }
.corazon[aria-pressed="true"] svg{ fill:var(--acento); stroke:var(--acento-2); }
.corazon.late svg{ animation:late .5s cubic-bezier(.2,.7,.1,1); }
@keyframes late{ 0%{ transform:scale(1); } 30%{ transform:scale(1.35) translateX(-1px); filter:drop-shadow(2px 0 0 var(--acento-2)); } 55%{ transform:scale(.9) translateX(1px); } 100%{ transform:scale(1); filter:none; } }

/* Burbujas junto al corazón: una pregunta y una acción */
.cartel{
  position:fixed; z-index:61; right:calc(max(16px, env(safe-area-inset-right)) + 60px);
  bottom:calc(max(16px, env(safe-area-inset-bottom)) + 58px); max-width:min(340px, calc(100vw - 100px));
  display:flex; align-items:flex-start; background:var(--texto); color:var(--fondo);
  opacity:0; transform:translateX(12px) scale(.96); transform-origin:right bottom;
  transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.1,1);
}
.cartel.visible{ opacity:1; transform:none; }
.cartel::after{ content:""; position:absolute; right:-7px; bottom:17px; width:14px; height:14px; background:inherit; transform:rotate(45deg); }
/* Otras esquinas: sin pico, entran desde su lado */
.cartel[data-pos="ia"], .cartel[data-pos="da"], .cartel[data-pos="ib"]{ max-width:min(340px, calc(100vw - 2 * var(--gutter))); }
.cartel[data-pos="ia"]::after, .cartel[data-pos="da"]::after, .cartel[data-pos="ib"]::after{ display:none; }
.cartel[data-pos="ia"]{ top:88px; bottom:auto; left:var(--pad); right:auto; transform:translate(-14px, -8px) scale(.96); transform-origin:left top; }
.cartel[data-pos="da"]{ top:88px; bottom:auto; right:var(--pad); transform:translate(14px, -8px) scale(.96); transform-origin:right top; }
.cartel[data-pos="ib"]{ bottom:max(16px, env(safe-area-inset-bottom)); left:var(--pad); right:auto; transform:translate(-14px, 8px) scale(.96); transform-origin:left bottom; }
.cartel[data-pos].visible{ transform:none; }
/* barra lateral de acento en el lado del que sale */
.cartel[data-pos="ia"], .cartel[data-pos="ib"]{ border-left:4px solid var(--acento); }
.cartel[data-pos="da"]{ border-right:4px solid var(--acento); }
.cartel[data-pos="ib"]{ max-width:min(340px, calc(100vw - var(--gutter) - 84px)); }   /* deja libres corazón y audio */
.cartel-cuerpo{ padding:14px 4px 14px 16px; }
.cartel-txt{ margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1.05rem, 1.4vw, 1.3rem); line-height:1.05; }
.cartel-accion{ display:inline-block; margin-top:8px; color:var(--acento); font-size:11px; font-weight:500; border-bottom:1px solid currentColor; }
.cartel-accion:hover{ color:var(--fondo); }
.cartel-accion[hidden]{ display:none; }
.cartel-x{ position:relative; z-index:1; background:none; border:0; color:inherit; width:36px; height:40px; font-size:18px; line-height:1; cursor:pointer; flex:none; }
.cartel-x:hover{ color:var(--acento); }
/* Burbuja para profesionales: verde ácido de la paleta alternativa */
.cartel-etq{ display:inline-block; margin-bottom:8px; font-size:10px; font-weight:500; letter-spacing:.14em; padding:3px 6px; background:var(--fondo); color:#EAFB14; }
.cartel-etq[hidden]{ display:none; }
.cartel[data-tipo="pro"]{ background:#EAFB14; color:var(--fondo); border-color:var(--fondo) !important; }
.cartel[data-tipo="pro"] .cartel-accion{ color:var(--fondo); }
.cartel[data-tipo="pro"] .cartel-accion:hover{ color:var(--acento); }
.cartel[data-tipo="pro"] .cartel-x:hover{ color:var(--acento); }

/* Resumen (TL;DR): mismas cajas que la newsletter, centradas como el manifiesto */
.resumen{ position:relative; z-index:2; padding:16svh var(--pad); background:var(--fondo); display:flex; justify-content:center; }
.resumen-pills{ list-style:none; margin:0; padding:0; align-items:center; }
.resumen-pills{ max-width:min(100%, 1180px); }
.resumen .pill{ font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:1.02;
  font-size:clamp(1.25rem, 5vw, 2.2rem); text-align:center; text-wrap:balance; padding:.3em .55em .26em; }
@media (min-width:1100px){ .resumen .pill{ font-size:clamp(1.9rem, 2.5vw, 3.4rem); } }
.cta-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:28px; }
.cta-fila .cta{ margin-top:0; }
.respuesta{ margin-top:12px; }

/* Compartir y legal */
.pie-legal{ margin-top:10svh; display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; padding-right:72px; }
.compartir{ display:inline-flex; align-items:center; gap:10px; background:none; border:1px solid rgba(249,248,245,.35); color:var(--texto); padding:12px 16px; font-size:11px; cursor:pointer; }
.compartir:hover{ border-color:var(--acento-2); color:var(--acento-2); }
.compartir svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; }
.pie-legal a{ font-size:10px; border-bottom:1px solid currentColor; }
.pie-legal a:hover{ color:var(--texto); }

/* CTA fijo solo en móvil */
.cta-movil{ display:none; }
@media (max-width:760px){
  .cta-movil{
    display:block; position:fixed; z-index:59; left:var(--gutter); bottom:max(16px, env(safe-area-inset-bottom));
    background:var(--acento); color:var(--texto); padding:15px 18px; font-size:12px; font-weight:500;
    opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s, transform .3s;
  }
  .cta-movil.visible{ opacity:1; transform:none; pointer-events:auto; }
  .cartel[data-pos="ib"]{ bottom:calc(max(16px, env(safe-area-inset-bottom)) + 62px); }
}

/* ── Audio ─────────────────────────────────── */
.audio{
  position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  z-index:60; width:48px; height:48px; padding:14px 12px; border:1px solid rgba(249,248,245,.35);
  background:rgba(13,12,12,.6); cursor:pointer; display:flex; flex-direction:column; justify-content:space-between;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.audio{ padding:0; align-items:center; justify-content:center; }
.audio svg{ width:24px; height:24px; overflow:visible; fill:none; stroke:var(--texto); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.audio .altavoz{ fill:var(--texto); stroke:none; }
.audio .onda{ transform-origin:12px 12px; transition:opacity .3s; }
.audio .tachado{ stroke:var(--acento-2); opacity:0; transition:opacity .25s; }
.audio[aria-pressed="false"] .onda{ opacity:0; }
.audio[aria-pressed="false"] .tachado{ opacity:1; }
.audio[aria-pressed="false"] .altavoz{ fill:var(--gris); }
.audio[aria-pressed="true"]{ border-color:var(--acento-2); }
/* activado pero esperando el primer gesto: las ondas laten suave */
.audio.espera .onda{ animation:espera 1.4s ease-in-out infinite; }
.audio.espera .o2{ animation-delay:.2s; }
@keyframes espera{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ── Movimiento reducido: sin scrubbing (JS no activa .motion), nada se mueve ── */
@media (prefers-reduced-motion: reduce){
  body::after{ animation:none; }
  .cartel{ transition:none; transform:none; }
  .corazon.late svg{ animation:none; }
  .motion .ap-foto{ animation:none; }
  .motion .hint::after{ animation:none; }
  .gl::before, .gl::after{ display:none; }
  .player .ruido{ display:none; }
  .player.sintonizando{ animation:none; }
  .player.sintonizando iframe{ opacity:1; }
  .audio.espera .onda{ animation:none; }
  .art, .art figure{ transition:none; }
}

/* ── Editor de fotos de merch (index.html?editar, solo en local) ── */
.editor-bar{
  position:fixed; left:var(--gutter); bottom:16px; z-index:90; display:flex; gap:12px; align-items:center;
  background:var(--acento); color:var(--texto); padding:10px 14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.editor-bar button{ background:var(--texto); color:var(--fondo); border:0; padding:6px 10px; font:inherit; cursor:pointer; }
.merch-grid li{ position:relative; }
.foto-cambiar{
  position:absolute; left:10px; top:10px; z-index:2; background:var(--fondo); color:var(--texto);
  border:1px solid var(--texto); padding:8px 10px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; cursor:pointer;
}
.foto-cambiar:hover{ background:var(--acento); border-color:var(--acento); }
.foto-pos{ position:absolute; left:10px; right:10px; bottom:10px; z-index:2; display:flex; gap:8px; align-items:center;
  background:rgba(13,12,12,.85); padding:8px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; }
.foto-pos input{ flex:1; accent-color:var(--acento); }
.foto-pos button{ background:var(--acento); color:var(--texto); border:0; padding:6px 10px; font:inherit; cursor:pointer; }

/* ── Pantallas anchas: aprovechar el ancho ── */
@media (min-width:1100px){
  .about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:6vw; align-items:start; }
  .about > .meta{ grid-column:1 / -1; }
  .about h2{ grid-column:1; grid-row:2 / span 2; position:sticky; top:14svh; font-size:clamp(3rem, 5.4vw, 7.6rem); }
  .about-txt{ grid-column:2; margin-top:0; max-width:none; }
  .about-grid{ grid-column:2; grid-template-columns:repeat(2,1fr); margin-top:48px; }

  .faq{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); column-gap:6vw; align-items:start; }
  .faq h2{ position:sticky; top:14svh; border-bottom:0; padding-bottom:0; font-size:clamp(4rem, 12vw, 14rem); }
  .faq-list{ border-top:1px solid var(--texto); }
  .faq summary{ font-size:clamp(1.4rem, 2.2vw, 2.8rem); padding:clamp(20px, 1.6vw, 30px) 48px clamp(20px, 1.6vw, 30px) 0; }

  .newsletter{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:6vw; align-items:end; }
  .newsletter .pills{ grid-column:1; grid-row:1 / span 4; }
  .pill{ font-size:clamp(2.6rem, 4.2vw, 6.4rem); white-space:nowrap; }
  .news-sub, .news-txt, .news-form, .news-nota{ grid-column:2; }
  .news-sub{ margin-top:0; font-size:clamp(1.8rem, 2.6vw, 3.4rem); }
  .news-form{ max-width:none; }

  .participar{ grid-template-columns:minmax(0,6fr) minmax(0,7fr); }
  .pt-txt h2{ font-size:clamp(3rem, 5vw, 7rem); }
  .contacto-mail{ font-size:clamp(2rem, 4.6vw, 6rem); }
}