/* ═══════════════════════════════════════════════════════════════════
   Eleganz Barber Studio — identidad visual.

   Tres colores y nada mas: negro, hueso y oro champan. Los oros salen
   de muestrear el logo real, no de elegirlos a ojo.

   Tres papeles tipograficos: Cinzel (auto-alojada) para los titulos,
   la pila del sistema para el texto, y la monoespaciada del sistema
   para los DATOS —precios, horas, duraciones—. En una lista de once
   precios la monoespaciada alinea las cifras en columna sin trucos.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  --bg:        #0A0B08;   /* negro casi neutro */
  --surface:   #131410;   /* apenas separado del fondo */
  --fg:        #F2EFEA;   /* hueso */
  --muted:     #A9A498;   /* gris calido — 7,94:1 sobre --bg */
  --border:    #2A2B24;
  --accent:    #D2AA6F;   /* oro champan — marca, no se toca */
  --accent-hi: #E4C489;
  --accent-lo: #C19A63;

  --display: 'Cinzel', 'Iowan Old Style', Georgia, serif;
  --texto: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: 20px;
  --radio: 4px;
  --ancho: 58rem;   /* ancho total de la caja de contenido */
  --margen-titulo: 11rem;  /* columna del h2 en escritorio */
}

/* Cinzel es una fuente VARIABLE: un solo fichero con el eje wght de
   400 a 900. Declararla dos veces (400 y 600) haria que el navegador
   se bajase el mismo fichero dos veces. */
@font-face {
  font-family: 'Cinzel';
  src: url('/fuentes/cinzel-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;   /* el texto se lee desde el primer momento */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Sitio para la barra fija de movil: que no tape el pie. */
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
}

img { max-width: 100%; }

/* ── Caja de contenido ───────────────────────────────────────────── */
.portada,
.seccion,
footer {
  width: min(100%, var(--ancho));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Tipografia base ─────────────────────────────────────────────── */
h1, h2 {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--fg);
  margin-bottom: 1.5rem;
}

/* Encabezados de grupo de la carta: versalitas espaciadas en oro.
   NO en Cinzel: competirian con los h2. */
h3 {
  font-family: var(--texto);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  margin: 2.25rem 0 .6rem;
}
.seccion > h3:first-of-type { margin-top: 0; }

p { margin: 0 0 1rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); }

strong { font-weight: 600; color: var(--fg); }

/* Foco visible en oro en todo lo que se pueda tabular. No se quita. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Portada ─────────────────────────────────────────────────────── */
.portada {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 1.25rem;
  min-height: min(56.25vw, 33rem);
  padding-block: 3.5rem 3rem;
  position: relative;
  isolation: isolate;
}

/* Foto del local de fondo, a sangre (de borde a borde de la ventana
   aunque la caja de la portada sea mas estrecha). Muy oscurecida para
   que el logo y los botones sigan leyendose igual que sobre negro.
   Se encuadra arriba, en el techo de luces hexagonales. */
.portada::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  translate: -50% 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgb(10 11 8 / .86), rgb(10 11 8 / .80) 50%, var(--bg)),
    url("/fotos/local.jpg") center 12% / cover no-repeat;
}
main { overflow-x: clip; }

/* Se estiliza por la CAJA, no por lo que haya dentro: el SVG se
   redibuja aparte. El color y la fuente son para el texto alternativo
   si el fichero no llegase a cargar.

   OJO: un SVG cargado como imagen es un documento aparte y NO hereda
   el `color` de esta regla; el `currentColor` de logo.svg se resuelve
   con el `color` que lleva el propio fichero. El oro del logo se
   cambia alli, no aqui. */
.logo {
  display: block;
  width: clamp(160px, 46vw, 230px);
  height: auto;
  color: var(--accent);
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .12em;
}

/* El logo YA dibuja el nombre en oro, trazado, en la misma serif con la
   que esta hecho. Repetirlo debajo en Cinzel seria escribir la marca
   dos veces en cuatro centimetros. El h1 sigue ahi para los lectores
   de pantalla y para el buscador. */
h1 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sitio {
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--muted);
}

.valoracion {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
}
.valoracion span { color: var(--accent); margin-right: .15em; }
.valoracion strong { font-family: var(--mono); font-size: .95em; }
.valoracion a {
  color: var(--muted);
  text-decoration-color: var(--accent-lo);
  text-underline-offset: 3px;
}
.valoracion a:hover { color: var(--fg); }

.acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin: .5rem 0 0;
  max-width: none;
}

/* ── Botones ─────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: .7rem 1.4rem;
  border: 1px solid var(--accent-lo);
  border-radius: var(--radio);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.boton:hover { color: var(--accent-hi); border-color: var(--accent); }

.boton.principal {
  background: var(--accent);      /* plano: ni un degradado */
  border-color: var(--accent);
  color: var(--bg);               /* 9,13:1 */
}
.boton.principal:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--bg);
}

/* ── El cartel de la puerta ──────────────────────────────────────────
   Lo unico memorable de la pagina, y lo unico que se mueve. Es un dato
   real calculado con el horario de verdad, no un adorno.
   Sin JavaScript el parrafo esta vacio: no debe dejar ni marco ni
   hueco. Colapsa a nada. ─────────────────────────────────────────── */
.estado:empty { display: none; }

.estado {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: .35rem 0 0;
  max-width: 100%;
  padding: .55rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--surface);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  text-align: left;
  text-wrap: balance;
}

.estado::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.estado.abierto {
  border-color: var(--accent);
  color: var(--fg);
}
.estado.abierto::before {
  background: var(--accent);
  animation: latido 2.6s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* ── Secciones ───────────────────────────────────────────────────── */
.seccion {
  padding-block: 3.25rem;
  border-top: 1px solid var(--border);
}

/* ── La carta de precios ─────────────────────────────────────────────
   La pizarra de la pared, no una cuadricula de tarjetas: nombre a la
   izquierda, guia de puntos, precio a la derecha en monoespaciada.
   La guia se dibuja con un pseudoelemento de ancho 100 % y margen
   derecho de -100 %: asi no ocupa sitio en la linea (nunca provoca un
   salto) y el recorte de .que la corta justo donde acaba la columna.
   Con eso la guia sigue al nombre aunque parta en dos lineas. ────── */
.precios {
  list-style: none;
  margin: 0;
  padding: 0;
}

.precios li {
  --fila: .45rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: last baseline;
  column-gap: .75rem;
  padding-block: var(--fila);
}

.que {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;          /* recorta la guia al final de la columna */
  color: var(--fg);
}
.que::after {
  content: "";
  display: inline-block;
  width: 100%;
  margin-left: .5em;
  margin-right: -100%;       /* no cuenta para el ancho de la linea */
  border-bottom: 1px dotted var(--border);
  /* --border a secas se pierde sobre el negro (1,4:1) y la guia deja de
     hacer su trabajo. Esto es el mismo gris de la marca rebajado sobre
     el fondo, no un color nuevo. */
  border-bottom-color: color-mix(in srgb, var(--muted) 42%, var(--bg));
  vertical-align: .16em;
}

.cuanto {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  text-align: right;         /* los simbolos de euro a plomo */
  white-space: nowrap;
  color: var(--fg);
}

/* La duracion cuelga del nombre, en la segunda linea. */
.dura {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--muted);
}

/* La promocion vive dentro de .que en el HTML, pero pertenece a la
   segunda linea y habla del precio, no del nombre: se saca de la caja
   del nombre —si no, descoloca la guia de puntos— y se alinea a la
   derecha, debajo de la cifra. */
.promo {
  position: absolute;
  right: 0;
  bottom: var(--fila);       /* la caja del li incluye su relleno */
  max-width: 66%;
  font-style: normal;
  font-size: .68rem;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .11em;
  text-align: right;
  color: var(--accent);
}

.extra {
  margin-top: 2rem;
  color: var(--muted);
  font-size: .92rem;
}

.enlace-mas {
  display: inline-block;
  min-height: 44px;
  padding-block: .7rem;
  color: var(--accent);
  font-size: .88rem;
  text-decoration-color: var(--accent-lo);
  text-underline-offset: 4px;
}
.enlace-mas:hover { color: var(--accent-hi); }

/* Tira de trabajos: la proporcion ya esta reservada, asi que el dia
   que lleguen las fotos entran sin mover nada. */
.trabajos {
  list-style: none;
  display: grid;
  /* Cuatro fotos: 2 × 2 en movil, 4 en fila en escritorio. Nunca 3 + 1. */
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin: 2rem 0 0;
  padding: 0;
}
.trabajos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
}

/* ── El estudio ──────────────────────────────────────────────────── */
.barbero { color: var(--muted); }

/* Retrato del barbero: 1:1 reservado. */
.retrato {
  display: block;
  width: min(100%, 260px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radio);
  margin-block: 1.5rem;
}

/* Siete comodidades, solo texto con una rayita de oro delante: ni
   emojis ni iconos de libreria. */
.comodidades {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .4rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  font-size: .85rem;
  color: var(--muted);
}
.comodidades li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.comodidades li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 1px;
  background: var(--accent);
  translate: 0 -.3em;
}

/* ── Horario ─────────────────────────────────────────────────────── */
.horario {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.5rem;
  font-size: .9rem;
}
.horario th {
  text-align: left;
  font-weight: 400;
  color: var(--fg);
}
.horario td {
  width: 8.5rem;             /* las dos columnas de tramos, a plomo */
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.horario th,
.horario td {
  padding: .5rem .25rem;
  border-bottom: 1px solid var(--border);
}
.horario tr:last-child th,
.horario tr:last-child td { border-bottom: 0; }

/* El dia de hoy, marcado por app.js. */
.horario .hoy th { color: var(--accent); font-weight: 600; }
.horario .hoy td { color: var(--fg); }
.horario .hoy th,
.horario .hoy td { background: var(--surface); }
.horario .hoy th { box-shadow: inset 2px 0 0 var(--accent); padding-left: .75rem; }

address {
  font-style: normal;
  margin-bottom: 1.25rem;
  color: var(--fg);
}

/* Mapa estatico de OpenStreetMap, en los colores de la web. */
.mapa { margin: 0 0 1.25rem; max-width: 32rem; }
.mapa figcaption { font-size: .72rem; color: var(--muted); margin-top: .4rem; }
.mapa figcaption a { color: var(--muted); }
#horario a img {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  color: var(--muted);
  font-size: .85rem;
}

/* El boton y su coletilla en la misma linea, alineados por el centro:
   como parrafo suelto el boton bailaba sobre la linea base. */
#horario p:last-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .7rem;
  max-width: none;
  color: var(--muted);
  font-size: .9rem;
}

/* ── Contacto ────────────────────────────────────────────────────── */
.contacto {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.75rem;
  margin: 0;
  padding: 0;
}
.contacto a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--fg);
  font-size: .95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color .15s ease, border-color .15s ease;
}
.contacto a:hover {
  color: var(--accent-hi);
  border-color: var(--accent);
}
.contacto li:first-child a { font-family: var(--mono); }

/* ── Pie ─────────────────────────────────────────────────────────── */
footer {
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--border);
}
footer p {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.6;
}

/* ── Barra fija de movil ─────────────────────────────────────────────
   Sin el padding de la zona segura, en iPhone se la come la barra de
   gestos. Aparece con una transicion corta; no hay nada mas que se
   mueva al hacer scroll. ─────────────────────────────────────────── */
.barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: flex;
  gap: .6rem;
  padding: .6rem var(--gutter);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  transition: opacity .22s ease, translate .22s ease,
              display .22s allow-discrete;
}
.barra .boton {
  flex: 1;
  min-height: 46px;
  padding-inline: .5rem;
}
.barra[hidden] {
  display: flex;          /* pisa el display:none del navegador para
                             poder animar la salida */
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .22s ease, translate .22s ease,
              visibility 0s linear .22s;
}
@starting-style {
  .barra:not([hidden]) { opacity: 0; translate: 0 8px; }
}

/* ── Escritorio ──────────────────────────────────────────────────────
   El h2 se va al margen izquierdo y el contenido corre en su columna:
   el ritmo de una carta impresa, no el de una plantilla centrada. ── */
@media (min-width: 56rem) {
  .trabajos { grid-template-columns: repeat(4, 1fr); }

  .seccion {
    display: grid;
    grid-template-columns: var(--margen-titulo) minmax(0, 1fr);
    column-gap: 3rem;
    padding-block: 4.5rem;
  }
  .seccion > * { grid-column: 2; }
  .seccion > h2 {
    grid-column: 1;
    font-size: 1.5rem;
    margin-bottom: 0;
    text-align: right;
    text-wrap: pretty;
  }
  .seccion > h3:first-of-type { margin-top: .1rem; }

  .portada { padding-block: 5rem 4rem; gap: 1.5rem; }

  /* La barra fija es cosa del movil: en escritorio los botones de la
     portada estan a un golpe de rueda. */
  .barra,
  .barra[hidden] { display: none; }
  body { padding-bottom: 0; }
}

/* ── Reduccion de movimiento ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}