/* ═══════════════════════════════════════════════════════
   RAM RAM · sistema visual
   Paleta tomada del logotipo: durazno + coral + matcha + nori
   Tipografía: Archivo variable (ancho 62–125) + Zen Kaku Gothic New
   ═══════════════════════════════════════════════════════ */

:root{
  --nori:#14110E;
  --nori-suave:#3A322B;
  --durazno:#F9C9A6;
  --durazno-hondo:#F2B187;
  --crema:#F7EBDA;
  --coral:#EE7F5F;
  --coral-hondo:#D9603F;
  --matcha:#2E6B59;
  --arroz:#FFFCF7;

  --display:"Archivo","Arial Black",sans-serif;
  --texto:"Zen Kaku Gothic New","Helvetica Neue",sans-serif;

  --ancho:1180px;
  --radio:2px;
  --sombra:0 1px 0 rgba(20,17,14,.08), 0 18px 40px -28px rgba(20,17,14,.5);
  --curva:cubic-bezier(.16,.84,.44,1);
}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--arroz);
  color:var(--nori);
  font-family:var(--texto);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);line-height:.95}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}

.vo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Blindaje: cualquier elemento con [hidden] se oculta pase lo que pase,
   sin importar qué display le dé después su propia clase. Sin esto, una
   regla como .panel{display:flex} le gana al hidden del navegador por
   cargar después con la misma especificidad, y el elemento no desaparece
   aunque JS le quite/ponga el atributo. */
[hidden]{display:none !important}

.salto-contenido{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--nori);color:var(--arroz);padding:.8rem 1.2rem;
}
.salto-contenido:focus{left:.5rem;top:.5rem}

:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:1px}

.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}

/* ── botones ── */
.boton{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 700;
  font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;
  padding:.85rem 1.4rem;border-radius:999px;border:1.5px solid transparent;
  transition:transform .25s var(--curva),background-color .25s,color .25s,border-color .25s;
  cursor:pointer;
}
.boton:hover{transform:translateY(-2px)}
.boton:active{transform:translateY(0)}
.boton--coral{background:var(--coral);color:var(--arroz)}
.boton--coral:hover{background:var(--coral-hondo)}
.boton--negro{background:var(--nori);color:var(--arroz)}
.boton--negro:hover{background:var(--nori-suave)}
.boton--crema{background:var(--crema);color:var(--nori)}
.boton--linea{border-color:var(--nori);color:var(--nori);background:transparent}
.boton--linea:hover{background:var(--nori);color:var(--arroz)}
.boton--fantasma{border-color:rgba(255,252,247,.45);color:var(--arroz);background:transparent}
.boton--fantasma:hover{background:var(--arroz);color:var(--nori);border-color:var(--arroz)}
.boton--grande{padding:1.05rem 2rem;font-size:.9rem}
.boton--ancho{width:100%}
.boton__icono{width:.95em;height:.95em;fill:currentColor;vertical-align:-.1em}
[data-proximamente]{opacity:.55;pointer-events:none}

/* ═══════════ BARRA ═══════════ */
.barra{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:.8rem clamp(1rem,3vw,2rem);
  background:rgba(249,201,166,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(20,17,14,.12);
  transition:background-color .3s;
}
.barra[data-fija="si"]{background:rgba(255,252,247,.94)}

.barra__marca{
  display:inline-flex;align-items:center;gap:.4rem;
  text-decoration:none;font-family:var(--display);
  font-variation-settings:"wdth" 125,"wght" 900;
  font-size:1.15rem;letter-spacing:-.02em;
}
.barra__punto{width:7px;height:7px;border-radius:50%;background:var(--coral)}

.barra__nav{margin-inline:auto}
.barra__nav ul{display:flex;gap:1.75rem}
.barra__nav a{
  text-decoration:none;font-size:.85rem;font-weight:500;
  letter-spacing:.02em;padding-block:.35rem;
  border-bottom:2px solid transparent;
  transition:border-color .2s;
}
.barra__nav a:hover,.barra__nav a[aria-current="true"]{border-color:var(--coral)}

/* El juego no es una sección más de la carta: el punto matcha lo marca
   como algo de otra naturaleza sin subirle la jerarquía. */
.barra__juego{display:inline-flex;align-items:center;gap:.4rem}
.barra__chispa{
  width:6px;height:6px;border-radius:50%;background:var(--matcha);flex:none;
  box-shadow:0 0 0 0 rgba(46,107,89,.5);animation:pulso-chispa 3.6s var(--curva) infinite;
}
@keyframes pulso-chispa{
  0%{box-shadow:0 0 0 0 rgba(46,107,89,.45)}
  35%,100%{box-shadow:0 0 0 6px rgba(46,107,89,0)}
}
.menu-movil .barra__juego .barra__chispa{width:9px;height:9px}

.barra__hamburguesa{
  display:none;background:none;border:0;padding:.6rem;cursor:pointer;color:inherit;
}
.barra__lineas,.barra__lineas::before,.barra__lineas::after{
  display:block;width:22px;height:2px;background:currentColor;transition:transform .3s var(--curva),opacity .2s;
}
.barra__lineas::before,.barra__lineas::after{content:"";position:relative}
.barra__lineas::before{top:-7px}
.barra__lineas::after{top:5px}
.barra__hamburguesa[aria-expanded="true"] .barra__lineas{background:transparent}
.barra__hamburguesa[aria-expanded="true"] .barra__lineas::before{transform:translateY(7px) rotate(45deg)}
.barra__hamburguesa[aria-expanded="true"] .barra__lineas::after{transform:translateY(-5px) rotate(-45deg)}

.menu-movil{
  position:sticky;top:57px;z-index:99;
  background:var(--arroz);border-bottom:1px solid rgba(20,17,14,.12);
  padding:1.25rem clamp(1rem,4vw,2rem) 1.75rem;
}
.menu-movil ul{display:grid;gap:.25rem;margin-bottom:1.25rem}
.menu-movil a:not(.boton){
  display:block;padding:.7rem 0;text-decoration:none;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 700;
  font-size:1.45rem;border-bottom:1px solid rgba(20,17,14,.1);
}
.menu-movil .boton{margin-bottom:.6rem}

/* ═══════════ PORTADA ═══════════ */
.portada{
  position:relative;
  background:var(--durazno);
  min-height:clamp(620px,92svh,900px);
  display:grid;place-items:center;
  padding:clamp(3rem,8vh,5rem) 1.25rem clamp(3.5rem,9vh,6rem);
  overflow:hidden;
}
.portada__lluvia{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;touch-action:manipulation;
}
.portada__arco{
  position:absolute;top:6%;left:50%;transform:translateX(-50%);
  width:min(1150px,108vw);color:rgba(20,17,14,.5);z-index:0;pointer-events:none;
}
.portada__centro{position:relative;z-index:2;text-align:center;max-width:44rem;pointer-events:none}
.portada__centro a,.portada__centro .estado{pointer-events:auto}

.portada__lugar{
  font-family:var(--display);
  font-variation-settings:"wdth" 78,"wght" 600;
  font-size:.75rem;letter-spacing:.42em;text-transform:uppercase;
  margin-bottom:clamp(2.5rem,9vh,5rem);
}
.portada__by{
  font-family:var(--display);font-variation-settings:"wdth" 90,"wght" 400;
  font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:.12em;margin-bottom:.1em;
}
.portada__marca{
  display:flex;justify-content:center;gap:.18em;flex-wrap:wrap;
  font-variation-settings:"wdth" 125,"wght" 900;
  font-size:clamp(3.6rem,15vw,9.5rem);
  letter-spacing:-.035em;
  margin-bottom:.1em;
}
.portada__palabra{display:inline-block}

.portada__curva{
  width:min(460px,88%);margin:0 auto .4rem;display:block;
}
.portada__curva text{
  font-family:var(--display);
  font-variation-settings:"wdth" 80,"wght" 800;
  font-size:34px;letter-spacing:11px;fill:var(--nori);
}

.portada__resumen{
  max-width:34rem;margin:.6rem auto 1.4rem;
  font-size:1.02rem;color:var(--nori-suave);
}

.estado{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,252,247,.75);border:1px solid rgba(20,17,14,.14);
  padding:.4rem .9rem;border-radius:999px;
  font-size:.82rem;font-weight:500;margin-bottom:1.6rem;
}
.estado__punto{width:8px;height:8px;border-radius:50%;background:var(--nori-suave);flex:none}
.estado[data-estado="abierto"] .estado__punto{background:#2FA36B;box-shadow:0 0 0 0 rgba(47,163,107,.55);animation:latido 2.2s infinite}
.estado[data-estado="cerrado"] .estado__punto{background:var(--coral-hondo)}
@keyframes latido{70%{box-shadow:0 0 0 9px rgba(47,163,107,0)}100%{box-shadow:0 0 0 0 rgba(47,163,107,0)}}

.portada__acciones{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.portada__pista{
  margin-top:2.2rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(20,17,14,.45);
}

/* ── anzuelo del juego ──
   Solo aparece cuando alguien ya reventó un par de bolas de arroz: el
   descubrimiento se gana jugando, no se impone. Se queda al nivel de la
   pista que reemplaza, sin competir con los botones de la portada. */
.portada__anzuelo{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:2.2rem;padding:.45rem .95rem;
  border:1px solid rgba(46,107,89,.35);border-radius:999px;
  background:rgba(255,252,247,.6);
  color:var(--matcha);text-decoration:none;
  font-size:.76rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;
  animation:asomar .5s var(--curva) both;
  transition:background-color .25s,border-color .25s;
}
.portada__anzuelo:hover{background:var(--matcha);border-color:var(--matcha);color:var(--crema)}
.portada__anzuelo-eco{
  width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;opacity:.8;
}
@keyframes asomar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ═══════════ SECCIONES ═══════════ */
.seccion{padding:clamp(4rem,10vw,7.5rem) 0}
.seccion--arroz{background:var(--arroz)}
.seccion--crema{background:var(--crema)}
.seccion--nori{background:var(--nori);color:var(--crema)}
.seccion--matcha{background:var(--matcha);color:var(--crema)}

.titulo{max-width:40rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.titulo__ceja{
  font-family:var(--display);font-variation-settings:"wdth" 78,"wght" 700;
  font-size:.72rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--coral);margin-bottom:1rem;
}
.seccion--matcha .titulo__ceja{color:var(--durazno)}
.titulo__texto{
  font-variation-settings:"wdth" 108,"wght" 900;
  font-size:clamp(2.1rem,6vw,3.7rem);letter-spacing:-.025em;
}
.titulo__nota{margin-top:1.2rem;color:var(--nori-suave);max-width:36rem}
.titulo--claro .titulo__nota{color:rgba(247,235,218,.72)}
.titulo--claro .titulo__nota a{color:var(--durazno)}
.titulo__nota a{color:var(--coral-hondo);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Reseñas: tarjetas claras que resaltan contra el fondo matcha oscuro
   de la sección — el contraste es lo que las separa visualmente de
   Nosotros (arriba) y Visítanos (abajo), que son las dos claras. */
.resenas__lista{
  display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:2rem;list-style:none;padding:0;
}
.resena{
  border:1px solid rgba(20,17,14,.1);border-radius:var(--radio);
  padding:1.3rem 1.4rem;background:var(--arroz);
  box-shadow:0 14px 30px -18px rgba(20,17,14,.5);
}
.resena__estrellas{display:flex;gap:.15rem;margin-bottom:.7rem}
.resena__estrellas svg{width:15px;height:15px;fill:var(--coral)}
.resena__texto{font-size:.95rem;line-height:1.6;margin:0 0 .8rem;color:var(--nori)}
.resena__autor{font-size:.82rem;color:var(--nori-suave);margin:0}

/* ── filtros de la carta ── */
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.filtro{
  font-family:var(--display);font-variation-settings:"wdth" 88,"wght" 700;
  font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  background:transparent;border:1.5px solid rgba(20,17,14,.2);color:var(--nori);
  padding:.55rem 1.05rem;border-radius:999px;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.filtro:hover{border-color:var(--nori)}
.filtro[aria-selected="true"]{background:var(--nori);border-color:var(--nori);color:var(--arroz)}

/* ── platillos ── */
.carta{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
.grupo__encabezado{
  display:flex;align-items:baseline;gap:1rem;
  padding-bottom:.7rem;margin-bottom:1.5rem;
  border-bottom:2px solid var(--nori);
}
.grupo__nombre{
  font-variation-settings:"wdth" 118,"wght" 900;
  font-size:clamp(1.5rem,3.4vw,2.15rem);letter-spacing:-.02em;
}
.grupo__kana{
  font-size:.95rem;font-weight:500;color:var(--coral);letter-spacing:.08em;margin-left:auto;
}

.platillos{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.platillo{
  position:relative;
  border:1px solid rgba(20,17,14,.14);border-radius:var(--radio);
  padding:1.35rem 1.4rem 1.4rem;background:var(--arroz);
  transition:border-color .25s,transform .25s var(--curva),box-shadow .25s;
}
.platillo:hover{border-color:var(--nori);transform:translateY(-3px);box-shadow:var(--sombra)}
.platillo__fila{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.5rem}
.platillo__nombre{
  font-variation-settings:"wdth" 100,"wght" 800;
  font-size:1.18rem;letter-spacing:-.01em;
}
.platillo__precio{
  margin-left:auto;flex:none;
  display:grid;place-items:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--durazno);
  font-family:var(--display);font-variation-settings:"wdth" 88,"wght" 800;
  font-size:.98rem;
}
.platillo__desc{font-size:.94rem;color:var(--nori-suave);margin:0}

/* Selector de proteína/salsa: reemplaza los chips decorativos de antes
   — ahora sí decide qué se agrega al pedido, no es solo informativo. */
.platillo__selector{
  display:flex;flex-direction:column;gap:.3rem;margin-top:.9rem;
}
.platillo__selector-etiqueta{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nori-suave);font-weight:600;
}
.platillo__select{
  font-family:var(--texto);font-size:.9rem;color:var(--nori);
  border:1.5px solid rgba(20,17,14,.22);border-radius:8px;
  padding:.5rem .7rem;background:var(--arroz);cursor:pointer;
  transition:border-color .2s;
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%2314110E" stroke-width="1.6" stroke-linecap="round"><path d="M5 7l5 5 5-5"/></svg>');
  background-repeat:no-repeat;background-position:right .6rem center;background-size:16px;
  padding-right:2rem;
}
.platillo__select:hover,.platillo__select:focus{border-color:var(--coral)}
.platillo__estrella{
  position:absolute;top:-9px;left:1.2rem;
  background:var(--coral);color:var(--arroz);
  font-family:var(--display);font-variation-settings:"wdth" 80,"wght" 800;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:999px;
}

/* ── pasos ── */
.pasos{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:3rem}
.paso{border-top:2px solid var(--coral);padding-top:1.2rem}
.paso__num{
  display:block;font-family:var(--display);
  font-variation-settings:"wdth" 125,"wght" 900;
  font-size:2.6rem;color:var(--coral);line-height:1;margin-bottom:.5rem;
}
.paso__titulo{font-variation-settings:"wdth" 100,"wght" 800;font-size:1.3rem;margin-bottom:.5rem}
.paso__texto{color:rgba(247,235,218,.78);margin:0;font-size:.96rem}
.paso__texto a{color:var(--durazno)}
.ordenar__cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* ── nosotros ── */
.nosotros{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:900px){.nosotros{grid-template-columns:1fr 1fr;align-items:start}}
.nosotros__texto p{color:var(--nori-suave);max-width:34rem}
.nosotros__texto .titulo__texto{margin-bottom:1.4rem}

.datos{display:flex;gap:2rem;flex-wrap:wrap;margin:2rem 0 0}
.datos__item dt{
  font-family:var(--display);font-variation-settings:"wdth" 78,"wght" 700;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--coral);
}
.datos__item dd{
  margin:.25rem 0 0;font-family:var(--display);
  font-variation-settings:"wdth" 110,"wght" 800;font-size:1.35rem;
}

/* align-items:start evita que el <figure> se estire para llenar toda
   la celda del grid — sin esto, la altura de la figura se calcula de
   forma circular (depende de su propio contenido, que incluye la
   imagen), y la imagen puede terminar más alta de lo que debería,
   tapando el pie de foto que va justo debajo. Con align-items:start,
   cada figura mide exactamente lo que su contenido real ocupa. */
.nosotros__fotos{display:grid;gap:1rem;grid-template-columns:1fr 1fr;align-items:start}
.foto{margin:0}
.foto--alta{grid-row:span 2}
.foto--ancha{grid-column:span 2}
.foto img{width:100%;display:block;object-fit:cover;border-radius:var(--radio)}
.foto--alta img{aspect-ratio:3/4}
.foto--noche{grid-row:span 2}
.foto--noche img{aspect-ratio:9/16;object-position:center 30%}
.foto--ancha img{aspect-ratio:21/9}
.foto:not(.foto--alta):not(.foto--noche):not(.foto--ancha) img{aspect-ratio:4/3}
.foto figcaption{
  margin-top:.5rem;font-size:.76rem;letter-spacing:.02em;color:var(--nori-suave);
}

/* ── visítanos ── */
.visita{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:900px){.visita{grid-template-columns:1.35fr 1fr}}

.mapa{
  position:relative;aspect-ratio:4/3;margin-bottom:.9rem;
  border:1px solid rgba(20,17,14,.18);border-radius:var(--radio);overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(20,17,14,.07) 38px 39px),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(20,17,14,.07) 38px 39px),
    var(--crema);
}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.mapa__activar{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:transparent;border:0;cursor:pointer;color:var(--nori);
  font-family:var(--display);font-variation-settings:"wdth" 88,"wght" 700;
  font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
}
.mapa__pin{
  width:26px;height:26px;border-radius:50% 50% 50% 2px;
  background:var(--coral);transform:rotate(-45deg);
  box-shadow:0 10px 18px -8px rgba(20,17,14,.6);
}
.mapa__activar:hover .mapa__pin{animation:brinco .7s var(--curva)}
@keyframes brinco{50%{transform:rotate(-45deg) translate(6px,-6px)}}

.visita__datos{display:grid;gap:1.25rem;align-content:start}
.tarjeta{border:1px solid rgba(20,17,14,.16);border-radius:var(--radio);padding:1.4rem}
.tarjeta__titulo{
  font-variation-settings:"wdth" 100,"wght" 800;font-size:1.2rem;margin-bottom:1rem;
}
.horario{width:100%;border-collapse:collapse;font-size:.93rem}
.horario td{padding:.4rem 0;border-bottom:1px solid rgba(20,17,14,.1)}
.horario tr:last-child td{border-bottom:0}
.horario td:last-child{text-align:right;color:var(--nori-suave);font-variant-numeric:tabular-nums}
.horario tr[data-hoy="si"] td{font-weight:700;color:var(--coral-hondo)}

.contacto li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid rgba(20,17,14,.1);font-size:.93rem;
}
.contacto li:last-child{border-bottom:0}
.contacto span:first-child{color:var(--nori-suave)}

/* ── juego ──
   Es una franja, no una sección: la mitad de aire vertical y un título
   dos escalones abajo del de las secciones reales. Se lee como un extra
   de la casa, que es exactamente lo que es. */
.franja{padding:clamp(2.5rem,6vw,4rem) 0}
.franja--matcha{background:var(--matcha);color:var(--crema)}

.juego{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.juego{grid-template-columns:1fr minmax(0,200px);gap:2.5rem}}
.juego__texto p{color:rgba(247,235,218,.8);max-width:34rem;margin-bottom:.7rem}
.juego__ceja{
  font-family:var(--display);font-variation-settings:"wdth" 78,"wght" 700;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--durazno);margin-bottom:.7rem;
}
.juego__titulo{
  font-variation-settings:"wdth" 105,"wght" 900;
  font-size:clamp(1.6rem,3.6vw,2.35rem);letter-spacing:-.02em;
  overflow-wrap:anywhere;margin-bottom:.8rem;
}
.juego__nota{font-size:.82rem;color:rgba(247,235,218,.5);margin-bottom:1.2rem}

.juego__arte{position:relative;aspect-ratio:1;max-width:200px;margin-inline:auto;width:100%}
@media(max-width:759px){.juego__arte{display:none}}
.bola{
  position:absolute;width:52px;height:52px;border-radius:50%;
  background:var(--arroz);
  box-shadow:inset 0 -6px 0 rgba(20,17,14,.06);
  animation:caer 3.4s var(--curva) infinite;
}
.bola::after{
  content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:26px;height:16px;border-radius:3px;background:var(--nori);
}
.bola--1{left:12%;animation-delay:0s}
.bola--2{left:44%;width:40px;height:40px;animation-delay:.9s}
.bola--3{left:74%;width:46px;height:46px;animation-delay:1.8s}
@keyframes caer{
  0%{top:-15%;opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{top:72%;opacity:0}
}
.canasta{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:56%;height:22%;
  border:3px solid var(--durazno);border-top:0;
  border-radius:0 0 100px 100px;
}
.canasta::before{
  content:"";position:absolute;top:-3px;left:-3px;right:-3px;height:3px;background:var(--durazno);
}

/* ── pie ── */
.pie{background:var(--nori);color:var(--crema);padding:clamp(3rem,7vw,4.5rem) 0 2rem}
.pie__grid{display:grid;gap:2.25rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.pie__marca{
  font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;
  font-size:1.9rem;letter-spacing:-.02em;margin-bottom:.3rem;
}
.pie__lema{font-size:.85rem;color:rgba(247,235,218,.6);margin:0}
.pie__titulo{
  font-variation-settings:"wdth" 78,"wght" 700;
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--durazno);margin-bottom:.9rem;
}
.pie address{font-style:normal;font-size:.93rem;color:rgba(247,235,218,.78);line-height:1.8}
.pie__lista li{margin-bottom:.4rem;font-size:.93rem}
.pie__lista a{color:rgba(247,235,218,.85);text-decoration:none;border-bottom:1px solid transparent}
.pie__lista a:hover{border-color:var(--coral)}
.pie__legal{
  width:min(100% - 2.5rem,var(--ancho));margin:1.5rem auto 0;
  font-size:.78rem;color:rgba(247,235,218,.5);
}

/* ── firma de MyA Systems ──
   Vive dentro del pie a propósito: es crédito de autoría, no contenido
   de Ram Ram. El borde punteado y el verde la separan del sistema del
   restaurante, para que nadie la confunda con una sección del negocio. */
.firma{
  margin-top:2.75rem;padding:1.15rem 1.35rem;
  border:1px dashed rgba(247,235,218,.22);border-radius:10px;
  background:rgba(46,107,89,.16);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
}
.firma__texto{flex:1 1 22rem;min-width:0}
.firma__ceja{
  font-family:var(--display);font-variation-settings:"wdth" 78,"wght" 700;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(247,235,218,.45);margin-bottom:.4rem;
}
.firma__linea{
  margin:0;font-size:.88rem;line-height:1.6;color:rgba(247,235,218,.78);
}
.firma__linea strong{color:var(--durazno);font-weight:700}
.firma__marca{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 900;
  font-size:1rem;letter-spacing:-.01em;color:var(--crema);
}
.firma__cta{
  flex:none;display:inline-flex;align-items:center;gap:.45rem;
  padding:.6rem 1.15rem;border-radius:999px;
  border:1.5px solid rgba(247,235,218,.4);color:var(--crema);text-decoration:none;
  font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 700;
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .25s,color .25s,border-color .25s,transform .25s var(--curva);
}
.firma__cta:hover{background:var(--crema);color:var(--nori);border-color:var(--crema);transform:translateY(-2px)}
.firma__cta:active{transform:translateY(0)}

/* ═══════════ RESPONSIVO ═══════════ */
@media(max-width:900px){
  .barra__nav,.barra__cta{display:none}
  .barra{justify-content:space-between}
  .barra__hamburguesa{display:block}
  .nosotros__fotos{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .portada__marca{font-size:clamp(3rem,17vw,5rem)}
  .portada__curva text{font-size:44px;letter-spacing:9px}
  .platillo__precio{width:52px;height:52px;font-size:.88rem}
  .datos{gap:1.5rem}
  .nosotros__fotos{grid-template-columns:1fr}
  .foto--alta,.foto--noche{grid-row:auto}
  .foto--ancha{grid-column:auto}
  .foto--noche img{aspect-ratio:16/10;object-position:center 35%}
  /* En escritorio el orden del HTML (antes, noche, ahora) hace que la
     de noche quede a la derecha por cómo acomoda el grid solo. En una
     sola columna eso ya no aplica — aquí se reordena solo visualmente
     con `order`, sin tocar el HTML, para que la de noche quede al
     final: antes, ahora, noche. nth-of-type cuenta las tres <figure>
     en su orden real del HTML (1=antes, 2=noche, 3=ahora), sin
     importar su clase. */
  .nosotros__fotos > .foto:nth-of-type(1){order:1}
  .foto--noche{order:3}
  .nosotros__fotos > .foto:nth-of-type(3){order:2}
  .portada__anzuelo{font-size:.72rem;padding:.45rem .8rem}
  .firma{flex-direction:column;align-items:stretch}
  .firma__texto{flex:none}
  .firma__cta{justify-content:center}
}

/* ═══════════ CONTROL DE CANTIDAD EN CADA PLATILLO ═══════════ */
.platillo__cantidad{
  display:flex;align-items:center;gap:.7rem;
  margin-top:.9rem;padding-top:.9rem;
  border-top:1px dashed rgba(20,17,14,.15);
}

/* Proteína extra: vive DENTRO de la tarjeta del platillo que la
   lleva, con fondo propio para que se lea como "un complemento de
   esto de arriba", no como un platillo aparte. */
.platillo__extra{
  margin-top:1rem;padding:.85rem .9rem .7rem;border-radius:8px;
  background:rgba(46,107,89,.06);border:1px dashed rgba(46,107,89,.28);
}
.platillo__extra .platillo__cantidad{border-top:0;margin-top:.6rem;padding-top:0}
.platillo__selector--extra .platillo__selector-etiqueta{color:var(--matcha)}

.platillo__paso{
  width:28px;height:28px;border-radius:50%;
  border:1.5px solid rgba(20,17,14,.25);background:transparent;color:var(--nori);
  font-family:var(--display);font-size:1rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:border-color .2s,background-color .2s,transform .15s;
}
.platillo__paso:hover{border-color:var(--nori);transform:scale(1.06)}
.platillo__paso:active{transform:scale(.94)}
.platillo__paso--sumar{border-color:var(--coral);color:var(--coral-hondo)}
.platillo__paso--sumar:hover{background:var(--coral);color:var(--arroz);border-color:var(--coral)}
.platillo__num{
  min-width:1.6em;text-align:center;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 800;font-size:1.05rem;
}
.platillo__cantidad--activa .platillo__num{color:var(--coral-hondo)}

/* ═══════════ CARRITO FLOTANTE ═══════════ */
.carrito-flotante{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;justify-content:center;
  padding:0 1rem calc(1rem + env(safe-area-inset-bottom,0px));
  pointer-events:none;
}
.carrito-flotante__boton{
  pointer-events:auto;
  display:flex;align-items:center;gap:.7rem;
  width:min(460px,100%);
  background:var(--nori);color:var(--arroz);
  border:0;border-radius:999px;padding:.8rem 1rem .8rem 1.1rem;cursor:pointer;
  box-shadow:0 14px 30px -10px rgba(20,17,14,.55);
  animation:carrito-entra .35s var(--curva);
}
@keyframes carrito-entra{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.carrito-flotante__icono{width:20px;height:20px;flex:none;fill:none;stroke:var(--coral);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.carrito-flotante__texto{
  flex:1;text-align:left;font-size:.86rem;color:rgba(247,235,218,.85);
}
.carrito-flotante__texto strong{color:var(--arroz);font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 800}
.carrito-flotante__ver{
  font-family:var(--display);font-variation-settings:"wdth" 90,"wght" 700;
  font-size:.78rem;letter-spacing:.04em;
  background:var(--coral);color:var(--arroz);
  padding:.5rem .9rem;border-radius:999px;flex:none;
}

/* ═══════════ PANEL DE PEDIDO ═══════════ */
.carrito-panel{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.carrito-panel__fondo{position:absolute;inset:0;background:rgba(20,17,14,.55);backdrop-filter:blur(2px)}
.carrito-panel__hoja{
  position:relative;z-index:1;
  width:min(560px,100%);max-height:88svh;
  background:var(--arroz);border-radius:20px 20px 0 0;
  padding:1.4rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:1rem;
  animation:panel-sube .3s var(--curva);
  overflow-y:auto;
}
@media(min-width:640px){
  .carrito-panel{align-items:center}
  .carrito-panel__hoja{border-radius:20px;max-height:82svh}
}
@keyframes panel-sube{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}

.carrito-panel__cabecera{display:flex;align-items:center;justify-content:space-between}
.carrito-panel__titulo{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 900;
  font-size:1.5rem;margin:0;
}
.carrito-panel__cerrar{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(20,17,14,.15);
  background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--nori);
}
.carrito-panel__cerrar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.carrito-lista{display:flex;flex-direction:column;gap:.7rem;max-height:40vh;overflow-y:auto;padding-right:.2rem}
.carrito-item{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid rgba(20,17,14,.1);
}
.carrito-item__info{display:flex;flex-direction:column}
.carrito-item__nombre{font-weight:600;font-size:.95rem}
.carrito-item__precio{font-size:.78rem;color:var(--nori-suave)}
.carrito-item .platillo__cantidad{margin:0;padding:0;border:0;flex:none}
.carrito-vacio{
  text-align:center;padding:2rem 1rem;color:var(--nori-suave);font-size:.92rem;
}

.carrito-panel__total{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:1rem;margin:0;padding-top:.6rem;border-top:2px solid var(--nori);
}
.carrito-panel__total strong{
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 900;font-size:1.5rem;
}

.carrito-aviso{
  font-size:.85rem;padding:.7rem .9rem;border-radius:8px;margin:0;line-height:1.5;
}
.carrito-aviso[data-tipo="cerrado"]{background:rgba(217,96,63,.12);color:var(--coral-hondo);border:1px solid rgba(217,96,63,.3)}
.carrito-aviso[data-tipo="aviso"]{background:rgba(238,127,95,.1);color:var(--nori-suave);border:1px solid rgba(238,127,95,.28)}

#btnEnviarPedido:disabled{opacity:.45;cursor:not-allowed;transform:none}
.carrito-panel__nota{font-size:.76rem;color:var(--nori-suave);text-align:center;margin:0}

/* ═══════════ ACCESIBILIDAD ═══════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .bola{animation:none;top:20%}
}

@media print{
  .barra,.menu-movil,.portada__lluvia,.portada__anzuelo,.mapa,.franja,.firma,.carrito-flotante,.carrito-panel{display:none}
  body{background:#fff;color:#000}
}