/* ============================================================
   CABUB STORE — Capa de marca (rediseño 2026)
   Se carga DESPUÉS de styles.css y lo redecora sin romper nada:
   solo redefine variables y agrega estilos nuevos (logo, secciones).

   Paleta:
     Tinta      #1C1714  (ancla premium)
     Porcelana  #F6F1EC  (fondo / limpieza)
     Malva      #BC6C86  (belleza)      · color de sección
     Champán    #C7A265  (premium)      · acento maestro
     Coral      #F1592B  (COMPRAR)      · reservado al botón
   ============================================================ */

/* 1) Remapeo de la paleta base (todo el sitio se recolorea solo) */
:root {
  --negro:      #1C1714;   /* tinta cálida */
  --superficie: #F6F1EC;   /* porcelana */
  --rojo:       #F1592B;   /* CORAL = comprar */
  --rojo-osc:   #D8431E;
  --champan:    #C7A265;
  --gris-borde: #E7DFD5;
  --gris-txt:   #6B6560;

  /* Color de la sección activa (por defecto: maestro = champán) */
  --cat:        #C7A265;
  --cat-text:   #8A6A24;
  --cat-tint:   rgba(199,162,101,.16);
}

/* 2) Tema por sección: cambia SOLO el acento, nunca el marco ni el coral */
body[data-seccion="belleza"] { --cat:#BC6C86; --cat-text:#7A2E45; --cat-tint:rgba(188,108,134,.14); }
body[data-seccion="electro"] { --cat:#64748B; --cat-text:#33404F; --cat-tint:rgba(100,116,139,.14); }
body[data-seccion="hogar"]   { --cat:#7BA17A; --cat-text:#395E38; --cat-tint:rgba(123,161,122,.14); }
body[data-seccion="tech"]    { --cat:#3F7CC0; --cat-text:#1E4E85; --cat-tint:rgba(63,124,192,.14); }
body[data-seccion="bebe"]    { --cat:#9B85C4; --cat-text:#4A3B6E; --cat-tint:rgba(155,133,196,.14); }

/* 3) La franja superior deja de ser coral (el coral se reserva al botón) */
.header-promo { background: var(--negro); color:#F6F1EC; }
.promo-track .ic { color: var(--champan); }

/* 4) Logo: marca paraguas con ficha intercambiable ------------------- */
.brand-lock { display:inline-flex; align-items:center; gap:10px; }
.brand-mark { width:40px; height:40px; display:block; flex:0 0 auto; }
.brand-word {
  font-family:'Manrope', sans-serif; font-weight:800; letter-spacing:-.5px;
  font-size:22px; line-height:1; color:var(--negro); display:flex; flex-direction:column;
}
.brand-desc {
  font-family:'Manrope', sans-serif; font-weight:700; letter-spacing:2px;
  font-size:9.5px; margin-top:3px; color:var(--cat); transition:color .2s;
}
@media (max-width:480px){ .brand-word{ font-size:19px; } .brand-mark{ width:36px; height:36px; } }

/* 5) Sección: encabezado con acento de color ------------------------- */
#categorias .section-head h2::after,
#catalogo   .section-head h2::after {
  content:""; display:block; width:42px; height:3px; border-radius:2px;
  background:var(--cat); margin-top:8px; transition:background .2s;
}

/* 6) Tarjetas de SECCIÓN (reemplazan el grid de categorías) ---------- */
.cat-grid { grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.sec-card {
  --sc:#C7A265; --sc-text:#8A6A24; --sc-tint:rgba(199,162,101,.12);
  position:relative; background:#fff; border:1px solid var(--gris-borde);
  border-radius:14px; padding:20px 16px 16px; text-align:center; cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.sec-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(28,23,20,.08); }
.sec-ic {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px;
  background:var(--sc-tint); color:var(--sc); margin-bottom:10px;
}
.sec-ic .ic-lg { width:26px; height:26px; }
.sec-nom { font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:var(--negro); }
.sec-meta { display:block; font-size:11.5px; color:var(--gris-txt); margin-top:3px; }
.sec-card.activo { border-color:var(--sc); box-shadow:0 0 0 1px var(--sc); }
.sec-card.activo .sec-nom { color:var(--sc-text); }

/* Sección "Próximamente" (placeholder para lo que aún no hay) */
.sec-card.sec-off { opacity:.94; }
.sec-card.sec-off .sec-ic { background:#F1EFE9; color:#B4AEA5; }
.sec-card.sec-off .sec-nom { color:#8A857E; }
.sec-badge-pronto {
  position:absolute; top:10px; right:10px;
  font-family:'Manrope',sans-serif; font-size:9px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:var(--sc-text); background:var(--sc-tint);
  padding:3px 8px; border-radius:20px;
}

/* 7) Sub-categorías: chips que aparecen dentro de una sección -------- */
.subcat-rail {
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px;
}
.subcat-rail:empty { display:none; }
.chip-sub {
  border:1px solid var(--gris-borde); background:#fff; color:var(--gris-txt);
  font-family:'Manrope',sans-serif; font-weight:600; font-size:12.5px;
  padding:7px 14px; border-radius:20px; cursor:pointer; transition:all .15s;
}
.chip-sub:hover { border-color:var(--cat); color:var(--cat-text); }
.chip-sub.activo { background:var(--cat); border-color:var(--cat); color:#fff; }

/* 8) Estado vacío / próximamente dentro del catálogo ---------------- */
.sec-vacio {
  grid-column:1 / -1; text-align:center; padding:40px 20px;
  border:1px dashed var(--gris-borde); border-radius:14px; background:var(--cat-tint);
}
.sec-vacio h3 { font-family:'Manrope',sans-serif; color:var(--cat-text); font-size:18px; margin-bottom:6px; }
.sec-vacio p { color:var(--gris-txt); font-size:14px; }

/* 9) Pequeños detalles premium -------------------------------------- */
.ficha-precio { color:var(--negro); }
.badge-combo { background:var(--champan) !important; color:#3a2c0c !important; }
.nav-links a:hover { color:var(--cat); }

/* 10) Hero "Ficha editorial": texto + imagen, color por sección ------
   Cada slide se parte en dos: un panel de texto (tinte de la sección)
   con tag, título, subtítulo y botón CORAL, y la imagen al lado.
   El color lo aporta app.js por slide vía --sc/--sc-text/--sc-tint
   (si el slide no trae `seccion`, cae al maestro champán).
   Se conserva la clase .hero-slide para que el scroll/snap/dots sigan. */
.hero-slide.hero-ed {
  aspect-ratio:auto; display:grid; grid-template-columns:1.08fr .92fr;
  align-items:stretch; background:#fff; border:1px solid var(--gris-borde);
  border-radius:14px; overflow:hidden; min-height:210px;
}
.hero-ed-txt {
  padding:24px 26px; display:flex; flex-direction:column; justify-content:center;
  background:var(--sc-tint, rgba(199,162,101,.14));
}
.hero-ed-tag {
  align-self:flex-start; margin-bottom:12px;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.6px; text-transform:uppercase;
  color:var(--sc-text, #8A6A24); background:#fff; padding:5px 12px; border-radius:20px;
}
.hero-ed-tit {
  font-family:'Manrope',sans-serif; font-weight:800; line-height:1.12;
  font-size:clamp(20px, 2.6vw, 30px); color:var(--negro); margin:0 0 8px;
}
.hero-ed-sub { font-size:14px; color:var(--gris-txt); margin:0 0 18px; max-width:34ch; }
.hero-ed-cta {
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  background:var(--rojo); color:#fff; text-decoration:none;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:14px;
  padding:11px 20px; border-radius:9px; cursor:pointer;
  transition:background .15s, transform .15s;
}
.hero-ed-cta:hover { background:var(--rojo-osc); transform:translateY(-1px); }
.hero-ed-cta svg { width:16px; height:16px; }
.hero-ed-media { position:relative; background:var(--sc, var(--champan)); }
.hero-ed-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:560px) {
  .hero-slide.hero-ed {
    grid-template-columns:1fr; aspect-ratio:auto; background:#fff; min-height:0;
  }
  .hero-ed-media { order:-1; height:150px; }
  .hero-ed-txt { padding:18px 18px 20px; }
  .hero-ed-tit { font-size:20px; }
  .hero-ed-sub { font-size:13px; margin-bottom:14px; }
}