/* Fontes hospedadas no próprio site (subconjunto latino). Licença OFL. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/caveat-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/work-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Tokens ===== */
:root {
  --rosa: #F6AFC1;
  --menta: #BEE3DE;
  --creme: #FDFBF4;
  --preto: #171412;
  --texto-secundario: #4A4038;
  --texto-claro: #D6CFC8;
  --acento: #F2879C;
  --branco: #FFFFFF;

  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 18px;
  --border: 2px solid var(--preto);
  --gutter: 60px;

  --font-serif: 'Fraunces', serif;
  --font-script: 'Caveat', cursive;
  --font-sans: 'Work Sans', sans-serif;
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  overflow-x: clip;
  font-family: var(--font-sans);
  background: var(--creme);
  color: var(--preto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 400;
  padding: 10px 18px;
  font-weight: 700;
  color: var(--creme);
  background: var(--preto);
  border-radius: 999px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.site-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.dots-texture {
  background-image: radial-gradient(rgba(23,20,18,0.16) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: var(--border);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); }

.btn-black {
  background: var(--preto);
  color: var(--creme);
  box-shadow: 4px 4px 0 var(--acento);
}
.btn-black:hover { box-shadow: 6px 6px 0 var(--acento); }

.btn-accent {
  background: var(--acento);
  color: var(--preto);
  box-shadow: 4px 4px 0 var(--preto);
}
.btn-accent:hover { box-shadow: 6px 6px 0 var(--preto); }

.btn-sm { padding: 10px 20px; font-size: 0.85rem; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--acento);
  margin-bottom: 14px;
}
.eyebrow-light { color: var(--rosa); }

/* ===== Top bar ===== */
.top-bar {
  background: var(--menta);
  border-bottom: var(--border);
  padding-block: 8px;
}
.top-bar .site-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.top-bar p {
  grid-column: 2;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ===== Nav ===== */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--creme);
  border-bottom: var(--border);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: 18px;
  gap: 24px;
}
.nav .logo { justify-self: start; }
.nav-links { justify-self: center; }
.nav-cta { justify-self: end; }
.nav-back { grid-column: 3; justify-self: end; }
.logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
}
.nav-links {
  display: flex;
  gap: 32px;
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-links a:hover { color: var(--acento); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--preto);
  border-radius: 2px;
}
.nav-backdrop, .nav-drawer { display: none; }

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--rosa);
  border-bottom: var(--border);
  padding: 100px 0 130px;
}
.hero-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--rosa) 0px,
    var(--rosa) 40px,
    #fbc9d5 40px,
    #fbc9d5 80px
  );
  opacity: 0.7;
}
.hero-inner {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-card {
  background: var(--branco);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 10px 10px 0 var(--preto);
  padding: 56px;
  max-width: 620px;
  text-align: center;
  transform: rotate(-2deg);
}
.script-headline {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--preto);
}
.hero-card p {
  color: var(--texto-secundario);
  font-size: 1.05rem;
  margin-bottom: 28px;
}
.hero-badge {
  position: absolute;
  right: var(--gutter);
  bottom: -60px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--menta);
  border: 3px solid var(--preto);
}
.rotating-badge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: rotate 14s linear infinite;
}
.badge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: var(--preto);
  text-align: center;
}
.hero-code-icon {
  position: absolute;
  left: var(--gutter);
  top: 24px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--preto);
  background: var(--branco);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  transform: rotate(8deg);
  box-shadow: 5px 5px 0 var(--preto);
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Ticker ===== */
.ticker {
  background: var(--preto);
  color: var(--creme);
  overflow: hidden;
  white-space: nowrap;
  border-bottom: var(--border);
  padding: 14px 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 70s linear infinite;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
}
.ticker-group {
  display: flex;
  flex-shrink: 0;
}
.ticker-group span {
  flex-shrink: 0;
  padding-right: 0.8em;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .rotating-badge { animation: none; }
}

/* ===== Sobre ===== */
.sobre {
  background: var(--preto);
  color: var(--creme);
  padding: 100px 0;
}
.sobre-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: center;
}
.sobre-text h2 {
  font-size: 2.4rem;
  margin-bottom: 24px;
}
.sobre-text p {
  color: var(--texto-claro);
  margin-bottom: 18px;
  font-size: 1.02rem;
}
.sobre-text .rise {
  --d: 0s;
  transition: opacity 0.7s ease var(--d), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--d);
}
.sobre-text:not(.in-view) .rise { opacity: 0; transform: translateY(22px); }
.sobre-text > :nth-child(3) { --d: 0.5s; }
.sobre-text > :nth-child(4) { --d: 0.65s; }

.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.split .w > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--i) * 0.06s);
}
.in-view .split .w > span { transform: none; }


.photo-frame {
  --bx: 14px;
  --by: 14px;
  --br: 4deg;
  position: relative;
  transform: translateY(var(--py, 0px));
}
.photo-backdrop {
  position: absolute;
  inset: 0;
  background: var(--rosa);
  border-radius: var(--radius-lg);
  transform: translate(var(--bx), var(--by)) rotate(var(--br));
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.photo-frame:hover .photo-backdrop { transform: translate(calc(var(--bx) + 6px), calc(var(--by) + 6px)) rotate(calc(var(--br) + 3deg)); }
.sobre-photo:not(.in-view) .photo-backdrop { opacity: 0; }
.sobre-photo.in-view .photo-backdrop { animation: backdrop-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards; }
@keyframes backdrop-in { from { opacity: 0; transform: none; } }

.sobre-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 12%;
  border-radius: var(--radius-lg);
  clip-path: inset(0 0 100% 0 round var(--radius-lg));
  transform: scale(1.12);
  transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.sobre-photo.in-view img { clip-path: inset(0 0 0 0 round var(--radius-lg)); transform: none; }

/* ===== Processo ===== */
.processo {
  background: var(--menta);
  padding: 100px 0;
  border-bottom: var(--border);
}
.section-head {
  width: min(700px, 100% - 2 * var(--gutter));
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2 { font-size: 2.4rem; }
.processo-grid {
  display: flex;
  align-items: center;
  gap: 16px;
}
.processo-card {
  --rot: 0deg;
  --d: 0s;
  flex: 1;
  background: var(--branco);
  border: 2px dashed var(--preto);
  border-radius: var(--radius-sm);
  padding: 28px 24px;
  transform: rotate(var(--rot));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.processo-card:nth-child(1) { --rot: -1.5deg; --d: 0s; }
.processo-card:nth-child(3) { --rot: 1deg; --d: 0.25s; }
.processo-card:nth-child(5) { --rot: -1deg; --d: 0.5s; }
.processo-card:nth-child(7) { --rot: 1.5deg; --d: 0.75s; }
.processo-card:not(.in-view) { opacity: 0; }
.processo-card.in-view { animation: processo-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--d) backwards; }
.processo-card:hover { transform: translateY(-6px) rotate(0deg); }
.processo-arrow {
  --d: 0s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.processo-arrow:nth-child(2) { --d: 0.2s; }
.processo-arrow:nth-child(4) { --d: 0.45s; }
.processo-arrow:nth-child(6) { --d: 0.7s; }
.processo-arrow svg { display: block; }
.processo-arrow:not(.in-view) svg { opacity: 0; }
.processo-arrow.in-view svg {
  animation:
    arrow-in 0.5s ease var(--d) backwards,
    arrow-nudge 1.8s ease-in-out calc(var(--d) + 0.6s) infinite;
}
.processo-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.processo-card.in-view .processo-icon {
  animation: icon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d) + 0.3s) backwards;
}
.processo-card:hover .processo-icon { transform: rotate(-12deg) scale(1.12); }
.icon-coral { background: var(--acento); color: var(--preto); }
.icon-preto { background: var(--preto); color: var(--creme); }
.processo-num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--acento);
  margin-bottom: 4px;
}
.processo-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.processo-card p { color: var(--texto-secundario); font-size: 0.95rem; }

@keyframes processo-rise {
  from { opacity: 0; transform: translateY(40px) rotate(calc(var(--rot) * 3)) scale(0.94); }
  to { opacity: 1; transform: translateY(0) rotate(var(--rot)) scale(1); }
}
@keyframes icon-pop {
  from { transform: scale(0) rotate(-120deg); }
  to { transform: scale(1) rotate(0deg); }
}
@keyframes arrow-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .processo-card, .processo-card .processo-icon, .processo-arrow svg { animation: none !important; }
  .processo-card:not(.in-view) { opacity: 1; }
  .processo-arrow:not(.in-view) svg { opacity: 1; }
}

/* ===== Serviços ===== */
.servicos {
  background: var(--creme);
  padding: 100px 0;
}
.servicos-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.servico-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 320px;
  overflow: hidden;
  border: var(--border);
  border-radius: 22px;
  background: var(--creme);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.2s ease;
}
.servico-card.in-view { opacity: 1; transform: translateY(0); }
.servico-card:hover { box-shadow: 8px 8px 0 var(--preto); }
.servico-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 40px;
  border-right: var(--border);
}
.servico-info.bg-rosa { background: var(--rosa); }
.servico-info.bg-menta { background: var(--menta); }
.servico-info.bg-branco { background: var(--branco); }
.servico-info h3 { font-size: 1.75rem; font-weight: 700; }
.servico-info p { color: var(--texto-secundario); font-size: 0.98rem; }
.servico-bullets { display: flex; flex-direction: column; gap: 6px; }
.servico-bullets li { font-size: 0.9rem; font-weight: 600; }
.servico-bullets li::before { content: "— "; }
.servico-info .btn { margin-top: auto; }
.btn-white { background: var(--branco); color: var(--preto); }
.btn-white:hover { box-shadow: 4px 4px 0 var(--preto); }
.servico-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background-color: var(--creme);
}
.servico-name {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.125rem);
  line-height: 1.05;
  text-align: center;
  color: var(--preto);
  transform: rotate(-3deg);
}
.servico-card:nth-child(2) .servico-name { transform: rotate(2deg); }
.servico-card:nth-child(3) .servico-name { transform: rotate(-2deg); }
.servico-card:nth-child(4) .servico-name { transform: rotate(3deg); }
.servico-card:nth-child(5) .servico-name { transform: rotate(-2.5deg); }
.servico-card:nth-child(6) .servico-name { transform: rotate(2deg); }

.servico-visual { position: relative; transition: background-position 0.8s ease; }
.servico-card:hover .servico-visual { background-position: 9px 9px; }
.servico-name { display: block; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.servico-card:hover .servico-name { transform: rotate(0deg) scale(1.05); }
.servico-name .line { display: block; overflow: hidden; padding-block: 0.06em; margin-block: -0.06em; }
.servico-name .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.servico-name .line:nth-child(2) > span { transition-delay: 0.37s; }
.servico-card.in-view .servico-name .line > span { transform: none; }
.servico-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--branco);
  border: var(--border);
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.servico-card:hover .servico-arrow { background: var(--acento); transform: rotate(45deg) scale(1.1); }
.servico-bullets li {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s ease var(--bd, 0.45s), transform 0.5s ease var(--bd, 0.45s);
}
.servico-bullets li:nth-child(2) { --bd: 0.53s; }
.servico-bullets li:nth-child(3) { --bd: 0.61s; }
.servico-card.in-view .servico-bullets li { opacity: 1; transform: none; }
.servico-info .btn svg { transition: transform 0.25s ease; }
.servico-card:hover .servico-info .btn { box-shadow: 4px 4px 0 var(--preto); transform: translate(-2px, -2px); }
.servico-card:hover .servico-info .btn svg { transform: translateX(4px); }

/* ===== Projeto ===== */
.projeto {
  position: relative;
  overflow: hidden;
  background: var(--rosa);
  padding: 100px 0;
  border-top: var(--border);
  border-bottom: var(--border);
}
.projeto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(23, 20, 18, 0.1) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
}
.projeto-inner {
  position: relative;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: center;
}
.video-card {
  position: relative;
  width: 100%;
  max-width: 300px;
  transform: rotate(-2deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.video-card:hover { transform: rotate(0deg) translateY(-4px); }
.video-card.is-playing, .video-card.is-playing:hover { transform: none; }
.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 300/534;
  object-fit: cover;
  background: var(--preto);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 10px 10px 0 var(--preto);
}
.projeto-video:not(.in-view) .video-card { opacity: 0; }
.projeto-video.in-view .video-card { animation: video-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes video-in { from { opacity: 0; transform: translateY(60px) rotate(-10deg) scale(0.92); } }

.video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--preto);
  background: rgba(23, 20, 18, 0.25);
  border-radius: var(--radius-lg);
  transition: opacity 0.3s ease;
}
.video-play:focus-visible { outline: 3px solid var(--acento); outline-offset: -6px; }
.video-card.is-playing .video-play { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.play-circle {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acento);
  border: var(--border);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--preto);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.play-circle svg { margin-left: 4px; }
.video-play:hover .play-circle { transform: scale(1.08) rotate(-4deg); }
.ring {
  position: absolute;
  inset: -2px;
  border: 2px solid var(--acento);
  border-radius: 50%;
  animation: ping 2s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
.play-label {
  padding: 4px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--branco);
  border: var(--border);
  border-radius: 999px;
}

.video-sticker {
  position: absolute;
  top: 22px;
  right: -16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--menta);
  border: var(--border);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--preto);
  transform: rotate(-6deg);
  transition: opacity 0.3s ease;
}
.video-sticker .dot {
  width: 9px;
  height: 9px;
  background: var(--acento);
  border: 1.5px solid var(--preto);
  border-radius: 50%;
  animation: dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
.projeto-video:not(.in-view) .video-sticker { opacity: 0; }
.projeto-video.in-view .video-sticker {
  animation: sticker-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s backwards, sticker-float 4.5s ease-in-out 1.5s infinite;
}
.video-card.is-playing .video-sticker { opacity: 0; pointer-events: none; }
@keyframes sticker-in { from { opacity: 0; transform: scale(0.3) rotate(-40deg); } }
@keyframes sticker-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(-3deg); }
}

.projeto-text .rise {
  --d: 0s;
  transition: opacity 0.7s ease var(--d), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--d);
}
.projeto-text:not(.in-view) .rise { opacity: 0; transform: translateY(22px); }
.projeto-text > :nth-child(3) { --d: 0.45s; }
.projeto-text > :nth-child(4) { --d: 0.55s; }
.projeto-text > :nth-child(5) { --d: 0.7s; }
.projeto-text > :nth-child(6) { --d: 0.9s; }
.projeto-text h2 { font-size: 2.6rem; margin-bottom: 6px; }
.projeto-tag {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--texto-secundario);
  margin-bottom: 18px;
}
.projeto-text p { color: var(--texto-secundario); margin-bottom: 20px; }
.depoimento {
  position: relative;
  margin: 32px 0 26px;
  padding: 26px 24px 18px;
  background: var(--branco);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--preto);
}
.depoimento p {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--preto);
}
.depoimento footer { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--texto-secundario); }
.quote-mark {
  position: absolute;
  top: -20px;
  left: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 14px;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--preto);
  background: var(--acento);
  border: var(--border);
  border-radius: 50%;
}
.projeto-text.in-view .quote-mark { animation: icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s backwards; }
.projeto-cta .btn svg { transition: transform 0.25s ease; }
.projeto-cta .btn:hover svg { transform: translate(3px, -3px); }

/* ===== FAQ ===== */
.faq { padding: 100px 0; background: var(--creme); }
.faq-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro list" "help list";
  gap: 0 64px;
  align-items: start;
}
.faq-intro { grid-area: intro; }
.faq-list { grid-area: list; }
.faq-intro h2 { font-size: 2.4rem; margin-bottom: 14px; }
.faq-lead { color: var(--texto-secundario); margin-bottom: 28px; }
.faq-intro .rise {
  --d: 0s;
  transition: opacity 0.7s ease var(--d), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--d);
}
.faq-intro:not(.in-view) .rise { opacity: 0; transform: translateY(22px); }
.faq-intro > :nth-child(3) { --d: 0.45s; }
.faq-help {
  grid-area: help;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  background: var(--menta);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--preto);
}
.faq-help strong { font-family: var(--font-serif); font-size: 1.25rem; }
.faq-help span { color: var(--texto-secundario); font-size: 0.95rem; margin-bottom: 8px; }
.faq-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  --d: 0s;
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease var(--d), transform 0.6s ease var(--d), box-shadow 0.2s ease;
}
.faq-item.in-view { opacity: 1; transform: translateY(0); }
.faq-item:hover { box-shadow: 6px 6px 0 var(--preto); }
.faq-item:nth-child(2) { --d: 0.08s; }
.faq-item:nth-child(3) { --d: 0.16s; }
.faq-item:nth-child(4) { --d: 0.24s; }
.faq-item:nth-child(5) { --d: 0.32s; }
.faq-item.bg-rosa { background: var(--rosa); }
.faq-item.bg-menta { background: var(--menta); }
.faq-item.bg-creme { background: var(--branco); }
.faq-item.open { box-shadow: 6px 6px 0 var(--preto); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  text-align: left;
  font-weight: 600;
  font-size: 1.02rem;
}
.faq-question:focus-visible { outline: 3px solid var(--preto); outline-offset: -6px; border-radius: var(--radius-md); }
.faq-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--branco);
  border: var(--border);
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease;
}
.faq-question:hover .faq-icon { transform: scale(1.1); }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--acento); }
.faq-item.open .faq-question:hover .faq-icon { transform: rotate(45deg) scale(1.1); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-answer-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}
.faq-answer p {
  padding: 0 26px 22px;
  color: var(--texto-secundario);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer-inner { visibility: visible; transition-delay: 0s; }
.faq-item.open .faq-answer p { opacity: 1; transform: none; transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .faq-intro .rise, .faq-intro:not(.in-view) .rise { opacity: 1; transform: none; transition: none; }
  .faq-answer, .faq-answer-inner, .faq-answer p, .faq-icon { transition: none; }
}

/* ===== Contato ===== */
.contato {
  position: relative;
  overflow: hidden;
  background: var(--preto);
  color: var(--creme);
  padding: 100px 0;
}
.contato::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(253, 251, 244, 0.07) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
}
.contato-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.contato-text h2 { font-size: 2.6rem; margin-bottom: 18px; }
.contato-text > p { color: var(--texto-claro); margin-bottom: 28px; }
.contato-channels { display: flex; flex-direction: column; gap: 12px; }
.contato-channels li {
  --d: 0s;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease var(--d), transform 0.5s ease var(--d);
}
.contato-channels li.in-view { opacity: 1; transform: translateY(0); }
.contato-channels li:nth-child(2) { --d: 0.08s; }
.contato-channels li:nth-child(3) { --d: 0.16s; }
.contato-channels li:nth-child(4) { --d: 0.24s; }
.contato-channels a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border: 2px solid rgba(253, 251, 244, 0.22);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.contato-channels a:hover {
  border-color: var(--creme);
  background: rgba(253, 251, 244, 0.06);
  transform: translateX(4px);
}
.channel-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rosa);
  color: var(--preto);
}
.contato-channels li:nth-child(even) .channel-icon { background: var(--menta); }
.channel-text { display: flex; flex-direction: column; min-width: 0; }
.channel-text strong { font-size: 0.95rem; }
.channel-text small { font-size: 0.85rem; color: var(--texto-claro); overflow-wrap: anywhere; }
.contato-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--creme);
  color: var(--preto);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 var(--rosa);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.contato-form.in-view { opacity: 1; transform: translateY(0); }
.contato-form h3 { font-size: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contato-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}
.contato-form input,
.contato-form select,
.contato-form textarea {
  width: 100%;
  font-family: var(--font-sans);
  background: var(--branco);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.95rem;
  color: var(--preto);
  resize: vertical;
}
.contato-form select {
  appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171412' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}
.contato-form input:focus,
.contato-form select:focus,
.contato-form textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.contato-form .btn { width: 100%; margin-top: 4px; }
.form-note { font-size: 0.8rem; color: var(--texto-secundario); text-align: center; }
.form-note a { color: var(--preto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--acento); }
@media (prefers-reduced-motion: reduce) {
  .faq-item, .contato-form, .contato-channels li { opacity: 1; transform: none; transition: none; }
}

/* ===== Footer ===== */
.footer { background: var(--branco); padding: 72px 0 0; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  grid-template-areas: "brand nav contact social";
  gap: 32px;
  padding-bottom: 56px;
}
.footer-brand { grid-area: brand; }
.footer-nav { grid-area: nav; }
.footer-contact { grid-area: contact; }
.footer-social { grid-area: social; }
.footer-brand p { margin-top: 14px; color: var(--texto-secundario); font-size: 0.92rem; max-width: 280px; }
.footer-cta { margin-top: 20px; }
.footer-nav, .footer-contact, .footer-social { display: flex; flex-direction: column; gap: 10px; }
.footer h4 { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--acento); margin-bottom: 6px; }
.footer-nav a, .footer-contact a, .footer-social a {
  font-size: 0.92rem;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.footer-nav a:hover, .footer-contact a:hover, .footer-social a:hover { opacity: 0.6; }
.footer-social a { display: inline-flex; align-items: center; gap: 10px; }
.social-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--preto);
  color: var(--branco);
}
.footer-min { padding-top: 0; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s ease; }
.footer-bottom a:hover { opacity: 0.6; }
.footer-bottom {
  border-top: var(--border);
  text-align: center;
  padding: 20px 24px;
  font-size: 0.82rem;
  color: var(--texto-secundario);
}

/* ===== Página legal ===== */
.legal { padding: 80px 0 100px; background: var(--creme); }
.legal-inner { width: min(820px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 8px; }
.legal-updated { color: var(--texto-secundario); font-size: 0.9rem; margin-bottom: 32px; }
.legal-summary {
  background: var(--menta);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 8px;
}
.legal h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--texto-secundario); }
.legal p { margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.legal strong { color: var(--preto); }
.legal a { color: var(--preto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--acento); }
.legal code { white-space: nowrap; font-size: 0.85em; background: var(--branco); border: 1px solid var(--preto); border-radius: 6px; padding: 1px 6px; }
.legal-table { overflow-x: auto; margin: 16px 0; border: var(--border); border-radius: var(--radius-sm); background: var(--branco); }
.legal-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 16px; }
.legal-table th { background: var(--rosa); color: var(--preto); font-weight: 700; }
.legal-table td { color: var(--texto-secundario); border-top: 1px solid rgba(23, 20, 18, 0.15); }

/* ===== Cookies ===== */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 200;
  width: min(380px, calc(100% - 32px));
  background: var(--branco);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--preto);
  padding: 22px;
  animation: cookie-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.cookie-banner[hidden], .cookie-fab[hidden] { display: none; }
.cookie-banner h2 { font-size: 1.15rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.cookie-banner p { font-size: 0.9rem; color: var(--texto-secundario); margin-bottom: 16px; }
.cookie-banner p a { color: var(--preto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--acento); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { flex: 1; }
.cookie-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 200;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--branco);
  color: var(--preto);
  border: var(--border);
  box-shadow: 3px 3px 0 var(--preto);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: cookie-in 0.4s ease backwards;
}
.cookie-fab:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--preto); }
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner, .cookie-fab { animation: none; }
}

/* ===== Animações ===== */
[data-reveal] {
  --d: 0s;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease var(--d), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d);
}
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal="none"] { opacity: 1; transform: none; transition: none; }

@keyframes hero-card-in { from { opacity: 0; transform: translateY(48px) rotate(-7deg) scale(0.95); } }
@keyframes hero-in-up { from { transform: translateY(18px); } }
@keyframes sticker-pop { from { opacity: 0; transform: scale(0.3) rotate(-60deg); } }
@keyframes icon-drop { from { opacity: 0; transform: translateY(-30px) rotate(-25deg) scale(0.6); } }
.hero-card { animation: hero-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.hero-card > * { animation: hero-in-up 0.5s ease backwards; }
.hero-card > :nth-child(1) { animation-delay: 0.1s; }
.hero-card > :nth-child(2) { animation-delay: 0.18s; }
.hero-card > :nth-child(3) { animation-delay: 0.26s; }
.hero-badge { animation: sticker-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s backwards; }
.hero-code-icon { animation: icon-drop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s backwards; }

.ticker:hover .ticker-track { animation-play-state: paused; }

.nav { transition: padding-block 0.25s ease; }
.nav-wrap { transition: box-shadow 0.25s ease; }
.nav-wrap.is-scrolled { box-shadow: 0 4px 0 rgba(23, 20, 18, 0.08); }
.nav-wrap.is-scrolled .nav { padding-block: 10px; }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 300;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

@media (max-width: 768px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(32px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .servico-card, .servico-bullets li { opacity: 1; transform: none; transition: none; }
  .servico-name .line > span { transform: none; transition: none; }
  .hero-card, .hero-card > *, .hero-badge, .hero-code-icon { animation: none; }
  .scroll-progress { display: none; }
  .sobre-text .rise, .sobre-text:not(.in-view) .rise,
  .sobre-photo:not(.in-view) .photo-backdrop { opacity: 1; transform: none; transition: none; }
  .split .w > span, .sobre-photo img { transform: none; clip-path: none; transition: none; }
  .sobre-photo.in-view .photo-backdrop { animation: none; }
  .photo-frame { transform: none; }
  .projeto-text .rise, .projeto-text:not(.in-view) .rise,
  .projeto-video:not(.in-view) .video-card, .projeto-video:not(.in-view) .video-sticker { opacity: 1; transform: none; transition: none; }
  .projeto-video.in-view .video-card, .projeto-video.in-view .video-sticker, .projeto-text.in-view .quote-mark,
  .ring, .video-sticker .dot { animation: none; }
}

/* ===== Responsive ===== */

/* Tablet: até 1024px */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .nav-links { gap: 22px; }
  .sobre-text h2, .section-head h2, .projeto-text h2, .contato-text h2, .faq-intro h2 { font-size: 2rem; }
  .faq-inner { grid-template-columns: 0.9fr 1.1fr; gap: 0 40px; }
  .script-headline { font-size: 3rem; }
  .hero-card { padding: 44px; }
  .sobre-inner { gap: 40px; }
  .servico-info { padding: 32px; }
  .servico-info h3 { font-size: 1.5rem; }
  .projeto-inner { grid-template-columns: 280px 1fr; gap: 40px; }
  .contato-inner { gap: 40px; }

  /* alvos de toque de pelo menos 44px */
  .btn { min-height: 44px; }
  .nav-links a { display: flex; align-items: center; min-height: 44px; }
  .footer-nav, .footer-contact, .footer-social { gap: 0; }
  .footer-nav a, .footer-contact a, .footer-social a { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
}

/* Hero: enfeites saem da frente do card quando a tela fica estreita */
@media (max-width: 960px) {
  .hero { padding-bottom: 150px; }
  .hero-code-icon { display: none; }
  .hero-badge { width: 120px; height: 120px; bottom: -120px; }
  .badge-center { font-size: 11px; }
}

@media (max-width: 900px) {
  .faq-inner { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "intro" "list" "help"; gap: 32px; }
  .faq-intro { text-align: center; }
  .faq-lead { margin-bottom: 0; }
  .faq-help { align-items: center; text-align: center; }
  .processo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
  .processo-arrow { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; grid-template-areas: "brand nav" "contact social"; }
}

/* Mobile: até 768px */
@media (max-width: 768px) {
  :root { --gutter: 20px; }

  /* topo e menu */
  .top-bar p { font-size: 0.72rem; letter-spacing: 0.06em; }
  .nav { display: flex; justify-content: space-between; padding-block: 10px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(23, 20, 18, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(320px, 86vw);
    padding: 20px 24px 32px;
    background: var(--creme);
    border-left: var(--border);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .menu-open { overflow: hidden; }
  .menu-open .nav-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu-open .nav-drawer { transform: none; visibility: visible; transition-delay: 0s; }
  .nav-close {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: var(--border);
    border-radius: 50%;
    background: var(--branco);
    color: var(--preto);
  }
  .nav-drawer ul { display: flex; flex-direction: column; margin-top: 16px; }
  .nav-drawer li a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 1px dashed rgba(23, 20, 18, 0.25);
  }
  .nav-drawer .btn { width: 100%; margin-top: 24px; }

  /* títulos e espaçamento das seções */
  .sobre, .processo, .servicos, .projeto, .faq, .contato { padding: 64px 0; }
  .sobre-text h2, .section-head h2, .projeto-text h2, .contato-text h2, .faq-intro h2 { font-size: 1.65rem; }
  .section-head { margin-bottom: 36px; }

  /* hero */
  .hero { padding: 56px 0 100px; }
  .hero-card { transform: none; width: 100%; padding: 32px 22px; box-shadow: 6px 6px 0 var(--preto); }
  .script-headline { font-size: 2.4rem; margin-bottom: 16px; }
  .hero-card p { font-size: 1rem; margin-bottom: 24px; }
  .hero-badge { width: 96px; height: 96px; right: 8px; bottom: -64px; }
  .badge-center { font-size: 9px; }
  .hero-code-icon { display: block; left: 6px; top: -22px; font-size: 1.1rem; padding: 5px 11px; border-radius: 12px; box-shadow: 3px 3px 0 var(--preto); }

  /* sobre */
  .sobre-inner { grid-template-columns: 1fr; gap: 40px; }
  .photo-frame { --bx: 10px; --by: 10px; --br: 3deg; }
  .sobre-text p { font-size: 1rem; }

  /* como eu trabalho: uma coluna, setas para baixo */
  .processo-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: calc(560px + 2 * var(--gutter)); }
  .processo-card { flex: none; width: 100%; }
  .processo-card:nth-child(n), .processo-arrow:nth-child(n) { --d: 0s; }
  .processo-arrow { display: flex; transform: rotate(90deg); align-self: center; }

  /* serviços */
  .servicos-grid { gap: 20px; }
  .servico-card { grid-template-columns: 1fr; min-height: 0; }
  .servico-info { border-right: none; border-bottom: var(--border); padding: 26px 22px; }
  .servico-info h3 { font-size: 1.5rem; }
  .servico-visual { min-height: 190px; padding: 40px 16px 60px; }
  .servico-arrow { width: 40px; height: 40px; right: 12px; bottom: 12px; }
  .servico-name { font-size: clamp(1.7rem, 8.5vw, 2.6rem); }

  /* projeto em destaque */
  .projeto-inner { grid-template-columns: 1fr; gap: 32px; }
  .projeto-video { display: flex; justify-content: center; }
  .video-sticker { right: -6px; }
  .play-circle { width: 72px; height: 72px; }
  .depoimento { padding: 16px 18px; }

  /* faq */
  .faq-question { padding: 16px 18px; font-size: 0.95rem; min-height: 56px; }
  .faq-answer p { padding: 0 18px 18px; }

  /* contato */
  .contato-inner { grid-template-columns: 1fr; gap: 32px; }
  .contato-channels { display: none; }
  .contato-text > p { margin-bottom: 0; }
  .contato-form { padding: 22px; box-shadow: 6px 6px 0 var(--rosa); }
  .form-row { grid-template-columns: 1fr; }
  .contato-form input, .contato-form select, .contato-form textarea { font-size: 16px; }

  /* rodapé */
  .footer { padding-top: 56px; }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand brand" "nav social" "contact contact";
    gap: 24px;
    padding-bottom: 40px;
  }
  .footer-bottom { padding: 16px 20px; }

  /* cookies */
  .cookie-banner { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 18px; }
  .cookie-fab { left: 16px; bottom: 16px; }

  /* política de privacidade */
  .legal { padding: 48px 0 72px; }
  .legal h2 { font-size: 1.3rem; margin-top: 32px; }
}