/* ============================================================
   EL SOLAR — Restaurante & Parrilla, Pamplona
   Paleta y tipografía derivadas de la carta física:
   cuero negro, emblemas en oro bruñido, sans geométrica.
   ============================================================ */

:root{
  /* Superficies */
  --bg:            #0A0806;
  --bg-2:          #0F0C09;
  --surface:       #15110D;
  --surface-2:     #1C1712;
  --border:        rgba(201,162,39,.18);
  --border-soft:   rgba(245,241,232,.09);

  /* Oro */
  --gold:          #C9A227;
  --gold-light:    #E7C87A;
  --gold-deep:     #8A6B1C;

  /* Acento: verde de montaña santandereana */
  --verde:         #2E7D5B;

  /* Texto */
  --text:          #F3EEE3;
  --text-2:        #BDB3A2;
  --text-3:        #8A8175;

  /* Escala (density 4/10 — estándar/espaciosa) */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px; --sp-7: 128px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px;

  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 72px;
}

*, *::before, *::after{ box-sizing: border-box; }

/* El atributo hidden debe ganar siempre a display:flex/grid */
[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip (y no hidden) para no romper position:sticky de las pestañas */
  overflow-x: clip;
}
body.is-locked{ overflow: hidden; }

img{ max-width:100%; display:block; }
a{ color: inherit; }
button{ font: inherit; color: inherit; cursor: pointer; }
svg{ width: 1em; height: 1em; }

.wrap{ width: min(1180px, 100% - 2 * var(--sp-3)); margin-inline: auto; }
.nowrap{ white-space: nowrap; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--gold); color:#000; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 4px; }

/* ---------- Tipografía ---------- */
.h2{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.h2 em{ font-style: italic; color: var(--gold-light); }

.eyebrow{
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 0 0 var(--sp-2);
}

.section{ padding-block: clamp(var(--sp-5), 11vw, var(--sp-7)); position: relative; }
.section__head{ max-width: 640px; margin-bottom: var(--sp-5); }
.section__head--wide{ max-width: 760px; }
.section__lead{ color: var(--text-2); max-width: 52ch; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding: 0 26px; border-radius: var(--r-full);
  font-size: .82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .2s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn--gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color:#120D04; box-shadow: 0 8px 30px rgba(201,162,39,.22);
}
.btn--gold:hover{ box-shadow: 0 12px 38px rgba(201,162,39,.34); }

.btn--ghost{ border-color: rgba(231,200,122,.4); color: var(--gold-light); background: rgba(255,255,255,.02); }
.btn--ghost:hover{ background: rgba(231,200,122,.1); border-color: var(--gold-light); }

.btn--wa{
  width:100%; background:#1EA34F; color:#fff; border-radius: var(--r-md);
  text-transform:none; letter-spacing:.02em; font-size:.95rem; min-height:54px;
}
.btn--wa:hover{ background:#189244; }
.btn--wa svg{ width:1.25em; height:1.25em; }

.link{
  color: var(--gold-light); text-decoration:none; font-size:.85rem; font-weight:600;
  letter-spacing:.06em; border-bottom:1px solid rgba(231,200,122,.3); padding-bottom:2px;
  transition: border-color .2s var(--ease);
}
.link:hover{ border-color: var(--gold-light); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease),
              border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
}
.nav.is-stuck{
  background: rgba(10,8,6,.86);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--border);
}
.nav__inner{
  width: min(1180px, 100% - 2 * var(--sp-3)); margin-inline:auto;
  height: var(--nav-h); display:flex; align-items:center; gap: var(--sp-3);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.brand__mark{
  width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--border);
}
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family: var(--f-display); font-size:1.5rem; font-weight:600;
  letter-spacing:.04em;
  background: linear-gradient(120deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand__sub{
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase;
  color: var(--text-3); margin-top:4px; white-space:nowrap;
}

.nav__links{ display:flex; gap: var(--sp-3); }
.nav__links a{
  text-decoration:none; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-2); padding:8px 2px; position:relative; transition:color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:2px; width:0; height:1px;
  background: var(--gold); transition: width .28s var(--ease);
}
.nav__links a:hover{ color: var(--text); }
.nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap: 10px; }

.cart-btn{
  position:relative; width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--border); background: rgba(255,255,255,.03);
  color: var(--gold-light); transition: background .2s var(--ease), border-color .2s var(--ease);
}
.cart-btn:hover{ background: rgba(231,200,122,.12); border-color: var(--gold-light); }
.cart-btn svg{ width:20px; height:20px; }
.cart-btn__badge{
  position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px;
  border-radius: var(--r-full); background: var(--gold); color:#120D04;
  font-size:.65rem; font-weight:700; display:grid; place-items:center; line-height:1;
}

.burger{
  display:none; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--border); background: rgba(255,255,255,.03);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:18px; height:1.5px; background: var(--gold-light); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; padding: var(--sp-2) var(--sp-3) var(--sp-4);
  background: rgba(10,8,6,.97); backdrop-filter: blur(18px);
  border-bottom:1px solid var(--border);
}
.nav__mobile a{
  text-decoration:none; padding:16px 4px; font-family: var(--f-display); font-size:1.5rem;
  color: var(--text); border-bottom:1px solid var(--border-soft);
}
.nav__mobile-cta{ color: var(--gold-light) !important; border-bottom:none !important; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative; min-height: 100svh;
  display:grid; place-items:center; text-align:center;
  padding: calc(var(--nav-h) + var(--sp-4)) var(--sp-3) var(--sp-5);
  overflow:hidden; isolation:isolate;
}
.hero__shader{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; display:block; }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 78% at 50% 42%, rgba(10,8,6,.28) 0%, rgba(10,8,6,.72) 58%, rgba(10,8,6,.96) 100%),
    linear-gradient(to bottom, rgba(10,8,6,.7) 0%, transparent 22%, transparent 62%, var(--bg) 100%);
}
.hero__content{ max-width: 860px; }

.hero__emblem{
  width: clamp(96px, 16vw, 148px); height: auto; margin: 0 auto var(--sp-3);
  border-radius:50%; mix-blend-mode: screen; opacity:.95;
  filter: drop-shadow(0 0 34px rgba(201,162,39,.28));
  animation: emblemIn 1.4s var(--ease) both;
}
.hero__eyebrow{
  font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color: var(--gold);
  margin:0 0 var(--sp-2); animation: up .9s .1s var(--ease) both;
}
.hero__title{
  font-family: var(--f-display); font-weight:400;
  font-size: clamp(2.4rem, 7.4vw, 5rem); line-height:1.02; letter-spacing:-.015em;
  margin:0 0 var(--sp-3); text-wrap: balance;
}
.hero__title span{ display:block; }
.hero__title .l1{ animation: up 1s .18s var(--ease) both; }
.hero__title .l2{
  font-style: italic;
  background: linear-gradient(100deg, var(--gold-light) 10%, var(--gold) 45%, #F1DFAE 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: up 1s .3s var(--ease) both;
}
.hero__title .l3{ animation: up 1s .42s var(--ease) both; }

.hero__lead{
  color: var(--text-2); font-size: clamp(.95rem, 2.1vw, 1.08rem);
  max-width: 46ch; margin: 0 auto var(--sp-4);
  animation: up 1s .54s var(--ease) both;
}
.hero__lead em{ color: var(--gold-light); font-style: normal; }

.hero__cta{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  animation: up 1s .66s var(--ease) both;
}
.hero__strip{
  list-style:none; margin: var(--sp-4) 0 0; padding:0;
  display:flex; gap: var(--sp-3); justify-content:center; flex-wrap:wrap;
  font-size:.76rem; letter-spacing:.06em; color: var(--text-3);
  animation: up 1s .78s var(--ease) both;
}
.hero__strip li{ display:flex; align-items:center; gap:8px; }
.hero__strip svg{ width:15px; height:15px; color: var(--gold); flex:none; }

.hero__scroll{
  position:absolute; bottom: 26px; left:50%; transform:translateX(-50%);
  width:1px; height:52px; background: linear-gradient(to bottom, transparent, rgba(231,200,122,.5));
  overflow:hidden;
}
.hero__scroll span{
  position:absolute; top:0; left:0; width:100%; height:16px; background: var(--gold-light);
  animation: scrollDot 2.4s var(--ease) infinite;
}

@keyframes up{ from{ opacity:0; transform: translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes emblemIn{ from{ opacity:0; transform: scale(.82) rotate(-14deg); } to{ opacity:.95; transform:none; } }
@keyframes scrollDot{ 0%{ top:-16px; } 60%,100%{ top:52px; } }

/* ============================================================
   HISTORIA
   ============================================================ */
.historia{ background: linear-gradient(to bottom, var(--bg), var(--bg-2)); }
.historia__grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--sp-4), 6vw, var(--sp-6));
  align-items:center;
}
.historia__copy p{ color: var(--text-2); max-width: 52ch; }

.stats{ display:flex; gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap:wrap; }
.stats div{ display:flex; flex-direction:column; }
.stats strong{
  font-family: var(--f-display); font-size: 2.4rem; font-weight:500; line-height:1;
  color: var(--gold-light);
}
.stats span{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color: var(--text-3); margin-top:8px; }

.art-frame{
  position:relative; border:1px solid var(--border); border-radius: var(--r-lg);
  overflow:hidden; background: var(--surface);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.art-frame::after{
  content:""; position:absolute; inset:10px; border:1px solid rgba(231,200,122,.16);
  border-radius: calc(var(--r-lg) - 8px); pointer-events:none;
}
.art-frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 1; }
.art-frame--tall img{ aspect-ratio: 4/5; }

/* ============================================================
   MENÚ
   ============================================================ */
.menu{ background: var(--bg-2); }

.tabs{
  display:flex; gap:10px; overflow-x:auto; padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-4); scrollbar-width:none;
  position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top)); z-index: 40;
  background: linear-gradient(to bottom, var(--bg-2) 72%, transparent);
  padding-top: var(--sp-2);
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:none; min-height:44px; padding: 0 22px; border-radius: var(--r-full);
  border:1px solid var(--border); background: rgba(255,255,255,.02); color: var(--text-2);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.tab:hover{ color: var(--text); border-color: rgba(231,200,122,.45); }
.tab[aria-selected="true"]{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  color:#120D04; border-color: transparent;
}

.panel[hidden]{ display:none; }

.panel__head{
  display:flex; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom:1px solid var(--border-soft);
}
.panel__emblem{
  width:78px; height:78px; border-radius:50%; object-fit:cover; flex:none;
  mix-blend-mode: screen; filter: drop-shadow(0 0 22px rgba(201,162,39,.25));
}
.panel__title{ font-family: var(--f-display); font-size:2rem; font-weight:500; margin:0; line-height:1.1; }
.panel__lema{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color: var(--gold); margin:0 0 4px; }

.group{ margin-bottom: var(--sp-5); }
.group__title{
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gold);
  margin: 0 0 var(--sp-1); font-weight:600;
}
.group__nota{ font-family: var(--f-display); font-style:italic; color: var(--text-3); margin:0 0 var(--sp-3); font-size:1.05rem; }
.group__title + .dishes{ margin-top: var(--sp-3); }

.dishes{ display:grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; list-style:none; margin:0; padding:0; }

.dish{
  display:flex; align-items:flex-start; gap: var(--sp-2);
  padding: 20px; border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border:1px solid var(--border-soft);
  transition: border-color .28s var(--ease), transform .28s var(--ease), background .28s var(--ease);
}
.dish:hover{ border-color: var(--border); transform: translateY(-3px); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.dish--star{ border-color: rgba(201,162,39,.4); }

.dish__main{ flex:1; min-width:0; }
.dish__row{ display:flex; align-items:baseline; gap:10px; }
.dish__name{ font-family: var(--f-display); font-size:1.28rem; font-weight:600; line-height:1.2; margin:0; flex:0 1 auto; }
.dish__dots{ flex:1 1 20px; border-bottom:1px dotted rgba(245,241,232,.2); min-width:14px; transform: translateY(-4px); }
.dish__price{ font-size:.95rem; font-weight:600; color: var(--gold-light); white-space:nowrap; letter-spacing:.02em; }
.dish__desc{ font-size:.82rem; color: var(--text-3); margin: 8px 0 0; line-height:1.55; }
.dish__tag{
  display:inline-block; margin-top:10px; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--gold); border:1px solid var(--border); border-radius: var(--r-full); padding:4px 10px;
}

.add{
  flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border); background: rgba(231,200,122,.06); color: var(--gold-light);
  transition: background .22s var(--ease), transform .22s var(--ease), color .22s var(--ease);
}
.add svg{ width:18px; height:18px; }
.add:hover{ background: var(--gold); color:#120D04; transform: scale(1.08); }
.add.is-added{ background: var(--verde); border-color: var(--verde); color:#fff; }

/* ============================================================
   EXPERIENCIA
   ============================================================ */
.exp{ background: linear-gradient(to bottom, var(--bg-2), var(--bg)); }
.exp__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--sp-3); }
.exp__card{
  padding: var(--sp-4) var(--sp-3); border-radius: var(--r-lg);
  border:1px solid var(--border-soft); background: linear-gradient(165deg, var(--surface), var(--bg-2));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.exp__card:hover{ border-color: var(--border); transform: translateY(-4px); }
.exp__card svg{ width:34px; height:34px; color: var(--gold); margin-bottom: var(--sp-2); }
.exp__card h3{ font-family: var(--f-display); font-size:1.6rem; font-weight:600; margin:0 0 10px; }
.exp__card p{ color: var(--text-2); font-size:.92rem; margin:0 0 var(--sp-2); }

/* ============================================================
   VISÍTANOS
   ============================================================ */
.visita__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--sp-4), 6vw, var(--sp-6)); align-items:center; }
.info{ margin: 0 0 var(--sp-4); }
.info > div{ padding: var(--sp-2) 0; border-top:1px solid var(--border-soft); display:grid; grid-template-columns: 130px 1fr; gap: var(--sp-2); }
.info dt{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); padding-top:4px; }
.info dd{ margin:0; color: var(--text-2); }
.info dd a{ color: var(--gold-light); text-decoration:none; border-bottom:1px solid rgba(231,200,122,.3); }
.visita__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--border); padding: var(--sp-5) 0 calc(var(--sp-4) + env(safe-area-inset-bottom)); background: var(--bg); }
.foot__inner{ display:grid; grid-template-columns: 1fr auto; gap: var(--sp-3) var(--sp-4); align-items:start; }
.brand__name--foot{ font-size:2rem; }
.foot__tag{ color: var(--text-3); font-size:.82rem; margin:6px 0 0; }
.foot__links{ display:flex; gap: var(--sp-3); }
.foot__links a{ text-decoration:none; color: var(--text-2); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.foot__links a:hover{ color: var(--gold-light); }
.foot__legal{ grid-column: 1 / -1; color: var(--text-3); font-size:.72rem; margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top:1px solid var(--border-soft); }

/* ============================================================
   CARRITO
   ============================================================ */
.cart-fab{
  position: fixed; z-index: 80;
  left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  padding: 0 12px 0 20px; min-height:54px; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 58%, var(--gold-deep));
  color:#120D04; border:none; font-size:.82rem; font-weight:700; letter-spacing:.06em;
  box-shadow: 0 14px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(231,200,122,.4);
  animation: fabIn .4s var(--ease) both;
}
.cart-fab svg{ width:20px; height:20px; }
.cart-fab__total{ background: rgba(0,0,0,.22); border-radius: var(--r-full); padding: 7px 14px; font-weight:700; }
@keyframes fabIn{ from{ opacity:0; transform: translate(-50%, 28px); } to{ opacity:1; transform: translateX(-50%); } }

.drawer-scrim{
  position:fixed; inset:0; z-index:99; background: rgba(4,3,2,.72);
  backdrop-filter: blur(4px); animation: fade .3s var(--ease) both;
}
@keyframes fade{ from{opacity:0}to{opacity:1} }

.drawer{
  position:fixed; z-index:100; top:0; right:0; height:100dvh;
  width: min(440px, 100%); display:flex; flex-direction:column;
  background: var(--bg-2); border-left:1px solid var(--border);
  box-shadow: -30px 0 90px rgba(0,0,0,.7);
  animation: slideIn .35s var(--ease) both;
  padding-top: env(safe-area-inset-top);
}
@keyframes slideIn{ from{ transform: translateX(100%); } to{ transform:none; } }

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--sp-3); border-bottom:1px solid var(--border-soft); flex:none;
}
.drawer__head h2{ font-family: var(--f-display); font-size:1.7rem; font-weight:600; margin:0; }
.drawer__close{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--border-soft); background:none; color: var(--text-2);
}
.drawer__close:hover{ color: var(--gold-light); border-color: var(--border); }
.drawer__close svg{ width:18px; height:18px; }

.drawer__body{ flex:1; overflow-y:auto; overflow-x:hidden; padding: var(--sp-3); }

.cart-form{ margin-top: var(--sp-4); padding-top: var(--sp-3); border-top:1px solid var(--border-soft); }
.cart-form__title{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold);
  margin:0 0 var(--sp-2); font-weight:600;
}
.cart-form__row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 420px){ .cart-form__row{ grid-template-columns: 1fr; } }
.cart-empty{ color: var(--text-3); text-align:center; padding: var(--sp-5) 0; line-height:2; }
.cart-empty a{ color: var(--gold-light); }

.cart-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cart-item{
  display:grid; grid-template-columns: 1fr auto; gap:10px 12px;
  padding: 14px; border-radius: var(--r-md); border:1px solid var(--border-soft); background: var(--surface);
  overflow: hidden;
}
.cart-item > div{ min-width: 0; }
.cart-item__name{ font-family: var(--f-display); font-size:1.12rem; font-weight:600; line-height:1.25; margin:0; }
.cart-item__price{ font-size:.8rem; color: var(--text-3); margin:3px 0 0; }
.cart-item__line{ font-size:.92rem; font-weight:600; color: var(--gold-light); align-self:center; white-space:nowrap; }
.qty{ grid-column:1 / -1; display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap; }
.qty button{
  width:36px; height:36px; border-radius: var(--r-sm); border:1px solid var(--border-soft);
  background: rgba(255,255,255,.03); color: var(--text-2); display:grid; place-items:center; font-size:1.1rem; line-height:1;
}
.qty button:hover{ color: var(--gold-light); border-color: var(--border); }
.qty output{ min-width:38px; text-align:center; font-weight:600; font-size:.95rem; }
.qty .rm{ width:auto; height:auto; margin-left:auto; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-3); background:none; border:none; padding:8px; }
.qty .rm:hover{ color:#E27373; }

.drawer__foot{ flex:none; padding: var(--sp-3); border-top:1px solid var(--border-soft); background: var(--surface); }
.field{ display:block; margin-bottom:12px; }
.field span{ display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--text-3); margin-bottom:6px; }
.field input, .field select{
  width:100%; min-height:46px; padding:0 14px; border-radius: var(--r-sm);
  border:1px solid var(--border-soft); background: var(--bg); color: var(--text);
  font-family: var(--f-ui); font-size:.95rem;
}
.field input:focus, .field select:focus{ border-color: var(--gold); outline:none; }
.field input::placeholder{ color: var(--text-3); }

.total{ display:flex; justify-content:space-between; align-items:baseline; margin: var(--sp-2) 0; padding-top: var(--sp-2); border-top:1px solid var(--border-soft); }
.total span{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--text-3); }
.total strong{ font-family: var(--f-display); font-size:1.9rem; font-weight:600; color: var(--gold-light); }
.drawer__note{ font-size:.7rem; color: var(--text-3); margin: 10px 0 0; line-height:1.5; text-align:center; }

.toast{
  position:fixed; z-index:120; left:50%; bottom: calc(90px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  background: var(--surface-2); color: var(--text); border:1px solid var(--border);
  padding: 12px 20px; border-radius: var(--r-full); font-size:.85rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-on{ opacity:1; transform: translate(-50%, 0); }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  .historia__grid, .visita__grid{ grid-template-columns: 1fr; }
  .historia__art, .visita__art{ order:-1; max-width: 460px; }
  .dishes{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .nav__links, .nav__wa{ display:none; }
  .burger{ display:flex; }
  .nav.is-open .nav__mobile{ display:flex; }
  .hero__strip{ flex-direction:column; align-items:center; gap:10px; }
  .foot__inner{ grid-template-columns: 1fr; }
  .panel__emblem{ width:60px; height:60px; }
  .panel__title{ font-size:1.6rem; }
  .info > div{ grid-template-columns: 1fr; gap:4px; }
  .stats{ gap: var(--sp-3); }
  .stats strong{ font-size:1.9rem; }
  .btn{ width:100%; }
  .hero__cta .btn{ width:auto; flex:1 1 200px; }
  .drawer{ width:100%; }
}

@media (max-width: 420px){
  .brand__mark{ width:34px; height:34px; }
  .brand__sub{ font-size:.5rem; letter-spacing:.2em; }
  .nav__inner{ gap: var(--sp-2); }
  .brand__name{ font-size:1.25rem; }
  .dish{ padding:16px; }
  .dish__name{ font-size:1.15rem; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__scroll{ display:none; }
}


/* ============================================================
   HOTEL
   ============================================================ */
.hotel{ background: linear-gradient(to bottom, var(--bg), var(--bg-2)); }

.perks{
  list-style:none; margin: var(--sp-3) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.perks li{
  display:flex; align-items:center; gap:9px;
  padding: 9px 16px; border-radius: var(--r-full);
  border:1px solid var(--border); background: rgba(231,200,122,.05);
  font-size:.76rem; letter-spacing:.06em; color: var(--text-2);
}
.perks svg{ width:16px; height:16px; color: var(--gold); flex:none; }

/* ---------- Carrusel ---------- */
.carousel{ position:relative; margin-inline: calc(var(--sp-3) * -1); padding-inline: var(--sp-3); }

.carousel__nav{
  position:absolute; top:38%; transform: translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(10,8,6,.72); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--border); color: var(--gold-light);
  opacity:0; transition: opacity .3s var(--ease), background .2s var(--ease);
}
.carousel:hover .carousel__nav{ opacity:1; }
.carousel__nav:focus-visible{ opacity:1; }
.carousel__nav:hover{ background: rgba(201,162,39,.9); color:#120D04; }
.carousel__nav:disabled{ opacity:0 !important; pointer-events:none; }
.carousel__nav svg{ width:20px; height:20px; }
.carousel__nav--prev{ left:4px; }
.carousel__nav--next{ right:4px; }

.rooms{
  display:flex; gap: var(--sp-3);
  overflow-x:auto; padding: 4px 0 var(--sp-3);
  scroll-snap-type: x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rooms::-webkit-scrollbar{ display:none; }

/* ---------- Tarjeta de habitación ---------- */
.room{
  flex:0 0 300px; scroll-snap-align:start;
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
  border-radius: var(--r-lg); border:1px solid var(--border-soft);
  background: linear-gradient(165deg, var(--surface), var(--bg-2));
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.room:hover{
  transform: translateY(-8px);
  border-color: var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

.room__media{ position:relative; height:190px; overflow:hidden; background: var(--bg); }
.room__media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease);
}
.room:hover .room__media img{ transform: scale(1.09); }
.room__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom, transparent 55%, rgba(10,8,6,.55));
}

.room__body{ padding: 20px; display:flex; flex-direction:column; flex:1; }
.room__lema{
  display:flex; align-items:center; gap:8px;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--text-3); margin:0 0 8px;
}
.room__num{
  font-family: var(--f-display); font-size:.9rem; letter-spacing:0;
  color: var(--gold); font-weight:600;
}
.room__name{ font-family: var(--f-display); font-size:1.6rem; font-weight:600; margin:0 0 8px; line-height:1.15; color: var(--text); }
.room__desc{ color: var(--text-2); font-size:.84rem; margin:0 0 var(--sp-2); line-height:1.55; }

.room__foot{
  margin-top:auto; padding-top: var(--sp-2); border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.room__cap{ font-size:.7rem; letter-spacing:.1em; color: var(--text-3); }
.room__arrow{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background: rgba(231,200,122,.08); color: var(--gold-light);
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.room__arrow svg{ width:16px; height:16px; }
.room:hover .room__arrow{
  transform: rotate(-45deg);
  background: var(--gold); color:#120D04;
}

.hotel__note{
  color: var(--text-3); font-size:.82rem; text-align:center;
  max-width: 58ch; margin: var(--sp-3) auto 0; line-height:1.7;
}
.hotel__cta{ display:flex; justify-content:center; margin-top: var(--sp-3); }
.hotel__cta .btn{ min-width: 280px; }

/* ============================================================
   SELECTOR: MENÚ DE COMIDAS / CARTA DE BAR
   ============================================================ */
.switch{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
  max-width: 620px; margin: 0 0 var(--sp-4);
}
.switch__opt{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding: 18px 20px; border-radius: var(--r-md); text-align:left;
  border:1px solid var(--border-soft); background: rgba(255,255,255,.02);
  color: var(--text-2);
  transition: border-color .28s var(--ease), background .28s var(--ease),
              color .28s var(--ease), transform .2s var(--ease);
}
.switch__opt:hover{ transform: translateY(-2px); border-color: var(--border); color: var(--text); }
.switch__opt svg{ width:22px; height:22px; color: var(--gold); margin-bottom:4px; }
.switch__label{ font-family: var(--f-display); font-size:1.35rem; font-weight:600; line-height:1.1; }
.switch__sub{ font-size:.68rem; letter-spacing:.1em; color: var(--text-3); }

.switch__opt[aria-selected="true"]{
  background: linear-gradient(150deg, rgba(201,162,39,.16), rgba(201,162,39,.04));
  border-color: var(--gold); color: var(--text);
}
.switch__opt[aria-selected="true"] .switch__sub{ color: var(--gold-light); }

.tab[hidden]{ display:none !important; }

/* ============================================================
   LANDING DE HABITACIÓN
   ============================================================ */
body.room-open > *:not(.room-view):not(.toast){ display:none !important; }
body.room-open{ overflow-x: clip; }

.room-view{ min-height:100svh; background: var(--bg); }

.room-view__bar{
  position: sticky; top:0; z-index:20;
  display:flex; align-items:center; gap: var(--sp-3);
  padding: 14px var(--sp-3);
  padding-top: calc(14px + env(safe-area-inset-top));
  background: rgba(10,8,6,.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom:1px solid var(--border);
}
.room-view__back{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding: 0 18px 0 12px; border-radius: var(--r-full);
  border:1px solid var(--border); background: rgba(255,255,255,.03);
  color: var(--gold-light);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.room-view__back:hover{ background: rgba(231,200,122,.12); border-color: var(--gold-light); }
.room-view__back svg{ width:18px; height:18px; }
.brand--view{ margin-left:auto; margin-right:0; }

.room-view__inner{
  width: min(1180px, 100% - 2 * var(--sp-3));
  margin-inline:auto;
  padding: var(--sp-4) 0 calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.rv{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(var(--sp-4), 5vw, var(--sp-5));
  align-items:start;
}

/* ---------- Galería ---------- */
.rv__gallery{
  position:relative; border-radius: var(--r-lg); overflow:hidden;
  border:1px solid var(--border); background: var(--surface);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  position: sticky; top: calc(var(--nav-h) + var(--sp-3));
}
.rv__track{
  display:flex; overflow-x:auto; scroll-snap-type: x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rv__track::-webkit-scrollbar{ display:none; }
.rv__slide{ flex:0 0 100%; margin:0; scroll-snap-align:center; }
.rv__slide img{ width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; }

.rv__nav{
  position:absolute; top:50%; transform: translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background: rgba(10,8,6,.7); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--border); color: var(--gold-light);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.rv__nav:hover{ background: var(--gold); color:#120D04; }
.rv__nav svg{ width:20px; height:20px; }
.rv__nav--prev{ left:12px; }
.rv__nav--next{ right:12px; }

.rv__dots{
  position:absolute; bottom:14px; left:50%; transform: translateX(-50%); z-index:3;
  display:flex; gap:8px; padding: 8px 12px; border-radius: var(--r-full);
  background: rgba(10,8,6,.6); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rv__dot{
  width:8px; height:8px; padding:0; border-radius:50%; border:none;
  background: rgba(245,241,232,.35); transition: background .25s var(--ease), width .25s var(--ease);
}
.rv__dot.is-on{ background: var(--gold); width:20px; border-radius: var(--r-full); }

.rv__counter{
  position:absolute; top:14px; right:14px; z-index:3;
  padding: 6px 12px; border-radius: var(--r-full);
  background: rgba(10,8,6,.65); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--border-soft);
  font-size:.7rem; letter-spacing:.1em; color: var(--text-2);
}

/* ---------- Info ---------- */
.rv__eyebrow{
  display:flex; align-items:center; gap:8px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold); margin:0 0 10px;
}
.rv__title{
  font-family: var(--f-display); font-weight:500;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height:1.05;
  margin:0 0 var(--sp-2); letter-spacing:-.01em;
}
.rv__lead{ color: var(--text-2); font-size:1rem; margin:0 0 var(--sp-3); max-width: 54ch; }

.rv__meta{ margin: 0 0 var(--sp-4); }
.rv__meta > div{
  display:grid; grid-template-columns: 120px 1fr; gap: var(--sp-2);
  padding: 13px 0; border-top:1px solid var(--border-soft);
}
.rv__meta dt{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gold); padding-top:3px; }
.rv__meta dd{ margin:0; color: var(--text-2); font-size:.9rem; }

.rv__sub{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold); margin: 0 0 var(--sp-2); font-weight:600;
}
.rv__servicios{
  list-style:none; margin:0 0 var(--sp-4); padding:0;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:10px;
}
.rv__servicios li{
  display:flex; align-items:center; gap:10px;
  font-size:.86rem; color: var(--text-2);
}
.rv__servicios svg{ width:15px; height:15px; color: var(--verde); flex:none; }

.rv__cta{ max-width: 420px; }
.rv__note{ font-size:.74rem; color: var(--text-3); margin: 12px 0 0; }

@media (max-width: 900px){
  .rv{ grid-template-columns: 1fr; }
  .rv__gallery{ position: relative; top: auto; }
  .rv__cta{ max-width:none; }
}

@media (max-width: 768px){
  .switch{ grid-template-columns: 1fr; max-width:none; }
  .switch__opt{ flex-direction:row; align-items:center; gap:14px; padding:16px 18px; }
  .switch__opt svg{ margin-bottom:0; }
  .switch__label{ font-size:1.2rem; }
  .switch__sub{ display:block; }
  .perks li{ font-size:.72rem; padding: 8px 13px; }
  .hotel__cta .btn{ width:100%; min-width:0; }
  .carousel__nav{ display:none; }
  .room{ flex-basis: 78vw; max-width: 320px; }
  .rv__meta > div{ grid-template-columns: 1fr; gap:4px; }
  .room-view__bar .brand__txt{ display:none; }
}

@media (max-width: 420px){
  .switch__opt{ flex-direction:column; align-items:flex-start; gap:6px; }
  .rv__servicios{ grid-template-columns: 1fr; }
}