/* ============================================================
   INDEX.CSS — Design System CopyWrite
   Estética Editorial / Brutalista | Fraunces + JetBrains Mono
   ============================================================ */

/* -------------------------------------------------------
   1. Fonts — importadas via head.php (não-bloqueante)
   ------------------------------------------------------- */

.font-mono {
  font-family: "JetBrains Mono", monospace;
}
.font-sans {
  font-family: "Inter", sans-serif;
  letter-spacing: -0.02em;
}

/* -------------------------------------------------------
   2. Textura de Ruído (Paper Noise)
   — position:absolute + will-change evita repaint no scroll
   ------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  will-change: transform; /* Promove para layer de GPU, sem repaint no scroll */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------
   3. Blueprint Grid Background
   ------------------------------------------------------- */
.bg-blueprint {
  background-image:
    linear-gradient(to right, rgba(10, 10, 10, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* -------------------------------------------------------
   4. Animação Cinematográfica (Clip-Path Reveal)
   ------------------------------------------------------- */
@keyframes clipReveal {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transform: translateY(40px);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateY(0);
  }
}

.reveal-clip {
  animation: clipReveal 0.72s cubic-bezier(0.77, 0, 0.175, 1) both;
  animation-play-state: paused;
  will-change: clip-path, transform;
}

/* -------------------------------------------------------
   5. Index Row (Catálogo Técnico)
   — transition: all substituído por propriedades específicas
   ------------------------------------------------------- */
.index-row {
  transition:
    background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    padding-right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.index-row:hover {
  background-color: #0a0a0a;
  color: #f2f2ed;
  padding-left: 2rem;
  padding-right: 2rem;
}
.index-row:hover .index-icon {
  color: #0e67e4;
  transform: scale(1.1) rotate(-5deg);
}

/* -------------------------------------------------------
   6. App Wrapper (Fade-in Orquestrado)
   ------------------------------------------------------- */
#app-wrapper {
  transition: opacity 0.45s ease-out;
}

/* -------------------------------------------------------
   7. Scroll Reveal (Fade Up)
   — will-change reduz custo de layout durante animação
   ------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto; /* Libera a layer após animação */
}

/* -------------------------------------------------------
   8. Pain Card (Problema do Cliente)
   — transition: all → específico
   ------------------------------------------------------- */
.pain-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(10, 10, 10, 0.1);
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.pain-item:hover {
  border-color: #0e67e4;
  background: rgba(14, 103, 228, 0.03);
}

/* -------------------------------------------------------
   9. FAQ Accordion
   ------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
  overflow: hidden;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  color: #0a0a0a;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}
.faq-question:hover {
  color: #0e67e4;
}
.faq-question svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  color: rgba(10, 10, 10, 0.3);
}
.faq-item.active .faq-question svg {
  transform: rotate(180deg);
  color: #0e67e4;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.active .faq-answer {
  max-height: 300px;
}
.faq-answer-inner {
  padding: 0 0 1.5rem 0;
  font-family: "Inter", sans-serif;
  color: rgba(10, 10, 10, 0.6);
  font-size: 0.9375rem;
  line-height: 1.7;
  letter-spacing: -0.02em;
}

/* -------------------------------------------------------
   10. Testimonial Card
   ------------------------------------------------------- */
.testimonial-card {
  border: 1px solid rgba(10, 10, 10, 0.1);
  padding: 2rem;
  position: relative;
  transition: border-color 0.3s ease;
}
.testimonial-card:hover {
  border-color: #0e67e4;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  font-size: 4rem;
  font-weight: 700;
  color: rgba(14, 103, 228, 0.08);
  line-height: 1;
  font-family: Georgia, serif;
}

/* -------------------------------------------------------
   11. Scrollbar
   ------------------------------------------------------- */
::selection {
  background: #0e67e4;
  color: white;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f2f2ed;
}
::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 10, 0.15);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 10, 10, 0.3);
}

/* -------------------------------------------------------
   12. Check Item (Diferenciais)
   ------------------------------------------------------- */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
.check-item:last-child {
  border-bottom: none;
}

/* -------------------------------------------------------
   13. Process Card
   — transition: all → específico
   ------------------------------------------------------- */
.process-card {
  border: 1px solid rgba(10, 10, 10, 0.1);
  padding: 2rem;
  transition:
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.process-card:hover {
  border-color: #0e67e4;
  transform: translateY(-4px);
}
.process-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #0e67e4;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-card:hover::after {
  transform: scaleX(1);
}

/* -------------------------------------------------------
   14. Portfolio Card
   ------------------------------------------------------- */
.portfolio-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  cursor: pointer;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.5s ease;
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 16px;
}
.portfolio-card:hover {
  transform: scale(1.03);
  border-color: #0e67e4;
  box-shadow: 0 20px 60px rgba(14, 103, 228, 0.12);
}
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.5) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

/* -------------------------------------------------------
   15. Content Visibility — seções off-screen
   Reduz drasticamente o trabalho de Style & Layout
   ------------------------------------------------------- */
section {
  content-visibility: auto;
}

/* Hero (primeira seção visível) NÃO deve ter content-visibility */
section:first-of-type,
section[id="servicos"],
.hero-section {
  content-visibility: visible;
}

/* -------------------------------------------------------
   16. Magnetic Buttons — GPU layer durante interação
   ------------------------------------------------------- */
.magnetic-btn {
  transform: translate(0, 0); /* Força criação de contexto de composição */
}

/* -------------------------------------------------------
   17. Preferências de Acessibilidade
   ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-up {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------
   18. Inline Styles Migrated from PHP files
   ------------------------------------------------------- */

/* From navbar.php */
#mobile-menu-btn.open {
  border-color: transparent;
  background: transparent;
}
#mobile-menu-btn.open .line-1 {
  transform: translateY(6.5px) rotate(45deg);
  background-color: #ffffff !important;
}
#mobile-menu-btn.open .line-2 {
  opacity: 0;
  transform: scaleX(0);
}
#mobile-menu-btn.open .line-3 {
  transform: translateY(-6.5px) rotate(-45deg);
  background-color: #ffffff !important;
}

/* From footer.php */
.hover-w-4 { width: 0px; }
.w-inline-block:hover .hover-w-4 { width: 12px; margin-right: 4px; }

/* From index.php (Beam Animation) */
.cw-beam-line {
  stroke-dasharray: 400 4000;
  stroke-dashoffset: 4000;
  opacity: .65;
  animation: flyBeam 14s linear infinite;
}

@keyframes flyBeam {
  0%, 45% { stroke-dashoffset: 4000; }
  90%, 100% { stroke-dashoffset: -400; }
}

/* From index.php (Timeline Animation) */
@keyframes timeline {
  0% {
      transform: translateX(-100%);
      opacity: 0;
  }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% {
      transform: translateX(500%);
      opacity: 0;
  }
}

/* -------------------------------------------------------
   19. Hero Mobile Typography Override (Fluid)
   Garante escala máxima sem JIT compiler limitations
   ------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-title-main {
      font-size: 15.5vw !important;
      letter-spacing: -0.05em !important;
  }
  .hero-title-italic {
      font-size: 13vw !important;
  }
}

/* -------------------------------------------------------
   20. Screen-reader Only (Acessibilidade W3C)
   ------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Conteúdo acessível mesmo quando as interações não carregam. */
#app-wrapper { visibility: visible; opacity: 1; }
.reveal-clip { animation-play-state: running; }
.reveal-up { opacity: 1; transform: none; }
.faq-answer { max-height: none; }
.faq-item.active .faq-answer { max-height: none; }
.faq-answer[hidden] { display: none; }
:where(a, button, [tabindex]):focus-visible { outline: 3px solid #0E67E4; outline-offset: 5px; }
#portfolio { scroll-margin-top: 110px; }
.magnetic-btn { font-size: 12px; letter-spacing: .06em; min-height: 44px; }
[aria-labelledby="metrics-heading"] .font-mono { font-size: 13px; letter-spacing: .025em; line-height: 1.6; color: #50504b; }

/* Navegação mais leve, com espaço para os projetos em telas intermediárias. */
#main-nav { transition-duration: 400ms; }
#main-nav.scrolled { max-width: 1120px; border-radius: 24px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
#main-nav .nav-projects:hover { color: #0e67e4; }
#main-nav.scrolled #mobile-menu-btn span { background-color:#fff; }
#main-nav.scrolled #mobile-menu-btn { border-color:#ffffff30; background:#ffffff0d; }
#main-nav > div > .hidden.md\:flex { gap: clamp(14px, 2vw, 28px); }
#main-nav a { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) {
  #main-nav > div { padding-left: 20px; padding-right: 20px; }
  #main-nav > div > .hidden.md\:flex { font-size: 14px; }
  #main-nav a[target="_blank"] { padding-left: 16px; padding-right: 16px; }
  #main-nav img { max-width: 125px; height: auto; }
}
@media (max-height: 600px) {
  #mobile-menu { overflow-y: auto; justify-content: flex-start; padding: 80px 24px 24px; }
  #mobile-menu > div { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-beam-line { animation: none; opacity: 0; }
  #main-nav, #main-nav > div { transition: none; }
}
.contact-next-step { font-size: 14px; line-height: 1.6; color: #50504b; margin-top: 16px; }
.portfolio-overlay { opacity: 1; transform: none; }
.portfolio-overlay span:last-child { opacity: 1; transform: none; }
@media (max-width: 767px) {
  #portfolio { padding-top: 64px; padding-bottom: 64px; }
  .hero-title-main { font-size: clamp(2.75rem, 12vw, 4.5rem); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.metrics-grid { max-width: 1400px; margin: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.portfolio-card { height: auto; aspect-ratio: auto; display: flex; flex-direction: column; }
.portfolio-card > div:first-child { height: 180px; min-height: 180px; }
.portfolio-overlay { position: relative; inset: auto; flex: 1; background: #111; }
.error-page { max-width: 850px; margin: auto; padding: 160px 24px 96px; min-height: 70vh; font-family: Inter,sans-serif; }
.error-code { color: #0E67E4; font-size: 64px; }
.error-page h1 { font-size: clamp(32px,6vw,52px); line-height: 1.1; margin: 20px 0; }
.error-page > p:not(.error-code) { color: #50504b; font-size: 18px; line-height: 1.6; }
.error-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.error-links a { background: #0E67E4; color: white; border-radius: 28px; padding: 14px 22px; }
.fallback-nav { position: relative; z-index: 51; padding: 90px 24px 16px; display: flex; gap: 24px; background: white; }
@media(max-width: 600px) { .metrics-grid { grid-template-columns: 1fr; } }

/* O painel acompanha o conteúdo em vez de recortá-lo em uma altura fixa. */
#hero-dashboard { min-width: 0; }
#hero-dashboard [role="tabpanel"] { height: auto; min-height: 500px; }
#hero-dashboard [role="tabpanel"] > * { flex-shrink: 0; min-width: 0; }
#hero-dashboard [role="tab"] { min-height: 44px; white-space: nowrap; }
#hero-dashboard [role="tab"]:focus-visible { outline: 3px solid #0E67E4; outline-offset: 3px; }
#hero-dashboard .toggle-bg { flex-shrink: 0; }
@media (max-width: 1023px) {
  #hero-dashboard > div { transform: none; }
  #hero-dashboard [role="tabpanel"] { min-height: 0; padding: 20px; }
  #hero-dashboard [role="tabpanel"] > .grid { gap: 12px; }
  #hero-dashboard [role="tabpanel"] > .grid > div { padding: 16px; }
  #dash-content-overview > .grid > div > div:first-child { flex-direction: column; gap: 8px; }
  #dash-content-overview > .grid > div > div:first-child > span { white-space: nowrap; }
  #dash-content-overview > .grid > div > div:first-child > p { min-height: 32px; }
  #hero-dashboard [role="tabpanel"] .text-5xl { font-size: 38px; }
  #hero-dashboard [role="tabpanel"] .text-3xl { font-size: 26px; }
  #hero-dashboard [role="tabpanel"] .flex-1 { min-width: 0; }
  #syncStatus { flex-shrink: 0; }
  #dash-content-overview > div:last-child .flex-1 > div:first-child { flex-wrap: wrap; gap: 6px; }
  #hero-dashboard [role="tabpanel"] > .grid .absolute.opacity-0 { display: none; }
}
@media (max-width: 600px) {
  #hero-dashboard > div > div:first-child { padding: 14px 16px 0; flex-direction: column; align-items: stretch; gap: 8px; }
  #hero-dashboard > div > div:first-child > div:first-child { gap: 6px; }
  #hero-dashboard > div > div:first-child > div:first-child > div { width: 9px; height: 9px; }
  #hero-dashboard [role="tablist"] { width: 100%; justify-content: space-between; gap: 8px; letter-spacing: .03em; color: #62625e; }
  #hero-dashboard [role="tab"] > span[id] { bottom: 0; }
  #hero-dashboard [role="tabpanel"] { padding: 16px; }
  #hero-dashboard [role="tabpanel"] > div:not(.grid) { padding: 16px; }
  #dash-content-overview > div:nth-child(2) > div:first-child { flex-wrap: wrap; gap: 10px; }
  #dash-content-overview > div:nth-child(2) > div:last-child { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; letter-spacing: .02em; line-height: 1.6; }
  #dash-content-overview > div:last-child > div { gap: 12px; align-items: flex-start; }
  #hero-dashboard [role="switch"] { gap: 12px; }
  #hero-dashboard [role="switch"] > div:first-child { gap: 10px; min-width: 0; }
  #hero-dashboard [role="switch"] > div:first-child > div:first-child { display: none; }
  #hero-dashboard [role="tabpanel"] .font-mono { letter-spacing: .02em; }
  #hero-dashboard [role="tabpanel"] .text-3xl { font-size: 22px; }
  #dash-content-analytics > div:first-child > div:nth-child(2) { gap: 8px; padding: 0; }
}
.case-section { padding: 96px 24px; background: #fff; }
.case-container { max-width: 1400px; margin: auto; }
.case-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.case-eyebrow { color: #0E67E4; font: 12px "JetBrains Mono", monospace; letter-spacing: .12em; margin-bottom: 20px; }
.case-heading h2 { font: 500 clamp(32px,4vw,52px)/1.1 Inter,sans-serif; letter-spacing: -.04em; }
.case-heading h2 em { color: #0E67E4; font-weight: 300; }
.case-heading > p { max-width: 350px; color: #62625e; font: 16px/1.7 Inter,sans-serif; }
.case-showcase { display: grid; gap: 24px; }
.case-featured { display: grid; grid-template-columns: minmax(320px,.78fr) minmax(0,1.22fr); min-height: 580px; overflow: hidden; border-radius: 28px; color: #fff; background: #071a37; text-decoration: none; box-shadow: 0 30px 80px rgba(7,26,55,.14); }
.case-featured-copy { display: flex; flex-direction: column; padding: 42px; background: radial-gradient(circle at 15% 15%,rgba(14,103,228,.32),transparent 34%),linear-gradient(145deg,#071a37,#0a254d); }
.case-meta,.case-secondary-top { display: flex; justify-content: space-between; gap: 20px; font: 10px/1.5 "JetBrains Mono",monospace; letter-spacing: .1em; color: rgba(255,255,255,.58); }
.case-featured-logo { width: auto; height: 62px; max-width: 180px; object-fit: contain; margin: 72px 0 28px; }
.case-featured h3 { font: 500 clamp(28px,2.6vw,43px)/1.08 Inter,sans-serif; letter-spacing: -.045em; }
.case-featured-copy > p { max-width: 480px; margin: 22px 0; color: rgba(255,255,255,.68); font: 15px/1.75 Inter,sans-serif; }
.case-capabilities { display: flex; flex-wrap: wrap; gap: 8px; }
.case-capabilities span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.82); font: 10px "JetBrains Mono",monospace; text-transform: uppercase; letter-spacing: .08em; }
.case-featured-link,.case-secondary-link { display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); color: #fff; font: 500 14px Inter,sans-serif; }
.case-featured-link span,.case-secondary-link span { font-size: 24px; transition: transform .25s ease; }
.case-featured:hover .case-featured-link span,.case-secondary:hover .case-secondary-link span { transform: translate(4px,-4px); }
.case-featured-visual { position: relative; min-width: 0; padding: 70px 0 0 50px; background: radial-gradient(circle at 70% 25%,rgba(15,205,243,.16),transparent 30%),#eef3f8; overflow: hidden; }
.case-browser-bar { position: absolute; z-index: 2; top: 31px; left: 50px; right: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 12px 0 0; color: #637087; background: #fff; font: 10px "JetBrains Mono",monospace; box-shadow: 0 6px 18px rgba(10,10,10,.06); }
.case-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }.case-browser-bar i:nth-child(2){background:#febc2e}.case-browser-bar i:nth-child(3){background:#28c840}.case-browser-bar b{margin-left:12px;font-weight:400}
.case-featured-visual > img { width: calc(100% + 170px); max-width: none; height: calc(100% + 20px); object-fit: cover; object-position: left top; border-radius: 0; box-shadow: -30px 30px 60px rgba(7,26,55,.18); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.case-featured:hover .case-featured-visual > img { transform: translate(-8px,-4px); }
.case-secondary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.case-secondary { position: relative; display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 0 28px; min-height: 330px; overflow: hidden; padding: 30px; border-radius: 24px; color: #fff; text-decoration: none; background: #21172b; }
.case-secondary-green { background: #0c2925; }
.case-secondary::after { content:""; position:absolute; width:260px; height:260px; right:-100px; top:-130px; border-radius:50%; background:rgba(168,85,247,.16); filter:blur(5px); }.case-secondary-green::after{background:rgba(25,235,64,.1)}
.case-secondary-top { position: relative; z-index: 1; grid-column: 1/-1; }
.case-secondary-brand { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; align-self: stretch; margin-top: 30px; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.05); }
.case-secondary-brand img { width: auto; height: auto; max-width: 100%; max-height: 90px; object-fit: contain; }
.case-secondary-copy { position: relative; z-index: 1; align-self: center; padding-top: 30px; }
.case-secondary-copy h3 { font: 500 clamp(23px,2vw,31px)/1.15 Inter,sans-serif; letter-spacing: -.035em; }
.case-secondary-copy p { margin: 14px 0; color: rgba(255,255,255,.62); font: 14px/1.65 Inter,sans-serif; }
.case-secondary-copy > span { color: rgba(255,255,255,.46); font: 10px "JetBrains Mono",monospace; text-transform: uppercase; letter-spacing: .07em; }
.case-secondary-link { position: relative; z-index: 1; grid-column: 1/-1; margin-top: 24px; }
.case-history { margin-top: 32px; padding: 28px 32px; border: 1px solid #dcdcd5; border-radius: 20px; display: flex; align-items: center; justify-content: space-between; gap: 40px; font-family: Inter,sans-serif; background: #f7f7f3; }
.case-history p { display: flex; align-items: center; gap: 22px; max-width: 650px; color: #62625e; font-size: 14px; line-height: 1.6; }
.case-history p > span:last-child { border-left: 1px solid #d4d4cc; padding-left: 22px; }.case-history strong{display:block;color:#0a0a0a;font-weight:500}
.case-history-number { color:#0E67E4; font-size: 46px; line-height: 1; letter-spacing: -.06em; }
.case-history > a { padding: 12px 0; color: #0E67E4; font-size: 14px; font-weight: 500; white-space: nowrap; }
@media(max-width: 1050px) { .case-featured { grid-template-columns: 1fr; }.case-featured-copy{min-height:510px}.case-featured-visual{height:440px}.case-secondary{grid-template-columns:120px minmax(0,1fr)} }
@media(max-width: 760px) { .case-section { padding: 70px 20px; }.case-heading{display:block;margin-bottom:32px}.case-heading>p{margin-top:20px}.case-secondary-grid{grid-template-columns:1fr}.case-history{align-items:flex-start;flex-direction:column;gap:16px} }
@media(max-width: 520px) { .case-featured{min-height:0;border-radius:22px}.case-featured-copy{min-height:500px;padding:28px}.case-meta span:last-child{display:none}.case-featured-logo{margin:55px 0 24px}.case-featured-visual{height:300px;padding:55px 0 0 22px}.case-browser-bar{top:22px;left:22px}.case-featured-visual>img{width:560px;height:340px}.case-secondary{grid-template-columns:1fr;min-height:0;padding:25px}.case-secondary-brand{height:145px;margin-top:25px}.case-secondary-copy{padding-top:24px}.case-history{padding:24px}.case-history p{align-items:flex-start}.case-history p>span:last-child{padding-left:16px}.case-history-number{font-size:40px}.case-history>a{white-space:normal} }
.service-demo-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 30px; overflow: hidden; border: 1px solid #deded8; border-radius: 20px; color: #0a0a0a; text-decoration: none; background: #fff; }
.service-demo-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.service-demo-title { position: relative; display: flex; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.service-demo-title h3 { font: 500 clamp(23px,2.15vw,31px)/1.16 Inter,sans-serif; letter-spacing: -.035em; }
.service-demo-title > span { font-size: 24px; }
.service-example { position: relative; border: 1px solid #deded8; border-radius: 13px; background: #fff; overflow: hidden; box-shadow: 0 14px 34px #123b3010; font-family: Inter,sans-serif; }
.example-label { padding: 13px 20px; border-bottom: 1px solid #e8e8e2; background: #fafaf7; font: 10px/1.5 "JetBrains Mono",monospace; letter-spacing: .06em; color: #64645d; }
.example-site-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 28px; }
.example-site-nav > strong { display: flex; align-items: center; gap: 9px; font-size: 17px; letter-spacing: -.04em; }
.example-mark { display: inline-grid; place-items: center; width: 31px; height: 31px; background: #e8ede3; border-radius: 50%; color: #35533c; font-family: Georgia,serif; font-size: 26px; }
.example-site-nav > span { color: #67675e; font-size: 11px; }
.example-site-content { padding: 22px 28px 28px; background: linear-gradient(120deg,#fff 55%,#f1f3e9); }
.example-kicker { font-size: 10px; letter-spacing: .08em; color: #53634a; }
.example-site-content h4 { margin: 18px 0; font: 400 clamp(33px,3.5vw,52px)/1.03 Georgia,serif; letter-spacing: -.035em; color: #263e2d; }
.example-site-content p { max-width: 370px; color: #62665c; font-size: 14px; line-height: 1.65; }
.example-site-cta { display: inline-flex; align-items: center; gap: 24px; margin-top: 24px; padding: 13px 17px; background: #294934; color: #fff; border-radius: 5px; font-size: 12px; }
.example-site-note { display: block; margin-top: 12px; color: #62665c; font-size: 11px; line-height: 1.6; }
.example-site-proof { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 20px 28px; border-top: 1px solid #e8e8e2; color: #66755c; font-size: 11px; }
.example-site-proof strong { color: #414b3b; font-weight: 400; margin-left: 5px; }
.operations-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 24px 22px 20px; }
.operations-heading div > span { color: #63716c; font-size: 10px; letter-spacing: .06em; }
.operations-heading h4 { font-size: 18px; line-height: 1.25; font-weight: 500; margin-top: 6px; letter-spacing: -.03em; }
.operations-date { font-size: 11px; padding: 6px 9px; border: 1px solid #e3e7e5; border-radius: 5px; color: #63716c; }
.operations-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 22px 22px; }
.operations-summary > div { background: #f2f5f3; border-radius: 8px; padding: 16px; }
.operations-summary strong { display: block; font-size: 30px; line-height: 1.2; font-weight: 500; color: #254c3c; letter-spacing: -.05em; }
.operations-summary span { display: block; margin-top: 6px; color: #58665e; font-size: 11px; line-height: 1.4; }
.operations-list-title { display: flex; justify-content: space-between; gap: 12px; padding: 0 22px 12px; font-size: 12px; }
.operations-list-title strong { font-weight: 500; }.operations-list-title > span { font-size: 10px; color: #68736c; }
.operations-task { display: flex; align-items: center; gap: 10px; margin: 0 22px; padding: 18px 0; border-top: 1px solid #e8ece9; }
.task-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }.task-dot-amber{background:#b88532}.task-dot-blue{background:#397bc1}.task-dot-green{background:#47896b}
.operations-task > div { min-width: 0; flex: 1; }.operations-task strong { display: block; font-size: 12px; font-weight: 500; }.operations-task div > span { display: block; margin-top: 5px; font-size: 11px; line-height: 1.45; color: #69726d; }
.task-owner { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #edf1ee; font-size: 10px; color: #496253; }
.operations-footer { display: flex; gap: 9px; align-items: center; padding: 16px 22px; background: #f6f8f6; color: #626f66; font-size: 11px; line-height: 1.5; }
.service-demo-caption { position: relative; margin-top: 18px; padding: 12px 14px; border-radius: 8px; background: rgba(255,255,255,.94); color: #1d342a; font: 500 13px/1.55 Inter,sans-serif; }
.service-demo-card:focus-visible { outline: 3px solid #0E67E4; outline-offset: 4px; }
@media(max-width: 600px) { .service-demo-card{padding:20px}.example-label{padding:12px 16px;font-size:9px}.example-site-nav,.example-site-content,.example-site-proof{padding-left:18px;padding-right:18px}.example-site-nav{align-items:flex-start}.example-site-nav>span{max-width:80px;text-align:right}.operations-heading{padding:20px 16px}.operations-summary{padding:0 16px 18px;gap:8px}.operations-summary>div{padding:12px}.operations-list-title{padding-left:16px;padding-right:16px}.operations-task{margin:0 16px}.operations-footer{padding:14px 16px}.example-site-cta{gap:12px;font-size:11px}.service-demo-caption{font-size:12px} }
.service-demo-compact { padding: 24px; }
.service-demo-compact .service-demo-title { min-height: 66px; }
.service-demo-compact .service-demo-title h3 { font-size: clamp(22px,1.85vw,27px); }
.service-demo-compact .service-demo-caption { margin-top: auto; }
.service-small-example { margin-bottom: 18px; flex: 1; }
.workflow-intro,.campaign-intro { padding: 22px 20px 18px; }
.workflow-chip { display: inline-block; font-size: 10px; color: #536b5e; letter-spacing: .07em; }
.workflow-intro h4,.campaign-intro h4 { margin-top: 9px; font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -.03em; }
.workflow-steps { list-style: none; padding: 4px 20px 22px; margin: 0; }
.workflow-steps li { position: relative; display: flex; gap: 14px; padding-bottom: 26px; }
.workflow-steps li:last-child { padding-bottom: 0; }
.workflow-steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; border-left: 1px solid #cddcd3; }
.workflow-number { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: #edf3ee; color: #3d654d; font-size: 11px; }
.workflow-steps strong { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; }
.workflow-steps p { color: #647068; font-size: 12px; line-height: 1.6; margin: 7px 0; }
.workflow-detail { display: inline-block; padding: 5px 8px; background: #f3f5f2; border-radius: 4px; font-size: 10px; color: #627361; }
.workflow-end { display: flex; align-items: center; gap: 9px; padding: 16px 20px; background: #f3f6f2; color: #50674f; font-size: 11px; line-height: 1.6; }
.campaign-intro p { color: #657068; font-size: 12px; line-height: 1.6; margin-top: 10px; }
.campaign-channel { display: flex; gap: 12px; align-items: center; margin: 0 20px; padding: 16px 0; border-top: 1px solid #e5eae6; }
.channel-monogram { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; background: #eef3f9; color: #386594; border-radius: 7px; font-size: 14px; font-weight: 500; }
.campaign-channel strong { font-size: 13px; font-weight: 500; }.campaign-channel p { font-size: 12px; line-height: 1.6; color: #657068; margin-top: 3px; }
.campaign-review { margin: 6px 20px 18px; padding: 16px; border: 1px solid #e3e9e5; border-radius: 7px; }
.campaign-review > span { display: block; font-size: 9px; letter-spacing: .06em; color: #607367; }
.campaign-review strong { display: block; margin: 8px 0; font-size: 16px; font-weight: 500; }.campaign-review p { font-size: 12px; line-height: 1.65; color: #657068; }
.campaign-next { display: flex; align-items: flex-start; gap: 10px; padding: 16px 20px; background: #f3f6f9; }.campaign-next .task-dot { margin-top: 5px; }.campaign-next p { color: #667581; font-size: 11px; line-height: 1.6; }.campaign-next strong { display: block; color: #304f6b; font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.design-preview { padding: 20px; background: #fcfbf7; }
.design-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.design-brand strong { color: #4f523f; font-size: 19px; font-weight: 500; letter-spacing: -.06em; }.design-brand strong span { font: italic 15px Georgia,serif; margin-left: 4px; }.design-brand > span { font-size: 8px; line-height: 1.6; letter-spacing: .1em; max-width: 78px; text-align: right; color: #68705c; }
.design-poster { position: relative; overflow: hidden; margin: 19px 0; min-height: 120px; border-radius: 60px 60px 4px 4px; background: #e4e8d8; }
.design-poster-ring { position: absolute; width: 110px; height: 110px; border: 20px solid #b9c5a1; border-radius: 50%; right: 10px; top: 5px; box-shadow: -16px 15px 0 #d0d9bc; }
.design-poster-caption { position: absolute; left: 20px; bottom: 18px; color: #47543a; font-size: 10px; line-height: 1.6; letter-spacing: .08em; }
.design-preview h4 { font: 400 31px/1.08 Georgia,serif; color: #484e3b; letter-spacing: -.03em; }
.design-preview > p { color: #757765; margin-top: 12px; font-size: 12px; line-height: 1.7; }
.design-class { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #e0e2d4; border-bottom: 1px solid #e0e2d4; margin: 20px 0 14px; padding: 12px 0; font-size: 11px; color: #5b634e; }.design-class strong{font-weight:400}
.design-action { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; background: #545f44; color: #fff; border-radius: 5px; font-size: 12px; }
.design-note { display: block; font-size: 10px; line-height: 1.6; color: #757765; margin-top: 10px; }
@media(min-width:768px) and (max-width:1100px) { .service-examples-grid { grid-template-columns: 1fr; } }
@media(max-width:600px) { .service-demo-compact{padding:20px}.service-demo-compact .service-demo-title{min-height:0}.workflow-intro,.campaign-intro{padding:20px 16px 16px}.workflow-steps{padding-left:16px;padding-right:16px}.workflow-steps li{gap:10px}.campaign-channel{margin-left:16px;margin-right:16px}.campaign-review{margin-left:16px;margin-right:16px}.design-preview{padding:16px} }
.hero-composition { position:relative; min-width:0; width:100%; max-width:620px; margin:0 auto; padding:24px; border-radius:24px; overflow:hidden; background:#e6ece1; font-family:Inter,sans-serif; }
.hero-composition-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }
.hero-composition figcaption { position:relative; color:#153b31; font:11px/1.6 "JetBrains Mono",monospace; letter-spacing:.08em; padding:4px 0 24px; }
.hero-composition-sheets { position:relative; display:grid; gap:14px; list-style:none; margin:0; padding:0; }

#problemas { padding-top:80px; padding-bottom:80px; }
#problemas .mb-20 { margin-bottom:36px; }
#problemas .p-8 { padding:24px; }
#problemas .mt-8 { margin-top:20px; padding-top:16px; }
#problemas .mb-6 { margin-bottom:16px; }
#problemas p { color:#afb3b5; }
@media(max-width:767px) { #problemas { padding-top:56px; padding-bottom:56px; } }

/* O brilho acompanha os raios; a leitura permanece em primeiro plano. */
.footer-art { background: radial-gradient(ellipse at 50% 100%, #0e67e430 0%, transparent 48%); }
.footer-art > svg { mask-image: linear-gradient(to bottom, #0005 0%, #0007 45%, #000 90%); }
.footer-wordmark { top: 12px; }
.footer-wordmark p { background-image: linear-gradient(180deg, #17353c55, #236b7b99) !important; }
.footer-content { padding-top: clamp(110px, 9vw, 164px); }
.footer-grid { gap: 36px; }
.footer-grid > div { min-width: 0; }
.footer-grid > div:first-child p { max-width: 280px; }
.footer-grid > div:nth-child(3) a { overflow-wrap: anywhere; word-break: normal; }
.footer-grid > div:last-child > div { background: linear-gradient(145deg, #172126ed, #101617ed); border-color: #a6cedb26; box-shadow: 0 12px 32px #0002; }
.footer-legal { gap: 20px; border-color: #ffffff24; font-size: 11px; line-height: 1.7; letter-spacing: .035em; color: #a6adb0; }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr .85fr 1.1fr 1.15fr; }
}
@media (max-width: 767px) {
  .site-footer .footer-content { padding-top: 94px; padding-bottom: 88px; }
  .footer-art > svg { height:560px; max-height:60%; opacity:.7; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 32px; }
  .footer-grid > div:first-child p { max-width: 440px; margin-bottom: 0; }
  .footer-grid > div:first-child img { margin-bottom: 14px; }
  .footer-grid > div:nth-child(2) ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
  .footer-grid > div:nth-child(2) li { margin: 0; }
  .footer-grid > div:nth-child(2) a { min-height: 44px; display: flex; align-items: center; }
  .footer-grid > div > span { margin-bottom: 12px; }
  .footer-grid > div:nth-child(3) a { min-height: 44px; }
  .footer-grid > div:nth-child(3) li { margin-top: 4px; }
  .footer-legal { align-items: flex-start; gap: 10px; }
}
.hero-sheet { position:relative; width:84%; padding:22px 42px 22px 22px; border:1px solid #ffffff99; border-radius:4px 18px 18px 18px; box-shadow:0 10px 24px #153c3012; }
.hero-sheet-presence { background:#f9faf7; color:#203e34; }
.hero-sheet-operation { justify-self:end; background:#103e47; color:#f0f6f1; border-color:#28545b; }
.hero-sheet-growth { width:88%; margin-left:4%; background:#dcedb7; color:#293d28; border-color:#eaf2d4; }
.hero-sheet-index { display:block; font:10px/1.5 "JetBrains Mono",monospace; letter-spacing:.05em; margin-bottom:10px; opacity:.8; }
.hero-sheet strong { display:block; font-size:clamp(22px,2.1vw,29px); line-height:1.08; letter-spacing:-.035em; font-weight:500; }
.hero-sheet p { margin-top:10px; font-size:12px; line-height:1.6; max-width:270px; opacity:.85; }
.hero-sheet-symbol { position:absolute; top:18px; right:18px; font-size:23px; }
.contact-journey,.delivery-review { min-width:0; padding:32px; border:1px solid #ffffff20; border-radius:20px; background:linear-gradient(140deg,#17272b,#101719); font-family:Inter,sans-serif; }
.evidence-eyebrow { color:#8dc8cc; font:10px/1.6 "JetBrains Mono",monospace; letter-spacing:.1em; margin-bottom:18px; }
.contact-journey h4,.delivery-review h3 { color:#f2f2ed; font-size:clamp(25px,2.6vw,36px); line-height:1.12; letter-spacing:-.035em; font-weight:500; }
.contact-journey ol { list-style:none; padding:0; margin:30px 0 0; }
.contact-journey li { position:relative; display:flex; gap:18px; padding-bottom:26px; }
.contact-journey li > span { position:relative; z-index:1; display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; background:#25474c; color:#bce2df; font-size:11px; }
.contact-journey li:not(:last-child)::before { content:""; position:absolute; top:34px; bottom:0; left:16px; width:1px; background:#3a575a; }
.contact-journey li strong { color:#edf3ee; font-weight:500; font-size:15px; line-height:34px; }
.contact-journey li p { color:#adbdbb; font-size:13px; line-height:1.65; max-width:370px; }
.evidence-footnote { border-top:1px solid #ffffff18; padding-top:18px; color:#98abaa; font-size:11px; line-height:1.7; }
.delivery-review { align-self:center; padding:28px; background:#121718; border-color:#ffffff16; }
.delivery-review .evidence-eyebrow { color:#8cbbc0; margin-bottom:12px; }
.delivery-review h3 { color:#e9efeb; font-size:28px; }
.delivery-review dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 28px; margin:24px 0 0; }
.delivery-review dl > div { border-top:1px solid #ffffff16; padding-top:14px; }
.delivery-review dt { display:flex; gap:10px; color:#e1e9e4; font-size:14px; font-weight:500; }
.delivery-review dt span { color:#7dadae; font:10px/20px "JetBrains Mono",monospace; }
.delivery-review dd { margin:8px 0 0; color:#a8b5b0; font-size:12px; line-height:1.65; }
@media(max-width:600px) { .hero-composition{padding:18px}.hero-sheet{padding:18px 35px 18px 18px;width:92%}.hero-sheet-growth{width:92%;margin-left:2%}.hero-sheet strong{font-size:24px}.hero-sheet-symbol{right:13px;top:13px}.contact-journey,.delivery-review{padding:24px}.contact-journey li{gap:12px}.delivery-review dl{gap:20px 16px} }
@media(max-width:370px) { .hero-sheet{width:100%}.hero-sheet-growth{margin-left:0}.hero-sheet strong{font-size:22px}.delivery-review{padding:20px}.delivery-review dl{grid-template-columns:1fr;gap:16px}.delivery-review h3{font-size:25px} }
@media(max-width:767px) {
  .hero-composition { padding:16px; }
  .hero-composition figcaption { padding-bottom:14px; }
  .hero-composition-sheets { gap:10px; }
  .hero-sheet { padding:14px 32px 14px 16px; }
  .hero-sheet-index { margin-bottom:6px; font-size:9px; }
  .hero-sheet strong { font-size:22px; line-height:1.12; }
  .hero-sheet strong br { display:none; }
  .hero-sheet p { margin-top:6px; line-height:1.45; }
}