/* El Vagón — Asados y frituras (Estelí)
   Todo lo ajustable vive en :root: colores, tipografías y medidas. */
:root {
  /* Colores tomados del local: mostrador negro, logo rojo, menú con letras mostaza, pared de azulejo blanco */
  --carbon: #0c0b0a;
  --hierro: #1b1917;
  --hierro-borde: #322e2a;
  --acero: #8b847a;
  --riel: #5c564e; /* la vía fina que une cada plato con su precio */
  --durmiente: #4a3a2b;
  --humo: #f5f1e9;
  --humo-suave: #cfc8bc;
  --azulejo: #eeece7;
  --azulejo-junta: #d8d4cc;
  --rojo: #d6181f;
  --rojo-hondo: #a30f15;
  --rojo-vivo: #ff4d49;
  --brasa: #f47a1f;
  --mostaza: #f3c331;
  --whatsapp: #25d366;

  /* Tipografía: slab del logo, brocha del menú de la pared y una sans para leer */
  --font-display: "Alfa Slab One", Rockwell, "Roboto Slab", serif;
  --font-brocha: "Permanent Marker", "Segoe Print", cursive;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;

  /* Medidas */
  --gutter: 1.25rem;
  --ancho: 68rem;
  --radio: 12px;
  --seccion: clamp(3.25rem, 9vw, 6rem);
  --toque: 3.25rem; /* alto mínimo de botón */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--carbon); color: var(--humo); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 3px; }

/* ---------- Botones ---------- */
.cta { display: grid; gap: .75rem; width: 100%; max-width: 26rem; }
.btn { display: flex; align-items: center; justify-content: center; min-height: var(--toque); padding: .75rem 1.25rem; border-radius: var(--radio); font-weight: 700; font-size: 1.0625rem; text-decoration: none; text-align: center; transition: transform .15s ease, background-color .15s ease; }
.btn:active { transform: translateY(2px); }
.btn-wa { background: var(--whatsapp); color: var(--carbon); }
.btn-wa:hover { background: #3ee07a; }
.btn-tel { border: 2px solid var(--humo); color: var(--humo); }
.btn-tel:hover { background: var(--humo); color: var(--carbon); }
.btn-tel-claro { border-color: var(--carbon); color: var(--carbon); }
.btn-tel-claro:hover { background: var(--carbon); color: var(--humo); }

/* ---------- Hero: la brasa arriba, la placa del logo como en el mostrador ---------- */
.hero { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 1rem; padding: clamp(6.5rem, 32vw, 11rem) var(--gutter) 2.75rem; text-align: center; overflow: hidden; }
.hero-fuego { position: absolute; inset: 0 0 auto 0; height: clamp(15rem, 66vw, 31rem); z-index: -1; }
.hero-fuego img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: brightness(.88) saturate(.92); }
.hero-fuego::after { content: ""; position: absolute; inset: 0 0 -2px 0; background: linear-gradient(180deg, rgb(12 11 10 / .5) 0%, rgb(12 11 10 / .12) 32%, rgb(12 11 10 / .72) 72%, var(--carbon) 96%); }
.placa { width: clamp(10rem, 46vw, 13.5rem); aspect-ratio: 1; padding: 5%; object-fit: contain; background: #fff; border-radius: 50%; box-shadow: 0 0 0 5px var(--carbon), 0 0 0 8px var(--rojo), 0 22px 60px rgb(0 0 0 / .65); }
.ruta { margin-top: .5rem; font-weight: 700; font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mostaza); }
.hero h1 { max-width: 14ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.35rem, 11.5vw, 4.75rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.hero h1 em { display: block; margin-top: .35em; font-family: var(--font-brocha); font-style: normal; font-size: .56em; line-height: 1.15; text-transform: none; letter-spacing: 0; color: var(--rojo-vivo); text-shadow: 0 0 22px rgb(214 24 31 / .55); }
.gancho { max-width: 34ch; color: var(--humo-suave); }
.hero .cta { margin-top: .5rem; }
.ver-menu { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; color: var(--mostaza); text-underline-offset: 4px; }

/* ---------- La frase del mostrador ---------- */
.mostrador-frase { padding: 1.5rem var(--gutter); background: var(--carbon); border-top: 1px solid var(--hierro-borde); font-family: var(--font-display); font-size: clamp(1.05rem, 4.9vw, 1.6rem); line-height: 1.5; text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.mostrador-frase span { display: inline-block; padding: 0 .45em; background: var(--rojo); color: #fff; transform: skewX(-8deg); }

/* ---------- La vía: separador visto desde arriba ---------- */
.via { height: 30px; background:
  linear-gradient(var(--acero), var(--acero)) 0 7px / 100% 3px no-repeat,
  linear-gradient(var(--acero), var(--acero)) 0 20px / 100% 3px no-repeat,
  repeating-linear-gradient(90deg, var(--durmiente) 0 12px, transparent 12px 36px) var(--carbon); }

/* ---------- Encabezados de sección ---------- */
.encabezado { display: grid; gap: .35rem; margin: 0 auto 2rem; max-width: var(--ancho); }
.sobre { font-weight: 700; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mostaza); }
h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 8.5vw, 3.25rem); line-height: 1.05; text-transform: uppercase; }

/* ---------- Menú: cada categoría es un vagón ---------- */
.menu { padding: var(--seccion) var(--gutter); }
.menu .encabezado { margin-bottom: 1rem; }
.menu h2 { font-size: clamp(3.25rem, 17vw, 5.5rem); line-height: .95; } /* el MENÚ grande de su menú impreso */
/* andenes: atajos a cada vagón; en el celular se quedan arriba mientras se lee el menú */
.andenes { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; gap: .5rem; margin: 0 calc(-1 * var(--gutter)) 1.75rem; padding: .25rem var(--gutter) 0; background: var(--carbon); border-bottom: 1px solid var(--hierro-borde); }
.andenes a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 .1rem; border-bottom: 3px solid transparent; font-weight: 700; font-size: .9375rem; color: var(--humo-suave); text-decoration: none; }
.andenes a:hover { color: var(--humo); }
.andenes a[aria-current] { color: var(--humo); border-bottom-color: var(--rojo); }
.vagones { display: grid; gap: 1.75rem; margin: 0 auto; max-width: var(--ancho); }
.vagon { position: relative; background: var(--hierro); border: 1px solid var(--hierro-borde); border-radius: 16px 16px 6px 6px; scroll-margin-top: 4.75rem; }
/* enganche entre vagones cuando van apilados */
.vagon + .vagon::before { content: ""; position: absolute; left: 50%; top: -1.75rem; width: 10px; height: 1.75rem; margin-left: -5px; background: var(--acero); border-inline: 3px solid var(--carbon); }
.vagon-foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 15px 15px 0 0; }
.vagon-foto-asado { aspect-ratio: 4 / 3; object-position: 50% 58%; }
.asados-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0 1rem 1rem; }
.asados-fotos img { width: 100%; height: auto; border-radius: 8px; }
/* ventanas del vagón: una foto por fritura, con su placa */
.ventanas { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 15px 15px 0 0; overflow: hidden; }
.ventana { position: relative; }
.ventana img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ventana figcaption { position: absolute; left: .5rem; bottom: .5rem; padding: .2rem .55rem .15rem; background: var(--carbon); border-radius: 4px; font-family: var(--font-display); font-size: .8125rem; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--humo); }
/* ventanal de bebidas: foto vertical que se recorta arriba en el celular y va de lado en pantallas anchas */
.vagon-ventanal { aspect-ratio: 4 / 3; border-radius: 15px 15px 0 0; overflow: hidden; }
.vagon-ventanal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.vagon-carga { padding: 1.25rem 1.25rem 1.5rem; border-top: 4px solid var(--rojo); }
.vagon h3 { margin-bottom: .9rem; font-family: var(--font-brocha); font-weight: 400; font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.1; color: var(--rojo-vivo); text-shadow: 0 0 18px rgb(214 24 31 / .5); }
.platos { display: grid; gap: .95rem; }
.plato { position: relative; padding-left: 1.6rem; }
.plato::before { content: ""; position: absolute; left: 0; top: .1em; width: 1rem; height: 1.2rem; background: var(--brasa); -webkit-mask: var(--llama) center / contain no-repeat; mask: var(--llama) center / contain no-repeat; }
.platos { --llama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M13 0c1 6 8 8 8 16 0 7-4 12-10 12S2 23 2 17c0-4 2-6 4-9 0 3 1 5 3 6-1-5 1-10 4-14z'/%3E%3C/svg%3E"); }
/* nombre, riel y precio: el riel es la vía que lleva cada plato hasta su precio */
.plato-linea { display: grid; grid-template-columns: 1fr auto; column-gap: .5rem; align-items: end; align-items: last baseline; }
/* el riel corre por debajo del último renglón del nombre; el fondo del texto lo tapa hasta donde termina la última palabra */
.plato-nombre { font-size: 1rem; line-height: 1.25; background:
  linear-gradient(var(--riel), var(--riel)) 0 calc(100% - .42em - 3px) / 100% 1px no-repeat,
  repeating-linear-gradient(90deg, var(--riel) 0 1px, transparent 1px 7px) 0 calc(100% - .42em) / 100% 7px no-repeat; }
.plato-nombre strong { padding-right: .5rem; background: var(--hierro); font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; color: var(--mostaza); }
.precio { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.1; color: var(--humo); white-space: nowrap; }
.plato-detalle { margin-top: .2rem; max-width: 36ch; font-size: 1rem; line-height: 1.45; color: var(--humo-suave); }
.guarnicion { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--hierro-borde); color: var(--humo); }
.menu-cierre { display: grid; gap: 1rem; margin: 2rem auto 0; max-width: var(--ancho); }
.menu-cierre .btn { max-width: 26rem; }
.menu-nota { color: var(--humo-suave); }

/* ---------- Tren de fotos: cada cuadro va en la ventana de un vagón ---------- */
.tren { padding: var(--seccion) 0; background: #131110; border-block: 1px solid var(--hierro-borde); }
.tren .encabezado { padding-inline: var(--gutter); }
.tren-via { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: .5rem calc(var(--gutter) - 7px) 0; scrollbar-width: none; }
.tren-via::-webkit-scrollbar { display: none; }
.tren-via li { position: relative; flex: 0 0 min(80vw, 21rem); padding: 0 7px 36px; scroll-snap-align: start; background:
  linear-gradient(var(--acero), var(--acero)) 0 calc(100% - 14px) / 100% 4px no-repeat,
  repeating-linear-gradient(90deg, var(--durmiente) 0 10px, transparent 10px 28px) 0 calc(100% - 4px) / 100% 10px no-repeat; }
.tren-via li + li::before { content: ""; position: absolute; left: -8px; bottom: 58px; width: 16px; height: 6px; background: var(--acero); }
.coche { position: relative; padding: 9px 9px 12px; background: var(--rojo); border-radius: 14px 14px 5px 5px; box-shadow: inset 0 -10px 0 var(--rojo-hondo); }
.coche img { width: 100%; aspect-ratio: 720 / 394; object-fit: cover; border-radius: 7px; border: 3px solid var(--carbon); }
.coche figcaption { margin-top: .6rem; padding-bottom: .5rem; font-family: var(--font-display); font-size: .95rem; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
/* ruedas */
.coche::before, .coche::after { content: ""; position: absolute; bottom: -19px; width: 30px; height: 30px; border-radius: 50%; background: var(--carbon); border: 6px solid var(--acero); }
.coche::before { left: 14%; }
.coche::after { right: 14%; }
.tren-mando { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; padding-inline: var(--gutter); }
.palanca { width: var(--toque); height: var(--toque); border: 2px solid var(--humo); border-radius: 50%; background: transparent; color: var(--humo); font: 700 1.35rem/1 var(--font-body); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.palanca:hover { background: var(--humo); color: var(--carbon); }

/* ---------- Próxima parada: pared de azulejo, letrero de estación y boleto ---------- */
.parada { display: grid; gap: 2.25rem; padding: var(--seccion) var(--gutter); color: var(--carbon); background:
  linear-gradient(var(--azulejo-junta) 1px, transparent 1px) 0 0 / 100% 72px,
  linear-gradient(90deg, var(--azulejo-junta) 1px, transparent 1px) 0 0 / 72px 100% var(--azulejo); }
.parada-lugar { display: grid; gap: 1.25rem; align-content: start; }
.letrero { justify-self: start; padding: .9rem 1.35rem 1rem; background: var(--carbon); color: var(--humo); border-radius: 8px; box-shadow: 0 0 0 3px var(--azulejo), 0 0 0 6px var(--carbon); margin: 6px; }
.letrero h2 { font-size: clamp(2.5rem, 13vw, 4rem); }
.direccion { font-style: normal; font-size: 1.125rem; max-width: 30ch; }
.direccion a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; color: var(--rojo-hondo); text-underline-offset: 3px; }
.mostrador-foto img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 85%; border-radius: var(--radio); border: 4px solid var(--carbon); }
.mostrador-foto figcaption { margin-top: .5rem; font-size: .9375rem; color: #4b463f; }

.boleto { position: relative; display: grid; justify-items: center; gap: .6rem; align-self: start; padding: 1.75rem 1.25rem 1.5rem; background: #fff; border: 3px solid var(--carbon); border-radius: 14px; text-align: center; }
/* muescas del boleto */
.boleto::before, .boleto::after { content: ""; position: absolute; top: 4.4rem; width: 22px; height: 22px; border-radius: 50%; background: var(--azulejo); border: 3px solid var(--carbon); }
.boleto::before { left: -14px; clip-path: inset(0 0 0 50%); }
.boleto::after { right: -14px; clip-path: inset(0 50% 0 0); }
.boleto-tipo { width: 100%; padding-bottom: 1.4rem; border-bottom: 2px dashed var(--carbon); font-weight: 700; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rojo-hondo); }
.boleto-servicio { margin-top: .9rem; font-weight: 600; }
.boleto-numero { margin-bottom: .5rem; font-family: var(--font-display); font-size: clamp(2.5rem, 13vw, 3.5rem); line-height: 1; color: var(--rojo); }
.boleto-red { margin-top: .5rem; }
.boleto-red a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-underline-offset: 3px; }

/* ---------- Pie ---------- */
.pie { display: grid; gap: .5rem; padding: 2.25rem var(--gutter) 2.75rem; text-align: center; border-top: 4px solid var(--rojo); }
.pie-marca { font-family: var(--font-display); font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; }
.disclaimer { font-size: .875rem; color: var(--humo-suave); }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  :root { --gutter: 2.5rem; }
  .hero { padding-top: 9rem; padding-bottom: 4rem; }
  .hero-fuego { height: 30rem; }
  .placa { width: 15rem; }
  .hero h1 { max-width: 16ch; }
  .cta { grid-template-columns: 1fr 1fr; max-width: 34rem; }
  .andenes { display: none; }
  .menu .encabezado { margin-bottom: 2rem; }
  /* asados y chilaquiles a la izquierda, frituras (la lista larga) a la derecha, bebidas a lo ancho */
  .vagones { grid-template-columns: 1fr 1fr; gap: 1.5rem; grid-template-areas: "asados frituras" "chilaquiles frituras" "bebidas bebidas"; }
  /* las dos columnas quedan parejas: a la izquierda la foto absorbe la altura que sobre; a la derecha, el espacio entre platos */
  .vagon { display: flex; flex-direction: column; }
  .vagon-foto { flex: 1 0 auto; }
  .vagon-asados { grid-area: asados; }
  .vagon-frituras { grid-area: frituras; }
  .vagon-frituras .vagon-carga { flex: 1 0 auto; display: flex; flex-direction: column; }
  .vagon-frituras .platos { flex: 1 0 auto; align-content: space-between; }
  .vagon-chilaquiles { grid-area: chilaquiles; }
  .vagon-bebidas { grid-area: bebidas; display: grid; grid-template-columns: minmax(13rem, 34%) 1fr; }
  .vagon + .vagon::before { display: none; }
  .vagon-ventanal { position: relative; aspect-ratio: auto; min-height: 15rem; border-radius: 15px 0 0 5px; }
  .vagon-ventanal img { position: absolute; inset: 0; object-position: 50% 50%; }
  .vagon-bebidas .vagon-carga { min-width: 0; border-top: 0; border-left: 4px solid var(--rojo); }
  .plato-nombre { font-size: 1.0625rem; }
  .menu-cierre { grid-template-columns: 1fr auto; align-items: center; }
  .tren-via li { flex-basis: 22rem; }
  .parada { grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; }
  .parada > * { max-width: 100%; }
  .boleto .cta { grid-template-columns: 1fr; }
}

/* ---------- Escritorio ---------- */
@media (min-width: 1200px) {
  .hero-fuego { height: 34rem; }
  .vagon-ventanal img { object-position: 50% 36%; }
  .platos-bebidas { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; align-items: end; }
  .tren .encabezado, .tren-via, .tren-mando { max-width: calc(var(--ancho) + 2 * var(--gutter)); margin-inline: auto; }
  .parada { padding-inline: max(var(--gutter), calc((100% - var(--ancho)) / 2)); }
}

@media (prefers-reduced-motion: no-preference) {
  html, .tren-via { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .palanca { transition: none; }
}