/* ═══════════════════════════════════════════════════════════════
   BARBERÍA RIVADAVIA — demo de E&S Estudio
   Sistema de diseño: «Rivadavia Heritage» (ver ../DESIGN Peluqueria.md)
   ───────────────────────────────────────────────────────────────
   Minimalismo brutalista sobre negro cinematográfico. Cero radios:
   todo a 90 grados, como el filo de una navaja. La profundidad se
   hace con capas tonales y bordes fantasma de 1px, nunca con
   sombras. El cobre aparece poco y sólo donde hay que apretar.

   Es lo contrario de la demo de la cafetería: obsidiana contra
   papel, Caslon en 700 contra Caslon en 400, botones macizos
   contra llamados fantasma, aparición al scrollear contra nada.

   Sin librerías, sin pedidos a terceros, sin build.
   Las fuentes van embebidas en fuentes.css, que cada página
   enlaza antes que esta hoja.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── color ────────────────────────────────────────────────────
     Negros profundos para la sensación de lujo e intimidad. El
     piso es obsidiana; lo que se acerca al lector sube a carbón. */
  --obsidiana: #0D0D0D;   /* el piso */
  --fondo:     #131313;   /* franjas de sección */
  --carbon:    #1A1A1A;   /* tarjetas, menús, todo lo que sube */
  --carbon-2:  #201F1F;
  --carbon-3:  #2A2A2A;

  --pergamino: #F4F1ED;   /* parchment-white: titulares */
  --texto:     #E5E2E1;   /* cuerpo */
  --gris:      #A18C85;   /* secundario, cálido */
  --gris-cl:   #8B7B74;   /* metadatos y letra chica */

  --cobre:     #A45C40;   /* copper-rust: rellenos y acciones */
  --cobre-vivo:#B96A4C;   /* el mismo, un paso más arriba: hover */
  --cobre-cl:  #FFB59A;   /* primary: cobre ya legible sobre negro */
  --cuero:     #4B3621;   /* aged-leather: fondos de estado */
  --ambar:     #FDB96B;

  /* bordes fantasma: 1px de pergamino a muy baja opacidad */
  --linea:   rgba(244,241,237,.13);
  --linea-f: rgba(244,241,237,.07);
  --linea-d: rgba(244,241,237,.26);

  /* ── tipografía ───────────────────────────────────────────────
     Caslon manda en los titulares; Hanken Grotesk se ocupa de los
     datos duros (precios, horarios, códigos). */
  --serif: 'Libre Caslon Text', 'Iowan Old Style', Constantia, Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ── espacio ────────────────────────────────────────────────── */
  --wrap: 1280px;
  --margen: 5rem;
  --stack-xl: 8rem;
  --t: 150ms cubic-bezier(.2,.6,.3,1);
}

*, *::before, *::after{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto } }

body{
  margin: 0;
  background: var(--obsidiana);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block }
figure{ margin: 0 }

/* varios contenedores de acá son flex o grid, y eso le gana al
   atributo `hidden`. Sin este `!important`, esconder no esconde. */
[hidden]{ display: none !important }
a{ color: inherit }
::selection{ background: var(--cobre); color: var(--pergamino) }

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

.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--margen) }
.wrap--angosto{ max-width: 820px }

.skip{ position: absolute; left: -9999px; background: var(--cobre); color: var(--pergamino); padding: 12px 18px; z-index: 99 }
.skip:focus{ left: 12px; top: 12px }

/* ── tipografía ──────────────────────────────────────────────── */
h1, h2, h3, h4{
  margin: 0; font-family: var(--serif); font-weight: 700;
  color: var(--pergamino); text-wrap: balance;
}
/* display-lg: 80/1.1 con interletrado ajustado, estética de afiche */
h1{ font-size: clamp(2.4rem, 6.6vw, 5rem); line-height: 1.1; letter-spacing: -.02em }
h2{ font-size: clamp(2rem, 4vw, 3rem);     line-height: 1.2;  letter-spacing: -.015em }
h3{ font-size: 1.35rem; line-height: 1.3 }
p{ margin: 0 0 1em; text-wrap: pretty }
p:last-child{ margin-bottom: 0 }

/* label-caps: el escalón de arriba de cada titular */
.rotulo{
  font-family: var(--sans);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--cobre-cl); margin: 0 0 16px;
}
.rotulo--claro{ color: var(--gris) }
.bajada{ font-size: clamp(1rem, 1.6vw, 1.125rem); color: var(--gris); max-width: 58ch }

/* El poste de barbero, hecho con un gradiente: lo único
   decorativo de la página y no pesa un byte. */
.franja{
  height: 6px;
  background: repeating-linear-gradient(115deg,
    var(--cobre) 0 11px, var(--obsidiana) 11px 22px,
    var(--pergamino) 22px 27px, var(--obsidiana) 27px 38px);
}

/* ── botones ─────────────────────────────────────────────────────
   Macizos de cobre con texto pergamino, o transparentes con un
   filete de 1px. Rectangulares siempre: acá no hay un solo radio. */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: .875rem; font-weight: 600;
  letter-spacing: .05em;
  padding: 16px 28px;
  border: 1px solid var(--cobre); border-radius: 0;
  background: var(--cobre); color: var(--pergamino);
  text-decoration: none; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.btn:hover:not(:disabled){ background: var(--cobre-vivo); border-color: var(--cobre-vivo) }
.btn:disabled{ opacity: .38; cursor: not-allowed }
.btn--bordo{ background: var(--cobre); border-color: var(--cobre) }   /* alias histórico */
.btn--linea{ background: transparent; color: var(--pergamino); border-color: var(--linea-d) }
.btn--linea:hover:not(:disabled){ background: transparent; border-color: var(--cobre-cl); color: var(--cobre-cl) }
.btn--sm{ padding: 11px 18px; font-size: .8rem }
.btn--full{ width: 100% }
.btn svg{ width: 17px; height: 17px; flex: none }

.link{ color: var(--cobre-cl); text-decoration: underline; text-underline-offset: 3px }

/* ── nav ─────────────────────────────────────────────────────────
   Pegajosa arriba, marca a la izquierda, enlaces en versalitas.
   El activo se marca con un subrayado de cobre. */
.nav{ position: sticky; top: 0; z-index: 40; background: var(--obsidiana); border-bottom: 1px solid var(--linea) }
.nav__in{ display: flex; align-items: center; gap: 26px; min-height: 76px }
.nav__marca{
  margin-right: auto; text-decoration: none;
  font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
  color: var(--pergamino); line-height: 1.15;
}
.nav__marca small{
  display: block; font-family: var(--sans); font-size: .65rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--cobre-cl); margin-top: 3px;
}
.nav__links{ display: flex; gap: 28px }
.nav__links a{
  text-decoration: none; font-size: .75rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gris);
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: border-color var(--t), color var(--t);
}
.nav__links a:hover{ color: var(--pergamino); border-color: var(--cobre) }
@media (max-width: 900px){ .nav__links{ display: none } }

/* ── hero ────────────────────────────────────────────────────── */
.hero{ position: relative; background: var(--obsidiana); overflow: hidden }
.hero__foto{ position: absolute; inset: 0 }
.hero__foto img{ width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: grayscale(1) contrast(1.08) }
.hero__foto::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13,13,13,.97) 0%, rgba(13,13,13,.9) 40%, rgba(13,13,13,.5) 100%);
}
/* `padding-block` y no el atajo `padding`: este bloque también es
   `.wrap`, y el atajo le borraba el margen lateral de la página. */
.hero__in{ position: relative; padding-block: clamp(76px, 11vw, 144px) clamp(64px, 9vw, 112px) }
.hero__in h1{ max-width: 15ch }
.hero__in .bajada{ margin-top: 24px; max-width: 48ch }
.hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px }

.hero__pie{
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px 40px;
  padding: 22px 0;
  border-top: 1px solid var(--linea);
  font-size: .875rem; color: var(--gris-cl);
}
.hero__pie b{ color: var(--pergamino); font-weight: 600 }

/* ── secciones: capas tonales, no sombras ────────────────────── */
.sec{ padding: clamp(64px, 9vw, var(--stack-xl)) 0 }
.sec--gris{ background: var(--fondo); border-block: 1px solid var(--linea-f) }
.sec--tinta{ background: var(--carbon); border-block: 1px solid var(--linea-f) }
.sec__cab{ max-width: 62ch; margin-bottom: clamp(36px, 5vw, 60px) }
.sec__cab h2{ margin-bottom: 18px }

/* ── servicios ───────────────────────────────────────────────────
   Tarjetas de carbón con filete fantasma. La foto entra en blanco
   y negro y se enciende al pasar por encima. */
.servicios{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px) }
.serv{
  background: var(--carbon);
  border: 1px solid var(--linea);
  display: flex; flex-direction: column;
  transition: border-color var(--t);
}
.serv:hover{ border-color: var(--cobre) }
.serv__f{ aspect-ratio: 4/2.6; overflow: hidden; background: var(--carbon-2) }
.serv__f img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter 320ms ease;
}
.serv:hover .serv__f img{ filter: grayscale(0) sepia(.18) }
.serv__c{ padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1 }
.serv__t{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px }
.serv__t h3{ margin: 0 }
.serv__p{ margin-left: auto; font-weight: 700; font-size: 1.1rem; color: var(--pergamino); white-space: nowrap; font-variant-numeric: tabular-nums }
.serv__d{ color: var(--gris); font-size: .94rem; margin-bottom: 18px }
.serv__m{
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linea-f);
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-cl); display: flex; align-items: center; gap: 8px;
}
.serv__m svg{ width: 15px; height: 15px; color: var(--cobre-cl) }
@media (max-width: 900px){ .servicios{ grid-template-columns: 1fr } .serv__f{ aspect-ratio: 16/7 } }

/* ── equipo ──────────────────────────────────────────────────────
   Alineado estricto a la grilla, sin centrar nada. */
.equipo{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 32px) }
.quien__f{ aspect-ratio: 7/9; overflow: hidden; background: var(--carbon-2); margin-bottom: 20px; border: 1px solid var(--linea) }
.quien__f img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  filter: grayscale(1); transition: filter 320ms ease;
}
.quien:hover .quien__f img{ filter: grayscale(0) sepia(.18) }
.quien h3{ margin-bottom: 6px }
/* La bio primero y los dos rótulos después, con `p.` adelante: si
   no, `.quien p` le gana por especificidad y los pinta a los tres
   del mismo gris. */
.quien p{ font-size: .94rem; color: var(--gris) }
p.quien__r{ font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--cobre-cl); margin-bottom: 14px }
p.quien__h{ margin-top: 16px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-cl) }
@media (max-width: 860px){ .equipo{ grid-template-columns: 1fr 1fr } }
@media (max-width: 540px){ .equipo{ grid-template-columns: 1fr; gap: 36px } .quien__f{ aspect-ratio: 4/3 } }

/* ── galería del local ───────────────────────────────────────── */
.galeria{
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(180px, 20vw, 260px);
  gap: 1px; background: var(--linea); border: 1px solid var(--linea);
}
.galeria figure{ overflow: hidden; background: var(--carbon) }
.galeria img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 320ms ease }
.galeria figure:hover img{ filter: grayscale(0) sepia(.18) }
.galeria figure:first-child{ grid-column: span 2; grid-row: span 2 }
@media (max-width: 700px){
  .galeria{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw }
  .galeria figure:first-child{ grid-column: span 2; grid-row: span 1 }
}

/* ── horarios y ubicación ────────────────────────────────────────
   Tabla de verdad: el día en negrita, el horario en el sans técnico. */
.visita{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 80px); align-items: start }
.dir{ font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; color: var(--pergamino); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 18px }
.tabla{ width: 100%; border-collapse: collapse; font-size: .96rem }
.tabla th{
  text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gris-cl); padding-bottom: 14px; border-bottom: 1px solid var(--linea-d);
}
.tabla td{ padding: 14px 0; border-bottom: 1px solid var(--linea-f) }
.tabla td:first-child{ font-weight: 700; color: var(--pergamino) }
.tabla td:last-child{ text-align: right; font-variant-numeric: tabular-nums; color: var(--gris) }
.tabla tr:last-child td{ border-bottom: 0 }
.contacto{ display: grid; gap: 14px; margin-top: 30px; font-size: .96rem }
.contacto a{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; transition: border-color var(--t), color var(--t) }
.contacto a:hover{ border-color: var(--cobre); color: var(--cobre-cl) }
.contacto svg{ width: 17px; height: 17px; color: var(--cobre-cl); flex: none }
@media (max-width: 800px){ .visita{ grid-template-columns: 1fr } }

/* ── cierre ──────────────────────────────────────────────────── */
/* Alineado a la izquierda y al mismo ancho que el resto: el sistema
   pide composiciones estructuradas, no bloques flotando en el medio.
   (Gana sobre `.wrap--angosto` por orden, no por especificidad.) */
.cierre{ max-width: var(--wrap) }
.cierre h2{ margin-bottom: 20px }
.cierre .btn{ margin-top: 34px }

/* ── pie ─────────────────────────────────────────────────────── */
.pie{ background: var(--obsidiana); border-top: 1px solid var(--linea); color: var(--gris); padding: clamp(48px, 6vw, 80px) 0 28px; font-size: .92rem }
.pie__in{ display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-end }
.pie__marca{ font-family: var(--serif); color: var(--pergamino); font-weight: 700; font-size: 1.4rem }
.pie__marca small{ display: block; font-family: var(--sans); font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--cobre-cl); margin-top: 5px }
.pie__links{ display: flex; flex-wrap: wrap; gap: 24px; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase }
.pie__links a{ text-decoration: none; color: var(--gris); transition: color var(--t) }
.pie__links a:hover{ color: var(--cobre-cl) }
.pie__bajo{ margin-top: clamp(32px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--linea-f); font-size: .8rem; color: var(--gris-cl); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between }

/* ═══════════ RESERVAR ═════════════════════════════════════════ */

.reserva{ padding: clamp(36px, 5vw, 64px) 0 clamp(64px, 8vw, 104px) }

/* pasos */
.pasos{ display: flex; gap: 0; margin-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--linea) }
.paso{
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 18px 0; margin-right: 20px;
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris-cl);
  border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px;
  background: none; cursor: default;
}
/* cuadrado, no círculo: acá no se redondea nada que no sea una cara */
.paso__n{
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  font-size: .75rem; font-weight: 700;
}
.paso[data-estado="hecho"]{ color: var(--gris); cursor: pointer }
.paso[data-estado="hecho"] .paso__n{ background: var(--carbon-3); border-color: var(--carbon-3); color: var(--pergamino) }
.paso[data-estado="actual"]{ color: var(--pergamino); border-bottom-color: var(--cobre) }
.paso[data-estado="actual"] .paso__n{ background: var(--cobre); border-color: var(--cobre); color: var(--pergamino) }
@media (max-width: 700px){
  .pasos{ overflow-x: auto; scrollbar-width: none }
  .pasos::-webkit-scrollbar{ display: none }
  .paso{ white-space: nowrap; padding-right: 14px; margin-right: 14px }
  .paso__t{ display: none }
  .paso[data-estado="actual"] .paso__t{ display: inline }
}

.panel-paso[hidden]{ display: none }
.panel-paso h2{ font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 10px }
.panel-paso > .bajada{ margin-bottom: 30px }

/* tarjetas elegibles (servicio / peluquero) */
.opciones{ display: grid; gap: 12px }
.opciones--3{ grid-template-columns: repeat(3, 1fr) }
@media (max-width: 860px){ .opciones--3{ grid-template-columns: 1fr } }

.opcion{
  display: flex; align-items: center; gap: 18px; width: 100%; text-align: left;
  padding: 18px 20px;
  background: var(--carbon); border: 1px solid var(--linea);
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.opcion:hover{ border-color: var(--linea-d) }
.opcion[aria-pressed="true"]{ border-color: var(--cobre); background: var(--carbon-2) }
/* los avatares son la única excepción redonda del sistema */
.opcion__f{ width: 52px; height: 52px; flex: none; overflow: hidden; border-radius: 50%; background: var(--carbon-2) }
.opcion__f img{ width: 100%; height: 100%; object-fit: cover }
.opcion__f--icono{ display: grid; place-items: center; background: var(--cobre); color: var(--pergamino) }
.opcion__c{ flex: 1; min-width: 0 }
.opcion__t{ font-weight: 700; color: var(--pergamino); display: block }
.opcion__d{ font-size: .875rem; color: var(--gris); display: block; margin-top: 3px }
.opcion__p{ margin-left: auto; text-align: right; flex: none }
.opcion__p b{ display: block; font-size: 1.05rem; color: var(--pergamino); font-variant-numeric: tabular-nums }
.opcion__p span{ font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-cl) }

.opcion--vert{ flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden }
.opcion--vert .opcion__f{ width: 100%; height: auto; aspect-ratio: 4/2.6; border-radius: 0 }
.opcion--vert .opcion__f img{ filter: grayscale(1); transition: filter 320ms ease }
.opcion--vert:hover .opcion__f img,
.opcion--vert[aria-pressed="true"] .opcion__f img{ filter: grayscale(0) sepia(.18) }
.opcion--vert .opcion__c{ padding: 20px 22px 0 }
.opcion--vert .opcion__p{ padding: 16px 22px 20px; margin-left: 0; text-align: left; display: flex; align-items: baseline; gap: 10px }
.opcion--vert .opcion__p b{ font-size: 1.2rem }

/* calendario: tira de días */
.dias{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin }
.dia{
  flex: none; width: 80px;
  display: grid; gap: 3px; justify-items: center;
  padding: 13px 6px 12px;
  background: var(--carbon); border: 1px solid var(--linea);
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.dia:hover:not(:disabled){ border-color: var(--linea-d) }
.dia[aria-pressed="true"]{ border-color: var(--cobre); background: var(--cobre) }
.dia:disabled{ opacity: .32; cursor: not-allowed }
.dia__s{ font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gris-cl) }
.dia__n{ font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--pergamino) }
.dia__l{ font-size: .68rem; color: var(--gris-cl) }
.dia[aria-pressed="true"] .dia__s,
.dia[aria-pressed="true"] .dia__l{ color: rgba(244,241,237,.78) }

/* grilla de horas */
.horas{ display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px }
.hora{
  padding: 14px 6px; text-align: center;
  background: var(--carbon); border: 1px solid var(--linea); color: var(--texto);
  font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: border-color var(--t), background var(--t), color var(--t);
}
.hora:hover{ border-color: var(--linea-d); color: var(--pergamino) }
.hora[aria-pressed="true"]{ background: var(--cobre); border-color: var(--cobre); color: var(--pergamino) }

.franja-titulo{
  font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gris-cl); margin: 26px 0 14px;
}
.franja-titulo:first-child{ margin-top: 0 }

/* formulario: sólo filete de abajo, etiqueta arriba en versalitas */
.campos{ display: grid; gap: 24px; grid-template-columns: 1fr 1fr }
.campo{ display: grid; gap: 8px }
.campo--full{ grid-column: 1 / -1 }
.campo label{ font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gris) }
.campo input, .campo textarea, .campo select{
  font: inherit; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--linea-d);
  background: transparent; color: var(--pergamino);
  border-radius: 0; width: 100%;
  transition: border-color var(--t);
}
.campo input::placeholder, .campo textarea::placeholder{ color: var(--gris-cl) }
.campo input:focus, .campo textarea:focus, .campo select:focus{ outline: none; border-bottom-color: var(--cobre-cl) }
.campo textarea{ min-height: 74px; resize: vertical }
.campo__ayuda{ font-size: .84rem; color: var(--gris-cl) }
@media (max-width: 660px){ .campos{ grid-template-columns: 1fr } }

/* resumen lateral */
.reserva__cols{ display: grid; grid-template-columns: 1fr 320px; gap: clamp(28px, 4vw, 64px); align-items: start }
/* Sin esto, la tira de días (que scrollea sola) estira la columna a
   su ancho completo y toda la página se va para el costado. */
.reserva__cols > *{ min-width: 0 }
@media (max-width: 980px){ .reserva__cols{ grid-template-columns: 1fr } }

.resumen{
  position: sticky; top: 96px;
  background: var(--carbon); border: 1px solid var(--linea); padding: 26px;
}
.resumen h3{ font-family: var(--sans); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--cobre-cl); margin-bottom: 20px; font-weight: 700 }
.resumen dl{ margin: 0; display: grid; gap: 0 }
.resumen dt{ font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-cl); margin-top: 16px }
.resumen dt:first-of-type{ margin-top: 0 }
.resumen dd{ margin: 4px 0 0; font-weight: 600; color: var(--pergamino) }
.resumen dd.vacio{ color: var(--gris-cl); font-weight: 400 }
.resumen__total{
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linea);
  display: flex; align-items: baseline; gap: 10px;
}
.resumen__total span{ font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-cl) }
.resumen__total b{ margin-left: auto; font-family: var(--serif); font-size: 1.5rem; color: var(--pergamino); font-variant-numeric: tabular-nums }

.acciones{ display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap }

/* confirmación */
.listo{ text-align: center; padding: clamp(20px, 4vw, 44px) 0 }
.listo__tilde{
  width: 60px; height: 60px; margin: 0 auto 26px;
  display: grid; place-items: center;
  background: var(--cobre); color: var(--pergamino);
}
.listo__tilde svg{ width: 30px; height: 30px }
.listo h2{ margin-bottom: 14px }
.codigo{
  display: inline-block; margin: 28px 0 8px;
  font-family: var(--serif); font-size: 2rem; font-weight: 700; letter-spacing: .22em;
  color: var(--pergamino);
  padding: 16px 22px 16px 30px;
  border: 1px dashed var(--cobre); background: var(--carbon);
}
.ficha{
  margin: 32px auto 0; max-width: 470px; text-align: left;
  border: 1px solid var(--linea); background: var(--carbon);
}
.ficha__f{ display: flex; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--linea-f); font-size: .94rem }
.ficha__f:last-child{ border-bottom: 0 }
.ficha__f dt{ width: 112px; flex: none; color: var(--gris-cl); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px }
.ficha__f dd{ margin: 0; font-weight: 600; color: var(--pergamino) }

/* consultar turno por código */
.buscar{ display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 22px }
.buscar input{
  font: inherit; padding: 11px 0; width: 190px;
  border: 0; border-bottom: 1px solid var(--linea-d);
  background: transparent; color: var(--pergamino);
  text-transform: uppercase; letter-spacing: .18em; font-weight: 700;
}
.buscar input::placeholder{ color: var(--gris-cl); font-weight: 400 }
.buscar input:focus{ outline: none; border-bottom-color: var(--cobre-cl) }

/* ═══════════ PANEL DEL PELUQUERO ══════════════════════════════ */
/* Ya estaba en oscuro; ahora comparte el mismo sistema que el
   resto del sitio en vez de tener su propia paleta. */

.panel{ background: var(--obsidiana); color: var(--texto); min-height: 100vh; display: flex; flex-direction: column }
.panel a{ color: inherit }
.panel .franja{ flex: none }

.panel__nav{
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 30; background: var(--obsidiana);
}
.panel__nav .wrap{ display: flex; align-items: center; gap: 16px; min-height: 72px }
/* con `.panel` adelante para ganarle a `.panel a{color:inherit}` */
.panel .panel__marca{ font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--pergamino); margin-right: auto; text-decoration: none; line-height: 1.15 }
.panel__marca small{ display: block; font-family: var(--sans); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--cobre-cl); font-weight: 700; margin-top: 3px }
.panel__yo{ display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--gris) }
.panel__yo img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover }
.panel__salir{
  background: none; border: 1px solid var(--linea-d); color: inherit;
  font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 15px; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.panel__salir:hover{ border-color: var(--cobre); color: var(--cobre-cl) }

/* ingreso */
.ingreso{ flex: 1; display: grid; place-items: center; padding: 40px var(--margen) }
.ingreso__caja{ width: 100%; max-width: 440px }
.ingreso h1{ font-size: 2.1rem; margin-bottom: 10px }
.ingreso > .ingreso__caja > p{ color: var(--gris); margin-bottom: 30px }

.quienes{ display: grid; gap: 8px; margin-bottom: 24px }
.quien-b{
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 13px 15px; font: inherit; color: inherit; cursor: pointer;
  background: var(--carbon); border: 1px solid var(--linea);
  transition: border-color var(--t), background var(--t);
}
.quien-b:hover{ border-color: var(--linea-d) }
.quien-b[aria-pressed="true"]{ border-color: var(--cobre); background: var(--carbon-2) }
.quien-b img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none }
.quien-b b{ display: block; font-weight: 700; color: var(--pergamino) }
.quien-b span{ font-size: .84rem; color: var(--gris-cl) }

.pin{ display: flex; gap: 12px; align-items: stretch }
.pin input{
  font: inherit; font-size: 1.4rem; font-weight: 700; letter-spacing: .5em;
  text-align: center; padding: 12px 0 12px 20px; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--linea-d); color: var(--pergamino);
}
.pin input:focus{ outline: none; border-bottom-color: var(--cobre-cl) }

.pista{
  margin-top: 26px; padding: 16px 18px;
  border: 1px dashed var(--linea-d); font-size: .86rem; color: var(--gris);
}
.pista b{ color: var(--cobre-cl) }

/* agenda */
.agenda{ flex: 1; padding: clamp(26px, 3.4vw, 44px) 0 80px }
.barra{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px }
/* Sin `text-transform: capitalize`: dejaría "8 De Agosto".
   La primera letra ya la pone el JS. */
.barra__fecha{ font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; margin-right: auto }
.mover{
  background: var(--carbon); border: 1px solid var(--linea); color: inherit;
  width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.mover:hover{ border-color: var(--cobre); color: var(--cobre-cl) }
.mover svg{ width: 17px; height: 17px }

.filtros{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px }
.filtro{
  background: var(--carbon); border: 1px solid var(--linea); color: var(--gris);
  font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 16px; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.filtro:hover{ border-color: var(--linea-d); color: var(--pergamino) }
.filtro[aria-pressed="true"]{ background: var(--cobre); color: var(--pergamino); border-color: var(--cobre) }

.numeros{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-bottom: 32px }
.numero{ background: var(--carbon); padding: 20px 22px }
.numero b{ display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--pergamino); font-variant-numeric: tabular-nums }
.numero span{ font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-cl) }
@media (max-width: 700px){ .numeros{ grid-template-columns: 1fr 1fr } }

.turnos{ display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea) }
.turno{
  background: var(--carbon);
  display: grid; grid-template-columns: 92px 1fr auto;
  gap: 18px; align-items: center; padding: 17px 22px;
}
.turno--cancelado{ opacity: .42 }
.turno__h{ font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--pergamino); font-variant-numeric: tabular-nums; line-height: 1.2 }
.turno__h small{ display: block; font-family: var(--sans); font-size: .72rem; font-weight: 400; color: var(--gris-cl); letter-spacing: .06em }
.turno__c{ min-width: 0 }
.turno__c b{ font-size: 1.02rem; font-weight: 700; color: var(--pergamino) }
.turno__meta{ font-size: .87rem; color: var(--gris-cl); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 16px }
.turno__meta em{ font-style: normal; color: var(--gris) }
.turno__acc{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end }

/* chips: caja de carbón con texto de color */
.chip{
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; background: var(--carbon-3); border: 1px solid transparent; white-space: nowrap;
}
.chip--reservado{ color: var(--cobre-cl) }
.chip--atendido{ color: #8FD3A8 }
.chip--cancelado{ color: #E8A79E }
.chip--ausente{ color: var(--ambar) }

.mini{
  background: none; border: 1px solid var(--linea-d); color: var(--gris);
  font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 13px; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.mini:hover{ border-color: var(--pergamino); color: var(--pergamino) }
.mini--peligro:hover{ background: var(--cobre); border-color: var(--cobre); color: var(--pergamino) }

@media (max-width: 760px){
  .turno{ grid-template-columns: 78px 1fr; row-gap: 12px }
  .turno__acc{ grid-column: 1 / -1; justify-content: flex-start }
}

/* Va acotado al panel a propósito: `.vacio` también se usa en el
   resumen de la reserva para los renglones sin elegir, y sin el
   `.panel` adelante les metía este relleno y los centraba. */
.panel .vacio{ padding: 48px 24px; text-align: center; color: var(--gris-cl); background: var(--carbon) }

/* ── varios ──────────────────────────────────────────────────── */
.cargando{ padding: 40px 0; color: var(--gris); font-size: .94rem }
.panel .cargando{ color: var(--gris) }

.error{
  border-left: 2px solid var(--cobre); background: var(--carbon);
  padding: 14px 16px; font-size: .92rem; color: var(--texto); margin: 16px 0;
}
.error[hidden]{ display: none }

.modo{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  color: var(--gris-cl); border: 1px dashed var(--linea-d);
  padding: 8px 13px; margin-top: 22px;
}
.modo b{ color: var(--cobre-cl); font-weight: 700 }

/* aparición al scrollear: la cafetería no la usa, y esa
   diferencia entre las dos demos también suma */
.reveal{ opacity: 1 }
.js .reveal{ opacity: 0; transform: translateY(14px); transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.6,.3,1) }
.js .reveal.in{ opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important }
  .js .reveal{ opacity: 1; transform: none }
}

/* chapita de demo + aviso */
/* Cobre, abajo a la izquierda; la cafetería la tiene abajo a la
   derecha, en papel y con otra forma. */
.demo{
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cobre); color: var(--pergamino);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding: 10px 14px;
  transition: background var(--t);
}
.demo:hover{ background: var(--cobre-vivo) }
.demo span{ font-weight: 600; opacity: .82 }
@media (max-width: 560px){ .demo span{ display: none } }

.aviso{
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 130%);
  z-index: 70; background: var(--carbon); color: var(--texto); padding: 14px 20px;
  font-size: .89rem; max-width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--linea); border-left: 2px solid var(--cobre);
  transition: transform 280ms cubic-bezier(.2,.6,.3,1);
}
.aviso.ver{ transform: translate(-50%, 0) }

/* ── márgenes de mobile ──────────────────────────────────────── */
@media (max-width: 700px){
  :root{ --margen: 1rem }
}