/* ==========================================================================
   Rugana · Pâtisserie
   Design System + Landing Page · v2
   Base: Manual de Identidade Visual (paleta, tipografia, símbolo)
   Linguagem: arcos de vitrine, fios dourados de papelaria, alinhamento editorial
   ========================================================================== */

/* ---------- 1. Tipografia (Cormorant Garamond, fonte oficial da marca) ---------- */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Homemade Apple"; src: url("../fonts/HomemadeApple-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

/* ---------- 2. Tokens ---------- */
:root {
  /* Paleta oficial */
  --rouge: #4C101B;          /* Rouge Doce · protagonista (CMYK 42 91 71 64) */
  --rouge-deep: #350A12;
  --rouge-ink: #2A070E;
  --rouge-soft: #6A2332;
  --vanille: #F8F3EA;        /* Vanille Écrue · luminosidade (CMYK 6 8 17 0) */
  --vanille-2: #F1E8DA;
  --vanille-3: #E6D9C6;
  --paper: #FFFCF6;
  --duna: #7F6B64;           /* Duna · neutro de equilíbrio (CMYK 0 20 20 60) */
  --duna-light: #B5A39A;
  --dourado: #8C6D32;        /* Dourado · detalhes e acabamentos */
  --dourado-ui: #B8914F;
  --dourado-light: #E2C98F;
  --dourado-grad: linear-gradient(120deg, #9C7838 0%, #D8BB7E 35%, #B8914F 55%, #EAD39F 75%, #9C7838 100%);

  /* Papéis semânticos */
  --bg: var(--vanille);
  --bg-alt: var(--vanille-2);
  --surface-dark: var(--rouge);
  --text: var(--rouge-ink);
  --text-muted: var(--duna);
  --text-on-dark: var(--vanille);
  --muted-on-dark: rgba(248, 243, 234, .74);
  --line: rgba(76, 16, 27, .14);
  --line-on-dark: rgba(248, 243, 234, .16);
  --hairline-gold: rgba(184, 145, 79, .55);
  --hairline-gold-dark: rgba(226, 201, 143, .38);

  /* Tipografia · escala de quarta justa (1.333) sobre corpo de ~19px */
  --hand: "Homemade Apple", "Segoe Script", cursive;
  --font: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --fs-small: .95rem;
  --fs-body: clamp(1.125rem, 1.06rem + .25vw, 1.25rem);
  --fs-lead: clamp(1.3rem, 1.16rem + .55vw, 1.62rem);
  --fs-h3: clamp(1.6rem, 1.42rem + .7vw, 2.1rem);
  --fs-h2: clamp(2.4rem, 1.8rem + 2.4vw, 3.9rem);
  --fs-display: clamp(3.6rem, 1.6rem + 7.6vw, 8.6rem);
  --tracking-caps: .26em;

  /* Espaço, raio, sombra, movimento */
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem;
  --space-5: 3rem; --space-6: clamp(3rem, 2rem + 3vw, 4.5rem); --space-7: clamp(5rem, 3rem + 7vw, 9.5rem);
  --container: 1220px;
  --radius-sm: 3px; --radius: 6px; --radius-arch: 999px 999px 0 0;
  --shadow-soft: 0 18px 50px -24px rgba(53, 10, 18, .35);
  --shadow-lift: 0 34px 70px -34px rgba(53, 10, 18, .6);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  font-feature-settings: "kern", "liga", "onum";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
::selection { background: var(--rouge); color: var(--vanille); }
:focus-visible { outline: 1.5px solid var(--dourado-ui); outline-offset: 4px; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--vanille); color: var(--rouge); padding: .6rem 1rem; border-radius: var(--radius-sm); }
.skip:focus { top: 1rem; }

.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }
.section { padding-block: var(--space-7); position: relative; }
.section--dark { background: var(--surface-dark); color: var(--text-on-dark); }
.section--alt { background: var(--bg-alt); }

/* ---------- 4. Tipografia utilitária ---------- */
.h1 { font-size: var(--fs-display); font-weight: 300; line-height: .92; }
.h2 { font-size: var(--fs-h2); font-weight: 300; color: var(--rouge); }
.h3 { font-size: var(--fs-h3); font-weight: 400; color: var(--rouge); }
.section--dark .h2, .section--dark .h3 { color: var(--vanille); }
.lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; color: var(--text-muted); }
.section--dark .lead { color: var(--muted-on-dark); }
.kicker { font-style: italic; font-size: 1.3rem; color: var(--dourado); margin: 0; }
.section--dark .kicker { color: var(--dourado-light); }
.caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: .8rem; font-weight: 500; }
.gold-text { background: var(--dourado-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Capitular dourada, como nas cartas de pâtisserie */
.dropcap::first-letter { float: left; font-size: 3.7em; line-height: .78; padding: .08em .1em 0 0; color: var(--dourado); font-weight: 300; }

/* Divisor com losango (assinatura das peças de papelaria) */
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--dourado-ui); }
.divider::before, .divider::after { content: ""; height: 1px; width: 64px; background: currentColor; opacity: .55; }
.divider i { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); display: block; }

/* Cabeçalhos de seção */
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) clamp(2rem, 6vw, 6rem); align-items: end; padding-bottom: var(--space-4); margin-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.split-head .h2 { max-width: 14ch; }
.split-head .lead { margin: 0; max-width: 42ch; justify-self: end; }
.section--dark .split-head { border-color: var(--line-on-dark); }
.center-head { display: grid; justify-items: center; text-align: center; gap: var(--space-2); max-width: 640px; margin: 0 auto var(--space-6); }
.center-head .lead { margin: 0; }
.center-cta { display: flex; justify-content: center; margin-top: var(--space-6); }

/* ---------- 5. Botões e links ---------- */
.btn {
  --b-bg: var(--rouge); --b-fg: var(--vanille); --b-bd: var(--rouge);
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1.1em 2.2em; border: 1px solid var(--b-bd); border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg);
  font: 500 .8rem/1 var(--font); letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), background-position .6s var(--ease);
}
.btn:hover { --b-bg: var(--rouge-deep); --b-bd: var(--rouge-deep); }
.btn--gold { --b-bg: var(--dourado-grad); --b-fg: var(--rouge-ink); --b-bd: transparent; background-size: 220% 100%; }
.btn--gold:hover { --b-bg: var(--dourado-grad); --b-bd: transparent; background-position: 100% 0; }
.btn--ghost { --b-bg: transparent; --b-fg: var(--rouge); --b-bd: var(--rouge); }
.btn--ghost:hover { --b-bg: var(--rouge); --b-fg: var(--vanille); }
.btn--ghost-light { --b-bg: transparent; --b-fg: var(--vanille); --b-bd: rgba(248, 243, 234, .5); }
.btn--ghost-light:hover { --b-bg: var(--vanille); --b-fg: var(--rouge); --b-bd: var(--vanille); }
.btn--sm { padding: .85em 1.6em; font-size: .72rem; }
.btn svg { width: 1.15em; height: 1.15em; }

.link { font-size: 1.15rem; font-style: italic; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: var(--hairline-gold-dark); transition: text-decoration-color .3s; }
.link:hover { text-decoration-color: currentColor; }

/* ---------- 6. Arco (moldura de vitrine) ---------- */
.arch { border-radius: var(--radius-arch); overflow: hidden; aspect-ratio: 3 / 4; background: var(--vanille-3); }
.arch img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 7. Header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 50; padding-block: 1.6rem; transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s; }
.header.is-scrolled { background: rgba(53, 10, 18, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-block: .8rem; box-shadow: 0 1px 0 var(--line-on-dark); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--vanille); }
.brand img { width: 40px; height: auto; }
.brand__name { font-size: 1.3rem; font-weight: 500; letter-spacing: .01em; }
.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a:not(.btn) { color: rgba(248, 243, 234, .82); font-size: 1.12rem; position: relative; transition: color .3s; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--dourado-light); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav a:not(.btn):hover { color: var(--vanille); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.menu-toggle { display: none; background: none; border: 0; color: var(--vanille); width: 44px; height: 44px; cursor: pointer; }
.menu-toggle span { display: block; width: 26px; height: 1px; background: currentColor; margin: 7px auto; transition: transform .3s; }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: grid; align-items: center;
  padding: clamp(7rem, 12vh, 9rem) 0 clamp(4rem, 8vh, 6rem);
  background: var(--rouge); color: var(--vanille);
}
/* Padrão de borboletas, quase imperceptível */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/pattern-vanille.svg") 0 0 / 280px auto repeat; opacity: .035; }

/* Foto sangrando até a borda direita, fundida ao bordô */
.hero__media { position: absolute; inset: 0 0 0 auto; width: 50%; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 20%, #000 48%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 20%, #000 48%); }

.hero__copy { display: grid; justify-items: start; max-width: 52%; }
.hero__title { font-size: var(--fs-display); font-weight: 300; line-height: .9; letter-spacing: -.015em; }
.hero__title span { display: block; }
.hero__title span + span { padding-left: .95em; }
.hero__sub { margin: 1.1rem 0 0 .35em; font-size: .86rem; letter-spacing: .58em; text-transform: uppercase; color: var(--dourado-light); }
.hero__quote { font-style: italic; font-weight: 300; font-size: var(--fs-lead); line-height: 1.45; max-width: 28ch; color: var(--muted-on-dark); margin: var(--space-5) 0 0; }

/* Entrada: a foto acende devagar, o texto acompanha */
@keyframes settle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__media img { animation: settle 2.2s var(--ease-out) .1s both; }
.hero__copy > * { animation: fadeIn 1.1s var(--ease-out) both; }
.hero__copy > :nth-child(1) { animation-delay: .35s; }
.hero__copy > :nth-child(2) { animation-delay: .55s; }
.hero__copy > :nth-child(3) { animation-delay: .75s; }
.hero__copy > :nth-child(4) { animation-delay: .9s; }

/* ---------- 9. Manifesto ---------- */
.manifesto { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(3rem, 7vw, 7.5rem); align-items: center; }
.duo { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1.1; }
.founder { position: absolute; display: grid; justify-items: center; gap: 1rem; }
.founder--a { left: 0; top: 0; width: 60%; z-index: 2; }
.founder--b { right: 0; bottom: 0; width: 52%; z-index: 1; }
.founder img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid var(--vanille); box-shadow: 0 30px 60px -32px rgba(53, 10, 18, .55); position: relative; }
.founder--a::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--vanille-3); transform: translate(-16px, 16px); z-index: -1; }
.founder--b::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--hairline-gold); transform: translate(16px, -16px); }
/* Três sócios: composição em cascata */
.duo--trio { aspect-ratio: 1 / 1.24; }
.duo--trio .founder--a { left: 0; top: 0; width: 52%; }
.duo--trio .founder--b { right: 0; top: 22%; width: 45%; bottom: auto; }
.duo--trio .founder--c { left: 9%; bottom: 0; width: 43%; z-index: 3; }
.founder--c::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--vanille-3); transform: translate(14px, 14px); z-index: -1; }
.founder figcaption { font-style: italic; font-size: 1.05rem; color: var(--duna); }

.manifesto__text { max-width: 36rem; }
.manifesto__text .h2 { margin-bottom: var(--space-5); max-width: 13ch; }
.manifesto__text .lead { color: var(--rouge-soft); margin-bottom: 1.4em; }
.manifesto__text p:not(.lead):not(.signature) { color: var(--duna); }
.signature { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--hairline-gold); font-style: italic; font-size: var(--fs-h3); line-height: 1.3; color: var(--rouge); }

/* ---------- 10. Carte de criações ---------- */
.carte { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
.carte__item { display: grid; grid-template-columns: 1fr auto; gap: .4rem 2rem; align-items: baseline; padding: 1.7rem 0 1.6rem; border-top: 1px solid var(--line-on-dark); cursor: default; outline-offset: 6px; }
.carte__item:last-child { border-bottom: 1px solid var(--line-on-dark); }
.carte__thumb { display: none; }
.carte__name { font-size: var(--fs-h3); font-weight: 300; color: var(--vanille); margin-bottom: .45rem; transition: color .4s var(--ease), transform .5s var(--ease); }
.carte__item p { margin: 0; max-width: 44ch; font-size: 1.12rem; line-height: 1.55; color: var(--muted-on-dark); }
.carte__kind { font-style: italic; font-size: 1.05rem; color: var(--dourado-light); opacity: .75; white-space: nowrap; }
.carte__item.is-active .carte__name { color: var(--dourado-light); transform: translateX(.6rem); }
.carte__item.is-active .carte__kind { opacity: 1; }

.carte__stage { position: sticky; top: 7rem; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); outline: 1px solid var(--hairline-gold-dark); outline-offset: 12px; margin: 12px; overflow: hidden; box-shadow: var(--shadow-lift); background: var(--rouge-deep); }
.carte__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.4s var(--ease-out); }
.carte__stage img.is-active { opacity: 1; transform: none; }

/* ---------- 11. Cookies recheados ---------- */
.cookies { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
.cookie { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; text-align: center; }
.cookie .arch { width: 100%; outline: 1px solid var(--hairline-gold); outline-offset: 7px; margin-bottom: var(--space-4); box-shadow: var(--shadow-soft); }
.cookie__name { font-size: var(--fs-h3); font-weight: 400; color: var(--rouge); margin-bottom: .5rem; }
.cookie p { margin: 0; font-style: italic; color: var(--duna); font-size: 1.1rem; line-height: 1.45; max-width: 24ch; }
/* Seleção pelos cards */
.cookie__pick { position: relative; display: block; width: 100%; padding: 0; margin: 0 0 var(--space-4); background: none; border: 0; cursor: pointer; border-radius: var(--radius-arch); }
.cookie .cookie__pick .arch { display: block; margin: 0; transition: outline-color .3s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.cookie__pick .arch img { transition: transform .8s var(--ease-out); }
.cookie__pick:hover .arch img { transform: scale(1.04); }
.cookie__pick:focus-visible { outline: none; }
.cookie__pick:focus-visible .arch { outline: 2px solid var(--dourado-ui); }
.cookie.is-on .cookie__pick .arch { outline: 2px solid var(--rouge); outline-offset: 6px; transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.cookie__badge { position: absolute; top: 14%; right: 4%; width: 34px; height: 34px; border-radius: 50%; background: var(--rouge); color: var(--vanille); border: 1px solid var(--dourado-light); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .35s var(--ease); pointer-events: none; }
.cookie__badge svg { width: 16px; height: 16px; }
.cookie.is-on .cookie__badge { opacity: 1; transform: none; }
.cookie__qty { margin-top: var(--space-3); background: var(--paper); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.cookie.is-on .cookie__qty { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cookie .stepper__value { width: 2.4rem; padding: 0; border: 0; background: transparent; text-align: center; font: 500 1.15rem/1 var(--font); color: var(--text); -moz-appearance: textfield; appearance: textfield; }
.cookie .stepper__value:focus { outline: none; }
.cookies-cta { flex-direction: column; align-items: center; gap: var(--space-3); }
.cookies-cta__hint { margin: 0; font-style: italic; color: var(--duna); font-size: 1.1rem; }

/* ---------- 12. Ocasiões (tabs) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-self: end; }
.tab { background: none; border: 0; border-bottom: 1px solid transparent; padding: .3rem 0; font: 400 1.25rem/1.2 var(--font); color: var(--duna); cursor: pointer; transition: color .3s, border-color .3s; }
.tab:hover { color: var(--rouge); }
.tab[aria-selected="true"] { color: var(--rouge); font-style: italic; border-bottom-color: var(--dourado-ui); }
.section--dark .tab { color: var(--muted-on-dark); }
.section--dark .tab[aria-selected="true"] { color: var(--vanille); border-bottom-color: var(--dourado-light); }

.panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.panel[hidden] { display: none; }
.panel.is-active { animation: panelIn .6s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; } to { opacity: 1; } }
.panel__media { aspect-ratio: 5 / 4; border-radius: var(--radius-sm); overflow: hidden; outline: 1px solid var(--hairline-gold); outline-offset: 12px; margin: 12px; box-shadow: var(--shadow-lift); }
.panel__media img { width: 100%; height: 100%; object-fit: cover; }
.panel__text { display: grid; justify-items: start; gap: var(--space-3); }
.panel__text .lead { margin: 0; max-width: 34ch; }
.panel__list { display: grid; gap: .6rem; margin-bottom: var(--space-2); }
.panel__list li { display: flex; align-items: baseline; gap: .9rem; color: var(--rouge-ink); }
.panel__list li::before { content: ""; width: 5px; height: 5px; background: var(--dourado-ui); transform: translateY(-.2em) rotate(45deg); flex: none; }

/* ---------- 13. Essência (citação + valores) ---------- */
.essence { overflow: hidden; }
.essence::before { content: ""; position: absolute; inset: 0; background: url("../img/pattern-vanille.svg") center / 280px auto repeat; opacity: .09; }
.essence .container { position: relative; }
.essence__quote { margin: 0 auto var(--space-7); text-align: center; }
.essence__quote::before { content: ""; display: block; width: 7px; height: 7px; margin: 0 auto var(--space-4); background: var(--dourado-light); transform: rotate(45deg); }
.essence__quote p { margin: 0 auto; max-width: 20ch; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 4rem); font-style: italic; font-weight: 300; line-height: 1.18; }
/* ---------- Depoimentos ----------
   Fotos dos stories como fotos reveladas + comentários em cartões com o selo da marca.
   Três colunas desencontradas: as fotos ficam em diagonal (topo à esquerda, base à direita). */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(2.5rem, 5vw, 5rem); align-items: start; max-width: 1240px; margin: calc(var(--space-7) * -.55) auto 0; }
.reviews__intro { grid-column: 1 / -1; margin: 0 0 var(--space-5) 2%; font-family: var(--hand); font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem); color: var(--dourado-light); transform: rotate(-4deg); transform-origin: left; }
.reviews__col { display: grid; gap: 4.2rem; }
.reviews__col--2 { margin-top: 5rem; }
.reviews__col--3 { margin-top: 1.5rem; }

/* Quadro de avisos: cada peça presa de um jeito, levemente torta e fora do alinhamento */
.reviews__col > li { rotate: var(--r, 0deg); translate: var(--dx, 0) 0; transition: rotate .4s var(--ease), scale .4s var(--ease); }
.reviews__col > li:hover { rotate: 0deg; scale: 1.03; z-index: 2; }
.reviews__col--1 > li:nth-child(2) { --r: 2.2deg;  --dx: 1.8rem; }
.reviews__col--1 > li:nth-child(3) { --r: -1.8deg; --dx: -.6rem; }
.reviews__col--2 > li:nth-child(1) { --r: -2.4deg; --dx: -1rem; }
.reviews__col--2 > li:nth-child(2) { --r: 1.6deg;  --dx: 1.6rem; }
.reviews__col--2 > li:nth-child(3) { --r: -3deg;   --dx: -.4rem; }
.reviews__col--2 > li:nth-child(4) { --r: 2.4deg;  --dx: 1.2rem; }
.reviews__col--2 > li:nth-child(5) { --r: -1.4deg; --dx: -1.2rem; }
.reviews__col--3 > li:nth-child(1) { --r: 2.8deg;  --dx: .8rem; }
.reviews__col--3 > li:nth-child(3) { --r: -2deg;   --dx: -.8rem; }
.review { width: 92%; }

/* Cartão de comentário */
.review { position: relative; padding: 2.1rem 1.6rem 1.5rem; border-radius: 20px; background: var(--paper); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 24px 44px -24px rgba(20, 3, 7, .7); color: var(--rouge-ink); }
.review__avatar { position: absolute; top: -28px; left: 1.4rem; width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--paper); box-shadow: 0 8px 16px -6px rgba(20, 3, 7, .55); }
.review__who { margin: -1.1rem 0 .8rem 4.6rem; font-size: 1.1rem; font-weight: 500; line-height: 1.25; color: var(--rouge); }
.review__who span { display: block; font-size: .93rem; font-weight: 400; font-style: italic; color: var(--duna); }
.review__text { margin: 0; font-size: 1.22rem; line-height: 1.5; }
.ink { display: inline-block; width: .8em; height: .8em; margin-left: .15em; vertical-align: -.05em; fill: var(--rouge-soft); }
.ink--gold { fill: var(--dourado-ui); }
.inks { white-space: nowrap; }

/* Foto revelada (story) */
.snap { position: relative; }
.snap figure { margin: 0; padding: .7rem .7rem 1rem; background: var(--paper); box-shadow: 0 30px 50px -22px rgba(20, 3, 7, .75); }
.snap--a figure { transform: rotate(-2.5deg); }
.snap--b figure { transform: rotate(2.5deg); }
.snap img { width: 100%; height: auto; aspect-ratio: 6 / 7; object-fit: cover; }
.snap figcaption { display: grid; gap: .25rem; padding: .85rem .3rem 0; }
.snap .hand { font-family: var(--hand); color: var(--rouge); font-size: clamp(.95rem, .88rem + .25vw, 1.08rem); line-height: 1.6; }
.snap .who { font-style: italic; font-size: 1rem; color: var(--duna); }
.snap::after { content: ""; position: absolute; top: -22px; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: url("../img/selo-borboleta.webp") center / cover; box-shadow: 0 6px 12px -4px rgba(20, 3, 7, .55); }
.under { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.5C25 2.5 60 2 99 4' fill='none' stroke='%23B8914F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") .45em bottom / 100% .4em no-repeat; padding-bottom: .15em; }

/* Chegada: cada peça sobe de leve quando aparece (uma vez) */
.reviews.is-armed .review, .reviews.is-armed .snap { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reviews.is-armed .is-in { opacity: 1; transform: none; }

@media (max-width: 1000px) and (min-width: 641px) {
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews__col--3 { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; margin-top: 3rem; }
}
@media (max-width: 640px) {
  /* Celular: mini quadro de avisos — fotos lado a lado, bilhetes em pares desencontrados */
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem .9rem; align-items: start; }
  .reviews__intro { margin-bottom: .6rem; }
  .reviews__col { display: contents; }
  .reviews__col > li { --dx: 0 !important; }
  .snap { order: 1; width: auto; }
  .review { order: 2; width: auto; padding: 1.9rem .95rem 1rem; border-radius: 16px; }
  .review:nth-child(odd of .review) { margin-top: 1.4rem; }
  .review__avatar { top: -22px; left: .8rem; width: 44px; height: 44px; border-width: 2px; }
  .review__who { margin: 0 0 .45rem; font-size: .92rem; overflow-wrap: anywhere; }
  .review__who span { font-size: .78rem; }
  .review__text { font-size: 1.04rem; line-height: 1.4; }
  .snap figure { padding: .45rem .45rem .7rem; }
  .snap figcaption { padding: .55rem .15rem 0; }
  .snap .hand { font-size: .78rem; line-height: 1.55; }
  .snap .who { font-size: .82rem; }
  .snap::after { top: -18px; width: 40px; height: 40px; margin-left: -20px; }
  .snap--b { margin-top: 1.6rem; }
}
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.value { padding-top: var(--space-3); border-top: 1px solid var(--hairline-gold-dark); }
.value__name { font-size: var(--fs-h3); font-style: italic; font-weight: 300; color: var(--dourado-light); margin-bottom: .8rem; }
.value p { margin: 0; color: var(--muted-on-dark); max-width: 32ch; }

/* ---------- 14. Encomenda (formulário) ---------- */
.order-section { position: relative; isolation: isolate; overflow: hidden; }
.order { display: grid; justify-items: center; gap: var(--space-5); }
.order__intro { text-align: center; display: grid; justify-items: center; }
.order__mark { width: 46px; height: auto; margin-bottom: var(--space-3); opacity: .9; }
.order__intro .h2 { max-width: 16ch; margin-bottom: var(--space-3); }
.order__intro .lead { max-width: 38ch; margin: 0; }
.order .form { width: min(680px, 100%); }

/* Borboletas douradas espalhadas no fundo, bem sutis */
.order-section__bf { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.order-section__bf span { position: absolute; aspect-ratio: 326 / 240; background: url("../img/butterfly-rouge.svg") center / contain no-repeat; opacity: .085; }
.order-section__bf span:nth-child(1) { width: clamp(150px, 17vw, 250px); top: 9%; left: 6%; transform: rotate(-16deg); }
.order-section__bf span:nth-child(2) { width: clamp(90px, 9vw, 130px); top: 46%; left: 13%; transform: rotate(12deg); opacity: .06; }
.order-section__bf span:nth-child(3) { width: clamp(130px, 14vw, 210px); top: 30%; right: 6%; transform: rotate(18deg); }
.order-section__bf span:nth-child(4) { width: clamp(80px, 7vw, 110px); bottom: 10%; right: 15%; transform: rotate(-10deg); opacity: .06; }

.form { position: relative; background: var(--paper); border-radius: var(--radius-sm); padding: clamp(2rem, 4.5vw, 3.6rem); box-shadow: var(--shadow-soft); display: grid; gap: 1.6rem; outline: 1px solid var(--hairline-gold); outline-offset: -12px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.field { display: grid; gap: .3rem; }
.field label { font-size: 1rem; font-weight: 500; color: var(--duna); }
.field input, .field select, .field textarea {
  font: 400 1.2rem/1.4 var(--font); color: var(--text); background: transparent;
  border: 0; border-bottom: 1px solid rgba(76, 16, 27, .28); border-radius: 0;
  padding: .45rem 0 .55rem; width: 100%; transition: border-color .3s, box-shadow .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--duna-light); font-style: italic; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 1.8rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23B8914F' stroke-width='1.2'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") right .2rem center / 12px no-repeat; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--dourado-ui); box-shadow: 0 1px 0 var(--dourado-ui); }
.field.is-invalid input { border-bottom-color: var(--rouge-soft); }
.field__error { font-size: 1rem; font-style: italic; color: var(--rouge-soft); }
/* Sabores com quantidade */
.flavors { border: 0; margin: 0; padding: 0; min-width: 0; }
.flavors legend { padding: 0; margin-bottom: .5rem; font-size: 1rem; font-weight: 500; color: var(--duna); }
.flavors__list { display: grid; }
.flavor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.4rem; border-bottom: 1px solid var(--line); }
.flavor__check { display: flex; align-items: center; gap: .85rem; cursor: pointer; font-size: 1.25rem; color: var(--text); padding: .5rem 0; flex: 1; }
.flavor__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.flavor__box { width: 20px; height: 20px; flex: none; border: 1px solid var(--dourado-ui); border-radius: 2px; display: grid; place-items: center; transition: background .3s var(--ease), border-color .3s var(--ease); }
.flavor__box::after { content: ""; width: 10px; height: 5px; border: solid var(--vanille); border-width: 0 0 1.5px 1.5px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .25s var(--ease); }
.flavor__check input:checked + .flavor__box { background: var(--rouge); border-color: var(--rouge); }
.flavor__check input:checked + .flavor__box::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.flavor__check input:focus-visible + .flavor__box { outline: 2px solid var(--dourado-ui); outline-offset: 3px; }
.flavor.is-on .flavor__check { font-style: italic; }
.flavor__qty { opacity: 0; visibility: hidden; transform: translateX(-8px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.flavor.is-on .flavor__qty { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--hairline-gold); border-radius: 999px; height: 2.4rem; }
.stepper__btn { width: 2.4rem; height: 100%; background: none; border: 0; color: var(--rouge); font: 400 1.35rem/1 var(--font); cursor: pointer; border-radius: 999px; transition: background .25s, color .25s; }
.stepper__btn:hover { background: var(--rouge); color: var(--vanille); }
.stepper__btn:focus-visible { outline: 2px solid var(--dourado-ui); outline-offset: 1px; }
.field .stepper__value { width: 2.4rem; padding: 0; border: 0; text-align: center; font: 500 1.15rem/1 var(--font); color: var(--text); -moz-appearance: textfield; appearance: textfield; }
.field .stepper__value:focus { box-shadow: none; }
.stepper__value::-webkit-inner-spin-button, .stepper__value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.form .btn { width: 100%; margin-top: .6rem; }
.form .btn svg { width: 1.45em; height: 1.45em; margin-right: .2em; }
.form__note { font-size: 1.02rem; font-style: italic; color: var(--duna); text-align: center; margin: -.4rem 0 0; }

/* Como funciona (sequência real da encomenda) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); width: 100%; max-width: 900px; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.step__n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--dourado-ui); font-size: 1.3rem; font-style: italic; color: var(--dourado); }
.step p { margin: 0; font-size: 1.08rem; line-height: 1.45; color: var(--duna); }
.step strong { font-weight: 500; color: var(--rouge); }

/* ---------- 15. Visite ---------- */
.visit { position: relative; min-height: 680px; padding-block: 6rem; display: grid; align-items: center; color: var(--vanille); overflow: hidden; isolation: isolate; }
.visit__bg { position: absolute; inset: 0; z-index: -2; }
.visit__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.visit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(42, 7, 14, .96) 0%, rgba(42, 7, 14, .9) 45%, rgba(42, 7, 14, .2) 100%); }
.visit__card { max-width: 460px; display: grid; justify-items: start; gap: var(--space-4); }
.visit__card .h2 { color: var(--vanille); }
.info { display: grid; gap: 1.2rem; width: 100%; margin: 0; }
.info div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-on-dark); }
.info dt { font-style: italic; color: var(--dourado-light); }
.info dd { margin: 0; font-size: 1.15rem; line-height: 1.5; }

/* ---------- 16. Footer ---------- */
.footer { background: var(--rouge-ink); color: rgba(248, 243, 234, .7); padding: var(--space-6) 0 var(--space-4); text-align: center; }
.footer__logo { width: 180px; margin: 0 auto var(--space-3); }
.footer__quote { font-style: italic; font-size: 1.3rem; color: rgba(248, 243, 234, .85); margin-bottom: var(--space-4); }
.socials { display: flex; justify-content: center; gap: .9rem; margin-bottom: var(--space-5); }
.socials a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-on-dark); display: grid; place-items: center; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.socials a:hover { background: var(--vanille); color: var(--rouge); border-color: var(--vanille); }
.socials svg { width: 18px; height: 18px; }
.footer__legal { font-size: .98rem; border-top: 1px solid var(--line-on-dark); padding-top: var(--space-3); display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }

/* WhatsApp flutuante */
.wa-float { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: var(--rouge); color: var(--vanille); display: grid; place-items: center; box-shadow: 0 14px 34px -12px rgba(53, 10, 18, .7); outline: 1px solid var(--hairline-gold-dark); outline-offset: -5px; border: 1px solid var(--hairline-gold); transition: transform .35s var(--ease), background .35s var(--ease); }
.wa-float:hover { transform: scale(1.06); background: var(--rouge-deep); }
.wa-float svg { width: 25px; height: 25px; }

/* ---------- 17. Componentes do guia (design-system.html) ---------- */
.card { background: var(--paper); border-radius: var(--radius-sm); overflow: hidden; outline: 1px solid var(--hairline-gold); outline-offset: -8px; }
.card .arch { border-radius: 0; aspect-ratio: 5 / 4; }

/* ---------- 18. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 19. Responsivo ---------- */
@media (max-width: 1080px) {
  .menu-toggle { display: block; position: relative; z-index: 2; }
  .nav { position: fixed; inset: 0; background: var(--rouge-deep); flex-direction: column; justify-content: center; gap: 1.8rem; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
  .nav a:not(.btn) { font-size: 1.6rem; font-weight: 300; }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav { opacity: 1; visibility: visible; }
  body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  body.menu-open .menu-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
}
@media (max-width: 980px) {
  .hero { min-height: auto; align-items: end; padding-top: 0; }
  .hero__media { position: relative; inset: auto; width: 100%; height: 58svh; min-height: 340px; }
  .hero__media img { -webkit-mask-image: linear-gradient(0deg, transparent 0%, transparent 12%, rgba(0, 0, 0, .6) 34%, #000 62%); mask-image: linear-gradient(0deg, transparent 0%, transparent 12%, rgba(0, 0, 0, .6) 34%, #000 62%); }
  .hero::before { display: none; }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(53, 10, 18, .6), transparent 30%), linear-gradient(0deg, var(--rouge) 0%, var(--rouge) 8%, rgba(76, 16, 27, 0) 45%); }
  .hero__copy { max-width: none; margin-top: -4.5rem; position: relative; }
  .manifesto, .carte, .panel, .order { grid-template-columns: 1fr; }
  .duo { max-width: 440px; margin-inline: auto; }
  .split-head { grid-template-columns: 1fr; align-items: start; }
  .split-head .lead, .tabs { justify-self: start; }
  .carte__stage { display: none; }
  .carte__item { grid-template-columns: 88px 1fr; gap: 0 1.4rem; align-items: start; }
  .carte__thumb { display: block; grid-row: span 2; width: 88px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-arch); }
  .carte__kind { grid-column: 2; order: -1; font-size: .98rem; }
  .carte__item.is-active .carte__name { transform: none; color: var(--vanille); }
  .cookies { grid-template-columns: repeat(2, 1fr); row-gap: 3.5rem; }
  .values { grid-template-columns: 1fr; gap: 2.5rem; }
  .order-section__bf span:nth-child(2), .order-section__bf span:nth-child(4) { display: none; }
  .visit::before { background: linear-gradient(0deg, rgba(42, 7, 14, .96) 40%, rgba(42, 7, 14, .86) 100%); }
}
@media (max-width: 640px) {
  .container { width: calc(100% - 2rem); }
  .brand__name { font-size: 1.12rem; }
  .hero__title span + span { padding-left: .5em; }
  .hero__sub { letter-spacing: .42em; }
  .form__row { grid-template-columns: 1fr; }
  .tabs { gap: .4rem 1.4rem; }
  .form { outline-offset: -8px; }
  .cookies { gap: 2.5rem 1rem; }
  .cookie .arch { outline-offset: 5px; }
  .cookie.is-on .cookie__pick .arch { outline-offset: 3px; }
  .cookie__name { font-size: 1.45rem; }
  .cookie p { font-size: 1rem; }
  .info div { grid-template-columns: 1fr; gap: .2rem; }
  .footer__legal { justify-content: center; }
  .footer { padding-bottom: 6.5rem; }
  .steps { grid-template-columns: 1fr; gap: 1.1rem; max-width: 30rem; }
  .hero { padding-bottom: 2.75rem; }
  .hero__copy { margin-top: -6rem; justify-items: center; text-align: center; }
  .hero__title span + span { padding-left: 0; }
  .hero__sub { margin: 1.1rem 0 0; padding-left: .42em; } /* compensa o espaçamento após a última letra */
  .hero__quote { max-width: 26ch; margin-inline: auto; }
  .hero__media img { -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .7) 22%, #000 46%); mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .7) 22%, #000 46%); }
  .hero__media::after { background: linear-gradient(180deg, rgba(53, 10, 18, .6), transparent 30%), linear-gradient(0deg, var(--rouge) 0%, rgba(76, 16, 27, 0) 30%); }
  .duo { width: calc(100% - 28px); }
  .cookie .arch { aspect-ratio: 1 / 1; }
  .cookie .arch img { scale: 1.22; }
  .cookie p { font-size: 1.02rem; line-height: 1.4; }
  .form .btn { letter-spacing: .14em; white-space: nowrap; padding-inline: 1rem; }
}