/* Viviane Bastos · Metodo COCRIAR · base: tokens, tipografia, botoes, menu, topo e orbita */

:root{
  /* luz */
  --marfim:#FAF7F2;--blush:#F6EBEE;--rosa-cha:#EEDDE2;--rosa-fundo:#F4E4E8;
  /* profundidade */
  --ameixa:#523641;--ameixa-escura:#3C2630;--ameixa-noite:#2E1C25;
  /* ornamento: 3,1:1 sobre marfim, so em borda e filete, nunca em texto pequeno */
  --rose-gold:#B58072;--rose-gold-claro:#E0BCB0;
  /* o mesmo rose, fechado ate passar em contraste de texto (5,8:1 no marfim) */
  --rose-texto:#8A5346;
  /* tinta */
  --tinta:#3C2630;--tinta-2:#6B4C57;--tinta-3:#8A7079;
  --creme-texto:#FAF7F2;--creme-2:#E6D6DA;

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.16,.84,.32,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  /* enfase: o brilho que percorre o italico */
  --em-claro:linear-gradient(110deg,#8A5346 0%,#A8646B 28%,#7E4B5E 54%,#A8646B 76%,#8A5346 100%);
  --em-escuro:linear-gradient(110deg,#E8C3B8 0%,#F3DCE1 30%,#DFC0C8 56%,#F3DCE1 78%,#E8C3B8 100%);
  --raio:18px;--raio-g:24px;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--marfim);color:var(--tinta-2);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.menu-aberto{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.1;margin:0;color:var(--tinta);text-wrap:balance}
p{margin:0 0 1em}
.wrap{width:min(var(--max),100%);margin-inline:auto;padding-inline:clamp(16px,4vw,40px);position:relative;z-index:2}
.pular{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ameixa);color:var(--marfim);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.pular:focus{top:12px}
:focus-visible{outline:2px solid var(--rose-texto);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ritmo das secoes ---------- */
section{position:relative;padding-block:clamp(76px,10vw,132px)}
.claro{background:var(--marfim)}
.blush{background:linear-gradient(180deg,#FBF4F5,var(--blush) 54%,var(--rosa-cha))}
.escuro{color:var(--creme-2);
  background:
    radial-gradient(ellipse 62% 52% at 82% 8%,rgba(181,128,114,.3),transparent 66%),
    radial-gradient(ellipse 52% 46% at 4% 94%,rgba(238,221,226,.14),transparent 66%),
    linear-gradient(168deg,#4A3039 0%,#3C2630 54%,#2E1C25 100%)}
.escuro h1,.escuro h2,.escuro h3{color:var(--creme-texto)}

.rotulo{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--rose-texto);margin:0 0 22px;display:inline-flex;align-items:center;gap:12px}
.rotulo::before{content:"";width:26px;height:1px;flex-shrink:0;background:linear-gradient(90deg,transparent,var(--rose-gold))}
.escuro .rotulo{color:var(--rose-gold-claro)}
.escuro .rotulo::before{background:linear-gradient(90deg,transparent,var(--rose-gold-claro))}
.centro .rotulo{display:flex;justify-content:center}
h2{font-size:clamp(33px,4.8vw,58px);letter-spacing:-.01em}
h3{font-size:clamp(20px,2.1vw,25px)}
.sub{font-size:clamp(16.5px,1.5vw,18.5px);max-width:60ch;margin-top:20px}
.centro{text-align:center}
.centro .sub{margin-inline:auto}
.nota{font-size:12.5px;line-height:1.6;color:var(--tinta-3);margin:14px 0 0}
.escuro .nota{color:var(--creme-2);opacity:.7}

/* enfase: italico com o brilho percorrendo */
em{font-style:italic;font-weight:600;
  background:var(--em-claro);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brilho 9s linear infinite}
.escuro em{background-image:var(--em-escuro)}
@keyframes brilho{to{background-position:260% 50%}}

/* ---------- botoes ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 32px;border-radius:100px;text-decoration:none;cursor:pointer;border:0;overflow:hidden;
  font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#FFF9F6;
  background:linear-gradient(135deg,#6B4553 0%,var(--ameixa) 46%,var(--ameixa-escura) 100%);
  box-shadow:0 16px 34px -16px rgba(60,38,48,.72),inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(181,128,114,.3);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,236,230,.4) 50%,transparent 62%);
  transform:translateX(-120%);animation:varredura 6s var(--ease-io) infinite;animation-delay:-1.6s}
@keyframes varredura{0%,76%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn:hover{transform:translateY(-3px);box-shadow:0 24px 46px -18px rgba(60,38,48,.8),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(181,128,114,.56)}
.btn:active{transform:translateY(0) scale(.985)}
.btn .seta{transition:transform .45s var(--ease-out)}
.btn:hover .seta{transform:translateX(4px)}
.btn-fantasma{background:transparent;color:var(--ameixa);box-shadow:inset 0 0 0 1px rgba(181,128,114,.6)}
.btn-fantasma::after{display:none}
.btn-fantasma:hover{box-shadow:inset 0 0 0 1px var(--rose-gold);background:rgba(181,128,114,.08)}
.escuro .btn-fantasma{color:var(--creme-texto);box-shadow:inset 0 0 0 1px rgba(224,188,176,.46)}
.escuro .btn-fantasma:hover{box-shadow:inset 0 0 0 1px var(--rose-gold-claro);background:rgba(224,188,176,.1)}
.micro{font-size:13px;color:var(--tinta-3);margin-top:16px}
.escuro .micro{color:var(--creme-2);opacity:.8}

/* ---------- selo de turma em andamento ---------- */
.andamento{display:inline-flex;align-items:center;gap:10px;padding:7px 17px 7px 13px;border-radius:100px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-texto);
  background:linear-gradient(135deg,rgba(238,221,226,.72),rgba(255,255,255,.85));
  box-shadow:inset 0 0 0 1px rgba(181,128,114,.46),0 10px 22px -18px rgba(60,38,48,.8)}
.andamento .ponto{position:relative;width:8px;height:8px;border-radius:50%;background:var(--rose-texto);flex-shrink:0}
.andamento .ponto::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--rose-texto);
  animation:pulso 2.6s var(--ease-io) infinite}
@keyframes pulso{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.escuro .andamento,.andamento.on-dark{color:var(--rose-gold-claro);background:rgba(238,221,226,.1);
  box-shadow:inset 0 0 0 1px rgba(224,188,176,.42)}
.escuro .andamento .ponto,.andamento.on-dark .ponto{background:var(--rose-gold-claro)}
.escuro .andamento .ponto::after,.andamento.on-dark .ponto::after{border-color:var(--rose-gold-claro)}

/* ---------- fundo fixo: bruma que deriva ---------- */
.ambiente{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--marfim)}
.ambiente i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;animation:deriva 90s ease-in-out infinite alternate}
.ambiente i:nth-child(1){width:54vmax;height:54vmax;left:-16vmax;top:-20vmax;background:#F2DCE2;animation-delay:-18s}
.ambiente i:nth-child(2){width:44vmax;height:44vmax;right:-16vmax;top:26vh;background:#F6E2D8;opacity:.44;animation-delay:-50s}
.ambiente i:nth-child(3){width:38vmax;height:38vmax;left:28vw;bottom:-22vmax;background:#EFE0E4;opacity:.36}
@keyframes deriva{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}100%{transform:translate(-4vw,-3vh) scale(.94)}}

/* ---------- menu ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease-out),border-color .5s,backdrop-filter .5s}
/* fallback solido primeiro; o translucido so entra onde o blur existe */
.nav.rolou{background:rgba(250,247,242,.97);border-color:rgba(60,38,48,.09)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav.rolou{background:rgba(250,247,242,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.marca{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--tinta);white-space:nowrap}
.marca b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.3em;text-transform:uppercase;line-height:1}
.marca small{font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-3)}
.nav-links{display:flex;gap:28px}
.nav-links a{position:relative;font-size:13.5px;font-weight:500;color:var(--tinta-2);text-decoration:none;padding-block:6px;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rose-gold);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.nav-links a:hover,.nav-links a.ativo{color:var(--tinta)}
.nav-links a:hover::after,.nav-links a.ativo::after{transform:scaleX(1)}
.nav .btn{min-height:44px;padding:0 22px;font-size:10.5px}

/* botao do menu no celular */
.menu-btn{display:none;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;
  border:0;border-radius:14px;background:transparent;cursor:pointer;color:var(--tinta);
  box-shadow:inset 0 0 0 1px rgba(181,128,114,.5)}
.menu-btn i{position:relative;display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;transition:background-color .2s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease-out)}
.menu-btn i::before{top:-6px}
.menu-btn i::after{top:6px}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- topo ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding:120px 0 72px;overflow:hidden;
  background:
    radial-gradient(ellipse 48% 44% at 76% 42%,rgba(255,244,238,.95),rgba(244,228,232,.5) 44%,transparent 68%),
    radial-gradient(ellipse 52% 60% at 4% 92%,rgba(238,221,226,.6),transparent 64%),
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,255,255,.92),transparent 62%),
    linear-gradient(170deg,#FDFAF6 0%,#F8EFEC 52%,#F2E2E2 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;
  background:linear-gradient(transparent,rgba(250,247,242,.94))}
.hero-grade{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(26px,5vw,64px);align-items:center}
.hero-cab{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:24px}
.kicker{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-3)}
.hero h1{font-size:clamp(37px,5.2vw,68px);letter-spacing:-.018em;line-height:1.2;margin-bottom:4px}
.hero h1 .w{display:inline-block}
.hero .sub{max-width:48ch;margin-top:22px}
.acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.selo-tres{display:flex;gap:clamp(18px,3vw,30px);margin-top:32px;flex-wrap:wrap}
.selo-tres div{display:flex;flex-direction:column;gap:2px}
.selo-tres b{font-family:var(--display);font-weight:600;font-size:30px;line-height:1;color:var(--tinta)}
.selo-tres span{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}

/* entrada do topo, disparada pela classe .pronto no body */
.hero h1 .w,.hero .sub,.hero .acoes,.hero .micro,.hero .selo-tres,.hero .hero-cab{opacity:0;transform:translateY(18px)}
.pronto .hero h1 .w,.pronto .hero .sub,.pronto .hero .acoes,.pronto .hero .micro,.pronto .hero .selo-tres,.pronto .hero .hero-cab{
  animation:sobe .7s var(--ease-out) forwards;animation-delay:var(--a,0ms)}
@keyframes sobe{to{opacity:1;transform:none}}

/* ---------- cena do topo: orbita + foto em arco ---------- */
.cena{position:relative;width:min(450px,100%);aspect-ratio:4/5;margin-inline:auto;perspective:1100px}
/* o halo fica centrado na foto: a translacao mora numa propriedade a parte
   para a animacao poder girar sem perder a centralizacao */
.orbita{position:absolute;left:50%;top:64%;width:188%;aspect-ratio:1;translate:-50% -50%;
  transform-style:preserve-3d;pointer-events:none;animation:girar 72s linear infinite}
@keyframes girar{from{transform:rotateX(74deg) rotateZ(0deg)}to{transform:rotateX(74deg) rotateZ(360deg)}}
.orbita .anel{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(181,128,114,.42);transform-style:preserve-3d}
.orbita .anel:nth-child(2){transform:translateZ(40px) scale(.86);border-color:rgba(138,83,70,.3)}
.orbita .anel:nth-child(3){transform:translateZ(80px) scale(.72);border-color:rgba(181,128,114,.48)}
.orbita .anel:nth-child(4){transform:translateZ(120px) scale(.57);border-color:rgba(138,83,70,.34)}
.orbita .anel:nth-child(5){transform:translateZ(160px) scale(.41);border-color:rgba(224,188,176,.7);
  box-shadow:0 0 28px -10px rgba(224,188,176,.9)}
.orbita .conta{position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#FFFFFF,#F6E3DC 46%,#C9937F);
  box-shadow:0 0 12px 4px rgba(224,188,176,.7)}

/* a foto fica acima da orbita e reage ao mouse */
.palco{position:absolute;inset:0;transform-style:preserve-3d;z-index:2}
.arco{position:absolute;inset:0;margin:0;border-radius:999px 999px 26px 26px;overflow:hidden;background:var(--rosa-cha);
  transform-style:preserve-3d;transition:transform .6s var(--ease-out);
  box-shadow:0 44px 86px -44px rgba(60,38,48,.5),0 0 0 1px rgba(255,255,255,.8),0 0 64px -18px rgba(181,128,114,.5)}
.arco img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.arco::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 66%,rgba(60,38,48,.16) 100%),linear-gradient(118deg,rgba(255,255,255,.18),transparent 42%)}
.moldura{position:absolute;inset:0;border-radius:999px 999px 26px 26px;border:1px solid rgba(181,128,114,.5);
  transform:translate3d(18px,18px,-60px);pointer-events:none}
.moldura.m2{border-color:rgba(138,83,70,.26);transform:translate3d(-16px,-14px,-110px)}
.cena-entra{opacity:0;transform:scale(.96)}
.pronto .cena-entra{animation:sobe 1.1s var(--ease-out) .15s forwards}

/* ---------- entradas e divisorias ---------- */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);transition-delay:var(--d,0ms)}
.rv.in.feito{transition-delay:0ms!important}
.risco{display:block;width:min(520px,80%);height:24px;margin:0 auto;color:var(--rose-gold);overflow:visible}
.escuro .risco{color:var(--rose-gold-claro)}
.risco path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.risco .flor{opacity:var(--p,0);transform-origin:center;transform-box:fill-box}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .hero h1 .w,.hero .sub,.hero .acoes,.hero .micro,.hero .selo-tres,.hero .hero-cab,.cena-entra{opacity:1;transform:none}
}

/* ---------- celular e tablet ---------- */
@media (max-width:980px){
  .hero-grade{grid-template-columns:1fr;gap:30px}
  .hero{padding:94px 0 60px;min-height:0}
  .hero-texto{order:2}
  .hero-visual{order:1}
  .cena{width:min(300px,68vw)}
  .hero-cab{margin-bottom:18px}
  .hero .sub{margin-top:18px}
  .acoes{margin-top:24px}
  .selo-tres{margin-top:26px}
  .menu-btn{display:flex}
  /* painel do menu: cobre a tela, fecha no Escape e devolve o foco ao botao */
  .nav-links{position:fixed;inset:74px 0 0;z-index:39;flex-direction:column;gap:0;
    padding:10px clamp(16px,5vw,32px) 40px;overflow-y:auto;
    background:var(--marfim);border-top:1px solid rgba(60,38,48,.08);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility .35s}
  .nav-links[data-aberto="true"]{opacity:1;visibility:visible;transform:none}
  .nav-links a{font-family:var(--display);font-size:27px;font-weight:500;color:var(--tinta);
    padding:18px 0;border-bottom:1px solid rgba(181,128,114,.26)}
  .nav-links a::after{display:none}
  .nav .btn{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  /* retrato e titulo mais contidos para o primeiro botao chegar na dobra;
     a manchete nova e mais longa, entao o retrato encolheu de novo */
  .cena{width:min(224px,55vw)}
  .hero h1{font-size:clamp(31px,8.1vw,42px)}
  .nav .wrap{height:66px}
  .nav-links{inset:66px 0 0}
  .marca b{font-size:16px;letter-spacing:.22em}
  .acoes{flex-direction:column;align-items:stretch}
  .acoes .btn{width:100%}
  .selo-tres{gap:16px}
  .selo-tres b{font-size:26px}
}
@media (max-width:360px){
  .wrap{padding-inline:14px}
  .selo-tres span{font-size:10px;letter-spacing:.08em}
  .btn{font-size:11px;letter-spacing:.12em;padding:0 22px}
}