:root{
  /* púrpura e lilás (as cores da Adriana) + dourado do girassol, a cor complementar */
  --fundo:#2a1640; --fundo-2:#3a2058; --fundo-3:#1d0e2c;
  --texto:#faf5ff; --texto-2:#faf5ffc9; --texto-3:#faf5ff8f; --linha:#faf5ff26;
  --lilas:#c9a7ff; --lavanda:#e6d9ff; --purpura:#9d6bdc; --orquidea:#f39ac7;
  --dourado:#f6c445; --dourado-claro:#ffdb73; --pessego:#ffb48c; --salvia:#a9e0b8;
  --cor:var(--dourado);
  --display:"Fraunces",Georgia,serif; --corpo:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gut:clamp(20px,5vw,72px);
  --lado:min(700px,calc(54vw - var(--gut)));     /* largura da coluna de texto */
  --navh:66px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--fundo)}
body{margin:0;color:var(--texto);font:400 17px/1.65 var(--corpo);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ===== nébula por trás do site: nuvens de cor + fiapos de névoa, bem fracos =====
   camadas desenhadas uma vez; só giram/respiram com o tempo e deslizam com a rolagem (transform, leve) */
html::before,html::after{content:"";position:fixed;inset:-35vmax;z-index:-1;pointer-events:none;will-change:transform}
html::before{
  background:
    radial-gradient(19% 15% at 30% 34%,#c9a7ff18,transparent 70%),
    radial-gradient(22% 17% at 68% 44%,#9d6bdc1f,transparent 72%),
    radial-gradient(16% 12% at 47% 64%,#f39ac710,transparent 70%),
    radial-gradient(20% 15% at 27% 70%,#5b3fa822,transparent 72%),
    radial-gradient(12% 9% at 72% 70%,#f6c4450a,transparent 70%),
    radial-gradient(14% 10% at 55% 28%,#e6d9ff0a,transparent 70%);
  animation:neb-gira 300s linear infinite,neb-respira 70s ease-in-out infinite alternate}
html::after{
  opacity:.05;mix-blend-mode:screen;background-size:1100px 1100px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0028' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .78 0 0 0 0 1 2.8 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  animation:neb-gira-inv 420s linear infinite}
@keyframes neb-gira{to{rotate:360deg}}
@keyframes neb-gira-inv{to{rotate:-360deg}}
@keyframes neb-respira{from{scale:1}to{scale:1.06}}
@keyframes neb-viaja-nuvens{from{translate:0 0}to{translate:0 -22vh}}
@keyframes neb-viaja-fiapos{from{translate:0 0}to{translate:0 -40vh}}
/* deslizar com a rolagem (navegadores que suportam; nos outros fica só o movimento lento) */
@supports (animation-timeline:scroll()){
  html::before{animation:neb-gira 300s linear infinite,neb-respira 70s ease-in-out infinite alternate,neb-viaja-nuvens linear both;animation-timeline:auto,auto,scroll(root)}
  html::after{animation:neb-gira-inv 420s linear infinite,neb-viaja-fiapos linear both;animation-timeline:auto,scroll(root)}
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--dourado);color:var(--fundo-3)}
:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0;font-weight:300;line-height:1.08;color:var(--texto)}
h1{font-size:clamp(2.4rem,4.6vw,4.2rem)}
h2{font-size:clamp(1.8rem,2.8vw,2.6rem)}
h3{font-size:1.25rem;letter-spacing:-.01em}
p{margin:0 0 1em}
[hidden]{display:none!important}

/* tons por seção, todos da família do lilás + o dourado */
.cor-dourado{--cor:var(--dourado)} .cor-lilas{--cor:var(--lilas)} .cor-orquidea{--cor:var(--orquidea)}
.cor-lavanda{--cor:var(--lavanda)} .cor-pessego{--cor:var(--pessego)} .cor-salvia{--cor:var(--salvia)}

/* ===== camada da animação ===== */
.lousa{position:fixed;top:0;left:0;z-index:0;width:calc(100vw - var(--lado) - var(--gut));height:100svh;display:grid;place-items:center;pointer-events:none;will-change:transform}
.lousa svg{width:min(100%,calc(100svh - 110px));height:auto;aspect-ratio:1;overflow:visible;margin-top:40px}

/* ===== seções: texto alterna de lado, animação ocupa o outro ===== */
main{position:relative;z-index:1}
/* cada seção ocupa exatamente uma tela; o conteúdo fica centralizado nela */
.secao{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--navh) + 3vh) var(--gut) 3vh}
.limite{position:relative;width:100%;max-width:var(--lado)}
[data-lado="esq"]>.limite{margin-right:auto}
[data-lado="dir"]>.limite{margin-left:auto}
.olho{display:block;margin:0 0 1rem;font:600 .72rem var(--corpo);letter-spacing:.2em;text-transform:uppercase;color:var(--cor)}
h2::after{content:"";display:block;width:56px;height:2px;margin-top:16px;background:var(--cor)}
.intro{max-width:56ch;margin:1.1rem 0 0;font-size:.98rem;color:var(--texto-2)}

/* menu */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:16px;padding:12px var(--gut);background:linear-gradient(180deg,#2a1640f2,#2a1640c4);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.marca{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--texto);font-family:var(--display);font-size:1.08rem;line-height:1.15;white-space:nowrap}
.marca-selo{width:34px;height:34px;flex:none;overflow:visible}
.crp{display:block;font:600 .64rem var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--lilas)}
.links{display:flex;gap:24px;margin-left:auto}
.links a{text-decoration:none;color:var(--texto-2);font-weight:500;font-size:.94rem;transition:color .3s}
.links a:hover{color:var(--lilas)}
.links a:nth-child(2n):hover{color:var(--orquidea)}
.links a.atual{color:var(--dourado)}
.nav-cta{letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--dourado);color:var(--dourado);border-radius:999px;padding:9px 20px;font-size:.76rem;font-weight:600;text-decoration:none;transition:.3s;white-space:nowrap}
.nav-cta:hover{background:var(--dourado);color:var(--fundo-3)}

/* botões */
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:600 .92rem var(--corpo);letter-spacing:.02em;border:1.5px solid transparent;border-radius:999px;padding:14px 26px;text-decoration:none;transition:.25s}
.btn-ouro{background:var(--dourado);color:var(--fundo-3)}
.btn-ouro:hover{background:var(--dourado-claro);transform:translateY(-2px);box-shadow:0 10px 26px -12px var(--dourado)}
.btn-borda{color:var(--texto);border-color:#faf5ff8c;background:transparent}
.btn-borda:hover{border-color:var(--cor);color:var(--cor)}
.btn-lilas{background:var(--lilas);color:var(--fundo-3)}
.btn-lilas:hover{background:var(--lavanda);transform:translateY(-2px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem}

/* abertura */
.abertura h1 em{color:var(--dourado);font-style:italic}
.sub{max-width:46ch;margin-top:1.6rem;font-size:1.1rem;color:var(--texto-2)}

/* motivos */
.indice{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:clamp(28px,4vw,56px);margin:1.6rem 0 0;padding:0;list-style:none}
.verbete{border-top:1px solid var(--linha);padding:12px 0 14px;position:relative}
.verbete h3{font:600 .8rem var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--cor);margin:0 0 .5rem}
.verbete:nth-child(3n+2) h3{color:var(--dourado)}.verbete:nth-child(3n) h3{color:var(--orquidea)}
.verbete p{margin:0;font-size:.9rem;line-height:1.5;color:var(--texto-2)}

/* cartões de vidro (arteterapia, como funciona, blog) */
.simbolo,.cartao,.post,.blog-cartao{background:#ffffff09;border:1px solid #faf5ff2e;border-radius:18px}
.simbolos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:1.6rem}
.simbolo{padding:18px;transition:.3s}
.simbolo:hover,.cartao:hover,.post:hover,.blog-cartao:hover{border-color:var(--cor);transform:translateY(-4px)}
.simbolo svg{width:52px;height:52px;margin-bottom:8px}
.simbolo h3{color:var(--cor)}
.simbolo p{font-size:.86rem;line-height:1.5;color:var(--texto-2);margin:.4em 0 .7em}
.simbolo a{font-weight:600;font-size:.88rem;color:var(--cor);text-decoration:none;border-bottom:1px solid var(--cor)}

/* quem sou eu */
.quem-grade{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(20px,3vw,34px);align-items:start;margin-top:1.4rem}
.foto-quem{position:relative;width:100%;aspect-ratio:4/5;border-radius:999px 999px 22px 22px;overflow:hidden;background:linear-gradient(160deg,#c9a7ff55,#9d6bdc33);border:1px solid #faf5ff3d}
.foto-quem img,.foto-quem svg{width:100%;height:100%;object-fit:cover}
.citacao{font:italic 300 clamp(1.4rem,2.2vw,2rem)/1.25 var(--display);color:var(--texto);padding-left:22px;border-left:3px solid var(--cor);margin:0}
.selo{margin:1rem 0 1.2rem;font:600 .78rem var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--cor)}
.texto p{color:var(--texto-2);font-size:.95rem;line-height:1.6;margin:0 0 .8em}

/* como funciona */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:1.8rem}
.cartao{padding:18px;transition:.3s}
.cartao h3{color:var(--cor)}
.cartao:nth-child(2) h3{color:var(--lilas)}.cartao:nth-child(3) h3{color:var(--dourado)}
.cartao p{margin:.6em 0 0;font-size:.88rem;line-height:1.5;color:var(--texto-2)}

/* blog: cartões dos posts (página inicial e página do blog) */
.blog-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:1.6rem}
.blog-cartao{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;transition:.25s;position:relative}
.blog-capa{aspect-ratio:16/10;background:linear-gradient(135deg,#9d6bdc66,#f39ac744 60%,#f6c44544);overflow:hidden}
.blog-capa img{width:100%;height:100%;object-fit:cover}
.blog-capa svg{width:100%;height:100%}
.blog-info{display:flex;flex-direction:column;gap:4px;padding:12px 15px 15px}
.blog-info small{font:600 .66rem var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--cor)}
.blog-info b{font:400 1.05rem/1.3 var(--display);color:var(--texto)}
.blog-info span{font-size:.84rem;line-height:1.45;color:var(--texto-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-vazio{margin-top:1.4rem;color:var(--texto-3);font-size:.92rem}
/* textos do blog antigo (enquanto não há posts novos) */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:1.6rem}
.post{display:flex;flex-direction:column;gap:3px;padding:11px 15px;text-decoration:none;transition:.25s}
.post small{font:600 .68rem var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--cor)}
.post:nth-child(3n+2) small{color:var(--dourado)}.post:nth-child(3n) small{color:var(--orquidea)}
.post b{font:400 1rem/1.3 var(--display);color:var(--texto)}

/* Dente de Leão: ponte para o Ateliê, com céu azul e animação próprios (a pessoa some aqui) */
.dente{--cor:var(--dourado);overflow:hidden;background:linear-gradient(180deg,var(--fundo) 0%,#1d5b9c 18%,#2f74c0 50%,#5c98d4 82%,var(--fundo) 100%)}
.dente::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 18% at 22% 32%,#ffffff1c,transparent 70%),radial-gradient(34% 15% at 78% 66%,#ffffff14,transparent 70%)}
[data-lado="sem"]>.limite{max-width:1180px;margin:0 auto}
/* a flor ocupa o fundo da seção (à esquerda); o texto fica à direita, por cima das sementes */
.dente-arte{position:absolute;inset:0;z-index:0;pointer-events:none}
.dente>.limite{position:relative;z-index:1}
.dente-texto{max-width:min(560px,48%);margin-left:auto}
.dente h2{font-size:clamp(2.4rem,4.2vw,3.6rem)}
.dente .intro{color:#ffffffe6;text-shadow:0 1px 14px #1d5b9c}
.dente-lista{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:10px}
.dente-lista li{padding:12px 16px;border:1px solid #ffffff40;border-radius:16px;background:#1d5b9c66;backdrop-filter:blur(2px)}
.dente-lista b{display:block;margin-bottom:3px;font:600 .72rem var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--dourado-claro)}
.dente-lista span{font-size:.92rem;line-height:1.5;color:#fffffff2}
.dente-arte svg{display:block;width:100%;height:100%}

/* final + rodapé */
.rodape{margin-top:3rem;padding-top:26px;border-top:1px solid var(--linha);display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;font-size:.9rem;color:var(--texto-2)}
.rodape b{color:var(--texto);font:400 1.15rem var(--display)}
.rodape-links a{display:block;text-decoration:none;padding:2px 0}.rodape-links a:hover{color:var(--dourado)}
.urgencia{grid-column:1/-1;margin:0;font-size:.8rem;color:var(--texto-3)}
.rodape-simples{position:relative;z-index:1;padding:36px var(--gut) 44px;border-top:1px solid var(--linha);text-align:center;font-size:.88rem;color:var(--texto-3)}
.rodape-simples p{margin:.3em 0}
.rodape-simples a{color:var(--texto-2);text-decoration:none}.rodape-simples a:hover{color:var(--dourado)}
.rodape-simples strong{color:var(--texto);font:400 1.05rem var(--display)}

/* entrada dos blocos */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}
.rv.on{opacity:1;transform:none}

/* enquanto chegam os textos salvos pela Adriana, os padrões ficam ocultos por um instante (sem "piscar") */
.carregando [data-edit],.carregando [data-edit-img],.carregando [data-blog-lista]{opacity:0}
[data-edit],[data-edit-img],[data-blog-lista]{transition:opacity .3s}

/* rascunho (só aparece no modo de edição) */
.blog-cartao.rascunho{border-style:dashed;opacity:.86}
.blog-cartao.rascunho .blog-info small{color:var(--orquidea)}

/* compartilhar */
.partilha-titulo{margin:0 0 .6rem;font:600 .72rem var(--corpo);letter-spacing:.18em;text-transform:uppercase;color:var(--lilas)}
.partilha-botoes{display:flex;flex-wrap:wrap;gap:8px}
.partilha-btn{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;border:1px solid #faf5ff40;background:#ffffff0d;color:var(--texto);font:600 .82rem var(--corpo);text-decoration:none;cursor:pointer;transition:.2s}
.partilha-btn:hover{border-color:var(--dourado);color:var(--dourado)}

/* aviso flutuante */
.aviso-flutuante{position:fixed;left:50%;bottom:96px;z-index:300;width:max-content;box-sizing:border-box;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:min(92vw,520px);padding:12px 18px;border-radius:14px;background:#1d0e2cf2;border:1px solid var(--lilas);color:var(--texto);font-size:.92rem;box-shadow:0 12px 40px -12px #000;transition:.3s}
.aviso-flutuante.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1180px){
  .links{display:none}.nav-cta{margin-left:auto}
}
/* celular: a animação fica grande no topo e depois vira uma janelinha no canto */
@media (max-width:900px){
  :root{--lado:100%}
  .lousa{display:block;transform-origin:0 0;overflow:hidden;z-index:40}   /* tamanho e posição vêm do script (janelinha) */
  .lousa svg{width:100%;height:100%;margin:0}
  [data-lado]>.limite{margin:0 auto}
  .secao{min-height:auto;display:block;padding:96px var(--gut) 40px}
  .abertura{min-height:auto;display:block;padding-top:calc(var(--navh) + 47svh)}   /* espaço para a animação grande no topo */
  .quem-grade{grid-template-columns:1fr}
  .foto-quem{max-width:220px}
  .dente-arte{position:relative;inset:auto;height:54svh;margin:-24px calc(var(--gut) * -1) 8px}
  .dente-texto{max-width:none;margin:0}
  .rodape{grid-template-columns:1fr}
}
/* celular estreito: menu compacto para o botão do WhatsApp caber */
@media (max-width:480px){
  .nav{gap:10px;padding:10px 14px}
  .marca{font-size:.96rem;gap:8px}
  .marca-selo{width:28px;height:28px}
  .nav-cta{padding:8px 11px;font-size:.64rem;letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  html::before,html::after{animation:none!important}   /* nébula parada */
}