/* ============================================================
   Canal12 — Scrollytelling (c12s)
   Carga condicional: solo en posts con formato scrollytelling.
   Construido sobre las variables globales --at-* del sitio.

   Tanda H (2026-08-21): toda la tipografia y los espaciados pasan de rem a px.
   Motivo: la raiz de canal12web.com vale 10px (font-size 62.5%), asi que cada rem
   valia 10px en vez de 16px y el sistema entero renderizaba al 62,5% del tamano
   disenado. La cifra conserva su tamano actual (50-85px), calibrado a ojo en la
   tanda A y sin objeciones en el QA. NO volver a usar rem en este archivo.
   ============================================================ */

.c12s {
	--c12s-acento: #e40000;
	--c12s-fondo: #111214;
	--c12s-texto: #f5f5f5;
	--c12s-texto-suave: #b9bcc2;
	--c12s-medida: 68ch;
	--c12s-escala: 1; /* la ajusta el panel de accesibilidad (0.9 a 1.3) */
	background: var(--c12s-fondo);
	color: var(--c12s-texto);
	/* Tipografia fluida: 18px en moviles → 20px en escritorio, escalable por el lector */
	font-size: calc(clamp(18px, 17px + 0.4vw, 20px) * var(--c12s-escala));
	line-height: var(--at-leading--body-relaxed, 1.8);
	overflow-x: clip;
}

.c12s--claro {
	--c12s-fondo: #ffffff;
	--c12s-texto: #1a1a1a;
	--c12s-texto-suave: #555a61;
}

/* --c12s-acento: para fondos, bordes y texto GRANDE.
   --c12s-acento-texto: variante legible para texto chico, distinta por modo
   (en oscuro hace falta aclarar el acento; en claro, oscurecerlo). */
.c12s--acento-rojo     { --c12s-acento: var(--rojo-sangre, #e40000); --c12s-acento-texto: #ff6b6b; }
.c12s--acento-azul     { --c12s-acento: #0b57d0; --c12s-acento-texto: #7aa9ff; }
.c12s--acento-amarillo { --c12s-acento: #ffd64f; --c12s-acento-texto: #ffd64f; }
.c12s--acento-neutro   { --c12s-acento: #9e9e9e; --c12s-acento-texto: #c9c9c9; }
.c12s--claro.c12s--acento-rojo     { --c12s-acento-texto: #c40000; }
.c12s--claro.c12s--acento-azul     { --c12s-acento-texto: #0b57d0; }
.c12s--claro.c12s--acento-amarillo { --c12s-acento-texto: #7a5c00; }
.c12s--claro.c12s--acento-neutro   { --c12s-acento-texto: #5c5c5c; }

/* Modo oscuro explicito (ademas de los valores base) */
.c12s--oscuro {
	--c12s-fondo: #111214;
	--c12s-texto: #f5f5f5;
	--c12s-texto-suave: #b9bcc2;
}

.c12s a { color: var(--c12s-acento-texto, var(--c12s-acento)); }
.c12s img { max-width: 100%; height: auto; display: block; }

/* El tema define color propio para h1-h6 y eso ganaba sobre el color del
   contenedor: en modo oscuro los titulos quedaban oscuros sobre fondo oscuro.
   Con :where() la especificidad es 0, asi que cualquier regla propia posterior
   (colores apagados, textos sobre imagen, etc.) sigue mandando. */
.c12s :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, cite, figcaption, strong, em, span) {
	color: inherit;
}

/* ---- Barra de progreso de lectura (CSS scroll-driven, sin JS) ---- */
.c12s-progreso {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 4px;
	z-index: 9999;
	background: transparent;
	pointer-events: none;
}
.c12s-progreso-barra {
	height: 100%;
	background: var(--c12s-acento);
	transform-origin: 0 50%;
	transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
	.c12s-progreso-barra {
		animation: c12s-progreso linear both;
		animation-timeline: scroll(root);
	}
	@keyframes c12s-progreso {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
}

/* ---- Ancho de lectura ---- */
.c12s-seccion {
	max-width: var(--c12s-medida);
	margin-inline: auto;
	padding-inline: var(--at-gap-l, 24px);
	margin-block: 0;
}

/* Secciones de texto: ocupan la pantalla disponible completa, contenido centrado.
   min-height + svh: si el texto es mas largo que la pantalla, la seccion crece. */
.c12s-intro, .c12s-texto, .c12s-cita, .c12s-cierre, .c12s-creditos, .c12s-cta, .c12s-video,
.c12s-audio, .c12s-embed {
	min-height: 100svh;
	display: grid;
	align-content: center;
	padding-block: var(--at-gap-xl, 40px);
}

/* ---- Hero (imagen y titulo, cada uno a pantalla completa) ---- */
.c12s-hero { margin-bottom: 0; }
.c12s-hero-media { margin: 0; position: relative; }
.c12s-hero-img { width: 100%; height: 100svh; object-fit: cover; }
.c12s-hero-texto {
	max-width: var(--c12s-medida);
	margin-inline: auto;
	padding: var(--at-gap-xl, 40px) var(--at-gap-l, 24px);
	text-align: center;
	min-height: 100svh;
	display: grid;
	align-content: center;
}
/* Badge solido: sobre una foto el texto en acento no llegaba a contraste AA.
   Blanco sobre el acento da 4,9:1 y ademas funciona como etiqueta editorial. */
.c12s-kicker {
	display: inline-block;
	justify-self: center;
	background: var(--c12s-acento);
	color: #fff;
	padding: 0.3em 0.75em;
	border-radius: var(--at-radius-s, 4px);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: var(--at-weight--bold, 700);
	font-size: 0.8em; /* em: acompana la escala fluida y el panel A+/A- */
	margin: 0 0 var(--at-gap-s, 12px);
}
.c12s--acento-amarillo .c12s-kicker { color: #241c00; }
.c12s-titulo {
	font-size: clamp(32px, 5.5vw, 60px);
	line-height: var(--at-leading--heading-tight, 1.1);
	font-weight: var(--at-weight--black, 900);
	margin: 0 0 var(--at-gap-m, 16px);
	color: var(--c12s-texto);
}
.c12s-bajada {
	font-size: clamp(20px, 2.2vw, 24px);
	color: var(--c12s-texto-suave);
	line-height: var(--at-leading--body, 1.6);
	margin: 0 0 var(--at-gap-m, 16px);
}
.c12s-meta { color: var(--c12s-texto-suave); font-size: 0.85em; margin: 0; }
.c12s-credito { color: var(--c12s-texto-suave); font-size: 0.8em; }
.c12s-hero-media .c12s-credito {
	position: absolute; right: 8px; bottom: 8px;
	background: rgba(0,0,0,0.55); color: #eee;
	padding: 2px 8px; border-radius: var(--at-radius-s, 4px);
}

/* ---- Hero con imagen: titulo superpuesto (una sola pantalla) ---- */
.c12s-hero--imagen { display: grid; min-height: 100svh; }
.c12s-hero--imagen .c12s-hero-media,
.c12s-hero--imagen .c12s-hero-texto { grid-area: 1 / 1; }
.c12s-hero--imagen .c12s-hero-media { height: 100%; margin: 0; }
.c12s-hero--imagen .c12s-hero-img { height: 100%; }
.c12s-hero--imagen .c12s-hero-texto {
	align-self: end;
	min-height: 0;
	z-index: 1;
	padding-block: var(--at-gap-2xl, 64px) var(--at-gap-xl, 40px);
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, transparent 88%);
	color: #f5f5f5;
	text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.c12s-hero--imagen .c12s-titulo { color: #fff; font-size: clamp(36px, 6vw, 68px); }
.c12s-hero--imagen .c12s-bajada { color: #ededed; }
.c12s-hero--imagen .c12s-meta   { color: #dcdcdc; }
.c12s-hero--imagen .c12s-hero-media .c12s-credito { top: 8px; bottom: auto; }

/* ---- Texto (en em: acompanan la escala del lector) ---- */
.c12s-intro { font-size: 1.11em; }
.c12s-texto p { margin-block: var(--at-gap-m, 16px); }
@media (min-width: 1024px) {
	.c12s-texto--dos { max-width: 90ch; }
	.c12s-texto--dos .c12s-texto-inner { column-count: 2; column-gap: var(--at-gap-xl, 40px); }
}

/* ---- Imagen completa (full-bleed, pantalla completa) ---- */
.c12s-imagen-completa {
	max-width: none;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: 0;
	position: relative;
}
.c12s-imagen-completa img { width: 100%; height: 100svh; object-fit: cover; }
.c12s-imagen-completa figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: var(--at-gap-xl, 40px) var(--at-gap-l, 24px) var(--at-gap-m, 16px);
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
	color: #eee;
	font-size: 0.85em;
	text-align: center;
}
.c12s-imagen-completa figcaption .c12s-credito { color: #cfcfcf; }
.c12s-video figcaption {
	max-width: var(--c12s-medida);
	margin: var(--at-gap-s, 12px) auto 0;
	padding-inline: var(--at-gap-l, 24px);
	color: var(--c12s-texto-suave);
	font-size: 0.85em;
}

/* ---- Imagen con texto superpuesto ---- */
.c12s-imagen-texto {
	max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 0;
	position: relative; display: grid;
}
.c12s-imagen-texto img { width: 100%; height: 100svh; object-fit: cover; grid-area: 1 / 1; }
.c12s-imagen-texto-capa {
	grid-area: 1 / 1; align-self: end;
	display: flex; padding: var(--at-gap-2xl, 64px) var(--at-gap-l, 24px) var(--at-gap-xl, 40px);
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 35%, transparent 80%);
}
.c12s-imagen-texto-capa p {
	color: #fff; font-size: clamp(20px, 3vw, 30px);
	font-weight: var(--at-weight--semibold, 600);
	max-width: 40ch; margin: 0;
		text-shadow: 0 2px 12px rgba(0,0,0,0.6);
	text-wrap: balance;
}
.c12s-imagen-texto--izquierda .c12s-imagen-texto-capa { justify-content: flex-start; }
.c12s-imagen-texto--centro    .c12s-imagen-texto-capa { justify-content: center; text-align: center; }
.c12s-imagen-texto--derecha   .c12s-imagen-texto-capa { justify-content: flex-end; text-align: right; }

/* ---- Sticky: imagen fija + pasos ---- */
.c12s-sticky {
	max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 0;
	position: relative;
}
.c12s-sticky-media {
	position: sticky; top: 0; height: 100svh; margin: 0; z-index: 0;
}
.c12s-sticky-media img { width: 100%; height: 100%; object-fit: cover; }
.c12s-sticky-pasos { position: relative; z-index: 1; margin-top: -100svh; }
.c12s-sticky-paso {
	min-height: 100svh;
	display: flex; align-items: center; justify-content: center;
	padding: var(--at-gap-l, 24px);
}
.c12s-sticky-paso p {
	background: rgba(12,12,14,0.82);
	color: #f5f5f5;
	max-width: 52ch; margin: 0;
	padding: var(--at-gap-l, 24px) var(--at-gap-xl, 44px);
	border-left: 4px solid var(--c12s-acento);
	border-radius: var(--at-radius-m, 8px);
	font-size: 1.2em;
	line-height: var(--at-leading--body, 1.6);
}

/* ---- Cita ---- */
.c12s-cita blockquote { margin: 0; border: 0; padding: 0; }
.c12s-cita p {
	font-size: clamp(22px, 3vw, 32px);
	line-height: var(--at-leading--heading-relaxed, 1.3);
	font-weight: var(--at-weight--semibold, 600);
	margin: 0 0 var(--at-gap-m, 16px);
	border-left: 4px solid var(--c12s-acento);
	padding-left: var(--at-gap-l, 24px);
}
.c12s-cita cite { color: var(--c12s-texto-suave); font-style: normal; font-size: 1em; }
.c12s-cita cite span { display: block; font-size: 0.85em; }

/* ---- Cifra (pantalla completa, centrada) ---- */
.c12s-cifra {
	text-align: center;
	min-height: 100svh;
	display: grid;
	place-content: center;
	margin-block: 0;
}
.c12s-cifra-numero {
	font-size: clamp(50px, 13vw, 85px);
	font-weight: var(--at-weight--black, 900);
	color: var(--c12s-acento);
	line-height: 0.95; margin: 0;
}
.c12s-cifra-unidad { display: block; font-size: clamp(18px, 3vw, 28px); font-weight: var(--at-weight--bold, 700); color: var(--c12s-texto); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--at-gap-2xs, 4px); }
.c12s-cifra-contexto { color: var(--c12s-texto-suave); font-size: 1.1em; max-width: 46ch; margin: var(--at-gap-m, 16px) auto 0; }

/* ---- Cifra: fondos alternativos e imagen (evita el bloque plano) ---- */
.c12s-cifra--f-acento,
.c12s-cifra--f-degradado,
.c12s-cifra--con-imagen {
	max-width: none; width: 100vw; margin-inline: calc(50% - 50vw);
	padding-inline: var(--at-gap-l, 24px);
	position: relative;
	background-size: cover; background-position: center;
}
.c12s-cifra--con-imagen { background-image: var(--c12s-bg); }
.c12s-cifra--f-acento { background-color: var(--c12s-acento); }
.c12s-cifra--f-acento .c12s-cifra-numero { color: #fff; }
.c12s-cifra--f-acento .c12s-cifra-unidad { color: #fff; }
.c12s-cifra--f-acento .c12s-cifra-contexto { color: rgba(255, 255, 255, 0.92); }
.c12s-cifra--f-degradado { background-image: linear-gradient(160deg, var(--c12s-acento) 0%, var(--c12s-fondo) 78%); }
/* Con imagen: velo oscuro para que el numero se lea siempre */
.c12s-cifra--con-imagen::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.c12s-cifra--con-imagen > * { position: relative; z-index: 1; }
.c12s-cifra--con-imagen .c12s-cifra-numero { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65); }
.c12s-cifra--con-imagen .c12s-cifra-unidad { color: #fff; }
.c12s-cifra--con-imagen .c12s-cifra-contexto { color: #e8e8e8; }
/* ---- Video ---- */
.c12s-video { max-width: min(1100px, 92vw); }
.c12s-video video { width: 100%; border-radius: var(--at-radius-m, 8px); }
.c12s-video-embed { position: relative; aspect-ratio: 16 / 9; }
.c12s-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--at-radius-m, 8px); }

/* ---- Capitulo (pantalla completa) ---- */
.c12s-capitulo {
	max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 0;
	min-height: 100svh;
	display: grid; place-items: center;
	text-align: center;
	background-size: cover; background-position: center;
}
.c12s-capitulo--con-imagen { background-image: var(--c12s-bg); }

/* ---- Imagen alternativa para celulares y encuadre elegido por el editor ----
   Los bloques con <img> usan <picture> (lo resuelve el navegador, descarga una
   sola). Los que pintan la imagen como fondo se resuelven aca: si el editor no
   cargo version movil, var() cae solo a la principal.                        */
@media (max-width: 767px) {
	.c12s-capitulo--con-imagen,
	.c12s-cifra--con-imagen { background-image: var(--c12s-bg-movil, var(--c12s-bg)); }
}
/* Que parte de la foto se conserva al recortar. Sirve para <img> y para fondo. */
.c12s-enc--arriba    { object-position: center top;    background-position: center top; }
.c12s-enc--abajo     { object-position: center bottom; background-position: center bottom; }
.c12s-enc--izquierda { object-position: left center;   background-position: left center; }
.c12s-enc--derecha   { object-position: right center;  background-position: right center; }
/* <picture> es inline por defecto: sin esto rompe el alto de las secciones. */
.c12s picture { display: contents; }

.c12s-capitulo h2 {
	font-size: clamp(28px, 4.5vw, 48px);
	font-weight: var(--at-weight--black, 900);
	color: var(--c12s-texto);
	padding: var(--at-gap-m, 16px) var(--at-gap-l, 24px);
	margin: 0;
}
.c12s-capitulo--con-imagen h2 { background: rgba(0,0,0,0.6); color: #fff; border-radius: var(--at-radius-m, 8px); }

/* ---- Cierre / creditos / CTA ---- */
.c12s-creditos dl { margin: 0; }
.c12s-credito-fila { display: flex; gap: var(--at-gap-m, 16px); padding-block: var(--at-gap-2xs, 4px); }
.c12s-credito-fila dt { min-width: 160px; color: var(--c12s-texto-suave); }
.c12s-credito-fila dd { margin: 0; }
.c12s-creditos-titulo { font-size: 20px; color: var(--c12s-texto-suave); text-transform: uppercase; letter-spacing: 0.1em; }
.c12s-cta { text-align: center; }
.c12s-cta-boton {
	display: inline-block;
	background: var(--c12s-acento); color: #fff !important;
	padding: 14px 32px; border-radius: var(--at-radius-pill, 9999px);
	font-weight: var(--at-weight--bold, 700); text-decoration: none;
}
.c12s-arriba { text-align: center; padding-block: var(--at-gap-xl, 40px); margin: 0; }
.c12s-arriba a { color: var(--c12s-texto-suave); text-decoration: none; }
.c12s-arriba a:focus-visible, .c12s a:focus-visible { outline: 3px solid var(--c12s-acento); outline-offset: 2px; }

/* ---- Galeria (carrusel horizontal con scroll-snap, sin JS) ---- */
.c12s-galeria {
	max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 0;
	min-height: 100svh; display: grid; align-content: center;
}
.c12s-galeria-pista {
	display: flex; gap: var(--at-gap-m, 16px);
	overflow-x: auto; scroll-snap-type: x mandatory;
	padding: var(--at-gap-s, 12px) max(16px, 6vw);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.c12s-galeria-item { flex: 0 0 auto; width: min(72vw, 880px); scroll-snap-align: center; margin: 0; }
.c12s-galeria-item img { width: 100%; height: 68svh; object-fit: cover; border-radius: var(--at-radius-m, 8px); }
.c12s-galeria-item figcaption { color: var(--c12s-texto-suave); font-size: 0.85em; margin-top: var(--at-gap-xs, 8px); }
.c12s-galeria-pista:focus-visible { outline: 3px solid var(--c12s-acento); outline-offset: 4px; }
.c12s-galeria-ayuda { text-align: center; color: var(--c12s-texto-suave); font-size: 0.85em; margin: var(--at-gap-m, 16px) 0 0; }

/* ---- Antes / despues (comparador con input range) ---- */
.c12s-antes-despues { max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 0; }
.c12s-comparador { position: relative; display: grid; height: 100svh; --pos: 50%; overflow: hidden; touch-action: pan-y; }
.c12s-comparador-base, .c12s-comparador-frente { grid-area: 1 / 1; overflow: hidden; }
.c12s-comparador img { width: 100vw; height: 100svh; object-fit: cover; display: block; }
.c12s-comparador-frente { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.c12s-comparador-etiqueta {
	position: absolute; top: var(--at-gap-m, 16px);
	background: rgba(0,0,0,0.6); color: #fff;
	padding: 5px 13px; border-radius: var(--at-radius-pill, 9999px);
	font-size: 0.85em; font-weight: 700;
}
.c12s-comparador-etiqueta--a { left: var(--at-gap-m, 16px); }
.c12s-comparador-etiqueta--d { right: var(--at-gap-m, 16px); }
.c12s-comparador-linea {
	position: absolute; top: 0; bottom: 0; left: var(--pos);
	width: 3px; background: #fff; transform: translateX(-50%);
	pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.c12s-comparador-tirador {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: #fff; color: #111; display: grid; place-items: center;
	font-size: 19px; box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.c12s-comparador-rango {
	position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
	opacity: 0; cursor: ew-resize;
}
.c12s-comparador-rango:focus-visible + .c12s-comparador-linea,
.c12s-comparador:has(.c12s-comparador-rango:focus-visible) .c12s-comparador-tirador {
	outline: 3px solid var(--c12s-acento); outline-offset: 2px;
}

/* ---- Cronologia (linea de tiempo vertical) ---- */
.c12s-cronologia { min-height: 100svh; padding-block: var(--at-gap-2xl, 64px); }
.c12s-cronologia-tit { font-size: clamp(24px, 3.5vw, 36px); font-weight: var(--at-weight--black, 900); text-align: center; margin: 0 0 var(--at-gap-xl, 40px); }
.c12s-cronologia-lista { list-style: none; margin: 0; padding: 0; position: relative; }
.c12s-cronologia-lista::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: rgba(128,128,128,0.35); }
.c12s-hito { position: relative; padding-left: 36px; padding-bottom: var(--at-gap-xl, 40px); }
.c12s-hito:last-child { padding-bottom: 0; }
.c12s-hito::before { content: ""; position: absolute; left: 9px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--c12s-acento); transform: translateX(-50%); box-shadow: 0 0 0 4px var(--c12s-fondo); }
.c12s-hito-fecha { color: var(--c12s-acento-texto, var(--c12s-acento)); font-weight: var(--at-weight--bold, 700); font-size: 0.9em; margin: 0 0 4px; }
.c12s-hito-tit { font-size: 1.15em; font-weight: var(--at-weight--bold, 700); margin: 0 0 6px; }
.c12s-hito-texto { color: var(--c12s-texto-suave); margin: 0; }

/* ---- Capitulo: tamanos de titulo y fondos alternativos (sin imagen) ---- */
.c12s-capitulo--t-chico h2  { font-size: clamp(24px, 3.5vw, 36px); }
.c12s-capitulo--t-medio h2  { font-size: clamp(32px, 5vw, 52px); }
.c12s-capitulo--t-grande h2 { font-size: clamp(40px, 7vw, 72px); }
.c12s-capitulo--f-acento { background-color: var(--c12s-acento); }
.c12s-capitulo--f-acento h2 { color: #fff; }
.c12s-capitulo--f-degradado { background-image: linear-gradient(160deg, var(--c12s-acento) 0%, var(--c12s-fondo) 78%); }

/* ---- Imagen con texto: tamanos ---- */
.c12s-imagen-texto--t-chico .c12s-imagen-texto-capa p  { font-size: clamp(17px, 2.2vw, 22px); }
.c12s-imagen-texto--t-grande .c12s-imagen-texto-capa p { font-size: clamp(24px, 4vw, 40px); max-width: 32ch; }

/* ---- Cronologia: imagen del hito ---- */
.c12s-hito-img {
	display: block; width: 72px; height: 72px;
	border-radius: 50%; object-fit: cover;
	margin-bottom: var(--at-gap-xs, 8px);
	box-shadow: 0 0 0 3px var(--c12s-acento);
}

/* ---- Cronologia horizontal en escritorio (orientacion automatica) ---- */
@media (min-width: 1024px) {
	.c12s-cronologia--auto { max-width: min(1200px, 92vw); display: grid; align-content: center; }
	.c12s-cronologia--auto .c12s-cronologia-lista {
		display: flex; gap: var(--at-gap-xl, 40px);
		overflow-x: auto; scroll-snap-type: x proximity;
		padding-bottom: var(--at-gap-l, 24px);
		scrollbar-width: thin;
	}
	.c12s-cronologia--auto .c12s-cronologia-lista::before {
		left: 0; right: 0; top: 9px; bottom: auto; width: auto; height: 2px;
	}
	.c12s-cronologia--auto .c12s-hito {
		flex: 0 0 min(300px, 62vw);
		padding-left: 0; padding-top: 36px; padding-bottom: 0;
		scroll-snap-align: start;
	}
	.c12s-cronologia--auto .c12s-hito::before { left: 0; top: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.c12s-cronologia--auto .c12s-cronologia-lista { scroll-snap-type: none; }
}
/* ---- Embed (mapa / grafico / red social) ---- */
.c12s-embed { max-width: min(1100px, 92vw); }
.c12s-embed-marco iframe, .c12s-embed-marco > * { width: 100% !important; max-width: 100%; border: 0; border-radius: var(--at-radius-m, 8px); }
.c12s-embed-marco iframe { min-height: 70svh; aspect-ratio: 16 / 9; }
.c12s-embed-epigrafe { text-align: center; color: var(--c12s-texto-suave); font-size: 0.85em; margin: var(--at-gap-s, 12px) 0 0; }

/* ---- Audio ---- */
.c12s-audio-caja { max-width: min(720px, 92vw); margin-inline: auto; text-align: center; background: rgba(128,128,128,0.12); padding: var(--at-gap-xl, 40px) var(--at-gap-l, 24px); border-radius: var(--at-radius-l, 12px); }
.c12s-audio-tit { font-size: clamp(24px, 3.5vw, 36px); font-weight: var(--at-weight--bold, 700); margin: 0 0 var(--at-gap-m, 16px); }
.c12s-audio-player { width: 100%; min-height: 48px; }
.c12s-audio-epigrafe { color: var(--c12s-texto-suave); font-size: 1em; margin: var(--at-gap-m, 16px) 0 0; }

.c12s-aviso { padding: 16px; background: #fff3cd; color: #664d03; border-radius: 8px; }

/* ============================================================
   Scroll snap (elegido por el editor: suave = proximity, estricto = mandatory)
   Progressive enhancement: sin :has() no pasa nada, scroll libre.
   ============================================================ */
html:has(.c12s--snap-suave),
html:has(.c12s--snap-estricto) { scroll-padding-top: var(--wp-admin--admin-bar--height, 0px); }
html:has(.c12s--snap-suave)    { scroll-snap-type: y proximity; }
html:has(.c12s--snap-estricto) { scroll-snap-type: y mandatory; }

/* Bricks activa scroll-behavior:smooth de forma global (ajuste smoothScroll).
   Combinado con scroll-snap-type:mandatory, Chrome cancela TODO scroll suave:
   el re-anclaje interrumpe la animacion y la pagina no se mueve. El resultado
   es una historia en la que el teclado, la rueda y los puntos de navegacion
   dejan de responder. Verificado el 2026-08-24 aislando cada variable:
   mandatory+smooth = bloqueado · mandatory sin smooth = OK · proximity+smooth = OK.
   En "estricto" los saltos son instantaneos, que ademas es coherente con lo que
   el modo promete: enganche duro, sin deslizamiento. */
/* CORREGIDO el 2026-09-07: la nota del 24-08 decia "proximity+smooth = OK" y es
   falso. Medido hoy en Chrome sobre la 746744 (modo suave): con smooth y snap,
   scrollTo(600) deja scrollY en 0; sacando el smooth, funciona. El bloqueo lo
   produce el snap en CUALQUIER modo. Mientras la regla cubrio solo "estricto",
   toda nota en "suave" -el default- tenia muertos los puntos, la rueda, el
   teclado y "volver al inicio". */
html:has(.c12s--snap-estricto),
html:has(.c12s--snap-suave) { scroll-behavior: auto; }

/* Todas las secciones son de pantalla completa y enganchan al inicio.
   El BLOQUE sticky sigue excluido (mide varias pantallas), pero cada uno de
   sus PASOS mide una y ancla como cualquier seccion.

   Por que los pasos si tienen que anclar: con snap "estricto" (mandatory) el
   navegador esta obligado a descansar siempre en un punto de anclaje. Si un
   bloque de tres pantallas no ofrece ninguno, el navegador no puede detenerse
   ahi y expulsa al lector a la seccion siguiente: la escena queda inalcanzable
   con rueda, teclado y navegacion por puntos. En la v1.2 se les quito el
   anclaje para evitar friccion de rueda, pero esa friccion ya la resuelve la
   asistencia de scrollytelling.js, que desde 2026-08-24 trata cada paso como
   destino propio. */
.c12s--snap-suave :is(.c12s-hero-media, .c12s-hero-texto, .c12s-seccion:not(.c12s-sticky), .c12s-sticky-paso),
.c12s--snap-estricto :is(.c12s-hero-media, .c12s-hero-texto, .c12s-seccion:not(.c12s-sticky), .c12s-sticky-paso) { scroll-snap-align: start; }

/* ============================================================
   Accesibilidad de lectura: boton flotante (FAB) + panel offcanvas.
   Visible solo con JS (el FAB nace hidden y lo muestra scrollytelling.js).
   El FAB "solicita" el panel; sin abrir, no invade la lectura.
   ============================================================ */
.c12s-a11y-fab {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 9998;
	width: 56px; height: 56px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: var(--c12s-acento); color: #fff;
	font-weight: 800; font-size: 22px; line-height: 1;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}
.c12s-a11y-fab[hidden] { display: none; }
.c12s-a11y-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.c12s-a11y-overlay {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0; visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.c12s-a11y-panel {
	position: fixed; top: 0; right: 0; z-index: 10001;
	width: min(360px, 86vw); height: 100svh;
	overflow-y: auto;
	background: #17181c; color: #f5f5f5;
	padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
	box-shadow: -6px 0 24px rgba(0, 0, 0, 0.45);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.28s ease, visibility 0.28s ease;
	display: flex; flex-direction: column; gap: 24px;
}
.c12s--claro .c12s-a11y-panel { background: #fff; color: #1a1a1a; }
.c12s--a11y-abierto .c12s-a11y-overlay { opacity: 1; visibility: visible; }
.c12s--a11y-abierto .c12s-a11y-panel { transform: translateX(0); visibility: visible; }

.c12s-a11y-cab { display: flex; align-items: center; justify-content: space-between; }
.c12s-a11y-tit { font-size: 20px; font-weight: 700; margin: 0; }
.c12s-a11y-cerrar {
	border: 0; background: transparent; color: inherit;
	font-size: 30px; line-height: 1;
	width: 44px; height: 44px;
	border-radius: 10px; cursor: pointer;
}
.c12s-a11y-cerrar:hover { background: rgba(128, 128, 128, 0.18); }

.c12s-a11y-grupo { display: flex; flex-direction: column; gap: 10px; }
.c12s-a11y-label {
	font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase;
	opacity: 0.75;
}
.c12s-a11y-controles { display: flex; gap: 10px; }
.c12s-a11y-btn {
	appearance: none;
	border: 1px solid rgba(128, 128, 128, 0.4);
	background: rgba(128, 128, 128, 0.12);
	color: inherit; font: inherit; font-weight: 700;
	min-height: 48px; min-width: 48px; padding: 0 16px;
	border-radius: 10px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.c12s-a11y-btn:hover { background: rgba(128, 128, 128, 0.24); }
.c12s-a11y-btn:focus-visible { outline: 3px solid var(--c12s-acento); outline-offset: 2px; }
.c12s-a11y-btn--valor { flex: 1; }
.c12s-a11y-btn--ancho { width: 100%; }
.c12s-a11y-valor { font-size: 16px; }
.c12s-a11y-modo-icono { font-size: 19px; }

@media (prefers-reduced-motion: reduce) {
	.c12s-a11y-overlay, .c12s-a11y-panel { transition: none; }
}
@media print {
	.c12s-a11y-fab, .c12s-a11y-overlay, .c12s-a11y-panel, .c12s-progreso { display: none !important; }
}

/* ============================================================
   Navegacion por puntos (la crea scrollytelling.js; sin JS no existe)
   ============================================================ */
.c12s-nav {
	position: fixed;
	left: max(10px, env(safe-area-inset-left));
	top: 50%; transform: translateY(-50%);
	z-index: 9997;
	transition: opacity 0.2s ease;
}
.c12s-nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 6px;
	/* Historias largas: la columna de puntos no debe pasarse de pantalla.
	   El segundo termino reserva 150px (75 arriba y 75 abajo, porque va
	   centrada) para que en ventanas bajas no toque el boton de compartir,
	   que ocupa 60px abajo a la izquierda. Medido el 07-09-2026: con 76svh
	   sueltos, a partir de ~500px de alto de ventana se tocaban. */
	max-height: min(76svh, 100svh - 150px); overflow-y: auto;
	scrollbar-width: none;
}
.c12s-nav ul::-webkit-scrollbar { display: none; }
.c12s-nav button {
	position: relative; display: block;
	width: 28px; height: 28px;
	padding: 0; border: 0; background: transparent; cursor: pointer;
}
.c12s-nav button::before {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 10px; height: 10px; border-radius: 50%;
	background: rgba(140, 140, 140, 0.55);
	transition: background 0.2s ease, transform 0.2s ease;
}
.c12s-nav button[aria-current="true"]::before { background: var(--c12s-acento); transform: scale(1.5); }
.c12s-nav button:hover::before { background: var(--c12s-acento); }
.c12s-nav button:focus-visible { outline: 3px solid var(--c12s-acento); outline-offset: -2px; border-radius: 50%; }
/* Pasos de una escena sticky: indentados y con el punto mas chico, para que se
   lea que pertenecen al bloque anterior y no son secciones independientes.
   El AREA del boton se mantiene en 24px (minimo tactil de WCAG 2.2): lo que se
   achica es el punto, no la zona donde se puede tocar. */
.c12s-nav li.c12s-nav-li--paso { margin-left: 9px; }
.c12s-nav button.c12s-nav-btn--paso { width: 24px; height: 24px; }
.c12s-nav button.c12s-nav-btn--paso::before { width: 6px; height: 6px; }
.c12s--a11y-abierto .c12s-nav { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
	.c12s-nav ul { gap: 2px; }
	.c12s-nav button { width: 24px; height: 24px; }
	.c12s-nav button::before { width: 8px; height: 8px; }
	.c12s-nav li.c12s-nav-li--paso { margin-left: 7px; }
	.c12s-nav button.c12s-nav-btn--paso::before { width: 5px; height: 5px; }
}

/* ============================================================
   Transiciones de entrada. El estado inicial SOLO existe con
   .c12s--anim-on, que agrega el JS: sin JS (y para Google) el
   contenido esta siempre visible. Tampoco se aplica a lo que ya
   se ve al abrir la nota.
   ============================================================ */
.c12s--anim-on.c12s--trans-difuminado .c12s-anim {
	opacity: 0; transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.c12s--anim-on.c12s--trans-marquesina .c12s-anim {
	transform: translateY(56px);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Video y mapas: siempre marquesina, nunca difuminado (costoso) */
.c12s--anim-on.c12s--trans-difuminado .c12s-video.c12s-anim,
.c12s--anim-on.c12s--trans-difuminado .c12s-embed.c12s-anim {
	opacity: 1; transform: translateY(56px);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.c12s--anim-on .c12s-anim.c12s-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.c12s--anim-on .c12s-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
	.c12s-nav { display: none !important; }
	.c12s--anim-on .c12s-anim { opacity: 1 !important; transform: none !important; }
}
/* La linea de tiempo horizontal es una region desplazable: debe poder
   recorrerse con teclado (WCAG 2.1.1) y mostrar el foco. */
.c12s-cronologia-lista:focus-visible {
	outline: 3px solid var(--c12s-acento);
	outline-offset: 6px;
	border-radius: var(--at-radius-s, 4px);
}

/* Lectores que piden mas contraste: velos mas opacos y textos sin atenuar */
@media (prefers-contrast: more) {
	.c12s { --c12s-texto-suave: var(--c12s-texto); }
	.c12s-imagen-texto-capa { background: rgba(0, 0, 0, 0.88); }
	.c12s-cifra--con-imagen::before { background: rgba(0, 0, 0, 0.8); }
	.c12s-imagen-completa figcaption { background: rgba(0, 0, 0, 0.85); }
	.c12s-hero--imagen .c12s-hero-texto {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 55%, rgba(0, 0, 0, 0.4) 100%);
	}
	.c12s-nav button::before { background: var(--c12s-texto); }
}
/* ---- Accesibilidad: reduccion de movimiento ---- */
@media (prefers-reduced-motion: reduce) {
	.c12s-progreso-barra { animation: none !important; transform: scaleX(1); opacity: 0.35; }
	.c12s * { scroll-behavior: auto !important; transition: none !important; }
	.c12s-sticky-media { position: static; height: auto; }
	.c12s-sticky-pasos { margin-top: 0; }
	.c12s-sticky-paso { min-height: 0; padding-block: var(--at-gap-m, 16px); }
	html:has(.c12s) { scroll-snap-type: none !important; }
	.c12s-galeria-pista { scroll-snap-type: none; }
	.c12s a, .c12s * { scroll-behavior: auto !important; }
}


/* ---- Flechas de seccion (vista angosta) --------------------------------
   Medido el 07-09-2026 sobre la nota 746744 en un viewport de 387px: la
   columna de puntos ocupa de x=10 a x=34 y el texto arranca en x=16..24,
   asi que se monta sobre la lectura en 16 de 16 secciones. El choque
   desaparece recien cerca de los 880px (a 897px el margen es de 2,6px).
   Por eso el corte esta en 900px: debajo mandan las flechas.
   Sin rem a proposito: en este sitio 1rem = 10px. -------------------- */
/* La columna de controles vive abajo a la izquierda y agrupa, de arriba hacia
   abajo: compartir, subir, bajar. El JS mete el boton de compartir aca dentro
   para que compartan tamano y eje vertical (pedido de Federico, 07-09-2026,
   con captura de un Galaxy S22+ donde el boton quedaba mas chico y corrido).
   El contenedor se muestra SIEMPRE: arriba de 900px se ocultan las flechas,
   pero compartir se queda. El FAB de lectura vive abajo a la derecha. */
.c12s-flechas {
	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* que la fila de compartir crezca sin estirar las flechas */
	gap: 8px;
	position: fixed;
	z-index: 9997;
	left: max(12px, env(safe-area-inset-left));
	bottom: max(12px, env(safe-area-inset-bottom));
	transition: opacity 0.2s ease;
}
.c12s--a11y-abierto .c12s-flechas { opacity: 0; pointer-events: none; }
.c12s-flecha { display: none; }

@media (max-width: 900px) {
	.c12s-nav { display: none; }

	.c12s-flecha {
		width: 48px;
		height: 48px;
		padding: 0;
		display: grid;
		place-items: center;
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.55);
		color: #fff;
		cursor: pointer;
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
	.c12s-flecha svg {
		width: 26px;
		height: 26px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.c12s-flecha:disabled { opacity: 0.3; cursor: default; }
	.c12s-flecha:focus-visible { outline: 3px solid var(--c12s-acento); outline-offset: 2px; }
}

@media print {
	.c12s-flechas { display: none !important; }
}


/* ---- Compartir ---------------------------------------------------------
   Las cuatro redes son las mismas, en el mismo orden, que usa una nota normal
   del portal (elemento nativo de Bricks). Aca se estilan aparte porque el
   scrollytelling no hereda nada de la plantilla de nota.
   Dos variantes: 'hero' (compacta, sobre la portada) y 'final' (bloque de
   cierre a pantalla completa). Sin rem: en este sitio 1rem = 10px. ------ */
.c12s-compartir-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.c12s-compartir-red {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.c12s-compartir-red svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
/* display:grid de arriba le gana al display:none que el navegador aplica a
   [hidden] (una clase pesa mas que un atributo). Sin esta regla, el boton de
   copiar y el de compartir se verian con JS desactivado, sin hacer nada.
   Detectado el 07-09-2026 al sumar el plegado. */
.c12s-compartir-red[hidden] { display: none; }
.c12s-compartir-red:hover,
.c12s-compartir-red:focus-visible {
	opacity: 1;
	background: var(--c12s-acento);
	border-color: var(--c12s-acento);
	color: #fff;
	transform: translateY(-2px);
}
.c12s-compartir-red:focus-visible { outline: 3px solid var(--c12s-acento); outline-offset: 3px; }

/* El boton de copiar trae dos iconos: enlace y tilde. Son de trazo, no de
   relleno, asi que se pintan distinto que los logos de las redes. */
.c12s-compartir-copiar .c12s-ic-link,
.c12s-compartir-copiar .c12s-ic-ok {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.c12s-compartir-copiar .c12s-ic-ok { display: none; }
.c12s-compartir-copiar.esta-copiado .c12s-ic-link { display: none; }
.c12s-compartir-copiar.esta-copiado .c12s-ic-ok { display: block; }
.c12s-compartir-copiar.esta-copiado {
	opacity: 1;
	background: var(--c12s-acento);
	border-color: var(--c12s-acento);
	color: #fff;
}

/* -- Variante compacta, dentro de la portada -- */
.c12s-compartir--hero { margin-top: 18px; }
.c12s-compartir--hero .c12s-compartir-lista { justify-content: inherit; gap: 8px; }
.c12s-compartir--hero .c12s-compartir-red { width: 40px; height: 40px; }
.c12s-compartir--hero .c12s-compartir-red svg { width: 18px; height: 18px; }
/* Sobre la foto el contorno fino se pierde: se le pone fondo propio. */
.c12s-hero--imagen .c12s-compartir--hero .c12s-compartir-red {
	background: rgba(0, 0, 0, 0.45);
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.c12s-hero--imagen .c12s-compartir--hero .c12s-compartir-red:hover,
.c12s-hero--imagen .c12s-compartir--hero .c12s-compartir-red:focus-visible {
	background: var(--c12s-acento);
	border-color: var(--c12s-acento);
}

/* -- Variante de cierre, seccion completa -- */
.c12s-compartir--final { text-align: center; }
.c12s-compartir--final .c12s-compartir-lista { justify-content: center; gap: 14px; }
.c12s-compartir-titulo {
	font-size: 30px;
	margin: 0 0 22px;
	line-height: 1.2;
}
.c12s-compartir--final .c12s-compartir-red { width: 56px; height: 56px; }
.c12s-compartir--final .c12s-compartir-red svg { width: 24px; height: 24px; }
.c12s-compartir-aviso {
	min-height: 22px;
	margin: 16px 0 0;
	font-size: 16px;
	color: var(--c12s-texto-suave);
}

/* En vista angosta conviven en la portada la fila de compartir (abajo a la
   izquierda, en el flujo) y los controles fijos: las flechas abajo a la
   izquierda y el FAB de lectura abajo a la derecha. Medido el 07-09-2026 en
   387px: el icono de Facebook quedaba tapado por la flecha (fila 24-64 contra
   flechas 12-60). Se centra la fila y se la sube por encima de la franja de
   controles; asi despeja las flechas por izquierda y el FAB por abajo. */
@media (max-width: 900px) {
	.c12s-compartir--hero .c12s-compartir-lista { justify-content: center; }
	.c12s-compartir--hero { margin-bottom: 76px; }
}

@media (max-width: 640px) {
	.c12s-compartir-titulo { font-size: 26px; }
	.c12s-compartir--final .c12s-compartir-red { width: 50px; height: 50px; }
}

@media print {
	.c12s-compartir { display: none !important; }
}


/* ---- Portada: los botones se pliegan detras del icono de compartir -------
   Pedido de Federico (07-09-2026): que la portada no muestre cinco botones,
   sino una sola etiqueta con el icono clasico de compartir que los despliega.
   La clase .c12s-compartir--plegable la agrega el JS: sin JS el panel queda
   abierto y los enlaces siguen siendo alcanzables.
   El plegado se anima con max-width. Se probo antes el truco de
   grid-template-columns 0fr -> 1fr y NO sirve aca: la lista lleva flex-wrap,
   asi que con la pista en 0 los botones se apilan uno por linea y el 1fr
   termina resolviendo contra un contenido ya colapsado (medido: panel 0px y
   ul.scrollWidth 20px con la fila supuestamente abierta). Con max-width y
   flex-wrap:nowrap el ancho es predecible. ------------------------------- */
.c12s-compartir--hero { display: flex; align-items: center; gap: 10px; }
.c12s-compartir--hero .c12s-compartir-lista { flex-wrap: nowrap; }
.c12s-compartir-panel { overflow: hidden; }

.c12s-compartir-toggle .c12s-ic-share {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.c12s-compartir--plegable .c12s-compartir-panel {
	max-width: 0;
	transition: max-width 0.35s ease;
}
/* Techo, no ancho real: dentro de la columna la fila mide 252px (5 botones de
   44 + 4 huecos de 8). Solo tiene que ser mayor que el contenido. */
.c12s-compartir--plegable.esta-abierto .c12s-compartir-panel { max-width: 340px; }

/* Los botones entran escalonados, de a uno. visibility (no display) para que
   sean animables y, estando ocultos, queden fuera del recorrido del tabulador. */
.c12s-compartir--plegable .c12s-compartir-lista li {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-10px) scale(0.85);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.c12s-compartir--plegable.esta-abierto .c12s-compartir-lista li {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
.c12s-compartir--plegable.esta-abierto .c12s-compartir-lista li:nth-child(1) { transition-delay: 0.04s; }
.c12s-compartir--plegable.esta-abierto .c12s-compartir-lista li:nth-child(2) { transition-delay: 0.08s; }
.c12s-compartir--plegable.esta-abierto .c12s-compartir-lista li:nth-child(3) { transition-delay: 0.12s; }
.c12s-compartir--plegable.esta-abierto .c12s-compartir-lista li:nth-child(4) { transition-delay: 0.16s; }
.c12s-compartir--plegable.esta-abierto .c12s-compartir-lista li:nth-child(5) { transition-delay: 0.20s; }

/* Abierto, el icono gira un poco: senal de que ese mismo boton vuelve a cerrar. */
.c12s-compartir--plegable.esta-abierto .c12s-compartir-toggle {
	background: var(--c12s-acento);
	border-color: var(--c12s-acento);
	color: #fff;
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.c12s-compartir--plegable .c12s-compartir-panel,
	.c12s-compartir--plegable .c12s-compartir-lista li,
	.c12s-compartir--plegable .c12s-compartir-toggle { transition: none !important; }
	.c12s-compartir--plegable.esta-abierto .c12s-compartir-toggle { transform: none; }
}


/* ---- Compartir dentro de la columna de controles ------------------------
   .c12s-compartir--encolumna la agrega el JS SOLO si de verdad pudo mover el
   elemento adentro de .c12s-flechas. Si no (historia de menos de 3 secciones,
   sin columna), el bloque se queda en la portada con su estilo de siempre. */
.c12s-compartir--encolumna {
	margin: 0;
	gap: 8px;
}
/* Mismo tamano y mismo aspecto que una flecha: es la misma columna. */
.c12s-compartir--encolumna .c12s-compartir-toggle {
	width: 48px;
	height: 48px;
	opacity: 1;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.c12s-compartir--encolumna .c12s-compartir-toggle svg { width: 22px; height: 22px; }

/* Los que se despliegan van un punto mas chicos, para que se lea que dependen
   del boton, y siguen por encima del minimo tactil de WCAG 2.2 (24px). */
.c12s-compartir--encolumna .c12s-compartir-lista .c12s-compartir-red {
	width: 44px;
	height: 44px;
	opacity: 1;
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.c12s-compartir--encolumna .c12s-compartir-lista .c12s-compartir-red:hover,
.c12s-compartir--encolumna .c12s-compartir-lista .c12s-compartir-red:focus-visible,
.c12s-compartir--encolumna.esta-abierto .c12s-compartir-toggle {
	background: var(--c12s-acento);
	border-color: var(--c12s-acento);
	color: #fff;
}
/* Ya no esta en la portada: se anulan los ajustes que tenia ahi. */
.c12s-compartir--encolumna { margin-bottom: 0; }
.c12s-compartir--encolumna .c12s-compartir-lista { justify-content: flex-start; }