/* ===== Best Home Querétaro — tokens del brand kit (claro / oscuro) =====
   Orden de carga (functions.php): variables.css → layout.css → components.css.
   Breakpoints: móvil ≤1023px, escritorio ≥1024px (no pueden ser variables dentro de @media). */
:root{--primary:#283890;--accent:#bf1e2e;--accent-hover:#991825;--text:#6d6e71;--canvas:#f6f6f6;--canvas-a:rgba(246,246,246,.88);--surface:#fff;--pill:#eef0f8;--border:#e0e0e0;--stripe:#f9f9fb;--footer:#2b2b2e;--shadow:0 1px 4px rgba(0,0,0,.08);--ph-ratio:16/10}
/* Proporción de las fotos: --ph-ratio en :root (16/10) controla a la vez las tarjetas del catálogo (.prop-card .pimg) y la ficha (galería, mapa y video). En escritorio la tarjeta usa aspect-ratio:auto (foto lateral). */
:root[data-theme="dark"]{color-scheme:dark;--primary:#7A9BFF;--accent:#D42333;--accent-hover:#B81C2B;--text:#E0E0E0;--canvas:#121212;--canvas-a:rgba(18,18,18,.88);--surface:#1E1E1E;--pill:#282c3e;--border:#2e2e2e;--stripe:#252525;--footer:#18181a;--shadow:0 1px 4px rgba(0,0,0,.4)}

/* Tokens fijos: iguales en claro y oscuro (no se redefinen en [data-theme="dark"]).
   --brand-navy es el azul del logo; a diferencia de --primary no se aclara en modo oscuro. */
:root{
	--brand-navy:#283890;--white:#fff;--on-accent:#fff;--media-bg:#000;
	--footer-text:#d9d9dc;--footer-link:#fff;--footer-border:#55555b;--footer-line:#45454a;--footer-muted:#a5a5ab;
	--star:#e0a100;--glass:rgba(255,255,255,.92);--dot:rgba(255,255,255,.6);--hover-tint:rgba(0,0,0,.08);--overlay:rgba(0,0,0,.45);--overlay-strong:rgba(0,0,0,.9);
	--ztile-gradient:linear-gradient(to top,rgba(16,26,77,.78),rgba(16,26,77,0));--ph-gradient:linear-gradient(135deg,#8e9ad0,var(--brand-navy));
	--shadow-btn:0 1px 4px rgba(0,0,0,.25);--shadow-bar:0 4px 10px -6px rgba(0,0,0,.25);--shadow-form:0 4px 18px rgba(0,0,0,.12);
	--shadow-popover:0 10px 28px rgba(0,0,0,.28);--shadow-menu:0 12px 32px rgba(0,0,0,.2);--shadow-panel:0 12px 32px rgba(0,0,0,.3);
	--shadow-hover:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
	--radius-xs:4px;--radius-sm:6px;--radius:8px;--radius-lg:12px;--radius-pill:999px;
	--container:1200px;--container-narrow:960px;--container-text:760px;
	/* --gutter: margen lateral general (header, footer, menú). --gutter-sm: catálogo y ficha en móvil. */
	--gutter:20px;--gutter-sm:16px;
	/* Altura del header: de ella dependen los elementos sticky y el scroll-margin de la ficha. */
	--header-h:76px;
	--blog-ratio:16/10;
}
@media (min-width:1024px){:root{--header-h:104px}}