/* Página Web premium — Naranjo’s Juicy Burgers.
   La marca sale de su menú impreso (igual que la app, ver marca.css): naranja, crema de papel, azul marino,
   amarillo; letra condensada en itálica; franjas horizontales y sombras duras. Para otro cliente se cambian
   los colores y letras de :root. */

:root {
  --naranja: #dd4d09;
  --naranja-osc: #b93d05;
  --crema: #fbf1de;
  --papel: #fffaf0;
  --foto: #f1ebe0;            /* el fondo de las fotos del video, para que la portada no tenga orilla */
  --marino: #1d2a5c;
  --marino-osc: #141e45;
  --amarillo: #ffc83d;
  --tinta: #2a1d14;
  --suave: #6e5a4a;
  --linea: #ecd9b9;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --texto: 'Barlow', system-ui, sans-serif;
  --franjas: repeating-linear-gradient(to bottom, var(--naranja) 0 3px, transparent 3px 7px);
  --ancho: 1180px;
  --margen: clamp(16px, 4vw, 40px);
  --barra: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--crema); color: var(--tinta);
  font: 400 17px/1.55 var(--texto); overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }

.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--marino); color: var(--papel); padding: 10px 14px; border-radius: 10px; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.contenedor { width: min(var(--ancho), 100% - 2 * var(--margen)); margin: 0 auto; }
.angosto { width: min(820px, 100% - 2 * var(--margen)); }
.naranja { color: var(--naranja); }
.amarillo { color: var(--amarillo); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px;
  border-radius: 14px; border: 2.5px solid var(--marino); text-decoration: none; cursor: pointer;
  font: italic 800 19px/1 var(--display); text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 4px 4px 0 var(--marino); transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.boton:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--marino); }
.boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--marino); }
.boton-principal { background: var(--naranja); color: var(--papel); }
.boton-secundario { background: var(--papel); color: var(--marino); }
.boton-amarillo { background: var(--amarillo); color: var(--marino); border-color: var(--marino-osc); box-shadow: 4px 4px 0 var(--marino-osc); }
.boton-claro { background: transparent; color: var(--papel); border-color: var(--papel); box-shadow: 4px 4px 0 var(--naranja); }
.boton-claro:hover { box-shadow: 5px 5px 0 var(--naranja); }

/* ---------- Barra ---------- */
.barra-sitio {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--barra);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--margen);
  transition: background .3s ease, box-shadow .3s ease;
}
.barra-sitio.solida { background: var(--naranja); box-shadow: 0 3px 0 var(--papel), 0 6px 0 var(--naranja), 0 9px 0 var(--papel), 0 12px 0 var(--naranja); }
.barra-logo img { width: auto; height: 60px; filter: drop-shadow(2px 2px 0 rgba(29, 42, 92, .35)); }
.barra-nav { display: flex; gap: 26px; margin-left: auto; }
.barra-nav a {
  text-decoration: none; font: italic 800 18px var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--papel);
  padding: 6px 0; border-bottom: 3px solid transparent; text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.barra-nav a:hover { border-color: var(--naranja); }
.solida .barra-nav a { color: var(--papel); text-shadow: none; }
.solida .barra-nav a:hover { border-color: var(--amarillo); }
.barra-cta { min-height: 44px; padding: 8px 18px; font-size: 17px; }
.solida .barra-cta { background: var(--amarillo); color: var(--marino); }

/* ---------- Portada ---------- */
.portada {
  position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden;
  background: var(--foto); isolation: isolate;
}
/* La portada es la foto de la plancha (se aplasta la carne: "smashed"). En computadora es la foto horizontal
   de Felipe a toda la pantalla, sin fondo azul (Felipe, 4 nov 2026): el texto se lee por su propia sombra y la
   foto se recorre a la derecha para que la carne no quede bajo el título. En celular es la vertical. */
.portada { background: var(--marino-osc); }
.portada-medio { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* Acercamiento lento en CSS (no video): se ve también con el iPhone en ahorro de batería, que no deja
   reproducir videos solos. Con "reducir movimiento" se queda quieta (regla al final del archivo). */
.portada-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 60%;
  transform-origin: 62% 64%; animation: acercar 9s ease-in-out infinite alternate; will-change: transform;
}
@keyframes acercar { from { transform: scale(1); } to { transform: scale(1.14) translateY(-1.5%); } }
.portada-nota { position: absolute; right: var(--margen); bottom: 18px; font-size: 13px; color: rgba(255, 250, 240, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.portada-texto {
  width: min(var(--ancho), 100% - 2 * var(--margen)); margin: 0 auto; padding: calc(var(--barra) + 32px) 0 96px;
  display: grid; gap: 22px; justify-items: start;
}
.estado {
  display: inline-flex; align-items: center; gap: 10px; background: var(--marino); color: var(--papel);
  padding: 8px 16px; border-radius: 999px; font: 800 15px var(--display); text-transform: uppercase; letter-spacing: .05em;
}
.estado .punto { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 #4ade80; animation: pulso 2s infinite; }
.estado.cerrado .punto { background: var(--amarillo); animation: none; }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px transparent; } }
.portada-titulo {
  font: italic 800 clamp(60px, 8.6vw, 140px)/.84 var(--display); text-transform: uppercase; color: var(--papel);
  letter-spacing: -.005em; display: grid; text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.portada-titulo .linea { display: block; }
.portada-titulo .naranja { color: var(--naranja); text-shadow: 4px 4px 0 var(--marino-osc), 0 2px 18px rgba(0, 0, 0, .55); }
.portada-sub { font: italic 700 clamp(20px, 2.2vw, 28px)/1.2 var(--display); color: var(--papel); max-width: 26ch; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.portada-botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.portada-bajar {
  position: absolute; left: 50%; bottom: 26px; translate: -50% 0; width: 28px; height: 46px; border: 2.5px solid var(--papel);
  border-radius: 999px;
}
.portada-bajar span { position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; translate: -50% 0; border-radius: 4px; background: var(--naranja); animation: bajar 1.8s infinite; }
@keyframes bajar { 60% { transform: translateY(14px); opacity: 0; } }

/* Entrada de la portada */
.portada-texto > * { animation: subir .8s cubic-bezier(.2, .7, .2, 1) both; }
.portada-titulo { animation-delay: .1s !important; }
.portada-sub { animation-delay: .25s !important; }
.portada-botones { animation-delay: .4s !important; }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } }

/* ---------- La marca en 3 tiempos ---------- */
/* El video de Flow es una hamburguesa que se desarma sobre fondo de estudio: la sección usa ese mismo gris
   para que el video no tenga orilla, y la hamburguesa se ve completa (sin recortar) del lado derecho. */
.historia { --estudio: #e7e7e5; position: relative; height: 340vh; background: var(--estudio); }
.historia-fija { position: sticky; top: 0; height: 100svh; overflow: hidden; }
#lienzo-scroll { position: absolute; top: 0; right: 0; width: 56%; height: 100%; background: var(--estudio) url('medios/scroll/0001.webp?v=3') 50% 50% / contain no-repeat; }
.historia-textos { position: absolute; inset: 0; z-index: 1; width: min(var(--ancho), 100% - 2 * var(--margen)); margin: 0 auto; }
.tiempo {
  position: absolute; left: 0; top: 50%; translate: 0 -50%; max-width: 30rem; color: var(--marino);
  opacity: 0; transform: translateY(30px); transition: opacity .5s ease, transform .5s ease;
}
.tiempo.activo { opacity: 1; transform: none; }
.tiempo-num { font: italic 800 22px var(--display); color: var(--naranja-osc); letter-spacing: .06em; }
.tiempo h2 { font: italic 800 clamp(46px, 6.4vw, 92px)/.9 var(--display); text-transform: uppercase; margin: 8px 0 16px; }
.tiempo p { font-size: clamp(17px, 1.6vw, 21px); max-width: 32ch; color: var(--tinta); }
.historia-nota { position: absolute; z-index: 1; right: var(--margen); top: calc(var(--barra) + 10px); font-size: 13px; color: #55524c; }
.historia-avance { position: absolute; z-index: 1; left: var(--margen); right: var(--margen); bottom: 28px; height: 4px; background: rgba(29, 42, 92, .15); border-radius: 4px; }
.historia-avance span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--naranja); border-radius: 4px; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.seccion-crema { background: var(--crema); }
.seccion-papel { background: var(--papel); }
.seccion-marino { background: var(--marino); color: var(--papel); }
.seccion-naranja { background: var(--naranja); color: var(--papel); }
.cabeza { display: grid; gap: 10px; margin-bottom: clamp(32px, 5vw, 56px); }
.antetitulo { font: italic 800 19px var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--naranja); display: flex; align-items: center; gap: 12px; }
.antetitulo::after { content: ''; width: 72px; height: 13px; background: var(--franjas); }
.seccion-marino .antetitulo { color: var(--amarillo); }
/* Amarillo sobre naranja no se lee (2.6:1); en las secciones naranjas va en papel. */
.seccion-naranja .antetitulo { color: var(--papel); }
.seccion-naranja .antetitulo::after { background: repeating-linear-gradient(to bottom, var(--papel) 0 3px, transparent 3px 7px); }
.titulo { font: italic 800 clamp(48px, 7vw, 96px)/.88 var(--display); text-transform: uppercase; color: var(--marino); }
.seccion-marino .titulo, .seccion-naranja .titulo { color: var(--papel); }
.subtitulo { font: italic 800 26px var(--display); text-transform: uppercase; color: var(--marino); margin: 32px 0 10px; }
.cargando { color: var(--suave); }

/* Aparecer al bajar */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.revelar.visto { opacity: 1; transform: none; }

/* ---------- Platillos estrella ---------- */
.estrellas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.estrella {
  background: var(--papel); border: 2.5px solid var(--marino); border-radius: 24px; box-shadow: 7px 7px 0 var(--marino);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr;
}
.estrella-foto { position: relative; background: var(--foto); aspect-ratio: 4 / 3; overflow: hidden; }
.estrella-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.estrella:hover .estrella-foto img { transform: scale(1.06); }
.sello-chef {
  position: absolute; top: 14px; left: 14px; background: var(--amarillo); color: var(--marino); border: 2px solid var(--marino);
  padding: 6px 12px; border-radius: 999px; font: italic 800 15px var(--display); text-transform: uppercase;
}
.estrella-cuerpo { padding: 20px 22px 24px; display: grid; gap: 10px; align-content: start; }
.estrella-cuerpo h3 { font: italic 800 36px/.95 var(--display); text-transform: uppercase; color: var(--marino); }
.estrella-cuerpo p { color: var(--suave); }
.estrella-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.precio { font: italic 800 34px var(--display); color: var(--naranja); }
.estrella-pie .boton { min-height: 46px; padding: 10px 18px; font-size: 17px; }

/* ---------- Menú ---------- */
.nota-vivo { color: var(--suave); display: flex; align-items: center; gap: 8px; }
.nota-vivo::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.menu-pestanas {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 14px; margin: 0 -4px 22px; scrollbar-width: none;
  position: sticky; top: calc(var(--barra) + 12px); z-index: 5; background: var(--papel);
  box-shadow: 0 -16px 0 var(--papel);   /* tapa el hueco bajo las franjas de la barra */
}
.categoria { scroll-margin-top: calc(var(--barra) + 84px); }
.menu-pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: none; border: 2.5px solid var(--marino); background: var(--papel); color: var(--marino); border-radius: 999px;
  padding: 9px 18px; font: italic 800 17px var(--display); text-transform: uppercase; cursor: pointer;
}
.pestana[aria-current] { background: var(--marino); color: var(--papel); }
.menu-lista { display: grid; gap: 44px; }
.categoria h3 {
  font: italic 800 clamp(34px, 4vw, 46px) var(--display); text-transform: uppercase; color: var(--marino);
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.categoria h3::after { content: ''; flex: 1; height: 15px; background: var(--franjas); }
.platillos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); column-gap: 40px; }
.platillo { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 2px dashed var(--linea); }
.platillo img { width: 96px; height: 76px; object-fit: cover; border-radius: 12px; background: var(--foto); }
.platillo h4 { margin: 0; font: italic 800 24px/1 var(--display); text-transform: uppercase; color: var(--marino); }
.platillo p { font-size: 15px; color: var(--suave); line-height: 1.4; margin-top: 4px; }
.platillo .precio { font-size: 28px; }
.platillo.agotado { opacity: .55; }
.platillo.agotado .precio { font: 700 14px var(--texto); color: var(--suave); text-transform: uppercase; }
.etqs { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.etqs span { font: 700 12px var(--texto); background: color-mix(in srgb, var(--naranja) 14%, var(--papel)); color: var(--naranja-osc); padding: 2px 8px; border-radius: 999px; text-transform: none; }
.menu-pie { margin-top: 44px; display: flex; justify-content: center; }

/* ---------- Promociones ---------- */
.promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; }
.promo {
  background: var(--papel); color: var(--tinta); border-radius: 20px; padding: 26px 28px; position: relative;
  box-shadow: 6px 6px 0 var(--marino); border: 2.5px solid var(--marino);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.promo h3 { font: italic 800 34px/.95 var(--display); text-transform: uppercase; color: var(--naranja); margin: 10px 0 8px; }
.promo p { color: var(--suave); }
.promo-cuando { display: inline-block; font: 800 14px var(--display); text-transform: uppercase; letter-spacing: .05em; background: var(--marino); color: var(--papel); padding: 4px 10px; border-radius: 999px; }
.promo-miembros { background: var(--amarillo); color: var(--marino); }

/* ---------- La app ---------- */
.app-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.app-beneficios { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 18px; }
.app-beneficios li { display: grid; gap: 2px; padding-left: 46px; position: relative; }
.app-beneficios li::before {
  content: '★'; position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amarillo); color: var(--marino); font-size: 16px;
}
.app-beneficios strong { font: italic 800 26px var(--display); text-transform: uppercase; }
.app-beneficios span { color: color-mix(in srgb, var(--papel) 80%, transparent); }
.app-botones { display: flex; flex-wrap: wrap; gap: 14px; }
.app-instalar { margin-top: 26px; color: color-mix(in srgb, var(--papel) 85%, transparent); max-width: 52ch; }
.app-instalar summary { cursor: pointer; font-weight: 700; color: var(--papel); }
.app-instalar p { margin-top: 10px; }
/* Teléfono a la izquierda y QR pegado a la derecha, con espacio para la sombra naranja del teléfono. */
.app-visual { display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; }
.telefono {
  width: 260px; flex: none; aspect-ratio: 9 / 18.5; background: #0d1330; border-radius: 42px; padding: 12px;
  box-shadow: 10px 10px 0 var(--naranja), 0 30px 60px rgba(0, 0, 0, .35); rotate: -4deg;
}
.telefono-pantalla { height: 100%; border-radius: 32px; background: var(--crema); overflow: hidden; display: flex; flex-direction: column; gap: 10px; color: var(--tinta); }
.tel-barra { background: var(--naranja); padding: 18px 14px 10px; box-shadow: 0 3px 0 var(--papel), 0 6px 0 var(--naranja); }
.tel-barra img { height: 30px; width: auto; }
.tel-portada { margin: 8px 12px 0; background: var(--naranja); border-radius: 16px; padding: 12px 12px 0; box-shadow: 3px 3px 0 var(--marino); overflow: hidden; }
.tel-portada strong { font: italic 800 22px/.9 var(--display); text-transform: uppercase; color: var(--papel); display: block; }
.tel-portada img { margin: 8px -12px 0; width: calc(100% + 24px); max-width: none; aspect-ratio: 16 / 10; object-fit: cover; background: var(--foto); }
.tel-tarjeta { margin: 0 12px; background: var(--marino); color: var(--papel); border-radius: 14px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tel-tarjeta span { font: italic 800 15px var(--display); text-transform: uppercase; color: var(--amarillo); }
/* Los 8 sellos se reparten el ancho de la tarjeta: así caben en cualquier tamaño de teléfono. */
.tel-sellos { display: grid; grid-template-columns: repeat(8, minmax(0, 18px)); gap: 4px; }
.tel-sellos i { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--amarillo); }
.tel-sellos i.lleno { background: var(--amarillo); }
.tel-tarjeta small { font-size: 11px; opacity: .85; }
.tel-boton { margin: auto 12px 16px; background: var(--naranja); color: var(--papel); text-align: center; padding: 10px; border-radius: 12px; font: italic 800 17px var(--display); text-transform: uppercase; box-shadow: 2px 2px 0 var(--marino); }
.app-qr { background: var(--papel); color: var(--marino); border-radius: 20px; padding: 16px; width: 172px; flex: none; margin-bottom: 24px; text-align: center; box-shadow: 6px 6px 0 var(--amarillo); }
.app-qr svg { width: 100%; height: auto; }
.app-qr p { font: italic 800 15px/1.15 var(--display); text-transform: uppercase; margin-top: 8px; }

/* ---------- Reseñas ---------- */
.calificacion { font: italic 800 28px var(--display); color: var(--marino); }
.calificacion b { color: var(--naranja); font-size: 44px; }
.resenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.resena { background: var(--papel); border: 2.5px solid var(--marino); border-radius: 20px; padding: 26px; box-shadow: 6px 6px 0 var(--naranja); display: grid; gap: 14px; align-content: start; }
.resena-estrellas { color: var(--naranja); font-size: 22px; letter-spacing: 3px; }
.resena blockquote { margin: 0; font-size: 18px; color: var(--tinta); }
.resena footer { font: italic 800 16px var(--display); text-transform: uppercase; color: var(--marino); }
.resena .ejemplo { font: 600 12px var(--texto); text-transform: none; color: var(--suave); margin-left: 6px; }
.resenas-botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; justify-content: center; }

/* ---------- Galería ---------- */
.galeria-seccion { padding-bottom: clamp(56px, 8vw, 96px); }
.galeria {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px max(var(--margen), (100% - var(--ancho)) / 2) 24px;
  scrollbar-width: thin; scrollbar-color: var(--naranja) transparent;
}
.galeria figure { margin: 0; flex: none; width: clamp(260px, 34vw, 440px); scroll-snap-align: start; position: relative; }
.galeria img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; background: var(--foto); border: 2.5px solid var(--marino); }
.galeria figcaption { position: absolute; right: 12px; bottom: 12px; background: rgba(29, 42, 92, .75); color: var(--papel); font-size: 12px; padding: 3px 9px; border-radius: 999px; }

/* ---------- Visítanos ---------- */
.visitanos-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.direccion { font: italic 700 26px/1.15 var(--display); color: var(--marino); margin-bottom: 20px; max-width: 26ch; }
.visitanos-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.visitanos-botones .boton { min-height: 48px; padding: 10px 18px; font-size: 17px; }
.horario { list-style: none; margin: 0; padding: 6px 18px; background: var(--papel); border: 2.5px solid var(--linea); border-radius: 16px; }
.horario li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--linea); }
.horario li:last-child { border-bottom: 0; }
.horario li.hoy { color: var(--naranja); font-weight: 700; }
.horario li.hoy span:first-child::before { content: '▸ '; }
.detalles { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 24px 0 0; }
.detalles dt { font: italic 800 17px var(--display); text-transform: uppercase; color: var(--marino); }
.detalles dd { margin: 0; color: var(--suave); }
.mapa { border: 2.5px solid var(--marino); border-radius: 24px; overflow: hidden; box-shadow: 8px 8px 0 var(--naranja); min-height: 460px; height: 100%; background: var(--foto); }
.mapa iframe { width: 100%; height: 100%; min-height: 460px; border: 0; }

/* ---------- El patio ---------- */
/* Foto a todo lo ancho para presumir el lugar; el texto va abajo a la izquierda sobre un degradado marino. */
.patio { position: relative; min-height: min(86svh, 760px); display: grid; align-items: end; overflow: hidden; color: var(--papel); isolation: isolate; background: var(--marino-osc); }
.patio-foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.patio::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--marino-osc) 92%, transparent) 0%, color-mix(in srgb, var(--marino-osc) 55%, transparent) 30%, transparent 55%); }
.patio-texto { width: min(var(--ancho), 100% - 2 * var(--margen)); margin: 0 auto; padding: 0 0 clamp(36px, 6vw, 72px); }
.patio .antetitulo { color: var(--amarillo); }
.patio .titulo { color: var(--papel); font-size: clamp(44px, 6vw, 88px); }
.patio p { font-size: clamp(17px, 1.6vw, 21px); max-width: 44ch; margin: 12px 0 0; }
.patio-nota { position: absolute; right: var(--margen); top: 16px; font-size: 13px; color: rgba(255, 250, 240, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }

/* ---------- Eventos ---------- */
.eventos-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.eventos-mascota { width: clamp(150px, 20vw, 240px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 5px solid var(--papel); box-shadow: 6px 6px 0 var(--marino); rotate: -6deg; }
.eventos p { font-size: 20px; max-width: 46ch; margin: 18px 0 26px; }
.eventos .titulo { font-size: clamp(42px, 5.5vw, 76px); }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: 14px; }
.preguntas details { background: var(--crema); border: 2.5px solid var(--marino); border-radius: 18px; padding: 4px 22px; box-shadow: 4px 4px 0 var(--marino); }
.preguntas summary { cursor: pointer; padding: 16px 0; font: italic 800 23px var(--display); text-transform: uppercase; color: var(--marino); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; color: var(--naranja); font-size: 30px; line-height: .8; transition: rotate .2s ease; }
.preguntas details[open] summary::after { rotate: 45deg; }
.preguntas details p { padding: 0 0 18px; color: var(--suave); }

/* ---------- Pie ---------- */
.pie { background: var(--marino-osc); color: color-mix(in srgb, var(--papel) 82%, transparent); padding: 64px 0 28px; border-top: 8px solid var(--naranja); }
.pie-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.pie-logo { width: 190px; margin-bottom: 16px; }
.pie h3 { font: italic 800 20px var(--display); text-transform: uppercase; color: var(--amarillo); margin-bottom: 10px; }
.pie a { color: var(--papel); }
.pie-redes a { margin-right: 14px; }
.pie-final { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 250, 240, .15); font-size: 14px; }
.demo-nota { opacity: .75; }

/* ---------- Flotantes ---------- */
.flotante-whatsapp {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center; box-shadow: 3px 3px 0 var(--marino); border: 2.5px solid var(--marino);
}
.flotante-whatsapp svg { width: 30px; height: 30px; fill: #fff; }
.etiqueta-demo {
  position: fixed; left: 12px; bottom: 12px; z-index: 60; background: var(--amarillo); color: var(--marino); border: 2px solid var(--marino);
  font: 800 12px var(--texto); padding: 4px 10px; border-radius: 999px; letter-spacing: .04em;
}
.aviso-flotante {
  position: fixed; left: 50%; bottom: 90px; translate: -50% 0; z-index: 70; max-width: min(92vw, 460px);
  background: var(--marino); color: var(--papel); padding: 14px 18px; border-radius: 14px; box-shadow: 4px 4px 0 var(--naranja); font-size: 15px;
}

/* Computadoras chicas: teléfono y QR más chicos para que no se encimen. */
@media (max-width: 1180px) and (min-width: 901px) {
  .telefono { width: 205px; }
  .app-qr { width: 136px; padding: 12px; }
  .app-qr p { font-size: 13px; }
  .app-visual { gap: 36px; }
}

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .barra-nav { display: none; }
  .barra-cta { margin-left: auto; }
  .app-grid, .visitanos-grid { grid-template-columns: 1fr; }
  .app-qr { display: none; }
  .pie-grid { grid-template-columns: 1fr; }
  .mapa, .mapa iframe { min-height: 340px; }
}
@media (max-width: 700px) {
  :root { --barra: 60px; }
  body { font-size: 16px; }
  .barra-logo img { height: 50px; }
  .barra-cta { font-size: 15px; padding: 8px 12px; min-height: 40px; box-shadow: 3px 3px 0 var(--marino); }
  /* En celular la foto ocupa toda la pantalla: el texto va arriba (tapa a los empleados del fondo), la carne
     aplastada queda libre en medio y los botones van abajo. Arriba sin sombra azul (Felipe, 4 nov 2026): el
     texto se lee por su propia sombra. */
  .portada { display: block; background: var(--marino-osc); }
  .portada-poster { object-position: 50% 60%; transform-origin: 50% 58%; }
  .portada-medio::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--marino-osc) 80%, transparent) 0%, transparent 24%); }
  .portada-titulo, .portada-sub { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
  .portada-nota { bottom: 146px; }
  .portada-texto {   /* abajo deja libre la etiqueta de demo y el botón de WhatsApp */
    min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start;
    padding: calc(var(--barra) + 14px) 0 84px; gap: 10px;
  }
  .portada-botones { margin-top: auto; }
  .portada-titulo { font-size: clamp(44px, 12vw, 80px); color: var(--papel); }
  .portada-titulo .naranja { text-shadow: 3px 3px 0 var(--marino-osc), 0 2px 14px rgba(0, 0, 0, .6); }
  .portada-sub { color: var(--papel); }
  .portada-titulo .linea { display: inline; }
  .portada-titulo .linea + .linea::before { content: ' '; }
  .portada-titulo { display: block; }
  .portada-botones .boton { min-height: 48px; padding: 10px 18px; font-size: 17px; }
  .portada-bajar { display: none; }
  .historia { height: 300vh; }
  /* Celular: la hamburguesa arriba y el texto abajo, sin encimarse. */
  #lienzo-scroll { width: 100%; height: 68%; top: var(--barra); background-position: 50% 0; }
  .tiempo { top: auto; bottom: 64px; translate: 0 0; }
  .tiempo h2 { font-size: 40px; margin: 4px 0 8px; }
  .tiempo p { font-size: 16px; }
  .estrellas { grid-template-columns: 1fr; }
  .platillo { grid-template-columns: 76px 1fr auto; gap: 12px; }
  .platillo img { width: 76px; height: 64px; }
  .platillo h4 { font-size: 21px; }
  .telefono { width: 230px; }
  .eventos-grid { grid-template-columns: 1fr; justify-items: start; }
  .detalles { grid-template-columns: 1fr; gap: 2px; }
  .detalles dd { margin-bottom: 8px; }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; transform: none; }
  .historia { height: auto; }
  .historia-fija { position: relative; height: auto; min-height: 100svh; }
  .tiempo { position: relative; top: auto; translate: none; opacity: 1; transform: none; margin: 0 0 36px; }
  .historia-textos { position: relative; padding: 96px 0; }
}