/* ==========================================================================
   CEDO EQUIPAMENTOS DE SEGURANÇA — base.css
   Fundação visual: tokens, reset, elementos base e componentes reutilizáveis.

   THESIS      A linguagem visual do próprio equipamento de segurança em altura:
               laranja de cinta e talabarte, grafite de aço, preto-sobre-laranja
               de sinalização. Recusa o site de serviço genérico com cards
               brancos iguais e azul corporativo.
   OWN-WORLD   Laranja #F1592A como campo, não como detalhe. Grafite #373435 na
               estrutura. Teko condensada em caixa alta para os títulos, Barlow
               18/28 no corpo, como documento técnico. Cantos de 4px nos
               controles, 12px nos blocos. Ícones desenhados em traço de 2px.
   STORY       Quem chega precisa saber, em segundos, que a Cedo instala, testa
               e certifica sistemas de ancoragem dentro da NR, e sair com um
               orçamento pedido.
   FORM        Direção pinada pelo briefing (referência MetoBuild + marca Cedo),
               sem sorteio de conceito. Ver briefing-cedoequipamentos.md, seção 6.
   FINISH      unreviewed and undocumented is unfinished; this build ends with
               the finish review, the verdict, and DESIGN.md
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {

  /* --- Cor: marca ------------------------------------------------------- */
  --cor-laranja:        #F1592A;  /* cor da marca. Campos, acentos, ícones.   */
  --cor-laranja-600:    #C7431C;  /* preenchimento com texto branco (4.94:1)  */
  --cor-laranja-700:    #A63614;  /* hover do preenchimento (6.65:1)          */
  --cor-laranja-800:    #B33C17;  /* faixa escura com texto branco (5.87:1)   */
  --cor-laranja-100:    #FDEDE7;  /* fundo suave, realce de bloco             */

  /* --- Cor: tinta (neutros quentes, derivados do grafite da marca) ------- */
  --cor-tinta-900:      #1C1A1B;  /* rodapé, blocos escuros                   */
  --cor-tinta-800:      #262324;
  --cor-tinta-700:      #373435;  /* grafite da marca. Texto principal.       */
  --cor-tinta-500:      #6B6668;  /* texto secundário (5.64:1 no branco)      */
  --cor-tinta-300:      #B8B4B5;  /* texto secundário sobre fundo escuro      */
  --cor-tinta-200:      #DEDBDB;  /* bordas                                   */
  --cor-tinta-100:      #EFEDEC;  /* divisores                                */
  --cor-tinta-050:      #F7F6F5;  /* superfície alternada                     */
  --cor-branco:         #FFFFFF;

  /* --- Cor: sinal (uso funcional, nunca decorativo) --------------------- */
  --cor-sinal:          #F2B705;  /* selo de norma / atenção. Texto grafite.  */
  --cor-zap-de:         #075E54;  /* WhatsApp: início do gradiente            */
  --cor-zap-para:       #0E7A6B;  /* WhatsApp: fim do gradiente               */
  --cor-erro:           #B3261E;
  --cor-sucesso:        #1B6E3C;

  /* --- Papéis semânticos ------------------------------------------------ */
  --fundo:              var(--cor-branco);
  --fundo-alt:          var(--cor-tinta-050);
  --fundo-escuro:       var(--cor-tinta-900);
  --texto:              var(--cor-tinta-700);
  --texto-suave:        var(--cor-tinta-500);
  --texto-invertido:    var(--cor-branco);
  --borda:              var(--cor-tinta-200);
  --acento:             var(--cor-laranja);
  --acento-solido:      var(--cor-laranja-600);
  --foco:               var(--cor-laranja-600);

  /* --- Tipografia ------------------------------------------------------- */
  --fonte-display:      "Teko", "Arial Narrow", sans-serif;
  --fonte-corpo:        "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display:         clamp(2.75rem, 4vw,   5rem);      /*  44 →  96px */
  --fs-titulo:          clamp(2rem,    4.5vw, 3.5rem);    /*  32 →  56px */
  --fs-h3:              clamp(1.5rem,  2.6vw, 2.125rem);  /*  24 →  34px */
  --fs-h4:              1.375rem;                          /*  22px */
  --fs-h5:              1.125rem;                          /*  18px */
  --fs-corpo:           1.125rem;                          /*  18px, como a referência */
  --fs-corpo-p:         1rem;                              /*  16px */
  --fs-mini:            0.8125rem;                         /*  13px */

  --lh-display:         0.88;
  --lh-titulo:          1.02;
  --lh-h3:              1.15;
  --lh-corpo:           1.6;

  --tracking-display:   -0.015em;
  --tracking-mini:      0.08em;

  --medida:             68ch;   /* largura de leitura confortável */

  /* --- Espaçamento (base 4px) ------------------------------------------ */
  --esp-1:  0.25rem;   /*   4 */
  --esp-2:  0.5rem;    /*   8 */
  --esp-3:  0.75rem;   /*  12 */
  --esp-4:  1rem;      /*  16 */
  --esp-5:  1.5rem;    /*  24 */
  --esp-6:  2rem;      /*  32 */
  --esp-7:  3rem;      /*  48 */
  --esp-8:  4rem;      /*  64 */
  --esp-9:  6rem;      /*  96 */
  --esp-10: 8rem;      /* 128 */
  --esp-secao:          clamp(4rem, 9vw, 8rem);
  --largura-max:        1220px;
  --gutter:             clamp(1.25rem, 4vw, 2.5rem);

  /* --- Raios ------------------------------------------------------------ */
  --raio-1:     4px;    /* controles: botões, campos            */
  --raio-2:     8px;    /* elementos menores dentro de blocos   */
  --raio-3:    12px;    /* cards e blocos                       */
  --raio-4:    16px;    /* blocos grandes, mídia                */
  --raio-total: 999px;

  /* --- Sombras (sempre com deslocamento + desfoque) --------------------- */
  --sombra-1: 0 1px 2px rgba(28, 26, 27, 0.06),
              0 2px 8px rgba(28, 26, 27, 0.05);
  --sombra-2: 0 4px 10px rgba(28, 26, 27, 0.07),
              0 12px 28px rgba(28, 26, 27, 0.08);
  --sombra-3: 0 10px 24px rgba(28, 26, 27, 0.10),
              0 26px 60px rgba(28, 26, 27, 0.12);
  --sombra-acento: 0 6px 16px rgba(199, 67, 28, 0.28);

  /* --- Movimento -------------------------------------------------------- */
  --t-rapido:  160ms;
  --t-medio:   300ms;
  --t-lento:   600ms;
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-firme: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

/* Dentro de :where() para o reset ter especificidade zero. Sem isso,
   ul[class] (0,1,1) vence .envolucro (0,1,0) e a lista perde a margem e o
   respiro lateral do envólucro, escapando da coluna de conteúdo. */
:where(ul[class]),
:where(ol[class]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; }

/* ==========================================================================
   3. ELEMENTOS BASE
   ========================================================================== */

body {
  /* clip, e não hidden: as palavras dos títulos entram na escala 2 e podem
     estourar a largura por um instante. O clip corta sem criar container de
     rolagem, então o cabeçalho continua sticky. */
  overflow-x: clip;
  background-color: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo);
  font-weight: 400;
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  color: var(--cor-tinta-900);
}

h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-titulo);  line-height: var(--lh-titulo); }
h3 { font-size: var(--fs-h3);      line-height: var(--lh-h3); }

h4, h5, h6 {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--cor-tinta-900);
}

h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-corpo-p); }

p { max-width: var(--medida); }

p + p { margin-top: var(--esp-4); }

strong { font-weight: 700; color: var(--cor-tinta-900); }

/* --- Links ------------------------------------------------------------- */

a {
  color: var(--cor-laranja-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--t-rapido) var(--ease-saida),
              text-decoration-color var(--t-rapido) var(--ease-saida);
}

a:hover { color: var(--cor-laranja-700); }

/* Link dentro de texto corrido: sublinhado desde o repouso, para não depender
   só da cor — a cor sozinha não é sinal suficiente de link. */
.texto a,
p a {
  text-decoration: underline;
  text-decoration-color: rgba(199, 67, 28, 0.4);
}

.texto a:hover,
p a:hover { text-decoration-color: currentColor; }

/* Link autônomo com seta, usado em cards e listas */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-weight: 700;
  font-size: var(--fs-corpo-p);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.link-seta svg { transition: transform var(--t-medio) var(--ease-saida); }
.link-seta:hover svg { transform: translateX(4px); }

/* --- Foco: um anel só, visível em qualquer fundo ----------------------- */

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--raio-1);
}

.superficie-escura :focus-visible,
.btn--primario:focus-visible {
  outline-color: var(--cor-branco);
}

/* ==========================================================================
   4. TIPOGRAFIA DE SEÇÃO
   ========================================================================== */

/* Título de seção. Sem rótulo acima: o título carrega o peso sozinho. */
.titulo-secao {
  font-family: var(--fonte-display);
  font-size: var(--fs-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cor-tinta-900);
  max-width: 18ch;
  text-wrap: balance;
}

.titulo-secao em {
  font-style: normal;
  color: var(--cor-laranja);
}

.subtitulo {
  margin-top: var(--esp-4);
  max-width: 56ch;
  color: var(--texto-suave);
  font-size: var(--fs-corpo);
}

/* Etiqueta técnica: só para dado medido (norma, carga, prazo), nunca como
   rótulo decorativo em cima de título. */
.etiqueta {
  display: inline-block;
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--tracking-mini);
  text-transform: uppercase;
  color: var(--texto-suave);
}

.superficie-escura .titulo-secao { color: var(--cor-branco); }
.superficie-escura .subtitulo,
.superficie-escura .etiqueta { color: var(--cor-tinta-300); }

/* ==========================================================================
   5. BOTÕES
   ========================================================================== */

.btn {
  --btn-fundo: transparent;
  --btn-texto: var(--cor-tinta-900);
  --btn-borda: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: 0.9375rem var(--esp-5);   /* 15px 24px */
  min-height: 3.25rem;               /* 52px: alvo de toque confortável */
  border: 2px solid var(--btn-borda);
  border-radius: var(--raio-1);
  background-color: var(--btn-fundo);
  color: var(--btn-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo-p);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-rapido) var(--ease-saida),
              border-color var(--t-rapido) var(--ease-saida),
              color var(--t-rapido) var(--ease-saida),
              box-shadow var(--t-medio) var(--ease-saida),
              transform var(--t-rapido) var(--ease-saida);
}

.btn svg { flex: 0 0 auto; }

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* --- Primário: ação principal ----------------------------------------- */
.btn--primario {
  --btn-fundo: var(--cor-laranja-600);
  --btn-texto: var(--cor-branco);
  --btn-borda: var(--cor-laranja-600);
  box-shadow: var(--sombra-acento);
}

.btn--primario:hover:not([disabled]) {
  --btn-fundo: var(--cor-laranja-700);
  --btn-borda: var(--cor-laranja-700);
  box-shadow: 0 8px 22px rgba(166, 54, 20, 0.34);
}

/* --- Secundário: ação alternativa -------------------------------------- */
.btn--secundario {
  --btn-texto: var(--cor-tinta-900);
  --btn-borda: var(--cor-tinta-900);
}

.btn--secundario:hover:not([disabled]) {
  --btn-fundo: var(--cor-tinta-900);
  --btn-texto: var(--cor-branco);
}

/* --- Fantasma: ação terciária, dentro de blocos densos ----------------- */
.btn--fantasma {
  --btn-texto: var(--cor-laranja-600);
  --btn-borda: var(--borda);
}

.btn--fantasma:hover:not([disabled]) {
  --btn-borda: var(--cor-laranja-600);
  --btn-fundo: var(--cor-laranja-100);
}

/* --- WhatsApp: o btn-shiny-wa, padrão da casa -------------------------- */
/* Trazido do Aços Metafer. A borda é um conic-gradient girando em loop, e o
   ângulo é uma custom property registrada para poder ser animada de verdade.
   Verde escurecido (#075E54 → #0E7A6B) porque o verde da marca WhatsApp
   reprova em AA com texto branco. */

@property --shiny-angle        { syntax: "<angle>";      initial-value: 0deg;    inherits: false; }
@property --shiny-angle-offset { syntax: "<angle>";      initial-value: 0deg;    inherits: false; }
@property --shiny-percent      { syntax: "<percentage>"; initial-value: 5%;      inherits: false; }
@property --shiny-shine        { syntax: "<color>";      initial-value: #ffffff; inherits: false; }

@keyframes shiny-angle { to { --shiny-angle: 360deg; } }

.btn--zap {
  --btn-texto:  var(--cor-branco);
  --btn-borda:  transparent;

  --wa-de:      var(--cor-zap-de);
  --wa-para:    var(--cor-zap-para);
  --wa-luz:     #34D399;
  --wa-aro:     #04443D;
  --wa-sombra:  rgba(7, 94, 84, 0.42);
  --wa-sombra-forte: rgba(7, 94, 84, 0.52);
  --shiny-dur:  3s;
  --shiny-t:    800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--wa-de), var(--wa-para)) padding-box,
    conic-gradient(
      from calc(var(--shiny-angle) - var(--shiny-angle-offset)),
      transparent,
      var(--wa-luz) var(--shiny-percent),
      var(--shiny-shine) calc(var(--shiny-percent) * 2),
      var(--wa-luz) calc(var(--shiny-percent) * 3),
      transparent calc(var(--shiny-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--wa-aro), 0 10px 26px var(--wa-sombra);
  animation: shiny-angle var(--shiny-dur) linear infinite;
  transition:
    --shiny-angle-offset var(--shiny-t),
    --shiny-percent var(--shiny-t),
    box-shadow var(--shiny-t),
    transform var(--shiny-t);
}

/* Lâmina de brilho que atravessa o botão no hover. z-index negativo com
   isolation no pai: pinta acima do gradiente e abaixo do texto. */
.btn--zap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(-50deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  opacity: 0;
  transition: opacity var(--shiny-t);
  pointer-events: none;
}

.btn--zap:is(:hover, :focus-visible):not([disabled]) {
  --shiny-percent: 20%;
  --shiny-angle-offset: 95deg;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--wa-aro), 0 16px 34px var(--wa-sombra-forte);
}

.btn--zap:is(:hover, :focus-visible):not([disabled])::after { opacity: 1; }

.btn--zap:active { transform: translateY(1px); }

/* --- Sobre fundo escuro ou faixa laranja ------------------------------- */
/* .heroi e .capa-interna entram aqui porque são escuros sem carregar a
   classe .superficie-escura: o fundo deles é foto sob véu. */
.superficie-escura .btn--secundario,
.heroi .btn--secundario,
.capa-interna .btn--secundario,
.faixa-acento .btn--secundario {
  --btn-texto: var(--cor-branco);
  --btn-borda: var(--cor-branco);
}

.superficie-escura .btn--secundario:hover:not([disabled]),
.heroi .btn--secundario:hover:not([disabled]),
.capa-interna .btn--secundario:hover:not([disabled]),
.faixa-acento .btn--secundario:hover:not([disabled]) {
  --btn-fundo: var(--cor-branco);
  --btn-texto: var(--cor-tinta-900);
}

.heroi .btn--secundario:focus-visible,
.capa-interna .btn--secundario:focus-visible { outline-color: var(--cor-branco); }

.faixa-acento .btn--primario {
  --btn-fundo: var(--cor-tinta-900);
  --btn-borda: var(--cor-tinta-900);
  box-shadow: 0 6px 16px rgba(28, 26, 27, 0.24);
}

.faixa-acento .btn--primario:hover:not([disabled]) {
  --btn-fundo: #000;
  --btn-borda: #000;
}

/* --- Cápsula: o botão-assinatura da referência ------------------------- */
/* Retângulo laranja com um quadrado grafite encaixado na ponta direita. */
.btn--capsula {
  --btn-fundo: var(--cor-laranja-600);
  --btn-texto: var(--cor-branco);
  --btn-borda: var(--cor-laranja-600);
  padding: 0.375rem 0.375rem 0.375rem var(--esp-5);
  gap: var(--esp-4);
  box-shadow: var(--sombra-acento);
}

.btn--capsula .btn__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;    /* 44px */
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: var(--raio-1);
  background-color: var(--cor-tinta-900);
  transition: transform var(--t-medio) var(--ease-firme),
              background-color var(--t-rapido) var(--ease-saida);
}

.btn--capsula:hover:not([disabled]) {
  --btn-fundo: var(--cor-laranja-700);
  --btn-borda: var(--cor-laranja-700);
}

.btn--capsula:hover:not([disabled]) .btn__icone { transform: translateX(3px); }

/* Cápsula em versão WhatsApp: a forma continua a mesma, a pele é a do
   btn-shiny-wa. O quadrado do ícone sobe para cima da lâmina de brilho. */
/* O box-shadow precisa ser repetido aqui: .btn--capsula vem depois de
   .btn--zap no arquivo e, com a mesma especificidade, venceria com a sombra
   laranja. Esta regra tem especificidade (0,2,0) e resolve. */
.btn--capsula.btn--zap {
  --btn-borda: transparent;
  box-shadow: inset 0 0 0 1px var(--wa-aro), 0 10px 26px var(--wa-sombra);
}

.btn--capsula.btn--zap:is(:hover, :focus-visible):not([disabled]) {
  box-shadow: inset 0 0 0 1px var(--wa-aro), 0 16px 34px var(--wa-sombra-forte);
}

.btn--capsula.btn--zap .btn__icone {
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.btn--capsula.btn--zap:hover:not([disabled]) .btn__icone {
  background-color: rgba(0, 0, 0, 0.46);
}

/* Sobre a faixa laranja o botão de WhatsApp fica igual ao dos outros
   blocos: mesmo verde, mesmo brilho. Só a sombra escurece, para não virar
   um halo esverdeado em cima do laranja. */
.faixa-acento .btn--zap {
  --wa-sombra:       rgba(28, 26, 27, 0.34);
  --wa-sombra-forte: rgba(28, 26, 27, 0.46);
}

/* O botão contornado é preenchido de branco aqui, e não deixado vazado.
   A 16px, nem branco (4.14:1) nem grafite (4.18:1) passam em AA sobre a
   ponta clara do gradiente. Grafite sobre branco resolve com 12.32:1. */
.faixa-acento .btn--secundario {
  --btn-fundo: var(--cor-branco);
  --btn-texto: var(--cor-tinta-900);
  --btn-borda: var(--cor-branco);
  box-shadow: 0 6px 16px rgba(28, 26, 27, 0.22);
}

.faixa-acento .btn--secundario:hover:not([disabled]) {
  --btn-fundo: var(--cor-tinta-900);
  --btn-texto: var(--cor-branco);
  --btn-borda: var(--cor-tinta-900);
}

/* --- Tamanhos ---------------------------------------------------------- */
.btn--largo { width: 100%; }

.btn--pequeno {
  min-height: 2.75rem;
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--fs-mini);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Carregando (usado no envio do formulário, Fase 4) ----------------- */
.btn[data-carregando="true"] {
  cursor: progress;
  pointer-events: none;
}

.btn__spinner {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ==========================================================================
   6. CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-6);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background-color: var(--cor-branco);
  transition: border-color var(--t-medio) var(--ease-saida),
              box-shadow var(--t-medio) var(--ease-saida),
              transform var(--t-medio) var(--ease-saida);
}

.card__titulo {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--cor-tinta-900);
}

.card__texto {
  color: var(--texto-suave);
  font-size: var(--fs-corpo-p);
}

.card__pe {
  margin-top: auto;
  padding-top: var(--esp-4);
}

.card__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--esp-2);
  border-radius: var(--raio-2);
  background-color: var(--cor-laranja-100);
  color: var(--cor-laranja-600);
  transition: background-color var(--t-medio) var(--ease-saida),
              color var(--t-medio) var(--ease-saida);
}

/* Card clicável inteiro */
.card--acionavel:hover,
.card--acionavel:focus-within {
  border-color: var(--cor-laranja);
  box-shadow: var(--sombra-2);
  transform: translateY(-3px);
}

.card--acionavel:hover .card__icone {
  background-color: var(--cor-laranja-600);
  color: var(--cor-branco);
}

/* Card de serviço: número da lista só quando a ordem informa algo */
.card--servico { padding: var(--esp-6) var(--esp-6) var(--esp-5); }

/* Card em destaque: preenchido, para o item principal da grade */
.card--destaque {
  background-color: var(--cor-tinta-900);
  border-color: var(--cor-tinta-900);
}

.card--destaque .card__titulo { color: var(--cor-branco); }
.card--destaque .card__texto  { color: var(--cor-tinta-300); }
.card--destaque .card__icone  {
  background-color: rgba(241, 89, 42, 0.18);
  color: var(--cor-laranja);
}

/* Selo: dado curto e verificável (norma, carga, prazo) */
.selo {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  padding: var(--esp-5) 0;
}

.selo__valor {
  font-family: var(--fonte-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--cor-laranja);
}

.selo__rotulo {
  font-size: var(--fs-corpo-p);
  color: var(--texto-suave);
  max-width: 24ch;
}

.superficie-escura .selo__rotulo { color: var(--cor-tinta-300); }

/* ==========================================================================
   7. BADGE
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-1);
  background-color: var(--cor-tinta-100);
  color: var(--cor-tinta-700);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--tracking-mini);
  text-transform: uppercase;
  line-height: 1.6;
}

.badge--norma {
  background-color: var(--cor-sinal);
  color: var(--cor-tinta-700);
}

.badge--acento {
  background-color: var(--cor-laranja-100);
  color: var(--cor-laranja-700);
}

/* ==========================================================================
   8. FORMULÁRIO
   ========================================================================== */

.campo { display: block; margin-bottom: var(--esp-5); }

.campo__rotulo {
  display: block;
  margin-bottom: var(--esp-2);
  font-size: var(--fs-corpo-p);
  font-weight: 700;
  color: var(--cor-tinta-900);
}

.campo__obrigatorio { color: var(--cor-laranja-600); }

.campo__controle {
  width: 100%;
  padding: var(--esp-3) var(--esp-4);
  min-height: 3.25rem;
  border: 2px solid var(--borda);
  border-radius: var(--raio-1);
  background-color: var(--cor-branco);
  color: var(--texto);
  font-size: var(--fs-corpo-p);
  transition: border-color var(--t-rapido) var(--ease-saida),
              box-shadow var(--t-rapido) var(--ease-saida);
}

.campo__controle::placeholder { color: var(--cor-tinta-500); }

.campo__controle:hover { border-color: var(--cor-tinta-300); }

.campo__controle:focus {
  outline: none;
  border-color: var(--cor-laranja-600);
  box-shadow: 0 0 0 3px rgba(199, 67, 28, 0.18);
}

textarea.campo__controle {
  min-height: 9rem;
  resize: vertical;
  line-height: var(--lh-corpo);
}

.campo__controle[aria-invalid="true"] { border-color: var(--cor-erro); }

.campo__erro {
  display: block;
  margin-top: var(--esp-2);
  color: var(--cor-erro);
  font-size: var(--fs-mini);
  font-weight: 700;
}

.campo__controle[disabled] {
  background-color: var(--cor-tinta-050);
  color: var(--texto-suave);
  cursor: not-allowed;
}

/* Mensagem de retorno do envio */
.aviso {
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-2);
  font-size: var(--fs-corpo-p);
}

.aviso--erro    { background-color: #FBEAE9; color: #8A1D16; }
.aviso--sucesso { background-color: #E7F3EC; color: #14512C; }

/* ==========================================================================
   9. SUPERFÍCIES E ESTRUTURA
   ========================================================================== */

.envolucro {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--esp-secao); }

.secao--alt     { background-color: var(--fundo-alt); }

.superficie-escura {
  background-color: var(--fundo-escuro);
  color: var(--cor-tinta-300);
}

.superficie-escura h1,
.superficie-escura h2,
.superficie-escura h3,
.superficie-escura h4,
.superficie-escura h5,
.superficie-escura strong { color: var(--cor-branco); }

/* Faixa laranja.
   Título em branco: em Teko de 32 a 56px ele conta como texto grande, cujo
   limite é 3:1, e o par entrega 4.14:1 na ponta clara do gradiente.
   Texto corrido continua grafite: em tamanho normal o branco reprovaria. */
.faixa-acento {
  background: #DC4B1D;
  background: linear-gradient(90deg, rgba(220, 75, 29, 1) 0%, rgba(194, 58, 0, 1) 100%);
  color: var(--cor-tinta-900);
}

.faixa-acento h1,
.faixa-acento h2,
.faixa-acento h3 { color: var(--cor-branco); }

.faixa-acento h4,
.faixa-acento strong { color: var(--cor-tinta-900); }

/* :not(.btn) é obrigatório. Sem ele este seletor, que tem especificidade
   (0,1,1), vence o color do .btn, que tem (0,1,0), e o texto do botão de
   WhatsApp sai grafite sobre o verde. */
.faixa-acento a:not(.btn) { color: var(--cor-tinta-900); }

/* Régua de aço: divisor com a espessura da chapa, não uma linha qualquer */
.regua {
  height: 4px;
  border: 0;
  background: linear-gradient(90deg,
              var(--cor-laranja) 0 clamp(3rem, 12%, 7rem),
              var(--cor-tinta-100) clamp(3rem, 12%, 7rem));
}

/* ==========================================================================
   10. UTILITÁRIOS
   ========================================================================== */

.pilha    { display: flex; flex-direction: column; }
.pilha--2 { gap: var(--esp-2); }
.pilha--4 { gap: var(--esp-4); }
.pilha--6 { gap: var(--esp-6); }

.linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4);
}

.grade {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

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

/* Pular para o conteúdo: primeiro item tabulável da página */
.pular-para-conteudo {
  position: absolute;
  left: var(--esp-4);
  top: var(--esp-4);
  z-index: 999;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-1);
  background-color: var(--cor-tinta-900);
  color: var(--cor-branco);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--t-rapido) var(--ease-saida);
}

.pular-para-conteudo:focus-visible {
  transform: translateY(0);
  color: var(--cor-branco);
}

/* ==========================================================================
   11. MOVIMENTO
   ========================================================================== */

/* Entrada no scroll. O conteúdo já nasce visível: a classe .revelar só é
   aplicada por JS quando há suporte, e o estado final é o padrão. */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-lento) var(--ease-saida),
              transform var(--t-lento) var(--ease-saida);
}

.revelar.esta-visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .revelar { opacity: 1; transform: none; }
}