/* KOI — sushi · barra de barrio · Bilbao. Maqueta del muestrario de BAI.
   DOS PIELES, una web:
   - LIMPIA (blanco, aire, líneas finas): el hero con los palillos y las
     páginas de servicio (pedido, gracias, ubicación, la barra).
   - OSCURA (medida en new-sushism.jp: fondo #1A100D, texto #DEDBD7, bermellón
     #E54120, titulares compresos enormes de 130–190 px): la portada a partir
     del hero y la carta, donde viven el producto y el despiece.
   Tipografías: Big Shoulders Display (equivalente libre del Arteria compress
   de la referencia) para los titulares oscuros; Shippori Mincho para los
   claros; Zen Kaku Gothic New para el texto.
   Contrastes calculados antes del CSS:
     claro: sumi #1C1C1C/blanco 16.7 · gris #5F5B55/blanco 6.99 · rojo #C8102E/blanco 5.87
     oscuro: hueso #DEDBD7/fondo 13.4 · hueso al 70 % 9.7 · rojo-txt #F0403F/fondo 4.9
             rojo grande #E0262E/fondo 3.96 (solo titulares) · blanco sobre rojo #C8102E 5.87
             texto hueso sobre panel #2A1D18 11.9 · negro sobre rojo 3.6 (solo titulares)
     botón apagado: color propio, nunca opacidad */

:root{
  --blanco:#FFFFFF; --papel:#F7F5F0;
  --sumi:#1C1C1C; --sumi2:#111111;
  --gris:#5F5B55;
  --linea:rgba(28,28,28,.14); --linea-fuerte:rgba(28,28,28,.4);
  --koi:#C8102E; --koi-txt:#C8102E; --koi-vivo:#C8102E;
  --verde-txt:#3F6E00; --rojo-txt:#C00D0A;
  --display:'Big Shoulders Display','Anton',Impact,sans-serif;
  --grande:'Big Shoulders Display','Anton',Impact,sans-serif;
  --texto:'Zen Kaku Gothic New','Hiragino Sans',system-ui,sans-serif;
  --caja:1120px;
  --sombra:0 1px 2px rgba(28,28,28,.06),0 14px 40px rgba(28,28,28,.08);
  --fondo:var(--blanco); --tinta:var(--sumi); --panel:var(--blanco);
}
/* la piel oscura: se activa con body.oscuro */
body.oscuro{
  --fondo:#1A100D; --tinta:#DEDBD7; --panel:#2A1D18; --papel:#140C0A;
  --sumi:#DEDBD7; --sumi2:#0E0806; --gris:rgba(222,219,215,.72);
  --linea:rgba(222,219,215,.14); --linea-fuerte:rgba(222,219,215,.42);
  --koi:#C8102E; --koi-txt:#F0403F; --koi-vivo:#E0262E; --verde-txt:#9BC96C; --rojo-txt:#F0403F;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 18px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--fondo);color:var(--tinta);font-family:var(--texto);
  font-size:17px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.caja{max-width:var(--caja);margin:0 auto;padding:0 28px}

h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:.005em;text-transform:uppercase}
h2{font-size:clamp(40px,5vw,64px)}
h2 mark,h1 mark{background:none;color:var(--koi-txt);font-style:normal}
/* titulares enormes de la piel oscura */
.oscuro h2,.oscuro h1{font-family:var(--grande);font-weight:900;text-transform:uppercase;
  line-height:.86;letter-spacing:-.005em;font-style:normal}
.oscuro h2{font-size:clamp(64px,10vw,150px)}
.oscuro h2 mark,.oscuro h1 mark{font-style:normal;color:var(--koi-vivo)}
.oscuro .gigante{font-size:clamp(84px,14vw,210px)}

.papel,.baldosa{background:var(--papel)}

.sopra{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.32em;
  text-transform:uppercase;font-weight:500;color:var(--koi-txt);margin-bottom:18px}
.sopra:before{content:'';width:22px;height:1px;background:var(--koi-txt);flex:0 0 auto}
.centrado .sopra{justify-content:center}

/* ---------- barra de navegación ---------- */
nav.barra{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.oscuro nav.barra{background:rgba(26,16,13,.88)}
nav.barra .caja{display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px}
nav.barra .logo{font-family:var(--display);font-weight:900;font-size:30px;
  letter-spacing:.14em;text-decoration:none;display:flex;align-items:center;gap:12px;color:var(--tinta)}
nav.barra .logo .kanji{font-family:'Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;font-size:20px;font-weight:500;letter-spacing:0;color:var(--koi-txt);
  border:1px solid var(--koi-txt);width:36px;height:36px;display:inline-flex;
  align-items:center;justify-content:center;line-height:1}
nav.barra .logo small{font-family:var(--texto);font-weight:400;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gris);display:block;line-height:1.1}
nav.barra ul{display:flex;gap:30px;list-style:none;align-items:center}
nav.barra ul a{text-decoration:none;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;padding-bottom:4px;border-bottom:1px solid transparent}
nav.barra ul a:hover{border-bottom-color:var(--tinta)}
nav.barra ul a.activo{border-bottom-color:var(--koi-txt);color:var(--koi-txt)}
#abre-menu{display:none;background:none;border:1px solid var(--linea-fuerte);
  font-size:22px;line-height:1;padding:5px 12px;cursor:pointer;color:var(--tinta)}
/* la barra flotante de la portada: solo el logo sobre el hero, el resto al bajar */
nav.barra.flotante{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;transition:background .35s,border-color .35s}
nav.barra.flotante ul,nav.barra.flotante #abre-menu{opacity:0;pointer-events:none;transition:opacity .35s}
nav.barra.flotante.baja{background:rgba(26,16,13,.88);border-bottom-color:var(--linea);backdrop-filter:blur(10px)}
nav.barra.flotante.baja ul,nav.barra.flotante.baja #abre-menu{opacity:1;pointer-events:auto}
nav.barra.flotante .logo{color:#1C1C1C}
nav.barra.flotante.baja .logo{color:var(--tinta)}
nav.barra.flotante .logo .kanji{color:#C8102E;border-color:#C8102E}
nav.barra.flotante.baja .logo .kanji{color:var(--koi-txt);border-color:var(--koi-txt)}
nav.barra.flotante .logo small{color:#5F5B55}
nav.barra.flotante.baja .logo small{color:var(--gris)}

/* ---------- botones ---------- */
.btn{display:inline-block;background:var(--tinta);color:var(--fondo);border:1px solid var(--tinta);cursor:pointer;
  font-family:var(--texto);font-weight:500;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;padding:15px 30px;border-radius:0;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--koi);border-color:var(--koi);color:#fff}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:#D9D5CE;border-color:#D9D5CE;color:#5F5B55;cursor:not-allowed;transform:none}
.btn.rojo{background:var(--koi);border-color:var(--koi);color:#fff}
.btn.rojo:hover{background:var(--tinta);border-color:var(--tinta);color:var(--fondo)}
.btn.hueco{background:transparent;color:var(--tinta);border-color:var(--linea-fuerte)}
.btn.hueco:hover{border-color:var(--tinta);background:var(--tinta);color:var(--fondo)}
.btn.ancho{width:100%;text-align:center}
.btn.apagado{background:#D9D5CE;border-color:#D9D5CE;color:#5F5B55;cursor:not-allowed}
.oscuro .btn.apagado,.oscuro .btn[disabled]{background:#3A2B25;border-color:#3A2B25;color:#B8B0A8}

/* ---------- platos ---------- */
.platos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.plato{background:var(--panel);color:var(--tinta);border:1px solid var(--linea);
  display:flex;flex-direction:column;position:relative;transition:border-color .25s}
.plato:hover{border-color:var(--linea-fuerte)}
.plato img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--papel)}
.plato .cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.plato h3{font-size:28px;margin-bottom:6px;letter-spacing:.01em}
.oscuro .plato h3{font-family:var(--grande);font-weight:800;font-size:30px;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.plato p{font-size:15.5px;color:var(--gris);flex:1}
.plato .detalle{font-size:14.5px;color:var(--gris);border-left:1px solid var(--koi-txt);
  padding-left:12px;margin-top:12px}
.plato .alerg{font-size:13px;color:var(--gris);margin-top:12px;letter-spacing:.02em}
.plato .fila{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:16px;border-top:1px solid var(--linea);padding-top:14px}
.plato .precio{font-family:var(--display);font-weight:800;font-size:26px}
.oscuro .plato .precio{font-family:var(--grande);font-weight:800;font-size:28px}
.anadir{background:var(--tinta);color:var(--fondo);border:1px solid var(--tinta);cursor:pointer;
  font-family:var(--texto);font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;border-radius:0;transition:background .2s,border-color .2s,color .2s}
.anadir:hover,.anadir.hecho{background:var(--koi);border-color:var(--koi);color:#fff}
.plato .cinta{position:absolute;top:14px;left:14px;background:var(--fondo);color:var(--koi-txt);
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--koi-txt);z-index:2}

/* ---------- secciones ---------- */
section{padding:96px 0}
.sub{font-size:18px;color:var(--gris);max-width:600px}
.centrado{text-align:center}
.centrado .sub{margin:16px auto 52px}

/* ---------- cesta ---------- */
#btn-cesta{position:fixed;right:28px;bottom:28px;z-index:60;background:var(--tinta);
  color:var(--fondo);border:0;cursor:pointer;font-family:var(--texto);font-weight:500;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:15px 22px;border-radius:99px;
  box-shadow:var(--sombra);display:flex;gap:12px;align-items:center}
#btn-cesta b{background:var(--koi);color:#fff;border-radius:99px;min-width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:0}
#btn-cesta.late{animation:late .5s ease}
@keyframes late{0%,100%{transform:scale(1)}40%{transform:scale(1.08)}}
.cajon{position:fixed;top:0;right:-440px;width:min(420px,92vw);height:100dvh;z-index:80;
  background:var(--fondo);color:var(--tinta);transition:right .35s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;padding:30px 28px;border-left:1px solid var(--linea)}
.cajon.abierto{right:0}
.cajon h3{font-size:34px;margin-bottom:20px}
.cajon .lineas{flex:1;overflow:auto}
.linea{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--linea);font-size:16px}
.linea small{display:block;color:var(--gris);font-size:14px}
.linea .menos,.linea .mas{background:none;border:1px solid var(--linea-fuerte);
  width:28px;height:28px;cursor:pointer;font-size:16px;color:var(--tinta)}
#vacia{color:var(--gris);text-align:center;margin-top:34px}
.cajon .tot{display:flex;justify-content:space-between;font-size:17px;padding:12px 0 4px}
.cajon .tot:last-of-type{font-family:var(--display);font-weight:800;font-size:26px;border-top:1px solid var(--tinta);margin-top:6px;padding-top:14px;margin-bottom:14px}
.velo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;opacity:0;
  pointer-events:none;transition:opacity .3s}
.velo.abierto{opacity:1;pointer-events:auto}
#cierra-cesta{position:absolute;top:22px;right:22px;background:none;border:0;
  font-size:22px;cursor:pointer;color:var(--tinta)}
.cajon .aviso-min{color:var(--rojo-txt);font-size:15px;font-weight:500}
.cajon .aviso-envio-p{font-size:15px;color:var(--gris)}
.cajon .aviso-envio-p b{color:var(--tinta)}
.barra-envio{height:3px;background:var(--linea);margin:10px 0 6px;overflow:hidden}
.barra-envio i{display:block;height:100%;background:var(--koi-vivo);width:0;transition:width .4s}

/* aviso (toast) */
#aviso{position:fixed;left:28px;bottom:28px;z-index:90;background:var(--tinta);
  color:var(--fondo);padding:14px 22px;font-size:15px;
  box-shadow:var(--sombra);opacity:0;transform:translateY(12px);
  transition:opacity .25s,transform .25s;pointer-events:none;max-width:80vw;
  border-left:3px solid var(--koi-vivo)}
#aviso.visible{opacity:1;transform:none}

/* ---------- pie ---------- */
footer.pie{background:var(--sumi2);color:#fff;padding:80px 28px 30px}
.oscuro footer.pie{border-top:1px solid var(--linea)}
footer.pie .logo{font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:.14em;margin-bottom:6px}
footer.pie .logo .kanji{font-family:'Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;font-weight:500;color:var(--koi-vivo);letter-spacing:0;margin-right:12px;font-size:30px}
footer.pie .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  max-width:var(--caja);margin:40px auto 0}
footer.pie h4{font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.7);margin-bottom:14px}
footer.pie a,footer.pie .cols p{display:block;color:rgba(255,255,255,.92);
  text-decoration:none;font-size:16px;margin-bottom:8px}
footer.pie a:hover{color:#fff;text-decoration:underline}
.aviso-demo{max-width:var(--caja);margin:44px auto 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.18);font-size:14px;
  color:rgba(255,255,255,.85);line-height:1.6}

/* aparición al bajar: lenta y corta */
.rev{opacity:0;transform:translateY(22px)}
.rev.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- el carrusel de piezas (bajo el despiece) ---------- */
#carrusel{position:relative;width:100%;overflow:hidden;cursor:grab;user-select:none;
  -webkit-user-select:none;touch-action:pan-y;padding:18px 0 10px;outline:none}
#carrusel.agarrado{cursor:grabbing}
#carrusel:focus-visible{box-shadow:inset 0 0 0 1px var(--koi-vivo)}
#carrusel .tira{display:flex;gap:16px;width:max-content;will-change:transform;padding:0 50vw}
#carrusel .ficha{position:relative;width:108px;flex:0 0 auto;background:none;border:0;cursor:pointer;
  color:var(--tinta);font-family:var(--texto);text-align:center;padding:0;
  transition:opacity .2s;will-change:transform}
#carrusel .ficha img{width:108px;height:108px;object-fit:cover;border-radius:99px;
  border:1px solid var(--linea);pointer-events:none;background:var(--panel)}
#carrusel .ficha.on img{border-color:var(--koi-vivo);box-shadow:0 0 0 3px rgba(224,38,46,.35)}
#carrusel .ficha .n{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gris)}
#carrusel .ficha.on .n{color:var(--tinta)}
#carrusel .ficha .marca{position:absolute;top:-6px;right:0;font-size:10.5px;letter-spacing:.14em;font-weight:700;
  text-transform:uppercase;background:#DEDBD7;color:#1A100D;padding:3px 7px;pointer-events:none}
.flechas{display:flex;gap:10px;justify-content:center}
.flechas button{background:none;border:1px solid var(--linea-fuerte);color:var(--tinta);width:40px;height:40px;
  cursor:pointer;font-size:18px;transition:.2s}
.flechas button:hover{border-color:var(--tinta)}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .platos{grid-template-columns:repeat(2,1fr);gap:18px}
  footer.pie .cols{grid-template-columns:1fr 1fr}
  section{padding:72px 0}
}
@media (max-width:620px){
  nav.barra ul{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--fondo);border-bottom:1px solid var(--linea);
    flex-direction:column;gap:0;padding:10px 28px 18px}
  nav.barra.flotante ul{background:#1A100D}
  nav.barra ul.abierto{display:flex}
  nav.barra ul li{width:100%}
  nav.barra ul a{display:inline-block;padding:12px 0;font-size:13px}
  #abre-menu{display:block}
  .platos{grid-template-columns:1fr}
  section{padding:60px 0}
  footer.pie .cols{grid-template-columns:1fr}
  .caja{padding:0 20px}
  #btn-cesta{right:18px;bottom:18px}
  #aviso{left:18px;bottom:18px}
  #carrusel .ficha{width:78px} #carrusel .ficha img{width:78px;height:78px}
  #carrusel .tira{gap:12px}
}

/* ---------- movimiento (js/movimiento.js) ---------- */
:root{--curva:cubic-bezier(.625,.05,0,1)}
.cargador{position:fixed;inset:0;z-index:200;background:#fff;display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--curva),visibility .8s}
.cargador .koi{font-family:'Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;font-size:64px;color:#C8102E;line-height:1;animation:latido 1.6s ease-in-out infinite}
.cargador small{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:#5F5B55}
@keyframes latido{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}
html.cargada .cargador{opacity:0;visibility:hidden;pointer-events:none}
html.saliendo body{opacity:0;transition:opacity .36s var(--curva)}
body{transition:opacity .36s var(--curva)}
nav.barra{transition:transform .5s var(--curva),background .35s,border-color .35s}
nav.barra.oculta{transform:translateY(-100%)}
[data-rev]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--curva),transform .9s var(--curva);
  transition-delay:calc(var(--i,0)*90ms)}
[data-rev="izq"]{transform:translateX(-40px)}
[data-rev="der"]{transform:translateX(40px)}
[data-rev="zoom"]{transform:scale(.94)}
[data-rev].visto{opacity:1;transform:none}
[data-parallax],[data-desliza]{will-change:transform}
@media (prefers-reduced-motion:reduce){ [data-rev]{opacity:1;transform:none;transition:none} .cargador{display:none} }


/* ---------- mezcla: blanco y rojo dentro de la piel oscura ---------- */
.oscuro .claro{--fondo:#FFFFFF;--tinta:#1C1C1C;--panel:#FFFFFF;--papel:#F7F5F0;--gris:#5F5B55;
  --linea:rgba(28,28,28,.14);--linea-fuerte:rgba(28,28,28,.4);--koi:#C8102E;--koi-txt:#C8102E;--koi-vivo:#C8102E;
  --verde-txt:#3F6E00;--rojo-txt:#C00D0A;--sombra:0 1px 2px rgba(28,28,28,.06),0 14px 40px rgba(28,28,28,.08);
  background:var(--fondo);color:var(--tinta)}
.oscuro .claro .btn.apagado,.oscuro .claro .btn[disabled]{background:#D9D5CE;border-color:#D9D5CE;color:#5F5B55}
.oscuro .rojo-bloque{--fondo:#C8102E;--tinta:#FFFFFF;--gris:#FFFFFF;--linea:rgba(255,255,255,.25);
  --linea-fuerte:rgba(255,255,255,.6);--koi-vivo:#1A100D;--koi-txt:#FFFFFF;background:var(--fondo);color:var(--tinta)}
.oscuro .rojo-bloque .sopra:before{background:#fff}
.oscuro .rojo-bloque .btn{background:#1A100D;border-color:#1A100D;color:#fff}
.oscuro .rojo-bloque .btn:hover{background:#fff;border-color:#fff;color:#1A100D}

/* ---------- piezas sin fondo (recortes) ---------- */
.rec{display:block;width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.claro .rec{filter:drop-shadow(0 28px 34px rgba(28,28,28,.22)) drop-shadow(0 4px 8px rgba(28,28,28,.12))}