/* ==========================================================================
   BRASA — hoja de estilo compartida del muestrario.
   Maqueta de demostracion de BAI Marketing: marca, carta y precios inventados.
   Los tokens salen de la portada original (index.html): mismo burdeos, mismo
   limon, mismas dos tipografias. Todo lo nuevo se cuelga de aqui para que las
   paginas anadidas no se separen visualmente de las que ya existian.
   ========================================================================== */

:root{
  --vino:#4C0016; --vino2:#3a0011; --vino3:#2b000c;
  --naranja:#EF6F2E; --amarillo:#F4A804; --limon:#ffd750;
  --crema:#f5e3cd; --verde:#417000; --rojo:#f91814;
  /* Versiones oscuras para cuando el color ES el texto sobre fondo claro.
     Los de arriba valen como relleno; como texto no llegan al minimo WCAG AA. */
  --naranja-txt:#AC4208; --ambar-txt:#996400; --rojo-txt:#C00D0A;
  --marron:#662C00; --tinta:#1b1b1b;
  --display:'Modak',system-ui,cursive;
  --texto:'Mouse Memoirs',system-ui,sans-serif;
  --caja:1150px;
  --sombra:0 14px 34px rgba(102,44,0,.16);
}

*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip y no hidden: recorta lo que se sale por los lados (el cajon
   de la cesta aparcado fuera de pantalla, la marquesina girada) sin convertir
   el documento en un contenedor de scroll, que es lo que rompe position:sticky
   de la barra de categorias de la carta. Medido: sin esto la pagina declaraba
   1422 px de ancho en una ventana de 1400. */
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--vino);color:var(--crema);font-family:var(--texto);
  font-size:20px;letter-spacing:.02em;overflow-x:clip;
  -webkit-font-smoothing:antialiased}
/* height:auto es obligatorio aqui. Las <img> llevan width/height en el HTML
   para que el navegador reserve el hueco y no salte la pagina al cargar, pero
   ese height se aplica como pixeles reales y le gana al aspect-ratio del CSS:
   medido, la foto de la portada salia de 420x1400 en vez de 420x420. Con
   height:auto manda el aspect-ratio y el hueco reservado se sigue respetando. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92}
section{padding:96px 24px;position:relative}
.caja{max-width:var(--caja);margin:0 auto}
.centro{text-align:center}

/* ---------- barra superior ------------------------------------------------ */
nav.barra{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;
  gap:22px;justify-content:space-between;padding:12px 26px;
  background:rgba(43,0,12,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(245,227,205,.1)}
nav.barra .logo{font-family:var(--display);font-size:30px;color:var(--limon);
  transform:rotate(-2deg);text-decoration:none;white-space:nowrap;line-height:1}
nav.barra .logo small{font-size:15px;color:var(--crema);opacity:.75}
nav.barra ul{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
nav.barra ul a{color:var(--crema);text-decoration:none;font-size:19px;
  text-transform:uppercase;letter-spacing:.07em;opacity:.82;transition:.2s}
nav.barra ul a:hover,nav.barra ul a.on{opacity:1;color:var(--limon)}
.hamburguesa{display:none;background:none;border:0;color:var(--crema);font-size:28px;cursor:pointer;line-height:1}

/* ---------- botones ------------------------------------------------------- */
.btn{display:inline-block;background:var(--naranja);color:var(--vino);border:0;cursor:pointer;
  font-family:var(--texto);font-size:21px;text-transform:uppercase;letter-spacing:.05em;
  text-decoration:none;padding:12px 28px;border-radius:99px;
  box-shadow:0 6px 0 rgba(0,0,0,.25);transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-3px) rotate(-1.2deg);box-shadow:0 9px 0 rgba(0,0,0,.25)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn[disabled]{opacity:.62;cursor:not-allowed;transform:none;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.btn.crema{background:var(--crema);color:var(--vino)}
.btn.verde{background:var(--verde);color:#fff}
.btn.hueco{background:transparent;color:var(--crema);box-shadow:none;
  border:2px solid rgba(245,227,205,.4)}
.btn.hueco:hover{border-color:var(--limon);color:var(--limon)}
.btn.ancho{width:100%;text-align:center}

#btn-cesta{position:relative;background:var(--limon);color:var(--marron);border:0;cursor:pointer;
  font-family:var(--texto);font-size:19px;text-transform:uppercase;letter-spacing:.05em;
  padding:9px 20px;border-radius:99px;box-shadow:0 5px 0 rgba(0,0,0,.25);white-space:nowrap}
#btn-cesta b{background:var(--rojo);color:#fff;border-radius:99px;padding:1px 9px;margin-left:6px}
#btn-cesta.late{animation:late .5s ease}
@keyframes late{0%,100%{transform:scale(1)}40%{transform:scale(1.16) rotate(-3deg)}}

/* ---------- piezas sueltas ------------------------------------------------ */
.eti{display:inline-block;background:var(--naranja);color:var(--vino);font-size:17px;
  text-transform:uppercase;letter-spacing:.16em;padding:6px 16px;border-radius:99px;
  transform:rotate(-2deg);margin-bottom:16px}
.sellos{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.sello{background:rgba(245,227,205,.05);border:2px dashed rgba(245,227,205,.4);
  padding:8px 16px;border-radius:99px;font-size:17px;text-transform:uppercase;letter-spacing:.06em}
/* La cinta va girada y sobresaliendo por los dos lados. Antes lo conseguia con
   scale(1.03), que ensanchaba la pagina 22 px; ahora sobresale con margenes
   negativos, que no cuentan para el ancho del documento. */
.marquesina{background:var(--amarillo);padding:16px 0;overflow:hidden;
  transform:rotate(-1.4deg);position:relative;z-index:5;
  width:calc(100% + 60px);margin-left:-30px}
.marquesina .tira{display:inline-flex;white-space:nowrap;animation:desfila 24s linear infinite}
.marquesina span{font-family:var(--display);font-size:36px;color:var(--vino);
  text-transform:uppercase;padding:0 26px}
.marquesina span:nth-child(even){color:transparent;-webkit-text-stroke:2px var(--vino)}
@keyframes desfila{to{transform:translateX(-50%)}}

/* aparicion al hacer scroll (se activa desde brasa.js) */
.rev{opacity:0;transform:translateY(38px)}
.rev.in{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- tarjeta de plato --------------------------------------------- */
.platos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plato{background:#fff;border-radius:26px;overflow:hidden;box-shadow:var(--sombra);
  display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  color:var(--marron);position:relative}
.plato:hover{transform:translateY(-8px) rotate(-.5deg)}
.plato .foto{position:relative}
.plato img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--vino2)}
.plato .cinta{position:absolute;top:12px;left:12px;background:var(--rojo-txt);color:#fff;
  font-size:16px;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;
  border-radius:99px;transform:rotate(-3deg);box-shadow:0 4px 0 rgba(0,0,0,.2)}
.plato .cinta.verde{background:var(--verde)}
.plato .cinta.limon{background:var(--limon);color:var(--marron)}
.plato .cuerpo{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.plato h3{font-size:26px;color:var(--vino)}
.plato p{font-size:18px;opacity:.8;flex:1;line-height:1.3}
/* Opacidades subidas tras medir el contraste: a .55 los alergenos se quedaban
   en 3,15:1 sobre blanco y el minimo AA para texto pequeño es 4,5:1. */
.plato .alerg{font-size:16px;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.plato .fila{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.plato .precio{font-family:var(--display);font-size:26px;color:var(--naranja-txt)}
.plato .mini{font-size:17px;color:var(--vino);text-decoration:underline}
.anadir{background:var(--verde);color:#fff;border:0;cursor:pointer;font-family:var(--texto);
  font-size:19px;text-transform:uppercase;padding:9px 20px;border-radius:99px;
  box-shadow:0 5px 0 rgba(0,0,0,.2);transition:transform .15s}
.anadir:hover{transform:scale(1.07) rotate(-2deg)}
.anadir.hecho{background:var(--marron)}

/* ---------- cesta lateral ------------------------------------------------- */
#cesta{position:fixed;top:0;right:-460px;bottom:0;width:min(410px,94vw);z-index:130;
  background:var(--crema);color:var(--marron);box-shadow:-18px 0 50px rgba(0,0,0,.45);
  display:flex;flex-direction:column;transition:right .4s cubic-bezier(.34,1.2,.64,1)}
#cesta.abierta{right:0}
#cesta > header{display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;background:var(--vino);color:var(--crema);flex:0 0 auto}
#cesta > header h3{font-size:26px;color:var(--limon)}
#cerrar-cesta{background:none;border:0;color:var(--crema);font-size:26px;cursor:pointer;line-height:1}
#lineas{flex:1;overflow:auto;padding:18px 22px}
.linea{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
  margin-bottom:14px;border-bottom:1px dashed rgba(102,44,0,.25);padding-bottom:12px}
.linea b{font-size:19px;display:block;line-height:1.1}
.linea small{opacity:.85;font-size:16px}
.cant{display:flex;align-items:center;gap:8px}
.cant button{width:28px;height:28px;border-radius:99px;border:0;cursor:pointer;
  background:var(--vino);color:#fff;font-size:17px;line-height:1}
#cesta > footer{padding:16px 22px 22px;flex:0 0 auto;border-top:1px solid rgba(102,44,0,.15)}
.tot{display:flex;justify-content:space-between;font-size:19px;margin-bottom:5px}
.tot.grande{font-family:var(--display);font-size:24px;color:var(--vino);margin-top:8px}
.tot small{opacity:.85;font-size:16px}
#vacia{opacity:.85;text-align:center;margin-top:30px}
#velo-cesta{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:125;opacity:0;
  pointer-events:none;transition:opacity .3s}
#velo-cesta.on{opacity:1;pointer-events:auto}
.barra-envio{background:rgba(102,44,0,.12);border-radius:99px;height:9px;overflow:hidden;margin:8px 0 4px}
.barra-envio i{display:block;height:100%;background:var(--verde);width:0;transition:width .4s}

/* ---------- aviso de "añadido" ------------------------------------------- */
#aviso-brasa{position:fixed;left:22px;bottom:22px;z-index:118;display:flex;align-items:center;
  gap:14px;background:var(--verde);color:#fff;padding:12px 14px 12px 20px;border-radius:99px;
  box-shadow:0 12px 34px rgba(0,0,0,.4);font-size:19px;
  opacity:0;transform:translateY(20px) scale(.94);pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.56,.64,1)}
#aviso-brasa.on{opacity:1;transform:none;pointer-events:auto}
#aviso-brasa button{background:rgba(255,255,255,.22);border:0;color:#fff;cursor:pointer;
  font-family:var(--texto);font-size:18px;text-transform:uppercase;letter-spacing:.06em;
  padding:7px 16px;border-radius:99px}
#aviso-brasa button:hover{background:rgba(255,255,255,.35)}
body.con-cinta #aviso-brasa{bottom:58px}
@media(max-width:620px){
  #aviso-brasa{left:14px;right:14px;justify-content:space-between;font-size:18px}
}

/* ---------- pie ----------------------------------------------------------- */
footer.pie{background:var(--tinta);padding:56px 24px 22px;text-align:center}
footer.pie .logo{font-family:var(--display);font-size:44px;color:var(--limon)}
footer.pie .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  max-width:var(--caja);margin:34px auto 0;text-align:left}
footer.pie .cols h4{font-family:var(--display);font-weight:400;font-size:22px;
  color:var(--crema);text-transform:uppercase;margin-bottom:10px}
footer.pie .cols a,footer.pie .cols p{display:block;color:var(--crema);opacity:.62;
  text-decoration:none;font-size:18px;margin-bottom:5px}
footer.pie .cols a:hover{opacity:1;color:var(--limon)}
.aviso-demo{max-width:var(--caja);margin:34px auto 0;padding-top:16px;
  border-top:1px solid rgba(245,227,205,.15);font-size:15px;opacity:.88;line-height:1.5}

/* ---------- avisos de maqueta -------------------------------------------- */
.cinta-demo{background:var(--limon);color:var(--marron);text-align:center;
  font-size:16px;letter-spacing:.06em;text-transform:uppercase;padding:7px 16px;
  position:fixed;bottom:0;left:0;right:0;z-index:110}
body.con-cinta{padding-bottom:36px}

/* ---------- formularios --------------------------------------------------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:18px;text-transform:uppercase;letter-spacing:.07em;
  opacity:.8;margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;font-family:var(--texto);font-size:20px;
  padding:12px 14px;border-radius:14px;border:2px solid rgba(102,44,0,.22);
  background:#fff;color:var(--marron)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--naranja);
  box-shadow:0 0 0 4px rgba(239,111,46,.18)}
.campo input.mal{border-color:var(--rojo);box-shadow:0 0 0 4px rgba(249,24,20,.15)}
.campo .error{color:var(--rojo);font-size:16px;margin-top:4px;display:none}
.campo.mal .error{display:block}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tres{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}

/* ---------- movil --------------------------------------------------------- */
@media(max-width:980px){
  .platos{grid-template-columns:repeat(2,1fr)}
  footer.pie .cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  body{font-size:19px}
  section{padding:70px 20px}
  nav.barra{padding:10px 16px;gap:12px}
  nav.barra ul{position:fixed;top:58px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--vino2);padding:0 20px;max-height:0;overflow:hidden;
    transition:max-height .35s ease,padding .35s ease}
  nav.barra ul.abierto{max-height:60vh;padding:14px 20px 20px;overflow:auto}
  nav.barra ul li{border-bottom:1px solid rgba(245,227,205,.1)}
  nav.barra ul a{display:block;padding:13px 0;font-size:21px}
  .hamburguesa{display:block}
  .platos{grid-template-columns:1fr}
  .dos,.tres{grid-template-columns:1fr}
  footer.pie .cols{grid-template-columns:1fr;text-align:center}
}