/* Ateliê Dente de Leão: página própria sobre um céu azul.
   Céu e nuvens ficam em camadas fixas; texto branco; dourado nos rótulos e botões; lilás só em detalhes. */

:root{
  /* céu (de cima para baixo) */
  --ceu-1:#154b8f; --ceu-2:#2a6fbe; --ceu-3:#4d8fd3; --ceu-4:#8dbfea;
  /* texto */
  --texto:#ffffff; --texto-2:rgba(255,255,255,.86); --texto-3:rgba(255,255,255,.66);
  --linha:rgba(255,255,255,.28);
  /* destaque dourado */
  --ouro:#ffd95a; --ouro-claro:#ffe58a; --sobre-ouro:#2a163d;
  /* toque da marca (a Adriana gosta de lilás): usar com moderação */
  --lilas:#c9a7ff; --lavanda:#e9dcff;
  /* cartões de vidro */
  --vidro:rgba(255,255,255,.12); --vidro-borda:rgba(255,255,255,.3); --raio:20px;
  /* fontes (as mesmas do site principal) */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --corpo:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* medidas */
  --gut:clamp(20px,5vw,72px);
  --largura:1180px;
  --navh:68px;
  --respiro:clamp(120px,18vh,210px);   /* espaço generoso entre as seções */
  --rodape-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ceu-2);scroll-behavior:smooth;scroll-padding-top:var(--navh);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:var(--texto);font:400 17px/1.65 var(--corpo);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-shadow:0 1px 18px rgba(12,48,104,.34)}   /* halo azul suave: o branco segue legível sobre as nuvens */
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
::selection{background:var(--ouro);color:var(--sobre-ouro);text-shadow:none}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:300;letter-spacing:-.02em;line-height:1.06;color:var(--texto)}
h1{font-size:clamp(2.7rem,5.4vw,5rem);text-wrap:balance}
h2{font-size:clamp(2.1rem,4.2vw,3.6rem);text-wrap:balance}
h3{font-size:clamp(1.45rem,2vw,1.8rem);line-height:1.15}

/* ===== céu: camada fixa; o JS aumenta --ceu-a e --ceu-b conforme a rolagem ===== */
.ceu{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(75% 55% at 84% -6%,rgba(255,255,255,.2),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,var(--ceu-1) 0%,var(--ceu-2) 40%,var(--ceu-3) 74%,var(--ceu-4) 100%)}
.ceu::before,.ceu::after{content:"";position:absolute;inset:0;will-change:opacity}
.ceu::before{opacity:var(--ceu-a,0);background:linear-gradient(180deg,#2b64a8 0%,#3f7dc3 40%,#6a9fd9 74%,#adcdf0 100%)}   /* azul mais claro e suave */
.ceu::after{opacity:var(--ceu-b,0);background:                                                                               /* toque lilás no fim */
    radial-gradient(130% 70% at 50% 108%,rgba(201,167,255,.42),rgba(233,220,255,.14) 50%,rgba(233,220,255,0) 78%),
    linear-gradient(180deg,rgba(233,220,255,.1),rgba(233,220,255,0) 45%)}

/* ===== nuvens e sementes (o atelie.js cria e move) ===== */
.decor{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.6s ease}
.decor.pronto{opacity:1}
/* no celular a barra do navegador some e volta: o céu cobre sempre a tela maior */
@supports (height:100lvh){.ceu,.decor{bottom:auto;height:100lvh}}
.nuvens,.sementes{position:absolute;inset:0}

/* ===== nébula clara e azulada entre o céu e as nuvens: bem fraca, gira devagar e desliza com a rolagem ===== */
.decor::before,.decor::after{content:"";position:absolute;inset:-35vmax;z-index:-1;pointer-events:none;will-change:transform}
.decor::before{
  background:
    radial-gradient(19% 14% at 30% 36%,rgba(255,255,255,.14),transparent 70%),
    radial-gradient(22% 16% at 68% 44%,rgba(233,220,255,.16),transparent 72%),
    radial-gradient(16% 12% at 46% 64%,rgba(207,230,255,.14),transparent 70%),
    radial-gradient(20% 15% at 28% 70%,rgba(233,220,255,.1),transparent 72%),
    radial-gradient(14% 10% at 56% 28%,rgba(255,255,255,.08),transparent 70%);
  animation:neb-gira 300s linear infinite,neb-respira 70s ease-in-out infinite alternate}
.decor::after{
  opacity:.12;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 1 0 0 0 0 1 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}}
@supports (animation-timeline:scroll()){
  .decor::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)}
  .decor::after{animation:neb-gira-inv 420s linear infinite,neb-viaja-fiapos linear both;animation-timeline:auto,scroll(root)}
}
.nuvem{position:absolute;left:0;top:0;will-change:transform;--b:rgba(255,255,255,.92);--z:rgba(255,255,255,0)}
/* nuvens feitas só de gradientes: macias, sem filtro de desfoque */
.nuvem-a{background:
  radial-gradient(closest-side,var(--b),var(--z)) 12% 74%/30% 52% no-repeat,
  radial-gradient(closest-side,var(--b),var(--z)) 31% 46%/34% 74% no-repeat,
  radial-gradient(closest-side,var(--b),var(--z)) 53% 30%/38% 86% no-repeat,
  radial-gradient(closest-side,var(--b),var(--z)) 74% 50%/32% 68% no-repeat,
  radial-gradient(closest-side,var(--b),var(--z)) 90% 76%/24% 44% no-repeat,
  radial-gradient(closest-side,rgba(255,255,255,.7),var(--z)) 50% 90%/96% 34% no-repeat}
.nuvem-b{background:
  radial-gradient(closest-side,rgba(255,255,255,.8),var(--z)) 16% 62%/46% 56% no-repeat,
  radial-gradient(closest-side,rgba(255,255,255,.85),var(--z)) 52% 46%/58% 70% no-repeat,
  radial-gradient(closest-side,rgba(255,255,255,.8),var(--z)) 88% 60%/40% 52% no-repeat}
.nuvem-c{background:
  radial-gradient(closest-side,var(--b),var(--z)) 22% 66%/42% 62% no-repeat,
  radial-gradient(closest-side,var(--b),var(--z)) 50% 36%/46% 88% no-repeat,
  radial-gradient(closest-side,var(--b),var(--z)) 78% 62%/40% 64% no-repeat,
  radial-gradient(closest-side,rgba(255,255,255,.65),var(--z)) 50% 88%/90% 36% no-repeat}
.semente{position:absolute;left:0;top:0;overflow:visible;transform-origin:22px 22px;will-change:transform,opacity;opacity:0}

/* ===== topo fixo (vidro) ===== */
.topo{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);height:var(--navh);padding:0 var(--gut);
  background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.marca{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:40px;margin-right:auto;padding-left:48px}
.marca-link{display:block;color:var(--texto);text-decoration:none}
.mandala-mini{position:absolute;left:0;top:50%;width:36px;height:36px;margin-top:-18px}
.marca-nome{display:block;font:500 1.06rem/1.15 var(--display);letter-spacing:-.01em;text-wrap:balance}
.voltar{align-self:flex-start;margin-top:3px;color:var(--texto-3);font:500 .74rem/1.3 var(--corpo);letter-spacing:.03em;text-decoration:none;transition:color .25s}
.voltar:hover{color:var(--ouro)}
.menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.menu a{position:relative;padding:6px 0;color:var(--texto-2);font-size:.94rem;font-weight:500;text-decoration:none;transition:color .25s}
.menu a::after{content:"";position:absolute;left:50%;bottom:-3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ouro);opacity:0;transform:scale(.3);transition:opacity .3s,transform .3s}
.menu a:hover,.menu a.ativo{color:var(--texto)}
.menu a:hover::after{opacity:.6;transform:scale(.7)}
.menu a.ativo::after{opacity:1;transform:none}
.btn-nav{flex:none;min-height:42px;padding:10px 20px;font-size:.84rem;white-space:nowrap}   /* o nome da marca é que quebra linha, nunca o botão */

/* logos: a mandala provisória ou a imagem que a dona enviar.
   O desenho é o mesmo nos dois; no pequeno, o CSS tira detalhes e engrossa o traço. */
.mandala-mini svg,.mandala-grande svg{width:100%;height:100%;overflow:visible}
.mandala-mini img,.mandala-grande img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.mandala-svg .mm{display:none}
.mandala-mini .mm{display:inline}
.mandala-mini .md{display:none}
.mandala-mini .mandala-svg *{vector-effect:non-scaling-stroke}
.mandala-mini .m-aura{fill-opacity:.16}
.mandala-mini .m16{fill-opacity:.38}
.mandala-mini .m8{fill-opacity:.55}
.mandala-mini .m4{fill-opacity:.8}
.mandala-mini .mcruz{stroke-width:1.4}

/* ===== botões ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:14px 26px;border:1.5px solid transparent;border-radius:999px;
  font:600 .92rem/1.25 var(--corpo);letter-spacing:.02em;text-align:center;text-decoration:none;text-shadow:none;cursor:pointer;
  transition:background-color .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s}
.btn-ouro{background:var(--ouro);color:var(--sobre-ouro);box-shadow:0 12px 28px -18px rgba(42,22,61,.7)}
.btn-ouro:hover{background:var(--ouro-claro);transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(42,22,61,.6)}
.btn-borda{background:transparent;color:var(--texto);border-color:rgba(255,255,255,.82)}
.btn-borda:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn:active{transform:none}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.4rem}
.acoes-centro{justify-content:center}

/* rótulos pequenos ("olho") */
.olho,.papel{display:block;font:600 .72rem/1.4 var(--corpo);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)}
.olho{margin:0 0 1.1rem}

/* ===== seções: cada uma com pelo menos uma tela e muito respiro ===== */
main{display:block}
.secao{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:var(--respiro) 0}
.limite{width:100%;max-width:var(--largura);margin:0 auto;padding:0 var(--gut)}
.cabeca{max-width:760px;margin:0 auto clamp(56px,9vh,96px);text-align:center}
.intro{max-width:44ch;margin:1.3rem auto 0;color:var(--texto-2);font-size:clamp(1.06rem,1.3vw,1.18rem)}

/* ===== abertura ===== */
.hero{padding:calc(var(--navh) + clamp(40px,7vh,88px)) 0 clamp(110px,15vh,150px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(36px,6vw,96px)}
.hero-sub{max-width:34ch;margin-top:1.6rem;color:var(--texto-2);font-size:clamp(1.08rem,1.45vw,1.24rem)}
/* a caixa corta a mandala girando: nada vaza para os lados */
.hero-logo{position:relative;display:grid;place-items:center;width:100%;max-width:540px;aspect-ratio:1;justify-self:center;overflow:hidden}
.hero-logo::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(233,220,255,.3),rgba(201,167,255,.12) 58%,rgba(201,167,255,0))}
.mandala-grande{position:relative;width:86%;aspect-ratio:1}
.mandala-grande>svg,.mandala-grande>img{will-change:transform}   /* gira o desenho (ou a imagem), não a caixa: o botão do modo de edição fica parado */
/* convite discreto para rolar */
.rolar{position:absolute;left:50%;bottom:clamp(22px,4vh,40px);width:9px;height:60px;margin-left:-4.5px;overflow:hidden;pointer-events:none}
.rolar::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.6))}
.rolar::after{content:"";position:absolute;left:2px;top:-10px;width:5px;height:10px;border-radius:3px;background:var(--ouro);animation:rolar 2.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes rolar{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(70px);opacity:0}}

/* ===== quem somos ===== */
.pessoas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,8vw,128px);max-width:880px;margin:0 auto}
.pessoa{display:flex;flex-direction:column;align-items:center;text-align:center}
/* janela em arco: topo em semicírculo e cantos de 22px embaixo (raios em % para não encolherem) */
.pessoa-foto{position:relative;width:min(300px,100%);aspect-ratio:4/5;margin-bottom:38px;overflow:hidden;
  border-radius:50% 50% 22px 22px/40% 40% 22px 22px;border:1px solid rgba(255,255,255,.42);background:var(--lavanda);
  box-shadow:0 34px 60px -34px rgba(8,30,72,.6),0 0 0 8px rgba(255,255,255,.05);will-change:transform}
.pessoa-foto>svg,.pessoa-foto>img{display:block;width:100%;height:100%}
.pessoa-foto>img{object-fit:cover}
.pessoa h3{font-size:clamp(1.7rem,2.6vw,2.15rem)}
.papel{margin-top:.7rem}
.pessoa p{max-width:32ch;margin-top:1.1rem;color:var(--texto-2)}

/* ===== sobre ===== */
.sobre-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,6vw,100px);align-items:start}
.sobre-texto{padding-top:.4rem}
.sobre-texto p{max-width:54ch;color:var(--texto-2);font-size:clamp(1.04rem,1.25vw,1.13rem)}
.sobre-texto p+p{margin-top:1.2em}
.citacao{grid-column:1/-1;margin:clamp(48px,8vh,88px) 0 0;padding:clamp(26px,3.2vw,44px) clamp(26px,3.6vw,52px);
  border-left:3px solid var(--lilas);border-radius:0 var(--raio) var(--raio) 0;
  background:linear-gradient(90deg,rgba(201,167,255,.22),rgba(233,220,255,.06) 70%,rgba(233,220,255,0))}
.citacao p{max-width:32ch;font:italic 300 clamp(1.5rem,2.8vw,2.35rem)/1.28 var(--display);letter-spacing:-.01em;color:var(--texto)}

/* ===== o que oferecemos ===== */
.cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.cartao{padding:clamp(28px,3vw,40px);background:var(--vidro);border:1px solid var(--vidro-borda);border-radius:var(--raio);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .35s,background-color .35s,box-shadow .35s}
.cartao:hover{border-color:var(--lilas);background:rgba(255,255,255,.16);box-shadow:0 0 0 1px rgba(201,167,255,.4),0 26px 50px -32px rgba(42,22,61,.55)}
.icone{width:56px;height:56px;margin-bottom:1.5rem;color:var(--texto)}
.cartao h3{font-size:clamp(1.4rem,1.8vw,1.62rem)}
.cartao p{margin-top:.9rem;color:var(--texto-2);font-size:1rem;line-height:1.62}
.oferta .acoes{margin-top:clamp(44px,7vh,72px)}

/* ===== contato: o dente-de-leão (dente.js) à esquerda, as sementes passam por trás do texto ===== */
.final-dente{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center;
  padding:calc(var(--navh) + 40px) 0 calc(var(--rodape-h) + 28px)}
.dente-arte{position:absolute;inset:0;z-index:0;pointer-events:none}
.dente-arte svg{display:block;width:100%;height:100%}
.final-conteudo{position:relative;z-index:1;width:100%;max-width:var(--largura);margin:0 auto;padding:0 var(--gut)}
.final-texto{max-width:min(520px,46%);margin-left:auto;padding:clamp(28px,3.4vw,46px);
  background:rgba(21,75,143,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--raio)}
.final-texto h2{font-size:clamp(2.2rem,3.8vw,3.3rem)}
.final-texto p{margin-top:1.1rem;color:var(--texto-2);font-size:1.1rem}
.final-texto .acoes{margin-top:2rem}

/* ===== rodapé: por cima da parte de baixo da seção final ===== */
.rodape{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:var(--rodape-h);margin-top:calc(var(--rodape-h) * -1);
  padding:12px var(--gut);font-size:.84rem;line-height:1.5;color:var(--texto-3)}
/* pílula translúcida: a base do céu é a parte mais clara, o texto precisa de um fundo */
.rodape-lista{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:0;padding:8px 22px;list-style:none;text-align:center;color:var(--texto-2);
  background:rgba(21,75,143,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:999px}
.rodape-lista li+li::before{content:"·";margin:0 .75em;color:var(--texto-3)}
.rodape a{color:var(--texto);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:color .25s,border-color .25s}
.rodape a:hover{color:var(--ouro);border-color:currentColor}

/* ===== textos e imagens editáveis esperam o conteúdo salvo (o mesmo padrão do site principal) ===== */
.carregando [data-edit],.carregando [data-edit-img]{opacity:0}
[data-edit],[data-edit-img]{transition:opacity .3s}

/* ===== entradas com a rolagem (escondidas só com o JS ativo) ===== */
.js .rv{opacity:0;animation:rv-auto .8s ease 4s both}          /* segurança: aparece sozinho se o atelie.js não carregar */
.rv-js .rv{animation:none}
.rv-js .rv.on{animation:surgir 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes surgir{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:none}}
@keyframes rv-auto{to{opacity:1}}

/* ===== telas médias ===== */
@media (max-width:1100px){
  .menu{gap:16px}
  .menu a{font-size:.9rem}
  .btn-nav{padding:9px 16px}
}

/* ===== celular e tablet em pé ===== */
@media (max-width:900px){
  :root{--navh:60px;--respiro:clamp(88px,13vh,124px)}
  .menu,.voltar{display:none}
  .marca{padding-left:42px}
  .mandala-mini{width:32px;height:32px;margin-top:-16px}
  .marca-nome{font-size:1rem}
  .btn-nav{min-height:40px;padding:9px 16px;font-size:.8rem}
  .secao{display:block;min-height:0}
  .hero{display:flex;min-height:100vh;min-height:100svh;padding:calc(var(--navh) + 28px) 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .hero-logo{order:-1;width:min(64vw,290px)}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero .acoes{justify-content:center}
  .rolar{display:none}
  .sobre-grid{grid-template-columns:1fr;gap:22px}
  .citacao{margin-top:44px}
  .cartoes{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .final-dente{display:block;min-height:0;padding:12px 0 8px}
  .dente-arte{position:relative;inset:auto;height:54vh;height:54svh}
  .final-conteudo{margin-top:-28px}
  .final-texto{max-width:none;margin:0}
  .rodape{min-height:0;margin-top:0;padding:30px var(--gut) 40px}
  .rodape-lista{flex-direction:column;gap:8px;padding:14px 22px;border-radius:var(--raio)}
  .rodape-lista li+li::before{display:none}
}
@media (max-width:640px){
  .pessoas{grid-template-columns:1fr;max-width:420px}
  .pessoa-foto{width:min(280px,80vw)}
  .acoes .btn{flex:1 1 auto}
}
@media (max-width:400px){
  .topo{gap:12px}
  .btn{padding:13px 20px}
  .btn-nav{padding:8px 14px;font-size:.78rem}
  .marca-nome{font-size:.96rem}
}

/* ===== movimento reduzido: tudo parado e visível ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.rv-js .rv,.rv-js .rv.on{opacity:1;animation:none;transform:none}
  .rolar{display:none}
  .btn-ouro:hover,.btn-borda:hover{transform:none}
  .decor::before,.decor::after{animation:none}   /* nébula parada */
}