/* ============================================================
   L2M.house — editorial + sketch + terminal
   verde #5EA67B · fundo #e5ead4
   ============================================================ */

:root {
  --bg:       #e5ead4;
  --paper:    #eef1e3;
  --ink:      #191510;
  --ink-soft: #6a6152;
  --green:    #5EA67B;
  --green-d:  #477F61;
  --dark:     #161510;

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;
  --font-hand:    "Schoolbell", cursive;
  --max: 1240px;
  --page-x: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --section-y-tight: clamp(3.25rem, 6.5vw, 5.5rem);

  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 4 C 8 13 11 21 14 28 C 15 24 16 20 18 17 C 21 18 24 19 27 20 C 20 14 13 8 6 4 Z' fill='%23eef1e3' stroke='%23191510' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M9 8 C 13 11 17 14 21 18' fill='none' stroke='%235EA67B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 6 4, auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M13 4 C 11.8 4 11 5 11 6.2 L11 17 L9.2 14.7 C 8.4 13.7 6.5 14.4 7 15.8 L9.8 23.2 C 10.6 25.3 12.7 27 15 27 L21 27 C 24.2 27 26 24.8 26 21.8 L26 14.3 C 26 13 24 12.7 23.5 13.9 C 23.1 12.5 21.1 12.4 20.7 13.7 C 20.2 12.3 18.3 12.2 18 13.4 L18 6.3 C 18 5 16.8 4.3 15.8 4.7 C 15.3 4.2 14.2 4 13 4 Z' fill='%23eef1e3' stroke='%23191510' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.5 7 L14.5 18 M18 13.4 L18 19 M21.5 14.2 L21.5 19.3' fill='none' stroke='%235EA67B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 14 6, pointer;
  --cursor-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 15 C 7 15 6.5 16.3 7.1 17.2 L10.5 23.2 C 11.8 25.5 14.1 27 16.8 27 L21 27 C 24 27 26 24.8 26 21.8 L26 14.5 C 26 13.1 24 12.8 23.4 14 L23.4 19 L22 19 L22 12 C 22 10.7 20.1 10.5 19.4 11.7 L19.4 19 L18 19 L18 9.8 C 18 8.3 15.8 8.2 15.2 9.6 L15.2 19 L13.8 19 L13.8 12 C 13.8 10.6 11.8 10.4 11.2 11.7 L11.2 19 Z' fill='%23eef1e3' stroke='%23191510' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 20 C 15 21 19 21 23 20' fill='none' stroke='%235EA67B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 15 15, grab;
  --cursor-grabbing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M7.5 16.5 C 7 15.4 8 14.3 9.3 14.7 L11 15.4 L11 10.2 C 11 8.7 13.2 8.5 13.9 9.8 C 14.4 8.6 16.4 8.7 16.9 10 C 17.6 9 19.5 9.5 19.7 10.9 C 20.7 10.1 22.5 10.9 22.5 12.4 L22.5 20 C 22.5 24.2 19.8 27 15.8 27 C 13.2 27 11.2 25.8 9.8 23.6 Z' fill='%23eef1e3' stroke='%23191510' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.4 16.2 C 14.2 17.2 18.2 17.2 22 16.4' fill='none' stroke='%235EA67B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 15 15, grabbing;
  --cursor-chalk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 24 L20 10 C 21.3 8.8 23.2 8.9 24.5 10.1 L26 11.6 L10.2 27.3 L6.8 27.2 Z' fill='%23f7f4df' stroke='%23191510' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M18.7 11.4 L24.6 17.3' fill='none' stroke='%235EA67B' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5 28 C 6.6 26.7 8 25.7 10.2 25.2' fill='none' stroke='%23f7f4df' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 7 25, crosshair;
  --cursor-stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M13 6 L19 6 L20 14 L12 14 Z' fill='%23eef1e3' stroke='%23191510' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 16 L24 16 L26 24 L6 24 Z' fill='%23eef1e3' stroke='%23191510' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 26 C 13 25 18 27 23 25' fill='none' stroke='%235EA67B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 16 20, copy;
  --cursor-eraser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 22 L18 10 C 19.3 8.8 21.2 8.8 22.5 10.1 L25.5 13.1 C 26.7 14.3 26.7 16.2 25.5 17.5 L16 27 L9 27 Z' fill='%23eef1e3' stroke='%23191510' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 14 L21.5 21.5' fill='none' stroke='%235EA67B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 8 23, cell;
}

/* ============ DARK MODE ============ */
[data-theme="dark"] {
  --bg:       #14170f;
  --paper:    #1f2318;
  --ink:      #e9edda;
  --ink-soft: #9ba189;
  --green:    #63c089;
  --green-d:  #88d7a8;
  --dark:     #0e100a;
  color-scheme: dark;
}
/* véu do hero usa a cor de fundo (hardcoded clara) — escurece no dark */
[data-theme="dark"] .hero__stage::before {
  background: linear-gradient(90deg, rgba(20,23,15,.92) 0%, rgba(20,23,15,.6) 24%, rgba(20,23,15,.12) 46%, transparent 62%);
}
/* stickers das fases misturam #fff — força superfície escura */
[data-theme="dark"] .process .about__cell { background: var(--paper); }
/* sombras duras: pretas pra aparecerem sobre o fundo escuro */
[data-theme="dark"] .svc { box-shadow: 5px 5px 0 rgba(0,0,0,.45); }
[data-theme="dark"] .svc:hover,
[data-theme="dark"] .svc:focus-within,
[data-theme="dark"] .svc.reveal.in:hover,
[data-theme="dark"] .svc.reveal.in:focus-within { box-shadow: 8px 11px 0 rgba(0,0,0,.55); }
[data-theme="dark"] .chalkboard { box-shadow: 8px 8px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(247,244,223,.14); }
[data-theme="dark"] .polaroid { box-shadow: 0 4px 0 rgba(0,0,0,.5); }
/* botão sólido tem fundo creme fixo -> mantém texto escuro no dark */
[data-theme="dark"] .btn { color: #191510; box-shadow: 2px 2px 0 rgba(0,0,0,.4); }
[data-theme="dark"] .btn:hover { color: #191510; box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
[data-theme="dark"] .btn--ghost { color: var(--ink); }
/* inputs do modal têm fundo creme fixo -> texto/placeholder escuros no dark */
[data-theme="dark"] .lead-modal__form input,
[data-theme="dark"] .lead-modal__form textarea,
[data-theme="dark"] .lead-modal__form select { color: #191510; }
[data-theme="dark"] .lead-modal__form input::placeholder,
[data-theme="dark"] .lead-modal__form textarea::placeholder { color: rgba(25,21,16,.55); }
/* polaroids seguem com moldura clara -> legenda e descrição sempre escuras */
[data-theme="dark"] .polaroid__caption,
[data-theme="dark"] .polaroid__desc-text { color: #1a160f; }
[data-theme="dark"] .polaroid__desc-eyebrow { color: #477F61; }
[data-theme="dark"] .polaroid__chip { color: #1a160f; background: rgba(247, 244, 223, .92); }
/* "+" no papel claro -> tinta escura no repouso (hover/aberto já forçam verde) */
[data-theme="dark"] .polaroid__more { color: #1a160f; border-color: #1a160f; }
/* vídeo do contato (fundo preto) -> lighten no escuro */
[data-theme="dark"] .contact__media { mix-blend-mode: lighten; }

/* toggle de tema (claro/escuro) */
.theme-toggle {
  position: fixed;
  right: clamp(.9rem, 2vw, 1.4rem);
  bottom: clamp(.9rem, 2vw, 1.4rem);
  z-index: 120;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .52rem;
  min-width: 7.25rem;
  min-height: 3.1rem;
  padding: .44rem .7rem;
  border: 3px solid var(--ink);
  border-radius: 10px 7px 12px 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 54%),
    #f4edd8;
  color: var(--ink);
  box-shadow:
    3px 4px 0 rgba(25,21,16,.18),
    inset 0 0 0 1px rgba(255,255,255,.45);
  opacity: .5;
  cursor: pointer; filter: url(#rough);
  transition: opacity .22s ease, background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.theme-toggle::before,
.theme-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .32rem;
  height: .32rem;
  border: 1.7px solid rgba(25,21,16,.72);
  border-radius: 50%;
  background: rgba(25,21,16,.08);
  transform: translateY(-50%);
}
.theme-toggle::before { left: .38rem; }
.theme-toggle::after { left: auto; right: .38rem; }
.theme-toggle:hover {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), transparent 54%),
    color-mix(in srgb, var(--green) 10%, #f4edd8);
  border-color: var(--green-d);
}
.theme-toggle:focus-visible {
  opacity: 1;
}
.theme-toggle__label {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  line-height: 1;
  color: rgba(25,21,16,.62);
  transform: rotate(-2deg);
}
.theme-toggle__icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle__slot {
  position: relative;
  flex: 0 0 3.55rem;
  width: 3.55rem;
  height: 1.72rem;
  border: 2.2px solid var(--ink);
  border-radius: 999px 800px 999px 760px;
  background:
    linear-gradient(90deg, rgba(25,21,16,.2) 0 50%, rgba(255,255,255,.34) 50% 100%),
    #d9cfb9;
  box-shadow:
    inset 0 2px 0 rgba(25,21,16,.18),
    inset 0 -2px 0 rgba(255,255,255,.42);
}
.theme-toggle__lever {
  position: absolute;
  left: .18rem;
  top: .17rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(180deg, #fff8e8 0%, #cfc1a5 100%);
  box-shadow:
    1px 1px 0 rgba(25,21,16,.2),
    inset 0 1px 0 rgba(255,255,255,.78);
  transform: translateX(0);
  transition: transform .24s ease, background .35s ease;
}
.theme-toggle[aria-pressed="true"] .theme-toggle__lever {
  transform: translateX(0);
  background:
    linear-gradient(180deg, #ded2ba 0%, #a99b82 100%);
}
.theme-toggle[aria-pressed="false"] .theme-toggle__lever {
  transform: translateX(1.84rem);
  background:
    linear-gradient(180deg, #f9fff5 0%, var(--green) 100%);
}
.theme-toggle[aria-pressed="true"] .theme-toggle__label--off,
.theme-toggle[aria-pressed="false"] .theme-toggle__label--on {
  color: var(--green-d);
  opacity: 1;
}
.theme-toggle[aria-pressed="true"] .theme-toggle__label--on,
.theme-toggle[aria-pressed="false"] .theme-toggle__label--off {
  opacity: .48;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.theme-changing,
html.theme-changing body,
html.theme-changing .nav::before,
html.theme-changing .hero__stage::before,
html.theme-changing .svc,
html.theme-changing .work__board,
html.theme-changing .about__motto,
html.theme-changing .process .about__cell,
html.theme-changing .contact,
html.theme-changing .lead-modal__panel {
  transition:
    background-color .42s ease,
    background .42s ease,
    color .42s ease,
    border-color .42s ease,
    box-shadow .42s ease,
    opacity .42s ease;
}
html { scroll-behavior: smooth; }
::selection {
  background: color-mix(in srgb, var(--green) 62%, transparent);
  color: var(--ink);
  text-shadow: none;
}
::-moz-selection {
  background: color-mix(in srgb, var(--green) 62%, transparent);
  color: var(--ink);
  text-shadow: none;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, transparent 0, transparent clamp(3.4rem, 8vw, 6.6rem), rgba(94,166,123,.16) clamp(3.4rem, 8vw, 6.6rem), rgba(94,166,123,.16) calc(clamp(3.4rem, 8vw, 6.6rem) + 1px), transparent calc(clamp(3.4rem, 8vw, 6.6rem) + 1px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='72' viewBox='0 0 280 72'%3E%3Cpath d='M-8 24 C 34 21 70 26 112 23 S 204 25 288 23' fill='none' stroke='%23477F61' stroke-opacity='.18' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M-8 48 C 42 49 86 45 128 48 S 226 46 288 49' fill='none' stroke='%23477F61' stroke-opacity='.14' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%, 280px 72px;
  background-position: 0 0, 0 10px;
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: .005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: var(--cursor-default);
}
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  background:
    linear-gradient(90deg, transparent 0, transparent clamp(3.4rem, 8vw, 6.6rem), rgba(94,166,123,.14) clamp(3.4rem, 8vw, 6.6rem), rgba(94,166,123,.14) calc(clamp(3.4rem, 8vw, 6.6rem) + 1px), transparent calc(clamp(3.4rem, 8vw, 6.6rem) + 1px)),
    var(--bg);
  color: var(--green-d);
  font-family: var(--font-hand);
  font-size: clamp(1.25rem, 4vw, 2rem);
  transition: opacity .35s ease, visibility .35s ease;
}
.site-loader span {
  width: 3.5rem;
  height: 3.5rem;
  border: 3px solid color-mix(in srgb, var(--green) 12%, transparent);
  border-top-color: var(--green-d);
  border-bottom-color: var(--green-d);
  border-radius: 50%;
  animation: hero-spin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.site-loader b {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85em;
  line-height: 1;
  animation: loader-pulse 1.5s ease-in-out infinite;
}
@keyframes loader-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
body.is-page-loaded .site-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; cursor: var(--cursor-pointer); }
button,
[role="button"],
summary {
  cursor: var(--cursor-pointer);
}
input,
textarea,
[contenteditable="true"] {
  cursor: text;
}
img, svg { display: block; max-width: 100%; }
.g { color: var(--green); }
.hand-mark {
  font-family: var(--font-hand);
  color: var(--green-d);
  font-size: 1.12em;
  line-height: .95;
  letter-spacing: .015em;
  text-transform: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* sublinhado desenhado à mão */
.u-line { position: relative; }
.u-line .squiggle { position: absolute; left: -1%; bottom: -.14em; width: 102%; height: .34em; color: var(--green); overflow: visible; }

.kicker { font-family: var(--font-hand); font-size: .98rem; letter-spacing: .07em; text-transform: uppercase; color: var(--green-d); margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem); }
.kicker--light { color: var(--green); }

/* ---------- buttons (borda sketch) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .56rem;
  font-family: var(--font-hand);
  font-size: 1.14rem;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  letter-spacing: .02em;
  padding: .86rem 1.42rem .78rem;
  border: 2.4px solid var(--ink);
  background: #fbfaf3;
  color: var(--ink);
  border-radius: 18px 13px 19px 14px;
  box-shadow: 2px 2px 0 rgba(25,21,16,.13);
  filter: url(#rough);
  cursor: var(--cursor-pointer);
  transition: background .22s, border-color .22s, color .22s, transform .22s, box-shadow .22s;
}
.btn:hover {
  background: color-mix(in srgb, var(--green) 13%, #fbfaf3);
  border-color: var(--green-d);
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(25,21,16,.16);
  transform: translateY(-1px) rotate(-.35deg);
}
.btn__icon {
  flex: 0 0 auto;
  width: 1.22em;
  height: 1.22em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#rough);
  transition: transform .22s ease;
}
.btn:hover .btn__icon { transform: rotate(-4deg) scale(1.05); }
.btn__icon--download { display: none; }
.lead-modal.is-download .btn__icon--mail { display: none; }
.lead-modal.is-download .btn__icon--download { display: block; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  background: color-mix(in srgb, var(--paper) 74%, #fff);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--light {
  background: var(--green);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(25,21,16,.18);
}
.btn--light:hover {
  background: #fff;
  border-color: var(--ink);
  color: var(--dark);
}

/* ============ NAV (logo central) ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(.5rem, 1.2vw, .8rem) var(--page-x);
  background: transparent;
}
/* fundo da nav vai de ponta a ponta da tela; o conteúdo continua no container */
.nav::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.nav__side { display: flex; gap: 1.4rem; align-items: center; font-family: var(--font-hand); font-size: 1rem; }
.nav__side--l { justify-self: start; }
.nav__side--r { justify-self: end; }
.nav__side a { text-transform: uppercase; letter-spacing: .02em; transition: color .2s; }
.nav__side a:hover { color: var(--green-d); }

.brand { justify-self: center; display: inline-flex; align-items: center; }
.brand__logo { height: clamp(70px, 6.5vw, 86px); width: auto; transition: transform .3s ease; }
.brand:hover .brand__logo { transform: scale(1.04); }

.nav__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-hand);
  font-size: 1.04rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .02em;
  padding: .48rem 1rem .42rem;
  border: 2.3px solid var(--ink);
  border-radius: 17px 12px 18px 13px;
  background: var(--green);
  color: #fff;
  box-shadow: 2px 3px 0 rgba(25,21,16,.16);
  filter: url(#rough);
  transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.nav__cta:hover {
  background: #fff;
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 3px 4px 0 rgba(25,21,16,.2);
  transform: translateY(-1px) rotate(-.5deg);
}

/* ============ SELETOR DE IDIOMAS ============ */
.lang { position: relative; display: inline-flex; align-items: center; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  font-family: var(--font-hand);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: .18rem .12rem;
  cursor: var(--cursor-pointer);
  transition: color .2s;
}
.lang__btn:hover,
.lang__btn[aria-expanded="true"] { color: var(--green-d); }
.lang__btn:focus-visible {
  outline: 2px solid var(--green-d);
  outline-offset: 3px;
  border-radius: 5px;
}
.lang__chev {
  width: .68rem;
  height: .46rem;
  color: currentColor;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }

.lang__panel {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 60;
  min-width: 11.75rem;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--paper);
  color: var(--ink);
  border: 2.4px solid var(--ink);
  border-radius: 14px 9px 16px 11px;
  box-shadow: 3px 4px 0 rgba(25,21,16,.16);
  filter: url(#rough);
  transform-origin: 88% 0;
  transform: translateY(-6px) rotate(-.5deg) scale(.98);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear .2s;
}
.lang__panel[hidden] { display: none; }
.lang.is-open .lang__panel {
  transform: translateY(0) rotate(0) scale(1);
  opacity: 1;
  visibility: visible;
  transition: opacity .16s ease, transform .18s cubic-bezier(0.16, 1, 0.3, 1);
}
/* .lang .lang__item (0,2,0) vence .nav__side a (0,1,1): nomes em caixa nativa, não uppercase */
.lang .lang__item {
  display: flex;
  align-items: center;
  gap: .62rem;
  padding: .5rem .55rem;
  font-family: var(--font-hand);
  font-size: 1.04rem;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 10px 7px 11px 8px;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
/* .lang ...:hover (0,3,0) vence .nav__side a:hover (0,2,1): mantém a tinta escura no item */
.lang .lang__item:hover,
.lang .lang__item:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--green) 18%, transparent);
}
.lang .lang__item:focus-visible {
  outline: none;
  border-color: var(--green-d);
}
.lang__item.is-active {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green-d) 50%, transparent);
}
.lang__item.is-active::after {
  content: "✓";
  margin-left: auto;
  padding-left: .4rem;
  color: var(--green-d);
  font-family: var(--font-hand);
  font-size: .98rem;
  line-height: 1;
}
.lang__flag {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
  transform: rotate(-3deg);
}
/* fallback sem JS: PT/EN/ES/FR em texto (o painel só abre com JS) */
.lang__noscript { display: inline-flex; gap: .5rem; margin-left: .5rem; font-family: var(--font-hand); font-size: .8rem; }
.lang__noscript a { color: var(--green-d); }
/* dark: dá um respiro na tinta preta das bandeiras sobre papel escuro */
[data-theme="dark"] .lang__flag { filter: drop-shadow(.6px .6px 0 rgba(233,237,218,.4)); }
[data-theme="dark"] .lang__panel { box-shadow: 4px 5px 0 rgba(0,0,0,.45); }
/* Safari/iOS: filtro SVG em painel grande pode "apagar" -> desliga no toque */
@media (pointer: coarse) {
  .lang__panel { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lang__chev,
  .lang__panel,
  .lang.is-open .lang__panel { transition: opacity .12s ease, visibility 0s; transform: none; }
  .lang.is-open .lang__panel { transform: none; }
  .lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }
}

/* ============ HERO ============ */
.hero {
  position: relative;
}
.hero__stage {
  position: relative;
  min-height: clamp(520px, calc(100svh - 165px), 700px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 621px) {
  /* conteúdo perto do topo, colado logo abaixo da nav (sem folga exagerada) */
  .hero__stage { align-items: start; }
}
/* véu leve só na coluna do texto: mantém legibilidade mas deixa o braço
   do personagem aparecer atrás do título quando ele acena */
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(229,234,212,.9) 0%, rgba(229,234,212,.58) 24%, rgba(229,234,212,.12) 46%, transparent 62%);
  pointer-events: none;
}
.hero__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(.75rem, 2vh, 1.6rem) var(--page-x) clamp(1rem, 2.4vw, 1.8rem);
  pointer-events: none;
}
.hero__copy a { pointer-events: auto; }
.hero__3d {
  --hero-3d-top-lift: clamp(5.5rem, 8.5vw, 7.25rem);
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--hero-3d-top-lift));
  right: clamp(-2rem, 0.4vw, 2.5rem);
  transform: none;
  width: clamp(600px, 52vw, 1240px);
  height: clamp(720px, calc(100% + var(--hero-3d-top-lift)), 1120px);
  overflow: hidden;
  cursor: var(--cursor-grab);
  touch-action: none;
  user-select: none;
  outline: none;
}
.hero__3d:focus-visible {
  outline: none;
  border-radius: 28px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--green) 32%, transparent),
    0 0 26px 4px color-mix(in srgb, var(--green) 26%, transparent);
}
.hero__3d.is-dragging { cursor: var(--cursor-grabbing); }
.hero__badge {
  position: absolute;
  z-index: 3;
  right: clamp(1.2rem, 3.2vw, 2.8rem);
  bottom: clamp(2.9rem, 5vw, 4.3rem);
  width: clamp(9.5rem, 13vw, 12rem);
  padding: .62rem .72rem .7rem;
  color: #191510;
  background: #fbfaf3;
  border: 2.5px solid var(--ink);
  border-radius: 12px 8px 14px 9px;
  box-shadow: 4px 5px 0 rgba(25,21,16,.16);
  transform: rotate(3.2deg);
  pointer-events: none;
  filter: url(#rough);
  text-align: center;
}
.hero__badge span {
  display: block;
  margin: -.08rem -.2rem .22rem;
  padding: .22rem .3rem .18rem;
  border-radius: 8px 5px 8px 6px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-mono);
  font-size: clamp(.55rem, .78vw, .7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.8vw, 3.4rem);
  font-weight: 900;
  line-height: .86;
  letter-spacing: .03em;
}
.hero__badge em {
  display: block;
  margin-top: .35rem;
  color: var(--green-d);
  font-family: var(--font-hand);
  font-size: clamp(.95rem, 1.25vw, 1.12rem);
  font-style: normal;
  line-height: .95;
}
.hero__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* bordas com esfumado suave: nunca corta o personagem em linha reta */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, #000 0, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, #000 0, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.hero__loader,
.hero__fallback {
  position: absolute;
  inset: 21% 18%;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .8rem;
  color: var(--green-d);
  font-family: var(--font-hand);
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  text-align: center;
  pointer-events: none;
}
.hero__loader span {
  width: 2.8rem;
  height: 2.8rem;
  border: 3px solid color-mix(in srgb, var(--green) 12%, transparent);
  border-top-color: var(--green-d);
  border-bottom-color: var(--green-d);
  border-radius: 50%;
  animation: hero-spin 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.hero__loader b {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85em;
  line-height: 1;
  animation: loader-pulse 1.5s ease-in-out infinite;
}
.hero__fallback {
  display: none;
  color: var(--ink);
}
.hero__fallback img {
  width: min(42vw, 8.2rem);
  height: auto;
  image-rendering: auto;
}
.hero__3d.is-loaded .hero__loader {
  opacity: 0;
  visibility: hidden;
}
body.is-page-loaded .hero__loader {
  display: none;
}
.hero__3d.is-error .hero__loader,
.hero__3d.is-error .hero__canvas {
  display: none;
}
.hero__3d.is-error .hero__fallback {
  display: grid;
}
@keyframes hero-spin { to { transform: rotate(1turn); } }
.hero__prompt { font-family: var(--font-hand); font-size: 1.02rem; letter-spacing: .04em; color: var(--green-d); margin-bottom: 1.2rem; word-break: break-word; }
.hero__prompt .p-user { color: var(--ink); font-weight: 700; }
.hero__prompt .p-path { color: var(--green); }
.caret { display: inline-block; color: var(--green-d); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 8.8vw, 6.8rem);
  line-height: .96; letter-spacing: -.02em; text-transform: uppercase;
}
.hero__title .hand-key {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: .82em;
  font-weight: 700;
  line-height: .86;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--green-d);
  transform: rotate(-1.5deg) translateY(-.04em);
}
.hero__title .hand-key.u-line {
  padding: 0 .08em .02em;
  background: linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--green) 30%, transparent) 18%, color-mix(in srgb, var(--green) 30%, transparent) 86%, transparent 86%);
  border-radius: 12px 7px 14px 8px;
  filter: url(#rough);
}
.hero__title .hand-key.u-line .squiggle {
  display: none;
}
.hero__title .l { display: block; overflow: hidden; }
.hero__title .l > span { display: inline-block; transform: translateY(105%); animation: rise 1s cubic-bezier(.16,1,.3,1) forwards; }
.hero__title .l:nth-child(1) > span { animation-delay: .05s; }
.hero__title .l:nth-child(2) > span { animation-delay: .16s; }
.hero__title .l:nth-child(3) > span { animation-delay: .27s; }
.hero__title .squiggle { bottom: .02em; height: .16em; }
@keyframes rise { to { transform: none; } }

.hero__bottom { display: flex; flex-direction: column; gap: clamp(.9rem, 1.8vw, 1.3rem); align-items: flex-start; justify-content: flex-start; margin-top: clamp(1.1rem, 2vw, 1.7rem); max-width: 42rem; }
.hero__intro { max-width: 42ch; font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ============ MARQUEE (loop contínuo) ============ */
.marquee { overflow: hidden; border-block: 2.5px solid var(--ink); background: var(--green); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: 1.4rem; padding: .5rem 1.4rem .5rem 0; }
.marquee__group span { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; color: #E4E9D4; letter-spacing: .01em; }
.marquee__group i { color: rgba(228,233,212,.7); font-style: normal; }
.marquee__pombit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.15rem;
  margin-inline: -.2rem;
  transform: translateY(.04rem) rotate(-4deg);
}
.marquee__pombit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(25,21,16,.16)) drop-shadow(0 0 1px rgba(255,255,255,.55));
}
@keyframes marquee { to { transform: translateX(calc(-1 * var(--gw, 0px))); } }

/* ============ SERVICES ============ */
.services { max-width: var(--max); margin: 0 auto; padding: var(--section-y) var(--page-x) var(--section-y-tight); }
.services__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(2rem, 4.5vw, 3.4rem); }
.services__h { font-family: var(--font-hand); font-weight: 400; font-size: clamp(2.4rem, 7vw, 5.5rem); text-transform: uppercase; line-height: .9; display: flex; align-items: baseline; gap: .6rem; }
.services__h .squiggle { color: var(--green); }
.services__cnt { font-family: var(--font-hand); font-size: 1.08rem; color: var(--green); font-weight: 400; }

/* serviços como fichas de caderno (grade de cards sketch + doodle a giz) */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 30vw, 330px), 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: clamp(200px, 24vw, 250px);
  padding: clamp(1.15rem, 2.4vw, 1.7rem);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 20px 12px 24px 14px;
  box-shadow: 5px 5px 0 rgba(25,21,16,.1);
  filter: url(#rough);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* leve tilt alternado, tipo colado no caderno (composto com o reveal) */
.svc { transform: rotate(var(--svc-tilt, 0deg)); }
.svc:nth-child(3n+1) { --svc-tilt: -.8deg; }
.svc:nth-child(3n+2) { --svc-tilt: .6deg; }
.svc:nth-child(3n+3) { --svc-tilt: -.35deg; }
.svc.reveal { transform: translateY(28px) rotate(var(--svc-tilt, 0deg)); }
.svc.reveal.in { transform: rotate(var(--svc-tilt, 0deg)); }
.svc:hover, .svc:focus-within,
.svc.reveal.in:hover, .svc.reveal.in:focus-within { transform: rotate(0deg) translateY(-4px); box-shadow: 8px 11px 0 rgba(25,21,16,.15); }
.svc::before { content: ""; position: absolute; inset: 0; background: var(--green); transform: translateY(101%); transition: transform .42s cubic-bezier(.6,0,.15,1); z-index: 0; }
.svc:hover::before, .svc:focus-within::before { transform: translateY(0); }
.svc > * { position: relative; z-index: 1; transition: color .3s; }

.svc__top { display: flex; align-items: center; justify-content: space-between; }
.svc__num { font-family: var(--font-hand); font-size: 1.75rem; line-height: 1; color: var(--green-d); }
.svc:hover .svc__num, .svc:focus-within .svc__num { color: #eef3e2; }
.svc__doodle svg { width: clamp(42px, 9vw, 54px); height: auto; fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.svc:hover .svc__doodle svg, .svc:focus-within .svc__doodle svg { stroke: #fff; }

.svc__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: .9; text-transform: uppercase;
  letter-spacing: -.01em;
}
.svc:hover .svc__title, .svc:focus-within .svc__title { color: #fff; }
.svc__say { font-family: var(--font-hand); font-size: 1.12rem; line-height: 1.12; color: var(--ink); max-width: 26ch; }
.svc:hover .svc__say, .svc:focus-within .svc__say { color: #eef3e2; }
.svc__skills { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .65rem; margin-top: auto; padding-top: .5rem; font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.svc__skills li::after { content: "·"; margin-left: .6rem; color: var(--green); }
.svc__skills li:last-child::after { content: ""; }
.svc:hover .svc__skills, .svc:focus-within .svc__skills { color: rgba(255,255,255,.85); }
.svc:hover .svc__skills li::after, .svc:focus-within .svc__skills li::after { color: rgba(255,255,255,.6); }
.svc:hover .svc__arrow { opacity: 1; transform: translateX(0); color: #fff; }

/* ============ PORTFOLIO (polaroids no caderno) ============ */
.work { position: relative; max-width: var(--max); margin: 0 auto; padding: var(--section-y-tight) var(--page-x); }
/* varal: carrossel horizontal, corda de ponta a ponta da tela, sem caixa */
.work__board {
  --rope-y: 42px;
  display: flex;
  gap: clamp(2.4rem, 4vw, 3.8rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(50% - 50vw);
  position: relative;
  z-index: 1;
  padding: 148px max(calc(50vw - var(--max) / 2 + var(--page-x)), 1.2rem) clamp(3.1rem, 5.4vw, 5rem) clamp(.7rem, 1.6vw, 1.35rem);
  /* corda estática de fallback (sem JS / reduced-motion); a viva é SVG */
  background: linear-gradient(180deg, transparent 41px, var(--ink) 41px 44px, transparent 44px);
  cursor: var(--cursor-grab);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: padding-bottom .5s cubic-bezier(.16, 1, .3, 1);
}
/* enquanto uma descrição está aberta, o varal ganha rodapé suficiente pra a
   segunda foto sair inteira debaixo do card, em qualquer largura de tela */
.work__board.has-open-desc { padding-bottom: 13rem; }
.work__board.is-live { background: none; }
.work__board.is-dragging {
  cursor: var(--cursor-grabbing);
  scroll-snap-type: none;
}
.work__board.is-native-scroll {
  cursor: var(--cursor-pointer);
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.work__board::-webkit-scrollbar { display: none; }
.work__line {
  position: absolute;
  left: 0;
  top: 0;
  height: 148px;
  min-width: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.work__rope-svg {
  display: block;
  width: 100%;
  height: 148px;
  overflow: visible;
}
.work__rope-shadow,
.work__rope-line,
.work__rope-stitch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.work__rope-shadow {
  stroke: rgba(25, 21, 16, .16);
  stroke-width: 8;
  transform: translateY(5px);
}
.work__rope-line {
  stroke: var(--ink);
  stroke-width: 4;
  filter: url(#rough);
}
.work__rope-stitch {
  stroke: color-mix(in srgb, var(--green-d) 48%, var(--ink));
  stroke-width: 1.7;
  stroke-dasharray: 10 14;
  opacity: .52;
}
.polaroid {
  --tilt: -2deg;
  position: relative;
  flex: 0 0 clamp(360px, 34vw, 500px);
  scroll-snap-align: center;
  margin: 0;
  cursor: var(--cursor-pointer);
  transform-origin: 50% -70px;
  z-index: 2;
  will-change: transform;
}
/* o card branco em si — o visual do polaroid (fica ACIMA do card de descrição) */
.polaroid__card {
  position: relative;
  z-index: 1;
  background: #fbfaf3;
  border: 2.5px solid var(--ink);
  border-radius: 6px 4px 7px 5px;
  padding: .72rem .72rem .56rem;
  box-shadow: 0 10px 0 rgba(25, 21, 16, .14), 0 18px 28px rgba(25, 21, 16, .10);
  filter: url(#rough);
}
.polaroid.is-open { z-index: 5; }   /* card aberto por cima dos vizinhos */
.polaroid:nth-child(5n+2) { --tilt: 2.2deg; }
.polaroid:nth-child(5n+3) { --tilt: -1.2deg; }
.polaroid:nth-child(5n+4) { --tilt: 1.6deg; }
.polaroid:nth-child(5n+5) { --tilt: -2.4deg; }
/* a rotação fica por conta da física no JS; o reveal só faz o fade */
.polaroid.reveal { transform: none; transition: opacity .7s ease; }
.work__board.is-dragging .polaroid { cursor: var(--cursor-grabbing); }
.polaroid:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 45%, transparent); }
/* prendedor de roupa segurando a foto na corda */
.polaroid__tape {
  position: absolute;
  z-index: 3;
  top: -106px;
  left: 50%;
  width: 42px;
  height: 118px;
  transform: translateX(-50%) rotate(calc(var(--tilt) * -.38));
  transform-origin: top center;
  background:
    linear-gradient(90deg, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px));
  pointer-events: none;
}
.polaroid__tape::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 50%;
  width: 25px;
  height: 48px;
  transform: translateX(-50%) rotate(2deg);
  background:
    linear-gradient(90deg, transparent 45%, rgba(25,21,16,.22) 45% 55%, transparent 55%),
    linear-gradient(180deg, #eee7c9 0%, #c9b889 100%);
  border: 1.5px solid rgba(25,21,16,.38);
  border-radius: 9px 8px 5px 5px;
  box-shadow:
    0 3px 0 rgba(25,21,16,.13),
    inset 0 0 0 1px rgba(255,255,255,.28);
  opacity: .92;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease, opacity .28s ease;
}
.polaroid:hover .polaroid__tape::before,
.polaroid:focus-visible .polaroid__tape::before {
  transform: translateX(-50%) rotate(2deg) translateY(-2px);
  background:
    linear-gradient(90deg, transparent 45%, rgba(10,40,24,.4) 45% 55%, transparent 55%),
    radial-gradient(circle at 50% 40%, #f4fff9 0%, #8dffc0 40%, #24d878 100%);
  border-color: #c4ffdb;
  box-shadow:
    0 0 6px #dcffec,
    0 0 16px rgba(134,255,182,.82),
    0 0 32px rgba(76,255,150,.58),
    inset 0 0 8px rgba(255,255,255,.86);
}
.polaroid__tape::after {
  content: "";
  position: absolute;
  top: 76px;
  left: 50%;
  width: 31px;
  height: 10px;
  transform: translateX(-50%) rotate(2deg);
  border-block: 2px solid rgba(25,21,16,.58);
}
.polaroid__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dfe5cc;
  border-radius: 3px;
}
.polaroid__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(134,255,182,.36), transparent 48%),
    linear-gradient(180deg, rgba(244,255,249,.18), transparent 42%);
  opacity: 0;
  transition: opacity .28s ease;
}
.polaroid:hover .polaroid__media::after,
.polaroid:focus-visible .polaroid__media::after {
  opacity: .42;
}
.polaroid__media img,
.polaroid__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ capa de caderno: cada "foto" é a capa colorida de um caderno,
   com etiqueta escolar escrita à mão. Cores fixas nos dois temas (é objeto físico). */
.polaroid__media {
  border: 1.5px solid rgba(25, 21, 16, .28);
  background: #7d9b78;   /* fallback; cada projeto sobrescreve abaixo */
  /* a capa é o <button> "abrir demo" — reset pra parecer capa, não botão */
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: var(--cursor-pointer);
}
.polaroid__media:focus-visible { outline: 3px solid var(--green-d); outline-offset: -4px; }
.work__board.is-dragging .polaroid__media { cursor: var(--cursor-grabbing); }
.polaroid__media--squad   { background: #7d9b78; }   /* verde poeira */
.polaroid__media--ddc     { background: #7f97a8; }   /* azul desbotado */
.polaroid__media--barber  { background: #b47a5f; }   /* terracota */
.polaroid__media--tarsila { background: #bfa06b; }   /* kraft */

.polaroid__cover-tex {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(92deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(2deg, rgba(0,0,0,.045) 0 1px, transparent 1px 7px),
    radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.18), transparent 55%);
}
.polaroid__cover-spine {
  position: absolute; top: 0; left: 0; bottom: 0; width: 22px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,0));
}
.polaroid__cover-vig {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 0 42px rgba(25,21,16,.20), inset 16px 0 20px -14px rgba(0,0,0,.5);
}
.polaroid__doodle {
  position: absolute; z-index: 5; right: 3.5%; bottom: 3.5%;
  width: clamp(58px, 21%, 84px); aspect-ratio: 1;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
.polaroid__doodle svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* etiqueta branca colada meio torta no centro da capa */
.polaroid__label {
  position: absolute; z-index: 5; top: 47%; left: 52%;
  width: 66%;
  transform: translate(-50%, -50%) rotate(-2.6deg);
  background: #fdfdf7;
  border: 1.6px solid #191510;
  border-radius: 3px 4px 2px 4px;
  padding: .5rem .6rem .44rem;
  box-shadow: 0 7px 13px -6px rgba(25,21,16,.55);
}
.polaroid__label::before {
  content: ""; position: absolute; inset: 3.5px 3px 3px 3.5px;
  border: 1px solid rgba(25,21,16,.5); border-radius: 3px; pointer-events: none;
}
.polaroid:nth-child(5n+2) .polaroid__label { transform: translate(-50%, -50%) rotate(2.4deg); }
.polaroid:nth-child(5n+3) .polaroid__label { transform: translate(-50%, -50%) rotate(-1.4deg); }
.polaroid:nth-child(5n+4) .polaroid__label { transform: translate(-50%, -50%) rotate(1.8deg); }
.polaroid__label-tape {
  position: absolute; top: -9px; left: 50%; margin-left: -23px;
  width: 46px; height: 16px;
  background: rgba(240,236,214,.55);
  border: 1px dashed rgba(25,21,16,.3);
  transform: rotate(-4deg);
}
.polaroid__label-field { display: block; margin: 0 .12rem; }
.polaroid__label-key {
  display: block;
  font-family: var(--font-mono);
  font-size: .5rem; letter-spacing: .1em; text-transform: uppercase;
  color: #6a6152; line-height: 1;
}
.polaroid__label-field--nome {
  border-bottom: 1.5px solid rgba(25,21,16,.55);
  padding-bottom: .12rem; margin-bottom: .28rem;
}
.polaroid__label-name {
  display: block;
  font-family: var(--font-hand);
  font-size: clamp(1.12rem, 5vw, 1.95rem); line-height: 1.02; color: #191510;
}
.polaroid__label-field--materia {
  display: flex; align-items: baseline; gap: .34rem;
  border-bottom: 1px dotted rgba(25,21,16,.42); padding-bottom: .14rem;
}
.polaroid__label-val { font-family: var(--font-hand); font-size: .95rem; line-height: 1; color: #191510; }
.polaroid__media--squad   .polaroid__label-field--nome { border-bottom-color: #3f5638; }
.polaroid__media--ddc     .polaroid__label-field--nome { border-bottom-color: #3f5a6b; }
.polaroid__media--barber  .polaroid__label-field--nome { border-bottom-color: #8a4f38; }
.polaroid__media--tarsila .polaroid__label-field--nome { border-bottom-color: #77591f; }

/* rodapé: título à esquerda + botão "+" no canto inferior direito */
.polaroid__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .55rem;
  padding: 0 .15rem;
}
.polaroid__caption {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--ink);
  line-height: 1;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.polaroid__more {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 0;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 52% 48% 50% 50% / 50% 52% 48% 50%;   /* círculo meio torto, feito à mão */
  cursor: var(--cursor-pointer);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .22s ease, color .22s ease, border-color .22s ease;
}
.polaroid__more:hover,
.polaroid__more:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: #14140f;
  outline: none;
}
.polaroid.is-open .polaroid__more {
  transform: rotate(135deg);   /* o + vira × quando aberto */
  background: var(--green);
  border-color: var(--green);
  color: #14140f;
}

/* chip de categoria na capa (canto superior esquerdo) */
.polaroid__chip {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(247, 244, 223, .92);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .2rem .55rem;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* card de descrição: nasce escondido ATRÁS do card e desliza pra baixo ao abrir.
   ancorado no rodapé do card (top:100%) com recuo fixo em rem — assim toda foto
   revela o mesmo tanto, independente do tamanho do texto. */
.polaroid__desc {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 100%;
  z-index: 0;
  background: #efe9d6;
  border: 2.5px solid var(--ink);
  border-radius: 5px 7px 6px 8px;
  padding: 2.8rem .95rem .95rem;   /* respiro no topo pra o texto não colar na borda do card */
  box-shadow: 0 14px 22px rgba(25, 21, 16, .18);
  transform: translateY(-100%) rotate(1.4deg);
  opacity: 0;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.polaroid.is-open .polaroid__desc {
  transform: translateY(-1.7rem) rotate(2.6deg);   /* só o topo fica sob o card */
  opacity: 1;
  pointer-events: auto;
}
.polaroid__desc-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-d);
  margin-bottom: .35rem;
}
.polaroid__desc-text {
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.42;
  color: var(--ink);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .polaroid__desc, .polaroid__more { transition: opacity .2s ease; }
  .work__board { transition: none; }
}
/* badge "ao vivo" nos cards que abrem demo interativo */
.polaroid__live {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #eafff2;
  background: rgba(16, 18, 12, .72);
  border: 1px solid rgba(134, 255, 182, .42);
  border-radius: 999px;
  padding: .2rem .5rem;
  backdrop-filter: blur(4px);
}
.polaroid__live::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
}
.polaroid--demo:hover .polaroid__live,
.polaroid--demo:focus-visible .polaroid__live { border-color: var(--green); }
/* vagas ainda não preenchidas */
.polaroid--soon .polaroid__media { filter: grayscale(.5) opacity(.82); }
.polaroid--soon .polaroid__caption { color: color-mix(in srgb, var(--ink) 55%, transparent); }
@media (max-width: 700px) {
  .work__board {
    gap: 1.45rem;
    padding: 136px 8vw clamp(3rem, 8vw, 4.5rem);
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .polaroid {
    flex: 0 0 78vw;
    transform: rotate(var(--tilt));
    will-change: auto;
  }
  .polaroid__card { filter: none; }
  .polaroid.reveal,
  .polaroid.reveal.in {
    transform: rotate(var(--tilt));
    transition: opacity .32s ease;
  }
  /* etiqueta um pouco mais larga e doodle menor em telas estreitas, pra o texto
     caber sem quebrar feio e o desenho ficar recolhido no canto */
  .polaroid__label { width: 72%; }
  .polaroid__label-name { font-size: clamp(1.05rem, 6.2vw, 1.55rem); }
  .polaroid__label-val { font-size: .82rem; }
  .polaroid__doodle { width: clamp(44px, 17%, 62px); right: 3%; bottom: 3%; }
}
@media (pointer: coarse) {
  .work__board {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .polaroid {
    transform: rotate(var(--tilt));
    will-change: auto;
  }
  .polaroid__card { filter: none; }
  .polaroid.reveal,
  .polaroid.reveal.in {
    transform: rotate(var(--tilt));
    transition: opacity .32s ease;
  }
}

/* lightbox do portfólio */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(22, 21, 16, .88);
  display: grid;
  place-items: center;
  padding: 4vmin;
}
.lightbox__fig { margin: 0; max-width: min(1100px, 94vw); text-align: center; }
.lightbox__fig img,
.lightbox__fig video {
  max-width: 100%;
  max-height: 80vh;
  border: 3px solid #fbfaf3;
  border-radius: 6px;
  background: #fbfaf3;
  display: inline-block;
}
/* backdrop do lightbox é sempre escuro nos 2 temas → texto/botão claros fixos */
.lightbox__fig figcaption { font-family: var(--font-hand); font-size: 1.3rem; color: #f4f2e6; margin-top: .9rem; }
.lightbox__close {
  position: absolute;
  top: clamp(.8rem, 2vw, 1.6rem);
  right: clamp(1rem, 2.4vw, 2rem);
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: #f4f2e6;
  background: none;
  border: 2px solid #f4f2e6;
  border-radius: 999px 700px 999px 800px;
  padding: .32rem .85rem;
  cursor: var(--cursor-pointer);
}
.lightbox__close:hover { background: var(--green); border-color: var(--green); color: #14140f; }

/* ---- lightbox de demo ao vivo (iframe do projeto real) ---- */
.lightbox--demo { padding: clamp(.5rem, 2.4vmin, 1.8rem); }
.lightbox__frame {
  width: min(1280px, 96vw);
  height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  background: #14140f;
  border: 3px solid #f4f2e6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 42px 90px rgba(0, 0, 0, .55);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem .7rem .55rem 1.1rem;
  background: #14140f;
  border-bottom: 1px solid rgba(244, 242, 230, .14);
}
.lightbox__title {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .03em;
  color: #f4f2e6;
  margin-right: auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lightbox__ext {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #cfe9d8;
  text-decoration: none;
  border: 1px solid rgba(244, 242, 230, .3);
  border-radius: 999px;
  padding: .32rem .74rem;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.lightbox__ext:hover { background: var(--green); color: #14140f; border-color: var(--green); }
.lightbox--demo .lightbox__close {
  position: static;
  flex: 0 0 auto;
  font-size: .95rem;
  padding: .3rem .8rem;
}
.lightbox__stage { position: relative; flex: 1 1 auto; min-height: 0; background: #0d0d0a; }
.lightbox__iframe { width: 100%; height: 100%; border: 0; display: block; background: #0d0d0a; }
.lightbox__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 242, 230, .58);
  background: #0d0d0a;
  pointer-events: none;
}
@media (max-width: 620px) {
  .lightbox__frame { width: 96vw; height: 90vh; }
  .lightbox__ext { display: none; }
}

/* ============ SOBRE ============ */
.about { max-width: var(--max); margin: 0 auto; padding: var(--section-y-tight) var(--page-x) clamp(2rem, 4vw, 3rem); }
.about__intro {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, .72fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.6rem);
}
.about__copy { min-width: 0; }
.about__stmt { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -.01em; text-transform: uppercase; max-width: 20ch; margin-bottom: clamp(1.2rem, 2.4vw, 2rem); }
.about__motto {
  /* fluxo inline normal (não flex): pontuação cola na palavra e não "órfã" numa
     linha só; espaçamento fica consistente entre os idiomas (pt/en/es/fr) */
  display: inline-block;
  max-width: min(100%, 47rem);
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
  padding: .8rem 1rem .72rem;
  border: 2.5px solid var(--ink);
  border-radius: 16px 10px 18px 12px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: clamp(1.2rem, 2.4vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: .02em;
  word-spacing: .08em;
  text-wrap: balance;
  filter: url(#rough);
  transform: rotate(-.7deg);
}
.about__motto span {
  color: var(--green-d);
  white-space: nowrap;
}
.chalkboard {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 28vw, 410px);
  padding: clamp(.9rem, 1.8vw, 1.15rem);
  border: 3px solid var(--ink);
  border-radius: 22px 12px 26px 15px;
  background:
    linear-gradient(transparent, transparent),
    #317a54;
  box-shadow:
    8px 8px 0 rgba(25,21,16,.13),
    inset 0 0 0 2px rgba(247,244,223,.14);
  color: #f7f4df;
  filter: url(#rough);
  transform: rotate(-1.6deg);
  overflow: hidden;
  cursor: var(--cursor-chalk);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.chalkboard,
.chalkboard * {
  user-select: none;
  -webkit-user-select: none;
}
.chalkboard::before {
  content: "";
  position: absolute;
  inset: .62rem;
  border: 2px dashed rgba(247,244,223,.36);
  border-radius: 17px 10px 20px 12px;
  background:
    linear-gradient(112deg, transparent 0 35%, rgba(247,244,223,.055) 35% 37%, transparent 37% 100%);
  opacity: .9;
  pointer-events: none;
}
.chalkboard::after {
  content: "";
  position: absolute;
  left: clamp(1rem, 3vw, 2.2rem);
  bottom: .45rem;
  width: clamp(4rem, 10vw, 7rem);
  height: .28rem;
  border-radius: 999px 700px 999px 800px;
  background: rgba(247,244,223,.58);
  transform: rotate(-2deg);
  pointer-events: none;
}
.chalkboard__head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}
.chalkboard__head p {
  font-family: var(--font-hand);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1;
  color: #f7f4df;
  text-shadow: 0 0 2px rgba(255,255,255,.32);
  transform: rotate(1.2deg);
}
.chalkboard__clear,
.chalkboard__tray button {
  font-family: var(--font-hand);
  border: 2px solid rgba(247,244,223,.8);
  background: rgba(247,244,223,.08);
  color: #f7f4df;
  border-radius: 999px 700px 999px 800px;
  cursor: var(--cursor-pointer);
  filter: url(#rough);
}
.chalkboard__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.chalkboard__clear {
  padding: .32rem .72rem .22rem;
  font-size: 1rem;
}
.chalkboard__tool {
  display: inline-grid;
  place-items: center;
  width: 2.18rem;
  height: 2.18rem;
  padding: 0;
  border-radius: 16px 12px 17px 13px;
}
.chalkboard__tool svg {
  width: 1.18rem;
  height: 1.18rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chalkboard__clear:hover,
.chalkboard__clear.is-active,
.chalkboard__tray button:hover,
.chalkboard__tray button.is-active {
  background: rgba(247,244,223,.18);
  border-color: #fffbe2;
}
.chalkboard__tool.is-active {
  color: #191510;
  background: #f7f4df;
  border-color: #f7f4df;
  box-shadow: 0 2px 0 rgba(25,21,16,.18);
}
.chalkboard__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 15px 9px 18px 11px;
  pointer-events: none;
}
.chalkboard__tray {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: .62rem;
  margin-top: auto;
  padding-top: clamp(8.5rem, 15vw, 12.5rem);
}
.chalkboard__tray button {
  display: inline-grid;
  place-items: center;
  gap: .16rem;
  min-width: 4.8rem;
  min-height: 4.45rem;
  padding: .42rem .5rem .28rem;
  font-size: .92rem;
  line-height: 1;
  background: #fbfaf3;
  color: var(--green-d);
  border-color: var(--ink);
  box-shadow: 0 3px 0 rgba(25,21,16,.16);
  transform: rotate(-2deg);
}
.chalkboard__tray button span {
  display: block;
  line-height: .9;
  white-space: nowrap;
}
.chalkboard__tray button:nth-child(2n) { transform: rotate(1.8deg); }
.chalkboard__tray button:nth-child(3n) { transform: rotate(-.8deg); }
.chalkboard__tray button.is-active {
  color: #fff;
  background: var(--green);
  border-color: var(--ink);
  transform: translateY(-2px) rotate(-2deg);
}
.chalkboard__tray button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--green) 16%, #fbfaf3);
  border-color: var(--ink);
}
.chalkboard__tray button.is-active:hover {
  color: #fff;
  background: var(--green);
  border-color: var(--ink);
}
.chalk-sticker {
  width: 2.65rem;
  height: 2.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#rough);
}
.about__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); border-top: 2.5px solid var(--ink); padding-top: clamp(1.5rem, 3vw, 2.4rem); }
.about__cell .about__k { font-family: var(--font-hand); font-size: .98rem; letter-spacing: .06em; color: var(--green); display: block; margin-bottom: .8rem; }
.about__cell b { display: block; font-family: var(--font-hand); font-size: 1.35rem; font-weight: 400; letter-spacing: .02em; margin-bottom: .5rem; color: var(--green-d); }
.about__cell p { color: var(--ink-soft); font-size: .96rem; line-height: 1.65; max-width: 30ch; }

/* processo (fases 1-4): uma linha de quebra no padrão + grid igual ao dos diferenciais */
.process {
  margin-top: clamp(2.4rem, 5vw, 3.8rem);
  border-top: 2.5px solid var(--ink);
  padding-top: clamp(1.5rem, 3vw, 2.4rem);
  /* divisão entre o como_funciona e a seção de contato */
  border-bottom: 2.5px solid var(--ink);
  padding-bottom: clamp(2rem, 4vw, 3.2rem);
}
.process .kicker { margin-bottom: clamp(1.1rem, 2.2vw, 1.7rem); }
.about__grid--flat { border-top: 0; padding-top: 0; }

/* fases como stickers sketch: borda rough, cantos irregulares, colados meio tortos */
.process .about__cell {
  --tilt: 0deg;
  border: 2.5px solid var(--ink);
  border-radius: 26px 18px 30px 16px;
  background: color-mix(in srgb, #fff 55%, var(--bg));
  padding: 1.1rem 1.2rem 1.3rem;
  filter: url(#rough);
  box-shadow: 0 3px 0 rgba(25, 21, 16, .14);
}
.process .about__cell:nth-child(4n+1) { --tilt: -1.3deg; }
.process .about__cell:nth-child(4n+2) { --tilt: 1.1deg; border-radius: 18px 28px 16px 26px; }
.process .about__cell:nth-child(4n+3) { --tilt: -0.8deg; border-radius: 24px 16px 26px 20px; }
.process .about__cell:nth-child(4n+4) { --tilt: 1.4deg; border-radius: 16px 26px 20px 28px; }
/* compõe a rotação com o reveal (que senão zeraria o transform) */
.process .about__cell.reveal { transform: translateY(28px) rotate(var(--tilt)); }
.process .about__cell.reveal.in { transform: rotate(var(--tilt)); }
.process .about__cell.reveal.in:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 7px 0 rgba(25, 21, 16, .16);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* badge "fase 0X" como abinha do sticker */
.process .about__cell .about__k {
  display: inline-block;
  padding: .18rem .62rem .12rem;
  border: 2px solid var(--ink);
  border-radius: 999px 700px 999px 800px;
  background: color-mix(in srgb, var(--green) 22%, transparent);
  color: var(--green-d);
  margin-bottom: .9rem;
}
.process .about__cell p { max-width: none; }

/* ============ CONTATO ============ */
.contact {
  --contact-progress: 0;
  background: var(--bg);
  color: var(--ink);
  min-height: auto;
  padding: var(--section-y-tight) var(--page-x);
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  isolation: isolate;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 82% 72%, rgba(94,166,123,.14), transparent 30%),
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(94,166,123,.20) 34px 36px);
  pointer-events: none;
}
.contact__media {
  position: absolute;
  z-index: 1;
  right: clamp(.5rem, 1.8vw, 2.5rem);
  bottom: clamp(-2.2rem, -1vw, -.6rem);
  width: clamp(700px, 56vw, 1120px);
  aspect-ratio: 16 / 10.2;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: darken;
  transform:
    translate3d(calc((.5 - var(--contact-progress)) * 22px), calc((.5 - var(--contact-progress)) * 34px), 0)
    rotate(calc((var(--contact-progress) - .5) * 1.4deg))
    scale(calc(.97 + (var(--contact-progress) * .07)));
  transform-origin: 70% 70%;
  transition: transform .12s linear;
  will-change: transform;
}
.contact__video {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.08);
}
.contact__inner { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; transform: none; }
.contact__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.8rem, 9.2vw, 7.2rem); line-height: .94; letter-spacing: -.02em; text-transform: uppercase; max-width: 9ch; margin: .45rem 0 clamp(1.5rem, 3vw, 2.2rem); }
.contact__h .l { display: block; overflow: visible; }
.contact__h .hand-mark {
  display: inline-block;
  padding-bottom: .12em;
  transform: translateY(-.03em);
}
.contact__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem clamp(1.4rem, 3vw, 2.8rem); }
.contact__mail { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.8rem); text-transform: lowercase; border-bottom: 3px solid var(--green); transition: color .2s; }
.contact__mail:hover { color: var(--green); }

/* ============ LEAD MODAL ============ */
body.is-modal-open { overflow: hidden; }
.lead-modal[aria-hidden="true"] { display: none; }
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--page-x);
}
.lead-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0, transparent clamp(3.4rem, 8vw, 6.6rem), rgba(94,166,123,.12) clamp(3.4rem, 8vw, 6.6rem), rgba(94,166,123,.12) calc(clamp(3.4rem, 8vw, 6.6rem) + 1px), transparent calc(clamp(3.4rem, 8vw, 6.6rem) + 1px)),
    rgba(25,21,16,.54);
  backdrop-filter: blur(6px);
}
.lead-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border: 2.5px solid var(--ink);
  border-radius: 18px 11px 22px 13px;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(94,166,123,.16) 31px 32px),
    var(--paper);
  box-shadow: 8px 8px 0 rgba(25,21,16,.16);
  filter: url(#rough);
}
.lead-modal__close {
  position: absolute;
  top: .75rem;
  right: .82rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--ink);
  border-radius: 999px 700px 999px 800px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 1.55rem;
  line-height: 1;
  cursor: var(--cursor-pointer);
}
.lead-modal__close:hover { background: var(--green); color: #fff; border-color: var(--green); }
.lead-modal__kicker {
  font-family: var(--font-hand);
  color: var(--green-d);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 2.4rem .8rem 0;
}
.lead-modal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 9vw, 5.1rem);
  line-height: .9;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.lead-modal__copy {
  max-width: 42ch;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}
.lead-modal__form {
  display: grid;
  gap: .82rem;
}
.lead-modal__field {
  display: grid;
  gap: .28rem;
  font-family: var(--font-hand);
  color: var(--green-d);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lead-modal__field input {
  width: 100%;
  min-height: 3.05rem;
  border: 2px solid color-mix(in srgb, var(--ink) 82%, transparent);
  border-radius: 9px 6px 11px 7px;
  background: rgba(251,250,243,.78);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .7rem .85rem;
  outline: none;
}
.lead-modal__field input:focus {
  border-color: var(--green-d);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}
.lead-modal__field.is-invalid input {
  border-color: #b3442e;
  box-shadow: 0 0 0 3px rgba(179,68,46,.12);
}
.lead-modal__error {
  min-height: 1.3rem;
  color: #973823;
  font-family: var(--font-hand);
  font-size: 1.02rem;
}
.lead-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .72rem;
  margin-top: .28rem;
}
.lead-modal__actions .btn {
  justify-content: center;
  min-height: 3rem;
}
@media (max-width: 560px) {
  .lead-modal { align-items: end; padding: 0; }
  .lead-modal__panel {
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    border-radius: 20px 20px 0 0;
    border-inline: 0;
    border-bottom: 0;
  }
  .lead-modal__actions { display: grid; }
}
/* iOS/Safari não renderiza filter: url(#rough) num painel grande (fica em branco).
   Mesmo motivo do .polaroid__card usar filter:none no touch — aqui idem. */
@media (pointer: coarse) {
  .lead-modal__panel { filter: none; }
}

/* ============ FOOTER ============ */
.footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.1rem, 2.4vw, 2rem) var(--page-x) clamp(2rem, 4vw, 3rem);
  color: var(--ink-soft);
}
.footer__paper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.8rem);
  padding-top: clamp(1rem, 2vw, 1.45rem);
  border-top: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: transparent;
  box-shadow: none;
  filter: none;
  font-family: var(--font-hand);
  font-size: .98rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.footer__paper::before { content: none; }
.footer__brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  opacity: .78;
  transition: opacity .24s ease;
}
.footer__brand img {
  height: clamp(34px, 3.7vw, 46px);
  width: auto;
  filter: saturate(.85) contrast(.95);
  transition: transform .24s ease, filter .24s ease;
}
.footer__brand:hover { opacity: 1; }
.footer__brand:hover img {
  filter: saturate(1) contrast(1);
  transform: translateY(-1px);
}
.footer__meta {
  display: flex;
  flex-direction: column;
  gap: .14rem;
  line-height: 1.22;
}
.footer__mid { color: var(--green-d); }
.footer__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-self: end;
}
.footer__social {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: inherit;
  transition: color .2s, transform .2s;
}
.footer__social svg {
  width: 24px;
  height: 24px;
}
.footer__social:hover {
  color: var(--green-d);
  transform: translateY(-2px) rotate(2deg);
}
.footer__top {
  transition: color .2s, border-color .2s;
  border-bottom: 1px solid transparent;
}
.footer__top:hover {
  color: var(--green-d);
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
}
@media (max-width: 620px) {
  .footer__paper {
    grid-template-columns: 1fr;
    align-items: start;
    gap: .72rem;
  }
  .footer__links { justify-self: start; width: 100%; justify-content: space-between; }
}

/* ============ reveal ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.chalkboard.reveal { transform: translateY(28px) rotate(-1.6deg); }
.chalkboard.reveal.in { transform: rotate(-1.6deg); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .chalkboard.reveal { transform: rotate(-1.6deg); }
  .hero__title .l > span { animation: none; transform: none; }
  .marquee__track { animation: none !important; }
  .contact__media { transform: none; transition: none; opacity: .72; }
  .caret { animation: none; }
}

/* ============ responsivo ============ */
@media (max-width: 900px) {
  .hero__stage {
    min-height: auto;
  }
  .hero__stage::before {
    background: none;
  }
  .hero__copy {
    padding-bottom: clamp(20rem, 56vw, 27rem);
  }
  .hero__3d {
    top: auto;
    right: auto;
    left: 50%;
    bottom: clamp(1rem, 4vw, 2rem);
    transform: translateX(-50%);
    width: min(84vw, 560px);
    height: clamp(380px, 62vw, 480px);
    opacity: 1;
  }
  .hero__badge {
    top: auto;
    right: 1rem;
    left: auto;
    bottom: clamp(1.8rem, 5vw, 2.8rem);
    width: clamp(8.6rem, 24vw, 10rem);
  }
  .about__intro { grid-template-columns: 1fr; }
  .chalkboard {
    width: min(100%, 620px);
    min-height: 340px;
  }
  .about__grid { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (max-width: 620px) {
  /* sem os links da esquerda, vira 2 blocos: marca à esquerda, ações à direita */
  .nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .brand__logo { height: 62px; }
  .nav__side--l { display: none; }
  .nav__side--r { gap: .7rem; }
  /* combinador de filho: some só o ./contato (âncora direta), não os links do dropdown */
  .nav__side--r > a:not(.nav__cta) { display: none; }
  .lang__btn { font-size: .95rem; }
  .hero__bottom { flex-direction: column; align-items: flex-start; }
  .hero__stage {
    min-height: auto;
  }
  .hero__copy {
    padding-top: clamp(2rem, 9vw, 3.2rem);
    padding-bottom: clamp(19.5rem, 86vw, 24rem);
  }
  .hero__3d {
    width: min(92vw, 380px);
    height: clamp(300px, 72vw, 360px);
    bottom: clamp(.5rem, 2.5vw, 1rem);
    opacity: 1;
  }
  .hero__badge {
    right: .85rem;
    left: auto;
    bottom: 1.35rem;
    width: 8.2rem;
  }
  .contact {
    min-height: auto;
    padding-block: clamp(3.25rem, 10vw, 4.8rem);
  }
  .contact::before {
    background:
      radial-gradient(circle at 82% 82%, rgba(94,166,123,.14), transparent 38%),
      repeating-linear-gradient(180deg, transparent 0 30px, rgba(94,166,123,.20) 30px 32px);
  }
  .contact__media {
    right: -3rem;
    bottom: -.6rem;
    width: min(120vw, 420px);
  }
  .contact__row { align-items: flex-start; flex-direction: column; }
  .chalkboard__tray {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .42rem;
    padding-top: clamp(8rem, 32vw, 10rem);
  }
  .chalkboard__tray button {
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    padding: .28rem .18rem .18rem;
    font-size: .68rem;
  }
  .chalk-sticker {
    width: 1.78rem;
    height: 1.42rem;
  }
  .contact__inner { transform: none; }
}

/* ============ lightbox de demo externo (preview + CTA que abre em nova aba) ============ */
.lightbox__stage--link {
  display: grid;
  place-items: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  padding: clamp(1.2rem, 4vw, 2.6rem);
  text-decoration: none;
  cursor: var(--cursor-pointer);
}
.lightbox__preview {
  max-width: 100%;
  max-height: 62vh;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(244, 242, 230, .14);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.lightbox__stage--link:hover .lightbox__preview,
.lightbox__stage--link:focus-visible .lightbox__preview { transform: scale(1.015); }
/* preview do demo externo: mostra a própria capa de caderno, ampliada */
.lightbox__preview--cover {
  width: min(86vw, 460px);
  max-height: none;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .55));
}
.lightbox__preview--cover .polaroid__media { width: 100%; border-radius: 6px; }
.lightbox__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #14140f;
  background: var(--green);
  border-radius: 999px;
  padding: .65rem 1.3rem;
  transition: filter .2s ease, transform .2s ease;
}
.lightbox__stage--link:hover .lightbox__cta { filter: brightness(1.07); transform: translateY(-1px); }
.lightbox__stage--link:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  .lightbox__preview, .lightbox__cta { transition: none; }
}

/* honeypot anti-spam: escondido de humanos e leitores de tela, visível a bots */
.lead-modal__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ FAQ (perguntas frequentes) — herda os tokens do site ============ */
.faq {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-y-tight) var(--page-x);
}
.faq__head { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.faq__title {
  font-family: var(--font-hand);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 7vw, 4.6rem);
  line-height: .92;
  margin: .25rem 0 .55rem;
}
.faq__updated {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.faq__list { list-style: none; display: grid; gap: .85rem; }
.faq__item {
  border: 2.5px solid var(--ink);
  border-radius: 12px 8px 13px 9px;
  background: var(--paper);
  box-shadow: 4px 4px 0 rgba(25, 21, 16, .13);
  overflow: hidden;
}
.faq__q { margin: 0; }
.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.3rem) clamp(1.05rem, 3vw, 1.6rem);
  background: transparent;
  border: 0;
  cursor: var(--cursor-pointer);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.08rem, 2.5vw, 1.4rem);
  line-height: 1.08;
  color: var(--ink);
}
.faq__trigger:focus-visible { outline: 3px solid var(--green-d); outline-offset: -4px; }
.faq__icon {
  flex: 0 0 auto;
  width: 1.95rem;
  height: 1.95rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 52% 48% 50% 50% / 50% 52% 48% 50%;   /* círculo à mão, igual o "+" do portfólio */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 0;
  transition: transform .34s cubic-bezier(.16, 1, .3, 1), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.faq__trigger:hover .faq__icon,
.faq__trigger:focus-visible .faq__icon { background: var(--green); border-color: var(--green); color: #14140f; }
.faq__trigger[aria-expanded="true"] .faq__icon {
  transform: rotate(135deg);   /* + vira × quando aberto */
  background: var(--green);
  border-color: var(--green);
  color: #14140f;
}
.faq__a { padding: 0 clamp(1.05rem, 3vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.5rem); }
.faq__a p {
  margin: 0;
  max-width: 70ch;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .faq__icon { transition: background-color .2s ease, color .2s ease; }
}

/* ============ banner de consentimento (LGPD, PostHog) ============ */
.consent {
  position: fixed;
  left: 50%;
  bottom: clamp(.8rem, 2vw, 1.4rem);
  transform: translateX(-50%);
  z-index: 400;
  width: min(680px, calc(100% - 2 * var(--page-x)));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.1rem;
  padding: clamp(.9rem, 2.2vw, 1.15rem) clamp(1rem, 2.6vw, 1.4rem);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 14px 9px 15px 10px;
  box-shadow: 5px 6px 0 rgba(25, 21, 16, .2);
}
.consent__text {
  flex: 1 1 260px;
  margin: 0;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.4;
  color: var(--ink);
}
.consent__actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.consent__btn { min-height: 2.6rem; padding-inline: 1.15rem; }
@media (max-width: 560px) {
  .consent {
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 14px 14px 0 0;
    border-inline: 0;
    border-bottom: 0;
  }
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1; }
}