/* YOUMOM HUB · CABECERA Y PROMOCIONES
   Archivo independiente, sin Tailwind ni librerías.
   Texto, cupón, fechas y visibilidad: src/config/youmom.config.json.
   Este CSS cambia la apariencia; los descuentos se crean en Shoppex.
   Personaliza las variables siguientes. Conserva las clases ym-* del HTML. */
:root {
  --ym-header-bg: #0c0e13;
  --ym-header-text: #f5f6fa;
  --ym-header-muted: #a6abb7;
  --ym-header-line: #ffffff14;
  --ym-header-width: 1280px;
  --ym-header-logo-width: 148px;
  --ym-promo-bg: #17191e;
  --ym-promo-text: #e8eaf0;
  --ym-promo-accent: var(--sx-accent, #ffb52e);
  --ym-promo-font-size: 11px;
  --ym-promo-radius: 5px;
}
.ym-header { position:sticky; top:0; z-index:40; width:100%; background:color-mix(in srgb,var(--ym-header-bg) 94%,transparent); border-bottom:1px solid var(--ym-header-line); backdrop-filter:blur(20px); box-shadow:0 10px 40px #0003; color:var(--ym-header-text); }
.ym-nav-inner { width:calc(100% - 64px); max-width:var(--ym-header-width); margin:0 auto; display:grid; grid-template-columns:165px 1fr auto; align-items:center; gap:20px; min-height:96px; }
.ym-brand-link { display:block; width:var(--ym-header-logo-width); flex-shrink:0; }
.ym-nav-logo { display:block; width:100%; height:94px; object-fit:contain; filter:drop-shadow(0 3px 6px #0009); }
.ym-nav-links { display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.ym-nav-links::-webkit-scrollbar { display:none; }
#root .ym-header .nav-pill { display:inline-flex; align-items:center; gap:7px; border-radius:5px; padding:11px 13px; color:var(--ym-header-muted); font-size:11px; font-weight:500; white-space:nowrap; background:transparent; }
#root .ym-header .nav-pill-active { color:var(--ym-header-text); box-shadow:inset 0 -2px 0 var(--ym-promo-accent); background:color-mix(in srgb,var(--ym-promo-accent) 7%,transparent); }
#root .ym-header .nav-pill:hover { color:var(--ym-header-text); background:#ffffff05; }
.ym-nav-actions { display:flex; align-items:center; gap:8px; }
#root .ym-header .cta-light-button { min-height:39px; padding:10px 14px; font-size:10px; border-radius:5px; color:var(--ym-header-bg); background:linear-gradient(135deg,#fff,#c5cad4); box-shadow:inset 0 1px 0 #fff,0 2px 0 #767c86; }
#root .ym-header .icon-button { width:38px; height:38px; border:1px solid var(--ym-header-line); border-radius:5px; color:var(--ym-header-text); background:#ffffff04; }
#root .ym-header .edition-search-trigger { padding:0; gap:0; }
#root .ym-header .edition-search-trigger :is(span,kbd) { display:none; }
#root .ym-header .edition-search-trigger>svg { display:block; flex-shrink:0; width:18px; height:18px; }
.ym-announcement { position:relative; color:var(--ym-promo-text); background:linear-gradient(110deg,color-mix(in srgb,var(--ym-promo-accent) 12%,var(--ym-promo-bg)),var(--ym-promo-bg) 65%); border-bottom:1px solid color-mix(in srgb,var(--ym-promo-accent) 23%,transparent); font-family:Poppins,system-ui,sans-serif; font-size:var(--ym-promo-font-size); line-height:1.5; }
.ym-announcement * { box-sizing:border-box; }
.ym-promo-inner { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; min-height:41px; padding:7px 42px; max-width:1440px; margin:0 auto; }
.ym-promo-content { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; column-gap:20px; row-gap:6px; min-width:0; }
.ym-promo-badge { display:inline-flex; align-items:center; gap:7px; color:var(--ym-promo-accent); font-size:9px; font-weight:700; letter-spacing:.12em; white-space:nowrap; }
.ym-promo-message { margin:0; overflow-wrap:anywhere; text-align:center; }
.ym-promo-coupon { display:inline-flex; align-items:center; gap:9px; border:1px dashed color-mix(in srgb,var(--ym-promo-accent) 65%,transparent); border-radius:var(--ym-promo-radius); padding:5px 9px; background:color-mix(in srgb,var(--ym-promo-accent) 9%,transparent); color:var(--ym-promo-accent); cursor:pointer; max-width:100%; }
.ym-promo-coupon code { font:600 11px ui-monospace,monospace; letter-spacing:.07em; overflow-wrap:anywhere; user-select:all; }
.ym-promo-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ym-promo-accent); font-size:10px; font-weight:600; }
.ym-promo-link:hover { text-decoration:underline; text-underline-offset:4px; }
.ym-promo-timer { display:flex; align-items:center; gap:8px; }
.ym-promo-timer>span { font-size:9px; color:var(--ym-header-muted); }
.ym-promo-timer time { font-family:ui-monospace,monospace; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ym-promo-accent); }
.ym-promo-close { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:4px; padding:0; background:transparent; color:var(--ym-header-muted); cursor:pointer; }
.ym-promo-close:hover { color:var(--ym-header-text); background:#ffffff0d; }
.ym-promo-feedback { position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); z-index:3; width:max-content; max-width:90vw; padding:7px 12px; border:1px solid var(--ym-header-line); border-radius:5px; background:#15171e; color:#fff; font-size:11px; box-shadow:0 8px 20px #0005; }
.ym-promo-feedback:empty { display:none; }
.ym-announcement :is(a,button):focus-visible,.ym-header :is(a,button):focus-visible { outline:2px solid var(--ym-promo-accent); outline-offset:3px; }
@media(max-width:1000px) {
  .ym-nav-inner { width:calc(100% - 40px); grid-template-columns:1fr auto; gap:0 12px; padding-bottom:10px; }
  .ym-brand-link { width:126px; }
  .ym-nav-logo { height:78px; }
  .ym-nav-actions { grid-row:1; grid-column:2; }
  .ym-nav-links { grid-row:2; grid-column:1/-1; justify-content:flex-start; }
  #root .ym-header .nav-pill { padding:9px 15px; font-size:11px; }
}
@media(max-width:540px) {
  .ym-nav-inner { width:calc(100% - 32px); }
  .ym-nav-actions { gap:6px; }
  .ym-brand-link { width:112px; }
  .ym-nav-logo { height:72px; }
  .ym-promo-inner { padding:9px 34px 9px 12px; }
  .ym-promo-content { column-gap:12px; row-gap:5px; }
  .ym-promo-badge { font-size:8px; }
  .ym-promo-message { font-size:10px; }
  .ym-promo-link { font-size:9px; }
  .ym-promo-close { right:4px; }
  #root .ym-header .nav-pill { padding:8px 12px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .ym-header * { scroll-behavior:auto; transition:none!important; } }
@media(max-width:360px) { #root .ym-header .nav-pill { padding-inline:9px; } }

/* YOUMOM HUB IMMERSIVE · ajustes rápidos de navegación y oferta.
   Cambia SOLO estos valores para personalizar cabecera sin tocar React. */
:root {
  --ym-hud-header-height: 82px;        /* altura menú de escritorio */
  --ym-hud-logo-width: 157px;          /* ancho del logotipo */
  --ym-hud-logo-height: 79px;          /* altura del logotipo */
  --ym-hud-promo-min-height: 38px;     /* altura del banner de ofertas */
  --ym-hud-promo-font-size: 10px;      /* texto del descuento */
  --ym-hud-promo-spacing: 16px;        /* separación entre elementos */
  --ym-hud-promo-radius: 3px;          /* esquinas del cupón */
  --ym-hud-promo-custom-bg: transparent; /* deja transparent para color automático */
}