/* =========================================================================
   LP Brada Corporativo (07/10/2026) — só o que o v3.css não tem.
   Cores sempre fixas e com fundo declarado no próprio componente (regra 2).
   Celular: fotos em 4:5, nunca a tira comprida (Gabi, 07/10: "prefiro que
   fique um pouco mais quadrada, senão o produto fica esticado").
   ========================================================================= */

/* ── o lugar da foto que ainda não existe (só aparece enquanto falta) ───── */
.corp-slot{ display:grid; place-items:center; min-height:16rem;
  background:repeating-linear-gradient(135deg,#E8E0CE 0 14px,#F2ECE0 14px 28px) }
.corp-slot span{ max-width:22em; padding:1.2rem; text-align:center; font-size:.9rem; color:#5C3D28; line-height:1.5 }
.corp-slot b{ display:block; margin-top:.4rem; font-weight:500; color:#2B1C12 }

.corp-link{ display:inline-flex; align-items:center; min-height:44px; color:#2B1C12; text-decoration:none;
  font-size:max(.85rem,.9rem); letter-spacing:.08em; border-bottom:1px solid #A8823C; align-self:center }
.corp-centro{ justify-content:center; padding:0 var(--sv-gut,1.4rem) clamp(3rem,7vw,4.6rem) }

/* ── 01 · a campanha do topo: foto e texto lado a lado ─────────────────── */
.corp-camp{ display:grid; background:#F2ECE0 }
.corp-camp .corp-camp__foto{ aspect-ratio:4/5; height:auto }
.corp-camp__txt{ padding:clamp(1.8rem,5vw,4rem) var(--sv-gut,1.4rem) clamp(2.6rem,6vw,4rem); align-self:center }
.corp-camp__txt .emp-t{ font-size:clamp(2rem,5.4vw,3.4rem) }
.corp-camp__dest{ margin:1.2rem 0 0; padding-left:1rem; border-left:2px solid #A8823C; color:#2B1C12;
  font-size:max(1rem,1.05rem); line-height:1.55; max-width:30em }
.corp-camp .v3-acoes{ margin-top:1.8rem; align-items:center }
@media (min-width:861px){
  .corp-camp{ grid-template-columns:1fr 1fr; min-height:min(88svh,820px) }
  .corp-camp .corp-camp__foto{ aspect-ratio:auto; height:100% }
  .corp-camp__txt{ padding-inline:clamp(2rem,5vw,5rem) }
}

/* as outras campanhas ativas: logo abaixo, menores */
.corp-camp2{ background:#E8E0CE; padding:clamp(1.6rem,4vw,2.6rem) var(--sv-gut,1.4rem) }
.corp-camp2__in{ display:grid; gap:1.4rem; max-width:64rem; margin:0 auto; align-items:center }
.corp-camp2 .corp-camp2__foto{ aspect-ratio:4/5; height:auto; max-width:22rem }
.corp-camp2__txt .emp-rot{ color:#7A5D00 }
.corp-camp2__t{ font-family:var(--disp); font-weight:400; color:#2B1C12; margin:.6rem 0 0;
  font-size:clamp(1.5rem,3.6vw,2.2rem); line-height:1.15 }
.corp-camp2__txt p{ color:#5C3D28; line-height:1.6; margin:.8rem 0 1.4rem; max-width:32em }
@media (min-width:700px){ .corp-camp2__in{ grid-template-columns:minmax(14rem,22rem) 1fr; gap:clamp(1.6rem,4vw,3rem) } }

/* ── 02 · o ano inteiro ──────────────────────────────────────────────────── */
.corp-ano{ display:grid; background:#FBF8F2 }
.corp-ano .corp-ano__foto{ aspect-ratio:4/5; height:auto }
.corp-ano__txt{ padding:clamp(2rem,5vw,4rem) var(--sv-gut,1.4rem); align-self:center; display:flex; flex-direction:column; align-items:flex-start }
.corp-ano__txt .corp-link{ align-self:flex-start }
@media (min-width:861px){
  .corp-ano{ grid-template-columns:1fr 1fr }
  .corp-ano__txt{ order:-1; padding-inline:clamp(2rem,5vw,5rem) }
}
.corp-fichas{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 1rem; padding:0 }
.corp-fichas li{ border:1px solid #D8CCB4; color:#5C3D28; background:#F2ECE0; padding:.45rem .8rem;
  font-size:max(.8rem,.84rem); letter-spacing:.06em }

/* ── 03 · desejo: o vídeo ocupa uma célula como as fotos ───────────────── */
.corp-desejo video{ width:100%; height:100%; object-fit:cover; display:block }

/* ── 04 · o presente comunica ────────────────────────────────────────────── */
.corp-comunica{ background:#F2ECE0; text-align:center; padding-bottom:clamp(2.4rem,5vw,3.4rem) }
.corp-comunica p.corp-comunica__p{ max-width:34em; margin:0 auto; padding:0 var(--sv-gut,1.4rem); color:#5C3D28;
  font-size:max(1rem,1.05rem); line-height:1.65 }
.corp-tarja{ margin:1.8rem 0 0; font-size:max(.78rem,.8rem); letter-spacing:.3em; text-transform:uppercase; color:#7A5D00 }

/* ── 05 · quatro pilares ─────────────────────────────────────────────────── */
@media (min-width:861px){ .corp-pilares{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1200px){ .corp-pilares{ grid-template-columns:repeat(4,1fr) } }

/* ── 07 · possibilidades: o trilho dentro do bloco cacau ────────────────── */
.corp-poss .v3-joias{ background:transparent; padding-bottom:0; margin-top:clamp(2rem,5vw,3rem) }
.corp-poss .v3-joias__dica{ color:#E4D9C4 }
.corp-poss .v3-joias__trilho{ padding-inline:0 }
.corp-prod{ background:#F2ECE0; padding-bottom:1.2rem }
.corp-prod h3{ color:#2B1C12 }
.corp-prod .v3-opcao__rot{ margin:.6rem 1.1rem 0; color:#7A5D00 }
.corp-prod .corp-link{ align-self:flex-start; margin:.2rem 1.1rem 0 }
.corp-prod__foto{ position:relative }
.corp-prod__foto .v3-foto{ aspect-ratio:4/5 }
.corp-selo{ display:inline-block; background:#2B1C12; color:#F2ECE0; font-size:max(.72rem,.75rem);
  letter-spacing:.18em; text-transform:uppercase; padding:.4rem .7rem }
.corp-prod__foto .corp-selo{ position:absolute; top:.7rem; left:.7rem }
.v3-opcao .corp-selo{ align-self:flex-start; margin-bottom:.6rem }
.corp-prod--assinatura{ background:#E8E0CE }
.corp-poss .v3-opcao .v3-foto{ height:auto; aspect-ratio:4/5 }

/* ── 08 · personalização: as tags reais ──────────────────────────────────── */
.corp-tags .v3-foto{ height:auto; aspect-ratio:4/5 }
@media (min-width:861px){ .corp-tags{ grid-auto-rows:auto; padding-inline:var(--sv-gut,1.4rem) } }
section p.corp-aviso{ text-align:center; color:#5C3D28; font-size:max(.88rem,.92rem); margin:1.6rem auto 1.2rem;
  padding:0 var(--sv-gut,1.4rem); max-width:36em; line-height:1.55 }
section[data-bloco="corp-personalizacao"]{ background:#F2ECE0 }

/* ── 09 · fim de ano ─────────────────────────────────────────────────────── */
.corp-proxima__fotos{ display:grid; grid-template-columns:1fr 1fr; gap:6px; max-width:44rem; margin:2rem auto 0 }
.corp-proxima__fotos .v3-foto{ aspect-ratio:4/5 }

/* ── 10 · as marcas, em nome (sem logo por ora) ──────────────────────────── */
.corp-marcas{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.6rem;
  margin:1.6rem auto 2rem; padding:0; max-width:52rem }
.corp-marcas li{ font-family:var(--disp); color:#3B2416; font-size:clamp(1.05rem,2.4vw,1.3rem) }

/* ── 12 · a Gabi: a foto não corta a cabeça ──────────────────────────────── */
.corp-gabi .v3-foto{ aspect-ratio:4/5; height:auto }
@media (min-width:861px){ .corp-gabi .v3-foto{ min-height:0; max-height:46rem } }

.corp-prazo__l{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem; letter-spacing:.08em }

/* ── celular: 4:5 em tudo que era tira comprida ─────────────────────────── */
@media (max-width:860px){
  .corp-desejo .v3-foto, .corp-tags .v3-foto{ height:auto; aspect-ratio:4/5 }
  section[data-bloco="corp-encantar"] .v3-caminho .v3-foto{ height:auto; aspect-ratio:4/5 }
  .corp-pilares .v3-pilar .v3-foto{ height:auto; aspect-ratio:4/5 }
  .corp-gabi .v3-foto{ height:auto }
  section[data-bloco="corp-prova"] .v3-foto--tela, section[data-bloco="corp-fecho"] .v3-foto--tela{ height:auto; aspect-ratio:4/5 }
}

/* tablet (600–860): duas colunas nos caminhos e nos destaques — em uma coluna
   a foto estica até 708 px e as de celular (647 px) perdem nitidez */
@media (min-width:600px) and (max-width:860px){
  section[data-bloco="corp-encantar"] .v3-caminhos, .corp-poss .v3-opcoes{ grid-template-columns:1fr 1fr }
}
section[data-bloco="corp-como"] .v3-passos p{ max-width:33em }

/* celular: pilares e caminhos deslizam de lado (pacote, tela 6) — empilhados,
   custavam ~8 telas; deslizando, custam 2 */
@media (max-width:599px){
  .corp-pilares, section[data-bloco="corp-encantar"] .v3-caminhos{ display:grid; grid-auto-flow:column;
    grid-auto-columns:84%; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; gap:10px; padding-inline:var(--sv-gut,1.4rem);
    scroll-padding-inline:var(--sv-gut,1.4rem); scrollbar-width:none }
  .corp-pilares::-webkit-scrollbar, section[data-bloco="corp-encantar"] .v3-caminhos::-webkit-scrollbar{ display:none }
  .corp-pilares > *, section[data-bloco="corp-encantar"] .v3-caminho{ scroll-snap-align:start }
}

/* ═══ RODADA 2 (Gabi + Gustavo, 07/10): mais compacta, sem ficar apertada ═══ */
/* os cabeçalhos de seção respiram menos nesta página */
.v3-cab{ padding-top:clamp(2.2rem,5vw,3.4rem); padding-bottom:clamp(1rem,2.4vw,1.5rem) }
.v3-passos, .v3-faq{ padding-bottom:clamp(2.4rem,5vw,3.6rem) }
.v3-escolha{ padding-block:clamp(2.4rem,6vw,4rem) }
.v3-choc{ padding-block:clamp(2.6rem,6vw,4rem) }

/* S4 · "Para ser aberto": título, seis peças e a frase numa tela do computador */
.corp-comunica .v3-cab{ padding-bottom:1rem }
@media (min-width:1200px){
  .corp-desejo{ grid-template-columns:repeat(6,1fr) }
  .corp-desejo .v3-foto{ aspect-ratio:4/5 }
}
.corp-comunica p.corp-frase{ font-family:var(--disp); font-weight:400; color:#2B1C12; text-wrap:balance;
  font-size:clamp(1.45rem,3.2vw,2.1rem); line-height:1.2; max-width:24em; margin:clamp(1.6rem,3.5vw,2.2rem) auto .8rem;
  padding:0 var(--sv-gut,1.4rem) }
.corp-comunica p.corp-tarja{ margin:1.2rem 0 0 }

/* S2 · Dia dos Professores: os três produtos sugeridos */
.corp-camp2__prods{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;
  margin:0 0 1.4rem; padding:0; max-width:30rem }
.corp-camp2__prods li{ display:flex; flex-direction:column; gap:.4rem }
.corp-camp2__prods .v3-foto{ aspect-ratio:1 }
.corp-camp2__prods span{ font-size:max(.8rem,.82rem); line-height:1.3; color:#2B1C12 }

/* S10 · "Quem já provou": a foto encolhe e as avaliações ficam ao lado */
.corp-prova{ background:#F2ECE0; display:grid; gap:clamp(1.4rem,3vw,2.4rem);
  padding:0 var(--sv-gut,1.4rem) clamp(2.4rem,5vw,3.6rem); max-width:76rem; margin:0 auto }
.corp-prova .corp-prova__foto{ aspect-ratio:16/10; height:auto }
.corp-prova .corp-prova__txt{ padding:0; background:transparent }
.corp-prova .corp-marcas{ justify-content:flex-start; margin:1rem 0 1.4rem }
.corp-citas{ display:grid; gap:1rem }
@media (min-width:861px){
  .corp-prova{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:start }
  .corp-prova .corp-prova__foto{ aspect-ratio:4/5; max-height:36rem }
}

/* ═══ RODADA 3 (Gabi + Gustavo, 07/10) ═══════════════════════════════════════ */
/* S1 · o carrossel de campanhas: a seção inteira desliza (foto + texto + botão) */
.corp-camps{ background:#F2ECE0; position:relative }
.corp-camps__trilho{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none }
.corp-camps__trilho::-webkit-scrollbar{ display:none }
.corp-camps .corp-camp{ scroll-snap-align:start; scroll-snap-stop:always }
@media (min-width:861px){ .corp-camps .corp-camp{ min-height:min(80svh,760px) } }
.corp-camps__pontos{ display:flex; justify-content:center; gap:.2rem; padding:.6rem 0 .9rem; background:#F2ECE0 }
.corp-camps__pontos button{ width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative }
.corp-camps__pontos button::after{ content:""; position:absolute; inset:50% auto auto 50%; width:9px; height:9px; margin:-4.5px;
  border-radius:50%; background:#D8CCB4; transition:background .3s, transform .3s }
.corp-camps__pontos button.ativo::after{ background:#2B1C12; transform:scale(1.25) }

/* S4 · as duas frases em 2 linhas no computador (eram 3 e muito empilhadas) */
.corp-comunica p.corp-frase{ max-width:34em; font-size:clamp(1.35rem,2.6vw,1.85rem) }
.corp-comunica p.corp-comunica__p{ max-width:48em }

/* S13 · a Gabi: foto menor e perto do texto — a seção cabe numa tela */
@media (min-width:861px){
  .corp-gabi{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); align-items:center; max-width:68rem; margin:0 auto }
  .corp-gabi .v3-foto{ max-height:32rem; min-height:0 }
  .corp-gabi .v3-gabi__txt{ padding-block:2rem }
}
@media (max-width:860px){ .corp-gabi .v3-foto{ aspect-ratio:4/3; max-height:50svh } }

/* S16 · a última foto ao lado do formulário (antes era a S15, sozinha numa tela) */
.corp-conversa .corp-conversa__foto{ aspect-ratio:16/10; height:auto }
@media (min-width:861px){
  .corp-conversa{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center;
    gap:clamp(1.6rem,3vw,3rem); padding-inline:var(--sv-gut,1.4rem) }
  .corp-conversa .corp-conversa__foto{ aspect-ratio:4/5; max-height:40rem }
  .corp-conversa .sv-in{ padding-inline:0 }
}

/* S9 · agora são 8 exemplos: 4 por linha no computador */
@media (min-width:861px){ .corp-tags{ grid-template-columns:repeat(4,1fr) } }
/* tablet (600–860): a campanha também fica lado a lado — em coluna única a foto
   esticava até 768 px e as fotos de celular (851 px) perdiam nitidez */
@media (min-width:600px) and (max-width:860px){
  .corp-camp{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center }
  .corp-camp .corp-camp__foto{ aspect-ratio:auto; height:100%; min-height:30rem }
}
.corp-comunica p.corp-comunica__p{ max-width:54em }

/* S1 · cada campanha cabe numa tela (Gabi, 07/10: "a foto está grandona, tem que
   rolar duas vezes"). Computador e tablet: o slide tem a altura da tela e a foto
   fica em 3:4 — a proporção das próprias fotos —, então aparece inteira, sem o
   "zoom" de antes (a coluna larga cortava o retrato). Celular: foto mais baixa. */
@media (min-width:600px){
  .corp-camps .corp-camp{ min-height:0; height:clamp(26rem, calc(100svh - 8.5rem), 44rem);
    grid-template-columns:auto minmax(0,1fr); align-items:center }
  .corp-camps .corp-camp .corp-camp__foto{ height:100%; width:auto; aspect-ratio:3/4; min-height:0 }
  .corp-camps .corp-camp__txt{ padding-block:1.4rem; max-width:40rem }
}
@media (max-width:599px){
  .corp-camps .corp-camp .corp-camp__foto{ aspect-ratio:auto; height:min(36svh,300px) }
  .corp-camps .corp-camp__txt{ padding:1.1rem var(--sv-gut,1.4rem) 1.2rem }
  .corp-camps .corp-camp__txt .emp-t{ font-size:clamp(1.55rem,6.4vw,1.9rem) }
  .corp-camps .corp-camp__txt .emp-sub{ font-size:.95rem; line-height:1.5; margin-top:.6rem }
  .corp-camps .corp-camp__dest{ margin-top:.7rem; font-size:.92rem }
  .corp-camps .v3-acoes{ margin-top:1rem }
}
.corp-camps .corp-camp__foto img[src*="outubro-rosa"]{ object-position:50% 45% }
/* (correção) a coluna "auto" com aspect-ratio errava a largura em alguns slides:
   altura e largura da foto passam a ser explícitas, a partir da mesma variável */
@media (min-width:600px){
  .corp-camps{ --camp-h:clamp(26rem, calc(100svh - 8.5rem), 44rem) }
  .corp-camps .corp-camp{ height:var(--camp-h); grid-template-columns:calc(var(--camp-h) * .75) minmax(0,1fr) }
  .corp-camps .corp-camp .corp-camp__foto{ width:calc(var(--camp-h) * .75); height:var(--camp-h); aspect-ratio:auto }
}
@media (max-width:599px){ .corp-camps .corp-camp .corp-camp__foto{ height:min(32svh,262px) } }
/* (correção) lado a lado só no computador; no tablet a coluna de texto ficava
   estreita e o botão saía do slide. Até 860 px: empilhado, foto baixa em cima. */
@media (min-width:600px) and (max-width:860px){
  .corp-camps .corp-camp{ height:auto; grid-template-columns:none; display:block }
  .corp-camps .corp-camp .corp-camp__foto{ width:100%; height:min(34svh,340px); aspect-ratio:auto }
  .corp-camps .corp-camp__txt{ padding:1.4rem var(--sv-gut,1.4rem) 1.6rem; max-width:none }
}

/* S11 · o vídeo aparece inteiro e centralizado (Gabi, 07/10: "está cortado").
   A caixa segue a proporção do próprio vídeo (vertical, 9:16), então nada é recortado. */
.corp-prova .corp-prova__foto{ aspect-ratio:9/16; height:auto; width:100%; max-width:22rem; justify-self:center; margin-inline:auto; background:#2B1C12 }
.corp-prova .corp-prova__foto video{ width:100%; height:100%; display:block; object-fit:contain; object-position:50% 50% }
@media (min-width:861px){ .corp-prova .corp-prova__foto{ max-height:36rem; width:auto } }
@media (max-width:860px){ .corp-prova .corp-prova__foto{ max-width:min(100%,17rem) } }

/* S1 · tela larga (Gustavo, 07/10: "na tela cheia fica ruim" — a foto colava na borda
   esquerda e sobrava um vão à direita). O par foto + texto fica centralizado, com a
   coluna de texto limitada; o slide continua ocupando a tela inteira no deslize. */
@media (min-width:861px){
  .corp-camps .corp-camp{ grid-template-columns:calc(var(--camp-h) * .75) minmax(0,38rem);
    justify-content:center; column-gap:clamp(2rem,4vw,4.5rem) }
  .corp-camps .corp-camp__txt{ padding-inline:0 }
  .corp-camps .corp-camp__txt .emp-t{ font-size:clamp(2rem,3.4vw,3.1rem) }
}

/* celular: "Ver todas as possibilidades" vai para a direita — à esquerda ele ficava
   embaixo do botão flutuante do WhatsApp (Gustavo, 07/10) */
@media (max-width:860px){ .corp-camps .v3-acoes .corp-link{ margin-left:auto } }

/* TESTE S1 (07/10, só na prévia): a arte da campanha ocupa a metade do texto.
   A arte já traz o título; o nosso fica só para leitor de tela e para o Google. */
.corp-so-leitor{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.corp-camp__arte, .corp-camp__arte img{ display:block; width:100% }
.corp-camp__txt--arte .emp-sub{ margin-top:.9rem; text-align:center }
.corp-camp__txt--arte .v3-acoes{ justify-content:center }
@media (min-width:861px){
  .corp-camp__txt--arte{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100% }
  .corp-camp__arte{ max-width:min(100%, calc(var(--camp-h) - 12rem)) }
  .corp-camp__txt--arte .emp-sub{ max-width:30em; font-size:max(.95rem,1rem) }
  .corp-camp__txt--arte .v3-acoes{ margin-top:1rem }
}
@media (max-width:860px){ .corp-camp__arte{ margin:0 auto .2rem } }

/* TESTE S1 v2 (07/10, só na prévia): a folhagem da arte vira MOLDURA da metade do
   texto. O fundo é a arte com o miolo coberto pela cor do papel; o texto fica no meio,
   longe das bordas, onde a folhagem aparece. */
.corp-camp__txt--moldura{ background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#F0E0C6; align-self:stretch; display:flex; flex-direction:column; justify-content:center }
@media (min-width:861px){
  .corp-camps .corp-camp__txt.corp-camp__txt--moldura{ padding:clamp(3rem,7%,5rem) clamp(3.2rem,11%,6.5rem); max-width:none }
  .corp-camp__txt--moldura .emp-t{ font-size:clamp(1.9rem,3vw,2.7rem) }
}
@media (max-width:860px){
  .corp-camps .corp-camp__txt.corp-camp__txt--moldura{ padding:2.2rem 2.4rem 2rem }
}
/* celular: com o link embaixo do botão, o slide passava ~40 px da tela */
@media (max-width:599px){
  .corp-camps .corp-camp .corp-camp__foto{ height:min(29svh,232px) }
  .corp-camps .corp-camp__txt.corp-camp__txt--moldura{ padding:1.5rem 1.7rem 1.3rem }
  .corp-camps .v3-acoes{ margin-top:.8rem; gap:.4rem }
}

/* S1 · foto + moldura como UM bloco só (Gustavo, 07/10): mesma altura, sem vão
   entre as duas, o texto contido dentro da moldura. */
@media (min-width:861px){
  .corp-camps .corp-camp:has(.corp-camp__txt--moldura){ column-gap:0; grid-template-columns:calc(var(--camp-h) * .75) calc(var(--camp-h) * .9) }
  .corp-camps .corp-camp__txt.corp-camp__txt--moldura{ height:var(--camp-h); box-sizing:border-box; overflow:hidden;
    padding:clamp(2.2rem,6%,3.6rem) clamp(2.6rem,9%,4.4rem) }
  .corp-camp__txt--moldura .emp-t{ font-size:clamp(1.7rem,2.6vw,2.4rem) }
  .corp-camp__txt--moldura .emp-sub{ font-size:.95rem; line-height:1.55 }
  .corp-camp__txt--moldura .corp-camp__dest{ font-size:.92rem }
}
/* o link "Ver todas as possibilidades" sobre a moldura: fundo creme para não sumir nas folhas */
.corp-camp__txt--moldura .corp-link{ background:rgba(242,236,224,.94); padding:0 .7rem; border-bottom-width:2px }
@media (min-width:861px){ .corp-camp__txt--moldura .v3-acoes{ flex-direction:column; align-items:flex-start; gap:.6rem } }