/*
 * "Una historia que empezó con cinco familias" (Inicio).
 *
 *   Contenedor (grid)           → home-company
 *     Contenedor de textos      → home-company__copy
 *       Título                  → home-company__title
 *       Editor de texto         → home-company__lead
 *       Contenedor de tarjetas  → home-company__cards
 *         Tarjeta (contenedor)  → home-company__card
 *           Ícono               → home-company__icon  (se cambia desde el widget Ícono)
 *           Contenedor          → home-company__card-body
 *             Título + texto    → home-company__card-title / home-company__card-text
 *       Botón                   → home-company__btn btn btn--red
 *     Imagen (planta)           → home-company__photo
 */

.home-company {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: clamp(56px, 6.5vw, 96px) var(--wrap-gutter);
}

.home-company__copy { gap: 0; align-self: center; }

/* Espacio con padding: Elementor anula el margin de los widgets. */
.home-company__title { padding-bottom: 18px; }
.home-company__title .elementor-heading-title {
	margin: 0;
	font-size: clamp(30px, 3.8vw, 54px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.04em;
}

.home-company__lead p {
	max-width: 30em;
	margin: 0;
	font-size: clamp(17px, 1.35vw, 19px);
	line-height: 1.55;
	color: var(--color-muted);
}

.home-company__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 28px 0 30px;
}

.home-company__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	padding: 20px;
	border: 1px solid var(--color-line);
	border-radius: 22px;
	background: #fff;
}
/* Hover con "translate" (no "transform") para no chocar con la animación .anim, que usa transform. */
.js-anim .home-company__card {
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out), translate .3s var(--ease-out), border-color .3s;
}
.home-company__card:hover { border-color: var(--color-brand-red); translate: 0 -3px; }

.home-company__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--color-red-soft);
	color: var(--color-brand-red);
}
/* Apunta al ícono interno del widget. */
.home-company__icon .elementor-icon {
	display: block;
	font-size: 20px;
	line-height: 1;
	color: inherit;
}

.home-company__card-body { gap: 0; }
.home-company__card-title { padding-bottom: 4px; }
.home-company__card-title .elementor-heading-title {
	margin: 0;
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
}
.home-company__card-text p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--color-muted);
}

/* Foto de la planta: en móvil va arriba del texto. Apunta al <img> interno del widget. */
.home-company__photo {
	order: -1;
	aspect-ratio: 16 / 10;
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.home-company__photo .elementor-widget-container { height: 100%; }
.home-company__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.home-company__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.home-company__card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (min-width: 1025px) {
	.home-company {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: clamp(28px, 5vw, 80px);
		align-items: stretch;
	}
	.home-company__photo { order: 0; aspect-ratio: auto; min-height: 380px; }
}