/**
 * ============================================================================
 * PIRANOT - SISTEMA DE ESTILOS INSTITUCIONAIS
 * ============================================================================
 * 
 * Arquitetura: ITCSS + BEM
 * Versão: 1.0.0
 * Autor: Frontend Architect Senior
 * 
 * Estrutura:
 * 1. Settings    - Variáveis e configurações
 * 2. Generic     - Reset e normalização
 * 3. Elements    - Elementos HTML base
 * 4. Objects     - Padrões de layout
 * 5. Components  - Componentes específicos
 * 6. Utilities   - Classes utilitárias
 * 7. Trumps      - Overrides e !important (mínimo)
 * 
 * Breakpoints:
 * - Mobile:  0px - 767px    (base)
 * - Tablet:  768px - 1023px (min-width: 768px)
 * - Desktop: 1024px+        (min-width: 1024px)
 * - Large:   1200px+        (min-width: 1200px)
 * 
 * ============================================================================
 */


/* ============================================================================
   1. SETTINGS - Variáveis CSS Custom Properties
   ============================================================================ */

:root {
  /* Cores Primárias */
  --inst-color-primary: #0b1f3f;
  --inst-color-primary-dark: #08162d;
  --inst-color-primary-light: #1a3a6b;
  --inst-color-primary-rgb: 11, 31, 63;
  
  /* Cores Secundárias */
  --inst-color-secondary: #ff6b35;
  --inst-color-secondary-dark: #e55a2b;
  --inst-color-secondary-light: #ff8555;
  --inst-color-secondary-rgb: 255, 107, 53;
  
  /* Cores de Texto */
  --inst-color-text: #333333;
  --inst-color-text-light: #666666;
  --inst-color-text-muted: #888888;
  --inst-color-text-inverse: #ffffff;
  
  /* Cores de Fundo */
  --inst-color-bg: #ffffff;
  --inst-color-bg-alt: #f5f5f5;
  --inst-color-bg-dark: #0b1f3f;
  
  /* Cores de Estado */
  --inst-color-success: #28a745;
  --inst-color-warning: #ffc107;
  --inst-color-error: #dc3545;
  --inst-color-info: #17a2b8;
  
  /* Cores de Borda */
  --inst-color-border: #e0e0e0;
  --inst-color-border-light: #eeeeee;
  
  /* Tipografia - Família */
  --inst-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                       "Helvetica Neue", Arial, sans-serif;
  --inst-font-secondary: Georgia, "Times New Roman", serif;
  
  /* Tipografia - Tamanhos */
  --inst-font-size-xs: 0.75rem;     /* 12px */
  --inst-font-size-sm: 0.875rem;    /* 14px */
  --inst-font-size-base: 1rem;      /* 16px */
  --inst-font-size-md: 1.125rem;    /* 18px */
  --inst-font-size-lg: 1.25rem;     /* 20px */
  --inst-font-size-xl: 1.5rem;      /* 24px */
  --inst-font-size-2xl: 1.75rem;    /* 28px */
  --inst-font-size-3xl: 2rem;       /* 32px */
  --inst-font-size-4xl: 2.5rem;     /* 40px */
  
  /* Tipografia - Pesos */
  --inst-font-weight-light: 300;
  --inst-font-weight-normal: 400;
  --inst-font-weight-medium: 500;
  --inst-font-weight-semibold: 600;
  --inst-font-weight-bold: 700;
  
  /* Tipografia - Altura da Linha */
  --inst-line-height-tight: 1.25;
  --inst-line-height-normal: 1.5;
  --inst-line-height-relaxed: 1.7;
  --inst-line-height-loose: 2;
  
  /* Espaçamento - Escala */
  --inst-space-xs: 0.25rem;   /* 4px */
  --inst-space-sm: 0.5rem;    /* 8px */
  --inst-space-md: 1rem;      /* 16px */
  --inst-space-lg: 1.5rem;    /* 24px */
  --inst-space-xl: 2rem;      /* 32px */
  --inst-space-2xl: 3rem;     /* 48px */
  --inst-space-3xl: 4rem;     /* 64px */
  --inst-space-4xl: 6rem;     /* 96px */
  
  /* Layout */
  --inst-container-max: 1200px;
  --inst-content-max: 800px;
  --inst-sidebar-max: 320px;
  
  /* Bordas */
  --inst-border-radius-sm: 4px;
  --inst-border-radius-md: 8px;
  --inst-border-radius-lg: 12px;
  --inst-border-radius-xl: 16px;
  --inst-border-radius-full: 9999px;
  
  /* Sombras */
  --inst-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --inst-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --inst-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --inst-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
  
  /* Transições */
  --inst-transition-fast: 150ms ease;
  --inst-transition-base: 250ms ease;
  --inst-transition-slow: 350ms ease;
  
  /* Z-Index */
  --inst-z-base: 1;
  --inst-z-dropdown: 100;
  --inst-z-sticky: 200;
  --inst-z-fixed: 300;
  --inst-z-modal-backdrop: 400;
  --inst-z-modal: 500;
  
  /* Focus Ring para Acessibilidade */
  --inst-focus-ring-width: 3px;
  --inst-focus-ring-color: rgba(var(--inst-color-secondary-rgb), 0.5);
  --inst-focus-ring: 0 0 0 var(--inst-focus-ring-width) var(--inst-focus-ring-color);
}


/* ============================================================================
   2. GENERIC - Reset e Normalização
   ============================================================================ */

/* Box-sizing consistente */
.institucional *,
.institucional *::before,
.institucional *::after {
  box-sizing: border-box;
}

/* Reset de margens no container */
.institucional {
  margin: 0;
  padding: 0;
  font-family: var(--inst-font-primary);
  font-size: var(--inst-font-size-base);
  line-height: var(--inst-line-height-normal);
  color: var(--inst-color-text);
  background-color: var(--inst-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset de links */
.institucional a {
  color: var(--inst-color-secondary);
  text-decoration: none;
  transition: color var(--inst-transition-fast);
}

.institucional a:hover,
.institucional a:focus {
  color: var(--inst-color-secondary-dark);
  text-decoration: underline;
}

.institucional a:focus-visible {
  outline: none;
  box-shadow: var(--inst-focus-ring);
  border-radius: var(--inst-border-radius-sm);
}

/* Reset de imagens */
.institucional img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ============================================================================
   3. ELEMENTS - Estilos Base de Elementos HTML
   ============================================================================ */

/* Headings */
.institucional h1,
.institucional h2,
.institucional h3,
.institucional h4,
.institucional h5,
.institucional h6 {
  margin: 0 0 var(--inst-space-md);
  font-weight: var(--inst-font-weight-bold);
  line-height: var(--inst-line-height-tight);
  color: var(--inst-color-primary);
}

.institucional h1 {
  font-size: var(--inst-font-size-2xl);
  margin-bottom: var(--inst-space-lg);
}

.institucional h2 {
  font-size: var(--inst-font-size-xl);
  margin-top: var(--inst-space-xl);
}

.institucional h3 {
  font-size: var(--inst-font-size-lg);
  margin-top: var(--inst-space-lg);
}

.institucional h4 {
  font-size: var(--inst-font-size-md);
}

.institucional h5,
.institucional h6 {
  font-size: var(--inst-font-size-base);
}

/* Parágrafos */
.institucional p {
  margin: 0 0 var(--inst-space-md);
}

/* Listas */
.institucional ul,
.institucional ol {
  margin: 0 0 var(--inst-space-md);
  padding-left: var(--inst-space-lg);
}

.institucional li {
  margin-bottom: var(--inst-space-xs);
}

/* Listas sem estilo */
.institucional ul[class],
.institucional ol[class] {
  list-style: none;
  padding: 0;
}

/* Bloco de citação */
.institucional blockquote {
  margin: var(--inst-space-lg) 0;
  padding: var(--inst-space-md) var(--inst-space-lg);
  border-left: 4px solid var(--inst-color-secondary);
  background-color: var(--inst-color-bg-alt);
  font-style: italic;
  color: var(--inst-color-text-light);
}

/* Código inline e blocos */
.institucional code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  background-color: var(--inst-color-bg-alt);
  padding: 0.2em 0.4em;
  border-radius: var(--inst-border-radius-sm);
}

.institucional pre {
  background-color: var(--inst-color-bg-alt);
  padding: var(--inst-space-md);
  border-radius: var(--inst-border-radius-md);
  overflow-x: auto;
  margin-bottom: var(--inst-space-md);
}

.institucional pre code {
  background: none;
  padding: 0;
}

/* Tabelas */
.institucional table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--inst-space-md);
}

.institucional th,
.institucional td {
  padding: var(--inst-space-sm) var(--inst-space-md);
  text-align: left;
  border-bottom: 1px solid var(--inst-color-border);
}

.institucional th {
  font-weight: var(--inst-font-weight-semibold);
  color: var(--inst-color-primary);
  background-color: var(--inst-color-bg-alt);
}

.institucional tr:hover {
  background-color: var(--inst-color-bg-alt);
}

/* Strong e Em */
.institucional strong {
  font-weight: var(--inst-font-weight-semibold);
  color: var(--inst-color-primary);
}

.institucional em {
  font-style: italic;
}


/* ============================================================================
   4. OBJECTS - Padrões de Layout Reutilizáveis
   ============================================================================ */

/* Container principal */
.inst-container {
  width: 100%;
  max-width: var(--inst-container-max);
  margin: 0 auto;
  padding: 0 var(--inst-space-md);
}

/* Container para conteúdo de leitura */
.inst-container--narrow {
  max-width: var(--inst-content-max);
}

/* Grid responsivo */
.inst-grid {
  display: grid;
  gap: var(--inst-space-lg);
}

.inst-grid--2cols {
  grid-template-columns: 1fr;
}

.inst-grid--3cols {
  grid-template-columns: 1fr;
}

.inst-grid--4cols {
  grid-template-columns: 1fr;
}

/* Flex container */
.inst-flex {
  display: flex;
  gap: var(--inst-space-md);
}

.inst-flex--column {
  flex-direction: column;
}

.inst-flex--wrap {
  flex-wrap: wrap;
}

.inst-flex--center {
  align-items: center;
  justify-content: center;
}

.inst-flex--between {
  justify-content: space-between;
}


/* ============================================================================
   5. COMPONENTS - Componentes Específicos
   ============================================================================ */

/* ============================================
   5.1 SECTION - Seções Base
   ============================================ */

.inst-section {
  padding: var(--inst-space-2xl) 0;
}

.inst-section--alt {
  background-color: var(--inst-color-bg-alt);
}

.inst-section--dark {
  background-color: var(--inst-color-bg-dark);
  color: var(--inst-color-text-inverse);
}

.inst-section--dark h1,
.inst-section--dark h2,
.inst-section--dark h3,
.inst-section--dark h4,
.inst-section--dark h5,
.inst-section--dark h6 {
  color: var(--inst-color-text-inverse);
}

.inst-section--dark a {
  color: var(--inst-color-secondary-light);
}

.inst-section--compact {
  padding: var(--inst-space-xl) 0;
}

.inst-section--large {
  padding: var(--inst-space-3xl) 0;
}

/* ============================================
   5.2 HERO - Seção Hero
   ============================================ */

.inst-hero {
  position: relative;
  background: linear-gradient(135deg, var(--inst-color-primary) 0%, var(--inst-color-primary-dark) 100%);
  color: var(--inst-color-text-inverse);
  padding: var(--inst-space-3xl) 0;
  overflow: hidden;
}

.inst-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.inst-hero__container {
  position: relative;
  z-index: var(--inst-z-base);
}

.inst-hero__content {
  max-width: 800px;
}

.inst-hero__title {
  font-size: var(--inst-font-size-3xl);
  font-weight: var(--inst-font-weight-bold);
  margin-bottom: var(--inst-space-md);
  color: var(--inst-color-text-inverse);
  line-height: var(--inst-line-height-tight);
}

.inst-hero__subtitle {
  font-size: var(--inst-font-size-md);
  opacity: 0.9;
  margin-bottom: var(--inst-space-lg);
  line-height: var(--inst-line-height-relaxed);
}

.inst-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--inst-space-sm);
  background-color: var(--inst-color-secondary);
  color: var(--inst-color-text-inverse);
  padding: var(--inst-space-md) var(--inst-space-xl);
  border-radius: var(--inst-border-radius-md);
  font-weight: var(--inst-font-weight-semibold);
  transition: all var(--inst-transition-fast);
}

.inst-hero__cta:hover,
.inst-hero__cta:focus {
  background-color: var(--inst-color-secondary-dark);
  color: var(--inst-color-text-inverse);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--inst-shadow-md);
}

/* Hero compacto (para páginas internas) */
.inst-hero--compact {
  padding: var(--inst-space-2xl) 0;
}

.inst-hero--compact .inst-hero__title {
  font-size: var(--inst-font-size-2xl);
}

/* Hero com imagem de fundo */
.inst-hero--image {
  background: none;
}

.inst-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.inst-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--inst-color-primary-rgb), 0.95) 0%, rgba(var(--inst-color-primary-rgb), 0.85) 100%);
  z-index: -1;
}

/* ============================================
   5.3 CONTENT - Conteúdo Tipografado
   ============================================ */

.inst-content {
  max-width: var(--inst-content-max);
  margin: 0 auto;
  font-size: var(--inst-font-size-md);
  line-height: var(--inst-line-height-relaxed);
}

.inst-content h1 {
  font-size: var(--inst-font-size-3xl);
  border-bottom: 2px solid var(--inst-color-border);
  padding-bottom: var(--inst-space-sm);
}

.inst-content h2 {
  font-size: var(--inst-font-size-xl);
  color: var(--inst-color-primary);
  margin-top: var(--inst-space-2xl);
}

.inst-content h3 {
  font-size: var(--inst-font-size-lg);
  margin-top: var(--inst-space-xl);
}

.inst-content p {
  margin-bottom: var(--inst-space-lg);
}

.inst-content ul,
.inst-content ol {
  margin-bottom: var(--inst-space-lg);
}

.inst-content li {
  margin-bottom: var(--inst-space-sm);
}

/* Lista estilizada para conteúdo legal */
.inst-content__list--legal {
  list-style: none;
  padding: 0;
  counter-reset: legal-item;
}

.inst-content__list--legal > li {
  position: relative;
  padding-left: var(--inst-space-xl);
  margin-bottom: var(--inst-space-md);
}

.inst-content__list--legal > li::before {
  counter-increment: legal-item;
  content: counter(legal-item) ".";
  position: absolute;
  left: 0;
  color: var(--inst-color-secondary);
  font-weight: var(--inst-font-weight-bold);
}

/* ============================================
   5.4 CARD - Cards Reutilizáveis
   ============================================ */

.inst-card {
  background-color: var(--inst-color-bg);
  border-radius: var(--inst-border-radius-lg);
  box-shadow: var(--inst-shadow-md);
  overflow: hidden;
  transition: transform var(--inst-transition-fast), box-shadow var(--inst-transition-fast);
}

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

.inst-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.inst-card__body {
  padding: var(--inst-space-lg);
}

.inst-card__title {
  font-size: var(--inst-font-size-lg);
  margin-bottom: var(--inst-space-sm);
  color: var(--inst-color-primary);
}

.inst-card__text {
  color: var(--inst-color-text-light);
  line-height: var(--inst-line-height-relaxed);
  margin-bottom: var(--inst-space-md);
}

.inst-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--inst-space-xs);
  color: var(--inst-color-secondary);
  font-weight: var(--inst-font-weight-semibold);
  font-size: var(--inst-font-size-sm);
}

.inst-card__link:hover {
  gap: var(--inst-space-sm);
}

/* Card com ícone */
.inst-card--icon {
  text-align: center;
  padding: var(--inst-space-xl);
}

.inst-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--inst-space-md);
  background: linear-gradient(135deg, var(--inst-color-primary) 0%, var(--inst-color-primary-light) 100%);
  border-radius: var(--inst-border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--inst-color-text-inverse);
  font-size: var(--inst-font-size-xl);
}

/* Card de destaque */
.inst-card--featured {
  border: 2px solid var(--inst-color-secondary);
  position: relative;
}

.inst-card--featured::before {
  content: 'Destaque';
  position: absolute;
  top: var(--inst-space-md);
  right: var(--inst-space-md);
  background-color: var(--inst-color-secondary);
  color: var(--inst-color-text-inverse);
  padding: var(--inst-space-xs) var(--inst-space-sm);
  border-radius: var(--inst-border-radius-sm);
  font-size: var(--inst-font-size-xs);
  font-weight: var(--inst-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   5.5 FORM - Formulários
   ============================================ */

.inst-form {
  max-width: 600px;
}

.inst-form__group {
  margin-bottom: var(--inst-space-lg);
}

.inst-form__label {
  display: block;
  margin-bottom: var(--inst-space-sm);
  font-weight: var(--inst-font-weight-medium);
  color: var(--inst-color-text);
}

.inst-form__label--required::after {
  content: ' *';
  color: var(--inst-color-error);
}

.inst-form__input,
.inst-form__textarea,
.inst-form__select {
  width: 100%;
  padding: var(--inst-space-md);
  border: 1px solid var(--inst-color-border);
  border-radius: var(--inst-border-radius-md);
  font-family: inherit;
  font-size: var(--inst-font-size-base);
  color: var(--inst-color-text);
  background-color: var(--inst-color-bg);
  transition: border-color var(--inst-transition-fast), box-shadow var(--inst-transition-fast);
}

.inst-form__input:focus,
.inst-form__textarea:focus,
.inst-form__select:focus {
  outline: none;
  border-color: var(--inst-color-secondary);
  box-shadow: 0 0 0 3px rgba(var(--inst-color-secondary-rgb), 0.15);
}

.inst-form__input::placeholder,
.inst-form__textarea::placeholder {
  color: var(--inst-color-text-muted);
}

.inst-form__input:disabled,
.inst-form__textarea:disabled,
.inst-form__select:disabled {
  background-color: var(--inst-color-bg-alt);
  cursor: not-allowed;
}

.inst-form__textarea {
  min-height: 150px;
  resize: vertical;
}

.inst-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--inst-space-md) center;
  padding-right: var(--inst-space-xl);
}

.inst-form__hint {
  display: block;
  margin-top: var(--inst-space-xs);
  font-size: var(--inst-font-size-sm);
  color: var(--inst-color-text-light);
}

.inst-form__error {
  display: block;
  margin-top: var(--inst-space-xs);
  font-size: var(--inst-font-size-sm);
  color: var(--inst-color-error);
}

.inst-form__checkbox,
.inst-form__radio {
  display: flex;
  align-items: flex-start;
  gap: var(--inst-space-sm);
  cursor: pointer;
}

.inst-form__checkbox input,
.inst-form__radio input {
  margin-top: 0.25em;
  width: 18px;
  height: 18px;
  accent-color: var(--inst-color-secondary);
}

/* Grid de formulário */
.inst-form__grid {
  display: grid;
  gap: var(--inst-space-md);
}

/* ============================================
   5.6 BUTTON - Botões
   ============================================ */

.inst-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--inst-space-sm);
  padding: var(--inst-space-md) var(--inst-space-xl);
  font-family: inherit;
  font-size: var(--inst-font-size-base);
  font-weight: var(--inst-font-weight-semibold);
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--inst-border-radius-md);
  cursor: pointer;
  transition: all var(--inst-transition-fast);
}

.inst-btn:focus-visible {
  outline: none;
  box-shadow: var(--inst-focus-ring);
}

.inst-btn--primary {
  background-color: var(--inst-color-secondary);
  color: var(--inst-color-text-inverse);
}

.inst-btn--primary:hover,
.inst-btn--primary:focus {
  background-color: var(--inst-color-secondary-dark);
  color: var(--inst-color-text-inverse);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--inst-shadow-md);
}

.inst-btn--secondary {
  background-color: var(--inst-color-primary);
  color: var(--inst-color-text-inverse);
}

.inst-btn--secondary:hover,
.inst-btn--secondary:focus {
  background-color: var(--inst-color-primary-dark);
  color: var(--inst-color-text-inverse);
  text-decoration: none;
}

.inst-btn--outline {
  background-color: transparent;
  color: var(--inst-color-secondary);
  border: 2px solid var(--inst-color-secondary);
}

.inst-btn--outline:hover,
.inst-btn--outline:focus {
  background-color: var(--inst-color-secondary);
  color: var(--inst-color-text-inverse);
  text-decoration: none;
}

.inst-btn--ghost {
  background-color: transparent;
  color: var(--inst-color-text);
}

.inst-btn--ghost:hover,
.inst-btn--ghost:focus {
  background-color: var(--inst-color-bg-alt);
  color: var(--inst-color-text);
  text-decoration: none;
}

.inst-btn--large {
  padding: var(--inst-space-md) var(--inst-space-2xl);
  font-size: var(--inst-font-size-lg);
}

.inst-btn--small {
  padding: var(--inst-space-sm) var(--inst-space-md);
  font-size: var(--inst-font-size-sm);
}

.inst-btn--block {
  width: 100%;
}

.inst-btn:disabled,
.inst-btn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================
   5.7 CONTACT - Componentes de Contato
   ============================================ */

.inst-contact__grid {
  display: grid;
  gap: var(--inst-space-xl);
}

.inst-contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--inst-space-lg);
}

.inst-contact__item {
  display: flex;
  align-items: flex-start;
  gap: var(--inst-space-md);
}

.inst-contact__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--inst-color-primary) 0%, var(--inst-color-primary-light) 100%);
  border-radius: var(--inst-border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--inst-color-text-inverse);
  font-size: var(--inst-font-size-lg);
}

.inst-contact__details h3 {
  font-size: var(--inst-font-size-md);
  margin-bottom: var(--inst-space-xs);
  margin-top: 0;
}

.inst-contact__details p {
  color: var(--inst-color-text-light);
  margin-bottom: 0;
}

.inst-contact__map {
  width: 100%;
  height: 300px;
  border-radius: var(--inst-border-radius-lg);
  overflow: hidden;
  background-color: var(--inst-color-bg-alt);
}

.inst-contact__map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================
   5.8 FEATURE - Lista de Features/Benefícios
   ============================================ */

.inst-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--inst-space-md);
  margin-bottom: var(--inst-space-lg);
}

.inst-feature__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--inst-color-secondary) 0%, var(--inst-color-secondary-light) 100%);
  border-radius: var(--inst-border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--inst-color-text-inverse);
  font-size: var(--inst-font-size-xl);
}

.inst-feature__content h3 {
  font-size: var(--inst-font-size-md);
  margin-bottom: var(--inst-space-xs);
  margin-top: 0;
}

.inst-feature__content p {
  color: var(--inst-color-text-light);
  margin-bottom: 0;
}

/* ============================================
   5.9 TIMELINE - Linha do Tempo
   ============================================ */

.inst-timeline {
  position: relative;
  padding-left: var(--inst-space-xl);
}

.inst-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--inst-color-secondary) 0%, var(--inst-color-primary) 100%);
}

.inst-timeline__item {
  position: relative;
  padding-bottom: var(--inst-space-xl);
}

.inst-timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--inst-space-xl) + 2px);
  top: 4px;
  width: 12px;
  height: 12px;
  background-color: var(--inst-color-secondary);
  border-radius: var(--inst-border-radius-full);
  border: 2px solid var(--inst-color-bg);
}

.inst-timeline__year {
  font-size: var(--inst-font-size-sm);
  color: var(--inst-color-secondary);
  font-weight: var(--inst-font-weight-semibold);
  margin-bottom: var(--inst-space-xs);
}

.inst-timeline__title {
  font-size: var(--inst-font-size-md);
  margin-bottom: var(--inst-space-xs);
  margin-top: 0;
}

.inst-timeline__text {
  color: var(--inst-color-text-light);
  margin-bottom: 0;
}

/* ============================================
   5.10 BREADCRUMB - Navegação de Migalhas
   ============================================ */

.inst-breadcrumb {
  padding: var(--inst-space-md) 0;
  background-color: var(--inst-color-bg-alt);
  border-bottom: 1px solid var(--inst-color-border);
}

.inst-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--inst-space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--inst-font-size-sm);
}

.inst-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--inst-space-sm);
}

.inst-breadcrumb__item:not(:last-child)::after {
  content: '/';
  color: var(--inst-color-text-muted);
}

.inst-breadcrumb__link {
  color: var(--inst-color-text-light);
}

.inst-breadcrumb__link:hover {
  color: var(--inst-color-secondary);
}

.inst-breadcrumb__current {
  color: var(--inst-color-text);
  font-weight: var(--inst-font-weight-medium);
}

/* ============================================
   5.11 ALERT - Mensagens de Alerta
   ============================================ */

.inst-alert {
  padding: var(--inst-space-md) var(--inst-space-lg);
  border-radius: var(--inst-border-radius-md);
  border-left: 4px solid;
  margin-bottom: var(--inst-space-lg);
}

.inst-alert--success {
  background-color: rgba(40, 167, 69, 0.1);
  border-color: var(--inst-color-success);
  color: #155724;
}

.inst-alert--warning {
  background-color: rgba(255, 193, 7, 0.1);
  border-color: var(--inst-color-warning);
  color: #856404;
}

.inst-alert--error {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: var(--inst-color-error);
  color: #721c24;
}

.inst-alert--info {
  background-color: rgba(23, 162, 184, 0.1);
  border-color: var(--inst-color-info);
  color: #0c5460;
}

/* ============================================
   5.12 PRICING - Tabela de Preços
   ============================================ */

.inst-pricing {
  display: grid;
  gap: var(--inst-space-lg);
}

.inst-pricing__card {
  background-color: var(--inst-color-bg);
  border-radius: var(--inst-border-radius-lg);
  box-shadow: var(--inst-shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.inst-pricing__header {
  padding: var(--inst-space-xl);
  background-color: var(--inst-color-bg-alt);
  text-align: center;
}

.inst-pricing__title {
  font-size: var(--inst-font-size-xl);
  margin-bottom: var(--inst-space-sm);
  margin-top: 0;
}

.inst-pricing__price {
  font-size: var(--inst-font-size-4xl);
  font-weight: var(--inst-font-weight-bold);
  color: var(--inst-color-primary);
  line-height: 1;
}

.inst-pricing__price span {
  font-size: var(--inst-font-size-base);
  font-weight: var(--inst-font-weight-normal);
  color: var(--inst-color-text-light);
}

.inst-pricing__body {
  padding: var(--inst-space-xl);
  flex-grow: 1;
}

.inst-pricing__features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inst-pricing__features li {
  padding: var(--inst-space-sm) 0;
  border-bottom: 1px solid var(--inst-color-border-light);
  display: flex;
  align-items: center;
  gap: var(--inst-space-sm);
}

.inst-pricing__features li::before {
  content: '✓';
  color: var(--inst-color-success);
  font-weight: var(--inst-font-weight-bold);
}

.inst-pricing__footer {
  padding: var(--inst-space-lg) var(--inst-space-xl);
  border-top: 1px solid var(--inst-color-border-light);
}

/* Card de preço em destaque */
.inst-pricing__card--featured {
  transform: scale(1.05);
  border: 2px solid var(--inst-color-secondary);
  position: relative;
}

.inst-pricing__card--featured .inst-pricing__header {
  background: linear-gradient(135deg, var(--inst-color-primary) 0%, var(--inst-color-primary-light) 100%);
  color: var(--inst-color-text-inverse);
}

.inst-pricing__card--featured .inst-pricing__title,
.inst-pricing__card--featured .inst-pricing__price {
  color: var(--inst-color-text-inverse);
}

.inst-pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--inst-color-secondary);
  color: var(--inst-color-text-inverse);
  padding: var(--inst-space-xs) var(--inst-space-md);
  border-radius: var(--inst-border-radius-full);
  font-size: var(--inst-font-size-xs);
  font-weight: var(--inst-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* ============================================================================
   6. UTILITIES - Classes Utilitárias
   ============================================================================ */

/* Text utilities */
.inst-text-center { text-align: center; }
.inst-text-left { text-align: left; }
.inst-text-right { text-align: right; }
.inst-text-primary { color: var(--inst-color-primary); }
.inst-text-secondary { color: var(--inst-color-secondary); }
.inst-text-muted { color: var(--inst-color-text-muted); }
.inst-text-inverse { color: var(--inst-color-text-inverse); }

.inst-text-xs { font-size: var(--inst-font-size-xs); }
.inst-text-sm { font-size: var(--inst-font-size-sm); }
.inst-text-lg { font-size: var(--inst-font-size-lg); }
.inst-text-xl { font-size: var(--inst-font-size-xl); }

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

/* Spacing utilities */
.inst-m-0 { margin: 0; }
.inst-mt-sm { margin-top: var(--inst-space-sm); }
.inst-mt-md { margin-top: var(--inst-space-md); }
.inst-mt-lg { margin-top: var(--inst-space-lg); }
.inst-mt-xl { margin-top: var(--inst-space-xl); }
.inst-mb-sm { margin-bottom: var(--inst-space-sm); }
.inst-mb-md { margin-bottom: var(--inst-space-md); }
.inst-mb-lg { margin-bottom: var(--inst-space-lg); }
.inst-mb-xl { margin-bottom: var(--inst-space-xl); }

.inst-p-0 { padding: 0; }
.inst-p-sm { padding: var(--inst-space-sm); }
.inst-p-md { padding: var(--inst-space-md); }
.inst-p-lg { padding: var(--inst-space-lg); }
.inst-p-xl { padding: var(--inst-space-xl); }

/* Display utilities */
.inst-hidden { display: none; }
.inst-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;
}


/* ============================================================================
   7. RESPONSIVE - Media Queries (Mobile-First)
   ============================================================================ */

/* Tablet: 768px+ */
@media (min-width: 768px) {
  /* Typography */
  .institucional h1 {
    font-size: var(--inst-font-size-3xl);
  }
  
  .institucional h2 {
    font-size: var(--inst-font-size-2xl);
  }
  
  /* Hero */
  .inst-hero {
    padding: var(--inst-space-4xl) 0;
  }
  
  .inst-hero__title {
    font-size: var(--inst-font-size-4xl);
  }
  
  .inst-hero__subtitle {
    font-size: var(--inst-font-size-lg);
  }
  
  /* Content */
  .inst-content {
    font-size: var(--inst-font-size-md);
  }
  
  .inst-content h1 {
    font-size: var(--inst-font-size-4xl);
  }
  
  .inst-content h2 {
    font-size: var(--inst-font-size-2xl);
  }
  
  /* Grid */
  .inst-grid--2cols {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .inst-grid--3cols {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Form Grid */
  .inst-form__grid--2cols {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Contact Grid */
  .inst-contact__grid {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Pricing */
  .inst-pricing {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Container padding */
  .inst-container {
    padding: 0 var(--inst-space-xl);
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  /* Sections */
  .inst-section {
    padding: var(--inst-space-3xl) 0;
  }
  
  .inst-section--large {
    padding: var(--inst-space-4xl) 0;
  }
  
  /* Grid */
  .inst-grid--3cols {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .inst-grid--4cols {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Pricing */
  .inst-pricing {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Contact Map */
  .inst-contact__map {
    height: 100%;
    min-height: 400px;
  }
}

/* Large Desktop: 1200px+ */
@media (min-width: 1200px) {
  .inst-container {
    padding: 0 var(--inst-space-2xl);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .institucional *,
  .institucional *::before,
  .institucional *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .inst-form__input:focus,
  .inst-form__textarea:focus,
  .inst-form__select:focus {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
  
  .inst-card,
  .inst-pricing__card {
    border: 2px solid currentColor;
  }
}


/* ============================================================================
   8. PAGE-SPECIFIC - Estilos Específicos por Página
   ============================================================================ */

/* ============================================
   8.1 Página: Política de Privacidade
   ============================================ */

.institucional--privacidade .inst-content {
  counter-reset: secao;
}

.institucional--privacidade .inst-content h2 {
  counter-increment: secao;
}

.institucional--privacidade .inst-content h2::before {
  content: counter(secao) ". ";
  color: var(--inst-color-secondary);
}

.institucional--privacidade .inst-hero {
  background: linear-gradient(135deg, #1a3a6b 0%, #0b1f3f 100%);
}

/* ============================================
   8.2 Página: Termos de Uso
   ============================================ */

.institucional--termos .inst-content ol {
  list-style: none;
  counter-reset: termo;
  padding-left: 0;
}

.institucional--termos .inst-content ol > li {
  counter-increment: termo;
  margin-bottom: var(--inst-space-xl);
}

.institucional--termos .inst-content ol > li::before {
  content: counter(termo) ".";
  display: block;
  font-size: var(--inst-font-size-xl);
  font-weight: var(--inst-font-weight-bold);
  color: var(--inst-color-secondary);
  margin-bottom: var(--inst-space-sm);
}

/* ============================================
   8.3 Página: Sobre
   ============================================ */

.institucional--sobre .inst-hero {
  text-align: center;
}

.institucional--sobre .inst-hero__content {
  max-width: 700px;
  margin: 0 auto;
}

.institucional--sobre .inst-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--inst-space-lg);
  margin-top: var(--inst-space-2xl);
}

.institucional--sobre .inst-stat {
  text-align: center;
}

.institucional--sobre .inst-stat__number {
  font-size: var(--inst-font-size-4xl);
  font-weight: var(--inst-font-weight-bold);
  color: var(--inst-color-secondary);
  line-height: 1;
  display: block;
}

.institucional--sobre .inst-stat__label {
  color: var(--inst-color-text-light);
  font-size: var(--inst-font-size-sm);
  margin-top: var(--inst-space-xs);
}

.institucional--sobre .inst-team {
  display: grid;
  gap: var(--inst-space-lg);
}

.institucional--sobre .inst-team__member {
  text-align: center;
}

.institucional--sobre .inst-team__photo {
  width: 150px;
  height: 150px;
  border-radius: var(--inst-border-radius-full);
  margin: 0 auto var(--inst-space-md);
  object-fit: cover;
  border: 4px solid var(--inst-color-bg);
  box-shadow: var(--inst-shadow-md);
}

.institucional--sobre .inst-team__name {
  font-size: var(--inst-font-size-lg);
  margin-bottom: var(--inst-space-xs);
}

.institucional--sobre .inst-team__role {
  color: var(--inst-color-secondary);
  font-size: var(--inst-font-size-sm);
  font-weight: var(--inst-font-weight-medium);
}

/* ============================================
   8.4 Página: Fale Conosco / Contato
   ============================================ */

.institucional--contato .inst-contact__wrapper,
.institucional--fale-conosco .inst-contact__wrapper {
  display: grid;
  gap: var(--inst-space-2xl);
}

.institucional--contato .inst-contact__form-wrapper,
.institucional--fale-conosco .inst-contact__form-wrapper {
  background-color: var(--inst-color-bg);
  padding: var(--inst-space-xl);
  border-radius: var(--inst-border-radius-lg);
  box-shadow: var(--inst-shadow-md);
}

.institucional--contato .inst-contact__sidebar,
.institucional--fale-conosco .inst-contact__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--inst-space-xl);
}

.institucional--contato .inst-social-links,
.institucional--fale-conosco .inst-social-links {
  display: flex;
  gap: var(--inst-space-md);
}

.institucional--contato .inst-social-link,
.institucional--fale-conosco .inst-social-link {
  width: 44px;
  height: 44px;
  border-radius: var(--inst-border-radius-full);
  background-color: var(--inst-color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--inst-color-primary);
  transition: all var(--inst-transition-fast);
}

.institucional--contato .inst-social-link:hover,
.institucional--contato .inst-social-link:focus,
.institucional--fale-conosco .inst-social-link:hover,
.institucional--fale-conosco .inst-social-link:focus {
  background-color: var(--inst-color-secondary);
  color: var(--inst-color-text-inverse);
  text-decoration: none;
  transform: translateY(-2px);
}

/* ============================================
   8.5 Página: Anunciar
   ============================================ */

.institucional--anunciar .inst-hero {
  text-align: center;
}

.institucional--anunciar .inst-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--inst-space-xl);
  margin-top: var(--inst-space-2xl);
  padding-top: var(--inst-space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.institucional--anunciar .inst-hero__stat {
  text-align: center;
}

.institucional--anunciar .inst-hero__stat-number {
  display: block;
  font-size: var(--inst-font-size-3xl);
  font-weight: var(--inst-font-weight-bold);
  color: var(--inst-color-secondary);
}

.institucional--anunciar .inst-hero__stat-label {
  font-size: var(--inst-font-size-sm);
  opacity: 0.9;
}

.institucional--anunciar .inst-benefits {
  background: linear-gradient(135deg, var(--inst-color-bg-alt) 0%, var(--inst-color-bg) 100%);
}

.institucional--anunciar .inst-testimonial {
  background-color: var(--inst-color-bg);
  padding: var(--inst-space-xl);
  border-radius: var(--inst-border-radius-lg);
  box-shadow: var(--inst-shadow-md);
}

.institucional--anunciar .inst-testimonial__quote {
  font-style: italic;
  font-size: var(--inst-font-size-md);
  color: var(--inst-color-text-light);
  margin-bottom: var(--inst-space-md);
}

.institucional--anunciar .inst-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--inst-space-md);
}

.institucional--anunciar .inst-testimonial__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--inst-border-radius-full);
  object-fit: cover;
}

.institucional--anunciar .inst-testimonial__name {
  font-weight: var(--inst-font-weight-semibold);
  color: var(--inst-color-primary);
}

.institucional--anunciar .inst-testimonial__company {
  font-size: var(--inst-font-size-sm);
  color: var(--inst-color-text-muted);
}

.institucional--anunciar .inst-faq__item {
  border-bottom: 1px solid var(--inst-color-border);
  padding: var(--inst-space-lg) 0;
}

.institucional--anunciar .inst-faq__question {
  font-size: var(--inst-font-size-md);
  font-weight: var(--inst-font-weight-semibold);
  color: var(--inst-color-primary);
  margin-bottom: var(--inst-space-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.institucional--anunciar .inst-faq__answer {
  color: var(--inst-color-text-light);
  line-height: var(--inst-line-height-relaxed);
}


/* ============================================================================
   RESPONSIVE: Page-Specific Adjustments
   ============================================================================ */

@media (min-width: 768px) {
  /* Sobre - Stats */
  .institucional--sobre .inst-stats {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Sobre - Team */
  .institucional--sobre .inst-team {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Anunciar - Hero Stats */
  .institucional--anunciar .inst-hero__stats {
    gap: var(--inst-space-3xl);
  }
  
  /* Contato/Fale Conosco - Layout */
  .institucional--contato .inst-contact__wrapper,
  .institucional--fale-conosco .inst-contact__wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  /* Sobre - Team */
  .institucional--sobre .inst-team {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Anunciar - Testimonials Grid */
  .institucional--anunciar .inst-testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


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

@media print {
  .institucional {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  .inst-hero {
    background: #fff !important;
    color: #000 !important;
    padding: 1rem 0;
  }
  
  .inst-hero__title {
    color: #000 !important;
  }
  
  .inst-section {
    padding: 1rem 0;
  }
  
  .inst-card,
  .inst-pricing__card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
  
  .inst-btn,
  .inst-hero__cta {
    border: 1px solid #000;
    background: transparent;
    color: #000;
  }
  
  .inst-contact__map,
  .inst-social-links {
    display: none;
  }
  
  a {
    text-decoration: underline;
    color: #000;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}