/* =============================================================================
   Páginas públicas de serviço — Uheya
   =============================================================================
   Folha única, sem framework e sem JavaScript nenhum. As páginas que ela veste
   são as que têm de aparecer no Google e abrir depressa num telemóvel em rede
   móvel angolana — cada quilobyte aqui é um quilobyte que atrasa o LCP.

   Padrão seguido: "Trust & Authority + Conversion" — credibilidade primeiro,
   preço à vista, um só caminho para a acção. Minimalismo com tipografia
   grande e muito espaço, sem ornamento.

   Tipos de letra: os do sistema, de propósito. Duas famílias do Google Fonts
   custam duas ligações a um terceiro servidor antes de o texto aparecer.

   A cor vem da marca (#004349, amostrada do logótipo). Os pares de texto
   foram medidos: nenhum abaixo de 4.5:1.
   ========================================================================== */

:root{
    --marca:        #004349;
    --marca-forte:  #002E33;
    --marca-ligacao:#0A6169;
    --marca-tenue:  #E8F0F0;
    --marca-fundo:  #F3F7F7;

    --tinta:        #0B1F21;
    --tinta-suave:  #4A5C5E;
    --superficie:   #FFFFFF;
    --borda:        #DAE4E4;
    --preco:        #8A4B12;

    --raio:      14px;
    --raio-gr:   22px;
    --largura:   1120px;

    --e1: 0.5rem;
    --e2: 1rem;
    --e3: 1.5rem;
    --e4: 2.5rem;
    --e5: 4rem;
    --e6: 6rem;
}

*,*::before,*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.uheya-site{
    margin: 0;
    background: var(--superficie);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.uheya-site img{ max-width: 100%; height: auto; }

.env{ width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--e3); }

/* --- Cabeçalho -------------------------------------------------------- */

.topo{
    border-bottom: 1px solid var(--borda);
    background: var(--superficie);
    position: sticky; top: 0; z-index: 20;
}
.topo .env{ display: flex; align-items: center; gap: var(--e3); min-height: 72px; }
.topo__logo img{ max-height: 40px; width: auto; display: block; }
.topo__logo{ display: flex; align-items: center; text-decoration: none; color: var(--marca); font-weight: 700; font-size: 1.25rem; }
.topo nav{ margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.topo nav a{
    color: var(--tinta-suave); text-decoration: none; font-size: 0.95rem;
    padding: 0.5rem 0.25rem; min-height: 44px; display: inline-flex; align-items: center;
}
.topo nav a:hover{ color: var(--marca-ligacao); }

/* --- Botões ----------------------------------------------------------- */

.btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 48px; padding: 0.75rem 1.5rem;
    border-radius: 999px; border: 1px solid transparent;
    font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--principal{ background: var(--marca); color: #fff; }
.btn--principal:hover{ background: var(--marca-forte); }
.btn--contorno{ background: transparent; color: var(--marca); border-color: var(--borda); }
.btn--contorno:hover{ border-color: var(--marca); background: var(--marca-tenue); }

.uheya-site a:focus-visible,
.uheya-site button:focus-visible{ outline: 3px solid var(--marca-ligacao); outline-offset: 2px; }

/* --- Migalhas --------------------------------------------------------- */

.migalhas{ font-size: 0.875rem; color: var(--tinta-suave); padding-top: var(--e3); }
.migalhas ol{ list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.migalhas li:not(:last-child)::after{ content: "›"; margin-left: 0.5rem; color: var(--borda); }
.migalhas a{ color: var(--tinta-suave); }

/* --- Herói ------------------------------------------------------------ */

.heroi{ padding: var(--e4) 0 var(--e5); }
.heroi__etiqueta{
    display: inline-block; margin-bottom: var(--e2);
    background: var(--marca-tenue); color: var(--marca);
    border-radius: 999px; padding: 0.35rem 0.9rem;
    font-size: 0.8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.heroi h1{
    margin: 0 0 var(--e2);
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    max-width: 20ch;
}
.heroi__lead{ font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--tinta-suave); max-width: 62ch; margin: 0 0 var(--e3); }
.heroi__accoes{ display: flex; flex-wrap: wrap; gap: var(--e2); }
.heroi__desde{
    margin-top: var(--e3); font-size: 1rem; color: var(--tinta-suave);
}
.heroi__desde strong{ color: var(--preco); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

/* --- Secções ---------------------------------------------------------- */

.seccao{ padding: var(--e5) 0; border-top: 1px solid var(--borda); }
.seccao--tenue{ background: var(--marca-fundo); }
.seccao h2{ font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--e2); font-weight: 800; }
.seccao h3{ font-size: 1.15rem; margin: 0 0 0.5rem; font-weight: 700; }
.seccao p{ color: var(--tinta-suave); max-width: 70ch; }

/* --- Grelhas e cartões ------------------------------------------------ */

.grelha{ display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.cartao{
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-gr);
    padding: var(--e3);
    display: flex; flex-direction: column; gap: 0.5rem;
}
a.cartao{ text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
a.cartao:hover{ border-color: var(--marca); }
.cartao__preco{ color: var(--preco); font-weight: 700; }
.cartao__seta{ margin-top: auto; padding-top: var(--e2); color: var(--marca-ligacao); font-weight: 600; font-size: 0.95rem; }

/* --- Tabela de preços ------------------------------------------------- */

.tabela-env{ overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-gr); }
table.precos{ width: 100%; border-collapse: collapse; min-width: 560px; background: var(--superficie); }
table.precos caption{ text-align: left; padding: var(--e3) var(--e3) 0; color: var(--tinta-suave); font-size: 0.9rem; caption-side: bottom; }
table.precos th, table.precos td{ padding: 0.9rem var(--e3); text-align: left; border-bottom: 1px solid var(--borda); }
table.precos thead th{ background: var(--marca-tenue); color: var(--marca-forte); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .04em; }
table.precos tbody tr:last-child td{ border-bottom: 0; }
table.precos td.valor{ color: var(--preco); font-weight: 700; white-space: nowrap; }
/* Também no <th>: a descrição da viatura vive na célula de cabeçalho da linha
   e, sem isto, cola-se ao nome e lê-se como uma frase só. */
table.precos small{ display: block; color: var(--tinta-suave); font-weight: 400; font-size: 0.85rem; line-height: 1.45; }

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

.passos{ counter-reset: passo; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; padding: 0; margin: 0; }
.passos li{ position: relative; padding-top: var(--e4); }
.passos li::before{
    counter-increment: passo; content: counter(passo);
    position: absolute; top: 0; left: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--marca); color: #fff;
    display: grid; place-items: center; font-weight: 700;
}

/* --- Lista com marca -------------------------------------------------- */

.lista-marca{ list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.lista-marca li{ position: relative; padding-left: 1.75rem; color: var(--tinta-suave); }
.lista-marca li::before{
    content: ""; position: absolute; left: 0; top: 0.6em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--marca);
}

/* --- Perguntas -------------------------------------------------------- */

.faq{ display: grid; gap: 0; border: 1px solid var(--borda); border-radius: var(--raio-gr); overflow: hidden; background: var(--superficie); }
.faq details{ border-bottom: 1px solid var(--borda); }
.faq details:last-child{ border-bottom: 0; }
.faq summary{
    cursor: pointer; list-style: none;
    padding: var(--e3); font-weight: 600; min-height: 44px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; color: var(--marca); font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after{ content: "–"; }
.faq details > p{ margin: 0; padding: 0 var(--e3) var(--e3); }

/* --- Nuvem de ligações ------------------------------------------------ */

.ligacoes{ display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0; list-style: none; }
.ligacoes a{
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0.5rem 1rem; border: 1px solid var(--borda); border-radius: 999px;
    color: var(--marca); text-decoration: none; font-size: 0.95rem; background: var(--superficie);
}
.ligacoes a:hover{ border-color: var(--marca); background: var(--marca-tenue); }

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

.chamada{ background: var(--marca); color: #fff; border-radius: var(--raio-gr); padding: var(--e4); }
.chamada h2{ color: #fff; margin-top: 0; }
.chamada p{ color: #D6E5E5; max-width: 60ch; }
.chamada .btn--principal{ background: #fff; color: var(--marca-forte); }
.chamada .btn--principal:hover{ background: var(--marca-tenue); }
.chamada .btn--contorno{ color: #fff; border-color: rgba(255,255,255,.5); }
.chamada .btn--contorno:hover{ background: rgba(255,255,255,.12); border-color: #fff; }

/* --- Rodapé ----------------------------------------------------------- */

.rodape{ background: var(--marca-forte); color: #C7D8D9; padding: var(--e5) 0 var(--e3); margin-top: var(--e5); }
.rodape a{ color: #E4EEEE; text-decoration: none; }
.rodape a:hover{ text-decoration: underline; }
.rodape__grelha{ display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rodape h2{ font-size: 0.85rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin: 0 0 var(--e2); }
.rodape ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; font-size: 0.95rem; }
.rodape__fim{ border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--e4); padding-top: var(--e3); font-size: 0.875rem; }
.rodape img{ max-height: 44px; width: auto; margin-bottom: var(--e2); }

@media (max-width: 640px){
    .topo nav a.esconde-tel{ display: none; }
    .seccao{ padding: var(--e4) 0; }

    /* Medido a 390px: o botão do cabeçalho partia em duas linhas e transbordava
       a faixa. Encolhe-se em vez de se esconder — é a porta para a app. */
    .topo .env{ gap: var(--e2); padding-inline: var(--e2); }
    .topo nav{ gap: var(--e2); }
    .topo__logo img{ max-height: 32px; }
    .topo nav .btn{ padding: 0.5rem 0.9rem; font-size: 0.9rem; white-space: nowrap; }

    table.precos{ min-width: 460px; }
    table.precos th, table.precos td{ padding: 0.75rem var(--e2); }
}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}