/* ============================================================================
   PAGE HEADER - cabecalho de pagina publica (H1 descritivo + apoio)
   ============================================================================
   Usado por /projetos/ e /auto-orcamento/ para dar a cada pagina um H1 proprio
   (antes o unico <h1> dessas paginas era o logo da navbar).

   Duas formas de usar:

   1. Solto, antes do primeiro bloco de conteudo (ex.: /projetos/):
        <header class="page-hero"> ... </header>
      Ja reserva o espaco do navbar flutuante. Nesse caso, ZERE o padding-top
      do bloco seguinte, senao o espaco do navbar fica reservado duas vezes.

   2. Dentro de um container que JA reserva o espaco do navbar (ex.: o
      <main class="main-container"> do /auto-orcamento/):
        <header class="page-hero is-inline"> ... </header>
      O modificador remove o padding proprio e herda a largura do container.
   ========================================================================== */

.page-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 128px 24px 20px;
    position: relative;
    z-index: 2;
}

.page-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: rgba(0, 212, 255, 0.75);
    margin-bottom: 10px;
}

.page-hero .eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00D4FF;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
}

.page-hero h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.3;
}

.page-hero h1 span {
    color: #00D4FF;
}

.page-hero p {
    max-width: 74ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Dentro de um container que ja reserva o espaco do navbar.
   O `margin: 0` e OBRIGATORIO aqui: se o container pai for flex (o
   .main-container do /auto-orcamento/ vira `display:flex` acima de 1025px), a
   margem `auto` cancela o stretch e o cabecalho encolhe e centraliza, saindo do
   alinhamento do resto da pagina. */
.page-hero.is-inline {
    max-width: none;
    margin: 0;
    padding: 0 0 22px;
}

@media (max-width: 768px) {
    .page-hero { padding-top: 96px; }
    .page-hero.is-inline { padding-top: 0; }
}

@media (max-width: 480px) {
    .page-hero { padding-top: 86px; padding-left: 15px; padding-right: 15px; }
    .page-hero.is-inline { padding-top: 0; padding-left: 0; padding-right: 0; }
    .page-hero p { font-size: 0.9rem; }
}