/* ============================================================
   DORIEL — Tema "artesanal cálido"
   Miel pura · mieldoriel.com
   Construido sobre Bootstrap 5. Sobrescribe variables y añade
   componentes propios de la marca.
   ============================================================ */

:root {
  /* --- Paleta de marca (tomada del logo + etiquetas reales) --- */
  --miel:        #ffc83e;   /* dorado miel (color primario del logo) */
  --miel-osc:    #e8a81c;   /* miel más profunda (hover / acentos)   */
  --ambar:       #b5830f;   /* ámbar oscuro (detalles, links)        */
  --crema:       #fcfbe6;   /* crema (fondo principal del logo)      */
  --crema-2:     #f5eecb;   /* crema más cálida (secciones)          */
  --blanco:      #fffdf5;   /* blanco cremoso                        */
  --navy:        #001f37;   /* azul marino profundo (etiquetas)      */
  --navy-2:      #0b345b;   /* azul marino medio (acentos)           */
  --navy-900:    #07121c;   /* casi negro azulado                    */
  --texto:       #102a3f;   /* texto principal (navy oscuro)         */
  --texto-suave: #4a5e70;   /* texto secundario                      */
  --verde:       #7c8a4e;   /* verde natural (acento, "natural")     */
  --linea:       #ece3c2;   /* bordes suaves                         */

  /* --- Mapeo a variables de Bootstrap --- */
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--crema);
  --bs-primary: var(--miel);
  --bs-primary-rgb: 255, 200, 62;
  --bs-link-color: var(--ambar);
  --bs-link-hover-color: var(--miel-osc);
  --bs-border-color: var(--linea);

  --sombra-suave: 0 10px 30px rgba(58, 46, 18, .08);
  --sombra-card:  0 6px 24px rgba(58, 46, 18, .10);
  --radio:        16px;
}

/* ---------- Tipografía ---------- */
body {
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background-color: var(--crema);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, .font-display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--texto);
  font-weight: 600;
  letter-spacing: -.01em;
}

.eyebrow {
  font-family: 'Mulish', sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ambar);
}

.lead-warm { font-size: 1.18rem; color: var(--texto-suave); }

/* ---------- Botones ---------- */
.btn { border-radius: 999px; font-weight: 700; padding: .7rem 1.6rem; transition: all .2s ease; }

.btn-miel {
  background: var(--miel);
  color: var(--texto);
  border: 2px solid var(--miel);
  box-shadow: 0 6px 16px rgba(232, 168, 28, .35);
}
.btn-miel:hover { background: var(--miel-osc); border-color: var(--miel-osc); color: var(--texto); transform: translateY(-2px); }

.btn-outline-miel {
  background: transparent;
  color: var(--ambar);
  border: 2px solid var(--miel);
}
.btn-outline-miel:hover { background: var(--miel); color: var(--texto); }

.btn-ghost { background: transparent; color: var(--texto); border: 2px solid transparent; }
.btn-ghost:hover { color: var(--ambar); }

/* ---------- Navbar ---------- */
.navbar-doriel {
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  backdrop-filter: saturate(1.1);
}
.navbar-doriel .navbar-brand img { height: 34px; }
.navbar-doriel .nav-link {
  color: var(--texto);
  font-weight: 600;
  margin: 0 .35rem;
  position: relative;
}
.navbar-doriel .nav-link:hover,
.navbar-doriel .nav-link.active { color: var(--ambar); }
.navbar-doriel .nav-link.active::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 2px;
  height: 2px; background: var(--miel); border-radius: 2px;
}
.cart-pill {
  background: var(--miel); color: var(--texto);
  border-radius: 999px; padding: .45rem .9rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .4rem;
}
.cart-count {
  background: var(--texto); color: var(--miel);
  border-radius: 999px; font-size: .72rem; min-width: 20px;
  height: 20px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

/* ---------- Logo en navbar/footer sobre fondo claro ----------
   El SVG del logo usa crema (#fcfbe6) en el wordmark, invisible
   sobre crema. Esta clase lo recolorea a café cálido.            */
.logo-dark .cls-1 { fill: var(--texto) !important; }   /* wordmark */
.logo-dark .cls-2 { fill: var(--miel-osc) !important; } /* abeja / acento */
.logo-cream .cls-1 { fill: var(--crema) !important; }
.logo-cream .cls-2 { fill: var(--miel) !important; }

/* ---------- Banda de anuncio ---------- */
.topbar {
  background: var(--navy); color: var(--crema);
  font-size: .85rem; font-weight: 600; letter-spacing: .02em;
}
.topbar i { color: var(--miel); }

/* Botón navy (CTA secundario sobre fondos claros/dorados) */
.btn-navy { background: var(--navy); color: var(--crema); border: 2px solid var(--navy); }
.btn-navy:hover { background: var(--navy-2); border-color: var(--navy-2); color: var(--crema); transform: translateY(-2px); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(255,200,62,.35), transparent 60%),
    linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
  overflow: hidden;
}
.hero .badge-natural {
  background: rgba(124,138,78,.14); color: var(--verde);
  border-radius: 999px; padding: .35rem .9rem; font-weight: 700; font-size: .82rem;
}

/* ---------- Patrón panal (divisores) ---------- */
.honeycomb-band {
  background-color: var(--miel);
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0l28 16v34L28 66 0 50V16zM28 66l28 16v18H0V82z' fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='2'/%3E%3C/svg%3E");
  color: var(--texto);
}

/* ---------- Tarjetas de producto ---------- */
.product-card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  transition: transform .22s ease, box-shadow .22s ease;
  overflow: hidden;
  height: 100%;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 38px rgba(58,46,18,.16); }
.product-media {
  background: radial-gradient(circle at 50% 35%, var(--crema) 0%, var(--crema-2) 100%);
  padding: 1.5rem; text-align: center; position: relative;
}
.product-media img, .product-media svg { max-height: 220px; width: auto; }
.product-tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--miel); color: var(--texto);
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; letter-spacing: .05em;
}
.product-body { padding: 1.25rem 1.25rem 1.5rem; }
.product-title { font-size: 1.18rem; margin-bottom: .15rem; }
.product-size  { color: var(--texto-suave); font-size: .9rem; }
.product-price { font-size: 1.4rem; font-weight: 800; color: var(--ambar); font-family: 'Fraunces', serif; }
.product-price small { font-size: .8rem; font-weight: 600; color: var(--texto-suave); }

/* placeholder visible para precios/fotos por reemplazar */
.placeholder-flag {
  display: inline-block; background: repeating-linear-gradient(45deg,#fff2cc,#fff2cc 6px,#ffe9a8 6px,#ffe9a8 12px);
  border: 1px dashed var(--miel-osc); color: var(--ambar);
  font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; letter-spacing: .03em;
}

/* ---------- Cajas de valor / íconos ---------- */
.value-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--miel); color: var(--texto);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 8px 20px rgba(232,168,28,.3);
}

/* ---------- Secciones ---------- */
.section { padding: 5rem 0; }
.section-cream { background: var(--crema-2); }
.section-white { background: var(--blanco); }

/* ---------- Ficha de producto ---------- */
.size-option {
  border: 2px solid var(--linea); border-radius: 12px;
  padding: .8rem 1rem; cursor: pointer; transition: all .15s ease;
  background: var(--blanco); text-align: center;
}
.size-option:hover { border-color: var(--miel); }
.size-option.active { border-color: var(--miel); background: #fff8e6; box-shadow: inset 0 0 0 1px var(--miel); }
.size-option .so-size { font-weight: 800; font-family: 'Fraunces', serif; }
.size-option .so-price { color: var(--ambar); font-weight: 700; font-size: .92rem; }

.qty-control { display: inline-flex; align-items: center; border: 2px solid var(--linea); border-radius: 999px; overflow: hidden; }
.qty-control button { background: var(--crema-2); border: 0; width: 42px; height: 42px; font-size: 1.2rem; color: var(--texto); }
.qty-control input { width: 56px; text-align: center; border: 0; background: var(--blanco); font-weight: 700; }

/* ---------- Carrito / checkout ---------- */
.cart-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.cart-item .ci-media { width: 84px; height: 84px; flex: 0 0 84px; background: var(--crema-2); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.cart-item .ci-media svg { height: 64px; }
.summary-card { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-card); }
.pay-method {
  border: 2px solid var(--linea); border-radius: 12px; padding: 1rem;
  display: flex; align-items: center; gap: .8rem; cursor: pointer; transition: all .15s ease; background: var(--blanco);
}
.pay-method:hover { border-color: var(--miel); }
.pay-method.active { border-color: var(--miel); background: #fff8e6; }
.pay-method i { font-size: 1.5rem; color: var(--ambar); width: 30px; text-align: center; }
.integration-note {
  background: #fff8e6; border: 1px dashed var(--miel-osc); border-radius: 10px;
  padding: .65rem .85rem; font-size: .82rem; color: var(--ambar);
}

/* ---------- Indicador de pasos del checkout ---------- */
.co-steps { display:flex; align-items:center; justify-content:center; gap:.25rem; max-width:680px; margin:0 auto; }
.co-step { display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.co-dot {
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; background:var(--blanco); border:2px solid var(--linea); color:var(--texto-suave); transition:all .2s ease;
}
.co-step.current .co-dot { background:var(--miel); border-color:var(--miel); color:var(--texto); box-shadow:0 4px 12px rgba(232,168,28,.4); }
.co-step.done .co-dot { background:var(--navy); border-color:var(--navy); color:var(--crema); }
.co-step-label { font-size:.8rem; font-weight:700; color:var(--texto-suave); }
.co-step.current .co-step-label { color:var(--ambar); }
.co-step.done .co-step-label { color:var(--navy); }
.co-line { flex:1; height:3px; min-width:24px; background:var(--linea); border-radius:3px; }
.co-line.done { background:var(--navy); }
.pay-method input { pointer-events:none; }
@media (max-width:575px){ .co-step-label { display:none; } .co-line { min-width:12px; } }

/* ---------- FAQ ---------- */
.accordion-button { font-family: 'Fraunces', serif; font-weight: 600; color: var(--texto); background: var(--blanco); }
.accordion-button:not(.collapsed) { background: #fff8e6; color: var(--ambar); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--miel); }
.accordion-item { border: 1px solid var(--linea); border-radius: 12px !important; margin-bottom: .75rem; overflow: hidden; }

/* ---------- Blog ---------- */
.blog-card { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-card); transition: transform .2s ease; height: 100%; }
.blog-card:hover { transform: translateY(-5px); }
.blog-thumb { height: 180px; background: linear-gradient(135deg, var(--miel) 0%, var(--miel-osc) 100%); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); font-size: 3rem; }
.blog-meta { color: var(--texto-suave); font-size: .82rem; }
.blog-tag { background: var(--crema-2); color: var(--ambar); border-radius: 999px; padding: .2rem .7rem; font-size: .75rem; font-weight: 700; }
.article-body { font-size: 1.08rem; }
.article-body p { margin-bottom: 1.2rem; }
.article-body h2 { margin: 2rem 0 1rem; }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: var(--crema); padding: 3.5rem 0 1.5rem; }
.footer a { color: var(--crema); opacity: .8; text-decoration: none; }
.footer a:hover { opacity: 1; color: var(--miel); }
.footer h6 { color: var(--miel); font-family: 'Mulish', sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; }
.footer .social a { font-size: 1.2rem; margin-right: .9rem; }
.footer-bottom { border-top: 1px solid rgba(252,251,230,.15); margin-top: 2rem; padding-top: 1.2rem; font-size: .85rem; opacity: .7; }

/* ---------- Utilidades ---------- */
.text-miel { color: var(--miel-osc) !important; }
.text-ambar { color: var(--ambar) !important; }
.bg-cream { background: var(--crema) !important; }
.bg-cream-2 { background: var(--crema-2) !important; }
.rounded-doriel { border-radius: var(--radio) !important; }
.divider-wave { line-height: 0; }

/* WhatsApp flotante */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 1030;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; box-shadow: 0 8px 22px rgba(0,0,0,.25); text-decoration: none;
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.08); color: #fff; }

@media (max-width: 991px) {
  .section { padding: 3.2rem 0; }
  .hero { text-align: center; }
}