/* ARPADURA — tema editorial. Paleta y tipografía porteadas 1:1 del diseño original. */
:root {
	--arp-red: #D6272C;
	--arp-violet: #550584;
	--arp-purple: #44076F;
	--arp-magenta: #8C195D;
	--arp-gradient-orienta: linear-gradient(135deg, #44076F 0%, #8C195D 45%, #D6272C 100%);
	--arp-orange: #F2871A;
	--arp-ink: #14121F;
	--arp-muted: #726D62; /* antes #9A9689: 2.95:1 sobre blanco, no pasa el mínimo AA (4.5:1) de WCAG. Este tono da 5.15:1 y mantiene el mismo matiz cálido. */
	--arp-paper: #fff;
	--arp-cream: #F1EFE8;
	/* Constantes — NO cambian con el tema, a propósito. Varios botones/insignias
	   (buscar, CTA de columna, descargar documento, fecha de evento, comentar, volver
	   arriba) son "chips" que siempre deben leerse oscuros con texto claro, sea cual sea
	   el tema del sitio — antes usaban var(--arp-ink) para el fondo asumiendo que
	   siempre sería oscuro, y en modo oscuro esa variable se vuelve clara: texto blanco
	   sobre fondo casi blanco, invisible. --arp-bone reemplaza el #fff puro en estos
	   chips por un blanco hueso, menos "chillón". */
	--arp-chip: #14121F;
	--arp-bone: #F4EFE5;
}

/* 1b. Dark Mode Variables — rediseño v2 (feedback real: "el negro no me gusta", "textos
   ilegibles en negro sobre negro", "bordes y letras blancas chillonas"). Tres cambios:
   (1) --arp-muted es NUEVO — antes cada clase de texto secundario (fechas, bylines,
   descripciones) usaba directo un gris literal (#555/#666/#9A9689/#888/#aaa) que nunca
   se adaptaba a modo oscuro: gris oscuro sobre fondo oscuro = ilegible. Ahora es una
   sola variable que cambia con el tema — se reemplazó cada uso literal por
   var(--arp-muted) en todo el archivo (ver más abajo). (2) --arp-paper/--arp-cream ya
   no rondan el negro puro, son gris oscuro con dejo cálido y con contraste real entre
   sí. (3) Bordes/texto ya no usan #fff ni --arp-ink a máxima intensidad en elementos
   repetidos (como cada botón del nav) — eso es lo que se sentía "chillón"; ahí también
   se usa --arp-muted, reservando --arp-ink pleno para el texto principal. */
[data-theme="dark"] {
	--arp-ink: #E7E4DE;
	--arp-muted: #A39D93;
	--arp-cream: #3A3836;
	--arp-paper: #262524;
}
/* 1c. Dark Mode — Header overrides */
[data-theme="dark"] .arp-header { background: var(--arp-paper); }
/* La franja de marca (logo animado) se queda SIEMPRE blanca, sin importar el tema — igual
   que --arp-chip/--arp-bone en :root, es una constante deliberada. El video del logo no
   tiene transparencia real y necesita fundirse con un blanco exacto vía mix-blend-mode;
   si esta franja cambiara a gris oscuro en modo oscuro, el video volvería a verse como un
   recuadro blanco suelto encima de un fondo oscuro. */
[data-theme="dark"] .arp-logos-row--single { border-left-color: var(--arp-red); }
/* En Modo Oscuro: Mantiene los logos 100% transparentes con un suave margen/grosor de línea para resaltar nítidamente.
   El logo animado (video) queda excluido: no tiene canal alfa real, así que "normal" expondría
   su propio fondo blanco como un recuadro — ver tratamiento dedicado de .arp-logo-video más abajo. */
[data-theme="dark"] .arp-logo-img:not(.arp-logo-video) {
	mix-blend-mode: normal !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.7))
	        drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.7))
	        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7))
	        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.7))
	        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)) !important;
}
/* La franja de marca sigue blanca en modo oscuro (ver .arp-logos-row--single arriba) —
   el nombre del sitio ahí dentro debe quedarse oscuro siempre, NO seguir a --arp-ink
   (que en modo oscuro es claro y se volvería invisible sobre blanco). */
[data-theme="dark"] .arp-logo-identity-name { color: #14121F; }
[data-theme="dark"] .arp-bar-thick { background: var(--arp-ink); }
[data-theme="dark"] .arp-grain-strip { background: var(--arp-paper); }
[data-theme="dark"] .arp-meta-pill p { color: var(--arp-ink); }
[data-theme="dark"] .arp-meta-badge { background: var(--arp-ink); color: var(--arp-paper); }
[data-theme="dark"] .arp-tagline { color: var(--arp-ink); }
/* Antes: border-color:var(--arp-ink) en CADA botón del nav — una fila entera de bordes
   casi blancos se sentía chillona. --arp-muted da contorno visible sin ese chillido. */
[data-theme="dark"] .arp-nav-btn { background: var(--arp-paper); color: var(--arp-ink); border-color: rgba(231, 228, 222, 0.22); }
[data-theme="dark"] .arp-nav-btn.active { background: var(--arp-red); color: var(--arp-bone); border-color: var(--arp-red); }
[data-theme="dark"] .arp-nav-btn:hover { background: var(--arp-red); color: var(--arp-bone); border-color: var(--arp-red); }
[data-theme="dark"] .arp-search-form { border-color: rgba(231, 228, 222, 0.22); }
[data-theme="dark"] .arp-search-input-field { background: var(--arp-paper); color: var(--arp-ink); }
[data-theme="dark"] .arp-ticker { background: var(--arp-paper); }
[data-theme="dark"] .arp-ticker-item { color: var(--arp-ink); }
[data-theme="dark"] .arp-sticky-nav-btn { color: var(--arp-ink); }
[data-theme="dark"] .arp-footer { background: var(--arp-cream); color: var(--arp-ink); }
[data-theme="dark"] .arp-doc-row { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .arp-theme-toggle { background: var(--arp-cream); color: var(--arp-ink); border-color: rgba(255,255,255,0.1); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
	margin: 0;
	background: var(--arp-paper);
	color: var(--arp-ink);
	font-family: 'Space Grotesk', sans-serif;
	overflow-x: clip;
}
a { color: var(--arp-red); text-decoration: none; }
a:hover { color: var(--arp-ink); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: 'Anton', sans-serif; margin: 0; }

/* Anillo de foco visible, consistente en todo el sitio — clave para navegar por
   teclado (Tab), que hasta ahora dependía del contorno por defecto del navegador. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--arp-red); outline-offset: 2px; border-radius: 2px;
}

/* Con "reducir movimiento" activado en el sistema operativo, todas las animaciones de
   este archivo (existentes y nuevas) quedan casi instantáneas — es la regla que permite
   agregar más movimiento con confianza sin perjudicar a quien lo tiene desactivado. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
}

@keyframes oh-dither { 0% { background-position: 0 0; } 100% { background-position: 16px 16px; } }
.arp-grain {
	background-image: repeating-radial-gradient(circle at 3px 3px, var(--arp-red) 0 1.6px, transparent 2px 8px);
	background-size: 8px 8px;
	animation: oh-dither 4.5s steps(4) infinite;
}
.oh-halftone {
	position: absolute; inset: 0; pointer-events: none;
	background-image: repeating-radial-gradient(circle at 4px 4px, rgba(214,39,44,.55) 0 2.2px, transparent 2.6px 10px);
	background-size: 10px 10px; mix-blend-mode: multiply;
	animation: oh-dither 6s steps(4) infinite;
}
.oh-mark {
	width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: middle;
	background-image: repeating-radial-gradient(circle at 2.5px 2.5px, var(--arp-red) 0 1.3px, transparent 1.6px 5px);
	background-size: 5px 5px;
	animation: oh-dither 3.2s steps(4) infinite;
}
@keyframes oh-marquee { from { transform: translateX(0); } to { transform: translateX(-16.6667%); } }

@keyframes oh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.oh-reveal { opacity: 0; }
.oh-reveal.oh-in { animation: oh-rise .6s ease both; }
.oh-reveal.oh-in-instant { opacity: 1; }

/* Banda de transición horizontal entre secciones — fiel al oh-wipe original
   (ver manito/ARPADURA/Skill - Animación oh-wipe.md): idle -101% (reposo, izquierda) /
   in 0% (cubriendo) / out 101% (revelando). En el original, TODO el movimiento visible
   va hacia la derecha (cubrir y revelar); el único regreso a la izquierda es un salto de
   reposo que ocurre cuando la banda ya está fuera de pantalla — por eso "vuelve a la
   izquierda" al final de cada ciclo, no al principio.
   El ciclo completo al cargar la página (cubrir→revelar→pausa→reposo) es una animación
   CSS pura — el navegador la arranca sola, sin depender de que JS ejecute un
   requestAnimationFrame a tiempo. JS solo interviene para CUBRIR al hacer clic en un
   enlace, antes de navegar de verdad — y como para entonces la animación de entrada ya
   terminó y está en reposo, no hay ambigüedad entre cancelar una animación en curso y
   arrancar una transición nueva. */
@keyframes arp-wipe-cycle {
	0%   { transform: translateX(0); visibility: visible; }
	100% { transform: translateX(101%); visibility: hidden; }
}
.arp-wipe {
	position: fixed; inset: 0; background: var(--arp-gradient-orienta); z-index: 99999; pointer-events: none;
	transform: translateX(101%);
	visibility: hidden;
	will-change: transform;
	backface-visibility: hidden;
	display: flex; align-items: center; justify-content: center;
	/* Clip sub‑pixel bleed que causaba la línea blanca en la esquina */
	overflow: hidden;
	/* Asegurar que el borde sea limpio en todos los navegadores */
	border: none;
	outline: none;
	box-shadow: none;
}
html.arp-wipe-active .arp-wipe {
	transform: translateX(0) !important;
	visibility: visible !important;
	pointer-events: all !important;
}
.arp-wipe.arp-wipe-play {
	animation: arp-wipe-cycle .8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.arp-wipe-content {
	display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center;
	/* Aislamiento para evitar que el blending del img contamine el fondo */
	isolation: isolate;
}
.arp-wipe-logo-img {
	max-width: 420px; width: 72vw; max-height: 38vh; height: auto; display: block; object-fit: contain;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	filter: brightness(1) contrast(1) !important;
	/* mix-blend-mode screen elimina cualquier residuo de fondo blanco del PNG */
	mix-blend-mode: screen;
}
.arp-wipe-logo-vector {
	display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFFFFF;
}
.arp-wipe-logo-vector svg {
	width: 54px; height: 54px; margin-bottom: 8px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}
.arp-wipe-brand-name {
	font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 76px; font-weight: 700;
	color: #FFFFFF !important; text-shadow: 0 4px 20px rgba(0,0,0,0.2); margin: 0; line-height: 0.95; letter-spacing: -0.02em;
}
.arp-wipe-brand-sub {
	font-family: 'Anton', sans-serif; font-size: 22px; font-weight: 400; color: #FFFFFF !important;
	text-transform: uppercase; letter-spacing: 0.25em; margin-top: 8px; opacity: 0.95; text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

@keyframes arp-wipe-in {
	0% { transform: translateX(-101%); visibility: visible; }
	100% { transform: translateX(0); visibility: visible; }
}

.arp-wipe.arp-wipe-cover {
	animation: arp-wipe-in .8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
	pointer-events: all;
	visibility: visible;
}
.arp-in-iframe .arp-wipe,
body.arp-in-iframe .arp-wipe {
	display: none !important;
	animation: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ──────────────── Intro splash (primera visita) ────────────────
   El splash cubre la pantalla ANTES de que el contenido sea visible,
   luego se desvanece hacia arriba suavemente. Solo se muestra una vez
   por sesión (controlado por JS con sessionStorage). */
@keyframes arp-intro-fade {
	0%   { opacity: 1;  transform: translateY(0); }
	70%  { opacity: 1;  transform: translateY(0); }
	100% { opacity: 0;  transform: translateY(-8px); }
}
@keyframes arp-intro-logo-in {
	0%   { opacity: 0;  transform: scale(0.88); }
	60%  { opacity: 1;  transform: scale(1.04); }
	100% { opacity: 1;  transform: scale(1); }
}
#arp-intro {
	position: fixed; inset: 0; z-index: 199999;
	background: var(--arp-gradient-orienta);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	pointer-events: all;
	animation: arp-intro-fade 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
	will-change: opacity, transform;
}
#arp-intro.arp-intro-done {
	display: none !important;
}
#arp-intro-logo {
	max-width: 380px; width: 68vw; max-height: 35vh; height: auto; display: block; object-fit: contain;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	filter: brightness(1) contrast(1) !important;
	mix-blend-mode: screen;
	animation: arp-intro-logo-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.arp-in-iframe #arp-intro { display: none !important; }

/* ---------------- Layout shells ---------------- */
/* Ancho completo de verdad: sin tope fijo en px, solo un margen lateral que respira
   pero nunca deja franjas vacías — el padding crece con el viewport y se topa en 80px. */
.arp-page { min-height: 100vh; background: var(--arp-paper); color: var(--arp-ink); }
.arp-main { width: 100%; margin: 0 auto; padding: 0 clamp(20px, 4vw, 80px) 80px; position: relative; background: var(--arp-paper); }

/* ---------------- Header ---------------- */
.arp-header { width: 100%; margin: 0 auto; padding: 28px clamp(20px, 4vw, 80px) 0; background: var(--arp-paper); }
.arp-logos-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 18px; }
.arp-logo-img {
	width: 210px; height: 90px; object-fit: contain; mix-blend-mode: multiply !important;
	background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important;
}
.arp-logo-placeholder {
	width: 210px; height: 90px; border: 2px dashed #ddd; display: flex; align-items: center; justify-content: center;
	font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #999; text-align: center; padding: 8px;
}
/* Un solo logo (izq. o der.) — franja limpia con fondo blanco y filo rojo */
.arp-logos-row--single { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 12px 22px; background: #ffffff !important; border-left: 4px solid var(--arp-red); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.arp-logos-orientation-vertical { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 16px !important; }
.arp-logos-orientation-vertical .arp-logo-identity,
.arp-logos-orientation-vertical .arp-logo-partner { justify-self: center !important; align-items: center !important; text-align: center !important; }
.arp-logos-align-center { justify-content: center !important; }
.arp-logos-align-left { justify-content: flex-start !important; }
.arp-logos-align-right { justify-content: flex-end !important; }
.arp-logos-align-space-between { justify-content: space-between !important; }
.arp-logo-identity { display: flex; align-items: center; gap: 10px; justify-self: start; }
.arp-logo-partner--center { justify-self: center; display: flex; align-items: center; }
.arp-logo-partner--right { justify-self: end; display: flex; align-items: center; text-align: right; }
.arp-logo-identity-mark { width: 28px; height: 28px; flex: none; }
.arp-logo-identity-name { font-family: 'Anton', sans-serif; font-size: 20px; letter-spacing: .01em; color: var(--arp-ink); white-space: nowrap; }
.arp-logo-divider { width: 2px; height: 42px; background: var(--arp-ink); opacity: .15; flex: none; }
.arp-logo-partner { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.arp-logo-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--arp-muted); }
.arp-logo-partner .arp-logo-img { width: auto; max-width: 340px; height: auto; max-height: 190px; object-fit: contain; transition: transform 0.4s ease, filter 0.4s ease; }
.arp-logo-partner .arp-logo-img--orienta { max-width: 700px !important; max-height: 400px !important; }
/* El video del logo ya no usa max-height (ver header.php: ahora fija width/height
   explícitos en proporción 32:9 recortada) — este tope solo debe limitar el ANCHO
   ahí, para no chocar con el alto ya calculado. */
.arp-logo-video.arp-logo-img--orienta { max-width: 700px !important; max-height: none !important; }
/* El logo animado NO recibe hover: es un video sólido (sin transparencia real), así que
   el drop-shadow/scale que usan las imágenes se veía como un recuadro rojo feo alrededor
   del rectángulo del video. Queda quieto y fluido, sin ninguna interacción de puntero. */
.arp-logo-partner .arp-logo-img:not(.arp-logo-video):hover { transform: scale(1.05); filter: drop-shadow(0 4px 12px rgba(214, 39, 44, 0.25)); }
[data-theme="dark"] .arp-logo-partner .arp-logo-img:not(.arp-logo-video):hover { transform: scale(1.05); filter: drop-shadow(0 4px 12px rgba(214, 39, 44, 0.35)) !important; }
.arp-logo-video, .arp-logo-video:hover, .arp-logo-video:focus, .arp-logo-video:focus-visible {
	transform: none !important; filter: none !important; outline: none !important; cursor: default;
}
/* El video trae su propio fondo blanco horneado (los códecs de video web no tienen canal
   alfa real). En vez de ponerle una tarjeta/sombra propia — eso se veía como "dos cuadros"
   encima de la franja de marca — se deja totalmente plano (sin fondo, sin borde, sin
   sombra) y se funde con mix-blend-mode: multiply. Por eso .arp-logos-row--single se
   mantiene SIEMPRE blanca (ver más abajo, no cambia con el tema): así el blanco del video
   y el blanco de la franja son literalmente el mismo blanco — cero distinción. */
.arp-logo-video {
	mix-blend-mode: multiply !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	/* Aunque el fondo del video ya viene corregido a blanco casi puro (ver el archivo
	   -corregido.mp4, nivelado con ffmpeg), un rectángulo con blanco "casi" igual TODAVÍA
	   se nota como borde — el ojo es muy sensible a los bordes rectos, aunque el color de
	   adentro sea casi idéntico. Esta máscara difumina el borde a transparencia real
	   (alfa, no color): opaca sobre el logotipo y su sombra, se desvanece del todo bastante
	   antes de llegar al borde del cuadro — así no queda ningún borde recto que notar,
	   pase lo que pase con el tono exacto del fondo horneado en el video.
	*/
	-webkit-mask-image: radial-gradient(ellipse 34% 60% at 50% 50%, #000 60%, transparent 95%);
	mask-image: radial-gradient(ellipse 34% 60% at 50% 50%, #000 60%, transparent 95%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.arp-logo-identity-mark { width: 28px; height: 28px; flex: none; animation: arp-spin-slow 12s linear infinite; }
@keyframes arp-spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Línea roja pulsante decorativa bajo los logos */
.arp-logos-pulse-line {
	height: 3px; background: linear-gradient(90deg, transparent, var(--arp-red), transparent);
	animation: arp-pulse-line 3s ease-in-out infinite;
}
@keyframes arp-pulse-line {
	0%, 100% { opacity: 0.3; transform: scaleX(0.6); }
	50% { opacity: 1; transform: scaleX(1); }
}

/* Tira decorativa vertical de estrellas */
.arp-deco-strip {
	position: absolute; right: 0; top: 0; bottom: 0; width: 40px; overflow: hidden; pointer-events: none; opacity: 0.12;
}
.arp-deco-strip-track {
	display: flex; flex-direction: column; gap: 20px; animation: arp-strip-scroll 20s linear infinite;
}
@keyframes arp-strip-scroll {
	0% { transform: translateY(0); }
	100% { transform: translateY(-50%); }
}
.arp-deco-strip-track img { width: 28px; height: 28px; flex: none; }

.arp-bar-thick { height: 5px; background: var(--arp-ink); margin-bottom: 14px; }
.arp-grain-strip { height: 6px; background: #fff; position: relative; overflow: hidden; margin-bottom: 10px; }
.arp-meta-row { display: flex; flex-wrap: wrap; gap: 22px 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.arp-meta-left { display: flex; flex-wrap: wrap; gap: 22px 16px; align-items: flex-start; }
.arp-meta-pill { display: flex; align-items: center; gap: 10px; }
.arp-meta-dot {
	width: 34px; height: 34px; border-radius: 50%; background: var(--arp-red); position: relative; overflow: hidden;
	display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex: none;
}
.arp-meta-icon { position: relative; width: 17px; height: 17px; display: block; }
.arp-meta-pill p { margin: 0; font-family: 'Anton', sans-serif; font-size: 13px; line-height: 1.2; }
/* Etiqueta + badge en una sola línea (no apiladas) — con dos líneas de alturas
   distintas el ícono circular quedaba descentrado contra el bloque de texto. */
.arp-meta-entrega { display: flex; align-items: center; gap: 8px; }
.arp-meta-label { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--arp-muted); }
.arp-meta-badge { background: var(--arp-ink); color: #fff; font-family: 'Anton', sans-serif; font-size: 16px; padding: 2px 10px; display: inline-block; }
.arp-meta-right { display: flex; align-items: center; gap: 12px; flex: none; }
/* Twinkle sutil y lento — un guiño discreto en la marca, no una distracción. Reservado
   a este único ícono del header (y a los del footer) a propósito: repetirlo en cada
   mini-marca de la interfaz (nav sticky, logo, etc.) se sentiría con demasiado ruido. */
@keyframes arp-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.arp-star-icon { width: 40px; height: 40px; flex: none; animation: arp-twinkle 3.6s ease-in-out infinite; }
.arp-tagline { margin: 0; font-family: 'Anton', sans-serif; font-size: 14px; line-height: 1.15; text-transform: uppercase; text-align: right; }
.arp-tagline-sub { margin: 2px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--arp-muted); text-align: right; }
/* #19 — enlace corto a "Quiénes somos", visible desde el header pero sin competir con la tagline. */
.arp-about-link {
	display: block; width: fit-content; margin: 6px 0 0 auto; font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--arp-red); text-decoration: none; position: relative;
}
.arp-bar-red { height: 3px; background: var(--arp-gradient-orienta); margin-bottom: 16px; }

.arp-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; align-items: stretch; }
.arp-nav-btn {
	font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: .02em; padding: 9px 16px;
	border: 2px solid var(--arp-ink); background: #fff; color: var(--arp-ink); cursor: pointer;
	position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 4px;
	transition: transform .15s ease, box-shadow .15s ease;
}
/* #10 — indicador de sección activa más fuerte: no solo cambia de color, "se levanta"
   con una sombra sólida tipo botón presionado, para que se note de reojo. */
.arp-nav-btn.active { background: var(--arp-gradient-orienta); color: #ffffff; box-shadow: 3px 3px 0 var(--arp-ink); transform: translate(-3px, -3px); }
.arp-nav-grain { position: absolute; inset: 0; pointer-events: none; }

/* #13 — búsqueda visible en el propio nav, no escondida detrás de un ícono. */
.arp-search-form { display: flex; margin-left: auto; border: 2px solid var(--arp-ink); }
.arp-search-input-field {
	border: none; outline: none; font-family: 'Space Grotesk', sans-serif; font-size: 12px;
	padding: 0 10px; width: 160px; background: #fff; color: var(--arp-ink);
}
.arp-search-input-field::placeholder { color: var(--arp-muted); }
.arp-search-submit { border: none; border-left: 2px solid var(--arp-ink); background: var(--arp-chip); color: var(--arp-bone); padding: 0 14px; cursor: pointer; font-size: 13px; }
.arp-search-submit:hover { background: var(--arp-red); }

/* #12 — barra compacta que aparece al hacer scroll pasado el header completo (main.js
   agrega/quita .arp-sticky-visible). Oculta por defecto vía translateY, no display:none,
   para poder animar la entrada. */
.arp-sticky-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: #fff;
	border-bottom: 3px solid var(--arp-ink); box-shadow: 0 6px 18px rgba(20,18,31,.12);
	transform: translateY(-100%); transition: transform .25s ease;
}
.arp-floating-nav { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); opacity: 0; background: rgba(20,20,20,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 40px; padding: 10px 24px; display: flex; gap: 24px; align-items: center; z-index: 9999; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.3); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease; pointer-events: none; }
.arp-floating-nav.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.arp-floating-nav a { color: #fff; text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; transition: color 0.3s ease; position: relative; }
.arp-floating-nav a:hover { color: var(--arp-red); }
.arp-floating-nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--arp-red); transition: width 0.3s ease; }
.arp-floating-nav a:hover::after { width: 100%; }
.arp-floating-nav-cta { background: var(--arp-red); color: #fff !important; padding: 8px 16px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; transition: transform 0.3s ease, background 0.3s ease; }
.arp-floating-nav-cta:hover { background: #fff !important; color: var(--arp-red) !important; transform: scale(1.05); }

/* 30. Panoramic Hero (Video Background) */
.arp-hero-panoramic {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	min-height: 85vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 100px);
	overflow: hidden;
	color: #fff;
	margin-bottom: 60px;
}
.arp-hero-panoramic-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: opacity .55s ease;
}
.arp-hero-panoramic-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(10,10,10,0.85) 100%);
	z-index: 1;
}
.arp-hero-panoramic-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
}
.arp-hero-panoramic-top { margin-bottom: 80px; }
.arp-hero-panoramic-bottom {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 60px;
	align-items: end;
}

/* Modificadores para textos sobre el video oscuro */
.arp-hero-panoramic .arp-hero-headline { color: #fff; }
.arp-hero-panoramic .arp-headline-accent { -webkit-text-stroke: 1.5px rgba(255,255,255,0.7); }
.arp-hero-panoramic .arp-hero-title { color: #fff; font-size: clamp(32px, 4vw, 48px); margin: 0 0 24px; line-height: 1.1; }
.arp-hero-panoramic .arp-hero-body p { color: rgba(255,255,255,0.9); }
.arp-hero-panoramic .arp-hero-author { color: #fff; font-size: 32px; margin-bottom: 12px; }
.arp-hero-panoramic .arp-hero-bio { color: rgba(255,255,255,0.8); }
.arp-hero-panoramic .arp-hero-cta { color: #fff; }
.arp-hero-panoramic .arp-hero-cta::before { background: #fff; }
.arp-hero-panoramic .arp-hero-cta:hover { color: #000; }
.arp-hero-panoramic .arp-hero-territory p { color: rgba(255,255,255,0.6); }

/* Texto libre configurable desde el panel admin — aparece bajo el titular animado.
   En el hero de video (fondo oscuro) va en blanco con borde izquierdo rojo.
   En el hero de imagen la variante --image usa tinta oscura para legibilidad. */
.arp-hero-overlay-text {
	font-family: 'Space Grotesk', sans-serif;
	font-size: clamp(13px, 1.2vw, 16px);
	line-height: 1.65;
	color: rgba(255,255,255,0.92);
	border-left: 3px solid var(--arp-red);
	padding-left: 14px;
	margin: 14px 0 0;
	max-width: 560px;
}
.arp-hero-overlay-text--image {
	color: var(--arp-ink);
}

@media (max-width: 900px) {
	.arp-hero-panoramic-bottom { grid-template-columns: 1fr; gap: 40px; }
}

/* 31. Preview Modal */
.arp-preview-modal {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000;
	display: flex; justify-content: flex-end; align-items: stretch;
	pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
}
.arp-preview-modal[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
.arp-preview-overlay {
	position: absolute; inset: 0; background: rgba(0,0,0,0.6);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.arp-preview-container {
	position: relative; width: 100%; max-width: 800px; background: var(--arp-paper);
	display: flex; flex-direction: column; transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: -10px 0 40px rgba(0,0,0,0.2);
}
.arp-preview-modal[aria-hidden="false"] .arp-preview-container { transform: translateX(0); }
.arp-preview-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 20px 30px; border-bottom: 1px solid rgba(0,0,0,0.05); background: var(--arp-surface);
}
.arp-preview-title { font-size: 16px; margin: 0; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.05em; }
.arp-preview-close {
	background: none; border: none; cursor: pointer; padding: 8px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; color: var(--arp-ink);
	transition: background 0.2s, transform 0.2s;
}
.arp-preview-close:hover { background: rgba(0,0,0,0.05); transform: rotate(90deg); }
.arp-preview-content {
	flex: 1; overflow-y: auto; padding: 40px; color: var(--arp-ink);
	overscroll-behavior: contain; /* evita que el scroll del drawer se propague a la página */
}
.arp-preview-content iframe { width: 100%; height: 100%; border: none; min-height: 60vh; }
.arp-image-preview { display: flex; justify-content: center; }
.arp-image-preview img { max-width: 100%; height: auto; display: block; }
.arp-image-preview-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08); }
.arp-image-preview-caption { font-size: 15px; line-height: 1.5; color: var(--arp-ink); margin: 0 0 6px; }
.arp-image-preview-author { font-size: 12px; font-weight: 700; color: var(--arp-red); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
[data-theme="dark"] .arp-image-preview-meta { border-top-color: rgba(255,255,255,0.08); }
.arp-preview-content .arp-single-meta { display: none; } /* Hide meta elements in preview if needed */

[data-theme="dark"] .arp-preview-header { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .arp-preview-close:hover { background: rgba(255,255,255,0.05); }

.arp-preview-btn {
	background: none; border: 1px solid var(--arp-red); color: var(--arp-red);
	padding: 4px 12px; border-radius: 4px; font-family: 'JetBrains Mono', monospace;
	font-size: 10px; font-weight: 600; cursor: pointer; text-transform: uppercase;
	letter-spacing: 0.05em; transition: all 0.2s ease;
}
.arp-preview-btn:hover { background: var(--arp-red); color: #fff; }

.arp-sticky-nav.arp-sticky-visible { transform: translateY(0); }
.arp-sticky-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px clamp(20px, 4vw, 80px); }
.arp-sticky-mark { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.arp-sticky-mark-icon { width: 22px; height: 22px; }
.arp-sticky-mark span { font-family: 'Anton', sans-serif; font-size: 15px; color: var(--arp-ink); letter-spacing: .01em; }
.arp-sticky-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.arp-sticky-links a { font-family: 'Anton', sans-serif; font-size: 10px; padding: 6px 10px; border: 1.5px solid var(--arp-ink); color: var(--arp-ink); text-decoration: none; }
.arp-sticky-links a.active { background: var(--arp-red); border-color: var(--arp-red); color: #fff; }
@media (max-width: 780px) { .arp-sticky-links { display: none; } }

/* ---------------- Ticker ---------------- */
.arp-ticker { background: var(--arp-ink); padding: 10px 24px; position: relative; overflow: hidden; }
.arp-ticker-track { display: inline-flex; gap: 40px; white-space: nowrap; animation: oh-marquee 22s linear infinite; }
/* Se detiene al pasar el mouse (o al enfocar con teclado) — sin esto, era imposible
   leer una frase completa antes de que se deslizara fuera de pantalla. */
.arp-ticker:hover .arp-ticker-track, .arp-ticker:focus-within .arp-ticker-track { animation-play-state: paused; }
.arp-ticker-item {
	font-family: 'Anton', sans-serif; font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: .02em;
	display: inline-flex; align-items: center; gap: 10px;
}

/* ---------------- Inicio / Hero ---------------- */
.arp-hero-grid { display: grid; grid-template-columns: minmax(260px, 22%) 1fr; gap: 30px; align-items: start; padding-top: 24px; }
.arp-hero-photo-wrap { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--arp-cream); }
/* Parallax sutil: main.js mueve la imagen un poco más lento que el scroll (translateY)
   dentro de este contenedor recortado — el scale(1.08) de base evita que se vean bordes
   vacíos mientras se desplaza. Sin JS (o con reduce-motion), se queda perfectamente
   quieta y normal — no depende de esto para verse bien. */
.arp-hero-photo-wrap img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.arp-hero-photo-bar { height: 4px; background: var(--arp-red); margin-top: 14px; margin-bottom: 8px; }
.arp-hero-author { font-size: 24px; margin: 0 0 10px; letter-spacing: -.01em; }
.arp-hero-bio { font-size: 13px; line-height: 1.6; color: #333; border-left: 3px solid var(--arp-red); padding-left: 12px; margin: 0; }
.arp-hero-territory { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; }
.arp-hero-territory-mark { width: 34px; height: 34px; flex: none; }
.arp-hero-territory p { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #999; letter-spacing: .04em; text-transform: uppercase; }

/* #1 — titular más dramático: el Anton ya tenía el peso para un golpe editorial fuerte,
   pero competía en escala con el subtítulo (arp-hero-title). Ahora hay una jerarquía
   clara entre "la pregunta" (grande, roja) y "la columna que responde" (más chica). */
.arp-hero-headline {
	font-size: 56px; line-height: 1; margin: 0 0 26px; text-transform: uppercase;
	word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;
}
.arp-headline-accent { color: var(--arp-red); display: inline; }
/* Entrada de palabras en cascada, solo al cargar Inicio — la parte fija de la pregunta
   ("¿Qué ha pasado con") se revela palabra por palabra; la categoría rotativa (el
   <span id="arp-headline-category"> que ya cambia por JS cada 2.6s) sigue con su propio
   fundido, sin tocar esa lógica. */
@keyframes arp-word-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.arp-hero-word-reveal { display: inline-block; opacity: 0; animation: arp-word-rise .5s ease forwards; }
.arp-hero-word-reveal:nth-child(1) { animation-delay: .05s; }
.arp-hero-word-reveal:nth-child(2) { animation-delay: .15s; }
.arp-hero-word-reveal:nth-child(3) { animation-delay: .25s; }
.arp-hero-word-reveal:nth-child(4) { animation-delay: .35s; }
.arp-hero-title { font-size: 24px; color: var(--arp-ink); margin: 0 0 16px; }
.arp-hero-body { display: flex; flex-direction: column; gap: 14px; }
.arp-hero-body p { font-size: 14px; line-height: 1.7; color: var(--arp-ink); margin: 0; border-left: 3px solid var(--arp-red); padding-left: 14px; }
/* Botón CTA con barrido de color (el rojo entra desde la izquierda) en vez de un cambio
   de fondo instantáneo — mismo resultado final, entrada más pulida. */
.arp-hero-cta {
	position: relative; overflow: hidden; z-index: 0; display: inline-block; margin-top: 20px;
	font-family: 'Anton', sans-serif; font-size: 13px; background: var(--arp-chip); color: var(--arp-bone);
	border: none; padding: 11px 22px; cursor: pointer;
}
.arp-hero-cta::before {
	content: ''; position: absolute; inset: 0; z-index: -1; background: var(--arp-red);
	transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.arp-hero-cta:hover::before { transform: scaleX(1); }
.arp-hero-cta:hover { color: var(--arp-bone); }

.arp-divider-thick { height: 4px; background: var(--arp-ink); margin: 36px 0 18px; }
.arp-slogan { text-align: center; font-family: 'Anton', sans-serif; font-size: 22px; margin: 0 0 40px; }
.arp-slogan-pill { position: relative; overflow: hidden; display: inline-block; background: var(--arp-gradient-orienta); color: #fff; padding: 2px 10px; }

/* Bloque "Último documento" — justo debajo del lema ¡Desobediencia Civil! en
   Inicio (ver arpadura_home_latest_document_block() en inc/template-tags.php).
   Estilo hermano de .arp-mod-docdest-* (módulo "Documento destacado" en
   modules.css), pero con clases propias en style.css a propósito: style.css se
   carga SIEMPRE, modules.css solo cuando hay módulos configurados — este bloque
   es automático (consulta el documento más reciente), no depende de que exista
   ningún módulo. */
.arp-home-latest-doc { max-width: 960px; margin: 0 auto 48px; padding: 0 20px; }
.arp-home-latest-doc-card {
	position: relative;
	display: flex;
	gap: 24px;
	align-items: flex-start;
	background: var(--arp-cream);
	padding: 32px;
	border-top: 4px solid var(--arp-red);
}
.arp-home-latest-doc-badge {
	flex: none;
	width: 52px;
	height: 52px;
	border: 2px dashed var(--arp-red);
	transform: rotate(-6deg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	font-weight: 700;
	color: var(--arp-red);
	background: var(--arp-paper);
}
.arp-home-latest-doc-body { flex: 1; min-width: 0; }
.arp-home-latest-doc-eyebrow {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--arp-red);
	margin-bottom: 6px;
}
.arp-home-latest-doc-heading {
	font-family: 'Anton', sans-serif;
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1.15;
	color: var(--arp-ink);
	margin: 0 0 10px;
	text-transform: uppercase;
}
.arp-home-latest-doc-text {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--arp-muted);
	margin: 0 0 18px;
}
.arp-home-latest-doc-btn {
	display: inline-block;
	background: var(--arp-ink);
	font-family: 'Anton', sans-serif;
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--arp-bone);
	padding: 11px 22px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease;
}
.arp-home-latest-doc-btn:hover { background: var(--arp-red); }
@media (max-width: 780px) {
	.arp-home-latest-doc-card { flex-direction: column; padding: 24px 20px; gap: 14px; }
	.arp-home-latest-doc-badge { width: 42px; height: 42px; font-size: 10px; }
}

.arp-empty-state { padding: 60px 0; text-align: center; color: var(--arp-muted); font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.arp-empty-state a { display: inline-block; margin-top: 10px; }

/* ---------------- Section title ---------------- */
/* #3 — mismo "kicker" mono rojo en TODAS las secciones (antes solo Inicio lo tenía vía
   ENTREGA Nº/categorías); un número de archivo + regla roja delgada arriba del título
   grande amarran visualmente Columnas/Video/Galería/Documentos/Agenda/Equipo entre sí. */
.arp-section-kicker {
	display: flex; align-items: center; gap: 8px; margin: 34px 0 6px;
	font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--arp-red);
}
.arp-section-kicker::before { content: ''; width: 26px; height: 3px; background: var(--arp-gradient-orienta); flex: none; }
/* #2 — más aire entre secciones: el margen superior ahora lo pone el kicker (34px) en vez
   del propio título, y el borde inferior gana algo de padding para que cada bloque de
   contenido se sienta como su propio "pliego", no un scroll continuo sin pausas. */
.arp-section-title {
	font-size: 34px; margin: 0 0 28px; text-transform: uppercase; border-bottom: 4px solid var(--arp-ink);
	padding-bottom: 14px; display: flex; align-items: center; gap: 10px;
}

/* ---------------- Columnas ---------------- */
.arp-article-list { display: flex; flex-direction: column; }
.arp-article-row {
	cursor: pointer; padding: 18px 10px; margin: 0 -10px; border-top: 2px solid var(--arp-ink); display: grid;
	grid-template-columns: 56px 130px 1fr; gap: 20px; align-items: start; color: inherit;
	transition: background .18s ease, transform .18s ease;
}
/* #14 — hover más expresivo: la fila se desliza un poco y gana un fondo crema, en vez de
   depender solo del cursor:pointer para comunicar que es clicable. */
.arp-article-row:hover { background: var(--arp-cream); transform: translateX(4px); }
.arp-article-num { font-family: 'Anton', sans-serif; font-size: 30px; color: #eee; -webkit-text-stroke: 1.5px var(--arp-ink); line-height: 1; }
.arp-article-cat { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; transition: filter .18s ease; }
.arp-article-row:hover .arp-article-cat { filter: brightness(1.2); }
.arp-article-row h3 { font-size: 20px; margin: 0 0 6px; }
.arp-article-row p { font-size: 13px; color: #444; margin: 0; }
/* #17 — fecha de publicación visible en la tarjeta, no solo en la columna abierta. */
.arp-card-date { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--arp-muted) !important; margin-top: 6px !important; }

/* #11 — breadcrumb de contexto arriba del botón "volver", para orientar sin depender
   solo de un único botón grande. */
.arp-breadcrumb-trail { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--arp-muted); margin: 20px 0 0; text-transform: uppercase; letter-spacing: .02em; }
.arp-breadcrumb-trail a { color: var(--arp-muted); text-decoration: none; position: relative; }
.arp-breadcrumb-trail a:hover { color: var(--arp-red); }
.arp-breadcrumb-trail span { color: var(--arp-ink); font-weight: 600; }

/* Subrayado que crece desde la izquierda al pasar el mouse, en vez de una línea fija
   siempre encendida — reservado para enlaces de texto "silenciosos" (breadcrumb, este
   enlace corto), no para el cuerpo editorial donde el subrayado permanente sigue
   ayudando a distinguir un link en medio de un párrafo. */
.arp-about-link::after, .arp-breadcrumb-trail a::after {
	content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: right; transition: transform .25s ease;
}
.arp-about-link:hover::after, .arp-breadcrumb-trail a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Animaciones simétricas de entrada y salida para páginas de artículos / vistas */
@keyframes arp-article-entrance {
	0%   { opacity: 0; transform: translateY(14px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes arp-article-exit {
	0%   { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-14px); }
}

.arp-single-article-wrap {
	animation: arp-article-entrance .3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.arp-single-article-wrap.arp-article-exiting {
	animation: arp-article-exit .2s cubic-bezier(0.7, 0, 0.84, 0) forwards !important;
	pointer-events: none !important;
}

.arp-back-btn {
	display: inline-block; font-family: 'Anton', sans-serif; font-size: 12px; background: none;
	border: 2px solid var(--arp-ink); padding: 8px 14px; cursor: pointer; margin: 10px 0 20px; color: var(--arp-ink);
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.arp-back-btn:hover { background: var(--arp-ink); color: #fff; transform: translateX(-3px); }

/* Envoltorio compartido de las páginas individuales de Video/Galería/Documentos/Agenda/
   Equipo/Arte y Cultura/Atlántico para la Vida — reusan el mismo componente de tarjeta/
   fila que ya se ve en su archivo (arpadura_video_card, arpadura_gallery_card, etc.),
   solo centrado como el contenido de una página real en vez de un ítem de grilla. */
.arp-single-card-wrap { animation: arp-article-entrance .3s cubic-bezier(0.16, 1, 0.3, 1) both; padding-bottom: 20px; }
.arp-single-card-inner { max-width: 900px; margin: 0 auto; }
.arp-single-card-inner--narrow { max-width: 480px; }
/* Página individual de Video: se quiere sentir como "vista de reproductor" — un solo
   clic en play y listo, sin tener que ir a buscar el botón de pantalla completa
   primero porque el reproductor cargó chico. Usa casi todo el ancho del contenido
   en vez del límite angosto de tarjeta (900px), igual que una página de "ver video"
   real (YouTube, Vimeo). */
.arp-single-card-inner--wide { max-width: 1120px; }
.arp-single-card-inner--wide .arp-video-thumb { aspect-ratio: 16/9; }

/* Modo cine para la página individual de Video. Ningún navegador permite entrar a
   pantalla completa REAL sin que la persona haga clic primero (es una restricción de
   seguridad del navegador — ni YouTube, ni Vimeo, ni nadie puede saltársela desde un
   link compartido). Esto es lo más cerca que se puede llegar sin ese clic: un overlay
   fijo que cubre TODO el viewport apenas carga la página, con el video grande arriba
   listo para reproducir. El botón ⛶ sí dispara pantalla completa real del navegador,
   con el único clic que el navegador exige. */
.arp-video-theater {
	position: fixed; inset: 0; z-index: 50000; background: #0A0A0F;
	display: flex; flex-direction: column; overflow-y: auto;
}
.arp-video-theater-topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 20px; flex: none;
}
.arp-video-theater-back {
	display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none;
	font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: .02em;
	background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
	padding: 8px 14px; transition: background .15s ease;
}
.arp-video-theater-back:hover { background: rgba(255,255,255,0.18); color: #fff; }
.arp-video-theater-fullscreen-btn {
	display: inline-flex; align-items: center; gap: 6px; color: #fff; background: var(--arp-red);
	border: none; border-radius: 6px; padding: 8px 14px; font-family: 'Anton', sans-serif; font-size: 12px;
	letter-spacing: .02em; cursor: pointer; transition: background .15s ease;
}
.arp-video-theater-fullscreen-btn:hover { background: #b91f24; }
.arp-video-theater-stage {
	flex: none; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px;
	aspect-ratio: 16/9; max-height: 82vh; position: relative; background: #000;
}
.arp-video-theater-stage video, .arp-video-theater-stage iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.arp-video-theater-info {
	max-width: 1400px; margin: 0 auto; padding: 20px 20px 40px; color: #fff; width: 100%; box-sizing: border-box;
}
.arp-video-theater-info h1 { font-family: 'Anton', sans-serif; font-size: 24px; text-transform: uppercase; margin: 0 0 8px; color: #fff; }
.arp-video-theater-info p { color: rgba(255,255,255,0.75); margin: 0 0 6px; }
.arp-video-theater-info .arp-card-date { color: rgba(255,255,255,0.5); }
.arp-video-theater-info .arp-video-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.arp-video-theater-info .arp-social-bar,
.arp-video-theater-info .arp-share-bar { margin-top: 14px; }
/* Los botones de "me gusta"/comentarios/compartir están pensados para fondo claro
   (texto oscuro, algunos con fondo casi blanco de por sí — .arp-share-toggle). Sobre
   el negro del modo cine hay que voltear los tres: fondo transparente, borde y texto
   claros, para que se lean en vez de aparecer como un bloque blanco o texto invisible. */
.arp-video-theater-info .arp-like-btn,
.arp-video-theater-info .arp-comment-toggle,
.arp-video-theater-info .arp-share-toggle {
	background: rgba(255,255,255,0.06) !important;
	color: #fff !important;
	border-color: rgba(255,255,255,0.3) !important;
}
.arp-video-theater-info .arp-like-btn:hover,
.arp-video-theater-info .arp-comment-toggle:hover { border-color: var(--arp-red); color: #fff; background: var(--arp-red) !important; }
.arp-video-theater-info .arp-share-toggle:hover { background: var(--arp-red) !important; color: #fff !important; }
.arp-video-theater-info .arp-like-btn--active { background: var(--arp-red) !important; border-color: var(--arp-red); }
.arp-video-theater-info .arp-share-btns { background: rgba(255,255,255,0.06); border-radius: 12px; }
/* El panel de comentarios no trae fondo propio (hereda el negro del cine) pero sus
   campos de formulario (input/textarea) sí son blancos de por sí — solo el texto
   "suelto" (nombre del hilo, contador) necesita pasar a claro; los campos de
   formulario ya son legibles tal cual, con su propio fondo blanco y texto oscuro. */
.arp-video-theater-info .arp-comments-panel { color: #fff; }
.arp-video-theater-info .arp-comments-panel-inner { border-top-color: rgba(255,255,255,0.2); }
@media (max-width: 720px) {
	.arp-video-theater-stage { max-height: none; }
}
.arp-single-card-inner .arp-video-card,
.arp-single-card-inner .arp-gallery-card,
.arp-single-card-inner .arp-team-card { width: 100%; }
.arp-article-cat-badge { display: inline-block; background: var(--arp-gradient-orienta); color: #fff; font-family: 'Anton', sans-serif; font-size: 11px; padding: 4px 10px; }
.arp-article-title-full { font-size: 36px; margin: 12px 0; text-transform: uppercase; max-width: 900px; }
.arp-article-byline { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--arp-muted); margin: 0 0 24px; }
.arp-article-layout { display: flex; gap: 80px; align-items: flex-start; max-width: 1300px; margin: 0 auto 40px 0; }
.arp-article-body { flex: 1; max-width: 780px; min-width: 0; }
.arp-article-body p { font-size: 15px; line-height: 1.75; color: var(--arp-ink); margin: 0 0 14px; border-left: 3px solid var(--arp-red); padding-left: 14px; }
.arp-article-sidebar { width: var(--side-size, 440px); flex-shrink: 0; align-self: flex-start; height: max-content; position: -webkit-sticky; position: sticky; top: 120px; }
.arp-sidebar-img { width: 100%; height: auto; border: 2px solid #14121F; display: block; }
.arp-sidebar-caption { margin: 12px 0 0; font-size: 13px; color: var(--arp-muted); line-height: 1.5; font-style: italic; border-left: 2px solid #d5d3ca; padding-left: 10px; }

@media (max-width: 992px) {
	.arp-article-layout { flex-direction: column; gap: 30px; }
	.arp-article-sidebar { width: 100% !important; max-width: 600px; order: -1; position: static; }
}


/* #13 — resultados de búsqueda: mismo layout de fila que Columnas pero sin la columna
   de número, con un badge de tipo de contenido a la izquierda. */
.arp-search-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 10px; margin: 0 -10px; border-top: 2px solid var(--arp-ink); cursor: pointer; color: inherit; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.arp-search-row:hover { background: var(--arp-cream); transform: translateX(4px); }
.arp-search-type-badge { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: #fff; padding: 5px 9px; white-space: nowrap; margin-top: 2px; }
.arp-search-row h3 { font-size: 18px; margin: 0 0 6px; }
.arp-search-row p { font-size: 13px; color: #444; margin: 0; }

/* #19 — página estática genérica (ej. "Quiénes somos"). */
.arp-page-content { max-width: 780px; }
.arp-page-content p { font-size: 15px; line-height: 1.75; color: var(--arp-ink); margin: 0 0 14px; }
.arp-page-content h2, .arp-page-content h3 { margin: 26px 0 10px; text-transform: uppercase; }
.arp-page-content a { text-decoration: underline; }

/* ---------------- Video ---------------- */
.arp-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; align-items: start; }
.arp-video-card { border: 2px solid var(--arp-ink); transition: transform .25s ease, box-shadow .25s ease; display: block; color: inherit; align-self: start; }
.arp-video-thumb { aspect-ratio: 16/9; background: var(--arp-ink); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.arp-video-card[data-video-embed] .arp-video-thumb { cursor: pointer; }
.arp-video-play { position: relative; color: var(--arp-red); font-family: 'Anton', sans-serif; font-size: 16px; border-radius: 50%; }
/* Pulso sutil que invita al clic — solo en cápsulas realmente reproducibles (con
   data-video-embed); se apaga solo porque el ▶ se borra del DOM en cuanto se reproduce. */
@keyframes arp-play-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,39,44,.45); } 50% { box-shadow: 0 0 0 12px rgba(214,39,44,0); } }
.arp-video-card[data-video-embed] .arp-video-play { animation: arp-play-pulse 2.4s ease-in-out infinite; }
.arp-video-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.arp-video-thumb.arp-video-playing { cursor: default; }
.arp-video-body { padding: 14px; }
.arp-video-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--arp-red); font-weight: 700; }
.arp-video-body h3 { font-size: 16px; margin: 4px 0; }
.arp-video-body p { font-size: 12px; color: var(--arp-muted); margin: 0; }

/* ---------------- Galería ---------------- */
.arp-gallery-masonry {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
}
@media (min-width: 1500px) { .arp-gallery-masonry { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1900px) { .arp-gallery-masonry { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px) { .arp-gallery-masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .arp-gallery-masonry { grid-template-columns: 1fr; } }
.arp-gallery-card { border: 2px solid var(--arp-ink); padding: 10px; align-self: start; transition: transform .2s ease, box-shadow .2s ease; }
/* #14 — hover expresivo también en Galería/Equipo. */
.arp-gallery-card:hover, .arp-team-card:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--arp-ink); }
/* #8 — esquina "rasgada" en vez de un rectángulo perfecto: pequeño eco del collage de
   recortes de periódico del hero, sin ir tan lejos como un borde festoneado completo. */
.arp-gallery-img-wrap {
	position: relative; overflow: hidden; background: var(--arp-cream);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
/* La miniatura es ahora un <button> que abre la foto completa (arp-preview-btn) —
   anula el look de "botón rojo" genérico para que se vea igual que antes. */
button.arp-gallery-img-wrap.arp-preview-btn {
	display: block; width: 100%; margin: 0; padding: 0; border: none; border-radius: 0;
	font: inherit; letter-spacing: normal; text-transform: none; color: inherit;
	background: var(--arp-cream); cursor: zoom-in;
}
button.arp-gallery-img-wrap.arp-preview-btn:hover { background: var(--arp-cream); color: inherit; }
.arp-gallery-expand-hint {
	position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
	background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center;
	opacity: 0; transform: scale(0.8); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
button.arp-gallery-img-wrap.arp-preview-btn:hover .arp-gallery-expand-hint,
button.arp-gallery-img-wrap.arp-preview-btn:focus-visible .arp-gallery-expand-hint { opacity: 1; transform: scale(1); }
/* Shimmer mientras la imagen carga (main.js agrega/quita esta clase según el evento
   load/error del <img>) + "blur-up": la foto entra un poco borrosa y agrandada, y se
   asienta nítida — se siente más ligero que un salto brusco de vacío a imagen. */
@keyframes arp-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.arp-img-loading { background-image: linear-gradient(90deg, var(--arp-cream) 25%, #EAE6D6 37%, var(--arp-cream) 63%); background-size: 400% 100%; animation: arp-shimmer 1.4s ease infinite; }
/* #7 — duotono editorial sutil: las fotos bajan de saturación por defecto y recuperan
   color completo al pasar el mouse — trato consistente en toda la sección, sin un
   overlay de color fuerte que se vería fuera de lugar sobre fotos de personas reales. */
.arp-gallery-img-wrap img {
	width: 100%; height: 100%; object-fit: cover; filter: grayscale(45%) contrast(1.05) blur(10px);
	transform: scale(1.04); transition: filter .5s ease, transform .5s ease;
}
.arp-gallery-img-wrap img.arp-img-loaded { filter: grayscale(45%) contrast(1.05) blur(0); transform: scale(1); }
.arp-gallery-card:hover .arp-gallery-img-wrap img.arp-img-loaded { filter: grayscale(0%) blur(0); }
.arp-gallery-card h3 { font-size: 14px; margin: 8px 0 2px; }
.arp-gallery-card p { font-size: 11px; color: var(--arp-red); font-weight: 700; margin: 0; }
.arp-gallery-caption { color: #444 !important; font-weight: 400 !important; margin: 2px 0 4px !important; line-height: 1.4; }

/* #9 — placeholder con grano + ícono de marca en vez de una caja de texto plana. */
.arp-media-placeholder {
	position: relative; width: 100%; height: 100%; min-height: 90px; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--arp-cream);
}
.arp-media-placeholder-icon { position: relative; width: 46px; height: auto; opacity: .8; }
.arp-media-placeholder-label { position: relative; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #999; text-align: center; padding: 0 8px; }

/* ---------------- Documentos ---------------- */
/* #5 — grano rojo tenue de fondo en listas largas de solo texto, para que no se sientan
   tan planas. Va en un ::before aparte (no directo en el contenedor) y las filas llevan
   su propio fondo sólido: así el punteado queda detrás del texto, nunca encima —
   la primera versión lo pintaba a opacidad de bloque completo y tapaba las palabras. */
.arp-doc-list, .arp-event-list { position: relative; padding-top: 4px; }
.arp-doc-list::before, .arp-event-list::before {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: repeating-radial-gradient(circle at 3px 3px, var(--arp-red) 0 1.6px, transparent 2px 8px);
	background-size: 8px 8px; opacity: .05;
}
/* Regla de oro: la fila tiene exactamente DOS bloques flex (el contenido a la
   izquierda y .arp-doc-row-actions a la derecha) — nunca más de dos, para que
   "space-between" tenga un resultado predecible. Con 3-4 piezas sueltas compitiendo
   por el mismo espacio, un título largo en una fila y uno corto en la siguiente hacían
   que los botones aterrizaran en posiciones distintas fila a fila (justo el problema
   reportado). Con dos bloques nada más, si no alcanza el ancho, TODO el bloque de
   acciones baja como una sola unidad — nunca se parte a la mitad. */
.arp-doc-row {
	position: relative; z-index: 1; background: var(--arp-paper);
	display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap;
	padding: 16px 10px; margin: 0 -10px; border-top: 2px solid var(--arp-ink); transition: background .18s ease;
}
.arp-doc-row:hover { background: var(--arp-cream); }
.arp-doc-left { display: flex; align-items: center; gap: 14px; flex: 1 1 240px; min-width: 0; }
/* Bloque único de acciones: VISTA PREVIA + DESCARGAR + Me gusta + Compartir, siempre
   juntos, siempre en este orden, con el mismo espaciado — ver comentario arriba. */
.arp-doc-row-actions { display: flex; align-items: center; gap: 14px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.arp-doc-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.arp-doc-row-actions .arp-social-bar,
.arp-doc-row-actions .arp-share-bar { flex: none; }
.arp-doc-badge {
	position: relative; width: 40px; height: 40px; flex: none; border: 2px dashed var(--arp-red); transform: rotate(-6deg);
	display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--arp-red); font-weight: 700;
	transition: all .25s ease;
}
.arp-doc-badge.has-thumb, .arp-mod-doclist-badge.has-thumb {
	width: 48px; height: 62px; border: 1.5px solid var(--arp-ink); transform: none; padding: 2px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); overflow: hidden; border-radius: 4px;
}
/* Foto de un documento "escrito a mano" (sin PDF) — siempre en blanco y negro, igual
   que el resto de fotos editoriales del sitio (ver .arp-gallery-img-wrap, .arp-team-img-wrap). */
.arp-doc-badge.has-thumb.is-photo img { filter: grayscale(100%); }
.arp-doc-row h3 { margin: 0 0 3px; font-size: 15px; }
/* Color de título elegible (negro/rojo) para documentos — field_arp_doc_title_color. */
.arp-doc-title-red { color: var(--arp-red) !important; }
.arp-official-tag { display: inline-block; background: var(--arp-red); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 2px 6px; vertical-align: middle; }
.arp-doc-row p { margin: 0; font-size: 12px; color: var(--arp-muted); }
.arp-doc-download {
	position: relative; overflow: hidden; display: inline-block; background: var(--arp-chip); font-family: 'Anton', sans-serif;
	font-size: 11px; color: var(--arp-bone); padding: 8px 16px; white-space: nowrap;
}
.arp-doc-download--disabled { background: #ccc; color: #666; }

/* ---------------- Agenda ---------------- */
.arp-event-list { display: flex; flex-direction: column; padding-left: 22px; border-left: 2px solid var(--arp-ink); }
.arp-event-row { position: relative; z-index: 1; background: var(--arp-paper); display: flex; gap: 16px; align-items: center; padding: 16px 10px; margin: 0 -10px; transition: background .18s ease; }
.arp-event-row:hover { background: var(--arp-cream); }
/* El próximo evento en el tiempo (el primero cuya fecha aún no pasó) se destaca con un
   resplandor lento — para que el lector encuentre "qué sigue" sin tener que leer fechas
   una por una. archive-arp_evento.php decide cuál es, arpadura_event_row() pinta la clase. */
@keyframes arp-next-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,39,44,.22); } 50% { box-shadow: 0 0 0 9px rgba(214,39,44,0); } }
.arp-event-row--next { background: rgba(214,39,44,.05); border-radius: 4px; animation: arp-next-glow 2.8s ease-in-out infinite; }
.arp-event-next-badge {
	position: absolute; top: -9px; left: 10px; z-index: 2; background: var(--arp-red); color: #fff;
	font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px;
}
.arp-event-mark { position: absolute; left: -27px; top: 24px; z-index: 2; }
.arp-event-date { background: var(--arp-chip); color: var(--arp-bone); font-family: 'Anton', sans-serif; font-size: 12px; padding: 10px 16px; white-space: nowrap; }
.arp-event-row h4 { margin: 0 0 3px; font-size: 16px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.arp-event-row p { margin: 0; font-size: 12px; color: var(--arp-muted); }

/* ---------------- Equipo ---------------- */
.arp-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.arp-team-card { border: 2px solid var(--arp-ink); padding: 18px; }
.arp-team-img-wrap { position: relative; overflow: hidden; margin-bottom: 12px; aspect-ratio: 1; background: var(--arp-cream); }
.arp-team-img-wrap img {
	width: 100%; height: 100%; object-fit: cover; filter: grayscale(45%) contrast(1.05) blur(10px);
	transform: scale(1.04); transition: filter .5s ease, transform .5s ease;
}
.arp-team-img-wrap img.arp-img-loaded { filter: grayscale(45%) contrast(1.05) blur(0); transform: scale(1); }
.arp-team-card:hover .arp-team-img-wrap img.arp-img-loaded { filter: grayscale(0%) blur(0); }
.arp-team-card h3 { margin: 0 0 4px; font-size: 15px; }
.arp-team-role {
	margin: 0 0 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--arp-red); font-weight: 700;
	border-bottom: 2px solid var(--arp-red); padding-bottom: 6px; display: inline-block;
}
.arp-team-bio { margin: 0; font-size: 12px; color: var(--arp-muted); }

/* ---------------- Footer ---------------- */
.arp-footer {
	border-top: 5px solid var(--arp-ink); padding: 20px clamp(20px, 4vw, 80px); width: 100%; margin: 0 auto;
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
	font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--arp-muted); background: var(--arp-paper);
}
.arp-footer-left { display: flex; align-items: center; gap: 14px; }
.arp-footer-icon { width: 44px; height: 44px; flex: none; animation: arp-twinkle 3.6s ease-in-out infinite; }
.arp-footer-icon--wide { width: 60px; height: 34px; animation-delay: .8s; }
.arp-footer-admin { text-decoration: none; }

@media (max-width: 720px) {
	.arp-hero-grid { grid-template-columns: 1fr; }
	.arp-hero-headline { font-size: 26px; }
	.arp-article-row { grid-template-columns: 40px 1fr; }
	.arp-article-cat { grid-column: 1 / -1; }
	.arp-article-row > div { grid-column: 2; }
	
	/* Optimización y centrado perfecto de cabecera y logos en móviles */
	.arp-header { padding: 20px 16px 0; }
	.arp-logos-row, .arp-logos-row--single {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		width: 100% !important;
		gap: 20px !important;
		padding: 20px 16px !important;
		border-left: none !important;
		border-top: 4px solid var(--arp-red) !important;
	}
	.arp-logo-identity {
		width: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 auto !important;
	}
	.arp-logo-divider { display: none !important; }
	.arp-logo-partner, .arp-logo-partner--center, .arp-logo-partner--right {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		margin: 0 auto !important;
		justify-self: center !important;
	}
	.arp-logo-kicker {
		text-align: center !important;
		margin: 0 auto 6px !important;
		display: block !important;
		width: 100% !important;
	}
	.arp-logo-img, .arp-logo-partner .arp-logo-img {
		max-width: 260px !important;
		width: 100% !important;
		height: auto !important;
		max-height: 110px !important;
		object-fit: contain !important;
		margin: 0 auto !important;
		display: block !important;
	}
	/* El video del logo NO puede usar height:auto como el resto de logos — con auto
	   recupera su relación 16:9 nativa y se pierde el recorte 32:9 (el mismo marco
	   ancho y vacío que se quitó en escritorio volvería a aparecer en el celular). Alto
	   fijo en la misma proporción recortada, en vez de heredar la regla de arriba. */
	.arp-logo-video.arp-logo-img {
		height: 73px !important;
		max-height: none !important;
		object-fit: cover !important;
	}
	
	.arp-meta-row { flex-direction: column; gap: 32px; align-items: flex-start; }
	.arp-meta-left { flex-direction: column; gap: 16px; align-items: flex-start; }
	.arp-tagline, .arp-tagline-sub { text-align: left; }
	.arp-about-link { margin: 8px auto 0 0; }
	
	/* Menú: 3 columnas iguales. width:100% es clave — sin él el inline-flex
	   del botón sólo toma el ancho de su contenido y la celda del grid queda
	   vacía; con él el botón llena exactamente su 1fr. transform:none en
	   .active evita que el desplazamiento de 3px desborde la columna. */
	.arp-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.arp-nav-btn {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
		padding: 12px 4px;
		font-size: 11px;
		letter-spacing: .01em;
		word-break: break-word;
	}
	.arp-nav-btn.active { transform: none; box-shadow: inset 0 0 0 3px rgba(0,0,0,.35); }
	.arp-smart-search-wrap { grid-column: 1 / -1; margin-top: 4px; }
}

/* ---------------- Social: "me gusta" + comentarios ---------------- */
.arp-social-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.arp-like-btn {
	display: flex; align-items: center; gap: 6px; background: none; border: 1.5px solid var(--arp-ink);
	border-radius: 20px; padding: 5px 12px; font-family: 'Space Grotesk', sans-serif; font-size: 12px;
	font-weight: 600; color: var(--arp-ink); cursor: pointer; transition: all .15s ease;
}
.arp-like-btn:hover { border-color: var(--arp-red); color: var(--arp-red); }
.arp-like-btn:disabled { opacity: .6; cursor: default; }
.arp-like-btn--active { border-color: var(--arp-red); background: var(--arp-red); color: #fff; }
/* #16 — micro-rebote en el corazón al dar "me gusta" (se dispara solo, una vez, cuando
   JS agrega la clase --active tras la respuesta del servidor). */
@keyframes arp-like-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
.arp-like-btn--active .arp-like-icon { display: inline-block; animation: arp-like-pop .4s cubic-bezier(.34,1.56,.64,1); }

/* ---------------- Barra de compartir en redes sociales ---------------- */
.arp-share-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}
/* Un solo botón "Compartir" en vez de los 5 íconos siempre visibles — al tocarlo,
   despliega el menú con las redes. Una barra a la vez: abrir una cierra las demás
   (ver el handler delegado en main.js), y un clic fuera de cualquier barra abierta
   también la cierra. */
.arp-share-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #F7F5F0;
	color: #14121F;
	border: 1.5px solid transparent;
	border-radius: 20px;
	padding: 7px 14px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
	flex-shrink: 0;
}
.arp-share-toggle svg { width: 14px; height: 14px; flex-shrink: 0; }
.arp-share-toggle:hover { background: #14121F; color: #fff; transform: translateY(-2px); }
.arp-share-bar.arp-share-open .arp-share-toggle { background: var(--arp-red); color: #fff; }
@keyframes arp-share-pop { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.arp-share-btns {
	display: none;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}
.arp-share-bar.arp-share-open .arp-share-btns {
	display: flex;
	animation: arp-share-pop .18s ease both;
}
.arp-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
	background: #F7F5F0;
	color: #14121F;
	text-decoration: none;
	flex-shrink: 0;
}
.arp-share-btn svg { width: 16px; height: 16px; display: block; }
.arp-share-btn:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
/* WhatsApp — verde */
.arp-share-btn.arp-share-wa { background: #25D366; color: #fff; border-color: #25D366; }
.arp-share-btn.arp-share-wa:hover { background: #1da851; border-color: #1da851; }
/* Facebook — azul */
.arp-share-btn.arp-share-fb { background: #1877F2; color: #fff; border-color: #1877F2; }
.arp-share-btn.arp-share-fb:hover { background: #155fd1; border-color: #155fd1; }
/* X / Twitter — negro */
.arp-share-btn.arp-share-x { background: #14121F; color: #fff; border-color: #14121F; }
.arp-share-btn.arp-share-x:hover { background: #000; border-color: #000; }
/* Instagram — degradado */
.arp-share-btn.arp-share-ig { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); color: #fff; border-color: transparent; }
.arp-share-btn.arp-share-ig:hover { opacity: .88; }
/* Copiar enlace */
.arp-share-btn.arp-share-copy { background: #EBE8DE; color: #14121F; border-color: #DAD5C4; }
.arp-share-btn.arp-share-copy:hover { background: #14121F; color: #fff; border-color: #14121F; }
.arp-share-btn.arp-share-copy--done { background: #28a745; color: #fff; border-color: #28a745; }

/* --- Modal tarjeta Instagram --- */
.arp-ig-modal-overlay {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(0,0,0,.72);
	backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0; pointer-events: none;
	transition: opacity .25s ease;
}
.arp-ig-modal-overlay.arp-open { opacity: 1; pointer-events: auto; }
.arp-ig-modal {
	background: #fff;
	border-radius: 16px;
	max-width: 420px;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0,0,0,.35);
	transform: scale(.94);
	transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.arp-ig-modal-overlay.arp-open .arp-ig-modal { transform: scale(1); }
.arp-ig-card {
	/* La tarjeta cuadrada 1:1 con diseño editorial de ARPADURA */
	aspect-ratio: 1 / 1;
	background: linear-gradient(160deg, #14121F 0%, #44076F 55%, #D6272C 100%);
	display: flex; flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
	position: relative;
	overflow: hidden;
}
.arp-ig-card::before {
	/* Patrón de textura */
	content: '';
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
	background-size: 20px 20px;
}
.arp-ig-card-badge {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
	margin-bottom: 8px;
	position: relative;
}
.arp-ig-card-title {
	font-family: 'Anton', sans-serif;
	font-size: clamp(22px, 5vw, 30px);
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 6px;
	position: relative;
}
.arp-ig-card-author {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	color: rgba(255,255,255,.75);
	position: relative;
}
.arp-ig-card-brand {
	position: absolute;
	top: 20px; right: 20px;
	font-family: 'Anton', sans-serif;
	font-size: 15px;
	letter-spacing: .05em;
	color: rgba(255,255,255,.85);
}
.arp-ig-modal-actions {
	padding: 16px 20px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	border-top: 1px solid #EBE8DE;
}
.arp-ig-modal-hint {
	padding: 10px 20px 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 11px;
	color: #9A9689;
	text-align: center;
}
.arp-ig-close-btn {
	background: none; border: 1.5px solid #14121F; border-radius: 8px;
	padding: 8px 14px; cursor: pointer; font-family: 'Space Grotesk', sans-serif;
	font-size: 12px; font-weight: 600; color: #14121F; transition: all .15s;
}
.arp-ig-close-btn:hover { background: #14121F; color: #fff; }

/* #15 — stagger de aparición en grillas/listas: cada tarjeta entra con un poco más de
   retraso que la anterior en vez de que toda la sección aparezca de golpe. Se aplica
   sobre .oh-reveal (ya usa animation:oh-rise), así que no toca la lógica de main.js. */
.arp-stagger > .oh-reveal:nth-child(1) { animation-delay: .02s; }
.arp-stagger > .oh-reveal:nth-child(2) { animation-delay: .08s; }
.arp-stagger > .oh-reveal:nth-child(3) { animation-delay: .14s; }
.arp-stagger > .oh-reveal:nth-child(4) { animation-delay: .20s; }
.arp-stagger > .oh-reveal:nth-child(5) { animation-delay: .26s; }
.arp-stagger > .oh-reveal:nth-child(6) { animation-delay: .32s; }
.arp-stagger > .oh-reveal:nth-child(7) { animation-delay: .38s; }
.arp-stagger > .oh-reveal:nth-child(8) { animation-delay: .44s; }
.arp-stagger > .oh-reveal:nth-child(n+9) { animation-delay: .5s; }
.arp-comment-toggle {
	background: none; border: 1.5px solid var(--arp-ink); border-radius: 20px; padding: 5px 12px;
	font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; color: var(--arp-ink);
	cursor: pointer; transition: all .15s ease;
}
.arp-comment-toggle:hover { border-color: var(--arp-red); color: var(--arp-red); }

/* Expansión suave (antes era un salto abrupto con el atributo hidden): el contenedor
   anima su fila de grid de 0fr a 1fr, y el interior se recorta con overflow:hidden
   mientras tanto — truco CSS estándar para animar hacia "altura automática". */
.arp-comments-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.arp-comments-panel.arp-open { grid-template-rows: 1fr; }
.arp-comments-panel-inner { overflow: hidden; margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed #DAD5C4; }
.arp-comments-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 12px;
	max-height: 240px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--arp-red) transparent;
}
.arp-comments-list::-webkit-scrollbar {
	width: 5px;
}
.arp-comments-list::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.04);
	border-radius: 4px;
}
.arp-comments-list::-webkit-scrollbar-thumb {
	background: var(--arp-red);
	border-radius: 4px;
}
.arp-comment-item { padding: 10px 12px; background: var(--arp-cream); border-radius: 8px; }
.arp-comment-meta { margin: 0 0 4px; font-size: 11px; color: #6B6858; font-family: 'JetBrains Mono', monospace; }
.arp-comment-meta strong { color: var(--arp-ink); font-family: 'Space Grotesk', sans-serif; }
.arp-comment-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--arp-ink); word-break: break-word; }
.arp-comments-empty, .arp-comments-loading { margin: 0; font-size: 12px; color: var(--arp-muted); font-style: italic; }

.arp-comment-form { display: flex; flex-direction: column; gap: 8px; }
.arp-comment-name, .arp-comment-text-input {
	width: 100%; padding: 10px 12px; border: 1.5px solid #E3E0D2; border-radius: 8px;
	font-family: 'Space Grotesk', sans-serif; font-size: 13px; background: #FAFAF8; box-sizing: border-box;
}
.arp-comment-text-input { resize: vertical; }
.arp-comment-name:focus, .arp-comment-text-input:focus { outline: none; border-color: var(--arp-red); }
.arp-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.arp-comment-submit {
	align-self: flex-start; background: var(--arp-chip); color: var(--arp-bone); border: none; border-radius: 20px;
	padding: 8px 18px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
	cursor: pointer; transition: background .15s ease;
}
.arp-comment-submit:hover { background: var(--arp-red); }
.arp-comment-submit:disabled { opacity: .6; cursor: default; }
.arp-comment-status { margin: 4px 0 0; font-size: 11px; color: var(--arp-red); min-height: 14px; }

@media (max-width: 480px) {
	.arp-header { padding: 20px 16px 0; }
	.arp-main { padding: 0 16px 60px; }
	.arp-logo-img { width: auto; max-width: 160px; height: auto; max-height: 120px; object-fit: contain; }
	.arp-meta-pill p { font-size: 12px; }
	.arp-tagline { font-size: 12px; }
	.arp-hero-headline { font-size: 21px; }
	.arp-hero-title { font-size: 21px; }
	.arp-article-title-full { font-size: 26px; }
	.arp-section-title { font-size: 26px; }
	.arp-slogan { font-size: 17px; }
	.arp-doc-row { flex-direction: column; align-items: flex-start; }
	.arp-doc-row-actions { justify-content: flex-start; width: 100%; }
	.arp-footer { flex-direction: column; align-items: flex-start; text-align: left; }
	.arp-search-form { flex: 1 1 100%; margin-left: 0; margin-top: 4px; }
	.arp-search-input-field { flex: 1; width: auto; }
}

/* ---------------- Barra de progreso de lectura (solo columna individual) ---------------- */
.arp-read-progress {
	position: fixed; top: 0; left: 0; height: 4px; width: 0%; background: var(--arp-gradient-orienta);
	z-index: 600; transition: width .1s linear; pointer-events: none;
}

/* ---------------- Botón flotante "volver arriba" ---------------- */
.arp-back-top {
	position: fixed; right: 20px; bottom: 20px; z-index: 400; width: 46px; height: 46px; border-radius: 50%;
	background: var(--arp-chip); color: var(--arp-bone); border: none; font-size: 18px; line-height: 1; cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s, background .15s ease;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(20,18,31,.25);
}
.arp-back-top.arp-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.arp-back-top:hover { background: var(--arp-red); }
@media (max-width: 480px) { .arp-back-top { right: 14px; bottom: 14px; width: 42px; height: 42px; } }

/* ==================== 50 MEJORAS VISUALES (FASE 1) ==================== */

/* 1. Video Background Loop (Grano cinematográfico) */
.arp-hero-video-bg {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
	z-index: 0; opacity: 0.8; mix-blend-mode: multiply; filter: contrast(1.1) saturate(1.2);
}
.arp-hero-photo-wrap::after {
	content: ''; position: absolute; inset: 0;
	background: repeating-radial-gradient(circle at 2px 2px, rgba(0,0,0,0.15) 0 1px, transparent 1px 4px);
	background-size: 4px 4px; z-index: 1; pointer-events: none; mix-blend-mode: overlay; opacity: 0.5;
}


/* 4. Glitch Sutil en el Logo */
.arp-logo-identity-mark:hover {
	animation: arp-glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}
@keyframes arp-glitch {
	0% { transform: translate(0) }
	20% { transform: translate(-2px, 2px) }
	40% { transform: translate(-2px, -2px) }
	60% { transform: translate(2px, 2px) }
	80% { transform: translate(2px, -2px) }
	100% { transform: translate(0) }
}

/* 6. Titular Rotativo 3D */
#arp-headline-category {
	display: inline-block; transform-style: preserve-3d;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

/* 8. Fluid Typography */
.arp-hero-headline { font-size: clamp(2.5rem, 6vw + 1rem, 5.25rem); line-height: 0.95; }
.arp-hero-title { font-size: clamp(1.5rem, 3.5vw + 1rem, 2.5rem); }

/* 12. Subrayados Mágicos */
.arp-article-body a { text-decoration: none; position: relative; }
.arp-article-body a::after {
	content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px;
	bottom: -2px; left: 0; background-color: var(--arp-red); transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}
.arp-article-body a:hover::after { transform: scaleX(1); transform-origin: bottom left; }

/* 13. Letras Capitulares */
.arp-article-body p:first-of-type::first-letter {
	float: left; font-size: 3.8em; line-height: 0.8; margin-right: 0.1em;
	font-family: 'Anton', sans-serif; color: var(--arp-red);
}

/* 15. Sticky Nav Glassmorphism */
.arp-sticky-nav {
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .arp-sticky-nav { background: rgba(38, 37, 36, 0.9); border-bottom: 1px solid rgba(231,228,222,0.08); }

/* 20. Botones Magnéticos (CSS Fallback) */
.arp-nav-btn { transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.arp-nav-btn:hover { transform: translateY(-3px); background: var(--arp-red); color: var(--arp-bone); }

/* 22. Hover Cinematográfico en Tarjetas */
.arp-article-img-wrap { overflow: hidden; }
.arp-article-img-wrap img { transition: transform 0.5s ease, filter 0.5s ease; }
.arp-article-card:hover .arp-article-img-wrap img {
	transform: scale(1.05); filter: brightness(0.85) contrast(1.1);
}

/* 25. Sombras Orgánicas */
.arp-article-card, .arp-card {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.arp-article-card:hover, .arp-card:hover { 
	box-shadow: 0 15px 40px rgba(214, 39, 44, 0.1); transform: translateY(-4px);
}
[data-theme="dark"] .arp-article-card, [data-theme="dark"] .arp-card { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); }
[data-theme="dark"] .arp-article-card:hover, [data-theme="dark"] .arp-card:hover { box-shadow: 0 15px 40px rgba(214, 39, 44, 0.25); }




/* 46. Outline Focus Personalizado */
:focus-visible { outline: 2px dashed var(--arp-red); outline-offset: 4px; }

/* ==================== MEJORAS VISUALES (FASE 2) ==================== */

/* 18. Custom Cursor Dual-Element (Punto + Anillo) */
@media (hover: hover) and (pointer: fine) {
	body, a, button, input, select, textarea, .arp-nav-btn, .arp-preview-btn, .arp-card, .arp-article-card {
		cursor: none !important;
	}
	.arp-cursor-dot {
		position: fixed; top: 0; left: 0; width: 6px; height: 6px;
		background: var(--arp-red); border-radius: 50%; pointer-events: none;
		transform: translate(-50%, -50%); z-index: 999999; opacity: 0;
		transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
		box-shadow: none !important;
		filter: none !important;
	}
	.arp-cursor-ring {
		position: fixed; top: 0; left: 0; width: 34px; height: 34px;
		border: 1.5px solid var(--arp-red); background: transparent !important;
		border-radius: 50%; pointer-events: none;
		transform: translate(-50%, -50%); z-index: 999998; opacity: 0;
		transition: opacity 0.3s ease, width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		filter: none !important;
	}
	.arp-cursor-dot.is-visible,
	.arp-cursor-ring.is-visible {
		opacity: 1;
	}
	.arp-cursor-dot.hover {
		transform: translate(-50%, -50%) scale(1.5);
		background: var(--arp-red);
		box-shadow: none !important;
	}
	.arp-cursor-ring.hover {
		width: 48px; height: 48px;
		background: transparent !important;
		border: 2px solid var(--arp-red);
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		filter: none !important;
	}
}
@media (hover: none), (pointer: coarse) {
	.arp-cursor-dot, .arp-cursor-ring {
		display: none !important;
	}
}

/* 20. Botones Magnéticos */
.arp-magnetic { display: inline-block; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* 28. Efecto Hover 3D Tilt en Tarjetas */
/* Optimización móvil: will-change permanente aquí promovía CADA tarjeta del listado
   (pueden ser 10-20+ en Columnas/Video) a su propia capa de composición todo el
   tiempo, no solo mientras se anima — el costo de GPU de tantas capas persistentes
   es una causa típica de scroll trabado en gama media/baja. Se agrega/quita por JS
   justo antes/después del tilt (ver main.js), que es cuando realmente hace falta. */
.arp-card, .arp-col-card, .arp-video-card {
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
	transform-style: preserve-3d;
}

/* 7. Botón Flotante Modo Oscuro */
.arp-theme-toggle {
	position: fixed; left: 20px; bottom: 20px; z-index: 400; width: 46px; height: 46px; border-radius: 50%;
	background: var(--arp-ink); color: var(--arp-paper); border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(20,18,31,.25);
	transition: transform .25s ease, background .15s ease;
}
.arp-theme-toggle:hover { background: var(--arp-red); color: #fff; transform: scale(1.1); }
@media (max-width: 480px) { .arp-theme-toggle { left: 14px; bottom: 14px; width: 42px; height: 42px; } }

/* ==================== VIDEO STRIPS DECORATIVOS ==================== */

/* Contenedor padre con espacio para la tira */
.arp-section-with-strip {
	position: relative;
	padding-right: 100px;
}
@media (max-width: 768px) {
	.arp-section-with-strip { padding-right: 0; }
	.arp-video-strip--vertical,
	.arp-video-strip--tilted { display: none; }
}

/* Tira VERTICAL — costado derecho (Columnas) */
.arp-video-strip--vertical {
	position: absolute; right: 0; top: 0; bottom: 0; width: 80px;
	overflow: hidden; border-left: 3px solid var(--arp-red);
}
.arp-video-strip--vertical video {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1) contrast(1.2); opacity: 0.35;
}

/* Banner HORIZONTAL — entre título y contenido (Documentos) */
.arp-video-strip--horizontal {
	position: relative; width: 100%; height: 120px; overflow: hidden;
	margin-bottom: 30px; border-top: 3px solid var(--arp-red);
	border-bottom: 3px solid var(--arp-red);
}
.arp-video-strip--horizontal video {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1) contrast(1.15); opacity: 0.4;
}
.arp-video-strip-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--arp-paper) 0%, transparent 15%, transparent 85%, var(--arp-paper) 100%);
	pointer-events: none;
}
[data-theme="dark"] .arp-video-strip-overlay {
	background: linear-gradient(90deg, var(--arp-paper) 0%, transparent 15%, transparent 85%, var(--arp-paper) 100%);
}

/* Tira INCLINADA — esquina inferior derecha (Agenda) */
.arp-video-strip--tilted {
	position: absolute; right: -10px; top: 40px; bottom: 40px; width: 90px;
	overflow: hidden; transform: rotate(-3deg);
	border: 2px solid var(--arp-red);
	box-shadow: 4px 4px 0 var(--arp-ink);
}
.arp-video-strip--tilted video {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1) contrast(1.3) sepia(0.15); opacity: 0.45;
}

/* ==================== BOTÓN FLOTANTE Y PANEL DE ACCESIBILIDAD ==================== */
.arp-a11y-toggle {
	position: fixed; left: 24px; bottom: 120px; z-index: 9999; width: 52px; height: 52px; border-radius: 50%;
	background: var(--arp-red); color: #fff; border: 2.5px solid #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(214,39,44,.45);
	transition: transform .25s ease, background .15s ease, box-shadow .25s ease, bottom .25s ease;
}
.arp-a11y-toggle:hover { background: var(--arp-ink); color: #fff; transform: scale(1.12); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
@media (max-width: 480px) { .arp-a11y-toggle { left: 16px; bottom: 95px; width: 46px; height: 46px; } }

/* Modal Panel de Accesibilidad */
.arp-a11y-modal {
	position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
	pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.arp-a11y-modal[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
.arp-a11y-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.arp-a11y-container {
	position: relative; width: 90%; max-width: 520px; background: var(--arp-paper); color: var(--arp-ink);
	border-radius: 14px; border: 2px solid var(--arp-ink); box-shadow: 0 20px 50px rgba(0,0,0,0.4);
	overflow: hidden; transform: scale(0.92); transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.arp-a11y-modal[aria-hidden="false"] .arp-a11y-container { transform: scale(1); }
.arp-a11y-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 2px solid var(--arp-ink); background: var(--arp-cream); }
.arp-a11y-title { display: flex; align-items: center; gap: 10px; }
.arp-a11y-title-icon { width: 20px; height: 20px; flex: none; color: var(--arp-red); }
.arp-a11y-group-label { display: flex; align-items: center; gap: 7px; }
.arp-a11y-group-icon { width: 15px; height: 15px; flex: none; }
.arp-a11y-title { font-family: 'Anton', sans-serif; font-size: 20px; text-transform: uppercase; margin: 0; letter-spacing: .02em; }
.arp-a11y-close { background: none; border: none; font-size: 20px; font-weight: 700; cursor: pointer; color: var(--arp-ink); padding: 4px 8px; border-radius: 4px; }
.arp-a11y-close:hover { background: rgba(0,0,0,0.1); }
.arp-a11y-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.arp-a11y-group { display: flex; flex-direction: column; gap: 10px; }
.arp-a11y-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--arp-red); text-transform: uppercase; letter-spacing: .05em; }
.arp-a11y-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.arp-a11y-btn {
	padding: 10px 14px; font-size: 13px; font-weight: 700; border-radius: 8px; border: 2px solid #EBE8DE;
	background: #fff; color: #14121F; cursor: pointer; transition: all .15s ease; text-align: center;
	display: flex; align-items: center; justify-content: center; gap: 7px;
}
.arp-a11y-btn:hover, .arp-a11y-btn.active { border-color: var(--arp-red); background: var(--arp-red); color: #fff; }
.arp-a11y-icon { width: 16px; height: 16px; flex: none; }
[data-theme="dark"] .arp-a11y-btn { background: var(--arp-cream); color: var(--arp-ink); border-color: rgba(231, 228, 222, 0.18); }
[data-theme="dark"] .arp-a11y-btn:hover, [data-theme="dark"] .arp-a11y-btn.active { background: var(--arp-red); color: #fff; border-color: var(--arp-red); }
[data-theme="dark"] .arp-a11y-header { background: var(--arp-cream); border-bottom-color: rgba(231,228,222,0.18); }
[data-theme="dark"] .arp-a11y-close:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .arp-a11y-reset-btn:hover { background: rgba(255,255,255,0.06); }
.arp-a11y-reset-btn {
	margin-top: 10px; padding: 12px; border-radius: 8px; border: 1.5px dashed var(--arp-ink);
	background: transparent; color: var(--arp-ink); font-weight: 700; cursor: pointer; text-align: center;
}
.arp-a11y-reset-btn:hover { background: rgba(0,0,0,0.05); }

/* Alto Contraste Theme */
[data-theme="high-contrast"] {
	--arp-paper: #000000 !important;
	--arp-ink: #FFFF00 !important;
	--arp-surface: #111111 !important;
	--arp-red: #FFFF00 !important;
	--arp-muted: #FFFFFF !important;
	background-color: #000000 !important;
	color: #FFFF00 !important;
}
[data-theme="high-contrast"] a, [data-theme="high-contrast"] button { color: #FFFF00 !important; border-color: #FFFF00 !important; }

/* Reducir Movimiento */
[data-reduce-motion="true"] *, [data-reduce-motion="true"] *::before, [data-reduce-motion="true"] *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Fuente Lectura Fácil */
[data-easy-read="true"] body, [data-easy-read="true"] p, [data-easy-read="true"] a, [data-easy-read="true"] h1, [data-easy-read="true"] h2, [data-easy-read="true"] h3 {
	font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif !important;
	letter-spacing: 0.03em !important;
	line-height: 1.6 !important;
}

/* ==================== BUSCADOR INTELIGENTE MÁS GRANDE ==================== */
.arp-smart-search-wrap {
	position: relative; width: 100%; margin-top: 16px; margin-bottom: 8px;
}
.arp-smart-search-form {
	position: relative; width: 100%; border: none !important; background: transparent !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important;
}
.arp-search-input-wrap {
	display: flex; align-items: center; background: #fff; border: 2.5px solid var(--arp-ink);
	border-radius: 10px; padding: 4px 6px 4px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.06);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.arp-search-input-wrap:focus-within {
	border-color: var(--arp-red); box-shadow: 0 6px 20px rgba(214,39,44,0.2);
}
[data-theme="dark"] .arp-search-input-wrap { background: var(--arp-cream); border-color: rgba(231,228,222,0.22); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.arp-search-icon { font-size: 18px; margin-right: 10px; color: var(--arp-ink); }
.arp-smart-search-form .arp-search-input-field {
	flex: 1; border: none; background: transparent; padding: 10px 0; font-size: 15px; font-weight: 500;
	color: var(--arp-ink); outline: none; min-width: 0;
}
.arp-smart-search-form .arp-search-submit {
	background: var(--arp-ink); color: #fff; border: none; border-radius: 6px; padding: 10px 18px;
	font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; cursor: pointer;
	transition: background .2s ease; white-space: nowrap;
}
.arp-smart-search-form .arp-search-submit:hover { background: var(--arp-red); }

/* Result Dropdown */
.arp-live-search-results {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 99999;
	background: var(--arp-paper); border: 2px solid var(--arp-ink); border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.2); max-height: 400px; overflow-y: auto;
}
.arp-live-search-list { display: flex; flex-direction: column; }
.arp-live-search-item {
	display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.06);
	text-decoration: none; color: var(--arp-ink); transition: background .15s ease;
}
.arp-live-search-item:last-child { border-bottom: none; }
.arp-live-search-item:hover { background: rgba(214,39,44,0.08); }
.arp-live-search-badge {
	background: var(--arp-red); color: #fff; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
	padding: 3px 8px; border-radius: 4px; text-transform: uppercase; white-space: nowrap; margin-top: 2px;
}
.arp-live-search-info { display: flex; flex-direction: column; min-width: 0; }
.arp-live-search-title { font-family: 'Anton', sans-serif; font-size: 16px; text-transform: uppercase; line-height: 1.2; margin-bottom: 2px; }
.arp-live-search-desc { font-size: 12px; color: var(--arp-muted); line-height: 1.3; }

/* ---------------- Skeleton Loader / Shimmer Effect ---------------- */
/* ==================== PREVIEW MODAL ==================== */
/* Bloqueo de scroll: overflow:hidden en <html> no mueve el documento
   → cero salto de página al abrir o cerrar el drawer.                */
html.arp-scroll-locked {
	overflow: hidden;
}

/* ==================== ARTE Y CULTURA — GALERÍA ==================== */

/* Grid principal de galería — .arp-arte-gallery y .arp-arte-gallery-grid son equivalentes */
.arp-arte-gallery,
.arp-arte-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
@media (max-width: 900px) {
	.arp-arte-gallery,
	.arp-arte-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
	.arp-arte-gallery,
	.arp-arte-gallery-grid { grid-template-columns: 1fr; }
}

/* Tarjeta de galería */
.arp-arte-gallery-card {
	background: var(--arp-paper);
	border: 2px solid var(--arp-ink);
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	transition: transform .25s cubic-bezier(.22,.68,0,1.2), box-shadow .25s ease;
	box-shadow: 0 4px 16px rgba(0,0,0,.06);
	outline: none;
	display: flex;
	flex-direction: column;
}
.arp-arte-gallery-card:hover,
.arp-arte-gallery-card:focus-visible {
	transform: translateY(-5px) scale(1.015);
	box-shadow: 0 16px 40px rgba(0,0,0,.14);
}
.arp-arte-gallery-card:focus-visible {
	outline: 3px solid var(--arp-red);
	outline-offset: 2px;
}

/* Thumbnail — altura fija para que las tarjetas sean compactas y predecibles */
.arp-arte-gallery-thumb {
	position: relative;
	height: 220px;
	background: var(--arp-ink);
	background-size: cover;
	background-position: center center; /* centrado para no cortar ni arriba ni abajo */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.arp-arte-gallery-icon {
	font-size: 40px;
	opacity: .4;
	z-index: 1;
}

/* Overlay de información */
.arp-arte-gallery-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20,18,31,.95) 0%, rgba(20,18,31,.45) 55%, transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 18px 16px 14px;
	transition: background .3s ease;
}
.arp-arte-gallery-card:hover .arp-arte-gallery-overlay {
	background: linear-gradient(to top, rgba(20,18,31,.98) 0%, rgba(20,18,31,.6) 60%, transparent 100%);
}
.arp-arte-gallery-badge {
	font-family: 'Anton', sans-serif;
	font-size: 9px;
	letter-spacing: .12em;
	color: var(--arp-red);
	text-transform: uppercase;
	margin-bottom: 5px;
	display: block;
}
.arp-arte-gallery-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 4px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.arp-arte-gallery-author {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 11px;
	color: rgba(255,255,255,.7);
	margin: 0 0 8px;
	font-style: italic;
}
.arp-arte-gallery-cta {
	font-family: 'Anton', sans-serif;
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--arp-red);
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease;
	display: block;
}
.arp-arte-gallery-card:hover .arp-arte-gallery-cta,
.arp-arte-gallery-card:focus-visible .arp-arte-gallery-cta {
	opacity: 1;
	transform: translateY(0);
}

/* Ícono video play */
.arp-arte-gallery-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	width: 52px;
	height: 52px;
	background: rgba(214,39,44,.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #fff;
	transition: transform .2s ease, background .2s ease;
	pointer-events: none;
}
.arp-arte-gallery-card:hover .arp-arte-gallery-play {
	transform: translate(-50%,-50%) scale(1.12);
	background: var(--arp-red);
}

/* Extracto debajo de la imagen */
.arp-arte-gallery-excerpt {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 12px;
	color: var(--arp-muted);
	padding: 12px 16px;
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	border-top: 1px solid rgba(0,0,0,.06);
}

/* ==================== IMAGEN EN DRAWER DE POEMA ==================== */
/* Optimizada para imágenes verticales (portadas de poemas).           */
/* Se muestra completa si cabe; si es muy alta se corta por arriba     */
/* (object-position: center top para ver el motivo principal).         */
.arp-poem-drawer-img {
	margin-bottom: 24px;
	border-radius: 12px;
	overflow: hidden;
	/* Máx 60 % de la ventana — suficiente para vertical sin aplastar el texto */
	max-height: 60vh;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	background: var(--arp-ink);
}
.arp-poem-drawer-img img {
	width: 100%;
	height: auto;
	max-height: 60vh;
	object-fit: cover;
	object-position: center top;
	display: block;
	border-radius: 12px;
}
/* Foto de un documento "escrito a mano" en la vista previa del drawer — en blanco y
   negro automático, igual que en la página individual y en la fila del archivo (ver
   .arp-doc-card-manuscrito y .arp-doc-badge.is-photo). NO se toca .arp-poem-drawer-img
   img en general porque ese mismo drawer lo reusa Arte y Cultura con fotos a color. */
.arp-doc-preview-manuscrito .arp-poem-drawer-img img { filter: grayscale(100%); }

/* ==================== MODAL DE LECTURA ==================== */
.arp-poem-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.arp-poem-modal[hidden] { display: none; }

.arp-poem-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20,18,31,.75);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.arp-poem-modal-panel {
	position: relative;
	z-index: 1;
	background: var(--arp-paper, #FAF9F6);
	border: 2px solid var(--arp-ink, #14121F);
	border-radius: 16px;
	width: 100%;
	max-width: 760px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 32px 80px rgba(0,0,0,.3);
	display: flex;
	flex-direction: column;
	animation: arp-modal-in .25s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes arp-modal-in {
	from { opacity: 0; transform: scale(.94) translateY(14px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.arp-poem-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	background: var(--arp-ink, #14121F);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, transform .2s;
}
.arp-poem-modal-close:hover { background: var(--arp-red, #D6272C); transform: rotate(90deg); }

.arp-poem-modal-cover {
	max-height: 320px;
	overflow: hidden;
	border-radius: 14px 14px 0 0;
}
.arp-poem-modal-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.arp-poem-modal-video {
	padding: 20px 20px 0;
}

.arp-poem-modal-body {
	padding: 28px 32px 32px;
}
@media (max-width: 540px) {
	.arp-poem-modal-body { padding: 20px 18px 24px; }
}

.arp-poem-modal-header {
	margin-bottom: 20px;
	border-bottom: 2px solid rgba(0,0,0,.08);
	padding-bottom: 16px;
}
.arp-poem-modal-excerpt {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 14px;
	color: var(--arp-muted, #6B6858);
	font-style: italic;
	margin: 8px 0 0;
}

/* ==================== ESTILOS HEREDADOS (tarjeta individual) ==================== */
.arp-arte-card {
	background: var(--arp-paper);
	border: 2px solid var(--arp-ink);
	border-radius: 12px;
	padding: 32px;
	margin-bottom: 40px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.arp-arte-header {
	margin-bottom: 24px;
	border-bottom: 2px solid rgba(0,0,0,0.08);
	padding-bottom: 16px;
}
.arp-arte-badge {
	display: inline-block;
	background: var(--arp-gradient-orienta);
	color: #fff;
	font-family: 'Anton', sans-serif;
	font-size: 11px;
	letter-spacing: 0.1em;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 10px;
}
.arp-arte-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 32px;
	font-weight: 700;
	color: var(--arp-ink);
	margin: 0 0 8px;
	line-height: 1.2;
}
.arp-arte-author {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--arp-red);
	font-style: italic;
	margin: 0;
}
.arp-arte-content-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}
.arp-arte-content-grid.has-media {
	grid-template-columns: 1fr 1.2fr;
}
@media (max-width: 768px) {
	.arp-arte-content-grid.has-media {
		grid-template-columns: 1fr;
	}
}
.arp-arte-media-frame {
	position: relative;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	border: 2px solid var(--arp-ink);
	box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.arp-arte-media-frame img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}
.arp-arte-poem-body {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 18px;
	line-height: 1.8;
	color: var(--arp-ink);
	margin-bottom: 24px;
}
.arp-arte-poem-body p {
	margin-bottom: 16px;
}
.arp-arte-footer {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(0,0,0,0.08);
}
/* Documentos "escritos a mano" reusan .arp-arte-card, pero SOLO su foto va en blanco y
   negro automático — no se toca .arp-arte-media-frame img en general para no afectar
   las imágenes/obras de Arte y Cultura, que sí llevan color. */
.arp-doc-card-manuscrito .arp-arte-media-frame img { filter: grayscale(100%); }


.arp-atlantico-card {
	background: var(--arp-paper);
	border: 2px solid var(--arp-ink);
	border-radius: 12px;
	padding: 32px;
	margin-bottom: 40px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.arp-atlantico-header {
	margin-bottom: 24px;
	border-bottom: 2px solid rgba(0,0,0,0.08);
	padding-bottom: 16px;
}
.arp-atlantico-badge {
	display: inline-block;
	background: var(--arp-ink);
	color: #fff;
	font-family: 'Anton', sans-serif;
	font-size: 11px;
	letter-spacing: 0.1em;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 10px;
}
.arp-atlantico-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 28px;
	font-weight: 700;
	color: var(--arp-ink);
	margin: 0;
	line-height: 1.2;
}
.arp-atlantico-content-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.arp-atlantico-card.align-left .arp-atlantico-content-grid {
	flex-direction: row;
}
.arp-atlantico-card.align-right .arp-atlantico-content-grid {
	flex-direction: row-reverse;
}
@media (max-width: 768px) {
	.arp-atlantico-card.align-left .arp-atlantico-content-grid,
	.arp-atlantico-card.align-right .arp-atlantico-content-grid {
		flex-direction: column;
	}
}
.arp-atlantico-media-col {
	flex: 0 0 45%;
}
.arp-atlantico-text-col {
	flex: 1;
}
.arp-atlantico-card.align-top .arp-atlantico-media-col {
	flex: 100%;
}
.arp-atlantico-text-body {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--arp-ink);
}
.arp-atlantico-text-body p {
	margin-bottom: 16px;
}
@keyframes arp-shimmer-anim {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
.arp-skeleton {
	background: linear-gradient(90deg, #EBE8DE 25%, #F7F5F0 50%, #EBE8DE 75%);
	background-size: 200% 100%;
	animation: arp-shimmer-anim 1.5s infinite linear;
	border-radius: 6px;
	display: block;
}
.arp-skeleton-text { height: 14px; margin-bottom: 8px; width: 85%; }
.arp-skeleton-title { height: 26px; margin-bottom: 12px; width: 65%; }
.arp-skeleton-box { height: 160px; margin-bottom: 14px; width: 100%; }
.arp-skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }

[data-theme="dark"] .arp-skeleton {
	background: linear-gradient(90deg, #252233 25%, #302C42 50%, #252233 75%);
	background-size: 200% 100%;
}


/* ---------------- Executive Gradient Footer ---------------- */
.arp-footer-executive {
	background: linear-gradient(135deg, #1e0336 0%, #44076F 35%, #75124E 70%, #D6272C 100%);
	color: #ffffff;
	position: relative;
	margin-top: 80px;
	padding-top: 60px;
	border-top: 4px solid var(--arp-red);
	overflow: hidden;
	box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.25);
}

/* Capa 1: Patrón de textura geométrica con puntos */
.arp-footer-texture-overlay {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
	background-size: 24px 24px;
	opacity: 0.45;
	pointer-events: none;
	z-index: 1;
}

/* Capa 2: Resplandores ambientales flotantes (Ambient Glow Orbs) */
.arp-footer-glow-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	z-index: 1;
}
.arp-footer-glow-1 {
	top: -100px;
	left: 10%;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(214, 39, 44, 0.35) 0%, transparent 70%);
}
.arp-footer-glow-2 {
	bottom: -50px;
	right: 5%;
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, rgba(68, 7, 111, 0.5) 0%, transparent 70%);
}

/* Capa 3: Marca de Agua Editorial gigante */
.arp-footer-watermark {
	position: absolute;
	right: -20px;
	bottom: 40px;
	font-family: 'Anton', sans-serif;
	font-size: 160px;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.03);
	pointer-events: none;
	user-select: none;
	z-index: 1;
	line-height: 1;
}

.arp-footer-container {
	position: relative;
	z-index: 2;
	padding-left: 28px !important;
	padding-right: 28px !important;
	box-sizing: border-box;
}

.arp-footer-grid {
	display: grid;
	grid-template-columns: 1.25fr 0.9fr 1.1fr 0.95fr;
	gap: 28px;
	padding-bottom: 50px;
}
@media (max-width: 1024px) {
	.arp-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
}
@media (max-width: 640px) {
	.arp-footer-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Tarjetas Glassmorphic de las Columnas del Footer */
.arp-footer-card {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	padding: 28px 24px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}
.arp-footer-card:hover {
	border-color: rgba(255, 255, 255, 0.35);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
	transform: translateY(-3px);
}

.arp-footer-col-brand .arp-footer-logo-img {
	max-width: 180px;
	height: auto;
	display: block;
	margin-bottom: 12px;
}
.arp-footer-badge {
	display: inline-block;
	font-family: 'Anton', sans-serif;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--arp-red);
	padding: 4px 10px;
	border-radius: 20px;
	margin-bottom: 14px;
	align-self: flex-start;
}
.arp-footer-desc {
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 20px;
}
.arp-footer-social {
	display: flex;
	gap: 10px;
	margin-top: auto;
}
.arp-footer-social-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	transition: all 0.2s ease;
}
.arp-footer-social-btn:hover {
	background: #ffffff;
	color: #44076F !important;
	transform: translateY(-3px) scale(1.08);
}

.arp-footer-heading {
	font-family: 'Anton', sans-serif;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 16px;
	color: #ffffff;
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 8px;
}
.arp-footer-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.arp-footer-nav li a {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
}
.arp-footer-nav li a:hover {
	color: #ffffff;
	transform: translateX(5px);
}

.arp-footer-text {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 16px;
}
.arp-footer-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}
.arp-footer-newsletter-input {
	padding: 12px 14px;
	border-radius: 10px;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.25);
	color: #ffffff;
	font-size: 13px;
	outline: none;
	transition: all 0.2s ease;
}
.arp-footer-newsletter-input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}
.arp-footer-newsletter-input:focus {
	border-color: #ffffff;
	background: rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.arp-footer-newsletter-btn {
	padding: 12px 18px;
	border-radius: 10px;
	border: none;
	background: #14121F;
	color: #ffffff;
	font-family: 'Anton', sans-serif;
	font-size: 13.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.arp-footer-newsletter-btn:hover {
	background: var(--arp-red);
	color: #ffffff;
	transform: translateY(-2px);
}

.arp-footer-contact-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.arp-footer-contact-item {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
}
.arp-footer-link {
	color: #ffffff !important;
	text-decoration: underline;
	opacity: 0.9;
}
.arp-footer-link:hover {
	opacity: 1;
}
.arp-footer-about-badge {
	display: inline-block;
	margin-top: auto;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 10px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: #ffffff !important;
	transition: all 0.2s ease;
}
.arp-footer-about-badge:hover {
	background: #ffffff;
	color: #14121F !important;
	transform: translateY(-2px);
}

/* Barra de Copyright Inferior */
.arp-footer-bottom {
	position: relative;
	z-index: 2;
	background: #0E0C17;
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
}
.arp-footer-bottom-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-left: 28px !important;
	padding-right: 28px !important;
	box-sizing: border-box;
}
.arp-footer-bottom p {
	margin: 0;
}

/* ---------------- Atlántico para la Vida — marca decorativa fija ----------------
   Logo del programa, asset del tema (no editable desde el panel). Va en la esquina
   superior derecha del encabezado de la sección, fuera del flujo (position:absolute)
   para decorar sin desplazar el título/subtítulo centrados ni la cuadrícula de abajo. */
.arp-atlantico-header { position: relative; }
.arp-atlantico-vida-mark {
	position: absolute; top: -8px; right: 0; width: 128px; height: auto;
	pointer-events: none; user-select: none;
}
@media (max-width: 780px) {
	.arp-atlantico-vida-mark { width: 76px; top: -4px; }
}
@media (max-width: 480px) {
	.arp-atlantico-vida-mark { width: 58px; }
}

/* ---------------- Paginación de secciones ----------------
   paginate_links() de WP genera <a>/<span> con estas clases (page-numbers, current,
   dots, prev, next) — se les da aquí el mismo tratamiento de "caja con borde + acento
   rojo activo" que ya usa el resto del sitio (ver .arp-sticky-links a). */
.arp-pagination {
	display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
	gap: 8px; margin: 48px 0 12px; font-family: 'JetBrains Mono', monospace;
}
.arp-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box;
	border: 1.5px solid var(--arp-ink); color: var(--arp-ink); text-decoration: none;
	font-size: 13px; font-weight: 700; transition: background .15s ease, color .15s ease, transform .15s ease;
}
a.page-numbers:hover { background: var(--arp-ink); color: var(--arp-paper); transform: translateY(-2px); }
.arp-pagination .page-numbers.current { background: var(--arp-red); border-color: var(--arp-red); color: #fff; }
.arp-pagination .page-numbers.dots { border: none; color: var(--arp-muted); min-width: auto; padding: 0 4px; }
.arp-pagination .page-numbers.prev,
.arp-pagination .page-numbers.next { padding: 0 16px; }
@media (max-width: 480px) {
	.arp-pagination .page-numbers.prev,
	.arp-pagination .page-numbers.next { font-size: 0; padding: 0 14px; }
	.arp-pagination .page-numbers.prev::before { content: '←'; font-size: 14px; }
	.arp-pagination .page-numbers.next::before { content: '→'; font-size: 14px; }
}