/* Ficha · protocolo (single-protocolo.php). Marco Figma 24:4433 (1440) y 24:4745 (390).
   La llamada de la cabecera es componentes/llamada.php (estilos en plantillas.css). */

/* ---------- El guion, paso a paso (Figma «Protocol step», 16:1629) ---------- */
.ficha-pasos__lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
.ficha-paso { position: relative; display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0; padding-top: var(--sp-24); }
.ficha-paso::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--arg-ink); transform-origin: left; }
.ficha-paso__numero { color: var(--arg-text-weak); font-family: var(--arg-font-mono); font-size: var(--fs-14); letter-spacing: 0; text-transform: none; }
.ficha-paso__titulo { font-size: var(--fs-28); line-height: var(--lh-sub); text-wrap: balance; }
.ficha-paso__texto { color: var(--arg-text-weak); font-size: var(--fs-18); line-height: 1.55; }
.ficha-paso__frase {
	margin-top: auto; padding: var(--sp-8) var(--sp-12); border: 1px solid var(--arg-border); border-radius: var(--radius-sm);
	background: var(--arg-surface-card); font-family: var(--arg-font-mono); font-size: var(--fs-14); line-height: 1.55; color: var(--arg-text);
}
/* Rejilla sin huecos con 4, 5 o 6 pasos (y cualquier otro número): de 700 a 1099, dos columnas y,
   si son impares, el último a lo ancho; desde 1100, tres columnas sobre una rejilla de 6 (cada paso
   ocupa 2): con 5 u 8, los dos últimos ocupan 3 cada uno (3 + 2); con 4, dos por fila (2 × 2); con
   7, el último a lo ancho. */
.ficha-paso__texto > * + * { margin-top: var(--sp-8); }
@media (min-width: 700px) and (max-width: 1099px) {
	.ficha-pasos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ficha-paso:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
	.ficha-pasos__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ficha-paso { grid-column: span 2; }
	.ficha-paso:nth-last-child(2):nth-child(3n + 1), .ficha-paso:last-child:nth-child(3n + 2) { grid-column: span 3; }
	.ficha-paso:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	.ficha-pasos__lista:has(> .ficha-paso:last-child:nth-child(4)) > .ficha-paso { grid-column: span 3; }
}
@media (min-width: 700px) {
	/* Títulos a la misma altura en cada fila, como el marco (Title box min 64). */
	.ficha-paso__titulo { min-height: calc(2 * var(--lh-sub) * 1em); }
}
/* Movimiento: la línea de cada paso se dibuja y la frase entra, de uno en uno (servicio.js pone
   .pag-anima--js y luego .pag-anima--on). Sin JS o con «reducir movimiento», estado final. */
@media (prefers-reduced-motion: no-preference) {
	.ficha-pasos__lista.pag-anima--js .ficha-paso::before { transform: scaleX(0); transition: transform .6s ease calc(var(--i, 0) * .25s); }
	.ficha-pasos__lista.pag-anima--js .ficha-paso__numero { transition: color .3s ease calc(var(--i, 0) * .25s + .3s); }
	.ficha-pasos__lista.pag-anima--js .ficha-paso__frase { opacity: 0; transform: translateY(6px); transition: opacity .4s ease calc(var(--i, 0) * .25s + .4s), transform .4s ease calc(var(--i, 0) * .25s + .4s); }
	.ficha-pasos__lista.pag-anima--on .ficha-paso::before { transform: none; }
	.ficha-pasos__lista.pag-anima--on .ficha-paso__numero { color: var(--arg-link); }
	.ficha-pasos__lista.pag-anima--on .ficha-paso__frase { opacity: 1; transform: none; }
}

/* ---------- Qué cuenta como urgente: tabla de dos columnas; en móvil, una tarjeta por fila ---------- */
.ficha-urgencias__tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-16); line-height: 1.5; }
.ficha-urgencias__tabla th, .ficha-urgencias__tabla td { text-align: left; vertical-align: top; }
@media (max-width: 899px) {
	.ficha-urgencias__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ficha-urgencias__tabla, .ficha-urgencias__tabla tbody, .ficha-urgencias__tabla tr, .ficha-urgencias__tabla th, .ficha-urgencias__tabla td { display: block; }
	.ficha-urgencias__tabla tr { margin-bottom: var(--sp-12); border: 1px solid var(--arg-border); border-radius: var(--radius-md); background: var(--arg-white); overflow: hidden; }
	.ficha-urgencias__tabla th[scope="row"] { padding: var(--sp-12) var(--sp-16); font-weight: 600; font-size: var(--fs-18); line-height: 1.4; }
	.ficha-urgencias__tabla td { padding: 0 var(--sp-16) var(--sp-12); color: var(--arg-text-weak); font-size: var(--fs-18); }
}
@media (min-width: 900px) {
	.ficha-urgencias__tabla { border: 1px solid var(--arg-border); border-radius: var(--radius-md); overflow: hidden; background: var(--arg-white); }
	.ficha-urgencias__tabla thead th {
		padding: var(--sp-16) var(--sp-24); background: var(--arg-neutral-100);
		font-family: var(--arg-font-mono); font-weight: 500; font-size: var(--fs-14); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--arg-text-weak);
	}
	.ficha-urgencias__tabla tbody th, .ficha-urgencias__tabla tbody td { width: 50%; padding: var(--sp-16) var(--sp-24); border-top: 1px solid var(--arg-border); }
	.ficha-urgencias__tabla tbody th { font-weight: 600; }
	.ficha-urgencias__tabla tbody td { color: var(--arg-text-weak); }
}

/* ---------- Prosa y «lo que nunca dirá» a la par ---------- */
.ficha-nunca__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); align-items: start; }
.ficha-nunca__tarjeta { min-width: 0; padding: var(--sp-32) var(--sp-24); border-radius: var(--radius-lg); background: var(--arg-surface-dark); color: var(--arg-on-dark); }
.ficha-nunca__titulo { font-size: var(--fs-28); line-height: var(--lh-sub); letter-spacing: var(--ls-heading); color: var(--arg-on-dark); text-wrap: balance; }
.ficha-nunca__lista { list-style: none; padding: 0; margin: var(--sp-24) 0 0; display: grid; gap: var(--sp-16); }
.ficha-nunca__lista li, .ficha-decide__lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-12); align-items: start; font-size: var(--fs-18); line-height: 1.55; }
.ficha-nunca__lista-icono { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--arg-on-dark-accent); color: var(--arg-on-dark-accent); }
.ficha-nunca__lista-icono svg, .ficha-decide__lista-icono svg { width: 12px; height: 12px; }
.ficha-nunca__intro, .ficha-nunca__pie { margin-top: var(--sp-16); color: var(--arg-on-dark-weak); font-size: var(--fs-16); line-height: 1.5; }
.ficha-nunca__tarjeta strong { color: var(--arg-on-dark); }

/* «Lo que decides tú», a la par de lo que nunca dice */
.ficha-decide { min-width: 0; padding: var(--sp-32) var(--sp-24); border-radius: var(--radius-lg); border: 1px solid var(--arg-leaf); background: var(--arg-lime-tint); }
.ficha-decide__titulo { font-size: var(--fs-28); line-height: var(--lh-sub); letter-spacing: var(--ls-heading); text-wrap: balance; }
.ficha-decide__lista { list-style: none; padding: 0; margin: var(--sp-24) 0 0; display: grid; gap: var(--sp-16); }
.ficha-decide__lista-icono { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--arg-lime); color: var(--arg-ink); }
.ficha-decide__intro, .ficha-decide__pie { margin-top: var(--sp-16); font-size: var(--fs-16); line-height: 1.5; color: var(--arg-text-weak); }
.ficha-decide strong { font-weight: 600; }

/* Aviso fijo (988/911): antes del H1 y repetido antes del cierre */
.ficha-aviso { max-width: var(--measure); margin-bottom: var(--sp-24); align-items: start; font-size: var(--fs-16); line-height: 1.5; }
.ficha-aviso a { color: var(--arg-link); }
.ficha-aviso-cierre { padding-block: var(--sp-32); }
.ficha-aviso-cierre .ficha-aviso { margin: 0 auto; }
.ficha-urgencias__pie { margin-top: var(--sp-24); max-width: var(--measure); color: var(--arg-text-weak); font-size: var(--fs-18); line-height: 1.55; }
/* Sola (sin prosa): centrada a 720, como el marco. */
.ficha-nunca:not(.ficha-nunca--par) .ficha-nunca__rejilla { max-width: 720px; }
/* A la par desde 900 (no 1024): entre 900 y 1023 cada tarjeta a todo el ancho dejaba su mitad
   derecha vacía (ola 2, medido a 1000; regla fija de huecos a la derecha). */
@media (min-width: 900px) {
	.ficha-nunca--par .ficha-nunca__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-32); align-items: start; }
	.ficha-nunca--par .ficha-nunca__rejilla > .ficha-prosa__cuerpo { align-self: start; }
}
@media (min-width: 1024px) {
	.ficha-nunca__tarjeta, .ficha-decide { padding: var(--sp-48); }
	.ficha-decide__titulo { font-size: var(--fs-35); }
	.ficha-nunca__titulo { font-size: var(--fs-35); }
}

/* Resumen de la llamada en el hero: etiqueta y valor siempre a la par (la etiqueta mide lo que mide),
   también con valores largos («DONE», «ALSO SAID»). */
@media (min-width: 600px) {
	.ficha-llamada .pag-llamada__datos div { grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; }
}
/* Lo que el .md pone tras la llamada (traducción…): plegado bajo la tarjeta. */
.ficha-llamada { display: grid; gap: var(--sp-16); align-content: start; min-width: 0; }
.ficha-llamada__mas { padding: var(--sp-16) var(--sp-24); border: 1px solid var(--arg-border); border-radius: var(--radius-md); background: var(--arg-surface-card); font-size: var(--fs-16); line-height: 1.5; color: var(--arg-text-weak); }
.ficha-llamada__mas summary { display: flex; align-items: center; min-height: var(--target); cursor: pointer; font-weight: 600; color: var(--arg-link); }
.ficha-llamada__mas summary:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; }
.ficha-llamada__mas > * + * { margin-top: var(--sp-8); }

/* Ola 3 · sin «What you decide», la prosa del cuerpo va a la par de la tarjeta oscura y lleva la foto de la escena debajo. */
.ficha-nunca__prosa { align-self: start; min-width: 0; }
.ficha-foto--pareja { max-width: 560px; margin-top: var(--sp-32); }