/* ═══════════════════════════════════════════════════════════════════════════
   Jorge Barber Shop · Collado Villalba
   ───────────────────────────────────────────────────────────────────────────
   DE DÓNDE SALE EL COLOR: de la moto que tienen aparcada dentro del local.
   Es blanca y roja sobre pared negra, y el suelo es hormigón claro. Así que la
   página va en HORMIGÓN CLARO con secciones de asfalto, y el rojo de la moto
   como acento. Eso además la separa de sus dos hermanas más cercanas de la
   serie, que son las dos oscuras (Voraz en negro, Autoklever en azul noche):
   ésta es la clara.

   EL OBJETO FIRMA es LA BANDERA A CUADROS convertida en parrilla de horas. Las
   dos cosas que definen este sitio —la moto de carreras y las capas a rayas de
   árbitro que usan— son el mismo dibujo, y ese dibujo es justo la forma de una
   cuadrícula de huecos horarios. Al elegir hueco se levanta como una casilla de
   la bandera.

   TIPOGRAFÍA: Oswald para titulares (condensada, vertical, de rótulo de calle:
   la misma familia visual que un dorsal) y Anybody para el texto, que tiene
   anchos variables y se lee técnica sin ser una mono. Ninguna de las dos la
   usa ninguna de las hermanas.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Oswald;src:url(fonts/oswald.woff2)format('woff2');font-weight:200 700;font-display:swap}
@font-face{font-family:Anybody;src:url(fonts/anybody.woff2)format('woff2');font-weight:100 900;font-display:swap}

:root{
  --hormigon:#e8e6e1;   /* el suelo del local. Fondo dominante */
  --hormigon-2:#f4f3f0; /* las cajas claras */
  --hormigon-3:#d6d3cc; /* filetes */
  --asfalto:#17181c;    /* la pared negra del local */
  --asfalto-2:#24262b;
  --ro:#d02b1f;         /* el rojo de la moto y del aro de su logotipo */
  --tinta:#191a1d;      /* el texto sobre claro */
  --tinta-2:#5e6066;    /* secundario */
  --r:10px;
  --max:1480px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--hormigon);color:var(--tinta);
  font:400 clamp(16px,1.02vw,17.5px)/1.62 Anybody,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ol,ul,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ro);outline-offset:3px;border-radius:3px}
.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ro);color:#fff;
  padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 8px 0}
.saltar:focus{left:0}

/* ── cabecera ─────────────────────────────────────────────────────────── */
.barra{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:1.4rem;
  padding:.7rem clamp(1rem,3vw,2.4rem);background:rgba(232,230,225,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hormigon-3);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.barra.oculta{transform:translateY(-104%)}
.marca{display:grid;line-height:1;margin-right:auto}
.marca-t{font-family:Oswald,sans-serif;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:200;
  text-transform:uppercase;letter-spacing:.04em}
.marca-t b{font-weight:700}
.marca-s{font-family:Oswald,sans-serif;font-size:max(12.5px,.62rem);letter-spacing:.32em;
  text-transform:uppercase;color:var(--ro);margin-top:.3em}
.barra-nav{display:flex;gap:1.4rem;font-family:Oswald,sans-serif;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2)}
.barra-nav a{padding:.4rem 0;border-bottom:2px solid transparent}
.barra-nav a:hover{color:var(--tinta);border-bottom-color:var(--ro)}
.barra-cta{background:var(--asfalto);color:var(--hormigon);font-family:Oswald,sans-serif;
  text-transform:uppercase;letter-spacing:.06em;padding:.6rem 1.2rem;border-radius:3px;
  font-size:.95rem;white-space:nowrap;will-change:transform}
@media (max-width:900px){.barra-nav{display:none}}

/* ── portada ──────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;background:var(--asfalto);
  padding:0 clamp(1.1rem,4vw,3.4rem) clamp(4.5rem,10vh,6rem)}
.hero-foto{position:absolute;inset:0;overflow:hidden}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--asfalto) 3%,rgba(23,24,28,.78) 34%,rgba(23,24,28,.1) 68%,rgba(23,24,28,.45) 100%)}
/* la bandera a cuadros, como banda fina al pie de la portada */
.hero-cinta{position:absolute;left:0;right:0;bottom:0;height:26px;z-index:3;
  background-image:
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  background-color:var(--asfalto);background-size:26px 26px;background-position:0 0,13px 13px}
.hero-txt{position:relative;z-index:2;color:var(--hormigon)}
.hero-sup{font-family:Oswald,sans-serif;font-size:max(12.5px,.8rem);letter-spacing:.26em;
  text-transform:uppercase;color:var(--ro);margin-bottom:1.1rem}
.hero-h1{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.9rem,9.5vw,8.4rem);line-height:1.08;letter-spacing:-.005em;max-width:16ch}
.hero-h1 .l{display:block}
.hero-h1 .ac{color:var(--ro)}
.hero-p{max-width:46ch;margin-top:1.3rem;color:rgba(232,230,225,.84)}
.hero-p b{color:#fff;font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.hero-nota{position:relative;z-index:2;margin-top:1.5rem;font-size:.86rem;
  color:rgba(232,230,225,.66)}
.hero-nota b{color:var(--ro);font-weight:700}

/* ── piezas comunes ──────────────────────────────────────────────────── */
.etiqueta{font-family:Oswald,sans-serif;font-size:max(12.5px,.82rem);letter-spacing:.26em;
  text-transform:uppercase;color:var(--ro);margin-bottom:.8rem}
.h2{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:1.08;letter-spacing:-.005em}
.parr{max-width:56ch;margin-top:1rem;color:var(--tinta-2)}
.parr b{color:var(--tinta);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.6rem;border-radius:3px;font-family:Oswald,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem;
  transition:transform .2s,box-shadow .2s;will-change:transform}
.btn-ac{background:var(--ro);color:#fff;box-shadow:0 10px 26px -14px rgba(208,43,31,.9)}
.btn-ac:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(208,43,31,1)}
.btn-linea{border:1.5px solid currentColor;color:inherit}
.btn-linea:hover{color:var(--ro)}
.btn-ancho{width:100%}
.sube{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.sube.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sube{opacity:1;transform:none;transition:none}}

/* ── LA PIEZA: pedir hora ────────────────────────────────────────────── */
.hora{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.hora-cab{max-width:40ch}
.reloj{margin-top:clamp(2rem,4vh,3rem);background:var(--hormigon-2);
  border:1px solid var(--hormigon-3);border-radius:var(--r);padding:clamp(1.2rem,3vw,2.2rem);
  display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
.paso-t{display:flex;align-items:center;gap:.7rem;font-family:Oswald,sans-serif;font-size:1.2rem;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.9rem}
.paso-n{display:grid;place-items:center;width:28px;height:28px;background:var(--asfalto);
  color:var(--hormigon);border-radius:2px;font-size:.95rem}
.paso-n2{margin-top:.8rem;font-size:.86rem;color:var(--tinta-2)}
.paso-n2 b{color:var(--tinta);font-weight:700}

.dias{display:flex;flex-wrap:wrap;gap:.5rem}
.dia{border:1.5px solid var(--hormigon-3);border-radius:3px;padding:.6rem .9rem;
  display:grid;justify-items:center;gap:.1rem;min-width:66px;transition:.2s;background:#fff}
.dia:hover{border-color:var(--asfalto)}
.dia-s{font-family:Oswald,sans-serif;font-size:max(12.5px,.7rem);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-2)}
.dia-n{font-family:Oswald,sans-serif;font-size:1.35rem;font-weight:600;line-height:1}
.dia.on{background:var(--asfalto);border-color:var(--asfalto);color:var(--hormigon)}
.dia.on .dia-s{color:var(--ro)}
.dia[disabled]{opacity:.34;cursor:not-allowed}

/* la bandera a cuadros: los huecos */
.huecos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;
  border:1px solid var(--asfalto);border-radius:3px;overflow:hidden;background:var(--asfalto)}
@media (max-width:820px){.huecos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:460px){.huecos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hueco{padding:.85rem .2rem;font-family:Oswald,sans-serif;font-size:1.05rem;font-weight:400;
  background:#fff;color:var(--tinta);transition:background .2s,color .2s,transform .2s;
  min-height:46px;font-variant-numeric:tabular-nums}
/* el damero: alterna según la posición, como la bandera de cuadros */
.hueco:nth-child(12n+2),.hueco:nth-child(12n+4),.hueco:nth-child(12n+6),
.hueco:nth-child(12n+7),.hueco:nth-child(12n+9),.hueco:nth-child(12n+11){background:var(--hormigon)}
.hueco:hover{background:var(--ro);color:#fff}
.hueco.on{background:var(--ro);color:#fff;transform:scale(1.06);position:relative;z-index:2;
  box-shadow:0 8px 20px -6px rgba(208,43,31,.7)}

.quees{display:flex;flex-wrap:wrap;gap:.5rem}
.que{border:1.5px solid var(--hormigon-3);border-radius:999px;padding:.6rem 1.1rem;
  font-family:Oswald,sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;
  background:#fff;transition:.2s;min-height:44px}
.que:hover{border-color:var(--asfalto)}
.que.on{background:var(--asfalto);border-color:var(--asfalto);color:var(--hormigon)}

.resumen{background:var(--asfalto);color:var(--hormigon);border-radius:var(--r);
  padding:clamp(1.1rem,2.5vw,1.7rem);display:grid;gap:.9rem}
.resumen-t{font-family:Oswald,sans-serif;font-size:clamp(1.1rem,2.4vw,1.6rem);
  text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.resumen-t b{color:var(--ro)}
.resumen-n{font-size:.84rem;color:rgba(232,230,225,.62)}
/* el telefono va dentro de un parrafo pequeno, y como enlace en linea se
   quedaba en 15 px de alto: por debajo de los 24 px que hace falta para poder
   darle con el dedo. inline-block + padding y ya es pulsable de verdad. */
.resumen-n a{color:var(--ro);border-bottom:1px solid currentColor;
  display:inline-block;padding:.35rem .1rem;min-height:26px;line-height:1.5}

.precio-cartel{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);
  align-items:center;margin-top:clamp(2rem,4vh,3rem);padding:clamp(1.2rem,3vw,2rem);
  background:var(--hormigon-2);border:1px solid var(--hormigon-3);border-radius:var(--r)}
.precio-cartel img{border-radius:6px}
.precio-t{font-family:Oswald,sans-serif;font-size:max(12.5px,.84rem);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ro);margin-bottom:.7rem}
.precio-n{color:var(--tinta-2)}
.precio-n b{font-family:Oswald,sans-serif;font-size:2rem;font-weight:700;color:var(--tinta);
  display:block;line-height:1;margin-bottom:.4rem}
@media (max-width:760px){.precio-cartel{grid-template-columns:minmax(0,1fr)}}

/* ── el local ────────────────────────────────────────────────────────── */
.local{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);background:var(--asfalto);
  color:var(--hormigon)}
.local-cab{max-width:44ch;margin-inline:auto;text-align:center}
.local .parr{color:rgba(232,230,225,.76);margin-inline:auto}
.local .parr b{color:#fff}
.tira{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1.2rem);
  margin:clamp(2rem,4vh,3rem) auto 0;max-width:var(--max)}
.tira-g{grid-column:span 2}
.tira-i{border-radius:var(--r);overflow:hidden}
.tira-i img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.tira-i:nth-child(2) img{aspect-ratio:3/4}
@media (max-width:900px){
  .tira{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tira-g{grid-column:span 2}
}
.beber{max-width:56ch;margin:clamp(2rem,4vh,3rem) auto 0;padding:clamp(1.2rem,3vw,1.8rem);
  border:1px solid rgba(232,230,225,.22);border-radius:var(--r);
  border-left:4px solid var(--ro)}
.beber-t{font-family:Oswald,sans-serif;font-size:1.15rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ro);margin-bottom:.6rem}
.beber-p{color:rgba(232,230,225,.82)}
.beber-p b{color:#fff;font-weight:700}

/* ── el trabajo ──────────────────────────────────────────────────────── */
.trabajo{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.trabajo-cab{max-width:38ch}
/* seis piezas: 3+3, nunca un renglón a medias */
.obra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.8vw,1.3rem);
  margin-top:clamp(2rem,4vh,3rem)}
@media (max-width:900px){.obra{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.obra{grid-template-columns:minmax(0,1fr)}}
.obra-i{position:relative;border-radius:var(--r);overflow:hidden;background:var(--hormigon-2)}
.obra-i img{width:100%;aspect-ratio:4/5;object-fit:cover}
.obra-t{position:absolute;left:0;bottom:0;background:var(--asfalto);color:var(--hormigon);
  font-family:Oswald,sans-serif;font-size:1.05rem;text-transform:uppercase;letter-spacing:.1em;
  padding:.5rem 1rem;border-radius:0 var(--r) 0 0}
.obra-cita{display:grid;align-content:center;gap:1rem;padding:clamp(1.2rem,3vw,1.8rem);
  background:var(--ro);color:#fff}
.obra-cita blockquote{font-size:1.05rem;line-height:1.5}
.obra-f{font-family:Oswald,sans-serif;font-size:max(12.5px,.78rem);letter-spacing:.16em;
  text-transform:uppercase;opacity:.8}
.trabajo-eq{margin-top:clamp(1.6rem,3vh,2.2rem);max-width:60ch;color:var(--tinta-2)}
.trabajo-eq b{color:var(--tinta);font-weight:700}

/* ── dónde ───────────────────────────────────────────────────────────── */
.donde{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);
  align-items:center;padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);
  max-width:var(--max);margin-inline:auto}
.donde-foto img{border-radius:var(--r);aspect-ratio:14/9;object-fit:cover}
.horario{margin-top:1.7rem;display:grid;gap:.1rem}
.horario>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--hormigon-3)}
.horario dt{font-family:Oswald,sans-serif;font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em}
.horario dd{font-family:Oswald,sans-serif;font-size:1.25rem;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.horario-n{margin-top:.9rem;font-size:.84rem;color:var(--tinta-2)}
.donde-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
@media (max-width:960px){.donde{grid-template-columns:minmax(0,1fr)}.donde-foto{order:-1}}

/* ── pie ─────────────────────────────────────────────────────────────── */
.pie{padding:clamp(2.5rem,6vh,4rem) clamp(1.1rem,4vw,3.4rem);background:var(--asfalto);
  color:var(--hormigon);display:grid;gap:1.3rem}
.pie-a{display:grid;gap:.6rem}
.marca-t-pie{font-size:1.35rem}
.pie-d{font-size:.9rem;color:rgba(232,230,225,.7);line-height:1.7}
.pie-n{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.88rem;color:rgba(232,230,225,.7)}
.pie-n a{border-bottom:1px solid transparent;padding:.3rem 0;min-height:30px}
.pie-n a:hover{color:var(--ro);border-bottom-color:var(--ro)}
.pie-c{font-size:max(12.5px,.78rem);color:rgba(232,230,225,.55);max-width:90ch;line-height:1.6;
  padding-top:1.1rem;border-top:1px solid rgba(232,230,225,.18)}