/* ==================================================
   STYLE.CSS UNIFICADO - ATM NA MÃO - God Tier Upgrade v3 (Mobile Miniatures Focus Enhanced)
   Versão Corrigida e Otimizada
   ================================================== */

/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
  /* MOBILE MINIATURE ADJUSTMENTS */
  --header-height: 3.2rem;

  /*========== Colors (HSL) - Paleta Verde Refinada ==========*/
  --primary-hue: 135;
  --secondary-hue: 120;
  --neutral-hue: 38;
  --danger-hue: 0;
  --warning-hue: 45;
  --success-hue: 140;
  --info-hue: 210;
  --white-hue: 0;
  --black-hue: 0;

  /* Primária - #018a13 */
  --primary-color: #018a13;
  --primary-color-alt: #017a10;
  --primary-color-darker: #016a0e;
  --primary-color-light: #e6f7e8;
  --primary-color-lighter: #f2fcf3;
  --primary-color-gradient: linear-gradient(135deg, #018a13, #016a0e);
  --primary-glow: rgba(1, 138, 19, 0.35);

  /* Secundária - #004800 */
  --secondary-color: #004800;
  --secondary-color-alt: #003800;
  --secondary-color-darker: #002800;
  --secondary-color-light: #e6f0e6;
  --secondary-color-lighter: #f2f7f2;
  --secondary-color-gradient: linear-gradient(135deg, #004800, #002800);
  --secondary-glow: rgba(0, 72, 0, 0.3);

  /* Feedback */
  --danger-color: hsl(var(--danger-hue), 90%, 55%);
  --danger-color-alt: hsl(var(--danger-hue), 85%, 50%);
  --danger-light-color: hsl(var(--danger-hue), 90%, 94%);
  --warning-color: hsl(var(--warning-hue), 100%, 60%);
  --warning-color-alt: hsl(var(--warning-hue), 95%, 55%);
  --warning-light-color: hsl(var(--warning-hue), 100%, 94%);
  --success-color: hsl(var(--success-hue), 65%, 48%);
  --success-color-alt: hsl(var(--success-hue), 60%, 42%);
  --success-light-color: hsl(var(--success-hue), 70%, 92%);
  --info-text-color: hsl(var(--info-hue), 60%, 40%);
  --info-light-color: hsl(var(--info-hue), 70%, 93%);

  /* Paleta Modo Claro (DEFAULT) */
  --title-color: hsl(var(--neutral-hue), 35%, 15%);
  --text-color: hsl(var(--neutral-hue), 20%, 30%);
  --text-color-light: hsl(var(--neutral-hue), 15%, 50%);
  --text-color-lighter: hsl(var(--neutral-hue), 15%, 65%);
  --body-color: #ffffff;
  --container-color: hsl(var(--neutral-hue), 40%, 98%);
  --border-color: hsl(var(--neutral-hue), 30%, 88%);
  --border-color-light: hsl(var(--neutral-hue), 30%, 92%);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: hsla(var(--neutral-hue), 20%, 80%, 0.3);
  --glass-shadow: 0 6px 20px hsla(var(--neutral-hue), 20%, 60%, 0.1);
  --shadow-color: hsla(var(--neutral-hue), 40%, 50%, 0.08);
  --shadow-color-medium: hsla(var(--neutral-hue), 40%, 50%, 0.12);
  --shadow-color-strong: hsla(var(--neutral-hue), 40%, 45%, 0.18);
  --scroll-bar-color: hsl(var(--neutral-hue), 20%, 94%);
  --scroll-bar-thumb-color: #018a13;
  --preloader-bg-color: var(--body-color);
  --preloader-text-color: var(--text-color-light);
  --preloader-spinner-color: var(--primary-color);
  --hero-shape-color: rgba(1, 138, 19, 0.6);
  --section-subtitle-color: var(--secondary-color);
  --input-bg-color: #ffffff;
  --input-border-color: var(--border-color-light);
  --input-focus-border-color: var(--primary-color);
  --input-focus-shadow: rgba(1, 138, 19, 0.2);
  --modal-bg-color: var(--body-color);
  --modal-overlay-color: hsla(var(--neutral-hue), 40%, 10%, 0.75);
  --sidebar-bg-color: hsla(var(--neutral-hue), 30%, 98%, 0.85);
  --sidebar-border-color: hsla(var(--neutral-hue), 30%, 88%, 0.7);
  --sidebar-shadow: 5px 0 25px hsla(var(--neutral-hue), 30%, 40%, 0.1);
  --transaction-positive-color: var(--success-color);
  --transaction-negative-color: var(--danger-color);
  --map-grayscale: 10%;

  /*========== Font and typography (MOBILE FIRST SIZES) ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2.5rem; /* Reduzido para Mobile */
  --h1-font-size: 2.0rem;     /* Reduzido */
  --h2-font-size: 1.5rem;     /* Reduzido */
  --h3-font-size: 1.15rem;    /* Reduzido */
  --normal-font-size: 0.9rem; /* Reduzido */
  --small-font-size: .8rem;   /* Reduzido */
  --smaller-font-size: .75rem;/* Reduzido */
  --tiny-font-size: .68rem;   /* Reduzido */

  /*========== Font weight ==========*/
  --font-light: 300; --font-regular: 400; --font-medium: 500;
  --font-semi-bold: 600; --font-bold: 700; --font-extra-bold: 800;

  /*========== Margenes Bottom (MOBILE FIRST MARGINS) ==========*/
  --mb-0-25: .25rem; --mb-0-5: .5rem; --mb-0-75: .75rem; --mb-1: 1rem;
  --mb-1-5: 1.5rem; --mb-2: 2rem; --mb-2-5: 2.5rem; --mb-3: 3rem; --mb-4: 4rem;

  /*========== z index ==========*/
  --z-tooltip: 10; --z-fixed: 100; --z-modal: 1000; --z-sidebar: 1010;
  --z-preloader: 2000;

  /*========== Border Radius ==========*/
  --radius-tiny: 4px; --radius-small: 6px; --radius-medium: 8px;
  --radius-large: 12px; --radius-extra-large: 20px; --radius-pill: 50px;
  --radius-circle: 50%;

  /*========== Transitions ==========*/
  --transition-fast: 0.2s ease; --transition-smooth: 0.4s ease;
  --transition-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.4s;

  /*========== Box Shadow ==========*/
  --shadow-soft: 0 3px 10px var(--shadow-color);
  --shadow-medium: 0 6px 20px var(--shadow-color);
  --shadow-strong: 0 10px 30px var(--shadow-color);
  --shadow-inset: inset 0 1px 3px hsla(0, 0%, 0%, 0.06);
}

/*=============== Dark Theme Variables ===============*/
body[data-theme="dark"] {
  --title-color: hsl(var(--neutral-hue), 15%, 95%);
  --text-color: hsl(var(--neutral-hue), 15%, 78%);
  --text-color-light: hsl(var(--neutral-hue), 15%, 65%);
  --body-color: hsl(var(--neutral-hue), 20%, 8%);
  --container-color: hsl(var(--neutral-hue), 20%, 12%);
  --border-color: hsl(var(--neutral-hue), 15%, 25%);
  --glass-bg: hsla(var(--neutral-hue), 20%, 15%, 0.7);
  --glass-border: hsla(var(--neutral-hue), 10%, 30%, 0.5);
  --shadow-color: hsla(0, 0%, 0%, 0.2);
  --scroll-bar-color: hsl(var(--neutral-hue), 15%, 20%);
  --scroll-bar-thumb-color: #018a13;
  --preloader-bg-color: var(--body-color);
  --preloader-text-color: var(--text-color);
  --preloader-spinner-color: var(--primary-color);
  --hero-shape-color: rgba(0, 72, 0, 0.4);
  --section-subtitle-color: #004800;
  --input-bg-color: hsl(var(--neutral-hue), 15%, 18%);
  --input-border-color: var(--border-color);
  --input-focus-border-color: #018a13;
  --modal-bg-color: hsl(var(--neutral-hue), 20%, 15%);
  --modal-overlay-color: hsla(0, 0%, 0%, 0.75);
  --sidebar-bg-color: hsla(var(--neutral-hue), 20%, 10%, 0.9);
  --sidebar-border-color: hsla(var(--neutral-hue), 15%, 28%, 0.8);
  --sidebar-shadow: 5px 0 30px hsla(0, 0%, 0%, 0.25);
  --transaction-positive-color: hsl(var(--success-hue), 55%, 55%);
  --transaction-negative-color: hsl(var(--danger-hue), 80%, 60%);
}

/*=============== BASE ===============*/
* { 
  box-sizing: border-box; 
  padding: 0; 
  margin: 0; 
}

html { 
  scroll-behavior: smooth; 
}

body {
  font-family: var(--body-font); 
  font-size: var(--normal-font-size);
  background-color: var(--body-color); 
  color: var(--text-color);
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.preload * { 
  transition: none !important; 
}

body.modal-open-scroll-locked,
body.sidebar-open-scroll-locked {
  overflow-y: hidden;
}

h1, h2, h3, h4 { 
  color: var(--title-color); 
  font-weight: var(--font-bold); 
  line-height: 1.3; 
}

ul { 
  list-style: none; 
}

a { 
  text-decoration: none; 
  color: #018a13; 
  transition: color var(--transition-fast); 
}

a:hover { 
  color: #017a10; 
}

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

button, input, textarea, select { 
  border: none; 
  outline: none; 
  font-family: var(--body-font); 
  font-size: var(--normal-font-size); 
  background: none; 
  color: inherit; 
}

button { 
  cursor: pointer; 
}

input, textarea, select {
  background-color: var(--input-bg-color); 
  color: var(--text-color);
  border: 1px solid var(--input-border-color); 
  border-radius: var(--radius-medium);
  padding: 0.7rem 0.9rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease; 
  width: 100%;
  font-size: var(--normal-font-size);
}

input:focus, textarea:focus, select:focus { 
  border-color: #018a13; 
  box-shadow: 0 0 0 3px rgba(1, 138, 19, 0.2); 
}

::placeholder { 
  color: var(--text-color-light); 
  opacity: 0.7; 
}

select { 
  appearance: none; 
  -webkit-appearance: none; 
  padding-right: 2.5rem; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='hsl(var(--neutral-hue), 15%, 55%)'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E"); 
  background-repeat: no-repeat; 
  background-position: right 1rem center; 
}

body[data-theme="dark"] select { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='hsl(var(--neutral-hue), 15%, 65%)'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E");
}

/* Acessibilidade Focus */
:focus-visible { 
  outline: 2px solid #018a13; 
  outline-offset: 2px; 
  box-shadow: 0 0 0 4px rgba(1, 138, 19, 0.25); 
  border-radius: var(--radius-small); 
}

a:focus, button:focus, [tabindex="0"]:focus, input:focus, textarea:focus, select:focus { 
  outline: none; 
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container { 
  max-width: 1200px; 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: 1rem; 
  padding-right: 1rem; 
}

.grid { 
  display: grid; 
  gap: 1.2rem; 
}

.section { 
  padding: 4rem 0 2rem; 
  position: relative; 
  overflow: hidden; 
}

.section__title { 
  font-size: var(--h2-font-size); 
  margin-bottom: var(--mb-0-75); 
  text-align: center; 
  font-weight: var(--font-extra-bold); 
}

.section__subtitle { 
  display: block; 
  text-align: center; 
  font-size: var(--small-font-size); 
  color: #004800; 
  margin-bottom: var(--mb-2); 
  font-weight: var(--font-medium); 
  text-transform: uppercase; 
  letter-spacing: 1.2px; 
}

.highlight { 
  color: #018a13; 
}

.highlight-gradient { 
  background: linear-gradient(90deg, #018a13, #004800); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
}

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

.text-white { 
  color: #fff !important; 
}

.hidden { 
  display: none !important; 
}

.hide-on-mobile { 
  display: none; 
}

.show-on-mobile { 
  display: block; 
}

.sr-only {
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px;
  overflow: hidden; 
  clip: rect(0, 0, 0, 0); 
  white-space: nowrap; 
  border-width: 0;
}

/*=============== BUTTONS (MOBILE FIRST SIZES) ===============*/
.button {
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0.4rem;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: var(--font-semi-bold); 
  font-size: var(--small-font-size);
  transition: all var(--transition-elastic); 
  border: 2px solid transparent;
  position: relative; 
  overflow: hidden; 
  box-shadow: var(--shadow-soft);
  line-height: 1.2; 
  white-space: nowrap; 
  text-align: center;
}

.button:hover { 
  transform: translateY(-2px) scale(1.02); 
  box-shadow: var(--shadow-medium); 
}

.button:active { 
  transform: translateY(0px) scale(0.98); 
  box-shadow: none; 
}

.button i, .button .button__icon { 
  font-size: 1rem; 
  transition: transform 0.3s ease; 
  flex-shrink: 0; 
}

.button:hover i, .button:hover .button__icon { 
  transform: translateX(2px) scale(1.05); 
}

.button span { 
  flex-shrink: 1; 
}

.button--primary { 
  background: linear-gradient(45deg, #018a13, #4CAF50); 
  color: #fff; 
  border-color: transparent; 
}

.button--primary:hover { 
  background: linear-gradient(45deg, #017a10, #45a049); 
}

.button--secondary { 
  background: linear-gradient(45deg, #004800, #006400); 
  color: #fff; 
  border-color: transparent; 
}

.button--secondary:hover { 
  background: linear-gradient(45deg, #003800, #005a00); 
}

.button--danger { 
  background: linear-gradient(45deg, var(--danger-color), hsl(var(--danger-hue), 100%, 60%)); 
  color: #fff; 
}

.button--danger:hover { 
  background: linear-gradient(45deg, hsl(var(--danger-hue), 90%, 45%), hsl(var(--danger-hue), 95%, 50%)); 
}

.button--success { 
  background: linear-gradient(45deg, var(--success-color), hsl(var(--success-hue), 55%, 45%)); 
  color: #fff; 
}

.button--success:hover { 
  background: linear-gradient(45deg, hsl(var(--success-hue), 50%, 35%), hsl(var(--success-hue), 55%, 40%)); 
}

.button--warning { 
  background: linear-gradient(45deg, var(--warning-color), hsl(var(--warning-hue), 100%, 65%)); 
  color: hsl(var(--warning-hue), 100%, 15%); 
}

.button--warning:hover { 
  background: linear-gradient(45deg, hsl(var(--warning-hue), 90%, 55%), hsl(var(--warning-hue), 95%, 60%)); 
}

.button--ghost { 
  background-color: transparent; 
  color: #018a13; 
  border-color: #018a13; 
  box-shadow: none; 
  border-width: 1px; 
}

.button--ghost:hover { 
  background-color: rgba(1, 138, 19, 0.08); 
  color: #017a10; 
  border-color: #017a10; 
  transform: translateY(-1px); 
  box-shadow: var(--shadow-soft); 
}

body[data-theme="dark"] .button--ghost { 
  color: #018a13; 
  border-color: #018a13; 
}

body[data-theme="dark"] .button--ghost:hover { 
  background-color: rgba(1, 138, 19, 0.15); 
  color: #4CAF50; 
  border-color: #4CAF50; 
}

.button--ghost.button--secondary { 
  color: #004800; 
  border-color: #004800; 
}

.button--ghost.button--secondary:hover { 
  background-color: rgba(0, 72, 0, 0.1); 
  color: #003800; 
  border-color: #003800; 
}

.button--link { 
  background: none; 
  color: #018a13; 
  padding: 0.1rem 0; 
  font-weight: var(--font-medium); 
  box-shadow: none; 
  border-radius: 0; 
  border-bottom: 1px solid transparent; 
  font-size: var(--smaller-font-size); 
}

.button--link:hover { 
  color: #017a10; 
  border-bottom-color: #017a10; 
  transform: none; 
}

.button--link i { 
  font-size: 0.8rem; 
  margin-left: var(--mb-0-25); 
}

.button--flex { 
  display: inline-flex; 
  align-items: center; 
}

.button--small { 
  padding: 0.5rem 1.1rem; 
  font-size: var(--smaller-font-size); 
}

.button--small i, .button--small .button__icon { 
  font-size: 0.9rem; 
}

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

.button--icon { 
  padding: 0.5rem; 
  border-radius: var(--radius-circle); 
  width: 32px; 
  height: 32px; 
  font-size: 1rem; 
  flex-shrink: 0; 
}

/* Loading State */
.button .spinner { 
  display: none; 
  width: 0.8em; 
  height: 0.8em; 
  margin-left: 0.4rem; 
  border: 2px solid currentColor; 
  border-top-color: transparent; 
  border-radius: 50%; 
  animation: spin 0.8s linear infinite; 
  flex-shrink: 0; 
}

.button.loading { 
  cursor: wait; 
}

.button.loading .button__text { 
  opacity: 0.7; 
  margin-right: 0.4rem; 
}

.button.loading .button__icon { 
  display: none; 
}

.button.loading .spinner { 
  display: inline-block; 
}

.button:disabled { 
  opacity: 0.6; 
  cursor: not-allowed; 
  transform: none !important; 
  box-shadow: none !important; 
}

.button--ghost:disabled { 
  background-color: transparent !important; 
}

/*=============== ANIMAÇÕES ===============*/
@keyframes spin { 
  0% { 
    transform: rotate(0deg); 
  } 
  100% { 
    transform: rotate(360deg); 
  } 
}

@keyframes pulse { 
  0%, 100% { 
    opacity: 1; 
    transform: scale(1); 
  } 
  50% { 
    opacity: 0.7; 
    transform: scale(1.05);
  } 
}

@keyframes animate-pulse { 
  0%, 100% { 
    opacity: 1; 
  } 
  50% { 
    opacity: .5; 
  } 
}

.animate-pulse { 
  animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 
}

.animate-spin { 
  animation: spin 1s linear infinite; 
}

@keyframes fade-in-up-preloader {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(1, 138, 19, 0.4));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 16px rgba(1, 138, 19, 0.8));
  }
}

@keyframes morph { 
  0% { 
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
    transform: rotate(0deg) scale(1); 
  } 
  50% { 
    border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; 
    transform: rotate(180deg) scale(1.03); 
  } 
  100% { 
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
    transform: rotate(360deg) scale(1); 
  } 
}

/*=============== Glass Effect ===============*/
.glass-effect { 
  background: var(--glass-bg); 
  backdrop-filter: saturate(150%) blur(10px); 
  -webkit-backdrop-filter: saturate(150%) blur(10px); 
  border: 1px solid var(--glass-border); 
  box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.06); 
}

body[data-theme="dark"] .glass-effect { 
  box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.15); 
}

/*=============== Background Glows & Shapes ===============*/
.dl-background-glow, .tech-future__glow { 
  position: absolute; 
  border-radius: var(--radius-circle); 
  filter: blur(100px); 
  opacity: 0.3; 
  z-index: -1; 
  pointer-events: none; 
  transition: background var(--transition-smooth); 
}

.glow-hero-1 { 
  width: 400px; 
  height: 400px; 
  background: rgba(1, 138, 19, 0.4); 
  top: -100px; 
  left: -150px; 
}

.glow-hero-2 { 
  width: 350px; 
  height: 350px; 
  background: rgba(0, 72, 0, 0.35); 
  bottom: -80px; 
  right: -100px; 
}

.glow-showcase { 
  width: 500px; 
  height: 500px; 
  background: rgba(0, 72, 0, 0.35); 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  opacity: 0.2; 
}

.tech-future__glow--1 { 
  width: 200px; 
  height: 200px; 
  background: rgba(1, 138, 19, 0.4); 
  top: 15%; 
  left: 8%; 
}

.tech-future__glow--2 { 
  width: 180px; 
  height: 180px; 
  background: rgba(0, 72, 0, 0.35); 
  bottom: 20%; 
  right: 12%; 
}

.shape { 
  position: absolute; 
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
  opacity: 0.08; 
  z-index: 0; 
  pointer-events: none; 
  animation: morph 18s infinite linear alternate; 
}

.shape-1 { 
  width: 300px; 
  height: 300px; 
  background: rgba(1, 138, 19, 0.6); 
  top: -60px; 
  left: -100px; 
  animation-duration: 20s; 
}

.shape-2 { 
  width: 200px; 
  height: 250px; 
  background: #e6f0e6; 
  bottom: -20px; 
  right: -80px; 
  animation-duration: 15s; 
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; 
}

.shape-3 { 
  width: 120px; 
  height: 120px; 
  background: #018a13; 
  top: 45%; 
  right: 15%; 
  animation-duration: 25s; 
  opacity: 0.06; 
}

.shape-4 { 
  width: 250px; 
  height: 250px; 
  background: rgba(255, 255, 255, 0.08); 
  top: -80px; 
  left: 15%; 
  animation-duration: 18s; 
}

.shape-5 { 
  width: 180px; 
  height: 220px; 
  background: rgba(255, 255, 255, 0.06); 
  bottom: -50px; 
  right: 8%; 
  animation-duration: 22s; 
  border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; 
}

/*=============== PRELOADER ===============*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  opacity: 1;
  visibility: visible;
}

.preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__content {
  text-align: center;
  color: #fff;
  animation: fade-in-up-preloader 0.6s ease-in-out forwards;
}

.preloader__logo-img {
  width: 90px;
  height: auto;
  margin-bottom: 1.5rem;
  animation: pulseGlow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(1, 138, 19, 0.5));
}

.preloader__text {
  font-size: 1.1rem;
  color: #c9fcd2;
  letter-spacing: 1px;
  font-weight: 500;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fade-in-up-preloader 1s ease-in-out 0.3s forwards;
  animation-delay: 0.4s;
}

/*=============== HEADER & NAV (MOBILE FIRST) ===============*/
.header { 
  width: 100%; 
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: var(--z-fixed); 
  background: transparent; 
  transition: background-color var(--transition-smooth), box-shadow var(--transition-smooth), padding var(--transition-smooth); 
  padding: 0.5rem 0; 
}

.header.scrolled { 
  background: var(--glass-bg); 
  box-shadow: 0 2px 10px hsla(0, 0%, 0%, 0.07); 
  padding: 0.3rem 0; 
}

.nav { 
  height: var(--header-height); 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.nav__left { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
}

.nav__logo { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.4rem; 
  font-weight: var(--font-bold); 
  color: #018a13; /* VERDE por padrão (modo claro) */
  flex-shrink: 0; 
}

.nav__logo-img { 
  width: 30px; 
  height: 30px; 
  border-radius: var(--radius-circle); 
  object-fit: cover; 
}

.nav__logo span { 
  font-size: 0.9rem; 
  white-space: nowrap; 
}

.nav__actions { 
  display: flex; 
  align-items: center; 
  gap: 0.2rem; 
  flex-shrink: 0; 
}

.nav__button span { 
  display: none; 
}

.nav__sidebar-toggle,
.nav__theme,
.nav__toggle {
  font-size: 1.2rem;
  color: #018a13; /* VERDE por padrão (modo claro) */
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
  display: flex; 
  align-items: center; 
  justify-content: center;
  width: 34px; 
  height: 34px;
  border-radius: var(--radius-circle); 
  flex-shrink: 0;
}

/* Hover no modo claro - verde mais escuro */
.nav__sidebar-toggle:hover,
.nav__theme:hover,
.nav__toggle:hover {
  color: #016a0f; /* Verde mais escuro no hover */
  background-color: rgba(1, 138, 19, 0.1);
  transform: scale(1.1);
}

/* Mobile Menu */
.nav__menu {
  position: fixed;
  background-color: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(15px);
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  top: 0;
  right: -100%;
  width: 75%;
  max-width: 280px;
  height: 100%;
  box-shadow: -4px 0 15px rgba(0,0,0,0.1);
  padding: 4rem 1.2rem 2.5rem;
  transition: right var(--transition-smooth);
  z-index: calc(var(--z-fixed) + 5);
  display: flex; 
  flex-direction: column;
  border-left: 1px solid var(--glass-border);
}

.nav__list {
  display: flex; 
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: auto;
}

/* LINKS NO MODO CLARO - TODOS VERDES */
.nav__link {
  color: #018a13; /* VERDE no modo claro */
  font-weight: var(--font-medium);
  font-size: 1rem;
  transition: color 0.3s ease, transform 0.3s ease;
  padding: 0.4rem 0; 
  display: block;
}

/* Hover no modo claro - verde mais escuro */
.nav__link:hover { 
  color: #016a0f; /* Verde mais escuro no hover */
  transform: translateX(5px); 
}

/* Link ativo no MODO CLARO - destaque verde mais forte */
.nav__link.active-link { 
  color: #00ff00; /* Verde mais brilhante/vivo */
  font-weight: var(--font-semi-bold);
  position: relative;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

/* Indicador visual para link ativo no modo claro */
.nav__link.active-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #00ff00;
  border-radius: 2px;
}

.nav__close {
  position: absolute;
  top: 0.8rem; 
  right: 1rem;
  font-size: 1.5rem;
  color: #018a13; /* VERDE no modo claro */
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
  display: flex; 
  align-items: center; 
  justify-content: center;
  width: 34px; 
  height: 34px;
  border-radius: var(--radius-circle);
}

.nav__close:hover { 
  color: #016a0f; /* Verde mais escuro no hover */
  background-color: rgba(1, 138, 19, 0.1); 
  transform: scale(1.1) rotate(90deg); 
}

.show-menu { 
  right: 0; 
}

/* =============== MODOS ESCURO =============== */
/* MODO ESCURO - TODOS OS LINKS BRANCOS */
body.dark-mode .nav__link {
  color: #ffffff; /* BRANCO no modo escuro */
}

body.dark-mode .nav__link:hover { 
  color: #f0f0f0; /* Branco levemente mais suave no hover */
  transform: translateX(5px); 
}

/* Link ativo no MODO ESCURO - destaque branco mais forte */
body.dark-mode .nav__link.active-link { 
  color: #ffffff; /* BRANCO puro */
  font-weight: var(--font-semi-bold);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Indicador visual para link ativo no modo escuro */
body.dark-mode .nav__link.active-link::after {
  background-color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255);
}

/* Botões no modo escuro - BRANCOS */
body.dark-mode .nav__sidebar-toggle,
body.dark-mode .nav__theme,
body.dark-mode .nav__toggle,
body.dark-mode .nav__close {
  color: #ffffff; /* BRANCO no modo escuro */
}

body.dark-mode .nav__sidebar-toggle:hover,
body.dark-mode .nav__theme:hover,
body.dark-mode .nav__toggle:hover {
  color: #f0f0f0; /* Branco levemente mais suave */
  background-color: rgba(255, 255, 255);
}

body.dark-mode .nav__close:hover { 
  color: #f0f0f0; /* Branco levemente mais suave */
  background-color: rgba(255, 255, 255); 
}

/* Logo no modo escuro - BRANCO */
body.dark-mode .nav__logo {
  color: #ffffff; /* BRANCO no modo escuro */
}

/* Opcional: Se quiser um efeito de destaque mais pronunciado para a aba ativa */
.nav__link.active-link.highlight-mode-light {
  color: #00ff00 !important;
  font-weight: var(--font-bold) !important;
}

body.dark-mode .nav__link.active-link.highlight-mode-dark {
  color: #ffffff !important;
  font-weight: var(--font-bold) !important;
}

/*=============== SIDEBAR (MOBILE FIRST) ===============*/
.sidebar {
  position: fixed;
  left: -100%;
  top: 0;
  width: 260px;
  max-width: 80%;
  height: 100vh;
  background-color: var(--sidebar-bg-color);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-right: 1px solid var(--sidebar-border-color);
  box-shadow: var(--sidebar-shadow);
  z-index: var(--z-sidebar);
  padding: var(--mb-1) var(--mb-0-75);
  padding-top: calc(var(--header-height) + var(--mb-0-5));
  display: flex;
  flex-direction: column;
  transition: left var(--transition-smooth);
}

.sidebar.open { 
  left: 0; 
}

.sidebar__close {
  position: absolute;
  top: calc(var(--header-height) / 2); 
  right: var(--mb-0-5);
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--text-color-light);
  transition: color var(--transition-fast), transform var(--transition-fast);
  padding: 0.2rem;
}

.sidebar__close:hover { 
  color: #018a13; 
  transform: translateY(-50%) scale(1.1) rotate(180deg); 
}

.sidebar__title {
  font-size: var(--h3-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: var(--mb-0-75);
  display: flex; 
  align-items: center; 
  gap: 0.4rem;
  color: var(--title-color);
  padding-bottom: var(--mb-0-5);
  border-bottom: 1px solid var(--border-color);
}

.sidebar__title i { 
  color: #004800; 
  font-size: 1.1rem; 
}

.sidebar__transactions {
  flex-grow: 1; 
  overflow-y: auto;
  padding-right: 3px;
  margin-right: -3px;
}

.sidebar__transactions::-webkit-scrollbar { 
  width: 4px; 
}

.sidebar__transactions::-webkit-scrollbar-track { 
  background: transparent; 
}

.sidebar__transactions::-webkit-scrollbar-thumb { 
  background-color: #018a13; 
  border-radius: var(--radius-pill); 
}

.sidebar__transactions::-webkit-scrollbar-thumb:hover { 
  background-color: #018a13; 
}

.sidebar__transaction {
  display: flex; 
  align-items: center; 
  gap: 0.6rem;
  padding: var(--mb-0-5) 0.2rem;
  border-bottom: 1px solid var(--border-color);
  opacity: 0; 
  transform: translateX(-10px);
  animation: slide-in-fade 0.5s ease forwards;
  position: relative;
}

.sidebar__transaction:last-child { 
  border-bottom: none; 
}

@keyframes slide-in-fade { 
  to { 
    opacity: 1; 
    transform: translateX(0); 
  } 
}

.sidebar__transaction-avatar {
  width: 30px; 
  height: 30px;
  border-radius: var(--radius-circle); 
  object-fit: cover; 
  flex-shrink: 0;
  border: 1px solid var(--container-color);
}

.sidebar__transaction-info { 
  flex-grow: 1; 
  overflow: hidden; 
}

.sidebar__transaction-name {
  font-weight: var(--font-medium); 
  font-size: var(--small-font-size);
  color: var(--title-color); 
  display: block; 
  margin-bottom: 0;
  white-space: nowrap; 
  text-overflow: ellipsis; 
  overflow: hidden;
}

.sidebar__transaction-details {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  font-size: var(--tiny-font-size);
  color: var(--text-color-light);
  margin-top: 1px;
}

.sidebar__transaction-ref { 
  opacity: 0.8; 
  max-width: 60%; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

.sidebar__transaction-time { 
  opacity: 0.7; 
}

.sidebar__transaction-amount {
  font-weight: var(--font-semi-bold); 
  font-size: var(--small-font-size);
  margin-left: auto; 
  padding-left: 0.4rem; 
  white-space: nowrap;
}

.sidebar__transaction-amount.positive { 
  color: var(--transaction-positive-color); 
}

.sidebar__transaction-amount.negative { 
  color: var(--transaction-negative-color); 
}

.sidebar__transaction-placeholder {
  text-align: center; 
  color: var(--text-color-light); 
  font-style: italic;
  padding: var(--mb-1); 
  font-size: var(--small-font-size);
}

.sidebar__transaction-placeholder i { 
  margin-right: 0.3rem; 
  font-size: 0.9rem; 
}

.sidebar__footer {
  margin-top: auto; 
  padding-top: var(--mb-0-5);
  border-top: 1px solid var(--border-color);
  font-size: var(--tiny-font-size);
  color: var(--text-color-light); 
  text-align: center; 
  opacity: 0.7;
}

.sidebar__footer i { 
  margin-right: 0.2rem; 
}

.sidebar__overlay {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.4); 
  z-index: calc(var(--z-sidebar) - 1);
  visibility: hidden; 
  opacity: 0;
  transition: visibility 0s linear 0.4s, opacity var(--transition-smooth);
}

.sidebar.open + .sidebar__overlay { 
  visibility: visible; 
  opacity: 1; 
  transition-delay: 0s; 
}

/*=============== HERO SECTION (MOBILE FIRST) ===============*/
.hero {
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 3rem;
  background-color: var(--container-color);
  position: relative; 
  overflow: hidden;
}

body[data-theme="dark"] .hero { 
  background-color: var(--body-color); 
}

.hero__container {
  display: grid; 
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center; 
  z-index: 1; 
  position: relative;
}

.hero__data { 
  text-align: center; 
}

.hero__title {
  font-size: var(--biggest-font-size); 
  font-weight: var(--font-extra-bold);
  line-height: 1.2; 
  margin-bottom: var(--mb-0-75);
}

.hero__description {
  font-size: var(--normal-font-size); 
  color: var(--text-color);
  margin: var(--mb-0-75) auto var(--mb-1-5);
  max-width: 90%;
  line-height: 1.5;
}

.hero__description strong { 
  color: var(--title-color); 
  font-weight: var(--font-semi-bold); 
}

.hero__buttons {
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hero__image {
  display: flex; 
  justify-content: center; 
  align-items: center;
  position: relative; 
  margin-top: var(--mb-1);
}

.hero__img {
  max-width: 280px;
  width: 85%;
  border-radius: var(--radius-medium); 
  box-shadow: var(--shadow-strong); 
  z-index: 1;
}

.hero__social {
  display: flex; 
  justify-content: center; 
  gap: 1rem;
  margin-top: var(--mb-1-5);
}

.hero__social-link {
  font-size: 1.3rem;
  color: var(--text-color-light); 
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.hero__social-link:hover { 
  color: #018a13; 
  transform: scale(1.15) translateY(-2px); 
}

/*=============== FEATURES SECTION (MOBILE MINIATURE) ===============*/
.features { 
  background-color: var(--body-color); 
}

.features__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.8rem;
  margin-top: var(--mb-1-5);
}

.feature__card {
  background-color: var(--container-color);
  padding: 0.8rem 0.6rem;
  border-radius: var(--radius-medium);
  border: 1px solid var(--border-color);
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.feature__card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-medium);
  border-color: #018a13;
}

.feature__header {
  display: block;
  margin-bottom: var(--mb-0-25);
}

.feature__icon {
  font-size: 1.6rem;
  color: #018a13;
  line-height: 1;
  margin-bottom: var(--mb-0-5);
}

.feature__title {
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  margin: 0;
  line-height: 1.2;
}

.feature__description {
  font-size: var(--tiny-font-size);
  color: var(--text-color);
  line-height: 1.4;
  margin-bottom: 0;
  padding-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feature__more { 
  display: none; 
}

/*=============== TECH & FUTURE SECTION (MOBILE FIRST) ===============*/
.tech-future { 
  background-color: var(--container-color); 
}

.tech-future__container { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1.5rem; 
  align-items: center; 
}

.tech-future__visual { 
  position: relative; 
  display: flex; 
  justify-content: center; 
}

.tech-future__img { 
  max-width: 90%; 
  width: 400px; 
  border-radius: var(--radius-medium); 
  margin: 0 auto; 
}

.tech-future__heading { 
  font-size: var(--h3-font-size); 
  margin-bottom: var(--mb-0-5); 
}

.tech-future__description { 
  color: var(--text-color); 
  line-height: 1.5; 
  margin-bottom: var(--mb-1); 
  font-size: var(--small-font-size); 
}

.tech-accordion { 
  display: flex; 
  flex-direction: column; 
  gap: 0.6rem; 
}

.tech-accordion__item { 
  background-color: var(--body-color); 
  border-radius: var(--radius-medium); 
  border: 1px solid var(--border-color); 
  overflow: hidden; 
  box-shadow: var(--shadow-soft); 
  transition: box-shadow var(--transition-smooth); 
}

.tech-accordion__item:hover { 
  box-shadow: var(--shadow-medium); 
}

.tech-accordion__header { 
  display: flex; 
  align-items: center; 
  gap: 0.6rem; 
  padding: 0.8rem 1rem; 
  cursor: pointer; 
  transition: background-color 0.3s ease; 
}

.tech-accordion__header:hover { 
  background-color: rgba(1, 138, 19, 0.05); 
}

.tech-accordion__icon-main { 
  font-size: 1.3rem; 
  color: #004800; 
  min-width: 22px; 
}

.tech-accordion__title { 
  font-size: var(--normal-font-size); 
  font-weight: var(--font-medium); 
  margin: 0; 
  flex-grow: 1; 
}

.tech-accordion__icon-toggle { 
  font-size: 1.1rem; 
  color: var(--text-color-light); 
  transition: transform 0.3s ease; 
  margin-left: auto; 
}

.tech-accordion__item.open .tech-accordion__icon-toggle { 
  transform: rotate(135deg); 
  color: #018a13; 
}

.tech-accordion__content { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height 0.4s ease-out, opacity 0.3s ease-in-out 0.1s, padding 0.4s ease-out; 
  opacity: 0; 
  padding: 0 1rem; 
}

.tech-accordion__content p { 
  padding-bottom: 0.8rem; 
  font-size: var(--small-font-size); 
  color: var(--text-color); 
  line-height: 1.5; 
}

.tech-accordion__item.open .tech-accordion__content { 
  max-height: 200px; 
  opacity: 1; 
  transition-delay: 0s; 
}

.tech-future__outlook { 
  margin-top: var(--mb-1-5); 
  padding: 1rem; 
  border-radius: var(--radius-medium); 
  background-color: rgba(0, 72, 0, 0.08); 
  display: flex; 
  align-items: center; 
  gap: 0.6rem; 
  border-left: 3px solid #004800; 
}

body[data-theme="dark"] .tech-future__outlook { 
  background-color: rgba(0, 72, 0, 0.15); 
  border-left-color: #004800; 
}

.tech-future__outlook i { 
  font-size: 1.5rem; 
  color: #004800; 
  min-width: 25px; 
}

.tech-future__outlook h4 { 
  font-size: 0.9rem; 
  margin-bottom: var(--mb-0-25); 
  color: #004800; 
}

body[data-theme="dark"] .tech-future__outlook h4 { 
  color: #004800; 
}

.tech-future__outlook p { 
  font-size: var(--small-font-size); 
  color: var(--text-color); 
  line-height: 1.4; 
  margin: 0; 
}

/*=============== VANTAGENS SECTION (MOBILE MINIATURE) ===============*/
.vantagens { 
  background-color: var(--body-color); 
}

.vantagens__container { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1.5rem; 
  align-items: center; 
}

.vantagens__image-area { 
  position: relative; 
  width: 100%; 
  max-width: 450px; 
  margin: 0 auto var(--mb-1); 
}

.vantagens__image-slider .slick-slide { 
  padding: 0 5px; 
}

.vantagens__slide-img { 
  width: 100%; 
  border-radius: var(--radius-medium); 
  box-shadow: var(--shadow-medium); 
  object-fit: cover; 
  aspect-ratio: 16 / 10; 
}

.vantagens__image-slider .slick-dots { 
  bottom: -20px; 
}

.vantagens__image-slider .slick-dots li button:before { 
  font-size: 8px; 
  color: var(--text-color-light); 
  opacity: 0.5; 
}

.vantagens__image-slider .slick-dots li.slick-active button:before { 
  color: #018a13; 
  opacity: 1; 
}

.vantagens__image-slider .slick-prev, 
.vantagens__image-slider .slick-next { 
  display: none !important; 
}

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

.vantagem__item {
  display: flex; 
  align-items: flex-start; 
  gap: 0.6rem;
  padding: 0.8rem;
  background-color: var(--container-color); 
  border-radius: var(--radius-medium);
  border: 1px solid var(--border-color); 
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-smooth); 
  cursor: default;
  border-left: 3px solid transparent;
}

.vantagem__item:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
  border-left: 3px solid #018a13;
  padding-left: calc(0.8rem - 3px);
}

.vantagem__icon {
  font-size: 1.4rem;
  color: #004800;
  min-width: 28px;
  line-height: 1; 
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.vantagem__content { 
  flex-grow: 1; 
}

.vantagem__title {
  font-size: 0.95rem;
  font-weight: var(--font-semi-bold); 
  margin-bottom: var(--mb-0-25);
}

.vantagem__description {
  font-size: var(--small-font-size);
  color: var(--text-color); 
  line-height: 1.4; 
  margin: 0;
}

.vantagem__expand-indicator { 
  display: none; 
}

/*=============== SHOWCASE SLIDER (MOBILE FIRST) ===============*/
.dl-showcase { 
  background: linear-gradient(180deg, var(--body-color) 0%, var(--container-color) 100%); 
  padding-bottom: 4rem; 
}

.dl-section-title { 
  font-size: var(--h2-font-size); 
  margin-bottom: var(--mb-0-75); 
  text-align: center; 
  font-weight: var(--font-extra-bold); 
}

.dl-section-subtitle { 
  display: block; 
  text-align: center; 
  font-size: var(--small-font-size); 
  color: #004800; 
  margin-bottom: var(--mb-2); 
  font-weight: var(--font-medium); 
  text-transform: uppercase; 
  letter-spacing: 1.2px; 
}

.dl-showcase-slider-wrapper { 
  margin-top: var(--mb-2); 
  position: relative; 
}

.dl-showcase-slider .slick-slide { 
  padding: 0 8px; 
  opacity: 1; 
  transform: scale(1); 
  transition: opacity 0.5s ease, transform 0.5s ease; 
}

.dl-showcase-slider .slick-center { 
  transform: scale(1.02); 
  z-index: 2; 
}

.slider-item { 
  text-align: center; 
}

.slider-title { 
  font-size: var(--h3-font-size); 
  font-weight: var(--font-semi-bold); 
  margin-top: var(--mb-0-5); 
  margin-bottom: var(--mb-1); 
  color: var(--title-color); 
  opacity: 1; 
  transition: opacity 0.4s ease 0.2s; 
}

.dl-screenshot { 
  border-radius: var(--radius-large); 
  box-shadow: var(--shadow-medium); 
  border: 3px solid var(--body-color); 
  display: block; 
  margin: 0 auto; 
  max-height: 400px; 
  width: auto; 
  transition: box-shadow 0.4s ease, border-color 0.4s ease; 
}

.slick-center .dl-screenshot { 
  box-shadow: var(--shadow-strong); 
  border-color: var(--container-color); 
}

body[data-theme="dark"] .dl-screenshot { 
  border-color: var(--container-color); 
}

body[data-theme="dark"] .slick-center .dl-screenshot { 
  border-color: var(--body-color); 
}

.dl-showcase-slider .slick-prev, 
.dl-showcase-slider .slick-next { 
  display: none !important; 
}

.dl-showcase-slider .slick-dots { 
  bottom: -25px; 
}

.dl-showcase-slider .slick-dots li button:before { 
  font-size: 9px; 
  color: var(--text-color-light); 
  opacity: 0.4; 
}

.dl-showcase-slider .slick-dots li.slick-active button:before { 
  color: #018a13; 
  opacity: 1; 
}

/*=============== TESTIMONIALS SECTION (MOBILE MINIATURE) ===============*/
.testimonials { 
  background-color: var(--body-color); 
}

.testimonials__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: var(--mb-1-5);
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial__card {
  background-color: var(--container-color);
  padding: 1.2rem 1rem;
  border-radius: var(--radius-medium);
  border: 1px solid var(--border-color);
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.testimonial__card:before {
  content: '\F10D';
  font-family: 'remixicon';
  position: absolute;
  top: -10px; 
  left: -5px;
  font-size: 4rem;
  color: #018a13;
  opacity: 0.04;
  z-index: 0;
  transform: rotate(-15deg);
}

.testimonial__card:hover { 
  transform: translateY(-4px); 
  box-shadow: var(--shadow-medium); 
}

.testimonial__img {
  width: 55px; 
  height: 55px;
  border-radius: var(--radius-circle); 
  object-fit: cover;
  margin: 0 auto var(--mb-0-75);
  border: 2px solid #e6f7e8;
  position: relative; 
  z-index: 1;
}

.testimonial__quote {
  font-size: var(--small-font-size);
  color: var(--text-color); 
  line-height: 1.5;
  margin-bottom: var(--mb-0-5);
  font-style: italic; 
  position: relative; 
  z-index: 1;
  padding: 0 0.2rem;
}

.testimonial__name {
  font-size: 0.95rem;
  font-weight: var(--font-semi-bold); 
  margin-bottom: 1px;
  color: var(--title-color); 
  position: relative; 
  z-index: 1;
}

.testimonial__role {
  font-size: var(--smaller-font-size);
  color: var(--text-color-light); 
  position: relative; 
  z-index: 1;
}

/*=============== FAQ SECTION (MOBILE FIRST) ===============*/
.faq { 
  background-color: var(--container-color); 
}

.faq__container { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 0.8rem; 
  max-width: 700px; 
  margin: var(--mb-1-5) auto 0; 
}

.faq__group { 
  display: flex; 
  flex-direction: column; 
  gap: 0.8rem; 
}

.faq__item { 
  background-color: var(--body-color); 
  border-radius: var(--radius-medium); 
  border: 1px solid var(--border-color); 
  overflow: hidden; 
  box-shadow: var(--shadow-soft); 
  transition: box-shadow var(--transition-smooth); 
}

.faq__item:hover { 
  box-shadow: var(--shadow-medium); 
}

.faq__header { 
  display: flex; 
  align-items: center; 
  gap: 0.6rem; 
  padding: 1rem; 
  cursor: pointer; 
  transition: background-color 0.3s ease; 
}

.faq__header:hover { 
  background-color: rgba(1, 138, 19, 0.05); 
}

.faq__icon { 
  font-size: 1.1rem; 
  color: #018a13; 
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
  flex-shrink: 0; 
}

.faq__title { 
  font-size: 0.95rem; 
  font-weight: var(--font-medium); 
  margin: 0; 
  flex-grow: 1; 
  line-height: 1.3; 
}

.faq__item.open .faq__icon { 
  transform: rotate(135deg); 
}

.faq__content { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height 0.4s ease-out, padding 0.4s ease-out, opacity 0.3s ease-in-out 0.1s; 
  opacity: 0; 
  padding: 0 1rem; 
}

.faq__content p { 
  padding-bottom: 1rem; 
  font-size: var(--small-font-size); 
  color: var(--text-color); 
  line-height: 1.5; 
}

.faq__item.open .faq__content { 
  max-height: 220px; 
  opacity: 1; 
  transition-delay: 0s; 
}

/*=============== DOWNLOAD SECTION (CTA FINAL - MOBILE FIRST) ===============*/
.download { 
  background: linear-gradient(135deg, #018a13, #004800); 
  padding: 4rem 0; 
  position: relative; 
  overflow: hidden; 
}

.download__background { 
  position: absolute; 
  inset: 0; 
  opacity: 0.06; 
  pointer-events: none; 
}

.download__container { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 2rem; 
  align-items: center; 
  position: relative; 
  z-index: 1; 
}

.download__data { 
  text-align: center; 
}

.download__data .section__subtitle { 
  color: hsla(0, 0%, 100%, 0.8); 
  font-size: var(--small-font-size); 
  margin-bottom: var(--mb-0-5); 
}

.download__data .section__title { 
  color: #fff; 
  font-size: var(--h2-font-size); 
  margin-bottom: var(--mb-0-75); 
}

.download__description { 
  color: hsla(0, 0%, 100%, 0.85); 
  margin-bottom: var(--mb-1-5); 
  line-height: 1.5; 
  max-width: 90%; 
  margin-left: auto; 
  margin-right: auto; 
  font-size: var(--normal-font-size); 
}

.download__form { 
  display: flex; 
  flex-direction: column; 
  gap: 0.5rem; 
  margin-bottom: var(--mb-1); 
  max-width: 350px; 
  margin-left: auto; 
  margin-right: auto; 
}

.download__input { 
  background-color: hsla(0, 0%, 100%, 0.9); 
  border: 1px solid transparent; 
  padding: 0.8rem 1rem; 
  border-radius: var(--radius-medium); 
  flex-grow: 1; 
  color: #333; 
  box-shadow: var(--shadow-inset); 
  font-size: var(--normal-font-size); 
}

.download__input::placeholder { 
  color: #777; 
}

.download__form .button { 
  background-color: hsl(var(--neutral-hue), 20%, 98%); 
  color: #018a13; 
  box-shadow: var(--shadow-medium); 
  width: 100%; 
}

.download__form .button:hover { 
  background-color: #fff; 
  color: #017a10; 
}

.download__stores { 
  display: flex; 
  justify-content: center; 
  gap: 0.6rem; 
  align-items: center; 
  margin-top: var(--mb-1); 
}

.download__store-img { 
  height: 38px; 
  width: auto; 
  opacity: 0.9; 
  transition: opacity 0.3s ease, transform 0.3s ease; 
}

.download__store-img:hover { 
  opacity: 1; 
  transform: scale(1.05); 
}

.download__image { 
  display: flex; 
  justify-content: center; 
  order: -1; 
  margin-bottom: var(--mb-0-5); 
}

.download__img { 
  max-width: 250px; 
  width: 75%; 
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.15)); 
  transform: rotate(3deg); 
}

/*=============== CONTACT SECTION (MOBILE MINIATURE) ===============*/
.contact { 
  background-color: var(--body-color); 
  padding-bottom: 3rem; 
}

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

.contact__title { 
  font-size: var(--h3-font-size); 
  margin-bottom: var(--mb-1); 
}

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

.contact__card {
  background-color: var(--container-color); 
  padding: 1rem 0.8rem;
  border-radius: var(--radius-medium);
  border: 1px solid var(--border-color);
  display: flex; 
  flex-direction: column; 
  gap: 0.3rem;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
}

.contact__card:hover { 
  box-shadow: var(--shadow-medium); 
  transform: translateY(-3px); 
}

.contact__card-icon {
  font-size: 1.4rem;
  color: #018a13;
  margin-bottom: var(--mb-0-25);
  line-height: 1;
}

.contact__card-title {
  font-size: 0.9rem;
  font-weight: var(--font-medium); 
  margin: 0;
}

.contact__card-data {
  font-size: var(--small-font-size);
  color: var(--text-color);
  line-height: 1.4;
}

.contact__button {
  color: #018a13; 
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium); 
  display: inline-flex; 
  align-items: center;
  gap: 0.2rem; 
  margin-top: var(--mb-0-5); 
  align-self: flex-start;
}

.contact__button i { 
  transition: transform 0.3s ease; 
  font-size: 0.8rem; 
}

.contact__button:hover i { 
  transform: translateX(3px); 
}

.contact__social { 
  display: flex; 
  gap: 0.6rem; 
  margin-top: var(--mb-0-5); 
}

.contact__social-link { 
  font-size: 1.2rem; 
  color: var(--text-color-light); 
  transition: color var(--transition-fast), transform var(--transition-fast); 
}

.contact__social-link:hover { 
  color: #018a13; 
  transform: translateY(-2px); 
}

.contact__form { 
  display: flex; 
  flex-direction: column; 
  gap: 1rem; 
}

.contact__form-div { 
  position: relative; 
}

.contact__form-input { 
  width: 100%; 
  padding: 1rem 1rem 0.5rem; 
  font-size: var(--normal-font-size); 
  background-color: var(--input-bg-color); 
  border: 1px solid var(--input-border-color); 
  border-radius: var(--radius-medium); 
  color: var(--text-color); 
  transition: border-color 0.3s ease, box-shadow 0.3s ease; 
}

.contact__form-input:focus { 
  border-color: #018a13; 
  box-shadow: 0 0 0 3px rgba(1, 138, 19, 0.2); 
}

.contact__form-tag { 
  position: absolute; 
  top: 0.8rem; 
  left: 1rem; 
  font-size: var(--normal-font-size); 
  color: var(--text-color-light); 
  pointer-events: none; 
  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease, background-color 0.3s ease, padding 0.3s ease; 
}

.contact__form-input:focus + .contact__form-tag, 
.contact__form-input:not(:placeholder-shown) + .contact__form-tag { 
  top: 0.2rem; 
  font-size: var(--tiny-font-size); 
  color: #018a13; 
  background-color: var(--input-bg-color); 
  padding: 0 0.3rem; 
  margin-left: -0.15rem; 
}

.contact__form-area textarea { 
  min-height: 90px; 
  resize: vertical; 
}

.contact__form .button { 
  margin-top: var(--mb-0-5); 
  align-self: flex-start; 
}

#contact-feedback, 
#subscribe-feedback { 
  margin-top: var(--mb-0-75); 
  font-size: var(--small-font-size); 
}

/*=============== FOOTER (MOBILE FIRST) ===============*/
.footer { 
  background-color: var(--container-color); 
  padding-top: 3rem; 
  border-top: 1px solid var(--border-color); 
}

body[data-theme="dark"] .footer { 
  background-color: hsl(var(--neutral-hue), 20%, 7%); 
}

.footer__container { 
  grid-template-columns: 1fr; 
  gap: 1.5rem; 
  padding-bottom: var(--mb-2); 
}

.footer__content { 
  margin-bottom: var(--mb-1); 
}

.footer__logo { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.4rem; 
  margin-bottom: var(--mb-0-5); 
  color: var(--title-color); 
  font-size: 1.1rem; 
  font-weight: var(--font-semi-bold); 
}

.footer__logo-img { 
  width: 32px; 
  height: 32px; 
  border-radius: var(--radius-circle); 
}

.footer__description { 
  font-size: var(--small-font-size); 
  color: var(--text-color-light); 
  margin-bottom: var(--mb-0-75); 
  line-height: 1.5; 
}

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

.footer__social-link { 
  font-size: 1.3rem; 
  color: var(--text-color-light); 
  transition: color var(--transition-fast), transform var(--transition-fast); 
}

.footer__social-link:hover { 
  color: #018a13; 
  transform: translateY(-2px); 
}

.footer__title { 
  font-size: 1rem; 
  font-weight: var(--font-medium); 
  margin-bottom: var(--mb-0-75); 
  color: var(--title-color); 
}

.footer__links { 
  display: flex; 
  flex-direction: column; 
  gap: 0.4rem; 
}

.footer__link { 
  font-size: var(--small-font-size); 
  color: var(--text-color-light); 
  transition: color var(--transition-fast), padding-left 0.3s ease; 
  display: inline-block; 
  padding: 0.1rem 0; 
}

.footer__link:hover { 
  color: #018a13; 
  padding-left: 4px; 
}

.footer__link--static { 
  font-size: var(--small-font-size); 
  color: var(--text-color-light); 
  display: flex; 
  align-items: center; 
  gap: 0.3rem; 
}

.footer__link--static i { 
  margin-top: 1px; 
  font-size: 0.9rem; 
}

.footer__bottom { 
  border-top: 1px solid var(--border-color); 
  padding: 1rem 0; 
  margin-top: var(--mb-0-75); 
}

.footer__copy { 
  display: block; 
  text-align: center; 
  font-size: var(--smaller-font-size); 
  color: var(--text-color-light); 
}

.footer__copy a { 
  color: #018a13; 
  font-weight: var(--font-medium); 
}

.footer__copy a:hover { 
  text-decoration: underline; 
}

/*=============== MODALS (MOBILE MINIATURE FOCUS) ===============*/
.modal { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  z-index: var(--z-modal); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 0.5rem; 
  visibility: hidden; 
  opacity: 0; 
  transition: visibility 0s linear 0.3s, opacity 0.3s ease; 
}

.modal.is-open { 
  visibility: visible; 
  opacity: 1; 
  transition-delay: 0s; 
}

.modal__overlay { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: var(--modal-overlay-color); 
  cursor: pointer; 
}

.modal__container {
  position: relative; 
  background-color: var(--modal-bg-color);
  border-radius: var(--radius-medium);
  max-width: 96%;
  width: 100%; 
  max-height: 88vh;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  transform: scale(0.95) translateY(10px); 
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
  display: flex; 
  flex-direction: column;
}

.modal.is-open .modal__container { 
  transform: scale(1) translateY(0); 
  opacity: 1; 
}

.modal__container.modal--large { 
  max-width: 96%; 
}

.modal__header {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border-color); 
  flex-shrink: 0;
}

.modal__title {
  font-size: 1.05rem;
  font-weight: var(--font-semi-bold); 
  display: flex; 
  align-items: center;
  gap: 0.4rem; 
  margin: 0; 
  line-height: 1.2;
}

.modal__title i { 
  font-size: 1.1rem; 
  color: #018a13; 
}

.modal__close {
  background: none; 
  border: none; 
  font-size: 1.5rem;
  color: var(--text-color-light); 
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
  padding: 0.2rem; 
  line-height: 1;
}

.modal__close:hover { 
  color: #018a13; 
  transform: rotate(90deg) scale(1.1); 
}

.modal__content {
  padding: 0.8rem 0.8rem;
  overflow-y: auto; 
  flex-grow: 1;
}

.modal__content::-webkit-scrollbar { 
  width: 4px; 
}

.modal__content::-webkit-scrollbar-track { 
  background: transparent; 
}

.modal__content::-webkit-scrollbar-thumb { 
  background-color: #018a13; 
  border-radius: var(--radius-pill); 
}

.modal__content::-webkit-scrollbar-thumb:hover { 
  background-color: #018a13; 
}

.modal__content h4 { 
  font-size: 0.95rem; 
  font-weight: var(--font-semi-bold); 
  margin-top: 0.8rem; 
  margin-bottom: 0.5rem; 
}

.modal__content h4:first-child { 
  margin-top: 0; 
}

.modal__content p { 
  color: var(--text-color); 
  line-height: 1.5; 
  margin-bottom: 0.6rem; 
  font-size: var(--small-font-size); 
}

.modal__content ul:not(.map-legend, #status-history-list, #user-activity-list) { 
  list-style: none; 
  padding-left: 0; 
  margin-bottom: 0.6rem; 
}

.modal__content ul:not(.map-legend, #status-history-list, #user-activity-list) li { 
  margin-bottom: 0.3rem; 
  display: flex; 
  align-items: flex-start; 
  gap: 0.3rem; 
  font-size: var(--small-font-size); 
}

.modal__content ul:not(.map-legend, #status-history-list, #user-activity-list) li i { 
  color: #004800; 
  margin-top: 0.1rem; 
  min-width: 12px; 
  font-size: 0.8rem; 
}

.modal__footer {
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--border-color);
  display: flex; 
  justify-content: flex-end; 
  gap: 0.5rem;
  background-color: var(--container-color); 
  flex-shrink: 0;
}

body[data-theme="dark"] .modal__footer { 
  background-color: hsl(var(--neutral-hue), 20%, 18%); 
}

.modal__footer .button { 
  font-size: var(--smaller-font-size); 
  padding: 0.5rem 1rem; 
}

/* Action Feedback */
.action-feedback { 
  padding: 0.6rem 1rem; 
  border-radius: var(--radius-medium); 
  margin-top: 0.8rem; 
  font-size: var(--small-font-size); 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  border: 1px solid transparent; 
  opacity: 0; 
  transform: translateY(8px); 
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease-out, margin-top 0.3s ease-out, padding 0.3s ease-out; 
  max-height: 0; 
  overflow: hidden; 
}

.action-feedback.show { 
  opacity: 1; 
  transform: translateY(0); 
  max-height: 100px; 
  margin-top: 0.8rem; 
  padding: 0.6rem 1rem; 
}

.feedback-success { 
  background-color: hsl(var(--success-hue), 70%, 92%); 
  color: hsl(var(--success-hue), 80%, 25%); 
  border-color: hsl(var(--success-hue), 60%, 80%); 
}

.feedback-error { 
  background-color: hsl(var(--danger-hue), 80%, 94%); 
  color: hsl(var(--danger-hue), 70%, 40%); 
  border-color: hsl(var(--danger-hue), 70%, 85%); 
}

.feedback-info { 
  background-color: hsl(var(--info-hue), 80%, 93%); 
  color: hsl(var(--info-hue), 60%, 35%); 
  border-color: hsl(var(--info-hue), 70%, 85%); 
}

.feedback-warning { 
  background-color: hsl(var(--warning-hue), 90%, 92%); 
  color: hsl(var(--warning-hue), 70%, 40%); 
  border-color: hsl(var(--warning-hue), 80%, 80%); 
}

body[data-theme="dark"] .feedback-success { 
  background-color: hsla(var(--success-hue), 60%, 45%, 0.2); 
  color: hsl(var(--success-hue), 70%, 80%); 
  border-color: hsla(var(--success-hue), 60%, 45%, 0.5); 
}

body[data-theme="dark"] .feedback-error { 
  background-color: hsla(var(--danger-hue), 75%, 55%, 0.2); 
  color: hsl(var(--danger-hue), 80%, 85%); 
  border-color: hsla(var(--danger-hue), 75%, 55%, 0.5); 
}

body[data-theme="dark"] .feedback-info { 
  background-color: hsla(var(--black-hue), 0%, 13%, 0.15); 
  color: hsl(var(--neutral-hue), 15%, 78%); 
  border-color: hsla(var(--black-hue), 0%, 13%, 0.4); 
}

body[data-theme="dark"] .feedback-warning { 
  background-color: hsla(var(--warning-hue), 95%, 60%, 0.15); 
  color: hsl(var(--warning-hue), 90%, 75%); 
  border-color: hsla(var(--warning-hue), 95%, 60%, 0.4); 
}

/* Map Controls */
.map-controls { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  align-items: center; 
  gap: 0.6rem; 
  margin-bottom: 0.8rem; 
  padding-bottom: 0.6rem; 
  border-bottom: 1px solid var(--border-color); 
}

.map-zoom-sim { 
  display: flex; 
  gap: 0.3rem; 
}

.map-zoom-sim .button--icon { 
  width: 28px; 
  height: 28px; 
  font-size: 0.9rem; 
}

.map-legend { 
  margin: 0; 
  display: flex; 
  gap: 0.5rem; 
  align-items: center; 
  list-style: none; 
  padding: 0; 
  font-size: var(--tiny-font-size); 
  flex-wrap: wrap; 
}

.map-legend li { 
  display: flex; 
  align-items: center; 
  gap: 0.2rem; 
}

.pin-legend { 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  display: inline-block; 
}

.pin-legend.available { 
  background-color: var(--success-color); 
}

.pin-legend.likely { 
  background-color: var(--warning-color); 
}

.pin-legend.unavailable { 
  background-color: var(--danger-color); 
}

.pin-legend.user { 
  background: none; 
  border: 1.5px solid #018a13; 
  width: 9px; 
  height: 9px; 
}

/* Map Dynamic Layout */
.map-dynamic-layout { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 0.8rem; 
  margin-bottom: 0.8rem; 
}

.map-container { 
  position: relative; 
  height: 220px; 
  background-color: var(--border-color); 
  border-radius: var(--radius-medium); 
  overflow: hidden; 
}

.map-container iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; 
  filter: grayscale(40%) brightness(0.95); 
  transition: filter 0.3s ease; 
  pointer-events: none; 
}

.map-container:hover iframe { 
  filter: grayscale(10%) brightness(1); 
}

/* Map Pins */
.map-pin.simulated-pin { 
  position: absolute; 
  width: 20px; 
  height: 20px; 
  border-radius: 50% 50% 50% 0; 
  transform: rotate(-45deg) translate(-50%, -50%); 
  transform-origin: center center; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0s linear 0.25s; 
  box-shadow: 0 1px 4px rgba(0,0,0,0.25); 
  z-index: 5; 
}

.map-pin.simulated-pin::before { 
  content: ''; 
  font-size: 0.7rem; 
  transform: rotate(45deg); 
  color: #fff; 
}

.map-pin.simulated-pin:hover, 
.map-pin.simulated-pin.selected-pin { 
  transform: rotate(-45deg) translate(-50%, -50%) scale(1.15); 
  z-index: 10; 
  box-shadow: 0 3px 8px rgba(0,0,0,0.35); 
  transition-delay: 0s; 
}

.map-pin.pin-available { 
  background-color: var(--success-color); 
}

.map-pin.pin-likely { 
  background-color: var(--warning-color); 
}

.map-pin.pin-unavailable { 
  background-color: var(--danger-color); 
}

.map-pin.pin-user { 
  background-color: #018a13; 
  width: 16px; 
  height: 16px; 
  border-radius: 50%; 
  border: 1.5px solid white; 
  box-shadow: 0 0 0 1.5px #018a13; 
  animation: pulse-marker-mobile 2s infinite ease-in-out; 
  z-index: 15; 
  transform: translate(-50%, -50%); 
}

.map-pin.pin-user::before { 
  display: none; 
}

@keyframes pulse-marker-mobile { 
  0%, 100% { 
    box-shadow: 0 0 0 1.5px #018a13, 0 0 0 5px rgba(1, 138, 19, 0.2); 
    transform: translate(-50%, -50%) scale(1); 
  } 
  50% { 
    box-shadow: 0 0 0 2px #018a13, 0 0 0 7px rgba(1, 138, 19, 0.1); 
    transform: translate(-50%, -50%) scale(1.1); 
  } 
}

/* ATM Details */
.atm-details-dynamic { 
  background-color: var(--container-color); 
  border: 1px solid var(--border-color); 
  padding: 0.7rem 0.8rem; 
  border-radius: var(--radius-medium); 
  min-height: auto; 
  display: flex; 
  flex-direction: column; 
  transition: all 0.3s ease; 
}

.atm-details-dynamic .placeholder-text { 
  font-style: italic; 
  color: var(--text-color-light); 
  text-align: center; 
  margin: var(--mb-1) auto; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 0.3rem; 
  font-size: var(--small-font-size); 
}

.atm-details-dynamic .placeholder-text i { 
  font-size: 1.3rem; 
  opacity: 0.7; 
}

.atm-detail-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  margin-bottom: var(--mb-0-5); 
  gap: 0.6rem; 
}

.atm-detail-header h4 { 
  margin: 0; 
  font-size: 1rem; 
  line-height: 1.2; 
  flex-grow: 1; 
}

.atm-detail-actions { 
  display: flex; 
  gap: 0.3rem; 
  flex-shrink: 0; 
}

.atm-detail-actions button { 
  font-size: 1.1rem; 
  padding: 0.2rem; 
  color: var(--text-color-light); 
}

.atm-detail-actions button:hover { 
  color: #018a13; 
}

.atm-detail-actions button.favorited { 
  color: var(--danger-color); 
}

.atm-detail-actions button.favorited:hover { 
  color: hsl(var(--danger-hue), 80%, 60%); 
}

.atm-info-list { 
  list-style: none; 
  padding: 0; 
  margin: 0 0 var(--mb-0-5) 0; 
}

.atm-info-list li { 
  margin-bottom: 0.3rem; 
  display: flex; 
  align-items: center; 
  gap: 0.3rem; 
  font-size: var(--smaller-font-size); 
  color: var(--text-color); 
}

.atm-info-list li i { 
  color: #004800; 
  min-width: 14px; 
  font-size: 0.9rem; 
}

.atm-info-list li strong { 
  font-weight: var(--font-medium); 
  color: var(--title-color); 
  margin-right: 0.2rem;
}

.atm-info-list li span:not(strong) { 
  color: var(--text-color-light); 
}

.atm-info-list li small { 
  display: none; 
}

.atm-info-list li .status-icon { 
  font-weight: bold; 
}

.atm-info-list li .status-icon.available { 
  color: var(--success-color); 
}

.atm-info-list li .status-icon.likely { 
  color: var(--warning-color); 
}

.atm-info-list li .status-icon.unavailable { 
  color: var(--danger-color); 
}

.atm-services-list { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.3rem; 
  margin-top: 0.5rem; 
}

.atm-services-list span { 
  font-size: var(--tiny-font-size); 
  padding: 0.15rem 0.4rem; 
  background-color: #e6f7e8; 
  color: #017a10; 
  border-radius: var(--radius-tiny); 
}

body[data-theme="dark"] .atm-services-list span { 
  background-color: rgba(1, 138, 19, 0.15); 
  color: #4CAF50; 
}

.atm-detail-footer { 
  margin-top: auto; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  align-items: center; 
  padding-top: 0.6rem; 
  border-top: 1px dashed var(--border-color); 
  gap: 0.4rem; 
}

.last-report-time { 
  font-size: var(--tiny-font-size); 
  color: var(--text-color-light); 
}

.atm-detail-footer .button--small { 
  padding: 0.4rem 0.8rem; 
  font-size: var(--tiny-font-size); 
}

.permission-note { 
  font-size: var(--tiny-font-size); 
  text-align: center; 
  margin-top: 0.8rem; 
  opacity: 0.8; 
}

.permission-note i { 
  margin-right: 0.2rem; 
}

/* Status Refresh Area */
.status-refresh-area { 
  flex-direction: column; 
  align-items: flex-start; 
  gap: 0.4rem; 
  margin-bottom: 0.8rem; 
  padding-bottom: 0.6rem; 
  border-bottom: 1px solid var(--border-color);
}

.timestamp { 
  font-size: var(--tiny-font-size); 
}

.status-refresh-area .button--small { 
  align-self: flex-end; 
  font-size: var(--smaller-font-size); 
  padding: 0.4rem 0.8rem; 
}

/* Status Sources Grid */
.status-sources-grid { 
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
  gap: 0.6rem; 
  margin-bottom: 0.8rem; 
}

.info-block.status-source { 
  padding: 0.6rem; 
  text-align: center; 
}

.status-source-icon { 
  font-size: 1.8rem; 
  margin-bottom: 0.2rem; 
}

.status-source h5 { 
  font-size: 0.85rem; 
  margin-bottom: 0.1rem; 
}

.status-source-detail { 
  font-size: var(--tiny-font-size); 
  margin-bottom: 0.3rem; 
  min-height: auto; 
  line-height: 1.3; 
}

.confidence-bar { 
  height: 4px; 
  margin-top: 0.3rem;
}

/* Status Summary */
.status-summary { 
  margin-top: 0.8rem; 
  padding-top: 0.8rem; 
  border-top: 1px dashed var(--border-color); 
}

.consolidated-status { 
  padding: 0.8rem; 
}

.status-badge { 
  padding: 0.25rem 0.8rem; 
  font-size: 0.9rem; 
  margin-bottom: 0.5rem; 
}

.status-badge.status--available { 
  background-color: var(--success-color); 
  color: #fff;
}

.status-badge.status--likely { 
  background-color: var(--warning-color); 
  color: hsl(var(--warning-hue), 100%, 15%);
}

.status-badge.status--unavailable { 
  background-color: var(--danger-color); 
  color: #fff;
}

.consolidated-status p { 
  font-size: var(--small-font-size); 
  margin-bottom: 0.6rem; 
}

.overall-confidence { 
  font-size: var(--tiny-font-size); 
}

.overall-confidence strong { 
  font-size: 1.1em; 
}

.confidence-bar.overall { 
  max-width: 150px; 
  height: 5px; 
}

/* Recent History */
.recent-history { 
  margin-top: 0.8rem; 
  padding-top: 0.8rem; 
  border-top: 1px solid var(--border-color); 
}

.recent-history h4 { 
  font-size: 0.9rem; 
  margin-bottom: 0.5rem; 
}

#status-history-list { 
  max-height: 90px; 
  font-size: var(--tiny-font-size); 
}

#status-history-list li { 
  gap: 0.3rem; 
  padding: 0.1rem 0; 
}

#status-history-list li i { 
  font-size: 0.8rem; 
}

#status-history-list li .history-status { 
  font-weight: var(--font-medium); 
}

#status-history-list li .history-time { 
  margin-left: auto; 
  color: var(--text-color-light); 
}

/* Route Planning */
.route-planning-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1rem; 
}

.route-options-details h4 { 
  font-size: 0.95rem; 
  margin-bottom: 0.6rem; 
}

.route-options { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.5rem; 
  margin-bottom: 0.8rem; 
  justify-content: center;
}

.selectable-card {
  padding: 0.5rem 0.6rem; 
  border-width: 1px; 
  min-width: 65px; 
  gap: 0.2rem; 
  flex-direction: column; 
  align-items: center; 
  text-align: center;
}

.selectable-card:hover { 
  transform: translateY(-1px); 
}

.selectable-card.selected { 
  border-width: 2px; 
  box-shadow: 0 0 0 2px rgba(1, 138, 19, 0.2); 
  transform: translateY(-1px); 
  border-color: #018a13; 
}

.selectable-card i { 
  font-size: 1.3rem; 
  margin-bottom: 0.1rem; 
}

.selectable-card span { 
  font-size: var(--tiny-font-size); 
  line-height: 1.2; 
}

.selectable-card small { 
  display: none; 
}

.route-summary { 
  margin-top: 0.8rem; 
  padding: 0.8rem; 
}

.route-summary h4 { 
  font-size: 0.95rem; 
  margin-bottom: 0.6rem; 
  gap: 0.3rem; 
}

.route-summary ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.route-summary li { 
  margin-bottom: 0.3rem; 
  font-size: var(--tiny-font-size); 
  gap: 0.3rem; 
  display: flex; 
  align-items: center; 
}

.route-summary li i { 
  font-size: 0.9rem; 
  min-width: 14px; 
  color: #004800; 
}

.route-summary li strong { 
  font-weight: var(--font-medium); 
  margin-right: 0.2rem;
}

.safety-indicator { 
  width: 6px; 
  height: 6px; 
  margin-left: 0.2rem; 
  border-radius: 50%; 
  display: inline-block; 
  flex-shrink: 0;
}

.safety-indicator.safe { 
  background-color: var(--success-color); 
}

.safety-indicator.medium { 
  background-color: var(--warning-color); 
}

.safety-indicator.risky { 
  background-color: var(--danger-color); 
}

.route-map-preview h4 { 
  font-size: 0.95rem; 
  margin-bottom: 0.6rem; 
}

.map-route-placeholder { 
  height: 150px; 
  background-color: var(--border-color); 
  border-radius: var(--radius-small); 
}

/* Share Section */
.share-section { 
  margin-top: 1rem; 
  padding-top: 0.8rem; 
  border-top: 1px dashed var(--border-color); 
}

.share-section h4 { 
  font-size: 0.95rem; 
  margin-bottom: 0.6rem;
}

.simulated-button-group { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 0.5rem; 
  margin-top: 0.6rem; 
}

.simulated-button-group .button--small { 
  padding: 0.4rem 0.8rem; 
  font-size: var(--tiny-font-size); 
}

/* Filters Grid */
.filters-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 0.8rem; 
}

.filter-group h5 { 
  font-size: 0.9rem; 
  margin-bottom: 0.5rem; 
  gap: 0.3rem; 
  border-bottom: 1px solid var(--border-color); 
  padding-bottom: 0.3rem; 
}

.filter-options { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.4rem; 
}

.checkbox-group label { 
  gap: 0.3rem; 
  padding: 0.3rem 0.6rem; 
  font-size: var(--tiny-font-size); 
  background-color: var(--container-color); 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius-pill); 
  cursor: pointer; 
  display: inline-flex; 
  align-items: center;
}

.checkbox-group input[type="checkbox"] { 
  display: none; 
}

.checkbox-group label::before { 
  content: ''; 
  display: inline-block; 
  width: 12px; 
  height: 12px; 
  border: 1px solid var(--border-color); 
  border-radius: 3px; 
  margin-right: 0.3rem; 
  background-color: var(--input-bg-color); 
  transition: background-color 0.2s ease, border-color 0.2s ease; 
}

.checkbox-group input[type="checkbox"]:checked + span::before,
.checkbox-group input[type="checkbox"]:checked + ::before { 
  background-color: #018a13; 
  border-color: #018a13; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='white'%3E%3Cpath d='M8.8.3L4.1 5 1.2 2.1.3 3l3.8 3.8L9.7 1.2z'/%3E%3C/svg%3E"); 
  background-repeat: no-repeat; 
  background-position: center; 
  background-size: 8px; 
}

.checkbox-group label i { 
  font-size: 0.8rem; 
  margin-left: 0.2rem; 
  color: var(--text-color-light); 
}

.range-slider { 
  margin-top: 0.2rem; 
}

.range-slider input[type="range"] { 
  height: 4px; 
  margin-bottom: 0.2rem; 
  cursor: pointer; 
}

.range-slider input[type="range"]::-webkit-slider-thumb { 
  width: 14px; 
  height: 14px; 
  border-width: 2px; 
  appearance: none; 
  -webkit-appearance: none; 
  background: #018a13; 
  border: 2px solid var(--body-color); 
  border-radius: 50%; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
  cursor: pointer;
}

.range-slider input[type="range"]::-moz-range-thumb { 
  width: 12px; 
  height: 12px; 
  border-width: 2px; 
  background: #018a13; 
  border: 2px solid var(--body-color); 
  border-radius: 50%; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
  cursor: pointer;
}

#radius-value { 
  font-size: var(--tiny-font-size); 
  font-weight: var(--font-medium); 
  color: #018a13; 
  display: block; 
  text-align: right; 
}

.filter-actions { 
  margin-top: 1rem; 
  padding-top: 0.8rem; 
  border-top: 1px solid var(--border-color); 
  display: flex; 
  flex-direction: column; 
  gap: 0.6rem; 
  align-items: center;
}

.filter-results-count { 
  font-size: var(--tiny-font-size); 
  gap: 0.2rem; 
  display: flex; 
  align-items: center; 
  color: var(--text-color-light); 
}

.filter-results-count i { 
  font-size: 0.9rem; 
}

.filter-buttons-group { 
  display: flex; 
  gap: 0.5rem; 
  width: 100%; 
  justify-content: space-between;
}

.filter-buttons-group .button { 
  flex-grow: 1; 
}

/* Economy Simulator */
.economy-simulator { 
  margin-bottom: 1rem; 
}

.simulator-controls { 
  display: grid; 
  grid-template-columns: auto 1fr; 
  gap: 0.4rem 0.6rem; 
  padding: 0.8rem; 
  margin-bottom: 0.8rem; 
  background-color: var(--container-color); 
  border-radius: var(--radius-medium); 
  border: 1px solid var(--border-color); 
  align-items: center; 
}

.simulator-controls label { 
  text-align: left; 
  font-size: var(--small-font-size); 
  color: var(--text-color-light); 
  line-height: 1.3; 
}

.simulator-controls input[type="number"] { 
  padding: 0.4rem 0.6rem; 
  font-size: var(--small-font-size); 
  text-align: right; 
}

.slider-with-value { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  grid-column: 1 / -1; 
}

.slider-with-value input[type="range"] { 
  height: 5px; 
  flex-grow: 1;
}

.slider-with-value input[type="range"]::-webkit-slider-thumb { 
  width: 16px; 
  height: 16px; 
  border-width: 2px; 
}

.slider-with-value input[type="range"]::-moz-range-thumb { 
  width: 14px; 
  height: 14px; 
  border-width: 2px; 
}

#informal-fee-value { 
  min-width: 25px; 
  font-size: var(--small-font-size); 
  font-weight: var(--font-medium); 
  text-align: right; 
}

.economy-comparison-dynamic { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 0.6rem; 
  margin-bottom: 0.8rem; 
}

.dynamic-card { 
  padding: 0.8rem; 
  background-color: var(--container-color); 
  border-radius: var(--radius-medium); 
  text-align: center; 
  border: 1px solid var(--border-color); 
}

.dynamic-card .large-icon { 
  font-size: 2rem; 
  margin-bottom: 0.2rem; 
}

.dynamic-card h4 { 
  font-size: 0.85rem; 
  margin-bottom: 0.3rem; 
  color: var(--text-color-light); 
}

.dynamic-card .comparison-value { 
  font-size: 1.2rem; 
  margin-bottom: 0.1rem; 
  font-weight: var(--font-semi-bold); 
}

.dynamic-card small { 
  font-size: var(--tiny-font-size); 
  color: var(--text-color-light); 
}

.dynamic-card.atm-cost .comparison-value { 
  color: var(--danger-color); 
}

.dynamic-card.our-cost .comparison-value { 
  color: var(--success-color); 
}

.savings-highlight.dynamic-savings { 
  margin-top: 0.8rem; 
  padding: 0.6rem; 
  font-size: 0.95rem; 
  gap: 0.3rem; 
  background-color: var(--success-light-color); 
  border-color: var(--success-color); 
  color: var(--success-color-alt); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: var(--radius-medium); 
  border: 1px solid; 
}

.savings-highlight i { 
  font-size: 1.1rem; 
}

body[data-theme="dark"] .savings-highlight.dynamic-savings { 
  background-color: hsla(var(--success-hue), 60%, 45%, 0.2); 
  color: hsl(var(--success-hue), 70%, 80%); 
  border-color: hsla(var(--success-hue), 60%, 45%, 0.5); 
}

.cumulative-savings { 
  margin-top: 1rem; 
  padding: 1rem; 
  background-color: var(--container-color); 
  border-radius: var(--radius-medium); 
  border: 1px solid var(--border-color); 
  text-align: center;
}

.cumulative-savings h4 { 
  font-size: 0.95rem; 
  margin-bottom: 0.4rem; 
  gap: 0.3rem; 
  justify-content: center; 
  display: flex; 
  align-items: center; 
}

.cumulative-savings p { 
  font-size: var(--small-font-size); 
  margin-bottom: 0.2rem; 
  color: var(--text-color-light); 
}

.cumulative-value { 
  font-size: 1.5rem; 
  margin-bottom: 0.5rem; 
  font-weight: var(--font-bold); 
  color: #018a13; 
}

.progress-bar { 
  height: 6px; 
  max-width: 200px; 
  margin: 0.3rem auto; 
  background-color: var(--border-color); 
  border-radius: var(--radius-pill); 
  overflow: hidden;
}

.progress-bar-fill { 
  height: 100%; 
  background-color: #018a13; 
  width: 0%; 
  border-radius: var(--radius-pill); 
  transition: width 0.5s ease-out; 
}

.cumulative-savings small { 
  font-size: var(--tiny-font-size); 
  color: var(--text-color-light); 
  display: block; 
  margin-top: 0.2rem; 
}

.security-link { 
  display: none; 
}

/* Collaboration Grid */
.collaboration-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1rem; 
}

.report-actions-column h4, 
.gamification-column h4 { 
  font-size: 1rem; 
  margin-bottom: 0.6rem; 
}

.report-buttons-group { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.5rem; 
  margin-bottom: 0.6rem; 
  justify-content: center; 
}

.report-buttons-group .button { 
  flex-grow: 1; 
  font-size: var(--smaller-font-size); 
  padding: 0.6rem 0.8rem; 
}

.other-issue-report { 
  margin-top: 0.6rem; 
  display: flex; 
  flex-direction: column; 
  gap: 0.4rem; 
  padding-top: 0.6rem; 
  border-top: 1px dashed var(--border-color); 
}

.other-issue-report label { 
  font-size: var(--tiny-font-size); 
  color: var(--text-color-light); 
}

.other-issue-report textarea { 
  min-height: 50px; 
  font-size: var(--small-font-size); 
  padding: 0.4rem 0.6rem; 
}

.gamification-column { 
  padding: 1rem; 
  background-color: var(--container-color); 
  border-radius: var(--radius-medium); 
  border: 1px solid var(--border-color); 
}

.user-stats { 
  margin-bottom: 0.8rem; 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 0.5rem; 
  text-align: center; 
}

.stat-value { 
  font-size: 1.4rem; 
  font-weight: var(--font-bold); 
  display: block; 
  line-height: 1.1; 
}

.badge-icon { 
  font-size: 1.6rem; 
  color: var(--warning-color); 
  display: block; 
  margin: 0.1rem auto; 
}

.stat-label { 
  font-size: var(--tiny-font-size); 
  margin-top: 0; 
  color: var(--text-color-light); 
  display: block; 
  line-height: 1.2; 
}

.next-badge-progress { 
  font-size: var(--tiny-font-size); 
  margin-bottom: 0.8rem; 
  color: var(--text-color-light); 
  text-align: center; 
}

.recent-activity-feed { 
  padding-top: 0.6rem; 
  border-top: 1px solid var(--border-color); 
  margin-top: 0.8rem;
}

.recent-activity-feed h5 { 
  font-size: 0.9rem; 
  margin-bottom: 0.4rem; 
}

#user-activity-list { 
  max-height: 80px; 
  font-size: var(--tiny-font-size); 
  overflow-y: auto; 
  padding-right: 3px;
}

#user-activity-list li { 
  margin-bottom: 0.3rem; 
  gap: 0.3rem; 
  padding: 0.15rem 0; 
  display: flex; 
  align-items: center; 
  border-bottom: 1px dotted var(--border-color);
}

#user-activity-list li:last-child { 
  border-bottom: none; 
}

#user-activity-list li i { 
  font-size: 0.9rem; 
  min-width: 12px; 
  color: #004800; 
  flex-shrink: 0;
}

#user-activity-list li span { 
  flex-grow: 1; 
}

#user-activity-list li time { 
  font-size: 0.9em; 
  color: var(--text-color-light); 
  margin-left: auto; 
  white-space: nowrap; 
  padding-left: 0.3rem; 
}

.recent-activity-feed .button--link { 
  margin: 0.5rem auto 0; 
  display: block; 
  text-align: center;
}

/* Modal Vantagem */
.modal-vantagem__visual { 
  margin: 0.8rem 0; 
  text-align: center; 
}

.modal-vantagem__visual img { 
  max-width: 80%; 
  max-height: 150px; 
  border-radius: var(--radius-small); 
}

.comparison, 
.economy-comparison, 
.safety-points { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 0.8rem; 
}

.comparison__item, 
.economy-card, 
.safety-point { 
  padding: 0.8rem; 
  background-color: var(--container-color); 
  border-radius: var(--radius-medium); 
  border: 1px solid var(--border-color); 
}

.comparison__item h4, 
.economy-card h4, 
.safety-point h4 { 
  font-size: 0.95rem; 
  margin-bottom: 0.6rem; 
  gap: 0.3rem; 
  display: flex; 
  align-items: center; 
  font-weight: var(--font-semi-bold);
}

.comparison__icon, 
.economy-icon, 
.safety-icon { 
  font-size: 1.6rem; 
  margin-bottom: 0.6rem; 
  display: block; 
  text-align: center; 
}

.comparison__item ul, 
.safety-point ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.comparison__item li, 
.safety-point li { 
  font-size: var(--tiny-font-size); 
  margin-bottom: 0.3rem; 
  gap: 0.3rem; 
  display: flex; 
  align-items: flex-start; 
}

.comparison__item li i, 
.safety-point li i { 
  font-size: 0.8rem; 
  margin-top: 0.1rem; 
  min-width: 12px; 
  flex-shrink: 0; 
}

.comparison__item.before { 
  border-left: 3px solid var(--danger-color); 
  padding-left: calc(0.8rem - 3px); 
}

.comparison__item.after { 
  border-left: 3px solid var(--success-color); 
  padding-left: calc(0.8rem - 3px); 
}

.safety-point.risk { 
  border-left: 3px solid var(--danger-color); 
  padding-left: calc(0.8rem - 3px); 
}

.safety-point.safe { 
  border-left: 3px solid var(--success-color); 
  padding-left: calc(0.8rem - 3px); 
}

.comparison__item.before li i { 
  color: var(--danger-color); 
}

.comparison__item.after li i { 
  color: var(--success-color); 
}

.safety-point.risk li i { 
  color: var(--danger-color); 
}

.safety-point.safe li i { 
  color: var(--success-color); 
}

.economy-value { 
  font-size: 1rem; 
  font-weight: var(--font-medium); 
  display: block; 
  margin-bottom: 0.2rem; 
}

.economy-fee { 
  margin: 0.3rem 0; 
  font-size: var(--smaller-font-size); 
  color: var(--text-color-light); 
}

.economy-total-cost { 
  font-size: 0.9rem; 
  margin-top: 0.5rem; 
  padding-top: 0.5rem; 
  border-top: 1px dashed var(--border-color); 
  font-weight: var(--font-semi-bold); 
}

.savings-highlight:not(.dynamic-savings) { 
  margin: 0.8rem auto; 
  padding: 0.5rem 1rem; 
  font-size: 0.95rem; 
  background-color: var(--success-light-color); 
  border: 1px solid var(--success-color); 
  color: var(--success-color-alt); 
  border-radius: var(--radius-medium); 
  text-align: center; 
}

body[data-theme="dark"] .savings-highlight:not(.dynamic-savings) { 
  background-color: hsla(var(--success-hue), 60%, 45%, 0.2); 
  color: hsl(var(--success-hue), 70%, 80%); 
  border-color: hsla(var(--success-hue), 60%, 45%, 0.5); 
}

.convenience-features .feature-highlight { 
  display: flex; 
  align-items: flex-start; 
  gap: 0.6rem; 
  margin-bottom: 0.8rem; 
  padding: 0.6rem; 
  background-color: var(--container-color); 
  border-radius: var(--radius-medium); 
  border-left: 3px solid #004800; 
}

.convenience-features .feature-icon { 
  font-size: 1.4rem; 
  min-width: 22px; 
  color: #004800; 
  margin-top: 0.1rem;
}

.convenience-features .feature-highlight h4 { 
  font-size: 0.9rem; 
  margin-bottom: 0.1rem; 
  font-weight: var(--font-semi-bold); 
}

.convenience-features .feature-highlight p { 
  font-size: var(--tiny-font-size); 
  color: var(--text-color); 
  line-height: 1.4; 
  margin: 0; 
}

/*=============== SCROLL UP ===============*/
.scrollup { 
  position: fixed; 
  right: 1rem; 
  bottom: -30%; 
  background-color: var(--title-color); 
  display: inline-flex; 
  padding: 0.5rem; 
  border-radius: var(--radius-medium); 
  z-index: var(--z-tooltip); 
  opacity: 0; 
  visibility: hidden; 
  transition: var(--transition-smooth); 
  box-shadow: var(--shadow-medium); 
}

body[data-theme="dark"] .scrollup { 
  background-color: var(--container-color); 
}

.scrollup i { 
  font-size: 1.1rem; 
  color: var(--body-color); 
}

body[data-theme="dark"] .scrollup i { 
  color: #018a13; 
}

.scrollup:hover { 
  background-color: #018a13; 
  transform: translateY(-3px); 
}

body[data-theme="dark"] .scrollup:hover { 
  background-color: #018a13; 
}

.scrollup:hover i { 
  color: #fff; 
}

.show-scroll { 
  bottom: 3rem; 
  opacity: 0.9; 
  visibility: visible; 
}

.show-scroll:hover { 
  opacity: 1; 
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar { 
  width: .4rem; 
  background-color: var(--scroll-bar-color); 
  border-radius: .5rem; 
}

::-webkit-scrollbar-thumb { 
  background-color: #018a13; 
  border-radius: .5rem; 
  border: 1px solid var(--scroll-bar-color); 
}

::-webkit-scrollbar-thumb:hover { 
  background-color: #018a13; 
}

/*=============== ANIMATIONS ON SCROLL ===============*/
[data-animation] { 
  opacity: 0; 
  transition: opacity 0.7s ease-out, transform 0.7s ease-out; 
  will-change: opacity, transform; 
}

[data-animation="fade-in"] { 
  transform: translateY(15px); 
}

[data-animation="fade-in-up"] { 
  transform: translateY(30px); 
}

[data-animation="fade-in-down"] { 
  transform: translateY(-30px); 
}

[data-animation="fade-in-left"] { 
  transform: translateX(30px); 
}

[data-animation="fade-in-right"] { 
  transform: translateX(-30px); 
}

[data-animation="zoom-in"] { 
  transform: scale(0.95); 
}

[data-animation="zoom-out"] { 
  transform: scale(1.05); 
}

[data-animation="slide-up"] { 
  transform: translateY(25px); 
}

[data-animation="slide-in-left"] { 
  transform: translateX(-25px); 
}

[data-animation="slide-in-right"] { 
  transform: translateX(25px); 
}

[data-animation="scale-up"] { 
  transform: scale(0.97) translateY(5px); 
}

[data-animation].is-visible { 
  opacity: 1; 
  transform: translate(0, 0) scale(1); 
}

/*=============== BREAKPOINTS ===============*/

/* Small devices (Tablets, 576px and up) */
@media screen and (min-width: 576px) {
  :root {
    --biggest-font-size: 2.8rem;
    --h1-font-size: 2.2rem;
    --h2-font-size: 1.6rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 0.95rem;
    --small-font-size: .85rem;
    --smaller-font-size: .78rem;
    --tiny-font-size: .7rem;
  }
  
  .container { 
    padding-left: 1.2rem; 
    padding-right: 1.2rem; 
  }
  
  .section { 
    padding: 5rem 0 2.5rem; 
  }
  
  .grid { 
    gap: 1.5rem; 
  }

  .testimonials__container { 
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 1.2rem; 
    max-width: none; 
  }
  
  .testimonial__card { 
    padding: 1.8rem 1.2rem; 
  }
  
  .testimonial__card:before { 
    font-size: 6rem; 
    top: -15px; 
    left: -8px; 
  }
  
  .testimonial__img { 
    width: 70px; 
    height: 70px; 
    margin-bottom: var(--mb-1); 
    border-width: 3px; 
  }
  
  .testimonial__quote { 
    font-size: var(--normal-font-size); 
    line-height: 1.6; 
    margin-bottom: var(--mb-0-75); 
  }
  
  .testimonial__name { 
    font-size: 1.05rem; 
    margin-bottom: var(--mb-0-25); 
  }
  
  .testimonial__role { 
    font-size: var(--small-font-size); 
  }

  .contact__info { 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  }
  
  .contact__card { 
    padding: 1.2rem 1rem; 
    gap: 0.4rem; 
  }
  
  .contact__card-icon { 
    font-size: 1.6rem; 
  }
  
  .contact__card-title { 
    font-size: 1rem; 
  }
  
  .contact__card-data { 
    font-size: var(--small-font-size); 
  }

  .vantagens__data { 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 1rem; 
  }
  
  .vantagem__item { 
    padding: 1rem; 
    gap: 0.8rem; 
  }
  
  .vantagem__icon { 
    font-size: 1.6rem; 
    min-width: 30px; 
  }
  
  .vantagem__title { 
    font-size: 1rem; 
  }
  
  .vantagem__description { 
    font-size: var(--small-font-size); 
    line-height: 1.5; 
  }

  .footer__container { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 2rem 1.5rem; 
  }

  .modal__container { 
    max-width: 600px; 
    border-radius: var(--radius-large); 
  }
  
  .modal__header { 
    padding: 1rem 1.5rem; 
  }
  
  .modal__title { 
    font-size: 1.2rem; 
    gap: 0.5rem; 
  }
  
  .modal__title i { 
    font-size: 1.3rem; 
  }
  
  .modal__close { 
    font-size: 1.6rem; 
  }
  
  .modal__content { 
    padding: 1.2rem 1.5rem; 
  }
  
  .modal__content p { 
    font-size: var(--normal-font-size); 
  }
  
  .modal__content ul:not(.map-legend, #status-history-list, #user-activity-list) li { 
    font-size: var(--small-font-size); 
  }
  
  .modal__content ul:not(.map-legend, #status-history-list, #user-activity-list) li i { 
    font-size: 0.9rem; 
  }
  
  .modal__footer { 
    padding: 0.8rem 1.5rem; 
    gap: 0.6rem; 
  }
  
  .modal__footer .button { 
    font-size: var(--small-font-size); 
    padding: 0.6rem 1.2rem; 
  }

  .hide-on-mobile { 
    display: block; 
  }
  
  .show-on-mobile { 
    display: none; 
  }
}

/* Medium devices (Tablets, 768px and up) */
@media screen and (min-width: 768px) {
  :root {
    --biggest-font-size: 3.2rem; 
    --h1-font-size: 2.6rem; 
    --h2-font-size: 2.0rem;
    --h3-font-size: 1.4rem; 
    --normal-font-size: 1rem; 
    --small-font-size: .9rem;
    --smaller-font-size: .8rem; 
    --tiny-font-size: .72rem;
    --header-height: 3.8rem;
  }
  
  .section { 
    padding: 6rem 0 3rem; 
  }
  
  .button { 
    padding: 0.8rem 1.7rem; 
    font-size: var(--normal-font-size); 
    gap: 0.5rem; 
  }
  
  .button i, .button .button__icon { 
    font-size: 1.1rem; 
  }
  
  .button--icon { 
    width: 36px; 
    height: 36px; 
    font-size: 1.1rem;
  }
  
  input, textarea, select { 
    padding: 0.8rem 1rem; 
  }

  .header { 
    padding: 0.6rem 0; 
  }
  
  .header.scrolled { 
    padding: 0.4rem 0; 
  }
  
  .nav__logo-img { 
    width: 34px; 
    height: 34px; 
  }
  
  .nav__logo span { 
    font-size: 1rem; 
  }
  
  .nav__sidebar-toggle, 
  .nav__theme, 
  .nav__toggle { 
    font-size: 1.3rem; 
    width: 38px; 
    height: 38px;
  }

  .hero { 
    padding-top: calc(var(--header-height) + 3rem); 
    padding-bottom: 4rem; 
  }
  
  .hero__container { 
    grid-template-columns: 1.1fr 0.9fr; 
    gap: 3rem; 
    text-align: left; 
  }
  
  .hero__data { 
    text-align: left; 
    order: 1; 
  }
  
  .hero__title { 
    font-size: var(--biggest-font-size); 
    margin-bottom: var(--mb-1); 
  }
  
  .hero__description { 
    margin-left: 0; 
    font-size: 1.05rem; 
    line-height: 1.6; 
    max-width: 550px; 
    margin-bottom: var(--mb-2); 
  }
  
  .hero__buttons { 
    justify-content: flex-start; 
    gap: 0.8rem;
  }
  
  .hero__image { 
    order: 2; 
    margin-top: 0;
  }
  
  .hero__img { 
    max-width: 350px; 
    width: 100%; 
  }
  
  .hero__social { 
    position: absolute; 
    left: 1rem; 
    bottom: 3rem; 
    flex-direction: column; 
    gap: 0.8rem; 
    margin-top: 0; 
  }
  
  .hero__social-link { 
    font-size: 1.4rem; 
  }

  .features__container { 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 1.5rem; 
    margin-top: var(--mb-2-5); 
  }
  
  .feature__card { 
    padding: 1.8rem 1.5rem; 
    text-align: left; 
  }
  
  .feature__header { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 1rem; 
    margin-bottom: var(--mb-0-75); 
  }
  
  .feature__icon { 
    font-size: 2rem; 
    min-width: 40px; 
    margin-bottom: 0; 
  }
  
  .feature__title { 
    font-size: var(--h3-font-size); 
    flex-grow: 1; 
    text-align: left; 
  }
  
  .feature__description { 
    font-size: var(--small-font-size); 
    line-height: 1.6; 
    margin-bottom: auto; 
    padding-bottom: var(--mb-0-75); 
    display: block; 
    -webkit-line-clamp: unset; 
  }
  
  .feature__more { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.4rem; 
    font-size: var(--small-font-size); 
    color: #018a13; 
    margin-top: var(--mb-0-75); 
    font-weight: var(--font-medium); 
    transition: color 0.3s ease, gap 0.3s ease; 
    align-self: flex-start; 
  }
  
  .feature__more i { 
    transition: transform 0.3s ease; 
    font-size: 1rem; 
  }
  
  .feature__card:hover .feature__more { 
    color: #017a10; 
    gap: 0.6rem; 
  }
  
  .feature__card:hover .feature__more i { 
    transform: translateX(3px); 
  }

  .tech-future__container { 
    grid-template-columns: 0.8fr 1.2fr; 
    gap: 2.5rem; 
  }
  
  .tech-future__visual { 
    order: 1; 
  }
  
  .tech-future__img { 
    max-width: 450px; 
  }
  
  .tech-future__content { 
    order: 2; 
  }
  
  .tech-future__description { 
    font-size: var(--normal-font-size); 
    line-height: 1.6; 
    margin-bottom: var(--mb-1-5); 
  }
  
  .tech-accordion__header { 
    padding: 1rem 1.2rem; 
    gap: 0.8rem; 
  }
  
  .tech-accordion__icon-main { 
    font-size: 1.5rem; 
    min-width: 25px; 
  }
  
  .tech-accordion__icon-toggle { 
    font-size: 1.3rem; 
  }
  
  .tech-accordion__content { 
    padding: 0 1.2rem; 
  }
  
  .tech-accordion__content p { 
    padding-bottom: 1rem; 
    font-size: var(--small-font-size); 
    line-height: 1.6; 
  }
  
  .tech-accordion__item.open .tech-accordion__content { 
    max-height: 250px; 
  }
  
  .tech-future__outlook { 
    padding: 1.2rem; 
    gap: 0.8rem; 
  }
  
  .tech-future__outlook i { 
    font-size: 1.8rem; 
    min-width: 30px; 
  }
  
  .tech-future__outlook h4 { 
    font-size: 1rem; 
  }
  
  .tech-future__outlook p { 
    font-size: var(--small-font-size); 
    line-height: 1.5; 
  }

  .vantagens__container { 
    grid-template-columns: 1fr 1fr; 
    gap: 2.5rem; 
  }
  
  .vantagens__image-area { 
    order: 1; 
    margin-bottom: 0; 
  }
  
  .vantagens__data { 
    order: 2; 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
  }
  
  .vantagem__item { 
    padding: 1.2rem; 
    gap: 1rem; 
    cursor: pointer; 
  }
  
  .vantagem__item:hover { 
    transform: scale(1.02); 
    box-shadow: var(--shadow-medium); 
    border-left-width: 4px; 
    padding-left: calc(1.2rem - 4px); 
  }
  
  .vantagem__icon { 
    font-size: 1.8rem; 
    min-width: 32px; 
    margin-top: 0.2rem; 
  }
  
  .vantagem__title { 
    font-size: 1.1rem; 
    margin-bottom: var(--mb-0-25); 
  }
  
  .vantagem__description { 
    font-size: var(--small-font-size); 
    line-height: 1.6; 
  }

  .dl-showcase-slider .slick-slide { 
    padding: 0 12px; 
    opacity: 0.5; 
    transform: scale(0.9); 
  }
  
  .dl-showcase-slider .slick-center { 
    opacity: 1; 
    transform: scale(1.05); 
  }
  
  .slider-title { 
    opacity: 0; 
  }
  
  .slick-center .slider-title { 
    opacity: 1; 
    margin-bottom: var(--mb-1); 
  }
  
  .dl-screenshot { 
    max-height: 550px; 
    border-width: 4px; 
  }
  
  .dl-showcase-slider .slick-prev, 
  .dl-showcase-slider .slick-next { 
    display: block !important; 
    width: 40px; 
    height: 40px; 
    z-index: 5; 
    background: var(--glass-bg); 
    backdrop-filter: saturate(180%) blur(5px); 
    -webkit-backdrop-filter: saturate(180%) blur(5px); 
    border-radius: var(--radius-circle); 
    border: 1px solid var(--glass-border); 
    transition: all var(--transition-smooth); 
    box-shadow: var(--shadow-soft); 
    top: 50%; 
    transform: translateY(-50%); 
  }
  
  .dl-showcase-slider .slick-prev:hover, 
  .dl-showcase-slider .slick-next:hover { 
    background: rgba(1, 138, 19, 0.85); 
    border-color: transparent; 
    transform: translateY(-50%) scale(1.1); 
  }
  
  .dl-showcase-slider .slick-prev:before, 
  .dl-showcase-slider .slick-next:before { 
    font-family: 'remixicon'; 
    font-size: 22px; 
    color: #018a13; 
    opacity: 1; 
    line-height: 1; 
  }
  
  .dl-showcase-slider .slick-prev:hover:before, 
  .dl-showcase-slider .slick-next:hover:before { 
    color: #fff; 
  }
  
  .dl-showcase-slider .slick-prev { 
    left: -15px; 
  }
  
  .dl-showcase-slider .slick-next { 
    right: -15px; 
  }
  
  .dl-showcase-slider .slick-prev:before { 
    content: '\EA68'; 
  }
  
  .dl-showcase-slider .slick-next:before { 
    content: '\EA6E'; 
  }
  
  .dl-showcase-slider .slick-dots { 
    bottom: -35px; 
  }
  
  .dl-showcase-slider .slick-dots li button:before { 
    font-size: 11px; 
  }

  .testimonial__card { 
    padding: 2rem 1.5rem; 
  }
  
  .testimonial__card:before { 
    font-size: 7rem; 
    top: -20px; 
    left: -10px; 
  }
  
  .testimonial__img { 
    width: 80px; 
    height: 80px; 
    margin-bottom: var(--mb-1-5); 
    border-width: 4px; 
  }
  
  .testimonial__quote { 
    font-size: var(--normal-font-size); 
    line-height: 1.7; 
    margin-bottom: var(--mb-1); 
    padding: 0 0.5rem; 
  }
  
  .testimonial__name { 
    font-size: 1.1rem; 
    margin-bottom: var(--mb-0-25); 
  }
  
  .testimonial__role { 
    font-size: var(--small-font-size); 
  }

  .faq__container { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.5rem; 
    margin-top: var(--mb-2); 
  }
  
  .faq__header { 
    padding: 1.2rem; 
    gap: 0.8rem;
  }
  
  .faq__icon { 
    font-size: 1.3rem; 
  }
  
  .faq__title { 
    font-size: 1.05rem; 
  }
  
  .faq__content { 
    padding: 0 1.2rem; 
  }
  
  .faq__content p { 
    padding-bottom: 1.2rem; 
    line-height: 1.6; 
  }

  .download { 
    padding: 5rem 0; 
  }
  
  .download__container { 
    grid-template-columns: 1.2fr 0.8fr; 
    gap: 3rem; 
  }
  
  .download__data { 
    text-align: left; 
    order: 1; 
  }
  
  .download__data .section__subtitle { 
    font-size: var(--small-font-size); 
  }
  
  .download__data .section__title { 
    font-size: var(--h2-font-size); 
  }
  
  .download__description { 
    margin-left: 0; 
    max-width: 500px; 
    margin-bottom: var(--mb-2); 
    font-size: var(--normal-font-size);
  }
  
  .download__form { 
    flex-direction: row; 
    max-width: none; 
    gap: 0.8rem; 
  }
  
  .download__form .button { 
    width: auto; 
    flex-shrink: 0; 
  }
  
  .download__stores { 
    justify-content: flex-start; 
    gap: 0.8rem; 
    margin-top: var(--mb-1-5); 
  }
  
  .download__store-img { 
    height: 42px; 
  }
  
  .download__image { 
    order: 2; 
    margin-bottom: 0; 
  }
  
  .download__img { 
    max-width: 300px; 
    transform: rotate(5deg); 
  }

  .contact__container { 
    gap: 3rem; 
  }
  
  .contact__info { 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
  }
  
  .contact__card { 
    padding: 1.4rem 1.2rem; 
    gap: 0.5rem; 
  }
  
  .contact__card-icon { 
    font-size: 1.8rem; 
  }
  
  .contact__card-title { 
    font-size: 1.05rem; 
  }
  
  .contact__social-link { 
    font-size: 1.4rem; 
  }
  
  .contact__form { 
    gap: 1.2rem; 
  }
  
  .contact__form-area textarea { 
    min-height: 100px; 
  }

  .footer { 
    padding-top: 4rem; 
  }
  
  .footer__container { 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 2.5rem; 
    padding-bottom: var(--mb-3); 
  }
  
  .footer__content { 
    margin-bottom: 0; 
  }
  
  .footer__content:first-child { 
    grid-column: span 2; 
  }
  
  .footer__logo { 
    font-size: 1.2rem; 
  }
  
  .footer__logo-img { 
    width: 36px; 
    height: 36px; 
  }
  
  .footer__title { 
    font-size: 1.1rem; 
    margin-bottom: var(--mb-1); 
  }
  
  .footer__links { 
    gap: 0.5rem; 
  }
  
  .footer__link { 
    font-size: var(--small-font-size); 
  }
  
  .footer__bottom { 
    padding: 1.2rem 0; 
    margin-top: var(--mb-1-5); 
  }
  
  .footer__copy { 
    font-size: var(--smaller-font-size); 
  }

  .sidebar { 
    width: 280px; 
    max-width: 85%; 
    padding: var(--mb-1-5) var(--mb-1); 
    padding-top: calc(var(--header-height) + var(--mb-0-75));
  }
  
  .sidebar__close { 
    font-size: 1.5rem; 
    right: var(--mb-0-75); 
  }
  
  .sidebar__title { 
    font-size: var(--h3-font-size); 
    gap: 0.5rem; 
    padding-bottom: var(--mb-0-75); 
  }
  
  .sidebar__title i { 
    font-size: 1.3rem; 
  }
  
  .sidebar__transactions::-webkit-scrollbar { 
    width: 5px; 
  }
  
  .sidebar__transaction { 
    gap: 0.8rem; 
    padding: var(--mb-0-75) 0.3rem; 
  }
  
  .sidebar__transaction-avatar { 
    width: 34px; 
    height: 34px; 
  }
  
  .sidebar__transaction-name { 
    font-size: var(--small-font-size); 
  }
  
  .sidebar__transaction-details { 
    font-size: var(--tiny-font-size); 
  }
  
  .sidebar__transaction-amount { 
    font-size: var(--small-font-size); 
    padding-left: 0.5rem; 
  }
  
  .sidebar__footer { 
    font-size: var(--tiny-font-size); 
    padding-top: var(--mb-0-75); 
  }

  .modal__container { 
    max-width: 700px; 
  }
  
  .modal__container.modal--large { 
    max-width: 950px; 
  }
  
  .modal__header { 
    padding: 1.2rem 1.8rem; 
  }
  
  .modal__title { 
    font-size: 1.3rem; 
    gap: 0.7rem; 
  }
  
  .modal__title i { 
    font-size: 1.5rem; 
  }
  
  .modal__close { 
    font-size: 1.8rem; 
  }
  
  .modal__content { 
    padding: 1.5rem 1.8rem; 
  }
  
  .modal__content h4 { 
    font-size: 1.1rem; 
    margin-top: 1.2rem; 
    margin-bottom: 0.8rem; 
  }
  
  .modal__content p { 
    font-size: var(--normal-font-size); 
    line-height: 1.6; 
    margin-bottom: 1rem; 
  }
  
  .modal__content ul:not(.map-legend, #status-history-list, #user-activity-list) li { 
    font-size: var(--small-font-size); 
    gap: 0.5rem; 
    margin-bottom: 0.5rem;
  }
  
  .modal__content ul:not(.map-legend, #status-history-list, #user-activity-list) li i { 
    font-size: 1rem; 
    min-width: 16px; 
  }
  
  .modal__footer { 
    padding: 1rem 1.8rem; 
    gap: 0.8rem; 
  }
  
  .modal__footer .button { 
    font-size: var(--small-font-size); 
    padding: 0.8rem 1.5rem; 
  }

  .map-dynamic-layout { 
    grid-template-columns: 1.5fr 1fr; 
    gap: 1.5rem; 
  }
  
  .atm-details-dynamic { 
    order: 1; 
    padding: 1.2rem 1.5rem; 
  }
  
  .map-container { 
    order: 2; 
    height: 350px; 
  }
  
  .map-pin.simulated-pin { 
    width: 28px; 
    height: 28px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }
  
  .map-pin.simulated-pin::before { 
    font-size: 0.9rem; 
  }
  
  .map-pin.pin-user { 
    width: 20px; 
    height: 20px; 
    border: 2px solid white; 
    box-shadow: 0 0 0 2px #018a13; 
    animation-name: pulse-marker-desktop; 
    transform: translate(-50%, -50%);
  }
  
  @keyframes pulse-marker-desktop { 
    0%, 100% { 
      box-shadow: 0 0 0 2px #018a13, 0 0 0 7px rgba(1, 138, 19, 0.3); 
      transform: translate(-50%, -50%) scale(1); 
    } 
    50% { 
      box-shadow: 0 0 0 3px #018a13, 0 0 0 10px rgba(1, 138, 19, 0.1); 
      transform: translate(-50%, -50%) scale(1.1); 
    } 
  }
  
  .atm-detail-header h4 { 
    font-size: 1.15rem; 
  }
  
  .atm-detail-actions button { 
    font-size: 1.3rem; 
  }
  
  .atm-info-list li { 
    font-size: var(--small-font-size); 
    gap: 0.5rem; 
  }
  
  .atm-info-list li i { 
    font-size: 1rem; 
  }
  
  .atm-info-list li small { 
    display: inline; 
    font-size: var(--tiny-font-size); 
    margin-left: 0.4rem; 
    color: var(--text-color-light); 
  }
  
  .atm-services-list span { 
    font-size: var(--tiny-font-size); 
    padding: 0.2rem 0.5rem; 
  }
  
  .permission-note { 
    font-size: var(--smaller-font-size); 
  }

  .status-refresh-area { 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center; 
    gap: 1rem; 
    margin-bottom: 1.2rem; 
    padding-bottom: 0.8rem; 
  }
  
  .timestamp { 
    font-size: var(--small-font-size); 
  }
  
  .status-sources-grid { 
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap: 1rem; 
    margin-bottom: 1.2rem; 
  }
  
  .info-block.status-source { 
    padding: 1rem 1.2rem; 
  }
  
  .status-source-icon { 
    font-size: 2.2rem; 
    margin-bottom: 0.4rem; 
  }
  
  .status-source h5 { 
    font-size: 1rem; 
    margin-bottom: 0.2rem; 
  }
  
  .status-source-detail { 
    font-size: var(--small-font-size); 
    margin-bottom: 0.6rem; 
    min-height: 1.5em; 
  }
  
  .confidence-bar { 
    height: 5px; 
  }
  
  .status-summary { 
    margin-top: 1.2rem; 
    padding-top: 1.2rem; 
  }
  
  .consolidated-status { 
    padding: 1.2rem; 
  }
  
  .status-badge { 
    padding: 0.3rem 1rem; 
    font-size: 1rem; 
    margin-bottom: 0.6rem; 
  }
  
  .consolidated-status p { 
    font-size: var(--small-font-size); 
    margin-bottom: 0.8rem; 
  }
  
  .overall-confidence { 
    font-size: var(--small-font-size); 
  }
  
  .confidence-bar.overall { 
    max-width: 200px; 
    height: 6px; 
  }
  
  .recent-history { 
    margin-top: 1.2rem; 
    padding-top: 1.2rem; 
  }
  
  .recent-history h4 { 
    font-size: 1rem; 
    margin-bottom: 0.8rem; 
  }
  
  #status-history-list { 
    max-height: 120px; 
    font-size: var(--small-font-size); 
  }

  .route-planning-grid { 
    grid-template-columns: 0.7fr 1fr; 
    gap: 1.5rem; 
  }
  
  .route-options-details h4 { 
    font-size: 1.05rem; 
    margin-bottom: 0.8rem; 
  }
  
  .route-options { 
    gap: 0.6rem; 
    margin-bottom: 1rem; 
    justify-content: flex-start; 
  }
  
  .selectable-card { 
    padding: 0.6rem 0.8rem; 
    border-width: 1px; 
    min-width: 80px; 
    gap: 0.3rem; 
  }
  
  .selectable-card i { 
    font-size: 1.5rem; 
    margin-bottom: 0.2rem; 
  }
  
  .selectable-card span { 
    font-size: var(--smaller-font-size); 
  }
  
  .selectable-card small { 
    display: block; 
    font-size: var(--tiny-font-size); 
    color: var(--text-color-light); 
    margin-top: 1px;
  }
  
  .route-summary { 
    margin-top: 1rem; 
    padding: 1rem; 
  }
  
  .route-summary h4 { 
    font-size: 1rem; 
    margin-bottom: 0.8rem; 
    gap: 0.4rem; 
  }
  
  .route-summary li { 
    margin-bottom: 0.4rem; 
    font-size: var(--small-font-size); 
    gap: 0.5rem; 
  }
  
  .route-summary li i { 
    font-size: 1rem; 
    min-width: 16px; 
  }
  
  .safety-indicator { 
    width: 8px; 
    height: 8px; 
    margin-left: 0.3rem; 
  }
  
  .route-map-preview h4 { 
    font-size: 1rem; 
    margin-bottom: 0.8rem; 
  }
  
  .map-route-placeholder { 
    height: 220px; 
  }
  
  .share-section { 
    margin-top: 1.5rem; 
    padding-top: 1rem; 
  }
  
  .share-section h4 { 
    font-size: 1rem; 
    margin-bottom: 0.8rem; 
  }

  .filters-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem 1.5rem; 
  }
  
  .filter-group h5 { 
    font-size: 0.95rem; 
    margin-bottom: 0.6rem; 
    gap: 0.4rem; 
  }
  
  .filter-options { 
    gap: 0.5rem; 
  }
  
  .checkbox-group label { 
    gap: 0.4rem; 
    padding: 0.4rem 0.8rem; 
    font-size: var(--small-font-size); 
  }
  
  .checkbox-group label::before { 
    width: 14px; 
    height: 14px; 
    margin-right: 0.4rem; 
  }
  
  .checkbox-group input[type="checkbox"]:checked + span::before,
  .checkbox-group input[type="checkbox"]:checked + ::before { 
    background-size: 10px; 
  }
  
  .checkbox-group label i { 
    font-size: 0.9rem; 
  }
  
  .range-slider input[type="range"] { 
    height: 5px; 
  }
  
  .range-slider input[type="range"]::-webkit-slider-thumb { 
    width: 16px; 
    height: 16px; 
    border-width: 2px; 
  }
  
  .range-slider input[type="range"]::-moz-range-thumb { 
    width: 14px; 
    height: 14px; 
    border-width: 2px; 
  }
  
  #radius-value { 
    font-size: var(--small-font-size); 
  }
  
  .filter-actions { 
    margin-top: 1.5rem; 
    padding-top: 1rem; 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center; 
    gap: 1rem; 
  }
  
  .filter-results-count { 
    font-size: var(--small-font-size); 
    gap: 0.3rem; 
  }
  
  .filter-results-count i { 
    font-size: 1rem; 
  }
  
  .filter-buttons-group { 
    width: auto; 
    justify-content: flex-end;
  }

  .economy-simulator { 
    margin-bottom: 1.5rem; 
  }
  
  .simulator-controls { 
    gap: 0.6rem 1rem; 
    padding: 1rem; 
    margin-bottom: 1rem; 
  }
  
  .simulator-controls label { 
    font-size: var(--small-font-size); 
  }
  
  .simulator-controls input[type="number"] { 
    padding: 0.5rem 0.8rem; 
    font-size: var(--small-font-size); 
  }
  
  .slider-with-value input[type="range"] { 
    height: 6px; 
  }
  
  .slider-with-value input[type="range"]::-webkit-slider-thumb { 
    width: 18px; 
    height: 18px; 
    border-width: 2px; 
  }
  
  .slider-with-value input[type="range"]::-moz-range-thumb { 
    width: 16px; 
    height: 16px; 
    border-width: 2px; 
  }
  
  #informal-fee-value { 
    font-size: var(--small-font-size); 
  }
  
  .economy-comparison-dynamic { 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 0.8rem; 
    margin-bottom: 1rem; 
  }
  
  .dynamic-card { 
    padding: 1rem; 
  }
  
  .dynamic-card .large-icon { 
    font-size: 2.5rem; 
    margin-bottom: 0.3rem; 
  }
  
  .dynamic-card h4 { 
    font-size: 0.9rem; 
    margin-bottom: 0.5rem; 
  }
  
  .dynamic-card .comparison-value { 
    font-size: 1.4rem; 
    margin-bottom: 0.2rem; 
  }
  
  .dynamic-card small { 
    font-size: var(--tiny-font-size); 
  }
  
  .savings-highlight.dynamic-savings { 
    margin-top: 1rem; 
    padding: 0.8rem; 
    font-size: 1.05rem; 
    gap: 0.4rem; 
  }
  
  .savings-highlight i { 
    font-size: 1.2rem; 
  }
  
  .cumulative-savings { 
    margin-top: 1.5rem; 
    padding: 1.2rem; 
  }
  
  .cumulative-savings h4 { 
    font-size: 1rem; 
    margin-bottom: 0.6rem; 
    gap: 0.4rem; 
  }
  
  .cumulative-savings p { 
    font-size: var(--small-font-size); 
    margin-bottom: 0.3rem; 
  }
  
  .cumulative-value { 
    font-size: 1.7rem; 
    margin-bottom: 0.8rem; 
  }
  
  .progress-bar { 
    height: 8px; 
    max-width: 250px; 
    margin: 0.4rem auto; 
  }

  .security-link { 
    display: inline-block; 
    margin-top: 1rem; 
    font-size: var(--smaller-font-size); 
    padding: 0.6rem 1rem; 
    background-color: var(--container-color); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-medium); 
    color: var(--text-color); 
    text-decoration: none; 
    transition: all 0.3s ease; 
  }
  
  .security-link:hover { 
    background-color: #e6f7e8; 
    border-color: #018a13; 
    color: #017a10; 
  }
  
  body[data-theme="dark"] .security-link { 
    background-color: var(--container-color); 
    border-color: var(--border-color); 
    color: var(--text-color-light); 
  }
  
  body[data-theme="dark"] .security-link:hover { 
    background-color: rgba(1, 138, 19, 0.1); 
    border-color: #018a13; 
    color: #018a13; 
  }

  .collaboration-grid { 
    grid-template-columns: 1fr 1fr; 
    gap: 1.5rem; 
  }
  
  .report-actions-column h4, 
  .gamification-column h4 { 
    font-size: 1.1rem; 
    margin-bottom: 0.8rem; 
  }
  
  .report-buttons-group { 
    gap: 0.6rem; 
    margin-bottom: 0.8rem; 
  }
  
  .report-buttons-group .button { 
    font-size: var(--small-font-size); 
    padding: 0.7rem 1rem; 
  }
  
  .other-issue-report { 
    margin-top: 0.8rem; 
    gap: 0.5rem; 
    padding-top: 0.8rem; 
  }
  
  .other-issue-report label { 
    font-size: var(--small-font-size); 
  }
  
  .other-issue-report textarea { 
    min-height: 60px; 
    font-size: var(--small-font-size); 
    padding: 0.5rem 0.7rem; 
  }
  
  .gamification-column { 
    padding: 1.2rem; 
  }
  
  .user-stats { 
    margin-bottom: 1rem; 
  }
  
  .stat-value { 
    font-size: 1.7rem; 
  }
  
  .badge-icon { 
    font-size: 1.9rem; 
  }
  
  .stat-label { 
    font-size: var(--small-font-size); 
    margin-top: 0.1rem; 
  }
  
  .next-badge-progress { 
    font-size: var(--smaller-font-size); 
    margin-bottom: 1rem; 
  }
  
  .recent-activity-feed { 
    padding-top: 0.8rem; 
    margin-top: 1rem;
  }
  
  .recent-activity-feed h5 { 
    font-size: 0.95rem; 
    margin-bottom: 0.6rem; 
  }
  
  #user-activity-list { 
    max-height: 100px; 
    font-size: var(--small-font-size); 
  }
  
  #user-activity-list li { 
    margin-bottom: 0.4rem; 
    gap: 0.5rem; 
    padding: 0.2rem 0; 
  }
  
  #user-activity-list li i { 
    font-size: 1rem; 
    min-width: 14px; 
  }
  
  .recent-activity-feed .button--link { 
    margin: 0.6rem auto 0; 
  }

  .modal-vantagem__visual { 
    margin: 1.2rem 0; 
  }
  
  .modal-vantagem__visual img { 
    max-height: 180px; 
  }
  
  .comparison, 
  .economy-comparison, 
  .safety-points { 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 1rem; 
  }
  
  .comparison__item, 
  .economy-card, 
  .safety-point { 
    padding: 1rem; 
  }
  
  .comparison__item h4, 
  .economy-card h4, 
  .safety-point h4 { 
    font-size: 1.05rem; 
    margin-bottom: 0.8rem; 
    gap: 0.4rem; 
  }
  
  .comparison__icon, 
  .economy-icon, 
  .safety-icon { 
    font-size: 1.9rem; 
    margin-bottom: 0.8rem; 
  }
  
  .comparison__item li, 
  .safety-point li { 
    font-size: var(--small-font-size); 
    margin-bottom: 0.4rem; 
    gap: 0.4rem; 
  }
  
  .comparison__item li i, 
  .safety-point li i { 
    font-size: 0.9rem; 
    margin-top: 0.1rem; 
  }
  
  .comparison__item.before, 
  .comparison__item.after, 
  .safety-point.risk, 
  .safety-point.safe { 
    border-left-width: 3px; 
    padding-left: calc(1rem - 3px); 
  }
  
  .economy-value { 
    font-size: 1.1rem; 
  }
  
  .economy-fee { 
    margin: 0.4rem 0; 
    font-size: var(--smaller-font-size); 
  }
  
  .economy-total-cost { 
    font-size: 1rem; 
    margin-top: 0.6rem; 
    padding-top: 0.6rem; 
  }
  
  .savings-highlight:not(.dynamic-savings) { 
    margin: 1rem auto; 
    padding: 0.6rem 1.2rem; 
    font-size: 1rem; 
  }
  
  .convenience-features .feature-highlight { 
    gap: 0.8rem; 
    margin-bottom: 1rem; 
    padding: 0.8rem; 
    border-left-width: 3px; 
  }
  
  .convenience-features .feature-icon { 
    font-size: 1.6rem; 
    min-width: 25px; 
  }
  
  .convenience-features .feature-highlight h4 { 
    font-size: 1rem; 
    margin-bottom: 0.2rem; 
  }
  
  .convenience-features .feature-highlight p { 
    font-size: var(--small-font-size); 
    line-height: 1.5;
  }
}

/* Large devices (Desktops, 992px and up) */
@media screen and (min-width: 992px) {
  :root {
    --biggest-font-size: 3.5rem; 
    --h1-font-size: 2.8rem; 
    --h2-font-size: 2.1rem;
    --h3-font-size: 1.45rem; 
    --normal-font-size: 1.05rem; 
    --small-font-size: .92rem;
    --smaller-font-size: .82rem; 
    --tiny-font-size: .75rem;
    --header-height: 4rem;
  }
  
  .container { 
    padding-left: 1.5rem; 
    padding-right: 1.5rem; 
  }
  
  .section { 
    padding: 7rem 0 4rem; 
  }

  .header { 
    padding: 0.8rem 0; 
  }
  
  .header.scrolled { 
    padding: 0.5rem 0; 
    background: hsla(var(--neutral-hue), 30%, 96%, 0.8); 
  }
  
  body[data-theme="dark"] .header.scrolled { 
    background: hsla(var(--neutral-hue), 20%, 8%, 0.85); 
  }
  
  .nav__menu { 
    position: static; 
    background-color: transparent; 
    backdrop-filter: none; 
    box-shadow: none; 
    padding: 0; 
    width: auto; 
    height: auto; 
    right: auto; 
    top: auto; 
    transition: none; 
    display: block; 
    border-left: none; 
  }
  
  .nav__list { 
    flex-direction: row; 
    gap: 2.5rem; 
    margin-bottom: 0; 
  }
  
  .nav__link { 
    font-size: var(--normal-font-size); 
    padding: 0; 
  }
  
  .nav__link:hover { 
    transform: none; 
    color: #018a13; 
  }
  
  .nav__close, 
  .nav__toggle { 
    display: none; 
  }
  
  .nav__button span { 
    display: inline; 
    margin-left: 0.3rem;
  }
  
  .nav__actions { 
    gap: 0.8rem; 
  }
  
  .nav__sidebar-toggle, 
  .nav__theme { 
    width: 40px; 
    height: 40px; 
    font-size: 1.4rem;
  }
  
  .nav__logo-img { 
    width: 38px; 
    height: 38px;
  }
  
  .nav__logo span { 
    font-size: 1.1rem; 
  }

  .sidebar { 
    transition: transform var(--transition-smooth), width var(--transition-smooth); 
    left: 0; 
    transform: translateX(-100%); 
  }
  
  .sidebar.open { 
    transform: translateX(0); 
  }
  
  .sidebar__overlay { 
    display: none; 
  }
  
  body.sidebar-open-scroll-locked { 
    overflow-y: auto; 
  }
  
  .nav__sidebar-toggle { 
    display: flex; 
  }

  .hero { 
    padding-top: calc(var(--header-height) + 4rem); 
    padding-bottom: 5rem; 
  }
  
  .hero__title { 
    font-size: var(--biggest-font-size); 
  }
  
  .hero__description { 
    max-width: 600px; 
    font-size: 1.1rem; 
    line-height: 1.7;
  }
  
  .hero__img { 
    max-width: 420px; 
  }
  
  .hero__social { 
    left: 1.5rem; 
    bottom: 4rem; 
  }

  .features__container { 
    gap: 2rem; 
    margin-top: var(--mb-3); 
  }
  
  .feature__card { 
    padding: 2rem 1.8rem; 
  }
  
  .feature__icon { 
    font-size: 2.2rem; 
    min-width: 45px; 
  }
  
  .feature__description { 
    -webkit-line-clamp: unset; 
  }

  .tech-future__container { 
    gap: 3.5rem; 
  }
  
  .tech-accordion { 
    gap: 0.8rem; 
  }

  .vantagens__container { 
    grid-template-columns: 0.9fr 1.1fr; 
    gap: 3rem; 
  }
  
  .vantagem__item { 
    padding: 1.3rem; 
    gap: 1.2rem; 
  }
  
  .vantagem__icon { 
    font-size: 2rem; 
    min-width: 35px; 
  }
  
  .vantagem__title { 
    font-size: 1.15rem; 
    margin-bottom: var(--mb-0-5); 
  }
  
  .vantagem__expand-indicator { 
    display: inline-flex; 
  }

  .dl-showcase-slider .slick-slide { 
    padding: 0 15px; 
  }
  
  .dl-screenshot { 
    max-height: 600px; 
    border-width: 5px; 
  }
  
  .dl-showcase-slider .slick-prev, 
  .dl-showcase-slider .slick-next { 
    width: 45px; 
    height: 45px;
  }
  
  .dl-showcase-slider .slick-prev:before, 
  .dl-showcase-slider .slick-next:before { 
    font-size: 26px; 
  }
  
  .dl-showcase-slider .slick-prev { 
    left: -20px; 
  }
  
  .dl-showcase-slider .slick-next { 
    right: -20px; 
  }
  
  .dl-showcase-slider .slick-dots { 
    bottom: -40px; 
  }
  
  .dl-showcase-slider .slick-dots li button:before { 
    font-size: 13px; 
  }

  .testimonials__container { 
    gap: 1.8rem; 
  }
  
  .testimonial__card { 
    padding: 2.2rem 1.8rem; 
  }

  .faq__container { 
    gap: 2rem; 
    margin-top: var(--mb-3); 
  }
  
  .faq__header { 
    padding: 1.3rem; 
  }
  
  .faq__icon { 
    font-size: 1.5rem; 
  }
  
  .faq__title { 
    font-size: 1.1rem; 
  }
  
  .faq__content { 
    padding: 0 1.3rem; 
  }
  
  .faq__content p { 
    padding-bottom: 1.3rem; 
    line-height: 1.7; 
  }

  .download { 
    padding: 6rem 0; 
  }
  
  .download__container { 
    gap: 4rem; 
  }
  
  .download__img { 
    max-width: 350px; 
  }

  .contact__container { 
    grid-template-columns: 0.8fr 1.2fr; 
    gap: 4rem; 
  }
  
  .contact__info { 
    grid-template-columns: 1fr; 
  }
  
  .contact__card { 
    padding: 1.5rem; 
  }
  
  .contact__card-title { 
    font-size: 1.1rem; 
  }
  
  .contact__form-area textarea { 
    min-height: 110px; 
  }

  .footer__container { 
    grid-template-columns: 2fr 1fr 1fr 1.5fr; 
    gap: 3rem; 
  }
  
  .footer__content:first-child { 
    grid-column: auto; 
  }
  
  .footer__title { 
    font-size: 1.15rem; 
  }

  .modal__container { 
    max-width: 800px; 
  }
  
  .modal__container.modal--large { 
    max-width: 1050px; 
  }

  .map-pin.simulated-pin { 
    width: 30px; 
    height: 30px; 
  }
  
  .map-pin.simulated-pin::before { 
    font-size: 1rem; 
  }
  
  .map-pin.pin-user { 
    width: 22px; 
    height: 22px; 
    border-width: 3px; 
    box-shadow: 0 0 0 3px #018a13; 
  }
  
  .atm-detail-header h4 { 
    font-size: 1.25rem; 
  }
  
  .atm-detail-actions button { 
    font-size: 1.4rem; 
  }
  
  .atm-info-list li i { 
    font-size: 1.1rem; 
  }

  .status-sources-grid { 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 1.2rem; 
  }
  
  .status-source-icon { 
    font-size: 2.5rem; 
  }
  
  .confidence-bar { 
    height: 6px; 
  }
  
  .status-badge { 
    font-size: 1.1rem; 
  }
  
  .confidence-bar.overall { 
    height: 8px; 
  }
  
  #status-history-list { 
    max-height: 150px; 
  }

  .selectable-card { 
    padding: 0.8rem 1rem; 
    min-width: 90px; 
  }
  
  .selectable-card i { 
    font-size: 1.8rem; 
  }
  
  .selectable-card span { 
    font-size: var(--small-font-size); 
  }
  
  .map-route-placeholder { 
    height: 280px; 
  }

  .filter-group h5 { 
    font-size: 1rem; 
  }
  
  .checkbox-group label { 
    font-size: var(--small-font-size); 
  }
  
  #radius-value { 
    font-size: var(--small-font-size); 
  }

  .simulator-controls input[type="number"] { 
    padding: 0.6rem 0.9rem; 
  }
  
  .dynamic-card .large-icon { 
    font-size: 2.8rem; 
  }
  
  .dynamic-card .comparison-value { 
    font-size: 1.5rem; 
  }
  
  .savings-highlight.dynamic-savings { 
    font-size: 1.1rem; 
  }
  
  .cumulative-value { 
    font-size: 1.9rem; 
  }
  
  .progress-bar { 
    height: 10px; 
  }

  .report-actions-column h4, 
  .gamification-column h4 { 
    font-size: 1.15rem; 
  }
  
  .stat-value { 
    font-size: 1.9rem; 
  }
  
  .badge-icon { 
    font-size: 2.2rem; 
  }
  
  #user-activity-list { 
    max-height: 130px; 
  }

  .comparison, 
  .economy-comparison, 
  .safety-points { 
    gap: 1.5rem; 
  }
  
  .comparison__item, 
  .economy-card, 
  .safety-point { 
    padding: 1.3rem; 
  }
  
  .comparison__item h4, 
  .economy-card h4, 
  .safety-point h4 { 
    font-size: 1.1rem; 
  }
  
  .comparison__icon, 
  .economy-icon, 
  .safety-icon { 
    font-size: 2.2rem; 
  }
  
  .comparison__item li, 
  .safety-point li { 
    font-size: var(--small-font-size); 
  }
  
  .comparison__item.before, 
  .comparison__item.after, 
  .safety-point.risk, 
  .safety-point.safe { 
    border-left-width: 4px; 
    padding-left: calc(1.3rem - 4px);
  }
  
  .economy-value { 
    font-size: 1.2rem; 
  }
  
  .economy-total-cost { 
    font-size: 1.1rem; 
  }
  
  .savings-highlight:not(.dynamic-savings) { 
    font-size: 1.1rem; 
  }
}

/* Extra large devices (Large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .container { 
    max-width: 1200px; 
  }
  
  .section { 
    padding: 8rem 0 5rem; 
  }

  .hero__img { 
    max-width: 480px; 
  }
  
  .dl-screenshot { 
    max-height: 650px; 
  }
}

/* XXL Devices */
@media screen and (min-width: 1400px) {
  :root { 
    --header-height: 4.2rem; 
  }
  
  .container { 
    max-width: 1300px; 
  }
  
  .hero__img { 
    max-width: 520px; 
  }
}

/* ==================================================
   DOWNLOAD PAGE SPECIFIC STYLES (dl-) - Mobile First
   ================================================== */

.dl-hero {
  padding-top: calc(var(--header-height) + 2.5rem);
  padding-bottom: 4rem;
  min-height: 85vh;
  display: flex; 
  align-items: center;
  background: linear-gradient(170deg, var(--container-color) 0%, var(--body-color) 100%);
  overflow: hidden;
}

body[data-theme="dark"] .dl-hero {
  background: linear-gradient(170deg, var(--container-color) 0%, var(--body-color) 100%);
}

.dl-shape-adjust-1 { 
  top: -60px; 
  left: -120px; 
  opacity: 0.08; 
  transform: scale(1.1); 
}

.dl-shape-adjust-2 { 
  bottom: -40px; 
  right: -80px; 
  opacity: 0.06; 
  background: #e6f0e6; 
}

.dl-shape-adjust-3 { 
  top: 30%; 
  right: 5%; 
  width: 120px; 
  height: 120px; 
  opacity: 0.04; 
  background: #004800; 
  animation-duration: 22s; 
}

.dl-hero__container {
  display: grid; 
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center; 
  position: relative; 
  z-index: 1;
}

.dl-hero__subtitle {
  display: inline-block; 
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-pill); 
  background-color: #e6f0e6;
  color: #003800; 
  font-weight: var(--font-semi-bold);
  text-transform: uppercase; 
  letter-spacing: 1px;
  margin-bottom: var(--mb-0-75); 
  font-size: var(--tiny-font-size);
  border: 1px solid rgba(0, 72, 0, 0.2);
}

body[data-theme="dark"] .dl-hero__subtitle { 
  background-color: rgba(0, 72, 0, 0.2); 
  color: #90EE90; 
  border-color: rgba(0, 72, 0, 0.4); 
}

.dl-hero__title { 
  font-size: var(--h1-font-size); 
  font-weight: var(--font-extra-bold); 
  margin-bottom: var(--mb-0-75); 
  line-height: 1.2; 
}

.dl-hero__description { 
  font-size: var(--normal-font-size); 
  color: var(--text-color); 
  margin-bottom: var(--mb-1-5); 
  max-width: 90%; 
  line-height: 1.5; 
  margin-left: auto; 
  margin-right: auto;
}

.dl-hero__buttons { 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--mb-0-75); 
  margin-bottom: var(--mb-1); 
  justify-content: center;
}

.dl-hero__buttons .button { 
  font-size: var(--small-font-size); 
  padding: 0.7rem 1.5rem;
}

.dl-hero__buttons .button--ghost { 
  border-width: 1px; 
}

.dl-hero__trust-signals {
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.8rem 1rem;
  font-size: var(--small-font-size); 
  color: var(--text-color-light);
  margin-top: var(--mb-1); 
  justify-content: center;
}

.dl-hero__trust-signals span { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.3rem; 
}

.dl-hero__trust-signals i { 
  color: #004800; 
  font-size: 1.1rem; 
}

.dl-hero__visual {
  position: relative; 
  justify-self: center;
  max-width: 300px;
  width: 85%; 
  order: -1; 
  margin-bottom: var(--mb-1);
}

.dl-mockup-wrapper {
  position: relative; 
  width: 100%; 
  padding-top: 185%;
  transform: rotate3d(0.2, -0.8, 0, 10deg) rotate(1deg);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
  user-select: none;
}

.dl-mockup-wrapper:hover { 
  transform: rotate3d(0, 0, 0, 0deg) rotate(0deg) scale(1.02); 
}

.dl-mockup-img { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  z-index: 10; 
  filter: drop-shadow(0 10px 20px hsla(var(--neutral-hue), 30%, 20%, 0.2)); 
}

.dl-mockup-screen { 
  position: absolute; 
  top: 4%; 
  left: 5.5%; 
  width: 89%; 
  height: 92%; 
  object-fit: cover; 
  border-radius: var(--radius-large); 
  z-index: 5; 
  overflow: hidden; 
  box-shadow: inset 0 0 6px rgba(0,0,0,0.15); 
}

.floating-ui {
  position: absolute; 
  background: var(--glass-bg);
  backdrop-filter: saturate(150%) blur(8px); 
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border: 1px solid var(--glass-border); 
  color: var(--text-color);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-medium); 
  font-size: var(--tiny-font-size);
  display: inline-flex; 
  align-items: center; 
  gap: 0.3rem;
  box-shadow: var(--shadow-medium); 
  z-index: 15; 
  transform: translateY(0);
  transition: box-shadow 0.3s ease;
}

.floating-ui.pulse { 
  animation: pulse-float-mobile 3.5s infinite ease-in-out; 
}

.floating-ui i { 
  font-size: 0.9rem; 
}

.floating-ui.ui-1 { 
  top: 15%; 
  left: -12%; 
  animation-delay: 0s; 
  color: #004800; 
}

.floating-ui.ui-1 i { 
  color: #004800; 
}

.floating-ui.ui-2 { 
  bottom: 25%; 
  right: -18%; 
  animation-delay: 0.6s; 
  color: #018a13; 
}

.floating-ui.ui-2 i { 
  color: #018a13; 
}

.floating-ui.ui-3 { 
  top: 50%; 
  left: -10%; 
  animation-delay: 1.2s; 
  color: var(--success-color); 
}

.floating-ui.ui-3 i { 
  color: var(--success-color); 
}

@keyframes pulse-float-mobile { 
  0%, 100% { 
    transform: translateY(0) scale(1); 
    box-shadow: var(--shadow-medium); 
  } 
  50% { 
    transform: translateY(-6px) scale(1.03); 
    box-shadow: var(--shadow-strong); 
  } 
}

.dl-scroll-down-indicator {
  position: absolute; 
  bottom: 1rem; 
  left: 50%; 
  transform: translateX(-50%);
  color: var(--text-color-light); 
  font-size: 2rem;
  animation: bounce-subtle 2.8s infinite ease-out; 
  opacity: 0.5;
  transition: opacity var(--transition-smooth); 
  z-index: 20;
}

.dl-scroll-down-indicator:hover { 
  opacity: 0.8; 
}

@keyframes bounce-subtle { 
  0%, 20%, 50%, 80%, 100% { 
    transform: translateX(-50%) translateY(0); 
  } 
  40% { 
    transform: translateX(-50%) translateY(-8px); 
  } 
  60% { 
    transform: translateX(-50%) translateY(-4px); 
  } 
}

.dl-features { 
  background-color: var(--container-color); 
  padding-bottom: 3rem; 
}

body[data-theme="dark"] .dl-features { 
  background-color: var(--body-color); 
}

.dl-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 0.8rem;
  margin-top: var(--mb-1-5);
}

.dl-features-grid .feature__card { 
  padding: 0.8rem 0.6rem; 
  text-align: center; 
}

.dl-features-grid .feature__header { 
  flex-direction: column; 
  margin-bottom: var(--mb-0-5); 
}

.dl-features-grid .feature__icon {
  width: 45px; 
  height: 45px;
  border-radius: var(--radius-medium);
  display: inline-flex; 
  justify-content: center; 
  align-items: center;
  margin-bottom: var(--mb-0-5);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  color: #fff; 
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.dl-features-grid .feature__card:hover .feature__icon { 
  transform: translateY(-3px) scale(1.05) rotate(-3deg); 
  box-shadow: 0 5px 12px rgba(0,0,0,0.12); 
}

.dl-features-grid .feature__icon i { 
  font-size: 1.6rem; 
}

.dl-features-grid .feature__title { 
  font-size: var(--small-font-size); 
  font-weight: var(--font-bold); 
  line-height: 1.2; 
}

.dl-features-grid .feature__description { 
  font-size: var(--tiny-font-size); 
  color: var(--text-color-light); 
  line-height: 1.4; 
  padding-bottom: 0; 
  margin-bottom: 0; 
  display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical; 
  overflow: hidden;
}

.dl-features-grid .feature__more { 
  display: none; 
}

.dl-benefits { 
  background-color: var(--body-color); 
  padding: 4rem 0; 
}

.dl-benefits__container { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 2rem; 
  align-items: center; 
}

.dl-benefits__visual { 
  justify-self: center; 
  margin-bottom: var(--mb-1); 
}

.dl-benefits-img { 
  max-width: 90%; 
  width: 400px; 
}

.dl-benefits__content { 
  text-align: center; 
}

.dl-benefits__content .dl-section-title,
.dl-benefits__content .dl-section-subtitle { 
  text-align: center; 
}

.dl-benefits-list { 
  list-style: none; 
  padding: 0; 
  margin: var(--mb-1-5) 0; 
}

.dl-benefit-item {
  display: flex; 
  align-items: flex-start; 
  gap: 0.8rem;
  margin-bottom: var(--mb-1); 
  padding: 0.7rem;
  background-color: var(--container-color); 
  border-radius: var(--radius-medium);
  border-left: 3px solid transparent;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.dl-benefit-item:hover { 
  border-left-color: #018a13; 
  transform: translateX(3px); 
  box-shadow: var(--shadow-soft); 
}

.dl-benefit-item i {
  font-size: 1.4rem; 
  color: #004800;
  min-width: 34px; 
  height: 34px;
  border-radius: var(--radius-medium); 
  display: flex; 
  align-items: center; 
  justify-content: center;
  background-color: #e6f0e6; 
  flex-shrink: 0; 
  transition: transform 0.3s ease, background-color 0.3s ease;
}

body[data-theme="dark"] .dl-benefit-item i { 
  background-color: rgba(0, 72, 0, 0.2); 
}

.dl-benefit-item:hover i { 
  transform: scale(1.08) rotate(-5deg); 
  background-color: #004800; 
  color: #fff; 
}

.dl-benefit-item div h4 { 
  font-size: 0.95rem; 
  font-weight: var(--font-semi-bold); 
  color: var(--title-color); 
  margin-bottom: var(--mb-0-25); 
  line-height: 1.3;
}

.dl-benefit-item div span { 
  font-size: var(--small-font-size); 
  color: var(--text-color); 
  line-height: 1.4; 
}

.dl-benefits__content .button { 
  margin-top: var(--mb-1); 
  font-size: var(--small-font-size);
}

.dl-cta-final {
  padding: 4rem 0;
  background: linear-gradient(0deg, #e6f7e8 0%, transparent 70%), var(--container-color);
  position: relative; 
  overflow: hidden; 
  text-align: center;
}

body[data-theme="dark"] .dl-cta-final { 
  background: linear-gradient(0deg, rgba(1, 138, 19, 0.1) 0%, transparent 70%), var(--body-color); 
}

.dl-shape-adjust-4 { 
  top: -80px; 
  left: 5%; 
  opacity: 0.05; 
  background: #e6f0e6; 
  transform: scale(1.1); 
}

.dl-shape-adjust-5 { 
  bottom: -60px; 
  right: 10%; 
  opacity: 0.06; 
  background: #018a13; 
}

.dl-cta-title { 
  font-size: var(--h2-font-size); 
  font-weight: var(--font-extra-bold); 
  margin-bottom: var(--mb-0-75); 
}

.dl-cta-description { 
  color: var(--text-color); 
  font-size: var(--normal-font-size); 
  margin-bottom: var(--mb-1-5); 
  max-width: 90%; 
  margin-left: auto; 
  margin-right: auto; 
  line-height: 1.5; 
}

.dl-cta-buttons { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 0.8rem; 
  margin-bottom: var(--mb-1-5); 
}

.large-button { 
  padding: 0.8rem 1.8rem; 
  font-size: var(--normal-font-size); 
  border-radius: var(--radius-medium); 
}

.large-button i { 
  font-size: 1.2rem; 
}

.dl-other-downloads {
  margin-top: var(--mb-1); 
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.dl-other-downloads p { 
  margin-bottom: var(--mb-0-5); 
}

.dl-other-downloads .button { 
  margin: 0 var(--mb-0-25); 
  font-size: var(--tiny-font-size); 
  padding: 0.4rem 0.8rem; 
}

.dl-qr-codes-wrapper { 
  margin-top: var(--mb-2); 
}

.dl-qr-title {
  font-size: 0.85rem;
  font-weight: var(--font-medium); 
  color: var(--text-color-light);
  margin-bottom: var(--mb-0-75); 
  text-transform: uppercase; 
  letter-spacing: 0.8px;
}

.dl-qr-codes {
  display: flex; 
  justify-content: center; 
  gap: 1rem;
  flex-wrap: wrap;
}

.dl-qr-code-item { 
  text-align: center; 
}

.dl-qr-code-image {
  padding: 6px;
  border-radius: var(--radius-medium); 
  margin-bottom: var(--mb-0-5);
  border: 1px solid var(--border-color); 
  background-color: var(--body-color);
  display: inline-block; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--shadow-soft);
}

.dl-qr-code-item:hover .dl-qr-code-image { 
  transform: scale(1.03) translateY(-3px); 
  box-shadow: var(--shadow-medium); 
}

.dl-qr-code-item img {
  width: 90px; 
  height: 90px;
  display: block; 
  border-radius: var(--radius-tiny);
}

.dl-qr-code-item span {
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: 0.3rem; 
  font-size: var(--small-font-size);
  color: var(--text-color); 
  font-weight: var(--font-medium);
}

.dl-qr-code-item span i { 
  font-size: 1rem; 
}

/* Media Queries para Download Page */
@media screen and (min-width: 768px) {
  .dl-hero { 
    padding-top: calc(var(--header-height) + 4rem); 
    padding-bottom: 5rem; 
    min-height: 90vh; 
  }
  
  .dl-hero__container { 
    grid-template-columns: 1.1fr 0.9fr; 
    gap: 4rem; 
  }
  
  .dl-hero__content { 
    text-align: left; 
    order: 1; 
  }
  
  .dl-hero__visual { 
    order: 2; 
    max-width: 400px; 
    margin-bottom: 0; 
  }
  
  .dl-hero__subtitle { 
    font-size: var(--smaller-font-size); 
  }
  
  .dl-hero__title { 
    font-size: var(--h1-font-size); 
  }
  
  .dl-hero__description { 
    margin-left: 0; 
    max-width: 580px; 
    font-size: 1.05rem;
  }
  
  .dl-hero__buttons { 
    justify-content: flex-start; 
    gap: var(--mb-1);
  }
  
  .dl-hero__buttons .button { 
    font-size: var(--normal-font-size); 
    padding: 0.8rem 1.7rem;
  }
  
  .dl-hero__trust-signals { 
    justify-content: flex-start; 
    font-size: var(--small-font-size);
  }
  
  .dl-hero__trust-signals i { 
    font-size: 1.2rem; 
  }
  
  .dl-mockup-wrapper { 
    transform: rotate3d(0.3, -0.9, 0, 12deg) rotate(2deg); 
  }
  
  .dl-mockup-img { 
    filter: drop-shadow(0 15px 30px hsla(var(--neutral-hue), 30%, 20%, 0.25)); 
  }
  
  .floating-ui { 
    padding: 0.5rem 0.9rem; 
    font-size: var(--smaller-font-size); 
  }
  
  .floating-ui i { 
    font-size: 1rem; 
  }
  
  @keyframes pulse-float-desktop { 
    0%, 100% { 
      transform: translateY(0) scale(1); 
      box-shadow: var(--shadow-medium); 
    } 
    50% { 
      transform: translateY(-8px) scale(1.04); 
      box-shadow: var(--shadow-strong); 
    } 
  }
  
  .floating-ui.pulse { 
    animation-name: pulse-float-desktop; 
  }
  
  .dl-scroll-down-indicator { 
    font-size: 2.2rem; 
  }

  .dl-features { 
    padding-bottom: 4rem; 
  }
  
  .dl-features-grid { 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 1.5rem; 
    margin-top: var(--mb-2-5); 
  }
  
  .dl-features-grid .feature__card { 
    padding: 1.5rem 1.2rem; 
  }
  
  .dl-features-grid .feature__icon { 
    width: 55px; 
    height: 55px; 
    margin-bottom: var(--mb-0-75); 
  }
  
  .dl-features-grid .feature__icon i { 
    font-size: 1.8rem; 
  }
  
  .dl-features-grid .feature__title { 
    font-size: var(--h3-font-size); 
  }
  
  .dl-features-grid .feature__description { 
    font-size: var(--small-font-size); 
    line-height: 1.5; 
    -webkit-line-clamp: unset; 
  }

  .dl-benefits { 
    padding: 5rem 0; 
  }
  
  .dl-benefits__container { 
    grid-template-columns: 0.8fr 1.2fr; 
    gap: 4rem; 
  }
  
  .dl-benefits__visual { 
    order: 1; 
    margin-bottom: 0; 
  }
  
  .dl-benefits__content { 
    order: 2; 
    text-align: left;
  }
  
  .dl-benefits__content .dl-section-title,
  .dl-benefits__content .dl-section-subtitle { 
    text-align: left; 
  }
  
  .dl-benefits-list { 
    margin: var(--mb-2) 0; 
  }
  
  .dl-benefit-item { 
    gap: 1.2rem; 
    margin-bottom: var(--mb-1-5); 
    padding: 1rem; 
    border-left-width: 4px; 
  }
  
  .dl-benefit-item i { 
    font-size: 1.6rem; 
    min-width: 40px; 
    height: 40px; 
  }
  
  .dl-benefit-item div h4 { 
    font-size: 1.1rem; 
    margin-bottom: var(--mb-0-25); 
  }
  
  .dl-benefit-item div span { 
    font-size: var(--small-font-size); 
    line-height: 1.6; 
  }
  
  .dl-benefits__content .button { 
    margin-top: var(--mb-1-5); 
    font-size: var(--normal-font-size);
  }

  .dl-cta-final { 
    padding: 5rem 0; 
  }
  
  .dl-cta-title { 
    font-size: var(--h1-font-size); 
    margin-bottom: var(--mb-1); 
  }
  
  .dl-cta-description { 
    font-size: 1.1rem; 
    max-width: 600px; 
    margin-bottom: var(--mb-2); 
  }
  
  .dl-cta-buttons { 
    gap: 1rem; 
    margin-bottom: var(--mb-2); 
  }
  
  .large-button { 
    padding: 0.9rem 2rem; 
    font-size: 1.05rem; 
  }
  
  .large-button i { 
    font-size: 1.4rem; 
  }
  
  .dl-other-downloads { 
    margin-top: var(--mb-1-5); 
    font-size: var(--small-font-size); 
  }
  
  .dl-other-downloads .button { 
    font-size: var(--smaller-font-size); 
    padding: 0.6rem 1rem; 
  }
  
  .dl-qr-codes-wrapper { 
    margin-top: var(--mb-2-5); 
  }
  
  .dl-qr-title { 
    font-size: 0.9rem; 
    margin-bottom: var(--mb-1); 
    letter-spacing: 1px; 
  }
  
  .dl-qr-codes { 
    gap: 2rem; 
  }
  
  .dl-qr-code-image { 
    padding: 8px; 
    border-radius: var(--radius-large); 
    margin-bottom: var(--mb-0-75); 
  }
  
  .dl-qr-code-item img { 
    width: 120px; 
    height: 120px; 
    border-radius: var(--radius-small); 
  }
  
  .dl-qr-code-item span { 
    gap: 0.4rem; 
    font-size: var(--small-font-size); 
  }
  
  .dl-qr-code-item span i { 
    font-size: 1.1rem; 
  }
}

@media screen and (min-width: 992px) {
  .dl-hero { 
    padding-top: calc(var(--header-height) + 5rem); 
    padding-bottom: 6rem; 
  }
  
  .dl-hero__container { 
    gap: 5rem; 
  }
  
  .floating-ui { 
    padding: 0.6rem 1.1rem; 
    font-size: var(--smaller-font-size); 
  }

  .dl-features-grid { 
    gap: 1.8rem; 
    margin-top: var(--mb-3); 
  }
  
  .dl-features-grid .feature__icon { 
    width: 60px; 
    height: 60px; 
  }
  
  .dl-features-grid .feature__icon i { 
    font-size: 2rem; 
  }

  .dl-benefits { 
    padding: 6rem 0; 
  }
  
  .dl-benefits__container { 
    gap: 5rem; 
  }
  
  .dl-benefit-item i { 
    font-size: 1.8rem; 
    min-width: 45px; 
    height: 45px; 
  }

  .dl-cta-final { 
    padding: 6rem 0; 
  }
  
  .dl-cta-title { 
    font-size: var(--h1-font-size); 
    margin-bottom: var(--mb-1-5); 
  }
  
  .dl-cta-description { 
    font-size: 1.15rem; 
    max-width: 650px; 
    margin-bottom: var(--mb-2-5); 
  }
  
  .dl-cta-buttons { 
    gap: 1.2rem; 
    margin-bottom: var(--mb-2-5); 
  }
  
  .large-button { 
    padding: 1rem 2.2rem; 
    font-size: 1.1rem; 
  }
  
  .large-button i { 
    font-size: 1.6rem; 
  }
  
  .dl-qr-codes-wrapper { 
    margin-top: var(--mb-3); 
  }
  
  .dl-qr-title { 
    font-size: 1rem; 
    margin-bottom: var(--mb-1-5); 
  }
  
  .dl-qr-codes { 
    gap: 2.5rem; 
  }
  
  .dl-qr-code-image { 
    padding: 10px; 
  }
  
  .dl-qr-code-item img { 
    width: 140px; 
    height: 140px; 
  }
}

/* Main Content */
.main-content {
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

.main-content .footer {
  margin-top: auto;
}

.main-download {
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

.main-download .footer { 
  margin-top: auto; 
}

/* Slick Slider Fixes */
.slick-prev, .slick-next { 
  flex-shrink: 0; 
}

.dl-mockup-wrapper, .dl-screenshot, .vantagens__slide-img {
  user-select: none;
  -webkit-user-drag: none;
}

/* ==================================================
   ESTILOS ESPECÍFICOS - PÁGINA SOBRE NÓS
   ================================================== */

.sobre-page-main {
  padding-top: var(--header-height);
  background-color: var(--body-color);
}

.sobre-section {
  padding: 3rem 1rem;
  position: relative;
  overflow: hidden;
}

.sobre-section--alt-bg {
  background-color: var(--container-color);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.sobre-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.sobre-section__title {
  font-size: var(--h2-font-size);
  font-weight: var(--font-bold);
  color: var(--title-color);
  text-align: center;
  margin-bottom: var(--mb-1);
  line-height: 1.3;
}

.sobre-section__subtitle {
  font-size: var(--normal-font-size);
  color: var(--text-color-light);
  text-align: center;
  line-height: 1.6;
  max-width: 90%;
  margin: 0 auto var(--mb-2);
}

.hero-sobre {
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 3rem;
  background-color: var(--body-color);
  text-align: center;
}

.hero-sobre__logo {
  display: block;
  margin: 0 auto var(--mb-1-5);
  max-height: 65px;
  width: auto;
}

.hero-sobre__tagline {
  display: block;
  margin-bottom: var(--mb-0-75);
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  color: #004800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.hero-sobre .sobre-section__title { 
  font-size: var(--h1-font-size); 
}

.hero-sobre .sobre-section__subtitle { 
  font-size: var(--normal-font-size); 
  max-width: 90%;
}

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

.info-card {
  background-color: var(--container-color);
  border-radius: var(--radius-medium);
  padding: 1.5rem 1.2rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px hsla(var(--neutral-hue), 30%, 50%, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px hsla(var(--neutral-hue), 30%, 50%, 0.1);
}

.info-card__icon {
  font-size: 2rem;
  color: #018a13;
  margin-bottom: var(--mb-0-75);
  line-height: 1;
  display: inline-block;
}

.info-card__title {
  font-size: 1.05rem;
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
  margin-bottom: var(--mb-0-5);
}

.info-card__text {
  font-size: var(--small-font-size);
  color: var(--text-color);
  line-height: 1.6;
  flex-grow: 1;
}

.info-card--centered { 
  text-align: center; 
}

#pixelhub-difference .content-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

#pixelhub-difference .info-card { 
  padding: 1.2rem 1rem; 
}

#pixelhub-difference .info-card__icon { 
  font-size: 1.8rem; 
}

#pixelhub-difference .info-card__title { 
  font-size: 1rem; 
}

#pixelhub-difference .info-card__text { 
  font-size: var(--smaller-font-size); 
  line-height: 1.5; 
}

.workspace-section { 
  padding-bottom: calc(3rem + 30px); 
}

.carousel-card-wrapper {
  background-color: var(--container-color);
  border-radius: var(--radius-extra-large);
  padding: 1.5rem 0.5rem calc(1.5rem + 25px) 0.5rem;
  margin-top: var(--mb-2);
  box-shadow: 0 10px 30px hsla(var(--neutral-hue), 30%, 20%, 0.08);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

body[data-theme="dark"] .carousel-card-wrapper {
  background-color: hsl(var(--neutral-hue), 20%, 15%);
  box-shadow: 0 12px 40px hsla(0, 0%, 0%, 0.2);
  border-color: hsl(var(--neutral-hue), 15%, 25%);
}

.workspace-carousel { 
  margin: 0 auto; 
}

.workspace-carousel .slick-slide { 
  padding: 0 8px; 
  outline: none; 
  transition: transform 0.4s ease, opacity 0.4s ease; 
}

.workspace-slide__image-wrapper {
  position: relative; 
  overflow: hidden; 
  border-radius: var(--radius-large);
  height: 240px;
  display: block; 
  box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

.workspace-slide__image-wrapper img {
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.4s ease;
  transform-origin: center center; 
  filter: brightness(0.9) saturate(0.85);
}

.workspace-carousel .slick-slide:hover .workspace-slide__image-wrapper img { 
  transform: scale(1.07); 
}

.workspace-carousel .slick-center .workspace-slide__image-wrapper img { 
  filter: brightness(1) saturate(1); 
}

.workspace-carousel .slick-dots {
  bottom: 15px; 
  left: 0; 
  right: 0; 
  z-index: 2; 
  display: flex !important;
  justify-content: center; 
  padding: 0; 
  margin: 0; 
  list-style: none;
}

.workspace-carousel .slick-dots li { 
  margin: 0 4px; 
  padding: 0; 
  width: auto; 
  height: auto; 
}

.workspace-carousel .slick-dots li button { 
  padding: 5px; 
  border: none; 
  background: none; 
  cursor: pointer; 
  display: block; 
  width: auto; 
  height: auto; 
}

.workspace-carousel .slick-dots li button:before {
  content: ''; 
  display: block; 
  width: 8px; 
  height: 8px; 
  border-radius: 50%;
  background-color: #018a13; 
  opacity: 0.3;
  transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
  transform: scale(0.8);
}

body[data-theme="dark"] .workspace-carousel .slick-dots li button:before { 
  background-color: #018a13; 
  opacity: 0.4; 
}

.workspace-carousel .slick-dots li.slick-active button:before { 
  opacity: 1; 
  transform: scale(1.1); 
}

.workspace-carousel .slick-dots li button:hover:before { 
  opacity: 0.7; 
}

.workspace-carousel .slick-prev, 
.workspace-carousel .slick-next { 
  display: none !important; 
}

.team-section { 
  padding-bottom: 3rem; 
}

.team-list-container {
  position: relative; 
  margin-top: var(--mb-2); 
  padding-left: 25px;
  display: flex; 
  flex-direction: column; 
  gap: 1.5rem;
}

.team-list-container::before {
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 15px; 
  bottom: 15px; 
  width: 3px;
  background: linear-gradient(to bottom, transparent, #018a13, transparent);
  border-radius: 3px; 
  opacity: 0.5; 
  z-index: 0;
}

body[data-theme="dark"] .team-list-container::before {
  background: linear-gradient(to bottom, transparent, rgba(1, 138, 19, 0.6), transparent);
  opacity: 0.6;
}

.team-member-card {
  background-color: var(--container-color); 
  border-radius: var(--radius-medium);
  padding: 1rem; 
  display: flex; 
  align-items: center; 
  gap: 1rem;
  position: relative; 
  box-shadow: var(--shadow-soft); 
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer; 
  margin-bottom: 0;
}

.team-member-card:hover { 
  transform: translateX(8px) scale(1.02); 
  box-shadow: var(--shadow-medium); 
  border-color: #018a13; 
}

.team-member-card::after {
  content: ''; 
  position: absolute; 
  left: -25px; 
  top: 50%; 
  transform: translateY(-50%);
  width: 25px; 
  height: 2px; 
  background-color: var(--border-color);
  transition: background-color 0.3s ease; 
  z-index: 0;
}

.team-member-card:hover::after { 
  background-color: #018a13; 
}

.team-member-card__img {
  width: 65px; 
  height: 65px; 
  border-radius: 50%; 
  object-fit: cover;
  border: 3px solid var(--body-color); 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

body[data-theme="dark"] .team-member-card__img { 
  border-color: var(--container-color); 
}

.team-member-card__info { 
  flex-grow: 1; 
}

.team-member-card__name { 
  font-size: 1.05rem; 
  font-weight: var(--font-semi-bold); 
  color: var(--title-color); 
  margin-bottom: 3px; 
  line-height: 1.3; 
}

.team-member-card__role { 
  font-size: var(--small-font-size); 
  color: #018a13; 
  font-weight: var(--font-medium); 
  line-height: 1.3; 
}

.team-modal-overlay {
  position: fixed; 
  inset: 0; 
  background-color: hsla(var(--neutral-hue), 40%, 10%, 0.7);
  backdrop-filter: blur(6px); 
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal); 
  display: flex; 
  align-items: center; 
  justify-content: center;
  padding: 1rem; 
  opacity: 0; 
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.team-modal-overlay.active { 
  opacity: 1; 
  visibility: visible; 
  transition-delay: 0s; 
}

.team-modal-content {
  background-color: var(--modal-bg-color); 
  border-radius: var(--radius-large);
  padding: 1.5rem; 
  width: 100%; 
  max-width: 500px; 
  max-height: 88vh;
  overflow-y: auto; 
  position: relative; 
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border-color); 
  transform: scale(0.95) translateY(15px);
  opacity: 0; 
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.team-modal-overlay.active .team-modal-content { 
  transform: scale(1) translateY(0); 
  opacity: 1; 
}

.team-modal-content::-webkit-scrollbar { 
  width: 5px; 
}

.team-modal-content::-webkit-scrollbar-track { 
  background: transparent; 
}

.team-modal-content::-webkit-scrollbar-thumb { 
  background-color: #018a13; 
  border-radius: var(--radius-pill); 
}

.team-modal-content::-webkit-scrollbar-thumb:hover { 
  background-color: #018a13; 
}

.team-modal__close {
  position: absolute; 
  top: 10px; 
  right: 10px; 
  background: transparent; 
  border: none;
  font-size: 1.8rem; 
  color: var(--text-color-light); 
  cursor: pointer; 
  padding: 5px;
  line-height: 1; 
  transition: color 0.3s ease, transform 0.3s ease; 
  z-index: 10;
}

.team-modal__close:hover { 
  color: #018a13; 
  transform: rotate(90deg); 
}

.team-modal__header {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center;
  gap: 1rem; 
  margin-bottom: 1.5rem; 
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.team-modal__img {
  width: 110px; 
  height: 110px; 
  border-radius: 50%; 
  object-fit: cover;
  border: 4px solid #e6f7e8; 
  box-shadow: var(--shadow-soft);
}

body[data-theme="dark"] .team-modal__img { 
  border-color: var(--container-color); 
}

.team-modal__title h2 { 
  font-size: 1.5rem; 
  font-weight: var(--font-bold); 
  color: var(--title-color); 
  margin-bottom: 4px; 
}

.team-modal__title p { 
  font-size: 1rem; 
  font-weight: var(--font-medium); 
  color: #018a13; 
  margin-bottom: 0.8rem; 
}

.team-modal__socials { 
  display: flex; 
  justify-content: center; 
  gap: 0.8rem; 
}

.team-modal__socials a { 
  font-size: 1.4rem; 
  color: var(--text-color-light); 
  transition: color 0.3s ease, transform 0.3s ease; 
}

.team-modal__socials a:hover { 
  color: #018a13; 
  transform: scale(1.15); 
}

.team-modal__body h3 {
  font-size: 1.1rem; 
  font-weight: var(--font-semi-bold); 
  color: var(--title-color);
  margin-bottom: var(--mb-0-75); 
  margin-top: var(--mb-1); 
  padding-bottom: 4px;
  border-bottom: 2px solid #e6f7e8; 
  display: inline-block;
}

body[data-theme="dark"] .team-modal__body h3 { 
  border-bottom-color: rgba(1, 138, 19, 0.2); 
}

.team-modal__body p { 
  color: var(--text-color); 
  line-height: 1.7; 
  margin-bottom: var(--mb-1); 
  font-size: var(--small-font-size); 
}

.team-modal__portfolio-button {
  display: inline-flex; 
  align-items: center; 
  gap: 0.5rem; 
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-medium); 
  font-weight: var(--font-medium);
  font-size: var(--small-font-size); 
  transition: all var(--transition-smooth);
  background: linear-gradient(45deg, #018a13, #4CAF50);
  color: white !important; 
  border: none; 
  text-decoration: none; 
  margin-top: var(--mb-1);
}

.team-modal__portfolio-button:hover { 
  transform: translateY(-3px); 
  box-shadow: var(--shadow-medium); 
  background: linear-gradient(45deg, #017a10, #45a049); 
}

.team-modal__portfolio-button i { 
  font-size: 1rem; 
}

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

.contact-details { 
  margin-bottom: 0; 
}

.contact-info-item { 
  display: flex; 
  align-items: flex-start; 
  gap: 1rem; 
  margin-bottom: 1.3rem; 
}

.contact-info-item i { 
  font-size: 1.6rem; 
  color: #018a13; 
  margin-top: 4px; 
  min-width: 25px; 
  text-align: center; 
}

.contact-info-item div { 
  flex: 1; 
}

.contact-info-item h4 { 
  font-size: 1rem; 
  font-weight: var(--font-semi-bold); 
  color: var(--title-color); 
  margin-bottom: 4px; 
}

.contact-info-item p, 
.contact-info-item a { 
  font-size: var(--small-font-size); 
  color: var(--text-color); 
  text-decoration: none; 
  line-height: 1.6; 
  margin-bottom: 2px; 
  word-break: break-word; 
}

.contact-info-item a { 
  color: #018a13; 
  transition: color 0.3s ease;
}

.contact-info-item a:hover { 
  color: #017a10; 
  text-decoration: underline;
}

.contact-info-item em { 
  font-size: 0.9em; 
  color: var(--text-color-light); 
}

.contact-info-item .social-links-contact a { 
  font-size: 1.5rem; 
  color: var(--text-color-light); 
  transition: color 0.3s ease, transform 0.3s ease; 
  margin-right: 0.8rem; 
}

.contact-info-item .social-links-contact a:hover { 
  color: #018a13; 
  transform: scale(1.1); 
}

.contact-map iframe { 
  border-radius: var(--radius-large); 
  width: 100%; 
  height: 350px; 
  border: 1px solid var(--border-color); 
  filter: grayscale(var(--map-grayscale, 0)); 
  box-shadow: var(--shadow-soft); 
}

body[data-theme="dark"] .contact-map iframe { 
  --map-grayscale: 60%; 
  border-color: var(--border-color); 
}

/* Media Queries para Sobre Page */
@media screen and (min-width: 768px) {
  .sobre-section { 
    padding: 5rem 1rem; 
  }
  
  .sobre-section--alt-bg { 
    padding-top: 6rem; 
    padding-bottom: 6rem; 
  }
  
  .sobre-container { 
    padding: 0 1.5rem; 
  }
  
  .sobre-section__title { 
    font-size: var(--h1-font-size); 
    margin-bottom: var(--mb-1-5); 
  }
  
  .sobre-section__subtitle { 
    font-size: 1.05rem; 
    max-width: 75%; 
    margin-bottom: var(--mb-3); 
  }

  .hero-sobre { 
    padding-top: calc(var(--header-height) + 4rem); 
    padding-bottom: 5rem; 
  }
  
  .hero-sobre__logo { 
    max-height: 75px; 
  }
  
  .hero-sobre .sobre-section__title { 
    font-size: var(--biggest-font-size); 
  }
  
  .hero-sobre .sobre-section__subtitle { 
    font-size: 1.1rem; 
    max-width: 70%;
  }

  #mission-vision .content-grid { 
    grid-template-columns: 1fr 1fr; 
    gap: 2rem; 
  }
  
  #pixelhub-difference .content-grid { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 1.5rem; 
  }
  
  .info-card { 
    padding: 2rem 1.5rem; 
    border-radius: var(--radius-large); 
  }
  
  .info-card__icon { 
    font-size: 2.5rem; 
    margin-bottom: var(--mb-1); 
  }
  
  .info-card__title { 
    font-size: 1.25rem; 
    margin-bottom: var(--mb-0-75); 
  }
  
  .info-card__text { 
    font-size: 0.95rem; 
    line-height: 1.7; 
  }
  
  #pixelhub-difference .info-card { 
    padding: 1.8rem 1.5rem; 
  }

  .workspace-section { 
    padding-bottom: calc(5rem + 40px); 
  }
  
  .workspace-carousel .workspace-slide__image-wrapper { 
    height: 300px; 
  }
  
  .workspace-carousel .slick-dots { 
    bottom: 20px; 
  }
  
  .workspace-carousel .slick-dots li button:before { 
    width: 9px; 
    height: 9px; 
  }

  .team-list-container {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8rem; 
    padding-left: 30px;
  }
  
  .team-list-container::before { 
    left: 0; 
  }
  
  .team-member-card { 
    align-items: center; 
    padding: 1.5rem 1rem; 
    margin-bottom: 0; 
  }
  
  .team-member-card::after { 
    width: 30px; 
    left: -30px; 
  }
  
  .team-member-card__img { 
    width: 80px; 
    height: 80px; 
  }
  
  .team-member-card__name { 
    font-size: 1.1rem; 
  }
  
  .team-member-card__role { 
    font-size: 0.9rem; 
  }

  .team-modal-content { 
    padding: 2rem; 
    max-width: 650px; 
  }
  
  .team-modal__header { 
    flex-direction: row; 
    text-align: left; 
    gap: 1.5rem; 
    margin-bottom: 2rem; 
    padding-bottom: 1.5rem;
  }
  
  .team-modal__img { 
    width: 130px; 
    height: 130px; 
  }
  
  .team-modal__title h2 { 
    font-size: 1.8rem; 
  }
  
  .team-modal__title p { 
    font-size: 1.1rem; 
  }
  
  .team-modal__socials a { 
    font-size: 1.4rem; 
  }
  
  .team-modal__body h3 { 
    font-size: 1.2rem; 
  }
  
  .team-modal__body p { 
    font-size: 0.95rem; 
  }

  .contact-grid { 
    grid-template-columns: 1fr 1.2fr; 
    gap: 2.5rem; 
    align-items: flex-start; 
  }
  
  .contact-info-item { 
    gap: 1.2rem; 
    margin-bottom: 1.8rem; 
  }
  
  .contact-info-item i { 
    font-size: 1.8rem; 
    margin-top: 5px; 
  }
  
  .contact-info-item h4 { 
    font-size: 1.1rem; 
  }
  
  .contact-info-item p, 
  .contact-info-item a { 
    font-size: 0.95rem; 
  }
  
  .contact-map iframe { 
    height: 420px; 
  }
}

@media screen and (min-width: 992px) {
  .sobre-section { 
    padding: 6rem 1rem 4rem 1rem; 
  }
  
  .sobre-section--alt-bg { 
    padding-top: 7rem; 
    padding-bottom: 7rem; 
  }
  
  .sobre-section__subtitle { 
    max-width: 700px; 
  }
  
  .hero-sobre { 
    padding-top: calc(var(--header-height) + 5rem); 
    padding-bottom: 6rem; 
  }
  
  .hero-sobre__logo { 
    max-height: 85px; 
  }
  
  .hero-sobre .sobre-section__title { 
    font-size: 3rem; 
  }
  
  .hero-sobre .sobre-section__subtitle { 
    font-size: 1.15rem; 
    max-width: 65%;
  }

  .content-grid { 
    gap: 2rem; 
  }
  
  #pixelhub-difference .content-grid { 
    gap: 1.8rem; 
  }
  
  .info-card { 
    padding: 2.5rem 2rem; 
  }
  
  .info-card__title { 
    font-size: 1.35rem; 
  }
  
  .info-card__text { 
    font-size: 1rem; 
  }

  .workspace-section { 
    padding-bottom: calc(6rem + 40px); 
  }
  
  .workspace-carousel .workspace-slide__image-wrapper { 
    height: 350px; 
  }
  
  .workspace-carousel .slick-dots li button:before { 
    width: 10px; 
    height: 10px; 
  }

  .team-list-container {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem; 
    padding-left: 30px;
  }
  
  .team-list-container::before { 
    left: 0; 
    width: 3px; 
  }
  
  .team-member-card { 
    padding: 2rem 1.5rem; 
  }
  
  .team-member-card::after { 
    width: 30px; 
    left: -30px; 
  }
  
  .team-member-card__img { 
    width: 90px; 
    height: 90px; 
  }
  
  .team-member-card__name { 
    font-size: 1.2rem; 
  }
  
  .team-member-card__role { 
    font-size: 0.95rem; 
  }

  .team-modal-content { 
    padding: 2.5rem; 
    max-width: 800px; 
  }
  
  .team-modal__header { 
    gap: 2rem; 
  }
  
  .team-modal__img { 
    width: 150px; 
    height: 150px; 
  }
  
  .team-modal__title h2 { 
    font-size: 2rem; 
  }
  
  .team-modal__title p { 
    font-size: 1.2rem; 
  }
  
  .team-modal__socials a { 
    font-size: 1.5rem; 
  }
  
  .team-modal__body h3 { 
    font-size: 1.3rem; 
  }
  
  .team-modal__body p { 
    font-size: 1rem; 
  }
  
  .team-modal__portfolio-button { 
    font-size: 1rem; 
    padding: 12px 25px;
  }

  .contact-grid { 
    gap: 3rem; 
  }
  
  .contact-map iframe { 
    height: 450px; 
  }
}

@media screen and (min-width: 1200px) {
  .sobre-container { 
    padding: 0 1rem; 
    max-width: 1200px; 
  }
  
  .sobre-section { 
    padding: 7rem 0 5rem 0;
  }
}

/* Dark Theme Corrections for Sobre Page */
body[data-theme="dark"] .info-card {
  background-color: var(--container-color); 
  border-color: var(--border-color);
  box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.1);
}

body[data-theme="dark"] .info-card:hover { 
  box-shadow: 0 8px 30px hsla(0, 0%, 0%, 0.18); 
}

body[data-theme="dark"] .sobre-section--alt-bg { 
  background-color: var(--body-color); 
}

body[data-theme="dark"] .workspace-carousel .workspace-image { 
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18); 
}

body[data-theme="dark"] .team-member-card {
  background-color: var(--container-color); 
  border-color: var(--border-color);
  box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.1);
}

body[data-theme="dark"] .team-member-card:hover { 
  box-shadow: 0 8px 30px hsla(0, 0%, 0%, 0.18); 
  border-color: #018a13; 
}

body[data-theme="dark"] .team-member-card::after { 
  background-color: var(--border-color); 
}

body[data-theme="dark"] .team-member-card:hover::after { 
  background-color: #018a13; 
}

body[data-theme="dark"] .team-modal-content { 
  background-color: var(--modal-bg-color); 
  border-color: var(--border-color); 
  box-shadow: 0 15px 45px rgba(0,0,0,0.25); 
}

body[data-theme="dark"] .team-modal__header { 
  border-bottom-color: var(--border-color); 
}

body[data-theme="dark"] .team-modal__body h3 { 
  border-bottom-color: rgba(1, 138, 19, 0.3); 
}

body[data-theme="dark"] .contact-map iframe { 
  border-color: var(--border-color); 
}

/* ================================================ */
/* ===== ESTILOS ADICIONAIS PARA MODAIS ROBUSTOS ===== */
/* ================================================ */

.modal__content.scrollable-content {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 1rem;
}

.modal--large .modal__container {
  max-width: 800px;
}

.modal--xlarge .modal__container {
  max-width: 1000px;
}

.spinner {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-left-color: #018a13;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-left: 0.5rem;
  display: none;
}

.button.loading .spinner {
  display: inline-block;
}

.button.loading .button__text,
.button.loading .button__icon:not(.spinner) {
  opacity: 0.7;
}

.button--ghost .spinner {
  border-left-color: var(--text-color-light);
}

body[data-theme="dark"] .button--ghost .spinner {
  border-left-color: var(--text-color);
}

body[data-theme="dark"] .spinner {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}

.placeholder-text {
  color: var(--text-color-lighter);
  text-align: center;
  display: block;
  padding: 2rem 0;
  font-style: italic;
}

.placeholder-text i {
  margin-right: 0.3rem;
  vertical-align: middle;
}

/* Estilos para telas móveis muito pequenas (320px - 375px) */
@media screen and (max-width: 375px) {
  :root {
    --header-height: 3rem;
    --biggest-font-size: 2.2rem;
    --h1-font-size: 1.8rem;
    --h2-font-size: 1.3rem;
    --h3-font-size: 1rem;
    --normal-font-size: 0.85rem;
    --small-font-size: .75rem;
    --smaller-font-size: .7rem;
    --tiny-font-size: .65rem;
  }
  
  .container {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  
  .section {
    padding: 3rem 0 1.5rem;
  }
  
  .button {
    padding: 0.6rem 1.2rem;
    font-size: var(--smaller-font-size);
  }
  
  .nav__actions {
    gap: 0.1rem;
  }
  
  .nav__sidebar-toggle,
  .nav__theme,
  .nav__toggle {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }
  
  .nav__menu {
    width: 85%;
    max-width: 260px;
  }
  
  .hero__buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .hero__buttons .button {
    width: 100%;
    max-width: 250px;
  }
  
  .features__container {
    grid-template-columns: 1fr;
  }
  
  .testimonials__container {
    max-width: 100%;
  }
  
  .contact__card {
    padding: 0.8rem 0.6rem;
  }
  
  .modal__container {
    max-width: 98%;
    margin: 0.5rem;
  }
  
  .map-dynamic-layout {
    grid-template-columns: 1fr;
  }
  
  .map-container {
    height: 180px;
  }
  
  .atm-details-dynamic {
    max-height: 200px;
  }
  
  .sidebar {
    width: 240px;
    max-width: 85%;
  }
}

/* Correções específicas para navegação mobile */
@media screen and (max-width: 768px) {
  .nav__actions {
    position: relative;
    z-index: calc(var(--z-fixed) + 10);
  }
  
  .nav__menu {
    z-index: calc(var(--z-fixed) + 5);
  }
  
  .sidebar {
    z-index: calc(var(--z-fixed) + 15);
  }
  
  .sidebar__overlay {
    z-index: calc(var(--z-fixed) + 14);
  }
  
  /* Garantir que os botões do menu não fiquem muito próximos */
  .nav__sidebar-toggle,
  .nav__theme,
  .nav__toggle {
    margin: 0 1px;
  }
}

/* Fix para Safari Mobile */
@supports (-webkit-touch-callout: none) {
  .hero {
    padding-top: calc(var(--header-height) + 1.5rem);
  }
  
  .dl-hero {
    min-height: -webkit-fill-available;
  }
  
  .main-content,
  .main-download {
    min-height: -webkit-fill-available;
  }
}

/* Correção para botões em telas muito pequenas */
@media screen and (max-width: 320px) {
  .button {
    padding: 0.5rem 1rem;
    font-size: var(--tiny-font-size);
  }
  
  .button--icon {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
  
  .hero__buttons .button {
    padding: 0.6rem 1rem;
  }
  
  .nav__logo span {
    font-size: 0.85rem;
  }
  
  .nav__logo-img {
    width: 26px;
    height: 26px;
  }
}

/* Garantir que imagens não estourem containers */
img {
  max-width: 100%;
  height: auto;
}

/* Remover todas as duplicações e garantir ordem correta */
/* Todas as correções de duplicação foram aplicadas acima */

/* Garantir que o overflow-x esteja sempre controlado */
body {
  overflow-x: hidden !important;
}

/* Fix para posicionamento absoluto em mobile */
@media screen and (max-width: 768px) {
  .shape,
  .dl-background-glow,
  .tech-future__glow {
    display: none; /* Otimização para mobile */
  }
  
  .hero__social {
    position: relative;
    left: 0;
    bottom: 0;
    flex-direction: row;
    margin-top: var(--mb-1);
    justify-content: center;
  }
  
  .floating-ui {
    display: none; /* Esconder elementos flutuantes em mobile */
  }
}

/* Correção para modais em mobile */
@media screen and (max-width: 576px) {
  .modal__container {
    max-height: 85vh;
    margin: 0.5rem;
  }
  
  .modal__content {
    padding: 0.6rem;
  }
  
  .map-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .map-legend {
    font-size: var(--tiny-font-size);
    gap: 0.3rem;
  }
}

/* Garantir que elementos interativos tenham tamanho mínimo de toque (44px) */
@media screen and (max-width: 768px) {
  .button,
  .nav__sidebar-toggle,
  .nav__theme,
  .nav__toggle,
  .nav__close,
  .sidebar__close,
  .modal__close,
  .scrollup {
    min-height: 44px;
    min-width: 44px;
  }
  
  .button--icon {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Correção para scroll suave em navegadores que suportam */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Suporte para prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --title-color: hsl(var(--neutral-hue), 15%, 95%);
    --text-color: hsl(var(--neutral-hue), 15%, 78%);
    --text-color-light: hsl(var(--neutral-hue), 15%, 65%);
    --body-color: hsl(var(--neutral-hue), 20%, 8%);
    --container-color: hsl(var(--neutral-hue), 20%, 12%);
    --border-color: hsl(var(--neutral-hue), 15%, 25%);
    --glass-bg: hsla(var(--neutral-hue), 20%, 15%, 0.7);
    --glass-border: hsla(var(--neutral-hue), 10%, 30%, 0.5);
    --shadow-color: hsla(0, 0%, 0%, 0.2);
    --scroll-bar-color: hsl(var(--neutral-hue), 15%, 20%);
    --scroll-bar-thumb-color: #018a13;
    --preloader-bg-color: var(--body-color);
    --preloader-text-color: var(--text-color);
    --preloader-spinner-color: var(--primary-color);
    --hero-shape-color: rgba(0, 72, 0, 0.4);
    --section-subtitle-color: #004800;
    --input-bg-color: hsl(var(--neutral-hue), 15%, 18%);
    --input-border-color: var(--border-color);
    --input-focus-border-color: #018a13;
    --modal-bg-color: hsl(var(--neutral-hue), 20%, 15%);
    --modal-overlay-color: hsla(0, 0%, 0%, 0.75);
    --sidebar-bg-color: hsla(var(--neutral-hue), 20%, 10%, 0.9);
    --sidebar-border-color: hsla(var(--neutral-hue), 15%, 28%, 0.8);
    --sidebar-shadow: 5px 0 30px hsla(0, 0%, 0%, 0.25);
    --transaction-positive-color: hsl(var(--success-hue), 55%, 55%);
    --transaction-negative-color: hsl(var(--danger-hue), 80%, 60%);
  }
}

/* ==================================================
   CORREÇÕES DE EMERGÊNCIA PARA TEMA
   ================================================== */

/* Garantir que o modo claro fique realmente branco */
body:not([data-theme="dark"]) {
    background-color: #ffffff !important;
}

body:not([data-theme="dark"]) .nav__link {
    color: #018a13 !important;
}

body:not([data-theme="dark"]) .nav__sidebar-toggle,
body:not([data-theme="dark"]) .nav__theme,
body:not([data-theme="dark"]) .nav__toggle,
body:not([data-theme="dark"]) .nav__close {
    color: #018a13 !important;
}

/* Forçar cores no modo claro */
body:not([data-theme="dark"]) {
    --body-color: #ffffff;
    --container-color: #f8f9fa;
    --text-color: #333333;
    --title-color: #222222;
}

/* Reset para garantir que não haja herança incorreta */
body {
    background-color: var(--body-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.4s ease, color 0.4s ease !important;
}