/* Yasmin Machado Makeup — estilos do site (tokens do design system "Yasmin Machado Makeup") */
:root{--surface:#fbf5ef;--surface-raised:#fffbf7;--surface-sunken:#f4e4da;--ink:#3b2322;--ink-muted:#6a524c;--line:#e8d5c9;--control-border:#9c8176;--brand:#b0555a;--on-brand:#fff8f2;--brand-soft:#f3d9d3;--brand-deep:#7a3340;--champagne:#d4ae78;--on-champagne:#3b2322;--champagne-soft:#f3e5cb;--bronze:#8a6230;--action:#7a3340;--action-hover:#662a35;--on-action:#fff8f2;--cta:#9c3a45;--cta-hover:#862f3a;--cta-pressed:#70262f;--on-cta:#fff8f2;--cta-glow:#d4ae788c;--focus:#7a3340;--danger:#a8322d;--danger-soft:#f6d9d5;--shadow-xs:0 1px 2px #3b232214;--shadow-card:0 2px 4px #3b23220f,0 12px 28px #3b232220;--shadow-lift:0 4px 8px #3b232212,0 18px 40px #3b232230;--shadow-cta:0 0 0 1px #d4ae78,0 10px 28px #9c3a4545;--serif:"Cormorant Garamond","Cormorant",Georgia,serif;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--soft:cubic-bezier(.22,1,.36,1);--io:cubic-bezier(.45,0,.55,1)}
[data-theme="dark"]{--surface:#241618;--surface-raised:#301e20;--surface-sunken:#1b1011;--ink:#f7ebe1;--ink-muted:#cdb3a8;--line:#4a3335;--control-border:#a48a82;--brand:#e0908f;--on-brand:#2a1214;--brand-soft:#4a2a2e;--brand-deep:#f0b4b0;--champagne:#e2c08c;--on-champagne:#2a1214;--champagne-soft:#3a2b24;--bronze:#e2c08c;--action:#f0b4b0;--action-hover:#f7c9c5;--on-action:#2a1214;--focus:#f2c7a5;--shadow-xs:0 1px 2px #00000066}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:#b0555a #f4e4da;-webkit-text-size-adjust:100%}
html::-webkit-scrollbar{width:6px;height:6px}
html::-webkit-scrollbar-track{background:#f4e4da}
html::-webkit-scrollbar-thumb{background:#b0555a;border-radius:999px;border:1px solid #f4e4da}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,figure,ul{margin:0}
img{max-width:100%}
::selection{background:var(--brand-soft);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:12px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
.skiplink{position:absolute;left:12px;top:-60px;z-index:20;background:var(--action);color:var(--on-action);padding:12px 16px;border-radius:999px;font:600 14px/18px var(--sans);text-decoration:none}
.skiplink:focus{top:12px}
.dxl{font:500 44px/46px var(--serif);letter-spacing:-.01em;text-wrap:balance}
.dlg{font:500 34px/38px var(--serif);letter-spacing:-.005em;text-wrap:balance}
.dmd{font:500 28px/32px var(--serif);text-wrap:balance}
.dsm{font:600 22px/28px var(--serif)}
.di{font-style:italic;font-weight:500;color:var(--brand-deep)}
@media(min-width:768px){.dxl{font-size:64px;line-height:66px}.dlg{font-size:44px;line-height:48px}.dmd{font-size:34px;line-height:38px}}
.bl{font:400 18px/28px var(--sans)}
.b{font:400 16px/24px var(--sans)}
.bs{font:400 14px/20px var(--sans)}
.lb{font:600 14px/18px var(--sans)}
.cap{font:500 12px/16px var(--sans)}
.ov{font:600 12px/16px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
.mut{color:var(--ink-muted)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}
@media(min-width:1100px){.wrap{padding:0 40px}}
.only-d{display:none}
@media(min-width:1100px){.only-d{display:flex}.only-m{display:none!important}}
.layout{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start;justify-content:center}
.formcol{flex:999 1 520px;min-width:0;max-width:640px;display:flex;flex-direction:column;gap:28px;scroll-margin-top:16px}
.side{flex:1 1 340px;max-width:420px;flex-direction:column;gap:24px}
@media(min-width:1100px){.side{position:sticky;top:32px}}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.il{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fc{fill:var(--champagne)}
.wa{flex:none;display:block;fill:currentColor}
.sr{position:absolute;opacity:0;width:1px;height:1px;margin:0;overflow:hidden;pointer-events:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tile{flex:none;width:40px;height:40px;border-radius:50%;background:var(--champagne-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center}
.av{flex:none;display:block;border-radius:50%;object-fit:cover;background:var(--champagne-soft);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--champagne)}

/* Abertura */
.stage{--stage-h:max(540px,100vh);height:var(--stage-h);overflow:hidden;background:var(--surface);transition:height 520ms var(--soft)}
@supports(height:100svh){.stage{--stage-h:max(540px,100svh)}}
.stage.closed{height:0}
.no-js .stage{display:none}
.stage-in{position:relative;height:var(--stage-h);width:100%;max-width:1120px;margin:0 auto}
.halo{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-230px 0 0 -210px;border-radius:50%;border:1.5px solid var(--line);pointer-events:none}
.halo::after{content:"";position:absolute;inset:36px;border-radius:50%;border:1px dashed var(--champagne);opacity:.6}
.u{position:absolute;color:var(--brand-deep);animation:ymFloat var(--d,7s) var(--io) infinite;animation-delay:var(--dl,0s)}
.u svg{display:block;width:100%;height:100%;animation:ymPulse var(--p,5s) var(--io) infinite;animation-delay:var(--dl,0s)}
.tw{position:absolute;animation:ymTwinkle var(--d,3s) var(--io) infinite;animation-delay:var(--dl,0s)}
@media(max-width:900px){.lo{display:none}}
.layer{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2svh,18px);padding:24px 24px 156px;pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity 240ms ease-out,transform 240ms ease-out;text-align:center}
.l1{transform:translateY(-16px)}
.stage[data-phase="1"] .l1,.stage[data-phase="2"] .l2,.stage[data-phase="3"] .l3{opacity:1;transform:none;transition:opacity 560ms var(--soft) 260ms,transform 560ms var(--soft) 260ms}
.stage[data-phase="3"] .l2{transform:translateY(-16px)}
.stage .dmd{max-width:min(440px,100%)}
@media(max-height:760px){.stage .dmd{font-size:24px;line-height:28px}.stage .dxl{font-size:40px;line-height:42px}}
@media(max-height:620px){.stage .dmd{font-size:21px;line-height:25px}.stage .dxl{font-size:34px;line-height:36px}}
.arch{padding:8px;background:var(--surface-raised);border-radius:999px 999px 24px 24px;box-shadow:var(--shadow-card),0 0 0 3px var(--champagne)}
.portrait{display:block;width:100%;height:auto;aspect-ratio:5 / 6;object-fit:cover;object-position:50% 25%;border-radius:999px 999px 16px 16px;background:var(--brand-soft)}
.arch-i{width:clamp(128px,24svh,210px)}
.deck{--dk:1;position:relative;width:100%;height:calc(230px * var(--dk));transform:scale(var(--dk));transform-origin:50% 0}
@media(max-width:420px){.deck{--dk:.84}}
@media(min-height:900px) and (min-width:768px){.deck{--dk:1.15}}
@media(max-height:760px){.deck{--dk:.8}}
@media(max-height:620px){.deck{--dk:.66}}
.frame{background:var(--surface-raised);padding:8px;border-radius:24px;box-shadow:var(--shadow-card)}
.card{position:absolute;left:50%;top:0;width:150px;margin-left:-75px;opacity:0;transform:translate(var(--x),calc(var(--y) + 32px));transition:opacity 520ms var(--soft),transform 520ms var(--soft)}
.stage[data-phase="3"] .card{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r));transition-delay:var(--td)}
.mk{display:block;width:100%;height:184px;object-fit:cover;object-position:50% 30%;border-radius:16px;background:var(--brand-soft)}
.intro-ctl{position:absolute;z-index:2;left:0;right:0;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 20px;text-align:center}
.segs{display:flex;gap:6px;width:min(240px,70vw)}
.segs button{flex:1;display:flex;align-items:center;height:32px;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}
.segs .tr{display:block;width:100%;height:4px;border-radius:999px;background:var(--line);overflow:hidden;transition:height 160ms}
.segs i{display:block;height:100%;width:0;background:var(--brand);border-radius:999px}
.segs .done i{width:100%;opacity:.45}
.segs .cur i{width:100%}
.segs .on i{animation:ymFill 3.2s linear forwards}
@media(hover:hover){.segs button:hover .tr{height:6px}}
.skip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface-raised);color:var(--ink);font:600 14px/18px var(--sans);cursor:pointer;transition:border-color 160ms}
.go-form{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid var(--brand-soft);background:var(--brand-soft);color:var(--brand-deep);font:600 15px/20px var(--sans);cursor:pointer;transition:border-color 160ms}
@media(hover:hover){.skip:hover,.go-form:hover{border-color:var(--brand-deep)}}

/* Formulário */
.opts{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:600px){.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:64px;border-radius:16px;border:1.5px solid var(--control-border);background:var(--surface-raised);box-shadow:var(--shadow-xs);cursor:pointer;user-select:none;transition:background 280ms var(--soft),border-color 280ms var(--soft),transform 160ms var(--soft)}
.opt:active{transform:scale(.985)}
.opt:has(.sr:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.opt.sel{background:var(--brand-soft);border-color:var(--action);box-shadow:none}
.mark{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1.5px solid var(--control-border);color:var(--on-action);transition:background 160ms,border-color 160ms}
.multi .mark{border-radius:8px}
.mark svg{opacity:0;transform:scale(.5);transition:opacity 160ms,transform 280ms var(--soft)}
.opt.sel .mark{background:var(--action);border-color:var(--action)}
.opt.sel .mark svg{opacity:1;transform:none}
.fldw{position:relative}
.fld{display:block;width:100%;height:56px;border:1.5px solid var(--control-border);border-radius:16px;background:var(--surface-raised);color:var(--ink);font:400 16px/24px var(--sans);padding:0 16px 0 48px;-webkit-appearance:none;appearance:none;transition:border-color 160ms,box-shadow 160ms}
.fld::placeholder{color:var(--ink-muted);opacity:1}
.fld:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 3px var(--brand-soft)}
.fld[aria-invalid="true"]{border-color:var(--danger)}
.fld:disabled{background:var(--surface-sunken);color:var(--ink-muted);border-style:dashed;opacity:.6}
.fld::-webkit-date-and-time-value{text-align:left}
.fldi{position:absolute;left:16px;top:16px;color:var(--brand-deep);pointer-events:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 24px;border-radius:999px;border:0;font:600 16px/20px var(--sans);letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:background 160ms,transform 160ms,color 160ms}
.btn-g{background:transparent;color:var(--brand-deep);padding:0 16px}
.btn-o{background:transparent;color:var(--brand-deep);border:1.5px solid var(--brand-deep)}
.btn:active{transform:scale(.98)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:999px;border:0;background:var(--champagne-soft);color:var(--ink);cursor:pointer;text-align:left;font-family:var(--sans);max-width:100%;transition:background 160ms}
.chip .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
@media(hover:hover){.btn-g:hover,.btn-o:hover{background:var(--brand-soft)}.opt:hover{border-color:var(--brand-deep)}.chip:hover{background:var(--brand-soft)}.cta:hover{background:var(--cta-hover)}}
.bar{position:sticky;bottom:0;z-index:3;display:flex;gap:8px;padding:12px 0 calc(16px + env(safe-area-inset-bottom));background:var(--surface)}
.bar .btn-g{min-height:60px}
.next{position:relative;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:0 8px 0 28px;border:0;border-radius:999px;cursor:pointer;background:var(--action);color:var(--on-action);font:600 17px/22px var(--sans);letter-spacing:.01em;text-align:left;box-shadow:inset 0 0 0 1px #d4ae7870,0 4px 10px -4px #7a334059;transition:background 160ms,transform 160ms}
.next::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#ffffff1c,transparent 55%);pointer-events:none}
.next-ic{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--champagne);color:var(--on-champagne);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #3b232233;transition:transform 280ms var(--soft)}
.next:active{transform:scale(.985)}
.next:active .next-ic{transform:translateX(6px)}
@media(hover:hover){.next:hover{background:var(--action-hover)}.next:hover .next-ic{transform:translateX(4px)}}
.cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;margin-bottom:36px;padding:0 24px;border-radius:999px;background:var(--cta);color:var(--on-cta);box-shadow:var(--shadow-cta);font:600 17px/22px var(--sans);text-decoration:none;text-align:center;transition:background 160ms,transform 160ms}
.cta:active{background:var(--cta-pressed);transform:scale(.985)}
.cta::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,var(--cta-glow),transparent);animation:ymSweep 5s var(--io) infinite;pointer-events:none}
.cta-more{display:none}
.m-only{display:inline}
@media(min-width:600px){.cta-more{display:inline}.m-only{display:none}}
.sb{scrollbar-width:thin;scrollbar-color:var(--brand) transparent}
.sb::-webkit-scrollbar{width:4px}
.sb::-webkit-scrollbar-track{background:transparent}
.sb::-webkit-scrollbar-thumb{background:var(--brand);border-radius:999px}
.alert{display:flex;align-items:flex-start;gap:8px;background:var(--danger-soft);color:var(--danger);border-radius:16px;padding:12px 16px}
.iglink{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--ink);text-decoration:none;font:500 15px/20px var(--sans)}
.iglink .igt{text-decoration:underline;text-decoration-color:var(--champagne);text-decoration-thickness:1.5px;text-underline-offset:4px}
.iglink .igx{color:var(--brand-deep);transition:transform 280ms var(--soft)}
@media(hover:hover){.iglink:hover .igt{text-decoration-color:var(--brand-deep)}.iglink:hover .igx{transform:translate(2px,-2px)}}
.mk-s{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;object-position:50% 30%;border-radius:12px;background:var(--brand-soft)}

/* Portfólio e sobre */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;list-style:none;padding:0}
.gal>:nth-child(even){margin-top:28px}
@media(min-width:768px){.gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.gal>:nth-child(even){margin-top:48px}}
.gimg{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;object-position:50% 25%;border-radius:16px;background:var(--brand-soft)}
.about{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
@media(min-width:768px){.about{grid-template-columns:260px minmax(0,1fr);gap:56px}}
.about .arch{width:100%;max-width:220px}
@media(min-width:768px){.about .arch{max-width:260px}}
.facts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.fact{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;min-height:64px;background:var(--surface-raised);border-radius:16px;box-shadow:var(--shadow-xs);color:var(--ink);text-decoration:none}
@media(hover:hover){a.fact:hover{box-shadow:var(--shadow-lift)}}

/* Rodapé */
.foot{background:var(--surface);color:var(--ink);padding:64px 0 calc(28px + env(safe-area-inset-bottom))}
.foot-top{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media(min-width:768px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}}
.fcol{display:flex;flex-direction:column;gap:10px}
.flink{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font:500 16px/24px var(--sans)}
.flink svg{color:var(--brand-deep);flex:none}
@media(hover:hover){.flink:hover{text-decoration:underline;text-underline-offset:4px}}
.fli{display:flex;gap:10px;align-items:flex-start}
.fli svg{color:var(--champagne);flex:none;margin-top:3px}
.fdiv{display:flex;align-items:center;gap:16px;color:var(--champagne)}
.fdiv span{flex:1;height:1px;background:var(--line)}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;padding-top:20px;border-top:1px solid var(--line)}
.fcopy{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px}
.fcopy .pipe{color:var(--champagne);margin:0 12px;opacity:.8}
@media(max-width:600px){.fbot{flex-direction:column;align-items:center;text-align:center;gap:16px}.fcopy{flex-direction:column;align-items:center;gap:2px}.fcopy .pipe{display:none}.fcopy span:first-child{color:var(--ink);font-weight:500}.totop{border:1.5px solid var(--line);border-radius:999px;padding:0 18px}}

/* Movimento */
.in{animation:ymIn 480ms var(--soft) both}
.qa{animation:ymStepA 480ms var(--soft) both}
.qb{animation:ymStepB 480ms var(--soft) both}
.nudge{animation:ymNudge 360ms var(--soft)}
@keyframes ymFloat{0%,100%{transform:translateY(0) rotate(var(--r0,-3deg))}50%{transform:translateY(-8px) rotate(var(--r1,3deg))}}
@keyframes ymPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes ymTwinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes ymIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ymStepA{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ymStepB{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ymNudge{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes ymSweep{0%,60%{left:-80px}100%{left:110%}}
@keyframes ymFill{to{width:100%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.segs .on i{width:100%}.tw{opacity:.7}}