:root{
  --negro:#0f0f10;
  --negro2:#171719;
  --oro:#d6b15e;
  --oro2:#b98c2e;
  --blanco:#ffffff;
}

body{background:#fafafa;}

/* Top gris como el ejemplo */
.top-strip{background:#f0f0f0;border-bottom:1px solid #e6e6e6;}
.top-social{color:#444;text-decoration:none;width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;}
.top-social:hover{background:#e9e9e9;color:#111}

/* Header blanco */
.header-main{background:#fff;border-bottom:1px solid #eee;}
.brand-logo{width:400px;max-width:100%;height:76px;object-fit:contain;background:transparent;padding:0;border:0;border-radius:0;box-shadow:none;}
.brand-name{font-weight:800;letter-spacing:.5px;color:#111}

.header-actions{min-width:min(680px,100%);} 

.buscador .form-control{border-radius:14px;border:1px solid #e5e5e5;background:#fff;color:#111}
.buscador .form-control::placeholder{color:#999}
.btn-gold{background:var(--oro);border-color:var(--oro);color:#111;border-radius:14px}
.btn-gold:hover{background:var(--oro2);border-color:var(--oro2);color:#111}
.btn-cart{background:#111;border-color:#111;color:#fff;border-radius:14px}
.btn-cart:hover{background:#000;border-color:#000;color:#fff}

/* Menú principal */
.nav-main{background:#fff;border-bottom:1px solid #eee;}
.navbar-light .navbar-nav .nav-link{color:#111;opacity:.85;font-size:.92rem;letter-spacing:.02em}
.navbar-light .navbar-nav .nav-link:hover{opacity:1;color:var(--oro2)}
.dropdown-menu{border-radius:14px;border:1px solid #eee;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.dropdown-submenu{position:relative}
.dropdown-submenu>.dropdown-menu{left:100%;top:0;margin-left:.1rem}
@media (min-width: 992px){
  .nav-item.dropdown:hover > .dropdown-menu{display:block;}
  .dropdown-submenu:hover > .dropdown-menu{display:block;}
}

.card-soft{border:1px solid #eee;border-radius:18px;box-shadow:0 10px 25px rgba(0,0,0,.05)}
.titulo-seccion{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700;
  letter-spacing:.2px;
  font-size:1.5rem;
}
.badge-gold{background:var(--oro);color:#111}

.producto-card img{border-top-left-radius:18px;border-top-right-radius:18px;height:180px;object-fit:cover}
.producto-card .card-body{min-height:120px}
.precio{font-weight:800}

/* ----------------------------------------------------------------
   Piezas especiales (Fase 3) — identificación visual premium.
   Nunca usar rojo tipo "oferta": paleta dorada/oscura de la marca.
---------------------------------------------------------------- */
.pieza-especial-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--negro);
  color:var(--oro);
  border:1px solid var(--oro);
  border-radius:999px;
  padding:4px 12px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pieza-especial-badge i{color:var(--oro)}

.precio-especial-antes{
  font-size:.8em;
  text-decoration:line-through;
  color:#8a8a8a;
  margin-right:8px;
  display:inline-block;
}
.precio-especial-actual{
  font-weight:800;
  color:var(--oro2);
  font-size:1.05em;
}

.footer{background:#101010;color:#fff;margin-top:40px}
.footer .social{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.footer .social:hover{background:rgba(255,255,255,.16);color:var(--oro)}

@media(max-width:768px){
  .header-actions{width:100%;min-width:0}
  .buscador .input-group{flex-wrap:wrap}
}

/* Botón WhatsApp flotante */
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:9999;width:56px;height:56px;border-radius:999px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 10px 25px rgba(0,0,0,.25)}
.whatsapp-float:hover{filter:brightness(.95);color:#fff}

/* ----------------------------------------------------------------
   Home (Fase 8) — hero, barra de confianza, aire visual.
   Dorado como acento puntual, nunca como color de fondo dominante.
---------------------------------------------------------------- */
.home-section{ margin-top:56px; }
.home-section:first-child{ margin-top:0; }
.home-section-head{ margin-bottom:24px; }
.home-section-head .titulo-seccion{ font-size:1.7rem; }
.home-lead{ color:#6a6a6a; font-size:.95rem; max-width:560px; }

.hero-banner{ border-radius:20px; overflow:hidden; border:1px solid #eee; }
.hero-banner .carousel-item img{ width:100%; height:440px; object-fit:cover; }
.hero-empty{
  border-radius:20px; background:linear-gradient(135deg,#111 0%,#1c1c1c 100%);
  color:#fff; padding:64px 32px; text-align:center;
}
.hero-empty .titulo-seccion{ color:#fff; font-size:2.1rem; }
.hero-empty p{ color:#cfcfcf; max-width:520px; margin:12px auto 20px; }

@media (max-width:768px){
  .hero-banner .carousel-item img{ height:260px; }
  .hero-empty{ padding:44px 20px; }
  .hero-empty .titulo-seccion{ font-size:1.6rem; }
  .home-section{ margin-top:40px; }
}

.trust-bar{
  display:flex; flex-wrap:wrap; gap:18px 28px;
  justify-content:center; align-items:center;
  padding:18px 12px; margin-top:28px;
  border-top:1px solid #eee; border-bottom:1px solid #eee;
}
.trust-item{
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; color:#444; white-space:nowrap;
}
.trust-item i{ color:var(--oro2); font-size:1.05rem; }
@media (max-width:576px){
  .trust-bar{ justify-content:flex-start; gap:14px 20px; }
  .trust-item{ white-space:normal; flex:1 1 42%; }
}

.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cat-card{
  position:relative; border-radius:16px; overflow:hidden; text-decoration:none;
  aspect-ratio:1/1; background:#f3f1ec;
}
.cat-card img{ width:100%; height:100%; object-fit:contain; padding:20px; display:block; }
.cat-card .cat-label{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color:#fff; font-weight:600; font-size:.85rem; text-align:center;
}
@media (max-width:768px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
}