/* Hero · a ficha nº 1 (hipótese E aprovada) */
.abertura{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;overflow-x:clip}
.topo{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px var(--margem) 14px}
.marca{font-family:var(--titulo);font-size:1.35rem;color:var(--vinho);letter-spacing:.005em}
.menu{display:flex;gap:26px;font-family:var(--maquina);font-size:13px;color:var(--tinta-suave)}
.menu a:hover{color:var(--vinho);text-decoration:underline;text-underline-offset:5px}

.hero{flex:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"titulo palco" "resto palco";column-gap:clamp(20px,4vw,70px);align-content:center;padding:0 var(--margem) clamp(14px,2.6vh,30px)}
.bloco-titulo{grid-area:titulo;align-self:end}
.bloco-resto{grid-area:resto;align-self:start}
.sobrelinha{font-family:var(--maquina);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--vinho-2);margin-bottom:clamp(14px,2.6vh,26px);opacity:0;animation:aparece .8s .1s forwards}
h1{font-family:var(--titulo);font-weight:400;color:var(--vinho);font-size:clamp(3rem, 7.3vw, 7.2rem);line-height:.96;letter-spacing:-.015em}
h1 .l{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
h1 .l > span{display:inline-block;transform:translateY(108%);animation:sobe 1.1s cubic-bezier(.2,.8,.2,1) forwards}
h1 .l:nth-child(2) > span{animation-delay:.13s}
h1 .l:nth-child(3) > span{animation-delay:.26s}
h1 em{font-family:var(--texto);font-style:italic;font-size:.9em;letter-spacing:-.02em}
.apoio{margin-top:clamp(18px,3.2vh,30px);max-width:33em;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.65;opacity:0;animation:aparece .9s .8s forwards}
.acoes{margin-top:clamp(20px,3.4vh,32px);display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;opacity:0;animation:aparece .9s .95s forwards}
.dica{font-family:var(--maquina);font-size:12.5px;line-height:1.45;color:var(--tinta-suave);max-width:23em}
.numeros{margin-top:clamp(20px,3.6vh,36px);display:grid;grid-template-columns:auto auto 1fr;gap:0;max-width:640px;border-top:1.5px solid var(--vinho);opacity:0;animation:aparece .9s 1.1s forwards}
.numeros div{padding:12px 22px 0 0}
.numeros div + div{padding-left:22px;border-left:1px solid var(--pauta)}
.numeros dt{font-family:var(--titulo);font-size:2.1rem;line-height:1;color:var(--vinho)}
.numeros dd{margin-top:5px;font-family:var(--maquina);font-size:12px;line-height:1.4;color:var(--tinta-suave)}
.numeros dd i{font-style:normal;color:var(--tinta);white-space:nowrap}

/* palco: ela atrás, a ficha na frente */
/* a ficha fica no fluxo, abaixo do pescoço dela: por mais que o texto cresça, ela desce e nunca sobe para o rosto */
.palco{grid-area:palco;position:relative;justify-self:center;align-self:center;width:min(100%, 520px);container-type:inline-size}
.halo{position:absolute;inset:-6% -14% 10% -14%;border-radius:50%;filter:blur(54px);z-index:0;opacity:.8;
  background:
    radial-gradient(42% 40% at 34% 34% in oklch, var(--lilas) 0%, transparent 72%),
    radial-gradient(40% 38% at 70% 42% in oklch, var(--rosa) 0%, transparent 72%),
    radial-gradient(44% 40% at 54% 74% in oklch, var(--bege) 0%, transparent 72%),
    radial-gradient(60% 60% at 50% 50% in oklch, var(--lilas-claro) 0%, transparent 74%);
  background-size:140% 140%,150% 150%,150% 150%,100% 100%;animation:halo 30s ease-in-out infinite alternate}
/* a parede dela: ripado à esquerda, lilás à direita, com o gradiente respirando por dentro */
.parede{position:absolute;z-index:0;left:9%;right:5%;top:20px;top:4cqw;height:560px;height:110cqw;border-radius:14px;overflow:hidden;opacity:0;animation:aparece 1.2s .15s forwards;box-shadow:0 40px 70px -46px rgba(71,16,22,.55);
  background:
    radial-gradient(70% 60% at 78% 18% in oklch, #dcc6d0 0%, transparent 70%),
    radial-gradient(70% 60% at 20% 80% in oklch, #d9c2a6 0%, transparent 72%),
    radial-gradient(60% 50% at 60% 60% in oklch, #c7a9b4 0%, transparent 72%),
    linear-gradient(140deg in oklch, #cdb5ae, #c5a8b3);
  background-size:160% 160%,160% 160%,170% 170%,100% 100%;animation:aparece 1.2s .15s forwards, halo 34s ease-in-out infinite alternate}
.parede::before{content:"";position:absolute;inset:0 56% 0 0;background:repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, rgba(255,255,255,.05) 2px 19px, rgba(71,16,22,.16) 19px 22px);-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.parede::after{content:"";position:absolute;left:38%;right:0;top:27%;height:9px;background:linear-gradient(180deg,#fffaf3,#e9ddd2);box-shadow:0 10px 16px -8px rgba(71,16,22,.35)}
.ela{position:absolute;z-index:1;left:52%;top:34px;top:7cqw;width:86%;transform:translateX(-50%);opacity:0;animation:chega 1.4s .3s cubic-bezier(.2,.8,.2,1) forwards;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 80%);mask-image:linear-gradient(180deg,#000 62%,transparent 80%)}
.ela img{display:block;width:100%;height:auto}
@keyframes chega{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}

.folha{position:relative;z-index:2;margin:416px 2% 0 -6%;margin-top:80cqw;background:var(--folha);padding:22px 26px 20px 46px;transform:rotate(-2.2deg) translateY(30px);opacity:0;animation:pousa 1.1s .9s cubic-bezier(.2,.8,.2,1) forwards;box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 34px 50px -34px rgba(71,16,22,.55), 0 2px 6px rgba(71,16,22,.08);
  background-image:linear-gradient(90deg, transparent 33px, rgba(180,60,70,.28) 33px, rgba(180,60,70,.28) 34px, transparent 34px)}
@keyframes pousa{to{opacity:1;transform:rotate(-2.2deg)}}
.folha-baixo{position:absolute;z-index:1;left:-3%;right:-1%;bottom:-10px;height:46%;background:#f8efe2;transform:rotate(1.6deg);box-shadow:0 26px 40px -30px rgba(71,16,22,.5);opacity:0;animation:aparece 1s .8s forwards}
.hero .clipe{position:absolute;z-index:3;right:9%;top:-26px;opacity:0;animation:aparece .6s 1.7s forwards}
.hero .carimbo{position:absolute;right:26px;top:54px;transform:rotate(7deg) scale(1.6);opacity:0}
.hero .carimbo.bate{animation:bate .35s cubic-bezier(.3,1.4,.5,1) forwards}
.folha::before{content:"";position:absolute;left:12px;top:22px;bottom:22px;width:9px;background:radial-gradient(circle at 50% 4.5px, var(--papel) 4px, transparent 4.5px) 0 0/9px 33.33% repeat-y;filter:drop-shadow(0 1px 0 rgba(71,16,22,.18))}
.cabecalho{display:flex;justify-content:flex-start;gap:18px;font-family:var(--maquina);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);padding-bottom:9px;border-bottom:1.5px solid var(--vinho)}
.cabecalho b{color:var(--vinho)}
.campo{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:baseline;padding:11px 0 6px;border-bottom:1px solid var(--pauta);min-height:38px}
.campo .lb{font-family:var(--maquina);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.campo .v{font-family:var(--maquina);font-size:14.5px;line-height:1.3;color:var(--tinta)}
.campo:has(.v[data-t^="Dra"]){min-height:58px}
.campo textarea{font-family:var(--maquina);font-size:14.5px;line-height:1.3;color:var(--tinta);background:color-mix(in oklch, var(--bege) 26%, transparent);border:0;border-radius:2px;outline:0;resize:none;width:100%;padding:4px 6px;margin:-4px -6px;caret-color:var(--vinho);transition:background .3s}
.campo textarea::placeholder{color:var(--tinta-suave);opacity:1}
.campo textarea:focus{background:color-mix(in oklch, var(--bege) 48%, transparent)}
.campo .lb small{display:block;text-transform:none;letter-spacing:0;font-size:10px;color:var(--vinho-2);margin-top:2px}
.campo .v.cursor::after{content:"";display:inline-block;width:8px;height:1.05em;margin-left:2px;background:var(--vinho);vertical-align:-3px;animation:pisca .8s steps(2) infinite}
.conferir{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:12px;font-family:var(--maquina);font-size:13px}
.conferir span{display:inline-flex;align-items:center;gap:7px;opacity:0;transition:opacity .4s}
.conferir span.ok{opacity:1}
.conferir i{width:13px;height:13px;border:1.2px solid var(--vinho);display:grid;place-items:center;font-style:normal;font-size:12px;line-height:1;color:var(--vinho)}
.conferir .nao{position:relative;color:var(--tinta-suave)}
.conferir .nao::after{content:"";position:absolute;left:18px;right:-3px;top:52%;height:1.6px;background:var(--vinho);transform:scaleX(0);transform-origin:left;transition:transform .5s .3s}
.conferir .nao.ok::after{transform:scaleX(1) rotate(-1.5deg)}

.base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding:0 var(--margem) 20px;font-family:var(--maquina);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}

@media (max-width: 900px){
  .menu{display:none}
  .hero{grid-template-columns:1fr;grid-template-areas:"titulo" "palco" "resto";row-gap:22px}
  .palco{width:min(88vw, 380px)}
  .ela{width:92%;top:10px;top:3cqw}
  .parede{left:4%;right:4%;top:0;height:300px;height:84cqw}
  .cabecalho span{display:none}
  .numeros{grid-template-columns:1fr 1fr}
  .numeros div:last-child{grid-column:1 / -1;padding-left:0;border-left:0;border-top:1px solid var(--pauta);margin-top:12px}
  .campo textarea{font-size:16px}
  .hero .clipe{top:-20px;width:20px;height:50px}
  .hero .carimbo{right:44px;top:40px;font-size:8.5px;padding:4px 7px}
  .hero .carimbo b{font-size:11px}
  .folha{margin:262px -2% 0;margin-top:74cqw;padding:16px 16px 14px 36px;background-image:linear-gradient(90deg, transparent 26px, rgba(180,60,70,.28) 26px, rgba(180,60,70,.28) 27px, transparent 27px)}
  .folha::before{left:8px}
  .campo{grid-template-columns:86px 1fr;gap:8px;padding:8px 0 5px;min-height:32px}
  .campo:has(.v[data-t^="Dra"]){min-height:64px}
  .campo .lb{font-size:9px}
  .campo .v{font-size:12.5px}
  .conferir{font-size:11.5px;gap:5px 12px}
  .hero .botao{width:100%;justify-content:center}
  .base{font-size:9.5px}
}