/* Ficha · comparativa (single-comparativa.php). Marco Figma 23:4234 (1440) y 23:4530 (390).
   La tabla usa .pag-tabla de plantillas.css (tarjetas por fila por debajo de 900). */

/* ---------- «De un vistazo», a la derecha de la cabecera ---------- */
.ficha-vista {
	align-self: center; padding: var(--sp-24); border: 1px solid var(--arg-border); border-radius: var(--radius-lg);
	background: var(--arg-surface-card); box-shadow: var(--shadow-pop);
}
.ficha-vista__titulo { color: var(--arg-link); }
.ficha-vista__lista { margin: var(--sp-16) 0 0; }
.ficha-vista__fila { padding-block: var(--sp-16); border-top: 1px solid var(--arg-border); }
.ficha-vista__criterio { font-weight: 600; font-size: var(--fs-16); line-height: 1.3; }
.ficha-vista__nuestra, .ficha-vista__otra { margin: var(--sp-8) 0 0; font-size: var(--fs-16); line-height: 1.45; }
.ficha-vista__nuestra {
	display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-8); align-items: start;
	padding: var(--sp-8) var(--sp-12); border-radius: var(--radius-md); background: var(--arg-lime-tint); color: var(--arg-ink); font-weight: 600;
}
.ficha-vista__nuestra .ficha-vista__quien { grid-column: 1 / -1; }
.ficha-vista__icono { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--arg-lime); }
.ficha-vista__icono svg { width: 12px; height: 12px; }
.ficha-vista__otra { padding-inline: var(--sp-12); color: var(--arg-text-weak); }
.ficha-vista__quien { display: block; font-family: var(--arg-font-mono); font-size: var(--fs-12); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--arg-text-weak); }
.ficha-vista__pie { margin-top: var(--sp-8); }
.ficha-vista__pie a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--arg-link); font-weight: 600; }
@media (min-width: 1024px) { .ficha-vista { padding: var(--sp-32); } }
/* Por debajo de 1024 la vista queda encima de la tabla con las mismas filas: es un derivado de la
   tabla (no un medio), así que no sale y la tabla llega antes. */
@media (max-width: 1023px) { .ficha-vista { display: none; } }

/* ---------- Tabla: la columna propia más ancha y con la letra de 18 de la cabecera (Figma) ---------- */
@media (min-width: 900px) {
	.ficha-tabla__tabla thead .pag-tabla__nuestra { font-size: var(--fs-18); }
	.ficha-tabla__tabla th[scope="row"] { width: 21%; }
}

/* ---------- Fecha de revisión y fuentes ---------- */
.ficha-fuentes { margin-top: var(--sp-24); max-width: var(--measure); color: var(--arg-text-weak); font-size: var(--fs-16); line-height: 1.5; }
.ficha-fuentes__titulo { margin-top: var(--sp-16); color: var(--arg-text); }
.ficha-fuentes__lista { margin: var(--sp-8) 0 0; padding-left: var(--sp-24); }
.ficha-fuentes__lista li + li { margin-top: var(--sp-4); }
.ficha-fuentes a { color: var(--arg-link); overflow-wrap: anywhere; }

/* ---------- Cuándo encaja cada opción: dos tarjetas a la par ---------- */
.ficha-encaja__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.ficha-encaja__tarjeta {
	display: flex; flex-direction: column; min-width: 0; padding: var(--sp-24);
	border: 1px solid var(--arg-border); border-radius: var(--radius-lg); background: var(--arg-surface);
}
.ficha-encaja__tarjeta--nuestra { background: var(--arg-lime-tint); border-color: var(--arg-leaf); }
.ficha-encaja__tarjeta h2 { font-size: var(--fs-28); line-height: var(--lh-sub); letter-spacing: var(--ls-heading); text-wrap: balance; }
.ficha-encaja__texto { margin-top: var(--sp-16); font-size: var(--fs-18); line-height: 1.55; }
.ficha-encaja__puntos { list-style: none; padding: 0; margin: var(--sp-24) 0 0; display: grid; gap: var(--sp-12); }
.ficha-encaja__puntos 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-encaja__check { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--arg-lime); color: var(--arg-ink); }
.ficha-encaja__check svg { width: 12px; height: 12px; }
@media (min-width: 900px) {
	.ficha-encaja__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32); }
	.ficha-encaja__tarjeta { padding: var(--sp-48); }
	.ficha-encaja__tarjeta h2 { font-size: var(--fs-35); }
}
/* Sin tabla de plantilla (formato por títulos), la fecha y las fuentes van tras la prosa, con su medida. */
.ficha-prosa .ficha-fuentes { max-width: var(--measure); margin: var(--sp-48) auto 0; }

/* ---------- Ola 3 · «De un vistazo»: las filas entran una a una al cargar ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ficha-vista__fila { animation: ficha-aparece .5s ease-out both; animation-delay: calc(.3s + var(--i, 0) * .15s); }
}

/* ---------- Ola 3 · «Hear a real call» (#escucha): texto y foto a la izquierda, la llamada a la derecha ---------- */
.ficha-escucha { scroll-margin-top: var(--sp-64); }
.ficha-escucha__rejilla { display: grid; gap: var(--sp-48); }
.ficha-escucha__etiqueta { color: var(--arg-on-dark-accent); }
.ficha-escucha__titulo { margin-top: var(--sp-8); text-wrap: balance; }
.ficha-escucha__intro { margin-top: var(--sp-16); max-width: var(--measure); font-size: var(--fs-18); line-height: 1.55; color: var(--arg-on-dark-weak); }
.ficha-escucha__puntos { display: grid; gap: var(--sp-12); max-width: var(--measure); margin: var(--sp-24) 0 0; padding: 0; list-style: none; }
.ficha-escucha__puntos li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-12); font-size: var(--fs-18); line-height: 1.5; }
.ficha-escucha__check { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--arg-lime); color: var(--arg-ink); }
.ficha-escucha__check svg { width: 14px; height: 14px; }
.ficha-foto--escucha { margin-top: var(--sp-32); }
/* En una columna la foto va entre el texto y la llamada: apaisada, para que la llamada no quede lejos. */
@media (max-width: 1023px) {
	.ficha-foto--escucha .ficha-foto__marco { aspect-ratio: 16 / 10; }
	.ficha-foto--escucha .ficha-foto__img { object-position: 50% 60%; }
}
.ficha-escucha__llamada { display: grid; gap: var(--sp-16); align-content: start; min-width: 0; }
@media (min-width: 600px) {
	.ficha-escucha .pag-llamada__datos div { grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 1024px) {
	.ficha-escucha__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-64); align-items: start; }
	.ficha-escucha__intro { font-size: var(--fs-20); line-height: 1.5; }
	.ficha-escucha__llamada { position: sticky; top: var(--sp-96); }
}