@font-face{font-family:"Montserrat";src:url("fonts/montserrat-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-500.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-600.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-700.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-500-italic.ttf") format("truetype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{--ink:#343132;--teal:#066a73;--teal-deep:#0b5f68;--aqua:#e3f8f9;--cream:#f9f7f5;--page:#fffdfb}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:400 16px/1.65 "Montserrat",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
a:focus-visible,.barra:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
h1,h2,h3{font-family:"Lora",Georgia,serif;font-weight:400;margin:0}
h2{font-size:clamp(30px,4.2vw,48px);line-height:1.15;margin-bottom:20px}
h3{font-size:20px;line-height:1.3}
p{margin:0 0 16px}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}

/* bloco do pacote */
.pular{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:12px 16px;z-index:100}
.pular:focus{left:8px;top:8px}
.rascunho{background:var(--ink);color:#fff;text-align:center;font-size:13px;line-height:1.4;padding:10px 16px}
.pacote{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px clamp(12px,3vw,32px);background:var(--aqua);border-bottom:1px solid #cfe9ea}
.pacote-abas{display:flex;gap:4px;flex-wrap:wrap}
.pacote-abas a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;color:var(--ink);text-decoration:none;font:600 12px/1 "Montserrat",sans-serif;letter-spacing:1px;text-transform:uppercase}
.pacote-abas a[aria-current="page"]{background:var(--teal);color:#fff}
.pacote-abas a:hover{background:#fff}
.pacote-abas a[aria-current="page"]:hover{background:var(--teal)}
.pacote-abas .curto{display:none}
.chat{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:8px;background:var(--ink);color:#fff;text-decoration:none;font:600 12px/1 "Montserrat",sans-serif;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.rodape{background:var(--ink);color:#fff;padding:40px clamp(16px,4vw,56px);font-size:14px}
.rodape p{max-width:900px;margin:0 0 12px}
.rodape-chat{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:600}
.rodape-fontes{color:#d9d6d3}

/* base de seção */
.s{overflow-x:clip;padding:72px clamp(16px,4vw,56px)}
.s>*{max-width:1280px;margin-inline:auto}
.tag{position:relative;display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 30px;margin:0 0 22px;border:1px solid currentColor;border-radius:4px 16px 16px 4px;background:#fff;font:600 12px/1.2 "Montserrat",sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
.tag::before{content:"";position:absolute;left:10px;top:50%;width:9px;height:9px;margin-top:-4.5px;border:1.5px solid currentColor;border-radius:50%}
.tag b{color:var(--teal);font-weight:700}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 28px;border:1.5px solid #07818b;border-radius:8px;background:var(--aqua);color:var(--teal);font:600 13px/1 "Montserrat",sans-serif;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:background-color .15s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.btn:hover{background:#fff}}
.nota{margin-top:24px;padding:14px 18px;border-left:4px solid #07818b;background:rgba(227,248,249,.7);font-size:15px}
.nota b{color:var(--teal)}
.ttl{margin-bottom:36px}
.ttl p:not(.tag){max-width:62ch}
figcaption{font-size:12px;line-height:1.4;letter-spacing:.5px}

/* revelação */
.rv{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.com-js .rv:not(.in){opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){.rv{transition:none}.com-js .rv:not(.in){opacity:1;transform:none}html{scroll-behavior:auto}}

/* 1 rail (hero): cabeçalho grande em cima, trilho sangrando à direita */
.s-rail{--pad:max(clamp(16px,4vw,56px),calc((100vw - 1280px)/2));padding-top:56px;padding-bottom:56px;padding-inline:var(--pad)}
.s-rail>*{margin-inline:0;max-width:none}
.s-rail .barra{margin-top:36px;margin-right:calc(-1 * var(--pad));padding-right:var(--pad)}
.s-rail .trilho li{flex-basis:clamp(240px,28vw,400px)}
.s-rail h1{font-size:clamp(56px,13vw,200px);line-height:.95;margin-bottom:16px}
.s-rail .lead{font:400 clamp(20px,2.4vw,30px)/1.3 "Lora",serif;margin-bottom:16px}
.s-rail .barra{position:relative;padding-top:22px}
.s-rail .barra::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:3px;background:var(--teal-deep)}
/* hero em pilha centralizada: título, frase, parágrafo e botão no eixo, como os títulos de seção da referência */
.s-rail .cab{text-align:center}
.s-rail .cab>p:not(.tag):not(.lead){margin-inline:auto}
.s-rail .cab>.lead{margin-bottom:12px}
.cab p:not(.tag):not(.lead){max-width:58ch}
.cab .btn{margin-top:8px}
.barra{margin-top:40px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px}
.trilho{display:flex;gap:16px;width:max-content}
.trilho li{flex:0 0 clamp(220px,24vw,340px);scroll-snap-align:start}
.trilho img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:16px}
.trilho.pq li{flex-basis:clamp(190px,19vw,260px)}
.trilho.pq img{aspect-ratio:1/1}
.trilho figcaption{padding-top:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

/* 2 faixa aqua */
.s-fita{background:var(--aqua);padding-block:18px}
.fita{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 36px;font:600 12px/1.5 "Montserrat",sans-serif;letter-spacing:1px;text-transform:uppercase}
.fita li::before{content:"\2726";color:var(--teal);margin-right:10px}

/* 3 garage */
.s-garage{background:var(--cream);padding-block:96px}
.s-garage .txt{display:flex;flex-direction:column}
.s-garage .nota{margin-top:auto}
.duo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:stretch}
.fotos{display:grid;grid-template-rows:1fr 1fr;gap:16px;min-height:600px}
.fotos figure,.tres figure,.mosaico figure{position:relative;min-height:0;overflow:hidden;border-radius:16px}
.fotos img,.tres img,.mosaico img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fotos figcaption,.tres figcaption,.mosaico figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:rgba(52,49,50,.88);color:#fff}

/* 4 glue gun: foto da garagem ao fundo, cobertura chapada */
.s-cola{position:relative;isolation:isolate;background:var(--ink) url("img/lifestyle-23-cdn-shop-files-img-3045-jpg.webp") center/cover;color:#fff;padding-block:112px}
.s-cola::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(52,49,50,.9)}
.s-cola .tag{background:transparent;color:#fff}
.s-cola .tag b{color:#9fe3e8}
.cola-txt{margin-bottom:44px}
.cola-txt blockquote{margin:0;max-width:78ch;font:italic 500 clamp(20px,2.2vw,26px)/1.55 "Lora",serif;color:#fff}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tres figure{aspect-ratio:4/5}

/* 5 today */
.s-today{padding-block:48px}
.duo.inv{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.mosaico{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:end}
.mosaico figure{aspect-ratio:3/4}
.mosaico figure:last-child{aspect-ratio:1/1;background:#f5f6f6}
.mosaico figure:last-child img{object-fit:contain}
.duo.inv .txt{position:sticky;top:24px}

/* 6 by-design */
.s-design .ttl{text-align:center}
.s-design .ttl p:not(.tag){margin-inline:auto}
.quatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.quatro img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px}
.quatro figcaption{padding-top:12px;font-size:14px}
.quatro figcaption b{display:block;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.quatro figcaption span{display:block}

/* 7 prints */
.s-prints{background:var(--cream)}
.pastilhas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 20px;text-align:center}
.pastilhas img{width:100%;max-width:200px;aspect-ratio:1/1;object-fit:cover;border-radius:50%;margin:0 auto 10px}
.pastilhas span{display:block;font-size:13px;font-weight:600;letter-spacing:.5px}

/* 8 velour */
.s-velour{background:var(--teal-deep);color:#fff}
.s-velour .tag{background:transparent;color:#fff}
.s-velour .tag b{color:#bff0f2}
.livro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.livro li{font-size:15px;line-height:1.6}
.livro h3{font-size:20px;margin-bottom:6px}
.livro p{margin-bottom:8px}
.livro .preco{font-weight:700;letter-spacing:1px;color:#bff0f2}
.livro .det{font-size:14px;color:#d5f1f2}
.cuidado{margin-top:40px;font-size:14px;color:#d5f1f2}

/* 9 tutu */
.oito{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.oito img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
.oito figcaption{padding-top:10px;font-size:13px;font-weight:600}

/* 10 note: faixa baixa e escura, texto à esquerda, foto no tamanho natural à direita */
.s-nota{--pad:max(clamp(16px,4vw,56px),calc((100vw - 1280px)/2));display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:center;padding:44px var(--pad);background:var(--ink);color:#fff}
.s-nota>*{max-width:none;margin-inline:0}
.s-nota .ttl{margin-bottom:0}
.s-nota .tag{background:transparent;color:#fff}
.s-nota .tag b{color:#9fe3e8}
.s-nota h2{font-size:clamp(32px,4.4vw,60px);line-height:1.05}
.s-nota .ttl p:not(.tag){max-width:56ch;font-size:18px;margin-bottom:0}
.nota-foto{aspect-ratio:16/10;overflow:hidden;border-radius:16px}
.nota-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* 11 vip */
.s-vip{background:var(--cream);padding-block:104px}

/* 12-13 textos em colunas */
.colunas{column-count:2;column-gap:56px;max-width:1100px}
.colunas h3{break-after:avoid;margin:0 0 8px;font-size:22px}
.colunas p{break-inside:avoid-column;margin-bottom:22px}
.s-keepsake{background:var(--teal-deep);color:#fff;padding-block:48px}
.s-keepsake .tag{background:transparent;color:#fff}
.s-keepsake .tag b{color:#bff0f2}
.s-keepsake .ttl{text-align:right}
.s-keepsake .colunas{margin-left:auto}

/* 14 night */
.s-night{background:var(--ink);color:#fff}
.s-night .tag{background:transparent;color:#fff}
.s-night .tag b{color:#9fe3e8}
.tres-col{column-count:3;column-gap:44px}
.tres-col h3{break-after:avoid;margin:0 0 8px;font-size:21px}
.tres-col p{break-inside:avoid-column;font-size:15px;margin-bottom:22px}

/* 15 app: texto e lista à esquerda, cartão com os celulares à direita */
.s-app{--pad:max(clamp(16px,4vw,56px),calc((100vw - 1280px)/2));background:var(--aqua);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:56px;align-items:center;padding-inline:var(--pad)}
.s-app>*{max-width:none;margin-inline:0}
.s-app .ttl{grid-column:1;grid-row:1;margin-bottom:28px}
.app-lista{grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.app-lista li{padding-left:30px;position:relative}
.app-lista li::before{content:"\2726";position:absolute;left:0;color:var(--teal)}
.cartao{grid-column:2;grid-row:1/3;padding:20px;border-radius:16px;background:#f5f5f3;border:1px solid #cfe9ea;text-align:center}
.cartao img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;margin:0 auto 14px;border-radius:8px}
.cartao p{margin:0;font-weight:600;font-size:14px}

/* 16 cta */
.cta-foto{position:relative;min-height:560px;overflow:hidden;border-radius:16px}
.cta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.cta-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:rgba(52,49,50,.88);color:#fff}
.s-cta{padding-block:128px}
.s-cta .duo{align-items:center}
.s-cta h2{max-width:20ch;font-size:clamp(32px,5vw,60px)}

@media (max-width:1100px){
  .livro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pastilhas{gap:24px 16px}
}
@media (max-width:900px){
  .duo,.duo.inv{grid-template-columns:minmax(0,1fr);gap:32px}
  .cta-foto{min-height:0;aspect-ratio:4/5}
  .s-app,.s-nota{grid-template-columns:minmax(0,1fr)}
  .s-app .ttl,.app-lista,.cartao{grid-column:1;grid-row:auto}
  .app-lista{margin-bottom:28px}
  .s-nota{gap:28px;padding-block:40px}
  .duo.inv .txt{position:static}
  .fotos{grid-template-rows:none;min-height:0}
  .fotos figure{aspect-ratio:4/3}
  .tres{grid-template-columns:minmax(0,1fr)}
  .quatro,.oito{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .pastilhas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .colunas,.tres-col{column-count:1}
  .s{padding-block:56px}
  .s-cola,.s-nota,.s-cta,.s-vip,.s-garage{padding-block:64px}
  .s-today,.s-keepsake{padding-block:40px}
  .s-nota{min-height:0}
}
@media (max-width:640px){
  .pacote-abas .longo{display:none}
  .pacote-abas .curto{display:inline}
  .pacote-abas a{padding:0 8px;font-size:11px;letter-spacing:.5px}
  .chat{padding:0 12px}
  .livro{grid-template-columns:minmax(0,1fr)}
  .s-keepsake .ttl{text-align:left}
}

/* diversidade (V7): fundos chapados alternando creme/aqua da referência e night abaixo de uma tela */
.s-tutu,.s-cta{background:var(--cream)}
.s-lovey{background:var(--aqua)}
@media (min-width:1000px){.s-night{padding-block:48px}}
