/* ============================================================
   Fades — sistema
   Todo valor sale de tokens.css. Si hace falta uno que no está,
   se agrega primero al JSON de tokens con justificación.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sup-base); color:var(--txt-principal);
  font-family:var(--f-texto); font-size:var(--body-size);
  line-height:var(--body-lh); font-weight:var(--body-w);
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

/* --- ambiente: una sola capa fija detrás de todo.
       Grano fino que respira a 90s, como el tubo fluorescente del local.
       No es decoración suelta: es lo que hace que scrollear se sienta
       como moverse por un lugar. --- */
.ambiente{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:respirar 90s ease-in-out infinite;
}
@keyframes respirar{0%,100%{opacity:.05}50%{opacity:.085}}
/* Solo eleva sobre la capa de ambiente. NO toca position: hacerlo pisaba
   el absolute del nav y del skip link (misma cascada, mayor especificidad). */
body>header,body>main,body>footer{position:relative; z-index:1}

/* --- accesibilidad --- */
.saltar{
  position:absolute; left:var(--e3); top:calc(var(--e8) * -1); z-index:99;
  background:var(--sup-inversa); color:var(--txt-sobre-inversa);
  padding:var(--e3) var(--e4); font-family:var(--f-dato);
  font-size:var(--caption-size); text-decoration:none;
  transition:top var(--mov-rapido) var(--ease-rapido);
}
.saltar:focus{top:var(--e3)}
:focus-visible{outline:var(--foco-ancho) solid var(--bor-fuerte); outline-offset:var(--foco-offset)}
.inversa :focus-visible,.hero :focus-visible{outline-color:var(--sup-acento)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- roles tipográficos: los siete, y nada más --- */
.display{font-family:var(--f-display);font-size:var(--display-size);line-height:var(--display-lh);font-weight:var(--display-w);letter-spacing:var(--display-tr);font-variation-settings:"wdth" 125;text-transform:uppercase;margin:0}
.headline{font-family:var(--f-display);font-size:var(--headline-size);line-height:var(--headline-lh);font-weight:var(--headline-w);letter-spacing:var(--headline-tr);font-variation-settings:"wdth" 112;text-transform:uppercase;margin:0}
.kicker{font-family:var(--f-dato);font-size:var(--kicker-size);line-height:var(--kicker-lh);font-weight:var(--kicker-w);letter-spacing:var(--kicker-tr);text-transform:uppercase;margin:0;color:var(--txt-secundario)}
.inversa .kicker,.hero .kicker{color:var(--txt-secundario-inversa)}
.subhead{font-size:var(--subhead-size);line-height:var(--subhead-lh);font-weight:var(--subhead-w);letter-spacing:var(--subhead-tr);margin:0}
.body{font-size:var(--body-size);line-height:var(--body-lh);margin:0}
.dato{font-family:var(--f-dato);font-size:var(--dato-size);line-height:var(--dato-lh);font-weight:var(--dato-w);letter-spacing:var(--dato-tr);font-variant-numeric:tabular-nums}
.caption{font-family:var(--f-dato);font-size:var(--caption-size);line-height:var(--caption-lh);font-weight:var(--caption-w);letter-spacing:var(--caption-tr);font-variant-numeric:tabular-nums;color:var(--txt-secundario)}
.inversa .caption,.hero .caption{color:var(--txt-secundario-inversa)}
/* medidas en ch SOBRE el elemento de texto, nunca sobre el contenedor */
.medida{max-width:62ch}
.medida-corta{max-width:44ch}

/* --- layout --- */
.contenedor{max-width:var(--contenedor);margin-inline:auto;padding-inline:var(--margen)}
.sangre{width:100%}
/* Ritmo vertical: decisión = apretada (trabajo). afirmación = con aire (respiro).
   Dos secciones seguidas NUNCA comparten padding. */
.s-decision{padding-block:var(--e6)}
.s-afirmacion{padding-block:var(--e8)}
.inversa{background:var(--sup-inversa);color:var(--txt-sobre-inversa)}
.inversa .caption,.inversa .dato-sec{color:var(--txt-secundario-inversa)}

/* --- botón --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--f-dato);font-size:var(--dato-size);font-weight:600;
  letter-spacing:var(--kicker-tr);text-transform:uppercase;text-decoration:none;
  padding:var(--e3) var(--e4);min-height:var(--control-alto);border:0;border-radius:var(--radio-chico);
  background:var(--sup-acento);color:var(--txt-sobre-acento);cursor:pointer;
  transition:transform var(--mov-rapido) var(--ease-rapido),background var(--mov-rapido) var(--ease-rapido);
}
.btn:hover{background:var(--marca-100);transform:translateY(calc(var(--e1) * -0.25))}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn-linea{background:transparent;color:var(--txt-principal);box-shadow:inset 0 0 0 var(--borde) var(--bor-interactivo)}
.btn-linea:hover{background:var(--sup-elevada);color:var(--txt-principal)}
.inversa .btn-linea,.hero .btn-linea{color:var(--txt-sobre-inversa);box-shadow:inset 0 0 0 var(--borde) var(--txt-secundario-inversa)}
.inversa .btn-linea:hover,.hero .btn-linea:hover{background:var(--sup-inversa-elevada);color:var(--txt-sobre-inversa)}

/* --- CHIP de disponibilidad ---
   Reemplaza al punto verde, que a 1.01:1 sobre hueso era invisible Y
   transmitía significado solo por color. Acá el significado vive en el
   texto y el relleno ácido solo lo refuerza. */
.chip{display:inline-block;font-family:var(--f-dato);font-size:var(--caption-size);font-weight:500;letter-spacing:var(--caption-tr);font-variant-numeric:tabular-nums;padding:var(--e1) var(--e2);border-radius:var(--radio-chico);white-space:nowrap}
.chip-hoy{background:var(--sup-acento);color:var(--txt-sobre-acento)}
.chip-luego{background:transparent;color:var(--txt-secundario);box-shadow:inset 0 0 0 var(--borde) var(--bor-interactivo)}
.inversa .chip-luego,.hero .chip-luego{color:var(--txt-secundario-inversa);box-shadow:inset 0 0 0 var(--borde) var(--bor-sutil-inversa)}
.chip-sin{background:transparent;color:var(--txt-secundario);box-shadow:inset 0 0 0 var(--borde) var(--bor-sutil)}

/* --- píldora: el ÚNICO lugar donde se usa radio-grande --- */
.pildora{display:inline-flex;align-items:center;min-height:var(--control-alto-s);padding:var(--e2) var(--e3);border-radius:var(--radio-grande);border:var(--borde) solid var(--bor-interactivo);background:transparent;color:var(--txt-principal);font-family:var(--f-dato);font-size:var(--caption-size);letter-spacing:var(--caption-tr);cursor:pointer;transition:background var(--mov-rapido) var(--ease-rapido),color var(--mov-rapido) var(--ease-rapido)}
.pildora[aria-pressed="true"]{background:var(--sup-inversa);color:var(--txt-sobre-inversa);border-color:var(--sup-inversa)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding:var(--e4) var(--margen);max-width:var(--contenedor);margin-inline:auto}
.nav-solida{position:sticky;background:var(--sup-base);border-bottom:var(--borde) solid var(--bor-sutil)}
.solo-ancho{display:none}
@media (min-width:560px){.solo-ancho{display:inline}}
.marca{font-family:var(--f-display);font-variation-settings:"wdth" 125;font-weight:800;font-size:var(--nombre-m);letter-spacing:-.02em;text-decoration:none;line-height:1}
.hero .marca{color:var(--txt-sobre-inversa)}
.nav-links{display:none;gap:var(--e4);align-items:center}
.nav-links a{font-family:var(--f-dato);font-size:var(--caption-size);letter-spacing:var(--kicker-tr);text-transform:uppercase;text-decoration:none}
.hero .nav-links a{color:var(--txt-sobre-inversa)}
@media (min-width:768px){.nav-links{display:flex}}
.nav .btn{min-height:var(--tap-min);padding:var(--e2) var(--e3)}

/* ============================================================
   HERO — Inmersivo con overlay funcional
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--sup-inversa);color:var(--txt-sobre-inversa);overflow:hidden}
.hero picture{position:absolute;inset:0;display:block}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* SCRIM: excepción declarada a la prohibición de degradados. Es negro puro a
   opacidad variable, es funcional (legibilidad), y se verificó contra la banda
   MÁS CLARA del texto, no contra el promedio. */
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(var(--neutral-900-rgb),.94) 0%,rgba(var(--neutral-900-rgb),.90) 32%,rgba(var(--neutral-900-rgb),.66) 66%,rgba(var(--neutral-900-rgb),.72) 100%)}
/* Segundo scrim, horizontal: protege la banda izquierda, que es donde vive
   todo el texto del hero. Sin él el titular cruza la pared clara del fondo. */
@media (min-width:900px){
  .hero::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to right,rgba(var(--neutral-900-rgb),.72) 0%,rgba(var(--neutral-900-rgb),.55) 34%,rgba(var(--neutral-900-rgb),0) 66%)}
}
.hero>.hero-cuerpo{position:relative;z-index:2}
.hero>.nav{z-index:5}
.hero-cuerpo{padding:var(--e6) var(--margen) var(--e5);max-width:var(--contenedor);margin-inline:auto;width:100%}
.hero .display{color:var(--txt-sobre-inversa)}
@media (min-width:900px){ .hero .display{max-width:11ch} }
.hero-sub{margin-top:var(--e4);color:var(--txt-sobre-inversa);opacity:.92}

/* Tira de disponibilidad — el desvío del arquetipo */
.tira{margin-top:var(--e5);border-top:var(--borde) solid var(--bor-sutil-inversa)}
/* En desktop la tira va en dos columnas: los cuatro barberos entran en el
   fold sin desbordar 900px de alto, que es donde vive la pregunta que
   trae el usuario. */
@media (min-width:900px){
  .tira{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e6);max-width:var(--ancho-flujo)}
  .tira-mas{grid-column:1/-1}
}
.tira-fila{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--e1) var(--e3);padding:var(--e3) 0;border-bottom:var(--borde) solid var(--bor-sutil-inversa);text-decoration:none;color:inherit;transition:padding-left var(--mov-rapido) var(--ease-rapido)}
/* Bajo 420px "SARCO no te habla" + chip no entran en una línea y la fila
   se desalineaba. El trato baja a su propio renglón; el chip queda arriba,
   que es el dato que se viene a buscar. */
@media (max-width:419px){
  /* El trato en su propio renglón sube la fila de 64 a 87px y empujaba el
     CTA fuera del fold. Se recupera apretando el ritmo vertical del hero:
     el fold tiene que cerrar con el botón adentro, no es negociable. */
  .hero-cuerpo{padding-top:var(--e5);padding-bottom:var(--e4)}
  .hero-sub{margin-top:var(--e3)}
  .tira{margin-top:var(--e4)}
  .tira-fila{padding:var(--e2) 0}
  .hero-cta{margin-top:var(--e4)}
  .tira-mas{margin-top:var(--e2)}
  .tira-fila{grid-template-columns:1fr auto}
  .tira-fila>span:first-child{display:contents}
  .tira-nombre{grid-column:1;grid-row:1}
  .tira-trato{grid-column:1;grid-row:2;margin-left:0}
  .tira-fila .chip{grid-column:2;grid-row:1}
}
.tira-fila:hover{padding-left:var(--e2)}
.tira-nombre{font-family:var(--f-display);font-variation-settings:"wdth" 112;font-weight:800;font-size:var(--nombre-s);text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.tira-trato{font-family:var(--f-dato);font-size:var(--caption-size);color:var(--txt-secundario-inversa);letter-spacing:var(--caption-tr);margin-left:var(--e2)}
.tira-mas{display:inline-block;margin-top:var(--e3);font-family:var(--f-dato);font-size:var(--caption-size);letter-spacing:var(--kicker-tr);text-transform:uppercase;color:var(--txt-sobre-inversa)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);margin-top:var(--e5)}
@media (max-width:520px){.hero-img{object-position:62% 50%}}

/* ============================================================
   ELEMENTO FIRMA — la tira del barbero
   Toda la audacia del sitio se gasta acá. El resto se queda callado.
   ============================================================ */
.firma{border-top:var(--borde) solid var(--bor-sutil)}
.firma-fila{position:relative;display:block;text-decoration:none;color:inherit;border-bottom:var(--borde) solid var(--bor-sutil);overflow:hidden;isolation:isolate}
.firma-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;opacity:0;filter:grayscale(1) contrast(1.05) brightness(.72);transition:opacity var(--mov-rapido) var(--ease-rapido);z-index:0}
.firma-fila::after{content:"";position:absolute;inset:0;background:rgba(var(--neutral-900-rgb),.78);opacity:0;transition:opacity var(--mov-rapido) var(--ease-rapido);z-index:1}
.firma-fila:hover .firma-foto,.firma-fila:focus-visible .firma-foto,.firma-fila.abierta .firma-foto{opacity:1}
.firma-fila:hover::after,.firma-fila:focus-visible::after,.firma-fila.abierta::after{opacity:1}
.firma-fila:hover .firma-cuerpo,.firma-fila:focus-visible .firma-cuerpo,.firma-fila.abierta .firma-cuerpo{color:var(--txt-sobre-inversa)}
.firma-cuerpo{position:relative;z-index:2;max-width:var(--contenedor);margin-inline:auto;padding:var(--e5) var(--margen);display:grid;grid-template-columns:1fr;gap:var(--e2);transition:color var(--mov-rapido) var(--ease-rapido)}
.firma-nombre{font-family:var(--f-display);font-variation-settings:"wdth" 125;font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.86;font-size:var(--nombre-xl);margin:0}
.firma-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e3);font-family:var(--f-dato);font-size:var(--caption-size);letter-spacing:var(--caption-tr);font-variant-numeric:tabular-nums}
.firma-fila:hover .firma-meta,.firma-fila.abierta .firma-meta{color:var(--txt-sobre-inversa)}
@media (min-width:900px){
  .firma-cuerpo{grid-template-columns:1fr auto;align-items:baseline;gap:var(--e5)}
  .firma-meta{justify-content:flex-end;text-align:right}
}

/* ============================================================
   SECCIONES
   ============================================================ */
.problema{max-width:var(--contenedor);margin-inline:auto;padding-inline:var(--margen)}
.problema .headline{max-width:18ch}
.problema-cierre{margin-top:var(--e5);display:grid;gap:var(--e4)}
@media (min-width:860px){.problema-cierre{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e6)}}
.problema-cierre p{margin:0}

/* El local — tira de dos imágenes desparejas. NO es una grilla simétrica. */
.local{display:grid;gap:var(--e2)}
@media (min-width:860px){.local{grid-template-columns:1.55fr 1fr;align-items:end}}
.local img{width:100%;height:100%;object-fit:cover;border-radius:var(--radio-chico)}
.local-a{aspect-ratio:16/10}
.local-b{aspect-ratio:4/5}
.local-texto{padding:var(--e5) var(--margen) 0;max-width:var(--contenedor);margin-inline:auto}

/* Precios — tabla real, no cards */
.tabla{width:100%;border-collapse:collapse;font-family:var(--f-dato);font-variant-numeric:tabular-nums}
.tabla th{text-align:left;font-size:var(--kicker-size);font-weight:500;letter-spacing:var(--kicker-tr);text-transform:uppercase;color:var(--txt-secundario);padding:0 0 var(--e3);border-bottom:var(--borde) solid var(--bor-fuerte)}
.tabla td{padding:var(--e4) 0;border-bottom:var(--borde) solid var(--bor-sutil);font-size:var(--dato-size);vertical-align:baseline}
.tabla .num{text-align:right;white-space:nowrap}
.tabla .tachado{color:var(--txt-secundario);text-decoration:line-through}
.tabla .servicio{font-family:var(--f-texto);font-weight:var(--body-l-w);font-size:var(--body-l-size);line-height:var(--body-l-lh);letter-spacing:var(--body-l-tr)}
@media (max-width:640px){
  .tabla thead{display:none}
  .tabla tr{display:grid;grid-template-columns:1fr auto;gap:var(--e1) var(--e3);padding:var(--e4) 0;border-bottom:var(--borde) solid var(--bor-sutil)}
  .tabla td{border:0;padding:0}
  .tabla .servicio{grid-column:1;grid-row:1}
  .tabla .dur{grid-column:1;grid-row:2;font-size:var(--caption-size);color:var(--txt-secundario)}
  .tabla .local-p{grid-column:2;grid-row:2;text-align:right;font-size:var(--caption-size)}
  .tabla .web-p{grid-column:2;grid-row:1;text-align:right}
}

/* Qué pasa después — texto corrido, sin tres pasos con íconos */
.despues{max-width:var(--contenedor);margin-inline:auto;padding-inline:var(--margen);display:grid;gap:var(--e5)}
@media (min-width:860px){.despues{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--e7);align-items:start}}

/* Dónde y cuándo */
.donde{max-width:var(--contenedor);margin-inline:auto;padding-inline:var(--margen);display:grid;gap:var(--e5)}
@media (min-width:860px){.donde{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e6)}}
.horarios{width:100%;border-collapse:collapse;font-family:var(--f-dato);font-size:var(--caption-size);font-variant-numeric:tabular-nums}
.horarios td{padding:var(--e2) 0;border-bottom:var(--borde) solid var(--bor-sutil)}
.horarios td:last-child{text-align:right}
.horarios tr[data-hoy] td{font-weight:600}
.horarios tr[data-hoy] td:first-child::after{content:" · hoy";color:var(--txt-secundario);font-weight:400}

/* Footer */
.pie{border-top:var(--borde) solid var(--bor-sutil);padding-block:var(--e6)}
.pie-inner{max-width:var(--contenedor);margin-inline:auto;padding-inline:var(--margen);display:grid;gap:var(--e4)}
@media (min-width:860px){.pie-inner{grid-template-columns:1fr auto;align-items:end}}
.pie-links{display:flex;flex-wrap:wrap;gap:var(--e4);font-family:var(--f-dato);font-size:var(--caption-size);letter-spacing:var(--caption-tr)}

/* ============================================================
   Targets táctiles — agregados sin cambiar el layout
   ============================================================ */
.enlace-tap{text-decoration:underline;text-underline-offset:var(--subrayado-offset)}
@media (pointer:coarse){
  /* Área táctil de 44px agregada SIN cambiar el layout: el ::after se
     superpone, no empuja. */
  .nav-links a,.pie-links a,.tira-mas,.marca,.enlace-tap,.editar,.link,.ficha-nombre .kicker a,.bcard-link{position:relative;display:inline-block}
  .nav-links a::after,.pie-links a::after,.tira-mas::after,.marca::after,.enlace-tap::after,.editar::after,.link::after,.ficha-nombre .kicker a::after,.bcard-link::after{
    content:"";position:absolute;left:calc(var(--e2) * -1);right:calc(var(--e2) * -1);top:50%;transform:translateY(-50%);height:var(--tap-min)}
  .pildora{min-height:var(--tap-min)}
}

/* ============================================================
   /barberos — grilla y filtros de dos ejes
   ============================================================ */
.filtros{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e6)}
.grilla-b{display:grid;gap:var(--e6)}
@media (min-width:820px){.grilla-b{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e7) var(--e6)}}
.bcard{display:grid;gap:var(--e4)}
.bcard-foto{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--sup-elevada)}
.bcard-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.05);transition:filter var(--mov-rapido) var(--ease-rapido),transform var(--mov-lento) var(--ease-lento)}
.bcard-foto:hover img{filter:none;transform:scale(1.02)}
.bcard-cuerpo{display:grid;gap:var(--e3);justify-items:start}
.bcard-link{text-decoration:none}
.bcard-link:hover{text-decoration:underline;text-underline-offset:calc(var(--subrayado-offset) * 1.5)}
.bcard-meta{color:var(--txt-secundario)}
.bcard-voz{font-style:normal}
.bcard-libre{margin:0}

/* ============================================================
   /barberos/[slug] — ficha
   ============================================================ */
.ficha{display:grid;gap:var(--e5)}
@media (min-width:900px){
  .ficha{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e7);align-items:start}
  .ficha-foto{position:sticky;top:0}
}
.ficha-foto{background:var(--sup-inversa)}
.ficha-foto img{width:100%;height:100%;max-height:100svh;object-fit:cover;object-position:50% 25%}
.ficha-cuerpo{padding:var(--e5) var(--margen) var(--e6);max-width:var(--ancho-lectura)}
@media (min-width:900px){.ficha-cuerpo{padding:var(--e7) var(--margen) var(--e8) 0}}
.ficha-voz{margin-top:var(--e5);display:grid;gap:var(--e3);border-left:var(--borde-acento) solid var(--bor-fuerte);padding-left:var(--e4)}
.ficha-datos{width:100%;border-collapse:collapse;margin-top:var(--e6);font-family:var(--f-dato);font-size:var(--caption-size);font-variant-numeric:tabular-nums}
.ficha-datos th{text-align:left;font-weight:400;color:var(--txt-secundario);padding:var(--e3) var(--e3) var(--e3) 0;border-bottom:var(--borde) solid var(--bor-sutil);white-space:nowrap;vertical-align:baseline}
.ficha-datos td{text-align:right;padding:var(--e3) 0;border-bottom:var(--borde) solid var(--bor-sutil);vertical-align:baseline}
.trabajos{display:grid;gap:var(--e2);margin-top:var(--e4)}
@media (min-width:760px){.trabajos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trabajos img{width:100%;aspect-ratio:1;object-fit:cover}
.otros{display:grid;gap:0;margin-top:var(--e4);border-top:var(--borde) solid var(--bor-sutil-inversa)}
.otro{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e3);padding:var(--e4) 0;border-bottom:var(--borde) solid var(--bor-sutil-inversa);text-decoration:none;color:inherit;transition:padding-left var(--mov-rapido) var(--ease-rapido)}
.otro:hover{padding-left:var(--e2)}
.otro-n{font-family:var(--f-display);font-variation-settings:"wdth" 112;font-weight:800;text-transform:uppercase;font-size:var(--nombre-l);line-height:1;letter-spacing:-.02em}
.inversa .otro .caption{color:var(--txt-secundario-inversa)}

/* ============================================================
   /reservar — flujo
   ============================================================ */
.flujo{max-width:var(--ancho-flujo);margin-inline:auto;padding:var(--e6) var(--margen) var(--e8)}
.resueltos{display:grid;gap:0;margin-bottom:var(--e6)}
.resuelto{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:var(--e3);padding:var(--e3) 0;border-bottom:var(--borde) solid var(--bor-sutil)}
.resuelto .caption{min-width:9ch}
.editar,.link{background:none;border:0;padding:0;font-family:var(--f-dato);font-size:var(--caption-size);letter-spacing:var(--caption-tr);color:var(--txt-secundario);cursor:pointer;text-decoration:underline;text-underline-offset:var(--subrayado-offset)}
.editar:hover,.link:hover{color:var(--txt-principal)}
.inversa .link{color:var(--txt-secundario-inversa)}
.inversa .link:hover{color:var(--txt-sobre-inversa)}
.paso .headline{margin-top:var(--e3)}
.op-lista{display:grid;gap:var(--e2);margin-top:var(--e5)}
.op{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--e2) var(--e3);
  width:100%;text-align:left;min-height:var(--control-alto-l);padding:var(--e3) var(--e4);
  background:var(--sup-elevada);border:var(--borde) solid transparent;border-radius:var(--radio-chico);cursor:pointer;
  transition:background var(--mov-rapido) var(--ease-rapido),border-color var(--mov-rapido) var(--ease-rapido)}
.op:hover:not([disabled]){border-color:var(--bor-fuerte)}
.op[disabled]{opacity:.45;cursor:not-allowed}
.op-n{font-family:var(--f-display);font-variation-settings:"wdth" 112;font-weight:800;text-transform:uppercase;font-size:var(--nombre-m);line-height:1;letter-spacing:-.02em}
.op-t{grid-column:1;color:var(--txt-secundario)}
.op .chip,.op-precio{grid-column:2;grid-row:1/3;justify-self:end}
.op-precio{display:flex;align-items:baseline;gap:var(--e2)}
.op-precio .tachado{text-decoration:line-through;color:var(--txt-secundario)}
.op-cualquiera{display:grid;gap:var(--e1);grid-template-columns:1fr;margin-top:var(--e2);background:transparent;border:var(--borde) dashed var(--bor-interactivo);min-height:var(--control-alto-l)}
.op-cualquiera .op-n{font-size:var(--subhead-size)}

.dias{display:flex;gap:var(--e2);overflow-x:auto;margin-top:var(--e5);padding-bottom:var(--e2);scroll-snap-type:x mandatory}
.dia{flex:0 0 auto;display:grid;gap:var(--e1);justify-items:center;min-width:var(--control-ancho-dia);min-height:var(--control-alto-dia);padding:var(--e3) var(--e2);
  background:var(--sup-elevada);border:var(--borde) solid transparent;border-radius:var(--radio-chico);cursor:pointer;scroll-snap-align:start;
  font-family:var(--f-dato);font-variant-numeric:tabular-nums}
.dia[aria-selected="true"]{background:var(--sup-inversa);color:var(--txt-sobre-inversa)}
.dia[disabled]{opacity:.4;cursor:not-allowed}
.dia-n{font-size:var(--caption-size);text-transform:uppercase;letter-spacing:var(--kicker-tr)}
.dia-d{font-size:var(--dato-l);font-weight:600;line-height:1}
.dia-c{font-size:var(--dato-xs);color:var(--txt-secundario)}
.dia[aria-selected="true"] .dia-c{color:var(--txt-secundario-inversa)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--slot-min),1fr));gap:var(--e2);margin-top:var(--e4)}
.slot{display:flex;align-items:center;justify-content:center;min-height:var(--control-alto);
  font-family:var(--f-dato);font-size:var(--dato-size);font-variant-numeric:tabular-nums;
  background:var(--sup-elevada);border:var(--borde) solid transparent;border-radius:var(--radio-chico);cursor:pointer;
  transition:background var(--mov-rapido) var(--ease-rapido)}
.slot:hover:not(.slot-ocupado){background:var(--sup-acento);color:var(--txt-sobre-acento)}
/* Los ocupados se muestran tachados, no se ocultan: ver la agenda real
   es lo que hace creíble la disponibilidad. */
.slot-ocupado{background:transparent;color:var(--txt-secundario);text-decoration:line-through;cursor:not-allowed;box-shadow:inset 0 0 0 var(--borde) var(--bor-sutil)}

.campos{display:grid;gap:var(--e4);margin-top:var(--e5)}
@media (min-width:640px){.campos{grid-template-columns:repeat(2,minmax(0,1fr))}.campo-ancho{grid-column:1/-1}}
.campo{display:grid;gap:var(--e2)}
.campo-l{font-family:var(--f-dato);font-size:var(--caption-size);letter-spacing:var(--kicker-tr);text-transform:uppercase;color:var(--txt-secundario)}
.campo input,.campo textarea{width:100%;min-height:var(--control-alto);padding:var(--e3);font-family:var(--f-texto);font-size:var(--body-size);
  color:var(--txt-principal);background:var(--sup-elevada);border:var(--borde) solid var(--bor-interactivo);border-radius:var(--radio-chico)}
.campo textarea{min-height:calc(var(--control-alto)*2);resize:vertical;line-height:1.5}
.campo input:focus-visible,.campo textarea:focus-visible{outline:var(--foco-ancho) solid var(--bor-fuerte);outline-offset:var(--foco-offset);border-color:var(--bor-fuerte)}
.campo-ayuda{display:block}
.error{margin-top:var(--e4);font-family:var(--f-dato);font-size:var(--caption-size);color:var(--txt-principal);
  padding:var(--e3);box-shadow:inset 0 0 0 var(--borde-acento) var(--bor-fuerte)}
#form .btn{margin-top:var(--e5)}

/* ============================================================
   /turno
   ============================================================ */
.cuerpo-inverso{background:var(--sup-inversa);color:var(--txt-sobre-inversa)}
.cuerpo-inverso .nav-solida{background:var(--sup-inversa);border-bottom-color:var(--bor-sutil-inversa)}
.cuerpo-inverso .pie{border-top-color:var(--bor-sutil-inversa)}
.turno-main{padding-block:var(--e6) var(--e8)}
.turno-cuando{margin-top:var(--e3)}
.turno-datos{margin-top:var(--e6)}
.turno-datos th,.turno-datos td{border-bottom-color:var(--bor-sutil-inversa)}
.turno-datos th{color:var(--txt-secundario-inversa)}
.turno-cal{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6)}
.turno-pedido{margin-top:var(--e7);padding-top:var(--e5);border-top:var(--borde) solid var(--bor-sutil-inversa)}
.turno-pie{display:flex;flex-wrap:wrap;gap:var(--e5);margin-top:var(--e7)}

/* El nombre va a sangre, no dentro de la columna de texto: a escala display
   no entra en 7/12 del ancho y se cortaba contra el borde. Además rima con
   el elemento firma, donde el nombre también toca los dos márgenes. */
.ficha-nombre{max-width:var(--contenedor);margin-inline:auto;padding:var(--e6) var(--margen) var(--e5)}
.ficha-nombre .display{margin-top:var(--e3)}
.ficha-trato{color:var(--txt-secundario);margin-top:var(--e3)}
@media (min-width:900px){
  .ficha-foto{position:sticky;top:0;height:100svh}
  .ficha-cuerpo{padding-top:var(--e5)}
}

/* Opacidad de texto secundario sobre superficie inversa cuando el token de
   texto secundario no aplica (párrafo largo bajo un headline invertido). */
.op-suave{opacity:.9}