/* ==========================================================================
   DESIGN SYSTEM VARIABLE TOKENS
   ========================================================================== */
:root {
  /* Color Palette (matching HSL variables from design system) */
  --background: #FFFFFF;
  --foreground: #0F1729;
  --surface: #E8EDED;
  --muted: #F1F5F9;
  --muted-foreground: #65758B;
  --accent: #E6F4CD;
  --border: #E1E7EF;
  --input: #CDD7E5;
  --divider: #D0D5DD;
  --divider-strong: #6B7C94;
  --overlay: #0B111E;
  
  /* Semantic Tokens mapping */
  --primary: #224C4F;            /* Primary is Deep Teal/Forest Green */
  --primary-foreground: #F8FAFC;
  --primary-surface: #EEFBFC;
  --primary-dark: #1A3C3E;       /* Darker shade for hover state */
  
  --secondary: #8BC53F;          /* Secondary is Lime Green Accent */
  --secondary-foreground: #F8FAFC;
  --secondary-surface: #F7FEE7;
  --secondary-dark: #76AB34;     /* Darker lime for hover state */

  --info: #0284C5;
  --info-surface: #F0F9FF;
  --info-border: #A8D8F0;
  
  --success: #2BA166;
  --success-surface: #EDFDF5;
  --success-border: #A8E6C7;

  --warning: #91400D;
  --warning-surface: #FFFBEB;
  --warning-border: #F4C79A;

  --destructive: #E94447;
  --destructive-surface: #FFF0F1;
  --destructive-border: #F4BEC3;

  /* Font settings */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* Height of the fixed .header-nav at rest (measured: 87.2px at desktop,
     85px at phone widths — 1.5rem padding twice, plus the logo row and the
     hairline border). The header is `position: fixed` with nothing in the flow
     offsetting it, so it sits ON TOP of the first 87px of every hero. Both
     heroes add this to their top padding, which is what puts their copy on the
     centre of the *visible* image rather than the centre of the section — see
     .hero-section. Only the at-rest height matters: .header-nav.scrolled is
     shorter, but by the time it shrinks the hero has scrolled away. */
  /* The translucent panel behind hero copy. One token because both hero
     components use it — .hero-cta-card on the six inner pages and .hero-text on
     the homepage — and they were previously duplicate literals that could drift
     apart. Raising the alpha darkens the panel and hides more of the photo;
     lowering it shows more photo at the cost of contrast against white text.
     Paired with `backdrop-filter: blur(6px)`, which softens whatever is behind
     and does more for legibility than the alpha alone. */
  --hero-scrim: rgba(8, 28, 20, 0.4);

  --header-h: 88px;

  /* Shared hero height. Both hero components (.hero-section on the homepage,
     .hero-forest-container on inner pages) apply this as `min-height`, so every
     page's fold sits in the same place. It is a floor rather than a fixed
     height: a hero whose copy is taller than this — phone widths especially —
     grows instead of clipping.
     640px is not arbitrary: the tallest the homepage panel gets at any desktop
     width is 415px, at ~1010px where `flex: 0 0 46%` is narrowest and the
     English title wraps to three lines. 415 + --header-h + 4rem + 4rem = 631,
     so 640 keeps the homepage pinned to the same height as the inner pages
     instead of stretching past them. English is the constraint here, not the
     longer-looking PT/ES titles — those wrap to two lines, not three. */
  --hero-h: 640px;
}

/* Dark Theme Variant override applied to sections with class .section-dark */
.section-dark,
.footer {
  --background: #030711;
  --foreground: #E1E7EF;
  --surface: #182130;
  --muted: #1E2B3E;
  --muted-foreground: #97A3B4;
  --border: #25344B;
  --input: #364C6D;
  --divider: #5A687C;
  --divider-strong: #CAD0D8;
  --overlay: #010309;
  --primary: #9CC6C9;            /* Light Teal for dark theme visibility */
  --primary-foreground: #0F1729; /* Dark text for overlay on light primary color */
  --primary-surface: #203A3C;
}

/* ==========================================================================
   BASE & RESET STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* `clip` rather than `hidden`: both suppress horizontal overflow, but `hidden`
     makes <body> a scroll container and that breaks `position: sticky` in
     descendants (see .section-nav). */
  overflow-x: clip;
}

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

/* Layout Containers & Spacings */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
  background-color: var(--muted);
}

.section-grey {
  background-color: var(--muted);
}

.section-header {
  max-width: 48rem;
  margin: 0 auto 3.5rem auto;
  text-align: center;
}

/* Grids & Utility Layouts */
.grid {
  display: grid;
  gap: 2rem;
}

.grid-2 {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.grid-3 {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.grid-4 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.grid-5 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
}

.row-split {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .row-split {
    flex-direction: row;
    align-items: center;
  }
  .row-split > * {
    flex: 1;
    width: 50%;
  }
}

/* ==========================================================================
   TYPOGRAPHY PRESETS
   ========================================================================== */
.heading-display {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.heading-title-lg {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}

.heading-title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.heading-title-sm {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.text-body {
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 1rem;
}

.text-body-sm {
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 1rem;
}

.text-caption {
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.text-overline {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.75rem;
  display: block;
}

.section-dark .text-overline {
  color: var(--secondary);
}

/* Poppins (Google Fonts) — opt-in per element; only loaded on pages that link it */
.font-poppins {
  font-family: "Poppins", var(--font-sans);
}

/* ==========================================================================
   BUTTON COMPONENT STYLES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Sizes */
.btn-sm {
  height: 32px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}

.btn-md {
  height: 40px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-lg {
  height: 44px;
  padding: 0.75rem 2rem;
  font-size: 0.875rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Tone Variants */
.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover {
  background-color: rgba(34, 76, 79, 0.9);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.btn-secondary:hover {
  background-color: rgba(139, 197, 63, 0.8);
}

.btn-neutral {
  background-color: var(--background);
  border: 1px solid var(--input);
  color: var(--foreground);
}

.btn-neutral:hover {
  background-color: var(--muted);
  border-color: var(--input);
}

.btn-outline {
  background-color: var(--primary-surface);
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* Sign in sits on the muted header bar, so it uses a white fill instead of
   .btn-outline's tinted one. The hover is restated because an id selector
   outranks .btn-outline:hover and would otherwise freeze it white. */
/* Below 1024px these move into the hamburger drawer (.mobile-nav-auth) */
#navLoginCta,
#navSignupCta {
  display: none;
}

@media (min-width: 1024px) {
  #navLoginCta,
  #navSignupCta {
    display: inline-flex;
  }
}

#navLoginCta {
  background-color: #FFFFFF;
}

#navLoginCta:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}


/* ==========================================================================
   NAVIGATION HEADER
   ========================================================================== */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(241, 245, 249, 0.95); /* Muted light background */
  backdrop-filter: blur(8px);
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal), padding var(--transition-normal);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

.header-nav.scrolled {
  background-color: rgba(241, 245, 249, 0.98);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 0;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img {
  height: 36px;
  width: auto;
  transition: transform var(--transition-fast);
}

.nav-logo:hover img {
  transform: scale(1.02);
}

.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
}

.nav-links li {
  position: relative;
}

.nav-link {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.925rem;
  transition: color var(--transition-fast);
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link:hover,
.nav-link.active {
  color: var(--secondary-dark);
}

/* Dropdown Menu Styles */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0; /* Remove top and bottom padding */
  min-width: 160px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 100;
  overflow: hidden; /* Clips links at rounded corners */
}

.nav-links li:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 0.5rem 1.25rem;
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown a:hover {
  background-color: var(--accent);
  color: var(--primary);
}

/* Nav Actions Section */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Language Dropdown Button & Menu */
.lang-dropdown-container {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-trigger {
  background: transparent;
  border: none;
  padding: 0.5rem 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.925rem;
  color: var(--foreground);
  cursor: pointer;
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.lang-trigger:hover {
  color: var(--secondary-dark);
}

.lang-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  transform: translateY(10px);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0;
  min-width: 140px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 100;
  overflow: hidden; /* Clips buttons at rounded corners */
}

.lang-dropdown-container:hover .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown-menu button {
  display: block;
  width: 100%;
  padding: 0.5rem 1.25rem;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--foreground);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lang-dropdown-menu button:hover {
  background-color: var(--accent);
  color: var(--primary);
}

/* Hamburger mobile button */
.hamburger {
  display: block;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 60;
  width: 36px;
  height: 36px;
  position: relative;
}

@media (min-width: 1024px) {
  .hamburger {
    display: none;
  }
}

.hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 20px;
  background: var(--foreground);
  border-radius: 9px;
  opacity: 1;
  left: 8px;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.hamburger span:nth-child(1) { top: 12px; }
.hamburger span:nth-child(2) { top: 18px; }
.hamburger span:nth-child(3) { top: 24px; }

.hamburger.open span:nth-child(1) {
  top: 18px;
  transform: rotate(135deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  left: -20px;
}

.hamburger.open span:nth-child(3) {
  top: 18px;
  transform: rotate(-135deg);
}

/* Mobile Nav Drawer & Overlay backdrop */
.backdrop-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(11, 17, 30, 0.4);
  backdrop-filter: blur(4px);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal);
}

.backdrop-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 280px;
  background-color: var(--background);
  box-shadow: var(--shadow-premium);
  z-index: 45;
  padding: 5rem 2rem 2rem;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
}

.mobile-nav-panel.open {
  transform: translateX(0);
}

.mobile-nav-panel ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Scoped to the nav list: unscoped, this outranks .btn-secondary/.btn-outline
   on colour and would flatten the auth buttons below into plain text links. */
.mobile-nav-panel ul a {
  text-decoration: none;
  font-weight: 600;
  color: var(--foreground);
  font-size: 1.1rem;
  transition: color var(--transition-fast);
}

.mobile-nav-panel ul a:hover {
  color: var(--secondary);
}

/* Sign in / Sign up live here below 1024px, where the header pair is hidden */
.mobile-nav-auth {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 1024px) {
  .mobile-nav-auth {
    display: none;
  }
}

/* ==========================================================================
   HOMEPAGE CUSTOM COMPONENT STYLES
   ========================================================================== */
.hero-forest-container {
  width: 100%;
  background-image: url('../images/hero-bg.webp?v=3cc3a941d2');
  background-size: cover;
  background-position: center;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  min-height: var(--hero-h);
  display: flex;
  align-items: center;
  box-shadow: none;
}

/* Segment imagery — 1920x1080 sources; `cover` above crops to the --hero-h
   container without distorting the aspect ratio. */
.hero-forest-container.hero-buildings {
  background-image: url('../images/hero_buildings.webp?v=ecd0678acf');
}

.hero-forest-container.hero-industry {
  background-image: url('../images/hero_industry.webp?v=2c996934bc');
}

.hero-forest-container.hero-retail {
  background-image: url('../images/hero_retail.webp?v=180681d308');
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Horizontal 1.5rem keeps the container's gutter so hero copy lines up with
     the nav — without it, left-aligned copy sits flush against the viewport
     edge.
     Vertical padding mirrors .hero-section exactly (`--header-h + 4rem` top,
     `4rem` bottom) so the card lands on the centre of the *visible* image
     rather than the centre of the section, which the fixed header overlaps by
     87px. The old `8rem` / `6rem` was an asymmetry of the wrong size — it
     happened to nudge the card down, but by 16px rather than the 43.6px the
     header actually costs. */
  padding: calc(var(--header-h) + 4rem) 1.5rem 4rem;
  color: #FFFFFF;
}

/* Hero CTA card layout styles (used on inner pages, e.g. a-plataforma.html) */
.hero-cta-card {
  border-radius: var(--radius-xl);
  padding: 2.4rem 2rem;
  max-width: 480px;
  /* Semi-transparent scrim: keeps copy legible while the image reads through */
  background-color: var(--hero-scrim);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-cta-card h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.hero-cta-card p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0;
}

/* Platform screenshots slider — overlaps the bottom of the hero section */
.platform-slider-section {
  background-color: var(--muted);
  padding-bottom: 4rem;
}

.platform-slider-wrapper {
  position: relative;
  z-index: 3;
  max-width: 860px;
  /* Negative top margin is what lifts the card over the hero's bottom edge, so
     it is measured from the hero's bottom and is unaffected by --hero-h. The
     a-plataforma hero carries no copy of its own, so there is nothing for the
     card to collide with as it rises.

     The lift is 65% of the card's own height, so that fraction of it sits
     inside the hero photo at every width. CSS cannot read an element's own
     height, so the height is reconstructed: the card is as wide as the
     container allows up to its 860px cap, its image is that minus the card's
     padding and is sized by the slider's 3022/1894 ratio, and the dots row
     adds its padding plus the 7px dot. Computing it rather than hardcoding a
     pixel value is what keeps the 60% true on a phone, where the card is a
     third of its desktop height and a fixed -373px would leave it floating
     inside the hero. Keep these numbers in step with .slider-slide img's
     aspect-ratio and .slider-nav-dots' padding. */
  --slider-card-w: min(860px, min(1280px, 100vw) - 3rem);
  --slider-card-h: calc(
    (var(--slider-card-w) - 1.25rem) * 1894 / 3022
    + 1.25rem
    + 0.875rem + 7px + 0.375rem
  );
  margin: calc(var(--slider-card-h) * -0.65) auto 0 auto;
  background-color: var(--background);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-premium);
  padding: 0.625rem;
}

.slider-viewport {
  width: 100%;
  overflow: hidden;
  border-radius: 0.25rem;
}

.slider-container {
  display: flex;
  transition: transform 0.6s ease;
}

.slider-slide {
  flex: 0 0 100%;
  width: 100%;
  background-color: var(--muted);
}

.slider-slide img {
  display: block;
  width: 100%;
  height: auto;
  /* The sources' own dimensions, so the screenshots show uncropped — these are
     dense dashboard UIs and any crop cost real content. Replaces a fixed
     `max-height: 320px`, which combined with `object-fit: cover` meant the
     height cap was silently deciding the crop, and re-deciding it whenever the
     card's width changed (740px wide gave 2.31:1 and cut ~29%; 860px gave
     2.63:1 and cut ~37%).
     Written as the pixel dimensions rather than `height: auto` on purpose: it
     pins the viewport's height so a slide of a different shape gets cropped by
     `cover` instead of making the slider jolt as it scrolls past. If you swap
     the screenshots for a different aspect, update this pair — it was
     3500 / 2121 for the old images/platform/sist*.png set.
     The current images/screenshots/slider_*.png are 1700px wide, downscaled
     from ~3022x1894 captures. Their ratios vary by a pixel or two between
     shots, so this is the middle of that range; the worst-cropped slide loses
     about 0.15%. The fraction is kept in the original capture's numbers
     because that is the ratio being described, not the stored pixel size. */
  aspect-ratio: 3022 / 1894;
  object-fit: cover;
}

.slider-nav-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 0 0.375rem 0;
}

.slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background-color: var(--border);
  cursor: pointer;
  transition: background-color var(--transition-fast), width var(--transition-fast);
}

.slider-dot.active {
  width: 18px;
  border-radius: 4px;
  background-color: var(--secondary);
}

@media (max-width: 767px) {
  .platform-slider-section {
    padding-bottom: 2.5rem;
  }

  .platform-slider-wrapper {
    margin-top: -90px;
    padding: 0.4rem;
  }

  .slider-slide img {
    max-height: 200px;
  }
}

.hero-cta-card span.bold {
  font-weight: 700;
  color: #FFFFFF;
}

/* Homepage hero (redesigned) */
.hero-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: url("../images/hero-bg.webp?v=3cc3a941d2") center center / cover no-repeat;
  /* Sized like .hero-forest-container: --hero-h drives the box and the copy is
     centred inside it. The padding used to be what made this hero tall
     (10rem/5rem ≈ 240px, which is why the homepage ran ~220px taller than every
     other page); it is now only the breathing room that applies when the copy
     outgrows --hero-h and the box has to stretch.
     The extra --header-h on top is the vertical-centring fix. The fixed header
     covers the first 87px of this section, so `align-items: center` alone put
     the panel on the section's centre — which is 43.6px (half the header) above
     the centre of the strip you can actually see. Padding the top by the header
     height moves the content box down so its centre coincides with the visible
     band's centre. Keep the two paddings as `--header-h + X` / `X`: any other
     ratio reintroduces the offset. */
  min-height: var(--hero-h);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 4rem) 0 4rem;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-grid {
    flex-direction: row;
    justify-content: space-between;
    gap: 2.5rem;
  }
}

.hero-text {
  max-width: 560px;
  text-align: center;
  color: #FFFFFF;
  /* Semi-transparent scrim: keeps copy legible while the image reads through */
  background-color: var(--hero-scrim);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
}

@media (min-width: 1024px) {
  .hero-text {
    text-align: left;
    flex: 0 0 46%;
  }
}

/* Laptop mockup in the right column of the homepage hero.
   Hidden below 1024px: that is the breakpoint where .hero-grid stops being a
   row, so there is no "right side" to sit on — it would stack under the copy
   and add ~400px to a hero that is already taller than the inner pages' on a
   phone. */
.hero-visual {
  display: none;
}

@media (min-width: 1024px) {
  .hero-visual {
    /* Takes the room .hero-text's `flex: 0 0 46%` leaves, and `align-items:
       center` on .hero-grid lines its centre up with the copy panel's. */
    display: flex;
    flex: 1 1 auto;
    /* Anchored right, then inset by the margin on the image below. Pinned hard
       to the right (plain flex-end) it sat on the container gutter; fully
       centred it sat too far in. The inset splits the difference. */
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
  }

  .hero-visual img {
    display: block;
    /* Both dimensions capped with `auto` on the other, so whichever binds first
       scales the image down without distorting it. The height cap is the hero's
       own arithmetic — --hero-h minus the header offset and both 4rem paddings,
       i.e. the full content area — so the mockup can never push the hero past
       640px and break its match with the inner pages. The 0.8 holds it at 80%
       of that, leaving air around it; raise it towards 1 to grow the mockup. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc((var(--hero-h) - var(--header-h) - 8rem) * 0.8);
    /* Distance from the container's right gutter. Roughly half the slack that
       full centring left, so the mockup sits right of centre without touching
       the edge. Increase to move it left, decrease to move it right. */
    margin-right: 4.5rem;
  }
}

.hero-overline {
  color: var(--secondary);
}

.hero-text .heading-display {
  color: #FFFFFF;
  /* Stepped down from the global .heading-display scale (which tops out at
     3.5rem). At that size the title wrapped to three 64px lines inside the
     narrow `flex: 0 0 46%` column, making the scrim panel taller than
     --hero-h minus .hero-section's 4rem padding — so the hero stretched past
     600px and the homepage stopped matching the inner pages again.
     The worst case is English at ~1010px, where the column is at its narrowest
     and "The energy management platform" wraps to three lines (panel 415px).
     Measured, not assumed: the PT and ES titles are longer as strings but wrap
     to only two lines (panel 365px), because English's "management" is a single
     wide unbreakable word. Check the English at ~1010px before raising this. */
  font-size: clamp(2rem, 4.5vw, 2.75rem);
}

.hero-sub {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 1024px) {
  .hero-actions {
    justify-content: flex-start;
  }
}

.btn-outline-inverse {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}

.btn-outline-inverse:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
}

/* Custom cards styling grid */
.feature-card {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium);
}

/* Ringed, not filled: a secondary-green outline round a transparent centre.
   The tinted fills these used to carry were removed deliberately — see
   Section 7 of DESIGN_SYSTEM.md. Matches .icon-list li i.
   Note: .check-list keeps its bare ::before check glyph with no ring. */
.feature-card-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}

/* Row layout for cards that place the icon inline next to the title, instead of stacked above it */
.feature-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.feature-card-heading .feature-card-icon {
  margin-top: 0.15rem;
}

.feature-card-heading .feature-card-icon {
  margin-bottom: 0;
}

.feature-card h3 {
  margin: 0;
  color: var(--foreground);
}

.feature-card-heading h3 {
  margin: 0;
  margin-top: 0.15rem;
}

.feature-card p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}


/* Solutions section cards — image header + text body */
.solution-card {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium);
}

.solution-card-image {
  display: block;
  width: calc(100% - 2.5rem);
  margin: 1.25rem 1.25rem 0 1.25rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.solution-card-body {
  padding: 2.1rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
}

.solution-card-body h3 {
  margin: 0;
  color: var(--primary);
}

.solution-card-features {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.solution-card-features h4 {
  margin: 0 0 0.35rem 0;
  color: var(--primary);
  font-size: 1rem;
  font-weight: 700;
}

.solution-card-features p {
  margin: 0;
}


/* ==========================================================================
   INDUSTRIES SECTION & ICONS
   ========================================================================== */
.industry-illustration-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.industry-illustration-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

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

@media (min-width: 640px) {
  .industry-pills-grid {
    gap: 0.85rem;
  }
}

.industry-pill-item {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

@media (min-width: 640px) {
  .industry-pill-item {
    padding: 0.8rem 1.1rem;
  }
}

.industry-pill-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.industry-pill-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: transform var(--transition-fast);
}

.industry-pill-item:hover .industry-pill-icon {
  transform: scale(1.15) rotate(2deg);
}

/* ==========================================================================
   PARTNERS SECTION BENEFITS & TIMELINE
   ========================================================================== */
.partners-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .partners-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .partners-benefits-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.partners-benefit-card {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.partners-benefit-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Partners Process Timeline Flow */
.partners-process-flow {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
}

@media (min-width: 1024px) {
  .partners-process-flow {
    flex-direction: row;
    justify-content: space-between;
  }
  .partners-process-flow::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: var(--border);
    z-index: 1;
  }
}

.partners-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .partners-process-step {
    flex: 1;
  }
}

.partners-process-step:hover .partners-step-num {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* ==========================================================================
   LOGO GRID & LOGO HVER OVERLAYS
   ========================================================================== */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .logo-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.logo-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: default;
  transition: box-shadow var(--transition-normal);
  height: 100px;
}

.logo-tile:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.logo-tile img {
  /* Logos are 300x174, so height binds before width: at 80px tall they render
     ~138px wide, inside the ~209px a tile offers at the 5-column breakpoint. */
  max-height: 80px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  /* Deliberately NOT transitioned. Animating this chain to `filter: none` makes
     the browser sweep hue-rotate from 143deg to 0deg, and with saturate(1478%)
     in the chain the midpoint of that sweep is a saturated red/orange flash.
     Snapping avoids crossing the hue wheel; the tile's box-shadow still eases. */
  /* Apply primary color (#224C4F) filter overlay directly to the logo pixels */
  filter: brightness(0) saturate(100%) invert(20%) sepia(21%) saturate(1478%) hue-rotate(143deg) brightness(96%) contrast(92%);
}

.logo-tile:hover img {
  filter: none;
}

/* ==========================================================================
   ACCORDIONS / FAQ (help.html)
   ========================================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--background);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--input);
  box-shadow: var(--shadow-sm);
}

.faq-item details {
  width: 100%;
}

.faq-item summary {
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hide default marker in Safari */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--muted-foreground);
  transition: transform var(--transition-fast);
}

.faq-item details[open] summary::after {
  transform: rotate(45deg);
  color: var(--primary);
}

.faq-content {
  padding: 0 1.5rem 1.25rem 1.5rem;
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* Sub-blocks inside a FAQ answer (used by the pricing conditions / API entries) */
.faq-subheading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 1.25rem 0 0.5rem 0;
}

.faq-subheading:first-child {
  margin-top: 0;
}

.faq-subheading-note {
  font-weight: 400;
  color: var(--muted-foreground);
}

.faq-rows {
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   PRICING TABLE COMPONENT
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  background-color: var(--background);
  border: 1px solid var(--secondary);
  border-radius: var(--radius-xl);
  padding: 3rem 2rem;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 1.25rem;
  position: relative;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium);
}

.pricing-card.popular {
  border-color: var(--secondary);
  border-width: 2px;
}

.pricing-card .heading-title-sm {
  text-align: center;
  font-size: 1.35rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.pricing-card .pricing-price-container {
  justify-content: center;
  margin-top: 0.25rem;
}

.pricing-card .pricing-price {
  color: var(--primary);
}

.pricing-card .pricing-price-container span:last-child {
  font-size: 1.15rem;
}

.pricing-badge {
  position: absolute;
  top: 0;
  right: 2rem;
  transform: translateY(-50%);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  letter-spacing: 0.05em;
}

.pricing-price-container {
  margin: 1.5rem 0 0.5rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.pricing-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--foreground);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.pricing-features li::before {
  content: '✓';
  color: var(--secondary-dark);
  font-weight: bold;
}

.pricing-divider {
  height: 1px;
  background-color: var(--border);
  border: none;
  margin: 0.5rem 0;
}

.pricing-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pricing-specs li {
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

/* 4-column variant for tiered plan grids (Preçário) */
@media (min-width: 1024px) {
  .pricing-grid-4 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    column-gap: 1.5rem;
  }
}

/* Card content split into 3 areas (header/features/extra) so they align
   in height across all cards via CSS subgrid, set on .pricing-card above */
.pricing-card-top,
.pricing-card-features,
.pricing-card-extra {
  min-height: 0;
}

.pricing-card-top {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.pricing-card-top > *:last-child {
  margin-top: auto;
}

.pricing-card:not(.popular) .btn-outline {
  background-color: var(--background);
}

/* Special offer callout inside a plan card */
.pricing-offer-box {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-dark);
}

.pricing-offer-box strong {
  display: block;
  color: var(--primary-foreground);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.pricing-offer-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pricing-offer-box li {
  color: var(--secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ==========================================================================
   PRICE SCALE CARDS (Preçário — size/data-point based pricing)
   ========================================================================== */
.price-scale-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto repeat(6, auto);
  gap: 1rem;
}

@media (min-width: 768px) {
  .price-scale-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.price-scale-cards.price-scale-cards-compact {
  grid-template-rows: auto repeat(2, auto);
}

.price-scale-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  background-color: var(--background);
  border: 1px solid var(--secondary);
  border-radius: var(--radius-xl);
  padding: 1.8rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.price-scale-cards-compact .price-scale-card {
  grid-row: span 3;
}

.price-scale-card-header {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary);
  padding-bottom: 1rem;
}

.price-scale-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.price-scale-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.price-scale-row-alt .price-scale-size,
.price-scale-row-alt .price-scale-value {
  color: var(--secondary-dark);
}

.price-scale-size {
  font-weight: 700;
  color: var(--foreground);
  font-size: 0.9rem;
}

.price-scale-dp {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.price-scale-value {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.05rem;
}

.price-scale-value span {
  font-weight: 400;
  color: var(--muted-foreground);
  font-size: 0.85rem;
}

/* Other Conditions / API mini cards (Preçário) */
.condition-card {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.condition-card.condition-card-dark {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

.condition-card-title {
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 1rem;
}

.condition-card.condition-card-dark .condition-card-title {
  color: var(--primary-foreground);
}

.condition-card-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}

.condition-card.condition-card-dark .condition-card-price {
  color: var(--secondary);
}

.condition-card-desc {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-top: 0.35rem;
}

.condition-card.condition-card-dark .condition-card-desc {
  color: rgba(248, 250, 252, 0.75);
}

.condition-card-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.condition-card-rows .row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.condition-card-rows .row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.condition-card-rows .row-label {
  color: var(--foreground);
  font-weight: 600;
}

.condition-card-rows .row-value {
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   TAB SWITCHERS (a-plataforma.html)
   ========================================================================== */
.vertical-tab-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  list-style: none;
  margin-top: 0;
  padding-left: 0;
}

/* Horizontal pill tabs (precario.html category switcher) */
.vertical-tab-list {
  justify-content: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.tab-pill {
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background-color: transparent;
  text-align: left;
}

.tab-pill:hover {
  color: var(--primary);
  background-color: var(--muted);
}

.tab-pill.active {
  /* Lime pill with white text, matching .btn-secondary. Note this is ~2.0:1
     against the lime, below the WCAG AA 4.5:1 for a label this size — the
     same trade-off every --secondary button on the site already makes. */
  color: var(--secondary-foreground);
  background-color: var(--secondary);
}

.section-dark .tab-pill:hover {
  color: var(--secondary);
  background-color: var(--muted);
}

.section-dark .tab-pill.active {
  color: var(--primary-foreground);
  background-color: var(--secondary-dark);
}

/* Tab Panels */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: tabFadeIn var(--transition-normal);
}

/* In-page section navigation (a-plataforma Funcionalidades / Componentes).
   Distinct from .tab-pill/.tab-panel above, which genuinely swap content on
   precario.html: here every block stays visible and the links only scroll. */
/* Sticks under the main navbar while its own section is in view, then releases
   at the end of .tabs-split-container — i.e. when the next section takes over.
   56px tucks it just beneath the scrolled header (61px tall) so no sliver of
   content shows between them; the header's z-index 50 hides the overlap. */
.section-nav {
  position: sticky;
  top: 56px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 1rem 0;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
}

/* Matches .nav-link in the main navbar; the current section is marked with the
   primary green rather than the navbar's --secondary-dark. */
.section-nav-link {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.925rem;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Reserved on every link so gaining the underline doesn't shift the row */
  border-bottom: 2px solid transparent;
}

.section-nav-link:hover,
.section-nav-link:focus-visible,
.section-nav-link.active {
  color: var(--primary);
}

.section-nav-link.active {
  border-bottom-color: var(--primary);
}

.section-stack {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* Clears both the fixed header (56px) and the sticky .section-nav above it.
   --section-nav-h is measured and published by main.js; the fallback covers a
   single unwrapped row if scripting is unavailable. */
.section-block {
  scroll-margin-top: calc(56px + var(--section-nav-h, 75px) + 1.5rem);
}

.tabs-split-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Section block: two columns either way. Where the block has an image the text
   (title, description, list) sits opposite it; where it does not, the title and
   description sit opposite the list. Every other block flips the order. */
.section-block-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section-block-intro,
.section-block-content,
.section-block-text {
  min-width: 0;
}

.section-block-content > * + *,
.section-block-text > * + * {
  margin-top: 1.5rem;
}

.section-block-media img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

@media (min-width: 1024px) {
  .section-block-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 3.5rem;
  }

  .section-block-body > * {
    flex: 1 1 50%;
  }

  .section-stack > .section-block:nth-child(even) .section-block-body {
    flex-direction: row-reverse;
  }
}

/* Icon lists — like .check-list but each row carries its own Font Awesome
   glyph in the markup, for lists where the items are distinct things rather
   than a set of confirmations. */
.icon-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* Ringed glyph. Fixed square + flex centring keeps every ring identical and the
   labels aligned, despite Font Awesome glyphs having different intrinsic widths.
   The ring is a border, not a fill — icons stay background-free (see Section 7
   of DESIGN_SYSTEM.md). */
.icon-list li i {
  color: var(--secondary-dark);
  font-size: 1rem;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Nudges the ring up so it reads as centred on the first line of the label
     rather than sitting proud of it. */
  margin-top: -0.1875rem;
}

/* Short labels (the hardware meter list) read better two-up than as a tall column */
@media (min-width: 640px) {
  .icon-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
  }
}

/* Green check bullets, via ::before so the markup stays plain <li> text */
.check-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.check-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--secondary-dark);
  flex-shrink: 0;
}

/* Small icon treatment for equipment/step lists */
.icon-item-list {
  list-style-type: none;
  padding-left: 0;
}

.icon-item-list img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.icon-item-list li {
  display: flex;
  align-items: center;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   TESTIMONIAL CAROUSEL
   ========================================================================== */
.testimonials-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.carousel-nav {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.carousel-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--background);
  border: 1px solid var(--border);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.carousel-nav-btn:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  transform: translateY(-2px);
}

.carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform var(--transition-normal);
  scroll-behavior: smooth;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hide standard firefox scrollbar */
}

.carousel-track::-webkit-scrollbar {
  display: none; /* Hide standard chrome/safari scrollbar */
}

.testimonial-card {
  position: relative;
  min-width: 280px;
  width: 100%;
  max-width: 480px;
  background-color: var(--background);
  border-radius: var(--radius-2xl);
  padding: 2.7rem 2.25rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  scroll-snap-align: start;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--secondary);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 640px) {
  .testimonial-card {
    min-width: 380px;
  }
}

.testimonial-quote-icon {
  font-size: 1.5rem;
  color: var(--secondary);
  opacity: 0.6;
}

.testimonial-text {
  font-style: italic;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.6;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.testimonial-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-author-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--foreground);
}

.testimonial-author-title {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

@media (max-width: 639px) {
  .testimonials-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
.footer {
  /* Hardcoded to the brand primary teal (#224C4F) rather than var(--primary): this selector is
     also targeted by the dark-theme token remap above, which redefines --primary to a light
     teal for use as an accent color on dark surfaces. */
  background-color: #224C4F;
  color: #F8FAFC;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}

.footer-grid {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: 1fr;
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-brand img {
  height: 36px;
  width: auto;
  margin-bottom: 0.5rem;
}

.footer-brand p {
  font-size: 0.875rem;
  color: rgba(248, 250, 252, 0.7);
  line-height: 1.6;
}

.footer-brand h3,
.footer-column h3 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary);
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-links a {
  color: rgba(248, 250, 252, 0.7);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--secondary);
}

.footer-contact {
  font-style: normal;
  font-size: 0.875rem;
  color: rgba(248, 250, 252, 0.7);
  line-height: 1.6;
}

.footer-contact a {
  color: rgba(248, 250, 252, 0.7);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-contact a:hover {
  color: var(--secondary);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
  }
}

.footer-bottom p {
  font-size: 0.75rem;
  color: rgba(248, 250, 252, 0.6);
  margin: 0;
}

/* Language selector lives in the footer's brand column. Uses the footer's own
   palette rather than the remapped dark-theme tokens, which would otherwise
   give a light-green hover background under light-teal text. */
.footer-lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-lang-label {
  font-size: 0.75rem;
  color: rgba(248, 250, 252, 0.7);
}

.footer .lang-trigger {
  color: rgba(248, 250, 252, 0.7);
  font-size: 0.75rem;
  padding: 0;
}

.footer .lang-trigger:hover {
  color: var(--secondary);
}

/* Opens downward and flush against the trigger: any gap here (a margin, or an
   offset transform at rest) becomes a dead zone the pointer crosses on its way
   to the menu, dropping :hover on the container and closing it mid-reach. */
.footer .lang-dropdown-menu {
  right: auto;
  left: 0;
  min-width: 120px;
  background-color: #1A3C3E;
  border-color: rgba(255, 255, 255, 0.15);
}

.footer .lang-dropdown-menu button {
  color: #F8FAFC;
}

.footer .lang-dropdown-menu button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--secondary);
}

/* ==========================================================================
   CONTACT FORM (contacto.html)
   ========================================================================== */
.contact-card {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-sm);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--foreground);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--muted-foreground);
}

.form-group input:hover,
.form-group textarea:hover {
  border-color: var(--primary);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(20, 83, 78, 0.12);
}

.form-group input.invalid,
.form-group textarea.invalid {
  border-color: var(--destructive);
  background-color: var(--destructive-surface);
}

.form-group input.invalid:focus,
.form-group textarea.invalid:focus {
  box-shadow: 0 0 0 3px rgba(233, 68, 71, 0.12);
}

/* Contact strip (above the footer on every page but contacto).
   Deliberately placed after the .form-group rules: the field sizing below
   shares their specificity and only wins by coming later. */
.contact-strip {
  background-color: var(--muted);
  border-top: 1px solid var(--border);
}

.contact-strip-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}

/* The five short fields, paired up */
.contact-strip-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .contact-strip-fields {
    grid-template-columns: 1fr 1fr;
  }

  /* Telephone has no partner, so it runs the width of the pair above it */
  .contact-strip-fields .contact-strip-phone {
    grid-column: 1 / -1;
  }
}

/* Message + submit, stacked so the textarea can absorb the leftover height */
.contact-strip-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-strip-form .form-group {
  gap: 0.4rem;
  min-width: 0;
}

/* Compact uppercase labels stop the stacked label+field pairs from crowding */
.contact-strip-form label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
}

.contact-strip-form .btn {
  height: 2.75rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

/* Desktop: short fields on the left, message and submit on the right */
@media (min-width: 1024px) {
  .contact-strip-form {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
    align-items: start;
  }

  .contact-strip-side {
    height: 100%;
  }

  /* Fill the column so the textarea matches the height of the field block */
  .contact-strip-side .contact-strip-message {
    flex: 1;
  }

  .contact-strip-side .contact-strip-message textarea {
    height: auto;
    flex: 1;
  }

  .contact-strip-form .btn {
    justify-self: start;
    align-self: start;
  }
}

.contact-form .btn {
  margin-top: 0.5rem;
}

.contact-form .btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Toast notification */
/* Honeypot: a real, focusable input that no human should ever fill in.
   Deliberately NOT `display: none` or `visibility: hidden` — some bots skip
   those. Positioned off-canvas instead, with aria-hidden + tabindex="-1" in the
   markup so screen readers and keyboard users never reach it either. */
.lead-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   POLICY / LEGAL PAGES
   ========================================================================== */
.policy-section {
  background-color: var(--background);
  padding-top: 9rem;
}

.policy-wrapper {
  max-width: 48rem;
  margin: 0 auto;
}

/* One <div data-lang-block> per language; main.js unhides only the active one */
.policy-doc[hidden] {
  display: none;
}

.policy-doc h1 {
  margin-bottom: 2rem;
}

.policy-doc h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
  margin: 2.5rem 0 0.75rem;
}

.policy-doc p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--muted-foreground);
  margin: 0 0 1rem;
}

.policy-doc .check-list {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.policy-docs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.policy-docs a {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.policy-docs a::before {
  content: "\f1c1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.5rem;
  color: var(--secondary-dark);
}

.policy-docs a:hover {
  text-decoration: underline;
}

.policy-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.policy-table th,
.policy-table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.policy-table th {
  font-weight: 700;
  color: var(--foreground);
  background-color: var(--muted);
}

.policy-table td {
  color: var(--muted-foreground);
}

.policy-signature {
  margin-top: 2.5rem;
  font-style: italic;
}

.toast-success {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  left: 1.5rem;
  max-width: 24rem;
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-left: 4px solid var(--secondary-dark, var(--primary));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
  z-index: 1000;
}

.toast-success.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.toast-success.toast-error {
  border-left-color: var(--destructive);
}

.toast-success i {
  color: var(--secondary-dark, var(--primary));
  font-size: 1.125rem;
  margin-top: 0.125rem;
}

.toast-success.toast-error i {
  color: var(--destructive);
}

.toast-text {
  font-size: 0.875rem;
  color: var(--foreground);
  line-height: 1.5;
}