/**
 * Landing Page — Laudo e Adequação NR-10
 * DELMAT Engenharia & Tecnologia
 *
 * Carregado DEPOIS de contrato-manutencao.css e laudo-spda.css.
 * Herda deles toda a identidade e os componentes compartilhados
 * (hero com título reduzido, flips de 4 colunas com atraso de
 * desvirar, prazo, cartão da animação, documento spda-v3__*, linha
 * do tempo animada dos passos, mecânica --spda-play). Este arquivo
 * traz apenas o que é exclusivo da LP de NR-10:
 *
 *  - Desenho da instalação elétrica em inspeção (QGBT, quadros de
 *    distribuição, condutos, aterramento) com pontos de conformidade
 *    em verde e não conformidades em âmbar + etiqueta de contagem.
 *  - Selo "Pronto para fiscalização" no documento.
 *  - Seção "Treinamento NR-10 para sua equipe".
 *  - Cross-sell de outros laudos no rodapé.
 *
 * O loop é o mesmo de 12s do documento (keyframes spdaCheck*/spdaHead/
 * spdaFoto/spdaAssina*/spdaSelo em laudo-spda.css); os keyframes daqui
 * se encaixam nessa mesma linha do tempo.
 */

/* ============================================================
   Desenho da instalação elétrica (lado esquerdo da animação)
   ============================================================ */
.nr10-c__svg {
    width: 100%;
    height: auto;
    display: block;
    font-family: inherit;
}

.nr10-c__solo {
    stroke: var(--lp-border-strong);
    stroke-width: 2;
}

.nr10-c__painel {
    filter: drop-shadow(0 10px 18px rgba(10, 42, 110, 0.10));
}

.nr10-c__painel > rect {
    fill: #FFFFFF;
    stroke: var(--lp-blue-deep);
    stroke-width: 2;
}

/* Duas classes para vencer `.nr10-c__painel > rect` (0,1,1) */
.nr10-c__painel .nr10-c__painel-header {
    fill: var(--lp-blue-deep);
    stroke: none;
}

.nr10-c__rotulo {
    fill: var(--lp-text-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Rótulo do QGBT fica sobre o header escuro */
.nr10-c__painel .nr10-c__painel-header + .nr10-c__rotulo {
    fill: #FFFFFF;
}

.nr10-c__din {
    fill: #F4F6FB;
    stroke: var(--lp-border);
    stroke-width: 1;
}

.nr10-c__disjuntor {
    fill: var(--lp-blue-soft);
    stroke: var(--lp-blue-primary);
    stroke-width: 1;
}

.nr10-c__vent {
    stroke: var(--lp-border);
    stroke-width: 2;
    stroke-linecap: round;
}

.nr10-c__condutos line,
.nr10-c__condutos path {
    stroke: var(--lp-blue-vivid);
    stroke-width: 2.5;
    stroke-linecap: round;
    fill: none;
}

/* Pontos de inspeção: cinza → verde (conformidade) ou âmbar
   (não conformidade identificada) na passagem do scanner */
.nr10-c__pt {
    fill: var(--lp-border-strong);
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: 12s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-play-state: var(--spda-play, running);
}

.nr10-c__pt--1 { animation-name: nr10Pt1; }
.nr10-c__pt--2 { animation-name: nr10Pt2; }
.nr10-c__pt--3 { animation-name: nr10Pt3; }
.nr10-c__pt--4 { animation-name: nr10Pt4; }
.nr10-c__pt--5 { animation-name: nr10Pt5; }

@keyframes nr10Pt1 {
    0%, 3%     { fill: var(--lp-border-strong); transform: scale(1); }
    4.5%       { fill: var(--lp-green); transform: scale(1.55); }
    6%, 100%   { fill: var(--lp-green); transform: scale(1); }
}

@keyframes nr10Pt2 {
    0%, 5%     { fill: var(--lp-border-strong); transform: scale(1); }
    6.5%       { fill: var(--lp-green); transform: scale(1.55); }
    8%, 100%   { fill: var(--lp-green); transform: scale(1); }
}

@keyframes nr10Pt3 {
    0%, 7.5%   { fill: var(--lp-border-strong); transform: scale(1); }
    9%         { fill: var(--lp-green); transform: scale(1.55); }
    10.5%, 100% { fill: var(--lp-green); transform: scale(1); }
}

/* Não conformidades: acendem em âmbar contido */
@keyframes nr10Pt4 {
    0%, 12.5%  { fill: var(--lp-border-strong); transform: scale(1); }
    14%        { fill: #D97706; transform: scale(1.55); }
    15.5%, 100% { fill: #D97706; transform: scale(1); }
}

@keyframes nr10Pt5 {
    0%, 23.5%  { fill: var(--lp-border-strong); transform: scale(1); }
    25%        { fill: #D97706; transform: scale(1.55); }
    26.5%, 100% { fill: #D97706; transform: scale(1); }
}

/* Scanner que desce do QGBT ao aterramento (mesma cena 0-24% do loop) */
.nr10-c__scanner {
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(29, 158, 117, 0.55));
    animation: nr10Scan 12s linear infinite;
    animation-play-state: var(--spda-play, running);
}

.nr10-c__scanner line {
    stroke: var(--lp-green);
    stroke-width: 3;
    stroke-linecap: round;
}

@keyframes nr10Scan {
    0%        { opacity: 0; transform: translateY(0); }
    2%        { opacity: 0.9; }
    24%       { opacity: 0.9; transform: translateY(290px); }
    26%, 100% { opacity: 0; transform: translateY(290px); }
}

/* Etiqueta com a contagem de não conformidades (aparece após a
   inspeção, enquanto o prontuário começa a ser preenchido) */
.nr10-c__callout {
    opacity: 0;
    transform: translateY(6px);
    animation: nr10Callout 12s ease infinite;
    animation-play-state: var(--spda-play, running);
}

.nr10-c__callout rect {
    fill: #FEF3C7;
    stroke: #D97706;
    stroke-width: 1.5;
}

.nr10-c__callout circle {
    fill: #D97706;
    stroke: none;
}

.nr10-c__callout text {
    fill: #7A4D00;
    font-size: 13px;
    font-weight: 700;
}

@keyframes nr10Callout {
    0%, 28%   { opacity: 0; transform: translateY(6px); }
    32%, 100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Selo "Pronto para fiscalização" no documento (fim do loop)
   ============================================================ */
.spda-anim--nr10 .spda-v3__paper {
    position: relative;
}

.nr10-fiscal {
    position: absolute;
    top: -13px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: var(--lp-green);
    color: #FFFFFF;
    border-radius: var(--lp-radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px rgba(29, 158, 117, 0.32);
    opacity: 0;
    transform: scale(0.85);
    animation: nr10Fiscal 12s ease infinite;
    animation-play-state: var(--spda-play, running);
}

.nr10-fiscal svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

@keyframes nr10Fiscal {
    0%, 88%   { opacity: 0; transform: scale(0.85); }
    92%, 100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   Treinamento NR-10 — seção exclusiva desta LP. Fundo levemente
   azulado para diferenciar das seções vizinhas (prazo: cinza
   soft; diferenciais: cinza soft).
   ============================================================ */
.lp-treino {
    background: #EAF1FC;
    border-top: 1px solid #D6E3F8;
    border-bottom: 1px solid #D6E3F8;
}

.lp-treino .lp-lead {
    max-width: 820px;
}

.lp-treino__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 880px;
    margin: 40px auto 0;
}

@media (min-width: 768px) {
    .lp-treino__cards { grid-template-columns: repeat(2, 1fr); }
}

.lp-treino__card {
    background: #FFFFFF;
    border: 1px solid #CCD9F4;
    border-top: 4px solid var(--lp-blue-vivid);
    border-radius: var(--lp-radius-lg);
    padding: 28px 26px;
    box-shadow: var(--lp-shadow-md);
}

.lp-treino__carga {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 8px 14px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-blue-soft);
    color: var(--lp-blue-deep);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.lp-treino__titulo {
    font-size: 20px;
    font-weight: 800;
    color: var(--lp-text);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.lp-treino__texto {
    font-size: 14.5px;
    color: var(--lp-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Frase de transparência OBRIGATÓRIA (parceria técnica com instrutor
   habilitado): sóbria, sem destaque, mas sempre presente. */
.lp-treino__transparencia {
    max-width: 760px;
    margin: 26px auto 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--lp-text-subtle);
    line-height: 1.6;
}

.lp-treino__transparencia strong {
    color: var(--lp-text-muted);
}

/* ============================================================
   Rodapé — cross-sell de outros laudos
   ============================================================ */
.lp-footer__cross {
    margin-bottom: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-footer__cross-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #94A3B8;
}

.lp-footer__cross-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .lp-footer__cross-cards { grid-template-columns: repeat(3, 1fr); }
}

.lp-footer__cross-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--lp-radius);
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.lp-footer__cross-card:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.28);
}

.lp-footer__cross-card strong {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}

.lp-footer__cross-card span {
    color: #CBD5E1;
    font-size: 12.5px;
    line-height: 1.45;
}

/* ============================================================
   Reduced motion — estado final estático do que é exclusivo
   desta LP (o documento e a linha do tempo já são cobertos
   pelo bloco de laudo-spda.css)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .nr10-c__pt,
    .nr10-c__scanner,
    .nr10-c__callout,
    .nr10-fiscal { animation: none; }

    .nr10-c__pt { fill: var(--lp-green); }
    .nr10-c__pt--ambar { fill: #D97706; }
    .nr10-c__scanner { opacity: 0; }
    .nr10-c__callout { opacity: 1; transform: none; }
    .nr10-fiscal { opacity: 1; transform: scale(1); }
}