/* ==========================================================================
   Proposta B — componentes que só existem na versão comercial.
   Carrega DEPOIS de style.css e só acrescenta.
   ========================================================================== */

/* ---------- Hero comercial: mais curto, dois selos, foto maior ---------- */
.hero--b .hero__grid{ min-height:clamp(500px,70svh,660px); }
.hero--b .hero__sub{ font-size:var(--fs-lg); }
.hero__selos{
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); margin-top:var(--sp-6);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-invert-soft);
}
.hero__selos span{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.hero__selos svg{ width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:2; }

/* ---------- Faixa de pilares ---------- */
.pilares{ background:var(--cream); border-bottom:1px solid var(--border); }
.pilares__grid{ display:grid; gap:var(--sp-5); padding-block:var(--sp-7); }
@media (min-width:768px){ .pilares__grid{ grid-template-columns:repeat(3,1fr); gap:var(--sp-6); } }
.pilar{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.pilar__ic{
  flex:none; width:44px; height:44px; border-radius:var(--r-full);
  background:var(--wine); display:grid; place-items:center;
}
.pilar__ic svg{ width:22px; height:22px; stroke:var(--cream); fill:none; stroke-width:1.7; }
.pilar__t{ font-weight:600; font-size:var(--fs-base); color:var(--wine); margin-bottom:2px; }
.pilar p{ font-size:var(--fs-xs); color:var(--ink-muted); line-height:1.6; }

/* ---------- Blocos de dor ---------- */
.dores{ display:grid; gap:var(--sp-5); margin-top:var(--sp-8); }
@media (min-width:768px){ .dores{ grid-template-columns:repeat(3,1fr); } }
.dor{
  background:var(--cream); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-6);
  border-left:3px solid var(--gold);
}
.dor h3{ font-size:var(--fs-xl); color:var(--wine); margin-bottom:var(--sp-3); }
.dor p{ font-size:var(--fs-sm); color:var(--ink-muted); }

/* ---------- Faixa de marcas ---------- */
.marcas{ background:var(--wine-deep); color:var(--ink-invert); padding-block:var(--sp-8); }
.marcas__in{ text-align:center; }
.marcas__label{
  font-size:var(--fs-xs); font-weight:600; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-5);
}
.marcas__lista{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-4) var(--sp-8);
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:clamp(1.375rem,1.1rem + 1.2vw,2rem); color:var(--cream);
}
.marcas__nota{ font-size:var(--fs-xs); color:rgba(251,247,236,.7); margin-top:var(--sp-5); }

/* ---------- Grade de 6 categorias ---------- */
@media (min-width:768px){ .cats--6{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .cats--6{ grid-template-columns:repeat(3,1fr); } }
.cats--6 .cat{ aspect-ratio:4/5; }

/* ---------- FAQ ---------- */
.faq{ margin-top:var(--sp-8); max-width:52rem; }
.faq details{
  background:var(--cream); border:1px solid var(--border);
  border-radius:var(--r-md); margin-bottom:var(--sp-3);
  transition:border-color var(--t-base) var(--ease-soft);
}
.faq details[open]{ border-color:var(--sand-dark); box-shadow:var(--shadow-sm); }
.faq summary{
  cursor:pointer; list-style:none; padding:var(--sp-5) var(--sp-6);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-base); color:var(--wine);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:12px; height:12px;
  border-right:2px solid var(--wine); border-bottom:2px solid var(--wine);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-base) var(--ease-out);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.faq summary:focus-visible{ outline:3px solid var(--focus-on-light); outline-offset:2px; }
.faq__corpo{ padding:0 var(--sp-6) var(--sp-6); font-size:var(--fs-sm); color:var(--ink-muted); }
.faq__corpo p + p{ margin-top:var(--sp-3); }
.faq__corpo ul{ margin-top:var(--sp-3); padding-left:var(--sp-5); }
.faq__corpo li{ margin-bottom:var(--sp-2); }

/* ---------- Bloco de consultoria (CTA intermediário) ---------- */
.consultoria{ background:var(--grad-brand); color:var(--ink-invert); }
.consultoria__in{ display:grid; gap:var(--sp-8); align-items:center; }
@media (min-width:1024px){ .consultoria__in{ grid-template-columns:minmax(0,52fr) minmax(0,48fr); gap:var(--sp-10); } }
.consultoria h2{ color:var(--cream); }
.consultoria ol{ margin-top:var(--sp-6); padding:0; list-style:none; counter-reset:passo; }
.consultoria li{
  position:relative; padding-left:var(--sp-8); margin-bottom:var(--sp-5);
  font-size:var(--fs-sm); color:var(--ink-invert-soft);
}
.consultoria li::before{
  counter-increment:passo; content:counter(passo,decimal-leading-zero);
  position:absolute; left:0; top:-2px;
  font-family:var(--font-display); font-style:normal; font-weight:600;
  font-size:var(--fs-lg); color:var(--gold); font-variant-numeric:lining-nums;
}
.consultoria li strong{ display:block; color:var(--cream); font-weight:600; margin-bottom:2px; }

/* ==========================================================================
   Catálogo — categorias, grupos de destaque e seletor de intenção
   ========================================================================== */

.prods{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){  .prods{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .prods{ grid-template-columns:repeat(4,1fr); } }

.prod{
  display:flex; flex-direction:column;
  background:var(--cream); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden; text-decoration:none;
  transition:transform var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out),
             border-color var(--t-fast) linear;
}
.prod:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--sand-dark); }
.prod__media{ background:#fff; aspect-ratio:4/5; overflow:hidden; }
.prod__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease-out);
}
.prod:hover .prod__media img{ transform:scale(1.05); }
.prod__body{ padding:var(--sp-4) var(--sp-5) var(--sp-5); display:flex; flex-direction:column; gap:2px; flex:1; }
.prod__marca{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
}
.prod__nome{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:var(--fs-lg); color:var(--wine); line-height:1.2;
}
.prod__cta{
  margin-top:auto; padding-top:var(--sp-3);
  font-size:var(--fs-xs); font-weight:600; color:var(--ink-muted);
  display:inline-flex; align-items:center; gap:var(--sp-2);
  transition:color var(--t-fast) linear, gap var(--t-base) var(--ease-out);
}
.prod:hover .prod__cta{ color:var(--wine); gap:var(--sp-3); }

/* ---------- Dupla de fotos sobrepostas (herda do hero do site atual) ---------- */
.dupla{ position:relative; padding-bottom:14%; }
.dupla img{ border-radius:var(--r-md); box-shadow:var(--shadow-lg); }
.dupla__a{ width:82%; aspect-ratio:4/5; object-fit:cover; }
.dupla__b{
  position:absolute; right:0; bottom:0; width:52%; aspect-ratio:1/1; object-fit:cover;
  border:5px solid var(--sand);
}
.sec--cream .dupla__b{ border-color:var(--cream); }

/* passos numerados sobre fundo claro */
.passo{
  position:relative; padding-left:var(--sp-8); margin-bottom:var(--sp-5);
  font-size:var(--fs-sm); color:var(--ink-muted);
}
.passo::before{
  counter-increment:passo; content:counter(passo,decimal-leading-zero);
  position:absolute; left:0; top:-2px;
  font-family:var(--font-display); font-style:normal; font-weight:600;
  font-size:var(--fs-lg); color:var(--gold); font-variant-numeric:lining-nums;
}
.passo strong{ display:block; color:var(--wine); font-weight:600; margin-bottom:2px; }

.prod__tam{
  font-size:var(--fs-xs); color:var(--ink-muted); line-height:1.5; margin-top:2px;
}

/* ==========================================================================
   Mobile — hero empilhado
   Foto atrás do texto em tela estreita não funciona: ou o véu esconde a foto,
   ou a foto come a legibilidade. Abaixo de 1024px a foto vira faixa própria,
   com o texto no gradiente da marca logo abaixo. Os dois aparecem inteiros.
   ========================================================================== */
@media (max-width:1023px){
  .hero{ display:flex; flex-direction:column; }
  .hero__media{
    position:relative; inset:auto; order:1;
    width:100%; aspect-ratio:5/4; overflow:hidden;
  }
  .hero__media img{ object-position:52% 40%; }
  /* O véu é irmão do media, então com .hero em flex ele ancorava na base da
     seção inteira. No mobile o fade passa a viver dentro da própria foto. */
  .hero__veil{ display:none; }
  .hero__media::after{
    content:""; position:absolute; inset:auto 0 0 0; height:26%; pointer-events:none;
    background:linear-gradient(180deg,rgba(142,0,24,0) 0%,rgba(142,0,24,.5) 62%,#A50E20 100%);
  }
  .hero__grid{ order:2; min-height:0; }
  .hero__inner{ padding-block:var(--sp-7) var(--sp-8); max-width:none; }
  .hero--b .hero__grid{ min-height:0; }
}

/* Faixa de 3 números: em 2 colunas o terceiro fica órfão e desalinhado */
@media (max-width:767px){
  .stats--3{ grid-template-columns:repeat(3,1fr); gap:0; }
  .stats--3 .stat{ padding-inline:var(--sp-2); }
  .stats--3 .stat__num{ font-size:clamp(1.375rem,1.05rem + 1.6vw,2rem); }
  .stats--3 .stat__label{ font-size:10px; letter-spacing:.06em; }
  .stats--3 .stat:nth-child(odd){ border-left:1px solid var(--border); }
  .stats--3 .stat:first-child{ border-left:0; }
}


/* A barra de apresentação comia ~300px no topo do mobile, empurrando o hero
   pra baixo justo na tela que a cliente vai olhar primeiro. Some a frase
   explicativa; rótulo e link bastam. (A barra inteira sai na versão final.) */
@media (max-width:600px){
  .propbar__in{ gap:var(--sp-1) var(--sp-3); padding-block:var(--sp-2); }
  .propbar__in > span:not(:first-child){ display:none; }
  .propbar strong{ font-size:11px; }
}

/* ---------- Grade das 8 categorias ---------- */
.cats--8{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,1fr); margin-top:var(--sp-8); }
@media (min-width:768px){  .cats--8{ grid-template-columns:repeat(3,1fr); gap:var(--sp-5); } }
@media (min-width:1024px){ .cats--8{ grid-template-columns:repeat(4,1fr); } }
.cats--8 .cat{ aspect-ratio:4/5; }
.cats--8 .cat__veil{
  background:linear-gradient(180deg,rgba(58,0,10,0) 0%,rgba(58,0,10,.12) 42%,rgba(58,0,10,.80) 100%);
}
@media (max-width:767px){
  .cats--8 .cat h3{ font-size:var(--fs-lg); }
  .cats--8 .cat p{ display:none; }
}
/* ---------- Grupos de produto em destaque ---------- */
.grupo + .grupo{ margin-top:var(--sp-10); }
.grupo__head{ margin-bottom:var(--sp-6); }
.grupo__head h3{ color:var(--wine); font-size:var(--fs-h3); }
.grupo__head p{ font-size:var(--fs-sm); color:var(--ink-muted); margin-top:var(--sp-2); }
.prod__desc{ font-size:var(--fs-xs); color:var(--ink-muted); line-height:1.55; margin-top:var(--sp-2); }
.prod__tam{ margin-top:var(--sp-2); }

/* ---------- Seletor de intenção ---------- */
.intencoes{ display:grid; gap:var(--sp-3); margin-top:var(--sp-7); }
@media (min-width:768px){ .intencoes{ grid-template-columns:repeat(2,1fr); } }
.intencao{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); min-height:64px;
  background:var(--cream); border:1px solid var(--border); border-radius:var(--r-md);
  font-weight:600; font-size:var(--fs-sm); color:var(--wine); text-decoration:none;
  transition:border-color var(--t-fast) linear, transform var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out);
}
.intencao:hover{ border-color:var(--wine); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.intencao__ic{ font-size:24px; line-height:1; flex:none; }
.intencao__seta{ margin-left:auto; color:var(--gold); }
.on-wine .intencao{ background:rgba(251,247,236,.06); border-color:var(--border-brand); color:var(--cream); }
.on-wine .intencao:hover{ border-color:var(--gold); background:rgba(251,247,236,.12); }

/* ---------- Mosaico "na casa de quem confia" ---------- */
.mosaico{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(2,1fr); margin-top:var(--sp-8); }
@media (min-width:768px){ .mosaico{ grid-template-columns:repeat(3,1fr); gap:var(--sp-4); } }
.mosaico figure{ margin:0; border-radius:var(--r-md); overflow:hidden; background:var(--wine-deep); }
.mosaico img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
              transition:transform var(--t-slow) var(--ease-out); }
.mosaico figure:hover img{ transform:scale(1.05); }
@media (min-width:768px){ .mosaico figure:first-child{ grid-column:span 2; grid-row:span 2; }
                          .mosaico figure:first-child img{ aspect-ratio:1/1; } }

/* ---------- Faixa de prova rápida ---------- */
.provarapida{ background:var(--wine-deep); color:var(--ink-invert); }
.provarapida__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--sp-3) var(--sp-6); padding-block:var(--sp-5); text-align:center;
}
.provarapida b{ font-family:var(--font-display); font-style:normal; font-weight:600;
                font-size:var(--fs-xl); color:var(--cream); font-variant-numeric:lining-nums; }
.provarapida span{ display:inline-flex; align-items:baseline; gap:var(--sp-2);
                   font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase;
                   color:rgba(251,247,236,.82); }
.provarapida .estrela{ color:var(--gold); }

/* ---------- Bloco emocional ---------- */
.emocional{ background:var(--grad-brand); color:var(--ink-invert); text-align:center; }
.emocional p{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:clamp(1.25rem,1.02rem + 1.2vw,1.875rem); line-height:1.35;
  color:var(--ink-invert-soft); max-width:26ch; margin-inline:auto;
}
.emocional p + p{ margin-top:var(--sp-5); }
.emocional p:last-child{ color:var(--cream); }

/* ---------- Experiência / frota ---------- */
.frota__lista{ display:grid; gap:var(--sp-4); margin-top:var(--sp-6); }
@media (min-width:600px){ .frota__lista{ grid-template-columns:repeat(2,1fr); } }
.frota__item{ display:flex; gap:var(--sp-3); align-items:flex-start;
              font-size:var(--fs-sm); color:var(--ink-invert-soft); }
.frota__item b{ color:var(--cream); font-weight:600; }
.frota__item::before{ content:""; flex:none; width:8px; height:8px; margin-top:8px;
                      border-radius:50%; background:var(--gold); }
.nota-asterisco{ font-size:var(--fs-xs); color:var(--ink-invert-soft); margin-top:var(--sp-6); font-style:italic; }
.sec--sand .nota-asterisco,.sec--cream .nota-asterisco{ color:var(--ink-muted); }

/* ---------- Avaliações com tema ---------- */
.depos{ grid-template-columns:repeat(1,1fr); }
@media (min-width:600px){ .depos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .depos{ grid-template-columns:repeat(3,1fr); } }
.depo__topo{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.depo__stars{ margin-bottom:0; }
.depo__tema{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wine); background:var(--sand); border-radius:var(--r-full);
  padding:4px var(--sp-3);
}