/* Sitio público de Azelé Brunch (fase 12). Paleta y tipografías del manual de marca; verdes invertidos
   a pedido de Jeremy (1-oct-2026): el claro manda y el olivo acentúa. Siempre en claro: no hay modo oscuro. */
/* Layout: estilo "nōri": barra arriba, portada a dos columnas (texto + foto), franja de tres valores,
   tarjetas con foto, bloque texto+foto, ubicación, menú completo y pie ancho. Máximo 1040px, apila en celular. */
:root {
  --olivo: #95AB5F; --verde: #526622; --gris: #A4AF9F; --crema: #F6F6EF; --acero: #5C91A4; --petroleo: #1D404D;
  --bg: #F6F6EF; --bg2: #FFFFFF; --bg3: #ECEEE3; --fg: #1D404D; --fg2: #66736a; --linea: #dcdfd2; --sombra: 0 12px 32px rgba(29,64,77,.08);
  color-scheme: light only;
  --ff-titulo: 'Marcellus', Georgia, 'Times New Roman', serif;
  --ff-script: 'Pinyon Script', 'Brush Script MT', cursive;
  --ff-texto: 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --barra-alto: 68px; /* la usan la barra y las pastillas pegadas del menú */
}

* { box-sizing: border-box }
html { color-scheme: light only }
img { max-width: 100% }
[hidden] { display: none !important }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--ff-texto); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased }
a { color: inherit }
/* Sin zoom por doble toque en lo que se toca seguido (flechas, pastillas, círculos, botones). */
a, button, .chip, .valor, .ficha, .item { touch-action: manipulation }
h1, h2, h3 { font-family: var(--ff-titulo); font-weight: 400; text-wrap: balance; margin: 0 }
.envoltura { max-width: 1040px; margin-inline: auto; padding-inline: 24px; padding-block: 0 }
.seccion { padding-block: 96px 0 }
@media (max-width: 640px) { .seccion { padding-block: 64px 0 } }
.seccion__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 32px }
.seccion h2 { font-size: 30px; color: var(--fg) }
.enlace { text-decoration: none; color: var(--olivo); font-weight: 500; font-size: 15px; white-space: nowrap }
.enlace::after { content: ' →' }

/* Foto de ejemplo (hasta tener fotos reales) */
.foto { position: relative; overflow: hidden; max-width: 100%; background: linear-gradient(135deg, var(--olivo), var(--verde)); display: grid; place-items: center; color: rgba(255,255,255,.8); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-radius: 20px }
.foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block }
.foto img { position: absolute; inset: 0 }
.foto--logo { display: grid; place-items: center }
.foto--logo img { position: static; width: 46%; height: auto; object-fit: contain; opacity: .9; filter: brightness(0) invert(1) }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 14px; text-decoration: none; font-weight: 500; font-size: 15px; border: 1.5px solid var(--olivo); color: var(--olivo); background: transparent }
.boton--lleno { background: var(--olivo); color: #fff }
.boton:focus-visible, .chip:focus-visible, .barra a:focus-visible { outline: 3px solid var(--acero); outline-offset: 2px }

/* Barra superior */
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 3; background: var(--bg); border-bottom: 1px solid var(--linea) }
.barra__dentro { max-width: 1040px; margin-inline: auto; padding-inline: 20px; min-height: var(--barra-alto); display: flex; align-items: center; justify-content: space-between; gap: 16px }
.barra img { height: 36px; width: auto; display: block }
.barra nav { display: flex; gap: 28px }
.barra nav a { text-decoration: none; font-size: 15px; color: var(--fg2) }
.insta { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--olivo); border: 1.5px solid var(--olivo) }
.insta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8 }
.insta:focus-visible { outline: 3px solid var(--acero); outline-offset: 2px }
@media (max-width: 640px) { :root { --barra-alto: 60px } .barra__dentro { gap: 10px } .barra img { height: 30px } .barra nav { gap: 14px } .barra nav a { font-size: 14px } }

/* Portada */
.portada { background: var(--bg3); border-radius: 0 0 28px 28px; padding-block: 72px 0 }
.portada .envoltura { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: end }
.portada__texto { display: grid; gap: 22px; padding-bottom: 64px; align-self: center }
.portada h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: .02em; text-transform: uppercase }
.portada h1 em { font-family: var(--ff-script); font-style: normal; text-transform: none; color: var(--olivo); font-size: 1.35em; line-height: .8; letter-spacing: 0 }
.portada .sub { font-family: var(--ff-titulo); font-size: 20px; color: var(--olivo) }
.portada p { margin: 0; max-width: 46ch; color: var(--fg2) }
.portada__botones { display: flex; gap: 12px; flex-wrap: wrap }
.portada__foto { aspect-ratio: 4 / 3; border-radius: 28px 28px 0 0; align-self: end; min-height: 100% }
.portada__foto > img { object-position: center 62% }
@media (max-width: 760px) { .portada .envoltura { grid-template-columns: 1fr } .portada__texto { padding-bottom: 8px } .portada__foto { border-radius: 24px 24px 0 0 } }

/* Franja de tres valores */
.valores { margin-top: -28px; background: var(--bg2); border-radius: 22px; box-shadow: var(--sombra); display: grid; grid-template-columns: repeat(3, 1fr); position: relative; z-index: 1 }
.valor { padding: 30px 26px; display: flex; gap: 16px; align-items: flex-start; font-size: 14.5px; color: var(--fg2); line-height: 1.5; text-decoration: none }
.valor:focus-visible { outline: 3px solid var(--acero); outline-offset: -3px; border-radius: 22px }
.valor div { min-width: 0 }
.valor + .valor { border-left: 1px solid var(--linea) }
.valor svg { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--olivo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--olivo) }
.valor b { display: block; color: var(--fg); font-weight: 500 }
@media (max-width: 640px) { .valores { grid-template-columns: 1fr } .valor + .valor { border-left: 0; border-top: 1px solid var(--linea) } }

/* Tarjetas con foto */

/* Texto + foto */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.dos__texto { display: grid; gap: 20px }
.dos__texto p { margin: 0; color: var(--fg2); max-width: 46ch }
.dos .foto { aspect-ratio: 4 / 3 }
.dos__foto > img { object-position: center 55% }
@media (max-width: 760px) { .dos { grid-template-columns: 1fr; gap: 22px } }

/* Ubicación */
.lugar { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px }
.lugar__foto { aspect-ratio: 16 / 10; position: relative; overflow: hidden }
.lugar__foto > img { object-position: center center }
.lugar__pin { position: absolute; left: 16px; bottom: 16px; right: 16px; background: var(--bg2); color: var(--fg); border-radius: 12px; padding: 10px 14px; font-size: 14px; letter-spacing: 0; text-transform: none; display: flex; gap: 8px; align-items: center; text-decoration: none; line-height: 1.4 }
.lugar__pin-flecha { margin-left: auto; color: var(--olivo); font-size: 22px; line-height: 1 }
.boton--mapa { margin-top: 6px; width: 100%; gap: 10px }
.boton--mapa svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.horario { background: var(--bg2); border-radius: 20px; box-shadow: var(--sombra); padding: 28px; display: grid; gap: 14px; align-content: start }
.horario h3 { font-size: 20px }
.horario table { border-collapse: collapse; width: 100%; font-size: 15px }
.horario td { padding: 10px 0; border-bottom: 1px solid var(--linea) }
.horario td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg2) }
.abierto { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--olivo); font-size: 14px }
.abierto::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde) }
.abierto--cerrado { color: var(--fg2) }
.abierto--cerrado::before { background: var(--gris) }
@media (max-width: 760px) { .lugar { grid-template-columns: 1fr } }

/* Menú: pastillas de categorías */
.chip { flex: none; padding: 9px 16px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--linea); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background-color .25s ease, color .25s ease, border-color .25s ease }
.chip--activa { background: var(--olivo); color: #fff; border-color: var(--olivo) }
.opciones { display: grid; gap: 10px }
.grupo { background: var(--bg2); border-radius: 14px; padding: 12px 14px; font-size: 14px }
.grupo b { font-weight: 500; display: block; margin-bottom: 6px }
.grupo small { color: var(--fg2); font-weight: 400 }
.grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.grupo li { display: flex; justify-content: space-between; gap: 12px; color: var(--fg2); border-top: 1px solid var(--linea); padding-top: 4px }
.grupo .mas { color: var(--olivo); font-weight: 500; font-variant-numeric: tabular-nums }

/* Pie */
.pie { margin-top: 112px; background: var(--bg3); border-radius: 28px 28px 0 0 }
@media (max-width: 640px) { .pie { margin-top: 72px } }
.pie__dentro { max-width: 1040px; margin-inline: auto; padding-inline: 24px; padding-block: 56px 40px; display: grid; gap: 28px; justify-items: center; text-align: center }
.pie img { height: 64px; width: auto }
.pie__col { display: grid; gap: 18px; font-size: 14px; color: var(--fg2); justify-items: center }
.pie__enlaces { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center }
.pie__enlaces a { text-decoration: none; color: var(--fg) }
.pie__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px }
.pie__datos a { text-decoration: none }
.pie__lema { font-family: var(--ff-titulo); font-style: italic; color: var(--olivo) }

/* Especialidades de la casa: carrusel con la tarjeta del centro grande y en verde, las de los lados en
   vidrio sobre una foto difuminada (decisión de Jeremy, 1-oct-2026). */
.banda { position: relative; border-radius: 28px; overflow: hidden; padding: 40px 0 32px; isolation: isolate }
.banda::before { content: ''; position: absolute; inset: -40px; background: url('portada.webp') center 60% / cover; filter: blur(26px) saturate(1.1); z-index: -2; transform: scale(1.1) }
.banda::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,246,239,.55), rgba(149,171,95,.35)); z-index: -1 }
.banda__cabeza { display: flex; justify-content: space-between; align-items: center; padding: 0 32px 0; gap: 12px }
.banda__cabeza h2 { font-size: 28px; color: var(--fg) }
.carrusel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 44px calc(50% - 130px) 16px; /* arriba queda espacio para que un platillo recortado se salga de su tarjeta sin cortarse */ scroll-padding-inline: calc(50% - 130px) }
.carrusel::-webkit-scrollbar { display: none }
.ficha { flex: none; width: 260px; scroll-snap-align: center; border-radius: 22px; padding: 14px 14px 18px; display: grid; gap: 10px; text-decoration: none; color: var(--fg);
  background: rgba(255,255,255,.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.6);
  transform: scale(.9); opacity: .85; transition: transform .35s ease, background-color .35s ease, color .35s ease, opacity .35s ease, box-shadow .35s ease }
.ficha--activa { transform: scale(1); opacity: 1; background: var(--olivo); color: #fff; border-color: transparent; box-shadow: 0 22px 44px rgba(29,64,77,.22) }
.ficha .foto { aspect-ratio: 1 / 1; border-radius: 16px }
.ficha__nombre { font-family: var(--ff-titulo); font-size: 22px; line-height: 1.15 }
.ficha__cat { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75 }
.ficha__pie { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.ficha__precio { font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums }
.ficha__ver { font-size: 13px; font-weight: 500; opacity: .9 }
.ficha--activa .ficha__ver { background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: 999px }
@media (max-width: 640px) { .ficha { width: 230px } .carrusel { padding-inline: calc(50% - 115px); scroll-padding-inline: calc(50% - 115px) } .banda__cabeza h2 { font-size: 24px } }
.puntos { display: flex; justify-content: center; gap: 6px; padding-top: 10px }
.puntos span { width: 7px; height: 7px; border-radius: 50%; background: rgba(29,64,77,.25) }
.puntos span.activo { background: var(--olivo); width: 18px; border-radius: 4px }
  

/* Página del menú «por platillo» (decisión de Jeremy, 1-oct-2026): una categoría a la vez, la lista de sus
   platillos y el elegido en grande. En computadora: texto · plato · lista. En teléfono: toda la pantalla en
   verde, riel blanco de fotos a la izquierda y el plato asomado a la derecha, como una app. */
.cargando { color: var(--fg2); font-size: 14px; padding: 24px 0 }
.pm { padding-block: 28px 0 }
.envoltura.pm { max-width: 1200px } /* el menú necesita más ancho que la portada para sus tres columnas */
.pm__tabs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 24px 16px; margin-inline: -24px }
.pm__tabs::-webkit-scrollbar { display: none }
.pm__tabs .chip { cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--fg) }
.pm__tabs .chip--activa { color: #fff; background: var(--verde); border-color: var(--verde) }

/* Todo se ancla arriba: el plato y sus flechas quedan siempre en el mismo punto y el texto crece hacia abajo.
   --tx/--ty e --ix/--iy son los desplazamientos de las animaciones de entrada (texto e ítems de la lista). */
.escena { --tx: -28px; --ty: 0px; --ix: 22px; --iy: 0px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 480px) minmax(220px, 270px); grid-template-areas: 'texto plato lista'; gap: 40px; align-items: start; margin-top: 20px; min-height: 560px }
.texto { grid-area: texto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; align-content: start; padding-top: 8px; font-size: 14.5px }
.texto h1 { font-size: clamp(28px, 2.7vw, 36px); line-height: 1.08; overflow-wrap: anywhere }
.texto p { margin: 0; color: var(--fg2) }
.texto__precio { justify-self: start; background: var(--verde); color: #fff; font-weight: 600; font-size: 16px; padding: 7px 16px; border-radius: 999px; font-variant-numeric: tabular-nums }
.texto .eyebrow { font-size: 11px }
.texto .opciones { gap: 8px; margin-top: 4px }
.texto .grupo { box-shadow: var(--sombra); font-size: 13px; padding: 10px 12px }
.texto .grupo b { margin-bottom: 4px }
.texto .grupo ul { gap: 3px }
.texto .grupo li { padding-top: 3px }

.plato-zona { grid-area: plato; display: grid; gap: 18px; justify-items: center }
/* El círculo mide lo que su columna y siempre es cuadrado; la foto va encima en posición absoluta para que
   su tamaño natural no lo estire (Safari lo volvía ovalado). --borde es el margen entre el círculo y la foto. */
.plato { --borde: 8%; position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 0; border-radius: 50%; background: var(--bg2); box-shadow: 0 30px 70px rgba(29,64,77,.14) }
.plato__foto { display: block; position: absolute; inset: var(--borde); border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--olivo), var(--verde)); box-shadow: 0 14px 30px rgba(29,64,77,.22) }
.plato__foto img { width: 100%; height: 100%; object-fit: cover; display: block }
.plato__foto.foto--logo { display: grid; place-items: center }
.plato__foto.foto--logo img { width: 42%; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .9 }
.paso { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--fg2) }
.paso button { background: none; border: 0; font: inherit; color: var(--fg2); cursor: pointer; padding: 8px 6px }
.paso button:hover { color: var(--verde) }
.paso__linea { width: 44px; height: 1px; background: var(--gris) }
.paso b { color: var(--fg); font-weight: 600 }

/* La lista se desvanece arriba y abajo solo del lado donde hay más platillos (--arriba / --abajo las pone el JS),
   así los platillos entran y salen en vez de cortarse. El relleno deja espacio a las sombras. */
.lista { grid-area: lista; display: grid; gap: 12px; align-content: start; max-height: 560px; overflow-y: auto; scrollbar-width: none; padding: 10px 14px 14px 10px; margin: -10px -14px -14px -10px;
  --arriba: 0px; --abajo: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--arriba), #000 calc(100% - var(--abajo)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--arriba), #000 calc(100% - var(--abajo)), transparent 100%) }
.riel-mas { display: none }
.lista--mas-arriba { --arriba: 56px }
.lista--mas-abajo { --abajo: 56px }
.lista::-webkit-scrollbar { display: none }
.item { display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; color: var(--fg); background: var(--bg2); border: 0; border-radius: 999px; padding: 9px 20px 9px 9px; cursor: pointer; box-shadow: var(--sombra) }
.item__foto { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--olivo), var(--verde)); display: grid; place-items: center }
.item__foto img { width: 100%; height: 100%; object-fit: cover; display: block }
.item__foto .logo-vacio { width: 44%; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .85 }
.item__texto { display: grid; gap: 1px; min-width: 0 }
.item__nombre { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25 }
.item__precio { font-size: 13px; color: var(--fg2); font-variant-numeric: tabular-nums }
.item--activo { background: var(--verde); color: #fff }
.item--activo .item__precio { color: rgba(255,255,255,.8) }
.item:focus-visible, .paso button:focus-visible { outline: 3px solid var(--acero); outline-offset: 2px }

/* Teléfono: riel blanco a la izquierda, panel verde con el plato asomado a la derecha. */
@media (max-width: 980px) {
  /* La pantalla en verde, como una app, debajo de la barra (que queda crema, igual que en la portada);
     el riel va pegado a la orilla. */
  html.menu-app, .menu-app body { background: var(--verde) }
  /* El pie también en verde, con letra clara y el logo en blanco. */
  .menu-app .pie { margin-top: 0; background: var(--verde); border-radius: 0; border-top: 1px solid rgba(246,246,239,.16) }
  .menu-app .pie img { filter: brightness(0) invert(1); opacity: .92 }
  .menu-app .pie__col { color: rgba(246,246,239,.78) }
  .menu-app .pie__enlaces a { color: #F6F6EF }
  .menu-app .pie__lema { color: #DDE7B5 }
  .pm { padding-block: 14px 28px }
  .pm__tabs .chip { background: rgba(246,246,239,.13); border-color: transparent; color: #F6F6EF }
  .pm__tabs .chip--activa { background: #F6F6EF; border-color: #F6F6EF; color: var(--verde) }
  .menu-app .cargando { color: rgba(246,246,239,.72) }
  .escena { --tx: 0px; --ty: 14px; --ix: 0px; --iy: -12px; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: 'lista plato' 'lista texto'; gap: 0; align-items: start; color: #F6F6EF; overflow: hidden; min-height: calc(100svh - 150px); margin-inline: -24px; margin-top: 4px }
  .lista { -webkit-mask-image: none; mask-image: none; margin: 0; align-self: start; margin-block: 8px 20px; height: calc(100svh - var(--barra-alto) - 112px); min-height: 300px; background: var(--bg2); border-radius: 0 22px 22px 0; display: flex; flex-direction: column; padding: 20px 0 0; gap: 4px; max-height: none; overflow-y: auto; justify-items: stretch }
  /* Flecha al pie del riel: una franja blanca que se queda pegada abajo mientras queden platillos por ver
     (los platillos pasan por detrás, con un borde suave) y baja el riel al tocarla. El riel es una columna
     flexible para que «sticky» funcione dentro de él. */
  .lista > .item { flex: none }
  .lista > .item:nth-last-child(2) { margin-bottom: 18px }
  .riel-mas { display: grid; place-items: center; flex: none; position: sticky; bottom: 0; z-index: 2; height: 46px; margin-top: -46px; padding: 0; border: 0; cursor: pointer;
    background: var(--bg2); box-shadow: 0 -12px 12px -2px var(--bg2); border-radius: 0 0 22px 0; opacity: 0; pointer-events: none; transition: opacity .25s ease }
  .riel-mas svg { width: 26px; height: 26px; fill: none; stroke: var(--verde); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
  .lista--mas-abajo .riel-mas { opacity: 1; pointer-events: auto }
  /* El riel tiene alto fijo (según la pantalla, no según el texto del platillo) y, donde el navegador lo
     permite, se queda a la vista al bajar a leer las opciones. */
  @supports (overflow: clip) {
    .escena { overflow: visible; overflow-x: clip }
    .lista { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--barra-alto) + 8px) }
  }
  .item { background: none; box-shadow: none; border-radius: 16px 0 0 16px; padding: 8px 0; justify-content: center; margin-left: 10px }
  .item__texto { display: none }
  .item { position: relative }
  .item--activo { background: var(--verde) }
  /* Esquinas del riel redondeadas hacia adentro, arriba y abajo de la pestaña activa. */
  .item--activo::before, .item--activo::after { content: ''; position: absolute; right: 0; width: 16px; height: 16px; pointer-events: none }
  .item--activo::before { bottom: 100%; background: radial-gradient(circle at 0 0, var(--bg2) 15.5px, var(--verde) 16px) }
  .item--activo::after { top: 100%; background: radial-gradient(circle at 0 100%, var(--bg2) 15.5px, var(--verde) 16px) }
  .item--activo .item__foto { box-shadow: 0 0 0 3px rgba(246,246,239,.55) }
  /* El plato es el protagonista (boceto de Jeremy, 1-oct-2026): casi del ancho de la pantalla, empieza junto
     al riel, se sale por la derecha y pisa un poco el texto de abajo. */
  .plato-zona { justify-items: start; padding-top: 14px; min-width: 0; position: relative; z-index: 1 }
  .plato { --borde: 0px; width: min(96vw, 470px); max-width: none; margin: 0 0 -7vw 10px; background: none; box-shadow: none }
  .menu-app .plato__foto.foto--recortada img { transform: none } /* ya es enorme: sin el 14 % extra de computadora */
  /* Un recorte trae aire transparente arriba y abajo del plato: se compensa subiendo el plato y, sobre
     todo, el texto, para que quede pegado al platillo. */
  .plato:has(.foto--recortada) { margin-top: -7vw; margin-bottom: -17vw }
  .plato__foto { box-shadow: 0 18px 40px rgba(0,0,0,.28) }
  .paso { display: none }
  .texto { padding: 18px 24px 26px 18px; gap: 12px }
  .texto h1 { font-size: 32px; color: #EEF2C8 }
  .texto p { color: rgba(246,246,239,.86); font-size: 15px }
  .texto .eyebrow { color: rgba(246,246,239,.7) }
  .texto__precio { background: rgba(246,246,239,.16); font-size: 18px; padding: 8px 18px }
  .texto .grupo { background: rgba(246,246,239,.12); box-shadow: none; color: #F6F6EF }
  .texto .grupo li { color: rgba(246,246,239,.85); border-top-color: rgba(246,246,239,.2) }
  .texto .grupo small { color: rgba(246,246,239,.7) }
  .texto .grupo .mas { color: #DDE7B5 }
}

@media (prefers-reduced-motion: no-preference) {
  .plato__foto, .texto { transition: opacity .28s ease, transform .38s cubic-bezier(.2,.7,.2,1) }
  .escena--cambiando .plato__foto { opacity: 0; transform: rotate(-22deg) scale(.9) }
  .escena--cambiando .texto { opacity: 0; transform: translateY(10px) }
  .lista--mas-abajo .riel-mas svg { animation: rebota 1.6s ease-in-out infinite }
  @keyframes rebota { 0%, 100% { transform: none } 50% { transform: translateY(5px) } }
  /* Entrada al abrir el menú: el texto, el plato y la lista llegan cada uno por su lado. Con
     «backwards» la animación no deja nada pegado y los fundidos de después siguen funcionando. */
  .escena .texto { animation: entraTexto .7s cubic-bezier(.2,.7,.2,1) .1s backwards }
  .escena .plato { animation: entraPlato .8s cubic-bezier(.2,.7,.2,1) backwards }
  .escena .paso { animation: entrar .6s ease-out .35s backwards }
  @keyframes entraTexto { from { opacity: 0; transform: translate(var(--tx), var(--ty)) } }
  @keyframes entraPlato { from { opacity: 0; transform: scale(.86) rotate(-14deg) } }
  /* La lista entra en cascada, también cada vez que se cambia de categoría (--i lo pone el JS). */
  .item { animation: entraItem .45s ease-out calc(var(--i, 0) * 55ms + 120ms) backwards }
  @keyframes entraItem { from { opacity: 0; transform: translate(var(--ix), var(--iy)) } }
  .item, .item__foto { transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease }
  .item:hover .item__foto { transform: scale(1.08) }
}
  

/* Página de error (404.html): la muestra nginx en cualquier dirección que no exista. */
.perdido { display: grid; justify-items: center; text-align: center; gap: 18px; padding-block: 72px 96px }
.perdido__logo { width: 96px; height: auto }
.perdido h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.1; max-width: 16ch }
.perdido h1 em { font-family: var(--ff-script); font-style: normal; color: var(--olivo); font-size: 1.3em; line-height: .8 }
.perdido p { margin: 0; color: var(--fg2); max-width: 40ch }
.perdido .portada__botones { justify-content: center }

/* Fotos recortadas sin fondo (PNG o WebP con transparencia; Jeremy, 1-oct-2026): el platillo flota, sin
   círculo ni fondo verde, y se sale un poco de su tarjeta. Las fotos normales no cambian. */
.plato__foto.foto--recortada, .item__foto.foto--recortada, .ficha .foto.foto--recortada { background: none; border-radius: 0; overflow: visible; box-shadow: none }
.plato__foto.foto--recortada img, .item__foto.foto--recortada img, .ficha .foto.foto--recortada img { object-fit: contain; border-radius: 0 }
.plato__foto.foto--recortada img { transform: scale(1.14); filter: drop-shadow(0 22px 26px rgba(29,64,77,.30)) }
.item__foto.foto--recortada img { transform: scale(1.12); filter: drop-shadow(0 4px 6px rgba(29,64,77,.25)) }
.ficha .foto.foto--recortada img { transform: translateY(-9%) scale(1.16); filter: drop-shadow(0 18px 20px rgba(29,64,77,.30)) }
.ficha:hover .foto.foto--recortada img { transform: translateY(-11%) scale(1.2) }

/* Movimiento discreto (Jeremy, 1-oct-2026). Sin JS todo se ve quieto y completo; con
   «reducir movimiento» activado en el teléfono, nada se mueve. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }
  /* Portada: el texto y la foto entran suaves al cargar. */
  .portada__texto, .portada__foto { animation: entrar .9s cubic-bezier(.2,.7,.2,1) both }
  .portada__foto { animation-delay: .25s; animation-name: entrarFoto }
  @keyframes entrar { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
  @keyframes entrarFoto { from { opacity: 0; transform: translateY(28px) scale(.96) } to { opacity: 1; transform: none } }
  /* Secciones: aparecen al llegar a ellas (la clase la pone el JS). */
  .revela { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1) }
  /* Dentro de una sección, las tarjetas y los accesos entran una tras otra. */
  .revela .valor { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s ease-out }
  .revela--visto .valor { opacity: 1; transform: none }
  .revela--visto .valor:nth-child(2) { transition-delay: .1s }
  .revela--visto .valor:nth-child(3) { transition-delay: .2s }
  .revela--visto { opacity: 1; transform: none }
  /* Toques: tarjetas, círculos y botones responden al pasar el dedo o el ratón. */
  .valor, .boton, .insta, .lugar__pin { transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease }
  .ficha .foto img { transition: transform .5s ease }
  .ficha:hover .foto img { transform: scale(1.06) }
  .valor:hover { background: var(--crema) }
  .boton:hover, .insta:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(82,102,34,.22) }
  .lugar__pin:hover { transform: translateY(-2px); box-shadow: var(--sombra) }
}

/* ---------- Ticket del cliente (/t/<clave>) ---------- */
.ticket-envoltura { max-width: 520px; padding-block: 28px 64px; display: grid; gap: 16px }
.ticket { background: var(--bg2); border-radius: 22px; padding: 28px 24px; display: grid; gap: 18px; box-shadow: var(--sombra) }
.ticket__marca { display: grid; justify-items: center; gap: 2px; text-align: center }
.ticket__marca img { height: 44px; width: auto }
/* El lema igual que en la portada: Marcellus en mayúsculas y «good» en la letra manuscrita olivo */
.ticket__lema { margin: 6px 0 0; font-family: var(--ff-titulo); font-size: 26px; line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; color: var(--fg) }
.ticket__lema em { font-family: var(--ff-script); font-style: normal; text-transform: none; color: var(--olivo); font-size: 1.35em; line-height: .8; letter-spacing: 0 }
.ticket__negocio { font-size: 12.5px; color: var(--fg2); line-height: 1.5; margin-top: 6px }
.ticket__cancelado { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fbe9e5; color: #a33c2b; font-weight: 600; text-align: center }
.ticket--cancelado .ticket__lineas, .ticket--cancelado .ticket__total, .ticket--cancelado .ticket__pago { opacity: .55; text-decoration: line-through }
.ticket__datos, .ticket__pago { margin: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; font-size: 14px; line-height: 1.5 }
.ticket__datos { border-top: 1px dashed var(--linea); border-bottom: 1px dashed var(--linea); padding-block: 10px }
.ticket__datos dt, .ticket__pago dt { color: var(--fg2) }
.ticket__datos dd, .ticket__pago dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 0 }
.ticket__lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.ticket__lineas > li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; font-size: 15px; line-height: 1.5 }
.ticket__nombre { font-weight: 500 }
.ticket__precio { font-variant-numeric: tabular-nums; white-space: nowrap }
.ticket__opciones { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0 0 0 22px; font-size: 13px; color: var(--fg2); display: grid; gap: 2px }
.ticket__opciones li { display: flex; justify-content: space-between; gap: 12px }
.ticket__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--fg); padding-top: 10px; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--fg2) }
.ticket__total strong { font-size: 28px; letter-spacing: 0; text-transform: none; color: var(--verde); font-variant-numeric: tabular-nums }
.ticket__pie { border-top: 1px dashed var(--linea); padding-top: 12px; text-align: center; font-size: 12.5px; color: var(--fg2); line-height: 1.6 }
.ticket__pie p { margin: 0 }
.ticket__pie p:first-child { color: var(--verde); font-weight: 500; font-size: 14px }
.ticket__acciones { display: flex; gap: 10px }
.ticket__acciones .boton { flex: 1; font-family: inherit; cursor: pointer }
.ticket-aviso { padding-block: 48px 24px; gap: 12px }
.ticket-aviso p { margin: 0; color: var(--fg2); max-width: 32ch }