/* La Tarima — carta virtual */
.carta-page{--gold:#d9ad55;--card:#1f0b0e;--card-2:#28100f}

/* portada */
.c-hero{padding:calc(var(--nav-h) + clamp(2.2rem,6vw,4.5rem)) 0 clamp(1.5rem,3vw,2.5rem);text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(60% 80% at 50% 0%,rgba(217,173,85,.16),transparent 70%)}
.c-hero::before,.c-hero::after{content:"";position:absolute;left:50%;width:min(560px,80%);height:0;border-top:1px solid rgba(217,173,85,.35);transform:translateX(-50%)}
.c-hero::before{bottom:6px}.c-hero::after{bottom:0}
.c-hero__stars{color:var(--gold);letter-spacing:.8em;font-size:.8rem;margin-bottom:.8rem;padding-left:.8em}
.c-hero__title{font-size:clamp(4rem,2.6rem + 7vw,8.5rem)}
.c-hero__title .script{font-size:.8em}
.c-hero__lead{margin:1rem auto 0;max-width:40ch;color:var(--muted);font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.c-hero__meta{margin-top:.9rem;font:italic 300 .98rem var(--ff-serif);color:var(--sand)}

/* mosaico de categorías */
.c-index{padding:clamp(2rem,4vw,3rem) 0 1rem}
.c-index__t{font:italic 300 1.35rem var(--ff-serif);color:var(--sand);margin-bottom:1rem}
.c-tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:.8rem}
.c-tile{position:relative;overflow:hidden;border-radius:18px;text-align:left;background:var(--card);isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(217,173,85,.22);transition:transform .35s var(--ease),box-shadow .35s}
.c-tile--big{grid-column:span 2;grid-row:span 2}
.c-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:sepia(.25) saturate(.9) brightness(.62);transition:transform .9s var(--ease),filter .5s}
.c-tile::before{content:"";position:absolute;inset:7px;border-radius:12px;border:1px solid rgba(217,173,85,.28);z-index:-1;pointer-events:none}
.c-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,5,6,.05) 30%,rgba(18,5,6,.88))}
.c-tile__n{position:absolute;top:1rem;left:1.1rem;font:italic 300 .95rem var(--ff-serif);color:var(--gold)}
.c-tile__body{position:absolute;left:1.1rem;right:3rem;bottom:1rem;display:grid;gap:.2rem}
.c-tile__body b{font:400 clamp(1.5rem,1.1rem + 1vw,2.1rem)/.95 var(--ff-display);font-weight:400;text-transform:uppercase;color:var(--cream)}
.c-tile--big .c-tile__body b{font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem)}
.c-tile__body small{font-size:.8rem;color:var(--muted);line-height:1.35}
.c-tile__go{position:absolute;right:1rem;bottom:1rem;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--ink);font-weight:600;transition:transform .3s var(--ease)}
.c-tile:hover img{transform:scale(1.05);filter:sepia(.15) saturate(1) brightness(.72)}
.c-tile:hover .c-tile__go{transform:translateX(3px)}
.c-tile:active{transform:scale(.98)}
.c-tile.is-active{box-shadow:inset 0 0 0 2px var(--gold)}

.c-tile--fill{grid-column:var(--span)}

/* barra fija con flechas */
.c-bar{position:sticky;top:var(--nav-h);z-index:50;margin-top:1.6rem;background:rgba(18,5,6,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-block:1px solid var(--line)}
.c-bar[hidden]{display:none}
.c-bar__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:.6rem 0 .5rem}
.c-arrow{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--ink);box-shadow:0 8px 20px -10px rgba(233,168,76,.7);transition:transform .2s var(--ease),background .2s}
.c-arrow:hover{background:var(--amber-2)}
.c-arrow:active{transform:scale(.92)}
.c-arrow svg{width:22px;height:22px}
.c-bar__name{display:grid;justify-items:center;line-height:1.05;padding:.2rem .5rem;border-radius:12px}
.c-bar__name span{font:400 clamp(1.5rem,1.2rem + 1.2vw,2.2rem)/1 var(--ff-display);text-transform:uppercase;color:var(--cream)}
.c-bar__name small{font:italic 300 .85rem var(--ff-serif);color:var(--gold);margin-top:.15rem}
.c-tools{display:flex;gap:.6rem;align-items:center;padding:0 0 .7rem}
.c-tools .search{flex:1}

/* página de categoría */
.c-view{min-height:60vh;padding-bottom:1rem}
.c-page{animation:cIn .55s var(--ease) both}
@keyframes cIn{from{opacity:0;transform:translateX(calc(var(--dir,0) * 40px)) translateY(calc((1 - var(--dir,0) * var(--dir,0)) * 14px))}to{opacity:1;transform:none}}
.c-head{position:relative;display:grid;grid-template-columns:1fr;align-items:end;min-height:230px;margin:2rem 0 1.6rem;border-radius:22px;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(217,173,85,.22)}
.c-head__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:sepia(.3) brightness(.5)}
.c-head::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,5,6,.92) 15%,rgba(18,5,6,.2))}
.c-head__txt{padding:clamp(1.4rem,3vw,2.4rem)}
.c-head__n{font:italic 300 1rem var(--ff-serif);color:var(--gold)}
.c-head h2{font-size:clamp(3rem,2rem + 4vw,5.6rem);margin:.3rem 0 .4rem}
.c-head p{color:var(--muted);max-width:46ch}

.c-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1rem}
.c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.8rem}

.dish{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.15rem 1.2rem;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease),box-shadow .3s}
.dish:hover{box-shadow:inset 0 0 0 1px rgba(217,173,85,.45)}
.dish__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.dish h3{font:500 1.05rem/1.3 var(--ff-body);color:var(--cream)}
.dish p{color:var(--muted);font-size:.9rem;line-height:1.5}
.dish__price{flex:none;display:inline-flex;align-items:baseline;gap:.15rem;padding:.3rem .65rem;border-radius:999px;background:rgba(217,173,85,.12);color:var(--amber-2);font:400 1.35rem/1 var(--ff-display);letter-spacing:.03em}
.dish__price small{font-size:.65em;color:var(--sand)}
.dish__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.2rem}
.dish__tags .badge{margin:0}
.badge--out{background:rgba(244,231,206,.12);color:var(--cream)}
.dish.is-out{opacity:.55}
.dish.is-out h3{text-decoration:line-through;text-decoration-color:rgba(244,231,206,.5)}
.dish.has-disc{padding-left:4.4rem}
.dish__disc{position:absolute;left:1.05rem;top:1.1rem;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle,#0d0405 0 6%,var(--lbl) 7% 34%,#0d0405 35% 37%,transparent 38%),repeating-radial-gradient(circle,#160708 0 1.5px,#2a1214 2.5px 3px);
  box-shadow:0 6px 14px -6px #000}
.dish:hover .dish__disc{animation:spin 2.2s linear infinite}

.dish--feat{padding:1.5rem 1.5rem 1.4rem;background:linear-gradient(150deg,#3a1510,#22090c 70%);box-shadow:inset 0 0 0 1px rgba(217,173,85,.4),0 24px 40px -28px #000}
.dish--feat::before{content:"";position:absolute;inset:6px;border-radius:11px;border:1px solid rgba(217,173,85,.2);pointer-events:none}
.dish--feat h3{font:400 1.9rem/1 var(--ff-display);text-transform:uppercase;letter-spacing:.01em}
.dish--feat p{font-size:.95rem}
.dish--feat .dish__price{font-size:1.7rem;background:var(--amber);color:var(--ink)}
.dish--feat .dish__price small{color:var(--brown)}
.dish--feat.has-disc{padding-left:6rem}
.dish--feat .dish__disc{width:62px;height:62px;left:1.3rem;top:1.5rem}
.dish__rec{font:italic 300 .9rem var(--ff-serif);color:var(--gold)}

.c-pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.c-pager button{padding:.75rem 1.1rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:.9rem;transition:color .25s,box-shadow .25s}
.c-pager button:hover{color:var(--cream);box-shadow:inset 0 0 0 1px var(--gold)}
.c-res{padding-top:1.5rem}
.c-res__cat{font:400 1.8rem var(--ff-display);text-transform:uppercase;margin:1.6rem 0 .8rem;color:var(--sand)}

.carta-page .house-rules{grid-template-columns:repeat(4,1fr)}
.carta-page .house-rules p{padding-left:1.1rem;position:relative}
.carta-page .house-rules p::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:.7rem;top:.15rem}

@media (max-width:1024px){
  .c-tiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .c-tile--big{grid-column:span 2;grid-row:span 2}
  .carta-page .house-rules{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .c-tiles{grid-auto-rows:128px;gap:.6rem}
  .c-tile__body{left:.9rem;right:.9rem;bottom:.85rem}
  .c-tile__body small{display:none}
  .c-tile--big .c-tile__body small{display:block}
  .c-tile__go{display:none}
  .c-tile--big .c-tile__go{display:grid}
  .c-arrow{width:42px;height:42px}
  .c-head{min-height:170px;margin-top:1.4rem}
  .c-grid,.c-feats{grid-template-columns:1fr}
  .c-pager{flex-direction:column}
  .carta-page .house-rules{grid-template-columns:1fr}
  .dish--feat h3{font-size:1.6rem}
}

/* controles compartidos */
.chip{flex:none;padding:.6rem 1rem;border-radius:999px;font-size:.88rem;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s,box-shadow .25s,transform .2s}
.chip:hover{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(244,231,206,.45)}
.chip:active{transform:scale(.96)}
.chip--toggle[aria-pressed="true"]{background:#7bd88f;color:var(--ink);box-shadow:none}
.search{position:relative}
.search input{width:100%;padding:.7rem 1rem .7rem 2.5rem;border-radius:999px;border:0;background:rgba(244,231,206,.07);color:var(--cream);font:inherit;font-size:.9rem;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s,background .25s}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;background:rgba(244,231,206,.1);box-shadow:inset 0 0 0 1px var(--amber)}
.search svg{position:absolute;left:.9rem;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--faint)}
.badge{display:inline-block;font:500 .66rem/1 var(--ff-body);letter-spacing:.08em;text-transform:uppercase;padding:.3rem .5rem;border-radius:999px;white-space:nowrap}
.badge--sin{background:rgba(123,216,143,.16);color:#9fe6ad}
.badge--botella{background:rgba(210,187,154,.16);color:var(--sand)}
.badge--promo{background:var(--amber);color:var(--ink)}
.empty{padding:4rem 0;text-align:center;color:var(--muted)}
.empty b{display:block;font:400 2.4rem var(--ff-display);color:var(--cream)}

/* púas de guitarra */
.c-arrow{width:56px;height:56px;padding:0;background:none;box-shadow:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));transition:transform .35s var(--ease)}
.c-arrow:hover{background:none}
.c-arrow svg{width:100%;height:100%}
.c-arrow:hover .pick__body{fill:#f6c97a}
#c-next:hover{transform:translateX(3px) rotate(-8deg)}
#c-prev:hover{transform:translateX(-3px) rotate(8deg)}
.c-arrow:active{transform:scale(.9)}
.c-tile__go{width:40px;height:40px;background:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.c-tile__go svg{width:100%;height:100%}
.c-tile:hover .c-tile__go{transform:translateX(3px) rotate(-8deg)}
.c-pager button{display:inline-flex;align-items:center;gap:.55rem}
.c-pager .arrow{color:#e2a94f}
@media (max-width:640px){.c-arrow{width:50px;height:50px}}

/* el navegador solo maneja el scroll vertical; el gesto horizontal lo maneja carta.js */
.c-view{touch-action:pan-y}

/* nombres de categoría centrados y grandes (pedido del cliente) */
.c-tile__body{left:1rem;right:1rem;top:50%;bottom:auto;transform:translateY(-50%);justify-items:center;text-align:center}
.c-tile__body b{font-size:clamp(1.9rem,1.3rem + 1.6vw,2.8rem);text-shadow:0 3px 14px rgba(0,0,0,.65)}
.c-tile--big .c-tile__body b{font-size:clamp(2.6rem,1.8rem + 2.6vw,4.2rem)}
.c-tile__body small{color:rgba(244,231,206,.82);text-shadow:0 2px 8px rgba(0,0,0,.7)}
.c-tile::after{background:radial-gradient(70% 70% at 50% 50%,rgba(18,5,6,.55),rgba(18,5,6,.25) 70%),linear-gradient(180deg,rgba(18,5,6,.1),rgba(18,5,6,.5))}
.c-tile img{filter:sepia(.12) saturate(1) brightness(.78)}
@media (max-width:640px){
  .c-tile__body b{font-size:1.75rem}
  .c-tile--big .c-tile__body b{font-size:2.6rem}
  .c-tile__body small{display:none}
}

/* Keep photographic color; protect full product shots from wide crops. */
.c-tile img,.c-tile:hover img{filter:none}
.c-tile::after{background:linear-gradient(180deg,rgba(18,5,6,.02) 20%,rgba(18,5,6,.86))}
.c-head__img{filter:none;object-fit:contain;object-position:right center}
.c-head::after{background:linear-gradient(90deg,rgba(18,5,6,.96) 8%,rgba(18,5,6,.74) 37%,rgba(18,5,6,.05) 75%)}
.c-tile[data-category="autor"] img{object-position:58% 50%}
.c-tile[data-category="peru"] img,.c-tile[data-category="after-office"] img{object-fit:contain;object-position:center;background:#1b090c}
.c-tile[data-category="hits"] img{object-position:center}
.c-tile[data-category="promos"] img{object-fit:contain;background:#9b141d}
@media(max-width:640px){
 .c-head{min-height:290px}
 .c-head__img{object-position:50% 15%;object-fit:contain}
 .c-head::after{background:linear-gradient(0deg,rgba(18,5,6,.95) 5%,rgba(18,5,6,.62) 38%,rgba(18,5,6,.02) 82%)}
}

.photo-picture{display:contents}

.c-tile[data-category="peru"] img,.c-tile[data-category="bebidas"] img{object-fit:cover;object-position:58% 50%}
/* Keep the new photo compositions complete and avoid thin, stretched promo strips. */
.c-tile[data-category="autor"] img{object-position:50% 45%}
.c-tile[data-category="hits"] img{object-position:50% 45%}
.c-tile[data-category="after-office"] img,.c-tile[data-category="promos"] img{object-fit:cover;object-position:50% 46%}
@media(min-width:901px){
 .c-tiles{grid-auto-rows:180px}
 .c-tile[data-category="after-office"],.c-tile[data-category="promos"]{grid-column:span 2;grid-row:span 2}
}
@media(max-width:900px){
 .c-tile[data-category="after-office"] img,.c-tile[data-category="promos"] img{object-position:50% 50%}
}

/* mosaico parejo y centrado: tarjetas iguales, la última fila siempre centrada (pedido 27/10) */
.c-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.c-tile,.c-tile--fill{flex:0 0 calc((100% - 2rem) / 3);height:230px;grid-column:auto;grid-row:auto}
.c-tile__body small{display:block}
.c-tile__go{display:grid}
@media (max-width:640px){
  .c-tiles{gap:.6rem}
  .c-tile,.c-tile--fill{flex-basis:calc((100% - .6rem) / 2);height:150px}
  .c-tile__body b{font-size:1.6rem}
  .c-tile__body small{display:none}
  .c-tile__go{width:30px;height:30px;right:.6rem;bottom:.6rem}
}