/* Home luanamatos.com — implementado a partir dos frames Desktop (1920) e Mobile (390) do Figma. */
@font-face{font-family:"SF Pro Display";font-weight:400;src:url(fonts/SF-Pro-Display-Regular.otf) format("opentype");font-display:swap}
@font-face{font-family:"SF Pro Display";font-weight:500;src:url(fonts/SF-Pro-Display-Medium.otf) format("opentype");font-display:swap}
@font-face{font-family:"SF Pro Display";font-weight:700;src:url(fonts/SF-Pro-Display-Bold.otf) format("opentype");font-display:swap}
@font-face{font-family:"SF Pro Display";font-weight:800;src:url(fonts/SF-Pro-Display-Heavy.otf) format("opentype");font-display:swap}
@font-face{font-family:"Country Club";src:url(fonts/CountryClub-Script.otf) format("opentype");font-display:swap}
@font-face{font-family:"Dear Crush";src:url(fonts/Dear-Crush.otf) format("opentype");font-display:swap}

:root{
  --marrom:#28241D;
  --bege:#FAF2DD;
  --areia:#F4E3B8;
  --amarelo:#FBCB77;
  --ouro:#F9B439;
  --grad:linear-gradient(172.75deg,#FBCB77 6%,#F4E3B8 104.6%);
  --sf:"SF Pro Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Country Club","Brush Script MT",cursive;
  --crush:"Dear Crush","Brush Script MT",cursive;
  --k:1;
  --cz:1;   /* escala dos cards / fechamento / rodapé (desktop 1, mobile 2/3) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bege);color:var(--marrom);font-family:var(--sf);font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
.page{zoom:var(--k);overflow-x:clip}

/* ---------- HERO ---------- */
.hero{position:relative;height:714px;overflow:hidden;background:var(--bege)}
.hero__bg{position:absolute;inset:0}
.hero__bg::before{content:"";position:absolute;inset:0;background:url(assets/tx-linho.webp) center/cover;mix-blend-mode:multiply;opacity:.3}
.hero__ico{position:absolute}
.hero__ico--ps{width:473px;left:calc(50% - 746px + 35px);top:-179px;transform:rotate(-9.47deg);mix-blend-mode:overlay}
.hero__ico--fg{width:559px;left:calc(50% + 141px + 35px);top:226px;transform:rotate(7.82deg);mix-blend-mode:soft-light}
.hero__stage{position:relative;width:1100px;height:100%;margin:0 auto}
.hero__group{position:absolute;left:50%;top:82px;width:746px;margin-left:-373px;display:flex;align-items:center;gap:46px}
.hero__id{flex:none;width:321.78px;display:flex;flex-direction:column;align-items:center}
.hero__name{display:inline-grid;font-weight:400;white-space:nowrap;line-height:normal}
.hero__name>span{grid-area:1/1}
.hero__oie{justify-self:center;font-size:40.588px;line-height:23.758px;letter-spacing:-.05em;text-align:center}
.hero__luana{justify-self:center;margin:37.34px 0 0;font-weight:800;font-size:73.058px;letter-spacing:-.05em}
.hero__matos{margin-top:89.29px;font-family:var(--script);color:var(--ouro);font-size:107.746px}
.hero__photo{position:relative;width:321.78px;height:329.94px}
.hero__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero__ringtxt{font-family:var(--sf);font-size:24px;fill:var(--marrom)}
.hero__pic{position:absolute;left:32.36px;top:33.98px;width:255.43px;height:262.15px;border-radius:70.58px;border:1.68px solid var(--marrom);overflow:hidden}
.hero__pic img{position:absolute;width:159.87%;height:276.92%;left:-39.47%;top:-88.46%}
.hero__bio{flex:none;width:378px;font-size:25px;line-height:31px;letter-spacing:-.05em;text-align:center}
.hero__bio strong{font-weight:700}

.tag{position:absolute;display:inline-flex;align-items:center;gap:13px;padding:13px 17.333px;background:var(--areia);border:1.083px solid var(--marrom);border-radius:13px;box-shadow:4.333px 4.333px 0 var(--marrom);font-size:19.259px;line-height:21.667px;letter-spacing:.01em;white-space:nowrap}
.tag{transform:rotate(var(--r,0deg));animation:flutua var(--d,6s) ease-in-out var(--l,0s) infinite;will-change:transform}
.tag img{flex:none}
@keyframes flutua-m{
  0%,100%{transform:translate(0,0) rotate(var(--r))}
  50%{transform:translate(10px,-28px) rotate(calc(var(--r) + 4deg))}
}
@keyframes flutua{
  0%,100%{transform:translate(0,0) rotate(var(--r))}
  50%{transform:translate(3px,-11px) rotate(calc(var(--r) + 2.5deg))}
}
.tag--dw{left:715px;top:-18px;width:174.6px;height:70px;white-space:normal;--r:5.92deg;--d:6.4s;--l:-1.2s;transform-origin:center}
.tag--dw img{width:24px;height:24px}
.tag--dw{left:715px;top:-6px}
.tag--ps{left:-179px;top:56px;width:158.65px;height:48px;--r:-10.23deg;--d:5.6s;--l:-3.1s}
.tag--ps img{width:21px;height:21px}
.tag--fg{left:344px;top:482px;height:52px;--r:5deg;--d:7.2s;--l:-4.6s}
.tag--fg img{width:15.4px;height:20.8px}

/* ---------- FAIXA ---------- */
.faixa{position:relative;height:103px;margin-top:-57px;z-index:2;pointer-events:none}
.faixa__strip{position:absolute;left:50%;top:50%;width:2400px;height:64px;margin:-32px 0 0 -1200px;transform:rotate(-1.2deg);background:linear-gradient(178.73deg,#FBCB77 6%,#F4E3B8 104.6%);box-shadow:0 4px 0 var(--marrom);display:flex;align-items:center}
.faixa__dash{height:40.2px;width:100%;border:1px dashed var(--marrom);overflow:hidden;display:flex;align-items:center}
.mq{display:flex;width:max-content;will-change:transform}
.mq__g{display:flex;flex:none}
.mq--faixa{animation:mq3 40s linear infinite}
.mq--faixa .mq__g{align-items:baseline}
.mq--faixa b{font-weight:800;font-size:18px;line-height:25px;letter-spacing:-.05em}
.mq--faixa i{font-family:var(--script);font-style:normal;font-size:30px;line-height:25px;margin-right:49px}
@keyframes mq3{to{transform:translateX(-33.3333%)}}
@keyframes mq2{to{transform:translateX(-50%)}}

/* ---------- CARDS ---------- */
.cards{width:1047px;margin:44px auto 0;display:flex;gap:75px;align-items:flex-start}
.card{position:relative;flex:none;width:486px;zoom:var(--cz)}
.card--mc{height:582px}
.card--orc{height:1206px}
.card__bg{position:absolute;left:-1.5px;top:-1.5px;overflow:visible}
.card--mc .card__bg{width:489px;height:585px}
.card--orc .card__bg{width:489px;height:1209px}
.card__clip{position:absolute;inset:0;overflow:hidden}
.card__clip--mc{clip-path:url(#clip-mc)}
.card__clip--orc{clip-path:url(#clip-orc)}
.card__label{position:absolute;left:107px;top:13.5px;transform:translateX(-50%);font-family:var(--crush);font-size:22.68px;line-height:28.98px;white-space:nowrap}

.rib{position:absolute;display:flex;align-items:center;padding:15px;height:59.255px}
.rib--dark{left:-172.5px;top:489px;width:742.5px;background:var(--marrom);color:var(--bege);transform:rotate(-5.48deg);transform-origin:center;margin:0;top:524.4px}
.rib--gold{left:-171px;top:113.5px;width:881.2px;background:linear-gradient(176.77deg,#FBCB77 6%,#F4E3B8 104.6%);color:var(--marrom);transform:rotate(3.26deg)}
.rib__dash{height:35.8px;width:100%;border:1.125px dashed currentColor;overflow:hidden;display:flex;align-items:center}
.mq--rib{animation:mq2 28s linear infinite;font-size:18px;line-height:45px;letter-spacing:-.05em;white-space:nowrap}
.mq--rib .mq__g>span{margin-right:30px}

/* treinamento */
.mc__col{position:absolute;left:52.5px;top:52.5px;width:381.9px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2}
.mc__logo{width:395.3px;height:211px}
.mc__txt{width:318px;font-size:37.5px;line-height:45px;letter-spacing:-.05em;text-align:center}
.mc__col .btn{margin-top:15.5px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9.75px;padding:9.75px 13px;border:.812px solid var(--marrom);border-radius:9.75px;box-shadow:3.25px 3.25px 0 var(--marrom);background:var(--bege);color:var(--marrom);transition:transform .15s,box-shadow .15s}
.btn:hover,.btn:focus-visible{transform:translate(2px,2px);box-shadow:1.25px 1.25px 0 var(--marrom)}
.btn--bege{height:55.5px;font-family:"Inter",var(--sf);font-weight:700;font-size:30px;line-height:16.25px;letter-spacing:-.06em;white-space:nowrap}
.btn--bege span{display:block}
.btn--gold{border-color:var(--ouro);box-shadow:3.25px 3.25px 0 var(--ouro)}
.btn--gold:hover,.btn--gold:focus-visible{box-shadow:1.25px 1.25px 0 var(--ouro)}
.btn--sand{background:var(--areia);border-color:var(--ouro);box-shadow:3.25px 3.25px 0 var(--ouro);justify-content:flex-start;font-size:22.5px;line-height:25.5px;letter-spacing:-.05em;width:259.25px;height:70.5px}
.btn--sand:hover,.btn--sand:focus-visible{box-shadow:1.25px 1.25px 0 var(--ouro)}
.btn--sand{justify-content:center;width:auto;padding:9.75px 18px 9.75px 17px}
.btn--sand span{width:auto;text-align:left;white-space:nowrap}
.btn--grad{background:var(--grad);width:100%;gap:15px;font-size:22.5px;line-height:25.5px;letter-spacing:-.05em;white-space:nowrap}
.btn--grad img{width:37.5px;height:37.5px}

/* orçamento */
.orc__col{position:absolute;left:34.5px;top:216px;width:415.5px;display:flex;flex-direction:column;align-items:center;z-index:2}
.orc__ask{width:301.5px;margin-bottom:15px;font-weight:400;font-size:37.5px;line-height:45px;letter-spacing:-.05em;text-align:center;color:var(--bege)}
.card--orc .card__label{color:var(--bege)}
.car{margin-top:56.5px;width:100%;display:flex;flex-direction:column;align-items:center}
.car__title{font-weight:400;font-size:37.5px;line-height:45px;letter-spacing:-.05em;text-align:center;color:var(--bege);white-space:nowrap}
.car__title em{font-family:var(--script);font-style:normal;font-size:52.5px;letter-spacing:0;margin:0 0 0 5px}
.car__nav{display:flex;justify-content:center;gap:28.6px;margin-top:6px;opacity:.35}
.car__btn{width:33px;height:33px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;transition:opacity .15s}
.car__nav:hover,.car__nav:focus-within{opacity:1}
.car__btn:focus-visible{outline:2px solid var(--bege);outline-offset:3px}
.car__view{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.car__view:active{cursor:grabbing}
.car__view:focus-visible{outline:2px solid var(--bege);outline-offset:4px}
.car__btn--prev img{transform:scaleX(-1)}
.car__view{margin-top:28.5px;width:486px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.car__track{display:flex;gap:16px;width:415.5px;margin:0 auto;list-style:none;transition:transform .7s cubic-bezier(.45,.05,.2,1)}
.car__slide{flex:none;width:415.5px}
.car__slide img{width:415.5px;height:417px}
.orc__col>.btn--sand{margin-top:30px}

/* ---------- FECHAMENTO ---------- */
.fim{width:1102.5px;margin:85px auto 0;display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:56px;zoom:var(--cz)}
.fim__btns{flex:none;width:375px;display:flex;flex-direction:column;gap:19.5px}
.fim__quote{flex:none;width:658.5px;display:flex;justify-content:center;gap:22.5px;align-items:flex-start}
.quote{position:relative;flex:none;width:390px;padding-top:78px}
.quote p{font-size:32.647px;line-height:43.5px;letter-spacing:-.05em;text-align:justify;text-align-last:justify;hyphens:none}
.quote p::after{content:"";display:block}
.quote em{font-family:var(--script);font-style:normal;font-size:52.5px;letter-spacing:0}
.quote__mark{position:absolute;left:124.5px;top:0;height:90px;font-family:var(--script);font-size:327.079px;line-height:271px;text-shadow:0 6px 0 var(--ouro)}
.fim__who{flex:none;width:195.85px;display:flex;flex-direction:column;align-items:center;gap:4.5px}
.fim__pic{width:195.85px;height:201px;border-radius:54.115px;border:1.288px solid var(--ouro);box-shadow:3.5px 4.5px 0 var(--ouro);overflow:hidden;position:relative}
.fim__pic img{position:absolute;width:146.27%;height:256.07%;left:-3.06%;top:-48.7%}
.fim__cap .w{display:inline-block;white-space:nowrap}
.js .fim__cap .w{visibility:hidden}
/* cada linha é revelada de uma vez só, num movimento contínuo; o padding evita cortar os traços da fonte manuscrita */
.fim__cap .ln{display:block;width:fit-content;margin:-.7em auto;padding:.7em .5em;white-space:nowrap}
.js .fim__cap .ln{clip-path:inset(0 100% 0 0)}
.js .fim__cap.is-writing .ln{animation:escreve var(--t,1s) linear var(--d,0s) both}
@keyframes escreve{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.fim__cap{width:178.5px;margin-top:20px;font-family:var(--crush);font-size:25.5px;line-height:32.64px;text-align:center;transform:rotate(-6.56deg)}

/* ---------- RODAPÉ ---------- */
.foot{position:relative;margin-top:48px;padding:30px 0 22px;background:var(--amarelo);border-radius:55px 55px 0 0;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;background:url(assets/tx-linho.webp) center/cover;mix-blend-mode:multiply;opacity:.3}
.foot__in{position:relative;width:calc(100% - 64px);max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:14px;zoom:var(--cz)}
.foot__top{display:flex;justify-content:space-between;align-items:center}
.foot__logo{line-height:12.161px}
.foot__logo span{display:block;font-family:var(--script);font-size:25.765px}
.foot__logo b{display:block;margin-top:2px;font-weight:500;font-size:17.391px;letter-spacing:-.08em}
.foot__nav{display:flex;gap:40px;font-size:22.5px;line-height:25px;letter-spacing:-.05em}
.foot__nav a{background:linear-gradient(var(--ouro),var(--ouro)) 0 100%/0 3px no-repeat;padding-bottom:2px;transition:background-size .25s ease}
.foot__nav a:hover,.foot__nav a:focus-visible{background-size:100% 3px}
.foot__soc{display:flex;gap:14px;list-style:none}
.foot__soc a,.foot__topo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bege);border:.812px solid var(--marrom);border-radius:13px;box-shadow:3.25px 3.25px 0 var(--marrom);transition:transform .15s ease,box-shadow .15s ease}
.foot__soc a:hover,.foot__soc a:focus-visible,.foot__topo:hover,.foot__topo:focus-visible{transform:translate(2px,2px);box-shadow:1.25px 1.25px 0 var(--marrom)}
.foot__adeus{width:fit-content;margin:0 auto;padding:.7em .5em;font-family:var(--crush);font-size:26px;line-height:1.1;white-space:nowrap;transform:rotate(-2deg)}
.js .foot__adeus{clip-path:inset(0 100% 0 0)}
.js .foot__adeus.is-writing{animation:escreve var(--t,1s) linear var(--d,0s) both}
.foot__bot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px dashed var(--marrom);font-size:18px;line-height:21px;letter-spacing:-.05em}
.foot__topo img{transform:rotate(-90deg)}

/* ---------- FECHAMENTO (desktop): texto | foto | frase, na mesma linha ---------- */
@media (min-width:900px){
  .fim__quote{width:auto;align-items:center;gap:40px}
  .fim__who{width:auto;flex-direction:row;align-items:center;gap:36px}
  .fim__cap{margin-top:0}
  .quote{padding-top:0}
  .quote__mark{top:-78px}
}

/* ---------- TELAS INTERMEDIÁRIAS (900–1139): escala cards e fechamento ---------- */
@media (min-width:900px) and (max-width:1139px){
  .cards{zoom:.8;margin-top:55px}
  .card{zoom:1}
  .fim{zoom:.8}
}
@media (min-width:1020px) and (max-width:1139px){
  .cards{zoom:.9;margin-top:49px}
  .fim{zoom:.9}
}

/* ---------- MOBILE (frame 390) ---------- */
@media (max-width:899px){
  :root{--cz:.66667}
  .hero{height:649px}
  .hero__ico--ps{width:290px;left:calc(50% - 195px - 130px);top:108px}
  .hero__ico--fg{width:300px;left:calc(50% - 195px + 237px);top:198px}
  .hero__stage{width:390px}
  .hero__group{left:0;top:59px;margin-left:0;width:390px;flex-direction:column;gap:15px;padding:0 28px;align-items:center}
  .hero__id{zoom:.6164}
  .hero__bio{width:334px;font-size:19.5px;line-height:23px}
  .tag{zoom:.5;animation-name:flutua-m}
  .tag--ps{left:145px;top:-76px}
  .tag--dw{left:577px;top:127px}
  .tag--fg{left:55px;top:132px}
  .faixa{height:80px;margin-top:-8px}
  .faixa__strip{width:700px;margin-left:-350px;height:66px;margin-top:-33px}
  .cards{width:324px;margin-top:41px;flex-direction:column;gap:38px}
  .fim{width:375px;margin-top:69px;flex-direction:column;gap:58px}
  .fim__quote{width:390px;flex-direction:column;align-items:center;gap:22.5px}
  .foot{margin-top:32px;padding:28px 0 20px;border-radius:32px 32px 0 0}
  .foot__in{width:calc(100% - 40px);max-width:none;gap:18px}
  .foot__top{flex-direction:column;gap:18px}
  .foot__logo{text-align:center}
  .foot__nav{flex-wrap:wrap;justify-content:center;gap:12px 28px}
  .foot__adeus{font-size:30px}
  .foot__bot{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.mq--faixa,.mq--rib,.tag{animation:none}.js .fim__cap .ln{animation:none;clip-path:none}.js .foot__adeus{animation:none;clip-path:none}}