@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   VARIABLES
============================================================ */
:root {
    /* =========================================================
       Paleta extraida del logo Komorebi Anime
       =========================================================
       1. #3D2589  Violeta profundo  — contorno y capucha
       2. #6B55C0  Violeta medio     — interior capucha / sombras
       3. #0FA3DC  Azul cyan         — ojos y letras "komorebi"
       4. #C8781A  Naranja           — orejas del zorro
       5. #8C4E0A  Naranja oscuro    — sombra interior orejas
       6. #F07085  Rosa blush        — mejillas del personaje
       7. #D4CEEC  Lavanda suave     — capa interior / cara
       8. #1C1830  Tinta oscura      — contornos y texto "ANIME"
    ========================================================= */

    /* Violeta */
    --purple:        #3D2589;
    --purple-dark:   #2D1B70;
    --purple-deeper: #1E1050;
    --purple-soft:   #EDEAFF;
    --purple-mid:    #6B55C0;
    /* Azul cyan */
    --blue:          #0FA3DC;
    --blue-dark:     #0880B0;
    --blue-soft:     #E0F4FF;
    /* Naranja */
    --orange:        #C8781A;
    --orange-dark:   #8C4E0A;
    --orange-soft:   #FFF0E0;
    /* Rosa blush */
    --pink:          #F07085;
    --pink-soft:     #FDE8EC;
    /* Lavanda */
    --lavender:      #D4CEEC;
    --lavender-soft: #F2F0FF;
    /* Amarillo de acento (cart, badges) */
    --yellow:        #FFD600;
    --yellow-dark:   #E6BE00;
    --yellow-soft:   #121928;
    /* Neutros */
    --ink:           #1C1830;
    --ink-soft:      #23262b;
    --muted:         #9CA3AF;
    --white:         #FFFFFF;
    --bg:            #F5F4FF;
    --surface:       #FFFFFF;
    --border:        #E2DEEF;
    --delivery-bg:   #E0F4FF;
    --delivery-color:#065F77;
    --shadow-xs:     0 1px 4px rgba(28,24,48,0.08);
    --shadow-sm:     0 4px 12px rgba(28,24,48,0.12);
    --shadow-md:     0 8px 24px rgba(61,37,137,0.22);
    --radius-sm:     10px;
    --radius-md:     16px;
    --radius-lg:     24px;
    --radius-pill:   999px;
    --container:     1240px;
    --transition:    220ms ease;
    --font:          'Inter', system-ui, sans-serif;
    /* Aliases para compatibilidad entre componentes */
    --text:          var(--ink-soft);   /* #4B5563 */
    --text-dark:     var(--ink);        /* #1C1830 */
    --gray:          var(--muted);      /* #9CA3AF */
    --radius:        var(--radius-md);  /* 16px    */
    --shadow-lg:     0 16px 40px rgba(61,37,137,0.28);
}

/* ============================================================
   RESET & BASE
============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; font-size: 16px }
body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(15,163,220,.12), transparent 24%),
        radial-gradient(circle at top right, rgba(107,85,192,.16), transparent 28%),
        linear-gradient(180deg, #f8f7ff 0%, #f2f0ff 36%, #f6f7fb 100%);
}
img,picture,video,canvas,svg { display: block; max-width: 100% }
input,button,textarea,select { font: inherit }
a { color: inherit; text-decoration: none; transition: color var(--transition), opacity var(--transition) }
button { cursor: pointer; border: 0; background: transparent }
ul,ol { list-style: none }
h1,h2,h3,h4,h5,h6 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; color: var(--ink) }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem) }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem) }
h3 { font-size: clamp(1.25rem, 2vw, 1.7rem) }
h4 { font-size: 1.1rem }
p  { margin: 0 0 .75em; color: var(--ink-soft) }
::selection { background: var(--purple); color: #fff }

/* ============================================================
   LAYOUT
============================================================ */
.page-shell { min-height: 100vh; display: flex; flex-direction: column; padding-top: 134px; } /* 70px header + ~48px search */
@media (max-width: 768px) { .page-shell { padding-top: 134px; } }
/* En checkout no hay barra de búsqueda: solo compensar el header */
.page-shell.checkout-mode { padding-top: 70px; }
@media (max-width: 768px) { .page-shell.checkout-mode { padding-top: 60px; } }
.page-shell.checkout-mode .site-header__bar { grid-template-columns: minmax(0, 1fr) auto; }
.page-shell.checkout-mode .site-header {
    border-bottom-color: transparent;
    box-shadow: none;
}
.page-shell.checkout-page { padding-top: 70px; }
@media (max-width: 768px) { .page-shell.checkout-page { padding-top: 64px; } }
.container  { width: min(calc(100% - 2rem), var(--container)); margin: 0 auto }
.section    { padding: 3rem 0 }
.section-sm { padding: 2rem 0 }
.flex           { display: flex; gap: 1rem }
.flex-wrap      { flex-wrap: wrap }
.items-center   { align-items: center }
.justify-between{ justify-content: space-between }
.text-center    { text-align: center }

/* ============================================================
   HEADER
============================================================ */
.header-sticky-unit {
    /* placeholder para mantener espacio arriba del contenido */
    height: 0;
}
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transform: translateY(0);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.site-header.is-collapsed {
    transform: translateY(-110%);
}
/* La barra dorada se fija justo donde queda el header */
.search-section {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100;
    top: 70px;
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(140,78,10,.25);
    transform: translateY(0);
    opacity: 1;
    padding: .75rem 0;
    transition: top .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
/* bajando: sube al top porque la blanca se fue */
.search-section.search-visible {
    top: 0;
}
/* subiendo (pero no en el top): se oculta */
.search-section.search-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}
.site-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    min-height: 70px;
}
.site-header__bar .header-actions {
    justify-self: end;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--ink);
    flex-shrink: 0;
}
.brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 4px 12px rgba(15,163,220,.15);
    padding: 5px;
    flex-shrink: 0;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
    color: var(--white);
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(15,163,220,.35);
    flex-shrink: 0;
}
.site-nav { display: flex; align-items: center; gap: .25rem }
.nav-link {
    padding: .45rem 1rem;
    border-radius: var(--radius-pill);
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background var(--transition), color var(--transition);
}
.nav-link:hover     { color: var(--purple); background: var(--lavender-soft) }
.nav-link.is-active { background: var(--purple); color: var(--white) }

.header-actions { display: flex; align-items: center; gap: .75rem }
.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--purple);
    color: var(--purple);
    font-size: 1.3rem;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}
.cart-btn:hover { background: var(--purple); color: var(--white) }
.cart-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--yellow);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    line-height: 1;
}
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px; height: 42px;
    border-radius: var(--radius-sm);
    background: var(--purple-soft);
}
.mobile-menu-toggle span {
    display: block;
    width: 22px; height: 2px;
    border-radius: 2px;
    background: var(--purple);
    transition: transform var(--transition), opacity var(--transition);
}

/* ============================================================
   SEARCH BAR
============================================================ */
/* Naranja de las orejas del zorro — logo Komorebi */
.search-form {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(140,78,10,.30);
    max-width: 700px;
    margin: 0 auto;
}
.search-form__input {
    flex: 1;
    padding: .45rem 1rem;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: .9rem;
    outline: none;
}
.search-form__input::placeholder { color: var(--muted) }
.search-form__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: var(--white);
    color: var(--orange-dark);
    font-size: 1rem;
    flex-shrink: 0;
    transition: color var(--transition);
}
.search-form__btn:hover { color: var(--orange) }

/* ============================================================
   HERO
============================================================ */
.hero-section { padding: 1.4rem 0 1.92rem }
.hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
    gap: 1rem;
    align-items: stretch;
}
.hero-shell > * {
    min-height: 100%;
}
.hero-shell--single {
    grid-template-columns: 1fr;
}
.hero-card {
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 55%, var(--purple-deeper) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    padding: clamp(1.92rem, 3.2vw, 3.2rem) 1.6rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(46, 26, 109, .24);
}
.hero-card--with-banner {
    padding-top: 1.04rem;
}
.hero-banner-slot--horizontal,
.hero-banner-slot--vertical {
    display: none;
    position: relative;
    z-index: 1;
}
.hero-banner-slot--horizontal {
    margin-bottom: 1rem;
}
.hero-banner-slot--vertical {
    min-width: 0;
    align-self: start;
    max-height: calc(100vh - 200px);
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.banner-layout--landscape .hero-banner-slot--horizontal {
    display: block;
}
.banner-layout--portrait .hero-banner-slot--vertical { display: block }
.banner-layout--portrait .hero-shell {
    grid-template-columns: minmax(0, 1.35fr) minmax(224px, .60fr);
    align-items: start;
}
.banner-layout--portrait [data-hero-offer-card] {
    display: none;
}
/* Ocultar offer-card por defecto cuando hay banners (evita que infle el grid antes de que JS clasifique la orientación) */
.hero-card--with-banner [data-hero-offer-card] {
    display: none;
}
/* Mostrarlo solo si el banner resultó ser landscape */
.banner-layout--landscape [data-hero-offer-card] {
    display: flex;
}
.hero-card--main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-card::before {
    content: '';
    position: absolute;
    top: -90px; right: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.15) 0%, rgba(255,255,255,.03) 55%, transparent 70%);
    pointer-events: none;
}
.hero-card::after {
    content: '';
    position: absolute;
    bottom: -120px; left: -70px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15,163,220,.2) 0%, rgba(15,163,220,.04) 58%, transparent 72%);
    pointer-events: none;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    color: var(--white);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
.hero-card h1 {
    color: var(--white);
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: 900;
    margin-bottom: .6rem;
    position: relative; z-index: 1;
    max-width: 10ch;
}
.hero-card .hero-sub {
    color: rgba(255,255,255,.82);
    font-size: .88rem;
    max-width: 520px;
    margin: 0 0 1rem;
    position: relative; z-index: 1;
}
.hero-proof-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .96rem;
    position: relative;
    z-index: 1;
}
.hero-proof-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .44rem .72rem;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    font-size: .74rem;
    font-weight: 700;
}
.hero-proof-pill i { color: var(--yellow); }
.hero-actions {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .85rem;
    position: relative;
    z-index: 1;
}
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .68rem 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--purple);
    font-weight: 800;
    font-size: .8rem;
    box-shadow: 0 12px 30px rgba(19, 12, 51, .22);
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative; z-index: 1;
    border: none;
}
.btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    color: var(--purple);
}
.btn-hero--secondary {
    background: rgba(255,255,255,.1);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-hero--secondary:hover {
    color: var(--white);
    background: rgba(255,255,255,.14);
}
.hero-highlights {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: .4rem;
    margin-top: 1.2rem;
    position: relative;
    z-index: 1;
}
.hero-highlight {
    flex: 1;
    min-width: 0;
    padding: .8rem .6rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 100%);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}
.hero-highlight strong {
    display: block;
    color: var(--white);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: .28rem;
}
.hero-highlight span {
    color: rgba(255,255,255,.76);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.hero-offer-card {
    background: linear-gradient(180deg, #fff 0%, #f8f4ff 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: 0 18px 42px rgba(36, 24, 78, .14);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    height: 100%;
}
.hero-banner-card {
    background: linear-gradient(180deg, #fff 0%, #f8f4ff 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: 0 18px 42px rgba(36, 24, 78, .16);
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.hero-banner-card--stage {
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    padding: 1.15rem;
    border-color: rgba(212,206,236,.85);
}
.hero-banner-card--hero {
    padding: 1.1rem;
}
.hero-banner-slot--vertical .hero-banner-card--hero {
    padding: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.hero-banner-slot--vertical,
.hero-banner-slot--vertical .hero-banner-card--hero {
    height: 100%;
}
.hero-banner-track {
    position: relative;
    min-height: 100%;
}
.hero-banner-slide {
    display: none;
    flex-direction: column;
    gap: .85rem;
}
.hero-banner-slide.is-active {
    display: flex;
}
.hero-banner-card--stage .hero-banner-slide.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(220px, .6fr);
    align-items: stretch;
    gap: 1rem;
}
.hero-banner-card--hero .hero-banner-slide.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, .72fr);
    align-items: stretch;
    gap: 1rem;
}
.hero-banner-card--stage .hero-banner-slide.is-active.is-portrait {
    grid-template-columns: minmax(280px, .72fr) minmax(260px, .95fr);
}
.hero-banner-slot--vertical .hero-banner-card--hero .hero-banner-slide.is-active,
.hero-banner-slot--vertical .hero-banner-slide.is-active.is-portrait,
.hero-banner-slot--vertical .hero-banner-slide.is-active.is-landscape {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-height: 100%;
}
.hero-banner-slide__media {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, var(--blue-soft), var(--lavender-soft));
    box-shadow: 0 10px 24px rgba(61,37,137,.12);
}
.hero-banner-slide.is-portrait .hero-banner-slide__media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.82) 0%, rgba(255,255,255,.3) 28%, rgba(224,244,255,.95) 100%),
        linear-gradient(135deg, var(--blue-soft), var(--lavender-soft));
}
.hero-banner-slide__media picture,
.hero-banner-slide__media img {
    display: block;
    width: 100%;
}
.hero-banner-slide__media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.hero-banner-card--stage .hero-banner-slide__media img {
    aspect-ratio: 16 / 6;
    min-height: 280px;
}
.hero-banner-card--hero .hero-banner-slide__media img {
    aspect-ratio: 16 / 7;
    min-height: 240px;
}
.hero-banner-slot--vertical .hero-banner-slide__media img {
    aspect-ratio: auto;
    min-height: 100%;
    height: 100%;
}
.hero-banner-slide.is-portrait .hero-banner-slide__media picture {
    width: auto;
    max-width: 100%;
}
.hero-banner-slide.is-portrait .hero-banner-slide__media img {
    width: auto;
    max-width: 100%;
    height: min(420px, 55vw);
    min-height: 0;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 16px 28px rgba(28,24,48,.16));
}
.hero-banner-slide__body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.hero-banner-card--stage .hero-banner-slide__body {
    justify-content: center;
    padding: .6rem .35rem;
}
.hero-banner-card--hero .hero-banner-slide__body {
    justify-content: center;
    padding: .55rem .35rem;
}
.hero-banner-slide.is-portrait .hero-banner-slide__body {
    align-self: center;
}
.hero-banner-slot--vertical .hero-banner-slide__body {
    align-self: stretch;
    padding: 0;
    gap: .35rem;
}
.hero-banner-slot--vertical .hero-banner-slide__body h3 {
    font-size: 1.2rem;
}
.hero-banner-slot--vertical .hero-banner-slide__copy {
    max-width: none;
    font-size: .92rem;
}
.hero-banner-slot--vertical .hero-banner-track {
    height: 100%;
}
.hero-banner-slot--vertical .hero-banner-card--hero {
    display: flex;
}
.hero-banner-slot--vertical .hero-banner-card--hero .hero-banner-track {
    display: flex;
    flex: 1;
}
.hero-banner-slot--vertical .hero-banner-slide {
    width: 100%;
}
.hero-banner-slot--vertical .hero-banner-slide__media {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
}
.hero-banner-slot--vertical .hero-banner-slide__media picture,
.hero-banner-slot--vertical .hero-banner-slide__media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center top;
}
.hero-banner-slot--vertical .hero-banner-slide.is-portrait .hero-banner-slide__media {
    padding: .65rem;
}
.hero-banner-slot--vertical .hero-banner-slide.is-portrait .hero-banner-slide__media img {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
}
.hero-banner-slide__eyebrow {
    margin: 0;
    color: var(--orange-dark);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.hero-banner-slide__body h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}
.hero-banner-slide__copy {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.5;
    max-width: 26ch;
}
.hero-banner-slide__body .btn {
    align-self: flex-start;
    margin-top: .2rem;
}
.hero-banner-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.hero-banner-slot--vertical .hero-banner-controls {
    margin-top: auto;
    width: 100%;
    padding-top: .9rem;
    padding-inline: 0;
    transform: none;
    justify-content: space-between;
    align-items: center;
}
.hero-banner-slot--vertical .hero-banner-control {
    width: 2.75rem;
    height: 2.75rem;
}
.hero-banner-card--stage .hero-banner-controls {
    padding-top: .25rem;
}
.hero-banner-control {
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.hero-banner-control:hover {
    transform: translateY(-1px);
    border-color: var(--purple);
    box-shadow: var(--shadow-xs);
}
.hero-banner-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: 1;
}
.hero-banner-dot {
    width: .7rem;
    height: .7rem;
    border: none;
    border-radius: 999px;
    background: #d7d0ee;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition);
}
.hero-banner-dot.is-active {
    background: var(--purple);
    transform: scale(1.1);
}
.hero-banner-dot:focus-visible,
.hero-banner-control:focus-visible {
    outline: 2px solid rgba(108, 99, 255, .35);
    outline-offset: 2px;
}
.hero-offer-card__eyebrow {
    margin: 0;
    color: var(--orange-dark);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.hero-offer-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, var(--blue-soft), var(--lavender-soft));
}
.hero-offer-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-offer-card__body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.hero-offer-card__meta {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.hero-offer-card__body h3 {
    margin: 0;
    font-size: 1.3rem;
}
.hero-offer-card__price {
    margin: 0;
    color: var(--purple);
    font-size: 1.5rem;
    font-weight: 900;
}
.hero-offer-card__copy {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.5;
}
.hero-offer-card__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .4rem;
}
.hero-offer-card__actions .btn {
    flex: 1;
    justify-content: center;
}
.home-offers-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: .8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .15rem;
    margin: 0;
    scrollbar-width: none;
}
.home-offers-strip::-webkit-scrollbar { display: none }
.home-offers-showcase {
    margin-top: 1.15rem;
    padding: 1.15rem;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(248,244,255,.88) 100%);
    border: 1px solid rgba(226,222,239,.82);
    box-shadow: 0 18px 44px rgba(28,24,48,.08);
}
.home-offers-showcase__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.home-offers-slider {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    margin-top: 1rem;
}
.home-offers-slider__control {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid rgba(226,222,239,.92);
    background: rgba(255,255,255,.96);
    color: var(--purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(28,24,48,.08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-offers-slider__control:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(28,24,48,.12);
    border-color: rgba(107,85,192,.38);
}
.home-offer-pill {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,244,255,.98) 100%);
    border: 1px solid rgba(226,222,239,.88);
    box-shadow: 0 10px 24px rgba(28,24,48,.08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    scroll-snap-align: start;
    min-height: 100%;
    user-select: none;
}
.home-offer-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--orange);
}
.home-offer-pill.is-priority {
    border-color: rgba(200,120,26,.34);
    box-shadow: 0 14px 30px rgba(200,120,26,.12);
}
.home-offer-pill--featured {
    border-color: rgba(61,37,137,.22);
    background: linear-gradient(180deg, rgba(241,237,255,.98) 0%, rgba(255,255,255,.98) 100%);
}
.home-offer-pill__badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: var(--radius-pill);
    background: var(--orange-soft);
    color: var(--orange-dark);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.home-offer-pill__title {
    color: var(--ink);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.3;
}
.home-offer-pill__price {
    color: var(--purple);
    font-size: 1rem;
    font-weight: 900;
}
.quick-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    align-items: stretch;
    margin-top: 1.15rem;
}
.quick-link-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: .82rem 1rem;
    user-select: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(245,242,255,.92) 100%);
    color: var(--ink);
    border: 1px solid rgba(226,222,239,.9);
    box-shadow: 0 8px 20px rgba(28,24,48,.08);
    font-size: .88rem;
    font-weight: 700;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    text-align: center;
}
.quick-link-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--blue);
}

/* ============================================================
   HOME INTENT STRIP
============================================================ */
.home-intent-strip {
    padding: .55rem 0 2.1rem;
    background: linear-gradient(180deg, rgba(212,206,236,.2) 0%, rgba(245,244,255,0) 100%);
}
.home-intent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.home-intent-card {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-height: 100%;
    padding: 1.4rem 1.35rem;
    user-select: none;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,244,255,.96) 100%);
    border: 1px solid rgba(226,222,239,.95);
    box-shadow: 0 16px 36px rgba(28,24,48,.08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-intent-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 42px rgba(61,37,137,.14);
    border-color: var(--purple-mid);
}
.home-intent-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--orange-soft), var(--lavender-soft));
    color: var(--purple);
    font-size: 1.3rem;
}
.home-intent-card strong {
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.25;
}
.home-intent-card p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* ============================================================
   FEATURES STRIP
============================================================ */
.features-section {
    background: transparent;
    border-bottom: 0;
    padding: .2rem 0 2rem;
}
.features-section .container {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(226,222,239,.8);
    border-radius: 28px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 18px 42px rgba(28,24,48,.07);
    backdrop-filter: blur(10px);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    min-height: 100%;
    padding: 1rem 1.05rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(247,244,255,.78) 100%);
    border: 1px solid rgba(226,222,239,.65);
}
.feature-icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
    font-size: 1.4rem;
    color: var(--purple);
    flex-shrink: 0;
}
.feature-item__text h5 { font-size: .98rem; font-weight: 800; color: var(--ink); margin: 0 0 .2em }
.feature-item__text p  { font-size: .9rem; line-height: 1.55; color: var(--muted); margin: 0 }

/* ============================================================
   SECTION HEADING
============================================================ */
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.65rem;
    gap: 1rem;
}
.section-heading h2 { margin: 0; letter-spacing: -.03em }
.section-lead {
    max-width: 620px;
    margin: .55rem 0 0;
    font-size: .98rem;
    color: var(--ink-soft);
}
.eyebrow {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--purple);
    margin-bottom: .4em;
}

/* ============================================================
   PRODUCT GRID
============================================================ */
.products-section { background: transparent; padding: 2.2rem 0 3rem }
.products-section .container,
.categories-section .container,
.brands-section .container {
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(226,222,239,.82);
    border-radius: 30px;
    padding: 1.5rem;
    box-shadow: 0 20px 44px rgba(28,24,48,.07);
    backdrop-filter: blur(10px);
}
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem }
.product-grid.is-list {
    grid-template-columns: 1fr;
    gap: .85rem;
}

.product-card {
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,244,255,.94) 100%);
    border: 1px solid rgba(226,222,239,.88);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(28,24,48,.08);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.product-card:hover { box-shadow: 0 22px 42px rgba(61,37,137,.16); transform: translateY(-5px); border-color: rgba(107,85,192,.34) }
.product-grid.is-list .product-card {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    align-items: stretch;
}

.product-card__img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #FAFAFA;
    overflow: hidden;
    display: block;
    color: inherit;
    text-decoration: none;
}
.product-card__img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}
.product-card:hover .product-card__img-wrap img { transform: scale(1.05) }
.product-grid.is-list .product-card__img-wrap {
    aspect-ratio: auto;
    min-height: 220px;
    height: 100%;
}
.product-card__placeholder {
    width: 100%; height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
    font-size: 2.4rem;
    color: var(--purple);
}
.product-card__cart-btn {
    position: absolute;
    bottom: 10px; right: 10px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
    transition: transform var(--transition), background var(--transition);
    z-index: 2;
    border: none;
    cursor: pointer;
}
.product-card__cart-btn:hover { background: var(--yellow-dark); transform: scale(1.1) }

.product-card__body {
    padding: .75rem .85rem .9rem;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);
}
.product-grid.is-list .product-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.1rem;
}
.product-card__meta {
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: .35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-card__name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: .45rem;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
}
.product-grid.is-list .product-card__name {
    font-size: 1rem;
    line-height: 1.3;
    min-height: 0;
    max-width: 32ch;
}
.product-card__price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--purple);
    margin-bottom: .35rem;
}
.product-grid.is-list .product-card__price {
    font-size: 1.15rem;
}
.product-card__delivery {
    display: inline-block;
    padding: .28rem .65rem;
    border-radius: var(--radius-pill);
    background: var(--delivery-bg);
    color: var(--delivery-color);
    font-size: .73rem;
    font-weight: 600;
}

/* ============================================================
   CATEGORIES
============================================================ */
.categories-section { padding: 2.7rem 0; background: transparent }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem }
.category-card {
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,244,255,.94) 100%);
    border: 1px solid rgba(226,222,239,.88);
    border-radius: 22px;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(28,24,48,.07);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.category-card:hover { border-color: var(--blue); box-shadow: 0 20px 38px rgba(15,163,220,.16); transform: translateY(-4px) }
.category-card__emoji { font-size: 2.8rem; display: block; margin-bottom: .75rem }
.category-card__icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
    font-size: 1.8rem;
    color: var(--purple);
    margin: 0 auto .9rem;
}
.category-card h4 { font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: .25rem }
.category-card p  { font-size: .82rem; color: var(--muted); margin: 0 }
.category-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .85rem;
    color: var(--purple);
    font-size: .82rem;
    font-weight: 700;
}

/* ============================================================
   BRANDS
============================================================ */
.brands-section { background: transparent; padding: 2rem 0 3rem }
.brand-strip    { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center }
.brand-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.15rem;
    border: 1px solid rgba(226,222,239,.9);
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,244,255,.95) 100%);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-soft);
    box-shadow: 0 8px 18px rgba(28,24,48,.06);
    transition: border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.brand-pill:hover { border-color: var(--blue); color: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 16px 28px rgba(15,163,220,.12) }

/* ============================================================
   WHATSAPP FLOAT
============================================================ */
.whatsapp-float {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 95;
    width: 56px;
    height: 56px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #07c84e;
    color: #fff;
    box-shadow: 0 10px 28px rgba(37, 211, 102, .35);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 34px rgba(37, 211, 102, .42);
    background: #1ebe5b;
}
.whatsapp-float i {
    font-size: 1.6rem;
}

/* Botones sociales footer */
.footer-social-btn {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    font-size: 1rem;
    transition: background .2s, transform .2s;
    text-decoration: none;
}
.footer-social-btn:hover {
    background: rgba(255,255,255,.22);
    transform: translateY(-2px) scale(1.12);
}

/* ============================================================
   MOBILE DRAWER
============================================================ */
/* ============================================================
   MOBILE DRAWER
============================================================ */
.mobile-drawer { display: none; position: fixed; inset: 0; z-index: 1000 }
.mobile-drawer.is-open { display: block }
.mobile-drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.mobile-drawer__panel {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: min(320px, 92vw);
    background: #1a1040;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(0,0,0,.3);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.mobile-drawer.is-open .mobile-drawer__panel {
    transform: translateX(0);
}
.mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.2rem .8rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.mobile-drawer__close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: background .2s;
}
.mobile-drawer__close:hover { background: rgba(255,255,255,.2); }
/* Contenedor de screens (paneles) */
.drawer-screens {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.drawer-screen {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 1rem 1.2rem 2rem;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
    transform: translateX(0);
    opacity: 1;
}
.drawer-screen--hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.drawer-screen--out {
    transform: translateX(-40%);
    opacity: 0;
    pointer-events: none;
}
.drawer-back {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: .3rem 0 .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: color .2s;
}
.drawer-back:hover { color: #fff; }
.drawer-screen__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-nav { display: flex; flex-direction: column; gap: .2rem; }
.mobile-nav__link, .mobile-nav__drill {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: .75rem;
    font-weight: 600;
    font-size: .95rem;
    color: rgba(255,255,255,.75);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .18s, color .18s;
    text-decoration: none;
}
.mobile-nav__link:hover,
.mobile-nav__drill:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.mobile-nav__link.is-active {
    background: rgba(108,71,255,.25);
    color: #a78bfa;
}
.mobile-nav__arrow {
    margin-left: auto;
    font-size: .75rem;
    opacity: .5;
}
.mobile-nav__drill span { flex: 1; }
body.menu-open { overflow: hidden }

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
    background: var(--ink);
    color: rgba(255,255,255,.75);
    padding: 3rem 0 1.5rem;
    margin-top: auto;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
.site-footer .brand      { color: var(--white) }
.site-footer .brand-mark { background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%) }
.site-footer p    { color: rgba(255,255,255,.6); font-size: .88rem; margin-top: .75rem; line-height: 1.55 }
.site-footer h5   { color: var(--white); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem }
.footer-links     { display: flex; flex-direction: column; gap: .55rem }
.footer-links li  { font-size: .88rem; color: rgba(255,255,255,.6); line-height: 1.45; display: flex; align-items: baseline; gap: .3rem }
.footer-links a   { font-size: .88rem; color: rgba(255,255,255,.6); transition: color var(--transition) }
.footer-links a:hover { color: var(--white) }
.footer-links i   { font-size: .78rem; flex-shrink: 0; opacity: .7 }
.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .85rem;
    color: rgba(255,255,255,.45);
    flex-wrap: wrap;
}
.site-footer__bottom a       { color: rgba(255,255,255,.6) }
.site-footer__bottom a:hover { color: var(--white) }

/* ============================================================
   BUTTONS & BADGES
============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: .92rem;
    border: 1px solid transparent;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px) }
.btn-primary { background: var(--purple); color: var(--white); box-shadow: 0 4px 14px rgba(61,37,137,.3) }
.btn-primary:hover { background: var(--purple-dark); box-shadow: 0 6px 20px rgba(61,37,137,.4); color: var(--white) }
.btn-blue { background: var(--blue); color: var(--white); box-shadow: 0 4px 14px rgba(15,163,220,.3) }
.btn-blue:hover { background: var(--blue-dark); box-shadow: 0 6px 20px rgba(15,163,220,.4); color: var(--white) }
.btn-yellow  { background: var(--yellow);  color: var(--ink) }
.btn-yellow:hover  { background: var(--yellow-dark); color: var(--ink) }
.btn-orange  { background: var(--orange);  color: var(--white) }
.btn-orange:hover  { background: var(--orange-dark); color: var(--white) }
.btn-blue    { background: var(--blue);    color: var(--white); box-shadow: 0 4px 14px rgba(15,163,220,.3) }
.btn-blue:hover    { background: var(--blue-dark); color: var(--white) }
.btn-outline { border-color: var(--border); background: var(--white); color: var(--ink-soft) }
.btn-outline:hover { border-color: var(--purple); color: var(--purple) }
.btn-ghost   { color: var(--purple); background: var(--purple-soft) }
.btn-ghost:hover   { background: var(--lavender); color: var(--purple-dark) }

.badge { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 700 }
/* Badges con colores del logo */
.badge-new   { background: var(--blue-soft);    color: var(--blue-dark) }   /* azul cyan */
.badge-sale  { background: var(--pink-soft);    color: #C03050 }            /* rosa blush */
.badge-stock { background: var(--orange-soft);  color: var(--orange-dark) } /* naranja orejas */
.badge-promo { background: var(--lavender);     color: var(--purple) }      /* lavanda capa */
.badge-hot   { background: var(--purple-soft);  color: var(--purple) }      /* violeta profundo */

/* ============================================================
   UTILITIES
============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
.desktop-only { display: block }
.mobile-only   { display: none }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1200px) {
    .product-grid { grid-template-columns: repeat(4, 1fr) }
    .product-grid.is-list .product-card { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); }
}

@media (max-width: 900px) {
    /* Header: 2 columnas (brand + acciones) cuando el nav está oculto */
    .site-header__bar { grid-template-columns: 1fr auto; gap: .75rem; min-height: 60px; }
    .page-shell.checkout-mode .site-header__bar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .5rem;
    }
    .page-shell.checkout-page .site-header__bar {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .page-shell.checkout-mode .site-header__bar .brand { min-width: 0; }
    .page-shell.checkout-mode .site-header__bar .brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Forzar 1 columna sin importar la clase de orientación del banner */
    .hero-shell,
    .banner-layout--portrait .hero-shell,
    .banner-layout--landscape .hero-shell { grid-template-columns: 1fr }
    /* Banner portrait en mobile: arriba del contenido */
    .banner-layout--portrait .hero-banner-slot--vertical {
        order: -1;
        display: block;
        height: 240px;
        max-height: 240px;
        overflow: hidden;
        border-radius: var(--radius-lg);
        align-self: auto;
    }
    .banner-layout--portrait .hero-banner-slot--vertical .hero-banner-card--hero,
    .banner-layout--portrait .hero-banner-slot--vertical .hero-banner-track { height: 100% }
    .banner-layout--portrait .hero-banner-slot--vertical .hero-banner-slide.is-active { display: block; height: 100% }
    .banner-layout--portrait .hero-banner-slot--vertical .hero-banner-slide__media { height: 100%; padding: 0 }
    .banner-layout--portrait .hero-banner-slot--vertical .hero-banner-slide__media img {
        width: 100%; height: 100%; object-fit: cover; object-position: center top;
    }
    .hero-banner-card--stage .hero-banner-slide.is-active { grid-template-columns: 1fr }
    .hero-banner-card--stage .hero-banner-slide.is-active.is-portrait { grid-template-columns: 1fr }
    .hero-banner-card--hero .hero-banner-slide.is-active { grid-template-columns: 1fr }
    .products-section .container,
    .categories-section .container,
    .brands-section .container,
    .features-section .container { padding: 1.2rem }
    .home-offers-strip { grid-auto-columns: minmax(240px, 88%) }
    .home-intent-grid { grid-template-columns: 1fr }
    .site-nav { display: none }
    .mobile-menu-toggle { display: flex }
    .desktop-only { display: none !important }
    .mobile-only   { display: flex !important }
    .features-grid { grid-template-columns: repeat(2, 1fr) }
    .product-grid  { grid-template-columns: repeat(3, 1fr) }
    .product-grid.is-list .product-card { grid-template-columns: minmax(160px, 200px) minmax(0, 1fr); }
    .category-grid { grid-template-columns: repeat(2, 1fr) }
    .site-footer__grid { grid-template-columns: 1fr 1fr }
    .section-heading { align-items: flex-start; flex-direction: column }
    /* Reducir alto de secciones en tablet */
    .section { padding: 2rem 0 }
    .brand { font-size: 1.1rem }
    .brand-logo { width: 42px; height: 42px }
}

@media (max-width: 600px) {
    /* Layout general */
    .section { padding: 1.5rem 0 }
    .page-shell { padding-top: 130px; } /* header 60px + search ~54px + margen */
    .page-shell.checkout-mode { padding-top: 64px; }
    .page-shell.checkout-page { padding-top: 64px; }
    .page-shell.checkout-mode .site-header__bar {
        min-height: 64px;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    .page-shell.checkout-page .site-header__bar {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .page-shell.checkout-mode .brand {
        gap: .45rem;
        font-size: 1rem;
    }
    .page-shell.checkout-mode .brand-logo,
    .page-shell.checkout-mode .brand-mark {
        width: 38px;
        height: 38px;
    }
    .page-shell.checkout-mode .cart-btn {
        width: 42px;
        height: 42px;
    }

    /* Hero */
    .hero-card { padding: 1.5rem 1.1rem 1.75rem }
    .hero-card--with-banner { padding-top: 1rem }
    .hero-card h1 { font-size: clamp(1.45rem, 7vw, 1.9rem) }
    .hero-sub { font-size: .82rem }
    .hero-actions { gap: .6rem }
    .hero-actions .btn { padding: .6rem 1.2rem; font-size: .85rem }
    .hero-proof-pill { font-size: .72rem; padding: .28rem .65rem }

    /* Contenedores de secciones */
    .products-section .container,
    .categories-section .container,
    .brands-section .container,
    .features-section .container { padding: .85rem }

    /* Grids */
    .product-grid  { grid-template-columns: repeat(2, 1fr); gap: .65rem }
    .product-grid.is-list .product-card { grid-template-columns: 1fr; }
    .product-grid.is-list .product-card__img-wrap { min-height: 180px; }
    .product-grid.is-list .product-card__body { padding: .85rem .9rem 1rem; }

    /* Features: 1 columna en mobile */
    .features-grid { grid-template-columns: 1fr; gap: .55rem }
    .feature-item { padding: .75rem .9rem; gap: .75rem; flex-direction: row; align-items: center }
    .feature-icon { width: 40px; height: 40px; font-size: 1.1rem; flex-shrink: 0 }
    .feature-item__text h5 { font-size: .88rem }
    .feature-item__text p  { font-size: .8rem }
    .page-hero--cart { padding: .8rem 0 1rem; }
    .page-hero--cart .breadcrumb { display: none; }
    .page-hero--cart h1 {
        margin-top: 0;
        font-size: 1.55rem;
        line-height: 1.05;
    }
    .page-hero--cart .page-hero__meta {
        font-size: .88rem;
        max-width: 24ch;
    }
    .page-hero--checkout {
        padding: .75rem 0 .95rem;
    }
    .page-hero--checkout .breadcrumb {
        display: none;
    }
    .page-hero--checkout h1 {
        margin-top: 0;
        font-size: 1.5rem;
        line-height: 1.05;
    }
    .page-hero__meta--checkout {
        font-size: .86rem;
        max-width: 22ch;
    }

    /* Quick links: 2 columnas en mobile */
    .quick-links { grid-template-columns: repeat(2, 1fr); gap: .55rem }
    .quick-link-pill { min-height: 46px; padding: .65rem .8rem; font-size: .82rem }

    /* Offers strip */
    .home-offers-strip { grid-template-columns: 1fr }
    .home-offers-strip { grid-auto-columns: 88% }
    .home-offers-showcase { padding: .85rem }
    .home-offers-slider { grid-template-columns: 1fr; gap: .8rem }
    .home-offers-slider__control { display: none }

    /* Footer */
    .site-footer__grid { grid-template-columns: 1fr }
    .site-footer { padding: 2rem 0 1.25rem }

    /* Hero acciones */
    .hero-actions,
    .hero-highlights { justify-content: stretch }
    .hero-actions > * { width: 100%; justify-content: center }
    .hero-highlight { width: auto; min-width: 0 }
    .hero-highlight span { font-size: .68rem; letter-spacing: .03em }
    .hero-proof-list { flex-direction: column; align-items: stretch }

    /* Banners */
    .hero-banner-card--stage .hero-banner-slide__media img { min-height: 0; aspect-ratio: 4 / 3 }
    .hero-banner-slide.is-portrait .hero-banner-slide__media { padding: .75rem }
    .hero-banner-slide.is-portrait .hero-banner-slide__media img { height: min(360px, 72vw) }
    .hero-banner-slot--horizontal { margin-bottom: .75rem }
    /* Ocultar offer card en mobile — el banner ya ocupa ese espacio */
    [data-hero-offer-card] { display: none !important }
    .hero-banner-controls { gap: .5rem }
    .hero-banner-slide__body .btn,
    .hero-offer-card__actions .btn { width: 100% }

    /* Section heading */
    .section-heading h2 { font-size: 1.2rem }

    /* Cards de producto */
    .product-card { border-radius: 14px }
    .product-card__body { padding: .7rem .75rem .85rem }
    .product-card__name { font-size: .84rem }
    .product-card__price { font-size: 1rem }
    .product-card__btn { padding: .45rem; font-size: .78rem }
}

@media (max-width: 1024px) {
    .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-intent-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .features-grid { grid-template-columns: 1fr !important; }
}


/* ============================================================
   PAGINAS INTERIORES – COMPONENTES COMPARTIDOS
   ============================================================ */

/* Page hero (cabecera de pagina) */
.page-hero {
    background: linear-gradient(135deg, var(--purple-deeper) 0%, var(--purple) 60%, var(--purple-mid) 100%);
    color: var(--white);
    padding: 2.5rem 0;
}
.page-hero h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0.4rem 0 0;
    color: var(--white);
}
.page-hero p {
    color: rgba(255,255,255,.75);
    margin: .3rem 0 0;
    font-size: .95rem;
}
.page-hero--sm { padding: 1.5rem 0; }
.page-hero--cart { padding: 1.1rem 0 1.3rem; }
.page-hero--cart h1 {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.page-hero--cart .page-hero__meta { max-width: 34ch; }
.page-hero--checkout { padding: 1rem 0 1.2rem; }
.page-hero--checkout h1 {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.page-hero__meta--checkout {
    color: var(--lavender);
    margin-top: .25rem;
    font-size: .9rem;
    max-width: 30ch;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--lavender);
    margin-bottom: .4rem;
}
.breadcrumb a { color: var(--lavender); text-decoration: none; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .fa-chevron-right { font-size: .65rem; }

/* ============================================================
   CATALOGO
   ============================================================ */
.catalog-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.5rem;
    align-items: start;
}
.catalog-sidebar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    position: sticky;
    top: 80px;
}
.catalog-sidebar__title,
.sidebar-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--purple-mid);
    margin: 1.25rem 0 .6rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.catalog-sidebar__title:first-child,
.sidebar-title:first-child { margin-top: 0; }
.filter-group {
    margin-bottom: .25rem;
}
.filter-label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--purple-mid);
    margin-bottom: .5rem;
}
.filter-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}
.filter-search {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .2s;
}
.filter-search:focus-within { border-color: var(--purple); }
.filter-search input {
    flex: 1;
    border: none;
    padding: .5rem .75rem;
    font-size: .88rem;
    background: var(--white);
    outline: none;
    color: var(--ink);
    min-width: 0;
}
.filter-search input::placeholder { color: var(--muted); }
.filter-search button {
    background: var(--purple);
    color: var(--white);
    border: none;
    padding: .5rem .85rem;
    cursor: pointer;
    font-size: .88rem;
    transition: background .2s;
}
.filter-search button:hover { background: var(--purple-dark); }
.filter-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--ink-soft);
    padding: .28rem 0;
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s;
}
.filter-check:hover { color: var(--purple); }
.filter-check input { accent-color: var(--purple); flex-shrink: 0; }
.filter-check__name { flex: 1; }
.filter-check__count {
    font-size: .74rem;
    font-weight: 600;
    color: var(--white);
    background: var(--purple-mid);
    border-radius: 30px;
    padding: .1rem .45rem;
    min-width: 1.5rem;
    text-align: center;
    line-height: 1.5;
    flex-shrink: 0;
}
.filter-empty {
    margin: 0;
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.5;
}
.filter-select {
    width: 100%;
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .88rem;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}
.filter-clear {
    background: none;
    border: none;
    color: var(--gray);
    font-size: .8rem;
    cursor: pointer;
    padding: .2rem 0;
    text-decoration: underline;
}
.filter-clear:hover { color: var(--purple); }
.catalog-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.catalog-bar > div:first-child {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.catalog-breadcrumb {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-wrap: wrap;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-soft, #888);
    line-height: 1.4;
}
.catalog-breadcrumb a {
    color: var(--ink-soft, #888);
    text-decoration: none;
}
.catalog-breadcrumb a:hover { color: var(--purple); }
.catalog-breadcrumb span {
    color: var(--purple);
    font-weight: 700;
}
.catalog-count {
    font-size: .82rem;
    color: var(--ink-soft);
    font-weight: 500;
}
.catalog-views { display: flex; gap: .3rem; }
.view-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .4rem .55rem;
    cursor: pointer;
    color: var(--gray);
    font-size: .9rem;
    transition: .2s;
}
.view-btn:hover, .view-btn.is-active {
    background: var(--purple);
    border-color: var(--purple);
    color: var(--white);
}

/* Paginacion */
.pagination-wrap {
    max-width: 100%;
    overflow: hidden;
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .3rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    padding-bottom: .25rem;
}
.pagination__btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.pagination__btn--nav {
    background: var(--bg);
    font-size: .78rem;
    letter-spacing: .01em;
}
.pagination__btn:hover { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); }
.pagination__btn.is-active { background: var(--purple); border-color: var(--purple); color: var(--white); }
.pagination__btn:disabled { opacity: .45; cursor: default; }
.pagination__dots {
    padding: 0 .15rem;
    color: var(--gray);
    font-size: .85rem;
    flex-shrink: 0;
}

/* Tag en tarjeta de producto */
.product-card__tag {
    position: absolute;
    top: .6rem;
    left: .6rem;
    padding: .2rem .55rem;
    border-radius: 30px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ============================================================
   PRODUCTO INDIVIDUAL
   ============================================================ */
.product-detail__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.product-gallery { display: flex; flex-direction: column; gap: .75rem; }
.product-gallery__main {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: var(--purple-mid);
}
.product-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-lg);
}
.product-gallery__thumbs { display: flex; gap: .5rem; }
.product-gallery__thumb {
    flex: 1;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
    border-radius: var(--radius);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--purple-mid);
    cursor: pointer;
    transition: .2s;
}
.product-gallery__thumb:hover,
.product-gallery__thumb.is-active { border-color: var(--purple); }
.product-info { display: flex; flex-direction: column; gap: 1rem; }
.product-info__brand { font-size: .82rem; color: var(--purple-mid); font-weight: 600; text-transform: uppercase; }
.product-info__category { color: var(--gray); font-size: .82rem; margin-left: .4rem; }
.product-info__title { font-size: 1.55rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; margin: 0; }
.product-info__value-card {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.product-info__pricing {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.product-info__price-eyebrow {
    display: block;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--purple-mid);
    font-weight: 800;
    margin-bottom: .3rem;
}
.product-info__price { font-size: 2rem; font-weight: 800; color: var(--purple); }
.product-info__price-note {
    margin: .25rem 0 0;
    font-size: .9rem;
    color: var(--ink-soft);
}
.product-info__value-lead {
    margin: .45rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
}
.product-info__old { font-size: 1.1rem; color: var(--gray); text-decoration: line-through; }
.product-info__discount {
    background: var(--pink-soft);
    color: var(--pink);
    font-weight: 700;
    font-size: .82rem;
    padding: .2rem .55rem;
    border-radius: 30px;
}
.product-info__badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.product-info__desc {
    font-size: .95rem;
    color: var(--text);
    line-height: 1.72;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f9f8ff 100%);
    box-shadow: var(--shadow-xs);
}
.product-info__desc > *:first-child {
    margin-top: 0;
}
.product-info__desc > *:last-child {
    margin-bottom: 0;
}
.product-info__desc p,
.product-info__desc ul,
.product-info__desc ol,
.product-info__desc blockquote,
.product-info__desc h2,
.product-info__desc h3 {
    margin: 0 0 .85rem;
}
.product-info__desc ul,
.product-info__desc ol {
    padding-left: 1.2rem;
    list-style-position: outside;
}
.product-info__desc ul {
    list-style: disc;
}
.product-info__desc ol {
    list-style: decimal;
}
.product-info__desc li {
    color: var(--ink);
    padding-left: .1rem;
}
.product-info__desc li::marker {
    color: var(--purple);
    font-weight: 800;
}
.product-info__desc li + li {
    margin-top: .35rem;
}
.product-info__desc strong,
.product-info__desc b {
    color: var(--ink);
}
.product-info__desc em,
.product-info__desc i {
    color: var(--purple-dark);
}
.product-info__desc h2,
.product-info__desc h3 {
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -.02em;
}
.product-info__desc h2 {
    font-size: 1.18rem;
}
.product-info__desc h3 {
    font-size: 1.02rem;
}
.product-info__desc blockquote {
    padding: .9rem 1rem;
    border-left: 4px solid var(--purple-mid);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: #f8f7ff;
    color: var(--ink);
}
.product-info__signals {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.product-info__stock,
.product-info__urgency {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .8rem;
    border-radius: var(--radius-pill);
    font-size: .84rem;
    font-weight: 700;
}
.product-info__stock.ok { background: #e8fbef; color: #15803d; }
.product-info__stock.low { background: #fff4e5; color: #b45309; }
.product-info__stock.out { background: #f3f4f6; color: #6b7280; }
.product-info__urgency.is-calm { background: var(--blue-soft); color: var(--blue-dark); }
.product-info__urgency.is-warm { background: #fff1df; color: var(--orange-dark); }
.product-info__urgency.is-hot { background: #fff0f3; color: #be123c; }
.product-info__urgency.is-out { background: #f3f4f6; color: #6b7280; }
.product-info__stock-note {
    margin: 0;
    font-size: .9rem;
    color: var(--ink-soft);
}
.product-info__context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.product-info__context-card {
    padding: .9rem;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1px solid var(--border);
}
.product-info__context-card strong {
    display: block;
    color: var(--ink);
    font-size: .98rem;
    margin-bottom: .25rem;
}
.product-info__context-card p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
}
.product-info__context-label {
    display: inline-block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    color: var(--purple-mid);
    margin-bottom: .35rem;
}
.product-info__decision-box {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-lg);
    background: #fffaf2;
    border: 1px solid #f3dfbb;
}
.product-info__decision-eyebrow {
    display: inline-block;
    margin-bottom: .8rem;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--orange-dark);
    font-weight: 800;
}
.product-info__checklist {
    display: grid;
    gap: .7rem;
}
.product-info__checklist li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.5;
}
.product-info__checklist i {
    color: var(--orange);
    margin-top: .18rem;
}
.product-info__row { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.product-info__row i { width: 1.2rem; text-align: center; color: var(--purple-mid); }
.product-info__actions { display: flex; flex-direction: column; gap: .75rem; }
.product-info__cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.product-info__cta .btn { flex: 1; justify-content: center; }
.product-info__add-btn {
    min-height: 52px;
    font-size: .98rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(61,37,137,.25);
}
.product-info__cta-note {
    margin: -.15rem 0 0;
    font-size: .84rem;
    font-weight: 700;
    color: var(--purple-dark);
}
.product-info__support-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #effaf4 0%, #ffffff 100%);
    border: 1px solid #cfe8d9;
}
.product-info__support-card p {
    margin: .3rem 0 0;
    font-size: .9rem;
}
.product-info__support-title {
    display: inline-block;
    font-size: .92rem;
    font-weight: 800;
    color: #166534;
}
.section-heading__text {
    margin: .35rem 0 0;
    max-width: 580px;
    font-size: .92rem;
}
.product-trust__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 1rem;
    align-items: start;
}
.product-trust__panel {
    padding: 1.35rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.product-trust__panel--soft {
    background: linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%);
}
.product-trust__header {
    margin-bottom: 1rem;
}
.product-trust__header h3 {
    margin: .2rem 0 0;
    font-size: 1.35rem;
}
.product-features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.product-feature {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .85rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: #fcfbff;
    border: 1px solid var(--border);
}
.product-feature__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 1rem;
}
.product-feature__copy {
    min-width: 0;
}
.product-feature__label {
    display: block;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--purple-mid);
    font-weight: 800;
    margin-bottom: .25rem;
}
.product-feature__copy strong {
    display: block;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: .2rem;
}
.product-feature__copy p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
}
.trust-cards-grid {
    display: grid;
    gap: .85rem;
}
.trust-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .85rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1px solid var(--border);
}
.trust-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff6e8;
    color: var(--orange-dark);
    font-size: 1rem;
}
.trust-card__body h4 {
    margin: 0 0 .25rem;
    font-size: 1rem;
}
.trust-card__body p {
    margin: 0 0 .45rem;
    font-size: .89rem;
    line-height: 1.55;
}
.trust-card__meta {
    display: inline-flex;
    align-items: center;
    padding: .35rem .65rem;
    border-radius: var(--radius-pill);
    background: var(--purple-soft);
    color: var(--purple);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .55rem;
}
.trust-card__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .86rem;
    font-weight: 700;
    color: var(--purple);
}
.trust-card__link:hover {
    color: var(--purple-dark);
}
.product-images-showcase__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.product-images-showcase__item:only-child {
    width: 100%;
    justify-self: start;
}
.product-images-showcase__item {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    text-align: left;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-images-showcase__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--purple-mid);
}
.product-images-showcase__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    padding: .75rem;
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
}
.product-images-showcase__caption {
    display: block;
    padding: .8rem .9rem;
    font-size: .86rem;
    font-weight: 700;
    color: var(--ink);
}

/* Qty control */
.qty-control { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; width: fit-content; }
.qty-btn {
    background: var(--bg);
    border: none;
    padding: .5rem .85rem;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text);
    transition: .2s;
}
.qty-btn:hover { background: var(--purple-soft); color: var(--purple); }
.qty-input {
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    width: 3.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    padding: .5rem 0;
    outline: none;
    background: var(--white);
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Share */
.share-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.share-lbl { font-size: .82rem; color: var(--gray); }
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .75rem;
    border-radius: 30px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}
.share-btn--wa    { background: #e7f9ef; color: #128c7e; }
.share-btn--wa:hover    { background: #128c7e; color: var(--white); }
.share-btn--fb    { background: #e8f0fb; color: #1877f2; }
.share-btn--fb:hover    { background: #1877f2; color: var(--white); }
.share-btn--copy  { background: var(--bg); color: var(--gray); border: 1px solid var(--border); }
.share-btn--copy:hover  { background: var(--purple-soft); color: var(--purple); }

/* ============================================================
   VIDEOS
   ============================================================ */
.tab-filter {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.tab-filter__item {
    padding: .4rem 1rem;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--gray);
    background: var(--bg);
    border: 1px solid var(--border);
    transition: .2s;
}
.tab-filter__item:hover { background: var(--purple-soft); color: var(--purple); border-color: var(--purple); }
.tab-filter__item.is-active { background: var(--purple); color: var(--white); border-color: var(--purple); }

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.video-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
}
.video-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.video-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--purple-deeper), var(--purple-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.video-card__thumb video,
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card__placeholder {
    font-size: 3.5rem;
    color: rgba(255,255,255,.3);
}
.video-card__play {
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.3rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255,255,255,.3);
    transition: .2s;
}
.video-card:hover .video-card__play { background: var(--purple); border-color: var(--purple); transform: scale(1.1); }
.video-card__duration {
    position: absolute;
    bottom: .5rem;
    right: .6rem;
    background: rgba(0,0,0,.65);
    color: var(--white);
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 4px;
}
.video-card__cat-badge {
    position: absolute;
    top: .5rem;
    left: .6rem;
    background: var(--purple);
    color: var(--white);
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 30px;
    text-transform: uppercase;
}
.video-card__body { padding: 1rem; }
.video-card__title { font-size: .95rem; font-weight: 700; color: var(--text-dark); margin: 0 0 .35rem; line-height: 1.35; }
.video-card__desc  { font-size: .82rem; color: var(--gray); margin: 0 0 .5rem; line-height: 1.5; }
.video-card__date  { font-size: .75rem; color: var(--gray); }

/* ============================================================
   NOSOTROS
   ============================================================ */
.about-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0;
}
.about-hero::before,
.about-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.about-hero::before {
    width: 360px;
    height: 360px;
    top: -140px;
    right: 6%;
    background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 72%);
}
.about-hero::after {
    width: 280px;
    height: 280px;
    left: -120px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(15,163,220,.18) 0%, rgba(15,163,220,0) 70%);
}
.about-hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr);
    gap: 1.5rem;
    align-items: stretch;
}
.about-hero__copy,
.about-hero__panel {
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    box-shadow: 0 22px 60px rgba(15, 10, 40, .16);
}
.about-hero__copy {
    padding: 2.25rem;
}
.about-hero .eyebrow {
    color: rgba(255,255,255,.82);
}
.about-hero .hero-sub {
    max-width: 52rem;
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 1.03rem;
    line-height: 1.8;
}
.about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.6rem;
}
.about-hero__actions .btn-outline {
    border-color: rgba(255,255,255,.28);
    color: var(--white);
}
.about-hero__actions .btn-outline:hover {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.12);
}
.about-hero__panel {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.1rem;
}
.about-hero__panel-label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.76);
}
.about-hero__facts {
    display: grid;
    gap: .7rem;
}
.about-hero__fact {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: var(--white);
    line-height: 1.55;
    font-size: .93rem;
}
.about-hero__fact i {
    margin-top: .2rem;
    color: var(--lavender);
}
.about-hero__mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.about-hero__mini-stat {
    padding: .9rem .75rem;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    text-align: center;
}
.about-hero__mini-stat strong {
    display: block;
    color: var(--white);
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: .3rem;
}
.about-hero__mini-stat span {
    color: rgba(255,255,255,.78);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.about-intro-section {
    margin-top: -2rem;
    position: relative;
    z-index: 2;
}
.about-story-card {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(226,222,239,.92);
    border-radius: 32px;
    box-shadow: 0 18px 48px rgba(28,24,48,.10);
    padding: 1.4rem;
}
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}
.about-visual {
    position: relative;
    background: linear-gradient(135deg, #f4f1ff, #ebe6ff);
    border-radius: 24px;
    border: 1px solid rgba(107,85,192,.12);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: var(--purple-mid);
    overflow: hidden;
}
.about-visual__card {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top right, rgba(107,85,192,.24), transparent 42%),
        linear-gradient(135deg, rgba(237,234,255,1), rgba(242,240,255,1));
}
.about-visual__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.about-content {
    padding: .35rem 0;
}
.about-content h2 {
    font-size: clamp(1.8rem, 2.8vw, 2.35rem);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 1rem;
}
.about-content p  {
    color: var(--text);
    line-height: 1.8;
    margin-bottom: .95rem;
    font-size: .98rem;
}
.about-ctas {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.about-stats-section {
    padding-top: .5rem;
}
.about-location-section {
    padding-top: 0;
}
.about-location-card {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 1.2rem;
    padding: 1.25rem;
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,243,255,.92));
    border: 1px solid rgba(107,85,192,.14);
    box-shadow: 0 16px 38px rgba(61,37,137,.08);
}
.about-location__copy {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about-location__copy h2 {
    margin: .35rem 0 .85rem;
}
.about-location__copy p {
    margin-bottom: .65rem;
    line-height: 1.75;
}
.about-location__map-wrap {
    min-height: 360px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(107,85,192,.12);
    background: #edeaff;
}
.about-location__map {
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
}
.about-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.about-section-heading h2 {
    margin: .35rem 0 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}
.stat-card {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,243,255,.92));
    border: 1px solid rgba(107,85,192,.14);
    border-radius: 24px;
    padding: 1.5rem 1.2rem;
    text-align: center;
    box-shadow: 0 16px 38px rgba(61,37,137,.08);
}
.stat-card__num,
.stat-card__value {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--purple-deeper);
    display: block;
    line-height: 1.1;
}
.stat-card__num span { font-size: 3rem; }
.stat-card__lbl,
.stat-card__label {
    font-size: .85rem;
    color: var(--ink-soft);
    margin-top: .35rem;
    display: block;
}
.stat-card__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto .75rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: var(--purple);
    background: linear-gradient(135deg, rgba(107,85,192,.12), rgba(15,163,220,.10));
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.value-card {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,243,255,.92));
    border: 1px solid rgba(107,85,192,.12);
    border-radius: 24px;
    padding: 1.5rem;
    text-align: left;
    transition: box-shadow .25s, transform .25s, border-color .25s;
    box-shadow: 0 14px 36px rgba(61,37,137,.06);
}
.value-card:hover {
    box-shadow: 0 18px 40px rgba(61,37,137,.12);
    transform: translateY(-4px);
    border-color: rgba(61,37,137,.22);
}
.value-card__icon {
    width: 3.15rem;
    height: 3.15rem;
    background: linear-gradient(135deg, rgba(61,37,137,.12), rgba(15,163,220,.09));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--purple);
}
.value-card h4 {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 .45rem;
}
.value-card p  {
    font-size: .9rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0;
}

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.team-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1rem;
    text-align: center;
    transition: box-shadow .25s;
}
.team-card:hover { box-shadow: var(--shadow-lg); }
.team-card__avatar {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, var(--purple), var(--purple-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2.2rem;
    color: var(--white);
}
.team-card h3 { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin: 0 0 .25rem; }
.team-card p  { font-size: .82rem; color: var(--purple-mid); font-weight: 600; margin: 0 0 .5rem; }
.team-card small { font-size: .78rem; color: var(--gray); }

/* ============================================================
   PERFIL / AUTH
   ============================================================ */
.auth-layout {
    max-width: 480px;
    margin: 0 auto;
}
.auth-tabs {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.auth-tab {
    flex: 1;
    padding: .9rem;
    text-align: center;
    font-size: .92rem;
    font-weight: 600;
    color: var(--gray);
    text-decoration: none;
    background: var(--bg);
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}
.auth-tab:hover { background: var(--purple-soft); color: var(--purple); }
.auth-tab.is-active { background: var(--purple); color: var(--white); }
.auth-form {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.auth-form--reset {
    gap: 1.25rem;
}
.auth-reset-head h2 {
    margin: 0 0 .45rem;
    font-size: 1.35rem;
}
.auth-reset-head p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.7;
}
.auth-reset-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.auth-reset-back {
    align-self: flex-start;
    font-weight: 600;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-label { font-size: .82rem; font-weight: 600; color: var(--text-dark); }
.form-label small { font-weight: 400; color: var(--gray); }
.form-input-wrap { position: relative; display: flex; align-items: center; }
.form-input-icon {
    position: absolute;
    left: .75rem;
    color: var(--gray);
    font-size: .9rem;
    pointer-events: none;
}
.form-input {
    width: 100%;
    padding: .55rem .75rem .55rem 2.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--text-dark);
    background: var(--bg);
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}
.form-input:focus { border-color: var(--purple); background: var(--white); }
.form-input-toggle {
    position: absolute;
    right: .65rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray);
    font-size: .9rem;
    padding: .25rem;
}
.form-input-toggle:hover { color: var(--purple); }
.form-footer { display: flex; align-items: center; justify-content: space-between; }
.form-check { display: flex; align-items: center; gap: .45rem; font-size: .85rem; cursor: pointer; }
.form-check input { accent-color: var(--purple); }
.form-link { font-size: .82rem; color: var(--purple); text-decoration: none; }
.form-link:hover { text-decoration: underline; }
.auth-divider {
    text-align: center;
    font-size: .82rem;
    color: var(--gray);
    position: relative;
    margin: 0;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

/* Panel cuenta logueada */
.account-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.75rem;
    align-items: start;
}
.account-sidebar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    position: sticky;
    top: 80px;
}
.account-avatar {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, var(--purple), var(--purple-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: var(--white);
    margin: 0 auto .85rem;
}
.account-name  { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin: 0 0 .2rem; }
.account-email { font-size: .8rem; color: var(--gray); margin: 0 0 1.1rem; word-break: break-all; }
.account-store-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 auto 1rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: .78rem;
    font-weight: 700;
}
.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1.1rem;
}
.account-stat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    padding: .7rem;
    text-align: left;
}
.account-stat-card span {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: .2rem;
}
.account-stat-card strong {
    display: block;
    font-size: .92rem;
    color: var(--ink);
}
.account-nav { display: flex; flex-direction: column; gap: .25rem; }
.account-nav__link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .85rem;
    border-radius: var(--radius);
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: .2s;
}
.account-nav__link:hover, .account-nav__link.is-active {
    background: var(--purple-soft);
    color: var(--purple);
}
.account-nav__link--danger { color: #d9534f; }
.account-nav__link--danger:hover { background: #fde8e8; color: #c0392b; }
.account-main {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}
.account-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.account-title i { color: var(--purple); }
.account-highlight-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #eef2ff, #f8fafc);
    margin-bottom: 1rem;
}
.account-highlight-card h3 {
    margin: .15rem 0 .35rem;
    font-size: 1.08rem;
}
.account-highlight-card p {
    margin: 0;
    color: var(--ink-soft);
}
.account-highlight-card__eyebrow {
    margin: 0;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #4f46e5;
    font-weight: 800;
}
.account-highlight-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    margin-top: .65rem;
    font-size: .8rem;
    color: #475569;
}

/* Pedidos */
.orders-list { display: flex; flex-direction: column; gap: .75rem; }
.order-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.order-card__date { font-size: .8rem; color: var(--gray); margin-left: .5rem; }
.order-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    font-size: .9rem;
    color: var(--text);
    gap: 1rem;
}
.order-card__summary {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.order-card__summary small {
    color: var(--gray);
    font-size: .8rem;
}
.order-card__items {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .15rem;
}
.order-card__items span {
    display: inline-flex;
    align-items: center;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: .75rem;
    font-weight: 600;
}
.order-card__meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .45rem;
}
.order-card__meta-grid span {
    display: inline-flex;
    align-items: center;
    padding: .2rem .5rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: .75rem;
    font-weight: 600;
}
.order-card__total { font-size: 1.05rem; font-weight: 700; color: var(--purple); }

/* Estado vacio */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.empty-state__icon { font-size: 3.5rem; color: var(--lavender); }
.empty-state p { font-size: .95rem; margin: 0; }

/* ============================================================
   CARRITO
   ============================================================ */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

/* Items */
.cart-items {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cart-items__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.cart-items__intro {
    min-width: 0;
}
.cart-items__eyebrow {
    display: inline-block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--purple-mid);
    font-weight: 800;
    margin-bottom: .2rem;
}
.cart-items__intro p {
    margin: 0;
    font-size: .88rem;
    color: var(--ink-soft);
}
.cart-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: #e74c3c;
    background: none;
    border: none;
    cursor: pointer;
    padding: .35rem .6rem;
    border-radius: var(--radius-sm);
    transition: background .2s;
}
.cart-clear-btn:hover { background: #fde8e8; }

/* Fila de ítem */
.cart-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: opacity .3s, height .3s;
    overflow: hidden;
}
.cart-row:last-child { border-bottom: none; }
.cart-row__img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
    flex-shrink: 0;
}
.cart-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-size: 1.6rem; color: var(--purple-mid);
}
.cart-row__info { min-width: 0; }
.cart-row__topline {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.cart-row__name {
    display: inline-block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    min-width: 0;
}
.cart-row__name:hover {
    color: var(--purple);
}
.cart-row__unit-price { font-size: .82rem; color: var(--muted); margin: 0; }
.cart-row__variant-pill {
    display: inline-flex;
    align-items: center;
    padding: .22rem .55rem;
    border-radius: var(--radius-pill);
    background: var(--purple-soft);
    color: var(--purple);
    font-size: .72rem;
    font-weight: 700;
}
.cart-row__edit-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .45rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--purple);
}
.cart-row__edit-link:hover { color: var(--purple-dark); }
.cart-row__qty { flex-shrink: 0; }
.cart-row__qty-label,
.cart-row__subtotal-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 800;
}
.cart-row__subtotal {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--purple);
    min-width: 90px;
    text-align: right;
    flex-shrink: 0;
}
.cart-row__remove {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-size: 1rem;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: .2s;
    flex-shrink: 0;
}
.cart-row__remove:hover { background: #fde8e8; color: #e74c3c; border-color: #e74c3c; }

/* Summary panel */
.cart-summary {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: sticky;
    top: 80px;
}
.cart-summary__title {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--purple-mid);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.cart-summary__box + .cart-summary__box {
    margin-top: 1rem;
}
.cart-summary__totals { margin-bottom: 1.25rem; }
.cart-summary__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: .9rem;
}
.cart-summary__stat {
    padding: .8rem .9rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
    border: 1px solid var(--border);
}
.cart-summary__stat span {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: .2rem;
}
.cart-summary__stat strong {
    display: block;
    font-size: 1.2rem;
    color: var(--purple);
}
.cart-summary__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    color: var(--ink-soft);
    padding: .4rem 0;
    border-bottom: 1px dashed var(--border);
}
.cart-summary__line:last-child { border-bottom: none; }
.cart-summary__line--total {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink);
    padding-top: .75rem;
}
.cart-summary__line--total strong { color: var(--purple); font-size: 1.4rem; }
.cart-summary__note {
    margin: .85rem 0 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.text-muted { color: var(--muted); font-size: .82rem; }
.cart-step-list {
    display: grid;
    gap: .65rem;
    margin: 0 0 1rem;
}
.cart-step-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ink);
}
.cart-step-list i {
    color: var(--orange);
    margin-top: .18rem;
}
.cart-summary__cta {
    width: 100%;
    justify-content: center;
}
.cart-summary__cta--secondary {
    margin-top: .75rem;
}
.cart-summary__support p {
    margin: 0 0 1rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Checkout form dentro del summary */
.checkout-form { display: flex; flex-direction: column; gap: .75rem; }
.checkout-form .form-input { padding-left: 2.3rem; }
.checkout-form textarea.form-input { padding-left: .75rem; }

/* Tipo entrega toggle */
.chk-section-panel {
    background: var(--surface, #fafafa);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg, .75rem);
    padding: 1rem 1rem .85rem;
    margin-bottom: .85rem;
}
.chk-section-panel + .chk-section-panel { margin-bottom: 0; }
.chk-section-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--purple, #7c3aed);
    margin: 0 0 .85rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}
.chk-section-label i { font-size: .82rem; }
.chk-entrega-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: .25rem;
}
.chk-entrega-opt {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: .55rem .75rem;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: .2s;
}
.chk-entrega-opt:has(input:checked) {
    border-color: var(--border);
}
.chk-entrega-opt input { display: none; }

/* Métodos de pago */
.chk-metodos { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .25rem; }
.chk-metodo-opt {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem .85rem;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: .2s;
}
.chk-metodo-opt:has(input:checked) {
    border-color: var(--purple);
    background: var(--purple-soft);
    color: var(--purple);
}
.chk-metodo-opt input { accent-color: var(--purple); }
.chk-metodo-opt--disabled {
    opacity: .66;
    cursor: not-allowed;
    background: #f8fafc;
}
.chk-metodo-opt--disabled:has(input:checked) {
    border-color: var(--border);
    background: #f8fafc;
    color: var(--ink-soft);
}

/* Alertas de checkout */
.cart-alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: .9rem;
}
.cart-alert--error { background: #fde8e8; color: #b91c1c; border: 1px solid #f87171; }
.cart-alert--success { background: #eaf8ef; color: #166534; border: 1px solid #86efac; }
.cart-alert ul { margin: 0; padding: 0 0 0 1rem; }
.cart-alert li { margin: .2rem 0; }

/* Éxito */
.cart-success {
    max-width: 520px;
    margin: 2rem auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
}
.cart-success__icon { font-size: 4rem; color: #22c55e; margin-bottom: .75rem; }
.cart-success h2 { margin-bottom: .75rem; font-size: 1.5rem; }
.cart-success p { color: var(--ink-soft); margin-bottom: 1.5rem; }
.cart-success__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Checkout separado */
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 380px;
    gap: 2rem;
    align-items: start;
}
.checkout-shell {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.checkout-shell__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.checkout-shell__copy {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.checkout-shell__head h2 {
    margin: 0;
    font-size: 1.5rem;
}
.checkout-shell__title {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--purple-dark);
}
.checkout-shell__head p {
    margin: 0;
    color: var(--muted);
    max-width: none;
}
.checkout-shell__lead {
    font-size: .95rem;
    line-height: 1.45;
    flex: 1 1 32ch;
}
.checkout-eyebrow {
    margin: 0;
    color: var(--purple-mid);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .74rem;
    font-weight: 800;
}
.checkout-back-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--purple);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 700;
}
.checkout-back-link--header {
    justify-content: center;
    padding: .55rem .8rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(91, 58, 196, .12);
    background: #f6f4ff;
    color: var(--purple-dark);
    font-size: .82rem;
}
.checkout-back-link--header:hover {
    background: #efeaff;
    color: var(--purple-deeper);
    border-color: rgba(91, 58, 196, .22);
}
.checkout-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.checkout-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    background: #fff;
}
.checkout-section-note {
    font-size: .82rem;
    color: var(--muted);
    margin: -.35rem 0 1rem;
}
.checkout-steps {
    display: grid;
    gap: 1rem;
}
.checkout-step {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.checkout-step[open] {
    border-color: #d6ccff;
    box-shadow: 0 14px 34px rgba(61,37,137,.08);
}
.checkout-step__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
}
.checkout-step__summary::-webkit-details-marker {
    display: none;
}
.checkout-step__heading {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}
.checkout-step__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--purple-soft);
    color: var(--purple);
}
.checkout-step__heading strong {
    display: block;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: .18rem;
}
.checkout-step__heading small {
    display: block;
    font-size: .83rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
.checkout-step__meta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.checkout-step__meta i {
    color: var(--muted);
    transition: transform .2s ease;
}
.checkout-step[open] .checkout-step__meta i {
    transform: rotate(180deg);
}
.checkout-step__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.checkout-step.is-complete .checkout-step__status {
    background: #e8fbef;
    color: #15803d;
}
/* Botón "Editar" estilo Amazon: visible cuando el paso está guardado */
.checkout-step__edit-btn {
    display: none;
    font-size: .74rem;
    font-weight: 700;
    color: var(--purple);
    text-decoration: underline;
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: .3rem;
}
.checkout-step.is-saved .checkout-step__edit-btn {
    display: inline;
}
.checkout-step.is-saved .checkout-step__status {
    display: none;
}
/* Ocultar chevron cuando el paso está guardado (queda abierto, el chevron confunde) */
.checkout-step.is-saved .checkout-step__meta i {
    display: none;
}
/* Vista sólo lectura (datos en fila) */
.checkout-step__saved-view {
    display: none;
}
.checkout-step.is-saved .checkout-step__saved-view {
    display: block;
    padding-bottom: .65rem;
}
.checkout-step.is-saved .checkout-step__form-view {
    display: none;
}
/* Pasos bloqueados: no interactuables hasta que el anterior esté completo */
.checkout-step.is-locked {
    opacity: .48;
    pointer-events: none;
    user-select: none;
}
.checkout-step.is-locked .checkout-step__status::after {
    content: ' · Bloqueado';
    font-weight: 400;
    opacity: .7;
}
.checkout-step__body {
    padding: 1.05rem 1.1rem 1.15rem;
    border-top: 1px solid var(--border);
}
.checkout-step__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    padding-bottom: 1.1rem;
    border-top: 1px dashed var(--border);
}
.checkout-step__actions--final {
    justify-content: flex-start;
    margin-bottom: .95rem;
}
/* Botones de avance: más vibrantes que el resto */
.checkout-step__actions .btn-primary[data-step-next] {
    background: var(--purple);
    box-shadow: 0 4px 18px -4px rgba(124,58,237,.45);
    letter-spacing: .01em;
    font-size: .97rem;
    padding: .75rem 1.4rem;
    animation: stepNextPulse 2.8s ease-in-out infinite;
}
.checkout-step__actions .btn-primary[data-step-next]:hover,
.checkout-step__actions .btn-primary[data-step-next]:focus {
    animation: none;
    box-shadow: 0 6px 24px -4px rgba(124,58,237,.6);
    transform: translateY(-1px);
}
@keyframes stepNextPulse {
    0%, 100% { box-shadow: 0 4px 18px -4px rgba(124,58,237,.45); }
    50%       { box-shadow: 0 4px 26px -2px rgba(124,58,237,.7); }
}
.checkout-step__hint {
    font-size: .82rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
.checkout-step__body .form-group:last-child,
.checkout-step__body > *:last-child {
    margin-bottom: 0;
}
.checkout-shipping-operator-note {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .65rem 0 0;
    padding: .55rem .7rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
}
.checkout-shipping-operator-note--split {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: 16px;
}

/* ── Botón agregar dirección ───────────────────────────────────────────────── */
.btn-add-dir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem 1rem;
    margin-top: .6rem;
    border: 2px dashed var(--purple-mid, #a393e8);
    border-radius: var(--radius-lg, .75rem);
    background: var(--purple-soft, #f5f3ff);
    color: var(--purple);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-add-dir:hover { background: #ede8ff; border-color: var(--purple); }
.btn-add-dir--secondary {
    padding: .45rem .85rem;
    border-style: solid;
    border-width: 1px;
    background: transparent;
    font-size: .82rem;
    width: auto;
    justify-content: flex-start;
}
.btn-add-dir--secondary:hover { background: var(--purple-soft, #f5f3ff); }

/* ── Modal selector de dirección con mapa ─────────────────────────────────── */
.dir-map-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.dir-map-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}
.dir-map-modal__box {
    position: relative; z-index: 1;
    background: #fff;
    border-radius: 1.25rem;
    width: 100%; max-width: 560px;
    max-height: 92vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
    overflow: hidden;
}
.dir-map-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.dir-map-modal__header strong { font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.dir-map-modal__header strong i { color: var(--purple); }
.dir-map-modal__close {
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 1.1rem; padding: .35rem .4rem;
    border-radius: .5rem; line-height: 1; transition: background .15s, color .15s;
}
.dir-map-modal__close:hover { background: #f5f3ff; color: var(--purple); }
.dir-map-modal__search {
    padding: .75rem 1.25rem .4rem;
    flex-shrink: 0;
}
.dir-map-modal__search > div { position: relative; }
.dir-map-modal__hint {
    font-size: .78rem; color: var(--muted);
    margin: .35rem 0 0; display: flex; align-items: center; gap: .35rem;
}
.dir-map-modal__map {
    height: 280px; flex-shrink: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.dir-map-modal__footer {
    padding: .85rem 1.25rem 1rem;
    display: flex; flex-direction: column; gap: .55rem;
    flex-shrink: 0;
}
.dir-map-modal__addr-preview {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .84rem; color: var(--ink); min-height: 1.5rem;
    background: var(--purple-soft, #f5f3ff);
    border-radius: .6rem; padding: .5rem .75rem;
}
.dir-map-modal__addr-preview i { color: var(--purple); margin-top: .15rem; flex-shrink: 0; }

/* ── Pin del mapa (Leaflet DivIcon) ────────────────────────────────────────── */
.dir-map-pin {
    width: 36px; height: 44px;
    display: flex; align-items: flex-start; justify-content: center;
    filter: drop-shadow(0 3px 6px rgba(107,85,192,.5));
}
.dir-map-pin i { font-size: 2.4rem; color: var(--purple, #6b55c0); line-height: 1; }

/* ── Autocompletado dirección (Nominatim) ──────────────────────────────────── */
.dir-autocomplete-wrap { position: relative; }
.dir-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--purple);
    border-radius: var(--radius-lg, .75rem);
    box-shadow: 0 8px 24px rgba(107,85,192,.15);
    z-index: 500;
    max-height: 260px;
    overflow-y: auto;
}
.dir-suggestions.is-open { display: block; }
.dir-suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem .9rem;
    cursor: pointer;
    font-size: .87rem;
    color: var(--ink);
    line-height: 1.4;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.dir-suggestion-item:last-child { border-bottom: none; }
.dir-suggestion-item:hover, .dir-suggestion-item.is-active {
    background: var(--purple-soft, #f5f3ff);
}
.dir-suggestion-item i {
    color: var(--purple-mid);
    font-size: .8rem;
    margin-top: .2rem;
    flex-shrink: 0;
}
.dir-suggestion-main { font-weight: 600; }
.dir-suggestion-sub { font-size: .77rem; color: var(--muted); }
.dir-suggestions-loading, .dir-suggestions-empty {
    padding: .75rem 1rem;
    font-size: .83rem;
    color: var(--muted);
    text-align: center;
}

/* ── Tarjetas de direcciones guardadas (estilo Amazon) ─────────────────────── */
.dir-card-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.dir-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
}
.dir-card:hover {
    border-color: var(--purple-mid);
    background: #faf9ff;
}
.dir-card.is-selected {
    border-color: var(--purple);
    background: #f5f3ff;
    box-shadow: 0 0 0 3px rgba(107,85,192,.12);
}
.dir-card__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    margin-top: .15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s;
}
.dir-card.is-selected .dir-card__radio {
    border-color: var(--purple);
    background: var(--purple);
}
.dir-card.is-selected .dir-card__radio::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
}
.dir-card__body {
    flex: 1;
    min-width: 0;
}
.dir-card__label {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--purple-mid);
    margin-bottom: .2rem;
}
.dir-card__addr {
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dir-card__cpa {
    margin-top: .25rem;
    font-size: .76rem;
    color: var(--purple);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.dir-card__delete {
    position: absolute;
    top: .5rem;
    right: .6rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: .82rem;
    padding: .2rem;
    line-height: 1;
    border-radius: .25rem;
    transition: color .15s, background .15s;
    opacity: 0;
}
.dir-card:hover .dir-card__delete,
.dir-card.is-selected .dir-card__delete {
    opacity: 1;
}
.dir-card__delete:hover {
    color: #e74c3c;
    background: #fde8e8;
}
.checkout-conversion-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
    gap: 1rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border: 1px solid #fed7aa;
}
.checkout-conversion-card__note {
    margin: .55rem 0 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.checkout-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}
.checkout-trust-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: .75rem;
    padding: .95rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
}
.checkout-trust-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--purple-soft);
    color: var(--purple);
}
.checkout-trust-card strong {
    display: block;
    margin-bottom: .15rem;
    font-size: .92rem;
    color: var(--ink);
}
.checkout-trust-card p {
    margin: 0;
    font-size: .81rem;
    line-height: 1.5;
}
.checkout-mobile-overview {
    display: none;
}
.checkout-conversion-card__eyebrow {
    display: inline-block;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    color: var(--orange-dark);
    margin-bottom: .25rem;
}
.checkout-conversion-card h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
}
.checkout-conversion-list {
    display: grid;
    gap: .55rem;
}
.checkout-conversion-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ink);
}
.checkout-conversion-list i {
    color: var(--orange);
    margin-top: .18rem;
}
.checkout-confirmation-lead {
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border-radius: var(--radius-lg);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.checkout-confirmation-lead strong {
    display: block;
    font-size: .96rem;
    color: var(--ink);
    margin-bottom: .2rem;
}
.checkout-confirmation-lead p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
}
.checkout-submit-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.checkout-summary {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.checkout-summary__box {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.checkout-summary__lead {
    margin: 0 0 .9rem;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.checkout-summary__shipping-operator {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .9rem;
    padding: .55rem .75rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35;
}
.checkout-summary__shipping-note {
    margin: .85rem 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.checkout-summary__box--ghost {
    background: linear-gradient(180deg, #fcfcff, #f7f7fb);
}
.checkout-safe-list {
    display: grid;
    gap: .55rem;
}
.checkout-safe-list span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--ink);
}
.checkout-safe-list i {
    color: var(--purple);
}
.checkout-items-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.checkout-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: .8rem;
    align-items: center;
}
.checkout-item__thumb {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
    color: var(--purple-mid);
}
.checkout-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.checkout-item__name {
    margin: 0 0 .15rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink);
}
.checkout-item__meta {
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
}
.checkout-item__price {
    font-size: .9rem;
    color: var(--purple);
}
.checkout-final-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 2rem;
    align-items: start;
}
.checkout-final-card {
    max-width: none;
    margin: 0;
}
.checkout-final-badge-row {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.checkout-final-badge {
    display: inline-flex;
    align-items: center;
    padding: .38rem .8rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: .78rem;
    font-weight: 800;
}
.checkout-final-badge--muted {
    background: #f1f5f9;
    color: #334155;
}
.checkout-final-address {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
}

/* Toast */
.cart-toast {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    background: var(--ink);
    color: var(--white);
    padding: .75rem 1.25rem;
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 9999;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    max-width: 280px;
}
.cart-toast.is-visible { opacity: 1; transform: translateY(0); }
.cart-toast--error { background: #b91c1c; }

/* ---- Variantes de producto (color / talla) ---- */
.product-info__variants { margin-bottom: 1rem; }
.variant-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: .45rem;
}
.variant-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.variant-opts--cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.variant-btn {
    padding: .35rem .85rem;
    grid-template-columns: 60px minmax(0, 1fr);
    border-radius: var(--radius);
    align-items: start;
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
    color: var(--ink);
}
.variant-btn:hover { border-color: var(--purple); }
.variant-btn.is-active {
    border-color: var(--purple);
    background: var(--purple);
    color: #fff;
    font-weight: 600;
}
.variant-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    width: 100%;
    padding: .75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    text-align: left;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.variant-card:hover {
    border-color: var(--purple-mid);
    box-shadow: var(--shadow-xs);
    transform: translateY(-1px);
}
.variant-card.is-active {
    border-color: var(--purple);
    box-shadow: 0 10px 24px rgba(61,37,137,.12);
    background: linear-gradient(180deg, #ffffff 0%, #f6f1ff 100%);
}
.variant-card__media {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}
.variant-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.variant-card__placeholder {
    color: var(--purple-mid);
    font-size: 1.1rem;
}
.variant-card__body {
    display: grid;
    gap: .18rem;
    min-width: 0;
}
.variant-card__name {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
}
.variant-card__price {
    font-size: .84rem;
    font-weight: 800;
    color: var(--purple);
}

/* ---- Galería principal ---- */
.product-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-lg);
}
.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}
/* Responsive carrito */
@media (max-width: 900px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
    .checkout-final-layout { grid-template-columns: 1fr; }
    .product-trust__layout { grid-template-columns: 1fr; }
    .product-features-grid { grid-template-columns: 1fr; }
    .product-images-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cart-items__head { flex-direction: column; align-items: flex-start; }
    .checkout-conversion-card { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .page-hero--sm { padding: 1rem 0; }
    .section { padding: 1.5rem 0; }
    .container { width: min(calc(100% - 1rem), var(--container)); }
    .cart-row { grid-template-columns: 64px 1fr auto; grid-template-rows: auto auto; gap: .5rem; }
    .cart-row__img { width: 64px; height: 64px; }
    .cart-row__qty { grid-column: 2; }
    .cart-row__subtotal { grid-column: 3; grid-row: 1; text-align: right; font-size: .95rem; }
    .cart-row__remove { grid-column: 3; grid-row: 2; }
    .cart-summary__stats { grid-template-columns: 1fr 1fr; }
    .chk-entrega-toggle { grid-template-columns: 1fr; }
    .checkout-layout { gap: 1rem; }
    .checkout-shell { padding: .9rem; border-radius: 20px; }
    .checkout-shell__head { flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
    .checkout-shell__copy {
        align-items: flex-start;
        gap: 0;
    }
    .checkout-shell__head h2 { font-size: 1.25rem; line-height: 1.25; }
    .checkout-shell__title { font-size: 1.45rem; }
    .checkout-shell__lead { font-size: .9rem; line-height: 1.5; }
    .checkout-back-link { width: 100%; justify-content: center; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: #faf9ff; }
    .checkout-section-grid { grid-template-columns: 1fr; }
    .checkout-conversion-card { padding: .95rem; gap: .8rem; }
    .checkout-conversion-card h3 { font-size: 1.02rem; }
    .checkout-item { grid-template-columns: 48px 1fr; }
    .checkout-item__price { grid-column: 2; }
    .checkout-trust-strip { grid-template-columns: 1fr; }
    .checkout-step { border-radius: 18px; }
    .checkout-step__summary { align-items: flex-start; gap: .65rem; padding: .9rem; }
    .checkout-step__heading { gap: .65rem; }
    .checkout-step__icon { width: 34px; height: 34px; }
    .checkout-step__heading strong { font-size: .95rem; }
    .checkout-step__heading small { font-size: .77rem; }
    .checkout-step__meta { gap: .45rem; align-self: center; }
    .checkout-step__status { min-width: auto; font-size: .68rem; padding: .3rem .55rem; }
    .checkout-step__body { padding: .95rem .9rem 1rem; }
    .checkout-step__actions { flex-direction: column; align-items: stretch; }
    .checkout-step__actions .btn { width: 100%; justify-content: center; min-height: 48px; }
    .checkout-step__hint { font-size: .78rem; text-align: center; }
    .checkout-shipping-operator-note,
    .checkout-summary__shipping-operator { border-radius: 14px; }
    .chk-metodo-opt { padding: .85rem .9rem; align-items: flex-start; }
    .checkout-summary__box { padding: 1rem; }
    .checkout-summary__lead { font-size: .82rem; }
    .checkout-mobile-overview {
        display: grid;
        gap: .55rem;
        margin-bottom: 1rem;
        padding: .9rem 1rem;
        border: 1px solid #d6ccff;
        border-radius: 18px;
        background: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
    }
    .checkout-mobile-overview__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
    }
    .checkout-mobile-overview__eyebrow {
        display: block;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted);
        margin-bottom: .15rem;
        font-weight: 800;
    }
    .checkout-mobile-overview strong {
        display: block;
        font-size: 1.18rem;
        line-height: 1.15;
        color: var(--purple);
    }
    .checkout-mobile-overview__cta {
        flex-shrink: 0;
        min-height: 44px;
        padding-inline: 1rem;
        white-space: nowrap;
    }
    .checkout-mobile-overview__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        flex-wrap: wrap;
        font-size: .78rem;
        color: var(--ink-soft);
    }
    .checkout-mobile-overview__meta a {
        color: #15803d;
        text-decoration: none;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }
    .checkout-mobile-overview__note {
        margin: 0;
        font-size: .77rem;
        line-height: 1.45;
        color: var(--ink-soft);
    }
}

@media (max-width: 420px) {
    .checkout-shell { padding: .8rem; }
    .checkout-conversion-card,
    .checkout-trust-card,
    .checkout-summary__box,
    .checkout-mobile-overview { border-radius: 16px; }
    .checkout-mobile-overview__row { align-items: stretch; flex-direction: column; }
    .checkout-mobile-overview__cta { width: 100%; justify-content: center; }
    .checkout-step__summary { padding: .82rem; }
    .checkout-step__icon { width: 32px; height: 32px; }
    .checkout-step__meta i { display: none; }
}

/* btn-outline */
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--purple);
    color: var(--purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem 1.25rem;
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: .2s;
}
.btn-outline:hover { background: var(--purple); color: var(--white); }

/* ============================================================
   RESPONSIVE INNER PAGES
   ============================================================ */
@media (max-width: 1024px) {
    .catalog-layout { grid-template-columns: 220px 1fr; }
    .video-grid { grid-template-columns: repeat(2, 1fr); }
    .about-hero__layout { grid-template-columns: 1fr; }
    .about-location-card { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-sidebar {
        display: none; /* oculto en móvil, se muestra como drawer */
    }
    /* Drawer de filtros móvil */
    .filter-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1100;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s;
    }
    .filter-drawer-backdrop.is-open {
        opacity: 1;
        pointer-events: all;
    }
    .filter-drawer {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1101;
        background: #fff;
        border-radius: 1.2rem 1.2rem 0 0;
        padding: 1.2rem 1.2rem 2rem;
        max-height: 82vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 -4px 32px rgba(0,0,0,.14);
    }
    .filter-drawer.is-open {
        transform: translateY(0);
    }
    .filter-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--border);
    }
    .filter-drawer__handle {
        width: 40px; height: 4px;
        background: #ddd;
        border-radius: 99px;
        margin: 0 auto .8rem;
    }
    .btn-filtros-mobile {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        background: var(--purple);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        padding: .45rem .9rem;
        font-size: .88rem;
        font-weight: 600;
        cursor: pointer;
        transition: background .2s;
    }
    .btn-filtros-mobile:hover { background: var(--purple-dark); }
    .product-detail__layout { grid-template-columns: 1fr; }
    .product-info__context-grid { grid-template-columns: 1fr; }
    .product-info__support-card { flex-direction: column; align-items: flex-start; }
    .trust-card { grid-template-columns: 1fr; }
    .product-feature { grid-template-columns: 1fr; }
    .about-hero { padding: 2.4rem 0; }
    .about-hero__copy,
    .about-hero__panel,
    .about-story-card { padding: 1.2rem; }
    .about-intro-section { margin-top: -1rem; }
    .about-grid { grid-template-columns: 1fr; }
    .about-location-card { padding: 1rem; }
    .about-location__map-wrap,
    .about-location__map { min-height: 300px; }
    .about-section-heading { display: block; }
    .about-hero__mini-stats { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
    .account-highlight-card { flex-direction: column; align-items: flex-start; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .product-info__cta { flex-direction: column; }
}
.filter-drawer-backdrop, .filter-drawer {
    display: none;
}
@media (min-width: 769px) {
    .btn-filtros-mobile { display: none; }
}
@media (max-width: 600px) {
    .video-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .product-info__pricing { flex-direction: column; }
    .product-info__signals { align-items: stretch; }
    .product-info__stock,
    .product-info__urgency { justify-content: center; }
    .variant-opts--cards { grid-template-columns: 1fr; }
    .product-images-showcase__grid { grid-template-columns: 1fr; }
}