/* ═══════════════════════════════════════════════════════════════════════════
   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 ──────────────────────────────────────────────────────────── */
/* REGLA DE PORTADAS (23-09, aplicada aqui el 1-oct): empieza DEBAJO del menu fijo,
   menu + portada = una pantalla justa, foto desde su borde de ARRIBA, sin paralaje
   ni escala, y el titulo entero dentro. --cab-total lo mide motor.js. */
.hero{position:relative;margin-top:var(--cab-total,66px);min-height:calc(100svh - var(--cab-total,66px));
  display:grid;align-items:end;align-content:end;background:var(--asfalto);overflow:hidden;
  padding:clamp(1.4rem,4vh,3rem) clamp(1.1rem,4vw,3.4rem) clamp(3.4rem,7.5vh,6rem)}
.hero-foto{position:absolute;inset:0;overflow:hidden}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.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(--hormigon);opacity:.92;margin-bottom:1.1rem}
/* el rotulo va del color del texto de la portada, no en rojo: con la foto vista desde
   arriba quedaba rojo sobre la pared y el espejo, y en el movil no se leia (1-oct) */
.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}
/* en ventanas bajas (la de Robert, 1805x840) el titulo de 8.4rem no cabia: tambien
   manda el ALTO. Se baja la letra antes que cortar. */
@supports (height:1svh){.hero-h1{font-size:min(clamp(2.9rem,9.5vw,8.4rem),12.5svh)}}
.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}
/* ventanas bajas (1280x720): se quita AIRE entre bloques, no letra (se salia 16 px) */
@media (max-height:760px){
  .hero-sup{margin-bottom:.7rem}
  .hero-p{margin-top:.9rem}
  .hero-cta{margin-top:1.2rem}
  .hero-nota{margin-top:1rem}
}

/* ── 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}
/* la cabecera NO lleva tope: un tope en ch del texto pequeño encerraba el título
   grande en ~350 px y lo partía en 4-7 renglones. El tope va en el párrafo (.parr). */
.hora-cab{}
.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. Cada 15 minutos (lo pidió Alex, 1-oct): 8 columnas
   = dos horas por fila en el ordenador, 4 = una hora por fila en tablet y móvil */
.huecos{display:grid;grid-template-columns:repeat(8,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))}}
.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. El ciclo son DOS
   filas, así que depende de las columnas: 16 casillas con 8, 8 casillas con 4 */
.hueco:nth-child(16n+2),.hueco:nth-child(16n+4),.hueco:nth-child(16n+6),.hueco:nth-child(16n+8),
.hueco:nth-child(16n+9),.hueco:nth-child(16n+11),.hueco:nth-child(16n+13),.hueco:nth-child(16n+15){background:var(--hormigon)}
@media (max-width:820px){
  .hueco:nth-child(n){background:#fff}
  .hueco:nth-child(8n+2),.hueco:nth-child(8n+4),.hueco:nth-child(8n+5),.hueco:nth-child(8n+7){background:var(--hormigon)}
}
.hueco:not(.hueco-x):hover{background:var(--ro);color:#fff}
.hueco-x{pointer-events:none}
.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)}
.que-p{font-weight:700;margin-left:.35em;color:var(--ro)}

.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}

/* la tarifa: la pizarra de precios de una barbería, en el negro de su pared */
.tarifa{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.4rem,4vw,4rem);
  align-items:center;margin-top:clamp(2rem,4vh,3rem);padding:clamp(1.4rem,3.5vw,2.8rem);
  background:var(--asfalto);color:var(--hormigon);border-radius:var(--r);border-top:4px solid var(--ro)}
.tarifa-h{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;line-height:1;
  font-size:clamp(2.4rem,5vw,4rem)}
.tarifa-n{margin-top:.9rem;max-width:34ch;color:rgba(232,230,225,.72)}
.tarifa-l{display:grid}
.tarifa-l>div{display:flex;align-items:baseline;gap:.8rem;padding:.75rem 0;
  border-bottom:1px solid rgba(232,230,225,.16)}
.tarifa-l>div:last-child{border-bottom:0}
.tarifa-l dt{font-family:Oswald,sans-serif;font-size:clamp(1.1rem,1.8vw,1.35rem);text-transform:uppercase;
  letter-spacing:.04em;display:flex;align-items:baseline;gap:.8rem;flex:1;min-width:0}
/* los puntos que llevan del servicio al precio, como en la pizarra */
.tarifa-l dt::after{content:"";flex:1;border-bottom:2px dotted rgba(232,230,225,.3);transform:translateY(-.25em)}
.tarifa-l dd{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);
  color:var(--ro);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:760px){.tarifa{grid-template-columns:minmax(0,1fr)}}
/* moviles bajos (320x568): se quita AIRE para que la tabla se vea entera, no letra */
@media (max-width:760px) and (max-height:620px){
  .tarifa{padding:1.1rem;gap:1rem}.tarifa-h{font-size:2rem}.tarifa-n{margin-top:.5rem}
  .tarifa-l>div{padding:.5rem 0}
}
.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}

/* ── el local ────────────────────────────────────────────────────────── */
.local{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);background:var(--asfalto);
  color:var(--hormigon)}
.local-cab{margin-inline:auto;text-align:center}
/* «parking compartido» mide 9,3 veces su letra: a 320 px no cabia y se partia en tres */
.local .h2{font-size:min(clamp(2.1rem,5.4vw,4.4rem),calc(10.4vw - 4px))}
.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}
/* la bebida, justo despues de la portada y en grande: es lo que les diferencia (1-oct).
   Banda en el negro de la portada, para que se lea como su continuacion */
.invita{background:var(--asfalto);color:var(--hormigon);
  padding:clamp(2.6rem,7vh,4.5rem) clamp(1.1rem,4vw,3.4rem)}
.invita .beber{max-width:62rem;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1.3rem,4vw,3.4rem);
  border-left-width:6px}
.invita .beber-t{font-size:clamp(1.15rem,1.9vw,1.6rem);margin-bottom:1rem}
.invita .beber-p{font-size:clamp(1.2rem,2.3vw,1.85rem);line-height:1.45}

/* ── 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{}
/* «un trabajo, es un arte»» mide 10,6 veces su cuerpo de letra: en un movil de
   360-390 no cabe a 2.1rem y se partia en tres. Se baja la letra, no se corta. */
.trabajo .h2{font-size:min(clamp(2.1rem,5.4vw,4.4rem),calc(9.2vw - 3px))}
/* el carrusel (1-oct): una tira que se desliza y se queda encajada en cada foto. Cada
   foto la limita el ALTO de la pantalla (52svh de ancho = 65svh de alto) para que se
   vea entera; en el movil, una foto grande y asomando la siguiente */
.carru{margin-top:clamp(2rem,4vh,3rem)}
.obra{--hueco:clamp(.8rem,1.8vw,1.3rem);display:flex;gap:var(--hueco);overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:var(--r)}
.obra::-webkit-scrollbar{display:none}
.obra>li{flex:0 0 auto;width:min(calc((100% - 2 * var(--hueco)) / 2.6),52svh);scroll-snap-align:start}
@media (max-width:760px){.obra>li{width:min(80%,52svh)}}
.obra img{-webkit-user-drag:none;user-select:none}
.obra.arrastra{scroll-snap-type:none;cursor:grabbing}
@media (hover:hover) and (pointer:fine){.obra{cursor:grab}}
.carru-ctl{display:flex;align-items:center;gap:.6rem;margin-top:1rem}
.carru-b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1.5px solid var(--asfalto);background:#fff;color:var(--asfalto);transition:background .2s,color .2s,opacity .2s}
.carru-b:hover:not(:disabled){background:var(--asfalto);color:var(--hormigon)}
.carru-b:disabled{opacity:.28;cursor:default}
.carru-barra{flex:1;max-width:280px;height:3px;margin-left:.6rem;background:var(--hormigon-3);
  border-radius:2px;overflow:hidden}
.carru-barra span{display:block;height:100%;width:30%;background:var(--ro);border-radius:2px}
.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);aspect-ratio:4/5;
  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}
.obra-vacia{aspect-ratio:4/5;border:1.5px dashed var(--hormigon-3)}
.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)}

/* ── PÁGINAS LEGALES (aviso legal, privacidad, cookies) ─────────────────── */
.legal{max-width:70ch;margin-inline:auto;
  padding:clamp(3rem,8vh,5.5rem) clamp(1.1rem,4vw,3.4rem) clamp(3.5rem,9vh,6rem)}
.legal h1{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.05;
  margin-bottom:clamp(1.8rem,4vh,2.8rem)}
.legal h2{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--ro);
  margin:clamp(2rem,4vh,2.8rem) 0 .7rem}
.legal h2:first-of-type{margin-top:0}
.legal p{line-height:1.7;margin-bottom:1rem;max-width:66ch}
.legal p:last-child{margin-bottom:0}
.legal a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.legal a:hover{color:var(--ro)}