/* ═══════════════════════════════════════════════════════════════════════
   AKANE — hoja de estilo
   0 tipografías · 1 tokens · 2 base · 3 texto · 4 botones · 5 intro
   6 nav · 7 portal · 8 secciones · 9 pie · 10 responsive

   REGLA DE ORO DE LAS ANIMACIONES: nada se desvanece ni se desenfoca.
   Todo se mueve. Solo se usan transform (translate / scale) y, cuando algo
   tiene que desaparecer, sale del encuadre por su propio pie.
   ═══════════════════════════════════════════════════════════════════════ */

/* Las URL de las fuentes llevan versión igual que el CSS y el JS. Sin ella,
   rehacer un subset no llega al navegador: el archivo conserva el nombre y
   se sirve el viejo desde caché — pasó al cambiar el logotipo a Kashima, que
   hasta entonces solo traía dígitos, y el nombre salía en la fallback.
   Al tocar un .woff2 hay que subir este número Y el de <link>/<script>. */

/* ── 0 · TIPOGRAFÍAS ──────────────────────────────────────────────────── */
@font-face{
  font-family:"Yuji Syuku";src:url("../fonts/yuji-syuku-latin.woff2?v=38") format("woff2");
  font-weight:400;font-style:normal;font-display:block;
}
@font-face{
  font-family:"Shippori Mincho B1";src:url("../fonts/shippori-mincho-latin-500.woff2?v=38") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Shippori Mincho B1";src:url("../fonts/shippori-mincho-latin-700.woff2?v=38") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* Las cuatro de pincel. Solo traen latino, así que se les acota el
   unicode-range: cualquier kanji (茜 壱 弐 参) cae solo en Yuji Syuku
   en vez de salir con la fuente del sistema. */
@font-face{
  font-family:"Gisbon";src:url("../fonts/gisbon.woff2?v=38") format("woff2");
  font-weight:400;font-style:normal;font-display:block;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2122;
}
@font-face{
  font-family:"Breathe Fire";src:url("../fonts/breathe-fire.woff2?v=38") format("woff2");
  font-weight:400;font-style:normal;font-display:block;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2122;
}
@font-face{
  font-family:"Kashima";src:url("../fonts/kashima.woff2?v=38") format("woff2");
  font-weight:400;font-style:normal;font-display:block;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20BF,U+2122;
}

/* ── 1 · TOKENS ───────────────────────────────────────────────────────── */
:root{
  --tinta:#120a0b;
  --tinta-2:#1a0f10;
  --laca:#a01118;
  --laca-cl:#c8232b;
  --laca-os:#5e080d;
  --hueso:#f4ede2;
  --hueso-2:#b8a89a;
  --oro:#d8b478;

  /* cinco registros, uno por trabajo:
     marca  · el logotipo AKANE, pincel seco y vertical
     script · titulares en cursiva de pincel (Ancestral, mano corta…)
     titan  · titulares recios en caja alta (RESERVÁ TU LUGAR…)
     sumi   · etiquetas y cifras, trazo estrecho con tracking
     kanji  · los glifos japoneses, que solo tiene Yuji Syuku */
  /* Kashima hace de logotipo Y de cifras: es el trazo fino y astillado con
     tracking amplio de la referencia. Thorletto, que ocupaba este puesto,
     era mucho más gruesa y redonda que el original y ya no se usa. */
  --marca:"Kashima","Yuji Syuku",serif;
  --script:"Gisbon","Shippori Mincho B1",serif;
  --titan:"Breathe Fire","Shippori Mincho B1",serif;
  --sumi:"Kashima","Yuji Syuku",serif;
  --kanji:"Yuji Syuku","Shippori Mincho B1",serif;
  --brush:var(--marca);
  --disp:"Shippori Mincho B1",Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --t-xs:12px;
  --t-sm:14px;
  --t-base:clamp(15px,.42vw + 14px,17px);
  --t-lg:clamp(18px,.6vw + 16px,21px);
  --t-h3:clamp(24px,1.5vw + 18px,36px);
  --t-h2:clamp(32px,3.2vw + 18px,62px);

  --sec:clamp(88px,10vw,168px);
  --gap:clamp(24px,3.4vw,64px);
  --wrap:1240px;
  --nav-h:74px;

  /* la curva de la referencia: arranca seco y frena suave */
  --ease:cubic-bezier(.76,0,.24,1);
  /* ── LÍNEA DE TIEMPO DE LA CONSTRUCCIÓN ────────────────────────────
     Todo cuelga de --slide. La intro sube durante --slide y el hero se
     construye DENTRO de esa ventana: la última pieza (el nombre) cierra
     en 0.99s, antes de que el slide termine en 1.1s. Por eso se lee
     como una sola secuencia y no como "primero el slide, luego el hero".

       fondo   ██████████████
       templo    ↑─────────────
       cuña izq     →────────────
       cuña der       ←────────────
       header           ↓────────
       nombre             ↓─────────
       slide   ════════════════════
                                   ^ hero listo y estable          */
  --slide:1.1s;
  /* La curva del slide DEBE frenar al final, no arrancar despacio: con una
     ease-in-out el hero entra en cuadro en el último tercio y la
     construcción se vuelve a perder fuera de pantalla. Con esta, a media
     animación ya se ve el 70% del hero construyéndose. La comparten intro
     y app: si no llevan la misma, se despegan. */
  --ease-slide:cubic-bezier(.22,.78,.26,1);
  --t-fondo:.69s;  --d-fondo:0s;
  --t-tpl:.77s;    --d-tpl:.07s;
  --t-cuna:.73s;   --d-cunaL:.16s; --d-cunaR:.21s;
  --t-nav:.57s;    --d-nav:.28s;
  /* la decoración entra justo detrás de las cuñas, escalonada en diagonal */
  --t-deco:.69s;   --d-decoL:.24s; --d-decoR:.29s;
                   --d-decoL2:.33s; --d-decoR2:.37s;
  --t-marca:.65s;  --d-marca:.34s;
  --sal:cubic-bezier(.22,.75,.24,1);
}

/* ── 2 · BASE ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%;
  scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none;width:0;height:0}
body{scrollbar-width:none;-ms-overflow-style:none}
body::-webkit-scrollbar{display:none;width:0;height:0}
body{
  margin:0;background:var(--tinta);color:var(--hueso);
  font-family:var(--sans);font-size:var(--t-base);line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.cargando{overflow:hidden;height:100vh;height:100svh}
/* height:auto es obligatorio desde que las <img> llevan width/height en el
   marcado. Esos atributos reservan el hueco y evitan el salto de layout,
   pero también actúan como alto fijo: sin esto el farol se estiraba a sus
   908px de origen dentro de un ancho de 117px. Las capas que sí quieren
   alto propio (.capa--cielo img, .sala__mov img) lo declaran por clase y
   ganan; .tpl y .cuna lo reciben inline desde el JS. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.wrap{width:min(var(--wrap),calc(100% - clamp(32px,6vw,96px)));margin-inline:auto}
/* Visible solo para lector de pantalla: se usa en el contador de platos
   filtrados, que si no cambia sin avisar a nadie. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── 3 · TEXTO ────────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.08}
.tit{font-family:var(--titan);font-size:var(--t-h2);letter-spacing:.02em;line-height:1.02}
/* Breathe Fire solo dibuja caja alta: se declara para que el navegador no
   intente sintetizar minúsculas y el interletraje salga parejo. */
.tit i{font-family:var(--script);font-style:normal;color:var(--oro);
  font-size:1.12em;letter-spacing:0}
.lead{margin-top:22px;max-width:52ch;color:var(--hueso-2)}

.tag{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-size:var(--t-xs);letter-spacing:.34em;text-transform:uppercase;color:var(--hueso-2);
}
.tag em{font-family:var(--sumi);font-style:normal;font-size:1.5em;
  color:var(--laca-cl);letter-spacing:.16em}
.tag::after{content:"";flex:1;height:1px;max-width:170px;
  background:linear-gradient(90deg,rgba(216,180,120,.5),transparent)}

/* ── 4 · BOTONES ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 34px;border-radius:999px;border:1px solid transparent;
  background:transparent;cursor:pointer;
  font-family:var(--script);font-size:calc(var(--t-sm) + 3px);letter-spacing:.04em;
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
}
.btn--line{border-color:rgba(244,237,226,.4)}
.btn--line:hover{background:var(--hueso);color:var(--tinta);transform:translateY(-2px)}
.btn--red{background:var(--laca);color:#fff;
  box-shadow:0 12px 34px rgba(160,17,24,.4),0 2px 14px rgba(0,0,0,.35)}
.btn--red:hover{background:var(--laca-cl);transform:translateY(-2px)}
.btn--w{width:100%;font-size:calc(var(--t-lg) * 1.1);padding:16px 34px}

/* ── 5 · INTRO ────────────────────────────────────────────────────────────
   Sale hacia arriba mientras .app entra desde abajo. Los dos a la vez y con
   la misma curva: eso es lo que hace que se lea como un empuje y no como
   dos animaciones encadenadas. */
.intro{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  /* Estampado de kimono — grullas, pinos, crisantemos y abanicos. Va a
     `cover` y no repetido: es una tela ilustrada, no un patrón que tesele,
     y al repetirlo se ven las costuras. El velo radial de ::after le baja
     el contraste para que el logotipo mande. */
  background:url("../img/p-intro.webp") center/cover no-repeat var(--laca-os);
  will-change:transform;
  transition:transform var(--slide) var(--ease-slide);
}
.intro::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(62% 48% at 50% 45%,rgba(18,6,8,.52) 0%,rgba(10,3,4,.93) 100%),
    linear-gradient(rgba(10,3,4,.28),rgba(10,3,4,.28));
}
.intro.fuera{transform:translateY(-100%)}

.intro__in{position:relative;z-index:2;text-align:center;width:min(380px,72vw)}
.intro__logo{
  font-family:var(--marca);font-size:clamp(56px,11vw,124px);color:#fff;
  letter-spacing:.16em;text-indent:.16em;text-shadow:0 6px 30px rgba(0,0,0,.6);
}
.intro__kanji{
  margin-top:2px;font-family:var(--kanji);font-size:clamp(22px,3.2vw,34px);
  color:var(--oro);letter-spacing:.4em;text-indent:.4em;
  text-shadow:0 2px 16px rgba(0,0,0,.9),0 0 34px rgba(0,0,0,.7);
}
.intro__bar{
  margin-top:30px;height:5px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.2);box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
.intro__bar span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#f6e3c4,#fff);
  transition:width .25s linear;
}
/* Una demo de portfolio se recarga muchas veces. Discreto pero alcanzable
   con teclado desde el primer tabulador. */
.intro__skip{
  margin-top:22px;background:none;border:0;cursor:pointer;padding:8px 14px;
  font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(244,237,226,.72);text-shadow:0 2px 12px rgba(0,0,0,.9);
  transition:color .3s var(--ease);
}
.intro__skip:hover{color:var(--hueso)}

/* La web entra desde abajo, empujada por la intro.
   OJO: tiene que ser 100vh, NO 100%. El porcentaje se resuelve contra la
   altura de .app — la página entera, unas diez pantallas — así que el hero
   arrancaba diez viewports por debajo y toda la construcción pasaba fuera
   de cuadro: al llegar a la pantalla ya estaba montado. Con 100vh recorre
   exactamente una pantalla, que es lo que sube la intro, y las dos cosas
   se ven como un mismo gesto. */
/* svh = la altura del viewport con la barra del navegador DESPLEGADA. Con
   100vh en iOS el recorrido es mayor que la pantalla real y el hero llega
   tarde; svh hace que intro y app recorran exactamente lo mismo. */
.app{transform:translateY(100vh);transform:translateY(100svh);
  transition:transform var(--slide) var(--ease-slide)}
.app.dentro{transform:none}

/* ── 6 · NAV ──────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;gap:var(--gap);
  padding:0 clamp(18px,4vw,48px);
  background:none;
}
/* Transparente SIEMPRE. La barra ya no cambia de fondo al scrollear: la
   legibilidad la ponen las piezas, no el contenedor — la píldora del menú
   lleva su propio cristal, el botón va en laca y el logotipo tiene sombra.
   Un bloque negro apareciendo a mitad de la escena rompía la ilusión de que
   la cámara atraviesa el pórtico. */
.nav__logo{font-family:var(--marca);font-size:30px;letter-spacing:.2em;
  text-shadow:0 2px 18px rgba(0,0,0,.85),0 0 40px rgba(0,0,0,.5)}
/* Pasado el pórtico el contenido corre por debajo de la barra y la sombra
   del logotipo no basta: los platos de la carta se le montan encima. Laca a
   la pieza, no a la barra — un bloque de ancho completo es justo lo que se
   evitó arriba. Dentro del pórtico no se aplica: ahí no hay nada detrás.

   SIN backdrop-filter a propósito: desenfocar lo que pasa por detrás de un
   elemento fijo obliga al navegador a recomponer esa franja en CADA frame, y
   con la escena del pórtico en movimiento eso se nota como un tirón al
   entrar. Un fondo opaco tapa igual y no cuesta nada. */
.nav--laca .nav__logo{
  padding:2px 14px 5px;border-radius:12px;
  background:rgba(18,10,11,.9)}
/* baja desde arriba con el resto de la construcción */
.app .nav{transform:translateY(-100%);
  transition:background .4s var(--ease),transform var(--t-nav) var(--sal) var(--d-nav)}
.app.dentro .nav{transform:none}
.nav__cta{font-family:var(--sans);font-size:var(--t-sm)}
/* Píldora de cristal con la sección activa marcada en laca, como en la
   referencia. Sustituye al subrayado fino de antes: sobre una imagen tan
   cargada como el hero, una línea de 1px no se lee, y el bloque translúcido
   además despega el menú del fondo. */
/* La píldora tira a OSCURA, no a clara. Con la barra siempre transparente
   es la única que sostiene el contraste de los enlaces, y tiene que hacerlo
   igual sobre el cielo del amanecer que sobre el comedor iluminado del final
   del recorrido. Un cristal claro funcionaba sobre lo primero y desaparecía
   sobre lo segundo. */
.nav__menu{
  margin-inline:auto;display:flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(14,6,7,.46);border:1px solid rgba(244,237,226,.16);
  backdrop-filter:blur(14px) saturate(1.2);
}
.nav__menu a{
  position:relative;font-size:var(--t-sm);color:rgba(244,237,226,.82);
  padding:9px clamp(14px,1.6vw,24px);border-radius:999px;white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.nav__menu a:hover{color:#fff;background:rgba(244,237,226,.12)}
.nav__menu a.on{color:#fff;background:var(--laca)}
.nav__menu a.on:hover{background:var(--laca-cl)}
.nav__cta{padding:10px 26px}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:1.5px;background:var(--hueso);
  transition:transform .35s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* ── 7 · PORTAL ───────────────────────────────────────────────────────────
   El truco entero: el templo escala con el origen puesto en el centro del
   vano, así que la puerta se queda clavada en pantalla mientras el resto
   crece y sale por los bordes. Como el PNG del templo es opaco salvo el
   vano, hace de careta él solo: el interior únicamente asoma por el hueco. */
.portal{position:relative;height:420vh}
.portal__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b0708;
}

/* Las tres piezas van sueltas para poder animarlas por separado: el cielo
   quieto al fondo, el templo subiendo desde abajo y las cuñas entrando por
   los lados. Con la imagen plana de Gemini esto no se podía hacer. */
.capa{position:absolute;inset:0}
/* El fondo se revela de ARRIBA hacia abajo, no al revés. El hero entra
   desde abajo, así que lo primero que asoma por debajo de la intro es su
   borde superior: si el cielo se revelase de abajo arriba, esa franja de
   arriba sería lo último en aparecer y se vería un hueco negro siguiendo
   a la intro. En este sentido el cielo ya está puesto justo donde el
   deslizamiento lo va destapando. */
.capa--cielo img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);transform-origin:50% 0;
  transition:transform var(--t-fondo) var(--sal) var(--d-fondo)}
.capa--cielo{will-change:transform,clip-path;
  clip-path:inset(0 0 72% 0);
  transition:clip-path var(--t-fondo) var(--sal) var(--d-fondo)}
.montado .capa--cielo{clip-path:inset(0 0 0 0)}
.montado .capa--cielo img{transform:scale(1)}

/* El comedor solo asoma por el vano. El recorte lo lleva el contenedor y el
   movimiento el hijo: si van en el mismo elemento, el clip viaja con el
   transform y se descoloca. */
.capa--sala{will-change:clip-path}
.sala__mov{position:absolute;inset:0;will-change:transform}
.sala__mov img{width:100%;height:100%;object-fit:cover}

/* ENTRADA (envoltorio) y ZOOM del scroll (hijo), separados */
/* ── JERARQUÍA DE CAPAS ────────────────────────────────────────────────
   El orden no es arbitrario, sale de la referencia:

     1 cielo      el fondo de todo
     2 cuñas      enmarcan por fuera, tapan el cielo pero nada más
     3 templo     el alero DEBE pasar por delante de la cuña — se ve en la
                  referencia, ampliando el borde izquierdo del tejado.
                  Además el comedor viaja dentro de este mismo nivel, así
                  que por el vano nunca puede asomar una cuña.
     4 farol/flores  delante de la arquitectura
     5 textos     por encima de todo                                     */
.capa--cielo{z-index:1}
.ent--cl,.ent--cr{z-index:2}
.ent--tpl{z-index:3}
.portal__deco{z-index:4}

.ent{position:absolute;inset:0;pointer-events:none;will-change:transform}
/* Terminada la entrada, se sueltan las capas que ya no vuelven a animarse.
   Las que siguen vivas con el scroll (.tpl, .cuna, .sala__mov, .capa--sala,
   .portal__deco y los cues) conservan su will-change a proposito. */
.listo .ent,
.listo .capa--cielo,
.listo .capa--cielo img,
.listo .marca span{will-change:auto}
/* El templo repite el mismo gesto que la transición de pantalla: sube.
   Las cuñas van en horizontal y entran cada una por su lado, con el
   contenido dentro — el borde y lo que lleva encima son UNA pieza. */
.ent--tpl{transform:translateY(108%);
  transition:transform var(--t-tpl) var(--sal) var(--d-tpl)}
.ent--cl{transform:translateX(-108%);
  transition:transform var(--t-cuna) var(--sal) var(--d-cunaL)}
.ent--cr{transform:translateX(108%);
  transition:transform var(--t-cuna) var(--sal) var(--d-cunaR)}
.montado .ent--tpl,.montado .ent--cl,.montado .ent--cr{transform:none}

/* El JS les pone width/height inline exactos. Sin el max-width:none, la
   regla global img{max-width:100%} recorta el ancho del templo (en un móvil
   vertical es 1.34× el viewport) pero no el alto: el templo se estira y el
   vano deja de estar donde el JS lo mide → el zoom del scroll ya no
   coincide con la puerta. */
.tpl{position:absolute;transform-origin:50.00% 76.62%;   /* el vano medido */
  will-change:transform;max-width:none}
.cuna{position:absolute;will-change:transform;max-width:none}

.portal__deco{position:absolute;inset:0;pointer-events:none}

/* ── Decoración de esquinas ───────────────────────────────────────────────
   Las cuatro piezas de la referencia: farol grande arriba a la izquierda,
   rama de sakura arriba a la derecha, sakura pequeña abajo a la izquierda y
   farol pequeño abajo a la derecha. Las dos diagonales se equilibran — si
   solo hay farol arriba y flores abajo, el encuadre se va de peso.

   Los tamaños salen de medir la referencia sobre el ancho del escenario:
   farol ~9.5%, rama ~20%, sakura ~16%, farol pequeño ~6.5%. Antes las
   flores iban al 27% y al 23%, casi el triple de lo que pedía la
   referencia, y por eso se comían las esquinas y no cuadraban con la V de
   las cuñas.                                                              */
.deco{position:absolute;filter:drop-shadow(0 14px 30px rgba(0,0,0,.45));
  will-change:transform}

/* El farol cuelga del borde superior: el gancho tiene que tocar el canto,
   si no parece flotando. */
.deco--farol{top:0;left:6%;width:clamp(96px,9.5vw,168px);
  transform-origin:50% 0;animation:pendulo 6.5s ease-in-out infinite}
/* El segundo farol se balancea más lento y desfasado: a la misma cadencia
   los dos leen como un mecanismo, no como dos objetos colgados. */
.deco--farol2{bottom:3%;right:4.5%;width:clamp(64px,6.5vw,112px);
  transform-origin:50% 0;animation:pendulo 8.3s ease-in-out -2.6s infinite}

/* Las dos ramas son la MISMA imagen: la de arriba reflejada para que entre
   por la derecha, la de abajo apuntando hacia arriba para que nazca del
   borde inferior. El reflejo lo reescribe el JS en el transform del scroll,
   así que si se toca aquí hay que tocarlo también allí. */
/* La rama es un trazo horizontal y fino: al ancho de la referencia (~12%,
   pensado para una rama vertical) se quedaba en una mancha rosa
   irreconocible. Con 30%/24% ocupa una superficie parecida a la del
   original. Sigue por debajo de sus 874px nativos, así que no se emborrona
   ni siquiera con la ampliación de la salida. */
.deco--flor-a{top:1.5%;right:-2%;width:clamp(240px,30vw,480px);transform:scaleX(-1)}
.deco--flor-b{bottom:0;left:-2%;width:clamp(200px,24vw,400px)}

/* Se anima la propiedad `rotate`, NO `transform`. El JS escribe un transform
   inline en estas mismas imágenes para la salida con el scroll, y una
   animación sobre transform gana siempre a un inline: los faroles se
   quedarían fuera del movimiento. Como propiedad independiente, rotate se
   aplica después del transform y las dos conviven. */
@keyframes pendulo{
  0%,100%{rotate:-1.4deg}
  50%    {rotate:1.4deg}
}

/* ENTRADA: cada esquina entra por su propio lado, en el mismo gesto que las
   cuñas y con un pelo de retraso sobre ellas para que se lea el orden
   (primero el marco, después lo que lo adorna). */
.ent--dTL{transform:translateX(-130%);transition:transform var(--t-deco) var(--sal) var(--d-decoL)}
.ent--dBL{transform:translateX(-130%);transition:transform var(--t-deco) var(--sal) var(--d-decoL2)}
.ent--dTR{transform:translateX(130%); transition:transform var(--t-deco) var(--sal) var(--d-decoR)}
.ent--dBR{transform:translateX(130%); transition:transform var(--t-deco) var(--sal) var(--d-decoR2)}
.montado .ent--dTL,.montado .ent--dTR,
.montado .ent--dBL,.montado .ent--dBR{transform:none}

.portal__ui{position:absolute;inset:0;pointer-events:none;z-index:5}
.portal__ui>*{position:absolute;will-change:transform}

.marca{
  left:50%;top:12%;translate:-50% 0;
  font-family:var(--marca);font-size:clamp(44px,8.5vw,116px);color:#fff;
  letter-spacing:.17em;text-indent:.17em;white-space:nowrap;
  text-shadow:0 6px 34px rgba(0,0,0,.78),0 2px 10px rgba(0,0,0,.6),
              0 0 90px rgba(0,0,0,.45);
}
.marca span{display:inline-block;clip-path:inset(-30% 0 100% 0);
  transform:translateY(-.55em);
  transition:transform var(--t-marca) var(--sal) var(--d-marca),
             clip-path var(--t-marca) var(--sal) var(--d-marca)}
.montado .marca span{transform:none;clip-path:inset(-30% 0 -30% 0)}
/* Sin esto queda una caja oscura alrededor del nombre: el clip recorta a
   cero en horizontal y la sombra, que difumina 34px, se corta en seco. Una
   vez revelado el texto el clip ya no tiene trabajo — se quita. */
.listo .marca span{clip-path:none}
/* ── Placas de los principios ─────────────────────────────────────────────
   Un 看板: el cartel vertical de laca que cuelga a la entrada de un templo.
   Mide unos 42px de ancho, así que vive en el canto sin tocar el pabellón.

   Historia de esto: primero fueron dos cajas de texto plantadas encima del
   templo — tapaban justo lo que el hero tiene que enseñar. Después, dos
   filetes con el texto suelto sobre la cuña — no se leían, porque el canto
   es donde vive el patrón de olas en rojo y oro. La placa resuelve las dos
   cosas: es opaca, así que el texto se lee, y es estrecha, así que no tapa.

   El párrafo largo que llevaban las cajas no se ha perdido: estaba repetido
   letra por letra en «La casa», que es donde toca leerlo con calma.       */
.rail{
  top:50%;translate:0 -50%;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.5vh,18px);
  width:clamp(38px,3.4vw,50px);
  padding:clamp(16px,2.4vh,30px) 0;
  border-radius:6px;
  background:linear-gradient(160deg,#7c0c12,#4a060a 55%,#2c0406);
  border:1px solid rgba(216,180,120,.5);
  box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09);
}
.rail--l{left:clamp(12px,2.2vw,40px)}
.rail--r{right:clamp(12px,2.2vw,40px)}

/* El filete de oro dentro de la placa, arriba y abajo del texto */
.rail__line{
  width:1px;height:clamp(18px,3vh,38px);
  background:linear-gradient(rgba(216,180,120,0),rgba(216,180,120,.8));
}
.rail__line:last-child{background:linear-gradient(rgba(216,180,120,.8),rgba(216,180,120,0))}

.rail__k{
  font-family:var(--kanji);font-size:clamp(21px,2vw,30px);line-height:1;
  color:var(--oro);text-shadow:0 2px 10px rgba(0,0,0,.8);
}
/* El nombre corre en vertical. `mixed` deja el latino tumbado, que es como
   se compone una palabra occidental dentro de un texto japonés. */
.rail__t{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--sumi);font-size:clamp(13px,1.2vw,17px);
  letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;
  color:var(--hueso);
}

.hint{
  left:50%;bottom:5%;translate:-50% 0;display:flex;flex-direction:column;
  align-items:center;gap:10px;font-size:11px;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(244,237,226,.75);
}
.hint i{width:1px;height:44px;background:linear-gradient(rgba(244,237,226,.9),transparent);
  animation:gota 2s var(--ease) infinite}
/* Las dos animaciones infinitas del hero se paran cuando el portal sale de
   pantalla: no tiene sentido repintarlas durante el resto de la pagina. */
.portal--quieto .hint i,
.portal--quieto .deco--farol,
.portal--quieto .deco--farol2{animation-play-state:paused}
@keyframes gota{
  0%{transform:scaleY(0);transform-origin:top}
  48%{transform:scaleY(1);transform-origin:top}
  52%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

.mano{right:0;top:50%;translate:0 -50%;width:min(680px,56vw);height:auto}
.firma{
  left:clamp(24px,6vw,88px);bottom:clamp(56px,12vh,124px);
  text-shadow:0 4px 22px rgba(0,0,0,.9);
}
.firma i{display:block;font-family:var(--script);font-style:normal;
  font-size:clamp(24px,2.6vw,40px);color:#fff}
.firma b{display:block;margin-top:6px;font-family:var(--titan);font-weight:400;
  font-size:clamp(26px,3vw,46px);letter-spacing:.03em;color:var(--oro)}

/* ── 8 · SECCIONES ────────────────────────────────────────────────────── */
.sec{position:relative;z-index:10;padding:var(--sec) 0;background:var(--tinta)}

/* carta */
.sec--carta{background:linear-gradient(180deg,var(--tinta) 0%,var(--tinta-2) 100%)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(34px,4.4vw,58px) 0 clamp(28px,3.6vw,46px)}
.chip{padding:9px 22px;border-radius:999px;cursor:pointer;background:transparent;
  border:1px solid rgba(244,237,226,.22);font-size:var(--t-sm);color:var(--hueso-2);
  transition:all .3s var(--ease)}
.chip:hover{border-color:var(--oro);color:var(--hueso)}
.chip.on{background:var(--laca);border-color:var(--laca);color:#fff}

.platos{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,84px)}
.plato{display:grid;grid-template-columns:1fr auto;gap:2px 20px;padding:24px 0;
  border-bottom:1px solid rgba(244,237,226,.1);transition:border-color .35s var(--ease)}
.plato:hover{border-bottom-color:var(--oro)}
.plato h3{font-family:var(--disp);font-size:var(--t-lg);font-weight:400;
  transition:color .3s var(--ease)}
.plato:hover h3{color:var(--oro)}
.plato span{font-family:var(--sumi);font-size:calc(var(--t-lg) * 1.15);color:var(--oro);white-space:nowrap}
.plato span::before{content:"$ ";font-size:.72em;opacity:.7}
.plato p{grid-column:1/-1;font-size:var(--t-sm);color:var(--hueso-2);line-height:1.55}
/* El filtro reacomoda con FLIP: el JS mide antes y despues, y aqui solo se
   declara la transicion. Sigue siendo transform puro — nada se desvanece.
   .saltando lo pone el JS durante el frame de medicion para que el salto
   inicial no se anime. */
.plato{transition:transform .45s var(--ease),border-color .35s var(--ease)}
.plato.saltando{transition:none}
.plato.oculto{display:none}

/* nosotros */
.sec--casa{background:var(--tinta-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,34px);
  width:min(var(--wrap),calc(100% - clamp(32px,6vw,96px)));margin:clamp(44px,6vw,86px) auto 0;
  overflow:hidden}
.split__half{padding:clamp(26px,3.4vw,48px);border:1px solid rgba(216,180,120,.3);
  border-radius:12px;background:linear-gradient(150deg,rgba(126,12,18,.4),rgba(18,10,11,.3));
  will-change:transform}
.split__n{display:block;font-family:var(--kanji);font-size:clamp(34px,3.6vw,54px);
  color:var(--laca-cl);line-height:1;margin-bottom:14px}
.split__half h3,.tercero h3{font-family:var(--script);font-size:calc(var(--t-h3) * 1.16);margin-bottom:14px}
.split__half p,.tercero p{color:var(--hueso-2)}
.tercero{margin-top:clamp(30px,4vw,52px);max-width:60ch}
.tercero i{color:var(--hueso);font-style:italic}

.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  margin:clamp(56px,7vw,104px) 0 0;padding-top:40px;border-top:1px solid rgba(244,237,226,.12)}
/* Mismo gesto que .marca: el numero sube desde detras de su propia caja.
   overflow oculto en el dt, desplazamiento en el JS via --y. */
.cifras dt{font-family:var(--sumi);font-size:clamp(32px,3.4vw,54px);color:var(--oro);
  line-height:1;overflow:hidden;font-variant-numeric:tabular-nums}
.cifras dt>span{display:inline-block;transform:translateY(var(--y,0));
  transition:transform .8s var(--sal)}
.cifras dd{margin:10px 0 0;font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--hueso-2)}

/* reservas */
.sec--res{background:var(--tinta)}
.res{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.datos{margin:clamp(38px,4.6vw,64px) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.datos dt{font-size:var(--t-xs);letter-spacing:.26em;text-transform:uppercase;
  color:var(--oro);margin-bottom:8px}
.datos dd{margin:0;color:var(--hueso-2)}
.datos a:hover{color:var(--hueso);text-decoration:underline;text-underline-offset:4px}

.form{position:relative;padding:clamp(26px,3.4vw,46px);
  background:rgba(244,237,226,.04);border:1px solid rgba(244,237,226,.12);border-radius:12px}
.f{margin-bottom:20px}
.f label{display:block;font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hueso-2);margin-bottom:9px}
.f label em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.6}
.f input,.f select,.f textarea{width:100%;padding:14px 16px;border-radius:4px;
  background:rgba(18,10,11,.6);border:1px solid rgba(244,237,226,.2);
  transition:border-color .3s,box-shadow .3s}
.f textarea{resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--oro);
  box-shadow:0 0 0 3px rgba(216,180,120,.16)}
.f.mal input,.f.mal select{border-color:#e0554f}
.e{display:block;min-height:17px;margin-top:5px;font-size:var(--t-xs);color:#e0554f}
.f3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
.legal{margin-top:16px;font-size:13px;color:var(--hueso-2);opacity:.75;text-align:center}
.form__ok{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  gap:16px;padding:40px;background:rgba(20,12,13,.98);border:1px solid rgba(216,180,120,.4);
  border-radius:12px}
.form__ok[hidden]{display:none}
.form__ok h3{font-family:var(--script);font-size:calc(var(--t-h3) * 1.16)}
.form__ok p{color:var(--hueso-2);max-width:34ch;margin-inline:auto;font-size:var(--t-sm)}
.form__ok .btn{justify-self:center}

/* ── 9 · PIE ──────────────────────────────────────────────────────────── */
.pie{position:relative;z-index:10;background:#0c0607;padding:clamp(60px,7vw,96px) 0 34px;
  border-top:1px solid rgba(244,237,226,.09)}
.pie__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--gap)}
.pie__logo{font-family:var(--marca);font-size:38px;letter-spacing:.18em}
.pie__sub{font-family:var(--kanji)}
.pie__sub{margin-top:10px;font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--oro)}
.pie h2{font-size:var(--t-xs);font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;margin-bottom:16px}
.pie__nav{display:flex;flex-direction:column;gap:9px}
.pie__nav a,.pie p{font-size:var(--t-sm);color:var(--hueso-2)}
.pie__nav a:hover{color:var(--oro)}
.pie__base{margin-top:clamp(46px,5vw,72px);padding-top:26px;
  border-top:1px solid rgba(244,237,226,.09);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(184,168,154,.6)}

/* ── 10 · RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width:1080px){
  .platos,.res,.split{grid-template-columns:1fr}
  .pie__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  /* La píldora de escritorio no cabe en un móvil: aquí vuelve a ser un
     desplegable de ancho completo. */
  .nav__menu{position:fixed;top:var(--nav-h);left:12px;right:12px;flex-direction:column;
    gap:4px;padding:10px;background:rgba(18,10,11,.98);border:1px solid rgba(244,237,226,.14);
    border-radius:14px;transform:translateY(-12px);visibility:hidden;backdrop-filter:none;
    transition:transform .35s var(--ease),visibility .35s}
  .nav__menu.abierto{transform:none;visibility:visible}
  .nav__menu a{padding:14px;text-align:center;font-size:var(--t-base);border-radius:10px}
  .burger{display:flex;margin-left:auto}
  /* En escritorio la píldora y el botón «Reservar» ya tapan lo que pasa por
     detrás; en móvil desaparecen los dos y el burger se queda solo, con dos
     rayas de 1,5px que se confunden con los precios de la carta. */
  .nav--laca .burger{
    border-radius:12px;background:rgba(18,10,11,.9)}
  .nav__cta{display:none}

  .portal{height:340vh}
  /* 9% coincidía con el alto del header y los dos AKANE se pisaban */
  .marca{top:16%}

  /* La proporción de escritorio no vale en vertical: la rama al 30% de un
     encuadre de 375px cae justo encima del logotipo, y el farol se monta
     sobre el AKANE de la barra. En vertical hay que dejar libre la franja
     de arriba, que es donde vive el nombre. */
  .deco--farol{width:clamp(60px,16vw,92px);left:2%}
  .deco--farol2{width:clamp(46px,12vw,70px);right:3%;bottom:2%}
  .deco--flor-a{width:clamp(128px,34vw,190px);top:-1%;right:-9%}
  .deco--flor-b{width:clamp(108px,28vw,160px);bottom:-1%;left:-9%}
  /* En vertical los raíles se acortan y se pegan más al canto: la pantalla
     es estrecha y el templo ya va recortado. */
  /* En vertical la placa se estrecha y se pega al canto: la pantalla es
     angosta y el templo ya va recortado. */
  .rail{width:34px;gap:7px;padding:12px 0}
  .rail--l{left:6px}
  .rail--r{right:6px}
  .rail__line{height:16px}
  .rail__k{font-size:18px}
  .rail__t{font-size:11px;letter-spacing:.3em;text-indent:.3em}
  .mano{width:86vw}
  /* Anclada abajo, no arriba. La firma entra desplazándose +45vh; desde
     top:16% ese desplazamiento la dejaba a media pantalla en vez de fuera
     de cuadro, y se veía encima del hero desde el primer momento. */
  .firma{top:auto;bottom:27%;left:24px}
  .f3,.datos,.cifras{grid-template-columns:1fr 1fr}
}

/* Paisaje móvil y ventanas bajas: el hero se reparte en una franja corta.
   En vertical la marca vive al 16% del alto, pero en 390px eso cae DENTRO
   de la barra (74px) y el AKANE se pisa con el de la nav. Se ancla por
   debajo de la barra, se reduce el tamaño de las piezas grandes (mano,
   firma, adornos) y los raíles se acortan para que nada se pise. */
@media (max-width:860px) and (max-height:520px){
  .marca{top:clamp(88px,26%,104px);font-size:clamp(30px,8vh,44px)}
  .mano{width:min(86vw,62vh)}
  .firma{bottom:12%;left:16px}
  .firma i{font-size:clamp(18px,3vh,26px)}
  .firma b{font-size:clamp(20px,3.4vh,30px)}
  .hint{bottom:1.5%}
  .deco--farol{width:clamp(40px,10vh,64px)}
  .deco--farol2{width:clamp(28px,7vh,44px)}
  .deco--flor-a{width:clamp(110px,22vh,160px)}
  .deco--flor-b{width:clamp(96px,20vh,140px)}
  .rail{width:26px;padding:10px 0;gap:5px}
  .rail--l{left:4px}
  .rail--r{right:4px}
  .rail__line{height:10px}
  .rail__k{font-size:14px}
  .rail__t{font-size:9px;letter-spacing:.26em;text-indent:.26em}
}
@media (max-width:560px){
  .f3,.cifras,.pie__grid{grid-template-columns:1fr}
  .pie__base{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  /* Sin zoom no hace falta pista de scroll: el portal pasa a medir una
     pantalla y la escena se queda quieta en su primer cuadro. */
  .portal{height:100vh;height:100svh}
  .hint{display:none}
  .deco--farol,.deco--farol2{animation:none}
}