/* =====================================================================
   Merchandising Paraguay — Capa de diseño Premium (oscuro + dorado)
   Se monta sobre Bootstrap 5 redefiniendo sus clases. No requiere
   cambios en la lógica ni en los controllers.
   Concepto: "Tu marca, grabada en algo real" — foil dorado, láser, vitrina.
   ===================================================================== */

:root{
  --mp-carbon:      #0E0E10;   /* fondo profundo */
  --mp-superficie:  #17171C;   /* tarjetas / nav */
  --mp-superficie2: #1F1F26;   /* hover / inputs */
  --mp-linea:       #2A2A33;   /* hairlines */
  --mp-oro:         #C9A24B;   /* dorado champagne (acento) */
  --mp-oro-claro:   #E4C97E;   /* realce / hover */
  --mp-hueso:       #F2EFE9;   /* texto principal */
  --mp-tenue:       #9A9AA4;   /* texto secundario */
  --mp-grad-oro:    linear-gradient(135deg,#E4C97E 0%,#C9A24B 45%,#9C7A2E 100%);

  /* mapear variables previas para no romper estilos inline existentes */
  --mp-primario:   #C9A24B;
  --mp-secundario: #E4C97E;

  /* overrides de tokens Bootstrap */
  --bs-body-bg: var(--mp-carbon);
  --bs-body-color: var(--mp-hueso);
  --bs-border-color: var(--mp-linea);
  --bs-emphasis-color: var(--mp-hueso);
}

/* ---------- Tipografía ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

body{
  background-color: var(--mp-carbon);
  color: var(--mp-hueso);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
}

h1,h2,h3,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
.card-title, .navbar-brand{
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: .2px;
}
h4,h5,h6{ font-family:'Inter',sans-serif; font-weight:600; }

/* Eyebrow / etiqueta utilitaria */
.mp-eyebrow{
  font-family:'Inter',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em; font-size:.72rem;
  color: var(--mp-oro);
}

/* Texto con filo dorado tipo foil (firma) */
.mp-foil{
  background: var(--mp-grad-oro);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- Navbar ---------- */
.navbar{
  background: rgba(14,14,16,.85) !important;
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--mp-linea);
}
.navbar .navbar-brand{
  font-size:1.35rem; font-weight:700; color:var(--mp-hueso) !important;
}
.navbar .navbar-brand::first-letter{ color:var(--mp-oro); }
.navbar .nav-link{ color:var(--mp-tenue) !important; font-weight:500; position:relative; }
.navbar .nav-link:hover{ color:var(--mp-hueso) !important; }
.navbar .nav-link::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:.2rem; height:1px;
  background:var(--mp-grad-oro); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.navbar .nav-link:hover::after{ transform:scaleX(1); }
.navbar-toggler{ border-color:var(--mp-linea); }

/* ---------- Botones ---------- */
.btn{ border-radius:2px; font-weight:600; letter-spacing:.02em; padding:.55rem 1.25rem; }
.btn-primary{
  background: var(--mp-grad-oro); border:none; color:#1a1407;
  box-shadow:0 6px 18px -8px rgba(201,162,75,.6);
}
.btn-primary:hover,.btn-primary:focus{
  background:linear-gradient(135deg,#F0D690,#D4AE58 50%,#A9842F); color:#1a1407;
  transform:translateY(-1px);
}
.btn-light{ background:var(--mp-hueso); color:var(--mp-carbon); border:none; }
.btn-light:hover{ background:#fff; color:#000; }
.btn-outline-primary{
  color:var(--mp-oro); border:1px solid var(--mp-oro); background:transparent;
}
.btn-outline-primary:hover{ background:var(--mp-oro); color:#1a1407; border-color:var(--mp-oro); }
.btn-outline-secondary{ color:var(--mp-tenue); border-color:var(--mp-linea); }
.btn-outline-secondary:hover{ background:var(--mp-superficie2); color:var(--mp-hueso); border-color:var(--mp-oro); }
.btn-success{ background:#3E7D5A; border:none; }
.btn-success:hover{ background:#46895f; }

/* ---------- Tarjetas ---------- */
.card{
  background:var(--mp-superficie); border:1px solid var(--mp-linea);
  border-radius:6px; color:var(--mp-hueso);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card.shadow-sm{ box-shadow:0 10px 30px -22px rgba(0,0,0,.9) !important; }
.card:hover{
  border-color:rgba(201,162,75,.55);
  transform:translateY(-3px);
  box-shadow:0 18px 40px -24px rgba(201,162,75,.35) !important;
}
.card-title{ color:var(--mp-hueso); }
.card-header{
  background:var(--mp-superficie2); border-bottom:1px solid var(--mp-linea);
  color:var(--mp-hueso); font-weight:600;
}
.border-0{ border:0 !important; }

/* zona de imagen del producto (placeholder elegante) */
.ratio.bg-light{ background:var(--mp-superficie2) !important; }
.ratio .bi{ color:#3A3A44 !important; }

/* ---------- Texto utilitario ---------- */
.text-muted{ color:var(--mp-tenue) !important; }
.text-primary{ color:var(--mp-oro) !important; }
.text-dark{ color:var(--mp-hueso) !important; }
a{ color:var(--mp-oro); text-decoration:none; }
a:hover{ color:var(--mp-oro-claro); }
.fw-semibold.text-dark{ color:var(--mp-hueso) !important; }

/* ---------- Formularios ---------- */
.form-control,.form-select{
  background:var(--mp-superficie2); border:1px solid var(--mp-linea); color:var(--mp-hueso);
  border-radius:3px;
}
.form-control:focus,.form-select:focus{
  background:var(--mp-superficie2); color:var(--mp-hueso);
  border-color:var(--mp-oro); box-shadow:0 0 0 .2rem rgba(201,162,75,.18);
}
.form-control::placeholder{ color:#6B6B74; }
.form-text{ color:var(--mp-tenue); }
.input-group-text{ background:var(--mp-superficie2); border-color:var(--mp-linea); color:var(--mp-tenue); }

/* ---------- Tablas ---------- */
.table{ color:var(--mp-hueso); --bs-table-bg:transparent; }
.table thead th{
  color:var(--mp-tenue); text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; border-bottom:1px solid var(--mp-linea);
}
.table td,.table th{ border-color:var(--mp-linea); }
.table-hover tbody tr:hover{ background:var(--mp-superficie2); color:var(--mp-hueso); }

/* ---------- Badges ---------- */
.badge.bg-light{ background:var(--mp-superficie2) !important; color:var(--mp-hueso) !important; border:1px solid var(--mp-linea); }
.badge.bg-primary{ background:var(--mp-oro) !important; color:#1a1407 !important; }
.badge.bg-success{ background:#3E7D5A !important; }

/* ---------- Alerts ---------- */
.alert{ border-radius:4px; border:1px solid var(--mp-linea); }
.alert-info{ background:rgba(201,162,75,.08); color:var(--mp-hueso); border-color:rgba(201,162,75,.3); }
.alert-success{ background:rgba(62,125,90,.12); color:#CFE8D9; border-color:rgba(62,125,90,.4); }
.alert-warning{ background:rgba(201,162,75,.1); color:var(--mp-oro-claro); border-color:rgba(201,162,75,.35); }

/* ---------- Hairline dorada (separador firma) ---------- */
.mp-rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--mp-oro),transparent);
  opacity:.5;
}

/* ---------- HERO ---------- */
.mp-hero{
  position:relative; overflow:hidden;
  border:1px solid var(--mp-linea); border-radius:10px;
  background:
    radial-gradient(120% 140% at 85% 10%, rgba(201,162,75,.18), transparent 55%),
    radial-gradient(90% 120% at 10% 90%, rgba(201,162,75,.07), transparent 50%),
    linear-gradient(180deg,#15151A,#0E0E10);
  padding:4.5rem 3rem;
}
.mp-hero::after{ /* filo dorado superior, como borde grabado */
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--mp-grad-oro); opacity:.8;
}
.mp-hero h1{ font-size:clamp(2.1rem,4.5vw,3.6rem); line-height:1.06; font-weight:700; }
.mp-hero .lead{ color:var(--mp-tenue); max-width:46ch; }

/* chips de confianza bajo el hero */
.mp-chips{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.mp-chip{
  border:1px solid var(--mp-linea); border-radius:999px;
  padding:.3rem .8rem; font-size:.78rem; color:var(--mp-tenue);
  display:inline-flex; align-items:center; gap:.35rem;
}
.mp-chip .bi{ color:var(--mp-oro); }

/* ---------- Sección título con eyebrow ---------- */
.mp-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.mp-section-head h2,.mp-section-head h3{ margin:0; font-size:1.6rem; }

/* ---------- Tarjeta categoría ---------- */
.mp-cat{ text-align:center; padding:1.5rem .75rem; }
.mp-cat .mp-cat-ico{
  width:54px; height:54px; margin:0 auto .7rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--mp-superficie2); border:1px solid var(--mp-linea);
  transition:all .25s ease;
}
.mp-cat .mp-cat-ico .bi{ font-size:1.4rem; color:var(--mp-oro); }
.card:hover .mp-cat-ico{ border-color:var(--mp-oro); box-shadow:0 0 0 4px rgba(201,162,75,.08); }

/* precio destacado */
.mp-precio{ color:var(--mp-oro-claro); font-weight:600; }
.mp-precio small{ color:var(--mp-tenue); font-weight:400; }

/* ---------- Footer ---------- */
footer{
  background:var(--mp-superficie); border-top:1px solid var(--mp-linea) !important;
  color:var(--mp-tenue) !important; margin-top:4rem !important;
}
footer a{ color:var(--mp-tenue); } footer a:hover{ color:var(--mp-oro); }

/* ---------- Login/registro (layout auth) ---------- */
.bg-light{ background:var(--mp-carbon) !important; }

/* ---------- Accesibilidad ---------- */
:focus-visible{ outline:2px solid var(--mp-oro); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* franja CTA inferior */
.mp-cta-band{
  border:1px solid var(--mp-linea); border-radius:10px;
  background:linear-gradient(180deg,#16161B,#0E0E10);
  position:relative; overflow:hidden; padding:3rem;
}
.mp-cta-band::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--mp-grad-oro); opacity:.7;
}

/* ---------- Panel admin ---------- */
.list-group{ border-radius:6px; overflow:hidden; }
.list-group-item{
  background:var(--mp-superficie); border-color:var(--mp-linea); color:var(--mp-tenue);
}
.list-group-item-action:hover{ background:var(--mp-superficie2); color:var(--mp-hueso); }
.list-group-item.active,.list-group-item-action:focus{
  background:var(--mp-superficie2); border-color:var(--mp-oro); color:var(--mp-oro-claro);
}
.list-group-item .bi{ color:var(--mp-oro); margin-right:.4rem; }
.bg-dark{ background:var(--mp-superficie) !important; }
.navbar-brand .bi{ color:var(--mp-oro); }
.display-6{ color:var(--mp-hueso); }
.progress{ background:var(--mp-superficie2); }
.progress-bar{ background:var(--mp-grad-oro) !important; }

/* ---------- Páginas CMS ---------- */
.mp-contenido{ color:var(--mp-hueso); line-height:1.75; }
.mp-contenido h3{ font-family:'Inter',sans-serif; font-weight:600; color:var(--mp-oro-claro);
  margin-top:1.8rem; margin-bottom:.6rem; font-size:1.2rem; }
.mp-contenido p{ color:var(--mp-tenue); margin-bottom:1rem; }
.mp-contenido .lead{ color:var(--mp-hueso); font-size:1.15rem; }
.mp-contenido ul,.mp-contenido ol{ color:var(--mp-tenue); margin-bottom:1rem; padding-left:1.3rem; }
.mp-contenido li{ margin-bottom:.4rem; }
.mp-contenido strong{ color:var(--mp-hueso); }
.mp-contenido a{ color:var(--mp-oro); }

/* ---------- Acordeón FAQ (tema oscuro) ---------- */
.accordion{ --bs-accordion-bg:transparent; --bs-accordion-border-color:var(--mp-linea); }
.accordion-item{ background:var(--mp-superficie); border:1px solid var(--mp-linea);
  margin-bottom:.5rem; border-radius:6px !important; overflow:hidden; }
.accordion-button{ background:var(--mp-superficie); color:var(--mp-hueso); font-weight:500;
  font-family:'Inter',sans-serif; }
.accordion-button:not(.collapsed){ background:var(--mp-superficie2); color:var(--mp-oro-claro);
  box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(201,162,75,.18); border-color:var(--mp-oro); }
.accordion-button::after{ filter:invert(72%) sepia(40%) saturate(450%) hue-rotate(5deg); }
.accordion-body{ background:var(--mp-superficie); color:var(--mp-tenue); }

/* ---------- Enlaces del footer (columnas) ---------- */
.mp-footer-links{ display:flex; flex-direction:column; gap:.5rem; }
.mp-footer-links a{ color:var(--mp-tenue); font-size:.85rem; display:block; }
.mp-footer-links a:hover{ color:var(--mp-oro); }

/* ---------- Editor Quill (tema oscuro admin) ---------- */
#editorToolbar.ql-toolbar.ql-snow{
  background:var(--mp-superficie2); border:1px solid var(--mp-linea);
  border-bottom:0; border-radius:6px 6px 0 0;
}
#editor.ql-container.ql-snow{
  background:var(--mp-superficie); border:1px solid var(--mp-linea);
  border-radius:0 0 6px 6px; min-height:320px; color:var(--mp-hueso);
  font-family:'Inter',sans-serif; font-size:1rem;
}
.ql-editor{ min-height:320px; }
.ql-editor.ql-blank::before{ color:#6B6B74; font-style:normal; }
/* iconos y texto de la toolbar en claro */
.ql-snow .ql-stroke{ stroke:var(--mp-tenue); }
.ql-snow .ql-fill{ fill:var(--mp-tenue); }
.ql-snow .ql-picker{ color:var(--mp-tenue); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke{ stroke:var(--mp-oro); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill{ fill:var(--mp-oro); }
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-label.ql-active{ color:var(--mp-oro); }
/* desplegables de la toolbar */
.ql-snow .ql-picker-options{
  background:var(--mp-superficie2); border-color:var(--mp-linea) !important;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label{ border-color:var(--mp-linea); }
/* enlaces dentro del editor */
.ql-editor a{ color:var(--mp-oro); }

/* Footer: enlaces apilados (ya forzados en la regla base .mp-footer-links) */

/* ---------- Botón flotante de WhatsApp con selector ---------- */
.mp-wa{ position:fixed; right:20px; bottom:20px; z-index:1050; }
.mp-wa-btn{
  width:56px; height:56px; border-radius:50%; border:none;
  background:#25D366; color:#fff; font-size:1.7rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.6); cursor:pointer;
  transition:transform .2s ease;
}
.mp-wa-btn:hover{ transform:scale(1.08); color:#fff; }
.mp-wa-menu{
  position:absolute; right:0; bottom:68px; width:260px;
  background:var(--mp-superficie); border:1px solid var(--mp-linea);
  border-radius:12px; padding:.5rem; display:none;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
}
.mp-wa-menu.show{ display:block; }
.mp-wa-title{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--mp-tenue); padding:.4rem .6rem .5rem;
}
.mp-wa-menu a{
  display:flex; align-items:center; gap:.6rem; padding:.6rem;
  border-radius:8px; color:var(--mp-hueso); text-decoration:none;
}
.mp-wa-menu a:hover{ background:var(--mp-superficie2); color:var(--mp-hueso); }
.mp-wa-menu a .bi{ color:#25D366; font-size:1.3rem; }
.mp-wa-menu a small{ display:block; color:var(--mp-tenue); font-size:.75rem; }

/* ---------- Contacto: horario, mapa, reseñas ---------- */
.mp-horario{ color:var(--mp-tenue); line-height:1.9; }
.mp-mapa iframe{ width:100%; height:340px; border:0; display:block; border-radius:6px; }
.mp-stars{ color:var(--mp-oro); letter-spacing:2px; font-size:1rem; }
.list-unstyled .btn{ white-space:nowrap; }

/* ---------- Selector de íconos (admin categorías) ---------- */
.mp-ico-preview{
  width:46px; height:46px; flex:0 0 46px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--mp-superficie2); border:1px solid var(--mp-linea);
  font-size:1.4rem; color:var(--mp-oro);
}
.mp-ico-grid{ display:flex; flex-wrap:wrap; gap:.4rem; }
.mp-ico-opt{
  width:42px; height:42px; border-radius:8px; cursor:pointer;
  background:var(--mp-superficie2); border:1px solid var(--mp-linea);
  color:var(--mp-tenue); font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.mp-ico-opt:hover{ border-color:var(--mp-oro); color:var(--mp-oro); transform:translateY(-1px); }

/* ---------- Miniaturas de galería (admin productos) ---------- */
.mp-thumb{ position:relative; width:90px; height:90px; border-radius:8px; overflow:hidden; border:1px solid var(--mp-linea); }
.mp-thumb img{ width:100%; height:100%; object-fit:cover; }
.mp-thumb-del{
  position:absolute; top:2px; right:2px; width:22px; height:22px; border-radius:50%;
  border:none; background:rgba(0,0,0,.7); color:#fff; font-size:14px; line-height:1; cursor:pointer;
}
.mp-thumb-del:hover{ background:#c0392b; }

/* ---------- Bloque de reseñas (home) ---------- */
.mp-reviews{ max-width:1140px; margin:0 auto; padding:3.5rem 1rem 1rem; }
.mp-review-text{
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- Galería de producto ---------- */
.mp-galeria{ position:relative; overflow:hidden; border-radius:10px; background:var(--mp-superficie2); aspect-ratio:1/1; }
.mp-galeria-track{ display:flex; height:100%; transition:transform .35s ease; }
.mp-galeria-slide{ min-width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.mp-galeria-slide img{ width:100%; height:100%; object-fit:cover; }
.mp-galeria-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:none;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.mp-galeria-nav:hover{ background:rgba(0,0,0,.8); }
.mp-galeria-nav.prev{ left:10px; }
.mp-galeria-nav.next{ right:10px; }
.mp-galeria-dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.mp-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; }
.mp-dot.active{ background:#fff; }
.mp-galeria-thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.mp-thumb-btn{
  width:64px; height:64px; border-radius:8px; overflow:hidden; padding:0;
  border:2px solid transparent; background:none; cursor:pointer;
}
.mp-thumb-btn.active{ border-color:var(--mp-oro); }
.mp-thumb-btn img{ width:100%; height:100%; object-fit:cover; }