/* =================================================================
   ASHER · Restaurante Brunch — v3 EDITORIAL (boutique, fotográfico)
   Mobile-first. Fraunces (display) + Inter (texto). Dorado + tinta + papel.
   ================================================================= */
:root{
  --gold:#E8A00C; --gold-2:#C9820A;
  --ink:#14100B; --ink-2:#1F1810;
  --paper:#FBF5EA; --paper-2:#F1E6D4;
  --clay:#BB6438; --green:#5E6B45;
  --text:#241C13; --muted:#7C6B55; --line:#E2D4BE;
  --fd:'Fraunces',Georgia,serif; --fb:'Inter',system-ui,sans-serif;
  --mx:clamp(20px,6vw,90px); /* margen lateral fluido */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);color:var(--text);background:var(--paper);line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic}

.display{font-family:var(--fd);font-weight:400;line-height:1.02;letter-spacing:-.02em;font-size:clamp(2.1rem,6.2vw,4.2rem)}
.display em{font-style:italic;color:var(--gold-2)}
.kicker{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.kicker--gold{color:var(--gold-2)}
.link-underline{position:relative;font-weight:500;padding-bottom:3px}
.link-underline::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(.0);transform-origin:left;transition:transform .3s}
.link-underline:hover::after{transform:scaleX(1)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--fb);font-weight:600;font-size:.95rem;padding:1rem 1.7rem;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:transform .18s,background .2s,color .2s}
.btn--solid{background:var(--gold);color:var(--ink)}
.btn--solid:hover{background:var(--gold-2);color:#fff;transform:translateY(-2px)}
.btn--gold{background:transparent;color:var(--gold-2);border-color:var(--gold-2)}
.btn--gold:hover{background:var(--gold-2);color:#fff}
.btn--block{width:100%}

/* reveal sutil */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* aviso borrador */
.draft{position:fixed;bottom:0;left:0;z-index:90;background:var(--ink);color:#cdbfa9;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .8rem;border-top-right-radius:6px}
.draft button{background:none;border:none;color:var(--gold);cursor:pointer;font-size:.9rem;margin-left:.4rem}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:.9rem var(--mx);transition:background .3s,box-shadow .3s,padding .3s}
.nav .brand{display:flex;align-items:center;gap:.55rem;color:#fff}
.brand__logo{width:38px;height:38px;object-fit:contain}
.brand span{font-family:var(--fd);font-weight:600;font-size:1.25rem;letter-spacing:.04em}
.nav--solid{background:rgba(251,245,234,.95);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding-top:.6rem;padding-bottom:.6rem}
.nav--solid .brand{color:var(--ink)}
.nav__links{display:none}
.nav__cta{border:1px solid currentColor;padding:.5rem 1rem!important;border-radius:2px}
.nav__toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:81}
.nav__toggle span{width:26px;height:2px;background:#fff;transition:.3s}
.nav--solid .nav__toggle span{background:var(--ink)}
.nav__toggle.open span{background:var(--ink)}
.nav__toggle.open span:first-child{transform:translateY(7px) rotate(45deg)}
.nav__toggle.open span:last-child{transform:translateY(-7px) rotate(-45deg)}
.nav__links.is-open{display:flex;flex-direction:column;gap:.4rem;position:fixed;inset:0;background:var(--paper);padding:6rem var(--mx) 2rem;justify-content:center}
.nav__links.is-open a{font-family:var(--fd);font-size:2rem;color:var(--ink);padding:.4rem 0;border-bottom:1px solid var(--line)}
.nav__links.is-open .nav__cta{border:none;color:var(--gold-2)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--mx) clamp(28px,5vh,56px);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,11,.55) 0%,rgba(20,16,11,.15) 35%,rgba(20,16,11,.85) 100%)}
.hero__grain{position:absolute;inset:0;z-index:-1;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:3px 3px;pointer-events:none}
.hero__top{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:5.5rem var(--mx) 0;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#e9dcc6}
.hero__meta--r{display:none}
.hero__headline{margin-bottom:1.4rem}
.hero__kick{font-family:var(--fd);font-style:italic;font-size:clamp(1rem,4vw,1.5rem);color:var(--gold);display:block;margin-bottom:.2rem}
.hero__headline h1{font-family:var(--fd);font-weight:300;font-size:clamp(4.5rem,26vw,16rem);line-height:.85;letter-spacing:-.03em}
.hero__hash{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:#e9dcc6;margin-top:.6rem}
.hero__foot{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;font-size:.95rem;border-top:1px solid rgba(255,255,255,.25);padding-top:1.2rem}
.hero__scroll{margin-left:auto;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#e9dcc6}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--ink);color:var(--gold);overflow:hidden;padding:1.1rem 0;border-top:1px solid rgba(232,160,12,.2);border-bottom:1px solid rgba(232,160,12,.2)}
.marquee__track{display:flex;align-items:center;gap:1.4rem;white-space:nowrap;width:max-content;animation:slide 34s linear infinite;font-family:var(--fd);font-style:italic;font-size:clamp(1.3rem,4vw,2.1rem)}
.marquee__track i{color:#6b5a37;font-style:normal;font-size:.7em}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- HISTORIA ---------- */
.story{padding:clamp(64px,10vh,130px) var(--mx);display:grid;gap:2.5rem}
.story__photo{position:relative}
.story__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.story__photo figcaption{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.7rem}
.story__text .display{margin-bottom:1.2rem}
.story__text p{color:var(--muted);max-width:46ch;margin-bottom:1rem;font-size:1.02rem}
.story__text strong{color:var(--text);font-weight:600}
.signature{font-family:var(--fd);font-style:italic;color:var(--gold-2)!important;font-size:1.15rem}

/* ---------- FEAT (especialidades) ---------- */
.feat{background:var(--paper-2);padding:clamp(64px,10vh,130px) var(--mx)}
.feat__head{margin-bottom:3rem;max-width:14ch}
.feat__row{display:grid;gap:1.5rem;align-items:center;margin-bottom:clamp(48px,7vh,96px)}
.feat__row:last-child{margin-bottom:0}
.feat__img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px}
.feat__body{position:relative}
.feat__num{font-family:var(--fd);font-size:3.4rem;color:transparent;-webkit-text-stroke:1px var(--gold-2);display:block;line-height:1;margin-bottom:.4rem;opacity:.8}
.feat__body h3{font-family:var(--fd);font-weight:500;font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:.5rem}
.feat__body p{color:var(--muted);max-width:42ch;margin-bottom:.8rem}
.feat__price{font-family:var(--fd);font-weight:600;font-size:1.4rem;color:var(--gold-2)}

/* ---------- MENÚ (carta oscura) ---------- */
.menu{background:var(--ink);color:var(--paper);padding:clamp(64px,10vh,130px) var(--mx)}
.menu__head{text-align:center;margin-bottom:2.4rem}
.menu__head .display{color:var(--paper)}
.menu__note{color:#a99a82;font-style:italic;font-family:var(--fd);margin-top:.4rem}
.menu__tabs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem}
.tab{font-family:var(--fb);font-weight:500;font-size:.85rem;cursor:pointer;padding:.5rem 1.05rem;border-radius:2px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#cdbfa9;transition:.2s}
.tab:hover{color:var(--gold);border-color:var(--gold)}
.tab.is-active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.menu__grid{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:.1rem 3.5rem}
.dish{padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.dish__line{display:flex;align-items:baseline}
.dish__name{font-family:var(--fd);font-weight:500;font-size:1.1rem;color:var(--paper)}
.dish__tag{font-family:var(--fb);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;background:var(--green);color:#fff;padding:.12rem .45rem;border-radius:999px;margin-left:.5rem;vertical-align:middle}
.dish__dots{flex:1;border-bottom:1px dotted rgba(255,255,255,.28);margin:0 .6rem;position:relative;top:-.28rem}
.dish__price{font-family:var(--fd);font-weight:600;color:var(--gold);white-space:nowrap}
.dish__desc{font-size:.82rem;color:#9d8e78;margin-top:.25rem;max-width:54ch}
.menu__foot{text-align:center;color:#9d8e78;font-style:italic;font-size:.85rem;margin-top:2.4rem}

/* ---------- GALERÍA ---------- */
.gallery{background:var(--ink);padding:0 0 0 0}
.gallery__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.ga{overflow:hidden}
.ga img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;transition:transform .6s}
.ga:hover img{transform:scale(1.06)}
.ga--big img,.ga--tall img,.ga--wide img{aspect-ratio:1}

/* ---------- ORDER ---------- */
.order{background:var(--ink-2);color:var(--paper);padding:clamp(64px,10vh,130px) var(--mx);display:grid;gap:2.4rem}
.order__aside .display{color:var(--paper);margin-bottom:1rem}
.order__aside p{color:#cdbfa9;max-width:40ch}
.order__hours{color:var(--gold)!important;font-weight:600;margin-top:.8rem}
.order__panel{background:var(--paper);color:var(--text);border-radius:4px;padding:1.6rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.order__panel h3{font-family:var(--fd);font-weight:600;font-size:1.3rem;margin-bottom:1rem}
.order__list{max-height:360px;overflow-y:auto;margin-bottom:1rem;padding-right:.5rem}
.order-cat{font-family:var(--fd);font-weight:600;color:var(--gold-2);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;margin:1rem 0 .3rem}
.order-item{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
.order-item__name{font-size:.9rem}.order-item__name b{font-weight:600}
.order-item__name span{color:var(--gold-2);font-weight:600;margin-left:.3rem}
.order-item__ctrl{display:flex;align-items:center;gap:.5rem}
.qty-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--paper-2);font-size:1.1rem;cursor:pointer;color:var(--ink);transition:.15s}
.qty-btn:hover{border-color:var(--gold-2);color:var(--gold-2)}
.qty-val{min-width:18px;text-align:center;font-weight:600}
.order__bar{border-top:2px solid var(--line);padding-top:1rem}
.order__total{display:flex;justify-content:space-between;align-items:center;font-family:var(--fd);margin-bottom:1rem}
.order__total strong{font-size:1.6rem;color:var(--gold-2)}
.order__bar small{display:block;margin-top:.7rem;color:var(--muted);font-size:.76rem;text-align:center}

/* ---------- RESERVAR ---------- */
.reserve{display:grid;gap:0}
.reserve__img img{width:100%;height:100%;min-height:280px;object-fit:cover}
.reserve__form-wrap{padding:clamp(48px,8vh,110px) var(--mx)}
.reserve__form-wrap .display{margin-bottom:1.6rem}
.reserve__form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field--full{grid-column:1/-1}
.field label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.field input,.field select{padding:.8rem .9rem;border:1px solid var(--line);border-radius:2px;font-family:var(--fb);font-size:.95rem;background:#fff;color:var(--text)}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold-2)}
.field__hint{font-size:.78rem;color:var(--muted);padding-top:.6rem}
.reserve__form .btn{grid-column:1/-1;margin-top:.3rem}

/* ---------- UBICACIÓN ---------- */
.loc{display:grid;gap:0}
.loc__info{padding:clamp(48px,8vh,110px) var(--mx);align-self:center}
.loc__info .display{margin-bottom:1rem}
.loc__info p{color:var(--muted);margin-bottom:1rem}
.loc__hours{color:var(--text)!important;font-weight:600}
.loc__info .btn{margin:.5rem 0 1rem}
.loc__social a{border-bottom:1px solid var(--gold)}
.loc__map{min-height:420px}
.loc__map iframe{width:100%;height:100%}

/* ---------- FOOTER ---------- */
.footer{background:var(--ink);color:var(--paper);padding:clamp(56px,8vh,90px) var(--mx) 2rem;overflow:hidden}
.footer__top{display:grid;gap:2rem;margin-bottom:2.5rem}
.footer__logo{width:64px;height:64px;object-fit:contain}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.footer__cols h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin-bottom:.7rem}
.footer__cols p{font-size:.88rem;color:#cdbfa9;line-height:1.9}
.footer__cols a:hover{color:var(--paper)}
.footer__word{font-family:var(--fd);font-weight:300;text-align:center;font-size:clamp(4rem,24vw,18rem);line-height:.8;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(232,160,12,.35);margin:1rem 0}
.footer__legal{text-align:center;font-size:.74rem;color:#8a7b64;border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem}

/* ---------- WHATSAPP FLOTANTE ---------- */
.float-whats{position:fixed;bottom:18px;right:18px;z-index:85;background:#25D366;color:#fff;padding:.85rem 1.2rem;border-radius:999px;font-weight:600;font-size:.9rem;box-shadow:0 12px 30px -8px rgba(37,211,102,.7);transition:transform .2s}
.float-whats:hover{transform:scale(1.06)}

/* =================================================================
   TABLET  ≥ 768px
   ================================================================= */
@media (min-width:768px){
  .hero__meta--r{display:block}
  .menu__grid{grid-template-columns:1fr 1fr}
  .gallery__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,15vw,210px)}
  .ga img{aspect-ratio:auto}
  .ga--big{grid-column:span 2;grid-row:span 2}
  .ga--tall{grid-row:span 2}
  .ga--wide{grid-column:span 2}
  .story{grid-template-columns:0.85fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
  .feat__row{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
  .feat__row--rev .feat__img{order:2}
  .order{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(2.5rem,6vw,6rem)}
  .reserve{grid-template-columns:1fr 1fr}
  .reserve__img img{min-height:100%}
  .loc{grid-template-columns:1fr 1.15fr}
  .footer__top{grid-template-columns:auto 1fr;align-items:start;gap:4rem}
  .footer__cols{grid-template-columns:repeat(3,1fr);max-width:560px;margin-left:auto}
}

/* =================================================================
   DESKTOP  ≥ 1024px
   ================================================================= */
@media (min-width:1024px){
  .nav__toggle{display:none}
  .nav__links{display:flex;align-items:center;gap:2rem}
  .nav__links a{color:#fff;font-size:.92rem;font-weight:500;position:relative}
  .nav--solid .nav__links a{color:var(--ink)}
  .nav__links a:not(.nav__cta):hover{color:var(--gold)}
  .nav--solid .nav__links a:not(.nav__cta):hover{color:var(--gold-2)}
  .feat__row{gap:6rem}
  .feat__num{font-size:4.5rem}
}

/* respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}