/* Studio Zoe — sistema visual em 02-conceito/sistema.md */
:root{
  /* das flores reais do Studio (assets/tratadas/espaco-flores-detalhe.webp) e do conjunto branco dela */
  --creme:#fcf3ee;
  --rosa-1:#f8dbe0;
  --rosa-2:#f1bccb;
  --damasco:#f6dcc4;
  --flor:#c2265b;
  --flor-escura:#8e1740;
  --tinta:#2c181d;
  --tinta-2:#715459;
  --rose:#d8a595;
  --f-titulo:"Playfair Display",Georgia,serif;
  --f-texto:"Mulish",system-ui,sans-serif;
  --led:#ffce84;
  --noite:#240d17;
  --vidro:#eef1f5;
  --curva:cubic-bezier(.2,.7,.2,1);
  --respiro:clamp(84px,13vh,168px);
  --pad:clamp(22px,4.6vw,72px);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-texto);color:var(--tinta);background:var(--creme);overflow-x:hidden}
a{color:inherit;text-decoration:none}

.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.malha{position:absolute;inset:-14%;z-index:-3;
  background:
    radial-gradient(34% 44% at 64% 62%, color-mix(in oklch,var(--rosa-2) 78%,transparent) 0, transparent 72%),
    radial-gradient(36% 44% at 100% 100%, color-mix(in oklch,var(--damasco) 85%,transparent) 0, transparent 72%),
    radial-gradient(46% 52% at 4% 96%, color-mix(in oklch,var(--rosa-1) 92%,transparent) 0, transparent 72%),
    radial-gradient(40% 40% at 30% 0%, color-mix(in oklch,#fff 80%,transparent) 0, transparent 72%),
    var(--creme);
  animation:respira 36s ease-in-out infinite alternate}
@keyframes respira{from{transform:translate3d(-1.2%,.8%,0)}to{transform:translate3d(1.5%,-1%,0) scale(1.06)}}
.grao{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--pad);position:relative;z-index:4}
.marca img{height:66px;width:auto;display:block}
.menu{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:600}
.menu a{transition:color .3s}
.menu a:hover{color:var(--flor)}
.menu .ag{background:var(--tinta);color:#fff;padding:12px 20px;border-radius:99px}
.menu .ag:hover{background:var(--flor);color:#fff}

.grade{flex:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(20px,3vw,48px);align-items:stretch;padding:0 var(--pad)}
.texto{align-self:center;padding-bottom:clamp(24px,5vh,56px);position:relative;z-index:3}
.sobre{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--flor);margin-bottom:clamp(14px,2.6vh,24px)}
h1{font-family:var(--f-titulo);font-weight:400;letter-spacing:-.015em}
h1 .diz{display:block;font-size:clamp(1.55rem,2.75vw,2.75rem);line-height:1.18;color:var(--tinta);max-width:15.5em;text-wrap:balance}
h1 .responde{display:inline-block;position:relative;font-style:italic;font-size:clamp(3rem,6.25vw,6.5rem);line-height:1;color:var(--flor);margin-top:.14em;letter-spacing:-.03em;white-space:nowrap;padding-bottom:.16em}
h1 .responde svg{position:absolute;left:36%;right:6%;bottom:0;width:58%;height:.22em;overflow:visible}
h1 .responde path{fill:none;stroke:var(--flor);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:risca 1.1s 1.9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes risca{to{stroke-dashoffset:0}}
.fonte{margin-top:clamp(12px,2vh,20px);display:flex;align-items:center;gap:12px;font-size:13px;color:var(--tinta-2);font-weight:500}
.fonte::before{content:"";width:34px;height:1px;background:currentColor}
.apoio{margin-top:clamp(18px,3vh,28px);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.66;color:var(--tinta-2);max-width:32em}
.apoio strong{color:var(--tinta);font-weight:700}
.acoes{margin-top:clamp(20px,3.4vh,32px);display:flex;gap:14px 26px;align-items:center;flex-wrap:wrap}
.botao{display:inline-flex;align-items:center;gap:12px;background:var(--flor);color:#fff;border-radius:99px;padding:17px 28px 17px 22px;font-weight:700;font-size:15.5px;box-shadow:0 16px 30px -16px rgba(194,38,91,.75);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s}
.botao:hover{transform:translateY(-2px);background:var(--flor-escura)}
.botao svg{width:19px;height:19px;flex:none}
.sec{font-weight:700;font-size:15px;border-bottom:1.5px solid rgba(44,24,29,.3);padding-bottom:3px}
.prova{margin-top:clamp(20px,3.6vh,36px);padding-top:18px;border-top:1px solid rgba(44,24,29,.14);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13px;color:var(--tinta-2);max-width:42em}
.prova b{display:block;font-family:var(--f-titulo);font-weight:500;font-size:1.3rem;color:var(--tinta)}

/* o palco: as flores reais do Studio atrás, ela na frente, o porta-retrato da recepção ao lado */
.palco{position:relative;align-self:end;justify-self:center;width:min(100%,470px);height:min(86svh,790px)}
.led{position:absolute;left:-3%;right:-3%;bottom:-4%;top:8.6%;border-radius:38px 38px 0 0;background:radial-gradient(closest-side at 50% 46%,transparent 78%,rgba(255,205,130,.0) 80%),linear-gradient(180deg,rgba(255,206,132,.95),rgba(255,188,120,.5));filter:blur(16px);opacity:0;animation:acende 2.2s 1.2s ease forwards, pulsa 6s 3.4s ease-in-out infinite alternate}
@keyframes acende{to{opacity:.85}}
@keyframes pulsa{from{opacity:.62}to{opacity:.9}}
.flores{position:absolute;left:0;right:0;bottom:0;top:11%;border-radius:26px 26px 0 0;overflow:hidden;animation:abre 1.3s .15s cubic-bezier(.7,0,.2,1) both;box-shadow:0 0 0 1.5px rgba(255,226,170,.9)}
.flores img{width:100%;height:100%;object-fit:cover;object-position:30% 20%;display:block;filter:saturate(.92) brightness(.9);transform:scale(1.06);animation:aproxima 30s ease-in-out infinite alternate}
.flores::after{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 50% at 50% 100%,rgba(96,10,40,.62),transparent 70%),
  linear-gradient(180deg,rgba(194,38,91,.08),rgba(142,23,64,.36))}
@keyframes abre{from{clip-path:inset(100% 0 0 0 round 26px 26px 0 0)}to{clip-path:inset(0 0 0 0 round 26px 26px 0 0)}}
@keyframes aproxima{from{transform:scale(1.06)}to{transform:scale(1.16) translateY(-2%)}}
.ela{position:absolute;left:50%;bottom:0;height:100%;transform:translateX(-50%);animation:chega 1.3s .5s cubic-bezier(.2,.7,.2,1) both;filter:drop-shadow(0 22px 26px rgba(70,8,30,.5)) drop-shadow(0 0 14px rgba(255,150,190,.28))}
.ela img{transition:transform .9s cubic-bezier(.2,.7,.2,1);transform:translate3d(calc(var(--px,0)*-7px),0,0)}
.ela img{height:100%;width:auto;display:block}
@keyframes chega{from{opacity:0;transform:translate(-50%,36px)}to{opacity:1;transform:translate(-50%,0)}}
.etiqueta{position:absolute;right:16px;bottom:18px;color:#fff;text-align:right;font-family:var(--f-titulo);font-size:1.12rem;line-height:1.15;text-shadow:0 2px 14px rgba(60,5,25,.7);animation:entra .9s 1.7s both}
.etiqueta small{display:block;font-family:var(--f-texto);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin-top:4px}

.mesa{position:absolute;left:-58%;bottom:-3.5%;width:74%;aspect-ratio:3.1/1;border-radius:50%;background:radial-gradient(closest-side,#fff 0,#fff 62%,#f4e9e6 100%);box-shadow:0 26px 40px -18px rgba(70,8,30,.4),0 3px 0 #e9dcd8;animation:entra 1s .8s both}
.mesa::before{content:"";position:absolute;inset:12% 10%;border-radius:50%;background:var(--rose);opacity:.85;
  -webkit-mask:radial-gradient(circle,transparent 0 2.6px,#000 3px) 0 0/10px 8px;mask:radial-gradient(circle,transparent 0 2.6px,#000 3px) 0 0/10px 8px}
.quadro{position:absolute;left:-39%;bottom:4.5%;width:40%;aspect-ratio:3/4.05;padding:5.2%;border-radius:3px;transform-origin:50% 100%;
  transform:perspective(900px) rotateY(calc(17deg + var(--px,0)*5deg)) rotateX(calc(var(--py,0)*-3deg)) rotateZ(-1.2deg);transition:transform .9s cubic-bezier(.2,.7,.2,1);
  background:linear-gradient(135deg,#fff 0,#f3eeec 48%,#fff 52%,#ece4e1 100%);
  box-shadow:0 0 0 1px rgba(160,120,110,.25),inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--rose),0 34px 40px -24px rgba(70,8,30,.6),-14px 22px 30px -18px rgba(70,8,30,.35);animation:pousa 1.1s 1.05s cubic-bezier(.3,1.3,.5,1) both}
.quadro div{position:relative;height:100%;background:linear-gradient(165deg,#f7f8fb,#e9edf3);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7%;padding:9% 8%;box-shadow:inset 0 2px 5px rgba(60,40,50,.22);overflow:hidden}
.quadro div::after{content:"";position:absolute;inset:-20%;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.75) 49%,transparent 56%);transform:translateX(-70%);animation:brilho 7s 2.6s ease-in-out infinite}
@keyframes brilho{0%{transform:translateX(-70%)}22%,100%{transform:translateX(70%)}}
.quadro svg{width:24%;height:auto;color:var(--tinta)}
.quadro p{font-size:clamp(7.5px,.66vw,9.5px);line-height:1.55;color:var(--tinta-2);font-weight:500}
.quadro strong{font-family:var(--f-titulo);font-style:italic;font-weight:500;font-size:clamp(14px,1.34vw,19.5px);color:var(--tinta)}
@keyframes pousa{from{opacity:0;transform:perspective(900px) translateY(-34px) rotateY(34deg) rotateZ(3deg)}to{opacity:1;transform:perspective(900px) rotateY(17deg) rotateZ(-1.2deg)}}

.e{opacity:0;transform:translateY(14px);animation:entra .95s cubic-bezier(.2,.7,.2,1) forwards}
.e1{animation-delay:.1s}.e2{animation-delay:.35s}.e3{animation-delay:.55s}.e4{animation-delay:.9s}.e5{animation-delay:1.1s}.e6{animation-delay:1.3s}.e7{animation-delay:1.5s}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .menu a:not(.ag){display:none}
  .marca img{height:50px}
  .hero nav{padding:14px var(--pad)}
  .grade{display:flex;flex-direction:column;gap:0}
  .palco{order:1;align-self:flex-end;width:60%;height:40svh;min-height:310px;margin-right:3%}
  .texto{order:2;padding-top:30px;padding-bottom:34px}
  .mesa{left:-66%;width:86%;bottom:-4%}
  .quadro{left:-52%;width:52%;bottom:5%}
  .quadro p{font-size:7.6px}
  .quadro strong{font-size:14.5px}
  .etiqueta{display:none}
  .sobre span{display:none}
  h1 .diz{font-size:1.5rem}
  h1 .responde{font-size:clamp(2.7rem,11.6vw,3.9rem)}
  .botao{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .malha,.flores img{animation:none}
  .e,.flores,.ela,.quadro,.etiqueta,.mesa,.quadro div::after{animation:none;opacity:1}
  .led{animation:none;opacity:.8}
  .ela{transform:translateX(-50%)}
  .quadro{transform:perspective(900px) rotateY(17deg) rotateZ(-1.2deg)}
  h1 .responde path{animation:none;stroke-dashoffset:0}
}

/* ===== base do site (depois do hero) ===== */
html{scroll-behavior:smooth;scroll-padding-top:84px}
img{max-width:100%;height:auto}
:focus-visible{outline:2.5px solid var(--flor);outline-offset:3px;border-radius:4px}
.pular{position:absolute;left:-999px;top:8px;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.pular:focus{left:8px}
main{position:relative}
main>section{position:relative;padding:var(--respiro) var(--pad);isolation:isolate}
.dentro{max-width:1296px;margin-inline:auto}
.sobrelinha{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--flor)}
.falas{font-family:var(--f-titulo);font-weight:400;letter-spacing:-.015em}
.falas .diz{display:block;font-size:clamp(1.3rem,2.1vw,2.1rem);line-height:1.2;color:var(--tinta);text-wrap:balance}
.falas .responde{display:inline-block;position:relative;font-style:italic;font-size:clamp(2.5rem,5vw,5rem);line-height:1.02;color:var(--flor);margin-top:.12em;letter-spacing:-.028em;padding-bottom:.18em;text-wrap:balance}
.falas .responde svg{position:absolute;left:30%;bottom:0;width:62%;height:.2em;overflow:visible}
.falas .responde path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s .7s cubic-bezier(.6,0,.2,1)}
.visto .falas .responde path,.falas.visto .responde path{stroke-dashoffset:0}
.corpo{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.66;color:var(--tinta-2);max-width:34em}
.corpo strong{color:var(--tinta);font-weight:700}
/* entrada por rolagem: um gesto por seção */
.js .r{opacity:0;transform:translateY(24px);transition:opacity .95s var(--curva),transform .95s var(--curva);transition-delay:calc(var(--i,0)*110ms)}
.js .visto .r,.js .r.visto{opacity:1;transform:none}
/* barra que acompanha a rolagem */
.barra{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px var(--pad);background:color-mix(in oklch,var(--creme) 86%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(44,24,29,.08);transform:translateY(-105%);transition:transform .5s var(--curva)}
.barra.ativa{transform:none}
.barra .marca img{height:44px}
.zap{position:fixed;right:16px;bottom:16px;z-index:49;display:none;align-items:center;gap:10px;background:var(--flor);color:#fff;border-radius:99px;padding:14px 20px 14px 16px;font-weight:700;font-size:14.5px;box-shadow:0 14px 30px -10px rgba(142,23,64,.7);transform:translateY(140%);transition:transform .5s var(--curva)}
.zap.ativa{transform:none}
.zap svg{width:20px;height:20px}
@media (max-width:900px){.zap{display:inline-flex}.barra .menu a:not(.ag){display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .studio-porta .porta img{clip-path:none;transition:none}
  .nota path{transition:none;stroke-dashoffset:0}
  .malha-sec::before,.dica::before{animation:none}
  .citacao s path{transition:none;stroke-dashoffset:0}
  .js .r{opacity:1;transform:none;transition:none}
  .falas .responde path{transition:none;stroke-dashoffset:0}
}

/* ===== peças do sistema ===== */
/* painel de foto real com o LED âmbar do espelho */
.painel{position:relative;margin:0;border-radius:26px}
.painel::before{content:"";position:absolute;inset:-12px;border-radius:36px;background:linear-gradient(180deg,rgba(255,206,132,.95),rgba(255,180,120,.55));filter:blur(15px);opacity:0;transition:opacity 1.8s .9s ease;z-index:-1}
.visto .painel::before,.painel.visto::before{opacity:.8;animation:pulsa 6s 3s ease-in-out infinite alternate}
.painel img{display:block;width:100%;height:100%;object-fit:cover;border-radius:26px;box-shadow:0 0 0 1.5px rgba(255,226,170,.9),0 34px 50px -30px rgba(70,8,30,.55)}
.painel figcaption{position:absolute;left:16px;bottom:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#fff;text-shadow:0 1px 10px rgba(40,10,10,.7)}
/* balão com coração: toda voz de cliente */
.balao{margin:0;background:#fff;border-radius:20px 20px 20px 4px;padding:16px 18px 14px;box-shadow:0 24px 40px -22px rgba(70,8,30,.5);max-width:17em}
.balao svg{width:22px;height:22px;color:var(--flor);display:block;margin-bottom:6px}
.balao p{font-family:var(--f-titulo);font-style:italic;font-size:1.12rem;line-height:1.3;color:var(--tinta)}
.balao footer{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--tinta-2)}

/* malha de fundo por seção: muda de temperatura ao longo da página */
.malha-sec{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.malha-sec::before{content:"";position:absolute;inset:-10%;background:var(--manchas);animation:respira 40s ease-in-out infinite alternate}
.malha-sec::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== A medida ===== */
.medida{--manchas:
  radial-gradient(38% 48% at 74% 46%, color-mix(in oklch,#f3c9b4 70%,transparent) 0, transparent 72%),
  radial-gradient(30% 40% at 100% 0%, color-mix(in oklch,var(--rosa-2) 60%,transparent) 0, transparent 72%),
  radial-gradient(40% 46% at 0% 100%, color-mix(in oklch,var(--damasco) 80%,transparent) 0, transparent 72%)}
.medida .dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:center}
.medida .falas{margin-top:18px}
.citacao{margin:clamp(22px,3.4vh,34px) 0 0;padding-left:20px;border-left:2px solid var(--flor)}
.citacao p{font-family:var(--f-titulo);font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.3;color:var(--tinta)}
.citacao em{font-style:italic;color:var(--flor)}
.citacao s{text-decoration:none;position:relative;white-space:nowrap;color:var(--tinta-2)}
.citacao s svg{position:absolute;left:-3%;top:8%;width:106%;height:90%;overflow:visible}
.citacao s path{fill:none;stroke:var(--flor);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s 1.5s cubic-bezier(.6,0,.2,1)}
.visto .citacao s path{stroke-dashoffset:0}
.citacao footer{margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tinta-2)}
.medida .corpo{margin-top:22px}
.cuidados{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid rgba(44,24,29,.14)}
.cuidados li{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid rgba(44,24,29,.14);font-family:var(--f-titulo);font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--tinta)}
.cuidados span{font-family:var(--f-texto);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--flor)}
.medida .fecho{margin-top:16px;font-size:.95rem;color:var(--tinta-2);max-width:30em}
.medida-fotos{position:relative;padding:0 0 12% 16%}
.medida-fotos .grande{aspect-ratio:5/4.4;cursor:zoom-in}
.medida-fotos .grande figcaption{left:auto;right:18px}
/* a lupa: prova do isolamento, fio a fio */
.lupa{position:absolute;left:var(--lx,57%);top:var(--ly,37%);width:clamp(120px,15vw,210px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;
  background-image:var(--foto);background-repeat:no-repeat;background-size:calc(var(--zoom,2.5)*var(--fw,600px)) auto;background-position:var(--bx,50%) var(--by,50%);
  box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--rose),0 24px 40px -14px rgba(40,8,20,.7);transition:left .25s var(--curva),top .25s var(--curva),opacity .4s;opacity:0}
.visto .lupa{opacity:1;transition:left .25s var(--curva),top .25s var(--curva),opacity .9s 1.4s}
.lupa.pega{cursor:grabbing;transition:opacity .4s!important;box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--flor),0 28px 44px -14px rgba(40,8,20,.8)}
.dica .toque{display:none}
@media (hover:none){.dica .mouse{display:none}.dica .toque{display:inline}}
.dica{position:absolute;left:18px;top:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#fff;text-shadow:0 1px 10px rgba(40,10,10,.8);display:flex;align-items:center;gap:8px}
.dica::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:chama 2.4s ease-out infinite}
@keyframes chama{to{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.medida-fotos .grande img{object-position:50% 46%}
.medida-fotos .pequeno{position:absolute;left:0;bottom:0;width:40%;aspect-ratio:4/4.6}
.medida-fotos .pequeno img{object-position:44% 44%}
.medida-fotos .balao{position:absolute;right:-2%;top:-7%}
@media (max-width:900px){
  .medida .dentro{grid-template-columns:1fr;gap:44px}
  .medida-fotos{padding:0 0 22% 12%;margin-top:26px}
  .medida-fotos .pequeno{width:46%}
  .medida-fotos{padding-bottom:30%}
  .medida-fotos .balao{left:50%;right:0;top:auto;bottom:0;max-width:none;padding:12px 14px}
  .medida-fotos .balao p{font-size:.95rem}
  .medida-fotos .grande figcaption{right:14px;bottom:auto;top:14px}
  .balao p{font-size:1rem}
  .lupa{width:118px}
  .dica{left:auto;right:14px;top:34px;font-size:9.5px}
}

/* ===== Cílios: a régua de volume ===== */
.cilios{--manchas:
  radial-gradient(40% 50% at 30% 56%, color-mix(in oklch,#fff 85%,transparent) 0, transparent 72%),
  radial-gradient(34% 44% at 96% 30%, color-mix(in oklch,var(--rosa-1) 90%,transparent) 0, transparent 72%),
  radial-gradient(36% 40% at 4% 4%, color-mix(in oklch,var(--damasco) 70%,transparent) 0, transparent 72%)}
.cilios .falas{margin-top:18px}
.regua{margin-top:clamp(34px,6vh,64px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:center}
/* a vitrine: o porta-retrato, deitado */
.vitrine{position:relative;padding:clamp(10px,1.4vw,18px);border-radius:4px;background:linear-gradient(135deg,#fff 0,#f3eeec 48%,#fff 52%,#ece4e1 100%);
  box-shadow:0 0 0 1px rgba(160,120,110,.25),inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--rose),0 40px 60px -34px rgba(70,8,30,.5)}
.vitrine::after{content:"";position:absolute;inset:clamp(10px,1.4vw,18px);background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.7) 49%,transparent 56%);background-size:260% 100%;background-position:120% 0;animation:reflexo 8s 2s ease-in-out infinite;pointer-events:none}
@keyframes reflexo{0%{background-position:120% 0}26%,100%{background-position:-60% 0}}
#olho{display:block;width:100%;aspect-ratio:16/8.4;background:linear-gradient(165deg,#f8f9fc,var(--vidro));box-shadow:inset 0 2px 6px rgba(60,40,50,.2)}
.dica-regua{position:absolute;left:clamp(22px,2.6vw,36px);top:clamp(20px,2.4vw,32px);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--tinta-2);display:flex;align-items:center;gap:8px}
.dica-regua::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--flor);animation:chama-flor 2.4s ease-out infinite}
@keyframes chama-flor{from{box-shadow:0 0 0 0 rgba(194,38,91,.6)}to{box-shadow:0 0 0 10px rgba(194,38,91,0)}}
.leque{display:flex;align-items:center;gap:18px;margin-bottom:clamp(18px,3vh,30px)}
.leque canvas{flex:none;display:block;width:clamp(96px,10vw,138px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--rose),0 24px 40px -16px rgba(70,8,30,.5)}
.leque p{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);line-height:1.5}
.leque p span{display:block;font-family:var(--f-titulo);font-weight:500;font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--flor);line-height:1.15}
.regua-lado .passo{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--tinta-2)}
.regua-lado .passo b{color:var(--flor)}
.regua-lado h3{margin-top:10px;font-family:var(--f-titulo);font-weight:400;font-size:clamp(2.2rem,4vw,4rem);line-height:1.02;letter-spacing:-.02em}
.regua-lado #tec-desc{margin-top:14px;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:var(--tinta-2);min-height:4.8em}
.regua-lado .sec{display:inline-block;margin-top:14px}
.trilho{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start;margin-top:clamp(34px,6vh,60px)}
.trilho .ponta{font-family:var(--f-titulo);font-style:italic;font-size:1.05rem;color:var(--tinta-2);line-height:22px}
.trilho-meio{position:relative}
#medida-volume{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:0;background:transparent;cursor:pointer;display:block}
#medida-volume::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--flor) var(--pct,25%),rgba(44,24,29,.2) var(--pct,25%))}
#medida-volume::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--flor) var(--pct,25%),rgba(44,24,29,.2) var(--pct,25%))}
#medida-volume::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--flor);border:4px solid #fff;box-shadow:0 0 0 1.5px var(--flor),0 8px 16px -6px rgba(142,23,64,.7);margin-top:-10px;transition:transform .2s}
#medida-volume::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--flor);border:4px solid #fff;box-shadow:0 0 0 1.5px var(--flor),0 8px 16px -6px rgba(142,23,64,.7)}
#medida-volume:active::-webkit-slider-thumb{transform:scale(1.15)}
.paradas{list-style:none;padding:0;margin:14px 11px 0;display:flex;justify-content:space-between}
.paradas li{width:0;display:flex;justify-content:center;position:relative}
.paradas li::before{content:"";position:absolute;top:-30px;width:1px;height:10px;background:rgba(44,24,29,.35)}
.paradas button{font:inherit;font-size:13px;font-weight:600;white-space:nowrap;background:none;border:0;padding:6px 8px;color:var(--tinta-2);cursor:pointer;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:color .3s}
.paradas svg{width:40px;height:44px;overflow:visible;opacity:.55;transition:opacity .3s,transform .4s var(--curva)}
.paradas svg path{fill:none;stroke-linecap:round}
.paradas button:hover svg{opacity:.9}
.paradas button[aria-current="true"]{color:var(--flor);font-weight:700}
.paradas button[aria-current="true"] svg{opacity:1;transform:translateY(-3px) scale(1.12)}
.paradas li:first-child{justify-content:flex-start}.paradas li:last-child{justify-content:flex-end}
.brow{margin-top:clamp(64px,10vh,120px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,88px);align-items:center}
.brow-quadro{justify-self:end;width:min(100%,420px);padding:clamp(9px,1.2vw,15px);border-radius:4px;background:linear-gradient(135deg,#fff 0,#f3eeec 48%,#fff 52%,#ece4e1 100%);box-shadow:0 0 0 1px rgba(160,120,110,.25),inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--rose),0 34px 50px -30px rgba(70,8,30,.5);transform:rotate(-2deg)}
.brow-quadro svg{display:block;width:100%;height:auto;background:linear-gradient(165deg,#f8f9fc,var(--vidro));box-shadow:inset 0 2px 6px rgba(60,40,50,.2)}
.brow .pelos line{stroke:#3a2622;stroke-width:1.15;stroke-linecap:round;transform-box:fill-box;transform-origin:0 50%;transform:rotate(var(--bag));transition:transform 1.3s var(--curva);transition-delay:calc(var(--n)*22ms + .3s)}
.brow.visto .pelos line{transform:rotate(0deg)}
.brow h3{margin-top:10px;font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.015em}
.brow p:not(.sobrelinha){margin-top:12px;color:var(--tinta-2);line-height:1.62;max-width:32em;font-size:clamp(1rem,1.15vw,1.1rem)}
@media (max-width:900px){
  .regua{grid-template-columns:1fr;gap:0}
  .vitrine{order:1}
  #olho{aspect-ratio:16/10}
  .dica-regua{font-size:10px;left:18px;top:16px}
  .trilho{order:2;grid-template-columns:1fr 1fr;gap:6px 0;margin-top:26px}
  .trilho .ponta{grid-row:1;font-size:.95rem}
  .trilho .ponta:last-child{text-align:right}
  .trilho-meio{grid-column:1/-1;grid-row:2}
  .paradas{margin-top:10px}
  .paradas li::before{display:none}
  .paradas button{padding:4px}
  .paradas button span{display:none}
  .paradas svg{width:34px;height:38px}
  .regua-lado{order:3;margin-top:26px}
  .leque{margin-bottom:16px}
  .leque canvas{width:92px}
  .regua-lado #tec-desc{min-height:3.4em}
  .brow{grid-template-columns:1fr;gap:26px}
  .brow-quadro{justify-self:start;width:78%}
}
@media (prefers-reduced-motion:reduce){.vitrine::after,.dica-regua::before{animation:none}.brow .pelos line{transition:none;transform:none}}

/* ===== Premiações (a única seção escura): o site inteiro vira um painel com LED ===== */
main>.premios{padding:clamp(20px,3vw,40px) clamp(10px,1.6vw,24px)}
.noite{position:relative;isolation:isolate;border-radius:clamp(22px,3vw,40px);background:var(--noite);color:#f8ebe4;padding:clamp(64px,11vh,136px) calc(var(--pad) - clamp(10px,1.6vw,24px));
  box-shadow:0 0 0 1.5px rgba(255,226,170,.3),0 0 20px 0 rgba(255,196,120,.1),0 50px 80px -50px rgba(70,8,30,.8);transition:box-shadow 2.2s .3s ease}
.premios.visto .noite{box-shadow:0 0 0 1.5px rgba(255,226,170,.8),0 0 70px 6px rgba(255,196,120,.5),0 50px 80px -50px rgba(70,8,30,.8)}
.noite .malha-sec{border-radius:inherit;--manchas:
  radial-gradient(40% 50% at 82% 40%, color-mix(in oklch,#8e1740 62%,transparent) 0, transparent 72%),
  radial-gradient(34% 44% at 100% 100%, color-mix(in oklch,#a8733a 42%,transparent) 0, transparent 72%),
  radial-gradient(44% 50% at 8% 0%, color-mix(in oklch,#4d1230 80%,transparent) 0, transparent 72%)}
.noite .malha-sec::after{mix-blend-mode:overlay;opacity:.09}
.premios .sobrelinha{color:var(--rosa-2)}
.premios .falas{margin-top:18px}
.premios-topo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:end}
.ponte{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.66;color:#cdb7b0;max-width:30em;padding-bottom:.9em}
.premios .falas .diz{color:#f8ebe4}
.premios .falas .responde{color:var(--led)}
.premios-grade{margin-top:clamp(36px,6vh,64px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:start}
.lista-premios{list-style:none;padding:0;margin:0;border-top:1px solid rgba(248,235,228,.16)}
.lista-premios li{display:grid;grid-template-columns:clamp(64px,7vw,104px) 1fr auto;gap:18px;align-items:baseline;padding:clamp(16px,2.4vh,26px) 0;border-bottom:1px solid rgba(248,235,228,.16)}
.lista-premios .ord{font-family:var(--f-titulo);font-style:italic;font-size:clamp(2.6rem,4.6vw,4.6rem);line-height:1;color:var(--led)}
.lista-premios h3{font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.45rem,2.5vw,2.4rem);line-height:1.1}
.lista-premios p{margin-top:4px;font-size:13.5px;color:#cdb7b0}
.lista-premios .ano{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#cdb7b0;text-align:right}
.premios-fotos{position:relative;padding:0 0 16% 18%;margin-top:clamp(0px,2vh,24px)}
.premios-fotos figcaption{left:auto;right:16px;bottom:auto;top:14px}
.premios-fotos .painel:first-child{aspect-ratio:4/5}
.premios-fotos .painel:first-child img{object-position:38% 62%}
.premios-fotos .painel:last-child{position:absolute;left:0;bottom:0;width:46%;aspect-ratio:1;transform:rotate(-3deg)}
.premios-fotos .painel:last-child img{object-position:36% 66%}
.premios .painel img{box-shadow:0 0 0 1.5px rgba(255,226,170,.9),0 34px 50px -24px rgba(0,0,0,.7)}
.confissao{margin:clamp(34px,6vh,60px) 0 0;max-width:34em}
.confissao p{font-family:var(--f-titulo);font-style:italic;font-size:clamp(1.2rem,1.75vw,1.65rem);line-height:1.35;color:#f8ebe4}
.confissao footer{margin-top:14px;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#cdb7b0}
.confissao footer::before{content:"";width:34px;height:1px;background:currentColor}
@media (max-width:900px){
  .premios-grade,.premios-topo{grid-template-columns:1fr}
  .premios-topo{gap:18px}
  .ponte{padding-bottom:0}
  .lista-premios li{grid-template-columns:56px 1fr;gap:2px 12px}
  .lista-premios .ano{grid-column:2;text-align:left}
  .premios-fotos{margin:14px 0 0;padding:0 0 20% 14%}
}

/* ===== O novo Studio ===== */
.studio{--manchas:
  radial-gradient(34% 40% at 78% 26%, color-mix(in oklch,var(--led) 42%,transparent) 0, transparent 72%),
  radial-gradient(36% 40% at 0% 60%, color-mix(in oklch,var(--rosa-1) 90%,transparent) 0, transparent 72%),
  radial-gradient(40% 40% at 60% 100%, color-mix(in oklch,var(--damasco) 80%,transparent) 0, transparent 72%)}
.studio-abre{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,104px);align-items:center}
.studio .falas{margin-top:18px}
.data{margin-top:clamp(26px,4.4vh,44px);display:flex;align-items:center;gap:16px;font-size:13px;line-height:1.35;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta)}
.data b{font-family:var(--f-titulo);font-weight:400;font-size:clamp(4rem,7vw,6.6rem);line-height:.8;letter-spacing:-.04em;color:var(--tinta)}
.data em{margin-left:6px;padding-left:18px;border-left:1px solid rgba(44,24,29,.25);font-family:var(--f-titulo);font-size:1.15rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--tinta-2);align-self:stretch;display:flex;align-items:center}
.versos{margin:clamp(24px,4vh,40px) 0 0}
.versos p{font-family:var(--f-titulo);font-size:clamp(1.15rem,1.55vw,1.5rem);line-height:1.45;color:var(--tinta)}
.versos p+p{margin-top:.9em}
.versos em{color:var(--flor)}
.versos footer{margin-top:16px;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tinta-2)}
.versos footer::before{content:"";width:34px;height:1px;background:currentColor}
.studio-porta{position:relative;padding:0 0 10% 12%}
.studio-porta .painel:first-child{aspect-ratio:4/5.5}
.studio-porta .painel:first-child img{object-position:50% 40%}
.studio-porta .porta figcaption{left:auto;right:18px;bottom:auto;top:16px}
/* o gesto da seção: a porta abre */
.js .studio-porta .porta{opacity:1;transform:none}
.js .studio-porta .porta img{clip-path:inset(0 50% 0 50% round 26px);transition:clip-path 1.5s .25s cubic-bezier(.7,0,.2,1)}
.js .visto .studio-porta .porta img{clip-path:inset(0 0 0 0 round 26px)}
.studio-porta .letreiro{position:absolute;left:0;bottom:0;width:44%;aspect-ratio:1/1.08;transform:rotate(-3.5deg)}
.studio-porta .letreiro img{object-position:56% 46%}
.studio-visita{margin-top:clamp(64px,11vh,136px)}
.tres{font-family:var(--f-titulo);font-size:clamp(1.7rem,3.6vw,3.6rem);line-height:1.14;letter-spacing:-.02em;max-width:19em;text-wrap:balance}
.tres em{color:var(--flor)}
.trilha{margin-top:clamp(30px,5vh,56px);display:grid;grid-template-columns:5fr 4fr 3.4fr;gap:clamp(14px,2vw,28px);align-items:end;position:relative}
.trilha .painel:nth-child(1){aspect-ratio:5/4.4}
.trilha .painel:nth-child(1) img{object-position:50% 58%}
.trilha .painel:nth-child(2){aspect-ratio:4/4.6}
.trilha .painel:nth-child(2) img{object-position:40% 56%}
.trilha .painel:nth-child(3){aspect-ratio:3.4/5}
.trilha .painel:nth-child(3) img{object-position:40% 60%}
.trilha .balao{position:absolute;right:20%;top:-14%}
.nota{position:absolute;left:54%;top:-64px;font-family:var(--f-titulo);font-style:italic;font-size:1.02rem;line-height:1.2;color:var(--flor);display:flex;align-items:flex-end;gap:6px;transform:rotate(-3deg);white-space:nowrap}
.nota svg{width:46px;height:40px;flex:none;overflow:visible;transform:scaleY(-1) rotate(8deg);margin-bottom:-22px}
.nota path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s 1.2s cubic-bezier(.6,0,.2,1)}
.visto .nota path{stroke-dashoffset:0}
@media (max-width:900px){
  .studio-abre{grid-template-columns:1fr;gap:40px}
  .data em{font-size:1rem}
  .trilha{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad)*-1);padding:24px var(--pad) 30px;align-items:stretch;scrollbar-width:none}
  .trilha::-webkit-scrollbar{display:none}
  .trilha .painel{flex:0 0 76%;scroll-snap-align:center;aspect-ratio:4/5!important}
  .trilha .balao{position:relative;right:auto;top:auto;flex:0 0 70%;align-self:center;scroll-snap-align:center}
  .trilha{padding-top:70px}
  .nota{left:38%;top:-58px}
}

/* ===== Cursos ===== */
.cursos{--manchas:
  radial-gradient(36% 46% at 22% 44%, color-mix(in oklch,var(--rosa-2) 62%,transparent) 0, transparent 72%),
  radial-gradient(34% 40% at 100% 90%, color-mix(in oklch,var(--damasco) 80%,transparent) 0, transparent 72%)}
.cursos .dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,104px);align-items:center}
.cursos-cena{position:relative;padding:0 14% 36% 0}
.cursos-cena .aula{aspect-ratio:4/5}
.cursos-cena .aula img{object-position:50% 30%}
.cursos-cena .aula figcaption{bottom:auto;top:16px}
.cursos-cena .pratica{position:absolute;right:0;top:9%;width:34%;aspect-ratio:1/1.15;transform:rotate(3deg)}
.cursos-cena .pratica img{object-position:60% 44%}
.cursos-cena .pratica figcaption{font-size:9.5px;left:12px;bottom:10px}
/* o certificado: mais um porta-retrato */
.certificado{position:absolute;left:18%;top:62%;width:66%;padding:clamp(8px,1vw,13px);border-radius:3px;background:linear-gradient(135deg,#fff 0,#f3eeec 48%,#fff 52%,#ece4e1 100%);
  box-shadow:0 0 0 1px rgba(160,120,110,.25),inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--rose),0 34px 46px -26px rgba(70,8,30,.6);
  transform:perspective(900px) rotateY(calc(-9deg + var(--px,0)*5deg)) rotateZ(2deg);transition:transform .9s var(--curva),opacity .95s var(--curva)}
.js .certificado.r{transform:perspective(900px) translateY(26px) rotateY(-24deg) rotateZ(5deg)}
.js .visto .certificado.r{transform:perspective(900px) rotateY(calc(-9deg + var(--px,0)*5deg)) rotateZ(2deg)}
.certificado div{background:linear-gradient(165deg,#fff,#fbeff0);box-shadow:inset 0 2px 5px rgba(60,40,50,.18);padding:6% 8% 6.5%;text-align:center;display:grid;gap:6px;position:relative;overflow:hidden}
.certificado div::after{content:"";position:absolute;inset:-20%;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.8) 49%,transparent 56%);transform:translateX(-70%);animation:brilho 7s 3s ease-in-out infinite}
.certificado img{width:20%;height:auto;justify-self:center}
.certificado small{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--flor)}
.certificado b{font-family:var(--f-titulo);font-weight:400;font-size:clamp(.95rem,1.35vw,1.3rem);color:var(--tinta)}
.certificado i{white-space:nowrap;font-family:var(--f-titulo);font-size:clamp(1.15rem,2.1vw,2rem);color:var(--flor);border-bottom:1px solid rgba(44,24,29,.25);padding-bottom:6px;margin:4px 8% 2px}
/* o gesto da seção: o nome é escrito na linha */
.js .certificado i span{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path 1.4s 1.3s cubic-bezier(.6,0,.2,1)}
.js .visto .certificado i span{clip-path:inset(0 0 0 0)}
.certificado div>span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tinta-2)}
.cursos .falas{margin-top:18px}
.cursos .corpo{margin-top:22px}
.trio{list-style:none;padding:0;margin:clamp(22px,3.6vh,34px) 0 0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 clamp(22px,3.4vw,52px);font-size:13px;color:var(--tinta-2)}
.trio li+li{border-left:1px solid rgba(44,24,29,.16);padding-left:clamp(22px,3.4vw,52px)}
.trio b{display:block;font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.5rem,2.3vw,2.2rem);color:var(--tinta);line-height:1.1}
.incentivo{margin-top:clamp(22px,3.6vh,34px);font-family:var(--f-titulo);font-style:italic;font-size:clamp(1.15rem,1.6vw,1.5rem);color:var(--flor)}
.incentivo small{display:block;margin-top:6px;font-family:var(--f-texto);font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--tinta-2)}
.cursos .botao{margin-top:clamp(20px,3.2vh,30px)}
.miudo{margin-top:12px;font-size:13px;color:var(--tinta-2)}
@media (max-width:900px){
  .cursos .dentro{grid-template-columns:1fr;gap:44px}
  .cursos-texto{order:-1}
  .trio{gap:0 16px}.trio li+li{padding-left:16px}
  .trio b{font-size:1.35rem}
  .cursos .botao{width:100%;justify-content:center}
  .cursos-cena{padding-bottom:40%;margin-bottom:26px}
  .certificado{left:14%;width:72%}
  .certificado b{font-size:.84rem}
  .certificado div>span{font-size:8px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){.certificado div::after{animation:none}.js .certificado i span{clip-path:none;transition:none}}

/* ===== Perguntas: uma conversa de recepção ===== */
.perguntas{--manchas:
  radial-gradient(34% 44% at 12% 40%, color-mix(in oklch,var(--rosa-1) 95%,transparent) 0, transparent 72%),
  radial-gradient(36% 40% at 96% 70%, color-mix(in oklch,var(--damasco) 78%,transparent) 0, transparent 72%)}
.perguntas .dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,104px);align-items:start}
.perguntas-lado{position:sticky;top:104px}
.perguntas .falas{margin-top:18px}
/* o aviso de horário: mais um porta-retrato da recepção */
.aviso-cena{position:relative;margin-top:clamp(30px,5vh,52px);width:min(100%,340px);padding:0 0 34px 20px}
.mesa-p{position:absolute;left:-8%;right:-6%;bottom:0;aspect-ratio:3.1/1;border-radius:50%;background:radial-gradient(closest-side,#fff 0,#fff 62%,#f4e9e6 100%);box-shadow:0 26px 40px -18px rgba(70,8,30,.4),0 3px 0 #e9dcd8}
.mesa-p::before{content:"";position:absolute;inset:12% 10%;border-radius:50%;background:var(--rose);opacity:.85;-webkit-mask:radial-gradient(circle,transparent 0 2.6px,#000 3px) 0 0/10px 8px;mask:radial-gradient(circle,transparent 0 2.6px,#000 3px) 0 0/10px 8px}
.aviso{position:relative;width:min(100%,290px);padding:14px;border-radius:3px;background:linear-gradient(135deg,#fff 0,#f3eeec 48%,#fff 52%,#ece4e1 100%);
  box-shadow:0 0 0 1px rgba(160,120,110,.25),inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--rose),0 34px 46px -26px rgba(70,8,30,.55);
  transform:perspective(900px) rotateY(calc(11deg + var(--px,0)*5deg)) rotateZ(-1.5deg);transform-origin:50% 100%}
.aviso>div{position:relative;overflow:hidden;background:linear-gradient(165deg,#f7f8fb,var(--vidro));box-shadow:inset 0 2px 5px rgba(60,40,50,.2);padding:22px 20px 20px;text-align:center}
.aviso>div::after{content:"";position:absolute;inset:-20%;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.8) 49%,transparent 56%);transform:translateX(-70%);animation:brilho 7s 2s ease-in-out infinite}
.aviso small{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--flor)}
.aviso dl{margin:14px 0 0;display:grid;grid-template-columns:1fr auto;gap:8px 14px;text-align:left;font-size:13.5px}
.aviso dt{color:var(--tinta-2)}.aviso dd{margin:0;font-weight:700;color:var(--tinta);text-align:right}
.aviso i{display:block;margin-top:16px;padding-top:12px;border-top:1px solid rgba(44,24,29,.14);font-family:var(--f-titulo);font-size:1.12rem;color:var(--tinta)}
.troca{display:grid;gap:14px;padding:clamp(22px,3.6vh,36px) 0;border-bottom:1px solid rgba(44,24,29,.12)}
.troca:first-child{padding-top:0}
.js .troca .balao.r{transform:scale(.86) translateY(10px);transform-origin:0 100%;transition:opacity .5s var(--curva),transform .6s cubic-bezier(.3,1.5,.5,1)}
.js .troca.visto .balao.r{transform:none}
.js .troca .resposta.r{transition-delay:.28s}
.troca .balao{justify-self:start;display:flex;align-items:center;gap:10px;max-width:none;padding:11px 18px 11px 14px;font-family:var(--f-texto);font-weight:700;font-size:15px;color:var(--tinta);box-shadow:0 18px 30px -20px rgba(70,8,30,.45)}
.troca .balao svg{margin:0;flex:none}
.resposta{padding-left:clamp(18px,3.4vw,54px)}
.resposta .curta{font-family:var(--f-titulo);font-style:italic;font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.12;letter-spacing:-.02em;color:var(--flor);text-wrap:balance}
.resposta p+p{margin-top:10px;color:var(--tinta-2);line-height:1.62;max-width:34em;font-size:clamp(1rem,1.1vw,1.06rem)}
.outra{margin-top:26px;font-size:15px;color:var(--tinta-2)}
.js .outra{opacity:0;transition:opacity 1s}.js .outra.visto{opacity:1}
.outra a{font-weight:700;color:var(--tinta);border-bottom:1.5px solid rgba(44,24,29,.3);padding-bottom:2px}
@media (max-width:900px){
  .perguntas .dentro{grid-template-columns:1fr;gap:36px}
  .perguntas-lado{position:static}
  .aviso-cena{margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){.aviso>div::after{animation:none}}

/* ===== Onde fica: o painel de flores do hero, do tamanho da página ===== */
main>.contato{padding:clamp(20px,3vw,40px) clamp(10px,1.6vw,24px) clamp(28px,4vw,56px)}
.jardim{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(22px,3vw,40px);color:#fff;padding:clamp(64px,11vh,128px) calc(var(--pad) - clamp(10px,1.6vw,24px));
  box-shadow:0 0 0 1.5px rgba(255,226,170,.85),0 0 70px 6px rgba(255,196,120,.45),0 50px 80px -50px rgba(70,8,30,.8)}
.jardim-fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%;z-index:-2;transform:scale(1.05);animation:aproxima 34s ease-in-out infinite alternate}
.jardim::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(52,6,24,.94) 0,rgba(82,10,40,.86) 36%,rgba(120,18,58,.42) 72%,rgba(140,24,66,.2) 100%)}
.contato .dentro{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center}
.contato .sobrelinha{color:var(--led)}
.contato .falas{margin-top:18px}
.contato .falas .diz{color:#fff}
.contato .falas .responde{color:var(--led);font-size:clamp(3rem,6.4vw,6.4rem)}
.contato .corpo{margin-top:20px;color:#f3dfe4}
.contato .acoes{margin-top:clamp(22px,3.6vh,34px)}
.botao.claro{background:#fff;color:var(--flor-escura);box-shadow:0 18px 34px -16px rgba(0,0,0,.6)}
.botao.claro:hover{background:var(--led);color:var(--tinta)}
.contato .sec{color:#fff;border-color:rgba(255,255,255,.5)}
.dados{margin:clamp(30px,5vh,52px) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
.dados dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--led)}
.dados dd{margin:6px 0 0;font-size:15px;line-height:1.55;color:#fff}
.dados address{font-style:normal}
.dados a{border-bottom:1px solid rgba(255,255,255,.45)}
.contato-cena{position:relative;padding:0 0 16% 20%}
/* o mapa dentro do porta-retrato */
.mapa{padding:clamp(9px,1.1vw,14px);border-radius:4px;background:linear-gradient(135deg,#fff 0,#f3eeec 48%,#fff 52%,#ece4e1 100%);box-shadow:0 0 0 1px rgba(160,120,110,.25),inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--rose),0 40px 60px -30px rgba(20,0,10,.8)}
.mapa{transform:rotate(1.2deg)}
.mapa iframe{display:block;width:100%;aspect-ratio:1/1.02;border:0;filter:saturate(.82)}
.contato-cena .espelho{position:absolute;left:0;bottom:0;width:36%;aspect-ratio:3/4.4;transform:rotate(-4deg)}
.contato-cena .espelho img{object-position:50% 50%}
.contato-cena .espelho figcaption{font-size:9.5px;left:12px;bottom:10px}
@media (max-width:900px){
  .contato .dentro{grid-template-columns:1fr;gap:44px}
  .dados{grid-template-columns:1fr}
  .contato .botao{width:100%;justify-content:center}
  .jardim::before{background:linear-gradient(180deg,rgba(52,6,24,.92) 0,rgba(82,10,40,.84) 60%,rgba(110,16,52,.7) 100%)}
}
/* ===== Rodapé ===== */
/* o último gesto: o porta-retrato do começo volta para agradecer */
.obrigada{position:absolute;right:calc(var(--pad) + 2%);top:-96px;width:clamp(150px,15vw,210px);padding:0 0 26px 14px;z-index:3}
.obrigada .mesa-p{left:-16%;right:-12%}
.obrigada .aviso{width:100%;padding:10px;transform:perspective(900px) rotateY(calc(-13deg + var(--px,0)*5deg)) rotateZ(1.5deg)}
.js .obrigada .aviso.r{opacity:0;transform:perspective(900px) translateY(-30px) rotateY(-30deg) rotateZ(-3deg);transition:opacity .9s var(--curva),transform 1.1s cubic-bezier(.3,1.3,.5,1)}
.js .obrigada.visto .aviso.r{opacity:1;transform:perspective(900px) rotateY(calc(-13deg + var(--px,0)*5deg)) rotateZ(1.5deg)}
.obrigada .aviso>div{padding:20px 12px 18px;display:grid;justify-items:center;gap:8px}
.obrigada svg{width:26px;height:26px;color:var(--tinta)}
.obrigada i{margin:0;padding:0;border:0;font-style:italic;font-size:clamp(1.2rem,1.7vw,1.6rem)}
.rodape{position:relative;padding:clamp(40px,7vh,72px) var(--pad) 26px;color:var(--tinta-2);font-size:14px;line-height:1.6}
.rodape .dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:start}
.rodape-marca img{height:84px;width:auto;display:block;margin-bottom:14px}
.rodape nav{display:grid;gap:7px}
.rodape nav a,.rodape address a{border-bottom:1px solid transparent;transition:border-color .3s,color .3s;width:fit-content}
.rodape nav a:hover,.rodape address a:hover{color:var(--flor);border-color:currentColor}
.rodape address{font-style:normal;padding-top:clamp(40px,6vw,84px)}
.rodape address a{color:var(--tinta);font-weight:600}
.rodape-fim{margin-top:clamp(28px,5vh,48px);padding-top:18px;border-top:1px solid rgba(44,24,29,.12);display:flex!important;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;font-size:13px}
.selo a{color:var(--tinta);font-weight:700;border-bottom:1.5px solid var(--flor);padding-bottom:1px}
.selo a:hover{color:var(--flor)}
@media (max-width:900px){.rodape .dentro{grid-template-columns:1fr}.rodape address{padding-top:0}.rodape{padding-bottom:92px}.obrigada{position:relative;right:auto;top:auto;margin:-50px auto 26px;width:150px}}
@media (prefers-reduced-motion:reduce){.jardim-fundo{animation:none}}

/* ===== tablet: as composições de foto não ocupam a tela inteira ===== */
@media (min-width:600px) and (max-width:900px){
  .medida-fotos,.premios-fotos,.studio-porta,.cursos-cena,.contato-cena{max-width:520px;margin-inline:auto;width:100%}
  .vitrine,.brow-quadro{max-width:600px}
  .trilha .painel{flex-basis:46%}
  .trilha .balao{flex-basis:44%}
  .palco{width:52%}
}
.mapa iframe{background:#f1e7e3}
