@font-face{font-family:"Hanken Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/hanken-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/hanken-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/hanken-grotesk-700.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/dm-mono-400.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/dm-mono-500.woff2) format("woff2")}

:root{--blue:#0069f0;--ink:#28201a;--grey:#505050;--surface:#f9f9f8;--sand:#efece7;--yellow:#e1e551;--dark:#1a1e22;--glass:rgba(26,30,34,.86)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.08;margin:0}
p{margin:0}
ul,ol,dl{margin:0;padding:0}
li{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
section{position:relative;overflow-x:clip}
.wrap{max-width:1344px;margin:0 auto;padding:0 16px;width:100%}
.mono{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;letter-spacing:.03em;font-size:14px;line-height:1.4}
.eyebrow{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--blue);text-transform:uppercase}
.t-left{text-align:left}.t-center{text-align:center}.t-right{text-align:right}
.lead{font-size:19px;color:var(--grey);max-width:640px}
.lead.center{text-align:center;margin:12px auto 36px}
.lead.center.after{margin:40px auto 0;font-size:17px}
#warranty h3{font-size:22px;margin:22px 0 8px}

/* pacote */
.pular{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:10px 16px;z-index:100;border-radius:8px}
.pular:focus{left:8px}
.rascunho{background:#f7ff8b;color:#000;font-size:13px;line-height:1.4;padding:6px 16px;text-align:center}
.pacote{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;background:#fff;border-bottom:1px solid #e6e6e6;padding:4px 16px}
.pacote-abas{display:flex;flex-wrap:wrap;gap:2px}
.pacote-abas a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;color:var(--ink)}
.pacote-abas a[aria-current=page]{background:var(--blue);color:#fff}
.pacote-abas .curto{display:none}
.chat{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;font-size:15px;text-decoration:none}
.rodape{background:var(--dark);color:#e8e8e8;padding:32px 16px;text-align:center;font-size:14px}
.rodape p{margin:6px 0}
.rodape-chat{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:var(--ink);font-weight:500;text-decoration:none}
.rodape-fontes{color:#c9c9c9}

/* botoes e reveal */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;background:var(--blue);color:#fff;font-weight:500;font-size:16px;text-decoration:none}
.btn.ghost{background:transparent;border:2px solid #fff;color:#fff}
.rv{transition:opacity .6s ease,transform .6s ease}
.com-js .rv:not(.in){opacity:0;transform:translateY(22px)}

/* rain gauge */
.gauge{position:fixed;top:0;right:0;width:6px;height:100vh;background:rgba(0,105,240,.14);z-index:30;pointer-events:none}
.gauge-fill{display:block;width:100%;height:var(--p,0%);background:var(--blue)}

/* fotos de fundo */
.photo{isolation:isolate;display:flex;align-items:center;padding:56px 0}
.photo .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.photo .wrap>h2{display:table;background:var(--glass);color:#fff;padding:.3em .7em;border-radius:16px;font-size:clamp(26px,3.4vw,44px);margin-bottom:24px}
.photo .wrap>h2.t-right{margin-left:auto}
.photo .wrap>h2.t-center{margin-left:auto;margin-right:auto}
.glass{background:var(--glass);color:#fff;padding:28px;border-radius:24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.glass .eyebrow{color:#9cc8ff}
.glass.center{max-width:760px;margin:0 auto;text-align:center}
.glass p+p,.glass p+h3,.glass h3+p{margin-top:12px}
.glass h3{font-size:22px}
.glass h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:12px}

/* 1 forecast */
#forecast{padding:64px 0 56px;text-align:center}
#forecast .eyebrow{max-width:560px;margin:0 auto 18px}
#forecast h1{font-size:clamp(44px,7vw,92px);margin-bottom:18px}
#forecast .lead{margin:0 auto 26px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px;text-align:left}
.card{background:var(--surface);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:8px}
.card img{width:100%;height:240px;object-fit:contain}
.card h3{font-size:19px;letter-spacing:-.01em}
.card p{font-size:15px;color:var(--grey)}
.card .mono{color:var(--ink)}
.cards.three{margin-top:28px}

/* 2 rail */
#guarantee-rail{padding:30px 0 34px}
#guarantee-rail h2{font-size:22px;margin-bottom:10px}
.claims{display:flex;flex-wrap:wrap;gap:6px 30px;font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--blue);text-transform:uppercase}
.claims li::before{content:"+";margin-right:10px}
.thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.thumbs li{width:84px;height:84px;background:var(--surface);border-radius:18px;padding:6px}
.thumbs img{width:100%;height:100%;object-fit:contain}

/* 3 drizzle */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:stretch}
#drizzle{padding:72px 0}
.round{margin:0;position:relative;min-height:440px;border-radius:56px;overflow:hidden}
.round img,.tall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.col{display:flex;flex-direction:column;gap:14px;justify-content:center}
.col h2{font-size:clamp(34px,4.4vw,58px);text-align:right}
.col h3{font-size:22px;margin-top:10px}
.col p{color:var(--grey)}

/* 4 downpour */
.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.panels .glass{font-size:16px}
.panels .mono{font-size:13px}

/* 5 ripple */
#ripple-line{background-color:var(--blue);color:#fff;padding:64px 0;display:flex;align-items:center}
#ripple-line h2{font-size:clamp(26px,3vw,36px);max-width:860px;margin:0 auto}

/* 6 puddle */
#puddle-test{padding:64px 0}
#puddle-test p{font-size:18px}

/* 7 activities */
#activities{padding:48px 0}
.glass.side{max-width:680px;margin-left:auto;padding:28px 28px 20px}
.acts{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.acts li{display:flex;gap:16px;align-items:center}
.acts img{width:92px;height:92px;border-radius:22px;object-fit:cover;flex:none}
.acts h3{font-size:22px}
.acts p{font-size:14.5px;line-height:1.4;margin-top:2px!important}

/* 8 first pair */
#first-pair{padding:84px 0}
#first-pair h2{font-size:clamp(34px,4.4vw,58px)}
.steps{display:flex;flex-wrap:wrap;gap:24px 20px}
.steps li{flex:0 1 calc(25% - 15px);border-top:2px solid var(--ink);padding-top:14px}
.steps .mono{color:var(--blue);display:block;margin-bottom:6px;text-transform:uppercase}
.steps p{font-size:16px;color:var(--grey)}

/* 9 shelf */
#shelf{background-color:var(--sand);padding:44px 0 48px}
#shelf h2{font-size:clamp(34px,4.4vw,56px);margin-bottom:22px}
.shelf{display:flex;flex-wrap:wrap;gap:14px}
.shelf li{flex:0 0 calc(50% - 7px);display:flex;gap:14px;align-items:center;background:#fbfaf8;border-radius:24px;padding:12px}
.shelf img{width:130px;height:130px;object-fit:contain;flex:none}
.shelf h3{font-size:17px;letter-spacing:-.01em;margin-bottom:4px}
.shelf p{font-size:14px;line-height:1.4;color:var(--grey)}
.shelf .price{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;color:var(--ink);margin-top:4px}

/* 10 e 12 chips */
#seal-strip,#press-wall{padding:40px 0}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.chip{display:flex;align-items:center;gap:14px;background:var(--glass);color:#fff;border-radius:20px;padding:14px 18px}
.chip img{width:60px;height:60px;border-radius:14px;object-fit:cover;flex:none}
.chip p{font-size:14px;line-height:1.4}
.chip .mono{font-size:13px}
.photo .note{display:table;margin:16px auto 0;background:var(--glass);color:#fff;padding:8px 16px;border-radius:12px;font-size:14px}

/* 11 reviews */
#reviews{padding:48px 0}
#reviews .grid2{gap:20px}
#reviews h2{text-align:right}
.big{font-size:clamp(40px,5vw,60px);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin-top:10px}
.pair{display:flex;gap:12px;justify-content:flex-end;margin-top:14px}
.pair img{width:84px;height:84px;border-radius:18px;object-fit:cover}
.quotes blockquote{margin:0 0 16px}
.quotes blockquote:last-child{margin-bottom:0}
.quotes p{font-size:16.5px}
.quotes cite{display:block;margin-top:4px;font-family:"DM Mono",ui-monospace,monospace;font-style:normal;font-size:13px;color:#9cc8ff}

/* 13 refer */
#refer-friend{background-color:var(--yellow);color:var(--ink);padding:44px 0;display:flex;align-items:center}
#refer-friend h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px}
#refer-friend p{max-width:900px;font-size:18px}

/* 14 fit */
#fit-guide{background-color:var(--surface);padding:72px 0}
#fit-guide h2{font-size:clamp(34px,4.4vw,56px)}
#fit-guide h3.t-center{margin:36px 0 14px;font-size:24px}
.fitsteps,.notes,.socks{display:flex;flex-wrap:wrap;gap:16px}
.fitsteps li{flex:1 1 calc(33.33% - 11px);background:#fff;border-radius:24px;padding:22px}
.notes{margin-top:16px}
.notes>div{flex:1 1 calc(50% - 8px);border-top:2px solid var(--ink);padding-top:12px}
.notes h3{font-size:20px;margin-bottom:6px}
.notes p{font-size:15.5px;color:var(--grey)}
.socks li{flex:1 1 calc(25% - 12px);background:#fff;border-radius:18px;padding:16px;font-size:13px}

/* 15 stack */
#stack-heights{padding:64px 0}
#stack-heights h2{font-size:clamp(28px,3.6vw,46px);margin-left:auto;max-width:900px}
#stack-heights .wrap>p{margin-top:10px;color:var(--grey)}

/* 16 warranty */
#warranty{background-color:var(--dark);color:#fff;padding:48px 0;display:flex;align-items:center}
#warranty h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:12px}
#warranty p{max-width:900px;color:#e8e8e8}
#warranty p+p{margin-top:10px}

/* 17 clean water */
#clean-water{padding:56px 0}
#clean-water h2{font-family:"DM Mono",ui-monospace,monospace;font-size:16px;letter-spacing:.06em;margin-bottom:12px}
#clean-water .glass p{font-size:16px}
#clean-water .glass .mono{font-size:15px;color:#9cc8ff}

/* 18 faq */
#faq{padding:76px 0}
#faq h2{font-size:clamp(40px,5vw,60px);margin-bottom:32px}
.faqgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.faqcol img{width:100%;height:190px;object-fit:cover;border-radius:28px}
.faqcol dl{margin-top:8px}
.faqcol dt{font-weight:700;margin-top:14px}
.faqcol dd{margin:4px 0 0;color:var(--grey);font-size:15.5px}

/* 19 try dry */
#try-dry{background-color:var(--dark);color:#e8e8e8;padding:56px 0}
.tall{margin:0;position:relative;min-height:640px;border-radius:32px;overflow:hidden}
#try-dry .col{gap:12px;justify-content:center}
#try-dry h2{color:#fff}
#try-dry h3{color:#fff;font-size:21px;margin-top:8px}
#try-dry .col p{color:#e8e8e8;font-size:16px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

@media (min-width:861px){
  #forecast{min-height:840px}
  #guarantee-rail{min-height:240px}
  #drizzle{min-height:640px}
  #downpour{min-height:840px}
  #ripple-line,#warranty,#refer-friend{min-height:240px}
  #puddle-test,#reviews{min-height:420px}
  #activities{min-height:920px}
  #first-pair{min-height:640px}
  #shelf{min-height:900px}
  #try-dry{min-height:920px}
}
@media (max-width:860px){
  body{font-size:16px}
  .grid2,.panels,.chips,.faqgrid,.cards{grid-template-columns:minmax(0,1fr)}
  .grid2{gap:24px}
  .round,.tall{min-height:340px}
  .shelf li{flex:0 0 100%}
  .steps li{flex:0 1 calc(50% - 10px)}
  .fitsteps li,.notes>div{flex:1 1 100%}
  .socks li{flex:1 1 calc(50% - 8px)}
  .glass.side{margin-left:0}
  .col h2{text-align:right}
  #forecast{padding:44px 0}
  .photo{padding:40px 0}
}
@media (max-width:640px){
  .pacote{padding:4px 8px}
  .pacote-abas .longo{display:none}
  .pacote-abas .curto{display:inline}
  .pacote-abas a{padding:0 10px;font-size:14px}
  .steps li{flex:0 1 100%}
  .gauge{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{transition:none}
  .com-js .rv:not(.in){opacity:1;transform:none}
}