/* Hero E · Seis pedras, como foi aprovado. Tokens e componentes comuns estão em base.css. */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:var(--creme)}
/* a seção seguinte sobe 2,4 rem por cima do hero: este respiro mantém a linha de registro à vista */
.hero{padding-bottom:2.4rem}
.malha{position:absolute;inset:-12%;z-index:-2}
.malha i{position:absolute;border-radius:50%;filter:blur(84px);will-change:transform}
.m1{left:-6%;top:-12%;width:54%;height:66%;background:radial-gradient(closest-side in oklch,#fffbf4,transparent);animation:vai 30s ease-in-out infinite alternate}
.m2{left:-8%;top:52%;width:50%;height:60%;background:radial-gradient(closest-side in oklch,var(--mel-1),transparent);animation:vem 36s ease-in-out infinite alternate}
.m3{left:52%;top:-14%;width:52%;height:70%;background:radial-gradient(closest-side in oklch,var(--mel-2),transparent);opacity:.8;animation:vai 34s ease-in-out infinite alternate-reverse}
.m4{left:54%;top:36%;width:50%;height:74%;background:radial-gradient(closest-side in oklch,var(--ambar),transparent);animation:vem 27s ease-in-out infinite alternate-reverse}
.m5{left:28%;top:22%;width:32%;height:56%;background:radial-gradient(closest-side in oklch,#fbe9d6,transparent);animation:vai 40s ease-in-out infinite alternate}
@keyframes vai{to{transform:translate3d(4%,4%,0) scale(1.07)}}
@keyframes vem{to{transform:translate3d(-4%,-3%,0) scale(1.05)}}
.grao{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;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='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

.nav{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:1.5rem var(--margem)}
.marca{font-family:var(--display);font-size:1.25rem;text-decoration:none;display:flex;align-items:baseline;gap:.6rem}
.marca small{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--madeira-texto)}
.nav nav{display:flex;align-items:center;gap:1.8rem;font-size:.9rem;font-weight:500}
.nav nav a{text-decoration:none;color:var(--tinta-2)}
.nav nav a:hover{color:var(--tinta)}
.nav .zap{color:var(--tinta);border:1px solid rgba(42,28,22,.22);padding:.5rem 1rem;border-radius:99px;background:rgba(255,250,242,.55)}

.palco{position:relative;z-index:2;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) var(--foto-l);grid-template-rows:1fr auto;column-gap:clamp(13rem,17.5vw,17rem);padding:clamp(5.6rem,12vh,7rem) var(--margem) 0}
.texto{grid-column:1;grid-row:1;align-self:center;padding-bottom:3vh}
.hero .olho{margin-bottom:clamp(.9rem,2.4vh,1.4rem);animation:surge .9s .2s both}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.7rem,min(6.35vw,14.5vh),6.8rem);line-height:.96;letter-spacing:-.022em;white-space:nowrap}
h1 span{display:block;animation:surge 1s both}
h1 span:nth-child(1){animation-delay:.35s}h1 span:nth-child(2){animation-delay:.5s}
.apoio{margin-top:clamp(1.1rem,2.8vh,1.7rem);font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.55;max-width:40ch;color:color-mix(in oklab,var(--tinta) 86%,white);animation:surge .9s .75s both}
.prova{margin-top:clamp(1.3rem,3.4vh,2.1rem);padding-top:.9rem;border-top:1px solid rgba(42,28,22,.16);display:flex;gap:1.1rem;align-items:baseline;max-width:34rem;animation:surge .9s 1.05s both}
.prova b{flex:none;font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1;color:var(--madeira)}
.prova span{font-size:.86rem;line-height:1.45;color:var(--tinta-2)}
.prova strong{display:block;font-weight:700;color:var(--tinta)}
.acoes{margin-top:clamp(1.2rem,3vh,1.9rem);display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;animation:surge .9s .9s both}

/* o ripado da sala dela sobe por trás da foto e sai pela borda da tela; embaixo, a fita de LED */
.ripado{position:absolute;z-index:-1;left:24%;right:calc(-1 * var(--margem) - 2px);top:-22%;bottom:11%;border-radius:0 0 0 2.6rem;overflow:hidden;animation:acende 1.8s .5s both;
  background:repeating-linear-gradient(90deg,#c08a5e 0 19px,#96623c 19px 21px,#cb9a6f 21px 40px,#8a5935 40px 43px,#b98356 43px 60px,#9a6640 60px 62px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 34%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 34%);mask-composite:intersect}
.ripado::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg in oklab,rgba(60,32,14,.5) 0%,rgba(60,32,14,.08) 55%,rgba(255,214,150,.75) 96%,#ffe9bd 100%)}
.ripado::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:#fff3d2;box-shadow:0 0 26px 10px rgba(255,210,140,.95),0 0 80px 30px rgba(247,190,110,.6);animation:led 7s ease-in-out infinite alternate}
@keyframes led{to{opacity:.72}}
@keyframes acende{from{opacity:0}}
/* a foto dela atendendo, com a coluna de pedras montada na borda */
.cena{grid-column:2;grid-row:1;align-self:center;position:relative;width:var(--foto-l);animation:surge 1.2s .3s both}
.cena::before{content:"";position:absolute;inset:38% -30% -10% -30%;z-index:-2;border-radius:50%;background:radial-gradient(closest-side in oklch,rgba(247,207,145,.95),rgba(247,207,145,0));filter:blur(34px)}
.cena img{display:block;width:100%;height:auto;border-radius:2.4rem;box-shadow:0 44px 70px -32px rgba(74,40,16,.75),0 0 0 1px rgba(255,255,255,.35)}
.coluna{position:absolute;left:0;top:7.5%;bottom:3%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between}
.dela{position:absolute;right:calc(100% + 3.6rem);top:-.4rem;width:14rem;text-align:right;font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--madeira-texto);line-height:1.5;animation:surge .9s 1s both}
.coluna li{position:relative;width:0;height:clamp(3.4rem,8.8vh,5rem);cursor:pointer;animation:pousa 1s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(1.15s + var(--i) * .15s)}
@keyframes pousa{0%{opacity:0;transform:translateY(-46px) scale(.9)}60%{opacity:1}100%{opacity:1;transform:none}}
.coluna svg{position:absolute;left:0;top:50%;width:var(--w,6rem);height:auto;overflow:visible;transform:translate(calc(-50% + var(--x,0px)),-50%) rotate(var(--r,0deg));transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.coluna .calor{animation:calor var(--t,6s) ease-in-out infinite alternate}
@keyframes calor{from{opacity:.35}to{opacity:1}}
.coluna p{position:absolute;right:4.1rem;top:50%;transform:translateY(-50%);width:12.2rem;display:flex;justify-content:flex-end;align-items:center;gap:.75rem;text-align:right;font-size:.9rem;line-height:1.3;font-weight:500;color:var(--tinta-2);transition:color .4s}
.coluna p::after{content:"";flex:none;width:1.3rem;height:1px;background:currentColor;opacity:.5;transition:width .4s,opacity .4s}
.coluna b{flex:none;order:2;font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1;color:var(--madeira);transition:color .4s}
.coluna p::after{order:3}
.coluna li.aqui p{color:var(--tinta)}
.coluna li.aqui b{color:var(--pink)}
.coluna li.aqui p::after{width:2rem;opacity:1;background:var(--pink)}
.coluna li.aqui svg{transform:translate(calc(-50% + var(--x,0px) - 7px),calc(-50% - 5px)) rotate(var(--r,0deg))}
.legenda{position:absolute;right:1rem;bottom:1rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;color:#fff;background:rgba(34,29,27,.5);backdrop-filter:blur(6px);padding:.42rem .8rem;border-radius:99px}
.registro{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;padding:.9rem 0 1.1rem;font-size:.72rem;letter-spacing:.03em;color:var(--tinta-2);border-top:1px solid rgba(42,28,22,.12);animation:surge .9s 2s both}

@media (min-width:861px) and (max-width:1180px){
  .palco{column-gap:11.5rem}
  h1{font-size:clamp(2.6rem,min(5.2vw,13vh),5rem)}
  .coluna p{width:9.6rem;font-size:.8rem;right:3.5rem;gap:.5rem}
  .coluna b{font-size:1.4rem}
  .dela{width:10rem;right:calc(100% + 3rem);font-size:.6rem}
  .nav nav{gap:1.1rem;font-size:.84rem}
  .apoio{max-width:30ch}
  .prova{max-width:21rem}
}
@media (max-width:860px){
  :root{--foto-l:100%}
  .hero{padding-bottom:1.6rem}
  .nav{padding-top:1.05rem}
  .marca small,.nav nav a:not(.zap){display:none}
  .nav .zap{font-size:.86rem;white-space:nowrap}
  .palco{display:block;padding-top:5rem}
  .texto{padding-bottom:0}
  .hero .olho{font-size:.64rem;letter-spacing:.1em}
  h1{font-size:clamp(2.6rem,12.4vw,4.2rem)}
  .apoio{max-width:none}
  .cena{width:auto;margin-top:1.7rem;display:flex;flex-direction:column}
  .cena::before{display:none}
  .cena img{border-radius:1.6rem;aspect-ratio:4/4.4;object-fit:cover;object-position:100% 0}
  .legenda{display:none}
  .ripado{left:30%;right:calc(-1 * var(--margem));top:-9%;bottom:34%;border-radius:0}
  .dela{position:static;order:-1;width:auto;text-align:left;margin:0 0 .7rem;font-size:.64rem}
  .coluna{position:relative;inset:auto;display:flex;flex-direction:row;justify-content:flex-start;gap:.7rem;margin:-2.3rem calc(-1 * var(--margem)) 0;padding:0 var(--margem) .9rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--margem);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .coluna::-webkit-scrollbar{display:none}
  .coluna li{flex:0 0 9.2rem;width:auto;height:auto;scroll-snap-align:start;padding-top:0}
  .coluna svg{position:static;display:block;width:4.3rem;margin:0 0 .15rem .3rem;transform:rotate(var(--r,0deg))}
  .coluna li.aqui svg{transform:translateY(-4px) rotate(var(--r,0deg))}
  .coluna p{position:static;transform:none;width:auto;display:block;text-align:left;font-size:.9rem;padding:.55rem .75rem .7rem;border-radius:1rem;background:rgba(255,250,243,.72);border:1px solid rgba(42,28,22,.08);min-height:5.6rem}
  .coluna p::after{display:none}
  .coluna b{display:block;font-size:1.5rem;margin-bottom:.15rem}
  .coluna li.aqui p{background:#fffaf3;border-color:rgba(207,47,108,.35)}
  .registro{font-size:.68rem;margin-top:1.4rem}
}
/* tablet em pé (600 a 860 px): texto e foto lado a lado, a fileira de cuidados embaixo, de ponta a ponta */
@media (min-width:600px) and (max-width:860px){
  .palco{display:grid;grid-template-columns:minmax(0,1fr) min(42vw,21rem);column-gap:2rem;align-items:center}
  .texto{grid-column:1;grid-row:1}
  h1{font-size:clamp(2.3rem,6.4vw,3.3rem)}
  .cena{display:contents}
  .ripado{display:none}
  .cena img{grid-column:2;grid-row:1;margin-top:0;aspect-ratio:4/4.8}
  .dela{grid-column:1/-1;grid-row:2;margin:2rem 0 0}
  .coluna{grid-column:1/-1;grid-row:3;margin-top:.9rem}
  .coluna li{flex-basis:10.5rem}
  .registro{grid-column:1/-1;grid-row:4}
}