/* =============================================================================
   Página inicial
   Meio Norte Express
   ============================================================================= */

/* --- Hero ----------------------------------------------------------------- */

.hero {
    position: relative;
    padding: var(--gap-secao) 0 var(--gap-bloco);
    color: #fff;
    overflow: hidden;
}

.hero__fundo {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
    background: var(--primary-dark);
}

.hero__video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* O véu é o que garante contraste do texto sobre um vídeo em movimento:
   sem ele, a legibilidade muda a cada quadro. */
.hero__veu {
    position: absolute; inset: 0;
    background: linear-gradient(150deg, rgba(15, 61, 82, .92) 0%, rgba(26, 95, 122, .84) 55%, rgba(21, 152, 149, .76) 100%);
}

.hero__interno { position: relative; z-index: 1; }

.hero__texto { max-width: 62ch; margin-bottom: var(--space-8); }
.hero h1 { color: #fff; margin-bottom: var(--space-4); }
.hero .eyebrow { color: var(--marca-laranja-claro); }
.hero__sub { font-size: var(--font-size-lg); color: rgba(255,255,255,.92); margin-bottom: 0; }

/* --- Busca de rastreio ---------------------------------------------------- */

.busca {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(20px, 3vw, 30px);
    max-width: 620px;
    margin-bottom: var(--space-5);
}

.busca__titulo { font-size: var(--font-size-xl); color: var(--gray-900); margin-bottom: var(--space-2); }
.busca__ajuda  { font-size: var(--font-size-sm); color: var(--gray-600); margin-bottom: var(--space-4); max-width: none; }

.busca__form { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.busca__form input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 15px 18px;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 2px solid var(--gray-300);
}
.busca__form input::placeholder {
    font-family: var(--font-family);
    letter-spacing: normal;
    text-transform: none;
    color: var(--gray-500);
}
.busca__form .botao { flex: 0 0 auto; }

.busca__recentes { margin: var(--space-3) 0 0; font-size: var(--font-size-xs); color: var(--gray-600); max-width: none; }
.busca__recentes a {
    font-family: var(--font-mono);
    margin-right: var(--space-3);
    border-bottom: 1px solid currentColor;
}

/* --- Atalhos -------------------------------------------------------------- */

.atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-3);
    max-width: 620px;
}

.atalho {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--space-4);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: var(--radius-md);
    color: #fff;
    backdrop-filter: blur(6px);
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.atalho:hover { background: rgba(255,255,255,.2); color: #fff; text-decoration: none; transform: translateY(-2px); }
.atalho i { font-size: 1.2rem; color: var(--marca-laranja-claro); margin-bottom: var(--space-2); }
.atalho strong { font-size: var(--font-size-sm); font-weight: var(--peso-enfase); }
.atalho span   { font-size: var(--font-size-xs); color: rgba(255,255,255,.82); }

/* --- Cobertura ------------------------------------------------------------ */

.cobertura__grade {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr);
    gap: var(--gap-bloco);
    align-items: center;
}

.estados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    list-style: none; margin: 0; padding: 0;
}

.estado {
    margin: 0;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-md);
    overflow: hidden;
}
/* O padding vive no link, não no <li>: assim a área clicável é o cartão
   inteiro, e não só as duas linhas de texto. */
.estado a {
    display: block;
    padding: var(--space-4);
    text-decoration: none;
}
.estado a:hover { text-decoration: none; }
/* A sigla do estado é a informação que a pessoa varre com o olho. Em laranja
   ela vira o ponto de fixação de cada cartão — 5,55:1 sobre o petróleo
   escuro. */
.estado__uf {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: var(--peso-titulo);
    line-height: var(--lh-rotulo);
    color: var(--marca-laranja);
}
.estado__nome { display: block; font-size: var(--font-size-sm); color: #fff; margin-top: 2px; }

/* O cartão ganha o filete laranja no topo em vez da borda mentolada em
   volta: a borda inteira competia com o próprio conteúdo. */
.estado {
    border-top: 3px solid var(--marca-laranja-linha);
    transition: background var(--transition-fast), border-color var(--transition-fast),
                transform var(--transition-fast);
}
.estado:hover {
    background: rgba(255, 255, 255, .13);
    border-top-color: var(--marca-laranja);
    transform: translateY(-2px);
}

@media (max-width: 880px) {
    .cobertura__grade { grid-template-columns: 1fr; }
}

/* --- Serviços ------------------------------------------------------------- */

.servico {
    padding: var(--space-6);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    text-align: left;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.servico:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--gray-300); }

.servico__icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    background: var(--info-light);
    color: var(--primary-color);
    font-size: 1.35rem;
    margin-bottom: var(--space-4);
}

.servico h3 { margin-bottom: var(--space-2); }
.servico p  { font-size: var(--font-size-sm); color: var(--gray-600); margin-bottom: var(--space-4); }
.servico__link { font-size: var(--font-size-sm); font-weight: var(--peso-enfase); }
.servico__link i { font-size: .78rem; transition: transform var(--transition-fast); display: inline-block; }
.servico:hover .servico__link i { transform: translateX(3px); }


/* --- Passos --------------------------------------------------------------- */

.passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    list-style: none; margin: 0; padding: 0;
    counter-reset: passo;
}

.passo { margin: 0; position: relative; padding-top: var(--space-5); border-top: 3px solid var(--gray-200); }
.passo:first-child { border-top-color: var(--primary-color); }

.passo__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: var(--radius-full);
    background: var(--primary-color); color: #fff;
    font-weight: var(--peso-enfase);
    line-height: var(--lh-rotulo);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-3);
}

.passo h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.passo p  { font-size: var(--font-size-sm); color: var(--gray-600); margin: 0; }

/* --- Sobre ---------------------------------------------------------------- */

.sobre__grade {
    display: grid;
    grid-template-columns: minmax(300px, 1.1fr) minmax(280px, 1fr);
    gap: var(--gap-bloco);
    align-items: center;
}

.sobre__foto img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}
.numero strong {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: var(--peso-titulo);
    line-height: var(--lh-rotulo);
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
}
.numero span { display: block; font-size: var(--font-size-xs); color: var(--gray-600); margin-top: 4px; }

/* Um destaque em PALAVRA, e não em número, no corpo de 40px do numeral fica
   comprido e desalinha os três cartões. Um degrau abaixo iguala a altura
   visual sem perder o peso. Vem DEPOIS de `.numero strong` porque as duas
   regras têm a mesma especificidade — só a ordem decide. */
.numero--texto strong { font-size: var(--font-size-2xl); }

@media (max-width: 880px) {
    .sobre__grade { grid-template-columns: 1fr; }
    .sobre__foto { order: -1; }
}

/* --- FAQ ------------------------------------------------------------------ */

.container--estreito { max-width: 800px; }

.faq {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
}
.faq summary {
    cursor: pointer;
    font-weight: var(--peso-enfase);
    color: var(--gray-900);
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.3rem; color: var(--gray-500); font-weight: 400; line-height: 1; flex: 0 0 auto; }
.faq[open] summary::after { content: '−'; }
.faq p { margin: var(--space-4) 0 0; color: var(--gray-600); font-size: var(--font-size-sm); }

/* O ícone da pergunta. Numa pilha de seis perguntas fechadas, todas com o
   mesmo peso e o mesmo comprimento, não há por onde o olho entrar; o ícone
   dá a cada uma um assunto reconhecível antes da leitura.

   Ele ocupa uma coluna fixa para que as perguntas fiquem alinhadas entre si
   — ícone de largura variável desalinharia o texto linha a linha. */
.faq__icone {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: var(--marca-laranja-veu);
    color: var(--marca-laranja-forte);
    font-size: .95rem;
}
.faq__pergunta { flex: 1 1 auto; }
.faq summary { gap: var(--space-3); }
.faq[open] .faq__icone { background: var(--marca-laranja); color: var(--gray-900); }

/* A resposta alinha com a pergunta, e não com o ícone: o recuo é a largura
   do ícone mais o intervalo. */
.faq p { padding-left: calc(38px + var(--space-3)); }

@media (max-width: 560px) {
    .faq__icone { width: 32px; height: 32px; font-size: .85rem; }
    .faq p { padding-left: 0; }
}

/* --- Chamada final -------------------------------------------------------- */

/* O `padding-bottom: 0` colava o cartão "Precisa enviar uma carga?" na
   emenda com o rodapé: o cartão tem fundo próprio e ficava sem respiro
   nenhum embaixo, como se tivesse sido cortado. A seção mantém o padding
   normal. */
.chamada-final { padding-bottom: var(--gap-secao); }

.chamada {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6); flex-wrap: wrap;
    padding: var(--space-8);
    background: linear-gradient(135deg, var(--info-light), var(--gray-50));
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}
.chamada h2 { margin-bottom: var(--space-2); }
.chamada p  { margin: 0; color: var(--gray-600); }

@media (max-width: 720px) {
    .chamada { flex-direction: column; align-items: stretch; text-align: center; }
    .chamada .acoes { justify-content: center; }
    .busca__form .botao { width: 100%; }
}

/* =============================================================================
   Seções sobre fotografia

   As fotos da operação — servicos, rastreamento, arecliente e contato —
   existiam no projeto e ficaram sem uso na primeira versão desta home. Aqui
   elas voltam como fundo de seção, com um véu que garante contraste do texto
   independentemente do que aparece na foto.

   `background-attachment: fixed` fica fora de propósito: em celular ele
   força repaint a cada quadro da rolagem e é a principal causa de travamento
   em página com fundo fotográfico.
   ============================================================================= */

.secao--foto,
.secao--foto p,
.secao--foto .subtitulo { color: var(--gray-200); }
.secao--foto h2, .secao--foto h3 { color: #fff; }

/* O acento sobre foto era a menta. Menta sobre o véu de petróleo é a mesma
   família fria: a seção inteira lia como um bloco monocromático e a foto
   parecia lavada. O laranja da marca é a única cor do sistema que corta esse
   azul — 6,62:1 na variante clara sobre o véu. */
.secao--foto .eyebrow { color: var(--marca-laranja-claro); }

/* Cartões sobre a foto: vidro, não branco sólido — o branco apagaria a
   fotografia inteira e a seção perderia o motivo de existir. */
.secao--foto .servico {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
}
.secao--foto .servico:hover {
    background: rgba(255, 255, 255, .16);
    border-color: var(--marca-laranja);
}
.secao--foto .servico h3 { color: #fff; }
.secao--foto .servico p  { color: rgba(255, 255, 255, .86); }
.secao--foto .servico__icone { background: var(--marca-laranja-veu); color: var(--marca-laranja-claro); }
.secao--foto .servico__link  { color: var(--marca-laranja-claro); }

.secao--foto .passo { border-top-color: rgba(255, 255, 255, .22); }
.secao--foto .passo:first-child { border-top-color: var(--marca-laranja); }
.secao--foto .passo h3 { color: #fff; }
.secao--foto .passo p  { color: rgba(255, 255, 255, .84); }
/* O numeral é PREENCHIMENTO laranja com texto quase-preto — 7,68:1. Como
   texto claro sobre laranja ele reprovaria. */
.secao--foto .passo__num { background: var(--marca-laranja); color: var(--gray-900); }

.chamada--sobre-foto {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
}
.chamada--sobre-foto h2 { color: #fff; }
.chamada--sobre-foto p  { color: rgba(255, 255, 255, .88); }

/* As imagens em si vivem na tabela `[data-foto]` de base.css: a capa das
   páginas internas usa exatamente as mesmas seis fotos, e mantê-las aqui
   obrigava a repetir os blocos de `image-set()` num arquivo que aquelas
   páginas nem sempre carregam. */

/* O `.botao--secundario` é petróleo sobre transparente — correto no branco,
   ilegível sobre o véu escuro da seção fotográfica (1,64:1). Sobre foto ele
   assume a variante clara. */
.secao--foto .botao--secundario {
    color: #fff;
    border-color: rgba(255, 255, 255, .65);
}
.secao--foto .botao--secundario:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: #fff;
}

/* Componentes que agora vivem sobre foto */
.secao--foto .numero strong { color: var(--marca-laranja-claro); }
.secao--foto .numero span   { color: rgba(255, 255, 255, .82); }

.secao--foto .faq {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
}
.secao--foto .faq summary { color: #fff; }
.secao--foto .faq summary::after { color: rgba(255, 255, 255, .7); }
.secao--foto .faq p { color: rgba(255, 255, 255, .86); }

/* Sobre a foto o ícone inverte: o laranja escuro (--marca-laranja-forte) foi
   calibrado para fundo claro e daria 1,39:1 aqui. */
.secao--foto .faq__icone { background: var(--marca-laranja-veu); color: var(--marca-laranja-claro); }
.secao--foto .faq[open] .faq__icone { background: var(--marca-laranja); color: var(--gray-900); }

.secao--foto .sobre__foto img {
    border: 1px solid rgba(255, 255, 255, .2);
}