/* ==========================================================================
   NATIVA — Ukhu Pacha, el mundo de adentro.
   Fogón y caldo: pizarra verde del logo, maíz amarillo y brasa. Titulares
   condensados y pesados como el trazo del pincel; texto en serif cálida.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #1b2221;          /* pizarra del logo, de noche */
  --bg-2: #232b2a;        /* pizarra del logo */
  --bg-3: #2e3836;
  --fg: #f1ead8;          /* masa de maíz */
  --fg-2: #bfbaa8;
  --fg-3: #858b81;
  --accent: #ebc934;      /* maíz amarillo */
  --on-accent: #1b2221;
  --ember: #e2683a;       /* brasa */
  --line: rgba(241, 234, 216, 0.13);
  --line-strong: rgba(241, 234, 216, 0.32);
  --field-bg: rgba(0, 0, 0, 0.22);
  --hover-bg: rgba(241, 234, 216, 0.04);
  --nav-bg: rgba(27, 34, 33, 0.86);
  --menu-bg: rgba(27, 34, 33, 0.97);
  --cursor-ring: rgba(241, 234, 216, 0.4);
  --open: #9fd36b;
  --danger: #f08b62;
  --btn-radius: 2px;

  --f-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --f-text: "Newsreader", Georgia, "Times New Roman", serif;
  --t-md: 1.125rem;
}

.cap { font-family: var(--f-display); font-variation-settings: "wdth" 75; text-transform: uppercase; }
h1, h2, h3 { font-weight: 760; font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: -0.005em; line-height: .9; }
.btn { font-family: var(--f-display); font-variation-settings: "wdth" 88; font-weight: 600; letter-spacing: .02em; }
.loader { background: var(--bg); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: 120px 80px; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(27,34,33,.9) 0%, rgba(27,34,33,.55) 38%, rgba(27,34,33,0) 62%);
}
.hero__wrap { position: relative; }
.hero__text { max-width: 640px; min-width: 0; display: grid; gap: 22px; justify-items: start; }
.hero__kicker { font-size: .9375rem; color: var(--accent); display: flex; align-items: center; gap: 12px; }
.hero__kicker::before { content: ""; width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); }
.hero__title { font-size: clamp(3.4rem, 8.6vw, 8.8rem); text-transform: uppercase; line-height: .84; }
.hero__title span { display: block; }
.hero__title span:last-child { color: var(--accent); }
.hero__lede { max-width: 42ch; color: var(--fg-2); font-size: 1.1875rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__hint { position: absolute; right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: 34px; font-size: .875rem; color: var(--fg-3); font-style: italic; transition: opacity .8s; }
.hero__hint.is-gone { opacity: 0; }
.hero__badge {
  position: absolute; right: max(var(--gutter), env(safe-area-inset-right, 0px)); top: calc(110px + env(safe-area-inset-top, 0px));
  display: grid; justify-items: center; align-content: center; width: 104px; height: 104px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--f-display); font-variation-settings: "wdth" 75; text-transform: uppercase; font-weight: 700; line-height: 1; font-size: 1.05rem;
  animation: spinSlow 30s linear infinite;
}
.hero__badge span + span { font-size: .72rem; letter-spacing: .14em; margin-top: 6px; font-weight: 500; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- manifiesto */
.manifesto { background: var(--bg); padding-block: 18vh 14vh; position: relative; }
.manifesto__wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.manifesto__big { grid-column: 1 / span 9; font-family: var(--f-text); font-style: italic; font-weight: 300; font-size: clamp(2.1rem, 5vw, 4.6rem); line-height: 1.08; text-wrap: balance; }
.manifesto__body { grid-column: 7 / span 5; color: var(--fg-2); margin-top: 4vh; max-width: 48ch; }

/* ---------------------------------------------------------------- recorrido */
.course { background: var(--bg-2); position: relative; }
.course__pin { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding-block: 12vh 6vh; gap: 5vh; }
.course__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 24px; align-items: end; }
.course__head h2 { grid-column: 1 / span 6; font-size: clamp(3rem, 7vw, 6.4rem); text-transform: uppercase; }
.course__head p { grid-column: 8 / span 5; color: var(--fg-2); max-width: 46ch; }
.course__bar { grid-column: 1 / -1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.course__bar span { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.course__viewport { overflow: hidden; }
.course__track {
  list-style: none; margin: 0;
  display: flex; gap: clamp(18px, 2.4vw, 40px); align-items: start;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  will-change: transform;
}
.is-pinned .course__track { overflow: visible; cursor: auto; scroll-snap-type: none; }
.dish { flex: 0 0 auto; width: clamp(290px, 33vw, 520px); display: grid; gap: 14px; scroll-snap-align: start; }
.dish .shot { aspect-ratio: 16 / 10; }
.dish__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.dish__n { font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.dish__region { font-size: .8125rem; color: var(--fg-3); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 12px; }
.dish h3 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); text-transform: uppercase; }
.dish p { color: var(--fg-2); font-size: 1.0625rem; max-width: 44ch; }

/* ---------------------------------------------------------------- territorio */
.land { background: var(--bg); padding-block: 16vh 14vh; }
.land__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: 6vh; }
.land__head h2 { grid-column: 1 / span 7; font-size: clamp(2.6rem, 6vw, 5.6rem); text-transform: uppercase; }
.land__head p { grid-column: 9 / span 4; color: var(--fg-2); }
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; cursor: pointer; text-align: left; padding: 18px 12px 18px 0; display: grid; gap: 4px; position: relative; color: var(--fg-3); transition: color .3s; }
.tab span { font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1; }
.tab small { font-size: .875rem; font-variant-numeric: tabular-nums; }
.tab::after { content: ""; position: absolute; left: 0; right: 12px; bottom: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.tab:hover { color: var(--fg-2); }
.tab[aria-selected="true"] { color: var(--fg); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.panel { padding-top: 34px; }
.ingr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.ingr li { display: grid; grid-template-columns: 9rem 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ingr b { font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 700; text-transform: uppercase; font-size: 1.5rem; color: var(--accent); line-height: 1; }
.ingr span { color: var(--fg-2); }
.panel.is-in .ingr li { animation: rise .7s var(--ease) both; }
.panel.is-in .ingr li:nth-child(2) { animation-delay: .06s; }
.panel.is-in .ingr li:nth-child(3) { animation-delay: .12s; }
.panel.is-in .ingr li:nth-child(4) { animation-delay: .18s; }
.panel.is-in .ingr li:nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------------------------------------------------------------- barra */
.bar { background: var(--bg-2); padding-block: 14vh; }
.bar__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.bar__img { margin: 0; }
.bar__img .shot { aspect-ratio: 5 / 6; }
.bar__img--a { grid-column: 1 / span 4; }
.bar__img--b { grid-column: 9 / span 4; margin-top: 18vh; }
.bar__text { grid-column: 5 / span 4; display: grid; gap: 20px; justify-items: start; padding-inline: 12px; }
.bar__text h2 { font-size: clamp(2.6rem, 5.4vw, 5rem); text-transform: uppercase; color: var(--accent); }
.bar__text p { color: var(--fg-2); }

/* ---------------------------------------------------------------- equipo */
.team { background: var(--bg); padding-block: 14vh; }
.team__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: 5vh; }
.team__head h2 { grid-column: 1 / span 7; font-size: clamp(2.6rem, 6vw, 5.4rem); text-transform: uppercase; }
.team__head p { grid-column: 9 / span 4; color: var(--fg-2); }
.team .rail__btn img { filter: grayscale(1) brightness(.85); }
.team .rail__btn:hover img, .team .rail__btn:focus-visible img { filter: none; }
.team figcaption::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--accent); transform: rotate(45deg) translateY(-2px); }

/* ---------------------------------------------------------------- chef */
.chef { background: var(--bg-2); padding-block: 14vh; }
.chef__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.chef__img { grid-column: 1 / span 6; margin: 0; overflow: hidden; }
.chef__img img { filter: grayscale(.35) contrast(1.05); }
.chef__text { grid-column: 8 / span 5; display: grid; gap: 22px; }
.chef__text h2 { font-size: clamp(2.8rem, 6vw, 5.6rem); text-transform: uppercase; }
.chef__text > p { color: var(--fg-2); }
.award { border: 1px solid var(--accent); padding: 22px 24px; display: grid; gap: 8px; }
.award__name { font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 800; font-size: 1.9rem; text-transform: uppercase; color: var(--accent); line-height: 1; }
.award p:last-child { color: var(--fg-2); font-size: 1rem; }
.link { justify-self: start; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

/* ---------------------------------------------------------------- visítanos */
.visit { background: var(--bg); padding-block: 14vh 8vh; }
.visit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.visit h2 { grid-column: 1 / span 4; font-size: clamp(2.6rem, 6vw, 5.4rem); text-transform: uppercase; }
.visit__facts { grid-column: 6 / span 7; margin: 0; border-top: 1px solid var(--line); }
.visit__facts > div { display: grid; grid-template-columns: 8rem 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.visit__facts dt { color: var(--fg-3); font-size: .9375rem; }
.visit__facts dd { margin: 0; color: var(--fg-2); }
.visit__facts a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.visit__facts a:hover { border-color: var(--accent); }
.visit__big { display: block; font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 800; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; margin-bottom: 6px; }

/* ---------------------------------------------------------------- reservar */
.reserve { background: var(--bg); padding-block: 8vh 14vh; }
.reserve__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.reserve__text { grid-column: 1 / span 4; display: grid; gap: 18px; position: sticky; top: 110px; }
.reserve__text h2 { font-size: clamp(2.6rem, 5.4vw, 5rem); text-transform: uppercase; }
.reserve__text > p:not(.form__hours) { color: var(--fg-2); }
.reserve__form { grid-column: 6 / span 7; background: var(--bg-2); padding: clamp(22px, 3.2vw, 46px); border-top: 3px solid var(--accent); }

/* ---------------------------------------------------------------- pie */
.foot { background: var(--bg); padding-block: 6vh calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot__word {
  font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 800; text-transform: uppercase;
  font-size: clamp(5rem, 25vw, 24rem); line-height: .8; text-align: center; margin-bottom: 6vh;
  color: transparent; -webkit-text-stroke: 1.5px rgba(235, 201, 52, .55);
}
.family__mark { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: .3; }
.family { margin-bottom: 8px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .manifesto__big, .manifesto__body { grid-column: 1 / -1; }
  .course__head h2, .course__head p { grid-column: 1 / -1; }
  .land__head h2, .land__head p { grid-column: 1 / -1; }
  .ingr { grid-template-columns: 1fr; }
  .bar__img--a { grid-column: 1 / span 6; }
  .bar__img--b { grid-column: 7 / span 6; margin-top: 0; }
  .bar__text { grid-column: 1 / -1; order: -1; padding: 0; }
  .team__head h2, .team__head p { grid-column: 1 / -1; }
  .chef__img, .chef__text { grid-column: 1 / -1; }
  .visit h2, .visit__facts { grid-column: 1 / -1; }
  .reserve__text { grid-column: 1 / -1; position: static; }
  .reserve__form { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hero { align-items: flex-end; padding-bottom: 48px; }
  .hero::before { background: linear-gradient(0deg, rgba(27,34,33,.95) 0%, rgba(27,34,33,.7) 45%, rgba(27,34,33,0) 75%); }
  .hero__badge { width: 78px; height: 78px; font-size: .85rem; top: calc(84px + env(safe-area-inset-top, 0px)); }
  .hero__hint { top: 34svh; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
  .hero__title { font-size: clamp(2.2rem, 10.5vw, 4.2rem); overflow-wrap: anywhere; }
  .course__track { flex-direction: column; gap: 48px; }
  .dish { width: 100%; }
  .tabs { grid-template-columns: 1fr; }
  .tab { padding: 14px 0; grid-template-columns: 1fr auto; align-items: baseline; }
  .ingr li { grid-template-columns: 1fr; gap: 6px; }
  .visit__facts > div { grid-template-columns: 1fr; gap: 6px; }
}