/* ==================================================================
   COMPARATIVO  (widget fp-comparativo)

   Copiado do lab (lab/desenvolvimento/secoes/comparativo/comparativo.css), que fica congelado como
   referencia aprovada (2026-09-27). A partir daqui, este arquivo e o que
   vale. Cores pelas variaveis do tema da secao (--bg, --fg...): o controle
   "Fundo" do widget troca papel e navy.
   ================================================================== */

.comp{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  padding-block:clamp(6rem,15vh,11rem);
  /* A placa da FPiloto e o contrario do fundo: navy no papel, papel no navy. */
  --placa-bg:var(--navy);
  --placa-fg:var(--paper);
  --placa-fg-3:rgba(251,251,250,.62);
  --placa-linha:var(--rule-dark);
}
.comp.t-navy{
  --placa-bg:var(--paper);
  --placa-fg:var(--navy);
  --placa-fg-3:var(--ink-3);
  --placa-linha:var(--rule);
}

/* ---- topo: como o da lista em grade -------------------------------- */

.comp__caixa{
  --vao:clamp(3rem,6vw,6rem);
}
.comp__topo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--vao);
  align-items:end;
  margin-bottom:clamp(3.5rem,9vh,6.5rem);
}
.comp__h2{
  max-width:11em;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  color:var(--fg);
  text-wrap:balance;
}
.comp__texto{
  display:grid;
  gap:1em;
  max-width:44ch;
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--fg-2);
  text-wrap:pretty;
}

/* ---- tabela -------------------------------------------------------- */

.comp__quadro{position:relative}
.comp__tabela{
  position:relative;
  z-index:1;
  width:100%;
  /* Bordas separadas, sem espaco: com "collapse" o WebKit (Safari) deixava a
     tabela ~14px mais larga que a caixa e sumia o fio sob o cabecalho. */
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.comp__canto{width:22%}

.comp__opcao,.comp__criterio,.comp__valor{
  padding:clamp(1.125rem,2.6vh,1.625rem) clamp(1rem,1.6vw,1.75rem);
  text-align:left;
  vertical-align:top;
}
/* Nomes das tres opcoes: o cabecalho da tabela. */
.comp__opcao{
  padding-top:clamp(1.5rem,3.4vh,2.25rem);
  padding-bottom:clamp(1.5rem,3.4vh,2.25rem);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.25rem,1.8vw,1.875rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--fg);
  text-wrap:balance;
}
.comp__criterio{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--fg-3);
  /* Alinha pela primeira linha do valor, que tem corpo maior. */
  padding-top:calc(clamp(1.125rem,2.6vh,1.625rem) + .35em);
}
.comp__valor{
  font-size:var(--t-body);
  line-height:1.5;
  color:var(--fg-2);
  text-wrap:pretty;
}

/* A primeira coluna alinha na margem da caixa, como o titulo. */
.comp__criterio,.comp__canto{padding-left:0}

/* Fio por linha, fora da placa. */
.comp__linha > *{border-top:1px solid var(--linha-forte)}
.comp__linha:last-child > *{border-bottom:1px solid var(--linha-forte)}

/* A coluna da FPiloto. Sem JS: fundo em cada celula. Com JS no desktop
   (.com-placa): a placa unica por tras da tabela, que desce na entrada. */
.comp__c--destaque{
  background:var(--placa-bg);
  color:var(--placa-fg);
}
.comp__valor.comp__c--destaque{
  font-weight:500;
  color:var(--placa-fg);
  border-color:var(--placa-linha);
}
.comp__opcao.comp__c--destaque{color:var(--placa-fg)}
.comp__linha:last-child > .comp__c--destaque{border-bottom-color:transparent}

.comp__placa{display:none}
.com-placa .comp__c--destaque{background:transparent}
.com-placa .comp__placa{
  display:block;
  position:absolute;
  top:0;bottom:0;
  background:var(--placa-bg);
  transform:scaleY(var(--placa,1));
  transform-origin:top;
}

/* ------------------------------------------------------------------
   Abaixo de 1100px: cada criterio vira um bloco com as tres opcoes
   rotuladas. O cabecalho da tabela sai da tela (fica para leitor).
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .comp{padding-block:clamp(4.5rem,14vw,7rem)}
  .comp__topo{display:block;margin-bottom:clamp(2.5rem,10vw,4rem)}
  .comp__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .comp__texto{margin-top:clamp(1.25rem,5vw,2rem)}

  .comp__tabela,.comp__tabela tbody,.comp__linha,.comp__criterio,.comp__valor{display:block;width:auto}
  .comp__tabela thead{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
  }
  .comp__tabela thead tr,.comp__tabela thead th,.comp__tabela thead td{display:block;width:1px;height:1px;padding:0;overflow:hidden}
  .comp__linha{
    padding-block:1.5rem 1.75rem;
    border-top:1px solid var(--fg);
  }
  .comp__linha:last-child{border-bottom:1px solid var(--linha-forte)}
  .comp__linha > *{border:0}
  .comp__linha:last-child > *{border:0}

  .comp__criterio{
    padding:0 0 .875rem;
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(1.375rem,6.4vw,2rem);
    letter-spacing:-.025em;
    text-transform:none;
    line-height:1.05;
    color:var(--fg);
  }
  .comp__valor{
    display:grid;
    grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
    column-gap:1rem;
    padding:.75rem 0;
    border-top:1px solid var(--linha)!important;
  }
  .comp__valor::before{
    content:attr(data-opcao);
    font-family:var(--font-mono);
    font-weight:500;
    font-size:var(--t-mono-sm);
    letter-spacing:.1em;
    text-transform:uppercase;
    line-height:1.5;
    color:var(--fg-3);
    padding-top:.2em;
  }
  /* A da FPiloto numa faixa navy de borda a borda da caixa. */
  .comp__valor.comp__c--destaque{
    margin-inline:calc(-1 * var(--margem));
    padding:1rem var(--margem);
    border-top:0!important;
  }
  .comp__valor.comp__c--destaque::before{color:var(--placa-fg-3)}
}

@media (max-width:420px){
  .comp__valor{grid-template-columns:minmax(0,1fr);row-gap:.25rem}
}