/* =========================================================
   PACHANKA — CARTA DIGITAL
   Misma paleta y tipografías que la landing: carbón y mostaza de su carta
   de piqueos, papel kraft de la carta impresa y las ocho letras del logo.
   Todo el movimiento ocurre en transform y opacity (se compone en GPU).
   ========================================================= */
:root{
  --char:#1E1A17;
  --char-2:#2A2420;
  --kraft:#EFE4D0;
  --bone:#F8F2E8;
  --ink:#211C18;
  --ink-2:#4A3F36;
  --line:rgba(33,28,24,.14);
  --line-d:rgba(248,242,232,.14);
  --muted:#6B5E52;
  --muted-d:rgba(248,242,232,.64);
  --mustard:#F2C94C;
  --mustard-2:#F7D873;

  /* Letras del logo */
  --ochre:#D4A25F; --sage:#8BAE98; --blush:#E6B3A2; --coral:#E0766B;
  --butter:#EDC77F; --teal:#5B8793; --brick:#B05E5A; --sand:#C6A882;
  --ochre-d:#8A5E1F; --coral-d:#B14E43; --brick-d:#9A4842;

  --f-sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-mark:'Chewy','Comic Sans MS',system-ui,sans-serif;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --side:clamp(18px,5vw,64px);
  --hdr-h:128px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--char) url("../assets/img/grain.png");color:var(--bone);
  font-family:var(--f-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--butter);color:var(--ink)}
:focus-visible{outline:2px solid var(--mustard);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:10px;z-index:400;background:var(--mustard);color:var(--char);padding:10px 18px;border-radius:999px;font-weight:600}
.skip:focus{left:16px}

/* Logotipo */
.wm{font-family:var(--f-mark);display:inline-flex;align-items:flex-end;line-height:.9;white-space:nowrap;user-select:none}
.wm > span{display:inline-block;position:relative;color:var(--c);transform:translateY(var(--y,0)) rotate(var(--r,0deg))}
.wm .spark{position:absolute;left:50%;top:-.34em;width:.5em;transform:translateX(-50%);color:var(--teal)}

/* Botón píldora */
.pill{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;border-radius:999px;
  border:1px solid rgba(248,242,232,.3);font-size:14px;font-weight:500;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--ease-out)}
.pill:hover{background:var(--bone);color:var(--char);border-color:var(--bone)}
.pill:active{transform:scale(.97)}
.pill--accent{background:var(--mustard);color:var(--char);border-color:var(--mustard);font-weight:600;letter-spacing:.02em}
.pill--accent:hover{background:var(--mustard-2);border-color:var(--mustard-2);color:var(--char)}

/* Etiqueta en pincelada amarilla (como las secciones de su carta impresa) */
.brush{display:inline-block;margin:0;padding:9px 26px 12px;font-family:var(--f-mark);font-weight:400;
  font-size:clamp(22px,2.6vw,32px);line-height:1.1;letter-spacing:.02em;color:var(--char);transform:rotate(-1.5deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M6 12 C50 5 96 10 150 6 S258 3 293 9 L284 19 L297 27 L287 37 L295 49 C236 55 182 49 120 53 S34 57 8 51 L15 41 L3 31 L13 22 Z' fill='%23F2C94C'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* =========================================================
   CABECERA + CATEGORÍAS
   ========================================================= */
.hdr{position:sticky;top:0;z-index:100;background:rgba(30,26,23,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d)}
@supports not (backdrop-filter:blur(2px)){.hdr{background:var(--char)}}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;padding:0 var(--side)}
.hdr-logo .wm{font-size:30px}
.hdr-right{display:flex;align-items:center;gap:12px}
.pill .narrow{display:none}
.lang{display:inline-flex;align-items:center;height:36px;padding:0 3px;border:1px solid rgba(248,242,232,.3);border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.08em;transition:border-color .2s ease}
.lang:hover{border-color:var(--bone)}
.lang span{padding:6px 9px;border-radius:999px;opacity:.6;transition:background-color .25s ease,color .25s ease,opacity .25s ease}
html[lang="es"] .lang [data-l="es"],html[lang="en"] .lang [data-l="en"]{background:var(--bone);color:var(--char);opacity:1}

.tabs{display:flex;gap:2px;overflow-x:auto;padding:0 var(--side);border-top:1px solid rgba(248,242,232,.07);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:0 0 auto;padding:16px 14px;font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-d);white-space:nowrap;transition:color .2s ease}
.tab::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--mustard);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.tab:hover{color:var(--bone)}
.tab.is-on{color:var(--bone)}
.tab.is-on::after{transform:scaleX(1)}

/* =========================================================
   PORTADA
   ========================================================= */
.cover{padding:clamp(48px,8vw,96px) var(--side) clamp(30px,4vw,44px);border-bottom:1px solid var(--line-d)}
.cover-in{max-width:960px}
.cover-wm{font-size:clamp(46px,7vw,86px)}
.cover-sub{margin:10px 0 clamp(22px,4vw,38px);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted-d)}
.cover-title{margin:0;font-size:clamp(44px,8.4vw,110px);font-weight:300;line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
.cover-title .hl{color:var(--mustard)}
.mask{display:block;overflow:hidden;padding-bottom:.04em}
.mask > span{display:block}
.js .mask > span{transform:translate3d(0,105%,0)}
.ready .mask > span{transform:none;transition:transform 1.05s var(--ease-out)}
.ready .mask:nth-child(2) > span{transition-delay:.1s}
.cover-lede{margin:22px 0 0;max-width:46ch;font-size:clamp(15px,1.3vw,17.5px);line-height:1.7;color:var(--muted-d)}

.cover-tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(28px,4vw,44px)}
.search{position:relative;display:flex;align-items:center;gap:10px;flex:1 1 320px;max-width:440px;
  height:50px;padding:0 14px 0 16px;border:1px solid rgba(248,242,232,.24);border-radius:999px;
  background:rgba(248,242,232,.05);transition:border-color .2s ease,background-color .2s ease}
.search:focus-within{border-color:var(--mustard);background:rgba(248,242,232,.08)}
.search svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--muted-d);stroke-width:1.8;stroke-linecap:round}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--bone);font-size:15.5px;outline:none}
.search input::placeholder{color:rgba(248,242,232,.45)}
.search input::-webkit-search-cancel-button{display:none}
.search-x{width:30px;height:30px;border-radius:50%;font-size:22px;line-height:1;color:var(--muted-d)}
.search-x:hover{color:var(--bone);background:rgba(248,242,232,.1)}
.cover-note{margin:0;font-size:12.5px;color:var(--muted-d)}

/* =========================================================
   CARTA
   ========================================================= */
.carta{padding:0 var(--side) clamp(60px,8vw,110px)}
.cat{padding:clamp(46px,6vw,80px) 0 0;scroll-margin-top:calc(var(--hdr-h) + 16px)}
.cat-head{margin:0 0 clamp(22px,3vw,34px)}
.grp{margin:34px 0 14px;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mustard)}

/* Fichas de plato: el nombre y la descripción mandan */
.dishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:14px}
.dish{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.6vw,22px);width:100%;
  padding:clamp(14px,1.6vw,20px);text-align:left;border:1px solid rgba(248,242,232,.12);border-radius:18px;
  background:rgba(248,242,232,.04);transition:border-color .25s ease,background-color .25s ease,transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .dish:hover{background:rgba(248,242,232,.07);border-color:rgba(248,242,232,.28);transform:translateY(-3px)}
  .dish:hover .dish-name{color:var(--mustard)}
  .dish:hover .dish-thumb img{transform:scale(1.07)}
  .dish:hover .dish-more{opacity:1;transform:none}
}
.dish:active{transform:scale(.99)}

.dish-thumb{position:relative;width:clamp(86px,9vw,112px);aspect-ratio:1;border-radius:14px;overflow:hidden;
  background:var(--char-2) url("../assets/img/grain.png");display:grid;place-items:center;flex:0 0 auto}
.dish-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:transform .7s var(--ease-out),opacity .45s ease}
.dish-thumb.has-photo img{opacity:1}
.dish-thumb.has-photo .ph-mark{display:none}
.ph-mark{font-family:var(--f-mark);font-size:clamp(28px,3vw,38px);line-height:1;color:rgba(212,162,95,.5)}

.dish-main{display:flex;flex-direction:column;gap:7px;min-width:0}
.dish-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.dish-name{font-size:clamp(18px,1.55vw,23px);font-weight:600;line-height:1.24;letter-spacing:-.005em;transition:color .2s ease}
.dish-price{flex:0 0 auto;font-size:clamp(16px,1.3vw,19px);font-weight:600;color:var(--mustard);font-variant-numeric:tabular-nums}
.dish-desc{margin:0;font-size:clamp(14.5px,1.05vw,16px);line-height:1.6;color:var(--muted-d)}
.dish-more{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sand);opacity:.55;transform:translateX(-4px);
  transition:opacity .25s ease,transform .25s var(--ease-out)}
.dish-more svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Listas simples: guarniciones, bebidas */
.rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:0 clamp(24px,4vw,64px)}
.row{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px dashed rgba(248,242,232,.16)}
.row-name{font-size:16.5px}
.row-dots{flex:1;min-width:14px;border-bottom:2px dotted rgba(248,242,232,.2);transform:translateY(-4px)}
.row-price{font-weight:600;color:var(--mustard);font-variant-numeric:tabular-nums}

.empty{margin:0;padding:0 var(--side) 90px;font-size:16px;color:var(--muted-d)}

/* Revelado al hacer scroll */
.js .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:calc(var(--i,0) * 55ms)}
.js .rv.is-in{opacity:1;transform:none}

/* =========================================================
   CARTILLA DEL PLATO
   Se sobrepone a la carta: el fondo se difumina y la foto entra dando una vuelta.
   ========================================================= */
.sheet{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,3vw,34px)}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(18,15,13,.68);backdrop-filter:blur(18px) saturate(.85);
  -webkit-backdrop-filter:blur(18px) saturate(.85);opacity:0;transition:opacity .38s ease}
@supports not (backdrop-filter:blur(2px)){.sheet-bg{background:rgba(18,15,13,.93)}}
.sheet.open .sheet-bg{opacity:1}

.sheet-card{position:relative;z-index:1;width:min(860px,100%);max-height:calc(100dvh - 2 * clamp(12px,3vw,34px));
  overflow-y:auto;overscroll-behavior:contain;border-radius:22px;background:var(--kraft) url("../assets/img/grain.png");
  color:var(--ink);box-shadow:0 40px 90px rgba(0,0,0,.5);
  opacity:0;transform:translate3d(0,26px,0) scale(.97);transition:opacity .4s ease,transform .5s var(--ease-out)}
.sheet.open .sheet-card{opacity:1;transform:none}
.sheet-x{position:absolute;top:12px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;
  font-size:30px;line-height:1;font-weight:300;color:var(--bone);background:rgba(30,26,23,.55);backdrop-filter:blur(6px);
  transition:background-color .2s ease,transform .2s var(--ease-out)}
.sheet-x:hover{background:var(--char);transform:rotate(90deg)}

/* La vuelta de la foto: primero el reverso con el logo, luego el plato */
.flip{perspective:1600px}
.flip-in{position:relative;transform-style:preserve-3d}
.flip.spin .flip-in{animation:turn .95s cubic-bezier(.26,.86,.3,1) both}
@keyframes turn{
  from{transform:rotateY(180deg) scale(.86)}
  60%{transform:rotateY(18deg) scale(.99)}
  to{transform:none}
}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px 22px 0 0;overflow:hidden}
.face--front{position:relative;margin:0;height:min(54vh,470px);background:var(--char-2) url("../assets/img/grain.png");display:grid;place-items:center}
.face--front img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face--front.has-photo img{display:block}
.face--front.has-photo .ph{display:none}
.face--back{position:absolute;inset:0;transform:rotateY(180deg);display:grid;place-items:center;
  background:var(--char) url("../assets/img/grain.png")}
.face--back .wm{font-size:clamp(34px,5vw,56px);opacity:.9}
.ph{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted-d)}
.ph .ph-mark{font-size:clamp(52px,7vw,84px);color:rgba(212,162,95,.45)}
.ph-text{font-size:12px;letter-spacing:.18em;text-transform:uppercase}

.sheet-body{padding:clamp(22px,3.4vw,38px) clamp(20px,3.4vw,44px) clamp(24px,3.4vw,36px)}
.sheet-cat{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brick-d)}
.sheet-name{margin:0;font-size:clamp(27px,3.6vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.015em}
.sheet-desc{margin:16px 0 0;max-width:56ch;font-size:clamp(16px,1.35vw,18.5px);line-height:1.62;color:var(--ink-2)}
.sheet-price{margin:22px 0 0;font-size:clamp(22px,2.2vw,28px);font-weight:600;color:var(--coral-d);font-variant-numeric:tabular-nums}
.sheet-nav{display:flex;align-items:center;gap:16px;margin-top:clamp(20px,3vw,30px);padding-top:18px;border-top:1px solid var(--line)}
.sheet-count{font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.round{width:46px;height:46px;border-radius:50%;border:1px solid rgba(33,28,24,.24);display:grid;place-items:center;
  transition:background-color .2s ease,border-color .2s ease,transform .16s var(--ease-out)}
.round svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.round:hover{background:var(--ink);border-color:var(--ink)}
.round:hover svg{stroke:var(--kraft)}
.round:active{transform:scale(.94)}

/* =========================================================
   PIE
   ========================================================= */
.ftr{padding:clamp(48px,6vw,80px) var(--side) 40px;border-top:1px solid var(--line-d);text-align:center}
.ftr-wm{font-size:clamp(38px,4.6vw,58px)}
.ftr-line{margin:18px 0 0;font-size:14.5px;color:var(--muted-d)}
.ftr-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:22px}
.ftr-links a{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);transition:color .2s ease}
.ftr-links a:hover{color:var(--butter)}
.ftr-fine{margin:30px 0 0;font-size:12px;line-height:1.8;color:rgba(248,242,232,.42)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:700px){
  :root{--hdr-h:116px}
  .hdr-row{height:60px}
  .hdr-logo .wm{font-size:26px}
  .hdr .pill{height:36px;padding:0 16px;font-size:13px}
  .hdr .pill .wide{display:none}
  .hdr .pill .narrow{display:inline}
  .tab{padding:13px 11px;font-size:11.5px}
  .dish{grid-template-columns:1fr;gap:14px}
  .dish-thumb{width:100%;aspect-ratio:4/3;border-radius:12px}
  .dish-head{flex-direction:column;align-items:flex-start;gap:4px}
  .sheet{padding:0}
  .sheet-card{width:100%;max-height:100dvh;height:100dvh;border-radius:0}
  .face,.face--back{border-radius:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .mask > span{opacity:1!important;transform:none!important}
  .sheet-bg,.sheet-card{opacity:1!important;transform:none!important}
}

/* Con foto vertical, en pantalla ancha la cartilla va a dos columnas */
@media (min-width:860px){
  .sheet-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch;width:min(1000px,100%)}
  .flip{height:100%}
  .flip-in{height:100%}
  .face{border-radius:22px 0 0 22px}
  .face--front{height:min(76vh,620px)}
  .sheet-body{align-self:center;padding-right:clamp(26px,3.4vw,48px)}
  .sheet-x{background:rgba(30,26,23,.4)}
}

/* Redes en el pie */
.social{display:flex;justify-content:center;gap:10px;margin-top:24px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(248,242,232,.28);display:grid;place-items:center;line-height:0;
  transition:background-color .2s ease,border-color .2s ease,transform .2s var(--ease-out)}
.social svg{width:17px;height:17px;fill:var(--bone);transition:fill .2s ease}
.social a:hover{background:var(--mustard);border-color:var(--mustard);transform:translateY(-2px)}
.social a:hover svg{fill:var(--char)}