/* =============================================================
   TECHMOTION CHILE — Sistema de diseño editorial
   -------------------------------------------------------------
   El lenguaje visual viene del Instagram de Techmotion, que ya
   tenía un sistema consistente:
     volanta pequeña · titular de peso mixto · bajada con negritas
     todo sobre foto oscura con degradado hacia abajo
   Archivo (300-800) reemplaza a Anton porque el titular de peso
   mixto necesita varios pesos en la misma frase; Anton solo tiene
   uno y por eso el sitio nunca podia verse como el feed.
   ============================================================= */

:root{
  --bg:#0a0a0b;
  --panel:#141416;
  --paper:#ffffff;
  --concrete:#9a958c;
  --signal:#ff4b1f;
  --acid:#d4ff3f;
  --ink:#141210;
  --card:#f2efe6;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.28);

  --sans:'Archivo', system-ui, -apple-system, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;

  /* Escala de apilamiento. Cualquier capa fija del sitio va aca,
     nunca con numeros sueltos, para que no compitan entre si. */
  --z-aura:0;
  --z-view:1;
  --z-topbar:100;
  --z-rail:150;
  --z-grain:200;
  --z-floating-player:320;
  --z-mobile-menu:400;
  --z-cal-modal:500;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:100px;}
body{
  background:var(--bg); color:var(--paper);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font-family:inherit;}
.wrap{max-width:1380px; margin:0 auto; padding:0 20px;}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:calc(var(--z-topbar) + 10);
  background:var(--signal); color:var(--bg); padding:12px 18px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.skip-link:focus{left:8px; top:8px;}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{outline:2px solid var(--acid); outline-offset:2px;}

/* =============================================================
   SISTEMA EDITORIAL — las tres piezas de cada nota
   ============================================================= */
.volanta{
  display:block; font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-bottom:9px;
}
.volanta em{font-style:normal; color:var(--signal);}
.titular{
  font-weight:300; text-transform:uppercase;
  line-height:1.02; letter-spacing:-.02em;
  text-wrap:balance;
}
.titular b, .titular strong{font-weight:800;}
.bajada{color:var(--concrete); line-height:1.55;}
.bajada b, .bajada strong{color:rgba(255,255,255,.92); font-weight:600;}

.foto{position:relative; overflow:hidden; background:var(--panel);}
.foto-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* Enfoque editable desde /admin: por defecto centrado, sin necesidad de
   editar nada. Sirve sobre todo para fotos verticales (retratos) que en
   contenedores anchos (el destacado de portada) quedan recortadas muy
   cerca de la cara al centrarse automatico. */
.enfoque-arriba .foto-img{object-position:50% 18%;}
.enfoque-abajo .foto-img{object-position:50% 82%;}
.foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,6,7,.96) 0%, rgba(6,6,7,.75) 30%,
    rgba(6,6,7,.15) 62%, rgba(6,6,7,.35) 100%);
}
/* El contenido del post va sobre la foto. Se excluye .marca porque es un
   sello posicionado en absoluto: si esta regla le aplica position:relative,
   el hexagono cae al flujo y aparece encima del texto. Se excluye tambien
   <picture> (eleventy-img envuelve el <img> en <picture> — ver mas abajo,
   ".foto > picture"): sin esta exclusion, esta regla es mas especifica y
   le pisaba el position:absolute a la foto, dejandola con alto 0 e
   invisible en las notas con cover real. */
.foto > *:not(.foto-img):not(.marca):not(picture){position:relative; z-index:1;}
.foto--vacia{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 14px),
    var(--panel);
}
/* Sello de la marca sobre la foto. A 22px y opacidad .7 se perdia contra el
   degradado; ahora va mas grande, opaco y con una sombra suave que lo
   despega de imagenes claras. */
/* Marca de agua sobre la foto: el logo completo, hexagono con la palabra,
   igual que en los posts de Instagram. Solo el contorno del hexagono se leia
   como una figura suelta, sin identidad. A 46px la palabra ya se distingue.
   La sombra suave lo despega tanto de fondos oscuros como de fotos claras. */
.marca{
  position:absolute; top:15px; left:15px; z-index:2;
  width:46px; height:46px; opacity:.78; pointer-events:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.7));
}
.nota-grid--destacadas .marca, .lead .marca{width:54px; height:54px; opacity:.82;}
@media (max-width:680px){
  .marca{width:40px; height:40px;}
  .nota-grid--destacadas .marca, .lead .marca{width:46px; height:46px;}
}

/* =============================================================
   CAPAS AMBIENTE
   ============================================================= */
/* Blur animado grande (120px) es carísimo de componer fuera de Chrome —
   Safari y Firefox lo notan mucho más que Chrome en fondos animados sin
   parar. Se bajó el radio (menos píxeles que difuminar en cada frame) y
   se sacó el scale() de las animaciones: escalar un elemento ya
   difuminado obliga a volver a rasterizarlo en cada frame, mientras que
   mover con translate3d se queda barato en el compositor de GPU. */
.tm-aura{position:fixed; inset:0; z-index:var(--z-aura); pointer-events:none; overflow:hidden; contain:layout paint;}
.tm-aura span{position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.085; will-change:transform;}
.tm-aura span:nth-child(1){width:52vw; height:52vw; max-width:660px; max-height:660px; top:-14%; left:-12%;
  background:radial-gradient(circle,var(--signal),transparent 70%); animation:auraA 34s ease-in-out infinite alternate;}
.tm-aura span:nth-child(2){width:44vw; height:44vw; max-width:540px; max-height:540px; top:34%; right:-14%; opacity:.05;
  background:radial-gradient(circle,var(--acid),transparent 68%); animation:auraB 42s ease-in-out infinite alternate;}
.tm-aura span:nth-child(3){width:40vw; height:40vw; max-width:500px; max-height:500px; bottom:-10%; left:24%;
  background:radial-gradient(circle,var(--signal),transparent 66%); animation:auraC 38s ease-in-out infinite alternate;}
.tm-aura span:nth-child(4){display:none;}
@keyframes auraA{0%{transform:translate3d(0,0,0);}100%{transform:translate3d(-4vw,12vh,0);}}
@keyframes auraB{0%{transform:translate3d(0,0,0);}100%{transform:translate3d(5vw,-4vh,0);}}
@keyframes auraC{0%{transform:translate3d(0,0,0);}100%{transform:translate3d(-7vw,5vh,0);}}
body.tm-sonando .tm-aura span{opacity:.16; transition:opacity 2s ease; animation-duration:18s;}
@media (max-width:900px){ .tm-aura span{filter:blur(46px); opacity:.06;} }

.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:900px){ .grain{display:none;} }

#view{position:relative; z-index:var(--z-view);}

/* =============================================================
   MASTHEAD
   ============================================================= */
.topbar{
  position:sticky; top:0; z-index:var(--z-topbar);
  background:var(--bg); border-bottom:1px solid var(--line-strong);
}
.topbar-row{display:flex; align-items:stretch; justify-content:space-between; gap:18px; min-height:56px;}
/* Logotipo real de Techmotion. Se limita por alto para que la barra
   mantenga su altura sin importar la proporcion del archivo. */
.mark{display:flex; align-items:center; flex-shrink:0;}
/* Se usa el logotipo horizontal (la palabra con la onda), no el logo
   completo: el hexagono con el texto adentro es casi cuadrado y a la altura
   de una barra el nombre queda ilegible. */
.mark img{
  height:22px; width:auto; display:block;
  transition:opacity .2s ease;
}
.mark:hover img{opacity:.82;}
@media (max-width:520px){ .mark img{height:19px;} }
.topbar nav{display:flex; align-items:stretch; flex:1; margin-left:6px;}
.topbar nav a{
  display:flex; align-items:center; padding:0 14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--concrete);
  border-left:1px solid var(--line); transition:color .18s, background .18s;
}
.topbar nav a:hover{color:var(--paper); background:rgba(255,255,255,.05);}
.topbar nav a.active{color:var(--paper);}
.topbar nav a.active::before{content:"\25AA"; color:var(--signal); margin-right:6px; font-size:9px;}
@media (max-width:900px){ .topbar nav{display:none;} }

/* .senal-btn: contenedor visual (antes era el propio <button>, pero tenía
   un <a> anidado adentro — HTML inválido que los navegadores pueden
   reordenar). Ahora es un div que agrupa dos elementos interactivos
   hermanos: el botón de play/pausa y el link a /senal/. El aspecto es
   idéntico al de antes; solo cambió qué elemento es el borde/fondo. */
.senal-btn{
  display:flex; align-items:center; align-self:center; white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--concrete); border:1px solid var(--line-strong);
  transition:border-color .18s, color .18s;
}
.senal-btn:hover{border-color:var(--signal); color:var(--paper);}
/* Estado sonando: el boton se enciende y muestra que senal va */
body.tm-sonando .senal-btn{border-color:var(--acid); color:var(--paper);}
.senal-btn-toggle{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
  border:none; background:none; padding:7px 12px; cursor:pointer;
}
.senal-btn-txt{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Flecha al costado: unico atajo a la pagina de la senal */
.senal-btn-mas{
  display:flex; align-items:center; padding:7px 12px;
  color:var(--concrete); border-left:1px solid var(--line-strong); font-size:11px; line-height:1;
}
.senal-btn-mas:hover{color:var(--signal);}
.senal-btn i{width:7px; height:7px; border-radius:50%; background:var(--concrete); flex-shrink:0;}
body.tm-sonando .senal-btn i{background:var(--acid); box-shadow:0 0 9px var(--acid); animation:lat 1.4s ease-in-out infinite;}
@keyframes lat{50%{opacity:.3;}}
@media (max-width:520px){ .senal-btn span{display:none;} .senal-btn-toggle{padding:9px 11px;} .senal-btn-mas{padding:9px 11px;} }

.menu-btn{
  display:none; align-self:center; background:none; border:1px solid var(--line-strong);
  width:38px; height:34px; cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
}
.menu-btn span{display:block; width:16px; height:1.5px; background:var(--paper);}
@media (max-width:900px){ .menu-btn{display:flex;} }

.mobile-menu{
  position:fixed; inset:0; z-index:var(--z-mobile-menu);
  background:var(--bg); padding:22px; display:none; flex-direction:column;
}
.mobile-menu.open{display:flex;}
.mobile-menu .close-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;}
.mobile-menu .mm-mark{font-weight:800; text-transform:uppercase; letter-spacing:-.02em;}
.mobile-menu .mm-close{background:none; border:none; color:var(--paper); font-size:30px; cursor:pointer; line-height:1;}
.mobile-menu nav{display:flex; flex-direction:column;}
.mobile-menu nav a{
  font-size:26px; font-weight:300; text-transform:uppercase; letter-spacing:-.01em;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.mobile-menu .mm-foot{margin-top:auto; font-family:var(--mono); font-size:10px; color:var(--concrete); letter-spacing:.1em;}

/* =============================================================
   TICKER
   ============================================================= */
/* =============================================================
   PORTADA
   ============================================================= */
/* min-width:0 en .portada y .lead-carousel: sin esto, el ancho minimo
   "auto" de grid/flex se calcula por el contenido del carrusel (el titular
   mas largo entre las notas del hero) y no por el espacio disponible, asi
   que en pantallas angostas el carrusel se desbordaba unos 50px hacia la
   derecha del margen del sitio en vez de respetarlo como el resto de las
   tarjetas. */
.portada{display:grid; grid-template-columns:1fr 330px; border-bottom:1px solid var(--line-strong); min-width:0;}

/* Carrusel del destacado: 2-3 notas mas recientes, se desliza a mano (touch,
   trackpad o los puntos) — nunca solo, para no cortarle la lectura a nadie
   ni pelear con lo que exige accesibilidad sobre contenido que se mueve sin
   pedirlo. */
.lead-carousel{position:relative; border-right:1px solid var(--line-strong); min-width:0;}
.lead-viewport{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.lead-viewport::-webkit-scrollbar{display:none;}
.lead-track{display:flex;}
.lead-track .lead{flex:0 0 100%; min-width:100%; scroll-snap-align:start;}
.lead-dots{
  position:absolute; right:20px; bottom:16px; z-index:2;
  display:flex; gap:6px;
}
.lead-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:rgba(10,10,11,.45); backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.25); color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, opacity .18s ease;
}
.lead-arrow svg{width:17px; height:17px;}
.lead-arrow:hover{background:var(--signal); border-color:var(--signal);}
.lead-arrow-prev{left:14px;}
.lead-arrow-next{right:14px;}
/* Solo para mouse/trackpad: en tactil ya esta el swipe, la flecha estorba mas de lo que ayuda. */
@media (hover:none){ .lead-arrow{display:none;} }
.lead-dots button{
  width:6px; height:6px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.35); transition:.2s;
}
.lead-dots button.active{background:var(--signal); transform:scale(1.35);}

.lead .foto{min-height:520px; display:flex; flex-direction:column; justify-content:flex-end; padding:34px 34px 32px;}
.lead .titular{
  font-size:clamp(30px,3.9vw,54px);
  margin-bottom:15px; max-width:15ch;
}
.lead .bajada{font-size:14.5px; max-width:52ch; margin-bottom:18px;}
.lead-meta{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  font-family:var(--mono); font-size:11px; color:var(--concrete);
  padding-top:15px; border-top:1px solid rgba(255,255,255,.18);
}
.lead-cta{color:var(--acid); border-bottom:1px solid var(--acid); padding-bottom:1px;}
.lead-cta:hover{opacity:.72;}
@media (max-width:1080px){
  .portada{grid-template-columns:1fr;}
  .lead-carousel{border-right:none; border-bottom:1px solid var(--line-strong);}
  .lead .foto{min-height:420px; padding:26px 22px 24px;}
}

.agenda-col{padding:20px 0 20px 20px;}
@media (max-width:1080px){ .agenda-col{padding:20px 0;} }
.col-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line-strong);}
.col-head h2{font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;}
.col-head span{font-family:var(--mono); font-size:9.5px; color:var(--concrete); letter-spacing:.09em;}
.col-foot{
  display:block; text-align:center; margin-top:13px; padding:11px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line-strong); transition:background .18s, border-color .18s, color .18s;
}
.col-foot:hover{background:var(--signal); border-color:var(--signal); color:var(--bg);}

/* =============================================================
   FRANJA DE SECCION
   ============================================================= */
.franja{display:flex; align-items:center; gap:14px; padding:28px 0 13px;}
.franja h2{font-size:17px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.franja .rule{flex:1; height:1px; background:var(--line-strong);}
.franja a{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--concrete); white-space:nowrap;}
.franja a:hover{color:var(--acid);}

/* =============================================================
   AGENDA
   ============================================================= */
.agenda-filter-row{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.agenda-filter-label{font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--concrete);}
#cityFilter{
  background:var(--panel); color:var(--paper); border:1px solid var(--line-strong);
  padding:8px 11px; font-family:var(--mono); font-size:11px; cursor:pointer;
}
#cityFilter:focus{outline:none; border-color:var(--signal);}

.agenda-month-nav{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.agenda-months{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;}
.agenda-months::-webkit-scrollbar{display:none;}
.month-chip{
  background:none; border:1px solid var(--line-strong); color:var(--concrete);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 11px; cursor:pointer; white-space:nowrap; transition:.18s;
}
.month-chip em{font-style:normal; opacity:.6; margin-left:4px;}
.month-chip:hover{color:var(--paper); border-color:var(--paper);}
.month-chip.active{background:var(--paper); color:var(--bg); border-color:var(--paper);}
.agenda-nav-btn{
  background:none; border:1px solid var(--line-strong); color:var(--paper);
  width:30px; height:30px; cursor:pointer; flex-shrink:0; font-size:13px; line-height:1;
}
.agenda-nav-btn:hover{border-color:var(--signal);}

.agenda-viewport{overflow:hidden; position:relative; transition:height .35s ease;}
/* El JS mueve el carril con track.scrollTo(): necesita scroll real (overflow-x + position:relative), no transform. */
.agenda-carousel{
  position:relative;
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; align-items:flex-start;
  scrollbar-width:none;
}
.agenda-carousel::-webkit-scrollbar{display:none;}
.agenda-month-panel{flex:0 0 100%; min-width:100%; scroll-snap-align:start;}
.agenda-month-panel h3{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal); padding:14px 0 8px; border-bottom:1px solid var(--line);
}
.agenda-item{
  display:grid; grid-template-columns:56px 46px 1fr auto; gap:14px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--line);
  transition:background .18s, padding-left .18s;
}
.agenda-item:hover{background:rgba(255,75,31,.06); padding-left:7px;}

/* Flyer del evento: mismo campo que ya existia en /admin, ahora conectado.
   Sin foto, cae al mismo recurso que las notas sin portada (una mancha de
   color que rota por evento) en vez de un espacio vacio. */
.agenda-flyer{
  width:56px; height:56px; flex-shrink:0; overflow:hidden; position:relative;
  background:var(--panel); border:1px solid var(--line);
}
.agenda-flyer img,
.agenda-flyer picture{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1); will-change:transform;}
.agenda-item:hover .agenda-flyer img,
.agenda-item:hover .agenda-flyer picture{transform:scale(1.12);}
.agenda-flyer.sin-flyer{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px),
    var(--clima, var(--panel));
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.04em;
  color:rgba(255,255,255,.4);
}
.clima-1.sin-flyer{--clima:radial-gradient(ellipse 82% 58% at 38% 18%, rgba(190,26,64,.42), transparent 70%), linear-gradient(172deg, rgba(96,14,34,.4), var(--panel) 82%);}
.clima-2.sin-flyer{--clima:radial-gradient(ellipse 78% 56% at 62% 16%, rgba(10,110,124,.42), transparent 68%), linear-gradient(172deg, rgba(8,58,70,.4), var(--panel) 82%);}
.clima-3.sin-flyer{--clima:radial-gradient(ellipse 82% 56% at 34% 18%, rgba(178,132,18,.38), transparent 70%), linear-gradient(172deg, rgba(84,62,10,.38), var(--panel) 82%);}
.clima-4.sin-flyer{--clima:radial-gradient(ellipse 80% 56% at 64% 16%, rgba(104,44,180,.42), transparent 68%), linear-gradient(172deg, rgba(52,20,96,.4), var(--panel) 82%);}
.clima-5.sin-flyer{--clima:radial-gradient(ellipse 80% 56% at 44% 18%, rgba(24,132,64,.36), transparent 68%), linear-gradient(172deg, rgba(12,68,32,.38), var(--panel) 82%);}
.clima-6.sin-flyer{--clima:radial-gradient(ellipse 78% 56% at 58% 18%, rgba(198,86,20,.42), transparent 70%), linear-gradient(172deg, rgba(96,42,10,.4), var(--panel) 82%);}
.clima-7.sin-flyer{--clima:radial-gradient(ellipse 82% 54% at 36% 16%, rgba(28,84,168,.42), transparent 68%), linear-gradient(172deg, rgba(14,44,90,.4), var(--panel) 82%);}
.clima-8.sin-flyer{--clima:radial-gradient(ellipse 80% 56% at 60% 16%, rgba(170,26,120,.4), transparent 68%), linear-gradient(172deg, rgba(82,12,58,.4), var(--panel) 82%);}

.agenda-date{
  font-family:var(--mono); font-size:9.5px; color:var(--concrete);
  text-align:center; border-right:1px solid var(--line); padding-right:8px; line-height:1.3;
}
.agenda-date b{display:block; font-family:var(--sans); font-size:19px; font-weight:800; color:var(--paper); line-height:1.05; transition:color .25s, transform .25s;}
.agenda-item:hover .agenda-date b{color:var(--signal); transform:scale(1.08);}
.agenda-info h4{font-size:14.5px; font-weight:600; line-height:1.3; margin-bottom:3px;}
.agenda-info p{font-family:var(--mono); font-size:10.5px; color:var(--concrete);}
.agenda-info .hora{color:var(--acid);}
.agenda-info .sep{color:var(--line-strong); margin:0 2px;}
.agenda-badge{
  font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:5px 9px; color:var(--concrete); white-space:nowrap;
  transition:border-color .25s, color .25s, letter-spacing .25s;
}
.agenda-item:hover .agenda-badge{letter-spacing:.15em;}

/* Fila grande de la pagina /agenda/ (no la version compacta reusada en la
   columna "Proximos" de portada): la funcion de esta pagina es que la
   gente compre entradas, asi que el flyer y el boton de comprar tienen
   que ser lo mas protagonico, no un detalle chico al costado. */
.agenda-item--grande{grid-template-columns:96px 50px 1fr auto; gap:18px; padding:18px 0;}
.agenda-item--grande .agenda-flyer{width:96px; height:96px;}
.agenda-item--grande .agenda-info h4{font-size:17px;}
.agenda-item--grande .agenda-info p{font-size:11.5px;}
.agenda-badge--comprar{
  font-size:11px; letter-spacing:.06em; padding:11px 18px;
  border:none; background:var(--acid); color:var(--bg); font-weight:700;
}
.agenda-item--grande:hover .agenda-badge--comprar{background:var(--signal); color:var(--paper);}
@media (max-width:640px){
  /* .agenda-item.agenda-item--grande (dos clases encadenadas, no una) a
     propósito: la regla generica ".agenda-item{grid-template-columns:44px...}"
     de mas abajo tenia la misma especificidad y le ganaba a esta por venir
     despues en el archivo — el flyer (ya forzado a 64px aparte) se salia
     de una columna de solo 44px y se montaba sobre la fecha. */
  .agenda-item.agenda-item--grande{grid-template-columns:64px 40px 1fr; gap:10px 12px; padding:14px 0;}
  .agenda-item--grande .agenda-flyer{width:64px; height:64px;}
  .agenda-item--grande .agenda-info h4{font-size:14.5px;}
  .agenda-badge--comprar{grid-column:1/-1; justify-self:start; padding:8px 14px; font-size:10px;}
}

.agenda-item.next{border-left:2px solid var(--signal); padding-left:8px;}

/* Evento con entradas Y nota publicada: "comprar" sigue siendo el gesto
   principal (el ::before del boton se estira a toda la fila, mismo alcance
   de click que antes), "leer la nota" es un link real chico al lado, con
   mas z-index para poder tocarlo aparte sin disparar el link de compra. */
.agenda-item--dual{position:relative;}
.agenda-badge--stretch::before{content:""; position:absolute; inset:0; z-index:1;}
.agenda-actions{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
/* No es una segunda pildora — el link a la nota pesa mucho menos que
   "comprar", asi que se lee como una nota al pie, no como otra decision.
   Sin .agenda-badge--nota en el HTML a proposito, para no heredar su
   color/borde y tener que pelear la especificidad contra eso. */
.agenda-badge--sec{
  position:relative; z-index:2;
  border:none; background:none; padding:0;
  font-size:9.5px; font-weight:500; text-transform:none; letter-spacing:normal;
  color:var(--concrete); text-decoration:underline; text-underline-offset:2px;
}
.agenda-badge--sec:hover{color:var(--paper); background:none;}
@media (max-width:640px){
  .agenda-actions{grid-column:1/-1; justify-self:start; flex-direction:row; align-items:center; gap:10px;}
}
.agenda-info .agenda-badge{
  display:inline-flex; align-items:center; gap:6px;
  border-color:var(--acid); color:var(--acid);
  font-size:8.5px; padding:3px 7px; margin-bottom:6px;
}
.agenda-info .agenda-badge i{
  width:5px; height:5px; border-radius:50%; background:var(--acid);
  box-shadow:0 0 7px var(--acid);
}
.agenda-empty{padding:34px 0; text-align:center; color:var(--concrete); font-size:14px;}
@media (max-width:640px){
  .agenda-item{grid-template-columns:44px 40px 1fr; gap:10px;}
  .agenda-flyer{width:44px; height:44px;}
  .agenda-badge{display:none;}
  /* Link real a otro destino (la nota), no solo un rotulo — a diferencia
     del badge de "entradas pronto" (decorativo, la fila entera ya es el
     link), este no se puede esconder en movil sin perder la funcion. */
  .agenda-badge--sec{display:inline-flex; grid-column:1/-1; justify-self:start; margin-top:2px;}
  .agenda-badge--comprar{display:inline-flex; grid-column:1/-1; justify-self:start;}
}
.agenda-col .agenda-item{grid-template-columns:42px 1fr; gap:11px; padding:10px 0;}
.agenda-col .agenda-date{font-size:9px; padding-right:7px;}
.agenda-col .agenda-date b{font-size:18px;}
.agenda-col .agenda-info h4{font-size:13px;}
.agenda-col .agenda-info p{font-size:10px;}
.agenda-col .agenda-badge{display:none;}

/* =============================================================
   REJILLA DE NOTAS — anatomia del post de Instagram
   ============================================================= */
.nota-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-strong); border-left:1px solid var(--line);
}
.nota-card{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .2s; display:flex; flex-direction:column;
}
.nota-card:hover{background:var(--panel);}
.nota-card .foto{
  aspect-ratio:4/5; display:flex; flex-direction:column;
  justify-content:flex-end; padding:18px 17px 17px;
}
.nota-card .foto--vacia{aspect-ratio:auto; min-height:220px; padding-top:52px;}
.nota-card .titular{font-size:23px; margin-bottom:9px;}
.nota-card .bajada{font-size:12.5px; line-height:1.5;}

/* Mas vida al pasar el mouse: la portada respira (zoom lento, se recorta
   sola por el overflow:hidden de .foto), la volanta se acerca al color de
   la marca y su subrayado crece, y la fecha del pie se corre. Nada de esto
   mueve el layout ni depende de que la nota tenga foto real. */
.nota-card .foto-img{transition:transform .6s cubic-bezier(.2,.8,.2,1); will-change:transform;}
.nota-card:hover .foto-img{transform:scale(1.07);}
.nota-card .foto--vacia::before{transition:transform .6s cubic-bezier(.2,.8,.2,1); will-change:transform;}
.nota-card:hover .foto--vacia::before{transform:scale(1.07);}
.nota-card .foto .volanta{
  padding-bottom:10px;
  background-image:linear-gradient(var(--signal),var(--signal));
  background-repeat:no-repeat; background-size:26px 2px; background-position:left bottom;
  transition:background-size .35s cubic-bezier(.2,.8,.2,1), background-image .35s, color .3s;
}
.nota-card:hover .foto .volanta{background-size:52px 2px; background-image:linear-gradient(var(--signal),var(--signal)); color:var(--signal);}
.nota-pie time{display:inline-block; transition:color .25s, transform .25s;}
.nota-card:hover .nota-pie time{color:var(--signal); transform:translateX(3px);}

.nota-pie{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 17px; font-family:var(--mono); font-size:9.5px;
  color:var(--concrete); letter-spacing:.07em; margin-top:auto;
}
.nota-pie .cat{color:var(--signal); text-transform:uppercase;}
.nota-video-badge{
  position:absolute; top:14px; right:14px; z-index:2;
  display:flex; align-items:center; gap:4px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); padding:4px 7px; color:#fff;
}
.nota-video-badge svg{width:9px; height:9px;}
@media (max-width:1180px){ .nota-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .nota-grid{grid-template-columns:1fr;} }
/* Portada: 10 notas en escritorio (2 destacadas + 8 en esta grilla), pero
   en movil pesan mucho mas por ser una sola columna larga — se recorta a
   6 en total (2 destacadas + 4 aca), sin tocar el HTML/build por viewport. */
@media (max-width:680px){
  /* Escopado a body[data-page="home"] a proposito: .nota-grid (sin
     modificador) tambien es la clase que usa el listado completo de
     /notas/ — sin este alcance, esta regla ocultaba todo pasada la 4ta
     tarjeta ahi tambien, no solo en portada. */
  body[data-page="home"] .nota-grid:not(.nota-grid--destacadas) .nota-card:nth-child(n+5){display:none;}
}

.archivo-filter-row{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:16px;}
.archivo-filter-chips{display:flex; gap:7px; flex-wrap:wrap;}
.archivo-filter-chip{
  background:none; border:1px solid var(--line-strong); color:var(--concrete);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 12px; cursor:pointer; transition:.18s;
}
.archivo-filter-chip em{font-style:normal; opacity:.55; margin-left:5px;}
.archivo-filter-chip:hover{color:var(--paper); border-color:var(--paper);}
.archivo-filter-chip.active{background:var(--paper); color:var(--bg); border-color:var(--paper);}

/* =============================================================
   ARCHIVO VIVO — carnets tipo pasaporte (firma del sitio)
   ============================================================= */
.archivo-bloque{
  padding:30px 0 54px; border-top:1px solid var(--line-strong);
  background:
    radial-gradient(ellipse 70% 100% at 10% 0%, rgba(255,75,31,.08), transparent 62%),
    radial-gradient(ellipse 60% 90% at 90% 100%, rgba(212,255,63,.05), transparent 62%);
}
.archivo-intro{max-width:58ch; margin-bottom:22px;}
.archivo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:17px;}
@media (max-width:1080px){ .archivo-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .archivo-grid{grid-template-columns:1fr;} }

.archivo-card{
  position:relative; width:100%;
  background:none; border:none; padding:0; text-align:left;
}
.archivo-inner{
  position:relative; width:100%; height:316px;
  box-shadow:0 14px 30px rgba(0,0,0,.4);
  transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.archivo-card:hover .archivo-inner{box-shadow:0 22px 42px rgba(0,0,0,.52); transform:translateY(-4px);}
/* El carnet ya se voltea al hacer click en el boton; el hover del card
   solo invita: la foto respira y el boton de "Ver ficha" se enciende
   antes de que el mouse llegue a el. */
.archivo-photo-wrap picture, .archivo-photo-wrap .archivo-photo{
  transition:transform .6s cubic-bezier(.2,.8,.2,1); will-change:transform;
}
.archivo-card:hover .archivo-photo-wrap picture,
.archivo-card:hover .archivo-photo-wrap .archivo-photo{transform:scale(1.06);}
.archivo-card:hover .archivo-flip-btn{border-color:var(--signal); color:var(--paper); background:rgba(255,75,31,.08);}

.archivo-face-front, .archivo-face-back{
  position:absolute; inset:0; overflow:hidden;
  background:var(--card); color:var(--ink);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .68s cubic-bezier(.45,.05,.2,1);
  padding:13px 14px 12px;
  display:flex; flex-direction:column; gap:11px;
}
.archivo-face-front{transform:perspective(1600px) rotateY(0deg);}
.archivo-face-back{transform:perspective(1600px) rotateY(-180deg);}
.archivo-card.flipped .archivo-face-front{transform:perspective(1600px) rotateY(180deg);}
.archivo-card.flipped .archivo-face-back{transform:perspective(1600px) rotateY(0deg);}

.archivo-fila{
  display:flex; justify-content:space-between; gap:10px; flex-shrink:0;
  font-family:var(--mono); font-size:8px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(20,18,16,.5);
  padding-bottom:8px; border-bottom:1px solid rgba(20,18,16,.16);
}
/* Distintivo de categoria: mismo icono en el frente (desktop) y en la linea
   compacta de mobile, para que un DJ/Productor/Sello/Colectivo se distinga
   aunque el carnet todavia no tenga foto real. */
.archivo-cat{display:inline-flex; align-items:center; gap:4px; vertical-align:middle;}
.archivo-cat svg{width:11px; height:11px; flex-shrink:0;}
/* En la linea compacta de mobile el texto alrededor es mas chico (9.5px):
   el mismo icono de 11px se veia desproporcionado, como flotando sobre el
   texto en vez de acompañarlo. */
.archivo-meta-compact .archivo-cat svg{width:10px; height:10px;}

.archivo-photo-wrap{
  position:relative; flex:0 0 132px; overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(20,18,16,.07) 0 2px,transparent 2px 11px),#ddd8cc;
  display:flex; align-items:center; justify-content:center;
}
.archivo-photo-wrap > picture,
.archivo-photo-wrap > img{position:absolute; inset:0; width:100%; height:100%;}
.archivo-photo-wrap > picture img,
.archivo-photo{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;}
.archivo-iniciales{font-size:40px; font-weight:800; color:rgba(20,18,16,.2);}

.archivo-datos{flex:1; min-height:0;}
.archivo-datos h3, .archivo-back-body h3{
  font-size:17px; font-weight:800; line-height:1.1; text-transform:uppercase;
  letter-spacing:-.015em; margin-bottom:9px;
}
.campo{
  display:grid; grid-template-columns:50px 1fr; gap:10px;
  font-size:10.5px; align-items:baseline;
  padding:4px 0; border-bottom:1px dotted rgba(20,18,16,.14);
}
.campo:last-of-type{border-bottom:none;}
.campo dt{
  font-family:var(--mono); font-size:7.5px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(20,18,16,.45);
}
.campo dd{font-weight:600;}

/* Version compacta: solo se muestra en mobile (ver media query mas abajo). */
.archivo-meta-compact{display:none;}

.archivo-pie{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-shrink:0; padding-top:9px; border-top:1px solid rgba(20,18,16,.16);
}
.archivo-mrz{
  font-family:var(--mono); font-size:7.5px; letter-spacing:.04em;
  color:rgba(20,18,16,.4); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; min-width:0;
}
.sello{
  flex-shrink:0; font-family:var(--mono); font-size:7px;
  letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,75,31,.8); border:1px solid rgba(255,75,31,.4);
  padding:3px 7px; white-space:nowrap;
}

.archivo-back-body{flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin;}
.archivo-back-body::-webkit-scrollbar{width:3px;}
.archivo-back-body::-webkit-scrollbar-thumb{background:rgba(20,18,16,.25);}
.archivo-bio{font-size:11px; line-height:1.6; color:rgba(20,18,16,.72); margin-bottom:11px;}
.archivo-back-links{display:flex; flex-wrap:wrap; gap:0 10px;}
.archivo-back-link{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--signal); margin-bottom:7px; white-space:nowrap;
}
.archivo-back-link:hover{color:var(--signal);}

.archivo-flip-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:10px;
  background:none; border:1px solid var(--line-strong); color:var(--concrete);
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  padding:10px; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.archivo-flip-btn:hover{border-color:var(--signal); color:var(--paper); background:rgba(255,75,31,.08);}
.archivo-flip-ico{display:inline-block; transition:transform .5s cubic-bezier(.45,.05,.2,1);}
.archivo-card.flipped .archivo-flip-ico{transform:rotate(180deg);}

@media (max-width:680px){
  /* Carnet compacto: una fila horizontal en vez del carnet completo de
     escritorio. Con 17+ perfiles, el carnet alto (foto arriba + campos +
     pie) hacia que /archivo/ fuera puro scroll en el celular. Acá se
     prioriza poder escanear la lista; la ficha completa (foto grande, bio,
     redes) sigue a un toque de distancia — el boton ya no voltea el carnet
     en este ancho, lleva directo a esa pagina (ver archivo.js). */
  .archivo-inner{height:104px;}
  .archivo-face-front{
    flex-direction:row; align-items:center; gap:12px;
    padding:12px;
  }
  .archivo-fila, .archivo-pie{display:none;}
  .archivo-photo-wrap{flex:0 0 72px; width:72px; height:72px;}
  .archivo-iniciales{font-size:22px;}
  .archivo-datos{display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:0;}
  .archivo-datos h3{font-size:14px; margin-bottom:0;}
  .archivo-meta-compact{
    display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.03em;
    text-transform:uppercase; color:rgba(20,18,16,.5);
  }
  .campo-detalle{display:none;}

  .archivo-riel .archivo-card{flex:0 0 84vw; max-width:84vw;}
}
@media (prefers-reduced-motion: reduce){
  .archivo-face-front, .archivo-face-back, .archivo-flip-ico{transition:none;}
}
.archivo-search{
  width:100%; max-width:340px; background:var(--panel); border:1px solid var(--line-strong);
  color:var(--paper); padding:10px 13px; font-family:var(--sans); font-size:13.5px;
}
.archivo-search:focus{outline:none; border-color:var(--signal);}
.archivo-search-count{font-family:var(--mono); font-size:10px; color:var(--concrete); letter-spacing:.09em;}
.archivo-empty{padding:34px 0; text-align:center; color:var(--concrete);}
.archivo-search-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;}

/* =============================================================
   MUSICA
   ============================================================= */
.sc-estado{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--concrete);}
.sc-estado i{width:6px; height:6px; border-radius:50%; background:var(--concrete);}
.sc-estado.live i{background:var(--acid); box-shadow:0 0 8px var(--acid);}
.sc-btn-play{
  display:flex; align-items:center; gap:8px; background:var(--signal); border:none; color:var(--bg);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 15px; cursor:pointer; transition:opacity .18s;
}
.sc-btn-play:hover{opacity:.85;}
.sc-btn-play svg{width:11px; height:11px; fill:currentColor;}
.sc-btn-skip{
  background:none; border:1px solid var(--line-strong); color:var(--paper);
  padding:9px 11px; cursor:pointer; font-size:11px; line-height:1;
}
.sc-btn-skip:hover{border-color:var(--signal);}
.sc-volume{flex:1; min-width:60px; accent-color:var(--signal);}
.sc-wave{display:flex; align-items:flex-end; gap:2px; height:16px;}
.sc-wave i{
  width:2px; background:var(--signal); height:40%; transform-origin:bottom;
  animation:eq 1.1s ease-in-out infinite; animation-play-state:paused;
}
.sc-wave.playing i{animation-play-state:running;}
@keyframes eq{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}
.musica-pie{font-family:var(--mono); font-size:9.5px; color:var(--concrete); margin-top:16px; line-height:1.6;}

/* =============================================================
   REPRODUCTOR FLOTANTE
   -------------------------------------------------------------
   Clases de estado que aplica player.js: .visible, .minimized,
   .fp-playing, .is-radio, .fp-touch-open.
   ============================================================= */
.floating-player{
  position:fixed; right:18px; bottom:18px;
  z-index:var(--z-floating-player);
  width:300px; max-width:calc(100vw - 36px); height:190px;
  opacity:0; pointer-events:none;
  /* El contenedor tambien anima su tamano. Sin esto saltaba de 300 a 48px
     de golpe mientras el contenido se desvanecia. Antes duraba .46s con un
     rebote al final — se sentia lento/gomoso, asi que se acorto a .28s
     con una curva de salida limpia, sin overshoot. */
  transition:
    opacity .22s ease,
    width .28s cubic-bezier(.22,1,.36,1),
    height .28s cubic-bezier(.22,1,.36,1);
  will-change:width, height;
}
.floating-player.visible{opacity:1;}

/* --- Panel --- */
.fp-inner{
  position:absolute; right:0; bottom:0;
  width:300px; max-width:calc(100vw - 36px);
  transform-origin:100% 100%;
  background:var(--panel);
  border:1px solid var(--line-strong); border-radius:16px;
  padding:13px 14px 12px;
  display:flex; flex-direction:column; gap:11px;
  pointer-events:auto;
  transition:
    opacity .2s ease,
    transform .28s cubic-bezier(.22,1,.36,1);
  will-change:transform, opacity;
}
.floating-player.is-radio .fp-inner{border-color:rgba(255,75,31,.45);}

/* --- Fila superior: arte + datos + acciones --- */
.fp-top{display:flex; align-items:center; gap:10px;}
.fp-art{
  position:relative; width:46px; height:46px; flex-shrink:0; border-radius:50%; overflow:hidden;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
    radial-gradient(circle, #1e1e20 0%, #0a0a0b 75%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.fp-art img{width:100%; height:100%; object-fit:cover; display:block;}
.floating-player.fp-playing .fp-art{animation:fpArtSpin 3.4s linear infinite;}
@keyframes fpArtSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.floating-player.fp-playing .fp-art{animation:none;}}
.fp-art-eq{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  gap:2px; padding:6px; opacity:0; transition:opacity .3s;
}
.fp-art-eq i{
  flex:1; background:var(--acid); height:100%;
  transform-origin:bottom; animation:eq 1s ease-in-out infinite;
  animation-play-state:paused;
}
.floating-player.fp-playing .fp-art-eq{opacity:1;}
.floating-player.fp-playing .fp-art-eq i{animation-play-state:running;}
.floating-player.fp-playing .fp-art{box-shadow:0 0 0 1px rgba(255,75,31,.5);}

.fp-meta{min-width:0; flex:1;}
.fp-station{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--concrete); margin-bottom:3px;
}
.fp-live-dot{
  width:5px; height:5px; border-radius:50%; flex-shrink:0;
  background:var(--concrete);
}
.fp-live-dot.live{background:var(--acid); box-shadow:0 0 7px var(--acid);}
.fp-track{
  font-size:12px; font-weight:600; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fp-top-actions{display:flex; gap:2px; flex-shrink:0;}
.fp-top-actions button{
  background:none; border:none; color:var(--concrete);
  cursor:pointer; line-height:1; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  min-width:32px; min-height:32px; padding:4px;
}
.fp-top-actions button:hover{color:var(--paper);}

/* --- Barra de progreso --- */
.fp-progress-wrap{display:flex; align-items:center; gap:7px;}
.fp-time{
  flex-shrink:0; font-family:var(--mono); font-size:8.5px;
  color:var(--concrete); min-width:26px;
}
.fp-time:last-child{text-align:right;}

/* El scrubber es un contenedor posicionado: las dos capas de barras van
   absolutas DENTRO de el. Si pierde position:relative, las barras se
   escapan y se dibujan sobre toda la pagina. */
.sc-scrubber{
  position:relative; flex:1; min-width:0; height:24px;
  cursor:pointer; overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
.sc-scrub-bars{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; gap:1.5px;
  overflow:hidden; pointer-events:none;
}
.sc-scrub-bars i{
  flex:1 1 0; min-width:1px; height:30%;
  background:var(--line-strong);
}

/* --- Transporte: volumen y cambio de señal pasan a íconos chicos a los
   costados, cada uno con su propio popover — antes eran una fila aparte
   abajo (fp-bottom), con el boton de señal en pastilla con texto. Sin la
   flecha de minimizar (se encoge sola, ver comentario en player.njk) el
   panel queda con tres filas en vez de cuatro. --- */
.fp-transport{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.fp-transport-controls{display:flex; align-items:center; gap:10px;}
.fp-btn{
  background:none; border:none; color:var(--paper); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  min-width:34px; min-height:34px; padding:3px;
}
.fp-btn:hover{color:var(--signal);}
.fp-btn-play{
  background:var(--signal); color:var(--bg);
  width:34px; height:34px; border-radius:50%; padding:0;
  transition:background .2s ease, box-shadow .2s ease;
}
.fp-btn-play svg{width:15px; height:15px;}
.fp-btn-play:hover{color:var(--bg); opacity:.88;}
/* Mismo criterio que .canal-play-ico: signal en reposo, acid mientras
   suena de verdad — hoy el disco giraba pero este boton no lo acompanaba. */
.floating-player.fp-playing .fp-btn-play{background:var(--acid); box-shadow:0 0 18px rgba(212,255,63,.5);}

/* "Cargando": el JS ya agrega esta clase mientras el widget de SoundCloud
   no esta listo (tipico al primer toque en movil, con la conexion mas
   lenta), pero nunca tuvo estilo — sin señal visual, ese primer toque se
   sentia como que no hacia nada. El boton queda inerte mientras tanto
   (pointer-events:none) para no pelear con el toque real que sigue. */
.tm-pending{opacity:.45; pointer-events:none; animation:tmPendingPulse 1s ease-in-out infinite;}
@keyframes tmPendingPulse{50%{opacity:.85;}}
@media (prefers-reduced-motion:reduce){.tm-pending{animation:none;}}

.fp-volume-wrap, .fp-station-switch{position:relative; flex-shrink:0;}
.fp-icon-btn{
  background:none; border:none; color:var(--concrete);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  min-width:36px; min-height:36px; border-radius:50%; padding:2px;
}
.fp-icon-btn:hover{color:var(--paper); background:rgba(255,255,255,.06);}
.fp-station-switch-btn[aria-expanded="true"], .fp-icon-btn.open{color:var(--signal); background:rgba(255,75,31,.1);}

/* Popover del volumen: mismo patron que el menu de señal (abajo), se abre
   al tocar el icono en vez de mostrar el slider siempre — asi el panel no
   necesita una fila completa solo para eso. */
.fp-volume-pop{
  position:absolute; left:0; bottom:calc(100% + 7px);
  width:120px; background:var(--panel);
  border:1px solid var(--line-strong); border-radius:12px; padding:12px 12px;
  display:none; align-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.fp-volume-pop.open{display:flex;}
.fp-volume{width:100%; min-width:0; accent-color:var(--signal); height:3px;}

.fp-station-menu{
  position:absolute; right:0; bottom:calc(100% + 7px);
  width:210px; background:var(--panel);
  border:1px solid var(--line-strong); border-radius:12px; padding:9px;
  display:none; flex-direction:column; gap:3px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.fp-station-menu.open{display:flex;}
.fp-station-menu-label{
  font-family:var(--mono); font-size:8px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--concrete); margin-bottom:4px;
}
.fp-station-option{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; border-radius:8px;
  background:none; border:1px solid transparent; color:var(--concrete);
  padding:7px 8px; cursor:pointer; font-family:var(--sans);
}
.fp-station-option:hover{border-color:var(--line-strong);}
.fp-station-option.active{border-color:var(--signal);}
.fp-station-option-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--line-strong);
}
.fp-station-option.active .fp-station-option-dot{background:var(--signal);}
.fp-station-option-text{display:flex; flex-direction:column; min-width:0; flex:1;}
.fp-station-option-text strong{font-size:11.5px; font-weight:600; color:var(--paper);}
.fp-station-option-text small{font-family:var(--mono); font-size:8.5px; color:var(--concrete);}
.fp-station-check{opacity:0; flex-shrink:0; color:var(--signal);}
.fp-station-option.active .fp-station-check{opacity:1;}

/* --- Icono minimizado --- */
/* Mismo vinilo que el hero de /senal/: gira de verdad mientras suena en
   vez de mostrar un ecualizador aparte — el giro ya es la señal. */
.fp-peek{
  position:absolute; right:0; bottom:0;
  width:48px; height:48px; border-radius:50%;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
    radial-gradient(circle, #1e1e20 0%, #0a0a0b 75%);
  color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; pointer-events:none;
  transform-origin:100% 100%;
  box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
  transform:scale(.6) rotate(-25deg);
  transition:
    opacity .2s ease,
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .2s ease;
}
.fp-peek:hover{box-shadow:0 14px 32px rgba(255,75,31,.4), inset 0 0 0 1px rgba(255,255,255,.08);}
/* La imagen de la cancion, si hay: el radio-de-borde recorta la propia
   img a circulo (sin overflow:hidden en .fp-peek, que rompería el pulso
   de anillo del globo de descubrimiento, cuyo ::after necesita salirse
   del disco). Sin arte se queda en opacity:0 y se ve la textura de vinilo
   de fondo, como antes. */
.fp-peek-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:50%; opacity:0;
  transition:opacity .3s ease;
}
.fp-peek-img.has-art{opacity:1;}
.fp-peek-label{
  position:relative; z-index:1;
  width:18px; height:18px; border-radius:50%; background:var(--acid);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
@keyframes fpDiscoSpin{from{transform:scale(1) rotate(0deg);} to{transform:scale(1) rotate(360deg);}}
.floating-player.minimized.fp-playing .fp-peek{animation:fpDiscoSpin 3.4s linear infinite;}

/* Estado colapsado: el panel se encoge hacia la esquina y aparece el icono */
.floating-player.minimized{height:48px; width:48px;}
.floating-player.minimized .fp-inner{
  opacity:0; pointer-events:none;
  /* Se retira hacia la esquina inferior derecha, donde queda el icono, en
     vez de encogerse a un punto en el centro. */
  transform:scale(.82) translate3d(14px, 12px, 0);
}
.floating-player.minimized .fp-peek{opacity:1; pointer-events:auto; transform:scale(1) rotate(0deg);}
/* Al pasar el mouse (o tocar) sobre el icono, vuelve el panel */
.floating-player.minimized:hover,
.floating-player.minimized:focus-within,
.floating-player.minimized.fp-touch-open{width:300px; height:190px;}
.floating-player.minimized:hover .fp-inner,
.floating-player.minimized:focus-within .fp-inner,
.floating-player.minimized.fp-touch-open .fp-inner{
  opacity:1; pointer-events:auto; transform:scale(1);
}
.floating-player.minimized:hover .fp-peek,
.floating-player.minimized:focus-within .fp-peek,
.floating-player.minimized.fp-touch-open .fp-peek{opacity:0; pointer-events:none; transform:scale(.55) rotate(18deg);}

@keyframes fpPeekIntro{
  0%{transform:scale(.4);} 60%{transform:scale(1.12);} 100%{transform:scale(1);}
}
.floating-player.minimized .fp-peek.fp-intro{animation:fpPeekIntro .5s cubic-bezier(.2,.9,.3,1.3);}

/* --- Globo de descubrimiento --- */
/* Aviso de descubrimiento del reproductor.
   Antes era un globo blanco con texto negro: no pertenecia al lenguaje del
   sitio y, anclado al costado del icono, se salia de pantalla en movil.
   Ahora es un panel oscuro con la misma retícula del resto, anclado SOBRE
   el reproductor y alineado a su borde derecho, asi no se descuadra en
   ningun ancho. */
.fp-hint{
  position:absolute; right:0; bottom:calc(100% + 14px); z-index:3;
  display:flex; align-items:center; gap:7px;
  width:max-content; max-width:min(230px, calc(100vw - 56px));
  background:var(--bg); color:var(--paper);
  border:1px solid rgba(255,75,31,.5);
  border-radius:999px;
  padding:7px 14px 7px 10px;
  opacity:0; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.fp-hint-visible{opacity:1; transform:translateY(0);}
.fp-hint-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--signal); box-shadow:0 0 8px var(--signal);
  animation:fpHintBlink 1.4s ease-in-out infinite;
}
@keyframes fpHintBlink{50%{opacity:.35;}}
.fp-hint-txt{
  font-family:var(--mono); font-size:10.5px; line-height:1.4;
  color:var(--paper); white-space:nowrap;
}
.fp-hint-txt b{color:var(--acid); font-weight:700;}
/* Linea fina que conecta la pastilla con el disco, en vez de una flecha
   de tooltip — nace del propio globo (::after), asi que se desvanece
   junto con el resto sin necesitar su propia clase/JS. */
.fp-hint::after{
  content:""; position:absolute; right:14px; bottom:-14px;
  width:1px; height:14px;
  background:linear-gradient(rgba(255,75,31,.55), transparent);
}
/* Pulso de anillo en el disco mientras el globo esta visible — se lee
   como una senal de radio expandiendose, no como una caja apuntando a un
   boton. :has() evita tener que tocar el JS del player para esto. */
.floating-player:has(.fp-hint-visible) .fp-peek::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(255,75,31,.5);
  animation:fpHintRing 2.2s ease-out infinite;
}
@keyframes fpHintRing{
  0%{transform:scale(1); opacity:.8;}
  100%{transform:scale(2.15); opacity:0;}
}
@media (max-width:600px){
  .fp-hint{
    right:0; left:auto; bottom:calc(100% + 14px);
    max-width:min(230px, calc(100vw - 56px));
  }
}
@media (prefers-reduced-motion: reduce){
  .fp-hint{transition:opacity .2s ease;}
  .fp-hint-dot{animation:none;}
  .floating-player:has(.fp-hint-visible) .fp-peek::after{animation:none;}
}

/* Los iframes de SoundCloud no deben ocupar espacio ni verse */
.sc-hidden-iframe{
  position:absolute; width:1px; height:1px;
  opacity:0; pointer-events:none; border:0;
  left:-9999px; top:auto;
}

@media (max-width:600px){
  .floating-player{
    right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:calc(100vw - 24px);
    /* El alto de 190px de escritorio se pensó para un panel de 300px de
       ancho fijo. En móvil el panel es más angosto (calc(100vw - 24px)),
       así que la fila de abajo (volumen + botón "Cambiar señal") queda más
       apretada — sin espacio extra el contenido se salía de la caja fija
       (.fp-inner es absolute a propósito, para la animación de
       minimizado/expandido, así que nada lo recortaba: el panel se veía
       "crecer" fuera de su lugar). Un alto mayor le da aire real sin tocar
       esa arquitectura de animación.
    */
    height:212px;
  }
  .fp-inner{width:calc(100vw - 24px);}
  .floating-player.minimized:hover,
  .floating-player.minimized:focus-within,
  .floating-player.minimized.fp-touch-open{width:calc(100vw - 24px); height:212px;}
  /* .fp-hint ya queda bien posicionado por la regla de @media(max-width:600px)
     de más arriba (anclado al borde derecho, sobre el player) — antes había
     una segunda regla acá que lo anclaba al revés (left:0 en vez de right:0)
     sobre un player que en móvil ocupa casi todo el ancho de la pantalla
     anclado a la derecha: el mensaje terminaba saliéndose por el borde
     derecho de la pantalla, cortado. */
}

/* =============================================================
   CALENDARIO
   ============================================================= */
.cal-open-btn{
  background:none; border:1px solid var(--line-strong); color:var(--paper);
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  padding:8px 13px; cursor:pointer;
}
.cal-open-btn:hover{border-color:var(--signal);}
.cal-modal-overlay{
  position:fixed; inset:0; z-index:var(--z-cal-modal);
  background:rgba(5,5,6,.9); display:none; align-items:center; justify-content:center; padding:20px;
}
.cal-modal-overlay.open{display:flex;}
.calendar-card{
  background:var(--panel); border:1px solid var(--line-strong);
  width:100%; max-width:430px; padding:20px; position:relative;
}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cal-head h3{font-size:15px; font-weight:800; text-transform:uppercase;}
.cal-head button{background:none; border:1px solid var(--line-strong); color:var(--paper); width:28px; height:28px; cursor:pointer;}
.cal-modal-close{position:absolute; top:12px; right:12px; background:none; border:none; color:var(--concrete); font-size:22px; cursor:pointer; line-height:1;}
.cal-week{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:5px;}
.cal-week span{text-align:center; font-family:var(--mono); font-size:9px; color:var(--concrete);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px;}
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; color:var(--concrete);
  border:1px solid transparent; background:none;
}
.cal-day.has-event{border-color:var(--signal); color:var(--paper); cursor:pointer;}
.cal-day.has-event:hover{background:var(--signal); color:var(--bg);}
.cal-day.today{background:rgba(212,255,63,.15); color:var(--acid);}
.cal-legend{font-family:var(--mono); font-size:9px; color:var(--concrete); margin-top:11px; text-align:center;}
.cal-day-detail{display:none; margin-top:14px; border-top:1px solid var(--line); padding-top:12px; max-height:190px; overflow-y:auto;}
.cal-day-detail.open{display:block;}
.cal-detail-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:9px;}
.cal-detail-head strong{font-size:12.5px;}
.cal-detail-close{background:none; border:none; color:var(--concrete); font-size:17px; cursor:pointer; line-height:1;}
.cal-detail-item{padding:8px 0; border-bottom:1px solid var(--line);}
.cal-detail-title{font-size:12.5px; font-weight:600;}
.cal-detail-meta{font-family:var(--mono); font-size:9.5px; color:var(--concrete); margin-top:2px;}
.cal-detail-link{display:inline-block; margin-top:5px; font-family:var(--mono); font-size:9.5px; color:var(--acid);}

/* =============================================================
   PAGINAS DE NOTA Y PERFIL
   ============================================================= */
/* Columna de lectura: un contenedor unico para todo (titulo, ficha,
   cuerpo, pie) en vez de que cada bloque maneje su propio ancho/centrado
   por separado. Centrada (no pegada a la izquierda): en monitores de
   1920px alineado a la izquierda dejaba casi 1000px vacios de un solo
   lado, se veia peor que centrado con margen parejo a ambos lados. */
.nota-columna{max-width:900px; margin:0 auto;}
.nota-head{padding-left:20px; padding-right:20px;}

/* Ficha de nota, pegada al titulo: fecha + lugar/contexto no puede vivir
   solo al final como nota al pie — es de lo primero que alguien busca.
   Aparece en cualquier nota con dek, tenga o no venta de entradas — el
   boton de compra es lo unico condicional. Forma de ticket real (sello
   circular + costura perforada) en vez de una caja rectangular: con foto
   de portada, el sello es la foto con la fecha superpuesta; sin foto,
   el sello es la fecha sola, como un timbre. */
.evento-stub{display:flex; align-items:stretch; margin:24px 20px 0; max-width:700px; position:relative;}
.es-stamp-col{width:96px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--panel); border-radius:14px 0 0 14px;}
.es-stamp{width:64px; height:64px; border-radius:50%; position:relative; flex-shrink:0;}
/* El recorte circular vive en su propia capa: si overflow:hidden quedara
   en .es-stamp directamente, tambien cortaba el chip de fecha, que
   sobresale del circulo a proposito. */
.es-stamp-photo-clip{position:absolute; inset:0; border-radius:50%; overflow:hidden; border:1px solid var(--line-strong);}
.es-stamp-photo-clip .es-stamp-img{width:100%; height:100%; object-fit:cover; display:block;}
.es-date-chip{
  position:absolute; bottom:-6px; right:-14px; background:var(--acid); color:#0a0a0b;
  border-radius:999px; min-width:32px; height:32px; padding:0 6px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; transform:rotate(-9deg); white-space:nowrap;
  border:2px solid var(--panel); font-family:var(--mono); line-height:1;
}
.es-date-chip b{font-size:10.5px; font-weight:700; letter-spacing:-.02em;}
.es-date-chip span{font-size:5.5px; letter-spacing:.05em; margin-top:1px;}
.es-stamp--date{
  background:var(--acid); color:#0a0a0b; display:flex; flex-direction:column;
  align-items:center; justify-content:center; transform:rotate(-7deg); font-family:var(--mono);
}
.es-stamp--date::after{content:""; position:absolute; inset:5px; border:1.5px dashed rgba(10,10,11,.4); border-radius:50%;}
.es-stamp--date b{font-size:19px; font-weight:700; line-height:1; position:relative; z-index:1;}
.es-stamp--date span{font-size:8px; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; position:relative; z-index:1;}
.es-seam{width:0; border-left:1.5px dashed var(--line-strong); position:relative; flex-shrink:0; background:var(--panel);}
.es-seam::before, .es-seam::after{content:""; position:absolute; left:-7px; width:14px; height:14px; border-radius:50%; background:var(--bg);}
.es-seam::before{top:-7px;}
.es-seam::after{bottom:-7px;}
.es-body{
  flex:1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 20px; background:var(--panel); border-radius:0 14px 14px 0;
}
.es-copy{display:flex; flex-direction:column; gap:4px; min-width:0;}
.es-kicker{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--concrete);}
.es-venue{font-family:var(--sans); font-size:14.5px; font-weight:700; color:var(--paper);}
.es-cta{
  flex-shrink:0; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:#0a0a0b; background:var(--acid); padding:10px 18px; text-decoration:none; white-space:nowrap;
  border-radius:999px; transition:background .15s, transform .15s;
}
.es-cta:hover{background:#e4ff70; transform:translateX(2px);}
@media (max-width:600px){
  .evento-stub{margin:20px 14px 0;}
  .es-stamp-col{width:76px;}
  .es-stamp{width:50px; height:50px;}
  .es-body{padding:14px 16px;}
  .es-cta{width:100%; text-align:center;}
}

.article-body{padding:34px 20px 20px;}
.article-footer{padding:0 20px 20px;}
/* El marco (nota-columna) se queda ancho (900px) para titulo/ficha/foto,
   pero el texto de lectura se angosta aparte — a 900px las lineas rondan
   94 caracteres, muy por sobre los 65-75 comodos para leer. Sin centrar
   aparte: se queda pegado al mismo margen izquierdo que todo lo demas,
   como una sangria de lectura, no una isla flotando distinta. */
.article-body p, .article-body ul, .article-body ol, .article-body blockquote{
  max-width:700px;
}
.article-body p{font-size:16px; line-height:1.85; color:rgba(255,255,255,.86); margin-bottom:19px;}
.article-body h2{font-size:22px; font-weight:800; text-transform:uppercase; margin:32px 0 13px; letter-spacing:-.01em;}
.article-body h3{font-size:17px; font-weight:700; margin:24px 0 10px;}
.article-body a{color:var(--acid); border-bottom:1px solid var(--acid);}
.article-body ul, .article-body ol{margin:0 0 19px 20px;}
.article-body li{font-size:16px; line-height:1.8; color:rgba(255,255,255,.86); margin-bottom:7px;}
.article-body blockquote{
  border-left:2px solid var(--signal); padding:4px 0 4px 18px; margin:26px 0;
  font-size:19px; font-weight:300; line-height:1.5; color:var(--paper);
}
.article-body img{margin:24px 0;}

/* Piezas opcionales del cuerpo — se pegan a mano como bloque HTML dentro
   del markdown de una nota cuando esa nota en particular lo pide (mismo
   patron que .cf-flip para el line-up de Creamfields), no aplican solas
   a todas las notas. */
.nota-float{
  float:right; width:280px; max-width:40%; margin:4px 0 20px 28px; position:relative;
}
.nota-float img{width:100%; display:block; aspect-ratio:4/5; object-fit:cover; margin:0;}
.nota-float figcaption{
  font-family:var(--mono); font-size:10px; line-height:1.5; color:var(--concrete);
  margin-top:8px; padding-left:10px; border-left:2px solid var(--line-strong);
}

.nota-quote{margin:38px 0; padding:8px 0 8px 26px; position:relative;}
.nota-quote::before{
  content:"\201C"; position:absolute; left:-4px; top:-18px; font-family:var(--sans); font-size:64px;
  font-weight:800; color:var(--signal); opacity:.35; line-height:1;
}
.nota-quote blockquote{
  margin:0; font-size:23px; font-weight:300; line-height:1.4; color:var(--paper);
  border:none; padding:0;
}
.nota-quote cite{
  display:block; margin-top:10px; font-family:var(--mono); font-size:10.5px; font-style:normal;
  letter-spacing:.08em; text-transform:uppercase; color:var(--concrete);
}

.nota-break{
  display:flex; align-items:center; gap:14px; margin:46px 0 6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
}
.nota-break::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--signal), transparent);}

/* Foto de pausa a todo el ancho del cuerpo (mas ancha que el texto, que
   esta topado a 700px) con leyenda opcional — el mismo recurso que usan
   RA/Mixmag/DJ Mag para una foto fuerte (crowd shot, foto en vivo) entre
   parrafos. Sin esto un <img> suelto ya se ve ancho, pero no puede
   llevar credito ni contexto. */
.nota-photo{margin:32px 0;}
.nota-photo img{width:100%; display:block; margin:0;}
.nota-photo figcaption{
  font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--concrete);
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
}

/* Tarjeta que se voltea: foto adelante, line-up completo atras. Mismo
   truco de CSS 3D que el carnet de Archivo Vivo (.archivo-card) — alto
   fijo en .cf-flip-inner con las dos caras superpuestas en absolute,
   backface-visibility:hidden para que no se vea la cara de atras al
   derecho. El atras usa scroll interno (como .archivo-back-body) porque
   70+ nombres no entran siempre sin scroll a cualquier alto de pantalla. */
.cf-flip{margin:36px 0; max-width:600px;}
.cf-flip-inner{
  position:relative; width:100%; height:640px;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.7);
}
.cf-face{
  position:absolute; inset:0; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .68s cubic-bezier(.45,.05,.2,1);
  border:1px solid var(--line-strong);
  display:flex; flex-direction:column;
}
.cf-face-front{transform:perspective(1600px) rotateY(0deg);}
.cf-face-back{transform:perspective(1600px) rotateY(-180deg); background:var(--panel);}
.cf-flip.flipped .cf-face-front{transform:perspective(1600px) rotateY(180deg);}
.cf-flip.flipped .cf-face-back{transform:perspective(1600px) rotateY(0deg);}

.cf-face-front img{width:100%; height:100%; object-fit:cover; display:block; margin:0;}
.cf-flip-btn{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(10,10,11,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3); color:var(--paper);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:13px; cursor:pointer;
}
.cf-flip-btn:hover{border-color:var(--acid); color:var(--acid);}
.cf-flip-btn svg{width:14px; height:14px;}
.cf-flip-btn--back{position:static; margin:14px; background:none; backdrop-filter:none;}

.cf-back-scroll{flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; text-align:center; padding:30px 20px 10px;}
.cf-back-scroll::-webkit-scrollbar{width:4px;}
.cf-back-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);}

@media (max-width:660px){
  .cf-flip-inner{height:560px;}
}
@media (prefers-reduced-motion:reduce){
  .cf-face{transition:none;}
}

.cartel-kicker{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--concrete); margin-bottom:14px;
}
.cartel-az{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acid); margin-bottom:12px;
}
.cartel-headliner{
  font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(30px,5.2vw,50px); line-height:1.1; color:var(--paper); margin-bottom:26px;
}
.cartel-tier{margin-top:22px;}
.cartel-tier--2 p{
  font-family:var(--sans); font-weight:800; text-transform:uppercase;
  font-size:clamp(16px,2.4vw,23px); line-height:1.55; color:var(--paper);
}
.cartel-tier--3 p{
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:13.5px; line-height:2; color:rgba(255,255,255,.8);
}
.cartel-tier--4{margin-top:26px; padding-top:22px; border-top:1px solid var(--line);}
.cartel-tier--4 p{
  font-family:var(--mono); font-size:10px; letter-spacing:.02em; text-transform:uppercase;
  line-height:2.2; color:var(--concrete);
}

/* Kicker chico arriba del cuerpo: antes era puro parrafo gris, sin nada
   que se sintiera "Techmotion". El capitular (letra grande) se probo y
   hacia ruido, se saco — se deja solo el kicker. */
.article-body::before{
  content:"— NOTA —"; display:block; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; color:var(--signal); margin-bottom:20px;
}

.article-meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-family:var(--mono); font-size:11px; color:var(--concrete);
  padding-top:15px; border-top:1px solid rgba(255,255,255,.18);
}
/* La fecha ya se muestra arriba en el kicker (Categoria · fecha) —
   repetirla aca solo sumaba ruido. Se deja un separador chico entre
   autor y tiempo de lectura para que no se lean como una sola frase. */
.article-meta .am-sep{opacity:.5;}
.article-share{display:flex; gap:9px; align-items:center; margin:26px 0; flex-wrap:wrap;}
.article-share span{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--concrete);}
.article-share a{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:6px 11px; color:var(--concrete);
}
.article-share a:hover{border-color:var(--signal); color:var(--paper);}
.as-copy{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:6px 11px; color:var(--concrete);
  background:none; cursor:pointer;
}
.as-copy:hover{border-color:var(--signal); color:var(--paper);}

/* Recordatorio discreto a Agenda, en toda nota (no solo las de evento):
   una linea chica al cierre, sin competir con nada. */
.article-agenda-hint{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--concrete);
}
.article-agenda-hint a{color:var(--acid); border-bottom:1px solid var(--acid);}
.article-agenda-hint a:hover{color:var(--signal); border-color:var(--signal);}
.related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:14px;}
@media (max-width:680px){ .related-grid{grid-template-columns:1fr;} }
.related-card{border:1px solid var(--line); transition:background .2s;}
.related-card:hover{background:var(--panel);}
.related-photo{aspect-ratio:16/10; position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px),var(--panel);}
.related-photo div{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s ease;}
.related-card:hover .related-photo div{transform:scale(1.07);}
/* Tarjeta "ver todo": no hay una foto real que mostrar (no es de una
   nota/perfil en particular), asi que se centra la marca en vez de dejar
   el recuadro vacio sin nada que mirar. */
.related-photo--empty{display:flex; align-items:center; justify-content:center;}
.related-photo--empty img{position:static; width:130px; height:130px; opacity:.55; transition:opacity .3s, transform .5s ease;}
.related-card:hover .related-photo--empty img{opacity:.85; transform:scale(1.07);}
.perfil-detail-photo-wrap{position:relative; aspect-ratio:4/3; overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px),var(--panel);}
.perfil-detail-photo-wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* =============================================================
   FORMULARIOS
   ============================================================= */
.contact-form label{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--concrete); margin:14px 0 6px;
}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--line-strong);
  color:var(--paper); padding:11px 13px; font-family:var(--sans); font-size:14px;
}
.contact-form textarea{min-height:120px; resize:vertical;}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{outline:none; border-color:var(--signal);}
.form-success{display:none; font-size:13.5px; color:var(--acid); font-family:var(--mono);}
.form-error{display:none; font-size:12.5px; color:var(--signal); font-family:var(--mono); margin-top:10px; line-height:1.5;}
.form-error.visible{display:block;}
.btn{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; padding:12px 18px; border:1px solid var(--line-strong);
  color:var(--paper); cursor:pointer; background:none; transition:.18s; text-align:center;
}
.btn:hover{border-color:var(--signal);}
.btn.solid{background:var(--signal); border-color:var(--signal); color:var(--bg);}
.btn.solid:hover{opacity:.86;}
.btn.ghost{background:none;}
.btn:disabled{opacity:.55; cursor:wait;}

/* =============================================================
   PIE DE PAGINA
   ============================================================= */
.pie, .foot-secundario{
  border-top:1px solid var(--line-strong); margin-top:38px; padding:30px 0 0;
}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1.4fr; gap:34px; padding-bottom:26px;}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .foot-grid{grid-template-columns:1fr;} }
.foot-grid h4{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--signal); margin-bottom:11px;}
.foot-grid p{font-size:13px; color:var(--concrete); max-width:34ch;}
.foot-tagline{margin-bottom:14px;}
.foot-links{display:flex; flex-direction:column; gap:6px;}
.foot-links a{font-size:13px; color:var(--concrete);}
.foot-links a:hover{color:var(--paper);}
.foot-social{display:flex; flex-wrap:wrap; gap:12px;}
.foot-social a{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--paper); border-bottom:1px solid var(--line-strong); padding-bottom:2px;
}
.foot-social a:hover{color:var(--signal); border-color:var(--signal);}
.foot-news-hp{position:absolute; left:-9999px;}
.foot-news-row{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px;}
.foot-news-row input[type="email"]{
  flex:1 1 160px; min-width:0; background:rgba(255,255,255,.05); border:1px solid var(--line-strong);
  color:var(--paper); padding:11px 12px; font-family:var(--sans); font-size:13px;
}
.foot-news-row input[type="email"]:focus{outline:none; border-color:var(--signal);}
.foot-news-btn{flex:0 0 auto; padding:11px 16px; font-size:10px;}
.foot-news-consent{
  display:flex; align-items:flex-start; gap:8px; margin-top:11px;
  font-size:11.5px; line-height:1.55; color:var(--concrete); cursor:pointer;
}
.foot-news-consent input[type="checkbox"]{flex-shrink:0; margin-top:2px; width:14px; height:14px; accent-color:var(--signal); cursor:pointer;}
.foot-news-consent a{color:var(--paper); border-bottom:1px solid var(--signal);}
.foot-news-msg{font-size:11.5px; margin-top:8px; line-height:1.55;}
.foot-news-msg.is-ok{color:var(--acid);}
.foot-news-msg.is-error{color:var(--signal);}
.foot-secundario-bottom{
  border-top:1px solid var(--line); padding:15px 0 30px;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; color:var(--concrete);
}
.foot-legal-links{display:flex; gap:16px; flex-wrap:wrap;}
.foot-legal-link{color:var(--concrete); border-bottom:1px solid var(--line-strong);}
.foot-legal-link:hover{color:var(--signal); border-color:var(--signal);}
.foot-secundario-mark{display:inline-block;}
.foot-secundario-mark img{height:26px; width:auto; display:block; opacity:.92;}
.foot-secundario-mark:hover img{opacity:1;}
.foot-secundario-mark span{color:var(--signal);}
.foot-secundario-copy{font-family:var(--mono); font-size:10px; color:var(--concrete);}

/* =============================================================
   PAGINA LEGAL
   ============================================================= */
.legal-page{padding:50px 0 60px;}
.legal-wrap{max-width:740px;}
.legal-title{font-size:clamp(30px,5vw,50px); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:1.02; margin:6px 0 10px;}
.legal-updated{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--concrete); margin-bottom:30px;}
.legal-intro{font-size:15px; line-height:1.8; color:var(--paper); padding:18px 20px; border-left:2px solid var(--signal); background:rgba(255,255,255,.03); margin-bottom:40px;}
.legal-wrap h2{font-size:19px; font-weight:800; text-transform:uppercase; margin:40px 0 13px; padding-top:19px; border-top:1px solid var(--line); letter-spacing:-.01em;}
.legal-wrap h3{font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--signal); margin:24px 0 9px;}
.legal-wrap p{font-size:14px; line-height:1.85; color:var(--concrete); margin-bottom:13px;}
.legal-wrap strong{color:var(--paper); font-weight:600;}
.legal-wrap ul{margin:0 0 15px; padding-left:19px;}
.legal-wrap li{font-size:14px; line-height:1.85; color:var(--concrete); margin-bottom:6px;}
.legal-wrap a{color:var(--paper); border-bottom:1px solid var(--signal);}
.legal-wrap a:hover{color:var(--signal);}
.legal-contact-box{margin-top:44px; padding:22px 24px; border:1px solid var(--line-strong); background:rgba(255,255,255,.03);}
.legal-contact-box strong{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px;}
.legal-contact-box p{margin:0;}


/* =============================================================
   ENTRADA Y TRANSICION ENTRE PAGINAS
   ============================================================= */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
  [data-reveal].in-view{opacity:1; transform:translateY(0);}
  .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  img[loading="lazy"]{opacity:0; transition:opacity .5s ease;}
  img[loading="lazy"].img-loaded{opacity:1;}
  #view{transition:opacity .22s ease;}
  #view.view-fading{opacity:0;}
}

/* =============================================================
   MOVIMIENTO REDUCIDO
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  .tm-aura span{animation:none !important;}
}

/* archivo.js y notas-filter.js ocultan tarjetas con la clase .hidden */
.archivo-card.hidden, .nota-card.hidden, .agenda-item.hidden{display:none !important;}


/* =============================================================
   COMPONENTES RECUPERADOS
   -------------------------------------------------------------
   Reglas que existían en el diseño anterior y que se perdieron al
   reescribir la hoja: páginas de nota y perfil, listado paginado,
   fichas del archivo y detalles sueltos. Se recuperan con el
   marcado real y se adaptan a la tipografía nueva (Anton -> Archivo
   en peso 800, que es el equivalente en el sistema actual).
   ============================================================= */
.eyebrow{
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--signal);
    display:flex;
    align-items:center;
    gap:10px;
  }
.eyebrow::before{
    content:"";
    width:7px; height:7px;
    background:var(--acid);
    border-radius:50%;
    box-shadow:0 0 8px var(--acid);
    animation:pulse 1.6s ease-in-out infinite;
  }
.tag{
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--signal); margin-bottom:14px; display:block;
  }
/* NOTAS (solo prensa) */
  .notas{background:var(--bg); border-top:1px solid var(--line);}
.notas-standalone{border-top:none;}
.notas-cta{
    margin-top:40px; padding-top:32px; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
.notas-cta p{margin:0; font-size:14px; color:var(--paper); max-width:440px;}
.notas-cta p strong{color:var(--signal);}
/* Variante para cuando /archivo/ se usa como página propia en vez de
     sección dentro de la home: sin borde superior, porque no hay nada
     arriba. (El padding extra que tenía antes para "no tapar con el topbar"
     no hacía falta — el topbar es sticky, no fixed, así que nunca se
     superpone; solo estaba agregando un espacio en blanco enorme antes
     del título.) */
  .archivo-standalone{border-top:none;}
.archivo-stamp{
    position:absolute; bottom:10px; right:10px; z-index:3;
    border:1.5px solid var(--paper); color:var(--paper);
    font-size:9px; letter-spacing:.1em; text-transform:uppercase;
    padding:4px 9px; transform:rotate(-6deg); border-radius:3px;
    background:rgba(23,20,15,.4);
  }
.archivo-meta{
    display:flex; align-items:center; gap:9px; margin-top:auto;
    font-family:var(--mono); font-size:10.5px; color:#5a5850;
    border-top:1px dashed rgba(23,20,15,.25); padding-top:12px;
  }
.archivo-meta .bars{
    flex-shrink:0; width:32px; height:15px;
    background:repeating-linear-gradient(90deg, #17140f 0 2px, transparent 2px 4px);
    opacity:.5;
  }
.archivo-back-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px;}
.archivo-back-tags span{
    font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
    border:1px solid rgba(23,20,15,.3); border-radius:3px; padding:3px 7px; color:#4a4740;
  }
.archivo-back-links{display:flex; flex-direction:column; gap:10px; width:100%; margin-top:auto;}
.archivo-cta{
    background:rgba(255,75,31,.04);
    border:1px solid var(--line-strong);
    padding:40px;
    text-align:center;
   margin-top:56px;}
.archivo-cta h3{font-family:var(--sans); font-weight:800; letter-spacing:-.015em; text-transform:uppercase; color:var(--paper); font-size:26px; margin-bottom:12px;}
.archivo-cta p{max-width:520px; margin:0 auto 24px; font-size:14px; line-height:1.7;}
.perfil-detail-grid{display:grid; gap:32px; grid-template-columns:1fr;}
@media(min-width:800px){
  .perfil-detail-grid{grid-template-columns:360px 1fr; align-items:start;}
}
.perfil-detail-body{padding-top:4px;}
.perfil-detail-body h1{font-family:var(--sans); font-weight:800; letter-spacing:-.015em; text-transform:uppercase; font-size:clamp(28px,4.5vw,44px); margin:10px 0 14px;}
.perfil-detail-bio{color:var(--concrete); font-size:15px; line-height:1.7; margin:18px 0;}
.perfil-detail-links{margin-top:20px; padding-top:0; border:none;}
.perfil-detail-links .archivo-back-link{
  color:var(--signal);
  border-top:1px dashed var(--line-strong);
}
.perfil-detail-links .archivo-back-link svg{color:var(--signal);}
.perfil-detail-links .archivo-back-link:hover{color:var(--acid); transform:translateX(3px);}
/* ============================================
   PÁGINA DE ARTÍCULO (notas individuales)
   ============================================ */
/* El topbar es sticky (ocupa su propio espacio, nunca se superpone), no
   fixed — este padding-top grande era una reserva de espacio para un
   topbar fixed que no existe. Mismo bug que ya se corrigio en /notas/ y
   /archivo/ (ver mas abajo, seccion "espacios que sobraban"). */
.article-context-bar{padding:28px 24px 0;}
.article-context-bar .article-back{display:inline-flex;}
.article-back{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--concrete);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:color .2s, gap .2s;
}
.article-back:hover{color:var(--signal); gap:12px;}
.article-back svg{width:12px; height:12px; transform:rotate(180deg);}
/* Video incrustado dentro de una nota (link de YouTube o archivo subido
   en /admin). Lleva su propia etiqueta y marcas de esquina —igual que las
   tarjetas de Música— para que se lea como contenido enriquecido dentro
   de la historia, no como una segunda portada repetida. */
.nota-video-wrap{margin:4px 0 30px;}
.nota-video-eyebrow{
  display:flex; align-items:center; gap:7px; margin-bottom:12px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--signal);
}
.nota-video-eyebrow svg{width:11px; height:11px;}
/* Se habia perdido junto con .fp-inner .crop al sacar las marcas de
   esquina del reproductor flotante — .crop tambien vivia acá, para el
   marco del video embebido, y se quedo sin estilos (invisible). */
.nota-video{
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--panel); border:1px solid var(--line-strong); overflow:hidden;
}
.nota-video video, .nota-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.nota-video .crop{
  position:absolute; width:9px; height:9px; z-index:1;
  border:1px solid var(--signal); pointer-events:none;
}
.nota-video .crop.tl{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.nota-video .crop.tr{top:-1px; right:-1px; border-left:none; border-bottom:none;}
.nota-video .crop.bl{bottom:-1px; left:-1px; border-right:none; border-top:none;}
.nota-video .crop.br{bottom:-1px; right:-1px; border-left:none; border-top:none;}
.article-tags{display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 0;}
.article-tags a{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--concrete);
  border:1px solid var(--line-strong); padding:7px 14px; border-radius:20px; text-decoration:none;
  transition:border-color .2s, color .2s;
}
.article-tags a:hover{border-color:var(--signal); color:var(--signal);}
.article-related{background:var(--paper); color:var(--ink); padding:64px 0;}
.article-related .wrap{max-width:1100px;}
.article-related .tag{margin-bottom:10px;}
.article-related .related-heading{font-family:var(--sans); font-weight:800; letter-spacing:-.015em; text-transform:uppercase; font-size:clamp(22px,3vw,28px); margin-bottom:28px;}
.related-card .rc-body{padding:16px 18px 20px;}
.related-card .rc-body .rc-cat{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--signal); font-weight:700;}
.related-card .rc-body h4{font-family:var(--sans); font-weight:800; letter-spacing:-.015em; text-transform:uppercase; font-size:18px; margin:6px 0;}
.related-card .rc-body p{font-size:12.5px; color:#5a5850; line-height:1.6;}
/* Paginación del archivo de notas */
.notas-pager{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:44px; padding-top:28px; border-top:1px solid var(--line);
}
.notas-pager .pager-info{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--concrete);}
/* --- 4. GLOW EN ACENTOS ---------------------------------------- */

/* --- 7. DERIVA DE TONO CON MÚSICA ------------------------------ */
body.tm-sonando .tag,
body.tm-sonando .eyebrow{animation:tmTono 14s ease-in-out infinite;}

/* Formulario de suscripción: el contenedor necesita posición para que el
   honeypot (posicionado fuera de pantalla) no arrastre la página. */
.foot-news-form{position:relative;}
/* Etiqueta del botón de reproducir en las tarjetas de señal. */
.sc-play-label{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;}

/* =============================================================
   VARIANTES DEL REPRODUCTOR PRESENTES EN EL MARCADO
   Estas clases existen en player.njk e index.njk y necesitan
   su propia regla: sin ellas los botones y las barras quedan
   con el estilo por defecto del navegador.
   ============================================================= */
.fp-scrubber{height:24px;}
.fp-scrub-bg{}
.fp-scrub-fg{width:0%;}
.fp-btn-skip{min-width:34px; min-height:34px;}
.fp-btn-skip svg{width:13px; height:13px;}
.fp-close{
  background:none; border:none; color:var(--concrete);
  cursor:pointer; padding:3px 4px; line-height:1;
  display:flex; align-items:center; font-size:14px;
}
.fp-close:hover{color:var(--paper);}
/* Icono de play en las tarjetas de señal (player.js lo intercambia
   por el de pausa al reproducir). */
.ico-play{display:flex; align-items:center;}
.ico-play svg{width:11px; height:11px; fill:currentColor;}

/* =============================================================
   PANTALLAS MUY ANGOSTAS (320–480px)
   Ultimo tramo: donde el texto se aprieta y los controles quedan
   demasiado chicos para el dedo.
   ============================================================= */
@media (max-width:480px){
  .wrap{padding:0 14px;}

  /* La nota principal es la carta de presentacion de la portada — se
     probo igualarla en tamano a las destacadas de abajo, pero las
     destacadas terminaron yendo al formato chico de tarjeta normal en
     movil (ver seccion NOTAS DESTACADAS), asi que ya no hay ninguna razon
     para achicar la principal para que combine con ellas. Vuelve a su
     propio tamano, mas grande y con mas presencia. */
  .lead .foto{min-height:340px; padding:20px 16px 18px;}
  .lead .titular{font-size:clamp(26px,8.4vw,34px); max-width:none;}
  .lead .bajada{font-size:13.5px;}
  .lead-meta{gap:8px; font-size:10px;}

  /* Tarjetas de nota */
  .nota-card .foto{padding:15px 14px 14px;}
  .nota-card .titular{font-size:21px;}
  .nota-card .bajada{font-size:12px;}
  .nota-pie{padding:10px 14px; font-size:9px;}

  /* Agenda: area tactil mas comoda */
  .agenda-item{padding:12px 0; gap:10px;}
  .agenda-info h4{font-size:13.5px;}
  .month-chip{padding:9px 12px;}
  .agenda-nav-btn{width:34px; height:34px;}

  /* Nota: el alto y layout del carnet ya quedan bien cubiertos por la regla
     de @media (max-width:680px) de más arriba (height:330px + foto de
     140px) — antes había reglas acá que lo pisaban con un alto de 210px
     pensado para un diseño anterior del carnet (foto y datos lado a lado,
     con .archivo-face-front en grid). Esa versión ya no existe: la cara del
     carnet es flex en columna hace tiempo, así que "grid-template-columns"
     no hacía nada, y el 210px solo aplastaba el contenido contra el borde
     en cualquier pantalla angosta de menos de 480px. */
  .archivo-datos h3, .archivo-face-back h3{font-size:18px;}

  /* Franjas de seccion */
  .franja{padding:22px 0 11px; gap:10px;}
  .franja h2{font-size:15px;}
  .franja a{font-size:9px;}

  /* Formularios: alto minimo comodo para tocar */
  .contact-form input, .contact-form select, .contact-form textarea,
  .foot-news-row input[type="email"]{padding:13px 12px; font-size:16px;}
  .btn{padding:14px 18px;}
  .foot-news-row{flex-direction:column;}
  .foot-news-btn{width:100%;}

  /* Pie */
  .foot-grid{gap:26px;}
  .foot-secundario-bottom{flex-direction:column; align-items:flex-start; gap:8px;}

  /* Nota individual */
  .article-body{padding:24px 14px 16px;}
  .article-body p, .article-body li{font-size:15px;}
  .nota-float{float:none; width:100%; max-width:none; margin:4px 0 22px;}
  .nota-quote blockquote{font-size:20px;}
}

/* Evita desbordes horizontales en cualquier tamano: titulares largos y
   palabras sin espacios (nombres de artistas, hashtags) parten limpio. */
.titular, .legal-title{
  overflow-wrap:break-word; word-break:break-word; hyphens:auto;
}

/* =============================================================
   NOTAS DESTACADAS
   Dos tarjetas grandes bajo la principal: un front page necesita
   jerarquia, si todo pesa igual nada destaca.
   ============================================================= */
.nota-grid--destacadas{grid-template-columns:repeat(2,1fr); border-bottom:none;}
.nota-grid--destacadas .foto{aspect-ratio:16/10;}
.nota-grid--destacadas .foto--vacia{aspect-ratio:auto; min-height:280px; padding-top:70px;}
.nota-grid--destacadas .titular{font-size:31px;}
.nota-grid--destacadas .bajada{font-size:13.5px; max-width:52ch;}
.nota-grid--destacadas .nota-pie{padding:13px 20px;}
.nota-grid--destacadas .foto{padding:22px 20px 20px;}
@media (max-width:900px){
  .nota-grid--destacadas{grid-template-columns:1fr;}
  .nota-grid--destacadas .titular{font-size:26px;}
  .nota-grid--destacadas .foto--vacia{min-height:230px; padding-top:56px;}
}
/* El formato "destacada" (foto mas grande, titular mas grande) solo tiene
   razon de ser en escritorio, donde hace jerarquia junto a la columna de
   agenda al costado. En movil todo es una columna igual que la grilla de
   abajo, asi que mantenerlo "grande" ahi no aportaba nada — se via
   distinto sin razon, y ese porque se sentia mal. Se resetea a los mismos
   valores exactos que usa .nota-card (grilla normal), en los mismos dos
   cortes que ya usa esa grilla. */
@media (max-width:680px){
  .nota-grid--destacadas .foto{aspect-ratio:4/5; padding:18px 17px 17px;}
  .nota-grid--destacadas .foto--vacia{aspect-ratio:auto; min-height:220px; padding-top:52px;}
  .nota-grid--destacadas .titular{font-size:23px;}
  .nota-grid--destacadas .bajada{font-size:12.5px; max-width:none;}
  .nota-grid--destacadas .nota-pie{padding:11px 17px; font-size:9.5px;}
  /* Se me quedo afuera del reseteo: el marca seguia con el tamano grande
     de "destacada" (46px) mientras la foto ya media lo mismo que una
     tarjeta normal — chocaba con el kicker "Anuncio". */
  .nota-grid--destacadas .marca{width:40px; height:40px;}
}
@media (max-width:480px){
  .nota-grid--destacadas .foto{padding:15px 14px 14px;}
  .nota-grid--destacadas .titular{font-size:21px;}
  .nota-grid--destacadas .bajada{font-size:12px;}
  .nota-grid--destacadas .nota-pie{padding:10px 14px; font-size:9px;}
}

/* =============================================================
   ARCHIVO EN RIEL
   Se desliza en horizontal: caben mas carnets sin crecer en alto.
   ============================================================= */
.archivo-riel{
  display:flex; gap:16px; overflow-x:auto;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding-bottom:12px; scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.archivo-riel::-webkit-scrollbar{height:5px;}
.archivo-riel::-webkit-scrollbar-thumb{background:var(--line-strong);}
.archivo-riel::-webkit-scrollbar-track{background:transparent;}
.archivo-riel .archivo-card{
  flex:0 0 296px; max-width:296px; scroll-snap-align:start;
}
@media (max-width:520px){
  .archivo-riel .archivo-card{flex:0 0 84vw; max-width:84vw;}
}

/* =============================================================
   SENAL — tira compacta de la portada
   El detalle completo vive en /senal/; aca solo la invitacion.
   ============================================================= */
.senal-tira{
  display:grid; grid-template-columns:1fr 1fr; gap:34px;
  align-items:center; padding:34px 0;
  border-top:1px solid var(--line-strong);
}
.senal-tira-copy .titular{font-size:clamp(24px,3.2vw,38px); margin:0 0 12px;}
.senal-tira-copy .bajada{font-size:14px; max-width:44ch;}
.senal-tira-canales{display:flex; flex-direction:column; gap:9px;}
.senal-canal{
  display:flex; align-items:center; gap:13px;
  border:1px solid var(--line-strong); padding:13px 15px;
  transition:border-color .2s, background .2s;
}
.senal-canal:hover{border-color:var(--signal); background:rgba(255,75,31,.06);}
.senal-canal-num{
  font-family:var(--mono); font-size:11px; color:var(--signal);
  letter-spacing:.1em; flex-shrink:0;
}
.senal-canal-txt{display:flex; flex-direction:column; flex:1; min-width:0;}
.senal-canal-txt strong{font-size:14px; font-weight:600;}
.senal-canal-txt small{font-family:var(--mono); font-size:9.5px; color:var(--concrete);}
.senal-canal-eq{display:flex; align-items:flex-end; gap:2px; height:15px; flex-shrink:0;}
.senal-canal-eq i{
  width:2.5px; height:100%; background:var(--line-strong);
  transform-origin:bottom; transition:background .2s;
}
.senal-canal:hover .senal-canal-eq i{
  background:var(--signal); animation:eq 1s ease-in-out infinite;
}
.senal-canal-eq i:nth-child(2){animation-delay:.12s;}
.senal-canal-eq i:nth-child(3){animation-delay:.24s;}
.senal-canal-eq i:nth-child(4){animation-delay:.36s;}
body.tm-sonando .senal-canal-eq i{background:var(--acid); animation:eq 1s ease-in-out infinite;}
@media (max-width:900px){
  .senal-tira{grid-template-columns:1fr; gap:22px; padding:28px 0;}
}

/* =============================================================
   QUIENES SOMOS
   ============================================================= */
.sobre-grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:40px;
  padding-bottom:10px; align-items:start;
}
.sobre-frase{font-size:clamp(24px,3.2vw,38px); margin-bottom:14px;}
.sobre-lead .bajada{font-size:14.5px; max-width:46ch;}
.sobre-pilares{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);}
/* Sin la columna de texto (frase+bajada, ahora en /contacto/) los cuatro
   pilares tienen todo el ancho de portada para ellos — una franja de 4,
   no un cuadrado de 2x2 que quedaria angosto y perdido. */
.sobre-grid--solo{grid-template-columns:1fr;}
.sobre-grid--solo .sobre-pilares{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .sobre-grid--solo .sobre-pilares{grid-template-columns:repeat(2,1fr);}
}
.pilar{background:var(--bg); padding:18px 18px 20px;}
.pilar-num{
  display:block; font-family:var(--mono); font-size:10px;
  color:var(--signal); letter-spacing:.13em; margin-bottom:7px;
}
.pilar h3{font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:6px;}
.pilar p{font-size:12.5px; line-height:1.6; color:var(--concrete);}
@media (max-width:900px){
  .sobre-grid{grid-template-columns:1fr; gap:26px;}
}
@media (max-width:520px){
  .sobre-pilares{grid-template-columns:1fr;}
}

/* =============================================================
   CONTACTO BREVE (portada) Y TIPOS (pagina /contacto/)
   ============================================================= */
.contacto-breve{
  display:grid; grid-template-columns:1fr auto; gap:32px;
  align-items:center; padding:32px 0;
  border-top:1px solid var(--line-strong);
}
.contacto-breve-frase{font-size:clamp(24px,3.2vw,38px); margin:6px 0 10px;}
.contacto-breve .bajada{font-size:14px; max-width:46ch;}
.contacto-breve-acciones{display:flex; flex-direction:column; gap:10px; align-items:stretch;}
.contacto-breve-mail{font-family:var(--mono); font-size:11px; color:var(--concrete); text-align:center;}
.contacto-breve-mail a{color:var(--paper); border-bottom:1px solid var(--signal);}
@media (max-width:760px){
  .contacto-breve{grid-template-columns:1fr; gap:20px;}
  .contacto-breve-acciones{flex-direction:row; flex-wrap:wrap; align-items:center;}
  .contacto-breve-mail{text-align:left;}
}





@media (max-width:760px){
  
}

/* =============================================================
   CLIMAS DE COLOR EN LAS TARJETAS
   -------------------------------------------------------------
   Ocho atmosferas rotando. Esto NO es decoracion suelta: es un
   medio tekno y el color es parte del lenguaje. Una grilla de
   ocho rectangulos grises se ve muerta.
   Lo que si se cuida es que el color quede DETRAS del texto y
   nunca compita con el: por eso el degradado se concentra en el
   tercio superior de la tarjeta y se apaga hacia abajo, que es
   donde vive el titular y la bajada.
   Al subir la foto real, la imagen ocupa ese lugar y el clima
   deja de verse.
   ============================================================= */
.nota-card .foto--vacia{background-color:var(--panel);}
.nota-card .foto--vacia::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--clima, none);
}
.clima-1 .foto--vacia{--clima:radial-gradient(ellipse 82% 58% at 38% 18%, rgba(190,26,64,.52), transparent 70%), linear-gradient(172deg, rgba(96,14,34,.5), transparent 62%);}
.clima-2 .foto--vacia{--clima:radial-gradient(ellipse 78% 56% at 62% 16%, rgba(10,110,124,.5), transparent 68%), linear-gradient(172deg, rgba(8,58,70,.5), transparent 62%);}
.clima-3 .foto--vacia{--clima:radial-gradient(ellipse 82% 56% at 34% 18%, rgba(178,132,18,.46), transparent 70%), linear-gradient(172deg, rgba(84,62,10,.46), transparent 62%);}
.clima-4 .foto--vacia{--clima:radial-gradient(ellipse 80% 56% at 64% 16%, rgba(104,44,180,.5), transparent 68%), linear-gradient(172deg, rgba(52,20,96,.5), transparent 62%);}
.clima-5 .foto--vacia{--clima:radial-gradient(ellipse 80% 56% at 44% 18%, rgba(24,132,64,.44), transparent 68%), linear-gradient(172deg, rgba(12,68,32,.46), transparent 62%);}
.clima-6 .foto--vacia{--clima:radial-gradient(ellipse 78% 56% at 58% 18%, rgba(198,86,20,.5), transparent 70%), linear-gradient(172deg, rgba(96,42,10,.48), transparent 62%);}
.clima-7 .foto--vacia{--clima:radial-gradient(ellipse 82% 54% at 36% 16%, rgba(28,84,168,.5), transparent 68%), linear-gradient(172deg, rgba(14,44,90,.5), transparent 62%);}
.clima-8 .foto--vacia{--clima:radial-gradient(ellipse 80% 56% at 60% 16%, rgba(170,26,120,.48), transparent 68%), linear-gradient(172deg, rgba(82,12,58,.5), transparent 62%);}

/* La nota principal manda: su clima es mas intenso que el de la grilla. */
.lead .foto--vacia{--clima:radial-gradient(ellipse 74% 62% at 62% 24%, rgba(255,75,31,.3), transparent 66%), linear-gradient(162deg, rgba(120,26,10,.4), transparent 72%);}


/* =============================================================
   REFINAMIENTO DE SECCIONES DE LA PORTADA
   Las tres secciones de cierre (senal, quienes somos, contacto)
   eran cajas sueltas sobre fondo plano. Se les da estructura de
   pagina impresa: numeracion, reglas y bloques con peso.
   ============================================================= */

/* --- SENAL --- */
.senal-tira{
  position:relative;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line);
  padding:38px 0;
}

.senal-canal{
  position:relative; overflow:hidden;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  padding:15px 17px;
}
.senal-canal::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--signal); transform:scaleY(0); transform-origin:bottom;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.senal-canal:hover::before{transform:scaleY(1);}
.senal-canal:hover{border-color:var(--line-strong); background:rgba(255,255,255,.045);}
.senal-canal-num{font-size:12px; opacity:.75;}
.senal-canal-txt strong{font-size:14.5px; letter-spacing:-.01em;}

/* --- QUIENES SOMOS --- */
.sobre-grid{position:relative;}
.sobre-lead{position:relative; padding-right:8px;}
.sobre-lead::before{
  content:""; position:absolute; left:-16px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(to bottom, var(--signal), transparent);
}
@media (max-width:900px){ .sobre-lead::before{display:none;} }
.sobre-pilares{
  background:var(--line-strong);
  border:1px solid var(--line-strong);
}
.pilar{
  position:relative; padding:20px 20px 22px;
  transition:background .22s ease;
}
.pilar:hover{background:var(--panel);}
.pilar-num{
  font-size:9.5px; letter-spacing:.18em; color:var(--concrete);
  margin-bottom:9px; opacity:.7;
}
.pilar:hover .pilar-num{color:var(--signal); opacity:1;}
.pilar h3{margin-bottom:7px;}

/* --- CONTACTO BREVE --- */
.contacto-breve{
  position:relative;
  border-top:1px solid var(--line-strong);
  padding:38px 0 34px;
}

.contacto-breve-acciones .btn{min-width:180px;}
.contacto-breve-mail{margin-top:2px;}

/* Numeracion de las otras dos secciones de cierre, para que la portada
   se lea como un indice y no como bloques sueltos. */
.franja{position:relative;}


/* =============================================================
   CABECERA DE PAGINA INTERIOR
   Antes cada pagina abria con un h2 chico y un parrafo suelto.
   Con volanta, titular de peso mixto y una linea de datos, se lee
   como portada de seccion de un medio.
   ============================================================= */
.pagina-head{padding:38px 0 26px; max-width:62ch;}
.pagina-head .titular{font-size:clamp(30px,4.4vw,52px); margin-bottom:13px;}
.pagina-head .bajada{font-size:14.5px; max-width:54ch;}
.pagina-head-meta{
  display:flex; flex-wrap:wrap; gap:18px; margin-top:18px;
  padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--concrete);
}
.notas-standalone .archivo-filter-row{
  padding-bottom:16px; border-bottom:1px solid var(--line-strong); margin-bottom:0;
}

/* =============================================================
   DESPLEGABLES
   En escritorio el navegador dibuja la lista con los colores del
   sistema: fondo blanco y, al heredar nuestro color de texto
   claro, quedaba blanco sobre blanco e ilegible. Hay que pintar
   las <option> explicitamente.
   ============================================================= */
.contact-form select,
#cityFilter{
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--concrete) 50%),
                   linear-gradient(135deg, var(--concrete) 50%, transparent 50%);
  background-position:calc(100% - 17px) center, calc(100% - 12px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}
.contact-form select option,
#cityFilter option{
  background-color:#16161a;
  color:#f2efe6;
}
/* Firefox usa este par para el estado resaltado */
.contact-form select option:checked,
#cityFilter option:checked{
  background:var(--signal); color:var(--bg);
}









/* Cierre de la pagina: recordatorio de los canales alternativos */
.contacto-cierre{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin:6px 0 10px; padding:22px 0 0;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--concrete);
}
.contacto-cierre a{color:var(--paper); border-bottom:1px solid var(--signal);}
.contacto-cierre a:hover{color:var(--signal);}

/* Salvaguarda del carrusel de agenda: si la medicion de altura fallara por
   cualquier motivo, el contenedor crece igual en vez de recortar la lista.
   El JS sigue fijando la altura exacta para animar el cambio de mes. */
.agenda-viewport{min-height:fit-content;}

/* La columna de agenda de la portada es informativa: sin cursor de enlace
   ni desplazamiento al pasar el mouse, para que no invite a hacer clic. */
.agenda-item--estatico{cursor:default;}
.agenda-item--estatico:hover{background:none; padding-left:0;}
.agenda-item--estatico.next:hover{padding-left:8px;}

/* =============================================================
   REPRODUCTOR — remates de la animacion
   ============================================================= */
/* Al reanudar el panel desde el icono, el contenido entra escalonado:
   primero la caja, despues los controles. Da sensacion de que el panel
   se "arma" en vez de aparecer entero de golpe. */
.floating-player.minimized:hover .fp-inner > *,
.floating-player.minimized:focus-within .fp-inner > *,
.floating-player.minimized.fp-touch-open .fp-inner > *{
  animation:fpEntra .34s cubic-bezier(.2,.8,.2,1) backwards;
}
.floating-player.minimized:hover .fp-inner > *:nth-child(2),
.floating-player.minimized:focus-within .fp-inner > *:nth-child(2),
.floating-player.minimized.fp-touch-open .fp-inner > *:nth-child(2){animation-delay:.05s;}
.floating-player.minimized:hover .fp-inner > *:nth-child(3),
.floating-player.minimized:focus-within .fp-inner > *:nth-child(3),
.floating-player.minimized.fp-touch-open .fp-inner > *:nth-child(3){animation-delay:.09s;}
.floating-player.minimized:hover .fp-inner > *:nth-child(4),
.floating-player.minimized:focus-within .fp-inner > *:nth-child(4),
.floating-player.minimized.fp-touch-open .fp-inner > *:nth-child(4){animation-delay:.13s;}
@keyframes fpEntra{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:none;}
}

/* El giro del vinilo (fpDiscoSpin, junto a .fp-peek) ya es la señal de
   "sonando ahora" — reemplaza al latido de sombra que tenia antes. */

/* Antes de que alguien le de play, el icono esta completamente quieto —
   nada avisa que hay musica ahi salvo el globo de descubrimiento, que
   aparece una sola vez. Este latido corre mientras nadie ha tocado el
   player, para que la presencia se note sin sonido ni ser invasivo. Se
   apaga solo con la regla global de prefers-reduced-motion de mas abajo. */
@keyframes fpAliento{
  0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 0 rgba(255,75,31,.4);}
  50%    {box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 8px rgba(255,75,31,0);}
}
.floating-player.minimized:not(.fp-playing) .fp-peek{animation:fpAliento 3.2s ease-in-out infinite;}

/* Zona de tolerancia alrededor del icono: evita que el panel se cierre de
   golpe si el mouse se sale un pixel al moverse hacia el. */
.floating-player.minimized::before{
  content:""; position:absolute; right:-10px; bottom:-10px;
  width:68px; height:68px; pointer-events:auto;
}

@media (prefers-reduced-motion: reduce){
  .floating-player,
  .fp-inner,
  .fp-peek{transition-duration:.001ms !important;}
  .floating-player.minimized.fp-playing .fp-peek{animation:none;}
  .floating-player.minimized:hover .fp-inner > *,
  .floating-player.minimized:focus-within .fp-inner > *,
  .floating-player.minimized.fp-touch-open .fp-inner > *{animation:none;}
}

/* =============================================================
   MANIFIESTO — el cartel de la marca
   Bloque a todo el ancho con marco de esquinas, como un afiche
   pegado en la pared. Es el respiro entre las notas y la senal.
   ============================================================= */
.manifiesto{padding:14px 0 4px;}
.manifiesto-marco{
  position:relative; text-align:center;
  padding:56px 24px 50px;
  border:1px solid var(--line);
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(255,75,31,.09), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 16px);
}
/* Marcas de recorte en las cuatro esquinas */
.manifiesto-marco::before, .manifiesto-marco::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
  border:2px solid var(--signal);
}
.manifiesto-marco::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.manifiesto-marco::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}

/* Pulso sutil: el fondo respira y las esquinas laten, como un kick lento —
   el texto nunca se mueve, solo el ambiente alrededor. */
@media (prefers-reduced-motion:no-preference){
  .manifiesto-marco.pulso{animation:manifiestoRespira 2.6s ease-in-out infinite;}
  .manifiesto-marco.pulso::before, .manifiesto-marco.pulso::after{
    animation:manifiestoLatido 2.6s ease-in-out infinite;
  }
  .manifiesto-marco.pulso::after{animation-delay:.05s;}
}
@keyframes manifiestoRespira{
  0%, 100%{
    background:
      radial-gradient(ellipse 80% 120% at 50% 0%, rgba(255,75,31,.09), transparent 62%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 16px);
  }
  50%{
    background:
      radial-gradient(ellipse 90% 130% at 50% 0%, rgba(255,75,31,.16), transparent 66%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 16px);
  }
}
@keyframes manifiestoLatido{
  0%, 100%{box-shadow:0 0 0 rgba(255,75,31,0);}
  50%{box-shadow:0 0 14px 1px rgba(255,75,31,.65);}
}
.manifiesto-tag{
  display:block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--signal); margin-bottom:22px;
}
.manifiesto-frase{
  font-weight:300; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(30px,6.2vw,68px); line-height:1.04;
  color:var(--paper); margin-bottom:18px;
}
.manifiesto-frase b{font-weight:800;}
.manifiesto-bajada{
  font-size:14px; line-height:1.65; color:var(--concrete);
  max-width:44ch; margin:0 auto 24px;
}
.manifiesto-hash{
  display:inline-block; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--acid);
  border:1px solid rgba(212,255,63,.35); padding:8px 16px;
}
@media (max-width:640px){
  .manifiesto-marco{padding:40px 16px 36px;}
  .manifiesto-tag{margin-bottom:16px;}
}

/* =============================================================
   FICHAS DE LOS CANALES (/senal/)
   ============================================================= */
.senal-intro{padding:38px 0 26px; max-width:60ch;}
.senal-intro .titular{font-size:clamp(30px,4.4vw,52px); margin-bottom:12px;}
.senal-intro .bajada{font-size:14.5px;}
/* El titular pasa a ser dinamico: dice lo que esta sonando de verdad en
   vez de una frase fija ("Dos canales, una escena") que se lee una vez y
   se vuelve invisible. Antes de que alguien le de play, cae a un estado
   neutro — no hay forma de saber si "esta al aire" sin que el usuario
   interactue primero (son pistas on-demand, no una transmision real). */
.senal-intro--disco{display:flex; align-items:center; gap:24px;}
.senal-intro-copy{flex:1; min-width:0;}
.senal-disco{
  width:76px; height:76px; border-radius:50%; flex-shrink:0; position:relative;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 3px, transparent 3px 6px),
    radial-gradient(circle, #1e1e20 0%, #0a0a0b 75%);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.senal-disco::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
/* Misma logica que .fp-peek-img: la img se recorta a si misma a circulo,
   sin arte se queda invisible y se ve la textura de vinilo de siempre. */
.senal-disco-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:50%; opacity:0;
  transition:opacity .3s ease;
}
.senal-disco-img.has-art{opacity:1;}
.senal-disco-label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  width:28px; height:28px; border-radius:50%; background:var(--acid);
  display:flex; align-items:center; justify-content:center; transition:background .3s;
}
.senal-disco-label svg{width:12px; height:12px; color:#0a0a0b;}
.senal-disco.live{animation:senalDiscoSpin 3.4s linear infinite;}
@keyframes senalDiscoSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.senal-disco.live{animation:none;}}
@media (max-width:560px){
  .senal-intro--disco{gap:16px;}
  .senal-disco{width:56px; height:56px;}
  .senal-disco-label{width:22px; height:22px;}
  .senal-disco-label svg{width:9px; height:9px;}
}
.senal-onair{
  display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--concrete); margin-bottom:16px;
}
.senal-onair i{width:7px; height:7px; border-radius:50%; background:var(--line-strong); flex-shrink:0;}
.senal-onair.live{color:var(--acid);}
.senal-onair.live i{background:var(--acid); box-shadow:0 0 8px var(--acid); animation:senalPulse 1.4s ease-in-out infinite;}
@keyframes senalPulse{50%{opacity:.35;}}
@media (prefers-reduced-motion:reduce){.senal-onair.live i{animation:none;}}
.archivo-flip-txt{display:inline-block;}

/* =============================================================
   RITMO VERTICAL
   -------------------------------------------------------------
   Un editorial se lee tranquilo cuando el aire entre bloques es
   predecible. Antes cada seccion traia su propio padding suelto
   (28, 30, 34, 38, 44...), y esa irregularidad se percibe como
   desorden aunque no se sepa nombrar. Una sola escala.
   ============================================================= */
:root{
  --aire-xs:14px;
  --aire-s:22px;
  --aire-m:38px;
  --aire-l:64px;
  --aire-xl:88px;
}

/* Separacion entre secciones mayores de la portada */
.franja{padding:var(--aire-l) 0 var(--aire-s);}
.archivo-bloque{padding:var(--aire-l) 0 var(--aire-l);}
.manifiesto{padding:var(--aire-m) 0 var(--aire-s);}
.senal-tira{padding:var(--aire-l) 0;}
.contacto-breve{padding:var(--aire-l) 0 var(--aire-m);}
.sobre-grid{padding-bottom:var(--aire-s);}
.pagina-head{padding:var(--aire-l) 0 var(--aire-m);}
.senal-intro{padding:var(--aire-l) 0 var(--aire-m);}
.legal-page{padding:var(--aire-l) 0 var(--aire-xl);}
.pie, .foot-secundario{margin-top:var(--aire-l);}

@media (max-width:640px){
  :root{
    --aire-m:28px;
    --aire-l:42px;
    --aire-xl:56px;
  }
}

/* =============================================================
   MENOS BORDES, MAS AIRE
   Las lineas de 1px sumadas (retícula de notas + bordes de
   seccion + divisores) generaban una malla que satura. Se
   conservan las que separan contenido real y se suavizan las
   decorativas.
   ============================================================= */
.nota-grid{border-left:none;}
.nota-card{border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.nota-grid > .nota-card:last-child{border-right:none;}
@media (min-width:1181px){
  .nota-grid > .nota-card:nth-child(4n){border-right:none;}
}
@media (max-width:1180px) and (min-width:681px){
  .nota-grid > .nota-card:nth-child(2n){border-right:none;}
}
@media (max-width:680px){
  .nota-card{border-right:none;}
}

/* =============================================================
   TIPOGRAFIA — menos tamanos, mas contraste entre ellos
   ============================================================= */
/* La bajada de las tarjetas se limita a tres lineas: parejas las
   alturas, la grilla deja de verse dentada. */
.nota-card .bajada{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.nota-grid--destacadas .bajada{-webkit-line-clamp:2;}

/* Volanta mas tenue: es contexto, no titular */
.volanta{color:rgba(255,255,255,.58); letter-spacing:.11em;}
.lead .volanta{color:rgba(255,255,255,.7);}

/* =============================================================
   AJUSTES DE REPOSO EN BLOQUES PUNTUALES
   ============================================================= */

/* Manifiesto: sin trama diagonal ni halo naranja. Solo el marco y el
   mensaje. Cuando el bloque compite con su propio fondo, el mensaje
   pierde: aca el texto es lo unico que importa. */
.manifiesto-marco{
  background:rgba(255,255,255,.018);
  padding:var(--aire-l) 24px;
}
.manifiesto-frase{font-size:clamp(28px,5.4vw,58px); margin-bottom:16px;}
.manifiesto-bajada{margin-bottom:var(--aire-s);}

/* Quienes somos: la regla vertical de acento y el degradado sumaban
   sin aportar. Se deja la retícula de los pilares, que si informa. */
.sobre-lead::before{display:none;}
.sobre-lead{padding-right:0;}
.pilar{padding:var(--aire-s) 20px;}

/* Archivo: el bloque tenia dos halos de color de fondo. Se quita uno y
   se baja el otro: el carnet ya es claro sobre oscuro, contrasta solo. */
.archivo-bloque{
  background:radial-gradient(ellipse 70% 100% at 12% 0%, rgba(255,75,31,.045), transparent 60%);
}

/* Senal: el borde inferior sumaba una linea de mas junto al bloque
   siguiente, que ya trae la suya. */
.senal-tira{border-bottom:none;}

/* Tarjetas: el halo de color en hover era un guino extra sobre un
   movimiento que ya se nota. Se deja solo la elevacion. */
@media (hover:hover){
  .nota-card:hover{
    transform:none;
    box-shadow:none;
    background:rgba(255,255,255,.028);
  }
  .archivo-card:hover .archivo-inner{box-shadow:0 22px 40px rgba(0,0,0,.5);}
}

/* Reducir el contraste de la reticula del pie */
.foot-grid{padding-bottom:var(--aire-m);}

/* =============================================================
   BLOQUE "SIGUE LEYENDO" — sin el fondo blanco
   -------------------------------------------------------------
   Venia del diseno anterior, donde esa seccion era clara a
   proposito. En el sistema actual un bloque blanco a pagina
   completa corta la lectura de golpe y castiga la vista despues
   de todo el recorrido en oscuro. Se pasa al mismo fondo del
   sitio, separado por una regla, que es como lo resuelve un
   medio: cambio de bloque, no cambio de mundo.
   ============================================================= */
.article-related{
  background:none; color:var(--paper);
  padding:var(--aire-l) 0;
  border-top:1px solid var(--line-strong);
}
.article-related .wrap{max-width:1100px;}
.article-related .tag,
.article-related .volanta{color:var(--signal);}
.article-related .related-heading{color:var(--paper); margin-bottom:var(--aire-s);}

/* Las tarjetas relacionadas pasan a oscuras, como el resto */
.related-card{
  background:var(--panel); border:1px solid var(--line);
  transition:background .2s ease, border-color .2s ease;
}
.related-card:hover{background:rgba(255,255,255,.045); border-color:var(--line-strong);}
.related-card .rc-body{padding:16px 18px 20px;}
.related-card .rc-body .rc-cat{color:var(--signal);}
.related-card .rc-body h4{color:var(--paper);}
.related-card .rc-body p{color:var(--concrete);}
.related-photo{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 14px),
    #141416;
}

/* La variante inclinada de la tarjeta de radio se sentia como un error de
   maquetacion mas que como un guino. Se endereza. */
/* =============================================================
   SUSCRIPCION EN MOVIL — mas compacta
   -------------------------------------------------------------
   En pantallas chicas el campo quedaba en columna, a ancho
   completo y con 13px de relleno: un bloque enorme para pedir un
   correo. Se vuelve a poner en linea con el boton, con el alto
   justo. El texto se mantiene en 16px porque bajo ese tamano el
   iPhone hace zoom solo al escribir, y eso descuadra la pagina.
   ============================================================= */
@media (max-width:640px){
  .foot-news-row{flex-direction:row; flex-wrap:nowrap; gap:6px; margin-top:10px;}
  .foot-news-row input[type="email"]{
    flex:1 1 auto; min-width:0;
    padding:10px 11px; font-size:16px;
  }
  .foot-news-btn{
    width:auto; flex:0 0 auto;
    padding:10px 13px; font-size:9.5px; letter-spacing:.08em;
  }
  .foot-news-consent{font-size:11px; margin-top:9px; gap:7px;}
  .foot-news-msg{font-size:11px;}
}
/* Muy angosto (320px): el boton pasa debajo, pero compacto */
@media (max-width:380px){
  .foot-news-row{flex-wrap:wrap;}
  .foot-news-row input[type="email"]{flex:1 1 100%;}
  .foot-news-btn{width:100%; padding:11px 13px;}
}

/* =============================================================
   FOTO DEL CARNET — arreglo del desborde
   -------------------------------------------------------------
   eleventy-img devuelve <picture><img></picture>. Se estaba
   posicionando en absoluto solo el <img>, pero el <picture>
   quedaba en el flujo como elemento flex y crecia con el alto
   natural de la imagen: en movil la foto se comia la tarjeta y
   los datos quedaban cortados. Hay que posicionar el envoltorio.
   ============================================================= */
.archivo-photo-wrap > picture,
.archivo-photo-wrap > img{
  position:absolute; inset:0; width:100%; height:100%;
}
.archivo-photo-wrap > picture img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  display:block;
}

/* Mismo caso en la portada de las notas y en la ficha de perfil */
.foto > picture{position:absolute; inset:0; width:100%; height:100%;}
.foto > picture img{width:100%; height:100%; object-fit:cover; display:block;}
.perfil-detail-photo-wrap > picture{position:absolute; inset:0; width:100%; height:100%;}
.perfil-detail-photo-wrap > picture img{width:100%; height:100%; object-fit:cover; display:block;}

/* =============================================================
   CANALES DE SEÑAL — ficha y reproductor en una sola tarjeta
   -------------------------------------------------------------
   Antes eran cuatro cajas para dos canales: una con la info y
   otra con los controles. Repetian nombre y descripcion, y el
   ojo tenia que emparejarlas. Ahora cada canal es una unidad.
   ============================================================= */
.canales{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:980px){ .canales{grid-template-columns:1fr; max-width:620px;} }

.canal{
  border:1px solid var(--line-strong); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), transparent 42%);
  padding:24px 22px 22px;
  display:flex; flex-direction:column; gap:18px;
  transition:border-color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease,
    flex-basis .4s cubic-bezier(.2,.8,.2,1), padding .3s ease, gap .3s ease;
  /* Como .canales es un grid, esta tarjeta es un item de grid: sin
     min-width:0 su ancho minimo es "auto" (el max-content del contenido
     interno), y ese minimo le ganaba al ancho real del contenedor en
     mobile — la tarjeta entera (y el scrubber/casillas de la señal
     adentro) se desbordaba fuera de la pantalla. */
  min-width:0;
}
.canal:hover{border-color:rgba(255,255,255,.4); transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.35);}
body.tm-sonando .canal:has(.sc-btn-play[aria-pressed="true"]){border-color:var(--acid);}

/* Con algo sonando, el canal activo se expande (mas espacio, la pista que
   suena se lee mas grande) y el que no suena se reduce a un resumen —
   logo, nombre, su propio boton (que ya funciona como "cambiar aca", no
   hace falta un control nuevo). Se apoya solo en clases que ya existen
   (body.tm-sonando + aria-pressed del boton de play), nada de JS nuevo.
   Ocultar por completo el canal inactivo se descarto a proposito: pierde
   la puerta de entrada a Seleccion Techmotion para quien recien llega
   escuchando la radio. */
body.tm-sonando .canales{display:flex; align-items:flex-start; flex-wrap:wrap; gap:20px; grid-template-columns:none;}
body.tm-sonando .canal:has(.sc-btn-play[aria-pressed="true"]){flex:1 1 420px;}
body.tm-sonando .canal:has(.sc-btn-play[aria-pressed="true"]) .canal-desc{font-size:14.5px;}
body.tm-sonando .canal:has(.sc-btn-play[aria-pressed="true"]) .canal-play-txt small{
  font-size:12.5px; color:var(--paper); opacity:.9;
}

body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])){
  flex:0 0 230px; padding:16px 18px;
}
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-desc,
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-byline,
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-datos,
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-nota,
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-tags,
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-estado,
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-play-txt small{
  display:none;
}
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-head{grid-template-columns:auto 1fr; gap:12px;}
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-logo{width:44px; height:44px; padding:6px;}
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-id h2{font-size:14px; margin-bottom:0;}
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-num{margin-bottom:3px;}
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-play{padding:8px 16px 8px 8px;}
/* El ecualizador (.sc-wave) son 40 barras de ancho fijo — en el boton
   ancho no molesta, pero en la version resumida (mucho mas angosta) no
   se achicaba con el resto: se quedaba del mismo tamano y empujaba el
   texto. Se deja encoger y se recorta lo que no entra, en vez de forzar
   el ancho del boton. */
body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])) .canal-play .sc-wave{
  flex:0 1 auto; min-width:0; max-width:34px; overflow:hidden;
}
@media (max-width:640px){
  body.tm-sonando .canal:not(:has(.sc-btn-play[aria-pressed="true"])){flex-basis:100%;}
}
.canal-logo img{transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.canal:hover .canal-logo img{transform:scale(1.08);}
/* Invita a tocar play antes de que el mouse llegue al boton, igual que
   el carnet de Archivo invita a voltearse. */
.canal:hover .canal-play{border-color:var(--signal); background:rgba(255,75,31,.06);}

.canal-head{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:start;}
.canal-logo{
  width:66px; height:66px; flex-shrink:0; border-radius:50%; overflow:hidden;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  padding:9px; display:flex; align-items:center; justify-content:center;
}
.canal-logo img{width:100%; height:100%; object-fit:contain;}
.canal-id{min-width:0;}
.canal-num{
  display:block; font-family:var(--mono); font-size:9px;
  letter-spacing:.17em; text-transform:uppercase; color:var(--signal); margin-bottom:6px;
}
.canal-id h2{
  font-size:19px; font-weight:800; text-transform:uppercase;
  letter-spacing:-.015em; line-height:1.1; margin-bottom:9px;
}
.canal-tags{display:flex; flex-wrap:wrap; gap:5px;}
.canal-tags span{
  font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:3px 9px; color:var(--concrete);
}
.canal-estado{flex-shrink:0; white-space:nowrap;}
@media (max-width:520px){
  .canal-head{grid-template-columns:auto 1fr;}
  .canal-estado{grid-column:1 / -1;}
}

.canal-desc{font-size:13.5px; line-height:1.7; color:var(--concrete);}
.canal-desc b{color:var(--paper); font-weight:600;}
.canal-byline{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--concrete);
  margin:10px 0 0; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.canal-byline b{color:var(--signal); font-weight:700;}

.canal-datos{
  display:grid; grid-template-columns:auto 1fr; gap:8px 16px;
  padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.canal-datos dt{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--concrete); padding-top:2px;
}
.canal-datos dd{font-size:12.5px; line-height:1.55;}
.canal-datos dd a{color:var(--acid); border-bottom:1px solid var(--acid);}

.canal-nota{font-family:var(--mono); font-size:9.5px; color:var(--concrete); line-height:1.6;}

/* Postulaciones: seccion propia entre las dos tarjetas de canal, no un
   texto chico adentro de una — asi no compite por atencion con el boton
   de play (que ahora dice "Escucha X", mas protagonico que antes). */
.postula-dj{
  margin-top:2px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border:1px solid var(--line-strong); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,75,31,.07), transparent 65%);
  padding:28px 26px;
}
.postula-dj-copy{max-width:520px;}
.postula-dj-copy .volanta{color:var(--signal);}
.postula-dj-copy h2{
  font-weight:800; text-transform:none; letter-spacing:-.01em;
  font-size:clamp(18px,2.4vw,22px); margin:6px 0 8px; line-height:1.2;
}
.postula-dj-copy h2 b{color:var(--signal); font-weight:800;}
.postula-dj-copy p{font-size:13px; line-height:1.6; color:var(--concrete); margin:0;}
.postula-dj-action{flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:7px;}
.postula-dj-cta{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bg); background:var(--signal); padding:15px 24px; white-space:nowrap;
  transition:background .2s ease;
}
.postula-dj-cta:hover{background:var(--paper);}
.postula-dj-hint{font-family:var(--mono); font-size:9.5px; color:var(--concrete);}
@media (max-width:640px){
  .postula-dj{flex-direction:column; align-items:flex-start; padding:22px 18px;}
  .postula-dj-action{width:100%; align-items:center;}
  .postula-dj-cta{width:100%; justify-content:center;}
}

/* Un solo boton de play por canal: antes cada tarjeta repetia scrubber,
   skip y volumen que ya existen en el reproductor flotante apenas se toca
   play. Reusa .sc-btn-play (asi player.js sigue enganchando el click,
   el icono y el texto "Reproducir/Pausar" sin tocar el JS) pero con su
   propio layout: fila ancha con circulo, texto y ecualizador chico. */
.canal-play{
  margin-top:auto; width:100%; display:flex; align-items:center; gap:14px;
  background:none; border:1px solid var(--line-strong); border-radius:999px; color:var(--paper);
  padding:10px 20px 10px 10px; text-align:left; font-family:inherit;
  transition:border-color .2s ease, background .2s ease, opacity .2s ease;
}
.canal-play:hover{border-color:var(--signal); background:rgba(255,75,31,.06); opacity:1;}
.canal-play-ico{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:var(--signal); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.canal-play-ico svg{width:14px; height:14px;}
.canal-play-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.canal-play-txt strong{font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em;}
.canal-play-txt small{
  display:block; font-family:var(--mono); font-size:9.5px; color:var(--concrete);
  text-transform:none; letter-spacing:normal;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.canal-play .sc-wave{flex-shrink:0; height:14px;}
.canal-play .sc-wave i{width:2px;}

body.tm-sonando .canal:has(.sc-btn-play[aria-pressed="true"]) .canal-play{
  border-color:var(--acid); background:rgba(212,255,63,.06);
}
body.tm-sonando .canal:has(.sc-btn-play[aria-pressed="true"]) .canal-play-ico{background:var(--acid);}
body.tm-sonando .canal:has(.sc-btn-play[aria-pressed="true"]) .canal-play-ico svg{fill:var(--bg);}
body.tm-sonando .canal:has(.sc-btn-play[aria-pressed="true"]) .canal-play-txt small{color:var(--paper);}

.canal-hint{
  font-family:var(--mono); font-size:9.5px; color:var(--concrete);
  text-align:center; margin-top:20px;
}
.canal-hint b{color:var(--paper);}

/* =============================================================
   CONTACTO — datos rapidos
   Una sola linea mono, los cuatro al mismo peso — nada compite con
   el titular de arriba (esa ya es la declaracion fuerte de la
   pagina) ni entre si (antes el correo se llevaba todo el
   protagonismo con letra grande, mientras Instagram/telefono/donde
   quedaban como datos de segunda).
   ============================================================= */
.contacto-datos-mini{
  display:flex; flex-wrap:wrap; gap:9px 28px;
  font-family:var(--mono); font-size:11.5px; color:var(--concrete);
  padding-bottom:var(--aire-m); margin-bottom:var(--aire-m);
  border-bottom:1px solid var(--line);
}
.contacto-datos-mini b{
  color:var(--signal); font-weight:700; font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; margin-right:7px;
}
.contacto-datos-mini a{color:var(--paper); text-decoration:none;}
.contacto-datos-mini a:hover{color:var(--acid);}




@media (max-width:640px){
  
}

/* Campos en pares: el formulario deja de ser una columna larga */
.contact-form{max-width:none;}
.contact-form form{max-width:840px;}

/* =============================================================
   FLUIDEZ
   -------------------------------------------------------------
   Detalles de movimiento que hacen que el sitio se sienta vivo
   al recorrerlo, sin caer en animacion decorativa. Todo se apaga
   con prefers-reduced-motion.
   ============================================================= */
@media (prefers-reduced-motion: no-preference){

  /* Entrada escalonada de las grillas: las tarjetas no aparecen
     todas de golpe, entran en cascada corta al hacer scroll. */
  .nota-grid .nota-card,
  .archivo-riel .archivo-card,
  .canales .canal,
  .contacto-franja .dato,
  .sobre-pilares .pilar{
    opacity:0; transform:translateY(14px);
    animation:entraBloque .55s cubic-bezier(.2,.8,.2,1) forwards;
    animation-timeline:view();
    animation-range:entry 0% cover 22%;
  }
  @supports not (animation-timeline: view()){
    /* Navegadores sin scroll-driven animations: se muestran sin animar,
       nunca invisibles. */
    .nota-grid .nota-card,
    .archivo-riel .archivo-card,
    .canales .canal,
    .contacto-franja .dato,
    .sobre-pilares .pilar{opacity:1; transform:none; animation:none;}
  }
  @keyframes entraBloque{
    to{opacity:1; transform:none;}
  }

  /* Titulares grandes: entran con un desplazamiento minimo, lo justo
     para que se note que la pagina responde. */
  .lead .titular, .pagina-head .titular, .manifiesto-frase{
    animation:entraTitular .7s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes entraTitular{
    from{opacity:0; transform:translateY(12px);}
    to{opacity:1; transform:none;}
  }

  /* La barra superior se compacta al bajar, para dar mas pantalla
     al contenido sin perder la navegacion. */
  .topbar{transition:box-shadow .3s ease, background .3s ease;}

  /* Enlaces del pie y de secciones: subrayado que crece */
  .foot-links a, .franja a{position:relative;}
  .foot-links a::after, .franja a::after{
    content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .foot-links a:hover::after, .franja a:hover::after{transform:scaleX(1);}

  /* Botones solidos: leve hundimiento al presionar, da respuesta tactil */
  .btn, .sc-btn-play, .foot-news-btn, .col-foot, .archivo-flip-btn{
    transition:transform .12s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
  }
  .btn:active, .sc-btn-play:active, .foot-news-btn:active,
  .col-foot:active, .archivo-flip-btn:active{transform:translateY(1px);}

  /* Scroll suave tambien dentro de los rieles */
  .archivo-riel, .agenda-carousel{scroll-behavior:smooth;}
}

/* Barra de progreso de lectura en las notas: se dibuja sola con el scroll */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    body[data-page="nota"]::after{
      content:""; position:fixed; top:0; left:0; height:2px; width:100%;
      background:linear-gradient(90deg, var(--signal), var(--acid));
      transform-origin:left; transform:scaleX(0);
      z-index:calc(var(--z-topbar) + 5); pointer-events:none;
      animation:leyendo linear both;
      animation-timeline:scroll(root);
    }
    @keyframes leyendo{ to{transform:scaleX(1);} }
  }
}

/* =============================================================
   ARREGLOS DE LA ÚLTIMA REVISIÓN
   ============================================================= */

/* 1) El atributo hidden dejaba de funcionar.
   La regla global img{display:block} le gana a la del navegador para
   [hidden], asi que cualquier imagen marcada como oculta se mostraba a
   tamano natural — por eso la portada del disco salia gigante. */
[hidden]{display:none !important;}

/* 2) El sello de la marca se montaba sobre el titular.
   Al principio esto solo pasaba en tarjetas sin foto (el texto empieza
   arriba y choca con el logo), pero con fotos reales + titulares largos
   el bloque de texto tambien puede crecer hasta tocar el logo aunque haya
   foto de fondo. Se reserva el espacio con padding siempre, con o sin
   foto, en vez de moverlo. */
.foto{padding-top:0;}
.nota-card .foto,
.lead .foto{padding-top:76px;}
@media (max-width:680px){
  .nota-card .foto,
  .lead .foto{padding-top:68px;}
}

/* Guía de tipos de contacto (el bloque de tres columnas de /contacto/) */



/* =============================================================
   CONTACTO — dos columnas con peso parejo
   ============================================================= */
.contacto-form-wrap{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:48px; align-items:start;
}
@media (max-width:900px){ .contacto-form-wrap{grid-template-columns:1fr; gap:var(--aire-m);} }

.contacto-guia .titular{font-size:clamp(26px,3.4vw,38px); margin-bottom:12px;}
.contacto-guia .bajada{font-size:13.5px; margin-bottom:var(--aire-m);}

.contacto-tipos{list-style:none; counter-reset:tipo; margin:0; padding:0;}
.contacto-tipos .tipo{
  counter-increment:tipo; position:relative;
  padding:16px 0 16px 42px;
  border-top:1px solid var(--line);
}
.contacto-tipos .tipo:last-child{border-bottom:1px solid var(--line);}
.contacto-tipos .tipo::before{
  content:"0" counter(tipo);
  position:absolute; left:0; top:17px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  color:var(--concrete); opacity:.7;
}
.contacto-tipos h3{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--signal); margin-bottom:7px;
}
.contacto-tipos p{font-size:12.5px; line-height:1.65; color:var(--concrete); margin:0;}