/*
 * Valores: un eje central (Respeto) rodeado de cuatro valores.
 *
 *   Contenedor              → values-head
 *     Texto corto           → eyebrow eyebrow--plain
 *     Título                → values-head__title
 *     Texto                 → values-head__text
 *
 *   Contenedor              → values-orbit
 *     Contenedor (centro)   → values-orbit__core
 *       Ícono               → values-orbit__core-icon
 *       Texto corto         → values-orbit__core-kicker
 *       Título              → values-orbit__core-title
 *       Texto               → values-orbit__core-text
 *     Contenedor (valor)    → values-orbit__item values-orbit__item--left | --right
 *       Ícono               → values-orbit__icon
 *       Texto (número)      → values-orbit__number
 *       Título              → values-orbit__title
 *       Texto               → values-orbit__text
 *
 * Los valores con --left van en la columna izquierda y los --right en la derecha (escritorio).
 */

.values-head {
	--row-gap: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(56px, 7vw, 104px) 0 clamp(28px, 3.4vw, 48px);
	text-align: center;
}
.values-head__title { padding: 14px 0 12px; }
.values-head__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 58px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1.04;
	color: var(--color-ink);
}
/* !important: Elementor fija max-width:100% en los widgets de un contenedor. */
.values-head__text { max-width: 38em !important; font-size: clamp(16px, 1.3vw, 18px); color: var(--color-muted); }
.values-head__text p { margin: 0; }

.values-orbit {
	--row-gap: 14px;
	--column-gap: 20px;

	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

.values-orbit__core {
	--row-gap: 10px;

	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	grid-column: 1 / -1;
	justify-self: center;
	width: min(420px, 86%);
	aspect-ratio: 1 / 1;
	margin: 30px 0 20px;
	padding: 10%;
	border-radius: 50%;
	background: var(--color-brand-red);
	box-shadow: 0 30px 70px rgba(215, 38, 30, .28);
	color: #fff;
	text-align: center;
}
/* Anillos decorativos alrededor del centro. */
.values-orbit__core::before,
.values-orbit__core::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.values-orbit__core::before { inset: -16px; border: 2px dashed rgba(215, 38, 30, .45); animation: values-orbit-spin 40s linear infinite; }
.values-orbit__core::after { inset: -38px; border: 1px solid rgba(215, 38, 30, .18); }
@keyframes values-orbit-spin { to { transform: rotate(360deg); } }

/* values-orbit.js agrega este modificador un instante cuando se pasa el mouse por un valor. */
.values-orbit__core--pulse { animation: values-orbit-beat .6s var(--ease-out); }
@keyframes values-orbit-beat { 50% { transform: scale(1.03); } }

.values-orbit__core-icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
}
/* !important: Elementor pinta el ícono con su propio color; aquí hereda el del bloque. */
.values-orbit__core-icon .elementor-icon { font-size: 28px; color: inherit !important; }
.values-orbit__core-icon svg { fill: currentColor !important; } /* Elementor pinta el SVG con su propio color */
.values-orbit__core-kicker { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.values-orbit__core-kicker p { margin: 0; }
.values-orbit__core-title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	color: #fff;
}
.values-orbit__core-text { width: 100%; color: #fff; max-width: 17em !important; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.45; opacity: .95; }
.values-orbit__core-text p { margin: 0; }

.values-orbit__item {
	--row-gap: 6px;
	--column-gap: 16px;

	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	padding: clamp(20px, 2vw, 28px);
	border: 1px solid var(--color-line);
	border-radius: 24px;
	background: #fff;
}
.values-orbit__item:hover { border-color: var(--color-brand-red); box-shadow: 0 16px 36px rgba(41, 33, 31, .08); }

.values-orbit__icon {
	display: grid;
	place-items: center;
	grid-column: 1;
	grid-row: 1 / 4;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--color-red-soft);
	color: var(--color-brand-red);
	transition: background-color .3s, color .3s, transform .4s var(--ease-out);
}
.values-orbit__icon .elementor-icon { font-size: 24px; color: inherit !important; }
.values-orbit__icon svg { fill: currentColor !important; } /* Elementor pinta el SVG con su propio color */
.values-orbit__item:hover .values-orbit__icon { background: var(--color-brand-red); color: #fff; transform: rotate(-8deg); }

.values-orbit__number,
.values-orbit__title,
.values-orbit__text { grid-column: 2; }
.values-orbit__number { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--color-muted); }
.values-orbit__number p { margin: 0; }
.values-orbit__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(19px, 1.6vw, 23px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--color-ink);
}
.values-orbit__text { font-size: 15.5px; line-height: 1.45; color: var(--color-muted); }
.values-orbit__text p { margin: 0; }

@media (min-width: 768px) {
	.values-orbit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.values-orbit {
		--row-gap: clamp(14px, 2vw, 28px);
		--column-gap: clamp(20px, 3vw, 48px);

		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
	}
	.values-orbit__core { padding: 14%; grid-column: 2; grid-row: 1 / 3; width: auto; margin: 0; }
	.values-orbit__item--left { grid-column: 1; }
	.values-orbit__item--right { grid-column: 3; }

	/* Línea punteada que une cada valor con el centro. */
	.values-orbit__item::after {
		content: "";
		position: absolute;
		top: 50%;
		width: clamp(20px, 3vw, 48px);
		border-top: 2px dashed var(--color-line);
		transition: border-color .3s;
	}
	.values-orbit__item--left::after { left: 100%; }
	.values-orbit__item--right::after { right: 100%; }
	.values-orbit__item:hover::after { border-color: var(--color-brand-red); }
}

@media (prefers-reduced-motion: reduce) {
	.values-orbit__core::before { animation: none; }
	.values-orbit__core--pulse { animation: none; }
}