/* Studio Priscilla Paderni · site-v2 · "as bolas do estúdio" (ver contrato no index.html)
   Paleta amostrada da marca (work-v2/01-paleta-real.md). Sem sombra, sem degradê: profundidade só por sobreposição. */
:root{
  --creme:#F7F1E3; --branco:#FFFFFF; --rosa:#E3C9CA; --rosa-claro:#F5E7E7; --menta:#CBDBDB; --bola:#CE8B78;
  --teal:#46746A; /* assinatura do logo: títulos grandes, cursiva, botão */
  --tinta:#395F57; /* o mesmo teal escurecido 18% na luminosidade: o mínimo para 4,5:1 sobre o rosa-seco (o fundo mais escuro com texto) */
  --serif:"Corben",Georgia,"Times New Roman",serif; --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --script:"Sue Ellen Francisco","Segoe Print","Bradley Hand",cursive;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --t-0:1.125rem; --t-2:2rem; --t-3:clamp(2rem,4.4vw,3.5rem); --t-h1:clamp(2.25rem,calc((100vw - 48px)/7.4),4.25rem); /* "Pilates no chão" mede 7,0em em Corben: cabe numa linha de 320 a 1440 */
  --topo:88px;
  --seixo:56% 44% 48% 52% / 44% 46% 54% 56%;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + var(--s4));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--tinta);font:400 var(--t-0)/1.6 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(57,95,87,.14)}
a,summary,label,button{touch-action:manipulation}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--teal);margin:0;text-wrap:balance;letter-spacing:0;word-spacing:.04em}
p{margin:0;text-wrap:pretty}
figure{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
address{font-style:normal}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.wrap{width:min(100% - 2*var(--s5),1200px);margin-inline:auto}
.skip{position:absolute;left:var(--s4);top:-100px;z-index:30;background:var(--tinta);color:var(--branco);padding:var(--s3) var(--s4);text-decoration:none}
.skip:focus{top:var(--s4)}
.bola{position:absolute;display:block;border-radius:50%;aspect-ratio:1}

/* Botão: um estilo só (verde-água da assinatura com branco, 5,29:1) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s5);border-radius:999px;background:var(--teal);color:var(--branco);font:600 1rem/1 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .2s ease,transform .2s ease}
.btn:hover,.wa[open] summary{background:var(--tinta)}
.btn:active{transform:translateY(1px)}
.link{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.link:hover{text-decoration-thickness:2px}
.cursiva{font-family:var(--script);font-weight:400;letter-spacing:0;color:var(--teal)}

/* Topo com o logo de verdade */
.topo{position:sticky;top:0;z-index:20;background:var(--creme)}
.topo-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--topo)}
.marca{display:block;flex:none;border-radius:50%;line-height:0}
.marca img{width:72px;height:72px;border-radius:50%;background:var(--branco);border:1px solid var(--rosa)}
.marca:hover img{border-color:var(--teal)}
.menu{display:flex;align-items:center;gap:var(--s6)}
.menu a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-size:1rem;text-decoration:none;border-bottom:1px solid transparent}
.menu a:hover{border-bottom-color:currentColor}
.menu-cb{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menu-btn{display:none}

/* 1 · Abertura: a pilha de bolas */
.abertura{position:relative;z-index:1;padding:var(--s6) 0 var(--s9)}
.abertura-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,44vw,640px);gap:var(--s7);align-items:center}
.abertura h1{font-size:var(--t-h1);line-height:1.04}
@media (min-width:960px){.abertura h1{font-size:clamp(3.5rem,6.3vw,4.25rem)}}
.abertura h1 span{display:block}
.abertura h1 .cursiva{font-size:1.32em;line-height:.95;margin-top:.04em}
.abertura-sub{margin-top:var(--s5);max-width:30ch;font-size:1.25rem;line-height:1.5}
.lugar{margin-top:var(--s4);font-size:.9375rem;font-weight:600;letter-spacing:.06em;color:var(--tinta)}
.abertura .wa{margin-top:var(--s6)}
.pilha{position:relative;width:100%;aspect-ratio:1/.97}
.bola-menta{width:80%;left:14%;top:8%;background:var(--menta)}
.bola-rosa{width:30%;right:-3%;top:-2%;background:var(--rosa)}
.bola-terra{width:17%;left:0;bottom:2%;background:var(--bola)}
.q-ar,.q-chao{position:absolute}
.q-ar{width:60%;right:6%;top:3%}
.q-ar img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--menta)}
.q-chao{width:44%;left:6%;top:40%}
.q-chao img{width:100%;border-radius:var(--seixo);background:var(--menta);outline:6px solid var(--creme)}
.pilha figcaption{position:absolute;font:400 1.875rem/1 var(--script);color:var(--teal);white-space:nowrap}
.q-ar figcaption{left:-22%;top:10%}
.q-chao figcaption{left:104%;bottom:22%}
.selo{position:absolute;width:16%;right:1%;bottom:12%;border-radius:50%;outline:6px solid var(--creme)}

/* Formulário do WhatsApp (painel de confirmação, sem JS) */
.wa summary{list-style:none;display:inline-flex}
.wa summary::-webkit-details-marker{display:none}
.wa-painel{margin-top:var(--s4);max-width:30rem;padding:var(--s4) var(--s5);border:1px solid currentColor;border-radius:24px;font-size:1rem;line-height:1.5;text-align:left}
.wa-ir{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s2);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.wa-ir:hover{text-decoration-thickness:2px}

/* 2 · O estúdio: a parede da borboleta, num seixo grande sobre o campo menta de borda curva */
.estudio{position:relative;z-index:2;background:var(--menta);border-radius:50% 50% 0 0 / clamp(40px,7vw,120px) clamp(40px,7vw,120px) 0 0;padding:var(--s9) 0 var(--s9)}
.estudio-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s8);align-items:center}
.mural{position:relative;width:min(500px,100%);margin-top:calc(-1*var(--s9))} /* sobe 96px: passa da borda curva para dentro da abertura, só no espaço do padding dela */
.mural img{position:relative;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:48% 52% 44% 56% / 38% 40% 60% 62%;background:var(--creme)}
.bola-rosa-mural{width:38%;right:-10%;bottom:4%;background:var(--rosa)}
.mural figcaption{position:relative;margin:var(--s3) 0 0 12%;font:400 1.875rem/1 var(--script);color:var(--teal)}
.estudio h2{font-size:var(--t-3);line-height:1.08}
.estudio-texto>p{margin-top:var(--s5);max-width:32ch;font-size:1.25rem;line-height:1.5}
.estudio address{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--tinta);max-width:28rem;font-size:1rem}
.estudio .link{margin-top:var(--s2)}

/* 3 · Modalidades: pares de bolas (chão) e cápsulas (ar) */
.modalidades{padding:var(--s10) 0 var(--s9)}
.modalidades h2{font-size:var(--t-3);line-height:1.08}
.momento{display:grid;gap:var(--s8);align-items:center;margin-top:var(--s8)}
.m-pilates{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.m-aero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);margin-top:var(--s9)}
.momento h3{font-size:var(--t-2);line-height:1.1}
.momento-texto p{margin-top:var(--s4);max-width:34ch}
.dupla{position:relative;width:min(560px,100%);aspect-ratio:560/470}
.dupla img{position:absolute;border-radius:50%;aspect-ratio:1;object-fit:cover}
.d1{width:61%;left:0;top:0}
.d2{width:43%;left:50%;top:44%;outline:6px solid var(--creme)}
.bola-terra-p{width:52%;left:22%;top:26%;background:var(--bola)}
.personagem{display:block;position:relative;width:150px;height:150px;margin-top:var(--s6);border-radius:50%;background:var(--menta);overflow:hidden}
/* o fio fino do logo (figura dentro de um círculo de linha teal): repetido só aqui e no círculo do Agendar */
.personagem{outline:1px solid var(--teal);outline-offset:6px}
.personagem img{position:absolute;width:132px;left:9px;top:12px}
.capsulas{position:relative;width:min(560px,100%);aspect-ratio:560/520;justify-self:end}
.capsulas img{position:absolute;width:43%;aspect-ratio:2/3;object-fit:cover;border-radius:999px}
.c1{left:6%;top:24%}
.c2{left:54%;top:0;outline:6px solid var(--creme)}
.bola-rosa-a{width:50%;left:28%;top:40%;background:var(--rosa)}

/* 4 · No feed: bolas espalhadas no rosa-claro */
.feed{background:var(--rosa-claro);border-radius:50% 50% 0 0 / clamp(40px,7vw,120px) clamp(40px,7vw,120px) 0 0;padding:var(--s10) 0 var(--s10)}
.feed-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s8);align-items:center}
.feed h2{font-size:var(--t-3);line-height:1.08}
.feed .link{margin-top:var(--s3)}
.espalhadas{position:relative;width:min(720px,100%);aspect-ratio:720/440}
.espalhadas li{position:absolute}
.espalhadas a{display:block;border-radius:50%;overflow:hidden;background:var(--menta)}
.espalhadas img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s ease}
.espalhadas a:hover img{transform:scale(1.04)}
.e1{width:42%;left:0;top:8%}
.e2{width:31%;left:43%;top:0}
.e3{width:33%;left:64%;top:46%}

/* 5 · Agendar: um círculo só */
.agendar{padding:var(--s10) 0}
.circulo{width:min(640px,100%);aspect-ratio:1;margin-inline:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--s8) var(--s9);border-radius:50%;background:var(--rosa)}
.circulo{outline:1px solid var(--teal);outline-offset:14px}
.circulo h2{font-size:clamp(2rem,4vw,3rem);line-height:1.08;max-width:14ch}
.circulo>p{margin-top:var(--s4);max-width:30ch}
.circulo .wa{margin-top:var(--s5)}
.fone{margin-top:var(--s4);font-size:1rem}

/* 6 · Rodapé */
.rodape{background:var(--branco);padding:var(--s7) 0}
.rodape-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s6);align-items:center}
.rodape-logo{width:96px;height:96px;border-radius:50%}
.rodape p{font-size:1rem}
.rodape p+p{margin-top:var(--s1)}
.geat{margin-top:var(--s3);font-size:.875rem}
.geat a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.geat a:hover{text-decoration-thickness:2px}

/* Movimento: as camadas "assentam" na pilha (só transform) */
@media (prefers-reduced-motion:no-preference){
  .q-ar{animation:assentar 1s cubic-bezier(.16,1,.3,1) .1s both}
  .selo{animation:assentar 1s cubic-bezier(.16,1,.3,1) .3s both}
  @keyframes assentar{from{transform:translateY(var(--s7))}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Tablet e menu em painel (abaixo de 960; correção v1.2 mantida) */
@media (max-width:959px){
  .abertura-grid{grid-template-columns:minmax(0,1fr)}
  .pilha{width:min(100%,520px);margin-top:var(--s5)}
  .estudio-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6)}
  .mural{margin-top:calc(-1*var(--s8))}
  .momento,.m-pilates,.m-aero{grid-template-columns:minmax(0,1fr)}
  .m-aero .momento-texto{order:2}
  .capsulas{justify-self:start}
  .feed-grid{grid-template-columns:minmax(0,1fr)}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:72px;padding:0 var(--s4);border:1px solid var(--tinta);border-radius:999px;font-size:1rem;cursor:pointer}
  .menu-fechar{display:none}
  .menu-cb:checked~.menu-btn .menu-abrir{display:none}
  .menu-cb:checked~.menu-btn .menu-fechar{display:inline}
  .menu-cb:focus-visible~.menu-btn{outline:3px solid var(--tinta);outline-offset:3px}
  .menu{display:none;position:absolute;left:calc(-1*var(--s5));right:calc(-1*var(--s5));top:100%;flex-direction:column;align-items:stretch;gap:0;padding:var(--s2) var(--s5) var(--s5);background:var(--creme);border-bottom:1px solid var(--rosa)}
  .menu-cb:checked~.menu{display:flex}
  .menu a{min-height:48px;border-bottom:1px solid var(--rosa)}
  .topo-bar{position:relative}
}
/* Celular: toda grade vira 1 coluna (correção v1.2 mantida) */
@media (max-width:599px){
  :root{--topo:72px}
  .marca img{width:56px;height:56px}
  .abertura{padding:var(--s5) 0 var(--s8)}
  .abertura-sub{margin-top:var(--s4);font-size:1.125rem}
  .abertura .wa{margin-top:var(--s5)}
  .wa .btn{width:100%}
  .pilha figcaption,.mural figcaption{font-size:1.625rem}
  .q-chao figcaption{left:auto;right:-96%;bottom:4%}
  .bola-rosa{right:0;top:0}
  .estudio{padding:var(--s8) 0 var(--s8)}
  .estudio-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .mural{width:min(100%,420px);margin-top:calc(-1*var(--s7))}
  .bola-rosa-mural{right:-4%}
  .estudio-texto>p{font-size:1.125rem}
  .modalidades{padding:var(--s8) 0 var(--s8)}
  .momento{gap:var(--s5);margin-top:var(--s7)}
  .m-aero{margin-top:var(--s8)}
  .feed{padding:var(--s8) 0}
  .feed-grid{gap:var(--s5)}
  .espalhadas{aspect-ratio:1/1.02}
  .e1{width:56%;left:0;top:0}
  .e2{width:40%;left:58%;top:6%}
  .e3{width:44%;left:30%;top:54%}
  .agendar{padding:var(--s8) 0}
  .circulo{padding:var(--s8) var(--s5)}
  .rodape-grid{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}
/* v2.1 (QA Chrome 09/11): em 320 o círculo do Agendar ficava 272×511 (1,88) e as linhas de cima/baixo raspavam a curva.
   Só ≤360: o círculo ganha 12px de cada lado (sai um pouco da margem de 24px, sem vazar) e o fio do logo encosta mais. Nada mais muda. */
@media (max-width:360px){
  .circulo{width:calc(100% + 24px);margin-inline:-12px;outline-offset:6px}
}