/* Breakpoint convention — the only 5 values allowed in @media (max-width: …)
   across this file. Never introduce a new ad-hoc value; pick the closest
   semantic match from this list instead.
     sm  640px  — phone → phone landscape / small tablet
     md  768px  — tablet portrait
     lg  1024px — tablet landscape / small laptop
     xl  1280px — laptop / desktop
     2xl 1536px — large desktop */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  background: var(--color-white);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  margin: 0 0 0.5em;
  /* Long single words ("Autoatendimento", "Observabilidade") don't have a
     space to wrap on and, at large heading sizes, overflow their box on
     narrow cards/columns — this lets them break instead. */
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.5rem, 5vw, var(--font-size-h1));
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2 {
  font-size: clamp(2rem, 4vw, var(--font-size-h2));
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

a {
  color: var(--color-brand-blue-dark);
}

.placeholder-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-white);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.site-header__logo .placeholder-image,
.site-header__logo-img {
  border-radius: 0;
}

.site-header__logo-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-nav__list {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav__list a {
  text-decoration: none;
  color: var(--color-text-heading);
  font-family: var(--font-heading);
  font-weight: 600;
  padding-bottom: 0.3em;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site-nav__list a:hover {
  color: var(--color-brand-blue-dark);
}

.site-nav__list a.is-active {
  color: var(--color-brand-blue-dark);
  border-bottom-color: var(--color-brand-blue-dark);
}

/* Mobile nav toggle: hidden by default (desktop shows .site-nav__list
   inline); the md (768px) query below flips which one is visible. */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.site-nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text-heading);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .site-nav__toggle {
    display: inline-flex;
  }

  /* Dropdown panel: full-bleed under the (sticky, positioned) header,
     hidden until .is-open. Positioned against .site-header rather than
     .site-header__inner so it isn't capped by the inner's max-width:1200px. */
  .site-nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-white);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
    padding: 0.5rem 1.5rem 1rem;
  }

  .site-nav__list.is-open {
    display: flex;
  }

  .site-nav__list a {
    display: block;
    padding: 0.85em 0;
  }
}

/* WhatsApp CTA */
.whatsapp-cta {
  display: inline-block;
  background: var(--color-cta-green);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  padding: 0.85em 2em;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.whatsapp-cta:hover {
  background: var(--color-cta-green-hover);
  transform: translateY(-1px);
}

/* Outline button for hero slides linking to a regular page (not WhatsApp) —
   white so it reads on the dark hero gradient background. */
.btn-hero {
  display: inline-block;
  border: 2px solid var(--color-white);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  padding: calc(0.85em - 2px) calc(2em - 2px);
  border-radius: var(--radius-button);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-hero:hover {
  background: var(--color-white);
  color: var(--color-brand-blue-dark);
}

/* Footer: 4 columns (Links / Soluções / Redes Sociais / Contato) + legal bar.
   No margin-top on purpose — the CTA banner right before it (.final-cta) is
   meant to sit flush against it on every page except Contato, see the
   "glued CTA" rule further down. */
.site-footer {
  background: var(--gradient-footer);
  color: var(--color-white);
  margin-top: 4rem;
}

.site-footer__inner {
  padding: 3.5rem 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer__col h3 {
  color: var(--color-white);
  font-size: 1.1rem;
  margin: 0 0 1.25rem;
}

/* Brand column (2026-08-11) — logo + tagline + social icons, replacing
   the old standalone "Redes Sociais" column, which was just a heading
   and one row of icons: much shorter than "Links"/"Contato" next to it,
   leaving the middle of the row visibly empty. Folding social into a
   proper brand block fixes that balance and gives the footer the logo
   it was missing entirely (only ever shown in the header before). */
.site-footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* global-logo.png is colored for a light background (see header) — no
   separate white asset exists, so this recolors it to solid white for
   the dark footer instead of maintaining a second logo file. */
.site-footer__logo {
  width: 140px;
  height: auto;
  filter: brightness(0) invert(1);
}

.site-footer__tagline {
  margin: 0;
  max-width: 32ch;
  line-height: var(--line-height-body);
  opacity: 0.85;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.site-footer__list li {
  position: relative;
  padding-left: 1rem;
}

.site-footer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--color-white);
  opacity: 0.6;
}

.site-footer__list a,
.site-footer__contact a {
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.site-footer__list a:hover,
.site-footer__contact a:hover {
  opacity: 1;
  text-decoration: underline;
}

.site-footer__social {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  transition: background-color 0.15s ease;
}

.site-footer__social a:hover {
  background: rgba(255, 255, 255, 0.3);
}

.site-footer__contact {
  font-style: normal;
}

.site-footer__contact p {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.9em;
  opacity: 0.9;
}

.site-footer__contact .icon {
  flex-shrink: 0;
  margin-top: 0.2em;
}

.site-footer__legal {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: var(--font-size-small);
  border-top: 1px solid var(--color-overlay-white);
  padding: 1.25rem 1.5rem 2rem;
}

.site-footer__legal-text {
  text-align: center;
  opacity: 0.85;
}

.site-footer__legal p {
  margin: 0.25em 0;
}

/* A <button>, not an <a> — smooth-scrolling to the top failed silently
   via a plain "#top" anchor because the header it pointed to is
   position:sticky; browsers can treat a stuck element as "already
   visible" and skip the scroll entirely. JS-driven scrollTo (see
   assets/js/scroll-top.js) sidesteps that.
   <button> UA defaults (border, background, font-size, cursor) are
   unreset by nothing else here — same class of bug as the Cases page's
   "Leia mais" <button>, see the .btn-outline/.btn-solid note above. */
.site-footer__top-link {
  display: inline-block;
  flex-shrink: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.85;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  transition: opacity 0.15s ease;
}

.site-footer__top-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.site-footer__top-link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.site-footer__top-link:hover span {
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .site-footer__legal {
    flex-direction: column;
    justify-content: center;
  }
}

/* A multi-column grid needs more room per column before it's worth
   splitting than a typical text reflow point — lg (1024px), not md, is
   the closer semantic match (see docs/PRD-responsivo.md, Open Question #1). */
@media (max-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* Page sections (shared across content pages) */
main > section {
  padding: 4rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Full-bleed sections manage their own width; .section-inner caps content at 1200px */
main > section.hero--main,
main > section.partners-section,
main > section.testimonials-section,
main > section.final-cta,
main > section.split-section,
main > section.hero--title-bar,
main > section.mission-values-section,
main > section.services-contact-section {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* .final-cta is always main's last child on every page that has one (every
   page except Contato) — glue it to the footer with zero gap, per the
   reference. Contato has no .final-cta, so its footer keeps normal spacing
   from main > section's default bottom padding. */
main:has(> section.final-cta:last-child) + .site-footer {
  margin-top: 0;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand-blue-dark);
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.eyebrow--on-dark {
  color: var(--color-overlay-white);
  color: rgba(255, 255, 255, 0.75);
}

.section-title {
  text-align: center;
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 1rem;
}

.section-title--on-dark {
  color: var(--color-white);
}

.dotted-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

.hero {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.hero__text,
.hero__image {
  flex: 1 1 320px;
}

.hero__text p {
  font-size: 1.15rem;
}

.hero__text .section-title {
  text-align: left;
}

.hero--main {
  background: var(--gradient-footer);
  color: var(--color-white);
}

.hero--main .hero__inner {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.hero--main h1,
.hero--main h2 {
  color: var(--color-white);
  font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.hero--main .hero__text p {
  font-size: 1.05rem;
}

.hero--main .slider > .slider__slide {
  transition-duration: 0.35s;
}

/* Generic slider (used by the hero carousel and the featured case carousel).
   All slides stack in the same grid cell (grid-area 1/1) so the container
   auto-sizes to the tallest slide, and switching slides is a pure opacity
   fade — no layout jump, no need to lock a fixed height. */
.slider {
  position: relative;
  display: grid;
}

/* ".slider > " bumps specificity so this always wins over a slide's own
   component rule (e.g. .case-card sets display:flex too), regardless of
   which one is declared later in the file. */
.slider > .slider__slide {
  grid-area: 1 / 1;
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.slider > .slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .slider > .slider__slide {
    transition: none;
  }
}

/* Scroll/slide effect (clients, testimonials): each .slider__slide is a full
   "page" that slides in from the side, instead of crossfading in place.
   Overrides the fade rules above with higher specificity (3 classes).

   The element that clips (overflow:hidden) must NOT be the same element that
   moves (transform) — otherwise the clip boundary travels with the content
   instead of staying put, and the whole box visibly drifts off its spot.
   So overflow:hidden lives on the outer wrapper ([data-slider-effect] itself,
   e.g. .testimonials-slider/.clients-slider), while transform only ever
   touches the inner .slider track. */
[data-slider-effect="scroll"] {
  overflow: hidden;
}

[data-slider-effect="scroll"] .slider {
  display: flex;
  transition: transform 0.5s ease;
}

[data-slider-effect="scroll"] .slider > .slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-slider-effect="scroll"] .slider {
    transition: none;
  }
}

.hero-slide {
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.hero__secondary-link {
  display: inline-block;
  margin-left: 1rem;
  color: var(--color-white);
  text-decoration: underline;
}

.slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.slider__dots {
  display: flex;
  gap: 0.6rem;
}

.slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.slider__dot.is-active {
  background: var(--color-brand-blue-dark);
  transform: scale(1.2);
}

.slider__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-heading);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background-color 0.15s ease;
}

.slider__arrow:hover {
  background: var(--color-bg-light);
}

/* On dark backgrounds (hero), dots/arrows switch to a light variant */
.hero--main .slider__dot {
  background: rgba(255, 255, 255, 0.35);
}

.hero--main .slider__dot.is-active {
  background: var(--color-white);
}

.hero--main .slider__arrow {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}

.hero--main .slider__arrow:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Featured single case */
.cases-featured {
  margin-top: 1.75rem;
}

/* ".case-card.case-card--featured" (2 classes) beats the shared
   .service-card/.case-card/.testimonial-card rule (1 class) regardless of
   which is declared first in the file — same lesson as the slider
   specificity fix, see AGENTS.md. */
.case-card.case-card--featured {
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  background: none;
  box-shadow: none;
  padding: 0;
}

.case-card__image {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: var(--radius-card);
  margin: 0 auto 1.5rem;
}

.case-card--featured h3 {
  color: var(--color-brand-blue-dark);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.case-card--featured .btn-solid {
  align-self: center;
  margin-top: 1.5rem;
}

.hero--secondary {
  text-align: center;
  flex-direction: column;
  background: var(--gradient-cta-block);
  color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 3.5rem 2rem;
}

.hero--secondary h1,
.hero--secondary h2 {
  color: var(--color-white);
}

.hero--secondary .whatsapp-cta,
.hero--secondary .btn-solid {
  background: var(--color-white);
  color: var(--color-brand-purple-dark);
}

.hero--secondary .whatsapp-cta:hover,
.hero--secondary .btn-solid:hover {
  background: var(--color-bg-light);
}

.hero--secondary p {
  max-width: 480px;
  margin: 0.75rem auto 0;
}

.hero--secondary .btn-solid {
  margin-top: 1.75rem;
}

/* Dark title bar with a subtle circuit/grid texture — the standard page
   header, used by every inner page (Sobre nós, Serviços, Cases, Contato,
   Política de Privacidade, FAQ, EasyIDP, and the 7 dedicated service
   pages). No button, no image: just title + optional subtitle, centered.
   .hero--secondary remains only for 404, which isn't a standard content
   page. */
.hero--title-bar {
  background: var(--gradient-footer);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 34px),
    var(--gradient-footer);
  color: var(--color-white);
  text-align: center;
}

.hero--title-bar .section-inner {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

/* EasyIDP only — extra bottom room so the floating logo card (negative
   margin, see .easyidp-logo-card) doesn't crowd the subtitle above it. */
.hero--title-bar-tall .section-inner {
  padding-bottom: 6rem;
}

.hero--title-bar h1 {
  color: var(--color-white);
  font-size: clamp(2rem, 4vw, 3rem);
}

.hero--title-bar p {
  margin: 0.75rem auto 0;
  max-width: 640px;
  font-size: 1.1rem;
  opacity: 0.9;
}

.hero--title-bar-left {
  text-align: left;
}

.hero--title-bar-left h1 {
  max-width: 900px;
}

.hero--title-bar-left p {
  margin: 0.75rem 0 0;
  max-width: 760px;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* HOME-V1 PREVIEW ONLY (2026-08-11) — the 3-column greedy-masonry trial
   from earlier in this session, moved off the live Home page's grid
   (".services-grid--home", back to the plain 2-column base rule above)
   and onto ".services-grid--home-v1" instead, used only by
   src/home-v1.njk — a client-preview snapshot of Home with this grid
   treatment, requested explicitly so it can be shown without it being
   live on the real site yet. See assets/js/masonry.js (activated by the
   data-masonry attribute, present only on home-v1.njk's grid) for the
   greedy-column-fill half of this — CSS alone can't measure real card
   heights to always place the next card in the shortest column, which
   is what avoids the "hole in the middle" a naive CSS-only masonry
   (multi-column with balanced fill) produced.

   This block is the *fallback*: plain 3-column grid, active until
   masonry.js finishes its first layout pass and adds .is-masonry, at
   which point the rule below takes over with absolute positioning. If
   JS is disabled/fails, this fallback is what's shown — never
   left:0/top:0-stacked cards.

   If home-v1 is approved and should become the real Home: rename
   every ".services-grid--home-v1" reference (here and in
   home-v1.njk) to ".services-grid--home", delete index.njk's original
   services-grid section, and promote home-v1.njk's content into
   index.njk (or just delete index.njk's grid markup and repoint).
   If rejected: delete this block, assets/js/masonry.js, its <script>
   tag in base.njk, src/home-v1.njk, and its route in
   test/site.test.js — the live Home page already doesn't reference any
   of it. Chained selectors so specificity wins regardless of file
   order — see AGENTS.md. Guarded to min-width so it never fights the
   mobile 1-column collapse above. */
@media (min-width: 769px) {
  .services-grid.services-grid--home-v1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    --masonry-gap: 40px;
  }

  .services-grid.services-grid--home-v1.is-masonry {
    display: block;
    position: relative;
  }
}

/* No hover lift here on purpose (removed 2026-08-10, explicit user
   request) — translateY on the whole card when hovering its "Leia mais"
   link made the card visibly detach from its own box-shadow, reading as
   a glitch rather than a nice interaction. Hover feedback now lives only
   on the buttons themselves — see the arrow micro-interaction on
   .btn-outline/.btn-solid below. */
.service-card,
.case-card,
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.service-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 2.75rem;
  min-width: 0;
}

.service-card h3,
.service-card p,
.service-card__benefits-label {
  text-align: left;
}

.service-card__icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button);
  background: var(--color-brand-blue-dark);
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.service-card__icon .icon {
  width: 36px;
  height: 36px;
}

/* Same photo used on the home hero's first slide and the EasyIDP page's
   logo card (/assets/img/home-hero-1.jpeg) — sized down to fit between
   the title and the description in this smaller card context. */
.service-card__highlight-image {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-button);
  margin: 0.5rem 0 1rem;
}

/* Home's "Nossas Especialidades" grid only (Serviços page uses the
   ".service-card--plain" variant instead, which centers via its own
   rules) — centers everything in the card, including the benefits
   strip (see ".service-card__benefits" below for how centering it is
   made safe with an overflowing scroll row). */
.services-grid--home .service-card {
  align-items: center;
  text-align: center;
}

/* "safe center" centers the row when its items fit the card width
   (the common case — see 2026-08-10 request to center benefit icons
   that don't fill the card) but falls back to start alignment once
   the row actually overflows, keeping the first item reachable
   instead of stranding it off the scrollable area like a plain
   "center" would. */
.services-grid--home .service-card__benefits {
  justify-content: safe center;
}

.services-grid--home .service-card h3,
.services-grid--home .service-card p,
.services-grid--home .service-card__benefits-label {
  text-align: center;
}

.services-grid--home .service-card__benefits-label {
  margin-top: 1.5rem;
}

.services-grid--home .service-card .btn-solid {
  align-self: center;
  margin-top: 0.5rem;
}

/* Scoped down from the bare --font-size-h3 (36px, tuned for a one-off
   page moment) — repeated 7 times as a card title it read as too heavy,
   and forced the longest title ("Integração de Software Simplificada
   com Microsoft Entra ID") to wrap 3 lines, throwing that card's height
   off from its row neighbor. Same fix as .case-card--tile h2. */
.service-card h3 {
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 0.6rem;
}

.service-card p {
  margin: 0 0 0.5rem;
}

.service-card h3 a {
  text-decoration: none;
  color: inherit;
}

.service-card h3 a:hover {
  color: var(--color-brand-blue-dark);
}

.service-card__benefits-label {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-brand-blue-dark);
  margin: 1.25rem 0 0;
}

/* Serviços page variant: centered text, plain (no badge) icon — matches
   that page's reference print, which differs from the Home card style. */
.service-card--plain {
  align-items: center;
  text-align: center;
}

.service-card--plain h3,
.service-card--plain p,
.service-card--plain .service-card__benefits-label {
  text-align: center;
}

.service-card--plain .service-card__benefits {
  justify-content: center;
}

.service-card--plain .btn-solid {
  align-self: center;
}

.service-card__icon--plain {
  width: auto;
  height: auto;
  background: none;
  color: var(--color-brand-blue-dark);
  margin-bottom: 1rem;
}

.service-card__icon--plain .icon {
  width: 40px;
  height: 40px;
}

.service-card__benefits {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 1rem -0.25rem 2rem;
  padding: 0.25rem 0.25rem 0.75rem;
  font-size: var(--font-size-small);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Scrollbar hidden on purpose (the mask-image fade below is the only
     scroll affordance) — overflow-x stays "auto" so the row is still
     scrollable by touch swipe, trackpad, and shift+wheel, just without
     a visible scrollbar track. -webkit-overflow-scrolling adds momentum
     scrolling on older iOS Safari; modern browsers do this natively. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Without this, the unwrapped row's min-content width (all items, no
     wrap) forces .service-card — its flex parent — to grow past the grid
     track instead of letting this list scroll internally. Classic flex
     "min-width:auto" blowout; see AGENTS.md specificity note style for
     precedent on documenting non-obvious CSS fixes. */
  min-width: 0;
  /* .service-card--plain sets align-items:center on the card (to center
     the icon/title), which also switches this list from stretch to
     shrink-to-fit — undoing the min-width:0 fix above. Force stretch here
     regardless of the card variant. */
  align-self: stretch;
}

.service-card__benefits::-webkit-scrollbar {
  display: none;
}

/* Scroll affordance: fade the right edge below md so the horizontal-scroll
   benefits strip reads as scrollable on touch, not as "content ended".
   Static/always-on by design (no JS scroll-position tracking) — every
   service card has enough benefit items to overflow at these widths, so
   this doesn't risk implying scrollability where none exists. */
@media (max-width: 768px) {
  .service-card__benefits {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
}

.service-card__benefits li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 4.75rem;
  text-align: center;
  color: var(--color-text-body);
}

.service-card__benefit-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-brand-blue-dark);
  flex-shrink: 0;
}

.case-card__result {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-brand-blue-dark);
}

.case-card {
  display: flex;
  flex-direction: column;
}

/* Standalone /cases/ page: logo banner bleeds to the card edges, text below
   it — matches that page's reference print (a different treatment from the
   featured single-case slider on Home). */
.case-card--tile {
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.case-card--tile .placeholder-image {
  border-radius: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 220;
  object-fit: cover;
}

/* Scoped down from the bare global h2 (48px, -2px letter-spacing — sized
   for page-level titles) which read as too heavy/cramped repeated 3+
   times as small card titles right under each client's own logo banner.
   Same reasoning as .legal-section h2 / .pitch-section .section-title,
   see AGENTS.md. */
.case-card--tile h2 {
  margin: 1.25rem 1.5rem 0.5rem;
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--color-brand-blue-dark);
}

.case-card--tile p {
  margin: 0 1.5rem 1.25rem;
  color: var(--color-text-body);
}

.case-card--tile .btn-solid {
  align-self: flex-start;
  margin: 0 1.5rem 1.5rem;
}

.cases-section {
  text-align: center;
}

/* Modal "Leia mais" dos cases: centralizado na viewport (não na seção), por
   isso fixed + inset:0 no overlay em vez de ficar preso ao .cases-grid. */
body.has-case-modal-open {
  overflow: hidden;
}

.case-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 18, 29, 0.65);
  z-index: 100;
}

.case-modal-overlay.is-active {
  display: flex;
}

.case-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: min(85vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.case-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text-heading);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  z-index: 1;
}

.case-modal__close:hover {
  background: var(--color-bg-light);
}

.case-modal__image {
  flex-shrink: 0;
}

.case-modal__image .placeholder-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 360;
  object-fit: cover;
  border-radius: 0;
}

.case-modal__body {
  padding: 1.75rem 2rem 2rem;
  text-align: left;
  overflow-y: auto;

  /* Scroll customizado, mais discreto que o padrão do navegador */
  scrollbar-width: thin;
  scrollbar-color: var(--color-brand-blue) var(--color-bg-light);
}

.case-modal__body::-webkit-scrollbar {
  width: 8px;
}

.case-modal__body::-webkit-scrollbar-track {
  background: var(--color-bg-light);
  border-radius: 999px;
}

.case-modal__body::-webkit-scrollbar-thumb {
  background: var(--color-brand-blue);
  border-radius: 999px;
}

.case-modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-blue-dark);
}

.case-modal__body h2 {
  margin: 0 0 0.5rem;
}

.case-modal__subtitle {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-brand-blue-dark);
  margin: 0 0 0.75rem;
}

.case-modal__body .case-card__result {
  display: block;
  margin-bottom: 1rem;
}

.case-modal__body p {
  margin: 0 0 1rem;
  color: var(--color-text-body);
}

.case-modal__list {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--color-text-body);
}

.case-modal__list li {
  margin-bottom: 0.4rem;
}

.case-modal__list li::marker {
  color: var(--color-brand-blue-dark);
}

.case-modal__body p:last-child,
.case-modal__list:last-child {
  margin-bottom: 0;
}

.link-more {
  display: inline-block;
  margin-top: 1.75rem;
  font-weight: var(--font-weight-eyebrow);
  text-decoration: none;
}

.link-more:hover {
  text-decoration: underline;
}

/* Pill buttons. These classes are used on both <a> and <button> elements
   (the Cases page's "Leia mais" is a real <button>, since it opens a
   modal instead of navigating) — <button> carries browser UA defaults
   (border, appearance, font-size, line-height, cursor) that <a> never
   had, which went unnoticed until a real <button> used these classes.
   Reset explicitly so both element types render identically. */
.btn-outline,
.btn-solid {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  padding-left: 1.75em;
  padding-right: 1.75em;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-outline {
  border: 2px solid var(--color-brand-blue-dark);
  color: var(--color-brand-blue-dark);
  background: transparent;
}

.btn-outline:hover {
  background: var(--color-brand-blue-dark);
  color: var(--color-white);
}

.btn-solid {
  background: var(--color-brand-blue-dark);
  color: var(--color-white);
}

.btn-solid:hover {
  background: var(--color-brand-blue);
}

/* Hover feedback lives only on the button now (2026-08-10, explicit user
   request — see the removed card-lift rule near .service-card/.case-card
   above). A trailing arrow that nudges forward on hover reads as "go" /
   "continue", which fits every one of these buttons' labels (Leia mais,
   Saiba mais, Voltar para a Home, Enviar e-mail...) — plain inline-block
   ::after, not flex, so it works unmodified whether the button itself is
   inline-block (the default) or inline-flex (e.g.
   .services-contact-section__cta-button below). */
.btn-outline::after,
.btn-solid::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.5em;
  transition: transform 0.2s ease;
}

.btn-outline:hover::after,
.btn-solid:hover::after {
  transform: translateX(4px);
}

.faq-teaser {
  text-align: center;
}

.logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.logo-grid--cards li {
  background: var(--color-white);
  border-radius: var(--radius-button);
  padding: 1rem 1.5rem;
  box-shadow: var(--shadow-card);
}

/* Clients logo ticker: a continuous strip that advances one logo at a time
   (src/assets/js/logo-ticker.js), not a paginated slider — different
   mechanic on purpose, see AGENTS.md. Columns visible: 6 desktop, 4 tablet,
   1 mobile. Same clip/transform split lesson as the scroll slider effect:
   overflow:hidden lives on the wrapper, transform only touches the track. */
.clients-section {
  text-align: center;
}

.clients-ticker {
  margin-top: 2.25rem;
  padding: 1.5rem 0;
  overflow: hidden;
}

.ticker {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
}

.ticker__item {
  flex: 0 0 calc((100% - 5 * 2rem) / 6);
  display: flex;
  justify-content: center;
}

/* Same lg rationale as .site-footer__inner above. */
@media (max-width: 1024px) {
  .ticker__item {
    flex: 0 0 calc((100% - 3 * 2rem) / 4);
  }
}

@media (max-width: 640px) {
  .ticker__item {
    flex: 0 0 100%;
  }
}

/* Partners banner */
.partners-section {
  background: var(--gradient-cta-block);
  color: var(--color-white);
  text-align: center;
}

/* Mid-page dark CTA banner: title left, button right, subtle divider
   between. The section itself stays white/full-width — only the
   .section-inner is the colored, boxed card — so it contrasts against
   the colored blocks above and below it (see prints/call-to-action.png). */
.banner-cta {
  background: var(--color-white);
}

/* Softened 2026-08-11 (explicit user request — "melhorar como foi
   melhorado o banner de Quem Somos") from the original site's bold
   solid-gradient/white-text block into the same light, brand-tinted
   treatment already applied to .banner-cta--center below: distinct
   enough from the plain white sections around it to keep calling
   attention, without shouting. The button reverts to the site's
   standard solid-green .whatsapp-cta (the ghost/white-outline override
   this used to need only made sense against the dark gradient it no
   longer has). */
.banner-cta .section-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 2.5rem 3rem;
  background: var(--color-bg-light);
  color: var(--color-text-body);
  border-radius: var(--radius-card);
}

.banner-cta h2 {
  color: var(--color-brand-blue-dark);
  margin: 0;
  text-align: left;
  flex: 1 1 auto;
  padding-right: 2.5rem;
  border-right: 1px solid var(--color-border);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.banner-cta .whatsapp-cta {
  flex-shrink: 0;
}

/* Variant with no button — just a centered statement (Sobre nós).
   ".banner-cta.banner-cta--center" (both classes chained), not just
   ".banner-cta--center", so this beats ".banner-cta .section-inner"/h2
   on specificity regardless of file order — see the specificity note
   in AGENTS.md. */
.banner-cta.banner-cta--center .section-inner {
  justify-content: center;
  text-align: center;
}

.banner-cta.banner-cta--center h2 {
  border-right: none;
  padding-right: 0;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .banner-cta .section-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .banner-cta h2 {
    padding-right: 0;
    padding-bottom: 1.5rem;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
  }
}

/* Closing CTA banner (reused across pages): title left, narrower button
   column on the right. Full-bleed + zero bottom spacing on purpose — it's
   meant to sit flush against the footer (see the "glued CTA" rule next to
   .site-footer's full-bleed exclusion below), on every page except Contato. */
.final-cta {
  background: var(--color-bg-light);
}

.final-cta .section-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.final-cta__text {
  flex: 3 1 320px;
  text-align: left;
}

.final-cta__text h2,
.final-cta__text p {
  margin: 0;
}

/* The heading is a dynamic per-service question ("Quer saber mais sobre
   {{ service.title }}?") on servico.njk — long service names wrapped to
   3 lines at the bare 48px global h2 size. Scoped down site-wide since
   this banner is a narrow "final nudge", not a page hero. */
.final-cta__text h2 {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.25;
}

.final-cta__text h2 + p {
  margin-top: 0.5rem;
}

.final-cta__text p {
  margin-top: 0.5rem;
}

.final-cta__action {
  flex: 1 1 180px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .final-cta .section-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* .final-cta__text/.final-cta__action's flex-basis (320px/180px) sizes
     the desktop row's WIDTH — in this stacked column layout the same
     basis would size HEIGHT instead, inflating both blocks. Reset it. */
  .final-cta__text,
  .final-cta__action {
    flex-basis: auto;
  }

  .final-cta__action {
    justify-content: flex-start;
  }
}

/* Split section (text + highlight card): full-bleed soft gradient behind
   plain text on the left, solid dark card on the right — matches the
   reference print exactly (docs/../prints/FireShot...Home...png). */
.split-section {
  background: linear-gradient(120deg, var(--color-bg-light) 0%, var(--color-bg-blue-tint) 100%);
}

.split-section .section-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: stretch;
}

.split-section__text,
.split-section__highlight {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-section__text .section-title {
  text-align: left;
}

.split-section__highlight {
  background: var(--gradient-footer);
  color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 2.5rem;
}

.split-section__highlight h3 {
  color: var(--color-white);
  font-size: 1.4rem;
}

.check-list {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.check-list .icon {
  color: var(--color-cta-green);
}

.testimonials-section {
  background: var(--gradient-cta-block);
  color: var(--color-white);
}

.testimonials-section__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
}

.testimonials-section__heading {
  flex: 3 1 200px;
}

.testimonials-section__heading .section-title,
.testimonials-section__heading .eyebrow {
  text-align: left;
}

.testimonials-slider {
  flex: 7 1 340px;
  min-width: 0;
}

/* Below lg, heading+slider sharing one row leaves each testimonial card
   too narrow to be comfortable (they never overflow — min-width:0 already
   prevents that — but they get visually cramped). Stack instead of split. */
@media (max-width: 768px) {
  .testimonials-section__heading,
  .testimonials-slider {
    flex-basis: 100%;
  }
}

.testimonials-pair {
  justify-content: flex-start;
  align-items: stretch;
  gap: 1.25rem;
  flex-wrap: nowrap;
  position: relative;
}

/* Big faint quote mark behind the cards, matching the reference layout */
.testimonials-pair__mark {
  position: absolute;
  top: -2.5rem;
  right: 0;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.testimonial-card {
  /* .testimonial-card is a <blockquote> — resets the browser's default
     1em/40px UA margin, which was silently eating ~80px of width per
     card and making the .testimonials-pair gap look 6x larger than the
     1.25rem actually set (40px card margin + gap + 40px card margin). */
  margin: 0;
  box-shadow: none;
  background: var(--color-white);
  color: var(--color-text-body);
  text-align: left;
  flex: 1 1 0;
  min-width: 0;
  max-width: 420px;
  max-height: 560px;
  padding: 1.75rem;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .testimonials-pair {
    flex-wrap: wrap;
  }

  .testimonial-card {
    flex-basis: 100%;
  }
}

.testimonial-card p {
  margin: 0 0 1rem;
  font-style: italic;
}

.testimonial-card footer {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-eyebrow);
  color: var(--color-brand-blue-dark);
}

.legal-section {
  max-width: 760px;
}

.legal-section h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
}

.legal-section h2:first-child {
  margin-top: 0;
}

.legal-section p,
.legal-section ul {
  margin: 0.75rem 0 0;
  line-height: var(--line-height-body);
}

.legal-section ul {
  padding-left: 1.25rem;
}

.legal-section li {
  margin-bottom: 0.4rem;
}

.legal-section li::marker {
  color: var(--color-brand-blue-dark);
}

.legal-section hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2.5rem 0 1.5rem;
}

.legal-section__meta {
  color: var(--color-text-body);
  font-size: var(--font-size-small);
  line-height: 1.6;
}

.faq-section details {
  border-bottom: 1px solid var(--color-border);
  padding: 1.1rem 0;
}

.faq-section summary {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.faq-section summary::marker {
  color: var(--color-brand-blue-dark);
}

.faq-section p {
  margin: 0.75rem 0 0;
}

/* Solid-color benefit cards on dedicated service pages (different treatment
   from the light benefit pills used in the service-card grid on Home /
   Serviços — matches the reference prints for each service page). */
.benefit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.benefit-card {
  background: var(--color-brand-blue);
  color: var(--color-white);
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--radius-card);
}

.benefit-card h3 {
  color: var(--color-white);
  font-size: 1.2rem;
  margin: 0.75rem 0 0.75rem;
}

.benefit-card p {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.95;
}

/* Pitch section: service-specific intro copy + optional "approach" list.
   Scoped smaller than the benefits ".section-title" above it — both used
   the same bare 48px global h2 before, reading as the same hierarchy
   level despite being a section label vs. a full marketing sentence. */
.pitch-section .section-title {
  text-align: left;
  max-width: 760px;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.pitch-section p {
  max-width: 900px;
  margin: 0.75rem 0 0;
}

/* Redesigned 2026-08-10 (explicit user request to move away from the
   original site's solid-fill/all-caps "fake button" treatment — see the
   reference prints, e.g. DevOps) — a quieter tinted callout with a left
   accent border and icon instead: still reads as a highlighted divider
   between the pitch copy and the approach steps, without shouting. */
.approach-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-bg-light);
  border-left: 4px solid var(--color-brand-blue);
  border-radius: var(--radius-button);
  padding: 1rem 1.5rem;
  margin: 2.5rem 0 2rem;
}

.approach-banner__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-brand-blue-dark);
}

.approach-banner h2 {
  color: var(--color-brand-blue-dark);
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

.approach-list {
  display: grid;
  gap: 1.75rem;
}

.approach-list h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  color: var(--color-text-heading);
  margin: 0 0 0.4rem;
}

.approach-list p {
  margin: 0;
  max-width: 900px;
}

/* EasyIDP page: logo card straddles the title-bar/white boundary via
   negative margin (see prints/FireShot Capture 013), then two reusable
   grid patterns for the comparison and highlights sections below it. */
.easyidp-logo-section {
  text-align: center;
}

.easyidp-logo-card {
  display: inline-block;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
  margin-top: -110px;
}

@media (max-width: 640px) {
  .easyidp-logo-card {
    margin-top: -50px;
  }
}

.easyidp-logo-card img {
  display: block;
  width: 240px;
  height: 240px;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius-button);
}

.compare-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 2.5rem;
  margin-top: 2rem;
}

.compare-columns h3 {
  font-size: 1.15rem;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
  text-align: left;
}

/* Integração de Software page: unique text + diagram layout, no benefit
   cards or approach banner (see services.js "diagram" field). */
.diagram-section {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
}

.diagram-section__text {
  flex: 1 1 420px;
}

.diagram-section__image {
  flex: 1 1 360px;
}

@media (max-width: 768px) {
  .diagram-section__text {
    flex-basis: 100%;
  }

  .diagram-section__image {
    flex-basis: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

.diagram-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.diagram-bullet__icon {
  color: var(--color-brand-blue-dark);
  flex-shrink: 0;
  margin-top: 0.15em;
}

/* Contato page: info sidebar (address/social) + form, two columns */
.contact-section {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.contact-section__info {
  flex: 1 1 260px;
}

.contact-section__info .section-title {
  text-align: left;
  font-size: 1.4rem;
}

.contact-section__info hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

.contact-section__social {
  margin-top: 1.25rem;
}

.contact-section__social a {
  background: var(--color-bg-blue-tint);
  color: var(--color-brand-blue-dark);
}

.contact-form {
  flex: 2 1 480px;
  margin-top: 0;
  max-width: none;
}

/* Stand-in for the contact form while email sending is unavailable
   (see the TODO comment above the commented-out <form> in contato.njk). */
.contact-section__cta {
  flex: 2 1 480px;
  align-self: flex-start;
  background: var(--color-bg-light);
  border-radius: var(--radius-card);
  padding: 3rem 2.5rem;
  text-align: center;
}

.contact-section__cta h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.contact-section__cta p {
  margin: 0.75rem auto 0;
  max-width: 440px;
}

.contact-section__cta .btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.75rem;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

@media (max-width: 640px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

.contato-hero__subtitle {
  font-size: 1.3rem;
  font-weight: 500;
}

.contact-form {
  display: grid;
  gap: 1.1rem;
  max-width: 640px;
  margin-top: 1.75rem;
}

.contact-form label {
  display: block;
  font-weight: var(--font-weight-eyebrow);
  margin-bottom: 0.35em;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  padding: 0.75em 0.9em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  background: var(--color-white);
  transition: border-color 0.15s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-brand-blue-dark);
}

.contact-form .field-error {
  color: #b3261e;
  font-size: var(--font-size-small);
  margin-top: 0.35em;
  display: none;
}

.contact-form .field-error.is-visible {
  display: block;
}

.contact-form .checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.contact-form .checkbox-field input {
  width: auto;
  margin-top: 0.2em;
}

.contact-form button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.5rem;
  background: var(--color-brand-purple-dark);
  color: var(--color-white);
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 0.85em 2.5em;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.contact-form button:hover:not(:disabled) {
  background: var(--color-brand-purple);
  transform: translateY(-1px);
}

.contact-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form .form-status {
  font-weight: var(--font-weight-eyebrow);
}

.contact-form .form-status:empty {
  display: none;
}

.contact-form .form-status[data-state="error"] {
  color: #b3261e;
}

.contact-form .form-status[data-state="success"] {
  color: #1e7a34;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  main > section {
    padding: 2.5rem 1.25rem;
  }

  .section-inner {
    padding: 2.5rem 1.25rem;
  }

  .hero--secondary {
    padding: 2.5rem 1.5rem;
  }

  .split-section__highlight {
    padding: 1.75rem;
  }

  .contact-form button {
    width: 100%;
  }
}

/* Quem somos: Missão / Valores split, and the "Nossos Principais
   Executivos" panel — matches the reference print exactly. */
.mission-values-section {
  background: var(--color-bg-light);
}

.mission-values-section .section-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.mission-values-section__mission,
.mission-values-section__values {
  flex: 1 1 360px;
}

.mission-values-section__mission .section-title {
  text-align: left;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

.value-card {
  background: var(--color-white);
  color: var(--color-brand-blue-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card);
}

.leadership-section {
  background: var(--color-white);
  text-align: center;
}

.leadership-panel {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2.5rem 2rem;
}

.leadership-panel .eyebrow {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 1.75rem;
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
  text-align: left;
}

.executive-card {
  background: var(--color-bg-light);
  border-radius: var(--radius-card);
  padding: 2rem;
  text-align: center;
}

/* Ring + shadow gives the two photos a consistent, polished frame
   despite their source shots differing (studio vs. casual/selfie) —
   can't reshoot the photos, but this makes them read as one set. */
.executive-card .placeholder-image {
  border-radius: 50%;
  margin: 0 auto 1rem;
  border: 4px solid var(--color-white);
  box-shadow: var(--shadow-card);
  object-fit: cover;
}

.executive-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.3rem;
  letter-spacing: 0.2px;
}

/* 2026-08-10 (explicit user request): name + role centered as a nicer,
   badge-style highlight instead of plain small text — role becomes a
   pill so it reads as a label, not another line of body copy. Selector
   is ".executive-card p.executive-card__role" (not just the bare class)
   so it beats ".executive-card p" below on specificity regardless of
   file order — see the specificity note in AGENTS.md. */
.executive-card p.executive-card__role {
  display: inline-block;
  text-align: center;
  color: var(--color-brand-blue-dark);
  background: var(--color-white);
  font-weight: var(--font-weight-eyebrow);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin: 0 0 1.25rem;
}

.executive-card p {
  text-align: left;
  margin: 0 0 0.75rem;
}

.executive-card__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-brand-blue-dark);
  color: var(--color-white);
  margin-top: 0.5rem;
}

.leadership-section__closing {
  max-width: 760px;
  margin: 2.5rem auto 0;
  line-height: 1.6;
}

/* Serviços page: heading style, TaaS spanning full width as the odd last
   card, gradient contact section, and the two support/FAQ cards below it. */
.solucoes-heading {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-body);
  font-size: 1.3rem;
}

.services-grid--solucoes .service-card:last-child {
  grid-column: 1 / -1;
}

.services-grid--solucoes .service-card:last-child .service-card__benefits {
  justify-content: center;
}

.services-contact-section {
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--color-brand-purple-dark) 85%, transparent) 0%, color-mix(in srgb, var(--color-brand-blue) 85%, transparent) 100%),
    url("/assets/img/service-page-form-bg.jpg");
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  text-align: center;
}

.services-contact-section h2 {
  color: var(--color-white);
}

.services-contact-section__cta-text {
  max-width: 480px;
  margin: 0.75rem auto 0;
  opacity: 0.9;
}

/* White button on the section's dark gradient — same flip used by
   .hero--secondary .whatsapp-cta for the same contrast reason. Compound
   selector (.btn-solid.services-contact-section__cta-button) on purpose,
   same specificity-tiebreak reasoning as elsewhere in this file — beats
   ".btn-solid:hover" regardless of file order, see AGENTS.md. */
.services-contact-section__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.75rem;
}

.btn-solid.services-contact-section__cta-button {
  background: var(--color-white);
  color: var(--color-brand-purple-dark);
}

.btn-solid.services-contact-section__cta-button:hover {
  background: var(--color-bg-light);
}

.support-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.75rem;
  margin-top: 1rem;
}

.support-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  text-align: center;
  color: var(--color-brand-blue-dark);
}

.support-card h3 {
  color: var(--color-text-heading);
  margin: 0.75rem 0 0.5rem;
}

.support-card p {
  color: var(--color-text-body);
  margin: 0 0 1.25rem;
}