@charset "UTF-8";

/*
Theme Name: ClimateScanner
Description: Custom theme for the ClimateScanner
Version: 1.0.1
Author: Portos Informática
Text Domain:  climate-scanner
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,600&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ===== FONT RENDERING OPTIMIZATION ===== */
/* Configurações para melhorar a fidelidade visual com o Figma */
* {
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
	/* Otimizações de renderização de fonte para melhor fidelidade com Figma */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Configurações específicas para melhorar a renderização em diferentes navegadores */
html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	min-height: 100%;
	padding-bottom: 185px;
	position: relative;
}

/* ===== FONT WEIGHT ADJUSTMENTS ===== */
/* Ajustes específicos para melhorar a fidelidade com o Figma */
/* Reduzindo ligeiramente os pesos das fontes para compensar a renderização mais pesada */

/* 
INSTRUÇÕES DE USO:
- Use --font-weight-semibold (500) para a maioria dos casos - renderiza mais próximo do Figma
- Use --font-weight-figma-semibold (600) apenas quando precisar do peso exato do Figma
- Use --font-weight-bold (600) para elementos que realmente precisam ser mais pesados
- As configurações de font-smoothing já estão aplicadas globalmente para melhor fidelidade
*/

/* var */
:root {
	/* Cores existentes - mantidas para situações especiais */
	--preto: #1C1E1E;
	--branco: #FFFFFF;
	--erro: #FF6577;
	--errobg: #F8E0E0;
	--sucesso: #31C29F;
	--sucessobg: #31C29F33;
	--atencao: #e27d00;
	--atencaobg: #FCF8E3;
	--info: #38BDF8;
	--infobg: #e3effc;

	/* ===== DESIGN SYSTEM COLORS ===== */
	
	/* ACCENT COLORS */
	--accent-primary: #8C97FF;
	--accent-primary-dark: #5766FF;
	--accent-highlight-default: rgba(140, 151, 255, 0.4);
	--accent-highlight-subtle: rgba(140, 151, 255, 0.24);

	/* NEUTRAL COLORS */
	--neutral-1000: #FFFFFF;
	--neutral-900: #F8F8FC;
	--neutral-800: #EBEBF5;
	--neutral-700: #CBCEE1;
	--neutral-600: #9498B8;
	--neutral-500: #64698B;
	--neutral-400: #474B69;
	--neutral-300: #333455;
	--neutral-200: #1E1F3B;
	--neutral-100: #100F2A;
	--neutral-0: #030217;

	/* NEUTRAL PERCENTAGE COLORS */
	--neutral-90: rgba(255, 255, 255, 0.95);
	--neutral-80: rgba(255, 255, 255, 0.89);
	--neutral-70: rgba(255, 255, 255, 0.8);
	--neutral-60: rgba(255, 255, 255, 0.73);
	--neutral-50: rgba(255, 255, 255, 0.61);
	--neutral-40: rgba(255, 255, 255, 0.42);
	--neutral-30: rgba(255, 255, 255, 0.21);
	--neutral-20: rgba(255, 255, 255, 0.12);
	--neutral-10: rgba(255, 255, 255, 0.06);

	/* INFO COLORS */
	--info-950: #E0F2FE;
	--info-800: #88D4FC;
	--info-600: #38BDF8;
	--info-300: #0284C7;
	--info-200: #075985;
	--info-100: #082F49;
	--info-20: rgba(2, 132, 199, 0.2);
	--info-30: rgba(2, 132, 199, 0.3);

	/* SUCCESS COLORS */
	--success-950: #F7FDED;
	--success-850: #D7E815;
	--success-800: #C0ED78;
	--success-600: #96D334;
	--success-300: #5F9605;
	--success-200: #3D5F06;
	--success-100: #1C2C02;
	--success-20: rgba(94, 150, 5, 0.2);
	--success-30: rgba(94, 150, 5, 0.3);
	--success-border: #b2bf18;

	/* WARNING COLORS */
	--warning-950: #FFEDD5;
	--warning-800: #FDBF77;
	--warning-600: #FB923C;
	--warning-300: #EA580C;
	--warning-200: #9A3412;
	--warning-100: #431407;
	--warning-20: rgba(234, 88, 12, 0.2);
	--warning-30: rgba(234, 88, 12, 0.3);

	/* DANGER COLORS */
	--danger-950: #FFE4E6;
	--danger-800: #FD9BA7;
	--danger-600: #FB7185;
	--danger-300: #E11D48;
	--danger-200: #9F1239;
	--danger-100: #4C0519;
	--danger-20: rgba(225, 29, 72, 0.2);
	--danger-30: rgba(225, 29, 72, 0.3);

	/* EXTRA COLORS - 20% TRANSPARENCY */
	--extra-300: rgba(244, 63, 94, 0.2);
	--extra-200: rgba(249, 115, 22, 0.2);
	--extra-100: rgba(132, 204, 22, 0.2);
	--extra-100-alt: rgba(20, 184, 166, 0.2);
	--extra-100-purple: rgba(168, 85, 247, 0.2);
	--extra-100-pink: rgba(217, 70, 239, 0.2);
	--extra-100-blue: rgba(26, 118, 255, 0.2);
	--extra-100-gray: rgba(100, 116, 139, 0.2);

	/* EXTRA COLORS - SOLID */
	--extra-300-solid: #F43F5E;
	--extra-200-solid: #FF961A;
	--extra-100-solid: #82BF00;
	--extra-100-alt-solid: #00B553;
	--extra-100-purple-solid: #B04BFF;
	--extra-100-pink-solid: #FA1AFF;
	--extra-100-blue-solid: #1A76FF;
	--extra-100-gray-solid: #9498B8;

	/* ===== CLIMATE SCANNER BRAND COLORS ===== */
	--climate-scanner-verde: #008A3C;
	--climate-scanner-roxo: #414293;
	--climate-scanner-roxo-escuro: #333455;
	--climate-scanner-amarelo: #D7E815;
	--climate-scanner-logo: #414294;
	--climate-scanner-logo-2: #D6D4E9;

	/* ===== ACCENT COLORS - LIGHT MODE ===== */
	--accent-primary-light: #4F46E5;
	--accent-primary-dark-light: #271FA9;
	--accent-highlight-subtle-light: rgba(79, 70, 229, 0.1);
	--accent-highlight-default-light: rgba(79, 70, 229, 0.3);
	--accent-border-active-light: #030217;
	--accent-overlay-light: rgba(3, 2, 23, 0.4);

	/* ===== NEUTRAL COLORS - LIGHT MODE ===== */
	--neutral-0-light: #FFFFFF;
	--neutral-100-light: #F8F8FC;
	--neutral-200-light: #EBEBF5;
	--neutral-300-light: #CBCEE1;
	--neutral-400-light: #9498B8;
	--neutral-500-light: #64698B;
	--neutral-600-light: #474B69;
	--neutral-700-light: #333455;
	--neutral-800-light: #1E1F3B;
	--neutral-900-light: #100F2A;
	--neutral-1000-light: #030217;

	/* ===== BLACK PERCENTAGE COLORS - LIGHT MODE ===== */
	--black-10-light: rgba(22, 22, 155, 0.06);
	--black-20-light: rgba(22, 13, 130, 0.12);
	--black-30-light: rgba(7, 22, 112, 0.21);
	--black-40-light: rgba(0, 10, 86, 0.42);
	--black-50-light: rgba(1, 9, 65, 0.61);
	--black-60-light: rgba(3, 8, 50, 0.73);
	--black-70-light: rgba(0, 1, 43, 0.8);
	--black-80-light: rgba(2, 3, 35, 0.89);
	--black-90-light: rgba(3, 2, 31, 0.95);

	/* ===== WHITE PERCENTAGE COLORS - LIGHT MODE ===== */
	--white-0-light: rgba(255, 255, 255, 0);
	--white-10-light: rgba(255, 255, 255, 0.1);
	--white-20-light: rgba(255, 255, 255, 0.2);
	--white-30-light: rgba(255, 255, 255, 0.3);
	--white-40-light: rgba(255, 255, 255, 0.4);
	--white-50-light: rgba(255, 255, 255, 0.5);
	--white-60-light: rgba(255, 255, 255, 0.6);
	--white-70-light: rgba(255, 255, 255, 0.7);
	--white-80-light: rgba(255, 255, 255, 0.8);
	--white-90-light: rgba(255, 255, 255, 0.9);

	/* ===== FEEDBACK COLORS - LIGHT MODE ===== */
	--feedback-danger-10-light: rgba(233, 26, 71, 0.1);
	--feedback-danger-20-light: rgba(233, 26, 71, 0.2);
	--feedback-info-10-light: rgba(2, 132, 199, 0.1);
	--feedback-info-20-light: rgba(2, 132, 199, 0.2);
	--feedback-success-10-light: rgba(94, 150, 5, 0.1);
	--feedback-success-20-light: rgba(94, 150, 5, 0.2);
	--feedback-warning-10-light: rgba(234, 88, 12, 0.1);
	--feedback-warning-20-light: rgba(234, 88, 12, 0.2);

	/* ===== INFO COLORS - LIGHT MODE ===== */
	--info-100-light: #F0F9FF;
	--info-200-light: #BAE6FD;
	--info-400-light: #38BDF8;
	--info-600-light: #0284C7;
	--info-800-light: #075985;
	--info-950-light: #082F49;

	/* ===== SUCCESS COLORS - LIGHT MODE ===== */
	--success-100-light: #F7FDED;
	--success-200-light: #D6F3A7;
	--success-400-light: #96D334;
	--success-600-light: #5F9605;
	--success-800-light: #3D5F06;
	--success-950-light: #1C2C02;

	/* ===== WARNING COLORS - LIGHT MODE ===== */
	--warning-100-light: #FFF4E5;
	--warning-200-light: #FED7AA;
	--warning-400-light: #FB923C;
	--warning-600-light: #EA580C;
	--warning-800-light: #9A3412;
	--warning-950-light: #431407;

	/* ===== DANGER COLORS - LIGHT MODE ===== */
	--danger-100-light: #FFF0F1;
	--danger-200-light: #FECDD3;
	--danger-400-light: #FB7185;
	--danger-600-light: #E81745;
	--danger-800-light: #9F1239;
	--danger-950-light: #4C0519;

	/* ===== EXTRA COLORS - LIGHT MODE ===== */
	--extra-rose-10-light: rgba(244, 63, 94, 0.2);
	--extra-rose-400-light: #FB7185;
	--extra-rose-900-light: #640721;
	--extra-orange-10-light: rgba(249, 115, 22, 0.2);
	--extra-orange-400-light: #FFAD4D;
	--extra-orange-900-light: #5C1C0A;
	--extra-lime-10-light: rgba(132, 204, 22, 0.2);
	--extra-lime-400-light: #96D334;
	--extra-lime-900-light: #2E4903;
	--extra-teal-10-light: rgba(20, 184, 166, 0.2);
	--extra-teal-400-light: #2DD4BF;
	--extra-teal-900-light: #134E4A;
	--extra-purple-10-light: rgba(168, 85, 247, 0.2);
	--extra-purple-400-light: #C084FC;
	--extra-purple-900-light: #581C87;
	--extra-fuschia-10-light: rgba(217, 70, 239, 0.2);
	--extra-fuschia-400-light: #E879F9;
	--extra-fuschia-900-light: #610566;
	--extra-blue-10-light: rgba(26, 118, 255, 0.2);
	--extra-blue-400-light: #60A5FA;
	--extra-blue-900-light: #1E3A8A;
	--extra-grey-10-light: rgba(100, 116, 139, 0.2);
	--extra-grey-400-light: #94A3B8;
	--extra-grey-900-light: #0F172A;

	/* ===== ACCENT COLORS - DARK MODE ===== */
	--accent-primary-dark-mode: #8C97FF;
	--accent-primary-dark-dark-mode: #5766FF;
	--accent-highlight-subtle-dark-mode: rgba(140, 151, 255, 0.24);
	--accent-highlight-default-dark-mode: rgba(140, 151, 255, 0.4);
	--accent-border-active-dark-mode: rgba(255, 255, 255, 0);
	--accent-overlay-dark-mode: rgba(3, 2, 23, 0.4);

	/* ===== NEUTRAL COLORS - DARK MODE ===== */
	--neutral-0-dark-mode: #030217;
	--neutral-100-dark-mode: #100F2A;
	--neutral-200-dark-mode: #1E1F3B;
	--neutral-300-dark-mode: #333455;
	--neutral-400-dark-mode: #474B69;
	--neutral-500-dark-mode: #64698B;
	--neutral-600-dark-mode: #9498B8;
	--neutral-700-dark-mode: #CBCEE1;
	--neutral-800-dark-mode: #EBEBF5;
	--neutral-900-dark-mode: #F8F8FC;
	--neutral-1000-dark-mode: #FFFFFF;

	/* ===== BLACK PERCENTAGE COLORS - DARK MODE ===== */
	--black-10-dark-mode: rgba(255, 255, 255, 0.2);
	--black-20-dark-mode: rgba(255, 255, 255, 0.3);
	--black-30-dark-mode: rgba(255, 255, 255, 0.4);
	--black-40-dark-mode: rgba(255, 255, 255, 0.5);
	--black-50-dark-mode: rgba(255, 255, 255, 0.6);
	--black-60-dark-mode: rgba(255, 255, 255, 0.7);
	--black-70-dark-mode: rgba(255, 255, 255, 0.8);
	--black-80-dark-mode: rgba(255, 255, 255, 0.9);
	--black-90-dark-mode: rgba(255, 255, 255, 0.95);

	/* ===== WHITE PERCENTAGE COLORS - DARK MODE ===== */
	--white-0-dark-mode: rgba(22, 22, 155, 0);
	--white-10-dark-mode: rgba(22, 22, 155, 0.08);
	--white-20-dark-mode: rgba(22, 13, 130, 0.12);
	--white-30-dark-mode: rgba(7, 22, 112, 0.21);
	--white-40-dark-mode: rgba(0, 10, 86, 0.42);
	--white-50-dark-mode: rgba(1, 9, 65, 0.61);
	--white-60-dark-mode: rgba(3, 8, 50, 0.73);
	--white-70-dark-mode: rgba(0, 1, 43, 0.8);
	--white-80-dark-mode: rgba(2, 3, 35, 0.89);
	--white-90-dark-mode: rgba(3, 2, 31, 0.95);

	/* ===== FEEDBACK COLORS - DARK MODE ===== */
	--feedback-danger-10-dark-mode: rgba(225, 29, 72, 0.2);
	--feedback-danger-20-dark-mode: rgba(225, 29, 72, 0.3);
	--feedback-info-10-dark-mode: rgba(2, 132, 199, 0.2);
	--feedback-info-20-dark-mode: rgba(2, 132, 199, 0.3);
	--feedback-success-10-dark-mode: rgba(94, 150, 5, 0.2);
	--feedback-success-20-dark-mode: rgba(94, 150, 5, 0.3);
	--feedback-warning-10-dark-mode: rgba(234, 88, 12, 0.2);
	--feedback-warning-20-dark-mode: rgba(234, 88, 12, 0.3);

	/* ===== INFO COLORS - DARK MODE ===== */
	--info-100-dark-mode: #082F49;
	--info-200-dark-mode: #075985;
	--info-400-dark-mode: #0284C7;
	--info-600-dark-mode: #38BDF8;
	--info-800-dark-mode: #88D4FC;
	--info-950-dark-mode: #E0F2FE;

	/* ===== SUCCESS COLORS - DARK MODE ===== */
	--success-100-dark-mode: #1C2C02;
	--success-200-dark-mode: #3D5F06;
	--success-400-dark-mode: #5F9605;
	--success-600-dark-mode: #96D334;
	--success-800-dark-mode: #C0ED78;
	--success-950-dark-mode: #F7FDED;

	/* ===== WARNING COLORS - DARK MODE ===== */
	--warning-100-dark-mode: #431407;
	--warning-200-dark-mode: #9A3412;
	--warning-400-dark-mode: #EA580C;
	--warning-600-dark-mode: #FB923C;
	--warning-800-dark-mode: #FDBF77;
	--warning-950-dark-mode: #FFEDD5;

	/* ===== DANGER COLORS - DARK MODE ===== */
	--danger-100-dark-mode: #4C0519;
	--danger-200-dark-mode: #9F1239;
	--danger-400-dark-mode: #E11D48;
	--danger-600-dark-mode: #FB7185;
	--danger-800-dark-mode: #FD9BA7;
	--danger-950-dark-mode: #FFE4E6;

	/* ===== EXTRA COLORS - DARK MODE ===== */
	--extra-rose-10-dark-mode: rgba(244, 63, 94, 0.3);
	--extra-rose-400-dark-mode: #E11D48;
	--extra-rose-900-dark-mode: #FFE4E6;
	--extra-orange-10-dark-mode: rgba(249, 115, 22, 0.3);
	--extra-orange-400-dark-mode: #EA580C;
	--extra-orange-900-dark-mode: #FFEDD5;
	--extra-lime-10-dark-mode: rgba(132, 204, 22, 0.3);
	--extra-lime-400-dark-mode: #5F9605;
	--extra-lime-900-dark-mode: #F7FDED;
	--extra-teal-10-dark-mode: rgba(20, 184, 166, 0.3);
	--extra-teal-400-dark-mode: #0D9488;
	--extra-teal-900-dark-mode: #CCFBF1;
	--extra-purple-10-dark-mode: rgba(168, 85, 247, 0.3);
	--extra-purple-400-dark-mode: #9333EA;
	--extra-purple-900-dark-mode: #F3E8FF;
	--extra-fuschia-10-dark-mode: rgba(217, 70, 239, 0.3);
	--extra-fuschia-400-dark-mode: #C026D3;
	--extra-fuschia-900-dark-mode: #FAE8FF;
	--extra-blue-10-dark-mode: rgba(26, 118, 255, 0.3);
	--extra-blue-400-dark-mode: #2563EB;
	--extra-blue-900-dark-mode: #DBEAFE;
	--extra-grey-10-dark-mode: rgba(100, 116, 139, 0.3);
	--extra-grey-400-dark-mode: #9498B8;
	--extra-grey-900-dark-mode: #F1F5F9;
	--extra-100-pink-solid: #FA1AFF;
	--extra-100-blue-solid: #1A76FF;
	--extra-100-gray-solid: #9498B8;

	/* ===== EFFECTS ===== */
	
	/* SHADOW BOTTOM */
	--shadow-bottom-small: 0px 2px 2px -16px rgba(0, 16, 53, 0.04), 0px 4px 8px -10px rgba(0, 16, 53, 0.06), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--shadow-bottom-large: 0px 10px 10px -5px rgba(0, 16, 53, 0.04), 0px 20px 40px -5px rgba(0, 16, 53, 0.1), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--shadow-bottom-xlarge: 0px 25px 66px -20px rgba(0, 16, 53, 0.24), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);

	/* SHADOW TOP */
	--shadow-top-small: 0px -4px 4px -2px rgba(0, 16, 53, 0.05), 0px -4px 16px -2px rgba(0, 16, 53, 0.05), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--shadow-top-large: 0px -10px 10px -5px rgba(0, 16, 53, 0.04), 0px -20px 40px -5px rgba(0, 16, 53, 0.06), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--shadow-top-xlarge: 0px -25px 66px -20px rgba(0, 16, 53, 0.16), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);

	/* SHADOW RIGHT */
	--shadow-right-small: 4px 0px 6px -2px rgba(0, 16, 53, 0.05), 2px 0px 15px -3px rgba(0, 16, 53, 0.08), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--shadow-right-large: 10px 0px 10px -5px rgba(0, 16, 53, 0.04), 20px 0px 40px -5px rgba(0, 16, 53, 0.1), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--shadow-right-xlarge: 25px 0px 66px -20px rgba(0, 16, 53, 0.24), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);

	/* SHADOW LEFT */
	--shadow-left-small: -4px 0px 6px -2px rgba(0, 16, 53, 0.05), -2px 0px 15px -3px rgba(0, 16, 53, 0.08), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--shadow-left-large: -10px 0px 10px -5px rgba(0, 16, 53, 0.04), -20px 0px 40px -5px rgba(0, 16, 53, 0.1), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--shadow-left-xlarge: -25px 0px 66px -20px rgba(0, 16, 53, 0.24), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);

	/* BORDER ACTIVE */
	--border-active: 1px solid #030217;
	--border-active-shadow: 2px 2px 2px 0px #00000040;
	--border-active-shadow-hover: 0 0 0 0px #00000040;

	/* ===== INTERACTION STATES ===== */
	
	/* HOVER EFFECTS */
	--hover-shadow: var(--shadow-bottom-large);
	--hover-transform: translateY(-2px);
	--hover-transition: all 0.2s ease-in-out;

	/* ACTIVE EFFECTS */
	--active-shadow: var(--shadow-bottom-small);
	--active-transform: translateY(0);
	--active-transition: all 0.1s ease-in-out;

	/* FOCUS EFFECTS */
	--focus-ring: 0 0 0 3px rgba(140, 151, 255, 0.3);
	--focus-ring-transition: all 0.15s ease-in-out;

	/* DISABLED EFFECTS */
	--disabled-opacity: 0.5;
	--disabled-cursor: not-allowed;
	--disabled-transition: all 0.2s ease-in-out;

	/* ===== TRANSITIONS ===== */
	--transition-fast: 0.1s ease-in-out;
	--transition-normal: 0.2s ease-in-out;
	--transition-slow: 0.3s ease-in-out;
	--transition-very-slow: 0.5s ease-in-out;

	/* ===== BORDER RADIUS ===== */
	--radius-none: 0;
	--radius-small: 4px;
	--radius-medium: 8px;
	--radius-large: 12px;
	--radius-xlarge: 16px;
	--radius-full: 9999px;

	/* ===== Z-INDEX ===== */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
	--z-toast: 1080;

	--interaction-hover-shadow: 0px 4px 8px -10px rgba(0, 16, 53, 0.06), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--interaction-pressed-shadow: 0px 2px 2px -16px rgba(0, 16, 53, 0.04), inset 0px 0px 1px 0px rgba(0, 16, 53, 0.16);
	--interaction-focus-shadow: 0px 0px 0px 4px rgba(140, 151, 255, 0.24);

	/* ===== TYPOGRAPHY ===== */
	
	/* FONT FAMILY */
	--font-family-primary: 'Poppins', sans-serif;
	--font-family-secondary: 'Inter', sans-serif;
	
	/* FONT WEIGHTS - Ajustados para melhor fidelidade com Figma */
	--font-weight-regular: 400;
	--font-weight-semibold: 600; /* Reduzido de 600 para 500 para compensar renderização mais pesada */
	--font-weight-bold: 700; /* Mantido 600 para casos que realmente precisam ser mais pesados */
	--font-weight-figma-semibold: 600; /* Peso original do Figma para casos especiais */
	
	/* HEADINGS */
	--heading-1-large: 64px;
	--heading-1-small: 32px;
	--heading-1-line-height-large: 1.25;
	--heading-1-line-height-small: 1.5;
	
	--heading-2-large: 48px;
	--heading-2-medium: 36px;
	--heading-2-small: 28px;
	--heading-2-line-height-large: 1.1666666666666667;
	--heading-2-line-height-medium: 1.2777777777777777;
	--heading-2-line-height-small: 1.4285714285714286;
	
	--heading-3-large: 40px;
	--heading-3-small: 24px;
	--heading-3-line-height-large: 1.2;
	--heading-3-line-height-small: 1.5;
	
	--heading-4-large: 32px;
	--heading-4-small: 20px;
	--heading-4-line-height-large: 1.25;
	--heading-4-line-height-small: 1.6;
	
	--heading-5-large: 24px;
	--heading-5-small: 16px;
	--heading-5-line-height-large: 1.3333333333333333;
	--heading-5-line-height-small: 1.5;
	
	--heading-6-large: 20px;
	--heading-6-small: 14px;
	--heading-6-line-height-large: 1.2;
	--heading-6-line-height-small: 1.5714285714285714;
	
	/* BODY TEXT */
	--body-large: 16px;
	--body-small: 14px;
	--body-tiny: 12px;
	--body-micro: 8px;
	
	--body-line-height-large: 1.5;
	--body-line-height-small: 1.4285714285714286;
	--body-line-height-tiny: 1.3333333333333333;
	--body-line-height-micro: 1.5;
	
	/* BODY UPPERCASE */
	--body-uppercase-large: 16px;
	--body-uppercase-small: 14px;
	--body-uppercase-tiny: 12px;
	--body-uppercase-micro: 8px;
	
	--body-uppercase-line-height-large: 1.5;
	--body-uppercase-line-height-small: 1.4285714285714286;
	--body-uppercase-line-height-tiny: 1.3333333333333333;
	--body-uppercase-line-height-micro: 1.5;
	
	--body-uppercase-letter-spacing: 0.04em;
	
	/* CAPTION */
	--caption-large: 12px;
	--caption-small: 10px;
	
	--caption-line-height-large: 1.6666666666666667;
	--caption-line-height-small: 1.6;
	
	--caption-uppercase-letter-spacing: 0.04em;
	
	/* LABEL */
	--label-large: 16px;
	--label-line-height-large: 1.5;
	--label-text-case: uppercase;

	/* ===== VIEWPORT & SAFE AREA VARIABLES ===== */
	/* Estas variáveis são atualizadas via JS em components.js */
	--vh: 1vh;
	--real-vh: 100vh;
	--visual-vh: 100vh;
	--browser-ui-overlap: 0px;
	--safe-area-top: 0px;
	--safe-area-bottom: 0px;
	--safe-area-left: 0px;
	--safe-area-right: 0px;
}

/* ===== VIEWPORT UTILITIES ===== */
.h-screen-real {
	height: 100vh;
	height: var(--real-vh, 100vh);
}

.h-screen-visual {
	height: 100vh;
	height: var(--visual-vh, 100vh);
}

.min-h-screen-visual {
	min-height: 100vh;
	min-height: var(--visual-vh, 100vh);
}

/* Utilitários para Safe Area (Notches e Home Indicator) */
.pb-safe {
	padding-bottom: env(safe-area-inset-bottom, 0px);
	padding-bottom: var(--safe-area-bottom, 0px);
}

.pt-safe {
	padding-top: env(safe-area-inset-top, 0px);
	padding-top: var(--safe-area-top, 0px);
}

.pl-safe {
	padding-left: env(safe-area-inset-left, 0px);
	padding-left: var(--safe-area-left, 0px);
}

.pr-safe {
	padding-right: env(safe-area-inset-right, 0px);
	padding-right: var(--safe-area-right, 0px);
}



* {
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: 16px;
}



/* ===== TYPOGRAPHY COMPONENTS ===== */

/* HEADINGS */
h1, .h1 {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--heading-1-large);
	line-height: var(--heading-1-line-height-large);
	color: var(--neutral-0);
	margin: 0 0 1rem 0;
}

h2, .h2 {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--heading-2-large);
	line-height: var(--heading-2-line-height-large);
	color: var(--neutral-0);
	margin: 0 0 0.875rem 0;
}

h3, .h3 {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--heading-3-large);
	line-height: var(--heading-3-line-height-large);
	color: var(--neutral-0);
	margin: 0 0 0.75rem 0;
}

h4, .h4 {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--heading-4-large);
	line-height: var(--heading-4-line-height-large);
	color: var(--neutral-0);
	margin: 0 0 0.625rem 0;
}

h5, .h5 {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--heading-5-large);
	line-height: var(--heading-5-line-height-large);
	color: var(--neutral-0);
	margin: 0 0 0.5rem 0;
}

h6, .h6 {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--heading-6-large);
	line-height: var(--heading-6-line-height-large);
	color: var(--neutral-0);
	margin: 0 0 0.5rem 0;
}

/* BODY TEXT */
p, .body-text {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	font-size: var(--body-large);
	line-height: var(--body-line-height-large);
	color: var(--neutral-100);
	margin: 0 0 1rem 0;
}

p.small, .body-text-small {
	font-size: var(--body-small);
	line-height: var(--body-line-height-small);
}

p.tiny, .body-text-tiny {
	font-size: var(--body-tiny);
	line-height: var(--body-line-height-tiny);
}

p.micro, .body-text-micro {
	font-size: var(--body-micro);
	line-height: var(--body-line-height-micro);
}

/* BOLD TEXT */
p.bold, .body-text-bold {
	font-weight: var(--font-weight-semibold);
}

/* UPPERCASE TEXT */
p.uppercase, .body-text-uppercase {
	text-transform: uppercase;
	letter-spacing: var(--body-uppercase-letter-spacing);
}

/* BLOCKQUOTE */
blockquote, .blockquote {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	font-size: var(--body-large);
	line-height: var(--body-line-height-large);
	color: var(--neutral-200);
	font-style: italic;
	margin: 1.5rem 0;
	padding: 1rem 1.5rem;
	border-left: 4px solid var(--accent-primary);
	background-color: var(--neutral-900);
	border-radius: 0 8px 8px 0;
}

/* LISTS */
ul, ol {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	font-size: var(--body-large);
	line-height: var(--body-line-height-large);
	color: var(--neutral-100);
	margin: 0 0 1rem 0;
	padding-left: 1.5rem;
}

ul.small, ol.small {
	font-size: var(--body-small);
	line-height: var(--body-line-height-small);
}

ul.tiny, ol.tiny {
	font-size: var(--body-tiny);
	line-height: var(--body-line-height-tiny);
}

/* LIST ITEMS */
li {
	margin-bottom: 0.5rem;
}

li:last-child {
	margin-bottom: 0;
}

/* UNORDERED LIST STYLES */
ul {
	list-style-type: disc;
}

/* ul ul {
	list-style-type: circle;
	margin-top: 0.5rem;
}

ul ul ul {
	list-style-type: square;
} */

/* ORDERED LIST STYLES */
ol {
	list-style-type: decimal;
}

ol ol {
	list-style-type: lower-alpha;
	margin-top: 0.5rem;
}

ol ol ol {
	list-style-type: lower-roman;
}

/* CAPTION */
.caption {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-regular);
	font-size: var(--caption-large);
	line-height: var(--caption-line-height-large);
	color: var(--neutral-300);
}

.caption.small {
	font-size: var(--caption-small);
	line-height: var(--caption-line-height-small);
}

.caption.uppercase {
	text-transform: uppercase;
	letter-spacing: var(--caption-uppercase-letter-spacing);
}

/* LABEL */
.label {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--label-large);
	line-height: var(--label-line-height-large);
	text-transform: var(--label-text-case);
	color: var(--neutral-200);
	letter-spacing: var(--body-uppercase-letter-spacing);
}

/* RESPONSIVE TYPOGRAPHY */
@media (max-width: 768px) {
	h1, .h1 {
		font-size: var(--heading-1-small);
		line-height: var(--heading-1-line-height-small);
	}
	
	h2, .h2 {
		font-size: var(--heading-2-small);
		line-height: var(--heading-2-line-height-small);
	}
	
	h3, .h3 {
		font-size: var(--heading-3-small);
		line-height: var(--heading-3-line-height-small);
	}
	
	h4, .h4 {
		font-size: var(--heading-4-small);
		line-height: var(--heading-4-line-height-small);
	}
	
	h5, .h5 {
		font-size: var(--heading-5-small);
		line-height: var(--heading-5-line-height-small);
	}
	
	h6, .h6 {
		font-size: var(--heading-6-small);
		line-height: var(--heading-6-line-height-small);
	}
}

/* ===== LAYOUT SYSTEM ===== */

/* CONTAINERS */
.container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
}

/* RESPONSIVE CONTAINER */
@media (max-width: 768px) {
	.container {
		padding: 0 20px;
	}
}

#main {
	overflow: hidden;
}

/* SPACING SYSTEM - Baseado em 8px */
.spacing-8 { gap: 8px; }
.spacing-16 { gap: 16px; }
.spacing-24 { gap: 24px; }
.spacing-32 { gap: 32px; }
.spacing-48 { gap: 48px; }
.spacing-64 { gap: 64px; }
.spacing-80 { gap: 80px; }

/* MARGIN SYSTEM */
.margin-8 { margin: 8px; }
.margin-16 { margin: 16px; }
.margin-24 { margin: 24px; }
.margin-32 { margin: 32px; }
.margin-48 { margin: 48px; }
.margin-64 { margin: 64px; }
.margin-80 { margin: 80px; }

/* PADDING SYSTEM */
.padding-8 { padding: 8px; }
.padding-16 { padding: 16px; }
.padding-24 { padding: 24px; }
.padding-32 { padding: 32px; }
.padding-48 { padding: 48px; }
.padding-64 { padding: 64px; }
.padding-80 { padding: 80px; }

/* FLEXBOX UTILITIES */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* ALIGNMENT */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* SIZING */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }

/* POSITIONING */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* DISPLAY */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* TEXT ALIGNMENT */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* FULL-WIDTH BREAKOUT UTILITIES */
/* .full-width-breakout {
	position: relative;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
} */

.full-width-breakout {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

/* ===== FONT WEIGHT UTILITY CLASSES ===== */
/* Classes utilitárias para diferentes pesos de fonte */

.font-weight-regular {
	font-weight: var(--font-weight-regular);
}

.font-weight-semibold {
	font-weight: var(--font-weight-semibold);
}

.font-weight-bold {
	font-weight: var(--font-weight-bold);
}

.font-weight-figma-semibold {
	font-weight: var(--font-weight-figma-semibold);
}

/* ===== FONT RENDERING UTILITY CLASSES ===== */
/* Classes para casos especiais de renderização */

.font-render-optimized {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.font-render-subpixel {
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	text-rendering: auto;
}


a {
	transition: 0.3s color;
}

a.skip-link {
	position: fixed;
	z-index: 1000;
	top: 0px;
	right: 0px;
	display: block;
	overflow: hidden;
	width: 1px;
	height: 1px;
	background-color: transparent;
	padding: 0;
}

.site-footer {
	padding: 0 25px;
	background-color: var(--neutral-300);
	text-align: center;
	font-size: var(--heading-5-small);
	line-height: var(--heading-1-line-height-small);
	color: var(--branco);

	position: absolute;
	bottom: 0;
	width: 100%;
	height: 185px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 110px 64px 16px;
	gap: 32px;
	background: var(--climate-scanner-roxo);
	color: var(--branco);
}
.page-header h1 {
	color: var(--branco);
	font-size: 48px;
}
.home .page-header {
	display: none;
}

.wp-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px 64px 16px;
	gap: 32px;
	background: var(--climate-scanner-roxo);
	color: var(--branco);
	font-size: 16px;
	line-height: 1.5;
}
.wp-content p,
.wp-content ul,
.wp-content ol {
	color: var(--branco);
}
.page-header + .wp-content {
	margin-top: -43px;
}
.page-header > .container,
.wp-content > .container {
	max-width: 768px;
}

.page-template-template-brasil .page-header,
.page-template-template-brasil .wp-content {
	background: #008A3C;
}


@media (max-width: 768px) {
	.page-header {
		padding: 88px 64px 16px;
	}
	.page-header h1 {
		font-size: 28px;
	}
	.wp-content p,
	.wp-content ul,
	.wp-content ol {
		font-size: 12px;
	}
	.site-footer {
		padding: 0 20px;
		height: 82px;
		font-size: 12px;
	}
	body {
		padding-bottom: 82px;
	}
}

/* ===== CLIMATE SCANNER MESSAGE SYSTEM ===== */

/* MESSAGE BASE STYLES */
.cs-message {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	margin: 16px 0;
	border-radius: var(--radius-medium);
	border: 1px solid transparent;
	font-family: var(--font-family-primary);
	font-size: var(--body-large);
	line-height: var(--body-line-height-large);
	transition: var(--transition-normal);
	position: relative;
	overflow: hidden;
}

/* MESSAGE ICON */
.cs-message::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* MESSAGE CONTENT */
.cs-message .cs-message-content {
	flex: 1;
	margin: 0;
}

.cs-message .cs-message-title {
	font-weight: var(--font-weight-semibold);
	margin: 0 0 4px 0;
	font-size: var(--body-large);
	line-height: var(--body-line-height-large);
}

.cs-message .cs-message-text {
	margin: 0;
	font-size: var(--body-large);
	line-height: var(--body-line-height-large);
}

.cs-message .cs-message-text:not(:last-child) {
	margin-bottom: 8px;
}

/* MESSAGE CLOSE BUTTON */
.cs-message .cs-message-close {
	position: absolute;
	top: 0;
	right: 0;
	background-color: transparent !important;
	border: none !important;
	cursor: pointer;
	border-radius: var(--radius-small);
	transition: var(--transition-fast);
	opacity: 0.7;
	box-shadow: none !important;
}

.cs-message .cs-message-close:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.1);
}

.cs-message .cs-message-close::before {
	content: '×';
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
}

/* INFO MESSAGE (DEFAULT) */
.cs-message {
	background-color: var(--infobg);
	color: var(--info);
	border-color: var(--info);
}

.cs-message::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2338BDF8'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

/* SUCCESS MESSAGE */
.cs-message.cs-sucesso {
	background-color: var(--sucessobg);
	color: var(--sucesso);
	border-color: var(--sucesso);
}

.cs-message.cs-sucesso::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2331C29F'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

/* ERROR MESSAGE */
.cs-message.cs-erro {
	background-color: var(--errobg);
	color: var(--erro);
	border-color: var(--erro);
}

.cs-message.cs-erro::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6577'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z'/%3E%3C/svg%3E");
}

/* WARNING MESSAGE */
.cs-message.cs-atencao {
	background-color: var(--atencaobg);
	color: var(--atencao);
	border-color: var(--atencao);
}

.cs-message.cs-atencao::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFC107'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

/* MESSAGE ANIMATIONS */
.cs-message {
	animation: cs-message-slide-in 0.3s ease-out;
}

@keyframes cs-message-slide-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cs-message.cs-message-hiding {
	animation: cs-message-slide-out 0.3s ease-in forwards;
}

@keyframes cs-message-slide-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}

/* MESSAGE SIZES */
.cs-message.cs-message-small {
	padding: 12px 16px;
	font-size: var(--body-small);
	line-height: var(--body-line-height-small);
}

.cs-message.cs-message-small::before {
	width: 16px;
	height: 16px;
}

.cs-message.cs-message-large {
	padding: 20px 24px;
	font-size: var(--heading-6-large);
	line-height: var(--heading-6-line-height-large);
}

.cs-message.cs-message-large::before {
	width: 24px;
	height: 24px;
}

/* MESSAGE POSITIONS */
.cs-message.cs-message-fixed {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: var(--z-toast);
	max-width: 400px;
	box-shadow: var(--shadow-bottom-large);
}

.cs-message.cs-message-fixed.cs-message-fixed-left {
	right: auto;
	left: 20px;
}

.cs-message.cs-message-fixed.cs-message-fixed-center {
	right: auto;
	left: 50%;
	transform: translateX(-50%);
}

/* CONTACT FORM 7 INTEGRATION */
.wpcf7-response-output {
	/* Reset CF7 default styles */
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

/* CF7 Success Messages */
.wpcf7-mail-sent-ok {
	/* Inherit from .cs-message.cs-sucesso */
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	margin: 16px 0;
	border-radius: var(--radius-medium);
	border: 1px solid var(--sucesso);
	background-color: var(--sucessobg);
	color: var(--sucesso);
	font-family: var(--font-family-primary);
	font-size: var(--body-large);
	line-height: var(--body-line-height-large);
	animation: cs-message-slide-in 0.3s ease-out;
}

.wpcf7-mail-sent-ok::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2331C29F'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* CF7 Error Messages */
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-spam-blocked {
	/* Inherit from .cs-message.cs-erro */
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	margin: 16px 0;
	border-radius: var(--radius-medium);
	border: 1px solid var(--erro);
	background-color: var(--errobg);
	color: var(--erro);
	font-family: var(--font-family-primary);
	font-size: var(--body-large);
	line-height: var(--body-line-height-large);
	animation: cs-message-slide-in 0.3s ease-out;
}

.wpcf7-validation-errors::before,
.wpcf7-mail-sent-ng::before,
.wpcf7-aborted::before,
.wpcf7-spam-blocked::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6577'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* CF7 Field Validation */
.wpcf7-not-valid {
	border-color: var(--erro) !important;
	box-shadow: 0 0 0 2px rgba(255, 101, 119, 0.2) !important;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: var(--body-small);
	color: var(--erro);
	font-family: var(--font-family-primary);
}


/* RESPONSIVE MESSAGES */
@media (max-width: 768px) {
	.cs-message {
		padding: 12px 16px;
		font-size: var(--body-small);
		line-height: var(--body-line-height-small);
	}
	
	.cs-message::before {
		width: 18px;
		height: 18px;
	}
	
	.cs-message.cs-message-fixed {
		top: 10px;
		right: 10px;
		left: 10px;
		max-width: none;
	}
	
	.cs-message.cs-message-fixed.cs-message-fixed-left {
		left: 10px;
		right: 10px;
	}
	
	.cs-message.cs-message-fixed.cs-message-fixed-center {
		left: 10px;
		right: 10px;
		transform: none;
	}
}





/* ===== ABOUT PAGES ===== */
.framework-covers {
	display: flex;
	margin: -50px auto 50px;
	max-width: 660px;
}
.framework-covers div {
	width: 50%;
}
@media (max-width: 768px) {
	.framework-covers {
		flex-direction: column;
		max-width: 400px;
		margin: 0 auto 50px;
	}
	.framework-covers div {
		width: 100%;
	}
	.framework-covers div img {
		margin: 0 auto;
	}
}

.tabela-paises {
	max-width: 545px;
	margin: 48px auto;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
}
.tabela-paises div {
	width: calc( 33.33% - 12px );
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
}
.tabela-paises img {
	margin: 0;
}
@media (max-width: 767px) {
	.tabela-paises {
		max-width: 100%;
	}
	.tabela-paises div {
		width: calc( 50% - 9px );
	}
}
@media (max-width: 400px) {
	.tabela-paises div {
		width: 100%;
	}
}

.estatisticas {
	display: flex;
	gap: 16px;
	max-width: 545px;
	margin: 32px auto 72px;
}
.estatistica {
	width: 50%;
	padding: 22px 0 11px 23px;
	position: relative;
}
.estatistica::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 136px;
	height: 136px;
	background: var(--success-850);
	border-radius: 50%;
	z-index: 1;
}
.stats-num {
	position: relative;
	z-index: 2;

	display: block;
	font-family: var(--font-family-primary);
	font-weight: 600;
	font-size: 96px;
	line-height: 0.8;
	color: var(--climate-scanner-roxo);
}
.stats-legenda {
	position: relative;
	z-index: 2;

	font-family: var(--font-family-primary);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	color: var(--neutral-0);
}
@media (max-width: 768px) {
	.estatisticas {
		flex-direction: column;
		max-width: 100%;
		margin: 24px auto 48px;
		justify-content: center;
		align-items: center;
	}
	.estatistica {
		width: 265px;
	}
}


.aligncenter {
	display: block;
	margin: 32px auto;
}
.w-242 {
	width: 242px;
}
.w-271 {
	width: 271px;
}
.max-w-360 {
	max-width: 360px;
}
.max-w-520 {
	max-width: 520px;
}
.max-w-700 {
	max-width: 700px;
}
.inline-max-w-280 {
	display: inline-block;
	max-width: 280px;
	margin-bottom: 40px;
	margin-left: 10px;
	margin-right: 10px;
	display: inline-block;
}
@media (max-width: 768px) {
	.w-242 {
		max-width: 100%;
	}
	.w-271 {
		max-width: 100%;
	}
	.max-w-700 {
		max-width: 100%;
	}
}
@media (max-width: 580px) {
	.max-w-520 {
		max-width: 100%;
	}
}
@media (max-width: 400px) {
	.max-w-360 {
		max-width: 100%;
	}
}

.timeline {
	margin: 64px auto;
	max-width: 500px;
	padding-left: 44px;
	position: relative;
	overflow: hidden;
}
.timeline:before {
	content: '';
	position: absolute;
	border-left: 1px solid #D7E815;
	left: 7px;
	top: 0;
	height: 100%;
}
.timeline b,
.timeline strong {
	display: block;
	color: #414293;
	padding-top: 25px;
	position: relative;
}
.timeline b::before,
.timeline strong::before {
	content: '';
	position: absolute;
	left: -36px;
	top: 30px;
	width: 13px;
	height: 13px;
	background-color: #414293;
	border-radius: 50%;
	transform: translateX(-7px);
	z-index: 2;
}
.timeline p:first-child b::after,
.timeline p:first-child strong::after {
	content: '';
	position: absolute;
	left: -38px;
	top: -1px;
	width: 3px;
	height: 33px;
	background-color: #ffffff;
	z-index: 1;
}
.timeline b.ultimo::after,
.timeline strong.ultimo::after {
	content: '';
	position: absolute;
	left: -38px;
	top: 36px;
	width: 3px;
	height: 500px;
	background-color: #ffffff;
	z-index: 1;
}
.timeline p,
.timeline ul,
.timeline ol {
	font-size: 1.25rem;
}


.membership-courts {
	text-align: center;
	width: fit-content;
	padding-left: 54px;
	min-height: 44px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	display: flex;
	align-items: center;
	text-align: center;
	color: #414294;
	margin: 14px auto;
	position: relative;
}
.membership-courts:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: #D7E815;
	border-radius: 50%;
}




/* ===== HIDDEN ELEMENTS ===== */
@media (max-width: 768px) {
	.hide-mob {
		display: none;
	}
}
@media (min-width: 769px) {
	.hide-desktop {
		display: none;
	}
}