@font-face{font-family:'Fraunces';font-style:italic;font-weight:500 700;font-display:swap;src:url(fontes/fraunces-var-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url(fontes/fraunces-var-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/outfit-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(fontes/outfit-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/outfit-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root {
--linho: #F4EFE6; --argila: #C96442; --argila-escura: #A9502F; --argila-clara: #E8C4AE;
--salvia: #617C5F; --cacau: #2E2320; --creme: #FFF5DC; --brasa: #A5402E;
--papel: #FFFCF5;
--sombra-papel: drop-shadow(0 6px 10px rgba(46,35,32,.18));
--sombra-foto: drop-shadow(0 16px 24px rgba(46,35,32,.24));
--fr: 'Fraunces', Georgia, serif;
--ou: 'Outfit', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
main { overflow-x: clip; }
body {
margin: 0; min-width: 320px; overflow-x: clip;
font: 400 16px/1.5 var(--ou); color: var(--cacau);
background: var(--linho) url(img/papel-linho.webp) 0 0 / 562px auto repeat;
font-variant-numeric: lining-nums tabular-nums;
}
img { max-width: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
em { font-style: italic; }
a { color: var(--argila-escura); }
:focus-visible { outline: 3px solid var(--argila-escura); outline-offset: 3px; }
.folha { position: absolute; pointer-events: none; height: auto; filter: var(--sombra-papel); }
.titulo, .manchete, .virada__titulo, .grupo__titulo, .numeros dt, .selo, .assinatura {
font-family: var(--fr); font-weight: 600; font-optical-sizing: auto;
}
.titulo {
font-size: clamp(2.3rem, 9.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.022em;
font-variation-settings: 'opsz' 144, 'SOFT' 40;
}
.titulo--grande { font-size: clamp(2.6rem, 11vw, 6.6rem); line-height: .98; }
.linha { display: block; }
.titulo em, .manchete em { color: var(--argila); font-style: italic; font-weight: 600; font-variation-settings: 'opsz' 144, 'SOFT' 100; padding-right: .04em; }
.selo { display: inline-block; --r: -2.5deg; transform: rotate(var(--r)); filter: var(--sombra-papel); }
.selo span {
display: block; padding: 13px 26px 15px; white-space: nowrap;
background: url(img/selo-cacau.webp) center / 100% 100% no-repeat;
color: var(--creme); font-size: 21px; line-height: 1; letter-spacing: -.005em;
font-variation-settings: 'opsz' 72;
}
.selo em { color: #E07B57; font-weight: 600; }
.cabeca { display: none; }
.abertura { position: relative; }
.abertura__foto { position: relative; margin: 0; }
.abertura__img { display: block; width: 100%; height: auto; }
.folha--oliveira { display: none; }
.folha--flor { width: 92px; right: 6px; bottom: -34px; transform: rotate(14deg); z-index: 2; }
.aperitivo { display: none; }
.abertura__texto { position: relative; z-index: 1; padding: 0 16px 34px; margin-top: -28px; }
.manchete {
font-size: clamp(2rem, 9.1vw, 2.5rem); line-height: 1.01; letter-spacing: -.025em;
font-variation-settings: 'opsz' 144, 'SOFT' 30;
margin: 14px 0 10px; max-width: 13ch;
}
.promessa { font-size: 15px; line-height: 1.42; max-width: 36em; }
.promessa strong { font-weight: 600; }
.inscricao { margin-top: 14px; scroll-margin-top: 16px; }
.botao {
display: flex; align-items: center; justify-content: center; width: 100%;
min-height: 52px; margin-top: 10px; padding: 0 18px;
font: 600 15.5px/1.1 var(--ou); letter-spacing: .07em; color: var(--creme); text-decoration: none; text-align: center;
background: var(--argila-escura); border: 0; border-radius: 3px; cursor: pointer;
box-shadow: 0 4px 0 #7A361F, 0 10px 18px rgba(46,35,32,.18);
transition: transform .15s ease, box-shadow .15s ease, background-color .2s;
}
.botao:hover { background: #973F22; }
.botao:active { transform: translateY(3px); box-shadow: 0 1px 0 #7A361F, 0 4px 8px rgba(46,35,32,.16); }
.botao[aria-busy="true"] { opacity: .78; cursor: progress; }
.relatos { position: relative; padding: 84px 16px 72px; }
.relatos__cabeca { position: relative; max-width: 30em; }
.relatos__lide { margin-top: 14px; font-size: 16.5px; line-height: 1.5; }
.folha--pitanga { width: 92px; right: -22px; top: -126px; transform: rotate(-12deg); }
.mural { display: flex; flex-direction: column; margin-top: 30px; }
.mural__col { display: contents; }
.bilhete { position: relative; margin: 0; --r: 0deg; transform: rotate(var(--r)); filter: var(--sombra-papel); width: 95%; }
.bilhete + .bilhete, .mural__col + .mural__col .bilhete { margin-top: -4px; }
.bilhete--e { order: 1; --r: -1.4deg; }
.bilhete--a { order: 2; --r: 1.2deg; align-self: flex-end; }
.bilhete--b { order: 3; --r: -.8deg; }
.bilhete--c { order: 4; --r: 1.6deg; align-self: flex-end; }
.bilhete--d { order: 5; --r: -1.2deg; }
.bilhete--f { order: 6; --r: .9deg; align-self: flex-end; }
.mural > * > .bilhete, .mural > .bilhete { margin-bottom: 18px; }
.bilhete__papel {
padding: 26px 22px 26px;
background: linear-gradient(rgba(255,252,245,.9), rgba(255,252,245,.9)), url(img/papel-linho.webp) center / 280px auto;
font-size: 16px; line-height: 1.5;
}
.bilhete__papel p + p { margin-top: 4px; }
.bilhete__quem { font-size: 13.5px; color: rgba(46,35,32,.72); }
.bilhete__hora { color: rgba(46,35,32,.6); font-size: 14px; white-space: nowrap; }
.tarja { display: inline-block; width: 7.2em; height: 1.1em; vertical-align: -.2em; margin-right: 2px; background: #2A2422; border-radius: 2px; }
.bilhete::before {
content: ''; position: absolute; z-index: 1; top: -13px; left: 50%; width: 104px; height: 30px;
background: url(img/fita.webp) center / 100% 100% no-repeat; opacity: .94;
transform: translateX(-50%) rotate(-3deg);
}
.bilhete--a::before, .bilhete--d::before { left: 18px; transform: rotate(-28deg); top: -8px; }
.bilhete--c::before, .bilhete--f::before { left: auto; right: 4px; transform: rotate(24deg); top: -8px; }
.virada { position: relative; z-index: 1; background: var(--cacau); color: var(--creme); padding: 64px 16px 72px; margin: 40px 0 36px; }
.virada::before, .virada::after { content: ''; position: absolute; left: 0; right: 0; height: 52px; background-size: 1600px 100%; background-repeat: repeat-x; pointer-events: none; }
.virada::before { top: -51px; background-image: url(img/rasgo-cacau-topo.webp); }
.virada::after { bottom: -51px; background-image: url(img/rasgo-cacau-base.webp); }
.virada__titulo {
font-size: clamp(2.35rem, 10.4vw, 5.8rem); line-height: 1.0; letter-spacing: -.025em;
font-variation-settings: 'opsz' 144, 'SOFT' 40; color: var(--creme);
}
.virada__titulo span { display: block; }
.virada__titulo span:first-child { color: var(--argila-clara); }
.virada__titulo em { color: #E07B57; font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.virada__texto p:not(.virada__titulo) { margin-top: 18px; font-size: 17px; line-height: 1.55; color: rgba(255,245,220,.9); max-width: 32em; }
.virada__texto p.virada__fecho { font-family: var(--fr); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--creme); font-variation-settings: 'opsz' 72; }
.virada__placa { position: relative; margin: 40px auto 0; width: 84%; max-width: 440px; --r: 2.4deg; transform: rotate(var(--r)); filter: drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
.virada__placa img { display: block; width: 100%; height: auto; }
.virada__placa::before { content: ''; position: absolute; z-index: 1; top: -12px; left: 50%; width: 120px; height: 34px; background: url(img/fita.webp) center / 100% 100% no-repeat; transform: translateX(-50%) rotate(4deg); }
.acervo { position: relative; padding: 76px 16px 24px; }
.acervo-fundo { position: relative; background: var(--argila-clara); margin: 70px 0 56px; }
.acervo-fundo::before, .acervo-fundo::after { content: ''; position: absolute; left: 0; right: 0; height: 52px; background-size: 1600px 100%; background-repeat: repeat-x; pointer-events: none; }
.acervo-fundo::before { top: -51px; background-image: url(img/rasgo-argila-topo.webp); }
.acervo-fundo::after { bottom: -51px; background-image: url(img/rasgo-argila-base.webp); }
.acervo-fundo .acervo { padding-bottom: 56px; }
.acervo__cabeca { position: relative; max-width: 60rem; }
.acervo__lide { margin-top: 16px; font-size: 17px; line-height: 1.55; max-width: 31em; }
.folha--laranjeira { width: 118px; right: -24px; top: -128px; transform: rotate(16deg); }
.grupo { margin-top: 44px; padding-top: 18px; border-top: 2px solid var(--cacau); }
.grupo__titulo { display: flex; align-items: flex-end; gap: 12px; font-size: 27px; line-height: 1.04; letter-spacing: -.015em; font-variation-settings: 'opsz' 96; margin-bottom: 20px; }
.grupo__n { font-style: italic; font-size: 72px; line-height: .78; color: var(--argila-escura); font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.grupo__nome em { color: var(--argila-escura); font-style: italic; font-variation-settings: 'opsz' 96, 'SOFT' 100; }
.quem { position: relative; padding: 72px 16px 40px; }
.quem__foto { position: relative; margin: 0 auto 36px; width: 80%; max-width: 420px; --r: -2deg; transform: rotate(var(--r)); }
.quem__foto > img:first-child { display: block; width: 100%; height: auto; filter: var(--sombra-foto); }
.folha--alecrim { width: 140px; right: -60px; bottom: 30px; transform: rotate(38deg); }
.quem__texto > p { margin-top: 16px; font-size: 17px; line-height: 1.55; max-width: 32em; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.numeros > div { border-top: 2px solid var(--argila); padding-top: 10px; }
.numeros dt { font-size: 30px; line-height: 1; letter-spacing: -.02em; font-variation-settings: 'opsz' 144; }
.numeros dd { margin-top: 6px; font-size: 13px; line-height: 1.35; }
.selo--pequeno span { font-size: 19px; padding: 11px 22px 13px; }
[data-contagem-fim] { display: none; }
.botao--link { display: inline-flex; width: auto; min-width: min(100%, 360px); margin-top: 28px; }
.assinatura { margin-top: 30px; font-style: italic; font-weight: 500; font-size: 30px; color: var(--argila-escura); font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.gota { position: absolute; right: -14px; bottom: 18px; width: 96px; height: auto; transform: rotate(12deg); filter: var(--sombra-papel); pointer-events: none; }
.rodape { padding: 22px 16px 36px; text-align: center; font-size: 13px; color: rgba(46,35,32,.75); }
@media (max-width: 359px) { .botao { font-size: 14px; letter-spacing: .03em; padding: 0 10px; } .selo span { font-size: 19px; } }
@media (max-width: 959px) and (max-height: 620px) {
.abertura__img { height: 118px; object-fit: cover; object-position: 50% 12%; }
.folha--flor { width: 70px; bottom: -22px; }
.manchete { font-size: 1.85rem; margin-top: 10px; }
.promessa { font-size: 14px; }
}
.rasgo-1 { clip-path: polygon(0.0% 1.2%, 1.5% 0.1%, 4.3% 1.7%, 6.1% 0.7%, 9.1% 1.8%, 10.7% 0.7%, 13.6% 2.9%, 16.2% 1.1%, 17.5% 2.1%, 19.3% 2.0%, 22.2% 1.1%, 24.3% 0.4%, 25.6% 0.1%, 27.9% 1.0%, 29.4% 0.9%, 31.2% 0.8%, 33.5% 2.1%, 35.2% 1.7%, 37.0% 0.4%, 39.6% 2.0%, 42.7% 0.0%, 45.5% 0.9%, 48.3% 0.6%, 49.8% 0.8%, 51.0% 0.1%, 53.0% 2.2%, 55.0% 0.5%, 56.5% 1.6%, 58.7% 0.5%, 61.0% 1.7%, 63.1% 0.5%, 65.2% 0.5%, 67.4% 0.1%, 69.0% 0.5%, 70.3% 2.0%, 72.3% 2.0%, 75.0% 1.4%, 77.9% 2.0%, 80.4% 1.8%, 82.7% 1.4%, 85.7% 3.7%, 88.9% 2.9%, 90.3% 2.1%, 91.9% 1.4%, 94.9% 2.0%, 96.1% 3.2%, 98.9% 1.9%, 100.0% 1.0%, 99.8% 8.0%, 99.4% 17.0%, 99.5% 26.0%, 99.7% 35.0%, 99.6% 44.0%, 100.0% 53.0%, 100.0% 62.0%, 99.6% 71.0%, 99.7% 80.0%, 99.4% 89.0%, 99.6% 98.0%, 100.0% 99.7%, 97.8% 100.0%, 96.4% 98.7%, 94.6% 99.4%, 93.2% 99.7%, 90.9% 99.0%, 89.6% 97.9%, 86.7% 99.0%, 83.8% 98.8%, 81.9% 98.7%, 80.7% 99.3%, 78.1% 98.4%, 75.2% 99.1%, 72.7% 98.4%, 69.7% 98.9%, 66.8% 98.1%, 65.3% 98.1%, 63.8% 98.5%, 62.3% 97.8%, 60.4% 97.9%, 57.3% 99.6%, 55.5% 98.4%, 52.6% 98.1%, 51.1% 98.6%, 48.0% 98.2%, 45.5% 98.4%, 42.7% 99.3%, 40.3% 97.8%, 38.6% 99.2%, 35.6% 99.0%, 33.8% 98.7%, 31.6% 98.3%, 28.5% 98.5%, 25.3% 97.6%, 23.5% 99.8%, 20.4% 97.9%, 18.8% 99.3%, 16.0% 98.4%, 14.2% 98.7%, 13.0% 99.1%, 9.8% 99.3%, 7.1% 98.4%, 4.5% 98.7%, 2.2% 98.8%, 0.0% 99.8%, 0.0% 99.4%, 0.5% 92.0%, 0.6% 83.0%, 0.2% 74.0%, 0.3% 65.0%, 0.3% 56.0%, 0.0% 47.0%, 0.6% 38.0%, 0.0% 29.0%, 0.7% 20.0%, 0.1% 11.0%, 0.1% 2.0%); }
.rasgo-2 { clip-path: polygon(0.0% 0.5%, 2.6% 0.2%, 4.2% 1.4%, 6.4% 0.4%, 8.1% 0.0%, 11.1% 1.2%, 14.3% 0.1%, 16.8% 0.7%, 19.3% 2.0%, 20.6% 2.1%, 23.7% 1.3%, 25.5% 0.8%, 28.2% 0.2%, 31.3% 1.9%, 32.8% 1.2%, 35.8% 1.1%, 37.5% 0.0%, 39.6% 0.8%, 41.1% 0.9%, 44.3% 0.4%, 45.5% 1.7%, 47.6% 0.5%, 49.6% 1.3%, 51.0% 0.2%, 53.8% 1.1%, 55.1% 0.7%, 57.5% 1.6%, 58.7% 1.8%, 59.9% 2.1%, 62.3% 0.4%, 63.6% 1.3%, 65.2% 0.3%, 66.6% 1.0%, 68.8% 0.9%, 70.3% 2.1%, 73.0% 1.9%, 75.0% 0.2%, 77.2% 1.6%, 79.5% 1.6%, 81.9% 2.0%, 85.1% 0.5%, 88.2% 0.8%, 90.5% 1.4%, 92.3% 1.9%, 95.4% 1.9%, 97.8% 1.9%, 100.0% 1.2%, 99.6% 8.0%, 99.7% 17.0%, 99.7% 26.0%, 99.7% 35.0%, 99.6% 44.0%, 99.4% 53.0%, 99.8% 62.0%, 100.0% 71.0%, 99.5% 80.0%, 99.8% 89.0%, 99.7% 98.0%, 100.0% 99.7%, 98.2% 98.1%, 95.2% 99.0%, 92.5% 98.2%, 90.1% 98.0%, 87.3% 99.1%, 84.1% 97.8%, 81.7% 97.6%, 78.7% 97.8%, 76.3% 97.9%, 75.0% 97.8%, 73.1% 98.0%, 70.7% 99.2%, 68.9% 97.6%, 67.0% 99.6%, 64.9% 97.8%, 63.1% 99.6%, 61.8% 98.7%, 59.5% 99.2%, 57.3% 98.6%, 54.3% 99.7%, 52.7% 96.8%, 50.4% 98.5%, 48.0% 97.8%, 44.8% 98.8%, 42.6% 99.3%, 41.1% 98.0%, 38.9% 97.8%, 36.6% 98.2%, 35.2% 98.5%, 32.1% 99.2%, 30.6% 98.1%, 28.2% 99.7%, 25.8% 96.1%, 24.5% 98.6%, 22.6% 97.7%, 21.0% 99.4%, 19.1% 98.1%, 17.8% 99.7%, 16.0% 99.9%, 14.0% 98.7%, 11.3% 98.1%, 9.6% 98.0%, 7.5% 98.5%, 5.6% 98.6%, 3.2% 98.9%, 0.9% 98.3%, 0.0% 99.9%, 0.6% 92.0%, 0.5% 83.0%, 0.2% 74.0%, 0.4% 65.0%, 0.2% 56.0%, 0.6% 47.0%, 0.1% 38.0%, 0.1% 29.0%, 0.0% 20.0%, 0.5% 11.0%, 0.1% 2.0%); }
.rasgo-3 { clip-path: polygon(0.0% 3.3%, 1.5% 3.6%, 4.1% 1.9%, 6.0% 1.6%, 7.6% 1.9%, 9.3% 2.0%, 11.4% 1.8%, 13.3% 1.3%, 15.3% 1.9%, 18.4% 0.3%, 21.5% 1.5%, 23.7% 2.1%, 25.0% 1.0%, 27.0% 1.1%, 28.9% 0.5%, 30.7% 2.0%, 32.0% 2.0%, 33.5% 1.1%, 36.5% 1.6%, 39.5% 2.1%, 41.7% 2.2%, 44.6% 1.3%, 47.0% 1.5%, 48.2% 0.7%, 50.1% 1.4%, 51.9% 1.8%, 54.9% 0.0%, 56.9% 1.5%, 60.0% 0.7%, 61.9% 0.7%, 63.7% 0.1%, 66.4% 0.2%, 68.3% 2.1%, 70.2% 1.6%, 73.2% 0.9%, 75.9% 0.3%, 78.4% 1.3%, 80.4% 0.5%, 81.8% 1.2%, 84.4% 1.7%, 87.6% 1.5%, 89.1% 0.6%, 92.1% 1.5%, 94.6% 0.5%, 97.2% 1.2%, 98.7% 2.6%, 100.0% 1.3%, 99.7% 8.0%, 99.6% 17.0%, 99.6% 26.0%, 99.7% 35.0%, 99.7% 44.0%, 99.7% 53.0%, 99.6% 62.0%, 99.7% 71.0%, 99.7% 80.0%, 99.4% 89.0%, 99.3% 98.0%, 100.0% 99.4%, 98.1% 97.8%, 94.9% 98.5%, 92.8% 98.9%, 90.0% 99.0%, 88.5% 97.7%, 85.4% 98.6%, 83.7% 98.2%, 81.1% 98.4%, 79.0% 99.6%, 77.6% 97.9%, 75.2% 97.8%, 73.6% 99.6%, 71.0% 98.1%, 68.6% 98.0%, 66.2% 99.0%, 63.4% 99.2%, 61.5% 98.2%, 59.8% 98.4%, 58.5% 98.3%, 56.8% 99.4%, 55.1% 98.1%, 52.9% 98.4%, 50.6% 98.1%, 48.2% 96.8%, 46.5% 99.2%, 44.1% 98.6%, 41.6% 97.8%, 38.7% 97.9%, 36.7% 99.8%, 35.2% 97.9%, 32.8% 98.1%, 30.9% 97.8%, 29.1% 97.7%, 27.8% 97.9%, 25.0% 98.8%, 22.8% 99.1%, 19.6% 97.7%, 17.1% 97.5%, 15.5% 97.8%, 12.5% 98.2%, 10.8% 99.6%, 8.7% 98.2%, 6.2% 99.1%, 3.5% 98.2%, 0.5% 97.1%, 0.0% 99.8%, 0.4% 92.0%, 0.3% 83.0%, 0.1% 74.0%, 0.3% 65.0%, 0.5% 56.0%, 0.1% 47.0%, 0.5% 38.0%, 0.5% 29.0%, 0.6% 20.0%, 0.7% 11.0%, 0.6% 2.0%); }
@media (min-width: 600px) and (max-width: 959px) {
.abertura__texto, .relatos, .acervo, .quem { padding-left: 32px; padding-right: 32px; }
.mural .bilhete { width: 82%; }
}
@media (min-width: 960px) {
.cabeca {
display: flex; justify-content: space-between; align-items: baseline;
max-width: 1328px; margin: 0 auto; padding: 22px 56px 14px;
font: 500 13px/1 var(--ou); letter-spacing: .08em; text-transform: uppercase;
position: relative;
}
.cabeca::after { content: ''; position: absolute; left: 56px; right: 56px; bottom: -1px; border-bottom: 1.5px solid var(--cacau); }
.cabeca__marca { font-family: var(--fr); font-size: 21px; font-weight: 600; letter-spacing: -.01em; text-transform: none; font-variation-settings: 'opsz' 72; }
.abertura {
display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center;
max-width: 1328px; margin: 0 auto; padding: 36px 56px 72px; min-height: min(calc(100vh - 58px), 900px);
}
.abertura__texto { grid-column: 1; grid-row: 1; margin: 0; padding: 0; }
.abertura__foto { grid-column: 2; grid-row: 1; justify-self: center; width: 100%; max-width: 520px; isolation: isolate; }
.abertura__img { --r: 2.2deg; transform: rotate(var(--r)); filter: var(--sombra-foto); }
.folha--oliveira { display: block; width: 220px; left: -92px; top: -58px; transform: rotate(-24deg); z-index: 2; }
.folha--flor { width: 150px; right: -48px; bottom: 96px; transform: rotate(18deg); }
.abertura__foto::before {
content: ''; position: absolute; z-index: -1; left: -16%; top: 9%; width: 82%; aspect-ratio: 1;
background: url(img/bloco-argila-clara.webp) center / contain no-repeat; transform: rotate(-7deg);
filter: var(--sombra-papel);
}
.abertura__foto picture { position: relative; z-index: 0; display: block; }
.aperitivo { display: block; position: absolute; left: -64px; bottom: -40px; width: 290px; z-index: 3; --r: -4deg; transform: rotate(var(--r)); filter: var(--sombra-papel); }
.aperitivo__papel { padding: 18px 18px 20px; font-size: 14px; line-height: 1.45; background: var(--papel); }
.aperitivo::before { content: ''; position: absolute; z-index: 1; top: -12px; left: 40%; width: 96px; height: 28px; background: url(img/fita.webp) center / 100% 100% no-repeat; transform: rotate(-6deg); }
.selo span { font-size: 29px; padding: 17px 36px 20px; }
.manchete { font-size: clamp(3.6rem, 5.35vw, 5.5rem); line-height: .98; margin: 22px 0 22px; max-width: 12.5ch; }
.promessa { font-size: 19px; line-height: 1.5; max-width: 30em; }
.inscricao { margin-top: 26px; max-width: 600px; }
.botao { min-height: 58px; font-size: 16px; margin-top: 14px; }
.relatos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; max-width: 1328px; margin: 0 auto; padding: 96px 56px 140px; }
.relatos__cabeca { grid-column: 1 / 5; align-self: start; position: relative; }
.relatos__cabeca .titulo { font-size: clamp(3.4rem, 5vw, 4.9rem); }
.relatos__lide { font-size: 18px; }
.folha--pitanga { width: 190px; right: auto; left: 30%; top: auto; bottom: -230px; transform: rotate(-8deg); }
.mural { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 0; align-items: start; }
.mural__col { display: flex; flex-direction: column; gap: 30px; }
.mural__col--b { padding-top: 110px; }
.mural .bilhete, .mural .bilhete + .bilhete { width: 100%; margin: 0; align-self: auto; }
.bilhete__papel { padding: 30px 28px 30px; font-size: 16.5px; }
.bilhete--e .bilhete__papel { font-size: 17.5px; }
.bilhete--f { margin-left: 28px !important; width: calc(100% - 28px) !important; }
.virada { padding: 120px 56px 130px; margin: 60px 0 40px; }
.virada__grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 72px; align-items: center; max-width: 1216px; margin: 0 auto; }
.virada__titulo { font-size: clamp(4.2rem, 6.4vw, 6.4rem); }
.virada__texto p:not(.virada__titulo) { font-size: 19px; }
.virada__texto p.virada__fecho { font-size: 27px; margin-top: 26px; }
.virada__grade { align-items: start; }
.virada__texto { padding-top: 10px; }
.virada__placa { width: 100%; margin: -190px 0 -40px; }
.acervo { max-width: 1328px; margin: 0 auto; padding: 120px 56px 30px; }
.acervo-fundo { margin: 110px 0 70px; }
.acervo-fundo .acervo { padding-bottom: 110px; }
.acervo__cabeca { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 48px; align-items: end; max-width: none; }
.acervo__lide { font-size: 19px; margin: 0 0 14px; }
.folha--laranjeira { width: 230px; right: -30px; top: -190px; }
.grupo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; margin-top: 72px; padding-top: 26px; }
.grupo__titulo { grid-column: 1 / 5; align-self: start; position: sticky; top: 40px; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 40px; margin: 0; }
.grupo__n { font-size: 120px; }
.folha--alecrim { width: 230px; right: auto; left: -110px; bottom: -40px; transform: rotate(-32deg); }
.quem__texto .titulo { font-size: clamp(3rem, 4.6vw, 4.5rem); }
.quem__texto > p { font-size: 19px; }
.numeros { gap: 30px; margin-top: 40px; }
.numeros dt { font-size: 60px; }
.numeros dd { font-size: 15px; margin-top: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
.abertura .selo { animation: pousa .8s cubic-bezier(.2,.75,.25,1) .1s both; }
@media (min-width: 960px) {
.abertura__img { animation: pousa-foto 1.1s cubic-bezier(.2,.75,.25,1) both; }
.aperitivo { animation: pousa .9s cubic-bezier(.2,.75,.25,1) .55s both; }
}
@keyframes pousa { from { opacity: 0; transform: translateY(-10px) rotate(calc(var(--r) - 5deg)) scale(1.06); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes pousa-foto { from { transform: rotate(calc(var(--r) + 3deg)) scale(1.04); } to { transform: rotate(var(--r)); } }
html.anima .pousou { animation: pousa-papel .85s cubic-bezier(.2,.75,.25,1) backwards; }
@keyframes pousa-papel { from { transform: translateY(34px) rotate(calc(var(--r, 0deg) + 4deg)) scale(1.05); } to { transform: rotate(var(--r, 0deg)); } }
@supports (animation-timeline: view()) {
.relatos .folha, .acervo .folha, .quem .folha, .gota { animation: deriva linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
@keyframes deriva { from { translate: 0 36px; rotate: -5deg; } to { translate: 0 -36px; rotate: 5deg; } }
}
}
.relatos__placa { display: none; }
.grupo__cabeca { position: relative; }
.indice { list-style: none; counter-reset: none; display: grid; gap: 2px; margin-top: 6px; }
.indice li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.indice__nome { flex: 0 1 auto; }
.indice__pontos { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted rgba(46,35,32,.42); transform: translateY(-4px); }
.indice__n { flex: none; font-family: var(--fr); font-style: italic; font-weight: 600; font-size: 20px; color: var(--argila-escura); font-variation-settings: 'opsz' 72; }
.leque { position: relative; aspect-ratio: 100 / 136; margin: 26px 0 6px; }
.leque--seis { aspect-ratio: 100 / 108; }
.leque img {
position: absolute; left: var(--mx); top: var(--my); width: var(--mw); height: auto; z-index: var(--z, 1);
--r: 0deg; transform: rotate(var(--r)); transform-origin: 50% 70%;
border: 5px solid var(--papel); border-radius: 2px;
box-shadow: 0 10px 14px rgba(46,35,32,.3), 0 1px 2px rgba(46,35,32,.3);
transition: transform .35s cubic-bezier(.2,.75,.25,1), box-shadow .35s;
}
.convite { position: relative; overflow: hidden; padding: 84px 16px 96px; }
.convite__canto { position: absolute; left: -10px; top: -10px; width: 150px; height: auto; pointer-events: none; }
.convite__corpo { position: relative; }
.convite__titulo { margin-top: 22px; font-size: clamp(3.1rem, 15vw, 9.4rem); line-height: .92; letter-spacing: -.035em; }
.convite__texto { margin-top: 18px; font-size: 17.5px; line-height: 1.55; max-width: 26em; }
.convite__placa { position: relative; margin: 34px auto 0; width: 82%; max-width: 420px; --r: 3deg; transform: rotate(var(--r)); }
.convite__placa > img:first-child { display: block; width: 100%; height: auto; filter: var(--sombra-foto); }
.convite__placa::before { content: ''; position: absolute; z-index: 1; top: -12px; left: 50%; width: 120px; height: 32px; background: url(img/fita.webp) center / 100% 100% no-repeat; transform: translateX(-50%) rotate(-5deg); }
.folha--laranjeira-b { width: 130px; left: -48px; bottom: -36px; transform: rotate(-18deg); }
.convite__acao { position: relative; margin-top: 34px; }
.botao--link { display: flex; width: 100%; margin-top: 22px; }
.gota { position: absolute; right: -14px; bottom: 18px; width: 90px; height: auto; transform: rotate(12deg); filter: var(--sombra-papel); pointer-events: none; }
@media (min-width: 600px) and (max-width: 959px) {
.leque { max-width: 520px; margin-left: auto; margin-right: auto; }
.convite { padding-left: 32px; padding-right: 32px; }
.botao--link { width: auto; display: inline-flex; min-width: 420px; }
}
@media (min-width: 960px) {
.relatos__placa { display: block; position: relative; width: 74%; max-width: 300px; margin: 44px 0 0 6%; --r: -3deg; transform: rotate(var(--r)); }
.relatos__placa img { display: block; width: 100%; height: auto; filter: var(--sombra-foto); }
.relatos__placa::before { content: ''; position: absolute; z-index: 1; top: -12px; left: 50%; width: 100px; height: 28px; background: url(img/fita.webp) center / 100% 100% no-repeat; transform: translateX(-50%) rotate(4deg); }
.relatos__placa figcaption { margin-top: 14px; font-family: var(--fr); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.2; font-variation-settings: 'opsz' 72; color: var(--argila-escura); }
.folha--pitanga { width: 160px; left: auto; right: 0; top: auto; bottom: 40px; }
.grupo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; align-items: start; margin-top: 64px; padding-top: 30px; }
.grupo__cabeca { grid-column: 1 / 6; position: sticky; top: 40px; }
.grupo__titulo { position: static; font-size: 46px; margin-bottom: 22px; }
.grupo__n { font-size: 150px; }
.leque { grid-column: 6 / 13; margin: 0; max-width: none; aspect-ratio: 100 / 64; }
.leque--seis { aspect-ratio: 100 / 98; }
.leque img { left: var(--x); top: var(--y); width: 26.5%; }
.grupo--inverso .grupo__cabeca { grid-column: 8 / 13; grid-row: 1; }
.grupo--inverso .leque { grid-column: 1 / 8; grid-row: 1; }
.indice li { font-size: 17.5px; padding: 9px 0; }
.indice__n { font-size: 24px; }
.quem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 130px 56px 80px; }
.quem__foto { width: 100%; max-width: 560px; margin: 0; justify-self: end; isolation: isolate; }
.quem__foto::before { content: ''; position: absolute; z-index: -1; right: -9%; top: 14%; width: 74%; aspect-ratio: 1; background: url(img/bloco-argila-clara.webp) center / contain no-repeat; transform: rotate(8deg); filter: var(--sombra-papel); }
.convite { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "corpo placa" "acao placa"; column-gap: 80px; align-items: end; max-width: 1328px; margin: 0 auto; padding: 130px 56px 150px; overflow: visible; }
.convite__canto { width: 280px; left: -40px; top: 10px; }
.convite__corpo { grid-area: corpo; }
.convite__titulo { font-size: clamp(6.4rem, 10vw, 10rem); }
.convite__texto { font-size: 21px; max-width: 24em; }
.convite__placa { grid-area: placa; align-self: center; width: 100%; max-width: 500px; margin: 0; justify-self: end; }
.convite__acao { grid-area: acao; align-self: start; margin-top: 36px; }
.botao--link { display: inline-flex; width: auto; min-width: 470px; margin-top: 28px; }
.assinatura { font-size: 38px; }
.folha--laranjeira-b { width: 220px; left: -110px; bottom: -60px; }
.gota { width: 120px; right: auto; left: 46%; bottom: 60px; }
}
@media (prefers-reduced-motion: no-preference) {
.mural__col .bilhete:nth-child(2).pousou, .leque img:nth-child(2).pousou, .numeros > div:nth-child(2).pousou { animation-delay: .08s; }
.mural__col .bilhete:nth-child(3).pousou, .leque img:nth-child(3).pousou, .numeros > div:nth-child(3).pousou { animation-delay: .16s; }
.leque img:nth-child(4).pousou { animation-delay: .22s; } .leque img:nth-child(5).pousou { animation-delay: .28s; } .leque img:nth-child(6).pousou { animation-delay: .34s; }
}
@media (prefers-reduced-motion: reduce) { .leque img { transition: none; } }
.leque img:focus-visible { outline: 3px solid var(--cacau); outline-offset: 3px; }
.leque img { cursor: pointer; }
.leque img.ativo { z-index: 9; box-shadow: 0 20px 26px rgba(46,35,32,.44), 0 2px 3px rgba(46,35,32,.3); }
@media (prefers-reduced-motion: no-preference) {
.leque img.ativo { transform: rotate(0deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.leque img { transition: none; }
}
.quem__texto { position: relative; z-index: 1; }
.rodape a { color: inherit; text-underline-offset: 2px; }
@media (min-width: 960px) {
.promessa { font-size: 20px; }
.botao { font-size: 17px; }
.aperitivo__papel { font-size: 17px; }
.cabeca { font-size: 14px; }
.relatos__lide { font-size: 20px; line-height: 1.5; }
.bilhete__papel { font-size: 17.5px; line-height: 1.55; }
.bilhete--e .bilhete__papel { font-size: 17.5px; }
.bilhete__quem { font-size: 16px; }
.bilhete__hora { font-size: 16px; }
.relatos__placa figcaption { font-size: 24px; }
.virada__texto p:not(.virada__titulo) { font-size: 21px; line-height: 1.55; }
.virada__texto p.virada__fecho { font-size: 30px; }
.acervo { padding-top: 130px; }
.acervo-fundo .acervo { padding-bottom: 150px; }
.acervo__lide { font-size: 23px; line-height: 1.5; margin-bottom: 18px; }
.grupo { margin-top: 96px; padding-top: 36px; }
.grupo__cabeca { grid-column: 1 / 6; }
.grupo--inverso .grupo__cabeca { grid-column: 7 / 13; }
.grupo--inverso .leque { grid-column: 1 / 7; }
.grupo__titulo { font-size: 54px; line-height: 1.04; margin-bottom: 30px; gap: 14px; }
.grupo__n { font-size: 180px; }
.indice { gap: 4px; }
.indice li { font-size: 21px; line-height: 1.3; padding: 11px 0; gap: 12px; }
.indice__n { font-size: 32px; }
.indice__pontos { transform: translateY(-5px); }
.quem__texto > p { font-size: 22px; line-height: 1.55; }
.numeros dt { font-size: 64px; }
.numeros dd { font-size: 17px; line-height: 1.4; }
.convite__texto { font-size: 23px; }
.rodape { font-size: 16px; }
}
@media (min-width: 960px) { .leque { align-self: center; } .grupo__cabeca { align-self: start; } }
@media (min-width: 960px) {
.cabeca { font-size: 15px; }
}
@media (min-width: 960px) {
.cabeca { font-size: 17px; }
.acervo { max-width: 1760px; padding-left: 40px; padding-right: 40px; padding-top: 140px; }
.acervo-fundo .acervo { padding-bottom: 170px; }
.acervo__cabeca { max-width: 1500px; margin: 0 auto; }
.acervo__lide { font-size: clamp(23px, 1.7vw, 30px); line-height: 1.5; }
.estante { max-width: 1680px; margin: 0 auto; }
.grupo { margin-top: 110px; padding-top: 44px; column-gap: 40px; align-items: center; }
.grupo__cabeca { grid-column: 1 / 7; align-self: center; }
.grupo--inverso .grupo__cabeca { grid-column: 7 / 13; }
.leque { grid-column: 7 / 13; }
.grupo--inverso .leque { grid-column: 1 / 7; }
.leque img { width: 28%; }
.grupo__titulo { font-size: clamp(52px, 3.9vw, 72px); margin-bottom: 36px; gap: 18px; }
.grupo__n { font-size: clamp(170px, 12.5vw, 230px); }
.indice { gap: 12px; margin-top: 0; }
.indice li { font: 500 clamp(30px, 2.25vw, 40px)/1.25 var(--ou); padding: 11px 0; gap: 14px; letter-spacing: -.005em; }
.indice__n { font-size: clamp(42px, 3vw, 54px); line-height: 1; }
.indice__pontos { border-bottom-width: 3px; transform: translateY(-7px); }
.relatos__lide { font-size: 22px; }
.bilhete__papel, .bilhete--e .bilhete__papel { font-size: 18.5px; }
.aperitivo__papel { font-size: 18px; }
.virada__texto p:not(.virada__titulo) { font-size: 22px; }
.numeros dd { font-size: 19px; }
.convite__texto { font-size: 24px; }
.botao { font-size: 18px; }
}
.chamada { position: relative; text-align: center; margin: 56px auto 8px; padding: 0 4px; max-width: 460px; }
.chamada::before {
content: ''; position: absolute; z-index: -1; left: -7%; right: -7%; top: -26px; bottom: -22px;
background: rgba(255,252,245,.62); clip-path: polygon(0 3%, 6% 0, 14% 2.5%, 24% 0, 36% 3%, 48% 0, 60% 2.5%, 72% 0, 84% 3%, 94% 0, 100% 3%, 99% 20%, 100% 38%, 98.6% 56%, 100% 74%, 99% 92%, 100% 98%, 90% 100%, 78% 97%, 66% 100%, 52% 97.5%, 40% 100%, 28% 97%, 16% 100%, 6% 98%, 0 100%, 1% 80%, 0 62%, 1.2% 44%, 0 26%, 1% 12%);
}
.chamada { isolation: isolate; }
.chamada .botao--link { display: flex; width: 100%; min-width: 0; margin-top: 0; }
.chamada__nota { margin-top: 14px; font-size: 14.5px; line-height: 1.4; color: rgba(46,35,32,.82); }
.chamada--meio { margin: 38px auto 30px; order: 4; }
.chamada--fim-relatos { margin: 64px auto 0; }
.virada__chamada { margin-top: 56px; }
.virada .chamada::before { background: rgba(244,239,230,.1); }
.virada .chamada__nota { color: rgba(255,245,220,.88); }
.acervo .chamada { margin: 84px auto 0; }
.acervo-fundo .chamada::before { background: rgba(255,245,220,.5); }
.bilhete--c { order: 5; } .bilhete--d { order: 6; } .bilhete--f { order: 7; }
@media (min-width: 960px) {
.chamada { max-width: 560px; margin-top: 90px; }
.chamada__nota { font-size: 17px; margin-top: 16px; }
.chamada .botao--link { min-height: 64px; font-size: 18px; }
.chamada--meio { margin: 30px auto 6px; max-width: none; }
.chamada--fim-relatos { grid-column: 1 / -1; margin: 100px auto 0; }
.virada__chamada { max-width: 1216px; margin: 80px auto 0; display: flex; justify-content: flex-start; }
.virada__chamada .chamada { margin: 0; }
.acervo .chamada { margin-top: 110px; max-width: 620px; }
}
.acervo-fundo .chamada--acervo-meio { margin: 64px auto 0; }
@media (min-width: 960px) { .acervo-fundo .chamada--acervo-meio { margin: 90px auto 0; max-width: 560px; } }
@media (max-width: 959px) {
.relatos { display: flex; flex-direction: column; }
.relatos__cabeca, .mural { display: contents; }
.relatos__cabeca > .titulo, .relatos__lide { max-width: 30em; width: 100%; }
.bilhete--e { margin-top: 30px; }
.folha--pitanga { top: -42px; }
.chamada--fim-relatos { order: 99; }
}
@media (min-width: 960px) {
.relatos__cabeca .chamada--meio { order: 4; max-width: 384px; margin: 52px 0 0; text-align: left; padding: 0; }
.relatos__cabeca .chamada--meio::before { left: -14px; right: -14px; }
.relatos__cabeca .chamada--meio .chamada__nota { text-align: left; }
.relatos { padding-bottom: 150px; }
.chamada--fim-relatos { margin-top: 200px; }
}
.oferta-valor{margin:20px 0 16px}.oferta-condicao{font-size:15px;font-weight:600;letter-spacing:.025em;color:var(--argila-escura)}.oferta-preco{font:600 clamp(2.8rem,8vw,4.2rem)/1.1 var(--fr);color:var(--argila-escura);letter-spacing:-.035em;margin-top:6px}.oferta-preco span{font:500 15px var(--ou);letter-spacing:.03em;white-space:nowrap}.oferta-nota{font-size:13px;line-height:1.5;margin-top:14px;max-width:42em;color:var(--cacau)}.botao{padding:16px 18px;max-width:100%}.convite__titulo{font-size:clamp(3.1rem,8vw,7rem)}@media(max-width:959px){.manchete{max-width:15ch}.oferta-preco{font-size:48px}.oferta-condicao{font-size:14px}.convite__titulo{font-size:clamp(3.1rem,13vw,6rem)}}