/* =========================================================================
   Bacco Sistemas
   Matizes da marca (ADR-007) mantidos: bordô #690B23 e ocre #945B1C.
   Fundo creme trocado por branco a pedido; acrescentadas versões vivas
   dos MESMOS matizes para dar saturação. Nenhum matiz estrangeiro.
   ========================================================================= */

:root {
  /* fundo */
  --branco:  #FFFFFF;
  --nuvem:   #F5F7FB;
  --nuvem-2: #EDF1F8;

  /* marca — ADR-007 */
  --bordo:   #690B23;
  --ocre:    #945B1C;
  --ocre-luz:#CF9440;
  --verde:   #2F6244;

  /* versões vivas dos mesmos matizes */
  --vinho:   #B3123D;
  --laranja: #E87722;
  --uva:     #7B2D8E;
  --verde-luz:#2FA36B;

  /* tinta */
  --tinta:   #1C1230;
  --tinta-2: #5A5170;
  --linha:   #E4E8F0;
  --linha-2: rgba(255,255,255,.24);
  --branco-fraco: rgba(255,255,255,.82);

  --grad: linear-gradient(135deg, #690B23 0%, #B3123D 48%, #E87722 100%);
  --grad-suave: linear-gradient(135deg, #FFF3E8 0%, #FFE9EF 100%);

  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --r:    18px;
  --r-sm: 12px;
  --r-lg: 28px;
  --sombra:    0 2px 4px rgba(28,18,48,.04), 0 12px 28px rgba(28,18,48,.07);
  --sombra-lg: 0 4px 8px rgba(28,18,48,.05), 0 24px 56px rgba(28,18,48,.12);

  --wrap: 1240px;
  --pad:  clamp(20px, 5vw, 56px);
  --rail: clamp(70px, 8vw, 120px);
  --ease: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; } /* height:auto obrigatório — ADR-007 */
a { color: inherit; }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--vinho); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700; }
.skip:focus { left: 0; top: 0; }

/* ---------- tipografia ---------- */
.d1, .d2, .d3 { font-weight: 800; letter-spacing: -.035em; line-height: 1.03; margin: 0; text-wrap: balance; }
.d1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); letter-spacing: -.04em; }
.d2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.d3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: -.025em; }

.lead { font-size: clamp(1.05rem, 1.35vw, 1.24rem); line-height: 1.6; color: var(--tinta-2); max-width: 56ch; margin: 0; }

.campo { font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* gradiente no texto, usado uma vez por página */
.viva {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- estrutura ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.bloco { padding-block: clamp(64px, 8vw, 116px); }
.grade-rail { display: grid; grid-template-columns: var(--rail) minmax(0,1fr); gap: 0 clamp(16px,3vw,40px); }
@media (max-width: 780px) { .grade-rail { grid-template-columns: 1fr; } }

/* ---------- botões: pílula ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 28px;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  text-decoration: none; border: 2px solid transparent; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--cheio { background: var(--laranja); color: #fff; box-shadow: 0 6px 18px rgba(232,119,34,.34); }
.btn--cheio:hover { background: #D46A17; box-shadow: 0 10px 26px rgba(232,119,34,.44); }
.btn--ocre  { background: var(--laranja); color: #fff; box-shadow: 0 6px 18px rgba(232,119,34,.34); }
.btn--ocre:hover { background: #D46A17; }
.btn--vazio { background: #fff; color: var(--tinta); border-color: var(--linha); box-shadow: var(--sombra); }
.btn--vazio:hover { border-color: var(--vinho); color: var(--vinho); }
.btn--claro { background: #fff; color: var(--vinho); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.btn--claro:hover { background: #FFF6F8; }
.btn--fantasma { background: transparent; color: #fff; border-color: var(--linha-2); }
.btn--fantasma:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn--sm { padding: 11px 20px; font-size: .86rem; }
.btn--lg { padding: 18px 34px; font-size: 1.02rem; }
.btn .ico { width: 19px; height: 19px; fill: currentColor; flex: none; }

/* ---------- cabeçalho ---------- */
.cabeca { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.cabeca__inner { display: flex; align-items: center; gap: clamp(10px,2vw,28px); min-height: 74px; min-width: 0; }
.cabeca__inner > * { min-width: 0; }

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.marca__glifo { width: 36px; height: 36px; flex: none; }
.marca__glifo .g-uva   { fill: var(--vinho); }
.marca__glifo .g-no    { fill: var(--laranja); }
.marca__glifo .g-traco { stroke: var(--vinho); }
.marca__nome { display: block; font-weight: 800; font-size: 1.24rem; line-height: 1; letter-spacing: -.035em; }
.marca__sub  { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--laranja); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: clamp(6px,1vw,14px); }
.nav a { white-space: nowrap; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--tinta-2); padding: 8px 12px; border-radius: 999px; transition: background .18s var(--ease), color .18s var(--ease); }
.nav a:hover { background: var(--nuvem); color: var(--tinta); }
.nav a[aria-current="page"] { color: var(--vinho); background: #FFF0F4; }

.hamb { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.hamb i { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--tinta); margin: 5px 0; transition: transform .25s var(--ease), opacity .2s; }
.cabeca.is-aberta .hamb i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabeca.is-aberta .hamb i:nth-child(2) { opacity: 0; }
.cabeca.is-aberta .hamb i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1400px) {
  .hamb { display: block; }
  .nav {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border-bottom: 1px solid var(--linha); padding: 14px var(--pad) 24px;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
  }
  .cabeca.is-aberta .nav { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 14px 16px; font-size: 1.02rem; }
  .cabeca__acao { display: none; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; background: var(--grad); color: #fff; padding-block: clamp(52px,7vw,104px) clamp(64px,9vw,128px); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(40px,6vw,90px);
  background: var(--branco);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: scaleX(1.6);
}
.hero .olho::before { background: var(--laranja); }
.hero__grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(320px,.94fr); gap: clamp(36px,5vw,72px); align-items: center; }
@media (max-width: 980px) { .hero__grade { grid-template-columns: 1fr; } }

.olho {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--vinho);
  font-size: .8rem; font-weight: 700; letter-spacing: -.01em;
  padding: 8px 16px; border-radius: 999px; box-shadow: var(--sombra);
  margin-bottom: clamp(18px,2.4vw,26px);
}
.hero .olho { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
.olho::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); flex: none; }
.olho--inv { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }

.hero .lead { margin-top: clamp(18px,2.2vw,26px); color: var(--branco-fraco); }
.hero .btn--cheio { background: #fff; color: var(--vinho); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.hero .btn--cheio:hover { background: #FFF6F8; }
.hero .btn--vazio { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); box-shadow: none; }
.hero .btn--vazio:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px,3.2vw,36px); }

/* --- cartão do lote --- */
.rotulo { color: var(--tinta); background: #fff; border-radius: var(--r-lg); box-shadow: var(--sombra-lg); padding: clamp(22px,2.6vw,32px); }
.rotulo__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rotulo__tipo { color: var(--tinta-2); font-weight: 600; }
.rotulo__topo .campo:first-child {
  background: #FFF0F4; color: var(--vinho); padding: 6px 13px; border-radius: 999px;
}
.rotulo__nome { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 20px 0 6px; }
.rotulo__cod { font-family: var(--mono); font-size: .78rem; color: var(--tinta-2); margin: 0 0 22px; }

.rotulo__dados { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 0; }
.rotulo__dado { background: var(--nuvem); border-radius: var(--r-sm); padding: 14px 16px; }
.rotulo__dado dt { color: var(--tinta-2); font-size: .72rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 6px; }
.rotulo__dado dd { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.rotulo__dado dd small { font-size: .66rem; font-weight: 700; color: var(--tinta-2); margin-left: 5px; letter-spacing: 0; }

.rotulo__trilho { margin-top: 20px; }
.rotulo__nos { display: flex; align-items: center; }
.rotulo__no { width: 13px; height: 13px; flex: none; border-radius: 50%; background: var(--nuvem-2); }
.rotulo__no.is-feito { background: var(--laranja); }
.rotulo__no.is-agora { background: var(--vinho); box-shadow: 0 0 0 5px rgba(179,18,61,.16); }
.rotulo__vao { flex: 1; height: 4px; background: var(--nuvem-2); }
.rotulo__vao.is-feito { background: var(--laranja); }
.rotulo__legenda { display: flex; justify-content: space-between; margin: 12px 0 0; color: var(--tinta-2); font-size: .74rem; font-weight: 600; }
.rotulo__aviso { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--linha); font-size: .8rem; line-height: 1.5; color: var(--tinta-2); }

/* =========================================================================
   CLIENTES
   ========================================================================= */
.clientes { background: var(--branco); }
.clientes__cabeca { padding-block: clamp(56px,7vw,96px) clamp(24px,3vw,38px); }

.registro { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.registro caption { text-align: left; color: var(--tinta-2); padding-bottom: 12px; font-weight: 600; }
.registro th { text-align: left; padding: 0 18px 8px 18px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.registro td { padding: 18px; background: var(--nuvem); vertical-align: middle; transition: background .2s var(--ease), transform .2s var(--ease); }
.registro td:first-child { border-radius: var(--r) 0 0 var(--r); }
.registro td:last-child  { border-radius: 0 var(--r) var(--r) 0; }
.registro tr:hover td { background: var(--nuvem-2); }

.registro__nome { font-weight: 800; font-size: 1.06rem; letter-spacing: -.025em; }
.registro__cel { width: 1%; white-space: nowrap; }
.registro__uf {
  display: inline-block; background: var(--vinho); color: #fff;
  font-family: var(--mono); font-weight: 700; font-size: .74rem;
  padding: 5px 11px; border-radius: 999px; line-height: 1;
}
.registro__local { color: var(--tinta-2); font-weight: 600; }
.registro__nota  { color: var(--tinta-2); font-size: .92rem; }
.registro a { color: var(--vinho); text-decoration: none; }
.registro a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .registro, .registro tbody, .registro tr, .registro td { display: block; width: 100%; }
  .registro thead { display: none; }
  .registro tr { margin-bottom: 10px; }
  .registro td { border-radius: 0 !important; padding: 4px 18px; }
  .registro td:first-child { border-radius: var(--r) var(--r) 0 0 !important; padding-top: 16px; }
  .registro td:last-child  { border-radius: 0 0 var(--r) var(--r) !important; padding-bottom: 16px; }
}

/* =========================================================================
   AS SEIS ETAPAS — a cor avança do mosto ao granada
   ========================================================================= */
.faixas__cabeca { padding-block: clamp(56px,7vw,100px) clamp(28px,3.4vw,44px); }
.faixas__cabeca .lead { margin-top: 18px; }

.faixa { transition: background .4s var(--ease); }
.faixa__inner { display: grid; grid-template-columns: var(--rail) minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(16px,3vw,40px); align-items: center; padding-block: clamp(30px,3.6vw,48px); }
@media (max-width: 900px) { .faixa__inner { grid-template-columns: 1fr; gap: 12px; padding-block: 28px; } }

.faixa__marca { display: flex; align-items: center; gap: 14px; }
.faixa__num { font-size: clamp(1.9rem,3.2vw,2.7rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; opacity: .34; transition: opacity .45s var(--ease); }
.faixa.is-vis .faixa__num { opacity: 1; }
.faixa__ponto { display: none; }

.faixa__nome { margin: 0 0 10px; }
.faixa__txt  { margin: 0; max-width: 48ch; }

.faixa__campos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.faixa__campos li { font-size: .8rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.5); }
.faixa__chip { display: inline-block; margin-left: 12px; vertical-align: middle; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }

.faixa--1 { background: #FFF6EC; color: var(--tinta); }
.faixa--2 { background: #FFE2C2; color: var(--tinta); }
.faixa--3 { background: var(--laranja); color: #fff; }
.faixa--4 { background: var(--vinho);   color: #fff; }
.faixa--5 { background: var(--bordo);   color: #fff; }
.faixa--6 { background: #3D0716;        color: #fff; }

.faixa--1 .faixa__txt, .faixa--2 .faixa__txt { color: var(--tinta-2); }
.faixa--3 .faixa__txt, .faixa--4 .faixa__txt,
.faixa--5 .faixa__txt, .faixa--6 .faixa__txt { color: var(--branco-fraco); }
.faixa--1 .faixa__campos li, .faixa--2 .faixa__campos li { background: rgba(255,255,255,.72); }
.faixa--3 .faixa__campos li, .faixa--4 .faixa__campos li,
.faixa--5 .faixa__campos li, .faixa--6 .faixa__campos li { background: rgba(255,255,255,.16); color: #fff; }

.faixa--1 .faixa__chip { background: var(--vinho); color: #fff; }
.faixa--6 .faixa__chip { background: var(--laranja); color: #fff; }

/* =========================================================================
   PRODUTOS
   ========================================================================= */
.produtos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-bottom: clamp(56px,7vw,100px); }
@media (max-width: 880px) { .produtos { grid-template-columns: 1fr; } }

.prod { border-radius: var(--r-lg); padding: clamp(28px,3.4vw,46px); display: flex; flex-direction: column; box-shadow: var(--sombra-lg); }
.prod--erp   { background: var(--grad); color: #fff; }
.prod--adega { background: linear-gradient(135deg, #2F1B5E 0%, #7B2D8E 55%, #B3123D 100%); color: #fff; }
.prod .campo { display: inline-block; align-self: flex-start; background: rgba(255,255,255,.18); padding: 7px 15px; border-radius: 999px; }
.prod__nome { font-size: clamp(2rem,3.4vw,2.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 18px 0 14px; }
.prod__txt { color: var(--branco-fraco); margin: 0 0 24px; max-width: 42ch; }
.prod__mods { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.prod__mods li { font-size: .82rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.16); }
.prod__cta { margin-top: auto; align-self: flex-start; }

/* =========================================================================
   DESTAQUE — reforma tributária
   ========================================================================= */
.destaque { background: var(--tinta); color: #fff; }
.destaque__inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(22px,4vw,52px); align-items: center; padding-block: clamp(40px,5vw,68px); }
@media (max-width: 880px) { .destaque__inner { grid-template-columns: 1fr; } }
.destaque h2 { font-size: clamp(1.5rem,2.7vw,2.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; margin: 14px 0 14px; max-width: 26ch; }
.destaque p { margin: 0; color: rgba(255,255,255,.76); max-width: 58ch; }

/* =========================================================================
   DIFERENCIAIS
   ========================================================================= */
.difs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; }
.dif { background: var(--nuvem); border-radius: var(--r); padding: clamp(24px,2.6vw,32px); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.dif:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.dif__marca { display: inline-block; background: #fff; color: var(--vinho); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.dif__nome { font-size: 1.16rem; font-weight: 800; letter-spacing: -.028em; line-height: 1.2; margin: 0 0 10px; }
.dif__txt { margin: 0; color: var(--tinta-2); font-size: .95rem; }

/* =========================================================================
   TELAS
   ========================================================================= */
.telas__grade { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(28px,4vw,56px); align-items: center; }
@media (max-width: 940px) { .telas__grade { grid-template-columns: 1fr; } }

.telas__lista { list-style: none; margin: 24px 0 28px; padding: 0; }
.telas__lista li { position: relative; padding: 9px 0 9px 32px; color: var(--tinta-2); }
.telas__lista li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--verde-luz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra-lg); transition: transform .22s var(--ease); }
.zoom:hover { transform: translateY(-3px); }
.telas__mini { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 12px; }
.telas__mini .zoom { border-radius: var(--r-sm); box-shadow: var(--sombra); }
.telas__nota { margin: 14px 0 0; color: var(--tinta-2); font-size: .82rem; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { display: grid; gap: 10px; }
.faq__item { background: var(--nuvem); border-radius: var(--r); overflow: hidden; }
.faq__item[open] { background: var(--nuvem-2); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 24px; font-weight: 700; font-size: 1.04rem; letter-spacing: -.022em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--vinho); }
.faq__item summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--vinho); display: grid; place-items: center;
  font-size: 1.24rem; font-weight: 700; line-height: 1;
  transition: transform .25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__resp { padding: 0 24px 22px; max-width: 74ch; color: var(--tinta-2); }
.faq__resp p { margin: 0; }

/* =========================================================================
   CTA + RODAPÉ
   ========================================================================= */
.cta { background: var(--grad); color: #fff; }
.cta .lead { color: var(--branco-fraco); }
.cta__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cta__contatos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 32px 0 0; padding: 0; font-weight: 600; }
.cta__contatos a { color: var(--branco-fraco); text-decoration: none; }
.cta__contatos a:hover { color: #fff; text-decoration: underline; }

.rodape { background: var(--tinta); color: #fff; padding-block: clamp(44px,5vw,72px) clamp(26px,3vw,40px); }
.contra { }
.contra__topo { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.14); }
.contra__topo .marca__glifo .g-uva   { fill: #fff; }
.contra__topo .marca__glifo .g-no    { fill: var(--laranja); }
.contra__topo .marca__glifo .g-traco { stroke: #fff; }
.contra__topo .campo { color: rgba(255,255,255,.6); }

.contra__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 28px; padding-block: 30px; }
.contra__col h2 { margin: 0 0 14px; color: var(--laranja); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.contra__col a, .contra__col p { display: block; margin: 0 0 10px; text-decoration: none; color: rgba(255,255,255,.72); }
.contra__col a:hover { color: #fff; }

.contra__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: .84rem; color: rgba(255,255,255,.55); }

/* =========================================================================
   ARTIGO
   ========================================================================= */
.artigo { padding-block: clamp(40px,5vw,76px) clamp(56px,7vw,104px); }
.artigo__cabeca { padding-block: 0 clamp(28px,3.4vw,44px); }
.artigo__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.artigo__meta li { background: var(--nuvem); color: var(--tinta-2); padding: 7px 14px; border-radius: 999px; }
.artigo__meta li:first-child { background: #FFF0F4; color: var(--vinho); }
.artigo__meta strong { color: var(--tinta); }
.artigo__titulo { font-size: clamp(2.1rem,4.6vw,3.5rem); font-weight: 800; letter-spacing: -.042em; line-height: 1.03; margin: 0; max-width: 20ch; text-wrap: balance; }
.artigo__chamada { font-size: clamp(1.06rem,1.5vw,1.28rem); line-height: 1.55; color: var(--tinta-2); max-width: 60ch; margin: 22px 0 0; }

.secao { display: grid; grid-template-columns: var(--rail) minmax(0,70ch); gap: clamp(14px,3vw,40px); padding-block: clamp(24px,3vw,38px); border-top: 1px solid var(--linha); }
@media (max-width: 860px) { .secao { grid-template-columns: 1fr; gap: 10px; } }
.secao__marca { display: inline-block; align-self: start; background: var(--nuvem); color: var(--tinta-2); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.secao h2 { font-size: clamp(1.3rem,2.1vw,1.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.16; margin: 0 0 14px; }
.secao p { margin: 0 0 15px; }
.secao p:last-child { margin-bottom: 0; }
.secao ul { margin: 0 0 15px; padding: 0; list-style: none; }
.secao ul li { position: relative; padding: 8px 0 8px 28px; }
.secao ul li::before { content: ""; position: absolute; left: 0; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--laranja); }
.ref, .secao code { font-family: var(--mono); font-size: .84em; background: var(--nuvem-2); padding: 3px 7px; border-radius: 6px; }

.alerta { background: #FFF0F4; border-radius: var(--r); padding: 20px 24px; margin: 0 0 15px; border-left: 5px solid var(--vinho); }
.alerta strong { display: block; margin-bottom: 7px; font-weight: 800; color: var(--vinho); }
.alerta p { margin: 0; }

.datas { width: 100%; border-collapse: separate; border-spacing: 0 8px; margin: 0 0 15px; }
.datas th { text-align: left; padding: 0 16px 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.datas td { background: var(--nuvem); padding: 16px; vertical-align: top; }
.datas td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); font-family: var(--mono); font-weight: 700; white-space: nowrap; color: var(--vinho); }
.datas td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
@media (max-width: 700px) {
  .datas, .datas tbody, .datas tr, .datas td { display: block; width: 100%; }
  .datas thead { display: none; }
  .datas tr { margin-bottom: 10px; }
  .datas td:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .datas td:last-child  { border-radius: 0 0 var(--r-sm) var(--r-sm); }
}

.fontes { list-style: none; margin: 0; padding: 0; }
.fontes li { padding: 11px 0; border-bottom: 1px solid var(--linha); color: var(--tinta-2); font-size: .94rem; }
.fontes li::before { display: none; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(28,18,48,.94); display: grid; place-items: center; padding: clamp(16px,4vw,48px); opacity: 0; pointer-events: none; transition: opacity .24s var(--ease); }
.lightbox[data-aberto="1"] { opacity: 1; pointer-events: auto; }
.lightbox img { max-height: 84vh; width: auto; border-radius: var(--r); }
.lightbox figure { margin: 0; }
.lightbox__cap { margin-top: 14px; color: rgba(255,255,255,.72); text-align: center; font-size: .9rem; }
.lightbox__x { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,.14); border: 0; color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lightbox__x:hover { background: #fff; color: var(--tinta); }

/* ---------- motion ---------- */
/* Progressive enhancement: o conteúdo é visível por padrão. A animação de
   entrada só existe quando há JS — sem ele, nada some. Texto que depende de
   script para aparecer é texto que o buscador pode não ver. */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .rv.is-vis { opacity: 1; transform: none; }

@keyframes sobe { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero .olho   { animation: sobe .7s var(--ease) both .05s; }
.hero .d1     { animation: sobe .7s var(--ease) both .15s; }
.hero .lead   { animation: sobe .7s var(--ease) both .26s; }
.hero__cta    { animation: sobe .7s var(--ease) both .36s; }
.hero .rotulo { animation: sobe .8s var(--ease) both .44s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js .rv { opacity: 1; transform: none; }
}

/* =========================================================================
   BACCO SOLO — hardware + módulo. A saída real do produto é uma mensagem
   no WhatsApp, então a mensagem é o elemento de destaque da página.
   ========================================================================= */
.solo-hero { background: linear-gradient(135deg, #123B2A 0%, #2F6244 52%, #2FA36B 100%); color: #fff; position: relative; overflow: hidden; padding-block: clamp(48px,6.5vw,96px) clamp(56px,8vw,112px); }
.solo-hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:clamp(40px,6vw,90px); background: var(--branco); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: scaleX(1.6); }
.solo-hero__grade { position: relative; z-index:1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); gap: clamp(32px,5vw,68px); align-items: center; }
@media (max-width: 980px) { .solo-hero__grade { grid-template-columns: 1fr; } }
.solo-hero .olho { background: rgba(255,255,255,.16); color:#fff; box-shadow:none; }
.solo-hero .olho::before { background: #9BE8C0; }
.solo-hero .lead { color: var(--branco-fraco); }
.solo-hero .btn--cheio { background:#fff; color:#1A5138; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.solo-hero .btn--cheio:hover { background:#F2FBF6; }

/* conversa: o que o produtor recebe */
.zap { background: #EAF3EC; border-radius: var(--r-lg); padding: clamp(18px,2.2vw,26px); display: grid; gap: 12px; }
.zap__topo { display:flex; align-items:center; gap:9px; color:#1A5138; font-weight:700; font-size:.82rem; margin-bottom:2px; }
.zap__topo::before { content:""; width:9px; height:9px; border-radius:50%; background: var(--verde-luz); flex:none; }
.zap__bolha { background:#fff; border-radius: 16px 16px 16px 5px; padding: 15px 18px; box-shadow: 0 1px 2px rgba(28,18,48,.09); color: var(--tinta); font-size:.95rem; line-height:1.5; }
.zap__bolha b { color:#1A5138; }
.zap__hora { display:block; margin-top:7px; font-size:.7rem; color:var(--tinta-2); font-family: var(--mono); }
.zap__nota { margin:0; font-size:.82rem; color:var(--tinta-2); }

/* ficha técnica */
.specs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.specs li { background: var(--nuvem); border-radius: var(--r); padding: 20px 22px; }
.specs dt, .specs__rot { display:block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--verde); margin-bottom:8px; }
.specs__val { display:block; font-weight:800; font-size:1.06rem; letter-spacing:-.02em; margin-bottom:5px; }
.specs__txt { display:block; font-size:.9rem; color: var(--tinta-2); }

/* medições — e o que deliberadamente não é medição */
.medidas { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:14px; margin:0; padding:0; list-style:none; align-items:start; }
.medida { background:#fff; border:2px solid var(--linha); border-radius: var(--r); padding:22px; }
.medida__nome { font-weight:800; font-size:1.1rem; letter-spacing:-.025em; margin:0 0 8px; }
.medida__txt { margin:0; font-size:.9rem; color:var(--tinta-2); }
.medida--fora { background: #FFF6EC; border-color:#F5D6AE; grid-column: span 2; }
@media (max-width: 620px) { .medida--fora { grid-column: auto; } }
.medida--fora .medida__nome { color: var(--ocre); }

/* lead e botão secundário dentro dos heros coloridos */
.solo-hero .lead { margin-top: clamp(18px,2.2vw,26px); }
.solo-hero .hero__cta { display:flex; flex-wrap:wrap; gap:12px; margin-top: clamp(26px,3.2vw,36px); }
.btn--claro-vazio { background: transparent; color:#fff; border-color: rgba(255,255,255,.55); }
.btn--claro-vazio:hover { background: rgba(255,255,255,.16); border-color:#fff; color:#fff; }
.solo-hero .d1 { max-width: 15ch; }

/* =========================================================================
   HEROS DE PRODUTO — mesma estrutura do hero da home, matiz por produto
   ========================================================================= */
.phero { position: relative; color:#fff; overflow:hidden; padding-block: clamp(48px,6.5vw,100px) clamp(56px,8vw,116px); }
.phero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:clamp(40px,6vw,90px); background:var(--branco); border-radius:50% 50% 0 0 / 100% 100% 0 0; transform:scaleX(1.6); }
.phero--adega { background: linear-gradient(135deg,#2F1B5E 0%, #7B2D8E 55%, #B3123D 100%); }
.phero--erp   { background: var(--grad); }
.phero__grade { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); gap:clamp(32px,5vw,68px); align-items:center; }
@media (max-width:980px){ .phero__grade { grid-template-columns:1fr; } }
.phero .olho { background:rgba(255,255,255,.16); color:#fff; box-shadow:none; }
.phero .olho::before { background:#fff; }
.phero .lead { color:var(--branco-fraco); margin-top:clamp(18px,2.2vw,26px); }
.phero .hero__cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.2vw,36px); }
.phero .btn--cheio { background:#fff; color:var(--tinta); box-shadow:0 8px 22px rgba(0,0,0,.2); }
.phero .btn--cheio:hover { background:#F6F8FB; }

/* migalha */
.migalha { display:flex; gap:8px; align-items:center; font-size:.85rem; color:var(--branco-fraco); margin-bottom:16px; }
.migalha a { text-decoration:none; }
.migalha a:hover { text-decoration:underline; }

/* fluxo numerado — é sequência real, por isso numera */
.fluxo { list-style:none; margin:0; padding:0; display:grid; gap:2px; background:rgba(255,255,255,.16); border-radius:var(--r-lg); overflow:hidden; }
.fluxo li { background:rgba(255,255,255,.10); padding:16px 20px; display:flex; gap:14px; align-items:flex-start; font-size:.96rem; }
.fluxo b { font-family:var(--mono); font-weight:700; font-size:.8rem; opacity:.72; flex:none; padding-top:2px; }
.fluxo__cab { display:block; padding:16px 20px; background:rgba(255,255,255,.2); font-weight:700; }

/* faixa de "ir para o site do produto" */
.ponte { background: var(--nuvem); border-radius: var(--r-lg); padding: clamp(26px,3.4vw,44px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px,3vw,40px); align-items:center; }
@media (max-width:820px){ .ponte { grid-template-columns:1fr; } }
.ponte h2 { font-size:clamp(1.4rem,2.4vw,2rem); font-weight:800; letter-spacing:-.032em; line-height:1.1; margin:12px 0 12px; }
.ponte p { margin:0; color:var(--tinta-2); max-width:56ch; }

/* Bacco Cantina — fermentação. Faixa de vinho profunda, sem o laranja do
   hero da home e sem o índigo do Adega, para não se confundir com nenhum. */
.phero--cantina { background: linear-gradient(135deg,#2B040E 0%, #690B23 55%, #B3123D 100%); }

/* leitura de tanque: verde = dentro do setpoint, laranja = acima. Os dois
   matizes já existem na paleta; aqui carregam significado de temperatura. */
.tanques { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.tanque { background:rgba(255,255,255,.12); border-radius:var(--r-sm); padding:14px 16px; }
.tanque__id { display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; opacity:.76; margin-bottom:6px; }
.tanque__t { display:block; font-family:var(--mono); font-weight:700; font-size:1.5rem; line-height:1; letter-spacing:-.02em; }
.tanque__set { display:block; margin-top:7px; font-size:.7rem; font-weight:700; }
.tanque--ok   .tanque__set { color:#9BE8C0; }
.tanque--alto .tanque__set { color:#FFC27A; }
.tanque--alto .tanque__t   { color:#FFC27A; }

/* linha de hardware na home: dois produtos lado a lado, um bloco só */
.hw { background: linear-gradient(135deg,#123B2A 0%, #2F6244 50%, #1E4A6B 100%); color:#fff; position:relative; overflow:hidden; padding-block: clamp(52px,7vw,96px) clamp(60px,8vw,110px); }
.hw::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:clamp(40px,6vw,90px); background:var(--branco); border-radius:50% 50% 0 0 / 100% 100% 0 0; transform:scaleX(1.6); }
.hw__inner { position:relative; z-index:1; }
.hw .lead { color:var(--branco-fraco); margin-top:16px; }
.hw__grade { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:clamp(28px,3.4vw,44px); }
.hw__card { background:rgba(255,255,255,.12); border-radius:var(--r-lg); padding:clamp(24px,2.8vw,34px); display:flex; flex-direction:column; }
.hw__card h3 { font-size:clamp(1.5rem,2.4vw,2rem); font-weight:800; letter-spacing:-.035em; line-height:1.05; margin:14px 0 12px; }
.hw__card p { margin:0 0 20px; color:var(--branco-fraco); }
.hw__card .btn { margin-top:auto; align-self:flex-start; }
.hw__card .olho { background:rgba(255,255,255,.18); color:#fff; box-shadow:none; margin-bottom:0; }
.hw__card .olho::before { background:#9BE8C0; }