/* Super Tacos Polo — hoja de estilos del sitio público.
   Paleta: carbón (parrilla), brasa/achiote (trompo, salsas), verde salsa (frescura). */

:root {
  --carbon: #1e1712;
  --carbon-2: #2a201a;
  --brasa: #c6401d;
  --brasa-osc: #9c3016;
  --achiote: #e38a2e;
  --salsa: #5c7a38;
  --salsa-osc: #435c28;
  --masa: #f6e9d7;
  --hueso: #fbf6ee;
  --tinta: #2b221b;
  --gris: #675d52;
  --linea: #e7d9c4;

  --display: 'Yeseva One', 'Iowan Old Style', Georgia, serif;
  --cuerpo: 'Archivo', 'Segoe UI', Roboto, sans-serif;
  --mono: 'Space Mono', 'Courier New', monospace;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; } /* nunca "smooth": rompe la navegación por ancla bajo CDP (ver CLAUDE.md) */

body {
  margin: 0;
  background: var(--masa);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
.contenedor { max-width: 68rem; margin: 0 auto; padding: 0 1.1rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0 0 .5rem; }
h2 { font-size: 1.7rem; color: var(--carbon); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 .9rem; }

.boton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  font-family: var(--cuerpo);
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1.1;
}
.boton-wa {
  background: linear-gradient(135deg, var(--brasa), var(--brasa-osc));
  color: #fff;
  box-shadow: 0 6px 18px rgba(198, 64, 29, .35);
}
.boton-wa:hover { filter: brightness(1.06); }
.boton-borde {
  background: transparent;
  border-color: var(--hueso);
  color: var(--hueso);
}

/* ---- Barra superior ---- */
.demo-banner{background:#2b2620;color:#f2ece1;text-align:center;font-size:.85rem;
  line-height:1.4;padding:.4rem .9rem;letter-spacing:.01em}
@media (min-width:640px){.demo-banner{font-size:.92rem}}
.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(30, 23, 18, .94);
  backdrop-filter: blur(4px);
  color: var(--hueso);
}
.barra-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.1rem;
  max-width: 68rem;
  margin: 0 auto;
}
.barra-marca {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--hueso);
  text-decoration: none;
}
.barra-marca span { color: var(--achiote); }
.barra .boton-wa { padding: .55rem 1rem; font-size: .88rem; }

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: min(78vh, 640px);
  min-height: min(78dvh, 640px);
  display: flex;
  align-items: flex-end;
  background: var(--carbon);
  overflow: hidden;
}
.hero picture, .hero img.hero-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* En escritorio el hero es mucho más ancho que alto: con la foto (retrato) cubriendo
   ese recuadro, el 42% recorta el trompo y deja solo parrilla/muro. Sube el punto de
   interés para que el trompo siga siendo el protagonista. */
@media (min-width: 900px) {
  .hero img.hero-fondo { object-position: center 20%; }
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,10,.15) 0%, rgba(20,14,10,.55) 55%, rgba(15,10,7,.92) 100%);
}
.hero-contenido {
  position: relative;
  z-index: 2;
  padding: 2.2rem 1.1rem 2.6rem;
  max-width: 68rem;
  margin: 0 auto;
  width: 100%;
  color: var(--hueso);
}
.hero-scrim {
  display: inline-block;
  background: linear-gradient(180deg, rgba(15,10,7,.4) 0%, rgba(15,10,7,.62) 40%, rgba(15,10,7,.85) 100%);
  padding: 1rem 1.1rem 1.2rem;
  border-radius: 18px;
  margin: -1rem -1.1rem -1.2rem;
}
.hero .eyebrow { color: var(--masa); text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.hero h1 {
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  color: #fff;
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
  margin-bottom: .4rem;
}
.hero p.tagline {
  font-size: 1.05rem;
  max-width: 34rem;
  color: var(--masa);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.hero-meta {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--masa);
  opacity: .9;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.punto-abierto {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--salsa);
  border: 1px solid var(--salsa-osc);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(92,122,56,.35);
}
.punto-cerrado { background: var(--brasa); box-shadow: 0 0 0 3px rgba(198,64,29,.3); }

/* ---- Divisor firma: brasa/ember (elemento distintivo del sitio) ---- */
.ember-divider { display: block; width: 100%; height: 22px; line-height: 0; }
.ember-divider svg { width: 100%; height: 100%; display: block; }
.ember-divider.sobre-claro { background: var(--masa); }
.ember-divider.sobre-oscuro { background: var(--carbon); }

/* ---- Secciones genéricas ---- */
.seccion { padding: 3rem 0; }
.seccion-oscura { background: var(--carbon); color: var(--hueso); }
.seccion-oscura h2 { color: var(--hueso); }
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--brasa-osc);
  margin-bottom: .4rem;
  display: block;
}
.seccion-oscura .eyebrow { color: var(--achiote); }

/* ---- Sobre nosotros ---- */
.sobre-grid {
  display: grid;
  gap: 1.6rem;
  align-items: center;
}
.sobre-grid img {
  border-radius: 16px;
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: auto;
}
.sobre-texto p { color: var(--tinta); white-space: pre-line; }

/* ---- Galería ---- */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
.galeria-grid a, .galeria-grid .galeria-item {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.galeria-grid img { width: 100%; height: 100%; object-fit: cover; }
.galeria-grid .grande { grid-column: span 2; aspect-ratio: 16/10; }

/* ---- Menú ---- */
.menu-nota { font-size: .88rem; color: var(--gris); margin-bottom: 1.6rem; }
.menu-categoria { margin-bottom: 2.2rem; }
.menu-categoria h3 {
  position: relative;
  display: inline-block;
  color: var(--carbon);
  margin-bottom: 1rem;
}
.menu-categoria h3::after {
  content: '';
  position: absolute;
  left: -2px; right: -6px; bottom: -5px;
  height: 7px;
  background: var(--achiote);
  opacity: .55;
  border-radius: 3px;
  transform: rotate(-.6deg);
}
.menu-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px dashed var(--linea);
}
.menu-item:last-child { border-bottom: none; }
.menu-item-nombre { font-weight: 700; }
.menu-item-desc { color: var(--gris); font-size: .92rem; margin-top: .15rem; }
.menu-item-precio {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--brasa-osc);
  white-space: nowrap;
  align-self: flex-start;
}

/* ---- Reseñas ---- */
.resenas-grid { display: grid; gap: 1rem; }
.resena {
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
}
.resena-estrellas { color: var(--brasa-osc); font-size: 1.05rem; letter-spacing: .1em; margin-bottom: .5rem; }
.resena p { margin: 0; color: var(--tinta); }
.resenas-resumen {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.resenas-resumen .num { font-family: var(--display); font-size: 2.1rem; color: var(--achiote); }
.resenas-resumen .detalle { color: #cbb9a3; font-size: .92rem; }

/* ---- Contacto ---- */
.contacto-grid {
  display: grid;
  gap: 1.6rem;
}
.contacto-datos { display: flex; flex-direction: column; gap: .9rem; }
.dato-fila { display: flex; gap: .7rem; align-items: flex-start; }
.dato-fila svg { flex: none; width: 1.3rem; height: 1.3rem; color: var(--brasa); margin-top: .1rem; }
.dato-fila a { text-decoration: none; }
.dato-fila a:hover { text-decoration: underline; }
.mapa-embed {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--linea);
  aspect-ratio: 4/3;
}
.mapa-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---- Redes sociales ---- */
.redes-fila { display: flex; gap: .7rem; flex-wrap: wrap; }
.redes-fila a {
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--linea);
  color: var(--carbon);
}
.seccion-oscura .redes-fila a,
.pie .redes-fila a { border-color: rgba(255,255,255,.25); color: var(--hueso); }
.redes-fila svg { width: 1.2rem; height: 1.2rem; }

/* ---- Footer ---- */
footer.pie {
  background: var(--carbon);
  color: var(--masa);
  padding: 2.4rem 0 1.6rem;
  font-size: .88rem;
}
.pie-redes { margin-bottom: 1.4rem; }
.pie-contacto { color: #d8cdbf; margin-bottom: .6rem; }
.pie-contacto a { color: var(--masa); text-decoration: none; }
.pie-contacto a:hover { text-decoration: underline; }
.pie-credito { color: #b7a998; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); }
.pie-credito a { color: var(--achiote); text-decoration: none; }
.pie-credito a:hover { text-decoration: underline; }

/* ---- WhatsApp flotante ---- */
.wa-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brasa), var(--brasa-osc));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  text-decoration: none;
}
.wa-flotante svg { width: 1.7rem; height: 1.7rem; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- Escritorio ---- */
@media (min-width: 760px) {
  .sobre-grid { grid-template-columns: 1fr 1fr; }
  .sobre-grid.imagen-derecha { grid-template-columns: 1fr 1fr; }
  .galeria-grid { grid-template-columns: repeat(4, 1fr); }
  .galeria-grid .grande { grid-column: span 2; }
  .contacto-grid { grid-template-columns: 1.1fr 1fr; }
  .resenas-grid { grid-template-columns: repeat(3, 1fr); }
  h2 { font-size: 2.1rem; }
}

@media (min-width: 1040px) {
  .menu-categorias-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
}