/* ═══════════════════════════════════════════════════════════════════════════
   SUPREMOS BARBERSHOP · La hoja de estilo

   DE DÓNDE SALE CADA REGLA: `referencias/refero-3d.md` → OHZI Interactive.
   Las seis que mandan y que NO se negocian:

     1. Lienzo #000000 absoluto. La interfaz entera en grises. **El neón de la
        escena es el único color de toda la página.**
     2. Radio 0 en todo. Botones, tarjetas, fotos. En su sistema las esquinas
        duras son estructurales, no un gusto.
     3. Ni una sombra, ni un brillo, ni un desenfoque en la interfaz. La
        profundidad es del 3D y de nadie más.
     4. Una sola tipografía —Unbounded— con **tracking positivo que CRECE al
        bajar de tamaño**: 0,067em a 38px y 0,188em a 14px. Es al revés del
        instinto normal y es la firma del sistema.
     5. Botones fantasma: transparentes, filete de 1px, jamás rellenos.
     6. Filetes de 1px para toda la estructura. Nunca una caja con fondo.

   ⚠️ LA ÚNICA LICENCIA QUE ME TOMO, y por qué:
   OHZI dice «nada de fotografía, solo render 3D». Aquí hay fotos suyas, porque
   quien entra en la web de una barbería quiere ver cómo cortan. Se adapta en
   vez de saltarse: las fotos entran **desaturadas** y recuperan el color al
   pasar por encima o al entrar en pantalla. Así la página sigue siendo
   acromática y el color sigue siendo un acontecimiento.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Los cinco grises de OHZI. No hay un sexto. */
  --negro:  #000000;
  --carbon: #111111;
  /* Aclarado de #cfcfcf a #e2e2e2: con una foto detrás, el gris de la
     referencia se quedaba corto de contraste. Sube el texto secundario en
     vez de apagar la imagen. */
  --ceniza: #e2e2e2;
  --niebla: #f5f5f7;
  --blanco: #ffffff;

  /* El tracking crece según baja el tamaño. Es la regla 4 del sistema.
   ⚠️ PERO con un límite que la referencia no tuvo que resolver: OHZI escribe
   una frase suelta bajo su titular, y aquí hay una carta de dieciséis
   servicios que la gente recorre buscando un precio. Con 0,13em el ojo pierde
   la palabra. La firma del sistema se queda donde es suya —etiquetas y
   titulares en mayúscula— y el texto que se lee de verdad baja a 0,03em. */
  --tr-display: 0.067em;
  --tr-titulo:  0.090em;
  --tr-cuerpo:  0.132em;   /* etiquetas en mayúscula */
  --tr-lectura: 0.030em;   /* texto corrido y filas de la carta */
  --tr-micro:   0.188em;

  --hueco:  clamp(72px, 9vw, 120px);   /* 80-120px entre secciones */
  --borde:  1px solid rgba(255,255,255,.22);
  --filete: 1px solid rgba(255,255,255,.12);
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--negro);
  color:var(--blanco);
  font-family:'Unbounded', 'Space Grotesk', system-ui, sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.2;
  letter-spacing:var(--tr-cuerpo);
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

/* Radio 0 en absolutamente todo. Regla 2. */
a, button, input, img, figure, section, div, article{ border-radius:0 }

::selection{ background:#ff2408; color:#fff }

:focus-visible{ outline:2px solid var(--blanco); outline-offset:3px }

/* ── LAS SUPERFICIES DEL NAVEGADOR ────────────────────────────────────────
   Lo que no dibujas tambien lleva tu diseno. La barra de desplazamiento, el
   cursor de texto y las cifras de una carta de precios vienen con el estilo
   de fabrica de Chrome si no los tocas. */
html{ scrollbar-color:#3a3a3a #0b0b0b; scrollbar-width:thin; caret-color:#ff2408 }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:#0b0b0b }
::-webkit-scrollbar-thumb{ background:#3a3a3a; border:3px solid #0b0b0b }

/* ── LA CABECERA ──────────────────────────────────────────────────────────
   Flotando sobre el vacío. Sin fondo, sin borde, sin sombra: en su sistema la
   cabecera es tipográfica, no arquitectónica. */
.cab{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px clamp(18px, 3.4vw, 40px);
  mix-blend-mode:difference;                 /* legible sobre el neón */
  /* Solo el fondo. Animar el relleno obliga al navegador a recalcular la
     maquetación en cada fotograma; la altura de la cabecera se queda fija. */
  transition:background-color .3s cubic-bezier(.23,1,.32,1);
}
/* ⚠️ Pasada la portada, la cabecera tiene que dejar de mezclarse: sobre el
   contenido se solapaba con los rótulos de seccion y se leian los dos textos
   encima a la vez. Se posa con fondo translucido —el mismo recurso que usa la
   referencia en su banda inferior— y recupera la mezcla normal. */
.cab.posada{
  mix-blend-mode:normal;
  background:rgba(0,0,0,.78);
  border-bottom:var(--filete);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.marca{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tr-micro);
}
.marca span{ display:block; width:9px; height:9px; border:1px solid currentColor }

/* ── EL BOTÓN FANTASMA ────────────────────────────────────────────────────
   Regla 5: es un marco, no una pieza rellena. Al pasar por encima NO se
   rellena de color — solo se aclara el filete. */
.fantasma{
  display:inline-block;
  padding:15px 30px;
  border:var(--borde);
  font-size:13px; font-weight:500; text-transform:uppercase;
  letter-spacing:var(--tr-cuerpo);
  transition:border-color .25s cubic-bezier(.23,1,.32,1),
             transform .16s cubic-bezier(.23,1,.32,1);
}
.fantasma:active{ transform:scale(.97) }   /* que se note que la web te oye */
@media (hover:hover) and (pointer:fine){
  .fantasma:hover{ border-color:var(--blanco) }
}
/* `min-height` de 44px: el botón de la cabecera medía 35 y es el objetivo
   táctil más importante de la página. Por debajo de 44 se falla al primer
   intento con el pulgar. Medido con `_pruebas/teclado.mjs`. */
.fantasma.chico{ padding:10px 18px; font-size:11px; letter-spacing:var(--tr-micro);
                 min-height:44px; display:inline-flex; align-items:center }

/* ── LA PORTADA ───────────────────────────────────────────────────────────
   Pantalla completa, el retrato de neón en el centro y el texto pegado a los
   bordes. Regla: no se amontona interfaz en el centro, el objeto necesita
   vacío para respirar. */
/* ⚠️ `z-index:6` Y NO ES UN CAPRICHO. El telón es `position:fixed` y va
   DESPUÉS de la portada en el documento, así que sin altura de apilamiento se
   pintaba ENCIMA y tapaba el retrato de neón entero: lo que se veía al entrar
   era una foto en gris a pantalla completa. El `main` ya llevaba z-index 5;
   la portada se había quedado sin él.
   Lo tapado no era un matiz: era la pieza que sostiene la demo. */
.portada{ position:relative; z-index:6; height:100svh; min-height:560px; overflow:hidden }
/* ⚠️ FONDO NEGRO SÓLIDO, Y NO ES DECORATIVO. El lienzo de la portada pide
   `alpha:false` pero el navegador lo entrega con alfa igual: comprobado en
   vivo con `getContextAttributes()` y `readPixels()`, el píxel de la esquina
   sale [0,0,0,0]. Mientras el fondo de la página era negro macizo no se
   notaba; al meter el telón de fotos, el hueco transparente dejó ver una foto
   a pantalla completa DETRÁS del retrato de neón y se cargó la regla que
   sostiene todo el sistema —lienzo negro, el neón como único color— en la
   pieza más importante de la demo.
   Se arregla aquí y no en el código 3D a propósito: así da igual lo que haga
   WebGL con el alfa en cada navegador. */
#neon{ position:absolute; inset:0; background:#000 }
#neon canvas{ display:block; width:100%; height:100% }

.portada-txt{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between;
  padding:clamp(66px, 9vh, 104px) 20px clamp(34px, 6vh, 64px);
  pointer-events:none; text-align:center;
}
.portada-txt > *{ pointer-events:auto }

/* Display a 40px, no a 140px. En este sistema el titular NO es el
   protagonista: el objeto luminoso lo es. */
.portada h1{
  margin:0;
  font-size:clamp(26px, 3.6vw, 42px);
  font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tr-display);
  line-height:1.2;
}
.portada .bajo{
  margin:16px 0 0;
  /* 12px de suelo, no 11: es una línea de cincuenta caracteres en mayúscula
     y en un móvil a 11px se lee mal. Las mayúsculas sí se quedan: son la voz
     del sistema y la referencia manda sobre el detector cuando la decisión es
     del mundo visual y no una costumbre mía. */
  font-size:clamp(12px, 1.05vw, 13px); font-weight:300;
  text-transform:uppercase; letter-spacing:var(--tr-micro);
  color:var(--ceniza);
}
/* La valoración, en la portada. Es el dato que hace que alguien que no los
   conoce se fíe, y estaba enterrado al final de la página. */
.aval{
  margin:14px 0 0; font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:var(--tr-micro); color:var(--blanco);
}
.aval b{ font-weight:600 }

.portada .pie-portada{ display:flex; flex-direction:column; align-items:center; gap:20px }
.baja{
  font-size:11px; text-transform:uppercase; letter-spacing:var(--tr-micro);
  color:var(--ceniza);
}

/* ── ESTRUCTURA GENERAL ───────────────────────────────────────────────────
   Sin bandas de color que separen. La separación es el vacío. Regla 6. */
/* ── EL TELÓN DE FONDO ────────────────────────────────────────────────────
   Antes `main` iba con fondo negro macizo y la página era un vacío. Ahora el
   negro es el LIENZO y detrás está su local, en gris y muy apagado, pasando
   de una foto a otra cada pocos segundos.

   Tres cosas que lo hacen funcionar y no estorbar:
     · **Gris siempre.** El neón de la portada sigue siendo el único color de
       la página, que es la regla que sostiene todo el sistema.
     · **Un velo doble encima** —radial y vertical— para que el texto conserve
       su contraste caiga lo que caiga detrás. No es decoración: es lo que
       permite poner una foto detrás de texto blanco sin perder legibilidad.
     · **Fundido con `transition`, no con fotogramas clave.** Una transición
       se puede interrumpir y retomar a mitad; un `@keyframes` vuelve a
       empezar de cero y da un salto si el cambio pilla al anterior a medias. */
.telon{ position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--negro) }
.telon img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* ⚠️ EL BRILLO NO ES UNA PREFERENCIA, ES UN LÍMITE MEDIDO. Con 0,72 el
     punto más claro de sus fotos dejaba el texto blanco en 3,57:1 y el gris
     secundario en 2,29:1, los dos por debajo del mínimo de 4,5:1. Medido
     leyendo los píxeles, no a ojo. Con 0,55 el más claro se queda sobre 100
     de 255, que es donde el blanco pasa con holgura. */
  filter:grayscale(1) contrast(1.06) brightness(.50);
  opacity:0; transform:scale(1.04);
  transition:opacity 1.5s cubic-bezier(.23,1,.32,1),
             transform 9s linear;
}
.telon img.puesta{ opacity:1; transform:scale(1.11) }
.telon::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(135% 100% at 50% 38%, rgba(0,0,0,.05), rgba(0,0,0,.62) 78%),
    linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.26) 30%, rgba(0,0,0,.66));
}

main{ position:relative; z-index:5 }
.seccion{ padding:var(--hueco) clamp(18px, 3.4vw, 40px); border-top:var(--filete);
          position:relative; z-index:1 }
.ancho{ max-width:1180px; margin:0 auto }

/* ⚠️ AQUI HABIA UN `.rotulo` con «01 · LA CARTA» encima de cada titular, y
   se ha quitado: `impeccable` lo prohibe de forma explicita —dice que es una
   prohibicion y no un valor por defecto, que ningun encargo se la gana— junto
   con numerar secciones cuando el orden no aporta informacion. El titular se
   sostiene solo. Descubierto el 21/09 al pasar la skill de verdad. */


h2{
  margin:0 0 20px;
  font-size:clamp(22px, 2.9vw, 32px); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--tr-titulo); line-height:1.2;
}
.parrafo{
  max-width:52ch; margin:0;
  font-size:15px; font-weight:300; line-height:1.9;
  letter-spacing:var(--tr-lectura); color:var(--ceniza);
}

/* ── LA CARTA POR TIEMPO ──────────────────────────────────────────────────
   La idea que organiza la web: Booksy da precio Y duración, y nadie ordena
   una carta de barbería por el rato que tienes. Pero es como decide la gente.
   Cada tramo es una fila con filete arriba; no hay tarjetas. */
/* ── LA CARTA, A DOS COLUMNAS ────────────────────────────────────────────
   La lista a la izquierda y el retrato pegado a la derecha. Con el ancho
   completo el nombre del servicio y su precio quedaban a media pantalla de
   distancia y el ojo no los unia; ahora la columna manda el ancho. */
.carta-dos{ display:grid; grid-template-columns:minmax(0,1fr) 380px;
            gap:clamp(30px,4vw,64px); align-items:start }
.columna-neon{ position:sticky; top:86px }
.escenario{ position:relative }

/* ── LA PRUEBA ────────────────────────────────────────────────────────────
   ⚠️ ESTE ES EL ÚNICO SITIO DE LA WEB DONDE HAY COLOR aparte del neón, y es
   una excepción decidida, no un descuido. La regla de OHZI dice que la
   escena 3D es la única fuente de color; aquí manda algo más fuerte: una
   barbería se elige mirando cómo corta, y un degradado en blanco y negro no
   prueba nada. El resto del sistema aguanta porque el color aparece SOLO
   cuando señalas, y desaparece al soltar. */
.prueba{
  position:absolute; inset:0; margin:0; overflow:hidden;
  opacity:0; transition:opacity .45s cubic-bezier(.23,1,.32,1);
  pointer-events:none;
}
.prueba.puesta{ opacity:1 }
.prueba img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.4s cubic-bezier(.23,1,.32,1);
}
.prueba.puesta img{ transform:scale(1) }
/* ⚠️ SE PROBÓ A DEJAR EL NEÓN ENCIMA DE LA FOTO —el diagrama sobre la
   realidad— y quedaba fatal: el trazo no coincide con la cabeza de la foto,
   así que se leía como arañazos sobre la imagen. La foto tapa, el neón
   espera debajo. Mirado en captura, no razonado. */
#neon-carta{ transition:opacity .45s cubic-bezier(.23,1,.32,1) }
.escenario.probando #neon-carta{ opacity:.22 }
.pie-prueba{
  /* En caja baja y a 12px: es una frase, no una etiqueta. En mayúscula
     ancha se leía como un rótulo y el detector la marcaba con razón. */
  margin:14px 0 0; font-size:12px; letter-spacing:var(--tr-lectura);
  color:var(--ceniza); text-align:center; min-height:1.4em;
}
/* ⚠️ MEZCLA `screen`, y es lo que evita que parezca un recorte. Con el telón
   detrás, un lienzo negro opaco se lee como una caja pegada encima de la
   foto. En `screen` el negro es el color neutro: desaparece, y lo único que
   queda del lienzo es la luz del tubo. Que es lo que un neón hace de verdad
   sobre una pared — sumar luz, no tapar. */
#neon-carta{
  width:100%; aspect-ratio:3/4;
  /* El halo del bloom llena el lienzo entero y se cortaba en seco en el borde
     del panel: se veía el rectángulo. La máscara lo disuelve, y así la luz
     del tubo se derrama sobre la foto del fondo como haría en una pared. */
  -webkit-mask-image:radial-gradient(72% 60% at 50% 45%, #000 46%, transparent 100%);
          mask-image:radial-gradient(72% 60% at 50% 45%, #000 46%, transparent 100%);
}
#neon-carta canvas{ display:block; width:100%; height:100%; mix-blend-mode:screen }
@media (max-width:1180px){
  .carta-dos{ grid-template-columns:1fr }
  .columna-neon{ display:none }
}
.tramo{ border-top:var(--filete); padding:clamp(26px, 3.4vw, 40px) 0 }
.tramo:first-child{ border-top:0 }
.tramo-cab{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:22px;
}
.tramo-cab h3{
  margin:0; font-size:clamp(17px, 1.9vw, 22px); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--tr-titulo);
}
.tramo-cab em{
  font-style:normal; font-size:11px; text-transform:uppercase;
  letter-spacing:var(--tr-micro); color:var(--ceniza);
}
.suya{ margin:0 0 20px; max-width:46ch; font-size:14px; font-weight:300;
        line-height:1.7; letter-spacing:var(--tr-lectura); color:var(--niebla) }
.lista{ display:grid; gap:0 }
/* ── LA ENTRADA ESCALONADA ───────────────────────────────────────────────
   Desplazamiento corto y desenfoque, nunca desde `scale(0)`: nada en el mundo
   real aparece de la nada. El desenfoque tapa el instante en que la línea
   está a medio camino, que es lo que delata una animación barata. */
.tramo, .fila, .incluye div, .persona{
  opacity:0; transform:translateY(10px); filter:blur(5px);
  transition:opacity .6s cubic-bezier(.23,1,.32,1),
             transform .6s cubic-bezier(.23,1,.32,1),
             filter .6s cubic-bezier(.23,1,.32,1);
}
.tramo.dentro, .fila.dentro, .incluye div.dentro, .persona.dentro{
  opacity:1; transform:none; filter:blur(0);
}

a.fila{ color:inherit; text-decoration:none }
a.fila:active{ transform:scale(.995) }
@media (hover:hover) and (pointer:fine){
  a.fila:hover{ background:rgba(255,255,255,.035) }
}
/* ⚠️ AQUÍ HABÍA UNA MINIATURA DE 52px por fila, y se ha quitado.
   La idea era buena —sin columna lateral no hay dónde enseñar la prueba, y en
   el móvil es donde más falta hace— pero solo 19 de los 31 servicios tienen
   foto en su ficha de Booksy. Resultado: por debajo de 1180px, 19 filas iban
   sangradas 66px con su foto y 12 empezaban pegadas al margen. La carta tenía
   el borde izquierdo roto en dos y se leía como un fallo, que es lo que era.

   Las 31 filas comparten ahora la misma anatomía: nombre · rato · precio.
   Su trabajo se enseña en el panel de al lado, en la banda de trenzas y en la
   subpágina, que son sitios donde cada foto va con SU servicio. */

.fila{
  display:grid; grid-template-columns:1fr auto auto;
  transition:background-color .2s cubic-bezier(.23,1,.32,1),
             transform .16s cubic-bezier(.23,1,.32,1);
  gap:clamp(12px, 2vw, 28px); align-items:baseline;
  padding:14px 0; border-top:1px solid rgba(255,255,255,.07);
  font-size:14px; font-weight:300; letter-spacing:var(--tr-lectura);
}
.fila:first-child{ border-top:0 }
/* Lo que lleva el servicio completo, DENTRO de su fila. Antes había una
   sección entera debajo repitiendo el mismo servicio que acababas de leer:
   dos bloques discutiendo por lo mismo en vez de una idea que avanza. */
.fila .lleva{
  display:block; margin-top:8px; max-width:52ch;
  font-size:11px; line-height:1.7; letter-spacing:var(--tr-lectura);
  color:var(--ceniza);
}
.fila .nota{
  display:block; margin-top:5px; font-size:11px; color:var(--ceniza);
  letter-spacing:var(--tr-micro); text-transform:uppercase;
}
.fila .rato{ color:var(--ceniza); font-size:11px; letter-spacing:var(--tr-micro);
             white-space:nowrap; text-transform:uppercase }
.fila .euros{ font-weight:600; font-size:15px; letter-spacing:var(--tr-titulo);
              white-space:nowrap; min-width:4.5ch; text-align:right;
              font-variant-numeric:tabular-nums }

/* ── EL COMPLETO ──────────────────────────────────────────────────────────
   Lo que incluye, con sus palabras. Columnas con filete, nada de viñetas. */
.incluye{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:0; border-top:var(--filete);
}
.incluye div{
  padding:20px clamp(14px, 2vw, 26px) 20px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:13px; font-weight:300; letter-spacing:var(--tr-lectura);
  color:var(--niebla);
}
.incluye div::before{
  content:''; display:inline-block; width:14px; height:1px;
  background:rgba(255,255,255,.45); margin-right:12px; vertical-align:middle;
}

/* ── QUIÉN TE ATIENDE ────────────────────────────────────────────────────
   En zigzag: uno a la derecha, el siguiente a la izquierda. No es un capricho
   — obliga al ojo a bajar en diagonal y convierte una lista en un recorrido.
   Cinco tarjetas iguales en fila serían justo lo que la referencia llama «el
   contenedor perezoso».

   La foto va en gris como todo lo demás y recupera el color al pasar: el
   color sigue siendo un acontecimiento, no el estado normal. */
.equipo{ display:grid; gap:clamp(30px, 5vw, 64px); margin-top:clamp(36px,5vw,64px) }

.persona{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(20px,3vw,40px); align-items:center;
  max-width:880px;
  padding-top:clamp(24px,3vw,40px); border-top:var(--filete);
}
/* Los impares se van a la derecha. */
.persona:nth-child(even){ margin-left:auto }
.persona:nth-child(odd){ margin-right:auto }

.persona .retrato{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#0b0b0b }
.persona .retrato img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.82);
  transition:filter .5s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){
  .persona:hover .retrato img{ filter:grayscale(0) brightness(1); transform:scale(1.04) }
}
/* El hueco honesto para quien no tiene foto en su ficha. Se dibuja a
   propósito para que se lea como una decisión y no como una imagen rota. */
.persona .sinfoto{
  position:absolute; inset:0; display:grid; place-items:center;
  border:var(--filete);
  font-size:11px; text-transform:uppercase; letter-spacing:var(--tr-micro);
  color:var(--ceniza); text-align:center; padding:12px;
}

.persona h3{
  margin:0; font-size:clamp(26px, 4.2vw, 40px); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--tr-display); line-height:1;
}
.persona .suyo{
  display:block; margin-top:10px; font-size:11px; text-transform:uppercase;
  letter-spacing:var(--tr-micro); color:var(--ceniza);
}
.persona blockquote{
  margin:14px 0 0; font-size:14px; font-weight:300; line-height:1.7;
  letter-spacing:var(--tr-lectura); color:var(--niebla);
}
.persona blockquote cite{
  display:block; margin-top:8px; font-style:normal;
  font-size:11px; text-transform:uppercase; letter-spacing:var(--tr-micro);
  color:var(--ceniza);
}
.persona .pedir{ margin-top:18px }

@media (max-width:640px){
  .persona{ grid-template-columns:1fr; max-width:none }
  .persona:nth-child(even), .persona:nth-child(odd){ margin:0 }
  .persona .retrato{ aspect-ratio:4/3 }
}

/* ── LAS TRENZAS ─────────────────────────────────────────────────────────
   En COLOR, y es la segunda excepción declarada del sistema. Unas trenzas en
   blanco y negro no enseñan nada: la mitad del trabajo es el color del pelo
   postizo. Y es el servicio de 160 €.
   Sin tarjetas: las fotos se apoyan sobre el negro con un filete y ya. */
.trenzas-tira{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:1px;
  margin-top:clamp(30px,4vw,48px);
}
/* El filete va en cada foto, NO de fondo en la rejilla: son once piezas y
   casi ningun ancho da un multiplo exacto, asi que siempre sobra una celda.
   Con el fondo en el contenedor, ese hueco se veia como un rectangulo claro
   y la seccion parecia a medio cargar. Con medio pixel por lado, los bordes
   compartidos suman uno y el hueco desaparece. */
.trenzas-tira figure{
  margin:0; position:relative; background:var(--negro); overflow:hidden;
  box-shadow:0 0 0 .5px rgba(255,255,255,.14);
}
.trenzas-tira img{
  /* `height:auto` es obligatorio: el atributo `height` del HTML —que se pone
     para reservar el hueco y que la página no salte al cargar— entra como
     altura fija y le gana a `aspect-ratio`. Ya me pasó en la otra demo. */
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){
  .trenzas-tira figure:hover img{ transform:scale(1.05) }
}
/* El nombre y el precio NO comparten linea. Puestos en horizontal con
   `space-between`, un nombre como «4 trenzas de raiz con dos coletas» empuja
   al precio hasta partirle el simbolo del euro a otra linea y se montan. En
   columna el nombre tiene el ancho entero y el precio manda arriba, que es
   el orden en que se mira una foto de trabajo: primero cuanto, luego que. */
.trenzas-tira figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 12px 11px;
  background:linear-gradient(to top, rgba(0,0,0,.92) 38%, rgba(0,0,0,0));
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
}
.trenzas-tira figcaption b{
  font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.trenzas-tira figcaption span{
  font-size:12px; line-height:1.3; text-transform:uppercase;
  letter-spacing:var(--tr-micro); color:rgba(255,255,255,.72);
}
/* En el movil, `auto-fit` con mínimo de 190px solo deja caber UNA columna, y
   once fotos a pantalla completa son once pantallas de scroll: se abandona
   antes de llegar a las de 160 €, que son justo las que hay que ver. A dos
   columnas la tira entera cabe en dos pantallas. */
@media (max-width:760px){
  .trenzas-tira{ grid-template-columns:1fr 1fr }
  .trenzas-tira figcaption{ padding:22px 9px 9px }
  .trenzas-tira figcaption b{ font-size:14px }
  .trenzas-tira figcaption span{ font-size:11px; letter-spacing:.04em }
}

/* ── LAS FOTOS ────────────────────────────────────────────────────────────
   La licencia declarada arriba: entran en gris y recuperan el color. */
.tira{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1px; background:rgba(255,255,255,.12);
}
.tira figure{ margin:0; overflow:hidden; background:var(--negro) }
.tira img{
  width:100%; height:100%; aspect-ratio:4/5; object-fit:cover;
  /* La tira del local es CONTENIDO, no fondo: aquí no hay texto encima, así
     que puede ir mucho más viva que el telón. Recupera el color al pasar. */
  filter:grayscale(1) contrast(1.06) brightness(.78);
  transition:filter .5s cubic-bezier(.23,1,.32,1),
             transform .9s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){
  .tira figure:hover img{ filter:grayscale(0) contrast(1) brightness(.95); transform:scale(1.03) }
}

/* ── LO QUE DICEN ELLOS ───────────────────────────────────────────────────
   Dos frases suyas, literales de su ficha. No se «mejoran». */
.dicho{
  max-width:34ch; margin:0 0 34px;
  font-size:clamp(16px, 2.1vw, 22px); font-weight:300; line-height:1.65;
  letter-spacing:var(--tr-lectura); color:var(--niebla);
}
.dicho:last-of-type{ margin-bottom:0 }

/* ── EL CIERRE ───────────────────────────────────────────────────────────
   Lo primero que se lee aquí es si están abiertos. Va grande porque es la
   pregunta que trae a alguien al final de la página de una barbería. */
.cierre{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:clamp(30px,5vw,72px); margin-top:clamp(30px,4vw,48px);
}
.estado{
  margin:0; display:inline-flex; align-items:baseline; gap:12px;
  font-size:clamp(24px, 3.4vw, 38px); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--tr-titulo); line-height:1.1;
}
/* El punto es el único sitio donde la interfaz se permite un color, y solo
   porque distinguir «abierto» de «cerrado» por la palabra sola obliga a leer.
   Nunca va solo: siempre acompaña al texto, nunca lo sustituye. */
.estado::before{
  /* Sin resplandor: un halo de color a offset cero es decoración, y el suelo
     de calidad lo prohíbe. El punto solo ya distingue, y nunca va sin la
     palabra al lado. */
  content:''; width:11px; height:11px; flex:none; align-self:center;
  background:#6ee07a;
}
.estado.cerrado::before{ background:#7a7a7a; box-shadow:none }
.horario{ margin:16px 0 0; font-size:15px; font-weight:300;
          letter-spacing:var(--tr-lectura); color:var(--niebla) }
.domingo{ margin:8px 0 0; font-size:13px; font-weight:300;
          letter-spacing:var(--tr-lectura); color:var(--ceniza) }

.donde-datos .dato:first-child{ border-top:var(--filete) }
.dato{ border-top:var(--filete); padding:18px 0; font-size:14px; font-weight:300;
       letter-spacing:var(--tr-lectura) }
.dato b{ display:block; margin-bottom:8px; font-size:11px; font-weight:600;
         text-transform:uppercase; letter-spacing:var(--tr-micro); color:var(--ceniza) }
.dato > span{ display:block }
/* En línea propia: pegado al código postal se leía como parte de la
   dirección en vez de como el enlace que es. */
.dato .texto-enlace{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tr-micro);
}
/* Crece con `transform`, no con `width`: animar el ancho obliga al navegador
   a recalcular la maquetación en cada fotograma. Ya se corrigió lo mismo en
   la otra demo; aquí se me había vuelto a colar. */
.dato .texto-enlace::after{ content:''; width:28px; height:1px; background:currentColor;
                            transform:scaleX(.57); transform-origin:left;
                            transition:transform .2s cubic-bezier(.23,1,.32,1) }
@media (hover:hover) and (pointer:fine){ .dato .texto-enlace:hover::after{ transform:scaleX(1) } }

/* Lo que tiene el local: filas de una línea, sin iconos. Un icono aquí sería
   un adorno; la palabra ya lo dice. */
.comodidades{
  list-style:none; margin:clamp(34px,4.4vw,56px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.comodidades li{
  padding:9px 16px; border:var(--filete);
  font-size:12px; letter-spacing:var(--tr-lectura); color:var(--niebla);
}

.dicen{ margin-top:clamp(40px,5vw,64px) }
/* Fila de botones fantasma. Es `flex` porque desde que la banda de trenzas
   enlaza a su subpágina hay dos, y dos `inline-block` seguidos se pegaban
   con el espacio en blanco del marcado por todo hueco. */
.remate{ margin:clamp(34px,4.4vw,56px) 0 0;
         display:flex; flex-wrap:wrap; gap:12px }

/* ── EL PIE ───────────────────────────────────────────────────────────────*/
/* El pie iba a 11px y en mayúsculas: medio párrafo gritado y en el límite de
   lo legible. Las mayúsculas anchas se quedan donde son la firma del sistema
   —etiquetas cortas—, no en una línea de cincuenta caracteres. */
.pie{ position:relative; z-index:5; padding:clamp(48px,6vw,80px) clamp(18px,3.4vw,40px);
      border-top:var(--filete); font-size:13px;
      letter-spacing:var(--tr-lectura); color:var(--ceniza) }
.pie .ancho{ display:flex; gap:24px; justify-content:space-between; flex-wrap:wrap }

/* ── EL AVISO DE QUE ESTO ES UNA PRUEBA ───────────────────────────────────
   Va en TODAS las páginas y no se puede cerrar. Es el equivalente de su
   banda de cookies: barra fija abajo, translúcida, sin sombra. Aquí no se
   disimula: quien lo abra tiene que saber en tres segundos que no es la web
   oficial de Supremos, sino una propuesta. */
.aviso{
  position:fixed; inset:auto 0 0 0; z-index:50;
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; text-align:center;
  padding:11px 18px;
  background:rgba(0,0,0,.72);
  border-top:var(--filete);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:12px; letter-spacing:var(--tr-lectura);
  color:var(--ceniza);
}
.aviso b{ color:var(--blanco); font-weight:600; text-transform:uppercase;
          letter-spacing:var(--tr-micro) }
body{ padding-bottom:44px }

@media (max-width:760px){
  .cab{ padding:14px 16px }
  /* En 390px «SUPREMOS BARBERSHOP» y «PEDIR CITA» se partían en dos líneas
     cada uno, y la cabecera va fija: eran 90px de franja rota acompañándote
     toda la página. Una sola línea, aunque haya que apretar el tracking. */
  .marca{ font-size:11px; letter-spacing:.09em; white-space:nowrap; gap:7px }
  .marca span{ width:7px; height:7px }
  .fantasma.chico{ white-space:nowrap; padding:10px 14px; letter-spacing:.09em }
  .fila{ grid-template-columns:1fr auto; }
  .fila .rato{ grid-column:1; order:3; margin-top:-8px }
  /* 9px era ilegible en un móvil, que es justo donde se abre este enlace.
     Se queda en 11px, que es el suelo, y se gana el sitio con menos relleno.
     ⚠️ Y el hueco reservado abajo sube a 96px: en 390px de ancho esta frase
     ocupa TRES líneas, y con los 44px de antes la barra se comía el pie de la
     página y el borde de la última foto. */
  .aviso{ font-size:11px; letter-spacing:var(--tr-lectura); padding:9px 14px;
          text-transform:none }
  body{ padding-bottom:96px }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}