/* Inicio de Ayulem (diseño nuevo): portada con la fachada del local de fondo, y la carta en una tarjeta con su descripción al costado. Sin Lemi. */

/* ---------- portada: imagen acuarela con la foto del local ---------- */
.hero-local { position: relative; display: flex; align-items: center; padding: var(--barra) max(20px, 6vw) 0; min-height: calc(56.25vw + var(--barra)); max-height: 100svh; overflow: hidden; color: var(--tinta); }
.hero-foto { display: none; }
.hero-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; z-index: 0; }
/* PC: header más bajo (-5 cm); el texto va abajo, en una franja, sin tapar el cartel de la foto */
@media (min-width: 861px) {
  section.hero-local { align-items: flex-end; height: 100svh; min-height: 500px; max-height: none; padding: var(--barra) max(20px, 6vw) 26px; }
  section.hero-local::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; background: linear-gradient(0deg, rgba(43,38,33,.88) 0%, rgba(43,38,33,.62) 55%, rgba(43,38,33,0) 100%); }
  section.hero-local .portada { max-width: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
  section.hero-local .portada > * { grid-column: 1; }
  section.hero-local .portada > .etq { margin-bottom: 4px; }
  section.hero-local .portada h1 { font-size: clamp(44px, 4.7vw, 72px); line-height: 1.05; margin: 0 0 8px; }
  section.hero-local .portada > p { max-width: 720px; margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
  section.hero-local .datos-rapidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(620px, 100%); margin: 4px 0 14px; }
  section.hero-local .dato { background: rgba(250,243,232,.86); border: 1px solid rgba(255,255,255,.35); border-radius: 22px; padding: 14px 18px; font-size: 16px; line-height: 1.3; color: var(--tinta); }
  section.hero-local .dato b { font-size: 12px; margin-bottom: 6px; color: #7A2F33; }
  section.hero-local .botones { margin: 4px 0 12px; }
  section.hero-local .baja { margin: 0; }
  section.hero-local .boton:not(.claro) { background: #8A3A3C; color: #fff; border-color: #8A3A3C; }
  section.hero-local .boton:not(.claro):hover { background: #6F2D30; border-color: #6F2D30; }
  section.hero-local .boton.claro { background: #fff; color: #2E2A25; border-color: #fff; }
  section.hero-local .boton.claro:hover { background: #F4EEE6; border-color: #F4EEE6; }
}
.hero-local .portada { position: relative; z-index: 2; max-width: 560px; opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.hero-local.listo .portada { opacity: 1; transform: none; }
.hero-local .etq { color: #FDEBD6; }
.hero-local h1 { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.hero-local .portada > p { color: #FBEFE0; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.hero-local .dato { background: rgba(255,255,255,.62); color: var(--tinta); border: 1px solid rgba(46,42,37,.16); backdrop-filter: blur(4px); }
.hero-local .dato b { color: #7A2F33; }
.hero-local .baja { color: #fff; }
.hero-local .boton.claro { background: rgba(255,255,255,.92); color: var(--tinta); border-color: transparent; }

/* ---------- la carta: tarjeta + descripción al costado ---------- */
.carta-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(22px, 4vw, 56px); align-items: center; }
.carta-desc .etq { color: #7A2F33; }
.carta-desc h2 { color: #2E2A25; }
.carta-desc p { font-size: 17px; line-height: 1.6; color: #2E2A25; max-width: 520px; }
.carta-dos .tarjeta { max-width: none; }
@media (max-width: 860px) {
  .carta-dos { grid-template-columns: 1fr; }
  /* celular: sin imagen acuarela; la foto del local es el encabezado y el texto va encima (sin los datos de horario, dirección y WhatsApp) */
  .hero-fondo { display: none; }
  .hero-foto { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; z-index: 0; }
  .hero-local::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(43,38,33,0) 0%, rgba(43,38,33,0) 34%, rgba(43,38,33,.58) 52%, rgba(43,38,33,.8) 74%, rgba(43,38,33,.9) 100%); }
  .hero-local { display: flex; align-items: flex-end; min-height: 165vw; max-height: none; padding: calc(var(--barra) + 150px) 22px 34px; color: #fff; background: #2B2621; }
  .hero-local .portada { max-width: none; opacity: 1; transform: none; }
  .hero-local .etq { color: #FDEBD6; }
  .hero-local h1 { color: #fff; font-size: clamp(34px, 10vw, 44px); text-shadow: 0 2px 16px rgba(0,0,0,.4); }
  .hero-local .portada > p { color: #FBEFE0; font-size: 16px; line-height: 1.5; margin-bottom: 20px; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
  .hero-local .datos-rapidos { display: none; }
  .hero-local .boton:not(.claro) { background: #8A3A3C; color: #fff; }
  .hero-local .boton.claro { background: rgba(255,255,255,.92); color: var(--tinta); border-color: transparent; }
  .hero-local .baja { color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .hero-local .portada { transition: none; } }

/* ---------- página de locales ---------- */
.locales-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 8px; align-items: stretch; }
.loc-foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
.loc-aviso { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: #8A3A3C; color: #fff !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.loc-consultas { margin-top: 28px; font-size: 15px; color: #3A342C; }
.loc-consultas a { color: #7A2F33; font-weight: 600; }
@media (max-width: 860px) { .locales-grid { grid-template-columns: 1fr; } }
main > .seccion:first-child { padding-top: calc(var(--barra) + 8px); }

/* ---------- Nosotros: índice interno ---------- */
.subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; }
.subnav a { padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid rgba(46,42,37,.16); color: var(--tinta); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .2s, color .2s; }
.subnav a:hover, .subnav a:focus-visible { background: #8A3A3C; color: #fff; border-color: #8A3A3C; }

/* ---------- página de productos ---------- */
.productos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 8px; align-items: stretch; }
.productos-grid .tarjeta p { color: #3A342C; }
@media (max-width: 860px) { .productos-grid { grid-template-columns: 1fr; } }