/* Hero E aprovado: "Seguimos juntas, um passo de cada vez." */
.hero { --casa: clamp(150px, 14.6vw, 240px); --vao: clamp(10px, 1.3vw, 22px); --degrau: clamp(44px, 8.6vh, 92px);
  position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; }
.hero .fundo { position: absolute; inset: -12%; z-index: -3;
  background:
    radial-gradient(42% 46% at 94% 4%, var(--ceu), transparent 72%),
    radial-gradient(40% 42% at 70% 26%, var(--lilas-ceu), transparent 72%),
    radial-gradient(44% 46% at 44% 54%, var(--pessego), transparent 72%),
    radial-gradient(40% 44% at 14% 30%, var(--luz), transparent 72%),
    radial-gradient(50% 50% at 6% 100%, oklch(0.88 0.045 62), transparent 70%),
    linear-gradient(40deg in oklch, var(--parede), oklch(0.91 0.035 300));
  animation: respira 34s ease-in-out infinite alternate; }
@keyframes respira { to { transform: translate3d(2%, -2%, 0) scale(1.05); } }
.hero .grao { z-index: 4; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.2vw, 1.6rem) var(--margem); }
.marca { text-decoration: none; font-family: var(--f-titulo); font-size: 1.2rem; }
.topo nav { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.9rem); font-size: .92rem; font-weight: 500; }
.topo nav a { text-decoration: none; }
.topo nav a:not(.pilula):hover { text-decoration: underline; text-underline-offset: .3em; }
.pilula { border: 1.5px solid var(--tinta); border-radius: 999px; padding: .5rem 1rem; white-space: nowrap; }
.pilula:hover { background: var(--tinta); color: var(--papel); }

.hero-texto { align-self: start; padding: clamp(.6rem, 4.5vh, 3rem) var(--margem) 2rem; position: relative; z-index: 2; }
.hero h1 { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.3rem, min(5.3vw, 10vh), 5.2rem); line-height: 1.03; letter-spacing: -.022em; margin-top: clamp(.8rem, 2vh, 1.3rem); }
.hero h1 .l { display: block; white-space: nowrap; }
.hero h1 .p { display: inline-block; opacity: 0; transform: translateY(.5em); animation: pisa .7s cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay: calc(.15s + var(--k) * .13s); }
@keyframes pisa { to { opacity: 1; transform: translateY(calc(var(--s, 0) * -.085em)); } }
.hero h1 .sobe { padding-top: .32em; }
.hero h1 .m { white-space: nowrap; }
.de-quem { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--tinta-2); margin-top: clamp(.9rem, 2.2vh, 1.4rem); line-height: 1.35; opacity: 0; animation: entra .8s 1.25s ease-out forwards; }
.de-quem img { width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px var(--ouro); }
.de-quem b { color: var(--tinta); display: block; font-weight: 600; }
.hero .apoio { line-height: 1.6; margin-top: clamp(1rem, 2.6vh, 1.6rem); max-width: min(27rem, 26vw); color: #3d2c1f; opacity: 0; animation: entra .8s 1.4s ease-out forwards; }
.hero .acoes { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; margin-top: clamp(1.1rem, 2.8vh, 1.8rem); opacity: 0; animation: entra .8s 1.55s ease-out forwards; }
.prova { font-size: .88rem; color: var(--tinta-2); } .prova b { color: var(--tinta); font-family: var(--f-titulo); font-weight: 400; font-size: 1.35rem; margin-right: .2rem; }
.hero .registro { font-size: .78rem; line-height: 1.5; max-width: 17rem; color: var(--tinta-2); margin-top: clamp(.8rem, 2vh, 1.3rem); opacity: 0; animation: entra .8s 1.7s ease-out forwards; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.passos { position: absolute; z-index: 1; right: var(--margem); bottom: clamp(1.6rem, 5vh, 3.2rem); width: calc(var(--casa) * 4 + var(--vao) * 3); height: calc(var(--casa) * 1.42 + var(--degrau) * 3 + 2.6rem); }
.passo { position: absolute; width: var(--casa); margin: 0; left: calc(var(--n) * (var(--casa) + var(--vao))); bottom: calc(var(--n) * var(--degrau));
  opacity: 0; transform: translateY(46px); animation: sobe .9s var(--pisa) forwards; animation-delay: calc(.7s + var(--n) * .32s); }
@keyframes sobe { to { opacity: 1; transform: none; } }
.passo .moldura { position: relative; aspect-ratio: 1 / 1.42; clip-path: var(--casinha); background: linear-gradient(160deg, var(--ouro-claro), #c9a362); }
.passo .moldura .foto { position: absolute; inset: 6px; clip-path: var(--casinha); background: #cbb center / cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.passo:hover .foto { transform: scale(1.05); }
.passo .moldura::after { content: ""; position: absolute; inset: 6px; clip-path: var(--casinha); pointer-events: none;
  background: linear-gradient(200deg, rgba(255,236,200,.34), rgba(255,236,200,0) 45%, rgba(60,30,10,.16)); mix-blend-mode: soft-light; }
.f1 { filter: saturate(.82) brightness(1.06); } .f2 { filter: brightness(1.1) saturate(1.05); } .f4 { filter: sepia(.14) saturate(1.02) brightness(1.04); }
.passo .sombra { filter: drop-shadow(0 16px 20px rgba(80,50,20,.26)); }
.passo .prateleira { margin: 7px -8px 0; }
.passo figcaption { display: flex; align-items: baseline; gap: .5rem; font-size: .78rem; line-height: 1.25; color: var(--tinta-2); margin-top: .55rem; font-weight: 500; }
.passo figcaption b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.5rem; color: var(--tinta); line-height: 1; }
.hero .balao { position: absolute; z-index: 1; right: calc(var(--margem) + var(--casa) * 1.42); top: clamp(5.5rem, 15vh, 9rem); width: clamp(2.6rem, 4.6vw, 4.4rem); opacity: 0;
  filter: drop-shadow(0 12px 12px rgba(80,50,20,.18)); animation: entra 1.2s 2.3s ease-out forwards, flutua 13s 3.5s ease-in-out infinite alternate; }
@keyframes flutua { from { translate: 0 0; rotate: -2deg; } to { translate: 14px -26px; rotate: 3deg; } }
.estreito { display: none; }

@media (max-width: 1180px) { .topo nav a:not(.pilula):nth-child(-n+2) { display: none; } }
@media (max-width: 900px) {
  .hero { --casa: 20.4vw; --vao: 2.2vw; --degrau: 20px; grid-template-rows: auto auto 1fr; }
  .topo nav a:not(.pilula) { display: none; }
  .pilula { font-size: .84rem; padding: .45rem .85rem; }
  .hero-texto { padding-top: .5rem; padding-bottom: 0; }
  .hero .olho { font-size: .68rem; }
  .hero h1 { font-size: clamp(2rem, 9.9vw, 3.1rem); }
  .hero h1 .l { white-space: normal; } .hero h1 .m { display: block; line-height: 1.16; } .hero h1 .sobe { padding-top: .1em; }
  .hero h1 .m + .m .p { --s: 1; } .hero h1 .m:first-child .p { --s: 0; }
  .largo { display: none; } .estreito { display: inline; }
  .hero .apoio { font-size: .96rem; line-height: 1.5; max-width: none; }
  .hero .botao { width: 100%; justify-content: center; }
  .hero .registro { font-size: .7rem; max-width: none; }
  .hero .balao { right: 1.5rem; top: 9.3rem; width: 2.2rem; }
  .passos { position: relative; right: auto; bottom: auto; margin: .6rem var(--margem) .9rem; align-self: end; height: calc(var(--casa) * 1.42 + var(--degrau) * 3 + 1.9rem); }
  .passo .moldura .foto, .passo .moldura::after { inset: 3px; }
  .passo .prateleira { height: 3px; margin: 5px -4px 0; }
  .passo figcaption { font-size: 0; gap: 0; margin-top: .3rem; } .passo figcaption b { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .fundo { animation: none; }
  .hero h1 .p, .de-quem, .hero .apoio, .hero .acoes, .hero .registro, .passo { animation: none; opacity: 1; transform: none; }
  .hero h1 .p { transform: translateY(calc(var(--s, 0) * -.085em)); }
  .hero .balao { animation: none; opacity: 1; }
}

/* tablets em pé: sem a altura mínima de uma tela, para não abrir um vão entre o texto e as casinhas */
@media (min-width: 600px) and (max-width: 900px) { .hero { min-height: 0; --casa: 19vw; --degrau: 28px; } .passos { margin-top: 2.4rem; } .passo figcaption { font-size: .7rem; gap: .4rem; } .passo figcaption b { font-size: 1.2rem; } }