/*
 * Hero del Home: titular en dos líneas, texto, botón y foto del equipo.
 *
 *   Contenedor sección                 → hero
 *     Contenedor texto                 → hero__copy
 *       Título H1                      → hero__title   (la línea roja va en <span>)
 *       Texto                          → hero__sub
 *       Contenedor botones             → hero__ctas
 *         Botón                        → btn btn--ink
 *     Imagen                           → hero__photo
 *
 * Mobile: una columna. Tablet y desktop: dos columnas.
 * Los contenedores de Elementor son flex en columna; aquí se pasan a grid o block.
 * Los espacios se fijan con --row-gap / --column-gap, que es lo que lee Elementor.
 */

.hero {
	--row-gap: 28px;
	--column-gap: clamp(22px, 3.5vw, 52px);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	width: 100%;
	padding: clamp(48px, 6vw, 96px) var(--wrap-gutter);
	background: #fff;
}

.hero__copy { display: block; }

.hero__title .elementor-heading-title {
	max-width: 11em;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(30px, 8vw, 46px);
	letter-spacing: -.048em;
	line-height: 1.02;
	color: var(--color-ink);
}
.hero__title span { color: var(--color-brand-red); }

.hero__sub { margin-top: 26px; padding-bottom: 30px; }
.hero__sub .elementor-widget-container,
.hero__sub p {
	margin: 0;
	max-width: 27em;
	font-size: 17px;
	line-height: 1.55;
	color: var(--color-muted);
}
.hero__sub strong,
.hero__sub b { color: var(--color-ink); }

.hero__ctas {
	--row-gap: var(--space-3);
	--column-gap: var(--space-3);
}

.hero__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1.88 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: 24px;
}

/* Celular angosto: el botón ocupa todo el ancho. */
@media (max-width: 520px) {
	.hero__ctas > * { width: 100%; }
	/* Se apunta al <a> interno del widget Botón (excepción documentada en CLAUDE.md). */
	.hero__ctas .elementor-button { display: flex; justify-content: center; width: 100%; }
}

@media (min-width: 521px) {
	.hero__ctas {
		/* Elementor fuerza columna en sus contenedores flex. */
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}
}

@media (min-width: 768px) {
	.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.hero__title .elementor-heading-title { font-size: clamp(32px, 3.9vw, 58px); }
	.hero__sub .elementor-widget-container,
	.hero__sub p { font-size: 19px; }
	.hero__photo img { border-radius: 26px; }
}

@media (min-width: 1025px) {
	.hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
	.hero__photo { justify-self: end; width: 100%; max-width: 530px; }
	.hero__photo img { border-radius: 32px; }
}