/* ======================================================
   PAPELERA CARO CRUZ — styles.css
   Paleta: Base #ffffff — Arena #c9a96e — Coral #fb844f — Pizarra #17516e — Carbón #2c2c2e
   ====================================================== */

/* -- Reset & base -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: #ffffff;
  color: #2c2c2e;
  font-size: 15px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* -- Variables -- */
:root {
  --blue:    #17516e;
  --blue-dk: #2c2c2e;
  --orange:  #fb844f;
  --warm:    #c9a96e;
  --gray:    #f3f4f6;
  --slate:   #7c8d95;
  --border:  #e5e7eb;
  --text-muted: #5f6468;
  --radius:  8px;
  --shadow-card: 0 2px 12px rgba(0,0,0,.08);
  --transition: .18s ease;
}

/* -- Util -- */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
.hidden { display: none; }
@media (max-width: 1100px) { .container { padding: 0 32px; } }
@media (max-width: 640px)  { .container { padding: 0 16px; } }

/* ======================================================
   BARRA DE ANUNCIO
   ====================================================== */
.announcement-bar {
  background: var(--blue);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
}

/* ======================================================
   HEADER
   ====================================================== */
.header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
}

/* Logo */
.logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: max-content;
}
.logo-img {
  height: 58px;
  width: auto;
  object-fit: contain;
}
.logo-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
}
.logo-sub {
  font-size: 9px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 2px;
}

/* Buscador */
.search-box {
  flex: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
  background: #F9FAFB;
  border: 1px solid #D1D5DB;
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.search-box:focus-within {
  box-shadow: 0 0 0 3px rgba(75,97,108,.15);
  border-color: var(--blue);
}
.search-icon {
  width: 18px;
  height: 18px;
  margin: 0 0 0 14px;
  color: #9CA3AF;
  flex-shrink: 0;
}
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 10px;
  font-size: 14px;
  color: #374151;
  font-family: inherit;
  outline: none;
}
.search-input::placeholder { color: #9CA3AF; }
.search-btn {
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 0 20px;
  height: 44px;
  letter-spacing: .3px;
  transition: background var(--transition);
  flex-shrink: 0;
}
.search-btn:hover { background: #e6733f; }
.search-btn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.search-btn-icon { width: 16px; height: 16px; display: block; }
.search-btn-text { display: inline; }

/* Iconos */
.header-icons {
  display: flex;
  align-items: center;
  gap: 24px;
}
.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #374151;
  font-size: 10px;
  transition: color var(--transition);
}
.icon-btn:hover { color: var(--blue); }
.icon-btn svg { width: 22px; height: 22px; }
.cart-icon-wrap { position: relative; }
.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-badge.hidden { display: none; }

/* ======================================================
   NAV CATEGOR�AS
   ====================================================== */
.cat-nav { background: #2c2c2e; }
.cat-nav-inner {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-list {
  display: flex;
  align-items: stretch;
}
.cat-entry {
  display: flex;
  align-items: stretch;
}
.cat-item {
  display: flex;
  align-items: center;
  padding: 0 18px;
  height: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .8px;
  color: #fff;
  white-space: nowrap;
  transition: background var(--transition);
}
.cat-item:hover { background: rgba(255,255,255,.12); }
.cat-item--active { background: var(--orange); }
.cat-item--active:hover { background: #e6733f; }
.cat-item--ofertas { color: #FFD700; }
.cat-menu-toggle { display: none; }
.cat-nav-backdrop { display: none; }
.cat-sheet-head, .cat-favs, .cat-fav-btn { display: none; }

/* ======================================================
   HERO
   ====================================================== */
.hero {
  background: var(--blue);
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  top: -120px;
  right: 60px;
  pointer-events: none;
  z-index: 0;
}
/* Overlay degradado cuando hay banner: oscurece el lado izquierdo para legibilidad del texto */
.hero.hero--has-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,18,50,0.72) 0%, rgba(0,18,50,0.45) 55%, rgba(0,18,50,0.15) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Con banner: ocultar la decoración circular y el cuadro derecho */
.hero.hero--has-banner::before { display: none; }
.hero.hero--has-banner .hero-visual { display: none; }
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding-top: 72px;
  padding-bottom: 72px;
  position: relative;
  z-index: 2;
}
.hero-content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  padding: 6px 16px;
  border-radius: 20px;
  width: fit-content;
}
.hero-title {
  font-size: 54px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.hero-sub {
  font-size: 18px;
  color: #C8D8EC;
  line-height: 1.6;
}
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* Botones globales */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  transition: all var(--transition);
  cursor: pointer;
  font-family: inherit;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: #e6733f; }
.btn-outline-white {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: #fff;
}
.btn-outline-white:hover { background: rgba(255,255,255,.2); }
.btn-whatsapp {
  background: #16A34A;
  color: #fff;
}
.btn-whatsapp:hover { background: #15803D; }
.w-full { width: 100%; }

/* Hero visual */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.hero-img-placeholder {
  width: 360px;
  height: 300px;
  background: rgba(255,255,255,.1);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255,255,255,.6);
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
}
.hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: none;
}
/* El banner mobile se muestra solo en pantallas pequeñas */
@media (max-width: 640px) {
  .hero-banner-img--mobile { display: block; }
  .hero-banner-img:not(.hero-banner-img--mobile) { display: none !important; }
}
@media (min-width: 641px) {
  .hero-banner-img--mobile { display: none !important; }
}
.hero-banner-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.hero-img-placeholder svg { width: 64px; height: 64px; }
.hero-dots { display: flex; gap: 8px; min-height: 10px; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: background .3s;
}
.dot--active { background: #fff; }

/* Carousel prev/next buttons */
.hero-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.hero-carousel-btn:hover { background: rgba(0,0,0,.65); }
.hero-carousel-btn--prev { left: 8px; }
.hero-carousel-btn--next { right: 8px; }

/* Admin carousel slide list */
.admin-carrusel-slide {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fafafa;
}
.admin-carrusel-slide-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.admin-carrusel-slide-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 600px) {
  .admin-carrusel-slide-fields { grid-template-columns: 1fr; }
}

/* ======================================================
   BENEFICIOS
   ====================================================== */
.benefits {
  background: #2c2c2e;
  border-bottom: 1px solid #3a3a3c;
}
.benefits-inner {
  display: flex;
  align-items: center;
  min-height: 110px;
}
.benefit-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
}
.benefit-icon {
  width: 36px;
  height: 36px;
  color: var(--orange);
  flex-shrink: 0;
}
.benefit-item h3 { font-size: 15px; font-weight: 700; color: #ffffff; }
.benefit-item p  { font-size: 12px; color: #a1a1aa; }
.benefit-divider {
  width: 1px;
  height: 60px;
  background: #3a3a3c;
  flex-shrink: 0;
  margin: 0 32px;
}

/* ======================================================
   SECCIONES DE PRODUCTOS
   ====================================================== */
.products-section { padding: 48px 0; }
.bg-gray  { background: var(--gray); }
.bg-white { background: #fff; }

.info-section {
  padding: 48px 0;
}
.section-header--stack {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}
.info-sub {
  font-size: 14px;
  color: #64748B;
  font-weight: 500;
}
.info-card {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #FFFFFF;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
  margin-bottom: 14px;
}
.info-card h3 {
  font-size: 18px;
  color: var(--blue-dk);
  margin-bottom: 8px;
}
.info-card p {
  color: #475569;
  font-size: 14px;
  line-height: 1.65;
}
.info-note {
  margin-top: 8px;
  font-size: 12px;
  color: #1E3A8A;
  font-weight: 600;
}
.mayorista-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mayorista-form label {
  font-size: 13px;
  color: #334155;
  font-weight: 700;
}
.mayorista-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mayorista-form input {
  flex: 1;
  min-width: 240px;
  height: 44px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  color: #1f2937;
  background: #fff;
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.faq-item {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}
.faq-item summary {
  font-size: 15px;
  color: var(--blue-dk);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  color: #0f766e;
  font-size: 20px;
  line-height: 1;
}
.faq-item[open] summary::after {
  content: '-';
}
.faq-answer {
  margin-top: 8px;
}
.faq-item p {
  font-size: 13px;
  color: #475569;
  line-height: 1.55;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-bar {
  display: block;
  width: 5px;
  height: 30px;
  background: var(--warm);
  border-radius: 3px;
  flex-shrink: 0;
}
.section-title-wrap h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: .8px;
}
.hot-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #FEF2F2;
  color: #EF4444;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 4px 10px;
  border-radius: 4px;
}
.hot-badge svg { width: 13px; height: 13px; }

.btn-outline-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--blue);
  border-radius: 6px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
}
.btn-outline-nav:hover { background: var(--blue); color: #fff; }
.btn-outline-nav svg { width: 15px; height: 15px; }

/* Grid de productos */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .products-grid { grid-template-columns: 1fr; } }

/* Grilla compacta: m�s columnas, im�genes chicas */
.products-grid--compacto { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
@media (max-width: 1100px) { .products-grid--compacto { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px)  { .products-grid--compacto { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } }
@media (max-width: 420px)  { .products-grid--compacto { grid-template-columns: repeat(2, 1fr) !important; } }

/* Grilla normal: equilibrio entre tama�o y cantidad */
.products-grid--normal { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 768px)  { .products-grid--normal { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 420px)  { .products-grid--normal { grid-template-columns: 1fr !important; } }

/* Grilla grande: menos columnas, im�genes grandes */
.products-grid--grande { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
@media (max-width: 768px)  { .products-grid--grande { grid-template-columns: 1fr !important; } }

/* Reacomodo de card por modo para priorizar imagen */
.products-grid--compacto .card-img {
  aspect-ratio: 4 / 3;
}
.products-grid--compacto .card-foto {
  padding: 8px;
}
.products-grid--compacto .card-body {
  padding: 12px;
  gap: 8px;
}
.products-grid--compacto .card-name {
  font-size: 12px;
  line-height: 1.35;
  min-height: 32px;
}
.products-grid--compacto .card-price {
  font-size: 18px;
}
.products-grid--compacto .add-btn {
  height: 36px;
  font-size: 12px;
}

.products-grid--normal .card-img {
  aspect-ratio: 4 / 3;
}
.products-grid--normal .card-foto {
  padding: 8px;
}

.products-grid--grande .card-img {
  aspect-ratio: 4 / 3;
}
.products-grid--grande .card-foto {
  padding: 6px;
}
.products-grid--grande .card-body {
  padding: 12px;
  gap: 8px;
}
.products-grid--grande .card-name {
  font-size: 12px;
  line-height: 1.35;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.products-grid--grande .card-price {
  font-size: 22px;
}
.products-grid--grande .qty-row {
  gap: 8px;
}
.products-grid--grande .qty-btn {
  width: 30px;
  height: 30px;
}
.products-grid--grande .add-btn {
  height: 36px;
  font-size: 12px;
}

/* Product Card */
.product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.product-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.card-img {
  aspect-ratio: 4 / 3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
  position: relative;
  overflow: hidden;
  text-decoration: none; /* cuando es <a> */
}
.card-img svg { width: 52px; height: 52px; }
.card-img .card-foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  border-radius: 8px 8px 0 0;
}
.card-img--fallback {
  background: var(--card-bg-fallback, #f2e8d5) !important;
  border-bottom: 1px solid #eee !important;
}
.card-img--fallback::after {
  content: '';
  display: block;
  width: 40px; height: 40px;
  background: #ccc;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;
}
.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.card-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  width: fit-content;
}
.card-stock {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  width: fit-content;
  color: #065F46;
  background: #D1FAE5;
}
.card-stock--out {
  color: #991B1B;
  background: #FEE2E2;
}
.card-name {
  font-size: 13px;
  font-weight: 600;
  color: #2c2c2e;
  line-height: 1.45;
  min-height: 38px;
}
.card-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue);
}
.card-price-old {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #94A3B8;
  text-decoration: line-through;
}
.card-price-new {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--orange);
}

/* Qty */
.qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: #F3F4F6;
  color: #374151;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}
.qty-btn:hover { background: #E5E7EB; }
.qty-value {
  font-size: 15px;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
}

/* Bot�n agregar */
.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background var(--transition);
  font-family: inherit;
}
.add-btn:hover { background: #14305a; }
.add-btn svg { width: 15px; height: 15px; }
.add-btn:disabled {
  background: #9CA3AF;
  cursor: not-allowed;
}
.add-btn:disabled:hover { background: #9CA3AF; }

/* ======================================================
   FOOTER
   ====================================================== */
.footer { background: #2c2c2e; }
.footer-main {
  display: grid;
  grid-template-columns: 280px repeat(3, 1fr);
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 48px;
}
@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-main { grid-template-columns: 1fr; }
}

.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { font-size: 28px; font-weight: 800; color: #fff; }
.footer-logo-sub { font-size: 9px; font-weight: 700; color: var(--orange); letter-spacing: 2px; }
.footer-desc { font-size: 13px; color: #94A3B8; line-height: 1.65; }

.footer-social { display: flex; gap: 10px; }
.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--transition);
}
.social-btn:hover { background: var(--orange); }
.social-btn svg { width: 17px; height: 17px; }

.footer-col h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 1.4px;
  margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a, .footer-col ul li {
  font-size: 13px;
  color: #CBD5E1;
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: #fff; }
.text-yellow { color: #FFD700 !important; }

.footer-contact ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #CBD5E1;
}
.footer-contact ul li svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--slate);
  margin-top: 2px;
}

.footer-bottom {
  background: var(--blue-dk);
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: #64748B;
}

/* ======================================================
   CARRITO LATERAL
   ====================================================== */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
}
.cart-overlay.hidden { display: none; }

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s ease;
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
}
.cart-panel.open { transform: translateX(0); }

.cart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.cart-panel-header h2 { font-size: 18px; font-weight: 700; color: var(--blue); }
.cart-header-actions { display: flex; align-items: center; gap: 8px; }
.cart-header-actions button svg { width: 22px; height: 22px; color: #374151; }
.cart-header-actions button:hover svg { color: var(--orange); }
.cart-vaciar-btn {
  font-size: 12px;
  font-weight: 600;
  color: #EF4444;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #FCA5A5;
  font-family: inherit;
  cursor: pointer;
  align-items: center;
  transition: background var(--transition);
}
.cart-vaciar-btn:hover { background: #FEF2F2; }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Item en carrito */
.cart-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cart-item-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cart-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-item-icon svg { width: 22px; height: 22px; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: 12px;
  font-weight: 600;
  color: #2c2c2e;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-item-unit-price { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.cart-item-remove {
  background: #FEF2F2;
  border-radius: 6px;
  padding: 6px;
  color: #EF4444;
  flex-shrink: 0;
}
.cart-item-remove:hover { background: #FEE2E2; }
.cart-item-remove svg { width: 14px; height: 14px; }

/* Fila inferior: qty + subtotal */
.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 56px;
}
.cart-qty-row { display: flex; align-items: center; gap: 6px; }
.cart-qty-btn {
  width: 26px;
  height: 26px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: #F3F4F6;
  color: #374151;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
.cart-qty-btn:hover { background: #E5E7EB; }
.cart-qty-value {
  font-size: 14px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  color: var(--blue);
}
.cart-item-subtotal {
  font-size: 14px;
  font-weight: 800;
  color: var(--blue);
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}
.cart-empty svg { width: 48px; height: 48px; color: #D1D5DB; }

.cart-summary {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
}
.cart-min-note { font-size: 11px; color: var(--text-muted); text-align: center; }

/* Barra de progreso m�nimo */
.cart-progress-wrap { display: flex; flex-direction: column; gap: 5px; }
.cart-progress-track {
  height: 6px;
  background: #E5E7EB;
  border-radius: 4px;
  overflow: hidden;
}
.cart-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--orange);
  border-radius: 4px;
  transition: width .4s ease, background .3s ease;
}
.cart-progress-text { font-size: 11px; color: var(--text-muted); }

/* Seguir comprando */
.cart-seguir-btn {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  font-family: inherit;
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition);
}
.cart-seguir-btn:hover { color: var(--orange); }

.cart-wsp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius);
  background: #22C55E;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
.cart-wsp-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.cart-wsp-btn:hover { background: #16A34A; }

/* ── Overlay redirigiendo a MercadoPago ─────────────── */
.cmp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-overlay.hidden { display: none; }

.cmp-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  text-align: center;
}

/* Spinner de 3 anillos concéntricos */
.cmp-spinner {
  position: relative;
  width: 64px;
  height: 64px;
}
.cmp-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  animation: cmpSpin 1.2s linear infinite;
}
.cmp-ring--1 {
  border-top-color: var(--orange);
  animation-duration: 1s;
}
.cmp-ring--2 {
  inset: 9px;
  border-top-color: #009EE3;
  animation-duration: 1.4s;
  animation-direction: reverse;
}
.cmp-ring--3 {
  inset: 18px;
  border-top-color: var(--orange);
  opacity: .5;
  animation-duration: 0.8s;
}
@keyframes cmpSpin {
  to { transform: rotate(360deg); }
}

.cmp-msg {
  font-size: 18px;
  font-weight: 800;
  color: #2c2c2e;
  margin: 0;
}
.cmp-sub {
  font-size: 13px;
  color: #6B7280;
  margin: -12px 0 0;
}

/* Fijar tamaño del botón MP para que no crezca */
#btnPagarMP {
  min-height: 52px;
  height: 52px;
}

/* ── Modal checkout MP ───────────────────────────────── */
.checkout-mp-modal {
  max-width: 420px;
}
.checkout-mp-modal .auth-modal-body {
  padding: 20px 24px 24px;
}

/* ======================================================
   RESPONSIVE � TABLET (=900px)
   ====================================================== */
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: 14px 0; gap: 12px; }
  .search-box { max-width: 100%; order: 3; width: 100%; }
}

/* ======================================================
   RESPONSIVE � MOBILE (=640px)
   ====================================================== */
@media (max-width: 640px) {

  /* Announcement bar */
  .announcement-bar { font-size: 11px; padding: 8px 12px; }
  .announcement-hide-mobile { display: none; }

  /* Header */
  .header-inner { padding: 10px 0; gap: 10px; }
  .logo-wrap { min-width: 0; }
  .logo-img { height: 42px; }
  .logo-name { font-size: 22px; }
  .logo-sub { font-size: 8px; letter-spacing: 1.5px; }
  .icon-btn span { display: none; }
  .icon-btn svg { width: 24px; height: 24px; }
  .header-icons { gap: 16px; }
  .search-input { padding: 10px 8px; font-size: 13px; min-width: 0; flex: 1; }
  .search-btn { padding: 0; font-size: 12px; height: 40px; width: 48px; min-width: 48px; flex-shrink: 0; }
  .search-btn-text { display: none; }

  /* Cat nav mobile UX */
  .cat-nav {
    padding: 10px 12px;
    position: sticky;
    top: 0;
    z-index: 120;
    overflow: visible;
    box-shadow: 0 1px 6px rgba(0,0,0,.18);
  }
  .cat-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    border-radius: 10px;
    height: 42px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
  }
  .cat-menu-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
  }
  .cat-nav.cat-nav--open .cat-menu-toggle svg {
    transform: rotate(180deg);
  }
  .cat-nav-inner {
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    z-index: 101;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
    padding: 14px 12px 18px;
    max-height: min(68vh, 540px);
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px) scale(.98);
    transform-origin: top center;
    transition: transform .22s ease, opacity .18s ease;
  }
  .cat-nav.cat-nav--open .cat-nav-inner {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .cat-nav-backdrop {
    display: none;
  }
  .cat-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .cat-sheet-head p {
    font-size: 14px;
    font-weight: 800;
    color: #2c2c2e;
  }
  .cat-sheet-close {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid #E5E7EB;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9FAFB;
  }
  .cat-sheet-close svg {
    width: 15px;
    height: 15px;
  }
  .cat-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cat-entry {
    display: block;
  }
  .cat-entry--recent .cat-item {
    border-color: #93C5FD;
    box-shadow: inset 0 0 0 1px rgba(59,130,246,.18);
  }
  .cat-item {
    justify-content: center;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1F2937;
    font-size: 11px;
    letter-spacing: .3px;
  }
  .cat-item--active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
  }
  .cat-item:hover {
    background: #F1F5F9;
  }
  .cat-item--active:hover {
    background: #e6733f;
  }
  .cat-item--ofertas {
    color: #92400E;
    border-color: #FCD34D;
    background: #FFFBEB;
  }

  /* Hero */
  .hero-inner {
    flex-direction: column;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero-visual { display: none; }
  .hero-title { font-size: 32px; }
  .hero-sub { font-size: 15px; }
  .hero-badge { margin: 0 auto; }
  .hero-btns { justify-content: center; flex-direction: column; }
  .hero-btns .btn { width: 100%; }

  /* Benefits */
  .benefits-inner { flex-wrap: wrap; gap: 0; padding: 8px 0; }
  .benefit-item { flex: 1 1 45%; padding: 16px 0; }
  .benefit-item h3 { font-size: 13px; }
  .benefit-item p { font-size: 11px; }
  .benefit-icon { width: 28px; height: 28px; }
  .benefit-divider { display: none; }

  /* Section headers */
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn-outline-nav { font-size: 12px; padding: 7px 12px; }

  /* Products section */
  .products-section { padding: 32px 0; }
  .info-section { padding: 32px 0; }
  .products-grid { gap: 12px; }
  .faq-grid { grid-template-columns: 1fr; }

  /* Product card */
  .card-img { aspect-ratio: 1 / 1; }
  .card-body { padding: 12px; gap: 8px; }
  .card-name { font-size: 12px; min-height: 34px; }
  .card-price { font-size: 18px; }
  .qty-btn { width: 30px; height: 30px; }
  .add-btn { height: 38px; font-size: 12px; }

  /* Cart panel � full width */
  .cart-panel { width: 100vw; }

  /* Footer */
  .footer-main { gap: 28px; padding-top: 32px; padding-bottom: 32px; }
  .footer-logo { font-size: 24px; }
  .footer-col h3 { margin-bottom: 10px; }
  .footer-col ul { gap: 8px; }
}

/* ======================================================
   RESPONSIVE � SMALL PHONES (=390px)
   ====================================================== */
@media (max-width: 390px) {
  .hero-title { font-size: 26px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card-img { aspect-ratio: 1 / 1; }
  .card-body { padding: 10px; }
  .card-price { font-size: 16px; }
}

/* ======================================================
   USUARIO EN HEADER
   ====================================================== */
.user-display {
  position: relative;
  align-items: center;
}
.user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  font-family: inherit;
}
.user-trigger:hover { background: #F3F4F6; }
.user-avatar {
  width: 30px;
  height: 30px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.user-avatar svg { width: 15px; height: 15px; }
.user-name {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chevron {
  width: 13px;
  height: 13px;
  transition: transform var(--transition);
  flex-shrink: 0;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 170px;
  overflow: hidden;
  display: none;
  z-index: 150;
}
.user-dropdown.open { display: block; }
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  font-size: 13px;
  color: #374151;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition);
}
.user-dropdown-item:hover { background: #FEF2F2; color: #EF4444; }
.user-dropdown-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.user-dropdown-item--admin:hover { background: #EFF6FF; color: #1E40AF; }

/* � Mobile: ocultar user-name � */
@media (max-width: 640px) {
  .user-name { display: none; }
  .user-trigger { padding: 6px; }
}

/* ======================================================
   MODAL DE AUTENTICACI�N
   ====================================================== */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 300;
  backdrop-filter: blur(2px);
}

.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(.96);
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  z-index: 301;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.auth-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

/* Cabecera del modal */
.auth-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
}
.auth-tabs {
  display: flex;
  gap: 4px;
  background: #F3F4F6;
  border-radius: 8px;
  padding: 4px;
}
.auth-tab {
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all var(--transition);
  font-family: inherit;
  cursor: pointer;
}
.auth-tab--active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.auth-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #6B7280;
  transition: background var(--transition);
  flex-shrink: 0;
}
.auth-close-btn:hover { background: #F3F4F6; color: #2c2c2e; }
.auth-close-btn svg { width: 18px; height: 18px; }

/* Formulario */
.auth-form {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-form.hidden { display: none; }

/* Campo */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.auth-field input {
  height: 44px;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: #2c2c2e;
  background: #FAFAFA;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.auth-field textarea {
  min-height: 74px;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #2c2c2e;
  background: #FAFAFA;
  outline: none;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.auth-field input:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(75,97,108,.12);
}
.auth-field textarea:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(75,97,108,.12);
}
.auth-field-error {
  font-size: 12px;
  color: #EF4444;
  display: none;
}

/* Input contrase�a con bot�n ojo */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  border-radius: 4px;
  transition: color var(--transition);
}
.pw-toggle:hover { color: var(--blue); }
.pw-toggle svg { width: 16px; height: 16px; }

/* Medidor de fortaleza */
.strength-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.strength-track {
  flex: 1;
  height: 4px;
  background: #E5E7EB;
  border-radius: 4px;
  overflow: hidden;
}
.strength-bar {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width .3s ease, background .3s ease;
}
.strength-label {
  font-size: 11px;
  font-weight: 600;
  min-width: 68px;
  text-align: right;
}

/* Bot�n de enviar */
.auth-submit {
  height: 46px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  font-family: inherit;
  transition: background var(--transition);
  cursor: pointer;
  margin-top: 4px;
}
.auth-submit:hover:not(:disabled) { background: var(--blue-dk); }
.auth-submit:disabled { opacity: .55; cursor: not-allowed; }

.auth-forgot-btn {
  border: none;
  background: transparent;
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  padding: 2px 0 0;
  cursor: pointer;
}
.auth-forgot-btn:hover { color: #e6733f; }
.auth-forgot-btn:disabled { opacity: .65; cursor: wait; }

/* Link cambiar form */
.auth-switch-link {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: -4px;
}
.auth-switch-link button {
  color: var(--orange);
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.auth-switch-link button:hover { color: #e6733f; }

/* Divisor "o" */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #D1D5DB;
  font-size: 12px;
  font-weight: 500;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-divider span { color: var(--text-muted); }

/* Bot�n Google */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--radius);
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn-google:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ======================================================
   MODAL ADMIN
   ====================================================== */
.admin-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(.96);
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #DBEAFE;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  z-index: 302;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.admin-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}
.admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 0;
}
.admin-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: #1D4ED8;
  text-transform: uppercase;
}
.admin-modal-head h3 {
  margin-top: 0;
  font-size: 24px;
  line-height: 1.1;
  color: #1E293B;
}
.admin-main-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 22px 0;
  border-bottom: 1px solid #E5E7EB;
}
.admin-main-tab-btn {
  height: 36px;
  border-radius: 10px 10px 0 0;
  padding: 0 14px;
  border: 1px solid transparent;
  border-bottom: none;
  background: #F8FAFC;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}
.admin-main-tab-btn--active {
  background: #fff;
  color: #1E3A8A;
  border-color: #DBEAFE;
}
.admin-form {
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-tab-btn {
  height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  border: 1px solid #CBD5E1;
  background: #F8FAFC;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}
.admin-tab-btn--active {
  background: #1E3A8A;
  border-color: #1E3A8A;
  color: #fff;
}
.admin-tab-panel {
  display: none;
}
.admin-tab-panel--active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-tabs--gestion {
  margin-top: 4px;
}
.admin-modal-body {
  display: block;
}
.admin-main-panel {
  display: none;
}
.admin-main-panel--active {
  display: flex;
  flex-direction: column;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.admin-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 2px;
}
.admin-select {
  height: 44px;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: #2c2c2e;
  background: #FAFAFA;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.admin-select:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(75,97,108,.12);
}
.admin-help {
  font-size: 12px;
  color: #6B7280;
  margin-top: -2px;
}
.admin-config-box {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-mini-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #2c2c2e;
  text-transform: uppercase;
}
.admin-config-save {
  margin-top: 4px;
}
.admin-hero-preview {
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  background: #fff;
  min-height: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-hero-preview img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  display: none;
}
.admin-hero-preview p {
  font-size: 12px;
  color: #64748B;
  font-weight: 600;
  padding: 12px;
}

/* ── Modal Mis Compras ───────────────────────────────── */
.mc-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(.96);
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  z-index: 302;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  display: flex;
  flex-direction: column;
}
.mc-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}
.mc-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #F3F4F6;
  flex-shrink: 0;
}
.mc-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #2c2c2e;
  margin: 0;
}
.mc-modal-sub {
  font-size: 13px;
  color: #6B7280;
  margin: 3px 0 0;
}
.mc-modal-body {
  padding: 20px 24px 28px;
  overflow-y: auto;
  flex: 1;
}

/* Cards de pedido */
.mc-pedido {
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
}
.mc-pedido + .mc-pedido { margin-top: 14px; }

.mc-pedido-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  flex-wrap: wrap;
}
.mc-pedido-meta { display: flex; flex-direction: column; gap: 2px; }
.mc-pedido-id {
  font-weight: 800;
  font-size: 14px;
  color: #2c2c2e;
}
.mc-fecha {
  font-size: 12px;
  color: #6B7280;
}
.mc-pedido-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mc-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-items li {
  font-size: 13.5px;
  color: #374151;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mc-items li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D1D5DB;
  flex-shrink: 0;
  margin-top: 1px;
}
.mc-total {
  font-size: 14px;
  font-weight: 700;
  color: #2c2c2e;
  padding-top: 10px;
  border-top: 1px solid #F3F4F6;
  display: flex;
  justify-content: space-between;
}
.mc-total span { font-weight: 400; color: #6B7280; }

/* Badges de estado */
.mc-estado {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.mc-estado--pendiente  { background: #FEF3C7; color: #92400E; }
.mc-estado--aprobado   { background: #D1FAE5; color: #065F46; }
.mc-estado--rechazado  { background: #FEE2E2; color: #991B1B; }
.mc-estado--revision   { background: #FFEDD5; color: #9A3412; }
.mc-estado--otro       { background: #F3F4F6; color: #374151; }

/* Estados vacío / cargando / error */
.mis-compras-cargando,
.mis-compras-vacio,
.mis-compras-error {
  text-align: center;
  padding: 40px 0;
  color: #6B7280;
  font-size: 14px;
}
.mis-compras-vacio::before {
  content: '🛍️';
  display: block;
  font-size: 36px;
  margin-bottom: 12px;
}
.mis-compras-error { color: #DC2626; }

/* ── Banner config redesign ───────────────────────────── */
.admin-banner-cols {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .admin-banner-cols { grid-template-columns: 1fr; }
}
.admin-banner-col {
  background: #fff;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-banner-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-banner-col-title {
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 5px;
}
.admin-banner-col-specs {
  font-size: 11px;
  color: #94A3B8;
  background: #F1F5F9;
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 500;
  white-space: nowrap;
}
.admin-banner-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 2px dashed #CBD5E1;
  border-radius: 8px;
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  color: #64748B;
  transition: background .15s, border-color .15s, color .15s;
  background: #F8FAFC;
}
.admin-banner-dropzone:hover {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #3B82F6;
}
.admin-banner-dropzone span {
  font-size: 13px;
  font-weight: 600;
}
.admin-banner-dropzone small {
  font-size: 11px;
  color: #94A3B8;
}
.admin-banner-dropzone:hover small {
  color: #60A5FA;
}
.admin-banner-preview {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #F1F5F9;
  width: 100%;
}
.admin-banner-preview--2x1 { padding-bottom: 50%; }
.admin-banner-preview--1x1 { padding-bottom: 100%; }
.admin-banner-preview > p {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: #94A3B8;
  font-weight: 500;
}
.admin-banner-sliders {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.admin-banner-sliders-title {
  font-size: 12px;
  color: #475569;
  margin-bottom: 2px;
}
.admin-banner-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94A3B8;
  font-weight: 600;
  white-space: nowrap;
}
.admin-banner-slider-row input[type=range] {
  flex: 1;
  accent-color: var(--blue);
}
.admin-banner-url-details {
  font-size: 12px;
  margin-top: -2px;
}
.admin-banner-url-details > summary {
  cursor: pointer;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.admin-banner-url-details > summary::-webkit-details-marker { display: none; }
.admin-banner-url-details > summary::before {
  content: '▶';
  font-size: 9px;
  transition: transform .15s;
  color: #CBD5E1;
}
.admin-banner-url-details[open] > summary::before { transform: rotate(90deg); }
.admin-bulk-box {
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 10px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-bulk-selection-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-bulk-selected-info {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
}
.admin-bulk-box--csv {
  margin-top: 10px;
  border-style: dashed;
  background: #F8FAFC;
}
.admin-bulk-box--danger {
  margin-top: 10px;
  border: 1.5px solid #fca5a5;
  background: #fff5f5;
  border-radius: 10px;
  padding: 14px 16px;
}
.admin-bulk-box--danger .admin-mini-title {
  color: #dc2626;
}
.admin-bulk-csv-result {
  min-height: 34px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-size: 12px;
  color: #334155;
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-line;
}
.admin-csv-progress-wrap {
  margin-top: 10px;
  margin-bottom: 4px;
}
.admin-csv-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 5px;
}
.admin-csv-progress-track {
  background: #E2E8F0;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.admin-csv-progress-bar {
  height: 100%;
  background: #17516e;
  border-radius: 999px;
  transition: width .12s linear;
}
.admin-promo-2x1-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-promo-2x1-selector {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-promo-2x1-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 7px 8px;
  background: #F8FAFC;
}
.admin-promo-2x1-check input {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: #1E3A8A;
}
.admin-promo-2x1-check span {
  font-size: 12px;
  color: #2c2c2e;
  font-weight: 600;
}
.admin-promo-2x1-check small {
  color: #64748B;
  font-weight: 600;
}
.admin-promo-2x1-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #E2E8F0;
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: #2c2c2e;
  font-weight: 600;
}
.admin-gestion {
  border-top: 1px solid #E5E7EB;
  padding: 24px 22px 22px;
  flex-direction: column;
  gap: 14px;
}
.admin-main-panel.admin-gestion {
  display: none;
}
.admin-main-panel.admin-gestion.admin-main-panel--active {
  display: flex;
}
.admin-gestion-filtros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.admin-gestion-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding-right: 4px;
}

/* -- Barra de selecci�n masiva en Listado ------------------------------------- */
.admin-listado-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  transition: opacity .2s ease, transform .2s ease;
}
.admin-listado-bulk-bar--hidden .admin-listado-bulk-actions {
  opacity: .4;
  pointer-events: none;
}
.admin-listado-bulk-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-listado-bulk-check-all {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1E40AF;
  cursor: pointer;
  user-select: none;
}
.admin-listado-bulk-check-all input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #17516e;
  cursor: pointer;
}
.admin-listado-bulk-count {
  font-size: 12px;
  font-weight: 700;
  color: #1E40AF;
  background: #DBEAFE;
  border-radius: 10px;
  padding: 2px 8px;
}
.admin-listado-bulk-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-listado-bulk-actions .admin-item-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 5px 10px;
}
@media (max-width: 600px) {
  .admin-listado-bulk-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-listado-bulk-actions {
    flex-direction: column;
  }
  .admin-listado-bulk-actions .admin-item-btn {
    justify-content: center;
  }
}

.admin-gestion-empty {
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  color: #64748B;
  background: #F8FAFC;
}
.admin-item {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}
.admin-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.admin-item-media {
  flex-shrink: 0;
}
.admin-item-thumb-btn {
  width: 64px;
  height: 64px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  overflow: hidden;
  background: #F8FAFC;
  padding: 0;
}
.admin-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-item-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #64748B;
  font-weight: 700;
  padding: 6px;
  text-align: center;
}
.admin-item-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #475569;
  font-weight: 700;
}
.admin-item-select input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}
.admin-item-title {
  font-size: 13px;
  font-weight: 700;
  color: #2c2c2e;
}
.admin-item-cat {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  letter-spacing: .3px;
}
.admin-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.admin-item-field--full {
  grid-column: 1 / -1;
}
.admin-item-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-item-field label {
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
}
.admin-item-field input {
  height: 36px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  font-size: 13px;
}
.admin-item-field textarea {
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.admin-item-field .admin-select {
  height: 36px;
  font-size: 13px;
  padding: 0 10px;
}
.admin-crop-wrap.hidden {
  display: none;
}
.admin-crop-wrap {
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  padding: 10px;
  background: #F8FAFC;
}
.admin-crop-canvas {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  background: #fff;
  display: block;
  cursor: grab;
  touch-action: none;
}
.admin-crop-canvas:active {
  cursor: grabbing;
}
.admin-crop-controls {
  margin-top: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
}
.admin-crop-controls label {
  font-size: 11px;
  color: #475569;
  font-weight: 700;
}
.admin-crop-controls input[type="range"] {
  width: 100%;
}
.admin-crop-controls .admin-item-btn {
  margin-top: 4px;
  grid-column: 1 / -1;
  justify-self: start;
}
.admin-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-item-btn {
  height: 34px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
  border: 1px solid #CBD5E1;
  color: #334155;
  background: #F8FAFC;
}
.admin-item-btn--primary {
  background: #1E3A8A;
  border-color: #1E3A8A;
  color: #fff;
}
.admin-item-btn--danger {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}
.admin-gestion-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-gestion-page-info {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
}

.admin-image-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.admin-image-zoom-overlay.hidden {
  display: none;
}
.admin-image-zoom-box {
  max-width: min(92vw, 980px);
  max-height: 92vh;
  position: relative;
}
.admin-image-zoom-box img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 10px;
  border: 1px solid #CBD5E1;
  background: #fff;
}
.admin-image-zoom-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15,23,42,.82);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.catalog-pagination {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.catalog-pagination.hidden { display: none; }
.catalog-page-info {
  font-size: 13px;
  color: #475569;
  font-weight: 700;
}

.whatsapp-bubble {
  position: fixed;
  right: 18px;
  bottom: 70px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
  z-index: 261;
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
}
.whatsapp-bubble svg {
  width: 30px;
  height: 30px;
}
.whatsapp-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 28px rgba(37,211,102,.55);
}

/* ======================================================
   MODAL DETALLE PRODUCTO
   ====================================================== */
.prod-detalle-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(.96);
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  z-index: 302;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  display: flex;
  flex-direction: column;
}
.prod-detalle-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}
.prod-detalle-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.prod-detalle-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.prod-detalle-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}
.prod-detalle-img-wrap svg {
  width: 72px;
  height: 72px;
}
.prod-detalle-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prod-detalle-nombre {
  font-size: 18px;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.3;
  margin: 0;
}
.prod-detalle-subtitulo {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 2px 0 0;
}
.prod-detalle-descripcion {
  font-size: 13px;
  color: #64748B;
  line-height: 1.55;
  margin: 4px 0 0;
  white-space: pre-line;
}
.prod-detalle-precio {
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  margin: 0;
}
.prod-detalle-stock {
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  margin: 0;
}
.prod-detalle-add {
  margin-top: 4px;
  height: 48px;
  font-size: 15px;
}
.prod-detalle-share {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  text-decoration: none;
  margin-top: 4px;
  align-self: flex-start;
  transition: color .15s;
}
.prod-detalle-share:hover { color: var(--blue); }
.prod-detalle-share svg { width: 15px; height: 15px; flex-shrink: 0; }

/* card clickeable */
.product-card--link {
  cursor: pointer;
}
.product-card--link .card-img,
.product-card--link .card-name,
.product-card--link .card-price {
  cursor: pointer;
}

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 88px;
  height: 40px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: 0 8px 24px rgba(30,58,138,.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 260;
}
.back-to-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ofertas-page-header-inner {
  min-height: 80px;
}
.ofertas-page-back {
  white-space: nowrap;
}
.ofertas-page-main {
  min-height: calc(100vh - 80px);
}
.ofertas-page-title {
  font-size: 28px;
  color: var(--blue);
  font-weight: 800;
  letter-spacing: .8px;
}
.ofertas-page-count {
  color: #64748B;
  font-weight: 600;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-modal-head h3 { font-size: 21px; }
  .admin-gestion-filtros { grid-template-columns: 1fr; }
  .admin-gestion-pagination { flex-wrap: wrap; }
  .admin-crop-canvas {
    width: 100%;
    max-width: 220px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 980px) {
  .admin-gestion { border-top: 1px solid #E5E7EB; }
}

/* -- Barra de filtros del cat�logo p�blico ----------------------------------- */
.catalogo-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.filtro-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filtro-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

.filtro-select {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: #F9FAFB;
  color: #1F2937;
  cursor: pointer;
  outline: none;
  transition: border-color .2s;
}
.filtro-select:focus {
  border-color: #17516e;
  background: #fff;
}

.filtro-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  user-select: none;
}
.filtro-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #17516e;
  cursor: pointer;
}

.filtro-limpiar {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  background: none;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
  margin-left: auto;
}
.filtro-limpiar:hover {
  color: #DC2626;
  border-color: #DC2626;
}
.filtro-limpiar svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 600px) {
  .catalogo-filtros {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filtro-group {
    justify-content: space-between;
  }
  .filtro-select {
    flex: 1;
  }
  .filtro-limpiar {
    margin-left: 0;
    justify-content: center;
  }
}

/* -- Botones de zoom de grilla ----------------------------------------------- */
.filtro-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 7px;
  padding: 3px;
}

.zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 6px;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #9CA3AF;
  transition: background .15s, color .15s;
}
.zoom-btn:hover {
  background: #E5E7EB;
  color: #374151;
}
.zoom-btn--active {
  background: #fff;
  color: #17516e;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.zoom-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

@media (max-width: 600px) {
  .filtro-zoom { margin-left: 0; align-self: flex-end; }
  #zoomBtnCompacto { display: none; }
}

/* Ajustes responsive de card por modo de zoom */
@media (max-width: 768px) {
  .products-grid--compacto .card-img,
  .products-grid--normal .card-img,
  .products-grid--grande .card-img {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 420px) {
  .products-grid--compacto .card-img,
  .products-grid--normal .card-img,
  .products-grid--grande .card-img {
    aspect-ratio: 1 / 1;
  }
}


/* ======================================================
   NEWSLETTER POPUP
   ====================================================== */
.newsletter-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
  padding: 16px;
}
.newsletter-overlay.newsletter-visible { opacity: 1; }
.newsletter-modal {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px 24px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  transform: translateY(20px);
  transition: transform .3s;
}
.newsletter-overlay.newsletter-visible .newsletter-modal { transform: translateY(0); }
.newsletter-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 4px 6px;
}
.newsletter-close:hover { color: #333; }
.newsletter-icon { font-size: 2rem; margin-bottom: 8px; }
.newsletter-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1a1a2e;
}
.newsletter-sub {
  font-size: 13px;
  color: #666;
  margin: 0 0 16px;
  line-height: 1.5;
}
.newsletter-skip {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #999;
  font-size: 12px;
  cursor: pointer;
  margin-top: 10px;
  text-align: center;
  text-decoration: underline;
}
.newsletter-skip:hover { color: #555; }