/* ==========================================================================
   Capitán — Restaurant Parrilla
   Tema claro: crema de papel, tinta marrón, acentos arena.
   ========================================================================== */

@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/GlacialIndifference-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/GlacialIndifference-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Superficies */
  --fondo:       #f7f2e8;
  --fondo-2:     #f1e9da;
  --fondo-3:     #e9dfcc;
  --borde:       #d8c9ae;

  /* Tinta. Todos los valores estan elegidos para superar 4.5:1 sobre --fondo:
     sobre crema, los tonos arena claros se vuelven ilegibles. */
  --texto:       #2e2419;
  --texto-medio: #5a4a38;
  --texto-suave: #7d6b53;

  /* Marca */
  --marron:      #5a2f19;   /* el marrón exacto del logo */
  --arena:       #8b5e34;   /* bordes y letras de los botones */
  --arena-fuerte:#6f4826;
  --laton:       #8a6212;   /* acentos y estado abierto */

  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 36px;
  --s6: 56px;
  --s7: 88px;
  --s8: 132px;

  --display: "Glacial Indifference", Jost, Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  --body: "Source Sans 3", "Segoe UI", Roboto, system-ui, sans-serif;

  --measure: 1180px;
}

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

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

[id] { scroll-margin-top: var(--s5); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

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

a { color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  z-index: 40;
  background: var(--marron);
  color: var(--fondo);
  padding: var(--s2) var(--s4);
}

.skip:focus { left: var(--s2); }

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

/* --------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* En pantallas anchas y bajas (desktop) el recorte vertical centrado caía
   justo en la parte más abstracta de las rejas, donde ya no se lee como
   una parrilla. Subir el ancla al 15% muestra la zona donde la cadena
   cruza las rejas con hueco visible entre barrotes, que es lo que de
   verdad se identifica como parrilla. En mobile el recorte es horizontal
   (la imagen es más angosta que alta), así que este valor no mueve nada
   ahí: sigue viéndose igual que siempre. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  filter: grayscale(1) contrast(1.05);
}

/* La foto es fría y oscura y el nombre va en claro encima: este velo compra
   el contraste que la tipografía necesita para leerse siempre. */
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 20, 12, 0.52) 0%, rgba(28, 20, 12, 0.30) 45%, rgba(28, 20, 12, 0.72) 100%);
}

.hero__inner {
  position: relative;
  text-align: center;
  padding: var(--s4);
}

.hero__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 15vw, 8.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  padding-left: 0.06em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.hero__kicker {
  font-family: var(--display);
  font-size: clamp(0.8rem, 3.2vw, 1.05rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #f0e6d6;
  margin: var(--s3) 0 0;
  padding-left: 0.42em;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s4);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #fff;
  opacity: 0.85;
  /* El centrado vive acá y no sólo en la animación: con el movimiento
     desactivado la animación no corre y la flecha igual queda centrada. */
  transform: translateX(-50%);
  transition: opacity 0.15s ease;
  animation: bajar 2.6s ease-in-out infinite;
}

.hero__scroll:hover,
.hero__scroll:focus-visible { opacity: 1; }

@keyframes bajar {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* -------------------------------------------------------------- Shared --- */

section { padding-inline: var(--s4); }

.titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marron);
  text-align: center;
  margin: 0 auto var(--s5);
  padding-left: 0.2em;
}

/* Un solo botón para todo el sitio: cuadrado, fondo igual al de la página,
   borde y letra en arena, sin negrita. */
.btn {
  display: inline-grid;
  place-items: center;
  min-height: 56px;
  padding: var(--s3) var(--s6);
  padding-left: calc(var(--s6) + 0.14em);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, 4vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--arena);
  background: var(--fondo);
  border: 1px solid var(--arena);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  color: var(--fondo);
  background: var(--arena);
  border-color: var(--arena);
}

/* -------------------------------------------------------------- Acciones --- */

.acciones {
  padding-block: var(--s7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}

.acciones .btn { width: min(340px, 100%); }

/* ------------------------------------------------------------- Resenas --- */

.resenas {
  padding-block: var(--s6) var(--s7);
  text-align: center;
  border-top: 1px solid var(--borde);
  display: grid;
  justify-items: center;
}

.resenas__panel {
  display: grid;
  gap: var(--s5);
  max-width: 760px;
  width: 100%;
  align-items: center;
  margin-bottom: var(--s5);
}

.resenas__nota {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 13vw, 4.5rem);
  line-height: 1;
  margin: 0;
  color: var(--laton);
}

/* Dos filas de glifos superpuestas: la llena se recorta al puntaje, y eso da
   una estrella parcial real sin necesidad de una imagen. */
.estrellas {
  position: relative;
  display: inline-block;
  margin: var(--s2) 0 0;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.estrellas__base { color: var(--borde); }

.estrellas__llenas {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: var(--laton);
}

.resenas__conteo {
  margin: var(--s3) 0 0;
  color: var(--texto-medio);
}

.resenas__conteo strong {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--texto);
}

.barras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.barras li {
  display: grid;
  grid-template-columns: 1em 1fr;
  align-items: center;
  gap: var(--s2);
}

.barras__n {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--texto-suave);
  text-align: right;
}

.barras__pista {
  height: 10px;
  border-radius: 999px;
  background: var(--fondo-3);
  overflow: hidden;
}

.barras__valor {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--laton);
}

/* --------------------------------------------------------------- Visor --- */

/* Ocupa la pantalla y se recorre de arriba abajo: las dos hojas primero, el
   pedido al final. Mismo gesto que abre el pedido online. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
}

.visor[hidden] { display: none; }

/* La barra queda fija arriba: la salida tiene que estar siempre a la vista,
   no al final de un documento largo. */
.visor__barra {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
}

.visor__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marron);
  margin: 0;
  padding-left: 0.2em;
}

.visor__cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--marron);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.visor__cerrar:hover,
.visor__cerrar:focus-visible { border-color: var(--arena); }

.visor__cuerpo {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s4) var(--s3) var(--s7);
}

.visor__hojas {
  display: grid;
  gap: 0;
  max-width: var(--measure);
  margin: 0 auto;
  border: 1px solid var(--borde);
  background: #fff;
  padding: var(--s2);
}

.visor__hojas img { width: 100%; display: block; }

/* Zoom propio. La hoja se muestra a ~1180px pero el original tiene 3600px:
   hay tres veces mas detalle del que se ve. El zoom del navegador no sirve
   porque agranda la copia chica que ya bajo; este lo maneja el JS y ademas
   pide la version grande recien cuando hace falta.
   El recorte vive en el contenedor, no en la imagen: asi la hoja agrandada
   no se derrama sobre la de al lado. */
.visor__hojas { overflow: hidden; }

.visor__hojas img.zoom {
  transform-origin: 0 0;
  cursor: zoom-in;
  /* El navegador no debe secuestrar el gesto: el arrastre y el pellizco los
     maneja el JS. Con la hoja sin agrandar vuelve a "auto" desde el script,
     para no romper el scroll normal del visor. */
  touch-action: auto;
  /* Sin transicion por defecto, a proposito. La rueda del mouse y el
     pellizco mandan muchos eventos seguidos: si cada uno arrancara una
     animacion de 0.18s, la imagen quedaria persiguiendo al mouse con
     retraso en vez de responder al toque. */
}

/* La animacion se enciende solo para el clic, que es un salto de una
   escala a otra y ahi si conviene que se vea suave. */
.visor__hojas img.zoom.is-suave { transition: transform 0.18s ease; }

.visor__hojas img.zoom.is-zoom {
  cursor: grab;
  touch-action: none;
}

.visor__hojas img.zoom.is-arrastrando { cursor: grabbing; }

.visor__ayuda {
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  text-align: center;
  margin: var(--s3) 0 0;
}

.visor__pie {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* --------------------------------------------------------------- Marca --- */

.marca {
  padding-block: var(--s7);
  text-align: center;
  border-top: 1px solid var(--borde);
}

.marca__logo {
  width: min(320px, 76vw);
  height: auto;
  margin: 0 auto;
}

.marca__frase {
  font-family: var(--display);
  font-size: clamp(0.85rem, 3.4vw, 1.05rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--arena);
  margin: var(--s4) 0 0;
  padding-left: 0.28em;
}

/* ------------------------------------------------------------- Horario --- */

.horario {
  padding-block: var(--s6) var(--s7);
  text-align: center;
}

.horario__dias {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, 4vw, 1.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marron);
  margin: 0 0 var(--s4);
  padding-left: 0.16em;
}

/* Los dos turnos leen como un solo rango: si se parten en dos renglones
   parecen dos datos distintos. Por eso no envuelven nunca, y el tamano baja
   en pantallas angostas hasta que la linea entra entera. */
/* NO agregar text-stroke ni text-shadow aca. Se probaron cuatro variantes
   para "igualar el grosor" con el titulo (stroke 0.6/1/1.5px y shadow
   0.6px) y todas se veian peor: el cliente comparo las seis opciones lado
   a lado y eligio esta, sin ningun efecto. El mismo font-weight 400 y el
   mismo color que .horario__dias alcanzan; lo demas era ruido. */
.horario__turnos {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 4.8vw, 1.9rem);
  letter-spacing: 0.02em;
  color: var(--marron);
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 4.5vw, var(--s5));
}

.horario__turnos > span { white-space: nowrap; }

.horario__sep {
  width: 1px;
  height: 1.4em;
  background: var(--borde);
}

/* -------------------------------------------------------------- Estado --- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: var(--s4) 0 0;
  color: var(--marron);
}

.estado__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Latón sobre crema, no el verde de sistema. Sin parpadeo. */
.estado.is-abierto { color: var(--marron); }

.estado.is-abierto .estado__punto {
  box-shadow: 0 0 0 3px rgba(90, 47, 25, 0.14);
}

/* Cerrado no merece indicador: alcanza con decirlo y dar la hora. */
.estado.is-cerrado { color: var(--marron); }

.estado.is-cerrado .estado__punto { display: none; }

/* -------------------------------------------------------------- Footer --- */

.footer {
  background: var(--fondo-2);
  border-top: 1px solid var(--borde);
  padding: var(--s6) var(--s4) var(--s5);
}

.footer__cols {
  display: grid;
  gap: var(--s6);
  max-width: var(--measure);
  margin: 0 auto;
}

/* En mobile las columnas se apilan en una sola: centradas se leen como
   un bloque, pegadas a la izquierda quedan con todo el aire sobrando a
   la derecha. En desktop, con las dos columnas ya centradas como par,
   el texto vuelve a la izquierda (ver media query de escritorio). */
.fcol { padding: 0; text-align: center; }

.fcol__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--marron);
  margin: 0 0 var(--s4);
}

.flist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s1);
  justify-items: center;
}

.flist a {
  display: grid;
  grid-template-columns: 20px auto;
  align-items: start;
  gap: var(--s2);
  min-height: 44px;
  padding-block: 10px;
  color: var(--texto-medio);
  text-decoration: none;
  transition: color 0.15s ease;
}

.flist a:hover,
.flist a:focus-visible { color: var(--arena); }

/* Empuja el ícono hasta la altura de la equis de la primera línea. */
.flist svg {
  justify-self: center;
  margin-top: 0.2em;
  color: var(--arena);
}

/* Solo los iconos, en fila y centrados, con area tactil de 44px. El icono
   ya dice de que red se trata: el usuario escrito era ruido. */
.redes {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--s3);
}

.redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--arena);
  text-decoration: none;
  transition: color 0.15s ease;
}

.redes a:hover,
.redes a:focus-visible { color: var(--marron); }

.redes svg { display: block; }

.footer__legal {
  color: var(--texto-suave);
  font-size: 0.85rem;
  margin: var(--s4) 0 0;
  text-align: center;
}

/* ------------------------------------------------------------ WhatsApp --- */

.wa {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #0b3d20;
  box-shadow: 0 6px 20px rgba(60, 40, 20, 0.28);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.wa:hover,
.wa:focus-visible {
  background: #1fbb57;
  transform: translateY(-2px);
}

/* El pie deja lugar para que el botón no se apoye sobre la última línea. */
.footer { padding-bottom: calc(var(--s5) + 76px); }

/* ==========================================================================
   Escritorio
   ========================================================================== */

@media (min-width: 768px) {

  body { font-size: 18px; }

  section { padding-inline: var(--s6); }

  .acciones,
  .menu,
  .marca { padding-block: var(--s8); }

  .acciones {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .acciones .btn { width: auto; min-width: 230px; }

    .visor__barra { padding: var(--s2) var(--s6); }

  .visor__cuerpo { padding: var(--s5) var(--s6) var(--s7); }

  .resenas { padding-block: var(--s8); }

  /* Puntaje a la izquierda, distribución a la derecha, separados por un
     filete. Cada uno declara su pista: la colocación automática los empujaría
     después de la línea. */
  .resenas__panel {
    grid-template-columns: 1fr 1px 1.15fr;
    gap: var(--s6);
    text-align: left;
  }

  .resenas__panel::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    background: var(--borde);
  }

  .resenas__score { grid-column: 1; grid-row: 1; text-align: center; }

  .barras { grid-column: 3; grid-row: 1; }

  .footer__cols {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: var(--s8);
  }

  /* Con las dos columnas ya centradas como par, el texto de cada una
     vuelve a la izquierda: es como se veía antes de centrar el mobile. */
  .fcol { text-align: left; }
  .fcol__title { padding-left: 0.24em; }
  .flist { justify-items: start; }

  .footer { padding: var(--s7) var(--s6) var(--s5); }

  .wa { right: var(--s5); bottom: var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}