/**
Theme Name: Astra Child - Hesmo
Theme URI: https://wpastra.com/
Template: astra
Author: Hesmo
Description: Child theme de Astra para el sitio Hesmo.
Version: 1.9.14
Text Domain: astra-child
*/

/* ============ LOCAL FONTS (Montserrat, self-hosted) ============ */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/montserrat-800.woff2') format('woff2'); }

:root {
	--hesmo-maroon: #7A1224;
	--hesmo-maroon-dark: #5C0D1A;
	--hesmo-gold: #C9A227;
	--hesmo-gold-soft: #E9C46A;
	--hesmo-brown: #F8F6F1;
	--hesmo-brown-alt: #F1EDE4;
	--hesmo-bg: #0D0D0D;
	--hesmo-bg-alt: #141414;
	--hesmo-card: #1B1B1B;
	--hesmo-border: rgba(255,255,255,0.10);
	--hesmo-muted: #B9B0A2;
}

* { font-family: 'Montserrat', Arial, sans-serif; }
body, button, input, select, textarea, .elementor-widget-text-editor, .elementor-widget-icon-list {
	font-family: 'Montserrat', Arial, sans-serif !important;
}
body { background-color: #FAF8F4 !important; }

/* ============ SOLID HEADER (warm brown, does not overlap the hero photo) ============ */
.site-header {
	position: relative;
	width: 100%;
	background-color: var(--hesmo-brown) !important;
	border: none !important;
	border-bottom: 1px solid #E7DFD0 !important;
}
.main-header-bar { background: transparent !important; border: none !important; }
.site-header .ast-container { padding-top: 8px; padding-bottom: 8px; }

.site-title, .site-title a {
	font-weight: 800; font-size: 24px; letter-spacing: 1px;
	color: #1A1A1A !important; text-transform: uppercase;
}
.site-title a:hover { color: var(--hesmo-maroon) !important; }
.site-description { display: none; }

.main-header-menu .menu-item > .menu-link,
.main-header-menu .menu-item > a { color: #1A1A1A !important; font-weight: 600; font-size: 17px; }
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a { color: var(--hesmo-maroon) !important; }
/* Mobile off-canvas menu panel (Astra defaults to a near-white background per item) */
.ast-mobile-header-content,
.ast-header-break-point .main-header-menu {
	background-color: var(--hesmo-brown) !important;
}
.ast-header-break-point .main-header-menu .menu-item,
.ast-header-break-point .main-header-menu .menu-item > a,
.ast-header-break-point .main-header-menu .menu-link {
	background-color: var(--hesmo-brown) !important;
	border-color: rgba(0,0,0,0.08) !important;
}

.menu-toggle.main-header-menu-toggle,
svg.ast-mobile-svg { color: #1A1A1A !important; fill: #1A1A1A !important; }

/* Scroll-to-top floating button */
body #ast-scroll-top.ast-scroll-top-icon {
	background-color: var(--hesmo-maroon) !important;
	color: #FFFFFF !important;
}
body #ast-scroll-top.ast-scroll-top-icon:hover { background-color: var(--hesmo-maroon-dark) !important; }
.menu-toggle.main-header-menu-toggle:hover,
.menu-toggle.main-header-menu-toggle:hover svg.ast-mobile-svg { color: var(--hesmo-maroon) !important; fill: var(--hesmo-maroon) !important; }
#ast-mobile-header-container-inner, .ast-mobile-popup-container .main-header-bar { background-color: var(--hesmo-brown) !important; }

/* ============ CONTACT FORM (light) ============ */
.wpcf7-form label { color: #1A1A1A; font-weight: 600; }
.wpcf7-form input.wpcf7-form-control:not([type=submit]),
.wpcf7-form textarea.wpcf7-form-control {
	background-color: #FFFFFF; border: 1px solid #D8CFBC; color: #1A1A1A; border-radius: 8px;
}
.wpcf7-form input.wpcf7-form-control:not([type=submit]):focus,
.wpcf7-form textarea.wpcf7-form-control:focus { border-color: var(--hesmo-maroon) !important; box-shadow: none; }
.wpcf7-form input[type="submit"] {
	background-color: var(--hesmo-maroon); border: 2px solid var(--hesmo-maroon); color: #FFFFFF;
	border-radius: 50px; padding: 14px 36px; font-weight: 700; transition: background-color 0.2s ease;
}
.wpcf7-form input[type="submit"]:hover { background-color: var(--hesmo-maroon-dark); border-color: var(--hesmo-maroon-dark); }
.wpcf7-form input[type="submit"] { width: 100%; }
.wpcf7-not-valid-tip { color: #C0392B; }

.hesmo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.hesmo-form-consent { margin: 18px 0; font-size: 14px; color: #4A453D; }
.hesmo-form-consent input[type="checkbox"] { margin-right: 8px; accent-color: var(--hesmo-maroon); }
@media (max-width: 767px) {
	.hesmo-form-grid { grid-template-columns: 1fr; }
}

/* ============ READING WIDTH & RHYTHM ============ */
.hesmo-prose-center { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
.hesmo-prose-left { max-width: 480px; }
/* Para párrafos largos a ancho completo (ej. "Quiénes somos"): 480px es demasiado
   estrecho para un bloque de texto corrido, pero sin límite llegaba a 1120px (~125
   caracteres/línea). 720px da unas ~90 caracteres/línea, más cómodo de leer.
   Centrado como bloque (margin:auto) para que quede debajo del título "Quiénes somos",
   que sí está centrado — el texto en sí se deja alineado a la izquierda dentro del
   bloque, más legible que centrar párrafos largos línea a línea. */
.hesmo-prose-body { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }

/* Alinea el ancho del header (menú) con el ancho REAL del contenido de Elementor.
   Nota: la regla de abajo pide max-width:1200px pero Elementor la ignora — su propio CSS
   generado (más específico) fija 1140px en la práctica, verificado por código en varios
   anchos. El header debe igualar ese valor real, no el que esta regla pide sin efecto. */
.site-header .ast-container {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1200px;
	box-sizing: border-box;
}
.elementor-widget-text-editor p { line-height: 1.75; }
.elementor-widget-icon-list .elementor-icon-list-text { line-height: 1.5; }

/* ============ FOOTER ============ */
.hesmo-footer { background-color: var(--hesmo-brown); }
.hesmo-footer, .hesmo-footer .elementor-heading-title { color: #1A1A1A; }
.hesmo-footer a { color: #4A453D; text-decoration: none; }
.hesmo-footer a:hover { color: var(--hesmo-maroon); }
.hesmo-footer .elementor-icon-list-icon i { color: var(--hesmo-maroon); }
/* NOTA: _css_classes en la sección (ej. "hesmo-footer") no sobrevive al render vía
   get_builder_content_for_display() usado por el hook global del footer — nunca llega a
   imprimirse en el HTML, en NINGUNA página (ni home ni legales), verificado con curl. Las
   reglas de arriba (127-133) llevan tiempo sin aplicarse nunca; el aspecto correcto viene
   de los ajustes puestos directamente en cada widget (title_color, icon_color, text_color),
   que sí sobreviven. Por eso este fix de tamaño usa el wrapper fiable .elementor-41 en vez
   de .hesmo-footer: el footer se inyecta vía shortcode en páginas puramente Gutenberg
   (legales) donde Elementor no detecta que necesita cargar su CSS base — sin ella, la
   variable --e-icon-list-icon-size que Elementor sí imprime no tiene quien la consuma, y
   el SVG (sin width/height propios) cae a su tamaño intrínseco real (~190px). */
.elementor-41 .elementor-icon-list-icon svg { width: 14px !important; height: 14px !important; }
/* Mismo motivo: sin el CSS base de Elementor, las listas <ul> del footer (Legal, Síguenos)
   muestran la viñeta por defecto del navegador (disc) además del icono de flecha propio. */
.elementor-41 .elementor-icon-list-items { list-style: none !important; }
.hesmo-footer-legal { background-color: var(--hesmo-brown-alt); border-top: 1px solid rgba(0,0,0,0.08); }
.hesmo-footer-legal, .hesmo-footer-legal p { color: #5B564E; }
.hesmo-footer-legal a { color: var(--hesmo-maroon) !important; }

/* ============ FOOGALLERY (prensa) ============ */
.hesmo-gallery .fg-item-inner, .hesmo-gallery .fg-image { border-radius: 8px; overflow: hidden; }
.hesmo-gallery .fg-image { border: 1px solid #E7DFD0; }
.hesmo-gallery.foogallery { margin: 0; }
.hesmo-gallery .fg-item .fg-image-wrap,
.hesmo-gallery .fg-item .fg-thumb { overflow: hidden; border-radius: 8px; }
.hesmo-gallery .fg-item img {
	transition: transform 0.5s ease;
	cursor: pointer;
}
.hesmo-gallery .fg-item:hover img { transform: scale(1.06); }
.hesmo-gallery .fg-item-inner {
	box-shadow: 0 8px 22px rgba(26,18,10,0.10);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hesmo-gallery .fg-item:hover .fg-item-inner {
	box-shadow: 0 14px 32px rgba(26,18,10,0.18);
}

/* ============ NOTICIAS: tarjetas clicables a los 7 enlaces de Facebook (sin imagen: ============ */
/* Facebook bloquea el scraping de su og:image sin sesión iniciada, confirmado repetidas
   veces con distintos enlaces — solo cede un fragmento de texto del post, usado como
   título de cada tarjeta. */
.hesmo-news-chips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}
.hesmo-news-chips a {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #FFFFFF;
	border: 1px solid #E7DFD0;
	border-radius: 14px;
	padding: 24px 26px;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(26,18,10,0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hesmo-news-chip-title {
	color: #1A1A1A;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.45;
}
.hesmo-news-chip-cta {
	color: var(--hesmo-maroon);
	font-weight: 600;
	font-size: 13px;
	margin-top: auto;
}
.hesmo-news-chips a:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(26,18,10,0.14);
	border-color: var(--hesmo-maroon);
}

/* ============ PROJECT CARDS: gap, equal height + hover lift ============ */
/* Gap between cards without widening the container: margin insets each card box.
   Horizontal margin creates the desktop gap; vertical margin creates the stacked
   (responsive) gap — no media query needed. */
#proyectos-grid .elementor-widget-wrap.elementor-element-populated {
	height: calc(100% - 24px);
	margin: 12px;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
#proyectos-grid .elementor-column:hover .elementor-widget-wrap.elementor-element-populated {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(26,18,10,0.16);
}
.hesmo-proyecto-title .elementor-heading-title {
	min-height: 2.3em;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Sin tope, el icono (40% del ancho de columna) se dispara a >300px cuando las 3 tarjetas
   se apilan a ancho completo en tablet/Elementor breakpoint intermedio. Se limita a un
   tamaño de icono coherente en cualquier ancho de columna. */
.hesmo-proyecto-img img { transition: transform 0.4s ease; width: 130px !important; max-width: 130px !important; margin: 0 auto; }
#proyectos-grid .elementor-column:hover .hesmo-proyecto-img img { transform: scale(1.05); }
/* Igual que Hazte socio/Contacto: estas 3 columnas (con padding e imagen de tamaño fijo)
   se apilan en ≤1024px, no en ≤767px (verificado con medidas reales). */
@media (max-width: 1024.98px) {
	#proyectos-grid .elementor-widget-wrap.elementor-element-populated { margin: 10px 0; height: auto; }
}

/* ============ HAZTE SOCIO: more gap between the two blocks (width unchanged) ============ */
#hazte-socio > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
	margin-right: 26px;
}
/* El punto de apilamiento de cada sección de Elementor depende del contenido de sus
   columnas (ancho mínimo antes de que el flexbox haga wrap), no de un breakpoint fijo
   compartido: esta sección se apila en ≤1024px (verificado con medidas reales: apilado a
   1024px, en fila a 1025px), a diferencia de Delegaciones (≤767px, su columna es solo una
   imagen que sí puede encogerse). Contacto también se apila en ≤1024px, ver más abajo. */
@media (max-width: 1024.98px) {
	#hazte-socio > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap { margin-right: 0; }
	/* Al apilarse, separa "Proceso de alta" de la tarjeta de precio que queda encima. */
	#hazte-socio > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap { padding-left: 0 !important; margin-top: 44px; }
}

/* ============ DELEGACIONES: mapa centrado contra el bloque de texto completo ============ */
/* Columnas alineadas arriba (top); el mapa se empuja hacia abajo con un margin-top fijo,
   calibrado con medidas reales del DOM, para que su centro vertical coincida con el centro
   de TODO el bloque de la izquierda (eyebrow + título + párrafo), no solo con el párrafo. */
#delegaciones > .elementor-container { align-items: flex-start; }
#delegaciones > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
	margin-top: 9px;
}
@media (max-width: 767px) {
	#delegaciones > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
		padding-left: 0 !important;
		margin-top: 0 !important;
	}
}

/* ============ CONTACTO: more air between the info block and the form (width unchanged) ============ */
#contacto > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
	margin-right: 48px;
}
/* Igual que Hazte socio: esta sección se apila en ≤1024px, no en ≤767px (verificado con
   medidas reales). Sin este ajuste, el margen derecho seguía activo aunque apilada,
   desalineando el bloque de texto respecto al formulario que queda debajo. */
@media (max-width: 1024.98px) {
	#contacto > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap { margin-right: 0; }
}

/* ============ HERO EMBLEM: escudo a la derecha del texto (estático por debajo de 1200) ============ */
/* overflow:hidden de seguridad: el wrap del escudo (posicionado absoluto, ver abajo) hereda
   width:100% del contenedor boxed (1140px) de fábrica de Elementor, aunque la imagen visible
   solo mida 130px. Con right negativo esa caja invisible se sale de la pantalla y genera
   scroll horizontal a nivel de página — se recorta aquí, en la sección, sin afectar a nada
   visible (el escudo y el texto están muy por dentro de este límite). */
#inicio { position: relative; overflow: hidden; }
/* El hueco entre el H1 y el párrafo no era solo los dos spacers: cada widget de Elementor
   añade un margin-bottom de 20px propio a su contenedor (H1, y cada spacer), invisible en
   el valor "space" que se edita desde los datos. Sin quitar eso, cualquier ajuste al tamaño
   del spacer se queda corto — medido con el DOM real: H1(20 margen oculto) + spacer 60→20px
   (20 alto + 20 margen oculto) + spacer 20→12px (12 alto + 20 margen oculto) = 92px pese a
   que los spacers ya sumaban solo 32px. Solo en desktop. */
@media (min-width: 1200px) {
	#inicio .elementor-element-57431d3 { margin-bottom: 0 !important; }
	#inicio .elementor-element-c574e37 { display: none !important; }
	#inicio .elementor-element-1a4a1ab { margin-bottom: 0 !important; --spacer-size: 32px !important; }
}
/* La columna de texto ya NO se desplaza: al quitar ese margen, su borde izquierdo vuelve
   a coincidir con el del logo del header (mismo ancho de contenido, 1140px real). El
   escudo se coloca más a la derecha, hacia la zona libre de la foto, centrado verticalmente
   contra TODO el bloque de texto (desde arriba del título hasta el final del párrafo, como
   si fuera una sola pieza) — no solo contra el párrafo. "top" se calibra en píxeles fijos
   con medidas reales del DOM, no a ojo. */
#inicio .elementor-widget-image.hesmo-hero-emblem {
	position: absolute;
	right: -860px;
	top: 121px;
	z-index: 3;
	margin: 0;
}
#inicio .elementor-widget-image.hesmo-hero-emblem img {
	width: 240px !important;
	height: auto;
	display: block;
	/* Oscurece un poco justo debajo del escudo (sigue su silueta, no el rectángulo de la imagen). */
	filter: drop-shadow(0 22px 18px rgba(0,0,0,0.7));
}
/* Por debajo de 1200px el contenedor deja de estar centrado (boxed) — a diferencia de
   desktop, el ancho ya no es fijo (1140px), es fluido. Tablet y móvil resuelven la misma
   posición de forma distinta (ver los dos bloques siguientes): tablet reproduce la MISMA
   posición que desktop (texto a ancho reducido, escudo flotando a la derecha, centrado
   contra el bloque H1+párrafo), con porcentajes en vez de píxeles fijos porque aquí el
   contenedor sí cambia de ancho; móvil apila el escudo entre el H1 y el párrafo. */

/* ---- TABLET (768–1199px): escudo a la derecha, MISMA posición que en desktop ---- */
@media (min-width: 768px) and (max-width: 1199.98px) {
	#inicio .elementor-element-aa11e23,
	#inicio .elementor-element-57431d3,
	#inicio .elementor-element-6ff1c82,
	#inicio .elementor-element-c574e37,
	#inicio .elementor-element-1a4a1ab,
	#inicio .elementor-element-5cff11f,
	#inicio .elementor-element-b2676f8 {
		width: 62% !important;
	}
	#inicio .elementor-widget-image.hesmo-hero-emblem {
		position: absolute;
		right: 6%;
		top: 153px;
		width: auto;
		margin: 0;
	}
	#inicio .elementor-widget-image.hesmo-hero-emblem img { width: 170px !important; }
}

/* ---- MÓVIL (≤767px): escudo apilado, centrado, entre el H1 y el párrafo ---- */
@media (max-width: 767px) {
	#inicio .elementor-widget-image.hesmo-hero-emblem {
		position: static;
		margin: 0;
	}
	#inicio .elementor-widget-image.hesmo-hero-emblem img { width: 80px !important; }
	#inicio .elementor-widget-image.hesmo-hero-emblem + .elementor-widget-spacer { display: none; }
	/* Espacio debajo del escudo (hasta el párrafo) igualado al de encima (hasta el H1),
	   con medida real del DOM: el spacer nativo que sigue al escudo se reduce a 0. */
	#inicio .elementor-element-1a4a1ab { --spacer-size: 0px; }
}

/* ============ FOOTER: sin flechitas en "Legal" (todos los dispositivos) ============ */
.elementor-element-3c684e2 .elementor-icon-list-icon { display: none !important; }

/* ============ FOOTER: lista "Legal" centrada de verdad, solo en móvil ============ */
/* Sin el icono, cada línea puede quedar centrada como texto simple. Se fuerza el ancho
   completo del enlace para que el centrado no dependa de si Elementor aplica o no su
   propia clase de alineación en este breakpoint. */
@media (max-width: 767px) {
	.elementor-element-3c684e2 .elementor-icon-list-item a {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ============ HERO: aire lateral en responsive (por debajo del ancho boxed 1200) ============ */
/* En escritorio el contenedor va centrado a 1200px y sobra margen; por debajo ocupa todo el
   ancho y la sección solo tenía 1px de padding izquierdo, así que el texto pegaba al borde. */
@media (max-width: 1199.98px) {
	#inicio { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ============ HERO: foto de fondo más a la izquierda, solo en móvil ============ */
/* El encuadre vertical ("center top", arriba) vale para todos los anchos. En móvil, además,
   se desplaza el encuadre horizontal hacia la izquierda del grupo. */
@media (max-width: 767px) {
	#inicio { background-position: 30% top !important; }
}

/* ============================================================================
   ESPACIADO COHERENTE EN TABLET Y MÓVIL (el desktop no se toca, ver arriba)
   ============================================================================
   Los spacers y paddings de Elementor son valores fijos en px pensados para
   desktop; al no tener variante responsive, se heredaban tal cual en pantallas
   pequeñas — resultando en secciones con demasiado aire en móvil. Se recalibra
   con una escala proporcional y consistente en todo el sitio:
     - Tablet (768–1199px): ~65-70% del valor desktop.
     - Móvil (≤767px): ~40-50% del valor desktop.
   Los spacers de Elementor se controlan vía su variable --spacer-size; los
   paddings de sección/columna, por selector de ID. Todo con !important porque
   el CSS que genera Elementor para el mismo elemento tiene la misma
   especificidad y puede cargar después del nuestro (visto ya en este proyecto
   con los iconos del footer). Sección por sección, de arriba a abajo. */

@media (min-width: 768px) and (max-width: 1199.98px) {
	/* ---- INICIO (hero): ver bloque dedicado más abajo para el layout del escudo ---- */
	#inicio { padding-top: 32px !important; padding-bottom: 56px !important; }
	#inicio .elementor-element-8a5633f { --spacer-size: 32px !important; }
	#inicio .elementor-element-5cff11f { --spacer-size: 20px !important; }

	/* ---- Contadores ---- */
	.elementor-element-f847b33 { padding-top: 44px !important; padding-bottom: 44px !important; }

	/* ---- Quiénes somos ---- */
	#quienes-somos { padding-top: 72px !important; padding-bottom: 44px !important; }
	#quienes-somos .elementor-element-db2ab98 { --spacer-size: 18px !important; }

	/* ---- "Nuestros proyectos" (título) + grid de proyectos ---- */
	.elementor-element-2c66eff .elementor-element-6c9cf65 { --spacer-size: 30px !important; }
	#proyectos-grid { padding-top: 22px !important; padding-bottom: 72px !important; }
	#proyectos-grid > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 24px 20px !important; }
	#proyectos-grid .elementor-element-f320a9a,
	#proyectos-grid .elementor-element-acfb205,
	#proyectos-grid .elementor-element-edc0093 { --spacer-size: 12px !important; }

	/* ---- "Reconocimiento institucional" (título) ---- */
	.elementor-element-70c2168 { padding-top: 72px !important; padding-bottom: 28px !important; }

	/* ---- Tira de logos de prensa ---- */
	.elementor-element-1a699c3 { padding-bottom: 44px !important; }

	/* ---- Publicaciones recientes ---- */
	.elementor-element-d80fd2f { padding-bottom: 72px !important; }
	.elementor-element-d80fd2f .elementor-element-265ac82 > .elementor-widget-wrap { padding: 32px 28px !important; }
	.elementor-element-d80fd2f .elementor-element-3c07a37 { --spacer-size: 10px !important; }
	.elementor-element-d80fd2f .elementor-element-1e40edb { --spacer-size: 20px !important; }

	/* ---- Delegaciones (paddings; el layout del mapa no se toca en tablet, sigue igual que ahora) ---- */
	#delegaciones { padding-top: 72px !important; padding-bottom: 72px !important; }
	#delegaciones .elementor-element-729487c { --spacer-size: 18px !important; }

	/* ---- "Únete" (título de Hazte socio) ---- */
	.elementor-element-b15b517 { padding-top: 72px !important; }
	.elementor-element-b15b517 .elementor-element-a007a08 { --spacer-size: 36px !important; }

	/* ---- Hazte socio ---- */
	#hazte-socio { padding-top: 22px !important; padding-bottom: 72px !important; }
	#hazte-socio .elementor-element-bb225d6 > .elementor-widget-wrap { padding: 32px 26px !important; }
	#hazte-socio .elementor-element-cc83834 { --spacer-size: 16px !important; }
	#hazte-socio .elementor-element-ff14020 { --spacer-size: 10px !important; }
	#hazte-socio .elementor-element-a4a57bf { --spacer-size: 18px !important; }
	#hazte-socio .elementor-element-f8478f9 { --spacer-size: 24px !important; }

	/* ---- Tienda ---- */
	#tienda { padding-top: 72px !important; padding-bottom: 72px !important; }
	#tienda .elementor-element-923e08a { --spacer-size: 16px !important; }
	#tienda .elementor-element-aae15e6 { --spacer-size: 18px !important; }

	/* ---- Contacto ---- */
	#contacto { padding-top: 72px !important; padding-bottom: 72px !important; }
	#contacto .elementor-element-c9f16f2 { --spacer-size: 18px !important; }
	#contacto .elementor-element-a97a838 { --spacer-size: 32px !important; }
	#contacto .elementor-element-f5dd546 { --spacer-size: 18px !important; }
	#contacto .elementor-element-4cb6ad7 { --spacer-size: 18px !important; }
	#contacto .elementor-element-a3885f8 { --spacer-size: 28px !important; }
	#contacto .elementor-element-79c515e { --spacer-size: 18px !important; }

	/* Eyebrows: mismo criterio que en móvil, algo menos agresivo. */
	#inicio .elementor-element-aa11e23,
	#quienes-somos .elementor-element-b7b2cea,
	.elementor-element-70c2168 .elementor-element-bf16943,
	.elementor-element-d80fd2f .elementor-element-67a0a5b,
	#delegaciones .elementor-element-f76ce74,
	.elementor-element-b15b517 .elementor-element-1e58876,
	#tienda .elementor-element-1ed8f44,
	#contacto .elementor-element-e43671f { margin-bottom: 10px !important; }
}

/* La columna del formulario en Contacto tiene padding-left:50px en desktop (hueco
   pensado para separarla de la columna de la izquierda cuando van en fila). Esto solo
   tiene sentido mientras estén en 2 columnas — Contacto se apila a partir de ≤1024px
   (medido, igual que Hazte socio), así que el padding simétrico solo se aplica ahí,
   no en todo el rango de tablet (a 1025-1199px seguiría en fila, con el hueco intacto). */
@media (max-width: 1024.98px) {
	#contacto .elementor-element-961964e > .elementor-widget-wrap { padding: 32px 26px !important; }
}

@media (max-width: 767px) {
	/* ---- INICIO (hero): ver bloque dedicado más abajo para el layout del escudo ---- */
	#inicio { padding-top: 24px !important; padding-bottom: 40px !important; }
	#inicio .elementor-element-8a5633f { --spacer-size: 24px !important; }
	#inicio .elementor-element-5cff11f { --spacer-size: 16px !important; }

	/* ---- Contadores ---- */
	.elementor-element-f847b33 { padding-top: 32px !important; padding-bottom: 32px !important; }

	/* ---- Quiénes somos ---- */
	#quienes-somos { padding-top: 48px !important; padding-bottom: 32px !important; }
	#quienes-somos .elementor-element-db2ab98 { --spacer-size: 14px !important; }

	/* ---- "Nuestros proyectos" (título) + grid de proyectos ---- */
	.elementor-element-2c66eff .elementor-element-6c9cf65 { --spacer-size: 24px !important; }
	#proyectos-grid { padding-top: 20px !important; padding-bottom: 48px !important; }
	#proyectos-grid > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 20px 16px !important; }
	#proyectos-grid .elementor-element-f320a9a,
	#proyectos-grid .elementor-element-acfb205,
	#proyectos-grid .elementor-element-edc0093 { --spacer-size: 10px !important; }

	/* ---- "Reconocimiento institucional" (título) ---- */
	.elementor-element-70c2168 { padding-top: 48px !important; padding-bottom: 24px !important; }

	/* ---- Tira de logos de prensa ---- */
	.elementor-element-1a699c3 { padding-bottom: 32px !important; }

	/* ---- Publicaciones recientes ---- */
	.elementor-element-d80fd2f { padding-bottom: 48px !important; }
	.elementor-element-d80fd2f .elementor-element-265ac82 > .elementor-widget-wrap { padding: 24px 20px !important; }
	.elementor-element-d80fd2f .elementor-element-3c07a37 { --spacer-size: 8px !important; }
	.elementor-element-d80fd2f .elementor-element-1e40edb { --spacer-size: 16px !important; }

	/* ---- Delegaciones (paddings; el layout apilado del mapa no se toca aquí) ---- */
	#delegaciones { padding-top: 48px !important; padding-bottom: 48px !important; }
	#delegaciones .elementor-element-729487c { --spacer-size: 16px !important; }

	/* ---- "Únete" (título de Hazte socio) ---- */
	.elementor-element-b15b517 { padding-top: 48px !important; }
	.elementor-element-b15b517 .elementor-element-a007a08 { --spacer-size: 28px !important; }

	/* ---- Hazte socio ---- */
	#hazte-socio { padding-top: 20px !important; padding-bottom: 48px !important; }
	#hazte-socio .elementor-element-bb225d6 > .elementor-widget-wrap { padding: 24px 20px !important; }
	#hazte-socio .elementor-element-cc83834 { --spacer-size: 14px !important; }
	#hazte-socio .elementor-element-ff14020 { --spacer-size: 8px !important; }
	#hazte-socio .elementor-element-a4a57bf { --spacer-size: 16px !important; }
	#hazte-socio .elementor-element-f8478f9 { --spacer-size: 20px !important; }

	/* ---- Tienda ---- */
	#tienda { padding-top: 48px !important; padding-bottom: 48px !important; }
	#tienda .elementor-element-923e08a { --spacer-size: 14px !important; }
	#tienda .elementor-element-aae15e6 { --spacer-size: 16px !important; }

	/* ---- Contacto ---- */
	#contacto { padding-top: 48px !important; padding-bottom: 48px !important; }
	#contacto .elementor-element-c9f16f2 { --spacer-size: 16px !important; }
	#contacto .elementor-element-a97a838 { --spacer-size: 24px !important; }
	#contacto .elementor-element-f5dd546 { --spacer-size: 16px !important; }
	#contacto .elementor-element-4cb6ad7 { --spacer-size: 16px !important; }
	#contacto .elementor-element-961964e > .elementor-widget-wrap { padding: 24px 20px !important; }
	#contacto .elementor-element-a3885f8 { --spacer-size: 20px !important; }
	#contacto .elementor-element-79c515e { --spacer-size: 16px !important; }

	/* Eyebrows (etiqueta pequeña en mayúsculas antes de cada H2, margin-bottom:12
	   en desktop en todas las secciones): se reduce igual, por ID, en cada sección. */
	#inicio .elementor-element-aa11e23,
	#quienes-somos .elementor-element-b7b2cea,
	.elementor-element-70c2168 .elementor-element-bf16943,
	.elementor-element-d80fd2f .elementor-element-67a0a5b,
	#delegaciones .elementor-element-f76ce74,
	.elementor-element-b15b517 .elementor-element-1e58876,
	#tienda .elementor-element-1ed8f44,
	#contacto .elementor-element-e43671f { margin-bottom: 8px !important; }
}

/* ============ BUTTON HOVER ============ */
.elementor-button { transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease !important; }
.elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(122,18,36,0.22); }

/* Hide Astra's default footer credit bar (we build our own footer on the page) */
footer.site-footer { display: none !important; }