/* Base mínima. No reseteamos lo que Elementor ya maneja. */
/* Las fotos con anim--zoom-out empiezan ampliadas: sin esto ensanchan la página en mobile.
   Va en <html> porque en <body> Chrome no lo aplica al scroll de la ventana. */
html { overflow-x: clip; }

body {
	font-family: var(--font-body);
	color: var(--color-ink);
}

:focus-visible {
	outline: 3px solid var(--hero-accent, var(--color-ink));
	outline-offset: 3px;
}

/* Elementor anula el margen inferior de los widgets: el espacio hacia abajo
   se da con padding-bottom, y hacia arriba con margin-top. */

/* Botones: la diseñadora usa el widget Botón y le pone una de estas clases. */
/* Se apunta al <a> interno del widget (excepción documentada en CLAUDE.md). */
.btn .elementor-button {
	font-weight: 700;
	border-radius: var(--radius-pill);
	padding: 15px 26px;
	border: 2px solid transparent;
	transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.btn .elementor-button:hover { transform: translateY(-2px); }

.btn--ink .elementor-button { background: var(--color-ink); color: #fff; }
.btn--line .elementor-button { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--white .elementor-button { background: #fff; color: var(--color-ink); }
.btn--red .elementor-button { background: var(--color-brand-red); color: #fff; }
.btn--red .elementor-button:hover { background: var(--color-brand-red-dark); }
/* Blanco con texto rojo, para fondos oscuros o fotos */
.btn--light .elementor-button { background: #fff; color: var(--color-brand-red); }
.btn--light .elementor-button:hover { background: var(--color-ink); color: #fff; }
/* Transparente con borde blanco, para fondos oscuros o fotos */
.btn--ghost .elementor-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); }
.btn--ghost .elementor-button:hover { background: #fff; color: var(--color-ink); border-color: #fff; }
.btn--sm .elementor-button { padding: 10px 22px; font-size: 15px; }
.btn--full,
.btn--full .elementor-button { width: 100%; }