/* =========================================================
   CORAL HERO
   ========================================================= */

.coral-hero {
	position: relative;
	left: 50%;

	width: 100vw;
	max-width: 100vw;
	margin: 0 0 0 -50vw;
	padding: 0;

	background: var(--coral-section);
	overflow: hidden;
}

.coral-hero__main {
	display: grid;
	grid-template-columns: 48% 52%;

	width: 100%;
	max-width: none;
	min-height: 660px;
	margin: 0;
	padding: 0;
}


/* =========================================================
   COLUMNA DE CONTENIDO
   ========================================================= */

.coral-hero__content {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;

	padding:
		42px
		50px
		30px
		max(60px, calc((100vw - 1540px) / 2 + 70px));

	background:
		linear-gradient(
			90deg,
			var(--coral-section) 0%,
			var(--coral-section) 78%,
			rgba(244, 239, 231, 0.97) 88%,
			rgba(244, 239, 231, 0.72) 95%,
			rgba(244, 239, 231, 0) 100%
		);
}

.coral-hero__title {
	width: 100%;
	max-width: 650px;
	margin: 0;

	color: var(--coral-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(3rem, 3.25vw, 3.8rem);
	font-weight: 400;
	line-height: 1.07;
	letter-spacing: -0.035em;
}

.coral-hero__divider {
	width: 165px;
	height: 2px;
	margin: 26px 0 24px;

	background: var(--coral-gold);
}

.coral-hero__description {
	width: 100%;
	max-width: 570px;
	margin: 0;

	color: var(--coral-body);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.55;
}


/* =========================================================
   BOTONES
   ========================================================= */

.coral-hero__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;

	margin-top: 28px;
}

.coral-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	width: auto;
	min-height: 52px;
	padding: 0 20px;

	border: 1px solid var(--coral-green);
	border-radius: 7px;

	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	text-transform: uppercase;

	transition:
		background-color var(--coral-transition),
		border-color var(--coral-transition),
		color var(--coral-transition),
		transform var(--coral-transition);
}

.coral-button:hover {
	transform: translateY(-2px);
}

.coral-button:focus-visible {
	outline: 3px solid var(--coral-gold);
	outline-offset: 3px;
}

.coral-button--primary {
	background: var(--coral-green);
	border-color: var(--coral-green);
	color: var(--coral-white);
}

.coral-button--primary:hover {
	background: var(--coral-green-dark);
	border-color: var(--coral-green-dark);
	color: var(--coral-white);
}

.coral-button--secondary {
	background: transparent;
	border-color: var(--coral-green);
	color: var(--coral-green);
}

.coral-button--secondary:hover {
	background: var(--coral-green);
	border-color: var(--coral-green);
	color: var(--coral-white);
}

.coral-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 17px;

	width: 17px;
	height: 17px;
}

.coral-button__icon svg {
	display: block;

	width: 17px;
	height: 17px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================================
   BENEFICIOS
   ========================================================= */

.coral-hero__features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	width: 100%;
	margin-top: 42px;
}

.coral-hero__feature {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	padding: 0 14px;

	text-align: center;
}

.coral-hero__feature:first-child {
	padding-left: 0;
}

.coral-hero__feature:last-child {
	padding-right: 0;
}

.coral-hero__feature:not(:last-child)::after {
	content: "";

	position: absolute;
	top: 48px;
	right: 0;

	width: 1px;
	height: 64px;

	background: #ded8ce;
}

.coral-hero__feature-icon {
	width: 42px;
	height: 42px;
	margin-bottom: 10px;

	color: var(--coral-gold);
}

.coral-hero__feature-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;
	stroke-width: 2.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.coral-hero__feature p {
	margin: 0;

	color: var(--coral-body);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
}


/* =========================================================
   IMAGEN
   ========================================================= */

.coral-hero__image {
	position: relative;

	min-width: 0;
	min-height: 660px;

	background-image: url("https://coralsalud.com/wp-content/uploads/2026/07/coralsaludinicio.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	overflow: hidden;
}

.coral-hero__image::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	width: 130px;
	height: 100%;

	background:
		linear-gradient(
			to right,
			var(--coral-section) 0%,
			rgba(244, 239, 231, 0.88) 22%,
			rgba(244, 239, 231, 0.58) 50%,
			rgba(244, 239, 231, 0.22) 76%,
			rgba(244, 239, 231, 0) 100%
		);

	pointer-events: none;
}


/* =========================================================
   BARRA INFERIOR
   ========================================================= */

.coral-hero__trust {
	display: grid;
	grid-template-columns:
		minmax(150px, 1fr)
		minmax(140px, 1fr)
		minmax(170px, 1fr)
		minmax(210px, 1.3fr)
		minmax(190px, 1.1fr);
	align-items: center;

	width: 100%;
	min-height: 66px;
	padding: 10px max(24px, calc((100vw - 1380px) / 2));

	background: #dfe3d8;
	border-top: 1px solid #cfd5c8;
	border-bottom: 1px solid #cfd5c8;
}

.coral-hero__trust-item,
.coral-hero__trust-message {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	min-height: 36px;
	padding: 0 18px;

	color: var(--coral-green-soft);
	text-align: center;
}

.coral-hero__trust-item {
	border-right: 1px solid #c5cbbc;

	font-size: 0.95rem;
	font-weight: 600;
}

.coral-hero__trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;

	width: 22px;
	height: 22px;

	color: var(--coral-green-soft);
}

.coral-hero__trust-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.coral-hero__trust-message {
	color: var(--coral-green-soft);
	font-family: "Cormorant Garamond", serif;
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
}

.coral-hero__trust-message span {
	margin-left: 0.2rem;

	color: var(--coral-gold);
	font-style: normal;
}


/* =========================================================
   ELEMENTOR
   ========================================================= */

.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1180px) {

	.coral-hero__main {
		grid-template-columns: 52% 48%;
		min-height: 610px;
	}

	.coral-hero__content {
		padding: 48px 38px 32px;
	}

	.coral-hero__title {
		font-size: clamp(2.7rem, 4vw, 3.7rem);
	}

	.coral-hero__image {
		min-height: 610px;
	}

	.coral-hero__feature {
		padding-inline: 10px;
	}

	.coral-hero__feature p {
		font-size: 0.8rem;
	}

	.coral-hero__trust {
		grid-template-columns: repeat(4, 1fr);
	}

	.coral-hero__trust-message {
		display: none;
	}

	.coral-hero__trust-item:nth-child(4) {
		border-right: 0;
	}
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	.coral-hero__main {
		grid-template-columns: 1fr;
	}

	.coral-hero__content {
		order: 2;

		padding: 52px 34px 44px;

		background: var(--coral-section);
	}

	.coral-hero__image {
		order: 1;

		min-height: 530px;

		background-position: center 24%;
	}

	.coral-hero__image::before {
		display: none;
	}

	.coral-hero__title {
		max-width: 700px;

		font-size: clamp(2.8rem, 7vw, 4rem);
	}

	.coral-hero__description {
		max-width: 680px;
	}

	.coral-hero__trust {
		grid-template-columns: repeat(2, 1fr);
	}

	.coral-hero__trust-item {
		border-right: 0;
		border-bottom: 1px solid #cecdbf;
	}

	.coral-hero__trust-item:nth-child(odd) {
		border-right: 1px solid #cecdbf;
	}
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

	.coral-hero__image {
		min-height: 390px;
	}

	.coral-hero__content {
		padding: 38px 22px;
	}

	.coral-hero__title {
		font-size: clamp(2.35rem, 11vw, 3.2rem);
		line-height: 1.08;
	}

	.coral-hero__divider {
		width: 120px;
		margin: 22px 0;
	}

	.coral-hero__description {
		font-size: 1rem;
	}

	.coral-hero__actions {
		flex-direction: column;
	}

	.coral-button {
		width: 100%;
	}

	.coral-hero__features {
		grid-template-columns: 1fr;
		gap: 24px;

		margin-top: 38px;
	}

	.coral-hero__feature {
		display: grid;
		grid-template-columns: 44px 1fr;
		align-items: center;
		gap: 14px;

		padding: 0;

		text-align: left;
	}

	.coral-hero__feature-icon {
		margin: 0;
	}

	.coral-hero__feature:not(:last-child)::after {
		display: none;
	}

	.coral-hero__trust {
		grid-template-columns: 1fr;

		padding: 8px 18px;
	}

	.coral-hero__trust-item {
		justify-content: flex-start;

		border: 0 !important;
		border-bottom: 1px solid #cecdbf !important;
	}

	.coral-hero__trust-item:last-of-type {
		border-bottom: 0 !important;
	}
}