/* Banderas Restaurant · propuesta de KAMU STUDIO.
   La composición y el movimiento vienen de gourouindianfood.fr; los colores, del propio negocio:
   el rojo de su cinta, el verde de su lema, el amarillo de sus rombos y el negro de su tablero. */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("fonts/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 900; font-display: swap; src: url("fonts/poppins-900.woff2") format("woff2"); }
@font-face { font-family: "Kaushan Script"; font-weight: 400; font-display: swap; src: url("fonts/kaushan-script.woff2") format("woff2"); }

:root {
  --crema: #FFF5E1;
  --rojo: #D21F16;
  --rojo-osc: #C8190F;
  --rojo-claro: #FF4D3D;
  --verde: #0F7A3D;
  --verde-osc: #0B5E30;
  --amarillo: #FFC20E;
  --amarillo-claro: #FBE59A;
  --negro: #141113;
  --rosa: #C8006E;
  --naranja: #FF8A1F;
  --turquesa: #0B6E77;
  --blanco: #FFFFFF;

  --borde: 3px;
  --pad: 4.5rem;
  --s1: 1rem;
  --s2: 1.125rem;
  --s3: 2rem;
  --s4: clamp(2.25rem, 3.4vw, 3rem);
  --s5: clamp(3rem, 5vw, 4.5rem);
  --s6: clamp(3rem, 8.2vw, 8.75rem);
  --brocha: "Kaushan Script", "Brush Script MT", cursive;

  /* KAMU UI con los colores del negocio y esquinas cuadradas, como Gourou */
  --radius: 0px;
  --background: var(--crema);
  --foreground: var(--negro);
  --card: var(--crema);
  --card-foreground: var(--negro);
  --primary: var(--rojo);
  --primary-foreground: var(--crema);
  --secondary: var(--amarillo);
  --secondary-foreground: var(--negro);
  --muted: var(--amarillo-claro);
  --muted-foreground: var(--verde-osc);
  --border: var(--rojo);
  --input: var(--verde);
  --ring: var(--verde);

  /* el logo cambia de colores según el fondo */
  --logo-cara: var(--rojo);
  --logo-sombra: var(--verde-osc);
  --logo-hueco: var(--crema);
  --logo-rombo: #FFB703;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--crema); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--negro);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--s1);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
main > section, .marquee { overflow-x: clip; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: .75rem 1rem; background: var(--verde); color: var(--crema); font-weight: 700; }
.saltar:focus { top: 1rem; }
.contenedor { position: relative; z-index: 1; width: 100%; padding: 2.5rem var(--pad); }

/* KAMU UI: se queda la estructura y el foco; el aspecto lo pone el sitio */
.ui-btn { white-space: normal; border-radius: 0; gap: 0; line-height: 1.1; text-align: center; }
.ui-btn:active { translate: none; }
.ui-card { gap: 0; padding: 0; overflow: visible; border-radius: 0; }
.ui-card, .ui-btn--outline { box-shadow: none; } /* taste-skill-ignore: kamu-ui trae sombras en tarjetas y botones de contorno; aquí se apagan */
.ui-badge { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; white-space: nowrap; }
.ui-accordion-item:not(:last-child) { border-bottom: 0; }

/* ---------- botones ---------- */
.btn {
  min-height: 44px;
  padding: .55rem 1rem;
  border: 2px solid currentColor;
  background: var(--crema);
  font-size: var(--s2);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .35s, color .35s, border-color .35s;
}
.btn-linea { color: var(--verde); --fill: var(--verde); }
.btn-rojo { background: var(--rojo-osc); border-color: var(--rojo-osc); color: var(--crema); --fill: var(--verde); }
.btn-linea-roja { color: var(--rojo-osc); --fill: var(--rojo-osc); }
.btn-lang { min-width: 52px; color: var(--verde); --fill: var(--verde); }
/* el color de la letra cambia con CSS; el relleno lo anima GSAP en los botones marcados .anim */
.btn:hover, .cuadro:hover, .rb:hover { color: var(--crema); border-color: var(--fill); }
.btn:not(.anim):hover, .cuadro:not(.anim):hover, .rb:not(.anim):hover { background: var(--fill); }
.btn-burger { display: none; color: var(--verde); }

/* el botón que se llena de rombos (el "btn-color" de Gourou) */
.btn-color { position: relative; overflow: hidden; isolation: isolate; }
.btn-color > span, .btn-color { z-index: 1; }
.chispa { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--amarillo); pointer-events: none; z-index: -1; transform: scale(0); } /* taste-skill-ignore: rombo del hover, nace en el fondo del botón (3D) */

/* ---------- entrada: loader y lluvia de platillos ---------- */
.loader, .lluvia { position: fixed; inset: 0; pointer-events: none; display: none; }
.loader { z-index: 998; background: var(--crema); }
.lluvia { z-index: 999; overflow: hidden; }
.intro .loader, .intro .lluvia { display: block; }
.gota { position: absolute; width: 50vw; height: 50vw; object-fit: contain; transform: translateY(-200%); visibility: hidden; will-change: transform; }
.g1 { left: -15%; top: -20%; }
.g2 { right: -11%; top: -28%; }
.g3 { left: 30%; top: -26%; }
.g4 { left: -15%; bottom: -13%; }
.g5 { left: 12%; bottom: 37%; }
.g6 { right: 9%; bottom: -25%; }
.g7 { right: -9%; bottom: -10%; z-index: -1; }
.g8 { right: 44%; bottom: -28%; z-index: -1; }
.g9 { right: 23%; bottom: -5%; z-index: 1; }
.g10 { left: 39%; top: 1%; }
.intro main, .intro .pie { opacity: 0; }
.intro .nav { transform: translateY(-100%); }

/* ---------- barra de arriba ---------- */
.nav { position: relative; z-index: 50; padding-top: 2rem; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .25rem var(--pad); }
.logo-nav { position: relative; display: block; flex: none; width: clamp(150px, 15vw, 230px); isolation: isolate; }
.logo-svg { width: 100%; height: auto; aspect-ratio: 409 / 150.72; }
.halo { position: absolute; left: 50%; top: 42%; width: 130%; aspect-ratio: 1; height: auto; translate: -50% -50%; color: var(--amarillo-claro); z-index: -1; animation: girar 60s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }
.nav-centro { display: flex; gap: 2.5rem; }
.nav-der { display: flex; align-items: center; gap: .75rem; }

.panel { position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(100%, 26rem); padding: 6.5rem 6vw 2rem; background: var(--crema); border-left: var(--borde) solid var(--rojo); display: flex; flex-direction: column; justify-content: space-between; }
.panel[hidden] { display: none; }
.panel ul { display: grid; gap: .25rem; }
.panel li a { display: block; padding: .55rem 0; color: var(--verde); font-size: var(--s3); font-weight: 700; line-height: 1.1; text-transform: uppercase; text-decoration: none; }
.panel-acciones { display: grid; gap: .75rem; }

/* ---------- inicio ---------- */
.hero { min-height: 100svh; }
.hero .contenedor { padding-top: 1.25rem; }
.hero-cards { position: relative; display: flex; gap: .5rem; height: 25rem; }
.hero-card { position: relative; flex: 1; overflow: hidden; background: var(--verde); }
.hero-card video, .hero-card img { width: 100%; height: 100%; object-fit: cover; }
.sticker { position: fixed; left: 0; top: 0; z-index: 70; display: grid; place-items: center; width: 8.5rem; height: 8.5rem; margin: -4.25rem 0 0 -4.25rem; pointer-events: none; opacity: 0; visibility: hidden; }
.sticker-rayos { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--amarillo); }
.sticker span { position: relative; padding: .55rem .7rem; background: var(--rojo-osc); color: var(--crema); font-family: var(--brocha); font-size: 1.5rem; line-height: 1; rotate: -8deg; }

/* the giant line runs edge to edge: Poppins 900 sets "MEXICAN & SEA FOOD" 11.09em wide; the copy behind is Gourou's offset outline */
.megatitulo { position: relative; isolation: isolate; margin: 2rem 0 1.75rem; color: var(--verde); font-size: calc((100vw - 2 * var(--pad)) / 11.25); font-weight: 900; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.megatitulo::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; color: transparent; -webkit-text-stroke: .017em currentColor; transform: translate(-.07em, -.045em); }

.hero-fila { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; gap: 3rem; align-items: start; }
.flip > .real { display: block; }
.hero h1 { color: var(--verde); font-size: var(--s3); font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.hero-texto { display: grid; gap: 1rem; }
.hero-texto .flip { color: var(--verde); font-size: var(--s2); font-weight: 500; line-height: 1.35; max-width: 34rem; }
.estado { display: flex; align-items: center; gap: .6rem; color: var(--verde-osc); font-weight: 600; }
.punto { flex: none; width: .7rem; height: .7rem; rotate: 45deg; background: var(--rojo); }
.abierto .punto { background: var(--verde); }
.hero-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.cuadro {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 200 / 130; padding: .75rem;
  border: 2px solid var(--verde); background: var(--crema); color: var(--verde);
  font-size: var(--s2); font-weight: 700; text-transform: uppercase; text-decoration: none;
  transition: color .35s, background-color .35s;
  --fill: var(--verde);
}

/* ---------- del mundo / del rumbo ---------- */
.rumbo { position: relative; padding-top: 3.5rem; }
.picado { position: relative; height: 5.5rem; color: var(--verde-osc); }
.picado svg { position: absolute; left: 0; top: 0; width: 100%; height: 3rem; }
.banderitas { position: absolute; inset: 0; }
.banderitas li {
  position: absolute; width: 56px; height: 72px; translate: -50% 0; transform-origin: 50% 0;
  clip-path: path(evenodd, "M0 0H56V60L49 72L42 60L35 72L28 60L21 72L14 60L7 72L0 60Z M28 20L37 30L28 40L19 30Z M14 10L18 14L14 18L10 14Z M42 10L46 14L42 18L38 14Z");
  animation: ondear 3.4s ease-in-out infinite;
}
.b1 { left: 4%; top: 10px; background: var(--rosa); }
.b2 { left: 12.5%; top: 17px; background: var(--amarillo); animation-delay: -.4s; }
.b3 { left: 21%; top: 23px; background: var(--verde); animation-delay: -.9s; }
.b4 { left: 29.5%; top: 28px; background: var(--naranja); animation-delay: -1.3s; }
.b5 { left: 38%; top: 31px; background: var(--rojo); animation-delay: -1.8s; }
.b6 { left: 46.5%; top: 32px; background: var(--turquesa); animation-delay: -2.2s; }
.b7 { left: 55%; top: 32px; background: var(--rosa); animation-delay: -.6s; }
.b8 { left: 63.5%; top: 30px; background: var(--amarillo); animation-delay: -1.1s; }
.b9 { left: 72%; top: 27px; background: var(--verde); animation-delay: -1.6s; }
.b10 { left: 80.5%; top: 22px; background: var(--naranja); animation-delay: -2.4s; }
.b11 { left: 89%; top: 16px; background: var(--rojo); animation-delay: -.2s; }
.b12 { left: 97%; top: 9px; background: var(--turquesa); animation-delay: -1.5s; }
@keyframes ondear { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }

.deaqui { width: 100%; overflow: hidden; border: var(--borde) solid var(--rojo); border-bottom-width: 2px; }
.da-pista { display: flex; width: 200vw; }
.da-fila { flex: none; display: flex; align-items: center; justify-content: center; gap: 2rem; width: 100vw; padding: 1.5rem 0; transform: translateX(-100vw); }
.troca { position: relative; flex: none; width: 13rem; }
.troca img { width: 100%; height: auto; transform-origin: 0 100%; }
.polvo { position: absolute; left: -12%; bottom: 6%; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--amarillo-claro); }
.polvo.p2 { left: -24%; bottom: 14%; width: 1.5rem; height: 1.5rem; }
.polvo.p3 { left: -33%; bottom: 3%; width: 1.1rem; height: 1.1rem; }
.da-txt { position: relative; color: var(--rojo); font-size: var(--s6); font-weight: 800; line-height: .8; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; padding: .08em 0 .04em; }
.tachado::after { content: ""; position: absolute; left: -3%; right: -3%; top: 46%; height: .085em; background: var(--verde-osc); transform: rotate(-4deg) scaleX(var(--tacha, 0)); transform-origin: 0 50%; }
.lema { display: grid; justify-items: center; gap: .35rem; padding: 1.75rem var(--pad) 1.5rem; border-inline: var(--borde) solid var(--rojo); text-align: center; }
.lema-es { color: var(--rojo); font-family: var(--brocha); font-size: var(--s3); line-height: 1.15; }
.lema-en { color: var(--verde); font-weight: 600; }
.lema-en:empty { display: none; }
.rumbo-btns { display: grid; grid-template-columns: 1fr 1fr; border: var(--borde) solid var(--rojo); border-bottom-width: 0; }
.rb { min-height: 4rem; padding: 1rem; background: var(--crema); color: var(--rojo); font-size: var(--s2); font-weight: 700; text-transform: uppercase; text-decoration: none; transition: color .35s, background-color .35s; --fill: var(--rojo-osc); }
.rb + .rb { border-left: var(--borde) solid var(--rojo); }
.rumbo-foto { display: grid; grid-template-columns: 5.25rem 1fr; height: 45vw; max-height: 52rem; border-top: var(--borde) solid var(--rojo); border-bottom: var(--borde) solid var(--rojo); }
.tiras { display: grid; grid-template-rows: 2fr 1fr; }
.t-roja { background: var(--rojo); }
.t-amarilla { display: grid; place-items: center; overflow: hidden; background: var(--amarillo); }
.t-amarilla b { color: var(--verde-osc); font-family: var(--brocha); font-size: var(--s3); font-weight: 400; writing-mode: vertical-rl; rotate: 180deg; }
.rf-marco { position: relative; overflow: hidden; }
.rf-img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }

/* ---------- favoritos ---------- */
.favoritos { padding: 1rem; overflow-x: clip; }
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.plato, .celda { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 38rem; padding: 1rem 2rem 1.75rem; overflow: hidden; }
.celda.blanca { background: var(--blanco); padding-top: 2rem; padding-bottom: 2rem; }
.celda h2 { color: var(--negro); font-size: var(--s3); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.sol-celda { position: absolute; left: -40%; bottom: -40%; width: 120%; height: auto; aspect-ratio: 1; color: var(--amarillo); opacity: .5; pointer-events: none; animation: girar 90s linear infinite; }
.sol-celda.arriba { top: -40%; bottom: auto; }
.celda > :not(.sol-celda) { position: relative; }
.celda-frase { max-width: 24ch; margin-top: 1rem; color: var(--negro); font-size: var(--s2); font-weight: 600; line-height: 1.4; }
.brocha { font-family: var(--brocha); font-size: var(--s4); font-weight: 400; line-height: 1.05; }
.brocha.grande { align-self: flex-end; text-align: right; color: var(--rojo); }
.celda-brocha { justify-content: flex-end; gap: 1.5rem; }
.brocha.enorme { align-self: flex-end; max-width: 9em; color: var(--rojo); font-size: var(--s4); line-height: 1.05; text-align: right; }
.celda-nota { align-self: flex-end; max-width: 26ch; color: var(--verde-osc); font-weight: 600; text-align: right; }
.plato-top { padding-top: 1rem; }
.precio { position: absolute; right: .75rem; top: .75rem; z-index: 3; padding: .4rem .65rem; font-size: var(--s2); font-weight: 800; line-height: 1; rotate: 4deg; }
.plato h3 { margin-top: .35rem; font-size: var(--s4); font-weight: 700; line-height: .92; text-transform: uppercase; letter-spacing: -.01em; }
.panel-img { position: relative; display: grid; place-items: center; flex: 1; min-height: 15rem; margin: 1.25rem 0; overflow: hidden; isolation: isolate; }
.panel-img img { position: relative; z-index: 2; width: 86%; height: 86%; max-height: 19rem; object-fit: contain; }
.halo-plato { position: absolute; left: 50%; top: 50%; width: 140%; height: auto; aspect-ratio: 1; translate: -50% -50%; color: var(--blanco); opacity: .55; z-index: 1; transform: scale(0); } /* taste-skill-ignore: rayos del hover, crecen desde el centro del plato */
.bg-plato { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 0; transform: scale(0); } /* taste-skill-ignore: círculo del hover detrás del plato */
.desc { font-size: var(--s1); font-weight: 700; line-height: 1.35; text-transform: uppercase; }

.c-amarillo { background: var(--amarillo); color: var(--negro); }
.c-amarillo .brocha { color: var(--verde-osc); }
.c-amarillo .precio { background: var(--negro); color: var(--amarillo); }
.c-verde { background: var(--verde); color: var(--crema); }
.c-verde .brocha { color: var(--amarillo); }
.c-verde .precio { background: var(--amarillo); color: var(--negro); }
.c-rojo { background: var(--rojo-osc); color: var(--crema); }
.c-rojo .precio { background: var(--crema); color: var(--rojo-osc); }
.c-negro { background: var(--negro); color: var(--crema); }
.c-negro .brocha { color: var(--rojo-claro); }
.c-negro .precio { background: var(--rojo-osc); color: var(--crema); }
.c-turquesa { background: var(--turquesa); color: var(--crema); }
.c-turquesa .brocha { color: var(--amarillo); }
.c-turquesa .precio { background: var(--amarillo); color: var(--negro); }
.c-rosa { background: var(--rosa); color: var(--crema); }
.c-rosa .precio { background: var(--crema); color: var(--rosa); }
.p-verde { background: var(--verde); } .p-verde .bg-plato { background: var(--verde-osc); }
.p-amarillo { background: var(--amarillo); } .p-amarillo .bg-plato { background: var(--naranja); }
.p-claro { background: var(--amarillo-claro); } .p-claro .bg-plato { background: var(--amarillo); }
.p-rojo { background: var(--rojo); } .p-rojo .bg-plato { background: var(--rojo-osc); }
.p-naranja { background: var(--naranja); } .p-naranja .bg-plato { background: var(--amarillo); }

/* ---------- paquete familiar: el túnel ---------- */
.tunel { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 6rem 1rem; overflow: hidden; perspective: 1600px; }
.tunel-vuelo { position: absolute; inset: 0; z-index: 0; transform-style: preserve-3d; }
.tv { position: absolute; width: clamp(10rem, 22vw, 22rem); height: auto; }
.tunel-centro { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1rem; width: min(100%, 40rem); padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 2.75rem; background: var(--rojo-osc); color: var(--crema); text-align: center; }
.tunel-centro .brocha { color: var(--amarillo); }
.tunel-centro h2 { font-size: var(--s5); font-weight: 800; line-height: .9; text-transform: uppercase; }
.tunel-txt { max-width: 34rem; font-size: var(--s1); font-weight: 500; }
.calc { display: grid; justify-items: center; gap: .85rem; width: 100%; margin-top: .5rem; padding: 1.5rem 1rem; background: var(--crema); color: var(--negro); }
.calc-q { font-size: var(--s3); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.calc-fila { display: flex; align-items: center; gap: 1rem; }
.paso { width: 3.25rem; height: 3.25rem; border: 2px solid var(--verde); background: var(--crema); color: var(--verde); font-size: var(--s3); font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .25s, color .25s; }
.paso:hover { background: var(--verde); color: var(--crema); }
.calc-n { min-width: 4ch; color: var(--rojo-osc); font-size: var(--s5); font-weight: 800; line-height: 1; text-align: center; }
.calc-arroz { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 600; cursor: pointer; }
.calc-arroz input { width: 1.4rem; height: 1.4rem; accent-color: var(--verde); }
.calc-res { max-width: 30rem; color: var(--verde-osc); font-weight: 600; }
.calc-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ---------- la carta: el tablero negro ---------- */
.carta { background: var(--negro); color: var(--crema); }
.carta .contenedor { padding-top: 6rem; padding-bottom: 6rem; }
.carta-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.carta-head h2 { color: var(--amarillo); font-size: var(--s5); font-weight: 800; line-height: .95; text-transform: uppercase; }
.carta-sub { max-width: 30rem; justify-self: end; font-size: var(--s2); }
.tablero { display: block; columns: 2 24rem; column-gap: 4rem; }
.cat { break-inside: avoid; padding: 1.75rem 0 3rem; }
.cat > summary { align-items: baseline; flex-wrap: wrap; column-gap: 1rem; row-gap: 0; padding: .5rem 0; }
.cat > summary:hover { text-decoration: none; }
.cat > summary { position: relative; padding-right: 2rem; }
.cat > summary::after { position: absolute; right: 0; top: 1rem; border-color: var(--amarillo); } /* la flecha se queda en el primer renglón aunque el subtítulo baje */
.cat-nom { color: var(--rojo-claro); font-family: var(--brocha); font-size: var(--s4); font-weight: 400; line-height: 1.1; }
.cat-en { color: var(--crema); font-weight: 600; text-transform: uppercase; }
.cat-body { display: grid; gap: .5rem; }
.cat-nota { color: var(--amarillo-claro); font-weight: 500; }
.items li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: .4rem 0; font-weight: 600; line-height: 1.3; text-transform: uppercase; }
.items b { flex: none; color: var(--amarillo); font-weight: 700; }
.items-bebidas li { text-transform: none; }

/* ---------- el restaurante ---------- */
.restaurante .contenedor { padding-top: 6rem; padding-bottom: 4rem; display: grid; gap: 1.25rem; }
.r-marco { display: grid; grid-template-columns: 2.6fr 1fr; border: var(--borde) solid var(--rojo); }
.r-foto { height: clamp(22rem, 46vw, 44rem); overflow: hidden; border-right: var(--borde) solid var(--rojo); }
.r-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.r-texto { display: grid; align-content: center; gap: 1.5rem; padding: 3rem 2.5rem; text-align: center; }
.r-texto h2 { color: var(--verde); font-size: var(--s3); font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.r-texto p { font-size: var(--s2); }
.r-fila { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.25rem; }
.r-rojo { display: grid; justify-items: center; align-content: center; gap: 1.5rem; padding: 3rem 2rem; background: var(--rojo-osc); color: var(--crema); text-align: center; }
.r-rombos { width: 5rem; height: auto; color: var(--amarillo); }
.r-rojo h3 { font-size: var(--s3); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.r-rojo p { max-width: 30rem; font-size: var(--s2); }
.r-nota { display: grid; align-content: center; gap: 1.25rem; padding: 3rem; border: var(--borde) solid var(--rojo); }
.nota-n { display: flex; align-items: center; gap: 1.5rem; }
.score { color: var(--verde); font-size: var(--s6); font-weight: 800; line-height: .85; letter-spacing: -.03em; }
.estrellas svg { width: clamp(8rem, 14vw, 12rem); height: auto; color: var(--amarillo); }
.nota-txt { font-size: var(--s2); font-weight: 600; }
.temas { display: flex; flex-wrap: wrap; gap: .6rem; }
.temas .ui-badge { padding: .45rem .8rem; background: var(--verde); color: var(--crema); font-size: var(--s1); font-weight: 600; }
.r-link { justify-self: start; color: var(--rojo-osc); font-weight: 700; text-transform: uppercase; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ---------- banda que corre ---------- */
.marquee { display: flex; align-items: center; min-height: 6rem; overflow: hidden; border: var(--borde) solid var(--rojo); border-bottom: 0; }
.mq-pista { display: flex; flex: none; animation: correr 40s linear infinite; }
.mq-pista span { flex: none; padding-right: 3rem; color: var(--rojo); font-size: var(--s3); font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.marquee:hover .mq-pista { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- galería ---------- */
.galeria { display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: auto auto; border: var(--borde) solid var(--rojo); background: var(--rojo); }
.g-izq { display: grid; place-items: center; min-height: 40rem; overflow: hidden; background: var(--crema); border-right: var(--borde) solid var(--rojo); }
.g-logo { width: 150%; max-width: none; height: auto; aspect-ratio: 409 / 150.72; rotate: -90deg; }
.g-centro { display: grid; align-content: center; gap: 1rem; padding: 2.5rem 2rem; }
.g-slider { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--negro); }
.g-slide { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.g-slide.activa { visibility: visible; opacity: 1; }
.g-slide img { width: 100%; height: 100%; object-fit: cover; }
.g-ctrl { display: flex; align-items: center; gap: 1rem; }
.g-btn { width: 3rem; height: 3rem; border: 2px solid var(--crema); background: var(--rojo); color: var(--crema); font-size: var(--s2); font-weight: 700; cursor: pointer; transition: background-color .25s, color .25s; }
.g-btn:hover { background: var(--crema); color: var(--rojo); }
.g-prog { position: relative; flex: 1; height: 6px; background: var(--rojo-osc); overflow: hidden; }
.g-prog i { position: absolute; inset: 0; background: var(--amarillo); transform: scaleX(0); transform-origin: 0 50%; }
.g-der { display: grid; place-items: center; overflow: hidden; }
.g-der span { color: var(--crema); font-family: var(--brocha); font-size: clamp(6rem, 11vw, 11rem); line-height: 1; white-space: nowrap; writing-mode: vertical-rl; }
.g-links { grid-column: 1 / -1; display: flex; justify-content: center; gap: 2.5rem; padding: 1.5rem 1rem; background: var(--crema); border-top: var(--borde) solid var(--rojo); }
.g-links a { color: var(--verde); font-size: var(--s3); font-weight: 600; text-transform: uppercase; text-underline-offset: 6px; text-decoration-thickness: 3px; }

/* ---------- visítanos ---------- */
.visita { position: relative; overflow: hidden; padding: 8rem 0 5rem; text-align: center; }
.sol-fondo { position: absolute; left: 50%; top: 40%; width: 190vmax; height: 190vmax; max-width: none; translate: -50% -50%; color: var(--blanco); opacity: .8; z-index: 0; }
.puntos { position: absolute; left: -7rem; top: -5rem; width: clamp(14rem, 30vw, 30rem); height: auto; z-index: 0; }
.visita-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2.25rem; }
.visita-titulo { color: var(--rojo); font-size: var(--s6); font-weight: 800; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; max-width: 11ch; }
.visita-titulo .hm { display: inline-block; will-change: transform; }
.visita-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.visita-cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.25rem; width: 100%; text-align: left; }
.horario { display: grid; align-content: start; gap: 1rem; padding: 2.5rem; background: var(--crema); border: var(--borde) solid var(--rojo); color: var(--rojo-osc); }
.horario h3 { color: var(--verde); font-size: var(--s3); font-weight: 700; line-height: 1; text-transform: uppercase; }
.horario dl { display: grid; gap: .5rem; }
.horario dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; background: var(--amarillo-claro); color: var(--negro); font-weight: 600; }
.horario dl div.hoy { background: var(--verde); color: var(--crema); }
.horario dd { white-space: nowrap; }
.horario p { font-size: var(--s2); }
.horario b { font-weight: 700; }
.horario a { color: inherit; font-weight: 700; }
.estado-rojo { color: var(--rojo-osc); }
.horario-nota { color: var(--verde-osc); font-weight: 600; }
.mapa { min-height: 26rem; border: var(--borde) solid var(--rojo); background: var(--amarillo-claro); }
.mapa iframe { display: block; width: 100%; height: 100%; min-height: 26rem; border: 0; }

/* ---------- pie ---------- */
.pie { background: var(--verde); color: var(--crema); --logo-cara: var(--crema); --logo-sombra: var(--negro); --logo-hueco: var(--verde); --logo-rombo: var(--amarillo); }
.pie-in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem 3rem; padding-top: 3.5rem; padding-bottom: 3rem; }
.pie-logo { grid-row: span 3; width: clamp(12rem, 22vw, 18rem); height: auto; aspect-ratio: 411 / 214.72; }
.pie-nav { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.pie-nav a { font-size: var(--s2); font-weight: 700; text-transform: uppercase; text-underline-offset: 5px; }
.pie-dato a { font-weight: 700; }
.pie-kamu { color: var(--crema); font-size: var(--s1); }

/* ---------- tableta ---------- */
@media (max-width: 991px) {
  :root { --pad: 6vw; }
  .tiras { grid-template-rows: 3fr 2fr; }
  .nav { position: sticky; top: 0; padding-top: .75rem; padding-bottom: .5rem; background: var(--crema); }
  .nav-centro, .nav-menu-link { display: none; }
  .btn-burger { display: inline-flex; }
  .logo-nav { width: 150px; }
  .hero-fila { grid-template-columns: 1fr; gap: 1.5rem; }
  .gota { width: 80vw; height: 80vw; }
  .g1 { top: -6%; left: -10%; } .g2 { top: -14%; } .g3 { top: -25%; } .g4 { bottom: 9%; left: -24%; } .g5 { left: -10%; }
  .g6 { bottom: -2%; } .g7 { bottom: -9%; right: -14%; } .g8 { bottom: -11%; right: 37%; } .g9 { bottom: 26%; }
  .rejilla { grid-template-columns: 1fr 1fr; }
  .carta-head { grid-template-columns: 1fr; }
  .carta-sub { justify-self: start; }
  .r-marco, .r-fila, .visita-cols { grid-template-columns: 1fr; }
  .r-foto { border-right: 0; border-bottom: var(--borde) solid var(--rojo); }
  .galeria { grid-template-columns: 1fr 1fr; }
  .g-izq { display: none; }
  .g-der span { font-size: clamp(5rem, 14vw, 9rem); }
  .pie-in { grid-template-columns: 1fr; }
  .pie-logo { grid-row: auto; }
}

/* ---------- celular ---------- */
@media (max-width: 767px) {
  .contenedor { padding: 1.5rem 16px; }
  .nav-in { padding: .25rem 16px; gap: .75rem; }
  .logo-nav { width: 128px; }
  .nav .btn, .panel .btn { font-size: var(--s1); }
  .hero { min-height: 0; }
  .hero .contenedor { padding-top: .75rem; }
  .hero-cards { height: 52vw; }
  .megatitulo { margin: 1.25rem 0; font-size: calc((100vw - 32px) / 6.05); line-height: .98; white-space: normal; }
  .hero-fila { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero h1 { font-size: 1.75rem; }
  .hero-btns { gap: .5rem; }
  .cuadro { aspect-ratio: auto; min-height: 4.5rem; font-size: 1rem; padding: .5rem; }
  .rumbo { padding-top: 2rem; }
  .picado { height: 4rem; }
  .banderitas li { scale: .62; }
  .troca { width: 24vw; }
  .da-fila { gap: 1rem; }
  .da-txt { font-size: 8.2vw; }
  .lema { padding: 1.25rem 16px; }
  .lema-es { font-size: 1.5rem; }
  .rumbo-btns { grid-template-columns: 1fr; }
  .rb + .rb { border-left: 0; border-top: var(--borde) solid var(--rojo); }
  .rumbo-foto { grid-template-columns: 2.75rem 1fr; height: 72vw; }
  .tiras { grid-template-rows: 1fr 2fr; }
  .t-amarilla b { font-size: 1.75rem; }
  .favoritos { padding: 16px; }
  .rejilla { grid-template-columns: 1fr; gap: 16px; }
  .plato, .celda { min-height: 0; padding: 1rem 1.25rem 1.5rem; }
  .celda.blanca { min-height: 18rem; }
  .panel-img { min-height: 14rem; }
  .tunel { min-height: 0; padding: 4rem 16px; }
  .tv { width: 38vw; }
  .carta .contenedor { padding-top: 4rem; padding-bottom: 4rem; }
  .items li { gap: .75rem; }
  .restaurante .contenedor { padding-top: 4rem; }
  .r-texto, .r-rojo, .r-nota, .horario { padding: 2rem 1.25rem; }
  .galeria { grid-template-columns: 1fr; }
  .g-der { display: none; }
  .g-centro { padding: 16px; }
  .g-links { gap: 1.5rem; }
  .g-links a { font-size: 1.125rem; }
  .visita { padding: 5rem 0 3rem; }
  .puntos { left: -5rem; top: -3rem; width: 13rem; }
  .mapa, .mapa iframe { min-height: 20rem; }
  .pie-in { padding-top: 2.5rem; }
}

/* ---------- reducir movimiento: todo visible y quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  .halo, .sol-celda, .banderitas li, .mq-pista { animation: none; }
  .mq-pista { flex-wrap: wrap; }
  .da-fila { transform: none; }
  .da-mundo { display: none; }
  .da-pista { width: 100vw; }
  .tachado { --tacha: 1; }
  .rf-img { height: 100%; }
  .btn, .cuadro, .rb, .paso, .g-btn { transition: none; }
}

/* ---------- Escríbenos: el formulario del molde en una tarjeta crema sobre el rojo de bandera ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem; align-items: center; padding: 6rem var(--pad); background: var(--rojo-osc); color: var(--crema);
  --kamu-texto: var(--negro); --kamu-fondo: var(--blanco); --kamu-acento: var(--rojo-osc); --kamu-error: #B3261E; --kamu-borde: var(--negro); }
.contacto-texto { display: grid; gap: 1rem; max-width: 30rem; }
.contacto-texto .brocha { color: var(--amarillo); }
.contacto h2 { font-size: var(--s5); font-weight: 900; line-height: 1; text-transform: uppercase; }
.contacto-texto p:not(.brocha) { font-size: var(--s2); font-weight: 600; }
.contacto-texto a { color: var(--crema); font-weight: 800; text-underline-offset: 4px; }
.contacto #kamu-contacto { max-width: none; padding: 2rem; background: var(--crema); }
.contacto #kamu-contacto input, .contacto #kamu-contacto textarea, .contacto #kamu-contacto button { border-radius: 0; }
.contacto #kamu-contacto button { text-transform: uppercase; font-weight: 800; }
@media (max-width: 991px) { .contacto { grid-template-columns: 1fr; gap: 2rem; padding: 4rem var(--pad); } }
@media (max-width: 767px) { .contacto { padding: 3rem 16px; } .contacto #kamu-contacto { padding: 1.25rem; } }