/*
 * Base styles aplicados globalmente sobre lo que sirve Hello Elementor,
 * usando los tokens definidos en variables.css.
 */

body {
	background-color: var(--color-background);
	color: var(--color-text-secondary);
	font-family: var(--font-body);
	font-size: var(--type-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--color-text-primary);
	font-weight: 700;
	margin: 0 0 var(--space-4);
}

h1 { font-size: var(--type-h1); line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: var(--type-h2); line-height: 1.18; letter-spacing: -0.01em; }
h3 { font-size: var(--type-h3); line-height: 1.18; }
h4 { font-size: var(--type-h4); line-height: 1.3; }

p {
	margin: 0 0 var(--space-4);
	max-width: 62ch;
}

/* Sin regla global de color en <a>: cada widget de Elementor fija el color
   de sus enlaces (texto, botón, menú). Una regla `a { color }` a nivel tema
   tiene más especificidad que el color heredado del wrapper del widget y
   "gana" sobre él, dejando enlaces invisibles en fondos oscuros.
   El navegador sí aplica sus propios `a:link`/`a:visited` con especificidad
   real, así que un <a> suelto dentro de un widget de texto/heading hereda
   el azul/morado por defecto en vez del color que puso Elementor: se fuerza
   `color: inherit` para que tome el color del widget que lo envuelve. */
a {
	text-decoration: none;
}

.elementor-widget-text-editor a,
.elementor-heading-title a {
	color: inherit;
	border-bottom: none;
}

/* Los items de un Container en modo grid/flex heredan min-width:auto, lo que
   impide que el texto largo (titulares) se ajuste dentro de columnas fr y
   provoca que se salga por encima del elemento vecino. */
.e-con {
	min-width: 0;
}

/* Reveal al hacer scroll — CSS-only, con fill-mode "both": nunca deja contenido
   en opacity 0 si el navegador no soporta animation-timeline. */
@keyframes sm-reveal-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

[data-reveal] {
	animation: sm-reveal-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-reveal-delay="1"] { animation-delay: 80ms; }
[data-reveal-delay="2"] { animation-delay: 160ms; }
[data-reveal-delay="3"] { animation-delay: 240ms; }

@supports (animation-timeline: view()) {
	[data-reveal] {
		animation-timeline: view();
		animation-range: entry 0% cover 26%;
		animation-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { animation: none; }
}