/**
 * Base: normalización ligera, tipografía global, accesibilidad y utilidades.
 *
 * Hello Elementor ya aporta un reset mínimo. Aquí solo se añade lo que falta,
 * sin duplicar sus reglas.
 *
 * Depende de variables.css: no declarar valores literales en este archivo.
 */

/* =========================================================================
 *  ACCESIBILIDAD
 * ======================================================================= */

/* Respeta la preferencia de movimiento reducido del sistema (WCAG 2.3.3).
 *
 * JUSTIFICACIÓN DE !important: es la única forma de anular animaciones
 * declaradas por Elementor y por plugins de terceros, cuyo CSS no controlamos
 * y que se carga con especificidades arbitrarias. Es el patrón estándar
 * recomendado para esta media query. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Foco visible y consistente para navegación por teclado (WCAG 2.4.7).
 *
 * Refuerzo deliberado: el contraste del texto sobre el gradiente de marca
 * queda por debajo de AA por decisión de diseño, así que el indicador de foco
 * es más marcado de lo habitual para compensar en navegación por teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--c-accent-deep);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Sobre fondo oscuro el foco necesita invertirse para seguir siendo visible. */
:where(.hec-on-dark) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--c-inverse);
}

/* Enlace de salto al contenido, visible solo al recibir foco. */
.hec-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-modal);
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-black);
	color: var(--c-inverse);
	text-decoration: none;
}

.hec-skip-link:focus {
	left: var(--sp-4);
	top: var(--sp-4);
}

/* Texto solo para lectores de pantalla. */
.hec-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 *  TIPOGRAFÍA GLOBAL
 * ======================================================================= */

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-body);
	background-color: var(--c-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--c-ink);
	text-wrap: balance;
	margin-block: 0 var(--sp-4);
}

h1 {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-tight);
}

h2 {
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-tight);
}

h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-title);
}

p {
	margin-block: 0 var(--sp-4);
	text-wrap: pretty;
}

p:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child {
	margin-block-end: 0;
}

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

::selection {
	background: var(--c-accent-start);
	color: var(--c-inverse);
}

/* =========================================================================
 *  MEDIA
 * ======================================================================= */

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* =========================================================================
 *  LAYOUT
 * ======================================================================= */

/* Contenedor maestro.
 *
 * max-width incluye el padding para que el ancho de CONTENIDO sea exactamente
 * --container-max (1152px, el medido en el diseño) en cuanto hay sitio, y el
 * padding lateral se conserve en pantallas estrechas. */
.hec-container {
	width: 100%;
	max-width: calc(var(--container-max) + var(--container-pad) * 2);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.hec-section {
	padding-block: var(--section-y);
}

/* Zona sobre fondo oscuro: invierte los colores de texto heredados. */
.hec-on-dark {
	background-color: var(--c-black);
	color: var(--c-inverse-soft);
}

.hec-on-dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--c-inverse);
}

/* Stack vertical con separación uniforme. */
.hec-stack {
	display: flex;
	flex-direction: column;
	gap: var(--gap, var(--sp-4));
}

/* Grid de 12 columnas del diseño. Los componentes fijan --cols por breakpoint. */
.hec-grid {
	display: grid;
	gap: var(--gap, var(--grid-gap));
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}

/* =========================================================================
 *  VISIBILIDAD POR COMPOSICIÓN
 * ======================================================================= */

/**
 * Desktop y mobile son dos composiciones distintas que conviven en el mismo
 * documento. Cada sección se marca con la clase de la composición a la que
 * pertenece y se oculta en el rango contrario.
 *
 * Solo se declara `display: none` en el rango donde la sección NO aplica.
 * En su propio rango no se toca el display, de modo que el contenedor conserva
 * el `display: flex` que le pone Elementor.
 *
 * La clase se repite (.x.x) para elevar la especificidad a 0-2-0 y ganar a las
 * reglas de Elementor sin recurrir a !important: el CSS de página que genera
 * Elementor puede encolarse después que el del tema.
 */
@media (max-width: 1024px) {
	.hec-only-desktop.hec-only-desktop {
		display: none;
	}
}

@media (min-width: 1025px) {
	.hec-only-mobile.hec-only-mobile {
		display: none;
	}
}