/* ==========================================================================
   MACK MEDICAL, SISTEMA VISUAL DO PROTOTIPO
   Nobox, 17/09/2026. Primeira versao do site novo.

   BASE OFICIAL
   Cor institucional (manual de marca, pagina 9): #005BAB e #00AEEF.
   Paleta completa medida em peca em uso: mais #002E6B para texto, #0CC0DF de
   acento de segundo nivel e a faixa #CFDEE8 a #AAD5E9 de fundo de bloco.
   VERDE E PROIBIDO EM QUALQUER ELEMENTO, por escrito da cliente.
   Tipologia institucional (manual, pagina 8): familia Helvetica.
   Nenhuma fonte, imagem, script ou CSS de origem externa. Tudo local.
   Modo claro apenas. Sem framework, sem build.

   COMO LER ESTE ARQUIVO
   01. Variaveis            08. Migalha de pao
   02. Reset leve           09. Faixa de titulo de pagina
   03. Tipografia           10. Cartoes (categoria, produto, conteudo)
   04. Container e secoes   11. Carrossel
   05. Utilitarios          12. Faixa de conteudo
   06. Cabecalho fixo       13. Bloco reservado de video
   07. Botoes               14. Selo de pendencia e link inerte
                            15. Formulario
                            16. Menu lateral, paginacao, tabela, linha do tempo
                            17. Rodape, redes, ultimos posts, WhatsApp
                            18. Ajustes de impressao
                            19. Barra superior e marca de pendencia
                            20. Carrinho de orcamento no cabecalho
                            21. Botao flutuante de video
                            22. Modo limpo, para mostrar a pagina a cliente
   ========================================================================== */

/* ==========================================================================
   01. VARIAVEIS
   Cor de marca: so as duas do manual. Tudo o mais e neutro frio.
   ========================================================================== */
:root{
  color-scheme: light;

  /* --- PALETA COMPLETA, MEDIDA EM PECA EM USO ---
     Os cinco valores abaixo nao sao derivados de nada: foram medidos pixel a
     pixel na assinatura de e-mail em uso e conferidos com o manual de marca.
     VERDE E PROIBIDO EM QUALQUER ELEMENTO, por escrito da cliente: nada de
     verde em selo, grafico, icone de estado, botao de sucesso ou ilustracao.
     O motivo declarado e que dois concorrentes diretos ja ocupam o verde.
     Unica cor fora desta paleta em todo o arquivo: o ambar de servico do selo
     de pendencia, mais abaixo, que existe justamente para NAO parecer marca. */
  --azul:            #005bab;   /* institucional escuro. Fundo dele: SO texto branco */
  --ciano:           #00aeef;   /* institucional claro. Decoracao apenas, nunca fundo de texto */
  --azul-escuro:     #002e6b;   /* TEXTO. A marca nao usa preto. 13,1:1 sobre branco */
  --ciano-2:         #0cc0df;   /* acento de segundo nivel. 2,2:1 sobre branco:
                                   NUNCA carrega texto sobre claro. Sobre --azul-escuro da 6,0:1 */
  --lavado-1:        #cfdee8;   /* fundo de bloco, extremo claro da faixa medida */
  --lavado-2:        #aad5e9;   /* fundo de bloco, extremo forte da faixa medida */

  /* --- estados, agora apontados para a paleta medida e nao mais derivados ---
     Antes desta rodada estes tres eram clareamento e escurecimento mecanico
     das duas cores institucionais. Agora cada um aponta para um valor medido. */
  --azul-fundo-hover: var(--azul-escuro);   /* era #004282, derivado */
  --azul-tenue:       var(--lavado-1);      /* era #e7f1f9, azul a 8% mecanico */
  --ciano-tenue:      var(--lavado-2);      /* era #e2f6fe, ciano a 8% mecanico */

  /* --- texto: tudo na familia do azul institucional, nenhum neutro preto ---
     Contrastes medidos, nao estimados. Sobre --lavado-2, que e o fundo de
     bloco mais forte da faixa, so --tinta, --tinta-2 e --tinta-3 sao legiveis:
     --azul da 4,35:1 ali e nao serve para texto. */
  --branco:      #ffffff;
  --tinta:       var(--azul-escuro);
                            /* texto principal. 13,1:1 sobre branco, 12,2:1 sobre
                               --fundo-2, 9,5:1 sobre --lavado-1, 8,4:1 sobre --lavado-2 */
  --tinta-2:     #335068;   /* texto de apoio. 8,4:1 sobre branco, 6,1:1 sobre
                               --lavado-1, 5,4:1 sobre --lavado-2 */
  --tinta-3:     #3d5a76;   /* rotulo pequeno. 7,2:1 sobre branco, 6,7:1 sobre
                               --fundo-2, 5,2:1 sobre --lavado-1, 4,6:1 sobre --lavado-2 */
  --linha:       #dfe5ec;
  --linha-forte: #c7d1dd;
  --fundo-2:     #f4f7fa;   /* faixa alternada, cinza frio quase branco */
  --fundo-3:     #eaf0f6;   /* moldura de imagem, area reservada */

  /* --- cor de servico da apresentacao, NAO e cor de marca ---
     Existe so para o selo de pendencia e para o link inerte.
     Fica fora da paleta da marca de proposito: pendencia nao pode parecer marca. */
  --aviso-texto: #7a4f00;
  --aviso-fundo: #fff7e6;
  --aviso-linha: #e6c477;

  /* --- escala tipografica, razao aproximada de 1,125 a 1,3 --- */
  --passo-1: 0.75rem;                                        /* 12px */
  --passo-2: 0.875rem;                                       /* 14px */
  --passo-3: 1rem;                                           /* 16px */
  --passo-4: 1.125rem;                                       /* 18px */
  --passo-5: clamp(1.25rem, 1.08rem + 0.55vw, 1.5rem);       /* 20 a 24px */
  --passo-6: clamp(1.5rem,  1.24rem + 0.90vw, 2rem);         /* 24 a 32px */
  --passo-7: clamp(1.875rem, 1.45rem + 1.60vw, 2.625rem);    /* 30 a 42px */

  --altura-titulo: 1.15;
  --altura-texto:  1.6;

  /* --- espacamento, base 4px --- */
  --e-0: 4px;  --e-1: 8px;  --e-2: 12px; --e-3: 16px;
  --e-4: 24px; --e-5: 32px; --e-6: 48px; --e-7: 64px; --e-8: 96px;
  --e-secao: clamp(40px, 6vw, 88px);
  --gutter:  clamp(16px, 4vw, 32px);   /* nunca menor que 16px */

  /* --- forma --- */
  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(0,46,107,.07), 0 8px 24px rgba(0,46,107,.06);
  --sombra-2: 0 2px 6px rgba(0,46,107,.10), 0 16px 40px rgba(0,46,107,.10);

  --largura-container: 1180px;
  --altura-topo: 76px;
  --altura-tarja: 34px;   /* barra superior, acima do cabecalho grudado */

  /* Pilha institucional. Helvetica primeiro, sem carregar fonte externa. */
  --fonte: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   02. RESET LEVE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
/* O atributo hidden tem que vencer QUALQUER display desta folha. A regra
   [hidden]{display:none} do navegador e folha do agente de usuario e perde de
   toda regra do autor, entao .cartao{display:flex} e .reservado{display:grid}
   deixavam blocos escondidos aparecendo na tela (visto na pagina de carrinho,
   com as duas mensagens contraditorias em cima da lista de itens). */
[hidden]{ display: none !important; }
html{
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;                /* rede de seguranca contra rolagem lateral */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-topo) + var(--e-3));
}
body{
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font: var(--passo-3)/var(--altura-texto) var(--fonte);
  letter-spacing: .005em;
  overflow-x: clip;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
img,svg,video{ display: block; max-width: 100%; }
img{ height: auto; }
a{ color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover{ color: var(--azul-fundo-hover); }
button,input,select,textarea{ font: inherit; color: inherit; }
table{ border-collapse: collapse; }
hr{ border: 0; border-top: 1px solid var(--linha); margin: var(--e-5) 0; }
:focus-visible{ outline: 3px solid var(--azul); outline-offset: 2px; border-radius: var(--r-1); }
::selection{ background: var(--ciano-tenue); color: var(--tinta); }

/* ==========================================================================
   03. TIPOGRAFIA EM ESCALA
   Titulo sempre em tinta ou em branco. Ciano nunca carrega texto.
   ========================================================================== */
.t1, h1{ font-size: var(--passo-7); line-height: var(--altura-titulo); font-weight: 700; letter-spacing: -.02em; }
.t2, h2{ font-size: var(--passo-6); line-height: var(--altura-titulo); font-weight: 700; letter-spacing: -.015em; }
.t3, h3{ font-size: var(--passo-5); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.t4, h4{ font-size: var(--passo-4); line-height: 1.35; font-weight: 700; }
.lead{ font-size: var(--passo-4); color: var(--tinta-2); line-height: 1.55; }
.apoio{ font-size: var(--passo-2); color: var(--tinta-2); }
.micro{ font-size: var(--passo-1); color: var(--tinta-3); }

/* Rotulo pequeno em caixa alta. Serve de super titulo de secao. */
.super{
  display: block;
  font-size: var(--passo-1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul);
}
.super--claro{ color: rgba(255,255,255,.82); }

/* Filete ciano sob o titulo. Unico uso decorativo do ciano em area clara. */
.filete{ position: relative; padding-bottom: var(--e-2); }
.filete::after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; background: var(--ciano); border-radius: var(--r-pill);
}
.filete--centro::after{ left: 50%; transform: translateX(-50%); }

/* Bloco de texto corrido vindo do site atual: descricao de produto, historico. */
.texto-rico{ max-width: 68ch; color: var(--tinta-2); }
.texto-rico > * + *{ margin-top: var(--e-3); }
.texto-rico strong{ color: var(--tinta); }
.texto-rico h3, .texto-rico h4{ color: var(--tinta); margin-top: var(--e-5); }
.texto-rico ul{ list-style: none; }
.texto-rico ul li{ position: relative; padding-left: var(--e-4); margin-top: var(--e-1); }
.texto-rico ul li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ciano-2);
}
.texto-rico ol{ list-style: decimal; padding-left: var(--e-4); }

/* Etiqueta de linha propria ou de categoria. */
.etiqueta{
  display: inline-block; padding: 3px var(--e-1);
  font-size: var(--passo-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul); background: var(--azul-tenue);
  border-radius: var(--r-1);
}
.etiqueta--solida{ color: var(--branco); background: var(--azul); }

/* ==========================================================================
   04. CONTAINER E SECOES
   ========================================================================== */
.container{
  width: 100%; max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--estreito{ max-width: 780px; }

.secao{ padding-block: var(--e-secao); }
.secao--curta{ padding-block: clamp(28px, 4vw, 52px); }
.secao--alt{ background: var(--fundo-2); }
/* Faixa de fundo na cor medida da marca, para o bloco que precisa se destacar
   sem virar faixa azul cheia. O degrade percorre a faixa medida inteira, de
   --lavado-1 a --lavado-2, e sobre ele so --tinta, --tinta-2 e --tinta-3 sao
   legiveis: --azul cai para 4,35:1 no extremo forte. */
.secao--lavada{
  background: linear-gradient(180deg, var(--lavado-1), var(--lavado-2));
  color: var(--tinta);
}
.secao--lavada .secao__apoio,
.secao--lavada .apoio{ color: var(--tinta-2); }
.secao--azul{ background: var(--azul); color: var(--branco); }
.secao--azul h1,.secao--azul h2,.secao--azul h3,.secao--azul h4,
.secao--azul p,.secao--azul li{ color: var(--branco); }
.secao--azul .lead,.secao--azul .apoio{ color: rgba(255,255,255,.86); }
.secao--azul .filete::after{ background: var(--ciano); }

.secao__cabeca{
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--e-5);
}
.secao__cabeca > div{ min-width: min(100%, 320px); }
.secao__titulo{ margin: 0; }
.secao__apoio{ margin-top: var(--e-2); color: var(--tinta-2); max-width: 62ch; }
/* Acao do cabecalho de secao: encolhe ate o conteudo, nao ocupa meia linha. */
.secao__acao{
  min-width: 0; flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center;
}

/* Grades. O min() evita estouro de largura em telas de 390px. */
.grade{ display: grid; gap: var(--e-4); }
.grade--2{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grade--3{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grade--4{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grade--lista-lateral{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  .grade--lista-lateral{ grid-template-columns: 260px minmax(0,1fr); gap: var(--e-6); }
}

.pilha > * + *{ margin-top: var(--e-3); }
.pilha--larga > * + *{ margin-top: var(--e-5); }

/* ==========================================================================
   05. UTILITARIOS
   ========================================================================== */
.rolagem-x{                 /* toda tabela e toda faixa larga vive aqui dentro */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Sombra nas bordas enquanto houver conteudo fora da tela. No Mac e no iOS a
     barra de rolagem nao ocupa altura, entao sem isso nada avisa que ha mais
     coluna do lado. O involucro tambem recebe tabindex no HTML, para dar para
     rolar pelo teclado. */
  background:
    linear-gradient(to right, var(--branco) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--branco) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,46,107,.18), rgba(0,46,107,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,46,107,.18), rgba(0,46,107,0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.secao--alt .rolagem-x{
  background-image:
    linear-gradient(to right, var(--fundo-2) 30%, rgba(244,247,250,0)),
    linear-gradient(to left,  var(--fundo-2) 30%, rgba(244,247,250,0)),
    radial-gradient(farthest-side at 0 50%, rgba(0,46,107,.18), rgba(0,46,107,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,46,107,.18), rgba(0,46,107,0));
}
.rolagem-x:focus-visible{ outline: 3px solid var(--azul); outline-offset: 2px; }
.rolagem-x__dica{           /* linha curta abaixo da tabela, so no celular */
  font-size: var(--passo-1); color: var(--tinta-3); padding-top: var(--e-0);
}
@media (min-width: 760px){ .rolagem-x__dica{ display: none; } }
.visualmente-oculto{
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pular-para-conteudo{
  position: absolute; left: var(--e-3); top: -60px; z-index: 60;
  padding: var(--e-1) var(--e-3);
  background: var(--azul); color: var(--branco); border-radius: var(--r-1);
  text-decoration: none; transition: top .15s;
}
.pular-para-conteudo:focus{ top: var(--e-1); color: var(--branco); }
.centro{ text-align: center; }
.sem-margem{ margin: 0 !important; }

/* Motivo de onda do manual de marca, usado com parcimonia.
   SVG embutido em data URI: nao e origem externa, viaja dentro do CSS. */
.onda{
  display: block; width: 100%; height: clamp(16px, 2.4vw, 30px);
  background: no-repeat center/100% 100%
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 40" preserveAspectRatio="none"><path d="M0 22C160 2 340 0 600 12s430 26 600 8v20H0z" fill="%23005bab"/></svg>');
}
.onda--ciano{
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 40" preserveAspectRatio="none"><path d="M0 22C160 2 340 0 600 12s430 26 600 8v20H0z" fill="%2300aeef"/></svg>');
}
.onda--invertida{ transform: scaleY(-1); }

/* ==========================================================================
   06. CABECALHO FIXO
   Fixo no topo por position sticky. O logo usa recorte por object-fit,
   porque o PNG oficial vem em tela quadrada com muita folga em volta.
   ========================================================================== */
.topo{
  position: sticky; top: 0; z-index: 50;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}
.topo__barra{
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--altura-topo);
  padding-block: var(--e-2);
}

/* Marca. --marca-h controla a altura util do logotipo, nao da imagem.
   .marca   logo positivo colorido. Regra do manual: ele e a aplicacao ideal
            sobre branco e sobre fundo claro, e vale ate 15% de preto. A versao
            negativa do manual so pode ir sobre o ciano 100% da marca, e por
            isso ela nao e usada em lugar nenhum deste prototipo. */
/* Area de respiro do manual: a altura do "l" de "medical", medida no arquivo
   oficial, e 54% da altura do logotipo, e vale em TODOS os lados. Ela entra
   como padding da marca. A esquerda fica com o gutter do container, que nunca
   e menor que 16px. O PNG vem recortado justo no conteudo, entao a imagem usa
   object-fit contain e nunca recorta nada. */
.marca{
  --marca-h: 30px;
  --marca-respiro: calc(var(--marca-h) * .54);
  display: block; flex: 0 0 auto;
  padding: var(--marca-respiro) var(--marca-respiro) var(--marca-respiro) 0;
}
.marca__img{
  height: var(--marca-h);
  aspect-ratio: 720 / 125;     /* proporcao real do arquivo, ja recortado */
  width: auto; object-fit: contain;
}
@media (min-width: 900px){ .marca{ --marca-h: 34px; } }

.topo__acoes{ display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }

/* Navegacao. Sem JS: um checkbox oculto abre o painel no celular. */
.menu-alterna{ position: absolute; opacity: 0; pointer-events: none; }
.menu-botao{
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  border: 1px solid var(--linha-forte); border-radius: var(--r-1);
  background: var(--branco); cursor: pointer;
}
.menu-botao__traco{ display: block; height: 2px; background: var(--azul); border-radius: 2px; }
.menu-alterna:focus-visible + .menu-botao{ outline: 3px solid var(--azul); outline-offset: 2px; }

.nav{ width: 100%; }
.nav__lista{ display: flex; flex-direction: column; }
.nav__item{ border-top: 1px solid var(--linha); }
.nav__link{
  display: block; padding: var(--e-2) 0;
  color: var(--tinta); font-size: var(--passo-2); font-weight: 700;
  text-decoration: none;
}
.nav__link:hover{ color: var(--azul); }
.nav__link--ativo{ color: var(--azul); }
.submenu{ padding: 0 0 var(--e-2) var(--e-3); }
.submenu__link{
  display: block; padding: 5px 0;
  color: var(--tinta-2); font-size: var(--passo-2); text-decoration: none;
}
.submenu__link:hover{ color: var(--azul); }

/* Celular: painel fechado por padrao. */
@media (max-width: 899px){
  .nav{ display: none; order: 3; padding-bottom: var(--e-2); }
  /* O topo e sticky com top:0. Se o painel do menu ficar mais alto que a tela,
     o fim do menu fica inalcancavel, porque rolar a pagina nao move um elemento
     grudado no topo. Entao quem rola por dentro e o proprio topo, do logotipo
     ao ultimo item, e nada fica fora de alcance. */
  .topo:has(.menu-alterna:checked){
    max-height: calc(100vh - var(--altura-tarja));
    max-height: calc(100dvh - var(--altura-tarja));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu-alterna:checked ~ .nav{ display: block; }
  .topo__barra{ flex-wrap: wrap; }
  /* O cabecalho quebra em duas linhas aqui. Sem estas tres linhas a busca e o
     carrinho ficam grudados na direita da segunda linha, com um vazio grande
     do lado do logotipo. Assim a busca abre e o carrinho fecha a linha. */
  .topo__acoes{ width: 100%; margin-left: 0; justify-content: space-between; }
  .busca{ flex: 1 1 auto; min-width: 0; }
  .busca__campo{ width: 100%; }
}
/* Desktop: menu em linha, submenu ao passar o cursor ou ao receber foco. */
@media (min-width: 900px){
  .menu-botao{ display: none; }
  .nav{ width: auto; margin-left: auto; }
  .nav__lista{ flex-direction: row; align-items: center; gap: clamp(12px, 1.6vw, 26px); }
  .nav__item{ border-top: 0; position: relative; }
  .nav__link{ padding: var(--e-2) 0; white-space: nowrap; }
  .nav__item--tem-sub > .nav__link::after{
    content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px;
    border: 4px solid transparent; border-top-color: currentColor;
  }
  .submenu{
    position: absolute; left: -12px; top: 100%; z-index: 20;
    display: none; min-width: 264px; padding: var(--e-1) 0;
    background: var(--branco); border: 1px solid var(--linha);
    border-radius: var(--r-2); box-shadow: var(--sombra-2);
  }
  .nav__item--tem-sub:hover > .submenu,
  .nav__item--tem-sub:focus-within > .submenu{ display: block; }
  .submenu__link{ padding: 7px var(--e-3); }
  .submenu__link:hover{ background: var(--azul-tenue); }
}

/* Busca do cabecalho. */
.busca{ display: flex; align-items: center; gap: 0; }
.busca__campo{
  width: clamp(120px, 20vw, 190px);
  padding: 9px var(--e-2);
  border: 1px solid var(--linha-forte); border-right: 0;
  border-radius: var(--r-1) 0 0 var(--r-1);
  background: var(--branco); font-size: var(--passo-2);
}
.busca__campo::placeholder{ color: var(--tinta-3); }
.busca__botao{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 40px; padding: 0;
  border: 1px solid var(--azul); border-radius: 0 var(--r-1) var(--r-1) 0;
  background: var(--azul); color: var(--branco); cursor: pointer;
}
.busca__botao:hover{ background: var(--azul-fundo-hover); border-color: var(--azul-fundo-hover); }

/* ==========================================================================
   07. BOTOES
   Primario: fundo azul institucional com texto branco. 6,8:1.
   Secundario: contorno azul sobre branco.
   Claro: para usar dentro de faixa azul.
   ========================================================================== */
.botao{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1);
  min-height: 46px; padding: 11px var(--e-4);
  font-size: var(--passo-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: var(--r-1);
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.botao--primario{ background: var(--azul); color: var(--branco); }
.botao--primario:hover{ background: var(--azul-fundo-hover); color: var(--branco); }
.botao--secundario{ background: var(--branco); color: var(--azul); border-color: var(--azul); }
.botao--secundario:hover{ background: var(--azul-tenue); color: var(--azul-fundo-hover); border-color: var(--azul-fundo-hover); }
.botao--claro{ background: var(--branco); color: var(--azul); }
.botao--claro:hover{ background: var(--azul-tenue); color: var(--azul-fundo-hover); }
.botao--contorno-claro{ background: transparent; color: var(--branco); border-color: rgba(255,255,255,.7); }
.botao--contorno-claro:hover{ background: rgba(255,255,255,.12); color: var(--branco); border-color: var(--branco); }
.botao--pequeno{ min-height: 38px; padding: 8px var(--e-3); font-size: var(--passo-1); }
.botao--bloco{ width: 100%; }

/* ==========================================================================
   08. MIGALHA DE PAO
   ========================================================================== */
.migalha{ padding-block: var(--e-2) 0; }
.migalha__lista{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e-1);
  font-size: var(--passo-1); color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.migalha__item{ display: inline-flex; align-items: center; gap: var(--e-1); }
.migalha__item + .migalha__item::before{ content: "\203A"; color: var(--linha-forte); }
.migalha__link{ color: var(--tinta-2); text-decoration: none; }
.migalha__link:hover{ color: var(--azul); text-decoration: underline; }
.migalha__atual{ color: var(--tinta); font-weight: 700; }

/* ==========================================================================
   09. FAIXA DE TITULO DE PAGINA
   Substitui a faixa verde e ciano das paginas de categoria do site atual.
   Azul institucional com texto branco. Unica cor de fundo colorida do site.
   ========================================================================== */
.faixa-titulo{
  position: relative; overflow: hidden;
  padding-block: clamp(28px, 4.4vw, 56px);
  background: var(--azul); color: var(--branco);
}
.faixa-titulo::after{      /* eco discreto da onda do manual, sem peso visual */
  content: ""; position: absolute; right: -6%; bottom: -46%;
  width: min(52%, 520px); aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.14); border-radius: 46% 54% 50% 50%;
  pointer-events: none;
}
.faixa-titulo__super{
  display: block; font-size: var(--passo-1); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8);
  margin-bottom: var(--e-1);
}
.faixa-titulo__titulo{ position: relative; color: var(--branco); }
.faixa-titulo__apoio{ position: relative; margin-top: var(--e-2); color: rgba(255,255,255,.88); max-width: 60ch; }

/* ==========================================================================
   10. CARTOES
   ========================================================================== */
.cartao{
  position: relative;           /* permite selo de pendencia no canto */
  display: flex; flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--r-2);
  overflow: hidden;
}
.cartao__corpo{ padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-1); flex: 1 1 auto; }
.cartao__pe{ padding: 0 var(--e-3) var(--e-3); margin-top: auto; }

/* --- cartao de categoria: nome, contagem e figura pequena --- */
.cartao-categoria{
  position: relative; display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3);
  background: var(--branco); border: 1px solid var(--linha); border-left: 3px solid var(--ciano);
  border-radius: var(--r-2);
  text-decoration: none; color: var(--tinta);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cartao-categoria:hover{ border-left-color: var(--azul); box-shadow: var(--sombra-1); color: var(--tinta); transform: translateY(-1px); }
.cartao-categoria__figura{
  flex: 0 0 auto; width: 56px; height: 56px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--fundo-3); border-radius: var(--r-1);
}
.cartao-categoria__figura img{ width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cartao-categoria__nome{ font-size: var(--passo-3); font-weight: 700; line-height: 1.3; }
.cartao-categoria__conta{ font-size: var(--passo-1); color: var(--tinta-3); }

/* --- cartao de produto: catalogo mantido, so mais limpo --- */
.cartao-produto{
  position: relative; display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-2);
  overflow: hidden; transition: box-shadow .15s, border-color .15s;
}
.cartao-produto:hover{ box-shadow: var(--sombra-1); border-color: var(--linha-forte); }
.cartao-produto__figura{
  display: grid; place-items: center;
  /* A linha do grid cresceria junto com a imagem e a altura declarada aqui
     deixaria de valer: a foto passava por baixo da moldura e cobria o codigo e
     o nome do produto. O minmax(0,1fr) prende a linha na altura da figura. */
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 4 / 3; max-width: 100%; padding: var(--e-3);
  background: var(--branco); border-bottom: 1px solid var(--linha);
}
.cartao-produto__img{ max-height: 100%; width: auto; object-fit: contain; }
.cartao-produto__corpo{ display: flex; flex-direction: column; gap: 6px; padding: var(--e-3); flex: 1 1 auto; }
.cartao-produto__cod{ font-size: var(--passo-1); color: var(--tinta-3); letter-spacing: .06em; text-transform: uppercase; }
.cartao-produto__nome{ font-size: var(--passo-3); font-weight: 700; line-height: 1.3; color: var(--tinta); }
.cartao-produto__linha{ margin-top: 2px; }        /* etiqueta da linha propria */
.cartao-produto__acao{ padding: 0 var(--e-3) var(--e-3); margin-top: auto; }

/* --- cartao de conteudo: blog, pilula de conhecimento, evento --- */
.cartao-conteudo{
  position: relative; display: flex; flex-direction: column; gap: var(--e-1);
  padding: var(--e-3);
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-2);
}
.cartao-conteudo--pilula{ background: var(--azul-tenue); border-color: var(--lavado-2); }
.cartao-conteudo__tipo{
  font-size: var(--passo-1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul);
}
.cartao-conteudo__titulo{ font-size: var(--passo-4); font-weight: 700; line-height: 1.3; }
.cartao-conteudo__data{ font-size: var(--passo-1); color: var(--tinta-3); }
.cartao-conteudo__resumo{ font-size: var(--passo-2); color: var(--tinta-2); }

/* ==========================================================================
   11. CARROSSEL
   Sem biblioteca e sem JS: rolagem com encaixe por scroll-snap.
   Os pontos sao ancoras internas do prototipo.
   ========================================================================== */
.carrossel{ position: relative; }
.carrossel__trilha{
  display: flex; gap: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrossel__trilha::-webkit-scrollbar{ display: none; }
.carrossel__slide{
  position: relative; flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start; scroll-margin-top: var(--altura-topo);
}
/* variante de cartoes: vitrine que rola de lado, um cartao por encaixe */
.carrossel--cartoes .carrossel__trilha{ gap: var(--e-3); padding-bottom: var(--e-1); }
.carrossel--cartoes .carrossel__slide{ flex: 0 0 clamp(210px, 62vw, 280px); }
.carrossel__pontos{
  display: flex; justify-content: center; gap: var(--e-1);
  padding-top: var(--e-3);
}
/* O tracinho continua com 6px de desenho, mas a area clicavel tem 24px. */
.carrossel__ponto{
  display: grid; align-content: center;
  width: 30px; height: 24px;          /* alvo de toque, com o desenho de 6px dentro */
  border: 0; background: none;
  text-indent: -999em; overflow: hidden;
}
.carrossel__ponto::after{
  content: ""; display: block; height: 6px; width: 30px;
  background: var(--linha-forte); border-radius: var(--r-pill);
}
.carrossel__ponto:hover::after, .carrossel__ponto--ativo::after{ background: var(--azul); }
.carrossel__dica{ text-align: center; font-size: var(--passo-1); color: var(--tinta-3); padding-top: var(--e-1); }

/* Slide de linha propria: logo da linha, produto, frase de solucao e acao. */
.slide-linha{
  display: grid; gap: var(--e-4); align-items: center;
  padding: var(--e-5) 0;
}
.slide-linha__texto{ display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.slide-linha__marca{
  font-size: var(--passo-6); font-weight: 700; letter-spacing: -.01em; color: var(--azul);
}
.slide-linha__solucao{ font-size: var(--passo-4); color: var(--tinta-2); max-width: 46ch; }
.slide-linha__produto{
  display: grid; place-items: center;
  grid-template-rows: minmax(0, 1fr);   /* mesmo motivo do cartao de produto */
  aspect-ratio: 4 / 3; max-width: 100%; padding: var(--e-3);
  background: var(--fundo-2); border-radius: var(--r-3);
}
.slide-linha__produto img{ max-height: 100%; width: auto; object-fit: contain; }
@media (min-width: 760px){
  .slide-linha{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .slide-linha--imagem-esquerda .slide-linha__produto{ order: -1; }
}

/* ==========================================================================
   12. FAIXA DE CONTEUDO
   Bloco de texto com midia ao lado. Serve para treinamento, blog na home,
   texto do Quem Somos e chamada de linha propria.
   ========================================================================== */
.faixa{
  position: relative;
  display: grid; gap: var(--e-4); align-items: center;
}
.faixa__midia{
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 10; max-width: 100%;
  background: var(--fundo-3); border-radius: var(--r-3);
}
.faixa__midia img{ width: 100%; height: 100%; object-fit: cover; }
.faixa__texto{ display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.faixa__acoes{ display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
/* Variante da midia da faixa para colagem e infografico: a peca precisa caber
   inteira, sem corte de object-fit: cover, e o fundo dela ja e branco chapado
   no proprio arquivo. So use em secao de fundo branco. */
.faixa__midia--inteira{ aspect-ratio: auto; background: var(--branco); }
.faixa__midia--inteira img{ height: auto; object-fit: contain; }

@media (min-width: 820px){
  .faixa{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--e-6); }
  .faixa--invertida .faixa__midia{ order: -1; }
  .faixa--midia-estreita{ grid-template-columns: minmax(0,2fr) minmax(0,3fr); }
}

/* ==========================================================================
   13. BLOCO RESERVADO DE VIDEO
   O layout reserva o espaco agora, o video entra depois, produto a produto.
   Fica no proprio dominio, nunca embedado de rede social.
   ========================================================================== */
.video-reservado{
  position: relative;
  display: grid; place-items: center; gap: var(--e-2);
  aspect-ratio: 16 / 9; max-width: 100%; padding: var(--e-4);
  text-align: center;
  background: var(--fundo-2);
  border: 1px dashed var(--linha-forte); border-radius: var(--r-3);
}
.video-reservado__icone{
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--azul); color: var(--branco);
}
.video-reservado__icone svg{ width: 22px; height: 22px; margin-left: 3px; }
.video-reservado__titulo{ font-size: var(--passo-4); font-weight: 700; }
.video-reservado__nota{ font-size: var(--passo-2); color: var(--tinta-2); max-width: 46ch; }
.video-reservado--fita{ aspect-ratio: auto; min-height: 168px; }

/* Bloco reservado generico: feed, mapa, vitrine que ainda nao tem conteudo. */
.reservado{
  display: grid; place-items: center; gap: var(--e-1);
  min-height: 132px; padding: var(--e-4); text-align: center;
  background: var(--fundo-2);
  border: 1px dashed var(--linha-forte); border-radius: var(--r-2);
  color: var(--tinta-2); font-size: var(--passo-2);
}

/* ==========================================================================
   14. SELO DE PENDENCIA E LINK INERTE
   Selo: toda decisao aberta aparece marcada, com o texto do que falta.
   Inerte: todo link que iria para o site real fica sem acao e marcado.
   Cor de servico, ambar. Nao e cor de marca, justamente para nao se confundir.
   ========================================================================== */
.selo-pendente{
  display: inline-flex; align-items: flex-start; gap: 6px;
  max-width: 100%; padding: 5px var(--e-1) 5px 7px;
  font-size: var(--passo-1); line-height: 1.35; font-weight: 400; text-align: left;
  color: var(--aviso-texto); background: var(--aviso-fundo);
  border: 1px solid var(--aviso-linha); border-radius: var(--r-1);
  text-transform: none; letter-spacing: 0;
}
.selo-pendente::before{
  content: "!"; flex: 0 0 auto;
  display: grid; place-items: center;
  width: 14px; height: 14px; margin-top: 1px;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--aviso-fundo); background: var(--aviso-texto); border-radius: 50%;
}
.selo-pendente b{ font-weight: 700; }
.selo-pendente--bloco{ display: flex; width: 100%; padding: var(--e-2); font-size: var(--passo-2); }
.selo-pendente--canto{
  position: absolute; z-index: 5; top: var(--e-1); right: var(--e-1);
  max-width: calc(100% - var(--e-3)); box-shadow: 0 1px 3px rgba(0,46,107,.14);
}
/* Abaixo de 900px o selo de canto quebra em duas linhas e cobre a etiqueta do
   slide. Ai ele deixa de ser absoluto e entra no fluxo, acima do conteudo. */
@media (max-width: 899px){
  .selo-pendente--canto{
    position: static; display: flex; box-shadow: none;
    max-width: 100%; margin-bottom: var(--e-1);
  }
}

/* Link que iria para o site real: sem acao, com marca visivel de pendente.
   As regras abaixo vem presas a body:not(.modo-limpo) de proposito. No modo
   limpo o link volta a parecer texto comum, sem pontilhado e sem etiqueta, e
   isso acontece por ausencia de regra e nao por uma regra que briga com esta
   por especificidade. */
body:not(.modo-limpo) .inerte,
body:not(.modo-limpo) a.inerte{
  color: var(--tinta-2);
  text-decoration: none;
  border-bottom: 1px dashed var(--aviso-linha);
  cursor: not-allowed;
}
/* Titulo de cartao marcado como pendente mantem a tinta normal: quem sinaliza
   a pendencia e o pontilhado e o ponto ambar, nao o apagamento do nome. */
.cartao-produto__nome.inerte,
.cartao-categoria__nome.inerte,
.cartao-conteudo__titulo.inerte,
.nav__link.inerte{ color: var(--tinta); }
body:not(.modo-limpo) .inerte::after{
  content: "link pendente";
  display: inline-block; margin-left: 6px; padding: 1px 5px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--aviso-texto); background: var(--aviso-fundo);
  border: 1px solid var(--aviso-linha); border-radius: var(--r-1);
}
body:not(.modo-limpo) .botao.inerte{
  color: var(--tinta-2) !important;
  background: var(--fundo-2); border: 1px dashed var(--linha-forte);
}
body:not(.modo-limpo) .botao.inerte::after{ margin-left: var(--e-1); }
.inerte--sem-etiqueta::after{ content: none; }

/* Nota interna da equipe, visivel na apresentacao. Neutra, nao ambar. */
.aviso{
  padding: var(--e-3);
  background: var(--fundo-2); border-left: 3px solid var(--azul); border-radius: var(--r-1);
  font-size: var(--passo-2); color: var(--tinta-2);
}
.aviso__titulo{ display: block; font-weight: 700; color: var(--tinta); margin-bottom: 4px; }

/* ==========================================================================
   15. FORMULARIO
   Mesmos campos do formulario de orcamento e de contato do site atual.
   ========================================================================== */
.formulario{
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.formulario--caixa{
  padding: var(--e-4);
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-2);
}
.campo{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo--inteiro{ grid-column: 1 / -1; }
.campo__rotulo{ font-size: var(--passo-2); font-weight: 700; color: var(--tinta); }
.campo__rotulo em{ color: var(--azul); font-style: normal; }
.campo__entrada,
.campo__selecao,
.campo__area{
  width: 100%; padding: 11px var(--e-2);
  background: var(--branco); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: var(--r-1);
  font-size: var(--passo-3);
}
.campo__entrada:focus, .campo__selecao:focus, .campo__area:focus{
  border-color: var(--azul); outline: 2px solid var(--azul-tenue); outline-offset: 0;
}
.campo__area{ min-height: 132px; resize: vertical; }
.campo__ajuda{ font-size: var(--passo-1); color: var(--tinta-3); }
.opcoes{ display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }
.opcao{ display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--passo-2); color: var(--tinta-2); }
.opcao input{ accent-color: var(--azul); width: 17px; height: 17px; }
.formulario__acoes{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

/* ==========================================================================
   16. MENU LATERAL, PAGINACAO, TABELA, LINHA DO TEMPO, DADOS DE PRODUTO
   ========================================================================== */
/* Menu lateral de categorias. Mantido do site atual por decisao de briefing. */
.menu-lateral{
  padding: var(--e-3);
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-2);
}
.menu-lateral__titulo{
  font-size: var(--passo-1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul); padding-bottom: var(--e-1); margin-bottom: var(--e-1);
  border-bottom: 1px solid var(--linha);
}
.menu-lateral__grupo + .menu-lateral__grupo{ border-top: 1px solid var(--linha); }
.menu-lateral__link{
  display: block; padding: 8px 0;
  font-size: var(--passo-2); color: var(--tinta-2); text-decoration: none;
}
.menu-lateral__link:hover{ color: var(--azul); }
.menu-lateral__link--ativo{ color: var(--azul); font-weight: 700; }
.menu-lateral__sub{ padding-left: var(--e-2); border-left: 2px solid var(--linha); margin: 0 0 var(--e-1) 2px; }
.menu-lateral__sub .menu-lateral__link{ padding: 5px 0; font-size: var(--passo-1); }

.paginacao{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-top: var(--e-5); }
.paginacao__item{
  display: inline-grid; place-items: center;
  min-width: 38px; height: 38px; padding: 0 var(--e-1);
  font-size: var(--passo-2); text-decoration: none; color: var(--tinta-2);
  border: 1px solid var(--linha); border-radius: var(--r-1); background: var(--branco);
}
.paginacao__item:hover{ border-color: var(--azul); color: var(--azul); }
.paginacao__item--ativo{ background: var(--azul); border-color: var(--azul); color: var(--branco); font-weight: 700; }

/* Tabela. Sempre dentro de .rolagem-x. */
.tabela{ width: 100%; min-width: 520px; font-size: var(--passo-2); }
.tabela th, .tabela td{ padding: var(--e-2); text-align: left; border-bottom: 1px solid var(--linha); }
.tabela thead th{
  background: var(--fundo-2); color: var(--tinta);
  font-size: var(--passo-1); letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 2px solid var(--linha-forte);
}
.tabela tbody tr:hover{ background: var(--fundo-2); }

/* Dados do produto: apresentacao, codigo, pacote com unidades. */
.dados-produto{
  display: grid; gap: 0;
  border-top: 1px solid var(--linha);
}
.dados-produto__par{
  display: grid; gap: 2px var(--e-3);
  padding: var(--e-2) 0; border-bottom: 1px solid var(--linha);
}
.dados-produto__termo{ font-size: var(--passo-1); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.dados-produto__valor{ font-size: var(--passo-3); color: var(--tinta); margin: 0; }
@media (min-width: 620px){
  .dados-produto__par{ grid-template-columns: 190px minmax(0,1fr); align-items: baseline; }
}

/* Linha do tempo do Quem Somos, em periodos e nao ano a ano. */
.linha-tempo{ position: relative; display: grid; gap: var(--e-4); padding-left: var(--e-4); }
.linha-tempo::before{
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--linha); border-radius: 2px;
}
.linha-tempo__item{ position: relative; }
.linha-tempo__item::before{
  content: ""; position: absolute; left: calc(var(--e-4) * -1); top: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--branco); border: 3px solid var(--ciano-2);
}
.linha-tempo__periodo{
  font-size: var(--passo-1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul);
}
.linha-tempo__titulo{ font-size: var(--passo-4); font-weight: 700; margin-top: 2px; }
.linha-tempo__texto{ font-size: var(--passo-2); color: var(--tinta-2); margin-top: 4px; max-width: 62ch; }
@media (min-width: 900px){
  .linha-tempo--horizontal{
    grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
    padding-left: 0; padding-top: var(--e-4);
    overflow-x: auto;                        /* faixa larga: rola dentro de si */
  }
  .linha-tempo--horizontal::before{ left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px; }
  .linha-tempo--horizontal .linha-tempo__item::before{ left: 0; top: calc(var(--e-4) * -1); }
}

/* ==========================================================================
   17. RODAPE, REDES, ULTIMOS POSTS, WHATSAPP
   ========================================================================== */
/* RODAPE CLARO, E ISSO E REGRA DE MARCA, NAO GOSTO.
   O manual so permite o logotipo negativo sobre o ciano 100% da marca, e o
   positivo ate 15% de preto. Um rodape escuro nao aceita nenhuma das duas
   versoes, e desde a segunda rodada nem existe um near-preto no arquivo: o
   escuro da marca e o #002E6B, que e cor de texto. Entao o rodape ficou em
   cinza frio claro, com o logotipo
   positivo, que e a aplicacao ideal do manual. Rodape escuro so volta se a
   cliente autorizar a excecao, por escrito, antes da apresentacao. */
.rodape{
  --onda-h: clamp(14px, 2vw, 26px);
  background: var(--fundo-2); color: var(--tinta-2);
  border-top: 1px solid var(--linha);
}
/* ONDA DE TRANSICAO PARA O RODAPE, E POR QUE ELA MUDOU DE METODO.
   Na primeira rodada a onda desenhava BRANCO por cima do cinza do rodape, e a
   curva aparecia por subtracao. Isso obrigava a secao imediatamente acima do
   rodape a terminar em branco, e cinco das dez paginas terminam em
   .secao--alt, que e o MESMO cinza do rodape: ali a onda virava uma tarja
   branca entre dois cinzas iguais. Medido no render: #f4f7fa em cima, #ffffff
   na onda, #f4f7fa embaixo.
   Agora o recorte e feito por mascara NO PROPRIO RODAPE. O rodape passa a ter a
   borda de cima em curva, e o que aparece acima da curva e o que estiver atras,
   qualquer que seja a cor. Assim a onda funciona com secao branca, com
   .secao--alt e com .secao--azul, e nenhuma pagina precisa mais terminar em
   branco.
   A regra antiga fica como degradacao: navegador sem mascara mostra a onda
   branca e a borda reta de antes, que e o comportamento de hoje. */
.rodape__onda{
  display: block; width: 100%; height: var(--onda-h);
  background: no-repeat center/100% 100%
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 40" preserveAspectRatio="none"><path d="M0 22C160 2 340 0 600 12s430 26 600 8V0H0z" fill="%23ffffff"/></svg>');
}
@supports ((mask: url("#o")) or (-webkit-mask: url("#o"))){
  .rodape{
    border-top: 0;
    /* O rodape SOBE por cima da ultima secao, na altura exata da onda. Sem
       isso a mascara revelaria o branco do body, porque a secao de cima
       termina onde o rodape comeca, e a tarja branca voltaria. Com isso o que
       aparece acima da curva e o fundo real da ultima secao, seja ele branco,
       o cinza da .secao--alt ou o azul da .secao--azul. A faixa que o rodape
       cobre e sempre padding da secao, que tem no minimo 40px. */
    position: relative; z-index: 1;
    margin-top: calc(var(--onda-h) * -1);
    /* Camada 1: a curva, no alto, com a area ABAIXO dela opaca.
       Camada 2: retangulo cheio a partir do fim da curva para baixo.
       As duas camadas somam, que e o padrao de composicao de mascara. */
    -webkit-mask:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 40" preserveAspectRatio="none"><path d="M0 22C160 2 340 0 600 12s430 26 600 8V40H0z" fill="%23000000"/></svg>') 0 0 / 100% var(--onda-h) no-repeat,
      linear-gradient(#000, #000) 0 var(--onda-h) / 100% 100% no-repeat;
    mask:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 40" preserveAspectRatio="none"><path d="M0 22C160 2 340 0 600 12s430 26 600 8V40H0z" fill="%23000000"/></svg>') 0 0 / 100% var(--onda-h) no-repeat,
      linear-gradient(#000, #000) 0 var(--onda-h) / 100% 100% no-repeat;
  }
  .rodape__onda{ background: none; }
}
.rodape__grade{
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-block: var(--e-6) var(--e-5);
}
.rodape__coluna{ min-width: 0; }
.rodape__titulo{
  font-size: var(--passo-1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta); margin-bottom: var(--e-2);
}
.rodape__lista li + li{ margin-top: 7px; }
.rodape__link{ color: var(--tinta-2); font-size: var(--passo-2); text-decoration: none; }
.rodape__link:hover{ color: var(--azul); text-decoration: underline; }
.rodape__texto{ font-size: var(--passo-2); line-height: 1.55; }
.rodape__rotulo{
  display: block; font-size: var(--passo-1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3); margin-top: var(--e-2);
}
.rodape .marca{ margin-bottom: var(--e-2); }
.rodape__legal{
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); justify-content: space-between;
  padding-block: var(--e-3) calc(var(--e-3) + 64px);   /* folga do botao de WhatsApp */
  border-top: 1px solid var(--linha);
  font-size: var(--passo-1); color: var(--tinta-3);
}
@media (min-width: 620px){ .rodape__legal{ padding-bottom: var(--e-4); } }

.redes{ display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-2); }
.redes__item{
  display: grid; place-items: center; width: 38px; height: 38px;
  color: var(--azul); background: var(--branco);
  border: 1px solid var(--linha-forte); border-radius: 50%;
  text-decoration: none;
}
.redes__item:hover{ background: var(--azul); border-color: var(--azul); color: var(--branco); }
.redes__item svg{ width: 17px; height: 17px; fill: currentColor; }

/* ULTIMOS POSTS: os criativos mais recentes em rotacao. Deixou de ser "feed do
   Instagram" generico nesta rodada. Continua em tira discreta, e nunca galeria
   grande: a decisao de briefing e que ele fecha a home sem competir com ela.
   Nada e carregado de fora. As pecas sao arquivos locais em assets/img/. */
.feed-reservado{ padding-block: var(--e-4); border-top: 1px solid var(--linha); }
.feed-reservado__cabeca{
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: baseline; justify-content: space-between;
  margin-bottom: var(--e-2);
}
.feed-reservado__nota{ font-size: var(--passo-2); color: var(--tinta-2); max-width: 62ch; }
.feed-reservado__tira{
  display: grid; gap: var(--e-1);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr));
}
/* Tira com peca real. O limite de largura e o que mantem a tira discreta: sem
   ele, quatro celulas em 1180px dariam quadros de 290px e a tira viraria
   galeria. Em 390px a mesma regra cai sozinha para duas colunas. */
.feed-reservado__tira--pecas{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  gap: var(--e-2);
  max-width: 660px;
}
/* No celular a tira fica em UMA linha de quatro, e nao em dois por dois. Em
   dois por dois cada peca passa de 200px de altura e o bloco toma a tela
   inteira, o que contraria a decisao de briefing de manter isto discreto. */
@media (max-width: 619px){
  .feed-reservado__tira--pecas{ grid-template-columns: repeat(4, 1fr); gap: var(--e-1); }
}
.feed-reservado__quadro{
  display: grid; place-items: center;
  aspect-ratio: 1; max-width: 100%;
  background: var(--branco);
  border: 1px dashed var(--linha-forte); border-radius: var(--r-1);
  font-size: var(--passo-1); color: var(--tinta-3);
}
/* Quadro com a peca dentro. A proporcao e 4 por 5, que e a da propria peca
   publicada, entao object-fit cover nao corta nada e o texto do criativo
   continua legivel. */
.feed-reservado__quadro--cheio{
  aspect-ratio: 4 / 5; padding: 0; overflow: hidden;
  border-style: solid; border-color: var(--linha);
}
.feed-reservado__quadro--cheio img{
  width: 100%; height: 100%; object-fit: cover;
}

/* Botao de WhatsApp. Existe, e nao mostra numero nenhum. */
.zap{
  position: fixed; z-index: 55; right: var(--e-3); bottom: var(--e-3);
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--azul); color: var(--branco);
  border: 2px solid var(--branco); box-shadow: var(--sombra-2);
  text-decoration: none; cursor: not-allowed;
}
.zap svg{ width: 26px; height: 26px; fill: currentColor; }
.zap__texto{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.zap::after{ content: none; }     /* o selo de pendencia do numero fica no rodape */

/* ==========================================================================
   18. IMPRESSAO, para a apresentacao em PDF
   ========================================================================== */
@media print{
  .topo, .zap, .carrossel__pontos{ position: static; }
  .secao{ padding-block: var(--e-4); }
  a{ color: var(--tinta); }
}

/* ==========================================================================
   19. COMPLEMENTOS: BARRA SUPERIOR E MARCA COMPACTA DE PENDENCIA
   Escritos depois do bloco 14 porque dependem dele.
   ========================================================================== */
/* Barra superior, mantida do site atual por decisao de briefing. */
.tarja{ background: var(--azul); color: var(--branco); }
.tarja__linha{
  display: flex; flex-wrap: wrap; gap: 2px var(--e-3); align-items: center; justify-content: flex-end;
  min-height: var(--altura-tarja); padding-block: 6px;
  font-size: var(--passo-1); line-height: 1.35;
}
/* Acao da barra superior. O site de hoje leva Eventos e Busca aqui. Eventos sai
   porque a aba foi descartada e vira categoria do blog. A busca fica, e nesta
   previa ela e so o rotulo, desligada como o campo do cabecalho. */
.tarja__acao{
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tarja__linha strong{ font-weight: 700; }
.tarja a{ color: var(--branco); }

/* Categoria que SAI do catalogo por decisao da cliente (SITE - AJUSTES.pptx,
   07/07/2026). Mesma natureza do selo: cor de servico, nao cor de marca, e
   some sozinha no modo limpo, como as marcas ambar dos cartoes da home.
   Vai sempre num <span> DENTRO do link, para o risco nao brigar com o
   sublinhado do proprio <a>. */
body:not(.modo-limpo) .marca-sai{
  text-decoration: line-through;
  text-decoration-color: var(--aviso-texto);
  text-decoration-thickness: 1px;
}
body:not(.modo-limpo) .marca-sai::after{
  content: "sai"; margin-left: 6px; padding: 0 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--aviso-texto); background: var(--aviso-fundo);
  border: 1px solid var(--aviso-linha); border-radius: var(--r-1);
  text-decoration: none; vertical-align: 1px;
}

/* Marca compacta de pendencia, para link inerte dentro de menu e de lista,
   onde a etiqueta por extenso quebraria o alinhamento. */
body:not(.modo-limpo) .inerte--ponto::after{
  content: "\2022"; margin-left: 5px; padding: 0; border: 0; background: none;
  font-size: 15px; line-height: 0; vertical-align: middle;
  color: var(--aviso-texto);
}
/* No rodape claro o link inerte segue a regra geral: pontilhado e ponto ambar,
   sem apagar o texto. */

/* Legenda da marca de pendencia, uma vez por pagina. */
.legenda-pendencia{
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: center;
  padding-block: var(--e-2);
  font-size: var(--passo-1); color: var(--tinta-3);
}
.legenda-pendencia__aviso{ color: var(--tinta-2); }
.legenda-pendencia__aviso strong{ color: var(--tinta); }
/* Entrada discreta para o painel do material, que de outro jeito seria uma
   pagina sem link de chegada. */
.legenda-pendencia__painel{
  margin-left: auto; color: var(--azul); text-decoration: none;
  border-bottom: 1px solid var(--linha-forte);
}
.legenda-pendencia__painel:hover{ border-bottom-color: var(--azul); }

/* ==========================================================================
   20. CARRINHO DE ORCAMENTO NO CABECALHO
   O catalogo continua sem preco e sem compra pelo site. O carrinho junta
   itens para UM pedido de orcamento, porque hoje o cliente tem que pedir um a
   um e ele costuma querer itens de setores diferentes na mesma cotacao.
   O contador le o mesmo armazenamento que a pagina de carrinho vai escrever:
   localStorage, chave "mack-orcamento". Se o armazenamento falhar, o contador
   fica em zero e nada na pagina quebra.
   ========================================================================== */
.carrinho{
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 var(--e-2) 0 10px;
  border: 1px solid var(--azul); border-radius: var(--r-1);
  background: var(--branco); color: var(--azul);
  font-size: var(--passo-2); font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.carrinho:hover{ background: var(--azul); color: var(--branco); }
.carrinho svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.carrinho__texto{ display: none; }
@media (min-width: 1100px){ .carrinho__texto{ display: inline; } }
/* Contador. Em zero ele fica neutro, para nao anunciar um carrinho cheio que
   nao existe. A partir de um item ele acende no azul institucional. */
.carrinho__conta{
  display: grid; place-items: center;
  min-width: 22px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--fundo-3); color: var(--tinta-2);
  font-size: var(--passo-1); font-weight: 700; line-height: 1;
}
.carrinho[data-carrinho-cheio] .carrinho__conta{ background: var(--azul); color: var(--branco); }
.carrinho:hover .carrinho__conta{ background: var(--branco); color: var(--azul); }

/* ==========================================================================
   21. BOTAO FLUTUANTE DE VIDEO, BOAS VINDAS
   Fica no canto OPOSTO ao do WhatsApp: o WhatsApp esta preso a direita, este
   fica preso a esquerda, os dois na mesma altura do rodape.
   O painel abre em formato de historia, 9 por 16, que e o formato de celular
   em que o video vai ser gravado. Abre por checkbox, sem script e sem
   biblioteca, igual ao menu do celular.
   ========================================================================== */
.video-flutuante__alterna{ position: absolute; opacity: 0; pointer-events: none; }
.video-flutuante{
  position: fixed; z-index: 55; left: var(--e-3); bottom: var(--e-3);
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--branco); color: var(--azul);
  border: 2px solid var(--azul); box-shadow: var(--sombra-2);
  cursor: pointer;
}
.video-flutuante svg{ width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.video-flutuante:hover{ background: var(--azul); color: var(--branco); }
.video-flutuante__alterna:focus-visible + .video-flutuante{ outline: 3px solid var(--azul); outline-offset: 2px; }
/* Anel discreto de segundo nivel, para o botao nao se confundir com o do
   WhatsApp, que e azul cheio. */
.video-flutuante::after{
  content: ""; position: absolute; inset: -6px;
  border: 1px solid var(--ciano-2); border-radius: 50%;
}

.video-historia{
  position: fixed; z-index: 56;
  left: var(--e-3); bottom: calc(var(--e-3) + 54px + var(--e-2));
  display: none;
  width: min(320px, calc(100vw - var(--e-3) * 2));
  border-radius: var(--r-3); overflow: hidden;
  border: 1px solid var(--linha-forte); box-shadow: var(--sombra-2);
  background: var(--branco);
}
.video-flutuante__alterna:checked ~ .video-historia{ display: block; }
.video-historia__quadro{
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--e-2);
  aspect-ratio: 9 / 16; max-width: 100%;
  padding: var(--e-3);
  background: linear-gradient(180deg, var(--azul), var(--azul-escuro));
  color: var(--branco);
}
.video-historia__titulo{ font-size: var(--passo-4); font-weight: 700; line-height: 1.2; }
.video-historia__nota{ font-size: var(--passo-2); line-height: 1.45; color: rgba(255,255,255,.88); }
.video-historia__icone{
  position: absolute; top: var(--e-3); left: var(--e-3);
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.16); color: var(--branco);
  border: 1px solid rgba(255,255,255,.5);
}
.video-historia__icone svg{ width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.video-historia__fechar{
  position: absolute; top: var(--e-2); right: var(--e-2); z-index: 2;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.18); color: var(--branco);
  border: 1px solid rgba(255,255,255,.5);
  font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
}
.video-historia__fechar:hover{ background: rgba(255,255,255,.3); }
.video-historia__pe{ padding: var(--e-2); background: var(--branco); }
/* A chamada do pe do painel ocupa a largura inteira. Em 272px um botao
   inline-flex com texto em caixa alta quebraria centralizado e torto. */
.video-historia__pe .botao{ width: 100%; }
/* Em tela baixa o painel de 9 por 16 nao cabe. Ai ele deixa de seguir a
   proporcao e passa a caber na altura disponivel, sem cortar o rodape do
   painel, onde fica a chamada para o WhatsApp. */
@media (max-height: 700px){
  .video-historia__quadro{ aspect-ratio: auto; min-height: 260px; }
}

/* ==========================================================================
   22. MODO LIMPO, PARA MOSTRAR A PAGINA A CLIENTE
   Some tudo que e nota de trabalho: selo de pendencia, aviso da equipe,
   legenda das marcas e a tarja de previa. O que fica na tela e so o site.
   Liga por ?limpo=1 no endereco, ou pelo botao discreto do rodape.
   O que NAO desaparece: o espaco reservado de video, de feed e de mapa, porque
   eles sao estrutura da pagina e a cliente precisa ver que estao previstos.
   ========================================================================== */
.modo-limpo .selo-pendente,
.modo-limpo .aviso,
.modo-limpo .legenda-pendencia,
.modo-limpo .nota-interna{ display: none !important; }

/* Utilitario para qualquer linha que seja recado interno e nao conteudo do
   site. Fora do modo limpo ela aparece como texto de apoio. */
.nota-interna{ color: var(--tinta-3); }

/* Botao do modo limpo. Continua visivel nos dois modos, senao nao ha volta.
   Discreto de proposito: e ferramenta de trabalho, nao elemento do site. */
.modo-limpo-botao{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--e-1);
  background: transparent; border: 1px solid var(--linha-forte); border-radius: var(--r-pill);
  color: var(--tinta-3); font-size: var(--passo-1); line-height: 1.3;
  cursor: pointer;
}
.modo-limpo-botao:hover{ border-color: var(--azul); color: var(--azul); }
.modo-limpo-botao::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--linha-forte);
}
.modo-limpo .modo-limpo-botao::before{ background: var(--azul); }