/* ==========================================================================
   MUNDO SEGURO — Componentes reutilizáveis
   Botões · Header/Mega-menu · Cards · Carrossel · Tabs · Formulários
   ========================================================================== */

/* ==========================================================================
   BOTÕES  (Figma: altura 48px, raio 3px, texto 18px regular)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-btn);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--c-navy);
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.14);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--primary { background: var(--c-blue); }
.btn--primary:hover { background: var(--c-blue-dark); }

.btn--whats { background: var(--c-green); }
.btn--whats:hover { background: var(--c-green-dark); }

.btn--neutral { background: var(--c-gray-200); }
.btn--neutral:hover { background: var(--c-gray-300); }

.btn--outline {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--c-white);
}
.btn--outline:hover { background: rgb(255 255 255 / 0.12); }

.btn--sm { min-height: 40px; font-size: var(--fs-14); padding: 0 var(--sp-4); }
.btn--block { width: 100%; }

.btn__icon { width: 20px; height: 20px; flex: none; }

/* ==========================================================================
   HEADER
   Figma: logo à esquerda (173x70), nav em linha, botões abaixo.
   Aqui condensado numa faixa só — ver nota em sections.css.
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  transition: box-shadow var(--dur) var(--ease);
}
.header[data-scrolled] { box-shadow: 0 1px 0 var(--c-gray-200), var(--shadow-card); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--header-h);
}

.header__logo { flex: none; }
.header__logo img { width: 148px; height: auto; }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}

/* ---------- Navegação ---------- */

.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-8));
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item { position: static; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  font-size: var(--fs-16);
  color: var(--text-strong);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link[aria-expanded="true"] {
  color: var(--c-blue-text);
  border-bottom-color: var(--c-blue);
  text-decoration: none;
}

.nav__caret {
  width: 8px; height: 5px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* ---------- Mega-menu ---------- */

.megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--c-white);
  border-top: 1px solid var(--c-gray-150);
  box-shadow: 0 16px 32px rgb(0 0 0 / 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.megamenu[data-open] { opacity: 1; visibility: visible; transform: none; }

.megamenu__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
  justify-content: start;
  gap: var(--sp-6) var(--sp-12);
  padding-block: var(--sp-8) var(--sp-6);
}

.megamenu__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.megamenu__list { list-style: none; margin: 0; padding: 0; }
.megamenu__list li + li { margin-top: var(--sp-2); }

.megamenu__link {
  display: block;
  padding: var(--sp-1) 0;
  font-size: var(--fs-14);
  color: var(--text-body);
  transition: color var(--dur) var(--ease);
}
.megamenu__link:hover { color: var(--c-blue-text); text-decoration: none; }
.megamenu__link--highlight { color: var(--c-blue); font-weight: var(--fw-medium); }

.megamenu__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-gray-150);
}

/* ---------- Menu mobile ---------- */

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.burger__bar {
  display: block;
  position: relative;
  width: 22px; height: 2px;
  background: var(--c-navy);
  transition: background var(--dur) var(--ease);
}
.burger__bar::before,
.burger__bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: var(--c-navy);
  transition: transform var(--dur) var(--ease);
}
.burger__bar::before { top: -7px; }
.burger__bar::after  { top: 7px; }

.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after  { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 auto;
  width: min(420px, 100%);
  z-index: 99;
  overflow-y: auto;
  padding: var(--sp-6) var(--gutter) var(--sp-16);
  background: var(--c-white);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur);
}
.drawer[data-open] { transform: none; visibility: visible; }

.drawer__group + .drawer__group { border-top: 1px solid var(--c-gray-150); }

.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) 0;
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  text-align: left;
}
.drawer__toggle::after {
  content: '+';
  font-size: 1.4em;
  font-weight: var(--fw-regular);
  color: var(--c-blue);
}
.drawer__toggle[aria-expanded="true"]::after { content: '−'; }

.drawer__panel { display: none; padding-bottom: var(--sp-4); }
.drawer__panel[data-open] { display: block; }
.drawer__panel a {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-16);
  color: var(--text-body);
}

/* O painel de Seguros é o único do drawer com subtítulo: ele carrega as 23 do
   catálogo em cinco categorias, e no celular não há coluna para separá-las.
   Os outros painéis têm meia dúzia de links e não precisam. */
.drawer__subtitulo {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.drawer__subtitulo:first-child { margin-top: var(--sp-2); }

/* Seguro que está no planejamento e ainda não tem página. O link existe e leva
   ao cartão dele no índice; a marca avisa que não é uma página. Discreta de
   propósito: quem procura "Seguro Viagem" precisa achar o item, não ser
   advertido. */
[data-breve]::after {
  content: 'em breve';
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-gray-150);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  white-space: nowrap;
}

.drawer__cta { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgb(0 0 0 / 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.backdrop[data-open] { opacity: 1; visibility: visible; }

/* ==========================================================================
   CARDS
   ========================================================================== */

/* `.card-feature` (cartão com foto no topo) foi removido em 30/09/2026: o
   frame /home 335:783 trocou a seção "O que fazemos" por cartões com ícone.
   O bloco novo e `.fazemos-passo`, em sections.css: desde 07/10/2026 os tres
   cartoes sao uma trilha, com a mesma seta das paginas de produto. */

/* --- Banner de especialidade (Carnes / Ferro e aço) --- */
/* Camadas: imagem (1) → overlay (2) → conteúdo (3).
   Sempre z-index positivo: valores negativos escapam do contexto de
   empilhamento e a imagem acaba pintada atrás do fundo da página. */
.card-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 433px;
  overflow: hidden;
  border-radius: var(--r-2xl);
}
.card-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
}
.card-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgb(2 12 28 / 0.92) 0%,
    rgb(2 12 28 / 0.80) 34%,
    rgb(2 12 28 / 0.25) 62%,
    rgb(2 12 28 / 0.05) 100%
  );
}
.card-banner__body {
  position: relative;
  z-index: 3;
  max-width: 400px;
  padding: var(--sp-12) clamp(var(--sp-6), 5vw, 61px);
}
.card-banner__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-32);
  color: var(--c-white);
}
.card-banner__text {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-18);
  color: rgb(255 255 255 / 0.88);
}

/* ---------- Apoio à animação de entrada (motion.js) ----------
   Tudo aqui é inerte até o JS criar os elementos. Sem JS, o banner é
   exatamente o que era antes. */

/* Cortina que desliza revelando o card. Criada por JS, cor da marca. */
.card-banner__curtain {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--c-navy);
  transform-origin: left center;   /* sobrescrito por variante no JS */
  pointer-events: none;
}

/* Filete que corre junto com a cortina, dando o "corte" luminoso */
.card-banner__edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  z-index: 5;
  background: var(--c-blue);
  pointer-events: none;
  opacity: 0;
}

/* Máscara por palavra do título: o overflow corta a palavra que sobe.
   O padding/margin compensados evitam cortar descendentes (g, ç, p). */
.card-banner__title .palavra {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: top;
}
.card-banner__title .palavra > span { display: inline-block; }

/* --- Atalho de seguro obrigatório (home) ---
   Frame /home (335:783), y 2664–2710: pastilha cinza com a sigla à esquerda,
   descrição e link empilhados à direita. Era um cartão com fundo, pastilha
   azul e o link embaixo ocupando a largura toda. */
.card-seguro {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.card-seguro__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 123px;
  min-height: 54px;
  padding: 0 var(--sp-4);
  background: var(--c-gray-100);
  border-radius: var(--r-btn);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  transition: background var(--dur) var(--ease);
}
.card-seguro:hover .card-seguro__tag { background: var(--c-gray-150); }

.card-seguro__corpo { display: grid; gap: 2px; }

.card-seguro__desc {
  font-size: var(--fs-16);
  line-height: 1.35;
  color: var(--text-body);
}

/* --- Card de tipo de carga (carrossel) --- */
.card-carga {
  position: relative;
  display: block;
  aspect-ratio: 276 / 367;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-gray-200);
  /* conteúdo fica sobre a foto escurecida: branco, não o azul herdado de <a> */
  color: var(--c-white);
}
.card-carga img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.card-carga::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgb(2 12 28 / 0.85) 0%, rgb(2 12 28 / 0.15) 55%, transparent 100%);
}
.card-carga:hover img { transform: scale(1.06); }
.card-carga:hover { text-decoration: none; }

.card-carga__foot {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.card-carga__label {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}

/* O carrossel não tem mais cartão de atalho no fim: os nove hubs já estão
   todos na home, e o "ver todas" do cabeçalho da seção leva ao índice
   (decisão do cliente, 08/10/2026). */
.card-carga__arrow {
  display: grid;
  place-items: center;
  width: 27px; height: 27px;
  flex: none;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.18);
  transition: background var(--dur) var(--ease),
              transform var(--dur) var(--ease-out);
}
.card-carga__arrow svg { width: 11px; height: 11px; }
.card-carga:hover .card-carga__arrow {
  background: var(--c-blue);
  transform: translate(2px, -2px);
}

/* --- Card de post do blog --- */
.card-post {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-4) var(--sp-12);
  background: var(--c-white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.card-post:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.card-post__media img { transition: transform 0.9s var(--ease-out); }
.card-post:hover .card-post__media img { transform: scale(1.05); }

.card-post__media {
  aspect-ratio: 307 / 132;
  margin-bottom: var(--sp-4);
  overflow: hidden;
  background: var(--c-gray-200);
  border-radius: var(--r-input);
}
.card-post__media img { width: 100%; height: 100%; object-fit: cover; }

.card-post__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.card-post__title a { color: inherit; }
.card-post__title a::after { content: ''; position: absolute; inset: 0; } /* área clicável total */
.card-post__title a:hover { color: var(--c-blue-text); text-decoration: none; }

.card-post__excerpt {
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-post__more {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: grid;
  place-items: center;
  width: 23px; height: 23px;
  border: 1px solid var(--c-blue);
  border-radius: var(--r-pill);
  color: var(--c-blue);
  font-size: var(--fs-14);
  line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card-post:hover .card-post__more { background: var(--c-blue-text); color: var(--c-white); }

/* ==========================================================================
   CARROSSEL (scroll-snap nativo — sem biblioteca)
   ========================================================================== */

.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  /* 276px é a largura do card; a faixa de seguradoras usa colunas estreitas
     e redefine a variável. */
  grid-auto-columns: var(--carousel-col, 276px);
  gap: 21px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
  /* Como no Figma: o primeiro card alinha com a coluna de texto e a fileira
     sangra pela borda direita. Padding só à direita — padding-left brigaria
     com o scroll-snap, que alinharia o primeiro card na borda da viewport. */
  margin-right: calc(50% - 50vw);
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-block: var(--sp-1);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }

/* Enquanto o usuário arrasta com o mouse, o snap e o scroll suave precisam
   sair do caminho — senão brigam com o movimento do ponteiro. */
.carousel__track[data-dragging] {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.carousel__track[data-dragging] * { pointer-events: none; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-8);
}
.carousel__dot {
  width: 27px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-gray-300);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.carousel__dot[aria-current="true"] { width: 70px; background: var(--c-gray); }

/* ==========================================================================
   TABS  (seção "Outros seguros")
   ========================================================================== */

/* Frame /home (335:783), y 3651–3706: as abas viraram caixas preenchidas —
   a ativa em azul, as outras em cinza. Eram rótulos sublinhados, com a ativa
   em azul sobre filete azul. */
.tabs__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
  list-style: none;
  padding: 0;
}

.tabs__btn {
  width: 100%;
  min-height: 55px;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  text-align: left;
  background: var(--c-gray-100);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs__btn:hover { background: var(--c-gray-150); }
.tabs__btn[aria-selected="true"] {
  color: var(--c-navy);
  background: var(--c-blue);
}
.tabs__btn[aria-selected="true"]:hover { background: var(--c-blue-dark); }

@media (max-width: 900px) {
  .tabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .tabs__list { grid-template-columns: minmax(0, 1fr); }
}

.tabs__panel[hidden] { display: none; }

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */

.field { display: grid; gap: var(--sp-1); }

.field__label {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-5);
  background: var(--c-gray-100);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  font-size: var(--fs-16);
  color: var(--c-navy);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__input::placeholder { color: var(--text-muted); }
.field__input:hover { background: var(--c-white); }
.field__input:focus {
  background: var(--c-white);
  border-color: var(--c-blue);
  outline: none;
}
.field__input[aria-invalid="true"] { border-color: #d92d20; background: #fef3f2; }

.field__error {
  font-size: var(--fs-14);
  color: #d92d20;
  min-height: 1.2em;
}
.field__error:empty { min-height: 0; }

.form__status {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}
.form__status[data-state="ok"]    { color: #067647; }
.form__status[data-state="error"] { color: #d92d20; }

/* ==========================================================================
   BOTÃO FLUTUANTE DE WHATSAPP
   ========================================================================== */

.whats-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  background: var(--c-green);
  color: var(--c-navy);           /* o ícone usa currentColor */
  border-radius: var(--r-pill);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.22);
  transition: transform var(--dur) var(--ease);
}
.whats-float:hover { transform: scale(1.06); }
.whats-float svg { width: 30px; height: 30px; }

/* ==========================================================================
   FAQ (acordeão) — bloco global
   ==========================================================================
   Vive aqui, e não numa folha de página, porque o FAQ é o mesmo em /cargas,
   /para, /seguros, /legislacao, /cotacao, /seguro-de-carga e na página de
   obrigatórios. O HTML sai de tools/lib/partials.mjs → faq().

   UMA COLUNA DE FAIXAS, desde 04/11/2026. Até então eram duas colunas com um
   filete cinza sob cada pergunta; as páginas de ramo nasceram em 30/10 com
   este desenho, que é o do frame, e o cliente pediu que valesse para o site
   inteiro. As regras vieram de `.ramo-faq`, em ramo.css, que deixou de
   existir — o desenho de exceção virou o padrão.

   O MARCADOR CONTINUA. O frame não desenha o chevron, mas ele é o que diz que
   a faixa abre; tirá-lo deixaria as perguntas como barras cinzas sem nenhum
   sinal de que são um acordeão.

   A MARCAÇÃO NÃO MUDA: `faq()` continua montando duas `.faq__col`, e elas
   viram blocos aqui. Empilhadas, as perguntas saem na ordem 1→n, que é a
   mesma de antes lida coluna a coluna. Mantê-la poupa mexer em doze
   geradores e no JSON-LD que sai da mesma fonte. */

.faq__cols,
.faq__col { display: block; min-width: 0; }

.faq-item {
  margin-top: var(--sp-2);
  background: var(--c-gray-100);
  border-radius: var(--r-input);
}
.faq__col:first-child .faq-item:first-child { margin-top: 0; }

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  text-align: left;
}

/* Chevron do Figma: cinza e apontando para baixo quando fechado; azul e
   apontando para cima quando aberto. Sem círculo — é só o ícone. */
.faq-item__marca {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  color: var(--c-gray-200);
  transform: rotate(180deg);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease);
}
.faq-item__marca svg { width: 24px; height: 24px; }
.faq-item__q[aria-expanded="true"] .faq-item__marca {
  color: var(--c-blue);
  transform: rotate(0deg);
}

/* Abre animando de 0fr para 1fr: a altura sai do próprio conteúdo, então
   nenhuma resposta é cortada por um teto fixo, independente do texto ou da
   largura da coluna. (A versão anterior usava `max-height: 240px`, que
   silenciosamente cortaria uma resposta mais longa.) */
.faq-item__a {
  display: grid;
  /* minmax(0, …) e não só `0fr`: sozinho, `0fr` equivale a
     `minmax(auto, 0fr)` e o mínimo automático segura a faixa aberta. */
  grid-template-rows: minmax(0, 0fr);
  /* O recorte tem de estar AQUI, no painel. O `overflow: hidden` do filho
     recorta o conteúdo dele, mas não impede o próprio filho de transbordar:
     com a faixa em 0, o parágrafo ainda media 20px (o padding dele) e
     vazava a primeira linha da resposta para fora da pergunta fechada. */
  overflow: hidden;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq-item__a > * { overflow: hidden; min-height: 0; }
.faq-item__a[data-open] { grid-template-rows: minmax(0, 1fr); }

/* O painel é irmão do botão, não filho: sem o respiro lateral a resposta
   nasceria colada na borda da faixa. */
.faq-item__a p {
  padding: 0 var(--sp-5) var(--sp-5);
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}

/* Cabeçalho à esquerda, junto da primeira faixa. Era centralizado em todas as
   páginas menos a de obrigatórios; com as faixas de largura inteira, um
   título centralizado ficava solto no meio de uma coluna que começa na
   margem esquerda. */
.faq__head { justify-content: flex-start; text-align: left; }
.faq__head .section-title { max-width: none; }

/* O título do FAQ é uma etiqueta de seção, não uma manchete: 20px em todas as
   páginas (pedido do cliente, 28/09/2026). */
.faq .section-title,
.faq__head .section-title { font-size: var(--fs-20); }


/* ==========================================================================
   BLOCOS DE PÁGINA DE PRODUTO
   ==========================================================================
   Nasceram em /seguro-de-carga e agora servem a toda página de seguro: o
   par cobre/não cobre, os passos com seta, as pastilhas de fatores de preço
   e o checklist de documentos. Por isso perderam o prefixo "sc-" e vieram
   para cá: as páginas de produto usam todas os mesmos blocos.
   ========================================================================== */
/* ==========================================================================
   COBRE / NÃO COBRE — bloco global
   ========================================================================== */

.cobre__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-10);
}

.cobre {
  padding: var(--sp-8) clamp(var(--sp-5), 3vw, var(--sp-8));
  background: var(--c-white);
  border-radius: var(--r-card);
}

.cobre__titulo { font-size: var(--fs-18); font-weight: var(--fw-semibold); }
.cobre__titulo--sim { color: var(--c-sim); }
.cobre__titulo--nao { color: var(--c-nao); }

.cobre__lista {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.cobre__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-16);
  line-height: 1.4;
  color: #1e1e1e;
  background: var(--c-gray-100);
  border-radius: var(--r-input);
}
.cobre__item strong { font-weight: var(--fw-semibold); }


/* ==========================================================================
   MARCA DE SIM / NÃO — bloco global
   ==========================================================================
   Um desenho só para todas as listas comparativas do site. No Figma são dois
   componentes, Check_ring e Dell, iguais nos três frames que os usam
   (/rctr-c, /cargas/ferro-e-aco, /para/transportadoras): anel de 18px com
   traço de 2px, símbolo na mesma cor, nada preenchido. Ficou disperso
   enquanto cada família de página ganhava CSS próprio — o anel vazado, que é
   o do Figma, convive mal ao lado do disco sólido que as páginas de produto
   tinham.

   Quem usa: .cobre__marca (seguros obrigatórios), .perfil-check__marca
   (perfis). Classes diferentes porque o HTML das duas já está gerado; o
   desenho é um só. Para acrescentar uma terceira lista, some a classe aqui
   em vez de copiar o bloco.

   O "não" é desenhado no CSS porque o sprite só tem o check. */

.cobre__marca,
.perfil-check__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.cobre__marca--sim,
.perfil-check__marca--sim { color: var(--c-sim); }

.cobre__marca--nao,
.perfil-check__marca--nao { position: relative; color: var(--c-nao); }

.cobre__marca svg,
.perfil-check__marca svg {
  width: 9px; height: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.cobre__marca--nao::before,
.cobre__marca--nao::after,
.perfil-check__marca--nao::before,
.perfil-check__marca--nao::after {
  content: '';
  position: absolute;
  width: 8px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.cobre__marca--nao::before,
.perfil-check__marca--nao::before { rotate: 45deg; }
.cobre__marca--nao::after,
.perfil-check__marca--nao::after  { rotate: -45deg; }


/* Como no Figma: os três passos em linha, ligados por uma seta, e a régua
   fechando o bloco embaixo — não em cima. */
/* ol: base.css zera o padding de ol[role=list] e venceria o seletor de classe */
/* Como no frame /rctr-c (277:104, y 2173–2232): só o título e o texto, sem
   círculo numerado, ligados por uma seta comprida que atravessa o vão entre
   as colunas. A numeração era redundante — a ordem já está na seta e na
   leitura da esquerda para a direita. */

ol.passos {
  /* o vão serve ao `gap` e à largura da seta: os dois têm de andar juntos,
     senão a seta sobra para dentro do passo seguinte */
  --vao-passos: clamp(var(--sp-14), 9vw, 140px);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vao-passos);
  margin-top: clamp(var(--sp-10), 5vw, var(--sp-16));
  padding-bottom: clamp(var(--sp-12), 5vw, var(--sp-20));
  border-bottom: 1px solid var(--c-gray-200);
}

.passo { position: relative; }

/* A seta ocupa o vão inteiro menos um respiro de cada lado. Fica na altura da
   primeira linha do texto, como no desenho, e não no meio do bloco: assim os
   três ficam alinhados mesmo quando um texto ocupa uma linha a mais. */
.passo:not(:last-child)::before {   /* haste, com as pontas arredondadas */
  content: '';
  position: absolute;
  top: 46px;
  left: calc(100% + var(--sp-5));
  width: calc(var(--vao-passos) - var(--sp-5) - 38px);
  height: 2px;
  background: var(--c-blue);
  border-radius: 999px;
}
.passo:not(:last-child)::after {    /* ponta, encostada na haste */
  content: '';
  position: absolute;
  top: 41px;
  left: calc(100% + var(--vao-passos) - 38px);
  width: 0; height: 0;
  border-left: 12px solid var(--c-blue);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.passo__titulo {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  color: var(--c-navy);
}

.passo__texto {
  margin-top: var(--sp-3);
  font-size: var(--fs-16);
  line-height: 1.45;
  color: var(--text-body);
}


/* A ressalva que fecha a grade cobre/não cobre, nas três famílias de página
   que a usam (obrigatórios, modalidades e tipos de carga). Ela existe porque
   duas listas lado a lado, uma verde e uma vermelha, leem como regra do ramo,
   e não é isso que elas são: o que vale em cada caso é o que está contratado.
   Correção pedida pelo cliente em 30/10/2026.

   Discreta de propósito, como a nota do registro SUSEP: é ressalva de leitura,
   não argumento de venda. */
.rc-nota-cobertura {
  max-width: 72ch;
  margin: clamp(var(--sp-6), 3vw, var(--sp-8)) 0 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}
.rc-nota-cobertura strong { color: var(--text-body); }

/* Como no Figma: os fatores correm em linha, separados por pontos azuis. */
.fatores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-8);
  max-width: 620px;
}

.fator {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-14);
  color: var(--text-body);
}
.fator:not(:last-child)::after {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  background: var(--c-blue);
  border-radius: 50%;
}


/* O box do Figma tem 737x255 com margem interna larga (62px nas laterais):
   é o respiro que faz a lista parecer um cartão, e não um bloco de texto. */
/* o seletor precisa do ul: base.css zera o padding de ul[role=list] */
/* ==========================================================================
   CHECKLIST DE DOCUMENTOS — a moldura do bloco global
   ========================================================================== */

.checklist__grade {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 760px);
  justify-content: space-between;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: start;
}

.checklist__nota {
  margin-top: var(--sp-5);
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--text-body);
}
.checklist__texto .btn { margin-top: var(--sp-6); }

/* Duas colunas de texto, e nao um grid 2x4: com grid, um item que quebra em
   duas linhas (o "Registro no RNTRC" ou o "Plano de gerenciamento de risco")
   esticava a linha inteira e abria um vao maior entre os itens da coluna ao
   lado — o desnivel relatado em 04/11/2026. Em multicol cada item ocupa so a
   propria altura, e o espaco entre eles e sempre o mesmo. A ordem de leitura
   passa a ser vertical (1-4 na esquerda, 5-8 na direita), que e como a lista
   aparece no Figma. */
ul.checklist__lista {
  --check-pad-y: clamp(var(--sp-8), 4vw, var(--sp-12));
  --check-gap: var(--sp-5);
  columns: 2;
  column-gap: var(--sp-10);
  max-width: 737px;
  padding: var(--check-pad-y) clamp(var(--sp-6), 5vw, 62px)
           calc(var(--check-pad-y) - var(--check-gap));
  background: var(--c-white);
  border-radius: 12px;
}

/* o espaco entre itens vai no proprio item: em multicol o gap de grid nao
   existe, e a margem no fim da coluna e descartada pelo navegador, entao o
   topo das duas colunas continua alinhado */
.checklist__lista .check {
  margin-bottom: var(--check-gap);
  break-inside: avoid;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-16);
  line-height: 1.4;
  color: var(--text-muted);
}

/* Círculo vazado com o check dentro, azul da marca (ícone do Figma, uma
   elipse de 13px). Serve aos três checklists do site: o de documentos das
   páginas de seguro (.check__marca), o das exigências das páginas de carga
   (.carga-exigencia__marca) e o de cotação das páginas de perfil
   (.perfil-doc__marca). Estavam declarados em três arquivos, em 16, 14 e
   14px. Não confundir com a marca de sim/não acima: esta é um item de lista,
   não um lado de comparação, e por isso é azul e menor.

   Azul de preenchimento (--c-blue), e não o --c-blue-text: decisão do cliente
   em 01/10/2026. Contraria a regra do tokens.css porque aqui ela não se
   aplica — a marca é decorativa (aria-hidden) e repete o que o texto ao lado
   já diz, então não é "gráfico essencial" para a 1.4.11. Não trocar de volta
   sem falar com o cliente. */
.check__marca,
.carga-exigencia__marca,
.perfil-doc__marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 14px; height: 14px;
  margin-top: 3px;
  color: var(--c-blue);
  border: 1px solid currentColor;
  border-radius: 50%;
}
.check__marca svg,
.carga-exigencia__marca svg,
.perfil-doc__marca svg {
  width: 7px; height: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}


/* A faixa "Conteúdo: … · Revisão técnica: … · Atualizado em: …" saiu de todas
   as páginas em 19/10/2026, a pedido do cliente. O CSS dela saiu junto: regra
   sem marcação correspondente é peso que ninguém cobra e que, meses depois,
   ninguém sabe se pode apagar. Para repor, ver
   documentacao/historico/blocos-retirados.md. */

/* ---------- os blocos de produto em telas menores ----------
   Moram aqui, e não na folha de uma página: em 28/09/2026 a /seguros/rctr-c
   nasceu com as duas colunas de cobre/não cobre lado a lado num celular de
   390px, porque estas regras tinham ficado para trás. */

@media (max-width: 1080px) {
  .checklist__grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .cobre__grade,
  ol.passos { grid-template-columns: minmax(0, 1fr); }

  ol.passos { gap: var(--sp-8); }
  /* empilhados, os passos não precisam da seta lateral — e o :not() precisa
     vir junto, senão a regra perde e a seta some para fora da tela */
  .passo:not(:last-child)::before,
  .passo:not(:last-child)::after { content: none; }
}

@media (max-width: 680px) {
  ul.checklist__lista { columns: 1; }
}

/* ==========================================================================
   AVISO DE COOKIES E PAINEL DE PREFERÊNCIAS
   ==========================================================================
   Montados por assets/js/consentimento.js. Sem frame no Figma: seguem a
   linguagem do site (cartão branco, navy, azul da marca).

   Os três botões têm o MESMO desenho de propósito: um "Aceitar" chamativo ao
   lado de um "Recusar" apagado induz a escolha, e é justamente o padrão que o
   guia de cookies da ANPD desaconselha. */

/* Cartão solto na base, com margem dos quatro lados.
   Escuro de propósito: branco, ele se confundia com o menu. */
.cookies-aviso {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 95;                       /* acima do WhatsApp flutuante (90) */
  width: min(var(--container-wide), calc(100% - 2 * clamp(16px, 4vw, 40px)));
  transform: translateX(-50%);
  padding: var(--sp-8) clamp(var(--sp-6), 3vw, var(--sp-10));
  color: var(--c-white);
  background: var(--c-navy);
  border-top: 4px solid var(--c-blue);
  border-radius: var(--r-xl);
  /* Sombra funda: sem véu por trás, é ela que separa o cartão da página e dá
     a sensação de que ele está à frente, não colado nela. */
  box-shadow: 0 24px 60px rgb(2 12 28 / 0.5), 0 2px 8px rgb(2 12 28 / 0.3);
  animation: cookies-subir var(--dur-slow) var(--ease-out) both;
}

@keyframes cookies-subir {
  from { opacity: 0; transform: translate(-50%, 24px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.cookies-aviso__conteudo {
  display: flex;
  align-items: center;
  gap: var(--sp-5) var(--sp-10);
}

.cookies-aviso__texto { flex: 1 1 auto; max-width: 720px; }

.cookies-aviso__titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}

.cookies-aviso__texto p {
  font-size: var(--fs-16);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.88);
}
.cookies-aviso__texto a {
  color: var(--c-blue);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookies-aviso__texto a:hover { color: var(--c-white); }

.cookies-aviso__botoes { flex: none; width: min(520px, 100%); }

.cookies-aviso__botoes,
.cookies-painel__botoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

/* no cartão escuro: os três em contorno branco, iguais entre si */
.cookies-aviso .cookies-btn {
  min-height: 50px;
  font-size: var(--fs-16);
  color: var(--c-white);
  background: transparent;
  border-color: rgb(255 255 255 / 0.85);
}
.cookies-aviso .cookies-btn:hover { color: var(--c-navy); background: var(--c-white); }

.cookies-btn {
  min-height: 42px;
  padding: 0 var(--sp-3);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-navy);
  background: var(--c-white);
  border: 1.5px solid var(--c-navy);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cookies-btn:hover { background: var(--c-navy); color: var(--c-white); }
.cookies-btn:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }

/* ---------- painel ---------- */

.cookies-painel {
  /* o reset do site zera as margens, e é a margem automática que centraliza
     um <dialog> aberto como modal */
  margin: auto;
  width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: none;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgb(2 12 28 / 0.35);
}
.cookies-painel::backdrop { background: rgb(2 12 28 / 0.6); }

.cookies-painel__form { padding: var(--sp-8) clamp(var(--sp-5), 4vw, var(--sp-8)); }

.cookies-painel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.cookies-painel__titulo {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
}

.cookies-painel__fechar {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.cookies-painel__fechar:hover { background: var(--c-gray-100); color: var(--c-navy); }

.cookies-painel__intro {
  margin-top: var(--sp-2);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-muted);
}

.cookies-painel__lista { margin: var(--sp-5) 0 var(--sp-6); padding: 0; list-style: none; }

.cookies-cat { padding-block: var(--sp-4); border-top: 1px solid var(--c-gray-150); }
.cookies-cat:last-child { border-bottom: 1px solid var(--c-gray-150); }

.cookies-cat__linha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  cursor: pointer;
}

.cookies-cat__titulo { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-navy); }

.cookies-cat__texto {
  margin-top: var(--sp-1);
  padding-right: 60px;
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--text-muted);
}

/* chave liga/desliga: o checkbox real continua focável, só fica invisível */
/* por cima do trilho: o clique cai direto na caixa real */
.cookies-chave {
  position: absolute;
  top: 50%; right: 0;
  z-index: 1;
  width: 44px; height: 24px;
  margin: 0;
  translate: 0 -50%;
  opacity: 0;
  cursor: pointer;
}

.cookies-chave__trilho {
  position: relative;
  flex: none;
  width: 44px; height: 24px;
  background: var(--c-gray-300);
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease);
}
.cookies-chave__trilho::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: translate var(--dur) var(--ease-out);
}
.cookies-chave:checked + .cookies-chave__trilho { background: var(--c-blue); }
.cookies-chave:checked + .cookies-chave__trilho::after { translate: 20px 0; }
.cookies-chave:disabled + .cookies-chave__trilho { opacity: 0.55; }
.cookies-chave:focus-visible + .cookies-chave__trilho { outline: 3px solid var(--c-blue); outline-offset: 2px; }

/* ---------- rodapé: link para reabrir o painel ---------- */

.footer__cookies {
  padding: 0;
  font: inherit;
  color: var(--c-ink);
  background: none;
  border: none;
  cursor: pointer;
}
.footer__cookies:hover { color: var(--c-blue-text); text-decoration: underline; }

/* ---------- telas pequenas ---------- */

/* a faixa ocupa a base da tela: o WhatsApp sobe para ficar acima dele
   (a altura vem de consentimento.js) */
.tem-aviso-cookies .whats-float {
  bottom: calc(var(--altura-aviso-cookies, 220px) + 16px);
}

/* texto em cima, botões embaixo */
@media (max-width: 900px) {
  .cookies-aviso__conteudo { flex-direction: column; align-items: stretch; }
  .cookies-aviso__texto { max-width: none; }
  .cookies-aviso__botoes { width: 100%; }
}

@media (max-width: 600px) {
  .cookies-aviso { padding: var(--sp-5) var(--sp-5); }
}

/* Os três rótulos dividem a largura do cartão em partes iguais, e
   "Personalizar" é o mais longo. Com a fonte de 16px, ele estourava o botão
   entre 360 e 389px, que é a largura de boa parte dos celulares. Abaixo de
   480 a fonte volta a 14 e o cartão aperta o respiro lateral: sobra folga
   para a palavra inteira sem empilhar os botões, que levaria o aviso a
   ocupar metade da tela. */
@media (max-width: 480px) {
  .cookies-aviso { padding-inline: var(--sp-4); }
  .cookies-aviso .cookies-btn { font-size: var(--fs-14); padding-inline: var(--sp-2); }
}

/* Telas muito pequenas (iPhone SE e afins, 320x568).
   Empilhar os três botões custava 159px de altura e o cartão chegava a 441px,
   78% da tela: sobrava uma faixa de conteúdo no topo e o aviso virava um muro
   na prática, que é justamente o que decidimos não fazer.
   Em duas fileiras, com o "Aceitar todos" ocupando a largura inteira, são
   106px. O resto vem de encolher título, texto e respiro. */
@media (max-width: 359px) {
  .cookies-aviso { padding: var(--sp-4); }
  .cookies-aviso__titulo { font-size: var(--fs-18); }
  .cookies-aviso__texto p { font-size: var(--fs-14); line-height: 1.45; }

  .cookies-aviso__botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* O último botão é o "Aceitar todos": sozinho na fileira de baixo, com a
     largura inteira. Os três seguem com o MESMO desenho e o mesmo tamanho de
     alvo — o que muda é só a arrumação. */
  .cookies-aviso__botoes .cookies-btn:last-child { grid-column: 1 / -1; }

  .cookies-painel__botoes { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cookies-chave__trilho,
  .cookies-chave__trilho::after { transition: none; }
  /* A entrada do cartão é enfeite: sem animação ele aparece pronto, em vez
     de nascer deslocado e ficar assim. */
  .cookies-aviso { animation: none; }
}

/* ==========================================================================
   HERO DE ÍNDICE — o topo das páginas que listam algo
   ==========================================================================
   Figma 28/09/2026 (frame /cargas, 119:257): foto de largura cheia com um
   véu azul-escuro que vem da esquerda e se dissolve antes da borda direita.
   O texto fica sobre a parte cheia do véu; a foto aparece à direita.

   Medidas lidas do frame (1440 × 635, menu de 174 fora):
     véu      linear, #06162e transparente na direita → opaco a 76,4%
     título   50/600 #00b6ff, duas linhas
     lead     16/600 branco, 451px de largura
     lista    14/400 branco, duas colunas de 214px com 19px entre elas
     botões   48px de altura, azul + verde do WhatsApp

   Camadas, todas opcionais:
     título (azul) → lead → lista dos itens da página → dois botões

   A lista faz a página começar a servir antes da rolagem: quem chegou
   procurando "químicos" ou "embarcadores" vê o caminho já no topo. */

.hero-indice {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 44vw, 640px);
  background: var(--c-navy-frio);
}

.hero-indice__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  /* Alinhado à coluna LARGA (1280px), que é a que estas quatro páginas usam
     nas seções seguintes. O Figma desenha o hero na coluna de 1080px, mas aí
     o título fica 100px à direita de tudo o que vem abaixo dele. */
  padding: clamp(var(--sp-12), 6vw, var(--sp-16))
           max(var(--gutter), calc((100vw - var(--container-wide)) / 2));
}

.hero-indice__titulo {
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--c-blue);
}

.hero-indice__lead {
  max-width: 460px;
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--c-white);
}

/* ---------- a lista dos itens, em duas colunas ---------- */

/* Duas colunas preenchidas de cima para baixo, como no Figma — por isso
   colunas de CSS e não grade: a grade preencheria linha a linha. */
.hero-indice__itens {
  columns: 2;
  column-gap: var(--sp-5);
  max-width: 520px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-indice__item {
  break-inside: avoid;
  font-size: var(--fs-14);
  line-height: 1.65;
  color: var(--c-white);
}
.hero-indice__item a { color: inherit; }
.hero-indice__item a:hover { color: var(--c-blue); }

.hero-indice__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}

/* ---------- a foto e o véu ---------- */

.hero-indice__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-indice picture { display: contents; }

.hero-indice__bg {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* O véu do Figma: opaco até 23,6% da largura e transparente na borda direita.
   Sem ele o texto branco cai em cima da parte clara da foto. */
.hero-indice__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(6, 22, 46, 0) 0%, var(--c-navy-frio) 76.44%);
}

@media (max-width: 900px) {
  /* Retrato: a foto ocupa a tela toda e o véu passa a vir de baixo, senão o
     lado direito claro fica atrás do texto. */
  .hero-indice { min-height: clamp(420px, 92vw, 560px); }
  .hero-indice__lead { max-width: none; }
  .hero-indice__foto::after {
    background: linear-gradient(to bottom, rgba(6, 22, 46, 0.72) 0%, var(--c-navy-frio) 82%);
  }
}

@media (max-width: 680px) {
  .hero-indice__itens { columns: 1; }
  .hero-indice__acoes .btn { width: 100%; }
}

/* ==========================================================================
   ALVO DE TOQUE (22/10/2026)
   ==========================================================================
   Apple e Google recomendam 44x44 para o que se toca com o dedo. A medição
   em 390px achou vinte classes abaixo disso, e as piores eram as bolinhas do
   carrossel, com 8 e 9px: praticamente impossíveis de acertar.

   Tudo aqui está sob `pointer: coarse`, que é a consulta que pergunta pelo
   APONTADOR e não pela largura da tela. Duas razões:

   - o desenho de desktop veio do Figma e foi aprovado; não é para mudar;
   - largura não diz se há dedo ou mouse. Um notebook de 1366px com tela de
     toque precisa do alvo grande, e um celular em paisagem não deixa de ter
     dedo porque passou de 900px.

   A técnica nas bolinhas é aumentar a ÁREA sem aumentar o desenho: o padding
   cresce o alvo e o `background-clip: content-box` mantém o ponto do mesmo
   tamanho que estava. */

@media (pointer: coarse) {
  /* ---------- bolinhas do carrossel e do hero ---------- */
  /* As bolinhas são barrinhas de 27x8. Com box-sizing: border-box, padding
     sozinho não cresce a caixa além da altura declarada: é o min-height que
     faz a conta, e o background-clip mantém a barra do tamanho do desenho. */
  .carousel__dot,
  .hero__dot {
    min-height: 44px;
    padding-block: 18px;
    background-clip: content-box;
    /* Sem isto a fileira de bolinhas fica 36px mais alta do que o desenho. */
    margin-block: -18px;
  }

  /* Linha do rodapé com os links legais: um encostava no outro. */
  .footer__legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* As letras do glossário têm altura fixa de 32px, que vence o min-height. */
  .glos-letra-link { height: 44px; min-width: 44px; }

  /* ---------- links que são o alvo inteiro ---------- */
  .blog-cats__link,
  .blog-cats__todas,
  .blog-secao__mae,
  .blog-paginacao__link,
  .footer__mais,
  .footer__whats,
  .footer__phone,
  .footer__cookies,
  .glos-termo__veja,
  .glos-letra-link,
  .sobre-mapa__link,
  .sobre-onde__fone,
  .lei-outro,
  .link-arrow,
  .post-card__mais,
  .leia__link,
  .materia__trilha a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* O rodapé vira uma coluna de alvos de 44px: sem isto as linhas encostam
     umas nas outras e o dedo acerta a vizinha. */
  .footer__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }

  /* ---------- botões ---------- */
  .btn,
  .cookies-btn,
  .cot-pilula span {
    min-height: 44px;
  }

}

/* ==========================================================================
   LEIA TAMBÉM
   Bloco global de ligação curada entre produto, tipo de carga e matéria.
   Markup em tools/lib/partials.mjs (leiaTambem). Nasceu do item 9 do plano
   de homologação: fora dos blocos globais, as páginas de produto tinham 4
   links próprios e nenhum levava a uma matéria.

   Sem foto e sem data de propósito. Com capa, ele viraria um segundo blog
   dentro da página e disputaria atenção com o formulário; o que interessa
   aqui é o título e a razão de o link estar ali.
   ========================================================================== */

.leia { background: var(--c-gray-100); }

.leia__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-4);
  margin: clamp(var(--sp-6), 3vw, var(--sp-8)) 0 0;
  padding: 0;
  list-style: none;
}

.leia__item {
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-white);
  border: 1px solid var(--c-gray-150);
  border-radius: var(--r-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.leia__item:hover { border-color: var(--c-blue); box-shadow: var(--shadow-card); }

.leia__link {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
}

.leia__link:hover { color: var(--c-blue-text); }

.leia__nota {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-muted);
}