/* ====== Estilo limpio inspirado en tu landing, sin Bootstrap ni jQuery ====== */
:root{
  --bg:#0b0b0f;
  --panel:#121218;
  --panel-2:#171725;
  --text:#e9e9ee;
  --muted:#a7a7c2;
  --primary:#36d17a;
  --primary-2:#2bb86a;
  --danger:#ff5b6e;
  --border:#23233a;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-soft:0 6px 18px rgba(0,0,0,.25);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, 'Noto Sans', 'Helvetica Neue', sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);}

/* Header */
.header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(11,11,15,.95), rgba(11,11,15,.75));border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.header .inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;text-decoration:none;color:var(--text)}
.brand img{width:30px;height:30px;border-radius:8px}

/* Acciones a la derecha (Carrito + Cuenta juntos) */
.header-actions{display:flex;align-items:center;gap:.75rem}
.header-actions .btn{display:inline-flex;align-items:center;gap:.35rem;height:40px;padding:0 .9rem}

/* Cart badge */
.cart-badge{position:relative;display:inline-flex;align-items:center;gap:.4rem}
.cart-badge .count{position:absolute;top:-6px;right:-8px;background:#e33;color:#fff;font-size:.78rem;font-weight:800;border-radius:999px;padding:3px 8px;border:2px solid #0b0b0f}

/* Hero */
.hero{border-bottom:1px solid var(--border)}
.hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;padding:28px 18px 10px}
.hero-copy h1{font-size:2.2rem;margin:0 0 8px}
.hero-copy .accent{color:var(--primary)}
.hero-copy p{color:var(--muted);margin:0 0 16px}
.hero-media{justify-self:end;max-width:440px}
.hero-media img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}

/* Container & sections */
.container{max-width:1100px;margin:0 auto;padding:22px 18px}
.section-title{font-size:1.6rem;margin:6px 0 14px}

/* Grid / Cards */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);overflow:hidden;display:flex;flex-direction:column}
.card .media{aspect-ratio:4/3;background:#0f0f15;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.card:hover .media img{transform:scale(1.035)}
.card .body{padding:14px;display:flex;flex-direction:column;gap:10px}
.title{font-weight:800;margin:0}
.price .now{font-weight:800}
.qty{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:6px 8px;width:max-content}
.qty button{all:unset;cursor:pointer;padding:6px 12px;border-radius:10px;background:#0f0f16;border:1px solid var(--border)}
.qty span{min-width:28px;text-align:center;font-weight:800}

/* Botones (único set, sin duplicados) */
.btn{appearance:none;border:none;cursor:pointer;border-radius:14px;padding:12px 14px;font-weight:800;transition:transform .04s ease,filter .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#07140c}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}

/* Carrito lateral */
.cart{position:fixed;right:0;top:0;height:100%;width:min(420px,92vw);background:linear-gradient(180deg,var(--panel-2),var(--panel));border-left:1px solid var(--border);box-shadow:var(--shadow);z-index:60;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column}
.cart.is-open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}
.cart-body{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.footer{margin-top:auto;padding:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.row{display:flex;justify-content:space-between;color:var(--muted)}

/* WhatsApp FAB (si lo usás) */
.whatsapp-fab{position:fixed;right:18px;bottom:18px;z-index:55}
.btn-wa{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border-radius:999px;background:#25D366;color:#061e11;font-weight:800;text-decoration:none;box-shadow:0 10px 24px rgba(37,211,102,.3)}

/* Decoración */
.bg-corner{position:fixed;left:0;bottom:0;pointer-events:none;opacity:.08;mix-blend:screen;width:min(32vw,380px);max-width:45%;transform:translate(-8%,8%)}

.Derechos{color:#ff5b6e;text-align:center;font-family:Arial, Helvetica, sans-serif;padding-bottom:30px;font-weight:bold}

/* ===== Modal Auth (único, dark) ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:1200}
.modal.hide{display:none}
.modal-box{background:#121212;color:#eaeaea;padding:2rem;border-radius:1rem;width:90%;max-width:400px;display:grid;gap:1rem;box-shadow:0 12px 24px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08)}
.modal-box h2{text-align:center;margin:0 0 .5rem;font-weight:600}
.modal-box input{background:#1c1c1c;color:#f5f5f5;border:1px solid #2a2a2a;border-radius:.6rem;padding:.8rem;outline:none}
.modal-box input:focus{border-color:#3ddc84;box-shadow:0 0 0 2px rgba(61,220,132,.2)}
.modal-box .row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}

/* Estado: Pagar deshabilitado */
#btnPagar[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed}

/* Botón WhatsApp */
.btn-whatsapp{background:#25D366;color:#fff;border:none;border-radius:.6rem;padding:.7rem 1.2rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;transition:background-color .2s ease, transform .2s ease}
.btn-whatsapp:hover{background:#1ebe5c;transform:translateY(-2px)}
.btn-whatsapp:active{transform:translateY(0)}
.btn-whatsapp:disabled{background:#9adfb8;cursor:not-allowed;opacity:.7}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:10px}
  .hero-media{justify-self:center;max-width:360px}
}
@media (max-width:540px){
  .header .inner{gap:.5rem}
  .header-actions{gap:.5rem}
  .header-actions .btn{height:36px;padding:0 .7rem}
}

/* ===== Envíos y Entregas ===== */
.info-section .policy-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-soft);
}
.info-section h3{ margin: 0 0 6px; }
.info-section .bullets{ margin: 0; padding-left: 16px; color: var(--muted); }
.info-section .row{ display:flex; gap:10px; flex-wrap: wrap; }
.info-section details.faq{
  margin-top: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.info-section details > summary{ cursor: pointer; font-weight: 600; }
.info-section .small{ font-size: .92rem; }

/* Asegura espacio de respiración al fondo del carrito (para móviles y notch) */
.cart{
  /* ya tenés overflow:auto; si no, agregalo */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Un poquito de aire en el footer */
.cart .footer{ padding-bottom: 8px; }

/* En pantallas chicas, “pegar” el botón WA cerca del borde inferior del panel */
@media (max-width: 480px){
  #transferBox .btn-whatsapp{
    position: sticky;     /* se pega dentro del contenedor scrolleable (.cart) */
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    display: block;
    width: 100%;
    border-radius: 12px;
    z-index: 5;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  #transferBox{ padding-bottom: 12px; } /* evita que el borde recorte el botón */
}

/* Reemplazá el bloque existente por este (o sumale las dos líneas marcadas) */
.cart{
  position:fixed;right:0;top:0;height:100%;
  width:min(420px,92vw);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-left:1px solid var(--border);
  box-shadow:var(--shadow);
  z-index:60;
  transform:translateX(100%);
  transition:transform .28s ease;
  display:flex;flex-direction:column;
  overflow:auto; /* 👈 NUEVO: ahora scrollea todo el panel */
}
.cart.is-open{transform:translateX(0)}
.cart-body{padding:14px;/* overflow:auto; */ overflow:visible; /* 👈 deja de forzar scroll acá */}

.subnote{ margin-top:8px; font-size:.95rem; color:var(--muted); }
.subnote a{ text-decoration: underline; }

.badge-mayor{
  display:inline-block; font-size:.8rem; background:#0c0c12;
  border:1px solid var(--border); padding:2px 6px; border-radius:8px;
  color:var(--muted); margin-left:6px;
}

.products-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}

/* Ayuda a que las cards se vean prolijas si hay imágenes altas */
.card img{ width:100%; height:260px; object-fit:cover; border-radius:var(--radius); }

/* fila de CTAs del héroe */
.cta-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* el texto “por mayor” baja sí o sí a otra línea */
.cta-row .subnote{
  flex-basis: 100%;          /* 👈 fuerza salto de línea en el flex */
  margin: 6px 0 0;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--muted);
}

/* link prolijo y consistente */
.cta-row .subnote a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* un poquito más compacto en mobile */
@media (max-width: 520px){
  .cta-row{ gap: 8px; }
  .cta-row .subnote{ font-size: .9rem; }
}

.btn-sm{ padding:8px 12px; font-size:.95rem; border-radius:12px; }

/* Botón "Compra por Mayor" (header) */
.btn-major{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:12px;
  background: linear-gradient(180deg, #0f131a, #0b0f16);
  border:1px solid var(--border);
  color:var(--text);
  text-decoration: none;                  /* ← sin subrayado */
  transition: box-shadow .2s, border-color .2s, color .2s, transform .08s ease;
}

.btn-major:hover{
  border-color:#3b82f6;                   /* azul */
  color:#dbeafe;                          /* texto azulado */
  box-shadow:
    0 0 0 3px rgba(59,130,246,.15),       /* halo suave */
    0 10px 24px rgba(0,0,0,.35);
}

.btn-major:active{ transform: translateY(1px); }
.btn-major:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45);
}

/* (opcional) marcar activo cuando estés en mayorista */
body.is-mayorista #navMayorista{
  border-color:#3b82f6; color:#dbeafe;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* Barra de acciones de la página mayorista */
.toolbar-mayor{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;
}

/* Botón "Volver al catálogo" */
.btn-return{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:12px;
  background: linear-gradient(180deg, #121217, #0d0f14);
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
  transition: box-shadow .2s, border-color .2s, color .2s, transform .08s ease;
}
.btn-return:hover{
  border-color:#ef4444;            /* rojo */
  color:#fee2e2;                   /* texto con tinte rojo */
  box-shadow:
    0 0 0 3px rgba(239,68,68,.18), /* halo rojo suave */
    0 10px 24px rgba(0,0,0,.35);
}
.btn-return:active{ transform: translateY(1px); }
.btn-return:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(239,68,68,.38);
}

/* Botón azul estilo "Compra por Mayor" */
.btn-info{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:12px;
  background: linear-gradient(180deg, #0f131a, #0b0f16);
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;                 /* sin subrayado */
  transition: box-shadow .2s, border-color .2s, color .2s, transform .08s ease;
}
.btn-info:hover{
  border-color:#3b82f6;                 /* azul */
  color:#dbeafe;                        /* texto azulado */
  box-shadow:
    0 0 0 3px rgba(59,130,246,.15),     /* halo suave */
    0 10px 24px rgba(0,0,0,.35);
}
.btn-info:active{ transform: translateY(1px); }
.btn-info:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45);
}

/* Floating Socials */
.floating-social{
  position: fixed;
  left: 14px;
  top: 58vh;                /* altura media */
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 70;
}
.fab{
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #0f131a, #0b0f16);
  border: 1px solid var(--border);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .2s, border-color .2s, color .2s;
}
.fab:hover{ transform: translateY(-1px); }

/* marca */
.fab-wa{ color:#25D366; }
.fab-wa:hover{
  border-color:#25D366;
  box-shadow: 0 0 0 3px rgba(37,211,102,.18), 0 10px 24px rgba(0,0,0,.35);
}
.fab-ig{ color:#E1306C; }
.fab-ig:hover{
  border-color:#E1306C;
  box-shadow: 0 0 0 3px rgba(225,48,108,.18), 0 10px 24px rgba(0,0,0,.35);
}

/* Mobile */
@media (max-width: 540px){
  .fab{ width:44px; height:44px; }
  .floating-social{ left: 10px; gap: 10px; }
}

/* Paginación */
.pager{
  display:flex; gap:8px; align-items:center; justify-content:center;
  margin:18px 0 8px;
}
.pager button{
  padding:8px 12px; border-radius:10px;
  background: linear-gradient(180deg, #0f131a, #0b0f16);
  border:1px solid var(--border); color:var(--text);
  transition: box-shadow .2s, border-color .2s, color .2s, transform .08s;
}
.pager button:hover{
  border-color:#3b82f6; color:#dbeafe;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15), 0 10px 24px rgba(0,0,0,.35);
}
.pager button.is-active{ border-color:#3b82f6; color:#dbeafe; }
.pager button:disabled{ opacity:.6; cursor:not-allowed; }
.pager span{ color:var(--muted); padding:0 2px; }

#naranjaBox select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text);
}

/* ===== Testimonios (match Joyas Roger palette) ===== */
.testimonials{
  background: var(--panel);           /* bloque oscuro como el resto */
  color: var(--text);
  padding: clamp(2rem, 5vw, 4rem) 1rem;
  border-top: 1px solid var(--border);
}
.t-wrap{ max-width: 1100px; margin: 0 auto; }

/* Título con acento en --primary */
.t-title{
  font-family: var(--font, inherit);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  text-align: center; margin: 0 0 .25rem;
  letter-spacing: .3px;
}
.t-title::after{
  content:""; display:block; width: 86px; height: 4px;
  margin: .6rem auto 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.t-sub{
  text-align: center; color: var(--muted); margin: .25rem 0 2rem;
}

/* Carrusel táctil en mobile; grilla en desktop */
.t-list{
  display: grid; gap: 1rem;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: .25rem;
}
.t-list:focus-visible{ outline: 2px dashed var(--primary); outline-offset: 4px; }
.t-list::-webkit-scrollbar{ height: 8px; }
.t-list::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--primary) 45%, #000 55%);
  border-radius: 99px;
}
@media (min-width: 900px){
  .t-list{
    grid-auto-flow: unset; overflow: visible; scroll-snap-type: none;
    grid-template-columns: repeat(3, 1fr);
  }
}

.t-card{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft, 0 6px 18px rgba(0,0,0,.25));
  padding: 1rem; display: grid; gap: .75rem;
  scroll-snap-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.t-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.35));
}

.t-avatar{
  width: 68px; height: 68px; border-radius: 999px; object-fit: cover;
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}
.t-info{ display: grid; gap: .15rem; }
.t-name{ margin: 0; font-weight: 700; color: var(--text); }
.t-role{ margin: 0; color: var(--muted); font-size: .95rem; }

.t-stars{
  letter-spacing: .15rem; font-size: 1.05rem; user-select: none;
  color: var(--primary); text-shadow: 0 0 10px color-mix(in oklab, var(--primary) 30%, transparent);
}

.t-quote{
  margin: .25rem 0 0; line-height: 1.6;
  position: relative; padding-left: 1.6rem; color: var(--text);
}
.t-quote::before{
  content: "“"; position: absolute; left: 0; top: -.35rem;
  font-size: 2rem; line-height: 1; color: var(--primary-2);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Footer credit — usa tu paleta */
.footer{
  border-top: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: .95rem;
}
.footer .inner{
  max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem;
  display: flex; gap: .75rem; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
}
.footer .copy{ margin: 0; }
.footer .by{ margin: 0; opacity: .9; }
.footer a{ color: var(--text); text-decoration: none; border-bottom: 1px dashed transparent; }
.footer a:hover{ color: var(--primary); border-bottom-color: var(--primary); }

:root{
  --blue: #3b82f6;
  --blue-2: #1f6fff;
}

/* Reset suave para botones nativos */
.btn-reset {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}

/* Tamaño/espaciado consistente para botones del header */
.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 40px;
  padding: 0 .95rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

/* Estilo glow azul */
.btn-glow {
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.45);
  color: #eaf2ff;
  transition: border-color .2s, box-shadow .2s, transform .2s, background .2s;
}
.btn-glow:hover {
  background: rgba(59,130,246,.12);
  border-color: var(--blue);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.15),
    0 8px 28px -6px rgba(59,130,246,.5);
  transform: translateY(-1px);
}
.btn-glow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}
.btn-glow:active { transform: translateY(0); }

/* Badge del carrito */
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: var(--blue-2);
  border: 1px solid rgba(255,255,255,.2);
}

:root{
  --btn-h: 44px;
  --blue: #1a73e8; /* azul Google lindo */
}

/* Tamaño + tipografía fuerte, común a TODOS los botones */
.btn-size{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--btn-h);
  padding:0 18px;
  border-radius:12px;
  font-weight:700;                /* letra más fuerte */
  line-height:1;
}

/* Botón azul “fijo” con brillo (como Carrito / Iniciar sesión) */
.btn-blue{
  border:1px solid color-mix(in srgb, var(--blue) 55%, transparent);
  background:color-mix(in srgb, var(--blue) 18%, transparent);
  color:#dbe9ff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent) inset,
    0 0 18px color-mix(in srgb, var(--blue) 30%, transparent);
  transition:box-shadow .2s, transform .15s;
}
.btn-blue:hover{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 60%, transparent) inset,
    0 0 28px color-mix(in srgb, var(--blue) 40%, transparent);
  transform: translateY(-1px);
}

/* Si “Ver productos” lo querés seguir verde pero con el mismo tamaño/fuente */
.btn-green{ /* opcional, sólo para mantener tu estilo verde */
  background:#22c55e;
  color:#071017;
  border:0;
}
.btn-green:hover{ filter:brightness(1.05); }

/* Sin subrayado en botones/enlaces con estilo de botón */
.btn-size,
.btn-size:visited,
.btn-size:hover,
.btn-size:focus {
  text-decoration: none !important;
}

/* === Fix header buttons + CTA unified === */
:root{
  --btn-h: 44px;
  --blue: #1a73e8;
}

/* Contenedor de acciones a la derecha del header */
.header-actions{
  display: flex;
  align-items: center;
  gap: 10px;          /* separa por igual los 3 botones */
  flex-wrap: nowrap;
}

/* Tamaño y tipografía fuerte, común a TODOS los botones “tipo chip” */
.btn-size{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 700;    /* letra más fuerte */
  line-height: 1;
  cursor: pointer;     /* 👈 manito siempre */
  user-select: none;
}

/* Botón azul con glow (fijo, como Carrito / Iniciar sesión) */
.btn-blue{
  border: 1px solid color-mix(in srgb, var(--blue) 55%, transparent);
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  color: #dbe9ff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent) inset,
    0 0 18px color-mix(in srgb, var(--blue) 30%, transparent);
  transition: box-shadow .2s, transform .15s, border-color .2s, color .2s;
}
.btn-blue:hover{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 60%, transparent) inset,
    0 0 28px color-mix(in srgb, var(--blue) 40%, transparent);
  transform: translateY(-1px);
}

/* “Ver productos” se mantiene verde, pero con mismo tamaño */
.btn-green{
  background: #22c55e;
  color: #071017;
  border: 0;
}
.btn-green:hover{ filter: brightness(1.05); }

/* Nunca subrayados en estados de enlace */
.btn-size,
.btn-size:visited,
.btn-size:hover,
.btn-size:focus{
  text-decoration: none !important;
}

/* Badge del carrito dentro del botón */
.badge{
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: #1f6fff;
  border: 1px solid rgba(255,255,255,.18);
}

/* Degradé tipo oro + recorte a texto */
.brand-gold-metal{
  background: linear-gradient(
    180deg,
    #fff9c4 0%,
    #ffd700 25%,
    #b8860b 50%,
    #ffd700 75%,
    #fff6c4 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: .2px;
  /* sutil relieve */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

/* ===== Hover-swap de producto (segunda foto) ===== */
.card .media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.card .media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* las dos capas (se crean por JS si hay data-hover) */
.card .media .img-front,
.card .media .img-back{
  position:absolute; inset:0;
  transition: opacity .28s ease, transform .35s ease;
  will-change: opacity, transform;
}

/* estado base: se ve la frontal; la back está oculta */
.card .media .img-front{ opacity:1; }
.card .media .img-back { opacity:0; }

/* al hover: suave crossfade + leve zoom */
.card:hover .media .img-front{ opacity:0; transform:scale(1.03); }
.card:hover .media .img-back { opacity:1; }

.btn-categoria.active {
  background: gold;
  color: #000;
}

/* --- Categorías (chips pequeños) --- */
.categorias{
  display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 1rem;
}
.btn-categoria{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.9rem;
  cursor:pointer;
  transition:transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn-categoria:hover{ transform: translateY(-1px); }
.btn-categoria.active{
  background:#f4c84a; color:#111; border-color:#f4c84a; font-weight:700;
}
.btn-categoria .count{
  margin-left:.35rem; padding:.05rem .45rem; border-radius:999px;
  background:rgba(0,0,0,.25); font-size:.8em;
}

/* Centrar título y chips de categorías */
.section-title{
  text-align: center;          /* centra el H2 */
  margin-bottom: .75rem;
}

.categorias{
  justify-content: center;     /* centra los botones */
  gap: .6rem;
}

/* (Opcional) un poquitito más de aire abajo del bloque */
.categorias + .products-grid{
  margin-top: .25rem;
}

/* Opcional: centrar la grilla y limitar su ancho máximo */
.products-grid{
  max-width: 1100px;           /* ajustá a gusto */
  margin-inline: auto;         /* centra el bloque */
}

/* --- Centrar título y categorías --- */
.section-title{
  text-align: center;
  margin-bottom: .75rem;
}

.categorias{
  display: flex;
  justify-content: center;    /* centramos horizontal */
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
}

/* Chips */
.btn-categoria{
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--text);
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.9rem;
  cursor:pointer;
  transition:transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn-categoria:hover{ transform: translateY(-1px); }
.btn-categoria.active{
  background:#f4c84a; color:#111; border-color:#f4c84a; font-weight:700;
}
.btn-categoria .count{
  margin-left:.35rem;
  padding:.05rem .45rem;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  font-size:.8em;
}

/* Centrar la grilla */
.products-grid{
  max-width: 1100px;      /* límite de ancho */
  margin-inline: auto;    /* centrado horizontal */
}

/* --- Responsive --- */
@media (max-width:600px){
  .section-title{
    font-size: 1.4rem;
  }
  .categorias{
    gap:.5rem;
  }
  .btn-categoria{
    font-size:.85rem;
    padding:.3rem .6rem;
  }
}

/* Ocultar productos sin romper el layout */
.producto.is-hidden { display: none !important; }

/* Ocultar por filtro/paginación sin romper grilla */
.producto.is-hidden { display: none !important; }
.producto.page-hidden { display: none !important; }

/* Paginador centrado debajo de la grilla */
.pager{
  display:flex; gap:.4rem; justify-content:center; align-items:center;
  margin: .75rem 0 1.25rem;
}
.pager .pg-btn{
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  color: var(--text);
  padding: .35rem .6rem;
  border-radius: 10px;
  cursor: pointer;
}
.pager .pg-btn.is-active{
  background:#0e1b2f; border-color:#2a4a7d; box-shadow:0 0 0 1px rgba(42,74,125,.35) inset;
}
.pager .pg-btn.is-disabled{
  opacity:.45; pointer-events:none;
}

.producto.is-hidden { display: none !important; }

:root{
  --gold-1:#8a6b2b;   /* sombra */
  --gold-2:#b68c2a;   /* medio */
  --gold-3:#e7c873;   /* luz */
  --gold-4:#fff3c1;   /* brillo */
}

/* Título del producto: dorado metálico */
.card .title{
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;

  /* degradé dorado */
  background: linear-gradient(180deg, var(--gold-4), var(--gold-3) 35%, var(--gold-2) 65%, var(--gold-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* leve relieve/contorno */
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.25);
}

/* Brillo suave al pasar el mouse */
.card:hover .title{
  filter: brightness(1.08);
}


.card .price{
  color:#e9e9ee;
  opacity:.9;
  font-weight:700;
}