/* ══════════════════════════════════════════════════════════════════
   WINE SUPPLY — Sections: hero, chapters, carta, casas, whatsapp
══════════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 55% at 50% 118%, rgba(126, 36, 48, .34), transparent 60%),
    radial-gradient(ellipse 60% 40% at 78% -10%, rgba(90, 24, 154, .16), transparent 70%),
    var(--void);
}

.hero__sun {
  position: absolute;
  top: 12%;
  right: 7%;
  width: clamp(8rem, 16vw, 15rem);
  color: var(--gold);
  opacity: .07;
}

.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-top: var(--nav-h);
}

.hero__word {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.6rem, 14vw, 13rem);
  line-height: .92;
  padding-block: .16em .10em;
  letter-spacing: -.006em;
  user-select: none;
  white-space: nowrap;
}
.hero__word-inner { display: inline-block; }
.hero__word--back {
  top: 22%;
  z-index: 1;
  color: var(--cream);
}
.hero__word--front {
  bottom: 4%;
  z-index: 3;
  font-style: italic;
  font-weight: 400;
}
.hero__word--front .hero__word-inner {
  color: transparent;
  background: linear-gradient(105deg, var(--gold-bright) 15%, var(--crimson) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  /* expand the paint box so italic descenders/ascenders aren't clipped
     by background-clip:text with the tight line-height */
  padding: .18em .12em .22em;
  margin: -.18em -.12em -.22em;
}

.hero__bottle-wrap {
  position: relative;
  z-index: 2;
  margin-top: 2vh;
}
.hero__bottle .wine-photo,
.hero__bottle svg {
  height: min(52vh, 30rem);
  width: auto;
  margin-inline: auto;
}
.hero__bottle-glow {
  position: absolute;
  inset: -34% -70%;
  background: radial-gradient(ellipse 50% 42% at 50% 55%, rgba(178, 64, 76, .32), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.hero__bottle { position: relative; filter: drop-shadow(0 44px 54px rgba(0, 0, 0, .65)); }

.hero__tagline {
  position: absolute;
  z-index: 4;
  /* Antes ficava a 8.5% e caía DENTRO da caixa de "Supply". A palavra
     desceu para liberar o rótulo da garrafa, então a assinatura desce
     junto e passa a fechar a composição, embaixo de tudo. */
  bottom: -1.5%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.95rem, 1.6vw, 1.25rem);
  color: var(--cream-70);
  white-space: nowrap;
}


.hero__footer {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem var(--gutter) 1.7rem;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.hero__meta {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream-45);
  flex-wrap: wrap;
}
.hero__meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.hero__ctas { display: flex; gap: .8rem; flex-wrap: wrap; }

.hero__scroll {
  position: absolute;
  z-index: 5;
  bottom: 7.2rem;
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: var(--cream-45);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero__scroll svg { width: 14px; animation: scrollNudge 2.2s ease-in-out infinite; }
@keyframes scrollNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* A página aparece de uma vez. Antes levava 2,25s para se montar em cinco
   tempos — a mesma pretensão que foi cortada da animação de rolagem. */
.hero__stage, .hero__footer { animation: heroFade .4s ease backwards; }
@keyframes heroFade { from { opacity: 0; } }

/* ── SECTION HEADERS ──────────────────────────────────── */
.section-head {
  padding: clamp(4rem, 9vw, 7.5rem) var(--gutter) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  gap: .9rem;
  max-width: 1400px;
  margin: 0 auto;
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  line-height: 1.16;
  letter-spacing: -.006em;
  text-wrap: balance;
  hyphens: none;
}
.section-head__title em { font-style: italic; color: var(--gold-bright); }
.section-head__sub { color: var(--cream-70); max-width: 52ch; }

/* ── CHAPTERS (featured wines) ───────────────────────── */
.chapters { position: relative; }

.chapter {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 4rem;
  background:
    radial-gradient(ellipse 75% 55% at var(--stage-x, 30%) 60%, var(--atmo-soft), transparent 62%),
    var(--void);
  border-top: 1px solid var(--line-soft);
}
.chapter[data-side="right"] { --stage-x: 70%; }

.chapter__numbg {
  position: absolute;
  top: 4%;
  left: -1%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(9rem, 26vw, 24rem);
  line-height: 1;
  -webkit-text-stroke: 1px rgba(239, 233, 221, .09);
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.chapter[data-side="right"] .chapter__numbg { left: auto; right: -1%; }

.chapter__inner {
  position: relative;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.chapter[data-side="right"] .chapter__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.chapter[data-side="right"] .chapter__stagewrap { order: 2; }

.chapter__head {
  position: absolute;
  top: calc(-1 * clamp(1rem, 3vh, 2.4rem));
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 3;
}
.chapter__index {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream-45);
}
.chapter__country {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--atmo);
}
.chapter__country svg { width: 1.1rem; }

.chapter__stagewrap { position: relative; }
.chapter__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(24rem, 62vh, 38rem);
}
.chapter__glow {
  position: absolute;
  inset: 8% -20%;
  background: radial-gradient(ellipse 46% 40% at 50% 60%, var(--atmo-glow), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}
.chapter__bottle {
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: filter .4s ease;
}
.chapter__bottle .wine-photo,
.chapter__bottle svg {
  height: clamp(19rem, 52vh, 30rem);
  width: auto;
  margin-inline: auto;
}
.chapter__bottle .float { filter: drop-shadow(0 50px 56px rgba(0, 0, 0, .68)); }
@media (hover: hover) and (pointer: fine) {
  .chapter__bottle:hover .float { filter: drop-shadow(0 50px 56px rgba(0,0,0,.68)) drop-shadow(0 0 44px var(--atmo-glow)); }
}
.chapter__shadow {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  height: 1.4rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.62), transparent 70%);
  z-index: 1;
}
.chapter__particles { position: absolute; inset: 0; pointer-events: none; }

.chapter__info { display: grid; gap: 1.15rem; align-content: center; position: relative; z-index: 2; }
.chapter__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cream-70);
}
.chapter__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 5.2vw, 4.3rem);
  line-height: 1.16;
  letter-spacing: -.006em;
  text-wrap: balance;
  hyphens: none;
  cursor: pointer;
  transition: color .3s;
}
.chapter__name:hover { color: var(--gold-bright); }
.chapter__desc { color: var(--cream-70); max-width: 44ch; }
.chapter__badges { display: flex; gap: .5rem; flex-wrap: wrap; }

.chapter__meta {
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.chapter__buy {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.chapter__price {
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--cream);
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1.06;
}
.chapter__detail-link {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-45);
  border-bottom: 1px solid var(--line);
  padding-bottom: .2rem;
  transition: color .25s, border-color .25s;
  justify-self: start;
  width: fit-content;
}
.chapter__detail-link:hover { color: var(--atmo); border-color: var(--atmo); }

/* ── Celular: Destaques viram STORY vertical ──────────── */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  /* snap suave só nos capítulos — o resto da página rola normal */

  .chapter {
    min-height: auto;
    padding-block: 3rem;
    padding: calc(var(--nav-h) + 1.1rem) var(--gutter) 1.6rem;
    display: grid;
    align-content: center;
  }
  .chapter__inner,
  .chapter[data-side="right"] .chapter__inner { grid-template-columns: 1fr; gap: .8rem; }
  .chapter[data-side="right"] .chapter__stagewrap { order: 0; }
  .chapter__head { position: static; margin-bottom: .6rem; }
  .chapter__stage { min-height: auto; padding: .2rem 0 .7rem; }
  .chapter__bottle .wine-photo,
  .chapter__bottle svg { height: clamp(11rem, 29vh, 16rem); }
  .chapter__numbg { font-size: clamp(7rem, 32vw, 11rem); top: 2%; }
  .chapter__meta { display: none; }
  .chapter__desc {
    font-size: .92rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .chapter__name { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .chapter__price { font-size: clamp(2.1rem, 8vw, 2.9rem); }
  .chapter__info { gap: .6rem; }
  .chapter__buy { gap: .9rem; }
  .chapter__head { margin-bottom: .4rem; }

  /* indicador de progresso, como stories */
  .story-dots {
    position: absolute;
    top: calc(var(--nav-h) + .5rem);
    left: var(--gutter);
    right: var(--gutter);
    display: flex;
    gap: .3rem;
    z-index: 4;
  }
  .story-dots__bar {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: rgba(239, 233, 221, .18);
    overflow: hidden;
  }
  .story-dots__bar.is-on { background: var(--atmo, var(--gold)); }
}

@media (min-width: 900px) {
  .story-dots { display: none; }
}

/* ── CARTA (full collection) ─────────────────────────── */
.carta { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter) 4rem; }

.cat-block { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.cat-block__head {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.cat-block__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
  -webkit-text-stroke: 1px var(--atmo, var(--cream-25));
  color: transparent;
}
.cat-block__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.16;
  text-wrap: balance;
  hyphens: none;
}
.cat-block__count {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream-45);
  white-space: nowrap;
}

.producer-block { padding: 1.6rem 0 .6rem; }
.producer-block__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--cream-70);
}
.producer-block__tagline {
  font-size: .82rem;
  color: var(--cream-45);
  max-width: 60ch;
  margin-top: .2rem;
}
.producer-block__wines { margin-top: 1.1rem; display: grid; }

/* Wine cards — editorial rows */
.wine-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  padding: 1.1rem clamp(.6rem, 1.5vw, 1.4rem);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 10px;
  position: relative;
  transition: background .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .wine-card:hover { background: linear-gradient(90deg, var(--atmo-soft, rgba(239, 233, 221,.03)), transparent 70%); }
}

.wine-card__bottle {
  min-width: 2.6rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .45s var(--ease-back);
}
.wine-card__bottle .wine-photo,
.wine-card__bottle svg {
  height: 5rem;
  width: auto;
}
@media (hover: hover) and (pointer: fine) {
  .wine-card:hover .wine-card__bottle { transform: translateY(-4px) rotate(-4deg) scale(1.06); }
}

.wine-card__body { display: grid; gap: .3rem; min-width: 0; }
.wine-card__toprow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wine-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.15;
  cursor: pointer;
  transition: color .25s;
}
.wine-card__name:hover { color: var(--gold-bright); }
.wine-card__name .vintage { font-style: italic; color: var(--atmo, var(--gold)); }
.wine-card__meta { font-size: .8rem; color: var(--cream-45); }

.wine-card__buy {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wine-card__price {
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--cream);
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  white-space: nowrap;
  line-height: 1.1;
}

@media (max-width: 760px) {
  .wine-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "bottle body"
      "bottle buy";
    row-gap: .8rem;
  }
  .wine-card__bottle { grid-area: bottle; width: 2.3rem; align-self: start; }
  .wine-card__body { grid-area: body; }
  .wine-card__buy { grid-area: buy; justify-content: flex-start; gap: .9rem; }
}

/* ── CASAS (producers rail) ──────────────────────────── */
.casas { border-top: 1px solid var(--line-soft); background: var(--bg); }
.casas__rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  /* Declarar só overflow-x já torna o eixo Y "auto" pela especificação.
     Medido: scrollHeight == clientHeight na trave (333 = 333). Um pixel de
     crescimento e a trilha vira um scroller vertical de 3px — e no iOS,
     quando o gesto engata num scroller interno, a PÁGINA não rola durante
     o gesto inteiro. Um swipe vertical inteiro seria engolido. */
  overflow-y: hidden;
  padding: .5rem var(--gutter) clamp(3rem, 6vw, 5rem);
  /* `mandatory` obriga o navegador a estar SEMPRE num ponto de snap: ele
     rolava 20px sozinho no carregamento, sem ninguém tocar, e comia a
     calha inteira. E cada flick terminava num solavanco de reposição. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.casa-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(16rem, 26vw, 21rem);
  display: grid;
  gap: .8rem;
  align-content: start;
  padding: 1.6rem 1.5rem 1.8rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface) 0%, transparent 80%);
  text-align: left;
  transition: border-color .35s, transform .35s var(--ease-out);
}
.casa-card:hover { border-color: rgba(192, 160, 99, .4); transform: translateY(-5px); }
.casa-card__founded {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t--1);
  color: var(--cream-45);
}
.casa-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.05;
}
.casa-card__tagline { font-size: .84rem; color: var(--cream-70); line-height: 1.5; }
.casa-card__count {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-45);
  margin-top: .3rem;
}

/* ── WHATSAPP ─────────────────────────────────────────── */
.ws-whatsapp {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 80% 70% at 85% 110%, rgba(37, 211, 102, .12), transparent 60%),
    var(--void);
}
.ws-whatsapp__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem;
  align-items: center;
}
.ws-whatsapp__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 7.5vw, 6rem);
  line-height: 1.16;
  letter-spacing: -.006em;
  text-wrap: balance;
  hyphens: none;
  margin: .8rem 0 1rem;
}
.ws-whatsapp__title em { font-style: italic; color: var(--whatsapp); }
.ws-whatsapp__sub { color: var(--cream-70); max-width: 40ch; margin-bottom: 1.8rem; }
.ws-whatsapp__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--whatsapp);
  color: #06130A;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border-radius: 99px;
  transition: transform .35s var(--ease-back), box-shadow .3s;
}
.ws-whatsapp__link:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(37,211,102,.32); }

.ws-whatsapp__qr-wrap { display: grid; gap: .8rem; justify-items: center; }
.ws-whatsapp__qr {
  padding: 1rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ws-whatsapp__qr img, .ws-whatsapp__qr canvas { border-radius: 4px; }
.ws-whatsapp__qr-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cream-45);
}
@media (max-width: 860px) {
  .ws-whatsapp__inner { grid-template-columns: 1fr; justify-items: start; }
  .ws-whatsapp__qr-wrap { justify-self: center; }
}

/* ── FOOTER ───────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line-soft);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 7rem;
  position: relative;
  overflow: hidden;
}
.footer__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 12rem);
  line-height: .92;
  padding-block: .16em .10em;
  letter-spacing: -.006em;
  -webkit-text-stroke: 1px rgba(239, 233, 221, .18);
  color: transparent;
  white-space: nowrap;
  user-select: none;
  transition: color 1.2s ease;
}
.footer:hover .footer__brand { color: rgba(239, 233, 221, .06); }
.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream-45);
}
.footer__meta { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-25); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 3rem;
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line-soft);
}
.footer__col { display: grid; gap: .5rem; align-content: start; }
.footer__col-title {
  font-size: var(--t--4);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cream-45);
  margin-bottom: .2rem;
}
.footer__link {
  font-size: .9rem;
  color: var(--cream-70);
  border-bottom: 1px solid var(--line);
  width: fit-content;
  padding-bottom: .12rem;
  transition: color .25s, border-color .25s;
}
.footer__link:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.footer__note { font-size: .84rem; color: var(--cream-45); line-height: 1.6; }
.footer__note--hi { color: var(--whatsapp); }

.footer__legal {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: .74rem;
  line-height: 1.7;
  color: var(--cream-45);
  max-width: 78ch;
}
.footer__legal strong { color: var(--cream-70); }
.footer__admin { border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.footer__admin:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

/* ══════════════════════════════════════════════════════
   PHONES — performance + composition
   No per-frame filters, no blend layers, native scrolling.
══════════════════════════════════════════════════════ */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  /* GPU killers off */
  .grain { display: none; }
  /* 50 infinite compositor animations rodavam para sempre no iPhone */
  /* o swipe no primeiro card não pode virar "voltar" do Safari */
  .casas__rail { overscroll-behavior-x: contain; }
  .hero__bottle-glow, .chapter__glow { filter: none; }
  .float { animation: none; }
  .hero__bottle { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5)); }
  .chapter__bottle .float,
  .chapter__bottle:hover .float { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }

  /* Hero composition for portrait */
  /* (o tamanho da palavra do herói é definido no bloco CELULAR no fim
      deste arquivo — 21vw dava 78,8px num aparelho de 375px) */
  .hero__bottle .wine-photo,
  .hero__bottle svg { height: min(44vh, 24rem); }
  .hero__scroll { display: none; }
  .hero__sun { top: 9%; right: -6%; }
  .hero__ctas { width: 100%; }
  .hero__ctas .add-btn,
  .hero__ctas .btn-ghost { flex: 1; justify-content: center; }

  /* Nada de content-visibility aqui: os blocos de produtor variam de 273px a
     3461px de altura. Reservar 420px para todos fazia a página inteira pular
     enquanto o dedo rolava — toques caíam no lugar errado. */

  /* story: sem parallax de scroll, o snap já dá o ritmo */
  /* A QR code is useless on the device that would scan it */
  .ws-whatsapp__qr-wrap { display: none; }
}

/* Celular: preço · quantidade · Adicionar na MESMA linha (como no notebook) */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  .chapter__buy,
  .wine-card__buy {
    flex-wrap: nowrap;
    align-items: center;
    gap: .55rem;
  }
  /* O botão nunca encolhe abaixo do próprio texto — quem cede é o resto. */
  .chapter__buy .add-btn,
  .wine-card__buy .add-btn {
    flex: 0 0 auto;
    min-width: max-content;
    padding-inline: .85rem;
    font-size: .72rem;
    letter-spacing: .04em;
  }
  .wine-card__buy .qty-ctrl { flex: 0 1 auto; }
  .wine-card__buy .qty-btn { width: 2.6rem; height: 2.6rem; }
  .wine-card__buy .qty-input { width: 1.8rem; }
  .wine-card__price { font-size: 1.15rem; }
  .chapter__price, .wine-card__price { flex: 0 0 auto; }
}

/* Comfortable tap targets on touch screens */
@media (pointer: coarse) {
  /* especificidade igual à das regras por seção, senão isto nunca aplica */
  .wine-card__buy .qty-btn,
  .chapter__buy .qty-btn,
  .ws-cart__item-controls .qty-btn,
  .qty-btn { width: 2.75rem; height: 2.75rem; }
  .qty-input { width: 2.6rem; }
  .ws-nav__btn { width: 2.85rem; height: 2.85rem; }
  .chapter__detail-link { padding: .5rem 0; }
}

/* ══════════════════════════════════════════════════════
   KITS
══════════════════════════════════════════════════════ */
.kits { border-top: 1px solid var(--line-soft); }
.kits__grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.2rem;
}
.kit {
  display: grid;
  gap: 1rem;
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192, 160, 99,.09), transparent 70%),
    linear-gradient(170deg, var(--surface), var(--void) 88%);
  transition: border-color .35s, transform .35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .kit:hover { border-color: rgba(192, 160, 99,.45); transform: translateY(-4px); }
}
.kit__bottles {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: .2rem;
  height: 9rem;
}
.kit__bottle { display: flex; align-items: flex-end; }
.kit__bottle img, .kit__bottle svg {
  height: 8.4rem;
  width: auto;
  max-width: none;
  /* Medido em produção: cada garrafa de kit tem 27px de LARGURA no celular.
     Um drop-shadow de 16px de desfoque nesse tamanho é um borrão que
     ninguém enxerga — mas o compositor rasteriza o desfoque a partir do
     canal alfa de cada imagem, 12 vezes, promovendo 12 camadas de GPU.
     Sombra proporcional ao objeto: 4px, não 16. */
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.6));
}
.kit__bottle:nth-child(2) img, .kit__bottle:nth-child(2) svg { height: 9rem; }

.kit__body { display: grid; gap: .5rem; }
.kit__count {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--whatsapp);
}
.kit__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.85rem;
  line-height: 1.05;
}
.kit__tagline { font-size: .88rem; color: var(--cream-70); line-height: 1.5; }
.kit__list {
  list-style: none;
  display: grid;
  gap: .2rem;
  margin: .3rem 0 .2rem;
  padding-left: .9rem;
  border-left: 1px solid var(--line);
}
.kit__list li { font-size: .82rem; color: var(--cream-45); }
.kit__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}
.kit__price { display: grid; gap: .1rem; }
.kit__was {
  font-size: .78rem;
  color: var(--cream-45);
  text-decoration: line-through;
}
.kit__now {
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--cream);
  font-size: 1.75rem;
  line-height: 1.08;
}
.kit__save { font-size: var(--t--3); font-weight: 600; color: var(--sage); }

@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  .kit__buy { flex-wrap: nowrap; }
  .kit__buy .add-btn { flex: 1 1 auto; min-width: 0; font-size: .72rem; padding-inline: .9rem; }
  .kit__bottles { height: 7.5rem; }
  .kit__bottle img, .kit__bottle svg { height: 7rem; }
  .kit__bottle:nth-child(2) img, .kit__bottle:nth-child(2) svg { height: 7.5rem; }
}


/* ══════════════════════════════════════════════════════
   AS QUATRO SEÇÕES SE ANUNCIAM DIFERENTE
   Antes: mesma altura, mesmo tamanho, mesma construção de
   frase quatro vezes. Isso é o que denuncia página gerada.
══════════════════════════════════════════════════════ */

/* Cada seção entra numa altura própria — a carta é a principal. */
.kits     { padding-block-start: clamp(3rem, 7vw, 5.5rem); }
.chapters { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }
#carta    { padding-block-start: clamp(6rem, 14vw, 11rem); }
.casas    { padding-block-start: clamp(2.5rem, 5vw, 4rem); }

.section-head { padding-block: 0 clamp(1.6rem, 3vw, 2.6rem); }

/* Um fio curto ancorado à esquerda abre a seção — luz por cima,
   sombra por baixo, como sulco gravado. É a assinatura da casa. */
.section-head::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  background: rgba(192, 160, 99, .34);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  margin-bottom: 1.5rem;
}

/* A CARTA é a página de rosto do catálogo: maior de todas. */
.section-head--carta { border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); }
.section-head--carta .section-head__title { font-size: clamp(3.4rem, 10vw, 7.5rem); }
.carta-head__count {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-45);
}

/* AS CASAS é apêndice: uma linha, escala de cabeça corrente. */
.section-head--casas::before { width: 1.4rem; }
.casas-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--cream-70);
  max-width: 30ch;
}

/* Sem itálico dourado repetido — ele fazia todo o trabalho emocional. */
.section-head__title em { font-style: italic; color: inherit; }

/* ══════════════════════════════════════════════════════
   COMO O VINHO CHEGA
   A maior omissão do site para quem compra no Ceará.
══════════════════════════════════════════════════════ */
.custodia {
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--bg);
}
.custodia__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 1.2rem;
}
.custodia__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.1;
  max-width: 18ch;
}
.custodia__lead {
  color: var(--cream-70);
  max-width: 54ch;
  line-height: 1.65;
}
.custodia__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.6rem 2.5rem;
  margin-top: .8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}
.custodia__list dt {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-45);
  margin-bottom: .45rem;
}
.custodia__list dd { color: var(--cream-70); line-height: 1.6; max-width: 34ch; }


/* ══════════════════════════════════════════════════════════════════
   CORREÇÃO ÓPTICA — texto claro sobre fundo escuro

   Medi os dois arquivos servidos pelo Google. Altura-x: EB Garamond
   .400em, Archivo .526em. O serif é 31,5% MENOR. Postos no mesmo corpo,
   parecem de escalas diferentes — é essa a sensação de "algo errado".

   E texto claro sobre escuro ENGORDA opticamente: o claro sangra sobre
   o escuro. Por isso o entreletras negativo dos títulos foi aliviado e
   o entreletras positivo das capitulares foi reduzido de .32em p/ .26em.
══════════════════════════════════════════════════════════════════ */

/* A página pinta em Georgia (altura-x .481) e depois salta para Garamond
   (.400): 20% de deslocamento em cada título, a cada visita nova.
   Esta métrica falsa faz a Georgia ocupar o espaço da Garamond. */
@font-face {
  font-family: 'Gara Fb';
  src: local('Iowan Old Style'), local('Georgia'), local('Times New Roman');
  size-adjust: 83%;        /* .400 ÷ .481 */
  ascent-override: 121%;
  descent-override: 36%;
  line-gap-override: 0%;
}

body { line-height: 1.65; letter-spacing: .006em; -moz-osx-font-smoothing: grayscale; }

/* .32em sobre fundo escuro esparrama; .26em segura a palavra junta */
.eyebrow, .chapter__index, .footer__col-title, .meter__label, .fact__k {
  letter-spacing: .26em;
  line-height: 1.5;               /* "SELEÇÃO" era decepado em 1 */
}
.badge, .stock, .footer__legal, .ws-cart__terms { letter-spacing: .02em; }

/* Garamond com menos de 1.15rem rende 6px de altura-x no escuro:
   ilegível. Abaixo disso, o corpo é do Archivo. */
.boost__name, .related-card__name, .casa-card__founded,
.ws-cart__item-name, .kit__item-name {
  font-family: var(--font-body);
  font-size: var(--t--1);
  letter-spacing: 0;
}

/* Onde o serif encosta no sem-serifa, ele precisa de ×1.315 p/ empatar */
.chapter__desc + .chapter__buy .chapter__price { font-size: 1em; }

/* Algarismos: Archivo tem tnum de verdade (686–698, plano).
   Garamond não tem lnum nem onum no arquivo servido — 3/5/7/9 mergulham. */
.qty-input, .cartbar__count, .cartbar__total, .ws-cart__item-subtotal,
.ws-cart__total-value, .price-range__labels, .rating__score {
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
}

/* Palavras longas do português quebram em vez de estourar a caixa */
.chapter__desc, .casa-card__tagline, .kit__tagline, .footer__note,
.wine-card__notes, .detail__desc {
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}

/* Creme sobre escuro parece mais pesado do que é: desce um degrau */
.btn-ghost, .chapter__index, .chapter__country, .chapter__detail-link,
.footer__col-title, .badge, .fact__k, .meter__label,
.ws-cart__total-label, .cat-block__count, .casa-card__count { font-weight: 600; }

/* O contorno de 1px some num corpo de 24rem — tem de ser relativo */
.ghost { font-weight: 400; -webkit-text-stroke-width: .012em; }

/* O itálico é o melhor ativo da Garamond e aparecia uma vez no site */
.wine-card__grapes, .chapter__country, .detail__region,
.casa-card__region { font-family: var(--font-display); font-style: italic;
  font-size: var(--t-0); letter-spacing: .01em; }

/* ══════════════════════════════════════════════════════════════════
   CELULAR — "muito zoom, parece perto demais da pessoa"

   Medido no aparelho, a 375px, antes: corpo 16px, nome do vinho 28,8px
   e PREÇO 33,6px. O preço era MAIOR que o nome. O número gritava mais
   alto que o rótulo — é isso que dá sensação de outdoor colado no rosto.

   A regra agora: nada de display passa de 1,6× o corpo no celular, e o
   preço fica sempre ABAIXO do nome. Quem manda na linha é o vinho.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {

  /* ── FLUIDEZ ──
     A barra de topo é FIXA. Com backdrop-filter, o iPhone reamostra e
     redesenha o desfoque a CADA QUADRO da rolagem — o custo aparece
     exatamente como "rolagem nada fluida". O fundo já era 78% opaco:
     pagava-se a conta inteira da GPU por 22% de transparência.
     Fora: sobe a opacidade e ninguém percebe a diferença. */
  .ws-nav.is-scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(14, 18, 17, .94);
    will-change: auto;
  }
  .filter-panel, .ws-cart-overlay, .detail__scrim {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .filter-panel    { background: rgba(20, 25, 23, .98); }
  .ws-cart-overlay { background: rgba(8, 10, 9, .82); }
  .detail__scrim   { background: rgba(8, 10, 9, .93); }

  /* ── ESCALA ──  corpo = 16px. Nada de display passa de 1,6×. */
  .hero__word          { font-size: clamp(3rem, 15.5vw, 4.6rem); }   /* era 78,8px */
  .section-head__title { font-size: clamp(1.8rem, 6.8vw, 2.25rem); } /* era 38,4px */
  .chapter__name       { font-size: clamp(1.5rem, 5.9vw, 1.9rem); }  /* era 28,8px */
  .chapter__price      { font-size: clamp(1.2rem, 4.6vw, 1.45rem); } /* era 33,6px */
  .cat-block__title    { font-size: clamp(1.5rem, 5.6vw, 1.85rem); } /* era 32px   */
  .kit__name           { font-size: clamp(1.4rem, 5.4vw, 1.75rem); } /* era 29,6px */
  .kit__now            { font-size: clamp(1.15rem, 4.4vw, 1.4rem); } /* era 32px   */
  .ws-whatsapp__title  { font-size: clamp(1.7rem, 6.4vw, 2.1rem); }
  .footer__brand       { font-size: clamp(2.4rem, 13vw, 4.2rem); }
  .detail__name        { font-size: clamp(1.45rem, 5.6vw, 1.9rem); }
  .detail__price       { font-size: clamp(1.5rem, 5.2vw, 1.8rem); }  /* momento da decisão */
  .wine-card__price    { font-size: 1.02rem; }
  .chapter__numbg      { font-size: clamp(5rem, 24vw, 8rem); opacity: .5; }

  /* O acento não cabe em .92 num corpo grande — no celular sobra menos
     espaço ainda, então a entrelinha sobe junto. */
  .hero__word, .footer__brand { line-height: 1.02; padding-block: .1em .08em; }

  /* Menos ar entre as coisas: mais vinho por tela, menos "zoom". */
  .chapter__desc  { font-size: .875rem; line-height: 1.55; }
  .chapter__info  { gap: .5rem; }
  .chapter__stage { padding: .1rem 0 .5rem; }
  .chapter__bottle .wine-photo,
  .chapter__bottle svg { height: clamp(9rem, 24vh, 13rem); }
}

/* ══════════════════════════════════════════════════════════════════
   A PLACA E O CHÃO

   A placa deixou de ter a proporção de uma garrafa (0,31) e passou a
   ter a de uma etiqueta (5:7). Dimensionada pela ALTURA, como estava,
   ela saía com 17px de largura na carta. Agora manda a LARGURA.
══════════════════════════════════════════════════════════════════ */
/* Dois objetos diferentes, duas regras:
   – a placa GRANDE (5:7) manda na largura, como uma etiqueta de papel
   – a MINIATURA (2:5) acompanha a altura das fotos vizinhas, como elas
   O :not() é necessário porque o height:auto!important da grande
   venceria qualquer altura da mini. */
.wine-plate:not(.wine-plate--mini) {
  height: auto !important;
  width: 100%;
  display: block;
  margin-inline: auto;
  /* papel tem espessura: filete duro perto, sombra macia longe */
  box-shadow: 0 2px 3px rgba(0,0,0,.5), 0 14px 26px rgba(0,0,0,.45);
}
.detail__bottle  .wine-plate:not(.wine-plate--mini) { width: min(19rem, 78%); }
.chapter__bottle .wine-plate:not(.wine-plate--mini) { width: min(15rem, 66%); }
.kit__bottle     .wine-plate:not(.wine-plate--mini) { width: 3.4rem; }
/* O herói normalmente traz foto, mas se o vinho em destaque for um dos
   32 sem foto, a placa entra aqui — sem isto ela ocuparia 100% da caixa. */
.hero__bottle    .wine-plate:not(.wine-plate--mini) { width: min(17rem, 62%); }

.wine-plate--mini {
  width: auto;
  display: block;
  margin-inline: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,.55), 0 6px 12px rgba(0,0,0,.4);
}
.wine-card__bottle    .wine-plate--mini { height: 5rem; }
.ws-cart__item-bottle .wine-plate--mini { height: 4.2rem; }
.related-card__bottle .wine-plate--mini { height: 3.2rem; }
.boost__bottle        .wine-plate--mini { height: 2.5rem; }
.kit__bottle          .wine-plate--mini { height: 8.4rem; }

/* ── O CHÃO ──
   Uma garrafa encontra a página com três coisas: uma mancha escura e
   APERTADA onde ela toca, uma poça larga e macia de sombra ambiente, e
   uma linha de luz na superfície. Antes havia um drop-shadow de 56px de
   desfoque (e o hover empilhava um SEGUNDO por cima), mais um blur(10px)
   aplicado a um gradiente que já era borrado — desfocar um gradiente é
   trabalho jogado fora. Tudo isto agora é gradiente: pinta uma vez na
   camada e não custa nada por quadro. */
.chapter__glow { filter: none; }

.chapter__bottle .float { filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); }
@media (hover: hover) and (pointer: fine) {
  .chapter__bottle:hover .float { filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); }
}

.chapter__shadow {
  bottom: 6%;
  width: 64%;
  height: 3.4rem;
  border-radius: 0;
  background:
    radial-gradient(ellipse 22% 42% at 50% 46%, rgba(0,0,0,.85), transparent 70%),
    radial-gradient(ellipse 60% 90% at 50% 50%, rgba(0,0,0,.5),  transparent 72%);
}
/* a superfície em que ela está apoiada */
.chapter__shadow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(239,233,221,.14) 22%, rgba(239,233,221,.14) 78%, transparent);
}
.detail__bottle { filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }


/* ── Retoques depois da revisão em produção (21/08) ────────────────
   Três coisas que a correção óptica quebrou, achadas medindo a página
   no ar e não olhando o código. ─────────────────────────────────── */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  /* "Vinho 01 — 03" quebrava em duas linhas: .26em de entreletras
     num rótulo de 11px estoura a coluna. */
  .chapter__index { letter-spacing: .16em; white-space: nowrap; font-size: .66rem; }

  /* Eu tinha mandado o país para o display em corpo 1rem — virou 16px
     e "Argentina · Mendoza" passou a ocupar duas linhas. É um rótulo,
     não um título: volta ao tamanho de rótulo, mantendo o itálico. */
  .chapter__country {
    font-size: .78rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .chapter__country svg { width: .85rem; }

  /* O "01" fantasma estava cortado 4px na margem esquerda: ficava com
     cara de erro, não de sangria proposital. */
  .chapter__numbg { left: .5rem; }
}


/* Dois títulos ficaram de fora da correção de acentuação: em 1.05 o Á
   (que sobe .838em) encontra o Ç (que desce .275em) da linha de cima. */
.kit__name, .casa-card__name {
  line-height: 1.16;
  text-wrap: balance;
  hyphens: none;
}


/* As fotos agora carregam width/height reais para reservar espaço antes
   de baixar. Isso faria o atributo mandar no tamanho — então aqui fica
   explícito que quem manda continua sendo o CSS, e a proporção é
   preservada pelos próprios atributos. */
.wine-photo { height: auto; }
.hero__bottle .wine-photo,
.chapter__bottle .wine-photo,
.detail__bottle .wine-photo,
.wine-card__bottle .wine-photo,
.ws-cart__item-bottle .wine-photo,
.related-card__bottle .wine-photo,
.boost__bottle .wine-photo,
.kit__bottle .wine-photo { width: auto; }


/* ══════════════════════════════════════════════════════════════════
   ALVOS DE TOQUE — medidos em 375px e 430px

   A Apple pede 44×44pt. Vários alvos ficavam abaixo, e dois deles por
   motivos que só aparecem medindo: o `flex-shrink` espremia os botões
   de quantidade de 44 para 36,4px, e o link "A história deste vinho"
   ficava a 8px do "Adicionar", cruzando com ele na horizontal.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {

  /* Parar de espremer: 44px declarados têm de valer 44px. */
  .wine-card__buy .qty-ctrl { flex: 0 0 auto; }

  /* Abaixo de 420px não cabem 44+44 de quantidade, o campo, o preço e o
     botão numa linha de 258px. O preço desce — ele é leitura, não alvo. */
  @media (max-width: 420px) {
    .wine-card__buy { flex-wrap: wrap; row-gap: .55rem; }
    .wine-card__price { flex: 1 0 100%; }
  }

  .cat-chip     { min-height: 44px; }
  .cookie__btn  { min-height: 44px; }
  #clearFilters { min-height: 44px; padding-block: .5rem; }
  .cartbar__cta { min-height: 44px; padding: .7rem 1.15rem; }

  /* Estava a 8px do "Adicionar" e cruzando com ele em 25px na horizontal:
     errar o botão para baixo abria a ficha. */
  .chapter__detail-link { min-height: 44px; margin-top: .75rem; }

  /* O nome do vinho tem 21,2px de altura e abre a ficha. Faixa de toque
     de 44px sem mexer no layout — sobram 27px até a linha de compra. */
  .wine-card__name { position: relative; }
  .wine-card__name::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }

  /* O aviso de cookies cobria 43% da tela, opaco, sem X de fechar. */
  .cookie { max-height: 58vh; overflow-y: auto; }
  .cookie__text { font-size: var(--t--2); }
}

/* A faixa do pedido continua interceptando o toque — isso PROTEGE o que
   está embaixo. O que mudou é que interceptar deixou de abrir o carrinho. */
.cartbar { cursor: default; }
.cartbar__cta { display: inline-flex; align-items: center; justify-content: center; }

/* Últimos alvos abaixo de 44px, medidos em produção em 375px.
   A logo merece atenção especial: ela é <a href="#cover">, e um toque
   nela rola a página inteira até o topo. Com a barra parada ela deixou
   de chegar debaixo do dedo, mas continua sendo um alvo de 33px. */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  .ws-nav__logo    { min-height: 44px; display: inline-flex; align-items: center; }
  .ws-cart__clear  { min-height: 44px; }

  /* Mesmo truque do nome na carta: faixa de toque de 44px sem mexer no
     layout. O ::after não muda a caixa do elemento, só a área que recebe
     o dedo — por isso a medição continua reportando a altura original. */
  .chapter__name { position: relative; }
  .chapter__name::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
}

/* No celular a trilha das casas é prateleira, não carrossel: navegação
   livre, sem snap nenhum. E o aviso de cookies para de encadear a rolagem
   para a página atrás quando o texto passa da altura em telas baixas. */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  .casas__rail { scroll-snap-type: none; overscroll-behavior-x: contain; }
  .cookie      { overscroll-behavior: contain; }
}


/* O sol do herói nasce enquanto você desce a primeira tela: parte de .07
   parado no topo e chega a .22 quando a garrafa sai de cena. É só opacidade
   e cor — não custa quadro, e no celular funciona sem depender de hover. */
.hero__sun {
  opacity: calc(.07 + var(--amanhecer, 0) * .15);
  transition: opacity .2s linear;
}
@media (prefers-reduced-motion: reduce) {
  .hero__sun { opacity: .07; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   PARA COMEÇAR — cinco garrafas avulsas antes dos kits

   O primeiro preço da página era R$330, de um kit, a 1,7 tela de
   rolagem. Quem chega de um story está em modo de descarte: uma porta
   cara é um motivo para sair. Aqui a entrada custa R$85.
══════════════════════════════════════════════════════════════════ */
.entrada {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 3vw, 2rem);
  border-top: 1px solid var(--line-soft);
}
.entrada__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter);
  margin-bottom: 1.1rem;
}
.entrada__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  line-height: 1.16;
  color: var(--cream);
}
.entrada__all {
  font-size: var(--t--3);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-45);
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.entrada__all:hover { color: var(--cream); }

.entrada__rail {
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .25rem var(--gutter) 1.2rem;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.entrada__card {
  flex: 0 0 8.4rem;
  display: grid;
  gap: .4rem;
  justify-items: center;
  padding: 1rem .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  text-align: center;
  transition: border-color .25s, background .25s;
}
.entrada__card:hover { border-color: var(--line); background: var(--surface-2); }
.entrada__card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.entrada__fig { height: 5.2rem; display: grid; place-items: center; }
.entrada__fig img { height: 5.2rem; width: auto; object-fit: contain; }
.entrada__fig .wine-plate--mini { height: 4.6rem; width: auto; }

.entrada__name {
  font-family: var(--font-display);
  font-size: .92rem;
  line-height: 1.25;
  color: var(--cream-70);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entrada__price {
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--cream);
}

/* O herói ocupava a tela inteira. Quem vem do Instagram já foi convencido
   a clicar — o herói estava reconvencendo. Cortado, a borda da primeira
   garrafa aparece, e é isso que dispara a rolagem. */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  .hero { min-height: 76svh; }
  .entrada__card { flex: 0 0 7.6rem; }
}

/* ══════════════════════════════════════════════════════════════════
   ORIENTAÇÃO — onde estou, para onde vou, como volto

   No celular a nav do topo tem ZERO links de seção: `.ws-nav__links` é
   display:none abaixo de 860px. Em 25 telas de página, os únicos alvos
   no topo eram logo, lupa e carrinho. Chegar em "Brancos" custava 18,5
   telas de rolagem — ou descobrir o painel escondido atrás da lupa.

   Três peças. Duas custam pixel negativo ou zero.
══════════════════════════════════════════════════════════════════ */

/* ── 1. Índice do herói: a porta ──────────────────────────
   Os três primeiros chips somam ~270px dos 335px úteis: cabem numa linha
   em qualquer iPhone. O quarto encosta na borda a 375px — e essa borda
   cortada é o que diz que a fileira rola. */
.hero__index {
  display: flex;
  gap: .3rem;
  margin-top: .8rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.hero__index::-webkit-scrollbar { display: none; }
.hero__index a {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  min-height: 36px;
  padding: .42rem .62rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 600;
  color: var(--cream-70);
  white-space: nowrap;
  box-sizing: border-box;
  transition: border-color .25s, color .25s;
}
/* Alvo de 44px sem gastar 44px de layout. */
.hero__index a::after { content: ''; position: absolute; inset: -4px 0; }
.hero__index a:hover { border-color: var(--cream-45); color: var(--cream); }
.hero__index a span { font-size: .64rem; font-weight: 700; opacity: .62; }

/* ── 2. Barra da carta: o mapa ────────────────────────────
   Vive só dentro de #carta — o pixel é pago onde a pessoa se perde.
   O body é overflow-x:clip com overflow-y:visible, que é a única
   combinação que NÃO cria contexto de rolagem: o sticky sobrevive. */
.carta-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: calc(var(--z-nav) - 10);
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem var(--gutter);
  margin-bottom: 1.2rem;
  background: rgba(14, 18, 17, .97);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carta-bar::-webkit-scrollbar { display: none; }

.carta-bar__chip,
.carta-bar__filtro {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  min-height: 36px;
  padding: .42rem .62rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: none;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 600;
  color: var(--cream-70);
  white-space: nowrap;
  box-sizing: border-box;
  transition: color .2s, background-color .2s, border-color .2s;
}
.carta-bar__chip::after,
.carta-bar__filtro::after { content: ''; position: absolute; inset: -4px 0; }
.carta-bar__chip[aria-current="true"] {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--void);
}
.carta-bar__n { font-size: .64rem; font-weight: 700; opacity: .62; }
.carta-bar__filtro { align-items: center; }
.carta-bar__filtro svg { width: 14px; height: 14px; }
.carta-bar__filtro[aria-expanded="true"] { color: var(--cream); border-color: var(--cream-45); }

/* O salto de âncora desconta nav (68) + barra (~51). */
.cat-block { scroll-margin-top: 119px; }

/* ── 3. Voltar ao topo: zero pixel de layout ──────────────── */
.to-top {
  position: fixed;
  right: .8rem;
  bottom: calc(.8rem + env(safe-area-inset-bottom));
  z-index: calc(var(--z-cart) - 11);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(14, 18, 17, .92);
  border: 1px solid var(--line);
  color: var(--cream-70);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  transition: color .2s, border-color .2s;
}
.to-top[hidden] { display: none; }
.to-top svg { width: 18px; height: 18px; }
.to-top:hover { color: var(--cream); border-color: var(--cream-45); }
/* A barra do pedido ocupa a faixa inteira: a pílula sobe em vez de brigar. */
body.tem-cartbar .to-top { bottom: calc(.8rem + 62px + env(safe-area-inset-bottom)); }

/* ── 4. O que abre ficha diz que abre ─────────────────────
   116 elementos abrem a ficha do vinho e nenhum se anunciava: o nome do
   vinho tinha a cor EXATA do texto do corpo, sem sublinhado, sem borda.
   Não era falta de contraste — era falta de convenção. */
.wine-card__name,
.chapter__name {
  text-decoration: underline;
  text-decoration-color: rgba(239, 233, 221, .34);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* A foto também abre a ficha, e media 42×80 — reprovada nos 44px. */
.wine-card__bottle { position: relative; }
.wine-card__bottle::after { content: ''; position: absolute; inset: -6px -12px; }

/* Links que se liam como legenda. O "Ver os 57" era o texto mais apagado
   da seção e a única porta dela para a carta. */
.entrada__all,
.chapter__detail-link { color: var(--cream-70); font-weight: 600; }
.footer__link {
  text-decoration: underline;
  text-decoration-color: rgba(239, 233, 221, .28);
  text-underline-offset: 3px;
  padding-block: .5rem;
}

/* ── 5. Kits em trilho ────────────────────────────────────
   Quatro cartões empilhados ocupavam 2,7 telas. Em trilho horizontal,
   o mesmo conteúdo cabe em meia tela — e o padrão já existe na página,
   na faixa "Para começar". */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 540px) {
  .kits__grid {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding: .25rem var(--gutter) 1.2rem;
    margin-inline: calc(var(--gutter) * -1);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .kits__grid::-webkit-scrollbar { display: none; }
  .kits__grid > * { flex: 0 0 min(78vw, 19rem); }
}