/*
 * ESTADOS DE HOVER SÓ EM APARELHO COM PONTEIRO.
 *
 * No iOS, tocar num elemento aplica `:hover` e o estado PERMANECE até o dedo
 * tocar noutro lugar. O resultado é um botão que fica preso na cor de hover
 * depois de usado — foi o que apareceu como "botões com a cor errada" no
 * celular. As 81 regras deste projeto não tinham proteção nenhuma.
 *
 * `@media (hover: hover)` pergunta ao aparelho se ele TEM ponteiro capaz de
 * pairar; o iPhone responde que não, e nenhuma dessas regras se aplica lá.
 * Seletores de `:focus-visible` e `:focus-within` ficaram FORA da proteção,
 * porque navegação por teclado precisa deles em qualquer aparelho.
 */
/* ==========================================================================
   INAEC · 02-COMPONENTS
   Componentes reutilizáveis, derivados dos Elementos de Apoio do MIV.

   >>> MIGRAÇÃO ELEMENTOR PRO
   Cada bloco abaixo vira um Global Widget (ou um item da biblioteca).
   .btn → widget Botão com as classes aplicadas em Avançado → Classes CSS.
   ========================================================================== */

/* --- Label / Olho-de-seção ---------------------------------------------
   MIV · Label: Archivo 600 · 11px · tracking +180.
   Caixa alta permitida SOMENTE em rótulos curtos, com tracking. */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-text-muted);
}
.label--inverse { color: color-mix(in srgb, var(--inaec-branco) 78%, transparent); }

/* Marcador do label: fragmento da Régua, 2px de altura */
.label::before {
  content: "";
  inline-size: 24px;
  block-size: 2px;
  background-image: var(--inaec-grad-ciclo);
  flex: none;
}

/* --- Régua (faixa de gradiente do ciclo) --------------------------------
   MIV: apenas horizontal, 4–8px no digital, sem texto sobreposto. */
.regua {
  inline-size: 100%;
  block-size: var(--regua-height);
  background-image: var(--inaec-grad-ciclo);
  border: 0;
  margin: 0;
}
.regua--fina { block-size: 4px; }

/* --- Lead (linha de apoio do título) ------------------------------------ */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 60ch;
}
.section--inverse .lead,
.lead--inverse { color: color-mix(in srgb, var(--inaec-branco) 82%, transparent); }

/* --- Botões -------------------------------------------------------------
   Contraste conforme tabela WCAG do MIV.
   Grafite sobre Amarelo = 11.05:1 (permitido).
   Branco sobre Amarelo  =  1.48:1 (PROIBIDO — nunca inverter). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.875rem 1.75rem;
  min-block-size: 48px; /* alvo de toque acessível */
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(0); }

/* Primário — acento de transformação */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}
@media (hover: hover) {
  .btn--primary:hover {
  background-color: color-mix(in srgb, var(--inaec-amarelo) 84%, var(--inaec-grafite));
}
}

/* Secundário — verde institucional sólido */
.btn--secondary {
  background-color: var(--inaec-verde);
  color: var(--inaec-branco);
}
@media (hover: hover) {
  .btn--secondary:hover {
  background-color: var(--inaec-verde-profundo);
}
}

/* Fantasma sobre fundo escuro */
.btn--ghost {
  background-color: transparent;
  color: var(--inaec-branco);
  border-color: var(--color-border-inverse);
}
@media (hover: hover) {
  .btn--ghost:hover {
  background-color: color-mix(in srgb, var(--inaec-branco) 12%, transparent);
  border-color: var(--inaec-branco);
}
}

/* Fantasma sobre fundo claro */
.btn--outline {
  background-color: transparent;
  color: var(--inaec-verde);
  border-color: var(--color-border);
}
@media (hover: hover) {
  .btn--outline:hover {
  border-color: var(--inaec-verde);
  background-color: color-mix(in srgb, var(--inaec-verde) 6%, transparent);
}
}

/* Compacto — usado no CTA do cabeçalho, onde o botão deve indicar a ação
   sem competir com a marca e com o menu. */
.btn--sm {
  padding: 0.5rem 1rem;
  min-block-size: 38px;
  font-size: var(--fs-legend);   /* 14px */
  font-weight: var(--fw-medium); /* 500  */
}
.btn--sm .btn__icon { inline-size: 16px; block-size: 16px; }

.btn__icon { flex: none; inline-size: 18px; block-size: 18px; }

/* --- Marca --------------------------------------------------------------
   MIV: área de proteção x = metade da altura do símbolo. Nunca inserir a
   marca em caixas ou molduras; nunca aplicar sombra ou efeito. */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0;          /* nunca emoldurar */
  line-height: 0;
}
.logo img {
  inline-size: var(--logo-width);
  min-inline-size: var(--logo-horizontal-min); /* mínimo digital do MIV */
  block-size: auto;
}

/* --- Lentes (elemento de apoio) -----------------------------------------
   MIV: círculos sobrepostos derivados do anel, em multiply; no máximo 1/3
   da área; sempre atrás do conteúdo, sem texto sobreposto; cortadas pela
   borda da página. */
.lentes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.lente {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* ==========================================================================
   COMPONENTES DO PORTAL
   Adicionados na Fase 2 — sistema de cards brancos sobre o cinza do portal.
   ========================================================================== */

/* --- Cabeçalho de seção --------------------------------------------------
   >>> ELEMENTOR: Container "section-head" · flex column · gap 16
       (Texto .label + Título h2 + Texto .lead + link opcional) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-end: var(--space-md);
  max-inline-size: 62ch;
}
.section-head__title { margin: 0; }

/* Variante com link de apoio alinhado à direita no desktop */
.section-head--row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  max-inline-size: none;
}
.section-head--row .section-head__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-inline-size: 62ch;
}

/* --- Card base ----------------------------------------------------------
   >>> ELEMENTOR: Container filho · fundo Branco · raio 14 · sombra leve */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  block-size: 100%;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.card__title {
  margin: 0;
  font-size: 1.0625rem;          /* 17px — nível de card, abaixo do h3 */
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-heading);
}
.card__text {
  margin: 0;
  font-size: var(--fs-legend);   /* 14px */
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* Card clicável inteiro — o link do título cobre o cartão */
.card--link { position: relative; }
.card--link:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}

@media (hover: hover) {
  .card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}
}
.card--link .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link { color: inherit; text-decoration: none; }
.card--link:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.card--link .card__link:focus-visible { outline: none; }

/* --- Ícone de eixo temático ---------------------------------------------
   MIV · Ícones: traço 2px em grade de 24px, pontas arredondadas, sem
   preenchimento sólido. */
.card__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--inaec-verde) 9%, transparent);
  color: var(--inaec-verde);
  flex: none;
}
.card__icon svg {
  inline-size: 24px;
  block-size: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Tag / categoria ----------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--inaec-verde);
  background-color: color-mix(in srgb, var(--inaec-verde) 10%, transparent);
  border-radius: var(--radius-pill);
}
.tag--destaque {
  color: var(--color-on-accent);
  background-color: var(--color-accent);
}

/* --- Link com seta ------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  /* WCAG 2.5.8 pede alvo de 24px. A linha de texto dava 22 — o respiro
     vertical completa sem alterar o desenho. */
  min-block-size: 24px;
  padding-block: 1px;
  font-size: var(--fs-legend);
  font-weight: var(--fw-semibold);
  color: var(--inaec-verde);
  text-decoration: none;
  white-space: nowrap;
}
.link-arrow svg {
  inline-size: 18px; block-size: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--duration) var(--ease);
}
@media (hover: hover) {
  .link-arrow:hover svg { transform: translateX(4px); }
}
.link-arrow--inverse { color: var(--inaec-amarelo); }

/* --- Grade responsiva de cards -------------------------------------------
   >>> ELEMENTOR: Container em Grid · colunas 3/2/1 por breakpoint */
.grid { display: grid; gap: var(--space-sm); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .section-head--row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}