/* ==========================================================================
   ABB Data · IA — Layout, componentes e responsividade
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Âncoras: as seções já têm padding-top próprio que cobre o header sticky.
   Basta uma folga pequena para o mobile (onde o padding < altura do nav),
   senão o padding + margin somam e jogam o título lá pra baixo. */
section[id], [id] { scroll-margin-top: 1.5rem; }
#top { scroll-margin-top: 0; } /* topo da página rola até 0, sem folga */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* trava scroll horizontal acidental em telas estreitas */
}

/* títulos: palavras longas só quebram se realmente não couberem — sem hífen
   automático (evita quebras feias do tipo "desenvolvi-") */
.hero__title, .h2, .h3, .mission__text, .principles dt, .sectors__name {
  overflow-wrap: break-word; /* só atua em palavras que estouram a linha */
  word-break: normal;
  hyphens: none;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--c-orange); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }

/* ----- Layout helpers ----- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--space-section); }
.section--dark { background: var(--c-dark); color: var(--c-on-dark); }
.section--cream2 { background: var(--c-cream-2); }
.section--mission { background: var(--c-dark); color: var(--c-on-dark); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.grid-2--top { align-items: start; }

/* ----- Tipografia ----- */
.kicker {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted);
  margin-bottom: 1.25rem;
}
.kicker--orange { color: var(--c-orange); }

.h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 1.5rem; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; margin-bottom: 1.1rem; }
.section p + p { margin-top: 1rem; }
.hl { color: var(--c-orange); }
mark { background: var(--c-orange-tint); color: inherit; padding: .05em .1em; }
strong { font-weight: 600; }

.caption { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); margin-top: 2.5rem; display: flex; align-items: center; gap: 1rem; }
.caption__rule { width: 56px; height: 2px; background: var(--c-orange); display: inline-block; }

/* ----- Botões ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem; padding: .85rem 1.6rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-orange); color: #fff; }
.btn--primary:hover { background: #ff6c34; }
.btn--ghost { background: transparent; border-color: currentColor; }
.btn--ghost:hover { background: rgba(255,90,31,.1); border-color: var(--c-orange); color: var(--c-orange); }

/* ----- Pills / tags ----- */
.pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.pills li { font-size: .85rem; padding: .4rem .9rem; border: 1px solid currentColor; border-radius: 999px; opacity: .85; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }
.tags li { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; padding: .35rem .6rem; border: var(--border-dark); border-radius: var(--radius); color: var(--c-on-dark-soft); }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(243, 238, 228, .82); backdrop-filter: blur(12px);
  border-bottom: var(--border-light);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav__logo { color: var(--c-ink); }
.nav__links { display: flex; align-items: center; gap: 1.75rem; }
.nav__links a { font-size: .92rem; font-weight: 500; color: var(--c-ink-soft); transition: color var(--t-fast); }
.nav__links a:hover { color: var(--c-orange); }
.nav__cta { padding: .55rem 1.1rem; background: var(--c-orange); color: #fff !important; border-radius: var(--radius); }
.nav__cta:hover { background: #ff6c34; }

.nav__toggle { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--c-ink); margin: 4px auto; transition: transform var(--t-fast), opacity var(--t-fast); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile { display: flex; flex-direction: column; padding: 1rem var(--gutter) 1.5rem; gap: .25rem; border-bottom: var(--border-light); background: var(--c-cream); }
.nav__mobile[hidden] { display: none; }
.nav__mobile a { padding: .8rem 0; font-weight: 500; border-bottom: var(--border-light); }
.nav__mobile .nav__cta { text-align: center; margin-top: .75rem; border-bottom: 0; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: calc(100svh - 68px); padding-block: clamp(2rem, 5vh, 4rem); background: linear-gradient(135deg, var(--c-cream) 60%, #f6e7dc 100%); }
.hero__inner { position: relative; z-index: 2; max-width: 1080px; }
.hero__title { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -.025em; margin-bottom: 1.25rem; text-wrap: balance; }
/* Palavra rotativa (efeito digitação) — reserva altura p/ não empurrar o conteúdo */
.hero__rotate-line { display: block; min-height: 1.15em; }
.hero__rotate { color: var(--c-orange); border-right: .06em solid var(--c-orange); padding-right: .04em; animation: hero-caret 1s steps(1) infinite; }
@keyframes hero-caret { 50% { border-color: transparent; } }
@media (max-width: 480px) { .hero__rotate-line { min-height: 2.2em; } }
@media (prefers-reduced-motion: reduce) { .hero__rotate { border-right: 0; animation: none; } }
.hero__lead { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 620px; margin-bottom: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.hero__tags { display: flex; flex-wrap: wrap; gap: 2rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.hero__tags strong { color: var(--c-ink); font-weight: 500; }
.hero__grid {
  position: absolute; inset: 0; z-index: 1; opacity: .5;
  background-image: linear-gradient(rgba(21,24,28,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(21,24,28,.05) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(circle at 80% 30%, #000, transparent 60%);
}

/* =====================================================================
   STATS
   ===================================================================== */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-dark-3); border: var(--border-dark); border-radius: var(--radius-lg); overflow: hidden; }
.stat { background: var(--c-dark-2); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.stat--wide { grid-column: 1 / -1; }
.stat__label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-orange); }
.stat__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; color: var(--c-on-dark); }
.stat__unit { font-size: .9rem; font-weight: 500; color: var(--c-on-dark-soft); }
.stat__cap { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-on-dark-soft); }

/* =====================================================================
   MISSÃO / VISÃO
   ===================================================================== */
.mission__title { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.mission__text { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.6vw, 2.9rem); line-height: 1.22; letter-spacing: -.015em; max-width: 18ch; max-inline-size: 22ch; }
.section--mission .mission__text { max-inline-size: 24ch; }
@media (min-width: 768px) { .mission__text { max-inline-size: 26ch; } }

/* Propósito: Missão + Visão lado a lado — texto menor que o statement único */
.purpose { margin-top: clamp(1.75rem, 4vw, 3rem); }
.purpose__label { margin-bottom: .85rem; }
.purpose .mission__text {
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1.3;
  max-width: none;
  max-inline-size: 34ch;
}

/* =====================================================================
   SECTION HEAD + META
   ===================================================================== */
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.section__head .h2 { margin-bottom: 0; }

/* =====================================================================
   SERVIÇOS (cards 3)
   ===================================================================== */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.svc { position: relative; background: var(--c-dark); color: var(--c-on-dark); padding: 2.25rem 2rem; border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--t), box-shadow var(--t); }
.svc--light { background: var(--c-cream-2); color: var(--c-ink); }
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.svc::after { content: ""; position: absolute; top: 0; right: 0; border-width: 0 38px 38px 0; border-style: solid; border-color: transparent var(--c-orange) transparent transparent; }
.svc__idx { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); }
.svc--light .svc__idx { color: var(--c-ink-soft); }
.svc__icon { font-family: var(--font-mono); font-size: 1.8rem; color: var(--c-orange); margin: 1.25rem 0 1rem; }
.svc__desc { color: var(--c-on-dark-soft); margin: .9rem 0 1.5rem; }
.svc--light .svc__desc { color: var(--c-ink-soft); }
.svc__list li { padding: .7rem 0; border-top: var(--border-dark); position: relative; padding-left: 1.1rem; font-weight: 500; }
.svc--light .svc__list li { border-top: var(--border-light); }
.svc__list li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 6px; height: 6px; background: var(--c-orange); border-radius: 50%; }

/* =====================================================================
   DIFERENCIAIS
   ===================================================================== */
.dif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.dif { background: var(--c-cream); border: var(--border-light); border-radius: var(--radius-lg); padding: 1.75rem; transition: transform var(--t), border-color var(--t); }
.dif:hover { transform: translateY(-4px); border-color: var(--c-orange); }
.dif--dark { background: var(--c-dark); color: var(--c-on-dark); border-color: transparent; }
.dif__tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-orange); display: block; margin-bottom: 1rem; }
.dif h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; line-height: 1.2; margin-bottom: .75rem; }
.dif p { font-size: .92rem; color: var(--c-ink-soft); }
.dif--dark p { color: var(--c-on-dark-soft); }

/* =====================================================================
   PROCESSO
   ===================================================================== */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: var(--border-light); }
.process__step { padding: 2rem 1.5rem 1rem 0; border-right: var(--border-light); position: relative; }
.process__step:last-child { border-right: 0; }
.process__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6vw, 5rem); line-height: .9; color: var(--c-orange); display: block; margin-bottom: 1.25rem; }
.process__phase { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); display: block; margin-bottom: .4rem; }
.process__step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; margin-bottom: .6rem; }
.process__step p { font-size: .9rem; color: var(--c-ink-soft); }

/* =====================================================================
   CASES
   ===================================================================== */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.case { background: var(--c-dark-2); border: var(--border-dark); border-radius: var(--radius-lg); padding: 2rem; transition: transform var(--t), border-color var(--t); }
.case:hover { transform: translateY(-5px); border-color: var(--c-orange); }
.case__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.case__id { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; background: var(--c-orange); color: #fff; padding: .25rem .6rem; border-radius: var(--radius); }
.case__seg { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-orange); }
.case h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.12; margin-bottom: .9rem; }
.case p { font-size: .95rem; color: var(--c-on-dark-soft); }

/* =====================================================================
   TECNOLOGIAS (stack)
   ===================================================================== */
.principles { margin-top: 2rem; border-top: var(--border-light); }
.principles div { padding: 1.4rem 0; border-bottom: var(--border-light); }
.principles dt { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.02em; }
.principles dd { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-top: .25rem; }
/* variação horizontal: 3 colunas em faixa de largura total (sem vazio lateral) */
.principles--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); border-top: none; margin-top: clamp(2.5rem, 5vw, 4rem); }
.principles--row div { border-bottom: none; border-top: 2px solid var(--c-orange); padding: 1.4rem 0 0; }
.stack { display: flex; flex-wrap: wrap; gap: .75rem; }
/* tecnologias: coluna de tags estica até a altura do texto e distribui as
   linhas verticalmente, eliminando o vazio que sobrava abaixo */
#tecnologias .grid-2 { align-items: stretch; }
#tecnologias .stack { height: 100%; align-content: space-between; }
.stack li { font-weight: 600; font-size: .95rem; padding: .8rem 1.2rem; border: var(--border-light); border-radius: var(--radius); background: var(--c-cream); transition: transform var(--t-fast); }
.stack li:hover { transform: translateY(-3px); }
.stack .is-on { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.stack .is-dark { background: var(--c-dark); color: var(--c-on-dark); border-color: var(--c-dark); }

/* =====================================================================
   SETORES
   ===================================================================== */
.sectors { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--border-light); border-radius: var(--radius-lg); overflow: hidden; }
.sectors li { padding: 2.5rem 1.75rem; border-right: var(--border-light); border-bottom: var(--border-light); min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; transition: background var(--t), color var(--t); cursor: default; }
.sectors li:hover { background: var(--c-orange); color: #fff; }
.sectors--dark { background: var(--c-dark); color: var(--c-on-dark); }
.sectors__idx { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .15em; color: var(--c-muted); }
.sectors li:hover .sectors__idx { color: rgba(255,255,255,.8); }
.sectors__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.05; }

/* =====================================================================
   PARCERIA
   ===================================================================== */
.quote { font-family: var(--font-mono); font-size: .92rem; line-height: 1.6; font-style: italic; color: var(--c-on-dark-soft); border-left: 2px solid var(--c-orange); padding: .5rem 0 .5rem 1.25rem; margin-top: 2rem; }
.partner__cards { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.partner__card { background: var(--c-dark-2); border: var(--border-dark); border-radius: var(--radius-lg); padding: 1.5rem; }
.partner__tag { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-orange); }
.partner__name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin: .75rem 0 1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.partner__name em { font-style: normal; color: var(--c-orange); font-weight: 600; font-size: .95rem; width: 100%; }
.badge { background: var(--c-orange); color: #fff; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 1rem; }
.badge--ghost { background: transparent; border: 1px solid var(--c-orange); color: var(--c-orange); }
.partner__card ul li { font-family: var(--font-mono); font-size: .76rem; padding: .45rem 0; color: var(--c-on-dark-soft); border-top: var(--border-dark); }
.partner__card ul li::before { content: "› "; color: var(--c-orange); }
.partner__plus { font-size: 2rem; color: var(--c-orange); text-align: center; font-weight: 700; }
.partner__joint { margin-top: 1rem; background: var(--c-dark-2); border: var(--border-dark); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.partner__joint strong { font-family: var(--font-display); font-size: 1.05rem; }
.partner__joint span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }

/* =====================================================================
   CONTATO / FORM
   ===================================================================== */
.contact__info { margin-top: 2.5rem; }
.contact__info div { display: flex; gap: 1.5rem; padding: .9rem 0; border-bottom: var(--border-dark); }
.contact__info dt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); width: 90px; flex-shrink: 0; padding-top: .15rem; }
.contact__info dd a { font-weight: 600; transition: color var(--t-fast); }
.contact__info dd a:hover { color: var(--c-orange); }

.form { background: var(--c-dark-2); border: var(--border-dark); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-on-dark-soft); margin-bottom: .45rem; }
.field input, .field textarea {
  width: 100%; background: var(--c-dark); border: var(--border-dark); border-radius: var(--radius);
  color: var(--c-on-dark); padding: .8rem 1rem; font: inherit; transition: border-color var(--t-fast);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-orange); }
.field textarea { resize: vertical; min-height: 110px; }
.form__submit { width: 100%; margin-top: .5rem; }
.form__status { font-size: .9rem; margin-top: 1rem; min-height: 1.2em; }
.form__status.is-ok { color: #4ade80; }
.form__status.is-err { color: #ff7a47; }
.form[aria-busy="true"] .form__submit { opacity: .6; pointer-events: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ff7a47; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--c-dark); color: var(--c-on-dark-soft); padding-block: 2.5rem; border-top: var(--border-dark); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer p { font-size: .85rem; }
.footer__top { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-orange); }

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1024px) {
  .cards-3 { grid-template-columns: 1fr; }
  .dif-grid { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr 1fr 1fr; }
  .process__step { border-bottom: var(--border-light); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .grid-2 { grid-template-columns: 1fr; }
  .cases { grid-template-columns: 1fr; }
  .sectors { grid-template-columns: 1fr 1fr; }
  .principles--row { grid-template-columns: 1fr; gap: 0; }
  .principles--row div { border-top: var(--border-light); padding: 1.3rem 0; }
  .principles--row div:first-child { border-top: 2px solid var(--c-orange); }
}

@media (max-width: 560px) {
  .dif-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .sectors { grid-template-columns: 1fr; }
  .partner__cards { grid-template-columns: 1fr; }
  .partner__plus { transform: rotate(90deg); }
  .section__head { margin-bottom: 2rem; }
  .footer__inner { flex-direction: column; text-align: center; }
}

/* JS desativado: mostra tudo */
.no-js .reveal { opacity: 1; transform: none; }