/* Institucionales a medida (/integrations/, /security-privacy/, /call-recording-laws/ y el informe
   /report/state-of-ai-reception-2026/): piezas de template-parts/institucional/. Se carga después de
   plantillas.css (inc/institucionales.php). Solo variables de tokens.css. Movimiento: solo opacity y
   transform, nunca con «reducir movimiento». */

/* Alto de la cabecera fija del sitio (medido: 81 px en escritorio). */
.inst { --cabecera-alto: 81px; } /* institucional.js lo ajusta al alto real */

/* ---------- Sin viudas ---------- */
.inst :is(p, li, dd, dt, td, summary, blockquote, legend, label) { text-wrap: pretty; }
.inst :is(h1, h2, h3, th, .inst-cifra__dato) { text-wrap: balance; }

/* ---------- Cabecera ---------- */
.inst-cabecera__rejilla--sola .pag-cabecera__copia { max-width: 880px; }
.inst-cabecera__mas { font-size: var(--fs-18); line-height: 1.55; color: var(--arg-text-weak); }
.inst-cabecera__mas > * + * { margin-top: var(--sp-12); }
.inst-meta {
	display: inline-flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-24);
	padding: var(--sp-8) var(--sp-16); border-radius: var(--radius-pill);
	background: var(--arg-white); border: 1px solid var(--arg-border); font-size: var(--fs-16); line-height: 1.4;
}
.inst-meta__icono { display: inline-grid; color: var(--arg-leaf); }
.inst-meta__icono svg { width: 18px; height: 18px; }
.inst-meta strong { font-weight: 600; }
@media (min-width: 1024px) {
	.inst-cabecera__rejilla--pieza { align-items: center; }
}

/* ---------- Prosa centrada (Figma «Prose») ---------- */
.inst-prosa__cuerpo { margin-inline: auto; font-size: var(--fs-18); line-height: 1.55; }
.inst-prosa__cuerpo > h2 + * { margin-top: var(--sp-24); }
.inst-prosa__cuerpo a, .inst a:not(.boton):not(.inst-hub__enlace):not(.inst-camino__enlace):not(.inst-mapa__enlace) { color: var(--arg-link); }
.inst-prosa__cuerpo .pag-tabla { margin-block: var(--sp-24); }
@media (min-width: 960px) { .inst-prosa__cuerpo { font-size: var(--fs-20); line-height: 1.5; } }

/* ---------- Sección a lo ancho (tablas) ---------- */
.inst-ancha__cuerpo > * + * { margin-top: var(--sp-24); }
.inst-ancha__pie > * + *, .pag-pie > * + * { margin-top: var(--sp-12); }
.inst .pag-tabla a { overflow-wrap: anywhere; }

/* ---------- Banda oscura (icono + texto a lo ancho) ---------- */
.inst-oscura__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); align-items: start; }
.inst-oscura__icono { color: var(--arg-ink); }
.inst-oscura__copia h2 { margin-bottom: var(--sp-16); }
.inst-oscura__texto { font-size: var(--fs-20); line-height: 1.5; color: var(--arg-on-dark); }
.inst-oscura__texto > * + * { margin-top: var(--sp-16); }
@media (min-width: 960px) {
	/* Icono | título | texto: la mitad derecha la ocupa el texto (nunca un hueco). */
	.inst-oscura__rejilla { grid-template-columns: auto minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-48); }
	.inst-oscura__copia { display: contents; }
	.inst-oscura__copia h2 { margin-bottom: 0; }
}

/* ---------- Nota de aviso a lo ancho (lo que pasa si algo falla) ---------- */
.inst-nota {
	display: grid; grid-template-columns: var(--sp-48) minmax(0, 1fr); gap: var(--sp-16); align-items: start;
	margin-top: var(--sp-48); padding: var(--sp-24); border-radius: var(--radius-md);
	background: var(--arg-surface-card); border: 1px solid var(--arg-border); border-left: var(--sp-4) solid var(--arg-leaf);
}
.inst-nota__icono { display: grid; place-items: center; width: var(--sp-48); height: var(--sp-48); border-radius: var(--radius-md); background: var(--arg-lime-tint); }
.inst-nota__icono svg { width: 22px; height: 22px; }
.inst-nota__texto { font-size: var(--fs-18); line-height: 1.55; }
.inst-nota__texto > * + * { margin-top: var(--sp-12); }
@media (min-width: 960px) {
	.inst-nota { padding: var(--sp-32); }
	/* Pasos a la izquierda (de dos en dos) y la nota a la derecha. */
	.inst-pasos__cuerpo--con-nota { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr); column-gap: var(--sp-48); align-items: start; }
	/* Más específico que las reglas de 3/4 columnas de .pag-pasos__lista:has(…) en plantillas.css. */
	.inst-pasos .inst-pasos__cuerpo--con-nota .pag-pasos__lista.inst-pasos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-32); }
	.inst-pasos__cuerpo--con-nota .inst-nota { margin-top: 0; grid-template-columns: minmax(0, 1fr); position: sticky; top: var(--sp-96); }
}

/* ---------- Pasos: la línea de cada paso se enciende de uno en uno ---------- */
.inst-paso__frase { font-family: var(--arg-font-sans); font-weight: 400; font-size: var(--fs-18); line-height: 1.5; letter-spacing: 0; }
.inst-paso__frase strong { font-family: var(--arg-font-display); font-weight: 600; font-size: var(--fs-20); }
.inst-pasos .pag-paso { position: relative; }
@media (prefers-reduced-motion: no-preference) {
	.inst-pasos .pag-paso::before {
		content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%;
		background: var(--arg-lime); transform: scaleX(0); transform-origin: left;
		animation: inst-enciende 1.2s ease-out both; animation-delay: calc(var(--i, 0) * .25s + .3s);
		animation-timeline: view(); animation-range: entry 10% cover 35%;
	}
}
@keyframes inst-enciende { to { transform: scaleX(1); } }

/* ---------- Integrations: mapa de conexiones (cabecera) ---------- */
.inst-hub { margin: 0; padding: var(--sp-24); border-radius: var(--radius-lg); background: var(--arg-surface-dark); color: var(--arg-on-dark); }
.inst-hub__lienzo { position: relative; }
.inst-hub__lineas { display: none; }
.inst-hub__centro { display: grid; place-items: center; margin-bottom: var(--sp-16); }
.inst-hub__logo { display: block; width: 100%; max-width: 8.5rem; height: auto; }
.inst-hub__marca {
	display: inline-grid; place-items: center; padding: var(--sp-12) var(--sp-24); border-radius: var(--radius-pill);
	background: var(--arg-white); color: var(--arg-ink); font-family: var(--arg-font-display); font-weight: 700; font-size: var(--fs-20);
}
.inst-hub__nodos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.inst-hub__enlace {
	display: flex; align-items: center; gap: var(--sp-8); min-height: var(--target); height: 100%; padding: var(--sp-8) var(--sp-12);
	border-radius: var(--radius-md); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
	color: var(--arg-on-dark); text-decoration: none; font-size: var(--fs-14); line-height: 1.3; font-weight: 600;
	transition: background-color .2s ease, border-color .2s ease;
}
.inst-hub__enlace:hover { background: rgba(193, 245, 75, .14); border-color: var(--arg-lime); }
.inst-hub__enlace:focus-visible { outline: 3px solid var(--arg-lime); outline-offset: 2px; }
.inst-hub__icono { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--arg-lime); color: var(--arg-ink); }
.inst-hub__icono svg { width: 16px; height: 16px; }
@media (min-width: 1024px) {
	.inst-hub { padding: var(--sp-16); aspect-ratio: 1 / 1; display: grid; }
	.inst-hub__lienzo { height: 100%; }
	.inst-hub__lineas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
	.inst-hub__linea { stroke: var(--arg-lime); stroke-width: .35; stroke-dasharray: 1.2 1.2; opacity: .55; vector-effect: non-scaling-stroke; }
	.inst-hub__centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 1; }
	/* El logotipo (SVG de la marca, con una parte lima) sobre un círculo blanco con aro lima: cabe
	   siempre, sea cual sea el nombre (Fable I-4). */
	.inst-hub__marca { width: 11rem; aspect-ratio: 1; border-radius: 50%; padding: var(--sp-16); background: var(--arg-white); border: 3px solid var(--arg-lime); box-shadow: 0 0 0 10px rgba(193, 245, 75, .14), 0 0 0 22px rgba(193, 245, 75, .06); }
	.inst-hub__nodo .inst-hub__enlace { min-height: 6.5rem; }
	.inst-hub__nodos { display: block; position: absolute; inset: 0; }
	.inst-hub__nodo { position: absolute; left: var(--x); top: var(--y); width: 10.5rem; transform: translate(-50%, -50%); }
	.inst-hub__enlace { flex-direction: column; text-align: center; justify-content: center; background: var(--arg-ink); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.inst-hub__linea { animation: inst-flujo 2.4s linear infinite; animation-delay: calc(var(--i) * -.4s); }
	.inst-hub__marca { animation: inst-latido 3.2s ease-in-out infinite; }
}
@keyframes inst-flujo { to { stroke-dashoffset: -4.8; } }
@keyframes inst-latido { 50% { box-shadow: 0 0 0 14px rgba(193, 245, 75, .2), 0 0 0 30px rgba(193, 245, 75, .05); } }

/* Tarjetas de «What connects today» (destino de los nodos). */
.inst-conecta__datos { margin: var(--sp-16) 0 0; display: grid; gap: var(--sp-12); }
.inst-conecta__dato dt { color: var(--arg-link); margin-bottom: var(--sp-4); }
.inst-conecta__dato dd { margin: 0; color: var(--arg-text-weak); font-size: var(--fs-16); line-height: 1.5; }
.inst-conecta__dato--2 dd { color: var(--arg-ink); font-weight: 600; }
.inst-conecta__tarjeta:target, .inst-conecta__tarjeta:focus { outline: 3px solid var(--arg-lime); outline-offset: 2px; }
.inst-conecta__tarjeta { scroll-margin-top: var(--sp-96); }
@media (min-width: 960px) { .inst-conecta .pag-tarjeta { display: flex; grid-row: auto; } }

/* ---------- Llamada de ejemplo con su texto ---------- */
.inst-ejemplo__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); align-items: center; }
.inst-ejemplo__texto { font-size: var(--fs-18); line-height: 1.55; }
.inst-ejemplo__texto > * + * { margin-top: var(--sp-16); }
.inst-ejemplo__texto h2 + * { margin-top: var(--sp-24); }
@media (min-width: 960px) { .inst-ejemplo__rejilla { grid-template-columns: minmax(0, 560fr) minmax(0, 560fr); column-gap: var(--sp-64); } .inst-ejemplo__texto { font-size: var(--fs-20); line-height: 1.5; } }

/* ---------- Security: recorrido de la llamada (cabecera) ---------- */
.inst-camino { margin: 0; padding: var(--sp-24); border-radius: var(--radius-lg); background: var(--arg-surface-dark); color: var(--arg-on-dark); }
.inst-camino__titulo { color: var(--arg-on-dark-accent); margin-bottom: var(--sp-16); }
.inst-camino__lista { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--sp-8); }
.inst-camino__lista::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: rgba(255, 255, 255, .18); }
.inst-camino__enlace {
	position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-12); align-items: center;
	min-height: var(--target); color: var(--arg-on-dark); text-decoration: none; font-size: var(--fs-18); line-height: 1.35; font-weight: 600;
}
.inst-camino__enlace:hover .inst-camino__texto { text-decoration: underline; }
.inst-camino__enlace:focus-visible { outline: 3px solid var(--arg-lime); outline-offset: 2px; border-radius: var(--radius-sm); }
.inst-camino__numero {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--arg-ink);
	border: 2px solid var(--arg-lime); color: var(--arg-lime); font-family: var(--arg-font-mono); font-size: var(--fs-14);
}
/* Esquema animado (ola 3): una llamada baja por la línea en un ciclo de 9 s y cada paso se enciende al pasar
   (paso i a los i × 9/n s). Las barreras de abajo (lo que nunca entra, lo que nunca sale) tachan su cruz al
   final del ciclo. Con «reducir movimiento»: sin llamada ni pulsos, todo visible y quieto. */
.inst-camino__ruta { position: relative; }
.inst-camino__llamada {
	position: absolute; left: 6px; top: 6px; z-index: 2; display: none; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--arg-lime); color: var(--arg-ink); box-shadow: 0 0 0 6px rgba(193, 245, 75, .22); pointer-events: none;
}
.inst-camino__llamada svg { width: 16px; height: 16px; }
.inst-camino__barreras { list-style: none; margin: var(--sp-24) 0 0; padding: var(--sp-16) 0 0; display: grid; gap: var(--sp-12); border-top: 1px solid rgba(255, 255, 255, .18); }
.inst-camino__barrera { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-12); align-items: start; font-size: var(--fs-16); line-height: 1.45; color: var(--arg-on-dark); }
.inst-camino__barrera strong { color: var(--arg-on-dark-accent); font-weight: 600; }
.inst-camino__cruz { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--arg-signal); color: var(--arg-signal); }
.inst-camino__cruz svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
	.inst-camino__llamada { display: grid; animation: inst-llamada 9s linear infinite; }
	.inst-camino__numero { animation: inst-pulso 9s ease-in-out infinite; animation-delay: calc(var(--i) * 9s / var(--pasos, 6)); }
	.inst-camino__cruz { animation: inst-cruz 9s ease-in-out infinite; }
}
/* La llamada baja de la primera a la última cifra (top del primer círculo → top del último) y se desvanece al final. */
@keyframes inst-llamada {
	0% { top: 6px; opacity: 0; transform: scale(.6); }
	6% { opacity: 1; transform: scale(1); }
	86% { top: calc(100% - 34px); opacity: 1; transform: scale(1); }
	94%, 100% { top: calc(100% - 34px); opacity: 0; transform: scale(.6); }
}
@keyframes inst-pulso { 0%, 9%, 100% { background: var(--arg-ink); color: var(--arg-lime); } 4% { background: var(--arg-lime); color: var(--arg-ink); } }
@keyframes inst-cruz { 0%, 86%, 100% { transform: none; background: transparent; color: var(--arg-signal); } 91% { transform: scale(1.18); background: var(--arg-signal); color: var(--arg-ink); } }
@media (min-width: 1024px) { .inst-camino { padding: var(--sp-32); } .inst-camino__lista { gap: var(--sp-16); } }

/* ---------- Tarjetas de una lista (lo que nunca hacemos, la respuesta corta) ---------- */
.inst-tarjeta .pag-tarjeta__texto p { margin: 0; }
.inst-tarjeta[data-tono] { border-top: var(--sp-8) solid var(--inst-tono, var(--arg-border)); }
.inst-tarjeta[data-tono] .pag-icono { background: var(--inst-tono-suave, var(--arg-lime-tint)); }
@media (min-width: 960px) { .inst-tarjetas .pag-tarjeta { display: flex; grid-row: auto; } }

/* Colores por tipo de consentimiento (mapa, leyenda, chips, tabla y tarjetas). */
[data-tono="all-party"] { --inst-tono: var(--arg-ink); --inst-tono-suave: var(--arg-neutral-200); --inst-tono-texto: var(--arg-white); }
[data-tono="unsettled"] { --inst-tono: var(--arg-signal); --inst-tono-suave: color-mix(in srgb, var(--arg-signal) 22%, white); --inst-tono-texto: var(--arg-ink); }
[data-tono="one-party"] { --inst-tono: var(--arg-lime); --inst-tono-suave: var(--arg-lime-tint); --inst-tono-texto: var(--arg-ink); }

/* ---------- Texto + hoja de comprobación al lado ---------- */
.inst-lado__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); align-items: start; }
.inst-lado__texto { font-size: var(--fs-18); line-height: 1.55; }
.inst-lado__texto > * + * { margin-top: var(--sp-16); }
.inst-lado__texto h2 + * { margin-top: var(--sp-24); }
.inst-lado__hoja { list-style: none; margin: 0; padding: var(--sp-8) var(--sp-24); background: var(--arg-surface-card); border: 1px solid var(--arg-border); border-radius: var(--radius-md); }
.inst-lado__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-12); padding-block: var(--sp-16); font-size: var(--fs-18); line-height: 1.5; }
.inst-lado__item + .inst-lado__item { border-top: 1px dashed var(--arg-neutral-300); }
.inst-lado__item strong { font-weight: 600; }
.inst-lado__marca { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--arg-lime); color: var(--arg-ink); margin-top: 1px; }
.inst-lado__marca svg { width: 16px; height: 16px; }
.inst-lado__hoja--vacio { background: transparent; border-style: dashed; border-color: var(--arg-neutral-500); }
.inst-lado__hoja--vacio .inst-lado__marca { background: transparent; border: 2px dashed var(--arg-neutral-500); color: var(--arg-text-weak); }
@media (min-width: 960px) {
	.inst-lado__rejilla { grid-template-columns: minmax(0, 480fr) minmax(0, 704fr); column-gap: var(--sp-64); }
	.inst-lado__texto { font-size: var(--fs-20); line-height: 1.5; }
	.inst-lado__hoja { padding: var(--sp-16) var(--sp-32); }
}

/* ---------- Leyes: mapa de mosaico (cabecera) ---------- */
.inst-mapa { margin: 0; padding: var(--sp-16); border-radius: var(--radius-lg); background: var(--arg-white); border: 1px solid var(--arg-border); }
.inst-mapa__rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: 3px; }
.inst-mapa__casilla { aspect-ratio: 1; min-width: 0; }
.inst-mapa__enlace {
	display: grid; place-items: center; width: 100%; height: 100%; border-radius: var(--radius-sm);
	background: var(--inst-tono-suave); color: var(--arg-ink); text-decoration: none;
	font-family: var(--arg-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0;
	box-shadow: inset 0 -3px 0 var(--inst-tono); transition: transform .15s ease, background-color .15s ease;
}
.inst-mapa__casilla[data-tono="all-party"] .inst-mapa__enlace { background: var(--arg-ink); color: var(--arg-white); box-shadow: none; }
.inst-mapa__casilla[data-tono="unsettled"] .inst-mapa__enlace { background: repeating-linear-gradient(135deg, var(--arg-signal) 0 4px, color-mix(in srgb, var(--arg-signal) 45%, white) 4px 8px); box-shadow: none; }
.inst-mapa__enlace:hover { transform: scale(1.12); position: relative; z-index: 1; }
.inst-mapa__enlace:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 1px; position: relative; z-index: 2; }
.inst-mapa__pie { margin-top: var(--sp-16); }
.inst-mapa__leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); font-size: var(--fs-14); line-height: 1.4; }
.inst-mapa__clave { display: inline-flex; align-items: center; gap: var(--sp-8); }
.inst-mapa__muestra { width: 16px; height: 16px; border-radius: 4px; background: var(--inst-tono-suave); box-shadow: inset 0 -3px 0 var(--inst-tono); }
.inst-mapa__clave[data-tono="all-party"] .inst-mapa__muestra { background: var(--arg-ink); box-shadow: none; }
.inst-mapa__clave[data-tono="unsettled"] .inst-mapa__muestra { background: repeating-linear-gradient(135deg, var(--arg-signal) 0 3px, color-mix(in srgb, var(--arg-signal) 45%, white) 3px 6px); box-shadow: none; }
@media (min-width: 480px) { .inst-mapa__enlace { font-size: var(--fs-12); } .inst-mapa__rejilla { gap: 4px; } }
@media (min-width: 1024px) { .inst-mapa { padding: var(--sp-24); } }
/* Por debajo de 1024 la cabecera va a una columna: el mapa no pasa de 560 px (Fable M-10). */
@media (max-width: 1023px) { .inst-mapa { max-width: 560px; } }
@media (prefers-reduced-motion: reduce) { .inst-mapa__enlace { transition: none; } .inst-mapa__enlace:hover { transform: none; } }

/* ---------- Leyes: tabla con buscador ---------- */
.inst-estados__herramientas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); margin-bottom: var(--sp-16); padding: var(--sp-16); border-radius: var(--radius-md); background: var(--arg-surface); border: 1px solid var(--arg-border); }
.inst-estados__etiqueta { display: block; margin-bottom: var(--sp-8); padding: 0; font-weight: 600; font-size: var(--fs-16); }
.inst-estados__campo {
	width: 100%; min-height: var(--target); padding: var(--sp-8) var(--sp-12); border: 1px solid var(--arg-border-control);
	border-radius: var(--radius-sm); background: var(--arg-white); color: var(--arg-ink); font: inherit; font-size: var(--fs-18);
}
.inst-estados__campo:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 1px; }
.inst-estados__filtro { border: 0; margin: 0; padding: 0; min-width: 0; }
.inst-estados__chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.inst-chip { position: relative; display: inline-flex; }
.inst-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inst-chip > span {
	display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--target); padding: 0 var(--sp-16);
	border-radius: var(--radius-pill); border: 1px solid var(--arg-border-control); background: var(--arg-white); cursor: pointer; font-weight: 600; font-size: var(--fs-16);
}
.inst-chip[data-tono] > span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--inst-tono); }
.inst-chip input:checked + span { background: var(--arg-ink); color: var(--arg-white); border-color: var(--arg-ink); }
.inst-chip input:focus-visible + span { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; }
.inst-chip__cuenta { font-family: var(--arg-font-mono); font-size: var(--fs-14); font-weight: 400; opacity: .8; }
.inst-estados__estado { min-height: 1.5em; margin-bottom: var(--sp-16); color: var(--arg-text-weak); font-size: var(--fs-16); }
.inst-estados__codigo { display: inline-grid; place-items: center; min-width: 2.4em; margin-right: var(--sp-8); padding: 2px 4px; border-radius: 4px; background: var(--arg-neutral-100); font-family: var(--arg-font-mono); font-size: var(--fs-14); font-weight: 400; }
.inst-tipo { display: inline-flex; align-items: center; padding: 2px var(--sp-12); border-radius: var(--radius-pill); background: var(--inst-tono-suave); color: var(--arg-ink); font-weight: 600; white-space: nowrap; }
.inst-tipo[data-tono="all-party"] { background: var(--arg-ink); color: var(--arg-white); }
.inst-tipo[data-tono="unsettled"] { background: var(--arg-signal); }
.inst-sin-partir { white-space: nowrap; }
.inst-estados__fila { scroll-margin-top: var(--sp-96); }
.inst-estados__fila:target th, .inst-estados__fila:focus th { box-shadow: inset 4px 0 0 var(--arg-lime); }
.inst-estados__fila:focus { outline: 3px solid var(--arg-focus-ring); outline-offset: -3px; }
.inst-estados__fila[hidden] { display: none; }
@media (max-width: 899px) { .inst-estados__sin-nota { display: none; } .inst-estados__tabla td.inst-estados__sin-nota { display: none; } }
@media (min-width: 900px) {
	.inst-estados__herramientas { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; column-gap: var(--sp-24); }
	.inst-estados__tabla th[scope="row"] { width: 17%; white-space: nowrap; }
	.inst-estados__tabla td:nth-child(2) { width: 12%; }
	.inst-estados__tabla td:nth-child(3) { width: 28%; }
	/* Cabecera de columnas fija bajo la cabecera del sitio (sticky, 72 px + borde, z-index 50) y
	   por debajo de ella. La tabla no puede ser contenedor de scroll (overflow: hidden de .pag-tabla
	   anularía el sticky): clip recorta las esquinas sin serlo. */
	.inst-estados__tabla { overflow: clip; }
	.inst-estados__tabla thead th { position: sticky; top: var(--cabecera-alto); background: var(--arg-white); z-index: 2; box-shadow: 0 1px 0 var(--arg-border); }
	.inst-estados__fila { scroll-margin-top: calc(var(--cabecera-alto) + 72px); }
}

/* ---------- Informe: tarjetas de cifra ---------- */
.inst-cifra { gap: var(--sp-12); }
.inst-cifra__pregunta { font-size: var(--fs-20); line-height: 1.3; }
.inst-cifra__dato { font-family: var(--arg-font-display); font-size: var(--fs-28); font-weight: 600; line-height: var(--lh-sub); letter-spacing: var(--ls-heading); }
.inst-cifra__fuente { margin-top: auto; padding-top: var(--sp-12); border-top: 1px solid var(--arg-border); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); font-size: var(--fs-16); line-height: 1.4; }
.inst-cifra__rotulo { width: 100%; color: var(--arg-text-weak); }
@media (min-width: 960px) { .inst-cifras .pag-tarjeta { display: flex; grid-row: auto; } }

/* Etiqueta de tipo de fuente (texto; con JS, botón que resalta su tipo). */
.inst-fuente {
	display: inline-flex; align-items: center; padding: 2px var(--sp-12); border-radius: var(--radius-pill);
	font-family: var(--arg-font-mono); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--ls-caps); line-height: 1.6;
	background: var(--inst-fuente, var(--arg-neutral-200)); color: var(--arg-ink); border: 1px solid transparent;
}
[data-fuente="public-agency"] { --inst-fuente: var(--arg-lime); }
[data-fuente="independent-research"] { --inst-fuente: var(--arg-lime-tint); }
[data-fuente="analyst-survey"] { --inst-fuente: var(--arg-neutral-200); }
[data-fuente="vendor-measurement"] { --inst-fuente: color-mix(in srgb, var(--arg-signal) 30%, white); }
[data-fuente="vendor-survey"] { --inst-fuente: var(--arg-signal); }
button.inst-fuente--boton { cursor: pointer; min-height: 32px; font-weight: 600; }
button.inst-fuente--boton:hover { border-color: var(--arg-ink); }
button.inst-fuente--boton[aria-pressed="true"] { background: var(--arg-ink); color: var(--arg-white); }
button.inst-fuente--boton:focus-visible { outline: 3px solid var(--arg-focus-ring); outline-offset: 2px; }
.inst[data-resaltar] :is(.inst-hallazgo, .inst-cifra, .inst-comparar__grupo) { transition: opacity .2s ease; }
.inst[data-resaltar="public-agency"] :is(.inst-hallazgo, .inst-cifra, .inst-comparar__grupo):not([data-fuente="public-agency"]),
.inst[data-resaltar="independent-research"] :is(.inst-hallazgo, .inst-cifra, .inst-comparar__grupo):not([data-fuente="independent-research"]),
.inst[data-resaltar="analyst-survey"] :is(.inst-hallazgo, .inst-cifra, .inst-comparar__grupo):not([data-fuente="analyst-survey"]),
.inst[data-resaltar="vendor-measurement"] :is(.inst-hallazgo, .inst-cifra, .inst-comparar__grupo):not([data-fuente="vendor-measurement"]),
.inst[data-resaltar="vendor-survey"] :is(.inst-hallazgo, .inst-cifra, .inst-comparar__grupo):not([data-fuente="vendor-survey"]) { opacity: .35; }

/* Leyenda de tipos: de la fuente más fiable a la más débil (la barra baja). */
.inst-leyenda__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
.inst-leyenda__tipo { position: relative; display: flex; flex-direction: column; padding: var(--sp-24) var(--sp-24) var(--sp-32); border-radius: var(--radius-md); background: var(--arg-surface-card); border: 1px solid var(--arg-border); }
.inst-leyenda__nombre { font-size: var(--fs-16); line-height: 1.3; }
.inst-leyenda__texto { margin-top: var(--sp-12); color: var(--arg-text-weak); font-size: var(--fs-16); line-height: 1.5; }
.inst-leyenda__nivel { position: absolute; left: var(--sp-24); right: var(--sp-24); bottom: var(--sp-12); height: 4px; border-radius: 2px; background: var(--arg-neutral-200); }
.inst-leyenda__nivel::after { content: ""; position: absolute; inset: 0; right: calc(var(--i) * 20%); border-radius: inherit; background: var(--arg-leaf); }
@media (min-width: 768px) { .inst-leyenda__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inst-leyenda__tipo:last-child { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .inst-leyenda__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } .inst-leyenda__tipo:last-child { grid-column: auto; } }

/* Hallazgos. */
.inst-hallazgos__rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
.inst-hallazgo { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-24); border-radius: var(--radius-md); background: var(--arg-surface-card); border: 1px solid var(--arg-border); border-left: var(--sp-4) solid var(--inst-fuente, var(--arg-border)); }
.inst-hallazgo__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.inst-hallazgo__aviso { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--arg-signal); }
.inst-hallazgo__aviso svg { width: 16px; height: 16px; }
.inst-hallazgo--aviso { border-color: var(--arg-signal); border-left-color: var(--arg-signal); }
.inst-hallazgo__texto { font-size: var(--fs-18); line-height: 1.55; }
.inst-hallazgo__texto > * + * { margin-top: var(--sp-12); }
.inst-hallazgos__nota { margin-top: var(--sp-24); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); padding: var(--sp-24); border-radius: var(--radius-md); background: var(--arg-surface-dark); color: var(--arg-on-dark); }
.inst-hallazgos__nota h3 { font-size: var(--fs-28); color: var(--arg-white); }
.inst-hallazgos__nota-texto { font-size: var(--fs-18); line-height: 1.55; }
.inst-hallazgos__nota-texto > * + * { margin-top: var(--sp-12); }
.inst-hallazgos__nota a { color: var(--arg-on-dark-accent); }
.inst-hallazgos__pie { margin-top: var(--sp-24); }
@media (min-width: 960px) {
	.inst-hallazgos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); }
	.inst-hallazgos__rejilla--una { grid-template-columns: minmax(0, 1fr); }
	.inst-hallazgos__rejilla--una .inst-hallazgo__texto { columns: 2; column-gap: var(--sp-48); }
	.inst-hallazgos__rejilla > .inst-hallazgo:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.inst-hallazgo { padding: var(--sp-32); }
	.inst-hallazgos__nota { padding: var(--sp-32); }
	.inst-hallazgos__nota--grafico { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-48); align-items: center; }
	.inst-hallazgos__nota:not(.inst-hallazgos__nota--grafico) .inst-hallazgos__nota-texto { columns: 2; column-gap: var(--sp-48); }
	.inst-hallazgos__nota:not(.inst-hallazgos__nota--grafico) h3 { column-span: all; margin-bottom: var(--sp-12); }
}

/* Gráfico de barras (§1). */
.inst-barras { margin: 0; }
.inst-barras__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-16); }
.inst-barras__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etq valor" "pista pista"; gap: var(--sp-8); align-items: center; }
.inst-barras__etiqueta { grid-area: etq; font-size: var(--fs-16); }
.inst-barras__valor { grid-area: valor; font-family: var(--arg-font-display); font-size: var(--fs-28); font-weight: 600; color: var(--arg-white); }
.inst-barras__pista { grid-area: pista; height: 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); overflow: hidden; }
.inst-barras__barra { display: block; height: 100%; width: var(--valor); border-radius: inherit; background: var(--inst-fuente, var(--arg-lime)); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
	.inst-barras__barra { animation: inst-enciende 1.2s ease-out both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
}

/* Una sola cifra en la sección (§7): título a la izquierda, tarjeta a la derecha. */
@media (min-width: 960px) {
	.inst-hallazgos__lado { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-64); align-items: start; }
	.inst-hallazgos__lado .pag-seccion__cabeza { margin-bottom: 0; }
	.inst-hallazgos__lado .inst-hallazgo__texto { columns: auto; }
}

/* Entre 960 y 1023 las preguntas ya van a dos columnas (título | lista), como desde 1024 en
   plantillas.css: con el título encima, la mitad derecha quedaría vacía a 1000 px. */
@media (min-width: 960px) and (max-width: 1023px) {
	.inst .pag-faq__rejilla { grid-template-columns: minmax(0, 400fr) minmax(0, 784fr); column-gap: var(--sp-48); }
}

/* ---------- Texto con su pieza al lado (Ola 3: capturas del panel, micro-vídeo) ---------- */
.inst-medio__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); align-items: center; }
.inst-medio__texto h2 { margin-bottom: var(--sp-16); }
.inst-medio__texto > * + * { margin-top: var(--sp-16); }
.inst-medio__texto { font-size: var(--fs-18); line-height: 1.6; }
.inst-medio__pieza .pag-captura { margin: 0; }
.inst-medio__pieza .micro-video { margin: 0; }
.inst-oscura--medio .pag-captura__pie { color: var(--arg-on-dark); }
.inst-oscura--medio .pag-captura img { border-color: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), var(--shadow-card); }
.inst-oscura--medio .inst-oscura__icono { margin-bottom: var(--sp-24); }
/* La banda oscura con pieza no usa el «display: contents» de la banda sin pieza (desde 960). */
@media (min-width: 960px) {
	.inst-oscura--medio .inst-oscura__copia { display: block; }
	.inst-oscura--medio .inst-oscura__copia h2 { margin-bottom: var(--sp-16); }
}
/* Pieza a 8/12: las capturas del panel se leen mejor cuanto más anchas (Fable). */
@media (min-width: 1024px) {
	.inst-medio__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--sp-48); }
}
.inst-pasos__despues { margin-top: var(--sp-48); max-width: 960px; margin-inline: auto; }
.inst-pasos__despues .micro-video { margin: 0; }

/* Segundo gráfico del informe (§4, ola 3): lo que se dice frente a lo medido, escala fija 0-100 %. */
.inst-comparar { margin: var(--sp-32) 0 0; padding: var(--sp-24); border-radius: var(--radius-lg); background: var(--arg-surface-dark); color: var(--arg-on-dark); }
.inst-comparar__titulo { font-family: var(--arg-font-display); font-size: var(--fs-28); line-height: 1.2; color: var(--arg-white); margin-bottom: var(--sp-24); }
.inst-comparar__grupos { display: grid; gap: var(--sp-32); }
.inst-comparar__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-8); margin-bottom: var(--sp-16); padding-bottom: var(--sp-12); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.inst-comparar__grupo-titulo { font-size: var(--fs-18); font-weight: 600; color: var(--arg-white); }
.inst-comparar__fuente { display: block; margin-top: var(--sp-4); font-family: var(--arg-font-mono); font-size: var(--fs-14); color: var(--arg-on-dark-accent); }
.inst-comparar__nota { margin-top: var(--sp-24); font-size: var(--fs-16); line-height: 1.5; color: var(--arg-on-dark); }
@media (min-width: 960px) {
	.inst-comparar { padding: var(--sp-32); }
	.inst-comparar__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-48); }
}
/* Enlaces dentro de la banda oscura: el verde hoja de .inst a no llega a 4,5:1 sobre tinta. */
.inst .inst-oscura__texto a:not(.boton):not(.inst-hub__enlace):not(.inst-camino__enlace):not(.inst-mapa__enlace) { color: var(--arg-on-dark-accent); }