/* Archivo servida pelo próprio site (subconjunto latino do Google Fonts, variável 300–800): sem CSS de terceiros
   bloqueando a renderização. O index.html faz preload deste arquivo. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-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;
}

:root {
  /* cantos claros das seções com topo/base em curva (curva de 199×45px, a mesma das ondas) */
  --curve-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 344 45'%3E%3Cpath fill='%23f2f5f8' d='M0 0H344C251.1 0 237.9 45 145 45H0Z'/%3E%3C/svg%3E");
  --curve-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 344 45'%3E%3Cpath fill='%23f2f5f8' d='M344 0H0C92.9 0 106.1 45 199 45H344Z'/%3E%3C/svg%3E");
  --curve-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 344 45'%3E%3Cpath fill='%23f2f5f8' d='M0 45H344C251.1 45 237.9 0 145 0H0Z'/%3E%3C/svg%3E");
  --curve-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 344 45'%3E%3Cpath fill='%23f2f5f8' d='M344 45H0C92.9 45 106.1 0 199 0H344Z'/%3E%3C/svg%3E");
  --blue: #0fb4ff;
  --blue-dark: #0a6cff;
  --white: #f2f5f8;
  --white-80: rgba(242, 245, 248, .8);
  --white-20: rgba(242, 245, 248, .2);
  --gradient: linear-gradient(90deg, var(--blue), var(--blue-dark));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Archivo', sans-serif; color: var(--white); background: #0e1318; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Figma usa "text-box-trim: cap/alphabetic" — replica os espaçamentos exatos */
p, h1, h2, h3, span, strong, .header__nav > a, .nav-mega__toggle { text-box: trim-both cap alphabetic; }

.container { width: min(1280px, 100% - 40px); margin-inline: auto; }

.tag { font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 1.68px; text-transform: uppercase; color: var(--blue); }

/* Botões */
.btn {
  display: inline-flex; align-items: center; border: 1px solid var(--white-20);
  font-size: 17px; font-weight: 700; line-height: 1.2; text-transform: uppercase; white-space: nowrap;
  transition: filter .2s, background-color .2s;
}
.btn--primary { gap: 15px; padding: 14px 20px; border-radius: 51px; background: var(--gradient); }
.btn--primary:hover { filter: brightness(1.1); }
.btn--ghost { padding: 16px 24px; border-radius: 62px; }
.btn--ghost:hover { background: rgba(242, 245, 248, .08); }

html { scroll-padding-top: 100px; } /* âncoras não ficam escondidas atrás do header fixo */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ===== HEADER ===== */
.header { position: fixed; inset: 0 0 auto; z-index: 100; transition: padding-top .4s; }
.header__inner {
  position: relative; display: flex; align-items: center; justify-content: space-between; height: 88px;
  border: 1px solid transparent; border-radius: 87px;
  transition: height .4s, padding .4s, background-color .4s, border-color .4s, backdrop-filter .4s, -webkit-backdrop-filter .4s;
}
/* Após rolar (ou com o menu aberto): pílula de vidro com o contorno do botão */
.header.is-scrolled { padding-top: 12px; }
.header.is-scrolled .header__inner, .header.is-open .header__inner {
  height: 68px; padding-inline: 20px 10px;
  background: rgba(14, 19, 24, .45); border-color: var(--white-20);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.header__actions { display: flex; align-items: center; gap: 8px; }
.header__toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 40px; height: 40px; border: 1px solid rgba(242, 245, 248, .14); border-radius: 12px; background: rgba(242, 245, 248, .06); cursor: pointer;
}
.header__toggle span { width: 16px; height: 1.5px; border-radius: 1px; background: var(--white); transition: transform .3s, opacity .3s; }
.header.is-open .header__toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.header.is-open .header__toggle span:nth-child(2) { opacity: 0; }
.header.is-open .header__toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.header__logo img { width: 110px; height: 48px; }
.header__nav { display: flex; align-items: center; gap: 30px; }
.header__nav > a, .nav-mega__toggle { display: flex; align-items: center; gap: 6px; font-size: 14.72px; font-weight: 600; color: var(--white-80); white-space: nowrap; transition: color .2s; }
.header__nav > a:hover, .nav-mega__toggle:hover, .nav-mega.is-open .nav-mega__toggle { color: var(--white); }

/* ===== MEGAMENU (Serviços) ===== */
.nav-mega__toggle { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.nav-mega__toggle img { width: 8.05px; height: 4.55px; margin-inline: 3px; transition: transform .25s; } /* ícone 14×14 com o traço centralizado */
.nav-mega.is-open .nav-mega__toggle img { transform: rotate(180deg); }
/* painel na largura do header, logo abaixo dele */
.mega {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* ponte: o mouse cruza o vão sem fechar */
.nav-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega__inner {
  padding: 16px; border: 1px solid var(--white-20); border-radius: 24px;
  background: rgba(14, 19, 24, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; list-style: none; }
.mega__grid a { display: flex; align-items: flex-start; gap: 16px; height: 100%; padding: 16px; border-radius: 16px; transition: background-color .2s; }
.mega__grid a:hover, .mega__grid a:focus-visible { background: rgba(242, 245, 248, .06); outline: none; }
.mega__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(180deg, var(--blue) 5.714%, var(--blue-dark)); }
.mega__icon svg { width: 22px; height: 22px; }
.mega__text { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.mega__text strong { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--white); transition: color .2s; }
.mega__grid a:hover strong, .mega__grid a:focus-visible strong { color: var(--blue); }
.mega__text small { font-size: 14px; font-weight: 300; line-height: 1.4; color: rgba(242, 245, 248, .6); }
.mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; padding: 18px 16px 6px; border-top: 1px solid rgba(242, 245, 248, .08); }
.mega__foot p { font-size: 15px; line-height: 1.2; color: var(--white-80); }
.mega__all { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--blue); white-space: nowrap; transition: gap .2s; }
.mega__all:hover { gap: 12px; }
.header__cta {
  display: flex; align-items: center; gap: 9.6px; padding: 15px 16px;
  border: 1px solid var(--white-20); border-radius: 87px;
  font-size: 14.08px; font-weight: 700; line-height: 16.9px; white-space: nowrap; transition: background-color .2s;
}
.header__cta:hover { background: rgba(242, 245, 248, .08); }

/* ===== HERO ===== */
.hero {
  position: relative; height: 871px;
  background: #0e1318 url(assets/hero-bg.webp) no-repeat 50% 0 / auto 100%; /* camada do Figma centralizada (x = −434 em 1920) */
}
.hero__inner { position: relative; height: 100%; padding-top: 207px; }
.hero__content { display: flex; flex-direction: column; gap: 37px; width: 600px; margin-left: -2px; } /* Figma: x=318 */
.hero__title { font-size: 64px; font-weight: 400; line-height: 1.2; letter-spacing: -1.28px; }
.hero__content .tag { margin-bottom: -5px; } /* gap tag→título = 32px no Figma */
.hero__lead { font-size: 20px; line-height: 1.2; color: var(--white-80); }
.hero__actions { display: flex; gap: 12px; }

.hero__slides { position: absolute; top: 574px; right: 0; width: 269px; }
.hero__steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; font-size: 16px; line-height: 1.2; }
.hero__steps i { position: relative; width: 42px; height: 3px; border-radius: 2px; background: rgba(242, 245, 248, .35); overflow: hidden; }
.hero__steps i::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.hero__steps i.is-full::after { transform: scaleX(1); }
.hero__steps i.is-filling::after { transform: scaleX(1); transition: transform var(--slide-time, 4s) linear; }
.hero__thumb { position: relative; width: 269px; height: 162px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 28px; overflow: hidden; }
.hero__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.hero__thumb img.is-active { opacity: 1; }

.hero__scroll { position: absolute; top: 688px; left: 50%; transform: translateX(-50%); z-index: 2; }
.hero__scroll-line { position: absolute; top: 730.5px; left: calc(50% + .5px); transform: translateX(-50%); z-index: 2; width: 8px; height: 74px; } /* fica por cima do card seguinte */
/* um brilho desce pela linha e o ponto final pulsa quando ele chega: convida a rolar */
.hero__scroll-line i {
  position: absolute; top: 0; left: 50%; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px;
  background: linear-gradient(rgba(143, 220, 255, 0), #c9eeff); box-shadow: 0 0 8px 1px rgba(15, 180, 255, .8);
  opacity: 0; animation: scroll-spark 2.2s cubic-bezier(.55, 0, .45, 1) infinite;
}
.hero__scroll-line::after { content: ""; position: absolute; left: 0; bottom: 0; width: 8px; height: 8px; border-radius: 50%; animation: scroll-dot 2.2s ease-out infinite; }
@keyframes scroll-spark { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 75% { opacity: 1; transform: translateY(52px); } 90%, 100% { opacity: 0; transform: translateY(56px); } }
@keyframes scroll-dot { 0%, 72% { box-shadow: 0 0 0 0 rgba(15, 180, 255, .7); } 100% { box-shadow: 0 0 0 10px rgba(15, 180, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-line i { display: none; } .hero__scroll-line::after { animation: none; } }

/* ===== FUNDO CLARO COM GRADE (shader "Pattern grid" do Figma) ===== */
.light {
  display: flow-root; /* impede a margem negativa do card de puxar o fundo junto */
  position: relative; color: #0e1318;
  background:
    linear-gradient(90deg, transparent 19px, #edf0f4 19px 21px, transparent 21px) center / 40px 40px,
    linear-gradient(transparent 19px, #edf0f4 19px 21px, transparent 21px) center / 40px 40px,
    #f1f5f8;
}
/* 3 faixas escuras logo abaixo do hero */
.light::before {
  content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 22px;
  background: linear-gradient(rgba(14, 19, 24, .7) 0 6px, transparent 6px 10px, rgba(14, 19, 24, .2) 10px 15px, transparent 15px 19px, rgba(14, 19, 24, .2) 19px 22px);
}

.icon-box {
  position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 16px; background: var(--gradient);
  box-shadow: 0 0 0 6px rgba(16, 168, 255, .12);
}

/* Ícones animados (seções 2 e 3): SVGs inline; os SVGs citam as animações pelo nome e os keyframes ficam aqui */
.icon-anim { position: relative; display: flex; flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 0 0 6px rgba(16, 168, 255, .12); }
.icon-anim svg { width: 100%; height: 100%; }
@keyframes az-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 30%, 80% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes az-scan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .9; } 45% { opacity: .9; transform: translateY(11px); } 55%, 100% { opacity: 0; transform: translateY(11px); } }
@keyframes az-swing { 0%, 75%, 100% { transform: rotate(0); } 15% { transform: rotate(9deg); } 30% { transform: rotate(-7deg); } 45% { transform: rotate(4deg); } 60% { transform: rotate(-2deg); } }
@keyframes az-beat { 0%, 40%, 80%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } 60% { transform: scale(.95); } 70% { transform: scale(1.1); } }
@keyframes az-glint { 0%, 55% { opacity: 0; transform: scale(.3) rotate(0); } 65% { opacity: 1; transform: scale(1.1) rotate(45deg); } 80%, 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@keyframes az-light { 0%, 60%, 100% { opacity: .25; } 15%, 45% { opacity: 1; } }
@keyframes az-pop { 0%, 30% { transform: scale(0); } 45%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes az-tick { 0%, 42% { stroke-dashoffset: 1; } 58%, 100% { stroke-dashoffset: 0; } }
@keyframes ic-trend { 0% { stroke-dashoffset: 30; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -30; } }
@keyframes ic-alert { 0%, 60%, 93%, 100% { transform: rotate(0); } 65% { transform: rotate(-7deg); } 72% { transform: rotate(6deg); } 79% { transform: rotate(-4deg); } 86% { transform: rotate(2deg); } }
@keyframes ic-power { 0%, 75%, 85% { opacity: 1; } 70%, 80% { opacity: .35; } }
@keyframes ic-flame { 0%, 100% { transform: scale(1, 1) rotate(0); } 25% { transform: scale(.96, 1.05) rotate(-2deg); } 50% { transform: scale(1.03, .97) rotate(1.5deg); } 75% { transform: scale(.98, 1.03) rotate(-1deg); } }
@keyframes az-spin { to { transform: rotate(360deg); } }
@keyframes az-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes az-dial { 0%, 12%, 100% { transform: rotate(-55deg); } 45%, 62% { transform: rotate(55deg); } }
@keyframes az-stamp { 0%, 16%, 38%, 100% { transform: translateY(0); } 26%, 30% { transform: translateY(2.6px); } }
@keyframes az-bar2 { 0% { transform: scaleY(0); } 25%, 80% { transform: scaleY(1); } 95%, 100% { transform: scaleY(0); } }
@keyframes az-nod { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } 90% { transform: rotate(-3deg); } }
@keyframes az-type { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.8px); } }
@keyframes az-drop { 0% { opacity: 0; transform: translateY(-7px); } 18% { opacity: 1; transform: translateY(0); } 24% { transform: translateY(-1.5px); } 30%, 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes az-ring { 0%, 16% { opacity: 0; transform: scale(.4); } 22% { opacity: .9; } 45%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes az-flip { 0%, 25% { transform: translateY(0); } 40%, 85% { transform: translateY(3px); } 100% { transform: translateY(0); } }
@keyframes az-spark { 0%, 30% { opacity: 0; transform: translateY(1px); } 40% { opacity: 1; } 60%, 100% { opacity: 0; transform: translateY(-1px); } }
@keyframes az-plug { 0%, 10% { transform: translateX(-3px); } 30%, 80% { transform: translateX(0); } 95%, 100% { transform: translateX(-3px); } }
@keyframes az-hot { 0%, 100% { opacity: .7; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes az-scan2 { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .9; } 50% { opacity: .9; transform: translateY(11px); } 60%, 100% { opacity: 0; transform: translateY(11px); } }
@keyframes az-sweep { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes az-wrench { 0%, 100% { transform: rotate(0); } 40%, 55% { transform: rotate(-24deg); } }
@media (prefers-reduced-motion: reduce) {
  :is(.icon-anim, .icon-box, .how__icon, .svc-card__icon, .mega__icon) * { animation: none !important; }
  :is(.icon-anim, .icon-box, .how__icon, .svc-card__icon, .mega__icon) [pathLength] { stroke-dashoffset: 0 !important; } /* traços que só apareciam desenhando ficam completos */
  :is(.icon-anim, .icon-box, .how__icon, .svc-card__icon, .mega__icon) [style*="az-light"] { opacity: .9 !important; }
}

/* Linhas animadas: quando o traço chega no ícone (classe is-reached, do script.js), o ícone dá um pulso sutil
   e solta uma onda azul que se expande e some */
:is(.icon-anim, .how__icon)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
}
.is-reached > :is(.icon-anim, .how__icon) { animation: icon-hit .6s cubic-bezier(.34, 1.56, .64, 1); }
.is-reached > :is(.icon-anim, .how__icon)::after { animation: icon-ring .9s ease-out; }
@keyframes icon-hit { 40% { transform: scale(1.1); } }
@keyframes icon-ring { from { opacity: 1; box-shadow: 0 0 0 0 rgba(15, 180, 255, .6); } to { opacity: 0; box-shadow: 0 0 0 16px rgba(15, 180, 255, 0); } }

/* ===== EXPERIÊNCIA ===== */
.experience { padding-bottom: 81.5px; }
.experience__card {
  position: relative; z-index: 1; margin-top: -71px;
  display: flex; flex-direction: column; align-items: center; padding: 80px 60px;
  border: 1px solid var(--white-20); border-radius: 32px; color: var(--white);
  background: linear-gradient(180deg, #1d2a3a, #0e1318);
  box-shadow: -28px 126px 64.5px rgba(0, 0, 0, .04);
}
.experience__title { width: 480px; margin-bottom: 32px; font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; text-align: center; }
.experience__map { display: flex; flex-direction: column; align-items: center; width: 100%; }
.experience__connectors { position: relative; width: 889.5px; height: 108.5px; margin-bottom: -19px; }
.experience__connectors svg { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); overflow: visible; }
/* --p (0→1) vem do script.js conforme a rolagem */
.experience__connectors :is(.track, .fill) { fill: none; stroke: var(--blue-dark); stroke-width: 1.5; }
.experience__connectors .track { opacity: .2; } /* no grupo, para não vazar para os <use> */
.experience__connectors .fill use { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); }
.experience__connectors circle { fill: var(--blue-dark); }
.experience__connectors .dots-end { opacity: clamp(0, (var(--p, 1) - .96) * 25, 1); }
.experience__list { display: flex; gap: 26px; width: 100%; list-style: none; }
.experience__list li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; line-height: 1.2; }
.experience__list h3 { margin-top: 2px; font-size: 24px; font-weight: 400; }
.experience__list p { margin-top: -2px; font-size: 16px; font-weight: 300; color: rgba(242, 245, 248, .7); }

/* ===== PROBLEMAS ===== */
.tag--wide { letter-spacing: 3.6px; }
.problems { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-bottom: 80px; }
.problems__media { position: relative; display: flex; gap: 16px; width: 630px; height: 533px; flex-shrink: 0; }
.problems__photo { flex: 1; border-radius: 17px; background: linear-gradient(var(--shade), var(--shade)), var(--img) center / cover; }
.badge { position: absolute; top: 50%; left: 50%; width: 211px; height: 211px; transform: translate(-50%, -50%); overflow: visible; }
.badge text { font-size: 14.5px; letter-spacing: 2.6px; fill: var(--white); } /* calibrado contra o render do Figma */

.problems__content { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; width: 522px; }
.problems__content .tag { margin-bottom: -4px; } /* tag→título = 32px no Figma */
.problems__title { font-size: 40px; font-weight: 400; line-height: 1.2; }
.problems__lead { font-size: 18px; line-height: 1.2; color: rgba(14, 19, 24, .7); }
.problems__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 36px; list-style: none; }
.problems__list li { display: flex; align-items: center; gap: 20px; }
.problems__list .icon-anim { width: 35px; height: 35px; border-radius: 8.75px; } /* 48px do SVG em escala 35/48 */
.problems__list div { display: flex; flex-direction: column; gap: 10px; line-height: 1.2; }
.problems__list strong { font-size: 18px; font-weight: 700; }
.problems__list span { font-size: 14px; font-weight: 300; line-height: 1.35; }
.btn--primary { color: var(--white); }

/* ===== POR QUE A AZIZ ===== */
.light { padding-bottom: 80px; } /* o fundo claro continua por baixo dos cantos arredondados da seção escura */
.why {
  position: relative; z-index: 1; margin-top: -80px; padding: 80px 0 67px;
  border-radius: 48px 48px 0 0; overflow-x: clip;
  background: radial-gradient(50% 100% at 50% 0, #1d2a3a, #151e29 50%, #0d1218);
}
/* recorte claro + seta no topo, e onda na borda de baixo (vetores do Figma girados 180°) */
.why__notch { position: absolute; top: -15.7px; left: calc(50% - 57.2px); width: 114.4px; height: 45.7px; max-width: none; transform: rotate(180deg); clip-path: inset(0 0 13.7px 0); } /* sem a sombra girada para cima; a base (no SVG) passa 2px da borda da seção e cobre a emenda em qualquer zoom */
.why__arrow { position: absolute; top: -10.25px; left: calc(50% - 9.2px); width: 18.41px; height: 30.5px; }
.why__wave { position: absolute; top: 100%; right: -825.5px; width: 2426.5px; height: 45px; max-width: none; transform: rotate(180deg); }

.why__head { display: flex; flex-direction: column; gap: 40px; width: 864px; margin: 0 auto 40px; text-align: center; }
.why__head .tag { margin-bottom: -8px; } /* tag→título = 32px */
.why__title { font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; }
.why__lead { font-size: 19.2px; line-height: 1.2; color: rgba(242, 245, 248, .7); }

.why__row { display: grid; gap: 24px; }
.why__row--top { grid-template-columns: 660.75fr 594.75fr; margin-bottom: 24px; }
.why__row--bottom { grid-template-columns: repeat(3, 1fr); }
.why__stack { display: flex; flex-direction: column; gap: 24px; }

.why-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px;
  border-radius: 16px; color: #0e1318; background: linear-gradient(0deg, #f2f5f8, #e5eaee);
}
.why-card h3 { font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -.48px; }
.why-card p { font-size: 16px; font-weight: 300; line-height: 1.2; color: rgba(14, 19, 24, .7); }
.why-card--row { flex: 1; flex-direction: row; }
.why-card--row div { display: flex; flex-direction: column; gap: 24px; }
.why-card--photo {
  justify-content: flex-end; height: 298px; border: 1px solid var(--white-20); color: var(--white);
  --foto: url(assets/why-photo.webp);
  background:
    linear-gradient(rgba(14, 19, 24, .51), rgba(14, 19, 24, .95) 71.57%) -22px -33px / 700px 382px no-repeat,
    var(--foto) -22px -33px / 700px 382px no-repeat,
    #0e1318;
}
.why-card--blue {
  color: var(--white);
  background: linear-gradient(-64.62deg, rgba(14, 19, 24, .55) 28.04%, rgba(74, 100, 126, .182) 83.01%), #0a6cff;
}
:is(.why-card--photo, .why-card--blue) p { color: rgba(242, 245, 248, .7); }

/* ===== CTA PROBLEMAS ===== */
/* grade de 44px (shader do Figma com zoom .44) que some em degradê para baixo */
.cta {
  padding: 80px 0; color: #0e1318;
  background:
    linear-gradient(rgba(242, 245, 248, 0), #f2f5f8) 0 0 / 100% calc(100% + 80px) no-repeat,
    linear-gradient(90deg, transparent 21px, #eceff2 21px 23px, transparent 23px) center / 44px 44px,
    linear-gradient(transparent 21px, #eceff2 21px 23px, transparent 23px) center / 44px 44px,
    #f0f5f8;
}
.cta__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.cta__content { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; width: 522px; margin-top: 66px; }
.cta__head { display: flex; flex-direction: column; gap: 24px; }
.cta__title { font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -1.6px; }
.cta__lead { font-size: 18px; line-height: 1.2; color: rgba(14, 19, 24, .7); }
.cta__photo { width: 628px; height: 415px; object-fit: cover; border-radius: 17px; }

/* ===== SERVIÇOS (carrossel) ===== */
.services {
  position: relative; z-index: 1; padding: 80px 0 153px; overflow-x: clip;
  background: radial-gradient(50% 100% at 50% 0, #1d2a3a, #151e29 50%, #0d1218);
}
/* onda que sobe pela esquerda (curva a ~31% da largura, como em 1920px) */
.services__wave { position: absolute; bottom: 100%; left: calc(31vw - 837px); width: 2426.5px; height: 45px; max-width: none; }

.services__head { display: flex; flex-direction: column; gap: 36px; margin-bottom: 50px; text-align: center; }
.services__titles { display: flex; flex-direction: column; gap: 32px; }
.services__title { font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -1.6px; }
.services__lead { font-size: 19.2px; line-height: 1.2; color: rgba(242, 245, 248, .7); }

/* O ativo fica sempre alinhado à borda esquerda do conteúdo; --i (índice ativo) vem do script.js */
.carousel {
  --card: 305px; --active: 512px; --gap: 20px; --h: 411px; --pad: 31px; --t: .6s cubic-bezier(.65, 0, .35, 1);
  overflow: hidden;
}
/* o trilho anda com margin-left (e não transform) para ficar no mesmo quadro que a mudança de largura dos
   cards — com transform os dois rodam em threads diferentes e o espaço entre os cards "treme" */
.carousel__track {
  display: flex; gap: var(--gap); padding-left: max(20px, (100% - 1280px) / 2);
  margin-left: calc(var(--i, 0) * (var(--card) + var(--gap)) * -1);
  transition: margin-left var(--t); touch-action: pan-y;
}
.carousel__track.is-instant { transition: none; }

.svc-card {
  position: relative; display: flex; flex-direction: column; flex: 0 0 var(--card); height: var(--h); overflow: hidden; cursor: pointer;
  will-change: transform; /* cada card na sua camada: ao se mover, só os que mudam de largura são redesenhados */
  border: 1px solid var(--white-20); border-radius: 20px; background: #f2f5f8; color: #0e1318;
  transition: flex-basis var(--t);
}
.svc-card.is-active { flex-basis: var(--active); cursor: default; }
.svc-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* a foto ocupa todo o espaço que sobra: cresce quando as informações somem */
.svc-card__media { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; padding: 19px var(--pad); } /* 20/32 do Figma menos a borda de 1px */
.svc-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.svc-card__icon {
  position: relative; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px;
  border-radius: 14px; background: linear-gradient(180deg, var(--blue) 5.714%, var(--blue-dark));
}
.svc-card__icon svg { width: 19px; height: 19px; }

.svc-card__body { padding: var(--pad); }
/* Título: 22px com scale(18/22) no card compacto — cresce por transform, sem recalcular layout a cada quadro.
   A altura de cada título nos dois estados (--hc compacto, --ha ativo) é medida no script.js e animada aqui:
   a foto sempre preenche o espaço que sobra e nunca pula quando o título muda de quebra de linha.
   A troca para a largura do card ativo só acontece quando ele termina de abrir. */
.svc-card h3 {
  --w: calc((var(--card) - 2 * var(--pad) - 2px) * 22 / 18);
  display: flex; flex-direction: column; justify-content: flex-end; width: var(--w); height: var(--hc, auto);
  font-size: 22px; font-weight: 400; line-height: 1.2;
  transform: scale(calc(18 / 22)); transform-origin: 0 100%;
  transition: transform .2s, font-weight .2s, height var(--t);
}
.svc-card.is-active h3 {
  --w: calc(var(--active) - 2 * var(--pad) - 2px);
  height: var(--ha, auto); font-weight: 600; transform: none;
  transition: transform .3s .6s cubic-bezier(.2, .7, .3, 1), font-weight .3s .6s, width 0s .6s, height var(--t);
}

/* descrição + botão: abrem por altura (0fr → 1fr) e entram em fade/subida com atraso */
.svc-card__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.svc-card__more > div {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-height: 0; overflow: hidden;
  width: calc(var(--active) - 2 * var(--pad) - 2px); /* largura final fixa: o texto não re-quebra enquanto o card cresce */
  opacity: 0; transform: translateY(10px); visibility: hidden;
  transition: padding var(--t), opacity .25s, transform .25s, visibility 0s .25s;
}
.svc-card.is-active .svc-card__more { grid-template-rows: 1fr; }
.svc-card.is-active .svc-card__more > div {
  padding-top: 20px; opacity: 1; transform: none; visibility: visible;
  transition: padding var(--t), opacity .45s .3s, transform .45s .3s cubic-bezier(.2, .7, .3, 1), visibility 0s;
}
.svc-card__more p { font-size: 16px; font-weight: 300; line-height: 1.2; color: rgba(14, 19, 24, .7); }
.svc-card__btn {
  display: inline-flex; align-items: center; gap: 15px; padding: 10px 14px;
  border: 1px solid var(--white-20); border-radius: 51px; background: var(--gradient);
  font-size: 16px; line-height: 1.2; color: var(--white); white-space: nowrap; transition: filter .2s;
}
.svc-card__btn:hover { filter: brightness(1.1); }

/* barra de progresso do autoplay na base do card ativo; ao terminar, o script.js passa para o próximo */
.svc-card::before, .svc-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0; pointer-events: none; }
.svc-card::before { background: rgba(14, 19, 24, .08); }
.svc-card::after { background: var(--gradient); transform: scaleX(0); transform-origin: left; }
.svc-card.is-active::before { opacity: 1; transition: opacity .3s .6s; }
.svc-card.is-active::after { opacity: 1; animation: svc-progress 5s linear .6s both; }
@keyframes svc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* pausa: fora da tela, com o mouse em cima ou com foco de teclado dentro do carrossel */
.carousel.is-paused .svc-card::after, .carousel:has(:focus-visible) .svc-card::after { animation-play-state: paused; }
@media (hover: hover) { .carousel:hover .svc-card::after { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .svc-card::before, .svc-card::after { display: none; } } /* sem autoplay */

/* ===== ÁREA DE ATENDIMENTO (mapa) ===== */
.visits {
  position: relative; z-index: 2; margin-top: -67px; padding: 79px 0; color: #0e1318;
  border-radius: 48px 48px 0 0;
  background:
    linear-gradient(90deg, transparent 21px, #ecf0f2 21px 23px, transparent 23px) center / 44px 44px,
    linear-gradient(transparent 21px, #ecf0f2 21px 23px, transparent 23px) center / 44px 44px,
    #f1f5f8;
}
.visits__inner { display: flex; align-items: flex-start; gap: 120px; }
.visits__content { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; flex-shrink: 0; width: 424px; margin-top: 57px; }
.visits__head { display: flex; flex-direction: column; gap: 32px; }
.visits__title { font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -1.6px; }
.visits__lead { font-size: 18px; line-height: 1.2; color: rgba(14, 19, 24, .7); }

/* o mapa (MapLibre + OpenFreeMap) entra por cima do "pôster" — o print do Figma — quando termina de carregar */
.visits__map {
  flex: 0 1 638px; min-width: 0; height: 415px; border-radius: 24px; overflow: hidden; /* em desktops estreitos o mapa cede espaço ao texto */
  --foto: url(assets/map-poster.webp);
  background: #0c0c0c var(--foto) center / cover;
}
.visits__map > * { transition: opacity .4s; }
.visits__map:not(.is-ready) > * { opacity: 0; }
.visits .visits__map .maplibregl-ctrl-group { background: rgba(14, 19, 24, .85); border: 1px solid rgba(242, 245, 248, .15); box-shadow: none; }
.visits .visits__map .maplibregl-ctrl-group button + button { border-top-color: rgba(242, 245, 248, .15); }
.visits .visits__map .maplibregl-ctrl-icon { filter: invert(1); }
.visits .visits__map .maplibregl-ctrl-attrib { background: rgba(12, 12, 12, .7); color: rgba(242, 245, 248, .6); }
.visits .visits__map .maplibregl-ctrl-attrib a { color: rgba(242, 245, 248, .85); }
.visits .visits__map .maplibregl-ctrl-attrib-button { filter: invert(1); }

.map-pin {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 35px; border-radius: 9px; background: #1e7bff;
}
.map-pin img { width: 10px; height: 17px; }
.map-pin span {
  position: absolute; bottom: calc(100% + 11px); left: 50%; transform: translateX(-50%);
  padding: 6px 9px; border: 1px solid rgba(242, 245, 248, .12); border-radius: 7px; background: #12151b;
  font-size: 12px; font-weight: 500; color: rgba(242, 245, 248, .92); white-space: nowrap;
}

/* ===== COMO FUNCIONA ===== */
.how { position: relative; z-index: 1; padding-bottom: 82px; background: #f2f5f8; } /* z-index: a sombra do card passa por cima do topo do Portfólio, como no Figma */
/* grade de 44px nos primeiros 573px, perdendo força para baixo (shader + degradê do Figma) */
.how::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 573px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 21px, #ecf0f3 21px 23px, transparent 23px) center -7px / 44px 44px,
    linear-gradient(transparent 21px, #ecf0f3 21px 23px, transparent 23px) center -7px / 44px 44px;
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .3)); mask-image: linear-gradient(#000, rgba(0, 0, 0, .3));
}
.how__card {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 80px;
  border: 1px solid var(--white-20); border-radius: 32px; color: var(--white);
  background: linear-gradient(180deg, #1d2a3a, #0e1318);
  box-shadow: -28px 126px 64.5px rgba(0, 0, 0, .04);
}
.how__intro { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 40px; width: 414px; } /* fica no topo enquanto os passos rolam (abaixo do header fixo) */
.how__head { display: flex; flex-direction: column; gap: 32px; }
.how__title { font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; }
.how__lead { font-size: 19.2px; line-height: 1.2; color: rgba(242, 245, 248, .7); }

.how__steps { --num: 56px; --gap: 48px; display: flex; flex-direction: column; gap: var(--gap); width: 561px; list-style: none; }
.how__steps li { position: relative; display: flex; align-items: flex-start; gap: 40px; }
/* linha da base de um ícone até o topo do próximo (acompanha a altura real de cada etapa), 1,5px como as da
   seção "Experiência": trilho apagado + azul que enche com a rolagem (--fill vem do script.js) */
.how__steps li:not(:last-child)::before,
.how__steps li:not(:last-child)::after {
  content: ""; position: absolute; top: var(--num); bottom: calc(-1 * var(--gap)); left: calc(var(--num) / 2 - .75px);
  width: 1.5px; background: var(--blue-dark);
}
.how__steps li:not(:last-child)::before { opacity: .2; }
.how__steps li:not(:last-child)::after { transform: scaleY(var(--fill, 1)); transform-origin: top; }
.how__icon { position: relative; display: flex; flex-shrink: 0; width: var(--num); height: var(--num); border-radius: 28.6%; } /* 16px em 56px, como o rx do SVG */
.how__icon svg { width: 100%; height: 100%; }
.how__steps div { display: flex; flex-direction: column; gap: 24px; }
.how__steps h3 { font-size: 30px; font-weight: 400; line-height: 1.2; }
.how__steps p { font-size: 18px; font-weight: 300; line-height: 1.2; color: rgba(242, 245, 248, .7); }

/* ===== PORTFÓLIO ===== */
/* foto escurecida de fundo; os 4 cantos claros (curvas de 199×45px, as mesmas das ondas) recortam o bloco */
.portfolio {
  --curve: 344px 45px;
  position: relative; padding: 80px 0 79px; color: var(--white);
  /* as curvas claras começam 1px acima do fundo escuro (borda da mesma cor): sem fio cinza de antialiasing
     na emenda quando a seção cai em meio pixel */
  border-block: 1px solid #f2f5f8;
  background:
    var(--curve-tl) left top / var(--curve) no-repeat border-box,
    var(--curve-tr) right top / var(--curve) no-repeat border-box,
    var(--curve-bl) left bottom / var(--curve) no-repeat border-box,
    var(--curve-br) right bottom / var(--curve) no-repeat border-box,
    radial-gradient(50% 100% at 50% 0, #1d2a3a, #151e29 50%, #0d1218) padding-box; /* mesmo fundo das outras seções escuras */
}
.portfolio__head { display: flex; flex-direction: column; gap: 40px; width: 864px; margin: 0 auto 40px; text-align: center; }
.portfolio__titles { display: flex; flex-direction: column; gap: 32px; }
.portfolio__title { font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; }
.portfolio__lead { font-size: 18px; font-weight: 300; line-height: 1.2; color: rgba(242, 245, 248, .7); }

.pf-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 40px; }
.pf-filters button {
  padding: 12px 19px; border: 1px solid var(--white-20); border-radius: 51px; background: none; cursor: pointer;
  font: inherit; font-size: 16px; line-height: 1.2; color: var(--white); white-space: nowrap;
  text-box: trim-both cap alphabetic; transition: background-color .2s, border-color .2s;
}
.pf-filters button:hover { background: rgba(242, 245, 248, .08); }
.pf-filters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #0e1318; } /* texto escuro: branco no azul claro não tem contraste */

.pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 20px; list-style: none; }
.pf-grid img { width: 100%; height: auto; aspect-ratio: 305 / 224; object-fit: cover; border-radius: 20px; }
.pf-grid .is-in { animation: pf-in .45s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pf-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ===== SOBRE ===== */
.about { position: relative; padding: 82px 0 81px; color: #0e1318; background: #f2f5f8; overflow-x: clip; }
/* grade de 44px que some até a base da seção */
.about::before {
  content: ""; position: absolute; inset: 2px 0 0; pointer-events: none; /* começa 2px abaixo: nenhuma linha colada na emenda */
  background:
    linear-gradient(90deg, transparent 21px, #ecf0f3 21px 23px, transparent 23px) center 20px / 44px 44px,
    linear-gradient(transparent 21px, #ecf0f3 21px 23px, transparent 23px) center 20px / 44px 44px;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
.about__inner { position: relative; display: flex; align-items: center; justify-content: space-between; }
.about__media { position: relative; flex: 0 0 593px; }
.about__photo { width: 100%; height: auto; border-radius: 20px; }
/* degradê escuro suave embaixo da foto: o logo branco fica legível sobre a planta clara */
.about__media::before { content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; background: linear-gradient(to top, rgba(14, 19, 24, .6), rgba(14, 19, 24, 0) 45%); }
.about__logo { position: absolute; left: 80px; bottom: 80px; width: 110px; height: 48px; }
.about__media .badge { left: 100%; width: 178px; height: 178px; }
.badge--dark text { fill: #0e1318; }
.badge__ring { transform-box: view-box; transform-origin: 50% 50%; animation: badge-spin 24s linear infinite; }
@keyframes badge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .badge__ring { animation: none; } }

.about__content { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; width: 520px; }
.about__head { display: flex; flex-direction: column; gap: 32px; }
.tag--lg { font-size: 14px; letter-spacing: 4.2px; }
.about__title { font-size: 40px; font-weight: 400; line-height: 1.2; }
.about__text { display: flex; flex-direction: column; gap: 30.6px; font-size: 18px; line-height: 1.2; color: rgba(14, 19, 24, .7); } /* = 1 linha em branco entre os parágrafos */
.about__chips { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; }
.about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.about__linkedin { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: #0e1318; text-decoration: underline; text-decoration-color: rgba(14, 19, 24, .25); text-underline-offset: 4px; }
.about__linkedin svg { flex-shrink: 0; color: var(--blue-dark); }
.about__linkedin:hover { text-decoration-color: currentColor; }
.about__chips li {
  padding: 10px; border-radius: 52px; background: rgba(15, 180, 255, .1);
  font-size: 14px; font-weight: 300; line-height: 1.2; white-space: nowrap; text-box: trim-both cap alphabetic;
}

/* ===== DÚVIDAS FREQUENTES ===== */
.faq {
  --curve: 344px 45px;
  padding: 79px 0 125px; color: #0e1318;
  background:
    var(--curve-tl) left top / var(--curve) no-repeat,
    var(--curve-tr) right top / var(--curve) no-repeat,
    linear-gradient(#fefefe, #f2f5f8);
}
.faq__head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; text-align: center; }
.faq__title { font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; }
.faq__lead { margin-bottom: 40px; font-size: 19.2px; line-height: 1.2; text-align: center; color: rgba(14, 19, 24, .7); }
/* acordeão nativo: <details name> deixa só uma aberta; a abertura anima onde há suporte (Chrome/Edge) */
.faq__list { display: flex; flex-direction: column; gap: 20px; width: 838px; margin-inline: auto; interpolate-size: allow-keywords; }
.faq__item { border-radius: 19px; background: #f2f5f8; }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .4s cubic-bezier(.65, 0, .35, 1), content-visibility .4s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.2; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary span { text-box: trim-both cap alphabetic; }
.faq__icon { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 12px; background: #0e1318; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.9px; margin: -.95px 0 0 -4.5px;
  border-radius: 1px; background: #f2f5f8; transition: rotate .3s cubic-bezier(.65, 0, .35, 1);
}
.faq__icon::after { rotate: 90deg; }
.faq__item[open] .faq__icon::before { rotate: 180deg; }
.faq__item[open] .faq__icon::after { rotate: 180deg; } /* "+" gira e vira "−" */
.faq__item p { max-width: 720px; padding: 0 20px 22px; font-size: 16px; font-weight: 300; line-height: 1.45; color: rgba(14, 19, 24, .7); }

/* ===== CONTATO ===== */
/* o card desce --overlap px por cima do rodapé */
.contact { --overlap: 275px; display: flow-root; position: relative; z-index: 1; background: #f2f5f8; } /* flow-root: a margem negativa do card encurta a seção em vez de vazar */
.contact__card {
  display: flex; margin-bottom: calc(-1 * var(--overlap)); overflow: hidden;
  position: relative; border-radius: 30px; background: #0e1318;
  box-shadow: 0 17px 36px rgba(0, 0, 0, .05), 0 66px 66px rgba(0, 0, 0, .04), 0 149px 89px rgba(0, 0, 0, .03), 0 265px 106px rgba(0, 0, 0, .01);
}
/* como no Figma: a foto (a mesma do hero, na altura do card) e o degradê cobrem o card inteiro e o painel
   branco fica por cima, com os 4 cantos arredondados mostrando a foto atrás. Em 1278px de largura interna a
   foto começa em -911px (left -71,31% do Figma); em larguras menores acompanha o centro do painel da esquerda. */
.contact__card::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: calc(25% - 1230.8px);
  background:
    linear-gradient(rgba(14, 19, 24, 0) 35.66%, rgba(14, 19, 24, .84) 54.35%, rgba(14, 19, 24, .98) 74.26%),
    url(assets/contato-bg.webp) 0 0 / auto 100% no-repeat; /* a foto anterior da hero continua no card de contato */
}
/* contorno de 1px do Figma, desenhado por cima de tudo (como o stroke "inside"): sobre o painel branco quase some */
.contact__card::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(14, 19, 24, .03); border-radius: inherit; pointer-events: none; }
.contact__intro { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 36px; padding: 80px; color: #fff; }
.contact__head { display: flex; flex-direction: column; gap: 32px; }
.contact__title { font-size: 48px; font-weight: 400; line-height: 1.2; }
.contact__text { display: flex; flex-direction: column; gap: 30.6px; font-size: 18px; line-height: 1.2; color: rgba(255, 255, 255, .7); } /* = 1 linha em branco */
.contact__text strong { font-weight: 600; color: #fff; }

.contact__form { position: relative; container-type: inline-size; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 78px 80px; /* 652px de card, como no Figma */ border: 1px solid #fff; border-radius: 27px; background: #fff; }
.field { display: flex; flex-direction: column; gap: 17px; min-width: 0; font-size: 18px; line-height: 1.2; color: rgba(14, 19, 24, .7); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field :is(input, select) {
  width: 100%; height: 54.6px; padding: 0 20px; border: 1px solid rgba(14, 19, 24, .2); border-radius: 19px; background-color: #fff;
  font: inherit; color: #0e1318; transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: rgba(14, 19, 24, .7); }
.field select { appearance: none; padding-right: 48px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.05 4.55'%3E%3Cpath d='M.525.525l3.5 3.5 3.5-3.5' fill='none' stroke='%230e1318' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 20px center / 12px no-repeat; cursor: pointer; }
.field select:has(option[value=""]:checked) { color: rgba(14, 19, 24, .7); }
.field :is(input, select):focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(15, 180, 255, .15); }
.contact__submit {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 20px;
  border: 1px solid var(--white-20); border-radius: 19px; background: var(--gradient); cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 700; line-height: 1.2; text-align: left; text-transform: uppercase; white-space: nowrap; color: var(--white); transition: filter .2s;
  font-size: min(17px, (100cqi - 92px) / 17.8); /* nunca quebra: a fonte diminui só o necessário para caber */
}
.contact__submit:hover { filter: brightness(1.1); }

/* ===== RODAPÉ ===== */
/* curvas do topo 40px mais para fora que as das outras seções (como no Figma) */
.footer {
  --curve: 344px 45px; --shift: -40px;
  padding-top: calc(275px + 112px); color: var(--white);
  border-top: 1px solid #f2f5f8; /* mesmo cuidado da emenda do Portfólio */
  background:
    var(--curve-tl) var(--shift) 0 / var(--curve) no-repeat border-box,
    var(--curve-tr) right var(--shift) top 0 / var(--curve) no-repeat border-box,
    linear-gradient(#151e29, #0e1318 680px) padding-box;
}
.footer__grid { display: grid; grid-template-columns: 37.58% 23.28% 23.28% 1fr; padding-bottom: 80px; } /* colunas começam em 481/779/1077px, como no Figma */
.footer__brand { display: flex; flex-direction: column; gap: 34px; max-width: 305px; }
.footer__logo { width: 197px; height: 86px; }
.footer__brand p { font-size: 19.2px; line-height: 1.2; color: rgba(242, 245, 248, .7); }
.footer__socials { display: flex; gap: 18px; }
.footer__social { display: flex; align-items: center; justify-content: center; width: 36.8px; height: 36.8px; border-radius: 12.27px; background: var(--gradient); transition: filter .2s, transform .2s; }
.footer__social:hover { filter: brightness(1.15); transform: translateY(-2px); }
.footer__social img { width: 18.4px; height: 18.4px; }
.footer__col { display: flex; flex-direction: column; gap: 38px; }
.footer__col:not(:last-child) { padding-right: 32px; }
.footer__title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.footer__col ul { display: flex; flex-direction: column; gap: 25px; list-style: none; font-size: 16px; font-weight: 300; line-height: 1.2; }
.footer__col li { text-box: trim-both cap alphabetic; }
.footer__col a { transition: color .2s; }
.footer__col a:hover { color: var(--blue); }
.footer__bottom { border-top: 1px solid rgba(242, 245, 248, .2); background: #090c10; }
.footer__bottom .container { display: flex; justify-content: space-between; gap: 24px; padding: 40px 0; font-size: 16px; font-weight: 300; line-height: 1.2; }

/* ===== MODAL DE SERVIÇO ("Saiba mais" dos cards; <dialog> aberto pelo script.js) ===== */
.svc-modal {
  width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0;
  border: 1px solid var(--white-20); border-radius: 28px; color: var(--white);
  background: linear-gradient(180deg, #1d2a3a, #0e1318); overscroll-behavior: contain;
}
.svc-modal::backdrop { background: rgba(14, 19, 24, .72); backdrop-filter: blur(6px); }
.svc-modal__inner { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 56px; }
.svc-modal__close {
  position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--white-20); border-radius: 50%; color: var(--white); background: rgba(242, 245, 248, .06); cursor: pointer;
}
.svc-modal__close:hover { background: rgba(242, 245, 248, .14); }
.svc-modal__title { padding-right: 48px; font-size: 34px; font-weight: 400; line-height: 1.15; letter-spacing: -.68px; }
.svc-modal p { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--white-80); }
.svc-modal .tag { color: var(--blue); }
.svc-modal__list { display: grid; gap: 20px; margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--white-20); list-style: none; }
.svc-modal__list li { position: relative; padding-left: 22px; }
.svc-modal__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.svc-modal__list h4 { margin-bottom: 6px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--white); }
.svc-modal .btn { align-self: flex-start; margin-top: 14px; }
.svc-modal[open] { animation: svc-modal-in .3s cubic-bezier(.2, .7, .3, 1); }
.svc-modal[open]::backdrop { animation: svc-modal-fade .3s; }
@keyframes svc-modal-in { from { opacity: 0; translate: 0 16px; } }
@keyframes svc-modal-fade { from { opacity: 0; } }
html:has(.svc-modal[open]) { overflow: hidden; }                                /* a página não rola por trás */
html:has(.svc-modal[open]) .svc-card::after { animation-play-state: paused; }  /* o carrossel espera o modal fechar */
@media (prefers-reduced-motion: reduce) { .svc-modal[open], .svc-modal[open]::backdrop { animation: none; } }
@media (max-width: 767px) {
  .svc-modal { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 22px; }
  .svc-modal__inner { gap: 14px; padding: 56px 20px 28px; }
  .svc-modal__close { top: 12px; right: 12px; }
  .svc-modal__title { padding-right: 0; font-size: 26px; letter-spacing: -.52px; }
  .svc-modal p { font-size: 16px; }
  .svc-modal__list { gap: 16px; padding-top: 22px; }
  .svc-modal__list h4 { font-size: 17px; }
  .svc-modal .btn { align-self: stretch; justify-content: center; }
}

/* ===== MÍDIA ABAIXO DA DOBRA =====
   Com JS (classe .js no <html>), a foto de fundo (--foto) e as fotos do carrossel dos blocos [data-perto] só
   carregam quando o bloco chega a ~1500px da tela — o script.js põe .perto. Sem JS, tudo carrega normalmente. */
.js [data-perto]:not(.perto) { --foto: none; }
.js .carousel:not(.perto) .svc-card__media > img { display: none; } /* img com position: absolute: o layout não muda */

/* ===== ENTRADA DOS CARDS AO ROLAR (classes postas pelo script.js) =====
   translate (e não transform) para não brigar com hovers que usam transform. --entra-i = posição do card no
   grupo (não é --i, que a pilha de "Por que a Aziz" já usa). */
.entra { opacity: 0; translate: 0 28px; }
.entra.entrou {
  opacity: 1; translate: none;
  transition:
    opacity .5s ease calc(var(--entra-i, 0) * 90ms),
    translate .5s ease calc(var(--entra-i, 0) * 90ms),
    transform .35s ease; /* mantém a suavidade de um eventual hover com transform */
}

/* ===== WHATSAPP FLUTUANTE ===== */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: flex; align-items: center; justify-content: center; width: 60px; height: 60px;
  border: 1px solid var(--white-20); border-radius: 50%; background: var(--gradient);
  box-shadow: 0 10px 30px rgba(10, 108, 255, .35);
  transition: transform .25s, box-shadow .25s, opacity .25s, visibility .25s;
}
.wa-float img { width: 28px; height: 28px; }
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px rgba(10, 108, 255, .45); }
.wa-float:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
/* onda sutil que pulsa de tempos em tempos */
.wa-float::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; animation: wa-pulse 3.2s ease-out infinite; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 180, 255, .5); } 45%, 100% { box-shadow: 0 0 0 16px rgba(15, 180, 255, 0); } }
/* some na barra final do rodapé (script.js) para não cobrir o "Desenvolvido por" */
.wa-float.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; } }

/* ===== RESPONSIVO ===== */
@media (max-width: 1100px) {
  h1, h2 { text-wrap: balance; }
  /* tablet: a foto (enquadrada para 1920) fica atrás do texto; escurece a esquerda para manter a leitura.
     No celular (≤767) o .hero troca o fundo inteiro pela imagem própria. */
  .hero { background-image: linear-gradient(90deg, rgba(14, 19, 24, .82), rgba(14, 19, 24, .55) 55%, rgba(14, 19, 24, 0) 82%), url(assets/hero-bg.webp); } /* sem palavra sozinha na última linha dos títulos */
  .header__toggle { display: flex; }
  .header__nav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px;
    background: rgba(14, 19, 24, .97); border: 1px solid var(--white-20); border-radius: 24px;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .header.is-open .header__nav { opacity: 1; visibility: visible; transform: none; }
  .header__nav { max-height: calc(100dvh - 110px); overflow-y: auto; }
  .header__nav > a, .nav-mega__toggle { padding: 20px 0; font-size: 17px; color: var(--white); }
  .header__nav > * + * { border-top: 1px solid rgba(242, 245, 248, .08); }
  .nav-mega__toggle { width: 100%; justify-content: space-between; }
  .mega { position: static; display: grid; grid-template-rows: 0fr; opacity: 1; transform: none; transition: grid-template-rows .3s, visibility 0s .3s; }
  .nav-mega.is-open .mega { grid-template-rows: 1fr; visibility: inherit; transition: grid-template-rows .3s; }
  .mega::before { display: none; }
  .mega__inner { min-height: 0; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .mega__grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 12px; }
  .mega__grid a { align-items: center; gap: 12px; padding: 9px 0; border-radius: 0; }
  .mega__grid a:hover, .mega__grid a:focus-visible { background: none; }
  .mega__icon { width: 32px; height: 32px; border-radius: 10px; }
  .mega__icon svg { width: 18px; height: 18px; }
  .mega__text { padding-top: 0; }
  .mega__text strong { font-size: 15px; font-weight: 500; color: var(--white-80); }
  .mega__text small, .mega__foot { display: none; }
  .hero__slides { display: none; }

  .experience__card { padding: 64px 40px; }
  /* 2×2 com as linhas saindo do centro (caminhos calculados no script.js) */
  .experience__map { position: relative; padding-top: 72px; }
  .experience__connectors { position: absolute; inset: 0; width: auto; height: auto; margin: 0; }
  .experience__connectors svg { inset: 0; width: 100%; height: 100%; }
  .experience__connectors .dots-end { display: none; }
  .experience__list { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 44px; }

  .problems { flex-direction: column; align-items: stretch; gap: 56px; }
  .problems__media { width: 100%; max-width: 630px; margin-inline: auto; }
  .problems__content { width: 100%; }

  .why__head { width: auto; }
  .why__row--top { grid-template-columns: 1fr; }
  .why-card--photo { background-size: cover, cover; background-position: center, center; background-origin: border-box; }

  .cta__inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .cta__content { width: 100%; margin-top: 0; }
  .cta__photo { width: 100%; height: auto; aspect-ratio: 628 / 415; }

  .visits__inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .visits__map { flex: none; height: 380px; }
  .visits__content { width: 100%; margin-top: 0; }

  .how__card { flex-direction: column; gap: 56px; padding: 56px 48px; }
  .how__intro, .how__steps { width: 100%; }
  .how__intro { position: static; } /* em coluna única não há o que acompanhar */

  .portfolio__head { width: auto; }
  .pf-grid { grid-template-columns: repeat(2, 1fr); }

  .about__inner { flex-direction: column; gap: 64px; }
  .about__media { flex: none; width: 100%; max-width: min(593px, 100vw - 220px); } /* deixa espaço para o selo na borda direita */
  .about__content { width: 100%; }

  .faq__list { width: 100%; }

  .contact__card { flex-direction: column; }
  .contact__card::before { display: none; }
  .contact__intro {
    min-height: 480px; padding: 56px 48px;
    --foto: url(assets/about-photo.webp);
    background:
      linear-gradient(rgba(14, 19, 24, 0) 35.66%, rgba(14, 19, 24, .84) 54.35%, rgba(14, 19, 24, .98) 74.26%),
      var(--foto) center / cover;
  }
  .contact__form { padding: 56px 48px; border-radius: 27px 27px 0 0; } /* a base arredonda junto com o card */

  .footer__grid { grid-template-columns: repeat(3, auto); gap: 56px 32px; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 767px) {
  .header__inner { height: 76px; }
  .header__logo img { width: 92px; height: 40px; }
  .header__cta { display: none; } /* no mobile o header fica só com logo + menu */
  .tag--wide { letter-spacing: 2.4px; } /* "Problemas que a gente encontra" em 1 linha (abaixo de 360px: bloco max-width 359px) */

  /* imagem própria do mobile (Figma "Aziz-bg-mobile"), presa embaixo; o padding-bottom abre espaço para a pessoa */
  .hero { height: auto; padding: 116px 0 96vw; background: #0e1318 url(assets/hero-bg-mobile.webp) no-repeat center bottom / cover; }
  .hero__inner { padding-top: 0; }
  .hero__content { width: 100%; gap: 16px; margin-left: 0; align-items: center; text-align: center; }
  .hero__content .tag { margin-bottom: 0; font-size: 11px; letter-spacing: 1.2px; line-height: 1.6; }
  .hero__tag-sep { display: block; font-size: 0; } /* quebra a tag em 2 linhas no "·" */
  .hero__title { font-size: clamp(28px, 8.6vw, 40px); letter-spacing: -.02em; }
  .hero__lead { max-width: 340px; margin-top: 8px; font-size: 16px; }
  .hero__actions { flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }
  .btn { font-size: 15px; }
  .hero__scroll { top: auto; bottom: 107.5px; }
  .hero__scroll-line { top: auto; bottom: 40px; } /* termina na borda do card, que sobe 40px */

  :is(.hero__lead, .experience__list p, .problems__lead, .why__lead, .why-card p, .cta__lead) { line-height: 1.45; }

  .experience { padding-bottom: 56px; }
  .experience__card { margin-top: -40px; padding: 48px 24px; border-radius: 24px; }
  .experience__title { width: auto; font-size: 30px; letter-spacing: -.6px; }
  .experience__card { padding-inline: 16px; }
  .experience__list h3 { font-size: 18px; }
  .experience__list p { font-size: 14px; }

  .problems { gap: 40px; padding-bottom: 56px; }
  .problems__media { height: 420px; gap: 10px; }
  .badge { width: 160px; height: 160px; }
  .problems__title { font-size: 30px; }
  .problems__title br { display: none; }
  .problems__lead { font-size: 16px; }
  .problems__list { grid-template-columns: 1fr; gap: 16px; }
  .problems__content { gap: 24px; }
  .problems__content .tag { margin-bottom: -8px; }
  .problems__content .btn, .problems__list { margin-top: 8px; }

  .why { padding: 64px 0; border-radius: 32px 32px 0 0; }
  .why__title { font-size: 30px; letter-spacing: -.6px; }
  .why__lead { font-size: 16px; }
  .why__head { gap: 16px; margin-bottom: 32px; }
  .why__head .tag { margin-bottom: 0; }
  .why__lead { margin-top: 8px; }
  .why__row { gap: 16px; }
  .why__row--top { margin-bottom: 16px; }
  .why-card > p { margin-top: -8px; }
  .why-card--row div { gap: 16px; }
  .why__row--bottom { grid-template-columns: 1fr; }
  .why-card { padding: 24px; }
  .why-card--photo { height: auto; min-height: 298px; }
  .why-card--row { flex-direction: column; }
  /* ondas no celular: curva compacta (metade do tamanho) com o degrau colado na borda da tela */
  .why__wave { width: 1213.25px; height: 22.5px; right: -408.5px; } /* curva de W-109,5 a W-10px */

  .cta { padding: 64px 0; }
  .cta__title { font-size: 30px; letter-spacing: -1px; }
  .cta__lead { font-size: 16px; }
  .cta__content { gap: 24px; }
  .cta__head { gap: 16px; }
  .cta__content .btn { margin-top: 8px; }
  /* texto centralizado e botão depois da foto: o bloco de texto "abre" dentro da coluna e o order reposiciona */
  .cta__inner { align-items: center; gap: 24px; text-align: center; }
  .cta__content { display: contents; }
  .cta__photo { order: 1; margin-top: 8px; }
  .cta__content .btn { order: 2; }

  .services { padding: 64px 0 120px; }
  .services__wave { display: none; }
  /* degrau na borda esquerda, pintado com o mesmo degradê do topo da seção (a onda do desktop tem outra escala) */
  .services::before {
    content: ""; position: absolute; bottom: calc(100% - 1px); left: 0; width: 109.5px; height: 23.5px; /* 1px por dentro da seção: sem emenda */
    background: radial-gradient(50vw 2000px at 50vw calc(100% - 1px), #1d2a3a, #151e29 50%, #0d1218); /* centro no topo da seção */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109.5 23.5'%3E%3Cpath d='M0 0H10C56.45 0 63.05 22.5 109.5 22.5V23.5H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109.5 23.5'%3E%3Cpath d='M0 0H10C56.45 0 63.05 22.5 109.5 22.5V23.5H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  }
  .services__head { gap: 16px; margin-bottom: 32px; }
  .services__titles { gap: 16px; }
  .services__title { font-size: 30px; letter-spacing: -1px; }
  .services__lead { margin-top: 8px; font-size: 16px; line-height: 1.45; }
  .carousel { --card: 240px; --active: calc(100vw - 72px); --gap: 12px; --h: 460px; }
  .carousel { --pad: 23px; }
  .svc-card h3 { --w: calc(var(--active) - 2 * var(--pad) - 2px); }

  .visits { margin-top: -40px; padding: 64px 0; border-radius: 32px 32px 0 0; }
  .visits__map { height: 320px; border-radius: 20px; }
  .visits__content { gap: 24px; }
  .visits__head { gap: 16px; }
  .visits__title { font-size: 30px; letter-spacing: -1px; }
  .visits__lead { font-size: 16px; line-height: 1.45; }
  .visits__content .btn { margin-top: 8px; }

  .how { padding-bottom: 56px; }
  .how__card { gap: 40px; padding: 40px 20px; border-radius: 24px; }
  .how__intro { gap: 24px; }
  .how__head { gap: 16px; }
  .how__title { font-size: 30px; letter-spacing: -.6px; }
  .how__lead { font-size: 16px; line-height: 1.45; }
  .how__steps { --num: 48px; --gap: 40px; }
  .how__steps li { gap: 16px; }
  .how__steps div { gap: 12px; }
  .how__steps h3 { font-size: 22px; }
  .how__steps p { font-size: 16px; line-height: 1.45; }

  /* curvas compactas (mesma curva, metade do tamanho, quase sem trecho reto): os degraus ficam nos cantos */
  :root {
    --curve-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109.5 22.5'%3E%3Cpath fill='%23f2f5f8' d='M0 0H109.5C63.05 0 56.45 22.5 10 22.5H0Z'/%3E%3C/svg%3E");
    --curve-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109.5 22.5'%3E%3Cpath fill='%23f2f5f8' d='M109.5 0H0C46.45 0 53.05 22.5 99.5 22.5H109.5Z'/%3E%3C/svg%3E");
    --curve-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109.5 22.5'%3E%3Cpath fill='%23f2f5f8' d='M0 22.5H109.5C63.05 22.5 56.45 0 10 0H0Z'/%3E%3C/svg%3E");
    --curve-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109.5 22.5'%3E%3Cpath fill='%23f2f5f8' d='M109.5 22.5H0C46.45 22.5 53.05 0 99.5 0H109.5Z'/%3E%3C/svg%3E");
  }
  .portfolio { --curve: 109.5px 22.5px; padding: 63px 0; }
  .portfolio__head { gap: 16px; margin-bottom: 32px; }
  .portfolio__titles { gap: 16px; }
  .portfolio__title { font-size: 30px; letter-spacing: -.6px; }
  .portfolio__lead { margin-top: 8px; font-size: 16px; line-height: 1.45; }
  .pf-filters { gap: 10px; margin-bottom: 32px; }
  .pf-filters button { padding: 11px 13px; font-size: 14px; }
  .pf-grid { gap: 12px; }
  .pf-grid img { border-radius: 14px; }

  .about { padding: 64px 0; }
  .about__inner { gap: 88px; } /* o selo fica na emenda entre a foto e o texto */
  .about__media { max-width: 593px; } /* no celular o selo fica embaixo: sem limite extra */
  .about__media .badge { left: 50%; top: 100%; width: 120px; height: 120px; }
  .about__logo { left: 20px; bottom: 20px; width: 80px; height: 35px; }
  .about__head { gap: 16px; }
  .about__title { font-size: 30px; }
  .about__content { gap: 24px; }
  .about__text { gap: 16px; font-size: 16px; line-height: 1.45; }
  .about__chips { gap: 8px; }
  .about__content .btn { margin-top: 8px; }

  .faq { --curve: 109.5px 22.5px; padding: 64px 0 96px; }
  .faq__head { gap: 16px; margin-bottom: 24px; }
  .faq__title { font-size: 30px; letter-spacing: -.6px; }
  .faq__lead { margin-bottom: 32px; font-size: 16px; line-height: 1.45; }
  .faq__list { gap: 12px; }
  .faq__item summary { gap: 16px; padding: 16px 16px 16px 20px; font-size: 16px; }
  .faq__item p { padding-bottom: 20px; font-size: 15px; }

  .contact { --overlap: 160px; }
  .contact__card { border-radius: 24px; }
  .contact__intro { min-height: 420px; gap: 24px; padding: 32px 20px; }
  .contact__head { gap: 16px; }
  .contact__title { font-size: 32px; }
  .contact__text { gap: 16px; font-size: 16px; line-height: 1.45; }
  .contact__form { gap: 20px; padding: 32px 20px; border-radius: 22px 22px 0 0; }
  .field { gap: 12px; font-size: 16px; }
  .field-row { grid-template-columns: 1fr; gap: 20px; }
  .field :is(input, select) { height: 52px; border-radius: 16px; }
  .contact__submit { gap: 10px; padding: 12px 14px; font-size: min(15px, (100cqi - 70px) / 17.8); border-radius: 16px; }
  .contact__submit img { width: 28px; height: 28px; }
  .footer { --curve: 109.5px 22.5px; --shift: -5px; padding-top: calc(160px + 63px); }
  .footer__grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
  .footer__brand { gap: 24px; }
  .footer__logo { width: 160px; height: 70px; }
  .footer__brand p { font-size: 17px; line-height: 1.45; }
  .footer__col { gap: 24px; }
  .footer__col ul { gap: 20px; }
  .footer__bottom .container { flex-direction: column; gap: 14px; padding: 28px 0; font-size: 14px; }

  .wa-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-float img { width: 26px; height: 26px; }
  .svc-card__media { padding: 15px var(--pad); }
}

/* telas bem estreitas (≤359px): o botão principal encolhe só o necessário para caber sem quebrar */
@media (max-width: 359px) {
  .btn--primary { gap: 10px; padding-inline: 14px; font-size: 13.5px; }
  .btn--primary img { width: 28px; height: 28px; }
  .tag--wide { letter-spacing: 1.2px; }
}

/* ===== "Por que a Aziz" no celular (≤600px): pilha de cards (fichário) =====
   Os 6 cards estão em 3 pais diferentes (.why__row--top, .why__stack, .why__row--bottom); com display: contents
   eles viram irmãos dentro do .container, que passa a ser o limite do sticky. Cada card gruda 16px abaixo do
   anterior: card i → top = topo + i×16px; margin-bottom = D − i×16px + 16px de espaço visível; o card seguinte
   recebe margin-top = −(D − i×16px). Com D = (6 − 1) × 16 = 80px, "top + margin-bottom" é igual em todos e a pilha
   solta inteira de uma vez. Sem z-index: a ordem do HTML já põe o card seguinte por cima. */
@media (max-width: 600px) {
  .why .container { display: flow-root; } /* a margem do último card fica dentro do container (conta no limite do sticky) */
  .why__row, .why__stack { display: contents; }
  .why-card {
    --topo-pilha: 96px; /* header fixo no celular depois de rolar (12px + 68px) + 16px de respiro */
    position: sticky; top: calc(var(--topo-pilha) + var(--i) * 16px);
    height: var(--altura-card, auto); /* altura do maior card (script.js) */
    margin-top: calc((var(--i) - 1) * 16px - 80px);
    margin-bottom: calc(96px - var(--i) * 16px);
    box-shadow: 0 -6px 16px rgba(14, 19, 24, .25); /* sombra para cima */
  }
  .why-card--photo { --i: 0; margin-top: 0; min-height: 0; } /* sem o mínimo de 298px: a altura vem do conteúdo */
  .why__stack > .why-card:nth-child(1) { --i: 1; }
  .why__stack > .why-card:nth-child(2) { --i: 2; }
  .why__row--bottom > .why-card:nth-child(1) { --i: 3; }
  .why__row--bottom > .why-card:nth-child(2) { --i: 4; }
  .why__row--bottom > .why-card:nth-child(3) { --i: 5; }
  .why { padding-bottom: 48px; } /* + os 16px de margem do último card = os mesmos 64px de antes */
}

/* ===== BLOG (blog/index.html) ===== */
.blog-hero { padding: 200px 0 96px; color: var(--white); background: linear-gradient(180deg, #1d2a3a, #0e1318); }
.blog-hero__title { max-width: 760px; margin-top: 24px; font-size: 56px; font-weight: 400; line-height: 1.1; letter-spacing: -1.12px; }
.blog-hero__lead { max-width: 640px; margin-top: 24px; font-size: 19.2px; line-height: 1.4; color: var(--white-80); }
.blog-list { padding: 96px 0 120px; background: #f2f5f8; }
.footer--solo { padding-top: 140px; } /* sem o card de contato por cima (na home ele ocupa o topo do rodapé) */
.blog-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 640px; font-size: 18px; line-height: 1.45; color: rgba(14, 19, 24, .7); }
@media (max-width: 767px) {
  .blog-hero { padding: 140px 0 64px; }
  .blog-hero__title { font-size: 34px; letter-spacing: -.68px; }
  .blog-hero__lead { font-size: 16px; }
  .blog-list { padding: 56px 0 88px; }
  .blog-empty { font-size: 16px; }
  .footer--solo { padding-top: 88px; }
}