/* ==========================================================================
   Aline Pelegrini — site
   Tokens espelham as variáveis do Figma ("Sites Personal" › Site JH v2).
   Tema único claro (color-scheme: only light), como no Figma.
   ========================================================================== */

/* ---------- Fontes (auto-hospedadas) ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/barlow-300.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/barlow-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/barlow-900.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: only light;

  /* Cor — semantic (Figma: color/*) */
  --color-background: #f7f2ec;
  --color-background-border: #dfd9d4;
  --color-surface-primary: #ffffff;
  --color-surface-primary-border: #dfd9d4;
  --color-surface-secondary: #e9e4de;
  --color-surface-accent: #b05a5a;
  --color-text-primary: #2e2326;
  --color-text-secondary: #6b5a5e;
  --color-text-special: #a85656;
  --color-text-on-accent: #ffffff;
  --color-text-secondary-on-accent: #ffffff;
  --color-icon-primary: #2e2326;
  --color-icon-secondary: #6b5a5e;
  --color-border-subtle: #dfd9d4;
  --color-border-default: #cfc9c4;
  --color-border-strong: #9d9593;
  --color-divider-default: #cfc9c4;
  --color-cta-primary-default: #a85656;
  --color-cta-primary-hovered: #b87474;
  --color-cta-primary-pressed: #8f4949;
  --color-cta-primary-text: #ffffff;
  --color-cta-secondary-default: transparent;
  --color-cta-secondary-hovered: #e9e4de;
  --color-cta-secondary-pressed: #cfc9c4;
  --color-cta-secondary-text: #2e2326;
  --color-link-hovered: #864545;
  --color-focus-inner: #f7f2ec;
  --color-focus-outer: #2e2326;
  --color-glow: #c9a66b;
  --color-watermark: #c9a66b;

  /* Efeitos */
  --effect-glow-opacity: 0.32;
  --effect-watermark-opacity: 0.06;

  /* Espaço */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px;
  --space-control-x: 24px; --space-control-y: 12px;
  --layout-container: 1200px;
  --layout-margin: 16px;                                   /* mobile 16 · tablet 32 · desktop 48 */
  --space-section: clamp(64px, 52.11px + 3.048vw, 96px);   /* 64 (390) → 96 (1440) */

  /* Forma */
  --shape-control-radius: 2px;
  --shape-card-radius: 0;
  --border-control: 1px;

  /* Header */
  --header-h: 72px;

  /* Movimento (handoff 07) */
  --ease-ui: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-entrance: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-displacement: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-ui: 220ms;
  --dur-ui-m: 280ms;
  --dur-ui-l: 320ms;
  --dur-entrance: 1000ms;
  --reveal-dist: 16px;
  --stagger: 110ms;

  /* Tipografia — valores exatos em 390 e 1440, interpolados entre eles */
  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --fs-display-l: clamp(52px, 35.66px + 4.19vw, 96px);
  --fs-display-s: clamp(40px, 31.09px + 2.286vw, 64px);
  --lh-display-s: clamp(44px, 36.57px + 1.905vw, 64px);
  --fs-number: clamp(44px, 36.57px + 1.905vw, 64px);
  --fs-watermark: clamp(112px, 49.6px + 16vw, 280px);
  --lh-watermark: clamp(100px, 48px + 13.333vw, 240px);
  --fs-h3: clamp(24px, 22.51px + 0.381vw, 28px);
  --lh-h3: clamp(28px, 26.51px + 0.381vw, 32px);
  --fs-h4: clamp(20px, 19.26px + 0.1905vw, 22px);
  --lh-h4: clamp(26px, 25.26px + 0.1905vw, 28px);
  --fs-body-m: clamp(16px, 15.26px + 0.1905vw, 18px);
  --lh-body-m: clamp(26px, 25.26px + 0.1905vw, 28px);
  --fs-body-l: clamp(18px, 17.26px + 0.1905vw, 20px);
  --lh-body-l: clamp(28px, 26.51px + 0.381vw, 32px);
}

@media (min-width: 768px)  { :root { --layout-margin: 32px; } }
@media (min-width: 1024px) { :root { --layout-margin: 48px; --header-h: 88px; --reveal-dist: 24px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
  background: var(--color-background);
}
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--color-surface-accent); color: var(--color-text-on-accent); }
html { scrollbar-color: var(--color-border-default) var(--color-background); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: var(--color-border-default); border: 2px solid var(--color-background); border-radius: 2px; }

/* Foco: dois anéis de 2px (handoff 09 / 11) */
:focus-visible {
  outline: 2px solid var(--color-focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-focus-inner);
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  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 {
  position: fixed; left: 16px; top: 16px; z-index: 200;
  padding: 12px 24px; background: var(--color-cta-primary-default); color: var(--color-cta-primary-text);
  font-weight: 700; font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase; border-radius: var(--shape-control-radius);
  transform: translateY(-160%); transition: transform var(--dur-ui) var(--ease-ui);
}
.skip-link:focus { transform: none; }

.icon { flex: none; }
.container {
  width: 100%;
  max-width: calc(var(--layout-container) + var(--layout-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-margin);
  position: relative;
}
.stack-48 { display: flex; flex-direction: column; gap: var(--space-32); }
.stack-24 { display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; }
@media (min-width: 1024px) { .stack-48 { gap: var(--space-48); } }

/* ---------- Tipografia (estilos JH/*) ---------- */
.display-l {
  font-weight: 900; font-size: var(--fs-display-l); line-height: 1;
  letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance;
}
.display-s {
  font-weight: 800; font-size: var(--fs-display-s); line-height: var(--lh-display-s);
  letter-spacing: -0.024em; text-transform: uppercase; text-wrap: balance;
}
.h3 { font-weight: 800; font-size: var(--fs-h3); line-height: var(--lh-h3); text-transform: uppercase; }
.h4 { font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-h4); text-transform: uppercase; }
.h5 { font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: 0; }
.body-l { font-weight: 400; font-size: var(--fs-body-l); line-height: var(--lh-body-l); letter-spacing: 0.2px; }
.body-m { font-weight: 400; font-size: var(--fs-body-m); line-height: var(--lh-body-m); letter-spacing: 0.2px; }
.body-s { font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.2px; }
.label { font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: 0.32px; }
.caption { font-weight: 500; font-size: 14px; line-height: 22px; letter-spacing: 0.2px; }
.overline { font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 2.4px; text-transform: uppercase; }
.text-2 { color: var(--color-text-secondary); }
.text-special { color: var(--color-text-special); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--color-text-special);
  font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 2.4px; text-transform: uppercase;
}
.eyebrow__dot { width: 6px; height: 6px; background: var(--color-text-special); flex: none; }

.watermark {
  font-weight: 900; font-size: var(--fs-watermark); line-height: var(--lh-watermark);
  letter-spacing: -0.024em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-watermark); opacity: var(--effect-watermark-opacity);
  pointer-events: none; user-select: none;
}

/* Brilho: elipse amarela com desfoque de 240 (Figma) */
.glow {
  position: absolute; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(201,166,107, 1) 0%, rgba(201,166,107, 0.82) 28%, rgba(201,166,107, 0.38) 60%, rgba(201,166,107, 0) 100%);
  opacity: var(--effect-glow-opacity);
}

/* ---------- Botões e links (Site/Botão primário · contorno · Link de ação) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 48px; padding: var(--space-control-y) var(--space-control-x);
  border: var(--border-control) solid transparent; border-radius: var(--shape-control-radius);
  font-weight: 700; font-size: 14px; line-height: 24px; letter-spacing: 1.6px; text-transform: uppercase;
  white-space: nowrap; text-align: center;
  transition: background-color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 16px; height: 16px; transition: transform var(--dur-ui-l) var(--ease-ui); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-cta-primary-default); color: var(--color-cta-primary-text); }
.btn--primary:hover { background: var(--color-cta-primary-hovered); }
.btn--primary:active { background: var(--color-cta-primary-pressed); }
.btn--secondary { background: var(--color-cta-secondary-default); border-color: var(--color-border-strong); color: var(--color-cta-secondary-text); }
.btn--secondary:hover { background: var(--color-cta-secondary-hovered); }
.btn--secondary:active { background: var(--color-cta-secondary-pressed); }
.btn--block { width: 100%; }

.action-link {
  display: inline-flex; align-items: center; gap: var(--space-8); min-height: 48px; padding-block: var(--space-12);
  font-weight: 700; font-size: 14px; line-height: 24px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--color-text-secondary); transition: color var(--dur-ui) var(--ease-ui);
}
.action-link:hover { color: var(--color-text-primary); }

.text-link, .cell__link {
  display: inline-flex; align-items: center; gap: var(--space-8); min-height: 42px; padding-block: var(--space-12);
  font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 2.4px; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui);
}
.text-link:hover, .cell__link:hover { text-decoration-color: currentColor; }
.cell__link .icon { width: 14px; height: 14px; transition: transform var(--dur-ui-l) var(--ease-ui); }
.cell__link:hover .icon { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  transition: transform var(--dur-ui-l) var(--ease-ui);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(247,242,236, 0.86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-background-border);
  opacity: 0; transition: opacity var(--dur-ui-l) var(--ease-ui);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header__inner {
  height: 100%; max-width: calc(var(--layout-container) + var(--layout-margin) * 2); margin-inline: auto;
  padding-inline: var(--layout-margin); display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
}
.logo {
  display: inline-flex; gap: var(--space-4); white-space: nowrap;
  font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: 0; text-transform: uppercase;
  color: var(--color-text-primary);
}
.logo__accent { color: var(--color-text-special); }
.site-nav { display: none; }
.site-header__cta { display: none; }
.menu-toggle, .menu-close {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--shape-control-radius);
  border: 1px solid var(--color-border-default); color: var(--color-icon-primary);
  transition: background-color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.menu-toggle:hover { background: var(--color-cta-secondary-hovered); }
.menu-close { background: var(--color-surface-secondary); border-color: var(--color-border-strong); }
.menu-close:hover { background: var(--color-cta-secondary-pressed); }

@media (min-width: 1024px) {
  .site-nav {
    display: flex; gap: var(--space-40); align-items: center;
    font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 2.4px; text-transform: uppercase;
  }
  .site-nav a {
    position: relative; padding-block: 15px; color: var(--color-text-primary);
    transition: color var(--dur-ui) var(--ease-ui);
  }
  .site-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui-l) var(--ease-ui);
  }
  .site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }
  .site-nav a.is-active { color: var(--color-text-special); }
  .site-header__cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* ---------- Menu mobile ---------- */
.menu {
  position: fixed; inset: 0; z-index: 100; background: var(--color-background);
  overflow: hidden; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu__glow { width: 560px; height: 560px; left: -80px; top: 520px; transform: scale(1.86); }
.menu__panel {
  position: relative; z-index: 1; height: 100%; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-32);
  padding: 0 var(--layout-margin) calc(var(--space-24) + env(safe-area-inset-bottom));
  max-width: 600px; margin-inline: auto;
}
.menu__top { display: flex; flex-direction: column; gap: var(--space-32); }
.menu__header { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.menu__label { margin-bottom: var(--space-16); }
.menu__item {
  display: flex; align-items: center; gap: var(--space-16); padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text-primary);
  transition: color var(--dur-ui) var(--ease-ui);
}
.menu__num { font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 2.4px; color: var(--color-text-secondary); transition: color var(--dur-ui) var(--ease-ui); }
.menu__text { flex: 1; font-weight: 800; font-size: 40px; line-height: 44px; letter-spacing: -1px; text-transform: uppercase; }
.menu__item .icon { color: var(--color-icon-secondary); transition: transform var(--dur-ui-l) var(--ease-ui), color var(--dur-ui) var(--ease-ui); }
.menu__item:hover .icon { transform: translateX(4px); }
.menu__item.is-active, .menu__item.is-active .menu__num, .menu__item.is-active .icon { color: var(--color-text-special); }
.menu__footer { display: flex; flex-direction: column; gap: var(--space-24); }
.menu__footer .caption { color: var(--color-text-secondary); }
.menu__contacts { display: flex; gap: var(--space-24); }
.contact-link {
  display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px;
  font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: 0.32px; color: var(--color-text-primary);
}
.contact-link .icon { color: var(--color-icon-secondary); transition: color var(--dur-ui) var(--ease-ui); }
a.contact-link:hover .icon { color: var(--color-text-special); }

/* Animação do menu: fade + 16px (280ms, entrada) e itens em sequência (110ms) */
.js .menu { opacity: 0; transition: opacity var(--dur-ui-m) var(--ease-entrance); }
.js .menu .menu__panel { transform: translateY(16px); transition: transform var(--dur-ui-m) var(--ease-entrance); }
.js .menu [data-menu-item] { opacity: 0; transform: translateY(16px); transition: opacity 480ms var(--ease-entrance), transform 480ms var(--ease-entrance); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js .menu.is-open { opacity: 1; }
.js .menu.is-open .menu__panel { transform: none; }
.js .menu.is-open [data-menu-item] { opacity: 1; transform: none; }
.menu-open, .menu-open body { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-top: 112px; }
.hero__glow {
  width: 520px; height: 560px; left: 50%; top: 518px;
  translate: -50% -30px; transform: scale(1.92);
}
.hero__wm { display: none; }
.hero__grid { position: relative; z-index: 1; }
.hero__text { display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; }
.hero__title .line > span { display: inline-block; }
.hero__actions { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.hero__actions .btn { width: 100%; }
.hero__actions .action-link { align-self: flex-start; }
.hero__visual {
  position: relative; margin-top: 30px; margin-inline: calc(var(--layout-margin) * -1);
  display: flex; justify-content: center;
}
.hero__wm-m {
  position: absolute; left: 50%; top: -3px; translate: -50% 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__photo { position: relative; z-index: 1; width: 100%; max-width: 520px; }
.hero__photo img { width: 100%; height: auto; aspect-ratio: 558 / 874; object-fit: cover; object-position: center top; }
.hero__numbers {
  position: absolute; z-index: 2; left: 50%; bottom: 9.18%;
  width: calc(100% - var(--layout-margin) * 2); max-width: 488px; translate: -50% 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12);
}
.stat {
  display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24);
  border-radius: var(--shape-control-radius); border: 1px solid transparent;
}
.stat__num {
  font-weight: 300; font-size: var(--fs-number); line-height: 1; letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat__label { font-weight: 500; font-size: 14px; line-height: 22px; letter-spacing: 0.2px; }
.stat--accent { background: var(--color-surface-accent); color: var(--color-text-on-accent); }
.stat--accent .stat__label { color: var(--color-text-secondary-on-accent); }
.stat--glass {
  background: rgba(0, 0, 0, 0.72); border-color: transparent; color: #ffffff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.stat--glass .stat__label { color: rgba(255, 255, 255, 0.8); }

@media (min-width: 768px) {
  .hero__actions { flex-direction: row; align-items: center; gap: var(--space-24); width: auto; }
  .hero__actions .btn { width: auto; }
}

@media (min-width: 1024px) {
  .hero { padding-top: 0; height: clamp(720px, 61.11vw, 880px); }
  .hero__glow { width: 900px; height: 900px; left: 36.11%; top: -60px; translate: none; transform: scale(1.53); }
  .hero__wm {
    display: block; position: absolute; z-index: 0; width: 86.11%;
  }
  .hero__wm--a { left: 6.67%; top: 10.9%; }
  .hero__wm--b { right: 7.22%; top: 37.5%; text-align: right; }
  .hero__grid { height: 100%; }
  .hero__text { position: absolute; z-index: 2; left: var(--layout-margin); top: 28.4%; width: min(640px, 55%); }
  .hero__lead { max-width: 440px; }
  .hero__visual { position: static; margin: 0; display: block; }
  .hero__wm-m { display: none; }
  .hero__photo {
    position: absolute; z-index: 1; max-width: none;
    left: calc(var(--layout-margin) + (100% - var(--layout-margin) * 2) * 0.515);
    width: calc((100% - var(--layout-margin) * 2) * 0.465);
    top: 9.43%;
  }
  .hero__numbers {
    left: auto; translate: none; bottom: auto; max-width: none; width: auto;
    right: calc(var(--layout-margin) - (100% - var(--layout-margin) * 2) * 0.03);
    top: 63.64%; display: flex; gap: var(--space-16);
  }
  .stat { width: clamp(196px, 15.28vw, 220px); }
}

/* ---------- Seções ---------- */
.section { position: relative; padding-block: var(--space-section); overflow: clip; }
.section > .container { z-index: 1; }
.section-head { display: flex; flex-direction: column; gap: var(--space-24); }
.section-head__title { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.section-head__aside { display: flex; flex-direction: column; gap: var(--space-24); align-items: stretch; }
@media (min-width: 768px) {
  .section-head__aside { align-items: flex-start; }
}
@media (min-width: 1024px) {
  .section-head { flex-direction: row; align-items: flex-end; gap: var(--space-64); }
  .section-head__title { flex: 1; min-width: 0; }
  .section-head__aside { width: 400px; flex: none; align-items: flex-end; }
  .section-head__aside p { align-self: stretch; }
}

.glow--formatos { width: 700px; height: 700px; right: -160px; top: 400px; transform: scale(1.69); }
.glow--como { width: 700px; height: 700px; left: -200px; top: 300px; transform: scale(1.69); }
@media (min-width: 1024px) {
  .glow--formatos { left: 62.5%; right: auto; top: 200px; }
  .glow--como { left: -300px; top: 100px; }
}

/* Grade com linhas de 1px (fundo da borda aparecendo no gap) */
/* As linhas pertencem a cada célula (box-shadow de 1px), então se movem junto na
   animação de entrada e nunca deixam um fundo cinza aparecendo. */
.grid-lines {
  display: grid; gap: var(--border-control); padding: var(--border-control);
}
.grid-lines > * { box-shadow: 0 0 0 var(--border-control) var(--color-surface-primary-border); }
.grid-lines--2 { grid-template-columns: 1fr; }
.grid-lines--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-lines--4 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-lines--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-lines--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-lines--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-lines--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Site/Célula · Site/Célula destaque */
.cell {
  background: var(--color-surface-primary); padding: var(--space-32);
  display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; min-width: 0;
}
.grid-lines--3 .cell { padding: var(--space-16); }
@media (min-width: 768px) { .grid-lines--3 .cell { padding: var(--space-24); } }
@media (min-width: 1024px) { .grid-lines--3 .cell { padding: var(--space-32); } }
.cells--compact .cell { min-height: 0; }
@media (min-width: 1024px) { .cells--compact .cell { min-height: 160px; } }
.cell__top { width: 100%; display: flex; flex-direction: column; gap: var(--space-16); color: var(--color-text-special); }
.rule { display: block; height: 1px; width: 100%; background: currentColor; transform-origin: left center; }
.cell--accent { background: var(--color-surface-accent); color: var(--color-text-on-accent); }
.cell--accent .cell__top { color: var(--color-text-on-accent); }
.cell--accent .body-s { color: var(--color-text-secondary-on-accent); }
.cell--accent .cell__link { color: var(--color-text-on-accent); }
.cell .cell__link { color: var(--color-text-special); }
.cell--accent .cell__link { color: var(--color-text-on-accent); }

/* Formatos */
.format {
  background: var(--color-surface-primary); padding: var(--space-24);
  display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; min-width: 0;
}
@media (min-width: 1024px) { .format { padding: var(--space-48); } }
.format .text-link { color: var(--color-text-special); }
.format--accent { background: var(--color-surface-accent); color: var(--color-text-on-accent); }
.format--accent .cell__top { color: var(--color-text-on-accent); }
.format--accent .body-m { color: var(--color-text-secondary-on-accent); }
.format--accent .text-link { color: var(--color-text-on-accent); }
.checklist { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; }
.checklist li { display: flex; gap: var(--space-12); align-items: flex-start; font-size: 16px; line-height: 26px; letter-spacing: 0.2px; }
.checklist .icon { margin-top: 3px; color: var(--color-text-special); }
.format--accent .checklist .icon { color: var(--color-text-on-accent); }

/* Cards com foto */
.cards-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-24); }
@media (min-width: 768px) { .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.photo-card { background: var(--color-surface-primary); display: flex; flex-direction: column; min-width: 0; }
.photo-card__body { flex: 1; padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); align-items: flex-start; }
.tag {
  padding: var(--space-4) var(--space-8); background: var(--color-surface-accent); color: var(--color-text-on-accent);
  font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 2.4px; text-transform: uppercase;
}
.photo-card--accent .photo-card__body { background: var(--color-surface-accent); color: var(--color-text-on-accent); }
.photo-card--accent .tag { background: var(--color-text-on-accent); color: var(--color-text-special); }
.photo-card--accent .photo-card__body .caption { color: var(--color-text-secondary-on-accent); }

/* Placeholder/Foto — substituir por fotografia real (nunca publicar com placeholder) */
.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12);
  padding: var(--space-24); text-align: center;
  background: var(--color-surface-secondary); border: 1px dashed var(--color-border-strong); color: var(--color-text-secondary);
}
.placeholder--card { height: 240px; }
.placeholder--map { width: 100%; height: 280px; transition: border-color var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui); }
.placeholder--map:hover { border-color: var(--color-text-special); }
@media (min-width: 1024px) { .placeholder--map { width: 49%; height: 460px; flex: none; } }

/* Depoimento */
.quote {
  background: var(--color-surface-primary); border: 1px solid var(--color-surface-primary-border);
  padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); min-width: 0;
}
.quote__icon { color: var(--color-text-special); }
.quote blockquote { margin: 0; flex: 1; }
.divider { display: block; height: 1px; width: 100%; background: var(--color-divider-default); }
.divider--subtle { background: var(--color-border-subtle); }
.quote__author { display: flex; flex-direction: column; gap: var(--space-4); }

/* Londrina */
.local { display: flex; flex-direction: column; gap: var(--space-32); }
.info-list { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; }
.info-list li { display: flex; gap: var(--space-12); align-items: flex-start; }
.info-list .icon { color: var(--color-text-special); margin-top: 2px; }
.local__actions { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; }
@media (min-width: 768px) { .local__actions { flex-direction: row; width: auto; } }
@media (min-width: 1024px) {
  .local { flex-direction: row; align-items: center; gap: var(--space-64); }
  .local__text { flex: 1; min-width: 0; }
}

/* FAQ */
.faq { display: flex; flex-direction: column; gap: var(--space-32); }
.faq__list { display: flex; flex-direction: column; gap: var(--space-8); }
.faq-item {
  background: var(--color-surface-primary); border: 1px solid var(--color-surface-primary-border);
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.faq-item.is-expanded { border-color: var(--color-border-strong); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-16) var(--space-24); min-height: 56px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .label { flex: 1; }
.faq-item summary .icon { color: var(--color-icon-primary); transition: transform 520ms var(--ease-displacement); }
.faq-icon__v { transform-box: fill-box; transform-origin: center; transition: transform 520ms var(--ease-displacement); }
.faq-item.is-expanded summary .icon { transform: rotate(180deg); }
.faq-item.is-expanded .faq-icon__v { transform: scaleY(0); }
.faq-item:hover:not(.is-expanded) { border-color: var(--color-border-default); }
/* A altura é animada pelo JS (main.js); aqui só o conteúdo, com transform e opacity */
.faq-item__body {
  padding: 0 var(--space-24) var(--space-24); margin-top: calc(var(--space-12) - var(--space-16));
  opacity: 0; transform: translateY(-8px);
  transition: opacity 360ms var(--ease-ui), transform 520ms var(--ease-entrance);
}
.faq-item.is-expanded .faq-item__body { opacity: 1; transform: none; transition-delay: 90ms; }
@media (min-width: 1024px) {
  .faq { flex-direction: row; align-items: flex-start; gap: var(--space-64); }
  .faq__text { width: 400px; flex: none; }
  .faq__list { flex: 1; min-width: 0; }
}

/* Chamada final */
.cta-final { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--space-96); text-align: center; }
@media (min-width: 1024px) { .cta-final { padding-block: var(--space-128); } }
.glow--cta { width: 600px; height: 600px; left: 50%; top: 0; translate: -50% 0; transform: scale(1.69); }
@media (min-width: 1024px) { .glow--cta { width: 900px; height: 700px; top: -100px; transform: scale(1.53, 1.69); } }
.cta-final__wm { position: absolute; left: 50%; top: 140px; translate: -50% 0; z-index: 0; }
@media (min-width: 1024px) { .cta-final__wm { top: 80px; } }
.cta-final__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
.cta-final__inner > div { width: 100%; }
.cta-final__inner .btn { width: 100%; }
@media (min-width: 768px) { .cta-final__inner > div { width: auto; } .cta-final__inner .btn { width: auto; } }
@media (min-width: 1024px) { .cta-final__inner { gap: var(--space-32); } }

/* Botões cheios no mobile (como no Figma 390) */
@media (max-width: 767.98px) {
  .section-head__aside .btn, .faq__text .btn, .faq__text > div { width: 100%; }
}

/* ---------- Rodapé ---------- */
.site-footer {
  border-top: 1px solid var(--color-background-border);
  padding: var(--space-48) 0 calc(var(--space-32) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { .site-footer { padding-top: var(--space-64); } }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-32); }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-48); } }
.footer-col { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; min-width: 0; }
.footer-col .contact-link { min-height: 24px; }
.footer-base { display: flex; flex-direction: column; gap: var(--space-16); }
.footer-base__links { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; }
.footer-link { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; transition: color var(--dur-ui) var(--ease-ui); }
.footer-link:hover { color: var(--color-text-primary); }
.back-top { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; color: var(--color-text-primary); }
.back-top .icon { color: var(--color-text-special); transition: transform var(--dur-ui-l) var(--ease-ui); }
.back-top:hover .icon { transform: translateY(-3px); }
@media (min-width: 1024px) {
  .footer-base { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   Movimento — só transform e opacity. Estado final sem JS.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0; transform: translateY(var(--reveal-dist));
  transition: opacity var(--dur-entrance) var(--ease-entrance), transform var(--dur-entrance) var(--ease-entrance);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal] .rule { transform: scaleX(0); transition: transform 900ms var(--ease-displacement); transition-delay: calc(var(--d, 0ms) + 260ms); }
.js [data-reveal].is-in .rule { transform: scaleX(1); }

/* Hero — sequência de abertura */
.js .hero__glow { opacity: 0; transition: opacity 1600ms var(--ease-entrance); }
.js .hero.is-ready .hero__glow { opacity: var(--effect-glow-opacity); }
.js .hero__wm, .js .hero__wm-m .watermark { opacity: 0; transition: opacity 1400ms var(--ease-entrance), translate 1600ms var(--ease-displacement); }
.js .hero__wm--a, .js .hero__wm-m-a { translate: -6% 0; }
.js .hero__wm--b, .js .hero__wm-m-b { translate: 6% 0; }
.js .hero.is-ready .hero__wm, .js .hero.is-ready .hero__wm-m .watermark { opacity: var(--effect-watermark-opacity); translate: 0 0; }
.js [data-hero] { opacity: 0; transform: translateY(var(--reveal-dist)); transition: opacity var(--dur-entrance) var(--ease-entrance), transform var(--dur-entrance) var(--ease-entrance); }
.js .hero__title [data-hero] { opacity: 1; transform: translateY(105%); transition: transform 1100ms var(--ease-entrance); }
.js .hero [data-hero="photo"] { transform: translateY(48px); transition-duration: 1400ms; }
.js .hero.is-ready [data-hero] { opacity: 1; transform: none; }
.js .hero.is-ready [data-hero="1"] { transition-delay: 100ms; }
.js .hero.is-ready [data-hero="2"] { transition-delay: 210ms; }
.js .hero.is-ready [data-hero="3"] { transition-delay: 320ms; }
.js .hero.is-ready [data-hero="4"] { transition-delay: 430ms; }
.js .hero.is-ready [data-hero="5"] { transition-delay: 540ms; }
.js .hero.is-ready [data-hero="photo"] { transition-delay: 200ms; }
.js .hero.is-ready [data-hero="n1"] { transition-delay: 760ms; }
.js .hero.is-ready [data-hero="n2"] { transition-delay: 870ms; }

[data-parallax] { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-hero], .js .hero__title [data-hero] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js [data-reveal] .rule { transform: none !important; transition: none !important; }
  .js .hero__glow { opacity: var(--effect-glow-opacity); transition: none; }
  .js .hero__wm, .js .hero__wm-m .watermark { opacity: var(--effect-watermark-opacity); translate: 0 0; transition: none; }
  [data-parallax] { transform: none !important; }
  .js .menu .menu__panel, .js .menu [data-menu-item] { transform: none !important; }
  .js .menu [data-menu-item] { transition: opacity 200ms linear; transition-delay: 0ms; }
  .faq-item__body { transition: opacity 150ms linear; transform: none; }
  .btn:hover .icon, .cell__link:hover .icon, .menu__item:hover .icon, .back-top:hover .icon { transform: none; }
}

/* ==========================================================================
   Foto do hero — mesma posição e escala do Figma (página "Aline Pelegrini")
   A caixa .hero__photo é o quadro original; a imagem é posicionada dentro dela.
   ========================================================================== */
.hero__photo { aspect-ratio: 390 / 610; }
.hero__photo img {
  position: absolute; max-width: none; height: auto; aspect-ratio: auto; object-fit: fill;
  left: -9.231%; top: -2.295%; width: 120.081%;
}
@media (min-width: 1024px) {
  .hero__photo { aspect-ratio: 558 / 874; }
  .hero__photo img { left: 7.258%; top: 8.352%; width: 86.776%; }
}