/*
Theme Name: Homiture
Theme URI: https://homiture.com
Description: Tema de bloques propio para Homiture — amueblado llave en mano (turn-key) para propiedades de renta e inversión en la Riviera Maya. Diseño según homitureSSOT.md v3.1.
Author: Homiture
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: homiture
*/

/* ======================================================================
   AVISO — no volver a llamar "text" a ningún color de la paleta
   ======================================================================

   El color de texto principal tiene el slug `ink`, no `text`. No es un
   capricho de nomenclatura: WordPress añade la clase marcadora
   `has-text-color` a TODO bloque que fije un color de texto, y de un slug
   de paleta genera `.has-{slug}-color`. Con el slug `text` las dos cosas
   producen el mismo selector, `.has-text-color`, ambas con !important y la
   misma especificidad — así que ganaba la que se emitiera más tarde.

   La paleta por defecto de WordPress se emite ANTES que la del tema, y
   `white` está en ella. Resultado: todo bloque con `textColor: "white"`
   acababa pintado con el color de texto oscuro. Sobre las bandas oscuras
   eso daba un contraste de 1.01:1 — texto invisible. Había 11 casos en 5
   páginas (títulos de About, Developer Solutions, FAQ, Partners y Airbnb
   Hosts). Reordenar la paleta no lo arregla: el choque es con la paleta de
   WordPress, no con el orden interno de la nuestra.

   Buena parte de los `!important` de color que hay más abajo en este
   archivo son parches puestos uno a uno contra este mismo fallo. Al
   renombrar el slug dejan de hacer falta y se pueden ir retirando.

   Si alguna vez se renombra `ink` a `text`, vuelve el fallo entero.
   ====================================================================== */

/* ======================================================================
   0. Base
   ====================================================================== */
html {
	scroll-behavior: smooth;
}

body {
	/* Solo existe Acherus Regular (400). Evitamos el "faux bold" sintético:
	   hasta licenciar Bold/Medium, los headings caen al peso real disponible. */
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--ink);
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* ======================================================================
   1. Header — sticky
   ====================================================================== */

/* El HTML real renderizado por WP es:
   <header class="wp-block-template-part">
     <header class="site-header">  ← wp:html se renderiza DIRECTO, sin div.wp-block-html
   El wrapper es un <header> con clase wp-block-template-part.
   ESE es el elemento que debe tener position:sticky. */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 200;
	display: block;
	background: transparent; /* el fondo lo pone .site-header hijo */
}

/* El <header class="site-header"> hijo ocupa todo el ancho del wrapper */
.site-header {
	width: 100%;
	display: block;
}

/* Logo (dos variantes: color por defecto, blanco sobre hero) */
.brand-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
	text-decoration: none;
}

.brand-logo__img {
	height: 80px;
	width: auto;
}

.brand-logo__img--color {
	display: block;
}

.brand-logo__img--white {
	display: none;
}

.brand-logo--footer img {
	height: 56px;
	width: auto;
}

/* TranslatePress: ocultar el widget cuando TP lo inyecta directamente
   en el wrapper header.wp-block-template-part (fuera de nuestro header) */
header.wp-block-template-part > .trp-language-switcher,
header.wp-block-template-part > .trp_language_switcher_shortcode,
header.wp-block-template-part > .trp-floater-ls,
header.wp-block-template-part > div[class*="trp-"],
header.wp-block-template-part > span[class*="trp-"] {
	display: none !important;
}

/* Switcher de TranslatePress en la barra (dentro de .site-header__actions) */
.site-header__actions .trp-language-switcher,
.site-header__actions .trp_language_switcher_shortcode,
.site-header__actions .trp-floater-ls,
.site-header__actions [class*="trp-"] {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

/* ======================================================================
   2. Botones — variantes de marca
   ====================================================================== */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Acento (oro) — CTA premium. Texto oscuro para contraste (regla SSOT). */
.wp-block-button.is-style-accent .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	/* Texto oscuro fijo: el oro siempre pide texto oscuro, también en tema oscuro. */
	color: #1f2a28;
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-hover);
}

/* Secundario / contorno */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-soft);
}

/* Outline blanco sobre hero oscuro — deshabilitado (header ya no es transparente) */

/* ======================================================================
   3. Footer
   ====================================================================== */
.site-footer a {
	color: var(--wp--preset--color--on-dark);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--accent);
}

.footer-heading {
	color: var(--wp--preset--color--on-dark);
	margin-bottom: 1rem;
}

.footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-list li {
	margin-bottom: 0.45rem;
}

.footer-newsletter {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
	flex-wrap: wrap;
}

.footer-newsletter__input {
	flex: 1 1 140px;
	min-width: 0;
	padding: 0.6rem 0.8rem;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid rgba(247, 244, 238, 0.25);
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--on-dark);
	font-size: 0.95rem;
}

.footer-newsletter__input::placeholder {
	color: rgba(247, 244, 238, 0.5);
}

.footer-newsletter__btn {
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.footer-newsletter__btn:hover {
	background: var(--wp--preset--color--primary-hover);
}

.site-footer__bottom {
	align-items: center;
}

/* ======================================================================
   4. WhatsApp flotante (reveal por CSS; no depende de JS)
   ====================================================================== */
.homiture-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 56px;
	height: 56px;
	background: var(--wp--preset--color--whatsapp);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	z-index: 9999;
	animation: homiture-wa-in 0.4s ease 1.2s both;
}

.homiture-whatsapp-float:hover {
	background: #1ebe5b;
}

.homiture-whatsapp-float svg {
	display: block;
}

@keyframes homiture-wa-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* ======================================================================
   5. Utilidades editoriales (recoloreadas a la marca SSOT)
   ====================================================================== */
.homiture-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.homiture-numeral {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

/* Sección de fondo alterno (crema cálido) */
.section--alt {
	background: var(--wp--preset--color--cream);
}

/* ======================================================================
   6. Responsive
   ====================================================================== */
@media (max-width: 900px) {
	/* Header compacto en móvil — solo reducir padding, logo queda igual */
	.site-header__cta {
		display: none;
	}

	.site-header__inner {
		gap: 0.5rem;
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
		min-height: 0;
	}
}

/* En pantallas muy pequeñas el logo no debe encogerse */
@media (max-width: 360px) {
	.brand-logo {
		flex-shrink: 0;
		min-width: 0;
	}

	.brand-logo__img {
		height: 38px;
	}
}

@media (max-width: 480px) {
	.homiture-whatsapp-float {
		width: 50px;
		height: 50px;
		bottom: 16px;
		right: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.homiture-whatsapp-float { animation: none; opacity: 1; transform: none; }
	.wp-block-button__link,
	.site-header { transition: none; }
}

/* ======================================================================
   7. Home patterns
   ====================================================================== */
.benefit-ico { display: inline-flex; }

/* Tarjetas con borde + elevación al hover */
.home-card {
	height: 100%;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* dev-feature-list: lista ícono + texto para Developer Solutions */
.dev-feature-list {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.dev-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #e8ede9);
}
.dev-feature-item:last-child {
	border-bottom: none;
}
.dev-feature-ico {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--cream, #f5f0e8);
	border-radius: 12px;
	color: var(--wp--preset--color--primary, #00645c);
}
.dev-feature-body h3 {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--dark, #0f1c19);
	margin: 0 0 6px;
}
.dev-feature-body p {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted, #6b7c76);
	margin: 0;
	line-height: 1.6;
}


.home-card:hover {
	box-shadow: var(--wp--custom--shadow--md);
	border-color: var(--wp--preset--color--primary) !important;
}

/* ── svc-card: mejorar legibilidad de textos secundarios sobre fondo blanco ── */
.svc-card .svc-meta {
	color: #3d4a45;
	font-weight: 500;
}
.svc-card .has-muted-color {
	color: #4a5550 !important;
}
.svc-card .svc-includes {
	color: #3d4a45;
}

.collection-card {
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.collection-card:hover {
	box-shadow: var(--wp--custom--shadow--md);
}

/* Enlace-flecha que se desplaza al hover */
.homiture-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	transition: gap 0.2s ease, color 0.2s ease;
}

.homiture-arrow a:hover {
	gap: 0.7em;
	color: var(--wp--preset--color--primary-hover);
}

/* FAQ — acordeón nativo (block Details) */
.home-faq {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	padding: 0 1.25rem;
}

.home-faq summary {
	cursor: pointer;
	padding: 1rem 0;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.home-faq summary::-webkit-details-marker { display: none; }

.home-faq summary::after {
	content: "+";
	color: var(--wp--preset--color--primary);
	font-size: 1.4rem;
	line-height: 1;
	flex-shrink: 0;
}

.home-faq[open] summary::after { content: "\2212"; }

.home-faq p { padding-bottom: 1rem; margin-top: 0; }

/* Listas pro/cons del patrón Problem & Solution */
.check-list { list-style: none; padding-left: 0; }

.check-list li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.6rem;
}

.check-list li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.check-list.is-pros li::before {
	content: "\2713";
	color: var(--wp--preset--color--success);
}

.check-list.is-cons li::before {
	content: "\2715";
	color: var(--wp--preset--color--muted);
}

/* ======================================================================
   8. Luxury layer — warm + glass (premium, comfy, professional)
   ====================================================================== */
:root {
	--glass-bg: rgba(255, 255, 255, 0.72);
	--shadow-warm: 0 18px 48px rgba(74, 56, 41, 0.16);
	--shadow-warm-sm: 0 6px 22px rgba(74, 56, 41, 0.10);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* .site-header.is-scrolled — definido en sección 12 */

/* Warm depth + faint grain on dark bands and footer.
   Excluimos el hero (.home-hero) porque ya tiene su propio overlay
   en .wp-block-cover__background — aplicarlo aquí crea la franja
   marrón diagonal visible en el borde izquierdo del cover. */
.wp-block-group.has-dark-background-color:not(.home-hero) {
	background-image:
		linear-gradient(160deg, rgba(138, 75, 52, 0.20), rgba(138, 75, 52, 0) 55%),
		radial-gradient(120% 85% at 50% -10%, rgba(176, 137, 104, 0.16), rgba(176, 137, 104, 0) 60%),
		var(--grain);
	background-blend-mode: screen, screen, overlay;
	background-size: auto, auto, 160px 160px;
}

/* Warm glow + grain inside the hero overlay */
.home-hero .wp-block-cover__background {
	background-image:
		linear-gradient(160deg, rgba(138, 75, 52, 0.24), rgba(138, 75, 52, 0) 55%),
		radial-gradient(110% 80% at 50% 0%, rgba(176, 137, 104, 0.20), rgba(176, 137, 104, 0) 55%),
		var(--grain);
	background-blend-mode: screen, screen, overlay;
	background-size: auto, auto, 160px 160px;
}

/* Cards: warmer shadow, hover lift, gold hairline on top */
.home-card,
.collection-card {
	box-shadow: var(--shadow-warm-sm);
	position: relative;
}
.home-card::after,
.collection-card::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	background: var(--wp--preset--color--accent);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.home-card:hover,
.collection-card:hover {
	box-shadow: var(--shadow-warm) !important;
	transform: translateY(-3px);
}
.home-card:hover::after,
.collection-card:hover::after { opacity: 1; }

/* Glassy translucency for cards on the cream sections */
.has-cream-background-color .home-card {
	background: var(--wp--preset--color--white) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Collection tops: subtle glass sheen */
.collection-card__top::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(31, 42, 40, 0.12));
	pointer-events: none;
}

/* Refined eyebrow — short gold rule above centered eyebrows */
.homiture-eyebrow.has-text-align-center::before {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: 0 auto 12px;
	background: var(--wp--preset--color--accent);
}

/* Buttons: a touch of warm lift */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: var(--shadow-warm-sm);
	transform: translateY(-1px);
}

/* FAQ: warm shadow when open */
.home-faq[open] { box-shadow: var(--shadow-warm-sm); }

@media (prefers-reduced-motion: reduce) {
	.home-card:hover,
	.collection-card:hover,
	.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { transform: none; }
}

/* ======================================================================
   9. Forms (Contact)
   ====================================================================== */
.homiture-form__row { display: flex; flex-direction: column; margin-bottom: 1rem; }

.homiture-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 600px) {
	.homiture-form__grid { grid-template-columns: 1fr; }
}

.homiture-form label {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--ink);
}

.homiture-form input,
.homiture-form select,
.homiture-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	font: inherit;
	color: var(--wp--preset--color--ink);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.homiture-form input:focus,
.homiture-form select:focus,
.homiture-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft);
}

.homiture-form__submit {
	width: 100%;
	margin-top: 0.5rem;
	cursor: pointer;
	border: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 500;
	padding: 0.85rem 1.5rem;
	border-radius: var(--wp--custom--radius--md);
	transition: background-color 0.2s ease;
}

.homiture-form__submit:hover { background: var(--wp--preset--color--primary-hover); }

.homiture-form__note { font-size: 0.8rem; color: var(--wp--preset--color--muted); margin-top: 0.75rem; }

/* ======================================================================
   10. Home — refinamientos visuales
   ====================================================================== */

/* --- Botón secundario "Explore Packages" en el hero ---
   El outline ghost apenas se ve sobre el fondo oscuro.
   Se convierte a sólido blanco; hover lo atenúa ligeramente. */
.home-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: #fff;
	color: var(--wp--preset--color--primary);
	border-color: #fff;
	border-width: 2px;
}
.home-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.88);
	color: var(--wp--preset--color--primary-hover);
	border-color: rgba(255, 255, 255, 0.88);
	box-shadow: none;
	transform: translateY(-1px);
}

/* --- Borde dorado superior (::after): no sobresalir del border-radius ---
   overflow: hidden en .home-card (collection-card ya lo tenía)
   + border-radius matching en el pseudo-elemento. */
.home-card {
	overflow: hidden;
}
.home-card::after,
.collection-card::after {
	border-radius: 16px 16px 0 0;
}

/* --- Collection cards: igual altura ---
   height: 100% para que la tarjeta llene la columna.
   El bloque de texto inferior (no el color header) se estira
   para alinear el enlace "View Collection →" al mismo nivel. */
.collection-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.collection-card > .wp-block-group:not(.collection-card__top) {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* --- Testimonials: color de texto según el tema (no fijo) ---
   Especificidad alta para ganarle a cualquier herencia cálida,
   pero usando el token para que el tema oscuro siga funcionando. */
.testimonials-section .wp-block-group p,
.testimonials-section .wp-block-group p.has-large-font-size,
.testimonials-section .wp-block-group p.has-small-font-size {
	color: var(--wp--preset--color--ink) !important;
}

/* --- Contact closing + footer: eliminar franja blanca entre secciones oscuras ---
   La franja viene del blockGap del <main> o del margen default del footer. */
.section-contact-closing {
	margin-bottom: 0 !important;
}
.site-footer {
	margin-top: 0 !important;
}

/* ======================================================================
   11. Who we help — tabs (pestañas por tipo de cliente)
   ====================================================================== */
.hm-tabs {
	max-width: 1000px;
	margin: 0 auto;
}

/* Lista de pestañas (pills) */
.hm-tabs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.hm-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.15rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hm-tabs__tab svg {
	flex-shrink: 0;
	opacity: 0.8;
}

.hm-tabs__tab:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.hm-tabs__tab[aria-selected="true"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	box-shadow: var(--shadow-warm-sm);
}

.hm-tabs__tab[aria-selected="true"] svg { opacity: 1; }

.hm-tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.hm-tabs__panel {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(1.5rem, 4vw, 2.75rem);
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	box-shadow: var(--shadow-warm-sm);
}

.hm-tabs__panel + .hm-tabs__panel { margin-top: 1rem; }
.hm-tabs__panel[hidden] { display: none; }

.hm-tabs__panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.hm-tabs__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0 0 0.6rem;
}

.hm-tabs__lead {
	color: var(--wp--preset--color--muted);
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
}

.hm-tabs__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	transition: gap 0.2s ease, color 0.2s ease;
}

.hm-tabs__cta:hover {
	gap: 0.7em;
	color: var(--wp--preset--color--primary-hover);
}

.hm-tabs__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.hm-tabs__points li {
	position: relative;
	padding-left: 2.1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink, #1f2a28);
	font-weight: 500;
}

.hm-tabs__points li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	width: 1.4rem;
	height: 1.4rem;
	display: grid;
	place-items: center;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-soft);
	border-radius: 50%;
}

@media (max-width: 781px) {
	.hm-tabs__panel {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.hm-tabs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 0.5rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.hm-tabs__list::-webkit-scrollbar { display: none; }
	.hm-tabs__tab { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.hm-tabs__tab,
	.hm-tabs__cta { transition: none; }
}

/* ======================================================================
   12. Header custom — barra desktop + drawer movil
   ====================================================================== */

/* --- 12a. Barra ------------------------------------------------------- */
/* sticky va en el wrapper .wp-block-template-part (seccion 1).
   Aqui solo fondo, transicion y z-index de respaldo. */

.site-header {
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition:
		background-color 0.3s ease,
		backdrop-filter 0.3s ease,
		-webkit-backdrop-filter 0.3s ease,
		box-shadow 0.25s ease;
	position: relative;
	z-index: 200;
	width: 100%;
}

/* Glass effect al hacer scroll */
.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(16px) saturate(1.6);
	backdrop-filter: blur(16px) saturate(1.6);
	/* Borde inferior suave + sombra cálida para separar el header del contenido */
	box-shadow:
		0 1px 0 rgba(74, 56, 41, 0.10),
		0 4px 24px rgba(74, 56, 41, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	max-width: 1280px;
	margin-inline: auto;
	padding: 1rem clamp(1.5rem, 3vw, 3rem);
	min-height: 88px;
}

/* --- 12b. Nav desktop ------------------------------------------------- */
.site-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__item {
	position: relative;
}

/* Todos los items de la nav: mismo tamaño, peso y familia.
   Forzamos font-family porque los <button> pueden heredar
   el font de sistema en lugar del tema. */
.site-nav__item > a,
.site-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease;
	letter-spacing: 0;
}

.site-nav__item > a:hover,
.site-nav__trigger:hover,
.site-nav__trigger[aria-expanded="true"] {
	color: var(--wp--preset--color--primary);
}

.site-nav__caret {
	font-size: 0.7em;
	line-height: 1;
	transition: transform 0.2s ease;
}

.site-nav__trigger[aria-expanded="true"] .site-nav__caret {
	transform: rotate(180deg);
}

.site-nav__sub {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	min-width: 230px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 8px);
	box-shadow: var(--shadow-warm);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
	z-index: 300;
}

.site-nav__item--has-sub:hover .site-nav__sub,
.site-nav__item--has-sub:focus-within .site-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}

.site-nav__sub li a {
	display: block;
	padding: 0.5rem 1.1rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav__sub li a:hover {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

/* --- 12c. Acciones derecha -------------------------------------------- */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.site-header__cta {
	font-size: 0.85rem !important;
	padding: 0.6rem 1.25rem !important;
	white-space: nowrap;
}

/* --- 12d. Boton hamburger --------------------------------------------- */
.site-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--sm, 4px);
	transition: background-color 0.2s ease;
}

.site-hamburger:hover {
	background: var(--wp--preset--color--primary-soft);
}

.site-hamburger__bar {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--wp--preset--color--ink);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-hamburger[aria-expanded="true"] .site-hamburger__bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.site-hamburger[aria-expanded="true"] .site-hamburger__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.site-hamburger[aria-expanded="true"] .site-hamburger__bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* --- 12e. Overlay ------------------------------------------------------ */
.hm-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(31, 42, 40, 0.55);
	backdrop-filter: blur(3px);
	z-index: 400;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.hm-drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* --- 12f. Drawer ------------------------------------------------------- */
.hm-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(92vw, 780px);
	display: flex;
	z-index: 500;
	/* Oculto completamente cuando cerrado: visibility + pointer-events
	   evitan que el panel imagen assome por el borde izquierdo */
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            visibility 0s 0.35s;
}

.hm-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            visibility 0s 0s;
}

.hm-drawer__panel {
	flex: 0 0 60%;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.75rem 2rem;
}

.hm-drawer__image {
	flex: 0 0 40%;
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(
			160deg,
			rgba(138, 75, 52, 0.85) 0%,
			rgba(31, 42, 40, 0.95) 100%
		),
		linear-gradient(
			to bottom right,
			#b08968,
			#1f2a28
		);
}

.hm-drawer__image-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 2rem;
}

.hm-drawer__tagline {
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: clamp(1.3rem, 2.5vw, 1.7rem);
	line-height: 1.25;
	color: #fff;
	margin: 0;
	letter-spacing: 0.03em;
}

.hm-drawer__tagline em {
	font-style: italic;
	color: var(--wp--preset--color--accent, #b8966a);
}

.hm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
	flex-shrink: 0;
}

.brand-logo--drawer img {
	height: 50px;
	width: auto;
}

.hm-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	flex-shrink: 0;
}

.hm-drawer__close:hover {
	background: var(--wp--preset--color--primary-soft);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.hm-drawer__nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.hm-drawer__group-label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.6rem;
}

.hm-drawer__group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hm-drawer__group ul li a {
	display: block;
	padding: 0.55rem 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.hm-drawer__group ul li:last-child a {
	border-bottom: none;
}

.hm-drawer__group ul li a:hover {
	color: var(--wp--preset--color--primary);
	padding-left: 0.4rem;
}

/* ======================================================================
   13. Language Splash — selector de idioma tipo Zara
   ====================================================================== */

.hm-lang-splash {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: stretch;
	/* Oculto hasta que JS lo active */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.hm-lang-splash.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0s 0s;
}

/* Layout dos columnas */
.hm-lang-splash__content {
	display: flex;
	width: 100%;
	height: 100%;
}

/* ---- Panel izquierdo ----------------------------------------- */
.hm-lang-splash__panel {
	flex: 0 0 clamp(320px, 40%, 520px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
	background: var(--wp--preset--color--white, #fff);
	gap: 0;
}

.hm-lang-splash__logo {
	margin-bottom: 3rem;
}

.hm-lang-splash__logo img {
	height: 72px;
	width: auto;
}

.hm-lang-splash__copy {
	margin-bottom: 2rem;
}

.hm-lang-splash__label {
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #C49A3A);
	margin: 0 0 0.4rem;
}

.hm-lang-splash__sublabel {
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-muted, #6b7280);
	margin: 0;
}

/* Opciones de idioma */
.hm-lang-splash__options {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	margin-bottom: 2rem;
	border-top: 1px solid var(--wp--preset--color--border, #e5e7eb);
}

.hm-lang-splash__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.1rem 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--border, #e5e7eb);
	cursor: pointer;
	text-align: left;
	transition: padding-left 0.2s ease, color 0.2s ease;
}

.hm-lang-splash__btn:hover {
	padding-left: 0.5rem;
	color: var(--wp--preset--color--primary, #1a3c34);
}

.hm-lang-splash__btn-name {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	transition: color 0.2s ease;
}

.hm-lang-splash__btn:hover .hm-lang-splash__btn-name {
	color: var(--wp--preset--color--primary, #1a3c34);
}

.hm-lang-splash__btn-hint {
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-muted, #6b7280);
}

/* Checkbox "remember" */
.hm-lang-splash__remember {
	margin: 0;
}

.hm-lang-splash__check-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-muted, #6b7280);
	cursor: pointer;
	user-select: none;
}

.hm-lang-splash__check {
	width: 14px;
	height: 14px;
	accent-color: var(--wp--preset--color--primary, #1a3c34);
	cursor: pointer;
	flex-shrink: 0;
}

/* ---- Panel derecho: imagen editorial ------------------------- */
.hm-lang-splash__image {
	flex: 1;
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--primary, #1a3c34);
	background-image: url('/wp-content/themes/homiture/assets/img/photos/lang-splash.webp');
	background-size: cover;
	background-position: center;
}

.hm-lang-splash__image-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		160deg,
		rgba(26, 60, 52, 0.55) 0%,
		rgba(26, 60, 52, 0.20) 60%,
		rgba(138, 75, 52, 0.15) 100%
	);
}

.hm-lang-splash__tagline {
	position: absolute;
	bottom: clamp(2rem, 5vw, 4rem);
	left: clamp(2rem, 4vw, 3.5rem);
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: clamp(1.6rem, 3.5vw, 2.8rem);
	line-height: 1.2;
	color: #fff;
	margin: 0;
	z-index: 1;
}

.hm-lang-splash__tagline em {
	font-style: italic;
	color: var(--wp--preset--color--accent, #C49A3A);
}

/* ---- Responsive: móvil (solo panel izquierdo) --------------- */
@media (max-width: 640px) {
	.hm-lang-splash__image {
		display: none;
	}

	.hm-lang-splash__panel {
		flex: 1;
		width: 100%;
		padding: 2.5rem 1.75rem;
	}
}

/* Bloquear scroll del body mientras el splash o el drawer estén abiertos */
body.hm-lang-splash-open,
body.hm-drawer-open {
	overflow: hidden;
}

/* ======================================================================
   14. Preloader shimmer
   ====================================================================== */
.hm-preloader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: #0f1c19;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	/* Sin transición al mostrar — aparece instantáneo */
}

.hm-preloader.is-hidden {
	display: none;
}

.hm-preloader__svg {
	display: block;
	overflow: hidden;
	width: min(520px, 72vw);
	height: auto;
}

/* Color dorado en el shimmer (mismo tono que acento del tema) */
#hmp-shimmer-grad stop:nth-child(3) {
	stop-color: #C9A06E;
}

/* ======================================================================
   15. Responsive — hamburger visible y drawer restringido a móvil
   ====================================================================== */

/* ≤ 900px: mostrar hamburger, ocultar nav desktop */
@media (max-width: 900px) {
	.site-nav {
		display: none;
	}
	.site-hamburger {
		display: flex;
	}

	/* Drawer full-screen en móvil: sin panel de imagen */
	.hm-drawer {
		width: 100%;
	}
	.hm-drawer__image {
		display: none;
	}
	.hm-drawer__panel {
		width: 100%;
		flex: 1;
		padding: 1.25rem 1.5rem 2rem;
	}
	.hm-drawer__head {
		margin-bottom: 1.5rem;
	}
	.hm-drawer__nav {
		flex: 1;
	}
	.hm-drawer__foot {
		padding-top: 1.5rem;
	}
	.hm-drawer__foot .hm-drawer__cta {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Drawer: en desktop nunca visible aunque JS lo active */
@media (min-width: 901px) {
	.hm-drawer,
	.hm-drawer-overlay {
		display: none !important;
	}
}

/* ---- How It Works: background image con blur ------------------- */
.hm-how-it-works {
	position: relative;
	overflow: hidden;
}
.hm-how-it-works__bg-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.hm-how-it-works__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(8px);
	transform: scale(1.05); /* evita bordes blancos por el blur */
}
.hm-how-it-works .wp-block-cover__background,
.hm-how-it-works .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}


/* ======================================================================
   OVERRIDES — textos sobre fondos con imagen + fixes de especificidad
   Consolidado en un solo bloque. Siempre al final del archivo.
   ====================================================================== */

/* --- HERO HOME -------------------------------------------------------- */

/* h1 principal: blanco forzado por encima de has-text-color de WP core */
body .home-hero h1 {
	color: #ffffff !important;
	text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}

/* Subtítulo "Fast, stylish...": el color lo decide el bloque en
   patterns/hero-cta.php (textColor: on-dark). No lo forzamos desde aquí.
   Este override forzaba `accent` (naranja) y llevaba tiempo inactivo por una
   llave sin cerrar más arriba; al repararla reaparecía pisando el diseño. */

/* Botón outline "Explore Packages": texto verde sobre fondo blanco */
body .home-hero .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--primary) !important;
	background-color: #ffffff !important;
	border-color: #ffffff !important;
}
body .home-hero .is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255,255,255,0.88) !important;
}

/* --- HOW IT WORKS ----------------------------------------------------- */

/* h2 y h3: blancos */
body .hm-how-it-works h2,
body .hm-how-it-works h3 {
	color: #ffffff !important;
	text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

/* h3: subrayado decorativo blanco */
body .hm-how-it-works h3 {
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.45);
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* Párrafos descriptivos: blanco semitransparente */
body .hm-how-it-works .wp-block-column p:not(.homiture-numeral):not(.homiture-eyebrow) {
	color: rgba(255,255,255,0.88) !important;
}

/* Numerales 01/02/03: el oro (accent) no contrasta sobre la foto de madera.
   Se recolorean SOLO aquí a crema legible + sombra, sin tocar el resto de
   .homiture-numeral del sitio. Para volver al oro: color var(--wp--preset--color--accent).
   Alternativa fría on-brand: color var(--wp--preset--color--cyan). */
body .hm-how-it-works .homiture-numeral {
	color: rgba(255,255,255,0.92) !important;
	text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

/* --- COLLECTION CARDS ------------------------------------------------- */

/* Título: glass blanco translúcido sin inline style */
.collection-card__title {
	color: #ffffff !important;
	text-shadow: 0 1px 8px rgba(0,0,0,0.55);
	background: rgba(255,255,255,0.15);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.3);
	padding: 0.2em 0.65em;
	border-radius: 6px;
	display: inline-block;
}

/* --- ICONOS beneficios ------------------------------------------------ */

.benefit-ico,
.svc-ico {
	color: var(--wp--preset--color--primary) !important;
}
.benefit-ico svg,
.svc-ico svg {
	stroke: var(--wp--preset--color--primary);
}

/* ======================================================================
   16. Guarantee — glass wrap + cards
   ====================================================================== */

/* Glass oscuro que envuelve TODO el contenido de la sección */
.hm-guarantee__wrap-glass {
	background: rgba(0, 0, 0, 0.52) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 20px !important;
}

/* Cada columna-tarjeta */
.hm-guarantee__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 1rem;
}

/* Separador vertical (columna del medio) */
.hm-guarantee__card--mid {
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	border-right: 1px solid rgba(255, 255, 255, 0.15);
}

/* Icono SVG centrado */
.hm-guarantee__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 0.85rem;
}

/* Título — blanco */
.hm-guarantee__title {
	font-size: 0.92rem !important;
	font-weight: 600;
	color: #ffffff !important;
	margin: 0 0 0.3rem !important;
	line-height: 1.35;
}

/* Subtítulo — blanco semitransparente */
.hm-guarantee__sub {
	font-size: 0.8rem !important;
	color: rgba(255, 255, 255, 0.65) !important;
	margin: 0 !important;
}

/* Responsive: stack en móvil */
@media (max-width: 640px) {
	.hm-guarantee__card--mid {
		border-left: none;
		border-right: none;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
		margin: 0.5rem 0;
	}
}

/* ======================================================================
   Scroll reveals — aparición al entrar en viewport
   Tokens en theme.json → settings.custom.motion
   Uso: añadir la clase .homiture-reveal a cualquier bloque/grupo.
        Variante .homiture-reveal--stagger escalona los hijos directos.

   Progressive enhancement: el contenido es visible por defecto. Solo se
   oculta cuando el JS confirma que puede animarlo (.homiture-motion-ready
   en <html>). Si el JS falla o no carga, nada queda invisible.
   ====================================================================== */
.homiture-motion-ready .homiture-reveal {
	opacity: 0;
	transform: translateY( var( --wp--custom--motion--reveal-distance, 28px ) );
	transition:
		opacity var( --wp--custom--motion--reveal-duration, 0.9s ) var( --wp--custom--motion--ease, ease ),
		transform var( --wp--custom--motion--reveal-duration, 0.9s ) var( --wp--custom--motion--ease, ease );
	will-change: opacity, transform;
}

.homiture-motion-ready .homiture-reveal.is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Escalonado de hijos directos: cada uno entra un poco después del anterior */
.homiture-motion-ready .homiture-reveal--stagger > * {
	opacity: 0;
	transform: translateY( var( --wp--custom--motion--reveal-distance, 28px ) );
	transition:
		opacity var( --wp--custom--motion--reveal-duration, 0.9s ) var( --wp--custom--motion--ease, ease ),
		transform var( --wp--custom--motion--reveal-duration, 0.9s ) var( --wp--custom--motion--ease, ease );
}

.homiture-motion-ready .homiture-reveal--stagger.is-revealed > * {
	opacity: 1;
	transform: none;
}

.homiture-motion-ready .homiture-reveal--stagger.is-revealed > *:nth-child(1) { transition-delay: calc( var( --wp--custom--motion--stagger, 80ms ) * 0 ); }
.homiture-motion-ready .homiture-reveal--stagger.is-revealed > *:nth-child(2) { transition-delay: calc( var( --wp--custom--motion--stagger, 80ms ) * 1 ); }
.homiture-motion-ready .homiture-reveal--stagger.is-revealed > *:nth-child(3) { transition-delay: calc( var( --wp--custom--motion--stagger, 80ms ) * 2 ); }
.homiture-motion-ready .homiture-reveal--stagger.is-revealed > *:nth-child(4) { transition-delay: calc( var( --wp--custom--motion--stagger, 80ms ) * 3 ); }
.homiture-motion-ready .homiture-reveal--stagger.is-revealed > *:nth-child(n+5) { transition-delay: calc( var( --wp--custom--motion--stagger, 80ms ) * 4 ); }

@media (prefers-reduced-motion: reduce) {
	.homiture-motion-ready .homiture-reveal,
	.homiture-motion-ready .homiture-reveal.is-revealed,
	.homiture-motion-ready .homiture-reveal--stagger > *,
	.homiture-motion-ready .homiture-reveal--stagger.is-revealed > * {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}
}

/* ======================================================================
   Style / Collection tiles — "Choose your style"
   Imagen a sangre + overlay degradado + nombre/desc/precio/CTA superpuestos
   ====================================================================== */
.estilo-card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background-color: var(--wp--preset--color--primary);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.estilo-card:hover {
	box-shadow: var(--wp--custom--shadow--lg, 0 18px 40px rgba(0, 0, 0, 0.18));
	transform: translateY(-2px);
}
.estilo-card .wp-block-cover__image-background {
	transition: transform 0.6s ease;
	will-change: transform;
}
.estilo-card:hover .wp-block-cover__image-background {
	transform: scale(1.06);
}
.estilo-card .wp-block-cover__inner-container {
	width: 100%;
}
/* Textos superpuestos: siempre blancos sobre el scrim */
.estilo-card .wp-block-heading,
.estilo-card .wp-block-post-title,
.estilo-card .wp-block-post-title a {
	color: #fff !important;
	margin: 0 0 0.28em;
	text-decoration: none;
	transition: color 0.2s ease;
}
.estilo-card p,
.estilo-card .wp-block-post-excerpt {
	color: rgba(255, 255, 255, 0.9);
}
/* Chip de precio */
.estilo-card__price {
	display: inline-block;
	margin: 0.5em 0 0 !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff !important;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	padding: 3px 11px;
}
/* CTA (flecha o "View collection →") en blanco → acento al hover */
.estilo-card .homiture-arrow a,
.estilo-card .wp-block-post-excerpt__more-link {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.estilo-card .homiture-arrow a:hover,
.estilo-card .wp-block-post-excerpt__more-link:hover {
	color: var(--wp--preset--color--accent);
}
/* Hover de la tarjeta: título + CTA toman el oro (accent) a la vez, para que el
   resultado naranja del "View Collection →" también aplique al nombre. */
.estilo-card:hover .wp-block-heading,
.estilo-card:hover .wp-block-post-title,
.estilo-card:hover .wp-block-post-title a,
.estilo-card:hover .homiture-arrow a,
.estilo-card:hover .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--accent) !important;
}
.estilo-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.5em;
}
@media (prefers-reduced-motion: reduce) {
	.estilo-card .wp-block-cover__image-background,
	.estilo-card:hover .wp-block-cover__image-background {
		transition: none;
		transform: none;
	}
	.estilo-card:hover {
		transform: none;
	}
}

/* ======================================================================
   Banda de cabecera con foto — páginas de servicio
   La foto y su encuadre llegan en línea desde inc/hero-media.php (cambian
   en cada visita); aquí vive todo lo que es fijo.
   ====================================================================== */
.hmt-hero-media {
	position: relative;
	/* Sin isolation, el z-index:-1 de los pseudoelementos se escaparía al
	   contexto del <main> y la foto taparía secciones vecinas. */
	isolation: isolate;
	overflow: hidden;
}

/* La foto va en su propio pseudoelemento: así el desenfoque no toca al texto.
   El scale(1.06) tapa el borde translúcido que el blur deja en los cantos. */
.hmt-hero-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--hmt-hero-img);
	background-size: cover;
	background-position: var(--hmt-hero-focus, 50% 50%);
	filter: blur(3px) saturate(1.05);
	transform: scale(1.06);
}

/* Velo en degradado, no plano. Lo que garantiza que el texto se lea es esto,
   no la sombra: una sombra sola falla en cuanto hay una zona clara de la foto
   justo detrás de una letra. El degradado cierra donde vive el texto y abre
   arriba, para que la foto siga leyéndose como foto.

   Opacidades bajadas un 20% respecto a la primera versión (eran 0.70/0.74/0.88):
   la foto se ve bastante más. Medido componiendo el velo sobre la luminancia
   real de las fotos del catálogo, el texto queda en 8.8:1 el H1 y 8.0:1 la
   entradilla — muy por encima del 3.0 y el 4.5 que pide WCAG AA.

   Lo que se ha gastado es el margen para fotos MUY claras: con una casi blanca
   detrás, la entradilla caería a 3.6:1. Ninguna de las actuales se acerca (la
   más clara da 7.3:1), pero si algún día entra al catálogo una terraza a pleno
   sol o una cocina blanca, hay que volver a mirar estos números. Para brillos
   puntuales —una ventana justo detrás de una letra— la red de seguridad es el
   text-shadow de más abajo. */
.hmt-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(31, 42, 40, 0.56) 0%, rgba(31, 42, 40, 0.59) 55%, rgba(31, 42, 40, 0.70) 100%),
		radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.26) 100%);
}

/* Refuerzo, no mecanismo principal. */
.hmt-hero-media h1,
.hmt-hero-media h2 { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 18px rgba(0, 0, 0, 0.30); }
.hmt-hero-media p { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40); }

/* El eyebrow se pinta en el verde de marca por una regla más específica que
   esta. Sobre la foto oscura ese verde se queda en ~2.5:1, así que aquí se
   sube la especificidad con `body` y se pasa a un oro claro (~8:1). */
body .hmt-hero-media .homiture-eyebrow { color: #f4c65a; }

/* Sin foto (catálogo vacío o nombres inexistentes) queda la banda oscura de
   siempre, nunca un hueco. */
.hmt-hero-media { background-color: var(--wp--preset--color--dark); }

@media (prefers-reduced-motion: reduce) {
	.hmt-hero-media::before { transform: none; }
}

/* ======================================================================
   8. Fix: colision de nombre en la paleta ("border") vs. estilos globales
   ====================================================================== */
/* WordPress genera automaticamente, para cada color de la paleta, la regla
   global ".has-{slug}-color { color: ...!important; }" (texto) ademas de
   ".has-{slug}-border-color" (borde). Nuestra paleta tiene una entrada con
   slug "border" (gris "Borde", #e3e0d8) -- el MISMO nombre que la clase
   generica ".has-border-color" que el core agrega a CUALQUIER bloque con
   un color de borde personalizado (venga del slug que venga). Resultado:
   todo bloque que solo pide un borde en "border" (p. ej. las tarjetas
   Mission/Vision de About) hereda tambien el texto en ese gris clarisimo
   por la regla global del core, sin que el bloque pida texto de ningun
   color. Se revierte aqui, salvo que el bloque SI pida texto en ese tono
   (".has-text-color.has-border-color", caso real y distinto). */
.has-border-color:not(.has-text-color) {
	color: inherit !important;
}