/* ============================================================
   DR. EMPANADA — Brand tokens & base
   Base: negro & blanco · Acento: dorado de marca · damero + kraft
   ============================================================ */

:root{
  /* --- Color --- */
  --ink:        #0c0c0d;   /* near-black base */
  --ink-2:      #161618;   /* raised surface on dark */
  --ink-3:      #202023;   /* card on dark */
  --line-dark:  #2c2c30;   /* hairline on dark */

  --paper:      #f4efe4;   /* warm off-white (kraft paper) */
  --paper-2:    #eae1d0;   /* deeper kraft */
  --bone:       #fbf9f3;   /* lightest */
  --line-light: #ddd3bf;

  --white:      #f7f4ec;
  --muted:      #9a978f;   /* muted text on dark */
  --muted-d:    #6f6a5e;   /* muted text on light */

  --orange:     #f4a804;   /* brand accent (dorado Dr. Empanada) */
  --orange-2:   #ffe3a8;   /* tint */
  --orange-deep:#b47500;
  --beer:       #e7a92a;   /* gold secundario */
  --foam:       #f6e9c8;

  --ok:         #3fae6b;
  --warn:       #e9b949;
  --danger:     #d8533c;

  /* --- Type --- */
  --display: "Anton", "Arial Narrow", sans-serif;
  --body:    "Barlow", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  /* --- Geometry --- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --maxw: 1200px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.55);
  --shadow-sm: 0 6px 18px -8px rgba(0,0,0,.5);

  /* --- Motion (curvas fuertes, estilo emil) --- */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
::selection{ background:var(--orange); color:#1a1206; }

/* Scrollbar */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#3a3a40; border-radius:20px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#54545c; background-clip:content-box; }

/* --- Type helpers --- */
.display{ font-family:var(--display); font-weight:400; line-height:.92; letter-spacing:.01em; text-transform:uppercase; }
.mono{ font-family:var(--mono); }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange); font-weight:700;
}
.eyebrow.muted{ color:var(--muted); }

/* --- Damero (checkerboard) strip --- */
.damero{
  height:14px;
  background:
    conic-gradient(#0c0c0d 90deg, #f7f4ec 90deg 180deg, #0c0c0d 180deg 270deg, #f7f4ec 270deg) 0 0/28px 28px;
  background-repeat:repeat;
}
.damero.thin{ height:10px; background-size:20px 20px; }

/* --- Kraft / paper noise texture --- */
.kraft{
  background-color:var(--paper);
  background-image:
    radial-gradient(rgba(120,90,40,.06) 1px, transparent 1px),
    radial-gradient(rgba(120,90,40,.05) 1px, transparent 1px);
  background-size:7px 7px, 13px 13px;
  background-position:0 0, 4px 4px;
}

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--mono); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:13px; line-height:1;
  padding:14px 22px; border-radius:var(--r-sm); border:2px solid transparent;
  transition:transform .18s var(--ease-out), background .15s ease, color .15s ease, border-color .15s, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn-orange{ background:var(--orange); color:#1a1206; }
.btn-orange:hover:not(:active){ background:#ffbe2a; transform:translateY(-1px); box-shadow:0 12px 26px -14px rgba(244,168,4,.7); }
.btn-white{ background:var(--white); color:var(--ink); }
.btn-white:hover:not(:active){ background:#fff; transform:translateY(-1px); box-shadow:0 12px 26px -16px rgba(0,0,0,.6); }
.btn-ghost{ background:transparent; color:var(--white); border-color:var(--line-dark); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }
.btn-dark{ background:var(--ink); color:var(--white); }
.btn-dark:hover{ background:#000; }
.btn-block{ width:100%; }
.btn-lg{ padding:17px 28px; font-size:14px; }
.btn-sm{ padding:9px 14px; font-size:11.5px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* --- Tag / pill --- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px; border:1.5px solid var(--line-dark); color:var(--muted);
}
.tag.orange{ border-color:var(--orange); color:var(--orange); }
.tag.solid{ background:var(--orange); color:#1a1206; border-color:transparent; }
.tag.beer{ border-color:var(--beer); color:var(--beer); }

/* --- Containers --- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* --- Image placeholder (intentional, branded) --- */
.imgph{
  position:relative; overflow:hidden; background:#1a1a1c;
  background-image:repeating-linear-gradient(135deg, #1a1a1c 0 14px, #1f1f22 14px 28px);
  display:flex; align-items:center; justify-content:center;
}
.imgph span{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:#55555c; text-align:center; padding:8px 12px;
}
.imgph.light{ background:#e7ddc9; background-image:repeating-linear-gradient(135deg,#e7ddc9 0 14px,#ddd1b8 14px 28px); }
.imgph.light span{ color:#9a8a68; }

/* utility */
.tabular{ font-variant-numeric:tabular-nums; }
.hairline{ height:1px; background:var(--line-dark); border:0; }
.fadeup{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .fadeup{ animation:fadeup .5s ease both; }
}
@keyframes fadeup{ from{ transform:translateY(14px); } to{ transform:none; } }

/* focus */
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
input:focus, textarea:focus, select:focus{ outline:none; }

/* ============================================================
   v2 — motion & surface upgrades
   ============================================================ */
html{ scroll-behavior:smooth; }
.display{ text-wrap:balance; }

/* --- Scroll reveal (IntersectionObserver agrega .in) --- */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s var(--ease-out); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* --- Grain overlay --- */
.grain{
  position:fixed; inset:0; z-index:98; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Card hover lift + image zoom --- */
.lift{ transition:transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.lift:hover{ transform:translateY(-5px); border-color:var(--line-dark); box-shadow:0 26px 52px -22px rgba(0,0,0,.72); }
.zoom{ overflow:hidden; }
.zoom img{ transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.zoom:hover img{ transform:scale(1.06); }

/* --- Foto real con fade-in + skeleton shimmer --- */
.ph{ position:relative; background:#161618; overflow:hidden; }
.ph::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%);
  background-size:200% 100%; animation:ph-shimmer 1.4s infinite;
}
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.ph img.ld{ opacity:1; }
.ph.ready::before{ animation:none; opacity:0; }
@keyframes ph-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.ph .ph-icon{ position:absolute; inset:0; display:grid; place-items:center; color:#3c3c42; }

/* --- Tap list (cervezas) --- */
.tap{
  display:flex; align-items:center; gap:16px; padding:16px 18px;
  border:1px solid var(--line-dark); border-radius:12px; background:var(--ink-2);
  transition:border-color .2s, transform .2s;
}
.tap:hover{ border-color:var(--beer); transform:translateX(4px); }
.tap-glass{
  width:34px; height:44px; border-radius:3px 3px 7px 7px; flex-shrink:0; position:relative;
  border:2px solid #3a3a40; border-top:none; overflow:hidden;
}
.tap-glass::before{ content:""; position:absolute; left:0; right:0; bottom:0; top:22%; background:var(--c, var(--beer)); }
.tap-glass::after{ content:""; position:absolute; left:0; right:0; top:8%; height:16%; background:var(--foam); border-radius:2px; }
.meter{ height:5px; border-radius:4px; background:#2c2c30; overflow:hidden; }
.meter > span{ display:block; height:100%; border-radius:4px; background:var(--beer); }

/* --- Happy hour --- */
.hh-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#1a1206; background:var(--beer); padding:6px 12px; border-radius:100px;
}
.hh-dot{ width:8px; height:8px; border-radius:50%; background:#1a1206; animation:hh-blink 1.4s infinite; }
@keyframes hh-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* --- Compact list rows (tragos / bebidas) --- */
.lrow{
  display:flex; align-items:center; gap:16px; padding:15px 4px;
  border-bottom:1px dashed var(--line-dark);
}
.lrow-dots{ flex:1; border-bottom:2px dotted #3a3a40; margin:0 4px; transform:translateY(6px); min-width:24px; }

/* --- Chip (agregados) --- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--white);
  padding:8px 13px; border-radius:100px; border:1px solid var(--line-dark); background:var(--ink-2);
}
.chip b{ font-family:var(--mono); color:var(--orange); font-weight:700; font-size:12.5px; }

/* --- Customizer modal --- */
.modal-bg{
  position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.7); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:18px;
  animation:fadein .2s ease;
}
.modal{
  width:min(560px, 100%); max-height:min(760px, 92dvh); overflow:hidden auto;
  background:var(--ink); border:1px solid var(--line-dark); border-radius:18px; box-shadow:var(--shadow);
  animation:modal-in .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes fadein{ from{ opacity:0; } }
@keyframes modal-in{ from{ transform:translateY(26px) scale(.98); opacity:0; } }
.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 14px; border-radius:10px; cursor:pointer;
  border:1.5px solid var(--line-dark); background:var(--ink-2); color:var(--white);
  transition:border-color .15s, background .15s;
}
.opt:hover{ border-color:#4a4a52; }
.opt.on{ border-color:var(--orange); background:rgba(244,168,4,.08); }
.opt-check{
  width:20px; height:20px; border-radius:6px; border:2px solid var(--line-dark);
  display:grid; place-items:center; color:#1a1206; flex-shrink:0; transition:all .15s;
}
.opt.on .opt-check{ background:var(--orange); border-color:var(--orange); }
.opt-radio{ border-radius:50%; }

/* --- Toast --- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90;
  display:flex; align-items:center; gap:10px;
  background:var(--white); color:var(--ink); font-weight:700; font-size:14px;
  padding:12px 18px; border-radius:12px; box-shadow:var(--shadow);
  animation:toast-in .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes toast-in{ from{ transform:translate(-50%, 20px); opacity:0; } }

/* --- Announcement bar --- */
.annbar{
  background:var(--orange); color:#1a1206; overflow:hidden;
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

/* --- Hero float --- */
@keyframes bf-float{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-12px) rotate(-2deg); } }
.hero-float{ animation:bf-float 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .hero-float{ animation:none; } }

/* --- Outline display text --- */
.outline-txt{
  color:transparent; -webkit-text-stroke:1.5px var(--white);
}

/* --- Cat nav pill --- */
.catpill{
  white-space:nowrap; padding:9px 15px; border-radius:100px; font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; font-family:var(--mono);
  border:1px solid var(--line-dark); background:transparent; color:var(--white);
  transition:all .2s;
}
.catpill:hover{ border-color:var(--orange); color:var(--orange); }
.catpill.on{ background:var(--orange); border-color:var(--orange); color:#1a1206; }

/* ============================================================
   v3 — vibrant overhaul (rediseño Fase 3)
   ============================================================ */

/* --- Nav links: subrayado animado (hover + activo) --- */
.navlink{ position:relative; }
.navlink::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease-out);
}
.navlink:hover::after, .navlink.on::after{ transform:scaleX(1); }

/* --- CTA principal: barrido de brillo al hover (una vez, rápido) --- */
.btn-orange{ position:relative; overflow:hidden; }
.btn-orange::after{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:36%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg); opacity:0; pointer-events:none;
}
.btn-orange:hover::after{ animation:btn-sheen .55s var(--ease-out); }
@keyframes btn-sheen{
  from{ opacity:1; transform:skewX(-18deg) translateX(0); }
  to{ opacity:0; transform:skewX(-18deg) translateX(420%); }
}

/* --- Canillas: el vaso se llena al hover --- */
.tap-glass::before{ transition:top .5s var(--ease-out); }
.tap-glass::after{ transition:top .5s var(--ease-out); }
.tap:hover .tap-glass::before{ top:10%; }
.tap:hover .tap-glass::after{ top:1%; }

/* --- Cards: glow naranja sutil al hover (sobre .lift) --- */
.lift:hover{
  box-shadow:
    0 26px 52px -22px rgba(0,0,0,.72),
    0 18px 60px -30px rgba(244,168,4,.35);
}

/* --- Happy hour deals: feedback al hover --- */
.hh-deal{ transition:border-color .2s ease, transform .2s var(--ease-out); }
.hh-deal:hover{ border-color:var(--beer); transform:translateY(-2px); }

/* --- Hero: reveal cinético línea por línea (estilo awwwards) --- */
.hline{ display:block; overflow:hidden; }
.hline > span{ display:block; transform:translateY(112%); animation:hline-in .8s var(--ease-out) forwards; }
.hline:nth-child(1) > span{ animation-delay:.1s; }
.hline:nth-child(2) > span{ animation-delay:.22s; }
.hline:nth-child(3) > span{ animation-delay:.34s; }
@keyframes hline-in{ to{ transform:translateY(0); } }

/* --- Ghost type: palabra gigante outline de fondo --- */
.ghost-word{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--display); text-transform:uppercase; line-height:1;
  font-size:clamp(120px, 24vw, 340px); letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:1px rgba(247,244,236,.07);
  pointer-events:none; user-select:none; white-space:nowrap;
}

/* --- Reseñas: tilt polaroid (se endereza al hover) --- */
.tilt-a{ transform:rotate(-1.4deg); }
.tilt-b{ transform:rotate(1.1deg); }
.tilt-a, .tilt-b{ transition:transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.tilt-a:hover, .tilt-b:hover{ transform:rotate(0deg) translateY(-5px); }

/* ============================================================
   Sticker system — home variante "Stickers" (kraft claro)
   ============================================================ */
/* texto con borde de calcomanía (stroke blanco por detrás del fill) */
.stk-stroke{
  -webkit-text-stroke:.14em #fff;
  paint-order:stroke fill;
  text-shadow:0 6px 24px rgba(26,18,6,.18);
}
/* tarjeta calcomanía: borde blanco grueso + sombra suave */
.stk-card{
  background:#fff; border-radius:16px;
  box-shadow:0 10px 30px -10px rgba(26,18,6,.28);
  border:1px solid rgba(26,18,6,.06);
}
/* foto calcomanía (polaroid) — el hover usa `scale` (propiedad aparte)
   para no pisar la animación de flotación que vive en `transform` */
.stk-photo{
  border:8px solid #fff; border-radius:14px;
  box-shadow:0 16px 40px -16px rgba(26,18,6,.35);
  overflow:hidden;
  transition:scale .3s var(--ease-out), box-shadow .3s;
}
.stk-photo:hover{ scale:1.05; box-shadow:0 22px 50px -18px rgba(26,18,6,.45); }
/* etiqueta pill rotada */
.stk-label{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px; border-radius:100px; border:3px solid #fff;
  box-shadow:0 8px 22px -10px rgba(26,18,6,.35);
}
/* flotación suave */
@keyframes stk-wobble{ 0%,100%{ transform:rotate(var(--rot,-3deg)) translateY(0); } 50%{ transform:rotate(calc(var(--rot,-3deg) + 2deg)) translateY(-7px); } }
.stk-float{ animation:stk-wobble 6s ease-in-out infinite; }

/* palabras que convergen al entrar (word-stack cinético) */
.reveal.rev-left{ transform:translateX(-90px); }
.reveal.rev-right{ transform:translateX(90px); }
.reveal.rev-left.in, .reveal.rev-right.in{ transform:none; }

/* burbuja sticker (etiqueta gorda estilo globo) */
.stk-bubble{
  display:inline-block; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(16px,2.4vw,24px); letter-spacing:.04em;
  color:#fff; background:var(--orange-deep); padding:10px 20px; border-radius:100px;
  border:4px solid #fff; box-shadow:0 10px 26px -10px rgba(26,18,6,.35);
  transform:rotate(-3deg);
}

/* CTA ovalada gigante (estilo póster) */
.stk-oval{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(20px,3vw,30px); color:#f7f4ec;
  background:var(--orange-deep); padding:22px 52px; border-radius:50%;
  border:4px solid #fff; box-shadow:0 16px 40px -14px rgba(26,18,6,.4);
  cursor:pointer; transition:scale .25s var(--ease-out), box-shadow .25s;
}
.stk-oval:hover{ scale:1.06; box-shadow:0 22px 48px -14px rgba(26,18,6,.45); }
.stk-oval:active{ scale:.97; }

@media (prefers-reduced-motion: reduce){
  .stk-float{ animation:none; }
  .stk-photo:hover, .stk-oval:hover{ scale:none; }
  .reveal.rev-left, .reveal.rev-right{ transform:none; }
}

/* ============================================================
   Panel admin — usabilidad
   ============================================================ */
.adm-nav{ background:transparent; color:var(--white); transition:background .15s ease, color .15s ease; }
.adm-nav:not(.on):hover{ background:var(--ink-3); }
.adm-nav.on{ background:var(--orange); color:#1a1206; }
.adm-help:hover{ border-color:var(--orange); color:var(--orange); }
.adm-next{ transition:filter .15s ease; }
.adm-next:hover{ filter:brightness(1.12); }
.adm-cancel{ transition:background .15s ease; }
.adm-cancel:hover{ background:rgba(216,83,60,.14); }

/* --- Tour de ayuda (spotlight + tarjeta) --- */
.tour-spot{
  border-radius:12px; pointer-events:none;
  border:2px solid var(--orange);
  box-shadow:0 0 0 9999px rgba(0,0,0,.76), 0 0 24px rgba(244,168,4,.35);
  transition:left .35s var(--ease-out), top .35s var(--ease-out), width .35s var(--ease-out), height .35s var(--ease-out);
}
.tour-card{
  background:var(--ink-2); border:1px solid var(--line-dark); border-radius:14px;
  padding:20px 22px; box-shadow:var(--shadow); z-index:1;
  animation:tour-card-in .3s var(--ease-out);
}
@keyframes tour-card-in{ from{ opacity:0; transform:translateY(10px); } }
.tour-card[style*="translate(-50%"]{ animation:tour-card-in-c .3s var(--ease-out); }
@keyframes tour-card-in-c{ from{ opacity:0; transform:translate(-50%,-50%) scale(.97); } }

/* --- Reduced motion para lo nuevo --- */
@media (prefers-reduced-motion: reduce){
  .btn-orange:hover::after{ animation:none; }
  .tap-glass::before, .tap-glass::after{ transition:none; }
  .hh-deal, .hh-deal:hover{ transform:none; transition:none; }
  .navlink::after{ transition:none; }
  .hline > span{ transform:none; animation:none; }
  .tilt-a, .tilt-b, .tilt-a:hover, .tilt-b:hover{ transform:none; transition:none; }
  .tour-spot{ transition:none; }
  .tour-card{ animation:none; }
}