/* Huecobarber — sistema visual compartido
   Fuentes OFL autoalojadas en /fonts (sin Google Fonts en tiempo de ejecución). */

@font-face{
  font-family:"Archivo Black";
  src:url("/fonts/archivo-black-latin-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --font-display:"Archivo Black","Georgia",serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Paleta — modo claro (crema de barbería) */
  --navy:#0f2236;
  --navy-light:#1c3b57;
  --cream:#f6f1e7;
  --paper:#ffffff;
  --red:#c8372d;
  --red-dark:#9c2a22;
  --ink:#15202b;
  --muted:#5a6472;
  --border:rgba(15,34,54,.14);
  --card:#ffffff;
  --shadow:0 6px 18px rgba(15,34,54,.09);

  --bg:var(--cream);
  --bg-alt:var(--paper);
  --text:var(--ink);
  --accent:var(--red);
  --accent-ink:#fff;
  --on-navy:var(--cream);
  --banda:#0f2236;
  --banda-card:#1c3b57;
  --banda-border:rgba(246,241,231,.18);
  --banda-muted:#b9c4d1;

  --radius:14px;
  --radius-lg:20px;
  --maxw:1120px;
  --maxw-text:720px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c1c2c;
    --bg-alt:#122b40;
    --text:#f3efe6;
    --muted:#aab4c0;
    --border:rgba(246,241,231,.16);
    --card:#122b40;
    --shadow:0 6px 20px rgba(0,0,0,.35);
    --red:#e2473c;
    --red-dark:#b9362d;
    --accent:var(--red);
    --banda:#17324a;
    --banda-card:#20405c;
    --banda-border:rgba(246,241,231,.16);
    --banda-muted:#b9c4d1;
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:0;
}

a{color:var(--red-dark);}
@media (prefers-color-scheme: dark){ a{color:#ff8a7e;} }

img,svg{max-width:100%;display:block;}

:focus-visible{
  outline:3px solid var(--red);
  outline-offset:2px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

/* ---------- Franja de poste de barbero ---------- */
.franja-poste{
  height:10px;
  background:repeating-linear-gradient(
    -45deg,
    var(--red) 0 14px,
    #fff 14px 28px,
    var(--navy) 28px 42px
  );
}
@media (prefers-color-scheme: dark){
  .franja-poste{
    background:repeating-linear-gradient(
      -45deg,
      var(--red) 0 14px,
      #e9e3d6 14px 28px,
      #0c1c2c 28px 42px
    );
  }
}

/* ---------- Damero de suelo de barbería (decorativo) ---------- */
.damero{
  --cell:16px;
  width:100%;
  height:16px;
  background-image:
    conic-gradient(var(--navy) 90deg, transparent 90deg 180deg, var(--navy) 180deg 270deg, transparent 270deg);
  background-size:var(--cell) var(--cell);
  opacity:.14;
}
@media (prefers-color-scheme: dark){
  .damero{ background-image:
    conic-gradient(var(--cream) 90deg, transparent 90deg 180deg, var(--cream) 180deg 270deg, transparent 270deg);
    opacity:.1;
  }
}

/* ---------- Cabecera ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.1);
}
.site-header .inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:.7rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.site-header .cta{ white-space:nowrap; font-size:.72rem; padding:.7rem 1rem; }
@media(min-width:560px){ .site-header .cta{ font-size:.8rem; padding:.8rem 1.3rem; } }
.marca{
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none; color:var(--text);
  font-family:var(--font-display);
  font-size:1.05rem; letter-spacing:.01em;
  white-space:nowrap;
}
.poste-logo{ width:26px; height:26px; flex:0 0 auto; border-radius:50%; overflow:hidden; border:2px solid var(--navy); }
@media (prefers-color-scheme: dark){ .poste-logo{ border-color:var(--cream); } }
.poste-logo .giro{
  width:200%; height:200%; margin-left:-50%; margin-top:-50%;
  background:repeating-linear-gradient(-45deg,var(--red) 0 6px,#fff 6px 12px,var(--navy) 12px 18px);
}
@media (prefers-reduced-motion: no-preference){
  .poste-logo .giro{ animation:girar-poste 6s linear infinite; }
}
@keyframes girar-poste{ from{ transform:translateY(0); } to{ transform:translateY(18px); } }

.header-cta{ display:flex; align-items:center; gap:.5rem; }
.header-cta .cta.secondary{ display:none; }
@media(min-width:560px){ .header-cta .cta.secondary{ display:inline-flex; } }
/* Con JS: el CTA de cabecera solo se ve cuando el hero ya no está en pantalla (evita duplicar sus botones). Sin JS, se ve siempre. */
.header-cta.header-cta-auto{ opacity:0; pointer-events:none; transition:opacity .2s ease; }
.header-cta.header-cta-auto.is-visible{ opacity:1; pointer-events:auto; }

/* ---------- Botones ---------- */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--red); color:#fff;
  font-family:var(--font-sans); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; font-size:.82rem;
  padding:.8rem 1.3rem; border-radius:999px; text-decoration:none;
  border:2px solid var(--red);
  min-height:44px;
  box-shadow:var(--shadow);
  transition:transform .15s ease, background .15s ease;
}
.cta:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-1px); }
.cta.secondary{
  background:transparent; color:var(--text); border:2px solid var(--border);
  box-shadow:none;
}
.cta.secondary:hover{ border-color:var(--red); color:var(--red); }
.cta.block{ width:100%; }

.cta-group{ display:flex; flex-direction:column; gap:.7rem; }
.cta-group.row{ flex-direction:row; flex-wrap:wrap; justify-content:center; }


/* ---------- Layout general ---------- */
.wrap{ max-width:var(--maxw-text); margin:0 auto; padding:1.5rem 1.25rem 3rem; }
.wrap-ancho{ max-width:var(--maxw); margin:0 auto; padding:0 1.1rem; }

section{ margin:3rem 0; }
.seccion-titulo{ text-align:center; max-width:40rem; margin:0 auto 2rem; }
.seccion-titulo h2{ font-size:1.6rem; }
.seccion-titulo p{ color:var(--muted); }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.15; letter-spacing:.005em; }
h2{ font-size:1.5rem; }
h3{ font-size:1.05rem; }
p{ color:var(--text); }
p.muted, .muted{ color:var(--muted); }

.eyebrow{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; font-weight:700; color:var(--red);
}

/* ---------- Hero ---------- */
.hero{
  padding:2.6rem 0 1rem;
}
.hero .wrap-ancho{
  display:grid; gap:2.2rem; align-items:center;
}
@media(min-width:900px){
  .hero .wrap-ancho{ grid-template-columns:1.1fr .9fr; }
}
.hero h1{ font-size:2.1rem; margin:.5rem 0 1.1rem; text-wrap:balance; }
@media(min-width:640px){ .hero h1{ font-size:3rem; } }
.hero h1 .accent{ color:var(--red); }
.hero p.lead{ color:var(--muted); font-size:1.1rem; max-width:32rem; }
.hero .cta-group{ margin-top:1.5rem; }
@media(min-width:560px){ .hero .cta-group{ flex-direction:row; } }

/* ---------- Mockup de móvil con WhatsApp ---------- */
.phone-wrap{
  display:flex; justify-content:center; align-items:center; position:relative;
  padding:1.5rem 0;
}
.phone-wrap::before{
  content:"";
  position:absolute;
  width:280px; height:280px;
  max-width:80vw; max-height:80vw;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, var(--navy) 0deg 12deg, transparent 12deg 24deg);
  opacity:.1;
  z-index:0;
}
@media (prefers-color-scheme: dark){ .phone-wrap::before{ opacity:.14; } }
.phone{
  width:100%; max-width:300px;
  background:var(--navy);
  border-radius:34px;
  padding:10px;
  box-shadow:0 24px 48px rgba(15,34,54,.3), 0 2px 0 rgba(255,255,255,.4) inset;
  position:relative;
  z-index:1;
  transform:rotate(-1.5deg);
}
@media(min-width:900px){ .phone{ transform:rotate(2.5deg); } }
.phone .pantalla{
  background:#e9e0cf;
  border-radius:24px;
  overflow:hidden;
  display:flex; flex-direction:column;
  min-height:420px;
}
.phone .barra-chat{
  background:var(--navy);
  color:var(--cream);
  padding:.7rem .9rem;
  display:flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:600;
}
.phone .barra-chat .avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--red);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.75rem; font-weight:700; flex:0 0 auto;
}
.phone .hilo{
  flex:1; padding:.8rem .6rem; display:flex; flex-direction:column; gap:.5rem;
  font-size:.82rem;
}
.msg{
  max-width:82%;
  padding:.5rem .65rem;
  border-radius:12px;
  line-height:1.35;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
  opacity:1; transform:none;
}
.msg.cliente{ align-self:flex-end; background:#dff2c9; border-bottom-right-radius:3px; }
.msg.bot{ align-self:flex-start; background:#fff; border-bottom-left-radius:3px; }
.msg .hora{ display:block; text-align:right; font-size:.65rem; color:var(--muted); margin-top:.2rem; }
.msg .etiqueta{ font-weight:700; font-size:.65rem; letter-spacing:.04em; text-transform:uppercase; color:var(--red-dark); display:block; margin-bottom:.1rem; }

.escribiendo{
  align-self:flex-start; background:#fff; border-radius:12px; border-bottom-left-radius:3px;
  padding:.5rem .7rem; display:none; gap:.25rem; opacity:0;
}
.escribiendo span{ width:6px; height:6px; border-radius:50%; background:var(--muted); display:block; }

/* Por defecto (y con movimiento reducido) se ve la conversación completa, ya "enviada", sin indicadores de escritura. */

@media (prefers-reduced-motion: no-preference){
  .msg.m2, .msg.m3, .msg.m4{ opacity:0; animation-timing-function:ease-out; animation-fill-mode:forwards; animation-iteration-count:1; }
  .msg.m2{ animation-name:aparecer; animation-duration:.5s; animation-delay:1.3s; }
  .msg.m3{ animation-name:aparecer; animation-duration:.5s; animation-delay:2.3s; }
  .msg.m4{ animation-name:aparecer; animation-duration:.5s; animation-delay:3.9s; }

  .escribiendo{
    display:inline-flex; opacity:0;
    animation-timing-function:ease-in-out; animation-fill-mode:forwards; animation-iteration-count:1;
  }
  .escribiendo.e1{ animation-name:escribir-y-ocultar; animation-duration:1.2s; animation-delay:.4s; }
  .escribiendo.e2{ animation-name:escribir-y-ocultar; animation-duration:1.2s; animation-delay:2.9s; }

  @keyframes aparecer{ 0%{opacity:0;transform:translateY(8px);} 100%{opacity:1;transform:none;} }
  @keyframes escribir-y-ocultar{ 0%{opacity:0;} 25%{opacity:1;} 75%{opacity:1;} 100%{opacity:0;display:none;} }
}

/* ---------- Secciones tipo tarjeta ---------- */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow); }

.comparativa{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media(min-width:860px){ .comparativa{ grid-template-columns:1fr 1fr; align-items:start; } }
.columna{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.7rem 1.6rem 1.9rem; box-shadow:var(--shadow);
}
.columna.mal{ border-top:5px solid var(--red); }
.columna.bien{ border-top:5px solid var(--navy); }
@media (prefers-color-scheme: dark){ .columna.bien{ border-top-color:#9fd2ff; } }
.columna .titulo-con-icono{ margin-bottom:.4rem; }
.columna.mal .ic-oficio{ background:var(--red); color:#fff; }
.columna.bien .ic-oficio{ background:var(--navy); color:var(--cream); }
@media (prefers-color-scheme: dark){ .columna.bien .ic-oficio{ background:#9fd2ff; color:var(--ink); } }
.columna h2{ font-size:1.25rem; }

ul.pain{ list-style:none; padding:0; margin:.6rem 0; }
ul.pain li{ padding:.5rem 0 .5rem 2rem; position:relative; color:var(--muted); }
ul.pain li::before{ content:"✕"; position:absolute; left:0; top:.5rem; color:var(--red); font-weight:700; }
ul.good{ list-style:none; padding:0; margin:.6rem 0; }
ul.good li{ padding:.5rem 0 .5rem 2rem; position:relative; }
ul.good li::before{ content:"✓"; position:absolute; left:0; top:.5rem; color:var(--navy); font-weight:700; }
@media (prefers-color-scheme: dark){ ul.good li::before{ color:#9fd2ff; } }

ul.trust{ list-style:none; padding:0; margin:0; display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media(min-width:720px){ ul.trust{ grid-template-columns:repeat(3,1fr); } }
ul.trust li{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.4rem 1.3rem; box-shadow:var(--shadow);
  display:flex; flex-direction:column; height:100%;
}
ul.trust li .ic-wrap{
  width:48px; height:48px; margin-bottom:.9rem; border-radius:50%;
  background:var(--navy); color:var(--cream);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
@media (prefers-color-scheme: dark){ ul.trust li .ic-wrap{ background:var(--red); } }
ul.trust li .ic-wrap svg{ width:24px; height:24px; }
ul.trust li strong{ display:block; margin-bottom:.4rem; font-size:1rem; line-height:1.3; }
ul.trust li span{ color:var(--muted); font-size:.92rem; }
ul.trust li.trust-full{ grid-column:1 / -1; }
@media(min-width:720px){
  ul.trust li.trust-full{
    flex-direction:row; align-items:flex-start; gap:1.1rem; max-width:40rem; margin:0 auto; text-align:left;
  }
  ul.trust li.trust-full .ic-wrap{ margin-bottom:0; }
}

/* ---------- Bandas oscuras de ritmo ---------- */
.banda-oscura{
  background:var(--banda);
  color:var(--on-navy);
  padding:3.2rem 0;
  margin:3rem 0;
}
.banda-oscura .seccion-titulo h2{ color:var(--on-navy); }
.banda-oscura .seccion-titulo p{ color:var(--banda-muted); }
.banda-oscura .eyebrow{ color:#ff9e93; }
.banda-oscura .cta.secondary{ color:var(--on-navy); border-color:var(--banda-border); }
.banda-oscura .cta.secondary:hover{ border-color:#fff; color:#fff; }
.plan.destacado .cta.secondary{ color:var(--ink); border-color:var(--border); }

/* ---------- Pasos ---------- */
.steps{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media(min-width:720px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  background:var(--banda-card); border:1px solid var(--banda-border); border-radius:var(--radius-lg);
  padding:1.5rem 1.3rem; text-align:center; box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.step .ic-wrap{
  width:58px; height:58px; margin:0 auto .9rem; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.step .ic-wrap svg{ width:28px; height:28px; }
.step .num{
  display:inline-block; font-family:var(--font-display); font-size:.75rem;
  color:#ff9e93; margin-bottom:.3rem;
}
.step h3{ color:var(--on-navy); }
.step p{ color:var(--banda-muted); font-size:.92rem; margin:.4rem 0 0; }

/* ---------- Icono de oficio (tijera/máquina) junto a titulares ---------- */
.titulo-con-icono{ display:flex; align-items:center; gap:.6rem; }
.titulo-con-icono .ic-oficio{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  background:var(--navy); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
}
@media (prefers-color-scheme: dark){ .titulo-con-icono .ic-oficio{ background:var(--red); } }
.titulo-con-icono .ic-oficio svg{ width:20px; height:20px; }
.titulo-con-icono h2{ margin:0; }

/* ---------- Precios ---------- */
.pricing{ display:grid; gap:1.4rem; grid-template-columns:1fr; margin-top:.5rem; }
@media(min-width:720px){ .pricing{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.plan{
  background:var(--banda-card); border:1px solid var(--banda-border); border-radius:var(--radius-lg);
  padding:1.8rem 1.4rem; text-align:center; box-shadow:0 10px 26px rgba(0,0,0,.2);
  display:flex; flex-direction:column; color:var(--on-navy);
}
.plan h3{ color:var(--on-navy); }
.plan .nota{ color:var(--banda-muted); }
.plan.destacado{
  background:#fff;
  color:var(--ink);
  border:2px solid var(--red);
  order:-1;
  position:relative;
  transform:scale(1.04);
  box-shadow:0 18px 38px rgba(0,0,0,.3);
}
.plan.destacado h3, .plan.destacado .precio{ color:var(--ink); }
.plan.destacado .nota{ color:var(--muted); }
.plan.destacado::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius-lg);
  background:repeating-linear-gradient(-45deg,var(--red) 0 10px,transparent 10px 20px);
  opacity:.05; pointer-events:none;
}
.plan h3{ font-size:1.2rem; margin:.2rem 0; }
.plan .precio{
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  margin:.6rem 0; color:var(--on-navy);
}
.plan .precio .num{ font-size:2.3rem; font-weight:400; font-family:var(--font-display); line-height:1; }
.plan .precio small{ font-size:.8rem; color:inherit; opacity:.7; font-weight:400; font-family:var(--font-sans); white-space:nowrap; }
.plan .nota{ font-size:.85rem; margin-bottom:1rem; }
.plan-features{ list-style:none; padding:0; margin:0 0 1.3rem; text-align:left; display:flex; flex-direction:column; gap:.55rem; }
.plan-features li{ position:relative; padding-left:1.5rem; font-size:.88rem; line-height:1.35; }
.plan-features li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--red); font-weight:700; }
.plan.destacado .plan-features li::before{ color:var(--red); }
.plan .cta{ margin-top:auto; }
.badge{
  display:inline-block; background:var(--red); color:#fff; font-size:.68rem; font-weight:700;
  padding:.25rem .65rem; border-radius:999px; margin-bottom:.7rem; text-transform:uppercase; letter-spacing:.06em;
}
.incluido{
  background:var(--banda-card); border:1px solid var(--banda-border); border-radius:var(--radius);
  padding:1.1rem 1.3rem; color:var(--banda-muted); font-size:.92rem; margin-top:1.4rem;
}
.incluido strong{ color:var(--on-navy); }
.piloto{ text-align:center; color:var(--banda-muted); margin-top:1rem; font-size:.95rem; }

/* ---------- FAQ ---------- */
details{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:.9rem 1.1rem; margin:.7rem 0;
}
details summary{ font-weight:600; cursor:pointer; }
details summary::-webkit-details-marker{ color:var(--red); }
details p{ color:var(--muted); margin:.6rem 0 0; font-size:.95rem; }

/* ---------- CTA final ---------- */
.final-cta{
  text-align:center; background:var(--navy); color:var(--cream);
  border-radius:var(--radius-lg); padding:2.2rem 1.3rem; margin-top:2.6rem;
}
.final-cta h2{ color:var(--cream); }
.final-cta p{ color:#c9d3dd; margin-bottom:1.2rem; }
.final-cta .cta-group{ justify-content:center; }

/* ---------- Pie ---------- */
.site-footer{ border-top:1px solid var(--border); margin-top:3rem; }
.site-footer .wrap-ancho{ padding:2rem 1.1rem 2.5rem; color:var(--muted); font-size:.88rem; text-align:center; }
.site-footer nav{ margin-bottom:1rem; display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }
.site-footer nav a{ color:var(--text); text-decoration:none; font-weight:600; }
.site-footer nav a:hover{ color:var(--red); }
.site-footer .sin-cookies{ margin-top:.6rem; font-size:.82rem; }

/* ---------- Páginas legales (privacidad / aviso) ---------- */
.legal table{ width:100%; border-collapse:collapse; margin:.9rem 0; font-size:.92rem; }
.legal th,.legal td{ text-align:left; border-bottom:1px solid var(--border); padding:.55rem .4rem; vertical-align:top; }
.legal th{ color:var(--muted); font-weight:600; }
.legal .marcador{ color:var(--red-dark); background:rgba(200,55,45,.12); padding:.1rem .3rem; border-radius:4px; font-family:ui-monospace,monospace; font-size:.9em; }
.legal .callout{ background:var(--card); border:1px solid var(--red); border-radius:var(--radius); padding:1rem 1.1rem; margin:1rem 0; box-shadow:var(--shadow); }
.legal h2{ font-size:1.2rem; margin-top:2rem; border-bottom:1px solid var(--border); padding-bottom:.4rem; }
.borrador-aviso{
  background:rgba(200,55,45,.1); border:1px dashed var(--red);
  color:var(--red-dark); font-size:.82rem; font-weight:600;
  padding:.6rem .8rem; border-radius:var(--radius); margin-bottom:1.2rem;
}

/* ---------- Página demo ---------- */
.demo-wrap{ text-align:center; }
.qr-box{
  background:#fff; border-radius:16px; padding:1.2rem; display:inline-flex; margin:1.5rem 0;
  min-width:200px; min-height:200px; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
}
.proximamente{ color:var(--navy); font-weight:700; padding:1rem; max-width:180px; }
.cta[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.info{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.2rem; text-align:left; margin-top:2rem; font-size:.92rem; color:var(--muted);
}

/* ---------- 404 ---------- */
.page-404{
  min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center;
}
.page-404 h1{ font-size:2.8rem; color:var(--red); margin:0 0 .5rem; }