/* =========================================================================
   Psicofarmacología NbN · Página introductoria por grupo
   La nemotecnia es la pieza central: cada palabra grande, con su inicial
   resaltada, y debajo el fármaco enlazado a su ficha.
   ========================================================================= */

.psf-intro{
	--in-tinta:#191c1d;
	--in-papel:#f8f9fa;
	--in-linea:#dfe3e7;
	--in-muted:#5d6169;
	--in-acento:#5a6b8c;
	--in-acento-2:#8494b3;
	max-width:820px;margin:0 auto;color:var(--in-tinta);
	font-family:var(--pf-sans);
	line-height:1.65;
}
.psf-intro *{box-sizing:border-box;}

.psf-intro-lead{font-size:var(--pf-fs-body);color:var(--in-muted);margin:0 0 22px;padding:0 2px;}

/* Acentos por grupo */
.psf-intro-grupo[data-acento="isrs"]{--in-acento:#4d7ea8;--in-acento-2:#7ba7c9;}
.psf-intro-grupo[data-acento="d2"]{--in-acento:#c07a3a;--in-acento-2:#d6a06a;}
.psf-intro-grupo[data-acento="sga"]{--in-acento:#8c5a9e;--in-acento-2:#ad82bd;}
.psf-intro-grupo[data-acento="bzd"]{--in-acento:#5c7f52;--in-acento-2:#8cab82;}

.psf-intro-grupo{
	position:relative;margin:0 0 30px;padding:24px 24px 20px;
	border:1px solid var(--in-linea);border-radius:8px;
	background:linear-gradient(165deg,#fbfcfc,var(--in-papel));
	border-left:5px solid var(--in-acento);
}

.psf-intro-gen{
	display:inline-block;font-size:var(--pf-fs-micro);font-weight:800;text-transform:uppercase;
	letter-spacing:.08em;color:#fff;background:var(--in-acento);
	padding:3px 10px;border-radius:8px;margin-bottom:10px;
}
.psf-intro-titulo{margin:0 0 8px;font-size:var(--pf-fs-h3);line-height:1.2;}
.psf-intro-sub{margin:0 0 20px;font-size:var(--pf-fs-body);color:var(--in-muted);max-width:64ch;}

/* ---- La nemotecnia ---- */
.psf-mnemo{background:rgba(255,255,255,.55);border:1px dashed var(--in-linea);border-radius:8px;padding:18px 16px 14px;}
.psf-mnemo-frase{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
	gap:14px 10px;
}
.psf-mnemo-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;}
.psf-mnemo-palabra{font-size:var(--pf-fs-small);color:var(--in-tinta);font-weight:600;line-height:1.15;}
.psf-mnemo-ini{
	display:inline-block;font-size:var(--pf-fs-h2);font-weight:800;line-height:1;
	color:var(--pf-cls-tx,var(--in-acento));
	font-family:var(--pf-serif);
}
.psf-mnemo-farmaco{
	/* [D-19] el color de clase a 13 px daba 3,45-4,32:1. La variante -tx
	   del mismo color, que ya existe en el archivo de tokens, cumple. */
	font-size:var(--pf-fs-micro);font-weight:600;color:var(--pf-cls-tx,var(--in-acento));
	text-decoration:none;border-bottom:1.5px solid transparent;
	transition:border-color .12s,color .12s;
}
.psf-mnemo-farmaco:hover{border-bottom-color:var(--pf-cls-tx,var(--in-acento));color:var(--in-acento-2);}
.psf-mnemo-pendiente{color:var(--in-muted);cursor:default;}
/* [D-56] Cuando la palabra ya es el nombre del fármaco no hay segunda
   línea: la propia palabra enlaza. Conserva el peso y el tamaño de una
   palabra de nemotecnia —no encoge al tamaño del nombre— y toma el
   subrayado del enlace para que se vea que se puede tocar. El área
   táctil se hereda del item, que ya cumple los 24 px del §2.5.8. */
.psf-mnemo-palabra-enlace{
	display:inline-block;text-decoration:none;
	border-bottom:1.5px solid color-mix(in srgb, var(--pf-cls-tx,var(--in-acento)) 40%, transparent);
	transition:border-color .12s;
}
.psf-mnemo-palabra-enlace:hover{border-bottom-color:var(--pf-cls-tx,var(--in-acento));}
/* [D-53] El mecanismo debajo del nombre, cuando el grupo lo declara. La
   sigla en negrita y la explicación detrás, en el tamaño mínimo del sistema
   (§4.2) y con el gris de texto que sí pasa AA: --in-muted es el mismo que
   usa el pie, medido a 4,8:1 sobre el fondo de la caja. La celda se
   ensancha porque estas líneas son más largas que un nombre suelto. */
.psf-mnemo-mec{
	font-size:var(--pf-fs-micro);line-height:1.45;color:var(--in-muted);
	max-width:22ch;text-wrap:pretty;
}
.psf-mnemo-mec b{color:var(--in-tinta);font-weight:700;letter-spacing:.01em;}
.psf-mnemo-frase:has(.psf-mnemo-mec){grid-template-columns:repeat(auto-fit,minmax(168px,1fr));}
.psf-mnemo-pie{margin:16px 0 0;font-size:var(--pf-fs-micro);color:var(--in-muted);text-align:center;font-style:italic;}

/* La frase completa como texto corrido, arriba, para leerla de un tirón */
.psf-mnemo::before{
	content:attr(data-frase);
}

@media(max-width:560px){
	.psf-intro-grupo{padding:18px 16px;}
	.psf-mnemo-frase{grid-template-columns:repeat(2,1fr);}
	.psf-intro-titulo{font-size:var(--pf-fs-h3);}
}
@media(prefers-reduced-motion:reduce){
	.psf-mnemo-farmaco{transition:none;}
}

/* v5.43.0 — frase alternativa dentro del subtítulo de la nemotecnia */
/* [D-56] Sin opacidad: ver la nota gemela en psf-archivo.css. */
.psf-mnemo-alt{display:block;margin-top:6px;font-size:var(--pf-fs-micro);color:var(--in-muted,#5d6169);}

/* [D-20] §4.3: columna de lectura ≤680 px (65-75 caracteres por línea).
   Medido antes: 76 caracteres de mediana, con la mitad de los párrafos
   por encima del límite. Solo afecta a contenedores de prosa; tablas,
   rejillas y diagramas conservan su ancho, que ahí es funcional. */
.psf-mnemo-pie{max-width:var(--pf-w-read);}