/* TERCER OJO — pizzeria de Bilbao La Vieja, estilo Brooklyn. Maqueta del muestrario de BAI Marketing.
   Paleta calculada ANTES de escribirla (contraste WCAG, texto sobre fondo):
     hueso/negro 15.8 · hueso/negro2 14.7 · crema/negro 11.85 · rojo-txt/negro 6.26
     verde-txt/negro 8.69 · gris/negro 9.12 · negro/crema(boton) 11.85
     hueso/rojo(relleno) 5.22 · apagado 7.55 · negro/verde-claro 8.39
   Regla de la casa: un color de RELLENO nunca se usa como color de TEXTO sin su token -txt. */

:root{
  --negro:#0A0A0A;        /* fondo de pagina */
  --negro2:#141414;       /* paneles y tarjetas */
  --borde:#2A2A2A;        /* filos */
  --hueso:#EDE5D4;        /* texto principal */
  --gris:#B8AFA0;         /* texto secundario */
  --crema:#E9C46A;        /* acento: texto sobre negro Y relleno de boton (texto negro) */
  --rojo:#A8352A;         /* RELLENO; encima siempre hueso */
  --rojo-txt:#E0705C;     /* el rojo cuando ES texto sobre negro */
  --verde:#2F4A26;        /* RELLENO; encima siempre hueso */
  --verde-txt:#A3B18A;    /* el verde cuando ES texto sobre negro */
  --display:'Oswald',sans-serif;
  --texto:'Space Grotesk',sans-serif;
  --caja:1120px;
  --barra:96px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--negro);color:var(--hueso);font-family:var(--texto);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
img[width]{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;
  text-transform:uppercase;letter-spacing:.04em}
h1 em,h2 em{font-style:normal;color:var(--crema)}
.caja{max-width:var(--caja);margin:0 auto;padding:0 24px}

/* etiqueta pequeña de seccion */
.sopra{display:inline-block;font-size:12.5px;text-transform:uppercase;letter-spacing:.34em;
  color:var(--gris);margin-bottom:14px;border:1px solid var(--borde);padding:6px 14px}

/* ---------- barra lateral (escritorio) / superior (movil) ---------- */
nav.barra{position:fixed;z-index:60;top:0;left:0;bottom:0;width:var(--barra);
  background:var(--negro);border-right:1px solid var(--borde);
  display:flex;flex-direction:column;align-items:center;padding:14px 0}
nav.barra .logo img{width:64px;height:64px;object-fit:contain}
nav.barra ul{list-style:none;display:flex;flex-direction:column;width:100%;
  margin-top:18px;border-top:1px solid var(--borde);flex:1}
nav.barra li{border-bottom:1px solid var(--borde)}
nav.barra li a{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:17px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--gris);text-align:center;transition:.2s}
nav.barra li a:hover{color:var(--crema)}
nav.barra li a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5}
#btn-cesta{background:none;border:0;border-top:1px solid var(--borde);width:100%;
  padding:16px 4px;cursor:pointer;color:var(--gris);font-family:var(--texto);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;transition:.2s}
#btn-cesta:hover{color:var(--crema)}
#btn-cesta svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5}
#btn-cesta b{background:var(--crema);color:var(--negro);border-radius:99px;
  min-width:20px;height:20px;line-height:20px;font-size:12px;font-weight:700}
#btn-cesta.late b{animation:late .5s ease}
@keyframes late{40%{transform:scale(1.45)}}
nav.barra .estado{border-top:1px solid var(--borde);width:100%;padding:13px 6px 2px;
  text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
nav.barra .estado b{display:block;font-size:11px;margin-top:3px}
nav.barra .estado .si{color:var(--verde-txt)}
nav.barra .estado .no{color:var(--rojo-txt)}
#abre-menu{display:none}

/* el contenido deja sitio a la barra */
main,section,footer{--noop:0}
body{padding-left:var(--barra)}

/* ---------- botones ---------- */
.btn{display:inline-block;background:var(--crema);color:var(--negro);border:1px solid var(--crema);
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:16px;padding:13px 28px;cursor:pointer;transition:.2s}
.btn:hover{background:var(--hueso);border-color:var(--hueso)}
.btn.hueco{background:transparent;color:var(--hueso);border:1px solid var(--hueso)}
.btn.hueco:hover{background:var(--hueso);color:var(--negro)}
.btn.rojo{background:var(--rojo);border-color:var(--rojo);color:var(--hueso)}
.btn.ancho{display:block;width:100%;text-align:center}
/* apagado: color propio, nunca opacidad (la opacidad se carga el contraste) */
.btn.apagado{background:var(--borde);border-color:var(--borde);color:#C4BBAB;cursor:not-allowed}

/* ---------- tarjetas de plato ---------- */
.plato{position:relative;background:var(--negro2);border:1px solid var(--borde);
  display:flex;flex-direction:column;transition:.25s}
.plato:hover{border-color:var(--gris);transform:translateY(-4px)}
.plato img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto;
  border-bottom:1px solid var(--borde)}
.plato .cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.plato h3{font-size:21px;letter-spacing:.06em;margin-bottom:6px}
.plato .cuerpo>p{font-size:15.5px;color:var(--gris)}
.plato .detalle{font-size:14.5px;color:var(--gris);font-style:italic;margin-top:8px;
  border-left:2px solid var(--borde);padding-left:10px}
.plato .alerg{font-size:12.5px;color:var(--gris);margin-top:10px;letter-spacing:.02em}
.plato .fila{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:16px}
.plato .precio{font-family:var(--display);font-size:23px;color:var(--crema)}
.anadir{background:transparent;color:var(--hueso);border:1px solid var(--hueso);
  font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  font-size:14px;padding:9px 18px;cursor:pointer;transition:.2s}
.anadir:hover{background:var(--crema);border-color:var(--crema);color:var(--negro)}
.anadir.hecho{background:var(--verde);border-color:var(--verde);color:var(--hueso)}
.cinta{position:absolute;top:12px;left:-8px;z-index:2;background:var(--crema);color:var(--negro);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  padding:6px 12px;transform:rotate(-3deg)}

/* ---------- secciones ---------- */
section{padding:96px 0;border-top:1px solid var(--borde)}
section h2{font-size:clamp(34px,4.4vw,58px);letter-spacing:.05em}
.rejilla-3,.platos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.rejilla-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}

/* ---------- cesta lateral (cajon) ---------- */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.72);opacity:0;pointer-events:none;
  transition:.3s;z-index:80}
.velo.abierto{opacity:1;pointer-events:auto}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--negro2);
  border-left:1px solid var(--borde);z-index:90;padding:26px 26px 30px;overflow:auto;
  transform:translateX(102%);transition:transform .32s ease;color:var(--hueso)}
.cajon.abierto{transform:none}
.cajon h3{font-size:26px;margin-bottom:18px;letter-spacing:.08em}
#cierra-cesta{position:absolute;top:16px;right:18px;background:none;border:0;color:var(--hueso);
  font-size:22px;cursor:pointer;line-height:1}
.cajon .linea{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:13px 0;border-bottom:1px dashed var(--borde);font-size:16px}
.cajon .linea small{display:block;color:var(--gris);font-size:13.5px}
.cajon .cant{display:flex;align-items:center;gap:4px}
.cajon .cant button{width:28px;height:28px;border:1px solid var(--hueso);background:none;
  color:var(--hueso);cursor:pointer;font-size:16px;line-height:1}
.cajon .cant button:hover{background:var(--crema);border-color:var(--crema);color:var(--negro)}
#vacia{color:var(--gris);padding:18px 0 8px}
.cajon .tot{display:flex;justify-content:space-between;padding:8px 0;font-size:16.5px}
.cajon .tot:last-of-type{font-family:var(--display);font-size:21px;border-top:1px solid var(--hueso);
  margin-top:8px;padding-top:13px}
.cajon .btn{margin-top:16px}
.aviso-min{background:rgba(224,112,92,.12);border:1px solid rgba(224,112,92,.4);
  color:var(--hueso);padding:11px 13px;font-size:14.5px;margin:12px 0 4px}
.aviso-envio-p{font-size:14.5px;color:var(--gris);margin:12px 0 6px}
.aviso-envio-p b{color:var(--hueso)}
.barra-envio{height:5px;background:var(--borde);margin-bottom:8px}
.barra-envio i{display:block;height:100%;background:var(--verde-txt);transition:width .3s}

/* aviso (toast) */
#aviso{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:95;
  background:var(--crema);color:var(--negro);font-weight:600;padding:13px 22px;
  opacity:0;pointer-events:none;transition:.3s;font-size:16px}
#aviso.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#aviso button{color:inherit}

/* ---------- pie ---------- */
footer{border-top:1px solid var(--borde);padding:54px 0 80px;color:var(--gris);font-size:15px}
footer .caja{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:start}
footer h4{font-size:15px;letter-spacing:.2em;color:var(--hueso);margin-bottom:10px}
footer a:hover{color:var(--crema)}
footer .aviso-maqueta{grid-column:1/-1;border-top:1px dashed var(--borde);padding-top:18px;
  font-size:13.5px}

/* aparicion suave */
.rev{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
}

/* ---------- movil ---------- */
@media(max-width:960px){
  body{padding-left:0;padding-top:60px}
  nav.barra{right:0;bottom:auto;width:auto;height:60px;flex-direction:row;
    justify-content:space-between;padding:0 14px;border-right:0;border-bottom:1px solid var(--borde)}
  nav.barra .logo img{width:42px;height:42px}
  nav.barra ul{position:fixed;top:60px;left:0;right:0;background:var(--negro);margin:0;
    border-top:1px solid var(--borde);display:none;flex-direction:column}
  nav.barra ul.abierto{display:flex}
  nav.barra li a{flex-direction:row;justify-content:center;gap:10px;padding:15px;font-size:13px}
  nav.barra .estado{display:none}
  #abre-menu{display:block;background:none;border:1px solid var(--borde);color:var(--hueso);
    font-size:20px;padding:6px 12px;cursor:pointer}
  #btn-cesta{border:1px solid var(--borde);width:auto;flex-direction:row;padding:8px 12px;gap:8px;
    background:var(--negro)}
  .rejilla-3,.rejilla-2,.platos{grid-template-columns:1fr}
  section{padding:64px 0}
}