/* =============================================================================
   ARMONÍA DE ESTILOS — Instituto de Derechos Humanos
   Unifica paleta de color y tipografía entre Kubio (header/footer) y
   Elementor (cuerpo de las páginas). Editá las variables de :root para
   recalibrar todo el sitio desde un solo lugar.
   ============================================================================= */

:root {
	/* ---- Paleta unificada -------------------------------------------------- */
	--arm-primary:        #e95000;   /* naranja institucional (acción/acento)   */
	--arm-primary-dark:   #c2410c;   /* naranja oscuro (hover/estados)          */
	--arm-primary-700:    #a8380a;   /* naranja muy oscuro (texto sobre claro)  */
	--arm-primary-tint:   #fff4ec;   /* fondo suave de secciones                */
	--arm-secondary:      #2b427b;   /* azul marino institucional (complemento) */
	--arm-ink:            #232427;   /* texto principal                         */
	--arm-muted:          #6b7280;   /* texto secundario / gris                 */
	--arm-line:           #e7e2dc;   /* bordes y separadores                    */
	--arm-white:          #ffffff;

	/* ---- Tipografía -------------------------------------------------------- */
	--arm-font-head: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	--arm-font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

	/* ---- Ritmo / espaciado ------------------------------------------------- */
	--arm-section-y: clamp(2.5rem, 5vw, 4.5rem);  /* padding vertical secciones */
	--arm-container: 1140px;                       /* ancho máximo de contenido  */
	--arm-radius:    8px;                          /* radio de botones/tarjetas  */
}

/* =============================================================================
   1) PALETA — reescribe las variables nativas de cada page builder
   ============================================================================= */

/* --- Elementor: kit global #39 (venían en celeste/verde por defecto) -------- */
.elementor-kit-39,
.elementor-page,
:root {
	--e-global-color-primary:   var(--arm-primary)   !important;
	--e-global-color-secondary: var(--arm-secondary) !important;
	--e-global-color-text:      var(--arm-ink)       !important;
	--e-global-color-accent:    var(--arm-primary-dark) !important;
	--e-global-color-6b3fe1b:   var(--arm-primary-tint) !important;
}

/* --- Kubio: paleta en tripletes RGB (header/footer venían en terracota) ----
   Kubio resuelve los colores como rgba(var(--kubio-color-N), alpha), por lo
   que redefinir los tripletes desplaza TODO el header/footer a la marca.    */
:root {
	--kubio-color-1: 233, 80, 0;     /* primario  -> naranja institucional */
	--kubio-color-2: 194, 65, 12;    /* secundario-> naranja oscuro        */
	--kubio-color-3: 107, 114, 128;  /* gris                                */
	--kubio-color-4: 43, 66, 123;    /* azul marino (se conserva)          */
	--kubio-color-5: 255, 255, 255;  /* blanco                              */
	--kubio-color-6: 35, 36, 39;     /* tinta / casi negro                  */

	/* Rampas del primario (de claro a oscuro) */
	--kubio-color-1-variant-1: 255, 244, 236;
	--kubio-color-1-variant-2: 247, 165, 122;
	--kubio-color-1-variant-3: 233, 80, 0;
	--kubio-color-1-variant-4: 168, 56, 10;
	--kubio-color-1-variant-5: 84, 28, 5;

	--kubio-color-2-variant-1: 255, 237, 226;
	--kubio-color-2-variant-2: 240, 140, 100;
	--kubio-color-2-variant-3: 233, 80, 0;
	--kubio-color-2-variant-4: 168, 56, 10;
	--kubio-color-2-variant-5: 84, 28, 5;
}

/* =============================================================================
   2) TIPOGRAFÍA — un sistema único: Poppins (títulos) + Open Sans (cuerpo)
   Neutraliza Roboto, Roboto Slab, Alumni Sans, Carter One, Amiko y Mulish.
   ============================================================================= */

body,
.elementor,
.elementor-widget-container,
.wp-site-blocks,
p, li, td, th, blockquote, label, input, textarea, select, button,
.elementor-widget-text-editor,
.elementor-button,
.kubio-has-inline-font-family-weight {
	font-family: var(--arm-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.wp-block-kubio-advanced-heading,
.h-typography-h1, .h-typography-h2, .h-typography-h3,
.h-typography-h4, .h-typography-h5, .h-typography-h6 {
	font-family: var(--arm-font-head) !important;
}

/* Globales de tipografía de Elementor (para los que heredan del kit) */
.elementor-kit-39 {
	--e-global-typography-primary-font-family:   "Poppins"   !important;
	--e-global-typography-secondary-font-family: "Poppins"   !important;
	--e-global-typography-text-font-family:      "Open Sans" !important;
	--e-global-typography-accent-font-family:    "Open Sans" !important;
}

body {
	color: var(--arm-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Jerarquía de títulos coherente */
h1 { line-height: 1.15; font-weight: 700; }
h2 { line-height: 1.2;  font-weight: 700; }
h3 { line-height: 1.25; font-weight: 600; }
h4, h5, h6 { line-height: 1.3; font-weight: 600; }
p  { line-height: 1.65; }

/* =============================================================================
   3) ENLACES, BOTONES Y ACENTOS — color de marca consistente
   ============================================================================= */

a { color: var(--arm-primary); }
a:hover, a:focus { color: var(--arm-primary-dark); }

/* Botones de Elementor */
.elementor-button,
.elementor-button-link {
	background-color: var(--arm-primary) !important;
	color: var(--arm-white) !important;
	border-radius: var(--arm-radius) !important;
	transition: background-color .2s ease, transform .2s ease;
}
.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--arm-primary-dark) !important;
	color: var(--arm-white) !important;
}

/* Botones de Kubio (clase .wp-block-kubio-button y enlaces de botón) */
.wp-block-kubio-button__link,
.wp-block-button__link {
	border-radius: var(--arm-radius) !important;
}

/* Botones / inputs de formularios (CF7, WPForms) */
.wpcf7 input[type="submit"],
.wpforms-submit,
button[type="submit"] {
	background-color: var(--arm-primary) !important;
	color: var(--arm-white) !important;
	border: 0 !important;
	border-radius: var(--arm-radius) !important;
	padding: .7em 1.6em !important;
	font-family: var(--arm-font-head) !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color .2s ease;
}
.wpcf7 input[type="submit"]:hover,
.wpforms-submit:hover,
button[type="submit"]:hover {
	background-color: var(--arm-primary-dark) !important;
}

/* =============================================================================
   4) PLUGIN DE AGENDA / EVENTOS — alinear sus naranjas sueltos a la marca
   (usaba #cc5500, #ff9933, #ffb366, etc.)
   ============================================================================= */

.evento-proximos .evento-fecha,
.evento-proximos .evento-dia,
.evento-proximos .evento-mes,
.evento-calendar .evento-destacado {
	background-color: var(--arm-primary) !important;
	color: var(--arm-white) !important;
}
.evento-proximos a,
.evento-calendar a:hover {
	color: var(--arm-primary-dark) !important;
}

/* =============================================================================
   5) ESPACIADO Y ALINEACIÓN — ritmo uniforme entre secciones de ambos builders
   ============================================================================= */

/* Ancho de contenido coherente (Elementor 'boxed' y contenedores flex) */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-boxed > .e-con-inner {
	max-width: var(--arm-container);
}

/* Padding vertical homogéneo en secciones de primer nivel */
.elementor-top-section > .elementor-container,
.e-con.e-parent {
	padding-top: var(--arm-section-y);
	padding-bottom: var(--arm-section-y);
}

/* Evita el salto de la primera sección pegada al header */
.elementor-page .elementor-top-section:first-child {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Imágenes responsivas por defecto (evita desbordes que rompen la grilla) */
.elementor img,
.wp-site-blocks img {
	max-width: 100%;
	height: auto;
}

/* =============================================================================
   6) DETALLES DE COHESIÓN — fondos suaves, separadores y tablas
   ============================================================================= */

/* Secciones con fondo "claro" del tema -> mismo tinte de marca */
.has-background.has-light-background-color,
.elementor-section.section-alt {
	background-color: var(--arm-primary-tint) !important;
}

hr,
.elementor-divider-separator {
	border-color: var(--arm-line) !important;
}

/* Tablas (TablePress) con cabecera de marca */
.tablepress thead th {
	background-color: var(--arm-secondary) !important;
	color: var(--arm-white) !important;
	font-family: var(--arm-font-head) !important;
}
.tablepress tbody tr:nth-child(odd) td {
	background-color: var(--arm-primary-tint) !important;
}