:root{
  color-scheme:dark;
  --noche:#0C0907;--brasa:#17110D;--madera:#3B2418;--oro:#CDB16B;--crema:#F5ECDD;
  --aji:#F0A21B;--rocoto:#C23A22;--morado:#5A2552;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px;touch-action:manipulation}
body{background:var(--noche);color:var(--crema);font:400 17px/1.55 "DM Sans",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance;font-family:"Chelsea Market","DM Sans",sans-serif;font-weight:400;line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere}
h2{font-size:clamp(34px,6vw,64px);color:var(--oro)}
.wrap{padding:0 var(--pad);max-width:1280px;margin:0 auto}
.sec{padding:clamp(56px,9vw,120px) 0}
.lead{max-width:56ch;margin-top:18px}
.note{font-size:14px;opacity:.75;margin-top:14px;max-width:60ch}
.pending{background:var(--brasa);border:0;padding:14px 16px;color:var(--aji);margin:10px 0;max-width:64ch}
.skip{position:absolute;left:-999px;top:8px;background:var(--crema);color:var(--noche);padding:10px 14px;z-index:100}
.skip:focus{left:8px}

/* Loader */
#loader{position:fixed;inset:0;background:var(--noche);z-index:90;display:grid;place-items:center;transition:opacity .35s ease;pointer-events:none}
#loader.done{opacity:0}
.lp-bean{animation:lp 1s var(--ease) infinite}
.lp-gold{opacity:.0;animation:lpg 1s linear infinite}
@keyframes lp{0%,100%{transform:translateY(0)}45%{transform:translateY(-34px) rotate(-8deg)}}
@keyframes lpg{0%,100%{opacity:0}50%{opacity:.7}}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;padding:10px var(--pad);position:absolute;inset:0 0 auto 0;z-index:5}
.brand img{width:68px;height:auto;mix-blend-mode:lighten}
.top nav{display:flex;gap:clamp(14px,3vw,32px);background:rgba(12,9,7,.82);padding:0 16px}
.top nav a{text-decoration:none;font-weight:700;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.top nav a:hover{color:var(--oro)}
:focus-visible{outline:3px solid var(--aji);outline-offset:3px}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 4px var(--noche),inset 0 0 0 7px var(--crema)}
.off *{animation-play-state:paused!important}
.cat{content-visibility:auto;contain-intrinsic-size:auto 700px}

/* Botones */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{appearance:none;border:0;cursor:pointer;font:700 17px/1.1 "DM Sans";min-height:52px;padding:0 30px;color:var(--crema);background:var(--rocoto);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);
  transition:transform .18s var(--ease);touch-action:manipulation;text-decoration:none;display:inline-flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}
.btn.oro{background:var(--oro);color:var(--noche)}
.btn:active{transform:scale(.95,.92)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.95,.92)}}
.confeti{position:fixed;left:0;top:0;width:34px;height:34px;pointer-events:none;z-index:120;will-change:transform,opacity}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:100svh;background:var(--noche)}
.hero-txt{padding:clamp(88px,12vw,140px) var(--pad) clamp(32px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(40px,6.8vw,96px);max-width:12ch}
.hero h1 em{font-style:normal;color:var(--aji)}
.sub{margin-top:22px;max-width:40ch;font-size:19px}
.hero-pic{position:relative;overflow:hidden;background:var(--madera)}
.hero-pic>img{width:100%;height:100%;object-fit:cover}
.vapor{position:absolute;left:34%;top:12%;width:32%;height:28%;pointer-events:none}
.vapor path{fill:none;stroke:var(--crema);stroke-width:6;stroke-linecap:round;opacity:0;animation:sube 3.8s var(--ease) infinite}
.vapor path:nth-child(2){animation-delay:1.2s}.vapor path:nth-child(3){animation-delay:2.4s}
@keyframes sube{0%{transform:translateY(24px);opacity:0}30%{opacity:.5}100%{transform:translateY(-34px);opacity:0}}
.fall{position:absolute;width:clamp(44px,7vw,84px);height:clamp(44px,7vw,84px);opacity:0}
.js .fall{animation:cae .9s var(--ease) forwards}
.fall.f1{left:6%;bottom:8%;animation-delay:1.1s;--r:-18deg}
.fall.f2{right:8%;top:8%;animation-delay:1.25s;--r:12deg}
.fall.f3{right:5%;bottom:10%;animation-delay:1.4s;--r:20deg}
.fall.f4{left:5%;top:12%;animation-delay:1.55s;--r:-8deg}
.fall.f5{left:44%;bottom:3%;animation-delay:1.7s;--r:6deg}
@keyframes cae{0%{opacity:0;transform:translateY(-90px) rotate(calc(var(--r) * 4))}70%{opacity:1;transform:translateY(6px) rotate(var(--r))}100%{opacity:1;transform:translateY(0) rotate(var(--r))}}

/* Greca */
.greca{height:16px;overflow:hidden}
.greca i{display:block;height:100%;transform-origin:left;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath d='M0 16H8V8H16V0H24V8H32V16Z' fill='%23CDB16B'/%3E%3C/svg%3E") repeat-x}
.js .greca i{transform:scaleX(0);transition:transform 1.1s var(--ease)}
.js .greca.in i{transform:scaleX(1)}

/* Reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* Estrella */
.stars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.st{position:relative;background:var(--brasa);overflow:hidden;display:flex;flex-direction:column}
.st .ph{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--madera);display:grid;place-items:center}
.st img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.st .ph svg.art{width:46%;height:46%}
.st .b{padding:16px 18px 20px}
.st h3{font-size:24px;color:var(--oro)}
.st p{margin-top:6px;font-size:15px;opacity:.9}
.st .pr{font-weight:700;color:var(--aji);margin-top:8px;opacity:1}
@media (hover:hover){.st:hover img{transform:scale(1.07)}}

/* Escena sartén */
.scene{height:300vh;position:relative}
.stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--pad);padding:0 var(--pad);max-width:1280px;margin:0 auto}
.pan{width:100%;height:auto;max-height:70svh}
.pan .d{will-change:transform,opacity}
.scene h2{margin-bottom:24px}
.step{max-width:44ch;margin-top:14px;font-size:19px;transition:opacity .4s ease}
.js .step{opacity:.35}
.js .step.on{opacity:1}

/* Carta */
.carta .btns{margin-top:20px}
.chips-bar{position:sticky;top:0;z-index:20;background:var(--noche);padding:10px 0;margin-top:28px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:1280px;margin:0 auto}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:0;background:var(--brasa);color:var(--crema);font:500 15px/1 "DM Sans";min-height:44px;padding:0 18px;cursor:pointer;touch-action:manipulation;transition:transform .15s var(--ease),background-color .2s}
.chip:active{transform:scale(.95)}
.chip[aria-current="true"]{background:var(--oro);color:var(--noche);font-weight:700}
.cat{padding-top:clamp(36px,6vw,64px);scroll-margin-top:70px}
.cat h3{font-size:clamp(28px,4.5vw,44px);color:var(--oro)}
.cat .cd{max-width:64ch;margin-top:8px;opacity:.85}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin-top:22px}
.card{position:relative;background:var(--brasa);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.card .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--madera);display:grid;place-items:center}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card .ph .art{width:36%;height:80%;opacity:.9}
.card .peek{position:absolute;right:-6px;bottom:-10px;width:64px;height:64px;transform:translate(34px,34px) rotate(20deg);transition:transform .45s var(--ease)}
.card.nofoto .ph{aspect-ratio:auto;height:92px}
.card.nofoto .ph .art{height:64px;width:64px}
.card.nofoto .peek{display:none}
@media (hover:hover){.card:hover .ph img{transform:scale(1.07)}.card:hover .peek{transform:translate(0,0) rotate(-8deg)}}
.card:active .ph img{transform:scale(1.04)}.card:active .peek{transform:translate(0,0) rotate(-8deg)}
.card .b{padding:14px 16px 18px;flex:1;min-width:0}
.card .top2{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card h4{font:400 21px/1.15 "Chelsea Market","DM Sans";color:var(--crema);overflow-wrap:anywhere;min-width:0}
.card .pr{font-weight:700;color:var(--aji);white-space:nowrap;flex:none}
.card p.d{margin-top:8px;font-size:15px;opacity:.88;overflow-wrap:anywhere}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font-size:13px;font-weight:700;padding:3px 9px;background:var(--morado);color:var(--crema)}
.tag.b2{background:var(--aji);color:var(--noche)}
.tag.b3{background:var(--rocoto)}
.vars{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vars span{font-size:14px;background:var(--noche);padding:4px 10px}
.vars b{color:var(--aji)}
.sub-h{font-size:22px;margin-top:26px;color:var(--crema)}

/* Tragos */
.tragos{background:var(--morado)}
.tragos h2{color:var(--crema)}
.tr-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--pad);align-items:center}
.tr-list{list-style:none;padding:0;margin-top:22px;display:grid;gap:8px}
.tr-list li{display:flex;justify-content:space-between;gap:16px;background:rgba(12,9,7,.55);padding:12px 16px}
.tr-list b{color:var(--aji);white-space:nowrap}
.glass{width:100%;max-width:380px;margin:0 auto;display:block}
.foam{animation:ola 5s linear infinite;transform-box:fill-box}
@keyframes ola{from{transform:translateX(0)}to{transform:translateX(-80px)}}
.garn{animation:giro 9s linear infinite;transform-origin:176px 50px;transform-box:view-box}
@keyframes giro{to{transform:rotate(360deg)}}

/* Historia */
.hist-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--pad);margin-top:32px}
.ph-box{aspect-ratio:4/3;background:var(--brasa);display:grid;place-items:center;color:var(--aji);text-align:center;padding:16px}

/* Galería */
.gal{columns:3;column-gap:12px;margin-top:36px}
.gal img{width:100%;height:auto;margin-bottom:12px;break-inside:avoid;opacity:1}
.js .gal img{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.js .gal img.in{opacity:1;transform:none}

/* Reseñas */
.rates{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.rate{background:var(--brasa);padding:28px}
.rate .num{font:400 clamp(64px,10vw,112px)/1 "Chelsea Market";color:var(--aji)}
.stars-row{display:flex;gap:4px;margin:6px 0 10px}
.stars-row svg{width:26px;height:26px;fill:var(--aji)}
.stars-row .half{fill:var(--aji);opacity:.45}
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}

/* Ubicación */
.tabs{display:flex;gap:8px;margin-top:28px}
.tabs button{min-height:48px;padding:0 22px;border:0;background:var(--brasa);color:var(--crema);font:700 16px "DM Sans";cursor:pointer;touch-action:manipulation}
.tabs button[aria-selected="true"]{background:var(--oro);color:var(--noche)}
.loc{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--pad);margin-top:20px}
.loc h3{font-size:34px;color:var(--oro);margin-bottom:10px}
.loc p{margin-top:8px}
.map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;background:var(--brasa)}

/* Footer */
.foot{background:var(--brasa);padding:48px 0 24px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:var(--pad);align-items:start}
.foot img{width:130px;mix-blend-mode:lighten}
.foot p{margin-top:10px}
.foot a{text-underline-offset:3px}
.copy{text-align:center;opacity:.6;font-size:14px;margin-top:32px}

/* WhatsApp flotante */
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;background:#1FA855;display:grid;place-items:center;z-index:100;box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .18s var(--ease);touch-action:manipulation}
.wa-float:active{transform:scale(.92)}
@media (hover:hover){.wa-float:hover{transform:scale(1.06)}}

/* Móvil */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-pic{aspect-ratio:4/3;order:-1}
  .hero-txt{padding-top:28px}
  .top{position:relative;background:var(--noche)}
  .top nav a:nth-child(n+2){display:none}
  .stars{grid-template-columns:1fr 1fr}
  .stick{grid-template-columns:1fr;align-content:center;gap:12px}
  .pan{max-height:34svh}
  .scene h2{margin-bottom:8px}
  .step{font-size:17px;margin-top:8px}
  .tr-grid,.hist-grid,.loc,.rates{grid-template-columns:1fr}
  .tr-vis{order:-1}.glass{max-width:240px}
  .gal{columns:2}
  .testis{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:480px){.stars{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  #loader{display:none}
  .js .rv,.js .gal img,.js .greca i{transition:opacity .4s ease;transform:none}
  .js .fall{opacity:1;animation:none}
  .scene{height:auto}.stick{position:static;height:auto;padding:48px var(--pad)}
  .js .step{opacity:1}
  .pan #dora{opacity:1}
  .btn,.card .ph img,.st img,.peek{transition:none}
}