/**
 * 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; }

/* 2.9.6 rewrote partials/section-credibility.php and it now emits English copy
   beyond the heading this file already drops: an intro paragraph and, per mark,
   a visible name and a factual note. The rule above only ever covered the
   heading, so those nine strings would render untranslated on the Spanish
   templates. Dropped here for the same reason and in the same place, rather
   than filtered in PHP, so the ES treatment of this band stays in one file.
   The logos and their links are untouched. */
.es-page .es-credibility .section-credibility .credibility-intro,
.es-page .es-credibility .section-credibility .credibility-mark__name,
.es-page .es-credibility .section-credibility .credibility-mark__note { 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; }
}