@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {
  --primary:       #1a5c2e;
  --primary-light: #2d7a45;
  --primary-dark:  #0d3d1a;
  --primary-bg:    #eaf5ee;
  --accent:        #c9a96e;
  --accent-dark:   #a8834a;
  --white:         #ffffff;
  --gray-50:       #f9fafb;
  --gray-100:      #f3f4f6;
  --gray-200:      #e5e7eb;
  --gray-300:      #d1d5db;
  --gray-400:      #9ca3af;
  --gray-500:      #6b7280;
  --gray-600:      #4b5563;
  --gray-800:      #1f2937;
  --dark:          #111827;
  --danger:        #dc2626;
  --warning:       #f59e0b;
  --info:          #3b82f6;
  --success:       #10b981;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:        0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:     0 10px 32px rgba(0,0,0,.12);
  --radius:        12px;
  --radius-sm:     8px;
  --radius-xs:     5px;
  --transition:    all .25s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.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}
body{font-family:'DM Sans','Segoe UI',system-ui,-apple-system,sans-serif;color:var(--dark);background:#f5f0e8;-webkit-font-smoothing:antialiased;min-height:100vh}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;outline:none;font-family:inherit}
input,select,textarea{font-family:inherit}

/* ── ANIMATIONS ── */
@keyframes fadeUp   {from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn   {from{opacity:0}to{opacity:1}}
@keyframes slideRight{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes float    {0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse    {0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes spinSlow {to{transform:rotate(360deg)}}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes particleFloat{0%{transform:translateY(0) translateX(0);opacity:.6}50%{transform:translateY(-60px) translateX(20px);opacity:.3}100%{transform:translateY(-120px) translateX(-10px);opacity:0}}
@keyframes heroShimmer{0%{opacity:.4}50%{opacity:.8}100%{opacity:.4}}
@keyframes countUp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* Scroll animation classes */
.anim{opacity:0;transition:opacity .65s ease,transform .65s ease}
.anim.fade-up{transform:translateY(36px)}
.anim.fade-right{transform:translateX(-36px)}
.anim.fade-in{transform:none}
.anim.is-visible{opacity:1;transform:translate(0)}
.anim.d1{transition-delay:.1s}.anim.d2{transition-delay:.18s}.anim.d3{transition-delay:.26s}
.anim.d4{transition-delay:.34s}.anim.d5{transition-delay:.42s}.anim.d6{transition-delay:.5s}

/* Hero entry animations */
.hero-anim-1{animation:fadeUp .9s cubic-bezier(.4,0,.2,1) .1s both}
.hero-anim-2{animation:fadeUp .9s cubic-bezier(.4,0,.2,1) .3s both}
.hero-anim-3{animation:fadeUp .9s cubic-bezier(.4,0,.2,2) .5s both;
font-weight: 1500;}
.hero-anim-4{animation:fadeIn .9s ease .7s both}
.float-anim{animation:float 4s ease-in-out infinite}



/* ── HEADER ── */
header{background:var(--primary);box-shadow:0 2px 12px rgba(0,0,0,.2);position:sticky;top:0;z-index:200}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1360px;margin:0 auto;padding:12px 28px}
.logo-link{display:flex;align-items:center;flex-shrink:0}
.logo-link img{height:104px;width:104px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
.logo-link:hover img{transform:scale(1.06);box-shadow:0 4px 14px rgba(0,0,0,.45)}

.search-bar{flex:1;display:flex;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.28);border-radius:34px;overflow:hidden;max-width:680px;transition:background .2s,border-color .2s}
.search-bar:focus-within{background:white;border-color:white}
.search-bar input{flex:1;border:none;padding:17px 26px;font-size:17px;outline:none;background:transparent;color:white}
.search-bar:focus-within input{color:var(--dark)}
.search-bar input::placeholder{color:rgba(255,255,255,.82);font-weight:500}
.search-bar:focus-within input::placeholder{color:var(--gray-400)}
.search-bar button{background:var(--accent);color:white;padding:17px 30px;font-size:19px;transition:background .2s;border-radius:0;flex-shrink:0}
.search-bar button:hover{background:var(--accent-dark)}

.header-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.header-icon-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:white;font-size:13px;font-weight:600;letter-spacing:.3px;padding:11px 18px;border-radius:14px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.28);transition:background .2s,border-color .2s,transform .2s;position:relative}
.header-icon-btn:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
.header-icon-btn i{font-size:26px}
.cart-badge-count{position:absolute;top:-8px;right:-8px;background:var(--accent);color:var(--primary-dark);font-size:12px;font-weight:800;border-radius:50%;width:24px;height:24px;border:2px solid var(--primary);box-shadow:0 2px 6px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;display:none}

/* Auth area */
.header-login-btn{display:flex;align-items:center;gap:10px;color:var(--primary-dark);background:var(--accent);border:1.5px solid var(--accent);padding:14px 28px;border-radius:32px;font-size:15.5px;font-weight:800;letter-spacing:.3px;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:all .2s}
.header-login-btn:hover{background:#dcbc7f;border-color:#dcbc7f;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.34)}
.user-menu{position:relative}
.user-menu-btn{display:flex;align-items:center;gap:10px;color:white;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.34);padding:11px 22px;border-radius:32px;font-size:15px;font-weight:700;transition:all .2s}
.user-menu-btn:hover{background:rgba(255,255,255,.25)}
.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);background:white;border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:200px;overflow:hidden;display:none;border:1px solid var(--gray-200)}
.user-dropdown.open{display:block;animation:fadeUp .2s ease}
.user-dropdown-header{padding:14px 16px;background:var(--primary-bg);border-bottom:1px solid var(--gray-200)}
.udh-name{display:block;font-weight:700;font-size:15px;color:var(--primary-dark)}
.udh-email{display:block;font-size:13px;color:var(--gray-600);margin-top:2px}
.user-dropdown a,.user-dropdown button{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:14.5px;color:var(--gray-800);width:100%;text-align:left;background:none;border:none;transition:background .15s;cursor:pointer}
.user-dropdown a:hover,.user-dropdown button:hover{background:var(--gray-100)}
.user-dropdown i{width:16px;color:var(--primary);font-size:14px}
.user-dropdown hr{border:none;border-top:1px solid var(--gray-200)}
/* ── DIFERENCIA VISUAL SEGÚN SESIÓN (logueado vs invitado) ── */
.udh-hi{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-dark);margin-bottom:3px}
.udh-hi i{color:#22c55e;font-size:11px}
.user-menu-btn.is-auth{background:rgba(201,169,110,.18);border-color:rgba(201,169,110,.6)}
.user-menu-btn.is-auth:hover{background:rgba(201,169,110,.28)}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;line-height:1;flex-shrink:0;position:relative;box-shadow:0 0 0 2px rgba(201,169,110,.35)}
.user-online-dot{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid var(--primary)}
.welcome-bar{background:linear-gradient(90deg,var(--accent),var(--accent-dark));color:var(--primary-dark);box-shadow:0 2px 10px rgba(0,0,0,.18);animation:fadeUp .3s ease both;position:relative;z-index:150}
.welcome-bar-inner{max-width:1360px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;gap:14px;font-family:'DM Sans',sans-serif;font-size:14.5px;font-weight:600}
.welcome-bar .wb-hi{display:flex;align-items:center;gap:9px}
.welcome-bar .wb-hi i{font-size:15px}
.welcome-bar strong{font-weight:800}
.welcome-bar .wb-links{margin-left:auto;display:flex;align-items:center;gap:7px}
.welcome-bar .wb-links a{color:var(--primary-dark);padding:5px 12px;border-radius:20px;background:rgba(255,255,255,.4);font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:background .2s,transform .2s}
.welcome-bar .wb-links a:hover{background:rgba(255,255,255,.78);transform:translateY(-1px)}
.welcome-bar .wb-links a.wb-out{background:rgba(7,26,12,.12)}
@media(max-width:600px){
  .welcome-bar-inner{padding:8px 14px;font-size:12.5px;gap:8px;flex-wrap:wrap}
  .welcome-bar .wb-links{width:100%;margin-left:0;gap:6px}
  .welcome-bar .wb-links a{padding:6px 10px;font-size:12px;flex:1;justify-content:center}
}

/* Navbar */
.nav-bar{background:var(--primary-dark);border-top:1px solid rgba(255,255,255,.08)}
.nav-bar ul{max-width:1360px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 28px;gap:14px;overflow-x:auto;scrollbar-width:none}
.nav-bar ul::-webkit-scrollbar{display:none}
.nav-bar a{color:rgba(255,255,255,.85);font-size:17px;font-weight:700;padding:18px 34px;display:block;white-space:nowrap;transition:all .2s;border-radius:10px}
.nav-bar a:hover,.nav-bar a.active{color:white;background:var(--primary-light)}

/* ── DROPDOWN "PRODUCTOS" ── (categorías al pasar el ratón) ───────────────── */
.nav-bar li.has-dropdown{position:relative}
.nav-chevron{font-size:9px;margin-left:6px;opacity:.75;transition:transform .2s}
.nav-bar li.has-dropdown:hover .nav-chevron{transform:rotate(180deg)}
.nav-caret{display:none}
/* En escritorio el ul de navegación no debe recortar el menú flotante */
@media (min-width:769px){ .nav-bar > ul{overflow:visible} }
.nav-bar ul.nav-dropdown{
  display:block;position:absolute;top:100%;left:0;min-width:248px;margin:0;padding:8px;
  background:#fff;border-radius:0 0 12px 12px;border-top:3px solid var(--accent);
  box-shadow:0 18px 44px rgba(0,0,0,.20);overflow:visible;list-style:none;z-index:250;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav-bar li.has-dropdown:hover > .nav-dropdown,
.nav-bar li.has-dropdown:focus-within > .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-bar .nav-dropdown li{width:auto}
.nav-bar .nav-dropdown a{
  color:var(--primary-dark);background:none;padding:10px 14px;border-radius:7px;
  font-size:15px;font-weight:500;display:flex;align-items:center;gap:11px;white-space:nowrap;border-bottom:none;
}
.nav-bar .nav-dropdown a:hover{background:var(--gray-100);color:var(--primary)}
.nav-bar .nav-dropdown a i{width:18px;text-align:center;color:var(--accent);font-size:14px;flex-shrink:0}
.nav-bar .nav-dropdown .dd-all{border-bottom:1px solid var(--gray-200);border-radius:0;margin-bottom:4px;padding-bottom:12px;font-weight:700}

/* ── DROPDOWN EN MÓVIL (dentro del menú hamburguesa, tipo acordeón) ──────── */
@media (max-width:768px){
  .nav-bar li.has-dropdown{display:flex;flex-wrap:wrap;align-items:center}
  .nav-bar li.has-dropdown > a{flex:1}
  .nav-chevron{display:none}
  .nav-caret{
    display:flex;align-items:center;justify-content:center;width:48px;align-self:stretch;
    background:none;border:none;border-bottom:1px solid rgba(255,255,255,.06);
    color:rgba(255,255,255,.8);cursor:pointer;font-size:14px;
  }
  .nav-caret i{transition:transform .25s}
  .nav-bar li.has-dropdown.open .nav-caret i{transform:rotate(180deg)}
  .nav-bar ul.nav-dropdown{
    position:static;opacity:1;visibility:visible;transform:none;width:100%;order:3;
    box-shadow:none;border-radius:0;border-top:none;background:rgba(0,0,0,.22);
    padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  /* Tope generoso: hace falta un numero para poder animar, pero 640px se
     quedaba corto si algun dia hay muchas categorias (hoy son 7 = 313px).
     Con 1600px caben ~35 sin que se corte ninguna. */
  .nav-bar li.has-dropdown.open > .nav-dropdown{max-height:1600px}
  .nav-bar .nav-dropdown a{color:rgba(255,255,255,.88);padding:12px 22px 12px 40px;border-radius:0;font-size:15px}
  .nav-bar .nav-dropdown a:hover{background:var(--primary);color:#fff}
  .nav-bar .nav-dropdown a i{color:var(--accent)}
  .nav-bar .nav-dropdown .dd-all{border-bottom:1px solid rgba(255,255,255,.08)}
}

/* ── LAYOUT ── */
.container{max-width:1360px;margin:0 auto;padding:0 24px}

/* ── HERO ── */
.hero{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 55%,var(--primary-light) 100%);background-size:200% 200%;animation:gradientMove 8s ease infinite;min-height:520px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:60px 24px}

/* Floating particles */
.hero-particles{position:absolute;inset:0;pointer-events:none}
.hero-particle{position:absolute;border-radius:50%;background:rgba(255,255,255,.07);animation:particleFloat linear infinite}

/* Decorative circles */
.hero-circle{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.06)}

.hero-content{position:relative;z-index:1;text-align:center;color:white;max-width:720px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px}
.hero h1{font-size:clamp(32px,5.5vw,62px);font-weight:800;line-height:1.15;margin-bottom:18px;text-shadow:0 2px 20px rgba(0,0,0,.2)}
.hero p{font-size:clamp(15px,2vw,19px);opacity:.85;max-width:560px;margin:0 auto 36px;line-height:1.6}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:30px;font-weight:600;font-size:15px;transition:var(--transition);cursor:pointer;border:none}
.btn-accent{background:var(--accent);color:white;box-shadow:0 4px 14px rgba(201,169,110,.35)}
.btn-accent:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,169,110,.45)}
.btn-primary{background:var(--primary);color:white;box-shadow:0 4px 14px rgba(26,92,46,.25)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px)}
.btn-outline-white{background:transparent;color:white;border:2px solid rgba(255,255,255,.5)}
.btn-outline-white:hover{background:rgba(255,255,255,.12)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:white}
.btn-sm{padding:9px 20px;font-size:14.5px}

/* ── SECTIONS ── */
.section{padding:72px 0}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;gap:16px;flex-wrap:wrap}
.section-label{font-size:12.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.section-title{font-size:28px;font-weight:800;color:var(--primary-dark);line-height:1.2}
.section-subtitle{color:var(--gray-500);font-size:15px;margin-top:6px}

/* ── BENEFIT CARDS ── */
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.benefit-card{background:white;border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:var(--transition)}
.benefit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.benefit-icon-wrap{width:52px;height:52px;background:var(--primary-bg);border-radius:14px;display:flex;align-items:center;justify-content:center}
.benefit-icon-wrap i{font-size:22px;color:var(--primary)}
.benefit-card h4{font-size:15px;font-weight:700;color:var(--dark)}
.benefit-card p{font-size:15.5px;color:var(--gray-600);line-height:1.7}

/* ── CATEGORY CARDS ── */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.category-card{background:white;border-radius:var(--radius);padding:28px 16px;text-align:center;border:2px solid transparent;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm)}
.category-card:hover{border-color:var(--primary);transform:translateY(-5px);box-shadow:var(--shadow)}
.cat-icon-wrap{width:60px;height:60px;background:var(--primary-bg);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.cat-icon-wrap i{font-size:26px;color:var(--primary)}
.category-card h3{font-size:15px;font-weight:700;color:var(--dark)}
.category-card small{font-size:12.5px;color:var(--gray-400);margin-top:4px;display:block}
.brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.brand-card{background:white;border-radius:var(--radius);padding:24px 16px;text-align:center;border:2px solid transparent;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px}
.brand-card:hover{border-color:var(--primary);transform:translateY(-5px);box-shadow:var(--shadow)}
.brand-logo-wrap{height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.brand-logo-wrap img{max-height:64px;max-width:150px;object-fit:contain}
.brand-logo-wrap i{font-size:34px;color:var(--primary)}
.brand-card h3{font-size:15px;font-weight:700;color:var(--dark)}
.brand-card small{font-size:12.5px;color:var(--gray-400);margin-top:4px;display:block}

/* ── PRODUCT GRID ── */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.product-card{background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);display:flex;flex-direction:column;border:1px solid var(--gray-200)}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
/* Tarjeta de producto en formato cuadrado con la imagen COMPLETA (contain), al
   estilo MercadoLibre: nada se recorta y el sobrante queda en fondo claro. */
.product-card-img{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--gray-50)}
.product-card-img img{width:100%;height:100%;object-fit:contain;padding:8px;transition:transform .4s ease}
.product-card:hover .product-card-img img{transform:scale(1.05)}
.product-card-img .no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.product-card-img .no-img i{font-size:56px;color:var(--gray-300)}
.badge-discount{position:absolute;top:10px;left:10px;background:var(--danger);color:white;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px}
.badge-new{position:absolute;top:10px;left:10px;background:var(--primary);color:white;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px}
.wishlist-heart{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:none;color:#dc2626;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:transform .15s,background .15s;z-index:2}
.wishlist-heart:hover{transform:scale(1.12);background:#fff}
.wishlist-heart.active{background:#dc2626;color:#fff}
.wishlist-heart.active:hover{background:#b91c1c}
.product-card-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:6px}
.product-category{font-size:12.5px;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.product-category i{font-size:11px}
/* Chips del badge de la ficha: categorías (varias) + marca, enlazadas al filtro */
.pcat-chip{font-size:12.5px;color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.6px;display:inline-flex;align-items:center;gap:5px;background:var(--primary-bg);padding:5px 11px;border-radius:20px;transition:var(--transition)}
.pcat-chip:hover{background:var(--primary);color:#fff}
.pcat-chip i{font-size:11px}
.pcat-chip-brand{color:#8a5a00;background:#fbefd0}
.pcat-chip-brand:hover{background:#c9a96e;color:#3a2600}
.product-name{font-size:15px;font-weight:600;color:var(--dark);line-height:1.4}
.product-name:hover{color:var(--primary)}
.product-price{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px}
.price-main{font-size:17px;font-weight:700;color:var(--primary)}
.price-original{font-size:14px;color:var(--gray-500);text-decoration:line-through}
.product-card-actions{padding:0 16px 16px;display:flex;gap:8px}
.btn-add-cart{flex:1;background:var(--primary);color:white;padding:11px 14px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:600;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:7px}
.btn-add-cart:hover{background:var(--primary-dark)}
.btn-detail{background:var(--gray-100);color:var(--gray-600);padding:10px 14px;border-radius:var(--radius-sm);font-size:15px;transition:var(--transition);display:flex;align-items:center}
.btn-detail:hover{background:var(--primary-bg);color:var(--primary)}

/* ── TIENDA LAYOUT ── */
.tienda-layout{display:flex;gap:28px;padding:40px 0}
.sidebar{width:250px;flex-shrink:0}
.sidebar-card{background:white;border-radius:var(--radius);padding:22px;margin-bottom:18px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}
.sidebar-card h3{font-size:13.5px;font-weight:700;color:var(--gray-600);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;display:flex;align-items:center;gap:7px}
.filter-option{display:flex;align-items:center;gap:9px;padding:8px 4px;cursor:pointer;font-size:15px;border-radius:6px;transition:color .2s}
.filter-option:hover{color:var(--primary)}
.filter-option input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px}
.filter-count{font-size:12.5px;color:var(--gray-500);margin-left:auto}
.price-range{display:flex;gap:8px;align-items:center;margin-top:8px}
.price-range input{width:96px;padding:9px 11px;border:1.5px solid var(--gray-300);border-radius:var(--radius-xs);font-size:14.5px;transition:border-color .2s}
.price-range input:focus{outline:none;border-color:var(--primary)}
.main-content{flex:1;min-width:0}
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.results-count{font-size:15px;color:var(--gray-600)}
.sort-select{padding:10px 15px;border:1.5px solid var(--gray-300);border-radius:var(--radius-xs);font-size:16px;background:white;color:var(--dark);cursor:pointer;transition:border-color .2s}
.sort-select:focus{outline:none;border-color:var(--primary)}

/* ── PRODUCT DETAIL ── */
.product-detail{padding:40px 0}
.breadcrumb{font-size:14.5px;color:var(--gray-500);margin-bottom:28px;display:flex;align-items:center;gap:8px}
.breadcrumb a{color:var(--primary);font-weight:500}
.breadcrumb i{font-size:10px;color:var(--gray-300)}
.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-bottom:60px}
.gallery-main{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--gray-100);margin-bottom:12px;display:flex;align-items:center;justify-content:center}
/* contain (no cover): la foto vertical llena el marco, pero una imagen ancha
   —como la guía de tallas— se ve completa sin recortarse en escritorio. */
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-main .no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.gallery-main .no-img i{font-size:90px;color:var(--gray-300)}
.gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.gallery-thumb{position:relative;width:74px;height:90px;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--gray-100);transition:var(--transition)}
.gallery-thumb.active{border-color:var(--primary)}
.gallery-thumb img,
.gallery-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb .thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}

/* Flechas de la galería. pan-y deja que el dedo siga haciendo scroll vertical
   mientras el deslizamiento horizontal se usa para cambiar de imagen. */
.gallery-stage{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.gallery-stage img{-webkit-user-drag:none}
.gallery-nav{
  position:absolute;top:calc(50% - 6px);transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;border:none;
  background:rgba(255,255,255,.9);color:var(--primary);
  font-size:15px;cursor:pointer;display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.18);transition:background .2s,transform .15s;z-index:2;
}
.gallery-stage.has-nav .gallery-nav{display:flex}
.gallery-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.gallery-nav.prev{left:12px}
.gallery-nav.next{right:12px}
.gallery-counter{
  position:absolute;right:12px;bottom:24px;display:none;
  background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:20px;z-index:2;pointer-events:none;
}
.gallery-stage.has-nav .gallery-counter{display:block}
@media (max-width:600px){
  .gallery-nav{width:36px;height:36px;font-size:13px}
  .gallery-nav.prev{left:8px}
  .gallery-nav.next{right:8px}
}

.product-info-panel{}
.product-info-panel h1{font-size:28px;font-weight:800;color:var(--dark);margin-bottom:18px;line-height:1.3}
.price-block{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.price-block .price-main{font-size:30px}
.price-block .price-original{font-size:17px}
.discount-tag{background:#fef2f2;color:var(--danger);font-size:13px;font-weight:700;padding:4px 10px;border-radius:20px}
.product-desc{color:var(--gray-500);line-height:1.8;margin:20px 0;font-size:15px}
.option-group{margin-bottom:20px}
.option-label{font-size:14.5px;font-weight:600;color:var(--dark);margin-bottom:10px}
.option-label span{color:var(--primary);font-weight:700}
.size-options,.color-options{display:flex;gap:8px;flex-wrap:wrap}
.size-btn{padding:9px 18px;border:2px solid var(--gray-300);border-radius:var(--radius-xs);font-size:14.5px;font-weight:600;background:white;color:var(--dark);cursor:pointer;transition:var(--transition)}
.size-btn:hover{border-color:var(--primary);color:var(--primary)}
.size-btn.active{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
.size-btn.sold-out{position:relative;color:var(--gray-300);border-color:var(--gray-200);background:var(--gray-100);cursor:not-allowed;text-decoration:line-through}
.size-btn.sold-out:hover{border-color:var(--gray-200);color:var(--gray-300)}
/* Texto de la talla/color elegido junto a su etiqueta */
.opt-current{font-weight:700;color:var(--primary)}
.opt-current.opt-hint{color:var(--gray-400);font-weight:600;font-style:italic}
/* Configurador "faja por faja": se reinicia y resalta tras añadir cada faja */
.faja-config{border-radius:var(--radius-sm);transition:box-shadow .2s}
.faja-config.flash{animation:fajaFlash .7s ease}
@keyframes fajaFlash{
  0%{box-shadow:0 0 0 0 rgba(26,92,46,0)}
  25%{box-shadow:0 0 0 3px rgba(26,92,46,.28)}
  100%{box-shadow:0 0 0 0 rgba(26,92,46,0)}
}
.faja-config-head{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--primary);margin-bottom:12px;padding:8px 12px;background:var(--primary-bg);border-radius:var(--radius-xs)}
.faja-config-head i{font-size:14px}
/* Mini-carrito del producto: las combinaciones (talla·color) ya añadidas */
.pcart-box{margin:16px 0 4px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);background:var(--gray-50);padding:12px 14px}
.pcart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14.5px;font-weight:700;color:var(--dark);margin-bottom:8px}
.pcart-head i{color:var(--primary)}
.pcart-link{font-size:13.5px;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pcart-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--gray-200)}
.pcart-meta{font-size:14.5px;font-weight:600;color:var(--dark)}
.pcart-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.qty-control.mini{border-width:1.5px;border-radius:var(--radius-xs)}
.qty-control.mini .qty-btn{width:28px;height:28px;font-size:12px}
.qty-control.mini .qty-num{min-width:26px;text-align:center;font-size:14px;font-weight:700}
.pcart-remove{width:30px;height:30px;flex-shrink:0;border:1.5px solid var(--gray-200);background:#fff;border-radius:var(--radius-xs);color:var(--danger);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.pcart-remove:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.color-btn{width:34px;height:34px;border-radius:50%;cursor:pointer;transition:var(--transition);outline:2.5px solid var(--gray-300);outline-offset:2px;border:3px solid white}
.color-btn.active{outline-color:var(--primary)}
.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.qty-control{display:flex;align-items:center;border:2px solid var(--gray-300);border-radius:var(--radius-sm);overflow:hidden}
.qty-btn{background:var(--gray-100);border:none;width:40px;height:40px;font-size:18px;cursor:pointer;transition:background .2s}
.qty-btn:hover{background:var(--gray-200)}
.qty-input{width:50px;text-align:center;font-size:15px;font-weight:600;border:none;outline:none;padding:8px 0}
.add-cart-btn{flex:1;background:var(--primary);color:white;padding:13px 24px;border-radius:var(--radius-sm);font-size:16px;font-weight:700;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:9px}
.add-cart-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
.whatsapp-order-btn{width:100%;padding:12px;background:#25d366;color:white;border-radius:var(--radius-sm);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .2s;margin-top:10px}
.whatsapp-order-btn:hover{background:#1da851}
.product-meta{border-top:1px solid var(--gray-200);padding-top:20px;margin-top:24px}
.meta-row{display:flex;gap:10px;font-size:15px;margin-bottom:10px;align-items:flex-start}
.meta-row .meta-key{font-weight:600;color:var(--gray-800);min-width:100px;flex-shrink:0}
.meta-row .meta-val{color:var(--gray-500)}

/* ── CART ── */
.cart-page{padding:44px 0}
.page-title{font-size:26px;font-weight:800;color:var(--primary-dark);margin-bottom:28px;display:flex;align-items:center;gap:12px}
.page-title i{color:var(--primary)}
.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:28px}
.cart-item{background:white;border-radius:var(--radius);padding:16px;display:flex;gap:16px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);margin-bottom:12px;align-items:center}
.cart-item-img{width:88px;height:108px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--gray-100)}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-img .no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.cart-item-img .no-img i{font-size:30px;color:var(--gray-300)}
.cart-item-info{flex:1}
.cart-item-name{font-weight:600;font-size:15px;margin-bottom:4px}
.cart-item-meta{font-size:13.5px;color:var(--gray-500);margin-bottom:10px}
.cart-item-bottom{display:flex;align-items:center;gap:10px}
.cart-item-price{font-size:16px;font-weight:700;color:var(--primary);margin-left:auto}
.btn-remove{background:none;color:var(--danger);font-size:15px;padding:5px 9px;border-radius:6px;transition:background .2s}
.btn-remove:hover{background:#fef2f2}

.cart-summary{background:white;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);height:fit-content;position:sticky;top:90px}
.cart-summary h3{font-size:17px;font-weight:700;margin-bottom:20px;color:var(--dark)}
.summary-row{display:flex;justify-content:space-between;font-size:15px;padding:9px 0;border-bottom:1px solid var(--gray-100)}
.summary-total-row{display:flex;justify-content:space-between;padding-top:14px;margin-top:4px}
.summary-total-row .label{font-size:16px;font-weight:700}
.summary-total{font-size:22px;font-weight:800;color:var(--primary)}
.checkout-btn{width:100%;margin-top:18px;padding:14px;background:var(--primary);color:white;border-radius:var(--radius-sm);font-size:16px;font-weight:700;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:9px}
.checkout-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
.wa-btn{width:100%;margin-top:10px;padding:13px;background:#25d366;color:white;border-radius:var(--radius-sm);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s}
.wa-btn:hover{background:#1da851}
.empty-cart{text-align:center;padding:80px 24px;background:white;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.empty-cart i{font-size:64px;color:var(--gray-300);margin-bottom:20px}
.empty-cart h2{font-size:22px;margin-bottom:8px}
.empty-cart p{color:var(--gray-400);margin-bottom:24px}

/* Checkout form */
.checkout-form{background:white;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);margin-bottom:16px}
.checkout-form h3{font-size:16px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:9px;color:var(--dark)}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:80px 24px}
.empty-state i{font-size:56px;color:var(--gray-300);margin-bottom:18px}
.empty-state h3{font-size:20px;margin-bottom:8px;color:var(--gray-800)}
.empty-state p{color:var(--gray-500);font-size:15.5px;margin-bottom:20px}

/* ── TOAST ── */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--primary-dark);color:white;padding:14px 20px;border-radius:var(--radius-sm);font-size:15px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.2);display:flex;align-items:center;gap:9px;animation:slideRight .3s ease,fadeOut .3s ease 3s forwards;max-width:340px}
.toast.success{background:var(--primary)}
.toast.error{background:var(--danger)}
.toast i{font-size:16px;flex-shrink:0}
@keyframes fadeOut{to{opacity:0;transform:translateX(120%)}}

/* ── FOOTER ── */
footer{background:var(--primary-dark);color:rgba(255,255,255,.75);padding:56px 0 24px;margin-top:64px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;margin-bottom:44px}
.footer-col h4{color:white;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px}
.footer-col p,.footer-col a{font-size:15px;line-height:1.9;display:block;color:rgba(255,255,255,.78);transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-logo img{height:72px;width:72px;border-radius:50%;object-fit:cover;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:14px;color:rgba(255,255,255,.6)}
.social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.social-link{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:50px;font-size:14.5px;font-weight:700;color:white;transition:var(--transition);text-decoration:none;flex-shrink:0;border:none}
.social-link i{font-size:15px}
.social-link.fb{background:#1877F2}
.social-link.ig{background:linear-gradient(135deg,#833ab4 0%,#fd1d1d 50%,#fcb045 100%)}
.social-link.tt{background:#111;border:1px solid rgba(255,255,255,.2)}
.social-link.wa{background:#25D366}
.social-link:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.4);filter:brightness(1.15)}

/* ── REVIEWS SLIDER ── */
.reviews-section{background:var(--primary-dark);overflow:hidden;margin-top:0}
.reviews-outer{position:relative;padding:0 54px}
.reviews-viewport{overflow:hidden;border-radius:16px}
.reviews-track{display:flex;gap:20px;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.review-card{flex:0 0 calc(33.333% - 14px);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:16px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.review-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.review-card-img-wrap{aspect-ratio:3/4;overflow:hidden;background:var(--primary)}
.review-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.review-card:hover .review-card-img{transform:scale(1.05)}
.review-card-body{padding:18px 20px}
.review-stars{color:#fbbf24;font-size:16px;letter-spacing:3px;margin-bottom:8px}
.review-name{color:white;font-weight:700;font-size:15px}
.review-location{color:rgba(255,255,255,.68);font-size:13px;margin-top:2px;display:flex;align-items:center;gap:5px}
.review-text{color:rgba(255,255,255,.75);font-size:13px;margin-top:10px;line-height:1.75;font-style:italic}
.reviews-btn{position:absolute;top:40%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.22);color:white;font-size:16px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.reviews-btn.prev{left:0}
.reviews-btn.next{right:0}
.reviews-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-50%) scale(1.08)}
.reviews-dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.review-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;transition:all .3s;padding:0}
.review-dot.active{background:var(--accent);width:24px;border-radius:4px}
/* ── GALERÍA DE TESTIMONIOS (capturas reales, filmstrip responsivo) ── */
.treviews{position:relative;padding:0 56px;max-width:1240px;margin:0 auto}
.treviews-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 4px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.treviews-track::-webkit-scrollbar{display:none}
.treview-card{scroll-snap-align:center;flex:0 0 auto;width:290px;max-width:80vw;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.4);cursor:zoom-in;transition:transform .3s,box-shadow .3s}
.treview-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.treview-shot{height:460px;background:#0c2413;display:flex;align-items:center;justify-content:center;overflow:hidden}
.treview-shot img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.treview-card figcaption{padding:13px 16px;font-size:13px;color:#3a3a3a;font-style:italic;text-align:center;line-height:1.5}
.treviews-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:5}
.treviews-nav:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-50%) scale(1.08)}
.treviews-nav.prev{left:4px}
.treviews-nav.next{right:4px}
.treviews-dots{margin-top:26px}
@media(max-width:768px){
  .treviews{padding:0 12px}
  .treviews-nav{display:none}
  .treview-shot{height:56vh;max-height:440px}
}
@media(max-width:520px){
  .treview-card{width:82vw}
  .treview-shot{height:68vh;max-height:520px}
}
/* ── Lightbox (zoom de captura) ── */
.tlightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.tlightbox.open{display:flex}
.tlightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
/* ── Tarjetas de testimonio en el dashboard ── */
.test-card{position:relative;border:1px solid var(--gray-200);border-radius:10px;overflow:hidden;background:var(--gray-50);aspect-ratio:3/4}
.test-card img{width:100%;height:100%;object-fit:cover;display:block}
.test-card.inactive img{opacity:.4}
.test-badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;padding:2px 8px;border-radius:20px}
.test-card-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .2s}
.test-card:hover .test-card-actions{opacity:1}
.test-card-actions button{width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.test-card-actions button:hover{background:#fff;color:var(--primary)}
.footer-contact{display:flex;align-items:center;gap:8px;font-size:15px;color:rgba(255,255,255,.78);margin-bottom:8px}
.footer-contact i{color:var(--accent);width:16px}

/* ── PAGINATION ── */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:40px}
.page-btn{width:38px;height:38px;border-radius:var(--radius-xs);border:1.5px solid var(--gray-300);background:white;font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition)}
.page-btn:hover,.page-btn.active{background:var(--primary);color:white;border-color:var(--primary)}

/* ── LOGIN PAGE ── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-dark),var(--primary));padding:24px;position:relative;width:100%;max-width:100%;overflow:hidden;overflow:clip}
.login-box{background:white;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.25);width:100%;max-width:440px;overflow:hidden;position:relative;z-index:1}
.login-header{background:linear-gradient(135deg,var(--primary-dark),var(--primary));padding:32px 32px 28px;text-align:center}
.login-header img{height:88px;width:88px;border-radius:50%;object-fit:cover;margin:0 auto 16px;box-shadow:0 4px 16px rgba(0,0,0,.45);border:3px solid rgba(255,255,255,.25)}
.login-header h1{color:white;font-size:22px;font-weight:700}
.login-header p{color:rgba(255,255,255,.75);font-size:14px;margin-top:4px}
.login-body{padding:32px}
.login-tabs{display:flex;border-bottom:2px solid var(--gray-200);margin-bottom:24px}
.login-tab{flex:1;padding:10px;font-size:15px;font-weight:600;text-align:center;cursor:pointer;color:var(--gray-400);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}
.login-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.login-form{display:none}.login-form.active{display:block}
.form-field{margin-bottom:20px}
.form-field label{display:block;font-size:14px;font-weight:600;color:var(--gray-800);margin-bottom:8px;line-height:1.35}
.input-icon{position:relative}
.input-icon i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--gray-400);font-size:15px}
.input-icon input{width:100%;padding:13px 14px 13px 42px;border:1.5px solid var(--gray-300);border-radius:var(--radius-sm);font-size:15px;transition:border-color .2s}
.input-icon input:focus{outline:none;border-color:var(--primary)}
.input-icon input.has-toggle{padding-right:44px}
.input-icon .pw-toggle{position:absolute;right:4px;top:50%;left:auto;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray-400);padding:8px 10px;font-size:15px;line-height:1}
.input-icon .pw-toggle:hover{color:var(--primary)}
.input-icon .pw-toggle i{position:static;left:auto;top:auto;transform:none;color:inherit;font-size:inherit}

/* ── CAMPO DE FECHA ───────────────────────────────────────────────────────
   input[type=date] usa el control NATIVO del sistema. En iOS (Safari) eso
   significa: fondo gris propio, un ancho minimo intrinseco que desborda el
   contenedor, y el valor descolocado respecto a los demas campos. En Chrome
   de escritorio no se nota, por eso solo se veia mal en el celular.
   Estas reglas lo dejan identico al resto de los campos del formulario. */
.input-icon input[type="date"]{
  -webkit-appearance:none;   /* quita el relleno gris y el borde nativo de iOS */
  appearance:none;
  background-color:#fff;
  min-width:0;               /* sin esto el ancho intrinseco se sale de la tarjeta */
  width:100%;
  line-height:1.2;           /* iguala la altura con los campos de texto */
  font-family:inherit;
  color:var(--dark);
}
/* iOS alinea el valor a su manera; lo dejamos a la izquierda como los demas */
.input-icon input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
  margin:0;
}
/* El icono del calendario, pegado a la derecha y discreto */
.input-icon input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:auto;
  opacity:.5;
  cursor:pointer;
}
.input-icon input[type="date"]:focus::-webkit-calendar-picker-indicator{opacity:.8}
/* Vacio (es required, asi que es :invalid) se ve gris como un placeholder */
.input-icon input[type="date"]:invalid{color:var(--gray-400)}
.form-error{color:var(--danger);font-size:13px;margin-top:12px;display:none;align-items:center;gap:6px}
.form-error.show{display:flex}
.login-btn{width:100%;padding:13px;background:var(--primary);color:white;border-radius:var(--radius-sm);font-size:15px;font-weight:700;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:9px;margin-top:20px}
.login-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
/* En celular los campos suben a 16px: por debajo de eso iOS hace zoom
   automatico al enfocarlos y descuadra la pantalla. Aplica a login,
   registro, recuperar y restablecer contrasena. */
@media(max-width:600px){
  .input-icon input{font-size:16px;padding:14px 14px 14px 42px}
}
.login-divider{text-align:center;font-size:13px;color:var(--gray-400);margin:16px 0}
.social-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--gray-400);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.social-divider::before,.social-divider::after{content:'';flex:1;height:1px;background:var(--gray-200)}
.social-btn{width:100%;padding:11px;border:1.5px solid var(--gray-300);border-radius:var(--radius-sm);background:#fff;font-size:14px;font-weight:600;color:var(--dark);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:var(--transition)}
.social-btn:hover{background:var(--gray-50,#f9fafb);border-color:var(--gray-400)}
.social-btn.fb{background:#1877F2;border-color:#1877F2;color:#fff}
.social-btn.fb:hover{background:#0d65d9;border-color:#0d65d9}
#googleBtnArea{display:flex;justify-content:center}

/* ── DASHBOARD ── */
.dash-layout{display:flex;min-height:100vh}
.dash-sidebar{width:280px;background:var(--primary-dark);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;overflow-y:auto}
/* El logo del panel es un enlace al inicio de la tienda (como en el resto del sitio). */
.dash-logo{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;transition:background .2s}
.dash-logo:hover{background:rgba(255,255,255,.06)}
.dash-logo:hover img{box-shadow:0 2px 12px rgba(0,0,0,.5)}
.dash-logo img{height:58px;width:58px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.35);background:#fff}
.dash-logo-text{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.dash-logo-text strong{color:#fff;font-family:'Playfair Display',serif;font-size:19px;font-weight:700;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-logo-text small{color:var(--accent);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-top:2px}
.dash-nav{flex:1;padding:12px 10px}
.dash-nav-section{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);padding:12px 14px 6px}
.dash-nav-item{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:var(--radius-sm);font-size:15.5px;cursor:pointer;transition:var(--transition);color:rgba(255,255,255,.72);margin-bottom:3px;border:none;background:none;width:100%;text-align:left}
.dash-nav-item:hover,.dash-nav-item.active{background:rgba(255,255,255,.1);color:white}
.dash-nav-item.active{background:var(--primary-light);color:white}
.dash-nav-item i{width:21px;text-align:center;font-size:17px}
/* "Ver tienda" abre la tienda en otra pestaña; va arriba del todo y con el
   dorado de la marca para que no se confunda con las secciones del panel. */
.dash-nav-store{margin:10px 0 4px;color:var(--accent);font-weight:600;border:1px solid rgba(201,169,110,.35)}
.dash-nav-store:hover{background:rgba(201,169,110,.15);color:var(--accent)}
.dash-user{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.5)}
.dash-user strong{display:block;color:rgba(255,255,255,.85);margin-bottom:2px}

.dash-main{margin-left:280px;flex:1;padding:28px;background:var(--gray-100);min-height:100vh}
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:14px}
.dash-header h1{font-size:22px;font-weight:800;color:var(--primary-dark)}
.dash-header-sub{font-size:13px;color:var(--gray-500);margin-top:2px}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:white;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:flex-start}
.stat-info .stat-label{font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.stat-info .stat-value{font-size:28px;font-weight:800;color:var(--dark)}
.stat-info .stat-sub{font-size:12px;color:var(--gray-400);margin-top:4px}
.stat-icon-wrap{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.stat-icon-wrap i{font-size:20px}
.stat-green .stat-icon-wrap{background:#dcfce7;color:var(--success)}
.stat-blue .stat-icon-wrap{background:#dbeafe;color:var(--info)}
.stat-amber .stat-icon-wrap{background:#fef3c7;color:var(--warning)}
.stat-red .stat-icon-wrap{background:#fee2e2;color:var(--danger)}
.stat-purple .stat-icon-wrap{background:#ede9fe;color:#8b5cf6}

.table-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);overflow:hidden}
.table-toolbar{padding:16px 20px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--gray-200);flex-wrap:wrap}
.table-search{flex:1;min-width:180px;padding:9px 14px 9px 36px;border:1.5px solid var(--gray-300);border-radius:var(--radius-xs);font-size:14px;background:white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat 10px center / 16px;transition:border-color .2s}
.table-search:focus{outline:none;border-color:var(--primary)}
.data-table{width:100%;border-collapse:collapse}
.data-table th{background:var(--gray-50);text-align:left;padding:12px 16px;font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--gray-200);white-space:nowrap}
.data-table td{padding:14px 16px;border-bottom:1px solid var(--gray-100);font-size:14px;vertical-align:middle}
.data-table tr:last-child td{border:none}
.data-table tr:hover td{background:var(--gray-50)}
.table-img{width:46px;height:56px;border-radius:6px;object-fit:cover}
.table-no-img{width:46px;height:56px;border-radius:6px;background:var(--gray-100);display:flex;align-items:center;justify-content:center}
.table-no-img i{font-size:20px;color:var(--gray-300)}
.action-btns{display:flex;gap:6px}
.btn-edit{background:var(--primary-bg);color:var(--primary);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;transition:var(--transition);display:flex;align-items:center;gap:5px}
.btn-edit:hover{background:var(--primary);color:white}
.btn-del{background:#fef2f2;color:var(--danger);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;transition:var(--transition);display:flex;align-items:center;gap:5px}
.btn-del:hover{background:var(--danger);color:white}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px}
.badge-active{background:#dcfce7;color:#166534}
.badge-inactive{background:var(--gray-100);color:var(--gray-500)}
.badge-pending{background:#fef3c7;color:#92400e}
.badge-confirmed{background:#dbeafe;color:#1e40af}
.badge-processing{background:#ede9fe;color:#6d28d9}
.badge-shipped{background:#cffafe;color:#164e63}
.badge-delivered{background:#dcfce7;color:#166534}
.badge-cancelled{background:#fee2e2;color:#991b1b}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(2px)}
.modal-overlay.hidden{display:none}
.modal{background:white;border-radius:var(--radius);padding:28px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto}
.modal-sm{max-width:440px}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.modal-header h2{font-size:19px;font-weight:700;color:var(--primary-dark)}
.modal-close{background:var(--gray-100);border:none;width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;color:var(--gray-600)}
.modal-close:hover{background:var(--gray-200)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:13px;font-weight:600;color:var(--gray-800)}
.form-input,.form-select,.form-textarea{padding:10px 14px;border:1.5px solid var(--gray-300);border-radius:var(--radius-xs);font-size:14px;font-family:inherit;transition:border-color .2s;background:white}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary)}
.form-textarea{resize:vertical;min-height:90px}
.form-hint{font-size:11px;color:var(--gray-400)}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--gray-200)}
.btn-cancel{background:var(--gray-100);color:var(--dark);padding:10px 22px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;transition:background .2s}
.btn-cancel:hover{background:var(--gray-200)}
.btn-save{background:var(--primary);color:white;padding:10px 28px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;transition:var(--transition);display:flex;align-items:center;gap:7px}
.btn-save:hover{background:var(--primary-dark)}

/* Tabs */
.tab-bar{display:flex;gap:2px;margin-bottom:22px;background:var(--gray-100);border-radius:8px;padding:4px;width:fit-content}
.tab-btn{padding:8px 18px;border-radius:6px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:var(--gray-500);transition:all .2s}
.tab-btn.active{background:white;color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* Image preview */
.img-preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.img-preview-item{position:relative}
.img-preview-item img{width:80px;height:96px;object-fit:cover;border-radius:8px;border:1.5px solid var(--gray-200)}
.img-preview-item .img-label{font-size:10px;text-align:center;color:var(--primary);font-weight:700;margin-top:3px}
.img-preview-item .img-remove{position:absolute;top:-7px;right:-7px;background:var(--danger);color:white;border:none;border-radius:50%;width:20px;height:20px;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Reordenar arrastrando. Va acotado a #imgPreview a propósito: la vista previa
   del video reutiliza .img-preview-item y esa no se arrastra.
   touch-action:none es lo que permite arrastrar con el dedo sin que el móvil
   interprete el gesto como scroll de la página. */
#imgPreview .img-preview-item{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
#imgPreview .img-preview-item img{-webkit-user-drag:none;pointer-events:none}
#imgPreview .img-preview-item:active{cursor:grabbing}

/* "Principal" se pinta en todas pero solo se ve en la primera. Con visibility
   (y no display) las miniaturas miden todas lo mismo, así que la fila no pega
   un brinco cuando la etiqueta salta de una a otra durante el arrastre. */
#imgPreview .img-preview-item .img-label{visibility:hidden}
#imgPreview .img-preview-item:first-child .img-label{visibility:visible}

/* El video es una miniatura más de la tira: se arrastra igual que las imágenes,
   así que se ve igual (mismo tamaño) pero con un play encima para distinguirlo. */
#imgPreview .img-preview-item.is-video video{
  width:80px;height:96px;object-fit:cover;border-radius:8px;
  border:1.5px solid var(--accent);background:#000;pointer-events:none;display:block;
}
#imgPreview .img-preview-item.is-video .video-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;text-shadow:0 1px 6px rgba(0,0,0,.7);pointer-events:none;
}

/* El hueco que deja la miniatura mientras la arrastras. */
#imgPreview .img-preview-item.is-placeholder{opacity:.4}
#imgPreview .img-preview-item.is-placeholder img,
#imgPreview .img-preview-item.is-placeholder video{border:1.5px dashed var(--primary)}
.img-ghost video{border-color:var(--primary)!important}

/* El clon flotante que sigue al cursor. Vive en <body>, por eso no lleva el
   prefijo #imgPreview. pointer-events:none es lo que deja que elementFromPoint
   "vea" la miniatura de debajo en vez de al propio fantasma. */
.img-ghost{
  position:fixed;
  z-index:9999;
  margin:0;
  pointer-events:none;
  opacity:.95;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.img-ghost img{border-color:var(--primary)!important}
.img-ghost .img-remove,
.img-ghost .img-label{display:none}

.drag-area{border:2px dashed var(--gray-300);border-radius:var(--radius-sm);padding:24px;text-align:center;cursor:pointer;transition:border-color .2s;color:var(--gray-500);font-size:14px}
.drag-area:hover{border-color:var(--primary);color:var(--primary)}
.drag-area i{font-size:28px;margin-bottom:8px;display:block}

/* Tags */
.tags-wrap{border:1.5px solid var(--gray-300);border-radius:var(--radius-xs);padding:8px;display:flex;flex-wrap:wrap;gap:6px;cursor:text;transition:border-color .2s;min-height:44px}
.tags-wrap:focus-within{border-color:var(--primary)}
.tag-pill{background:var(--primary-bg);color:var(--primary);border-radius:20px;padding:3px 10px;font-size:12px;display:flex;align-items:center;gap:5px}
.tag-pill button{background:none;border:none;cursor:pointer;font-size:13px;color:var(--primary);line-height:1}
.tag-input-field{border:none;outline:none;font-size:14px;min-width:80px;flex:1;background:transparent}

/* Toggle */
.toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;background:var(--gray-300);border-radius:12px;cursor:pointer;transition:.25s}
.toggle-track::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.25s}
.toggle input:checked+.toggle-track{background:var(--primary)}
.toggle input:checked+.toggle-track::before{transform:translateX(20px)}

/* Color swatch */
.color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;transition:var(--transition);outline:2px solid var(--gray-200);outline-offset:2px;border:3px solid white}
.color-swatch.active{outline-color:var(--primary)}
.color-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.color-chip{display:flex;align-items:center;gap:5px;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:20px;padding:4px 10px;font-size:12px}
.color-chip-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}
.color-chip button{background:none;border:none;cursor:pointer;color:var(--gray-500);font-size:13px;line-height:1}

/* Confirm dialog */
.confirm-dialog{background:white;border-radius:var(--radius);padding:32px;max-width:380px;width:100%;text-align:center}
.confirm-icon{font-size:48px;margin-bottom:14px}
.confirm-dialog h3{font-size:18px;font-weight:700;margin-bottom:8px}
.confirm-dialog p{color:var(--gray-500);font-size:14px;margin-bottom:24px}
.confirm-btns{display:flex;gap:10px;justify-content:center}

/* Finance */
.finance-card{background:white;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);margin-bottom:20px}
.finance-card h3{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:18px;display:flex;align-items:center;gap:9px}
.finance-card h3 i{color:var(--primary)}
.chart-wrap{position:relative;height:260px}
.expense-form{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;align-items:flex-end;margin-bottom:18px;flex-wrap:wrap}
.order-status-select{padding:6px 10px;border:1.5px solid var(--gray-300);border-radius:6px;font-size:12px;background:white;cursor:pointer}
.section-divider{height:1px;background:var(--gray-200);margin:24px 0}

/* social-link definido en bloque footer arriba */

/* ── WHATSAPP FLOATING BUTTON ── */
.wa-float{
  position:fixed;bottom:28px;right:28px;z-index:800;
  display:flex;align-items:center;gap:10px;
  background:#25d366;color:white;
  border-radius:40px;padding:13px 20px;
  box-shadow:0 6px 24px rgba(37,211,102,.45);
  font-weight:700;font-size:14px;
  transition:var(--transition);text-decoration:none;
  animation:waPulse 2.5s ease-in-out infinite;
}
.wa-float:hover{background:#1da851;transform:scale(1.05);box-shadow:0 8px 32px rgba(37,211,102,.55);animation:none}
.wa-float i{font-size:22px;flex-shrink:0}
@keyframes waPulse{0%,100%{box-shadow:0 6px 24px rgba(37,211,102,.45)}50%{box-shadow:0 6px 32px rgba(37,211,102,.7),0 0 0 8px rgba(37,211,102,.12)}}

/* ── ABOUT / FAQ PAGES ── */
.page-hero{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:white;padding:64px 0;text-align:center}
.page-hero h1{font-size:clamp(26px,5vw,44px);font-weight:800;margin-bottom:12px}
.page-hero p{font-size:16px;opacity:.82;max-width:540px;margin:0 auto}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about-text h2{font-size:26px;font-weight:800;color:var(--primary-dark);margin-bottom:16px}
.about-text p{color:var(--gray-500);line-height:1.8;font-size:15px;margin-bottom:14px}
.about-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.about-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--gray-200)}

.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:48px}
.info-card{background:white;border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);text-align:center}
.info-card .ic-icon{width:56px;height:56px;background:var(--primary-bg);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:24px;color:var(--primary)}
.info-card h3{font-weight:700;font-size:15px;margin-bottom:8px}
.info-card p{font-size:13px;color:var(--gray-500);line-height:1.6}

.wa-group-btn{display:inline-flex;align-items:center;gap:10px;background:#25d366;color:white;padding:15px 32px;border-radius:30px;font-weight:700;font-size:16px;text-decoration:none;transition:var(--transition);box-shadow:0 4px 20px rgba(37,211,102,.35);margin-top:24px}
.wa-group-btn:hover{background:#1da851;transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,211,102,.45)}
.wa-group-btn i{font-size:22px}

.faq-list{display:flex;flex-direction:column;gap:16px;max-width:820px;margin:0 auto}
.faq-item{background:white;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);overflow:hidden}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;cursor:pointer;font-weight:700;font-size:16px;color:var(--dark);gap:16px;user-select:none;transition:background .2s}
.faq-question:hover{background:var(--gray-50)}
.faq-question .faq-num{width:32px;height:32px;background:var(--primary);color:white;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.faq-question .faq-chevron{color:var(--gray-400);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
/* La altura la calcula el JS con el contenido real (toggleFaq). Este 2000px
   es solo el respaldo por si el JS no corre: antes habia un 600px fijo y las
   respuestas largas (la de la tienda fisica, con dos tarjetas y el mapa)
   quedaban cortadas por el overflow:hidden. */
.faq-item.open .faq-answer{max-height:2000px}
.faq-answer-inner{padding:0 24px 24px;color:var(--gray-600);line-height:1.8;font-size:15px}
.faq-answer-inner p{margin-bottom:10px}
.faq-answer-inner strong{color:var(--dark)}

.hours-table{width:100%;border-collapse:collapse;margin-top:12px}
.hours-table td{padding:8px 0;font-size:14px;border-bottom:1px solid var(--gray-100)}
/* Sin ancho fijo: en una tarjeta angosta, forzar 160px aqui dejaba a la hora
   sin espacio y "11:00 am - 6:30 pm" se partia en cuatro renglones. */
.hours-table td:first-child{font-weight:600;color:var(--dark);white-space:nowrap;padding-right:18px}
.hours-table td:last-child{color:var(--gray-500);white-space:nowrap;text-align:right}

.wa-change-btn{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:white;padding:12px 24px;border-radius:24px;font-weight:700;font-size:14px;text-decoration:none;transition:var(--transition);margin-top:16px;box-shadow:0 3px 14px rgba(37,211,102,.3)}
.wa-change-btn:hover{background:#1da851;transform:translateY(-2px)}

/* ── SELLOS DE CONFIANZA ── */
.trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 28px;padding:22px 0;border-top:1px solid rgba(255,255,255,.08);margin-top:24px}
.trust-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.72);font-size:13.5px;font-weight:500;letter-spacing:.3px}
.trust-item i{color:var(--accent);font-size:14px}

/* ── BURGER MENU + MOBILE DRAWER ── */
.burger-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);border-radius:10px;cursor:pointer;padding:10px;flex-shrink:0;order:-1;transition:background .2s}
.burger-btn:hover{background:rgba(255,255,255,.22)}
.burger-btn span{display:block;width:100%;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.burger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger-btn.open span:nth-child(2){opacity:0}
.burger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;opacity:0;visibility:hidden;transition:opacity .25s}
.mobile-backdrop.open{opacity:1;visibility:visible}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .product-detail-grid{grid-template-columns:1fr;gap:32px}
  .cart-grid{grid-template-columns:1fr}
  .tienda-layout{flex-direction:column}
  .sidebar{width:100%}
  .dash-sidebar{position:static;width:100%;height:auto}
  .dash-layout{flex-direction:column}
  .dash-main{margin-left:0}
  .about-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:768px){
  .burger-btn{display:flex}
  .nav-bar{position:fixed;top:0;left:-100%;width:280px;max-width:80vw;height:100vh;height:100dvh;z-index:300;background:var(--primary-dark);border-top:none;box-shadow:4px 0 32px rgba(0,0,0,.4);overflow-y:auto;transition:left .3s cubic-bezier(.4,0,.2,1);padding-top:64px}
  .nav-bar.open{left:0}
  .nav-bar ul{flex-direction:column;padding:0;gap:0;max-width:none;overflow:visible}
  .nav-bar li{width:100%}
  .nav-bar a{display:flex;align-items:center;gap:12px;width:100%;padding:15px 22px;font-size:15.5px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.06);white-space:normal}
  .nav-bar a i{width:22px;text-align:center;font-size:16px}
  .nav-bar a:hover,.nav-bar a.active{background:var(--primary)}
  .header-top{padding:10px 14px;gap:10px;flex-wrap:wrap}
  .logo-link img{height:74px;width:74px}
  .search-bar{order:3;flex:1 1 100%;max-width:none;margin-top:4px}
  .search-bar input{padding:13px 18px;font-size:16px}
  .search-bar button{padding:13px 20px;font-size:17px}
  .header-right{margin-left:auto;gap:10px}
  .header-icon-btn{padding:9px 13px;font-size:11px;border-radius:12px}
  .header-icon-btn i{font-size:22px}
  .header-icon-btn span:not(.cart-badge-count){display:none}
  .header-login-btn,.user-menu-btn{padding:11px 20px;font-size:13.5px}
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .form-grid{grid-template-columns:1fr}
  .hero{padding:56px 18px;min-height:auto}
  .hero h1{font-size:clamp(34px,8vw,52px)!important;line-height:1.05!important}
  .hero p{font-size:14px!important;margin-bottom:24px!important}
  .hero-eyebrow{font-size:11px!important;padding:5px 12px;letter-spacing:2.5px!important}
  .hero-actions{flex-direction:column;gap:10px;width:100%}
  .hero-actions .btn{width:100%;justify-content:center;padding:14px 20px}
  .expense-form{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .wa-float{padding:11px 16px;font-size:13px;bottom:20px;right:16px}
  .wa-float i{font-size:20px}
}
@media(max-width:520px){
  .header-top{padding:9px 12px;gap:8px}
  .logo-link img{height:64px;width:64px}
  .search-bar input{padding:12px 16px;font-size:16px}
  .search-bar button{padding:12px 18px}
  .user-menu-btn{padding:10px 15px;font-size:12.5px}
  .user-menu-btn span:not(.user-menu-arrow){max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-login-btn{padding:10px 18px;font-size:12.5px}
  .products-grid{grid-template-columns:1fr 1fr;gap:10px}
  .hero{min-height:auto;padding:44px 16px}
  .hero h1{font-size:clamp(30px,9vw,42px)!important;letter-spacing:0!important}
  .hero p{font-size:13px!important;line-height:1.55!important}
  .section{padding:48px 0}
  .container{padding:0 14px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px}
  .wa-float{padding:0;width:52px;height:52px;border-radius:50%;justify-content:center;bottom:16px;right:14px;gap:0}
  .wa-float span{display:none}
  .wa-float i{font-size:22px}
  .cart-summary{padding:18px;border-radius:6px}
  .checkout-btn{font-size:14px;padding:12px 16px}
  .modal{padding:20px;border-radius:12px}
  .login-box{margin:14px;border-radius:12px}
  .login-header{padding:24px 22px}
  .login-body{padding:22px}
}

/* ── DASHBOARD MOVIL ── */
@media(max-width:1024px){
  .dash-sidebar{position:relative;width:100%;height:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .dash-logo{flex-shrink:0;border-bottom:none;border-right:1px solid rgba(255,255,255,.08)}
  .dash-nav{flex:1;display:flex;overflow-x:auto;padding:8px 6px;gap:4px;align-items:center;scrollbar-width:none}
  .dash-nav::-webkit-scrollbar{display:none}
  .dash-nav-section{display:none}
  .dash-nav-item{margin-bottom:0;white-space:nowrap;padding:10px 15px;font-size:14px;flex-shrink:0}
  .dash-nav-item i{font-size:16px}
  .dash-user{display:none}
  .dash-main{margin-left:0;padding:18px 14px}
}
@media(max-width:768px){
  .dash-logo{padding:12px 14px}
  .dash-logo img{height:44px;width:44px}
  .dash-logo-text strong{font-size:15px}
  .dash-logo-text small{font-size:10px;letter-spacing:1.5px}
  .dash-header h1{font-size:18px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:14px}
  .stats-grid .stat-card h3{font-size:11px}
  .expense-form{grid-template-columns:1fr}
  .chart-wrap{height:220px}
  table{font-size:12px}
  td,th{padding:8px 6px!important}
}

/* ── POPUP "AGREGADO AL CARRITO" ─────────────────────────────────────────── */
.added-cart-overlay{position:fixed;inset:0;z-index:4000;display:flex;align-items:flex-start;justify-content:center;padding:80px 16px 16px;background:rgba(7,26,12,.45);opacity:0;visibility:hidden;transition:opacity .2s ease}
.added-cart-overlay.open{opacity:1;visibility:visible}
.added-cart-panel{background:#fff;width:100%;max-width:420px;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.28);padding:22px;position:relative;transform:translateY(-14px);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.added-cart-overlay.open .added-cart-panel{transform:translateY(0)}
.added-cart-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:24px;line-height:1;color:var(--gray-400);cursor:pointer;transition:color .2s}
.added-cart-close:hover{color:var(--dark)}
.added-cart-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-right:24px}
.added-cart-check{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 12px rgba(26,92,46,.35)}
.added-cart-title{font-family:'Playfair Display',serif;font-size:19px;font-weight:800;color:var(--dark);line-height:1.15}
.added-cart-sub{font-size:12.5px;color:var(--gray-500);margin-top:2px}
.added-cart-body{display:flex;gap:14px;align-items:center;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:12px;margin-bottom:18px}
.added-cart-thumb{width:64px;height:64px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center}
.added-cart-thumb img{width:100%;height:100%;object-fit:contain}
.added-cart-thumb .no-img{color:var(--gray-300);font-size:24px}
.added-cart-info{min-width:0}
.added-cart-name{font-weight:700;font-size:14px;color:var(--dark);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.added-cart-meta{font-size:12.5px;color:var(--primary);font-weight:600;margin-top:4px}
.added-cart-actions{display:flex;flex-direction:column;gap:10px}
.added-cart-btn{width:100%;padding:13px;border-radius:8px;font-size:14.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:var(--transition);border:none;text-decoration:none}
.added-cart-btn.primary{background:var(--primary);color:#fff}
.added-cart-btn.primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.added-cart-btn.ghost{background:#fff;color:var(--dark);border:1.5px solid var(--gray-300)}
.added-cart-btn.ghost:hover{background:var(--gray-100)}

/* ── MODAL DE CONFIRMACIÓN DE CIERRE DE SESIÓN ── */
.logout-confirm{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(7,26,12,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .22s ease;
}
.logout-confirm.open{ opacity:1; }
.lc-card{
  background:#fff; border-radius:8px; max-width:400px; width:100%;
  padding:34px 30px 26px; text-align:center;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.96);
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.logout-confirm.open .lc-card{ transform:none; }
.lc-icon{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  display:grid; place-items:center;
  background:rgba(201,169,110,.15); color:#c9a96e; font-size:26px;
}
.lc-title{ font-family:'Playfair Display',serif; font-size:23px; color:#071a0c; margin:0 0 8px; }
.lc-text{ color:#4b5a50; font-size:15.5px; line-height:1.7; margin:0 0 26px; font-weight:400; }
.lc-actions{ display:flex; gap:12px; }
.lc-btn{
  flex:1; padding:13px 16px; border-radius:5px; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:.4px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .2s, border-color .2s, transform .2s;
}
.lc-cancel{ background:#fff; border:1px solid rgba(7,26,12,.18); color:#071a0c; }
.lc-cancel:hover{ background:#f5f0e8; border-color:rgba(7,26,12,.32); }
.lc-confirm{ background:#1a5c2e; border:1px solid #1a5c2e; color:#fff; }
.lc-confirm:hover{ background:#124020; transform:translateY(-1px); }
.lc-confirm:disabled{ opacity:.6; cursor:default; transform:none; }
@media (max-width:420px){ .lc-actions{ flex-direction:column-reverse; } }
@media (prefers-reduced-motion: reduce){ .logout-confirm, .lc-card, .lc-confirm{ transition:none; } }