@layer reset, base, layout, components, pages, utilities, accessibility;
/* MAPA DO ARQUIVO (INDEX) */
/*
  ESTRUTURA DO ARQUIVO (ITCSS):
  1. BASE (01-base/):
     - Reset e Normalização
     - Configurações de Scrollbar
     - Variáveis Globais (Cores, Tipografia, Espaçamento, Z-Index, Animações)
     - Keyframes de Animação
  2. LAYOUT (02-layout/):
     - Estrutura de Seções
     - Footer
  3. COMPONENTS (03-components/):
     - Elementos UI Base (Botões, Cards, Badges, Ícones)
     - Componentes Complexos (Navegação, Carrossel, Formulários, Chat, Modais)
  4. PAGES (04-pages/):
     - Estilos específicos por seção (Hero, Sobre, Blog, Preços)
     - Páginas Legais
  5. UTILITIES (05-utilities/):
     - Helpers de alta especificidade (Display, Spacing, Colors, Typography)
     - Skeleton Loading
  6. ACESSIBILIDADE (06-accessibility/):
     - Foco, Screen Readers, Preferências de Movimento
*/
/* ==========================================================================
   Master Stylesheet
   ========================================================================== */
/* 🔒 SECURITY STYLES - Load first */
/* @import url('../css/security-loading.css'); */
/* ==========================================================================
   1. BASE - Fundações
   ========================================================================== */
@layer reset{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Firefox Scrollbar (Standard property)
  2. WebKit Scrollbar (Chrome, Safari, Edge):
     - Largura e Altura
     - Track (Fundo)
     - Thumb (Barra de arrasto)
     - Hover States
     - Corner
*/

/* ===================================
   SCROLLBAR CUSTOMIZATION
   =================================== */

/* Firefox */
* {
  scrollbar-color: var(--md-sys-color-primary) var(--md-sys-color-surface-container-low);
  scrollbar-width: thin;
}

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: var(--scrollbar-width, 10px);
  height: var(--scrollbar-height, 10px);
}

::-webkit-scrollbar-track {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-full);
}

::-webkit-scrollbar-thumb {
  background-color: var(--md-sys-color-primary);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color var(--duration-fast) var(--ease-snappy);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--a11y-primary-dark, var(--md-sys-color-primary));
}

::-webkit-scrollbar-corner {
  background: var(--md-sys-color-surface-container-low);
}
}
@layer reset{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. TEXT-WRAP: BALANCE (Headings, Titles, Blockquotes)
  2. TEXT-WRAP: PRETTY (Body, Lists, Cells)
  3. TEXT-WRAP: NOWRAP (UI Elements, Buttons, Tags)
  4. TEXT-WRAP: STABLE (Editable Content)
  5. FALLBACKS (@supports not)
*/

/**
 * _variables-textwrap.css
 * Text-wrap optimization - Modern CSS typography
 *
 * Simplified - using general selectors instead of long lists
 */

/* ==========================================================================
   TEXT-WRAP: BALANCE
   Headings, titles, and short blocks (1-5 lines)
   ========================================================================== */

/* Nota: h1-h6 já têm text-wrap: balance definido em _headings.css */
.title,
.subtitle,
.modal__title,
.hero__title,
.hero__subtitle,
.section__title,
.subsection__title,
.pricing-title,
.blog-card__title,
blockquote,
table th {
  text-wrap: balance;
}

/* ==========================================================================
   TEXT-WRAP: PRETTY
   Body text, paragraphs, and lists (prevents widows/orphans)
   ========================================================================== */

article p,
section p,
.body-base,
.body-large,
.faq-resposta,
ul li,
ol li,
table td {
  text-wrap: pretty;
}

/* ==========================================================================
   TEXT-WRAP: NOWRAP
   Elements that must remain on a single line (UI elements, labels, prices)
   ========================================================================== */

.btn,
.btn-- *,
.navbar__link,
.footer-link,
input,
textarea,
.form-label,
.badge,
.reading-time,
.copyright {
  text-wrap: nowrap;
}

/* ==========================================================================
   TEXT-WRAP: STABLE
   Editable content (stable line breaks during editing)
   ========================================================================== */

[contenteditable='true'],
textarea.editable {
  text-wrap: stable;
}

/* ==========================================================================
   FALLBACKS
   ========================================================================== */

@supports not (text-wrap: pretty) {
  article p,
  section p,
  ul li {
    text-wrap: wrap;
  }
}
}
@layer reset{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Box Sizing & Defaults (Reset Nuclear)
  2. Document Setup (Scroll Behavior, Font Size)
  3. Base Body Styles (Cores, Rendering)
  4. Typography & Layout (Headings, Lists, Figures)
  5. Media Defaults (Images, Video)
  6. Form Elements (Inheritance)
  7. Project Specific Utilities (Transitions, Scroll Margin)
  8. Containers Scrolláveis (Overscroll)
  9. GPU Acceleration & Will-Change
  10. Scroll Performance (Lazy Loading)
  11. Media Queries (Reduced Motion, Mobile Containment)
*/

/* ===================================
   RESET & GLOBAL STYLES
   Merged: Piccalilli Modern Reset + Project Optimizations
   =================================== */

/* 1. Box Sizing & Defaults (Nuclear Reset Preserved) */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* 2. Document Setup */
html {
  scroll-behavior: smooth;
  font-size: 100%;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Scroll padding apenas em desktop */

/* 3. Base Body Styles */
body {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 4. Typography & Layout Improvements */

/* Fallback apenas para elementos interactivos sem sistema próprio de motion */

p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles only when semantic role is list (Piccalilli style) */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* 5. Media Defaults - Critical for Responsiveness */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Form Elements - Inherit Fonts */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Make textareas usable by default */
textarea:not([rows]) {
  min-height: 10em;
}

/* ===================================
   PROJECT SPECIFIC UTILITIES
   =================================== */

/* Anti-FOUC: esconde body até CSS carregar */
.body-hidden {
  visibility: hidden;
}

body,
.navbar {
  transition: var(--transition-colors);
}

.body-modal-aberto,
.body-no-scroll {
  overflow: hidden;
}

/* Scroll margin para TODOS os elementos com ID - apenas desktop */

/* ===================================
   CONTAINERS SCROLLÁVEIS
   =================================== */

.sidebar__lista-wrapper,
.modal__body,
.navbar__menu {
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* ===================================
   GPU ACCELERATION (Uso Estratégico)
   =================================== */

/* .gpu-accelerated definido em _scroll-animations.css — aplica translateZ(0) para compositing layer */

/* ===================================
   SCROLL PERFORMANCE
   =================================== */

/* Imagens lazy */
img[loading='lazy'] {
  content-visibility: auto;
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* ============================================================================
   ACCESSIBILITY - REDUCED MOTION
   =============================================================================

   CRÍTICO: Para utilizadores com distúrbios vestibulares severos,
   0.01ms ainda causa micro-movimentos que podem desencadear náusea.
   Usamos 'none' para desativar completamente animações e transições.

   Conforme WCAG 2.3.2 / 2.3.3 - Animation from Interactions
============================================================================ */

/* Performance - Otimizações Mobile & Contenção de Layout */
}
/* ACTIONS: Root variables and foundations */
@layer base{

/* ==========================================================================
   BREAKPOINTS VARIABLES (V14)
   Standardized 5-breakpoint system for the whole project.
   ========================================================================== */

:root {
  /* Breakpoint Tokens */
  --bp-xs: 375px;
  /* Small phones */
  --bp-sm: 480px;
  /* Large phones */
  --bp-md: 768px;
  /* Tablet portrait */
  --bp-lg: 1024px;
  /* Tablet landscape / Small desktop */
  --bp-xl: 1280px;
  /* Standard desktop */

  /* Semantic Aliases */
  --mobile-breakpoint: var(--bp-md);
  --tablet-breakpoint: var(--bp-lg);
  color-scheme: light;

  /* =======================================================================
       1. CORES PRIMÁRIAS DA MARCA (OKLCH PRIMÁRIO COM FALLBACK HEX)
       ======================================================================= */

  /* [AI-HINT: BRAND CORE PALETTE]
      Cores fundamentais da identidade visual. Use apenas para definições de base.
      Para a maioria dos componentes, use os tokens MD3 (Sessão 2). */

  /* Cores Primárias - Tom principal da marca (Azul e Dourado) */
  --brand-primary-blue: oklch(65% 0.145 235deg);

  /* Azul Real Clínico (menos roxo) */
  --brand-primary-gold: oklch(78% 0.16 85deg);

  /* Dourado principal */

  /* Cores Secundárias e Terciárias - Apoio e acentos */
  --brand-secondary-gray: oklch(44.8% 0.034 233.5deg);
  --brand-tertiary-green: oklch(60% 0.15 150deg);

  /* Verde Saúde Vibrante */
  --brand-success-green: var(--brand-tertiary-green);

  /* Cores de Status */
  --brand-error-red: oklch(55% 0.22 25.3deg);
  --brand-warning-orange: oklch(70% 0.18 55deg);

  /* Close Button Colors - Sistema unificado para botões de fechar
      [AI-HINT: Estas variáveis controlam TODOS os botões close/modal]
      Usa --brand-error-red como cor base para consistência com estados de erro/fechar */
  --close-button-bg-default: transparent;
  --close-button-bg-hover: var(--brand-error-red);
  --close-button-bg-active: color-mix(in oklch, var(--brand-error-red), black 15%);
  --close-button-bg-focus: transparent;
  --close-button-color-default: var(--md-sys-color-on-surface-variant);
  --close-button-color-hover: var(--brand-neutral-white);
  --close-button-color-active: var(--brand-neutral-white);
  --close-button-color-focus: var(--brand-error-red);
  --close-button-border-default: var(--md-sys-color-outline-variant);
  --close-button-border-hover: var(--brand-error-red);
  --close-button-border-active: var(--brand-error-red);
  --close-button-border-focus: var(--brand-error-red);
  --close-button-shadow-default: none;
  --close-button-shadow-hover: var(--md-sys-elevation-level2);
  --close-button-shadow-active: var(--md-sys-elevation-level0);

  /* Laranja Performance */

  /* #FF9800 - Laranja de alerta */

  /* Cores Neutras - Escala de cinzas para fundos e textos */
  --color-transparent: transparent;

  /* Fix for undefined variable usage */
  --brand-neutral-white: oklch(100% 0 0deg);

  /* #ffffff - Branco puro */
  --brand-neutral-black: oklch(0% 0 0deg);

  /* #000000 - Preto puro */
  --brand-neutral-50: oklch(98.19% 0.0029 264.54deg);

  /* #f8fafd - Fundo ultra leve */
  --brand-neutral-100: oklch(95.5% 0.008 230deg);

  /* #f3f0f4 - Fundo de container leve */
  --brand-neutral-200: oklch(90.1% 0.015 230deg);

  /* #dfe3e9 - Borda suave / Ghost background */
  --brand-neutral-300: oklch(75.5% 0.015 230deg);

  /* #b0b4b8 - Borda padrão */
  --brand-neutral-400: oklch(50% 0.015 230deg);

  /* #767b7f - Escurecido para melhor contraste */
  --brand-neutral-500: oklch(28% 0.015 230deg);

  /* #31363b - Escurecido para WCAG AA garantido */
  --brand-neutral-600: oklch(27.6% 0.0233 248.68deg);

  /* #334155 - Texto médio */
  --brand-neutral-700: oklch(20.5% 0.015 230deg);

  /* #475569 - Texto forte */
  --brand-neutral-800: oklch(15.5% 0.015 230deg);

  /* #64748b - Texto muito forte */
  --brand-neutral-900: oklch(12.5% 0.005 230deg);

  /* #1c1b1f - Texto principal quase preto */

  /* =======================================================================
       2. SISTEMA MATERIAL DESIGN 3 (MD3) CONSOLIDADO
       ======================================================================= */

  /* [AI-HINT: MATERIAL DESIGN 3 SEMANTICS]
      Use estes tokens para garantir consistência visual e suporte automático a temas. */

  /* Core Tokens (Primary) - Ações principais e destaque */
  --md-sys-color-primary: var(--brand-primary-blue);

  /* Cor principal do sistema */
  --md-sys-color-on-primary: var(--brand-neutral-white);

  /* Texto sobre cor primária */
  --md-sys-color-primary-container: oklch(76.44% 0.112 228.76deg);

  /* Fundo suave para elementos primários */

  /* #c8e6ff */
  --md-sys-color-on-primary-container: oklch(15.4% 0.026 235.55deg);

  /* Texto sobre primary-container */

  /* #001e30 */

  /* Secondary Tokens - Elementos menos proeminentes */
  --md-sys-color-secondary: var(--brand-secondary-gray);
  --md-sys-color-on-secondary: var(--brand-neutral-white);
  --md-sys-color-secondary-container: oklch(90.3% 0.02 233.5deg);

  /* #d3e5f5 */
  --md-sys-color-on-secondary-container: oklch(14.8% 0.02 233.5deg);

  /* #0c1d29 */

  /* Tertiary Tokens - Acentos e contrastes */
  --md-sys-color-tertiary: var(--brand-tertiary-green);
  --md-sys-color-on-tertiary: var(--brand-neutral-white);
  --md-sys-color-tertiary-container: oklch(90.8% 0.16 158.6deg);

  /* #b3f5d7 */
  --md-sys-color-on-tertiary-container: oklch(11.8% 0.16 158.6deg);

  /* #002118 */

  /* Surface Tokens - Fundos de Cartões, Seções e Modais */

  /* [AI-HINT: Use --md-sys-color-surface para o fundo principal de cartões] */
  --md-sys-color-surface: var(--brand-neutral-50);

  /* Fundo base da página */
  --md-sys-color-surface-variant: var(--brand-neutral-200);

  /* Fundo contrastante para cartões/inputs */
  --md-sys-color-surface-container-lowest: var(--brand-neutral-white);
  --md-sys-color-surface-container-low: oklch(96.5% 0.005 230deg);
  --md-sys-color-primary-container-low: var(--md-sys-color-surface-container-low);
  --md-sys-color-surface-container: oklch(94.8% 0.005 230deg);
  --md-sys-color-surface-container-high: oklch(92.1% 0.005 230deg);
  --md-sys-color-surface-container-highest: oklch(88.5% 0.005 230deg);

  /* On-Surface Tokens - Cores de Texto sobre superfícies */
  --md-sys-color-on-surface: var(--brand-neutral-900);

  /* Texto principal em cartões */
  --md-sys-color-on-surface-variant: var(--brand-neutral-600);

  /* MUDANÇA: Mapeado para neutral-600 (25.5% L) para contraste seguro */

  /* Texto secundário / help text */
  --md-sys-color-on-surface-dim: var(--brand-neutral-700);

  /* Texto médio em superfícies */

  /* Outline & Border Tokens - Linhas de separação e bordas */
  --md-sys-color-outline: oklch(45% 0.015 230deg);

  /* MUDANÇA: Escurecido de 55% para 45% para garantir 4.5:1 em textos opcionais */

  /* WCAG AA FIX: #8a8e92 - Escurecido para contraste >=3:1 sobre surface */
  --md-sys-color-outline-variant: var(--brand-neutral-400);

  /* Bordas mais suaves */

  /* Error Tokens - Feedback de falha */
  --md-sys-color-error: var(--brand-error-red);
  --md-sys-color-on-error: var(--brand-neutral-white);
  --md-sys-color-error-container: oklch(96.5% 0.08 25.3deg);

  /* #fce4e4 */
  --md-sys-color-on-error-container: oklch(25.5% 0.13 25.3deg);

  /* #410002 */

  /* Special Tokens - Links, Foco e Overlay */
  --md-sys-color-link: var(--md-sys-color-primary);

  /* Links de texto */
  --md-sys-color-focus-outline: var(--brand-primary-gold);

  /* Anel de foco acessível */
  --md-sys-color-scrim: oklch(0% 0 0deg / 50%);

  /* Overlay de modais (Backdrop) */

  /* rgba(0,0,0,0.5) */
  --md-sys-color-shadow: oklch(0% 0 0deg / var(--alpha-medium));

  /* Sombras projetadas */

  /* rgba(0,0,0,0.15) */
  --vm-glass-surface: oklch(100% 0 0deg / var(--alpha-high));

  /* Superfície translúcida glassmorphism */

  /* =======================================================================
       3. ESTADOS DE INTERAÇÃO E TRANSPARÊNCIA
       ======================================================================= */

  /* [AI-HINT: OPACITY TOKENS]
      Tokens semânticos de opacidade para consistência. */
  --alpha-subtle: 0.05;
  --alpha-low: 0.1;
  --alpha-medium: 0.15;
  --alpha-high: 0.95;

  /* [AI-HINT: INTERACTION STATES]
      Opacidades base para estados interativos. */
  --state-hover-opacity: 0.08;

  /* Overlay ao passar o mouse */
  --state-focus-opacity: 0.12;

  /* Overlay ao focar via teclado */
  --state-pressed-opacity: 0.12;

  /* Overlay ao clicar/tocar */
  --state-dragged-opacity: 0.16;

  /* Overlay ao arrastar */
  --state-disabled-opacity: 0.38;

  /* Opacidade para elementos desativados */

  /* State Overlays - Cores dinâmicas para estados (Sintaxe Color-Mix aproximada) */
  --state-hover-primary: oklch(from var(--md-sys-color-primary) l c h / var(--state-hover-opacity));
  --state-focus-primary: oklch(from var(--md-sys-color-primary) l c h / var(--state-focus-opacity));
  --state-pressed-primary: oklch(
    from var(--md-sys-color-primary) l c h / var(--state-pressed-opacity)
  );
  --state-disabled-primary: oklch(
    from var(--md-sys-color-primary) l c h / var(--state-disabled-opacity)
  );
  --state-hover-secondary: oklch(
    from var(--md-sys-color-secondary) l c h / var(--state-hover-opacity)
  );
  --state-focus-secondary: oklch(
    from var(--md-sys-color-secondary) l c h / var(--state-focus-opacity)
  );
  --state-pressed-secondary: oklch(
    from var(--md-sys-color-secondary) l c h / var(--state-pressed-opacity)
  );
  --state-disabled-secondary: oklch(
    from var(--md-sys-color-secondary) l c h / var(--state-disabled-opacity)
  );

  /* Disabled text color - MD3 standard (38% opacity of on-surface) */
  --md-sys-color-on-surface-disabled: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  --state-hover-surface: oklch(
    from var(--md-sys-color-on-surface) l c h / var(--state-hover-opacity)
  );
  --state-focus-surface: oklch(
    from var(--md-sys-color-on-surface) l c h / var(--state-focus-opacity)
  );
  --state-pressed-surface: oklch(
    from var(--md-sys-color-on-surface) l c h / var(--state-pressed-opacity)
  );
  --state-focus-error: oklch(from var(--md-sys-color-error) l c h / var(--state-focus-opacity));

  /* ====================== 4. SOMBRAS E ELEVAÇÕES MD3      ================================================= */

  /* Base Shadow Tokens — shadow-sm/md/lg/xl definidos em _variables-shadows.css com color-mix() */
  --shadow-2xl: 0 25px 50px -12px oklch(0% 0 0deg / 25%);

  /* Colored Shadow Tokens — shadow-error e shadow-success definidos em _variables-shadows.css */
  --shadow-primary: 0 4px 12px oklch(from var(--md-sys-color-primary) l c h / 15%);
  --shadow-secondary: 0 4px 12px oklch(from var(--md-sys-color-secondary) l c h / 15%);

  /* Semantic Shadow Tokens (Funnel/Card shadows) */
  --shadow-soft: 0 2px 8px oklch(0% 0 0deg / 8%);
  --shadow-hover: 0 8px 24px oklch(0% 0 0deg / 12%);

  /* Rich Shadow Tokens (Enhanced elevation for cards/hero) */
  --shadow-rich-sm: 0 2px 8px oklch(0% 0 0deg / 10%), 0 4px 16px oklch(0% 0 0deg / 6%);
  --shadow-rich-md: 0 4px 12px oklch(0% 0 0deg / 12%), 0 8px 24px oklch(0% 0 0deg / 8%);
  --shadow-rich-lg: 0 8px 20px oklch(0% 0 0deg / 15%), 0 12px 32px oklch(0% 0 0deg / 10%);

  /* Directional Shadow Tokens (For positioned elements) */
  --shadow-top: 0 -4px 12px oklch(0% 0 0deg / 10%);
  --shadow-top-dark: 0 -4px 12px oklch(0% 0 0deg / 30%);

  /* Inset Shadow Tokens (For inputs/pressed states) */
  --shadow-inset-sm: inset 0 1px 2px 0 oklch(0% 0 0deg / 5%);
  --shadow-inset-md: inset 0 2px 4px 0 oklch(0% 0 0deg / 5%);

  /* Strong Shadow Tokens (For modals/dropdowns) — shadow-strong-lg definido em _variables-shadows.css com color-mix() */
  --shadow-strong-md: 0 4px 8px oklch(0% 0 0deg / 10%);
  --shadow-strong-xl: 0 10px 40px -10px oklch(0% 0 0deg / 50%);
  --shadow-strong-2xl: 0 25px 50px -12px oklch(0% 0 0deg / 50%);

  /* MD3 Elevation Tokens */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: var(--shadow-sm);
  --md-sys-elevation-level2: 0 1px 2px 0 oklch(0% 0 0deg / 7%), 0 1px 3px 1px oklch(0% 0 0deg / 6%);
  --md-sys-elevation-level3: var(--shadow-md);
  --md-sys-elevation-level4:
    0 2px 4px -1px oklch(0% 0 0deg / 6%), 0 4px 6px -1px oklch(0% 0 0deg / 10%);
  --md-sys-elevation-level5:
    0 4px 6px -1px oklch(0% 0 0deg / 10%), 0 8px 10px -2px oklch(0% 0 0deg / 4%);

  /* =======================================================================
       5. GRADIENTES EM OKLCH
       ======================================================================= */

  /* Gradientes principais */
  --gradient-primary: linear-gradient(
    135deg,
    var(--md-sys-color-primary) 0%,
    var(--md-sys-color-tertiary) 100%
  );

  /* ================= 6. CORES DE ACESSIBILIDADE EM OKLCH======================================================================= */

  /* Focus outlines com contraste WCAG AA CORRIGIDO */
  --focus-outline-primary: 0 0 0 3px oklch(from var(--md-sys-color-primary) l c h / 60%);
  --focus-outline-secondary: 0 0 0 2px oklch(from var(--md-sys-color-focus-outline) l c h / 80%);
  --focus-outline-error: 0 0 0 3px oklch(from var(--md-sys-color-error) l c h / 70%);

  /* High contrast colors - ATENÇÃO: precisa de validação */
  --hc-surface: var(--brand-neutral-white);
  --hc-on-surface: var(--brand-neutral-black);
  --hc-primary: oklch(21.13% 0.151 235.55deg);
  --hc-on-primary: var(--brand-neutral-white);

  /* =======================================================================
       8.1 VARIÁVEIS DE ACESSIBILIDADE (WCAG AA)
       ======================================================================= */

  /* [AI-HINT: ACCESSIBILITY COLORS]
      Cores específicas para garantir contraste WCAG AA (4.5:1 para texto normal)
      Use estas variáveis quando precisar de contraste garantido em light mode. */

  /* Primary dark - azul escuro com contraste garantido (baseado no hue 250) */
  --a11y-primary-dark: oklch(45% 0.166 250deg);

  /* Primary darker - para hover states */
  --a11y-primary-darker: oklch(35% 0.166 250deg);

  /* Primary container light - fundo azul claro */
  --a11y-primary-container-light: oklch(96% 0.03 250deg);

  /* Text dark - texto escuro com contraste suavizado (replaces #1a1a1a) */
  --a11y-text-dark: oklch(25% 0 0deg);

  /* Text medium - texto médio escuro (replaces #2c2c2c) */
  --a11y-text-medium: oklch(35% 0 0deg);

  /* Text secondary - texto secundário (replaces #424242) */
  --a11y-text-secondary: oklch(45% 0 0deg);

  /* Field optional - para labels "(opcional)" com contraste */
  --a11y-field-optional: oklch(35% 0.01 230deg);

  /* =======================================================================
       7. CORES ESPECIAIS E STATUS
       ======================================================================= */

  /* Status colors */
  --status-success: var(--brand-success-green);
  --status-warning: var(--brand-warning-orange);
  --status-error: var(--brand-error-red);
  --status-info: var(--brand-primary-blue);

  /* Status com contraste WCAG AA CORRIGIDO */
  --status-on-success-container: oklch(from var(--status-success) 30% 0.15 h);
  --status-success-bg: oklch(from var(--status-success) 95% c h);
  --status-warning-bg: oklch(from var(--status-warning) 95% c h);
  --status-error-bg: oklch(from var(--status-error) 95% c h);
  --status-info-bg: oklch(from var(--status-info) 95% c h);

  /* Brand specific colors */
  --brand-whatsapp: var(--brand-success-green);
  --brand-facebook: oklch(41.2% 0.192 241.4deg);

  /* #1877F2 */
  --brand-twitter: oklch(57.5% 0.191 223.5deg);

  /* #1DA1F2 */
  --brand-linkedin: oklch(41.8% 0.158 236.7deg);

  /* #0A66C2 */
  --brand-instagram: linear-gradient(
    45deg,
    oklch(56.5% 0.196 15.3deg) 0%,
    /* #F58529 */ oklch(61.2% 0.196 31.3deg) 25%,
    /* #DD2A7B */ oklch(60.8% 0.196 278.6deg) 50%,
    /* #8134AF */ oklch(60.5% 0.196 261.8deg) 75%,
    /* #515BD4 */ oklch(63.1% 0.196 199.1deg) 100% /* #405DE6 */
  );

  /* =======================================================================
       8. CV SIDEBAR COLORS (Centralized)
       ======================================================================= */
  --cv-left-bg: oklch(25% 0.04 230deg);
  --cv-right-bg: var(--brand-neutral-white);
  --cv-text-main: var(--brand-neutral-700);
  --cv-text-muted: oklch(53% 0.018 230deg);
  --cv-accent: oklch(78% 0.15 200deg);
  --cv-divider: var(--brand-neutral-300);
  --bio-box-bg: var(--brand-neutral-50);
  --cv-left-text: var(--brand-neutral-white);
  --cv-left-muted: oklch(88% 0.01 230deg);
  --cv-tag-bg: var(--white-alpha-10);

  /* =======================================================================
       9. COMPONENT & UTILITY COLORS
       ======================================================================= */

  /* [AI-HINT: COMPONENT COLORS]
      Cores específicas de componentes movidas de _variables-components.css
      para centralização (Single Source of Truth). */

  /* Global Overlay */
  --glass-overlay-bg: oklch(0% 0 0deg / 40%);

  /* Era rgba(0, 0, 0, 0.4) */

  /* Transparências Utilitárias (Deduplicação) */
  --white-alpha-00: oklch(100% 0 0deg / 0%);
  --white-alpha-10: oklch(100% 0 0deg / 10%);
  --white-alpha-15: oklch(100% 0 0deg / 15%);
  --white-alpha-20: oklch(100% 0 0deg / 20%);
  --white-alpha-40: oklch(100% 0 0deg / 40%);
  --black-alpha-05: oklch(0% 0 0deg / 5%);
  --black-alpha-15: oklch(0% 0 0deg / 15%);
  --dark-alpha-95: oklch(21% 0 0deg / 95%);

  /* Glassmorphism System Colors */
  --glass-bg-light: oklch(from var(--md-sys-color-surface) l c h / var(--glass-bg-opacity));
  --glass-border-light: oklch(0% 0 0deg / var(--alpha-subtle));
  --glass-border-dark: oklch(100% 0 0deg / var(--alpha-subtle));

  /* Visual Effects - Highlights */
  --effect-highlight-top: inset 0 1px 0 0 oklch(100% 0 0deg / 70%);
  --effect-highlight-top-dark: inset 0 1px 0 0 oklch(100% 0 0deg / 10%);

  /* ===================================
      Mobile Menu Theme System 
      =================================== */

  /* Light Theme Defaults */
  --mobile-menu-gradient: linear-gradient(
    160deg,
    oklch(56.78% 0.198 261.2deg) 0%,
    oklch(49.82% 0.197 264.4deg) 100%
  );
  --mobile-menu-text: var(--brand-neutral-white);
  --mobile-menu-text-muted: oklch(100% 0 0deg / 80%);
  --mobile-menu-social-bg: oklch(100% 0 0deg / var(--alpha-low));
  --mobile-menu-social-bg-hover: oklch(100% 0 0deg / 25%);
  --mobile-menu-close-bg: var(--brand-neutral-white);
  --mobile-menu-close-text: oklch(56.78% 0.198 261.2deg);
  --mobile-menu-close-bg-active: oklch(96% 0 0deg);

  /* ===================================
    VARIÁVEIS ADICIONAIS - PÁGINA DE RECRUTAMENTO
    =================================== */

  /* [AI-HINT: RECRUITMENT PAGE COLORS]
      Cores específicas para a seção de recrutamento.
      Renomeadas para evitar conflitos e convertidas para OKLCH. */
  --recruitment-primary-dark: oklch(43.6% 0.236 264.7deg);

  /* Azul marinho profundo */
  --recruitment-primary-light: oklch(63.2% 0.22 260.6deg);

  /* Azul céu vibrante */
  --recruitment-accent: oklch(61.8% 0.21 279deg);

  /* Púrpura elétrico */
  --recruitment-accent-light: oklch(72.7% 0.16 280deg);

  /* Lavanda claro */

  /* Neutras Extras para Recrutamento */
  --recruitment-dark: oklch(18.7% 0.055 264deg);

  /* Quase preto para fundos */
  --recruitment-dark-soft: oklch(27.6% 0.057 263deg);

  /* Cinza ardósia para cards */
  --recruitment-gray-800: oklch(27.8% 0.027 256deg);

  /* Neutro robusto */
  --recruitment-gray-700: oklch(37.5% 0.027 258deg);
  --recruitment-gray-600: oklch(45.5% 0.023 256deg);
  --recruitment-gray-400: oklch(71% 0.015 256deg);
  --recruitment-gray-300: oklch(86.5% 0.005 256deg);
  --recruitment-gray-200: oklch(93% 0.003 256deg);
  --recruitment-gray-100: oklch(96.5% 0.002 256deg);

  /* Status Extra */
  --recruitment-warning: oklch(75.5% 0.17 70deg);

  /* Âmbar de atenção */

  /* Gradientes de Recrutamento [Renomeados e Convertidos] */
  --recruitment-gradient-primary: linear-gradient(
    135deg,
    var(--recruitment-primary-light) 0%,
    oklch(50% 0.18 285deg) 100%
  );
  --recruitment-gradient-hero: linear-gradient(
    135deg,
    var(--recruitment-primary-light) 0%,
    oklch(50% 0.18 285deg) 50%,
    oklch(75% 0.15 310deg) 100%
  );
  --recruitment-gradient-card: linear-gradient(
    135deg,
    oklch(62% 0.18 266deg / var(--alpha-low)) 0%,
    oklch(50% 0.18 285deg / var(--alpha-low)) 100%
  );

  /* Sombras Glow */
  --shadow-glow: 0 0 40px oklch(62% 0.18 266deg / 30%);

  /* Variações Tema Escuro - Recrutamento - Simplified to use OKLCH refs */
  --recruitment-dark-theme-primary: var(--recruitment-primary-light);
  --recruitment-dark-theme-primary-dark: var(--recruitment-primary-dark);
  --recruitment-dark-theme-accent: var(--recruitment-accent-light);
  --recruitment-dark-theme-white: var(--brand-neutral-900);

  /* Variáveis Adicionais - Progress Bar e FAB */
  --fab-size-mobile: 48px;
  --fab-bottom-margin-mobile: 20px;
  --reading-indicator-gap: 12px;
  --gradient-progress-bar: linear-gradient(
    90deg,
    var(--md-sys-color-primary) 0%,
    var(--md-sys-color-secondary) 100%
  );

  /* [AI-HINT: SERVICE FLOW COLORS]
      Cores específicas para o funil de atendimento e passos. */
  --fluxo-primary: var(--md-sys-color-primary);
  --fluxo-success: oklch(66.5% 0.195 154.6deg);

  /* #25D366 - Cor WhatsApp */
  --fluxo-error: var(--md-sys-color-error);
  --fluxo-warning: var(--brand-warning-orange);

  /* Suporte a alertas no fluxo */
  --fluxo-info: var(--md-sys-color-primary);

  /* Interaction States for Flows */
  --fluxo-hover-bg: oklch(from var(--fluxo-primary) l c h / 5%);

  /* Hover suave em opções */
  --fluxo-active-bg: oklch(from var(--fluxo-primary) l c h / 10%);

  /* Estado selecionado */
  --fluxo-success-bg: oklch(from var(--fluxo-success) l c h / 3%);

  /* Fundo de confirmação suave */
  --fluxo-success-hover: oklch(from var(--fluxo-success) l c h / 8%);
  --fluxo-shadow-primary: 0 4px 12px oklch(from var(--fluxo-primary) l c h / 15%);

  /* Sombra temática */
  --fluxo-shadow-default: 0 4px 12px oklch(0% 0 0deg / 15%);

  /* Variáveis Adicionais - Acessibilidade - Modo de Alto Contraste */
  --state-hover-opacity-high-contrast: 0.16;
  --state-focus-opacity-high-contrast: 0.24;
  --state-pressed-opacity-high-contrast: 0.32;

  /* [AI-HINT: PRICING PAGE COLORS]
      Cores específicas para diferenciar planos de preços.
      Cada cor representa uma modalidade de serviço. */

  /* Plano VivaGym - Laranja vibrante (reutiliza warning) */
  --pricing-vivagym: var(--brand-warning-orange);

  /* #f97316 - laranja */
  --pricing-vivagym-bg: oklch(from var(--pricing-vivagym) 94% c h);

  /* Fundo suave do plano */

  /* Plano Online - Amarelo/dourado */
  --pricing-online: oklch(78.5% 0.17 85deg);

  /* #eab308 - amarelo */
  --pricing-online-bg: oklch(from var(--pricing-online) 94% c h);

  /* Fundo suave do plano */

  /* Plano Domicílio - Verde (reutiliza sucesso) */
  --pricing-domicilio: var(--status-success);

  /* #10b981 - verde */
  --pricing-domicilio-bg: var(--status-success-bg);

  /* Fundo suave do plano */

  /* Plano GCP - Azul claro */
  --pricing-gcp: oklch(65% 0.19 250deg);

  /* #3b82f6 - azul claro */
  --pricing-gcp-bg: oklch(from var(--pricing-gcp) 94% c h);

  /* Fundo suave do plano */

  /* Badge colors (para tabela de preços) */
  --pricing-badge-blue-bg: oklch(93% 0.05 235deg);

  /* #e3f2fd - azul claro background */
  --pricing-badge-blue-text: oklch(45% 0.15 240deg);

  /* #1565c0 - azul escuro texto */

  /* Badge Premium (reutiliza secondary) */
  --pricing-badge-purple-bg: var(--md-sys-color-secondary-container);
  --pricing-badge-purple-text: var(--md-sys-color-on-secondary-container);

  /* Badge Digital (reutiliza success) */
  --pricing-badge-teal-bg: var(--status-success-bg);
  --pricing-badge-teal-text: var(--status-success);

  /* Badge Club (dark) */
  --pricing-badge-dark-bg: oklch(18% 0 0deg);

  /* #212121 - fundo escuro */
  --pricing-badge-dark-text: var(--brand-neutral-white);

  /* #fff - texto branco */
  /* =================================
       PRIMITIVE FLUID SCALE (4px Grid)
       Escala baseada em grelha de 4px com clamp() para fluidez.
       Base: 1rem = 16px
       ================================= */

  /* 2px -> 3px */
  --space-4xs: clamp(0.125rem, 0.15rem, 0.1875rem);

  /* 4px -> 6px */
  --space-3xs: clamp(0.25rem, 0.25rem + 0.1vw, 0.375rem);

  /* 6px -> 8px */
  --space-2xs: clamp(0.375rem, 0.35rem + 0.15vw, 0.5rem);

  /* 8px -> 12px */
  --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);

  /* 12px -> 16px */
  --space-s: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);

  /* 16px -> 24px */
  --space-m: clamp(1rem, 0.8rem + 1vw, 1.5rem);

  /* 24px -> 36px */
  --space-l: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);

  /* 32px -> 48px */
  --space-xl: clamp(2rem, 1.6rem + 2vw, 3rem);

  /* 64px -> 96px */
  --space-2xl: clamp(4rem, 3.2rem + 4vw, 6rem);

  /* 80px -> 128px */
  --space-3xl: clamp(5rem, 4rem + 5vw, 8rem);

  /* =================================
       LAYOUT VARIABLES & COMPONENT SPECIFICS
       ================================= */

  /* Espaçamento Lateral */
  --space-lateral: clamp(1rem, 3vw, 5%);
  --space-lateral-mobile: clamp(0.75rem, 2vw, 4%);
  --space-lateral-small-mobile: clamp(0.75rem, 0.5rem + 1vw, 1rem);
  --safe-area-padding: env(safe-area-inset-bottom, 0);

  /* Layout Widths */
  --max-width-content: 75rem;
  --max-width-content-wide: var(--max-width-content);
  /* 1200px */
  --max-width-content-narrow: 62.5rem;
  /* 1000px */
  --max-width-narrow: 45rem;
  /* 720px - for forms, community submission */
  --max-width-reading-mode: 46.875rem;
  /* 750px - Reading mode */
  --max-width-linktree: 25rem;
  /* 400px - Linktree */
  --max-width-linktree-modal: 23.75rem;
  /* 380px - Linktree modal */
  --max-width-linktree-desktop: 26.25rem;
  /* 420px - Linktree desktop */
  --max-width-linktree-tablet: 32.5rem;
  /* 520px - Linktree tablet */
  --max-width-chat-message: 85%;
  /* Chat message bubbles */
  --max-width-tooltip: 12.5rem;
  /* 200px - Tooltips */
  --max-width-modal-loading: 25rem;
  /* 400px - Modal loading */
  --max-width-modal-small: 17.5rem;
  /* 280px - Small modals */
  --max-width-modal-medium: 25rem;
  /* 400px - Medium modals */
  --max-width-modal-pricing: 64rem;
  /* 1024px - Pricing modal */
  --max-width-action-button: 21.875rem;
  /* 350px - Action button */
  --max-width-experience-card: 18.75rem;
  /* 300px - Experience cards */
  --max-width-skeleton-form: 37.5rem;
  /* 600px - Skeleton forms */
  --max-width-form-container: 31.25rem;
  /* 500px - Form containers */
  --max-width-hero-image: 23.75rem;
  /* 380px - Hero image container */
  --max-width-hero-image-mobile: 17.5rem;
  /* 280px - Hero image on mobile */
  --max-width-blog-excerpt: 28.125rem;
  /* 450px (45ch approx) - Blog excerpts */
  --max-width-sidebar-about: 62.5rem;
  /* 1000px - Sidebar about */
  --max-height-modal: 90dvh;

  /* Component Specifics */
  --badge-padding-x: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
  --chip-padding-x: clamp(0.625rem, 0.5rem + 0.5vw, 0.75rem);

  /* Carrossel */
  --carousel-gap: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --carousel-slide-width: 50%;
  --carousel-slide-min-width: clamp(15rem, 70vw, 17.5rem);
  --carousel-icon-size: clamp(2.5rem, 2rem + 1.5vw, 3rem);
  --carousel-padding: var(--space-xl);
  --carousel-border-radius: var(--md-sys-shape-corner-medium);

  /* =================================
       NEGATIVE OFFSET TOKENS
       ================================= */

  --space-offset-xs: calc(var(--space-xs)*-1);
  --space-offset-s: calc(var(--space-s)*-1);
  --space-offset-m: calc(var(--space-m)*-1);
  --space-offset-l: calc(var(--space-l)*-1);

  /* =================================
       SEMANTIC ALIASES - STACK
       [AI-HINT: VERTICAL TYPOGRAPHY SPACING]
       Espaçamento vertical entre elementos de texto.
       ================================= */

  /* Legendas, metadados */
  --space-stack-micro: var(--space-2xs);

  /* Labels, textos de apoio */
  --space-stack-xxs: var(--space-xs);

  /* Títulos para subtítulos */
  --space-stack-tight: var(--space-s);

  /* Parágrafos, listas */
  --space-stack-normal: var(--space-m);

  /* Entre blocos de conteúdo relacionados */
  --space-stack-loose: var(--space-l);

  /* Cabeçalhos de secção */
  --space-stack-xl: var(--space-xl);

  /* =================================
       SEMANTIC ALIASES - INSET
       [AI-HINT: PADDING / CONTAINERS]
       Padding interno de componentes.
       ================================= */

  /* Paddings pequenos (ex: tags, botões compactos) */
  --space-inset-xs: var(--space-xs);

  /* Padding padrão de pequenos componentes */
  --space-inset-sm: var(--space-s);

  /* [AI-HINT: CARD PADDING] Padding interno de Cards e Modais */
  --space-inset-card: var(--space-l);

  /* Padding interno de Secções */
  --space-inset-section: var(--space-xl);

  /* Margem lateral da página (containers principais) */
  --space-inset-screen: var(--space-m);

  /* =================================
       PAIR TOKENS (Asymmetric Insets)
       [AI-HINT: ASYMMETRIC PADDING]
       Para componentes com padding diferente horizontal/vertical.
       ================================= */

  /* Card - mais espaço horizontal */
  --space-inset-card-inline: var(--space-l);
  --space-inset-card-block: var(--space-m);

  /* Button - padding assimétrico típico */
  --space-inset-button-inline: var(--space-m);
  --space-inset-button-block: var(--space-s);

  /* Input fields */
  --space-inset-input-inline: var(--space-s);
  --space-inset-input-block: var(--space-s);

  /* =================================
       SEMANTIC ALIASES - GAP
       [AI-HINT: GRID / FLEX GAPS]
       Espaçamento entre elementos em layouts.
       ================================= */

  /* Ícones com texto */
  --space-gap-micro: var(--space-3xs);

  /* Entre ícone e label em botões */
  --space-gap-icon: var(--space-xs);

  /* Ações agrupadas (ex: botões lado a lado) */
  --space-gap-action: var(--space-s);

  /* Grelhas de conteúdo densas */
  --space-gap-content: var(--space-m);

  /* Grelhas de layout principais */
  --space-gap-layout: var(--space-l);

  /* Secções principais */
  --space-gap-section: var(--space-xl);

  /* =================================
       COMPONENT-SPECIFIC
       [AI-HINT: READY-TO-USE COMPONENT TOKENS]
       Tokens prontos para componentes específicos.
       ================================= */

  /* Hero section spacing */
  --space-hero-padding: var(--space-2xl);
  --space-hero-gap: var(--space-xl);

  /* Navigation */
  --space-nav-item-gap: var(--space-m);
  --space-nav-padding: var(--space-s);

  /* Modal */
  --space-modal-padding: var(--space-l);
  --space-modal-gap: var(--space-m);

  /* Footer */
  --space-footer-padding: var(--space-xl);
  --space-footer-gap: var(--space-l);

  /* Dialog close button (WCAG 2.5.5 compliance: 44px minimum) */
  --space-dialog-close-size: 2.75rem;
  --space-dialog-close-position: var(--space-l);

  /* Badge small padding */
  --space-badge-padding-xs: var(--space-2xs) var(--space-xs);

  /* =================================
       FOCUS RING WIDTHS
       [AI-HINT: WCAG COMPLIANCE]
       Larguras de anel de foco para acessibilidade.
       ================================= */

  --ring-width-sm: 0.125rem;
  --ring-width-md: 0.1875rem;

  /* =================================
       COMPONENT HEIGHTS (4px grid)
       [AI-HINT: STANDARDIZED HEIGHTS]
       Alturas fluidas para componentes interativos.
       Usadas em botões, inputs, FAQs, etc.
       ================================= */

  /* XS: 32px → 36px (compact buttons, chips) */
  --height-component-xs: clamp(2rem, 1.9rem + 0.5vw, 2.25rem);

  /* SM: 40px → 44px (small buttons) */
  --height-component-sm: clamp(2.5rem, 2.4rem + 0.5vw, 2.75rem);

  /* MD: 44px → 48px (medium buttons, touch targets) */
  --height-component-md: clamp(2.75rem, 2.65rem + 0.5vw, 3rem);
  --height-component-touch: var(--height-component-md);

  /* LG: 48px → 52px (large buttons, carousel controls) */
  --height-component-lg: clamp(3rem, 2.85rem + 0.75vw, 3.25rem);

  /* XL: 52px → 56px (extra-large buttons, hero CTAs) */
  --height-component-xl: clamp(3.25rem, 3.1rem + 0.75vw, 3.5rem);

  /* 2XL: 48px → 56px (FAQ questions, special elements) */
  --height-component-2xl: clamp(3rem, 2.7rem + 1.5vw, 3.5rem);

  /* =================================
       RESPONSIVE SIZES (Icons & Spacing)
       Converted to REM (1rem = 16px)
       ================================= */
  --size-responsive-md: clamp(1.125rem, 5vw, 1.375rem);
  --size-responsive-lg: clamp(1.25rem, 6vw, 1.5rem);

  /* Smaller sizes */
  --size-responsive-xs: clamp(0.75rem, 3vw, 0.875rem);
  --size-responsive-2xs: clamp(0.625rem, 3vw, 0.75rem);
  --size-responsive-sm: clamp(1rem, 5vw, 1.25rem);
  --size-responsive-s: clamp(0.75rem, 4vw, 1rem);
  /* =================================
       FONT FAMILIES
       ================================= */
  --font-family-primary:
    'Google Sans Flex', 'Google Sans', 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI',
    roboto, sans-serif;
  --font-family-secondary: 'Google Sans Flex', 'Google Sans', 'Inter', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', consolas, monospace;
  --font-family-serif: 'Source Serif 4', georgia, serif;

  /* Aliases Legacy */
  --md-ref-typeface-brand: var(--font-family-primary);
  --md-ref-typeface-plain: var(--font-family-primary);

  /* =================================
       FONT WEIGHTS
       ================================= */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Aliases Legacy */
  --font-light: var(--font-weight-light);
  --font-normal: var(--font-weight-normal);
  --font-medium: var(--font-weight-medium);
  --font-semibold: var(--font-weight-semibold);
  --font-bold: var(--font-weight-bold);

  /* =================================
       LINE HEIGHTS
       [AI-HINT: VERTICAL RHYTHM]
       ================================= */
  --line-height-tight: 1.2;

  /* Para Títulos (Spec: 1.1-1.2) */
  --line-height-snug: 1.35;
  --line-height-normal: 1.55;

  /* Para Body (Spec: 1.5-1.6) */
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;

  /* Aliases Legacy */
  --leading-tight: var(--line-height-tight);
  --leading-snug: var(--line-height-snug);
  --leading-normal: var(--line-height-normal);
  --leading-relaxed: var(--line-height-relaxed);

  /* Additional Line Heights */
  --leading-none: normal;
  --line-height-heading: var(--line-height-tight);
  --leading-custom: var(--leading-normal);
  --leading-wider: 2.2;

  /* =================================
       LETTER SPACING
       ================================= */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* =================================
       ICON SIZES (Converted to REM)
       Base: 16px = 1rem
       ================================= */
  --icon-size-xs: 1rem; /* 16px */
  --icon-size-sm: 1.25rem; /* 20px */
  --icon-size-md: 1.5rem; /* 24px */
  --icon-size-lg: 1.75rem; /* 28px */
  --icon-size-xl: 2rem; /* 32px */
  --icon-size-2xl: 3rem; /* 48px */

  /* =================================
       FLUID TYPE SCALE (clamp)
       ================================= */

  /* Display Scale */
  --font-size-display-large: clamp(2.85rem, 2.6rem + 1.07vw, 3.5625rem);
  --font-size-display-medium: clamp(2.25rem, 2.05rem + 0.84vw, 2.8125rem);
  --font-size-display-small: clamp(1.8rem, 1.64rem + 0.67vw, 2.25rem);

  /* Headline Scale */
  --font-size-headline-large: clamp(1.6rem, 1.46rem + 0.6vw, 2rem);
  --font-size-headline-medium: clamp(1.4rem, 1.28rem + 0.52vw, 1.75rem);
  --font-size-headline-small: clamp(1.2rem, 1.09rem + 0.45vw, 1.5rem);

  /* Title Scale */
  --font-size-title-large: clamp(1.1rem, 1rem + 0.41vw, 1.375rem);
  --font-size-title-medium: clamp(1rem, 0.91rem + 0.37vw, 1.25rem);
  --font-size-title-small: clamp(0.8rem, 0.73rem + 0.3vw, 1rem);

  /* Body Scale */
  --font-size-body-large: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-body-medium: clamp(0.8rem, 0.73rem + 0.3vw, 1rem);
  --font-size-body-small: clamp(0.7rem, 0.635rem + 0.26vw, 0.875rem);

  /* Label Scale — minimums >= 12px para legibilidade mobile */
  --font-size-label-large: clamp(0.8rem, 0.73rem + 0.3vw, 1rem);
  --font-size-label-medium: clamp(0.8125rem, 0.735rem + 0.3vw, 0.875rem);
  --font-size-label-small: clamp(0.75rem, 0.68rem + 0.28vw, 0.8125rem);

  /* =================================
       ALIASES & COMPATIBILITY
       ================================= */

  /* Generic Size Labels (Mapped to Fluid Scale) */
  --text-6xl: var(--font-size-display-large);
  --text-5xl: var(--font-size-display-medium);
  --text-4xl: var(--font-size-display-small);
  --text-3xl: var(--font-size-headline-large);
  --text-2xl: var(--font-size-headline-medium);
  --text-xl: var(--font-size-headline-small);
  --text-lg: var(--font-size-title-large);
  --text-base: var(--font-size-body-large);
  --text-sm: var(--font-size-body-medium);
  --text-xs: var(--font-size-body-small);
  --text-2xs: var(--font-size-label-small);

  /* MD3 Aliases (Compatibility) */
  --md-sys-typescale-display-large-font-size: var(--font-size-display-large);
  --md-sys-typescale-display-medium-font-size: var(--font-size-display-medium);
  --md-sys-typescale-display-small-font-size: var(--font-size-display-small);
  --md-sys-typescale-headline-large-font-size: var(--font-size-headline-large);
  --md-sys-typescale-headline-medium-font-size: var(--font-size-headline-medium);
  --md-sys-typescale-headline-small-font-size: var(--font-size-headline-small);
  --md-sys-typescale-title-large-font-size: var(--font-size-title-large);
  --md-sys-typescale-title-medium-font-size: var(--font-size-title-medium);
  --md-sys-typescale-title-small-font-size: var(--font-size-title-small);
  --md-sys-typescale-body-large-font-size: var(--font-size-body-large);
  --md-sys-typescale-body-medium-font-size: var(--font-size-body-medium);
  --md-sys-typescale-body-small-font-size: var(--font-size-body-small);
  --md-sys-typescale-label-large-font-size: var(--font-size-label-large);
  --md-sys-typescale-label-medium-font-size: var(--font-size-label-medium);
  --md-sys-typescale-label-small-font-size: var(--font-size-label-small);

  /* Semantic Usage */
  --title-font-size-1: var(--font-size-display-small);
  --title-font-size-2: var(--font-size-headline-large);
  --title-font-size-3: var(--font-size-headline-medium);
  --title-font-size-4: var(--font-size-headline-small);
  --title-line-height: var(--line-height-tight);
  --subtitle-font-size: var(--font-size-title-large);
  --subtitle-line-height: var(--line-height-relaxed);

  /* Component-specific */
  --text-hero: var(--text-4xl);
  --text-section-title: var(--text-3xl);
  --text-card-title: var(--text-xl);
  --text-body-paragraph: var(--text-base);
  --text-caption: var(--text-sm);
  --text-micro: var(--text-xs);
  /* ============================================
       SIMPLIFIED PREMIUM MOTION SYSTEM (V14+)
       Sistema simplificado para máxima fluidez
       ============================================ */

  /* 1. DURAÇÕES SEMÂNTICAS */
  --duration-fast: 150ms; /* Micro-interações, hover, feedback */
  --duration-smooth: 350ms; /* Cards, dropdowns, transformações padrão */
  --duration-normal: 250ms; /* Transições padrão MD3 medium */
  --duration-elegant: 600ms; /* Modais, sidebars, hero sections, entradas */

  /* 2. EASINGS PREMIUM */
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* Standard MD3 - Eficiente */
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1); /* Quint-like - Natural e suave */
  --ease-ethereal: cubic-bezier(0.19, 1, 0.22, 1); /* Expo - Luxo e elegância */

  /* 3. TRANSITIONS PRONTAS A USAR - aliases em _variables-states.css usam --transition-fast/default/slow */

  /* ============================================
       MATERIAL DESIGN 3 - EXPRESSIVE MOTION SYSTEM
       Consolidação de _variables-motion.css + _variables-motion-md3.css
       Baseado em: m3.material.io/styles/motion
       ============================================= */

  /* SHORT - Pequenas animações (tooltips, chips, hover states) */
  --md-sys-motion-duration-short: 50ms;

  /* Legado compatibilidade */
  --md-sys-motion-duration-short1: 50ms;

  /* Micro-interações */
  --md-sys-motion-duration-short2: 100ms;

  /* Feedback rápido */
  --md-sys-motion-duration-short3: 150ms;

  /* Transições subtis */
  --md-sys-motion-duration-short4: 200ms;

  /* Animações rápidas */

  /* MEDIUM - Transições comuns (cards, botões, navegação) */
  --md-sys-motion-duration-medium: 250ms;

  /* Legado compatibilidade */
  --md-sys-motion-duration-medium1: 250ms;

  /* Padrão MD3 */
  --md-sys-motion-duration-medium2: 300ms;

  /* Transições normais */
  --md-sys-motion-duration-medium3: 350ms;

  /* Animações moderadas */
  --md-sys-motion-duration-medium4: 400ms;

  /* Transições longas */

  /* LONG - Animações enfáticas (modais, hero, carrosséis) */
  --md-sys-motion-duration-long: 400ms;

  /* Legado compatibilidade */
  --md-sys-motion-duration-long1: 450ms;

  /* Entra em cena */
  --md-sys-motion-duration-long2: 500ms;

  /* Animações expressivas */
  --md-sys-motion-duration-long3: 550ms;

  /* Movimentos dramáticos */
  --md-sys-motion-duration-long4: 600ms;

  /* Transições hero */

  /* EXTRA LONG - Transições especiais (loading, page transitions) */
  --md-sys-motion-duration-extra-long1: 700ms;

  /* Carregamentos curtos */
  --md-sys-motion-duration-extra-long2: 800ms;

  /* Page transitions */
  --md-sys-motion-duration-extra-long3: 900ms;

  /* Animações especiais */
  --md-sys-motion-duration-extra-long4: 1000ms;

  /* Transições épicas */

  /* ============================================
       CURVAS DE EASING MD3
       Sistema completo de curvas expressivas
       ============================================ */

  /* STANDARD - Mudanças sutis e diretas */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-decelerated: var(--md-sys-motion-easing-standard-decelerate);

  /* EMPHASIZED - Movimentos expressivos (recomendado MD3) */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* LEGACY - Compatibilidade com Material Design 2 */
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* LINEAR - Para progress indicators e carregamentos */
  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);

  /* ============================================
       ALIASES CONTEXTUAIS - FACILITAM DESENVOLVIMENTO
       ============================================ */

  /* Transições comuns (baseadas em V14 Premium Fluidity) */
  --transition-fast: var(--duration-fast) var(--ease-snappy);
  --transition-default: var(--duration-smooth) var(--ease-fluid);
  --transition-slow: var(--duration-elegant) var(--ease-ethereal);

  /* Transições específicas por tipo de propriedade */
  /* box-shadow removido de --transition-colors por ser paint-heavy em mobile GPUs */
  --transition-colors:
    background-color var(--duration-smooth) var(--ease-fluid),
    color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid);
  --transition-transform: transform var(--transition-default);
  --transition-elevation: box-shadow var(--transition-fast);
  --transition-opacity: opacity var(--transition-default);

  /* Transições compostas (para componentes complexos) */
  --transition-colors-simple:
    color var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid);

  /* ============================================
       ALIASES LEGADOS - COMPATIBILIDADE
       Manidos para não quebrar código existente
       ============================================ */

  /* REMOVIDO FASE 3: Aliases legados não usados */

  /* Default Values for Transform Properties */
  --translate-x: 0;
  --translate-y: 0;
  --scale-progress: 1;
  --rotate-progress: 0deg;
  --toggle-scale: 0.9;

  /* Standard shrink */

  /* ============================================
       ATRASOS DE ANIMAÇÃO
       ============================================ */
  --delay-xs: 50ms;
  --delay-sm: 100ms;
  --delay-md: 200ms;
  --delay-lg: 300ms;
  --delay-xl: 500ms;
  --delay-2xl: 700ms; /* Para separar secções com mais espaço */

  /* ============================================
       MOBILE-FIRST RESPONSIVE
       ============================================ */

  /* REMOVIDO FASE 3: Aliases mobile não usados */

  /* ============================================
       TRANSFORM SYSTEM - Padronização de Movimentos
       ============================================ */

  /* Micro-interactions (hover, active, touch) */
  --translate-y-none: 0;
  --translate-y-micro: -0.0625rem;

  /* Feedback muito sutil */
  --translate-y-small: -0.125rem;

  /* Hover padrão para botões */
  --translate-y-medium: -0.25rem;

  /* Hover para cards/elementos médios */
  --translate-y-large: -0.5rem;

  /* Hover para elementos importantes */
  --translate-y-xlarge: -0.75rem;

  /* Hover para elementos hero */

  /* Animações de entrada/saída (slide in/out) */
  --translate-y-reveal-small: 1.25rem;

  /* Elementos sutis */
  --translate-y-reveal-medium: 1.875rem;

  /* Padrão para maioria dos elementos */
  --translate-y-reveal-large: 3.125rem;

  /* Hero sections, elementos dramáticos */

  /* Centering e posicionamento */
  --translate-y-center: -50%;

  /* Para elementos de altura variável */

  /* Mobile-specific */
  --translate-y-touch: -0.125rem;

  /* Feedback tátil otimizado para mobile */

  /* Valores legados (para compatibilidade) */
  --ty-hover-default: var(--translate-y-small);
  --ty-hover-card: var(--translate-y-medium);
  --ty-hover-hero: var(--translate-y-large);

  /* Interactive Scales */
  --scale-active-sm: scale(0.97);
  --scale-active-md: scale(0.98);
  --scale-active-lg: scale(0.99);
  --transform-reset: translateY(0) translateZ(0);
  --transform-reset-scale: translateY(0) scale(1) translateZ(0);
  --transform-reset-center: translate(-50%, -50%) scale(1) translateZ(0);

  /* Common Transform States (Deduplication) */
  --transform-reveal-start: translateY(30px) scale(0.98);
  --transform-hover-lift-sm: translateY(-3px) scale(1.1);

  /* Transições e easings customizados do sidebar (migrados do _sidebar.css) */

  /* Durações customizadas */
  --transition-fast-custom: 150ms;
  --transition-normal-custom: 300ms;
  --transition-slow-custom: 500ms;

  /* Easings customizados */
  --easing-standard-custom: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate-custom: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate-custom: cubic-bezier(0.4, 0, 1, 1);

  /* Easings especializados */
  --easing-smooth-in-custom: cubic-bezier(0.32, 0, 0.67, 0);
  --easing-smooth-out-custom: cubic-bezier(0.33, 1, 0.68, 1);
  --easing-bounce-custom: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --easing-sharp-custom: cubic-bezier(0.4, 0, 0.6, 1);
  --easing-natural-custom: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Aliases para compatibilidade com variáveis antigas do sidebar */
  --easing-standard: var(--easing-standard-custom);
  --easing-decelerate: var(--easing-decelerate-custom);
  --easing-accelerate: var(--easing-accelerate-custom);
  --easing-smooth-in: var(--easing-smooth-in-custom);
  --easing-smooth-out: var(--easing-smooth-out-custom);
  --easing-bounce: var(--easing-bounce-custom);
  --easing-sharp: var(--easing-sharp-custom);
  --easing-natural: var(--easing-natural-custom);

  /* ============================================
       PREMIUM FLUIDITY (Easings.net inspired)
       Para "Fluididade Incrível"
       ============================================ */

  /* Power Curves (Mapeadas para o novo sistema) */
  --ease-out-quint: var(--ease-fluid);
  --ease-out-expo: var(--ease-ethereal);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);

  /* Sine/Quad (Para movimentos constantes e subtis) */
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Back (Para entradas com "charme" / pop-in) */
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Cubic */
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

  /* ============================================
       ULTRA-FLUID ALIASES
       Criação de tokens prontos a usar
       ============================================ */
  --transition-ultra-smooth:
    transform var(--duration-elegant) var(--ease-ethereal),
    opacity var(--duration-elegant) var(--ease-ethereal);
  --transition-premium-bounce: transform var(--duration-smooth) var(--ease-out-back);
  --transition-subtle-smooth:
    transform var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-smooth) var(--ease-fluid);

  /* Variáveis para Transform + Opacity (Performance) */
  --transition-premium-transform:
    transform var(--duration-elegant) var(--ease-ethereal),
    opacity var(--duration-smooth) var(--ease-fluid),
    filter var(--duration-smooth) var(--ease-fluid);

  /* Generic All Transition (Deduplication) */
  --transition-all-generic:
    transform var(--duration-smooth) ease-in-out, opacity var(--duration-smooth) ease-in-out,
    filter var(--duration-smooth) ease-in-out;

  /* Custom "Pop" easing for modals - Snappy and fluid */
  --anim-pop: var(--ease-ethereal);
  /* ✅ Formas MD3 com clamp() - Responsivas e Expressivas */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: clamp(0.1875rem, 0.25rem, 0.25rem);
  --md-sys-shape-corner-small: clamp(0.375rem, 0.5rem + 0.15vw, 0.5rem);
  --md-sys-shape-corner-medium: clamp(0.5rem, 0.65rem + 0.25vw, 0.75rem);
  --md-sys-shape-corner-large: clamp(0.75rem, 0.85rem + 0.5vw, 1rem);
  --md-sys-shape-corner-extra-large: clamp(1.25rem, 1.5rem + 1vw, 1.75rem);
  --md-sys-shape-corner-full: 9999rem;

  /* Bordas MD3 */
  --border-radius-base: var(--md-sys-shape-corner-medium);

  /* Bordas - Larguras padrão */
  --border-width: 1px;
  --outline-width: 2px;
  --outline-width-thick: 3px;
  /*
   * Z-INDEX SCALE - ESCALA UNIFICADA (AUDITED 2026)
   * Standardized leveling for stacking contexts.
   *
   * Hierarquia (do menor para o maior):
   * 1. Elementos decorativos / Backgrounds (Nível negativo ou 0)
   * 2. Conteúdo normal (Texto, Cards, Inputs)
   * 3. FABs Base (Back to Top)
   * 4. Sticky Elements / Navbar
   * 5. Sidebars / Drawers
   * 6. Chat Widget
   * 7. Modais (Backdrops e Content)
   * 8. Tooltips / Popovers
   * 9. Toasts / Notificações (Sempre no topo)
   * 10. Loading Screens / Critical Overlays
   */

  /* ===== LEVEL 1: DECORATIVE / BASE (-100 to 0) ===== */
  --z-negative: -100;
  --z-base: 0;

  /* ===== LEVEL 2: NORMAL CONTENT (1-99) ===== */
  --z-content: 10;
  --z-elevated: 20;
  --z-above-content: 50;

  /* ===== LEVEL 3: FABs & STICKY (100-299) ===== */
  --z-fab: 100;

  /* Back to top */
  --z-sticky: 200;

  /* Headers fixos */
  --z-fixed: 250; /* Navbar - Below drawers (400), above content */

  /* ===== LEVEL 4: DRAWERS & MENUS (300-499) ===== */
  --z-drawer: 400; /* Sidebars - Above Navbar */
  --z-drawer-supreme: 450; /* Menus mobile complexos */

  /* ===== LEVEL 5: RESERVED (500-599) ===== */

  /* ===== LEVEL 6: DROPDOWNS & LOCAL OVERLAYS (800-899) ===== */
  --z-dropdown: 800; /* Selects customizados */

  /* ===== LEVEL 7: MODALS & CHAT (1000-1999) ===== */
  --z-modal-backdrop: 1100; /* Backdrop layer */
  --z-chat: 1150; /* Chat Widget - Above Backdrop, below Modal Content */
  --z-modal: 1200; /* Standard Dialogs Content */
  --z-notification: 1600; /* Cookie Consent Banner - Below modals, above toasts */
  --z-modal-supreme: 1500; /* Fullscreen Modals / Critical Alerts */

  /* ===== LEVEL 8: TOASTS (2000-2999) ===== */
  --z-toast: 2000; /* Notifications */

  /* ===== LEVEL 9: MAX (9000+) ===== */
  --z-popover: 9000; /* Tooltips que devem furar tudo */
  --z-max: 9999; /* Loading Screens, Cursor Custom */
  /* Botões MD3 */
  --button-padding-y-small: var(--space-s);
  --button-padding-y-medium: 0.75rem;

  /* 12px - Multiple of 4px */
  --button-padding-y-large: var(--space-m);
  --button-padding-x-small: 0.75rem;

  /* 12px - Multiple of 4px */
  --button-padding-x-medium: 1.5rem;

  /* 24px - Multiple of 4px */
  --button-padding-x-large: 2rem;

  /* 32px - Multiple of 4px */
  --button-font-size-small: var(--font-size-label-medium);

  /* Fluid 11.2px -> 14px */
  --button-font-size-medium: var(--font-size-label-large);

  /* Fluid 12.8px -> 16px */
  --button-font-size-large: var(--font-size-body-large);

  /* Fluid 14.4px -> 18px */
  --button-icon-size-small: 1.2rem;
  --button-icon-size-medium: 1.5rem;
  --button-icon-size-large: 1.8rem;
  --button-border-radius: var(--md-sys-shape-corner-full);
  --button-elevation: var(--md-sys-elevation-level1);
  --button-elevation-hover: var(--md-sys-elevation-level3);

  /* Botões Extra Large */
  --button-padding-y-xlarge: calc(var(--button-padding-y-large) + 0.4rem);
  --button-padding-x-xlarge: calc(var(--button-padding-x-large) + 0.6rem);

  /* Alturas de Componentes MD3 */
  --component-height-small: var(--height-component-xs);

  /* Fluid 32px -> 36px */
  --component-height-medium: var(--height-component-md);

  /* Fluid 44px -> 48px (Touch Target) */
  --component-height-large: var(--height-component-lg);

  /* Fluid 48px -> 52px */

  /* Tamanhos de Componentes */
  --size-component-sm: var(--height-component-xs);
  --size-component-md: var(--height-component-md);
  --size-component-lg: var(--height-component-lg);

  /* Opacidades MD3 - definidos em _variables-states.css para manter single source of truth */

  /* Global Overlay Glass Effect */

  /* --vm-glass-blur removed in favor of --glass-blur-default */

  /* --vm-glass-bg moved to _variables-color.css */

  /* [AI-HINT: GLASSMORPHISM SYSTEM]
       Variáveis para efeito de vidro fosco (glassmorphism).
       Use estas variáveis para manter consistência visual em componentes translúcidos. */

  /* Blur intensity - CONSOLIDADO */
  --glass-blur-default: 12px;

  /* Standard (matches previous --space-s usage) */
  --glass-blur-strong: 30px;

  /* Alias para compatibilidade */
  --glass-blur: var(--glass-blur-default);
  --glass-blur-light: 8px;
  --glass-blur-heavy: var(--glass-blur-strong);

  /* Background opacity (Light Theme) */
  --glass-bg-opacity: 0.7;
  --glass-border-opacity: 0.18;

  /* --glass-bg-light moved to _variables-color.css */

  /* Background opacity (Dark Theme) - defined in html.dark-theme */
  --glass-bg-opacity-dark: 0.7;

  /* Border colors */

  /* --glass-borders moved to _variables-color.css */

  /* Gradient accent for dark theme (optional glow) */

  /* --glass-gradient-accent moved to _variables-color.css */

  /* Mapping legacy variables to new system for backward compatibility */

  /* --overlay-blur removed - unused */

  /* --overlay-bg removed - unused */
  --overlay-saturate: 100%;

  /* Visual Effects - Depth & Highlights (Colors moved to _variables-color.css) */

  /* --effect-highlight-top moved to _variables-color.css */

  /* --effect-highlight-top-dark moved to _variables-color.css */

  /* [AI-HINT] Mobile Menu Colors moved to _variables-color.css */

  /* Breakpoints - Mobile First Responsive System */
  /* Breakpoints - Mobile First Responsive System (Aliased to _variables-breakpoints.css) */
  --breakpoint-xs: var(--bp-xs);
  --breakpoint-sm: var(--bp-sm);
  --breakpoint-md: 576px;
  /* Mantido para phablets específicos se necessário, mas usar --bp-md para Tablet */
  --breakpoint-mobile-max: var(--bp-md);
  --breakpoint-lg: var(--bp-md);
  --breakpoint-xl: var(--bp-lg);
  --breakpoint-2xl: var(--bp-lg);
  --breakpoint-desktop: var(--bp-xl);

  /* Above standard desktop */

  /* ===================================
      SCROLLBAR VARIÁVEIS
      =================================== */
  --scrollbar-width: 10px;
  --scrollbar-width-track: 12px;
  --scrollbar-height: 10px;

  /* ===================================
      PROGRESS BAR VARIÁVEIS
      =================================== */
  --progress-height-thin: 2px;
  --progress-height-medium: 3px;
  --progress-height-thick: 4px;

  /* ===================================
      TOUCH TARGET VARIÁVEIS (WCAG 2.5.5)
      =================================== */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;

  /* Índices Z - CONSOLIDADO em _variables-zindex.css */

  /* Usar: --z-negative, --z-base, --z-content, --z-elevated, --z-sticky,
              --z-dropdown, --z-overlay, --z-fab, --z-drawer, --z-modal-backdrop,
              --z-modal, --z-popover, --z-toast, --z-notification, --z-modal-supreme, --z-max */

  /* Gaps entre botões em containers */
  --container-button-gap: var(--space-l);

  /* 24px - Padrão */
  --container-button-gap-compact: var(--space-m);

  /* 16px - Compacto */
  --container-button-gap-mobile: var(--space-m);

  /* 16px - Mobile */

  /* Margens externas padrão para containers de botões */
  --container-button-margin-top: var(--space-xl);

  /* 32px */
  --container-button-margin-top-compact: var(--space-l);

  /* 24px */

  /* Larguras mínimas/máximas */
  --container-button-min-width: 17.5rem;
  --container-button-max-width: 22.5rem;

  /* Breakpoints específicos para containers */
  --container-mobile-breakpoint: 768px;
  --container-tablet-breakpoint: 768px;
  /* =======================================================================
      1. ALIASES DE BOTÕES (compatibilidade com código existente)
      ======================================================================= */

  /* Padding aliases (mapear --btn-* para --button-*) */
  --btn-padding-y: var(--button-padding-y-medium);
  --btn-padding-x: var(--button-padding-x-medium);

  /* Dimensões mínimas de botão (WCAG touch targets) */
  --btn-min-width: var(--touch-target-min);
  --btn-min-height: var(--touch-target-min);

  /* Border radius de botão */
  --btn-radius: var(--button-border-radius);

  /* Estados de botão - Cores */
  --btn-color-active: var(--md-sys-color-on-primary);
  --btn-bg-active: var(--md-sys-color-primary);

  /* Estados expandido (ex: accordion, dropdown) */
  --btn-color-expanded: var(--md-sys-color-on-surface);
  --btn-bg-expanded: var(--md-sys-color-surface-container);

  /* Overlay scale para animações de botão */
  --btn-overlay-scale-start: 1;

  /* =======================================================================
      2. VARIÁVEIS DE TOGGLE (switch/checkbox)
      ======================================================================= */
  --toggle-color: var(--md-sys-color-on-surface);
  --toggle-bg: var(--md-sys-color-surface-container-high);
  --toggle-border: var(--md-sys-color-outline);

  /* =======================================================================
      3. VARIÁVEIS DE CHAT E FAB
      ======================================================================= */
  --chat-fab-color: var(--md-sys-color-primary);
  --chat-fab-bg: var(--md-sys-color-primary-container);
  --chat-send-color: var(--md-sys-color-on-primary);
  --chat-send-bg: var(--md-sys-color-primary);
  --header-btn-color: var(--md-sys-color-on-surface-variant);

  /* =======================================================================
      4. VARIÁVEIS DE CARD
      ======================================================================= */
  --card-color: var(--md-sys-color-on-surface);
  --card-bg: var(--md-sys-color-surface-container-low);
  --card-border: var(--md-sys-color-outline-variant);
  --card-hover-color: var(--md-sys-color-on-surface);
  --card-hover-bg: var(--md-sys-color-surface-container);
  --card-hover-border: var(--md-sys-color-outline);
  --card-expanded-bg: var(--md-sys-color-surface-container-high);
  --card-expanded-border: var(--md-sys-color-outline);
  --card-icon-color: var(--md-sys-color-primary);
  --card-icon-bg: var(--md-sys-color-primary-container);
  --card-icon-hover-color: var(--md-sys-color-on-primary-container);
  --card-icon-hover-bg: var(--md-sys-color-primary-container);

  /* =======================================================================
      5. BLUR VARIÁVEIS (glassmorphism)
      ======================================================================= */
  --blur-m: var(--glass-blur-default);
  /* 12px */
  --blur-lg: var(--glass-blur-strong);
  /* 30px */

  /* =======================================================================
      6. COMPONENT HEIGHT (aliases)
      ======================================================================= */
  --component-height-sm: var(--component-height-small);
  --component-height-md: var(--component-height-medium);
  --component-height-lg: var(--component-height-large);
  --component-height-xl: calc(var(--component-height-large) + var(--space-s));
  /* ~56px */

  /* =======================================================================
      7. TIPOGRAFIA (aliases e valores em falta)
      ======================================================================= */
  --text-label-sm: var(--font-size-label-small);

  /* MD3 Typescale aliases (shorter names) */
  --md-sys-typescale-title-large-size: var(--md-sys-typescale-title-large-font-size);
  --md-sys-typescale-title-large-weight: var(--font-weight-semibold);
  --md-sys-typescale-body-medium-size: var(--md-sys-typescale-body-medium-font-size);
  --md-sys-typescale-label-large-size: var(--md-sys-typescale-label-large-font-size);
  --md-sys-typescale-label-large-weight: var(--font-weight-medium);
  --md-sys-typescale-title-small-size: var(--md-sys-typescale-title-small-font-size);
  --md-sys-typescale-title-small-weight: var(--font-weight-semibold);
  --md-sys-typescale-body-large-font: var(--font-family-primary);
  --md-sys-typescale-title-small-font: var(--font-family-primary);

  /* Font family aliases */
  --font-family: var(--font-family-primary);
  --font-family-base: var(--font-family-primary);
  --font-family-body: var(--font-family-primary);
  --font-family-display: var(--font-family-secondary);
  --font-primary: var(--font-family-primary);
  --font-secondary: var(--font-family-primary);
  --font-main: var(--font-family-primary);
  --font-display: var(--font-family-secondary);
  --font-black: 900;

  /* Line height */
  --line-height-base: 1.5;

  /* =======================================================================
      8. CORES RGB (para uso com rgba())
      ======================================================================= */

  /* Brand colors RGB */
  --brand-primary-blue-rgb: 0, 90, 153;
  /* #005a99 */
  --brand-primary-gold-rgb: 234, 179, 8;
  /* #eab308 */
  --brand-tertiary-green-rgb: 0, 108, 76;
  /* #006c4c */
  --brand-warning-orange-rgb: 255, 152, 0;
  /* #ff9800 */
  --brand-success-green-container: oklch(95% 0.1 154.6deg);

  /* MD3 Semantic Colors RGB */
  --md-sys-color-primary-rgb: var(--brand-primary-blue-rgb);
  --md-sys-color-secondary-rgb: 80, 96, 110;
  /* brand-secondary-gray */
  --md-sys-color-tertiary-rgb: var(--brand-tertiary-green-rgb);
  --md-sys-color-surface-rgb: 248, 250, 253;
  /* brand-neutral-50 */

  /* =======================================================================
      9. ESTADOS DE INTERAÇÃO
      ======================================================================= */
  --md-sys-state-hover-state-layer-opacity: var(--state-hover-opacity);
  --md-sys-state-focus-state-layer-opacity: var(--state-focus-opacity);
  --md-sys-state-pressed-state-layer-opacity: var(--state-pressed-opacity);
  --state-hover-on-surface-variant: oklch(0% 0 0deg / var(--state-hover-opacity));
  --state-hover-success: oklch(66.5% 0.195 154.6deg / var(--state-hover-opacity));

  /* White alpha */
  --white-alpha-25: oklch(100% 0 0deg / 25%);

  /* =======================================================================
      10. SOMBRAS E ELEVAÇÕES
      ======================================================================= */
  --shadow-elevation-1: 0 1px 2px 0 oklch(0% 0 0deg / 10%);
  --shadow-elevation-2: 0 4px 6px -1px oklch(0% 0 0deg / 10%);
  --shadow-elevation-3: 0 10px 15px -3px oklch(0% 0 0deg / 10%);
  --shadow-elevation-4: 0 20px 25px -5px oklch(0% 0 0deg / 10%);
  --shadow-elevation-5: 0 25px 50px -12px oklch(0% 0 0deg / 25%);
  --shadow-subtle: var(--shadow-elevation-1);
  --elevation-1: var(--md-sys-elevation-level1);
  --elevation-2: var(--md-sys-elevation-level2);
  --elevation-3: 0 8px 12px 0 oklch(0% 0 0deg / 15%);
  --elevation-4: 0 12px 20px 0 oklch(0% 0 0deg / 20%);
  --elevation-5: 0 16px 24px 0 oklch(0% 0 0deg / 25%);

  /* =======================================================================
      11. MOTION / ANIMAÇÃO
      ======================================================================= */
  --md-sys-motion-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-duration-medium: var(--md-sys-motion-duration-medium2);
  --motion-easing-standard: var(--md-sys-motion-easing-standard);

  /* =======================================================================
      12. SPACING (valores em falta)
      ======================================================================= */
  --space-adaptive-stack-xs: var(--space-xs);
  --space-adaptive-gap-xs: var(--space-xs);
  --space-sm: var(--space-s);
  --space-xxs: calc(var(--space-xs)/2);
  /* ~4px */
  --space-4xl: 4rem;
  /* 64px */
  --space-5xl: 5rem;
  /* 80px */

  /* =======================================================================
      13. TEXTO E UTILITÁRIOS
      ======================================================================= */
  --text-clamp-xs: 2;
  --text-underline-offset: 0.2em;

  /* =======================================================================
      14. CORES EXTRAS
      ======================================================================= */
  --md-sys-color-surface-dim: oklch(96% 0.005 230deg);
  --md-sys-color-surface-bright: oklch(100% 0 0deg);
  --md-sys-color-warning: var(--brand-warning-orange);
  --md-sys-color-success: var(--brand-success-green);
  --md-sys-color-primary-hover: oklch(65% 0.17 250deg);

  /* Cores inversas (para dark mode) */
  --md-sys-color-inverse-on-surface: var(--md-sys-color-surface);
  --md-sys-color-inverse-surface: var(--md-sys-color-on-surface);

  /* Cores especiais */
  --brand-pink-rose: oklch(68% 0.2 15deg);
  --brand-pink-rose-container: oklch(95% 0.08 15deg);
  --brand-pink-rose-on-container: oklch(45% 0.22 15deg);

  /* Status colors */
  --status-on-error-container: var(--md-sys-color-on-error-container);

  /* =======================================================================
      15. VARIÁVEIS DE MOUSE (para efeitos de hover/glow)
      ======================================================================= */

  /* Posição do mouse (atualizado via JS para efeitos interativos)
      Valores padrão (50%) centro do elemento */
  --mouse-x: 50%;
  --mouse-y: 50%;

  /* =======================================================================
      16. OUTRAS VARIÁVEIS
      ======================================================================= */

  /* Alturas */
  --height-component-small: var(--component-height-small);
  --height-modal: 80dvh;
  /* Altura máxima do modal */

  /* Larguras */
  --max-width-decorative-border: 1200px;
  --max-width-content-lg: 1024px;
  --max-width-modal-narrow: 480px;

  /* Textarea */
  --textarea-min-height: 120px;

  /* Padrão e decorativo */
  --pattern-color: var(--md-sys-color-outline-variant);

  /* Bordas */
  --border-width-medium: 1.5px;
  --border-width-thick: 2px;

  /* Fontes de peso */
  --font-extrabold: 800;
  /* ============================================
       TRANSLATE - Movimentos Lineares
       ============================================ */

  /* Vertical Translates - Base spacing units */
  --transform-y-none: 0;
  --transform-y-xs: calc(var(--space-xs)*-1);
  --transform-y-s: calc(var(--space-s)*-1);
  --transform-y-m: calc(var(--space-m)*-1);
  --transform-y-l: calc(var(--space-l)*-1);
  --transform-y-xs-pos: var(--space-xs);
  --transform-y-s-pos: var(--space-s);
  --transform-y-m-pos: var(--space-m);
  --transform-y-l-pos: var(--space-l);

  /* Percentage-based Vertical Translates */
  --transform-y-neg-half: -50%;
  --transform-y-pos-half: 50%;

  /* Horizontal Translates - Percentage based */
  --transform-x-none: 0;
  --transform-x-neg-full: -100%;
  --transform-x-pos-full: 100%;
  --transform-x-neg-20: -20%;
  --transform-x-pos-20: 20%;
  --transform-x-neg-half: -50%;
  --transform-x-pos-half: 50%;

  /* ============================================
       SCALE - Escalas
       ============================================ */

  --scale-none: 1;
  --scale-sm: 0.95;
  --scale-md: 0.9;
  --scale-lg: 0.85;
  --scale-xl: 0.8;
  --scale-grow-sm: 1.02;
  --scale-grow-md: 1.05;
  --scale-grow-lg: 1.1;

  /* ============================================
       ROTATE - Rotações (deg)
       ============================================ */

  --rotate-none: 0deg;
  --rotate-45: 45deg;
  --rotate-90: 90deg;
  --rotate-180: 180deg;
  --rotate-neg-45: -45deg;
  --rotate-neg-90: -90deg;
  --rotate-neg-180: -180deg;

  /* ============================================
       COMBINAÇÕES COMUNS
       ============================================ */

  /* Center positioning */
  --transform-center: translate(-50%, -50%);

  /* Center with scale */
  --transform-center-scale-md: translate(-50%, -50%) scale(0.9);
  --transform-center-scale-sm: translate(-50%, -50%) scale(0.95);
  --transform-center-scale-lg: translate(-50%, -50%) scale(0.85);

  /* Hover lift effect */
  --transform-hover-lift: translateY(-2px);
  --transform-hover-lift-md: translateY(-4px);
  --transform-hover-lift-lg: translateY(-8px);

  /* Off-screen positions */
  --transform-offscreen-left: translateX(-100%);
  --transform-offscreen-right: translateX(100%);
  --transform-offscreen-top: translateY(-100%);
  --transform-offscreen-bottom: translateY(100%);

  /* ============================================
       REVEAL TRANSFORMS (Scroll Animations)
       ============================================ */

  --transform-reveal-sm: translateY(var(--space-m));
  --transform-reveal-md: translateY(var(--space-l));
  --transform-reveal-lg: translateY(var(--space-xl));
  /* ============================================
       MATERIAL DESIGN 3 - ELEVATION LEVELS
       Baseado em MD3 elevation system
       ============================================ */

  --elevation-level0: none;
  --elevation-level1: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  --elevation-level2: 0 1px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent),
                     0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  --elevation-level3: 0 4px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent),
                     0 1px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
  --elevation-level4: 0 6px 12px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent),
                     0 2px 4px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  --elevation-level5: 0 8px 16px color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent),
                     0 3px 6px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);

  /* ============================================
       SOMBAS SEMÂNTICAS (Size-based)
       ============================================ */

  /* Extra Small - buttons, chips, badges */
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);

  /* Small - cards, small elements */
  --shadow-sm: 0 2px 4px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent),
              0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);

  /* Medium - cards, dropdowns, modals */
  --shadow-md: 0 4px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent),
              0 1px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);

  /* Soft Medium - buttons, subtle elevation */
  --shadow-soft-md: 0 2px 6px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent),
                     0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);

  /* Large - modals, panels, elevated content */
  --shadow-lg: 0 8px 16px color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent),
              0 3px 6px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);

  /* Extra Large - hero elements, major overlays */
  --shadow-xl: 0 12px 24px color-mix(in srgb, var(--md-sys-color-on-surface) 25%, transparent),
              0 4px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);

  /* ============================================
       COLOR-AWARE SHADOWS (Themed)
       ============================================ */

  /* Primary color shadows */
  --shadow-primary-sm: 0 0 8px oklch(from var(--md-sys-color-primary) l c h / 20%);
  --shadow-primary-md: 0 0 15px oklch(from var(--md-sys-color-primary) l c h / 20%);
  --shadow-primary-lg: 0 0 24px oklch(from var(--md-sys-color-primary) l c h / 25%);

  /* Error color shadows */
  --shadow-error: 0 0 12px oklch(from var(--md-sys-color-error) l c h / 25%);

  /* Success color shadows */
  --shadow-success: 0 0 12px oklch(from var(--brand-success-green) l c h / 25%);

  /* ============================================
       GLOW EFFECTS (Ambient)
       ============================================ */

  --glow-subtle: 0 0 calc(var(--space-s)*1.5) var(--md-sys-color-primary);
  --glow-medium: 0 0 8px var(--md-sys-color-primary);
  --glow-strong: 0 0 15px oklch(from var(--md-sys-color-primary) l c h / 20%);

  /* ============================================
       INNER SHADOWS
       ============================================ */

  --inner-shadow-sm: inset 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
  --inner-shadow-md: inset 0 2px 4px color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent);

  /* ============================================
       SPECIAL SHADOWS
       ============================================ */

  /* Focus ring shadows */
  --focus-ring: 0 0 0 var(--space-s) oklch(from var(--animation-primary) l c h / 10%);
  --focus-ring-visible: 0 0 0 var(--space-s) oklch(from var(--md-sys-color-primary) l c h / 40%);

  /* Strong shadow for high contrast */
  --shadow-strong-lg: 0 12px 24px color-mix(in srgb, var(--md-sys-color-on-surface) 30%, transparent);
  /* ============================================
       OPACITY LEVELS
       ============================================ */

  /* Binary states */
  --opacity-visible: 1;
  --opacity-hidden: 0;

  /* High visibility (main content) */
  --opacity-high: 0.95;
  --opacity-strong: 0.9;

  /* Medium visibility (secondary content) */
  --opacity-medium: 0.8;
  --opacity-moderate: 0.75;

  /* Low visibility (disabled, placeholder) */
  --opacity-low: 0.6;
  --opacity-lower: 0.5;
  --opacity-faint: 0.4;

  /* Subtle (dividers, borders) */
  --opacity-subtle: 0.3;
  --opacity-subtler: 0.2;
  --opacity-subtlest: 0.15;
  --opacity-minimal: 0.08;

  /* ============================================
       ALPHA CHANNELS (for color-mix, rgba)
       ============================================ */

  --alpha-full: 1;
  --alpha-strong: 0.9;

  /* ============================================
       HOVER STATE TOKENS
       Combined opacity + transform for consistent hover effects
       ============================================ */

  /* Default hover - subtle lift */
  --hover-default: opacity var(--transition-fast), transform var(--transition-fast);
  --hover-default-values: var(--opacity-high), var(--transform-hover-lift);

  /* Medium hover - noticeable lift */
  --hover-medium: opacity var(--transition-default), transform var(--transition-default);
  --hover-medium-values: var(--opacity-strong), var(--transform-hover-lift-md);

  /* Strong hover - prominent lift */
  --hover-strong: opacity var(--transition-slow), transform var(--transition-slow);
  --hover-strong-values: var(--opacity-visible), var(--transform-hover-lift-lg);

  /* Scale hover - grow effect */
  --hover-grow: opacity var(--transition-default), transform var(--transition-default);
  --hover-grow-values: var(--opacity-high), scale(var(--scale-grow-md));

  /* ============================================
       FOCUS STATE TOKENS
       ============================================ */

  --focus-ring-offset: var(--space-s);
  --focus-ring-width: var(--outline-width);

  /* Focus visible transition */
  --focus-transition: box-shadow var(--transition-default), outline var(--transition-default);

  /* ============================================
       DISABLED STATE TOKENS
       ============================================ */

  --disabled-opacity: var(--opacity-low);
  --disabled-cursor: not-allowed;
  --disabled-pointer: none;

  /* ============================================
       LOADING STATE TOKENS
       ============================================ */

  /* Loading opacity */
  --loading-opacity: var(--opacity-medium);

  /* Loading animation (pulse) */
  --loading-pulse: opacity 1.5s ease-in-out infinite;

  /* Skeleton loading */
  --skeleton-base: oklch(from var(--md-sys-color-surface) l c h / var(--opacity-minimal));
  --skeleton-shimmer: linear-gradient(90deg,
      var(--skeleton-base) 0%,
      oklch(from var(--md-sys-color-surface) l c h / var(--opacity-subtle)) 50%,
      var(--skeleton-base) 100%);

  /* ============================================
       OVERLAY & BACKDROP TOKENS
       ============================================ */

  /* Modal overlay */
  --overlay-opacity: 0.5;
  --overlay-color: oklch(0% 0 0 / var(--overlay-opacity));

  /* Backdrop blur */
  --backdrop-blur-sm: blur(4px);
  --backdrop-blur-md: blur(8px);
  --backdrop-blur-lg: blur(16px);

  /* ============================================
       TRANSITION STATE TOKENS
       ============================================ */

  /* Enter transitions */
  --enter-opacity: 0;
  --enter-opacity-end: var(--opacity-visible);

  /* Exit transitions */
  --exit-opacity: var(--opacity-visible);
  --exit-opacity-end: var(--opacity-hidden);

  /* ============================================
       SPECIAL STATES
       ============================================ */

  /* Active/Pressed state */
  --active-scale: var(--scale-sm);
  --active-opacity: var(--opacity-medium);

  /* Selected state */
  --selected-opacity: var(--opacity-high);
  --selected-bg: oklch(from var(--md-sys-color-primary) l c h / 0.1);

  /* Error state */
  --error-opacity: var(--opacity-strong);
  --error-glow: var(--shadow-error);

  /* Success state */
  --success-opacity: var(--opacity-high);
  --success-glow: var(--shadow-success);
  --scroll-progress: 0%;
  --theme-transition-x: 50%;
  --theme-transition-y: 50%;
  --theme-transition-radius: 100%;
  /* ✅ Variáveis de tempo para animações (V14+ Simplified) */
  --animation-fast: var(--duration-fast); /* 150ms */
  --animation-normal: var(--duration-smooth); /* 350ms */
  --animation-slow: var(--duration-elegant); /* 600ms */
  --animation-extra-slow: 1000ms; /* Transições épicas */

  /* ✅ Funções de easing otimizadas */
  --easing-linear: linear;
  --easing-ease: ease;
  --easing-ease-in: ease-in;
  --easing-ease-out: ease-out;
  --easing-ease-in-out: ease-in-out;

  /* Aliases contextuais para animações de entrada */
  --entry-transition: var(--duration-elegant) var(--ease-ethereal);
  --interaction-transition: var(--duration-smooth) var(--ease-fluid);

  /* ✅ Cores de animação - Reutilizam variáveis globais */
  --animation-primary: var(--brand-primary-gold);
  --animation-surface: var(--md-sys-color-surface);
  --animation-error: var(--md-sys-color-error);
  --animation-success: var(--brand-success-green);

  /* ✅ Opacidades para animações */
  --animation-opacity-hidden: 0;
  --animation-opacity-visible: 1;
  --animation-opacity-subtle: 0.1;
  --animation-opacity-medium: 0.5;
  --animation-opacity-strong: 0.8;
}
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. CORES PRIMÁRIAS DA MARCA (OKLCH + Fallbacks)
     - Primária (Azul), Secundária (Cinza), Terciária (Verde)
     - Status (Erro, Sucesso, Aviso, Info)
     - Neutras (Escala de Cinza)
  2. SISTEMA MATERIAL DESIGN 3 (Tokens Semânticos)
     - Core Tokens (Primary, On-Primary, Container)
     - Surface Tokens (Surface, On-Surface, Variant)
     - Outline & Error Tokens
  3. COMPATIBILIDADE RGB (Para rgba())
  4. ESTADOS DE INTERAÇÃO E TRANSPARÊNCIA (Alpha Tokens)
  5. SOMBRAS E ELEVAÇÕES (Shadow Tokens)
  6. GRADIENTES
  7. CORES DE ACESSIBILIDADE (Foco, Alto Contraste)
  8. CORES ESPECIAIS (Social, Status Extra)
  9. CORES CENTRALIZADAS DE COMPONENTES (CV Sidebar, Mobile Menu, Recruitment, Pricing)
  10. TEMA ESCURO (Sobrescritas OKLCH)
*/

/* ==========================================================================
   VARIÁVEIS CSS - SISTEMA DE CORES OKLCH COM FALLBACKS OTIMIZADO
   ========================================================================== */

/* =======================================================================
   TEMA ESCURO - SOBRESCRITAS EM OKLCH
   ======================================================================= */
:root.dark-theme {
  color-scheme: dark;

  /* Surface Colors - DARK THEME - [AI-HINT: Use para fundos no modo escuro] */
  --md-sys-color-surface: oklch(12.5% 0.005 230deg);
  --md-sys-color-surface-variant: oklch(22.5% 0.015 230deg);
  --md-sys-color-surface-container-lowest: oklch(10% 0.005 230deg);
  --md-sys-color-surface-container-low: oklch(15% 0.005 230deg);
  --md-sys-color-surface-container: oklch(18% 0.005 230deg);
  --md-sys-color-surface-container-high: oklch(24% 0.005 230deg);
  --md-sys-color-surface-container-highest: oklch(30% 0.005 230deg);

  /* Primary Colors - DARK THEME - [AI-HINT: Cores vibrantes para modo escuro] */
  --md-sys-color-primary: oklch(80.01% 0.151 235.55deg);
  --md-sys-color-primary-container: oklch(25% 0.151 235.55deg);

  /* WCAG AA FIX: Escurecido de 21.13% para 16% para garantir contraste >=5.5:1 */
  --md-sys-color-on-primary: oklch(16% 0.151 235.55deg);
  --md-sys-color-on-primary-container: #87ceeb;

  /* Azul claro para legibilidade */

  /* Secondary Colors - DARK THEME */
  --md-sys-color-secondary: oklch(82.5% 0.034 233.5deg);
  --md-sys-color-secondary-container: oklch(55.5% 0.034 233.5deg);
  --md-sys-color-on-secondary: oklch(21.1% 0.034 233.5deg);
  --md-sys-color-on-secondary-container: oklch(97% 0.034 233.5deg);

  /* Tertiary Colors - DARK THEME */
  --md-sys-color-tertiary: oklch(88% 0.16 158.6deg);
  --md-sys-color-on-tertiary: oklch(20% 0.16 158.6deg);

  /* On-Surface Colors - DARK THEME - [AI-HINT: Legibilidade WCAG AA] */
  --md-sys-color-on-surface: oklch(91.5% 0.005 230deg);
  --md-sys-color-on-surface-variant: oklch(80% 0.015 230deg);

  /* Outline Colors - DARK THEME */
  --md-sys-color-outline: oklch(60% 0.015 230deg);
  --md-sys-color-outline-variant: oklch(35% 0.015 230deg);

  /* Error Colors - DARK THEME */
  --md-sys-color-error: oklch(85% 0.22 25.3deg);
  --md-sys-color-on-error: oklch(35% 0.22 25.3deg);

  /* WCAG AA FIX: #6b1212 - Escurecido para contraste >=4.5:1 sobre error */
  --md-sys-color-error-container: oklch(60% 0.08 25.3deg);

  /* WCAG AA FIX: oklch(16% 0.08 25.3) - Escurecido para contraste >=4.5:1 sobre error-container */
  --md-sys-color-on-error-container: oklch(16% 0.08 25.3deg);

  /* Vidro - DARK THEME (sombras adaptam-se automaticamente via color-mix em _variables-shadows.css) */
  --glass-surface-bg: oklch(22.25% 0 0deg / var(--alpha-high));

  /* =======================================================================
      [AI-HINT: MOBILE MENU OVERLAY - DARK THEME]
      Gradiente profundo navy-to-indigo para o menu mobile em dark mode.
      Cor criada para ser sofisticada e premium no tema escuro.
      ======================================================================= */

  /* Dark Theme: Deep Navy para Indigo profundo - Premium dark look */
  --mobile-menu-gradient: linear-gradient(
    160deg,
    oklch(25% 0.12 260deg) 0%,
    /* Deep indigo-blue */ oklch(15% 0.08 280deg) 100% /* Very dark purple-navy */
  );

  /* Text mantém branco para contraste */
  --mobile-menu-text: oklch(100% 0 0deg);
  --mobile-menu-text-muted: oklch(100% 0 0deg / 75%);

  /* Social Links - mais sutis no dark theme */
  --mobile-menu-social-bg: oklch(100% 0 0deg / 8%);
  --mobile-menu-social-bg-hover: oklch(100% 0 0deg / 18%);

  /* Close Button - adapta ao tema */
  --mobile-menu-close-bg: var(--md-sys-color-surface-variant);
  --mobile-menu-close-text: var(--brand-neutral-white);
  --mobile-menu-close-bg-active: var(--md-sys-color-surface-container-high);

  /* CV Sidebar Dark Theme Overrides */
  --cv-left-bg: oklch(15% 0.02 230deg);
  --cv-right-bg: oklch(32% 0.02 230deg);
  --cv-text-main: oklch(94% 0.005 230deg);
  --cv-text-muted: oklch(69% 0.015 230deg);
  --cv-accent: oklch(85% 0.16 200deg);
  --cv-divider: oklch(30% 0.015 230deg);
  --bio-box-bg: oklch(25% 0.04 230deg);
  --cv-left-text: oklch(94% 0.005 230deg);
  --cv-left-muted: oklch(69% 0.015 230deg);
}

/* =======================================================================
       3. FALLBACKS PARA NAVEGADORES LEGADOS (SEM SUPORTE OKLCH)
       ======================================================================= */

/* Legacy Fallbacks Removed */

/* =======================================================================
       4. RELATIVE COLOR SYNTAX (FUTURO)
       ======================================================================= */

@supports (color: oklch(from oklch(50% 0.1 200) l c h)) {
  :root {
    /* Cores com sintaxe relative quando suportado */
    --md-sys-color-primary-container: oklch(from var(--md-sys-color-primary) 90% 0.05 h);
    --md-sys-color-secondary-container: oklch(from var(--md-sys-color-secondary) 90% 0.02 h);
    --md-sys-color-tertiary-container: oklch(from var(--md-sys-color-tertiary) 90% 0.05 h);
    --md-sys-color-error-container: oklch(from var(--md-sys-color-error) 90% 0.08 h);
  }
}

/* ==========================================================================
    FIM DO ARQUIVO - SISTEMA DE CORES OKLCH COM FALLBACKS COMPLETO
    ========================================================================== */
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. PRIMITIVE FLUID SCALE (4px Grid with clamp) - FIXED LOGIC & UNITS (REM)
     - 4XS to 3XL
  2. COMPONENT SPECIFICS (Badge, Chip, Carousel)
  3. NEGATIVE OFFSET TOKENS
  4. SEMANTIC ALIASES - STACK (Vertical)
  5. SEMANTIC ALIASES - INSET (Padding)
  6. PAIR TOKENS (Asymmetric Insets)
  7. SEMANTIC ALIASES - GAP (Grid/Flex)
  8. COMPONENT-SPECIFIC TOKENS (Hero, Nav, Modal, Footer)
  9. FOCUS RING WIDTHS
  10. COMPONENT HEIGHTS (XS to 2XL)
  11. RESPONSIVE SIZES (Icons)
*/

/* ===================================
   VARIÁVEIS CSS - ESPAÇAMENTO FLUIDO (CLAMP)
   Sistema completo de tokens de espaçamento usando clamp()
   para layouts fluidos e responsivos.
   
   AUDITED 2026: Fixed logic inversion (2xs < xs), removed px units.
   =================================== */
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. FONT FAMILIES (Primary, Secondary, Mono, Serif)
  2. FONT WEIGHTS (Thin to Black)
  3. LINE HEIGHTS (Tight, Snug, Normal, Relaxed, Loose)
  4. LETTER SPACING
  5. ICON SIZES (REM based)
  6. FLUID TYPE SCALE (clamp):
     - Display (L, M, S)
     - Headline (L, M, S)
     - Title (L, M, S)
     - Body (L, M, S)
     - Label (L, M, S)
  7. ALIASES & COMPATIBILITY (Text-4xl, Text-Base, Semantic Tokens)
*/

/* ===================================
   SELF-HOSTED FONTS (Performance Optimization)
   Apenas weights usados: 400, 500, 600, 700, 800, 900
   Removidos 100 e 300 — não utilizados no CSS
   =================================== */

/* Google Sans Flex (Optimized WOFF2) */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/google-sans-flex-v16-latin-regular-BVieJp-T.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/google-sans-flex-v16-latin-500-BCwjhTc3.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/google-sans-flex-v16-latin-600-CXQuUeCX.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/google-sans-flex-v16-latin-700-BzgbwwBA.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/google-sans-flex-v16-latin-800-GcE29Tj_.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/google-sans-flex-v16-latin-900-DfOE7cSB.woff2') format('woff2');
  font-display: swap;
}

/* Inter (Variable fallback or static) */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  src: url('/assets/inter-BT1H-PT_.woff2') format('woff2');
  font-display: swap;
}

/* ===================================
   VARIÁVEIS CSS - TIPOGRAFIA MD3 + FLUID TYPE
   AUDITED 2026: Removed duplicates, converted px to rem.
   =================================== */
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. DURAÇÕES MD3 EXPRESSIVE (Short, Medium, Long, Extra Long)
  2. CURVAS DE EASING MD3 (Standard, Emphasized, Legacy, Linear)
  3. ALIASES CONTEXTUAIS (Transition Fast/Default/Slow)
  4. COMPONENTES ESPECÍFICOS (Carousel, Mobile First, Transform System)
  5. TRANSITIONS CUSTOMIZADAS (Sidebar, Premium Fluidity)
  6. DARK MODE ADJUSTMENTS
  7. REDUCED MOTION (Acessibilidade)
*/

/* =============================================
   MATERIAL DESIGN 3 - EXPRESSIVE MOTION SYSTEM
   Consolidação de _variables-motion.css + _variables-motion-md3.css
   Baseado em: m3.material.io/styles/motion
   ============================================= */

/* ============================================
   RESPEITO A PREFERÊNCIAS DO USUÁRIO
   Acessibilidade e reduced motion (BOTTOM-STACK)
   ============================================ */
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Formas MD3 com clamp() (Corner Radius Responsivo)
  2. Bordas e Arredondamentos Base
*/

/* ===================================
   VARIÁVEIS CSS - FORMAS E ESPAÇAMENTOS MD3 COM CLAMP
   =================================== */
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Escala Unificada de Stacking Contexts
  2. Níveis de Z-Index:
     - Level 1: Base/Decorativo (-100 a 0)
     - Level 2: Content (1-99)
     - Level 3: FABs & Sticky (100-299)
     - Level 4: Drawers & Menus (300-499)
     - Level 6: Dropdowns (800-899)
     - Level 7: Modals & Chat (1000-1999)
     - Level 8: Toasts (2000+)
     - Level 9: Max/Overlay (9000+)
*/
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Botões MD3 (Padding, Font Size, Icon Size, Elevation)
  2. Alturas de Componentes (Small, Medium, Large)
  3. Tamanhos de Componentes (SM, MD, LG)
  4. Opacidades MD3 (Overlay, Disabled)
  5. GLASSMORPHISM SYSTEM (Blur, Background, Border)
  6. Breakpoints (Mobile First System: XS to 2XL)
  7. Scrollbar Variables
  8. Progress Bar Variables
  9. Touch Target Variables (WCAG)
  10. Button Containers (Gaps, Margins, Widths)
  11. MEDIA QUERIES (Mobile Base Overrides, Tablet)
*/

/* ===================================
   VARIÁVEIS CSS - COMPONENTES E UTILITÁRIOS MD3
   =================================== */

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* Mobile Base - Variáveis e Configurações Globais Mobile (CONSOLIDADO) */

/* Tablet específico */
}
/* Depends on Spacing/Color */
@layer base{

/* ==========================================================================
   VARIÁVEIS CSS - FIXES E ALIASES
   ==========================================================================

   Este ficheiro contém:
   1. Aliases para variáveis existentes (compatibilidade)
   2. Variáveis em falta (undefined)
   3. Cores RGB para uso com rgba()

   Última atualização: 2026-02-16
   Problemas resolvidos: 107 variáveis undefined
*/

/* =======================================================================
   NOTA IMPORTANTE
   =======================================================================

   Este ficheiro deve ser importado APÓS todos os outros ficheiros de
   variáveis para garantir que os aliases funcionem corretamente.

   Import order em css/style.css:
   1. _variables-color.css
   2. _variables-typography.css
   3. _variables-spacing.css
   4. _variables-shape.css
   5. _variables-motion.css
   6. _variables-components.css
   7. _variables-zindex.css
   8. _variables-fixes.css (este ficheiro)
*/

/* ==========================================================================
   RECAPTCHA V3 - Esconder badge flutuante
   ==========================================================================
   Google recomenda visibility:hidden (não display:none) para não
   interferir com o funcionamento do token. Ao esconder o badge, os
   Termos do reCAPTCHA exigem texto de atribuição nos formulários.
   ========================================================================== */

.grecaptcha-badge {
  visibility: hidden !important;
}
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Translate Transformations (X, Y, Z)
  2. Scale Transformations
  3. Common Transform Combinations
  4. Off-screen Transforms
  5. Dark Mode Adjustments
*/

/* ===================================
   VARIÁVEIS CSS - TRANSFORMS
   Sistema de transformações reutilizáveis
   =================================== */
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Material Design 3 Elevation Levels
  2. Semantic Shadow Tokens (sm, md, lg, xl)
  3. Color-Aware Shadows (primary, secondary, error)
  4. Glow Effects (subtle, medium, strong)
  5. Inner Shadows
  6. Dark Mode Adjustments
*/

/* ===================================
   VARIÁVEIS CSS - SOMBRAS
   Sistema de sombras consistente e semântico
   =================================== */

/* ===================================
   REDUCED MOTION
   =================================== */
}
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Opacity Levels (binary to subtle)
  2. Alpha/Transparency Tokens
  3. Hover States (combined opacity + transform)
  4. Focus States
  5. Disabled States
  6. Loading States
  7. Reduced Motion Adjustments
*/

/* ===================================
   VARIÁVEIS CSS - ESTADOS DE INTERAÇÃO
   Sistema de opacidade e estados de UI
   =================================== */

/* ===================================
   REDUCED MOTION
   =================================== */

/* ===================================
   HIGH CONTRAST MODE
   =================================== */
}
/* Aliases e variáveis undefined - deve carregar último */
@layer base{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Imports & Configuração:
     - Feature Detection (@supports)
     - CSS Properties (@property)
     - Variáveis Globais de Animação (--animation-*, --easing-*)
  2. Animações de Entrada/Saída (Fade, Reveal, Dropdown)
  3. Animações de Slide (Translate, ISO Slide)
  4. Animações de Escala & Pop (PopIn, Scale)
  5. Animações de Rotação (Spin)
  6. Animações de Pulse/Bounce (Atenção, Loading)
  7. Animações de Shake (Erro)
  8. Efeitos Especiais (Ripple, Float, Fluxo)
  9. Animações de Loading & Progresso (Shimmer, Skeleton)
  10. Animações Dinâmicas (@property based)
  11. Utilitários de Animação (.animate-*)
  12. Keyframes Remanescentes e Específicos
  13. KEYFRAMES CONSOLIDADOS DE COMPONENTES E PÁGINAS
     - Buttons: btn-pulse
     - Footer: social-bounce
     - Articles Modal: modalFadeOut, modalCheckmarkPop, marquee-pingpong, emptyStateFadeIn, emptyIconFloat, counterPop, modalPopIn
     - Experience Marquee: gesture-swipe
     - Chat: typing
     - Interactions: ripple
     - Pricing: swipe-hint-pulse, swipe-arrow
     - Experience: exp-pulse, exp-slide-left
     - About Project: aboutFadeIn
  14. ACCORDION SYSTEM: Animações de expansão suave (grid 0fr→1fr)
  15. TYPEWRITER EFFECTS
     - typewriter-cursor: Cursor piscando
     - typewriter-reveal: Revelação de texto caractere a caractere
  16. REDUCED MOTION: Overrides para acessibilidade
*/

/* ===========================================
   ANIMAÇÕES - CONSOLIDADO & OTIMIZADO
   Central source of truth for motion
   =========================================== */

/* Import animation optimizations */
}
@layer base{

/**
 * Animation Performance Optimizations (Cleaned)
 *
 * Ficheiro reduzido após consolidação em _scroll-animations.css
 * Mantém apenas utilitários específicos de performance que não são de scroll
 *
 * @version 2.0.0
 * @updated 2026-02-08
 * @note Classes de scroll animation movidas para _scroll-animations.css
 */

/* =============================================================================
   PERFORMANCE MONITORING
   ============================================================================= */

/* .is-animating e .was-animated definidos em _scroll-animations.css */

/* =============================================================================
   KEYFRAMES (Utilizados por outras classes)
   ============================================================================= */

@keyframes fade-optimized {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-up-optimized {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-optimized {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =============================================================================
   PERFORMANCE TIPS
   ============================================================================= */

/**
 * Para melhor performance em animações:
 *
 * 1. USE propriedades GPU-aceleradas:
 *    - transform (translate, scale, rotate)
 *    - opacity
 *    - filter
 *
 * 2. EVITE propriedades que causam reflow:
 *    - width, height
 *    - top, left, right, bottom
 *    - margin, padding
 *    - border-width
 *
 * 3. Use will-change com moderação:
 *    - Adicione ANTES da animação começar
 *    - Remova APÓS a animação terminar
 *    - Nunca deixe will-change ativo permanentemente
 *
 * 4. Respeite prefers-reduced-motion:
 *    - Sempre forneça fallback sem animação
 *    - Use @media (prefers-reduced-motion: reduce)
 *
 * 5. Teste em dispositivos low-end:
 *    - Reduza duração e complexidade em mobile
 *    - Considere desativar animações em dispositivos antigos
 */
}
@layer base{

/**
 * Scroll-Based Animations (Consolidated)
 *
 * Este ficheiro consolida todas as classes de animação de scroll:
 * - Lazy loading states
 * - Scroll-triggered animations (fade, slide, scale, rotate)
 * - Staggered animations
 * - GPU acceleration utilities
 * - Animation delays
 *
 * Ficheiros consolidados:
 * - _animation-optimizations.css
 * - _scroll-animations.css (anterior)
 * - Classes de delay de _interactions.css
 *
 * @version 2.0.0
 * @updated 2026-02-08
 */

/* Dynamic variable defaults (set by JS) */

/* =============================================================================
   GPU ACCELERATION UTILITIES
   ============================================================================= */

/**
 * Estado de animação ativa
 * Adiciona will-change apenas quando necessário para evitar consumo de memória
 */
.is-animating {
  /* will-change removido para evitar consumo excessivo de memória GPU */
}

/**
 * Remove will-change após animação completar
 * Usar em conjunto com transitionend/animationend events
 */
.was-animated {
  /* will-change removido para evitar consumo excessivo de memória GPU */
}

/* =============================================================================
   TRANSITION UTILITIES
   ============================================================================= */

/**
 * Utility classes for common transition patterns
 * Use these instead of duplicating transition declarations
 */
.transition-transform-fast {
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.transition-opacity-smooth {
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.gpu-layer {
  transform: translateZ(0);
}

/**
 * GPU-accelerated class for scroll-animated elements
 * Promotes element to its own compositing layer for smooth transitions
 * Applied by scroll-optimizer.js via registerForAnimation()
 *
 * Note: will-change is cleaned up by scroll-optimizer after animation ends
 * to avoid excessive GPU memory consumption.
 */
.gpu-accelerated {
  transform: translateZ(0);
}

/* =============================================================================
   LAZY LOADING STATES
   ============================================================================= */

.lazy-loading {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

.lazy-loading.loaded {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/* =============================================================================
   IMMEDIATE ANIMATIONS (No Scroll Trigger)
   ============================================================================= */

/**
 * Animate In - executa imediatamente ao carregar
 * Essencial para elementos "Above the Fold" (Hero) que não devem depender de scroll
 */
@keyframes animate-in-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
  }

  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

@keyframes animate-in-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-in-up {
  opacity: 0; /* Começa invisível */
  animation: animate-in-fade-up var(--md-sys-motion-duration-extra-long2, 800ms) var(--ease-ethereal) forwards;
}

.animate-in-fade {
  opacity: 0; /* Começa invisível */
  animation: animate-in-fade var(--md-sys-motion-duration-extra-long2, 800ms) var(--ease-ethereal) forwards;
}

/* =============================================================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================================================= */

/**
 * Base scroll animation class
 * Animação padrão: fade + slide up leve
 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-fluid);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/* =============================================================================
   ANIMATION VARIANTS
   ============================================================================= */

/**
 * Fade only - sem movimento
 * Ideal para elementos subtis
 * Usa translateZ(0) para GPU acceleration e renderização fluida
 */
.animate-on-fade {
  opacity: 0;
  transform: translateZ(0);
  transition: opacity var(--duration-elegant) var(--ease-fluid);
}

.animate-on-fade.is-visible {
  opacity: 1;
  transform: translateZ(0);
}

/**
 * Slide Up - desliza de baixo para cima
 * Ideal para cards e content stacks
 */
.animate-on-slide-up {
  opacity: 0;
  transform: translateY(40px) translateZ(0);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-fluid);
}

.animate-on-slide-up.is-visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/**
 * Slide Down - desliza de cima para baixo
 * Ideal para dropdowns e elementos superiores
 */
.animate-on-slide-down {
  opacity: 0;
  transform: translateY(-40px) translateZ(0);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-fluid);
}

.animate-on-slide-down.is-visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/**
 * Slide Left - desliza da direita para esquerda
 * Ideal para elementos em RTL ou laterais direitos
 */
.animate-on-slide-left {
  opacity: 0;
  transform: translateX(40px) translateZ(0);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-fluid);
}

.animate-on-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}

/**
 * Slide Right - desliza da esquerda para direita
 * Ideal para elementos em LTR ou laterais esquerdos
 */
.animate-on-slide-right {
  opacity: 0;
  transform: translateX(-40px) translateZ(0);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-fluid);
}

.animate-on-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}

/**
 * Scale - zoom in/out
 * Ideal para imagens, ícones, e elementos destacados
 */
.animate-on-scale {
  opacity: 0;
  transform: scale(0.8) translateZ(0);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-fluid);
}

.animate-on-scale.is-visible {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

/**
 * Rotate - rotação + scale
 * Ideal para elementos com movimento dinâmico
 */
.animate-on-rotate {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9) translateZ(0);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-fluid);
}

.animate-on-rotate.is-visible {
  opacity: 1;
  transform: rotate(0deg) scale(1) translateZ(0);
}

/* =============================================================================
   STAGGERED ANIMATIONS
   ============================================================================= */

/**
 * Container de stagger - afeta todos os filhos diretos
 * Aplicar ao container e adicionar classe de animação aos filhos se necessário
 *
 * Uso:
 * <div class="animate-stagger">
 *   <div>Item 1</div>  -- anima com delay 0
 *   <div>Item 2</div>  -- anima com delay 0.1s
 *   <div>Item 3</div>  -- anima com delay 0.2s
 * </div>
 */
.animate-stagger > * {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
  transition-delay: calc(var(--stagger-delay, 0)*0.1s);
}

.animate-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/* Define stagger delays para até 10 itens */
.animate-stagger > *:nth-child(1) {
  --stagger-delay: 0;
}
.animate-stagger > *:nth-child(2) {
  --stagger-delay: 1;
}
.animate-stagger > *:nth-child(3) {
  --stagger-delay: 2;
}
.animate-stagger > *:nth-child(4) {
  --stagger-delay: 3;
}
.animate-stagger > *:nth-child(5) {
  --stagger-delay: 4;
}
.animate-stagger > *:nth-child(6) {
  --stagger-delay: 5;
}
.animate-stagger > *:nth-child(7) {
  --stagger-delay: 6;
}
.animate-stagger > *:nth-child(8) {
  --stagger-delay: 7;
}
.animate-stagger > *:nth-child(9) {
  --stagger-delay: 8;
}
.animate-stagger > *:nth-child(10) {
  --stagger-delay: 9;
}

/**
 * Stagger com direções alternadas
 * Ímpares deslizam para cima, pares deslizam para baixo
 */
.animate-stagger-alternate > *:nth-child(odd) {
  transform: translateY(20px) translateZ(0);
}

.animate-stagger-alternate > *:nth-child(even) {
  transform: translateY(-20px) translateZ(0);
}

/* =============================================================================
   ANIMATION DELAYS
   ============================================================================= */

/**
 * Classes de delay para animações
 * Usar em conjunto com classes de animação
 *
 * Valores definidos em _variables-motion.css:
 * --delay-sm: 100ms
 * --delay-md: 200ms
 * --delay-lg: 300ms
 * --delay-xl: 500ms
 */
.delay-sm {
  transition-delay: var(--delay-sm);
  animation-delay: var(--delay-sm);
}

.delay-md {
  transition-delay: var(--delay-md);
  animation-delay: var(--delay-md);
}

.delay-lg {
  transition-delay: var(--delay-lg);
  animation-delay: var(--delay-lg);
}

.delay-xl {
  transition-delay: var(--delay-xl);
  animation-delay: var(--delay-xl);
}

/* Pricing card specific delay variants */
.pricing-card.reveal-on-scroll.delay-sm {
  transition-delay: var(--delay-sm);
  animation-delay: var(--delay-sm);
}

.pricing-card.reveal-on-scroll.delay-md {
  transition-delay: var(--delay-md);
  animation-delay: var(--delay-md);
}

.pricing-card.reveal-on-scroll.delay-lg {
  transition-delay: var(--delay-lg);
  animation-delay: var(--delay-lg);
}

.pricing-card.reveal-on-scroll.delay-xl {
  transition-delay: var(--delay-xl);
  animation-delay: var(--delay-xl);
}

/* Blog card specific delay variants */
.blog-card.reveal-on-scroll.delay-sm {
  transition-delay: var(--delay-sm);
  animation-delay: var(--delay-sm);
}

.blog-card.reveal-on-scroll.delay-md {
  transition-delay: var(--delay-md);
  animation-delay: var(--delay-md);
}

.blog-card.reveal-on-scroll.delay-lg {
  transition-delay: var(--delay-lg);
  animation-delay: var(--delay-lg);
}

.blog-card.reveal-on-scroll.delay-xl {
  transition-delay: var(--delay-xl);
  animation-delay: var(--delay-xl);
}

/* Extra large delay for section separation */
.delay-2xl {
  transition-delay: var(--delay-2xl);
  animation-delay: 700ms; /* Force 700ms for animate-in */
}

.delay-3xl {
  transition-delay: 900ms;
  animation-delay: 900ms;
}

/* Mega delays for Hero subtitle sync */
.delay-3s {
  transition-delay: 3000ms;
  animation-delay: 3000ms;
}

.delay-3s-plus {
  transition-delay: 3200ms;
  animation-delay: 3200ms;
}

/* =============================================================================
   GENERAL TITLE ANIMATION CLASS
   ============================================================================= */

/* Generic title animation class for elements that need entrance animation */
.animate-title {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  transition:
    opacity var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized),
    transform var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized);
}

.animate-title.is-visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/* Pop animation for titles */
.animate-title--pop {
  opacity: 0;
  transform: scale(0.8) translateZ(0);
  transition:
    opacity var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized),
    transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
}

.animate-title--pop.is-visible {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

/* =============================================================================
   SCROLL-PAUSED STATE
   ============================================================================= */

/**
 * Estado de pausa para animações
 * Usar para pausar animações durante certas condições (ex: user inativo)
 */
.scroll-paused {
  transition: none !important;
  animation-play-state: paused !important;
}

.scroll-paused.animate-on-scroll,
.scroll-paused.lazy-loading {
  opacity: 1 !important;
  transform: none !important;
}

/* =============================================================================
   OPTIMIZED ANIMATIONS (Legacy)
   ============================================================================= */

/**
 * Classes "optimized" para animações específicas
 * Mantidas para compatibilidade, mas use as classes animate-on-* preferencialmente
 */
.fade-optimized {
  transform: translateZ(0);
  animation: fade-optimized 0.4s var(--ease-out-quint);
}

.slide-up-optimized {
  transform: translateZ(0);
  animation: slide-up-optimized 0.4s var(--md-sys-motion-easing-standard);
}

.scale-optimized {
  transform: translateZ(0);
  animation: scale-optimized 0.3s var(--md-sys-motion-easing-standard);
}

/* =============================================================================
   LOADING STATES
   ============================================================================= */

/**
 * Pulse animation para loading states
 */
.pulse-loader {
  transform: translateZ(0);
  animation: pulse 1.5s var(--ease-out-sine) infinite;
}

/* =============================================================================
   MICRO-INTERACTIONS
   ============================================================================= */

/**
 * Ripple effect para touch feedback
 */
.ripple {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.ripple::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  content: '';
  background: currentcolor;
  border-radius: 50%;
  opacity: 0.3;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform 0.6s,
    opacity 0.6s;
}

.ripple.active::before {
  opacity: 0;
  transform: translate(-50%, -50%) scale(4);
}

/* =============================================================================
   ACCESSIBILITY & REDUCED MOTION
   ============================================================================= */

/**
 * Respeita a preferência de movimento reduzido do utilizador
 * Quando prefers-reduced-motion: reduce, mostra conteúdo imediatamente sem animação
 */

/* =============================================================================
   RESPONSIVE SCROLL ANIMATIONS
   ============================================================================= */

/**
 * Ajusta animações para ecrãs menores via media queries
 * Reduz distância de movimento e duração em mobile
 */

/* =============================================================================
   SCROLL PROGRESS INDICATOR
   ============================================================================= */

.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--scroll-progress, 0%);
  height: 3px;
  background: var(--md-sys-color-primary);
  z-index: var(--z-max);
  transform: translateZ(0);
}

/* =============================================================================
   PARALLAX (SCROLL-DRIVEN ANIMATIONS)
   ============================================================================= */

@supports (animation-timeline: scroll()) {
  .parallax-scroll-driven {
    --parallax-speed: 0.5;
    animation: parallax-scroll linear;
    animation-timeline: scroll();
    animation-range: entry exit;
    will-change: transform;
  }

  @keyframes parallax-scroll {
    from {
      transform: translateY(calc(var(--parallax-speed)*50px));
    }

    to {
      transform: translateY(calc(var(--parallax-speed)*-50px));
    }
  }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

/**
 * Remove todas as animações para impressão
 */
}
@layer base{

/* ==========================================================================
   THEME TRANSITIONS - ULTRA FLUIDITY (V14+)
   ========================================================================== */

/* 1. REGISTO DE PROPRIEDADES (Houdini) - Interpolação matemática pura */
@property --md-sys-color-surface { syntax: '<color>'; inherits: true; initial-value: oklch(98.19% 0.0029 264.54deg); }
@property --md-sys-color-on-surface { syntax: '<color>'; inherits: true; initial-value: oklch(12.5% 0.005 230deg); }

/* 2. VIEW TRANSITIONS API - Efeito de Onda Instantâneo */

/* Desativar TODAS as transições internas durante a captura para evitar o efeito "muddy" (lamacento) */
html:active-view-transition * {
  transition: none !important;
  animation-duration: 0s !important;
}

/* Exceção: hero image fade precisa correr durante transição de tema */
html:active-view-transition .hero-image--fading-out,
html:active-view-transition .hero-image--fading-in {
  transition: opacity 0.3s ease !important;
}

/* O estado antigo fica como uma foto estática no fundo */
::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* O estado novo expande-se por cima de forma limpa e instantânea */
::view-transition-new(root) {
  animation: theme-reveal-wave 600ms var(--ease-ethereal) forwards;
  mix-blend-mode: normal;
}

/* Defaults para variáveis dinâmicas de transição de tema */

@keyframes theme-reveal-wave {
  from {
    clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
  }
  to {
    clip-path: circle(var(--theme-transition-radius, 100%) at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
  }
}

/* 3. CSS FALLBACK (Browsers antigos) */
:root.theme-transitioning * {
  transition: none !important; /* Impedir cascata de transições */
}

/* Exceção: hero image fade precisa correr durante transição de tema */
:root.theme-transitioning .hero-image--fading-out,
:root.theme-transitioning .hero-image--fading-in {
  transition: opacity 0.3s ease !important;
}

:root.theme-transitioning body {
  transition: background-color 400ms var(--ease-fluid) !important;
}

/* 4. PERFORMANCE - Congelar o mundo durante a onda */
html:active-view-transition .marquee-track,
html:active-view-transition .bg-orb,
:root.theme-transitioning .marquee-track {
  animation-play-state: paused !important;
}

/* 5. HERO IMAGE THEME FADE */
.hero-image--fading-out {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.hero-image--fading-in {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* 6. REDUCED MOTION */
}
@layer base{

/* ===========================================
   FEATURE DETECTION & ROOT VARIABLES
   =========================================== */

@supports (translate: 0) {
  :root {
    --modern-transforms: true;
  }
}

@supports not (translate: 0) {
  :root {
    --modern-transforms: false;
  }
}

@supports (animation-timeline: scroll()) {
  :root {
    --css-property-supported: true;
  }
}

/* Animated CSS Properties - Progress Variables */
@property --animation-progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --scale-progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --rotate-progress {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --translate-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}

@property --translate-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}

@property --opacity-progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --glow-intensity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --shadow-blur {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}

@property --shadow-spread {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}

/* ===========================================
   1. ANIMAÇÕES DE ENTRADA/SAÍDA (FADE & REVEAL)
   =========================================== */

@keyframes fadeIn {
  from {
    opacity: 0;

    /* Blur removed */

    /* Suaviza a entrada */
  }

  to {
    opacity: 1;

    /* Blur removed */
  }
}

@keyframes fadeOut {
  from {
    opacity: var(--animation-opacity-visible);
  }

  to {
    opacity: var(--animation-opacity-hidden);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);

    /* Escala mais subtil para elegância */

    /* Blur removed */
  }

  to {
    opacity: 1;
    transform: scale(1);

    /* Blur removed */
  }
}

@keyframes dropdownSlideDown {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-s)*-1)) scale(0.98);
  }

  to {
    opacity: 1;
    transform: var(--transform-reset);
  }
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: var(--letter-spacing-widest);
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
    opacity: 0;

    /* Blur removed */
  }

  40% {
    opacity: var(--animation-opacity-strong);
  }

  100% {
    letter-spacing: var(--letter-spacing-normal);
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
    opacity: 1;

    /* Blur removed */
  }
}

@keyframes notification-appear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }

  20%,
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes focus-in {
  0% {
    opacity: 0;
    transform: translateY(var(--space-s));
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menu-fade-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(calc(var(--space-xl)*-1.25));
  }
}

@keyframes tilt-in-fwd-tr {
  0% {
    opacity: 0;
    transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
  }

  100% {
    opacity: 1;
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
  }
}

/* ===========================================
   2. ANIMAÇÕES DE SLIDE
   =========================================== */

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(var(--translate-y-reveal-medium));

    /* Distância maior para o easing trabalhar */

    /* Blur removed */
  }

  100% {
    opacity: 1;
    transform: translateY(0);

    /* Blur removed */
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    filter: blur(var(--space-s));
    transform: translateY(var(--space-2xl));
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    filter: blur(var(--space-s));
    transform: translateY(calc(var(--space-2xl)*-1));
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes iso-slide-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-20%);
  }
}

@keyframes iso-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes iso-slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(20%);
  }
}

@keyframes iso-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===========================================
   3. ANIMAÇÕES DE ESCALA & POP
   =========================================== */

@keyframes popIn {
  0% {
    opacity: 0;
    filter: blur(var(--space-s));
    transform: scale(0.8);
  }

  70% {
    /* Overshoot muito subtil */
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    filter: blur(0);
    transform: scale(1);
  }
}

/* Pop In without blur - for icons */
@keyframes popInSimple {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  70% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scale-in-center {
  0% {
    opacity: 1;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===========================================
   4. ANIMAÇÕES DE ROTAÇÃO
   =========================================== */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ===========================================
   5. ANIMAÇÕES DE PULSE/BOUNCE
   =========================================== */

@keyframes pulse {
  0%,
  100% {
    opacity: var(--animation-opacity-visible);
  }

  50% {
    opacity: var(--animation-opacity-medium);
  }
}

@keyframes pulse-scale {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(calc(var(--space-l)*-0.416));
  }
}

@keyframes dot-pulse {
  0%,
  100% {
    opacity: var(--animation-opacity-medium);
    transform: scale(1);
  }

  50% {
    opacity: var(--animation-opacity-visible);
    transform: scale(1.2);
  }
}

@keyframes pulse-active {
  0%,
  100% {
    box-shadow: 0 0 0 var(--space-s) oklch(from var(--animation-primary) l c h / 10%);
  }

  50% {
    box-shadow: 0 0 0 var(--space-s) oklch(from var(--animation-primary) l c h / 0%);
  }
}

@keyframes toggle-pulse {
  0% {
    transform: scale(var(--toggle-scale, 1));
  }

  25% {
    transform: scale(calc(var(--toggle-scale, 1)*0.95));
  }

  50% {
    transform: scale(calc(var(--toggle-scale, 1)*1.1));
  }

  75% {
    transform: scale(calc(var(--toggle-scale, 1)*0.98));
  }

  100% {
    transform: scale(var(--toggle-scale, 1));
  }
}

@keyframes chip-bounce {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

@keyframes shadow-drop-2-center {
  0% {
    box-shadow: var(--md-sys-elevation-level0);
  }

  100% {
    box-shadow: var(--md-sys-elevation-level3);
  }
}

/* ===========================================
   6. ANIMAÇÕES DE SHAKE
   =========================================== */

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(calc(var(--space-s)*-1.25));
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(calc(var(--space-s)*1.25));
  }
}

/* ===========================================
   7. EFEITOS ESPECIAIS & COMPONENT SPECIFIC
   =========================================== */

/* REMOVIDO: @keyframes ripple-animation (duplicata)
   O keyframe correto é @keyframes ripple na linha 1367.
   Esta era uma duplicata desnecessária.
 */

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(calc(var(--space-l)*-0.416));
  }
}

@keyframes fluxo-entrada {
  from {
    opacity: 0;
    transform: translateY(var(--translate-y-reveal-medium));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fluxo-gradient {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(calc(var(--space-s)*-1.25));
  }
}

@keyframes scroll-horizontal {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes pulse-overlay {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

/* ===========================================
   8. ANIMAÇÕES DE LOADING & PROGRESSO
   =========================================== */

@keyframes shimmer-progress {
  0% {
    transform: translateX(-100%) skewX(-20deg);
  }

  100% {
    transform: translateX(200%) skewX(-20deg);
  }
}

@keyframes progress-shine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  }

  100% {
    background-position: 200% 0;
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  }
}

@keyframes lazy-shimmer {
  0% {
    background-position: -200% 0;
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  }

  100% {
    background-position: 200% 0;
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: calc(var(--space-xl)*-6.25) 0;
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  }

  100% {
    background-position: calc(var(--space-xl)*6.25 + 100%) 0;
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  }
}

@keyframes loading-shimmer {
  0% {
    background-position: 200% 0;
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  }

  100% {
    background-position: -200% 0;
    /* stylelint-disable-line plugin/no-low-performance-animation-properties */
  }
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: var(--animation-opacity-strong);
  }

  50% {
    opacity: var(--animation-opacity-visible);
  }
}

/* ===========================================
   9. ANIMAÇÕES DINÂMICAS COM @PROPERTY
   =========================================== */

@keyframes progressReveal {
  0% {
    --animation-progress: 0%;
    --opacity-progress: 0;

    opacity: var(--opacity-progress);
    transform: translateX(var(--translate-x)) translateY(var(--translate-y))
      scale(var(--scale-progress));
  }

  100% {
    --animation-progress: 100%;
    --opacity-progress: 1;

    opacity: var(--opacity-progress);
    transform: translateX(var(--translate-x)) translateY(var(--translate-y))
      scale(var(--scale-progress));
  }
}

@keyframes progressBarFill {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ===========================================
   UTILITÁRIOS DE ANIMAÇÃO (CLASSES)
   =========================================== */

/* ✅ Animações de Título Simplificadas */
.animate-title--tracking.is-visible {
  animation: tracking-in-expand var(--md-sys-motion-duration-long2) var(--ease-out-quint) both;
}

/* NOTA: .is-visible genérico REMOVIDO (FASE 8)
   Esta regra causava conflito de cascade com as definições específicas
   em _scroll-animations.css que são carregadas depois.

   Cada arquivo de animação define o seu próprio .is-visible:
   - _scroll-animations.css: .animate-on-slide-down.is-visible
   - _scroll-animations.css: .animate-on-slide-up.is-visible
   - etc.

   A regra genérica estava a sobrescrever as específicas indevidamente.
*/

.animate-pulse {
  animation: pulse var(--animation-slow) var(--easing-linear) infinite;
}

.animate-spin {
  animation: spin var(--animation-slow) var(--easing-linear) infinite;
}

.animate-bounce {
  animation: bounce var(--animation-slow) var(--ease-fluid) infinite;
}

.animate-shake {
  animation: shake var(--animation-normal) var(--md-sys-motion-easing-emphasized);
}

.animate-slide-in {
  animation: slideIn var(--animation-slow) var(--ease-out-expo);
}

.animate-pop-in {
  animation: popIn var(--animation-slow) var(--ease-ethereal);
}

.animate-scale-in {
  animation: fadeInScale var(--animation-normal) var(--ease-out-expo);
}

/* Delays */
.animate-delay-100 {
  animation-delay: var(--delay-sm);
}

.animate-delay-200 {
  animation-delay: var(--delay-md);
}

.animate-delay-300 {
  animation-delay: var(--delay-lg);
}

.animate-delay-500 {
  animation-delay: var(--delay-xl);
}

.animate-delay-700 {
  animation-delay: 700ms;
}

.animate-delay-1000 {
  animation-delay: 1000ms;
}

/* Durations */
.animate-duration-fast {
  animation-duration: var(--duration-fast);
}

.animate-duration-normal {
  animation-duration: var(--duration-smooth);
}

.animate-duration-slow {
  animation-duration: var(--duration-elegant);
}

.animate-duration-extra-slow {
  animation-duration: var(--animation-extra-slow);
}

/* States */
.animate-paused {
  animation-play-state: paused !important;
}

.animate-running {
  animation-play-state: running !important;
}

.animate-fill-forwards {
  animation-fill-mode: forwards !important;
}

.animate-fill-backwards {
  animation-fill-mode: backwards !important;
}

.animate-fill-both {
  animation-fill-mode: both !important;
}

/* Dynamic Animation Classes */
.animate-dynamic-progress {
  animation: progressReveal var(--duration-smooth) var(--ease-fluid);
}

.animate-dynamic-progress-bar {
  animation: progressBarFill var(--duration-smooth) var(--ease-fluid);
}

/* ===========================================
   KEYFRAMES REMANESCENTES USADOS
   =========================================== */

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(var(--space-l));
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* @keyframes backdrop-fade-in removed (duplicate of fadeIn) */

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-l)*0.625));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* @keyframes carouselFadeIn removed (unused) */

@keyframes footerFadeIn {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-l)*0.416));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes checkmarkPop {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  70% {
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ping {
  75%,
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes focus-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--md-sys-color-primary-rgb), 0.3);
  }

  100% {
    box-shadow: 0 0 0 var(--space-s) rgb(var(--md-sys-color-primary-rgb), 0);
  }
}

@keyframes tilt-out-bwd-tl {
  0% {
    opacity: 1;
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
  }

  100% {
    opacity: 0;
    transform: rotateY(20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
  }
}

@keyframes text-pop-up-top {
  0% {
    transform: translateY(0);
    transform-origin: 50% 50%;
  }

  100% {
    transform: translateY(calc(var(--space-l)*-0.416));
    transform-origin: 50% 50%;
  }
}

@keyframes fluxo-etapa-entrada {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fluxo-opcao-entrada {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-light-mobile {
  0% {
    box-shadow: 0 0 0 0 var(--white-alpha-40);
  }

  70% {
    box-shadow: 0 0 0 calc(var(--space-s)*1.25) var(--white-alpha-00);
  }

  100% {
    box-shadow: 0 0 0 0 var(--white-alpha-00);
  }
}

@keyframes focus-ring-appear {
  from {
    outline-offset: 0;
    opacity: 0;
  }

  to {
    outline-offset: var(--space-s);
    opacity: 1;
  }
}

/* ===========================================
   SERVIÇOS TIMELINE ANIMATIONS
   =========================================== */

@keyframes fillLine {
  from {
    transform: scaleY(0);
    transform-origin: top;
  }

  to {
    transform: scaleY(1);
    transform-origin: top;
  }
}

@keyframes turnOnCard {
  to {
    background: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-primary);
    box-shadow: none;
    opacity: 1;
    filter: grayscale(0);
    transform: translateY(0);
  }
}

@keyframes softTurnOn {
  0% {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline-variant);
    box-shadow: none;
    opacity: 0.3;
    filter: grayscale(1) blur(5px);
    transform: scale(0.98) translateY(10px);
  }

  50% {
    border-color: oklch(from var(--md-sys-color-primary) l c h / 50%);
    box-shadow: none;
    opacity: 0.8;
    filter: grayscale(0.2) blur(1px);
  }

  100% {
    /* Final state matches active card */
    background: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-primary);
    box-shadow: none;
    opacity: 1;
    filter: grayscale(0) blur(0);
    transform: scale(1) translateY(0);
  }
}

@keyframes turnOnDot {
  to {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 calc(var(--space-s)*1.5) var(--md-sys-color-primary);
    transform: scale(1.2);
  }
}

@keyframes softTurnOnDot {
  0% {
    background-color: var(--md-sys-color-surface);
    border-color: var(--md-sys-color-outline);
    box-shadow: none;
    transform: scale(1);
  }

  50% {
    background-color: oklch(from var(--md-sys-color-primary) l c h / 50%);
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 8px var(--md-sys-color-primary);
  }

  100% {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 calc(var(--space-s)*1.5) var(--md-sys-color-primary);
    transform: scale(1.2);
  }
}

@keyframes cardFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================
   MISSING KEYFRAMES (ADDED FOR SIDEBAR FIX)
   =========================================== */

@keyframes news-ticker-slide {
  from {
    opacity: 0;
    transform: translateX(calc(var(--space-m)*-1.25));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes line-reveal {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes revealPrepare {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-l)*-0.416));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes collapseAway {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes breathing {
  0%,
  100% {
    box-shadow: 0 1px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 4px 8px color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
    transform: scale(1.01);
  }
}

@keyframes swipe-hint {
  0% {
    opacity: 0;
    transform: translateX(var(--space-l));
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(0);
  }
}

@keyframes counter-pop {
  0% {
    transform: scale(1);
  }

  50% {
    color: var(--md-sys-color-primary);
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

/* ===========================================
   HERO EXPANDER ANIMATIONS
   =========================================== */

.scale-in-ver-top {
  animation: scale-in-ver-top var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-legacy)
    both;
}

@keyframes scale-in-ver-top {
  0% {
    opacity: 1;
    transform: scaleY(0);
    transform-origin: 100% 0%;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 100% 0%;
  }
}

.scale-out-ver-top {
  animation: scale-out-ver-top var(--md-sys-motion-duration-long2) var(--easing-smooth-in-custom)
    both;
}

@keyframes scale-out-ver-top {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 100% 0%;
  }

  100% {
    opacity: 1;
    transform: scaleY(0);
    transform-origin: 100% 0%;
  }
}

/* ===========================================
   MEDIA QUERIES (BOTTOM-STACK)
   =========================================== */

/* @media (prefers-reduced-motion: reduce) movido para _reset.css */

/* Regra universal *, *::before, *::after aplicada em _reset.css (linhas 165-178) */

/* ===========================================
   KEYFRAMES CONSOLIDADOS DE COMPONENTS
   =========================================== */

/* Buttons */
@keyframes btn-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0 var(--btn-bg, var(--md-sys-color-primary)),
      var(--md-sys-elevation-level1);
  }

  50% {
    box-shadow:
      0 0 0 var(--space-s)
        color-mix(in srgb, var(--btn-bg, var(--md-sys-color-primary)) transparent),
      var(--md-sys-elevation-level2);
  }
}

/* Footer */
@keyframes social-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(calc(var(--space-m)*-0.5)) scale(1.15);
  }
}

/* Articles Modal */
@keyframes modalFadeOut {
  to {
    opacity: 0;
    transform: translateY(var(--space-l)) scale(0.95);
  }
}

@keyframes modalCheckmarkPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }

  70% {
    transform: scale(1.2) rotate(10deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes marquee-pingpong {
  0%,
  10% {
    transform: translateX(0);
  }

  90%,
  100% {
    transform: translateX(calc(-100% + 250px));
  }
}

@keyframes emptyStateFadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--space-l));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes emptyIconFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(calc(var(--space-l)*-0.5)) rotate(5deg);
  }
}

/* RENOMEADO: counterPop → counter-pop para consistência
   Unifica nomenclatura em kebab-case. O keyframe original
   @keyframes counter-pop existe na linha 1155, então esta
   é uma duplicata com nomenclatura inconsistente.
   Esta versão foi removida - usar apenas counter-pop (linha 1155)
*/

@keyframes modalPopIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9) translateY(var(--space-l));
  }

  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02) translateY(calc(var(--space-s)*-0.125));
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
}

/* ===========================================
   UNIFIED ENTRANCE ANIMATIONS
   =========================================== */

/* Padrão para Cards e Colunas: Slide Up + Scale Up + Fade In */
@keyframes entrance-card {
  0% {
    opacity: 0;
    transform: translateY(var(--space-l)) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Experience */
@keyframes experienceColumnSlide {
  0% {
    opacity: 0;
    transform: translateX(calc(var(--space-l)*-1));
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes highlightListItemFade {
  0% {
    opacity: 0;
    transform: translateX(calc(var(--space-m)*-1));
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Sections */
@keyframes subsectionElementFade {
  0% {
    opacity: 0;
    transform: translateY(var(--space-m));
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Badges */
@keyframes badgePopIn {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(calc(var(--space-4xs)*-1));
  }

  70% {
    transform: scale(1.05) translateY(0);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes badgePulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes badgeCountPop {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  70% {
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes badgePulseInfinite {
  0%,
  100% {
    box-shadow: 0 0 0 0 currentcolor;
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, currentcolor 20%, transparent);
    transform: scale(1.05);
  }
}

/* Experience Marquee */
@keyframes gesture-swipe {
  0%,
  100% {
    opacity: var(--animation-opacity-strong);
    transform: translateX(calc(var(--space-s)*0.5));
  }

  50% {
    opacity: var(--animation-opacity-visible);
    transform: translateX(calc(var(--space-s)*-0.5));
  }
}

/* Chat */
@keyframes typing {
  0%,
  80%,
  100% {
    opacity: var(--animation-opacity-subtle);
    transform: scale(0);
  }

  40% {
    opacity: var(--animation-opacity-visible);
    transform: scale(1);
  }
}

/* Interactions */
@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(4);
  }
}

/* Pricing */
@keyframes swipe-hint-pulse {
  0%,
  100% {
    opacity: var(--animation-opacity-strong);
  }

  50% {
    opacity: var(--animation-opacity-visible);
  }
}

@keyframes swipe-arrow {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(calc(var(--space-s)*-0.5));
  }
}

/* Experience */
@keyframes exp-pulse {
  0% {
    opacity: var(--animation-opacity-visible);
    transform: scale(1);
  }

  50% {
    opacity: var(--animation-opacity-strong);
    transform: scale(1.2);
  }

  100% {
    opacity: var(--animation-opacity-visible);
    transform: scale(1);
  }
}

@keyframes exp-slide-left {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(calc(var(--space-s)*-0.75));
  }
}

/* About Project */
@keyframes aboutFadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--space-s));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes differentiationTitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================
   TYPEWRITER EFFECTS
   =========================================== */

/* Typewriter cursor blink */
@keyframes typewriter-cursor {
  0%,
  100% {
    border-color: transparent;
  }

  50% {
    border-color: var(--md-sys-color-primary);
  }
}

/* Typewriter text reveal - using clip-path for smooth character-by-character reveal */
@keyframes typewriter-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  5% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* ============================================================================
   REDUCED MOTION - ANIMAÇÕES INFINITAS ESPECÍFICAS
   =============================================================================

   Overrides explícitos para todas as animações infinitas identificadas.
   Garante conformidade com WCAG 2.3.2 / 2.3.3

   Animações infinitas cobertas:
   - fluxo-gradient, pulse-active, pulse, progress-shine, spin (5x)
   - exp-pulse, exp-slide-left (2x)
   - typing, ping (2x)
   - swipe-hint-pulse, swipe-arrow (2x)
   - marquee-pingpong, emptyIconFloat (2x)
   - E outras animações infinitas de componentes
============================================================================ */

/* ============================================================================
   ACCORDION SYSTEM - Animações de Expansão Suave
   =============================================================================

   Aplica a todos os tipos de accordion:
   - .accordion, .accordion__item, .accordion__header
   - .faq-item, .faq-answer
   - .about-accordion-panel
   - .pricing-accordion-item
============================================================================ */

/* Base Accordion Item */
.accordion__item,
.faq-item,
.pricing-accordion-item {
  overflow: hidden;
  transition: opacity var(--duration-fast) var(--ease-ethereal);
}

/* Accordion Header - Clique interativo */
.accordion__header,
.faq-question,
.pricing-accordion__header {
  position: relative;
  z-index: var(--z-elevated);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.accordion__header:hover,
.faq-item:hover .faq-question,
.pricing-accordion__header:hover {
  background-color: var(--md-sys-color-surface-container-highest);
  transform: translateX(4px);
}

/* Accordion Icon - Rotação */
.accordion__icon,
.faq-icon,
.accordion-icon,
[class*='accordion'] .icon-system {
  transition: transform var(--duration-smooth) var(--ease-ethereal);
}

/* Icon rotate quando aberto */
.accordion__item.is-open .accordion__icon,
.accordion__item[aria-expanded='true'] .accordion__icon,
.faq-item.is-open .faq-icon,
.faq-item.is-active .faq-icon,
.pricing-accordion-item.is-open .accordion-icon {
  transform: rotate(180deg);
}

/* Accordion Content - Grid 0fr→1fr technique */
.accordion__content,
.accordion__body,
.faq-answer,
.pricing-accordion__content,
.about-accordion-panel__inner {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--duration-smooth) var(--ease-ethereal),
    opacity var(--duration-fast) var(--ease-ethereal);
}

/* Estado aberto - Expande content */
.accordion__item.is-open .accordion__content,
.accordion__item[aria-expanded='true'] .accordion__content,
.accordion__item.is-open .accordion__body,
.faq-item.is-open .faq-answer,
.faq-item.is-active .faq-answer,
.pricing-accordion-item.is-open .pricing-accordion__content,
.about-accordion-panel.open .about-accordion-panel__inner {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Wrapper interno para grid animation */
.accordion__content > *,
.accordion__body > *,
.faq-answer > *,
.pricing-accordion__content > *,
.about-accordion-panel__inner > * {
  overflow: hidden;
}

/* FAQ Modal specific animations */
#modal-faq .faq-item {
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

#modal-faq .faq-item.is-open,
#modal-faq .faq-item.is-active {
  background-color: var(--md-sys-color-surface-container-highest);
}

#modal-faq .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-smooth) var(--ease-ethereal);
}

#modal-faq .faq-item.is-open .faq-answer,
#modal-faq .faq-item.is-active .faq-answer {
  grid-template-rows: 1fr;
}

/* Mobile Accordion Panel */
.about-accordion-panel {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-ethereal);
}

.about-accordion-panel.open {
  max-height: 1000px;
  opacity: 1;
}

/* Stagger animation para grupos de accordion */
.accordion-group .accordion__item:nth-child(1),
.faq-group .faq-item:nth-child(1) {
  animation-delay: 0ms;
}

.accordion-group .accordion__item:nth-child(2),
.faq-group .faq-item:nth-child(2) {
  animation-delay: var(--delay-xs);
}

.accordion-group .accordion__item:nth-child(3),
.faq-group .faq-item:nth-child(3) {
  animation-delay: var(--delay-sm);
}

.accordion-group .accordion__item:nth-child(4),
.faq-group .faq-item:nth-child(4) {
  animation-delay: var(--delay-md);
}
}
/* NOTE: _theme-transitions.css REMOVED - consolidated into _theme-transitions-optimized.css */
/* NOTE: _theme-transitions-optimized.css imported inside _animations.css — do NOT duplicate here */
/* ==========================================================================
   2. LAYOUT - Estrutura da Página
   ========================================================================== */
@layer layout{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. BASE (Desktop-first)
     - .section (Padding, Layout)
     - Borders Decorativos
  2. HEADERS & TITLES
     - .section__header, .subsection__header
     - Títulos (.section__title, .subsection__title)
     - Níveis de Título (.title--level-*)
     - Ícones em Títulos
  3. SUBSECTIONS
     - .subsection (Estilo de container secundário)
     - .subsection__intro
  4. CONTENT WRAPPERS
     - .content-wrapper
     - .description-about-me
  5. MEDIA QUERIES
     - Reduced Motion
     - Hover/Touch adjustments
     - Mobile & Tablet responsive rules
     - Desktop specific rules
*/

/* ===================================
   LAYOUT - SEÇÕES E ESTRUTURA MD3 (Desktop Only)
   =================================== */

/**
 * Sistema de seções desktop - SEM media queries mobile.
 * Mobile queries estão em _sections-mobile.css
 */

/* ==========================================================================
   BASE (Desktop-first) - Aplicar Macro-Espaçamento
   ========================================================================== */

.section {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  padding: var(--space-l) var(--space-inset-screen);
  margin: 0;
  container-type: inline-size;
  overflow: hidden;

  /* Reduzir espaçamento vertical */
  background: var(--md-sys-color-surface);
}

.section--decorative-border {
  overflow: visible;
}

.section--decorative-border::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;
  max-width: var(--max-width-decorative-border, 300px);
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, var(--md-sys-color-secondary), transparent);
  transform: translateX(-50%);
}

.section__header,
.subsection__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: center;
  margin-bottom: var(--space-m);
  text-align: center;
}

.section__description {
  margin-top: 0;
  margin-bottom: var(--space-l);
  text-align: left;
  text-wrap: pretty;
}

.subsection {
  position: relative;
  padding: var(--space-m);
  margin-top: var(--space-l);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
}


/* BEM: .header-section removido - usar apenas .section__header ou .subsection__header */

/* Títulos de Seção - Autoridade Única */
.section__title,
.subsection__title {
  position: static;
  display: flex;
  gap: var(--space-m);
  align-items: center;
  justify-content: center;
  padding-bottom: var(--space-s);
  margin: 0;
  font-weight: var(--font-bold);
  color: var(--md-sys-color-on-surface);
  text-align: center;
}

/* Tamanhos Padrão (MD3 Headline Large para Secções) */
.section__title {
  font-size: var(--font-size-headline-large);
  line-height: var(--leading-tight);
}

.subsection__title {
  font-size: var(--font-size-headline-medium);
  line-height: var(--leading-snug);
}

/* Sistema de Animação Integrado */
.section__title[class*='animate-'],
.subsection__title[class*='animate-'] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-fluid);
}

/* Se houver uma animação de keyframes ativa, desativamos a transição para evitar conflitos */
.section__title[class*='--tracking'].is-visible,
.subsection__title[class*='--tracking'].is-visible {
  transition: none;
}

.title {
  width: 100%;
  margin: 0;
  line-height: var(--line-height-tight);
  text-wrap: balance;
}

.title--level-1 {
  font-size: var(--md-sys-typescale-display-small-font-size);
}

.title--level-2 {
  font-size: var(--md-sys-typescale-headline-large-font-size);
}

.title--level-3 {
  font-size: var(--md-sys-typescale-headline-medium-font-size);
}

.title--level-4 {
  font-size: var(--md-sys-typescale-headline-small-font-size);
}

.subtitle {
  margin-top: var(--space-s);
  font-size: var(--md-sys-typescale-title-large-font-size);
  line-height: var(--line-height-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

/* Subtítulo de secção - texto descritivo abaixo do título */
.section__subtitle {
  max-width: 700px;

  /* Mais largo para leitura confortável */
  margin-bottom: var(--space-m);
  font-size: var(--text-lg);

  /* Aumentado para hierarquia melhor */
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);

  /* Overrides para combater conflitos com body-base */
  text-align: center;
  text-indent: 0;
}

.subsection__intro {
  max-width: var(--max-width-content-narrow);
  margin-bottom: var(--space-m);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.experience-columns__content {
  /* Mobile First: 1 Column */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

.experience-column {
  flex-direction: column;
  gap: var(--space-s);
  align-items: center;
  height: 160px;

  /* Aplicar espaçamento consistente */
  text-align: center;
  pointer-events: none;
  cursor: default;

  /* Aplicar espaçamento consistente */
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.experience-column .icon-system {
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-s);
  font-size: var(--text-2xl);
  color: var(--recruitment-primary-light);
  /* Aplicar espaçamento consistente */
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-medium);
}

.experience-column h3 {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-on-surface);
}

.experience-column p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface-variant);
}

.content-wrapper {
  max-width: var(--max-width-content);
  margin: 0 auto;
}

/* Padding lateral apenas quando NÃO está dentro de .section
   .section já fornece padding horizontal via var(--space-inset-screen) */
.pp-hero .content-wrapper,
.pp-section .content-wrapper,
.pp-footer .content-wrapper {
  padding-right: var(--space-inset-screen);
  padding-left: var(--space-inset-screen);
}

/* Descrição Sobre Mim */
.description-about-me {
  max-width: var(--max-width-content);
  padding: var(--space-l);
  margin: 0 auto;

  /* margin-bottom removido (era redundante) */
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level1);
}

/* ===================================
   STAGGER ANIMATIONS FOR SUBSECTION ELEMENTS
   =================================== */

/* Animações de entrada escalonada para elementos dentro de subsections */
.subsection>*:not(.subsection__title).is-visible:nth-child(1),
.subsection__content>*.is-visible:nth-child(1) {
  animation: subsectionElementFade 0.5s var(--ease-out-expo) 0ms backwards;
}

.subsection>*:not(.subsection__title).is-visible:nth-child(2),
.subsection__content>*.is-visible:nth-child(2) {
  animation: subsectionElementFade 0.5s var(--ease-out-expo) 80ms backwards;
}

.subsection>*:not(.subsection__title).is-visible:nth-child(3),
.subsection__content>*.is-visible:nth-child(3) {
  animation: subsectionElementFade 0.5s var(--ease-out-expo) 160ms backwards;
}

.subsection>*:not(.subsection__title).is-visible:nth-child(4),
.subsection__content>*.is-visible:nth-child(4) {
  animation: subsectionElementFade 0.5s var(--ease-out-expo) 240ms backwards;
}

.subsection>*:not(.subsection__title).is-visible:nth-child(5),
.subsection__content>*.is-visible:nth-child(5) {
  animation: subsectionElementFade 0.5s var(--ease-out-expo) 320ms backwards;
}

.subsection>*:not(.subsection__title).is-visible:nth-child(6),
.subsection__content>*.is-visible:nth-child(6) {
  animation: subsectionElementFade 0.5s var(--ease-out-expo) 400ms backwards;
}

/* Animação específica para about-project-btn cards - Corrigido para targetar via wrapper */
.about-project-item.is-visible:nth-child(1) .about-project-btn {
  animation: entrance-card 0.5s var(--ease-out-expo) 100ms backwards;
}

.about-project-item.is-visible:nth-child(2) .about-project-btn {
  animation: entrance-card 0.5s var(--ease-out-expo) 200ms backwards;
}

.about-project-item.is-visible:nth-child(3) .about-project-btn {
  animation: entrance-card 0.5s var(--ease-out-expo) 300ms backwards;
}

.about-project-item.is-visible:nth-child(4) .about-project-btn {
  animation: entrance-card 0.5s var(--ease-out-expo) 400ms backwards;
}

.about-project-item.is-visible:nth-child(5) .about-project-btn {
  animation: entrance-card 0.5s var(--ease-out-expo) 500ms backwards;
}

.about-project-item.is-visible:nth-child(6) .about-project-btn {
  animation: entrance-card 0.5s var(--ease-out-expo) 600ms backwards;
}

/* Animação para .description-about-me */
.description-about-me.is-visible {
  animation: subsectionElementFade 0.6s var(--ease-out-expo) 150ms backwards;
}

/* Animação para .subsection__intro */
.subsection__intro.is-visible {
  animation: subsectionElementFade 0.5s var(--ease-out-expo) 100ms backwards;
}

/* Animação para .experience-examples-list items */
.experience-examples-list>li.is-visible:nth-child(1) {
  animation: subsectionElementFade 0.4s var(--ease-out-expo) 0ms backwards;
}

.experience-examples-list>li.is-visible:nth-child(2) {
  animation: subsectionElementFade 0.4s var(--ease-out-expo) 70ms backwards;
}

.experience-examples-list>li.is-visible:nth-child(3) {
  animation: subsectionElementFade 0.4s var(--ease-out-expo) 140ms backwards;
}

.experience-examples-list>li.is-visible:nth-child(4) {
  animation: subsectionElementFade 0.4s var(--ease-out-expo) 210ms backwards;
}

.experience-examples-list>li.is-visible:nth-child(5) {
  animation: subsectionElementFade 0.4s var(--ease-out-expo) 280ms backwards;
}

.experience-examples-list>li.is-visible:nth-child(6) {
  animation: subsectionElementFade 0.4s var(--ease-out-expo) 350ms backwards;
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* ♿ REDUCED MOTION */

/* 🚫 DESABILITA HOVER EM TOUCH */

/* SMALL MOBILE */

/* MOBILE (Consolidado) - Aplicar Espaçamento Responsivo */


/* TABLET SPECIFIC (768px - 1024px) */

/* DESKTOP (> 1024px) */
}
@layer layout{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Footer Container (.footer)
  2. Footer Links (.footer-link, .footer-links)
  3. Footer Icons (.fa-icon, iconify-icon)
  4. Footer Content (.footer-content)
  5. Social Links (.footer-social-wrapper, .footer-social)
  6. Dark Mode Styles
  7. MEDIA QUERIES (Mobile, Animation Staggering)
*/

/* ===================================
   LAYOUT - FOOTER MD3
   =================================== */

.footer {
  contain-intrinsic-size: 1px 200px;
  padding: var(--space-l) max(var(--space-l), env(safe-area-inset-right, 0px)) calc(var(--space-l) + env(safe-area-inset-bottom, 0px)) max(var(--space-l), env(safe-area-inset-left, 0px));
  content-visibility: auto;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;

  /* Reduzir espaçamento para footer */
  background: var(--color-transparent);
  transition: var(--transition-colors);
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;

  /* WCAG 2.5.5: Touch target mínimo 44px */
  min-height: var(--height-component-sm);
  padding: var(--space-m) var(--space-s);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: underline;
  transition: transform var(--duration-smooth) var(--ease-fluid), color var(--duration-smooth) var(--ease-fluid);
}

.footer .fa-icon,
.footer iconify-icon {
  margin-right: 0;
  font-size: var(--text-base);
  vertical-align: middle;
  color: var(--md-sys-color-on-surface-variant);
}

.footer .fa-icon:hover,
.footer iconify-icon:hover,
html.dark-theme .footer .fa-icon:hover,
html.dark-theme .footer iconify-icon:hover {
  color: var(--state-hover-primary);
}

.footer .fa-icon:active,
.footer iconify-icon:active,
html.dark-theme .footer .fa-icon:active,
html.dark-theme .footer iconify-icon:active {
  color: var(--md-sys-color-primary);
  transform: scale(0.9);
}

html.dark-theme .footer .fa-icon,
html.dark-theme .footer iconify-icon {
  color: var(--md-sys-color-on-surface);
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  align-items: center;

  /* Reduzido de lg para md para maior compacidade */
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;

  /* Reduzido de lg para md */
  list-style: none;
}

.footer-links li {
  margin: 0;
}

/* Increase hover feedback with scale(1.1) and glow */
.footer-social a:hover {
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-surface-container-high);
  box-shadow: 0 var(--space-xs) var(--space-m) var(--state-hover-primary);
  transform: translateY(calc(var(--space-s)*-1)) scale(1.1) !important;
  animation: social-bounce var(--duration-elegant) var(--ease-fluid);
}

.footer-social a:active {
  box-shadow: none;
  transform: scale(0.95) !important;
}

.footer-link:hover {
  color: var(--md-sys-color-primary);
  transform: scale(1.05);
}

.footer-link:active {
  color: var(--md-sys-color-primary);
  transform: scale(0.98);
}

/* LINKS SOCIAIS NO FOOTER */
.footer-social-wrapper {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  justify-content: center;

  /* Reduzido de lg para md */
}

.footer-social-label {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}

.footer-social {
  display: flex;
  gap: var(--space-l);

  /* Reduzido de lg para md */
}

.footer-social a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--height-component-lg);
  min-height: var(--height-component-lg);
  background-color: var(--md-sys-color-surface-variant);
  border-radius: 50%;
  opacity: 1 !important;
  transform: none !important;
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid),
    color var(--duration-smooth) var(--ease-fluid);
  animation: none !important;
}

/* Color change para Brand Primary no hover */

.footer-social .icon-social {
  /* Performance: explicit dimensions prevent layout shift (CLS) */
  width: 24px;
  height: 24px;
  font-size: var(--text-3xl);
}

.nav-social-links .icon-social {
  /* Performance: explicit dimensions prevent layout shift (CLS) */
  width: 20px;
  height: 20px;
  font-size: var(--text-2xl);
}

/* MODO CLARO (padrão) - Icon visibility for social links */
.footer-social .icon-light,
.menu-social-links .icon-light,
.nav-social-links .icon-light,
html.dark-theme .footer-social .icon-dark,
html.dark-theme .menu-social-links .icon-dark,
html.dark-theme .nav-social-links .icon-dark {
  display: block !important;
}

.footer-social .icon-dark,
.menu-social-links .icon-dark,
.nav-social-links .icon-dark,
html.dark-theme .footer-social .icon-light,
html.dark-theme .menu-social-links .icon-light,
html.dark-theme .nav-social-links .icon-light {
  display: none !important;
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* RESPONSIVIDADE MOBILE (480px) */

/* Staggered animation for footer elements on mobile (768px) */
}
/* ==========================================================================
   3. COMPONENTS - Elementos de UI Reutilizáveis
   ========================================================================== */
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Classes Base de Interação (.interactive-base)
  2. Efeitos de Hover (.hover-scale)
  3. Animações de Revelação ao Rolar (.reveal-on-scroll)
  4. Animações de Entrada (Fade, Slide, Focus)
  5. Animações de Título (.animate-title)
  6. Atrasos de Animação (.delay-*)
  7. Touch Interactions (Gestos, Feedback Tátil, Ripple)
  8. Notificações (.material-notification)
  9. Modo de Leitura Focada (.focus-reading-mode)
  10. MEDIA QUERIES (Touch Targets, Feedback Ativo, Safe Areas)
*/

/* ===================================
   CLASSES DE INTERAÇÃO E ANIMAÇÃO
   =================================== */
.interactive-base {
  position: relative;
  cursor: pointer;
  outline: none;
  transition: inherit;
}

.interactive-base::before {
  position: absolute;
  inset: 0;
  z-index: var(--z-negative);
  pointer-events: none;
  content: '';
  background-color: var(--md-sys-color-on-surface);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-snappy);
}

.interactive-base:hover::before {
  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
}

.interactive-base:focus-visible::before {
  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);
}

.interactive-base:active::before {
  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
}

/* Efeitos de Hover */
.hover-scale {
  transition:
    transform var(--duration-fast) var(--ease-snappy);
}

.hover-scale:hover {
  background-color: var(--state-hover-surface);
  box-shadow: 0 4px 12px oklch(0% 0 0deg / 10%);
  transform: scale(1.05) translateY(-1px);
}

/* Animações de Revelação ao Rolar */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-ethereal);
}

.reveal-on-scroll.is-visible,
.pricing-card.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: var(--transform-reset);
}

.pricing-card.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-ethereal);
}

/* Animações de Fade */
.fade-in-bottom {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-ethereal);
}

.fade-in-bottom.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-top {
  opacity: 0;
  transform: translateY(-50px);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-ethereal);
}

.slide-in-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.text-focus-in {
  opacity: 0;
  transition: opacity var(--duration-elegant) var(--ease-fluid);
}

.text-focus-in.is-visible {
  opacity: 1;
}

/* Animações de Slide */
.card.animate-slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition-timing-function: var(--ease-snappy), var(--ease-fluid);
  transition-duration: var(--duration-smooth), var(--duration-elegant);
  transition-property: opacity, transform;
}

.animate-slide-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* NOTA: .animate-title removido (CÓDIGO DUPLICADO)
   A funcionalidade está em _sections.css (linha 120-127):
   - .section__title[class*='animate-']
   - .subsection__title[class*='animate-']
   Mais específico e usa variáveis MD3 consistentes.

   tracking animation: _animations.css (linha 778)
*/

/* Atrasos de Animação */

/* NOTA: As classes .delay-* foram movidas para _scroll-animations.css como parte da consolidação
   Mantendo este comentário para referência histórica */

/* ==========================================================================
   TOUCH INTERACTIONS - Gestos e Feedback Tátil (CONSOLIDADO)
   ========================================================================== */

.navbar__link,
.botao,
.hero__cta,
.faq-question,
a {
  touch-action: manipulation;

  /* Remove delay */
  -webkit-tap-highlight-color: transparent;

  /* Remove flash azul */
  -webkit-user-select: none;
  user-select: none;

  /* Previne seleção acidental */
}

[contenteditable] {
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
}

.touchable {
  position: relative;
  overflow: hidden;
}

/* Ripple em toque */
.botao:active::after,
.hero__cta:active::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  background: currentcolor;
  opacity: 0.12;
  animation: ripple-animation var(--duration-elegant) var(--ease-fluid);
}

/* ripple keyframe movido para _animations.css */

/* ✅ LINK PREMIUM - Refinação Estética Minimalista para Links em Texto */
.link-premium {
  display: inline;
  font-weight: 500;
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(from var(--md-sys-color-primary) l c h / 40%);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-fluid);
}

.link-premium:hover {
  text-decoration-color: var(--md-sys-color-primary);
}

.link-premium:active {
  opacity: 0.7;
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* TOUCH INTERACTIONS (MOBILE) */

/* FEEDBACK VISUAL ATIVO */

/* SAFE AREA INSETS (iOS) */
@supports (padding: env(safe-area-inset-bottom)) {
}

/* DESABILITAR HOVER EM TOUCH & MODOS ESPECIAIS */

/* Ripple Effect (Moved from style.css) */

/* @keyframes ripple movido para css/01-base/_animations.css */
.ripple-effect {
  position: absolute;
  z-index: var(--z-content);
  pointer-events: none;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple var(--duration-elegant) var(--ease-fluid);
}
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Navbar Container (.navbar): Estados fixos, scrolled e hidden.
  2. Logo (.navbar__logo): Ajustes de toque e identidade.
  3. Links de Navegação (.navbar__links): Desktop groups e dropdowns.
  4. Submenus (.navbar__submenu): Comportamento de hover e links secundários.
  5. Menu Mobile Overlay:
     - Hamburger Button (.navbar-burger).
     - Overlay Panel (.navbar__menu).
     - Links Mobile e Submenus Acordeão.
     - Social Links e Footer do Menu.
  6. MEDIA QUERIES:
     - Mobile (<=1024px).
     - Narrow Desktop (1025px - 1350px): Compact navbar para ecrãs intermédios.
     - Desktop (>=1025px): Full-width styles; min-width: max-content em .navbar__right.
     - Reduced Motion.
     - Tablet (768px - 1024px).
     - Browser Fixes & Edge Cases.
*/

/* ===================================
   COMPONENTES - NAVEGAÇÃO MD3
   =================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100vw;
  height: 4rem;
  min-height: 4rem;
  padding: 0 var(--space-inset-screen);
  overflow: visible;
  background: var(--md-sys-color-surface);

  /* ✅ Previne renderização subpixel problemática */
  backface-visibility: hidden;

  /* ✅ Transição única e limpa para transform */
  transition:
    transform var(--duration-smooth) var(--ease-snappy),
    var(--transition-colors);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.navbar--scrolled {
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-level2);
}

.navbar--hidden {
  transform: translateY(-100%);
}

.navbar__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  margin-inline-end: var(--space-xl);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-secondary);
  text-decoration: none;
  transition: none;
}

.navbar__links {
  position: relative;
  display: flex;

  /* Default para desktop */
  flex-grow: 1;
  gap: var(--space-m);
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* NAVIGATION GROUPS (DROPDOWNS) */
.navbar__item-group {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar__item-group:hover .navbar__submenu,
.navbar__item-group:focus-within .navbar__submenu {
  visibility: visible;
  opacity: var(--opacity-visible);
  transform: translateY(0);
}

.dropdown-arrow {
  margin-inline-start: 2px;
  font-size: 0.8em;
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

.navbar__item-group:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* CONTROLE DE NAVBAR - MEDIA QUERIES (S.S.O.T.) */

.navbar__link {
  position: relative;
  z-index: var(--z-elevated);
  display: flex;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-s) var(--space-s);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  text-decoration: none;

  /* Reduced specific padding */
  border-radius: var(--md-sys-shape-corner-small);

  /* Entrance Animation - Desktop Staggered */
  opacity: var(--opacity-hidden);
  transform: var(--transform-hover-lift-md);
  transition:
    color var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-smooth) var(--ease-snappy);
  animation: navLinkFadeIn var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: var(--nav-stagger-delay, 0s);
}

/* Keyframe para entrada dos links desktop */
@keyframes navLinkFadeIn {
  to {
    opacity: var(--opacity-visible);
    transform: translateY(0);
  }
}

/* Staggered delays para desktop navigation links */
.navbar__links .navbar__link:nth-child(1) {
  --nav-stagger-delay: 0s;
}

.navbar__links .navbar__link:nth-child(2) {
  --nav-stagger-delay: 0.05s;
}

.navbar__links .navbar__link:nth-child(3) {
  --nav-stagger-delay: 0.1s;
}

.navbar__links .navbar__link:nth-child(4) {
  --nav-stagger-delay: 0.15s;
}

.navbar__links .navbar__link:nth-child(5) {
  --nav-stagger-delay: 0.2s;
}

.navbar__links .navbar__link:nth-child(6) {
  --nav-stagger-delay: 0.25s;
}

.navbar__links .navbar__link:nth-child(7) {
  --nav-stagger-delay: 0.3s;
}

.navbar__links .navbar__link:nth-child(8) {
  --nav-stagger-delay: 0.35s;
}

.navbar__link::before {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 60%;
  height: 2px;
  content: '';
  background: linear-gradient(90deg,
      var(--md-sys-color-primary),
      oklch(from var(--md-sys-color-primary) l c h / 70%));
  border-radius: 1px;
  opacity: var(--opacity-strong);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition:
    transform var(--duration-smooth) var(--ease-snappy),
    opacity var(--duration-fast) var(--ease-snappy);
}

.navbar__link:hover,
.navbar__link.is-active {
  color: var(--md-sys-color-on-surface);
  transform: translateY(-1px) scale(1.015);
}

.navbar__link:hover::before,
.navbar__link.is-active::before {
  transform: translateX(-50%) scaleX(1);
}

.navbar__right {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-nav-item-gap);
  align-items: center;

  /* ✅ Permite encolhar em ecrãs estreitos; max-content apenas em desktop largo */
  min-width: auto;
  margin-inline-start: auto;
}

/* .theme-toggle styles moved to _badges.css (S.S.O.T.) */

.navbar__submenu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;

  /* Minimal vertical padding for container */
  z-index: var(--z-dropdown);
  display: flex;
  visibility: hidden;
  flex-direction: column;

  /* Clean border instead of shadow */
  min-width: 13.75rem;

  /* Subtle shadow only */
  padding: 4px 0;
  overflow: hidden;
  background-color: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level1);
  opacity: var(--opacity-hidden);
  transform: translateY(var(--space-s));
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

.navbar__links.has-submenu.submenu-open .navbar__submenu,
.navbar__menu.has-submenu.submenu-open .navbar__submenu {
  visibility: visible;
  opacity: var(--opacity-visible);
  transform: translateY(0);
}

/* Submenu Link Specifics */
.navbar .navbar__link--submenu {
  justify-content: flex-start;
  width: 100%;
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface);

  /* Reduced padding */
}

.navbar__link--submenu:hover {
  background-color: var(--state-hover-on-surface-variant);
}

/* Remove underline animation from submenu items */
.navbar__link--submenu::before {
  display: none;
}

.navbar__submenu .navbar__link {
  display: block;
  justify-content: flex-start;
  padding: var(--space-m) var(--space-m);
  font-size: var(--text-sm);
  white-space: nowrap;
  border-radius: var(--md-sys-shape-corner-small);
}

.navbar__submenu .navbar__link:hover {
  background-color: var(--state-hover-primary);
}

/* ==========================================================================
   MOBILE MENU BASE (Hidden by default on desktop)
   ========================================================================== */

.navbar__menu {
  display: none;
  z-index: calc(var(--z-modal) + 1);
}

/* ==========================================================================
   MOBILE & TABLET MENU OVERLAY (≤1024px)
   ========================================================================== */

/* ==========================================================================
   COMPONENT: MENU CLOSE BUTTON (Global)
   ========================================================================== */
.navbar__menu-close {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-m);
  font-size: var(--text-base);

  /* Mais moderno */
  font-weight: 700;
  color: var(--md-sys-color-primary);
  cursor: pointer;
  background: var(--md-sys-color-surface);
  border: none;

  /* Mais touch area */
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: 0 4px 12px oklch(0% 0 0deg / 12%);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.navbar__menu-close:hover {
  box-shadow: 0 6px 16px oklch(0% 0 0deg / 16%);
  transform: translateY(-1px);
}

.navbar__menu-close:active {
  background: var(--state-pressed-surface);
  box-shadow: 0 2px 6px oklch(0% 0 0deg / 10%);
  transform: translateY(0) scale(0.98);
}

/* ==========================================================================
   NARROW DESKTOP (1025px - 1350px) — Compact navbar para ecrãs intermédios
   ========================================================================== */

/* ==========================================================================
   MEDIA QUERIES (DESKTOP ≥1025px)
   ========================================================================== */

/* ==========================================================================
   REDUCED MOTION - DESATIVAR ANIMAÇÕES STAGGERED
   ========================================================================== */

/* ==========================================================================
   TABLET OPTIMIZATIONS (768px - 1024px)
   ========================================================================== */
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. BASE BUTTON (.btn): Estilos fundamentais e customização via CSS Variables.
  2. ESTADOS E INTERAÇÕES: Hover, Active, Focus, Disabled, Loading, Pulse.
  3. VARIAÇÕES VISUAIS: .btn--filled, .btn--tonal, .btn--outlined, .btn--text.
  4. TAMANHOS: .btn--small, .btn--medium, .btn--large.
  5. BOTÕES ESPECIAIS:
     - Ícones, Largura Total, Icon-Only.
     - Floating Action Buttons (.btn--fab, .fab) [CONSOLIDATED from _fab-buttons.css].
     - NOTA: Close buttons (.modal__close) foram centralizados em _modal-base.css.
  6. BOTÕES INDEPENDENTES: Toggle Buttons, Chat Buttons, Voice Actions.
  7. CLICKABLE CARDS: .about-project-btn, .faq-btn.
  8. CONTAINERS: .form-actions, .section-actions.
  9. MEDIA QUERIES: Ajustes mobile, tablet e acessibilidade.

  CONSOLIDAÇÃO REALIZADA:
  - _fab-buttons.css → Fundido neste arquivo (FAB styles como .btn--fab e .fab)
  - _hover-states.css → Estados de hover em ícones de botões integrados
*/

/* ===================================
   🎯 BUTTON SYSTEM - UNIFIED
   ===================================

   ÍNDICE:
   ────────────────────────────────────────
   1️⃣ BASE BUTTON (.btn)
      - Estilos base com CSS Variables para customização
      - Estados gerais (:hover, :focus, :active)
      - Estados de classe (.is-disabled, .is-loading, .is-pulse, .is-active)

   2️⃣ VARIANTS (Estilo Visual)
      - .btn--filled, .btn--tonal, .btn--outlined, .btn--text

   3️⃣ SIZES (Tamanho)
      - .btn--small, .btn--medium, .btn--large
      - Padding ratios

   4️⃣ SPECIAL VARIANTS
      - .btn--icon-only, .btn--floating, .btn--full, .btn--auto

   5️⃣ INDEPENDENT BUTTONS
      - .btn-close (todos os close buttons unificados)
      - .btn-toggle / .toggle-btn
      - .fab, .chat-fab-btn, .header-btn, .chat-send-btn

   6️⃣ CLICKABLE CARDS
      - .about-project-btn
      - .faq-btn

   7️⃣ CONTAINERS
      - .modal__actions, .form-actions, .btn-wrapper, etc.

   8️⃣ PAGE-SPECIFIC
      - .contato__botao, .botao-recrutamento-flutuante, etc.

   9️⃣ RESPONSIVE
      - Mobile, Tablet, Accessibility

   🔟 CSS VARIABLES REFERENCE
      --btn-bg          - Background color (default: --md-sys-color-primary)
      --btn-color       - Text/icone color (default: --md-sys-color-on-primary)
      --btn-border      - Border color (outlined only, default: --md-sys-color-outline)
      --btn-padding-x   - Horizontal padding override
      --btn-padding-y   - Vertical padding override
      --btn-min-width   - Largura mínima
      --btn-min-height  - Altura mínima
      --btn-radius      - Border radius override
   =================================== */

/* ==========================================================================
   1️⃣ BASE BUTTON (.btn) - Desktop-first
   ==========================================================================

   Uso das CSS Variables:
   <button class="btn btn--filled" style="--btn-bg: #25D366; --btn-color: #fff">
     WhatsApp
   </button>
*/

.btn {
  position: relative;
  z-index: var(--z-content);
  display: inline-flex;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
  min-width: var(--btn-min-width, var(--touch-target-min));
  min-height: var(--btn-min-height, var(--touch-target-min));
  padding: clamp(12px, 3vw, 16px) clamp(20px, 5vw, 24px);
  overflow: hidden;
  contain: layout style paint;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  background-color: var(--btn-bg);
  border: none;
  border-color: var(--btn-border);
  border-radius: var(--btn-radius, var(--md-sys-shape-corner-full));
  transition:
    box-shadow var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.btn::before {
  position: absolute;
  inset: 0;
  z-index: var(--z-negative);
  content: '';
  background-color: currentcolor;
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  border-radius: inherit;
  opacity: var(--opacity-hidden);
  transform: scale(var(--btn-overlay-scale-start, 0.95));
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover:not(:disabled)::before {
  opacity: var(--state-hover-opacity, 0.08);
  transform: scale(1);
}

.btn:focus-visible:not(:disabled)::before {
  opacity: var(--state-focus-opacity, 0.12);
  transform: scale(1);
}

.btn:active:not(:disabled)::before {
  opacity: var(--state-pressed-opacity, 0.12);
  transform: scale(1);
}

/* ==========================================================================
   2️⃣ ⚡ ESTADOS E INTERAÇÕES
   ========================================================================== */

.btn:hover:not(:disabled) {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px) scale(var(--scale-grow-sm));
}

.btn:active:not(:disabled) {
  box-shadow: var(--shadow-sm);
  transform: translateY(0) scale(var(--scale-sm));
}

.btn:focus-visible {
  outline: 2px solid var(--md-sys-color-focus-outline);
  outline-offset: 2px;
}

.btn.btn:disabled,
.btn.btn.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
  opacity: var(--disabled-opacity, 0.6);
  transform: none;
}

.btn.btn.is-loading {
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  position: absolute;
  inset: 0;
  width: 1.2em;
  height: 1.2em;
  margin: auto;
  content: '';
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: var(--md-sys-shape-corner-full);
  animation: spin 1s var(--easing-linear) infinite;
}

/* Estado ativo (para toggle buttons) */
.btn.is-active {
  color: var(--btn-color-active, var(--md-sys-color-on-primary-container));
  background-color: var(--btn-bg-active, var(--md-sys-color-primary-container));
  box-shadow: var(--md-sys-elevation-level2);
}

/* Estado expandido (para botões que expandem conteúdo) */
.btn.is-expanded {
  color: var(--btn-color-expanded, var(--md-sys-color-on-secondary-container));
  background-color: var(--btn-bg-expanded, var(--md-sys-color-secondary-container));
}

/* Estado pulse (animação para CTAs importantes) */

/* @keyframes btn-pulse movido para css/01-base/_animations.css */
.btn.is-pulse {
  animation: btn-pulse 2s infinite;
}

/* ==========================================================================
   3️⃣ 🎨 VARIAÇÕES DE BOTÕES
   ========================================================================== */

.btn--filled {
  --btn-bg: var(--md-sys-color-primary);
  --btn-color: var(--md-sys-color-on-primary);

  box-shadow: var(--md-sys-elevation-level1);
  transition:
    var(--transition-colors),
    var(--transition-transform),
    filter var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

.btn--filled:hover:not(:disabled) {
  box-shadow:
    0 8px 20px oklch(from var(--md-sys-color-primary) l c h / 18%),
    0 2px 6px oklch(0% 0 0deg / 8%);
  transform: var(--transform-hover-lift) scale(var(--scale-grow-sm));
}

.btn--tonal {
  --btn-bg: var(--md-sys-color-secondary-container);
  --btn-color: var(--md-sys-color-on-secondary-container);

  box-shadow: var(--md-sys-elevation-level0);
}

.btn--outlined {
  --btn-bg: transparent;
  --btn-color: var(--md-sys-color-primary);
  --btn-border: var(--md-sys-color-outline);

  border: 1px solid var(--btn-border);
  box-shadow: var(--md-sys-elevation-level0);
}

.btn--text {
  padding: var(--button-padding-y-medium) var(--space-m);

  --btn-bg: transparent;
  --btn-color: var(--md-sys-color-primary);

  box-shadow: var(--md-sys-elevation-level0);
  min-height: var(--height-component-lg);
  padding: clamp(12px, 2.5vw, 12px) clamp(16px, 3.5vw, 16px);
}

/* Estados de interação específicos */
.btn--outlined:hover:not(:disabled) {
  --btn-color: var(--md-sys-color-on-primary-container);
  --btn-border: var(--md-sys-color-primary);

  box-shadow: var(--md-sys-elevation-level1);
}

.btn--outlined:focus-visible:not(:disabled) {
  color: var(--md-sys-color-on-primary-container);
  outline: var(--ring-width-md) solid var(--md-sys-color-primary);
  outline-offset: var(--ring-width-sm);
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 15%,
    var(--md-sys-color-surface)
  );
  border-color: var(--md-sys-color-primary);
  box-shadow:
    0 0 0 var(--ring-width-sm) white,
    0 0 0 4px var(--md-sys-color-primary);
}

.btn--outlined:active:not(:disabled) {
  color: var(--md-sys-color-on-primary-container);
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 20%,
    var(--md-sys-color-surface)
  );
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level0);
  transform: translateY(0);
}

.btn--text:hover:not(:disabled) {
  color: var(--md-sys-color-on-primary-container);
}

.btn--text:focus-visible:not(:disabled) {
  color: var(--md-sys-color-on-primary-container);
  outline: var(--ring-width-md) solid var(--md-sys-color-primary);
  outline-offset: var(--ring-width-sm);
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 15%,
    var(--md-sys-color-surface)
  );
  box-shadow:
    0 0 0 var(--ring-width-sm) white,
    0 0 0 4px var(--md-sys-color-primary);
}

.btn--text:active:not(:disabled) {
  color: var(--md-sys-color-on-primary-container);
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 20%,
    var(--md-sys-color-surface)
  );
  transform: translateY(0);
}

/* ==========================================================================
   5️⃣ 🎯 BOTÕES ESPECIAIS E VARIANTES
   ========================================================================== */

/* Ícones dentro de botões */
.btn .iconify-icon,
.btn .fa-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--size-responsive-lg);
  height: var(--size-responsive-lg);
  font-size: var(--size-responsive-lg);
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.btn:hover .iconify-icon,
.btn:hover .fa-icon {
  transform: scale(1.1) rotate(2deg);
}

.btn:active .iconify-icon,
.btn:active .fa-icon {
  transform: scale(0.95) rotate(-1deg);
}

/* Larguras Utilitárias */
.btn--full {
  width: 100%;
}

/* Botões apenas com ícone */
.btn--icon-only {
  width: var(--component-height-medium);
  min-width: auto;
  height: var(--component-height-medium);
  padding: 0;
}

.btn--icon-only.btn--small {
  width: var(--component-height-small);
  height: var(--component-height-small);
}

.btn--icon-only.btn--large {
  width: var(--component-height-large);
  height: var(--component-height-large);
}

/* Botão Flutuante (FAB) style base */
.btn--floating {
  position: fixed;
  right: var(--size-responsive-sm);
  bottom: clamp(70px, 18dvh, 90px);
  z-index: var(--z-popover);
  box-shadow: var(--md-sys-elevation-level3);
}

/* ==========================================================================
   5️⃣.3 FLOATING ACTION BUTTONS (FAB) - Consolidated from _fab-buttons.css
   ==========================================================================
   FAB buttons são botões flutuantes fixos com elevação e desfoque.
   Usados para ações primárias que devem estar sempre visíveis.
*/

/* --- FAB Base Styles --- */
.btn--fab,
.fab {
  position: fixed;
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-size-mobile);
  height: var(--fab-size-mobile);
  cursor: pointer;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--md-sys-elevation-level3);
  -webkit-backdrop-filter: blur(var(--glass-blur-default));
  backdrop-filter: blur(var(--glass-blur-default));
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-smooth) var(--ease-fluid);
}

/* FAB Variants - Position and Color */
.btn--fab--left,
.section-sidebar__toggle {
  bottom: var(--fab-bottom-margin-mobile);
  left: var(--space-m);
  color: var(--md-sys-color-on-secondary);
  background: var(--md-sys-color-secondary);
}

.btn--fab--right,
.focus-mode-fab {
  right: var(--space-m);
  bottom: var(--fab-bottom-margin-mobile);
  color: var(--md-sys-color-on-secondary);
  background: var(--md-sys-color-secondary);
}

/* FAB States */

.btn--fab:active,
.btn--fab.fab--clicked,
.fab:active,
.fab.fab--clicked {
  transform: scale(0.95);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.btn--fab iconify-icon,
.fab iconify-icon {
  font-size: var(--icon-size-md);

  /* Standard MD3 FAB icon size (24px) */
  pointer-events: none;
}

/* --- FAB Captions (Tooltips) --- */
.btn--fab__caption,
.fab__caption {
  position: absolute;
  bottom: calc(100% + var(--space-s));
  left: 50%;
  z-index: var(--z-popover);
  display: none;
  visibility: hidden;
  max-width: var(--max-width-tooltip, 12.5rem);
  padding: var(--space-xs) var(--space-s);
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--text-xs);

  /* Was 13px */
  font-weight: var(--font-medium);
  line-height: var(--line-height-snug);
  color: var(--brand-neutral-white);
  white-space: nowrap;
  pointer-events: none;
  background: var(--dark-alpha-95);
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: var(--shadow-md);
  opacity: var(--opacity-hidden);
  transform: translateX(-50%) scale(0.95);
  transition:
    opacity var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    visibility var(--duration-fast) var(--ease-snappy);
}

.btn--fab:hover .fab__caption,
.fab:hover .fab__caption {
  visibility: visible;
  opacity: var(--opacity-visible);
  transform: translateX(-50%) scale(1);
}

.btn--fab.is-active .fab__caption,
.fab.is-active .fab__caption,
.section-sidebar.is-open ~ .section-sidebar__toggle .fab__caption {
  visibility: hidden;
  opacity: 0;
}

.btn--fab__caption::after,
.fab__caption::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  content: '';
  border: var(--space-xs) solid transparent;
  border-top-color: var(--dark-alpha-95);
  transform: translateX(-50%);
}

/* FAB Caption Position Variants */
.btn--fab--left .fab__caption,
.fab--left .fab__caption {
  right: auto;
  left: 0;
  transform: translateX(-10%) scale(0.95);
}

.btn--fab--left:hover .fab__caption,
.fab--left:hover .fab__caption {
  transform: translateX(-10%) scale(1);
}

.btn--fab--right .fab__caption,
.fab--right .fab__caption {
  right: 0;
  left: auto;
  transform: translateX(10%) scale(0.95);
}

.btn--fab--right:hover .fab__caption,
.fab--right:hover .fab__caption {
  transform: translateX(10%) scale(1);
}

/* --- FAB Modal State --- */
.body-modal-aberto .section-sidebar__toggle,
.body-modal-aberto .focus-mode-fab,
.body-modal-aberto .btn--fab {
  pointer-events: none;
  opacity: var(--opacity-hidden);
}

/* ==========================================================================
   5️⃣.1 INDEPENDENT BUTTONS (Toggle, Chat, etc.)
   ==========================================================================
   Botões que não herdam de .btn por serem muito específicos
   mas partilham CSS Variables de cor quando aplicável
*/

/* ─────────────────────────────────────────────────────────────────
   TOGGLE BUTTONS - Para alternar estados (on/off)
   ───────────────────────────────────────────────────────────────── */

.btn-toggle,
.toggle-btn {
  display: inline-flex;
  flex: 1 1;
  gap: var(--space-m);
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-l);
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: none;
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.btn-toggle:hover,
.toggle-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
}

.btn-toggle.is-active,
.toggle-btn.is-active,
.btn-toggle.active,
.toggle-btn.active,
.btn-toggle[aria-expanded='true'],
.toggle-btn[aria-expanded='true'] {
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
  border: none;
  box-shadow: var(--shadow-elevation-1);
}

/* Touch feedback for mobile/tablet */

/* ─────────────────────────────────────────────────────────────────
   HEADER BUTTON - Botão de header (ex: toggle de tema)
   ───────────────────────────────────────────────────────────────── */

.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--component-height-medium, 40px);
  height: var(--component-height-medium, 40px);
  min-width: 44px;
  min-height: 44px;
  color: var(--header-btn-color, var(--md-sys-color-on-surface-variant));
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 50%;
  transition: background-color var(--duration-fast) var(--ease-snappy);
}

.header-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
  transform: scale(1.05);
  background-color: var(--white-alpha-10);
}

.header-btn:active {
  transform: scale(0.95);
}

.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--component-height-medium, 40px);
  height: var(--component-height-medium, 40px);
  color: var(--chat-send-color, var(--md-sys-color-on-primary));
  cursor: pointer;
  background: var(--chat-send-bg, var(--md-sys-color-primary));
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    opacity var(--duration-fast) var(--ease-snappy);
  position: absolute;
  top: 50%;
  right: var(--space-s);
  z-index: var(--z-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--md-sys-color-primary);
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  transform: translateY(-50%);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    opacity var(--duration-fast) var(--ease-snappy),
    filter var(--duration-fast) var(--ease-snappy);
}

.chat-send-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  visibility: hidden;
  pointer-events: none;
  cursor: not-allowed;
  opacity: var(--opacity-hidden);
}

.chat-send-btn:not(:disabled):hover {
  transform: scale(1.05);
  background-color: var(--md-sys-color-surface-variant);
  box-shadow: 0 2px 8px oklch(0% 0 0deg / 10%);
  transform: translateY(-50%) scale(1.05);
}

.voice-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--component-height-medium, 40px);
  height: var(--component-height-medium, 40px);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    opacity var(--duration-fast) var(--ease-snappy);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  background-color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--shadow-lg);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    opacity var(--duration-fast) var(--ease-snappy),
    filter var(--duration-fast) var(--ease-snappy);
}

.voice-action-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
  box-shadow: 0 2px 8px oklch(0% 0 0deg / 8%);
  transform: scale(1.05);
  filter: brightness(1.1);
}

.voice-action-btn:active {
  transform: scale(0.95);
}

.voice-action-btn.is-recording {
  color: var(--brand-neutral-white);
  background: var(--brand-error-red);
  border-color: var(--brand-error-red);
  animation: btn-pulse 1.5s infinite;
}

/* ==========================================================================
   5️⃣.2 CLICKABLE CARDS - Cards clicáveis com estrutura interna complexa
   ==========================================================================
   Componentes que se comportam como botões mas têm estrutura de card
   (filhos como icon, title, subtitle, etc.)
*/

/* ─────────────────────────────────────────────────────────────────
   ABOUT PROJECT BUTTON - Card de grupo etário na seção Sobre
   ───────────────────────────────────────────────────────────────── */

.about-project-btn {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-m) var(--space-l);
  color: var(--md-sys-color-on-surface);
  text-align: left;
  cursor: pointer;

  /* Fundo adaptativo ao tema em vez de branco fixo */
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    background var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

.about-project-btn.is-active,
.about-project-btn[aria-expanded='true'] {
  color: var(--md-sys-color-on-surface);
  background: color-mix(
    in srgb,
    var(--accent-color, var(--md-sys-color-primary)) 12%,
    var(--md-sys-color-surface-container-highest)
  );
  border-color: var(--accent-color, var(--md-sys-color-primary));
  box-shadow: var(--shadow-soft-md);
  transform: translateY(-2px);
}

.about-project-btn:active {
  transform: translateY(0);
}

/* Conteúdo interno do card */
.about-project-btn__content {
  display: flex;
  flex: 1 1;
  gap: var(--space-l);
  align-items: center;
  justify-content: space-between;
}

.about-project-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  font-size: var(--text-lg);
  color: var(--md-sys-color-on-primary);
  background: var(--accent-color, var(--md-sys-color-primary));
  border-radius: var(--md-sys-shape-corner-full);
}

.about-project-btn:hover .about-project-btn__icon,
.about-project-btn.is-active .about-project-btn__icon,
.about-project-btn[aria-expanded='true'] .about-project-btn__icon {
  transform: scale(1.1);
}

.about-project-btn__info {
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  align-items: center;
}

.about-project-btn__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface);
}

.about-project-btn__subtitle {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
}

/* Ícones de indicação (chevron, arrow) */
.about-project-btn__chevron,
.about-project-btn__arrow {
  flex-shrink: 0;
  color: var(--md-sys-color-on-surface-variant);
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

.about-project-btn[aria-expanded='true'] .about-project-btn__chevron {
  transform: rotate(180deg);
  color: var(--accent-color, var(--md-sys-color-primary));
}

.about-project-btn[aria-expanded='true'] .about-project-btn__arrow {
  transform: rotate(90deg);
  color: var(--accent-color, var(--md-sys-color-primary));
}

/* REMOVIDO: FAQ BUTTON section (linhas 847-913)
   Motivo: Duplicação desnecessária. O .faq-btn só é usado dentro de #modal-faq,
   e a versão específica #modal-faq .faq-btn já existe em _dialogs.css com todos
   os estilos necessários. As subclasses .faq-btn__icon e .faq-btn__chevron
   não eram usadas no HTML (o HTML usa .seta-icon).
*/

/* ==========================================================================
   6️⃣ 📦 CONTAINERS DE BOTÕES (Consolidated) - Aplicar Regra do Agrupamento
   ========================================================================== */

/*
 * Standard Action Containers
 * Agrupa botões com gap padrão e alinhamento central ou inicial
 */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--container-button-gap-mobile, var(--space-l));
  align-items: center;
  justify-content: center;
  padding-right: var(--space-inset-screen);
  padding-left: var(--space-inset-screen);
}

/* Wrappers e Containers de Bloco */
.section-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--space-xs);
  text-align: center;
}

.section-actions--centered {
  align-items: center;
}

.section-actions-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--space-m);
}

.section-actions-group .section-actions {
  padding: 0;
}

/* ==========================================================================
   7️⃣ 🎯 BOTÕES ESPECÍFICOS (Por Componente/Página)
   ========================================================================== */

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK CONSOLIDATED)
   ========================================================================== */

/* 📱 MOBILE-FIRST BASE (extraído de ≤768px) */

.btn--small {
  width: auto;
  height: auto;
  min-height: var(--height-component-sm);
  padding: var(--space-s) var(--space-l);
  font-size: var(--text-sm);
}

.btn--medium {
  min-height: var(--height-component-md);
  padding: clamp(12px, 3vw, 16px) clamp(20px, 5vw, 24px);
  font-size: var(--text-sm);
}

.btn--large {
  min-height: var(--height-component-xl);
  padding: clamp(16px, 3.5vw, 20px) clamp(28px, 7vw, 32px);
  font-size: var(--text-base);
}

.btn--small .iconify-icon,
.btn--small .fa-icon {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}

.btn--icon-only .iconify-icon,
.btn--icon-only .fa-icon {
  width: var(--size-responsive-lg);
  height: var(--size-responsive-lg);
  font-size: var(--size-responsive-lg);
}

.form-actions > .btn,
.card-footer .btn,
.servico-card .btn,
.blog-card .btn,
.pricing-card .btn,
.pricing-footer .btn,
.section-actions .btn {
  justify-content: center;
  max-width: var(--container-button-max-width, 100%);
}

.sidebar__close {
  top: max(16px, env(safe-area-inset-top, 16px));
  right: max(12px, env(safe-area-inset-right, 12px));
  width: var(--height-component-md);
  height: var(--height-component-md);
}

.card-footer a:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--height-component-md);
  padding: clamp(12px, 3vw, 16px) clamp(20px, 5vw, 24px);
  margin-top: var(--space-l);
  font-size: clamp(0.9375rem, 4vw, 1rem);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-primary);
  text-decoration: none;
  background-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

/* 🖥️ DESKTOP (>768px) - Overrides */

/* 🖱️ ACCESSIBILITY & MOTION PREFERENCES */

/* ===================================
   ESTILOS DE ACESSIBILIDADE PARA BOTÕES
   =================================== */

/* Indicadores de teclas para usuários de teclado */
.keyboard-user .btn::after {
  position: absolute;
  bottom: -20px;
  left: 50%;
  font-size: var(--text-label-sm);
  color: var(--md-sys-color-focus-outline);
  content: '';
  opacity: 0.7;
  transform: translateX(-50%);
}

/* DISPOSITIVOS COM SUPORTE A HOVER */

/* DISPOSITIVOS SEM SUPORTE A HOVER */

/* NOTA: prefers-reduced-motion gerido universalmente em _reset.css */
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Configuração Base: Tamanhos Semânticos e Renderização.
  2. Iconify-Icon: Suporte SVG e Alinhamento.
  3. Classes de Tamanho (.icon-system--*)
  4. Classes de Cor (.icon-system--*)
  5. Backgrounds em Ícones.
  6. Ícones com Texto (.icon-with-text, .icon-text-*)
  7. Touch Targets e Botões.
  8. Alinhamento Óptico.
  9. Ícones Sociais: Estados, Visibilidade e Animações.
  10. Loading Spinner.
  11. MEDIA QUERIES: Dark Mode fallbacks.
*/

/* ===================================
   COMPONENTES - SISTEMA DE ÍCONES MD3
   =================================== */

/* Icon sizes definidos em _variables-typography.css --icon-size-* */

.icon-system {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1em;
  vertical-align: middle;
  transition:
    transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);

  /* Ensure clean rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-icon.icon-system,
iconify-icon.icon-system {
  font-size: inherit;
  color: inherit;
}

/* Ensure iconify-icon elements have proper display before JavaScript processes them */
iconify-icon {
  display: inline-block;
  visibility: visible;
  width: 1em;
  min-width: 1em;

  /* Prevent collapsing */
  height: 1em;
  min-height: 1em;
  line-height: 1;
  vertical-align: -0.125em;
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */

  /* Optical alignment with text baseline */
  color: inherit;
  opacity: 1;
}

/* Ensure SVG icons from Iconify render properly */
iconify-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

/* NOTA: Hover behavior para ícones em botões movido para _hover-states.css */

.icon-system:not(.btn .icon-system, .experience-column .icon-system):hover {
  background-color: var(--state-hover-surface);
  border-radius: var(--md-sys-shape-corner-small);
  transform: scale(1.1);
}

/* Tamanhos de Ícone (Updated to use Tokens) */
.icon-system--xs {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  font-size: var(--icon-size-xs);
}

.icon-system--sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  font-size: var(--icon-size-sm);
}

.icon-system--md {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  font-size: var(--icon-size-md);
}

.icon-system--lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  font-size: var(--icon-size-lg);
}

.icon-system--xl {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  font-size: var(--icon-size-xl);
}

.icon-system--2xl {
  width: var(--icon-size-2xl);
  height: var(--icon-size-2xl);
  font-size: var(--icon-size-2xl);
}

.icon-system--button-small {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  font-size: var(--icon-size-sm);
}

.icon-system--button-medium {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  font-size: var(--icon-size-md);
}

.icon-system--button-large {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  font-size: var(--icon-size-lg);
}

/* Classes para remover estilos inline */
.icon-base--size-0-8em {
  font-size: 0.8em;
}

.icon-base--size-0-6em {
  font-size: 0.6em;
}

.icon-base--margin-left-sm {
  margin-left: var(--space-4xs);
}

/* Cores de Ícone */
.icon-system--primary {
  color: var(--md-sys-color-primary);
}

.icon-system--on-primary {
  color: var(--md-sys-color-on-primary);
}

.icon-system--secondary {
  color: var(--md-sys-color-secondary);
}

.icon-system--on-secondary {
  color: var(--md-sys-color-on-secondary);
}

.icon-system--tertiary {
  color: var(--md-sys-color-tertiary);
}

.icon-system--on-tertiary {
  color: var(--md-sys-color-on-tertiary);
}

.icon-system--surface {
  color: var(--md-sys-color-surface);
}

.icon-system--on-surface {
  color: var(--md-sys-color-on-surface);
}

.icon-system--on-surface-variant {
  color: var(--md-sys-color-on-surface-variant);
}

.icon-system--error {
  color: var(--md-sys-color-error);
}

.icon-system--on-error {
  color: var(--md-sys-color-on-error);
}

/* Ícones com Background */
.icon-system--background {
  padding: var(--space-s);
  background-color: var(--md-sys-color-surface-variant);
  border-radius: var(--md-sys-shape-corner-small);
}

.icon-system--background-primary {
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary-container-low);
}

.icon-system--background-secondary {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
}

.icon-system--background-tertiary {
  color: var(--md-sys-color-tertiary);
  background-color: var(--md-sys-color-tertiary-container);
}

.icon-system--decorative {
  speak: never;
}

/* Ícones com Texto */
.icon-with-text {
  display: inline-flex;
  gap: var(--space-s);
  align-items: center;

  /* Aplicar espaçamento íntimo */
}

/* Espaçamento entre ícone e texto segundo a Regra do Espaçamento Íntimo */

/* O espaçamento deve ser pequeno (4px a 8px) para manter coesão */
.icon-text-tight {
  display: inline-flex;
  gap: var(--space-s);
  align-items: center;

  /* 4px-8px de espaçamento */
}

.icon-text-standard {
  display: inline-flex;
  gap: var(--space-s);
  align-items: center;

  /* 8px de espaçamento */
}

/* Ícones soltos - garantir área de toque mínima de 44px */
.icon-touch-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: var(--space-s);

  /* Adiciona padding para atingir área de toque mínima */
}

/* Ícones em botões - Espaçamento gerido pelo gap do .btn em _buttons.css */

/* Alinhamento óptico para ícones como "Play" */
.icon-optical-adjust {
  transform: translateX(var(--space-4xs));

  /* Compensação leve para ícones com pontas */
}

.icon-optical-adjust-heavy {
  transform: translateX(var(--space-4xs));

  /* Compensação maior para ícones com mais desequilíbrio visual */
}

/* Alinhamento óptico para ícones em listas */
li>iconify-icon,
li>.icon-system {
  flex-shrink: 0;

  /* Compensação para alinhar visualmente com a altura-x do texto */
  margin-top: 0.1em;
}

/* ÍCONES SOCIAIS - VERSÃO FINAL LIMPA */

/* --- ESTADO BASE --- */
.menu-social-links {
  display: flex;
  gap: var(--space-l);
  justify-content: center;
  padding: var(--space-xl) 0;
}

.menu-social-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--height-component-md);
  min-height: var(--height-component-md);
  background-color: var(--md-sys-color-surface-variant);
  border-radius: 50%;
  opacity: 0;
  transform: rotateY(20deg) rotateX(-35deg) translateZ(-500px);
  transition: transform var(--md-sys-motion-duration-medium2) var(--ease-fluid);
}

/* Ícones DENTRO do link */
.icon-social {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  translate: -50% -50%;
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
}

/* --- CONTROLE DE VISIBILIDADE (Light/Dark) --- */
/* .theme-icon-* usa opacity em _badges.css — não usar display aqui */
.icon-light,
html.dark-theme .icon-dark {
  display: block;
}

.icon-dark,
html.dark-theme .icon-light {
  display: none;
}

/* Scoped colors only */
.icon-social.icon-light {
  color: var(--md-sys-color-on-surface-variant);
}

.icon-social.icon-dark {
  color: var(--brand-neutral-white);
}

/* Animações de entrada dos ícones sociais */
.navbar__menu.is-active .menu-social-links a {
  opacity: 1;
  transform: rotateY(0) rotateX(0) translateZ(0);
  animation:
    tilt-in-fwd-tr var(--md-sys-motion-duration-long1) var(--ease-out-quint) both,
    pulse var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) 1.2s infinite;
}

/* Delays individuais para entrada */
.navbar__menu.is-active .menu-social-links a:nth-child(1) {
  animation-delay: var(--md-sys-motion-duration-medium1), var(--md-sys-motion-duration-long2);
}

.navbar__menu.is-active .menu-social-links a:nth-child(2) {
  animation-delay:
    var(--md-sys-motion-duration-medium2),
    calc(var(--md-sys-motion-duration-long2) + var(--md-sys-motion-duration-short1));
}

/* ANIMAÇÃO DE SAÍDA - quando está fechando */
.navbar__menu.is-closing .menu-social-links a {
  animation: tilt-out-bwd-tl var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized) both;
}

.navbar__menu.is-closing .menu-social-links a:nth-child(1) {
  animation-delay: var(--md-sys-motion-duration-short1);
}

.navbar__menu.is-closing .menu-social-links a:nth-child(2) {
  animation-delay: 0s;
}

/* HOVER (só quando menu está ativo) */
.navbar__menu.is-active .menu-social-links a:hover {
  filter: brightness(1.2);
  transform: scale(1.1) translateY(calc(var(--space-4xs)*-1));
  animation: social-bounce 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  animation-play-state: running;
}

.menu-social-links a:active {
  transform: scale(0.9);
}

/* Loading Spinner */
.loading-spinner {
  display: inline-block;
  width: var(--space-xl);
  height: var(--space-xl);
  border: 2px solid currentcolor;
  border-top-color: var(--color-transparent);
  border-radius: var(--md-sys-shape-corner-full);
  animation: spin var(--md-sys-motion-duration-long1) var(--easing-linear) infinite;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. TIPOGRAFIA DE CARDS: Títulos e Descrições unificados.
  2. CLASSE BASE UNIFICADA: .card-base, .card, .beneficio-item, etc.
  3. ESTADOS DE HOVER: Efeitos de elevação e border color.
  4. VARIANTES DE ACENTO: data-accent (Primary, Secondary, Tertiary).
  5. ESTRUTURA INTERNA: Header, Body, Footer, Listas em Cards.
  6. SIDEBAR CARDS: Estilos específicos para sidebars.
  7. STEP CARDS: Sistema de Timeline e Passos (Mobile/Desktop).
  8. MEDIA QUERIES:
     - Mobile Pequeno (Container Queries).
     - Timeline Mobile vs Desktop.
     - Premium Glass effects em Desktop.
*/

/* ===================================
   COMPONENTES - CARDS MD3 - FASE 2 CONSOLIDAÇÃO
   =================================== */

/* ✅ TIPOGRAFIA UNIFICADA - SINGLE SOURCE OF TRUTH */

/* Títulos de Cards */
.card-base__title,
.beneficio-item__title,
.carousel__slide-title,
.sidebar-card__title {
  padding: var(--space-xs) 0;
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--md-sys-color-on-surface);
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  text-wrap: balance;
  transition: color var(--duration-fast) var(--ease-snappy);
}

.card:hover .card-base__title,
.beneficio-item:hover .beneficio-item__title,
.sidebar-card:hover .sidebar-card__title {
  color: var(--md-sys-color-primary);
}

/* Descrições/Textos de Cards */
.card-base__text,
.card__text,
.card__description,
.beneficio-item__description,
.carousel__slide-description,
.sidebar-card__text {
  margin-block-end: var(--space-s);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
}

/* ✅ CLASSE BASE UNIFICADA - SISTEMA CONSOLIDADO */

.card-base,
.card,
.beneficio-item,
.sidebar-card,
.description-about-me {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-m);
  margin: 0;

  /* Define as classes base como containers para suas variantes */
  container-type: inline-size;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-rich-md);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

.card,
.card__body {
  justify-content: center;
}

/* pricing-card tem estrutura própria (flip cards) - estilos em _pricing.css */

.sidebar-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: var(--space-l);
  overflow: hidden;
}

.sidebar-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--space-4xs);
  height: 100%;
  content: '';
  background: var(--gradient-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--duration-smooth) var(--ease-ethereal);
}

/* ✅ ESTADOS DE HOVER - ULTRA SMOOTH */

/* Active fora do @media para estar disponível em ecrãs touch e rato */
.card:active,
.beneficio-item:active,
.sidebar-card:active,
.description-about-me:active {
  box-shadow:
    0 4px 12px oklch(from var(--md-sys-color-primary) l c h / 6%),
    0 1px 4px oklch(0% 0 0deg / 4%);
  transform: translateY(0) scale(0.995);
}

/* Removido transform: translateX para melhor UX */

/* Variantes de Acento - Atualizado com backgrounds (unificado mobile) */
.card[data-accent='primary'],
.beneficio-item[data-accent='primary'] {
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container-low);
}

.card[data-accent='secondary'],
.beneficio-item[data-accent='secondary'] {
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
}

.card[data-accent='tertiary'],
.beneficio-item[data-accent='tertiary'] {
  color: var(--md-sys-color-on-tertiary-container);
}

.card[data-accent='primary-container'],
.beneficio-item[data-accent='primary-container'] {
  color: var(--md-sys-color-on-primary-container);
}

/* Estrutura de Cards */
.carousel-slide-content {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

.card {
  justify-content: space-between;
}

.card-list li {
  display: flex;
  gap: var(--space-s);
  align-items: center;
}

.card-list i,
.card-list .fa-icon,
.card-list iconify-icon {
  flex-shrink: 0;
  margin-inline-end: 0;
  font-size: var(--text-base);
  color: var(--md-sys-color-secondary);
}

/* Sidebar Cards Especiais */
.sidebar-card--highlight {
  background: linear-gradient(135deg,
      rgb(var(--md-sys-color-secondary-rgb), 0.1),
      rgb(var(--md-sys-color-secondary-rgb), 0.05));
  border-color: var(--md-sys-color-secondary);
}

.sidebar-card__header {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m) var(--space-l);
  margin: 0;
  background-color: var(--md-sys-color-surface-container-high);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0 0;
}

.sidebar-card__header iconify-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--height-component-lg);
  height: var(--height-component-lg);
  padding: var(--space-m);
  font-size: var(--button-icon-size-large);
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
}

.sidebar-card:hover .sidebar-card__header iconify-icon {
  transform: scale(1.08) rotate(-2deg);
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

.sidebar-card__header h3 {
  margin-block: var(--space-l) var(--space-s);

  /* Aplicar Regra do Desequilíbrio */
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--md-sys-color-on-surface);

  /* Aplicar Regra do Desequilíbrio */
}

.sidebar-card__content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
}

.sidebar-card__content strong {
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-primary);
}

.sidebar-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.sidebar-lista__item {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  min-height: var(--height-component-sm);
  padding: var(--space-m) var(--space-l);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);

  & .check-icon {
    flex-shrink: 0;
    font-size: var(--button-icon-size-medium);
    color: var(--md-sys-color-tertiary);
      color: var(--md-sys-color-primary);
  }

  &:hover {
    background: var(--md-sys-color-surface-variant);
    border-color: var(--md-sys-color-primary)
  }
}

/* ===================================
   STEP CARDS - LISTAS E BADGES
   =================================== */

.step-benefits {
  max-height: 12.5rem;
  padding: 0;
  margin: var(--space-m) 0 0 0;
  overflow: hidden;
  list-style: none;
  opacity: var(--opacity-visible);
  transform: translateY(0);
  transition:
    max-height var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
    display: none;
}

.step-benefits li {
  position: relative;
  padding-inline-start: var(--space-l);
  margin-block-end: var(--space-s);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
    font-size: var(--text-sm);
}

.step-benefits li::before {
  position: absolute;
  left: 0;
  font-weight: bold;
  color: var(--md-sys-color-primary);
  content: '•';
}

.step-description {
  visibility: hidden;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;

  /* FORCE LEFT ALIGNMENT */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  text-wrap: pretty;
  opacity: var(--opacity-hidden);
  transform: translateY(var(--space-l));
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    max-height var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid),
    visibility 0s linear var(--duration-smooth);
    visibility: visible;
    max-height: none;
    margin-top: var(--space-m);
    opacity: var(--opacity-visible);
    transform: none;
}

.step-description--mobile {
  display: block;
}

.step-description--desktop {
  display: none;
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* ♿ REDUCED MOTION - Regra universal aplicada em _reset.css */

/* (animation-duration: 0.01ms, transition-duration: 0.01ms para *) */

/* MOBILE PEQUENO (≤374px) */
@container (width <=374px) {
  .card,
  .beneficio-item {
    box-sizing: border-box;

    /* Display e Flex-direction herdados do base */
    width: 100%;
    min-height: var(--height-component-xl);
    padding: var(--space-m);
    contain: layout style paint;
    text-align: left;
    cursor: default;
    transform: translateZ(0);
    transition:
      box-shadow var(--duration-fast) var(--ease-snappy),
      transform var(--duration-fast) var(--ease-snappy);
  }

  .sidebar-card {
    padding: var(--space-m);
    text-align: left;
  }

  .card:active,
  .beneficio-item:active {
    box-shadow: var(--md-sys-elevation-level0);
    transform: translateZ(0) scale(0.98);
    transition: transform var(--duration-fast) var(--ease-snappy);
  }

  .card:focus-visible,
  .beneficio-item:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
  }

  .card__header,
  .sidebar-card__header {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    padding-bottom: clamp(8px, 2.5vw, 10px);
    margin-bottom: clamp(10px, 3vw, 12px);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }

  .card__icon,
  .sidebar-card__header iconify-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: clamp(var(--touch-target-min), 12vw, var(--height-component-lg));
    min-width: var(--touch-target-min);
    height: clamp(var(--touch-target-min), 12vw, var(--height-component-lg));
    min-height: var(--touch-target-min);
    font-size: var(--font-size-headline-small);
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
    border-radius: var(--md-sys-shape-corner-medium);
  }

  .card-base__title,
  .beneficio-item__title,
  .step-card__title,
  .carousel__slide-title,
  .sidebar-card__title {
    flex: 1 1;
    margin: 0 0 var(--space-m) 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--line-height-snug);
    color: var(--md-sys-color-on-surface);
  }

  .card__body,
  .sidebar-card__content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: var(--space-s);
  }

  .card-base__text,
  .card__text,
  .card__description,
  .beneficio-item__description,
  .step-card__description,
  .carousel__slide-description,
  .sidebar-card__text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
    color: var(--md-sys-color-on-surface-variant);
  }

  .card__footer {
    padding-top: clamp(10px, 3vw, 12px);
    margin-top: clamp(12px, 4vw, 16px);
    border-top: 1px solid var(--md-sys-color-outline-variant);
  }

  .card__action {
    display: inline-flex;
    gap: var(--space-s);
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--height-component-md);
    padding: clamp(10px, 3vw, 12px) clamp(14px, 4vw, 16px);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--md-sys-color-primary);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    transition:
      background-color var(--md-sys-motion-duration-short4) var(--ease-snappy),
      border-color var(--md-sys-motion-duration-short4) var(--ease-snappy);
  }

  .card__action:active {
    background-color: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-primary);
  }

  /* pricing-card estilos movidos para _pricing.css */

  /* .pricing-features moved to _pricing.css (S.S.O.T.) */

  .beneficio-item__icon {
    display: block;
    margin-block-end: var(--space-s);
    font-size: var(--font-size-display-medium);
    color: var(--md-sys-color-primary);
  }

  .beneficio-item__title {
    margin-block-end: var(--space-s);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--md-sys-color-on-surface);
  }

  .beneficio-item__description {
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
    color: var(--md-sys-color-on-surface-variant);
  }

  .sidebar-card::before {
    background: var(--gradient-primary, var(--md-sys-color-primary));
  }

  .sidebar-card--highlight {
    background: linear-gradient(135deg, rgb(103 80 164 / 8%), rgb(103 80 164 / 4%));
  }

  .sidebar-lista {
    gap: var(--space-s);
    margin-block-start: clamp(10px, 3vw, 12px);
  }

  .sidebar-lista__item {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
    padding: clamp(8px, 2.5vw, 10px);
    font-size: var(--text-sm);
    border: 1px solid transparent;
    border-radius: var(--md-sys-shape-corner-small);
    transition: background-color var(--md-sys-motion-duration-short4) ease;
  }

  .sidebar-lista__item .check-icon {
    font-size: 1.1em;
  }

  .sidebar-lista__item:active {
    background-color: var(--md-sys-color-surface-container);
  }

  .card-list {
    padding: 0;
    margin: clamp(10px, 3vw, 12px) 0;
    list-style: none;
  }

  .card-list li {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
    padding: clamp(4px, 1.5vw, 6px) 0;
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
  }

  .card-list i,
  .card-list .fa-icon,
  .card-list iconify-icon {
    flex-shrink: 0;
    margin-block-start: 2px;
    font-size: var(--text-base);
    color: var(--md-sys-color-secondary);
  }

  .cards-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: var(--space-m);
    width: 100%;
    margin: 0;
  }
}

/* SMARTPHONES LANDSCAPE (480px-767px) */

/* DESKTOP (> 767px) */

/* Touch e Dark Theme (aplicam-se em todos os ecrãs) */

  .dark-theme .card,
  .dark-theme .beneficio-item {
    background: var(--md-sys-color-surface-variant);
    border-color: var(--md-sys-color-outline);
    box-shadow:
      0 2px 8px oklch(0% 0 0deg / 30%),
      0 1px 4px oklch(0% 0 0deg / 20%);
  }

  /* Timeline & Steps Mobile */
  .timeline-container {
    position: relative;
    display: block;
    width: 100%;
    max-width: var(--max-width-content-narrow);
    margin: 0 auto;
    opacity: var(--opacity-hidden);
    transform: translateY(20px);
    transition:
      opacity var(--duration-elegant) var(--ease-fluid),
      transform var(--duration-elegant) var(--ease-fluid);
  }

  .line-wrapper {
    position: absolute;
    top: 25px;
    bottom: 155px;

    /* Ajustado para terminar no centro do último dot */
    left: 17px;

    /* Ajustado para 17px para alinhar matematicamente com os dots (34px - stroke) */
    z-index: var(--z-base);
    width: 2px;
  }

  .line-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-extra-small);
    opacity: 0.2;
  }

  .line-progress {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
        var(--md-sys-color-primary) 0%,
        var(--md-sys-color-primary) 70%,
        white 100%);
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow:
      0 0 10px var(--md-sys-color-primary),
      0 0 20px var(--md-sys-color-primary);

    /* scaleY(0) em vez de height:0% — compositing-friendly */
    transform: scaleY(0);
    transform-origin: top;

    /* animation: fillLine 3.5s linear forwards; REMOVED auto-play */
  }

  /* Trigger animation via JS */
  .timeline-visible .line-progress {
    /* Height controlled by JS */
    transition: none;
  }

  /* Animation Keyframes REMOVED (fillLine) - handled by JS */

  /* Efeito de Cometa / Brilho na ponta */
  .line-progress::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 6px;
    height: 6px;
    content: '';
    background: white;
    border-radius: 50%;
    box-shadow:
      0 0 10px white,
      0 0 20px var(--md-sys-color-primary),
      0 0 40px var(--md-sys-color-primary);
    opacity: var(--opacity-visible);
    transform: translateX(-50%);
  }

  .step-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 24px;
  }

  .step-card {
    position: relative;
    padding: var(--space-l);
    margin-left: 44px;

    /* Containment para backdrop-filter com animação */
    contain: layout style paint;
    pointer-events: none;
    cursor: default;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    opacity: 0.3;
    filter: grayscale(1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(10px);
    animation: softTurnOn var(--duration-elegant) var(--ease-fluid) forwards paused;
  }

  .step-card h3 {
    margin: 0 0 8px;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--md-sys-color-on-surface);
  }

  .step-card p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--line-height-snug);
    color: var(--md-sys-color-on-surface-variant);
  }

  .step-card:active {
    background-color: var(--md-sys-color-surface-container-high);
    transform: none;
  }

  .step-dot {
    position: absolute;
    top: 20px;
    left: -32px;
    z-index: var(--z-elevated);
    display: block;
    width: 12px;
    height: 12px;
    background-color: var(--md-sys-color-surface);
    border: 2px solid var(--md-sys-color-outline);
    border-radius: 50%;
    animation: softTurnOnDot var(--duration-elegant) var(--ease-fluid) forwards paused;
  }

  /* Container Visible State */
  .timeline-visible.timeline-container,
  .timeline-visible#services-cards {
    opacity: var(--opacity-visible);
    transform: translateY(0);
  }

  /* Allow animations to run when visible */
  .timeline-visible .step-card,
  .timeline-visible .step-dot {
    animation-play-state: running;
  }

  /* JS-Driven Activation States */

  /* Force initial state even if other animation classes are present */
  .timeline-container.timeline-visible .step-card,
  .timeline-container.timeline-visible .step-dot {
    opacity: 0.3;
    filter: grayscale(1);
    transform: none;
    transition:
      opacity var(--duration-smooth) ease,
      filter var(--duration-smooth) ease,
      transform var(--duration-smooth) ease;
    animation: none;

    /* Kill existing animations */
  }

  .timeline-container.timeline-visible .step-wrapper.is-active .step-card,
  .timeline-container.timeline-visible .step-wrapper.is-active .step-dot {
    opacity: var(--opacity-visible);
    filter: grayscale(0);
    box-shadow: none;
    transform: translateY(0);
    animation: none;
  }

  /* Remove fixed delays - controlled by JS */
  .timeline-container.timeline-visible .step-wrapper .step-card,
  .timeline-container.timeline-visible .step-wrapper .step-dot {
    animation-delay: 0s;
    animation-play-state: running;
  }

  .action-container {
    margin-top: 40px;
    opacity: var(--opacity-hidden);
    animation: fadeIn 1s ease forwards 3.5s;
  }

  /* Variantes de Cor Mobile */
  .step-card--blue {
    border-color: var(--brand-primary-blue);
  }

  .step-card--blue .step-label {
    color: var(--brand-primary-blue);
  }

  .step-dot--blue {
    background-color: var(--brand-primary-blue);
    border-color: var(--brand-primary-blue);
  }

  .step-card--green {
    border-color: var(--brand-tertiary-green);
  }

  .step-card--green .step-label {
    color: var(--brand-tertiary-green);
  }

  .step-dot--green {
    background-color: var(--brand-tertiary-green);
    border-color: var(--brand-tertiary-green);
  }

  .step-card--orange {
    border-color: var(--brand-warning-orange);
  }

  .step-card--orange .step-label {
    color: var(--brand-warning-orange);
  }

  .step-dot--orange {
    background-color: var(--brand-warning-orange);
    border-color: var(--brand-warning-orange);
  }

  .step-card--purple {
    border-color: var(--brand-primary-gold);
  }

  .step-card--purple .step-label {
    color: var(--brand-primary-gold);
  }

  .step-dot--purple {
    background-color: var(--brand-primary-gold);
    border-color: var(--brand-primary-gold);
  }

/* DESKTOP (≥1025px) - PREMIUM GLASS & GRIDS */

/* FAQ CARD RENAMES/FIXES (Moved from style.css) */
.faq-card {
  background-color: var(--md-sys-color-surface-container);
}

.faq-card.is-expanded {
  background-color: var(--md-sys-color-surface-container-high);
}

/* ✅ Imagens dentro de cards devem seguir a estética arredondada */
.card img,
.beneficio-item img,
.servico-card img,
.sidebar-card img,
.artigos-modal__card img {
  border-radius: var(--md-sys-shape-corner-medium);
}

/* ==========================================================================
   CONSOLIDATED HOVER INTERACTIONS (From _hover-states.css)
   ========================================================================== */

/* 1. Icon Rotation */
.card:hover .icon-system {
  transform: rotate(5deg) scale(1.1);
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

/* 2. Service Icons */
.skeleton-service-card,
.card:hover .skeleton-service-icon {
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid);
}

/* 3. Title Color Change */

/* Note: .card-title hover removed - class not in use */

/* 4. Button Highlighting */
.card:hover .btn--outlined {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

/* 5. Dark Theme Elevation */
html.dark-theme .card:hover {
  box-shadow: 0 var(--space-m) calc(var(--space-xl)*1.33) oklch(0% 0 0deg / 40%);
}

/* ==========================================================================
   CONSOLIDATED MEDIA QUERIES
   ========================================================================== */

/* TABLET PORTRAIT (768px-1024px) - From _carousel.css */

/* Accessibility - Reduced Motion - Regra universal aplicada em _reset.css */
}
/* MODAL SYSTEM: Base modal imported first, then variants */
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Modal Container Base: Lógica de visibilidade e posicionamento.
  2. Overlay/Backdrop: Efeito glassmorphism e desfoque padrão.
  3. Painel de Conteúdo: Pop-in, scroll e elevação.
  4. Z-Index System: Gestão de camadas universal.
  5. Estados: .is-open, .is-closing.
  6. Animações Base: Fade, slide, scale.
  7. Estrutura Semântica: Header, Body, Footer.
  8. Variantes: .modal--fullscreen, .modal--sidebar, .modal--loading.
  9. MEDIA QUERIES: Responsividade padrão.
*/

/* ===================================
   MODAL BASE SYSTEM
   Fundação para todos os modais do projeto
   Material Design 3 + OKLCH
   =================================== */

/* ==========================================================================
   0. OVERLAYS CONTAINER
   Container pai de todos os modais/sidebars.
   pointer-events: none garante que não bloqueia a página quando vazio.
   ========================================================================== */

.overlays-container {
  pointer-events: none;
}

/* ==========================================================================
   1. MODAL CONTAINER BASE
   ========================================================================== */

.modal {
  /* Posicionamento */
  position: fixed;
  inset: 0;

  /* Containment — isola paint/layout do resto da página */
  contain: layout style paint;

  /* Visibilidade e Z-Index */
  z-index: var(--z-modal);

  /* Bloqueia interação quando fechado (defense-in-depth com visibility:hidden) */
  pointer-events: none;

  /* Layout */
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;

  /* Transições */
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    visibility var(--duration-smooth);
}

/* Estado Aberto */
.modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Estado Fechando (para animação de saída) */
.modal.is-closing {
  pointer-events: none;
}

/* ==========================================================================
   2. OVERLAY / BACKDROP
   ========================================================================== */

.modal__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  width: 100%;
  height: 100%;

  /* Interação */
  cursor: pointer;

  /* Glassmorphism padrão */
  background: var(--glass-overlay-bg);
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--glass-blur-default));
  backdrop-filter: blur(var(--glass-blur-default));
  transition: opacity var(--duration-elegant) var(--ease-fluid);
}

.modal.is-open .modal__overlay {
  opacity: 1;
}

/* ==========================================================================
   3. CONTEÚDO (PANEL)
   ========================================================================== */

.modal__content {
  position: relative;
  z-index: var(--z-modal);

  /* Dimensões */
  width: 100%;
  max-width: var(--max-width-content-narrow);
  max-height: 95dvh;

  /* Layout flex para iOS compatibilidade (sem sticky dentro de fixed) */
  display: flex;
  flex-direction: column;

  /* Estilo Visual */
  padding: var(--space-l);

  /* Scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--md-sys-color-primary) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--shadow-2xl);

  /* Estado Inicial para Pop-in (sem filter:blur — paint-heavy em mobile) */
  opacity: 0;
  transform: translateY(var(--space-2xl)) scale(0.95);

  /* Transições — apenas compositing-friendly (transform + opacity) */
  transition:
    transform var(--duration-elegant) var(--ease-ethereal),
    opacity var(--duration-smooth) var(--ease-fluid);
}

/* Estado Aberto */
.modal.is-open .modal__content {
  opacity: 1;
  transform: var(--transform-reset);
}

/* Scrollbar Customizada */
.modal__content::-webkit-scrollbar {
  width: var(--space-s);
}

.modal__content::-webkit-scrollbar-track {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-full);
}

.modal__content::-webkit-scrollbar-thumb {
  background-color: var(--md-sys-color-primary);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: var(--md-sys-shape-corner-full);
}

/* Alguns modais mantêm header/footer fixos e deslocam o scroll para o body.
   O indicador fica igualmente no lado direito interno do contentor scrollável. */
.modal__body {
  scrollbar-color: var(--md-sys-color-primary) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.modal__body::-webkit-scrollbar {
  width: var(--space-s);
}

.modal__body::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--md-sys-shape-corner-full);
}

.modal__body::-webkit-scrollbar-thumb {
  background-color: var(--md-sys-color-primary);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: var(--md-sys-shape-corner-full);
}

/* ==========================================================================
   4. Z-INDEX UNIVERSAL
   ========================================================================== */

/* Todos os modais ficam acima da navbar */
.modal,
.articles-modal,
.pricing-modal,
.pricing-modal-overlay,
.exp-flipper__mobile-modal-overlay,
.articles-modal-bottom-sheet,
.modal-loading {
  z-index: var(--z-modal);
}

/* Quando QUALQUER modal está aberto, navbar fica visível */
body:has(.modal.is-open) .navbar,
body:has(.modal.is-open) .navbar.navbar--hidden,
body:has(.articles-modal.is-open) .navbar,
body:has(.articles-modal.is-open) .navbar.navbar--hidden,
body:has(.pricing-modal.is-open) .navbar,
body:has(.pricing-modal.is-open) .navbar.navbar--hidden,
body:has([class*='modal'].is-open) .navbar,
body:has([class*='modal'].is-open) .navbar.navbar--hidden {
  transform: translateY(0) !important;
}

/* Menu mobile também fica acima da navbar */

/* ==========================================================================
   5. ESTRUTURA SEMÂNTICA
   ========================================================================== */

/* ==========================================================================
   5.1 HEADER (Sistema Unificado)
   ========================================================================== */

/* Header Base */
.modal__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
  text-align: center;
}

/* ==========================================================================
   5.2 TÍTULOS BICROMÁTICOS (Two-Color Pattern)
   ========================================================================== */

/* Modal title - ÚNICA definição base, sem duplicações em outros ficheiros */
.modal__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4xs);
  align-items: baseline;
  justify-content: center;
  padding: var(--space-m) 0 0;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
}

/* Palavra de destaque em azul - primeira parte do título */
.modal__title .title-accent,
.modal__title .texto-azul {
  color: var(--md-sys-color-primary);

  /* Azul */
}

/* Variante: Título maior (FAQ, reference) */
.modal__title--large {
  font-size: var(--text-4xl);

  /* 36px */
}

/* Subtítulo - 85% opacidade para consistência (como Community) */
.modal__subtitle,
.modal__header p {
  margin-bottom: var(--space-s);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.85;
}

/* ==========================================================================
   5.3 HEADER MODIFIERS (Compartilhados)
   ========================================================================== */

/* Modifier: Header com background surface (feedback, community)
   Para formulários e modais interativos */
.modal__header--surface {
  flex-shrink: 0;
  padding: var(--space-l) var(--space-l) var(--space-m);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* Modifier: Header compacto (FAQ, referência)
   Mais pequeno, padding reduzido */
.modal__header--compact {
  flex-shrink: 0;
  padding: var(--space-m) 0;
  text-align: center;
}

/* Icon Badge (compartilhado - usado em feedback modal)
   Círculo colorido com ícone para destaque visual */
.modal-header__icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-component-md);
  height: var(--size-component-md);
  margin-bottom: 0;
  font-size: var(--text-xl);
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
  border-radius: 50%;
}

/* ==========================================================================
   5.4 BODY
   ========================================================================== */

.modal__body .title--level-3 {
  margin-top: 0;
  margin-bottom: var(--space-s);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface);
}

/* Footer */
.modal__footer {
  text-align: center;
}

/* ==========================================================================
   6. ANIMAÇÕES ESCALONADAS (STAGGERED)
   ========================================================================== */

.modal.is-open .modal__header,
.modal.is-open .modal__body>*,
.modal.is-open .modal__footer {
  animation: slideUpFade var(--duration-smooth) var(--ease-fluid) backwards;
}

.modal.is-open .modal__header {
  animation-delay: var(--delay-sm);
}

.modal.is-open .modal__body>*:nth-child(1) {
  animation-delay: var(--delay-md);
}

.modal.is-open .modal__body>*:nth-child(2) {
  animation-delay: calc(var(--delay-md) + 50ms);
}

.modal.is-open .modal__body>*:nth-child(3) {
  animation-delay: var(--delay-lg);
}

.modal.is-open .modal__footer {
  animation-delay: var(--delay-lg);
}

/* ==========================================================================
   7. VARIANTES DE MODAL
   ========================================================================== */

/* Variante: Fullscreen (Mobile) */
.modal--fullscreen {
  padding: 0;
}

.modal--fullscreen .modal__content {
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal--fullscreen .modal__header {
  position: relative;
  z-index: var(--z-elevated);
  flex-shrink: 0;
  padding: var(--size-responsive-sm) 0;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.modal--fullscreen .modal__body {
  flex: none;
  padding: var(--size-responsive-sm);
  overflow-y: visible;
}

.modal--fullscreen .modal__footer {
  flex-shrink: 0;
  background: var(--md-sys-color-surface);
}

/* Variante: Sidebar (Slide da direita) */
.modal--sidebar {
  align-items: flex-end;
  justify-content: flex-end;
}

/* Sidebar genérica — a sidebar de ferramentas (.tools-sidebar-content)
   tem estilos próprios em _sidebar-tools.css que sobrepõem estes */
.modal--sidebar .modal__content:not(.tools-sidebar-content) {
  width: 100%;
  max-width: var(--max-width-content-narrow, 62.5rem);
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  transform: translateX(100%);
  transition: transform var(--duration-elegant) var(--ease-ethereal);
}

.modal--sidebar.is-open .modal__content:not(.tools-sidebar-content) {
  transform: translateX(0);
}

/* Variante: Loading (Centralizado, sem fechar) */
.modal--loading {
  z-index: var(--z-max) !important;
  align-items: center;
  justify-content: center;
}

.modal--loading .modal__content {
  max-width: var(--max-width-modal-loading, 25rem);
  text-align: center;
}

/* ==========================================================================
   8. CLOSE BUTTON (Sistema Unificado - Apenas .modal__close)
   ========================================================================== */

/* Base - flutuante no canto superior direito, WCAG compliant
   Estilo: 44px, cor neutra do sistema, sem elevação, sem rotação
   Posicionamento: ligeiramente sobreposto ao modal para não colidir com títulos */
.modal__close {
  position: absolute;
  right: var(--space-dialog-close-position);
  top: var(--space-dialog-close-position);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  background: var(--md-sys-color-surface-container-high);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    color var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy);
}

/* Desktop Hover - feedback subtil */

/* Active - feedback de press */
.modal__close:active {
  background: var(--md-sys-color-surface-container-highest);
  transform: scale(0.95);
}

/* Focus-visible - acessibilidade teclado */
.modal__close:focus-visible {
  color: var(--md-sys-color-primary);
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Icon sizing */
.modal__close iconify-icon {
  flex-shrink: 0;
  width: var(--button-icon-size-large);
  height: var(--button-icon-size-large);
  font-size: var(--button-icon-size-large);
  color: inherit;
}

/* Touch-only - feedback simplificado */

/* ==========================================================================
   9. MEDIA QUERIES (CONSOLIDATED)
   ========================================================================== */

/* 📱 MOBILE FULLSCREEN (<=768px) - Todos os modais ocupam 100% da tela */

/* 📱 MOBILE (≤480px) - Ajustes finos */

/* 🖥️ DESKTOP (≥1024px) */

/* Dark theme - sem overrides necessários (cores já usam tokens do sistema) */

/* ==========================================================================
  10. ACESSIBILIDADE
  ========================================================================== */

/* Touch devices - feedback simplificado */

/* ==========================================================================
   DRAG INDICATOR (Swipe-to-Close hint para mobile)
   ========================================================================== */

.modal__drag-indicator {
  display: none;
  position: absolute;
  top: var(--space-s);
  left: 50%;
  z-index: var(--z-sticky);
  width: var(--size-component-md);
  height: var(--space-s);
  pointer-events: none;
  background: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-small);
  transform: translateX(-50%);
}

/* Esconder em desktop - apenas mobile */

/* Swipe feedback visual */
.modal.is-swiping .modal__content {
  transition: none;
}

/* Reduced Motion - respeita preferências de acessibilidade */

/* Forçar fundos de superfície em modais (Dark mode fix) */
.modal__content--dark {
  background-color: var(--md-sys-color-surface);
}

.detail-card {
  background-color: var(--md-sys-color-surface);
}

.dc-body {
  background-color: var(--md-sys-color-surface);
}

/* Dark mode explicit overrides */
html.dark-theme .modal__footer {
  background-color: var(--md-sys-color-surface);
}

html.dark-theme .dc-header {
  filter: brightness(0.9);
}
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Modal FAQ: Estilos específicos para o conteúdo (grid, cards, accordions)
  2. Cards Expansíveis: Grid responsivo com animações
  3. Acordeões: FAQ items com toggle animations
  4. Card Destacado: Hierarquia visual para "Primeiros Passos"
  5. MEDIA QUERIES: Responsividade e ajustes mobile

  ════════════════════════════════════════════════════════════════
  SEPARAÇÃO DE RESPONSABILIDADES (ITCSS V14+)
  ════════════════════════════════════════════════════════════════

  _modal-base.css (GENÉRICO - camada 03):
  ├── .modal (container base)
  ├── .modal__content (painel genérico)
  ├── .modal__header, .modal__body, .modal__footer (estrutura)
  └── .modal--fullscreen, .modal--sidebar, .modal--loading (variantes)

  _dialogs.css (ESPECÍFICO - camada 03):
  ├── .faq-modal (override específico do FAQ)
  ├── .faq-grid, .faq-card, .faq-item (componentes FAQ)
  └── .faq-disclaimer (aviso médico)

  PRINCÍPIO: Base define o sistema, dialogs define o caso de uso.
*/

/* Dynamic variables (set by JS) */
:root {
  --swipe-translate: 0;
  --char-bar-width: 0%;
  --marquee-pos: 0;
  /* Variáveis Locais do Componente (baseadas em tokens globais) */
  --tool-card-icon-size: var(--height-component-xl);
  --tool-card-min-width: 17.5rem;
  --decorative-circle-size: 12.5rem;

  /* Refinamento de Inputs: Mais respiro e alinhamento */
  --input-icon-position: var(--space-m);

  /* Afasta o ícone da borda esquerda (~20px) */
  --input-icon-padding: 3.75rem;

  /* 60px: Espaço generoso para o texto após o ícone */
}

/* ===================================
   COMPONENTES - MODAIS E DIÁLOGOS MD3 (GLASS REFACTOR)
   REFACTOR: px substituídos por tokens, media queries padronizadas
   Base extendido de _modal-base.css
   =================================== */

/* Estilos específicos para o modal FAQ */
.faq-modal {
  --modal-border-radius: var(--md-sys-shape-corner-extra-large);
  --card-border-radius: var(--md-sys-shape-corner-large);

  /* Transform variables - eliminate duplication */
  --transform-rotate-180: rotate(180deg);

  /* Transition variables - eliminate duplication */
  --transition-card:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    border-radius var(--duration-smooth) var(--ease-fluid);
  --transition-item:
    margin var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-elegant) var(--ease-ethereal),
    border-radius var(--duration-elegant) var(--ease-ethereal),
    box-shadow var(--duration-elegant) var(--ease-ethereal),
    border-color var(--duration-fast) var(--ease-snappy);
  --transition-bubble:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    opacity var(--duration-fast) var(--ease-snappy);
  --transition-icon:
    transform var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy);
  --transition-toggle:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-smooth) var(--ease-ethereal),
    opacity var(--duration-fast) var(--ease-snappy);

  /* z-index herdado do .modal em _modal-base.css */
}

/* Ajustes específicos do body do modal */

/* Modal FAQ usa o layout padrão do sistema base
   Não sobrescreve width/max-width/height - usa .modal__content do _modal-base.css
   Header compacto usa estilos do _modal-base.css */

/* Scroll behavior suave para animações JavaScript (todos os viewports) */
.faq-modal .modal__content,
.faq-modal .modal__body {
  scroll-behavior: smooth;
}

/* FAQ usa o .modal__content como scroll container para manter a scrollbar
   fora do padding interno do body. */
.faq-modal .modal__content {
  overflow-y: auto;
}

.faq-modal .modal__body {
  min-height: 0;
  overflow-y: visible;
}

/* Cards com scroll-margin para alinhamento pelo topo (todos os viewports) */
.faq-modal .faq-card {
  scroll-margin-top: 80px; /* Espaço para o header do modal */
  scroll-margin-bottom: 20px;
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--card-border-radius);
  box-shadow: var(--shadow-rich-md);

  /* ✅ Sombra padrão dos cards */
  backface-visibility: hidden;
  transition: var(--transition-card);
  will-change: background-color, border-color, box-shadow, transform;
}

/* FAQ items com scroll-margin (todos os viewports) */
.faq-modal .faq-item {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 20px;
  display: block;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  transition: var(--transition-item);
  will-change: margin, background-color, box-shadow;
}

.faq-modal .modal__title-destaque {
  margin-bottom: 0;
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--leading-tight);
  color: var(--md-sys-color-on-surface);
  letter-spacing: var(--letter-spacing-tight);
}

.faq-modal .modal__subtitle {
  margin-bottom: var(--space-s);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-on-surface-variant);
}

/* FAQ Disclaimer (Aviso Médico) */
.faq-modal .faq-disclaimer {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  margin: var(--space-l) 0 var(--space-l);
  border: 1px solid var(--md-sys-color-error);
  border-radius: var(--md-sys-shape-corner-extra-large);
}

.faq-modal .faq-disclaimer__header {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--space-s);
  align-items: center;
}

.faq-modal .faq-disclaimer__icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
  color: var(--md-sys-color-error);
}

.faq-modal .faq-disclaimer__title {
  flex: 0 1 auto;
  width: auto;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-error);
}

.faq-modal .faq-disclaimer__text {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
}

.faq-modal .faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
  padding: var(--space-s) 0;

  /* Padding horizontal removido */
  margin-top: var(--space-s);
  justify-items: center;
}

/* Cards são todos visualmente iguais — sem variante featured */

.faq-modal .faq-card[open] {
  grid-column: 1 / -1;
  cursor: default;
  background-color: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
  transition: var(--transition-card);
}

.faq-modal .faq-card.is-closing {
  grid-column: 1 / -1;
  cursor: default;
  background-color: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
}

.faq-modal .faq-card__header {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  align-items: center;
  height: 100%;
  padding: var(--space-m);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    gap var(--duration-smooth) var(--ease-fluid);
}

.faq-modal .faq-card[open] .faq-card__header {
  align-items: center;
  height: auto;
  padding: var(--space-m);
  background: var(--md-sys-color-surface-container-high);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.faq-modal .faq-card.is-closing .faq-card__header {
  align-items: center;
  height: auto;
  padding: var(--space-m);
  background: var(--md-sys-color-surface-container-high);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.faq-modal .icon-bubble {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--space-l);
  height: var(--space-l);
  font-size: var(--text-lg);
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-surface-container-highest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: var(--transition-bubble);
}

.faq-modal .faq-card:hover .icon-bubble,
.faq-modal .faq-card[open] .icon-bubble {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.faq-modal .faq-card.is-closing .icon-bubble {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.faq-modal .faq-card__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
  transition: gap var(--duration-smooth) var(--ease-fluid);
}

.faq-modal .faq-card__title-row {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.faq-modal .faq-card__header h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--md-sys-color-on-surface);
}

.faq-modal .faq-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.8;
  transform: translateY(0);
  transition:
    opacity var(--duration-fast) var(--ease-snappy),
    transform var(--duration-smooth) var(--ease-fluid);
}

.faq-modal .faq-card[open] .faq-card__desc {
  opacity: 1;
  transform: var(--transform-reset);
}

.faq-modal .faq-card.is-closing .faq-card__desc {
  opacity: 1;
  transform: var(--transform-reset);
}

.faq-modal .faq-card__toggle-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--space-l);
  height: var(--space-l);
  font-size: var(--text-lg);
  color: var(--md-sys-color-primary);
  background: transparent;
  border: none;
  opacity: 0.8;
  transition: var(--transition-toggle);
}

.faq-modal .faq-card:hover .faq-card__toggle-icon {
  opacity: var(--opacity-visible);
  transform: scale(1.2);
}

.faq-modal .faq-card[open] .faq-card__toggle-icon {
  color: var(--md-sys-color-primary);
  opacity: var(--opacity-visible);
  transform: var(--transform-rotate-180);
}

.faq-modal .faq-card.is-closing .faq-card__toggle-icon {
  color: var(--md-sys-color-primary);
  opacity: var(--opacity-visible);
  transform: var(--transform-rotate-180);
}

.faq-modal .faq-card__content {
  max-height: 0;
  padding: 0 var(--space-l);
  overflow: hidden;
  opacity: var(--opacity-hidden);
  transform: translateY(calc(var(--space-m)*-0.5)) scale(0.98);
  margin-bottom: 0;

  transition:
    max-height var(--duration-elegant) var(--ease-ethereal),
    margin-bottom var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-fast) var(--ease-snappy),
    transform var(--duration-smooth) var(--ease-ethereal);
  will-change: max-height, opacity, transform, margin-bottom;
}

.faq-modal .faq-card[open] .faq-card__content {
  opacity: var(--opacity-visible);
  transform: var(--transform-reset);
  transition:
    max-height var(--duration-elegant) var(--ease-ethereal),
    margin-bottom var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-smooth) var(--ease-fluid) 0.1s,
    transform var(--duration-smooth) var(--ease-ethereal) 0.1s;
  margin-bottom: var(--space-l);
}

.faq-modal .faq-item[open] {
  margin: var(--space-m) 0;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-low);
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-elevation-1);
}

.faq-modal .faq-item.is-closing {
  margin: var(--space-m) 0;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-low);
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-elevation-1);
}

.faq-modal .faq-item:last-child {
  border-bottom: none;
}

.faq-modal .faq-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  gap: var(--space-l);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--space-m);
  font-family: var(--font-family, inherit);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  transition:
    color var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-smooth) var(--ease-fluid);
}

.faq-modal .faq-btn:hover {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-high);
}

.faq-modal .faq-btn:hover .seta-icon {
  border-color: var(--md-sys-color-primary);
}

.faq-modal .faq-item[open] .faq-btn {
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-primary);
  background-color: transparent;
}

.faq-modal .faq-item.is-closing .faq-btn {
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-primary);
  background-color: transparent;
}

.faq-modal .seta-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--space-l);
  height: var(--space-l);
  font-size: var(--text-lg);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-highest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: var(--transition-icon);
}

/* Thicker toggle icon */
.faq-modal .seta-icon iconify-icon,
.faq-modal .faq-card__toggle-icon {
  stroke: currentColor;
  stroke-width: 1px;
}

.faq-modal .faq-item[open] .faq-btn .seta-icon {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
  transform: var(--transform-rotate-180);
}

.faq-modal .faq-item.is-closing .faq-btn .seta-icon {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
  transform: var(--transform-rotate-180);
}

.faq-modal .faq-resposta {
  max-height: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-fast) var(--ease-snappy),
    opacity var(--duration-normal) var(--ease-fluid) 50ms,
    transform var(--duration-normal) var(--ease-fluid) 50ms;
}

.faq-modal .faq-item[open] .faq-resposta {
  background-color: var(--md-sys-color-surface-container);
  opacity: 1;
  transform: translateY(0);
}

.faq-modal .faq-resposta-inner {
  padding: var(--space-l) var(--space-m);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  text-wrap: pretty;
}

.faq-modal .faq-resposta-inner ul {
  padding-left: var(--space-l);
  margin-top: var(--space-s);
}

.faq-modal .faq-resposta-inner li {
  margin-bottom: var(--space-s);
  list-style-type: disc;
}

.faq-modal .faq-resposta-inner strong {
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface);
}

/* Links dentro das respostas FAQ */
.faq-modal .faq-link {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-modal .faq-link:hover {
  color: var(--md-sys-color-primary);
  opacity: 0.8;
}

/* ==========================================================================
   DARK THEME (All Breakpoints - Consolidated)
   ========================================================================== */

/* Desktop Dark Theme */
html.dark-theme .faq-modal .faq-card:hover {
  box-shadow: 0 var(--space-m) calc(var(--space-xl)*1.33) oklch(0% 0 0deg / 40%);
}

/* Grid centering: quando a última fila tem menos cards que as colunas */

.faq-modal .faq-card:last-child:nth-child(3n + 1) {
  grid-column: 2 / 3;
}

/* REDUCED MOTION SUPPORT (Desktop) */

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK) - REFACTOR: Usando breakpoint tokens
   ========================================================================== */

/* MOBILE COMPACT FAQ GRID (≤576px) */

/* GAP FILL (577px - 767px) - Explicit 2-column layout */

/* MOBILE STANDARD (<=768px) - Full screen */

/* ==========================================================================
   MODAL & SIDEBAR UTILITY CLASSES
   ========================================================================== */

/* Visibility toggles (replace inline style.display) */
.is-hidden {
  display: none !important;
}

.is-visible {
  display: block;
}

/* Fade transitions (replace inline opacity/transition) */
.fade-in {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-smooth) var(--ease-fluid), visibility var(--duration-smooth);
}

.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-smooth) var(--ease-fluid), visibility var(--duration-smooth);
}

/* Swipe state (replace inline transform + transition) */
.modal.is-swiping .modal__content,
.modal.is-swiping .modal__content-dark {
  transform: translateY(var(--swipe-translate, 0)) translateZ(0);
  transition: none;
}

/* Error state for character counters */
.is-over-limit {
  color: var(--md-sys-color-error) !important;
}

/* Feedback modal rating text states */
.feedback-modal .feedback-modal__rating-text {
  color: var(--md-sys-color-on-surface-variant);
  font-weight: var(--font-weight-medium);
}

.feedback-modal .feedback-modal__rating-text.is-rated {
  color: var(--md-sys-color-primary);
  font-weight: var(--font-weight-bold);
}

/* Suggestion theme progress bar (replace inline width) */
#char-bar-fill {
  width: var(--char-bar-width, 0%);
  transition: width var(--duration-fast) var(--ease-snappy);
}
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
 ESTRUTURA DO ARQUIVO:
  1. Modal Container: Container principal do modal de feedback.
  2. Header: Título, subtítulo e ícone de badge.
  3. Body: Área de conteúdo com formulário.
  4. Rating System: Estrelas de avaliação com estados interativos.
  5. Form Inputs: Campos de texto e textarea com estilos MD3.
  6. Success State: Estado de sucesso após envio.
  7. MEDIA QUERIES: Responsividade mobile.
  8. REDUCED MOTION: Suporte a preferências de movimento.
*/

/* ===================================
   MODAL FEEDBACK
   Modal para recolha de feedback do utilizador
   Material Design 3 + OKLCH
   =================================== */

/* ==========================================================================
   1. MODAL CONTAINER
   ========================================================================== */

.feedback-modal {
  display: flex;
  flex-direction: column;
  max-width: var(--max-width-modal-narrow);
  max-height: var(--max-height-modal);
  padding: 0;
  overflow: hidden;
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
}

/* ==========================================================================
   2. HEADER (DEPRECIATED - Using shared .modal__header--surface)
   ========================================================================== */

/* Os estilos do header foram movidos para _modal-base.css
   .modal__header--surface e .modal-header__icon-badge

   Mantemos apenas overrides específicos do feedback modal */

/* Nota: _feedback-modal.css não precisa de estilos próprios de título/subtítulo
   since o padrão unificado está em _modal-base.css. Este arquivo deve conter
   apenas estilos específicos do rating system e formulário. */

/* ==========================================================================
   3. BODY
   ========================================================================== */

.feedback-modal__body {
  padding: var(--space-l);
  overflow-y: auto;
}

.feedback-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* ==========================================================================
   4. RATING SYSTEM
   ========================================================================== */

.feedback-modal__rating-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
  align-items: center;
  margin-bottom: var(--space-4xs);
}

.feedback-modal__star-rating {
  display: flex;
  gap: var(--space-4xs);
}

.feedback-modal__star-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; /* Touch target minimum WCAG AAA */
  min-height: 44px;
  padding: 0;
  font-size: var(--text-3xl);
  color: var(--md-sys-color-outline);
  cursor: pointer;
  background: none;
  border: none;
  transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.feedback-modal__star-btn:active {
  transform: scale(1.1);
}

.feedback-modal__star-btn--active {
  color: var(--md-sys-color-tertiary);
  filter: drop-shadow(
    0 var(--space-4xs) var(--space-3xs) oklch(from var(--md-sys-color-tertiary) l c h / 30%)
  );
}

.feedback-modal__rating-text {
  min-height: var(--leading-snug);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-primary);
}

/* ==========================================================================
   5. FORM INPUTS
   ========================================================================== */

.feedback-modal__form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
}

.feedback-modal__form-label {
  margin-left: var(--space-4xs);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface);
}

.feedback-modal__form-input,
.feedback-modal__form-textarea {
  width: 100%;
  padding: var(--space-s) var(--space-m);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-lowest);
  border: var(--border-width) solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.feedback-modal__form-input:focus,
.feedback-modal__form-textarea:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 var(--space-3xs) var(--md-sys-color-primary-container);
}

.feedback-modal__form-textarea {
  min-height: var(--space-5xl);
  resize: vertical;
}

.feedback-modal__char-count {
  margin-top: calc(var(--space-4xs)*-1);
  margin-right: var(--space-4xs);
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
  text-align: right;
}

.feedback-modal__error-message {
  display: none;
  margin-top: var(--space-4xs);
  font-size: var(--text-xs);
  color: var(--md-sys-color-error);
  text-align: center;
}

.feedback-modal__error-message.is-visible {
  display: block;
}

/* ==========================================================================
   6. SUCCESS STATE
   ========================================================================== */

.feedback-modal__success-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m) 0;
  text-align: center;
}

.feedback-modal__success-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3xl);
  height: var(--space-3xl);
  font-size: var(--text-3xl);
  border-radius: 50%;
}

.feedback-modal__success-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-on-surface);
}

.feedback-modal__success-message {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
}

.feedback-modal__success-btn {
  margin-top: var(--space-m);
}

/* ==========================================================================
   7. MEDIA QUERIES
   ========================================================================== */

/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Modal Container (.articles-modal): Lógica de visibilidade e temas (Glass).
  2. Overlay & Backdrop: Blur intenso e transparência.
  3. Painel de Conteúdo: Transições Pop-in e Escalonamento.
  4. Header & Títulos: Design moderno com sub-títulos informativos.
  5. Toolbar: Barra de ferramentas com Pesquisa Pill e Filtros.
  6. Chip Filters: Filtros horizontais scrolláveis (mobile-first).
  7. Grid de Artigos: Lista/grid responsiva com suporte a detail panel.
  8. Card Artigo: Cards compactos com hover lift e glow.
  9. Card Detail Panel: Painel expandido inline com meta info e CTA.
  10. Empty State: Feedback para buscas sem resultado.
  11. FAB & Footer: Botões de ação rápida e contador de artigos.
  12. Bottom Sheet: Modal secundário para sugestões de temas.
  13. MEDIA QUERIES: Centralização em Desktop e ajustes responsivos.

  NOTA: Este arquivo estende o sistema base em _modal-base.css
*/

/* ===================================
   COMPONENTES - ARTIGOS MODAL (UNIVERSAL)
   Design: Dark Premium Glass (Immersive)
   Mobile: Fullscreen | Desktop: Modal centrado
   =================================== */

/* Container Principal do Modal */
.articles-modal {
  contain: layout style paint;

  --modal-font-family: 'Google Sans', system-ui, sans-serif;
  --modal-fab-safe-zone: var(--space-2xl);

  --glass-surface: var(--md-sys-color-surface);
  --glass-border: var(--md-sys-color-outline-variant);
  --glass-card-bg: color-mix(in srgb, var(--md-sys-color-surface-variant), transparent 85%);
  --glass-card-bg-active: color-mix(
    in srgb,
    var(--md-sys-color-primary-container),
    transparent 50%
  );
  --text-primary: var(--md-sys-color-on-surface);
  --text-secondary: var(--md-sys-color-on-surface-variant);
  --text-tertiary: var(--md-sys-color-outline);
  --modal-z-search: var(--z-dropdown);
  --modal-z-filters: calc(var(--z-dropdown) - 5);
  --modal-z-fab: calc(var(--z-dropdown) + 10);
  --articles-mobile-surface: oklch(21% 0.045 255deg);
  --articles-mobile-surface-high: oklch(25% 0.05 255deg);
  --articles-mobile-outline: oklch(72% 0.08 250deg / 42%);
  --articles-mobile-text: oklch(96% 0.012 255deg);
  --articles-mobile-text-muted: oklch(78% 0.035 250deg);

  position: fixed;
  inset: 0;
  z-index: calc(var(--z-notification) + 1);
  visibility: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;

  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    visibility var(--duration-smooth);
}

.articles-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Overlay com Blur Intenso (Global Standard) */
.articles-modal__overlay,
.articles-modal-bottom-sheet__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  background: var(--glass-overlay-bg);
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--blur-m));
  backdrop-filter: blur(var(--blur-m));
  transition: var(--transition-all-generic);
}

.articles-modal.is-open .articles-modal__overlay,
.articles-modal-bottom-sheet.is-open .articles-modal-bottom-sheet__overlay {
  opacity: 1;
}

/* Container Fullscreen em mobile, centered em desktop */
.articles-modal__container {
  position: absolute;
  z-index: var(--z-elevated);
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  container-type: inline-size;
  overflow: hidden;
  background: linear-gradient(
    160deg,
    var(--md-sys-color-surface) 0%,
    color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-primary) 5%) 100%
  );
  opacity: 0;
  transform: translateY(var(--space-2xl)) scale(0.92);
  transition:
    transform var(--duration-elegant) var(--ease-ethereal),
    opacity var(--duration-smooth) var(--ease-fluid);
}

.articles-modal .articles-modal__btn-reset.d-none {
  display: none !important;
}

.articles-modal__btn-reset.d-none {
  display: none;
}

.articles-modal.is-open .articles-modal__container {
  opacity: 1;
  transform: var(--transform-reset);
}

.articles-modal.is-closing .articles-modal__container {
  animation: modalFadeOut var(--duration-smooth) var(--ease-snappy) forwards;
}

/* ===================================
   HEADER
   =================================== */
.articles-modal__header {
  position: relative;
  z-index: var(--z-elevated);
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(var(--space-xl) + env(safe-area-inset-top, 0px)) var(--space-l) var(--space-s)
    var(--space-l);
  background: transparent;
}

.articles-modal__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--md-sys-color-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.articles-modal__title small {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: var(--letter-spacing-normal);
}

/* ===================================
   TOOLBAR (Search + Filtros Dropdown)
   =================================== */
.articles-modal__toolbar {
  position: relative;
  display: flex;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m) var(--space-l);
  margin: 0 var(--space-l) var(--space-l);
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
}

.articles-modal__search-trigger {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  color: var(--text-secondary);
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.articles-modal__search-expanded {
  position: absolute;
  top: 50%;
  right: var(--space-l);
  left: var(--space-l);
  z-index: var(--z-above-content);
  display: flex;
  gap: var(--space-s);
  align-items: center;
  height: var(--touch-target-min);
  padding: 0 var(--space-m);
  pointer-events: none;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-large);
  opacity: 0;
  transform: translateY(-50%) scale(0.95);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

.articles-modal__search-expanded.is-active {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.articles-modal__search-close {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  color: var(--text-secondary);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 50%;
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.articles-modal__search-close:hover {
  color: var(--text-primary);
  background: var(--md-sys-color-surface-variant);
}

.articles-modal__search-expanded.is-searching::after {
  position: absolute;
  right: var(--component-height-md);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  content: '';
  border: 2px solid var(--md-sys-color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin var(--duration-smooth) linear infinite;
}

.articles-modal__search-input {
  flex: 1 1;
  height: 50%;
  margin: 0;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  outline: none;
  background: transparent;
  border: none;
}

.articles-modal__search-input::placeholder {
  color: var(--text-secondary);
}

/* Filtros Wrapper e Dropdown (mantido para desktop) */
.articles-modal__filters-wrapper {
  position: relative;
  display: flex;
  flex: 1 1;
  gap: var(--space-s);
  align-items: center;
}

.articles-modal__filters-trigger {
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: space-between;
  width: auto;
  height: var(--touch-target-min);
  padding: 0 var(--space-inset-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.articles-modal__filters-trigger:hover {
  color: var(--text-primary);
  background: var(--md-sys-color-surface-variant);
}

.articles-modal__filters-trigger.has-filter {
  font-weight: 600;
  color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, var(--glass-card-bg));
  border-color: var(--md-sys-color-primary);
}

.articles-modal__filters-trigger:active {
  transform: scale(0.98);
}

.articles-modal__filters-dropdown {
  position: absolute;
  top: calc(100% + var(--space-s));
  right: 0;
  z-index: var(--modal-z-filters);
  display: flex;
  visibility: hidden;
  flex-direction: column;
  width: 100%;
  padding: var(--space-s);
  pointer-events: none;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-strong-xl);
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--blur-lg));
  backdrop-filter: blur(var(--blur-lg));
  transform: translateY(calc(var(--space-s)*-1)) scale(0.98);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid),
    visibility var(--duration-smooth) linear;
}

.articles-modal__filters-dropdown.is-active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: var(--transform-reset);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid),
    visibility 0s linear 0s;
}

.articles-modal__filters-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.articles-modal__filter-item {
  position: relative;
  display: flex;
  gap: var(--space-s);
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-s) var(--space-m);
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy);
}

.articles-modal__filter-item:hover {
  color: var(--text-primary);
  background: color-mix(
    in srgb,
    var(--cat-color) 8%,
    oklch(from var(--brand-neutral-white) l c h / 3%)
  );
  border-color: color-mix(in srgb, var(--cat-color) 15%, transparent);
}

.articles-modal__filter-item[data-categoria='todos'] {
  --cat-color: var(--md-sys-color-primary);
}
.articles-modal__filter-item[data-categoria='treino'] {
  --cat-color: oklch(65% 0.18 200deg);
}
.articles-modal__filter-item[data-categoria='nutricao'] {
  --cat-color: oklch(65% 0.18 150deg);
}
.articles-modal__filter-item[data-categoria='exercicios'] {
  --cat-color: oklch(65% 0.18 30deg);
}
.articles-modal__filter-item[data-categoria='tecnologia'] {
  --cat-color: oklch(60% 0.18 250deg);
}
.articles-modal__filter-item[data-categoria='ciencia'] {
  --cat-color: oklch(60% 0.18 280deg);
}
.articles-modal__filter-item[data-categoria='gestao'] {
  --cat-color: oklch(65% 0.18 200deg);
}

.articles-modal__filter-item iconify-icon {
  font-size: 1.2rem;
  color: var(--text-tertiary);
  transition:
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.articles-modal__filter-item:hover iconify-icon,
.articles-modal__filter-item.active iconify-icon {
  color: var(--cat-color);
}

.articles-modal__filter-item.active {
  font-weight: 600;
  color: var(--cat-color);
  background: color-mix(in srgb, var(--cat-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--cat-color) 20%, transparent);
}

.articles-modal__filter-item.active::after {
  position: absolute;
  right: var(--space-s);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  content: '';
  background-color: var(--cat-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
    no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
    no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: modalCheckmarkPop var(--duration-fast) var(--ease-snappy);
}

/* ===================================
   CHIP FILTERS (horizontal scrollable)
   =================================== */
.articles-modal__chip-filters {
  display: flex;
  gap: var(--space-s);
  padding: 0 var(--space-l) var(--space-m);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.articles-modal__chip-filters::-webkit-scrollbar {
  display: none;
}

.articles-modal__chip {
  flex-shrink: 0;
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.articles-modal__chip:hover {
  color: var(--text-primary);
  background: var(--md-sys-color-surface-variant);
}

.articles-modal__chip.active {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.articles-modal__chip:active {
  transform: scale(0.96);
}

/* Desktop: esconder chips, mostrar dropdown */

/* ===================================
   ÁREA DE CONTEÚDO E GRID
   =================================== */
.articles-modal__content {
  flex: 1 1;
  padding: 0 var(--space-l) var(--space-2xl);
  overflow-y: auto;
}

.articles-modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

/* ===================================
   CARD NORMAL (compacto)
   =================================== */
.articles-modal__card {
  position: relative;
  z-index: var(--z-content);
  overflow: hidden;
  cursor: default;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--card-theme, var(--md-sys-color-primary));
  border-radius: var(--md-sys-shape-corner-large);
  padding: var(--space-l);
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy);
}

.articles-modal__card-trigger {
  position: relative;
  z-index: var(--z-content);
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  outline: 0;
  border: 0;
}

.articles-modal__card-trigger:focus-visible {
  border-radius: calc(var(--md-sys-shape-corner-large) - var(--space-xs));
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--card-theme, var(--md-sys-color-primary)), transparent 65%);
}

.articles-modal__card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-base);
  height: 100%;
  pointer-events: none;
  content: '';
  background: linear-gradient(
    180deg,
    oklch(from var(--brand-neutral-white) l c h / 5%) 0%,
    transparent 100%
  );
}

/* Cores de Categoria */
.articles-modal__card[data-categoria='treino'] {
  --card-theme: oklch(65% 0.18 200deg);
}
.articles-modal__card[data-categoria='nutricao'] {
  --card-theme: oklch(65% 0.18 150deg);
}
.articles-modal__card[data-categoria='exercicios'] {
  --card-theme: oklch(65% 0.18 30deg);
}
.articles-modal__card[data-categoria='tecnologia'] {
  --card-theme: oklch(60% 0.18 250deg);
}
.articles-modal__card[data-categoria='ciencia'] {
  --card-theme: oklch(60% 0.18 280deg);
}
.articles-modal__card[data-categoria='gestao'] {
  --card-theme: oklch(65% 0.18 200deg);
}

.articles-modal__card:has(.articles-modal__card-trigger:hover) {
  background: color-mix(
    in srgb,
    var(--glass-card-bg),
    var(--card-theme, var(--md-sys-color-primary)) 5%
  );
  border-color: var(--card-theme, var(--md-sys-color-primary));
  box-shadow: 0 calc(var(--space-s)*1.5) var(--space-l) oklch(0% 0 0deg / 20%);
  transform: translateY(calc(var(--space-s)*-1));
}

.articles-modal__card:has(.articles-modal__card-trigger:active) {
  transform: scale(0.98);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.articles-modal__card.is-expanded {
  cursor: default;
  background: color-mix(
    in srgb,
    var(--glass-card-bg),
    var(--card-theme, var(--md-sys-color-primary)) 6%
  );
  border-color: var(--card-theme, var(--md-sys-color-primary));
  box-shadow: 0 calc(var(--space-s)*1.5) var(--space-l) oklch(0% 0 0deg / 18%);
  transform: none;
}

/* Card Header: ícone + categoria */
.articles-modal__card-header {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
}

.articles-modal__card-icon {
  font-size: 1.125rem;
  color: var(--card-theme, var(--md-sys-color-primary));
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    color var(--duration-fast) var(--ease-snappy);
}

.articles-modal__card-trigger:hover .articles-modal__card-icon {
  transform: scale(1.1) rotate(5deg);
}

.articles-modal__card-category {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--card-theme, var(--md-sys-color-primary));
}

/* Título */
.articles-modal__card-title {
  margin: 0 0 var(--space-s);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--line-height-snug);
  color: var(--text-primary);
}

/* Excerpt */
.articles-modal__card-excerpt {
  margin: 0 0 var(--space-s);
  font-size: 0.9375rem;
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.articles-modal__card.is-expanded
  .articles-modal__card-excerpt:not(.articles-modal__card-excerpt--expanded) {
  display: none;
}

.articles-modal__card-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding-top: var(--space-s);
  margin-top: var(--space-s);
  border-top: 1px solid var(--glass-border);
  animation: fadeInUp var(--duration-smooth) var(--ease-fluid);
}

.articles-modal__card-excerpt--expanded {
  display: block;
  margin: 0;
  -webkit-line-clamp: unset;
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

/* Footer do Card */
.articles-modal__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-s);
  border-top: 1px solid var(--glass-border);
}

.articles-modal__card-meta {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.articles-modal__card-action-hint {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
}

.articles-modal__card.is-expanded .articles-modal__card-footer {
  display: none;
}

.articles-modal__card-arrow {
  color: var(--card-theme, var(--md-sys-color-primary));
  opacity: 0;
  transform: translateX(calc(var(--space-s)*-1));
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy);
}

.articles-modal__card-trigger:hover .articles-modal__card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.articles-modal__card.is-expanded .articles-modal__card-arrow {
  opacity: 1;
  transform: rotate(90deg);
}

/* ===================================
   CARD DETAIL CONTROLS (inline)
   =================================== */
.articles-modal__detail-close {
  position: absolute;
  z-index: var(--z-elevated);
  top: var(--space-l);
  right: var(--space-l);
  display: flex;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  pointer-events: auto;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.articles-modal__detail-close:hover,
.articles-modal__detail-close:focus-visible {
  color: var(--text-primary);
  background: var(--md-sys-color-surface-variant);
  border-color: var(--card-theme, var(--md-sys-color-primary));
  transform: scale(1.04);
}

.articles-modal__detail-close:active {
  transform: scale(0.96);
}

.articles-modal__detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
}

.articles-modal__detail-meta-item {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.articles-modal__detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

.articles-modal__detail-btn {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  padding: var(--space-s) var(--space-l);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--md-sys-color-surface);
  cursor: pointer;
  background: var(--card-theme, var(--md-sys-color-primary));
  border: none;
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: 0 var(--space-s) var(--space-m)
    color-mix(in srgb, var(--card-theme, var(--md-sys-color-primary)), transparent 70%);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy),
    filter var(--duration-fast) var(--ease-snappy);
}

.articles-modal__detail-btn:hover {
  transform: translateY(calc(var(--space-xs)*-1));
  filter: brightness(1.1);
  box-shadow: 0 var(--space-m) var(--space-l)
    color-mix(in srgb, var(--card-theme, var(--md-sys-color-primary)), transparent 60%);
}

.articles-modal__detail-btn:active {
  transform: translateY(0);
}

/* ===================================
   SKELETON LOADING
   =================================== */
.articles-modal__loading {
  width: 100%;
}

.articles-modal__skeleton-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

.articles-modal__skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-height: 8.75rem;
  padding: var(--space-l);
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-sys-shape-corner-large);
}

.articles-modal__skeleton-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-inset-sm);
  margin-top: auto;
}

/* ===================================
   ESTADO DE VAZIO
   =================================== */
.articles-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-l);
  text-align: center;
  animation: emptyStateFadeIn 0.5s var(--ease-out-quint);
}

.articles-modal__empty iconify-icon {
  margin-bottom: 1.5rem;
  font-size: 4.5rem;
  color: var(--md-sys-color-outline-variant);
  animation: emptyIconFloat 3s ease-in-out infinite;
}

.articles-modal__empty p {
  max-width: var(--max-width-modal-small, 17.5rem);
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: var(--text-secondary);
}

/* ===================================
   FAB & FOOTER
   =================================== */
.articles-modal__fab {
  position: absolute;
  right: var(--space-xl);
  bottom: var(--space-xl);
  z-index: var(--modal-z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--component-height-xl);
  height: var(--component-height-xl);
  padding: 0;
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  background: var(--md-sys-color-primary);
  border: none;
  border-radius: 50%;
  box-shadow: var(--md-sys-elevation-level3);
}

.articles-modal__fab-label {
  display: none;
}

.articles-modal__footer {
  position: relative;
  flex-shrink: 0;
  padding: var(--space-l) var(--space-xl);
  background: linear-gradient(to top, var(--md-sys-color-surface) 0%, transparent 100%);
  border-top: 1px solid var(--glass-border);
}

.articles-modal__footer::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--md-sys-color-primary) 50%,
    transparent 100%
  );
  opacity: 0.4;
}

.articles-modal__footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.articles-modal__counter {
  display: flex;
  flex-direction: column;
  line-height: var(--line-height-tight);
}

.articles-modal__counter span:first-child {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--md-sys-color-primary);
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

.articles-modal__counter.updated span:first-child {
  animation: counterPop var(--duration-smooth) var(--ease-fluid);
}

.articles-modal__counter span:last-child {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.articles-modal__btn-secondary {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-inset-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.articles-modal__btn-secondary:hover {
  background: var(--md-sys-color-surface-variant);
  border-color: var(--md-sys-color-primary);
}

/* Botão de Reset */
.articles-modal__btn-reset {
  display: inline-flex;
  gap: var(--space-s);
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--md-sys-color-error);
  white-space: nowrap;
  cursor: pointer;
  background: color-mix(in srgb, var(--md-sys-color-error), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-error), transparent 80%);
  border-radius: var(--md-sys-shape-corner-extra-large);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.articles-modal__btn-reset:hover {
  color: var(--md-sys-color-on-error);
  background: var(--md-sys-color-error);
  box-shadow: 0 var(--space-s) calc(var(--space-s)*1.5)
    color-mix(in srgb, var(--md-sys-color-error), transparent 70%);
  transform: translateY(calc(var(--space-s)*-0.25));
}

.articles-modal__btn-reset:active {
  transform: translateY(0) scale(0.96);
}

.articles-modal__btn-reset iconify-icon {
  font-size: 1.1rem;
}

.articles-modal__fab iconify-icon {
  font-size: var(--button-icon-size-large);
}

/* ===================================
   BOTTOM SHEET DE SUGESTÃO
   =================================== */
.articles-modal-bottom-sheet {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal-supreme);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.articles-modal-bottom-sheet.is-open {
  pointer-events: auto;
  opacity: 1;
}

.articles-modal-bottom-sheet__container {
  position: relative;
  z-index: var(--z-elevated);
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: var(--max-width-modal-medium, 25rem);
  max-height: 80dvh;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-sys-elevation-level4);
  opacity: 0;
  transform: translateY(var(--space-l)) scale(0.95);
  transition:
    transform var(--duration-smooth) var(--ease-ethereal),
    opacity var(--duration-smooth) var(--ease-fluid),
    filter var(--duration-smooth) var(--ease-fluid);
}

.articles-modal-bottom-sheet.is-open .articles-modal-bottom-sheet__container {
  opacity: 1;
  transform: var(--transform-reset);
}

.articles-modal-bottom-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-l);
  border-bottom: 1px solid var(--glass-border);
}

.articles-modal-bottom-sheet__title {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  margin: 0;
  font-family: var(--modal-font-family);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.articles-modal-bottom-sheet__title iconify-icon {
  font-size: 1.25rem;
  color: var(--md-sys-color-primary);
}

.articles-modal-bottom-sheet__body {
  padding: var(--space-l);
  overflow-y: auto;
}

.articles-modal-bottom-sheet__description {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

.articles-modal-sugestao__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-top: var(--space-xs);
}

.articles-modal-sugestao__input-wrapper {
  position: relative;
  width: 100%;
}

.articles-modal-sugestao__input {
  width: 100%;
  min-height: 120px;
  padding: var(--space-m) var(--space-l);
  font-family: var(--modal-font-family);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  resize: none;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: inset 0 var(--space-s) calc(var(--space-s)*0.5) oklch(0% 0 0deg / 5%);
  -webkit-backdrop-filter: blur(var(--space-s));
  backdrop-filter: blur(var(--space-s));
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

.articles-modal-sugestao__input:focus {
  outline: none;
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high), transparent 20%);
  border-color: var(--md-sys-color-primary);
  box-shadow:
    inset 0 var(--space-s) calc(var(--space-s)*0.5) oklch(0% 0 0deg / 5%),
    0 0 0 var(--space-s) color-mix(in srgb, var(--md-sys-color-primary), transparent 85%),
    0 var(--space-s) calc(var(--space-s)*1.5)
      color-mix(in srgb, var(--md-sys-color-primary), transparent 90%);
  transform: translateY(calc(var(--space-s)*-0.25));
}

.articles-modal-sugestao__input::placeholder {
  color: var(--text-tertiary);
  opacity: 0.7;
}

.articles-modal-sugestao__input:hover:not(:focus) {
  background: color-mix(in srgb, var(--glass-card-bg), var(--md-sys-color-on-surface) 3%);
  border-color: color-mix(in srgb, var(--md-sys-color-primary) 30%, var(--glass-border));
}

.articles-modal-sugestao__counter {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: right;
}

.articles-modal-sugestao__submit {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-s);
  font-family: var(--modal-font-family);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  background: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level2);
  transition:
    color var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.articles-modal-sugestao__submit:hover {
  box-shadow: var(--md-sys-elevation-level3);
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.articles-modal-sugestao__submit:active {
  transform: translateY(0);
}

.articles-modal-sugestao__success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-m);
  color: var(--brand-success-green);
  text-align: center;
}

.articles-modal-sugestao__success iconify-icon {
  margin-bottom: 1rem;
  font-size: 3.5rem;
}

.articles-modal-sugestao__success p {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Ocultar texto do botão limpar no mobile para poupar espaço */

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* DESKTOP (≥768px) */

/* TABLET (768px - 1024px) */

/* MOBILE EDITORIAL OVERRIDES
   Mantidas no fim para vencer as regras base/desktop dentro da cascade. */
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Sidebar Container (.sidebar-about): Lógica de posicionamento e visibilidade.
  2. Overlay & Backdrop: Efeito de desfoque e fechamento.
  3. Conteúdo Principal: Scroll e elevação lateral.
  4. Coluna Esquerda: Foto, Títulos de seção, Tags (Habilidades) e Idiomas.
  5. Coluna Direita:
     - Header Principal (Nome, Subtítulo).
     - Bio Box (Resumo profissional).
     - Timeline (Experiência e Educação).
     - Certificações.
     - Contacto.
  6. MEDIA QUERIES (Layout de Coluna única em Mobile).

  NOTA: Este arquivo estende o sistema base em _modal-base.css
  Utiliza a variante .modal--sidebar do base
*/

/* ===================================
   SIDEBAR CV - Novo Design Currículo
   Material Design 3 + OKLCH
   Mobile: Fullscreen | Desktop: 2 colunas (max 1000px)

   REFACTOR: Cores convertidas para OKLCH, px substituídos por tokens
   Base extendido de _modal-base.css
   =================================== */

/* Sidebar Container - usando variante .modal--sidebar do base */
.sidebar-about {
  /* Containment — isola paint da sidebar do resto da página */
  position: fixed;

  /* Variáveis movidas para _variables-color.css para centralização */
  inset: 0;
  z-index: var(--z-modal-supreme);
  visibility: hidden;
  contain: layout style paint;
  pointer-events: none;
  opacity: 0;

  /* Bloqueia interação quando fechado (defense-in-depth com visibility:hidden) */

  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    visibility var(--duration-smooth);
}

/* DARK MODE OVERRIDES - Configurado em variables-color.css */

.sidebar-about.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

/* Overlay — cobre todo o viewport para bloquear interação com a página */
.sidebar-about__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--md-sys-color-scrim);
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--space-s));
  backdrop-filter: blur(var(--space-s));
  transition: opacity var(--duration-smooth) var(--ease-snappy);
}

.sidebar-about.is-open .sidebar-about__overlay {
  opacity: 1;
}

/* Container do conteúdo */
.sidebar-about__container {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: 100%;
  max-width: var(--max-width-sidebar-about, 62.5rem);
  height: 100%;
  overflow: hidden auto;
  background: var(--cv-right-bg);
  box-shadow: calc(var(--space-m)*-1) 0 var(--space-xl) oklch(0% 0 0deg / 20%);
  transform: translateX(100%);
  transition: transform var(--duration-elegant) var(--ease-ethereal);
}

.sidebar-about.is-open .sidebar-about__container {
  transform: translateX(0);
}

/* Scrollbar styling */
.sidebar-about__container::-webkit-scrollbar {
  width: var(--space-s);
}

.sidebar-about__container::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-about__container::-webkit-scrollbar-thumb {
  background: var(--cv-divider);
  border-radius: var(--md-sys-shape-corner-medium);
}

/* ============================
   BOTÃO FECHAR - Usa .modal__close de _modal-base.css
   ============================ */

/* ============================
   COLUNA ESQUERDA
   ============================ */
.sidebar-about__container>.modal__close {
  top: var(--space-l);
  right: var(--space-l);
}

.sidebar-about__col-left {
  /* Sticky Behavior (Desktop) */
  position: sticky;
  top: 0;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  width: 300px;
  min-width: 300px;
  height: 100%;
  padding: var(--space-2xl) var(--space-xl);
  color: var(--cv-left-text);
  background: var(--cv-left-bg);
}

/* Foto de Perfil - Estilo Atualizado para Header */
.sidebar-about__photo {
  display: block;
  flex-shrink: 0;
  width: clamp(120px, 15vw, 160px);
  height: clamp(120px, 15vw, 160px);
  object-fit: cover;
  border: var(--space-xs) solid var(--cv-accent);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--shadow-md);
}

/* Títulos de secção (Left Col) */
.sidebar-about__section-title {
  padding-bottom: var(--space-xs);
  margin-top: var(--space-s);
  margin-bottom: var(--space-xs);
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: var(--text-sm);
  color: var(--cv-accent);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  border-bottom: var(--space-xs) solid var(--white-alpha-10);
}

/* Tag cloud (habilidades) - Soft/Surface Style */
.sidebar-about__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.sidebar-about__tag {
  padding: var(--space-xs) var(--space-m);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-on-secondary-container);
  cursor: default;
  background: var(--md-sys-color-secondary-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.sidebar-about__tag:hover {
  color: var(--md-sys-color-on-secondary);
  background: var(--md-sys-color-secondary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.sidebar-about__tag:active {
  transform: scale(0.96);
}

/* Idiomas */
.sidebar-about__lang-item {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  margin-bottom: var(--space-xs);
  font-size: var(--text-base);
  color: var(--cv-left-muted);
}

.sidebar-about__lang-icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
}

/* ============================
   COLUNA DIREITA
   ============================ */
.sidebar-about__col-right {
  flex-grow: 1;
  color: var(--cv-text-main);
  background: var(--cv-right-bg);
}

.sidebar-about__col-right>section {
  padding: var(--space-l) var(--space-l) 0;
  color: var(--cv-text-main);
  background: var(--cv-right-bg);
}

/* Header principal - Flex Layout */
.sidebar-about__header {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-l) var(--space-l) 0;
  border-bottom: 1px solid var(--cv-divider);
}

.sidebar-about__header-content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: calc(var(--touch-target-min, 44px) + var(--space-l));
}

.sidebar-about__name {
  margin: 0;
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--font-bold);

  /* Aumentado */
  line-height: 1.1;
  color: var(--cv-text-main);
  letter-spacing: -0.02em;
}

.sidebar-about__subtitle {
  margin-top: var(--space-s);
  margin-bottom: 0;
  font-size: var(--text-sm);

  /* Diminuído de text-lg/base */
  font-weight: var(--font-semibold);
  color: var(--cv-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

/* Secções */
.sidebar-about__section-header {
  display: flex;
  gap: var(--space-l);
  align-items: center;
  margin-bottom: var(--space-m);
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: var(--text-xl);
  color: var(--cv-text-main);
}

.sidebar-about__section-header::after {
  flex: 1 1;
  height: var(--space-xs);
  content: '';
  background: var(--cv-divider);
}

/* Bio box */
.sidebar-about__bio {
  padding: var(--space-l);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--cv-text-main);
  background: var(--bio-box-bg);
  border-left: var(--space-xs) solid var(--cv-accent);
  border-radius: var(--md-sys-shape-corner-large);
}

.sidebar-about__bio strong {
  color: var(--cv-accent);
}

/* Timeline */
.sidebar-about__timeline {
  display: grid;
  gap: var(--space-l);
}

.sidebar-about__timeline-item {
  position: relative;
  padding-left: var(--space-xl);
}

.sidebar-about__timeline-item::before {
  position: absolute;
  top: var(--space-s);
  left: 0;
  z-index: var(--z-elevated);
  width: var(--space-m);
  height: var(--space-m);
  content: '';
  background: var(--cv-right-bg);
  border: var(--space-xs) solid var(--cv-accent);
  border-radius: var(--md-sys-shape-corner-full);
}

/* NOVA IMPLEMENTAÇÃO CSS (Substitui JS) */
.sidebar-about__timeline-item::after {
  position: absolute;
  top: calc(var(--space-s) + var(--space-m)/2);

  /* Começa logo abaixo do ponto */
  bottom: calc(var(--space-l)*-1 + var(--space-s)*-1 + var(--space-m)/2*-1);
  left: calc(var(--space-m)/2 - 1px);

  /* Centralizado matematicamente: (16px / 2) - 1px = 7px */
  width: 2px;

  /* Altura do item + margem - altura do ponto */
  content: '';
  background: var(--cv-divider);
}

/* Esconder linha no último item de cada lista */
.sidebar-about__timeline-item:last-child::after {
  display: none;
}

.sidebar-about__job-role {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--cv-text-main);
}

.sidebar-about__job-place {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--cv-accent);
}

.sidebar-about__job-date {
  display: block;
  margin: var(--space-xs) 0;
  font-size: var(--text-sm);
  color: var(--cv-text-muted);
  text-transform: uppercase;
}

.sidebar-about__job-date time {
  font: inherit;
}

.sidebar-about__job-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--cv-text-main);
  opacity: 0.9;
}

/* Lista de certificações */
.sidebar-about__cert-list {
  padding-left: var(--space-xl);
  line-height: var(--leading-wider);
  color: var(--cv-text-main);
}

.sidebar-about__cert-list li {
  margin-bottom: var(--space-xs);
}

/* ============================
   SECÇÃO DE CONTACTO
   ============================ */
.sidebar-about__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
}

.sidebar-about__contact-item {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

.sidebar-about__contact-icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
  color: var(--cv-accent);
}

.sidebar-about__contact-link {
  color: var(--cv-text-main);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-snappy);
}

.sidebar-about__contact-link:hover,
.sidebar-about__contact-link:focus {
  color: var(--cv-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/*
   NOVA ORDEM MOBILE - display: contents para libertar filhos da col-right

   A coluna direita usa display: contents em mobile, o que faz com que
   os seus filhos diretos sejam promovidos ao nível do container principal.
   Assim podemos aplicar order diretamente a cada section independente.

   Ordem visual em mobile (≤768px):
   1. Foto (120px, centrada)
   2. Nome + Subtítulo
   3. Sobre Mim (Bio)
   4. Habilidades + Idiomas
   5. Experiência, Educação, Certificações, Contacto
*/

/* REDUCED MOTION - Regra universal aplicada em _reset.css */
}
@layer components{

/* ==========================================================================
   SIDEBAR DE FERRAMENTAS
   Design: Material Design 3 + OKLCH Tokens
   ========================================================================== */

/* Ajuste específico para a sidebar de ferramentas */

/* ==========================================================================
   SIDEBAR DE FERRAMENTAS (HYBRID: Bottom Sheet Mobile -> Sidebar Desktop)
   Design: Material Design 3 + OKLCH Tokens + Glassmorphism
   ========================================================================== */

/* --- ESTRUTURA BASE (MOBILE: BOTTOM SHEET) --- */

/* Aumentamos a especificidade para bater as regras de .modal--sidebar e .modal__content do _modal-base.css em mobile */
.modal.modal--sidebar .tools-sidebar-content {
  position: absolute;
  inset: auto auto 0 0;

  /* Em mobile o base.css mete fixed no pai, absolute aqui ajuda */
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  height: auto;
  max-height: 90dvh;
  padding: 0;
  margin: 0;
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
  box-shadow: var(--md-sys-elevation-level4);
  transform: translateY(100%);
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

/* Estado Aberto (Animado via classe 'is-open' no pai .modal) */
.modal.is-open .tools-sidebar-content {
  transform: translateY(0);
}

/* Indicador de "arrasto" apenas para mobile */
.tools-sidebar-content::before {
  display: none;
  width: 32px;
  height: 4px;
  margin: var(--space-s) auto 0;
  content: '';
  background: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
}

/* --- HEADER FIXO --- */
.tools-sidebar-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: grid;
  flex-shrink: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-m);
  align-items: start;
  padding: var(--space-m) var(--space-xl) var(--space-s);
  border-bottom: 1px solid var(--md-sys-color-surface-container-high);
}

.tools-sidebar-header__text {
  min-width: 0;
}

.tools-sidebar-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-surface);
}

.tools-sidebar-subtitle {
  margin-top: 0;
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.8;
}

/* Botão Fechar */
.tools-sidebar-header .modal__close {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Garantir touch target 44px */
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  color: var(--md-sys-color-on-surface);
  place-self: start end;
  background: var(--md-sys-color-surface-container-high);
  border-radius: 50%;
  box-shadow: none;
  transform: none;
}

.tools-sidebar-header .modal__close:hover {
  background: var(--md-sys-color-surface-variant);
}

/* --- BODY SCROLLABLE --- */
.tools-sidebar-body {
  flex: 1 1;
  padding: var(--space-m);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- LISTA E CARTÕES DE FERRAMENTAS (.tool-row) --- */
.tools-list-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* Botão da Ferramenta (Glassmorphism + MD3) */
.tool-row {
  position: relative;
  display: flex;
  gap: var(--space-m);
  align-items: center;
  min-height: 60px;

  /* Touch target superior a 44px */
  padding: var(--space-s) var(--space-m);
  text-align: left;
  cursor: pointer;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.tool-row:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.tool-row:hover {
  background: color-mix(in srgb, var(--glass-card-bg), var(--md-sys-color-primary) 5%);
  border-color: color-mix(in srgb, var(--glass-border), var(--md-sys-color-primary) 20%);
  box-shadow: var(--md-sys-elevation-level1);
  transform: translateY(-2px);
}

.tool-row:active {
  transform: translateY(0);
}

/* Ícone da Categoria */
.tool-row__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: var(--text-xl);
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-small);
}

/* Textos */
.tool-row__content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 2px;
}

.tool-row__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--md-sys-color-on-surface);
}

.tool-row__desc {
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
}

/* Setinha à direta */
.tool-row__arrow {
  flex-shrink: 0;
  font-size: var(--text-xl);
  color: var(--md-sys-color-outline);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.tool-row:hover .tool-row__arrow {
  color: var(--md-sys-color-primary);
  transform: translateX(4px);
}

/* --- FOOTER DISCLAIMER --- */
.tools-sidebar-footer {
  padding: var(--space-m);
  text-align: center;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
}

.tools-sidebar-disclaimer {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--line-height-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.85;
}

/* --- ACTIVE TOOL INDICATOR --- */
.tool-row--active {
  border-color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--glass-card-bg), var(--md-sys-color-primary) 10%);
}

.tool-row--active .tool-row__icon {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.tool-row--active .tool-row__title {
  color: var(--md-sys-color-primary);
}

.tool-row--active .tool-row__arrow {
  color: var(--md-sys-color-primary);
}

/* --- ACCESSIBILITY TOGGLE (Switch Row) --- */
.accessibility-toggle {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  width: 100%;
  padding: var(--space-m);
  font-family: inherit;
  cursor: pointer;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy);
}

.accessibility-toggle:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
}

.accessibility-toggle__icon {
  font-size: var(--icon-size-lg);
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--duration-fast) var(--ease-snappy);
}

.accessibility-toggle.is-active .accessibility-toggle__icon {
  color: var(--md-sys-color-primary);
}

.accessibility-toggle__content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.accessibility-toggle__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface);
}

.accessibility-toggle__desc {
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.8;
}

.accessibility-toggle__switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin-left: auto;
  background: var(--md-sys-color-outline);
  border-radius: 12px;
  transition: background-color var(--duration-fast) var(--ease-snappy);
}

.accessibility-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--md-sys-color-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.accessibility-toggle.is-active .accessibility-toggle__switch {
  background: var(--md-sys-color-primary);
}

.accessibility-toggle.is-active .accessibility-toggle__thumb {
  transform: translateX(20px);
}

/* Remove o status-toggle-indicator antigo */
.tool-row__status-toggle {
  display: none;
}

/* ==========================================================================
   MOBILE OVERRIDE: BOTTOM SHEET EXPLÍCITO
   Garante que a sidebar não seja sobreposta pelo fullscreen do _modal-base.css
   ========================================================================== */

/* ==========================================================================
   DESKTOP OVERRIDE: SIDEBAR LATERAL (Direita)
   ========================================================================== */
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Loading Modal Base: Z-index máximo e overlay glassmorphism.
  2. Conteúdo do Painel: Pop-in, elevação e centralização.
  3. Layout Interno: Alinhamento vertical dos elementos.
  4. Brand Assets: Imagens de marca com animação de flutuação.
  5. Status Icons: Spinner (ativo), Sucesso (pop) e Erro (shake).
  6. Tipografia e Feedback: Mensagens principais e detalhes.
  7. Dark Mode Overrides (OKLCH).

  NOTA: Este arquivo estende o sistema base em _modal-base.css
  Utiliza a variante .modal--loading do base
*/

/* ===================================
   MODAL LOADING PREMIUM
   REFACTOR: Cores convertidas para OKLCH, px substituídos por tokens
   Base extendido de _modal-base.css
   =================================== */

/* Container específico para loading com Z-Index máximo */
#modal-loading.modal {
  z-index: var(--z-max) !important;
}

#modal-loading .modal__overlay {
  z-index: var(--z-content);
  background-color: var(--glass-overlay-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-default));
  backdrop-filter: blur(var(--glass-blur-default));
  transition: var(--transition-all-generic);
}

#modal-loading .modal__content {
  z-index: var(--z-elevated);
  width: 90%;
  max-width: var(--max-width-modal-loading, 25rem);
  padding: var(--space-2xl) var(--space-l);
  text-align: center;
  background: var(--md-sys-color-surface);
  border: var(--space-xs) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow:
    0 var(--space-xl) var(--space-2xl) oklch(0% 0 0deg / 30%),
    0 0 0 var(--space-xs) var(--white-alpha-10);
  opacity: 0;
  transform: translateY(var(--space-l)) scale(0.95);
  transition: var(--transition-all-generic);
}

/* Estado Aberto */
#modal-loading.is-open .modal__overlay {
  opacity: 1;
}

#modal-loading.is-open .modal__content {
  opacity: 1;
  transform: var(--transform-reset);
}

/* Layout Interno */
#modal-loading .modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Imagens de Marca */
#modal-loading .loading-img {
  width: 140px;
  height: auto;
  margin-bottom: var(--space-l);
  filter: drop-shadow(0 var(--space-s) var(--space-m) oklch(0% 0 0deg / 10%));
  animation: float var(--md-sys-motion-duration-long) var(--md-sys-motion-easing-standard) infinite;
}

/* Fallback para imagem de loading */
#modal-loading .loading-fallback-icon {
  display: none;
  font-size: var(--text-5xl);
  color: var(--md-sys-color-primary);
}

/* Spinner Personalizado */
#modal-loading .icon-spinner {
  margin-bottom: var(--space-l);
  font-size: var(--text-4xl);
  color: var(--md-sys-color-primary);
  filter: drop-shadow(0 0 var(--space-m) var(--md-sys-color-primary-container));
}

/* Icone de Sucesso */
#modal-loading .icon-success {
  margin-bottom: var(--space-l);
  font-size: var(--text-5xl) !important;
  color: var(--md-sys-color-tertiary);
  animation: popIn var(--md-sys-motion-duration-medium) cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Icone de Erro */
#modal-loading .icon-error {
  margin-bottom: var(--space-l);
  font-size: var(--text-5xl) !important;
  color: var(--md-sys-color-error);
  animation: shake var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

/* Tipografia */
#modal-loading p {
  margin-bottom: var(--space-s);
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.02em;
}

#modal-loading small {
  max-width: var(--max-width-modal-small, 17.5rem);
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.8;
}

#modal-loading .modal__btn-retry {
  margin-top: var(--space-l);
}

/* Ajustes Dark Mode - Cores convertidas para OKLCH */
.dark-theme #modal-loading .modal__content {
  background: linear-gradient(145deg, oklch(20% 0 0deg), oklch(15% 0 0deg));
  border-color: oklch(100% 0 0deg / 8%);
}

/* Animações */

/* popIn e shake definidos em _animations.css */
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Carousel Container (.carousel): Configuração base e limites.
  2. Viewport & Track: Gerenciamento do movimento e máscaras.
  3. Native Carousel (.carousel--native): Lógica de scroll nativo (Preços/Benefícios).
  4. Slides (.carousel__slide): Layout de conteúdo, badges e ícones.
  5. Controles (.carousel__control): Botões de navegação (Prev/Next).
  6. Indicadores (.carousel__indicators): Sistema de dots deslizantes (track & window).
  7. MEDIA QUERIES: Sincronizadas com APP_CONFIG.
*/

/* ===================================
   COMPONENTES - CARROSSEL MD3
   =================================== */
.carousel {
  position: relative;
  width: 100%;
  max-width: var(--max-width-content, 75rem);
  margin: 0 auto;
  overflow: hidden;
  background: transparent;

  /* Removido fundo para não baralhar layout */
}

.carousel__inner {
  position: relative;
  width: 100%;
}

.carousel__viewport {
  position: relative;
  width: 100%;

  /* Espaço para sombras e hover lift */
  overflow: hidden;

  /* Fade effect nas bordas (substituindo o blur legado) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Efeito de Desfoque (Blur) removido em favor do fade via mask-image */
.carousel__viewport::before,
.carousel__viewport::after {
  display: none;
}

/* --- CARROSSEL TRANSFORM-BASED (Benefits) --- */

/* O viewport precisa de overflow hidden para conter e herda o fade global */
.carousel--transform .carousel__viewport {
  overflow: hidden;
}

.carousel--transform .carousel__inner {
  overflow: visible;
}

.carousel--transform .carousel__track {
  display: flex;
  gap: var(--space-xl);
  padding: var(--space-m) 50vw;

  /* top/bottom: var(--space-m), left/right: 50vw */

  /* Adicionar padding lateral para cards à esquerda serem visíveis */
  overflow: visible;

  /* Sem scroll - movimento via transform */
}

.carousel--transform .carousel__slide {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 500px;
  max-width: 95vw;
  min-height: 333px;
  cursor: grab;

  /* Design igual ao native */
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-level1);
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy);
}

.carousel--transform .carousel__slide:active {
  cursor: grabbing;
}

.carousel--transform .carousel__slide.active {
  z-index: var(--z-content);
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-primary);
  box-shadow:
    var(--md-sys-elevation-level3),
    0 0 20px oklch(from var(--md-sys-color-primary) l c h / 15%);
  transform: translateY(-8px) scale(1.04);
}

.carousel--transform .carousel__slide.active .carousel__slide-icon {
  color: var(--md-sys-color-primary);
  transform: scale(1.1);
}

/* Mobile adjustments for transform carousel */

/* Tablet adjustments */

/* --- CARROSSEL NATIVO (SCROLL-BASED / BENEFÍCIOS & PREÇOS) --- */
.carousel--native .carousel__track {
  display: flex;
  gap: var(--space-xl);

  /* Mais espaçamento entre cards */
  padding: var(--space-m) var(--space-2xl);

  /* Padding lateral maior para centralização visual inicial */
  overflow: auto visible;
  overscroll-behavior-x: contain;

  /* ✅ FIX: Removido !important e ajustado touch-action
     - pan-x: permite scroll horizontal (navegação do carrossel)
     - pan-y: permite scroll vertical (página) quando não está no track horizontal
     - Sem !important para não sobrescrecer regras mais específicas */
  touch-action: pan-x;

  /* Permitir sombras saírem da caixa */

  /* ✅ FIX: Usar 'proximity' em vez de 'mandatory' para melhor UX
     - mandatory: força snap em QUALQUER movimento (mesmo pequeno)
     - proximity: só faz snap quando perto do destino (mais natural) */
  scroll-snap-type: x proximity;
  scrollbar-width: none;

  /* ✅ FIX: Removido scroll-behavior: smooth do CSS
     - Causava conflito com scrollIntoView({behavior: 'smooth'}) do JS
     - O JS agora controla completamente o scroll behavior
     - Isso elimina a necessidade do workaround de inverter smooth/auto */
  scroll-behavior: auto;
}

.carousel--native .carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel--native .carousel__slide {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 500px;

  /* Proporção 3:2 exata (500 / 1.5) */
  max-width: 95vw;

  /* Reduzido de 540px para 500px conforme solicitado */
  min-height: 333px;
  scroll-snap-align: center;

  /* Centralizar card ativo */
  scroll-snap-stop: always;

  /* DESIGN UNIFICADO E ESTRITO */
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-level1);

  /* Transições de Interação */
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy);
}

/* Utilitários para loop infinito sem salto visual */
.carousel--native .carousel__track.no-snap {
  scroll-snap-type: none;
}

.carousel--native .carousel__slide.no-transition {
  transition: none;
}

/* DESTAQUE AUTOMÁTICO: Card central realçado identicamente em Mobile e Desktop */
.carousel--native .carousel__slide.active {
  z-index: var(--z-content);
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-primary);
  box-shadow:
    var(--md-sys-elevation-level3),
    0 0 20px oklch(from var(--md-sys-color-primary) l c h / 15%);
  transform: translateY(-8px) scale(1.04);
}

/* Manter ícone colorido no card ativo identicamente em Mobile e Desktop */
.carousel--native .carousel__slide.active .carousel__slide-icon {
  color: var(--md-sys-color-primary);
  transform: scale(1.1);
}

/* Remover efeito hover manual - Foco apenas no card central */
.carousel--native .carousel__slide:hover {
  cursor: default;
}

/* Garantir que cards não-ativos não reagem ao hover visualmente */
.carousel--native .carousel__slide:not(.active):hover {
  box-shadow: var(--md-sys-elevation-level1);
  transform: none;
}

/* --- ELEMENTOS DOS SLIDES (CONTEÚDO REFINADO COM GRID) --- */

.carousel__slide {
  --carousel-padding: var(--space-s);

  /* 12px conforme solicitado */
}

.carousel__slide-content {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(2.5rem, auto) auto minmax(0, auto);
  grid-template-columns: 1fr;

  /* Ajustado minmax para o novo tamanho */

  /* ✅ FIX: Removido conflito entre justify-items e place-items
       - place-items é shorthand para align-items E justify-items
       - place-items: start center = align-items: start + justify-items: center
       - Removido justify-items: center duplicado e grid-gap obsoleto */
  gap: var(--space-s);
  place-items: start center;
  height: 100%;
  padding: var(--carousel-padding);
  text-align: center;
}

.carousel__slide-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;

  /* Reduzido proporcionalmente para o novo tamanho do card */
  color: var(--md-sys-color-on-surface-variant);
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

.carousel__slide-title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 1.75rem;

  /* Reduzido de text-2xl (2rem) para 1.75rem para o novo card 500px */
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  color: var(--md-sys-color-primary);
}

.carousel__slide-description {
  margin: 0;
  font-size: 1.0625rem;

  /* 17px para equilíbrio no novo tamanho */
  line-height: var(--line-height-base);
  color: var(--md-sys-color-on-surface);
  opacity: 0.9;
}

.carousel__slide-reference {
  align-self: end;
  max-width: 100%;
  margin: 0;
  font-size: var(--text-xs);
  font-style: normal;
  line-height: var(--line-height-base);
  color: var(--md-sys-color-on-surface-variant);
  overflow-wrap: anywhere;
}

.carousel__slide-reference a {
  color: var(--md-sys-color-primary);
  text-decoration-color: oklch(from var(--md-sys-color-primary) l c h / 45%);
  text-underline-offset: 0.18em;
}

.carousel__slide-reference a:hover {
  text-decoration-color: var(--md-sys-color-primary);
}

.carousel--facts .carousel__slide-title {
  font-size: var(--text-2xl);
}

.carousel--facts .carousel__slide-description {
  max-width: 34ch;
}

.carousel--facts .carousel__slide {
  min-height: 360px;
}

/* --- NAVEGAÇÃO (BOTÕES) --- */
.carousel__control {
  /* Posicionamento */
  position: absolute;
  top: calc(50% - var(--space-xl)/2);
  z-index: var(--z-fixed);

  /* Acima de tudo */

  /* Tamanho Customizado (Maiores que o Large padrão) */
  width: 56px;
  height: 56px;
  color: var(--md-sys-color-on-surface);

  /* MD3 Tonal Style por padrão */
  background-color: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-sys-elevation-level2);
  opacity: 0.9;
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

/* Remover efeito before (state layer) para limpeza visual conforme solicitado */
.carousel__control::before {
  display: none;
}

.carousel__control:hover:not(:disabled) {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
  border-color: transparent;
  box-shadow: var(--md-sys-elevation-level3);
  opacity: 1;
}

/* Apenas animação de clique (escala) */
.carousel__control:active:not(:disabled) {
  box-shadow: var(--md-sys-elevation-level1);
  transform: scale(0.92);
}

.carousel__control--prev {
  left: 0;
}

.carousel__control--next {
  right: 0;
}

.carousel__control:disabled {
  pointer-events: none;
  opacity: 0;
}

.carousel__control .icon-system {
  font-size: 2rem;
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.carousel__control:hover .icon-system {
  transform: scale(1.1);
}

/* --- INDICADORES (DOTS INFINITOS) --- */
.carousel__indicators {
  --carousel-dot-size: 0.625rem;
  --carousel-dot-active-size: 1.5rem;
  --carousel-dot-gap: 0.5rem;
  --carousel-indicators-visible: 5;
  --carousel-dot-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --carousel-dot-duration: 420ms;
  --carousel-indicators-width: calc(var(--carousel-dot-active-size) + var(--carousel-dot-size)*(var(--carousel-indicators-visible) - 1) + var(--carousel-dot-gap)*(var(--carousel-indicators-visible) - 1) + var(--space-m));

  position: relative;
  z-index: var(--z-elevated);
  display: flex;

  /* Centralizar a janela */
  align-items: center;
  justify-content: center;
  width: min(100%, var(--carousel-indicators-width));
  min-width: 3.5rem;
  height: 44px;
  padding: 0;
  margin: var(--space-xs) auto 0;

  /* Altura suficiente para o dot ativo e foco */
  overflow: hidden;

  /* Máscara de fade nas pontas para efeito infinito */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 30%,
    black 70%,
    transparent 100%
  );
  mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
}

.carousel__indicators-track {
  /* Espaço fixo entre dots */
  position: absolute;

  /* Alinhado à esquerda da janela */
  top: 50%;

  /* Necessário para mover dentro da janela relativa */
  left: 0;
  display: flex;
  gap: var(--carousel-dot-gap);
  align-items: center;

  /* Margem interna mínima */
  height: 100%;
  padding: 0 calc(var(--space-s)/2);

  /* Centralizado verticalmente */
  transform: translateY(-50%);

  /* Centralizar verticalmente */
  transition: transform var(--carousel-dot-duration) var(--carousel-dot-ease);
  will-change: transform;

  /* Ocupar altura total */
}

.carousel__indicator {
  position: relative;
  flex-shrink: 0;
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  background-color: var(--md-sys-color-outline-variant);

  /* Cor inativa mais suave */
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  opacity: 0.6;
  transition:
    background-color 260ms var(--carousel-dot-ease),
    width var(--carousel-dot-duration) var(--carousel-dot-ease),
    opacity 260ms var(--carousel-dot-ease),
    transform var(--carousel-dot-duration) var(--carousel-dot-ease);

  /* Ligeiramente transparente quando inativo */
}

/* Área de toque expandida */
.carousel__indicator::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  content: '';
  transform: translate(-50%, -50%);
}

.carousel__indicator:hover {
  background-color: var(--md-sys-color-primary);
  opacity: 0.8;
}

/* Estado Ativo (Estilo Pílula) */
.carousel__indicator.active {
  width: var(--carousel-dot-active-size);
  background-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  opacity: 1;
  transform: scaleY(1.08);
}

.carousel__indicators.is-static {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ===================================
   ESTADOS DE CARREGAMENTO
   =================================== */

.carousel.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.carousel.is-loading::before {
  width: 48px;
  height: 48px;
  content: '';
  border: 4px solid var(--md-sys-color-surface-variant);
  border-top-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  animation: carousel-spinner 0.8s var(--easing-linear) infinite;
}

@keyframes carousel-spinner {
  to {
    transform: rotate(360deg);
  }
}

.carousel.is-loading .carousel__slide {
  pointer-events: none;
  opacity: 0.5;
}

/* ===================================
   MEDIA QUERIES
   =================================== */

/* TABLET (≤1024px) */

/* MOBILE (≤768px) */

/* Fallback para browsers que não suportam media queries de intervalo.
   Mantém o mesmo comportamento: sem setas de navegação em mobile. */

/* ♿ REDUCED MOTION */
}
@layer components{

/* ===================================
   COMPONENTES - FORMULÁRIOS MD3 (Unified V14)
   =================================== */

/*
  ESTRUTURA DO ARQUIVO:
  1. Base Elements: Inputs, Selects, Textareas (Agnostic).
  2. Layout Components: .form-row, .form-field, .form-group.
  3. Interactive States: Hover, Focus, Disabled.
  4. Specialized Inputs: Custom Select, File, Checkbox, Radio.
  5. Validation: Error messages, required indicators.
  6. Contextual Variants:
     - .contact__form-container: Specific for the contact section.
     - .form-iframe / .fluxo-form: For embedded forms.
  7. Consolidated Media Queries.
*/

/* ==========================================================================
   1. BASE ELEMENTS (Universal Styles)
   ========================================================================== */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='date'],
input[type='number'],
select,
textarea,
.form-input,
.form-control,
.form-select,
.form-textarea {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: var(--space-inset-input-block) var(--space-inset-input-inline);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface);
  appearance: none;
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
  background-color: var(--md-sys-color-surface-variant);
  border: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-inset-md);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

textarea,
.form-textarea {
  height: auto;
  min-height: 80px;
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
  resize: vertical;
}

/* ==========================================================================
   1.1 NUMBER INPUT SPINNERS (Custom UI)
   ========================================================================== */

/* Remove arrows from Firefox */
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Esconder spinners nativos em WebKit (Chrome/Safari/Edge) para usarmos os custom via JS */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  display: none !important;
  margin: 0;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* --- JS INJECTED SPINNERS (number-spinners.js) --- */
.number-spinner-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* O proprio input number que vive dentro da nossa wrapper */
.number-spinner-wrapper input[type='number'] {
  padding-right: var(--space-xl);

  /* Espaco para os controles +/- */
  margin-bottom: 0;
}

/* Container do controlador +/- */
.number-spinner-controls {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--space-xl);
  height: calc(100% - var(--space-s));

  /* Folga subtil de top e bottom em relacao ao input container */
  overflow: hidden;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  opacity: var(--opacity-medium);
  transform: translateY(-50%);
  transition: opacity var(--duration-fast) var(--ease-snappy);
}

.number-spinner-wrapper:hover .number-spinner-controls,
.number-spinner-wrapper:focus-within .number-spinner-controls {
  background: var(--md-sys-color-surface-container-highest);
  opacity: var(--opacity-visible);
}

/* Botoes (+/-) internos */
.spinner-btn {
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  font-size: var(--icon-size-sm);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy);
}

.spinner-btn:hover:not(:disabled) {
  color: var(--md-sys-color-on-surface);
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
}

.spinner-btn:focus-visible {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}

.spinner-btn:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent);
}

.spinner-btn:disabled {
  color: var(--md-sys-color-on-surface-disabled);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Separation line between up/down buttons */
.spinner-up {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* ==========================================================================
   2. LAYOUT COMPONENTS
   ========================================================================== */

.form-row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-gap-content);
  align-items: flex-start;
}

/* Base field logic: full width on mobile, fluid on desktop */
.form-field,
.contact__form-field,
.form-group {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;

  /* Prevents flex overflow */
}

/* Full-width modifier for single-column rows (e.g., textareas) */
.form-row .form-field--full,
.form-row .contact__form-field--full {
  flex: 1 1 100%;
  max-width: 100%;
}

/* Tablet and Desktop: allow fields to sit side-by-side */

.form-label,
.contact__form-field label {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--line-height-snug);
  color: var(--md-sys-color-on-surface);
}

.form-label--required::after,
.field-required {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--md-sys-color-error);
}

.field-optional {
  font-size: var(--text-xs);
  font-style: italic;
  font-weight: 400;
  color: var(--a11y-field-optional);
}

/* ==========================================================================
   3. INTERACTIVE STATES
   ========================================================================== */

/* Hover */
input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus),
.form-input:hover:not(:focus),
.form-select:hover:not(:focus),
.form-textarea:hover:not(:focus) {
  background-color: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy);
}

/* Focus */
input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  background-color: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  box-shadow:
    0 0 0 3px oklch(from var(--md-sys-color-primary) l c h / 20%),
    var(--shadow-inset-sm);
  transform: translateY(-1px);
  transition:
    border-color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-fast) var(--ease-snappy);
}

/* Disabled */
input:disabled,
select:disabled,
textarea:disabled,
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  cursor: not-allowed;
  background: var(--md-sys-color-surface-variant);
  opacity: var(--opacity-lower);
}

/* Invalid Focus */
input:invalid:focus,
textarea:invalid:focus,
.form-input--error:focus,
.form-textarea--error:focus {
  border-color: var(--md-sys-color-error);
  box-shadow:
    0 0 0 3px oklch(from var(--md-sys-color-error) l c h / 20%),
    var(--shadow-inset-sm);
}

/* ==========================================================================
   4. SPECIALIZED INPUTS
   ========================================================================== */

/* Custom Select Arrow */
select,
.form-select {
  padding-right: var(--space-xl);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%232E7BEF' d='m5.06 7.356l2.795 2.833c.08.081.21.081.29 0l2.794-2.833c.13-.131.038-.356-.145-.356H5.206c-.183 0-.275.225-.145.356Z'/%3E%3Cpath fill='%232E7BEF' d='M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 15H2.75A1.75 1.75 0 0 1 1 13.25Zm1.75-.25a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-m) center;
  background-size: 16px;
}

html.dark-theme select,
html.dark-theme .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%237CB9F7' d='m5.06 7.356l2.795 2.833c.08.081.21.081.29 0l2.794-2.833c.13-.131.038-.356-.145-.356H5.206c-.183 0-.275.225-.145.356Z'/%3E%3Cpath fill='%237CB9F7' d='M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 15H2.75A1.75 1.75 0 0 1 1 13.25Zm1.75-.25a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25Z'/%3E%3C/svg%3E");
}

/* Checkbox Customizado */
.checkbox-label-wrapper {
  position: relative;
  display: flex;
  gap: var(--space-m);
  align-items: flex-start;
  padding: var(--space-m);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
  color: var(--md-sys-color-on-surface);
  text-wrap: pretty;
  cursor: pointer;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy);
}

.checkbox-label-wrapper:hover {
  background-color: var(--state-hover-surface);
  border-color: var(--md-sys-color-primary);
}

.checkbox-label-wrapper input[type='checkbox'] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: var(--opacity-hidden);
}

.checkbox-custom {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  margin-right: var(--space-xs);
  /* Salva-guarda extra */
  background-color: var(--md-sys-color-surface);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy);
}

.checkbox-custom::after {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: var(--opacity-hidden);
  transform: scale(0);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    opacity var(--duration-fast) var(--ease-snappy);
}

.checkbox-label-wrapper input[type='checkbox']:checked+.checkbox-custom {
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.checkbox-label-wrapper input[type='checkbox']:checked+.checkbox-custom::after {
  opacity: var(--opacity-visible);
  transform: scale(1);
}

/* Input Groups (Icon + Input) */
.input-group {
  position: relative;
}

.input-group__icon {
  position: absolute;
  top: 50%;
  left: var(--space-l);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  transform: translateY(-50%);
}

.input-group input {
  padding-left: calc(var(--space-xl) + var(--space-l));
}

/* ==========================================================================
   5. VALIDATION & FEEDBACK
   ========================================================================== */

/* Error state on input */
input.error,
.form-input[aria-invalid='true'],
.form-select.error,
.form-textarea.error {
  padding-right: var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc3545'%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-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-s) center;
  background-size: var(--icon-size-sm);
  border-color: var(--md-sys-color-error);
  border-width: 2px;
}

/* Error message styling */
.form-error-message {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  color: var(--md-sys-color-error);
  opacity: var(--opacity-hidden);
  transition:
    max-height var(--duration-smooth) var(--ease-fluid),
    margin-top var(--duration-smooth) var(--ease-fluid),
    opacity var(--duration-smooth) var(--ease-fluid);
}

.form-error-message.is-visible {
  max-height: 50px;
  margin-top: var(--space-s);
  opacity: var(--opacity-visible);
}

.form-error-message::before {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc3545'%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-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  background-size: contain;
}

/* ==========================================================================
   6. CONTEXTUAL VARIANTS
   ========================================================================== */

/* CONTACT SECTION BOX (.contact__form-container) */
.contact__form-container {
  position: relative;
  max-width: 100%;
  padding: var(--space-m);
  margin: 0 auto;
  overflow: hidden;
  background: var(--md-sys-color-surface-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-rich-lg);
}

/* Intro paragraph - o form container já dá o espaçamento, não somar */
.contact__form-container .paragraph-spaced {
  margin-bottom: 0;
}

.contact__form-container::before {
  position: absolute;
  top: -25%;
  right: -10%;
  width: 50%;
  height: 50%;
  pointer-events: none;
  content: '';
  background: radial-gradient(circle, var(--pattern-color) 1px, transparent 1px) / 20px 20px;
  opacity: var(--opacity-faint);
  transform: rotate(45deg);
}

/* Callback Rápido — Mini-formulário de telefone */
.contact__callback {
  padding-top: var(--space-m);
  margin-top: var(--space-m);
}

.contact__callback-divider {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.contact__callback-divider::before,
.contact__callback-divider::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--md-sys-color-outline-variant);
}

.contact__callback-text {
  text-align: center;
  margin: 0 0 var(--space-m);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
}

/* Override do .contact__form-container form — usar classe explícita para ganhar especificidade */
form.contact__callback-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
}

.contact__callback-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
  max-width: 100%;
}

.contact__callback-input-group {
  flex: 1 1;
  position: relative;
}

.contact__callback-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  opacity: 0.6;
}

/* Override global input[type='tel'] com especificidade suficiente */
.contact__form-container .contact__callback-input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-m) 0 42px;
  font-size: var(--text-base);
  font-family: inherit;
  line-height: var(--line-height-normal);
  background-color: var(--md-sys-color-surface-container);
  border: 1.5px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  color: var(--md-sys-color-on-surface);
  appearance: none;
  box-shadow: none;
  outline: none;
  transition:
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid);
}

.contact__callback-input:hover {
  border-color: var(--md-sys-color-outline);
  background-color: var(--md-sys-color-surface-container-high);
}

.contact__callback-input:focus {
  background-color: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: 0 calc(var(--space-m) - 0.5px) 0 41.5px;
  box-shadow: 0 0 0 3px oklch(from var(--md-sys-color-primary) l c h / 15%);
}

.contact__callback-input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.5;
}

.contact__callback-input.error {
  border-color: var(--md-sys-color-error);
  box-shadow: 0 0 0 2px var(--md-sys-color-error-container);
}

.contact__callback-btn {
  justify-content: center;
  width: 100%;
  white-space: nowrap;
  flex-shrink: 0;
}

.contact__callback-consent {
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.6;
  text-align: center;
  max-width: 360px;
  line-height: 1.4;
  margin: 0;
}

.contact__callback-consent .link-premium {
  opacity: 1;
}

/* Callback success state */
.contact__callback.is-submitted .contact__callback-form,
.contact__callback.is-submitted .contact__callback-text,
.contact__callback.is-submitted .contact__callback-consent,
.contact__callback.is-submitted .contact__callback-divider {
  display: none;
}

.contact__callback-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m) 0;
}

.contact__callback-success iconify-icon {
  font-size: 2.5rem;
  color: var(--status-success);
}

html.dark-theme .contact__callback-success iconify-icon {
  color: var(--md-sys-color-tertiary);
}

.contact__callback-success p {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

/* ============================================
   CONTACT FORM SUCCESS STATE (Inline)
   ============================================ */

/* ── Success Modal ── */
.contact__success-panel {
  text-align: center;
  padding: var(--space-xl) var(--space-l);
  gap: var(--space-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container);
  animation: formPopIn 0.4s var(--ease-snappy);
}

.contact__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--status-success-bg);
  animation: formPopIn 0.4s ease-out;
}

.contact__success-icon iconify-icon {
  font-size: 2.75rem;
  color: var(--status-success);
}

html.dark-theme .contact__success-icon {
  background: oklch(from var(--brand-success-green) l c h / 0.12);
}

html.dark-theme .contact__success-icon iconify-icon {
  color: var(--md-sys-color-tertiary);
}

.contact__success-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-surface);
  line-height: 1.2;
}

.contact__success-text {
  margin: 0;
  font-size: var(--text-base);
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.6;
  max-width: 28rem;
}

.contact__success-subtext {
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: calc(var(--space-xs)*-1);
}

.contact__success-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-xl);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  border-radius: var(--md-sys-shape-corner-full);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
  box-shadow: 0 2px 8px oklch(from var(--md-sys-color-primary) l c h / 0.3);
}

.contact__success-home-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  color: var(--md-sys-color-on-primary);
  text-decoration: none;
}

.contact__success-home-btn:active {
  transform: translateY(0);
}

/* WhatsApp button shared style */
.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background-color: var(--fluxo-success);
  color: var(--brand-neutral-white);
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
}

.btn--whatsapp:hover {
  background-color: color-mix(in oklch, var(--fluxo-success), black 15%);
  color: var(--brand-neutral-white);
  text-decoration: none;
  transform: translateY(-2px);
}

.btn--whatsapp:active {
  transform: translateY(0);
}

/* Callback success WhatsApp button */
.contact__callback-success .btn--whatsapp {
  margin-top: var(--space-s);
  padding: var(--space-xs) var(--space-m);
  font-size: var(--text-sm);
  border-radius: var(--md-sys-shape-corner-full);
}

/* Pop-in animation for success icon */
@keyframes formPopIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes formSlideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contact__form-container form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* IFRAME FORM VARIANTS (.fluxo-form) */
.fluxo-form,
.form-iframe {
  padding: var(--space-l);
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large);
}

/* ==========================================================================
   7. MEDIA QUERIES (Desktop > 768px)
   ========================================================================== */

/* ==========================================================================
   7.5. MEDIA QUERIES (TABLET 768px - 1024px)
   ========================================================================== */

/* Shared Tablet Touch Optimizations (768-1024px) */

/* Reduction of motion */

/* ==========================================================================
   RECAPTCHA ATTRIBUTION NOTICE
   ==========================================================================
   Exigido pelos Termos do Google ao esconder o badge do reCAPTCHA v3.
   ========================================================================== */

.recaptcha-notice {
  margin: var(--space-s);
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.recaptcha-notice a {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: var(--text-underline-offset);
}
}
@layer components{

/* ===================================
   COMMUNITY SUBMISSION MODAL - ITCSS COMPONENTS
   =================================== */

/**
 * Dependência: _forms.css (Estilos base de input, label e row)
 */

/* 1. MODAL SPECIFIC CONTAINER */
.community-submission-modal {
  max-width: var(--max-width-narrow, 45rem);
  overflow-y: auto;

  /* Permite scroll vertical se o conteúdo exceder a altura do viewport */
}

/* 2. HEADER REFINEMENT
   Cria uma separação visual clara entre a introdução e o formulário.
   Herda de .modal__header--surface em _modal-base.css (padrão unificado).
*/
.community-submission-modal .modal__header {
  /* Herda padding, background, border-bottom do _modal-base.css */
  margin: calc(var(--space-l)*-1) calc(var(--space-l)*-1) var(--space-l);
  border-top-left-radius: var(--md-sys-shape-corner-extra-large);
  border-top-right-radius: var(--md-sys-shape-corner-extra-large);
}

/* Nota: Título e subtítulo herdam de _modal-base.css com padrão unificado */

/* 3. FORM LAYOUT */
#community-submission-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);

  /* Gap consistente entre campos conforme MD3 */
}

/* 3. CHARACTER COUNTER */
.community-submission__char-counter {
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
  text-align: right;
}

.community-submission__char-counter--error {
  font-weight: var(--font-bold);
  color: var(--md-sys-color-error);
}

/* 4. TAG CHIPS SELECTION */
.community-submission__tags-selection {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-stack-xxs);
}

.community-submission__tag-chip {
  position: relative;
  display: inline-flex;
}

.community-submission__tag-chip input {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
}

.community-submission__tag-chip-label {
  display: inline-block;
  padding: var(--space-xs) var(--space-m);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.community-submission__tag-chip-label:hover {
  background-color: var(--state-hover-surface);
  border-color: var(--md-sys-color-primary);
}

.community-submission__tag-chip input:checked + .community-submission__tag-chip-label {
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-sm);
}

/* 5. MOBILE ADJUSTMENTS */
.community-submission__consent {
  width: 100%;
}

.community-submission__consent .checkbox-label-wrapper {
  width: 100%;
  margin-bottom: 0;
}
}
@layer components{
/* Zone Inquiry Modal */
.zone-inquiry-modal {
  max-width: 480px;
}

.zone-inquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.zone-inquiry-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.zone-inquiry-form__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

.zone-inquiry-form__input {
  width: 100%;
  padding: var(--space-s);
  border: 2px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  font-size: var(--text-base);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  transition: border-color 0.2s ease;
}

.zone-inquiry-form__input:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--md-sys-color-primary) l c h / 15%);
}

.zone-inquiry-form__error {
  color: var(--md-sys-color-error);
  font-size: var(--text-xs);
  min-height: 1em;
}

.zone-inquiry-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  width: 100%;
}

.zone-inquiry-form__submit:hover:not(:disabled) {
  background: color-mix(in oklch, var(--md-sys-color-primary) 85%, var(--md-sys-color-on-primary) 15%);
}

.zone-inquiry-form__submit:active:not(:disabled) {
  transform: scale(0.98);
}

.zone-inquiry-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.zone-inquiry-result {
  margin-top: var(--space-s);
  padding: var(--space-m);
  border-radius: var(--md-sys-shape-corner-medium);
  font-size: var(--text-sm);
  text-align: center;
  animation: fadeInSlideUp 0.3s ease;
}

.zone-inquiry-result--available {
  background: oklch(from var(--status-success) l c h / 10%);
  border: 1px solid oklch(from var(--status-success) l c h / 30%);
  color: var(--status-success);
}

.zone-inquiry-result--unavailable {
  background: oklch(from var(--md-sys-color-error) l c h / 8%);
  border: 1px solid oklch(from var(--md-sys-color-error) l c h / 20%);
  color: var(--md-sys-color-error);
}

.zone-inquiry-result__icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: var(--space-xs);
}

.zone-inquiry-result__hint {
  font-size: var(--text-xs);
  opacity: 0.8;
  margin-top: var(--space-xs);
}

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

.spin {
  animation: spin 1s linear infinite;
}
}
@layer components{

/* ==========================================================================
   ZONE PRICING MODAL
   BEM: zone-pricing__* (block: zone-pricing)
   HTML: components/pricing-modals.html #zonePricingModal
   ========================================================================== */

/* --- Layout Container --- */
.zone-pricing-modal {
  max-width: 920px;

  /* Cor de destaque para o slider do toggle */
  --card-highlight: var(--md-sys-color-primary);
}

.modal__header.zone-pricing-modal__header {
  flex-direction: row;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-m);
}

.modal__header.zone-pricing-modal__header .modal__title {
  flex-wrap: nowrap;
  margin: 0;
}

/* --- Icon Badge (green variant) --- */
.modal-header__icon-badge--green {
  color: var(--md-sys-color-on-primary-container);
  background: oklch(from var(--status-success) l c h / 12%);
  border: 1px solid oklch(from var(--status-success) l c h / 25%);
}

html.dark-theme .modal-header__icon-badge--green {
  color: var(--md-sys-color-on-primary-container);
  background: oklch(from var(--status-success) l c h / 18%);
  border-color: oklch(from var(--status-success) l c h / 35%);
}

/* --- Fieldset (screen-reader group, visually transparent) --- */
.zone-pricing-fieldset {
  display: contents;
  border: none;
  padding: 0;
  margin: 0;
}

/* --- Toggle (radio-driven) --- */
.zone-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Show/hide content based on checked state */
#zone-pricing-in,
#zone-pricing-out {
  display: none;
}

#zone-in:checked ~ #zone-pricing-in,
#zone-out:checked ~ #zone-pricing-out {
  display: block;
}

/* Toggle spacing — override generic pricing-toggle-container */
.zone-pricing-modal .zone-pricing-toggle {
  margin-bottom: var(--space-m);
}

/* Slider via pseudo-element */
.zone-pricing-toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: var(--z-base);
  width: calc(50% - 6px);
  height: calc(100% - 8px);
  pointer-events: none;
  background: var(--card-highlight);
  border-radius: calc(var(--md-sys-shape-corner-medium) - 2px);
  transition: transform var(--duration-smooth) var(--ease-snappy);
}

.zone-pricing-fieldset:has(#zone-out:checked) .zone-pricing-toggle::before {
  transform: translateX(calc(100% + 4px));
}

/* Active label color */
.zone-pricing-fieldset:has(#zone-in:checked)
  .zone-pricing-toggle
  .pricing-toggle-btn[for='zone-in'],
.zone-pricing-fieldset:has(#zone-out:checked)
  .zone-pricing-toggle
  .pricing-toggle-btn[for='zone-out'] {
  color: var(--md-sys-color-on-primary);
}

/* Focus-visible proxy for hidden radios */
.zone-radio:focus-visible + label,
.zone-pricing-toggle label:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: calc(var(--md-sys-shape-corner-medium) - 2px);
}

/* --- Sections (Na zona) --- */
.zone-pricing__section {
  margin-bottom: var(--space-l);
}

.zone-pricing__section-title {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-m);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.zone-pricing__section-title iconify-icon {
  font-size: 1.25rem;
  color: var(--md-sys-color-primary);
}

/* --- Price List --- */
.zone-pricing__price-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.zone-pricing__price-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  transition: background-color var(--duration-fast) var(--ease-snappy);
}

.zone-pricing__price-item:hover {
  background: var(--md-sys-color-surface-container);
}

.zone-pricing__price-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

.zone-pricing__price-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--md-sys-color-primary);
}

.zone-pricing__price-value .price-original {
  font-size: 0.6em;
  font-weight: 500;
  text-decoration: line-through;
  opacity: 0.55;
}

.zone-pricing__price-note {
  width: 100%;
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
}

/* --- Zones Footer --- */
.zone-pricing__zones-footer {
  padding-top: var(--space-m);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.zone-pricing__zones-text {
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
}

.zone-pricing__zones-text--outdoor {
  color: var(--md-sys-color-on-surface-variant);
}

/* --- Out-of-Zone Section --- */
.zone-pricing__section--cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.zone-pricing__cta-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-s);
  align-items: start;
  justify-content: start;
  width: min(100%, 42rem);
  margin-inline: auto;
}

.zone-pricing__out-zone-icon {
  align-self: start;
  font-size: 2rem;
  line-height: 1;
  color: var(--md-sys-color-primary);
}

.zone-pricing__out-zone-text {
  min-width: 0;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
}

/* --- Map Embed --- */
.zone-pricing__map {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  margin-bottom: var(--space-m);
}

.zone-pricing__map-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Contact Form --- */
.zone-pricing__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.zone-pricing__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.zone-pricing__label {
  display: flex;
  gap: var(--space-3xs);
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

.zone-pricing__label iconify-icon {
  font-size: 1.1rem;
  color: var(--md-sys-color-primary);
}

.zone-pricing__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-s) var(--space-m);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.zone-pricing__input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.6;
}

.zone-pricing__input:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

/* --- Validation Error States --- */
.zone-pricing__field.is-error .zone-pricing__input {
  border-color: var(--md-sys-color-error);
  box-shadow: 0 0 0 1px var(--md-sys-color-error);
}

.zone-pricing__field.is-error .zone-pricing__label {
  color: var(--md-sys-color-error);
}

.zone-pricing__error {
  display: none;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--md-sys-color-error);
}

.zone-pricing__field.is-error .zone-pricing__error {
  display: block;
}

/* --- Submit Button --- */
.zone-pricing__submit {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

/* --- Success State --- */
.zone-pricing__success {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-m);
}

.zone-pricing__success.is-hidden {
  display: none;
}

.zone-pricing__success-icon {
  font-size: 3rem;
  color: var(--md-sys-color-primary);
}

.zone-pricing__success-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.zone-pricing__success-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
}

.zone-pricing__success-text strong {
  color: var(--md-sys-color-on-surface);
}

/* --- Disclaimer --- */
.zone-pricing-modal__disclaimer {
  font-size: var(--text-xs);
  text-align: center;
  opacity: 0.7;
  margin-top: var(--space-s);
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */
html.dark-theme .zone-pricing__price-item {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline-variant);
}

html.dark-theme .zone-pricing__price-item:hover {
  background: var(--md-sys-color-surface-container-high);
}

html.dark-theme .zone-pricing__input {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
}

html.dark-theme .zone-pricing__map {
  border-color: var(--md-sys-color-outline);
}

html.dark-theme .zone-pricing__field.is-error .zone-pricing__input {
  border-color: var(--md-sys-color-error);
  box-shadow: 0 0 0 1px var(--md-sys-color-error);
}

/* ==========================================================================
   RESPONSIVE (Desktop > 768px)
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE (Mobile <= 768px)
   ========================================================================== */
}
@layer components{

/* ==========================================================================
   COMMUNITY MODAL - BASEADO NO DESIGN SYSTEM V14
   Estilos específicos do componente, herdando a base .modal
   ========================================================================== */

/* Overrides específicos para modal XL - apenas diferenças do base */
.modal__content--xl.community-modal-content {
  /* Dimensões XL */
  width: 95vw;
  max-width: 1200px;
  height: 85dvh;
  max-height: var(--max-height-modal);

  /* Layout interno: flex column (base .modal__content usa overflow-y auto) */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Scroll fica no __body, não no container */

  /* Reset padding base (scrollbar fica no body) */
  padding: 0;

  /* Background consistente */
  background-color: var(--md-sys-color-surface);
}

/* Body & Layout */
.community-modal__body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l);
  overflow-y: auto;
  background-color: var(--md-sys-color-surface);
}

/* Barra de Controlos (Tabs + Search) */
.community-controls {
  position: sticky;
  top: calc(var(--space-l)*-1);
  z-index: var(--z-content);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
  margin-top: calc(var(--space-2xs)*-1);
  background-color: oklch(from var(--md-sys-color-surface) l c h / 80%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.3s ease;
}

/* Search Bar (Expandable) */
.community-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
}

.community-search-wrapper iconify-icon {
  position: absolute;
  left: 14px;
  font-size: 1.25rem;
  color: var(--md-sys-color-primary);
  pointer-events: none;
}

.community-search-input {
  width: 100%;
  height: 100%;
  padding: 0 16px 0 44px;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Expansão ao focar ou ter texto */
.community-search-wrapper:focus-within,
.community-search-wrapper:has(.community-search-input:not(:placeholder-shown)) {
  width: 100%;
  background-color: var(--md-sys-color-surface-container-lowest);
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--md-sys-color-primary) l c h / 15%);
}

.community-search-wrapper:focus-within .community-search-input,
.community-search-wrapper:has(.community-search-input:not(:placeholder-shown))
  .community-search-input {
  opacity: 1;
}

/* Navigation Tabs (Pills) */
.community-nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--space-xs);
  padding-bottom: 4px;
  scrollbar-width: none;
  flex: 1 1;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-m);
  padding-right: var(--space-l);
}

.community-nav::-webkit-scrollbar {
  display: none;
}

.community-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  background-color: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    background-color var(--md-sys-motion-duration-short4) ease,
    color var(--md-sys-motion-duration-short4) ease,
    border-color var(--md-sys-motion-duration-short4) ease,
    transform var(--md-sys-motion-duration-short4) ease;
  min-height: 48px;
  scroll-snap-align: start;
  white-space: nowrap;
}

.community-tab:hover {
  background-color: var(--md-sys-color-surface-container-high);
  transform: translateY(-1px);
}

.community-tab.active {
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.badge-count {
  min-width: 20px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: var(--md-sys-color-on-primary);
  text-align: center;
  background-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
}

.community-tab:not(.active) .badge-count {
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-variant);
}

/* Gallery Grid */
.community-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-l);
  padding-bottom: var(--space-xl);
  align-items: start;
}

/* Cards */
.comm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  transition:
    background-color var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard),
    opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
}

.comm-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Glassmorphism subtle effect */
.comm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
  pointer-events: none;
}

.comm-card:hover {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-primary);
  box-shadow:
    var(--shadow-rich-lg),
    0 0 25px oklch(from var(--md-sys-color-primary) l c h / 12%);
  transform: translateY(-8px) scale(1.01);
}

.comm-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.comm-card__avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
}

.comm-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--md-sys-shape-corner-full);
  border: 3px solid var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-level1);
  transition: transform var(--md-sys-motion-duration-medium2) ease;
}

.comm-card:hover .comm-card__avatar {
  transform: rotate(-5deg) scale(1.08);
}

.comm-card__verified {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: var(--text-base);
  color: white;
  background-color: var(--brand-success-green);
  border: 2px solid var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: 0 0 12px oklch(from var(--brand-success-green) l c h / 50%);
}

.comm-card__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.02em;
}

.comm-card__handle {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-sys-color-primary);
  text-decoration: none;
  transition:
    opacity var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
  opacity: 0.8;
}

.comm-card__handle:hover {
  opacity: 1;
  color: var(--brand-primary-gold);
  transform: translateX(2px);
}

.comm-card__bio {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comm-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: auto;
  padding-top: var(--space-m);
}

.comm-card__tag {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--md-sys-color-on-primary-container);
  text-transform: uppercase;
  background-color: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-extra-small);
  letter-spacing: 0.08em;
  border: 1px solid oklch(from var(--md-sys-color-primary) l c h / 10%);
}

/* Resource Card Specifics */
.comm-card--resource {
  background: linear-gradient(
    145deg,
    var(--md-sys-color-surface-container-low) 0%,
    oklch(from var(--md-sys-color-tertiary-container) l c h / 10%) 100%
  );
}

.comm-card--resource .comm-card__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 2.25rem;
  color: var(--md-sys-color-on-tertiary-container);
  background-color: var(--md-sys-color-tertiary-container);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.3),
    var(--md-sys-elevation-level1);
}

.comm-card__action {
  margin-top: var(--space-s);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-width: 2px;
}

/* New Badge */
.comm-card__badge-new {
  position: absolute;
  top: 14px;
  right: -32px;
  background: var(--brand-warning-orange);
  color: white;
  padding: 4px 40px;
  font-size: 0.8125rem;
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: var(--z-content);
  letter-spacing: 0.1em;
}

/* Empty State */
.community-empty {
  grid-column: 1 / -1;
  padding: var(--space-xl) 0;
  text-align: center;
  opacity: 0.7;
}

.community-empty.is-hidden {
  display: none !important;
}

.community-empty .empty-icon {
  margin-bottom: var(--space-m);
  font-size: 3.5rem;
  color: var(--md-sys-color-outline);
}

/* Footer */
.community-modal__footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  text-align: center;
  background-color: var(--md-sys-color-surface-container-low);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
}
/* NOTA: _fluxo-forms.css foi consolidado em _forms.css (variantes .form-iframe, .fluxo-form) */
/* NOTE: _icons.css moved to critical.css */
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Badge System: Badges com animações de entrada (popIn) e hover.
  2. Theme Toggle: Botão de alternância de tema com animação aprimorada.
  3. Back to Top / FAB: Botão de retorno ao topo (.skip-link-fab).
  4. Estados de Hover e Visibilidade.
  5. Integração com Menu Mobile e Modais.
*/

/* ===================================
   COMPONENTES - BADGES, ALERTS E UTILITÁRIOS MD3
   =================================== */

/* Loading Spinner removido - usar definição de _icons.css */

/* ============================================================================
   BADGE SYSTEM - Animações de Entrada e Interação
   =============================================================================

   Animações aplicadas a todos os tipos de badges:
   - .pricing-badge, .pricing-card__badge
   - .carousel__badge
   - .about-badge, .about-project-badge
   - .link-badge, .tag-badge
   - .fluxo-card-badge
   - .like-count-badge, .comments-badge
============================================================================ */

/* Base Badge - Animação de Entrada */
[class*='badge']:not(.btn).is-visible,
.badge.is-visible {
  animation: badgePopIn var(--animation-normal) var(--ease-out-expo) backwards;
}

/* Variantes de Badge com timing escalonado */
.pricing-badge.is-visible,
.pricing-card__badge.is-visible {
  animation: badgePopIn var(--duration-smooth) var(--ease-ethereal) backwards;
}

.carousel__badge.is-visible {
  animation: badgePopIn var(--duration-smooth) var(--ease-ethereal) backwards;
}

.about-badge.is-visible,
.about-project-badge.is-visible {
  animation: badgePopIn var(--duration-smooth) var(--ease-ethereal) backwards;
}

.link-badge.is-visible,
.tag-badge.is-visible,
.fluxo-card-badge.is-visible {
  animation: badgePopIn var(--duration-smooth) var(--ease-ethereal) backwards;
}

/* Hover effects para badges interativos */
[class*='badge']:not(.btn):hover,
.badge:hover {
  animation: badgePulse var(--animation-normal) var(--ease-out-expo);
}

/* Badge com contador - Animação especial */
.like-count-badge.is-visible,
.comments-badge.is-visible {
  animation: badgeCountPop var(--duration-smooth) var(--ease-fluid) backwards;
}

/* Badge pulsante (para notificações, estado ativo) */
[class*='badge'].pulsing,
.badge.pulsing {
  animation: badgePulseInfinite 2s var(--easing-linear) infinite;
}

/* Delays escalonados para grupos de badges - Melhorado para ser mais genérico */
.badge-group .badge.is-visible:nth-child(1),
.pricing-features .feature-chip.is-visible:nth-child(1) {
  animation-delay: 0ms;
}

.badge-group .badge.is-visible:nth-child(2),
.pricing-features .feature-chip.is-visible:nth-child(2) {
  animation-delay: 50ms;
}

.badge-group .badge.is-visible:nth-child(3),
.pricing-features .feature-chip.is-visible:nth-child(3) {
  animation-delay: 100ms;
}

.badge-group .badge.is-visible:nth-child(4),
.pricing-features .feature-chip.is-visible:nth-child(4) {
  animation-delay: 150ms;
}

.badge-group .badge.is-visible:nth-child(5),
.pricing-features .feature-chip.is-visible:nth-child(5) {
  animation-delay: 200ms;
}

/* Reduced Motion - Sem animações para badges */

/* Theme Toggle — S.S.O.T. (consolidado de _navigation.css e _badges.css) */
.theme-toggle {
  position: relative;
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min, 44px);
  height: var(--touch-target-min, 44px);
  padding: var(--space-s);
  margin-left: var(--space-m);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full, 50%);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.theme-toggle iconify-icon {
  position: absolute;
  inset: 0;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  margin: auto;
  font-size: var(--icon-size-lg);
  color: var(--md-sys-color-on-surface);
  transform-origin: center;
  transition:
    transform var(--duration-smooth) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity var(--duration-fast) var(--ease-snappy);
}

/* Ícone do sol (tema claro) */
.theme-toggle .theme-icon-light {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  pointer-events: auto;
}

/* Ícone da lua (tema escuro) */
.theme-toggle .theme-icon-dark {
  opacity: 0;
  transform: scale(0.8) rotate(-90deg);
  pointer-events: none;
}

/* Estado quando o tema escuro está ativo */
html.dark-theme .theme-toggle .theme-icon-light {
  opacity: 0;
  transform: scale(0.8) rotate(90deg);
  pointer-events: none;
}

html.dark-theme .theme-toggle .theme-icon-dark {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  pointer-events: auto;
}

/* Estado durante transição (classe .toggling adicionada via JS) */
.theme-toggle.toggling .theme-icon-light,
.theme-toggle.toggling .theme-icon-dark {
  transform: rotate(180deg) scale(0.85);
}

/* Hover */
.theme-toggle:hover {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-highest, var(--state-hover-surface));
  box-shadow: var(--shadow-primary-sm);
  transform: scale(1.05);
}

.theme-toggle:hover .theme-icon-light {
  opacity: 1;
  transform: scale(1.1) rotate(15deg);
}

.theme-toggle:hover .theme-icon-dark {
  opacity: 0;
  transform: scale(1.1) rotate(-15deg);
}

html.dark-theme .theme-toggle:hover .theme-icon-light {
  opacity: 0;
  transform: scale(0.9) rotate(75deg);
}

html.dark-theme .theme-toggle:hover .theme-icon-dark {
  opacity: 1;
  transform: scale(1.1) rotate(15deg);
}

/* Active */
.theme-toggle:active {
  box-shadow: var(--shadow-sm);
  transform: scale(0.92);
}

/* Premium toggle components (controlled by html.dark-theme, not inline styles) */
.theme-toggle__thumb {
  transition: transform var(--duration-smooth) var(--ease-fluid);
  transform: translate(3px, -50%);
}

html.dark-theme .theme-toggle__thumb {
  transform: translate(21px, -50%);
}

.theme-toggle__sun {
  transition: opacity var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

html.dark-theme .theme-toggle__sun {
  opacity: 0.25;
  transform: scale(0.7) rotate(-15deg);
}

.theme-toggle__moon {
  transition: opacity var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
  opacity: 0.25;
  transform: scale(0.7) rotate(15deg);
}

html.dark-theme .theme-toggle__moon {
  opacity: 1;
  transform: scale(1);
}

.theme-toggle__track {
  transition: background-color var(--duration-fast) var(--ease-snappy);
  background-color: var(--md-sys-color-surface-variant);
}

html.dark-theme .theme-toggle__track {
  background-color: var(--md-sys-color-primary-container);
}

/* Back to Top & FAB */
.skip-link-fab {
  position: fixed;
  right: var(--space-xl);
  bottom: var(--space-xl);
  z-index: var(--z-fab);
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: var(--height-component-xl);
  height: var(--height-component-xl);
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  outline: none;
  background-color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--md-sys-elevation-level3);
  opacity: 0;
  transform: translateY(20px) scale(0.8);

  /* Transição de Saída (Lenta e com delay na visibility) */
  transition:
    transform var(--duration-elegant) var(--ease-ethereal),
    box-shadow var(--duration-elegant) var(--ease-fluid),
    background-color var(--duration-elegant) var(--ease-fluid),
    opacity var(--duration-elegant) var(--ease-ethereal),
    visibility 0s var(--duration-elegant);
}

.skip-link-fab.is-visible {
  visibility: visible;
  opacity: 1;
  transform: var(--transform-reset);

  /* Transição de Entrada (Mais rápida e sem delay na visibility) */
  transition:
    transform var(--duration-smooth) var(--ease-ethereal),
    opacity var(--duration-smooth) var(--ease-fluid),
    visibility 0s;
}

.skip-link-fab::before {
  position: absolute;
  inset: 0;
  z-index: var(--z-negative);
  pointer-events: none;
  content: '';
  background-color: currentcolor;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.skip-link-fab:hover::before {
  opacity: var(--state-hover-opacity);
}

.skip-link-fab:focus-visible::before {
  opacity: var(--state-focus-opacity);
}

.skip-link-fab:active::before {
  opacity: var(--state-pressed-opacity);
}

.skip-link-fab:hover {
  box-shadow: var(--md-sys-elevation-level4);
  transform: scale(1.05);
}

.skip-link-fab:focus-visible {
  outline: 2px solid var(--md-sys-color-on-primary);
  outline-offset: 2px;
}

.skip-link-fab iconify-icon {
  font-size: var(--icon-size-md);
  color: var(--md-sys-color-on-tertiary);
}

.body-menu-open .skip-link-fab,
.body-modal-aberto .skip-link-fab {
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Title Marquee Base: Lógica de overflow e altura mínima.
  2. Marquee Content: Container do texto com will-change.
  3. Estados de Controle: Sincronizado, Pausado, Forçado e Retomada Suave.
  4. Efeitos Visuais: Brilho dinâmico (glow) em hover e fade lateral.
  5. MEDIA QUERIES:
     - Overflow responsivo.
     - Otimização de velocidade para mobile.
     - Reduced Motion.
*/

/* ==========================================================================
   MARQUEE TITLES - Efeito de rolagem para títulos da sidebar-artigos
   ========================================================================== */

/* Estilo para os títulos com efeito marquee */
.article-item__title.marquee {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: var(--touch-target-min);
  padding: var(--space-s) var(--space-m);
  overflow: hidden;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: none;
}

/* Container do texto marquee */
.article-item__title.marquee .marquee-content {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  line-height: normal;
  text-align: left;
  white-space: nowrap;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Classe para garantir alinhamento inicial preciso */
.article-item__title.marquee.inicio-sincronizado .marquee-content {
  transform: translateX(0%);

  /* ✅ CORREÇÃO: Iniciar animação começando da esquerda */
  animation-play-state: running;
}

/* Classe de sincronização forçada */
.article-item__title.marquee.force-sync .marquee-content {
  transform: translateX(0%);

  /* ✅ CORREÇÃO: Reset começando da esquerda */
  animation: none;
}

/* Ajustes para modo escuro */
.dark-theme .sidebar__lista-artigos .article-item__title.marquee {
  color: var(--md-sys-color-on-surface);
}

/* ✅ SINCRONIZAÇÃO PRECISA: Hover controlado via JavaScript */
.artigo-item:hover .article-item__title.marquee .marquee-content {
  /* Efeito visual adicional controlado por JS */
  opacity: 0.85;
}

/* Estado focus para acessibilidade controlado via JavaScript */
.article-item__title.marquee:focus .marquee-content {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  opacity: 0.9;
}

/* Estado quando está sincronizado (pausado no hover) */
.article-item__title.marquee.sincronizando .marquee-content {
  opacity: 0.85;

  /* ✅ CORREÇÃO: Transição mais longa e suave para evitar saltos */
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

/* Estado de retoma suave após hover */
.article-item__title.marquee.retomando .marquee-content {
  transform: none;

  /* ✅ CORREÇÃO: Adicionar transição suave para mudança de velocidade */
  transition: animation-duration 1.5s var(--ease-fluid);
  animation-duration: 45s;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Animação retomando lentamente */
  animation-play-state: running;
}

/* Efeito sutil de scale no hover */
.artigo-item:hover .article-item__title.marquee {
  transform: scale(1.02);
  transition: transform var(--duration-smooth) var(--ease-snappy);
}

/* Estado visível (controlado via Intersection Observer) */
.article-item__title.marquee.is-visible .marquee-content {
  animation-delay: 0.1s;
  animation-play-state: running;
}

.article-item__title.marquee.is-visible .marquee-content.hovered-state {
  transform: translateY(0);
}

/* Estado pausado (para controle via JavaScript) */
.article-item__title.marquee.paused .marquee-content,
.article-item__title.marquee.sincronizando .marquee-content,
.article-item__title.marquee:not(.is-visible) .marquee-content {
  animation-play-state: paused;
}

/* ✅ MELHORIA: Efeitos avançados de hover e brilho */
.article-item__title.marquee .marquee-content::before,
.article-item__title.marquee .marquee-content::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  opacity: 0;
}

.article-item__title.marquee .marquee-content::before {
  z-index: var(--z-content);
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(from var(--md-sys-color-primary) l c h / 5%) 50%,
    transparent 100%
  );
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.article-item__title.marquee .marquee-content::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(from var(--md-sys-color-primary) l c h / 10%) 50%,
    transparent 100%
  );
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.artigo-item:hover .article-item__title.marquee .marquee-content::before,
.artigo-item:hover .article-item__title.marquee .marquee-content::after {
  opacity: 1;
}

/* Efeito de "fading" nas bordas durante a animação */
.article-item__title.marquee::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-elevated);
  width: var(--space-l);
  pointer-events: none;
  content: '';
  background: linear-gradient(to left, var(--md-sys-color-surface), transparent);
  opacity: 0.8;
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

/* Reduzir opacidade do fade no hover para melhor legibilidade */
.artigo-item:hover .article-item__title.marquee::after {
  opacity: 0.4;
}

/* ✅ MELHORIA: Estado preparado para animação */
.article-item__title.marquee.preparado .marquee-content {
  opacity: 1;

  /* Garantir estado inicial limpo */
  transform: translateX(0%);
  animation: none;
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* Verificação de overflow responsivo (480px) */

/* Versão otimizada para mobile (768px) */

/* Acessibilidade: Reduzir movimento para usuários que preferem */
}
/* _hover-states.css REMOVIDO - FASE 1: Todo código útil estava duplicado em outros arquivos */
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Marquee Container: Lógica de exibição apenas em mobile.
  2. Marquee Hint: Balão informativo com animação de gesto (swipe).
  3. Marquee Row: Máscaras de gradiente e fluxo horizontal.
  4. Marquee Track: Trilho animado para os itens.
  5. Marquee Item (Card Mini): Estilo de botão tátil com ícones e títulos.
  6. MEDIA QUERIES (Ativação em Mobile e ocultação de grelha antiga).
*/

/* ===================================
   INFINITE MARQUEE - MOBILE ONLY (<768px)
   =================================== */

/* Dynamic variables (set by JS) */

/* Oculto por padrão (Desktop/Tablet) */
.marquee-container {
  display: none;
  flex-direction: column;
  gap: var(--space-l);
  width: 100%;
  padding: 0 var(--space-m) var(--space-l) var(--space-m);

  /* Padding lateral para o hint não ultrapassar */
  overflow: hidden;

  /* Mask removido daqui para não afetar o hint */
}

/* Estrutura do Marquee */
.marquee-hint {
  position: relative;

  /* Flex & Layout */
  display: flex;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;

  /* Garante que nunca ultrapassa o container */
  padding: var(--space-s) var(--space-m);
  margin: 0 auto var(--space-s) auto;
  overflow: hidden;

  /* Typography */
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-primary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  word-break: break-word;

  /* Previne que texto longo quebre o layout */
  overflow-wrap: break-word;
  background-color: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--shadow-rich-sm);
  opacity: 1;
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.marquee-hint:hover {
  transform: scale(1.02);
}

.marquee-hint iconify-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
  color: var(--md-sys-color-primary);
  animation: gesture-swipe 2s ease-in-out infinite;

  /* @keyframes gesture-swipe movido para css/01-base/_animations.css */
}

/* Swipe Indicator visual */
.swipe-indicator {
  display: inline-flex;
  gap: 4px;
  margin-left: var(--space-s);
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.6;
}

.swipe-indicator-arrow {
  font-size: 0.875rem;
  animation: swipePulse 1.5s ease-in-out infinite;
}

.swipe-indicator-arrow:first-child {
  animation-delay: 0s;
}

.swipe-indicator-arrow:last-child {
  animation-delay: 0.75s;
}

.marquee-row {
  display: flex;

  /* Garante que ocupa a largura para a máscara funcionar */
  gap: var(--space-m);
  width: 100%;

  /* Optimização: isola a camada de composição */
  contain: layout style paint;

  /* Fade Effect movido para as linhas */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  gap: var(--space-m);
  touch-action: pan-y;
  will-change: transform;
}

/* Animações de scroll infinito — apenas como fallback quando JS não inicializa */

/* Allow JS to take control for manual swipe */
.marquee-track.manual-active {
  animation: none !important;
  transform: translateX(var(--marquee-pos, 0));
}

/* Pausar animação no hover/touch do container */
.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-container:active .marquee-track {
  animation-play-state: paused;
}

/* Card Style (Mini) */
button.marquee-item {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex: 0 0 8.125rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 6.875rem;
  padding: var(--space-s);
  margin: 0;
  font-family: inherit;
  line-height: var(--line-height-tight);
  color: inherit;
  text-align: center;
  appearance: none;
  touch-action: pan-y;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

button.marquee-item:hover {
  background-color: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level2);
  transform: translateY(-2px);
}

button.marquee-item:active {
  background-color: var(--state-pressed-surface);
  transform: translateY(0) scale(0.98);
}

/* Estado ativo quando modalidade está selecionada */
button.marquee-item.is-active {
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 3px var(--md-sys-color-primary-container);
  transform: scale(1.05);
}

button.marquee-item.is-active::after {
  position: absolute;
  inset: -3px;
  pointer-events: none;
  content: '';
  border: 2px solid var(--md-sys-color-primary);
  border-radius: calc(var(--md-sys-shape-corner-medium) + 4px);
}

button.marquee-item .icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--component-height-sm, 40px);
  height: var(--component-height-sm, 40px);
  margin-bottom: var(--space-s);
  font-size: 1.5rem;
  color: var(--md-sys-color-primary);
}

.marquee-item h3 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--line-height-tight);
  color: var(--md-sys-color-on-surface);
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* Visível apenas em Mobile e Tablet (<=768px) */

/* ===================================
   KEYFRAMES - ANIMAÇÕES DE SCROLL
   =================================== */

@keyframes scrollMarqueeLeft {
  0% {
    transform: translate3d(0, 0, 0);

    /* translate3d é mais rápido que translateX */
  }

  100% {
    transform: translate3d(calc(-50% - var(--space-m)/2), 0, 0);
  }
}

@keyframes scrollMarqueeRight {
  0% {
    transform: translate3d(calc(-50% - var(--space-m)/2), 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* ===================================
   REDUCED MOTION - ACESSIBILIDADE
   =================================== */

/* ===================================
   KEYFRAMES ADICIONAIS
   =================================== */

@keyframes swipePulse {
  0%,
  100% {
    opacity: 0.4;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-3px);
  }
}
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Progress Container: Barra fixa no topo do ecrã.
  2. Progress Fill: Lógica de preenchimento com gradiente.
  3. Shimmer Effect: Feedback animado de carregamento ativo.
  4. Estados de Visibilidade.
*/

/* ===================================
   PROGRESS BAR COMPONENT
   =================================== */

/* --- Progress Bar --- */
.progress-container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-toast);
  visibility: hidden;
  height: 3px;
  background: var(--md-sys-color-surface-container-low);
  opacity: 0;
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.progress-container.is-visible {
  visibility: visible;
  opacity: 1;
}

.progress-fill {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--gradient-progress-bar);
  transform: translateX(-100%);
  transition: none;
}

.progress-fill::after {
  position: absolute;
  top: 0;
  right: calc(var(--space-2xl)*-1);
  width: var(--space-2xl);
  height: 100%;
  content: '';
  background: linear-gradient(90deg, transparent, var(--white-alpha-40), transparent);
  opacity: 0;
  transform: skewX(-20deg);
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.progress-container.active .progress-fill::after {
  opacity: 1;
  animation: shimmer-progress 2s var(--ease-fluid) infinite;
}

/* NOTA: @keyframes shimmer movido para _animations.css como shimmer-progress (linha 759-767) */

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* --- Acessibilidade: Regra universal aplicada em _reset.css --- */
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Wrapper e Z-Index (.wrapper-chat)
  2. FAB Button: Gatilho flutuante do chat.
  3. Chat Widget Container: Lógica de exibição e transição.
  4. Header: Avatar, status e ações do cabeçalho.
  5. Text View: Bolhas de mensagem (User vs Bot) e Scroll.
  6. Typing Indicator: Feedback visual de processamento.
  7. Footer / Input: Campo de texto e botão de envio.
  8. Voice View: Visualizador de áudio e transcrição.
  9. Dark Mode Overrides.
  10. MEDIA QUERIES (Mobile Fullscreen).
*/

/* ==========================================
   Gemini Chat Widget Styles
   Using Site's Design System Variables
   ========================================== */

/* --- Utilities --- */
.hidden {
  display: none !important;
}

/* --- Wrapper --- */
#wrapper-chat {
  /* Acima da navbar mobile (1000) */
  position: relative;
  z-index: var(--z-chat);
  font-family: var(--font-family-primary, 'Google Sans', sans-serif);
}

/* --- FAB Button --- */
.chat-fab-btn {
  position: fixed;
  right: var(--space-xl);

  /* Position above back-to-top: tighter gap for visual connection */
  bottom: calc(var(--space-xl) + var(--height-component-xl) + var(--space-s));
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--height-component-xl);
  height: var(--height-component-xl);
  font-size: var(--text-xl);
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  background-color: var(--md-sys-color-primary);

  /* Acima da navbar mobile (1000) */
  border: none;
  border-radius: var(--md-sys-shape-corner-full, 50%);
  box-shadow: var(--md-sys-elevation-level3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    transform 400ms var(--ease-fluid),
    box-shadow 400ms var(--ease-fluid),
    opacity 400ms var(--ease-fluid);
}

.chat-fab-btn:hover {
  box-shadow: var(--md-sys-elevation-level4);
  transform: translateY(-4px);
}

.chat-fab-btn:active {
  transform: scale(0.95);
}

.chat-fab-btn.hidden {
  opacity: var(--opacity-hidden);
  transform: scale(0.8) rotate(45deg);
}

/* Fix Icon Size for Iconify */
.chat-fab-btn iconify-icon {
  font-size: var(--icon-size-lg);
  pointer-events: none;
}

/* Hide FAB when menu is open */
.body-menu-open .chat-fab-btn,
.body-modal-aberto .chat-fab-btn {
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

/* --- Chat Widget Container --- */
.gemini-chat-widget {
  position: fixed;
  right: var(--space-xl);

  /* Containment — isola paint do chat do resto da página */
  contain: layout style paint;

  /* Desktop Defaults - Fixed dimensions */

  /* Position above back-to-top FAB: tighter gap for visual connection */
  bottom: calc(var(--space-xl) + var(--height-component-xl) + var(--space-m));
  z-index: var(--z-chat);

  /* Acima da navbar mobile (1000) */
  display: flex;
  flex-direction: column;
  width: 23.75rem;
  height: 32.5rem;
  transform-origin: bottom right;
  transition:
    opacity 400ms var(--ease-ethereal),
    transform 400ms var(--ease-ethereal);
}

/* Hidden State */
.gemini-chat-widget.chat-hidden {
  pointer-events: none;
  opacity: var(--opacity-hidden);
  transform: translateY(8px) scale(0.95);
}

.gemini-chat-widget:not(.chat-hidden) {
  opacity: var(--opacity-visible);
  transform: var(--transform-reset);
}

.chat-container {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: var(--transition-colors);
}

/* --- Header --- */
.chat-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-l);
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-variant);
  transition: var(--transition-colors);
}

.header-content {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

.bot-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: 50%;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bot-info {
  display: flex;
  flex-direction: column;
}

.bot-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
}

.bot-status {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin-top: var(--space-xs);
}

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--brand-success-green);
  border-radius: 50%;
}

.status-text {
  font-size: var(--text-xs);

  /* Approx 10px */
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.75;
}

.header-actions {
  display: flex;
  gap: var(--space-s);
  align-items: center;
}

/* --- View: Text --- */
.chat-view-text {
  position: relative;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  overflow: hidden;
}

.chat-messages {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-l);
  overflow-y: auto;
  background-color: var(--md-sys-color-surface-container);
}

/* Scrollbar styling */
.chat-scrollbar::-webkit-scrollbar {
  width: 4px;
}

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

.chat-scrollbar::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
}

/* Message Bubbles */
.message-user,
.message-bot {
  position: relative;
  max-width: var(--max-width-chat-message, 85%);
  padding: var(--space-m) var(--space-l);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
  border-radius: var(--md-sys-shape-corner-large);
}

.message-user {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
  border-top-right-radius: 0;
}

.message-bot {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-high);
  border-top-left-radius: 0;
}

.message-time {
  display: block;

  /* Approx 10px */
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  opacity: 0.5;
}

/* Typing Indicator */
.chat-typing {
  padding: 0 var(--space-l) var(--space-s) var(--space-l);
}

.chat-typing.hidden {
  display: none;
}

.typing-bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  width: fit-content;
  padding: var(--space-m) var(--space-l);
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-large);
  border-top-left-radius: 0;
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--md-sys-color-on-surface-variant);
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

/* @keyframes typing movido para css/01-base/_animations.css */

.animate-in {
  animation: slideUpFade var(--duration-smooth) var(--ease-fluid) forwards;
}

/* --- Footer / Input --- */
.chat-footer {
  padding: var(--space-l);
  background-color: var(--md-sys-color-surface);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.chat-input-form {
  position: relative;
  display: flex;
  gap: var(--space-s);
}

.chat-input-field {
  flex: 1 1;
  padding: var(--space-s) var(--space-xl) var(--space-s) var(--space-m);
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface);
  outline: none;
  background-color: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}

.chat-input-field::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.chat-input-field:focus {
  z-index: var(--z-content);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--focus-outline-primary);
}

.chat-send-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}

/* --- View: Voice --- */
.chat-view-voice {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-xl);
  background-color: var(--md-sys-color-surface);
}

.chat-view-voice.hidden {
  display: none;
}

.chat-view-voice.flex {
  display: flex;
}

.voice-visualizer-container {
  position: relative;
  margin-bottom: var(--space-l);
}

.mic-visualizer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  font-size: var(--text-4xl);
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: 50%;
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    color var(--duration-smooth) var(--ease-fluid);
}

.mic-active {
  color: var(--md-sys-color-on-primary) !important;
  background-color: var(--md-sys-color-primary) !important;
  box-shadow: 0 0 50px oklch(from var(--md-sys-color-primary) l c h / 50%);
  transform: scale(1.1);
}

.pulse-ring {
  position: absolute;
  inset: 0;
  display: none;
  border: 4px solid var(--md-sys-color-primary);
  border-radius: 50%;
}

.pulse-ring.active {
  display: block;
  animation: ping 1.5s var(--ease-fluid) infinite;
}

.voice-instructions {
  margin-bottom: var(--space-xl);
  text-align: center;
}

.voice-title {
  margin: 0 0 0.5rem;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.voice-subtitle {
  margin-bottom: var(--space-s);
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
}

.voice-transcription-container {
  width: 100%;
  max-width: 24rem;
  min-height: 60px;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.voice-transcription-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--md-sys-color-primary);
  -webkit-box-orient: vertical;
}

.voice-action-btn.active-red {
  color: var(--md-sys-color-on-error);
  background-color: var(--md-sys-color-error);
}

.voice-action-btn.active-red:hover {
  filter: brightness(1.1);
}

/* =======================================================================
   DARK MODE OVERRIDES
   ======================================================================= */

/* Bot avatar com fundo sutil no dark mode */
html.dark-theme .bot-avatar {
  background-color: var(--white-alpha-10);
}

/* Input field com fundo mais escuro no dark mode */
html.dark-theme .chat-input-field {
  background-color: var(--md-sys-color-surface-container-high);
}

/* Header buttons com hover mais visível no dark mode */
html.dark-theme .header-btn:hover {
  background-color: var(--white-alpha-15);
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* MOBILE OVERRIDES (≤768px) */

/* DESKTOP / TABLET (≥768px) */

/* ==========================================================================
   TABLET OPTIMIZATIONS (768px - 1024px)
   Consolidated: Removed 900px split
   ========================================================================== */

/* ==========================================================================
   TABLET TOUCH OPTIMIZATIONS (768-1024px, touch devices)
   ========================================================================== */
}
@layer components{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Toast Container: Posicionamento fixo centrado.
  2. Toast Base: Design premium glass, desfoque e sombras.
  3. Estrutura Interna: Ícone, Mensagem e Botão Fechar.
  4. Tipos Semânticos: Sucesso, Erro, Aviso e Info (Cores).
  5. MEDIA QUERIES (Ajuste de posição em mobile).
  6. Reduced Motion.
*/

/* ==========================================================================
   COMPONENTES - TOAST NOTIFICATIONS
   Style: Material Design 3 / Dark Premium Glass
   ========================================================================== */

.toast-container {
  position: fixed;
  bottom: var(--space-xl);
  left: 50%;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
  max-width: var(--max-width-modal-medium, 25rem);
  padding: 0 var(--space-m);
  pointer-events: none;
  transform: translateX(-50%);
}

.toast {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  width: 100%;
  padding: var(--space-m) var(--space-l);
  pointer-events: auto;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--glass-border);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level3);
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--glass-blur-default));
  backdrop-filter: blur(var(--glass-blur-default));
  transform: translateY(var(--space-m)) scale(0.95);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

.toast--visible {
  opacity: 1;
  transform: var(--transform-reset);
}

/* Ícone */
.toast__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Mensagem */
.toast__message {
  flex: 1 1;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: var(--line-height-snug);
  color: var(--md-sys-color-on-surface);
}

/* Botão Fechar */
.toast__close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 50%;
  transition: background-color var(--duration-fast) var(--ease-snappy);
}

.toast__close:hover {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-variant);
}

/* Tipos (Cores) */
.toast--success .toast__icon {
  color: var(--brand-success-green);
}

.toast--error .toast__icon {
  color: var(--md-sys-color-error);
}

.toast--warning .toast__icon {
  color: var(--brand-warning-orange);
}

.toast--info .toast__icon {
  color: var(--md-sys-color-primary);
}

/* Ajuste para mobile se houver bottom navigation ou FAB */

/* Reduced Motion */
}
@layer components{

/**
 * @fileoverview Disclaimer Médico - Versão de Perfeição Visual (V14 Final).
 * Foco: Harmonia, Ritmo Vertical e Alinhamento Ótico.
 */

.medical-disclaimer {
  box-sizing: border-box;
  display: flex;

  /* Perfeitamente centrado horizontalmente e verticalmente */
  gap: var(--space-s);
  align-items: center;
  width: 100%;
  max-width: var(--max-width-narrow, 45rem);

  /* 16px de gap entre ícone e texto */
  padding: var(--space-s) var(--space-m);

  /* Centralização Horizontal (auto nas laterais) */
  margin: var(--space-m) auto 0;

  /* 24px de ritmo vertical */

  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.medical-disclaimer .disclaimer-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  padding-left: var(--space-s);
  /* Ícone um pouco maior para visibilidade clara */
  color: var(--md-sys-color-primary);
  opacity: 0.7;
}

.medical-disclaimer p {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--text-xs);
  font-weight: 500;
  /* 13px */
  line-height: 1.6;
  padding-left: var(--space-m);
  /* Altura de linha mais confortável para leitura */
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  letter-spacing: 0.015em;
}

/* Variante Integrada para o Formulário de Contacto */
.medical-disclaimer--form {
  max-width: 100%;
  padding: var(--space-s) var(--space-m);
  margin: 0;
  background-color: var(--md-sys-color-surface-container-lowest);

  /* Ainda mais sutil no form */
  border: 1px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-medium);
}

.medical-disclaimer--form .disclaimer-icon {
  display: none;

  /* Mantemos o foco apenas na barra lateral e texto no form */
}

.medical-disclaimer--form p {
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 400;
  opacity: 0.8;
}
}
@layer components{

/* ==========================================================================
   CALCULADORA CIENTÍFICA & HUB DE FERRAMENTAS
   Design: Material Design 3 + OKLCH Tokens
   Refatorado: Dashboard Grid Layout
   ========================================================================== */

/* --- VARIANTES DE MODAL PARA CALCULADORAS --- */
.modal.modal--calculator {
  z-index: var(--z-modal-supreme);
}

/* --- FC CALCULATOR INPUTS PANEL --- */
.calc-fc-inputs {
  padding: var(--space-m);
}

/* --- HUB NO BLOG --- */
.blog-tools-hub {
  position: relative;
  padding: var(--space-l);
  margin-bottom: var(--space-l);
  overflow: hidden;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--shadow-sm);
}

/* Header mais compacto */
.tools-hub__header {
  margin-bottom: var(--space-m);
}

.tools-hub__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.01em;
}

.tools-hub__subtitle {
  margin-bottom: var(--space-s);
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.8;
}

/* --- TOOLS LIST (GRID RESPONSIVA) --- */
.tools-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xs);
}

/* --- TOOL ROW (CARD) - Scoped to blog hub only --- */
.blog-tools-hub .tool-row {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  height: auto;
  min-height: 4.5rem;
  padding: var(--space-m);
  font-family: inherit;
  color: inherit;
  text-align: left;

  /* Reset Button */
  appearance: none;
  cursor: pointer;
  background: var(--md-sys-color-surface);
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
}

.blog-tools-hub .tool-row:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline-variant);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.blog-tools-hub .tool-row:active {
  background: var(--md-sys-color-surface-container-highest);
  transform: scale(0.99);
}

/* Ícone */
.blog-tools-hub .tool-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  font-size: var(--icon-size-lg);
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.blog-tools-hub .tool-row:hover .tool-row__icon {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  transform: scale(1.1);
}

/* Conteúdo de Texto */
.blog-tools-hub .tool-row__content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 2px;
}

.blog-tools-hub .tool-row__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--md-sys-color-on-surface);
}

.blog-tools-hub .tool-row__desc {
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--md-sys-color-on-surface-variant);
}

/* Seta (Chevron) */
.blog-tools-hub .tool-row__arrow {
  font-size: var(--icon-size-md);
  color: var(--md-sys-color-outline);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy);
}

.blog-tools-hub .tool-row:hover .tool-row__arrow {
  color: var(--md-sys-color-primary);
  transform: translateX(4px);
}

/* --- ESTILOS GLOBAIS DE FORMULÁRIO (MODAIS) --- */
.calculadora-form,
.calc-fc-inputs form {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.calc-description {
  margin-bottom: var(--space-l);
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  opacity: 0.85;
}

.calculadora-form .form-group,
.calc-fc-inputs .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.calculadora-form .form-group label,
.calc-fc-inputs .form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface);
}

.calculadora-form .form-row,
.calc-fc-inputs .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

/* Inputs e Selects Universais */
.calculadora-form input:not([type='radio'], [type='checkbox']),
.calculadora-form select,
.calc-fc-inputs input:not([type='radio'], [type='checkbox']),
.calc-fc-inputs select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  color: var(--md-sys-color-on-surface);
  appearance: none;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

/* Ícone dentro do input - Refinado para alinhamento pixel-perfect */
.input-with-icon {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.input-with-icon input {
  flex: 1 1;
  padding-left: var(--input-icon-padding);
}

.input-with-icon iconify-icon {
  position: absolute;
  top: 50%;
  left: var(--input-icon-position);
  z-index: var(--z-content);
  font-size: var(--icon-size-md);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

/* Feedback visual quando o input tem foco */
.input-with-icon input:focus+iconify-icon {
  color: var(--md-sys-color-primary);
  transform: translateY(-50%) scale(1.1);
}

/* Estilo do Placeholder */
.calculadora-form input::placeholder,
.calc-fc-inputs input::placeholder {
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.5;
}

/* Select Arrow Customizado */
.calculadora-form select,
.calc-fc-inputs select {
  padding-right: var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
}

/* Focus States */
.calculadora-form input:focus,
.calculadora-form select:focus,
.calc-fc-inputs input:focus,
.calc-fc-inputs select:focus {
  outline: none;
  background: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 4px oklch(from var(--md-sys-color-primary) l c h / 15%);
}

/* Validation States */
.calculadora-form input:not([type='radio'], [type='checkbox']):user-invalid,
.calc-fc-inputs input:not([type='radio'], [type='checkbox']):user-invalid {
  border-color: var(--md-sys-color-error);
  box-shadow: 0 0 0 4px oklch(from var(--md-sys-color-error) l c h / 12%);
}

.calculadora-form input:not([type='radio'], [type='checkbox']):user-invalid:focus,
.calc-fc-inputs input:not([type='radio'], [type='checkbox']):user-invalid:focus {
  border-color: var(--md-sys-color-error);
  box-shadow: 0 0 0 4px oklch(from var(--md-sys-color-error) l c h / 15%);
}

/* Botões Largura Total */
.btn--full-width {
  justify-content: center;
  width: 100%;
  margin-top: var(--space-m);
}

/* Header do Modal Personalizado */
.modal--calculator .modal__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-m);
  align-items: start;
}

.modal__title-wrapper {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.modal--calculator .modal__close {
  position: static;
  place-self: start end;
}

.modal__icon {
  font-size: var(--icon-size-2xl);
  color: var(--md-sys-color-primary);
}

/* Calc title usa o base .modal__title - sem overrides */

/* Cards de Seleção (Radio) */
.calc-mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

/* Visually hidden mas acessível para screen readers e teclado */
.calc-mode-option input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Destaca o card quando o radio recebe foco via teclado */
.calc-mode-option input:focus-visible+.calc-mode-card {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-color: var(--md-sys-color-primary);
}

.calc-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-m);
  cursor: pointer;
  background: var(--md-sys-color-surface);
  border: 2px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

.calc-mode-card iconify-icon {
  margin-bottom: var(--space-xs);
  font-size: var(--icon-size-xl);
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--duration-fast) var(--ease-snappy);
}

.calc-mode-card span {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-surface);
}

.calc-mode-card small {
  display: block;
  margin-top: var(--space-4xs);
  font-size: var(--text-xs);
  opacity: 0.7;
}

/* Estado Selecionado */
.calc-mode-option input:checked+.calc-mode-card {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.calc-mode-option input:checked+.calc-mode-card iconify-icon {
  color: var(--md-sys-color-primary);
}

.calc-mode-option input:checked+.calc-mode-card span {
  color: var(--md-sys-color-on-primary-container);
}

/* --- CHECKBOX TILE (Estilo Unificado) --- */
.checkbox-wrapper {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m);
  cursor: pointer;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy);
}

.checkbox-wrapper:hover {
  background: var(--md-sys-color-surface-container-high);
}

.checkbox-wrapper:has(input:checked) {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.checkbox-wrapper input[type='checkbox'] {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
}

.checkbox-wrapper label,
.checkbox-wrapper span {
  flex: 1 1;
  margin: 0;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface);
}

/* --- TOGGLE SWITCH (Reutilizado da sidebar) --- */
.toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin-left: auto;
  background: var(--md-sys-color-outline);
  border-radius: 12px;
  transition: background-color var(--duration-fast) var(--ease-snappy);
}

.toggle-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--md-sys-color-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.checkbox-wrapper:has(input:checked) .toggle-switch {
  background: var(--md-sys-color-primary);
}

.checkbox-wrapper:has(input:checked) .toggle-switch__thumb {
  transform: translateX(20px);
}

.checkbox-wrapper input:focus-visible+.toggle-switch,
.checkbox-wrapper:has(input:focus-visible) .toggle-switch {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.help-text {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.8;
}

/* --- FORM GROUP SPACED (Corrida) --- */
.form-group-spaced {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* --- SEÇÃO DE LABELS E TÍTULOS --- */
.section-label,
.section-title {
  display: block;
  margin-bottom: var(--space-s);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.section-title {
  padding-bottom: var(--space-xs);
  margin-top: var(--space-l);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* --- CÁBULA (TABELA GRID) --- */
.cabula-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}

.cabula-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-xs);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}

/* --- INPUTS DE TEMPO (H:M:S) --- */
.time-inputs-wrapper {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.time-input-group {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: center;
}

.time-input-group input {
  padding: var(--space-s) var(--space-4xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.time-input-group span {
  margin-top: var(--space-4xs);
  font-size: var(--text-xs);
  text-transform: uppercase;
  opacity: 0.6;
}

.time-separator {
  padding-bottom: 16px;
  font-weight: bold;
  opacity: 0.5;
}

/* --- RESULTADOS --- */
.calc-result,
.calc-fc-results {
  padding: var(--space-l);
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  animation: slideUpFade var(--duration-elegant) var(--ease-fluid);
}

.calc-result__header {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-m);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.calc-result__header h4 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-extrabold);
}

.calc-result__body {
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
}

/* Variantes de Resultado */
.calc-result--success,
.calc-fc-results.calc-result--success {
  color: var(--status-on-success-container);
  background: var(--status-success-bg);
  border-color: var(--status-success);
}

.calc-result--success .calc-result__header iconify-icon,
.calc-fc-results.calc-result--success .calc-result__header iconify-icon {
  color: var(--status-success);
}

.calc-result--warning,
.calc-fc-results.calc-result--warning {
  color: var(--brand-neutral-900);
  background: var(--status-warning-bg);
  border-color: var(--status-warning);
}

.calc-result--warning .calc-result__header iconify-icon,
.calc-fc-results.calc-result--warning .calc-result__header iconify-icon {
  color: var(--brand-warning-orange);
}

.calc-result--danger,
.calc-fc-results.calc-result--danger {
  color: var(--status-on-error-container);
  background: var(--status-error-bg);
  border-color: var(--status-error);
}

.calc-result--danger .calc-result__header iconify-icon,
.calc-fc-results.calc-result--danger .calc-result__header iconify-icon {
  color: var(--status-error);
}

.calc-result--info,
.calc-fc-results.calc-result--info {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
}

.calc-result--info .calc-result__header iconify-icon,
.calc-fc-results.calc-result--info .calc-result__header iconify-icon {
  color: var(--md-sys-color-primary);
}

.calc-result__footer {
  padding-top: var(--space-s);
  margin-top: var(--space-m);
  font-size: var(--text-xs);
  font-style: italic;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  opacity: 0.7;
}

/* KPI Highlight */
.kpi--highlight {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.kpi--highlight b {
  color: var(--md-sys-color-on-primary-container);
}

.kpi--highlight span {
  color: var(--md-sys-color-on-primary-container);
  opacity: 0.8;
}

/* --- CALCULADORA FC --- */
.calc-fc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* KPIs (Big Numbers) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

.kpi {
  padding: var(--space-m);
  text-align: center;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.kpi b {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
  color: var(--md-sys-color-primary);
}

.kpi span {
  display: block;
  margin-top: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.kpi-sub {
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
}

.kpi-sub small {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
}

/* Tabela de Zonas */
.table-container {
  overflow-x: auto;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.zones-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--md-sys-color-surface);
}

.zones-table th {
  padding: var(--space-m);
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.zones-table td {
  padding: var(--space-m);
  font-size: var(--text-sm);
  vertical-align: middle;
  color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.zones-table tr:last-child td {
  border-bottom: none;
}

.zones-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-snappy);
}

.zones-table tbody tr:hover {
  background: var(--md-sys-color-surface-container-high);
}

/* Responsive Tables to Cards (Mobile) */

/* Zone Badges (Pílulas Coloridas) */
.zone-tag {
  display: inline-block;
  min-width: 100px;
  padding: var(--space-3xs) var(--space-s);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--brand-neutral-white);
  text-align: center;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--shadow-sm);
}

.z1 {
  background-color: var(--brand-neutral-400);
}

.z2 {
  background-color: var(--brand-primary-blue);
}

.z3 {
  background-color: var(--brand-success-green);
}

.z4 {
  background-color: var(--brand-warning-orange);
}

.z5 {
  background-color: var(--brand-error-red);
}

/* TABS (Substitui navegação) */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--space-m);
  padding: var(--space-3xs);
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-medium);
}

.tab {
  display: inline-flex;
  flex: 1 1;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-xs) var(--space-m);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-small);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.tab:hover {
  color: var(--md-sys-color-on-surface);
  background: rgb(0 0 0 / 5%);
}

.tab.active {
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface);
  box-shadow: var(--shadow-sm);
}

.dark-theme .tab:hover {
  background: rgb(255 255 255 / 5%);
}

/* --- STICKY CALCULATE BUTTON (Mobile) --- */

/* --- MOBILE FULLSCREEN OPTIMIZATIONS (Calculators) --- */

/* --- CALC NAV (Navegação entre calculadoras) --- */
.calc-nav {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  padding: var(--space-xs) 0;
  margin-bottom: var(--space-m);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.calc-nav::-webkit-scrollbar {
  display: none;
}

.calc-nav__item {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  padding: var(--space-xs) var(--space-m);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  cursor: pointer;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.calc-nav__item:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.calc-nav__item:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-surface);
}

.calc-nav__item--active {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--shadow-sm);
}

.calc-nav__item iconify-icon {
  font-size: var(--icon-size-md);
}

/* Mobile: calc-nav fica sticky logo abaixo do header */

/* --- RECALC BUTTON --- */
.recalc-btn {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-s) var(--space-m);
  margin: 0 auto var(--space-m);
  cursor: pointer;
  background: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.recalc-btn:hover {
  border-color: var(--md-sys-color-primary);
}

.recalc-btn:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.recalc-btn:active {
  transform: scale(0.98);
  background: var(--md-sys-color-surface-container-highest);
}

.recalc-btn iconify-icon {
  font-size: var(--icon-size-sm);
}
}
@layer components{

/* ===================================
   ANIMATION STATES - Loading, Error, Success, Empty
   ===================================

/**
 * P0 Priority: Complete missing animation states
 *
 * This file provides standardized animation states for all components:
 * - .is-loading - Skeleton loading state
 * - .is-error - Error state with shake animation
 * - .is-success - Success state with subtle pulse
 * .is-empty - Empty state with fade-in
 *
 * Usage:
 * <div class="card is-loading">...</div>
 * <div class="card is-error">...</div>
 * <div class="card is-success">...</div>
 * <div class="card is-empty">...</div>
 */

/* ==========================================================================
   LOADING STATE - Skeleton Animation
   ========================================================================== */

/* Cards - Loading State */
.card.is-loading,
.beneficio-item.is-loading,
.pricing-card.is-loading,
.sidebar-card.is-loading {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

/* Skeleton shimmer effect */
.card.is-loading::before,
.beneficio-item.is-loading::before,
.pricing-card.is-loading::before {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  content: '';
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 30%), transparent);
  animation: skeletonShimmer 2s infinite;
}

.card.is-loading *:not(.skeleton-keep),
.beneficio-item.is-loading *:not(.skeleton-keep),
.pricing-card.is-loading *:not(.skeleton-keep),
.sidebar-card.is-loading *:not(.skeleton-keep) {
  visibility: hidden;
}

/* Skeleton content placeholders */
.card.is-loading .skeleton-title,
.beneficio-item.is-loading .skeleton-title {
  display: block;
  visibility: visible;
  height: 1.5rem;
  margin-bottom: var(--space-s);
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-small);
  animation: skeletonPulse 2s ease-in-out infinite;
}

.card.is-loading .skeleton-text,
.beneficio-item.is-loading .skeleton-text {
  display: block;
  visibility: visible;
  height: 1rem;
  margin-bottom: var(--space-s);
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-small);
  animation: skeletonPulse 2s ease-in-out infinite 0.2s;
}

.card.is-loading .skeleton-text:last-child,
.beneficio-item.is-loading .skeleton-text:last-child {
  width: 60%;
}

/* Forms - Loading State */
.form.is-loading,
.form-input.is-loading,
.form-textarea.is-loading {
  position: relative;
}

.form.is-loading .form-submit,
.form.is-loading .contact__form-submit {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.form.is-loading .form-submit::after,
.form.is-loading .contact__form-submit::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  margin: calc(var(--icon-size-sm)/-2) 0 0 calc(var(--icon-size-sm)/-2);
  content: '';
  border: 2px solid var(--md-sys-color-on-primary);
  border-top-color: transparent;
  border-radius: var(--md-sys-shape-corner-full);
  animation: spin 1s var(--easing-linear) infinite;
}

/* Buttons - Loading State */
.btn.is-loading,
button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after,
button.is-loading::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  margin: calc(var(--icon-size-xs)/-2) 0 0 calc(var(--icon-size-xs)/-2);
  content: '';
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s var(--easing-linear) infinite;
}

/* Badges - Loading State */
.badge.is-loading {
  min-width: 40px;
  height: 20px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-full);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* ==========================================================================
   ERROR STATE - Shake Animation
   ========================================================================== */

/* Cards - Error State */
.card.is-error,
.beneficio-item.is-error,
.pricing-card.is-error {
  border-color: var(--md-sys-color-error);
  animation: shake var(--duration-smooth) var(--ease-snappy);
}

.card.is-error .card-base__title,
.card.is-error .card__title,
.beneficio-item.is-error .beneficio-item__title {
  color: var(--md-sys-color-error);
}

/* Forms - Error State */
.form.is-error,
.form-group.is-error,
.contact__form-field.is-error {
  animation: shake var(--duration-smooth) var(--ease-snappy);
}

.form.is-error .form-input,
.form.is-error .form-select,
.form.is-error .form-textarea,
.contact__form-field.is-error input,
.contact__form-field.is-error select,
.contact__form-field.is-error textarea {
  border-color: var(--md-sys-color-error);
  animation: inputShake var(--duration-smooth) var(--ease-snappy);
}

/* Inputs - Error State */
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  background-color: oklch(from var(--md-sys-color-error) l c h / 10%);
}

/* Buttons - Error State */
.btn.is-error,
button.is-error {
  color: var(--md-sys-color-on-error);
  background-color: var(--md-sys-color-error);
  animation: buttonError 0.3s var(--ease-out-back);
}

/* Badges - Error State */
.badge.is-error {
  color: var(--md-sys-color-on-error-container);
  background-color: var(--md-sys-color-error-container);
}

/* ==========================================================================
   SUCCESS STATE - Pulse Animation
   ========================================================================== */

/* Cards - Success State */
.card.is-success,
.beneficio-item.is-success {
  border-color: var(--md-sys-color-tertiary);
  animation: successPulse var(--duration-elegant) var(--ease-fluid);
}

.card.is-success .card-base__title,
.card.is-success .card__title,
.beneficio-item.is-success .beneficio-item__title {
  color: var(--md-sys-color-tertiary);
}

/* Forms - Success State */
.form.is-success {
  animation: successPulse var(--duration-elegant) var(--ease-fluid);
}

.form.is-success .form-submit,
.form.is-success .contact__form-submit {
  color: var(--md-sys-color-on-tertiary);
  background-color: var(--md-sys-color-tertiary);
  animation: successPulse var(--duration-elegant) var(--ease-fluid);
}

/* Buttons - Success State */
.btn.is-success,
button.is-success {
  color: var(--md-sys-color-on-tertiary);
  background-color: var(--md-sys-color-tertiary);
  animation: buttonSuccess var(--duration-smooth) var(--ease-fluid);
}

/* Checkmark animation for success state */
.btn.is-success::before,
button.is-success::before {
  margin-right: var(--space-s);
  content: '✓';
  animation: checkmarkPopAlt var(--duration-fast) var(--ease-snappy);
}

/* Badges - Success State */
.badge.is-success {
  color: var(--md-sys-color-on-tertiary-container);
  background-color: var(--md-sys-color-tertiary-container);
  animation: badgeSuccessPop var(--duration-smooth) var(--ease-fluid);
}

/* ==========================================================================
   EMPTY STATE - Fade In Animation
   ========================================================================== */

/* Cards - Empty State */
.card.is-empty,
.beneficio-item.is-empty,
.sidebar-card.is-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
  justify-content: center;
  min-height: 12.5rem;
  padding: var(--space-xl);
  text-align: center;
  border: 2px dashed var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-large);
  animation: emptyStateScaleIn 0.4s var(--ease-out-expo);
}

.card.is-empty::before,
.beneficio-item.is-empty::before,
.sidebar-card.is-empty::before {
  margin-bottom: var(--space-m);
  font-size: 2rem;
  content: '📭';
  opacity: 0.5;
}

.card.is-empty .empty-title,
.beneficio-item.is-empty .empty-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface);
}

.card.is-empty .empty-text,
.beneficio-item.is-empty .empty-text {
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
}

/* Lists - Empty State */
.card-list.is-empty,
.sidebar-lista.is-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: var(--space-l);
  border: 2px dashed var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  animation: emptyStateScaleIn 0.4s var(--ease-out-expo);
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

@keyframes skeletonShimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes skeletonPulse {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }
}

@keyframes inputShake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

/* successPulse — usa outline + scale em vez de box-shadow (compositing-friendly) */
@keyframes successPulse {
  0% {
    outline: 0px solid var(--md-sys-color-tertiary);
    outline-offset: 0px;
  }

  50% {
    outline: 3px solid var(--md-sys-color-tertiary);
    outline-offset: 4px;
  }

  100% {
    outline: 0px solid var(--md-sys-color-tertiary);
    outline-offset: 0px;
  }
}

@keyframes buttonSuccess {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes buttonError {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-2px);
  }

  75% {
    transform: translateX(2px);
  }
}

@keyframes emptyStateScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes checkmarkPopAlt {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes badgeSuccessPop {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */

/* ==========================================================================
   UTILITY CLASSES - Quick Apply States
   ========================================================================== */

/* Apply shake on form error */
.form-error-shake {
  animation: shake 0.5s var(--ease-out-back);
}

/* Apply success pulse on form success */
.form-success-pulse {
  animation: successPulse 0.6s var(--ease-out-back);
}

/* Loading spinner wrapper */

.loading-spinner::after {
  width: 100%;
  height: 100%;
  content: '';
  border: 2px solid var(--md-sys-color-primary);
  border-top-color: transparent;
  border-radius: var(--md-sys-shape-corner-full);
  animation: spin 1s var(--easing-linear) infinite;
}

/* =============================================================================
   INTEGRATION NOTES & USAGE EXAMPLES
   =============================================================================

/* IMPORT: This file is already imported in style.css after _dialogs.css */

/* HTML USAGE EXAMPLES

<!-- Loading State -->
<div class="card is-loading">
  <div class="skeleton-title"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text"></div>
</div>

<!-- Error State (auto-removes after shake) -->
<div class="card is-error">
  <div class="card__title">Validation Failed</div>
</div>

<!-- Success State with checkmark -->
<button class="btn is-success">Saved ✓</button>

<!-- Empty State -->
<div class="card is-empty">
  <div class="empty-title">No Results Found</div>
  <div class="empty-text">Try adjusting your filters</div>
</div>

/* JAVASCRIPT USAGE EXAMPLES

// ============ LOADING STATE ============
// Show skeleton loading
function showLoading(card) {
  card.classList.add('is-loading');
}

// Hide loading when content arrives
function hideLoading(card, content) {
  card.classList.remove('is-loading');
  card.innerHTML = content;
}

// ============ ERROR STATE ============
// Show error with auto-remove
function showError(element) {
  element.classList.add('is-error');
  // Remove after animation completes (500ms)
  setTimeout(() => element.classList.remove('is-error'), 500);
}

// Form validation error
function handleFormError(form) {
  form.classList.add('is-error');
  setTimeout(() => form.classList.remove('is-error'), 500);
}

// ============ SUCCESS STATE ============
// Show success feedback
function showSuccess(button) {
  button.classList.add('is-success');
  setTimeout(() => button.classList.remove('is-success'), 2000);
}

// Form success
function handleFormSuccess(form) {
  const submitBtn = form.querySelector('.form-submit');
  submitBtn.classList.add('is-success');
  setTimeout(() => submitBtn.classList.remove('is-success'), 2000);
}

// ============ EMPTY STATE ============
// Show empty state
function showEmptyState(container) {
  container.classList.add('is-empty');
  container.innerHTML = `
    <div class="empty-title">No Results</div>
    <div class="empty-text">Try adjusting your search criteria</div>
  `;
}

// Remove empty state
function removeEmptyState(container, content) {
  container.classList.remove('is-empty');
  container.innerHTML = content;
}

// ============ ASYNC DATA FETCHING ============
async function fetchData(card) {
  // 1. Show loading
  card.classList.add('is-loading');

  try {
    const response = await fetch('/api/data');
    const data = await response.json();

    // 2. Remove loading, show content
    card.classList.remove('is-loading');
    card.innerHTML = renderContent(data);

  } catch (error) {
    // 3. Show error state
    card.classList.remove('is-loading');
    card.classList.add('is-error');

    // Remove error after animation
    setTimeout(() => {
      card.classList.remove('is-error');
      showEmptyState(card);
    }, 500);
  }
}

// ============ FORM SUBMISSION ============
async function submitForm(form) {
  const submitBtn = form.querySelector('.form-submit');

  // 1. Show loading
  form.classList.add('is-loading');

  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: new FormData(form)
    });

    if (response.ok) {
      // 2. Show success
      form.classList.remove('is-loading');
      submitBtn.classList.add('is-success');
      setTimeout(() => submitBtn.classList.remove('is-success'), 2000);

    } else {
      // 3. Show error
      form.classList.remove('is-loading');
      form.classList.add('is-error');
      setTimeout(() => form.classList.remove('is-error'), 500);
    }

  } catch (error) {
    form.classList.remove('is-loading');
    form.classList.add('is-error');
    setTimeout(() => form.classList.remove('is-error'), 500);
  }
}

// ============ UTILITY CLASSES ============
// Apply shake animation to any element
function shakeElement(element) {
  element.classList.add('form-error-shake');
  element.addEventListener('animationend', () => {
    element.classList.remove('form-error-shake');
  }, { once: true });
}

// Apply success pulse
function pulseSuccess(element) {
  element.classList.add('form-success-pulse');
  element.addEventListener('animationend', () => {
    element.classList.remove('form-success-pulse');
  }, { once: true });
}
*/
}
/* ==========================================================================
   4. PAGES - Estilos Específicos de Página
   ========================================================================== */
@layer pages{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Hero Main Layout (.hero): Estratégia de hub, gradientes radiais e z-index fix.
  2. Hero Content Wrapper: Centralização e limites de largura.
  3. Header Row: Grid adaptável (Stacked em Mobile, Lado-a-lado em Desktop).
  4. Typography: Títulos com animações de entrada e subtítulos fluidos.
  5. Image Container: Sombras rich-lg, arredondamento e efeitos de hover.
  6. Buttons Row: Botões de ação (CTA) e Explicação com lógica de pulso.
  7. Hub de Serviços (Expansível):
     - Backdrop Blur: Overlay de foco.
     - Fullwidth Area: Container de expansão suave.
     - Explanation Hub: Painel detalhado com Grid de Serviços e Tabela Comparativa.
  8. MEDIA QUERIES:
     - Desktop (> 768px): Layout lado-a-lado e ajustes de alinhamento.
     - Mobile (<= 768px): Bottom Sheet Mode e overrides de layout.
*/

/* ===================================
   COMPONENTES - HERO SECTION MD3 (HUB STRATEGY)
   =================================== */

/* --- Layout Principal do Hero --- */
.hero {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100dvh;
  padding: var(--space-inset-screen);
  overflow: hidden;
  background: radial-gradient(ellipse at top left,
      rgb(var(--md-sys-color-primary-rgb), 0.05) 0%,
      transparent 50%);
  border-radius: 0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
  transition: var(--transition-colors);
}

/* Z-INDEX FIX: Lifts entire element above navbar when modal is open */
.hero.hero--modal-open {
  z-index: var(--z-modal-supreme);
}

/* FIX: Quando o hub expande em desktop, o .hero precisa de crescer
   naturalmente no flow do documento, empurrando o conteúdo abaixo.
   overflow: hidden na base CSS impede crescimento — revertemos para visible. */

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--max-width-content);
  margin: 0 auto;
  transition: var(--transition-colors);
}

.hero::before {
  position: absolute;
  right: calc(var(--space-2xl)*-1);
  bottom: calc(var(--space-2xl)*-1);
  z-index: var(--z-negative);
  width: 12.5rem;
  height: 12.5rem;
  pointer-events: none;
  content: '';
  background: radial-gradient(circle,
      rgb(var(--md-sys-color-tertiary-rgb), 0.1) 0%,
      transparent 70%);
  border-radius: var(--md-sys-shape-corner-full);
}

/* --- Estrutura do Cabeçalho (Unified: Mobile First) --- */
.hero__header-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);

  /* Base: Mobile (Stacked) */
  place-items: center center;
  width: 100%;
  max-width: var(--max-width-content);
  margin: 0 auto;
  text-align: center;
}

.hero__header-text {
  display: contents;
  flex-direction: column;
  gap: var(--space-s);
  align-items: center;

  /* Base: Mobile Center */
  text-align: center;
}

/* --- Título e Subtítulo --- */
.hero__title {
  order: 1;
  width: 100%;
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
  font-size: var(--font-size-display-small);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--md-sys-color-on-surface);
  text-align: center;
  letter-spacing: var(--letter-spacing-tight);

  /* text-wrap: balance definido em _variables-textwrap.css */

  /* Base Animation State */
  opacity: var(--opacity-hidden);
  transform: var(--translate-y-reveal-large) scale(0.98);
  transition:
    opacity var(--duration-elegant) var(--ease-ethereal),
    transform var(--duration-elegant) var(--ease-ethereal);
}

.hero__title.is-visible {
  opacity: var(--opacity-visible);
  transform: var(--transform-reset-scale);
}

.hero__title span {
  display: block;
}

.hero__title strong {
  display: inline-block;
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-primary);
  background: none;
  background-clip: border-box;
  -webkit-text-fill-color: initial;
}

.hero__subtitle {
  order: 3;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: var(--space-xs);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;

  /* Base Animation State */
  opacity: var(--opacity-visible);
}

/* Cada palavra como um bloco inline para animação independente */
.hero__subtitle span {
  display: inline-block;
  white-space: pre;
  opacity: var(--opacity-hidden);
  transform: translateY(0.625rem);

  /* Mantém os espaços entre palavras */
}

/* Delays escalonados para cada palavra (13 palavras × 0.12s = ~1.6s total) */
.hero__subtitle.is-visible span:nth-child(1) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: var(--delay-sm);
}

.hero__subtitle.is-visible span:nth-child(2) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 0.12s);
}

.hero__subtitle.is-visible span:nth-child(3) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 0.24s);
}

.hero__subtitle.is-visible span:nth-child(4) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 0.36s);
}

.hero__subtitle.is-visible span:nth-child(5) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 0.48s);
}

.hero__subtitle.is-visible span:nth-child(6) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 0.6s);
}

.hero__subtitle.is-visible span:nth-child(7) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 0.72s);
}

.hero__subtitle.is-visible span:nth-child(8) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 0.84s);
}

.hero__subtitle.is-visible span:nth-child(9) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 0.96s);
}

.hero__subtitle.is-visible span:nth-child(10) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 1.08s);
}

.hero__subtitle.is-visible span:nth-child(11) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 1.2s);
}

.hero__subtitle.is-visible span:nth-child(12) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 1.32s);
}

.hero__subtitle.is-visible span:nth-child(13) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 1.44s);
}

.hero__subtitle.is-visible span:nth-child(14) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 1.56s);
}

.hero__subtitle.is-visible span:nth-child(15) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 1.68s);
}

.hero__subtitle.is-visible span:nth-child(16) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 1.8s);
}

.hero__subtitle.is-visible span:nth-child(17) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 1.92s);
}

.hero__subtitle.is-visible span:nth-child(18) {
  animation: typewriter-word var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: calc(var(--delay-sm) + 2.04s);
}

/* Cursor piscando só na última palavra após todas aparecerem */
.hero__subtitle.is-visible span:last-child {
  border-right: 2px solid var(--md-sys-color-primary);
  animation:
    typewriter-word 0.4s var(--ease-out-quint) forwards,
    typewriter-cursor 1.1s step-end infinite;
  animation-delay: calc(var(--delay-sm) + 2.04s), calc(var(--delay-sm) + 2.44s);
}

/* Keyframes locais para o hero */
@keyframes typewriter-word {
  to {
    opacity: var(--opacity-visible);
    transform: translateY(0);
  }
}

/* --- Container de Imagem --- */
.hero__image-container {
  position: relative;
  order: 2;
  width: 100%;
  max-width: var(--max-width-hero-image-mobile, 17.5rem);
  height: auto;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-rich-lg);

  /* Reveal Animation - Scale Down 1.1→1.0 */
  opacity: var(--opacity-hidden);
  transform: translateY(1.875rem) scale(1.1);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-ethereal),
    box-shadow var(--duration-smooth) var(--ease-fluid);
  transition-delay: var(--delay-lg);
}

.hero__image-container.is-visible {
  opacity: var(--opacity-visible);
  transform: var(--transform-reset-scale);
}

.hero__image-container:hover {
  box-shadow:
    0 16px 40px oklch(from var(--md-sys-color-primary) l c h / 16%),
    0 6px 16px oklch(0% 0 0deg / 12%);
  transform: translateY(-6px) scale(1.015);
}

.hero__image {
  display: block;
  max-width: 100%;
  height: auto;
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.hero__image--changing {
  opacity: var(--opacity-hidden);
}

/* --- Botões --- */
.hero__buttons-row {
  display: flex;
  flex-flow: column wrap;

  /* Base: Mobile Stacked */
  gap: var(--space-m);
  align-items: center;
  justify-content: center;
  order: 4;
  width: 100%;
}

/* ESTADOS ESPECÍFICOS DO HERO (base já definida em _buttons.css) */

.hero__cta.is-visible,
.hero__explanation-btn.is-visible {
  opacity: var(--opacity-visible);
  transform: var(--transform-reset);
}

.hero__cta {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level1);
}

.hero__explanation-btn {
  color: var(--md-sys-color-primary);
  background-color: transparent;
  border: 1px solid var(--md-sys-color-outline);

  /* Estado inicial para animação - oculto com translateY */
  opacity: var(--opacity-hidden);
  transform: translateY(30px) translateZ(0);
  transition:
    opacity var(--duration-elegant) var(--ease-ethereal),
    transform var(--duration-elegant) var(--ease-ethereal);
}

/* Hover effects */
.hero__cta:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 90%, black);
  box-shadow:
    0 10px 28px oklch(from var(--md-sys-color-primary) l c h / 24%),
    0 4px 12px oklch(0% 0 0deg / 10%);
  transform: translateY(-3px) scale(1.025);
}

.hero__cta:active {
  box-shadow: 0 4px 12px oklch(from var(--md-sys-color-primary) l c h / 15%);
  transform: translateY(0) scale(0.98);
}

.hero__explanation-btn:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
  border-color: var(--md-sys-color-primary);
  transform: translateY(-1px);
}

.hero__explanation-btn:active {
  transform: translateY(0);
}

.hero__cta .iconify-icon,
.hero__explanation-btn .iconify-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  align-self: center;
  justify-content: center;
  font-size: calc(var(--text-base)*1.25);
  transform: none;
}

/* Alinhamento ótico: texto e ícone centrados verticalmente nos botões do hero */
.hero__cta,
.hero__explanation-btn {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.hero__cta > span,
.hero__explanation-btn > span {
  display: inline;
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

.hero__explanation-btn > span {
  white-space: normal;
}

/* Evita rotação/escala global do ícone em hover/active só no Hero */
.hero__cta:hover .iconify-icon,
.hero__explanation-btn:hover .iconify-icon,
.hero__cta:active .iconify-icon,
.hero__explanation-btn:active .iconify-icon {
  transform: none;
}

/* Pulse animation for CTA when visible */
.hero__cta.is-visible {
  animation: pulse-scale 2s ease-in-out infinite;
  animation-delay: var(--delay-md);
}

/* Estados do Botão de Explicação (JS) */
.hero__explanation-btn--transitioning {
  pointer-events: none;
  opacity: var(--opacity-hidden);
  transform: scale(0.95);
}

/* Desabilitar transição do ::before durante transição para evitar timing mismatch */
.hero__explanation-btn--transitioning::before {
  transition: none;
}

.hero__explanation-btn--new-text {
  animation: fadeIn 0.3s ease;
}

.hero__explanation-btn--expanded {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
  border-color: transparent;

  /* Garantir visibilidade - sobrescrever estado oculto do delay */
  opacity: var(--opacity-visible);
  transform: translateY(0);
}

/* ==========================================================================
   HUB DE SERVIÇOS (EXPANSIBLE AREA)
   ========================================================================== */

/* --- Bloco 1: Header do Hub --- */
.hero__hub-header {
  max-width: 50rem;
  margin: 0 auto;
  text-align: left;
}

.hero__hub-header h3,
.hero__hub-header h2 {
  margin-top: 0;
  margin-bottom: var(--space-m);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-primary);
  text-align: left;
}

.hero__hub-header p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface);
}

/* --- Bloco 2: Services Grid (Unified) --- */
.hero__services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-m);
  justify-content: center;
}

.hero__services-grid + .hero__hub-header {
  margin-top: var(--space-l);
}

.hero__service-card {
  display: grid;
  grid-template-rows: auto 0fr;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-m) var(--space-l);
  align-items: start;
  height: 100%;
  padding: var(--space-l);
  text-align: left;
  cursor: pointer;
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);

  /* Staggered Fade Up - inicial state */
  opacity: var(--opacity-hidden);
  transform: translateY(20px);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy);
}

/* Staggered delays para service cards quando hub abre */
.hero__expansible-fullwidth.visivel .hero__services-grid .hero__service-card:nth-child(1) {
  animation: serviceCardFadeIn var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: 0.1s;
}

.hero__expansible-fullwidth.visivel .hero__services-grid .hero__service-card:nth-child(2) {
  animation: serviceCardFadeIn var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: 0.2s;
}

.hero__expansible-fullwidth.visivel .hero__services-grid .hero__service-card:nth-child(3) {
  animation: serviceCardFadeIn var(--duration-smooth) var(--ease-fluid) forwards;
  animation-delay: 0.3s;
}

/* Keyframe para service cards */
@keyframes serviceCardFadeIn {
  to {
    opacity: var(--opacity-visible);
    transform: translateY(0);
  }
}

.hero__service-card:hover,
.hero__service-card.highlight-card {
  background-color: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-primary-container);
  box-shadow:
    0 8px 20px oklch(from var(--md-sys-color-primary) l c h / 12%),
    0 2px 8px oklch(0% 0 0deg / 8%);
  transform: translateY(-4px) scale(1.01);
}

/* Highlight style for the 'Diabetes' card or others */
.hero__service-card.highlight-card {
  background-color: color-mix(in srgb,
      var(--md-sys-color-primary-container) 10%,
      var(--md-sys-color-surface));
  border-color: var(--md-sys-color-primary);
}

.hero__service-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: start;
  font-size: var(--icon-size-xl);
  color: var(--md-sys-color-primary);
}

.hero__service-desc {
  grid-row: 2;
  grid-column: 2;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface-variant);
}

/* Desktop: título */
.hero__service-title {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-on-surface);
}

/* Estado expandido do card */
.hero__service-card[aria-expanded='true'] .hero__service-desc-wrapper {
  grid-template-rows: 1fr;
  max-height: 16rem;
  opacity: 1;
}

.hero__service-card[aria-expanded='false'] .hero__service-desc-wrapper {
  grid-template-rows: 0fr;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.hero__service-card[aria-expanded='true'] .hero__card-chevron {
  transform: rotate(180deg);
}

/* --- Bloco 3: Tabela Comparativa (Unified) --- */
.hero__comparison-table-wrapper {
  display: none;
  width: 100%;
  margin: 0;
  overflow-x: auto;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.hero__comparison-cards {
  display: grid;
  gap: var(--space-m);
}

.hero__comparison-card {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.hero__comparison-side {
  display: grid;
  gap: var(--space-2xs);
}

.hero__comparison-side--highlight {
  padding: var(--space-s);
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 38%, var(--md-sys-color-surface-container-low) 62%);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-outline-variant) 82%);
  border-radius: var(--md-sys-shape-corner-small);
}

.hero__comparison-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero__comparison-divider {
  height: 1px;
  background: var(--md-sys-color-outline-variant);
}

.hero__comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.hero__comparison-table th {
  padding: var(--space-l);
  font-size: var(--text-sm);
  vertical-align: middle;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--md-sys-color-surface-container-high);
  border-bottom: 2px solid var(--md-sys-color-outline-variant);
}

.hero__comparison-table th.highlight {
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary-container);
  border-bottom-color: var(--md-sys-color-primary);
}

.hero__comparison-table td {
  padding: var(--space-l);
  font-size: var(--text-sm);
  vertical-align: middle;
  text-align: center;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.hero__comparison-table tr:last-child td {
  border-bottom: none;
}

.comp-role,
.comp-highlight {
  display: block;
  margin-bottom: var(--space-s);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
}

.comp-highlight {
  color: var(--md-sys-color-primary);
}

.comp-desc {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface-variant);
}

.hero__summary-box {
  padding: var(--space-l) var(--space-xl);
  font-size: var(--text-base);
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-medium);
}

/* ==========================================================================
   MEDIA QUERIES (TABLET & DESKTOP >= 768px)
   ========================================================================== */

/* TODOS OS TABLETS ESPECÍFICOS - PORTRAIT (768px - 1024px) */

/* Pedido do Utilizador: Boneco entre o título e o subtítulo em Portrait */

/* Mobile-only base rules (extraídas de ≤768px) */
.hero__backdrop {
  display: none;
}

.hero__backdrop.visivel {
  display: block;
}

.hero__expansible-fullwidth {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-supreme);
  display: flex;
  visibility: hidden;
  flex-direction: column;
  height: 100dvh;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  background: var(--md-sys-color-surface);
  transform: translateY(100%);
  transition:
    transform var(--duration-smooth) var(--ease-ethereal),
    visibility var(--duration-smooth) var(--ease-ethereal);
}

.hero__expansible-fullwidth.visivel {
  visibility: visible;
  opacity: var(--opacity-visible);
  transform: translateY(0);
  transition:
    transform var(--duration-smooth) var(--ease-ethereal),
    visibility 0s step-start;
}

.sheet-controls {
  position: relative;
  z-index: var(--z-modal);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: max(var(--space-s), env(safe-area-inset-top)) var(--space-s) var(--space-s) var(--space-s);
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.hero__expansible-fullwidth .mobile-only {
  display: flex;
}

.hero__expansible-fullwidth .modal__drag-indicator {
  display: block;
  visibility: visible;
  background: var(--md-sys-color-outline);
  opacity: 0.8;
}

.sheet-handle {
  display: none;
}

.hero__explanation-hub {
  gap: var(--space-l);
  padding: var(--space-l) var(--space-l) max(var(--space-l), env(safe-area-inset-bottom));
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.hero__hub-header + .hero__comparison-cards {
  margin-top: var(--space-s);
}

.hero__comparison-cards.animate-on-scale,
.hero__comparison-cards.animate-on-scale.is-visible {
  transform: none;
}

.hero__comparison-cards + .medical-disclaimer {
  margin-top: var(--space-l);
}

.hero__explanation-hub .medical-disclaimer {
  align-items: flex-start;
  padding: var(--space-m);
}

.hero__explanation-hub .medical-disclaimer .disclaimer-icon {
  padding-left: 0;
  margin-top: 0.125em;
  opacity: 0.85;
}

.hero__explanation-hub .medical-disclaimer p {
  padding-left: 0;
  text-align: left;
}

.hero__service-card[aria-expanded='false'] {
  row-gap: 0;
}

.hero__service-card[aria-expanded='true'] {
  grid-template-rows: auto 1fr;
}

.hero__service-content {
  display: contents;
}

.hero__service-header {
  display: contents;
}

.hero__service-desc-wrapper {
  display: grid;
  grid-row: 2;
  grid-column: 2;
  grid-template-rows: 0fr; /* Colapsado por padrão em mobile */
  transition: grid-template-rows 0.3s var(--ease-out-quint);
}

.hero__card-chevron {
  display: block;
  grid-row: 1;
  grid-column: 3;
  align-self: center;
}

/* Utilities */
.mobile-only {
  display: none;
}

/* Height Fallback */

/* 🖥️ DESKTOP (>768px) - Overrides */

/* ===================================
   ACCESSIBILITY - CONTRAST FIXES (HIGH CONTRAST MODE ONLY)
   ===================================
   Estas correções só são aplicadas quando o modo de alto contraste
   está explicitamente ativo no body.
*/

/* Hero title - garantir contraste extremo */
body.high-contrast:not(.dark-theme) .hero__title {
  color: var(--a11y-text-dark);
}

/* Title strong (colored spans) - azul escuro para contraste */
body.high-contrast:not(.dark-theme) .hero__title strong {
  color: var(--a11y-primary-dark);
}

/* Subtitle - texto médio escuro */
body.high-contrast:not(.dark-theme) .hero__subtitle {
  color: var(--a11y-text-medium);
}

/* Subtitle spans - herdar cor com contraste */
body.high-contrast:not(.dark-theme) .hero__subtitle span {
  color: inherit;
}

/* Hub header - título principal */
body.high-contrast:not(.dark-theme) .hero__hub-header h3 {
  color: var(--a11y-text-dark);
}

/* Hub header - parágrafo */
body.high-contrast:not(.dark-theme) .hero__hub-header p {
  color: var(--a11y-text-medium);
}

/* Service card title */
body.high-contrast:not(.dark-theme) .hero__service-title {
  color: var(--a11y-text-dark);
}

/* Service card description */
body.high-contrast:not(.dark-theme) .hero__service-desc {
  color: var(--a11y-text-secondary);
}

/* Service icon */
body.high-contrast:not(.dark-theme) .hero__service-icon {
  color: var(--a11y-primary-dark);
}

/* Comparison table headers */
body.high-contrast:not(.dark-theme) .hero__comparison-table th {
  color: var(--a11y-text-medium);
}

/* Comparison table highlight header */
body.high-contrast:not(.dark-theme) .hero__comparison-table th.highlight {
  color: var(--brand-neutral-white);
  background-color: var(--a11y-primary-dark);
}

/* Comp highlight */
body.high-contrast:not(.dark-theme) .comp-highlight {
  color: var(--a11y-primary-dark);
}

/* Comp description */
body.high-contrast:not(.dark-theme) .comp-desc {
  color: var(--a11y-text-secondary);
}

/* Summary box - contraste garantido */
body.high-contrast:not(.dark-theme) .hero__summary-box {
  color: var(--a11y-text-dark);
  background-color: var(--a11y-primary-container-light);
  border: 1px solid var(--a11y-primary-dark);
}

/* CTA button - fundo azul escuro, texto branco */
body.high-contrast:not(.dark-theme) .hero__cta {
  color: var(--brand-neutral-white);
  background-color: var(--a11y-primary-dark);
  border-color: var(--a11y-primary-dark);
}

/* CTA hover */
body.high-contrast:not(.dark-theme) .hero__cta:hover {
  background-color: var(--a11y-primary-darker);
  box-shadow: 0 4px 12px oklch(from var(--a11y-primary-dark) l c h / 30%);
}

/* Explanation button - borda escura */
body.high-contrast:not(.dark-theme) .hero__explanation-btn {
  color: var(--a11y-primary-dark);
  border-color: var(--a11y-primary-dark);
}

/* Explanation button hover */
body.high-contrast:not(.dark-theme) .hero__explanation-btn:hover {
  color: var(--a11y-primary-darker);
  background-color: oklch(from var(--a11y-primary-dark) l c h / 8%);
  border-color: var(--a11y-primary-darker);
}

/* Service card - contraste melhorado */
body.high-contrast:not(.dark-theme) .hero__service-card {
  background-color: var(--brand-neutral-100);
  border-color: var(--brand-neutral-200);
}

body.high-contrast:not(.dark-theme) .hero__service-card:hover,
body.high-contrast:not(.dark-theme) .hero__service-card.highlight-card {
  background-color: var(--a11y-primary-container-light);
  border-color: var(--a11y-primary-dark);
}

/* Expanded state do explanation button */
body.high-contrast:not(.dark-theme) .hero__explanation-btn--expanded {
  color: var(--a11y-text-dark);
  background-color: var(--a11y-primary-container-light);
  border-color: var(--a11y-primary-dark);
}

/* Sheet close button (mobile) */
body.high-contrast:not(.dark-theme) .modal__close {
  color: var(--a11y-text-dark);
}

/* Sheet handle */
body.high-contrast:not(.dark-theme) .modal__drag-indicator {
  background-color: var(--a11y-text-medium);
}

/* ==========================================================================
   REDUCED MOTION - DESATIVAR ANIMAÇÕES DO HERO
   ========================================================================== */

.hero__service-desc-wrapper > * {
  overflow: hidden;
}
}
@layer pages{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. About Project Header: Títulos e introdução centrada.
  2. Differentiation Box: Container de destaque com grid responsiva.
  3. Layout Container: Estrutura de colunas (Nav + Display).
  4. Nav Sidebar: Lista de botões de navegação lateral.
  5. Mobile Accordion: Painéis expansíveis exclusivos para mobile.
  6. Desktop Display: Conteúdo dinâmico da coluna direita com efeitos de fundo.
  7. Badges & Benefits: Tags de categoria e lista de ícones de sucesso.
  8. About Me Toggle: Sistema de "Ler mais" para o perfil biográfico.
  9. MEDIA QUERIES (Organização Desktop vs Mobile).
*/

/* ==========================================================================
   ABOUT PROJECT - Hybrid Layout (Static HTML)
   ========================================================================== */

.about-project__header {
  margin-bottom: var(--space-l);
}

.about-project__title {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  margin-bottom: var(--space-m);
}

.about-project__intro {
  max-width: 100ch;
  margin: 0 auto var(--space-l) auto;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

/* Differentiation Box (Refactored) */
.differentiation-box {
  max-width: 1200px;
  margin-inline: auto;

  /* Centers the box - espaçamento reduzido */
  margin-bottom: var(--space-l);
}

/* Stagger Entrance for differentiation elements */

.differentiation-box.is-visible .differentiation-column:nth-child(1) {
  animation: entrance-card var(--duration-elegant) var(--ease-ethereal) 100ms backwards;
}

.differentiation-box.is-visible .differentiation-column:nth-child(2) {
  animation: entrance-card var(--duration-elegant) var(--ease-ethereal) 250ms backwards;
}

.differentiation-box.is-visible .differentiation-column:nth-child(3) {
  animation: entrance-card var(--duration-elegant) var(--ease-ethereal) 400ms backwards;
}

/* Reduced Motion Override */

/* .differentiation-box hover effect and title removed */

.differentiation-box__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
  align-items: stretch;
}

.differentiation-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-l);
  text-align: center;
  background: var(--md-sys-color-surface-container);
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);

  /* Fallback para quando o hover não está disponível */
  --subtitle-color: var(--md-sys-color-on-surface-variant);
}

/* Border color dinâmica baseada no título */
.differentiation-column:has(.differentiation-box__subtitle--primary) {
  --subtitle-color: var(--md-sys-color-primary);
}

.differentiation-column:has(.differentiation-box__subtitle--secondary) {
  --subtitle-color: var(--brand-warning-orange);
}

.differentiation-column:has(.differentiation-box__subtitle--tertiary) {
  --subtitle-color: var(--md-sys-color-tertiary);
}

/* Hover - mostra borda com cor do título */

/* Mobile - mostra sempre a borda com cor do título */

/* Subtitle Base & Modifiers */
.differentiation-box__subtitle,
.differentiation-box__subtitle-t1,
.differentiation-box__subtitle-t2 {
  display: flex;
  align-items: center;

  /* Centra o texto verticalmente */
  justify-content: center;

  /* Centra o texto horizontalmente */
  width: 100%;

  /* Reduzido min-height - antes era var(--space-2xl) */
  min-height: 0;

  /* Reduzido margin-bottom - antes era var(--space-s) */
  margin-bottom: var(--space-s);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.differentiation-box__subtitle--primary,
.differentiation-box__subtitle-t1 {
  /* Legacy support */
  color: var(--md-sys-color-primary);
}

.differentiation-box__subtitle--tertiary,
.differentiation-box__subtitle-t2 {
  /* Legacy support */
  color: var(--md-sys-color-tertiary);
}

.differentiation-box__subtitle--secondary {
  color: var(--brand-warning-orange);
}

.differentiation-box__text {
  max-width: 100%;
  margin: 0;
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

/* Override .body-base text-align para differentiation-box */
.differentiation-box .differentiation-box__text.body-base {
  text-align: center;
}

.differentiation-box__text strong {
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-primary);
}

/* Layout Container */
.about-project__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

/* Nav Sidebar */
.about-project__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  width: 100%;
}

.about-project__nav-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* Monitoring Info Box */
.about-monitoring-info {
  position: relative;
  padding: var(--space-m);
  margin-bottom: var(--space-s);
  overflow: hidden;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) 0%,
      color-mix(in srgb, var(--md-sys-color-tertiary) 5%, transparent) 100%);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
}

.about-monitoring-info::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: '';
  background: linear-gradient(90deg,
      var(--md-sys-color-primary) 0%,
      var(--md-sys-color-tertiary) 100%);
}

.about-monitoring-info__header {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  margin-bottom: var(--space-m);
}

.about-monitoring-info__icon {
  font-size: 1.5rem;
  color: var(--md-sys-color-primary);
  animation: pulse-heart 2s ease-in-out infinite;
}

@keyframes pulse-heart {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.about-monitoring-info__title {
  margin: 0;
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: var(--md-sys-typescale-title-large-weight);
  color: var(--md-sys-color-on-surface);
}

.about-monitoring-info__text {
  margin: 0 0 var(--space-m) 0;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  text-wrap: pretty;
}

.about-monitoring-info__note {
  font-size: 0.9em;
  opacity: 0.9;
}

.about-monitoring-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: 0;
  margin: 0;
  list-style: none;
}

.about-monitoring-info__list li {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface);
}

.about-monitoring-info__list iconify-icon {
  font-size: 1.125rem;
  color: var(--md-sys-color-primary);
}

.monitoring-list-text {
  font-size: 0.95em;
}

.monitoring-list-subtext {
  font-weight: 400;
  opacity: 0.7;
}

/* Button Item Wrapper */
.about-project-item {
  display: block;
}

.about-project-item--blue {
  --accent-color: var(--brand-primary-blue);
}

.about-project-item--orange {
  --accent-color: var(--brand-warning-orange);
}

.about-project-item--green {
  --accent-color: var(--brand-tertiary-green);
}

/* Nota: .about-project-btn regras base movidas para _buttons.css
   Aqui mantemos apenas overrides específicos da página
*/

/* ─────────────────────────────────────────────────────────────────
   PAGE-SPECIFIC OVERRIDES
   ───────────────────────────────────────────────────────────────── */

.about-project-btn__info {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

.about-project-btn__arrow {
  display: none;
  color: var(--md-sys-color-primary);
  opacity: 0;
  transform: translateX(calc(var(--space-s)*-1));
  transition:
    color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* Mobile Accordion Panel */
.about-project-panel {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  scroll-margin-top: 40vh;
  transition: grid-template-rows var(--duration-smooth) var(--ease-ethereal);

  /* Espaço para centrar no viewport */
}

.about-project-panel.is-open {
  grid-template-rows: 1fr;
  scroll-margin-bottom: 40vh;

  /* Espaço inferior para centragem */
}

.about-project-panel__inner {
  min-height: 0;
  margin-top: -1px;
  overflow: hidden;
  text-align: center;

  /* Bordes e fundo ocultos quando fechado — evita artefactos visuais com grid 0fr */
  background-color: transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-radius: 0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);

  /* Centra todos os elementos inline e inline-flex */
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity var(--duration-normal) var(--ease-fluid) 100ms,
    transform var(--duration-normal) var(--ease-fluid) 100ms,
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid);
}

/* Animação de entrada quando o painel está aberto */
.about-project-panel.is-open .about-project-panel__inner {
  background-color: var(--md-sys-color-surface);
  border-right-color: var(--accent-color);
  border-bottom-color: var(--accent-color);
  border-left-color: var(--accent-color);
  opacity: 1;
  transform: translateY(0);
  padding: var(--space-m);
}

.about-project-panel__inner p {
  max-width: 65ch;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  text-wrap: pretty;
}

/* Espaço inferior via pseudo-elemento */
.about-project-panel__inner::after {
  display: block;
  height: var(--space-l);
  content: '';
}

.about-project-panel__inner .about-project-badge {
  margin-top: var(--space-l);
  margin-bottom: var(--space-m);
}

.about-project-panel__inner .title {
  margin-bottom: var(--space-m);
  text-align: center;
}

.about-project-panel__inner .body-base {
  margin-bottom: var(--space-l);
  text-align: center;
}

/* Override para a biografia no painel Sobre Mim */
.description-about-me .body-base {
  max-width: none;
  text-align: left;
}

.about-project-panel__inner .card-list {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
  text-align: left;
}

.about-project-panel__inner .card-list li {
  display: flex;
  gap: var(--space-s);
  align-items: center;
}

/* Desktop Display (Right Column) */
.about-project-display.card {
  position: relative;
  display: none;
  flex: 1 1;
  flex-direction: column;
  padding: var(--space-xl);
  overflow: hidden;

  /* Overrides intencionais para fusão com o fundo */
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--shadow-sm);
}

.about-desktop-content {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-content);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    visibility 0s linear var(--duration-smooth);
}

/* text-wrap: balance para h2 já definido em _headings.css */

/* Desktop Content Title & Description (replaces mb-4, mb-8 utility classes) */
.about-desktop-content__title {
  margin-bottom: var(--space-l);
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  text-wrap: balance;
}

.about-desktop-content__desc {
  max-width: 65ch;
  margin-bottom: var(--space-xl);
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  text-wrap: pretty;
  max-width: none;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
}

.about-desktop-content.is-visible {
  opacity: 1;
  visibility: visible;
  z-index: var(--z-elevated);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    visibility 0s linear 0s;
}

/* @keyframes aboutFadeIn movido para css/01-base/_animations.css */

/* Background Effects */
.about-desktop-bg-effect {
  position: absolute;
  top: -20%;
  right: -20%;
  z-index: var(--z-negative);
  width: 60%;
  height: 60%;
  pointer-events: none;
  background-color: var(--accent-color, var(--md-sys-color-primary));
  border-radius: 50%;
  opacity: 0.15;
  filter: blur(var(--glass-blur-strong));
}

/* Badges */
.about-project-badge {
  display: inline-flex;
  justify-content: center;
  width: fit-content;
  max-width: max-content;
  padding: var(--space-s) var(--space-m);
  margin: 0 auto var(--space-m);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;

  /* Herança Semântica - Fundo transparente para fundir com o site */
  color: var(--accent-color, var(--md-sys-color-primary));
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  background-color: oklch(from var(--accent-color, var(--md-sys-color-primary)) l c h / 8%);
  border: 1.5px solid var(--accent-color, var(--md-sys-color-primary));
  border-radius: var(--md-sys-shape-corner-full);
}

/* Badge Color Variants - Desktop */

/* Match the colors from about-project-item modifiers for consistency */
.about-project-badge.badge-blue {
  --badge-color: var(--brand-primary-blue);

  color: var(--badge-color);
  background-color: oklch(from var(--badge-color) l c h / 8%);
  border-color: var(--badge-color);
}

.about-project-badge.badge-purple {
  --badge-color: var(--brand-warning-orange);

  color: var(--badge-color);
  background-color: oklch(from var(--badge-color) l c h / 8%);
  border-color: var(--badge-color);
}

.about-project-badge.badge-emerald {
  --badge-color: var(--brand-tertiary-green);

  color: var(--badge-color);
  background-color: oklch(from var(--badge-color) l c h / 8%);
  border-color: var(--badge-color);
}

/* Benefits Grid */
.about-project-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l);
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
}

.about-project-benefit {
  display: flex;

  /* Changed from center to allow multi-line text */
  gap: var(--space-m);
  align-items: flex-start;
  font-weight: 500;
  line-height: var(--line-height-snug);
  color: var(--md-sys-color-on-surface);
}

/* Override text-align: center do .card pai - texto à esquerda como o título */
.about-project-benefit>span {
  text-align: left;
}

.about-project-benefit iconify-icon {
  /* Optical alignment with text cap-height */
  flex-shrink: 0;
  margin-top: 2px;
  font-size: var(--text-lg);
  color: var(--brand-success-green);
}

/* Check icon for success states (replaces text-success utility) */
.about-project-icon-check {
  color: var(--brand-success-green);
}

/* Links */
.link-seta {
  display: none;
  gap: var(--space-s);

  /* Hidden by default on mobile (accordion) */
  align-items: center;
  margin-top: var(--space-l);
  font-weight: 700;
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

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

/* ==========================================================================
   ABOUT ME SECTION (Mobile Toggle)
   ========================================================================== */

/* Botão Toggle 'Ler mais/menos' - Estilo MD3 Tonal */
.about-toggle {
  position: relative;
  display: none;
  gap: var(--space-s);

  /* Escondido por defeito em desktop */
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--height-component-lg);
  padding: var(--space-m) var(--space-l);
  overflow: hidden;

  /* Typography */
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-secondary-container);
  text-transform: uppercase;
  letter-spacing: 0.5px;

  /* Interaction */
  cursor: pointer;

  /* MD3 Tonal Style */
  background-color: var(--md-sys-color-secondary-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);

  /* Touch target standard */
  box-shadow: var(--md-sys-elevation-level0);
  transition:
    background-color var(--duration-smooth) var(--ease-snappy),
    box-shadow var(--duration-smooth) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.about-toggle::before {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  content: '';
  background-color: currentcolor;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-snappy);
}

.about-toggle:hover {
  background-color: var(--md-sys-color-secondary-container);
  box-shadow: var(--md-sys-elevation-level1);
}

.about-toggle:hover::before {
  opacity: var(--state-hover-opacity, 0.08);
}

.about-toggle:active {
  box-shadow: var(--md-sys-elevation-level0);
  transform: scale(0.97);
}

.about-toggle__icon {
  position: relative;
  z-index: var(--z-elevated);
  font-size: var(--text-lg);
  transition: transform var(--duration-smooth) var(--ease-fluid);
}

.about-toggle__text-more,
.about-toggle__text-less {
  position: relative;
  z-index: var(--z-elevated);
}

/* Estados do texto do botão */
.about-toggle__text-less {
  display: none;
}

.about-toggle[aria-expanded='true'] {
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
}

.about-toggle[aria-expanded='true'] .about-toggle__text-more {
  display: none;
}

.about-toggle[aria-expanded='true'] .about-toggle__text-less {
  display: block;
}

.about-toggle[aria-expanded='true'] .about-toggle__icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   TEXT ANIMATION (About Me) - Mobile Only
   ========================================================================== */
.about-text {
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid);
  will-change: opacity, transform;
}

.about-text--transitioning {
  opacity: 0;
  transform: translateY(-8px);
}

.about-text strong {
  font-weight: var(--font-bold);
  color: var(--md-sys-color-primary);
}

/* ==========================================================================
   MEDIA QUERIES - DESKTOP (≥1024px)
   Consolidated for better organization and reduced duplication
   ========================================================================== */

/* ==========================================================================
   MEDIA QUERIES - MOBILE (≤1024px)
   Consolidated overrides for mobile layouts
   ========================================================================== */
}
@layer pages{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Experience Container: Grid principal, decorações radiais e sombras.
  2. Experience Columns: Lista lateral de modalidades.
  3. Modality Buttons: Estilo de botão tátil para as colunas de experiência.
  4. Experience Description: Painel de conteúdo detalhado.
  5. Modalidade Cards: Destaques horizontais com ícones coloridos.
  6. Examples & Lists: Listas estruturadas para exemplos práticos (Treino/Força).
  7. Contrast Cards: Cards de exemplo com cabeçalho e ícone integrado.
  8. CTA Box: Elemento interativo com animações de pulsação e slide.
  9. MEDIA QUERIES (Mobile Vertical Stack e ajustes de alinhamento).
*/

/* ===================================
   COMPONENTES - EXPERIENCE MD3
   =================================== */
.experience-container {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(280px, 350px) 1fr;
  gap: var(--space-l);
  align-items: stretch;
  max-width: var(--max-width-content);
  padding: var(--space-xl);
  margin: 0 auto;
  overflow: hidden;
  background: var(--md-sys-color-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--shadow-rich-lg);
}

.experience-container::before {
  position: absolute;
  top: -50%;
  right: -10%;
  z-index: var(--z-base);
  width: 60%;
  height: 200%;
  content: '';
  background: radial-gradient(ellipse at center,
      rgb(var(--md-sys-color-primary-rgb), 0.05) 0%,
      transparent 70%);
  border-radius: var(--md-sys-shape-corner-full);
}

.experience-columns {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: subgrid;
  flex-direction: column;
  gap: var(--space-xl);
  height: 100%;
}

/* ===================================
   STAGGER ANIMATIONS FOR EXPERIENCE COLUMNS
   =================================== */

/* Animação de entrada escalonada para botões de modalidade */
.experience-columns__content>.experience-column.is-visible:nth-child(1) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 0ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(2) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 50ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(3) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 100ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(4) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 150ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(5) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 200ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(6) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 250ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(7) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 300ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(8) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 350ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(9) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 400ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(10) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 450ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(11) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 500ms backwards;
}

.experience-columns__content>.experience-column.is-visible:nth-child(12) {
  animation: experienceColumnSlide var(--duration-smooth) var(--ease-fluid) 550ms backwards;
}

/* Reduced Motion - Sem stagger para experience columns */

.experience-columns__header {
  margin-bottom: var(--space-l);
  text-align: center;
}

.experience-columns__header h4,
.experience-description h4,
.experience-description strong,
.experience-examples-list strong,
.highlight-list__item strong {
  color: var(--md-sys-color-primary);
}

.experience-columns__header p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--md-sys-color-on-surface-variant);
}

/* Modality Buttons (Reset + Layout) */
button.experience-column {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 100%;
  max-width: var(--max-width-experience-card, 18.75rem);
  margin: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  appearance: none;
  cursor: pointer;

  /* Reset styles */
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);

  /* Layout styles */
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid);
}

/* Hover/focus styles maintained */
.experience-column:hover,
.experience-column:focus-visible {
  z-index: var(--z-elevated);
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  background-color: var(--state-hover-surface);
  box-shadow: var(--shadow-rich-md);
  transform: translateY(-6px) scale(1.03);
}

.experience-column:active {
  box-shadow: var(--md-sys-elevation-level1);
  transform: scale(0.98);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

/* Outline adjustment for mouse click but keep keyboard */
.experience-column:focus:not(:focus-visible) {
  outline: none;
}

.experience-column .icon-system {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  font-size: var(--text-2xl);
  line-height: 3.5rem;
  vertical-align: middle;
  color: var(--md-sys-color-primary);
  text-align: center;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid),
    color var(--duration-smooth) var(--ease-fluid),
    filter var(--duration-smooth) var(--ease-fluid);
}

.experience-column:hover .icon-system,
.experience-column:focus .icon-system {
  background-color: var(--md-sys-color-surface);
  filter: drop-shadow(0 8px 12px rgb(var(--md-sys-color-primary-rgb), 0.3));
  transform: scale(1.2) translateY(-8px);
}

.experience-column .title--level-3 {
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--md-sys-color-on-surface);
}

.experience-column p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
}

.experience-description {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: subgrid;
  flex-direction: column;
  gap: var(--space-l);
  height: 100%;
  padding: var(--space-l);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
}

.experience-description h4 {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

.experience-description>p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface);
}

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

/* ===================================
   EXPERIENCE - DESCRIPTIVE TEXTS
   =================================== */

/* Desktop description - project content */

/* Flipper description */
.exp-flipper__description {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface);
  text-align: left;
}

/* Specific ID for dynamic flipper description */
#dt-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  margin-top: var(--space-m);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Flipper mobile description */
.exp-flipper__mob-section-desc p {
  padding-bottom: var(--space-xl);
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  padding-bottom: var(--space-xl);
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
}

.modalidades-destaques {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.modalidade-card {
  display: flex;
  gap: var(--space-l);
  align-items: center;
  padding: var(--space-l);
  background: var(--md-sys-color-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

.modalidade-card:hover,
.modalidade-card:focus {
  outline: 1px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  background-color: var(--state-hover-primary);
  border-color: var(--md-sys-color-primary);
  transform: translateX(8px);
}

.modalidade-card:active {
  transform: scale(0.98);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.modalidade-icon {
  flex-shrink: 0;
  padding: var(--space-m);
  font-size: var(--text-xl);
  color: var(--md-sys-color-on-tertiary);
  background: var(--md-sys-color-tertiary);
  border-radius: var(--md-sys-shape-corner-full);
}

.modalidade-info h5 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface);
}

.modalidade-info span {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
}

/* Toggle Content Visibility */
.exp-desc-mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-m);
}

.exp-desc-desktop {
  display: block;
}

/* Examples List (Running/Strength) */
.experience-examples-list,
.highlight-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: 0;
  margin: 0;
  list-style: none;
}

.experience-examples-list li,
.highlight-list__item {
  display: flex;
  gap: var(--space-l);
  padding: var(--space-l);
  background-color: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.experience-examples-list li {
  align-items: center;

  /* ✅ Prevents horizontal overflow on mobile */
  min-width: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.experience-examples-list .exp-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 100%;
  font-size: var(--text-xl);
  line-height: 1;

  /* Animation: Pop In */
  animation: popIn var(--duration-elegant) var(--ease-ethereal) backwards;
}

/* Stagger delays for icons */
.experience-examples-list li:nth-child(1) .exp-icon {
  animation-delay: var(--duration-fast);
}

.experience-examples-list li:nth-child(2) .exp-icon {
  animation-delay: var(--duration-smooth);
}

.experience-examples-list .exp-icon img {
  max-width: 48px;
  max-height: 48px;
  vertical-align: middle;
}

.experience-examples-list div {
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface);
  hyphens: auto;

  /* ✅ Prevents long text overflow on mobile */
  overflow-wrap: break-word;

  /* Allows flex item to shrink */
}

.experience-examples-list strong {
  font-weight: var(--font-bold);
}

/* ==========================================================================
   DESKTOP REFINED: CONTRAST CARDS
   ========================================================================== */

.exp-comparacao-grid {
  display: grid;
  gap: var(--space-l);
  margin: var(--space-l) 0;
}

.exp-card-exemplo {
  display: flex;
  flex-direction: column;

  /* Change to column to stack content below header */
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    background-color var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

.exp-card-exemplo:hover {
  background-color: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-rich-md);
  transform: translateY(-4px);
}

.exp-card-exemplo:active {
  transform: scale(0.98);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

/* Header container for Icon + Title */
.exp-card-header {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

.exp-card-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;

  /* Slightly smaller */
  height: 48px;
}

.exp-card-icon img {
  width: 100%;
  height: auto;
}

.exp-card-content .text-highlight {
  display: block;
  margin: 0;
  font-size: var(--text-base);

  /* Remove bottom margin as it's now inline-ish */
  line-height: 1.2;
  color: var(--md-sys-color-primary);
}

.exp-card-exemplo p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  opacity: 0.9;

  /* Slightly smaller text for density */
}

/* CTA Box Refined */
.exp-cta-box {
  display: inline-flex;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-s) var(--space-xl);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container-high);
  border: 1px dashed var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--shadow-rich-sm);
}

.exp-cta-icon {
  font-size: var(--text-xl);
}

.exp-cta-icon.pulsate {
  animation: exp-pulse 2s infinite ease-in-out;
}

.exp-cta-arrow {
  font-size: var(--text-lg);
  animation: exp-slide-left 1.5s infinite ease-in-out;
}

/* @keyframes exp-pulse e exp-slide-left movidos para css/01-base/_animations.css */

.experience-note {
  padding-top: var(--space-l);
  margin-top: auto;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Optimized Bullet Points */
.highlight-list__item {
  align-items: center;

  /* ✅ Prevents horizontal overflow on mobile */
  min-width: 0;
  overflow: hidden;
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.highlight-list__item:hover {
  background-color: var(--state-hover-surface);
  transform: translateX(4px);
}

.highlight-list__item:active {
  background-color: var(--md-sys-color-surface-variant);
  transform: scale(0.99);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.highlight-list__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0;
  color: var(--md-sys-color-primary);
}

.highlight-list__item span {
  min-width: 0;
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface);
  hyphens: auto;

  /* ✅ Prevents long text overflow on mobile */
  overflow-wrap: break-word;

  /* Allows flex item to shrink */
}

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

/* ===================================
   STAGGER ANIMATIONS FOR HIGHLIGHT LIST
   =================================== */

/* Animação de entrada escalonada para highlight-list items */
.highlight-list>.highlight-list__item.is-visible:nth-child(1) {
  animation: highlightListItemFade var(--duration-smooth) var(--ease-fluid) 0ms backwards;
}

.highlight-list>.highlight-list__item.is-visible:nth-child(2) {
  animation: highlightListItemFade var(--duration-smooth) var(--ease-fluid) 60ms backwards;
}

.highlight-list>.highlight-list__item.is-visible:nth-child(3) {
  animation: highlightListItemFade var(--duration-smooth) var(--ease-fluid) 120ms backwards;
}

.highlight-list>.highlight-list__item.is-visible:nth-child(4) {
  animation: highlightListItemFade var(--duration-smooth) var(--ease-fluid) 180ms backwards;
}

.highlight-list>.highlight-list__item.is-visible:nth-child(5) {
  animation: highlightListItemFade var(--duration-smooth) var(--ease-fluid) 240ms backwards;
}

.highlight-list>.highlight-list__item.is-visible:nth-child(6) {
  animation: highlightListItemFade var(--duration-smooth) var(--ease-fluid) 300ms backwards;
}

/* Reduced Motion - Sem stagger para highlight-list */

/* ==========================================================================
   MEDIA QUERIES: TABLET/BASE MOBILE (≤1024px)
   ========================================================================== */

/* MOBILE & TABLET (<=1024px) - Stacked Layout */

/* TABLET SPECIFIC (768px - 1024px) */

/* ==========================================================================
   MEDIA QUERIES: MOBILE STANDARD (≤768px)
   ========================================================================== */
}
@layer pages{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Flip Scene Container: Configuração de perspectiva 3D.
  2. Flipper Object: Lógica de rotação rotateY(180deg).
  3. Front/Back Faces: Gerenciamento de visibilidade e posicionamento absoluto.
  4. Back Face Content: Header, Imagem (340px) e Descrição.
  5. Stats System: Grid de estatísticas com barras de progresso animadas.
  6. Mobile Modal: Overlay fullscreen alternativo para mobile com blur.
  7. Mobile Carousel: Trilho de navegação inferior com scroll-snap.
  8. Transitions: Animações direcionais (slide-in/out).
  9. Citations: Estilos para fontes científicas e referências.
*/

/* ===================================
   EXPERIENCE FLIPPER ENHANCEMENTS
   Adiciona funcionalidade 3D à estrutura original
   =================================== */

/* O Container "Cena" */
.experience-flip-scene {
  position: relative;
  height: 100%;
  perspective: 1200px;
}

/* O Objeto 3D que gira */
.experience-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--duration-elegant) var(--ease-ethereal);
}

/* Transição de conteúdo (quando já está virado) */
.dynamic-group {
  opacity: 1;
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.dynamic-group.switching {
  opacity: 0;
}

.experience-flipper.flipped {
  transform: rotateY(180deg);
}

/* As Faces do Cartão */
.experience-face {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.experience-face--front {
  position: relative;
  z-index: var(--z-elevated);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* Reset margins inside flex container to rely on gap */
.experience-face--front h4,
.experience-face--front p {
  margin-top: 0;
  margin-bottom: 0;
}

.experience-flipper .experience-face--back {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface);
  transform: rotateY(180deg);
}

/* --- ESTILOS INTERNOS DO VERSO (Detalhes) --- */
.exp-flipper__back-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-4xs);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.detail-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.exp-flipper__btn-pill {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-primary);
  cursor: pointer;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--md-sys-elevation-level1);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.exp-flipper__close-btn {
  /* Herda tudo de .exp-flipper__btn-pill */
}

.exp-flipper__image-container {
  flex-shrink: 0;
  width: 100%;
  height: 21.25rem;
  margin-bottom: var(--space-m);
  overflow: hidden;
  background-color: var(--md-sys-color-surface-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.exp-flipper__image-container img,
.exp-flipper__mob-section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- STATS (Reutilizando variáveis do projeto) --- */
.exp-flipper__stats-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-s);
  background: var(--md-sys-color-surface-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.exp-flipper__stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.exp-flipper__stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
}

.exp-flipper__progress-bar {
  width: 100%;
  height: 4px;
  overflow: hidden;
  background-color: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.exp-flipper__progress-fill {
  width: 100%;
  height: 100%;
  background-color: var(--md-sys-color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-elegant) var(--ease-fluid);
}

/* --- DESCRIÇÃO DESKTOP (Typography Fix) --- */

.exp-flipper__stats-note {
  max-width: 34rem;
  padding: 0;
  margin: var(--space-xs) auto 0;
  font-size: var(--text-xs);
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  opacity: 0.72;
}

/* --- MOBILE MODAL --- */
.exp-flipper__mobile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-max);
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--glass-overlay-bg);
  opacity: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: var(--transition-all-generic);
}

.exp-flipper__mobile-modal-overlay.open {
  opacity: 1;
}

.exp-flipper__modal-content-wrapper {
  position: relative;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--md-sys-color-surface);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: var(--transition-all-generic);
}

.exp-flipper__mobile-modal-overlay.open .exp-flipper__modal-content-wrapper {
  opacity: 1;
  transform: var(--transform-reset);
}

.exp-flipper__mob-section-image {
  position: relative;
  flex: 0 0 45%;
  width: 100%;
  overflow: hidden;
  background-color: var(--md-sys-color-surface-variant);

  /* Garante que a imagem não sai fora */
}

/* Forçar altura 100% para respeitar o flex container */
.exp-flipper__mob-section-image img {
  height: 100% !important;
  object-fit: cover;
}

/* Mobile: botao de voltar posicionado sobre a imagem */
.exp-flipper__flip-back-hint-mobile {
  position: absolute;
  right: var(--space-m);
  bottom: var(--space-m);

}

.exp-flipper__flip-back-hint-mobile:hover iconify-icon {
  transform: rotate(-180deg);
}

.exp-flipper__mob-section-title {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 60px;
  padding: 0 var(--space-m);
  background-color: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.exp-flipper__mob-section-title h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-xl);
  color: var(--md-sys-color-primary);
  white-space: nowrap;
}

.exp-flipper__mob-section-desc {
  flex: 1 1;
  padding: var(--space-m);
  overflow-y: auto;
  background-color: var(--md-sys-color-surface);
}

.exp-flipper__mob-section-desc .exp-flipper__stats-note {
  padding-bottom: var(--space-s);
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
}

.exp-flipper__mobile-carousel-container {
  z-index: var(--z-sticky);
  flex-shrink: 0;
  width: 100%;
  height: auto;
  padding: var(--space-s) 0 max(var(--space-s), env(safe-area-inset-bottom));
  background-color: var(--md-sys-color-surface-container);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.exp-flipper__carousel-track {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  height: 100%;
  padding: 8px calc(50% - 30px) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 50% 0 0;
  scroll-behavior: smooth;

  /* Compact breathing room + scrollbar space */
}

.exp-flipper__carousel-track::-webkit-scrollbar {
  display: none;
}

.exp-flipper__carousel-item {
  display: flex;
  flex: 0 0 60px;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-2xl);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  outline: none;
  scroll-snap-align: center;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy);
}

.exp-flipper__carousel-item:active {
  background-color: var(--md-sys-color-surface-container-high);
  transform: scale(0.95);
}

.exp-flipper__carousel-item.active {
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-primary);
  transform: scale(1.1);
}

/* --- MOBILE TABS TRANSITIONS --- */

/* --- CITATION STYLES --- */
.citation-source {
  padding-top: var(--space-m);
  margin-top: var(--space-xl);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  color: var(--md-sys-color-on-surface-variant);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  opacity: 0.8;
}

.experience-face--back .citation-source,
.exp-flipper__mob-section-desc .citation-source {
  max-width: 34rem;
  padding-top: var(--space-s);
  margin: var(--space-s) auto 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0.72;
}

.experience-face--back .citation-source small,
.exp-flipper__mob-section-desc .citation-source small {
  display: block;
}

.citation-source cite {
  font-style: italic;
  font-weight: var(--font-medium);
}

.citation-link {
  color: var(--md-sys-color-primary);
  word-break: break-all;
  text-decoration: none;
}

/* ==========================================================================
   TABLET OPTIMIZATIONS (768px - 1024px)
   ========================================================================== */

/* ==========================================================================
   DESKTOP OPTIMIZATIONS (> 1024px)
   Consolidated: Standardized for wide viewports
   ========================================================================== */

.citation-link:hover {
  text-decoration: underline;
}
}
@layer pages{

/* ==========================================================================
   PÁGINA - FACTOS DO EXERCÍCIO
   ========================================================================== */

.section--facts {
  padding-top: var(--space-xl);
}
}
/* Pricing CSS moved to pricing-modal.js for code splitting */
@layer pages{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Blog Card Base: Estilos fundamentais, elevação e transições.
  2. Conteúdo do Card: Títulos com link, resumos (excerpts) e fade out.
  3. Scrollbar Customizada: Estilo discreto para descrições longas.
  4. Metadados: Data, tempo de leitura e link "Ver mais".
  5. Blog Grid: Sistema de grelha responsiva com container-type.
  6. Variantes de Acento: Suporte a data-accent (MD3 colors).
  7. Animações de Entrada: Revelação progressiva com delays.
  8. MEDIA QUERIES:
     - Mobile Compact (480px).
     - Mobile Standard (768px): Alinhamento centrado.
     - Desktop Subgrid (1025px): Alinhamento perfeito de linhas.
*/

/* ===================================
   COMPONENTES - BLOG CARDS MD3
   ATUALIZADO: Breakpoints padronizados para 768px/1024px - Fase 2 CSS Optimization
   =================================== */
.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  height: 100%;

  /* Estilos estruturais herdados de _cards.css (.card-base) */
  padding: var(--space-l);
}

.blog-card:hover {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-rich-lg);

  /* Hover customizado para Blog (mais alto que o padrão) */
  transform: translateY(-6px);
}

.blog-card:active {
  box-shadow: var(--md-sys-elevation-level1);
  transform: scale(0.98);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.blog-card__content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 0;
}

.blog-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
}

.blog-card__badge {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-black);
  color: var(--md-sys-color-on-tertiary-container);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--md-sys-color-tertiary-container);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.blog-card__title {
  padding: var(--space-xs) 0;
  margin: 0 0 var(--space-s) 0;
}

.blog-card__title .blog-card__link {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--md-sys-color-primary);
  text-decoration: none;

  /* Font-family herdado */
  transition: color var(--duration-fast) var(--ease-snappy);
  -webkit-box-orient: vertical;
}

.blog-card__title .blog-card__link:hover,
.blog-card__read-more:hover {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  background-color: var(--state-hover-primary);
}

.blog-card__title .blog-card__link:hover {
  text-underline-offset: 4px;
  border-radius: var(--md-sys-shape-corner-small);
}

.blog-card__excerpt {
  position: relative;
  flex: 1 1;
  max-width: 100%;
  padding-right: 4px;
  margin: 0 0 var(--space-l) 0;
  overflow: hidden;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
}

.blog-card__excerpt-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* Empty State */
.blog-empty-state {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: var(--space-m);
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  background: var(--md-sys-color-surface-container-low);
  border: 2px dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
}

.blog-empty-state__icon {
  font-size: var(--text-6xl);
  color: var(--md-sys-color-primary);
  opacity: 0.8;
}

.blog-empty-state__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-surface);
}

.blog-empty-state__text {
  max-width: var(--max-width-blog-excerpt, 28.125rem);
  margin: 0;
  font-size: var(--text-base);
  color: var(--md-sys-color-on-surface-variant);
}

.blog-card__excerpt::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-content);
  height: var(--height-component-small);
  pointer-events: none;
  background: linear-gradient(to top,
      var(--md-sys-color-surface-container) 0%,
      var(--md-sys-color-surface-container) 20%,
      rgb(255 255 255 / 0%) 100%);
  opacity: var(--opacity-hidden);
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

/* ✅ Mostrar fade se NÃO estiver no topo E tiver conteúdo scroll */
.blog-card__excerpt:not(:hover)::after {
  opacity: var(--opacity-visible);
}

/* ✅ OPCIONAL: Esconder fade ao fazer hover (para ler melhor) */
.blog-card__excerpt:hover::after {
  opacity: var(--opacity-hidden);
  transition-duration: var(--duration-fast);
}

/* Scrollbar para Webkit (Chrome/Safari) */
.blog-card__excerpt::-webkit-scrollbar {
  width: 4px;
}

.blog-card__excerpt::-webkit-scrollbar-track {
  background: transparent;
}

.blog-card__excerpt::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.blog-card__excerpt::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-outline);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
}

.blog-card__date {
  font-family: 'Google Sans', sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface-variant);
}

.blog-card__read-more {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  min-width: 44px;

  /* WCAG 2.5.5: Touch target mínimo 44px */
  min-height: 44px;
  padding: var(--space-s) var(--space-m);
  font-family: 'Google Sans', sans-serif;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-primary);
  text-decoration: none;
  border-radius: var(--md-sys-shape-corner-small);
  transition:
    color var(--duration-fast) var(--ease-snappy),
    background-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.blog-card__read-more:hover {
  transform: translateX(4px);
}

/* Grid do Blog */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  align-items: stretch;
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
}

/* Estados de Acento para Blog Cards */
.blog-card[data-accent='primary'],
.blog-card[data-accent='primary-container'] {
  color: var(--md-sys-color-on-primary-container);
}

.blog-card[data-accent='secondary'] {
  color: var(--md-sys-color-on-secondary-container);
}

.blog-card[data-accent='tertiary'] {
  color: var(--md-sys-color-on-tertiary-container);
}

/* Teaser Badge */
.tools-teaser-badge {
  position: absolute;
  top: var(--space-m);
  right: var(--space-m);
  z-index: var(--z-content);
  color: var(--md-sys-color-on-tertiary);
  background: var(--md-sys-color-tertiary);
  box-shadow: var(--md-sys-elevation-level1);
}

/* Blog Filters */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
  margin-bottom: var(--space-l);
}

/* Transição para Ferramentas */
.blog-tools-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--space-l) 0 0 0;
}

.blog-tools-transition__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
  max-width: var(--max-width-modal-pricing, 56.25rem);
}

.blog-tools-transition__text {
  max-width: 60ch;
  margin: 0 auto;
  font-size: var(--text-sm);
  font-style: italic;
  line-height: var(--line-height-tight);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  opacity: 0.8;
}

.blog-tools-transition .tools-teaser-card {
  margin-top: var(--space-xs);
  cursor: pointer;
  transition:
    transform var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

.blog-tools-transition .tools-teaser-card:hover {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-rich-lg);
  transform: translateY(-4px);
}

.tools-teaser-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top right,
      var(--md-sys-color-primary-container) 0%,
      transparent 60%);
  opacity: 0.15;
  transition: opacity var(--duration-smooth) var(--ease-fluid);
}

.blog-tools-transition .tools-teaser-card:hover .tools-teaser-overlay {
  opacity: 0.4;
}

.tools-teaser-content {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
  text-align: center;
}

.tools-teaser-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-component-lg, 48px);
  height: var(--size-component-lg, 48px);
  font-size: var(--text-2xl);
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
}

.tools-teaser-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  color: var(--md-sys-color-on-surface);
}

.tools-teaser-desc {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
}

.tools-teaser-btn {
  justify-content: center;
  width: 100%;
  margin-top: var(--space-s);
}

/* Teaser Mobile to Desktop Transition */

.filter-chip {
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.filter-chip:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
}

.filter-chip.active {
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container-low);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level1);
}

/* Animações de Entrada para Blog Cards */
.blog-card.reveal-on-scroll {
  opacity: var(--opacity-hidden);
  transform: translateY(30px) scale(0.98);
  transition:
    opacity var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-ethereal);
}

.blog-card.reveal-on-scroll.is-visible {
  opacity: var(--opacity-visible);
  transform: var(--transform-reset);
}

/* Delays Específicos para Blog Cards */

/* NOTA: As classes .delay-* para .blog-card.reveal-on-scroll foram movidas para _scroll-animations.css como parte da consolidação
   Mantendo este comentário para referência histórica */

/* Efeitos de Foco para Acessibilidade */
.blog-card__link:focus-visible,
.blog-card__read-more:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.blog-card__link:focus-visible {
  border-radius: var(--md-sys-shape-corner-small);
}

/* Dark Theme para Blog Cards */
html.dark-theme .blog-card {
  background: var(--md-sys-color-surface-variant);
}

html.dark-theme .blog-card__title .blog-card__link {
  color: var(--md-sys-color-primary);
}

html.dark-theme .blog-card__excerpt,
html.dark-theme .blog-card__meta {
  color: var(--md-sys-color-on-surface-variant);
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* MOBILE COMPACT (480px) */

/* MOBILE STANDARD (768px) */

/* DESKTOP (≥1025px) - Standard Flex Layout para garantir Visibilidade do Excerpt */
}
@layer pages{

/* MAPA DO ARQUIVO (INDEX) */

/*
 ESTRUTURA DO ARQUIVO:
  1. Gender Theme: Tema baseado em género (Female/Rose).
  2. Theme Toggle Fixed: Botão fixo de troca de tema.
  3. Layout Geral: Hero image, container e steps.
  4. Passo 2: Grade de planos seleccionáveis.
  5. Passo 3: Opções de agendamento e pagamento.
  6. Calendar: Calendário customizado com strip de datas.
  7. Time Grid: Grelha de horários com codificação de cores.
  8. Focus Mode: Modo foco com animações.
  9. Summary: Resumo da seleção com cards.
  10. Iframe: Container de formulário com skeleton loading.
  11. MEDIA QUERIES: Ajustes mobile.
*/

/* ===================================
   PAGINA: SEGUNDO PASSO / FLUXO DE ATENDIMENTO (V2 - 5 PASSOS)
   =================================== */

/* Gender-based Theme: Female (Pink/Rose) */
body.gender-female {
  --md-sys-color-primary: var(--brand-pink-rose);
  --md-sys-color-primary-container: var(--brand-pink-rose-container);
  --md-sys-color-on-primary-container: var(--brand-pink-rose-on-container);
}

.theme-toggle-fixed {
  position: fixed;
  top: var(--space-m);
  right: var(--space-m);
  z-index: var(--z-sticky);
  background: var(--md-sys-color-surface-container);
  border: var(--border-width) solid var(--md-sys-color-outline);
  box-shadow: var(--shadow-md);
}

.theme-toggle-fixed:hover {
  background: var(--md-sys-color-surface-variant);
  transform: scale(1.05);
}

/* Layout Gerais */
.step-hero-image {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto var(--space-m);
  border-radius: var(--md-sys-shape-corner-medium);
}

.fluxo-container {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--max-width-content);
  margin: 0 auto;
  overflow: hidden;
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-lg);
  animation: var(--transition-default) fluxo-entrada;
}

.fluxo-step {
  padding: var(--space-xl) var(--space-l);
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  min-height: 600px;
  padding: var(--space-xl);
  opacity: 1;
}

.fluxo-step__header {
  margin-bottom: var(--space-l);
  text-align: center;
  display: flex;
  gap: var(--space-l);
  align-items: center;
  padding-bottom: var(--space-xl);
  margin: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.fluxo-step__header--no-border {
  padding-bottom: var(--space-m);
  border-bottom: none;
}

.fluxo-highlight {
  padding: var(--space-l);
  margin: var(--space-m) 0;
  background: var(--md-sys-color-surface-container-low);
  border-left: var(--border-width-thick) solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-small);
  margin: 0;
  border-left: 4px solid var(--md-sys-color-primary);
}

.location-check-box {
  border-color: var(--md-sys-color-tertiary);
}

.btn--tertiary {
  color: var(--md-sys-color-on-tertiary);
  background: var(--md-sys-color-tertiary);
}

.quest-general-box {
  margin-top: 2rem;
}

.quest-success-icon {
  margin-bottom: 1rem;
  font-size: 3rem;
  color: var(--md-sys-color-primary);
}

/* PASSO 2: Grade de Planos */
.fluxo-plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.fluxo-plan {
  display: flex;
  gap: var(--space-l);
  align-items: center;
  padding: var(--space-l);
  cursor: pointer;
  background: var(--md-sys-color-surface-container);
  border: var(--outline-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    background-color var(--duration-smooth) var(--ease-snappy),
    border-color var(--duration-smooth) var(--ease-snappy),
    transform var(--duration-smooth) var(--ease-snappy),
    box-shadow var(--duration-smooth) var(--ease-snappy);
  z-index: var(--z-elevated);
  display: flex;
  gap: var(--space-l);
  align-items: center;
  margin-bottom: var(--space-l);
  cursor: pointer;
  border: 2px solid var(--md-sys-color-outline-variant);
  transition:
    background-color var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    border-color var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    transform var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    box-shadow var(--transition-fast) var(--md-sys-motion-easing-emphasized);
}

.fluxo-plan:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
  transform: translateY(calc(var(--space-4xs)*-1));
  border-color: var(--md-sys-color-primary);
  transform: translateY(var(--translate-y-micro));
}

.fluxo-plan.active {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-md);
  background: var(--state-pressed-primary);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-primary, var(--shadow-lg));
}

.plan-info strong {
  display: block;
  font-size: var(--text-base);
  color: var(--md-sys-color-on-surface);
}

.plan-info p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
}

.plan-price {
  margin-left: auto;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-primary);
  text-align: right;
}

.plan-price small {
  font-size: var(--text-xs);
  opacity: 0.7;
}

/* PASSO 3: Opções de Agendamento */
.mode-options,
.payment-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-3xl) + var(--space-m)), 1fr));
  gap: var(--space-m);
  margin: var(--space-l) 0;
}

.mode-option input,
.payment-option input {
  display: none;
}

.mode-card,
.payment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: var(--space-l);
  text-align: center;
  cursor: pointer;
  background: var(--md-sys-color-surface-container);
  border: var(--outline-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    background-color var(--duration-smooth) var(--ease-snappy),
    border-color var(--duration-smooth) var(--ease-snappy),
    transform var(--duration-smooth) var(--ease-snappy),
    box-shadow var(--duration-smooth) var(--ease-snappy);
}

.mode-card iconify-icon,
.payment-card iconify-icon {
  margin-bottom: var(--space-m);
  font-size: var(--text-3xl);
  color: var(--md-sys-color-primary);
}

.mode-card strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.mode-card span {
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
}

.mode-option input:checked + .mode-card,
.payment-option input:checked + .payment-card {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

/* Calendário Customizado */
.calendar-container {
  margin-top: var(--space-l);
  overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
  border: var(--border-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
}

.calendar-header {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-m);
  font-weight: var(--font-medium);
  background: var(--md-sys-color-surface-container-high);
  border-bottom: var(--border-width) solid var(--md-sys-color-outline-variant);
}

.calendar-legend {
  display: flex;
  gap: var(--space-m);
  padding: var(--space-sm) var(--space-m);
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-low);
  border-bottom: var(--border-width) solid var(--md-sys-color-outline-variant);
}

.legend-item {
  display: flex;
  gap: var(--space-4xs);
  align-items: center;
}

.legend-dot {
  width: var(--space-4xs);
  height: var(--space-4xs);
  border: var(--border-width) solid var(--md-sys-color-outline);
  border-radius: 50%;
}

.legend-dot.available--online {
  background: var(--pricing-online);
}

.legend-dot.available--presencial {
  background: var(--md-sys-color-primary);
}

/* Modo Foco */
body.focus-mode .fluxo-indicators,
body.focus-mode .fluxo-progress {
  pointer-events: none;
  opacity: 0.2;
  filter: grayscale(1);
  transition:
    opacity var(--duration-elegant) var(--ease-snappy),
    filter var(--duration-elegant) var(--ease-snappy),
    transform var(--duration-elegant) var(--ease-snappy);
}

body.focus-mode #quest-container {
  box-shadow: var(--shadow-xl);
  transform: scale(1.02);
  transition:
    box-shadow var(--duration-elegant) var(--ease-fluid),
    transform var(--duration-elegant) var(--ease-fluid);
}

/* Date Strip */
.calendar-dates {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.calendar-date-item {
  display: flex;
  flex: 0 0 var(--space-3xl);
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm);
  cursor: pointer;
  scroll-snap-align: start;
  border: var(--border-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

.calendar-date-item:hover {
  background: var(--md-sys-color-surface-container);
}

.calendar-date-item.active {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.date-day {
  font-size: var(--text-xs);
  text-transform: uppercase;
  opacity: 0.8;
}

.date-num {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

/* Time Grid */
.calendar-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--space-3xl), 1fr));
  gap: var(--space-sm);
  min-height: calc(var(--space-3xl)*5);
  padding: var(--space-m);
  background: var(--md-sys-color-surface);
  border-top: var(--border-width) solid var(--md-sys-color-outline-variant);
}

.time-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border: var(--outline-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy);
}

/* Color Coding based on Plan (using brand tokens) */
.time-slot.available--vivagym {
  color: var(--pricing-vivagym);
  border-color: var(--pricing-vivagym);
}

.time-slot.available--online {
  color: var(--pricing-online);
  border-color: var(--pricing-online);
}

.time-slot.available--domicilio {
  color: var(--pricing-domicilio);
  border-color: var(--pricing-domicilio);
}

.time-slot.available--gcp {
  color: var(--pricing-gcp);
  border-color: var(--pricing-gcp);
}

.time-slot:hover {
  filter: brightness(0.9);
  transform: scale(1.05);
}

.time-slot.selected {
  color: var(--md-sys-color-on-primary) !important;
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary) !important;
}

.scheduling-hint {
  display: flex;
  visibility: hidden;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-m);
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
  opacity: 0;
  transform: translateY(var(--space-m));
  transition:
    visibility var(--duration-smooth) var(--ease-snappy),
    opacity var(--duration-smooth) var(--ease-snappy),
    transform var(--duration-smooth) var(--ease-snappy);
}

.scheduling-hint.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.calendar-loading-msg {
  grid-column: 1 / -1;
  padding: var(--space-xl);
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.payment-card strong {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface);
}

.payment-card span {
  font-size: var(--text-xs);
  line-height: var(--line-height-snug);
  color: var(--md-sys-color-on-surface-variant);
}

/* Resumo Aprimorado */
.summary-header {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-m);
  color: var(--md-sys-color-primary);
}

.summary-header iconify-icon {
  font-size: var(--text-2xl);
}

.summary-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
}

.summary-card {
  padding: var(--space-l);
  margin: var(--space-xl) 0;
  background: var(--md-sys-color-surface-container-high);
  border: var(--border-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-sm);
}

.summary-list {
  padding: 0;
  margin: var(--space-m) 0 0;
  list-style: none;
}

.summary-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  border-bottom: var(--border-width) solid var(--md-sys-color-surface-container-highest);
}

.summary-list li:last-child {
  border-bottom: none;
}

.summary-list li strong {
  font-weight: var(--font-medium);
  color: var(--md-sys-color-on-surface-variant);
}

.summary-list li span {
  font-weight: var(--font-bold);
  color: var(--md-sys-color-primary);
  text-align: right;
}

/* Skeleton Loading Iframe */
.fluxo-form__iframe-container {
  position: relative;
  min-height: calc(var(--space-3xl)*16);
  background: var(--md-sys-color-surface-container-low);
  border: var(--border-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.iframe-overlay-top,
.iframe-overlay-bottom {
  position: absolute;
  right: 0;
  left: 0;
  z-index: var(--z-elevated);
  height: var(--space-m);
  pointer-events: none;
}

.iframe-overlay-top {
  top: 0;
  background: linear-gradient(to bottom, var(--md-sys-color-surface-container-low), transparent);
}

.iframe-overlay-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--md-sys-color-surface-container-low), transparent);
}

.fluxo-form__iframe-container.is-loading::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: linear-gradient(
    90deg,
    transparent,
    var(--md-sys-color-surface-container-high),
    transparent
  );
  animation: skeleton-wave var(--duration-elegant) infinite;
}

@keyframes skeleton-wave {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.fluxo-form__iframe {
  width: 100%;
  height: calc(var(--space-3xl)*20);
  border: none;
  opacity: 0;
  transition: opacity var(--duration-smooth) var(--ease-snappy);
}

.fluxo-form__iframe.is-loaded {
  opacity: 1;
}

/* Mobile Adjustments */
}
@layer pages{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Page Wrapper: Layout de página inteira (flex center).
  2. Fluxo Container: Sistema de multi-etapas com sombras e animações.
  3. Progress Bar: Barra fixa no topo com gradiente e shine.
  4. Step Indicators: Paginação por pontos (dots) com anel de pulso ativo.
  5. Steps Container: Trilho flexível para transições de etapa.
  6. Individual Step: Estrutura semântica (Header, Content, Text).
  7. Highlight Sections: Blocos de destaque e planos obrigatórios.
  8. Features List: Grid de ícones e descrições.
  9. Plan Selection: Sistema de seleção de planos com checkbox customizado.
  10. Total Display: Visualização de valores com gradiente de fundo.
  11. Navigation System: Botões de navegação (Voltar/Próximo) e seções split.
  12. Toast Notifications: Mensagens flutuantes integradas ao fluxo.
  13. MEDIA QUERIES: Ajustes de padding e escala para Mobile/Tablet.
*/

/* ===========================================
   PAGE FLUXO WRAPPER - LAYOUT DA PÁGINA
   =========================================== */

.page-fluxo-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  padding: var(--space-xl) var(--space-l);
  background: var(--md-sys-color-surface);
}

/* ===========================================
   FLUXO CONTAINER - MULTI-STEP FLOW SYSTEM
   =========================================== */

/* Layout principal do fluxo */

/* ===========================================
   PROGRESS BAR SYSTEM
   =========================================== */

.fluxo-progress {
  position: relative;
  height: 4px;
  overflow: hidden;
  background: var(--md-sys-color-surface-variant);
}

.fluxo-progress__bar {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      var(--md-sys-color-primary) 0%,
      var(--md-sys-color-tertiary) 100%);
  transform: scaleX(0.33333);
  transform-origin: left;
  transition: transform var(--transition-slow) var(--md-sys-motion-easing-emphasized-decelerate);
}

.fluxo-progress__bar::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(90deg,
      transparent 0%,
      oklch(from var(--brand-neutral-white) l c h / 30%) 50%,
      transparent 100%);
  animation: progress-shine 2s var(--md-sys-motion-easing-linear) infinite;
}

/* ===========================================
   STEP INDICATORS DOTS
   =========================================== */

.fluxo-indicators {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-l) var(--space-xl);
  background: var(--md-sys-color-surface-container);
}

.fluxo-indicators__dot {
  position: relative;
  width: clamp(8px, 0.75rem, 12px);
  height: clamp(8px, 0.75rem, 12px);
  background: var(--md-sys-color-surface-variant);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  transition:
    background-color var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    border-color var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    transform var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    box-shadow var(--transition-fast) var(--md-sys-motion-easing-emphasized);
}

.fluxo-indicators__dot.active {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 4px oklch(from var(--md-sys-color-primary) l c h / 10%);
  transform: scale(1.2);
}

.fluxo-indicators__dot.active::before {
  position: absolute;
  inset: -8px;
  content: '';
  background: oklch(from var(--md-sys-color-primary) l c h / 5%);
  border-radius: var(--md-sys-shape-corner-full);
  animation: pulse-active 2s var(--md-sys-motion-easing-emphasized) infinite;
}

/* ===========================================
   STEPS CONTAINER
   =========================================== */

.fluxo-steps {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-slow) var(--md-sys-motion-easing-emphasized-decelerate);
}

/* ===========================================
   INDIVIDUAL STEP
   =========================================== */

/* ===========================================
   STEP HEADER
   =========================================== */

.fluxo-step__number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 4rem, 64px);
  height: clamp(48px, 4rem, 64px);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: var(--shadow-md);
}

.fluxo-step__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--md-sys-color-on-surface);
}

/* ===========================================
   STEP CONTENT
   =========================================== */

.fluxo-step__content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: var(--space-l);
  justify-content: flex-start;
  max-width: 100%;
}

.fluxo-step__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface);
}

.fluxo-step__text--intro {
  font-size: var(--text-lg);
  color: var(--md-sys-color-on-surface-variant);
}

.fluxo-step__text strong {
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-primary);
}

/* ===========================================
   HIGHLIGHT SECTIONS
   =========================================== */

.fluxo-highlight,
.fluxo-plan {
  position: relative;
  padding: var(--space-xl);
  overflow: hidden;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
}

.fluxo-highlight::before,
.fluxo-plan::before {
  position: absolute;
  inset: 0;
  content: '';
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
}

.fluxo-highlight::before {
  background: oklch(from var(--md-sys-color-primary) l c h / 3%);
}

.fluxo-highlight:hover::before,
.fluxo-plan:hover::before {
  opacity: 1;
}

.fluxo-highlight--whatsapp {
  background: var(--status-success-bg);
  border-left-color: var(--brand-whatsapp);
}

.fluxo-highlight--whatsapp::before {
  background: var(--state-hover-success);
}

/* ===========================================
   FEATURES LIST
   =========================================== */

.fluxo-features {
  display: grid;
  gap: var(--space-l);
  margin: var(--space-l) 0;
}

.fluxo-feature {
  display: flex;
  gap: var(--space-l);
  align-items: flex-start;
  padding: var(--space-xl);
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    border-color var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    transform var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    box-shadow var(--transition-fast) var(--md-sys-motion-easing-emphasized);
}

.fluxo-feature:hover {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-primary);
  transform: translateY(var(--translate-y-micro));
}

.fluxo-feature__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: var(--text-2xl);
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-medium);
}

.fluxo-feature strong {
  display: block;
  margin-bottom: var(--space-s);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface);
}

.fluxo-feature__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
}

/* ===========================================
   PLAN SELECTION SYSTEM
   =========================================== */

.fluxo-plan::before {
  background: var(--state-hover-primary);
}

.fluxo-plan--mandatory {
  position: relative;
  cursor: default;
  background: var(--md-sys-color-surface-container);
  border: 2px solid var(--md-sys-color-outline-variant);
}

.fluxo-plan--mandatory::after {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  z-index: var(--z-above-content);
  padding: var(--space-4xs) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-primary);
  content: 'OBRIGATÓRIO';
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-small);
}

.fluxo-plan--mandatory .fluxo-checkbox {
  pointer-events: none;
}

/* Override específico para plano obrigatório com classe active */
.fluxo-plan.fluxo-plan--mandatory.active {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline-variant);
  box-shadow: none;
}

.fluxo-plan strong {
  position: relative;
  z-index: var(--z-elevated);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface);
}

.fluxo-plan--mandatory strong {
  margin-right: 3.75rem;
}

.fluxo-plan small {
  display: block;
  margin-top: var(--space-s);
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
}

/* ===========================================
   CHECKBOX SYSTEM
   =========================================== */

.fluxo-checkbox {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: var(--space-s);
  background: var(--md-sys-color-surface);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  transition:
    background-color var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    border-color var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    transform var(--transition-fast) var(--md-sys-motion-easing-emphasized),
    box-shadow var(--transition-fast) var(--md-sys-motion-easing-emphasized);
}

.fluxo-checkbox--checked {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.fluxo-checkbox__icon {
  font-size: var(--text-base);
  color: transparent;
  transition: color var(--transition-fast) ease;
}

.fluxo-checkbox--checked .fluxo-checkbox__icon {
  color: var(--md-sys-color-on-primary);
}

/* ===========================================
   TOTAL DISPLAY
   =========================================== */

.fluxo-total {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-l);
  margin: var(--space-l) 0;
  overflow: hidden;
  background: var(--md-sys-color-surface-container);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
}

.fluxo-total::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  background: linear-gradient(90deg,
      oklch(from var(--md-sys-color-primary) 99% 0.01 h) 0%,
      oklch(from var(--md-sys-color-primary) 98% 0.02 h) 100%);
  opacity: 0.15;
}

.fluxo-total__label,
.fluxo-total__value {
  position: relative;
  z-index: var(--z-content);
  color: var(--md-sys-color-primary);
}

.fluxo-total__label {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.fluxo-total__value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

/* ===========================================
   NAVIGATION SYSTEM
   =========================================== */

.fluxo-nav {
  display: flex;
  gap: var(--space-l);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-l);
  margin-top: var(--space-l);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.fluxo-nav--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}

.fluxo-nav__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  align-items: center;
  padding: var(--space-xl);
  text-align: center;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.fluxo-nav__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
}

/* ===========================================
   TOAST NOTIFICATIONS
   =========================================== */

.fluxo-toast {
  position: fixed;
  bottom: var(--space-xl);
  left: 50%;
  z-index: var(--z-popover);
  padding: var(--space-l) var(--space-xl);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-inverse-on-surface);
  pointer-events: none;
  background: var(--md-sys-color-inverse-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--transition-fast) var(--md-sys-motion-easing-emphasized);
}

.fluxo-toast--info {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
}

.fluxo-toast--success {
  color: var(--brand-neutral-white);
  background: var(--brand-success-green);
}

.fluxo-toast--error {
  color: var(--md-sys-color-on-error);
  background: var(--md-sys-color-error);
}

.fluxo-toast--warning {
  color: var(--brand-neutral-white);
  background: var(--brand-warning-orange);
}

/* ===========================================
   ANIMAÇÕES E DELAYS
   =========================================== */

.animar-entrada {
  animation: entrada-principal var(--transition-default) var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}

.animar-subida {
  animation: entrada-subida var(--transition-slow) var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}

.fluxo-step.animar-entrada {
  animation: entrada-principal-safe var(--transition-default) var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}

.fluxo-step.animar-subida {
  animation: entrada-subida-safe var(--transition-slow) var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}

.fluxo-step.atraso-1,
.atraso-1 {
  animation-delay: var(--delay-sm);
}

.fluxo-step.atraso-2,
.atraso-2 {
  animation-delay: var(--delay-md);
}

.fluxo-step.atraso-3,
.atraso-3 {
  animation-delay: var(--delay-lg);
}

/* ===========================================
   CLASSES ADICIONAIS ESPECÍFICAS DO FLUXO
   =========================================== */

.fluxo-step__text--centered {
  margin-bottom: var(--space-l);
  text-align: center;
}

.fluxo-plan-price {
  margin-left: auto;
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-primary);
}

.fluxo-plan--mandatory .fluxo-plan-price {
  font-weight: var(--font-medium);
  color: var(--md-sys-color-on-surface-variant);
}

.fluxo-nav--centered {
  justify-content: center;
  margin-top: var(--space-l);
  border: none;
}

.whatsapp-cta-text {
  font-weight: var(--font-medium);
}

/* WhatsApp specific button styles */
.btn.btn--whatsapp {
  color: var(--brand-neutral-white);
  background: var(--brand-whatsapp);
  border-color: var(--brand-whatsapp);
}

.btn.btn--whatsapp:hover {
  background: oklch(from var(--brand-whatsapp) l c h / 90%);
  border-color: oklch(from var(--brand-whatsapp) l c h / 90%);
}

.btn.btn--whatsapp:focus-visible {
  outline-color: var(--brand-whatsapp);
}

/* Highlight specific styles */
.fluxo-highlight__title {
  margin: 0 0 var(--space-l) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-on-surface);
}

.fluxo-highlight__list {
  padding-left: var(--space-xl);
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface-variant);
}

.fluxo-highlight__list li {
  margin-bottom: var(--space-m);
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* MOBILE (≤480px) */

/* TABLET / MOBILE STANDARD (≤768px) */

/* Focus visible for better keyboard navigation */
.fluxo-plan:focus-visible,
.fluxo-nav button:focus-visible {
  outline: 2px solid var(--md-sys-color-focus-outline);
  outline-offset: 2px;
}

/* Support queries and higher-level conditions */

/* Reduced motion support */

/* ===========================================
   LOADING OVERLAY (Windows-style)
   =========================================== */

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-max);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-sys-color-surface);
  transition:
    opacity var(--duration-smooth) var(--ease-fluid),
    visibility var(--duration-smooth) var(--ease-fluid);
}

.loading-overlay.is-hiding {
  visibility: hidden;
  opacity: 0;
}

.loading-content {
  width: 400px;
  max-width: 90%;
  text-align: center;
}

.loading-icon {
  margin-bottom: var(--space-l);
  font-size: 3rem;
  color: var(--md-sys-color-primary);
}

.loading-message {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  animation: fadeInOut 0.8s ease-in-out;
}

/* ===========================================
   PROGRESS MESSAGE (Above progress bar)
   =========================================== */

.fluxo-progress__message {
  min-height: 1.5em;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fluxo-progress__message.is-visible {
  opacity: 1;
}

/* ===========================================
   ANIMAÇÕES
   =========================================== */

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  50% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ===========================================
   ACESSIBILIDADE - Reduced Motion
   =========================================== */
}
@layer pages{

/* ===================================
   SEGUNDOPASSO V2 - Progressive Card Flow
   Stripe/Vercel inspired onboarding
   =================================== */

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

/* Page Container */
.page-segundopasso {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--md-sys-color-surface);
}

/* ===================================
   HEADER & PROGRESS
   =================================== */

.segundopasso-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-fixed);
  display: flex;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-s) var(--space-lateral-mobile);
  background: oklch(from var(--md-sys-color-surface) l c h / 95%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.segundopasso-back-btn {
  display: flex;
  gap: var(--space-gap-icon);
  align-items: center;
  padding: var(--space-xs);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color var(--state-hover-opacity) ease-out;
}

.segundopasso-back-btn:hover {
  background: var(--state-hover-surface);
}

/* Progress Bar */
.segundopasso-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: calc(var(--z-fixed) + 1);
  height: 4px;
  background: var(--md-sys-color-surface-variant);
}

.segundopasso-progress__bar {
  height: 100%;
  background: linear-gradient(90deg,
      var(--md-sys-color-primary) 0%,
      var(--md-sys-color-tertiary) 100%);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   MAIN CARD CONTAINER
   =================================== */

.segundopasso-main {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: calc(36px + var(--space-m)) var(--space-lateral-mobile) 60px;
}

/* ===================================
   PROGRESSIVE CARD
   =================================== */

.segundopasso-card {
  width: 100%;
  max-width: 640px;
  padding: var(--space-s);
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--shadow-md);
  animation: slide-up-fade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.segundopasso-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Card Badge */
.segundopasso-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-m);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-full);
}

.segundopasso-card__badge--success {
  margin: 0 auto var(--space-m);
  color: white;
  background: var(--fluxo-success);
}

.segundopasso-card__success-icon {
  font-size: var(--icon-size-md);
}

/* Card Header */
.segundopasso-card__header {
  margin-bottom: var(--space-l);
}

.segundopasso-card__header--success {
  text-align: center;
}

.segundopasso-card__title {
  margin: 0 0 var(--space-s) 0;
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--md-sys-color-on-surface);
}

.segundopasso-card__subtitle {
  margin-bottom: var(--space-s);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface-variant);
}

/* Card Content */
.segundopasso-card__content {
  margin-bottom: var(--space-l);
}

.segundopasso-card__content--success {
  text-align: center;
}

.segundopasso-card__success-text {
  margin-bottom: var(--space-m);
  color: var(--md-sys-color-on-surface-variant);
}

.segundopasso-card__success-note-box {
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  background: var(--md-sys-color-surface-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.segundopasso-card__success-note-box p {
  margin: 0;
  font-size: var(--font-size-body-small);
}

/* Card Actions */
.segundopasso-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-action);
  justify-content: space-between;
}

.segundopasso-card__actions .btn {
  width: 100%;
}

.segundopasso-card__actions--stacked {
  flex-direction: column;
  gap: var(--space-m);
  justify-content: center;
}

/* ===================================
   STEP INDICATORS
   =================================== */

.segundopasso-indicators {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  padding: var(--space-s);
}

.segundopasso-indicator {
  width: 8px;
  height: 8px;
  background: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  transition: width 0.3s ease-out, background-color 0.3s ease-out;
}

.segundopasso-indicator.active {
  width: 24px;
  background: var(--md-sys-color-primary);
}

.segundopasso-indicator.completed {
  background: var(--md-sys-color-tertiary);
}

/* ===================================
   ANIMATIONS
   =================================== */

@keyframes slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes progress-expand {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Animation classes */
.is-exiting {
  animation: slide-down-fade 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes slide-down-fade {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
  }
}

/* Pop animation for selections */
.pop-in {
  animation: pop 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   PLAN GRID (Step 2)
   =================================== */

.segundopasso-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: var(--space-l);
}

.segundopasso-plan-card {
  position: relative;
  min-height: 120px;
  padding: var(--space-inset-card);
  cursor: pointer;
  background: var(--md-sys-color-surface);
  border: 2px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out, background-color 0.2s ease-out;
}

.segundopasso-plan-card:hover {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-primary);
  transform: translateY(-2px);
}

.segundopasso-plan-card.selected {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.segundopasso-plan-card__check {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.segundopasso-plan-card.selected .segundopasso-plan-card__check {
  opacity: 1;
  transform: scale(1);
}

.segundopasso-plan-card__name {
  margin-bottom: var(--space-2xs);
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface);
}

.segundopasso-plan-card__desc {
  margin-bottom: var(--space-s);
  font-size: var(--font-size-body-medium);
  color: var(--md-sys-color-on-surface-variant);
}

.segundopasso-plan-card__price {
  font-size: var(--font-size-headline-medium);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-primary);
}

/* ===================================
   CALENDAR STRIP (Step 3)
   =================================== */

.segundopasso-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-m);
  margin-bottom: var(--space-s);
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--space-s);
}

.segundopasso-month-nav .btn--icon-only {
  min-width: 44px;
  min-height: 44px;
}

.segundopasso-month-selector {
  position: relative;
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-medium);
  margin: 0 var(--space-s);
  transition: background-color 0.2s ease;
}

.segundopasso-month-selector:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-primary) 10%);
}

.segundopasso-select {
  appearance: none;
  background: transparent;
  border: none;
  font-family: inherit;
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-primary-container);
  padding: var(--space-m) var(--space-xl);
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  text-align: center;
  font-size: var(--font-size-body-large);
}

.segundopasso-select:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
  border-radius: var(--md-sys-shape-corner-medium);
}

.segundopasso-month-selector .select-icon {
  position: absolute;
  right: 20%;
  pointer-events: none;
  font-size: 24px;
  color: var(--md-sys-color-on-primary-container);
}

.segundopasso-calendar-strip {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-inset-card);
  margin-bottom: var(--space-l);
  margin-inline: calc(var(--space-inset-card)*-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Suavizar scroll em iOS */
  scroll-behavior: smooth;
}

.segundopasso-calendar-strip::-webkit-scrollbar {
  display: none;
}

.segundopasso-date-item {
  flex: 0 0 auto;
  min-width: 64px;
  padding: var(--space-s);
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out, color 0.2s ease-out;
}

.segundopasso-date-item:hover {
  border-color: var(--md-sys-color-primary);
}

.segundopasso-date-item.selected {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

/* ===================================
   TIME GRID (Step 3)
   =================================== */

.segundopasso-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-m);
}

.segundopasso-time-slot {
  padding: var(--space-m);
  font-size: var(--font-size-body-large);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, transform 0.15s ease-out, color 0.15s ease-out;
}

.segundopasso-time-slot:hover {
  background: var(--state-hover-surface);
  border-color: var(--md-sys-color-primary);
}

.segundopasso-time-slot.selected {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
  transform: scale(1.05);
}

.segundopasso-time-slot.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--md-sys-color-surface-variant);
  border-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
}

/* Time slot colors by plan */
.segundopasso-time-slot[data-plan='online'].selected {
  background: var(--md-sys-color-primary);
}

.segundopasso-time-slot[data-plan='vivagym'].selected {
  background: var(--pricing-vivagym);
}

.segundopasso-time-slot[data-plan='domicilio'].selected {
  background: var(--pricing-domicilio);
}

.segundopasso-time-slot[data-plan='gcp'].selected {
  background: var(--pricing-gcp);
}

/* ===================================
   PAYMENT OPTIONS (Step 5)
   =================================== */

.segundopasso-payment-grid {
  display: grid;
  gap: var(--space-s);
}

.segundopasso-payment-option {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m);
  cursor: pointer;
  background: var(--md-sys-color-surface);
  border: 2px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.segundopasso-payment-option:hover {
  border-color: var(--md-sys-color-outline);
}

.segundopasso-payment-option.selected {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.segundopasso-payment-option__radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.segundopasso-payment-option.selected .segundopasso-payment-option__radio {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.segundopasso-payment-option__radio::after {
  width: 8px;
  height: 8px;
  content: '';
  background: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-full);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.segundopasso-payment-option.selected .segundopasso-payment-option__radio::after {
  opacity: 1;
  transform: scale(1);
}

.segundopasso-payment-option__content {
  flex: 1 1;
}

.segundopasso-payment-option__label {
  margin-bottom: var(--space-2xs);
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-on-surface);
}

.segundopasso-payment-option__desc {
  font-size: var(--font-size-body-small);
  color: var(--md-sys-color-on-surface-variant);
}

/* ===================================
   SUMMARY CARD (Step 5)
   =================================== */

.segundopasso-summary {
  padding: var(--space-inset-card);
  margin-bottom: var(--space-l);
  background: var(--md-sys-color-surface-variant);
  border-radius: var(--md-sys-shape-corner-large);
}

.segundopasso-summary__title {
  display: flex;
  gap: var(--space-gap-icon);
  align-items: center;
  margin-bottom: var(--space-m);
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface);
}

.segundopasso-summary__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.segundopasso-summary__item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.segundopasso-summary__item:last-child {
  border-bottom: none;
}

.segundopasso-summary__label {
  font-size: var(--font-size-body-medium);
  color: var(--md-sys-color-on-surface-variant);
}

.segundopasso-summary__value {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-on-surface);
  text-align: right;
}

/* ===================================
   WHATSAPP CTA
   =================================== */

.segundopasso-whatsapp-cta {
  display: flex;
  gap: var(--space-gap-icon);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-inset-button-inline) var(--space-inset-button-block);
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-neutral-white);
  cursor: pointer;
  background: var(--fluxo-success);
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-success);
  transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.segundopasso-whatsapp-cta:hover {
  box-shadow: 0 8px 24px oklch(from var(--fluxo-success) l c h / 25%);
  transform: translateY(-1px);
}

.segundopasso-whatsapp-cta:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

/* ===================================
   TOAST NOTIFICATIONS
   =================================== */

.segundopasso-toast {
  position: fixed;
  bottom: var(--space-l);
  left: 50%;
  z-index: var(--z-toast);
  display: flex;
  gap: var(--space-gap-icon);
  align-items: center;
  padding: var(--space-m) var(--space-l);
  color: var(--md-sys-color-surface);
  background: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-strong-lg);
  transform: translateX(-50%) translateY(100px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.segundopasso-toast.visible {
  transform: translateX(-50%) translateY(0);
}

.segundopasso-toast--success {
  color: var(--brand-neutral-white);
  background: var(--fluxo-success);
}

.segundopasso-toast--error {
  color: var(--md-sys-color-on-error);
  background: var(--md-sys-color-error);
}

/* ===================================
   LOADING OVERLAY
   =================================== */

.segundopasso-loading {
  position: fixed;
  inset: 0;
  z-index: var(--z-max);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: var(--glass-overlay-bg);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.segundopasso-loading.active {
  pointer-events: auto;
  opacity: 1;
}

.segundopasso-loading__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--md-sys-color-outline-variant);
  border-top-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  animation: spin 0.8s var(--easing-linear) infinite;
}

/* ===================================
   STEP WELCOME CLASSES (Step 1)
   =================================== */

.segundopasso-welcome__hero {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-l);
  text-align: center;
}

.segundopasso-welcome__img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
}

.segundopasso-welcome__intro {
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-l);
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-relaxed);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}


.segundopasso-welcome__subtitle {
  margin-bottom: var(--space-l);
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-surface);
  text-align: center;
}

.segundopasso-welcome__steps {
  position: relative;
  display: grid;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.segundopasso-welcome__steps::before {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 19px;
  z-index: var(--z-base);
  width: 2px;
  content: '';
  background: linear-gradient(to bottom, var(--md-sys-color-primary) 0%, color-mix(in oklch, var(--md-sys-color-primary) 20%, transparent) 100%);
}

.segundopasso-welcome__step {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid);
}

.segundopasso-welcome__step:hover {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px) scale(1.02);
}

.segundopasso-welcome__step-num {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border-radius: 50%;
  box-shadow: 0 4px 12px color-mix(in oklch, var(--md-sys-color-primary) 40%, transparent);
}

.segundopasso-welcome__step-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.segundopasso-welcome__step-title {
  margin-bottom: var(--space-2xs);
  display: block;
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-surface);
}

.segundopasso-welcome__step-desc {
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-tight);
  color: var(--md-sys-color-on-surface-variant);
}

/* ===================================
   STEP PLANS CLASSES (Step 2)
   =================================== */

.segundopasso-plans__note {
  margin-bottom: var(--space-m);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.segundopasso-plan-card__period {
  font-size: var(--font-size-body-small);
}

.segundopasso-plan-card__details {
  margin-top: var(--space-s);
  font-size: var(--font-size-body-small);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.segundopasso-plan-card__details strong {
  color: var(--md-sys-color-on-surface);
}

/* ===================================
   STEP SCHEDULING CLASSES (Step 3)
   =================================== */

.segundopasso-scheduling__section {
  margin-bottom: var(--space-l);
}

.segundopasso-scheduling__title {
  margin-bottom: var(--space-s);
  font-size: var(--font-size-title-medium);
}

.segundopasso-scheduling__modes {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.segundopasso-scheduling__mode-card {
  padding: var(--space-l);
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  text-align: center;
}

.segundopasso-scheduling__mode-icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
}

.segundopasso-scheduling__mode {
  flex: 1 1;
  cursor: pointer;
}

.segundopasso-scheduling__mode-input {
  display: none;
}

.segundopasso-scheduling__mode-icon--online {
  color: var(--md-sys-color-primary);
}

.segundopasso-scheduling__mode-icon--presencial {
  color: var(--pricing-vivagym);
}

.segundopasso-scheduling__mode-name {
  display: block;
  margin: var(--space-2xs) 0;
}

.segundopasso-scheduling__mode-desc {
  font-size: var(--font-size-body-small);
}

.segundopasso-scheduling__warning {
  display: none;
  padding: var(--space-m);
  margin-bottom: var(--space-m);

  /* toggled via JS */
  background: oklch(from var(--pricing-vivagym) l c h / 10%);
  border-left: 4px solid var(--pricing-vivagym);
  border-radius: var(--md-sys-shape-corner-small);
}

.segundopasso-scheduling__warning-header {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-2xs);
}

.segundopasso-scheduling__warning-title {
  font-size: var(--font-size-label-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.segundopasso-scheduling__warning-text {
  margin-bottom: var(--space-s);
  font-size: var(--font-size-body-small);
}

.segundopasso-scheduling__warning-actions {
  display: flex;
  gap: var(--space-s);
}

.segundopasso-scheduling__calendar-header {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-s);
}

.segundopasso-scheduling__calendar-title {
  font-size: var(--font-size-title-medium);
}

.segundopasso-scheduling__calendar-desc {
  font-size: var(--font-size-body-small);
  color: var(--md-sys-color-on-surface-variant);
}

.segundopasso-scheduling__empty {
  grid-column: 1 / -1;
  padding: var(--space-l);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

/* ===================================
   STEP QUESTIONNAIRE CLASSES (Step 4)
   =================================== */

.segundopasso-questionnaire__container {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: var(--md-sys-color-surface-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.segundopasso-questionnaire__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-sys-color-surface-variant);
}

.segundopasso-questionnaire__loading-content {
  text-align: center;
}

.segundopasso-questionnaire__spinner {
  margin: 0 auto var(--space-m);
}

.segundopasso-questionnaire__loading-text {
  color: var(--md-sys-color-on-surface-variant);
}

.segundopasso-questionnaire__iframe {
  width: 100%;
  min-height: 500px;
  border: none;
}

.segundopasso-questionnaire__fallback {
  padding: var(--space-xl);
  text-align: center;
  background: var(--md-sys-color-surface-variant);
}

.segundopasso-questionnaire__fallback-text {
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--space-m);
}

.segundopasso-questionnaire__no-form {
  display: none;
  padding: var(--space-xl);
  text-align: center;
}

.segundopasso-questionnaire__success-icon {
  margin-bottom: var(--space-m);
  font-size: var(--text-6xl);
  color: var(--fluxo-success);
}

.segundopasso-questionnaire__success-title {
  margin-bottom: var(--space-s);
  font-size: var(--font-size-title-large);
}

.segundopasso-questionnaire__success-text {
  color: var(--md-sys-color-on-surface-variant);
}

/* ===================================
   STEP PAYMENT CLASSES (Step 5)
   =================================== */

.segundopasso-payment-section__title {
  margin-bottom: var(--space-s);
  font-size: var(--font-size-title-medium);
}

.segundopasso-payment-section__desc {
  margin-bottom: var(--space-m);
  font-size: var(--font-size-body-small);
  color: var(--md-sys-color-on-surface-variant);
}

.segundopasso-payment-section__note {
  margin-top: var(--space-m);
  font-size: var(--font-size-body-small);
  color: var(--md-sys-color-on-surface-variant);
}

.segundopasso-card__actions--vertical {
  flex-direction: column;
  gap: var(--space-s);
}

.segundopasso-card__actions--vertical .btn {
  width: 100%;
}
}
@layer pages{
/* Próximos Passos Page */
.proximos-passos {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-l) var(--space-m);
}

.proximos-passos__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--space-s);
}

.proximos-passos__subtitle {
  font-size: var(--text-base);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--space-l);
}

.proximos-passos__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.proximos-passos__step {
  display: flex;
  gap: var(--space-m);
  padding: var(--space-m);
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.proximos-passos__step:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.proximos-passos__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: 700;
  font-size: var(--text-base);
  flex-shrink: 0;
}

.proximos-passos__step-content {
  flex: 1 1;
}

.proximos-passos__step-title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--space-xs);
}

.proximos-passos__step-desc {
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.5;
}
}
@layer pages{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Header & Theme Toggle: Cabeçalho fixo com alternância de tema.
  2. Base & Container: Tipografia Inter e largura de leitura otimizada (800px).
  3. Typography:
     - H1-H3: Hierarquia formal.
     - Section Badges: Números de seção automáticos via data-section.
  4. Metadata: Datas de atualização estilizadas.
  5. Table of Contents: Índice interativo em grid.
  6. Destaque Boxes: Caixas de aviso (Important), Direitos (RGPD) e Contacto.
  7. Privacy Tables: Tabelas de dados estruturadas.
  8. Navigation: Botão "Voltar" com ícone.
  9. Dark Mode: Otimização total para temas escuros.
  10. RESPONSIVIDADE: Ajustes de escala tipográfica para mobile.
  11. ACESSIBILIDADE: Conformidade WCAG 2.1 (Contrast, Focus).
*/

/* ==========================================================================
   LEGAL PAGES STYLES
   Privacy Policy, Terms of Service, Cookies, etc.

   Design: Formal, moderno e legível para documentos legais
   Fonte: Inter (Google Fonts)
   Features: Números de secção estilizados, dark mode, responsivo
   ========================================================================== */

/* Standardized Navbar (Matches Article Aesthetic) */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: color-mix(in srgb, var(--bg-card), transparent 15%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  z-index: var(--z-fixed);
  padding: 0 var(--space-m);
}

.navbar__container {
  width: 100%;
  max-width: var(--max-width-content-narrow);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__back {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-main);
  text-decoration: none;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color var(--duration-fast) var(--ease-snappy);
}

.navbar__back:hover {
  background: oklch(0% 0 0deg / 5%);
}

.navbar__back iconify-icon {
  font-size: var(--text-xl);
}

/* ==========================================================================
   1. BASE & CONTAINER
   ========================================================================== */

body {
  padding-top: var(--height-component-xl);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-normal);
  background: var(--md-sys-color-surface-container-low);
}

.legal-container {
  max-width: var(--max-width-content-narrow);
  padding: var(--space-l);
  margin: var(--space-l) auto;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: 0 10px 40px -10px oklch(0% 0 0deg / 5%);
}

/* ==========================================================================
   2. TIPOGRAFIA
   ========================================================================== */

.legal-container h1 {
  margin-top: 0;
  margin-bottom: var(--space-l);
  font-family: 'Google Sans', sans-serif;
  font-size: var(--font-size-display-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  color: var(--md-sys-color-on-surface);
}

.legal-container h2 {
  display: flex;
  gap: var(--space-gap-icon);
  align-items: center;
  padding-top: var(--space-m);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-m);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-headline-medium);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--md-sys-color-primary);
  scroll-margin-top: var(--space-xl);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Número de Secção - Badge com ::before */
.legal-container h2::before {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: var(--height-component-sm);
  height: var(--height-component-sm);
  padding: 0 var(--space-s);
  font-size: var(--font-size-label-medium);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-on-primary-container);
  content: attr(data-section);
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-medium);
}

/* Esconder número no contact-box */
.contact-box h2::before {
  content: none;
}

.legal-container h3 {
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-primary);
  opacity: 0.9;
}

.legal-container p {
  margin-bottom: var(--space-m);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
  text-wrap: pretty;
}

.legal-container strong {
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface);
}

/* ==========================================================================
   3. METADATA (.update-date)
   ========================================================================== */

.update-date {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-m);
  margin-right: var(--space-s);
  margin-bottom: var(--space-m);
  font-size: var(--font-size-body-small);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
}

/* ==========================================================================
   4. ÍNDICE (.table-contents)
   ========================================================================== */

.table-contents {
  padding: var(--space-l);
  margin: var(--space-l) 0;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-large);
}

.table-contents h3 {
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: var(--space-m);
  color: var(--md-sys-color-primary);
}

.table-contents ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-s) var(--space-s);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: section-counter;
}

.table-contents li {
  display: flex;
  align-items: baseline;
  margin-bottom: 0;
  counter-increment: section-counter;
}

.table-contents li::before {
  min-width: var(--space-m);
  font-size: var(--font-size-label-small);
  font-weight: var(--font-weight-bold);
  color: var(--md-sys-color-primary);
  text-align: left;
  content: counter(section-counter) '.';
}

.table-contents a {
  display: inline-flex;
  flex: 1 1;
  align-items: center;
  min-height: var(--height-component-md);
  padding: var(--space-s);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  border-radius: var(--md-sys-shape-corner-small);
  transition: var(--transition-default);
}

.table-contents a:hover {
  color: var(--md-sys-color-on-primary-container);
  text-decoration: none;
  background: var(--md-sys-color-primary-container);
}

/* ==========================================================================
   5. CAIXAS DE DESTAQUE
   ========================================================================== */

.important-box,
.rights-box,
.info-box,
.contact-box {
  padding: var(--space-l);
  margin: var(--space-l) 0;
  border-radius: var(--md-sys-shape-corner-large);
}

.important-box strong,
.rights-box strong,
.info-box strong,
.contact-box strong {
  color: inherit;
}

/* .important-box - Avisos e alertas */
.important-box {
  background: var(--status-warning-bg);
  border-left: 4px solid var(--status-warning);
}

/* .info-box - Informação destacada */
.info-box {
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
  border-left: 4px solid var(--md-sys-color-primary);
}

/* .rights-box - Secção de direitos RGPD */
.rights-box {
  background: var(--md-sys-color-primary-container);
  border: 1px solid var(--md-sys-color-on-primary-container);
  opacity: 0.95;
}

.rights-box h2 {
  padding-bottom: 0;
  margin-top: 0;
  border-top: none;
}

/* .contact-box - Informação de contacto */
.contact-box {
  text-align: center;
  background: var(--md-sys-color-surface-container-high);
}

.contact-box h2 {
  margin-top: var(--space-m);
  text-align: center;
  border-top: none;
}

.contact-box h3 {
  margin-top: var(--space-m);
  text-align: center;
}

.contact-box a {
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-primary);
}

/* .privacy-options - Opções de gestão de cookies */
.privacy-options {
  padding: var(--space-l);
  margin: var(--space-l) 0;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
}

.privacy-options h3 {
  margin-top: 0;
  color: var(--md-sys-color-primary);
}

.privacy-options h4 {
  margin-top: var(--space-m);
  margin-bottom: var(--space-s);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-title-small);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-on-surface);
}

.privacy-options__btn {
  margin-top: var(--space-m);
  margin-bottom: var(--space-l);
}

.privacy-options__icon {
  margin-right: var(--space-s);
  font-size: var(--font-size-title-small);
  vertical-align: middle;
}

.privacy-options__divider {
  margin: var(--space-l) 0;
  border: none;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Fix touch target violations for cookie control links */
.privacy-options ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.privacy-options ul li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--height-component-md);
  padding: var(--space-s) var(--space-m);
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-primary);
  text-decoration: none;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: var(--transition-default);
}

.privacy-options ul li a:hover {
  text-decoration: none;
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.privacy-options ul li a:focus-visible {
  outline: var(--ring-width-md) solid var(--md-sys-color-primary);
  outline-offset: var(--space-s);
}

/* ==========================================================================
   6. TABELAS (.privacy-table)
   ========================================================================== */

.privacy-table {
  width: 100%;
  margin: var(--space-l) 0;
  overflow: hidden;
  font-size: var(--font-size-body-medium);
  border-collapse: collapse;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.privacy-table thead {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
}

.privacy-table th {
  padding: var(--space-s);
  font-weight: var(--font-weight-semibold);
  text-align: left;
}

.privacy-table td {
  padding: var(--space-s);
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.privacy-table tr:last-child td {
  border-bottom: none;
}

.privacy-table tr:nth-child(even) {
  background: var(--md-sys-color-surface-container-low);
}

/* ==========================================================================
   7. LISTAS
   ========================================================================== */

.legal-container ul,
.legal-container ol {
  padding-left: var(--space-m);
  margin-bottom: var(--space-s);
}

.legal-container li {
  margin-bottom: var(--space-s);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
  text-wrap: pretty;
}

/* Listas dentro de caixas */
.important-box ul,
.important-box ol,
.rights-box ul,
.rights-box ol,
.info-box ul,
.info-box ol,
.contact-box ul,
.contact-box ol {
  margin-bottom: 0;
}

/* ==========================================================================
   8. LINKS
   ========================================================================== */

.legal-container a {
  font-weight: var(--font-weight-medium);
  color: var(--md-sys-color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.legal-container a:hover {
  color: var(--md-sys-color-tertiary);
  text-decoration: underline;
}

.legal-container a:focus-visible {
  outline: var(--ring-width-md) solid var(--md-sys-color-primary);
  outline-offset: var(--space-s);
  border-radius: var(--md-sys-shape-corner-small);
}

/* ==========================================================================
   9. BOTÃO VOLTAR (.back-link)
   ========================================================================== */

.back-link {
  display: inline-flex;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-s) var(--space-l);
  margin-top: var(--space-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--md-sys-color-primary);
  text-decoration: none;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-full);
  transition: var(--transition-default);
}

.back-link:hover {
  color: var(--md-sys-color-on-secondary-container);
  text-decoration: none;
  background: var(--md-sys-color-secondary-container);
  transform: translateX(-4px);
}

/* ==========================================================================
   10. DARK MODE
   ========================================================================== */

.dark-theme .legal-container {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline);
  box-shadow: 0 10px 40px -10px oklch(0% 0 0deg / 20%);
}

.dark-theme .important-box,
.dark-theme .info-box {
  background: var(--md-sys-color-surface-container);
  border-left-color: var(--status-warning);
}

.dark-theme .info-box {
  border-left-color: var(--md-sys-color-primary);
}

.dark-theme .rights-box {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-primary);
  opacity: 1;
}

.dark-theme .rights-box h2::before,
.dark-theme .legal-container h2::before {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
}

.dark-theme .privacy-table thead {
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
}

.dark-theme .table-contents {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline);
}

.dark-theme .table-contents a:hover {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
}

.dark-theme .back-link {
  background: var(--md-sys-color-surface-container);
}

.dark-theme .back-link:hover {
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
}

/* ==========================================================================
   11. RESPONSIVIDADE
   ========================================================================== */
}
@layer pages{

/* MAPA DO ARQUIVO (LINKTREE.CSS) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Critical CSS (anti-FOUC) - In-line styles para carregamento inicial.
  2. Reset & Base: Estilos fundamentais do body.
  3. Background Effects: Gradiente e orbs animados.
  4. Layout Container: Wrapper principal e content.
  5. Theme Toggle: Botão fixo de troca de tema.
  6. Profile Section: Avatar, nome e título.
  7. Hook Container: Elemento de chamariz.
  8. Link Cards System: Cards de links com variantes.
  9. Social Row: Grid de redes sociais.
  10. Footer: Rodapé com links.
  11. Reveal Animations: Animações de entrada.
  12. Modal Styles: Modal de horários.
  13. MEDIA QUERIES: Desktop e reduced motion.

  ⚠️ IMPORTANTE: Este arquivo NÃO define variáveis locais.
  Todos os estilos usam tokens do design system global.
*/

/* ==========================================================================
   1. CSS CRÍTICO (anti-FOUC) - Copiar para <style> inline no HTML
   ========================================================================== */

/*
  <style>
    (function () {
      const theme = localStorage.getItem('theme') ||
        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      if (theme === 'dark') document.documentElement.classList.add('dark-theme');
    })();
  </style>
*/

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
.linktree-body {
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: var(--font-family-primary);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. BACKGROUND EFFECTS
   ========================================================================== */
.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: var(--z-negative);
  background: var(--md-sys-color-surface);
}

.bg-orb {
  position: fixed;
  z-index: var(--z-negative);
  border-radius: 50%;
  opacity: 0.35;
  filter: blur(var(--space-l));
  animation: linktreeFloat 20s var(--md-sys-motion-easing-linear) infinite;
}

.orb-1 {
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: var(--md-sys-color-primary);
  animation-delay: 0s;
}

.orb-2 {
  bottom: 15%;
  left: -60px;
  width: 220px;
  height: 220px;
  background: var(--md-sys-color-tertiary);
  animation-delay: -10s;
}

@keyframes linktreeFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(var(--space-2xl), calc(var(--space-2xl)*-1)) scale(1.05);
  }

  66% {
    transform: translate(calc(var(--space-m)*-1), var(--space-m)) scale(0.95);
  }
}

html.dark-theme .orb-1,
html.dark-theme .orb-2 {
  opacity: 0.25;
}

/* ==========================================================================
   4. LAYOUT CONTAINER
   ========================================================================== */
.linktree-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-m) var(--space-sm);
}

.linktree-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 100%;
  max-width: var(--max-width-linktree, 25rem);
}

/* ==========================================================================
   5. THEME TOGGLE
   ========================================================================== */

/* Positioning override for linktree - rest inherited from _badges.css */
.linktree-body .theme-toggle {
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: var(--z-sticky);

  /* Below modal (1200), above content */
}

/* When modal is open, disable theme toggle interaction */
body.modal-open .theme-toggle {
  pointer-events: none;
}

/* ==========================================================================
   6. PROFILE SECTION
   ========================================================================== */
.profile-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
}

.avatar-ring {
  position: relative;
  width: 112px;
  height: 112px;
}

.avatar-glow {
  position: absolute;
  inset: calc(var(--space-4xs)*-1);
  z-index: var(--z-base);
  background: var(--md-sys-color-primary);
  border-radius: 50%;
  animation: rotate 6s var(--md-sys-motion-easing-linear) infinite;
}

.avatar-glow::before {
  position: absolute;
  inset: var(--space-4xs);
  content: '';
  background: var(--md-sys-color-surface);
  border-radius: 50%;
}

.avatar {
  position: relative;
  z-index: var(--z-elevated);
  width: 100%;
  height: 100%;
  padding: var(--space-4xs);
  object-fit: cover;
  border-radius: 50%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Lógica de troca de imagem (CSS-Only) */
.img-dark {
  display: none;
}

.img-light {
  display: block;
}

html.dark-theme .img-light {
  display: none;
}

html.dark-theme .img-dark {
  display: block;
}

html.dark-theme .avatar-glow::before {
  background: var(--md-sys-color-surface);
}

.profile-name {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-on-surface);
  letter-spacing: -0.02em;
}

.profile-title {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-primary);
}

/* Dark mode: Ensure profile title has proper contrast */
html.dark-theme .profile-title {
  color: var(--md-sys-color-primary);
}

/* ==========================================================================
   7. HOOK CONTAINER
   ========================================================================== */
.hook-container {
  width: 100%;
  padding: 0;
  margin-top: var(--space-m);
  color: var(--md-sys-color-on-surface);
  text-align: center;
  background: transparent;
}

.hook-text {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--line-height-snug);
  color: var(--md-sys-color-on-surface);
}

.hook-icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
  color: var(--md-sys-color-primary);
}

/* Dark mode: Ensure hook icon has proper contrast */
html.dark-theme .hook-icon {
  color: var(--md-sys-color-primary);
}

.hook-sub {
  max-width: 32ch;
  margin-inline: auto;
  margin-top: var(--space-xs);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface-variant);
}

html.dark-theme .hook-container::before {
  height: var(--border-width);
  background: linear-gradient(90deg, var(--md-sys-color-tertiary), var(--md-sys-color-primary));
  opacity: 1;
}

/* ==========================================================================
   10. LINKS SECTION - PREMIUM REDESIGN (V14)
   ========================================================================== */

.link-grid--premium {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  width: 100%;
}

.link-card--premium {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  min-height: 160px;
  overflow: hidden;
  text-decoration: none;
  background: var(--md-sys-color-surface-container-low);
  border: var(--border-width) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    border-color var(--duration-normal) var(--ease-out-expo);
}

.link-card--premium:hover {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 20px 40px var(--shadow-rich-lg);
  transform: translateY(calc(var(--space-xs)*-1)) scale(1.02);
}

/* Image Container */
.link-card__image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-high);
}

.link-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-elegant) var(--ease-out-expo);
}

.link-card--premium:hover .link-card__img {
  transform: scale(1.1);
}

.link-card__placeholder-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  color: var(--brand-neutral-white);
}

.bg-tertiary-green {
  background: var(--brand-tertiary-green);
}

.bg-primary-blue {
  background: var(--brand-primary-blue);
}

.bg-primary-gold {
  background: var(--brand-primary-gold);
}

/* Content Area */
.link-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-m);
  text-align: left;
}

.link-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
  margin-bottom: var(--space-xs);
}

.link-card__tag {
  align-self: flex-start;
  padding: var(--space-4xs) var(--space-xs);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
}

.link-card__tag--gold {
  color: var(--brand-neutral-black);
  background: var(--brand-primary-gold);
}

.link-card__title {
  margin: 0;
  font-family: var(--font-family-serif);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-on-surface);
}

.link-card__desc {
  margin: 0 0 var(--space-m) 0;
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.8;
}

.link-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.link-card__cta {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* 3D Decorative Elements */
.decor-3d {
  position: absolute;
  z-index: var(--z-elevated);
  color: var(--brand-neutral-white);
  pointer-events: none;
  filter: drop-shadow(0 8px 16px oklch(0% 0 0deg / 0.3));
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.decor-3d--kettlebell {
  right: -10px;
  bottom: -10px;
  font-size: 4rem;
  opacity: 0.3;
  transform: rotate(-15deg);
}

.decor-3d--pulse {
  top: 50%;
  left: 50%;
  font-size: 5rem;
  opacity: 0.15;
  transform: translate(-50%, -50%);
}

.decor-3d--bubble {
  top: 10px;
  right: 10px;
  font-size: 3rem;
  opacity: 0.2;
}

.link-card--premium:hover .decor-3d {
  transform: scale(1.2) rotate(0deg);
}

/* Primary Link (Website Special) */
.link-card--premium.link-primary {
  background: linear-gradient(135deg, var(--md-sys-color-surface-container-high), var(--md-sys-color-surface-container-low));
}

.link-card--premium.link-primary:hover {
  border-color: var(--brand-tertiary-green);
}

.link-card--premium.link-primary .link-card__title {
  color: var(--brand-tertiary-green);
}

/* Theme Toggle Adaptations */
html.dark-theme .link-card--premium {
  background: var(--md-sys-color-surface-container-lowest);
  border-color: var(--md-sys-color-outline-variant);
}

html.dark-theme .link-card--premium:hover {
  border-color: var(--md-sys-color-tertiary);
}

/* ==========================================================================
   8. LINK CARDS SYSTEM
   ========================================================================== */
.links-section {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.85rem + 0.5vw, 1rem);
}

/* Base Card Style */
.link-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  background: var(--md-sys-color-surface-container-low);
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    color var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

/* Border for Dark Mode contrast */
html.dark-theme .link-card {
  background: var(--md-sys-color-surface-variant);
  border: var(--border-width) solid var(--md-sys-color-outline-variant);
  box-shadow: 0 var(--space-4xs) var(--space-3xs) var(--shadow-soft);
}

.link-card:hover {
  transform: translateY(calc(var(--space-4xs)*-1));
}

.link-card:active {
  transform: scale(0.98);
}

.link-card:focus-visible {
  outline: var(--outline-width-thick) solid var(--md-sys-color-primary);
  outline-offset: var(--space-4xs);
}

/* Background Expansion Effect */
.link-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--md-sys-color-surface-container-high);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-snappy);
}

.link-card:hover .link-bg {
  opacity: 1;
}

/* Default Content Layout */
.link-content {
  position: relative;
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--space-sm) clamp(1rem, 1.1rem + 0.5vw, 1.25rem);
}

.link-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: var(--text-xl);
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-small);
}

/* Ensure iconify icons inherit color correctly */
.link-icon iconify-icon {
  color: currentColor;
}

.link-text {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.link-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--line-height-tight);
  color: var(--md-sys-color-on-surface);
}

body:not(.dark-theme) .social-card.instagram {
  color: var(--brand-instagram);
}

body:not(.dark-theme) .social-card.linkedin {
  color: var(--brand-linkedin);
}

.link-desc {
  margin-top: var(--space-4xs);
  font-size: var(--text-sm);
  line-height: var(--line-height-tight);
  color: var(--md-sys-color-on-surface-variant);
}

.link-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  font-size: var(--text-xl);
  color: var(--md-sys-color-on-surface-variant);
  transition: transform var(--duration-smooth) var(--ease-snappy);
}

.link-card:hover .link-arrow {
  color: var(--md-sys-color-primary);
  transform: translateX(var(--space-4xs));
}

/* VARIANT: PRIMARY LINK */
.link-primary {
  background: var(--md-sys-color-primary);
}

html.dark-theme .link-primary {
  background: linear-gradient(135deg,
      var(--md-sys-color-primary),
      var(--md-sys-color-primary-container));
  border: none;
  box-shadow:
    inset 0 0 0 var(--border-width) var(--md-sys-color-on-surface),
    0 var(--space-4xs) var(--space-m) calc(var(--space-4xs)*-1) var(--shadow-glow);
}

.link-primary .link-content {
  justify-content: center;
  padding: clamp(1rem, 1.1rem + 0.5vw, 1.25rem);
}

.link-primary .link-text {
  flex: 0 1 auto;
  align-items: center;
  text-align: center;
}

.link-primary .link-arrow {
  margin-left: 0;
}

.link-primary .link-icon {
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface);
}

html.dark-theme .link-primary .link-icon {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-highest);
}

.link-primary .link-label,
.link-primary .link-arrow {
  color: var(--md-sys-color-on-primary);
}

/* CTA subtext fix: Use same color with slight opacity for hierarchy */
.link-primary .link-desc {
  color: var(--md-sys-color-on-primary);
  opacity: 0.95;
}

html.dark-theme .link-primary .link-label,
html.dark-theme .link-primary .link-arrow {
  color: var(--brand-neutral-white);
}

html.dark-theme .link-primary .link-desc {
  color: var(--brand-neutral-white);
  opacity: 0.9;
}

html.dark-theme .link-primary .link-arrow {
  color: var(--md-sys-color-on-surface);
}

.link-primary:focus-visible {
  outline-color: var(--md-sys-color-on-primary);
}

/* Glow Effect */
.link-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      var(--md-sys-color-primary-container),
      transparent 50%);
  opacity: 0;
  transition: opacity var(--duration-smooth) var(--ease-snappy);
}

.link-primary:hover .link-glow {
  opacity: 1;
}

/* VARIANT: SCHEDULE LINK */
.link-schedule .link-icon {
  color: var(--md-sys-color-tertiary);
  background: var(--md-sys-color-tertiary-container);
}

.link-badge {
  padding: var(--space-4xs) var(--space-4xs);
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-tertiary-container);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--md-sys-color-tertiary-container);
  border-radius: var(--md-sys-shape-corner-full);
}

/* VARIANT: ARTICLE LINK */
.link-article {
  background: var(--md-sys-color-surface-container-low);
}

.article-tag {
  display: inline-flex;
  gap: var(--space-4xs);
  align-items: center;
  align-self: flex-start;
  padding: var(--space-4xs) var(--space-4xs);
  margin-bottom: var(--space-4xs);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-tertiary-container);
  background: var(--md-sys-color-tertiary-container);
  border-radius: var(--md-sys-shape-corner-full);
}

.article-thumb {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: var(--text-xl);
  color: var(--md-sys-color-on-tertiary-container);
  background: var(--md-sys-color-tertiary-container);
  border-radius: var(--md-sys-shape-corner-small);
}

/* Article tags and thumbs now use MD3 tokens with built-in dark mode support */

/* VARIANT: WHATSAPP LINK */
.link-whatsapp .link-icon {
  color: var(--brand-whatsapp);
  background: var(--md-sys-color-tertiary-container);
}

html.dark-theme .link-whatsapp .link-icon {
  color: var(--brand-whatsapp);
  background: var(--md-sys-color-tertiary-container);
}

/* VARIANT: EMAIL LINK */
.link-email .link-icon {
  color: var(--md-sys-color-secondary);
  background: var(--md-sys-color-secondary-container);
}

/* Dark mode card background override */
html.dark-theme .link-bg {
  background: var(--md-sys-color-surface-variant);
}

/* ==========================================================================
   9. SOCIAL ROW
   ========================================================================== */
.social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 0.85rem + 0.5vw, 1rem);
  margin-top: var(--space-m);
}

.social-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  min-width: var(--height-component-touch, 48px);
  min-height: var(--height-component-touch, 48px);
  padding: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  background: oklch(from var(--md-sys-color-surface) l c h / 80%);
  border: var(--border-width) solid var(--glass-border-light);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    background-color var(--duration-smooth) var(--ease-fluid),
    color var(--duration-smooth) var(--ease-fluid),
    transform var(--duration-smooth) var(--ease-fluid),
    border-color var(--duration-smooth) var(--ease-fluid),
    box-shadow var(--duration-smooth) var(--ease-fluid);
}

html.dark-theme .social-card {
  background: oklch(from var(--md-sys-color-surface-container-high) l c h / 70%);
  border-color: var(--glass-border-dark);
  box-shadow: var(--shadow-sm);
}

.social-card iconify-icon {
  font-size: var(--text-2xl);
  color: currentColor;
}

.social-card.instagram {
  color: var(--brand-instagram);
}

.social-card.linkedin {
  color: var(--brand-linkedin);
}

.social-card:hover {
  background: var(--md-sys-color-surface-container-high);
  transform: translateY(calc(var(--space-4xs)*-1));
}

html.dark-theme .social-card:hover {
  background: var(--md-sys-color-surface-container);
}

.social-card:active {
  transform: scale(0.98);
}

.social-card:focus-visible {
  outline: var(--outline-width-thick) solid var(--md-sys-color-primary);
  outline-offset: var(--space-4xs);
}

/* Dark Theme Social Cards Contrast */
html.dark-theme .social-card.instagram,
html.dark-theme .social-card.linkedin {
  color: var(--md-sys-color-on-surface);
}

html.dark-theme .social-card.instagram iconify-icon,
html.dark-theme .social-card.linkedin iconify-icon {
  color: var(--md-sys-color-on-surface);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.linktree-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  padding-top: var(--space-sm);
  text-align: center;
}

.linktree-footer p {
  font-size: var(--text-sm);
  color: var(--md-sys-color-on-surface-variant);
}

.linktree-body .footer-link {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

/* Dark mode: Ensure footer links have proper contrast */
html.dark-theme .linktree-body .footer-link {
  color: var(--md-sys-color-primary);
}

.linktree-body .footer-link:hover,
.linktree-body .footer-link:focus-visible {
  text-decoration: underline;
}

.linktree-body .footer-link:focus-visible {
  outline: var(--outline-width-thick) solid var(--md-sys-color-primary);
  outline-offset: var(--space-4xs);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

/* ==========================================================================
   11. REVEAL ANIMATIONS
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--space-m));
  animation: reveal var(--md-sys-motion-duration-medium2) var(--ease-fluid) forwards;
}

[data-reveal]:nth-child(1) {
  animation-delay: 0.1s;
}

[data-reveal]:nth-child(2) {
  animation-delay: 0.18s;
}

[data-reveal]:nth-child(3) {
  animation-delay: 0.26s;
}

[data-reveal]:nth-child(4) {
  animation-delay: 0.34s;
}

[data-reveal]:nth-child(5) {
  animation-delay: 0.42s;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   12. MODAL STYLES (Styles inherited from _modal-base.css)
   Unique content styles follow below.
   ========================================================================== */

/* ==========================================================================
   13. SCHEDULE LIST (Modal Content)
   ========================================================================== */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.85rem + 0.5vw, 1rem);
}

.schedule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.75rem, 0.85rem + 0.5vw, 1rem) var(--space-sm);
  font-size: var(--text-sm);
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-small);
}

.schedule-item .service-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
  text-align: left;
}

.schedule-item .service-name {
  display: flex;
  gap: var(--space-4xs);
  align-items: center;
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-on-surface);
}

.schedule-item .service-name iconify-icon {
  font-size: var(--text-lg);
  color: var(--md-sys-color-primary);
}

.schedule-item .day {
  font-size: var(--text-xs);
  color: var(--md-sys-color-on-surface-variant);
}

.schedule-item .hours {
  align-self: flex-start;
  padding: var(--space-4xs) var(--space-4xs);
  margin-top: var(--space-4xs);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--md-sys-color-primary);
  white-space: nowrap;
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-small);
}

.schedule-item.highlight {
  background: var(--md-sys-color-primary-container);
  border: var(--border-width) solid var(--md-sys-color-primary);
}

/* Modal CTA Button */
.modal-cta {
  display: flex;
  gap: var(--space-4xs);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-sm);
  font-weight: var(--font-semibold);
  color: var(--brand-neutral-white);
  text-decoration: none;
  background: var(--brand-tertiary-green);
  border-radius: var(--md-sys-shape-corner-large);
  transition: transform var(--duration-fast) var(--ease-snappy);
}

.modal-cta:hover {
  transform: translateY(calc(var(--space-4xs)*-1));
}

/* Dark mode adjustment for modal CTA */
html.dark-theme .modal-cta {
  background: var(--md-sys-color-tertiary);
}

/* Dark Mode Adjustments for Modal */
html.dark-theme .modal__content {
  background: var(--md-sys-color-surface-container);
}

html.dark-theme .schedule-item {
  background: var(--md-sys-color-surface-container-low);
}

html.dark-theme .schedule-item.highlight {
  background: var(--md-sys-color-primary-container);
}

/* ==========================================================================
   13. MEDIA QUERIES
   ========================================================================== */

/* Desktop Enhancements */

/* Tablet Enhancements (768px - 1024px) */

/* Reduced Motion */
}
/* ==========================================================================
   5. UTILITIES - Classes Utilitárias
   ========================================================================== */
@layer utilities{

/* MAPA DO ARQUIVO (INDEX)
/*
  ESTRUTURA DO ARQUIVO:
  1. Display Utils (.d-*).
  2. Flexbox Utils (Direction, Wrap, Align, Justify).
  3. Grid Utils (Templates).
  4. Position Utils (Relative, Absolute, Fixed).
  5. Sizing Utils (Width/Height).
  6. Overflow & Visibility.
  7. Opacity & Cursor.
  8. Device Visibility Base (.mobile-only, .desktop-only).
  9. MEDIA QUERIES (Bottom-stack consolidado).
*/

/* ===================================
   CLASSES UTILITÁRIAS - DISPLAY E LAYOUT
   =================================== */

/* ---------------------------------------------------------------------------
   DISPLAY UTILS
   --------------------------------------------------------------------------- */
.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

.d-inline-flex {
  display: inline-flex;
}

.d-none {
  display: none;
}

.d-contents {
  display: contents;
}

/* ---------------------------------------------------------------------------
   FLEXBOX UTILS
   --------------------------------------------------------------------------- */
.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-1 {
  flex: 1 1;
}

.flex-2 {
  flex: 2 1;
}

.align-items-start {
  align-items: flex-start;
}

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

.align-items-end {
  align-items: flex-end;
}

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

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

/* ---------------------------------------------------------------------------
   GRID UTILS
   --------------------------------------------------------------------------- */
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ---------------------------------------------------------------------------
   POSITION UTILS
   --------------------------------------------------------------------------- */
.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

/* ---------------------------------------------------------------------------
   SIZING UTILS
   --------------------------------------------------------------------------- */
.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: fit-content;
}

.h-100 {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-fit {
  height: fit-content;
}

/* ---------------------------------------------------------------------------
   OVERFLOW & VISIBILITY
   --------------------------------------------------------------------------- */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-visible {
  overflow: visible;
}

/* Scroll Lock Utils */
.u-scroll-lock {
  overflow: hidden !important;
  /* iOS Safari: fixed height previne rubber-band scroll */
  height: 100% !important;
}

.u-prevent-overscroll {
  overscroll-behavior: none !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

/* ---------------------------------------------------------------------------
   OPACITY
   --------------------------------------------------------------------------- */
.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-100 {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   CURSOR
   --------------------------------------------------------------------------- */
.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   USER SELECTION
   --------------------------------------------------------------------------- */
.user-select-none {
  -webkit-user-select: none;
  user-select: none;
}

.user-select-text {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------------------------------------------------------------------------
   THEME VISIBILITY UTILS
   --------------------------------------------------------------------------- */
.theme-img-light {
  display: block;
}

.theme-img-dark {
  display: none;
}

.dark-theme .theme-img-light {
  display: none;
}

.dark-theme .theme-img-dark {
  display: block;
}

/* ---------------------------------------------------------------------------
   DEVICE VISIBILITY - BASE
   Nota: !importants são necessários para sobrescrever estilos inline
   --------------------------------------------------------------------------- */

/* Mobile-first: esconde mobile-only por padrão */
.mobile-only {
  display: none;
}

/* Desktop-first: mostra desktop-only por padrão */
.desktop-only {
  display: flex;
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK CONSOLIDADO)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   MOBILE (≤768px)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   TABLET (768px - 1024px)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   DESKTOP (≥1025px)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   DEVICE TYPE (Touch vs Mouse)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   ORIENTAÇÃO
   --------------------------------------------------------------------------- */
}
@layer utilities{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Font Size Classes (.text-*).
  2. Font Weight Classes (.font-*).
  3. Line Height Classes (.leading-*).
  4. Text Transform & Decoration.
  5. Component Text Styles (Body, Card, Link).
  6. Readability Helpers (Highlight, Primary, Spacing).
  7. Heading Spacing (Regra do Desequilíbrio).
  8. Text State Classes (Error, Warning, Success).
  9. Text Alignment & Wrap Utilities.
*/

/* ===================================
   CLASSES UTILITÁRIAS - TIPOGRAFIA
   =================================== */

/* Tamanho de Texto */
.text-xs,
.caption,
.micro-text {
  font-size: var(--text-xs);
}

.text-sm,
.body-small,
.meta-text,
.footer-text,
.badge-text {
  font-size: var(--text-sm);
}

.text-base,
.nav-link {
  font-size: var(--text-base);
}

.text-lg,
.body-large,
.text-blockquote,
.nav-logo {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-3xl {
  font-size: var(--text-3xl);
}

.text-4xl {
  font-size: var(--text-4xl);
}

/* Peso de Fonte */
.font-light {
  font-weight: var(--font-light);
}

.font-normal,
.checkbox-text {
  font-weight: var(--font-normal);
}

.font-medium,
.link,
.badge-text,
.nav-link,
.text-primary,
.subtitle-enhanced,
.text-blockquote {
  font-weight: var(--font-medium);
}

.font-semibold,
.button-text,
.form-label,
.text-highlight,
.text-emphasis,
.list-enhanced li::marker {
  font-weight: var(--font-semibold);
}

.font-bold,
.nav-logo,
.title-enhanced {
  font-weight: var(--font-bold);
}

/* Altura de Linha */
.leading-tight,
.title-enhanced {
  line-height: var(--leading-tight);
}

.leading-snug,
.subtitle-enhanced {
  line-height: var(--leading-snug);
}

.leading-normal,
.body-small,
.caption,
.micro-text,
.footer-text,
.paragraph-compact {
  line-height: var(--leading-normal);
}

.leading-relaxed,
.body-large,
.paragraph-spaced,
.text-blockquote,
.list-enhanced li {
  line-height: var(--leading-relaxed);
}

/* Transformação de Texto */
.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-decoration-none {
  text-decoration: none;
}

/* Componentes de Texto MD3 */
.body-large {
  color: var(--md-sys-color-on-surface);
  text-wrap: pretty;
}

.body-base {
  margin-bottom: var(--space-m);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--md-sys-color-on-surface);
  text-align: left;
  text-wrap: pretty;
}

.body-base:last-child {
  margin-bottom: 0;
}

.body-small,
.caption,
.meta-text,
.footer-text,
.badge-text,
.nav-link,
.micro-text {
  color: var(--md-sys-color-on-surface-variant);
}

.link {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.link:hover {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: var(--text-underline-offset, 4px);
  background-color: var(--state-hover-primary);
  border-radius: var(--md-sys-shape-corner-small);
}

.link-underline {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: var(--text-underline-offset, 4px);
}

.nav-logo {
  color: var(--md-sys-color-secondary);
}

/* ===================================
   CLASSES ADICIONAIS DE LEITIBILIDADE
   =================================== */

.text-highlight {
  font-size: 1.05em;
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  font-weight: var(--font-bold);
  color: var(--md-sys-color-primary);
}

.text-primary {
  color: var(--md-sys-color-primary);
}

.text-secondary {
  color: var(--md-sys-color-secondary);
}

.text-emphasis {
  color: var(--md-sys-color-tertiary);
}

/* Espaçamento aprimorado */
.paragraph-spaced {
  margin-bottom: var(--space-l);
}

.paragraph-relaxed {
  margin-bottom: var(--space-xl);
  line-height: var(--leading-relaxed);
}

.paragraph-compact {
  margin-bottom: var(--space-m);
}

.title-enhanced {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-m);
  font-size: var(--text-2xl);
  letter-spacing: var(--letter-spacing-tight);
}

.subtitle-enhanced {
  margin-bottom: var(--space-m);
  letter-spacing: var(--letter-spacing-tight);
}

/* REMOVIDO: Sistema .h*-title duplicado.
   O sistema .title--level-* em css/02-layout/_sections.css
   já fornece toda a estilização de títulos necessária.
   Isto elimina conflitos de especificidade onde elementos
   como <h4 class="title title--level-3"> recebiam regras
   conflituosas de múltiplos seletores.

   Espaçamento de Títulos agora gerido por:
   - .title (base)
   - .title--level-1 a .title--level-4 (modificadores)
   Em css/02-layout/_sections.css
*/

.text-blockquote {
  padding: var(--space-l);
  margin: var(--space-xl) 0;
  font-style: italic;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-variant);
  border-left: var(--space-xs) solid var(--md-sys-color-tertiary);
  border-radius: var(--md-sys-shape-corner-medium);
}

.list-enhanced li {
  padding-left: var(--space-s);
  margin-bottom: var(--space-s);
}

.list-enhanced li::marker {
  color: var(--md-sys-color-primary);
}

.text-high-contrast {
  color: var(--md-sys-color-on-surface);
}

.text-medium-contrast {
  color: var(--md-sys-color-on-surface-variant);
}

.text-focus-in {
  animation: focus-in 0.6s var(--ease-fluid);
}

/* ===================================
   TEXT STATE CLASSES
   =================================== */

.text-error {
  color: var(--md-sys-color-error, #b3261e);
}

.text-warning {
  color: var(--md-sys-color-warning, #f2b835);
}

.text-success {
  color: var(--md-sys-color-success, #37874e);
}

.text-muted {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.7;
}

.text-legal {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
}

/* Text Truncation */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================================
   TEXT ALIGNMENT UTILITIES
   =================================== */
.text-left {
  text-align: left;
}

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

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

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

/* Responsive alignment variants */

/* ===================================
   TEXT WRAP UTILITIES
   =================================== */
.text-wrap-balance {
  text-wrap: balance;
}

.text-wrap-pretty {
  text-wrap: pretty;
}

.text-wrap-nowrap {
  text-wrap: nowrap;
}

.text-wrap-stable {
  text-wrap: stable;
}

.text-clamp-2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-clamp-3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* MOBILE TEXT OPTIMIZATION */
}
@layer utilities{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Padding Utils (p-*, px-*, py-*).
  2. Margin Utils (m-*, mx-*, my-*).
  3. Gap Utils.
  4. MEDIA QUERIES:
     - Reset Mobile classes.
     - Safe Areas (iOS env).
*/

/* ===================================
   CLASSES UTILITÁRIAS - ESPAÇAMENTOS
   =================================== */

/* Padding */
.p-xs {
  padding: var(--space-xs);
}

.p-sm {
  padding: var(--space-s);
}

.p-md {
  padding: var(--space-m);
}

.p-lg {
  padding: var(--space-l);
}

.p-xl {
  padding: var(--space-xl);
}

.px-xs {
  padding-inline: var(--space-xs);
}

.px-sm {
  padding-inline: var(--space-s);
}

.px-md {
  padding-inline: var(--space-m);
}

.px-lg {
  padding-inline: var(--space-l);
}

.px-xl {
  padding-inline: var(--space-xl);
}

.py-xs {
  padding-block: var(--space-xs);
}

.py-sm {
  padding-block: var(--space-s);
}

.py-md {
  padding-block: var(--space-m);
}

.py-lg {
  padding-block: var(--space-l);
}

.py-xl {
  padding-block: var(--space-xl);
}

/* Margin */
.mb-xs {
  margin-bottom: var(--space-s);
}

.mb-sm {
  margin-bottom: var(--space-m);
}

.mb-md {
  margin-bottom: var(--space-l);
}

.mb-lg {
  margin-bottom: var(--space-xl);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.mt-xs {
  margin-top: var(--space-s);
}

.mt-sm {
  margin-top: var(--space-m);
}

.mt-md {
  margin-top: var(--space-l);
}

.mt-lg {
  margin-top: var(--space-xl);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

/* Gap */
.gap-xs,
.grid-gap-xs {
  gap: var(--space-s);
}

.gap-sm,
.grid-gap-sm {
  gap: var(--space-m);
}

.gap-md,
.grid-gap-md {
  gap: var(--space-l);
}

.gap-lg {
  gap: var(--space-xl);
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */
}
@layer utilities{

/* ==========================================================================
   ARTICLES INLINE FIX - Utility classes to replace inline styles
   ========================================================================== */

/* Progress bar fixa (topo da página) */
.article-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-toast);
  width: 100%;
  height: 4px;
  pointer-events: none;
}

/* Loading state */
.article-loading {
  padding: var(--space-3xl);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.article-loading iconify-icon {
  width: 3.75rem;
  height: 3.75rem;
  color: var(--md-sys-color-primary);
}

.article-loading p {
  margin-top: 1rem;
  font-weight: bold;
}

/* Error state */
.article-error {
  display: none;
  padding: var(--space-3xl);
  text-align: center;
}

.article-error iconify-icon {
  width: 3.75rem;
  height: 3.75rem;
  color: var(--md-sys-color-error);
}

.article-error h2 {
  margin-top: 1rem;
}

/* Article main container */
.article-main {
  display: none;
}

/* Metadata hidden (JSON data) */
.article-meta-hidden {
  display: none;
}

/* Article metadata display */
.article-metadata {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  margin: var(--space-xl) 0;
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant);
}

.article-metadata .reading-time {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

/* Excerpt block (blockquote styled) */
.article-excerpt {
  padding: var(--space-l);
  margin: var(--space-xl) 0;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container);
  border-left: 4px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-large);
}

/* Divider */
.article-divider {
  margin: var(--space-xs) 0;
  border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Back link button */
.article-back-link {
  display: inline-block;
  margin-top: var(--space-xl);
}

/* Info box (curiosity/note) */
.article-info-box {
  padding: var(--space-l);
  margin: var(--space-xl) 0;
  background: var(--md-sys-color-surface-container);
  border-left: 4px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-large);
}

.article-info-box iconify-icon {
  margin-right: var(--space-xs);
  font-size: 1.5rem;
  vertical-align: middle;
}

/* Warning box */
.article-warning-box {
  border-color: var(--md-sys-color-error);
}

/* List small */
.article-list-small {
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* Gym cost details */
.article-gym-cost span {
  color: var(--md-sys-color-on-surface-variant);
}

/* Sticky button */
.article-sticky-btn iconify-icon {
  vertical-align: middle;
}

/* Funnel badge */
.article-funnel-badge {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
}

/* Reading time */
.article-reading-time {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

/* Icon with text */
.article-icon-text {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}
}
@layer utilities{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Legal Content Wrapper (.legal-content): Estilos para texto corrido.
  2. Heading Styles: H1-H3 específicos para documentos legais.
  3. Body Text & Lists: Formatação de leitura.
  4. Legal Boxes: Caixas de aviso (Important, Info, Contact).
  5. Legal Tables: Estilos de tabela simples.
*/

/* ===================================
   UTILITIES - PROSE / LEGAL CONTENT
   =================================== */

/**
 * .legal-content
 * 
 * Used to style long-form legal documents (Privacy, Terms, Cookies)
 * where naked tags (h1, h2, h3, p, ul, li) are used.
 */

.legal-content {
  max-width: var(--max-width-content-narrow, 62.5rem);
  padding: var(--space-xl) var(--space-l);
  margin: 0 auto;
  line-height: var(--leading-relaxed);
  color: var(--md-sys-color-on-surface);
}

.legal-content h1 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xl);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--md-sys-color-primary);
}

.legal-content h2 {
  padding-bottom: var(--space-s);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-l);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--md-sys-color-primary);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.legal-content h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-m);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-secondary);
}

.legal-content p {
  margin-bottom: var(--space-l);
  font-size: var(--text-base);
  text-wrap: pretty;
}

.legal-content ul,
.legal-content ol {
  padding-left: var(--space-xl);
  margin-bottom: var(--space-xl);
  text-wrap: pretty;
}

.legal-content li {
  margin-bottom: var(--space-s);
}

.legal-content strong {
  font-weight: var(--font-semibold);
  color: var(--md-sys-color-primary);
}

.legal-content a {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(from var(--md-sys-color-primary) l c h / 40%);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-fluid);
}

.legal-content a:hover {
  text-decoration-color: var(--md-sys-color-primary);
}

.legal-content a:active {
  opacity: 0.7;
}

.legal-content .update-date {
  margin-bottom: var(--space-xl);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
}

/* Back Link Fix */
.legal-content .back-link {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-2xl);
  font-weight: var(--font-medium);
  text-decoration: none;
}

/* Legal Box Styles */
.legal-content .important-box,
.legal-content .info-box,
.legal-content .contact-box,
.legal-content .table-contents {
  padding: var(--space-l);
  margin: var(--space-xl) 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.legal-content .important-box {
  color: var(--md-sys-color-on-error-container);
  background: var(--md-sys-color-error-container);
  border-left: 4px solid var(--md-sys-color-error);
}

.legal-content .info-box {
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
  border-left: 4px solid var(--md-sys-color-primary);
}

.legal-content .contact-box,
.legal-content .table-contents {
  background: var(--md-sys-color-surface-container-high);
}

.legal-content .table-contents h3 {
  margin-top: 0;
}

/* Legal Tables */
.legal-content table {
  width: 100%;
  margin: var(--space-xl) 0;
  overflow: hidden;
  font-size: var(--text-sm);
  border-collapse: collapse;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
}

.legal-content th {
  padding: var(--space-m);
  color: var(--md-sys-color-on-primary);
  text-align: left;
  background: var(--md-sys-color-primary);
}

.legal-content td {
  padding: var(--space-m);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
}
@layer utilities{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Classes de Cor de Texto (.color-*).
  2. Classes de Background (.bg-*).
  3. Classes de Borda (.border*).
  4. Classes de Border Radius (.border-radius-*).
  5. Classes de Elevação/Sombra (.shadow-*).
*/

/* ===================================
   CLASSES UTILITÁRIAS - CORES E BACKGROUNDS
   =================================== */

/* Cores de Texto */
.color-primary {
  color: var(--md-sys-color-primary);
}

.color-secondary {
  color: var(--md-sys-color-secondary);
}

.color-surface {
  color: var(--md-sys-color-on-surface);
}

.color-muted {
  color: var(--md-sys-color-on-surface-variant);
}

/* Background Colors */
.bg-primary {
  background-color: var(--md-sys-color-primary);
}

.bg-secondary {
  background-color: var(--md-sys-color-secondary);
}

.bg-surface {
  background-color: var(--md-sys-color-surface);
}

.bg-surface-variant {
  background-color: var(--md-sys-color-surface-variant);
}

/* Borders */
.border {
  border: 1px solid var(--md-sys-color-outline-variant);
}

.border-none {
  border: none;
}

/* Border Radius */
.border-radius-sm {
  border-radius: var(--md-sys-shape-corner-small);
}

.border-radius-md {
  border-radius: var(--md-sys-shape-corner-medium);
}

.border-radius-lg {
  border-radius: var(--md-sys-shape-corner-large);
}

.border-radius-full {
  border-radius: var(--md-sys-shape-corner-full);
}

/* Elevations & Shadows */
.elevation-0,
.shadow-none {
  box-shadow: none;
}

.elevation-1,
.shadow-sm {
  box-shadow: var(--md-sys-elevation-level1);
}

.elevation-2 {
  box-shadow: var(--md-sys-elevation-level2);
}

.shadow-md {
  box-shadow: var(--md-sys-elevation-level3);
}
}
@layer utilities{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Base Skeleton: Animação de shimmer e gradiente.
  2. Text Variants: Título, Subtítulo, Parágrafo.
  3. Shape Variants: Avatar, Botão.
  4. Component Skeletons: Card, Service, Form, Article, Testimonial, Sidebar.
  5. Loading Container States.
  6. Pulse Animation Alternative.
  7. MEDIA QUERIES (Responsive adjustments).
*/

/* ===================================
   SKELETON LOADING STATES
   UX Enhancement - Loading Skeleton Screens
   =================================== */

/* Base Skeleton Styles */
.skeleton {
  background: linear-gradient(
      90deg,
      var(--md-sys-color-surface-variant) 0%,
      oklch(from var(--md-sys-color-surface-variant) l c h / 80%) 20%,
      var(--md-sys-color-surface-variant) 40%,
      oklch(from var(--md-sys-color-surface-variant) l c h / 80%) 60%,
      var(--md-sys-color-surface-variant) 80%,
      oklch(from var(--md-sys-color-surface-variant) l c h / 80%) 100%
    ) /
    200px 100%;
  border-radius: var(--md-sys-shape-corner-small);
  animation: skeleton-loading 2s ease-in-out infinite;
}

/* Skeleton Variants */

/* 1. Text Skeletons */
.skeleton-text,
.skeleton-card-title,
.skeleton-card-subtitle,
.skeleton-service-title,
.skeleton-form-label,
.skeleton-article-title,
.skeleton-sidebar-title,
.skeleton-sidebar-icon,
.skeleton-sidebar-text {
  border-radius: var(--md-sys-shape-corner-small);
}

.skeleton-text {
  height: 1em;
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  margin: 0.25em 0;
}

.skeleton-text.title {
  width: 60%;
  height: 2em;
}

.skeleton-text.subtitle {
  width: 80%;
  height: 1.4em;
}

.skeleton-text.paragraph {
  width: 100%;
  height: 1em;
}

.skeleton-text.paragraph:last-child {
  width: 70%;
}

/* 2. Avatar Skeleton */
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
}

.skeleton-avatar.small {
  width: 32px;
  height: 32px;
}

.skeleton-avatar.large {
  width: 64px;
  height: 64px;
}

/* 3. Button Skeleton */
.skeleton-button {
  width: 120px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-medium);
}

.skeleton-button.large {
  width: 160px;
  height: 48px;
}

.skeleton-button.small {
  width: 80px;
  height: 32px;
}

/* 4. Card Skeletons */
.skeleton-card {
  padding: var(--space-l);
  border-radius: var(--md-sys-shape-corner-medium);
}

.skeleton-card-header,
.skeleton-card-footer,
.skeleton-article-meta,
.skeleton-article-footer,
.skeleton-testimonial-header,
.skeleton-sidebar-item {
  display: flex;
}

.skeleton-card-header,
.skeleton-testimonial-header {
  align-items: center;
  margin-bottom: var(--space-l);
}

.skeleton-card-header .skeleton-avatar,
.skeleton-testimonial-avatar {
  margin-right: var(--space-l);
}

.skeleton-card-title {
  width: 150px;
  height: 24px;
  margin-bottom: var(--space-s);
}

.skeleton-card-subtitle {
  width: 100px;
  height: 16px;
}

.skeleton-card-content {
  margin-top: var(--space-l);
}

.skeleton-card-content .skeleton-text,
.skeleton-service-description .skeleton-text,
.skeleton-testimonial-content .skeleton-text {
  margin-bottom: var(--space-s);
}

.skeleton-card-footer {
  justify-content: space-between;
  padding-top: var(--space-l);
  margin-top: var(--space-l);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.skeleton-card-footer .skeleton-button {
  width: 80px;
  height: 32px;
}

/* 5. Service Card Skeleton */
.skeleton-service-card {
  min-height: 280px;
  padding: var(--space-xl);
  border-radius: var(--md-sys-shape-corner-medium);
}

.skeleton-service-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-l);
  border-radius: var(--md-sys-shape-corner-medium);
}

.skeleton-service-title {
  width: 200px;
  height: 28px;
  margin: 0 auto var(--space-m);
}

.skeleton-service-description {
  margin-top: var(--space-l);
}

.skeleton-service-cta {
  width: 120px;
  height: 40px;
  margin: var(--space-xl) auto 0 auto;
  /* top right bottom left */
}

/* 6. Form Skeleton */
.skeleton-form {
  max-width: var(--max-width-skeleton-form, 37.5rem);
}

.skeleton-form-group {
  margin-bottom: var(--space-l);
}

.skeleton-form-label {
  width: 100px;
  height: 20px;
  margin-bottom: var(--space-s);
}

.skeleton-form-input,
.skeleton-form-textarea {
  width: 100%;
  border-radius: var(--md-sys-shape-corner-small);
}

.skeleton-form-input {
  height: 56px;
}

.skeleton-form-textarea {
  height: 120px;
}

.skeleton-form-button {
  width: 150px;
  height: 48px;
  margin-top: var(--space-l);
}

.skeleton-form-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: var(--space-m);
  vertical-align: middle;
  border-radius: var(--md-sys-shape-corner-small);
}

/* Classes específicas blog */
.skeleton-text--width-80px {
  width: 80px;
}

.skeleton-text--width-60px {
  width: 60px;
}

.skeleton-text--width-100px {
  width: 100px;
}

.skeleton-text--height-16px {
  height: 16px;
}

.skeleton-button--width-120px {
  width: 120px;
}

.skeleton-button--height-32px {
  height: 32px;
}

/* 7. Blog Article Skeleton */
.blog-cards-skeletons {
  display: contents;
  /* Permite que os skeletons sejam itens diretos do grid pai */
}

.skeleton-article {
  display: flex;
  flex-direction: column;
  max-width: var(--max-width-content-narrow, 62.5rem);
  min-height: 350px;
  padding: var(--space-l);
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
}

.skeleton-article-header {
  margin-bottom: var(--space-xl);
}

.skeleton-article-title {
  width: 90%;
  height: 40px;
  margin-bottom: var(--space-l);
}

.skeleton-article-meta {
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}

.skeleton-article-meta .skeleton-text {
  width: 80px;
  height: 16px;
}

.skeleton-article-content {
  margin-bottom: var(--space-xl);
}

.skeleton-article-content .skeleton-text {
  margin-bottom: var(--space-m);
}

.skeleton-article-footer {
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* 8. Testimonial Skeleton */
.skeleton-testimonial {
  padding: var(--space-xl);
  border-radius: var(--md-sys-shape-corner-medium);
}

.skeleton-testimonial-name {
  width: 120px;
  height: 20px;
  margin-bottom: var(--space-s);
}

.skeleton-testimonial-role {
  width: 80px;
  height: 16px;
}

.skeleton-testimonial-content {
  margin-bottom: var(--space-l);
}

.skeleton-testimonial-rating {
  display: flex;
  gap: var(--space-s);
}

.skeleton-testimonial-rating .skeleton {
  width: 16px;
  height: 16px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

/* 9. Sidebar Skeleton */
.skeleton-sidebar {
  padding: var(--space-l);
}

.skeleton-sidebar-header {
  margin-bottom: var(--space-xl);
}

.skeleton-sidebar-title {
  width: 150px;
  height: 24px;
  margin-bottom: var(--space-l);
}

.skeleton-sidebar-search {
  width: 100%;
  height: 48px;
  margin-bottom: var(--space-l);
  border-radius: var(--md-sys-shape-corner-small);
}

.skeleton-sidebar-list {
  margin-bottom: var(--space-l);
}

.skeleton-sidebar-item {
  align-items: center;
  padding: var(--space-l) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.skeleton-sidebar-item:last-child {
  border-bottom: none;
}

.skeleton-sidebar-icon {
  width: 20px;
  height: 20px;
  margin-right: var(--space-l);
}

.skeleton-sidebar-text {
  flex: 1 1;
  width: 80%;
  height: 16px;
}

/* 10. Loading Container States */
.loading-container {
  position: relative;
}

.loading-container.loading::before {
  position: absolute;
  inset: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  content: '';
  background: rgb(var(--md-sys-color-surface-rgb), 0.9);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.loading-container.loading::after {
  width: var(--height-component-md);
  height: var(--height-component-md);
  content: '';
  border-top: 4px solid transparent;
  border-right: 4px solid var(--md-sys-color-primary);
  border-bottom: 4px solid var(--md-sys-color-primary);
  border-left: 4px solid var(--md-sys-color-primary);
  border-radius: 50%;
  animation: spin 1s var(--easing-linear) infinite;
}

/* 11. Pulse Skeleton Alternative */
.skeleton-pulse {
  background: var(--md-sys-color-surface-variant);
  animation: skeleton-pulse 2s ease-in-out infinite;
}

/* 16. Component-specific utilities */
.skeleton-fade-in,
.skeleton-loaded {
  animation: fadeIn var(--duration-smooth) var(--ease-fluid);
}

.skeleton-loaded {
  animation-duration: var(--duration-smooth);
}

.skeleton-slide-up {
  animation: slideInUp var(--duration-smooth) var(--ease-fluid);
}

/* Utility Classes for Loading States */
.is-loading .skeleton {
  display: block;
}

.is-loading .skeleton-hidden {
  display: none;
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* RESPONSIVE SKELETON (≤768px) */

/* ACCESSIBILITY - Reduced Motion */

/* 17. AI Translation Visual State */

/* HIGH CONTRAST MODE */

/* DARK MODE SUPPORT */
html.dark-theme .skeleton {
  background: linear-gradient(
    90deg,
    var(--md-sys-color-surface-variant) 0%,
    oklch(from var(--md-sys-color-surface-variant) l c h / 70%) 20%,
    var(--md-sys-color-surface-variant) 40%,
    oklch(from var(--md-sys-color-surface-variant) l c h / 70%) 60%,
    var(--md-sys-color-surface-variant) 80%,
    oklch(from var(--md-sys-color-surface-variant) l c h / 70%) 100%
  );
}

html.dark-theme .skeleton-pulse {
  background: var(--md-sys-color-surface-variant);
}

/* Animations */

/* skeleton-loading e skeleton-pulse definidos em _animations.css */
}
@layer utilities{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Regra do Desequilíbrio (Títulos).
  2. Regra do Grupo (Separação semântica).
  3. Regra do Respiro Mental (Secções).
  4. Regra do Espaçamento Íntimo (Ícones + Texto).
  5. Regra do Peso Visual Horizontal (Botões).
  6. Regra da Proximidade.
  7. Mobile Adjustments.
*/

/* ===================================
   ESPAÇAMENTO CENÁRIOS ESPECÍFICOS
   =================================== */

/* Regra do Desequilíbrio para Títulos */

/* O título deve estar mais próximo do conteúdo que introduz do que do conteúdo anterior */
.title-intro {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-l);
}

.title-intro-lg {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.title-intro-sm {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-m);
}

/* Regra do Grupo - Separar grupos distintos com o dobro do espaço */
.group-separated {
  margin-bottom: calc(var(--space-xl)*2);
}

.group-separated-sm {
  margin-bottom: calc(var(--space-l)*2);
}

.group-separated-lg {
  margin-bottom: calc(var(--space-2xl)*2);
}

/* Regra do Respiro Mental para Secções */
.section-breathing {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.section-breathing-lg {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.section-breathing-sm {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* Regra do Espaçamento Íntimo para Ícones + Texto */
.icon-text-intimate {
  display: inline-flex;
  gap: var(--space-s);

  /* 4px-8px */
  align-items: center;
}

.icon-text-intimate-lg {
  gap: var(--space-s);

  /* 8px */
}

/* Regra do Toque para Ícones Soltos */
.icon-touch-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-s);
}

/* Regra do Peso Visual Horizontal para Botões */
.btn-horiz-weight {
  padding: var(--space-s) var(--space-l);

  /* 3:1 ratio (approx 8px 24px) */
}

.btn-horiz-weight-lg {
  padding: var(--space-m) var(--space-xl);

  /* 3:1 ratio (approx 16px 48px) */
}

.btn-horiz-weight-sm {
  padding: var(--space-xs) var(--space-m);

  /* 3:1 ratio (approx 4px 16px) */
}

/* Regra do Agrupamento de Botões */
.btn-group {
  display: inline-flex;
  gap: var(--space-l);

  /* 12px-16px para agrupamento */
}

.btn-group-sm {
  gap: var(--space-s);

  /* 8px-12px para agrupamento pequeno */
}

.btn-group-lg {
  gap: var(--space-xl);

  /* 16px-24px para agrupamento grande */
}

/* Regra da Proximidade (Gestalt) */
.near-elements {
  margin-bottom: var(--space-s);

  /* Título e subtítulo próximos */
}

.grouped-items {
  margin-bottom: var(--space-l);

  /* Itens agrupados */
}

/* Regra do Interior vs Exterior para Componentes */
.interior-space-sm {
  padding: var(--space-s);
}

.exterior-space-lg {
  margin: var(--space-l);
}

/* Mobile adjustments para todos os cenários */
}
@layer utilities{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Stack Vertical: Espaçamento via gap do pai.
  2. Stack Horizontal: Espaçamento via gap do pai (wrap).
  3. Grid Layout Simplificado.
  4. Resets de Margem/Padding.
*/

/* ==========================================================================
   LAYOUT STACK UTILITIES (Strategy C: Parent Gaps)
   ========================================================================== */

/* 
 * Use estas classes para controlar o espaçamento entre elementos filhos
 * sem usar margens nos próprios filhos.
 */

/* Pilha Vertical (Vertical Stack) */
.stack-vertical {
  display: flex !important;
  flex-direction: column !important;
}

.stack-vertical > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Pilha Horizontal (Horizontal Stack / Button Groups) */
.stack-horizontal {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center;
}

.stack-horizontal > * {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Grid Layout Simplificado */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Utilitário para limpar margens explicitamente (Reset Local) */
.no-margins {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}
}
/* ==========================================================================
   6. ACESSIBILIDADE
   ========================================================================== */
@layer accessibility{

/* MAPA DO ARQUIVO (INDEX) */

/*
  ESTRUTURA DO ARQUIVO:
  1. Visible Focus Styles (*:focus-visible).
  2. Hidden Elements (.sr-only) for Screen Readers.
  3. Skip Links (Navegação por teclado).
  4. Keyboard Indicators (Helper visual).
  5. MEDIA QUERIES:
     - Hover/Pointer capabilities.
     - Contrast Enhancements (prefers-contrast).
     - High Contrast Mode (Windows).
     - Reduced Motion (prefers-reduced-motion).
*/

/* ===================================
   ACESSIBILIDADE - FOCUS E MELHORIAS
   =================================== */

/* Garante que o foco não seja visível ao clicar com o rato (estética preservada) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Prevenção de Foco em Elementos Ocultos */
[aria-hidden='true']:focus {
  outline: none !important;
}

/* Screen Reader Only - Hide element visually but keep available for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  height: 1px;
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  overflow: hidden;
  white-space: nowrap;
  border-width: 0;
  clip-path: inset(50%);
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  white-space: normal;
  clip-path: none;
}

/* Skip links melhorados para navegação por teclado */

/* Skip links melhorados para navegação por teclado */
.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: var(--z-fixed);
  width: auto;
  height: auto;
  padding: var(--space-inset-sm);
  overflow: hidden;
  font-weight: var(--font-medium);
  color: var(--md-sys-color-on-primary);
  text-decoration: none;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-small);
  opacity: 0;
  transform: translateY(-100%);
  transition:
    transform var(--duration-fast) var(--ease-snappy),
    opacity var(--duration-fast) var(--ease-snappy);
}

.skip-link:focus {
  overflow: visible;
  outline: 3px solid var(--md-sys-color-tertiary);
  box-shadow: var(--shadow-rich-md);
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   MEDIA QUERIES (BOTTOM-STACK)
   ========================================================================== */

/* DISPOSITIVOS COM SUPORTE A HOVER */

/* DISPOSITIVOS SEM SUPORTE A HOVER */

/* MELHORIAS DE CONTRASTE */

/* ALTO CONTRASTE NO WINDOWS */

/* NOTA: prefers-reduced-motion para animações gerido em _scroll-animations.css */

/* Mobile carousel controls must stay hidden even when generic touch button
   rules set display:inline-flex on .btn classes. */
}
@layer accessibility{

/* MAPA DO ARQUIVO (INDEX) */

/*
 ESTRUTURA DO ARQUIVO:
  1. Banner Container: Posição fixa no rodapé (z-index notification).
  2. Banner Content: Layout flexível para texto e ações.
  3. Typography: Títulos e mensagens com suporte a temas (Light/Dark).
  4. Buttons: Ações de Aceitar (Primary) e Rejeitar (Outlined).
  5. MEDIA QUERIES:
     - Mobile: Botões em grid de largura total.
     - Desktop: Layout horizontal (Space-between).
*/

/* ===================================
   COOKIE CONSENT BANNER
   GDPR compliant, não intrusivo, mobile-first
   Material Design 3 + OKLCH
   =================================== */

/* ==========================================================================
   1. BANNER CONTAINER
   ========================================================================== */

.cookie-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-notification);
  padding: var(--space-m);
  font-family: var(--md-sys-typescale-body-large-font);
  background: var(--md-sys-color-surface-container);
  border-top: var(--border-width) solid var(--md-sys-color-outline-variant);
  box-shadow: var(--shadow-top);
  transform: translateY(100%);
  transition: transform var(--duration-smooth) var(--ease-snappy);
}

/* ==========================================================================
   2. DARK THEME OVERRIDES
   ========================================================================== */

.dark-theme .cookie-banner {
  background: var(--md-sys-color-surface-container);
  border-top-color: var(--md-sys-color-outline-variant);
  box-shadow: var(--shadow-top-dark);
}

/* ==========================================================================
   3. VISIBILITY STATE
   ========================================================================== */

.cookie-banner--visible {
  transform: translateY(0);
}

/* ==========================================================================
   4. BANNER CONTENT
   ========================================================================== */

.cookie-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: var(--max-width-content, 1200px);
  margin: 0 auto;
}

.cookie-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cookie-banner__title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: var(--md-sys-typescale-title-small-weight);
  color: var(--md-sys-color-on-surface);
}

.dark-theme .cookie-banner__title {
  color: var(--md-sys-color-on-surface);
}

.cookie-banner__message {
  margin: 0;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--line-height-normal);
  color: var(--md-sys-color-on-surface-variant);
}

.dark-theme .cookie-banner__message {
  color: var(--md-sys-color-on-surface-variant);
}

/* ==========================================================================
   5. MESSAGE LINKS
   ========================================================================== */

.cookie-banner__message a {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-4xs);
}

.cookie-banner__message a:hover {
  color: var(--md-sys-color-primary-hover);
}

.cookie-banner__message a:focus-visible {
  outline: var(--outline-width) solid var(--md-sys-color-primary);
  outline-offset: var(--space-4xs);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.cookie-banner__message a:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   6. ACTIONS (BUTTONS)
   ========================================================================== */

.cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.cookie-banner__btn {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-m);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--md-sys-shape-corner-small);
  transition:
    background-color var(--duration-fast) var(--ease-snappy),
    color var(--duration-fast) var(--ease-snappy),
    border-color var(--duration-fast) var(--ease-snappy),
    transform var(--duration-fast) var(--ease-snappy),
    box-shadow var(--duration-fast) var(--ease-snappy);
}

.cookie-banner__btn:focus-visible {
  outline: var(--outline-width) solid var(--md-sys-color-primary);
  outline-offset: var(--space-4xs);
}

.cookie-banner__btn:focus:not(:focus-visible) {
  outline: none;
}

/* Accept Button (Primary) */
.cookie-banner__btn--accept {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border: none;
}

.cookie-banner__btn--accept:hover {
  background: var(--md-sys-color-primary-hover);
  box-shadow: 0 var(--space-4xs) var(--space-3xs) var(--shadow-soft);
  transform: translateY(calc(var(--space-4xs)*-1));
}

.cookie-banner__btn--accept:active {
  transform: translateY(0);
}

/* Reject Button (Outlined) */
.cookie-banner__btn--reject {
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  border: var(--border-width) solid var(--md-sys-color-outline);
}

.dark-theme .cookie-banner__btn--reject {
  color: var(--md-sys-color-on-surface-variant);
  border-color: var(--md-sys-color-outline);
}

.cookie-banner__btn--reject:hover {
  background: var(--md-sys-color-surface-container-highest);
}

.dark-theme .cookie-banner__btn--reject:hover {
  background: var(--md-sys-color-surface-container-highest);
}

/* ==========================================================================
   7. MEDIA QUERIES
   ========================================================================== */

/* MOBILE (≤768px) */

/* DESKTOP (≥768px) */

/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */

/* REDUCED MOTION - Regra universal aplicada em _reset.css */

/* Se prefers-reduced-motion: reduce está ativo, as transições são desativadas */
}
@layer utilities {
  .hidden-honeypot {
     display: none !important;
     opacity: 0;
     position: absolute;
     top: 0;
     left: 0;
     height: 0;
     width: 0;
     z-index: -1;
  }
}
@media (width > 360px){
  .segundopasso-main {
    padding: calc(40px + var(--space-m)) var(--space-lateral-mobile) 80px;
  }
  .segundopasso-card {
    padding: var(--space-m);
  }
  .segundopasso-card__badge {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-label-large);
  }
  .segundopasso-card__title {
    font-size: var(--font-size-headline-large);
  }

  .segundopasso-card__subtitle {
    font-size: var(--font-size-body-large);
  }
}
@media (width > 480px){
  .segundopasso-main {
    padding: calc(48px + var(--space-l)) var(--space-lateral-mobile) 120px;
  }
  .segundopasso-card {
    padding: var(--space-inset-card);
  }
  .segundopasso-card__actions {
    flex-direction: row;
  }

  .segundopasso-card__actions .btn {
    width: auto;
  }
  .segundopasso-plan-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .segundopasso-month-nav {
    padding: var(--space-xs);
  }
  .segundopasso-select {
    padding: var(--space-s) var(--space-xl) var(--space-s) var(--space-m);
    min-height: auto;
  }

  .segundopasso-month-selector .select-icon {
    right: var(--space-s);
  }
  .segundopasso-calendar-strip {
    gap: var(--space-s);
    padding: var(--space-s) 0;
    margin-inline: 0;
  }
  .segundopasso-time-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-s);
  }

  .segundopasso-time-slot {
    padding: var(--space-s) var(--space-m);
    font-size: var(--font-size-body-medium);
    min-height: auto;
    display: inline-block;
  }
  .segundopasso-welcome__steps::before {
    left: 23px;
  }
  .segundopasso-welcome__step-num {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-title-medium);
  }
  .segundopasso-scheduling__modes {
    flex-direction: row;
    gap: var(--space-m);
  }

  .segundopasso-scheduling__mode-card {
    padding: var(--space-m);
    min-height: auto;
    display: block;
  }

  .segundopasso-scheduling__mode-icon {
    font-size: var(--text-4xl);
  }
}
@media (width >= 480px) and (width <= 767px) and (orientation: landscape){
  .card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
  }
}
@media (width >=480px){
  .linktree-container {
    padding: var(--space-xl) var(--space-m);
  }

  .linktree-content-wrapper {
    gap: var(--space-xl);
    max-width: var(--max-width-linktree-desktop, 26.25rem);
  }

  .orb-1 {
    width: 320px;
    height: 320px;
  }

  .orb-2 {
    width: 260px;
    height: 260px;
  }

  .profile-name {
    font-size: var(--text-3xl);
  }

  .profile-title {
    font-size: var(--text-lg);
  }
}
@media (width >=577px) and (width <=767px){
  .faq-modal .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width >=600px){

  .form-field,
  .contact__form-field,
  .form-group {
    flex: 1 1;
    min-width: 240px;

    /* Minimum safety width before wrapping */
  }

  /* Full-width remains full-width */
  .form-row .form-field--full,
  .form-row .contact__form-field--full {
    flex: 1 1 100%;
  }
}
@media (width > 767px){
  .card,
  .card__body {
    justify-content: flex-start;
    justify-content: flex-start;
  }

  .sidebar-card {
    width: auto;
    max-width: none;
  }
}
@media (width > 768px){
  .btn-toggle,
  .toggle-btn {
    flex: none;
    min-width: auto;
    min-height: 32px;
    padding: var(--space-xs) var(--space-m);
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: none;
  }

  .btn-toggle.is-active,
  .toggle-btn.is-active,
  .btn-toggle.active,
  .toggle-btn.active,
  .btn-toggle[aria-expanded='true'],
  .toggle-btn[aria-expanded='true'] {
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--shadow-elevation-2);
  }
  .header-btn {
    min-width: 40px;
    min-height: 40px;
  }
  .btn--fab,
  .fab {
    width: var(--component-height-xl, 56px);
    height: var(--component-height-xl, 56px);
  }

  .btn--fab--left,
  .section-sidebar__toggle {
    bottom: var(--space-xl);
    left: var(--space-xl);
  }

  .btn--fab--right,
  .focus-mode-fab {
    bottom: var(--space-xl);
    right: var(--space-xl);
  }

  .btn--fab__caption,
  .fab__caption {
    display: block;
  }

  .btn {
    padding: var(--btn-padding-y, var(--button-padding-y-medium))
      var(--btn-padding-x, var(--button-padding-x-medium));
    font-size: var(--button-font-size-medium);
    transition:
      var(--transition-colors),
      var(--transition-transform),
      filter var(--duration-smooth) var(--ease-fluid);
  }

  .btn .iconify-icon,
  .btn .fa-icon {
    width: 1.2em;
    height: 1.2em;
    font-size: inherit;
  }

  .form-actions {
    flex-direction: row;
    gap: var(--space-l);
    padding: var(--space-xl) var(--space-l);
  }
  .articles-modal__header {
    padding: var(--space-l) var(--space-l) var(--space-s);
  }
  .articles-modal__filters-dropdown {
    width: 340px;
  }

  .articles-modal__filters-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-s);
    padding: var(--space-s);
  }
  .articles-modal__chip-filters {
    display: none;
  }
  .articles-modal__container {
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: var(--max-width-content-narrow, 62.5rem);
    height: 85dvh;
    max-height: 800px;
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-level4);
    transform: translate(-50%, -50%) scale(0.9) translateY(var(--space-l));
  }

  .articles-modal.is-open .articles-modal__container {
    animation: modalPopIn var(--duration-elegant) var(--ease-ethereal) forwards;
  }

  .articles-modal .modal__close {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
  }

  /* Grid 2 colunas desktop */
  .articles-modal__grid,
  .articles-modal__skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l);
  }

  /* Pesquisa expandida em desktop */
  .articles-modal__search-trigger {
    display: none;
  }

  .articles-modal__search-expanded {
    position: static;
    flex: 1 1;
    max-width: var(--max-width-modal-loading, 25rem);
    height: var(--touch-target-min);
    pointer-events: auto;
    background: var(--glass-card-bg);
    border: 1px solid var(--glass-border);
    opacity: 1;
    transform: none;
  }

  .articles-modal__search-close {
    display: none;
  }

  .articles-modal__search-icon {
    color: var(--md-sys-color-primary);
  }

  .articles-modal__filters-wrapper {
    flex: 0 0 auto;
    min-width: 200px;
  }

  /* Detail panel em desktop pode ter max-width maior */
  .articles-modal__detail-btn {
    width: auto;
  }
  .modal.modal--sidebar .tools-sidebar-content {
    position: relative;
    inset: 0 0 0 auto;
    width: 400px;
    max-width: 400px;
    height: 100%;
    max-height: 100%;
    border-radius: var(--md-sys-shape-corner-extra-large) 0 0 var(--md-sys-shape-corner-extra-large);
    transform: translateX(100%);

    /* Desliza da direita */
  }

  .modal.is-open .tools-sidebar-content {
    transform: translateX(0);
  }
  .form-row {
    flex-direction: row;
  }

  .contact__callback-input-wrapper {
    flex-direction: row;
    max-width: 440px;
  }

  .contact__callback-btn {
    width: auto;
    justify-content: flex-start;
  }

  input,
  select,
  textarea,
  .form-input,
  .form-select,
  .form-textarea {
    min-height: var(--component-height-medium);
  }

  .contact__form-container {
    max-width: 50rem;
    padding: var(--space-l);
    border-radius: var(--md-sys-shape-corner-extra-large);
  }

  .contact__form-container form {
    gap: var(--space-m);
  }

  .contact__form-field label {
    gap: var(--space-gap-micro);
    margin-bottom: var(--space-stack-xxs);
    font-size: var(--text-base);
  }

  textarea,
  .form-textarea {
    min-height: var(--textarea-min-height);
  }
  /* "Na zona" — Domicílio + Outdoor lado a lado */
  #zone-in:checked ~ #zone-pricing-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
  }

  #zone-in:checked ~ #zone-pricing-in .zone-pricing__section {
    margin-bottom: 0;
  }

  #zone-in:checked ~ #zone-pricing-in .zone-pricing__zones-footer {
    grid-column: 1 / -1;
    margin-top: var(--space-m);
  }

  /* "Fora da zona" — Mapa à esquerda, formulário à direita */
  #zone-out:checked ~ #zone-pricing-out {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-xl);
    align-items: start;
  }

  #zone-out:checked ~ #zone-pricing-out .zone-pricing__section--cta {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  #zone-out:checked ~ #zone-pricing-out #zone-pricing-form-state,
  #zone-out:checked ~ #zone-pricing-out #zone-pricing-success-state {
    grid-column: 2;
  }

  #zone-out:checked ~ #zone-pricing-out .zone-pricing__map {
    margin-bottom: 0;
  }

  #zone-out:checked ~ #zone-pricing-out .zone-pricing__cta-header {
    margin-bottom: var(--space-m);
  }

  /* Inputs e form mais confortáveis em desktop wide */
  .zone-pricing__form {
    gap: var(--space-l);
  }

  .zone-pricing__submit {
    min-height: 52px;
  }
  .community-controls {
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .community-search-wrapper {
    width: 200px;
    order: -1;
  }

  .community-search-wrapper:focus-within {
    width: 300px;
  }

  .community-search-input {
    opacity: 1;
  }
  .community-nav {
    justify-content: flex-end;
    overflow: visible;
    padding-right: 0;
  }
  .chat-container {
    border-radius: var(--md-sys-shape-corner-extra-large);
  }
  .calc-fc-layout {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }

  .calc-fc-inputs {
    padding-right: var(--space-xl);
    border-right: 1px solid var(--md-sys-color-outline-variant);
  }
  .hero.hero--expanded {
    justify-content: flex-start;
    padding-top: calc(var(--space-2xl)*2); /* Mantém espaçamento superior consistente */
    overflow: visible; /* Permite que o hero cresça com o hub expandido */
  }
  /* Header Structure */
  .hero__header-row {
    grid-template-columns: 1fr auto;
    gap: var(--space-l);
    justify-items: start;
    text-align: left;
  }

  .hero__header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Buttons */
  .hero__buttons-row {
    flex-direction: row;
    gap: var(--space-l);
    justify-content: flex-start;
  }
  .hero {
    justify-content: center;
  }

  .hero__title {
    font-size: var(--font-size-display-large);
    text-align: left;
  }

  .hero__subtitle {
    max-width: 90%;
    font-size: var(--text-lg);
    text-align: left;
  }

  .hero__image-container {
    max-width: var(--max-width-hero-image, 23.75rem);
  }

  .hero__cta,
  .hero__explanation-btn {
    width: auto;
    min-width: auto;
    max-width: none;
    padding: var(--btn-padding-y, var(--button-padding-y-medium)) var(--btn-padding-x, var(--button-padding-x-medium));
    font-size: var(--button-font-size-medium);
  }

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

  .hero__hub-header h3,
  .hero__hub-header h2 {
    font-size: var(--text-2xl);
    text-align: center;
  }

  .hero__hub-header p {
    font-size: var(--text-lg);
    text-align: center;
  }

  .hero__services-grid {
    gap: var(--space-l);
  }

  .hero__service-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    align-items: center;
    padding: var(--space-l);
    text-align: center;
    cursor: default;
  }

  .hero__service-icon {
    grid-row: auto;
    grid-column: auto;
    align-self: auto;
    font-size: var(--icon-size-xl);
  }

  .hero__service-title {
    grid-row: auto;
    grid-column: auto;
    align-self: auto;
    font-size: var(--text-base);
  }

  .hero__service-desc {
    grid-row: auto;
    grid-column: auto;
    font-size: var(--text-sm);
  }

  .hero__card-chevron {
    display: none;
  }

  .hero__comparison-table-wrapper {
    display: block;
    width: auto;
    margin: auto;
  }

  .hero__comparison-cards {
    display: none;
  }

  .hero__comparison-table th,
  .hero__comparison-table td {
    padding: var(--space-l);
    font-size: var(--text-sm);
  }

  /* Desktop overrides for mobile-first base */
  .hero__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
    background-color: var(--glass-overlay-bg);
    opacity: var(--opacity-hidden);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity var(--duration-smooth) var(--ease-fluid);
  }

  .hero__backdrop.visivel {
    display: none;
    pointer-events: auto;
    opacity: var(--opacity-visible);
  }

  .hero__expansible-fullwidth {
    display: none;
    position: relative; /* Remove o position: fixed herdado da base mobile */
    width: 100%;
    height: auto; /* Remove o 100dvh herdado */
    opacity: var(--opacity-hidden);
    transform: translateY(-1.25rem);
    transition:
      opacity var(--duration-elegant) var(--ease-ethereal),
      transform var(--duration-elegant) var(--ease-ethereal);
  }

  .hero__expansible-fullwidth.visivel {
    display: block;
    opacity: var(--opacity-visible);
    transform: translateY(0);
  }

  .hero__explanation-hub {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: var(--max-width-content);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
    margin-right: auto;
    margin-left: auto;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--shadow-rich-md);
  }

  .hero__service-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .hero__service-header {
    display: block;
  }

  .hero__service-desc-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s var(--ease-out-quint);
  }

  .hero__service-desc-wrapper > * {
    overflow: hidden;
  }

  .mobile-only {
    display: none;
  }
  .tools-teaser-content {
    flex-direction: row;
    gap: var(--space-l);
    align-items: center;
    text-align: left;
  }

  .tools-teaser-icon {
    flex-shrink: 0;
  }

  .tools-teaser-info {
    flex: 1 1;
  }

  .tools-teaser-btn {
    flex-shrink: 0;
    width: auto;
    margin-top: 0;
  }
  .segundopasso-header {
    padding: var(--space-m) var(--space-lateral);
  }
  .segundopasso-main {
    padding: calc(64px + var(--space-xl)) var(--space-lateral) 140px;
  }
  .segundopasso-card {
    padding: var(--space-xl);
  }
  .segundopasso-indicators {
    gap: var(--space-s);
    padding: var(--space-m);
  }
  .cookie-banner {
    padding: var(--space-l) var(--space-xl);
  }

  .cookie-banner__content {
    flex-direction: row;
    gap: var(--space-xl);
    align-items: center;
    justify-content: space-between;
  }

  .cookie-banner__text {
    flex: 1 1;
  }

  .cookie-banner__actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-sm);
  }
}
@media (width > 768px) and (width <=1024px){
  :root {
    --carousel-slide-width-tablet: 48%;
    --menu-grid-columns: 3;
    --menu-grid-item-min-width: 180px;
    --menu-grid-max-width: 850px;
    --menu-grid-gap: var(--space-l);
    --menu-grid-padding: var(--space-l);
  }
  .experience-columns__content {
    display: grid;

    /* Grelha ultra-compacta de 3x2 para tablets, servindo as opções de topo ("pills") */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-s) var(--space-m);
    width: 100%;
    margin-bottom: var(--space-m);

    /* Afastar a seleção da descrição abaixo */
    container-type: inline-size;
  }

  /* Navbar height optimized for tablet */
  .navbar {
    height: 4.5rem;
    min-height: 4.5rem;
  }

  /* Logo sizing */
  .navbar__logo {
    font-size: var(--text-lg);
  }

  /* Hamburger button with proper touch target */
  .navbar-burger {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* Mobile menu padding for tablets */
  .navbar__menu {
    padding-top: calc(4.5rem + var(--space-s));
  }
  .articles-modal__container {
    width: 90%;
    max-width: 56rem;
  }

  .articles-modal__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l);
  }

  .articles-modal__card {
    padding: var(--space-l);
  }

  .articles-modal__card-title {
    font-size: var(--text-lg);
  }

  .articles-modal__filters-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-s);
  }

  .articles-modal__filter-item {
    min-height: 44px;
    padding: var(--space-s) var(--space-m);
  }

  .articles-modal__header {
    padding: var(--space-l) 0;
  }

  .articles-modal__title {
    font-size: var(--text-2xl);
  }

  .articles-modal__search-expanded {
    max-width: 18rem;
  }

  .articles-modal__close-btn {
    width: 44px;
    height: 44px;
  }

  .articles-modal__read-more {
    min-height: 44px;
    padding: var(--space-s) var(--space-l);
  }

  .articles-modal__tag {
    min-height: 32px;
    padding: var(--space-xs) var(--space-s);
    font-size: var(--text-xs);
  }

  .articles-modal__grid,
  .articles-modal__filters-list,
  .articles-modal__article-card {
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Contact form: centrar em tablet */
  .contact__form-container {
    max-width: 40rem;
  }

  /* 2-Column layout with responsive wrapping */
  .form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-l);
  }

  .form-field,
  .contact__form-field,
  .form-group {
    flex: 1 1 280px;
    min-width: 280px;
  }

  /* Forced full-width remains full width */
  .form-row .form-field--full,
  .form-row .contact__form-field--full {
    flex: 1 1 100%;
  }

  /* Input height optimized for tablet touch interaction */
  input[type='text'],
  input[type='email'],
  input[type='tel'],
  input[type='url'],
  input[type='date'],
  input[type='number'],
  select,
  textarea,
  .form-input,
  .form-control,
  .form-select,
  .form-textarea {
    min-height: 52px;
  }

  /* Textarea height balance */
  textarea,
  .form-textarea {
    min-height: 110px;
  }

  /* Enhanced touch targets for checkboxes */
  .checkbox-label-wrapper {
    gap: var(--space-l);
    padding: var(--space-m) var(--space-l);
  }

  .checkbox-custom {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }

  /* Submit button & actions */
  .section-actions {
    margin-top: var(--space-l);
  }

  .btn--large {
    min-height: 52px;
    padding: var(--space-m) var(--space-xl);
    font-size: var(--text-lg);
  }

  /* Guardian section styling */
  .guardian-container {
    padding: var(--space-l);
    margin-top: var(--space-l);
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
  }

  .guardian-title {
    margin-bottom: var(--space-m);
    font-size: var(--text-base);
  }

  /* Focus ring enhancement for tablet */
  input:focus,
  select:focus,
  textarea:focus,
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    box-shadow:
      0 0 0 4px oklch(from var(--md-sys-color-primary) l c h / 25%),
      var(--shadow-inset-sm);
  }

  /* Error state focus enhancement */
  input:invalid:focus,
  textarea:invalid:focus,
  .form-input--error:focus,
  .form-textarea--error:focus {
    box-shadow:
      0 0 0 4px oklch(from var(--md-sys-color-error) l c h / 25%),
      var(--shadow-inset-sm);
  }

  /* Improved hover states for tablet */
  .checkbox-label-wrapper:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
  }

  /* Form label optimization */
  .form-label,
  .contact__form-field label {
    margin-bottom: var(--space-s);
    font-size: var(--text-sm);

    /* Slightly smaller for tablet */
  }

  /* Icon sizing in labels */
  .form-label iconify-icon,
  .contact__form-field label iconify-icon {
    font-size: 1.125rem;

    /* 18px - better proportion on tablet */
  }
  .gemini-chat-widget {
    /* Position with proper margin from edge */
    right: 1.5rem;
    bottom: 7.25rem;

    /* Responsive dimensions balanced for all tablets */
    width: clamp(23.75rem, 45vw, 30rem);
    height: clamp(37.5rem, 72dvh, 50rem);

    /* Smooth transition */
    transition:
      opacity var(--duration-elegant) var(--ease-ethereal),
      transform var(--duration-elegant) var(--ease-ethereal),
      width var(--duration-smooth) var(--ease-fluid),
      height var(--duration-smooth) var(--ease-fluid);
  }

  /* FAB button - adjust position */
  .chat-fab-btn {
    right: 1.5rem;
    bottom: 6rem;
  }

  /* Header & Action buttons - Larger touch targets */
  .chat-header {
    padding: var(--space-xl);
  }

  .header-btn,
  .chat-send-btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .chat-send-btn {
    right: var(--space-m);
  }

  /* Enhanced spacing for messages */
  .chat-messages {
    gap: var(--space-xl);
    padding: var(--space-xl) clamp(var(--space-xl), 5vw, var(--space-2xl));
  }

  .message-user,
  .message-bot {
    max-width: 80%;
    padding: var(--space-l) clamp(var(--space-xl), 5vw, var(--space-2xl));
  }

  .chat-input-field {
    padding: var(--space-m) var(--space-xl);
    font-size: var(--text-base);
  }

  .chat-footer {
    padding: var(--space-xl) clamp(var(--space-xl), 5vw, var(--space-2xl));
  }

  .bot-avatar {
    width: 2.75rem;
    height: 2.75rem;
  }

  .mic-visualizer {
    width: clamp(8rem, 15dvh, 10rem);
    height: clamp(8rem, 15dvh, 10rem);
    font-size: var(--text-5xl);
  }

  .voice-transcription-container {
    max-width: 30rem;
  }
  .experience-columns {
    min-width: 300px;
  }
  .experience-flip-scene {
    perspective: 1600px;
  }

  .experience-flipper {
    min-height: 32rem;
    cursor: default;

    /* Flip controlled via JS/Buttons */
  }

  .experience-face--front .experience-image,
  .experience-face--back .experience-image {
    max-height: 22rem;
  }

  .experience-title {
    font-size: var(--text-3xl);
  }

  .experience-description {
    font-size: var(--text-lg);
  }

  /* Stats grid optimized for tablet */
  .experience-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
  .linktree-content-wrapper {
    max-width: var(--max-width-linktree-tablet, 32.5rem);
    padding: var(--space-m);
  }

  .profile-avatar {
    width: 96px;
    height: 96px;
  }
  /* Tablet-specific helpers */
  .hide-tablet {
    display: none;
  }

  .show-tablet {
    display: block;
  }

  .show-tablet-flex {
    display: flex;
  }

  .show-tablet-grid {
    display: grid;
  }

  /* Esconde tablet-only fora deste range */
}
@media (width > 768px) and (width <=1024px) and (hover: none) and (pointer: coarse){

  /* Enhanced touch targets for tablet touch devices */
  .header-btn {
    width: 3rem;
    height: 3rem;
  }

  .chat-send-btn {
    width: 3rem;
    height: 3rem;
  }

  /* Larger tap targets for better touch interaction */
  .message-user,
  .message-bot {
    padding: var(--space-l) var(--space-2xl);
  }

  /* Voice action button - larger for touch */
  .voice-action-btn {
    padding: 1rem 2rem;
    font-size: var(--text-base);
  }
}
@media (width > 768px) and (width <=1024px) and (orientation: portrait){
  .hero__header-row {
    grid-template-columns: 1fr;

    /* Força Stacked igual mobile */
    place-items: center center;
    text-align: center;
    grid-template-columns: 1fr;
    place-items: center center;
    text-align: center;
  }

  .hero__header-text {
    display: contents;
    align-items: center;

    /* Restaura alinhamento centro */
    text-align: center;

    /* Permite controlar o order com o wrapper pai */
    display: contents;
    text-align: center;
  }

  .hero__title {
    order: 1;
    text-align: center;
    order: 1;
    text-align: center;
  }

  .hero__subtitle {
    order: 3;
    text-align: center;
    order: 3;
    max-width: 100%;
    text-align: center;
  }

  .hero__image-container {
    order: 2;
    max-width: 25rem;

    /* Ajuste ligeiramente maior que mobile (17.5rem) mas menor que desktop */
    margin: var(--space-l) auto;
    order: 2;
    max-width: 25rem;
    margin: var(--space-l) auto;
  }

  .hero__buttons-row {
    justify-content: center;
    order: 4;
    order: 4;
    justify-content: center;
  }
}
@media (width >= 768px) and (width <= 1024px){
  .blog-card,
  .servico-card,
  .card {
    align-items: flex-start;
    text-align: left;
  }
}
@media (width > 1024px){
  html {
    scroll-padding-top: var(--space-l);
  }
  [id] {
    scroll-margin-top: 80px;
  }
  .experience-columns__content {
    display: grid;
    flex: 1 1;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s) var(--space-l);

    /* Ocupar altura disponível */
    align-content: space-between;

    /* Distribuir linhas verticalmente */
    height: 100%;

    /* Garantir altura total para distribuição */
  }

  .experience-column {
    height: auto;
    min-height: 160px;
    pointer-events: auto;
    cursor: pointer;
    transition:
      background-color var(--duration-smooth) var(--ease-fluid),
      transform var(--duration-smooth) var(--ease-fluid);
  }

  @media (hover: hover) {
    .experience-column:hover {
      background-color: var(--state-hover-surface);
      transform: translateY(-2px);
    }
  }
  .navbar__links {
    display: flex;
  }

  .navbar-burger {
    display: none;
  }
  .navbar {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    box-shadow: none;
  }

  .navbar.navbar--scrolled {
    position: fixed;
    background: var(--md-sys-color-surface);
    box-shadow: var(--md-sys-elevation-level2);
  }

  /* ✅ Em desktop largo, previne que elementos saiam do container */
  .navbar__right {
    min-width: max-content;
  }
  /* =========================================
     1. GRID SYSTEMS
     ========================================= */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    align-items: stretch;
    container-type: inline-size;
  }

  #servicos-cards {
    grid-template-rows: auto 1fr auto;
  }

  #servicos-cards .card {
    display: grid;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    grid-template-rows: subgrid;
    grid-row: span 3;
    height: auto;
    padding-bottom: 0;
  }

  /* Note: #servicos-cards .card-text removed - ID not in use */

  /* =========================================
     2. TIMELINE STRUCTURE & WRAPPERS
     ========================================= */
  .timeline-container {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Hide Mobile Elements */
  .line-wrapper,
  .step-dot,
  .step-label {
    display: none;
  }

  /* Step Wrapper (Flex Item) */
  .step-wrapper {
    flex: 1 1;
    width: auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    transition: flex var(--duration-smooth) var(--ease-fluid);

    /* PERF: Removed will-change: flex - causes layout thrashing */
  }

  .step-wrapper.expanded {
    flex: 2 1;
  }

  /* =========================================
     3. STEP CARD COMPONENT (BASE & STATES)
     ========================================= */
  .step-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    /* Dimensions */
    width: 100%;
    height: 360px;
    padding: var(--space-l) var(--space-m);
    margin: 0;

    /* Containment para backdrop-filter com animação */
    contain: layout style paint;
    overflow: hidden;
    pointer-events: auto;

    /* Interaction */
    cursor: pointer;

    /* Appearance */
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-extra-large);

    /* Animation Initial State */
    opacity: var(--opacity-hidden);
    filter: grayscale(0);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(30px);

    /* Transitions */
    transition:
      height var(--duration-smooth) var(--ease-ethereal),
      background-color var(--duration-smooth) var(--ease-fluid),
      transform var(--duration-smooth) var(--ease-ethereal),
      opacity var(--duration-smooth) var(--ease-fluid);

    /* PERF: will-change removed - height animation causes reflow */
  }

  /* Expanded State */
  .step-wrapper.expanded .step-card {
    z-index: var(--z-dropdown);
    height: 520px;
    background: var(--md-sys-color-surface-container);
  }

  /* =========================================
     4. TYPOGRAPHY & INNER CONTENT
     ========================================= */

  /* Background Number (Pseudo-element) */
  .step-card::before {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: var(--z-base);
    font-family: var(--font-family-primary), 'Segoe UI', sans-serif;
    font-size: clamp(3.5rem, 8vw, 6rem);
    font-weight: var(--font-weight-black);
    line-height: var(--leading-none);
    color: rgb(from var(--md-sys-color-on-surface) r g b / 12%);
    transition:
      opacity var(--duration-smooth) var(--ease-fluid),
      transform var(--duration-smooth) var(--ease-fluid),
      color var(--duration-smooth) var(--ease-fluid);
  }

  /* Headings */
  .step-card h3 {
    position: relative;
    z-index: var(--z-elevated);
    margin-bottom: var(--space-s);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--md-sys-color-on-surface);
    transition:
      opacity var(--duration-smooth) var(--ease-fluid),
      transform var(--duration-smooth) var(--ease-fluid),
      color var(--duration-smooth) var(--ease-fluid);
  }

  .step-wrapper.expanded .step-card--blue h3 {
    color: var(--brand-primary-blue);
  }

  .step-wrapper.expanded .step-card--green h3 {
    color: var(--brand-tertiary-green);
  }

  .step-wrapper.expanded .step-card--orange h3 {
    color: var(--brand-warning-orange);
  }

  .step-wrapper.expanded .step-card--purple h3 {
    color: var(--brand-primary-gold);
  }

  .step-wrapper.expanded .step-card--blue .step-label {
    color: var(--brand-primary-blue);
  }

  .step-wrapper.expanded .step-card--green .step-label {
    color: var(--brand-tertiary-green);
  }

  .step-wrapper.expanded .step-card--orange .step-label {
    color: var(--brand-warning-orange);
  }

  .step-wrapper.expanded .step-card--purple .step-label {
    color: var(--brand-primary-gold);
  }

  /* Body Text */
  .step-card p {
    position: relative;
    z-index: var(--z-elevated);
    margin-top: var(--space-s);
    font-size: var(--text-base);
    line-height: var(--line-height-relaxed);
    color: var(--md-sys-color-on-surface-variant);
    transition:
      opacity var(--duration-smooth) var(--ease-fluid),
      transform var(--duration-smooth) var(--ease-fluid),
      color var(--duration-smooth) var(--ease-fluid);
  }

  /* =========================================
     5. STEP ANIMATIONS (ENTRANCE)
     ========================================= */

  /* Animation Delays */
  .step-wrapper.step-1 .step-card {
    animation: cardFadeIn var(--duration-elegant) var(--ease-fluid) forwards 0.1s;
  }

  .step-wrapper.step-2 .step-card {
    animation: cardFadeIn var(--duration-elegant) var(--ease-fluid) forwards 0.3s;
  }

  .step-wrapper.step-3 .step-card {
    animation: cardFadeIn var(--duration-elegant) var(--ease-fluid) forwards 0.5s;
  }

  .step-wrapper.step-4 .step-card {
    animation: cardFadeIn var(--duration-elegant) var(--ease-fluid) forwards 0.7s;
  }

  /* Number Injection */
  .step-wrapper.step-1 .step-card::before {
    content: '01';
  }

  .step-wrapper.step-2 .step-card::before {
    content: '02';
  }

  .step-wrapper.step-3 .step-card::before {
    content: '03';
  }

  .step-wrapper.step-4 .step-card::before {
    content: '04';
  }

  /* =========================================
     6. HOVER INTERACTIONS
     ========================================= */
  .step-card:hover {
    background: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level1);
    transform: translateY(-10px);
  }

  .step-card:hover::before {
    opacity: 0.25;
    transform: translateY(-12px) scale(1.08);
  }

  .step-card:hover h3 {
    transform: translateY(-5px);
  }

  .step-card:hover p {
    color: var(--md-sys-color-on-surface);
  }

  /* =========================================
     7. CONTENT VISIBILITY (MOBILE vs DESKTOP)
     ========================================= */
  .step-description--mobile {
    display: none;
  }

  .step-benefits {
    display: block;
    margin-bottom: var(--space-m);
  }

  .step-description--desktop {
    display: block;
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: var(--opacity-hidden);
    transform: translateY(10px);
    transition:
      opacity var(--duration-smooth) var(--ease-fluid),
      transform var(--duration-smooth) var(--ease-fluid);
  }

  .step-wrapper.expanded .step-description--desktop {
    visibility: visible;
    max-height: 300px;
    opacity: var(--opacity-visible);
    transform: translateY(0);
    transition:
      max-height var(--duration-smooth) var(--ease-fluid) 0.2s,
      opacity var(--duration-smooth) var(--ease-fluid) 0.2s,
      transform var(--duration-smooth) var(--ease-fluid) 0.2s,
      visibility var(--duration-smooth) linear 0.2s;
  }

  /* =========================================
     8. COLOR VARIANTS
     ========================================= */

  /* Blue Variant */
  .step-card--blue {
    border-color: rgb(var(--brand-primary-blue-rgb, 0, 90, 153), 0.3);
  }

  .step-card--blue:hover {
    border-color: var(--brand-primary-blue);
    box-shadow: var(--md-sys-elevation-level1);
  }

  .step-card--blue:hover::before,
  .step-card--blue:hover h3 {
    color: var(--brand-primary-blue);
  }

  /* Green Variant */
  .step-card--green {
    border-color: rgb(var(--brand-tertiary-green-rgb, 0, 108, 76), 0.3);
  }

  .step-card--green:hover {
    border-color: var(--brand-tertiary-green);
    box-shadow: var(--md-sys-elevation-level1);
  }

  .step-card--green:hover::before,
  .step-card--green:hover h3 {
    color: var(--status-success);
  }

  /* Orange Variant */
  .step-card--orange {
    border-color: rgb(var(--brand-warning-orange-rgb, 255, 152, 0), 0.3);
  }

  .step-card--orange:hover {
    border-color: var(--brand-warning-orange);
    box-shadow: var(--md-sys-elevation-level1);
  }

  .step-card--orange:hover::before,
  .step-card--orange:hover h3 {
    color: var(--brand-warning-orange);
  }

  /* Purple Variant */
  .step-card--purple {
    border-color: rgb(var(--brand-primary-gold-rgb, 103, 80, 164), 0.3);
  }

  .step-card--purple:hover {
    border-color: var(--brand-primary-gold);
    box-shadow: var(--md-sys-elevation-level1);
  }

  .step-card--purple:hover::before,
  .step-card--purple:hover h3 {
    color: var(--brand-primary-gold);
  }

  /* =========================================
     9. CONTAINER ACTIONS
     ========================================= */
  .action-container {
    display: flex;
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: var(--space-xl);
    opacity: var(--opacity-visible);
    animation: none;
  }

  .action-container .btn {
    max-width: var(--max-width-action-button, 21.875rem);
  }
  .dark-theme .modal__content {
    box-shadow:
      0 8px 32px oklch(0% 0 0deg / 50%),
      0 4px 16px oklch(0% 0 0deg / 30%);
  }

  /* Layout */
  .about-project__container {
    flex-direction: row;
    gap: var(--space-xl);
    min-height: 500px;
  }

  .about-project__nav {
    width: 35%;
  }

  /* Monitoring Info - Desktop */
  .about-monitoring-info {
    align-self: flex-start;
  }

  /* Components visibility */
  .about-project-panel {
    display: none !important;
  }

  .about-project-display.card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  /* Button States */
  .about-project-btn__chevron {
    display: none;
  }

  .about-project-btn__arrow {
    display: block;
  }

  .about-project-btn.is-active .about-project-btn__arrow {
    opacity: 1;
    transform: translateX(0);
  }

  /* Links */
  .link-seta {
    display: inline-flex;

    /* Show only on desktop */
  }
  .exp-flipper__image-container {
    height: 30rem;
  }
  .experience-flip-scene {
    perspective: 1800px;
  }

  .experience-flipper {
    min-height: 36rem;
    cursor: default;
  }

  .experience-face--front .experience-image,
  .experience-face--back .experience-image {
    max-height: 26rem;
  }

  .experience-title {
    font-size: var(--text-4xl);
  }

  .experience-description {
    font-size: var(--text-lg);
  }

  /* Stats grid for desktop */
  .experience-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
  /* Garante desktop-only visível (já é flex por padrão, mas garante consistência) */
  .desktop-only {
    display: flex;
  }

  /* Desktop-specific helpers */
  .hide-desktop {
    display: none;
  }

  .show-desktop {
    display: block;
  }

  .show-desktop-flex {
    display: flex;
  }

  .show-desktop-grid {
    display: grid;
  }
}
@media (width > 1024px) and (width <= 1350px){
  .navbar__logo {
    margin-inline-end: var(--space-m);
    font-size: var(--text-base);
  }

  .navbar__links {
    gap: var(--space-s);
  }

  .navbar__link {
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-xs);
    font-size: var(--text-sm);
  }

  .navbar__right {
    gap: var(--space-s);
    min-width: auto;
  }

  .dropdown-arrow {
    margin-inline-start: 1px;
    font-size: 0.7em;
  }
}
@media (min-width: 1025px){
  .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .blog-card {
    height: 100%;
  }

  .blog-card__content {
    display: flex;
    flex-direction: column;
    flex: 1 1;
  }

  .blog-card__title {
    margin-bottom: var(--space-l);
  }

  .blog-card__excerpt {
    flex: 1 1; /* Ocupa o espaço livre restante */
    margin-bottom: var(--space-l);
  }

  .blog-card__meta {
    margin-top: auto; /* Empurra o rodapé firmemente para o fundo do cartão */
  }
}
@media (width <=1024px){
  .carousel,
  .carousel__slide {
    contain: layout style paint;
    content-visibility: auto;
  }
  .navbar__link:active {
    box-shadow: var(--md-sys-elevation-level0);
    transform: translateY(1px) scale(0.98);
    transition: transform var(--duration-fast) var(--ease-snappy);
  }

  /* ✅ FIX: Excluir carrossel nativo para não interferir com efeito do card ativo
     O carrossel nativo (.carousel--native) tem o seu próprio sistema de destaque
     gerido via JS com a classe .active, que não deve ser sobreposto pelo :active */
  .carousel:not(.carousel--native) .carousel__slide:active {
    box-shadow: var(--md-sys-elevation-level1);
    transform: translateY(-2px) scale(0.98);
    transition: transform var(--duration-fast) var(--ease-snappy);
  }
    /* Footer */
    .footer,
    .navbar__menu {
      padding-bottom: max(var(--space-m), env(safe-area-inset-bottom));
    }

    /* Botão flutuante */
    .botao-recrutamento-flutuante {
      right: max(20px, env(safe-area-inset-right));
      bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
    }

    /* Modal fechar - agora usa safe-area do _modal-base.css */
  .navbar__links {
    display: none;
  }

  .navbar-burger {
    display: flex;
    position: relative;
    z-index: var(--z-drawer-supreme);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    outline: none;

    /* 10009 - Sempre acima do menu mobile */
    background: transparent;
    border: none;
    transition: color var(--duration-fast) var(--ease-snappy);
  }
  .navbar {
    z-index: var(--z-sticky);

    /* ✅ Previne cortes em edge de ecrã */
    box-sizing: border-box;
    height: auto;

    /* ✅ Altura responsiva que se adapta a todos os dispositivos */
    min-height: var(--height-component-xl);

    /* ✅ Fallback para Android (env não funciona) com valor seguro */
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--md-sys-color-outline-variant);

    /* ✅ Padding lateral responsivo - reduz em ecrãs pequenos */

    /* Background herdado do base */

    /* Containment — isola compositing do backdrop-filter */
    contain: layout style paint;

    /* ✅ Backdrop filter com fallback para browsers antigos */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    /* ✅ Mobile: transição com transform incluído */
    transition:
      background-color var(--duration-smooth) var(--ease-fluid),
      border-color var(--duration-smooth) var(--ease-fluid),
      transform var(--duration-smooth) var(--ease-fluid);

    /* ✅ Previne problemas de composição em Android */
  }

  /* ✅ Menu aberto - navbar fica visível e transparente */
  .navbar--menu-open .navbar {
    z-index: var(--z-max);
    contain: none;
    background: transparent;
    border-bottom: 1px solid transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    /* ✅ Remove transform hidden quando menu está aberto */
    transform: translateY(0);
  }

  /* ✅ Navbar escondida em mobile - mesma lógica que desktop */
  .navbar--hidden {
    transform: translateY(-100%);
  }

  /* Interaction Tweaks */
  .navbar-burger,
  .language-btn,
  .theme-toggle {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .navbar-burger iconify-icon {
    position: absolute;
    font-size: var(--icon-size-lg);
    transition:
      transform var(--duration-smooth) cubic-bezier(0.4, 0, 0.2, 1),
      opacity var(--duration-smooth) cubic-bezier(0.4, 0, 0.2, 1),
      color var(--duration-smooth) cubic-bezier(0.4, 0, 0.2, 1);
  }

  .navbar-burger .icon-menu {
    opacity: var(--opacity-visible);
    transform: rotate(0deg) scale(1);
  }

  .navbar-burger .icon-close {
    opacity: var(--opacity-hidden);
    transform: rotate(-90deg) scale(0.5);
  }

  .navbar-burger.is-active {
    color: white;
  }

  .navbar-burger.is-active .icon-menu {
    opacity: var(--opacity-hidden);
    transform: rotate(90deg) scale(0.5);
  }

  .navbar-burger.is-active .icon-close {
    opacity: var(--opacity-visible);
    transform: rotate(0deg) scale(1);
  }

  .navbar__menu {
    position: fixed;
    top: 0;
    right: 0;

    /* Containment — isola paint do menu overlay */
    contain: layout style paint;
    left: 0;
    z-index: var(--z-drawer-supreme);
    display: flex;
    visibility: hidden;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;

    /* Bloqueia interação quando fechado */
    pointer-events: none;

    /* Espaçamento calculado para notch e área segura */
    padding: 0;

    /* Fallback se o conteúdo exceder 100dvh */
    overflow: hidden auto;

    /* Removido padding para ser gerido pelo inner container */
    overscroll-behavior: contain;
    background: linear-gradient(160deg,
        var(--md-sys-color-primary) 0%,
        oklch(from var(--md-sys-color-primary) 40% c h) 100%);
    opacity: var(--opacity-hidden);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition:
      opacity var(--duration-elegant) var(--ease-ethereal),
      visibility var(--duration-elegant) var(--ease-ethereal);
    transform: scale(0);
    transform-origin: 100% 0;
    transition:
      opacity var(--duration-elegant) var(--ease-ethereal),
      visibility var(--duration-elegant) var(--ease-ethereal),
      transform var(--duration-elegant) var(--ease-ethereal);
  }

  /* clip-path substituído por transform+scale — compositing-friendly em mobile */

  .navbar__menu-inner {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: calc(3rem + env(safe-area-inset-top)) var(--space-l) env(safe-area-inset-bottom);
  }

  .navbar__menu.is-active {
    visibility: visible;
    opacity: var(--opacity-visible);
    transform: scale(1);
    pointer-events: auto;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2dvh, 24px);
    align-items: center;
    width: 100%;
    list-style: none;
  }

  .nav-links li {
    display: flex;
    justify-content: center;
    width: 100%;
    opacity: var(--opacity-hidden);
    transform: translateY(15px);
    transition: var(--duration-smooth) var(--ease-fluid);
  }

  .nav-links a {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    justify-content: center;

    /* Aumentado para melhor touch target */
    width: 100%;
    padding: var(--space-s) 0;
    font-size: var(--text-2xl);
    font-weight: 600;
    color: white;
    text-decoration: none;
  }

  .nav-links a iconify-icon {
    font-size: var(--icon-size-lg);
    opacity: 0.8;
  }

  /* Mobile: Link ativo (ScrollSpy) */
  .nav-links a.is-active,
  .mobile-nav-link.is-active {
    color: white;
    text-shadow: 0 0 20px oklch(100% 0 0deg / 40%);
    transform: scale(1.03);
  }

  .nav-links a.is-active iconify-icon {
    opacity: 1;
    filter: drop-shadow(0 0 6px oklch(100% 0 0deg / 50%));
  }

  /* App Link Special - Mobile */
  .navbar__menu .nav-links .navbar__link--app-mobile {
    padding: var(--space-m) var(--space-l);
    margin-block-start: var(--space-s);
    background: var(--white-alpha-15);
    border: 1px solid var(--white-alpha-20);
    border-radius: var(--md-sys-shape-corner-medium);
  }

  .navbar__menu.is-active .nav-links li:nth-child(1) {
    transition-delay: 0.1s;
  }

  .navbar__menu.is-active .nav-links li:nth-child(2) {
    transition-delay: 0.15s;
  }

  .navbar__menu.is-active .nav-links li:nth-child(3) {
    transition-delay: 0.2s;
  }

  .navbar__menu.is-active .nav-links li:nth-child(4) {
    transition-delay: 0.25s;
  }

  .navbar__menu.is-active .nav-links li:nth-child(5) {
    transition-delay: 0.3s;
  }

  .navbar__menu.is-active .nav-links li:nth-child(6) {
    transition-delay: 0.35s;
  }

  .navbar__menu.is-active .nav-links li:nth-child(7) {
    transition-delay: 0.4s;
  }

  .navbar__menu.is-active .nav-links li {
    opacity: var(--opacity-visible);
    transform: translateY(0);
  }

  /* MOBILE NAV GROUP & SUBMENU ACORDEÃO */
  .mobile-nav-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Container wrapper para link + botão */
  .mobile-nav-trigger {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    width: 100%;
  }

  /* Link de navegação (sem seta) */
  .mobile-nav-link {
    display: flex;
    flex: 1 1;
    gap: var(--space-s);
    align-items: center;
  }

  /* Botão de toggle do submenu (só seta) */
  .mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-s);
    color: inherit;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: background-color var(--duration-fast) var(--ease-snappy);
  }

  .mobile-submenu-arrow {
    font-size: var(--text-xs);
    transition: transform var(--duration-smooth) var(--ease-fluid);
  }

  .mobile-submenu-arrow--expanded {
    transform: rotate(180deg);
  }

  /* Estados do submenu acordeão */
  .mobile-submenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    list-style: none;
    background: var(--black-alpha-05);
    border-radius: var(--md-sys-shape-corner-medium);
    transition:
      max-height var(--duration-smooth) var(--ease-fluid),
      opacity var(--duration-smooth) var(--ease-fluid);
  }

  /* ✅ Itens do submenu com animação cascata */
  .mobile-submenu li {
    width: 100%;
    opacity: var(--opacity-hidden);
    transform: translateY(10px);
    transition:
      opacity var(--duration-smooth) var(--ease-fluid),
      transform var(--duration-smooth) var(--ease-fluid);
  }

  /* ✅ Quando o submenu está expandido, os itens animam em cascata */
  .mobile-submenu.is-expanded li {
    opacity: var(--opacity-visible);
    transform: translateY(0);
  }

  /* Delays escalonados para cada item do submenu */
  .mobile-submenu.is-expanded li:nth-child(1) {
    transition-delay: 0.05s;
  }

  .mobile-submenu.is-expanded li:nth-child(2) {
    transition-delay: 0.1s;
  }

  .mobile-submenu.is-expanded li:nth-child(3) {
    transition-delay: 0.15s;
  }

  .mobile-submenu.is-expanded li:nth-child(4) {
    transition-delay: 0.2s;
  }

  .mobile-submenu.is-expanded li:nth-child(5) {
    transition-delay: 0.25s;
  }

  .mobile-submenu a,
  .mobile-submenu button {
    justify-content: center;
    padding: var(--space-s) 0;
    font-size: var(--text-base);
    opacity: var(--opacity-strong);
  }

  .mobile-submenu button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    width: 100%;
    text-align: center;
    font-family: inherit;
    line-height: inherit;
  }

  .mobile-submenu.is-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    pointer-events: none;
    opacity: var(--opacity-hidden);
  }

  .mobile-submenu.is-expanded {
    max-height: 500px;
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
    margin-top: var(--space-s);
    pointer-events: auto;
    opacity: var(--opacity-visible);
  }

  .overlay-footer {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3dvh, 32px);
    align-items: center;

    /* Espaçamento elástico e simétrico interno */
    width: 100%;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));

    /* ✅ Agora gerido pelo space-evenly do .navbar__menu-inner */
    margin-top: 0;
    margin-bottom: 0;
    opacity: var(--opacity-hidden);
    transform: translateY(20px);
    transition:
      opacity var(--duration-smooth) var(--ease-fluid),
      transform var(--duration-smooth) var(--ease-fluid);
  }

  .navbar__menu.is-active .overlay-footer {
    opacity: var(--opacity-visible);
    transform: translateY(0);
    transition-delay: 0.4s;
  }

  .nav-social-links {
    display: flex;
    gap: var(--space-m);
    justify-content: center;
    margin-bottom: 0;
  }

  .nav-social-links a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    color: white;
    text-decoration: none;
    background: var(--white-alpha-15);
    border-radius: 50%;

    /* Improved Entrance Animation */
    opacity: var(--opacity-hidden);
    transform: scale(0.5) translateY(20px);
    transition:
      background-color var(--duration-fast) var(--ease-snappy),
      transform var(--duration-smooth) var(--ease-fluid),
      opacity var(--duration-smooth) var(--ease-fluid);
  }

  /* Staggered entry for social icons */
  .navbar__menu.is-active .nav-social-links a {
    opacity: var(--opacity-visible);
    transform: scale(1) translateY(0);
  }

  .navbar__menu.is-active .nav-social-links a:nth-child(1) {
    transition-delay: 0.45s;
  }

  .navbar__menu.is-active .nav-social-links a:nth-child(2) {
    transition-delay: 0.5s;
  }

  .nav-social-links a:hover {
    color: white;
    background: var(--white-alpha-25);
    box-shadow: 0 4px 12px oklch(100% 0 0deg / 15%);
    transform: scale(1.08) translateY(-2px);
  }

  .nav-social-links a:active {
    background: rgb(255 255 255 / 25%);
    box-shadow: 0 2px 6px oklch(100% 0 0deg / 10%);
    transform: scale(0.95);
  }

  .nav-social-links a:hover iconify-icon {
    color: white;
  }

  /* Browser Specific Overrides (Mobile) */

  /* Edge Android - Bottom padding problemático */
  @media (height <=800px) {
    body {
      overscroll-behavior-y: none;
    }

    .navbar {
      margin-bottom: env(safe-area-inset-bottom, 0);
    }
  }
  .carousel--native .carousel__slide {
    width: 340px;

    /* Ligeiramente menor em tablets */
    min-height: 226px;

    /* 340 / 1.5 */
  }

  /* Intro Text */
  .about-project__intro {
    margin-bottom: var(--space-xl);
    font-size: var(--text-base);
    text-align: left;
  }

  .differentiation-box {
    width: 100%;
    text-align: center;
  }

  .differentiation-box__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
    justify-items: center;
  }

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

  .differentiation-box__text,
  .differentiation-box__subtitle {
    padding-inline: 0;
    text-align: center;
  }

  /* Buttons */
  .about-project-btn[aria-expanded='true'] {
    border-bottom-color: transparent;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  /* Mobile Panel - Otimizado para centragem */
  .about-project-item {
    scroll-margin: 30vh 0;

    /* Espaço vertical para centragem */
  }

  .about-project-panel.is-open {
    /* Adicionar margem inferior para evitar colagem no fundo */
    margin-bottom: var(--space-xl);
  }

  /* Badges - usam a mesma configuração de desktop (inline-flex) */

  /* Toggle Button */
  .about-toggle {
    display: flex;
  }
  .experience-container {
    display: flex;
    flex-direction: column;
    padding: var(--space-s);
  }

  /* Reset height to avoid cuts in vertical layout */
  .experience-columns,
  .experience-description {
    height: auto;
  }

  /* Center button column on Tablets/Mobile - changed to stretch to allow full width grid */
  .experience-columns {
    align-items: stretch;
    width: 100%;
  }

  /* Force columns to fill 1fr in grid */
  .experience-column.experience-column {
    max-width: none;
    flex-direction: row;
    gap: var(--space-xs);
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-height: 48px;
    padding: var(--space-xs) var(--space-s);
    text-align: left;
    border-radius: var(--md-sys-shape-corner-medium);
  }

  /* Mobile: Comparison grid with 1 column */
  .exp-comparacao-grid {
    grid-template-columns: 1fr;
  }

  /* Mobile: Hide CTA box */
  .exp-cta-box {
    display: none;
  }

  /* Em resoluções móveis/tablet (<= 1024px), converter cards de experiência em formato 'Pill/Chip' para não roubarem altura ao ecrã Portrait */

  .experience-column h3.title--level-3 {
    font-size: var(--text-xs);

    /* Texto mais pequeno para as pills */
    line-height: var(--leading-none);
  }

  .experience-column .icon-system {
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: var(--text-base);
    line-height: 2rem;
  }

  .experience-column:hover .icon-system,
  .experience-column:focus .icon-system {
    transform: scale(1.1);

    /* Reduzir efeito de hover drástico no formato Pill */
  }

  /* Não aplicar translateY tão grande na versão Pill para evitar cortes/overflw imprevisível */
  .experience-column:hover,
  .experience-column:focus-visible {
    transform: translateY(-2px);
  }
  body {
    padding-top: var(--height-component-lg);

    /* Menos padding em mobile */
  }

  .legal-container {
    padding: var(--space-l) var(--space-m);
    margin: var(--space-m);
    border-radius: var(--md-sys-shape-corner-large);
  }

  .legal-container h1 {
    font-size: var(--font-size-headline-large);
  }

  .legal-container h2 {
    flex-wrap: wrap;
    font-size: var(--font-size-headline-medium);
  }

  .legal-container h2::before {
    min-width: calc(var(--height-component-sm)*0.875);
    height: calc(var(--height-component-sm)*0.875);
    font-size: var(--font-size-label-small);
  }

  .legal-container h3 {
    font-size: var(--font-size-title-small);
  }

  .table-contents ol {
    grid-template-columns: 1fr;
  }

  .privacy-table {
    font-size: var(--font-size-body-small);
  }

  .privacy-table th,
  .privacy-table td {
    padding: var(--space-xxs);
  }
}
@media (width <=1024px) and (width > 768px){
  .carousel--transform .carousel__slide {
    width: 340px;
    min-height: 226px;
  }
}
@media (height <=800px){
    body {
      overscroll-behavior-y: none;
    }

    .navbar {
      margin-bottom: env(safe-area-inset-bottom, 0);
    }
}
@media (max-width: 768px){
  .carousel__control {
    display: none;
  }
  .carousel__control,
  .btn.carousel__control {
    display: none !important;
  }
}
@media (width <= 768px){
  .animate-on-scroll {
    transform: translateY(15px) translateZ(0);
    transition-duration: 0.4s;
  }

  .animate-on-slide-up {
    transform: translateY(25px) translateZ(0);
    transition-duration: 0.4s;
  }

  .animate-on-slide-down {
    transform: translateY(-25px) translateZ(0);
    transition-duration: 0.4s;
  }

  .animate-on-slide-left,
  .animate-on-slide-right {
    transform: translateX(25px) translateZ(0);
    transition-duration: 0.4s;
  }

  .animate-on-scale {
    transform: scale(0.85) translateZ(0);
    transition-duration: 0.4s;
  }

  .animate-stagger > * {
    transform: translateY(15px) translateZ(0);
    transition-delay: calc(var(--stagger-delay, 0)*0.05s); /* Mais rápido em mobile */
  }
  .articles-modal {
    --glass-surface: var(--articles-mobile-surface);
    --glass-border: var(--articles-mobile-outline);
    --glass-card-bg: color-mix(in srgb, var(--articles-mobile-surface-high), transparent 12%);
    --glass-card-bg-active: color-mix(
      in srgb,
      var(--articles-mobile-surface-high),
      var(--md-sys-color-primary) 12%
    );
    --text-primary: var(--articles-mobile-text);
    --text-secondary: var(--articles-mobile-text-muted);
    --text-tertiary: color-mix(in srgb, var(--articles-mobile-text-muted), transparent 18%);
  }

  .articles-modal__container {
    background:
      radial-gradient(
        circle at 16% 0%,
        color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent) 0%,
        transparent 32%
      ),
      linear-gradient(180deg, oklch(16% 0.05 255deg) 0%, var(--articles-mobile-surface) 100%);
    color: var(--text-primary);
  }

  .articles-modal__header {
    align-items: center;
    padding: calc(var(--space-l) + env(safe-area-inset-top, 0px)) var(--space-l) var(--space-s);
  }

  .articles-modal__title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    color: color-mix(in srgb, var(--md-sys-color-primary), var(--articles-mobile-text) 18%);
  }

  .articles-modal__title small {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .articles-modal .modal__close {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--articles-mobile-surface-high), transparent 15%);
    border-color: var(--articles-mobile-outline);
    box-shadow: none;
  }

  .articles-modal__toolbar {
    display: block;
    padding: 0;
    margin: 0 var(--space-l) var(--space-s);
    background: transparent;
    border-radius: 0;
  }

  .articles-modal__search-trigger,
  .articles-modal__filters-wrapper {
    display: none;
  }

  .articles-modal__search-expanded {
    position: relative;
    inset: auto;
    z-index: var(--z-content);
    height: var(--touch-target-min);
    padding: 0 var(--space-s) 0 var(--space-m);
    pointer-events: auto;
    background: color-mix(in srgb, var(--articles-mobile-surface-high), transparent 8%);
    border-color: var(--articles-mobile-outline);
    border-radius: var(--md-sys-shape-corner-medium);
    opacity: 1;
    transform: none;
  }

  .articles-modal__search-expanded:focus-within {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary), transparent 78%);
  }

  .articles-modal__search-input {
    color: var(--text-primary);
  }

  .articles-modal__search-input::placeholder {
    color: var(--text-secondary);
  }

  .articles-modal__search-close {
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
  }

  .articles-modal__chip-filters {
    gap: var(--space-s);
    padding: var(--space-s) var(--space-l) var(--space-m);
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      black var(--space-l),
      black calc(100% - var(--space-l)),
      transparent 100%
    );
  }

  .articles-modal__chip {
    min-height: 38px;
    padding: 0 var(--space-m);
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--articles-mobile-surface-high), transparent 20%);
    border-color: var(--articles-mobile-outline);
  }

  .articles-modal__chip.active {
    color: oklch(14% 0.045 255deg);
    background: color-mix(in srgb, var(--md-sys-color-primary), var(--articles-mobile-text) 15%);
    border-color: transparent;
  }

  .articles-modal__content {
    padding: 0 var(--space-l) calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
  }

  .articles-modal__grid {
    gap: var(--space-m);
  }

  .articles-modal__card {
    min-height: 0;
    padding: var(--space-l);
    background: linear-gradient(
      180deg,
      color-mix(
          in srgb,
          var(--articles-mobile-surface-high),
          var(--card-theme, var(--md-sys-color-primary)) 4%
        )
        0%,
      var(--glass-card-bg) 100%
    );
    border: 1px solid var(--articles-mobile-outline);
    border-left: 3px solid var(--card-theme, var(--md-sys-color-primary));
    border-radius: calc(var(--md-sys-shape-corner-large) + var(--space-xs));
    box-shadow: inset 0 1px 0 oklch(100% 0 0deg / 8%);
  }

  .articles-modal__card::before {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--card-theme, var(--md-sys-color-primary)) 10%, transparent),
      transparent 45%
    );
  }

  .articles-modal__card:has(.articles-modal__card-trigger:hover) {
    transform: none;
  }

  .articles-modal__card.is-expanded {
    padding: var(--space-l);
    background:
      radial-gradient(
        circle at 100% 0%,
        color-mix(in srgb, var(--card-theme, var(--md-sys-color-primary)) 14%, transparent) 0%,
        transparent 38%
      ),
      var(--glass-card-bg-active);
    border-color: color-mix(
      in srgb,
      var(--card-theme, var(--md-sys-color-primary)),
      var(--articles-mobile-outline) 35%
    );
    box-shadow:
      inset 0 1px 0 oklch(100% 0 0deg / 10%),
      0 var(--space-m) var(--space-xl) oklch(0% 0 0deg / 20%);
  }

  .articles-modal__card-header {
    margin-bottom: var(--space-m);
  }

  .articles-modal__card-icon {
    font-size: 1.25rem;
  }

  .articles-modal__card-category {
    color: color-mix(
      in srgb,
      var(--card-theme, var(--md-sys-color-primary)),
      var(--articles-mobile-text) 12%
    );
  }

  .articles-modal__card-title {
    margin-bottom: var(--space-m);
    font-size: clamp(1.05rem, 5vw, 1.45rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--text-primary);
  }

  .articles-modal__card-excerpt {
    margin-bottom: var(--space-m);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text-secondary);
  }

  .articles-modal__card-footer {
    gap: var(--space-s);
    padding-top: var(--space-m);
    border-color: var(--articles-mobile-outline);
  }

  .articles-modal__card-meta {
    flex-wrap: wrap;
    color: var(--text-secondary);
  }

  .articles-modal__card-meta-item {
    display: inline-flex;
    gap: var(--space-2xs, 0.25rem);
    align-items: center;
  }

  .articles-modal__card-meta-item iconify-icon {
    font-size: 0.95rem;
    color: var(--card-theme, var(--md-sys-color-primary));
  }

  .articles-modal__card-action-hint {
    color: var(--card-theme, var(--md-sys-color-primary));
  }

  .articles-modal__card-arrow {
    opacity: 1;
    transform: none;
  }

  .articles-modal__card-detail {
    position: static;
    padding-top: var(--space-m);
    border-color: var(--articles-mobile-outline);
  }

  .articles-modal__detail-close {
    position: absolute;
    top: var(--space-l);
    right: var(--space-l);
    background: color-mix(in srgb, var(--articles-mobile-surface-high), transparent 12%);
    border-color: var(--articles-mobile-outline);
  }

  .articles-modal__detail-meta {
    gap: var(--space-s);
    margin-bottom: var(--space-s);
  }

  .articles-modal__detail-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .articles-modal__detail-btn {
    max-width: none;
    min-height: var(--touch-target-min);
    color: oklch(12% 0.04 255deg);
    background: color-mix(in srgb, var(--md-sys-color-primary), var(--articles-mobile-text) 18%);
    border-radius: var(--md-sys-shape-corner-large);
  }

  .articles-modal__footer {
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--articles-mobile-surface), transparent 8%) 26%
    );
    border-color: var(--articles-mobile-outline);
  }
  .zone-pricing-modal {
    max-width: 100%;
  }

  /* Toggle must not stick to screen edges when modal padding is removed */
  .zone-pricing-modal .zone-pricing-toggle {
    width: calc(100% - var(--space-l)*2);
    margin-inline: auto;
  }

  .zone-pricing-toggle::before {
    top: 2px;
    left: 2px;
    width: calc(50% - 4px);
    height: calc(100% - 4px);
    border-radius: calc(var(--md-sys-shape-corner-medium) - 4px);
  }

  .zone-pricing-fieldset:has(#zone-out:checked) .zone-pricing-toggle::before {
    transform: translateX(calc(100% + 4px));
  }

  .modal__header.zone-pricing-modal__header {
    flex-direction: column;
    align-items: center;
  }

  .zone-pricing__section {
    margin-bottom: var(--space-m);
  }

  .zone-pricing__section-title {
    justify-content: center;
    font-size: var(--text-sm);
  }

  .zone-pricing__price-list {
    gap: var(--space-2xs);
  }

  .zone-pricing__price-item {
    flex-direction: row;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xs) var(--space-s);
    text-align: left;
  }

  .zone-pricing__price-label {
    flex: 1 1;
    font-size: var(--text-xs);
  }

  .zone-pricing__price-value {
    flex-shrink: 0;
    font-size: var(--text-lg);
  }

  .zone-pricing__price-note {
    width: auto;
    font-size: var(--text-xs);
  }

  .zone-pricing__zones-text {
    text-align: center;
    font-size: var(--text-xs);
  }

  .zone-pricing__map {
    padding-top: 75%;
    border-radius: var(--md-sys-shape-corner-small);
  }

  .zone-pricing__cta-header {
    width: 100%;
    gap: var(--space-xs);
  }

  .zone-pricing__input {
    font-size: var(--text-sm);
  }

  .zone-pricing__success {
    padding: var(--space-l) var(--space-s);
  }
  .article-item__title.marquee {
    min-height: 44px;

    /* WCAG 2.5.5: Minimum touch target 44px */
    padding: var(--space-xs) var(--space-s);
  }

  .article-item__title.marquee .marquee-content {
    /* Mais rápido em mobile */
    font-size: 0.9em;
    transition:
      animation-duration var(--duration-elegant) var(--ease-fluid),
      animation-timing-function var(--duration-smooth) var(--ease-fluid);
    animation-duration: 12s;
  }

  /* Toque em mobile: abrandamento moderado SEM RESET */
  .artigo-item:active .article-item__title.marquee .marquee-content {
    animation-name: scroll-horizontal;

    /* Mesma animação */
    animation-duration: 24s;

    /* 2x mais lento no toque */
    animation-timing-function: ease-out;
  }

  /* Efeito de hover mais sutil em mobile */
  .artigo-item:hover .article-item__title.marquee .marquee-content {
    opacity: 0.9;
    animation-name: scroll-horizontal;

    /* Mesma animação */
    animation-duration: 20s;

    /* Menos redução de opacidade */
  }
  .hero__comparison-cards.animate-on-scale,
  .hero__comparison-cards.animate-on-scale.is-visible {
    transform: none !important;
  }

  html.dark-theme .hero__comparison-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 88%, var(--md-sys-color-primary) 12%);
  }

  html.dark-theme .hero__comparison-side--highlight {
    background: color-mix(in srgb, var(--md-sys-color-primary-container) 22%, var(--md-sys-color-surface-container) 78%);
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 24%, var(--md-sys-color-outline-variant) 76%);
  }

  html.dark-theme .hero__comparison-divider {
    background: color-mix(in srgb, var(--md-sys-color-outline-variant) 82%, var(--md-sys-color-primary) 18%);
  }

  html.dark-theme .hero__explanation-hub .medical-disclaimer {
    background: var(--md-sys-color-surface-container-lowest);
    border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 84%, var(--md-sys-color-primary) 16%);
  }

  .blog-card,
  .blog-card__content,
  .blog-card__title {
    align-items: center;
    text-align: center;
  }

  .blog-card__excerpt {
    align-self: flex-start;
    width: 100%;
    text-align: left;

    /* Mantido esquerda mesmo em mobile para legibilidade */
  }

  .blog-card__excerpt-text {
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .blog-card__image {
    height: 140px;
  }

  .blog-card__meta {
    flex-flow: row wrap;
    gap: var(--space-l);
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .blog-grid .blog-card:nth-child(n + 3) {
    display: none;
  }
  .proximos-passos {
    padding: var(--space-m);
  }

  .proximos-passos__step {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }
  /* RESET CLASSES */
  .p-mobile-0 {
    padding: 0;
  }

  .m-mobile-0 {
    margin: 0;
  }

  .mt-mobile-0 {
    margin-top: 0;
  }

  .mb-mobile-0 {
    margin-bottom: 0;
  }

  .ml-mobile-0 {
    margin-left: 0;
  }

  .mr-mobile-0 {
    margin-right: 0;
  }

  /* SAFE AREAS - Funcionalidade iOS Única */
  .safe-top {
    padding-top: max(var(--space-l), env(safe-area-inset-top, 0));
  }

  .safe-bottom {
    padding-bottom: max(var(--space-l), env(safe-area-inset-bottom, 0));
  }

  .safe-left {
    padding-left: max(var(--space-inset-screen), env(safe-area-inset-left, 0));
  }

  .safe-right {
    padding-right: max(var(--space-inset-screen), env(safe-area-inset-right, 0));
  }

  /* Safe areas combinadas */
  .safe-horizontal {
    padding-right: max(var(--space-inset-screen), env(safe-area-inset-right, 0));
    padding-left: max(var(--space-inset-screen), env(safe-area-inset-left, 0));
  }

  .safe-vertical {
    padding-top: max(var(--space-l), env(safe-area-inset-top, 0));
    padding-bottom: max(var(--space-l), env(safe-area-inset-bottom, 0));
  }

  .safe-all {
    padding: max(var(--space-l), env(safe-area-inset-top, 0))
      max(var(--space-inset-screen), env(safe-area-inset-right, 0))
      max(var(--space-l), env(safe-area-inset-bottom, 0))
      max(var(--space-inset-screen), env(safe-area-inset-left, 0));
  }
  .title-intro {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-m);
  }

  .title-intro-lg {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-l);
  }

  .section-breathing {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .section-breathing-lg {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  .btn-group {
    gap: var(--space-s);
  }

  .group-separated {
    margin-bottom: var(--space-xl);
  }

  .group-separated-lg {
    margin-bottom: var(--space-2xl);
  }
  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__btn {
    width: 100%;
    min-height: var(--touch-target-min);
  }
}
@media (width <=768px){
  :root {
    /* ===================================
       TOUCH TARGETS (WCAG 2.5.5)
       =================================== */
    --touch-target-min: var(--height-component-md);

    /* Mínimo WCAG 44px-48px */
    --touch-target-comfortable: var(--height-component-lg);

    /* MD3 recomendado 48px-52px */
    --touch-target-tablet: var(--height-component-lg);

    /* ===================================
       SAFE AREA INSETS (iOS Notch)
       =================================== */

    /* ===================================
       ANIMAÇÕES MOBILE (Aceleradas - Premium Responsive)
       Override do sistema para toque instantâneo
       =================================== */
    --md-sys-motion-duration-medium: 200ms;
    /* Desktop: 250ms */
    --md-sys-motion-duration-medium1: 200ms;
    /* Desktop: 250ms */
    --md-sys-motion-duration-medium2: 250ms;
    /* Desktop: 300ms */
    --md-sys-motion-duration-long: 300ms;
    /* Desktop: 400ms */
    --md-sys-motion-duration-long1: 350ms;
    /* Desktop: 450ms */

    /* ===================================
       CARROSSEL MOBILE (override de :root)
       =================================== */
    --carousel-slide-width-mobile: 85%;
    --carousel-slide-width-tablet: 48%;
    --carousel-icon-size: 2rem;

    /* override do valor desktop clamp() */
    --carousel-padding-mobile: var(--space-s);
    --carousel-gap-mobile: 1.5625rem;

    /* ===================================
       MENU GRID
       =================================== */
    --menu-grid-columns: 2;
    --menu-grid-item-min-width: 8.75rem;
    --menu-grid-max-width: 100%;
    --menu-grid-gap: var(--space-m);
    --menu-grid-padding: var(--space-m);
  }

  /* .content-wrapper padding horizontal já coberto pelo .section */
  .content-wrapper {
    padding-right: 0;
    padding-left: 0;
  }

  .section__title {
    /* Font-size e margins herdados do base (fluid type) */
    font-weight: var(--font-bold);
    line-height: var(--line-height-tight);
    color: var(--md-sys-color-on-surface);
  }

  .section__header .section__title,
  .subsection__header .subsection__title {
    justify-content: center;
    margin: 0;
    text-align: center;
  }

  /* BEM: .header-section removido - os estilos de parágrafo devem usar classes BEM específicas */

  .subsection__title {
    margin: 0;
    font-size: var(--text-2xl);

    /* 24-30px */
    font-weight: var(--font-semibold);
    line-height: var(--line-height-snug);
    color: var(--md-sys-color-on-surface);
    text-align: center;
  }

  .section__subtitle {
    margin: 0;
    text-align: center;
  }

  .experience-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .experience-columns__content {
    /* Mobile First: 1 Column */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
    display: none !important;
  }

  .experience-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: center;
    height: 160px;

    /* Aplicar espaçamento consistente */
    padding: var(--space-l);
    text-align: center;
    pointer-events: none;
    cursor: default;

    /* Aplicar espaçamento consistente */
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
  }

  .experience-column .icon-system {
    width: 2.5rem;
    height: 2.5rem;
    padding: var(--space-s);
    font-size: var(--text-2xl);
    color: var(--recruitment-primary-light);

    /* Aplicar espaçamento consistente */
    background: var(--md-sys-color-primary-container-low);
    border-radius: var(--md-sys-shape-corner-medium);
  }

  .footer-social-wrapper,
  .footer-links {
    opacity: 0;
    animation: footerFadeIn var(--duration-elegant) var(--ease-fluid) forwards;
  }

  .footer-social-wrapper {
    animation-delay: var(--delay-md);
  }

  .footer-links {
    animation-delay: var(--delay-lg);
  }
  /* Mínimo 48px para todos os elementos interativos */
  .hero__cta,
  .botao,
  .contato__botao,
  .faq-question,
  a[role='button'] {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  /* Confortável para elementos principais */
  .hero__cta,
  .hero__explicacao-btn,
  .navbar-burger {
    min-width: var(--touch-target-comfortable);
    min-height: var(--touch-target-comfortable);
  }
  .modal {
    padding: 0;
  }

  /* Sidebar tools usa bottom-sheet em mobile — excluída do fullscreen */
  .modal__content:not(.tools-sidebar-content),
  .modal__content--dark:not(.tools-sidebar-content) {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal__header {
    position: relative;
    z-index: var(--z-elevated);
    flex-shrink: 0;
  }

  /* Mobile: Body overflow is visible because the entire .modal__content scrolls.
     Modals with sticky headers should override: .modal__body { flex: 1; overflow-y: auto; } */
  .modal__body {
    flex: none;
    overflow-y: visible;
  }

  .modal__footer {
    flex-shrink: 0;
  }

  /* Zone pricing modal: scroll na berma — remove padding lateral */
  .modal__content.zone-pricing-modal {
    padding-inline: 0;
  }

  .modal__content.zone-pricing-modal .modal__header,
  .modal__content.zone-pricing-modal .zone-pricing-fieldset {
    padding-inline: var(--space-l);
  }

  /* Padding no conteúdo interno para não colar à borda */
  .modal__content.zone-pricing-modal .zone-pricing-content {
    padding-inline: var(--space-l);
  }

  /* Full screen modal */
  .faq-modal.modal {
    align-items: stretch;
    padding: 0;
  }

  .faq-modal .modal__body {
    flex: none;
    overflow-y: visible;
  }

  .faq-modal .faq-card__header,
  .faq-modal .faq-btn {
    touch-action: manipulation;
  }

  /* Force title to break lines on mobile to avoid overlap with close button */
  .faq-modal .modal__title-destaque span {
    display: block;
    line-height: 1.1;
  }

  /* Otimização de Espaço Mobile */
  .faq-modal .faq-card[open] .faq-card__content {
    padding: 0 var(--space-m);
  }

  .faq-modal .faq-btn {
    gap: var(--space-l);
    padding: var(--space-m);
  }

  .faq-modal .faq-resposta-inner {
    padding: var(--space-l) var(--space-m);
    font-size: var(--text-base);
  }
  /* Container principal - column layout */
  .sidebar-about__container {
    flex-direction: column;
  }

  /* Coluna esquerda transparente - as secções filhas terão fundo escuro */
  .sidebar-about__col-left {
    position: relative;
    flex-shrink: 0;
    order: 4;
    width: 100%;
    min-width: auto;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  /* Secções Habilidades e Idiomas com fundo claro */
  .sidebar-about__col-left>div {
    padding: 0 var(--space-xl) var(--space-l);
    color: var(--cv-text-main);
    background: var(--cv-right-bg);
    border-radius: var(--md-sys-shape-corner-large);
  }

  /* Títulos e conteúdo mantêm cor escura */
  .sidebar-about__col-left>div>* {
    color: var(--cv-text-main);
  }

  /*
     Coluna direita - DISPLAY: CONTENTS
     Este elemento "desaparece" visualmente mas os filhos permanecem.
     Os filhos diretos (header, section...) são promovidos ao container.
  */
  .sidebar-about__col-right {
    display: contents;
  }

  /* Agora aplicamos order diretamente aos filhos da col-right (agora irmãos do container) */

  /* Header com foto e nome - aparece primeiro (order: 2) com fundo escuro */
  .sidebar-about__header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    align-items: center;
    order: 2;
    padding: var(--space-xl) var(--space-l) var(--space-l) var(--space-l);
    color: var(--cv-left-text);
    text-align: center;
    background: var(--cv-left-bg);
    border-radius: var(--md-sys-shape-corner-large);
  }

  /* Foto - dentro do header, aparece antes do nome (order: 1) */
  .sidebar-about__photo {
    order: 1;
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-m) auto;
  }

  /* Nome e subtítulo - aparecem depois da foto (order: 2 dentro do header) */
  .sidebar-about__header-content {
    order: 2;
    padding-right: 0;
  }

  .sidebar-about__name {
    font-size: var(--text-2xl);
    color: var(--cv-left-text);
  }

  .sidebar-about__subtitle {
    font-size: var(--text-xs);
    color: var(--cv-left-text);
  }

  /* Sections filhas da col-right - agora são itens flex independentes */
  .sidebar-about__col-right>section {
    padding: var(--space-l) var(--space-l);
    color: var(--cv-left-text);
    background: var(--cv-left-bg);
  }

  /* Conteúdo dentro das sections escuro mantém cor clara */
  .sidebar-about__col-right>section>* {
    color: var(--cv-left-text);
  }

  /* Timelines mantêm cor clara dentro das sections */
  .sidebar-about__col-right>section .sidebar-about__timeline,
  .sidebar-about__col-right>section .sidebar-about__timeline-item,
  .sidebar-about__col-right>section .sidebar-about__job-role,
  .sidebar-about__col-right>section .sidebar-about__job-place,
  .sidebar-about__col-right>section .sidebar-about__job-desc,
  .sidebar-about__col-right>section .sidebar-about__cert-list,
  .sidebar-about__col-right>section .sidebar-about__contact-list {
    color: var(--cv-left-text);
  }

  /* Sobre Mim (1ª section) - exceção: mantém fundo claro */
  .sidebar-about__col-right>section:nth-of-type(1) {
    order: 3;
    color: var(--cv-text-main);
    background: transparent;
  }

  /* Experiência - 2ª section */
  .sidebar-about__col-right>section:nth-of-type(2) {
    order: 5;
  }

  /* Educação - 3ª section */
  .sidebar-about__col-right>section:nth-of-type(3) {
    order: 6;
  }

  /* Certificações - 4ª section */
  .sidebar-about__col-right>section:nth-of-type(4) {
    order: 7;
  }

  /* Contacto - 5ª section */
  .sidebar-about__col-right>section:nth-of-type(5) {
    order: 8;
  }

  /* Tags e idiomas - alinhamento esquerdo nas secções escuro */
  .sidebar-about__tags,
  .sidebar-about__lang-item {
    justify-content: flex-start;
  }

  .sidebar-about__section-title {
    margin-top: var(--space-s);
    text-align: left;
  }

  /* Tags mais legíveis em mobile - touch targets maiores e design Pill */
  .sidebar-about__tag {
    padding: var(--space-s) var(--space-l);
    font-size: var(--text-xs);
    box-shadow: var(--shadow-sm);
  }

  /* Contacto alinhado à esquerda em mobile */
  .sidebar-about__contact-list {
    align-items: flex-start;
  }
  .tools-sidebar-content::before {
    display: block;
  }
  .tools-sidebar-header {
    padding-top: var(--space-s);
  }
  .modal.modal--sidebar .tools-sidebar-content {
    position: absolute;
    inset: auto auto 0 0;
    width: 100%;
    max-width: 100vw;
    height: auto;
    max-height: 90dvh;
    border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
    box-shadow: var(--md-sys-elevation-level4);
    transform: translateY(100%);
  }

  .modal.is-open .tools-sidebar-content {
    transform: translateY(0);
  }
  .carousel--transform .carousel__slide {
    width: 280px;
    min-height: 186px;
  }

  .carousel--transform .carousel__slide.active {
    transform: translateY(-4px) scale(1.02);
  }
  .carousel {
    max-width: 100vw;
  }

  .carousel--native .carousel__track {
    /* Reduzir padding lateral no mobile */
    gap: var(--space-m);
    padding: var(--space-m) var(--space-l);
  }

  .carousel--native .carousel__slide {
    width: 280px;

    /* Cards otimizados para mobile */
    min-height: 186px;

    /* 280 / 1.5 */
    scroll-snap-align: center;

    /* UNIFICAÇÃO DE CORES MOBILE: Garantir que não há overrides */
    background: var(--md-sys-color-surface-container-low);
  }

  .carousel--facts .carousel__slide {
    min-height: 300px;
  }

  /* Ajustar escala do conteúdo para mobile */
  .carousel--native .carousel__slide .carousel__slide-content {
    padding: var(--space-m);
  }

  .carousel--native .carousel__slide .carousel__slide-icon {
    font-size: 2.5rem;
  }

  .carousel--native .carousel__slide .carousel__slide-title {
    font-size: var(--text-xl);
  }

  .carousel--native .carousel__slide .carousel__slide-description {
    font-size: 1rem;
  }

  .carousel--native .carousel__slide .carousel__slide-reference {
    font-size: 0.6875rem;
  }

  .carousel__control {
    display: none;

    /* Setas escondidas em mobile (swipe nativo é melhor) */
  }

  /* ✅ FIX MOBILE: Viewport com fade suave e overflow-y para não cortar o card elevado */
  .carousel__viewport {
    overflow-y: visible;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  }

  /* Efeito de blur removido do mobile */
  .carousel__viewport::before,
  .carousel__viewport::after {
    display: none;
  }

  /* ✅ FIX MOBILE: Garantir que o card ativo mantém o destaque em mobile
     Reduzir ligeiramente o zoom e elevação para cards menores (280px) */
  .carousel--native .carousel__slide.active {
    z-index: var(--z-elevated);
    border-color: var(--md-sys-color-primary);
    box-shadow:
      var(--md-sys-elevation-level2),
      0 0 15px oklch(from var(--md-sys-color-primary) l c h / 10%);
    transform: translateY(-4px) scale(1.02);
  }

  /* Icon do card ativo com escala reduzida em mobile */
  .carousel--native .carousel__slide.active .carousel__slide-icon {
    transform: scale(1.05);
  }
  .contact__form-container.animate-on-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .form-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .form-row .contact__form-field,
  .form-row .form-field,
  .form-row .form-group {
    width: 100%;
    max-width: 100%;
  }
  .community-submission__tags-selection {
    gap: var(--space-xs);
  }
  .marquee-container {
    display: flex;
  }

  /* Simplificar o hint em mobile */
  .marquee-hint {
    gap: var(--space-xs);

    /* Menos espaçamento */
    padding: var(--space-xs) var(--space-s);

    /* Menos padding */
    font-size: 0.75rem;

    /* Texto menor */
  }

  .marquee-hint iconify-icon {
    width: 1rem;

    /* Ícone menor */
    height: 1rem;
    font-size: 1rem;
  }

  /* Esconder o swipe-indicator em mobile (é redundante) */
  .marquee-hint .swipe-indicator {
    display: none;
  }

  /* Esconde a grelha antiga em mobile (<768px) */
  .gemini-chat-widget {
    inset: 0;
    width: 100%;
    height: 100%;

    /* ✅ 100% respeita o teclado virtual melhor que 100dvh em muitos browsers */
    max-height: 100%;
    padding-top: env(safe-area-inset-top);
    border-radius: 0;

    /* ✅ Respeita o notch/status bar */
  }

  .chat-messages {
    flex: 1 1;

    /* ✅ Garante que encolhe corretamente */
    min-height: 0;

    /* ✅ Previne overflow do flex item */
  }

  .chat-footer {
    flex-shrink: 0;
    padding-bottom: calc(var(--space-l) + env(safe-area-inset-bottom, 0px));

    /* ✅ Garante que o footer nunca encolhe */
  }

  .chat-input-field {
    font-size: var(--text-base);

    /* Prevent iOS zoom */
  }
  .toast-container {
    bottom: var(--height-component-2xl);

    /* Acima da navbar mobile se existir */
  }
  .medical-disclaimer {
    padding: var(--space-m);
    margin: var(--space-m) auto;
    border-radius: var(--md-sys-shape-corner-large);
  }

  .medical-disclaimer .disclaimer-icon {
    font-size: 1.25rem;
  }
  .table-container {
    overflow-x: visible;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  .zones-table thead {
    display: none;
  }

  .zones-table,
  .zones-table tbody,
  .zones-table tr,
  .zones-table td {
    display: block;
    width: 100%;
  }

  .zones-table tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-m);
    margin-bottom: var(--space-s);
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
  }

  .zones-table td {
    padding: 0;
    text-align: left;
    border: none;
  }

  .zones-table td:first-child {
    flex: 1 1 100%;
    padding-bottom: var(--space-s);
    margin-bottom: var(--space-s);
    border-bottom: 1px dashed var(--md-sys-color-outline-variant);
  }

  .zones-table td:not(:first-child) {
    flex: 1 1;
    font-size: var(--text-base);
  }

  .zones-table td:last-child {
    text-align: right;
  }

  /* Container do botão com fade gradient por cima do conteúdo scrollável */
  .calculadora-form .btn--full-width[type="submit"],
  .calc-fc-inputs .btn--full-width[type="submit"] {
    position: relative;
    z-index: var(--z-sticky);
    margin-top: var(--space-m);
  }

  /* Remover padding do content — fullscreen não precisa */
  .modal--calculator .modal__content {
    padding: 0;
  }

  /* Header com padding e fundo sólido (flex-shrink:0 em vez de sticky para iOS) */
  .modal--calculator .modal__header {
    position: relative;
    z-index: var(--z-sticky);
    flex-shrink: 0;
    padding: var(--space-s) var(--space-m);
    background: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }

  /* Body preenche o espaço restante e faz scroll */
  .modal--calculator .modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-m);
  }

  /* Close button reposicionado em mobile */
  .modal--calculator .modal__close {
    position: absolute;
    right: var(--space-s);
    top: var(--space-s);
  }

  /* Layout 2-col passa a 1-col em mobile */
  .calc-fc-layout {
    grid-template-columns: 1fr;
  }

  .calc-fc-inputs {
    padding: 0;
    border-right: none;
  }

  /* Resultados ocupam ecrã inteiro em mobile */
  .calc-fc-layout:has(.calc-fc-results:not(.d-none):not([style*="display: none"])) .calc-fc-inputs {
    display: none;
  }

  .calc-fc-layout:has(.calc-fc-results:not(.d-none):not([style*="display: none"])) .calc-fc-results {
    display: block;
  }

  /* Glicemia: esconder form quando resultado visível */
  .modal__body:has(.calc-result:not(.d-none)) .calculadora-form {
    display: none;
  }
  .calc-nav {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    z-index: var(--z-sticky);
    gap: 0;
    justify-content: space-around;
    padding: var(--space-2xs) 0;
    background: var(--md-sys-color-surface);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0;
  }

  @supports (padding-top: env(safe-area-inset-top)) {
    .calc-nav {
      top: env(safe-area-inset-top);
    }
  }

  .calc-nav__item {
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2xs) var(--space-xs);
    border: none;
    border-radius: var(--md-sys-shape-corner-small);
    background: transparent;
    min-width: 56px;
    flex: 1 1;
  }

  .calc-nav__item:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: transparent;
  }

  .calc-nav__item--active {
    background: var(--md-sys-color-primary-container);
    border-color: transparent;
  }

  .calc-nav__item span {
    font-size: 0.75rem;
    line-height: 1.2;
  }
  .exp-desc-desktop {
    display: none;
  }

  .exp-desc-mobile {
    display: flex;
  }

  .experience-columns.animate-on-slide-up,
  .experience-description.animate-on-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Mobile: remover padding aninhado - apenas o container externo tem padding */
  .experience-description {
    align-items: center;
    padding: 0;
    text-align: center;
    background: transparent;
    border: none;
  }

  .experience-description h4 {
    justify-content: center;
  }

  .experience-description>p {
    line-height: var(--line-height-relaxed);
    text-align: center;
  }

  /* Mobile: Forced grid to 1 column */
  .exp-comparacao-grid {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  /* Mobile: Hide CTA box */
  .exp-cta-box {
    display: none;
  }

  /* Mobile: Wrap on modality cards */
  .modalidade-card {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  /* Mobile: examples list - cards com background e borda sutil */
  .experience-examples-list li {
    flex-direction: row;
    gap: var(--space-m);
    align-items: flex-start;
    width: 100%;
    padding: var(--space-m);
    margin-bottom: var(--space-m);
    text-align: left;
    background-color: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
  }

  .experience-examples-list .exp-icon {
    align-self: flex-start;
    margin-bottom: 0;
  }

  /* Mobile: highlight list - cards com background e borda sutil */
  .highlight-list__item {
    flex-direction: column;
    gap: var(--space-m);
    align-items: center;
    width: 100%;
    padding: var(--space-m);
    margin-bottom: var(--space-m);
    text-align: center;
    background-color: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
  }

  .highlight-list__icon {
    margin-top: 0;
  }

  /* Mobile: cards exemplo - manter background e borda */
  .exp-card-exemplo {
    gap: var(--space-m);
    padding: var(--space-m);
    background-color: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
  }

  .exp-card-header {
    gap: var(--space-m);
  }
  .section--facts {
    padding-top: var(--space-l);
  }
  .page-fluxo-wrapper {
    justify-content: flex-start;
    padding: var(--space-3xl) var(--space-l) var(--space-xl);
    /* top right bottom (left=right) */
  }

  .fluxo-step {
    min-height: 500px;
    padding: var(--space-xl);
  }

  .fluxo-step__header {
    flex-direction: column;
    gap: var(--space-m);
    text-align: center;
  }

  .fluxo-step__title {
    font-size: var(--text-xl);
  }

  .fluxo-features {
    gap: var(--space-l);
  }

  .fluxo-feature {
    padding: var(--space-l);
  }

  .fluxo-nav--split {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  .fluxo-form__iframe {
    min-height: 500px;
  }
  /* Inverte visibilidade mobile/desktop */
  .mobile-only {
    display: flex;
  }

  .desktop-only {
    display: none;
  }

  /* Helpers explícitos mobile */
  .hide-mobile {
    display: none;
  }

  .show-mobile {
    display: block;
  }

  .show-mobile-flex {
    display: flex;
  }

  .show-mobile-grid {
    display: grid;
  }

  /* Flex utilities mobile */
  .flex-1,
  .flex-2 {
    flex: 1 1 100% !important;
  }
  .text-center-mobile {
    text-align: center;
  }

  .text-left-mobile {
    text-align: left;
  }
  .body-base {
    margin-bottom: 0;
    text-align: center;
    text-indent: 0;
  }
  .skeleton-service-card {
    min-height: 240px;
    padding: var(--space-l);
  }

  .skeleton-service-title {
    width: 160px;
  }

  .skeleton-article-title {
    width: 100%;
    height: 32px;
  }

  .skeleton-card {
    padding: var(--space-l);
  }
}
@media (width <=768px), (width > 1024px){
  .tablet-only {
    display: none;
  }
}
@media (width <= 767px){
  .feedback-modal .modal__header--surface {
    align-items: center;
    padding: var(--space-l) var(--space-m);
    text-align: center;
  }

  .feedback-modal__body {
    padding-bottom: calc(var(--space-l) + env(safe-area-inset-bottom, 20px));
  }

  /* Título herda do _modal-base.css (clamp de mobile) */

  .feedback-modal__star-btn {
    font-size: var(--text-4xl);
  }
}
@media (width <=767px){
  .community-controls:focus-within .community-nav {
    display: none;
  }
  /* Fullscreen mobile - apenas overrides específicos */
  .modal__content--xl.community-modal-content {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .community-modal__footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-bottom: calc(var(--space-m) + env(safe-area-inset-bottom, 20px));
  }

  .community-modal__body {
    padding: var(--space-l);
  }

  .community-gallery {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  .comm-card {
    padding: var(--space-m);
  }
  .differentiation-column {
    border-color: var(--subtitle-color);
    box-shadow:
      0 4px 12px oklch(from var(--subtitle-color) l c h / 8%),
      0 1px 4px oklch(0% 0 0deg / 4%);
  }
}
@media (height <=600px){
  .hero {
    min-height: 0;
    padding-top: calc(var(--space-xl)*2);
    padding-bottom: var(--space-xl);
  }
}
@media (width <=600px){
  .mode-options,
  .payment-options {
    grid-template-columns: 1fr;
  }

  .fluxo-step {
    padding: var(--space-l) var(--space-m);
  }

  .plan-price {
    font-size: var(--text-base);
  }
}
@media (width <=576px){
  .faq-modal .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-modal .faq-card__desc,
  .faq-modal .faq-card__toggle-icon {
    display: none;
  }

  .faq-modal .faq-card__header {
    gap: var(--space-s);
    align-items: center;
    justify-content: center;
    padding: var(--space-m);
    text-align: center;
  }

  .faq-modal .faq-card__header-text {
    align-items: center;
  }

  .faq-modal .faq-card h3 {
    font-size: var(--text-sm);
  }

  .faq-modal .icon-bubble {
    font-size: var(--text-base);
  }

  .faq-modal .faq-card[open] .faq-card__header {
    padding: var(--space-m);
    text-align: left;
  }

  .faq-modal .faq-card[open] .faq-card__header-text {
    align-items: flex-start;
  }

  /* Mobile disclaimer adjustments */
  .faq-modal .faq-disclaimer {
    padding: var(--space-s);
    margin-bottom: var(--space-l);
  }

  .faq-modal .faq-disclaimer__icon {
    font-size: var(--text-lg);
  }

  .faq-modal .faq-disclaimer__title {
    font-size: var(--text-xs);
  }
}
@media (width <= 480px){
  .animate-on-scroll {
    transform: translateY(10px) translateZ(0);
    transition-duration: 0.3s;
  }

  .animate-on-slide-up {
    transform: translateY(18px) translateZ(0);
    transition-duration: 0.3s;
  }

  .animate-on-slide-down {
    transform: translateY(-18px) translateZ(0);
    transition-duration: 0.3s;
  }

  .animate-on-slide-left,
  .animate-on-slide-right {
    transform: translateX(18px) translateZ(0);
    transition-duration: 0.3s;
  }

  .animate-stagger > * {
    transform: translateY(12px) translateZ(0);
    transform: translateY(12px) translateZ(0);
  }
  /* Em telas muito pequenas, verificar se marquee é necessário */
  .article-item__title.marquee.no-overflow .marquee-content {
    overflow: visible;
    white-space: normal;
    transform: translateX(0);
    animation: none;
  }
  .blog-card {
    padding: var(--space-m);
  }

  .blog-card__image {
    height: 120px;
    margin-bottom: var(--space-l);
  }

  .blog-card__title .blog-card__link {
    font-size: var(--text-lg);
  }

  .blog-card__excerpt {
    font-size: var(--text-sm);
  }

  .blog-card__excerpt-text {
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }
}
@media (width <=480px){
  .footer-social-wrapper {
    flex-direction: column;

    /* gap herdado do base (md) */
  }

  .footer-social-label {
    font-size: var(--text-xs);
  }

  .footer {
    padding: var(--space-l) var(--space-m);

    /* Reduzir espaçamento em mobile */
    margin-top: 0;
  }
  .modal .modal__header p {
    font-size: clamp(0.875rem, 3.5vw, 0.9375rem);
  }

  .modal__close {
    width: var(--touch-target-min, 44px);
    height: var(--touch-target-min, 44px);
  }

  .modal__content::-webkit-scrollbar,
  .modal__body::-webkit-scrollbar {
    width: 6px;
  }
  .articles-modal__btn-reset-text {
    display: none;
  }

  .articles-modal__btn-reset {
    padding: 0 var(--space-inset-sm);
  }
  .page-fluxo-wrapper {
    /* Reduzido para evitar double padding */
    justify-content: flex-start;
    padding: var(--space-2xl) var(--space-m) var(--space-m);
    /* top right bottom (left=right) */
  }

  .fluxo-container {
    border-radius: var(--md-sys-shape-corner-none);
    box-shadow: var(--shadow-md);
  }

  .fluxo-step {
    /* Reduzido de lg para sm */
    min-height: 450px;
    padding: var(--space-m);
  }

  .fluxo-step__number {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }

  .fluxo-step__title {
    font-size: var(--text-lg);
  }

  .fluxo-features {
    gap: var(--space-m);
  }

  .fluxo-feature {
    flex-direction: column;
    padding: var(--space-l);
    text-align: center;
  }

  .fluxo-plan {
    padding: var(--space-l);
  }

  .fluxo-form {
    /* Padding managed by global form tokens */
    width: 100%;
  }

  .fluxo-form__iframe {
    min-height: 400px;
  }

  .fluxo-nav {
    flex-direction: column;
    gap: var(--space-m);
  }

  .fluxo-nav__section {
    padding: var(--space-l);
  }
}
@media (width <=375px){
  .experience-columns__content {
    grid-template-columns: 1fr;
  }
}
@media (forced-colors: active){
  .skeleton {
    background: ButtonFace;
    border: 1px solid ButtonText;
  }

  .btn,
  .card,
  .navbar__link,
  .carousel__control,
  .modal__content {
    border: 1px solid currentcolor;
  }

  .btn--filled,
  .btn--tonal {
    color: HighlightText;
    forced-color-adjust: none;
    background-color: Highlight;
  }

  .icon-system {
    forced-color-adjust: auto;
  }
}
@media (hover: hover){
    .experience-column:hover {
      background-color: var(--state-hover-surface);
      transform: translateY(-2px);
    }
  .btn--fab:hover,
  .fab:hover {
    box-shadow:
      0 12px 28px oklch(from var(--md-sys-color-secondary) l c h / 20%),
      0 4px 12px oklch(0% 0 0deg / 10%);
    transform: var(--transform-hover-lift-md) scale(var(--scale-grow-sm));
  }
  .about-project-btn:hover {
    color: var(--md-sys-color-on-surface);
    background: color-mix(
      in srgb,
      var(--accent-color, var(--md-sys-color-primary)) 12%,
      var(--md-sys-color-surface-container-highest)
    );
    border-color: var(--accent-color, var(--md-sys-color-primary));
    box-shadow: var(--shadow-soft-md);
    transform: translateY(-2px);
  }
  .card:hover,
  .beneficio-item:hover,
  .sidebar-card:hover,
  .description-about-me:hover {
    border-color: var(--md-sys-color-primary);
    box-shadow:
      0 12px 32px oklch(from var(--md-sys-color-primary) l c h / 12%),
      0 4px 12px oklch(0% 0 0deg / 8%);
    transform: translateY(-3px) scale(1.005);
  }

  /* ✅ EXCEÇÃO: about-project-display.card não tem scale para evitar desfoque */
  .about-project-display.card:hover {
    transform: translateY(-3px);
  }

  /* ✅ HOVER ESPECÍFICO PARA COMBINAÇÃO DE CLASSES E ATRIBUTOS */
  [data-hover='lift']:hover {
    box-shadow: var(--md-sys-elevation-level3);
    transform: translateY(calc(var(--space-4xs)*-1));
    transition: var(--transition-transform), var(--transition-elevation);
    animation: shadow-drop-2-center var(--md-sys-motion-duration-medium4) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  .card-base[data-hover='lift']:hover {
    box-shadow: var(--shadow-rich-lg);
    transform: var(--transform-hover-lift-md);
    transition: var(--transition-transform), var(--transition-elevation);
    animation: shadow-drop-2-center var(--duration-smooth) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  #sidebar-sobre .sidebar-card:hover {
    transform: none;
    animation: none;
  }
  .modal__close:hover {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container);
    box-shadow:
      0 0 0 2px var(--md-sys-color-primary),
      0 0 16px oklch(from var(--md-sys-color-primary) l c h / 25%);
    transition:
      color var(--duration-fast) var(--ease-ethereal),
      background-color var(--duration-fast) var(--ease-ethereal),
      box-shadow var(--duration-smooth) var(--ease-ethereal);
  }
  .modal__drag-indicator {
    display: none;
  }
  .faq-modal .faq-card:not([open]):hover {
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level3);
    transform: translateY(calc(var(--space-s)*-1));
  }
  .differentiation-column:hover {
    border-color: var(--subtitle-color);
    box-shadow:
      0 4px 12px oklch(from var(--subtitle-color) l c h / 8%),
      0 1px 4px oklch(0% 0 0deg / 4%);
    transform: translateY(-2px);
  }
}
@media (hover: hover) and (pointer: fine){
  a:not([class]),
  button:not([class]) {
    transition: var(--transition-colors);
  }
  .btn:hover:not(:disabled)::before {
    opacity: var(--state-hover-opacity);
  }
  .feedback-modal__star-btn:hover {
    transform: scale(1.1);
  }
  /* Mouse device - hide touch-only elements */
  .touch-only,
  .hide-mouse {
    display: none;
  }

  .show-mouse {
    display: block;
  }
  .interactive-base:hover::before {
    opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
  }
}
@media (hover: none){
  .modal__close:active {
    transform: scale(0.95);
  }
}
@media (hover: none) and (pointer: coarse){
  .description-about-me:hover {
    box-shadow: var(--md-sys-elevation-level1);
    transform: none;
  }

  .btn,
  .btn--filled,
  .btn--outlined {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Remove hover states em touch devices */
  .faq-question:hover,
  .card:hover {
    background-color: initial;
    transform: none;
  }

  /* ===================================
   ANIMAÇÕES DE ENTRADA (MANTIDAS)
   =================================== */

  /* ... (código existente) ... */

  /* ===================================
   NOTIFICAÇÕES (Migrado de progress-bar.css)
   =================================== */
  .material-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: var(--z-notification);
    padding: var(--space-l) var(--space-xl);
    font-family: var(--md-ref-typeface-plain);
    font-weight: var(--font-medium);
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--md-sys-elevation-level4);
    opacity: 0;
    transform: var(--transform-center-scale-sm);
    animation: notification-appear 2s var(--md-sys-motion-easing-emphasized);
  }

  /* ===================================
   MODO DE LEITURA FOCADA (Migrado de progress-bar.css)
   =================================== */
  body.focus-reading-mode {
    background: var(--md-sys-color-surface);
  }

  body.focus-reading-mode article,
  body.focus-reading-mode main {
    max-width: var(--max-width-reading-mode, 46.875rem);
    padding: var(--space-xl) var(--space-xl);
    margin: 0 auto;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--md-sys-elevation-level2);
  }
  .btn-toggle:active,
  .toggle-btn:active {
    box-shadow: var(--md-sys-elevation-level1);
    transform: scale(0.96);
  }
  .btn:hover:not(:disabled) {
    box-shadow: var(--md-sys-elevation-level1);
    transform: none;
  }

  .btn:hover:not(:disabled)::before {
    opacity: var(--opacity-hidden);
  }

  .btn:active:not(:disabled) {
    transform: translateZ(0) scale(0.97);
  }
  .btn:active::before {
    opacity: var(--state-pressed-opacity);
  }
    .card:hover,
    .beneficio-item:hover,
    .sidebar-card:hover {
      box-shadow: var(--md-sys-elevation-level1);
      transform: none;
    }

    .sidebar-card__header iconify-icon:hover,
    .sidebar-lista__item:hover {
      color: inherit;
      transform: none;
    }

    /* Touch Feedback (Scale Press) */
    .card:active,
    .beneficio-item:active,
    .sidebar-card:active,
    .description-about-me:active {
      box-shadow: var(--md-sys-elevation-level0);
      transform: scale(0.98);
      transition: transform var(--duration-fast) var(--ease-snappy);
    }
  .modal__close {
    opacity: 0.85;
  }
  /* Touch device - hide mouse-only elements */
  .hide-touch,
  .mouse-only {
    display: none;
  }

  .show-touch {
    display: block;
  }
  .interactive-base:active::before {
    opacity: var(--state-pressed-opacity);
  }
}
@media (orientation: landscape){
  .hide-landscape,
  .portrait-only {
    display: none;
  }

  .show-landscape {
    display: block;
  }
}
@media (orientation: portrait){
  .landscape-only,
  .hide-portrait {
    display: none;
  }

  .show-portrait {
    display: block;
  }
}
@media (prefers-color-scheme: dark){
  body:not(.light-mode, .dark-theme) .icon-light {
    display: none;
  }

  body:not(.light-mode, .dark-theme) .icon-dark {
    display: block;
  }
}
@media (prefers-contrast: high){
  :root {
    /* Increase opacities for better contrast */
    --opacity-low: 0.7;
    --opacity-lower: 0.6;
    --opacity-faint: 0.5;
    --opacity-subtle: 0.4;
    --opacity-subtler: 0.3;
    --opacity-subtlest: 0.25;
    --opacity-minimal: 0.15;
  }
}
@media (prefers-contrast: more){

  .fluxo-plan,
  .fluxo-checkbox {
    border-width: 3px;
  }

  .btn::before,
  .interactive-base::before {
    background-color: var(--md-sys-color-on-surface);
  }

  .link:hover,
  .link:focus-visible {
    text-decoration-thickness: 2px;
  }
}
@media (prefers-reduced-motion: no-preference){
  .marquee-track.scroll-left:not(.manual-active) {
    animation: scrollMarqueeLeft 40s linear infinite;
  }

  .marquee-track.scroll-right:not(.manual-active) {
    animation: scrollMarqueeRight 40s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce){
  /* Desativar smooth scrolling */
  html {
    scroll-behavior: auto !important;
  }

  html:focus-within {
    scroll-behavior: auto !important;
  }

  /* Desativar TODAS as transições e animações por defeito */
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* NOTA: prefers-reduced-motion para animações movido para _scroll-animations.css */
  :root {
    /* Reduz todas as durações a 0ms.
       NOTA: Estas variáveis são fallback pois o _reset.css
       aplica animation: none !important universalmente.
       Valores de 0ms garantem que mesmo se algo usar
       variáveis diretamente, não haverá movimento visível.
    */
    --md-sys-motion-duration-short: 0ms;
    --md-sys-motion-duration-short1: 0ms;
    --md-sys-motion-duration-short2: 0ms;
    --md-sys-motion-duration-short3: 0ms;
    --md-sys-motion-duration-short4: 0ms;
    --md-sys-motion-duration-medium: 0ms;
    --md-sys-motion-duration-medium1: 0ms;
    --md-sys-motion-duration-medium2: 0ms;
    --md-sys-motion-duration-medium3: 0ms;
    --md-sys-motion-duration-medium4: 0ms;
    --md-sys-motion-duration-long: 0ms;
    --md-sys-motion-duration-long1: 0ms;
    --md-sys-motion-duration-long2: 0ms;
    --md-sys-motion-duration-long3: 0ms;
    --md-sys-motion-duration-long4: 0ms;
    --md-sys-motion-duration-extra-long1: 0ms;
    --md-sys-motion-duration-extra-long2: 0ms;
    --md-sys-motion-duration-extra-long3: 0ms;
    --md-sys-motion-duration-extra-long4: 0ms;

    /* Simplifica todas as curvas para linear */
    --md-sys-motion-easing-standard: linear;
    --md-sys-motion-easing-emphasized: linear;
    --md-sys-motion-easing-decelerated: linear;
    --md-sys-motion-easing-legacy: linear;
    --easing-padrao: linear;
    --easing-emphasized: linear;

    /* Mantém atrasos (não afetam movimento) */

    /* delays permanecem inalterados */
    /* Disable motion-sensitive transforms */
    --transform-hover-lift: translateY(0);
    --transform-hover-lift-md: translateY(0);
    --transform-hover-lift-lg: translateY(0);
    --transform-reveal-sm: translateY(0);
    --transform-reveal-md: translateY(0);
    --transform-reveal-lg: translateY(0);
    /* Reduce shadow transitions */
    --shadow-primary-sm: var(--shadow-sm);
    --shadow-primary-md: var(--shadow-md);
    --shadow-primary-lg: var(--shadow-lg);
    /* Disable hover animations */
    --hover-default: opacity var(--duration-fast) linear;
    --hover-medium: opacity var(--duration-fast) linear;
    --hover-strong: opacity var(--duration-fast) linear;
    --hover-grow: opacity var(--duration-fast) linear;

    /* Disable loading pulse */
    --loading-pulse: none;

    /* Simplify transitions */
    --focus-transition: box-shadow var(--duration-fast) linear;
  }
  .lazy-loading {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .animate-on-scroll,
  .animate-on-fade,
  .animate-on-slide-up,
  .animate-on-slide-down,
  .animate-on-slide-left,
  .animate-on-slide-right,
  .animate-on-scale,
  .animate-on-rotate,
  .reveal-on-scroll,
  .animate-title,
  .animate-title--pop,
  .animate-title--tracking {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .animate-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .pulse-loader {
    animation: none;
  }

  .is-animating {
    /* will-change removido */
  }
  ::view-transition-group(root) {
    animation: none !important;
  }

  .hero-image--fading-out,
  .hero-image--fading-in {
    transition: none !important;
    opacity: 1 !important;
  }
  /* ========================================================================
     FLUXO ATENDIMENTO (5 animações infinitas)
     ======================================================================== */

  .fluxo-atendimento::before,
  .fluxo-etapa--active .fluxo-etapa-indicator,
  .fluxo-opcao-status--online,
  .fluxo-progress-bar::before,
  .fluxo-loading-spinner,
  [class*='fluxo-gradient'],
  [class*='pulse-active'],
  [class*='progress-shine'] {
    transition: none !important;
    animation: none !important;
  }

  /* Estado estático para elementos animados do fluxo */
  .fluxo-atendimento::before {
    background: var(--md-sys-color-primary);
  }

  .fluxo-etapa--active .fluxo-etapa-indicator {
    box-shadow: 0 0 0 4px var(--md-sys-color-primary);
  }

  .fluxo-opcao-status--online {
    background-color: var(--md-sys-color-primary);
  }

  /* ========================================================================
     EXPERIENCE (2 animações infinitas)
     ======================================================================== */

  .exp-cta-icon.pulsate,
  .exp-cta-arrow,
  [class*='exp-pulse'],
  [class*='exp-slide'] {
    animation: none !important;
  }

  .exp-cta-icon.pulsate {
    opacity: 1;
    transform: scale(1);
  }

  /* ========================================================================
     CHAT (2 animações infinitas)
     ======================================================================== */

  .dot,
  .chat-indicator,
  [class*='typing'],
  [class*='ping'] {
    animation: none !important;
  }

  .dot {
    opacity: 1;
    transform: scale(1);
  }

  /* ========================================================================
     PRICING (3 animações infinitas)
     ======================================================================== */

  .pricing-icon-wrapper,
  .swipe-hint-icon,
  .swipe-hint-arrow,
  [class*='swipe-hint-pulse'],
  [class*='swipe-arrow'] {
    animation: none !important;
  }

  .swipe-hint-icon {
    opacity: 1;
    transform: translateX(0);
  }

  /* ========================================================================
     ARTICLES MODAL (3 animações infinitas)
     ======================================================================== */

  .article-modal-loading-spinner,
  .article-marquee-track,
  .empty-state-icon,
  [class*='marquee-pingpong'],
  [class*='emptyIconFloat'] {
    animation: none !important;
  }

  .empty-state-icon {
    transform: translateY(0) rotate(0);
  }

  .article-marquee-track {
    transform: translateX(0);
  }

  /* ========================================================================
     LOADERS & SPINNERS (genéricos)
     ======================================================================== */

  [class*='loading-spinner'],
  [class*='spinner'],
  [class*='-spin'],
  .back-bg-decoration,
  .fa-spin,
  .icon-spin {
    animation: none !important;
  }

  /* Fornecer alternativas estáticas para loaders */
  .is-loading::after,
  [class*='loading-spinner']::before,
  [class*='spinner']::before {
    width: auto;
    height: auto;
    font-size: var(--text-sm);
    color: var(--md-sys-color-on-surface-variant);
    content: 'A carregar...';
    border: none;
    border-radius: 0;
    animation: none !important;
  }

  /* ========================================================================
     PULSE & BOUNCE (genéricos)
     ======================================================================== */

  [class*='pulsate'],
  [class*='pulse'][class*='infinite'],
  [class*='bounce'][class*='infinite'],
  .animate-pulse,
  .animate-bounce {
    animation: none !important;
  }

  /* Estados estáticos visíveis */
  .animate-pulse {
    opacity: 1;
  }

  .animate-bounce {
    transform: translateY(0);
  }

  /* ========================================================================
     FLOAT & SHAKE
     ======================================================================== */

  [class*='float'][class*='infinite'],
  [class*='shake'][class*='infinite'] {
    animation: none !important;
  }

  [class*='float'] {
    transform: translateY(0);
  }

  [class*='shake'] {
    transform: translateX(0);
  }

  /* ========================================================================
     MARQUEE & TICKER
     ======================================================================== */

  [class*='marquee'],
  [class*='ticker'],
  [class*='scroll-horizontal'] {
    animation: none !important;
  }

  /* Mostrar conteúdo estático em vez de marquee */
  [class*='marquee-track'],
  [class*='ticker-track'] {
    transform: translateX(0);
    animation: none !important;
  }

  /* ========================================================================
     TYPEWRITER CURSOR
     ======================================================================== */

  [class*='typewriter'][class*='cursor'],
  [data-typewriter='cursor'] {
    border-color: var(--md-sys-color-primary);
    animation: none !important;
  }

  /* ========================================================================
     RIPPLE & WAVE
     ======================================================================== */

  [class*='ripple'][class*='infinite'],
  [class*='wave'][class*='infinite'] {
    animation: none !important;
  }

  /* ========================================================================
     EXPERIENCE MARQUEE
     ======================================================================== */

  .gesture-swipe,
  [class*='gesture-swipe'] {
    animation: none !important;
  }

  /* ========================================================================
     NOTIFICATION AUTO-HIDE
     ======================================================================== */

  /* Se a notificação desaparecer sozinha, fornecer botão de fechar */
  [class*='notification'][class*='auto-hide'],
  [class*='toast'][class*='auto-hide'] {
    transition: opacity 0.3s ease;
    animation: none !important;
  }

  /* ========================================================================
     Skeleton loading estático
     ======================================================================== */

  [class*='skeleton-loading'],
  [class*='shimmer'][class*='infinite'] {
    background: var(--md-sys-color-surface-container-highest);
    animation: none !important;
  }

  /* ========================================================================
     ACCORDION - Desativar animações de expansão
     ======================================================================== */

  [class*='accordion'],
  [class*='faq-item'],
  .about-accordion-panel,
  .pricing-accordion-item {
    transition: none !important;
  }

  [class*='accordion'][class*='open'],
  [class*='accordion'][class*='expanded'],
  [class*='faq-item'].is-open,
  [class*='faq-item'].is-active,
  .about-accordion-panel.open,
  .pricing-accordion-item.is-open {
    transition: none !important;
  }

  /* Conteúdo de accordion visível sem animação */
  [class*='accordion'][class*='__content'],
  [class*='accordion'][class*='__body'],
  [class*='faq-answer'],
  [class*='accordion-panel'][class*='__inner'],
  [class*='accordion-item'][class*='__content'] {
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Ícones de accordion sem rotação */
  [class*='accordion'][class*='__icon'],
  [class*='faq-icon'],
  .accordion-icon {
    transform: none !important;
    transition: none !important;
  }

  .title--level-3,
  .title--level-4,
  .experience-columns__header h4,
  .experience-description h4,
  [class*='revelar-ao-rolar'],
  .description-about-me,
  .subsection>*,
  .subsection__content>*,
  .about-project-btn,
  .subsection__intro,
  .experience-examples-list>li {
    transition: none !important;
    animation: none !important;
  }

  .title--level-3[class*='animate-']:not(.is-visible),
  .title--level-4[class*='animate-']:not(.is-visible),
  .experience-columns__header h4[class*='animate-']:not(.is-visible),
  .experience-description h4[class*='animate-']:not(.is-visible) {
    opacity: 1;
    transform: none;
  }

  /* Garantir visibilidade dos elementos da subsection */
  .subsection>*,
  .subsection__content>*,
  .about-project-btn,
  .experience-examples-list>li {
    opacity: 1 !important;
    transform: none !important;
  }
  .navbar .navbar__link {
    opacity: var(--opacity-visible);
    transform: none;
    animation: none;
    animation-delay: 0s;
  }

  .navbar .theme-toggle iconify-icon {
    transform: none;
    transition: none;
    animation: none;
  }

  /* Disable all animations for users who prefer reduced motion */
  .icon-system,
  .menu-social-links a,
  .loading-spinner {
    transition: none !important;
    animation: none !important;
  }

  /* Keep transform changes only for layout purposes */
  .menu-social-links a {
    transform: rotateY(0) rotateX(0) translateZ(0);
  }

  .modal,
  .modal__content,
  .modal__overlay,
  .modal__close {
    transition: none !important;
    animation: none !important;
  }

  .faq-modal .faq-card,
  .faq-modal .faq-card__toggle-icon,
  .faq-modal .faq-btn,
  .faq-modal .seta-icon,
  .faq-modal .icon-bubble,
  .faq-modal .faq-item,
  .faq-modal .faq-card__content {
    transition: none;
  }

  .faq-modal .faq-card:hover {
    transform: none;
  }

  .faq-modal .faq-card[open] {
    grid-template-rows: auto 1fr;
  }
  .feedback-modal__star-btn,
  .feedback-modal__star-btn:hover,
  .feedback-modal__star-btn:active,
  .feedback-modal__form-input,
  .feedback-modal__form-textarea {
    transform: none !important;
    transition: none !important;
  }
  *,
  ::before,
  ::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: -1ms !important;
    scroll-behavior: auto !important;
  }

  .carousel__indicators-track,
  .carousel__indicator {
    transition: none !important;
  }

  input,
  select,
  textarea,
  .form-input,
  .form-select,
  .form-textarea {
    transform: none;
    transition: none;
  }

  [class*='badge']:not(.btn),
  .badge {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  [class*='badge'].pulsing,
  .badge.pulsing {
    animation: none !important;
  }
  .article-item__title.marquee .marquee-content {
    overflow: visible;
    white-space: normal;
    transform: translateX(0);
    animation: none;
  }
  .marquee-track.scroll-left,
  .marquee-track.scroll-right {
    transform: translateX(0);
    animation: none;
  }

  /* Em reduced motion, mostrar todos os itens estáticos */
  .marquee-track {
    overflow: auto visible;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--space-m);
  }

  .marquee-track::-webkit-scrollbar {
    height: 4px;
  }

  .marquee-track::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 2px;
  }

  .marquee-item {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
  .toast {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .card.is-loading::before,
  .beneficio-item.is-loading::before,
  .pricing-card.is-loading::before {
    animation: none;
  }

  .card.is-loading .skeleton-title,
  .card.is-loading .skeleton-text {
    animation: none;
  }

  .card.is-error,
  .form.is-error,
  .btn.is-error {
    animation: none;
  }

  .card.is-success,
  .form.is-success,
  .btn.is-success {
    animation: none;
  }

  .card.is-empty {
    animation: none;
  }

  .form.is-loading .form-submit::after,
  .form.is-loading .contact__form-submit::after,
  .btn.is-loading::after,
  button.is-loading::after {
    animation: none;
  }
  .hero__title,
  .hero__subtitle,
  .hero__image-container,
  .hero__cta,
  .hero__explanation-btn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .hero__subtitle span {
    border: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero__service-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero__cta.is-visible {
    animation: none !important;
  }
  .differentiation-box.is-visible .differentiation-column {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .experience-columns__content>.experience-column {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .highlight-list>.highlight-list__item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .fluxo-container,
  .fluxo-step,
  .fluxo-progress__bar,
  .fluxo-indicators__dot,
  .fluxo-plan,
  .fluxo-feature,
  .fluxo-toast,
  .animar-entrada,
  .animar-subida {
    transition: none;
    animation: none;
  }

  .fluxo-steps {
    transition: transform 1ms linear;
  }

  .loading-message,
  .fluxo-progress__message,
  .loading-overlay {
    transition: none !important;
    animation: none !important;
  }

  .loading-overlay.is-hiding {
    display: none;
  }

  .avatar-glow,
  .bg-orb {
    animation: none;
  }
  .skeleton {
    background: var(--md-sys-color-surface-variant);
    animation: none;
  }

  .skeleton-pulse {
    opacity: 0.7;
    animation: none;
  }
}
@media print{
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .animate-on-scroll,
  .animate-on-fade,
  .animate-on-slide-up,
  .animate-on-slide-down,
  .animate-on-slide-left,
  .animate-on-slide-right,
  .animate-on-scale,
  .animate-on-rotate,
  .reveal-on-scroll,
  .lazy-loading,
  .animate-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}