/* 08 · COMPARATIVO · rodada 4 · prefixo .cmp
   Sete linhas, uma palavra por célula. O estado é escrito ("Sim", "Parcial", "Não") e o selo reforça:
   visto em disco cheio, traço em disco vazado, X vermelho.
   A coluna Hify é um cartão preto com vistos laranja, mais largo que as outras colunas. Estados iniciais só sob html.mov. */
/* respiro um pouco menor que o da fundação, para a seção caber numa tela */
.cmp{--secao-y:clamp(4.5rem,7.5vw,7rem);--cmp-e:cubic-bezier(.16,1,.3,1)}
.cmp .secao-cab{margin-bottom:clamp(32px,3.4vw,48px)}

/* borda superior: o branco sobe sobre a seção anterior por um degrau de 15° que corre com a rolagem */
.cmp-borda{--bh:clamp(40px,5vw,72px);--bx:calc(6% + (1 - var(--p,.45))*84%);position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--bh);background:var(--fundo);pointer-events:none;
  clip-path:polygon(var(--bx) 100%,calc(var(--bx) + var(--bh)*var(--tan15)) 0,100% 0,100% 100%)}

.cmp-moldura{position:relative}
.cmp-tabela{font-size:1.0625rem;line-height:1.35;text-align:left;color:var(--texto)}
.cmp-tabela th{font-weight:700;letter-spacing:-.01em}

/* critério: o texto anda 14 px e ganha um traço de 15° quando a linha está ativa */
.cmp-c{position:relative;display:inline-block;transition:transform 500ms var(--cmp-e)}
.cmp-c::before{content:"";position:absolute;left:-13px;top:.12em;bottom:.12em;width:2px;background:var(--marca);transform:skewX(-15deg) scaleY(0);transform-origin:50% 100%;transition:transform 500ms var(--cmp-e)}

/* resposta: selo redondo e palavra. O ::before é o disco; o ::after é o sinal (entra na chegada).
   Sim = disco cheio com visto; Parcial = disco vazado com traço; Não = X vermelho. Na coluna Hify o disco é laranja. */
.cmp{--cmp-nao:#D4111E}
.cmp-r{position:relative;display:inline-flex;align-items:center;gap:12px;--cmp-s:24px}
.cmp-r::before{content:"";flex:none;box-sizing:border-box;width:var(--cmp-s);height:var(--cmp-s);border-radius:50%;background:var(--cmp-disco,transparent);border:1.5px solid var(--cmp-aro,transparent);transition:background-color 260ms var(--curva-entrada)}
.cmp-r::after{content:"";position:absolute;left:0;top:50%;width:var(--cmp-s);height:var(--cmp-s);margin-top:calc(var(--cmp-s)/-2);background:var(--cmp-sinal,currentColor);transform-origin:0 50%;
  -webkit-mask:var(--cmp-icone) center/16px 16px no-repeat;mask:var(--cmp-icone) center/16px 16px no-repeat;transition:background-color 260ms var(--curva-entrada)}
.cmp-sim{font-weight:700;--cmp-disco:var(--texto);--cmp-sinal:var(--fundo);--cmp-icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8'/%3E%3C/svg%3E")}
.cmp-parcial{color:var(--texto-2);--cmp-aro:var(--borda-controle);--cmp-sinal:var(--texto-2);--cmp-icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6.5 12h11'/%3E%3C/svg%3E")}
.cmp-nao{color:var(--texto-2);--cmp-disco:color-mix(in srgb,var(--cmp-nao) 16%,transparent);--cmp-sinal:var(--cmp-nao);--cmp-icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E")}
.cmp-hify .cmp-sim{--cmp-disco:var(--c-laranja);--cmp-sinal:var(--c-preto)}

.cmp-nota{margin-top:var(--e-6);font-size:1rem;line-height:1.5;color:var(--texto-2)}

/* corte que varre a coluna Hify: só existe com movimento */
.cmp-varre{display:none}

/* ---------- linha ativa: sob o ponteiro, ou a que cruza o meio da tela no toque (.cmp-ativa) ---------- */
.cmp-tabela tbody :is(th,td){transition:color 260ms var(--curva-entrada),background-color 260ms var(--curva-entrada)}
.mov-ponteiro .cmp-tabela tbody:hover tr:not(:hover) :is(th,td,.cmp-r){color:color-mix(in srgb,var(--texto) 26%,transparent)}
.mov-ponteiro .cmp-tabela tbody tr:hover .cmp-c,.cmp-tabela tbody tr.cmp-ativa .cmp-c{transform:translate3d(14px,0,0)}
.mov-ponteiro .cmp-tabela tbody tr:hover .cmp-c::before,.cmp-tabela tbody tr.cmp-ativa .cmp-c::before{transform:skewX(-15deg) scaleY(1)}

/* ---------- tabela de verdade, em qualquer largura ---------- */
@media all{
  .cmp-tabela{table-layout:fixed;border-collapse:separate;border-spacing:0}
  .cmp-tabela th,.cmp-tabela td{padding:13px var(--e-4);vertical-align:middle;border-bottom:1px solid var(--linha)}
  .cmp-tabela th:first-child{width:28%;padding-left:0}
  .cmp-tabela th.cmp-hify{width:21%}
  .cmp-tabela thead th{padding-block:var(--e-4);border-top:3px solid transparent;border-bottom-color:var(--texto)}
  .cmp-tabela tbody tr:last-child>*{border-bottom-color:var(--texto)}
  /* coluna Hify: um cartão preto que sai da tabela em cima e embaixo */
  .cmp{--cmp-sai:14px;--cmp-raio:14px}
  .cmp-moldura{margin-block:var(--cmp-sai)}
  .cmp-tabela .cmp-hify{background:var(--c-preto);color:var(--c-branco);padding-inline:var(--e-6);border-bottom-color:color-mix(in srgb,var(--c-branco) 16%,transparent)}
  .cmp-tabela thead .cmp-hify{border-top-color:transparent;border-bottom-color:color-mix(in srgb,var(--c-branco) 16%,transparent);border-radius:var(--cmp-raio) var(--cmp-raio) 0 0;box-shadow:0 calc(-1*var(--cmp-sai)) 0 var(--c-preto);
    font-size:1.5rem;letter-spacing:-.03em}
  /* no topo do cartão entra o logo completo (símbolo laranja e nome branco) */
  .cmp-logo{display:block;height:28px;width:auto}
  .cmp-tabela tbody tr:last-child>.cmp-hify{border-bottom-color:transparent;border-radius:0 0 var(--cmp-raio) var(--cmp-raio);box-shadow:0 var(--cmp-sai) 0 var(--c-preto)}
  .cmp-tabela td.cmp-hify{font-weight:700}
}
@media (min-width:720px){
  /* com o ponteiro: as outras linhas recuam; a resposta da Hify na linha ativa vira laranja */
  .mov-ponteiro .cmp-tabela tbody:hover tr:not(:hover) .cmp-hify,.mov-ponteiro .cmp-tabela tbody:hover tr:not(:hover) .cmp-hify .cmp-r{color:color-mix(in srgb,var(--c-branco) 46%,transparent)}
  .mov-ponteiro .cmp-tabela tbody tr:hover>.cmp-hify{background:var(--c-laranja);color:var(--c-preto)}
  .mov-ponteiro .cmp-tabela tbody tr:hover>.cmp-hify .cmp-sim{--cmp-disco:var(--c-preto);--cmp-sinal:var(--c-laranja)}
  /* a coluna Hify ocupa os últimos 21 % */
  .mov .cmp-varre{display:block;position:absolute;top:calc(-1*var(--cmp-sai));bottom:calc(-1*var(--cmp-sai));left:79%;width:21%;border-radius:var(--cmp-raio);overflow:hidden;pointer-events:none}
}
@media (min-width:1240px){
  .cmp-tabela{font-size:1.125rem}
  .cmp-tabela thead th{font-size:1.25rem;letter-spacing:-.02em}
  .cmp-logo{height:32px}
  .cmp-nota{font-size:1.125rem}
}

/* ---------- celular: a mesma tabela, inteira. Rola na horizontal e a coluna dos critérios fica presa à esquerda
   (o mesmo comportamento da tabela do site em produção). A borda direita sangra até a beira da tela,
   para a coluna cortada mostrar que há mais para o lado. ---------- */
.cmp-rola:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
@media (max-width:719px){
  .cmp-moldura{margin-block:0}
  .cmp-rola{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;margin-right:calc(-1*var(--margem));padding:var(--cmp-sai) var(--margem) var(--cmp-sai) 0}
  .cmp-tabela{width:744px;font-size:.9375rem}
  .cmp-tabela th,.cmp-tabela td{padding:12px}
  .cmp-tabela th:first-child{width:132px;padding-left:0;position:sticky;left:0;z-index:1;background:var(--fundo);box-shadow:inset -1px 0 0 var(--linha)}
  .cmp-tabela th.cmp-hify{width:172px}
  .cmp-tabela .cmp-hify{padding-inline:var(--e-4)}
  .cmp-logo{height:24px}
  .cmp-r{gap:8px;--cmp-s:22px}
  /* o traço da linha ativa sairia da coluna presa */
  .cmp-c{transform:none!important}
  .cmp-c::before{content:none}
}

/* ---------- entrada (só com html.mov; animações "backwards": depois de rodar, vale o estado padrão) ---------- */
.cmp-tabela tbody tr:nth-child(1){--r:1}.cmp-tabela tbody tr:nth-child(2){--r:2}.cmp-tabela tbody tr:nth-child(3){--r:3}
.cmp-tabela tbody tr:nth-child(4){--r:4}.cmp-tabela tbody tr:nth-child(5){--r:5}.cmp-tabela tbody tr:nth-child(6){--r:6}.cmp-tabela tbody tr:nth-child(7){--r:7}
.cmp-tabela tr>:nth-child(2){--c:1}.cmp-tabela tr>:nth-child(3){--c:2}.cmp-tabela tr>:nth-child(4){--c:3}.cmp-tabela tr>:nth-child(5){--c:4}

.mov .cmp-moldura:not(.na-vista) .cmp-tabela :is(th,td){opacity:0}
.mov .cmp-moldura:not(.na-vista) .cmp-r::after{transform:scaleX(0)}
.mov .cmp-moldura.na-vista .cmp-tabela :is(th,td){animation:cmp-sobe 800ms var(--cmp-e) backwards;animation-delay:calc(var(--r,0)*70ms + var(--c,0)*35ms)}
.mov .cmp-moldura.na-vista .cmp-r::after{animation:cmp-enche 520ms var(--cmp-e) backwards;animation-delay:calc(480ms + var(--r,0)*70ms + var(--c,0)*60ms)}
/* a coluna Hify aparece debaixo do corte, no instante em que ele a cobre */
.mov .cmp-moldura.na-vista .cmp-tabela .cmp-hify{animation:cmp-surge 1ms linear 720ms backwards}
.cmp-varre>i{position:absolute;top:-2%;bottom:-2%;left:-75%;width:250%;background:var(--marca);transform:skewX(-15deg) translate3d(-112%,0,0)}
.mov .cmp-moldura.na-vista .cmp-varre>i{animation:cmp-varre 1200ms cubic-bezier(.65,0,.35,1) 120ms both}
@keyframes cmp-sobe{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes cmp-enche{from{transform:scaleX(0)}}
@keyframes cmp-surge{from{opacity:0}}
@keyframes cmp-varre{from{transform:skewX(-15deg) translate3d(-112%,0,0)}to{transform:skewX(-15deg) translate3d(112%,0,0)}}