/* Etapa 1 — medidas e cores do primeiro bloco. CSS restrito a stage-*. */
.stage-header{position:fixed;inset:0 0 auto;z-index:100;background:#fff;border:0;backdrop-filter:none}
.stage-header-inner{max-width:1600px;margin:auto;height:70px;padding:0 4.2%;display:flex;align-items:center;gap:22px}
.stage-logo{display:flex;align-items:center;gap:5px;flex-shrink:0}.stage-logo img{width:36px;height:40px;object-fit:contain}.stage-logo span{font:15px Georgia,serif;letter-spacing:5px;color:#111}
.stage-header .stage-nav{display:flex;margin:0 0 0 auto;padding:0;gap:clamp(14px,2.5vw,40px);border:0;min-height:0;font-size:11px;white-space:nowrap}.stage-nav a{padding:12px 0}.stage-header .stage-bag{display:flex;gap:5px;min-width:48px}.stage-bag .bag-count{position:static;width:21px;height:23px;background:#090b09;color:white;display:grid;place-items:center;border-radius:50%;font-size:11px}.stage-menu{display:none}
.stage-wrap{padding:70px 3.4% 0;max-width:1600px;margin:auto;background:#fff}
.stage-hero{height:calc(100svh - 95px);min-height:570px;max-height:820px;position:relative;isolation:isolate;border-radius:36px;overflow:hidden;background:#e8e7e5;color:#10110f}
/* Seul o vídeo recebe transformações. Textos e cards permanecem estáveis. */
.stage-media{position:absolute;inset:-18px;z-index:-2;transition:transform .24s ease-out;transform:perspective(1200px) scale(1.025);will-change:transform}.stage-media video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.stage-hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#ffffff35,transparent 55%)}
.stage-heading{position:absolute;top:13.5%;left:3.2%;max-width:49%}.stage-heading p{font-size:17px;margin:0 0 28px;letter-spacing:0}.stage-heading h1{font-family:var(--serif,Georgia,serif);font-size:clamp(42px,4.3vw,69px);font-weight:400;line-height:.98;letter-spacing:-.035em;margin:0;color:#080a08}
.stage-routine{position:absolute;left:2.2%;bottom:6.5%;display:flex;align-items:center;gap:28px;padding:12px 16px;background:#fff;border-radius:20px;max-width:430px}.stage-routine>img{width:84px;height:80px;border-radius:14px;object-fit:cover}.stage-routine p{font-size:12px;line-height:1.35;margin:0 0 9px}.stage-routine a{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#090b09;color:white;border-radius:30px;padding:7px 12px;font-size:11px;min-height:32px}.stage-routine .icon{width:17px;height:17px}
.stage-offer{position:absolute;right:2%;top:48%;width:208px}.stage-tags{display:flex;gap:2px;margin-bottom:5px}.stage-tags span{flex:1;text-align:center;border-radius:24px;background:#ffffff45;backdrop-filter:blur(12px);padding:9px 5px;font-size:10px;color:#fff}.stage-offer-body{display:block;background:#ffffff25;backdrop-filter:blur(12px);border-radius:21px;padding:12px 7px 7px;color:#fff;position:relative}.stage-offer small{font-size:10px;margin-left:5px}.stage-offer h2{font:700 22px/.94 Arial,sans-serif;margin:9px 5px 22px;color:white}.stage-offer-arrow{position:absolute;right:7px;top:5px;border-radius:50%;width:32px;height:32px;background:#fff;color:#282b27;display:grid;place-items:center;font-size:23px}.stage-product{height:166px;background:#fff;border-radius:16px;overflow:hidden}.stage-product img{width:100%;height:100%;object-fit:contain;padding:7px}.stage-video-control{position:absolute;bottom:12px;left:50%;border:1px solid #fff8;border-radius:50%;background:#ffffffb3;color:#111;width:32px;height:32px;font-size:13px;cursor:pointer}
.stage-hero a:focus-visible,.stage-hero button:focus-visible{outline:3px solid #222;outline-offset:4px}
.stage-routine{width:392px}.stage-offer{top:auto;bottom:20px}.stage-product{height:158px}
/* Tablet: menu recolhível, sem comprimir links. */
@media(max-width:1050px){.stage-menu{display:flex}.stage-header .stage-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;padding:20px 5%;flex-wrap:wrap;border-bottom:1px solid #ddd}.stage-header .stage-nav.menu-open{display:flex}.stage-bag{margin-left:auto}.stage-heading h1{font-size:49px}.stage-heading p{font-size:14px}.stage-routine{gap:12px}.stage-offer{width:185px}.stage-product{height:145px}}
/* Celular: vídeo em sua própria área; cards reempilhados e clicáveis. */
@media(max-width:600px){.stage-wrap{padding:70px 14px 0}.stage-hero{height:auto;min-height:0;max-height:none;border-radius:25px;display:grid;grid-template-columns:1fr;gap:12px;padding:375px 12px 14px;background:#eeeae6}.stage-media{inset:0 0 auto;height:380px;transform:none!important}.stage-media video{object-position:58% center}.stage-hero:before{inset:0 0 auto;height:210px;background:linear-gradient(#ffffffe0,#ffffff00)}.stage-heading{top:26px;left:20px;max-width:90%}.stage-heading p{font-size:12px;margin-bottom:17px}.stage-heading h1{font-size:39px}.stage-routine{position:relative;inset:auto;max-width:none;gap:16px;padding:12px}.stage-routine>img{width:76px;height:84px}.stage-routine p{font-size:11px}.stage-routine a{font-size:10px}.stage-offer{position:relative;inset:auto;width:auto}.stage-tags span{color:#35352f;background:#fff9}.stage-offer-body{background:#ded5cd;min-height:155px;padding:22px 15px;color:#35352f}.stage-offer h2{color:#222;font-size:26px;margin-bottom:0}.stage-product{position:absolute;right:9px;top:9px;width:44%;height:137px}.stage-offer-arrow{right:calc(44% + 18px);top:13px;width:26px;height:26px}.stage-video-control{top:330px;bottom:auto;left:auto;right:16px}.stage-logo span{font-size:14px}.stage-header-inner{padding:0 18px;gap:10px}}
@media(max-width:600px){.stage-routine{width:auto}.stage-offer{bottom:auto}.stage-product{height:137px}}
/* Fundo geral branco; superfícies dos cards mantêm seus contrastes. */
body{background:#fff}
/* Painel do produto ampliado, mantendo distância da borda inferior. */
@media(min-width:1060px){
 .stage-offer{width:248px}
 .stage-tags span{font-size:12px;padding:11px 6px}
 .stage-offer-body{padding:15px 9px 9px;border-radius:24px}
 .stage-offer small{font-size:12px}
 .stage-offer h2{font-size:27px;margin:11px 5px 24px}
 .stage-offer-arrow{width:38px;height:38px;font-size:27px}
 .stage-product{height:218px;border-radius:18px}
 .stage-product img{padding:0;transform:scale(1.14)}
}
/* Card de rotina ampliado; cresce para a direita e em direção à base do vídeo. */
@media(min-width:1060px){
 .stage-routine{width:460px;max-width:460px;bottom:3%;padding:16px 20px;gap:24px;border-radius:22px}
 .stage-routine>img{width:108px;height:108px;border-radius:16px}
 .stage-routine>div{flex:1;min-width:0}
 .stage-routine p{font-size:14px;line-height:1.4;margin-bottom:12px}
 .stage-routine a{font-size:12px;min-height:39px;padding:9px 14px}
 .stage-routine .icon{width:20px;height:20px}
}
/* Título mais compacto para preservar espaço ao lado do cabelo da modelo. */
.stage-heading h1{font-size:clamp(51px,5.55vw,89px)}
@media(min-width:1060px){.stage-heading p{font-size:18px}}
@media(max-width:1050px){.stage-heading h1{font-size:54px}}
@media(max-width:600px){.stage-heading h1{font-size:41px}}
/* Cabeçalho: logo e navegação um pouco maiores, com espaçamento adaptável. */
.stage-logo img{width:50px;height:54px}.stage-logo span{font-size:20px}
.stage-header .stage-nav{font-size:14px;gap:clamp(10px,1.5vw,24px)}
@media(max-width:600px){.stage-logo img{width:44px;height:48px}.stage-logo span{font-size:18px}.stage-header .stage-nav{font-size:15px}}
/* Ampliação suave do primeiro bloco, com menos margem branca ao redor. */
@media(min-width:1060px){
 .stage-wrap{max-width:1680px;padding-inline:2%}
 .stage-header-inner{max-width:1680px;padding-inline:2.8%}
 .stage-hero{height:calc(100svh - 82px);max-height:860px}
 .stage-heading{transform:scale(1.035);transform-origin:top left}
 .stage-routine{transform:scale(1.035);transform-origin:bottom left}
 .stage-offer{transform:scale(1.89);transform-origin:bottom right}
 /* Altura suficiente para acomodar o painel ampliado sem cortar as tags. */
 .stage-hero{min-height:790px;max-height:960px}
}
@media(max-width:1050px) and (min-width:601px){.stage-wrap{padding-inline:2%}}
@media(max-width:600px){.stage-wrap{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.stage-media{transition:none;transform:none!important}}
/* Exceção restrita ao efeito solicitado, desligável no próprio hero. */
.stage-hero .stage-media[data-tilt-enabled="true"]{transform:var(--hero-transform,perspective(1200px) scale(1.035))!important;transition:none!important}
.stage-tilt-control{position:absolute;bottom:12px;left:calc(50% + 42px);border:1px solid #fff8;border-radius:22px;background:#ffffffe0;color:#222;padding:8px 12px;font-size:11px;cursor:pointer;z-index:5}
@media(max-width:600px){.stage-tilt-control{display:none}}