/*
 * ES Home (W04) — approved ES v0.2 hero, ported from localized.css (v0.1 rules with the
 * v0.2 two-line headline override folded in). Loaded after rico-home.css, which supplies
 * the shared Home continuation; the interior header is used, as in the approved render.
 * Masters: VISUALS/ES_WEBSITE_v0.2/screenshots/inicio_{desktop,mobile,small}.png.
 */

.rico-lang-es .es-home {
	display: block;
	max-width: var(--frame);
	margin: 0 auto;
	border-left: 1px solid #a37a20;
	border-right: 1px solid #a37a20;
}

/* ---------- Hero ---------- */
.rico-lang-es .es-hero {
	position: relative;
	min-height: 780px;
	padding: 90px 35px 25px;
	overflow: hidden;
	background: #070708;
	border-bottom: 1px solid #b28220;
}
.rico-lang-es .es-hero__image,
.rico-lang-es .rico-divi .es-hero::before { /* CP-27: the Divi layout has no image element */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #030304 5%, rgb(0 0 0 / 0.94) 28%, rgb(0 0 0 / 0.56) 54%, rgb(0 0 0 / 0.1) 86%),
		url("../img/home-hero-mobile.webp") right 42% / 62% auto no-repeat;
}
.rico-lang-es .es-hero__overlay {
	position: relative;
	z-index: 2;
	max-width: 670px;
	padding: 0 0 0 2px;
}
.rico-lang-es .es-hero__geo {
	margin: 8px 0 20px 240px;
	padding-left: 14px;
	border-left: 3px solid #ed1026;
	color: #f3c72f;
	font: 700 16px/1.2 var(--display);
	letter-spacing: 2px;
	text-transform: uppercase;
}
.rico-lang-es .es-hero__geo small {
	display: block;
	margin-top: 6px;
	color: #fff;
	font-size: 12px;
	letter-spacing: 2px;
}
.rico-lang-es .es-hero__title {
	margin: 18px 0;
	color: #f8f6f0;
	font: italic 900 50px/1.02 var(--display);
	letter-spacing: -0.015em;
	text-transform: uppercase;
	text-shadow: 1px 4px 2px #020202ad;
}
/* Founder decision v0.2: each phrase is one non-wrapping line. */
.rico-lang-es .es-hero__title span,
.rico-lang-es .es-hero__title em {
	display: block;
	font-style: italic;
	white-space: nowrap;
}
.rico-lang-es .es-hero__title em {
	margin-top: 13px;
	color: #ffc33b;
}
.rico-lang-es .es-hero__stroke {
	width: 67%;
	height: 10px;
	margin: 12px 0 25px;
	background: #f10b21;
	clip-path: polygon(2% 35%, 100% 0, 89% 60%, 0 100%);
}
.rico-lang-es .es-hero__lede {
	max-width: 600px;
	margin: 0 0 18px;
	color: #f8f8f8;
	font: 17px/1.55 var(--sans);
}
.rico-lang-es .es-hero__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}
.rico-lang-es .es-hero__request {
	min-height: 55px;
	gap: 26px;
	font-weight: 800;
}
.rico-lang-es .es-phone-btn {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 55px;
	padding: 9px 15px;
	border: 1px solid var(--gold);
	color: #fff;
	transition: background-color 0.2s;
}
.rico-lang-es .es-phone-btn:hover {
	background: #1c1609;
}
.rico-lang-es .es-phone-btn .rico-icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--gold);
}
.rico-lang-es .es-phone-btn strong {
	display: block;
}
.rico-lang-es .es-phone-btn small {
	display: block;
	font-size: 11px;
	font-weight: 500;
}
.rico-lang-es .es-hero__confirm {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 14px 0 0;
	color: #f0e1c1;
	font-size: 12px;
}
.rico-lang-es .es-hero__confirm .rico-icon {
	flex: none;
	width: 10px;
	height: 10px;
}

/* ---------- Service paths ---------- */
.rico-lang-es .es-paths {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 40px;
}
.rico-lang-es .es-paths a {
	position: relative;
	display: block;
	height: 100%;
	min-height: 102px;
	padding: 16px 15px;
	background: linear-gradient(100deg, #090909dd, #222324db);
	border: 1px solid #b38928;
	border-radius: 5px;
	transition: border-color 0.2s;
}
.rico-lang-es .es-paths a:hover {
	border-color: var(--gold);
}
.rico-lang-es .es-paths strong {
	display: block;
	font: 700 19px/1.1 var(--display);
	text-transform: uppercase;
}
.rico-lang-es .es-paths__glyph {
	display: inline-block;
	min-width: 1.2em;
}
.rico-lang-es .es-paths small {
	display: block;
	max-width: 190px;
	margin-top: 8px;
	color: #cfcac0;
	font-size: 12px;
}
.rico-lang-es .es-paths__chevron {
	position: absolute;
	top: calc(40% + 12px); /* where the prototype's 25px "›" glyph sat */
	right: 15px;
	width: 14px;
	height: 14px;
	color: var(--gold);
}

/* ---------- How it works ---------- */
.rico-lang-es .es-process {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 12px;
	padding-top: 30px;
}
.rico-lang-es .es-process h2 {
	margin: 8px 0;
	color: var(--gold);
	font: 800 22px/1.2 var(--display);
	text-transform: uppercase;
}
.rico-lang-es .es-process ol {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.rico-lang-es .es-step {
	display: grid;
	grid-template-columns: 36px 1fr;
	column-gap: 9px;
}
.rico-lang-es .es-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-row: 1 / span 2;
	width: 35px;
	height: 35px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	font-weight: 700;
}
.rico-lang-es .es-step strong {
	font: 700 14px/1.55 var(--display);
}
.rico-lang-es .es-step small {
	color: #d4cbbd;
	font-size: 12px;
	line-height: 1.3;
}

/* ---------- Responsive (localized.css breakpoints) ---------- */
@media (max-width: 1100px) {
	.rico-lang-es .es-hero {
		padding: 100px 25px 22px;
	}
	.rico-lang-es .es-hero__geo {
		margin-left: 190px;
	}
	.rico-lang-es .es-hero__image,
	.rico-lang-es .rico-divi .es-hero::before {
		background-size: auto, 70% auto;
	}
}

@media (max-width: 880px) {
	.rico-lang-es .es-hero {
		padding-top: 75px;
	}
	.rico-lang-es .es-hero__geo {
		margin-left: 105px;
	}
	.rico-lang-es .es-hero__image,
	.rico-lang-es .rico-divi .es-hero::before {
		background-size: auto, 90% auto;
	}
	.rico-lang-es .es-hero__title {
		font-size: min(50px, 7.1vw);
	}
	.rico-lang-es .es-process {
		grid-template-columns: 1fr;
	}
	.rico-lang-es .es-paths strong {
		font-size: 15px;
	}
	/* rico-home.css frames the EN Home mobile menu; the ES page uses the interior header. */
	.rico-lang-es .mobile-nav:not([hidden]) {
		margin: 0;
		border: 0;
	}
}

/* The shared continuation drops its frame lines at 880px for the EN Home; the approved
   ES page keeps them down to 610px. */
@media (min-width: 611px) and (max-width: 880px) {
	.rico-lang-es .home-continuation {
		border-left: 1px solid var(--gold);
		border-right: 1px solid var(--gold);
	}
}

@media (max-width: 610px) {
	.rico-lang-es .es-home {
		border: 0;
	}
	.rico-lang-es .es-hero {
		min-height: 0;
		padding: 225px 19px 26px;
	}
	.rico-lang-es .es-hero__image,
	.rico-lang-es .rico-divi .es-hero::before {
		background: linear-gradient(180deg, rgb(0 0 0 / 0.02) 0%, rgb(0 0 0 / 0.16) 17%, #080808 40%),
			url("../img/home-hero-mobile.webp") top center / 100% auto no-repeat;
	}
	/* Accessibility (WCAG 1.4.3): the geo eyebrow sits on the lower photo, where the
	   approved gradient is still nearly clear (gold measured 2.1:1). Shade the photo's
	   bottom third, which is the only area behind text. */
	.rico-lang-es .es-hero__image::after,
	.rico-lang-es .rico-divi .es-hero::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 490 / 395;
		background: linear-gradient(180deg, rgb(8 8 8 / 0) 55%, rgb(8 8 8 / 0.78) 72%, #080808 100%);
	}
	.rico-lang-es .es-hero__geo {
		margin: 0 0 18px 3px;
		font-size: 12px;
	}
	.rico-lang-es .es-hero__geo small {
		font-size: 10px;
	}
	.rico-lang-es .es-hero__title {
		margin: 10px 0 13px;
		font-size: clamp(21px, 6.4vw, 39px);
		line-height: 1.09;
	}
	.rico-lang-es .es-hero__title em {
		margin-top: 9px;
	}
	.rico-lang-es .es-hero__stroke {
		height: 7px;
		margin-bottom: 14px;
	}
	.rico-lang-es .es-hero__lede {
		font-size: 13px;
	}
	.rico-lang-es .es-hero__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 9px;
	}
	.rico-lang-es .es-phone-btn {
		justify-content: center;
	}
	.rico-lang-es .es-paths {
		grid-template-columns: 1fr;
		gap: 7px;
		margin-top: 28px;
	}
	.rico-lang-es .es-paths a {
		min-height: 70px;
		padding: 11px 13px;
	}
	.rico-lang-es .es-paths strong {
		font-size: 17px;
	}
	.rico-lang-es .es-paths small {
		margin-top: 5px;
	}
	.rico-lang-es .es-process {
		margin-top: 8px;
	}
	.rico-lang-es .es-process ol {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	.rico-lang-es .es-process h2 {
		margin: 0;
		font-size: 21px;
	}
	.rico-lang-es .es-step strong {
		font-size: 13px;
	}
}

@media (max-width: 370px) {
	.rico-lang-es .es-hero {
		padding-top: 205px;
	}
}

/* CP-23: the hero button lost its arrow; keep its approved width (218.8px measured on 0.7.1). */
.rico-lang-es .es-hero__request {
	min-width: 219px;
}

/* CP-27 native modules: Divi zeroes the bottom margin of a module inside a flex column or
   group (.et_pb_section .et_pb_row .et_flex_group > .et_pb_module); the hero title and stroke
   carry their approved margins on the module itself. */
.rico-lang-es .rico-divi .et_pb_section .et_pb_row .et_pb_module.es-hero__title {
	margin-bottom: 18px;
}
.rico-lang-es .rico-divi .et_pb_section .et_pb_row .et_pb_module.es-hero__stroke {
	margin-bottom: 25px;
}
@media (max-width: 610px) {
	.rico-lang-es .rico-divi .et_pb_section .et_pb_row .et_pb_module.es-hero__title {
		margin-bottom: 13px;
	}
	.rico-lang-es .rico-divi .et_pb_section .et_pb_row .et_pb_module.es-hero__stroke {
		margin-bottom: 14px;
	}
}
/* "How it works": the steps list sits in a Text module, a grid item of .es-process; as grids,
   the module and its inner box let the list stretch to the row height as in the approved page. */
.rico-lang-es .rico-divi .es-process .et_pb_text,
.rico-lang-es .rico-divi .es-process .et_pb_text_inner {
	display: grid;
}