/* Sabor y Son — concepto v-b · Direccion B: energia de cartel callejero contemporaneo
   Negro asfalto, crema de boletin, rojo-tomate y amarillo taxi. Titulos enormes, borde de tinta. */

:root {
  --negro: #12100e;
  --tinta: #1c1916;
  --crema: #f5edd8;
  --crema-hondo: #ecdcbc;
  --tomate: #e23d28;
  --tomate-hondo: #b02415;
  --sol: #f2b705;
  --papel: #efe6cf;
  --display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --cond: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --texto: 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--negro);
  color: var(--crema);
  font-family: var(--texto);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 72rem;
  margin: 0 auto;
  border-left: 4px solid var(--tomate);
  border-right: 4px solid var(--tomate);
}

::selection { background: var(--sol); color: var(--negro); }

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

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

/* ---------- Banda de aviso ---------- */

.banner {
  background: var(--tomate);
  color: var(--crema);
  font-family: var(--cond);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 0.75rem;
  border-bottom: 3px solid var(--negro);
}

/* ---------- Cabecera ---------- */

.masthead { padding: 1.6rem 1.25rem 1.1rem; border-bottom: 3px solid var(--crema); }

.kicker {
  font-family: var(--cond);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sol);
}

.masthead h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 9.5vw, 7rem);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0.3rem 0 0.5rem;
  color: var(--crema);
  text-shadow: 5px 5px 0 var(--tomate-hondo);
}

.masthead-sub {
  max-width: 42rem;
  color: var(--crema-hondo);
  font-size: 0.95rem;
}

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

.hero-figure { margin: 0; border-bottom: 3px solid var(--crema); background: var(--negro); }

.hero-figure img {
  width: 100%;
  /* Rendered-pixel cap: hero must not exceed ~half the viewport on any
     breakpoint (mobile included) — verified with getBoundingClientRect. */
  height: min(36svh, 30rem);
  object-fit: cover;
  filter: saturate(1.12) contrast(1.06);
}

.hero-figure figcaption {
  font-family: var(--cond);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--negro);
  background: var(--sol);
  padding: 0.4rem 1.25rem;
}

.hero-panel { padding: 1.2rem 1.25rem 1.5rem; border-bottom: 3px solid var(--crema); }

.hero-panel h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.hero-lede { max-width: 44rem; color: var(--crema); font-size: 0.98rem; margin-bottom: 0.5rem; }

.hero-note {
  font-family: var(--cond);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--crema-hondo);
  border-left: 4px solid var(--sol);
  padding-left: 0.8rem;
  margin-bottom: 0.8rem;
}

/* Movil: foto -> titular -> CTA -> copia (directiva: promesa + CTA antes del scroll) */
@media (max-width: 639px) {
  .masthead { padding: 1rem 1.25rem 0.8rem; }
  .masthead-sub { font-size: 0.88rem; }
  .hero-panel { display: flex; flex-direction: column; }
  .hero-panel h2 { order: -2; }
  .hero-cta { order: -1; margin-bottom: 0.9rem; }
}

.hero-cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; max-width: 44rem; }

.cta-plate {
  background: var(--tomate);
  color: var(--crema);
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.05rem;
  padding: 0.85rem 1.4rem;
  border: 3px solid var(--crema);
  box-shadow: 6px 6px 0 var(--negro), 6px 6px 0 3px var(--crema);
}

.cta-state {
  font-family: var(--cond);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crema-hondo);
  align-self: center;
}

/* ---------- La logica del menu ---------- */

.logic { padding: 2.6rem 1.25rem; border-bottom: 3px solid var(--crema); }

.logic-kicker, .visit-kicker {
  font-family: var(--cond);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tomate);
}

.logic-head h2, .visit-head h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  line-height: 1.04;
  text-transform: uppercase;
  margin: 0.5rem 0 0.9rem;
}

.logic-head > p:last-child, .visit-head > p:last-child { max-width: 44rem; color: var(--crema-hondo); margin-bottom: 1.6rem; }

.logic-cards { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }

.card {
  border: 3px solid var(--crema);
  background: var(--tinta);
  box-shadow: 8px 8px 0 var(--tomate);
}

.card img { width: 100%; height: 17rem; object-fit: cover; border-bottom: 3px solid var(--crema); }

.card-el { box-shadow: 8px 8px 0 var(--sol); }
.card-main { box-shadow: 8px 8px 0 var(--tomate); }
.card-side { box-shadow: 8px 8px 0 var(--crema-hondo); }
.card-close { box-shadow: 8px 8px 0 var(--sol); }

.card-no {
  font-family: var(--cond);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sol);
  padding: 0.9rem 1.1rem 0;
}

.card h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.45rem;
  line-height: 1.05;
  padding: 0.35rem 1.1rem 0;
}

.card > p:last-of-type { padding: 0.5rem 1.1rem 1.3rem; color: var(--crema-hondo); font-size: 0.98rem; }

.logic-note {
  margin-top: 1.7rem;
  font-family: var(--cond);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--crema-hondo);
  border-top: 2px dashed var(--tomate);
  padding-top: 0.9rem;
  max-width: 46rem;
}

/* ---------- La visita ---------- */

.visit { padding: 2.6rem 1.25rem; border-bottom: 3px solid var(--crema); }

.visit-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.4rem; }

.visit-block { border: 3px solid var(--crema); padding: 1.1rem 1.2rem 1.3rem; background: var(--tinta); }

.visit-block h3 {
  font-family: var(--cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sol);
  margin-bottom: 0.45rem;
}

.visit-block p { color: var(--crema-hondo); font-size: 0.97rem; }

.visit-note {
  font-family: var(--cond);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: var(--crema);
  border-left: 4px solid var(--tomate);
  padding-left: 0.85rem;
  max-width: 46rem;
}

/* ---- Insignia de calificacion (datos verificados) ---- */

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 3px solid var(--crema);
  background: var(--tinta);
  box-shadow: 6px 6px 0 var(--sol);
  padding: 0.7rem 1rem;
  margin-top: 1.5rem;
}

.rating-badge .stars { display: block; flex: none; }

.rating-count {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--sol);
  line-height: 1;
}

.rating-src {
  font-family: var(--cond);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crema-hondo);
  line-height: 1.25;
}

.visit-block a { color: var(--sol); text-underline-offset: 3px; }
.visit-block--addr p:first-of-type { color: var(--crema); font-weight: 600; }

/* ---------- Pie ---------- */

.colophon { padding: 2.2rem 1.25rem 3rem; background: var(--negro); }

.colophon-brand {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--tomate);
  margin-bottom: 0.8rem;
}

.colophon-note, .colophon-photos { font-size: 0.84rem; line-height: 1.65; color: var(--crema-hondo); max-width: 52rem; }

.colophon-note { margin-bottom: 0.8rem; }

.colophon a { color: var(--sol); }

/* ---------- Desde 640px: la pagina se abre a dos columnas ---------- */

@media (min-width: 640px) {
  body { border-left-width: 6px; border-right-width: 6px; }
  .masthead, .hero-panel, .logic, .visit, .colophon { padding-left: 2.5rem; padding-right: 2.5rem; }
  .hero-figure figcaption { padding: 0.5rem 2.5rem; }

  .logic-cards { grid-template-columns: 1fr 1fr; gap: 2rem 1.6rem; }
  .visit-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

  .hero { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
  .hero-figure { border-bottom: 0; border-right: 3px solid var(--crema); align-self: stretch; background: var(--negro); }
  .hero-figure img { height: 46vh; min-height: 20rem; max-height: 34rem; }
  .hero-panel { border-bottom: 3px solid var(--crema); display: flex; flex-direction: column; justify-content: center; }
}

@media (min-width: 960px) {
  .logic-cards { grid-template-columns: repeat(4, 1fr); }
  .card img { height: 15rem; }
}