/**
 * es-pages.css — shared styling for every Spanish (/es/) landing page.
 *
 * Uses the accessible "split-orange" tokens from 2.7.0: --brand-fill (#c5511c)
 * for solid fills that carry white text, #b34700 for orange TEXT (passes AA on
 * white AND off-white). Every rule here is scoped to `.es-page` so it can't
 * leak into the rest of the site.
 */

.es-page {
	--es-fill: var(--brand-fill, #c5511c);
	--es-ink: #1f2733;
	--es-ink-soft: #4b5563;
	--es-orange-text: var(--brand-text, #b34700);
	--es-line: #e6e8ec;
	--es-tint: #fff7f2;
	--es-cream: #fdf6ef;      /* warm section tint (replaces the cold #fbfbfc) */
	--es-gold: #e8a13a;       /* star fills + guarantee accent (non-text 3:1) */
	--es-gold-ink: #a86a12;   /* gold TEXT on white — passes AA */
	--es-green: #2f7d5b;      /* live "disponible" dot only */
	--es-whatsapp: #25835b;   /* WhatsApp channel accent (AA on white) */
	--es-card-pad: 1.35rem;
	--es-radius: 16px;
	--es-shadow: 0 6px 24px rgba(17, 24, 39, .06);
}

/* ============================ SUB-NAV ============================ */
/* Clean pill nav. Rules are scoped with `.es-page` (specificity 0,2,0) so they
   beat the theme's `.container a { text-decoration:underline; color:orange }`
   (0,1,1) that was underlining + recoloring every link. One line on every
   width: the links scroll horizontally on narrow screens while "English" stays
   pinned to the right. */
.es-subnav {
	background: #fff;
	border-bottom: 1px solid var(--es-line);
	position: sticky;
	top: 0;
	z-index: 20;
}
.es-page .es-subnav__inner {
	display: flex;
	align-items: center;          /* vertically center the links + English button */
	gap: .5rem;
	flex-wrap: nowrap;
	min-height: 52px;
	padding: .4rem 0;
}
.es-page .es-subnav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .15rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.es-page .es-subnav__list::-webkit-scrollbar { display: none; }
.es-page .es-subnav__list > li { display: flex; align-items: center; }
/* !important defeats the theme's `.container a` (orange + underline) that was
   winning the cascade — the links must read as a clean gray/orange pill nav. */
.es-page .es-subnav__link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	scroll-snap-align: start;
	padding: .45rem .8rem;
	color: var(--es-ink-soft) !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: .95rem;
	border: 0 !important;
	border-radius: 999px;
	transition: background .15s ease, color .15s ease;
}
.es-page .es-subnav__link:hover,
.es-page .es-subnav__link:focus-visible {
	color: var(--es-orange-text) !important;
	background: var(--es-tint);
	text-decoration: none !important;
}
.es-page .es-subnav__link.is-active {
	color: var(--es-orange-text) !important;
	background: var(--es-tint);
	font-weight: 700;
}
.es-page .es-subnav__lang {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--es-ink) !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: .85rem;
	white-space: nowrap;
	background: #fff;
	border: 1.5px solid var(--es-line);
	border-radius: 999px;
	padding: .42rem .85rem;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.es-page .es-subnav__lang:hover,
.es-page .es-subnav__lang:focus-visible {
	color: var(--es-orange-text) !important;
	background: var(--es-tint);
	border-color: var(--es-fill);
	text-decoration: none !important;
}
.es-page .es-subnav__lang i { color: var(--es-orange-text) !important; }

/* ============================ HERO (self-contained photo hero) ============================ */
/* Fully self-contained (no .page-hero* — the theme's body.page .page-hero rules
   were overriding our background + title). Each page gets a distinct banner photo
   under a left-heavy dark gradient so white text stays legible (text sits in the
   >=.82 opacity zone; the photo reveals on the right). Image URLs are relative to
   /css/ → resolve to /img/banners/. */
.es-page .es-hero {
	position: relative;
	color: #fff;
	padding: clamp(2.75rem, 9vw, 5.5rem) 0;
	background-color: #6f2c0b;
	background-image:
		linear-gradient(96deg, rgba(22,11,4,.93) 0%, rgba(22,11,4,.84) 46%, rgba(22,11,4,.52) 74%, rgba(22,11,4,.22) 100%),
		var(--es-hero-img, none);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}
.es-page .es-hero__inner { max-width: 680px; }

/* Warm family-with-puppy photos for the US Latino/Hispanic family market.
   WebP first (smaller = faster LCP) with a JPG fallback via image-set(); modern
   browsers pick WebP, everything else the JPG, and truly ancient engines fall back
   to the warm --es-hero background-color (text stays legible either way).
   The subject sits right/center; each page also gets a focal background-position so
   no face lands under the darkest part of the left gradient. */
.es-page .es-hero--inicio {
	--es-hero-img: image-set(
		url(../img/banners/father-and-son-german-shepherd-puppy-portrait.webp) type("image/webp"),
		url(../img/banners/father-and-son-german-shepherd-puppy-portrait.jpg) type("image/jpeg"));
	background-position: center, right center;
}
.es-page .es-hero--cachorros {
	--es-hero-img: image-set(
		url(../img/banners/two-women-with-german-shepherd-puppy.webp) type("image/webp"),
		url(../img/banners/two-women-with-german-shepherd-puppy.jpg) type("image/jpeg"));
	background-position: center, right center;
}
.es-page .es-hero--financiamiento {
	--es-hero-img: image-set(
		url(../img/banners/family-with-dachshund-puppy-living-room.webp) type("image/webp"),
		url(../img/banners/family-with-dachshund-puppy-living-room.jpg) type("image/jpeg"));
	background-position: center, right center;
}
.es-page .es-hero--contacto {
	--es-hero-img: image-set(
		url(../img/banners/father-and-son-with-german-shepherd-puppy.webp) type("image/webp"),
		url(../img/banners/father-and-son-with-german-shepherd-puppy.jpg) type("image/jpeg"));
	background-position: center, right center;
}
.es-page .es-hero--about {
	--es-hero-img: image-set(
		url(../img/banners/mom-and-kids-with-golden-retriever-puppy.webp) type("image/webp"),
		url(../img/banners/mom-and-kids-with-golden-retriever-puppy.jpg) type("image/jpeg"));
	background-position: center, right center;
}
.es-page .es-hero--lander {
	--es-hero-img: image-set(
		url(../img/banners/family-with-dachshund-puppy-living-room.webp) type("image/webp"),
		url(../img/banners/family-with-dachshund-puppy-living-room.jpg) type("image/jpeg"));
	background-position: center, right center;
}
.es-page .es-hero--razas          { --es-hero-img: url(../img/banners/puppy-breeds.jpg); }
/* es-hero--raza sets --es-hero-img inline from the breed photo (falls back to the fill). */

.es-page .es-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .4rem .9rem;
	border-radius: 999px;
	margin-bottom: 1.15rem;
	backdrop-filter: blur(3px);
}
.es-page .es-hero__title {
	color: #fff;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.08;
	font-size: clamp(1.95rem, 6vw, 3.4rem);
	margin: 0;
	text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.es-page .es-hero__lede {
	color: rgba(255,255,255,.94);
	font-size: clamp(1rem, 2.4vw, 1.2rem);
	line-height: 1.5;
	margin: 1.05rem 0 0;
	max-width: 52ch;
	text-shadow: 0 1px 12px rgba(0,0,0,.28);
}
.es-page .es-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.7rem;
}
/* outline CTA reads as white on the dark hero */
.es-page .es-hero .btn-outline-primary { color: #fff; border-color: rgba(255,255,255,.75); }
.es-page .es-hero .btn-outline-primary:hover { background: #fff; color: var(--es-orange-text); border-color: #fff; }
.es-page .es-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	list-style: none;
	margin: 1.8rem 0 0;
	padding: 0;
}
.es-page .es-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: rgba(255,255,255,.92);
	font-weight: 600;
	font-size: .95rem;
}
.es-page .es-hero__trust i { color: #fff; }

/* ============================ SECTIONS ============================ */
.es-section { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.es-section:nth-of-type(even) { background: var(--es-cream); }
.es-section--tint { background: var(--es-tint) !important; }
.es-page .section-title { color: var(--es-ink); font-weight: 800; letter-spacing: -.01em; }

/* Section eyebrow — extends the hero's kicker → title → lede rhythm into content.
   Use only where it labels something real (PROCESO, FAMILIAS FELICES, GARANTÍA). */
.es-page .es-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--es-orange-text);
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin: 0 0 .5rem;
}
.es-page .es-section__eyebrow i { font-size: .9rem; }
.es-page .text-center .es-section__eyebrow,
.es-page .es-section__eyebrow--center { justify-content: center; display: flex; }
.es-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.2rem;
}
.es-section__head .section-title { margin: 0; }
.es-section__link {
	color: var(--es-orange-text);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.es-section__link:hover { text-decoration: underline; }
.es-section__lede { color: var(--es-ink-soft); max-width: 60ch; margin: -.4rem 0 1.4rem; }
.es-page .es-section__lede--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ============================ HUB QUICK-NAV ============================ */
.es-hub-nav__grid,
.es-why__grid,
.es-razas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.es-hub-card,
.es-razas__card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	height: 100%;
	background: #fff;
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius);
	padding: 1.3rem;
	text-decoration: none;
	color: var(--es-ink);
	box-shadow: var(--es-shadow);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.es-hub-card:hover,
.es-razas__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(17, 24, 39, .1);
	border-color: #e6c9b8;
}
.es-hub-card__icon,
.es-razas__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--es-tint);
	color: var(--es-orange-text);
	font-size: 1.35rem;
}
.es-hub-card__title,
.es-razas__name { font-weight: 800; font-size: 1.1rem; }
.es-hub-card__text,
.es-razas__blurb { color: var(--es-ink-soft); font-size: .95rem; flex: 1 1 auto; }
.es-hub-card__more,
.es-razas__more { color: var(--es-orange-text); font-weight: 700; font-size: .9rem; }
.es-razas__tag,
.es-razas__name .es-razas__tag {
	font-weight: 700;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--es-orange-text);
}

/* ============================ BREED CHIPS ============================ */
.es-hub-breeds__list {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.es-breed-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1rem;
	border: 1.5px solid #e6c9b8;
	border-radius: 999px;
	background: #fff;
	color: var(--es-orange-text);
	font-weight: 700;
	text-decoration: none;
}
.es-breed-chip span { color: var(--es-ink-soft); font-weight: 600; }
.es-breed-chip:hover { border-color: var(--es-fill); background: var(--es-tint); }
.es-breed-chip--all { color: var(--es-ink); }

/* ============================ BENEFITS ============================ */
.es-benefits__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.es-benefits__grid li {
	display: flex;
	align-items: center;
	gap: .8rem;
	background: #fff;
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius);
	padding: 1rem 1.1rem;
}
.es-benefits__grid i { color: var(--es-orange-text); font-size: 1.6rem; }
.es-benefits__grid span { color: var(--es-ink-soft); font-size: .92rem; }
.es-benefits__grid strong { color: var(--es-ink); }

/* ============================ STEPS ============================ */
.es-steps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.2rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	counter-reset: es-step;
}
.es-steps__item {
	position: relative;
	background: #fff;
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius);
	padding: 2rem 1.3rem 1.3rem;
	text-align: center;
	box-shadow: var(--es-shadow);
}
.es-steps__num {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--es-fill);
	color: #fff;
	font-weight: 800;
}
.es-steps__icon { font-size: 1.8rem; color: var(--es-orange-text); }
.es-steps__title { font-weight: 800; margin: .5rem 0 .3rem; font-size: 1.15rem; }
.es-steps__text { color: var(--es-ink-soft); margin: 0; }

/* ============================ APPLY / CARD ============================ */
.es-apply__card {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 2rem;
	align-items: center;
	background: #fff;
	border: 1px solid var(--es-line);
	border-radius: 20px;
	padding: clamp(1.4rem, 3vw, 2.4rem);
	box-shadow: var(--es-shadow);
}
.es-apply__title { font-weight: 800; }
.es-apply__intro { color: var(--es-ink-soft); }
.es-apply__benefits { list-style: none; margin: 1rem 0; padding: 0; }
.es-apply__benefits li { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; color: var(--es-ink); }
.es-apply__benefits i { color: var(--es-orange-text); margin-top: .15rem; }
.es-apply__actions { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.es-apply__fallback { color: var(--es-ink-soft); font-size: .9rem; }
.es-apply__fallback a { color: var(--es-orange-text); font-weight: 700; }
.es-apply__disclaimer { color: #6b7280; font-size: .78rem; margin-top: 1rem; }
.es-apply__visual { text-align: center; }

/* ============================ HELP / PHONE CTA ============================ */
.es-help__inner,
.es-cta-band__inner,
.es-lander-intro__grid,
.es-contact__grid,
.es-raza-intro__inner,
.es-story__inner { }
.es-help__inner,
.es-cta-band__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.es-help { background: var(--es-tint); }
.es-help__title { font-weight: 800; }
.es-help__text { color: var(--es-ink-soft); max-width: 60ch; margin: .3rem 0 .8rem; }
.es-page .es-help__actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 0; }

/* ============================ CTA BAND ============================ */
/* Warm gradient fill + extra bottom padding so the final band seats against the
   footer intentionally (no dead white gap). */
.es-cta-band {
	background: linear-gradient(180deg, var(--es-tint) 0%, var(--es-cream) 100%);
	padding-bottom: clamp(3rem, 6vw, 5rem);
	border-top: 1px solid #f0e2d7;
}
.es-cta-band__title { font-weight: 800; margin: 0; }
.es-cta-band__text { color: var(--es-ink-soft); margin: .3rem 0 0; }
.es-cta-band__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
/* Any ES page whose LAST section is the reassurance/help band: give it the same
   warm seat against the footer so it never floats in white. */
.es-page > .es-help:last-child,
.es-page .es-help:last-of-type { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ============================ LOCATIONS ============================ */
.es-loc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.2rem;
}
.es-loc-grid--stack { grid-template-columns: 1fr; }
.es-loc-card {
	background: #fff;
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius);
	padding: 1.2rem;
	box-shadow: var(--es-shadow);
}
.es-loc-card__name { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.1rem; margin: 0 0 .6rem; }
.es-loc-card__name i { color: var(--es-orange-text); }
.es-loc-card__addr { color: var(--es-ink-soft); margin: 0 0 .5rem; }
.es-loc-card__phone a { color: var(--es-ink); text-decoration: none; font-weight: 700; }
.es-loc-card__phone i { color: var(--es-orange-text); }
.es-loc-card__hours { border-top: 1px solid var(--es-line); margin-top: .7rem; padding-top: .7rem; color: var(--es-ink-soft); font-size: .9rem; }
.es-loc-card__hours-label { display: block; font-weight: 700; color: var(--es-ink); margin-bottom: .2rem; }
.es-loc-card__actions { margin: .8rem 0 0; }
.es-loc-card__map { margin-top: .9rem; max-height: 200px; }

/* ============================ CONTACT ============================ */
.es-contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; }
.es-contact__phone a,
.es-contact__email a { color: var(--es-ink); text-decoration: none; font-weight: 600; }
.es-contact__phone i,
.es-contact__email i { color: var(--es-orange-text); }
.es-contact__gform { margin-top: 1rem; }

/* ============================ WHY / STORY ============================ */
.es-story__inner { max-width: 72ch; }
.es-story__inner p { color: var(--es-ink-soft); }
.es-why__item { background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius); padding: 1.4rem; text-align: center; box-shadow: var(--es-shadow); }
.es-why__icon { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; background: var(--es-tint); color: var(--es-orange-text); align-items: center; justify-content: center; font-size: 1.5rem; }
.es-why__title { font-weight: 800; margin: .6rem 0 .3rem; font-size: 1.1rem; }
.es-why__text { color: var(--es-ink-soft); margin: 0; }

/* ============================ LANDER / RAZA ============================ */
.es-lander-intro__grid,
.es-raza-intro__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }
.es-raza-intro__inner { grid-template-columns: 1fr; max-width: 80ch; }
.es-check-list { list-style: none; margin: 1rem 0; padding: 0; }
.es-check-list li { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; color: var(--es-ink); }
.es-check-list i { color: var(--es-orange-text); margin-top: .15rem; }
.es-raza-intro__lede { color: var(--es-ink-soft); font-size: 1.05rem; }
.es-raza-traits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .8rem;
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
}
.es-raza-traits__item { background: #fff; border: 1px solid var(--es-line); border-radius: 12px; padding: .8rem 1rem; }
.es-raza-traits__k { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--es-orange-text); font-weight: 800; }
.es-raza-traits__k i { margin-right: .35rem; }
.es-raza-traits__v { color: var(--es-ink); font-weight: 600; }
.es-page .es-family-badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--es-tint); color: var(--es-orange-text); font-weight: 700; border: 1px solid #f0d9c8; border-radius: 999px; padding: .4rem .9rem; margin: .2rem 0 .4rem; }
.es-page .es-raza-guarantee { display: flex; align-items: center; gap: .5rem; color: var(--es-ink); font-weight: 600; margin: 1.2rem 0 0; }
.es-page .es-raza-guarantee i { color: var(--es-orange-text); font-size: 1.2rem; }

/* ============================ FAQ ============================ */
.es-faq__list { max-width: 820px; margin: 1.4rem auto 0; }
.es-faq__item { border: 1px solid var(--es-line); border-radius: 12px !important; overflow: hidden; margin-bottom: .7rem; background: #fff; }
.es-faq__item .accordion-button { font-weight: 700; color: var(--es-ink); }
.es-faq__item .accordion-button:not(.collapsed) { background: var(--es-tint); color: var(--es-orange-text); box-shadow: none; }
.es-faq__item .accordion-button:focus { box-shadow: 0 0 0 3px rgba(197, 81, 28, .2); }
.es-faq__item .accordion-body { color: var(--es-ink-soft); }

/* ============================ GRID CELLS / POLISH ============================ */
.es-page .es-contact__form,
.es-page .es-contact__locations,
.es-page .es-apply__body,
.es-page .es-lander-intro__copy,
.es-page .es-lander-intro__card {
	min-width: 0; /* grid cells: keep long words / iframes from overflowing the column */
}
@media (min-width: 992px) {
	.es-page .es-contact__locations { position: sticky; top: 5rem; }
}
.es-page .es-razas__note { margin-top: 1.8rem; color: var(--es-ink-soft); }

/* ============================ ARCHIVE TOOLBAR ============================ */
/* A clean card (not a big round pill) with three distinct segments: a solid
   location filter, a soft-tinted search field, and an outlined sort button. */
.es-page .es-toolbar { margin: 0 0 1.6rem; }
.es-page .es-toolbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	background: #fff;
	border: 1px solid var(--es-line);
	border-radius: 14px;
	padding: .5rem;
	box-shadow: var(--es-shadow);
}
.es-page .es-toolbar__loc {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--es-fill);
	color: #fff;
	border-radius: 10px;
	padding: .55rem .75rem;
	flex-shrink: 0;
	max-width: 46%;
}
.es-page .es-toolbar__select {
	background: transparent;
	border: 0;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	max-width: 100%;
	min-width: 0;
	padding: 0;
	outline: none;
	text-overflow: ellipsis;
}
.es-page .es-toolbar__select option { color: var(--es-ink); }
.es-page .es-toolbar__search {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex: 1 1 240px;
	min-width: 0;
	padding: .5rem .75rem;
	background: var(--es-cream);
	border-radius: 10px;
	color: var(--es-ink-soft);
}
.es-page .es-toolbar__input {
	border: 0;
	outline: none;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1rem;
	color: var(--es-ink);
	background: transparent;
}
.es-page .es-toolbar__sort { flex-shrink: 0; }
.es-page .es-toolbar__sortbtn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border: 1px solid var(--es-line);
	background: #fff;
	color: var(--es-ink);
	font-weight: 700;
	padding: .55rem .9rem;
	border-radius: 10px;
	cursor: pointer;
	white-space: nowrap;
}
.es-page .es-toolbar__sortbtn:hover { color: var(--es-orange-text); border-color: #e6c9b8; }
.es-page #esSortMenu .dropdown-item.active { color: var(--es-orange-text); font-weight: 700; background: var(--es-tint); }
.es-page .es-toolbar__count { margin: 0 0 0 auto; padding-right: .4rem; color: var(--es-ink-soft); font-size: .85rem; font-weight: 600; white-space: nowrap; }

/* filtered-out cards + native pagination (infinite scroll drives the grid) */
.es-page li.product.es-hidden { display: none !important; }
.es-page .es-grid .woocommerce-pagination { display: none; }

/* About "Nuestra historia" — editorial two-column with a photo. */
.es-page .es-story__grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 2.2rem;
	align-items: center;
}
.es-page .es-story__copy p { color: var(--es-ink-soft); }
.es-page .es-story__stats { display: flex; flex-wrap: wrap; gap: 1.3rem 2rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.es-page .es-story__stats li { display: flex; flex-direction: column; }
.es-page .es-story__stats strong { font-size: 1.6rem; font-weight: 800; color: var(--es-orange-text); line-height: 1.1; }
.es-page .es-story__stats span { color: var(--es-ink-soft); font-size: .9rem; }
.es-page .es-story__media { margin: 0; }
.es-page .es-story__media img {
	width: 100%;
	height: 100%;
	max-height: 360px;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: var(--es-shadow);
}

/* Money-page flow: benefits + grid in one column so the grid can jump up on mobile. */
.es-page .es-cachorros-flow { display: flex; flex-direction: column; }
/* The benefits row is a thin utility strip — full section padding (57.6px each
   side) + the grid title's 40px margin left a big dead gap before the puppies.
   Tighten it so the grid comes up closer. */
.es-page .es-cachorros-flow .es-benefits { padding: clamp(1.4rem, 4vw, 2rem) 0 0; }
/* !important beats the theme's .section-title 40px top margin (money page only). */
.es-page .es-cachorros-flow .es-grid .section-title { margin-top: .6rem !important; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 767.98px) {
	.es-apply__card,
	.es-contact__grid,
	.es-lander-intro__grid { grid-template-columns: 1fr; }
	.es-help__inner,
	.es-cta-band__inner { flex-direction: column; align-items: flex-start; }
	.es-apply__visual { display: none; }

	/* Mobile hero: top-down dark gradient (deepened at the very top for legibility
	   over the busier family photos) so full-width white text stays readable. */
	.es-page .es-hero {
		padding: clamp(2rem, 9vw, 3.25rem) 0;
		background-image:
			linear-gradient( 180deg, rgba(22,11,4,.9) 0%, rgba(22,11,4,.72) 55%, rgba(22,11,4,.62) 100% ),
			var(--es-hero-img, none);
	}
	/* (The "View Our Puppies" side tab is filtered OFF on ES pages, so the hero no
	   longer needs left padding to clear it — text uses the full column width.) */

	/* Money page: puppies above the fold — grid first + compact hero. */
	.es-page .es-cachorros-flow .es-grid { order: -1; padding-top: .6rem; }
	.es-page .es-cachorros-flow .es-benefits { order: 0; padding-top: 1.6rem; }
	.es-page .es-hero--cachorros { padding: 1.5rem 0 1.35rem; }
	.es-page .es-hero--cachorros .es-hero__lede,
	.es-page .es-hero--cachorros .es-hero__trust { display: none; }
	.es-page .es-hero--cachorros .es-hero__cta { margin-top: 1rem; }

	/* Tighten the toolbar + stack cleanly: search full-width on row 1, then the
	   location filter + sort share row 2. */
	.es-page .es-toolbar { margin-bottom: .9rem; }
	.es-page .es-toolbar__count { display: none; }
	.es-page .es-toolbar__search { flex: 1 1 100%; order: -1; }
	.es-page .es-toolbar__loc { flex: 1 1 auto; max-width: none; }
	.es-page .es-toolbar__sort { flex: 1 1 auto; }
	.es-page .es-toolbar__sortbtn { width: 100%; justify-content: center; }

	/* About story stacks (text, then photo). */
	.es-page .es-story__grid { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ============================================================================
   V2 — Hispanic-market warmth & trust components (2.7.4)
   Floating hero cards, health-guarantee band, breed image cards, contact
   channels, reviews chrome, plan tiles, location mesh, gold stars, live dot.
   ============================================================================ */

/* ---- gold star row + live "disponible" dot (the only non-orange accents) ---- */
.es-page .es-stars { display: inline-flex; gap: .08rem; color: var(--es-gold); line-height: 1; }
.es-page .es-stars i { color: var(--es-gold); font-size: .95rem; }
.es-page .es-live-dot {
	display: inline-block; width: 9px; height: 9px; border-radius: 50%;
	background: var(--es-green); vertical-align: middle;
	box-shadow: 0 0 0 0 rgba(47, 125, 91, .5); animation: es-pulse 2.2s infinite;
}
@keyframes es-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(47, 125, 91, .5); }
	70%  { box-shadow: 0 0 0 9px rgba(47, 125, 91, 0); }
	100% { box-shadow: 0 0 0 0 rgba(47, 125, 91, 0); }
}
@media (prefers-reduced-motion: reduce) { .es-page .es-live-dot { animation: none; } }

/* ---- floating hero stat/rating card ---- */
.es-page .es-hero .container { position: relative; }
.es-page .es-hero__card {
	position: absolute;
	right: 12px;
	bottom: -30px;
	z-index: 6;
	max-width: 320px;
	display: flex;
	align-items: center;
	gap: .85rem;
	background: #fff;
	color: var(--es-ink);
	border: 1px solid var(--es-line);
	border-radius: 14px;
	padding: .85rem 1.1rem;
	box-shadow: 0 14px 34px rgba(17, 24, 39, .18);
}
.es-page .es-hero__card-figure {
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.es-page .es-hero__card-figure img { width: 46px; height: 46px; object-fit: contain; }
.es-page .es-hero__card-figure i { font-size: 2rem; color: var(--es-orange-text); line-height: 1; }
.es-page .es-hero__card-body { display: flex; flex-direction: column; gap: .12rem; }
.es-page .es-hero__card-num { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--es-ink); }
.es-page .es-hero__card-title { font-weight: 800; font-size: .98rem; display: block; }
.es-page .es-hero__card-sub { color: var(--es-ink-soft); font-size: .82rem; display: block; }
.es-page .es-hero__card .es-stars i { font-size: .82rem; }

/* ---- health-guarantee band ---- */
.es-page .es-guarantee { background: linear-gradient(180deg, var(--es-cream) 0%, #fff 100%); }
.es-page .es-guarantee__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.4rem 2.2rem;
	align-items: center;
}
.es-page .es-guarantee__seal { width: 118px; height: auto; }
.es-page .es-guarantee__list {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem; list-style: none; margin: 0; padding: 0;
}
.es-page .es-guarantee__list li { display: flex; align-items: flex-start; gap: .65rem; }
.es-page .es-guarantee__list i { color: var(--es-orange-text); font-size: 1.5rem; line-height: 1; }
.es-page .es-guarantee__list strong { display: block; color: var(--es-ink); }
.es-page .es-guarantee__list span { color: var(--es-ink-soft); font-size: .9rem; }

/* ---- benefit tiles: icon chip + guarantee emphasis variant ---- */
.es-page .es-benefits__grid li { align-items: flex-start; gap: .85rem; }
.es-page .es-benefits__chip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 12px;
	background: var(--es-tint); color: var(--es-orange-text); flex-shrink: 0;
}
.es-page .es-benefits__chip i { font-size: 1.35rem; color: inherit; }
.es-page .es-benefits__grid li.es-benefit--seal {
	background: var(--es-cream); border-color: #f0d9c8; border-left: 3px solid var(--es-gold);
}
.es-page .es-benefits__grid li.es-benefit--seal .es-benefits__chip {
	background: rgba(232, 161, 58, .16); color: var(--es-gold-ink);
}

/* ---- breed image cards (hub + razas) ---- */
.es-page .es-breed-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.2rem; list-style: none; margin: 0; padding: 0;
}
.es-page .es-breed-card {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius);
	overflow: hidden; text-decoration: none; color: var(--es-ink);
	box-shadow: var(--es-shadow);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.es-page .es-breed-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(17, 24, 39, .1); border-color: #e6c9b8; }
.es-page .es-breed-card__figure {
	position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--es-tint);
}
.es-page .es-breed-card__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.es-page .es-breed-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--es-orange-text); font-size: 2.4rem; }
.es-page .es-breed-card:hover .es-breed-card__figure img { transform: scale(1.05); }
.es-page .es-breed-card__tag {
	position: absolute; top: .6rem; left: .6rem;
	background: var(--es-gold-ink); color: #fff;
	font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
	padding: .25rem .6rem; border-radius: 999px;
}
.es-page .es-breed-card__body { padding: var(--es-card-pad); display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; }
.es-page .es-breed-card__name { font-weight: 800; font-size: 1.12rem; }
.es-page .es-breed-card__blurb { color: var(--es-ink-soft); font-size: .92rem; flex: 1 1 auto; }
.es-page .es-breed-card__count { display: inline-flex; align-items: center; gap: .4rem; color: var(--es-ink-soft); font-weight: 600; font-size: .85rem; }
.es-page .es-breed-card__more { color: var(--es-orange-text); font-weight: 700; font-size: .9rem; margin-top: .2rem; }

/* ---- razas "para mi familia" filter chips (reuses the breed-chip look) ---- */
.es-page .es-razas-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.6rem; }
.es-page .es-razas-filters__label { font-weight: 800; color: var(--es-ink); margin-right: .2rem; }

/* ---- contact channel cards ---- */
.es-page .es-channels {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1rem; margin: 0 0 1.6rem; padding: 0; list-style: none;
}
.es-page .es-channel {
	display: flex; align-items: center; gap: .8rem; min-height: 74px;
	background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius);
	padding: .9rem 1.1rem; text-decoration: none; color: var(--es-ink); box-shadow: var(--es-shadow);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.es-page .es-channel:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(17, 24, 39, .1); border-color: #e6c9b8; }
.es-page .es-channel__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 12px; background: var(--es-tint);
	color: var(--es-orange-text); font-size: 1.35rem; flex-shrink: 0;
}
.es-page .es-channel--whatsapp .es-channel__icon { background: rgba(37, 131, 91, .12); color: var(--es-whatsapp); }
.es-page .es-channel__label { display: block; font-weight: 800; }
.es-page .es-channel__value { display: block; color: var(--es-ink-soft); font-size: .88rem; }

/* ---- WhatsApp channel button (never the loud orange primary) ---- */
.es-page .es-btn-whatsapp {
	display: inline-flex; align-items: center; gap: .5rem;
	background: #fff; color: var(--es-ink); border: 1.5px solid var(--es-line);
	border-radius: 999px; padding: .6rem 1.1rem; font-weight: 700; text-decoration: none;
}
.es-page .es-btn-whatsapp i { color: var(--es-whatsapp); font-size: 1.15rem; }
.es-page .es-btn-whatsapp:hover { border-color: var(--es-whatsapp); color: var(--es-ink); }

/* ---- financing example plan tiles + fallback reassurance sub-card ---- */
.es-page .es-plans {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem; list-style: none; margin: 1.4rem 0 0; padding: 0;
}
.es-page .es-plan { background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius); padding: var(--es-card-pad); box-shadow: var(--es-shadow); text-align: center; }
.es-page .es-plan__icon { font-size: 1.8rem; color: var(--es-orange-text); }
.es-page .es-plan__title { font-weight: 800; margin: .4rem 0 .2rem; font-size: 1.05rem; }
.es-page .es-plan__text { color: var(--es-ink-soft); margin: 0; font-size: .92rem; }
.es-page .es-apply__fallback-card {
	margin-top: 1rem; background: var(--es-tint); border: 1px solid #f0d9c8;
	border-radius: 14px; padding: 1rem 1.15rem;
}
.es-page .es-apply__fallback-card strong { color: var(--es-ink); }
.es-page .es-apply__fallback-card p { margin: .25rem 0 0; color: var(--es-ink-soft); font-size: .92rem; }
.es-page .es-apply__fallback-card a { color: var(--es-orange-text); font-weight: 700; }

/* ---- financing reassurance micro-band on the money page ---- */
.es-page .es-microband { background: var(--es-tint); }
.es-page .es-microband__inner { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; text-align: center; }
.es-page .es-microband__inner i { color: var(--es-orange-text); font-size: 1.4rem; }
.es-page .es-microband__inner p { margin: 0; color: var(--es-ink); font-weight: 600; }
.es-page .es-microband__inner a { color: var(--es-orange-text); font-weight: 800; white-space: nowrap; }

/* ---- "Cachorros en venta por ubicación" internal-link mesh ---- */
.es-page .es-loclinks { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.es-page .es-loclink {
	display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem;
	border: 1.5px solid #e6c9b8; border-radius: 999px; background: #fff;
	color: var(--es-orange-text); font-weight: 700; text-decoration: none;
}
.es-page .es-loclink i { color: var(--es-orange-text); }
.es-page .es-loclink:hover { border-color: var(--es-fill); background: var(--es-tint); }

/* ---- Spanish reviews (fork of section-reviews with warm chrome) ---- */
.es-page.es-reviews-wrap .es-reviews,
.es-page .es-reviews { background: var(--es-cream); }
.es-page .es-reviews__head { text-align: center; margin-bottom: 1.5rem; }
.es-page .es-reviews__rating { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--es-ink); font-size: 1.05rem; }
.es-page .es-reviews__count { display: block; color: var(--es-ink-soft); font-weight: 600; font-size: .92rem; margin-top: .2rem; }
.es-page .es-reviews__card {
	max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--es-line);
	border-radius: var(--es-radius); padding: 1.7rem 1.6rem; box-shadow: var(--es-shadow); text-align: center;
}
.es-page .es-reviews__quote { color: var(--es-ink); font-size: 1.08rem; line-height: 1.6; }
.es-page .es-reviews__name { font-weight: 800; margin: .7rem 0 0; }
.es-page .es-reviews__nav { display: flex; gap: .5rem; justify-content: center; align-items: center; margin-top: 1.3rem; }
.es-page .es-reviews__nav .btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- credibility band tweak for ES (keep logos, warm the surround, drop the
   partial's English heading in favor of the Spanish one above it) ---- */
.es-page .es-credibility .section-credibility { background: transparent; }
.es-page .es-credibility .section-credibility .container { padding-top: 0; }
.es-page .es-credibility .section-credibility .section-title { display: none; }

/* ---- touch targets + tactile button feedback ---- */
.es-page .es-loc-card__actions .btn-sm { min-height: 44px; display: inline-flex; align-items: center; padding: .5rem .9rem; }
.es-page .es-toolbar__sortbtn, .es-page .es-toolbar__select { min-height: 40px; }
.es-page .btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .es-page .btn:active { transform: none; } }

/* ---- location card: store-front thumbnail + "abierto" state ---- */
.es-page .es-loc-card__photo { margin: -1.2rem -1.2rem 1rem; display: block; }
.es-page .es-loc-card__photo img { width: 100%; height: 150px; object-fit: cover; display: block; }
.es-page .es-loc-card__badge {
	display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .82rem;
	color: var(--es-green); margin-left: .5rem;
}
.es-page .es-loc-card__wa { margin-top: .5rem; }

/* ============================ V2 RESPONSIVE ============================ */
@media (max-width: 991.98px) {
	/* Floating hero card → static full-width strip in normal flow (never overlap). */
	.es-page .es-hero__card {
		position: static; max-width: none; margin-top: 1.4rem; bottom: auto; right: auto;
		box-shadow: var(--es-shadow);
	}
}
@media (max-width: 767.98px) {
	.es-page .es-guarantee__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.es-page .es-guarantee__list li { text-align: left; }
	.es-page .es-guarantee__seal { width: 96px; }
	.es-page .es-microband__inner { flex-direction: column; gap: .5rem; }
	.es-page .es-reviews__card { padding: 1.3rem 1.15rem; }
	/* Channel cards + WhatsApp button go full-width for thumbs. */
	.es-page .es-channels { grid-template-columns: 1fr; }
	.es-page .es-channel { min-height: 60px; }
}

/* ============================================================================
   V2 — Mobile horizontal-swipe carousels for the ES card rows
   Long Spanish pages stay short on mobile (same treatment as the about/financing
   pages): each card row becomes a smooth left↔right swipe strip. Cards peek the
   next one to signal swipe-ability; scroll-snap centers each; momentum scrolling
   on iOS; scrollbar hidden. Rows of PRIMARY CTAs (channels), tall map cards
   (loc-grid), short trust text (guarantee list) and pill-chip rows stay stacked.
   ============================================================================ */
@media (max-width: 767.98px) {
	.es-page .es-hub-nav__grid,
	.es-page .es-steps__grid,
	.es-page .es-breed-grid,
	.es-page .es-benefits__grid,
	.es-page .es-plans,
	.es-page .es-why__grid,
	.es-page .es-raza-traits {
		display: flex;
		grid-template-columns: none;
		gap: .85rem;
		padding: 2px 2px .7rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 2px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.es-page .es-hub-nav__grid::-webkit-scrollbar,
	.es-page .es-steps__grid::-webkit-scrollbar,
	.es-page .es-breed-grid::-webkit-scrollbar,
	.es-page .es-benefits__grid::-webkit-scrollbar,
	.es-page .es-plans::-webkit-scrollbar,
	.es-page .es-why__grid::-webkit-scrollbar,
	.es-page .es-raza-traits::-webkit-scrollbar { display: none; }

	/* Steps carry a raised number badge (top:-18px) → extra top padding so the
	   overflow container doesn't clip it. */
	.es-page .es-steps__grid { padding-top: 18px; margin-top: 1.4rem; }

	/* Per-card widths so the next card peeks; snap-center each. min-width:0 keeps a
	   long unbreakable word from widening the card past its basis. */
	.es-page .es-hub-nav__grid > li,
	.es-page .es-benefits__grid > li,
	.es-page .es-plans > li,
	.es-page .es-why__grid > li { flex: 0 0 80%; scroll-snap-align: center; min-width: 0; }
	.es-page .es-steps__grid > li { flex: 0 0 82%; scroll-snap-align: center; min-width: 0; }
	.es-page .es-breed-grid > li { flex: 0 0 85%; scroll-snap-align: center; min-width: 0; }
	.es-page .es-raza-traits > li { flex: 0 0 46%; scroll-snap-align: center; min-width: 0; }
}