/* Supremo Barber — shared design system (Dirección C, Editorial blanco/lima) */

:root{
  --paper:#f7f7f1; --paper-2:#eeede2;
  --ink:#131210; --ink-dim:#5a5c48;
  --lime:#d4e600; --lime-deep:#5f6a00;
  --line:rgba(19,18,16,0.14); --line-strong:rgba(19,18,16,0.3);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Archivo',Arial,sans-serif; }
a, button{ touch-action:manipulation; }
a{ color:inherit; }
img{ max-width:100%; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(1.2rem,4vw,2.4rem); }
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--lime-deep); }
h1,h2,h3{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.005em; text-wrap:balance; margin:0; line-height:0.92; }

/* nav */
nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.6rem 0; border-bottom:1px solid var(--line); max-width:1240px; margin:0 auto; padding-left:clamp(1.2rem,4vw,2.4rem); padding-right:clamp(1.2rem,4vw,2.4rem); padding-top:calc(1.6rem + env(safe-area-inset-top)); }
.brand{ display:flex; align-items:center; gap:0.7rem; }
.brand a{ display:flex; }
.logo-mark{ height:46px; width:auto; display:block; border-radius:2px; }
footer .logo-mark{ height:38px; }
nav ul{ list-style:none; display:flex; gap:2.2rem; margin:0; padding:0; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em; flex-wrap:wrap; }
nav a{ text-decoration:none; color:var(--ink-dim); }
nav a:hover, nav a:focus-visible{ color:var(--ink); }
nav ul a[aria-current="page"]{ color:var(--ink); border-bottom:2px solid var(--lime); padding-bottom:2px; }
nav .cta{ background:var(--lime); color:var(--ink); padding:0.55rem 1.1rem; font-family:'IBM Plex Mono',monospace; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; }

a:focus-visible, button:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:2px; }

.hl{ background:var(--lime); box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 0.1em; }

.btn{ text-decoration:none; font-family:'IBM Plex Mono',monospace; font-size:0.8rem; padding:0.85rem 1.5rem; text-transform:uppercase; letter-spacing:0.04em; display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid transparent; cursor:pointer; }
.btn.primary{ background:var(--ink); color:var(--paper); }
.btn.primary:hover{ background:var(--lime-deep); color:var(--paper); }
.btn.ghost{ border:1px solid var(--line-strong); color:var(--ink-dim); background:none; }
.btn.ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn[disabled]{ opacity:0.4; cursor:not-allowed; }
.rating{ display:flex; align-items:center; gap:0.4rem; font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--ink-dim); text-decoration:none; text-underline-offset:3px; }
.rating .stars{ color:var(--lime-deep); letter-spacing:0.05em; }
a.rating:hover, a.rating:focus-visible{ color:var(--ink); text-decoration:underline; }

/* page header (used on sub-pages instead of the big home hero) */
.page-head{ padding:clamp(2.2rem,6vw,3.4rem) 0 clamp(1.6rem,4vw,2rem); }
.page-head h1{ font-size:clamp(2.6rem,9vw,5.5rem); margin-top:0.6rem; }
.page-head p.lede{ max-width:52ch; color:var(--ink-dim); font-size:1.02rem; line-height:1.6; margin-top:1.1rem; }

.hero{ padding:clamp(2.4rem,7vw,4rem) 0 clamp(1.6rem,4vw,2rem); position:relative; }
.hero h1{ font-size:clamp(3.4rem,13vw,9.5rem); }
.hero-meta{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:1.6rem; flex-wrap:wrap; gap:1.5rem; }
.hero-meta p{ max-width:38ch; font-size:1rem; line-height:1.6; color:var(--ink-dim); margin:0; }
.actions{ display:flex; flex-direction:column; align-items:flex-end; gap:0.7rem; }
.actions .row{ display:flex; gap:0.9rem; }
@media (max-width:800px){ .hero-meta{ flex-direction:column; align-items:flex-start; } .actions{ align-items:flex-start; } }

.svc-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:1.6rem; border-top:2px solid var(--ink); }
.svc-row .svc{ padding:1.2rem 1rem 1.4rem; border-right:2px solid var(--ink); }
.svc-row .svc:last-child{ border-right:none; }
.svc-row .n{ font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:2rem; display:block; opacity:0.55; }
.svc-row h3{ font-size:1.05rem; text-transform:none; font-weight:700; letter-spacing:0; margin:0.3rem 0 0.3rem; }
.svc-row p{ font-size:0.78rem; margin:0; opacity:0.75; line-height:1.4; font-family:'Archivo',sans-serif; }
@media (max-width:800px){
  .svc-row{ grid-template-columns:repeat(2,1fr); }
  .svc-row .svc{ border-bottom:2px solid var(--ink); }
  .svc-row .svc:nth-child(2n){ border-right:none; }
}

.traits-big{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; align-items:start; }
.traits-big .lead{ font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.1; text-transform:none; font-weight:500; }
.traits-big .card h3{ font-size:0.95rem; text-transform:uppercase; margin-bottom:0.6rem; }
.traits-big .card p{ font-size:0.86rem; color:var(--ink-dim); line-height:1.55; margin:0; font-family:'Archivo',sans-serif; font-weight:400; }
@media (max-width:800px){ .traits-big{ grid-template-columns:1fr; } }

.band{ background:var(--lime); color:var(--ink); padding:clamp(2.2rem,5vw,3.2rem) 0; }
.band .eyebrow{ color:var(--ink); opacity:0.65; }
.band h2{ color:var(--ink); font-size:clamp(1.8rem,4vw,2.6rem); margin-top:0.4rem; }

section.plain{ padding:clamp(2.6rem,6vw,4.5rem) 0; border-bottom:1px solid var(--line); }
section.plain:last-of-type{ border-bottom:none; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.rows .row{ display:flex; justify-content:space-between; padding:0.75rem 0; border-bottom:1px solid var(--line); font-size:0.92rem; gap:1rem; }
.rows .row.today{ color:var(--ink); font-weight:600; background:rgba(212,230,0,0.16); margin:0 -0.6rem; padding:0.75rem 0.6rem; border-bottom:1px solid var(--line); }
.rows .row .t{ font-family:'IBM Plex Mono',monospace; color:var(--ink); text-align:right; white-space:nowrap; }
.rows .row .t small{ display:block; color:var(--ink-dim); font-weight:400; font-size:0.8em; }

.contact-card address{ font-style:normal; color:var(--ink); font-size:1.02rem; line-height:1.7; margin:1rem 0 0; }
.contact-card .phone{ font-family:'IBM Plex Mono',monospace; font-size:1.05rem; color:var(--ink); text-decoration:none; display:inline-block; margin-top:0.3rem; }
.contact-card .phone:hover{ color:var(--lime-deep); }
.contact-card .cta-row{ display:flex; gap:0.8rem; margin-top:1.4rem; flex-wrap:wrap; }
.contact-card .btn{ padding:0.7rem 1.2rem; font-size:0.74rem; }

.final{ text-align:center; padding:clamp(3rem,8vw,5.5rem) 0; }
.final h2{ font-size:clamp(2.2rem,7vw,4.6rem); }
.final .sub{ margin-top:1rem; color:var(--ink-dim); font-size:0.95rem; }
.final .actions-final{ display:flex; justify-content:center; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }

footer{ padding:2.2rem 0 calc(3rem + env(safe-area-inset-bottom)); }
footer .wrap{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:1.6rem; }
footer nav.foot-links{ border:none; padding:0; max-width:none; margin:0; }
footer nav.foot-links ul{ flex-direction:column; gap:0.5rem; text-transform:none; letter-spacing:0; font-size:0.86rem; }
footer nav.foot-links a{ color:var(--ink-dim); text-decoration:none; }
footer nav.foot-links a:hover{ color:var(--ink); }
footer .fine{ font-size:0.72rem; color:var(--ink-dim); margin:0.8rem 0 0; font-family:'IBM Plex Mono',monospace; line-height:1.6; }
footer .brand-col{ display:flex; flex-direction:column; gap:0.6rem; }

@media (max-width:800px){
  nav{ flex-wrap:wrap; row-gap:0.8rem; }
  nav ul{ order:3; width:100%; gap:1.4rem; font-size:0.78rem; }
  .split{ grid-template-columns:1fr; gap:1.8rem; }
  footer .wrap{ flex-direction:column; }
}