/* ==========================================================================
   Barbería Reyes — Hoja de estilos
   Sin framework. Todo propio.

   Dirección de arte: "letrero y navaja".
   El sitio no es una columna centrada con secciones apiladas: son bandas a
   sangre completa que alternan color, con una rejilla de doce columnas donde
   el contenido se coloca a propósito fuera del centro. Entre banda y banda
   corre la franja diagonal del poste de barbero.

   Dos recursos tipográficos cargan el peso: los numerales fantasma que van
   detrás de cada título, y las guías punteadas de la lista de precios, como
   en el pizarrón de toda la vida.

   Deliberadamente NO hay: tarjetas con sombra, rejillas auto-fill, píldoras
   de rótulo, iconos en caja, configuradores ni acordeones.

   Tipografía: Bodoni Moda (títulos y cifras) · Barlow (texto)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Base: el sitio es oscuro --- */
  --carbon:  #121418;
  --humo:    #1A1D23;
  --humo-2:  #22262E;
  --niebla:  #333842;
  --hueso:   #E8E4DB;
  --acero:   #9BA2AE;
  --acero-2: #6E7684;

  /* --- Latón: el acento. 7.7:1 sobre carbón, así que sirve para texto. --- */
  --laton:      #C9A227;
  --laton-2:    #E0BC4A;
  --laton-tenue:rgba(201, 162, 39, 0.12);

  /* --- Vino: la franja del poste y lo urgente --- */
  --vino:    #9B2D38;
  --vino-2:  #C2434F;

  /* --- Sobre fondo claro (la banda de hueso) --- */
  --tinta:     #16181D;
  --tinta-2:   #4A5059;
  --laton-osc: #7A6110;   /* 5.4:1 sobre hueso: el latón claro no alcanza */
  --vino-osc:  #7E2029;

  /* --- Tipos --- */
  --f-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --f-texto:   'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Escala --- */
  --t-gigante: clamp(3.2rem, 9vw, 8rem);
  --t-xxl:     clamp(2.2rem, 5vw, 4rem);
  --t-xl:      clamp(1.5rem, 2.4vw, 2.1rem);
  --t-lg:      1.25rem;
  --t-base:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-xxs:     0.7rem;

  /* --- Ritmo --- */
  --banda: clamp(4rem, 8vw, 8rem);
  --hueco: clamp(1rem, 2vw, 2rem);

  --rapido: 140ms;
  --normal: 260ms;
  --curva:  cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--hueso);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--laton); text-underline-offset: 3px; }
a:hover { color: var(--laton-2); }

img, svg { display: block; max-width: 100%; }

:where(a, button, [tabindex], input, select, textarea, label):focus-visible {
  outline: 2px solid var(--laton);
  outline-offset: 3px;
}

.salto {
  position: absolute; left: 1rem; top: -5rem; z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--laton); color: var(--carbon);
  font-weight: 600; text-decoration: none;
  transition: top var(--rapido) var(--curva);
}
.salto:focus { top: 0; color: var(--carbon); }

.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. BANDAS Y REJILLA ASIMÉTRICA
   -------------------------------------------------------------------------- */
.banda { padding-block: var(--banda); }
.banda--humo  { background: var(--humo); }
.banda--hueso { background: var(--hueso); color: var(--tinta); }
.banda--hueso h1, .banda--hueso h2, .banda--hueso h3 { color: var(--tinta); }
.banda--hueso a { color: var(--laton-osc); }
.banda--hueso a:hover { color: var(--vino-osc); }
.banda--vino  { background: var(--vino); color: #F6EDEE; }
.banda--vino h2, .banda--vino h3 { color: #FFF; }
.banda--laton { background: var(--laton); color: var(--carbon); }
.banda--laton h2, .banda--laton h3 { color: var(--carbon); }
.banda--laton a { color: var(--carbon); }

/* La franja del poste: separa banda de banda */
.poste {
  height: 13px;
  background: repeating-linear-gradient(
    115deg,
    var(--vino) 0 13px,
    var(--hueso) 13px 26px,
    var(--acero-2) 26px 39px,
    var(--hueso) 39px 52px
  );
}

.reja {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hueco);
  width: min(100% - 2.5rem, 84rem);
  margin-inline: auto;
}
/* Colocaciones a propósito descentradas */
.c-1-7   { grid-column: 1 / 8; }
.c-1-6   { grid-column: 1 / 7; }
.c-2-8   { grid-column: 2 / 9; }
.c-2-9   { grid-column: 2 / 10; }
.c-3-11  { grid-column: 3 / 11; }
.c-5-13  { grid-column: 5 / 13; }
.c-7-13  { grid-column: 7 / 13; }
.c-8-13  { grid-column: 8 / 13; }
.c-full  { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   4. TÍTULOS CON NUMERAL FANTASMA
   -------------------------------------------------------------------------- */
.titulo-banda { position: relative; margin-bottom: 2.5rem; }
.titulo-banda > * { position: relative; z-index: 1; }
.titulo-banda h1, .titulo-banda h2 { font-size: var(--t-xxl); margin: 0 0 0.4rem; }
.fantasma {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-52%);
  z-index: 0;
  font-family: var(--f-display);
  font-size: clamp(6rem, 15vw, 15rem);
  font-weight: 700;
  line-height: 0.75;
  letter-spacing: -0.05em;
  color: currentColor;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

.rotulo-linea {
  display: block;
  margin-bottom: 0.9rem;
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--laton);
}
.banda--hueso .rotulo-linea { color: var(--laton-osc); }
.banda--vino .rotulo-linea,
.banda--laton .rotulo-linea { color: inherit; opacity: 0.7; }

.entrada { font-size: var(--t-lg); color: var(--acero); max-width: 52ch; }
.banda--hueso .entrada { color: var(--tinta-2); }
.banda--vino .entrada { color: rgba(255, 255, 255, 0.85); }
.banda--laton .entrada { color: rgba(18, 20, 24, 0.78); }

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.7rem 1.6rem;
  border: 2px solid transparent;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva);
}
.btn--laton { background: var(--laton); color: var(--carbon); }
.btn--laton:hover { background: var(--laton-2); color: var(--carbon); }
.btn--linea { background: transparent; color: var(--hueso); border-color: var(--niebla); }
.btn--linea:hover { background: var(--humo-2); color: var(--hueso); border-color: var(--laton); }
.btn--oscuro { background: var(--carbon); color: var(--hueso); }
.btn--oscuro:hover { background: var(--humo-2); color: var(--hueso); }
.banda--hueso .btn--linea { color: var(--tinta); border-color: #C8C1B2; }
.banda--hueso .btn--linea:hover { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }
.btn--sm { min-height: 40px; padding: 0.4rem 1rem; }
.btn--ancho { width: 100%; }

/* --------------------------------------------------------------------------
   6. CINTA Y CABECERA
   -------------------------------------------------------------------------- */
.cinta {
  background: var(--humo);
  border-bottom: 1px solid var(--niebla);
  font-size: var(--t-xs);
  color: var(--acero);
}
.cinta__caja {
  width: min(100% - 2.5rem, 84rem); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.75rem;
  padding-block: 0.5rem;
}
.cinta a { color: var(--hueso); text-decoration: none; }
.cinta a:hover { color: var(--laton); }
.cinta .cita { margin-left: auto; color: var(--laton); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-xxs); }

#estado::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; margin-right: 0.45rem; vertical-align: 0.08em;
  border-radius: 50%; background: var(--acero-2);
}
#estado.abierta::before { background: var(--laton); box-shadow: 0 0 0 3px var(--laton-tenue); }

.cabecera {
  position: sticky; top: 0; z-index: 90;
  background: rgba(18, 20, 24, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--niebla);
}
.cabecera__caja {
  width: min(100% - 2.5rem, 84rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem; padding-block: 0.85rem;
}

.marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.marca svg { width: 34px; height: 34px; }
.marca__texto { line-height: 1; }
.marca__nombre {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.45rem; letter-spacing: 0.02em; color: var(--hueso);
}
.marca__tipo {
  display: block; font-size: 0.58rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--acero-2); margin-top: 0.15rem;
}

.nav { display: flex; gap: 1.6rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav a {
  display: block; padding-block: 0.25rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acero); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--hueso); }
.nav a[aria-current="page"] { color: var(--laton); border-bottom-color: var(--laton); }

.btn-menu {
  display: none; width: 44px; height: 44px; margin-left: auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--niebla); cursor: pointer;
}
.btn-menu span { display: block; width: 18px; height: 1.5px; background: var(--hueso); }

.menu-movil {
  display: grid;
  width: min(100% - 2.5rem, 84rem); margin-inline: auto;
  border-top: 1px solid var(--niebla);
}
.menu-movil[hidden] { display: none; }
.menu-movil a {
  padding: 0.9rem 0; border-bottom: 1px solid var(--niebla);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hueso); text-decoration: none;
}
.menu-movil a[aria-current="page"] { color: var(--laton); }

/* --------------------------------------------------------------------------
   7. PORTADA
   -------------------------------------------------------------------------- */
.portada { padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
.portada h1 {
  font-size: var(--t-gigante);
  margin-bottom: 1.2rem;
}
.portada h1 em { font-style: italic; color: var(--laton); }
.portada .entrada { margin-bottom: 2rem; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Columna de datos sueltos, alineada a la derecha de la rejilla */
.ficha-rapida { margin: 0; border-top: 1px solid var(--niebla); }
.ficha-rapida > div {
  display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem;
  padding-block: 0.85rem; border-bottom: 1px solid var(--niebla);
}
.ficha-rapida dt { font-size: var(--t-xxs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acero-2); }
.ficha-rapida dd {
  grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center;
  font-family: var(--f-display); font-size: 1.45rem; font-weight: 700;
  color: var(--laton); font-variant-numeric: tabular-nums;
}
.ficha-rapida__pie { grid-column: 1; font-size: var(--t-xs); color: var(--acero); }

/* --------------------------------------------------------------------------
   8. LISTA DE PRECIOS CON GUÍA PUNTEADA
   -------------------------------------------------------------------------- */
.precios { list-style: none; margin: 0; padding: 0; }
.precios > li { padding-block: 1.1rem; border-bottom: 1px solid var(--niebla); }
.banda--hueso .precios > li { border-bottom-color: #D4CDBE; }

.precio-fila { display: flex; align-items: baseline; gap: 0.75rem; }
.precio-fila__nombre {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}
.precio-fila__guia {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--niebla);
  transform: translateY(-0.35em);
}
.banda--hueso .precio-fila__guia { border-bottom-color: #BDB5A4; }
.precio-fila__precio {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  color: var(--laton); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.banda--hueso .precio-fila__precio { color: var(--vino-osc); }

.precio-pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem;
  margin-top: 0.35rem;
}
.precio-pie p { margin: 0; font-size: var(--t-sm); color: var(--acero); max-width: 56ch; }
.banda--hueso .precio-pie p { color: var(--tinta-2); }
.precio-pie .duracion {
  font-size: var(--t-xxs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acero-2); white-space: nowrap;
}
.banda--hueso .precio-pie .duracion { color: #6E675A; }

/* --------------------------------------------------------------------------
   9. BARBEROS: bandas, no tarjetas
   -------------------------------------------------------------------------- */
.barbero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hueco);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--niebla);
}
.banda--hueso .barbero { border-bottom-color: #D4CDBE; }
.barbero:last-of-type { border-bottom: 0; }

.barbero__num {
  grid-column: 1 / 2;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.5rem; color: var(--laton); line-height: 1;
  padding-top: 0.35rem;
}
.banda--hueso .barbero__num { color: var(--laton-osc); }
.barbero__principal { grid-column: 2 / 8; }
.barbero__lado { grid-column: 9 / 13; }

.barbero__nombre { font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 0 0 0.2rem; }
.barbero__oficio {
  margin: 0 0 1rem;
  font-size: var(--t-xxs); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--laton);
}
.banda--hueso .barbero__oficio { color: var(--laton-osc); }
.barbero__bio { margin: 0 0 1.25rem; color: var(--acero); max-width: 50ch; }
.banda--hueso .barbero__bio { color: var(--tinta-2); }

.barbero__datos { margin: 0 0 1.25rem; display: grid; gap: 0.5rem; }
.barbero__datos > div { display: grid; grid-template-columns: 7rem 1fr; gap: 0.75rem; }
.barbero__datos dt { font-size: var(--t-xxs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acero-2); }
.barbero__datos dd { margin: 0; font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   10. BLOQUES DE TEXTO Y REGLAS DE LA CASA
   -------------------------------------------------------------------------- */
.texto-largo p { color: var(--acero); max-width: 62ch; }
.banda--hueso .texto-largo p { color: var(--tinta-2); }
.texto-largo p:first-of-type { font-size: var(--t-lg); color: var(--hueso); }
.banda--hueso .texto-largo p:first-of-type { color: var(--tinta); }

.reglas { list-style: none; margin: 0; padding: 0; counter-reset: regla; }
.reglas li {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem;
  padding-block: 1rem; border-top: 1px solid var(--niebla);
}
.banda--hueso .reglas li { border-top-color: #D4CDBE; }
.reglas li::before {
  counter-increment: regla;
  content: counter(regla, decimal-leading-zero);
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.2rem; color: var(--laton); line-height: 1.4;
}
.banda--hueso .reglas li::before { color: var(--laton-osc); }
.reglas h3 { font-size: var(--t-lg); margin: 0 0 0.2rem; }
.reglas p { margin: 0; font-size: var(--t-sm); color: var(--acero); }
.banda--hueso .reglas p { color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   11. HOJA DE CITA
   -------------------------------------------------------------------------- */
.hoja {
  background: var(--humo);
  border: 1px solid var(--niebla);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.banda--hueso .hoja { background: #F4F0E8; border-color: #D4CDBE; }

.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block; margin-bottom: 0.35rem;
  font-size: var(--t-xxs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--acero-2);
}
.banda--hueso .campo label { color: #6E675A; }
.campo .req { color: var(--vino-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px;
  padding: 0.6rem 0.85rem;
  background: var(--carbon);
  border: 1px solid var(--niebla);
  color: var(--hueso);
  font-family: var(--f-texto); font-size: var(--t-sm);
}
.banda--hueso .campo input, .banda--hueso .campo select, .banda--hueso .campo textarea {
  background: #FFF; border-color: #C8C1B2; color: var(--tinta);
}
.campo textarea { min-height: 6.5rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--laton);
  box-shadow: inset 0 0 0 1px var(--laton);
}
.campo [aria-invalid="true"] { border-color: var(--vino-2); box-shadow: inset 0 0 0 1px var(--vino-2); }
.campo .ayuda { margin: 0.3rem 0 0; font-size: var(--t-xs); color: var(--acero-2); }
.campo .error { margin: 0.3rem 0 0; font-size: var(--t-xs); color: var(--vino-2); font-weight: 600; }
.pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }

/* --------------------------------------------------------------------------
   12. PIE
   -------------------------------------------------------------------------- */
.pie-sitio { background: var(--humo); padding-block: var(--banda) 1.5rem; }
.pie-sitio h3 {
  font-family: var(--f-texto); font-size: var(--t-xxs); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--acero-2);
  margin-bottom: 1rem;
}
.pie-sitio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: var(--t-sm); }
.pie-sitio a { color: var(--hueso); text-decoration: none; }
.pie-sitio a:hover { color: var(--laton); }
.pie-sitio__legal {
  grid-column: 1 / -1;
  margin-top: var(--banda); padding-top: 1.25rem;
  border-top: 1px solid var(--niebla);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem;
  font-size: var(--t-xs); color: var(--acero-2);
}

/* --------------------------------------------------------------------------
   13. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .c-1-7, .c-1-6, .c-2-8, .c-2-9, .c-3-11, .c-5-13, .c-7-13, .c-8-13 { grid-column: 1 / -1; }
  .barbero { grid-template-columns: 2.5rem 1fr; }
  .barbero__num { grid-column: 1 / 2; }
  .barbero__principal, .barbero__lado { grid-column: 2 / -1; }
  .barbero__lado { margin-top: 1rem; }
}

@media (max-width: 767.98px) {
  .nav { display: none; }
  .btn-menu { display: flex; }
  .cabecera .acciones { display: none; }
  .cinta .cita { margin-left: 0; }
  .pareja { grid-template-columns: 1fr; }
  .fantasma { font-size: 7rem; opacity: 0.05; }
  .precio-fila { flex-wrap: wrap; }
  .precio-fila__guia { min-width: 2rem; }
}

/* --------------------------------------------------------------------------
   14. PREFERENCIAS DEL SISTEMA E IMPRESIÓN
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (prefers-contrast: more) {
  :root { --acero: #C2C8D2; --acero-2: #A6ADB8; --niebla: #5A616D; }
}

@media print {
  .cinta, .cabecera, .menu-movil, .btn, .poste, .hoja { display: none !important; }
  body { background: #FFF; color: #000; }
  .banda, .banda--humo, .banda--vino, .banda--laton { background: #FFF !important; color: #000 !important; }
  .fantasma { display: none; }
  .barbero, .precios > li { break-inside: avoid; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

.solo-ancho { display: none; }
@media (min-width: 900px) { .solo-ancho { display: inline; } }