/* Vidalí — proposta v2. Tokens únicos para todo o site; cada especialidade ajusta só o acento (data-tema). */
:root {
  --petroleo: #02524A;      /* cor principal (D-09) */
  --p-950: #011A17;
  --p-900: #01221E;
  --p-800: #013A34;
  --p-600: #0B6A5F;
  --salvia: #4E7F72;
  --salvia-clara: #6FA596;  /* copa da árvore sobre fundo escuro */
  --menta: #A9D4C9;
  --menta-media: #8CC2B4;   /* copa da árvore sobre petróleo (hero e CTA final) */
  --bege: #E9DFD0;
  --bege-sombra: #DCCFBC;
  --off: #F7F3EC;
  --creme: #F2E5D5;
  --off-rosado: #FAF6F1;    /* fundo da Psicologia */
  --rosa-nevoa: #F1E3E1;
  --areia-rosada: #EFE2DA;
  --areia-rosada-escura: #E7D6CC;
  --branco: #FFFFFF;
  --tinta: #0D2B27;
  --tinta-2: #4A615C;
  --terracota: #BC541C;
  --terracota-luz: #E08A57;
  --terracota-suave: #C77A54;
  --rosa: #CC9AA2;
  --linha: rgba(2, 82, 74, .14);
  --linha-escura: rgba(169, 212, 201, .18);
  --fonte-titulo: Fraunces, Georgia, serif;
  --fonte-texto: Manrope, system-ui, sans-serif;
  --raio: 22px;
  --sombra: 0 30px 60px -32px rgba(1, 34, 30, .45);
  --acento: var(--petroleo);
  --acento-suave: rgba(2, 82, 74, .08);
  --pendente-cor: var(--tinta-2);
  --pendente-borda: rgba(74, 97, 92, .4);
  --ramo-estrela: var(--terracota);
}
[data-tema="neurofuncional"] { --acento: var(--p-600); --acento-suave: rgba(169,212,201,.14); }
[data-tema="pilates"] { --acento: var(--salvia); --acento-suave: rgba(78,127,114,.1); }
[data-tema="psicologia"] { --acento: var(--salvia); --acento-suave: rgba(204,154,162,.16); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--off); color: var(--tinta); font: 400 17px/1.7 var(--fonte-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, blockquote { font-family: var(--fonte-titulo); font-weight: 400; margin: 0; letter-spacing: -.02em; font-variation-settings: "opsz" 100; text-wrap: balance; }
em { font-style: italic; }
a { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--petroleo); color: var(--off); }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; border-radius: 6px; }
.moldura { width: min(1200px, 100% - 40px); margin-inline: auto; position: relative; }
.secao { position: relative; padding-block: clamp(80px, 11vw, 140px); overflow-x: clip; }
html { overflow-x: clip; }
.secao--escura { background: var(--p-900); color: var(--off); --linha: var(--linha-escura); --pendente-cor: var(--menta); --pendente-borda: rgba(169,212,201,.4); --pendente-fundo: rgba(224,138,87,.18); --pendente-id: var(--terracota-luz); }
.secao--bege { background: var(--bege); }
.rotulo { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--acento); margin: 0 0 18px; }
.rotulo::before { content: ""; width: 22px; height: 1px; background: var(--terracota); }
.secao--escura .rotulo { color: var(--menta); }
.titulo { font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.05; font-weight: 300; max-width: 18ch; }
.titulo em { color: var(--acento); }
.secao--escura .titulo em { color: var(--menta); }
.apoio { color: var(--tinta-2); font-size: 1.08rem; max-width: 56ch; }
.secao--escura .apoio { color: rgba(247,243,236,.75); }
.cabecalho { margin-bottom: clamp(36px, 5vw, 60px); display: grid; gap: 14px; }
.fx-progresso { background: linear-gradient(90deg, var(--terracota), var(--menta)); height: 2px; }

/* Aviso de demonstração */
.aviso-demo { background: var(--terracota); color: var(--branco); font-size: .82rem; text-align: center; padding: 8px 16px; position: relative; z-index: 81; }
.aviso-demo strong { font-weight: 700; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; border: 1px solid transparent; font: 700 .92rem/1 var(--fonte-texto); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.botao--primario { background: var(--petroleo); color: var(--off); }
.botao--primario::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--p-950); transform: scale(0); transform-origin: var(--mx, 50%) var(--my, 50%); transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.botao--primario:hover::before { transform: scale(1.8); }
.botao--claro { background: var(--off); color: var(--petroleo); }
.botao--claro:hover { background: var(--branco); box-shadow: 0 10px 30px -10px rgba(169,212,201,.7); }
.botao--contorno { border-color: currentColor; color: inherit; background: transparent; }
.botao--contorno:hover { background: var(--acento-suave); }
.botao--pequeno { padding: 11px 18px; font-size: .84rem; }
.botao .seta { transition: transform .35s; }
.botao:hover .seta { transform: translateX(4px); }
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 80; transition: background .4s, box-shadow .4s; }
.rolou .topo { background: rgba(247,243,236,.9); box-shadow: 0 1px 0 var(--linha); backdrop-filter: blur(14px); }
.topo--escuro { color: var(--off); background: var(--p-950); }
.rolou .topo--escuro { background: rgba(1,34,30,.88); box-shadow: 0 1px 0 var(--linha-escura); }
.topo__barra { display: flex; align-items: center; gap: 24px; height: 78px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--salvia); }
.topo--escuro .marca { color: var(--rosa); }
.marca__arvore { width: 30px; height: 46px; }
.marca__nome { width: 104px; height: 28px; display: block; background: currentColor; -webkit-mask: url(../marca/logotipo-vidali.svg) no-repeat left center / contain; mask: url(../marca/logotipo-vidali.svg) no-repeat left center / contain; }
.menu { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.menu a { font-size: .9rem; font-weight: 600; text-decoration: none; padding: 9px 14px; border-radius: 999px; opacity: .8; transition: opacity .25s, background .25s; }
.menu a:hover, .menu a[aria-current="page"] { opacity: 1; background: var(--acento-suave); }
.topo--escuro .menu a:hover, .topo--escuro .menu a[aria-current="page"] { background: rgba(169,212,201,.12); }
.menu__botao { display: none; }

/* Árvore original (D-17): o desenho nunca muda; só luz, máscara de revelação e movimento */
.arvore { position: relative; aspect-ratio: 61.33 / 98.06; width: 100%; --arvore-topo: var(--salvia); --arvore-raiz: var(--terracota); }
.arvore__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arvore__svg svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 var(--brilho, 0px) var(--brilho-cor, rgba(169,212,201,.0))); transition: filter 1.2s ease; }
.arvore__luz, .arvore__raiz-luz { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(../marca/arvore-original.svg) no-repeat center / contain; mask: url(../marca/arvore-original.svg) no-repeat center / contain; }
.arvore__luz { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%) 0 0 / 250% 100% no-repeat; mix-blend-mode: soft-light; animation: luz 7s ease-in-out infinite; }
@keyframes luz { 0% { background-position: 140% 0; } 55%, 100% { background-position: -60% 0; } }
.arvore__raiz-luz { background: radial-gradient(60% 30% at 50% 82%, rgba(255,190,140,.95), transparent 70%); mix-blend-mode: screen; opacity: 0; animation: sinapse 4.5s ease-in-out infinite; }
@keyframes sinapse { 0%, 100% { opacity: 0; } 45% { opacity: .9; } }
.arvore--viva .arvore__inner { animation: respira 8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes respira { 50% { transform: scale(1.012) rotate(.4deg); } }
.arvore__inner { position: absolute; inset: 0; }
.arvore[data-draw] .arvore__inner { clip-path: inset(100% -10% -10% -10%); transition: clip-path 2.4s cubic-bezier(.65,.05,.25,1) var(--d, 0ms); }
.arvore[data-draw].is-in .arvore__inner { clip-path: inset(-10% -10% -10% -10%); }
.reduz-movimento .arvore[data-draw] .arvore__inner { clip-path: none; }
.arvore--brilho { --brilho: 18px; --brilho-cor: rgba(169,212,201,.35); }
.arvore--escura { --arvore-topo: var(--salvia-clara); }

/* Cards */
.card { position: relative; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); padding: 30px; overflow: hidden; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .4s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: rgba(2,82,74,.28); }
.card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.card p { margin: 0; color: var(--tinta-2); }
.secao--escura .card { background: rgba(2,82,74,.25); border-color: var(--linha-escura); }
.secao--escura .card p { color: rgba(247,243,236,.72); }
.grade { display: grid; gap: 20px; grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr)); }

/* Cards de especialidade */
.esp { display: flex; flex-direction: column; min-height: 440px; padding: 0; text-decoration: none; color: inherit; }
.esp__arte { position: relative; flex: 1; min-height: 240px; overflow: hidden; display: grid; place-items: center; }
.esp__arte .arvore { width: 34%; max-width: 150px; }
/* Os três cards seguem o mesmo visual (pedido do responsável, 05/11): fundo claro com a árvore no centro */
.esp__arte { background: linear-gradient(160deg, var(--bege), var(--creme)); }
.esp__corpo { padding: 26px 28px 30px; display: grid; gap: 8px; }
.esp__corpo h3 { font-size: 1.9rem; }
.esp__ir { margin-top: 8px; font-weight: 700; font-size: .9rem; color: var(--petroleo); display: inline-flex; gap: 8px; }
.esp:hover .esp__ir .seta { transform: translateX(5px); }
.esp__ir .seta { transition: transform .35s; }

/* WhatsApp flutuante (D-14) */
.wa { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wa__botao { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 18px; border-radius: 999px; border: 0; cursor: pointer; background: var(--petroleo); color: var(--off); font: 700 .92rem var(--fonte-texto); box-shadow: 0 18px 40px -16px rgba(1,34,30,.7), 0 0 0 0 rgba(169,212,201,.5); animation: chama 3.2s ease-out 2s 3; transition: transform .3s, background .3s; }
.wa__botao:hover { transform: translateY(-3px); background: var(--p-800); }
@keyframes chama { 0% { box-shadow: 0 18px 40px -16px rgba(1,34,30,.7), 0 0 0 0 rgba(169,212,201,.55); } 100% { box-shadow: 0 18px 40px -16px rgba(1,34,30,.7), 0 0 0 18px rgba(169,212,201,0); } }
.wa__icone { width: 26px; height: 26px; }
.wa__painel { width: min(340px, calc(100vw - 36px)); background: var(--branco); color: var(--tinta); border-radius: 22px; box-shadow: 0 30px 70px -20px rgba(1,34,30,.45); border: 1px solid var(--linha); overflow: hidden; transform-origin: bottom right; animation: abre .35s cubic-bezier(.2,.8,.2,1); }
@keyframes abre { from { opacity: 0; transform: scale(.92) translateY(8px); } }
.wa__topo { background: var(--petroleo); color: var(--off); padding: 18px 20px; display: flex; gap: 12px; align-items: center; }
.wa__topo .arvore { width: 26px; --arvore-topo: var(--menta); }
.wa__topo strong { display: block; font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.15rem; }
.wa__topo span { font-size: .8rem; opacity: .8; }
.wa__corpo { padding: 16px 18px 18px; display: grid; gap: 8px; }
.wa__corpo p { margin: 0 0 4px; font-size: .9rem; color: var(--tinta-2); }
.wa__opcao { text-align: left; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linha); background: var(--off); font: 600 .9rem var(--fonte-texto); color: var(--tinta); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; transition: background .25s, border-color .25s; }
.wa__opcao:hover { background: var(--acento-suave); border-color: rgba(2,82,74,.3); }
.wa__aviso { font-size: .8rem; color: var(--terracota); margin-top: 6px; }

/* Rodapé */
.rodape { background: var(--p-950); color: rgba(247,243,236,.75); padding-block: 80px 110px; --linha: var(--linha-escura); --pendente-cor: var(--menta); --pendente-borda: rgba(169,212,201,.4); --pendente-fundo: rgba(224,138,87,.18); --pendente-id: var(--terracota-luz); }
.rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.rodape .marca { color: var(--rosa); }
.rodape h3 { font-family: var(--fonte-texto); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--menta); font-weight: 700; margin-bottom: 14px; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--off); }
.rodape__base { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--linha-escura); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Responsivo */
@media (max-width: 960px) {
  .grade { --col: 1 !important; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .menu { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 10px; background: var(--off); color: var(--tinta); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
  .topo--escuro .menu { background: var(--p-950); color: var(--off); }
  .menu a { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 400; }
  .menu-aberto .menu { opacity: 1; visibility: visible; }
  .rolou .topo { backdrop-filter: none; }
  .menu__botao { display: grid; gap: 6px; place-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; color: inherit; cursor: pointer; margin-left: auto; }
  .menu__botao span:not(.sr-only) { width: 18px; height: 1.5px; background: currentColor; transition: transform .3s; }
  .menu-aberto .menu__botao span:nth-child(2) { transform: translateY(3.75px) rotate(45deg); }
  .menu-aberto .menu__botao span:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); }
  .topo__agendar { display: none; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .rodape__grade { grid-template-columns: 1fr; }
  .wa__botao { padding: 0 18px; }
  .wa__botao .wa__texto { display: none; }
  .wa__botao { width: 58px; padding: 0; justify-content: center; }
}