/* Hugo's Beauty Project — tema del test
   Se carga DESPUÉS de los estilos propios del test. No toca la lógica:
   solo cambia colores y añade la cabecera y el pie de la web. */

@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}

/* 1 · Paleta del test → paleta de la web
   plum (ciruela) → tinta · coral → verde azulado · lila → menta */
:root{
  --plum:#0E1220; --plum-2:#012E9C; --plum-soft:#E6ECEE;
  --coral:#023BC3; --coral-2:#012E9C; --coral-soft:#E7ECFA;
  --lila:#8FA9FF; --lila-soft:#EAF5F3;
  --ink:#0E1220; --muted:#5A6B75; --line:#DFE5E8;
  --bg:#F4F5F7; --card:#FFFFFF; --ok:#023BC3; --ok-soft:#E7ECFA;
  --r-lg:18px; --r:16px; --r-sm:12px;
  --sombra:0 1px 2px rgba(14,27,36,.05), 0 12px 30px -20px rgba(14,27,36,.35);
  --mark:#D9E2FF; --menta:#8FA9FF; --claro:#F4F5F7; --claro-2:#B9C7CE; --claro-3:#93A6AF;
}
body{font-size:16.5px; line-height:1.6}
h1,h2,h3{letter-spacing:-.02em}

/* 2 · Portada y cabecera del resultado: bloque oscuro plano, como la tarjeta de la portada */
.hero,.res-hero{background:var(--plum); color:var(--claro)}
.hero::before,.hero::after,.res-hero::after{display:none}
.hero .label,.res-hero .label{color:var(--menta)}
.hero h1 em{color:var(--menta)}
.hero .lede{color:var(--claro-2)}
.hero .nota-hero{color:var(--claro-3)}
.hero .btn-line{color:var(--claro)}
.pill{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); animation:none}
.pill b{color:var(--menta)}
.chip{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:var(--claro)}
.cero{color:var(--claro)}
.cero h3 b{color:var(--menta)}
.cero p{color:var(--claro-2)}

/* 3 · Botones como los de la web: planos, sin brillo */
.btn{background:var(--coral); color:#fff; box-shadow:none; font-weight:800}
.btn:hover{background:var(--ink); color:var(--claro); box-shadow:none; transform:none}
.hero .btn:hover,.res-hero .btn:hover,.cero .btn:hover{background:var(--menta); color:var(--ink)}
.btn-line{border-width:2px; font-weight:800}
.tiendas a:first-child,.tiendas a.oficial,.comprar a{background:var(--ink); border-color:var(--ink); color:#fff}
.tiendas a.oficial::before{color:var(--menta)}
@media (hover:hover){ .tiendas a:hover,.comprar a:hover{background:var(--coral); border-color:var(--coral); color:#fff} }

/* 4 · Detalles */
.label{letter-spacing:.08em}
.opt.on{background:var(--ink); border-color:var(--ink)}
.opt:hover{border-color:var(--menta)}
.barra i{background:linear-gradient(90deg,var(--menta),var(--coral))}
.ingrediente.base,.req,.t{background:#F4F5F7}
.req,.t,.rp-freq,.alts summary{color:var(--plum-2)}
.t.warn{background:#FBE6DE; color:#B03F1C}
.ico.luna{background:var(--ink); box-shadow:inset -8px -3px 0 0 var(--menta)}
.foto.sin{color:var(--ink)}
:focus-visible{outline-color:var(--coral)}

/* 5 · Cabecera y pie de la web (mismo HTML que el resto de páginas) */
.hbp-top{background:var(--bg); border-bottom:1px solid var(--line)}
.hbp-top .shell,.hbp-foot .shell{max-width:1080px; margin:0 auto; padding-inline:20px}
.hbp-top .shell{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.hbp-top .logo{display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink)}
.hbp-top .logo b{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:-.03em}
.hbp-top .logo span{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; color:var(--muted)}
.hbp-top nav{display:flex; align-items:center; gap:4px 18px; flex-wrap:wrap; justify-content:flex-end}
.hbp-top nav a{color:var(--ink); text-decoration:none; font-weight:700; font-size:.93rem}
.hbp-top nav a:hover{color:var(--coral)}
.hbp-foot{border-top:1px solid var(--line); margin-top:72px}
.hbp-foot .shell{padding-block:32px 44px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px}
.hbp-foot h4{margin:0 0 10px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.hbp-foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.hbp-foot a{color:var(--ink); text-decoration:none; font-weight:600; font-size:.93rem; display:inline-block; padding-block:5px}
.hbp-foot a:hover{color:var(--coral)}
.hbp-foot .fine{font-size:.86rem; color:var(--muted)}
.hbp-foot .legalnote{grid-column:1/-1; border-top:1px solid var(--line); padding-top:18px}
@media (max-width:720px){.hbp-foot .shell{grid-template-columns:1fr 1fr}.hbp-foot .about{grid-column:1/-1}}
@media (max-width:640px){.hbp-top .logo span,.hbp-top .hide-sm{display:none}}

/* Ajustes 30/09: todas las pestañas en móvil y más ancho en pantallas grandes */
@media (max-width:640px){
  .hbp-top .shell{flex-wrap:wrap;row-gap:6px;padding-block:10px 8px}
  .hbp-top nav{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:10px}
  .hbp-top nav a.hide-sm{display:inline;font-size:.9rem;white-space:nowrap;padding-block:6px}
}
@media (max-width:360px){ .hbp-top nav a{font-size:.82rem!important} }
@media (min-width:1300px){ .hbp-top .shell,.hbp-foot .shell{max-width:1240px} }
@media (min-width:1600px){ .hbp-top .shell,.hbp-foot .shell{max-width:1380px} }

/* Ajustes 30/09: la portada del test ocupa el mismo ancho que la cabecera.
   Las preguntas y el resultado siguen en columna estrecha para leer cómodo. */
.container.ancho{max-width:1080px}
@media (min-width:900px){
  .container.ancho .promesas{grid-template-columns:repeat(3,1fr)}
  .hero .container.ancho .lede{max-width:44ch;font-size:1.15rem}
  .hero .container.ancho h1{font-size:clamp(2.1rem,5vw,4.2rem);max-width:18ch}
}
@media (min-width:1300px){ .container.ancho{max-width:1240px} }
@media (min-width:1600px){ .container.ancho{max-width:1380px} }