/*
Theme Name: Hello Elementor Child — Fundación Luces
Theme URI: https://educativaluces.org.ar
Description: Child theme de Hello Elementor para el sitio de Fundación Educativa Luces.
Author: MD Marketing Digital
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* =============================================================================
   1. Tokens — variables base de diseño del sitio.
   ============================================================================= */

:root {
	/* Fundación Luces — tokens base. Escala 1:1: 1 px del comp
	   (artboard 1980 px) = 1 px CSS. Valores medidos con PyMuPDF sobre los 13 comps.
	   Medido directamente sobre los comps, sin estimar por convención de rubro. */

	/* --- Paleta. Excluidos por no ser color del sitio: #000000 (plancha bajo los
	   heroes, nunca visible), #12256D (rects muertos de Fundación) y el #EFB81B de
	   la anotación del diseñador. Pendiente: el pill AYUDANOS del slideshow del Home
	   es #EFB81B (p.1) / #F9EC06 (p.2-3) con texto #303030, contra el #034F10 + #FFFFFF
	   de Home_v3 — no se tokeniza hasta que WHYNOT lo resuelva. El gradiente #0B1709 ->
	   #111E0B de las cards de Donar está quemado en los JPG: no es CSS. --- */
	--luces-verde-casi-negro: #032307;	/* fondo de footer y barra legal · H2/H3/H4 oscuros · títulos de card de proyecto · glifo de Instagram */
	--luces-verde-oscuro: #034F10;		/* primario: pill AYUDANOS · H2 de sección · todos los links del patrón de link subrayado · divisores · botones de balance */
	--luces-verde-lima: #51930C;		/* acción: fill de los botones pill · "Cómo colaborar" · nodos del diagrama · íconos de valores · barras de cita */
	--luces-verde-claro: #E6EFDA;		/* fondo de la card "Cómo colaborar" y de las cards del carrusel de valores · divisor der. de Home */
	--luces-crema: #F6F2F1;			/* fondo de bandas · cards de proyecto del Home · texto del menú · H1 de los heroes · todo el texto del footer */
	--luces-blanco: #FFFFFF;		/* fondos de banda · cards blancas · inputs · label del pill · eyebrows y bajadas de hero interior */
	--luces-blanco-calido: #F9F7ED;		/* SOLO los 3 dots del carrusel del hero del Home */
	--luces-gris-calido: #ECEBE7;		/* borde de los 27 inputs · sunburst de Home (al 50 %) · bloque offset del logo aliado · divisor izq. de Home */
	--luces-gris-claro: #E5E6E7;		/* dots inactivos de galería (al 40 % -> #F4F5F5) · rule vertical de Fundación · placeholders de foto de la nota · borde de la card de la nota */
	--luces-gris-medio: #898989;		/* todo el cuerpo secundario · teléfonos de 36 px · hairlines · dot activo · fondo de la banda ad honorem */
	--luces-gris-oscuro: #303030;		/* SOLO las bajadas de 16 px de las cards de proyecto */
	--luces-casi-negro: #231F20;		/* plancha oscurecedora bajo las imágenes de las cards del índice (foto encima al 79-90 %) */
	--luces-gris-foto-banda: #E2E1E6;	/* NO es fill: gris horneado en el JPG de la banda "Cómo ayudar". Usar como background-color de respaldo */
	--luces-gris-foto-home7: #E2E2E2;	/* NO es fill: tercio izquierdo gris horneado en el JPG de Home. background-color de respaldo */
	--luces-azul-aliado: #252B5D;		/* fondo quemado del JPG del logo Potenciar Solidario */
	--luces-amarillo-marca: #F9FF01;	/* sol del logo, muestreado del raster (no es un fill vectorial) */
	--luces-amarillo-marca-header: #FCFE00;	/* mismo sol, muestreado en el header */

	/* --- Tipografía. Familia única: Plus Jakarta Sans self-hosted (se
	   descartan Jost y el corte Light 300). Tamaños 1:1 con el comp. --- */
	--luces-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--luces-fw-regular: 400;
	--luces-fw-medium: 500;
	--luces-fw-semibold: 600;
	--luces-fw-bold: 700;

	--luces-fs-h1: 63px;			/* comp 62,93 · 600 · #F6F2F1 sobre foto */
	--luces-lh-h1: 1.14;			/* 71,65/62,93 (Home). Noticias índice usa 68 = 1,08 */
	--luces-fs-h2: 62px;			/* 600 · #032307 o #034F10. Variante Regular 400 en "Soñamos. Planeamos. Hacemos." */
	--luces-lh-h2: 1.20;			/* 74,4/62 */
	--luces-fs-h3: 48px;			/* 600 · #032307 o #034F10. Variante Regular 400 en "Potenciar Solidario." (lh 1,25) */
	--luces-lh-h3: 1.20;			/* 57,6/48 */
	--luces-fs-h4: 36px;			/* 600 · #51930C o #034F10 · H1 de la nota individual */
	--luces-lh-h4: 1.19;			/* 43/36 · 1,20 (43,2) en la nota */
	--luces-fs-h5: 32px;			/* 600 · #032307 / #034F10 / #51930C · títulos de card y de sección interna */
	--luces-lh-h5: 1.06;			/* 33,9/32 cuando va a 2 líneas */
	--luces-fs-card-title: 22px;		/* 600 · #032307 · títulos de card de noticia */
	--luces-lh-card-title: 1.27;		/* 28/22 */
	--luces-fs-eyebrow: 24px;		/* 500 · #034F10 en Home, #FFFFFF en heroes interiores */
	--luces-lh-eyebrow: 1.42;		/* 34/24 en Home; 1 línea en el resto */
	--luces-fs-lead: 24px;			/* 400 · #898989 / #032307 / #FFFFFF · bajadas de hero y leads de sección */
	--luces-lh-lead: 1.33;			/* 32/24 */
	--luces-fs-body-l: 22px;		/* 500 (+700 inline) · Fundación */
	--luces-lh-body-l: 1.55;		/* 34/22. Variante Regular 400 lh 1,27 (28/22) en Fundación */
	--luces-fs-body: 18px;			/* 400 (+700/italic inline) · #898989 dominante */
	--luces-lh-body: 1.56;			/* 28/18. Dentro de las cards "Cómo colaborar" el comp usa 25 y 21,6 (sin resolver) */
	--luces-fs-body-s: 16px;		/* 400 · #303030 en bajadas de card, #F6F2F1 en el footer */
	--luces-lh-body-s: 1.50;		/* 24/16 */
	--luces-fs-dato: 48px;			/* 500 · #898989 · "+20 Años" (Home) */
	--luces-fs-tel: 36px;			/* 600 · #898989 en cards, #032307 en Donar · los 7 teléfonos grandes */
	--luces-fs-nav: 14px;			/* 700 · #F6F2F1 · mayúsculas tipeadas, no text-transform */
	--luces-fs-link: 14px;			/* 600 · #034F10 / #FFFFFF / #F6F2F1 · el patrón de link subrayado (70 instancias) */
	--luces-fs-boton: 16px;			/* 700 · #FFFFFF · labels de los pills */
	--luces-fs-placeholder: 14px;		/* 400 · #898989. Se reemplaza el Light 300 del comp */
	--luces-fs-micro: 12px;			/* 500 · #898989 · rótulos de los placeholders de foto de la nota */
	--luces-fs-legal: 12px;			/* 400 PJS. El comp usa Jost Light 300, se reemplaza por PJS */
	--luces-fs-meta: 10px;			/* 400 · #898989 · fecha y autor de la nota individual */

	/* --- Tracking. MEDIDO carácter a carácter contra los avances nativos de la fuente
	   medido sobre la fuente embebida del diseño: resuelve una contradicción de medición vs
	   proyecto-solidario V-SOBRA 1. Cuerpo y títulos <= 32 px: +0,01 em (18 px Regular
	   medido +0,0096 em, +2,04 % de ancho de línea; 32 px SemiBold +0,0093 em). Titulares
	   >= 36 px y toda la UI: 0 (nav 14 Bold medido -0,0024 em = -0,07 px sobre 106,4;
	   labels de botón 16 Bold 0,000; links 14 SemiBold -0,0014 em). El "0,005 em en nav y
	   labels" medido en el comp es un WORD-spacing (+0,07 px por espacio), no letter-spacing, y no
	   se replica. --- */
	--luces-tracking: 0.01em;		/* body 16/18/22/24 y H de 32 px */
	--luces-tracking-titular: 0;		/* H de 36/48/62/63 px */
	--luces-tracking-ui: 0;			/* nav, labels de botón, links del patrón de link subrayado, eyebrow 24 Medium, meta 10 */

	/* --- Containers: uno global + dos utilidades, en vez de los seis anchos
	   ad hoc del comp (1164 / 1211,9 / 1102,7 / 1093 / 1199,2 / 1196,1). --- */
	--luces-container: 1164px;		/* header, barra legal, heroes, cuerpo de página */
	--luces-container-wide: 1212px;		/* grids de cards de proyecto ("Otros Proyectos" mide 1211,9 centrado exacto) */
	--luces-container-narrow: 1104px;	/* bloques CTA + formulario (Noticias y Ayudanos miden 1102,7) */

	/* --- Radios --- */
	--luces-radius: 12px;			/* token único: cards, pill AYUDANOS, barras de ícono de Donar, botones de balance, placeholders */
	--luces-radius-pill: 19.92px;		/* botones pill (medido 19,92, NO altura/2 ni 999px) */
	--luces-radius-noticia: 9.845px;	/* imágenes de card de noticia (índice y Home). En "Otras noticias" el comp mide ~7 */
	--luces-radius-galeria: 13.8px;		/* marco del carrusel de galería de proyecto */
	--luces-radius-placeholder-foto: 13.3px;/* los 2 placeholders de foto de la nota individual */

	/* --- Link con subrayado corto: el componente más repetido del sitio, 70
	   instancias. NO es text-decoration: el subrayado es más corto que el texto (label
	   77-118 px). Excepciones sin subrayado: "VER TODAS ›" (Home) y el botón outline
	   "CONTACTANOS" de Home. --- */
	--luces-link-underline-w: 57px;		/* medido 56,79 */
	--luces-link-underline-h: 1px;		/* medido lw 0,957 */
	--luces-link-underline-gap: 11px;	/* desde el borde inferior de la caja del texto */
	--luces-link-underline-color: currentColor;

	/* --- Botones --- */
	--luces-btn-pill-w: 257px;		/* medido 257,09 · ANCHO FIJO: los dos labels miden 206,8 y 127,6 px */
	--luces-btn-pill-h: 40.96px;
	--luces-btn-pill-bg: var(--luces-verde-lima);
	--luces-btn-pill-fg: var(--luces-blanco);
	--luces-btn-pill-radius: var(--luces-radius-pill);
	--luces-btn-pill-gap: 31.74px;		/* separación entre los dos pills del par */
	--luces-btn-outline-w: 142.1px;		/* "CONTACTANOS", solo Home */
	--luces-btn-outline-h: 24.7px;
	--luces-btn-outline-border: 0.5px solid var(--luces-verde-oscuro);
	--luces-btn-icono-w: 263.44px;		/* "BALANCE 2023/24/25", solo Donar */
	--luces-btn-icono-h: 60px;
	--luces-btn-icono-bg: var(--luces-verde-oscuro);
	--luces-btn-icono-radius: var(--luces-radius);
	--luces-btn-icono-pad-left: 43.5px;	/* borde -> ícono de documento (16,4 x 21,9) */
	--luces-btn-icono-gap: 18px;		/* ícono -> label */

	/* --- Inputs (27 campos + 4 cajas bancarias). El comp dibuja el borde a 0,488-0,5 px;
	   se normaliza a 1 px porque medio píxel no renderiza parejo. --- */
	--luces-input-h: 48px;
	--luces-input-border: 1px solid var(--luces-gris-calido);
	--luces-input-radius: 0;		/* esquinas rectas, verificado a 6x */
	--luces-input-pad-x: 22.5px;
	--luces-input-gap: 16px;		/* separación vertical entre campos */
	--luces-input-row-gap: 10px;		/* fila de 2 campos al 50 % (Nombre / Apellido) */
	--luces-textarea-h: 109.8px;

	/* --- Header: transparente, superpuesto al hero, sin borde ni sombra --- */
	--luces-header-logo-w: 170px;		/* el ANCHO manda: la caja es 173x173 pero el arte útil mide 169,8 x 125,9 */
	--luces-header-menu-top: 133px;		/* línea de texto del menú: y 132,9-154,3 */
	--luces-header-pill-w: 116.7px;
	--luces-header-pill-h: 24.7px;
	--luces-header-pill-radius: 12px;	/* medido 12,00 exactos, NO 999px */
	--luces-header-pill-bg: var(--luces-verde-oscuro);
	--luces-header-pill-fg: var(--luces-blanco);
	--luces-header-solid-bg: var(--luces-verde-casi-negro);	/* variante con fondo sólido para 404, búsqueda, gracias y legales */

	/* --- Footer: banda de 546 px, 4 columnas, sin menú ni links legales --- */
	--luces-footer-h: 546px;
	--luces-footer-bg: var(--luces-verde-casi-negro);
	--luces-footer-fg: var(--luces-crema);
	--luces-footer-col-1: 409.6px;
	--luces-footer-col-2: 763.2px;
	--luces-footer-col-3: 1052.2px;
	--luces-footer-col-4: 1343.7px;
	--luces-divisor-w: 108.9px;		/* divisor de marca (barra corta), >= 12 usos */
	--luces-divisor-h: 1.5px;

	/* --- Barra legal. CORRECCIÓN de contraste: el comp usa #034F10
	   sobre #032307 = 1,71:1, ilegible. Se reemplaza por #898989 (gris medio, ya en la
	   paleta) = 4,81:1, que pasa WCAG AA a 12 px sin subir el volumen del bloque. Los
	   candidatos descartados: #51930C = 4,43:1 (falla por 0,07) y cualquier crema/blanco
	   = 15-17:1, tan fuerte como el copy del footer de arriba. El hairline de 0,25 px
	   sigue en #034F10: es decoración, no texto. --- */
	--luces-legal-h: 105.9px;
	--luces-legal-bg: var(--luces-verde-casi-negro);
	--luces-legal-fg: #898989;
	--luces-legal-hairline: var(--luces-verde-oscuro);
}

/* =============================================================================
   2. Fuentes — Plus Jakarta Sans self-hosted
   Solo 5 cortes: Regular 400, Italic 400, Medium 500, SemiBold 600, Bold 700.
   Se descartan Jost Light (barra legal -> PJS) y PJS Light 300 (placeholders -> 400).
   Origen: paquete oficial de Plus Jakarta Sans (SIL OFL), copia de la licencia en fonts/OFL.txt.
   ============================================================================= */

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('fonts/plus-jakarta-sans-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('fonts/plus-jakarta-sans-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('fonts/plus-jakarta-sans-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('fonts/plus-jakarta-sans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =============================================================================
   3. Base — tipografía y reset mínimo del child
   Tracking según tokens: 0.01em en 16-32 px · 0 en >= 36 px y en toda la UI.
   ============================================================================= */

body {
	font-family: var(--luces-font);
	font-size: var(--luces-fs-body);
	line-height: var(--luces-lh-body);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
	background-color: var(--luces-blanco);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--luces-font);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--luces-font);
	font-weight: var(--luces-fw-semibold);
	margin: 0;
	letter-spacing: var(--luces-tracking-titular);
}

h1 { font-size: var(--luces-fs-h1); line-height: var(--luces-lh-h1); color: var(--luces-crema); }
h2 { font-size: var(--luces-fs-h2); line-height: var(--luces-lh-h2); color: var(--luces-verde-casi-negro); }
h3 { font-size: var(--luces-fs-h3); line-height: var(--luces-lh-h3); color: var(--luces-verde-casi-negro); }
h4 { font-size: var(--luces-fs-h4); line-height: var(--luces-lh-h4); color: var(--luces-verde-oscuro); }

/* 32 px y 22 px sí llevan el tracking de cuerpo (ver tokens de tracking). */
h5 {
	font-size: var(--luces-fs-h5);
	line-height: var(--luces-lh-h5);
	color: var(--luces-verde-casi-negro);
	letter-spacing: var(--luces-tracking);
}

h6 {
	font-size: var(--luces-fs-card-title);
	line-height: var(--luces-lh-card-title);
	color: var(--luces-verde-casi-negro);
	letter-spacing: var(--luces-tracking);
}

p { margin: 0; }

.luces-eyebrow {
	font-size: var(--luces-fs-eyebrow);
	line-height: var(--luces-lh-eyebrow);
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-verde-oscuro);
}

.luces-lead {
	font-size: var(--luces-fs-lead);
	line-height: var(--luces-lh-lead);
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-body-s {
	font-size: var(--luces-fs-body-s);
	line-height: var(--luces-lh-body-s);
	letter-spacing: var(--luces-tracking);
}

.luces-dato {
	font-size: var(--luces-fs-dato);
	font-weight: var(--luces-fw-medium);
	line-height: 1;
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-gris-medio);
}

.luces-divisor {
	display: block;
	width: var(--luces-divisor-w);
	height: var(--luces-divisor-h);
	background-color: var(--luces-verde-oscuro);
	border: 0;
	margin: 0;
}

/* Contenedor global: 1164 px del comp, con aire lateral cuando no entra. */
.luces-container {
	width: min(var(--luces-container), calc(100% - 48px));
	margin-left: auto;
	margin-right: auto;
}

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

/* =============================================================================
   4. Header — transparente y superpuesto al hero
   HFE envuelve el template en <header id="masthead">. La variante sólida se
   activa con la clase de body `luces-header-solid` (meta `_luces_header_solid`)
   o con `.luces-header--solid` sobre el propio #masthead.
   ============================================================================= */

.ehf-header #masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background-color: transparent;
}

/* OJO: `ehf-header` es una clase del propio <body> (HFE), no un ancestro: el
   selector tiene que ser `body.luces-header-solid.ehf-header`, no
   `body.luces-header-solid .ehf-header`. */
body.luces-header-solid.ehf-header #masthead,
.ehf-header #masthead.luces-header--solid {
	position: static;
	background-color: var(--luces-header-solid-bg);
}

.ehf-header #masthead .main-title.bhf-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* El contenedor raíz del template de HFE. */
.luces-header {
	--luces-header-h: 200px;
	padding: 0;
	background-color: transparent;
}

.luces-header > .e-con-inner,
.luces-header.e-con > .e-con-inner {
	position: relative;
	width: min(var(--luces-container), calc(100% - 48px));
	max-width: min(var(--luces-container), calc(100% - 48px));
	min-height: var(--luces-header-h);
	margin-inline: auto;
	padding: 0;
	display: block;
}

.luces-header .luces-header__logo {
	position: absolute;
	left: 0;
	top: 20.7px;
	width: var(--luces-header-logo-w);
	margin: 0;
}

.luces-header .luces-header__logo img {
	display: block;
	width: var(--luces-header-logo-w);
	height: auto;
}

.luces-header .luces-header__nav {
	position: absolute;
	top: 132.9px;
	right: 17.9px;
	width: auto;
	max-width: none;
	padding: 0;
}

.luces-nav__list {
	display: flex;
	align-items: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.luces-nav__list > li { margin: 0; }
.luces-nav__list > li:nth-child(2) { margin-left: 37.1px; }
.luces-nav__list > li:nth-child(3) { margin-left: 44px; }
.luces-nav__list > li:nth-child(4) { margin-left: 42.6px; }
.luces-nav__list > li:nth-child(5) { margin-left: 59.9px; }

.luces-nav__list > li > a {
	display: inline-block;
	position: relative;
	font-family: var(--luces-font);
	font-size: var(--luces-fs-nav);
	font-weight: var(--luces-fw-bold);
	line-height: 21.4px;
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-crema);
	text-decoration: none;
	white-space: nowrap;
}

/* `display:block` (no inline-block): un inline-block dentro del <li> se apoya
   en la baseline del strut heredado del body (18/1,56) y baja el menú 5 px. */
.luces-nav__list > li > a { display: block; }

.luces-nav__list > li > a:hover,
.luces-nav__list > li > a:focus {
	color: var(--luces-blanco);
	text-decoration: none;
}

/* Pill AYUDANOS: el rect va detrás del texto para no romper la línea del menú.
   Medidas del comp: 116,7 x 24,7, radio 12,00 (no 999), texto #FFFFFF. */
.luces-nav__list > li.luces-pill > a {
	color: var(--luces-blanco);
	z-index: 0;
}

.luces-nav__list > li.luces-pill > a::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 0.4px;
	transform: translateX(-50%);
	width: var(--luces-header-pill-w);
	height: var(--luces-header-pill-h);
	border-radius: var(--luces-header-pill-radius);
	background-color: var(--luces-header-pill-bg);
}

/* El nav es absoluto contra el contenedor del header, no contra su widget. */
.luces-header .elementor-widget-shortcode { position: static; }

/* ⚠ `reset.css` de Hello Elementor se encola DESPUÉS del style.css del child y
   trae `[type="button"],[type="submit"],button{display:inline-block}`. El
   selector de atributo empata en especificidad (0,1,0) con una sola clase y
   gana por orden de carga: por eso estos dos botones se califican con el
   elemento (`button.luces-…`, 0,1,1). Lo mismo con :hover/:focus, donde el
   reset pinta de MAGENTA (#c36). */
button.luces-burger { display: none; }
button.luces-drawer-close { display: none; }
.luces-drawer-scrim { display: none; }

/* =============================================================================
   5. Footer + barra legal
   ============================================================================= */

.ehf-footer #colophon { background-color: var(--luces-footer-bg); }

.luces-footer {
	--luces-footer-pad-top: 55.7px;
	background-color: var(--luces-footer-bg);
	color: var(--luces-footer-fg);
	padding: 0;
}

.luces-footer > .e-con-inner,
.luces-footer.e-con > .e-con-inner {
	width: min(var(--luces-container), calc(100% - 48px));
	max-width: min(var(--luces-container), calc(100% - 48px));
	margin-inline: auto;
	padding: 0;
	display: block;
}

.luces-footer__grid {
	display: grid;
	grid-template-columns: 353.6px 289px 291.5px 1fr;
	height: var(--luces-footer-h);
	align-items: start;
}

.luces-footer__grid > * { min-width: 0; }

.luces-footer__brand { padding-top: var(--luces-footer-pad-top); }

.luces-footer__logo {
	display: block;
	width: 173px;
	height: auto;
}

.luces-footer__tagline {
	margin-top: 12.4px;
	font-size: var(--luces-fs-body-s);
	line-height: var(--luces-lh-body-s);
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-footer-fg);
}

.luces-footer__divisor {
	margin-top: 30.1px;
	background-color: var(--luces-verde-oscuro);
}

.luces-footer__social {
	display: flex;
	align-items: flex-start;
	gap: 26.2px;
	margin-top: 53.9px;
}

.luces-footer__social a {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.luces-footer__social svg { display: block; }

.luces-footer__col { padding-top: 198.2px; }

.luces-footer__col-title {
	font-size: 18px;
	line-height: 24px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-footer-fg);
	margin: 0;
}

.luces-footer__col p {
	margin-top: 18.9px;
	font-size: var(--luces-fs-body-s);
	line-height: var(--luces-lh-body-s);
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-footer-fg);
}

.luces-footer__col a {
	color: var(--luces-footer-fg);
	text-decoration: none;
}

.luces-footer__col a:hover { text-decoration: underline; }

/* Barra legal: hairline #034F10 a todo el ancho + texto #898989 con contraste corregido. */
.luces-legal {
	background-color: var(--luces-legal-bg);
	border-top: 1px solid var(--luces-legal-hairline);
	padding: 0;
}

.luces-legal > .e-con-inner,
.luces-legal.e-con > .e-con-inner {
	width: min(var(--luces-container), calc(100% - 48px));
	max-width: min(var(--luces-container), calc(100% - 48px));
	margin-inline: auto;
	padding: 0;
	display: block;
}

.luces-legal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: calc(var(--luces-legal-h) - 1px);
}

.luces-legal__bar span,
.luces-legal__bar a {
	font-family: var(--luces-font);
	font-size: var(--luces-fs-legal);
	font-weight: var(--luces-fw-regular);
	line-height: 1.5;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-legal-fg);
	text-decoration: none;
}

.luces-legal__bar a:hover { text-decoration: underline; }

/* =============================================================================
   6. Componentes globales
   ============================================================================= */

/* Link con subrayado corto: 70 instancias. El subrayado es MÁS CORTO que el
   texto, por eso no es text-decoration. */
.luces-link {
	display: inline-block;
	font-family: var(--luces-font);
	font-size: var(--luces-fs-link);
	font-weight: var(--luces-fw-semibold);
	line-height: 1.49;
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-verde-oscuro);
	text-decoration: none;
	white-space: nowrap;
}

.luces-link::after {
	content: "";
	display: block;
	width: var(--luces-link-underline-w);
	height: var(--luces-link-underline-h);
	margin-top: var(--luces-link-underline-gap);
	background-color: var(--luces-link-underline-color);
}

.luces-link:hover,
.luces-link:focus { color: var(--luces-verde-lima); text-decoration: none; }

.luces-link--crema { color: var(--luces-crema); }
.luces-link--crema:hover,
.luces-link--crema:focus { color: var(--luces-blanco); }
.luces-link--blanco { color: var(--luces-blanco); }
.luces-link--sin-linea::after { display: none; }
.luces-link--18 { font-size: 18px; }
.luces-link--16 { font-size: 16px; }

/* Botón píldora sólido: ancho FIJO 257 px (los labels miden 206,8 y 127,6). */
.luces-btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--luces-btn-pill-w);
	height: var(--luces-btn-pill-h);
	padding: 0;
	border: 0;
	border-radius: var(--luces-btn-pill-radius);
	background-color: var(--luces-btn-pill-bg);
	color: var(--luces-btn-pill-fg);
	font-family: var(--luces-font);
	font-size: var(--luces-fs-boton);
	font-weight: var(--luces-fw-bold);
	line-height: 1;
	letter-spacing: var(--luces-tracking-ui);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.luces-btn-pill:hover,
.luces-btn-pill:focus,
.luces-btn-pill:focus-visible {
	background-color: var(--luces-verde-oscuro);
	color: var(--luces-btn-pill-fg);
	text-decoration: none;
}

.luces-btn-pill-group {
	display: flex;
	justify-content: center;
	gap: var(--luces-btn-pill-gap);
}

/* Hero + scrim global. El degradado es lateral,
   desde el verde casi negro de marca; se apaga con .luces-hero--no-scrim. */
.luces-hero {
	position: relative;
	width: 100%;
	min-height: 969px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--luces-verde-casi-negro);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.luces-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Calibrado sobre el render real midiendo el fondo compuesto bajo el bbox
	   del título, contra #F6F2F1. Barrido en los encabezados más claros: con
	   0,45 los nueve siguen al 100 % del área a 4,5:1; recién 0,35 hace bajar
	   uno a 96,1 % y 0,25 los tira a 85-96 %. Se toma 0,45 — el valor más
	   suave que mantiene el criterio con margen, y el que menos oscurece la
	   foto. Los stops relativos son los mismos de la calibración original
	   (1 / 0,933 / 0,467 / 0). Se apaga con .luces-hero--no-scrim y se puede
	   pisar por página con --luces-scrim-a. */
	background-image: linear-gradient(
		90deg,
		rgba(3, 35, 7, var(--luces-scrim-a, 0.45)) 0%,
		rgba(3, 35, 7, var(--luces-scrim-b, 0.42)) 40%,
		rgba(3, 35, 7, var(--luces-scrim-c, 0.21)) 72%,
		rgba(3, 35, 7, 0) 100%
	);
}

.luces-hero--no-scrim .luces-hero__scrim { display: none; }

/* Banda superior del encabezado: el degradado lateral se apaga al llegar al
   borde derecho del lienzo, que es justo donde vive el menú (14 px Bold
   #F6F2F1, bbox medido x 900-1554 · y 134-152 a 1980). Medido bajo ese bbox en
   los 15 estados de encabezado del sitio, sin banda el peor es el slide 2 del
   inicio con 52,4 % del área a 4,5:1, y hay otros cuatro entre 85,8 y 95,8 %
   (La Puna 85,8 · el índice de Noticias 88,1 · Ayudanos 92,3 · Becas 95,8).
   Con alfa 0,20 los quince quedan en 100,0 %.

   El alfa se sostiene hasta 160 px y cae a 0 en 280 px: el título más alto del
   sitio (el del índice de Noticias) arranca en y 320, así que la banda NO toca
   ningún H1 y los porcentajes bajo los títulos quedan idénticos (Δ 0,0 puntos
   medido en las 14 combinaciones del barrido). Va como ::after —no ::before—
   para pintarse por encima de las fotos del slideshow, que son hijos
   posicionados; el bloque de texto (.luces-hero__inner, z-index 1) le sigue
   ganando. Se apaga con .luces-hero--no-scrim y se pisa por página con
   --luces-scrim-nav-a. */
.luces-hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 280px;
	pointer-events: none;
	background-image: linear-gradient(
		180deg,
		rgba(3, 35, 7, var(--luces-scrim-nav-a, 0.2)) 0,
		rgba(3, 35, 7, var(--luces-scrim-nav-a, 0.2)) 160px,
		rgba(3, 35, 7, 0) 280px
	);
}

.luces-hero--no-scrim::after { display: none; }

.luces-hero__inner {
	position: relative;
	z-index: 1;
	width: min(var(--luces-container), calc(100% - 48px));
	margin-inline: auto;
}

/* Calificado con el elemento: el Theme Style del kit sale como
   `.elementor-kit-N h1{...}` (0,1,1) y le gana a una clase suelta (0,1,0) —
   se notaba sobre todo en mobile, donde el H1 se quedaba en 63 px. */
.luces-hero h1.luces-hero__title {
	margin: 0;
	padding-top: 371px;		/* glifos del H1 a y 367 = comp 367,6 */
	font-size: var(--luces-fs-h1);
	line-height: var(--luces-lh-h1);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-crema);
}

/* `line-height:0` en el <p>: el link es inline-block y sin esto arrastra el
   strut del body, que lo empuja ~10 px y engorda la caja. */
.luces-hero__cta { margin-top: 63px; line-height: 0; }

/* =============================================================================
   7. Formularios (Contact Form 7) — 27 campos del lote, misma caja
   Hello Elementor fuerza borde #666 + radio 3 en los inputs y pinta de MAGENTA
   (#c36) todo [type=submit]: las dos cosas se anulan acá, incluidos :hover,
   :focus y :focus-visible.
   ============================================================================= */

.luces-form { width: 100%; }

.luces-form .wpcf7-form p { margin: 0; }

/* El <label> que envuelve cada campo (etiqueta accesible: el comp solo tiene
   placeholders) computa inline-block y encoge la caja: hay que forzarlo a
   bloque o los campos de ancho completo quedan en su ancho intrínseco. */
.luces-form label { display: block; width: 100%; }

.luces-form .wpcf7-form-control-wrap { display: block; width: 100%; }

.luces-form input[type="text"],
.luces-form input[type="email"],
.luces-form input[type="tel"],
.luces-form input[type="url"],
.luces-form input[type="number"],
.luces-form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: var(--luces-input-h);
	padding: 0 var(--luces-input-pad-x);
	border: var(--luces-input-border);
	border-radius: var(--luces-input-radius);
	background-color: var(--luces-blanco);
	font-family: var(--luces-font);
	font-size: var(--luces-fs-placeholder);
	font-weight: var(--luces-fw-regular);
	line-height: normal;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
	transition: border-color .2s ease;
}

.luces-form textarea {
	height: var(--luces-textarea-h);
	padding-top: 14px;
	padding-bottom: 14px;
	resize: vertical;
}

.luces-form input[type="text"]:focus,
.luces-form input[type="email"]:focus,
.luces-form input[type="tel"]:focus,
.luces-form textarea:focus {
	border-color: var(--luces-verde-lima);
	outline: none;
}

.luces-form ::placeholder {
	font-family: var(--luces-font);
	font-size: var(--luces-fs-placeholder);
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
	opacity: 1;
}

.luces-form__field { margin-bottom: var(--luces-input-gap); }

.luces-form__row {
	display: flex;
	gap: var(--luces-input-row-gap);
	margin-bottom: var(--luces-input-gap);
}

.luces-form__row > .luces-form__field {
	flex: 1 1 50%;
	min-width: 0;
	margin-bottom: 0;
}

/* Campo trampa: sin display:none, fuera de la pantalla. */
.luces-form__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Submit estilizado como el link del patrón de link subrayado. El margen sale de la
   geometría del comp: textarea termina en 386,9 y el texto del submit arranca
   en 410,6 (= 16 del gap del campo + 7,7). */
.luces-form__submit {
	display: block;			/* inline-block arrastra el strut y suma 10,2 px */
	width: -moz-fit-content;
	width: fit-content;
	position: relative;
	margin-top: 7.7px;
}

.luces-form__submit input[type="submit"],
.luces-form__submit button[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	font-family: var(--luces-font);
	font-size: var(--luces-fs-link);
	font-weight: var(--luces-fw-semibold);
	line-height: 1.49;
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-verde-oscuro);
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.luces-form__submit input[type="submit"]:hover,
.luces-form__submit input[type="submit"]:focus,
.luces-form__submit input[type="submit"]:focus-visible,
.luces-form__submit input[type="submit"]:active,
.luces-form__submit button[type="submit"]:hover,
.luces-form__submit button[type="submit"]:focus,
.luces-form__submit button[type="submit"]:focus-visible,
.luces-form__submit button[type="submit"]:active {
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: var(--luces-verde-lima);
	text-decoration: none;
}

.luces-form__submit::after {
	content: "";
	display: block;
	width: var(--luces-link-underline-w);
	height: var(--luces-link-underline-h);
	margin-top: var(--luces-link-underline-gap);
	background-color: var(--luces-verde-oscuro);
}

.luces-form .wpcf7-spinner { margin: 0 0 0 10px; }

.luces-form .wpcf7-not-valid-tip {
	font-size: 12px;
	line-height: 1.4;
	color: #b3261e;
	margin-top: 4px;
}

.luces-form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 10px 14px;
	border-width: 1px;
	font-size: var(--luces-fs-body-s);
	line-height: var(--luces-lh-body-s);
	color: var(--luces-verde-casi-negro);
}

/* Card blanca del formulario (Home / Noticias): 575 x 478,1 r12. */
.luces-form-card {
	box-sizing: border-box;
	width: 575px;
	max-width: 100%;
	/* Padding medido del comp: 35,6 izq. · 29,7 der. (asimétrico) · 19,8 arriba
	   · 34,8 abajo, para que la card cierre en los 478,1 px del comp. */
	padding: 19.8px 29.7px 32.3px 35.6px;
	border-radius: var(--luces-radius);
	background-color: var(--luces-blanco);
}

.luces-form-card__title {
	font-size: var(--luces-fs-lead);
	line-height: 1.2;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-oscuro);
	margin: 0 0 36.3px;
}

/* =============================================================================
   8. Menú mobile — drawer, estándar MD (GLOBAL.md 2026-09-14)
   Panel min(90vw, 420px), 300 ms cubic-bezier(.22,.61,.36,1), swipe, Esc,
   foco atrapado, scroll bloqueado, safe-area.
   ============================================================================= */

@media (max-width: 1024px) {

	.luces-header > .e-con-inner,
	.luces-header.e-con > .e-con-inner { min-height: 120px; }

	.luces-header .luces-header__logo { top: 16px; width: 130px; }
	.luces-header .luces-header__logo img { width: 130px; }

	button.luces-burger {
		display: flex;
		position: absolute;
		top: 40px;
		right: 0;
		z-index: 1002;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		background: none;
		background-color: transparent;
		box-shadow: none;
		cursor: pointer;
	}

	button.luces-burger:hover,
	button.luces-burger:focus,
	button.luces-burger:focus-visible,
	button.luces-burger:active {
		background: none;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		color: var(--luces-crema);
	}

	.luces-burger__bars,
	.luces-burger__bars::before,
	.luces-burger__bars::after {
		content: "";
		display: block;
		width: 26px;
		height: 2px;
		background-color: var(--luces-crema);
	}

	.luces-burger__bars { position: relative; }
	.luces-burger__bars::before { position: absolute; top: -8px; left: 0; }
	.luces-burger__bars::after { position: absolute; top: 8px; left: 0; }

	.luces-header .luces-header__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 1001;
		width: min(90vw, 420px);
		height: 100vh;
		height: 100svh;
		max-width: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color: var(--luces-verde-casi-negro);
		transform: translateX(100%);
		transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
		padding: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) 24px;
	}

	.luces-header .luces-header__nav.is-open { transform: translateX(0); }
	.luces-header .luces-header__nav.luces-drawer-dragging { transition: none; }

	.luces-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		margin-top: 48px;
	}

	.luces-nav__list > li,
	.luces-nav__list > li:nth-child(2),
	.luces-nav__list > li:nth-child(3),
	.luces-nav__list > li:nth-child(4),
	.luces-nav__list > li:nth-child(5) { margin-left: 0; }

	.luces-nav__list > li > a { font-size: 16px; line-height: 24px; }

	.luces-nav__list > li.luces-pill > a { padding: 0 18px; }

	.luces-nav__list > li.luces-pill > a::before {
		left: 0;
		top: -6px;
		transform: none;
		width: 100%;
		height: 36px;
		border-radius: var(--luces-header-pill-radius);
	}

	button.luces-drawer-close {
		display: flex;
		position: absolute;
		top: calc(18px + env(safe-area-inset-top));
		right: calc(18px + env(safe-area-inset-right));
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		background-color: transparent;
		box-shadow: none;
		font-size: 30px;
		line-height: 1;
		color: var(--luces-crema);
		cursor: pointer;
	}

	button.luces-drawer-close:hover,
	button.luces-drawer-close:focus,
	button.luces-drawer-close:focus-visible,
	button.luces-drawer-close:active {
		background: none;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		color: var(--luces-blanco);
	}

	.luces-drawer-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background-color: rgba(3, 35, 7, 0.55);
		opacity: 0;
		visibility: hidden;
		transition: opacity 300ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 300ms;
	}

	.luces-drawer-scrim.is-open { opacity: 1; visibility: visible; }

	html.luces-drawer-locked,
	body.luces-drawer-locked { overflow: hidden; }

	/* El header abierto tiene que ganarle al scrim sin encerrarlo. */
	body.luces-drawer-locked .ehf-header #masthead { z-index: 1003; }

	.luces-hero { min-height: 560px; }
	.luces-hero h1.luces-hero__title { padding-top: 180px; font-size: 40px; line-height: 1.14; }
	.luces-hero__cta { margin-top: 28px; }

	/* Con el drawer abierto el disparador queda tapado por el panel: se oculta
	   y queda solo la × (el foco vuelve al botón recién al cerrar). */
	body.luces-drawer-locked button.luces-burger { display: none; }

	.luces-footer__grid {
		grid-template-columns: 1fr 1fr;
		height: auto;
		gap: 40px 24px;
		padding: 56px 0;
	}

	.luces-footer__brand,
	.luces-footer__col { padding-top: 0; }

	.luces-legal__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		min-height: 0;
		padding: 24px 0;
	}

	.luces-form-card { width: 100%; padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.luces-header .luces-header__nav,
	.luces-drawer-scrim { transition: none; }
}

@media (max-width: 640px) {
	.luces-footer__grid { grid-template-columns: 1fr; }
	.luces-hero h1.luces-hero__title { font-size: 34px; }
	.luces-btn-pill-group { flex-direction: column; align-items: center; gap: 16px; }
}

/* =============================================================================
   9. Página de proyecto — hero, detalle en 2 columnas, galería, bloque de cierre
   y grilla de cards. Todas las medidas son 1:1 del diseño (lienzo de 1980 px):
   los "tops" salen de pasar la baseline del diseño a caja de línea con las
   métricas reales de la familia (ascent 1,038 em · descent 0,222 em · gap 0).
   ============================================================================= */

/* El contenedor del maquetador trae padding propio y display flex: se anula
   para que las secciones se apilen con las medidas de esta hoja. */
.luces-sec > .e-con-inner,
.luces-sec.e-con > .e-con-inner {
	padding: 0;
	display: block;
	max-width: none;
}

/* --- 9.1 Hero de proyecto ---------------------------------------------------
   Eyebrow (24 Medium, baseline 414,75) + H1 (63 SemiBold, baseline 517,69) +
   bajada (24 Regular lh 32, baseline 597,45). Alto de la foto 969. */

.luces-hero.luces-hero--proyecto .luces-hero__inner { padding-top: 387.92px; }

.luces-hero--proyecto .luces-hero__eyebrow,
.luces-hero--indice .luces-hero__eyebrow,
.luces-hero--ayudanos .luces-hero__eyebrow {
	margin: 0;
	font-size: var(--luces-fs-eyebrow);
	line-height: var(--luces-lh-eyebrow);
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-blanco);
}

/* Calificado con el elemento y con las dos clases del hero: la hoja del
   maquetador emite `.elementor-kit-N h1{...}` y le gana a una clase suelta. */
.luces-hero.luces-hero--proyecto h1.luces-hero__title,
.luces-hero.luces-hero--indice h1.luces-hero__title,
.luces-hero.luces-hero--ayudanos h1.luces-hero__title {
	padding-top: 0;
	margin-top: 34.08px;
}

/* La medida de la bajada la fija cada página con `--luces-bajada-w`: el diseño
   corta las líneas a mano y no existe un ancho único que reproduzca los cortes
   de las seis páginas (la más larga pide >= 662 y otra pide < 606). */
.luces-hero--proyecto .luces-hero__bajada,
.luces-hero--indice .luces-hero__bajada {
	margin: 43.76px 0 0;
	max-width: var(--luces-bajada-w, 670px);
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-blanco);
}

/* --- 9.2 Detalle en 2 columnas ---------------------------------------------
   Columna izquierda 579,3 (= el ancho de las hairlines) + gap 68 + card 445,8.
   El alto mínimo de la fila fija dónde arranca la galería, que en el diseño
   está a la misma altura en las seis páginas. */

/* Las tres medidas verticales de esta sección las fija cada página: el diseño
   arranca la caja verde 3 px más arriba en cinco de las seis fichas, y el alto
   mínimo de la fila es lo que mantiene la galería siempre a la misma altura. */
.luces-proy-detalle { padding-top: var(--luces-detalle-pt, 78.01px); }

.luces-proy-detalle__row {
	display: flex;
	align-items: flex-start;
	gap: 68px;
	min-height: var(--luces-detalle-mh, 684.73px);
}

.luces-proy-detalle__col {
	flex: 0 0 579.3px;
	min-width: 0;
	padding-top: var(--luces-col-pt, 32.91px);
}

/* Hay hairline debajo de CADA bloque, incluido el último. El diseño la dibuja
   a 0,354 px: se normaliza a 1, como el resto de los medios píxeles. */
.luces-proy-bloque {
	border-bottom: 1px solid var(--luces-gris-medio);
	padding-bottom: 24.5px;
}

.luces-proy-bloque + .luces-proy-bloque { padding-top: 34.2px; }

.luces-proy-detalle h2.luces-proy-bloque__titulo {
	margin: 0;
	font-size: var(--luces-fs-h5);
	line-height: var(--luces-lh-h5);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-oscuro);
}

.luces-proy-bloque__texto {
	margin: 18.12px 0 0;
	font-size: var(--luces-fs-body);
	line-height: 28px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-proy-bloque__texto strong {
	font-weight: var(--luces-fw-bold);
	color: inherit;
}

/* --- 9.3 Card de la columna derecha ---------------------------------------- */

.luces-proy-detalle__aside { flex: 0 0 445.8px; min-width: 0; }

/* El aire de arriba y de abajo cambia por página: el contenido de la caja
   varía y el diseño la cierra siempre a la misma altura. */
.luces-colaborar {
	background-color: var(--luces-verde-claro);
	border-radius: var(--luces-radius);
	padding: var(--luces-card-pt, 29.52px) 29.7px var(--luces-card-pb, 52.08px) 31.89px;
}

/* Verde distinto al de los títulos de la columna izquierda: es del diseño. */
.luces-proy-detalle h2.luces-colaborar__titulo {
	margin: 0;
	font-size: var(--luces-fs-h5);
	line-height: var(--luces-lh-h5);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-lima);
}

/* Interlínea 25 acá contra 28 en la columna izquierda: también es del diseño. */
.luces-colaborar__texto {
	margin: 19.61px 0 0;
	font-size: var(--luces-fs-body);
	line-height: 25px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-colaborar__texto strong {
	font-weight: var(--luces-fw-bold);
	color: inherit;
}

.luces-colaborar__tel {
	margin: 1.76px 0 0;
	font-size: var(--luces-fs-tel);
	line-height: 1.2;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-gris-medio);
}

.luces-colaborar__tel + .luces-colaborar__texto { margin-top: 12.24px; }
.luces-colaborar__texto + .luces-colaborar__texto { margin-top: 0; }

/* `line-height: 0`: el link es inline-block y sin esto se apoya en el strut
   del cuerpo y baja varios píxeles. */
.luces-colaborar__cta { margin: 36.2px 0 0; line-height: 0; }

/* --- 9.4 Galería ------------------------------------------------------------
   Marco 870 x 594,06 con radio 13,8 + un punto por slide (9,04 de diámetro,
   27,2 entre centros). Sin flechas, sin contador, sin epígrafe, sin lightbox. */

.luces-proy-galeria__track {
	display: flex;
	width: min(870px, calc(100% - 48px));
	margin: 0 auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-radius: var(--luces-radius-galeria);
}

.luces-proy-galeria__track::-webkit-scrollbar { display: none; }

.luces-proy-galeria__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	aspect-ratio: 870 / 594;
	margin: 0;
}

/* El recorte real del diseño es de 0,8 px: cover sin reencuadre.
   La proporción va en la propia imagen: con `height: 100%` el porcentaje se
   resuelve contra un alto automático y la foto quedaba 0,7 px más baja que el
   marco. */
.luces-proy-galeria__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 870 / 594;
	object-fit: cover;
}

.luces-proy-galeria__dots {
	display: flex;
	justify-content: center;
	gap: 18.16px;
	margin-top: 39.12px;
}

/* El punto apagado se dibuja al 40 %: en sólido saldría el doble de oscuro. */
.luces-proy-galeria__dot {
	display: block;
	width: 9.04px;
	height: 9.04px;
	border-radius: 50%;
	background-color: var(--luces-gris-claro);
	opacity: .4;
}

.luces-proy-galeria__dot.is-active {
	background-color: var(--luces-gris-medio);
	opacity: 1;
}

/* --- 9.5 Bloque de cierre + par de botones ---------------------------------- */

/* La banda tiene alto propio y el par de botones se ancla al piso: así el
   título y el párrafo salen donde los pone el diseño, el par de botones cae en
   su altura exacta y el aire sobrante queda entre los dos, sin que el largo del
   párrafo corra el resto de la página. */
.luces-proy-cierre {
	display: flex;
	flex-direction: column;
	min-height: var(--luces-cierre-h, 472.03px);
	padding: 91.59px 24px var(--luces-cierre-pb, 125.98px);
	text-align: center;
}

.luces-proy-cierre h2.luces-proy-cierre__titulo {
	margin: 0;
	font-size: var(--luces-fs-h5);
	line-height: var(--luces-lh-h5);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-oscuro);
}

/* La medida de la caja la puede fijar cada página con `--luces-cierre-w`: el
   diseño usa una caja propia por ficha y con el valor por defecto una de ellas
   entra en una línea más que el comp. */
.luces-proy-cierre__texto {
	margin: 18.11px auto 0;
	max-width: var(--luces-cierre-w, 800px);
	font-size: var(--luces-fs-body);
	line-height: 28px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* `auto` y no un valor fijo: es lo que ancla el par al piso de la banda. */
.luces-proy-cierre__cta { margin-top: auto; }

/* --- 9.6 Banda "Otros Proyectos" + grilla de cards -------------------------- */

/* Calificado con `.e-con`: el maquetador emite el padding del contenedor con
   una sola clase y su hoja carga después de esta. */
.e-con.luces-proy-otros {
	background-color: var(--luces-crema);
	padding: 67.56px 24px 107px;
}

.luces-proy-otros h2.luces-proy-otros__titulo {
	margin: 0;
	text-align: center;
	font-size: var(--luces-fs-h5);
	line-height: var(--luces-lh-h5);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

.luces-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 57px;
	width: min(var(--luces-container-wide), calc(100% - 48px));
	margin: 0 auto;
}

.luces-proy-otros .luces-cards { padding-top: 54.68px; }

.luces-card {
	display: flex;
	flex-direction: column;
	background-color: var(--luces-blanco);
	border-radius: var(--luces-radius);
	padding-bottom: 27.76px;
}

/* Radio solo en las esquinas superiores: las de abajo son rectas. */
.luces-card__media {
	border-radius: var(--luces-radius) var(--luces-radius) 0 0;
	overflow: hidden;
	line-height: 0;
}

.luces-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 366 / 220;
	object-fit: cover;
}

.luces-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0 36px;
}

.luces-cards h3.luces-card__titulo {
	margin: 18.18px 0 0;
	font-size: var(--luces-fs-h5);
	line-height: var(--luces-lh-h5);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

/* 277 px es el único ancho que reproduce los cortes de línea de las seis
   bajadas del diseño a la vez (el mínimo es 275,45 y el máximo 279,73). */
.luces-card__desc {
	margin: 15.14px 0 0;
	max-width: 277px;
	font-size: var(--luces-fs-body-s);
	line-height: 24px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-oscuro);
}

/* El link va anclado al piso de la card: las tres lo tienen a la misma altura
   tengan 2 o 3 líneas de bajada.
   OJO: el margen va en forma abreviada. El reset del tema padre se encola
   DESPUÉS de esta hoja y le pone `margin-bottom: 0.8em` a todo <p>; con
   `margin-top: auto` suelto, esos 14,4 px se colaban y estiraban la card. */
.luces-card__cta {
	margin: auto 0 0;
	padding-top: 20.19px;
	line-height: 0;
}

/* --- 9.7 Responsive --------------------------------------------------------- */

@media (max-width: 1139px) {
	.luces-proy-detalle__row {
		flex-direction: column;
		min-height: 0;
		gap: 40px;
	}

	.luces-proy-detalle__col,
	.luces-proy-detalle__aside { flex: 1 1 auto; width: 100%; padding-top: 0; }
}

@media (max-width: 1024px) {
	.luces-hero.luces-hero--proyecto .luces-hero__inner,
	.luces-hero.luces-hero--indice .luces-hero__inner,
	.luces-hero.luces-hero--ayudanos .luces-hero__inner { padding-top: 180px; }

	.luces-hero.luces-hero--proyecto h1.luces-hero__title,
	.luces-hero.luces-hero--indice h1.luces-hero__title,
	.luces-hero.luces-hero--ayudanos h1.luces-hero__title {
		padding-top: 0;
		margin-top: 14px;
	}

	.luces-hero--proyecto .luces-hero__eyebrow,
	.luces-hero--indice .luces-hero__eyebrow,
	.luces-hero--ayudanos .luces-hero__eyebrow { font-size: 18px; line-height: 1.4; }

	.luces-hero--proyecto .luces-hero__bajada,
	.luces-hero--indice .luces-hero__bajada {
		margin-top: 20px;
		max-width: 100%;
		font-size: 18px;
		line-height: 26px;
	}

	.luces-proy-detalle { padding-top: 56px; padding-bottom: 8px; }

	/* En pantallas chicas la banda no tiene alto propio: se apaga el piso fijo
	   y el par de botones recupera una separación explícita, porque sin alto
	   mínimo el anclaje al piso no deja aire. */
	.luces-proy-cierre { min-height: 0; padding-top: 56px; padding-bottom: 64px; }
	.luces-proy-cierre__cta { margin-top: 40px; }

	.e-con.luces-proy-otros { padding-top: 56px; padding-bottom: 64px; }
	.luces-proy-otros .luces-cards { padding-top: 32px; }
	.luces-proy-galeria__dots { margin-top: 24px; }
	.luces-card__desc { max-width: 100%; }
}

@media (max-width: 640px) {
	.luces-cards { grid-template-columns: 1fr; gap: 32px; }
	.luces-colaborar { padding: 24px; }
	.luces-card__body { padding: 0 24px; }
}

/* =============================================================================
   10. Índice de Proyectos — encabezado, intro, grilla de 6 cards grandes con
   panel al pasar el mouse, y la banda "Cómo ayudar" (componente compartido).
   Medidas 1:1 del diseño (lienzo 1980): los "tops" salen de pasar la baseline
   del diseño a caja de línea con las métricas reales de la familia.
   ============================================================================= */

/* --- 10.1 Encabezado del índice --------------------------------------------
   Eyebrow (24 Medium, baseline 390,06) + H1 (63 SemiBold, baseline 493,0) +
   bajada (24 Regular lh 32, baseline 572,76). Mismo ritmo interno que el
   encabezado de las fichas: 34,08 y 43,76; cambia el aire de arriba. */

.luces-hero.luces-hero--indice .luces-hero__inner { padding-top: 363.23px; }

/* --- 10.2 Intro ------------------------------------------------------------- */

.e-con.luces-indice-body {
	background-color: var(--luces-blanco);
	padding: 84.85px 0 211.14px;
}

.luces-indice-intro__lead {
	margin: 0;
	max-width: var(--luces-lead-w, 622px);
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

.luces-indice-intro__p {
	margin: 34.06px 0 0;
	max-width: var(--luces-parrafo-w, 717px);
	font-size: var(--luces-fs-body);
	line-height: 28px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* Margen abreviado: el reset del tema padre carga después y le pone
   `margin-bottom: 0.8em` a todo <p>. */
.luces-indice-intro__p + .luces-indice-intro__p { margin: 10.01px 0 0; }

.luces-indice-intro__p strong { font-weight: var(--luces-fw-bold); color: inherit; }

/* --- 10.3 Grilla de 6 cards ------------------------------------------------
   2 columnas × 3 filas de 580,36 × 364,90. El diseño deja canaletas desparejas
   (38,68 horizontal · 36,54 y 41,37 verticales): se unifican en 38,7, que es
   el valor que conserva el alto total de la grilla (Δ 0,51). */

.luces-cards--index {
	grid-template-columns: repeat(2, 1fr);
	width: min(1199.4px, calc(100% - 48px));
	gap: 38.7px;
	margin: 106.85px auto 0;
}

.luces-card-indice {
	position: relative;
	height: 364.9px;
	border-radius: var(--luces-radius);
	overflow: hidden;
	background-color: var(--luces-casi-negro);
}

.luces-card-indice__media {
	position: absolute;
	inset: 0;
	line-height: 0;
}

/* El diseño baja la opacidad de la foto sobre la plancha #231F20 para que el
   título blanco tenga contraste. Usa 0,79 / 0,85 / 0,90 según la card; se
   unifica en 0,85, que es el valor de 3 de las 5 cards visibles y el que el
   propio diseñador aplicó al archivo entregado de la sexta. */
/* Calificado con la caja + el elemento: la hoja del maquetador trae
   `.elementor img { height: auto }` (0,1,1) y le gana a una clase suelta; sin
   esto la foto vuelve a su proporción nativa y deja ver la plancha. */
.luces-card-indice__media img.luces-card-indice__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: var(--luces-indice-op, .85);
}

.luces-card-indice__panel {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 45.17px 40px 0;
	background-color: var(--luces-verde-oscuro);
	opacity: 0;
	transition: opacity .25s ease;
}

.luces-card-indice__hover {
	margin: 0;
	max-width: var(--luces-hover-w, 482px);
	font-size: var(--luces-fs-body);
	line-height: 28px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-blanco);
}

/* El bloque de título + link va anclado al piso de la card y POR ENCIMA del
   panel: así el link no se mueve cuando el panel aparece. */
.luces-card-indice__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 40px 58.49px;
}

/* Calificado con el elemento y un ancestro: el Theme Style del kit sale como
   `.elementor-kit-N h3{...}` (0,1,1) y le gana a una clase suelta. */
.luces-cards h3.luces-card-indice__titulo {
	margin: 0 0 16.97px;
	font-size: 62px;
	line-height: 65px;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-blanco);
	transition: opacity .2s ease;
}

.luces-card-indice__cta { margin: 0; line-height: 0; }

/* Solo con mouse fino: en pantallas táctiles no hay hover, la card se queda en
   su estado normal y el link sigue funcionando. */
@media (hover: hover) and (pointer: fine) {
	.luces-card-indice:hover .luces-card-indice__panel { opacity: 1; }
	.luces-card-indice:hover .luces-card-indice__titulo { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.luces-card-indice__panel,
	.luces-cards h3.luces-card-indice__titulo { transition: none; }
}

/* --- 10.4 Banda "Cómo ayudar" — componente compartido -----------------------
   Foto a sangre de 1980 × 547 con el gris plano horneado, H2 48, subtítulo 36,
   párrafo 18 y el par de píldoras. La misma banda va en La Fundación.
   Va como <section> dentro del widget de HTML, igual que el encabezado: el
   fondo no lo pone el contenedor del maquetador, así que no lo alcanza su
   regla de carga diferida de fondos. */

.luces-banda-ayudar {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 547px;
	padding: 90.56px 24px 107.64px;
	background-color: var(--luces-gris-foto-banda);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	text-align: center;
}

.luces-banda-ayudar h2.luces-banda-ayudar__h2 {
	margin: 0;
	font-size: var(--luces-fs-h3);
	line-height: var(--luces-lh-h3);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-oscuro);
}

.luces-banda-ayudar__h3 {
	margin: 22.15px 0 0;
	font-size: var(--luces-fs-h4);
	line-height: var(--luces-lh-h4);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-lima);
}

.luces-banda-ayudar__p {
	margin: 30.8px auto 0;
	max-width: var(--luces-banda-p-w, 500px);
	font-size: var(--luces-fs-body);
	line-height: 28px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-banda-ayudar__cta { margin-top: 42.46px; }

/* --- 10.5 Responsive del índice --------------------------------------------- */

@media (max-width: 1024px) {
	.luces-hero.luces-hero--indice .luces-hero__inner { padding-top: 180px; }

	.e-con.luces-indice-body { padding: 56px 0 64px; }

	.luces-indice-intro__lead { font-size: 20px; line-height: 28px; max-width: 100%; }
	.luces-indice-intro__p { max-width: 100%; }

	.luces-cards--index {
		margin-top: 48px;
		gap: 24px;
		width: calc(100% - 48px);
		align-items: start;
	}

	/* Acá el alto lo da la FOTO, puesta en flujo: es un elemento reemplazado
	   con tamaño propio, así que su alto queda definido a partir de su ancho.
	   Ni `aspect-ratio` ni un relleno porcentual sobre la card sirven: la card
	   no tiene contenido en flujo (foto, panel y bloque de título van en
	   absoluto) y por debajo de 768 px —donde el maquetador cambia las reglas
	   de sus contenedores— el bloque que envuelve al widget mide la fila en
	   cero y la grilla se le sale por abajo, encimándose con la banda y el pie.
	   Medido en 390 / 641 / 768 / 1024. */
	.luces-card-indice { height: auto; }

	.luces-card-indice__media { position: static; }

	.luces-card-indice__media img.luces-card-indice__img {
		height: auto;
		aspect-ratio: 580.36 / 364.9;
	}
	.luces-cards h3.luces-card-indice__titulo { font-size: 40px; line-height: 44px; margin: 0 0 12px; }
	.luces-card-indice__body { padding: 0 24px 34px; }
	.luces-card-indice__panel { padding: 24px 24px 0; }
	.luces-card-indice__hover { max-width: 100%; font-size: 16px; line-height: 24px; }

	.luces-banda-ayudar { min-height: 0; padding: 56px 24px 64px; }
	.luces-banda-ayudar__p { max-width: 100%; }
	.luces-banda-ayudar__cta { margin-top: 32px; }
}

@media (max-width: 640px) {
	.luces-cards--index { grid-template-columns: 1fr; }
	.luces-cards h3.luces-card-indice__titulo { font-size: 34px; line-height: 38px; }
	.luces-banda-ayudar h2.luces-banda-ayudar__h2 { font-size: 34px; }
	.luces-banda-ayudar__h3 { font-size: 26px; }
}

/* =============================================================================
   11. Ayudanos — encabezado, intro con 3 cards, bloque CTA + formulario de 8
   campos y la banda de la declaración ad honorem.
   ============================================================================= */

/* --- 11.1 Encabezado (sin bajada) ------------------------------------------- */

.luces-hero.luces-hero--ayudanos .luces-hero__inner { padding-top: 397.57px; }

/* --- 11.2 Intro + vitrina de 3 proyectos ------------------------------------ */

.e-con.luces-ayudanos-intro {
	background-color: var(--luces-blanco);
	padding: 93.43px 0 113.87px;
}

.luces-ayudanos-intro h2.luces-ayudanos-intro__h2 {
	margin: 0;
	max-width: var(--luces-h2-w, 728px);
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-ayudanos-intro__lead {
	margin: 43.68px 0 0;
	max-width: var(--luces-lead-w, 683px);
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-ayudanos-intro__p {
	margin: 28.47px 0 0;
	max-width: var(--luces-parrafo-w, 634px);
	font-size: var(--luces-fs-body);
	line-height: 28px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-ayudanos-intro__lead strong,
.luces-ayudanos-intro__p strong,
.luces-ayudanos-intro__bajada strong { font-weight: var(--luces-fw-bold); color: inherit; }

.luces-ayudanos-intro__divisor { margin: 40.1px 0 0; }

.luces-ayudanos-intro__bajada {
	margin: 53.26px 0 0;
	max-width: var(--luces-bajada-w, 564px);
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

/* Misma card que "Otros Proyectos" (365,52 × 439,88, radio 12, mismo ritmo
   interno); cambia el fondo, porque acá la sección es blanca. */
.luces-cards--ayudanos {
	width: min(1206.4px, calc(100% - 48px));
	gap: 54.93px;
	margin: 47.1px auto 0;
}

.luces-cards--ayudanos .luces-card { background-color: var(--luces-crema); }

.luces-ayudanos-vertodos {
	margin: 58.58px 0 0;
	text-align: center;
	line-height: 0;
}

/* El subrayado corto es un bloque dentro del inline-block del link: sin los
   márgenes automáticos queda pegado a la izquierda del texto. */
.luces-ayudanos-vertodos .luces-link::after {
	margin-left: auto;
	margin-right: auto;
}

/* --- 11.3 CTA + formulario --------------------------------------------------
   Dos columnas sobre el tercer ancho de contenedor del lote (1102,75). Se
   resuelve con grid en el propio contenedor del maquetador, en vez de
   posicionar la card en absoluto. */

/* Los contenedores a ancho completo del maquetador NO llevan `.e-con-inner`:
   la grilla va sobre el contenedor mismo, calificada con `.e-con` para ganarle
   al `display:flex` y al padding que emite su propia hoja. */
.e-con.luces-ayudanos-cta {
	display: grid;
	grid-template-columns: 527.78px 574.97px;
	justify-content: center;
	align-items: start;
	min-height: 992.38px;
	padding: 0 24px;
	background-color: var(--luces-crema);
}

.luces-ayudanos-cta__texto { padding-top: 218.77px; }

.luces-ayudanos-cta h3.luces-ayudanos-cta__h3 {
	margin: 0;
	max-width: var(--luces-h3-w, 454px);
	font-size: var(--luces-fs-h3);
	line-height: var(--luces-lh-h3);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-ayudanos-cta__p {
	margin: 25.88px 0 0;
	max-width: var(--luces-cta-p-w, 402px);
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-ayudanos-cta__divisor { margin: 32.18px 0 0; }

/* Calificado con `.e-con`: el maquetador emite el padding del contenedor con
   una sola clase desde una hoja que carga después de esta. */
.e-con.luces-ayudanos-cta__card {
	box-sizing: border-box;
	width: 574.97px;
	max-width: 100%;
	margin-top: 139.77px;
	/* Padding medido del diseño: 35,55 izq. · 29,71 der. (asimétrico). */
	padding: 25.4px 29.71px 37.29px 35.55px;
	border-radius: var(--luces-radius);
	background-color: var(--luces-blanco);
	/* El diseño separa los 8 campos 16,45 px, no los 16 del resto del lote. */
	--luces-input-gap: 16.45px;
}

.luces-ayudanos-cta__card .luces-form-card__title { margin: 0 0 30.65px; }

/* El margen del bloque de envío NO se toca acá: colapsa con el margen inferior
   del último campo (16,45) y con eso el subrayado cae a 0,5 px de donde lo
   dibuja el diseño. */

/* --- 11.4 Banda de la declaración ad honorem -------------------------------- */

.e-con.luces-adhonorem {
	padding: 124.94px 24px 140.94px;
	background-color: var(--luces-gris-medio);
	text-align: center;
}

.luces-adhonorem__texto {
	margin: 0 auto;
	max-width: var(--luces-adhonorem-w, 823px);
	font-size: var(--luces-fs-lead);
	line-height: 40px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-blanco);
}

.luces-adhonorem__texto strong { font-weight: var(--luces-fw-bold); color: inherit; }
.luces-adhonorem__texto em { font-style: italic; }

/* --- 11.5 Responsive de Ayudanos -------------------------------------------- */

@media (max-width: 1139px) {
	.e-con.luces-ayudanos-cta {
		grid-template-columns: min(1102.75px, 100%);
		min-height: 0;
		padding: 56px 24px 64px;
	}
	.luces-ayudanos-cta__texto { padding-top: 0; }
	.e-con.luces-ayudanos-cta__card { margin-top: 40px; }
}

@media (max-width: 1024px) {
	.luces-hero.luces-hero--ayudanos .luces-hero__inner { padding-top: 180px; }

	.e-con.luces-ayudanos-intro { padding: 56px 0 64px; }

	.luces-ayudanos-intro h2.luces-ayudanos-intro__h2 { font-size: 36px; line-height: 1.2; max-width: 100%; }
	.luces-ayudanos-intro__lead { font-size: 20px; line-height: 28px; max-width: 100%; }
	.luces-ayudanos-intro__p { max-width: 100%; }
	.luces-ayudanos-intro__bajada { font-size: 20px; line-height: 28px; max-width: 100%; margin: 32px 0 0; }
	.luces-ayudanos-intro__divisor { margin-top: 28px; }

	.luces-cards--ayudanos { margin-top: 32px; gap: 32px; width: calc(100% - 48px); }
	.luces-ayudanos-vertodos { margin: 40px 0 0; }

	.luces-ayudanos-cta h3.luces-ayudanos-cta__h3 { font-size: 34px; max-width: 100%; }
	.luces-ayudanos-cta__p { font-size: 18px; line-height: 28px; max-width: 100%; }

	.e-con.luces-adhonorem { padding: 56px 24px 64px; }
	.luces-adhonorem__texto { font-size: 18px; line-height: 30px; max-width: 100%; }
}

/* =============================================================================
   12. Inicio (portada) — encabezado con slideshow, intro, diagrama, grilla
   numerada de proyectos, CTA, banda a sangre, portal de noticias, alianzas y
   bloque de formulario. Medidas 1:1 del diseño (lienzo 1980): los "tops" salen
   de pasar la baseline del diseño a caja de línea con las métricas reales de la
   familia (ascent 1,038 em · descent 0,222 em · gap 0).

   Los cinco bloques de fondo del comp suman el alto del contenido:
   969,00 + 987,77 + 1852,51 + 812,95 + 1938,63 = 6560,86, y con el pie
   (546,17 + 105,94) dan los 7212,97 del lienzo.
   ============================================================================= */

/* --- 12.0 Utilidades de la página ------------------------------------------ */

/* Link en bloque: el <a> deja de ser inline-block y su caja de línea arranca
   exactamente en el tope del contenedor. Sin esto el strut del padre lo empuja
   y los "tops" medidos no cierran (gotcha 4). */
.luces-link--bloque { display: block; width: -moz-fit-content; width: fit-content; }

/* Salto forzado de los dos H2 de 62 px: ningún ancho de caja reproduce el corte
   del diseño (medido), así que el corte va explícito y se anula en pantallas
   chicas, donde el titular ya fluye a otro ritmo. */
.luces-br { display: inline; }

.luces-home-contenedor {
	box-sizing: border-box;
	width: min(var(--luces-container), calc(100% - 48px));
	max-width: min(var(--luces-container), calc(100% - 48px));
	margin-inline: auto;
}

/* --- 12.1 Encabezado con slideshow ------------------------------------------
   3 fotos a sangre + texto fijo encima + 3 puntos a la izquierda. El comp NO
   define autoplay, duración ni transición: los valores del JS son provisorios. */

.luces-hero--home {
	background-image: none;
	background-color: var(--luces-verde-casi-negro);
}

.luces-slide {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0;
	transition: opacity 800ms ease;
}

.luces-slide.is-active { opacity: 1; }

/* El degradado va DENTRO de cada slide, no como capa única del encabezado: las
   tres fotos tienen fondos muy distintos bajo el título y cada una necesita su
   propio alfa (medido: con el 0,45 global el slide 2 se queda en 78,7 % del área
   a 4,5:1). Así además el degradado funde junto con la foto. */
.luces-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		rgba(3, 35, 7, var(--luces-scrim-a, 0.45)) 0%,
		rgba(3, 35, 7, var(--luces-scrim-b, 0.42)) 40%,
		rgba(3, 35, 7, var(--luces-scrim-c, 0.21)) 72%,
		rgba(3, 35, 7, 0) 100%
	);
}

/* Sin JS el primer slide igual se ve. */
.luces-slideshow .luces-slide:first-child { opacity: 1; }
.luces-slideshow .luces-slide:first-child:not(.is-active) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.luces-slide { transition: none; }
}

/* H1 a 3 líneas: caja 940 px (ventana medida 921,1 - 962,7 px reproduce el
   corte del comp). El `top` del comp es 384,196. */
.luces-hero.luces-hero--home h1.luces-hero__title {
	padding-top: 384.196px;
	max-width: 940px;
}

.luces-hero--home .luces-hero__cta {
	margin: 52.2px 0 0;
	line-height: 0;
	font-size: 0;
}

/* Los 3 puntos: Ø 9,04, centro a centro 27,2 (separación 18,16), x del primero 410,80 =
   2,80 px a la derecha del borde del contenedor centrado. */
.luces-slideshow__dots {
	position: absolute;
	z-index: 2;
	top: 805.1px;
	left: 2.8px;
	display: flex;
	gap: 18.16px;
	margin: 0;
	padding: 0;
}

button.luces-slideshow__dot {
	width: 9.04px;
	height: 9.04px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--luces-blanco-calido);
	opacity: .4;
	cursor: pointer;
	transition: opacity .3s ease;
	-webkit-appearance: none;
	appearance: none;
}

button.luces-slideshow__dot.is-active { opacity: 1; }
button.luces-slideshow__dot:hover,
button.luces-slideshow__dot:focus-visible { opacity: 1; background-color: var(--luces-blanco-calido); }

/* --- 12.2 Bloque crema 1: intro + diagrama ---------------------------------- */

.e-con.luces-home-crema1 {
	display: block;
	position: relative;
	overflow: hidden;
	height: 987.77px;
	padding: 0;
	background-color: var(--luces-crema);
}

.luces-home-intro {
	position: relative;
	padding-top: 88.498px;
}

.luces-home-intro > * { position: relative; z-index: 1; }

.luces-home-intro__eyebrow {
	margin: 0;
	font-size: var(--luces-fs-eyebrow);
	line-height: var(--luces-lh-eyebrow);
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-verde-oscuro);
}

.luces-home-intro h2.luces-home-intro__h2 {
	margin: 33.416px 0 0;
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

/* Fila de 3 celdas + 2 chevrons: composición horizontal fija del comp, con
   `left` medidos uno por uno (las celdas no tienen un paso regular). */
.luces-home-intro__fila {
	position: relative;
	height: 57.6px;
	margin-top: 55.512px;
}

.luces-home-intro__fila > * { position: absolute; margin: 0; }

.luces-home-intro__dato {
	left: 1.8px;
	top: 0;
	font-size: var(--luces-fs-dato);
	line-height: 57.6px;
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-gris-medio);
	white-space: nowrap;
}

.luces-home-intro__col {
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-home-intro__col--a { left: 312.52px; top: 1.61px; width: 345px; font-size: 18px; line-height: 25px; }
.luces-home-intro__col--b { left: 746.09px; top: 3.176px; width: 161px; font-size: 16px; line-height: 25px; }

.luces-home-intro__chevron {
	top: 18.414px;
	width: 10.23px;
	height: 17.47px;
	line-height: 0;
}

.luces-home-intro__chevron--a { left: 279.01px; }
.luces-home-intro__chevron--b { left: 706.52px; }
.luces-home-intro__chevron svg { display: block; width: 10.23px; height: 17.47px; }

.luces-home-intro__cta { margin: 37.412px 0 0; line-height: 0; font-size: 0; }

/* Sunburst decorativo: vectorial `#ECEBE7` al 50 %, 344,34 x 344,34, detrás del
   texto. z-index 0 contra el 1 de los hermanos. */
.luces-home-intro__sunburst {
	position: absolute;
	z-index: 0;
	top: 104.35px;
	left: 769.75px;
	width: 344.34px;
	height: 344.34px;
	opacity: .5;
	pointer-events: none;
}

.luces-home-intro__sunburst svg { display: block; width: 344.34px; height: 344.34px; }

/* --- 12.3 Diagrama "Qué pueden hacer…" --------------------------------------
   Ilustración estática: serpentina + 4 nodos en SVG inline y 4 bloques de texto
   posicionados. Arranca en y 1487,23 del lienzo = 518,23 de este bloque. */

.luces-home-diagrama {
	position: absolute;
	top: 518.23px;
	left: 0;
	right: 0;
	height: 469.54px;
}

.luces-home-diagrama__watermark {
	position: absolute;
	z-index: 0;
	top: 0;
	left: calc((100% - min(var(--luces-container), 100% - 48px)) / 2 + 138.87px);
	width: 879.12px;
	height: 348.76px;
	opacity: .05;
	pointer-events: none;
}

.luces-home-diagrama__watermark svg { display: block; width: 879.12px; height: 348.76px; }

.luces-home-diagrama__lienzo {
	position: absolute;
	z-index: 1;
	top: 187.77px;
	left: calc((100% - min(var(--luces-container), 100% - 48px)) / 2 + 36.79px);
	width: 944.81px;
	height: 119px;
}

.luces-home-diagrama__lienzo svg { display: block; width: 944.81px; height: 119px; }

.luces-home-diagrama__bloque {
	position: absolute;
	z-index: 2;
	color: var(--luces-verde-casi-negro);
	letter-spacing: var(--luces-tracking);
}

.luces-home-diagrama__bloque p { margin: 0; color: inherit; }

/* Los 4 bloques se alinean con el BORDE IZQUIERDO de su nodo (centro − 8), que
   es lo que el comp respeta; los x publicados son tinta de glifo. */
.luces-home-diagrama__b1 {
	top: 102.202px;
	left: calc((100% - min(var(--luces-container), 100% - 48px)) / 2 + 36.79px);
	width: 167px;
	font-size: 21px;
	line-height: 25px;
	font-weight: var(--luces-fw-semibold);
}

.luces-home-diagrama__b2 {
	top: 99.376px;
	left: calc((100% - min(var(--luces-container), 100% - 48px)) / 2 + 334.54px);
	width: 235px;
	font-size: 18px;
	line-height: 29px;
	font-weight: var(--luces-fw-regular);
}

.luces-home-diagrama__b3 {
	top: 118.537px;
	left: calc((100% - min(var(--luces-container), 100% - 48px)) / 2 + 700.68px);
	font-size: 30.18px;
	line-height: 36.22px;
	font-weight: var(--luces-fw-semibold);
	white-space: nowrap;
}

.luces-home-diagrama__b4 {
	top: 102.432px;
	left: calc((100% - min(var(--luces-container), 100% - 48px)) / 2 + 965.6px);
	width: 169px;
	font-size: 21px;
	line-height: 25px;
	font-weight: var(--luces-fw-regular);
}

/* --- 12.4 Bloque blanco: proyectos + CTA ------------------------------------ */

.e-con.luces-home-blanco {
	display: block;
	padding: 91.014px 0 119.76px;
	background-color: var(--luces-blanco);
}

.luces-home-proy h2.luces-home-proy__h2 {
	margin: 0;
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-home-proy__h2 .luces-home-proy__h2alt { display: block; font-weight: var(--luces-fw-regular); }

/* El cuerpo de esta sección está indentado 8,2 px respecto de sus títulos: es
   la única del comp con ese corrimiento y está medido. */
.luces-home-proy__lead {
	margin: 27.584px 0 0 10.52px;
	max-width: 701px;
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-home-proy__cols {
	display: flex;
	align-items: flex-start;
	gap: 62.47px;
	margin: 30.398px 0 0 10.52px;
}

.luces-home-proy__col { flex: 0 0 534px; min-width: 0; }

.luces-home-proy__col p {
	margin: 0;
	font-size: var(--luces-fs-body);
	line-height: 28px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-home-proy__col strong { font-weight: var(--luces-fw-semibold); color: inherit; }

.luces-home-proy__divisor {
	display: block;
	width: var(--luces-divisor-w);
	height: var(--luces-divisor-h);
	margin-top: 31.534px;
}

.luces-home-proy__divisor--a { background-color: var(--luces-gris-calido); }
.luces-home-proy__divisor--b { background-color: var(--luces-verde-claro); }

/* Grilla 3 x 2: ancho 1206,42, canaleta horizontal 54 (el comp trae 54,09 y
   55,77: se normaliza) y vertical 38,464 entre la base de una card y el número
   de la fila siguiente. */
.luces-cards--home {
	grid-template-columns: repeat(3, 1fr);
	column-gap: 54px;
	row-gap: 38.464px;
	width: min(1206.42px, calc(100% - 48px));
	margin: 0 auto;
	padding-top: 27.854px;
}

.luces-card-slot { display: flex; flex-direction: column; }

.luces-card-num {
	margin: 0 0 12.766px;
	padding-left: 36px;
	font-size: 22px;
	line-height: 27.94px;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-oscuro);
}

.luces-cards--home .luces-card {
	flex: 1 1 auto;
	min-height: 439.88px;
	background-color: var(--luces-crema);
}

/* El link ya va anclado al piso por `margin-top: auto`: sin este cero, el
   padding heredado de la card de "Otros Proyectos" empuja las dos cards de
   bajada larga 0,24 px por encima de los 439,88 del diseño. */
.luces-cards--home .luces-card__cta { padding-top: 0; }

/* CTA "Sumate a nuestra propuesta": bloque centrado sobre el eje 990. */
.luces-home-sumate { padding-top: 70.054px; text-align: center; }

.luces-home-sumate__p {
	margin: 0 auto;
	max-width: 599px;
	font-size: 22px;
	line-height: 34px;
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-home-sumate__p--fuerte { font-weight: var(--luces-fw-semibold); }

/* Botón con contorno: NO es un pill. Sus curvas miden 12,00 exactos, el mismo
   radio que las cards; un pill sobre 24,67 px de alto pediría 12,35. */
.luces-home-sumate__cta { display: flex; justify-content: center; margin: 29.796px 0 0; }

a.luces-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--luces-btn-outline-w);
	height: var(--luces-btn-outline-h);
	border: var(--luces-btn-outline-border);
	border-radius: var(--luces-radius);
	background: none;
	font-family: var(--luces-font);
	font-size: var(--luces-fs-nav);
	font-weight: var(--luces-fw-bold);
	line-height: 1;
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-verde-oscuro);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

a.luces-btn-outline:hover,
a.luces-btn-outline:focus,
a.luces-btn-outline:focus-visible {
	background-color: var(--luces-verde-oscuro);
	color: var(--luces-blanco);
	text-decoration: none;
}

/* --- 12.5 Banda "Educar está en la base del cambio" -------------------------
   Foto a sangre con el tercio izquierdo gris plano `#E2E2E2` horneado en el
   propio JPG: no hay overlay. Va como <section> dentro del widget de HTML para
   que el fondo no dependa de la carga diferida del maquetador (gotcha 1). */

.luces-home-banda {
	box-sizing: border-box;
	height: 812.95px;
	padding-top: 138.923px;
	background-color: var(--luces-gris-foto-home7);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.luces-home-banda__eyebrow {
	margin: 0;
	max-width: 405px;
	font-size: var(--luces-fs-eyebrow);
	line-height: 34.01px;
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-verde-oscuro);
}

.luces-home-banda h2.luces-home-banda__h2 {
	margin: 45.135px 0 0;
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

/* Las dos oraciones son un bloque continuo de 4 líneas en el comp: van como dos
   párrafos sin separación, con caja propia cada uno para reproducir el corte. */
.luces-home-banda__p {
	margin: 0;
	font-size: var(--luces-fs-body);
	line-height: 28.01px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-home-banda__p--a { margin-top: 33.701px; max-width: 541px; }
.luces-home-banda__p--b { max-width: 583px; }

.luces-home-banda__cta { margin: 28.109px 0 0; line-height: 0; font-size: 0; }

/* --- 12.6 Bloque crema 2: noticias + alianzas + formulario ------------------ */

.e-con.luces-home-crema2 {
	display: block;
	padding: 86.447px 0 156.57px;
	background-color: var(--luces-crema);
}

.luces-home-noticias__head { position: relative; }

.luces-home-noticias h3.luces-home-noticias__h3 {
	margin: 0;
	font-size: var(--luces-fs-h3);
	line-height: var(--luces-lh-h3);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-home-noticias__sub {
	margin: 29.75px 0 0;
	max-width: 279px;
	font-size: var(--luces-fs-body);
	line-height: 28.01px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* "VER TODAS" es la única excepción del patrón: va SIN subrayado. */
.luces-home-noticias__vertodas {
	position: absolute;
	top: 126.221px;
	right: 0;
	margin: 0;
	line-height: 0;
	font-size: 0;
}

/* --- Cards de noticia (componente del shortcode [luces_noticias]) ----------- */

.luces-noticias {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 23px;
	width: min(1193.27px, calc(100% - 48px));
	margin: 0 auto;
	padding-top: 49.963px;
}

.luces-noticia { display: flex; flex-direction: column; }

.luces-noticia__media {
	border-radius: var(--luces-radius-noticia);
	overflow: hidden;
	line-height: 0;
}

.luces-noticia__media img.luces-noticia__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 281 / 160;
	object-fit: cover;
}

.luces-noticia__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-left: 17px;
}

/* El diseño no resuelve qué pasa con titulares reales: se recorta a las 3
   líneas del comp y el link se ancla al piso para que las 4 cards cierren
   parejas. Margen abreviado (gotcha 8). */
.luces-noticias h3.luces-noticia__titulo {
	margin: 24.979px 0 0;
	font-size: var(--luces-fs-card-title);
	line-height: 28.01px;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.luces-noticia__cta { margin: auto 0 0; padding-top: 15.169px; line-height: 0; }

/* --- Alianzas --------------------------------------------------------------- */

/* Las dos reglas de sección del comp están descentradas (295,4 / 305,3 de
   margen): se centran, como el resto de las hairlines del sitio. */
.luces-home-hairline {
	display: block;
	width: min(1379.29px, calc(100% - 48px));
	height: 1px;
	margin-inline: auto;
	background-color: var(--luces-gris-medio);
	border: 0;
}

.luces-home-alianzas-wrap { padding-top: 91.772px; }
.luces-home-hairline--b { margin-top: 123.748px; }

.luces-home-alianzas { position: relative; margin-top: 91.356px; }

.luces-home-alianzas__texto { margin-left: 469.63px; }

.luces-home-alianzas h3.luces-home-alianzas__h3 {
	margin: 0;
	font-size: var(--luces-fs-h3);
	line-height: var(--luces-lh-h3);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-home-alianzas__nombre {
	margin: 0;
	font-size: var(--luces-fs-h3);
	line-height: var(--luces-lh-h3);
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-home-alianzas__lead {
	margin: 16.991px 0 0;
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-oscuro);
}

.luces-home-alianzas__p {
	margin: 32.415px 0 0;
	max-width: 488px;
	font-size: var(--luces-fs-body-s);
	line-height: 24px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* Bloque offset + logo + 3 estrellas + 4 anillos, todos con `left` y `top`
   medidos del comp y relativos al borde del contenedor centrado. */
.luces-home-alianzas__arte {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.luces-home-alianzas__arte > * { position: absolute; }

.luces-home-alianzas__offset {
	left: 137px;
	top: 63.244px;
	width: 196.49px;
	height: 183.32px;
	border-radius: var(--luces-radius);
	background-color: var(--luces-gris-calido);
}

.luces-home-alianzas__logo {
	position: absolute;
	z-index: 1;
	left: 161.18px;
	top: 24.654px;
	width: 199.92px;
	height: 199.44px;
	border-radius: 12.7px;
	overflow: hidden;
}

/* El PNG rescatado del .ai mide 909 x 830 y el comp lo coloca a 231,17 x 211,08
   recortado a 199,92 x 199,44: el recorte arranca 12,88 / 8,54 adentro. */
.luces-home-alianzas__logo img {
	position: absolute;
	left: -12.88px;
	top: -8.54px;
	width: 231.17px;
	height: 211.08px;
	max-width: none;
}

.luces-home-alianzas__adorno svg { display: block; width: 100%; height: 100%; }

.luces-home-alianzas__adorno--e1 { left: 133.62px; top: 1.974px; width: 24.43px; height: 24.43px; }
.luces-home-alianzas__adorno--e2 { left: 364.24px; top: 169.344px; width: 30.12px; height: 30.12px; }
.luces-home-alianzas__adorno--e3 { left: 341.68px; top: 245.694px; width: 24.43px; height: 24.43px; }
.luces-home-alianzas__adorno--ad { left: 335.66px; top: 39.284px; width: 65.59px; height: 45.17px; }
.luces-home-alianzas__adorno--ai { left: 112.58px; top: 72.214px; width: 66.5px; height: 58.26px; }

/* --- Convertite en agente de cambio + formulario ----------------------------
   Lleva el ancla #comunicate: la usan los 6 CONTACTANOS de las fichas y el
   botón con contorno de la sección de CTA. */

.e-con.luces-home-form {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: min(var(--luces-container), calc(100% - 48px));
	max-width: min(var(--luces-container), calc(100% - 48px));
	min-height: 478.06px;
	margin: 129.78px auto 0;
	padding: 0;
	scroll-margin-top: 24px;
}

.luces-home-form__texto { padding-top: 79.006px; }

.luces-home-form h3.luces-home-form__h3 {
	margin: 0;
	max-width: 455px;
	font-size: var(--luces-fs-h3);
	line-height: var(--luces-lh-h3);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-home-form__p {
	margin: 25.872px 0 0;
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-home-form__divisor {
	display: block;
	width: var(--luces-divisor-w);
	height: var(--luces-divisor-h);
	margin-top: 25.962px;
	background-color: var(--luces-verde-oscuro);
}

.e-con.luces-home-form__card {
	position: absolute;
	top: 0;
	left: 530.03px;
	width: 574.97px;
	padding: 25.398px 29.7px 33.362px 35.6px;
}

.luces-home-form__card .luces-form-card__title { margin: 0 0 30.662px; }
/* El margen del submit COLAPSA con el `margin-bottom` del último campo (16 px):
   el valor que queda es el mayor de los dos, no la suma. Y el <div> del submit
   lleva `line-height: 0` para que su caja arranque en el tope del texto y no en
   el strut heredado del cuerpo, que la bajaba 10,2 px. */
.luces-home-form__card .luces-form__submit { margin-top: 25.078px; line-height: 0; font-size: 0; }

/* El indicador de envío del plugin mide 24 px y se alinea a la baseline: dentro
   de la caja del submit empujaba el texto 8 px hacia abajo. Se lo saca del flujo
   (solo en esta card, para no mover el submit de las otras páginas). */
.luces-home-form__card .luces-form__submit .wpcf7-spinner {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0 0 0 10px;
}

/* --- 12.7 Responsive --------------------------------------------------------
   El comp no trae ninguna pantalla intermedia: de 1139 px para abajo todo lo
   que en el diseño es composición horizontal absoluta pasa a flujo vertical.
   Es solución propia, no dato del diseño. */

@media (max-width: 1139px) {
	.luces-br { display: none; }

	.e-con.luces-home-crema1 { height: auto; padding: 56px 0 64px; }
	.luces-home-intro { padding-top: 0; }
	.luces-home-intro__sunburst { display: none; }

	.luces-home-intro__fila { height: auto; margin-top: 40px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 40px; }
	.luces-home-intro__fila > * { position: static; }
	.luces-home-intro__chevron { display: none; }
	.luces-home-intro__dato { line-height: 1.2; }
	.luces-home-intro__col--a,
	.luces-home-intro__col--b { width: auto; max-width: 345px; }

	/* El diagrama se apila: la serpentina no tiene equivalente vertical en el
	   comp, así que se cambia por un filete con los nodos alineados. */
	.luces-home-diagrama {
		position: static;
		height: auto;
		margin-top: 56px;
		padding-left: 40px;
		border-left: 1px solid var(--luces-verde-oscuro);
	}
	.luces-home-diagrama__watermark,
	.luces-home-diagrama__lienzo { display: none; }
	.luces-home-diagrama__bloque {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		max-width: 420px;
	}
	.luces-home-diagrama__bloque + .luces-home-diagrama__bloque { margin-top: 28px; }
	.luces-home-diagrama__bloque::before {
		content: "";
		position: absolute;
		left: -48px;
		width: 16px;
		height: 16px;
		margin-top: 6px;
		border-radius: 50%;
		background-color: var(--luces-verde-lima);
	}
	.e-con.luces-home-blanco { padding: 56px 0 64px; }
	.luces-home-proy__lead,
	.luces-home-proy__cols { margin-left: 0; max-width: 100%; }
	.luces-home-proy__cols { flex-direction: column; gap: 32px; }
	.luces-home-proy__col { flex: 1 1 auto; width: 100%; }

	.luces-cards--home { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 32px; width: calc(100% - 48px); margin-top: 40px; }
	.luces-cards--home .luces-card { min-height: 0; }

	.luces-home-sumate { margin-top: 56px; }

	.luces-home-banda { height: auto; padding: 56px 0 64px; }
	.luces-home-banda__p--a,
	.luces-home-banda__p--b,
	.luces-home-banda__eyebrow { max-width: 100%; }

	.e-con.luces-home-crema2 { padding: 56px 0 64px; }
	.luces-home-noticias__vertodas { position: static; margin-top: 24px; text-align: left; }
	.luces-home-noticias__sub { max-width: 100%; }
	.luces-noticias { grid-template-columns: repeat(2, 1fr); width: calc(100% - 48px); margin-top: 40px; }

	.luces-home-alianzas-wrap { padding-top: 56px; }
	.luces-home-hairline--b { margin-top: 56px; }
	.luces-home-alianzas { margin-top: 56px; }
	/* La composición del logo aliado conserva sus posiciones relativas y se
	   corre hasta el borde del contenedor: con los `left` del diseño (que
	   arrancan en 112,58) el anillo derecho se salía 35 px a 390 px de ancho. */
	.luces-home-alianzas__texto { margin-left: 0; padding-top: 300px; }
	.luces-home-alianzas__arte { height: 280px; left: -112.58px; }
	.luces-home-alianzas__p { max-width: 100%; }

	.e-con.luces-home-form { min-height: 0; margin-top: 56px; }
	.luces-home-form__texto { padding-top: 0; }
	.luces-home-form h3.luces-home-form__h3 { max-width: 100%; }
	.e-con.luces-home-form__card { position: static; width: 100%; margin-top: 40px; }
}

@media (max-width: 1024px) {
	.luces-hero.luces-hero--home h1.luces-hero__title {
		padding-top: 200px;
		max-width: 100%;
		font-size: 40px;
		line-height: 1.16;
	}
	.luces-hero--home .luces-hero__cta { margin-top: 32px; }
	.luces-slideshow__dots { top: auto; bottom: 64px; left: 0; }

	.luces-home-intro h2.luces-home-intro__h2 { font-size: 36px; line-height: 1.2; margin-top: 24px; }
	.luces-home-proy h2.luces-home-proy__h2 { font-size: 36px; line-height: 1.2; }
	.luces-home-banda h2.luces-home-banda__h2 { font-size: 36px; line-height: 1.2; }
	.luces-home-noticias h3.luces-home-noticias__h3,
	.luces-home-alianzas h3.luces-home-alianzas__h3,
	.luces-home-alianzas__nombre,
	.luces-home-form h3.luces-home-form__h3 { font-size: 32px; line-height: 1.2; }
	.luces-home-intro__dato { font-size: 36px; }
	.luces-home-sumate__p { font-size: 18px; line-height: 28px; }
}

@media (max-width: 640px) {
	.luces-cards--home { grid-template-columns: 1fr; }
	.luces-noticias { grid-template-columns: 1fr; }
}
/* =============================================================================
   13. La Fundación — encabezado, intro con marca de agua, dos splits a sangre,
   misión, banda de comunidad, equipo 4×2, frase, "Qué nos mueve", carrusel de
   valores, grilla de 6 proyectos, alianzas y la banda "Cómo ayudar".
   Medidas 1:1 del diseño (lienzo 1980 × 10331,5): los "tops" salen de pasar la
   baseline del diseño a caja de línea con las métricas reales de la familia
   (ascent 1,038 em · descent 0,222 em · gap 0).

   Los diez bloques de fondo del comp suman el alto del contenido:
   969,00 + 504,31 + 547,75 + 548,08 + 576,11 + 813,00 + 2885,51 + 1475,24 +
   812,95 + 547,46 = 9679,41, y con el pie (546,17 + 105,94) dan los 10331,5
   del lienzo.
   ============================================================================= */

/* --- 13.0 Utilidades de la página ------------------------------------------ */

.luces-fund-contenedor {
	box-sizing: border-box;
	width: min(var(--luces-container), calc(100% - 48px));
	max-width: min(var(--luces-container), calc(100% - 48px));
	margin-inline: auto;
}

/* Hairline divisoria de sección: el comp la deja descentrada (295,4 de margen
   izquierdo contra 305,3 del derecho); se centra, como en el inicio. */
.luces-fund-hairline {
	display: block;
	width: min(1379.29px, calc(100% - 48px));
	height: 1px;
	margin-inline: auto;
	background-color: var(--luces-gris-medio);
	border: 0;
}

/* --- 13.1 Encabezado (y 0–969) ---------------------------------------------
   Eyebrow (24 Medium, baseline 390,04) + H1 de 3 líneas (62,93 SemiBold,
   baseline 492,98). Sin bajada, sin CTA, sin puntos. */

.luces-hero.luces-hero--fundacion .luces-hero__inner { padding-top: 363.208px; }

.luces-hero--fundacion .luces-hero__eyebrow {
	margin: 0;
	font-size: var(--luces-fs-eyebrow);
	line-height: var(--luces-lh-eyebrow);
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-blanco);
}

/* Calificado con el elemento: el Theme Style del kit sale como
   `.elementor-kit-N h1{...}` (0,1,1) y le gana a una clase suelta. */
.luces-hero.luces-hero--fundacion h1.luces-hero__title {
	padding-top: 0;
	margin-top: 34.192px;
}

/* --- 13.2 Intro + marca de agua (y 968,98 – 1473,29 · 504,31) --------------- */

.e-con.luces-fund-intro {
	display: block;
	position: relative;
	overflow: hidden;
	height: 504.31px;
	padding: 0;
	background-color: var(--luces-blanco);
}

.luces-fund-intro__bloque { position: relative; z-index: 1; padding-top: 93.434px; }

.luces-fund-intro h2.luces-fund-intro__h2 {
	margin: 0;
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

/* La bajada son DOS párrafos, no un bloque de 2 líneas: no existe ningún ancho
   de caja que reproduzca el corte del diseño (piso 422,81 contra techo 409,08) y
   son dos oraciones completas. Con dos <p> el render es idéntico al comp y en
   mobile cada oración fluye sola. Márgenes abreviados (gotcha 8). */
.luces-fund-intro__lead {
	margin: 35.608px 0 0;
	font-size: var(--luces-fs-lead);
	line-height: 31.992px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-fund-intro__lead + .luces-fund-intro__lead { margin: 0; }

.luces-fund-intro__p {
	margin: 34.066px 0 0;
	max-width: 540px;
	font-size: var(--luces-fs-body);
	line-height: 28.008px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* Marca de agua: el logo en negro al 10 % (el comp lo dibuja con un ExtGState
   de ca/CA 0,100006). Va como capa propia detrás del texto — z-index 0 contra
   el 1 del bloque de copy, NO negativo: con `position:relative` sin z-index el
   contenedor no crea contexto de apilamiento y un z-index negativo la mandaría
   detrás del fondo blanco de la sección. */
.luces-fund-intro__watermark {
	position: absolute;
	z-index: 0;
	top: 69.49px;
	left: calc((100% - min(var(--luces-container), 100% - 48px)) / 2 + 725.65px);
	width: 313.75px;
	height: 313.75px;
	opacity: .1;
	pointer-events: none;
}

/* Calificado con dos clases + elemento: `.elementor img { height:auto }` (0,1,1)
   empata con una clase suelta y gana por orden (gotcha 14). */
.luces-fund-intro__watermark img.luces-fund-watermark {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- 13.3 Los dos splits a sangre (y 1473,29 – 2569,12) --------------------
   50/50 exactos. La foto va como background de un <div> dentro del widget de
   HTML: así no la alcanza la regla de carga diferida de fondos de contenedor
   (gotcha 1). El rect #12256D que el comp dibuja bajo las dos fotos queda 100 %
   tapado y NO se replica. */

.e-con.luces-fund-split-a,
.e-con.luces-fund-split-b { display: block; padding: 0; }

.e-con.luces-fund-split-a { height: 547.75px; }
.e-con.luces-fund-split-b { height: 548.08px; }

/* El alto va como `min-height` en cada variante, NO como `height: 100%`: el
   widget de HTML del maquetador se interpone entre el contenedor con alto fijo
   y esta sección, y como ese wrapper tiene alto automático el porcentaje se
   resuelve contra `auto` y la mitad de la foto queda con el alto del texto. */
.luces-fund-split {
	display: flex;
	width: 100%;
}

.luces-fund-split__texto { flex: 0 0 50%; max-width: 50%; box-sizing: border-box; }

.luces-fund-split__foto {
	flex: 0 0 50%;
	max-width: 50%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.luces-fund-split p.luces-fund-split__p {
	margin: 0;
	font-size: var(--luces-fs-body-l);
	line-height: 33.99px;
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking);
}

.luces-fund-split__barra {
	display: block;
	width: var(--luces-divisor-w);
	height: var(--luces-divisor-h);
	background-color: var(--luces-verde-lima);
}

/* Mitad izquierda crema. El padding se calcula contra el ancho de la SECCIÓN
   (el 100 % de un ítem flex se resuelve contra el contenedor), así que el
   50 % es la mitad del viewport: 990 − 580,38 = 409,62 a 1980. */
.luces-fund-split--a { background-color: var(--luces-crema); min-height: 547.75px; }
.luces-fund-split--a .luces-fund-split__texto {
	padding: 188.449px 24px 0 max(24px, calc(50% - 580.38px));
}
.luces-fund-split--a p.luces-fund-split__p {
	max-width: 453px;
	color: var(--luces-verde-casi-negro);
}
.luces-fund-split--a .luces-fund-split__barra { margin-top: 29.411px; }

/* Mitad derecha verde. El texto arranca 85,69 px adentro de su mitad. */
.luces-fund-split--b { background-color: var(--luces-verde-oscuro); min-height: 548.08px; }
.luces-fund-split--b .luces-fund-split__texto {
	order: 2;
	padding: 216.679px 24px 0 85.69px;
}
.luces-fund-split--b .luces-fund-split__foto { order: 1; }
.luces-fund-split--b p.luces-fund-split__p {
	max-width: 459px;
	color: var(--luces-blanco);
}
.luces-fund-split--b .luces-fund-split__barra { margin-top: 33.371px; }

/* --- 13.4 Misión (y 2569,12 – 3145,23 · 576,11) ----------------------------
   Título + rule vertical + cuerpo. El título NO está alineado al margen del
   contenedor: el comp lo corre 156,83 px adentro. El rule (193) es más LARGO
   que el cuerpo (136): arranca 17,9 px arriba y termina 41,7 abajo. */

.e-con.luces-fund-mision {
	display: block;
	padding: 0;
	height: 576.11px;
	background-color: var(--luces-blanco);
}

.luces-fund-mision__fila {
	display: grid;
	grid-template-columns: 462.27px 1.5px 1fr;
	padding-top: 191.57px;
}

.luces-fund-mision h2.luces-fund-mision__h2 {
	margin: 55.484px 0 0;
	padding-left: 156.83px;
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-fund-mision__rule {
	display: block;
	width: 1.5px;
	height: 193px;
	background-color: var(--luces-gris-claro);
}

/* El corrimiento va en el MARGEN, no en el padding: con `box-sizing:border-box`
   (Hello lo pone global) un padding se comería el `max-width` medido. */
.luces-fund-mision__p {
	margin: 17.904px 0 0 123.21px;
	max-width: 545px;
	font-size: var(--luces-fs-body-l);
	line-height: 34px;
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* --- 13.5 La comunidad en cada proyecto (y 3145,23 – 3958,23 · 813) --------
   Foto a sangre. El asset YA viene espejado y lavado (identidad verificada
   contra el embebido espejado, diff 0,30): NO lleva scaleX(-1) ni filtros. */

.e-con.luces-fund-comunidad { display: block; padding: 0; height: 813px; }

.luces-fund-comunidad {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 813px;
	padding-top: 185.888px;
	background-color: #efefef;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.luces-fund-comunidad h2.luces-fund-comunidad__h2 {
	margin: 0;
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-oscuro);
}

.luces-fund-comunidad__p {
	margin: 33.704px 0 0;
	max-width: 542px;
	font-size: var(--luces-fs-body);
	line-height: 28.008px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-fund-comunidad__p + .luces-fund-comunidad__p { margin-top: 27.99px; }

/* --- 13.6 Bloque blanco: equipo + frase + "Qué nos mueve" + valores --------
   (y 3958,23 – 6843,74 · 2885,51) */

.e-con.luces-fund-blanco {
	display: block;
	padding: 0;
	height: 2885.51px;
	background-color: var(--luces-blanco);
}

/* 13.6.a Conocé a nuestro equipo */

.luces-fund-equipo { padding-top: 111.806px; }

.luces-fund-equipo h2.luces-fund-equipo__h2 {
	margin: 0;
	max-width: 380px;
	font-size: var(--luces-fs-h3);
	line-height: var(--luces-lh-h3);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-fund-equipo__divisor {
	display: block;
	width: var(--luces-divisor-w);
	height: var(--luces-divisor-h);
	margin-top: 41.724px;
	background-color: var(--luces-verde-oscuro);
}

/* El comp deja la grilla 2,17 px descentrada (centro 988,93 contra 990): se
   centra, como el resto de las grillas del sitio. */
.luces-fund-equipo__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 31.7px;
	row-gap: 58.82px;
	width: min(1161.1px, calc(100% - 48px));
	margin: 90px auto 0;
}

/* Los 8 "placeholders" son rects vectoriales planos #F6F2F1 del comp, NO fotos
   ausentes. Los nombres, cargos y fotos reales los tiene que mandar el cliente. */
.luces-fund-equipo__foto {
	display: block;
	width: 100%;
	aspect-ratio: 266.5 / 272.38;
	border-radius: var(--luces-radius);
	background-color: var(--luces-crema);
}

/* Indent normalizado a 20 px: el comp usa 18,97 / 19,91 / 22,62 / 24,68. */
.luces-fund-equipo__nombre {
	margin: 31.262px 0 0;
	padding-left: 20px;
	font-size: var(--luces-fs-body);
	line-height: 28.008px;
	font-weight: var(--luces-fw-bold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

.luces-fund-equipo__cargo {
	margin: 5.994px 0 0;
	padding-left: 20px;
	font-size: var(--luces-fs-body);
	line-height: 28.008px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* 13.6.b Frase "Más de 20 años…" — centrada sobre el eje 990 exacto */

.luces-fund-frase {
	margin: 98.86px auto 0;
	max-width: 511px;
	font-size: var(--luces-fs-h4);
	line-height: 42.984px;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	text-align: center;
	color: var(--luces-verde-lima);
}

.luces-fund-hairline--a { margin-top: 113.848px; }

/* 13.6.c Qué nos mueve */

.luces-fund-mueve { padding-top: 123.184px; }

.luces-fund-mueve h2.luces-fund-mueve__h2 {
	margin: 0;
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-oscuro);
}

.luces-fund-mueve__cols {
	display: grid;
	grid-template-columns: 480px 1fr;
	column-gap: 101.16px;
	margin-top: 71.727px;
}

.luces-fund-mueve__p {
	margin: 0;
	font-size: var(--luces-fs-body-l);
	line-height: 28.006px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

.luces-fund-mueve__col--b .luces-fund-mueve__p { max-width: 558px; }

/* Las dos barras del comp están desalineadas 14,35 px entre sí (izq. y 5806,05,
   der. y 5791,70): se alinean en la media, 5798,875. */
.luces-fund-mueve__barra {
	display: block;
	width: 124.49px;
	height: 7.31px;
	margin-top: 38.236px;
	background-color: var(--luces-verde-lima);
}

.luces-fund-hairline--b { margin-top: 163.775px; }

/* --- 13.7 Carrusel de valores (y 5969,96 – 6843,74) ------------------------
   4 slides, 3 visibles, avance de a 1 card, sin loop. El track se desborda del
   contenedor por los dos lados: el viewport mide 1258,90 (peek de 48,85 y 49,25)
   y entran 3 cards de 395,35 con 36,425 de canaleta. */

.luces-fund-valores { padding-top: 115.994px; }

.luces-fund-valores h2.luces-valores__h2 {
	margin: 0;
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-oscuro);
}

.luces-valores__viewport {
	overflow: hidden;
	width: min(1258.9px, calc(100% - 48px));
	margin: 59.466px auto 0;
}

.luces-valores__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 395.35px;
	column-gap: 36.425px;
	transition: transform 450ms cubic-bezier(.22, .61, .36, 1);
}

.luces-valor {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 420.54px;
	padding: 0 48px;
	border-radius: var(--luces-radius);
	background-color: var(--luces-verde-claro);
}

/* Los tres íconos del comp están alineados por ABAJO (los tres terminan en
   y 6305,40, o sea a 85,58 px del tope de la card), no por arriba: sus altos
   son 33,81 / 37,09 / 49,23. Con un padding-top fijo quedarían desalineados. */
.luces-valor__icono {
	display: flex;
	align-items: flex-end;
	height: 85.58px;
	margin: 0;
}

.luces-valor__icono svg { display: block; }

.luces-valor h3.luces-valor__titulo {
	margin: 28.182px 0 0;
	font-size: var(--luces-fs-h4);
	line-height: var(--luces-lh-h4);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-oscuro);
}

/* 281,3 px es el único ancho que reproduce los 17 cortes de línea de las tres
   cards del PDF a la vez. La ventana medida SOBRE EL RENDER es de 1,07 px
   (280,98 – 281,88): por debajo se parte `Motivamos la proactividad` y por
   encima entra `…que ayuden a` en la línea 4 de Inclusión y la card pierde una
   línea. No moverlo sin volver a medir las tres. El 4º valor lleva caja propia:
   el .ai le da otra (padding 41,0/58,7) y su copy trae un guión de corte
   manual, así que fluye distinto. */
.luces-valor__p {
	margin: 22.681px 0 0;
	max-width: var(--luces-valor-w, 281.3px);
	font-size: var(--luces-fs-body-l);
	line-height: 28.006px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

.luces-valores__controles {
	display: flex;
	align-items: center;
	margin-top: 32.704px;
	line-height: 33px;
}

.luces-valores__contador {
	margin: 0;
	font-size: var(--luces-fs-body-l);
	line-height: 33px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-valores__n { font-weight: var(--luces-fw-semibold); }

/* Los 5 espacios que el comp mete entre el contador y los chevrones. */
.luces-valores__flechas { display: flex; gap: 5.6px; margin-left: 19.8px; }

/* Calificado con el elemento: el reset.css del padre se encola DESPUÉS y trae
   `[type="button"],button{display:inline-block}` + el magenta #c36 (gotcha 2). */
button.luces-valores__flecha {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 13.2px;
	height: 33px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--luces-font);
	font-size: var(--luces-fs-body-l);
	line-height: 33px;
	font-weight: var(--luces-fw-regular);
	color: var(--luces-gris-medio);
	cursor: pointer;
	transition: color .2s ease, opacity .2s ease;
}

/* El área de clic real es de 29 x 41 px sin mover el layout: el glifo del comp
   mide 13 px y no se puede agrandar sin romper la medida. */
button.luces-valores__flecha::before {
	content: "";
	position: absolute;
	inset: -4px -8px;
}

button.luces-valores__flecha:hover,
button.luces-valores__flecha:focus-visible { color: var(--luces-verde-lima); background: none; }

button.luces-valores__flecha[disabled] { opacity: .35; cursor: default; }
button.luces-valores__flecha[disabled]:hover { color: var(--luces-gris-medio); }

@media (prefers-reduced-motion: reduce) {
	.luces-valores__track { transition: none; }
}

/* --- 13.8 Nuestros proyectos (y 6843,74 – 8318,98 · 1475,24) ---------------
   Banda crema con la MISMA card que "Otros Proyectos" y Ayudanos, en blanco.
   Mismo ancho de grilla (1206,42) y misma canaleta (54,93) que Ayudanos. */

.e-con.luces-fund-proyectos {
	display: block;
	padding: 0;
	height: 1475.24px;
	background-color: var(--luces-crema);
}

.luces-fund-proy { padding-top: 84.918px; }

.luces-fund-proy h2.luces-fund-proy__h2 {
	margin: 0;
	font-size: var(--luces-fs-h2);
	line-height: var(--luces-lh-h2);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-oscuro);
}

.luces-fund-proy__p {
	margin: 45.097px 0 0;
	max-width: 1013px;
	font-size: var(--luces-fs-body);
	line-height: 28.008px;
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-fund-proy__p + .luces-fund-proy__p { margin-top: 27.991px; }

.luces-cards--fundacion {
	grid-template-columns: repeat(3, 1fr);
	column-gap: 54.93px;
	row-gap: 79.07px;
	width: min(1206.42px, calc(100% - 48px));
	margin: 52.78px auto 0;
}

.luces-cards--fundacion .luces-card { min-height: 439.88px; }

/* El link ya va anclado al piso por `margin-top: auto`: sin este cero, el
   padding heredado de la card de "Otros Proyectos" la estira. */
.luces-cards--fundacion .luces-card__cta { padding-top: 0; }

/* --- 13.9 Alianzas (y 8318,98 – 9131,93 · 812,95) --------------------------
   Es el MISMO componente que el bloque de alianzas del inicio, con otro copy:
   las 5 decoraciones, el bloque offset y el clip del logo caen a 0,15 px de los
   valores del inicio y el bloque de texto mide 268,60 en las dos páginas. Se
   reusa entero; acá solo van los tres deltas de ritmo y la caja del párrafo. */

.e-con.luces-fund-alianzas {
	display: block;
	padding: 0;
	height: 812.95px;
	background-color: var(--luces-blanco);
}

.luces-fund-alianzas-wrap { padding-top: 164.12px; }
.luces-fund-alianzas-wrap .luces-home-alianzas { margin-top: 92.346px; }
.luces-fund-alianzas-wrap .luces-home-alianzas__lead { margin-top: 15.856px; }
.luces-fund-alianzas-wrap .luces-home-alianzas__p { margin-top: 33.56px; max-width: 503px; }

/* --- 13.10 Responsive -------------------------------------------------------
   El comp no trae ninguna vista mobile ni tablet: todo lo de acá es solución
   propia. Los bloques con alto fijo lo sueltan y pasan a padding. */

@media (max-width: 1024px) {
	.luces-hero.luces-hero--fundacion .luces-hero__inner { padding-top: 180px; }

	.e-con.luces-fund-intro,
	.e-con.luces-fund-mision,
	.e-con.luces-fund-blanco,
	.e-con.luces-fund-proyectos,
	.e-con.luces-fund-alianzas { height: auto; padding: 56px 0 64px; }

	.luces-fund-intro__bloque { padding-top: 0; }
	.luces-fund-intro__p { max-width: 100%; }
	.luces-fund-intro__watermark { left: auto; right: 0; top: 24px; width: 220px; height: 220px; }

	/* Los splits se apilan SIEMPRE texto → foto: el copy de los dos es una sola
	   frase partida en dos secciones y tiene que leerse seguido. */
	.e-con.luces-fund-split-a,
	.e-con.luces-fund-split-b { height: auto; }

	.luces-fund-split { flex-direction: column; }
	.luces-fund-split--a,
	.luces-fund-split--b { min-height: 0; }

	.luces-fund-split__texto,
	.luces-fund-split__foto { flex: 1 1 auto; max-width: 100%; width: 100%; }

	.luces-fund-split--a .luces-fund-split__texto,
	.luces-fund-split--b .luces-fund-split__texto {
		order: 1;
		padding: 56px 24px 48px;
	}

	.luces-fund-split--a .luces-fund-split__foto,
	.luces-fund-split--b .luces-fund-split__foto { order: 2; aspect-ratio: 990 / 548; }

	.luces-fund-split--a p.luces-fund-split__p,
	.luces-fund-split--b p.luces-fund-split__p { max-width: 100%; }

	/* Misión: el rule vertical no tiene sentido apilado. */
	.luces-fund-mision__fila { grid-template-columns: 1fr; padding-top: 0; }
	.luces-fund-mision h2.luces-fund-mision__h2 { margin: 0; padding-left: 0; }
	.luces-fund-mision__rule { display: none; }
	.luces-fund-mision__p { margin: 24px 0 0; max-width: 100%; }

	.e-con.luces-fund-comunidad { height: auto; }
	.luces-fund-comunidad { min-height: 0; padding: 56px 0 64px; }
	.luces-fund-comunidad__p { max-width: 100%; }

	.luces-fund-equipo { padding-top: 0; }
	.luces-fund-equipo__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 24px;
		row-gap: 40px;
		margin-top: 48px;
		width: calc(100% - 48px);
	}

	.luces-fund-frase { margin-top: 64px; max-width: 100%; }
	.luces-fund-hairline--a { margin-top: 48px; }
	.luces-fund-mueve { padding-top: 56px; }
	.luces-fund-mueve__cols { grid-template-columns: 1fr; row-gap: 32px; margin-top: 40px; }
	.luces-fund-mueve__col--b .luces-fund-mueve__p { max-width: 100%; }
	.luces-fund-hairline--b { margin-top: 56px; }

	.luces-fund-valores { padding-top: 56px; }
	.luces-valores__viewport { width: calc(100% - 48px); margin-top: 40px; }
	.luces-valores__track { grid-auto-columns: min(360px, calc(100vw - 72px)); column-gap: 24px; }
	.luces-valor { height: auto; min-height: 380px; padding: 0 32px 32px; }
	.luces-valor__p { max-width: 100%; }

	.luces-fund-proy { padding-top: 0; }
	.luces-fund-proy__p { max-width: 100%; }
	.luces-cards--fundacion {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 24px;
		row-gap: 40px;
		margin-top: 40px;
		width: calc(100% - 48px);
	}

	.luces-fund-alianzas-wrap { padding-top: 0; }
	.luces-fund-alianzas-wrap .luces-home-alianzas { margin-top: 56px; }
	.luces-fund-alianzas-wrap .luces-home-alianzas__p { max-width: 100%; }
}

@media (max-width: 640px) {
	.luces-fund-equipo__grid { grid-template-columns: 1fr; }
	.luces-cards--fundacion { grid-template-columns: 1fr; }
	.luces-fund-intro h2.luces-fund-intro__h2,
	.luces-fund-comunidad h2.luces-fund-comunidad__h2,
	.luces-fund-mueve h2.luces-fund-mueve__h2,
	.luces-fund-valores h2.luces-valores__h2,
	.luces-fund-proy h2.luces-fund-proy__h2,
	.luces-fund-mision h2.luces-fund-mision__h2 { font-size: 36px; line-height: 1.2; }
	.luces-fund-equipo h2.luces-fund-equipo__h2 { font-size: 32px; line-height: 1.2; max-width: 100%; }
	.luces-fund-frase { font-size: 28px; line-height: 1.2; }
	.luces-fund-intro__watermark { display: none; }
}

/* =============================================================================
   14. Donar — encabezado, intro de 2 columnas con divisor vertical, fila de 4
   cards-foto, CTA, bloque de donación con card compuesta, transparencia legal,
   balances y bloque de ayuda. Medidas 1:1 del diseño (lienzo 1980 × 4142,82):
   los "tops" salen de pasar la baseline del diseño a caja de línea con las
   métricas reales de la familia (ascent 1,038 em · descent 0,222 em · gap 0).
   ============================================================================= */

/* --- 14.0 Utilidades de la página ------------------------------------------ */

.luces-donar-contenedor {
	box-sizing: border-box;
	width: min(var(--luces-container), calc(100% - 48px));
	max-width: min(var(--luces-container), calc(100% - 48px));
	margin-inline: auto;
}

/* --- 14.1 Encabezado (y 0–969) ---------------------------------------------
   Las tres baselines del diseño (eyebrow 414,75 · H1 517,69 · bajada 597,45)
   son IDÉNTICAS a las del encabezado de las 6 fichas de proyecto: se reusan sus
   valores sin tocar uno solo. */

.luces-hero.luces-hero--donar .luces-hero__inner { padding-top: 387.92px; }

.luces-hero--donar .luces-hero__eyebrow {
	margin: 0;
	font-size: var(--luces-fs-eyebrow);
	line-height: var(--luces-lh-eyebrow);
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-blanco);
}

/* Calificado con el elemento y las dos clases: el Theme Style del kit sale como
   `.elementor-kit-N h1{...}` (0,1,1) y le gana a una clase suelta (0,1,0). */
.luces-hero.luces-hero--donar h1.luces-hero__title {
	padding-top: 0;
	margin-top: 34.08px;
}

.luces-hero--donar .luces-hero__bajada {
	margin: 43.76px 0 0;
	max-width: var(--luces-bajada-w, 534px);
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-blanco);
}

.luces-hero--donar .luces-hero__bajada strong {
	font-weight: var(--luces-fw-bold);
	color: inherit;
}

/* --- 14.2 Banda blanca (y 969–2001 · 1032) ---------------------------------
   Contiene el intro de 2 columnas, la fila de 4 cards-foto y el CTA. Todo vive
   dentro de un <section> del widget de HTML: así el fondo no depende de la
   regla de carga diferida del maquetador (gotcha 1) y el divisor vertical
   tiene un ancestro posicionado propio. */

.luces-donar-blanco {
	position: relative;
	padding: 86.704px 0 79.818px;	/* tope de banda -> top del H2 (1055,704) */
	background-color: var(--luces-blanco);
}

/* 14.2.1 Intro "Con tu aporte" (y 970–1300) */

.luces-donar-intro__cols {
	display: grid;
	grid-template-columns: 640.97px minmax(0, 1fr);
	align-items: start;
}

.luces-donar-intro h2.luces-donar-intro__h2 {
	margin: 0;
	max-width: var(--luces-donar-h2-w, 430px);
	font-size: var(--luces-fs-h5);		/* 32 */
	line-height: 38px;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-oscuro);
}

.luces-donar-intro__p {
	margin: 28.637px 0 0;
	max-width: var(--luces-donar-p-w, 550px);
	font-size: var(--luces-fs-body);
	line-height: 28.01px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-donar-intro__p strong { font-weight: var(--luces-fw-bold); color: inherit; }

/* El diseño deja la columna derecha 2,08 px más abajo que la izquierda: se
   alinean (normalización declarada). El margen replica el alto del H2 (76) más
   su separación con el párrafo (28,637). */
.luces-donar-intro__destacado {
	margin: 104.637px 0 0;
	max-width: var(--luces-donar-destacado-w, 380px);
	font-size: var(--luces-fs-body);
	line-height: 28.01px;
	font-weight: var(--luces-fw-bold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-lima);
}

/* Divisor vertical decorativo de altura fija. El diseño lo dibuja a
   lw 0,204: se normaliza a 1 px, igual que el borde de los inputs. Va absoluto
   contra la banda, en el centro exacto de página (x 990). */
.luces-donar-intro__divisor {
	position: absolute;
	top: 94.41px;
	left: 50%;
	width: 1px;
	height: 192.64px;
	background-color: var(--luces-gris-medio);
}

/* 14.2.2 Las 4 cards-foto (y 1300–1790) --------------------------------------
   La card ES la foto: el degradado está quemado en el JPG (arranca al 58 % de
   la altura) ⇒ NO se agrega overlay. Los archivos miden 1184 × 1710 y su
   proporción es la misma que la de la card (0,6924), así que `cover` no
   recorta nada. El bloque sobresale ~20 px por lado de la columna de
   contenido: es su ancho, no un error de centrado. */

.luces-donar-cards {
	display: grid;
	grid-template-columns: repeat(4, 284.16px);
	column-gap: 20.86px;
	justify-content: center;
	width: min(1199.22px, calc(100% - 48px));
	margin: 113.689px auto 0;
}

.luces-donar-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	height: 410.4px;
	/* padding izquierdo del texto: el diseño usa 28 / 29 / 28 / 25 → 28.
	   El 39,42 de abajo ancla la ÚLTIMA caja de línea al piso de la card, que
	   es lo que alinea las cuatro (la card 1 tiene 3 líneas y las otras 4). */
	padding: 0 20px 39.42px 28px;
	border-radius: var(--luces-radius);
	background-color: var(--luces-verde-casi-negro);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}

.luces-donar-card__texto {
	margin: 0;
	font-size: var(--luces-fs-lead);	/* 24 */
	line-height: 28.01px;
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-blanco);
}

.luces-donar-card__texto strong {
	font-weight: var(--luces-fw-bold);
	color: inherit;
}

/* 14.2.3 CTA "¡Animate a dejar tu huella" (y 1790–2001) */

.luces-donar-cta {
	margin: 54.722px auto 0;
	max-width: var(--luces-donar-cta-w, 455px);
	font-size: var(--luces-fs-h4);		/* 36 */
	line-height: 49px;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-lima);
	text-align: center;
}

/* --- 14.3 Bloque de donación (y 2001–2700) ---------------------------------
   Card compuesta: barra de ícono #034F10 r12 DESACOPLADA 13,15 px del cuerpo
   blanco r12. Ningún widget hace "encabezado flotante separado del cuerpo".
   Calificado con `.e-con`: el maquetador emite el padding del contenedor con
   una sola clase desde una hoja que carga después de esta (gotcha 10). */

.e-con.luces-donar-bloque {
	display: grid;
	grid-template-columns: min(551.26px, 100%);
	column-gap: 44.77px;
	justify-content: center;
	align-items: start;
	padding: 104.95px 24px 0;
	background-color: var(--luces-crema);
}

.luces-donar-col {
	display: flex;
	flex-direction: column;
	gap: 13.15px;
}

/* La columna B es un contenedor del maquetador (adentro va el shortcode del
   formulario), así que lleva el mismo flex pero calificado con `.e-con`. */
.e-con.luces-donar-col--b {
	display: flex;
	flex-direction: column;
	gap: 13.15px;
	padding: 0;
}

.luces-donar-barra {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 77.28px;
	padding-left: 43.73px;
	border-radius: var(--luces-radius);
	background-color: var(--luces-verde-oscuro);
}

/* El diseño deja la barra de la columna B 1,55 px más ancha por lado que su
   card (la A coincide exacta): se normaliza al ancho de la card. */
.luces-donar-barra--b { padding-left: 38.51px; }

.luces-donar-barra svg { display: block; }
.luces-donar-barra--a svg { width: 20.08px; height: 37.21px; }
.luces-donar-barra--b svg { width: 49.18px; height: 47.33px; }

/* Cuerpo blanco: misma caja que la card de formulario del resto del lote
   (478,06 de alto, radio 12), con el ancho y los paddings de este comp. */
.luces-donar-card-cuerpo,
.e-con.luces-donar-card-cuerpo {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 478.06px;
	/* medido: 25,408 arriba · 35,55 izq. · 29,31 der. */
	padding: 25.408px 29.31px 36.4px 35.55px;
	border-radius: var(--luces-radius);
	background-color: var(--luces-blanco);
}

.luces-donar-card-cuerpo .luces-form-card__title,
.luces-donar-card-cuerpo__titulo {
	margin: 0 0 30.652px;
	font-size: var(--luces-fs-lead);	/* 24 */
	line-height: 28.8px;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-oscuro);
}

/* 14.3.1 Columna A — las 4 cajas de datos bancarios.
   NO son campos de formulario: son cajas estáticas con el rótulo y el valor
   VACÍO, como el comp (el cliente todavía no mandó los datos). Mismo estilo de
   caja que los inputs: borde #ECEBE7 1 px (el comp dibuja 0,488) y radio 0. */

.luces-donar-datos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--luces-input-gap);
}

.luces-donar-dato {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--luces-input-h);
	padding: 0 var(--luces-input-pad-x);
	border: var(--luces-input-border);
	border-radius: var(--luces-input-radius);
	background-color: var(--luces-blanco);
	font-size: var(--luces-fs-placeholder);
	line-height: normal;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* El diseño arranca los dos link-CTA 7,09 px a la derecha de sus propios
   campos: se alinean. El 82,196 es la separación medida entre el pie
   de la última caja y el tope de la caja de línea del CTA. */
.luces-donar-cta-link {
	/* El cuerpo de la card es un flex column: sin esto el <a> se estira al
	   ancho completo y su caja clickeable tapa toda la fila. */
	align-self: flex-start;
	margin-top: 82.196px;
	font-size: 18px;
}

/* El subrayado corto del patrón está calibrado para el link de 14 px; a 18 px
   la caja de línea es más alta y hay que acortar el gap para que la línea caiga
   en la y del diseño (2637,04). */
.luces-donar-card-cuerpo .luces-link--18::after { margin-top: 6.604px; }

/* 14.3.2 Columna B — el formulario (CF7 22) */

.e-con.luces-donar-card-cuerpo--b { scroll-margin-top: 24px; }

/* El margen del bloque de envío COLAPSA con el margin-bottom del último campo
   (16 px): hay que escribir el valor final, no el delta (gotcha 15). El
   `line-height: 0` anula el strut del bloque, que si no empuja 1 px hacia abajo
   al <input> inline-block y estira la card (gotcha 4). */
.luces-donar-card-cuerpo--b .luces-form__submit {
	margin-top: 20.556px;
	line-height: 0;
}

.luces-donar-card-cuerpo--b .luces-form__submit input[type="submit"],
.luces-donar-card-cuerpo--b .luces-form__submit button[type="submit"] { font-size: 18px; }

.luces-donar-card-cuerpo--b .luces-form__submit::after { margin-top: 6.604px; }

/* El indicador de envío de CF7 es un <span> inline-block de 24 px alineado a la
   baseline: estira la línea y empuja el texto del submit 8 px (gotcha 16). */
.luces-donar-card-cuerpo--b .luces-form .wpcf7-spinner {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0 0 0 10px;
}

/* --- 14.4 Transparencia legal (y 2700–2931) --------------------------------
   Dos párrafos con barra de cita #51930C de 6 × 56 a la izquierda. La barra va
   separada del texto 29,58 px y arranca 0,94 px por encima de la caja de línea
   del párrafo, como el diseño. */

.e-con.luces-donar-crema {
	display: block;
	padding: 0 24px;
	background-color: var(--luces-crema);
}

.luces-donar-legal { padding-top: 75.491px; }

.luces-donar-legal__p {
	position: relative;
	margin: 0;
	padding-left: 50.58px;
	max-width: calc(50.58px + var(--luces-donar-legal-w, 642px));
	font-size: var(--luces-fs-body);
	line-height: 28.01px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-donar-legal__p + .luces-donar-legal__p { margin-top: 9.986px; }

.luces-donar-legal__p::before {
	content: "";
	position: absolute;
	left: 15px;
	top: -0.941px;
	width: 6px;
	height: 56px;
	background-color: var(--luces-verde-lima);
}

.luces-donar-legal__p--b { --luces-donar-legal-w: 748px; }

/* Divisor de sección: 1160 px, #898989, 1 px. Solo en esta página (2 usos). */
.luces-donar-divisor {
	display: block;
	width: min(1160px, 100%);
	height: 1px;
	margin-inline: auto;
	background-color: var(--luces-gris-medio);
	border: 0;
}

.luces-donar-divisor--a { margin-top: 59.033px; }
.luces-donar-divisor--b { margin-top: 90.95px; }

/* --- 14.5 Balances históricos (y 2931–3199) --------------------------------
   Entre los dos divisores. Los 3 PDF todavía no existen: los botones se
   construyen fieles y apuntan a `#` con aria-disabled + title="Pendiente". */

.luces-donar-balances { text-align: center; }

.luces-donar-balances__intro {
	margin: 52.589px 0 0;
	font-size: var(--luces-fs-body);
	line-height: 28.01px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

.luces-donar-balances__fila {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 34.55px;
	margin-top: 35.451px;
}

/* Botón sólido con ícono: 263,44 × 60, radio 12 (NO pill: a 60 px de alto un
   pill daría radio 30; el comp mide 12,00 con 36 px de tramo recto). */
.luces-donar-balance {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	width: var(--luces-btn-icono-w);
	height: var(--luces-btn-icono-h);
	padding-left: var(--luces-btn-icono-pad-left);
	border-radius: var(--luces-btn-icono-radius);
	background-color: var(--luces-btn-icono-bg);
	color: var(--luces-blanco);
	font-family: var(--luces-font);
	font-size: 18px;
	line-height: 1.49;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-ui);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.luces-donar-balance:hover,
.luces-donar-balance:focus,
.luces-donar-balance:focus-visible {
	background-color: var(--luces-verde-lima);
	color: var(--luces-blanco);
	text-decoration: none;
}

/* Mientras no lleguen los PDF el destino es `#`: se marca como deshabilitado
   para lector de pantalla y se le saca el efecto de hover. */
.luces-donar-balance[aria-disabled="true"] { cursor: default; }
.luces-donar-balance[aria-disabled="true"]:hover,
.luces-donar-balance[aria-disabled="true"]:focus {
	background-color: var(--luces-btn-icono-bg);
}

.luces-donar-balance svg {
	display: block;
	flex: none;
	width: 16.41px;
	height: 21.89px;
	margin-right: var(--luces-btn-icono-gap);
}

/* --- 14.6 Bloque de ayuda (y 3199–3490,71) --------------------------------- */

.luces-donar-ayuda {
	padding: 66.138px 0 88.885px;
	text-align: center;
	color: var(--luces-verde-casi-negro);
}

.luces-donar-ayuda__l {
	margin: 0;
	font-size: var(--luces-fs-body);
	line-height: 25px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: inherit;
}

/* El teléfono es placeholder del comp (+49 es Alemania) y va sin `tel:`. */
.luces-donar-ayuda__tel {
	margin: 7.738px 0 0;
	font-size: var(--luces-fs-tel);		/* 36 */
	line-height: 43.2px;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: inherit;
}

.luces-donar-ayuda__mail {
	margin: 6.739px 0 0;
	font-size: var(--luces-fs-body);
	line-height: 28.01px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: inherit;
}

/* --- 14.7 Responsive -------------------------------------------------------
   El comp no trae ninguna pantalla intermedia: de 1139 px para abajo la
   composición horizontal pasa a flujo vertical. Es solución propia. */

@media (max-width: 1139px) {
	.luces-donar-blanco { padding: 56px 0 64px; }

	.luces-donar-intro__cols { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.luces-donar-intro h2.luces-donar-intro__h2 { max-width: 100%; }
	.luces-donar-intro__p { max-width: 100%; }
	.luces-donar-intro__destacado { margin-top: 0; max-width: 100%; }
	.luces-donar-intro__divisor { display: none; }

	.luces-donar-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20.86px;
		row-gap: 20.86px;
		width: calc(100% - 48px);
		margin-top: 56px;
	}
	.luces-donar-card { height: auto; min-height: 410.4px; }

	.luces-donar-cta { margin-top: 56px; max-width: 100%; }

	.e-con.luces-donar-bloque {
		grid-template-columns: min(551.26px, 100%);
		justify-content: center;
		row-gap: 40px;
		padding: 56px 24px 0;
	}

	.luces-donar-legal { padding-top: 56px; }
	.luces-donar-legal__p,
	.luces-donar-legal__p--b { max-width: 100%; }

	.luces-donar-divisor--a { margin-top: 48px; }
	.luces-donar-divisor--b { margin-top: 56px; }
	.luces-donar-balances__intro { margin-top: 40px; }
	.luces-donar-balances__fila { gap: 24px; margin-top: 32px; }
	.luces-donar-ayuda { padding: 48px 0 64px; }
}

@media (max-width: 1024px) {
	.luces-hero.luces-hero--donar .luces-hero__inner { padding-top: 180px; }
	.luces-hero--donar .luces-hero__bajada { max-width: 100%; }
}

@media (max-width: 640px) {
	.luces-donar-intro h2.luces-donar-intro__h2 { font-size: 28px; line-height: 1.2; }
	.luces-donar-cards { grid-template-columns: minmax(0, 1fr); }
	.luces-donar-cta { font-size: 28px; line-height: 1.2; }
	.luces-donar-ayuda__tel { font-size: 28px; line-height: 1.2; }
	.luces-donar-balance { width: 100%; max-width: 263.44px; }
}

/* =============================================================================
   15. Portal de Noticias (índice) — encabezado en franja de 533, grilla 4 × 2 de
   cards de noticia y el bloque CTA + formulario. Medidas 1:1 del diseño
   (lienzo 1980 × 3040,92): los "tops" salen de pasar la baseline del comp a
   caja de línea CSS con las métricas reales de la familia.

   ⚠ El bloque CTA NO tiene la geometría de la portada: tiene la de la página
   de voluntariado — contenedor de 1102,75, columnas de 527,78 + 574,97 y
   padding-top 218,77. Lo único propio es el aire entre la bajada y el divisor,
   porque acá la bajada es de una línea y allá de tres.
   ============================================================================= */

/* --- 15.1 Encabezado — es una franja, no una pantalla completa -------------- */

.luces-hero.luces-hero--noticias { min-height: 533.17px; }

.luces-hero.luces-hero--noticias .luces-hero__inner { padding-top: 255.807px; }

.luces-hero--noticias .luces-hero__eyebrow {
	margin: 0;
	font-size: var(--luces-fs-eyebrow);
	line-height: var(--luces-lh-eyebrow);
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-blanco);
}

/* Es el ÚNICO H1 del sitio con interlínea 1,08 (68 px): el comp lo mide así
   (`TD −1.08 × 62,9343`) contra el 1,14 de las otras ocho páginas. Calificado
   con el elemento y las dos clases porque el Theme Style del kit sale como
   `.elementor-kit-N h1{...}` (0,1,1) y le gana a una clase suelta. */
.luces-hero.luces-hero--noticias h1.luces-hero__title {
	padding-top: 0;
	margin-top: 35.99px;
	line-height: 68px;
	/* El corte `Novedades de` / `la Fundación` es manual en el comp, pero SÍ
	   existe una ventana de anchos que lo reproduce con texto fluido:
	   444,53 – 507,40 (medido con los avances reales de la familia,
	   `_dev/measure/b1_notic_cajas.py`). Por eso no lleva `<br>` forzado. */
	max-width: var(--luces-h1-w, 475px);
}

/* --- 15.2 Listado ----------------------------------------------------------
   La banda mide 1066,56 y el contenido ocupa 875,3: los 195 px de blanco que
   quedan abajo son del diseño (es el hueco donde NO hay paginación). Por eso el
   alto va como `min-height` y no como padding. */

.e-con.luces-noticias-listado {
	box-sizing: border-box;
	display: block;
	min-height: 1066.56px;
	padding: 83.582px 0 0;
	background-color: var(--luces-blanco);
}

.luces-noticias-listado h2.luces-noticias-listado__h2 {
	margin: 0 auto;
	width: min(var(--luces-container), calc(100% - 48px));
	font-size: var(--luces-fs-h5);
	line-height: var(--luces-lh-h5);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-oscuro);
}

/* Misma card y mismo ancho de grilla que el inicio (1193,27): lo propio del
   índice es el aire sobre la fila 1 y la canaleta vertical, que sale de medir
   el paso entre filas del comp (382,48) menos el alto real de la card (317,06).
   Los gaps horizontales del comp son 23,09 / 23,72 / 23,09 → se normaliza a 23. */
.luces-noticias--index {
	padding-top: 58.3px;
	gap: 65.417px 23px;
}

/* --- 15.3 CTA + formulario -------------------------------------------------
   Los contenedores a ancho completo del maquetador NO llevan `.e-con-inner`:
   la grilla va sobre el contenedor mismo, calificada con `.e-con` para ganarle
   al `display:flex` y al padding que emite su propia hoja (gotchas 10 y 13). */

.e-con.luces-noticias-cta {
	display: grid;
	grid-template-columns: 527.78px 574.97px;
	justify-content: center;
	align-items: start;
	min-height: 789.08px;
	padding: 0 24px;
	background-color: var(--luces-crema);
}

.luces-noticias-cta__texto { padding-top: 218.766px; }

.luces-noticias-cta h2.luces-noticias-cta__h2 {
	margin: 0;
	max-width: var(--luces-h2-w, 454px);
	font-size: var(--luces-fs-h3);
	line-height: var(--luces-lh-h3);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

.luces-noticias-cta__p {
	margin: 25.876px 0 0;
	max-width: var(--luces-cta-p-w, 402px);
	font-size: var(--luces-fs-lead);
	line-height: 32px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* Propio del índice: la bajada es de UNA línea (en Ayudanos son tres y el aire
   es de 32,18). */
.luces-noticias-cta__divisor { margin: 25.958px 0 0; }

.e-con.luces-noticias-cta__card {
	box-sizing: border-box;
	width: 574.97px;
	max-width: 100%;
	margin-top: 139.77px;
	/* Idéntica a la card del inicio: mismos 5 campos y mismo ritmo interno
	   (25,398 / 30,662 allá contra 25,396 / 30,654 acá ⇒ Δ ≤ 0,008). */
	padding: 25.398px 29.7px 33.362px 35.6px;
	border-radius: var(--luces-radius);
	background-color: var(--luces-blanco);
}

.luces-noticias-cta__card .luces-form-card__title { margin: 0 0 30.662px; }

/* El margen del bloque de envío COLAPSA con el `margin-bottom` del último campo
   (16 px): hay que escribir el valor final, no la diferencia (gotcha 15). */
.luces-noticias-cta__card .luces-form__submit { margin-top: 25.078px; line-height: 0; font-size: 0; }

/* El indicador de envío del plugin mide 24 px y se alinea a la baseline: dentro
   de la caja del submit empuja el texto 8 px hacia abajo (gotcha 16). */
.luces-noticias-cta__card .luces-form__submit .wpcf7-spinner {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0 0 0 10px;
}

/* --- 15.4 Responsive del índice --------------------------------------------
   El comp no trae ninguna pantalla intermedia: es solución propia. */

@media (max-width: 1139px) {
	.e-con.luces-noticias-listado { min-height: 0; padding: 56px 0 64px; }
	.luces-noticias--index { padding-top: 40px; gap: 40px 23px; }

	.e-con.luces-noticias-cta {
		grid-template-columns: min(1102.75px, 100%);
		min-height: 0;
		padding: 56px 24px 64px;
	}
	.luces-noticias-cta__texto { padding-top: 0; }
	.e-con.luces-noticias-cta__card { margin-top: 40px; }
}

@media (max-width: 1024px) {
	.luces-hero.luces-hero--noticias { min-height: 420px; }
	.luces-hero.luces-hero--noticias .luces-hero__inner { padding-top: 180px; }
	.luces-hero.luces-hero--noticias h1.luces-hero__title { font-size: 40px; line-height: 1.14; margin-top: 20px; }
	.luces-hero--noticias .luces-hero__eyebrow { font-size: 18px; line-height: 1.4; }

	.luces-noticias-cta h2.luces-noticias-cta__h2 { font-size: 34px; max-width: 100%; }
	.luces-noticias-cta__p { font-size: 18px; line-height: 28px; max-width: 100%; }
}

@media (max-width: 767px) {
	.luces-hero.luces-hero--noticias h1.luces-hero__title { font-size: 34px; }
	.luces-noticias--index { grid-template-columns: 1fr; gap: 40px; }
}

/* =============================================================================
   16. Noticia individual — plantilla `single.php` del child (NO es una página
   del maquetador). Encabezado de 535 px sin texto, card blanca de 1102 × 870
   que lo solapa 78 px, columna de fotos con lightbox, fila de compartir y la
   banda "Otras noticias". Medidas 1:1 del diseño (lienzo 1980 × 2801,31).
   ============================================================================= */

/* --- 16.1 Encabezado — solo la foto ---------------------------------------- */

.luces-hero.luces-hero--nota { min-height: 535px; }

/* --- 16.2 Banda blanca con la card -----------------------------------------
   `flow-root` es obligatorio: sin él el `margin-top` negativo de la card
   colapsa a través del borde superior de la banda y sube la banda entera 78 px
   en vez de sacar la card por arriba. */

.luces-nota-banda {
	display: flow-root;
	box-sizing: border-box;
	padding-bottom: 135.405px;
	background-color: var(--luces-blanco);
}

/* ⚠ `position: relative` + `z-index: 1` son OBLIGATORIOS. El encabezado es un
   `.luces-hero`, que está posicionado (`position: relative`), y en el orden de
   pintado los elementos posicionados van DESPUÉS de las cajas de bloque en
   flujo: sin esto la card sube sus 78 px pero la foto del encabezado la tapa y
   el solape no se ve (se vio en el primer render). */
.luces-nota-bloque {
	position: relative;
	z-index: 1;
	width: min(1102.03px, calc(100% - 48px));
	margin-inline: auto;
}

/* Card: 1102,03 × 870, radio 12, borde `#E5E6E7` de 1 px, solapando el
   encabezado 78 px. Con el borde adentro de la caja, los paddings del diseño
   (77,88 / 38,51 / 57,712 / 109,446) valen 1 px menos, y así la columna de
   texto queda en los 566,04 medidos.

   ⚠ El padding izquierdo (77,9) NO es el derecho (38,5). Es dato del comp y
   pregunta abierta al diseñador: simetrizar corre la columna de fotos 39 px. */
.luces-nota-card {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 339.2px;
	column-gap: 80.4px;
	align-items: start;
	width: 100%;
	min-height: 870px;
	margin-top: -78px;
	padding: 56.712px 37.51px 108.446px 76.88px;
	border: 1px solid var(--luces-gris-claro);
	border-radius: var(--luces-radius);
	background-color: var(--luces-blanco);
}

.luces-nota__fecha,
.luces-nota__autor {
	margin: 0;
	font-size: var(--luces-fs-meta);
	line-height: 14px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-gris-medio);
}

/* Calificado con la card y el elemento: el Theme Style del kit emite
   `.elementor-kit-N h1{font-size:63px;color:#F6F2F1}` (0,1,1). */
.luces-nota-card h1.luces-nota__titulo {
	margin: 18.509px 0 0;
	font-size: var(--luces-fs-h4);
	line-height: 43.2px;
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-oscuro);
}

.luces-nota__autor { margin-top: 23.3px; }

.luces-nota__cuerpo { margin-top: 40.633px; }

/* Margen abreviado y calificado: `p{margin:0}` del child PIERDE contra el
   `reset.css` de Hello, que se encola después con `margin-bottom:0.8em`
   (gotcha 8). La separación entre párrafos del diseño es exactamente 22 px,
   o sea una línea en blanco. */
.luces-nota__cuerpo p {
	margin: 0 0 22px;
	font-size: var(--luces-fs-body-s);
	line-height: 22px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-nota__cuerpo > *:last-child { margin-bottom: 0; }

.luces-nota__cuerpo strong,
.luces-nota__cuerpo b { font-weight: var(--luces-fw-bold); color: inherit; }

.luces-nota__cuerpo a { color: var(--luces-verde-oscuro); }

/* --- 16.3 Columna de fotos ------------------------------------------------- */

.luces-nota-card__fotos {
	display: grid;
	gap: 28.82px;
	margin-top: 140.288px;
	align-content: start;
}

.luces-nota__foto {
	display: block;
	border-radius: var(--luces-radius-placeholder-foto);
	overflow: hidden;
	line-height: 0;
	background-color: var(--luces-gris-claro);
}

/* Calificado con la caja y el elemento: la hoja del maquetador y el reset del
   tema padre traen `img{height:auto}` y devolverían la foto a su proporción
   nativa, dejando ver la plancha de atrás (gotcha 14). */
.luces-nota-card__fotos img.luces-nota__foto-img {
	display: block;
	width: 100%;
	height: 228.35px;
	object-fit: cover;
}

/* Marcadores del comp: se dibujan cuando la nota no trae ninguna foto en su
   contenido. Son rects planos `#E5E6E7` de 339,2 × 228,35 radio 13,3 con el
   rótulo centrado en los dos ejes. */
.luces-nota__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 228.35px;
	border-radius: var(--luces-radius-placeholder-foto);
	background-color: var(--luces-gris-claro);
	text-align: center;
}

/* Tracking 0,01 em: medido contra los avances reales de la familia, las dos
   líneas del comp (111,26 y 166,72) salen a +0,96 / +0,50 con 0,01 y a
   −0,84 / −2,50 con 0. */
.luces-nota__placeholder-label {
	margin: 0;
	font-size: var(--luces-fs-micro);
	line-height: 22px;
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* --- 16.4 Compartir artículo -----------------------------------------------
   Fila alineada a la derecha, FUERA de la card. El SVG exportado del `.ai` mide
   36,7 con 0,285 px de aire transparente por lado: el círculo visible queda en
   los 36,13 del comp y los dos aires se descuentan del ritmo vertical
   (34,01 − 0,285 arriba y 135,69 − 0,285 abajo). */

.luces-nota-compartir {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 28.46px;
	margin-top: 33.725px;
	padding-right: 12.78px;
}

.luces-nota-compartir__label {
	margin: 0;
	font-size: var(--luces-fs-link);
	line-height: 20px;
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-gris-medio);
}

.luces-nota-compartir__redes {
	display: flex;
	align-items: center;
	gap: 12.5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.luces-nota-compartir__icono { display: block; line-height: 0; }

.luces-nota-compartir__icono svg { display: block; width: 36.7px; height: 36.7px; }

.luces-nota-compartir__icono[aria-disabled="true"] { cursor: default; }

/* --- 16.5 Otras noticias ---------------------------------------------------
   Banda de 616,37: 70,842 de aire + H2 + 61,263 + la card (317,06) + 133,282.
   El ancho de grilla es propio (1196,07) y los gaps del comp son 25,64 / 23,60 /
   22,97 → se normalizan a 24. El radio de la imagen mide ≈ 7 en este comp y
   9,845 en el índice y en el inicio: se unifica en el token de 9,845. */

.luces-nota-otras {
	padding: 70.842px 0 133.282px;
	background-color: var(--luces-crema);
	text-align: center;
}

.luces-nota-otras h2.luces-nota-otras__h2 {
	margin: 0;
	font-size: var(--luces-fs-h5);
	line-height: var(--luces-lh-h5);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

.luces-noticias--otras {
	width: min(1196.07px, calc(100% - 48px));
	padding-top: 61.263px;
	gap: 24px;
	text-align: left;
}

/* --- 16.6 Responsive de la nota --------------------------------------------
   El comp no trae ninguna pantalla intermedia: es solución propia. Por debajo
   de 1139 px la card deja de solapar el encabezado y las fotos pasan a ir
   DEBAJO del texto, no al lado. */

@media (max-width: 1139px) {
	.luces-nota-card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
		min-height: 0;
		margin-top: -48px;
		padding: 40px 32px 48px;
	}
	.luces-nota-card__fotos { margin-top: 0; }
	.luces-nota-banda { padding-bottom: 64px; }
	.luces-nota-otras { padding: 56px 0 64px; }
	.luces-noticias--otras { padding-top: 40px; }
}

@media (max-width: 1024px) {
	.luces-hero.luces-hero--nota { min-height: 320px; }
	.luces-nota-card h1.luces-nota__titulo { font-size: 30px; line-height: 1.2; }
}

@media (max-width: 767px) {
	.luces-nota-card { margin-top: -32px; padding: 32px 24px 40px; }
	.luces-nota-compartir { justify-content: flex-start; gap: 16px; padding-right: 0; }
	.luces-noticias--otras { grid-template-columns: 1fr; gap: 40px; }
	.luces-nota-otras h2.luces-nota-otras__h2 { font-size: 28px; }
}

/* =============================================================================
   17. Páginas sin comp — 404, resultados de búsqueda y legales.
   WHYNOT no entregó diseño de estas tres, así que el bloque es un componente
   propio armado con los tokens del sitio: container 1164, eyebrow 24 Medium,
   H1 48, cuerpo 18 y el link con subrayado corto. Las tres van con el header
   sólido (#032307, `position: static`): sin encabezado con foto, el header
   transparente de logo y menú blancos desaparecería sobre el fondo blanco.
   ============================================================================= */

.luces-doc {
	display: block;
	background-color: var(--luces-blanco);
	padding: 120px 0 160px;
}

.luces-doc__inner {
	width: min(var(--luces-container), calc(100% - 48px));
	margin-inline: auto;
}

.luces-doc__eyebrow {
	margin: 0;
	font-size: var(--luces-fs-eyebrow);
	line-height: 1.2;
	font-weight: var(--luces-fw-medium);
	letter-spacing: var(--luces-tracking-ui);
	color: var(--luces-verde-oscuro);
}

/* Calificado con el elemento: el Theme Style del kit sale como
   `.elementor-kit-5 h1{...}` (0,1,1) y le gana a una clase suelta. Sin eso el
   H1 saldría a 63 px y en crema sobre blanco. */
.luces-doc h1.luces-doc__h1 {
	margin: 20px 0 0;
	font-size: var(--luces-fs-h3);
	line-height: var(--luces-lh-h3);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking-titular);
	color: var(--luces-verde-casi-negro);
}

/* Márgenes abreviados: el reset de Hello trae `p { margin-bottom: .8em }` y
   empata en especificidad (gotcha 8). */
.luces-doc__texto {
	margin: 24px 0 0;
	max-width: 720px;
	font-size: var(--luces-fs-body);
	line-height: var(--luces-lh-body);
	font-weight: var(--luces-fw-regular);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

.luces-doc__links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	margin: 48px 0 0;
	line-height: 0;
}

/* --- 17.1 Resultados de búsqueda -------------------------------------------- */

.luces-doc__contador {
	margin: 16px 0 0;
	font-size: var(--luces-fs-body);
	line-height: var(--luces-lh-body);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-gris-medio);
}

/* Los posts se listan con la MISMA card del portal de noticias: lo único
   propio es el ancho de grilla (acá manda el container) y el aire de arriba. */
.luces-noticias--busqueda {
	width: 100%;
	margin: 0;
	padding-top: 48px;
	gap: 48px 23px;
}

/* Las páginas no tienen card en el diseño: van como título de 22 + el link. */
.luces-busqueda__paginas {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
}

.luces-busqueda__pagina {
	margin: 0;
	padding: 28px 0;
	border-top: 1px solid var(--luces-gris-claro);
}

.luces-busqueda__pagina:last-child { border-bottom: 1px solid var(--luces-gris-claro); }

.luces-doc h2.luces-busqueda__titulo {
	margin: 0;
	font-size: var(--luces-fs-card-title);
	line-height: var(--luces-lh-card-title);
	font-weight: var(--luces-fw-semibold);
	letter-spacing: var(--luces-tracking);
	color: var(--luces-verde-casi-negro);
}

.luces-busqueda__cta { margin: 14px 0 0; line-height: 0; }

@media (max-width: 1139px) {
	.luces-noticias--busqueda { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.luces-doc { padding: 64px 0 96px; }
	.luces-doc h1.luces-doc__h1 { font-size: 34px; line-height: 1.2; }
	.luces-doc__eyebrow { font-size: 18px; }
	.luces-noticias--busqueda { grid-template-columns: repeat(2, 1fr); gap: 40px 23px; }
}

@media (max-width: 767px) {
	.luces-doc { padding: 48px 0 72px; }
	.luces-doc h1.luces-doc__h1 { font-size: 28px; }
	.luces-doc__links { flex-direction: column; gap: 28px; }
	.luces-noticias--busqueda { grid-template-columns: 1fr; gap: 40px; }
}

/* =============================================================================
   18. Foco visible — accesibilidad (2026-09-17)

   El diseño no entrega ningún estado de foco: no hay hover, focus, active ni
   estado de menú actual en ninguna de las 13 pantallas del lote. Se resuelve
   con el estándar del proyecto: anillo de 2 px en el verde lima de marca,
   separado 2 px del elemento.

   ⚠ Sobre los fondos verdes del sitio (header, pie, barra legal, encabezado y
   los botones píldora, que son lima sólido) un anillo lima no se distingue del
   fondo: ahí el anillo pasa al crema de marca. Medido: #51930C sobre #51930C
   da 1,00:1 y sobre #032307 da 3,34:1 — el crema #F6F2F1 sobre lima da 4,08:1
   y sobre el verde casi negro 15,9:1.

   El selector va con :where() para que no suba de especificidad y no le gane a
   ninguna regla de color existente: solo agrega el anillo.
   ============================================================================= */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--luces-verde-lima);
	outline-offset: 2px;
}

/* Fondos verdes: el anillo lima se pierde, va el crema. */
:where(.luces-header, .luces-footer, .luces-legal, .luces-hero)
	:where(a, button, input, textarea, summary, [tabindex]):focus-visible,
:where(.luces-btn-pill, .luces-header__pill):focus-visible,
:where(.luces-link--crema, .luces-link--blanco):focus-visible {
	outline-color: var(--luces-crema);
}