/* ==========================================================================
   FENCOMIN — tema institucional
   ========================================================================== */

:root {
	/* Paleta institucional. Verde actualizado (2026-09-28) a pedido del
	   cliente, siguiendo el tono de verde muy oscuro de sus piezas gráficas
	   (muestreado por píxeles de una publicación de "FENCOMIN INFORMA").
	   --green-2 y --green-3 se recalcularon a partir de --green para
	   conservar la misma jerarquía clara/oscuro que tenía la paleta
	   anterior (verde-3 más oscuro para fondos grandes, verde-2 más claro
	   para hover/degradés) — no son un muestreo literal, son un ajuste
	   proporcional del verde nuevo. Dorado y rojo sin cambios. */
	--green: #0a1f0a;
	--green-2: #1c3d1c;
	--green-3: #050d05;
	/* Verde real de la cinta boliviana en la cabecera (.flag-ribbon) — a
	   propósito NO sigue a --green: esa franja representa los colores de
	   la bandera, no la identidad de marca, así que conserva el verde
	   institucional anterior en vez de oscurecerse con el resto del sitio. */
	--flag-green: #0b6b36;
	--gold: #c29a44;
	--gold-dark: #a67e2e;
	--red: #c0281b;
	--bg: #f7f5f0;
	--surface: #ffffff;
	--surface-2: #eeeae0;
	--ink: #16202b;
	--ink-soft: #55616c;
	--line: #e2dfd4;
	--on-green: #f4f1e8;
	--radius: 3px;
	--shadow-sm: 0 2px 10px rgba(6,46,26,0.08);
	--shadow-md: 0 10px 28px rgba(6,46,26,0.16);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

h1, h2, h3, h4 {
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
	color: var(--green);
	text-wrap: balance;
	margin: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

a:focus-visible, button:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 100;
	background: var(--green); color: var(--on-green); padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

.wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.kicker {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-dark);
	margin-bottom: 0.5rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.7rem;
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: var(--gold); color: var(--green-3); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { border-color: rgba(244,241,232,0.5); color: var(--on-green); }
.btn-ghost:hover { border-color: var(--on-green); transform: translateY(-2px); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn-small { padding: 0.6rem 1.15rem; font-size: 0.76rem; }
.btn-ghost.btn-small { border-color: var(--line-strong, var(--line)); color: var(--green); }
.btn-ghost.btn-small:hover { border-color: var(--green); }

.section-cta { margin-top: 1.5rem; }
.lede { color: var(--ink-soft); font-size: 1.02rem; max-width: 62ch; margin-top: 0.6rem; }

/* ---------- Franja tricolor (cinta del escudo FENCOMIN) ---------- */
.flag-ribbon {
	height: 5px;
	background: linear-gradient(90deg,
		var(--red) 0%, var(--red) 33.33%,
		var(--gold) 33.33%, var(--gold) 66.66%,
		var(--flag-green) 66.66%, var(--flag-green) 100%);
}

/* ---------- Topbar ---------- */
.topbar { background: var(--green-3); color: var(--on-green); font-size: 0.82rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1.25rem; gap: 1rem; flex-wrap: wrap; }
.topbar-contact { display: flex; align-items: center; gap: 1.25rem; opacity: 0.85; }
.topbar-right { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.lang-switch { display: flex; gap: 0.5rem; }
.lang-switch a { opacity: 0.6; padding: 0.1rem 0.3rem; font-weight: 600; }
.lang-switch a.is-active, .lang-switch a:hover { opacity: 1; color: var(--gold); }
.social-links { display: flex; align-items: center; gap: 0.55rem; }
.social-links a { display: flex; opacity: 0.75; color: var(--on-green); }
.social-links a:hover { opacity: 1; color: var(--gold); }
.social-links svg { display: block; }

/* ---------- Aviso de idioma (AY / QU) ---------- */
.lang-notice { background: var(--gold); color: var(--green-3); font-size: 0.85rem; }
.lang-notice .wrap { padding: 0.6rem 1.25rem; }

/* ---------- Header ---------- */
/* Fijo al hacer scroll (a la minerasancristobal.com), pero solo esta barra
   de logo+menú — la topbar de contacto/idioma/redes de arriba NO es sticky,
   se va con el scroll. Fondo sólido (no translúcido) para que el texto de
   abajo nunca se transparente al pasar por detrás. La sombra se agrega vía
   JS (.is-scrolled en main.js) solo cuando hay algo de scroll. */
.site-header {
	background: var(--surface); border-bottom: 1px solid var(--line);
	position: sticky; top: 0; z-index: 20;
	transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(6,46,26,0.14); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark {
	width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;
}
.brand-mark-lg { width: 64px; height: 64px; }
.brand-text { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--green); letter-spacing: 0.02em; }

.nav-toggle {
	display: none; flex-direction: column; gap: 4px;
	background: none; border: none; padding: 0.5rem; cursor: pointer;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--green); display: block; }

.primary-nav .menu {
	display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0;
}
.primary-nav .menu a {
	display: block; font-size: 0.8rem; font-weight: 700; color: var(--green);
	text-transform: uppercase; letter-spacing: 0.04em;
	padding: 0.6rem 0.75rem; border-bottom: 2px solid transparent; white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.primary-nav .menu a:hover { background: var(--surface-2); border-bottom-color: var(--gold); }
.primary-nav .menu li.current-menu-item > a,
.primary-nav .menu li.current-menu-ancestor > a,
.primary-nav .menu li.current_page_item > a {
	background: var(--green); color: var(--on-green); border-bottom-color: var(--gold);
}
.primary-nav .menu li.current-menu-item > a:hover,
.primary-nav .menu li.current-menu-ancestor > a:hover,
.primary-nav .menu li.current_page_item > a:hover {
	background: var(--green-2);
}

@media (max-width: 880px) {
	.nav-toggle { display: flex; }
	.primary-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--surface); border-bottom: 1px solid var(--line);
		max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
	}
	.primary-nav.is-open { max-height: 420px; }
	.primary-nav .menu { flex-direction: column; gap: 0; padding: 0.5rem 1.25rem 1rem; }
	.primary-nav .menu a { display: block; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--line); }
}

/* ---------- Hero ---------- */
/* Fondo a pantalla completa (foto o video) con texto centrado encima, a la
   minerasancristobal.com/v3 — reemplaza el panel de imagen lateral usado
   antes. El carrusel (varias diapositivas con cross-fade) se mantiene. */
.hero { position: relative; background: var(--green-3); color: var(--on-green); overflow: hidden; }
.hero-slides { position: relative; height: clamp(480px, 82vh, 660px); }
.hero-slide {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity 0.6s ease;
}
.hero-slide:not(.has-media) {
	background:
		linear-gradient(120deg, rgba(6,46,26,0.92) 15%, rgba(11,107,54,0.55) 70%),
		repeating-linear-gradient(135deg, rgba(194,154,68,0.08) 0 2px, transparent 2px 26px);
}
.hero-slide.is-active { opacity: 1; visibility: visible; position: relative; height: 100%; }

/* Video o imagen de fondo: cubre el carrusel de borde a borde. El video
   tiene prioridad sobre la imagen destacada si se cargaron ambos (ver
   front-page.php). Un velo oscuro (.hero-overlay) encima asegura que el
   texto centrado se lea bien sobre cualquier foto o video. */
.hero-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hero-media img, .hero-media-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* En pantallas chicas no se reproduce el video de fondo (ahorra datos y
   batería — la referencia sirve el mismo video pesado en mobile, algo que
   preferimos no copiar). Se ve la imagen destacada (poster) como fondo fijo
   en su lugar, cargada vía background-image inline en front-page.php. */
@media (max-width: 780px) {
	.hero-media-video { display: none; }
}
.hero-overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(6,46,26,0.45) 0%, rgba(6,46,26,0.78) 100%);
}

.hero-grid { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: 720px; margin: 0 auto; padding: 4rem 1.25rem; text-align: center; }

.hero .eyebrow {
	display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem;
}
.hero h1 {
	color: var(--on-green); font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: 1rem;
	text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.hero p { color: rgba(244,241,232,0.82); font-size: 1.05rem; max-width: 52ch; margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; justify-content: center; }

/* Entrada escalonada del texto del hero (a la minerasancristobal.com):
   kicker, título, texto y botón aparecen uno tras otro con fade-in-up. Se
   dispara con la clase .is-active que ya pone el carrusel (main.js), así
   que se repite cada vez que una diapositiva vuelve a activarse, no solo
   una vez al cargar la página. */
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.hero-content .eyebrow, .hero-content h1, .hero-content p, .hero-content .hero-actions {
	opacity: 0; transform: translateY(26px);
}
.hero-slide.is-active .hero-content .eyebrow { animation: hero-rise 0.6s 0.15s ease-out both; }
.hero-slide.is-active .hero-content h1 { animation: hero-rise 0.6s 0.28s ease-out both; }
.hero-slide.is-active .hero-content p { animation: hero-rise 0.6s 0.42s ease-out both; }
.hero-slide.is-active .hero-content .hero-actions { animation: hero-rise 0.6s 0.56s ease-out both; }

.hero-scroll-cue {
	position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; color: rgba(244,241,232,0.75);
	animation: hero-scroll-bounce 1.8s ease-in-out infinite;
}
.hero-scroll-cue:hover { color: var(--on-green); }
@keyframes hero-scroll-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue { animation: none; } }
@media (max-width: 780px) { .hero-scroll-cue { display: none; } }

.hero-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; z-index: 5;
	display: flex; align-items: center; justify-content: center;
	background: rgba(244,241,232,0.12); border: 1px solid rgba(244,241,232,0.4);
	color: var(--on-green); font-size: 1.5rem; line-height: 1; cursor: pointer;
	transition: background-color 0.15s ease;
}
.hero-arrow:hover { background: rgba(244,241,232,0.28); }
.hero-arrow-prev { left: 1rem; }
.hero-arrow-next { right: 1rem; }
@media (max-width: 620px) { .hero-arrow { display: none; } }

.hero-dots { display: flex; gap: 0.5rem; justify-content: center; padding: 1rem 0; }
.hero-dots button {
	width: 9px; height: 9px; border-radius: 50%; border: none;
	background: rgba(244,241,232,0.35); cursor: pointer;
}
.hero-dots button.is-active { background: var(--gold); }

/* ---------- Stats ---------- */
.stats-bar { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.stats-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	background: var(--line);
}
.stat {
	background: var(--surface-2); padding: 1.6rem 1rem; text-align: center;
}
.stat b {
	display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
	font-size: 2.4rem; color: var(--green); font-variant-numeric: tabular-nums;
}
.stat span { font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sections ---------- */
.section { padding: clamp(2.6rem, 5vw, 4.5rem) 0; }
.section-alt { background: var(--surface-2); }
.section-head { margin-bottom: 2rem; max-width: 60ch; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.section-head h2::after {
	content: ""; display: block; width: 46px; height: 3px; margin-top: 0.9rem;
	background: var(--gold);
}
.section-head.is-centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.is-centered h2::after { margin-left: auto; margin-right: auto; }

.card-grid { display: grid; gap: 1.5rem; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; } }

/* Event cards */
.event-card {
	display: flex; gap: 1.1rem; background: var(--surface);
	border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 1.2rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.event-date {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 56px; height: 56px; background: var(--green); color: var(--on-green);
	border-radius: var(--radius); font-size: 0.7rem; letter-spacing: 0.06em; flex-shrink: 0;
}
.event-date b { font-family: "Barlow Condensed", sans-serif; font-size: 1.4rem; line-height: 1; }
.event-card h3 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; margin-bottom: 0.3rem; }
.event-card p { color: var(--ink-soft); font-size: 0.88rem; }

/* News cards */
.news-card {
	background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold);
	border-radius: var(--radius); overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.news-card-media { display: block; aspect-ratio: 16/10; background: var(--green); position: relative; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.media-placeholder {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--gold); font-family: "Barlow Condensed", sans-serif; font-weight: 700;
	letter-spacing: 0.08em; font-size: 1.1rem;
	background: linear-gradient(135deg, var(--green), var(--green-2));
}
.news-card-body { padding: 1.2rem; }
.news-card-body h3 { font-size: 1.08rem; text-transform: none; letter-spacing: 0; margin-bottom: 0.5rem; }
.news-card-body h3 a:hover { color: var(--gold-dark); }
.news-card-body p { color: var(--ink-soft); font-size: 0.9rem; }
.news-date { display: block; margin-top: 0.7rem; font-size: 0.78rem; color: var(--ink-soft); }

.empty-state {
	grid-column: 1 / -1; padding: 1.5rem; border: 1px dashed var(--line);
	border-radius: var(--radius); color: var(--ink-soft); background: var(--surface);
}

/* Service / secretaría cards */
.service-card {
	display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
	background: var(--green); color: var(--on-green);
	border-radius: var(--radius); padding: 1.4rem; min-height: 140px;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.service-card:hover { background: var(--green-2); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-card h3 { color: var(--on-green); font-size: 1.05rem; text-transform: none; letter-spacing: 0; }
.service-link { font-size: 0.82rem; color: var(--gold); font-weight: 600; }

/* Quote */
.quote-section {
	background:
		repeating-linear-gradient(135deg, rgba(194,154,68,0.06) 0 2px, transparent 2px 26px),
		var(--green-3);
	color: var(--on-green);
	border-top: 3px solid var(--gold);
}
.quote-wrap { max-width: 760px; text-align: center; }
.quote-wrap .kicker { color: var(--gold); }
blockquote {
	font-family: "Barlow Condensed", sans-serif; font-weight: 600; text-transform: none;
	font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; margin: 0 0 1.2rem;
	color: var(--on-green);
}
.quote-attr { font-size: 0.88rem; color: rgba(244,241,232,0.7); }
.quote-attr em { font-style: italic; opacity: 0.8; }

/* Cotizaciones */
.cotizacion-tabla-wrap {
	border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; background: var(--surface);
}
.cotizacion-tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.cotizacion-tabla caption {
	caption-side: top; text-align: left; padding: 0.9rem 1.1rem;
	background: linear-gradient(120deg, var(--green-3) 0%, var(--green) 100%);
	color: var(--on-green); font-family: "Barlow Condensed", sans-serif;
	font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.05rem;
}
.cotizacion-tabla thead th {
	text-align: left; padding: 0.6rem 1.1rem; background: var(--surface-2);
	font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.08em; color: var(--ink-soft);
}
.cotizacion-tabla thead th:last-child { text-align: right; }
.cotizacion-tabla tbody td { padding: 0.55rem 1.1rem; border-top: 1px solid var(--line); }
.cotizacion-tabla tbody tr:hover { background: var(--surface-2); }
.cotizacion-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.5rem; }
.cotizacion-valor { text-align: right; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.table-note { margin-top: 0.8rem; font-size: 0.85rem; color: var(--ink-soft); }

/* Cotizaciones — componente flotante (visible en todo el sitio, a la
   bancosol/senarecom: una pestaña fija en el borde izquierdo que se
   expande al hacer clic). Usa la misma tabla .cotizacion-tabla de arriba. */
/* El botón y el panel se posicionan de forma INDEPENDIENTE, cada uno
   centrado en el viewport por su cuenta (top:50% + translateY(-50%) sobre
   su propia altura). Así ninguno depende del tamaño del otro: el botón
   nunca se mueve al abrir/cerrar, y el panel queda centrado en el mismo
   punto porque usa la misma fórmula de centrado. */
.cot-float-tab {
	position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 55;
	background: var(--gold); border: none; margin: 0; padding: 1.1rem 0.5rem;
	border-radius: 0 8px 8px 0; cursor: pointer; box-shadow: 3px 4px 14px rgba(6,46,26,0.25);
	transition: background-color 0.15s ease; display: flex; align-items: center; justify-content: center;
}
.cot-float-tab:hover { background: var(--gold-dark); }
.cot-float-tab-text {
	writing-mode: vertical-rl; transform: rotate(180deg);
	color: var(--green-3); font-family: "Barlow Condensed", sans-serif;
	font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem;
}
.cot-float-panel {
	position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 55;
	width: min(360px, 82vw); max-height: 80vh; overflow-y: auto;
	background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
	box-shadow: 4px 8px 28px rgba(6,46,26,0.32);
}
.cot-float-panel[hidden] { display: none; }
.cot-float-close {
	position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
	background: rgba(244,241,232,0.18); border: none; color: var(--on-green);
	width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.85rem;
	display: flex; align-items: center; justify-content: center;
}
.cot-float-close:hover { background: rgba(244,241,232,0.32); }
.cot-float-note { padding: 0 1.1rem 1rem; }
@media (max-width: 560px) {
	.cot-float-tab, .cot-float-panel { top: auto; bottom: 0.5rem; transform: none; }
}

/* Chatbot teaser */
.chatbot-teaser { background: linear-gradient(120deg, var(--green) 0%, var(--green-2) 100%); color: var(--on-green); }
.chatbot-wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.chatbot-wrap h2 { color: var(--on-green); }
.chatbot-wrap p { color: rgba(244,241,232,0.82); max-width: 52ch; }

/* ---------- Page / single templates ---------- */
.page-header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.page-header h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.page-date { display: block; margin-top: 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.page-content { max-width: 760px; }
.page-thumb { margin-bottom: 1.8rem; border-radius: var(--radius); overflow: hidden; }
.prose { font-size: 1.02rem; }
.prose h2, .prose h3 { margin: 1.6rem 0 0.8rem; }

.ficha-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2rem; }
.ficha-block { background: var(--surface); padding: 1.2rem 1.3rem; }
.ficha-block h3 { font-size: 0.95rem; text-transform: none; letter-spacing: 0; margin-bottom: 0.4rem; }
.ficha-block p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 620px) { .ficha-grid { grid-template-columns: 1fr; } }

.federacion-layout { display: grid; grid-template-columns: 1fr 260px; gap: 2.5rem; max-width: 980px; align-items: start; }
.ficha-side { background: var(--surface-2); border-radius: var(--radius); padding: 1.3rem; }
.ficha-shield { width: 96px; margin-bottom: 1rem; border-radius: var(--radius); overflow: hidden; }
.ficha-side h3 { font-size: 0.95rem; text-transform: none; letter-spacing: 0; margin-bottom: 0.4rem; }
.ficha-side p { font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 760px) { .federacion-layout { grid-template-columns: 1fr; } }

.verify-box {
	margin-top: 2.2rem; padding: 1.1rem 1.3rem; background: var(--surface-2);
	border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
	display: flex; gap: 1.2rem; align-items: center;
}
.verify-box p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }
.verify-qr { border-radius: 4px; background: #fff; padding: 4px; flex-shrink: 0; }
@media (max-width: 560px) { .verify-box { flex-direction: column; align-items: flex-start; } }

/* Verify page */
.verify-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 460px; margin-bottom: 2rem; }
.verify-form label { font-size: 0.85rem; font-weight: 600; color: var(--green); }
.verify-form-row { display: flex; gap: 0.7rem; }
.verify-form-row input {
	flex: 1; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius);
	font-family: "IBM Plex Mono", "Inter", monospace; font-size: 0.95rem;
}
.verify-form-row input:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.verify-result { padding: 1.4rem 1.6rem; border-radius: var(--radius); max-width: 560px; }
.verify-result-ok { background: color-mix(in srgb, var(--gold) 12%, var(--surface)); border: 1px solid var(--gold); }
.verify-result-fail { background: var(--surface-2); border: 1px solid var(--line); }
.verify-result h2 { font-size: 1.3rem; text-transform: none; letter-spacing: 0; margin: 0.3rem 0 0.6rem; }
.verify-result p { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Agenda / calendario ---------- */
.agenda-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: start; }
.agenda-calendar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.calendar-head h2 { font-size: 1.2rem; }
.cal-nav {
	width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
	background: var(--surface); cursor: pointer; font-size: 0.95rem; color: var(--green);
}
.cal-nav:hover { background: var(--surface-2); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); padding-bottom: 0.4rem; text-transform: uppercase; }
.cal-day {
	aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	border-radius: 4px; font-size: 0.85rem; color: var(--ink); position: relative;
}
.cal-day.is-empty { visibility: hidden; }
.cal-day.has-event { background: var(--green); color: var(--on-green); font-weight: 600; cursor: default; }
.cal-day.has-event::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin-top: 2px; }
.cal-day.is-today:not(.has-event) { border: 1px solid var(--gold-dark); }

.agenda-list h2 { font-size: 1.2rem; margin-bottom: 1.2rem; }
.agenda-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.agenda-items li {
	display: flex; flex-direction: column; gap: 0.15rem;
	padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.agenda-item-date { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-dark); }
.agenda-items a { font-weight: 600; color: var(--green); }
.agenda-items a:hover { color: var(--gold-dark); }
.agenda-item-lugar { font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 860px) { .agenda-layout { grid-template-columns: 1fr; } }

/* ---------- Mapa de federaciones ---------- */
.map-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.bo-map-wrap { position: sticky; top: 1.5rem; }
.bo-map { width: 100%; height: auto; }
.bo-dept {
	fill: var(--green); stroke: var(--surface); stroke-width: 2; cursor: pointer;
	transition: fill 0.15s ease; paint-order: stroke;
}
.bo-dept:hover, .bo-dept:focus-visible { fill: var(--green-2); }
.bo-dept.is-active { fill: var(--gold); }
.bo-dept:focus-visible { outline: none; stroke: var(--gold-dark); }
.map-note { text-align: center; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.6rem; }

.map-filter-status { margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.map-filter-status h2 { font-size: 1.35rem; text-transform: none; letter-spacing: 0; }

.fed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.fed-card {
	display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.fed-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.fed-card.is-hidden { display: none; }
.fed-card-shield { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.fed-card-shield img { width: 100%; height: 100%; object-fit: cover; }
.fed-card-shield-placeholder {
	display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--gold);
	font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 0.85rem;
}
.fed-card-body { display: flex; flex-direction: column; gap: 0.15rem; }
.fed-card-body b { font-size: 0.9rem; color: var(--green); line-height: 1.25; }
.fed-card-dept { font-size: 0.76rem; color: var(--ink-soft); }
@media (max-width: 960px) { .map-layout { grid-template-columns: 1fr; } .bo-map-wrap { position: static; max-width: 360px; margin: 0 auto; } }
@media (max-width: 560px) { .fed-grid { grid-template-columns: 1fr; } }

/* ---------- Biblioteca de documentos ---------- */
.doc-tabs { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.doc-tab {
	padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--line);
	font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); background: var(--surface);
}
.doc-tab:hover { border-color: var(--green); color: var(--green); }
.doc-tab.is-active { background: var(--green); border-color: var(--green); color: var(--on-green); }

.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.doc-card {
	display: flex; gap: 1rem; background: var(--surface); border: 1px solid var(--line);
	border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 1.2rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.doc-card-icon {
	flex-shrink: 0; width: 44px; height: 52px; border-radius: 4px;
	background: var(--green); color: var(--gold); display: flex; align-items: center; justify-content: center;
	font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
}
.doc-card-type { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.2rem; }
.doc-card-body h3 { font-size: 1rem; text-transform: none; letter-spacing: 0; margin-bottom: 0.3rem; }
.doc-card-numero { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 0.7rem; }
.doc-card-pending { display: inline-block; font-size: 0.8rem; color: var(--ink-soft); font-style: italic; }
@media (max-width: 900px) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .doc-grid { grid-template-columns: 1fr; } }

/* ---------- Boletín / newsletter ---------- */
.newsletter { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.newsletter-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	flex-wrap: wrap; padding: 2.6rem 1.25rem;
}
.newsletter-inner > div:first-child { max-width: 46ch; }
.newsletter-inner h2 { font-size: 1.5rem; margin: 0.2rem 0 0.4rem; }
.newsletter-inner p { color: var(--ink-soft); font-size: 0.92rem; }
.newsletter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter-form input[type="email"] {
	padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
	font-size: 0.92rem; min-width: 240px;
}
.newsletter-form input[type="email"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.newsletter-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.newsletter-msg { font-weight: 600; padding: 0.8rem 1.2rem; border-radius: var(--radius); }
.newsletter-msg-ok { background: color-mix(in srgb, var(--gold) 18%, var(--surface)); color: var(--green); }
.newsletter-msg-error { background: #fbe4e1; color: #7a2b20; }

/* ---------- Redes sociales ---------- */
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.social-card {
	display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
	padding: 1.4rem 1rem; background: var(--surface); border: 1px solid var(--line);
	border-top: 3px solid var(--gold);
	border-radius: var(--radius); font-weight: 700; font-size: 0.82rem; color: var(--green);
	text-transform: uppercase; letter-spacing: 0.04em;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.social-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.social-card-icon {
	width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--gold);
	display: flex; align-items: center; justify-content: center;
}
@media (max-width: 620px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }

.fb-feed { margin-top: 2.2rem; display: flex; flex-direction: column; align-items: center; }
.fb-feed-label { margin-bottom: 0.9rem; }
.fb-feed-wrap {
	max-width: 514px; width: 100%; overflow: hidden;
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
	padding: 6px; box-shadow: 0 4px 16px rgba(6,46,26,0.08);
}
/* .fb-feed-scale se escala por JS (main.js) para que el widget de Facebook
   (ancho/alto fijos por diseño de Meta) quepa en pantallas angostas sin
   perder proporción ni dejar scroll horizontal. */
.fb-feed-scale { transform-origin: top left; width: 514px; }
.fb-feed-scale iframe { display: block; width: 514px; height: 800px; border-radius: 4px; }

/* ---------- Portal de capacitación ---------- */
.curso-card {
	display: block; background: var(--surface); border: 1px solid var(--line);
	border-top: 3px solid var(--gold); border-radius: var(--radius); overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.curso-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.curso-card-media { position: relative; aspect-ratio: 16/10; background: var(--green); }
.curso-card-media img { width: 100%; height: 100%; object-fit: cover; }
.curso-badge {
	position: absolute; top: 0.7rem; left: 0.7rem; background: var(--gold); color: var(--green-3);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	padding: 0.25rem 0.6rem; border-radius: 999px;
}
.curso-card-body { padding: 1.2rem; }
.curso-card-body h3 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; margin: 0.3rem 0 0.5rem; }
.curso-duracion { font-size: 0.82rem; color: var(--ink-soft); }
.callout-box {
	margin-top: 2.4rem; padding: 1.2rem 1.4rem; background: var(--surface-2);
	border-radius: var(--radius); border-left: 4px solid var(--gold);
}
.callout-box p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.callout-box a { color: var(--green); font-weight: 600; }

/* Certificado */
.certificado-card {
	max-width: 560px; margin: 0 auto; background: var(--surface); border: 2px solid var(--gold);
	border-radius: 10px; padding: 3rem 2.5rem; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.certificado-card .brand-mark { margin-bottom: 0.5rem; }
.certificado-label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; }
.certificado-nombre { font-size: clamp(1.6rem, 4vw, 2.2rem); text-transform: none; letter-spacing: 0; margin: 0.3rem 0; }
.certificado-curso, .certificado-fecha { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.certificado-qr { margin-top: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.certificado-qr .mono { font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; color: var(--ink-soft); }

/* Becas y oportunidades */
.oportunidad-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.oportunidad-item {
	background: var(--surface); padding: 1.1rem 1.3rem; display: flex; align-items: center;
	justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.oportunidad-item h3 { font-size: 1.02rem; text-transform: none; letter-spacing: 0; margin: 0.2rem 0; }
.oportunidad-item h3 a:hover { color: var(--gold-dark); }
.oportunidad-institucion { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.oportunidad-fecha { font-size: 0.8rem; font-weight: 600; color: var(--green); white-space: nowrap; }

/* ---------- Transmisión en vivo ---------- */
.live-badge {
	display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.9rem;
	background: var(--red); color: #fff; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em;
	padding: 0.35rem 0.8rem; border-radius: 999px;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.live-badge-header {
	margin-bottom: 0; font-size: 0.72rem; padding: 0.22rem 0.65rem; opacity: 1;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.live-badge-header:hover { background: #a81f10; transform: translateY(-1px); }
.live-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--green-3); }
.live-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-empty {
	text-align: center; padding: 3.5rem 2rem; background: var(--surface-2); border-radius: var(--radius);
	display: flex; flex-direction: column; align-items: center; gap: 0.6rem; max-width: 480px; margin: 0 auto;
}
.live-empty h2 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.live-empty p { color: var(--ink-soft); max-width: 40ch; }
.live-empty .btn { margin-top: 0.8rem; }

/* ---------- Buscador del header (topbar) ---------- */
.header-search {
	display: flex; align-items: stretch; height: 30px;
	border: 1px solid rgba(244,241,232,0.25); border-radius: 999px;
	background: rgba(244,241,232,0.08); overflow: hidden;
}
.header-search input {
	width: 150px; padding: 0 0 0 0.85rem; border: none; background: transparent;
	font-size: 0.78rem; color: var(--on-green); line-height: 1;
}
.header-search input::placeholder { color: rgba(244,241,232,0.55); }
.header-search input:focus-visible { outline: none; }
.header-search:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
.header-search button {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	border: none; background: transparent; color: var(--on-green); width: 34px; cursor: pointer;
}
.header-search button:hover { color: var(--gold); }
@media (max-width: 640px) { .header-search input { width: 110px; } }

.search-results-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 760px; }
.search-result-item { background: var(--surface); padding: 1.1rem 1.3rem; }
.search-result-item h3 { font-size: 1.02rem; text-transform: none; letter-spacing: 0; margin: 0.25rem 0 0.35rem; }
.search-result-item h3 a:hover { color: var(--gold-dark); }
.search-result-item p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

/* ---------- Botones flotantes (FAB) ---------- */
.fab {
	position: fixed; right: 1.5rem; z-index: 60; width: 56px; height: 56px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(6,46,26,0.25);
	border: none; cursor: pointer; font-weight: 700; transition: transform 0.15s ease;
}
.fab:hover { transform: translateY(-2px); }
.fab-whatsapp { bottom: 1.5rem; background: #25d366; color: #fff; font-size: 0.78rem; letter-spacing: 0.02em; }

/* El botón del chatbot usa el sticker del "minerito" tal cual (ya trae su
   propia forma de burbuja con cola) — sin círculo de fondo ni sombra dura. */
.fab-chatbot {
	/* Es 12px más ancho que el resto de los FAB (68px vs 56px); se corrige
	   el "right" para que su centro quede alineado con el de WhatsApp,
	   ya que ambos comparten el mismo eje vertical. */
	bottom: 6.7rem; right: 1.125rem; width: 68px; height: 68px; background: transparent;
	box-shadow: none; padding: 0;
}
.fab-chatbot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(6,46,26,0.35)); }

@media (max-width: 560px) {
	.fab { right: 1rem; width: 50px; height: 50px; }
	.fab-chatbot { bottom: 5.8rem; right: 0.75rem; width: 58px; height: 58px; }
	.fab-whatsapp { bottom: 1rem; }
}

/* ---------- Chatbot ---------- */
.chatbot-panel {
	position: fixed; right: 1.5rem; bottom: 10rem; z-index: 61; width: min(340px, calc(100vw - 2rem));
	background: var(--surface); border-radius: 12px; box-shadow: 0 12px 40px rgba(6,46,26,0.28);
	border: 1px solid var(--line); display: flex; flex-direction: column; max-height: min(480px, 70vh);
}
.chatbot-head {
	display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem;
	background: var(--green); color: var(--on-green); border-radius: 12px 12px 0 0;
}
.chatbot-head strong { display: block; font-size: 0.92rem; }
.chatbot-head span { display: block; font-size: 0.74rem; color: rgba(244,241,232,0.7); }
.chatbot-close { background: none; border: none; color: var(--on-green); font-size: 1rem; cursor: pointer; padding: 0.2rem; }
.chatbot-messages { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.chatbot-msg { padding: 0.6rem 0.85rem; border-radius: 10px; font-size: 0.86rem; line-height: 1.5; max-width: 88%; }
.chatbot-msg-bot { background: var(--surface-2); color: var(--ink); align-self: flex-start; }
.chatbot-msg-user { background: var(--green); color: var(--on-green); align-self: flex-end; }
.chatbot-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.1rem 0.8rem; }
.chatbot-chip {
	font-size: 0.76rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--line);
	background: var(--surface); cursor: pointer; color: var(--ink-soft);
}
.chatbot-chip:hover { border-color: var(--gold); color: var(--green); }
.chatbot-form { display: flex; gap: 0.5rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--line); }
.chatbot-form input {
	flex: 1; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.86rem;
}
.chatbot-form input:focus-visible { outline: 2px solid var(--gold); outline-offset: -1px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-3); color: var(--on-green); margin-top: 2rem; border-top: 3px solid var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding: 3.5rem 1.25rem 2.5rem; }
.footer-col h3 { color: var(--on-green); font-size: 0.9rem; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { color: rgba(244,241,232,0.8); font-size: 0.88rem; }
.footer-col a:hover { color: var(--gold); }
.footer-col li { font-size: 0.88rem; color: rgba(244,241,232,0.8); }
.footer-brand p { color: rgba(244,241,232,0.7); font-size: 0.88rem; max-width: 32ch; margin-top: 0.8rem; }
.footer-bottom {
	border-top: 1px solid rgba(244,241,232,0.12); padding: 1.1rem 1.25rem;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
	font-size: 0.78rem; color: rgba(244,241,232,0.55);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }