/*! DHAB Design System v2 · capa de adopción · 2026-09-23
 * Fuente de los tokens: design system "DHAB" en Claude (tokens.json v2).
 * Carga después de styles.css (Hyva/dhab/Magento_Theme/layout/default_head_blocks.xml).
 * Temporal: el build de Tailwind del tema no es reproducible hoy (ver implementacion-hyva.md). Cuando lo sea,
 * estas reglas pasan a tailwind.config.js y components/button.css y se retiran los !important de ambos lados.
 * Rollback: quitar <css src="css/dhab-ds.css"/> del layout y limpiar caché layout + full_page.
 */
:root{
--bosque-050:#f1f6f3;--bosque-100:#dde8e1;--bosque-200:#bbd1c4;--bosque-300:#8fb39e;--bosque-400:#5c8a72;--bosque-500:#3d6c54;--bosque-600:#2d5743;--bosque-700:#254336;--bosque-800:#1c3329;--bosque-900:#122620;--bosque-950:#0a1813;
--ink-050:#f7f7f6;--ink-100:#ededeb;--ink-200:#d9d8d4;--ink-300:#b4b2ab;--ink-400:#8a8881;--ink-500:#5e5d57;--ink-600:#3d3c38;--ink-700:#25241f;--ink-800:#18171a;--ink-900:#0e0d0c;--ink-950:#050504;
--sierra-050:#fafaf4;--sierra-100:#f5f1e6;--sierra-200:#e8e0c9;--sierra-300:#d3cdab;--sierra-400:#c4bb91;--sierra-500:#b7b597;--sierra-600:#8d8a72;--sierra-700:#66634f;
--cobre-400:#e57b3f;--cobre-500:#d65f24;--cobre-600:#b94a1d;--coral-500:#e83333;--coral-600:#c80400;--coral-700:#a80b0b;--white:#fff;
--surface:var(--white);--surface-soft:var(--sierra-050);--surface-warm:var(--sierra-100);--surface-brand:var(--bosque-700);
--text:var(--ink-900);--text-muted:var(--ink-500);--line:var(--ink-200);--line-control:var(--ink-400);
--primary:var(--bosque-700);--primary-hover:var(--bosque-600);--primary-active:var(--bosque-800);--on-primary:var(--white);
--secondary:var(--sierra-500);--on-secondary:var(--ink-900);--accent:var(--cobre-600);--on-accent:var(--white);
--sale:var(--coral-600);--on-sale:var(--white);--success:var(--bosque-500);--warning:var(--cobre-600);--danger:var(--coral-600);--focus:var(--bosque-500);
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-pill:9999px;
--shadow-card:0 1px 2px rgba(14,13,12,.06),0 4px 12px rgba(14,13,12,.06);--shadow-overlay:0 12px 32px rgba(14,13,12,.18);
--font-sans:proxima-nova,Arial,sans-serif}

/* 1 · Foco visible. styles.css lo elimina en .btn y en los campos (WCAG 2.4.7). */
html body :is(a,button,summary,[role=button],[tabindex]):focus-visible,
html body :is(.btn,.pagebuilder-button-primary,.pagebuilder-button-secondary):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
html body :is([type=text],[type=email],[type=search],[type=tel],[type=password],[type=number],[type=url],[type=date],select,textarea,.form-input,.form-select,.form-textarea,.input-light):focus{border-color:var(--focus);--tw-ring-color:var(--focus)}
html body :is([type=text],[type=email],[type=search],[type=tel],[type=password],[type=number],[type=url],[type=date],select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:1px}
html body :is([type=checkbox],[type=radio]):focus{--tw-ring-color:var(--focus)}
html body :is(.ring-primary,.hover\:ring-primary:hover){--tw-ring-color:var(--focus)}
html body .ring-primary\/50{--tw-ring-color:rgba(61,108,84,.5)}
html body .ring-primary\/75{--tw-ring-color:rgba(61,108,84,.75)}

/* 2 · Botones. Hover del primario: bosque-600 con texto blanco (antes #6b9a7a con texto negro, 3.22:1). */
html body .btn-primary:hover,
html body .actions-toolbar .primary button:hover,
html body :is(a,button,div).pagebuilder-button-primary:hover{background-color:var(--primary-hover)!important;color:var(--on-primary)}
html body .btn-primary:active,
html body :is(a,button,div).pagebuilder-button-primary:active{background-color:var(--primary-active)!important}
html body .btn-secondary:hover,
html body :is(a,button,div).pagebuilder-button-secondary:hover{background-color:var(--sierra-300)!important;color:var(--on-secondary)}
/* Newsletter: botón blanco sobre fondo blanco → primario. */
html body footer .subscribe .btn-primary{background-color:var(--primary)!important;color:var(--on-primary)}
html body footer .subscribe .btn-primary:hover{background-color:var(--primary-hover)!important;color:var(--on-primary)}

/* 3 · Menú: hover naranja #ff6800 (2.9:1) → accent (cobre-600, 5.17:1). */
html body .navigation .snowdog-topmenu-desktop .group.level01 a:hover{color:var(--accent)!important}

/* 4 · Precio anterior: #bababa (1.94:1) → text-muted (6.61:1). */
html body .block-products-list .card .old-price .price,
html body .products-grid .card .old-price .price,
html body.catalog-product-view .product-info-main .old-price .price{color:var(--text-muted)}

/* 5 · Descuento: coral sólo significa rebaja. */
html body .percent{background:var(--sale);color:var(--on-sale)}
html body .bg-red,html body.catalog-product-view .product-info-main .bg-red{background:var(--sale)}
/* Precio rebajado en sale (tarjeta y ficha), sólo cuando hay precio anterior. */
html body [class*=product-id-]:has(> .old-price) > .price-box .price,
html body .product-info-main .price-box:has(.old-price) .final-price .price{color:var(--sale)}

/* 6 · Enlaces que el tema pinta en azul Tailwind. */
html body .text-primary-lighter{color:var(--primary)}
html body .text-primary-lighter:hover{color:var(--primary-hover)}

/* 7 · SectionHeader: eyebrow + h2 centrado (home y landings). */
.dh-sechead{text-align:center;max-width:720px;margin:0 auto var(--space-10);padding:0 var(--space-4)}
.dh-sechead-eyebrow{margin:0 0 var(--space-2);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
html body .dh-sechead-title{margin:0;font-size:36px;line-height:40px;font-weight:400;color:var(--text);text-wrap:balance}
.dh-sechead-lead{margin:var(--space-3) auto 0;max-width:640px;color:var(--text-muted)}
@media (max-width:639px){html body .dh-sechead-title{font-size:30px;line-height:36px}.dh-sechead{margin-bottom:var(--space-8)}}

/* 8 · TrustBand: promesas de la tienda bajo el hero. */
.dh-trust{background:var(--surface-warm);color:var(--text)}
.dh-trust-list{list-style:none;margin:0 auto;padding:var(--space-5) var(--space-6);max-width:1280px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4) var(--space-6)}
.dh-trust-item{display:flex;align-items:center;gap:var(--space-3);font-size:14px;line-height:20px;margin:0}
.dh-trust-item strong{display:block;font-size:16px;line-height:22px;font-weight:700;color:var(--text)}
.dh-trust-text{color:var(--text-muted)}
.dh-trust-icon{flex:none;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--surface);color:var(--primary);display:flex;align-items:center;justify-content:center}
.dh-trust a{color:inherit;text-decoration:none}
.dh-trust a:hover strong{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){.dh-trust-list{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-4)}}
@media (max-width:479px){.dh-trust-item{align-items:flex-start;font-size:13px;line-height:18px}.dh-trust-item strong{font-size:14px;line-height:20px}.dh-trust-icon{width:32px;height:32px}.dh-trust-icon svg{width:18px;height:18px}}

/* 9 · Home móvil: los 4 banners promocionales en carrusel con asomo (antes 4 cuadros apilados, ≈1,360 px de scroll). */
@media (max-width:767px){
#html-body .cat-gen .pagebuilder-column-line{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#html-body .cat-gen .pagebuilder-column-line::-webkit-scrollbar{display:none}
#html-body .cat-gen .pagebuilder-column{flex:0 0 78%!important;width:78%!important;max-width:78%;scroll-snap-align:center;margin:0!important}
#html-body .cat-gen .pagebuilder-banner-wrapper,#html-body .cat-gen .pagebuilder-overlay{min-height:0!important;aspect-ratio:1/1}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}