/* ================================================================
   Hotsite Atitus — estilos exclusivos (Hero + Rodapé provisórios)

   Só o que NÃO vem do design system do portal. Tudo aqui usa os tokens
   do design system (--color-*, --space-*, --radius-*, --text-*,
   --font-heading) para manter a identidade visual do novo portal.
   Hero e rodapé são provisórios: a estrutura está pronta para receber
   o design/conteúdo definitivo depois.
   ================================================================ */

/* ── Base do hotsite ─────────────────────────────────────────── */
.hotsite-main {
    overflow: hidden;
}

/* ================================================================
   CABEÇALHO — barra clara em posição sticky

   No portal o .lp-header é fixed/transparente sobreposto ao hero e vira
   "glass" escuro ao rolar (via JS). No hotsite ele vira uma barra clara
   sticky (em fluxo), com logo/links escuros e um CTA primário que
   contrasta no fundo branco.
   ================================================================ */
.lp-header {
    position: sticky;
    top: 0;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    /* Altura total 101px = borda 8px + logo 58px + 17.5px de padding em cima/embaixo */
    padding: 17.5px 0;
    /* Tarja decorativa no topo (mesma do portal, aqui com 8px na cor primária).
       Como o header é sticky, vai como border-top p/ acompanhar a barra. */
    border-top: 8px solid var(--color-primary);
}

/* Neutraliza o estado "scrolled" (glass escuro) que o LandingPage.js aplica:
   mantém a barra clara, só reforça a sombra. */
.lp-header--scrolled {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    padding: .5rem 0;
}

/* Logo escuro (remove o filtro que o deixava branco p/ o hero) */
.lp-header__logo {
    filter: none;
    width: auto;
    height: 35px;
    aspect-ratio: 114 / 35;
    transition: all 400ms ease;
}

@media screen and (min-width: 768px) {
    .lp-header__logo {
        height: 58px;
    }
}

/* Links escuros, com hover na primária */
.lp-header__link {
    color: var(--color-dark);
}

.lp-header__link:hover,
.lp-header__link:focus-visible {
    color: var(--color-primary);
    opacity: 1;
}

/* CTA "Acessar site" — realce da microinteração no hover */
.lp-header__acessar {
    font-weight: 600;
}

/* ================================================================
   Ajustes de blocos reaproveitados
   ================================================================ */
/* Título das listagens: capa o topo do clamp em 40px (mantém o
   responsivo, só reduz o teto que era --text-5xl). */
.bloco-listagem__titulo {
    font-size: clamp(var(--text-3xl), 4vw, 40px);
}

/* ── FAQ: faixa com fundo claro + título na primária ── */
.bloco--perguntasfrequentes {
    background: #F6F9F8;
    padding: 6rem 0;
}

/* Neutraliza a margem interna do .bloco-faq (a faixa usa o padding acima) */
.bloco--perguntasfrequentes .bloco-faq {
    margin: 0;
}

/* Ícone hashtag 85x85 acima do título (mesmo tratamento dos outros
   blocos: currentColor na cor secundária de marca). */
.bloco-faq__icone {
    display: block;
    width: 85px;
    max-width: 100%;
    margin-bottom: 1rem;
    color: var(--bloco-secundaria);
}

.bloco-faq__icone svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Título "Perguntas frequentes": Reaktif Bold, na cor primária,
   clamp 32px→88px, line-height 75px. */
.bloco--perguntasfrequentes .bloco-faq__titulo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(32px, 6vw, 88px);
    line-height: 75px;
    letter-spacing: 0;
    color: var(--color-primary);
}

/* ================================================================
   BLOCO duas colunas de texto (exclusivo do hotsite)
   Esquerda: ícone + título + subtítulo · Direita: texto corrido.
   Reaproveita ícone-diamante e tipografia dos blocos do portal.
   ================================================================ */
.bloco-textocolunas__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.bloco-textocolunas__icone {
    display: block;
    width: 145px;
    max-width: 100%;
    margin-bottom: var(--space-4);
    color: var(--bloco-secundaria);
}

.bloco-textocolunas__icone svg {
    display: block;
    width: 100%;
    height: auto;
}

.bloco-textocolunas__titulo {
    font-family: var(--font-heading);
    /* Reaktif Bold, clamp 32px→56px, line-height 100%, sem letter-spacing */
    font-weight: 700;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-dark);
    margin: 0 0 var(--space-4);
}

.bloco-textocolunas__subtitulo {
    font-family: var(--font-primary);
    /* Inter Regular, clamp 20px→32px, line-height 100%, sem letter-spacing */
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 32px);
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-dark);
    margin: 0;
}

/* Trechos destacados do subtítulo: cor primária + bold */
.bloco-textocolunas__subtitulo .destaque {
    color: var(--color-primary);
    font-weight: 700;
}

.bloco-textocolunas__texto p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-content-text, #444);
    margin: 0 0 var(--space-4);
}

.bloco-textocolunas__texto p:last-child {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .bloco-textocolunas__grid {
        /* Coluna esquerda mais estreita (máx 597px); direita ocupa o resto */
        grid-template-columns: minmax(0, 597px) 50%;
        gap: var(--space-16);
        align-items: start;
        justify-content: space-between;
    }
}

/* ================================================================
   HERO — imagem no container-ul com a proporção do banner da home
   (280/420 mobile · 280/340 ≥567px · 1728/720 ≥992px) e o
   "ATITUS" + slogan centralizados sobre a imagem.
   ================================================================ */
.hotsite-hero {
    padding-top: var(--space-6);
}

.hotsite-hero__banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 280 / 420;
}

.hotsite-hero__banner > picture,
.hotsite-hero__banner picture > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Escurecimento p/ legibilidade do texto branco */
.hotsite-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45));
}

.hotsite-hero__conteudo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: var(--space-6);
}

.hotsite-hero__marca {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    font-size: clamp(40px, 8vw, 72px);
}

/* Marca em SVG (atitus.svg) no lugar do texto */
.hotsite-hero__marca img {
    display: block;
    width: clamp(142px, 42vw, 257px);
    height: auto;
    
}

.hotsite-hero__slogan {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
    margin: var(--space-3) 0 0;
    font-size: clamp(1.125rem, 2.6vw, 2rem);
}

@media (min-width: 567px) {
    .hotsite-hero__banner {
        aspect-ratio: 280 / 340;
    }
}

@media (min-width: 992px) {
    .hotsite-hero__banner {
        aspect-ratio: 1728 / 720;
    }
}

/* ================================================================
   RODAPÉ — fundo accent, 3 colunas (logo | contato+redes | endereço)
   ================================================================ */
.hotsite-footer {
    background: var(--color-primary-light);
    color: var(--color-dark);
    /* Altura total 185px no desktop = logo 87px + 49px de padding em cima/embaixo */
    padding: 49px 0;
    margin-top: var(--space-16);
}

.hotsite-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-8);
}

/* ── Coluna 1: logo ── */
.hotsite-footer__brand img {
    height: 87px;
    width: auto;
}

/* ── Coluna 2: contato + redes ── */
.hotsite-footer__contato {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-dark);
}

.hotsite-footer__rotulo {
    font-family: var(--font-primary);
    /* Inter Regular 16px, line-height 100%, sem letter-spacing */
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
}

.hotsite-footer__whats {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-dark);
    text-decoration: none;
    /* Inter Regular 20px, line-height 100%, sem letter-spacing */
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    transition: color .2s ease;
}

.hotsite-footer__whats:hover,
.hotsite-footer__whats:focus-visible {
    color: var(--color-primary);
}

/* Ícones = SVGs do rodapé do portal (currentColor), sem fundo, na primária.
   WhatsApp 34x34, redes sociais 40x40. */
.hotsite-footer__whats-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

/* Divisor "|" entre contato e redes */
.hotsite-footer__divisor {
    width: 1px;
    height: 20px;
    background: rgba(38, 38, 38, .35);
    margin: 0 var(--space-2);
}

.hotsite-footer__social {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.hotsite-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: color .2s ease, transform .2s ease;
}

.hotsite-footer__social a:hover,
.hotsite-footer__social a:focus-visible {
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* ── Coluna 3: endereço / copyright ── */
.hotsite-footer__end {
    margin: 0;
    font-style: normal;
    /* Inter Regular 16px, line-height 100%, sem letter-spacing */
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-dark);
}

@media (min-width: 992px) {
    .hotsite-footer__grid {
        grid-template-columns: auto 1fr auto;
        justify-items: stretch;
        align-items: center;
        text-align: left;
        gap: var(--space-12);
    }

    .hotsite-footer__end {
        text-align: right;
    }
}

/* ================================================================
   Cabeçalho de seção da Linha do Tempo (a versão de página usa a capa;
   aqui damos um título próprio, no padrão .titulo-secao do portal)
   ================================================================ */
.hotsite-secao-titulo {
    text-align: center;
    margin-bottom: var(--space-10);
}

@media screen and (min-width: 576px) {
    .bloco-ti-split__grid {
        border-radius: var(--radius-xl);
        overflow: hidden;
    }
}