/* ═══════════════════════════════════════════════════════════
   jdbarber.es · hoja de estilos única
   HTML estático, sin build. Fuentes autoalojadas (OFL, licencias
   en /assets/fonts/). Cero recursos de terceros.
   ═══════════════════════════════════════════════════════════ */

/* ---------- fuentes reales (variables) ---------- */
@font-face{
  font-family:"Big Shoulders";
  src:url("/assets/fonts/bigshoulders-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --ink:#0D0C10;
  --smoke:#17151C;
  --card:#1C1922;
  --line:#2B2734;
  --bone:#F1EEE9;
  --muted:#A9A3B3;
  --faint:#6E6879;
  --violet:#9B6CFF;
  --violet-deep:#6F44D8;
  --star:#F0C24B;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--violet)}

.display{font-family:"Big Shoulders","Archivo Narrow",Impact,sans-serif}
.label{
  font-family:Archivo,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.mono-num{font-variant-numeric:tabular-nums}

/* hero */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden}
.hero .ph{position:absolute; inset:0; background:url("/assets/img/hero.v1.jpg") center 22%/cover no-repeat}
/* La rampa oscura arranca en el 26% (antes 35%) para densificar la franja
   media, que es donde cae la etiqueta del hero sobre la piel iluminada de la
   foto. La zona alta queda igual de luminosa, así que el diseño del corte no
   pierde presencia. */
.hero .veil{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,12,16,.55) 0%, rgba(13,12,16,.22) 26%, rgba(13,12,16,.86) 78%, var(--ink) 100%);}
.hero .inner{position:relative; width:100%; max-width:680px; margin:0 auto; padding:0 22px 46px; display:flex; flex-direction:column; gap:14px}
/* Sobre la foto no se cumple el 4,5:1 con los tonos apagados de la paleta:
   la etiqueta en --faint se queda en 1,05:1 contra la piel iluminada, y el
   párrafo en --muted en 3,87:1. Con --bone suben a 5,9:1 y 8,2:1. Solo
   dentro del hero: en el resto de secciones esos tokens van sobre fondos
   planos y ahí cumplen de sobra. Los chips ya dan 5,4:1 y se quedan igual. */
.hero .label,
.hero .tag{color:var(--bone)}
.brand{position:absolute; top:0; left:0; right:0; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; z-index:2}
.brand .wordmark{font-size:22px; font-weight:800; letter-spacing:.06em}
/* Instagram, arriba a la derecha: píldora oscura para que se lea sobre cualquier
   zona de la foto (sin ella, en el móvil quedaba en 3,9:1). Sin morado: ese color
   es el de reservar, y no debe competir con él. */
.brand a{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 11px;
  color:var(--bone); text-decoration:none; font-size:13px; font-weight:600;
  background:color-mix(in srgb, var(--ink) 62%, transparent);
  border:1px solid color-mix(in srgb, var(--bone) 28%, transparent); border-radius:999px;
}
.brand a svg{width:16px; height:16px; flex:none}
.brand a:hover{border-color:var(--violet)}
h1{
  margin:0; font-size:clamp(52px,14vw,96px); font-weight:800; line-height:.92;
  letter-spacing:.015em; text-transform:uppercase; text-wrap:balance;
}
.tag{color:var(--muted); font-size:16px; margin:0}
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.chip{
  border:1px solid var(--line); background:rgba(23,21,28,.7); color:var(--muted);
  font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px;
}
.chip b{color:var(--bone); font-weight:700}
.chip .st{color:var(--star)}
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--violet); color:#120E1C; text-decoration:none;
  font-weight:700; font-size:17px; padding:15px 26px; border-radius:12px;
  margin-top:6px; align-self:flex-start;
}
.cta:active{background:var(--violet-deep); color:var(--bone)}
.cta small{font-weight:600; font-size:12px; opacity:.75}

/* barra de reserva, pegada al borde superior a partir del hero */
.bar{
  position:sticky; top:0; z-index:10;
  /* Opaco, no semitransparente: con alpha .94 el texto de las secciones se
     transparentaba por detrás de la barra y se leía en fantasma. */
  background:var(--ink); border-bottom:1px solid var(--line);
}
.bar-in{
  max-width:680px; margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.bar-name{font-size:17px; font-weight:800; letter-spacing:.06em; color:var(--bone)}
/* Más pequeño que el .cta del hero: acompaña, no compite con la llamada
   principal de la portada. */
.bar-cta{
  background:var(--violet); color:#120E1C; text-decoration:none;
  font-weight:700; font-size:14px; padding:9px 18px; border-radius:10px;
  white-space:nowrap;
}
.bar-cta:active{background:var(--violet-deep); color:var(--bone)}

/* secciones */
section{max-width:680px; margin:0 auto; padding:52px 22px 0}
h2{
  margin:8px 0 20px; font-size:clamp(30px,7vw,42px); font-weight:800;
  text-transform:uppercase; letter-spacing:.02em; line-height:1;
}

/* servicios */
.serv{background:var(--smoke); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.srow{display:flex; align-items:baseline; gap:14px; padding:15px 18px; border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
.srow .n{flex:1; font-weight:600; font-size:15.5px}
.srow .d{color:var(--faint); font-size:12.5px; white-space:nowrap}
.srow .p{font-weight:700; font-size:16px; white-space:nowrap}
.snote{color:var(--faint); font-size:12.5px; margin-top:10px}

/* galeria */
.gal{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.gal figure{margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.gal img{width:100%; height:100%; object-fit:cover; aspect-ratio:9/16; display:block}
.feature{margin:0 0 10px; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.feature img{width:100%; height:auto; display:block}
.more{display:inline-block; margin-top:14px; font-weight:600; font-size:14.5px; text-decoration:none}

/* la barberia */
.shop{border-radius:16px; overflow:hidden; border:1px solid var(--line)}
/* height:auto es obligatorio: el img lleva width/height en el html para que el
   navegador reserve el hueco y no haya salto de layout, y sin esto la altura
   del atributo mandaría sobre el width:100% y estiraría la foto. */
.shop img{width:100%; height:auto}
.shop-txt{color:var(--muted); font-size:15px; margin-top:14px}

/* visita */
.visit{display:flex; flex-direction:column; gap:14px}
.vcard{background:var(--smoke); border:1px solid var(--line); border-radius:16px; padding:18px}
.vcard h3{margin:0 0 6px; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.vcard p{margin:0; font-size:15.5px}
.vcard a.go{display:inline-block; margin-top:10px; font-weight:700; text-decoration:none; font-size:15px}
.hrow{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line); font-size:14.5px}
.hrow:first-of-type{border-top:0}
.hrow .day{color:var(--muted)}

/* footer */
footer{max-width:680px; margin:0 auto; padding:52px 22px 90px; display:flex; flex-direction:column; gap:10px}
footer .links{display:flex; flex-wrap:wrap; gap:16px}
footer a{font-weight:600; text-decoration:none; font-size:14.5px}
footer .legal{color:var(--faint); font-size:12.5px}
footer .legal a{color:var(--faint); font-size:12.5px; text-decoration:underline}

@media(min-width:700px){
  .gal{grid-template-columns:1fr 1fr}
  .hero .ph{background-position:center 30%}
}
:focus-visible{outline:2px solid var(--violet); outline-offset:2px}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ---------- página legal simple (aviso-legal.html, privacidad.html, 404.html) ---------- */
.doc{max-width:680px; margin:0 auto; padding:52px 22px 90px}
.doc .back{display:inline-block; margin-bottom:24px; color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:600}
.doc h1{font-size:clamp(30px,7vw,42px); text-transform:uppercase; letter-spacing:.02em; line-height:1; margin:0 0 8px}
.doc .upd{color:var(--faint); font-size:12.5px; margin:0 0 32px}
.doc h2{font-size:19px; font-weight:700; text-transform:none; letter-spacing:0; margin:32px 0 10px}
.doc p{color:var(--muted); font-size:15px; margin:0 0 12px}
.doc dl{margin:0 0 12px}
.doc dt{color:var(--faint); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:10px}
.doc dd{margin:2px 0 0; color:var(--bone); font-size:15px}
.doc .box{background:var(--smoke); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:0 0 24px}
.doc .box p{margin:0}
.doc footer{max-width:none; padding:32px 0 0; flex-direction:row; gap:16px}
.doc .center{min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:22px}
.doc .center .wordmark{font-size:22px; font-weight:800; letter-spacing:.06em}
.doc .center h1{margin:10px 0}
.doc .center p{margin:0 0 20px}
.doc .ghost{display:inline-block; border:1px solid var(--line); color:var(--bone); text-decoration:none; font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:10px}

/* reseñas citadas */
.rev-grid{display:flex; flex-direction:column; gap:12px}
.rev{margin:0; background:var(--smoke); border:1px solid var(--line); border-radius:16px; padding:18px}
.rev p{margin:0 0 10px; font-size:15px; color:var(--bone); line-height:1.5}
.rev .rev-by{margin:0; color:var(--faint); font-size:12.5px; font-weight:600}
.rev-date{font-weight:400}