@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:   #FFF9CC;
    /* Neutros */
    --ink:           #1C1830;
    --ink-soft:      #4B5563;
    --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: var(--bg);
}
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 }
.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
============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 70px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--ink);
    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-section {
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(140,78,10,.25);
}
.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: .85rem 1.4rem;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
    outline: none;
}
.search-form__input::placeholder { color: var(--muted) }
.search-form__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    background: var(--white);
    color: var(--orange-dark);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: color var(--transition);
}
.search-form__btn:hover { color: var(--orange) }

/* ============================================================
   HERO
============================================================ */
.hero-section { padding: 1.5rem 0 2rem }
.hero-card {
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 55%, var(--purple-deeper) 100%);
    border-radius: var(--radius-lg);
    padding: clamp(3rem, 5vw, 5rem) 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-card::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
}
.hero-card::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -40px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(15,163,220,.12);
    pointer-events: none;
}
.hero-card h1 {
    color: var(--white);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 900;
    margin-bottom: .75rem;
    position: relative; z-index: 1;
}
.hero-card .hero-sub {
    color: rgba(255,255,255,.82);
    font-size: 1.1rem;
    max-width: 520px;
    margin: 0 auto 2rem;
    position: relative; z-index: 1;
}
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 2.2rem;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--purple);
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    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);
}

/* ============================================================
   FEATURES STRIP
============================================================ */
.features-section {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.feature-item { display: flex; align-items: center; gap: 1rem }
.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: .92rem; font-weight: 800; color: var(--ink); margin: 0 0 .1em }
.feature-item__text p  { font-size: .82rem; color: var(--muted); margin: 0 }

/* ============================================================
   SECTION HEADING
============================================================ */
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.section-heading h2 { margin: 0 }
.eyebrow {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--purple);
    margin-bottom: .2em;
}

/* ============================================================
   PRODUCT GRID
============================================================ */
.products-section { background: var(--white); padding: 2rem 0 3rem }
.product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem }

.product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px) }

.product-card__img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #FAFAFA;
    overflow: hidden;
}
.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-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 }
.product-card__meta {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: .35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-card__name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
}
.product-card__price {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--purple);
    margin-bottom: .5rem;
}
.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.5rem 0; background: var(--bg) }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem }
.category-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.category-card:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(15,163,220,.18); transform: translateY(-2px) }
.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 }

/* ============================================================
   BRANDS
============================================================ */
.brands-section { background: var(--bg); padding: 2rem 0 }
.brand-strip    { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center }
.brand-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: border-color var(--transition), color var(--transition);
}
.brand-pill:hover { border-color: var(--blue); color: var(--blue-dark) }

/* ============================================================
   WHATSAPP FLOAT
============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem; left: 1.5rem;
    z-index: 200;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: var(--white);
    font-size: 1.6rem;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 16px rgba(37,211,102,.4);
    transition: transform var(--transition);
}
.whatsapp-float:hover { transform: scale(1.1); color: var(--white) }

/* ============================================================
   MOBILE DRAWER
============================================================ */
.mobile-drawer { display: none; position: fixed; inset: 0; z-index: 200 }
.mobile-drawer.is-open { display: block }
.mobile-drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45) }
.mobile-drawer__panel {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: min(320px, 90vw);
    background: var(--white);
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
}
.mobile-drawer__header { display: flex; align-items: center; justify-content: space-between }
.mobile-drawer__close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    font-size: 1.3rem;
    display: grid;
    place-items: center;
    line-height: 1;
    transform: rotate(45deg);
}
.mobile-nav { display: flex; flex-direction: column; gap: .25rem }
.mobile-nav__link {
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    color: var(--ink-soft);
    display: block;
    transition: background var(--transition), color var(--transition);
}
.mobile-nav__link:hover,
.mobile-nav__link.is-active { background: var(--purple-soft); color: var(--purple) }

/* ============================================================
   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: .9rem; margin-top: .75rem }
.site-footer h5   { color: var(--white); font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem }
.footer-links     { display: flex; flex-direction: column; gap: .5rem }
.footer-links a   { font-size: .88rem; color: rgba(255,255,255,.6); transition: color var(--transition) }
.footer-links a:hover { color: var(--white) }
.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) } }

@media (max-width: 900px) {
    .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) }
    .category-grid { grid-template-columns: repeat(2, 1fr) }
    .site-footer__grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 600px) {
    .product-grid  { grid-template-columns: repeat(2, 1fr) }
    .features-grid { grid-template-columns: 1fr }
    .site-footer__grid { grid-template-columns: 1fr }
    .hero-card { padding: 2.5rem 1.25rem }
}


/* ============================================================
   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--sm { padding: 1.5rem 0; }
.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 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--purple-mid);
    margin: 1.1rem 0 .55rem;
}
.catalog-sidebar__title:first-child { margin-top: 0; }
.filter-search {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.filter-search input {
    flex: 1;
    border: none;
    padding: .45rem .7rem;
    font-size: .85rem;
    background: var(--bg);
    outline: none;
    color: var(--text);
    min-width: 0;
}
.filter-search button {
    background: var(--purple);
    color: var(--white);
    border: none;
    padding: .45rem .8rem;
    cursor: pointer;
    font-size: .85rem;
}
.filter-search button:hover { background: var(--purple-dark); }
.filter-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--text);
    padding: .25rem 0;
    cursor: pointer;
}
.filter-check input { accent-color: var(--purple); }
.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: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.catalog-count { font-size: .88rem; color: var(--gray); }
.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 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.pagination__btn {
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: .88rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    text-decoration: none;
}
.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; }

/* 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__prices { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.product-info__price { font-size: 2rem; font-weight: 800; color: var(--purple); }
.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.65; }
.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; }

/* 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 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-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.about-visual {
    background: linear-gradient(135deg, var(--purple-soft), var(--lavender-soft));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: var(--purple-mid);
}
.about-content h2 { font-size: 1.55rem; font-weight: 700; color: var(--text-dark); margin: 0 0 1rem; }
.about-content p  { color: var(--text); line-height: 1.7; margin-bottom: .85rem; }
.about-ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }

.stats-section { background: linear-gradient(135deg, var(--purple-deeper), var(--purple)); padding: 3.5rem 0; }
.stats-section h2 { color: var(--white); text-align: center; font-size: 1.45rem; margin-bottom: 2rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.stat-card {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1rem;
    text-align: center;
    backdrop-filter: blur(6px);
}
.stat-card__num,
.stat-card__value { font-size: 2.25rem; font-weight: 800; color: var(--white); display: block; line-height: 1.1; }
.stat-card__num span { font-size: 3rem; }
.stat-card__lbl,
.stat-card__label { font-size: .85rem; color: rgba(255,255,255,.82); margin-top: .35rem; display: block; }
.stat-card__icon { font-size: 1.6rem; color: var(--lavender); display: block; margin-bottom: .5rem; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.value-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.25rem;
    text-align: center;
    transition: box-shadow .25s, transform .25s;
}
.value-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.value-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, var(--purple-soft), var(--lavender-soft));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .85rem;
    font-size: 1.35rem;
    color: var(--purple);
}
.value-card h3 { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin: 0 0 .4rem; }
.value-card p  { font-size: .85rem; color: var(--gray); line-height: 1.55; 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;
}
.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-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); }

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

/* 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); }
    .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 { position: static; }
    .product-detail__layout { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .product-info__cta { flex-direction: column; }
}
@media (max-width: 600px) {
    .video-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}