/* ==========================================================================
   LECTOR EN VOZ ALTA — barra de control + CTA final
   Vive SIEMPRE dentro del lienzo claro de lectura (`.pf-nota__hoja`), donde
   `tokens.css` ya remapea `--pf-k` a la variante AA sobre claro (`--pf-k-os`)
   y las tintas a las `--pf-tinta-cl*`.

   🔴 NADA DE INVERTIR TINTAS. No se usa `--pf-sobre-k` sobre el acento: ese
   par se calcula contra el acento CRUDO (brillante), no contra el oscurecido
   que rige aquí, así que un botón relleno podría quedar bajo AA con el sitio en
   tema oscuro. Todo va en estilo CONTORNO: texto y borde en `--pf-k`, que es
   AA sobre claro POR CONSTRUCCIÓN. Es la misma prudencia que ya costó el texto
   blanco sobre blanco del portal.

   🔴 Anima sólo transform/opacity y respeta prefers-reduced-motion.
   ========================================================================== */

.pf-sr{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* La banda del ESPECIAL a sangre: como su lienzo ocupa todo el ancho, los
   mandos necesitan su propio contenedor con la medida y el margen del sistema.
   Va sobre `--pf-muro` (chrome del tema), nunca dentro del lienzo del especial:
   ese diseño no se toca, y ahí `--pf-k` no está remapeado a la variante AA. */
.pf-lector-banda{
	max-width:var(--pf-maxw);margin:0 auto;padding:1.4rem var(--pf-gutter);
}
.pf-lector-banda .pf-lector{ margin-bottom:0; }
.pf-lector-banda .pf-lecta{ margin:0; }

/* ==========================================================================
   1 · BARRA DE CONTROL (arriba del cuerpo)
   ========================================================================== */
.pf-lector{
	display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
	margin:0 0 1.9rem;padding:.6rem .75rem;
	border:1px solid var(--pf-linea-f);
	background:color-mix(in srgb, var(--pf-k) 4%, transparent);
}

.pf-lector__play{
	display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
	background:none;color:var(--pf-k);border:1px solid var(--pf-k);
	padding:.55rem 1rem;
	font-family:var(--pf-mono);font-size:.72rem;font-weight:600;
	letter-spacing:.09em;text-transform:uppercase;
	transition:transform .2s var(--pf-ease),background-color .2s var(--pf-ease);
}
.pf-lector__play:hover,
.pf-lector__play:focus-visible{
	transform:translateY(-1px);
	background-color:color-mix(in srgb, var(--pf-k) 12%, transparent);
	outline:none;
}
.pf-lector__play:focus-visible{ outline:var(--pf-focus);outline-offset:2px; }

/* triángulo de reproducir → dos barras de pausa */
.pf-lector__ic{
	width:0;height:0;flex:0 0 auto;
	border-style:solid;border-width:6px 0 6px 10px;
	border-color:transparent transparent transparent var(--pf-k);
}
.pf-lector.es-leyendo .pf-lector__ic{
	width:10px;height:12px;border:0;
	background:linear-gradient(90deg,
		var(--pf-k) 0 3px, transparent 3px 7px, var(--pf-k) 7px 10px);
}

.pf-lector__stop{
	width:33px;height:33px;flex:0 0 auto;cursor:pointer;
	background:none;border:1px solid var(--pf-linea-f);color:var(--pf-tinta-2);
	font-size:.62rem;line-height:1;
	transition:color .2s,border-color .2s;
}
.pf-lector__stop:hover{ color:var(--pf-k);border-color:var(--pf-k); }

.pf-lector__vel{
	display:inline-flex;align-items:center;gap:.4rem;
	font-family:var(--pf-mono);font-size:.64rem;color:var(--pf-tinta-3);
	letter-spacing:.08em;text-transform:uppercase;
}
/* 🔴 `transparent` + `inherit`, NO un par de tokens fijo. Este control vive en
   DOS contextos: el lienzo claro de lectura y la banda oscura del especial. Con
   `--pf-lectura` (blanco fijo) + `--pf-tinta` quedaba tinta hueso sobre blanco
   —invisible— en la banda. Heredando, el par siempre casa con su fondo. */
.pf-lector__vel select{
	font-family:var(--pf-mono);font-size:.7rem;
	background:transparent;color:inherit;
	border:1px solid var(--pf-linea-f);padding:.22rem .3rem;
}
.pf-lector__estado{
	margin-left:auto;font-family:var(--pf-mono);font-size:.64rem;
	letter-spacing:.07em;color:var(--pf-k);
}

/* el bloque que suena ahora mismo */
.pf-nota__cuerpo .pf-lec-activo,
.pf-ntapa__t.pf-lec-activo,
.pf-nota__titulo.pf-lec-activo{
	background:color-mix(in srgb, var(--pf-k) 10%, transparent);
	box-shadow:-4px 0 0 0 var(--pf-k);
}

/* ==========================================================================
   2 · CTA FINAL — «Escucha acá el audio de este artículo»
   ========================================================================== */
.pf-lecta{ margin:2.6rem 0 .5rem; }

.pf-lecta__btn{
	position:relative;width:100%;cursor:pointer;overflow:hidden;
	display:flex;align-items:center;gap:1.1rem;text-align:left;
	padding:1.15rem 1.3rem;
	background:none;border:1px solid var(--pf-k);
	transition:transform .25s var(--pf-ease),box-shadow .25s var(--pf-ease),
	           background-color .25s var(--pf-ease);
}
.pf-lecta__btn:hover,
.pf-lecta__btn:focus-visible{
	transform:translateY(-2px);
	background-color:color-mix(in srgb, var(--pf-k) 7%, transparent);
	box-shadow:0 8px 24px color-mix(in srgb, var(--pf-k) 22%, transparent);
	outline:none;
}
.pf-lecta__btn:focus-visible{ outline:var(--pf-focus);outline-offset:3px; }

/* el disco con el triángulo */
.pf-lecta__disco{
	flex:0 0 auto;width:54px;height:54px;border-radius:50%;
	border:2px solid var(--pf-k);
	display:flex;align-items:center;justify-content:center;
	transition:transform .25s var(--pf-ease);
}
.pf-lecta__btn:hover .pf-lecta__disco{ transform:scale(1.06); }
.pf-lecta__tri{
	width:0;height:0;margin-left:4px;
	border-style:solid;border-width:9px 0 9px 15px;
	border-color:transparent transparent transparent var(--pf-k);
}
.pf-lecta.es-leyendo .pf-lecta__tri{
	width:14px;height:16px;margin-left:0;border:0;
	background:linear-gradient(90deg,
		var(--pf-k) 0 5px, transparent 5px 9px, var(--pf-k) 9px 14px);
}

.pf-lecta__c{ display:flex;flex-direction:column;gap:.3rem;min-width:0; }
.pf-lecta__t{
	font-family:var(--pf-cond);font-weight:700;
	font-size:clamp(1.05rem,2.4vw,1.4rem);line-height:1.15;
	color:var(--pf-tinta);text-transform:uppercase;letter-spacing:-.01em;
}
.pf-lecta__s{
	font-family:var(--pf-mono);font-size:.66rem;letter-spacing:.06em;
	color:var(--pf-tinta-3);text-transform:uppercase;
}

/* ecualizador: quieto en reposo, baila mientras lee */
.pf-lecta__eq{ margin-left:auto;display:flex;align-items:flex-end;gap:3px;height:26px;flex:0 0 auto; }
.pf-lecta__eq i{ width:3px;height:7px;background:var(--pf-k);opacity:.45;transform-origin:bottom; }
.pf-lecta.es-leyendo .pf-lecta__eq i{ opacity:1;animation:pf-lecta-eq .9s ease-in-out infinite; }
.pf-lecta.es-leyendo .pf-lecta__eq i:nth-child(2){ animation-delay:.15s }
.pf-lecta.es-leyendo .pf-lecta__eq i:nth-child(3){ animation-delay:.3s }
.pf-lecta.es-leyendo .pf-lecta__eq i:nth-child(4){ animation-delay:.45s }
.pf-lecta.es-leyendo .pf-lecta__eq i:nth-child(5){ animation-delay:.6s }
@keyframes pf-lecta-eq{ 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(3.2)} }

@media (max-width:520px){
	.pf-lecta__eq{ display:none; }
	.pf-lecta__btn{ gap:.9rem;padding:1rem; }
	.pf-lecta__disco{ width:46px;height:46px; }
}

@media (prefers-reduced-motion:reduce){
	.pf-lector__play,.pf-lecta__btn,.pf-lecta__disco{ transition:none; }
	.pf-lecta.es-leyendo .pf-lecta__eq i{ animation:none;transform:scaleY(1.8); }
}