/* ==========================================================================
   CHEIRIN BÃO — Design System
   Cores oficiais da marca (marrom #4D2612 + amarelo #F4AF00) somadas ao
   universo das lojas: tijolinho, samambaia, lousa, madeira, neon e kraft.
   ========================================================================== */
:root {
	--cafe: #2E1B12;
	--choco: #4D2612;       /* marrom oficial */
	--choco-2: #5A2E17;
	--choco-3: #7A4A2C;
	--caramelo: #CBA96D;    /* kraft/dourado oficial */
	--caramelo-forte: #D9893B;
	--mostarda: #F4AF00;    /* amarelo oficial */
	--creme: #F6EBD6;
	--creme-2: #FFF9EF;
	--pessego: #F8DCC0;
	--folha: #7C9440;
	--folha-clara: #8AA142;
	--folha-esc: #3E5320;
	--samambaia: #5C8A2E;
	--tijolo: #B4432B;
	--tijolo-esc: #7E2A19;
	--lousa: #232020;
	--giz: #EEE7DB;
	--preto: #140D09;
	--ouro: #D4A84B;
	--ouro-claro: #E9C46A;
	--madeira: #8A5530;
	--madeira-esc: #5B3419;

	--f-display: 'Fraunces', Georgia, serif;
	--f-script: 'Caveat', cursive;
	--f-body: 'Outfit', system-ui, sans-serif;

	--dot: rgba(46, 27, 18, 0.06);
	--dots: radial-gradient(var(--dot) 10%, transparent 11%), radial-gradient(var(--dot) 10%, transparent 11%);
	--dots-size: clamp(28px, 3vw, 56px) clamp(28px, 3vw, 56px);
	--dots-pos: 0 0, clamp(14px, 1.5vw, 28px) clamp(14px, 1.5vw, 28px);

	--mask-wave: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M82%2022L93.9%2021.1L105.9%2018.9L117.8%2017.4L129.8%2018.2L141.7%2022L153.7%2027.6L165.6%2032.6L177.5%2033.4L189.5%2029.1L201.4%2022L213.4%2014.9L225.3%2010.6L237.3%2010.6L249.2%2014.9L261.1%2022L273.1%2029.1L285%2033.4L297%2033.4L308.9%2029.1L320.9%2022L332.8%2014.9L344.7%2010.6L356.7%2010.6L368.6%2014.9L380.6%2022L392.5%2029.1L404.5%2033.4L416.4%2033.4L428.3%2029.1L440.3%2022L452.2%2014.9L464.2%2010.6L476.1%2010.6L488.1%2014.9L500%2022L511.9%2029.1L523.9%2033.4L535.8%2033.4L547.8%2029.1L559.7%2022L571.7%2014.9L583.6%2010.6L595.5%2010.6L607.5%2014.9L619.4%2022L631.4%2029.1L643.3%2033.4L655.3%2033.4L667.2%2029.1L679.1%2022L691.1%2014.9L703%2010.6L715%2010.6L726.9%2014.9L738.9%2022L750.8%2029.1L762.7%2033.4L774.7%2033.4L786.6%2029.1L798.6%2022L810.5%2014.9L822.5%2010.6L834.4%2011.4L846.3%2016.4L858.3%2022L870.2%2025.8L882.2%2026.6L894.1%2025.1L906.1%2022.9Q978%2022%20978%2082L979.6%2093.9L980.5%20105.9L979.2%20117.8L975.7%20129.8L971.3%20141.7L968.4%20153.7L969.4%20165.6L975%20177.5L982.4%20189.5L988.1%20201.4L990%20213.4L987.3%20225.3L981%20237.3L973.6%20249.2L967.9%20261.1L966%20273.1L968.7%20285L975%20297L982.4%20308.9L988.1%20320.9L990%20332.8L987.3%20344.7L981%20356.7L973.6%20368.6L967.9%20380.6L966%20392.5L968.7%20404.5L975%20416.4L982.4%20428.3L988.1%20440.3L990%20452.2L987.3%20464.2L981%20476.1L973.6%20488.1L967.9%20500L966%20511.9L968.7%20523.9L975%20535.8L982.4%20547.8L988.1%20559.7L990%20571.7L987.3%20583.6L981%20595.5L973.6%20607.5L967.9%20619.4L966%20631.4L968.7%20643.3L975%20655.3L982.4%20667.2L988.1%20679.1L990%20691.1L987.3%20703L981%20715L973.6%20726.9L967.9%20738.9L966%20750.8L968.7%20762.7L975%20774.7L982.4%20786.6L988.1%20798.6L990%20810.5L987.3%20822.5L980.8%20834.4L974.5%20846.3L971.3%20858.3L971.6%20870.2L974.3%20882.2L977.2%20894.1L978.6%20906.1Q978%20978%20918%20978L906.1%20978.8L894.1%20977.6L882.2%20974.7L870.2%20971.7L858.3%20970.7L846.3%20973.3L834.4%20979.3L822.5%20986.1L810.5%20989.8L798.6%20988.9L786.6%20983.9L774.7%20976.6L762.7%20969.9L750.8%20966.2L738.9%20967.1L726.9%20972.1L715%20979.4L703%20986.1L691.1%20989.8L679.1%20988.9L667.2%20983.9L655.3%20976.6L643.3%20969.9L631.4%20966.2L619.4%20967.1L607.5%20972.1L595.5%20979.4L583.6%20986.1L571.7%20989.8L559.7%20988.9L547.8%20983.9L535.8%20976.6L523.9%20969.9L511.9%20966.2L500%20967.1L488.1%20972.1L476.1%20979.4L464.2%20986.1L452.2%20989.8L440.3%20988.9L428.3%20983.9L416.4%20976.6L404.5%20969.9L392.5%20966.2L380.6%20967.1L368.6%20972.1L356.7%20979.4L344.7%20986.1L332.8%20989.8L320.9%20988.9L308.9%20983.9L297%20976.6L285%20969.9L273.1%20966.2L261.1%20967.1L249.2%20972.1L237.3%20979.4L225.3%20986.1L213.4%20989.8L201.4%20988.9L189.5%20983.9L177.5%20976.6L165.6%20970.5L153.7%20968.6L141.7%20970.7L129.8%20974.8L117.8%20978.6L105.9%20980.2L93.9%20979.6Q22%20978%2022%20918L22.8%20906.1L24.9%20894.1L26.8%20882.2L26.5%20870.2L23.1%20858.3L17.5%20846.3L12%20834.4L10.2%20822.5L13.6%20810.5L20.3%20798.6L27.6%20786.6L32.8%20774.7L33.8%20762.7L30.4%20750.8L23.7%20738.9L16.4%20726.9L11.2%20715L10.2%20703L13.6%20691.1L20.3%20679.1L27.6%20667.2L32.8%20655.3L33.8%20643.3L30.4%20631.4L23.7%20619.4L16.4%20607.5L11.2%20595.5L10.2%20583.6L13.6%20571.7L20.3%20559.7L27.6%20547.8L32.8%20535.8L33.8%20523.9L30.4%20511.9L23.7%20500L16.4%20488.1L11.2%20476.1L10.2%20464.2L13.6%20452.2L20.3%20440.3L27.6%20428.3L32.8%20416.4L33.8%20404.5L30.4%20392.5L23.7%20380.6L16.4%20368.6L11.2%20356.7L10.2%20344.7L13.6%20332.8L20.3%20320.9L27.6%20308.9L32.8%20297L33.8%20285L30.4%20273.1L23.7%20261.1L16.4%20249.2L11.2%20237.3L10.2%20225.3L13.6%20213.4L20.3%20201.4L27.6%20189.5L32.8%20177.5L33%20165.6L28.7%20153.7L23.1%20141.7L19%20129.8L17.7%20117.8L18.8%20105.9L20.9%2093.9Q22%2022%2082%2022Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
	--mask-flower: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M98.5%2050L98.3%2051.3L97.7%2052.5L96.8%2053.7L95.6%2054.8L94.2%2055.8L92.8%2056.8L91.4%2057.7L90.1%2058.5L89.1%2059.4L88.3%2060.3L87.9%2061.2L87.8%2062.3L88%2063.4L88.4%2064.8L89.1%2066.2L89.8%2067.7L90.5%2069.3L91%2070.9L91.4%2072.5L91.5%2073.9L91.2%2075.3L90.7%2076.4L89.8%2077.3L88.5%2078L87.1%2078.5L85.4%2078.7L83.7%2078.8L82%2078.8L80.4%2078.8L78.9%2078.9L77.6%2079L76.5%2079.4L75.7%2080L75%2080.9L74.6%2082.1L74.3%2083.5L74.1%2085L73.8%2086.7L73.5%2088.4L73.1%2090.1L72.6%2091.5L71.8%2092.8L70.8%2093.7L69.7%2094.3L68.4%2094.5L67%2094.3L65.5%2093.9L64%2093.2L62.5%2092.3L61.1%2091.4L59.7%2090.5L58.5%2089.8L57.3%2089.3L56.2%2089.1L55.2%2089.2L54.2%2089.7L53.2%2090.5L52.2%2091.5L51.1%2092.7L50%2094L48.8%2095.3L47.6%2096.4L46.3%2097.3L45%2097.8L43.7%2098L42.4%2097.8L41.2%2097.3L40.2%2096.3L39.2%2095.1L38.3%2093.6L37.5%2092.1L36.8%2090.5L36.2%2089.1L35.5%2087.8L34.8%2086.8L33.9%2086.1L33%2085.7L31.8%2085.6L30.6%2085.8L29.1%2086.2L27.6%2086.6L25.9%2087.1L24.2%2087.5L22.6%2087.7L21%2087.7L19.7%2087.5L18.5%2086.9L17.6%2086L17%2084.8L16.6%2083.4L16.5%2081.8L16.6%2080.1L16.8%2078.3L17.1%2076.7L17.3%2075.1L17.3%2073.7L17.2%2072.5L16.9%2071.5L16.2%2070.7L15.3%2070.1L14.1%2069.5L12.6%2069L11%2068.6L9.4%2068.1L7.8%2067.5L6.3%2066.8L5%2065.9L4.1%2064.9L3.5%2063.8L3.3%2062.5L3.5%2061.2L4%2059.8L4.8%2058.4L5.8%2057L7%2055.7L8.1%2054.4L9%2053.2L9.8%2052.1L10.3%2051L10.5%2050L10.3%2049L9.8%2047.9L9%2046.8L8.1%2045.6L7%2044.3L5.8%2043L4.8%2041.6L4%2040.2L3.5%2038.8L3.3%2037.5L3.5%2036.2L4.1%2035.1L5%2034.1L6.3%2033.2L7.8%2032.5L9.4%2031.9L11%2031.4L12.6%2031L14.1%2030.5L15.3%2029.9L16.2%2029.3L16.9%2028.5L17.2%2027.5L17.3%2026.3L17.3%2024.9L17.1%2023.3L16.8%2021.7L16.6%2019.9L16.5%2018.2L16.6%2016.6L17%2015.2L17.6%2014L18.5%2013.1L19.7%2012.5L21%2012.3L22.6%2012.3L24.2%2012.5L25.9%2012.9L27.6%2013.4L29.1%2013.8L30.6%2014.2L31.8%2014.4L33%2014.3L33.9%2013.9L34.8%2013.2L35.5%2012.2L36.2%2010.9L36.8%209.5L37.5%207.9L38.3%206.4L39.2%204.9L40.2%203.7L41.2%202.7L42.4%202.2L43.7%202L45%202.2L46.3%202.7L47.6%203.6L48.8%204.7L50%206L51.1%207.3L52.2%208.5L53.2%209.5L54.2%2010.3L55.2%2010.8L56.2%2010.9L57.3%2010.7L58.5%2010.2L59.7%209.5L61.1%208.6L62.5%207.7L64%206.8L65.5%206.1L67%205.7L68.4%205.5L69.7%205.7L70.8%206.3L71.8%207.2L72.6%208.5L73.1%209.9L73.5%2011.6L73.8%2013.3L74.1%2015L74.3%2016.5L74.6%2017.9L75%2019.1L75.7%2020L76.5%2020.6L77.6%2021L78.9%2021.1L80.4%2021.2L82%2021.2L83.7%2021.2L85.4%2021.3L87.1%2021.5L88.5%2022L89.8%2022.7L90.7%2023.6L91.2%2024.7L91.5%2026.1L91.4%2027.5L91%2029.1L90.5%2030.7L89.8%2032.3L89.1%2033.8L88.4%2035.2L88%2036.6L87.8%2037.7L87.9%2038.8L88.3%2039.7L89.1%2040.6L90.1%2041.5L91.4%2042.3L92.8%2043.2L94.2%2044.2L95.6%2045.2L96.8%2046.3L97.7%2047.5L98.3%2048.7L98.5%2050Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
	--mask-blob: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M146%2026L156.1%2023.9L166.2%2021.8L176.3%2020.2L186.5%2019.5L196.6%2020L206.7%2021.9L216.8%2025.2L226.9%2029.4L237%2033.4L247.1%2036.9L257.3%2039.6L267.4%2041.4L277.5%2042L287.6%2041.5L297.7%2039.8L307.8%2037.2L317.9%2033.7L328.1%2029.7L338.2%2025.5L348.3%2021.2L358.4%2017.3L368.5%2014.1L378.6%2011.7L388.7%2010.3L398.9%2010L409%2011L419.1%2012.9L429.2%2015.9L439.3%2019.5L449.4%2023.7L459.5%2028L469.7%2032.1L479.8%2035.8L489.9%2038.8L500%2040.9L510.1%2041.9L520.2%2041.8L530.3%2040.5L540.5%2038.2L550.6%2035L560.7%2031.1L570.8%2026.9L580.9%2022.6L591%2018.6L601.1%2015.1L611.3%2012.4L621.4%2010.6L631.5%2010L641.6%2010.5L651.7%2012.2L661.8%2014.8L671.9%2018.3L682.1%2022.3L692.2%2026.5L702.3%2030.8L712.4%2034.7L722.5%2037.9L732.6%2040.3L742.7%2041.7L752.9%2042L763%2041L773.1%2039.1L783.2%2035.4L793.3%2031.2L803.4%2027.6L813.5%2024.9L823.7%2023.5L833.8%2023.4L843.9%2024.3Q974%2026%20974%20146L975.3%20156.1L975.7%20166.2L974.9%20176.3L972.8%20186.5L969.8%20196.6L966%20206.7L962%20216.8L959%20226.9L958.1%20237L958.3%20247.1L959.6%20257.3L962%20267.4L965.2%20277.5L969.1%20287.6L973.3%20297.7L977.6%20307.8L981.6%20317.9L985.1%20328.1L987.7%20338.2L989.4%20348.3L990%20358.4L989.4%20368.5L987.7%20378.6L985%20388.7L981.6%20398.9L977.5%20409L973.3%20419.1L969%20429.2L965.2%20439.3L961.9%20449.4L959.6%20459.5L958.3%20469.7L958.1%20479.8L959%20489.9L961.1%20500L964%20510.1L967.7%20520.2L971.9%20530.3L976.2%20540.5L980.3%20550.6L984%20560.7L987%20570.8L989%20580.9L989.9%20591L989.7%20601.1L988.4%20611.3L986%20621.4L982.8%20631.5L978.9%20641.6L974.7%20651.7L970.4%20661.8L966.4%20671.9L962.9%20682.1L960.3%20692.2L958.6%20702.3L958%20712.4L958.6%20722.5L960.3%20732.6L963%20742.7L966.4%20752.9L970.5%20763L974.7%20773.1L978.6%20783.2L981%20793.3L982%20803.4L981.7%20813.5L980.3%20823.7L978.3%20833.8L976%20843.9Q974%20974%20854%20974L843.9%20973.3L833.8%20971.6L823.7%20969.1L813.5%20966.2L803.4%20963.5L793.3%20961.3L783.2%20960.2L773.1%20961.2L763%20964.2L752.9%20967.9L742.7%20972.1L732.6%20976.4L722.5%20980.5L712.4%20984.1L702.3%20987.1L692.2%20989.1L682.1%20990L671.9%20989.7L661.8%20988.3L651.7%20985.9L641.6%20982.6L631.5%20978.7L621.4%20974.5L611.3%20970.2L601.1%20966.2L591%20962.8L580.9%20960.2L570.8%20958.5L560.7%20958L550.6%20958.6L540.5%20960.4L530.3%20963.1L520.2%20966.6L510.1%20970.7L500%20974.9L489.9%20979.1L479.8%20983L469.7%20986.2L459.5%20988.5L449.4%20989.8L439.3%20989.9L429.2%20988.9L419.1%20986.8L409%20983.8L398.9%20980.1L388.7%20975.9L378.6%20971.6L368.5%20967.5L358.4%20963.9L348.3%20960.9L338.2%20958.9L328.1%20958L317.9%20958.3L307.8%20959.7L297.7%20962.1L287.6%20965.4L277.5%20969.3L267.4%20973.5L257.3%20977.8L247.1%20981.8L237%20985.2L226.9%20987.8L216.8%20988.4L206.7%20986.8L196.6%20984.3L186.5%20981.3L176.3%20978.4L166.2%20976L156.1%20974.5Q26%20974%2026%20854L28.1%20843.9L30.3%20833.8L32.2%20823.7L33.2%20813.5L33.2%20803.4L31.8%20793.3L28.9%20783.2L24.9%20773.1L20.7%20763L16.8%20752.9L13.7%20742.7L11.4%20732.6L10.2%20722.5L10.1%20712.4L11.2%20702.3L13.3%20692.2L16.4%20682.1L20.1%20671.9L24.3%20661.8L28.6%20651.7L32.7%20641.6L36.3%20631.5L39.2%20621.4L41.1%20611.3L42%20601.1L41.7%20591L40.2%20580.9L37.8%20570.8L34.5%20560.7L30.5%20550.6L26.3%20540.5L22%20530.3L18.1%20520.2L14.6%20510.1L12.1%20500L10.5%20489.9L10%20479.8L10.7%20469.7L12.5%20459.5L15.2%20449.4L18.8%20439.3L22.8%20429.2L27.1%20419.1L31.3%20409L35.2%20398.9L38.3%20388.7L40.6%20378.6L41.8%20368.5L41.9%20358.4L40.8%20348.3L38.7%20338.2L35.6%20328.1L31.9%20317.9L27.7%20307.8L23.4%20297.7L19.3%20287.6L15.7%20277.5L12.8%20267.4L10.9%20257.3L10%20247.1L10.3%20237L11.8%20226.9L15.1%20216.8L19.2%20206.7L23%20196.6L25.8%20186.5L27.6%20176.3L28.1%20166.2L27.5%20156.1Q26%2026%20146%2026Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
	margin: 0;
	font-family: var(--f-body);
	font-size: clamp(16px, 1.1vw, 21px);
	line-height: 1.5;
	color: var(--cafe);
	background: var(--creme);
	overflow-x: hidden;
}
body.loading { overflow: hidden; }

img { max-width: 100%; display: block; }
svg use { pointer-events: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.sr-only, .skip-link:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 10000; background: var(--mostarda); padding: .5em 1em; border-radius: 99px; }

:focus-visible { outline: 3px solid var(--mostarda); outline-offset: 3px; }

.section { padding: clamp(60px, 8vw, 140px) 5%; position: relative; }
.section-content { position: relative; }

/* ---------- Sticker (assinatura tipográfica) ---------- */
.sticker {
	position: relative;
	font-family: var(--f-display);
	font-weight: 900;
	font-variation-settings: 'SOFT' 100, 'WONK' 1;
	color: var(--cafe);
	-webkit-text-stroke: 0.2em #fff;
	paint-order: stroke fill;
	filter: drop-shadow(0 clamp(2px, 0.6vw, 9px) clamp(1px, 0.18vw, 4px) rgba(46, 27, 18, 0.5));
	padding: 0 0.25em;
	line-height: 1;
	letter-spacing: -0.01em;
}

/* ---------- Animações base ---------- */
@keyframes spinRight { to { transform: rotate(360deg); } }
@keyframes spinLeft { to { transform: rotate(-360deg); } }
@keyframes waveLeft { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes waveRight { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes bubbleUp {
	0% { transform: translate(0, 0) scale(.3); opacity: 0; }
	15% { opacity: .9; }
	100% { transform: translate(var(--drift, 4px), -70px) scale(1); opacity: 0; }
}
@keyframes steam {
	0% { stroke-dashoffset: 0; opacity: 0; transform: translateY(10%); }
	30% { opacity: .9; }
	100% { stroke-dashoffset: -60; opacity: 0; transform: translateY(-25%); }
}
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* formas que “pipocam” (scale individual não briga com as animações de rotação) */
.shape-image { scale: var(--s, 1); }

/* vapor do copo */
.cup-steam path { stroke: var(--choco-2); opacity: 0; animation: steam 2.8s ease-in-out infinite; transform-box: fill-box; }
.cup-steam path:nth-child(2) { animation-delay: .9s; }
.cup-steam path:nth-child(3) { animation-delay: 1.8s; }
.flavour-can-wrapper .cup-steam path { stroke: var(--caramelo); }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader {
	--hole: 0px;
	position: fixed; inset: 0;
	z-index: 9999;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	background-color: var(--choco);
	--dot: rgba(255, 255, 255, 0.05);
	background-image: var(--dots);
	background-size: var(--dots-size);
	background-position: var(--dots-pos);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
	mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
#preloader .preloader-inner {
	position: relative;
	width: clamp(150px, 16vw, 280px);
	aspect-ratio: 1;
}
#preloader .preloader-logo { width: 100%; animation: bob 2.4s ease-in-out infinite; }
#preloader .preloader-steam {
	position: absolute; bottom: 55%;
	width: 45%; height: 60%;
	color: var(--caramelo);
}
#preloader .preloader-left { left: -45%; transform-origin: bottom right; animation: waveLeft 3s ease-in-out infinite; }
#preloader .preloader-right { right: -45%; transform-origin: bottom left; animation: waveRight 3s ease-in-out infinite; transform: scaleX(-1); }
#preloader .preloader-text {
	font-family: var(--f-script); font-weight: 700;
	color: var(--creme); font-size: clamp(24px, 2.2vw, 40px);
	margin-top: 1.2em;
}
#preloader .preloader-text span { animation: blink 1.2s infinite; }
#preloader .preloader-text span:nth-child(2) { animation-delay: .2s; }
#preloader .preloader-text span:nth-child(3) { animation-delay: .4s; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
	position: fixed; top: 0; left: 0; right: 0;
	z-index: 50;
	padding: clamp(8px, .8vw, 14px) 6%;
	display: flex; align-items: center; justify-content: space-between;
}
.site-header::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 100%;
	background-color: var(--choco);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
	transition: height .5s ease;
}
.site-header.menu-open::before { height: 100vh; }
.site-branding { position: relative; display: flex; width: clamp(50px, 4.2vw, 72px); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.site-branding img { width: 100%; height: auto; transition: transform .5s ease; }
.site-branding:hover img { transform: rotate(-12deg) scale(1.06); }

.main-navigation { position: relative; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: none; }
.main-navigation a {
	display: block; text-decoration: none;
	color: var(--creme); font-weight: 700;
	transition: color .4s ease;
}
.main-navigation a:hover, .main-navigation a.active { color: var(--mostarda); }
.main-navigation a.nav-cta {
	background: var(--mostarda); color: var(--cafe);
	border-radius: 99px; padding: .35em 1em;
	transition: background-color .4s ease, color .4s ease, transform .4s ease;
}
.main-navigation a.nav-cta:hover { background: var(--creme); transform: rotate(-3deg); }

.menu-toggle {
	display: flex; flex-direction: column; justify-content: center; gap: 5px;
	background: transparent; border: 0; padding: 10px; cursor: pointer;
}
.menu-toggle span { width: 26px; height: 3px; border-radius: 3px; background: var(--mostarda); transition: transform .3s ease, opacity .3s ease; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 999px) {
	.main-navigation ul {
		position: fixed; left: 0; right: 0; top: 90px;
		display: flex; flex-direction: column; align-items: center; gap: .6em;
		opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s;
	}
	.menu-open .main-navigation ul { opacity: 1; visibility: visible; }
	.main-navigation a { font-family: var(--f-display); font-size: clamp(28px, 8vw, 48px); }
}
@media (min-width: 1000px) {
	.menu-toggle { display: none; }
	.main-navigation ul { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 30px); }
	.main-navigation a { font-size: clamp(15px, 1.02vw, 19px); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.banner-home {
	position: relative;
	min-height: 100svh;
	padding: clamp(100px, 9vw, 140px) 5% clamp(90px, 8vw, 150px);
	background-color: var(--mostarda);
	background-image: var(--dots);
	background-size: var(--dots-size);
	background-position: var(--dots-pos);
	display: flex; align-items: center;
	overflow: hidden;
}
.banner-home .section-content { width: 100%; z-index: 5; }

.banner-heading {
	position: relative;
	font-size: clamp(46px, 14vw, 120px);
	text-align: center;
	margin: 0 auto .15em;
	width: fit-content;
	line-height: 1;
	z-index: 3;
}
.banner-heading .sticker { display: inline-block; }
.banner-heading .word-left { transform: rotate(-6deg); }
.banner-heading .word-right { transform: rotate(4deg); }
.banner-heading .steam-container {
	position: absolute; left: -2%; top: -50%;
	width: 18%; aspect-ratio: 1;
	transform: rotate(-12deg);
}
.banner-heading .steam-container svg { width: 100%; height: 100%; color: var(--choco-2); transition: color .5s ease; }

.cup-stage { position: relative; width: fit-content; margin: 0 auto; z-index: 2; }
.hero-cup { position: relative; z-index: 2; animation: bob 4s ease-in-out infinite; }
.hero-cup svg { display: block; height: min(54svh, 560px); width: auto; filter: drop-shadow(0 22px 22px rgba(46, 27, 18, .35)); }

.can-backdrop { position: absolute; inset: 0 -40%; z-index: 1; pointer-events: none; }
.can-backdrop-wrapper { position: absolute; inset: 0; }
.can-backdrop-wrapper .bd { position: absolute; aspect-ratio: 1; height: auto; }
.can-backdrop-wrapper .bd > svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* 9 posições (inspirado no arranjo original, simétrico em volta do copo) */
.bd1 { width: 30%; top: 0; left: 2%; animation: spinLeft 9s linear infinite; }
.bd2 { width: 24%; top: 30%; left: 0; animation: waveLeft 4s ease-in-out infinite; transform-origin: bottom right; }
.bd3 { width: 26%; bottom: 4%; left: 6%; animation: spinRight 7s linear infinite; }
.bd4 { width: 16%; top: 62%; left: 22%; animation: waveRight 3.6s ease-in-out infinite; }
.bd5 { width: 28%; top: 2%; right: 4%; animation: spinRight 10s linear infinite; }
.bd6 { width: 22%; top: 34%; right: 0; animation: waveRight 4s ease-in-out infinite; transform-origin: bottom left; }
.bd7 { width: 30%; bottom: 0; right: 4%; animation: spinLeft 8s linear infinite; }
.bd8 { width: 15%; top: 18%; right: 22%; animation: waveLeft 3.2s ease-in-out infinite; }
.bd9 { width: 14%; top: 10%; left: 24%; animation: spinRight 6s linear infinite; }

.banner-home .arrows {
	position: absolute; top: 50%; left: -6%; right: -6%;
	display: flex; justify-content: space-between;
	transform: translateY(-50%);
	z-index: 9; pointer-events: none;
}
.banner-home .arrow {
	pointer-events: auto;
	background: transparent; border: 0; padding: 0; cursor: pointer;
	width: clamp(46px, 4.4vw, 84px); aspect-ratio: 1;
	transition: transform .3s ease;
}
.banner-home .arrow:hover { transform: scale(1.1); }
.banner-home .arrow:active { transform: scale(.92); }
.banner-home .arrow svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); }
.banner-home .arrow circle { fill: var(--choco-2); transition: fill .5s ease; }
.banner-home .arrow path { stroke: var(--mostarda); transition: stroke .5s ease; }

.hero-coffee-name {
	text-align: center;
	margin: clamp(16px, 2vw, 28px) 0 0;
	font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
	font-size: clamp(13px, 1vw, 17px);
	color: var(--cafe);
}
.hero-coffee-name strong {
	font-family: var(--f-display); font-style: italic; text-transform: none; letter-spacing: 0;
	font-size: 2.2em; margin: 0 .15em; vertical-align: -0.18em;
}
.hero-coffee-name em { font-style: normal; opacity: .75; }

.button-container { display: flex; justify-content: center; margin-top: clamp(14px, 1.6vw, 26px); }
.button-wrapper { position: relative; display: inline-block; }
.button {
	position: relative; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--f-display); font-weight: 800; font-variation-settings: 'SOFT' 100;
	font-size: clamp(19px, 1.5vw, 28px);
	padding: .55em 1.7em;
	border-radius: 99px;
	text-decoration: none;
	background-color: var(--choco-2); color: var(--mostarda);
	box-shadow: 0 6px 0 rgba(46, 27, 18, .35);
	transition: background-color .5s ease, color .5s ease, transform .3s ease, box-shadow .3s ease;
}
.button:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 9px 0 rgba(46, 27, 18, .3); }
.button:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(46, 27, 18, .35); }
.bubble {
	position: absolute; bottom: 70%; z-index: 1;
	border-radius: 50%;
	background: rgba(255, 248, 236, .9);
	border: 2px solid rgba(46, 27, 18, .25);
	opacity: 0; pointer-events: none;
}
.button-wrapper:hover .bubble { animation: bubbleUp 1s infinite ease-out; }
.bubble:nth-child(odd) { --drift: -6px; }

@media (min-width: 900px) and (orientation: landscape) {
	.banner-heading {
		position: absolute; inset: 0;
		width: auto; margin: 0;
		display: flex; justify-content: space-between; align-items: center;
		font-size: clamp(64px, 8.4vw, 170px);
		pointer-events: none;
		transform: translateY(-6%);
	}
	.banner-heading .steam-container { left: 1%; top: 18%; width: 9%; }
	.banner-home .arrows { left: -34%; right: -34%; top: 80%; }
	.hero-cup svg { height: min(62svh, 640px); }
}

/* frase da marca + ramos de café em traço + selo giratório */
.banner-home { --hero-ink: var(--cafe); --hero-accent: var(--choco); }
.hero-kicker {
	position: relative; z-index: 4;
	text-align: center; margin: 0 0 .2em;
	font-family: var(--f-script); font-weight: 700;
	font-size: clamp(22px, 2vw, 36px); line-height: 1;
	color: var(--hero-ink); transition: color .5s ease;
}
.hero-ramo {
	position: absolute; z-index: 1; pointer-events: none;
	width: clamp(150px, 19vw, 360px); aspect-ratio: 3 / 4; height: auto;
	color: var(--hero-ink); opacity: .16; transition: color .5s ease;
}
.hero-ramo-l { left: -2%; bottom: -4%; }
.hero-ramo-r { right: -2%; top: 8%; transform: scale(-1, -1); }

.selo-giratorio {
	position: absolute; z-index: 8;
	width: clamp(84px, 8.4vw, 150px); aspect-ratio: 1;
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25));
}
.selo-giratorio > svg:first-child { width: 100%; height: 100%; display: block; animation: spinRight 16s linear infinite; overflow: visible; }
.selo-giratorio .selo-fundo { fill: var(--creme-2); stroke: var(--cafe); stroke-width: 4; }
.selo-giratorio text { font-family: var(--f-body); font-weight: 800; font-size: 15.5px; letter-spacing: 1.4px; fill: var(--cafe); }
.selo-giratorio .selo-centro { position: absolute; inset: 31%; width: 38%; height: 38%; animation: waveLeft 3s ease-in-out infinite; }
.selo-giratorio { right: -4%; top: 6%; }
@media (max-width: 899px) {
	.banner-heading .steam-container { top: -14%; left: -9%; width: 12%; }
	.selo-giratorio { width: 76px; }
}
@media (min-width: 900px) and (orientation: landscape) {
	.selo-giratorio { right: -26%; top: 4%; }
}

/* ==========================================================================
   FAIXA DE FORMAS
   ========================================================================== */
.shapes-slider {
	position: relative; z-index: 6;
	margin: calc(-1 * clamp(55px, 6vw, 115px)) 0;
	overflow: hidden; pointer-events: none;
	padding: 2% 0;
}
.shapes-track { display: flex; align-items: center; gap: clamp(24px, 3vw, 60px); width: max-content; animation: marquee 50s linear infinite; }
.shapes-track svg { width: clamp(84px, 9vw, 170px); aspect-ratio: 1; height: auto; flex-shrink: 0; filter: drop-shadow(0 6px 6px rgba(46, 27, 18, .25)); }
.shapes-track svg:nth-child(odd) { transform: translateY(-15%) rotate(-8deg); }
.shapes-track svg:nth-child(even) { transform: translateY(15%) rotate(8deg); }

/* ==========================================================================
   bg-change (fundo que vira do creme pro chocolate conforme a rolagem)
   ========================================================================== */
.bg-change {
	background-color: var(--creme);
	color: var(--cafe);
	background-image: var(--dots);
	background-size: var(--dots-size);
	background-position: var(--dots-pos);
	transition: background-color .35s ease, color .35s ease;
}
.bg-is-dark .bg-change { background-color: var(--choco); color: var(--creme); --dot: rgba(255, 255, 255, .045); }

/* ==========================================================================
   A CASA — cards empilhados
   ========================================================================== */
.about { margin-top: -2px; padding: 0; }
.about .bubbles-wrapper { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.about .bubbles-group {
	height: 100vh; width: 100%;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 2%;
}
.about .bubbles-group .bean { width: clamp(60px, 8vw, 150px); aspect-ratio: 1; height: auto; opacity: .9; }

.about .about-cards { position: relative; z-index: 2; width: 92%; margin: 0 auto; }
.about .card-outer {
	height: 100vh;
	display: flex; align-items: center; justify-content: center;
	position: sticky; top: 0;
}
.about .card {
	width: 100%;
	-webkit-mask-image: var(--mask-wave); mask-image: var(--mask-wave);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	padding: clamp(36px, 9vw, 140px) clamp(28px, 7vw, 120px);
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: 1.5em 0;
}
.about .card-outer:nth-child(odd) .card { flex-direction: row-reverse; }
.about .card.bg-mostarda { background: var(--mostarda); color: var(--cafe); }
.about .card.bg-folha { background: var(--folha); color: var(--creme-2); }
.about .card.bg-tijolo { background: var(--tijolo); color: var(--creme-2); }

.about .card .image-container { width: 78%; margin: 0 auto; }
.about .card .image-container-inner { position: relative; width: 100%; padding-top: 100%; }
.about .card .image-container img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
	-webkit-mask-image: var(--mask-flower); mask-image: var(--mask-flower);
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
}
.about .card .text-container { width: 100%; }
.about .heading-wrapper { position: relative; width: fit-content; }
.about .card-heading { font-size: clamp(28px, 7.6vw, 120px); line-height: 1.05; margin-bottom: .35em; }
.about .card-heading .larger-text { font-size: 1.3em; }
.about .card:not(.longer-text) .card-heading span:last-child { display: inline-block; transform: rotate(-6deg) translate(2%, -4%); transform-origin: top left; }
.about .card .text { font-weight: 600; font-size: clamp(16px, 1.3vw, 24px); line-height: 1.45; max-width: 34em; }

.about .heading-wrapper .shape { position: absolute; aspect-ratio: 1; height: auto; z-index: -1; overflow: visible; }
.about .card-outer:nth-child(1) .shape-1 { width: 30%; top: -30%; left: -14%; animation: spinLeft 6s linear infinite; }
.about .card-outer:nth-child(1) .shape-2 { width: 26%; right: -16%; top: -6%; animation: waveRight 3s ease-in-out infinite; }
.about .card-outer:nth-child(2) .shape-1 { width: 28%; top: -26%; left: -10%; animation: spinRight 6s linear infinite; }
.about .card-outer:nth-child(2) .shape-2 { width: 26%; right: -14%; top: 30%; animation: waveLeft 3.4s ease-in-out infinite; }
.about .card-outer:nth-child(3) .shape-1 { width: 28%; top: -40%; left: -10%; animation: waveLeft 4s ease-in-out infinite; transform-origin: bottom right; }
.about .card-outer:nth-child(3) .shape-2 { width: 20%; right: 2%; top: -14%; animation: spinRight 7s linear infinite; }

@media (min-width: 750px) {
	.about .about-cards { width: 86%; }
	.about .card .image-container { width: 50%; margin: 0; }
	.about .card .text-container { width: 46%; }
	.about .card-heading { font-size: clamp(34px, 4.6vw, 110px); }
}
@media (min-width: 750px) and (orientation: landscape) {
	.about .about-cards { width: 78%; }
	.about .card .image-container { width: 44%; }
	.about .card .text-container { width: 52%; }
}

/* ==========================================================================
   NOSSOS CAFÉS
   ========================================================================== */
.flavours-section { padding: clamp(70px, 9vw, 160px) 5% clamp(60px, 7vw, 120px); }
.section-heading {
	position: relative;
	font-size: clamp(42px, 10vw, 140px);
	text-align: center; line-height: 1;
	width: fit-content; margin: 0 auto .2em;
}
.section-heading .sticker { display: inline-block; }
.section-heading .tilt { transform: rotate(-5deg) translateY(-12%); font-size: 1.2em; }
.section-heading .shape { position: absolute; aspect-ratio: 1; height: auto; overflow: visible; }
.section-heading .shape-1 { width: 24%; left: -22%; top: 10%; animation: waveLeft 3s ease-in-out infinite; }
.section-heading .shape-2 { width: 28%; right: -24%; top: -10%; animation: spinRight 6s linear infinite; }
.section-sub { text-align: center; font-weight: 600; font-size: clamp(16px, 1.3vw, 24px); margin: 0 auto clamp(30px, 4vw, 60px); max-width: 38em; text-wrap: balance; }

.flavours-bar { display: flex; flex-wrap: wrap; gap: 0; border-radius: clamp(18px, 2vw, 32px); overflow: hidden; box-shadow: 0 10px 0 rgba(46, 27, 18, .18); }
.flavour-tab-nav { width: 100%; }
.flavour-tab-nav-inner {
	position: relative;
	width: 100%;
	display: block;
	color: var(--text-color);
	background-color: var(--background-color);
	padding: clamp(14px, 1.6vw, 30px);
	cursor: pointer;
	border: 0;
	text-align: center;
	transition: color .5s ease, background-color .5s ease;
}
.flavour-tab-nav.active .flavour-tab-nav-inner,
.flavour-tab-nav-inner:hover { color: var(--active-text-color); background-color: var(--active-background-color); }
.flavour-tab-nav .flavour-name {
	position: relative; z-index: 2;
	font-family: var(--f-display); font-style: italic; font-weight: 900;
	font-size: clamp(28px, 2.6vw, 52px); line-height: 1;
}
.flavour-tab-nav .flavour-tag { position: relative; z-index: 2; display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(11px, .8vw, 14px); margin-top: .5em; }
.flavour-tab-nav .bubble { background: var(--active-text-color); border: 0; opacity: 0; }
.flavour-tab-nav .arrow { display: block; width: 34px; aspect-ratio: 1; margin: .6em auto 0; transition: transform .3s ease; }
.flavour-tab-nav .arrow svg { width: 100%; height: 100%; display: block; }
.flavour-tab-nav .arrow circle { fill: var(--text-color); transition: fill .5s; }
.flavour-tab-nav .arrow path { stroke: var(--background-color); transition: stroke .5s; }
.flavour-tab-nav.active .arrow { transform: rotate(180deg); }
.flavour-tab-nav.active .arrow circle { fill: var(--active-text-color); }
.flavour-tab-nav.active .arrow path { stroke: var(--active-background-color); }

.flavour-can-mobile { max-height: 0; overflow: hidden; transition: max-height .6s ease; background: var(--creme-2); color: var(--cafe); }
.flavour-tab-nav.active .flavour-can-mobile { max-height: 1400px; }
.flavour-can-mobile-inner { padding: 30px 6%; }

.flavours-cans { display: none; }
.flavour-can-wrapper { cursor: pointer; }
.flavour-can-wrapper .can-image-wrapper { position: relative; }
.flavour-can-wrapper .can-backdrop-wrapper { position: absolute; inset: 0 -14%; z-index: 0; }
.flavour-can-wrapper .can-image-wrapper-inner { position: relative; z-index: 2; width: 80%; max-width: 260px; margin: 0 auto; transform: scale(.82); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.flavour-can-wrapper .can-image-wrapper-inner svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 14px rgba(46, 27, 18, .3)); }
.flavour-can-wrapper.active .can-image-wrapper-inner,
.flavour-can-wrapper:hover .can-image-wrapper-inner { transform: rotate(-4deg); }
/* o pacote de verdade aparece ao lado do copo */
.flavour-can-wrapper .pack {
	position: absolute; z-index: 3;
	right: 0; bottom: 2%;
	width: 34%; height: auto;
	transform: translate(10%, 10%) rotate(14deg) scale(.4);
	opacity: 0;
	filter: drop-shadow(0 10px 10px rgba(46, 27, 18, .35));
	transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease;
}
.flavour-can-wrapper .pack-microlote, .flavour-can-wrapper .pack-mio { width: 38%; }
.flavour-can-wrapper.active .pack,
.flavour-can-wrapper:hover .pack { opacity: 1; transform: translate(0, 0) rotate(8deg) scale(1); }
.flavour-can-mobile .pack { right: 6%; width: 28%; }

.flavour-information { text-align: center; transition: opacity .5s ease; }
.flavour-information .info-name { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: clamp(30px, 2.6vw, 52px); line-height: 1.1; }
.flavour-information .notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: .7em 0; padding: 0; list-style: none; }
.flavour-information .notes li { font-size: clamp(11px, .8vw, 14px); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .3em .8em; border-radius: 99px; border: 2px solid currentColor; }
.flavour-information .desc { font-size: clamp(15px, 1vw, 19px); line-height: 1.45; margin: 0 auto; max-width: 22em; }

@media (min-width: 900px) {
	.flavour-can-mobile, .flavour-tab-nav .arrow { display: none; }
	.flavour-tab-nav { width: 25%; }
	.flavour-tab-nav:hover .bubble, .flavour-tab-nav.active .bubble { animation: bubbleUp 1.1s infinite ease-out; }
	.flavours-cans { display: flex; justify-content: space-between; margin-top: clamp(40px, 4vw, 80px); }
	.flavours-cans .flavour-can-wrapper { width: 23%; }
	.flavours-cans .flavour-information { opacity: 0; margin-top: 1.2em; }
	.flavours-cans .flavour-can-wrapper.active .flavour-information,
	.flavours-cans .flavour-can-wrapper:hover .flavour-information { opacity: 1; }
}

/* ==========================================================================
   LOUSA — do pé à xícara
   ========================================================================== */
.lousa {
	position: relative;
	background-color: var(--lousa);
	color: var(--giz);
	padding: clamp(80px, 10vw, 180px) 6%;
	overflow: hidden;
}
.lousa::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
		radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%),
		radial-gradient(ellipse at 80% 80%, rgba(255, 255, 255, .04), transparent 55%);
}
.lousa .section-content { max-width: 1300px; margin: 0 auto; }
.lousa-kicker { font-family: var(--f-script); font-weight: 700; font-size: clamp(22px, 2vw, 36px); text-align: center; color: var(--caramelo); margin-bottom: .2em; }
.lousa-heading { text-align: center; font-size: clamp(54px, 11vw, 190px); line-height: .9; margin-bottom: clamp(40px, 5vw, 90px); }
.lousa-heading .sticker {
	font-family: var(--f-script); font-weight: 700; font-variation-settings: normal;
	color: var(--giz); -webkit-text-stroke: 0; filter: none;
	text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 0 18px rgba(255, 255, 255, .12);
	display: inline-block;
}
.lousa-heading .tilt { color: var(--mostarda); transform: rotate(-4deg); }

.lousa-journey { position: relative; display: grid; gap: clamp(40px, 5vw, 70px); }
.lousa-path { display: none; }
.step { position: relative; max-width: 34em; padding-left: 70px; }
.step::before { content: ""; position: absolute; left: 26px; top: 64px; bottom: calc(-1 * clamp(40px, 5vw, 70px)); border-left: 3px dashed rgba(238, 231, 219, .35); }
.step:last-child::before { display: none; }
.step-icon { position: absolute; left: 0; top: 0; width: 56px; aspect-ratio: 1; height: auto; color: var(--giz); }
.step h3 { font-family: var(--f-script); font-weight: 700; font-size: clamp(30px, 2.6vw, 48px); line-height: 1; color: var(--caramelo); margin-bottom: .3em; }
.step p { font-size: clamp(15px, 1.05vw, 19px); opacity: .9; }
.step strong { color: var(--mostarda); }

@media (min-width: 900px) {
	.lousa-journey { grid-template-columns: 1fr 1fr; gap: 0 8%; padding: 2% 0; }
	.lousa-path { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
	.lousa-path path { stroke: rgba(238, 231, 219, .55); stroke-width: 3; stroke-dasharray: 10 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
	.step { padding: 0; margin-bottom: clamp(60px, 6vw, 120px); text-shadow: 0 0 12px var(--lousa), 0 0 24px var(--lousa); }
	.step::before { display: none; }
	.step-icon { position: static; width: clamp(90px, 8vw, 140px); margin-bottom: .6em; }
	.step-1 { grid-column: 1; }
	.step-2 { grid-column: 2; margin-top: 30%; }
	.step-3 { grid-column: 1; margin-top: -18%; }
	.step-4 { grid-column: 2; margin-top: 20%; }
}

.lousa-sub { font-family: var(--f-script); font-weight: 700; text-align: center; font-size: clamp(48px, 6vw, 110px); color: var(--giz); margin: clamp(50px, 6vw, 110px) 0 clamp(30px, 3vw, 60px); line-height: 1; }
.metodos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 3vw, 60px) clamp(16px, 3vw, 60px); }
.metodo { text-align: center; }
.metodo svg { width: clamp(80px, 8vw, 130px); aspect-ratio: 1; height: auto; color: var(--giz); margin: 0 auto .4em; display: block; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .4s; }
.metodo:hover svg { transform: rotate(-8deg) scale(1.1); color: var(--mostarda); }
.metodo h4 { font-family: var(--f-script); font-weight: 700; font-size: clamp(30px, 2.4vw, 44px); line-height: 1; color: var(--caramelo); }
.metodo h4 small { display: block; font-family: var(--f-body); font-size: .4em; letter-spacing: .1em; text-transform: uppercase; color: var(--giz); margin-top: .3em; }
.metodo p { font-size: clamp(14px, .95vw, 17px); opacity: .85; max-width: 18em; margin: .4em auto 0; }
@media (min-width: 900px) { .metodos { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Lousa: fotos coladas com fita + destaques em giz ---------- */
.step-foto {
	position: relative;
	margin: 0 0 1.2em;
	width: clamp(200px, 22vw, 340px);
	background: #fff; padding: 8px 8px 22px;
	transform: rotate(var(--r, -3deg));
	box-shadow: 0 14px 28px rgba(0, 0, 0, .45);
	text-shadow: none;
}
.step-foto::before {
	content: ""; position: absolute; top: -12px; left: 50%;
	width: 38%; height: 26px;
	transform: translateX(-50%) rotate(-4deg);
	background: rgba(246, 235, 214, .78);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.step-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
	.step-icon { width: clamp(64px, 5.4vw, 96px); }
	.step-2, .step-4 { padding-left: 6%; }
}
.giz-destaques {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(24px, 4vw, 70px);
	margin: clamp(10px, 2vw, 40px) 0 0;
}
.giz-destaque {
	display: flex; align-items: center; gap: .5em; margin: 0;
	font-family: var(--f-script); font-weight: 700; font-size: clamp(22px, 1.8vw, 32px); line-height: 1.1;
	max-width: 15em;
}
.giz-circulo {
	flex-shrink: 0;
	display: inline-grid; place-items: center;
	width: 2.4em; aspect-ratio: 1;
	border: 3px dashed var(--mostarda); border-radius: 50%;
	font-family: var(--f-body); font-weight: 900; font-size: .8em; color: var(--mostarda);
	transform: rotate(-8deg);
}
.giz-selo { height: 2.6em; width: auto; border-radius: 6px; transform: rotate(-4deg); box-shadow: 0 6px 12px rgba(0, 0, 0, .4); }
.lousa-curiosidade {
	text-align: center; max-width: 34em; margin: clamp(50px, 6vw, 100px) auto 0;
	font-family: var(--f-script); font-size: clamp(22px, 1.8vw, 32px); line-height: 1.25; opacity: .92;
}
.lousa-curiosidade strong { color: var(--mostarda); }

/* ==========================================================================
   CARDÁPIO — parede de tijolinho, samambaias e neon
   ========================================================================== */
.cardapio { position: relative; }
.cardapio-pin {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	display: flex; align-items: center;
	padding: clamp(90px, 8vw, 120px) 0 clamp(50px, 5vw, 80px);
	color: var(--creme-2);
	background-color: #A9472F;
	background-image:
		linear-gradient(180deg, rgba(28, 12, 6, .72), rgba(28, 12, 6, .5) 40%, rgba(28, 12, 6, .78)),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .22 0'/></filter><rect width='160' height='80' fill='%23CDB9A3'/><g><rect x='2' y='2' width='76' height='36' rx='3' fill='%23B4553A'/><rect x='82' y='2' width='76' height='36' rx='3' fill='%23A3472F'/><rect x='-38' y='42' width='76' height='36' rx='3' fill='%23BD5E42'/><rect x='42' y='42' width='76' height='36' rx='3' fill='%23AE4E34'/><rect x='122' y='42' width='76' height='36' rx='3' fill='%23BD5E42'/></g><rect width='160' height='80' filter='url(%23n)'/></svg>");
	background-size: auto, clamp(120px, 10vw, 180px) auto;
}
.samambaia {
	position: absolute; top: -30px; z-index: 1;
	width: clamp(110px, 13vw, 250px); aspect-ratio: 220 / 410; height: auto;
	color: var(--samambaia);
	transform-origin: 50% 0;
	filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .35));
	pointer-events: none;
}
.samambaia-1 { left: -2%; animation: sway 6s ease-in-out infinite; }
.samambaia-2 { left: 3%; width: clamp(80px, 9vw, 170px); transform: rotate(-24deg); animation: sway 7s ease-in-out -2s infinite; color: #4E7A26; }
.samambaia-3 { right: 2%; animation: sway 6.5s ease-in-out -1s infinite; }
.samambaia-4 { right: 9%; width: clamp(80px, 9vw, 170px); animation: sway 7.5s ease-in-out -3s infinite; color: #6B9A35; }
@keyframes sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 5deg; } }

.cardapio-track {
	position: relative; z-index: 2;
	display: flex; align-items: center;
	gap: clamp(26px, 3vw, 60px);
	padding: 0 6vw;
	width: max-content;
}
.cardapio-intro { width: clamp(300px, 36vw, 620px); flex-shrink: 0; }
.neon {
	font-family: var(--f-script); font-weight: 700;
	font-size: clamp(40px, 4.4vw, 84px); line-height: 1;
	color: #FFF6D6; margin: 0 0 .15em;
	transform: rotate(-5deg); transform-origin: left;
	text-shadow: 0 0 3px #fff, 0 0 10px #FFD25A, 0 0 24px #F4AF00, 0 0 48px #F4AF00, 0 0 80px rgba(244, 175, 0, .6);
	animation: neon 5s infinite;
}
@keyframes neon {
	0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
	20%, 24%, 55% { opacity: .35; text-shadow: none; }
}
.cardapio-heading { font-size: clamp(56px, 8vw, 150px); line-height: .95; margin-bottom: .2em; }
.cardapio-heading .sticker { display: inline-block; }
.cardapio-heading .tilt { color: var(--mostarda); transform: rotate(-6deg) translate(12%, -4%); font-size: 1.15em; }
.cardapio-sub { font-weight: 600; font-size: clamp(16px, 1.25vw, 23px); max-width: 24em; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.cardapio-hint {
	display: inline-flex; align-items: center; gap: .3em;
	font-family: var(--f-script); font-weight: 700; font-size: clamp(22px, 1.6vw, 30px); color: var(--mostarda);
}
.cardapio-hint svg { width: 1.3em; height: 1.3em; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

.prato {
	position: relative; flex-shrink: 0;
	width: clamp(250px, 22vw, 380px);
	background: var(--creme-2); color: var(--cafe);
	border-radius: clamp(20px, 1.8vw, 30px);
	padding: clamp(10px, .9vw, 16px) clamp(10px, .9vw, 16px) clamp(18px, 1.5vw, 26px);
	transform: rotate(var(--rot, 0deg));
	box-shadow: 0 22px 40px rgba(0, 0, 0, .45), 0 0 0 4px rgba(46, 27, 18, .9);
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.prato:nth-of-type(even) { margin-top: 6vh; }
.prato:hover { transform: rotate(0) scale(1.04); z-index: 3; }
.prato-foto { border-radius: clamp(14px, 1.2vw, 22px); overflow: hidden; aspect-ratio: 4 / 3; background: var(--creme); }
.prato-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.prato:hover .prato-foto img { transform: scale(1.08); }
.prato-nome { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-size: clamp(22px, 1.65vw, 32px); line-height: 1.05; margin: .55em .2em .25em; }
.prato p { font-size: clamp(14px, .95vw, 17px); line-height: 1.4; margin: 0 .3em; }
.prato-selo {
	position: absolute; top: -20px; right: -16px; z-index: 2;
	display: grid; place-items: center; text-align: center;
	width: clamp(72px, 5.6vw, 96px); aspect-ratio: 1;
	border-radius: 50%; border: 3px solid var(--cafe);
	background: var(--mostarda); color: var(--cafe);
	font-family: var(--f-script); font-weight: 700; font-size: clamp(19px, 1.4vw, 25px); line-height: .9;
	transform: rotate(12deg);
	box-shadow: 0 6px 0 rgba(46, 27, 18, .35);
	animation: waveRight 3.2s ease-in-out infinite;
}
.selo-verde { background: var(--folha-clara); color: var(--creme-2); }
.selo-tijolo { background: var(--tijolo); color: var(--creme-2); }
.selo-choco { background: var(--choco); color: var(--mostarda); }

.cardapio-mais {
	flex-shrink: 0;
	width: clamp(280px, 25vw, 420px);
	background: var(--lousa); color: var(--giz);
	border: clamp(10px, 1vw, 16px) solid var(--madeira);
	border-radius: 8px;
	box-shadow: inset 0 0 0 3px var(--madeira-esc), 0 22px 40px rgba(0, 0, 0, .5);
	padding: clamp(22px, 2vw, 36px);
	transform: rotate(2deg);
}
.giz-titulo { font-family: var(--f-script); font-weight: 700; font-size: clamp(36px, 3vw, 54px); color: var(--mostarda); line-height: 1; margin-bottom: .3em; }
.cardapio-mais ul { list-style: none; margin: 0; padding: 0; }
.cardapio-mais li { font-family: var(--f-script); font-weight: 700; font-size: clamp(24px, 1.8vw, 32px); line-height: 1.25; border-bottom: 2px dashed rgba(238, 231, 219, .25); padding: .1em 0; }
.cardapio-obs { font-size: 13px; opacity: .65; margin-top: 1em; }

@media (max-width: 899px) {
	.cardapio-pin { display: block; min-height: 0; padding-top: 110px; }
	.cardapio-track {
		width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; padding: 30px 6vw 50px;
		align-items: center;
		scrollbar-width: none;
	}
	.cardapio-track::-webkit-scrollbar { display: none; }
	.cardapio-track > * { scroll-snap-align: center; }
	.cardapio-intro { width: 84vw; align-self: center; }
	.prato { width: 74vw; }
	.prato:nth-of-type(even) { margin-top: 0; }
	.cardapio-mais { width: 78vw; }
}

/* ==========================================================================
   TEMPORADA — Black Waffle (cartaz escuro e dourado)
   ========================================================================== */
.temporada {
	position: relative; overflow: hidden;
	color: var(--creme);
	background:
		radial-gradient(circle at 72% 50%, rgba(212, 140, 40, .35), transparent 45%),
		radial-gradient(circle at 15% 90%, rgba(180, 67, 43, .25), transparent 40%),
		var(--preto);
	padding: clamp(80px, 9vw, 170px) 6%;
}
.temporada-confete { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tw { position: absolute; height: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); }
.tw1 { width: clamp(70px, 7vw, 130px); left: 4%; top: 12%; }
.tw2 { width: clamp(60px, 6vw, 110px); left: 40%; top: 70%; filter: blur(2px) drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); }
.tw3 { width: clamp(40px, 4vw, 70px); right: 6%; top: 8%; }
.tw4 { width: clamp(60px, 6vw, 110px); right: 40%; top: 12%; filter: blur(3px); opacity: .7; }
.tw5 { width: clamp(80px, 8vw, 150px); right: 4%; bottom: 6%; }
.tw6 { width: clamp(50px, 5vw, 90px); left: 22%; bottom: 0; filter: blur(1px); }
.temporada-inner { position: relative; z-index: 1; display: grid; gap: clamp(30px, 4vw, 70px); align-items: center; max-width: 1400px; margin: 0 auto; }
.temporada-kicker {
	display: inline-block; margin: 0 0 .6em;
	font-weight: 800; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(12px, .9vw, 15px);
	color: var(--preto); background: var(--ouro); padding: .45em 1em; border-radius: 99px;
}
.temporada-logo img { width: clamp(260px, 32vw, 560px); height: auto; filter: drop-shadow(0 0 24px rgba(233, 196, 106, .35)); }
.temporada-desc { font-size: clamp(17px, 1.35vw, 25px); max-width: 26em; margin: 1em 0 1.4em; }
.temporada-desc strong { color: var(--ouro-claro); }
.button-ouro { background: var(--ouro); color: var(--preto); box-shadow: 0 6px 0 #8a6a22; }
.button-ouro:hover { background: var(--ouro-claro); }
.temporada-passadas { margin-top: clamp(30px, 3vw, 56px); }
.temporada-passadas > p { font-family: var(--f-script); font-size: clamp(22px, 1.6vw, 30px); color: var(--ouro-claro); margin-bottom: .4em; }
.passadas-logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2vw, 36px); }
.passadas-logos img { height: clamp(50px, 5vw, 86px); width: auto; filter: grayscale(1) brightness(1.5); opacity: .6; transition: filter .4s, opacity .4s, transform .4s; }
.passadas-logos img:hover { filter: none; opacity: 1; transform: rotate(-4deg) scale(1.08); }
.passada-texto { font-family: var(--f-script); font-weight: 700; font-size: clamp(30px, 2.6vw, 48px); color: var(--creme); opacity: .6; }
.temporada-foto { position: relative; }
.temporada-produto { width: 100%; max-width: 680px; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); animation: bob 5s ease-in-out infinite; }
.carimbo {
	position: absolute; z-index: 2; top: -4%; right: 2%;
	width: clamp(110px, 10vw, 170px); aspect-ratio: 1;
	display: grid; place-items: center;
	border-radius: 50%; background: var(--tijolo); color: var(--creme-2);
	box-shadow: 0 0 0 4px var(--preto), 0 0 0 7px var(--ouro);
}
.carimbo svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spinLeft 14s linear infinite; }
.carimbo text { font-family: var(--f-body); font-weight: 800; font-size: 17px; letter-spacing: 2px; fill: var(--creme-2); }
.carimbo span { font-family: var(--f-script); font-weight: 700; font-size: clamp(28px, 2.4vw, 42px); transform: rotate(-10deg); }
@media (min-width: 900px) { .temporada-inner { grid-template-columns: 1fr 1.1fr; } }

/* ==========================================================================
   EMPÓRIO — prateleira de madeira
   ========================================================================== */
.flavours-section, .emporio { position: relative; overflow-x: clip; }
.emporio { padding: clamp(70px, 9vw, 160px) 5% clamp(60px, 7vw, 120px); }
.emporio-heading .tilt { color: var(--tijolo); }
.ramo-deco { position: absolute; top: 4%; width: clamp(160px, 18vw, 320px); aspect-ratio: 3 / 4; height: auto; opacity: .12; pointer-events: none; }
.ramo-deco-l { left: -3%; }
.ramo-deco-r { right: -3%; transform: scaleX(-1); }

.estante { max-width: 1300px; margin: clamp(20px, 3vw, 60px) auto 0; }
.prateleira { position: relative; margin-top: clamp(30px, 4vw, 70px); }
.prateleira::after {
	content: ""; display: block; position: relative; z-index: 1;
	height: clamp(18px, 1.7vw, 30px); margin: 0 -1%;
	border-radius: 5px;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 38px),
		linear-gradient(180deg, #B07440 0%, var(--madeira) 45%, var(--madeira-esc) 100%);
	box-shadow: 0 4px 0 var(--madeira-esc), 0 26px 30px -10px rgba(46, 27, 18, .45);
}
.prateleira-placa {
	position: absolute; z-index: 3; left: 1%; bottom: 0;
	transform: translateY(80%) rotate(-4deg);
	margin: 0;
	background: var(--lousa); color: var(--giz);
	font-family: var(--f-script); font-weight: 700; font-size: clamp(20px, 1.6vw, 28px); line-height: 1;
	padding: .2em .8em .3em; border-radius: 6px;
	border: 3px solid var(--madeira);
	box-shadow: 0 6px 10px rgba(0, 0, 0, .3);
}
.produtos {
	--h: clamp(140px, 14vw, 240px);
	display: flex; align-items: flex-end; justify-content: space-around;
	gap: clamp(10px, 2vw, 40px);
	padding: 0 3%;
	margin-bottom: -2px;
}
.produto {
	position: relative; z-index: 2;
	display: flex; align-items: flex-end; justify-content: center;
	height: var(--h);
	background: none; border: 0; padding: 0; cursor: pointer;
}
.produto img {
	height: calc(100% * var(--s, 1)); width: auto; max-width: none;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 10px 8px rgba(46, 27, 18, .3));
	transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.produto:hover img, .produto:focus-visible img, .produto.aberto img { transform: translateY(-16px) rotate(-4deg) scale(1.07); }
.etiqueta {
	position: absolute; z-index: 6; bottom: calc(100% + 6px); left: 50%;
	width: max-content; max-width: 230px;
	transform: translate(-50%, 14px) rotate(-2deg);
	background: var(--creme-2); color: var(--cafe);
	border: 3px solid var(--cafe); border-radius: 14px;
	padding: .65em .9em;
	font-size: clamp(13px, .9vw, 16px); line-height: 1.3; text-align: left;
	box-shadow: 0 6px 0 rgba(46, 27, 18, .25);
	opacity: 0; pointer-events: none;
	transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.etiqueta b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 1.18em; margin-bottom: .15em; }
.etiqueta::after {
	content: ""; position: absolute; left: 50%; top: 100%;
	width: 14px; height: 14px; background: var(--creme-2);
	border-right: 3px solid var(--cafe); border-bottom: 3px solid var(--cafe);
	transform: translate(-50%, -6px) rotate(45deg);
}
.produto:hover .etiqueta, .produto:focus-visible .etiqueta, .produto.aberto .etiqueta { opacity: 1; transform: translate(-50%, -14px) rotate(-2deg); }
.emporio-cta { text-align: center; margin-top: clamp(60px, 6vw, 110px); }
.emporio-obs { font-size: clamp(13px, .9vw, 15px); opacity: .7; margin-top: 1.2em; }
@media (max-width: 799px) {
	.produtos {
		--h: 150px;
		justify-content: flex-start; gap: 26px;
		overflow-x: auto; scrollbar-width: none;
		padding: 150px 8% 0;
		margin-top: -110px;
	}
	.produtos::-webkit-scrollbar { display: none; }
	.produto { flex-shrink: 0; }
	.etiqueta { max-width: 190px; }
}

/* ==========================================================================
   A MAIOR REDE — números e prêmios
   ========================================================================== */
.rede { padding: clamp(80px, 9vw, 170px) 6%; overflow: hidden; }
.rede .section-content { max-width: 1400px; margin: 0 auto; }
.rede-topo { display: grid; gap: clamp(20px, 3vw, 60px); align-items: center; }
.rede-heading { font-size: clamp(34px, 5vw, 92px); line-height: 1.04; margin-bottom: .5em; }
.rede-heading .sticker { display: inline-block; }
.rede-heading .tilt { color: var(--mostarda); transform: rotate(-4deg); font-size: 1.25em; }
.rede-heading .sticker:last-child { font-size: .62em; }
.rede-texto p { font-size: clamp(17px, 1.3vw, 24px); max-width: 26em; font-weight: 500; }
.rede-mapa img { width: 100%; max-width: 640px; margin: 0 auto; animation: bob 6s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); }
@media (min-width: 900px) { .rede-topo { grid-template-columns: 1.1fr 1fr; } }

.numeros {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: clamp(24px, 3vw, 50px) 4%;
	margin: clamp(40px, 5vw, 90px) 0;
	padding: clamp(30px, 3vw, 50px) 0;
	border-top: 3px dashed currentColor; border-bottom: 3px dashed currentColor;
	border-color: rgba(246, 235, 214, .25);
}
.numero { text-align: center; }
.numero-valor {
	display: block;
	font-family: var(--f-display); font-weight: 900; font-variation-settings: 'SOFT' 100, 'WONK' 1;
	font-size: clamp(54px, 7vw, 130px); line-height: 1;
	color: var(--mostarda);
	font-variant-numeric: tabular-nums;
}
.numero-valor .pre, .numero-valor .suf { font-size: .55em; vertical-align: .35em; }
.numero-label { display: block; margin-top: .5em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(12px, .95vw, 16px); opacity: .9; }
@media (min-width: 900px) { .numeros { grid-template-columns: repeat(4, 1fr); } }

.premios-titulo { text-align: center; font-size: clamp(36px, 4.4vw, 84px); margin-bottom: .5em; }
.premios-titulo .sticker { display: inline-block; transform: rotate(-3deg); }
.premios-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 2.6vw, 46px); }
.premio {
	margin: 0; width: clamp(150px, 16vw, 260px);
	background: #fff; padding: 10px 10px 0;
	transform: rotate(var(--r, 0deg));
	box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.premio:hover { transform: rotate(0) scale(1.06); }
.premio img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--creme); }
.premio-foto img { object-fit: cover; }
.premio figcaption { font-family: var(--f-script); font-weight: 700; font-size: clamp(18px, 1.3vw, 23px); line-height: 1.1; color: var(--cafe); text-align: center; padding: .45em .2em .6em; }

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.testimonials { padding: clamp(70px, 8vw, 150px) 0 clamp(40px, 4vw, 80px); overflow: hidden; }
.testimonials-heading { text-align: center; line-height: 1; padding: 0 5%; }
.testimonials-heading .small { display: block; font-family: var(--f-script); font-weight: 700; font-size: clamp(28px, 3vw, 56px); margin-bottom: .1em; }
.testimonials-heading .sticker { display: inline-block; font-size: clamp(52px, 10vw, 170px); transform: rotate(-4deg); }

.testimonials-wrapper { padding: clamp(70px, 10%, 220px) 0; }
.testimonials-track { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 50px); width: max-content; animation: marquee 45s linear infinite; }
.testimonials-wrapper:hover .testimonials-track { animation-play-state: paused; }
.testimony-item { width: clamp(240px, 24vw, 420px); flex-shrink: 0; }
.testimony-item:nth-child(5n + 2) { transform: translateY(-20%); }
.testimony-item:nth-child(5n + 3) { transform: translateY(20%); }
.testimony-item:nth-child(5n + 5) { transform: translateY(-14%); }
.testimony-card {
	-webkit-mask-image: var(--mask-wave); mask-image: var(--mask-wave);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	padding: clamp(28px, 2.4vw, 46px) clamp(22px, 2vw, 40px);
	text-align: center;
	transition: transform .5s ease;
}
.testimony-item:hover .testimony-card { transform: rotate(-3deg) scale(1.03); }
.testimony-text { font-family: var(--f-display); font-weight: 800; font-variation-settings: 'SOFT' 100; font-size: clamp(19px, 1.5vw, 30px); line-height: 1.2; }
.testimony-name { font-size: clamp(14px, 1vw, 18px); text-transform: uppercase; letter-spacing: .15em; margin-top: .8em; }
.testimony-shape { display: block; width: 52%; aspect-ratio: 1; height: auto; margin: 1em auto 0; animation: waveLeft 4s ease-in-out infinite; overflow: visible; }
.testimony-item.t1 .testimony-card { background: var(--choco-2); color: var(--creme); }
.testimony-item.t2 .testimony-card { background: var(--mostarda); color: var(--cafe); }
.testimony-item.t3 .testimony-card { background: var(--folha); color: var(--creme-2); }
.testimony-item.t4 .testimony-card { background: var(--tijolo); color: var(--pessego); }
.testimony-item.t5 .testimony-card { background: var(--caramelo-forte); color: var(--cafe); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-intro-block {
	font-family: var(--f-display); font-weight: 900; font-variation-settings: 'SOFT' 100;
	font-size: clamp(36px, 8.2vw, 176px);
	text-transform: uppercase; text-align: center; line-height: 1.15;
	padding: 0 5%;
	transition: color .5s ease, background-color .5s ease;
}
.faq-intro-block:nth-child(1) { color: var(--creme-2); background: var(--tijolo); }
.faq-intro-block:nth-child(1):hover { color: var(--tijolo); background: var(--pessego); }
.faq-intro-block:nth-child(2) { color: var(--mostarda); background: var(--choco-2); }
.faq-intro-block:nth-child(2):hover { color: var(--choco-2); background: var(--mostarda); }
.faq-intro-block:nth-child(3) { color: var(--folha-esc); background: var(--folha-clara); }
.faq-intro-block:nth-child(3):hover { color: var(--folha-clara); background: var(--folha-esc); }

.faq-main { padding-left: 6%; padding-right: 6%; }
.faq .heading { position: relative; text-align: center; font-size: clamp(40px, 9vw, 140px); width: fit-content; margin: 0 auto .4em; line-height: 1; }
.faq .heading .sticker { display: inline-block; }
.faq .heading .sticker:last-of-type { transform: rotate(-6deg) translateY(-10%); font-size: 1.12em; }
.faq .heading .shape { position: absolute; aspect-ratio: 1; height: auto; overflow: visible; }
.faq .heading .shape-1 { width: 20%; left: -12%; top: 30%; animation: spinLeft 6s linear infinite; }
.faq .heading .shape-2 { width: 26%; right: -16%; top: -18%; animation: waveRight 3.5s ease-in-out infinite; }

.faq-content { max-width: 900px; margin: 0 auto; }
.faq-item { margin: clamp(12px, 1vw, 20px) 0; }
.faq-question {
	width: 100%;
	display: flex; justify-content: space-between; align-items: center; gap: 1em;
	text-align: left;
	padding: 1em 1.4em;
	border: 0; cursor: pointer;
	border-radius: clamp(18px, 1.6vw, 28px);
	background: var(--mostarda); color: var(--cafe);
	transition: color .5s ease, background-color .5s ease, border-radius .3s ease;
}
.faq-question .question { font-weight: 700; font-size: clamp(16px, 1.25vw, 24px); }
.faq-item .arrow { flex-shrink: 0; width: clamp(26px, 2vw, 40px); aspect-ratio: 1; transition: transform .3s ease; }
.faq-item .arrow svg { width: 100%; height: 100%; display: block; }
.faq-item .arrow circle { fill: var(--cafe); transition: fill .5s ease; }
.faq-item .arrow path { stroke: var(--mostarda); transition: stroke .5s ease; }
.faq-item:hover .faq-question, .faq-item.active .faq-question { background: var(--tijolo); color: var(--creme-2); }
.faq-item:hover .arrow circle, .faq-item.active .arrow circle { fill: var(--mostarda); }
.faq-item:hover .arrow path, .faq-item.active .arrow path { stroke: var(--tijolo); }
.faq-item.active .faq-question { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.faq-item.active .arrow { transform: rotate(180deg); }
.faq-answer {
	height: 0; overflow: hidden;
	background: var(--tijolo); color: var(--creme-2);
	border-radius: 0 0 clamp(18px, 1.6vw, 28px) clamp(18px, 1.6vw, 28px);
	font-size: clamp(15px, 1.1vw, 21px);
	margin-top: -1px;
}
.faq-answer p { padding: 0 1.5em 1.3em; margin: 0; }

.running-text-wrapper { overflow: hidden; white-space: nowrap; width: 100%; padding: clamp(50px, 6vw, 130px) 0; }
.running-text { display: inline-flex; align-items: center; width: max-content; animation: marquee 40s linear infinite; }
.ticker-item {
	display: flex; align-items: center;
	font-family: var(--f-display); font-weight: 900; font-variation-settings: 'SOFT' 100;
	font-size: clamp(54px, 8vw, 170px); text-transform: uppercase; line-height: 1;
	color: rgba(247, 235, 211, .16);
}
.ticker-item .text { padding: 0 .4em; }
.ticker-item .icon { width: clamp(64px, 9vw, 190px); aspect-ratio: 1; height: auto; flex-shrink: 0; animation: spinLeft 6s linear infinite; }

/* ==========================================================================
   JUNTO DOS BÃO (tilt 3D)
   ========================================================================== */
.bring-together { padding-left: 5%; padding-right: 5%; overflow: hidden; }
.bring-together-inner { position: relative; }
.bring-together .heading { position: relative; z-index: 3; text-align: center; font-size: clamp(30px, 7.4vw, 140px); line-height: 1.05; width: fit-content; margin: 0 auto; transform: translateY(14%); }
.bring-together .heading .sticker { display: inline-block; white-space: nowrap; }
.bring-together .heading .sticker:nth-of-type(1) { transform: rotate(3deg) translateY(5%); }
.bring-together .heading .sticker:nth-of-type(2) { font-size: .8em; transform: rotate(-6deg) translate(-28%, 8%); }
.bring-together .heading .sticker:nth-of-type(3) { font-size: 1.3em; color: var(--tijolo); transform: rotate(4deg) translate(22%, 0); }

.tilt-scene { perspective: 1000px; }
.bring-together .image-container {
	position: relative; width: 100%; padding-top: 60%;
	-webkit-mask-image: var(--mask-blob); mask-image: var(--mask-blob);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	transform-style: preserve-3d; will-change: transform;
}
.bring-together .image-container img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; transform: scale(1.08); }
.bring-together .items { position: relative; z-index: 3; display: flex; justify-content: space-between; transform: translateY(-38%); padding: 0 2%; }
.bring-together .item { position: relative; display: block; width: clamp(110px, 16vw, 280px); color: inherit; text-decoration: none; }
.bring-together .item .icon { width: 100%; aspect-ratio: 1; height: auto; display: block; overflow: visible; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 8px 8px rgba(46, 27, 18, .3)); }
.bring-together .item .text { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(18px, 3vw, 56px); text-transform: uppercase; line-height: .9; text-align: center; white-space: nowrap; transition: transform .5s ease; }
.bring-together .item .text .sticker { display: inline-block; }
.bring-together .item .text .sticker:first-child { transform: rotate(6deg); }
.bring-together .item .text .sticker:last-child { transform: rotate(-6deg); color: var(--tijolo); }
.bring-together .item:first-child:hover .icon { transform: translate(-10%, -10%) rotate(-25deg); }
.bring-together .item:last-child:hover .icon { transform: translate(10%, -10%) rotate(25deg); }
.bring-together .item:hover .text { transform: translate(-50%, -50%) rotate(-8deg) scale(1.05); }
@media (min-width: 750px) { .bring-together-inner { width: 82%; margin: 0 auto; } }
@media (min-width: 750px) and (orientation: landscape) { .bring-together-inner { width: 70%; } }

/* ==========================================================================
   GALERIA + TICKER
   ========================================================================== */
.stores { padding-top: .5em; overflow: hidden; }
.stores-heading { text-align: center; font-size: clamp(30px, 4vw, 72px); }
.stores-heading .sticker { display: inline-block; transform: rotate(-2deg); }
.gallery { padding: clamp(40px, 4vw, 80px) 0 0; }
.gallery-track { display: flex; gap: clamp(20px, 2.4vw, 44px); width: max-content; padding: 20px 0; animation: marquee 60s linear infinite; }
.gallery:hover .gallery-track { animation-play-state: paused; }
.polaroid {
	margin: 0; flex-shrink: 0;
	width: clamp(210px, 20vw, 340px);
	background: #fff; padding: 12px 12px 0;
	box-shadow: 0 14px 30px rgba(46, 27, 18, .22);
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.polaroid:nth-child(odd) { transform: rotate(-3deg); }
.polaroid:nth-child(even) { transform: rotate(2.5deg) translateY(16px); }
.polaroid:hover { transform: rotate(0) scale(1.06); z-index: 2; }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid figcaption { font-family: var(--f-script); font-weight: 700; font-size: clamp(22px, 1.7vw, 32px); text-align: center; color: var(--cafe); padding: .25em 0 .35em; }

.stores .running-text-wrapper { padding: clamp(40px, 5vw, 100px) 0 clamp(50px, 6vw, 120px); }
.stores .ticker-item { text-transform: none; color: inherit; }
.stores .ticker-item .sticker { color: var(--tijolo); filter: none; -webkit-text-stroke: 0; font-style: italic; }
.stores .ticker-item .icon { width: clamp(50px, 5.5vw, 120px); animation: waveLeft 2.4s ease-in-out infinite; }

/* ==========================================================================
   BORA PROSEAR
   ========================================================================== */
.collaborate { position: relative; overflow: hidden; background: var(--creme); }
.collaborate-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.collaborate .text-wrapper { width: 100%; background: var(--choco-2); color: var(--creme); padding: clamp(50px, 6vw, 110px) 6%; text-align: center; }
.collaborate-heading { font-size: clamp(42px, 5vw, 110px); line-height: 1; margin-bottom: .45em; }
.collaborate-heading .sticker { display: inline-block; transform: rotate(-3deg); }
.collaborate .main-text { font-size: clamp(17px, 1.3vw, 25px); max-width: 26em; margin: 0 auto 1.4em; }
.collaborate .buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.collaborate-button {
	display: inline-flex; align-items: center; gap: .7em;
	background: var(--creme-2); color: var(--cafe);
	text-decoration: none; font-weight: 700;
	font-size: clamp(16px, 1.2vw, 22px);
	padding: .5em 1.4em .5em .6em; border-radius: 99px;
	min-width: min(100%, 320px);
	transition: background-color .4s ease, color .4s ease, transform .4s ease;
}
.collaborate-button .icon { width: 2em; height: 2em; padding: .35em; border-radius: 50%; background: var(--mostarda); color: var(--cafe); flex-shrink: 0; transition: transform .5s ease; }
.collaborate-button:hover { background: var(--mostarda); transform: translateX(6px); }
.collaborate-button:hover .icon { background: var(--cafe); color: var(--mostarda); transform: rotate(-15deg); }
.collaborate .address { margin-top: 1.6em; opacity: .85; font-size: clamp(15px, 1.05vw, 19px); }

.form-container {
	width: 88%; margin: -30px auto 60px; position: relative; z-index: 2;
	background: var(--creme-2);
	border-radius: clamp(18px, 1.6vw, 32px);
	padding: clamp(24px, 3vw, 60px);
	box-shadow: 0 10px 40px rgba(46, 27, 18, .14);
}
.prosa-form p { margin: 0 0 1em; }
.prosa-form label:not(.chip) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.prosa-form input[type="text"], .prosa-form input[type="tel"], .prosa-form textarea {
	width: 100%; border: 2px solid transparent;
	background: var(--creme); color: var(--cafe);
	font: inherit; font-size: clamp(16px, 1.05vw, 19px);
	padding: .85em 1em; border-radius: 14px;
	transition: border-color .3s ease, background-color .3s ease;
	resize: vertical;
}
.prosa-form input:focus, .prosa-form textarea:focus { outline: none; border-color: var(--caramelo-forte); background: #fff; }
.prosa-form ::placeholder { color: rgba(46, 27, 18, .45); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; cursor: pointer; font-weight: 700; font-size: clamp(14px, .95vw, 17px); padding: .45em 1em; border-radius: 99px; border: 2px solid var(--choco-3); transition: background-color .3s, color .3s, transform .3s; }
.chip input:checked + span { background: var(--choco-2); border-color: var(--choco-2); color: var(--mostarda); transform: rotate(-3deg); }
.chip input:focus-visible + span { outline: 3px solid var(--mostarda); outline-offset: 2px; }
.form-error { color: var(--tijolo); font-weight: 700; }
.submit {
	display: block; margin: 1.2em auto 0;
	font-family: var(--f-display); font-weight: 800; font-variation-settings: 'SOFT' 100;
	font-size: clamp(19px, 1.4vw, 27px);
	background: var(--tijolo); color: var(--creme-2);
	border: 0; border-radius: 99px; padding: .6em 1.8em; cursor: pointer;
	box-shadow: 0 6px 0 var(--tijolo-esc);
	transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.submit:hover { background: var(--tijolo-esc); transform: scaleX(.94) rotate(-2deg); }
.submit:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--tijolo-esc); }

@media (min-width: 900px) {
	.collaborate-inner { padding: clamp(30px, 3vw, 60px) 8%; }
	.collaborate .text-wrapper { width: 46%; position: relative; isolation: isolate; background: transparent; text-align: left; padding: clamp(50px, 5vw, 100px) 0; }
	.collaborate .text-wrapper::before { content: ""; position: absolute; top: 0; bottom: 0; right: -6%; left: -100vw; background: var(--choco-2); border-radius: 0 40px 40px 0; z-index: -1; }
	.collaborate .main-text { margin-left: 0; }
	.collaborate .buttons { align-items: flex-start; }
	.form-container { width: 48%; margin: 0; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--creme); color: var(--cafe); }
.footer-links { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; gap: 50px 0; padding-top: clamp(70px, 8vw, 150px); padding-bottom: clamp(70px, 8vw, 150px); }
.footer-menus { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.footer-menus .widget { width: 100%; text-align: center; }
.widget-title { font-family: var(--f-display); font-size: clamp(24px, 1.8vw, 36px); margin-bottom: .4em; }
.footer-menus ul { list-style: none; margin: 0; padding: 0; }
.footer-menus li { margin: 8px 0; }
.footer-menus a { text-decoration: none; font-weight: 700; font-size: clamp(16px, 1.15vw, 22px); transition: color .4s ease; }
.footer-menus a:hover { color: var(--tijolo); }
.footer-logo-wrapper { width: 60%; margin: 0 auto; text-align: center; }
.footer-logo { width: clamp(120px, 12vw, 220px); margin: 0 auto; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.footer-logo:hover { transform: rotate(-14deg) scale(1.06); }
.tagline { text-transform: uppercase; font-size: clamp(26px, 6vw, 58px); line-height: 1; margin-top: .3em; }
.tagline span { display: block; width: fit-content; margin: 0 auto; }
.tagline span:nth-child(1) { transform: translate(-20%, 0) rotate(-6deg); }
.tagline span:nth-child(2) { transform: translate(90%, -55%) rotate(4deg); font-size: .7em; }
.tagline span:nth-child(3) { transform: translate(-25%, -45%) rotate(-5deg); }
.tagline span:nth-child(4) { transform: translate(10%, -45%) rotate(-3deg) scale(1.35); color: var(--tijolo); }
.footer-slogan { font-family: var(--f-script); font-weight: 700; font-size: clamp(22px, 1.7vw, 30px); color: var(--choco-3); margin: 0; }
.copyright { background: var(--choco); color: var(--creme); font-weight: 600; text-align: center; padding: 18px 5%; font-size: clamp(13px, .9vw, 16px); display: flex; flex-wrap: wrap; justify-content: center; }
.copyright a { color: var(--mostarda); text-decoration: none; }
.copyright .separator { display: none; }
@media (min-width: 500px) { .footer-menus .widget { width: auto; text-align: left; } .copyright .separator { display: inline; } }
@media (min-width: 900px) {
	.footer-links { padding-left: 10%; padding-right: 10%; }
	.footer-menus { width: 58%; }
	.footer-logo-wrapper { width: 28%; margin: 0; }
}

/* ==========================================================================
   Acessibilidade: movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
	[data-marquee] { animation: none !important; flex-wrap: wrap; width: auto !important; justify-content: center; }
	.neon { animation: none; }
}

/* ===== Cheirin Bão Anchieta (Aquila, 27/10/2026) ===== */
.temporada-logo-texto { font-family: var(--f-display); font-size: clamp(56px, 7.5vw, 132px); line-height: .95; color: var(--ouro-claro); margin: .1em 0 0; }
.temporada-logo-texto .tilt { display: inline-block; transform: rotate(-4deg); }
.temporada-produto-foto { max-width: 520px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: clamp(18px, 1.6vw, 30px); border: 6px solid var(--creme-2, #F7EBD3); }
.bring-together .image-container img { object-position: 50% 50%; }
/* galeria: cada polaroid no formato nativo da foto (sem recorte nem esticar) */
.polaroid { width: auto; }
.polaroid img { width: auto; height: clamp(240px, 24vw, 400px); aspect-ratio: auto; object-fit: contain; }
/* título de 3 linhas do card "O que é" */
.about .card-heading-3 { font-size: clamp(26px, 6.4vw, 92px); line-height: 1.28; }
@media (min-width: 900px) { .about .card-heading-3 { font-size: clamp(30px, 3.7vw, 86px); } }
.about .card-heading-3 .sticker { display: inline-block; }
.about .card:not(.longer-text) .card-heading-3 span:last-child { transform: rotate(-3deg) translate(3%, 8%); }
.about .card-heading { line-height: 1.28; }
/* foto do André apontando para a logo: quadro mais alto para a fachada aparecer inteira abaixo do título */
.bring-together .image-container { padding-top: 78%; }
.bring-together .image-container img { object-position: 50% 0; transform: scale(1.02); }
.bring-together .tilt-scene { margin-top: clamp(40px, 7vw, 130px); }
/* foto vertical inteira (4:5): André, copo e a logo da fachada */
.bring-together .tilt-scene { max-width: min(720px, 92%); margin-left: auto; margin-right: auto; }
.bring-together .image-container { padding-top: 125%; }
.bring-together .image-container img { object-position: 50% 50%; transform: scale(1.03); }

.avaliacoes-cta { text-align: center; margin-top: clamp(18px, 2vw, 32px); }
.form-obs { font-size: 14px; opacity: .75; margin-top: .6em; }
/* títulos dos cards: cada linha com respiro, sem encavalar */
.about .card-heading .sticker { line-height: 1.18; }
.about .card-heading .larger-text { margin-top: .22em; }
.about .card:not(.longer-text) .card-heading span.larger-text:last-child { transform: rotate(-5deg) translate(2%, 6%); }

/* ===== História do André (vídeo) ===== */
.historia { background: var(--choco); color: var(--creme); padding: clamp(70px, 9vw, 160px) 5%; overflow: hidden; }
.historia-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: clamp(36px, 5vw, 90px); align-items: center; }
@media (min-width: 900px) { .historia-inner { grid-template-columns: 1.1fr .9fr; } }
.historia-kicker { font-family: var(--f-script); font-weight: 700; font-size: clamp(24px, 2.2vw, 38px); color: var(--ouro-claro); margin-bottom: .2em; }
.historia-heading { font-size: clamp(40px, 5.6vw, 96px); line-height: 1.2; margin-bottom: .5em; }
.historia-heading .sticker { display: inline-block; }
.historia-heading .tilt { transform: rotate(-4deg) translate(4%, 6%); color: var(--mostarda); }
.historia-texto p { font-size: clamp(17px, 1.3vw, 22px); line-height: 1.55; max-width: 34em; margin-bottom: 1em; }
.historia-citacao { margin: 1.6em 0 0; padding-left: 1em; border-left: 4px solid var(--mostarda); font-family: var(--f-display); font-weight: 800; font-style: italic; font-size: clamp(22px, 2vw, 34px); line-height: 1.25; }
.historia-citacao cite { display: block; margin-top: .6em; font-family: var(--f-body); font-style: normal; font-weight: 600; font-size: clamp(13px, .95vw, 16px); letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-claro); }
.historia-video { margin: 0 auto; width: min(100%, 400px); transform: rotate(2deg); }
.historia-video video { display: block; width: 100%; aspect-ratio: 9 / 16; height: auto; object-fit: cover; border-radius: clamp(18px, 1.6vw, 28px); border: 8px solid var(--creme-2); background: var(--preto); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.historia-video figcaption { text-align: center; font-family: var(--f-script); font-weight: 700; font-size: clamp(20px, 1.6vw, 28px); color: var(--ouro-claro); margin-top: .6em; transform: rotate(-2deg); }