/* =========================================================
   Expert em Atendimento Social — página de vendas
   Conceito: "a conversa". Fundo claro rosado, vinho e cobre; balões de
   fala, roteiro de entrevista, conversas antes x depois e uma caixa de
   modelos em papel. Bricolage Grotesque nos títulos, DM Sans no texto.
   ========================================================= */

:root {
  --vinho: #5C2333;
  --vinho-2: #7A2E44;
  --vinho-esc: #3B1420;
  --cobre: #C8643A;
  --cobre-cl: #E9865A;
  --blush: #F5E1DD;
  --rosa: #FBF3F1;
  --papel: #FFFDF9;
  --texto: #3A2229;
  --mut: #7A5F66;
  --linha: rgba(92, 35, 51, .14);

  --disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --gut: 24px;
  --sec: clamp(72px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--rosa); color: var(--texto); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
body > section, body > footer, body > header { overflow-x: clip; }
:focus-visible { outline: 3px solid var(--cobre); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: var(--sec) 0; position: relative; }
.vinho { background: var(--vinho); color: #fff; }
.blush { background: var(--blush); }
.papel-bg { background: var(--papel); }

/* tipografia */
.h { font-family: var(--disp); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; color: var(--vinho-esc); font-variation-settings: 'opsz' 96; }
.vinho .h { color: #fff; }
.h-xl { font-size: clamp(42px, 5.8vw, 80px); }
.h-l { font-size: clamp(32px, 4.2vw, 56px); }
.h-m { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; line-height: 1.15; }
.h .c { color: var(--cobre); }
.vinho .h .c { color: var(--cobre-cl); }
.h .sub { display: inline-block; position: relative; }
.h .sub::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .3em; background: rgba(200, 100, 58, .28); border-radius: 4px; z-index: -1; }
.pill { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); letter-spacing: .02em; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--vinho); box-shadow: 0 1px 0 rgba(92, 35, 51, .08); }
.pill svg { width: 16px; height: 16px; color: var(--cobre); }
.vinho .pill { background: rgba(255, 255, 255, .1); color: #fff; }
.vinho .pill svg { color: var(--cobre-cl); }
.lead { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; }
.cab { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.cab .h { margin-top: 18px; }
.cab p { margin-top: 16px; color: var(--mut); }
.vinho .cab p { color: rgba(255, 255, 255, .78); }
.cab.centro { margin-left: auto; margin-right: auto; text-align: center; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 16.5px/1 var(--sans); text-decoration: none; padding: 19px 28px; border-radius: 16px; border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-cobre { background: var(--cobre); color: #fff; box-shadow: 0 6px 0 #9E4823; }
.btn-cobre:hover { transform: translateY(2px); box-shadow: 0 4px 0 #9E4823; }
.btn-vinho { background: var(--vinho); color: #fff; box-shadow: 0 6px 0 var(--vinho-esc); }
.btn-vinho:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--vinho-esc); }
.btn-claro { background: #fff; color: var(--vinho); box-shadow: 0 6px 0 rgba(0, 0, 0, .18); }
.btn-claro:hover { transform: translateY(2px); box-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.btn-linha { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }

/* balão de fala */
.balao { position: relative; background: #fff; color: var(--texto); border-radius: 22px; padding: 14px 18px; font-size: 15.5px; line-height: 1.45; box-shadow: 0 10px 24px -14px rgba(92, 35, 51, .45); }
.balao::after { content: ''; position: absolute; bottom: -7px; left: 22px; width: 18px; height: 18px; background: inherit; transform: rotate(45deg); border-radius: 0 0 4px 0; }
.balao.dir::after { left: auto; right: 22px; }
.balao.vinho-b { background: var(--vinho); color: #fff; }
.balao.cobre-b { background: var(--cobre); color: #fff; }
.digitando { display: inline-flex; gap: 5px; padding: 16px 18px; }
.digitando i { width: 8px; height: 8px; border-radius: 50%; background: var(--mut); animation: pulo 1.2s infinite ease-in-out; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* logo */
.lg-vinho { --lg-top: #5C2333; --lg-base: #C8643A; --lg-nome: #C8643A; --lg-sob: #5C2333; }
.lg-br { --lg-top: #FFFFFF; --lg-base: #E9865A; --lg-nome: #E9865A; --lg-sob: #FFFFFF; }

/* =========================================================
   TOPO + HERO
   ========================================================= */
.topo { position: relative; z-index: 10; }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 88px; }
.topo-logo svg { width: 160px; height: auto; display: block; }
.topo nav { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 600; color: var(--vinho); }
.topo nav a { text-decoration: none; }
.topo nav a:not(.btn):hover { color: var(--cobre); }
.topo .btn { padding: 13px 20px; font-size: 15px; border-radius: 12px; box-shadow: 0 4px 0 #9E4823; }

.hero { padding: 24px 0 90px; position: relative; }
.hero::before { content: ''; position: absolute; right: -10%; top: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(200, 100, 58, .14), transparent 65%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center; position: relative; }
.hero h1 { margin-top: 22px; }
.hero .lead { margin-top: 22px; max-width: 560px; color: var(--mut); }
.hero .lead b { color: var(--vinho); }
.hero-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 34px; }
.preco-mini b { display: block; font: 700 22px/1.1 var(--disp); color: var(--vinho-esc); letter-spacing: -.02em; }
.preco-mini span { font-size: 14px; color: var(--mut); }
.numeros { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 14px 36px; margin-top: 40px; }
.numeros b { display: block; font: 700 clamp(28px, 2.8vw, 36px)/1 var(--disp); letter-spacing: -.04em; color: var(--vinho); }
.numeros span { display: block; font-size: 13.5px; color: var(--mut); margin-top: 6px; }

.hero-foto { position: relative; justify-self: center; width: min(100%, 470px); aspect-ratio: 470 / 560; }
.bolha { position: absolute; inset: 0 0 56px; border-radius: 48px; background: linear-gradient(160deg, var(--vinho-2), var(--vinho) 60%, var(--vinho-esc)); overflow: hidden; }
.bolha::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 30%, rgba(233, 134, 90, .45), transparent 70%); }
.bolha img { position: absolute; left: 50%; bottom: 0; height: 104%; width: auto; max-width: none; transform: translateX(-50%); }
.bolha-rabo { position: absolute; left: 70px; bottom: 26px; width: 60px; height: 60px; background: var(--vinho-esc); clip-path: polygon(0 0, 100% 0, 15% 100%); }
.hero-foto .balao { position: absolute; z-index: 3; max-width: 230px; }
.hero-foto .b1 { left: -60px; top: 50px; }
.hero-foto .b2 { right: -36px; top: 190px; }
.hero-foto .b3 { right: 10px; bottom: 0; }

/* =========================================================
   PARA QUEM É (conversa)
   ========================================================= */
.conversa-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.thread { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; background: #fff; border-radius: 30px; box-shadow: 0 30px 60px -40px rgba(92, 35, 51, .5); }
.thread-topo { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.thread-topo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.thread-topo b { display: block; font-size: 15.5px; color: var(--vinho-esc); }
.thread-topo span { font-size: 12.5px; color: #2E9E5B; }
.msg { max-width: 82%; padding: 12px 16px; border-radius: 18px; font-size: 15.5px; line-height: 1.45; }
.msg.eu { align-self: flex-end; background: var(--blush); color: var(--vinho-esc); border-bottom-right-radius: 6px; }
.msg.ela { align-self: flex-start; background: var(--vinho); color: #fff; border-bottom-left-radius: 6px; }
.msg.ela b { color: #FFD3BF; }
.msg .hora { display: block; text-align: right; font-size: 11px; opacity: .55; margin-top: 4px; }
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mosaico figure { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; }
.mosaico figure:nth-child(1) { border-bottom-left-radius: 6px; }
.mosaico figure:nth-child(2) { margin-top: 40px; border-bottom-right-radius: 6px; }
.mosaico figure:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 8; margin-top: -26px; border-top-left-radius: 6px; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico figcaption { position: absolute; left: 14px; bottom: 14px; }

/* =========================================================
   ROTEIRO (5 fases)
   ========================================================= */
.roteiro-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.roteiro-lado { position: sticky; top: 30px; }
.roteiro-lado .foto { margin-top: 28px; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3.2; position: relative; }
.roteiro-lado .foto img { width: 100%; height: 100%; object-fit: cover; }
.roteiro-lado .foto .balao { position: absolute; left: 16px; bottom: 22px; max-width: 250px; }
.folha { background: var(--papel); border-radius: 6px 6px 26px 26px; padding: 34px 36px 30px 64px; position: relative; box-shadow: 0 2px 0 rgba(92, 35, 51, .06), 0 30px 60px -40px rgba(92, 35, 51, .55); background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(92, 35, 51, .07) 35px 36px); }
.folha::before { content: ''; position: absolute; left: 40px; top: 0; bottom: 0; width: 2px; background: rgba(200, 100, 58, .45); }
.folha-topo { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 2px solid var(--vinho); }
.folha-topo b { font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--vinho); }
.folha-topo span { font-size: 13px; color: var(--mut); }
.fase { border-bottom: 1px dashed var(--linha); }
.fase summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: center; padding: 18px 0; }
.fase summary::-webkit-details-marker { display: none; }
.fase .caixa { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--vinho); display: grid; place-items: center; transition: background-color .2s ease; }
.fase .caixa svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.fase[open] .caixa { background: var(--cobre); border-color: var(--cobre); }
.fase[open] .caixa svg { opacity: 1; }
.fase summary b { display: block; font: 700 clamp(19px, 1.8vw, 23px)/1.2 var(--disp); letter-spacing: -.02em; color: var(--vinho-esc); }
.fase summary small { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cobre); }
.fase summary .seta { width: 22px; height: 22px; color: var(--vinho); transition: transform .3s ease; }
.fase[open] summary .seta { transform: rotate(90deg); }
.fase .corpo { padding: 0 0 22px 40px; }
.fase .corpo li { position: relative; padding: 4px 0 4px 20px; font-size: 16px; }
.fase .corpo li::before { content: ''; position: absolute; left: 0; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--cobre); }
.fase .corpo p { font-size: 14px; font-weight: 700; color: var(--vinho); margin: 8px 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips span { font-size: 14px; padding: 7px 12px; border-radius: 999px; background: var(--blush); color: var(--vinho-esc); }

/* =========================================================
   TÉCNICAS + PÚBLICOS
   ========================================================= */
.nuvem { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; max-width: 980px; margin: 0 auto; }
.nuvem .balao { font: 700 clamp(17px, 1.8vw, 23px)/1.2 var(--disp); letter-spacing: -.015em; padding: 18px 24px; }
.nuvem .balao:nth-child(3n+1) { background: var(--cobre); color: #fff; }
.nuvem .balao:nth-child(3n+2) { background: #fff; color: var(--vinho-esc); }
.nuvem .balao:nth-child(3n) { background: var(--vinho-2); color: #fff; }
.nuvem .balao:nth-child(even)::after { left: auto; right: 22px; }
.nuvem .balao:nth-child(4n) { transform: rotate(-2deg); }
.nuvem .balao:nth-child(4n+2) { transform: rotate(1.5deg); }
.tipos { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.publicos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.pub { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 3 / 4; }
.pub:nth-child(even) { border-radius: 26px 26px 26px 6px; }
.pub img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pub:hover img { transform: scale(1.05); }
.pub::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(59, 20, 32, .9)); }
.pub span { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; font: 700 20px/1.15 var(--disp); color: #fff; letter-spacing: -.02em; }
.mais-pub { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mais-pub span { font-size: 14.5px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }

/* =========================================================
   ANTES x DEPOIS (duas conversas)
   ========================================================= */
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 980px; margin: 0 auto; }
.tela { border-radius: 30px; padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.tela-topo { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid currentColor; border-color: rgba(92, 35, 51, .14); }
.tela-topo i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.tela-topo i svg { width: 20px; height: 20px; }
.tela-topo b { font: 700 18px/1.2 var(--disp); }
.tela.comum { background: #EFE6E4; color: var(--mut); }
.tela.comum .tela-topo i { background: #D9CACA; color: #8D7378; }
.tela.comum .msg { align-self: flex-start; background: #fff; color: var(--mut); border-bottom-left-radius: 6px; max-width: 88%; }
.tela.comum .msg::before { content: '…? '; color: #B49AA0; font-weight: 700; }
.tela.expert { background: var(--vinho); color: #fff; box-shadow: 0 40px 70px -40px rgba(59, 20, 32, .9); }
.tela.expert .tela-topo { border-color: rgba(255, 255, 255, .16); }
.tela.expert .tela-topo i { background: var(--cobre); color: #fff; }
.tela.expert .msg { align-self: flex-end; background: #fff; color: var(--vinho-esc); border-bottom-right-radius: 6px; max-width: 88%; }
.tela.expert .msg::after { content: ' ✓✓'; color: #4FB3E8; font-size: 12px; font-weight: 700; }

/* =========================================================
   CAIXA DE MODELOS
   ========================================================= */
.caixa-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 70px); align-items: center; }
.pilha { position: relative; height: 500px; }
.doc { position: absolute; width: 250px; aspect-ratio: 210 / 297; background: var(--papel); border-radius: 6px; padding: 22px 20px; box-shadow: 0 18px 40px -16px rgba(59, 20, 32, .45); border: 1px solid rgba(92, 35, 51, .08); }
.doc b { display: block; font: 700 14px/1.25 var(--disp); color: var(--vinho-esc); padding-bottom: 10px; border-bottom: 2px solid var(--cobre); }
.doc i { display: block; height: 6px; border-radius: 3px; background: rgba(92, 35, 51, .12); margin-top: 11px; }
.doc i:nth-of-type(3n) { width: 70%; }
.doc i:nth-of-type(4n) { width: 85%; }
.doc .rot { position: absolute; right: 14px; bottom: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cobre); }
.doc:nth-child(1) { left: 0; top: 0; transform: rotate(-7deg); }
.doc:nth-child(2) { left: 20%; top: 56px; transform: rotate(-1deg); z-index: 2; }
.doc:nth-child(3) { left: 40%; top: 112px; transform: rotate(5deg); z-index: 3; }
.pilha .selo { position: absolute; right: 2%; bottom: 0; z-index: 4; width: 132px; height: 132px; border-radius: 50%; background: var(--cobre); color: #fff; display: grid; place-items: center; text-align: center; transform: rotate(-10deg); box-shadow: 0 16px 30px -12px rgba(158, 72, 35, .7); }
.pilha .selo b { display: block; font: 800 46px/.9 var(--disp); }
.pilha .selo span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; max-width: 90px; margin: 4px auto 0; }
.modelos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.modelos li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: #fff; border-radius: 16px; font-size: 15px; line-height: 1.4; color: var(--vinho-esc); }
.modelos svg { width: 22px; height: 22px; color: var(--cobre); flex: none; }

/* =========================================================
   PROFESSORA
   ========================================================= */
.prof-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.prof-foto { position: relative; }
.prof-foto .ft { border-radius: 40px 40px 40px 8px; overflow: hidden; aspect-ratio: 4 / 5; }
.prof-foto .ft img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.prof-foto .balao { position: absolute; right: -24px; bottom: 40px; max-width: 250px; font: 600 17px/1.35 var(--disp); }
.prof-txt > p { margin-top: 18px; }
.prof-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.prof-nums div { padding: 16px 18px; background: var(--rosa); border-radius: 18px; }
.prof-nums b { display: block; font: 700 28px/1 var(--disp); letter-spacing: -.03em; color: var(--vinho); }
.prof-nums span { display: block; font-size: 13.5px; color: var(--mut); margin-top: 6px; }
.prof-txt ul { margin-top: 22px; display: grid; gap: 8px; }
.prof-txt li { display: flex; gap: 10px; font-size: 15.5px; }
.prof-txt li svg { width: 20px; height: 20px; color: var(--cobre); flex: none; margin-top: 2px; }

/* =========================================================
   OFERTA (ingresso)
   ========================================================= */
.ingresso { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); background: var(--papel); border-radius: 30px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6); color: var(--texto); position: relative; }
.ingresso::before, .ingresso::after { content: ''; position: absolute; left: calc(57.5% - 18px); width: 36px; height: 36px; border-radius: 50%; background: var(--vinho); }
.ingresso::before { top: -18px; } .ingresso::after { bottom: -18px; }
.ing-esq { padding: 38px 40px; border-right: 2px dashed rgba(92, 35, 51, .25); }
.ingresso .pill { background: var(--blush); color: var(--vinho); }
.ingresso .pill svg { color: var(--cobre); }
.ing-esq h3 { font: 700 clamp(26px, 2.8vw, 34px)/1.05 var(--disp); letter-spacing: -.03em; color: var(--vinho-esc); margin-top: 16px; }
.ing-esq ul { margin-top: 22px; display: grid; gap: 10px; }
.ing-esq li { display: flex; gap: 10px; font-size: 15.5px; }
.ing-esq li svg { width: 20px; height: 20px; color: var(--cobre); flex: none; margin-top: 2px; }
.ing-dir { padding: 38px 34px; display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--blush); }
.ing-dir .de { font-size: 15px; color: var(--mut); }
.ing-dir .de s { color: var(--vinho); }
.ing-dir .valor { margin-top: 10px; display: flex; justify-content: center; align-items: baseline; gap: 6px; color: var(--vinho-esc); }
.ing-dir .valor small { font-size: 17px; font-weight: 700; }
.ing-dir .valor b { font: 800 clamp(56px, 6vw, 70px)/.9 var(--disp); letter-spacing: -.05em; }
.ing-dir .vista { margin-top: 8px; font-size: 16px; }
.ing-dir .vista b { color: var(--vinho); }
.ing-dir .btn { margin-top: 24px; width: 100%; }
.ing-dir .seguro { margin-top: 14px; font-size: 13px; color: var(--mut); }
.oferta-nota { text-align: center; margin-top: 30px; color: rgba(255, 255, 255, .8); font-size: 15px; }

/* =========================================================
   FAQ (perguntas e respostas)
   ========================================================= */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { margin-top: 14px; }
.faq .abre { display: flex; gap: 10px; align-items: flex-end; }
.faq .abre img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.faq .abre p { background: #fff; padding: 15px 20px; border-radius: 22px 22px 22px 6px; font-size: 16px; box-shadow: 0 10px 24px -18px rgba(92, 35, 51, .5); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: flex-end; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { max-width: 86%; background: var(--vinho); color: #fff; padding: 15px 20px; border-radius: 22px 22px 6px 22px; font-weight: 600; font-size: 16.5px; display: inline-flex; align-items: center; gap: 12px; transition: background-color .2s ease; }
.faq summary span svg { width: 18px; height: 18px; flex: none; transition: transform .3s ease; }
.faq details[open] summary span svg { transform: rotate(45deg); }
.faq summary:hover span { background: var(--vinho-2); }
.faq .resp { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; }
.faq .resp img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.faq .resp p { max-width: 86%; background: #fff; padding: 15px 20px; border-radius: 22px 22px 22px 6px; font-size: 16px; box-shadow: 0 10px 24px -18px rgba(92, 35, 51, .5); }
.faq-acao { text-align: center; margin-top: 40px; }
.faq-acao p { color: var(--mut); margin-bottom: 14px; }

/* =========================================================
   FECHAMENTO + RODAPÉ + BARRA
   ========================================================= */
.fecho { overflow: hidden; padding-bottom: 0; }
.fecho-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: end; }
.fecho-txt { padding-bottom: var(--sec); }
.fecho-txt .lead { margin-top: 20px; color: rgba(255, 255, 255, .8); max-width: 520px; }
.fecho-acao { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.fecho-foto { position: relative; justify-self: center; width: min(100%, 400px); aspect-ratio: 400 / 520; }
.fecho-foto .bolha { inset: 0 0 0; border-radius: 48px 48px 0 0; background: linear-gradient(160deg, var(--cobre-cl), var(--cobre) 55%, #9E4823); }
.fecho-foto .balao { position: absolute; left: -40px; top: 60px; z-index: 3; font: 700 18px/1.3 var(--disp); color: var(--vinho-esc); }

.rodape { background: var(--vinho-esc); color: rgba(255, 255, 255, .7); padding: 44px 0 40px; font-size: 14.5px; }
.rodape-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.rodape svg.logo { width: 146px; height: auto; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.rodape nav a { text-decoration: none; }
.rodape nav a:hover { color: #fff; }
.rodape small { width: 100%; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.creditos { width: 100%; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .45); margin-top: -8px; }
.creditos a { color: rgba(255, 255, 255, .65); }

.barra { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px; background: var(--vinho); color: #fff; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45); transform: translateY(140%); transition: transform .35s ease; }
.barra.on { transform: none; }
.barra b { display: block; font: 700 16px/1.1 var(--disp); }
.barra span { font-size: 12.5px; opacity: .75; }
.barra .btn { padding: 14px 18px; font-size: 15px; box-shadow: 0 4px 0 #9E4823; }

@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .msg.rv { transform: translateY(10px) scale(.96); }
  .js .msg.rv.in { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .digitando i { animation: none; } }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-foto .b1 { left: -20px; }
  .hero-foto .b2 { right: -10px; }
  .numeros { grid-template-columns: repeat(2, auto); }
  .publicos { grid-template-columns: 1fr 1fr; }
  .pilha { height: 420px; }
  .doc { width: 220px; }
}
@media (max-width: 860px) {
  :root { --gut: 20px; }
  .topo nav a:not(.btn) { display: none; }
  .hero-grid, .conversa-grid, .roteiro-grid, .caixa-grid, .prof-grid, .fecho-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-foto { width: min(100%, 400px); margin-top: 20px; }
  .roteiro-lado { position: static; }
  .duas { grid-template-columns: 1fr; }
  .ingresso { grid-template-columns: 1fr; }
  .ingresso::before, .ingresso::after { display: none; }
  .ing-esq { border-right: 0; border-bottom: 2px dashed rgba(92, 35, 51, .25); }
  .prof-foto { max-width: 420px; }
  .fecho-txt { padding-bottom: 24px; }
  .fecho-foto { width: min(100%, 320px); }
  .barra { display: flex; }
  .rodape { padding-bottom: 110px; }
}
@media (max-width: 640px) {
  :root { --gut: 16px; }
  body { font-size: 16px; }
  .topo-in { height: 74px; }
  .topo-logo svg { width: 132px; }
  .topo .btn { padding: 11px 16px; font-size: 14px; }
  .hero { padding-bottom: 60px; }
  .hero-acao { flex-direction: column; align-items: stretch; }
  .hero-acao .btn { width: 100%; }
  .preco-mini { text-align: center; }
  .numeros { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-foto .balao { max-width: 190px; font-size: 13.5px; padding: 11px 14px; }
  .hero-foto .b1 { left: -6px; top: 20px; }
  .hero-foto .b2 { right: -6px; top: 150px; }
  .thread { padding: 22px 16px; border-radius: 24px; }
  .msg { max-width: 90%; font-size: 15px; }
  .mosaico figure:nth-child(2) { margin-top: 24px; }
  .folha { padding: 26px 18px 22px 40px; }
  .folha::before { left: 24px; }
  .fase .corpo { padding-left: 0; }
  .folha-topo { flex-direction: column; gap: 6px; }
  .nuvem .balao { font-size: 16px; padding: 13px 18px; }
  .publicos { gap: 10px; }
  .pub span { font-size: 17px; left: 12px; bottom: 12px; }
  .pilha { height: 340px; }
  .doc { width: 170px; padding: 16px 14px; }
  .doc b { font-size: 12px; }
  .pilha .selo { width: 104px; height: 104px; }
  .pilha .selo b { font-size: 36px; }
  .modelos { grid-template-columns: 1fr; }
  .prof-foto .balao { right: 8px; bottom: 20px; font-size: 15px; }
  .prof-nums { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .prof-nums div { padding: 12px; }
  .prof-nums b { font-size: 22px; }
  .ing-esq, .ing-dir { padding: 28px 22px; }
  .faq summary span, .faq .resp p { max-width: 94%; }
  .fecho-acao .btn { width: 100%; }
  .fecho-foto .balao { left: -6px; top: 30px; font-size: 15px; }
  .rodape-in { flex-direction: column; align-items: flex-start; }
}