/* ============================================================
   12. PANELES CLAROS POR SECCIÓN  (tono suave, distinto por mundo)
   ============================================================ */
body[data-mundo="dulce"] .shell{
  --pan-a:#FBF2E3; --pan-b:#F3E4CA;      /* champán vainilla */
  --pt:#241708; --pm:#7D6753; --pa:#96560F; --vv:#C85D14;
  --pl:rgba(60,36,10,.15); --pl2:rgba(60,36,10,.09);
}
body[data-mundo="pelu"] .shell{
  --pan-a:#FBF0EE; --pan-b:#F2E1DE;      /* perla rosada */
  --pt:#2A1A18; --pm:#7E6764; --pa:#96560F; --vv:#B0527A;
  --pl:rgba(60,30,26,.14); --pl2:rgba(60,30,26,.08);
}

.shell{
  background:linear-gradient(168deg, var(--pan-a), var(--pan-b));
  border:1px solid rgba(242,172,94,.34);
  color:var(--pt);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.35) inset;
}

/* ---- tipografía dentro del panel ---- */
.shell h1,.shell h2,.shell h3,.shell h4{color:var(--pt)}
.shell .lede,.shell p,.shell .world__head p{color:var(--pm)}
.shell .eyebrow{color:var(--pa)}
.shell .oro,.shell strong.oro{color:var(--pa)}
.shell .hero h1 em{background:linear-gradient(100deg,var(--vv),var(--pa)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---- botones dentro del panel: negro y dorado ---- */
.shell .btn--solid{
  background:linear-gradient(140deg,#2E1D0B,#120B05); color:#FFD9A3;
  border:1px solid rgba(242,172,94,.45); box-shadow:0 12px 26px -16px rgba(30,18,6,.9)}
.shell .btn--solid:hover{background:linear-gradient(140deg,#3A2510,#1A1008); box-shadow:0 16px 30px -16px rgba(30,18,6,.95)}
.shell .btn--ghost{border:1px solid rgba(150,86,15,.38); color:var(--pa); background:rgba(255,255,255,.55)}
.shell .btn--ghost:hover{background:#fff; border-color:var(--pa)}

/* ---- chips del hero ---- */
.shell .chip{background:rgba(255,255,255,.6); border:1px solid var(--pl)}
.shell .chip__k{color:var(--vv)}
.shell .chip svg{color:var(--vv)}
.shell .chip__v{color:var(--pt)}
.shell .chip__v small{color:var(--pm)}

/* ---- carruseles ---- */
.shell .rail__title span{color:var(--pm)}
.shell .arrow{border:1px solid var(--pl); background:rgba(255,255,255,.6); color:var(--pa)}
.shell .arrow:hover{background:linear-gradient(140deg,#2E1D0B,#120B05); color:#FFD9A3; border-color:transparent}

.shell .card{
  background:rgba(255,255,255,.72); border:1px solid var(--pl2);
  box-shadow:0 8px 20px -14px rgba(70,44,16,.55)}
.shell .card:hover{border-color:color-mix(in srgb, var(--vv) 45%, transparent); box-shadow:0 20px 34px -20px rgba(70,44,16,.6)}
.shell .card__media{border-bottom:1px solid var(--pl2)}
.shell .card__body h4{color:var(--pt)}
.shell .card__body p{color:var(--pm)}
.shell .price{color:var(--pa)}
.shell .price small{color:var(--pm)}
.shell .price s{color:var(--pm)}
.shell .card__foot .btn--ghost{background:rgba(255,255,255,.75)}

/* ---- promociones ---- */
.shell .promo{
  border:1px dashed color-mix(in srgb, var(--vv) 45%, transparent);
  background:rgba(255,255,255,.5)}
.shell .promo:hover{background:#fff; border-color:var(--vv)}
.shell .promo__off{background:linear-gradient(100deg,var(--vv),var(--pa)); -webkit-background-clip:text; background-clip:text; color:transparent}
.shell .promo h4{color:var(--pt)}
.shell .promo p{color:var(--pm)}
.shell .promo__code{border:1px solid var(--pl); color:var(--pa); background:rgba(255,255,255,.7)}

/* ---- pedidos / apps ---- */
.shell .app{background:rgba(255,255,255,.62); border:1px solid var(--pl)}
.shell .app:hover{background:#fff; border-color:var(--vv)}
.shell .app__logo{background:linear-gradient(150deg,#2E1D0B,#120B05); color:#FFD9A3; border:1px solid rgba(242,172,94,.4)}
.shell .app__t strong{color:var(--pt)}
.shell .app__t span{color:var(--pm)}
.shell .app__go{color:var(--pa)}

/* ---- listas de información ---- */
.shell .info-row{border-bottom:1px solid var(--pl2)}
.shell .info-row dt{color:var(--pm)}
.shell .info-row dd{color:var(--pt)}
.shell .info-row dd a{color:var(--pa)}
.shell .info-row dd small{color:var(--pm)}
.shell .step{border-top:2px solid var(--vv)}
.shell .step__n{color:var(--vv)}
.shell .step h4{color:var(--pt)}
.shell .step p{color:var(--pm)}

/* ---- mapa (se mantiene azul, con marco claro) ---- */
.shell .mapa{border:1px solid var(--pl)}
.shell .mapa__pie{background:rgba(255,255,255,.72); color:var(--pm); border-top:1px solid var(--pl2)}

/* ============ reserva de cita ============ */
.shell .paso{border:1px solid var(--pl); background:rgba(255,255,255,.5)}
.shell .paso.on{border-color:color-mix(in srgb, var(--vv) 50%, transparent); background:rgba(255,255,255,.78)}
.shell .paso__n{color:var(--pm); border:1px solid var(--pl); background:transparent}
.shell .paso.on .paso__n,.shell .paso.ok .paso__n{background:linear-gradient(140deg,#2E1D0B,#120B05); color:#FFD9A3; border-color:transparent}
.shell .paso__t b{color:var(--pt)}
.shell .paso__t em{color:var(--pm)}
.shell .paso.ok .paso__t em{color:var(--vv)}
.shell .paso__chev{color:var(--pm)}
.shell .sub{color:var(--pm)}
.shell .vacio{color:var(--pm)}

.shell .opt span{border:1px solid var(--pl); background:rgba(255,255,255,.7); color:var(--pt)}
.shell .opt span svg{color:var(--vv)}
.shell .opt input:hover + span{border-color:var(--vv)}
.shell .opt input:checked + span{background:linear-gradient(140deg,#2E1D0B,#120B05); color:#FFD9A3; border-color:transparent}
.shell .opt input:checked + span svg{color:#FFD9A3}

/* solo la tarjeta lleva borde y fondo, no el bloque de texto de dentro */
.shell .svc > span{border:1px solid var(--pl); background:rgba(255,255,255,.7)}
.shell .svc > span > span{border:0; background:none}
.shell .svc b{color:var(--pt)}
.shell .svc i{color:var(--pm)}
.shell .svc u{color:var(--pa)}
.shell .svc input:hover + span{border-color:var(--vv)}
.shell .svc input:checked + span{border-color:var(--vv); background:#fff; box-shadow:inset 0 0 0 1px var(--vv)}
.shell .svc input:checked + span u{color:var(--vv)}

.shell .cal{border:1px solid var(--pl); background:rgba(255,255,255,.62)}
.shell .cal__mes{color:var(--pt)}
.shell .cal__nav button{border:1px solid var(--pl); background:rgba(255,255,255,.8); color:var(--pa)}
.shell .cal__dow span{color:var(--pm)}
.shell .cal__nota{color:var(--pm)}
.shell .day{background:rgba(255,255,255,.75); color:var(--pt); border:1px solid var(--pl2)}
.shell .day:hover:not(:disabled){background:color-mix(in srgb, var(--vv) 16%, #fff); border-color:var(--vv)}
.shell .day:disabled{background:transparent; border-color:transparent; color:var(--pm); opacity:.35}
.shell .day.hoy::after{background:var(--vv)}
.shell .day.sel{background:linear-gradient(140deg,#2E1D0B,#120B05); color:#FFD9A3; border-color:transparent}

.shell .slot{border:1px solid var(--pl); background:rgba(255,255,255,.75); color:var(--pt)}
.shell .slot:hover:not(:disabled){border-color:var(--vv); background:color-mix(in srgb, var(--vv) 14%, #fff)}
.shell .slot:disabled{color:var(--pm); opacity:.4}
.shell .slot.sel{background:linear-gradient(140deg,#2E1D0B,#120B05); color:#FFD9A3; border-color:transparent}

.shell .inp label{color:var(--pm)}
.shell .inp input,.shell .inp textarea{background:rgba(255,255,255,.85); border:1px solid var(--pl); color:var(--pt)}
.shell .inp input:focus,.shell .inp textarea:focus{border-color:var(--vv); background:#fff}
.shell .inp input::placeholder,.shell .inp textarea::placeholder{color:#A2907E}

.shell .resumen{
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border:1px solid color-mix(in srgb, var(--vv) 35%, transparent)}
.shell .resumen h3{color:var(--pt)}
.shell .resumen > p{color:var(--pm)}
.shell .res-row{border-bottom:1px solid var(--pl2)}
.shell .res-row span{color:var(--pm)}
.shell .res-row strong{color:var(--pt)}
.shell .res-total .k{color:var(--pm)}
.shell .res-total .t{color:var(--pa)}
.shell .resumen__pie{color:var(--pm)}

/* barra fija de resumen en móvil: se mantiene oscura sobre el contenido */
@media(max-width:1000px){
  .shell .resumen{background:rgba(16,11,7,.97); border:1px solid rgba(242,172,94,.28); border-bottom:0}
  .shell .resumen__mini .m b{color:#F8F1E7}
  .shell .resumen__mini .m span{color:#AA9985}
  .shell .resumen__mini .t{color:#FFD9A3}
  .shell .resumen .btn--solid{background:linear-gradient(140deg,#FFD9A3,#F2AC5E 52%,#D98F3F); color:#1A0F04; border-color:transparent}
}


/* ============================================================
   13. FONDO MÁS CLARO + BOTONES EN DEGRADADO DORADO→NEGRO
   ============================================================ */
:root{
  --ink:#2B231B;            /* cacao cálido, mucho más suave que el negro */
  --cream:#FBF4EA;
  --muted:#C3B3A0;
  --line:rgba(242,172,94,.20);
  --line-soft:rgba(242,172,94,.11);
}

/* retícula más pequeña y cerrada */
.bg__grid{
  background-image:
    linear-gradient(to right, rgba(242,172,94,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,172,94,.11) 1px, transparent 1px),
    linear-gradient(to right, rgba(0,0,0,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.13) 1px, transparent 1px);
  background-size:26px 26px, 26px 26px, 13px 13px, 13px 13px;
  mask-image:radial-gradient(ellipse 140% 100% at 50% 20%, #000 45%, transparent 96%);
  -webkit-mask-image:radial-gradient(ellipse 140% 100% at 50% 20%, #000 45%, transparent 96%);
}
.bg__glow{background:
  radial-gradient(760px 520px at 82% 4%, var(--glow-a), transparent 72%),
  radial-gradient(640px 480px at 8% 46%, var(--glow-b), transparent 74%),
  radial-gradient(900px 700px at 50% 112%, rgba(242,172,94,.10), transparent 72%)}
.bg__vig{background:radial-gradient(ellipse at 50% 0%, transparent 45%, rgba(22,16,11,.62) 100%)}

/* cromo oscuro, ahora en el mismo tono cálido */
.topbar{background:linear-gradient(180deg, rgba(34,27,20,.93), rgba(34,27,20,.7))}
.topbar.is-stuck{background:rgba(34,27,20,.97)}
.drawer{background:rgba(34,27,20,.985)}
footer{background:linear-gradient(180deg, transparent, rgba(18,13,9,.55))}
.chat{background:rgba(38,30,22,.98)}
.chat-fab__badge{background:#241C14}

/* ---------- BOTONES: degradado dorado → negro ---------- */
.btn--solid,
.shell .btn--solid{
  background:linear-gradient(180deg,#F7BC77 0%, #A6631F 46%, #150E07 100%);
  color:#FFF3E0;
  border:1px solid rgba(242,172,94,.5);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 12px 28px -16px rgba(20,12,5,.9);
}
.btn--solid:hover, .btn--solid:focus-visible,
.shell .btn--solid:hover, .shell .btn--solid:focus-visible{
  background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45);
  color:#1A0F04; text-shadow:none; border-color:transparent;
  box-shadow:0 16px 32px -14px rgba(242,172,94,.6);
}

.btn--ghost,
.shell .btn--ghost{
  background:linear-gradient(180deg, rgba(247,188,119,.16), rgba(21,14,7,.22));
  border:1px solid rgba(242,172,94,.45); color:var(--oro-luz);
}
.shell .btn--ghost{color:#7E4708; border-color:rgba(150,86,15,.42);
  background:linear-gradient(180deg, rgba(247,188,119,.3), rgba(255,255,255,.55))}
.btn--ghost:hover, .btn--ghost:focus-visible,
.shell .btn--ghost:hover, .shell .btn--ghost:focus-visible{
  background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45);
  color:#1A0F04; border-color:transparent;
}

/* pestañas dulcería / peluquería */
.switch{background:rgba(0,0,0,.22)}
.switch button[aria-selected="true"]{
  background:linear-gradient(180deg,#F7BC77 0%, #A6631F 48%, #150E07 100%);
  color:#FFF3E0; text-shadow:0 1px 2px rgba(0,0,0,.45); border:1px solid rgba(242,172,94,.45)}
.switch button:hover{color:var(--oro-luz)}
.switch button[aria-selected="true"]:hover{
  background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45); color:#1A0F04; text-shadow:none}

/* flechas de carrusel, chat y calendario: mismo criterio */
.arrow, .shell .arrow,
.cal__nav button, .shell .cal__nav button{
  background:linear-gradient(180deg, rgba(247,188,119,.22), rgba(21,14,7,.18));
  border:1px solid rgba(242,172,94,.4); color:var(--oro-luz)}
.shell .arrow, .shell .cal__nav button{color:#7E4708; border-color:rgba(150,86,15,.4);
  background:linear-gradient(180deg, rgba(247,188,119,.32), rgba(255,255,255,.6))}
.arrow:hover, .shell .arrow:hover,
.cal__nav button:hover:not(:disabled), .shell .cal__nav button:hover:not(:disabled){
  background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45); color:#1A0F04; border-color:transparent}

.chat-fab{background:linear-gradient(180deg,#F7BC77 0%, #A6631F 50%, #150E07 100%); color:#FFF3E0}
.chat-fab:hover{background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45); color:#1A0F04}
.chat__wa{background:linear-gradient(180deg,#F7BC77 0%, #A6631F 46%, #150E07 100%); color:#FFF3E0; text-shadow:0 1px 2px rgba(0,0,0,.45)}
.chat__wa:hover{background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45); color:#1A0F04; text-shadow:none}
.chat__form button{background:linear-gradient(180deg,#F7BC77,#A6631F 50%,#150E07); color:#FFF3E0}
.chat__form button:hover{background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45); color:#1A0F04}
.quick button:hover{background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45); color:#1A0F04; border-color:transparent}
.social a:hover{background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45); color:#1A0F04}

/* estados elegidos dentro de la reserva: mismo degradado */
.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(180deg,#F7BC77 0%, #A6631F 48%, #150E07 100%);
  color:#FFF3E0; border-color:rgba(242,172,94,.45); text-shadow:0 1px 2px rgba(0,0,0,.4)}
.shell .opt input:checked + span svg{color:#FFF3E0}
.shell .day.sel::after{background:#FFD9A3}
.shell .day.sel:hover, .shell .slot.sel:hover{
  background:linear-gradient(140deg,#FFD9A3,#F2AC5E 55%,#E09B45); color:#1A0F04; text-shadow:none}

/* paneles: borde algo más marcado para separarlos del fondo cálido */
.shell{border:1px solid rgba(242,172,94,.42); box-shadow:0 26px 60px -38px rgba(15,9,4,.85), 0 0 0 1px rgba(255,255,255,.35) inset}

/* barra fija de resumen en móvil */
@media(max-width:1000px){
  .shell .resumen{background:rgba(38,30,22,.98)}
}


/* ============================================================
   14. PALETA DEFINITIVA + ANIMACIONES
   Base grafito frío · oro de marca · acento propio por mundo
   ============================================================ */
:root{
  --ink:#16151C;                 /* grafito, sin marrón */
  --cream:#F7F4EF;
  --muted:#B4ACA1;
  --line:rgba(242,172,94,.22);
  --line-soft:rgba(255,255,255,.07);
}

body[data-mundo="dulce"]{ --vivo:#E8496E; --vivo-luz:#FF9DB4; --glow-a:rgba(232,73,110,.17); --glow-b:rgba(242,172,94,.17) }
body[data-mundo="pelu"]{  --vivo:#17A398; --vivo-luz:#6FE0D3; --glow-a:rgba(23,163,152,.16); --glow-b:rgba(242,172,94,.18) }

.bg__grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.062) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.062) 1px, transparent 1px),
    linear-gradient(to right, rgba(0,0,0,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.16) 1px, transparent 1px);
  background-size:26px 26px,26px 26px,13px 13px,13px 13px;
  mask-image:radial-gradient(ellipse 140% 100% at 50% 18%, #000 45%, transparent 96%);
  -webkit-mask-image:radial-gradient(ellipse 140% 100% at 50% 18%, #000 45%, transparent 96%)}
.bg__vig{background:radial-gradient(ellipse at 50% 0%, transparent 48%, rgba(8,8,12,.66) 100%)}

.topbar{background:linear-gradient(180deg, rgba(20,19,26,.94), rgba(20,19,26,.7))}
.topbar.is-stuck{background:rgba(20,19,26,.98)}
.drawer{background:rgba(20,19,26,.99)}
footer{background:linear-gradient(180deg, transparent, rgba(9,9,13,.6))}
.chat{background:rgba(26,25,33,.98)}
.chat-fab__badge{background:#1A1921}
.switch{background:rgba(0,0,0,.3)}

/* ---------- paneles por mundo ---------- */
body[data-mundo="dulce"] .shell{
  --pan-a:#FDF7EE; --pan-b:#F7EBDC;
  --pt:#1F1A16; --pm:#7B6C5E; --pa:#96560F; --vv:#C22F55;
  --pl:rgba(45,30,20,.14); --pl2:rgba(45,30,20,.08)}
body[data-mundo="pelu"] .shell{
  --pan-a:#F8F7F2; --pan-b:#EBF0EC;
  --pt:#161C1A; --pm:#6C7671; --pa:#8A5A12; --vv:#0E7A72;
  --pl:rgba(20,40,36,.13); --pl2:rgba(20,40,36,.07)}

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes latidoOro{0%{box-shadow:0 0 0 0 rgba(242,172,94,.5)}70%{box-shadow:0 0 0 15px rgba(242,172,94,0)}100%{box-shadow:0 0 0 0 rgba(242,172,94,0)}}
@keyframes entrar{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
@keyframes brillo{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(320%) skewX(-18deg)}}

/* entrada escalonada del hero */
.hero .shell .eyebrow,.hero .shell h1,.hero .shell .lede,.hero .shell .hero__cta,.hero .shell .chip{
  animation:entrar .8s var(--ease) both}
.hero .shell h1{animation-delay:.08s}
.hero .shell .lede{animation-delay:.16s}
.hero .shell .hero__cta{animation-delay:.24s}
.hero .shell .chip:nth-child(1){animation-delay:.2s}
.hero .shell .chip:nth-child(2){animation-delay:.3s}
.hero .shell .chip:nth-child(3){animation-delay:.4s}

/* destello al pasar por los botones */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::after{content:''; position:absolute; top:-40%; bottom:-40%; width:38%; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); opacity:0}
.btn:hover::after{opacity:1; animation:brillo .75s var(--ease)}

/* tarjetas con más vida */
.card__media svg{transition:transform .55s var(--ease)}
.card:hover .card__media svg{transform:scale(1.14) rotate(-4deg)}
.card:hover .card__media img{transform:scale(1.06)}
.card__media img{transition:transform .6s var(--ease)}
.shell .promo:hover .promo__off{transform:translateY(-3px)}
.promo__off{transition:transform .4s var(--ease)}
.shell .step:hover h4{color:var(--vv)}
.shell .step h4{transition:color .3s}

/* logo con brillo suave */
.brand__mark img{animation:flotar 6s ease-in-out infinite}

/* ---------- BOTÓN DE CHAT ---------- */
.chat-fab{animation:flotar 3.4s ease-in-out infinite, latidoOro 2.8s ease-out infinite;
  transition:filter .3s var(--ease), bottom .4s var(--ease)}
.chat-fab:hover{filter:brightness(1.12) saturate(1.1); transform:none}
.chat-fab.open{animation:none}

/* ---------- BOTONES DE WHATSAPP EN VERDE ---------- */
.btn--wa, .shell .btn--wa, .chat__wa, .shell .chat__wa{
  background:linear-gradient(150deg,#3BE07C 0%,#25D366 45%,#12833F 100%) !important;
  color:#062A14 !important; border:1px solid rgba(255,255,255,.28) !important;
  text-shadow:none !important; animation:latido 2.4s ease-out infinite}
.btn--wa:hover, .shell .btn--wa:hover, .chat__wa:hover, .shell .chat__wa:hover{
  background:linear-gradient(150deg,#57F292 0%,#2BE673 45%,#17A04D 100%) !important;
  color:#052310 !important; animation-play-state:paused}
.btn--wa svg, .chat__wa svg{width:19px; height:19px; flex:0 0 auto}
.wa-ico{fill:currentColor}
.social a.is-wa{background:linear-gradient(150deg,#3BE07C,#12833F); color:#062A14; border-color:transparent}
.social a.is-wa:hover{background:linear-gradient(150deg,#57F292,#17A04D); color:#052310}
.app.is-wa .app__logo{background:linear-gradient(150deg,#3BE07C,#12833F); color:#062A14; border-color:transparent}
.app.is-wa:hover{border-color:#25D366}

@media(prefers-reduced-motion:reduce){
  .chat-fab,.brand__mark img,.btn--wa,.chat__wa,.hero .shell *{animation:none !important}
}


/* ============================================================
   15. FONDO EN DEGRADADO POR MUNDO
   Dulcería: rosa + dorado · Peluquería: azul océano + dorado
   (botones y tarjetas se mantienen igual)
   ============================================================ */
:root{
  --cream:#241F1B;              /* ahora el texto suelto va oscuro */
  --muted:#7A736C;
  --line:rgba(0,0,0,.09);
  --line-soft:rgba(0,0,0,.06);
}
body{background:var(--bg-base); transition:background .8s var(--ease)}
body[data-mundo="dulce"]{--bg-base:#FCF2F2}
body[data-mundo="pelu"]{ --bg-base:#F2F8FC}

/* malla de degradados */
.bg__glow{transition:background 1s var(--ease), opacity 1s var(--ease)}
body[data-mundo="dulce"] .bg__glow{
  background:
    radial-gradient(1000px 760px at 10% 2%,  rgba(255,187,205,.92), transparent 62%),
    radial-gradient(820px 660px at 92% 10%,  rgba(246,203,144,.88), transparent 60%),
    radial-gradient(900px 740px at 74% 74%,  rgba(255,210,224,.82), transparent 62%),
    radial-gradient(760px 600px at 14% 86%,  rgba(249,222,180,.78), transparent 60%),
    linear-gradient(155deg, rgba(255,255,255,.55), transparent 45%, rgba(255,241,236,.5))}
body[data-mundo="pelu"] .bg__glow{
  background:
    radial-gradient(1000px 760px at 8% 2%,   rgba(168,216,244,.92), transparent 62%),
    radial-gradient(820px 660px at 94% 12%,  rgba(246,208,152,.85), transparent 60%),
    radial-gradient(900px 740px at 76% 76%,  rgba(150,205,236,.8), transparent 62%),
    radial-gradient(760px 600px at 12% 88%,  rgba(250,230,192,.72), transparent 60%),
    linear-gradient(155deg, rgba(255,255,255,.6), transparent 45%, rgba(235,247,253,.55))}

/* retícula fina, ahora en trazo oscuro suave */
.bg__grid{
  background-image:
    linear-gradient(to right, rgba(58,42,36,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(58,42,36,.075) 1px, transparent 1px),
    linear-gradient(to right, rgba(58,42,36,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(58,42,36,.035) 1px, transparent 1px);
  background-size:26px 26px,26px 26px,13px 13px,13px 13px;
  mask-image:radial-gradient(ellipse 150% 110% at 50% 25%, #000 40%, transparent 96%);
  -webkit-mask-image:radial-gradient(ellipse 150% 110% at 50% 25%, #000 40%, transparent 96%)}
.bg__vig{background:radial-gradient(ellipse 120% 90% at 50% 8%, transparent 55%, rgba(90,60,70,.10) 100%)}
body[data-mundo="pelu"] .bg__vig{background:radial-gradient(ellipse 120% 90% at 50% 8%, transparent 55%, rgba(40,75,105,.10) 100%)}

/* ---------- barra fija en cristal claro ---------- */
.topbar{background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  border-bottom:1px solid rgba(0,0,0,.07)}
.topbar.is-stuck{background:rgba(255,255,255,.94); box-shadow:0 12px 34px -26px rgba(60,40,50,.7)}
.brand__name{background:linear-gradient(100deg,#C98A2A,#8A5216 70%); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand__mark{background:radial-gradient(circle at 50% 45%, rgba(242,172,94,.28), transparent 70%)}
.topnav a{color:#5A524B}
.topnav a:hover{color:var(--vivo)}
.burger{border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.7)}
.burger span{background:#5A524B}
.drawer{background:rgba(255,255,255,.98); border-top:1px solid rgba(0,0,0,.08)}
.drawer a{color:#241F1B; border-bottom:1px solid rgba(0,0,0,.06)}
.switch{background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.1)}
.switch button{color:#6B625B}
.switch button:hover{color:#241F1B}

/* ---------- marquesina ---------- */
.ticker{border-block:1px solid rgba(0,0,0,.07);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent)}
.ticker span{color:#7A736C}

/* ---------- paneles: más separación del fondo claro ---------- */
.shell{box-shadow:0 26px 60px -34px rgba(70,45,55,.45), 0 2px 10px -4px rgba(70,45,55,.12), 0 0 0 1px rgba(255,255,255,.6) inset}
body[data-mundo="pelu"] .shell{box-shadow:0 26px 60px -34px rgba(30,70,100,.42), 0 2px 10px -4px rgba(30,70,100,.12), 0 0 0 1px rgba(255,255,255,.65) inset}

/* ---------- pie de página claro ---------- */
footer{background:linear-gradient(180deg, transparent, rgba(255,255,255,.55)); border-top:1px solid rgba(0,0,0,.08)}
.foot h5{color:#8A827A}
.foot ul a{color:#3A342E; opacity:1}
.foot__about p{color:#7A736C}
.social a{border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.72); color:#A6631F}
.legal{border-top:1px solid rgba(0,0,0,.07); color:#8A827A}
.legal a{color:#8A827A}

/* ---------- chat en claro ---------- */
.chat{background:rgba(255,255,255,.98); border:1px solid rgba(0,0,0,.1); box-shadow:0 40px 90px -40px rgba(60,40,50,.55)}
.chat__head{border-bottom:1px solid rgba(0,0,0,.08);
  background:linear-gradient(140deg, color-mix(in srgb, var(--vivo) 16%, transparent), transparent)}
.chat__head strong{color:#241F1B}
.chat__head small{color:#3F8F5C}
.chat__av{background:radial-gradient(circle, rgba(242,172,94,.3), transparent 70%)}
.chat__x{color:#8A827A}
.msg--bot{background:rgba(0,0,0,.045); border:1px solid rgba(0,0,0,.07); color:#241F1B}
.msg--bot a{color:#A6631F}
.quick button{border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.8); color:#3A342E}
.chat__form{border-top:1px solid rgba(0,0,0,.08)}
.chat__form input{background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.1); color:#241F1B}
.chat__form input::placeholder{color:#9A928A}
.chat-fab__badge{background:#1A1921; color:#FFD9A3; border-color:#F2AC5E}