/* ============================================================
   16. BARRA NEGRA · LOGO DORADO PLANO · TEXTOS EN NEGRO · BOTONES DORADOS
   ============================================================ */

/* ---------- barra fija negra ---------- */
.topbar{background:linear-gradient(180deg, rgba(9,9,11,.96), rgba(9,9,11,.86)); border-bottom:1px solid rgba(242,180,95,.28)}
.topbar.is-stuck{background:#09090B; box-shadow:0 14px 36px -26px rgba(0,0,0,.9)}
.drawer{background:#09090B; border-top:1px solid rgba(242,180,95,.2)}
.drawer a{color:#F5EFE6; border-bottom:1px solid rgba(255,255,255,.09)}
.drawer a:hover{color:#F2B45F}
.topnav a{color:#E8E2D8}
.topnav a:hover{color:#F2B45F}
.burger{border:1px solid rgba(242,180,95,.35); background:rgba(255,255,255,.06)}
.burger span{background:#F2B45F}

/* logotipo: dorado plano, sin degradado */
.brand__name{background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:#F2B45F !important}
.brand__mark{background:radial-gradient(circle at 50% 45%, rgba(242,180,95,.22), transparent 70%)}
footer .brand__name{color:#A9761B !important}

/* pestañas sobre la barra negra */
.switch{background:rgba(255,255,255,.07); border:1px solid rgba(242,180,95,.28)}
.switch button{color:#CFC7BB}
.switch button:hover{color:#F2B45F}

/* ---------- BOTONES: dorado metálico, nada de carmelita ---------- */
.btn--solid, .shell .btn--solid,
.switch button[aria-selected="true"],
.chat-fab, .chat__form button,
.shell .opt input:checked + span,
.shell .day.sel, .shell .slot.sel,
.shell .paso.on .paso__n, .shell .paso.ok .paso__n,
.shell .app__logo{
  background:linear-gradient(145deg,
    var(--oro-luz) 0%,
    color-mix(in srgb, var(--oro-luz) 50%, var(--oro)) 28%,
    var(--oro) 58%,
    var(--oro-med) 100%);
  color:#1A1008; border:1px solid color-mix(in srgb, var(--oro-med) 62%, #7A5013);
  text-shadow:none; box-shadow:0 10px 24px -14px color-mix(in srgb, var(--oro) 85%, #000)}
.shell .opt input:checked + span svg{color:#1A1008}
.shell .day.sel::after{background:#1A1008}

.btn--solid:hover, .btn--solid:focus-visible,
.shell .btn--solid:hover, .shell .btn--solid:focus-visible,
.switch button[aria-selected="true"]:hover,
.chat-fab:hover, .chat__form button:hover,
.shell .day.sel:hover, .shell .slot.sel:hover{
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--oro-luz) 55%, #FFFFFF) 0%,
    var(--oro-luz) 30%,
    color-mix(in srgb, var(--oro) 72%, var(--oro-luz)) 62%,
    var(--oro) 100%);
  color:#1A1008; border-color:color-mix(in srgb, var(--oro-med) 40%, transparent);
  box-shadow:0 14px 28px -12px color-mix(in srgb, var(--oro) 80%, transparent)}

.btn--ghost, .shell .btn--ghost{
  background:rgba(255,255,255,.6); border:1.5px solid var(--oro-med);
  color:color-mix(in srgb, var(--oro-med) 72%, #241203)}
.btn--ghost:hover, .btn--ghost:focus-visible,
.shell .btn--ghost:hover, .shell .btn--ghost:focus-visible{
  background:linear-gradient(145deg, var(--oro-luz), color-mix(in srgb, var(--oro-luz) 50%, var(--oro)) 40%, var(--oro));
  color:#1A1008; border-color:transparent}

.arrow, .shell .arrow, .cal__nav button, .shell .cal__nav button{
  background:rgba(255,255,255,.7); border:1.5px solid #D9942F; color:#8A5411}
.arrow:hover, .shell .arrow:hover,
.cal__nav button:hover:not(:disabled), .shell .cal__nav button:hover:not(:disabled){
  background:linear-gradient(145deg, var(--oro-luz), color-mix(in srgb, var(--oro-luz) 50%, var(--oro)) 40%, var(--oro));
  color:#1A1008; border-color:transparent}
.quick button:hover{background:linear-gradient(145deg,#FFE7BE,#F7C578 40%,#EDA945); color:#1A1008; border-color:transparent}
.msg--me{background:linear-gradient(145deg,#FFE7BE,#F7C578 40%,#EDA945); color:#1A1008}
.chat-fab{color:#1A1008}
.chat-fab__badge{background:#09090B; color:#F2B45F; border-color:#F2B45F}

/* ---------- TEXTOS PEQUEÑOS EN NEGRO ---------- */
:root{--muted:#0D0C0B}
body[data-mundo="dulce"] .shell{--pt:#0A0908; --pm:#12100E}
body[data-mundo="pelu"] .shell{ --pt:#0A0908; --pm:#101211}
.shell .lede,.shell p,.shell .world__head p,.shell .card__body p,.shell .promo p,.shell .step p{color:var(--pm)}
.shell .info-row dt,.shell .inp label,.shell .res-row span,.shell .resumen__pie,
.shell .cal__nota,.shell .cal__dow span,.shell .svc i,.shell .paso__t em,.shell .vacio,
.shell .sub,.shell .rail__title span,.shell .chip__v small,.shell .price small{color:#12100E}
.shell .mapa__pie{color:#12100E}

/* marquesina en negro */
.ticker span{color:#0D0C0B; font-weight:500}
.ticker b{color:var(--vivo)}

/* ---------- pie de página: texto negro, hover en el color del mundo ---------- */
.foot h5{color:#0D0C0B; font-weight:500}
.foot ul a{color:#000; opacity:1; font-weight:500}
.foot ul a:hover{color:var(--vivo)}
.foot ul li{color:#0D0C0B !important}
.foot__about p{color:#0D0C0B}
.legal{color:#0D0C0B}
.legal a{color:#000; font-weight:500}
.legal a:hover{color:var(--vivo)}

/* ---------- redes sociales con sus colores reales ---------- */
.social{gap:11px}
.social a{width:46px; height:46px; border:0; border-radius:14px; color:#fff;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.55); transition:.3s var(--ease)}
.social a svg{width:22px; height:22px}
.social a:hover{transform:translateY(-3px); box-shadow:0 14px 24px -10px rgba(0,0,0,.6)}
.social a[aria-label="Instagram"]{background:radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%)}
.social a[aria-label="Facebook"]{background:#1877F2}
.social a[aria-label="TikTok"]{background:#010101}
.social a[aria-label="WhatsApp"]{background:#25D366}
.social a.is-wa{background:#25D366; color:#fff}
.social a.is-wa:hover{background:#1FBF5B; color:#fff}


/* botón circular de WhatsApp en la barra fija */
.btn--wa-solo{width:46px; height:46px; min-height:46px; padding:0; border-radius:50%; flex:0 0 auto}
.btn--wa-solo svg{width:24px; height:24px; margin:0}
@media(max-width:860px){
  .topbar .btn--wa-solo{display:inline-flex; width:42px; height:42px; min-height:42px}
  .topbar .btn--wa-solo svg{width:22px; height:22px}
}


/* ---------- selector de idioma ---------- */
.lang{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.lang__globe{width:16px; height:16px; color:#8E8880; flex:0 0 auto; transition:color .3s}
.lang:hover .lang__globe{color:#F2B45F}
.lang__sep{color:#57524C; font-size:.8rem; line-height:1}
.lang button{appearance:none; border:0; background:none; cursor:pointer; color:#8E8880;
  font-family:var(--body); font-size:.84rem; font-weight:600; letter-spacing:.02em;
  padding:8px 2px; min-height:38px; transition:color .25s var(--ease)}
.lang button:hover{color:#F5EFE6}
.lang button[aria-pressed="true"]{color:#F2B45F}
@media(max-width:860px){
  .lang__globe{width:15px; height:15px}
  .lang button{font-size:.82rem; padding:8px 1px}
}

/* ============================================================
   17. FRANJA DE OFERTAS + SELLOS DE DESCUENTO
   ============================================================ */
.ofertas{margin-top:30px}
.ofertas__bar{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.ofertas__bar h3{display:flex; align-items:center; gap:10px}
.ofertas__bar h3 svg{width:20px; height:20px; color:var(--vv)}
.ofertas__nota{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#12100E}
.ofertas__rail{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:900px){
  .ofertas__rail{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
    padding-bottom:14px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .ofertas__rail::-webkit-scrollbar{display:none}
  .oferta{flex:0 0 min(80vw,320px); scroll-snap-align:start}
}
.oferta{position:relative; overflow:hidden; border-radius:18px; padding:22px 20px 20px;
  background:linear-gradient(150deg,#241708 0%,#140D06 55%,#0B0704 100%);
  border:1px solid rgba(242,180,95,.45);
  box-shadow:0 16px 34px -22px rgba(0,0,0,.85);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)}
.oferta:hover{transform:translateY(-5px); border-color:#F7C578; box-shadow:0 24px 44px -24px rgba(0,0,0,.9)}
.oferta::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 200px at 100% 0%, rgba(242,180,95,.22), transparent 70%)}
.oferta::after{content:''; position:absolute; top:-60%; bottom:-60%; width:34%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,231,190,.16), transparent);
  transform:translateX(-160%) skewX(-18deg); animation:destello 5.5s ease-in-out infinite}
@keyframes destello{0%,72%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
.oferta:nth-child(2)::after{animation-delay:1.6s}
.oferta:nth-child(3)::after{animation-delay:3.2s}

.oferta__tag{position:relative; z-index:2; display:inline-block; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; color:#1A1008; padding:5px 10px; border-radius:999px;
  background:linear-gradient(145deg,#FFE7BE,#F7C578 40%,#EDA945)}
.oferta__big{position:relative; z-index:2; font-family:var(--display); font-weight:800; letter-spacing:-.05em;
  font-size:2.9rem; line-height:1; margin:12px 0 4px;
  background:linear-gradient(100deg,#FFE7BE,#F7C578 45%,#D9942F); -webkit-background-clip:text; background-clip:text; color:transparent}
.oferta h4{position:relative; z-index:2; color:#FFF3E0; font-size:1.05rem; font-weight:600; margin-bottom:6px}
.oferta p{position:relative; z-index:2; color:#D9CDBC !important; font-size:.85rem; line-height:1.45; padding-bottom:2px}
.oferta__code{position:relative; z-index:2; display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:#FFD9A3;
  border:1px dashed rgba(242,180,95,.55); padding:6px 12px; border-radius:8px}

/* ---- color propio de la tarjeta, puesto desde el panel ----
   Solo entra en juego con la clase .oferta--color (la pone bloques/catalogo.php
   cuando la oferta tiene un color guardado); sin ella, todo queda exactamente
   como antes. El color elegido (--of) tiñe el borde, el brillo, la etiqueta
   de arriba, el número grande y el código, con las mismas proporciones que
   ya tenía el dorado. */
.oferta--color{border-color:color-mix(in srgb, var(--of) 45%, transparent)}
.oferta--color:hover{border-color:color-mix(in srgb, var(--of) 85%, white)}
.oferta--color::before{background:radial-gradient(420px 200px at 100% 0%, color-mix(in srgb, var(--of) 22%, transparent), transparent 70%)}
.oferta--color::after{background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--of) 30%, white), transparent)}
.oferta--color .oferta__tag{background:linear-gradient(145deg, color-mix(in srgb, var(--of) 55%, white), var(--of) 45%, color-mix(in srgb, var(--of) 85%, black))}
.oferta--color .oferta__big{background:linear-gradient(100deg, color-mix(in srgb, var(--of) 55%, white), var(--of) 50%, color-mix(in srgb, var(--of) 80%, black)); -webkit-background-clip:text; background-clip:text}
.oferta--color .oferta__code{color:color-mix(in srgb, var(--of) 75%, white); border-color:color-mix(in srgb, var(--of) 55%, transparent)}

/* ---- sello de descuento en la esquina de la tarjeta ---- */
.sello{position:absolute; top:9px; right:9px; z-index:6; width:56px; height:56px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:linear-gradient(145deg,#FFE7BE 0%,#F7C578 32%,#EDA945 70%,#D9942F 100%);
  color:#1A1008; transform:rotate(-9deg); font-family:var(--display); letter-spacing:-.03em;
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 0 0 4.5px rgba(217,148,47,.75), 0 8px 18px -7px rgba(0,0,0,.6);
  animation:sellito 3.6s ease-in-out infinite}
.sello b{font-size:1.12rem; font-weight:800; line-height:1}
.sello i{font-style:normal; font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; margin-top:1px}
@keyframes sellito{0%,100%{transform:rotate(-9deg) scale(1)}50%{transform:rotate(-9deg) scale(1.06)}}
.card:hover .sello{transform:rotate(0deg) scale(1.08); animation:none; transition:transform .4s var(--ease)}
@media(max-width:520px){.sello{width:50px; height:50px} .sello b{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.sello,.oferta::after{animation:none}}


/* pestañas del selector: siempre en una sola línea */
.switch button{white-space:nowrap}
.switch{flex-wrap:nowrap}
html[lang="en"] .switch button{padding-left:16px; padding-right:16px}
@media(max-width:860px){
  html[lang="en"] .switch button{padding-left:8px; padding-right:8px; font-size:.88rem}
}
@media(max-width:380px){
  html[lang="en"] .switch button{font-size:.82rem; letter-spacing:-.01em}
}


/* barra fija: negro sólido siempre, sin salto al hacer scroll */
.topbar{
  background:#09090B !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:box-shadow .35s var(--ease) !important;
}
.topbar.is-stuck{background:#09090B !important; box-shadow:0 14px 36px -26px rgba(0,0,0,.9)}