/* ============================================================
   SOLISE DESIGN SYSTEM — solise-ds.css
   Arquivo central. Todas as ferramentas importam este arquivo.
   URL: https://design.studiosolise.com.br/solise-ds.css
   ============================================================ */

/* ----------------------------------------------------------
   1. FONTES
   ---------------------------------------------------------- */
@font-face {
  font-family: 'Minion Pro';
  src: url('./fonts/Minion Pro Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Minion Pro';
  src: url('./fonts/Minion Pro Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Paralucent';
  src: url('./fonts/Paralucent-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Paralucent';
  src: url('./fonts/Paralucent-ExtraLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Paralucent';
  src: url('./fonts/Paralucent-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Paralucent';
  src: url('./fonts/Paralucent-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

/* ----------------------------------------------------------
   2. TOKENS — as variáveis da marca
   (como "ingredientes" nomeados — muda aqui, muda em tudo)
   ---------------------------------------------------------- */
:root {
  /* Cores */
  --cor-branco:     #ffffff;
  --cor-preta:      #0c0c0c;
  --cor-texto:      #282828;
  --cor-texto-sec:  #898989;
  --cor-cinza:      #e3e5e1;
  --cor-off-white:  #f8f9f4;
  --cor-bege:       #c1beb0;

  /* Tipografia */
  --fonte-titulo:   'Minion Pro', Georgia, serif;
  --fonte-corpo:    'Paralucent', sans-serif;

  /* Tamanhos de texto */
  --text-xs:    0.65rem;   /* 10px — rodapés, metadados */
  --text-sm:    0.75rem;   /* 12px — labels, captions */
  --text-base:  0.9rem;    /* 14px — corpo */
  --text-md:    1rem;      /* 16px — corpo destacado */
  --text-lg:    1.25rem;   /* 20px — subtítulos */
  --text-xl:    1.75rem;   /* 28px — títulos de seção */
  --text-2xl:   2.5rem;    /* 40px — títulos grandes */
  --text-3xl:   3.5rem;    /* 56px — display */

  /* Espaçamentos (sempre múltiplos de 4) */
  --space-1:   0.25rem;    /* 4px */
  --space-2:   0.5rem;     /* 8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-24:  6rem;       /* 96px */

  /* Borda */
  --borda-cor:    var(--cor-cinza);
  --borda-espessura: 1px;
  --barra-espessura: 2px;

  /* Margens de página por dispositivo */
  --margem-desktop:      5rem;    /* 80px — telas grandes */
  --margem-laptop:       3.75rem; /* 60px — notebooks */
  --margem-tablet:       2.5rem;  /* 40px — tablet */
  --margem-mobile:       1.5rem;  /* 24px — celular */

  /* Espaçamento entre seções por dispositivo */
  --secao-desktop:       6rem;    /* 96px */
  --secao-tablet:        4rem;    /* 64px */
  --secao-mobile:        3rem;    /* 48px */

  /* Logo — tamanhos mínimos e máximos */
  --logo-desktop-min:    120px;
  --logo-desktop-max:    180px;
  --logo-mobile-min:     80px;
  --logo-mobile-max:     130px;
  --logo-espaco-respiro: 1em;     /* espaço livre ao redor do logo */

  /* Blocos retangulares — proporções fixas */
  --bloco-p-largura:     100px;
  --bloco-p-altura:      60px;
  --bloco-m-largura:     180px;
  --bloco-m-altura:      110px;
  --bloco-g-largura:     280px;
  --bloco-g-altura:      170px;
}

/* ----------------------------------------------------------
   3. RESET E BASE
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--cor-branco);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

/* ----------------------------------------------------------
   4. TIPOGRAFIA
   ---------------------------------------------------------- */

/*
  REGRA DE SEPARADORES:
  Sempre usar · (ponto médio, U+00B7) como separador em textos.
  NUNCA usar — (travessão / em dash) em nenhum material.

  Certo:  São Paulo · 2025 · Studio Solise
  Errado: São Paulo — 2025 — Studio Solise
*/

/* Bloqueia bold automático do browser em todos os headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

/* Display — o maior título da página */
.display {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--cor-texto);
}

/* Título grande */
h1, .titulo-1 {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.15;
  color: var(--cor-texto);
}

/* Título de seção */
h2, .titulo-2 {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--cor-texto);
}

/* Subtítulo */
h3, .titulo-3 {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--cor-texto);
}

/* Label / categoria — CAPS com espaçamento */
.label {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

/* Corpo de texto */
p, .corpo {
  font-family: var(--fonte-corpo);
  font-weight: 200; /* ExtraLight — mais leve e suave */
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--cor-texto);
}

/* Texto secundário — datas, hints, metadados */
.texto-sec {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  color: var(--cor-texto-sec);
}

/* Rodapé / caption */
.caption {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
}

/* ----------------------------------------------------------
   5. ELEMENTOS GRÁFICOS DA MARCA
   ---------------------------------------------------------- */

/* Barra vertical | — assinatura da Solise */
.barra-item {
  border-left: var(--barra-espessura) solid var(--cor-preta);
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  margin-bottom: var(--space-6);
}

/* Barra divisória centralizada */
.barra-divisoria {
  width: var(--barra-espessura);
  height: 2rem;
  background: var(--cor-preta);
  margin: var(--space-12) auto;
}

/* Bloco decorativo — miolo (somente off-white) */
.bloco-deco {
  background: var(--cor-off-white);
  width: 100%;
  margin: 0; /* blocos decorativos nunca têm margem */
}

/* Bloco decorativo — capa e fechamento */
.bloco-deco-capa {
  background: var(--cor-cinza);
  margin: 0;
}
.bloco-deco-bege {
  background: var(--cor-bege);
  margin: 0;
}

/* ----------------------------------------------------------
   6. BOTÕES
   ---------------------------------------------------------- */

/* Base compartilhada de todos os botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease, background 0.2s ease;
  padding: var(--space-3) var(--space-8);
  line-height: 1;
  white-space: nowrap;
}

/* Botão primário — fundo preto, texto branco */
.btn-primario {
  background: var(--cor-preta);
  color: var(--cor-branco);
}
.btn-primario:hover {
  opacity: 0.8;
}

/* Botão secundário — borda, sem fundo */
.btn-secundario {
  background: transparent;
  color: var(--cor-preta);
  border: 1px solid var(--cor-preta);
}
.btn-secundario:hover {
  background: var(--cor-cinza); /* hover cinza, não off-white */
}

/* Botão fantasma — só texto */
.btn-fantasma {
  background: transparent;
  color: var(--cor-texto-sec);
  padding-left: 0;
  padding-right: 0;
  letter-spacing: 0.15em;
}
.btn-fantasma:hover {
  color: var(--cor-texto);
}

/* Estado desativado — qualquer botão */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----------------------------------------------------------
   7. CAMPOS DE FORMULÁRIO
   ---------------------------------------------------------- */

.campo-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.campo-label {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

.campo-input,
.campo-select,
.campo-textarea {
  font-family: var(--fonte-corpo);
  font-weight: 300;
  font-size: var(--text-base);
  color: var(--cor-texto);
  background: var(--cor-branco);
  border: var(--borda-espessura) solid var(--cor-cinza);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
  appearance: none;
}

.campo-input::placeholder,
.campo-textarea::placeholder {
  color: var(--cor-texto-sec);
  font-weight: 200;
}

/* Estado foco */
.campo-input:focus,
.campo-select:focus,
.campo-textarea:focus {
  border-color: var(--cor-preta);
}

/* Estado erro */
.campo-input.erro,
.campo-select.erro,
.campo-textarea.erro {
  border-color: #c0392b;
}

.campo-mensagem-erro {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  color: #c0392b;
  letter-spacing: 0.05em;
}

/* Estado desativado */
.campo-input:disabled,
.campo-select:disabled,
.campo-textarea:disabled {
  background: var(--cor-off-white);
  color: var(--cor-texto-sec);
  cursor: not-allowed;
}

.campo-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   8. CARDS
   ---------------------------------------------------------- */

.card {
  background: var(--cor-branco);
  border: var(--borda-espessura) solid var(--cor-cinza);
  padding: var(--space-8);
}

.card-destaque {
  background: var(--cor-off-white);
  padding: var(--space-8);
}

/* ----------------------------------------------------------
   9. LAYOUT E GRID
   ---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.container-estreito {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* Seção com respiro generoso */
.secao {
  padding: var(--space-24) 0;
}

/* ----------------------------------------------------------
   10. UTILITÁRIOS
   ---------------------------------------------------------- */

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

/* Ponto médio separador (nunca travessão) */
.separador::before {
  content: ' · ';
  color: var(--cor-texto-sec);
}

/* ----------------------------------------------------------
   11. LOGO
   ---------------------------------------------------------- */

/*
  Uso:
  - Logo completo (com tagline): capas e páginas de fechamento
  - Logo nome (só SOLISE): cabeçalhos, rodapés, materiais compactos
  - Versão preta: sempre em fundos claros (branco, off-white, cinza, bege)
  - Versão cinza: fundos escuros ou para hierarquia secundária

  Nunca:
  - Distorcer (sempre manter proporção)
  - Usar abaixo do tamanho mínimo
  - Colocar sobre fundos coloridos ou fotos sem área de respiro
*/

.logo {
  display: block;
  width: 12%;
  min-width: var(--logo-desktop-min);
  max-width: var(--logo-desktop-max);
  height: auto;
  /* Espaço de respiro ao redor — nunca encoste outros elementos */
  padding: var(--logo-espaco-respiro);
}

/* Logo no cabeçalho — alinhado à esquerda sem padding */
.logo-header {
  display: block;
  width: 12%;
  min-width: var(--logo-desktop-min);
  max-width: var(--logo-desktop-max);
  height: auto;
}

/* Logo no rodapé — menor, discreto */
.logo-footer {
  display: block;
  width: 8%;
  min-width: 80px;
  max-width: 120px;
  height: auto;
  opacity: 0.5;
}

/* Logo centralizado — capas e páginas de fechamento */
.logo-capa {
  display: block;
  width: 14%;
  min-width: var(--logo-desktop-min);
  max-width: var(--logo-desktop-max);
  height: auto;
  margin: 0 auto;
}

/* Logo vertical — girado 90° · canto inferior direito */
/*
  Uso: em alguns materiais o logo fica na lateral, girado, no canto inferior direito.
  O elemento pai DEVE ter position: relative e overflow: hidden.
  Pode usar logo-nome (só SOLISE) ou logo-completo (com tagline) neste posicionamento.

  HTML:
  <div style="position: relative; min-height: 100vh; overflow: hidden;">
    <!-- conteúdo da página -->
    <img class="logo-vertical-dir" src="./logos/logo-nome-preto.svg" alt="Studio Solise">
  </div>

  O logo é girado 90° no sentido anti-horário (texto lê de cima para baixo).
  width controla a "altura visual" após a rotação.
*/
.logo-vertical-dir {
  position: absolute;
  right: var(--margem-desktop);
  /*
    bottom = margem + width do logo:
    o CSS posiciona o elemento antes da rotação, então sem essa compensação
    o logo escorrega para fora do container. A largura (width) se torna
    a dimensão vertical visível após o giro de -90°.
  */
  bottom: calc(var(--margem-desktop) + 110px);
  display: block;
  width: 110px;
  height: auto;
  transform: rotate(-90deg);
  transform-origin: right bottom;
}

@media (max-width: 1024px) {
  .logo, .logo-header { width: 14%; }
  .logo-vertical-dir {
    right: var(--margem-laptop);
    bottom: calc(var(--margem-laptop) + 100px);
    width: 100px;
  }
}

@media (max-width: 768px) {
  .logo, .logo-header {
    width: 28%;
    min-width: var(--logo-mobile-min);
    max-width: var(--logo-mobile-max);
  }
  .logo-footer {
    width: 22%;
    min-width: 64px;
    max-width: 100px;
  }
  .logo-capa {
    width: 32%;
    min-width: var(--logo-mobile-min);
    max-width: var(--logo-mobile-max);
  }
  .logo-vertical-dir {
    right: var(--margem-tablet);
    bottom: calc(var(--margem-tablet) + 85px);
    width: 85px;
  }
}

@media (max-width: 480px) {
  .logo, .logo-header {
    width: 35%;
    min-width: 72px;
  }
  .logo-vertical-dir {
    right: var(--margem-mobile);
    bottom: calc(var(--margem-mobile) + 65px);
    width: 65px;
  }
}

/* ----------------------------------------------------------
   12. BLOCOS RETANGULARES DECORATIVOS
   ---------------------------------------------------------- */

/*
  Regras de uso:
  - O elemento pai DEVE ter position: relative
  - Blocos são sempre position: absolute (não empurram conteúdo)
  - Máximo 2 blocos por página ou slide
  - No miolo: somente off-white (#f8f9f4)
  - Em capas e fechamento: pode usar cinza (#e3e5e1) ou bege (#c1beb0)
  - Nunca com borda, sombra ou gradiente

  Tamanhos:
  - P (pequeno): 100×60px   — detalhes, cantos, títulos compactos
  - M (médio):   180×110px  — uso padrão em miolo
  - G (grande):  280×170px  — capas e páginas de impacto

  Posições disponíveis:
  - topo-dir, topo-esq, fundo-dir, fundo-esq (cantos)
  - centro-dir, centro-esq (laterais verticalmente centradas)
*/

/* Base de todo bloco decorativo */
.bloco {
  position: absolute;
  pointer-events: none; /* nunca bloqueia cliques */
  flex-shrink: 0;
  z-index: 0;    /* sempre atrás do conteúdo — content deve vir depois no DOM */
  margin: 0;     /* blocos nunca têm margem */
}

/* Cores */
.bloco-offwhite { background: var(--cor-off-white); } /* miolo */
.bloco-cinza    { background: var(--cor-cinza); }     /* capa/fechamento */
.bloco-bege     { background: var(--cor-bege); }      /* capa/fechamento */

/* Tamanhos — mínimo 1/3 da largura do contêiner pai */
.bloco-p {
  width: var(--bloco-p-largura);
  min-width: 33.333%; /* garante no mínimo 1/3 do espaço disponível */
  height: var(--bloco-p-altura);
}
.bloco-m {
  width: var(--bloco-m-largura);
  min-width: 33.333%;
  height: var(--bloco-m-altura);
}
.bloco-g {
  width: var(--bloco-g-largura);
  min-width: 33.333%;
  height: var(--bloco-g-altura);
}

/* Posições */
.bloco-topo-dir   { top: 0; right: 0; }
.bloco-topo-esq   { top: 0; left: 0; }
.bloco-fundo-dir  { bottom: 0; right: 0; }
.bloco-fundo-esq  { bottom: 0; left: 0; }
.bloco-centro-dir {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.bloco-centro-esq {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Bloco saindo pela borda (efeito de "corte") — metade visível */
.bloco-cortado-dir  { right: calc(var(--bloco-m-largura) / -2); }
.bloco-cortado-esq  { left:  calc(var(--bloco-m-largura) / -2); }

/* Wrapper obrigatório — todo elemento que usa bloco precisa disso */
.pagina-com-bloco {
  position: relative;
  overflow: hidden; /* garante que bloco não vaze para fora */
}

/* Todo conteúdo direto fica acima dos blocos automaticamente */
.pagina-com-bloco > *:not(.bloco) {
  position: relative;
  z-index: 1;
}

/* Bloco fixo — não scrollar com o conteúdo (parallax / páginas fixas) */
/*
  Use .bloco-fixo junto com .bloco e uma classe de posição:
  <div class="bloco bloco-m bloco-cinza bloco-topo-dir bloco-fixo"></div>
  Coordenadas ficam relativas ao viewport.
*/
.bloco-fixo {
  position: fixed;
}

/* ----------------------------------------------------------
   13. MARGENS E LAYOUT RESPONSIVO
   ---------------------------------------------------------- */

/*
  Sistema de margens:
  - Desktop grande (1280px+): 80px cada lado
  - Laptop (1024px):          60px cada lado
  - Tablet (768px):           40px cada lado
  - Mobile (480px):           24px cada lado
  - Mobile pequeno (375px):   16px cada lado
*/

/* Container padrão — conteúdo central limitado */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--margem-desktop);
}

/* Container estreito — textos longos, formulários */
.container-estreito {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--margem-desktop);
}

/* Container largo — quando o conteúdo precisa de mais espaço */
.container-largo {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--margem-desktop);
}

/* Seção padrão */
.secao {
  padding: var(--secao-desktop) 0;
}

/* Seção compacta — espaçamento reduzido */
.secao-compacta {
  padding: calc(var(--secao-desktop) / 2) 0;
}

/* Seção generosa — mais respiro */
.secao-generosa {
  padding: calc(var(--secao-desktop) * 1.5) 0;
}

/* Grid responsivo */
.grade {
  display: grid;
  gap: var(--space-8);
}
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }

/* Adaptações por breakpoint */
@media (max-width: 1024px) {
  .container,
  .container-estreito,
  .container-largo {
    padding: 0 var(--margem-laptop);
  }
  .secao         { padding: calc(var(--secao-desktop) * 0.85) 0; }
  .grade-4       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .container,
  .container-estreito,
  .container-largo {
    padding: 0 var(--margem-tablet);
  }
  .secao          { padding: var(--secao-tablet) 0; }
  .secao-compacta { padding: calc(var(--secao-tablet) / 2) 0; }
  .secao-generosa { padding: calc(var(--secao-tablet) * 1.5) 0; }
  .grade-3        { grid-template-columns: repeat(2, 1fr); }
  .grade-4        { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .container,
  .container-estreito,
  .container-largo {
    padding: 0 var(--margem-mobile);
  }
  .secao          { padding: var(--secao-mobile) 0; }
  .secao-compacta { padding: calc(var(--secao-mobile) / 2) 0; }
  .secao-generosa { padding: calc(var(--secao-mobile) * 1.5) 0; }
  .grade-2,
  .grade-3,
  .grade-4        { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .container,
  .container-estreito,
  .container-largo {
    padding: 0 1rem; /* 16px — mínimo absoluto */
  }
}

/* ----------------------------------------------------------
   14. CHECKBOX E RADIO
   ---------------------------------------------------------- */

/*
  Uso em briefings e formulários de múltipla escolha.
  A marcação HTML padrão é:

  <label class="opcao">
    <input type="checkbox" class="opcao-input">
    <span class="opcao-box"></span>
    <span class="opcao-texto">Texto da opção</span>
  </label>

  Para radio: troca type="checkbox" por type="radio"
  e .opcao-box vira círculo automaticamente.
*/

.opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4); /* era space-3 — mais respiro entre box e texto */
  cursor: pointer;
  margin-bottom: 0;   /* gap do grupo controla o espaçamento */
  user-select: none;
}

.opcao-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* A caixa visual (checkbox ou radio) */
.opcao-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px; /* alinha com a primeira linha do texto */
  border: 1px solid var(--cor-cinza);
  background: var(--cor-branco);
  transition: border-color 0.15s, background 0.15s;
}

/* Radio: caixa vira círculo */
input[type="radio"] + .opcao-box {
  border-radius: 50%;
}

/* Marcado: fundo preto, borda preta */
.opcao-input:checked + .opcao-box {
  background: var(--cor-preta);
  border-color: var(--cor-preta);
}

/* Ícone de check — barra pequena estilo Solise */
.opcao-input:checked + .opcao-box::after {
  content: '';
  display: block;
}

/* Checkbox marcado: mini check */
input[type="checkbox"]:checked + .opcao-box::after {
  width: 9px;
  height: 5px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

/* Radio marcado: ponto central */
input[type="radio"]:checked + .opcao-box::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}

/* Hover */
.opcao:hover .opcao-box {
  border-color: var(--cor-preta);
}

/* Foco acessível */
.opcao-input:focus-visible + .opcao-box {
  outline: 2px solid var(--cor-preta);
  outline-offset: 2px;
}

/* Desativado */
.opcao-input:disabled + .opcao-box {
  background: var(--cor-off-white);
  border-color: var(--cor-cinza);
  cursor: not-allowed;
}
.opcao-input:disabled ~ .opcao-texto {
  color: var(--cor-texto-sec);
}

.opcao-texto {
  font-family: var(--fonte-corpo);
  font-weight: 300;
  font-size: var(--text-base);
  color: var(--cor-texto);
  line-height: 1.5;
}

/* Grupo de opções — sempre vertical por padrão */
.opcoes-grupo {
  display: flex;
  flex-direction: column; /* vertical é o padrão */
  gap: var(--space-4);    /* era space-2 — mais respiro entre opções */
}

/* Grupo horizontal — opções lado a lado */
.opcoes-grupo-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}

/* ----------------------------------------------------------
   15. TOKENS DE ANIMAÇÃO
   ---------------------------------------------------------- */

:root {
  --transicao-rapida:  0.15s ease;
  --transicao-padrao:  0.25s ease;
  --transicao-suave:   0.4s ease;
  --transicao-lenta:   0.6s ease;
  --ease-entrada: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-saida:   cubic-bezier(0.4, 0.0, 1.0, 1);
  --ease-enfase:  cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ----------------------------------------------------------
   16. BLOCKQUOTE E DEPOIMENTOS
   ---------------------------------------------------------- */

/*
  Citação com barra vertical — uso em propostas e apresentações:
  <blockquote class="citacao">
    <p class="citacao-texto">Texto da citação.</p>
    <footer class="citacao-autor">Fulano · Empresa</footer>
  </blockquote>
*/
blockquote, .citacao {
  border-left: var(--barra-espessura) solid var(--cor-preta);
  padding: var(--space-3) var(--space-8);
  margin: var(--space-8) 0;
}

.citacao-texto {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--cor-texto);
}

.citacao-autor {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
  margin-top: var(--space-3);
}

/*
  Depoimento de cliente — fundo off-white, texto em itálico:
  <div class="depoimento">
    <p class="depoimento-texto">"Texto do depoimento."</p>
    <div class="depoimento-cliente">
      <div>
        <div class="depoimento-nome">Nome do Cliente</div>
        <div class="depoimento-empresa">Empresa · Segmento</div>
      </div>
    </div>
  </div>
*/
.depoimento {
  padding: var(--space-8);
  background: var(--cor-off-white);
}

.depoimento-texto {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--cor-texto);
  margin-bottom: var(--space-6);
}

.depoimento-cliente {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.depoimento-nome {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--cor-texto);
}

.depoimento-empresa {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
  margin-top: var(--space-1);
}

/* ----------------------------------------------------------
   17. LISTAS
   ---------------------------------------------------------- */

/*
  Lista com ponto médio (padrão):
  <ul class="lista">
    <li>Item</li>
  </ul>

  Lista com barra vertical (estilo Solise):
  <ul class="lista lista-barra">
    <li>Item</li>
  </ul>

  Lista numerada com itálico:
  <ol class="lista-numerada">
    <li>Etapa</li>
  </ol>
*/

.lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* respiro generoso entre itens */
  padding: 0;
}

.lista li {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-base);
  color: var(--cor-texto);
  padding-left: var(--space-6);
  position: relative;
  line-height: 1.6;
}

/* Marcador padrão: ponto médio */
.lista li::before {
  content: '·';
  position: absolute;
  left: var(--space-2);
  color: var(--cor-preta);
  font-size: 1.1em;
  line-height: 1.3;
}

/* Marcador com barra vertical */
.lista-barra li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: var(--barra-espessura);
  height: 0.9em;
  background: var(--cor-preta);
}

/* Lista numerada — número em itálico */
.lista-numerada {
  list-style: none;
  counter-reset: item;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
}

.lista-numerada li {
  counter-increment: item;
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-base);
  color: var(--cor-texto);
  padding-left: var(--space-8);
  position: relative;
  line-height: 1.6;
}

.lista-numerada li::before {
  content: counter(item, decimal-leading-zero) '.'; /* 01. 02. 03. */
  position: absolute;
  left: 0;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--cor-texto-sec);
  line-height: 1;
}

/* ----------------------------------------------------------
   18. TABELAS
   ---------------------------------------------------------- */

/*
  Uso padrão:
  <table class="tabela">
    <thead><tr><th>Col</th></tr></thead>
    <tbody><tr><td>Dado</td></tr></tbody>
  </table>

  Tabela de precificação: adicionar .tabela-preco
  Tabela com fundo alternado: adicionar .tabela-zebra
*/

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-base);
}

.tabela th {
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--cor-cinza);
  white-space: nowrap;
}

.tabela td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--cor-off-white);
  color: var(--cor-texto);
  vertical-align: top;
  line-height: 1.5;
}

.tabela tr:last-child td {
  border-bottom: none;
}

.tabela tbody tr:hover td {
  background: var(--cor-off-white);
  transition: background var(--transicao-rapida);
}

/* Fundo alternado */
.tabela-zebra tbody tr:nth-child(even) td {
  background: var(--cor-off-white);
}

/* Tabela de precificação — valor em itálico à direita */
.tabela-preco td:last-child,
.tabela-preco th:last-child {
  text-align: right;
}

.tabela-preco td:last-child {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--text-md);
}

/* Linha de total */
.tabela tr.total td {
  border-top: 1px solid var(--cor-preta);
  border-bottom: none;
  font-weight: 200;
  padding-top: var(--space-4);
}

.tabela tr.total td:last-child {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--text-lg);
}

/* ----------------------------------------------------------
   19. TAGS E BADGES
   ---------------------------------------------------------- */

/*
  Uso: <span class="tag">Label</span>
  Variantes de cor: .tag-preta .tag-cinza .tag-bege
  Status: .tag-andamento .tag-entregue .tag-aguardando .tag-pausado
*/

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--cor-cinza);
  color: var(--cor-texto-sec);
  white-space: nowrap;
  line-height: 1.8;
}

/* Variantes de cor */
.tag-preta   { background: var(--cor-preta); border-color: var(--cor-preta); color: var(--cor-branco); }
.tag-cinza   { background: var(--cor-cinza); border-color: var(--cor-cinza); color: var(--cor-texto); }
.tag-bege    { background: var(--cor-bege);  border-color: var(--cor-bege);  color: var(--cor-texto); }

/* Status de projeto */
.tag-andamento  { border-color: var(--cor-texto-sec); color: var(--cor-texto); }
.tag-entregue   { background: var(--cor-preta); border-color: var(--cor-preta); color: var(--cor-branco); }
.tag-aguardando { border-color: var(--cor-bege); color: var(--cor-texto-sec); }
.tag-pausado    { background: var(--cor-off-white); border-color: var(--cor-cinza); color: var(--cor-texto-sec); }

/* ----------------------------------------------------------
   20. ALERTAS E FEEDBACK
   ---------------------------------------------------------- */

/*
  <div class="alerta alerta-info">
    <div>
      <div class="alerta-titulo">Título</div>
      <div class="alerta-texto">Mensagem.</div>
    </div>
  </div>
  Variantes: .alerta-info .alerta-sucesso .alerta-atencao .alerta-erro
*/

.alerta {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-left: var(--barra-espessura) solid var(--cor-cinza);
}

.alerta-info     { background: var(--cor-off-white); border-left-color: var(--cor-texto-sec); }
.alerta-sucesso  { background: #f4f7f4; border-left-color: #5a7a5a; }
.alerta-atencao  { background: #faf7f0; border-left-color: #a08040; }
.alerta-erro     { background: #faf4f4; border-left-color: #c0392b; }

.alerta-titulo {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto);
  margin-bottom: var(--space-1);
}

.alerta-texto {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-base);
  color: var(--cor-texto-sec);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   21. CABEÇALHO DE SEÇÃO
   ---------------------------------------------------------- */

/*
  Padrão de abertura de seção — label + título + descrição opcional:
  <div class="cabecalho-secao">
    <div class="cabecalho-label">Serviços</div>
    <h2 class="cabecalho-titulo">O que fazemos</h2>
    <p class="cabecalho-descricao">Texto introdutório opcional.</p>
  </div>
  Variante centralizada: adicionar .cabecalho-centro
  Variante compacta: adicionar .cabecalho-compacto
*/

.cabecalho-secao {
  margin-bottom: var(--space-12);
}

.cabecalho-label {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
  margin-bottom: var(--space-4);
}

.cabecalho-titulo {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--cor-texto);
  margin-bottom: var(--space-4);
}

.cabecalho-descricao {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--cor-texto-sec);
  max-width: 560px;
}

/* Centralizado */
.cabecalho-centro {
  text-align: center;
}
.cabecalho-centro .cabecalho-descricao {
  margin: 0 auto;
}

/* Compacto */
.cabecalho-compacto .cabecalho-titulo {
  font-size: var(--text-xl);
}

/* ----------------------------------------------------------
   22. HERO / CAPA
   ---------------------------------------------------------- */

/*
  Composição de capa ou seção hero:
  <section class="hero pagina-com-bloco">
    <div class="bloco bloco-g bloco-bege bloco-fundo-dir"></div>
    <div class="hero-conteudo">
      <div class="label">Studio Solise</div>
      <h1 class="hero-titulo">Proposta de<br>Identidade Visual</h1>
      <p class="hero-subtitulo">Cliente · 2025</p>
    </div>
    <img class="logo-vertical-dir" src="./logos/logo-completo-preto.svg" alt="Studio Solise">
  </section>
*/

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-24) var(--margem-desktop);
  background: var(--cor-branco);
  position: relative;
  overflow: hidden;
}

.hero-conteudo {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero-titulo {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.1;
  color: var(--cor-texto);
  margin: var(--space-6) 0;
}

.hero-subtitulo {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
}

/* Capa escura */
.hero-escuro {
  background: var(--cor-preta);
}
.hero-escuro .hero-titulo  { color: var(--cor-branco); }
.hero-escuro .hero-subtitulo { color: rgba(255,255,255,0.4); }

@media (max-width: 768px) {
  .hero { padding: var(--space-16) var(--margem-tablet); min-height: 80vh; }
  .hero-titulo { font-size: var(--text-2xl); }
}

@media (max-width: 480px) {
  .hero { padding: var(--space-12) var(--margem-mobile); }
}

/* ----------------------------------------------------------
   23. PROCESSO / LINHA DO TEMPO
   ---------------------------------------------------------- */

/*
  Etapas do processo — numeradas com linha conectora:
  <div class="processo">
    <div class="processo-etapa">
      <div class="processo-numero">
        <span class="processo-numero-valor">01</span>
        <div class="processo-numero-linha"></div>
      </div>
      <div class="processo-conteudo">
        <div class="processo-titulo">Imersão</div>
        <p class="processo-descricao">Descrição da etapa.</p>
      </div>
    </div>
  </div>
*/

.processo {
  display: flex;
  flex-direction: column;
}

.processo-etapa {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 var(--space-6);
}

.processo-numero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-1);
}

.processo-numero-valor {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--cor-texto-sec);
  line-height: 1;
}

.processo-numero-linha {
  width: 1px;
  flex: 1;
  background: var(--cor-cinza);
  margin-top: var(--space-3);
  min-height: var(--space-8);
}

.processo-etapa:last-child .processo-numero-linha {
  display: none;
}

.processo-conteudo {
  padding-bottom: var(--space-10);
}

.processo-titulo {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-md);
  color: var(--cor-texto);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.processo-descricao {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-base);
  color: var(--cor-texto-sec);
  line-height: 1.7;
}

/* ----------------------------------------------------------
   24. NAVEGAÇÃO / HEADER
   ---------------------------------------------------------- */

/*
  <header class="nav-wrapper">
    <nav class="nav">
      <img src="./logos/logo-completo-preto.svg" style="width:110px;height:auto;" alt="Studio Solise">
      <ul class="nav-links">
        <li><a href="#" class="nav-link ativo">Sobre</a></li>
        <li><a href="#" class="nav-link">Serviços</a></li>
        <li><a href="#" class="nav-link">Portfólio</a></li>
        <li><a href="#" class="btn btn-primario">Contato</a></li>
      </ul>
    </nav>
  </header>

  Nav escura:
  <header class="nav-wrapper nav-wrapper-escura">
    <nav class="nav">
      <img src="./logos/logo-completo-cinza.svg" style="width:110px;height:auto;" alt="Studio Solise">
      <ul class="nav-links">...</ul>
    </nav>
  </header>
*/

.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cor-branco);
  border-bottom: 1px solid var(--cor-off-white);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--margem-desktop);
  gap: var(--space-8);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

.nav-link {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
  text-decoration: none;
  transition: color var(--transicao-rapida);
}

.nav-link:hover,
.nav-link.ativo {
  color: var(--cor-preta);
}

/* Nav escura */
.nav-wrapper-escura {
  background: var(--cor-preta);
  border-bottom-color: rgba(255,255,255,0.06);
}

.nav-wrapper-escura .nav-link        { color: rgba(255,255,255,0.4); }
.nav-wrapper-escura .nav-link:hover,
.nav-wrapper-escura .nav-link.ativo  { color: var(--cor-branco); }

@media (max-width: 1024px) {
  .nav { padding: var(--space-4) var(--margem-laptop); }
}

@media (max-width: 768px) {
  .nav { padding: var(--space-4) var(--margem-tablet); }
  .nav-links { gap: var(--space-4); }
}

/* ----------------------------------------------------------
   25. RODAPÉ
   ---------------------------------------------------------- */

/*
  <footer class="rodape">
    <div class="rodape-grade">
      <div class="rodape-sobre">
        <img class="logo-footer" src="./logos/logo-nome-cinza.svg" alt="Studio Solise">
        <p class="rodape-texto">Estúdio de identidade visual...</p>
      </div>
      <div>
        <div class="rodape-titulo-col">Serviços</div>
        <ul class="rodape-links">
          <li><a href="#" class="rodape-link">Identidade Visual</a></li>
        </ul>
      </div>
    </div>
    <div class="rodape-base">
      <div class="rodape-copy">© 2025 Studio Solise</div>
    </div>
  </footer>
*/

.rodape {
  background: var(--cor-preta);
  color: var(--cor-branco);
  padding: var(--space-16) var(--margem-desktop) var(--space-8);
}

.rodape-grade {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.rodape-sobre {
  max-width: 320px;
}

.rodape-texto {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.35);
  line-height: 1.7;
  margin-top: var(--space-4);
}

.rodape-titulo-col {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: var(--space-4);
}

.rodape-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rodape-link {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color var(--transicao-rapida);
}

.rodape-link:hover {
  color: var(--cor-branco);
}

.rodape-base {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rodape-copy {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
}

@media (max-width: 1024px) {
  .rodape { padding: var(--space-12) var(--margem-laptop) var(--space-8); }
}

@media (max-width: 768px) {
  .rodape { padding: var(--space-12) var(--margem-tablet) var(--space-6); }
  .rodape-grade { grid-template-columns: 1fr; gap: var(--space-8); }
  .rodape-base  { flex-direction: column; gap: var(--space-3); text-align: center; }
}

@media (max-width: 480px) {
  .rodape { padding: var(--space-8) var(--margem-mobile) var(--space-6); }
}

/* ----------------------------------------------------------
   26. ACCORDION
   ---------------------------------------------------------- */

/*
  Uso em FAQs e conteúdo colapsável.
  Requer JS mínimo: toggle class "aberto" no .accordion-item ao clicar.

  <div class="accordion">
    <div class="accordion-item aberto">
      <button class="accordion-gatilho">
        Pergunta
        <span class="accordion-icone" aria-hidden="true"></span>
      </button>
      <div class="accordion-conteudo">
        <p class="corpo">Resposta.</p>
      </div>
    </div>
  </div>
*/

.accordion-item {
  border-bottom: 1px solid var(--cor-cinza);
}

.accordion-item:first-child {
  border-top: 1px solid var(--cor-cinza);
}

.accordion-gatilho {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-base);
  color: var(--cor-texto);
  text-align: left;
  transition: color var(--transicao-rapida);
}

.accordion-gatilho:hover {
  color: var(--cor-preta);
}

/* Ícone + / × */
.accordion-icone {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
}

.accordion-icone::before,
.accordion-icone::after {
  content: '';
  position: absolute;
  background: currentColor;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.accordion-icone::before { width: 10px; height: 1px; }
.accordion-icone::after  { width: 1px; height: 10px; transition: transform var(--transicao-padrao); }

.accordion-item.aberto .accordion-icone::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-conteudo {
  display: none;
  padding-bottom: var(--space-6);
}

.accordion-item.aberto .accordion-conteudo {
  display: block;
}

/* ----------------------------------------------------------
   27. INDICADOR DE PROGRESSO
   ---------------------------------------------------------- */

/*
  Barra simples:
  <div class="progresso">
    <div class="progresso-barra" style="width: 60%"></div>
  </div>

  Por etapas:
  <div class="progresso-etapas">
    <div class="progresso-etapa-item concluido">
      <div class="progresso-etapa-ponto"></div>
      <div class="progresso-etapa-linha"></div>
    </div>
    <div class="progresso-etapa-item ativo">
      <div class="progresso-etapa-ponto"></div>
    </div>
  </div>
*/

.progresso {
  width: 100%;
  height: 1px;
  background: var(--cor-cinza);
}

.progresso-barra {
  height: 100%;
  background: var(--cor-preta);
  transition: width var(--transicao-suave);
}

/* Etapas */
.progresso-etapas {
  display: flex;
  align-items: flex-start;
}

.progresso-etapa-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.progresso-etapa-item:last-child {
  flex: 0;
}

.progresso-etapa-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-cinza);
  border: 1px solid var(--cor-cinza);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.progresso-etapa-item.ativo .progresso-etapa-ponto {
  background: var(--cor-branco);
  border-color: var(--cor-preta);
  width: 10px;
  height: 10px;
}

.progresso-etapa-item.concluido .progresso-etapa-ponto {
  background: var(--cor-preta);
  border-color: var(--cor-preta);
}

.progresso-etapa-linha {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--cor-cinza);
}

.progresso-etapa-item.concluido .progresso-etapa-linha {
  background: var(--cor-preta);
}

.progresso-etapa-label {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
  margin-top: var(--space-3);
  text-align: center;
  white-space: nowrap;
}

.progresso-etapa-item.ativo .progresso-etapa-label {
  color: var(--cor-texto);
}

/* ----------------------------------------------------------
   28. MODO ESCURO
   ---------------------------------------------------------- */

/*
  Adicione a classe .tema-escuro em qualquer container para aplicar
  o modo escuro àquele contexto.
  Funciona em seções, cards, páginas inteiras.

  <section class="tema-escuro">...</section>
  <div class="card tema-escuro">...</div>
*/

.tema-escuro {
  background: var(--cor-preta);
  color: var(--cor-branco);
}

.tema-escuro h1, .tema-escuro h2, .tema-escuro h3,
.tema-escuro h4, .tema-escuro h5, .tema-escuro h6,
.tema-escuro .titulo-1, .tema-escuro .titulo-2, .tema-escuro .titulo-3 {
  color: var(--cor-branco);
}

.tema-escuro p, .tema-escuro .corpo {
  color: rgba(255,255,255,0.65);
}

.tema-escuro .label, .tema-escuro .caption {
  color: rgba(255,255,255,0.3);
}

.tema-escuro .texto-sec {
  color: rgba(255,255,255,0.35);
}

.tema-escuro .barra-item {
  border-left-color: rgba(255,255,255,0.3);
}

.tema-escuro .barra-divisoria {
  background: rgba(255,255,255,0.15);
}

.tema-escuro .btn-primario {
  background: var(--cor-branco);
  color: var(--cor-preta);
}

.tema-escuro .btn-primario:hover {
  opacity: 0.85;
}

.tema-escuro .btn-secundario {
  border-color: rgba(255,255,255,0.3);
  color: var(--cor-branco);
}

.tema-escuro .btn-secundario:hover {
  background: rgba(255,255,255,0.08);
}

.tema-escuro .btn-fantasma {
  color: rgba(255,255,255,0.35);
}

.tema-escuro .btn-fantasma:hover {
  color: var(--cor-branco);
}

.tema-escuro .card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.tema-escuro .card-destaque {
  background: rgba(255,255,255,0.07);
}

.tema-escuro .campo-input,
.tema-escuro .campo-select,
.tema-escuro .campo-textarea {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: var(--cor-branco);
}

.tema-escuro .campo-input::placeholder,
.tema-escuro .campo-textarea::placeholder {
  color: rgba(255,255,255,0.25);
}

.tema-escuro .campo-input:focus,
.tema-escuro .campo-select:focus,
.tema-escuro .campo-textarea:focus {
  border-color: rgba(255,255,255,0.5);
}

.tema-escuro .campo-label {
  color: rgba(255,255,255,0.45);
}

.tema-escuro .citacao,
.tema-escuro blockquote {
  border-left-color: rgba(255,255,255,0.2);
}

.tema-escuro .citacao-texto {
  color: var(--cor-branco);
}

.tema-escuro .depoimento {
  background: rgba(255,255,255,0.05);
}

.tema-escuro .tabela th {
  color: rgba(255,255,255,0.3);
  border-bottom-color: rgba(255,255,255,0.08);
}

.tema-escuro .tabela td {
  color: rgba(255,255,255,0.65);
  border-bottom-color: rgba(255,255,255,0.04);
}

.tema-escuro .tabela tbody tr:hover td {
  background: rgba(255,255,255,0.04);
}

.tema-escuro .tag {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.45);
}

.tema-escuro .tag-preta {
  background: var(--cor-branco);
  border-color: var(--cor-branco);
  color: var(--cor-preta);
}

.tema-escuro .alerta-info {
  background: rgba(255,255,255,0.04);
  border-left-color: rgba(255,255,255,0.2);
}

.tema-escuro .accordion-item        { border-color: rgba(255,255,255,0.08); }
.tema-escuro .accordion-gatilho     { color: rgba(255,255,255,0.7); }
.tema-escuro .accordion-gatilho:hover { color: var(--cor-branco); }

.tema-escuro .progresso             { background: rgba(255,255,255,0.1); }
.tema-escuro .progresso-barra       { background: var(--cor-branco); }
.tema-escuro .progresso-etapa-ponto { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.15); }
.tema-escuro .progresso-etapa-item.ativo .progresso-etapa-ponto { background: var(--cor-preta); border-color: var(--cor-branco); }
.tema-escuro .progresso-etapa-item.concluido .progresso-etapa-ponto { background: var(--cor-branco); border-color: var(--cor-branco); }
.tema-escuro .progresso-etapa-linha { background: rgba(255,255,255,0.1); }
.tema-escuro .progresso-etapa-item.concluido .progresso-etapa-linha { background: var(--cor-branco); }

.tema-escuro .opcao-box {
  background: transparent;
  border-color: rgba(255,255,255,0.2);
}

.tema-escuro .opcao-input:checked + .opcao-box {
  background: var(--cor-branco);
  border-color: var(--cor-branco);
}

.tema-escuro input[type="checkbox"]:checked + .opcao-box::after {
  border-color: var(--cor-preta);
}

.tema-escuro input[type="radio"]:checked + .opcao-box::after {
  background: var(--cor-preta);
}

.tema-escuro .opcao-texto {
  color: rgba(255,255,255,0.65);
}

/* ----------------------------------------------------------
   29. PRINT — ESTILOS PARA IMPRESSÃO
   ---------------------------------------------------------- */

@media print {
  /* Ocultar elementos de interface */
  nav, .nav, .nav-wrapper, .vitrine-nav, .vitrine-topo,
  .sim-btn, button:not(.accordion-gatilho) { display: none !important; }

  /* Fundo branco e texto preto */
  body, .tema-escuro {
    background: white !important;
    color: black !important;
  }

  /* Remover sombras e transições */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
  }

  /* Fontes de impressão */
  body { font-size: 10pt; line-height: 1.5; }

  /* Evitar quebras indesejadas */
  .card, .cabecalho-secao, .processo-etapa,
  .depoimento, .alerta, blockquote { page-break-inside: avoid; }

  h1, h2, h3, h4 { page-break-after: avoid; }

  /* Mostrar URLs dos links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Blocos decorativos em impressão — apenas off-white */
  .bloco-cinza, .bloco-bege { background: #f0f0f0 !important; }
}

/* ----------------------------------------------------------
   30. ÍCONES
   Phosphor Icons · Thin (MIT License · phosphoricons.com)
   Pasta: /icons/{nome}-thin.svg
   Uso: <img src="./icons/trash-thin.svg" class="icone" data-tooltip="Deletar">
   Tamanhos: .icone-xs (14) · .icone-sm (16) · .icone (20) · .icone-lg (24) · .icone-xl (32)
   Tooltip: qualquer elemento pode receber data-tooltip="Label"
   Cor: use filter CSS ou currentColor via SVG inline para colorir
   ---------------------------------------------------------- */

/* Tamanhos */
.icone-xs { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; }
.icone-sm { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; }
.icone    { width: 20px; height: 20px; display: inline-block; flex-shrink: 0; }
.icone-lg { width: 24px; height: 24px; display: inline-block; flex-shrink: 0; }
.icone-xl { width: 32px; height: 32px; display: inline-block; flex-shrink: 0; }

/* Botão de ícone — área clicável sem estilo de botão */
.icone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--cor-texto-sec);
  border-radius: 2px;
  transition: color var(--transicao-rapida), background var(--transicao-rapida);
  position: relative; /* necessário para o tooltip */
}

.icone-btn:hover {
  color: var(--cor-preta);
  background: var(--cor-off-white);
}

/* Opacidade padrão para ícones standalone */
.icone-btn img,
.icone-btn svg {
  opacity: 0.65;
  transition: opacity var(--transicao-rapida);
}

.icone-btn:hover img,
.icone-btn:hover svg {
  opacity: 1;
}

/* ----------------------------------------------------------
   TOOLTIP
   Uso: adicione data-tooltip="Label" em qualquer elemento
   <button class="icone-btn" data-tooltip="Deletar">...</button>
   ---------------------------------------------------------- */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--cor-preta);
  color: var(--cor-branco);
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px var(--space-3);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transicao-rapida);
  z-index: 100;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* Tooltip abaixo — .tooltip-baixo */
[data-tooltip].tooltip-baixo::after {
  bottom: auto;
  top: calc(100% + var(--space-2));
}

/* Tooltip à direita — .tooltip-dir */
[data-tooltip].tooltip-dir::after {
  left: calc(100% + var(--space-2));
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* Tooltip à esquerda — .tooltip-esq */
[data-tooltip].tooltip-esq::after {
  right: calc(100% + var(--space-2));
  left: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* Modo escuro */
.tema-escuro [data-tooltip]::after {
  background: var(--cor-branco);
  color: var(--cor-preta);
}


/* ----------------------------------------------------------
   31. INSTAGRAM CARDS
   Formato principal: 4:5 · 1080×1350px (feed retrato)
   Também suportado: 1:1 (quadrado) · 9:16 (stories/reels)
   Na vitrine: demo a 240px de largura

   Estrutura padrão:
   <div class="ig-card ig-retrato">
     <div class="ig-bloco ig-bloco-cinza ig-bloco-topo-dir" style="width:32%;height:20%;"></div>
     <div class="ig-conteudo">
       <span class="ig-categoria">Categoria · 2025</span>
       <div class="ig-espaco"></div>
       <h2 class="ig-titulo">Título do card</h2>
       <p class="ig-corpo">Texto complementar.</p>
     </div>
     <div class="ig-assinatura"><div class="ig-barra"></div></div>
   </div>
   ---------------------------------------------------------- */

/* ── Base ── */
.ig-card {
  position: relative;
  overflow: hidden;
  background: var(--cor-branco);
  font-family: var(--fonte-corpo);
  display: flex;
  flex-direction: column;
}

/* ── Proporções ── */
.ig-retrato  { aspect-ratio: 4 / 5; }    /* 1080×1350 — padrão feed */
.ig-quadrado { aspect-ratio: 1 / 1; }    /* 1080×1080 */
.ig-stories  { aspect-ratio: 9 / 16; }   /* 1080×1920 — stories/reels */

/* ── Fundos ── */
.ig-fundo-branco   { background: var(--cor-branco); }
.ig-fundo-offwhite { background: var(--cor-off-white); }
.ig-fundo-cinza    { background: var(--cor-cinza); }
.ig-fundo-bege     { background: var(--cor-bege); }
.ig-fundo-preto    { background: var(--cor-preta); }

/* ── Área de conteúdo ── */
.ig-conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 9% 8% 3%;
  position: relative;
  z-index: 1;
}

/* ── Espaçador — empurra título para baixo deixando respiro ── */
.ig-espaco { flex: 1; min-height: 8%; }

/* ── Tipografia ── */
.ig-categoria {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: 0.48rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
  display: block;
}

.ig-titulo {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--cor-texto);
  line-height: 1.1;
  margin-top: 0.35em;
}

.ig-titulo-xl {
  font-size: 1.65rem;
  line-height: 1.05;
}

.ig-corpo {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: 0.5rem;
  color: var(--cor-texto);
  line-height: 1.75;
  margin-top: 0.65em;
}

.ig-detalhe {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: 0.42rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
  display: block;
  margin-top: 0.5em;
}

/* ── Assinatura rodapé — contém barra | e/ou logo ── */
.ig-assinatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2% 8% 7%;
  position: relative;
  z-index: 1;
}

/* ── Barra | centralizada ── */
.ig-barra {
  width: 1px;
  height: 1.6rem;
  background: var(--cor-cinza);
}

/* ── Logo no rodapé (CTA / fechamento) ── */
.ig-logo-rodape {
  width: 38%;
  height: auto;
  margin-top: 0.6rem;
}

/* ── Logo discreto no canto ── */
.ig-logo-canto {
  position: absolute;
  bottom: 7%;
  right: 8%;
  width: 18%;
  height: auto;
  opacity: 0.25;
  z-index: 2;
}

/* ── Logo vertical girado ── */
.ig-logo-vertical {
  position: absolute;
  right: 8%;
  bottom: calc(8% + 18%);
  width: 11%;
  height: auto;
  transform: rotate(-90deg);
  transform-origin: right bottom;
  opacity: 0.85;
  z-index: 2;
}

/* ── Número do slide ── */
.ig-numero {
  position: absolute;
  bottom: 7%;
  left: 8%;
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: 0.38rem;
  letter-spacing: 0.2em;
  color: var(--cor-texto-sec);
  z-index: 2;
}

/* ── Bloco decorativo ── */
.ig-bloco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.ig-bloco-topo-dir  { top: 0; right: 0; }
.ig-bloco-topo-esq  { top: 0; left: 0; }
.ig-bloco-fundo-dir { bottom: 0; right: 0; }
.ig-bloco-fundo-esq { bottom: 0; left: 0; }
.ig-bloco-cinza     { background: var(--cor-cinza); }
.ig-bloco-bege      { background: var(--cor-bege); }
.ig-bloco-offwhite  { background: var(--cor-off-white); }
.ig-bloco-escuro    { background: rgba(255,255,255,0.06); }

/* Conteúdo acima do bloco */
.ig-card > *:not(.ig-bloco) { position: relative; z-index: 1; }

/* ── Barra | dentro do bloco topo (slide fechamento) ──
   Posiciona-se na borda inferior do bloco, centralizada */
.ig-barra-no-bloco {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 1px;
  background: var(--cor-cinza);
  z-index: 2;
}

/* ── Lista com barra | (padrão slide 14) ── */
.ig-lista-barra {
  display: flex;
  flex-direction: column;
  margin-top: 0.5em;
}
.ig-lista-barra-item {
  padding: 0.45em 0 0.45em 0.6em;
  border-left: 1px solid var(--cor-texto);
  border-bottom: 1px solid var(--cor-cinza);
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.ig-lista-barra-item:last-child { border-bottom: none; }
.ig-item-titulo {
  font-family: var(--fonte-corpo);
  font-weight: 300;
  font-size: 0.5rem;
  color: var(--cor-texto);
  line-height: 1.3;
}
.ig-item-desc {
  font-family: var(--fonte-corpo);
  font-weight: 200;
  font-size: 0.42rem;
  color: var(--cor-texto-sec);
}

/* ── Lista numerada com linha (padrão slide 16) ── */
.ig-lista-num {
  display: flex;
  flex-direction: column;
  margin-top: 0.5em;
}
.ig-lista-num-item {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  gap: 0.4em;
  padding: 0.45em 0;
  border-bottom: 1px solid var(--cor-cinza);
  align-items: start;
}
.ig-lista-num-item:last-child { border-bottom: none; }
.ig-num {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 0.52rem;
  color: var(--cor-texto-sec);
  line-height: 1.3;
}

/* ── Modo escuro ── */
.ig-fundo-preto .ig-titulo,
.ig-fundo-preto .ig-corpo         { color: var(--cor-branco); }
.ig-fundo-preto .ig-categoria,
.ig-fundo-preto .ig-detalhe,
.ig-fundo-preto .ig-numero        { color: rgba(255,255,255,0.35); }
.ig-fundo-preto .ig-barra,
.ig-fundo-preto .ig-barra-no-bloco { background: rgba(255,255,255,0.2); }
.ig-fundo-preto .ig-lista-barra-item { border-color: rgba(255,255,255,0.6); border-bottom-color: rgba(255,255,255,0.1); }
.ig-fundo-preto .ig-lista-num-item   { border-bottom-color: rgba(255,255,255,0.1); }
.ig-fundo-preto .ig-item-titulo      { color: var(--cor-branco); }
.ig-fundo-preto .ig-item-desc        { color: rgba(255,255,255,0.45); }