/* =========================================================================
   V3 — a home e a LP da Experiência Brada na estrutura do Tiago Tessmann
   -------------------------------------------------------------------------
   Carrega DEPOIS de `lp-brada.css` + `site-v2.css` e só ACRESCENTA: o
   cabeçalho, o rodapé, os botões, o formulário e a tipografia são os da home
   no ar. Se algo aqui brigar com a home, quem está errado é esta folha.

   A REGRA DO CELULAR (Tessmann, 29/09) é o eixo desta folha:
     "A cada 1–1,5 tela de informação, voltar a gerar desejo visual."
     "Doce pequeno dentro de card no celular = desperdício."
   Por isso quase todo bloco aqui tem uma foto que, no celular, ocupa de 70 a
   85% da altura da tela — `svh`, e não `vh`, para a barra do navegador do
   celular não cortar a foto quando aparece e some.

   Cores sempre fixas e com o fundo declarado no próprio componente: a regra 2
   deste projeto (contexto escuro que vaza) já mordeu cinco vezes.
   ========================================================================= */

:root{ --v3-creme:#F2ECE0; --v3-papel:#FBF8F2; --v3-cr2:#E8E0CE; --v3-tinta:#2B1C12;
  --v3-sec:#5C3D28; --v3-cacau:#3B2416; --v3-choc:#2B1A0F; --v3-bronze:#A8823C;
  --v3-ouro:#7A5D00; --v3-linha:#D8CCB4; --v3-cr-sobre:#E4D9C4 }

/* ── a foto que domina a tela ─────────────────────────────────────────────── */
.v3-foto{ margin:0; overflow:hidden; background:var(--v3-cr2) }
.v3-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.v3-foto--tela{ height:min(82svh, 760px) }
@media (min-width:861px){ .v3-foto--tela{ height:min(78svh, 720px) } }

/* ── a frase que respira entre fotos ─────────────────────────────────────── */
.v3-frase{ background:var(--v3-creme); text-align:center;
  padding:clamp(3rem,9vw,6rem) var(--sv-gut, 1.4rem) }
.v3-frase p{ font-family:var(--disp); font-weight:400; color:var(--v3-tinta); margin:0 auto;
  font-size:clamp(1.6rem,4.6vw,2.7rem); line-height:1.2; max-width:22em; text-wrap:balance }

/* ── 2 · IMERSÃO: quase sem texto ────────────────────────────────────────
   Celular: as fotos empilham, uma por tela. Computador: mosaico de 3
   colunas com alturas desencontradas, para não parecer grade de produto. */
.v3-imersao{ display:grid; gap:4px; background:var(--v3-creme) }
.v3-imersao .v3-foto{ height:min(78svh, 720px) }
@media (min-width:861px){
  .v3-imersao{ grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(15rem,24vw,22rem);
    padding-inline:var(--sv-gut, 1.4rem) }
  .v3-imersao .v3-foto{ height:auto }
  .v3-imersao .v3-foto:nth-child(1){ grid-row:span 2 }
  .v3-imersao .v3-foto:nth-child(4){ grid-column:span 2 }
}

/* ── o cabeçalho de seção desta versão ───────────────────────────────────── */
.v3-cab{ padding:clamp(2.8rem,7vw,4.6rem) var(--sv-gut, 1.4rem) clamp(1.4rem,3vw,2rem);
  background:var(--v3-creme) }
.v3-cab--cr2{ background:var(--v3-cr2) }
.v3-cab--centro{ text-align:center }
.v3-cab--centro .emp-fil{ margin-inline:auto }
.v3-cab .emp-sub{ max-width:34em }
.v3-cab--centro .emp-sub{ margin-inline:auto }

/* ── 3 · OS TRÊS CAMINHOS ────────────────────────────────────────────────
   Três fotos grandes, o texto EMBAIXO da foto e não sobre ela: texto sobre
   foto pede véu medido (regra 3), e aqui a foto tem de mostrar a mesa inteira. */
.v3-caminhos{ display:grid; gap:clamp(2rem,4vw,1.6rem); background:var(--v3-creme);
  padding:0 var(--sv-gut, 1.4rem) clamp(3rem,7vw,5rem) }
@media (min-width:861px){ .v3-caminhos{ grid-template-columns:repeat(3,1fr) } }
.v3-caminho{ display:flex; flex-direction:column; gap:.7rem; text-decoration:none; color:inherit }
.v3-caminho .v3-foto{ height:min(72svh, 620px) }
@media (min-width:861px){ .v3-caminho .v3-foto{ height:auto; aspect-ratio:4/5 } }
.v3-caminho .v3-foto img{ transition:transform .7s ease }
.v3-caminho:hover .v3-foto img{ transform:scale(1.03) }
.v3-caminho__rot{ font-size:max(.75rem,.78rem); letter-spacing:.24em; text-transform:uppercase;
  font-weight:500; color:var(--v3-ouro); margin-top:.4rem }
.v3-caminho__t{ font-family:var(--disp); font-size:clamp(1.3rem,2.6vw,1.6rem); line-height:1.2;
  color:var(--v3-tinta); margin:0 }
.v3-caminho__seta{ font-size:max(.85rem,.9rem); color:var(--v3-cacau); border-bottom:1px solid var(--v3-bronze);
  align-self:flex-start; padding-bottom:.15rem; min-height:44px; display:inline-flex; align-items:flex-end }

/* ── 4 · POR QUE A BRADA: três pilares, cada um com uma foto ──────────── */
.v3-pilares{ display:grid; gap:clamp(2.2rem,4vw,1.6rem); background:var(--v3-cr2);
  padding:0 var(--sv-gut, 1.4rem) clamp(3rem,7vw,5rem) }
@media (min-width:861px){ .v3-pilares{ grid-template-columns:repeat(3,1fr) } }
.v3-pilar{ display:flex; flex-direction:column; gap:.6rem }
.v3-pilar .v3-foto{ height:min(64svh, 520px) }
@media (min-width:861px){ .v3-pilar .v3-foto{ height:auto; aspect-ratio:3/4 } }
.v3-pilar__p{ font-family:var(--marca, 'Poiret One'), var(--disp); font-size:clamp(1.3rem,2.4vw,1.55rem);
  letter-spacing:.28em; text-transform:uppercase; color:var(--v3-tinta); margin:.6rem 0 0 }
.v3-pilar__l{ font-size:max(.95rem,1rem); line-height:1.55; color:var(--v3-sec); margin:0; max-width:24em }

/* ── 5 · AS JOIAS: carrossel editorial, pouco texto, "saiba mais" ────────
   Deslizar no dedo (scroll-snap, sem JavaScript). A primeira leitura é foto,
   nome e uma linha; o texto inteiro e o link do produtor ficam dentro do
   <details>, para quem quiser. */
.v3-joias{ background:var(--v3-creme); padding:0 0 clamp(3rem,7vw,5rem) }
.v3-joias__trilho{ display:grid; grid-auto-flow:column; grid-auto-columns:min(78%, 22rem);
  gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  padding:0 var(--sv-gut, 1.4rem) .6rem; scroll-padding-inline:var(--sv-gut, 1.4rem);
  scrollbar-width:thin; scrollbar-color:var(--v3-bronze) transparent }
.v3-joia{ scroll-snap-align:start; display:flex; flex-direction:column; gap:.55rem;
  background:var(--v3-papel); padding:0 0 1.1rem }
.v3-joia .v3-foto{ aspect-ratio:1 }
.v3-joia h3{ font-family:var(--disp); font-weight:400; font-size:clamp(1.25rem,2.4vw,1.45rem);
  color:var(--v3-tinta); margin:.5rem 1.1rem 0; line-height:1.2 }
.v3-joia p{ font-size:max(.9rem,.95rem); line-height:1.55; color:var(--v3-sec); margin:0 1.1rem }
.v3-joia details{ margin:.2rem 1.1rem 0 }
.v3-joia summary{ cursor:pointer; list-style:none; min-height:44px; display:inline-flex;
  align-items:center; font-size:max(.78rem,.8rem); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--v3-ouro) }
.v3-joia summary::-webkit-details-marker{ display:none }
.v3-joia summary::after{ content:"+"; margin-left:.5rem; font-size:1.1rem; color:var(--v3-bronze) }
.v3-joia details[open] summary::after{ content:"−" }
.v3-joia details p{ margin:.2rem 0 .7rem }
.v3-joia details a{ color:var(--v3-cacau); border-bottom:1px solid var(--v3-bronze);
  font-size:max(.85rem,.9rem); display:inline-flex; min-height:44px; align-items:center }
.v3-joias__dica{ font-size:max(.78rem,.8rem); letter-spacing:.14em; text-transform:uppercase;
  color:var(--v3-sec); margin:0 var(--sv-gut, 1.4rem) 1rem }
@media (min-width:861px){ .v3-joias__dica{ display:none } }

/* ── 6 · DAS JOIAS À MESA: o que isso vira ───────────────────────────────── */
.v3-mesa{ display:grid; gap:4px; background:var(--v3-creme) }
.v3-mesa .v3-foto{ height:min(64svh, 560px) }
@media (min-width:861px){
  .v3-mesa{ grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(13rem,20vw,19rem);
    padding-inline:var(--sv-gut, 1.4rem) }
  .v3-mesa .v3-foto{ height:auto }
  .v3-mesa .v3-foto:nth-child(1){ grid-column:span 2; grid-row:span 2 }
  .v3-mesa .v3-foto:nth-child(6){ grid-column:span 2 }
}

/* ── 7 · COMO FUNCIONA — os passos numerados, porque é uma sequência ───── */
.v3-passos{ background:var(--v3-cr2); padding:0 var(--sv-gut, 1.4rem) clamp(3rem,7vw,5rem) }
.v3-passos ol{ list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--v3-linha); counter-reset:passo }
@media (min-width:861px){ .v3-passos ol{ grid-template-columns:repeat(5,1fr) } }
.v3-passos li{ background:var(--v3-papel); padding:1.4rem 1.2rem 1.6rem; counter-increment:passo;
  display:flex; flex-direction:column; gap:.45rem }
.v3-passos li::before{ content:counter(passo, decimal-leading-zero); font-family:var(--disp);
  font-size:1.9rem; line-height:1; color:var(--v3-cacau) }
.v3-passos h3{ font-family:var(--disp); font-weight:400; font-size:clamp(1.15rem,2vw,1.3rem);
  line-height:1.25; color:var(--v3-tinta); margin:0 }
.v3-passos p{ font-size:max(.88rem,.92rem); line-height:1.55; color:var(--v3-sec); margin:0 }
.v3-passos__cta{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center }
.v3-fatos{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-size:max(.85rem,.9rem);
  color:var(--v3-sec) }
.v3-fatos b{ color:var(--v3-tinta); font-weight:600 }
.v3-fatos span{ display:inline-flex; align-items:baseline; gap:.35rem }
.v3-fatos span + span::before{ content:"·"; color:var(--v3-bronze); margin-right:.55rem }

/* ── 8 · PROVA REAL ───────────────────────────────────────────────────────── */
.v3-prova{ background:var(--v3-creme); padding:0 var(--sv-gut, 1.4rem) clamp(3rem,7vw,5rem) }
.v3-prova__selo{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  font-size:max(.85rem,.9rem); color:var(--v3-tinta); border-bottom:1px solid var(--v3-bronze);
  text-decoration:none; margin-bottom:1.4rem }
.v3-prova__selo b{ color:var(--v3-bronze); font-weight:400 }
.v3-citas{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit, minmax(min(17rem,100%),1fr)) }
.v3-cita{ margin:0; background:var(--v3-papel); border-top:2px solid var(--v3-bronze);
  padding:1.3rem 1.2rem 1.4rem; display:flex; flex-direction:column; gap:.8rem }
.v3-cita p{ font-family:var(--disp); font-size:max(1rem,1.06rem); line-height:1.5; color:var(--v3-tinta); margin:0 }
.v3-cita footer{ font-size:max(.78rem,.8rem); letter-spacing:.12em; text-transform:uppercase; color:var(--v3-sec) }
.v3-cita footer b{ color:var(--v3-tinta); font-weight:600; letter-spacing:.06em }

/* A história visual do Tessmann (imaginaram → construímos → depoimento),
   desenhada como MOLDE: é o formato que as histórias reais vão preencher. */
.v3-historias{ margin-top:clamp(2rem,4vw,2.6rem); display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(16rem,100%),1fr)) }
.v3-historia{ border:1px dashed var(--v3-bronze); background:var(--v3-papel); padding:1.1rem 1.1rem 1.2rem;
  display:grid; gap:.55rem; align-content:start }
.v3-historia b{ font-size:max(.75rem,.78rem); letter-spacing:.2em; text-transform:uppercase; color:var(--v3-ouro);
  font-weight:500 }
.v3-historia ol{ margin:0; padding-left:1.1rem; display:grid; gap:.3rem; font-size:max(.88rem,.92rem); color:var(--v3-sec) }

/* ── 9 · A GABI ───────────────────────────────────────────────────────────── */
.v3-gabi{ display:grid; background:var(--v3-cr2) }
@media (min-width:861px){ .v3-gabi{ grid-template-columns:1fr 1fr; align-items:stretch } }
.v3-gabi .v3-foto{ height:min(84svh, 780px) }
@media (min-width:861px){ .v3-gabi .v3-foto{ height:auto; min-height:34rem } }
.v3-gabi__txt{ padding:clamp(2.4rem,6vw,4.4rem) var(--sv-gut, 1.4rem); display:flex; flex-direction:column;
  justify-content:center; gap:.9rem }
.v3-gabi__nome{ font-family:var(--disp); font-weight:400; font-size:clamp(2rem,5vw,3rem); line-height:1.05;
  color:var(--v3-tinta); margin:0 }
.v3-gabi__papel{ font-size:max(.95rem,1rem); color:var(--v3-sec); margin:0 }
.v3-gabi__frase{ font-family:var(--disp); font-style:italic; font-size:clamp(1.3rem,3vw,1.7rem);
  color:var(--v3-cacau); margin:.4rem 0 0 }
.v3-gabi details{ margin-top:.4rem; max-width:34em }
.v3-gabi summary{ cursor:pointer; list-style:none; min-height:44px; display:inline-flex; align-items:center;
  font-size:max(.78rem,.8rem); letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--v3-cacau); border-bottom:1px solid var(--v3-bronze) }
.v3-gabi summary::-webkit-details-marker{ display:none }
.v3-gabi details p{ font-size:max(.92rem,.96rem); line-height:1.65; color:var(--v3-sec); margin:1rem 0 0 }

/* ── 10 · FAQ ─────────────────────────────────────────────────────────────── */
.v3-faq{ background:var(--v3-creme); padding:0 var(--sv-gut, 1.4rem) clamp(3rem,7vw,5rem) }
.v3-faq__lista{ max-width:46rem; border-top:1px solid var(--v3-linha) }
.v3-faq details{ border-bottom:1px solid var(--v3-linha) }
.v3-faq summary{ cursor:pointer; list-style:none; min-height:56px; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.8rem 0; font-family:var(--disp);
  font-size:clamp(1.05rem,2vw,1.2rem); color:var(--v3-tinta) }
.v3-faq summary::-webkit-details-marker{ display:none }
.v3-faq summary::after{ content:"+"; font-family:var(--texto, sans-serif); font-size:1.3rem; color:var(--v3-bronze); flex:0 0 auto }
.v3-faq details[open] summary::after{ content:"−" }
.v3-faq details p{ margin:0 0 1.1rem; font-size:max(.92rem,.96rem); line-height:1.6; color:var(--v3-sec); max-width:40em }

/* ── a caixa de falta (a mesma da casa) ───────────────────────────────────
   Onde o conteúdo depende de dado que ainda não existe (processo validado,
   histórias reais, perguntas do WhatsApp), a página DIZ o que falta. */
.sv-falta{ background:var(--v3-papel); border:1px dashed var(--v3-bronze); color:var(--v3-tinta);
  display:flex; flex-direction:column; gap:.4rem; padding:1rem 1.2rem; margin-top:1.4rem }
.sv-falta b{ font-size:max(.75rem,.78rem); letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--v3-ouro) }
.sv-falta span{ font-size:max(.86rem,.9rem); line-height:1.6; color:var(--v3-sec); max-width:44em }

/* ── bloco escuro de urgência / fechamento — texto SOBRE COR, não sobre foto */
.v3-choc{ background:var(--v3-choc); color:var(--v3-creme); text-align:center;
  padding:clamp(3rem,8vw,5.4rem) var(--sv-gut, 1.4rem) }
.v3-choc .emp-rot{ color:#DFBC4E }
.v3-choc .emp-fil{ margin-inline:auto; background:var(--v3-bronze) }
.v3-choc h2{ font-family:var(--disp); font-weight:400; color:var(--v3-creme); margin:0 auto;
  font-size:clamp(1.8rem,4.6vw,2.8rem); line-height:1.12; max-width:18em; text-wrap:balance }
.v3-choc p{ color:var(--v3-cr-sobre); max-width:34em; margin:1.1rem auto 0; font-size:max(1rem,1.05rem); line-height:1.6 }
.v3-choc .v3-acoes{ justify-content:center; margin-top:1.8rem }
.v3-acoes{ display:flex; flex-wrap:wrap; gap:.8rem }
/* botão claro no cacau: o `.botao` padrão é cacau — some no fundo cacau */
.v3-choc .botao{ background:#DFBC4E; border-color:#DFBC4E; color:#2B1C12 }
.v3-choc .botao:hover{ background:#F2ECE0; border-color:#F2ECE0 }

/* ── a LP não tem menu: uma página, um objetivo (Tessmann; regra 8) ─────── */
.sv-topo--lp .sv-menu,.sv-topo--lp .sv-ham{ display:none }
.sv-topo--lp .sv-topo__in{ justify-content:center }
@media (min-width:861px){ .sv-topo--lp .sv-topo__in{ justify-content:flex-start } }

@media (prefers-reduced-motion:reduce){ .v3-caminho .v3-foto img{ transition:none } }

/* ── o comprimento no celular (medido em 29/09: a home tinha 26 telas) ──────
   A primeira versão levou a regra do Tessmann ao pé da letra e deu a TODAS
   as fotos quase a tela inteira. Ele disse "algumas" e "a cada 1–1,5 tela":
   o ritmo é foto grande a cada tela e meia, não foto a cada tela.
   Então: a imersão e a mesa DESLIZAM de lado no celular — cada foto continua
   com a tela quase inteira, mas o bloco custa uma tela em vez de quatro.
   Caminhos, pilares e a Gabi ficam empilhados, com foto um pouco menor. */
@media (max-width:860px){
  .v3-imersao,.v3-mesa{ display:grid; grid-auto-flow:column; grid-auto-columns:86%;
    grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; gap:6px; padding-inline:var(--sv-gut,1.4rem);
    scroll-padding-inline:var(--sv-gut,1.4rem); scrollbar-width:none }
  .v3-imersao::-webkit-scrollbar,.v3-mesa::-webkit-scrollbar{ display:none }
  .v3-imersao .v3-foto,.v3-mesa .v3-foto{ height:min(74svh,640px); scroll-snap-align:start }
  .v3-caminho .v3-foto{ height:min(56svh,480px) }
  .v3-pilar .v3-foto{ height:min(46svh,400px) }
  .v3-gabi .v3-foto{ height:min(70svh,620px) }
  .v3-foto--tela{ height:min(72svh,640px) }
}
@media (max-width:860px){
  /* depoimentos e moldes de história também deslizam: cada um é uma leitura
     inteira, e empilhados eles faziam da prova o bloco mais longo (2,9 telas) */
  .v3-citas,.v3-historias{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
    margin-inline:calc(var(--sv-gut,1.4rem) * -1); padding-inline:var(--sv-gut,1.4rem);
    scroll-padding-inline:var(--sv-gut,1.4rem) }
  .v3-citas::-webkit-scrollbar,.v3-historias::-webkit-scrollbar{ display:none }
  .v3-cita,.v3-historia{ scroll-snap-align:start }
}

/* ── resolução: não esticar a foto além do pixel que ela tem ─────────────────
   As fotos disponíveis param em 1.600px (conferido em v3/fotos-site, 29/09).
   De ponta a ponta num monitor de 1.440 elas pediriam 2.880. Então, no
   computador, a foto grande de seção fica numa coluna central — o que também
   respeita as fotos EM PÉ, que esticadas de lado perdiam metade da cena.
   A exceção é a `--larga`, reservada a foto deitada de 1.600px. */
@media (min-width:861px){
  .v3-foto--tela{ max-width:min(100%, 46rem); margin-inline:auto; height:min(82svh, 780px) }
  .v3-foto--larga{ max-width:min(100%, 76rem) }
}
/* 768: pilares e Gabi já em colunas — empilhados, cada foto ocupava 768px de
   largura e pedia o dobro do pixel que tem */
@media (min-width:700px) and (max-width:860px){
  .v3-pilares{ grid-template-columns:repeat(3,1fr) }
  .v3-pilar .v3-foto{ height:auto; aspect-ratio:3/4 }
  .v3-gabi{ grid-template-columns:1fr 1fr }
  .v3-gabi .v3-foto{ height:auto; min-height:28rem }
}
/* os cinco passos só viram cinco colunas onde cabem: a 1.024 cada coluna
   tinha 180px e o texto virava escada (o verificador acusou linha-espremida) */
@media (min-width:861px) and (max-width:1199px){
  .v3-passos ol{ grid-template-columns:1fr }
  .v3-passos li{ display:grid; grid-template-columns:3.4rem 1fr; column-gap:1rem; align-items:baseline }
  .v3-passos li::before{ grid-row:span 2 }
}
/* medida de leitura: em coluna única (861–1199) os passos chegavam a 107
   caracteres por linha, e a linha de fatos a 135 — o limite da casa é ~80 */
@media (min-width:861px) and (max-width:1199px){ .v3-passos li{ max-width:40rem } }
.v3-fatos{ max-width:40em }

/* =========================================================================
   A ESCOLHA DA EXPERIÊNCIA — "em casa" ou "com a chef" (29/09)
   -------------------------------------------------------------------------
   Cara de escolha/compra, não de bloco institucional. O olho tem de ler em
   um segundo: Em casa → R$ 195 · Com a chef → R$ 250.
   · O preço é o maior texto do card depois do nome — e NUNCA riscado,
     "de/por" ou com desconto (pedido explícito do prompt; regra 4 da casa).
   · A foto domina: no celular cada opção ganha quase uma tela, e SÓ depois
     vêm nome, preço, texto e botão. O prompt pediu para não repetir o
     problema de texto comendo a tela e foto miúda.
   · Fundo cacau: separa o bloco do resto da página e diz "aqui se decide".
     Os cards têm fundo creme próprio (regra 2 — nada herda contexto).
   ========================================================================= */
.v3-escolha{ background:var(--v3-choc); padding:clamp(3rem,8vw,5.4rem) var(--sv-gut,1.4rem) }
.v3-escolha__cab{ text-align:center; max-width:40rem; margin:0 auto clamp(2rem,5vw,3rem) }
.v3-escolha__cab .emp-rot{ color:#DFBC4E }
.v3-escolha__cab .emp-fil{ margin-inline:auto; background:var(--v3-bronze) }
.v3-escolha__cab .emp-t{ color:var(--v3-creme) }
.v3-escolha__cab .emp-sub{ color:var(--v3-cr-sobre); margin:1rem auto 0 }

.v3-opcoes{ display:grid; gap:clamp(1.6rem,3vw,2rem); max-width:68rem; margin:0 auto }
@media (min-width:861px){ .v3-opcoes{ grid-template-columns:1fr 1fr } }
.v3-opcao{ background:var(--v3-creme); display:flex; flex-direction:column }
.v3-opcao .v3-foto{ height:min(64svh, 560px) }
@media (min-width:861px){ .v3-opcao .v3-foto{ height:auto; aspect-ratio:4/5 } }
.v3-opcao__txt{ padding:clamp(1.4rem,3vw,1.9rem) clamp(1.2rem,3vw,1.8rem) clamp(1.6rem,3vw,2rem);
  display:flex; flex-direction:column; gap:.55rem; flex:1 }
.v3-opcao__rot{ margin:0; font-size:max(.75rem,.78rem); letter-spacing:.24em; text-transform:uppercase;
  font-weight:500; color:var(--v3-ouro) }
.v3-opcao__nome{ margin:0; font-family:var(--disp); font-weight:400; color:var(--v3-tinta);
  font-size:clamp(1.4rem,2.8vw,1.75rem); line-height:1.15 }
.v3-opcao__preco{ margin:.2rem 0 .3rem; font-family:var(--disp); color:var(--v3-cacau); line-height:1;
  font-size:clamp(2.4rem,6vw,3.2rem); font-variant-numeric:lining-nums tabular-nums }
.v3-opcao__preco small{ font-size:.42em; letter-spacing:.06em; vertical-align:.95em; margin-right:.15em; color:var(--v3-sec) }
.v3-opcao__desc{ margin:0; font-size:max(.92rem,.97rem); line-height:1.6; color:var(--v3-sec); max-width:34em }
/* o botão desce para o pé do card: as duas opções terminam na mesma linha */
.v3-opcao__cta{ margin-top:auto; align-self:stretch; justify-content:center; text-align:center }
.v3-opcao__desc{ margin-bottom:.8rem }