/* Hugo's Beauty Project — dirección visual aprobada el 25/09 (fase 3).
   Se carga DESPUÉS de site.css en las páginas rediseñadas. Mismos colores y
   letras; menos cajas, más tipografía, móvil primero.
   Papel de cada color: verde = la acción · amarillo = subrayar un dato ·
   tinta = texto y bloques oscuros · menta = acento sobre oscuro. */
:root{
  --fondo:#F4F5F7; --papel:#FFFFFF; --tinta:#0E1220; --gris:#5A6B75; --linea:#DFE5E8;
  --verde:#023BC3; --verde-osc:#012E9C; --menta:#8FA9FF; --menta-suave:#E7ECFA;
  --amarillo:#D9E2FF; --aviso:#FBF3E2; --aviso-borde:#EFD9A8; --no:#B03F1C;
  --titulo:"Bricolage Grotesque","Manrope",system-ui,sans-serif;
  --r:14px;
}
/* La web es clara siempre: la dirección aprobada no tiene modo oscuro. */
:root{color-scheme:light;--ground:var(--fondo);--card:var(--papel);--ink:var(--tinta);--muted:var(--gris);--line:var(--linea);
  --acc:var(--verde);--acc-ink:#fff;--acc-soft:var(--menta-suave);--acc-strong:var(--verde-osc);--slab:var(--tinta);--slab-ink:#F4F5F7;--slab-acc:var(--menta);--mark:var(--amarillo);--mark-ink:var(--tinta)}
body{font-size:18px;background:var(--fondo);color:var(--tinta)}
@media (min-width:900px){ body{font-size:17px} }
.shell{padding-inline:16px}
@media (min-width:700px){ .shell{padding-inline:28px} }
.ic{width:22px;height:22px;flex:none;vertical-align:middle}
.ic-s{width:17px;height:17px}
mark,.marca{background:var(--amarillo);color:var(--tinta);padding:0 .15em;border-radius:3px}

/* Cabecera y menú */
.top .shell{gap:10px}
.nav{gap:4px 20px}
.nav a{font-size:.95rem}
.nav .btn{padding:10px 16px}
@media (max-width:640px){ .nav{gap:4px 14px} .nav .hide-sm{display:none} }

/* Botones */
.btn{font-size:1rem;padding:15px 24px;font-family:var(--body)}
.btn-acc{background:var(--verde);color:#fff}
.btn-acc:hover{background:var(--tinta);color:var(--fondo)}
.btn-texto{color:var(--verde);font-weight:800;text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;gap:8px}
.btn-texto:hover{color:var(--tinta)}
.cta-fila{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.cta-fila small{font-size:.95rem;color:var(--gris)}

/* Secciones: una línea las separa, no una caja */
.sec{padding:52px 0;border-top:1px solid var(--linea)}
.sec:first-of-type{border-top:0}
.sec-h{display:flex;gap:14px;align-items:baseline;margin-bottom:22px}
.sec-n{font-family:var(--mono);font-size:.85rem;color:var(--verde);font-weight:700;flex:none}
.sec-h h2{font-size:clamp(1.7rem,6vw,2.6rem);font-weight:800;letter-spacing:-.03em}
.entradilla{font-size:1.15rem;line-height:1.55;max-width:44ch;color:var(--tinta)}
.apoyo{color:var(--gris);max-width:60ch}
.gran{font-family:var(--titulo);font-weight:800;letter-spacing:-.035em;line-height:.98}

/* Listas planas con número */
.plana{list-style:none;margin:0;padding:0;counter-reset:n}
.plana > li{counter-increment:n;padding:16px 0;border-top:1px solid var(--linea);display:grid;grid-template-columns:40px 1fr;gap:12px}
.plana > li:last-child{border-bottom:1px solid var(--linea)}
.plana > li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);color:var(--verde);font-weight:700;font-size:.9rem;padding-top:3px}
.plana h3{font-size:1.1rem;margin-bottom:4px}
.plana p{color:var(--gris)}

/* Bloque oscuro: INCI, citas */
.oscuro{background:var(--tinta);color:#F4F5F7;border-radius:var(--r)}
.inci{padding:22px 20px;font-family:var(--mono);font-size:.9rem;line-height:1.75;color:#C9D6DC}
.inci .rot{display:block;color:var(--menta);font-size:.72rem;letter-spacing:.1em;margin-bottom:10px}
.inci b{color:var(--tinta);background:var(--amarillo);font-weight:700;padding:1px 5px;border-radius:3px}
.inci .dato{display:flex;align-items:baseline;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.inci .dato strong{font-family:var(--titulo);font-size:3rem;color:#fff;letter-spacing:-.03em;line-height:1}
.inci .dato span{font-family:var(--body);font-size:.88rem;color:#B9C7CE;line-height:1.35}

/* Hugo: foto, frase y firma */
.hugo{padding:28px 22px;display:grid;gap:22px;align-items:center}
@media (min-width:760px){ .hugo{grid-template-columns:220px 1fr;padding:40px;gap:36px} }
.hugo img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:3px solid var(--menta)}
@media (min-width:760px){ .hugo img{width:220px;height:220px} }
.hugo q{display:block;font-family:var(--titulo);font-weight:700;font-size:clamp(1.45rem,5.6vw,2.1rem);line-height:1.15;letter-spacing:-.02em;quotes:"«" "»"}
.hugo .firma{margin-top:16px;color:var(--menta);font-weight:700}
.hugo .firma span{display:block;color:#B9C7CE;font-weight:500;font-size:.92rem}
.hugo a{color:var(--menta)}

/* Mito o verdad */
.mitos{display:flex;flex-direction:column}
.mito{padding:26px 0;border-top:1px solid var(--linea);display:grid;gap:10px}
.mito:last-child{border-bottom:1px solid var(--linea)}
.mito .frase{font-family:var(--titulo);font-weight:800;font-size:clamp(1.6rem,6.5vw,2.4rem);line-height:1.05;letter-spacing:-.03em}
.mito .frase::before{content:"«"} .mito .frase::after{content:"»"}
.veredicto{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;color:var(--no)}
.veredicto.medias{color:#8A5A00}
.mito p{max-width:58ch}

/* Números grandes */
.numeros{display:grid;gap:26px}
@media (min-width:700px){ .numeros{grid-template-columns:repeat(3,1fr)} }
.num strong{display:block;font-family:var(--titulo);font-weight:800;font-size:clamp(3rem,13vw,4.4rem);line-height:1;letter-spacing:-.04em}
.num span{display:block;margin-top:8px;color:var(--gris);max-width:26ch}

/* Tarjeta: sólo donde ordena datos (resultado de ejemplo, producto) */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:20px}

/* Barra fija en móvil */
@media (max-width:640px){
  .stickycta{background:var(--tinta)}
  .stickycta a{background:var(--verde);color:#fff}
}

/* Huecos pendientes de Hugo (se ven a propósito) */
.hueco{display:block;border:2px dashed #C9A227;background:#FFF8DC;color:#6B4E00;border-radius:10px;padding:12px 14px;font-size:.92rem;font-weight:700}

/* Cabecera en móvil: el nombre en una línea */
.logo b{white-space:nowrap}
@media (max-width:420px){ .logo b{font-size:1rem} .nav .btn{padding:9px 13px;font-size:.85rem} .nav{gap:4px 10px} }

/* Menú en una sola línea en el móvil */
@media (max-width:640px){ .top .nav{flex-wrap:nowrap} .top .shell{gap:8px} }
.top .nav .btn{white-space:nowrap}