/* pieza.css — la piel común de las piezas locutadas del blog. Extraída de la primera pieza para
   que las siguientes no la repitan: tres copias del mismo CSS es justo lo que criticamos del resto. */
:root{--fondo:#060607;--fondo2:#0C0C0F;--texto:#F4F4F2;--suave:#9A9A93;--acento:#AAFF00;
  --borde:rgba(244,244,242,.10);--borde2:rgba(244,244,242,.07)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--fondo);color:var(--texto);line-height:1.65;-webkit-font-smoothing:antialiased;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;padding:0 22px 90px}
.wrap{max-width:820px;margin:0 auto}
a{color:var(--acento)}
.salta{position:absolute;left:-9999px;top:0;z-index:100;background:var(--acento);color:#0A0A05;
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:800;font-size:14px;text-decoration:none}
.salta:focus{left:0}

/* ── cabecera ── */
.cab{padding:30px 0 6px;display:flex;align-items:center;gap:10px}
.cx{position:relative;width:18px;height:18px;flex:0 0 auto}
.cx::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:23%;height:100%;background:var(--acento);border-radius:2px}
.cx::after{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);height:23%;width:100%;background:var(--acento);border-radius:2px}
.cab a{color:var(--texto);text-decoration:none;font-weight:800;letter-spacing:-.02em;font-size:17px}
.etq{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
h1{font-size:clamp(30px,5.4vw,50px);letter-spacing:-.03em;line-height:1.05;margin:14px 0 16px}
h1 em{font-style:normal;color:var(--acento);display:block}
.entradilla{font-size:clamp(16px,2vw,18.5px);color:#C9C9C3;max-width:64ch}

/* ── el reproductor: sobrio, y NUNCA arranca solo ── */
.oir{margin:30px 0 6px;border:1px solid rgba(170,255,0,.32);border-radius:16px;padding:16px 18px;
  background:linear-gradient(130deg,rgba(170,255,0,.06),transparent 62%);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.play{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;background:var(--acento);
  color:#0A0A05;cursor:pointer;display:grid;place-items:center;transition:transform .2s}
.play:hover{transform:scale(1.06)}
.play:focus-visible{outline:2px solid var(--texto);outline-offset:3px}
.play svg{width:20px;height:20px;fill:currentColor}
.oir-txt{flex:1 1 200px;min-width:0}
.oir-txt b{display:block;font-size:15px}
.oir-txt span{display:block;color:var(--suave);font-size:13px;margin-top:2px}
.barra{flex:1 1 100%;height:5px;border-radius:99px;background:var(--borde);overflow:hidden;cursor:pointer}
.barra:focus-visible{outline:2px solid var(--acento);outline-offset:4px}
.barra i{display:block;height:100%;width:0;background:var(--acento);border-radius:99px;transition:width .18s linear}
.vel{flex:0 0 auto;border:1px solid var(--borde);background:none;color:var(--suave);border-radius:99px;
  padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;min-height:24px}
.vel:hover{color:var(--texto);border-color:var(--acento)}

/* ── la línea de tiempo ── */
.linea{position:relative;margin:44px 0 10px;padding-left:34px}
.linea::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--borde),var(--acento) 55%,var(--borde));opacity:.5}
.hito{position:relative;padding:0 0 34px}
.hito::before{content:"";position:absolute;left:-31px;top:7px;width:14px;height:14px;border-radius:50%;
  background:var(--fondo);border:2px solid var(--suave);transition:border-color .3s,box-shadow .3s,transform .3s}
.hito.suena::before{border-color:var(--acento);box-shadow:0 0 0 6px rgba(170,255,0,.18)}
.hito.ahora::before{background:var(--acento);border-color:var(--acento);transform:scale(1.2)}
.fecha{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.hito.suena .fecha{color:var(--acento)}
.hito h2{font-size:clamp(18px,2.6vw,23px);letter-spacing:-.015em;margin:5px 0 8px;line-height:1.25}
.hito p{color:var(--suave);font-size:15px;max-width:62ch}
.sello{display:inline-block;margin-left:10px;padding:3px 12px;border-radius:99px;font-size:13px;
  font-weight:800;letter-spacing:.06em;background:var(--acento);color:#0A0A05;vertical-align:middle}
.sello.gris{background:none;border:1px dashed var(--borde);color:var(--suave)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.on{opacity:1;transform:none}

/* ── bloques ── */
.caja{border:1px solid var(--borde);border-radius:18px;padding:26px 28px;margin-top:26px;background:var(--fondo2);
  transition:border-color .3s,box-shadow .3s}
.caja.viva{border-color:rgba(170,255,0,.32);background:linear-gradient(130deg,rgba(170,255,0,.06),transparent 62%)}
.caja.suena{border-color:var(--acento);box-shadow:0 0 0 4px rgba(170,255,0,.12)}
.caja h2{font-size:clamp(19px,2.6vw,24px);letter-spacing:-.02em;margin-bottom:12px}
.caja p{color:var(--suave);font-size:15px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.t{border:1px solid var(--borde2);border-radius:14px;padding:18px;background:rgba(6,6,7,.55)}
.t b{display:block;color:var(--acento);font-size:14px;margin-bottom:6px}
.t p{font-size:14px;color:var(--suave)}
.fuentes{margin-top:34px;padding-top:20px;border-top:1px solid var(--borde)}
.fuentes h2{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--acento);margin-bottom:12px}
.fuentes li{list-style:none;font-size:14px;color:var(--suave);margin-bottom:9px;line-height:1.55}
.cta{display:inline-flex;align-items:center;margin-top:20px;padding:14px 28px;border-radius:99px;
  background:var(--acento);color:#0A0A05;font-weight:800;font-size:15px;text-decoration:none;transition:transform .18s}
.cta:hover{transform:translateY(-2px)}
.pie{margin-top:46px;padding-top:22px;border-top:1px solid var(--borde);color:var(--suave);font-size:13px}
@media(max-width:720px){.tres{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  .play,.cta,.hito::before,.barra i,.caja{transition:none}}

/* ── LA REJILLA DE CIEN ─────────────────────────────────────────────────────────────────
   Un porcentaje no se siente; cien cuadrados sí. Cinco encendidos frente a noventa y cinco
   apagados dicen de un vistazo lo que un gráfico de barras esconde. */
.cien{display:grid;grid-template-columns:repeat(20,1fr);gap:5px;margin-top:18px}
.cien i{aspect-ratio:1;border-radius:3px;background:rgba(244,244,242,.09);
  animation:entra .5s ease-out backwards}
.cien i.on{background:var(--acento);box-shadow:0 0 12px rgba(170,255,0,.55)}
@keyframes entra{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.leyenda{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--suave)}
.leyenda span{display:inline-flex;align-items:center;gap:8px}
.pt{width:11px;height:11px;border-radius:3px;background:rgba(244,244,242,.14);flex:0 0 auto}
.pt.on{background:var(--acento)}
@media(max-width:560px){.cien{grid-template-columns:repeat(10,1fr)}}

/* ── BARRAS COMPARADAS ──────────────────────────────────────────────────────────────────
   Una cifra suelta no dice nada; al lado de su referencia, duele. Crecen al entrar en pantalla:
   el movimiento hace ver la diferencia antes de leerla. */
.barras{margin-top:18px;display:flex;flex-direction:column;gap:16px}
.fila{display:grid;grid-template-columns:1fr 2.1fr auto;gap:14px;align-items:center}
.fila .et{font-size:13.5px;color:var(--suave);line-height:1.35}
.fila b{font-size:16px;font-weight:800;color:var(--texto);min-width:64px;text-align:right}
.pista{height:12px;border-radius:99px;background:rgba(244,244,242,.07);overflow:hidden}
.pista i{display:block;height:100%;width:0;border-radius:99px;background:var(--acento);
  transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.pista i.alto{background:linear-gradient(90deg,#FF6B57,#FF9A57)}
.pista i.bajo{background:rgba(244,244,242,.34)}
.caja.on .pista i{width:var(--v)}
@media(max-width:620px){.fila{grid-template-columns:1fr auto;grid-template-areas:"et val" "bar bar"}
  .fila .et{grid-area:et}.fila b{grid-area:val}.pista{grid-area:bar}}
@media(prefers-reduced-motion:reduce){.cien i{animation:none}.pista i{transition:none;width:var(--v)}}
/* ── QUE SE VEA QUE ESTO SE ESCUCHA ──────────────────────────────────────────────────────
   Nadie espera que un artículo se pueda oír, así que hay que decirlo sin que parezca un
   anuncio: el botón respira hasta que lo tocas, y arriba una etiqueta con el tiempo. */
.oir{position:relative;padding-top:34px}
.oir::before{
  content:"ESTA PUBLICACIÓN SE PUEDE ESCUCHAR";
  position:absolute;left:20px;top:-11px;
  font-size:11px;font-weight:800;letter-spacing:.16em;
  background:var(--acento,#AAFF00);color:#0A0A05;
  padding:5px 12px;border-radius:99px;white-space:nowrap;
}
.oir .play{position:relative}
.oir .play::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--acento,#AAFF00);opacity:0;
  animation:oirLate 2.6s cubic-bezier(.22,.9,.26,1) infinite;
}
.oir.sonando .play::after{animation:none}
@keyframes oirLate{
  0%{transform:scale(.86);opacity:.9}
  70%{transform:scale(1.35);opacity:0}
  100%{opacity:0}
}
@media (max-width:560px){
  .oir::before{left:14px;font-size:10.5px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){ .oir .play::after{animation:none;opacity:.5} }