/* Organic design system tokens + components */
/* Organic — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo:wght@400&family=Figtree:wght@400;600;700&display=swap');

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — rounded frame: everything softens, small controls go pill — */
.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }



/* Pacume site styles */

:root{ --leading:28px; --half:14px; --edge:clamp(20px,5vw,72px); --measure:58ch; }
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }
body{margin:0; text-wrap:pretty; overflow-x:clip;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 var(--edge);}
a{color:var(--color-accent-700); text-decoration:none;}
a:hover{color:var(--color-accent-800); text-decoration:underline;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.reveal-left{transform:translateX(-28px);}
.reveal-left.in{transform:none;}
.reveal-right{transform:translateX(28px);}
.reveal-right.in{transform:none;}
.reveal-stagger.in > *{transition-delay:calc(var(--i,0) * 80ms);}
@media (prefers-reduced-motion:reduce){ .reveal, .reveal-left, .reveal-right{opacity:1; transform:none; transition:none;} }

/* — header — */
.site-header{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--color-divider); transition:box-shadow .3s ease, padding .3s ease;}
.site-header.scrolled{box-shadow:var(--shadow-sm);}
.nav{padding-inline:max(var(--edge), calc((100% - 1200px)/2 + var(--edge))); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); height:78px;}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.brand img{height:52px; width:52px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.nav-links{display:flex; align-items:center; gap:var(--space-6); list-style:none; margin:0; padding:0;}
.nav-links a{font-size:15px; font-weight:600; color:var(--color-text); position:relative; padding-bottom:2px;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--color-accent); transition:width .25s ease;}
.nav-links a:hover{color:var(--color-accent-700); text-decoration:none;}
.nav-links a:hover::after{width:100%;}
.nav-actions{display:flex; align-items:center; gap:var(--space-3);}
.burger{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--color-text);}
@media (max-width:920px){ .nav-links{display:none;} .burger{display:block;} }
.mobile-menu{display:none; flex-direction:column; gap:2px; padding:var(--space-3) var(--edge) var(--space-4); border-top:1px solid var(--color-divider);}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 4px; font-size:16px; font-weight:600; color:var(--color-text); border-bottom:1px solid var(--color-divider);}
.mobile-menu a:hover{color:var(--color-accent-700); text-decoration:none;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:13px 27px; font-family:var(--font-body); font-weight:700; font-size:15px; cursor:pointer; border:2px solid transparent; transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease;}
.btn:active{transform:scale(0.96);}
.btn-primary{background:var(--color-accent); color:#fff9f2;}
.btn-primary:hover{background:var(--color-accent-600); text-decoration:none; color:#fff9f2; box-shadow:var(--shadow-md); transform:translateY(-2px);}
.btn-secondary{background:transparent; border-color:var(--color-accent); color:var(--color-accent-700);}
.btn-secondary:hover{background:var(--color-accent-100); text-decoration:none; transform:translateY(-2px);}
.btn-whatsapp{background:var(--color-accent-2-700); color:#fff9f2;}
.btn-whatsapp:hover{background:var(--color-accent-2-800); text-decoration:none; color:#fff9f2; transform:translateY(-2px);}
.btn-light{background:#fff9f2; color:var(--color-accent-800);}
.btn-light:hover{background:var(--color-accent-100); text-decoration:none; transform:translateY(-2px);}
.btn-sm{padding:10px 19px; font-size:13.5px;}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}
::selection{background:var(--color-accent-200);}

.kicker{display:block; font-size:13px; line-height:var(--half); letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--color-accent-700); margin:0 0 var(--space-3);}
.eyebrow-2{color:var(--color-accent-2-700);}

/* — hero — */
.hero{position:relative; isolation:isolate; min-height:min(92vh,880px); display:flex; align-items:center; overflow:hidden; margin:0 calc(-1 * var(--edge)); padding:0 var(--edge);}
.hero-bg{position:absolute; inset:0; z-index:-2;}
.hero-bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.02);}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,13,8,.72) 0%, rgba(20,13,8,.78) 45%, rgba(20,13,8,.94) 100%);}
.hero-inner{position:relative; z-index:1; max-width:760px; padding:calc(3*var(--leading)) 0;}
.hero-tags{display:flex; gap:var(--space-2); flex-wrap:wrap; margin:0 0 var(--space-4);}
.tag{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700;}
.tag-accent{background:var(--color-accent-100); color:var(--color-accent-700);}
.tag-accent-2{background:var(--color-accent-2-100); color:var(--color-accent-2-700);}
.tag-onphoto{background:rgba(255,249,242,.16); color:#fff9f2; border:1px solid rgba(255,249,242,.4); backdrop-filter:blur(3px);}
.display{font-family:var(--font-heading); font-weight:400; font-size:clamp(36px,5.4vw,68px); line-height:1.1; margin:0 0 var(--space-4); letter-spacing:-0.01em; color:#fff9f2; text-shadow:0 2px 4px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.45);}
.hero .sub{font-size:19px; line-height:1.6; max-width:54ch; margin:0 0 var(--half); color:#fff9f2; text-shadow:0 1px 3px rgba(0,0,0,.5);}
.hero .quip{font-size:14.5px; font-weight:700; color:var(--color-accent-2-200); margin:0 0 var(--leading);}
.hero .row{display:flex; gap:var(--space-3); flex-wrap:wrap;}
.scroll-cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); color:rgba(255,249,242,.75); z-index:1; animation:bob 2.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}
@media (prefers-reduced-motion:reduce){ .scroll-cue{animation:none;} }

/* — marquee — */
.marquee{background:var(--color-neutral-900); overflow:hidden; padding:16px 0; margin:0 calc(-1 * var(--edge));}
.marquee-track{display:flex; gap:48px; width:max-content; animation:scrollmq 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;} }
@keyframes scrollmq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-track > *{flex-shrink:0;}
.marquee-item{display:flex; align-items:center; gap:14px; color:var(--color-neutral-200); font-size:14.5px; font-weight:700; white-space:nowrap;}
.marquee-item .sep{width:6px; height:6px; border-radius:50%; background:var(--color-accent-400);}

/* — section shell — */
section{padding:calc(2.5*var(--leading)) 0;}
.section-head{max-width:62ch; margin:0 0 calc(1.5*var(--leading));}
.section-title{font-family:var(--font-heading); font-weight:400; font-size:clamp(28px,3vw,40px); margin:0; line-height:1.15;}
.section-sub{font-size:16px; line-height:1.6; color:color-mix(in srgb, var(--color-text) 78%, transparent); margin:var(--space-3) 0 0; max-width:56ch;}

/* — identificação (cenas do dia a dia) — */
.scenes{display:flex; flex-wrap:wrap; gap:10px;}
.scene{background:var(--color-neutral-100); border-radius:999px; padding:10px 18px 10px 12px; display:flex; align-items:center; gap:10px; transition:transform .25s ease, background .25s ease;}
.scene:nth-child(3n+1){background:var(--color-accent-100);}
.scene:nth-child(3n+2){background:var(--color-accent-2-100);}
.scene:hover{transform:translateY(-3px);}
.scene .ic{width:30px; height:30px; border-radius:50%; background:#fff9f2; display:grid; place-items:center; color:var(--color-accent-700); flex-shrink:0;}
.scene span.txt{font-size:14px; font-weight:600; line-height:1.3;}

/* — sabores (linhas alternadas) — */
.flavor-row{display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:calc(1.5*var(--leading)) clamp(28px,5vw,80px); align-items:center; padding:calc(1.6*var(--leading)) 0; border-radius:calc(2*var(--radius-lg));}
.flavor-row:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,440px);}
.flavor-row:nth-child(even) .flavor-media{order:2;}
.flavor-row + .flavor-row{border-top:1px solid var(--color-divider);}
.flavor-media{position:relative; border-radius:calc(1.6*var(--radius-lg)); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:5/4;}
.flavor-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.flavor-row:hover .flavor-media img{transform:scale(1.05);}
.flavor-media .badge{position:absolute; top:16px; left:16px; background:rgba(255,249,242,.92); padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--color-accent-700);}
.flavor-copy .flavor-line{font-family:var(--font-heading); font-weight:400; font-size:24px; margin:0 0 8px; color:var(--color-accent-700);}
.flavor-copy h3{font-family:var(--font-heading); font-weight:400; font-size:32px; margin:0 0 10px;}
.flavor-copy p{font-size:15.5px; line-height:1.6; color:color-mix(in srgb, var(--color-text) 80%, transparent); margin:0 0 var(--space-4); max-width:46ch;}

/* — editorial feature — */
.editorial{position:relative; isolation:isolate; border-radius:calc(2*var(--radius-lg)); overflow:hidden; min-height:460px; display:flex; align-items:flex-end; margin:0;}
.editorial img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;}
.editorial::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,10,6,.9) 0%, rgba(15,10,6,.55) 55%, rgba(15,10,6,.25) 100%); z-index:-1;}
.editorial-copy{position:relative; z-index:1; padding:calc(2*var(--leading)) clamp(24px,4vw,56px); max-width:640px;}
.editorial-copy .quip{color:var(--color-accent-2-200); font-weight:700; font-size:14px; margin:0 0 8px; text-shadow:0 1px 3px rgba(0,0,0,.5);}
.editorial-copy h3{font-family:var(--font-heading); font-weight:400; font-size:clamp(26px,3.4vw,38px); color:#fff9f2; margin:0 0 14px; line-height:1.25; text-shadow:0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);}
.editorial-copy p{color:#fff9f2; font-size:15.5px; margin:0 0 var(--leading); max-width:52ch; text-shadow:0 1px 3px rgba(0,0,0,.5);}

/* — diferenciais — */
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:calc(1.5*var(--leading)) var(--leading);}
.feature{position:relative; padding-left:56px;}
.feature .ic{position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; background:var(--color-accent-100); color:var(--color-accent-700); display:grid; place-items:center;}
.feature h3{font-family:var(--font-heading); font-weight:400; font-size:20px; margin:0 0 6px;}
.feature p{font-size:14.5px; line-height:1.55; margin:0; color:color-mix(in srgb, var(--color-text) 78%, transparent);}

/* — momentos mosaico — */
.mosaic{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:var(--space-3);}
.mosaic-item{position:relative; border-radius:var(--radius-md); overflow:hidden;}
.mosaic-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.mosaic-item:hover img{transform:scale(1.07);}
.mosaic-item::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(32,22,14,.72) 0%, rgba(32,22,14,0) 55%);}
.mosaic-item span{position:absolute; left:12px; bottom:10px; z-index:1; color:#fff9f2; font-size:13px; font-weight:700;}
.m1{grid-column:span 2; grid-row:span 2;}
.m2{grid-column:span 2; grid-row:span 1;}
.m3{grid-column:span 1; grid-row:span 1;}
.m4{grid-column:span 1; grid-row:span 1;}
.m5{grid-column:span 2; grid-row:span 1;}
.m6{grid-column:span 2; grid-row:span 1;}
@media (max-width:820px){ .mosaic{grid-template-columns:repeat(2,1fr);} .m1,.m2,.m3,.m4,.m5,.m6{grid-column:span 1; grid-row:span 1;} .m1{grid-column:span 2; grid-row:span 2;} }

/* — eventos patch — */
.patch{background:var(--color-accent-2-100); border-radius:calc(2*var(--radius-lg)); padding:calc(2*var(--leading)) clamp(24px,4vw,64px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--leading) calc(2*var(--leading)); align-items:center;}
.patch h3{font-family:var(--font-heading); font-weight:400; font-size:30px; margin:0 0 var(--space-3);}
.patch p{font-size:16px; line-height:1.6; margin:0 0 var(--space-4); max-width:56ch; color:color-mix(in srgb, var(--color-text) 82%, transparent);}
.patch ul{margin:0 0 var(--space-4); padding-left:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.patch ul li{display:flex; gap:10px; font-size:14.5px; align-items:baseline;}
.patch ul li::before{content:"—"; color:var(--color-accent-2-700); flex-shrink:0;}
@media (max-width:760px){ .patch{grid-template-columns:1fr;} .patch ul{grid-template-columns:1fr;} }

/* — sobre — */
.about{display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:calc(1.5*var(--leading)) clamp(24px,5vw,72px); align-items:center;}
.about-figure{position:relative; border-radius:calc(2*var(--radius-lg)); overflow:hidden; box-shadow:var(--shadow-md);}
.about-figure img{width:100%; display:block;}
.about-copy blockquote{font-family:var(--font-heading); font-weight:400; font-size:22px; line-height:1.4; margin:var(--space-4) 0; color:var(--color-accent-700); max-width:46ch;}
.about-copy p{font-size:15.5px; line-height:1.65; color:color-mix(in srgb, var(--color-text) 82%, transparent); margin:0 0 var(--space-4); max-width:52ch;}
.about-copy .sig{font-family:var(--font-heading); font-size:18px; color:var(--color-text); margin:0 0 var(--leading);}
@media (max-width:820px){ .about{grid-template-columns:1fr;} }

/* — video — */
.video-section{border-radius:calc(2*var(--radius-lg)); overflow:hidden; position:relative; min-height:440px; display:flex; align-items:center; justify-content:center;}
.video-frame{position:absolute; inset:0;}
.video-frame img, .video-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.video-frame video{z-index:1; opacity:0; transition:opacity .4s ease;}
.video-frame video.ready{opacity:1;}
.video-frame::after{content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(32,22,14,.35) 0%, rgba(32,22,14,.6) 100%);}
.video-copy{position:relative; z-index:3; text-align:center; color:#fff9f2; padding:var(--space-4);}
.video-copy p.tag-line{font-family:var(--font-heading); font-size:clamp(22px,2.8vw,32px); margin:0 0 var(--space-4);}
.play-btn{width:76px; height:76px; border-radius:50%; background:rgba(255,249,242,.94); color:var(--color-accent-700); display:grid; place-items:center; margin:0 auto var(--space-4); cursor:pointer; border:none; transition:transform .2s ease;}
.play-btn:hover{transform:scale(1.08);}

/* — galeria — */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:130px; gap:var(--space-3);}
.gallery button{position:relative; border:none; padding:0; margin:0; background:none; cursor:zoom-in; border-radius:var(--radius-md); overflow:hidden; display:block;}
.gallery button img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease;}
.gallery button:hover img{transform:scale(1.07);}
.gallery button figcaption{position:absolute; left:10px; bottom:8px; color:#fff9f2; font-size:12.5px; font-weight:700; z-index:1; opacity:0; transition:opacity .25s ease;}
.gallery button::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(32,22,14,.55) 0%, rgba(32,22,14,0) 45%); opacity:0; transition:opacity .25s ease;}
.gallery button:hover::after, .gallery button:hover figcaption{opacity:1;}
.g1{grid-column:span 3; grid-row:span 2;}
.g2{grid-column:span 3; grid-row:span 1;}
.g3{grid-column:span 3; grid-row:span 1;}
.g4{grid-column:span 2; grid-row:span 2;}
.g5{grid-column:span 2; grid-row:span 2;}
.g6{grid-column:span 2; grid-row:span 2;}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .g1,.g2,.g3,.g4,.g5,.g6{grid-column:span 1; grid-row:span 1;}
  .g1{grid-column:span 2; grid-row:span 2;}
}
.lightbox{position:fixed; inset:0; background:rgba(20,16,12,.9); display:none; align-items:center; justify-content:center; z-index:100; padding:24px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(900px,92vw); max-height:86vh; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); animation:zoomin .3s ease;}
@keyframes zoomin{ from{transform:scale(.94); opacity:0;} to{transform:scale(1); opacity:1;} }
.lightbox-close{position:absolute; top:24px; right:24px; background:#fff9f2; border:none; width:44px; height:44px; border-radius:50%; font-size:20px; cursor:pointer; color:var(--color-text);}

/* — como pedir — */
.steps{position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--leading);}
.steps::before{content:""; position:absolute; top:22px; left:0; right:0; height:2px; background:var(--color-accent-200); z-index:0;}
@media (max-width:880px){ .steps::before{display:none;} }
.step{position:relative; padding-top:calc(var(--leading) + 8px); z-index:1;}
.step .num{position:absolute; top:0; left:0; width:44px; height:44px; border-radius:50%; background:var(--color-accent); color:#fff9f2; font-family:var(--font-heading); font-size:18px; display:grid; place-items:center; box-shadow:var(--shadow-sm);}
.step h3{font-family:var(--font-heading); font-weight:400; font-size:18px; margin:calc(var(--leading) + 16px) 0 6px;}
.step p{font-size:14px; line-height:1.55; margin:0; color:color-mix(in srgb, var(--color-text) 78%, transparent);}

/* — depoimentos — */
.testi-head{display:flex; align-items:center; gap:10px; margin:0 0 var(--space-3);}
.testimonials{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-6);}
.testimonial{position:relative; background:var(--color-neutral-100); border-radius:var(--radius-lg); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); transition:transform .3s ease, box-shadow .3s ease; overflow:hidden;}
.testimonial:nth-child(3n+2){background:var(--color-accent-100);}
.testimonial:nth-child(3n+3){background:var(--color-accent-2-100);}
.testimonial:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.testimonial .quote-mark{position:absolute; top:-6px; right:14px; font-family:var(--font-heading); font-size:72px; color:color-mix(in srgb, var(--color-accent) 18%, transparent); line-height:1;}
.testimonial .top-row{display:flex; align-items:center; gap:10px;}
.avatar{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-heading); font-size:14px; color:#fff9f2; flex-shrink:0;}
.avatar.a1{background:var(--color-accent-500);}
.avatar.a2{background:var(--color-accent-2-600);}
.avatar.a3{background:var(--color-accent-700);}
.testimonial blockquote{position:relative; z-index:1; font-family:var(--font-heading); font-weight:400; font-size:19px; line-height:1.4; margin:0; color:var(--color-text);}
.testimonial cite{font-size:12px; font-style:normal; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--color-accent-700);}

/* — instagram — */
.insta-panel{position:relative; isolation:isolate; border-radius:calc(2*var(--radius-lg)); overflow:hidden; padding:calc(2*var(--leading)) clamp(24px,4vw,64px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); min-height:340px; justify-content:center;}
.insta-panel .insta-bg{position:absolute; inset:0; z-index:0; opacity:.32;}
.insta-panel .insta-bg image-slot{width:100%; height:100%; display:block;}
.insta-panel::before{content:""; position:absolute; inset:0; background:var(--color-accent-2-800); z-index:0;}
.insta-panel::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,10,6,.72) 0%, rgba(15,10,6,.85) 100%); z-index:1; pointer-events:none;}
.insta-panel > *:not(.insta-bg){position:relative; z-index:2;}
.insta-panel h3{font-family:var(--font-heading); font-weight:400; font-size:30px; margin:0; color:#fff9f2; text-shadow:0 2px 4px rgba(0,0,0,.4);}
.insta-panel p{font-size:15.5px; max-width:52ch; margin:0; color:#fff9f2; text-shadow:0 1px 3px rgba(0,0,0,.5);}

/* — faq — */
.faq-list{display:grid; gap:var(--space-3); max-width:820px; margin:0 auto;}
#faq .section-head{margin-left:auto; margin-right:auto; text-align:center;}
.faq-item{background:var(--color-neutral-100); border-radius:var(--radius-md); overflow:hidden;}
.faq-item summary{cursor:pointer; list-style:none; padding:18px 22px; font-weight:700; font-size:15.5px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--font-heading); font-size:22px; color:var(--color-accent-700); flex-shrink:0; transition:transform .25s ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin:0; padding:0 22px 20px; font-size:14.5px; line-height:1.6; color:color-mix(in srgb, var(--color-text) 78%, transparent); animation:faqin .25s ease;}
@keyframes faqin{ from{opacity:0;} to{opacity:1;} }

/* — cta final — */
.final-cta{position:relative; isolation:isolate; border-radius:calc(2*var(--radius-lg)); overflow:hidden; min-height:420px; display:flex; align-items:center; justify-content:center; text-align:center; margin-bottom:calc(1.5*var(--leading));}
.final-cta img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;}
.final-cta::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,10,6,.82) 0%, rgba(15,10,6,.9) 100%); z-index:-1;}
.final-cta-inner{position:relative; z-index:1; padding:var(--space-6); max-width:640px;}
.final-cta h2{font-family:var(--font-heading); font-weight:400; font-size:clamp(28px,3.8vw,44px); margin:0 0 var(--space-4); color:#fff9f2; line-height:1.2; text-shadow:0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);}
.final-cta p{font-size:16.5px; margin:0 auto var(--leading); color:#fff9f2; text-shadow:0 1px 3px rgba(0,0,0,.5);}
.final-cta .row{display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap;}

/* — footer — */
footer{background:var(--color-neutral-900); color:var(--color-neutral-200); padding:calc(2.5*var(--leading)) 0 var(--leading);}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:var(--space-3);}
.foot-brand img{width:44px; height:44px; border-radius:50%; object-fit:cover;}
.foot-brand span{font-family:var(--font-heading); font-size:22px; color:#fff9f2;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:calc(1.5*var(--leading));}
.foot-grid h4{font-family:var(--font-heading); font-weight:400; font-size:18px; color:#fff9f2; margin:0 0 var(--space-3);}
.foot-grid p, .foot-grid a{font-size:14px; line-height:1.7; color:var(--color-neutral-300);}
.foot-grid a:hover{color:#fff9f2;}
.foot-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
.foot-note{border-top:1px solid color-mix(in srgb, var(--color-neutral-200) 20%, transparent); margin-top:var(--leading); padding-top:var(--space-4); font-size:12.5px; color:var(--color-neutral-400); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:var(--leading);} }

.floating-wa{position:fixed; right:22px; bottom:22px; z-index:60; width:60px; height:60px; border-radius:50%; background:var(--color-accent-2-700); color:#fff9f2; display:grid; place-items:center; box-shadow:var(--shadow-lg); border:none; cursor:pointer; transition:transform .2s ease;}
.floating-wa:hover{transform:scale(1.08); background:var(--color-accent-2-800);}

@media (max-width:900px){
  .flavor-row, .flavor-row:nth-child(even){grid-template-columns:1fr;}
  .flavor-row:nth-child(even) .flavor-media{order:0;}
}