/* oir-claro.css — EL REPRODUCTOR EN PIEL CLARA.
   Hermano de pieza.css (oscuro) para los moldes editoriales de la casa: papel, tinta y ácido.
   Conduce el mismo pieza.js, así que los identificadores son los mismos y no hay dos lógicas.
   El bloque que suena se marca con .suena — un filete ácido a la izquierda y el papel un punto
   más cálido: se ve cuál se está contando sin que la página dé un salto. */

.oir{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--linea,#E5E6DC);border-left:5px solid var(--acido,#AAFF00);
  border-radius:0 16px 16px 0;padding:16px 20px;margin-block:clamp(18px,3.5vw,26px);
}
.oir .play{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:var(--tinta,#0A0A0A);color:var(--acido,#AAFF00);display:grid;place-items:center;
  transition:transform .2s cubic-bezier(.22,.9,.26,1);
}
.oir .play:hover{transform:scale(1.06)}
.oir .play svg{width:24px;height:24px;fill:currentColor;display:block}
.oir-txt{flex:1 1 200px;min-width:0}
.oir-txt b{display:block;font-size:15.5px;letter-spacing:-.01em;color:var(--tinta,#0A0A0A)}
.oir-txt span{display:block;font-size:13px;color:var(--gris,#57574F);margin-top:2px;font-variant-numeric:tabular-nums}
.oir .vel{
  flex:0 0 auto;border:1px solid var(--borde,#D8DACB);background:#fff;color:var(--tinta,#0A0A0A);
  border-radius:999px;padding:7px 15px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;
  font-variant-numeric:tabular-nums;
}
.oir .vel:hover{border-color:var(--tinta,#0A0A0A)}
.oir .barra{
  flex:1 1 100%;height:8px;border-radius:99px;background:var(--crema,#F4F6EC);
  border:1px solid var(--linea,#E5E6DC);cursor:pointer;overflow:hidden;
}
.oir .barra i{display:block;height:100%;width:0;background:var(--acido,#AAFF00);border-radius:99px}

/* el bloque que se está contando ahora mismo */
[data-cue]{transition:background .5s ease,box-shadow .5s ease}
[data-cue].suena{
  background:var(--crema,#F4F6EC);
  box-shadow:inset 4px 0 0 0 var(--acido,#AAFF00);
}

@media (prefers-reduced-motion:reduce){
  .oir .play,[data-cue]{transition:none}
}

/* ── 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(--acido,#AAFF00);color:var(--tinta,#0A0A0A);
  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(--acido,#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} }