/* ==============================
   1. Fonte personalizada
============================== */
@font-face {
    font-family: "GloboNovaRegular";
    src: url("../fonts/GlobotipoCorporativaTextos-Regular.ttf") format("truetype");
}

/* ==============================
     2. Reset e variáveis globais
  ============================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --header-h: 66px;
    /* altura do header */
    --hero-radius: 24px;
    /* raio para bordas arredondadas (se precisar) */
    --brand-grad: linear-gradient(90deg, #05A6FF 0%, #8800F8 100%);
    /* NOVO: offsets horizontais para manter alinhamentos */
    --header-pad-x: 30px;
    /* padding horizontal do header (esq/dir) */
    --logo-offset: 10%;
    /* deslocamento adicional da logo à esquerda */
    --nav-offset: 5%;
    /* deslocamento da navegação à direita */
}

/* ==============================
     3. Estilos gerais
  ============================== */
body {
    background: linear-gradient(to right, #05A6FF 10%, #8800F8);
    padding-top: var(--header-h);
    /* compensa header fixo */
    margin: 0;
    font-family: "GloboNovaRegular", Arial, sans-serif;
    color: #fff;
  
}

/* ==============================
   4. Header fixo (sem mudanças no desktop)
============================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, #05A6FF 10%, #8800F8);
    padding: 30px var(--header-pad-x);
    display: flex;
    justify-content: space-between;
    /* desktop continua com espaçamento */
    align-items: center;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .2);
    z-index: 999;
}

.logo {
    font-family: "GloboNovaRegular", sans-serif;
    font-size: 2rem;
    font-weight: bold;
    margin-left: var(--logo-offset);
}

nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 4vw, 48px);
    margin-right: var(--nav-offset);
}

nav a {
    color: #fff;
    text-decoration: none;
    font-family: "GloboNovaRegular", sans-serif;
}

nav a:hover {
    text-decoration: underline;
}

.logoimg {
    height: 60px;
    margin-left: 10%;
}

/* ==============================
     Mobile (≤480px): tudo centralizado
  ============================== */
@media (max-width: 480px) {

    :root {
        --header-pad-x: 16px;
        --logo-offset: 0px;
        /* sem empurrar a logo */
        --nav-offset: 0px;
        /* sem empurrar a nav */
    }

    header {
        padding: 12px var(--header-pad-x);
        display: flex;
        flex-direction: column;
        /* empilha logo + nav */
        align-items: center;
        /* centraliza horizontalmente */
        justify-content: center;
        /* centraliza verticalmente */
        gap: 8px;
        /* espaço entre logo e nav */
        text-align: center;
    }

    .logo {
        margin-left: 0;
        /* zera offset no mobile */
    }

    .logoimg {
        height: 30px;
        margin: 0 auto 10px;
        /* centraliza a imagem */
        display: block;
        gap: clamp(20px, 4vw, 48px);
    margin-right: var(--nav-offset);
    }

    nav {
        margin: 0;
        /* sem margem direita */
        gap: 14px;
        /* seu valor preferido */
        justify-content: center;
        /* centraliza os links */
    }

    nav a {
        display: inline-block;
        padding: 6px 8px;
        /* melhora toque no mobile */
    }
}


/* ==============================
     5. Seção Hero
  ============================== */
.hero {
    position: relative;
    color: #fff;
    min-height: clamp(380px, 70vh, 560px);
    display: grid;
    align-items: center;
    margin-top: 10%;
    /* padding vertical (topo/baixo) */
    padding-block: clamp(24px, 4vw, 40px);

    /* ALINHAMENTO: início do hero = início da logo
       (logo-offset + padding horizontal do header)
    */
    padding-inline-start: calc(var(--logo-offset) + var(--header-pad-x));

    /* opcional: alinhar o final do hero com a margem da navegação */
    padding-inline-end: calc(var(--nav-offset) + var(--header-pad-x));

    overflow: hidden;
}


/* imagem decorativa de fundo */
.hero__bg {
    position: absolute;
    top: 0;
    right: -1vw;
    bottom: -9vw;
    width: clamp(600px, 48vw, 1000px);
    object-fit: contain;
    object-position: right bottom;
    pointer-events: none;
    z-index: 0;
}


/* Garante que o texto fique acima da arte */
.hero__content {
    position: relative;
    z-index: 1;
}

.hero__content {
    max-width: min(720px, 92vw);
}

/* Título */
.hero__title {
    margin: 0 0 16px;
    line-height: 1.05;
    font-weight: 800;
    font-family: "GloboNovaRegular", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: clamp(28px, 6vw, 56px);
    letter-spacing: -0.02em;
}

.hero__title .hero__line {
    display: block;
}

/* Texto de apoio */
.hero__lead {
    margin: 0 0 22px;
    font-size: clamp(14px, 2.2vw, 18px);
    line-height: 1.5;
    opacity: 0.95;
}

/* Botão com fundo branco */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    border-radius: 4px;
    background-color: #fff;
    /* fundo branco garantido */
    border: none;
    /* sem borda */
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Texto com degradê azul -> roxo */
.btn-ghost__text {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;

    /* fallback: cor sólida caso o browser não suporte background-clip:text */
    color: #5b67ff;
    /* escolha um intermediário do degradê */

    /* aplica degradê no texto quando houver suporte */
    background-image: linear-gradient(90deg, #05A6FF, #8800F8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hover/Active (opcionais) */
.btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.btn-ghost:active {
    transform: translateY(0);
}

/* Responsividade Hero */
@media (max-width: 480px) {
    .hero {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .hero__lead {
        margin-bottom: 18px;
    }

    .hero__bg {
        display: none;
    }
}

/* ==============================
   Seção "Sobre" (About)
============================== */
.about {
    /* alinha com o início da logo (mesmo cálculo do .hero) */
    padding-block: clamp(24px, 5vw, 56px);
    padding-inline-start: calc(var(--logo-offset) + var(--header-pad-x));
    padding-inline-end: calc(var(--nav-offset) + var(--header-pad-x));

    /* card branco sobre o fundo com gradiente */
    background: #fff;
    color: #1b1f23;
    /* texto chapado, escuro */
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    ;
}

/* Grid superior: vídeo (esq) + conteúdo (dir) */
.about__top {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: clamp(16px, 3vw, 28px);
    align-items: start;
}

/* Título e textos (chapados) */
.about__title {
    margin: 4px 0 10px;
    font-size: clamp(36px, 3.2vw, 28px);
    line-height: 1.2;
    font-weight: 400;
    background-image: var(--brand-grad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.about__text {
    margin: 0 0 10px;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.55;
    color: #3a3f47;
    font-weight: 400;
    /* chapado */
    font-family: "GloboNovaRegular", Arial, sans-serif;
}

.about__text--strong {
    font-weight: 700;
    color: #262a31;
}

/* Metadados (data/hora) com placeholders de ícones */
.about__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 12px;
}

.meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;

    /* chip suave */
    color: #1f2630;
    /* chapado */
    font-weight: 600;
    font-size: 0.95rem;
}

/* Placeholder de ícone (pequeno) */
.icon-placeholder {
    inline-size: 28px;
    block-size: 28px;
    border: 2px solid #ff2b2b;
    /* borda vermelha para indicar “virá ícone” */
    border-radius: 6px;
    background: #fff;
    /* caixa branca */
    flex: 0 0 auto;
}

/* Versão grande (benefícios) */
.icon-placeholder--lg {
    inline-size: 52px;
    block-size: 52px;
    border-radius: 10px;
}

/* Mídia / Vídeo */
.about__media {
    position: relative;
}

.video-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #cfd6e4;
    /* cor neutra enquanto o vídeo não entra */
    aspect-ratio: 16 / 9;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    width: 100%;
    height: 100%;
    display: block;
}

.video-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}


/* Subtítulo central */
.about__why-title {
    margin: clamp(20px, 4vw, 36px) 0 clamp(10px, 2.5vw, 20px);
    text-align: center;
    font-size: clamp(36px, 2.6vw, 22px);
    margin-top: 5%;
    margin-bottom: 5%;
    background-image: var(--brand-grad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-weight: 800;
}

/* Benefícios (3 colunas no desktop) */
.benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: clamp(16px, 3vw, 28px);
    align-items: start;
}

/* Cada benefício agora empilha: número em cima, depois (ícone + título), e por último o texto */
.benefit {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 12px;
    align-items: start;
}

/* Tile do número — centralizado no topo */
.benefit__number-tile {
    display: grid;
    place-items: center;
    inline-size: 102px;
    block-size: 102px;
    border-radius: 16px;
    background: #f2f4f8;
    margin-inline: auto;
    /* centraliza o número acima */
}

.benefit__number-tile>span {
    font-size: 72px;
    font-weight: 900;
    color: #5b67ff;
    /* cor chapada */
}

/* Bloco do ícone + título em uma única linha */
.benefit__body {
    width: 100%;
    display: grid;
    grid-template-columns: 52px 1fr;
    /* ícone | título */
    gap: 12px;
    align-items: center;
}

/* Placeholder de ícone (já existente) — mantém */
.icon-placeholder--lg {
    inline-size: 52px;
    block-size: 52px;
    border-radius: 10px;
    border: 2px solid #ff2b2b;
    /* borda vermelha */
    background: #fff;
    /* caixa branca */
}

/* Título ao lado do ícone */
.benefit__title {
    grid-column: 2;
    margin: 0;
    font-size: 1.5rem;
    color: #2a2f37;
    /* chapado */
    font-weight: 400;
    margin-left: 20px;
}

.benefit__img {
    height: 70px;
    width: 70px;

}

/* Texto por último, ocupando toda a largura abaixo */
.benefit__text {
    grid-column: 1 / -1;
    /* ocupa as 2 colunas */
    margin: 0;
    color: #3a3f47;
    /* chapado */
    font-size: 0.97rem;
    line-height: 1.5;
    text-align: center;
}

.benefit__text2 {
    grid-column: 1 / -1;
    /* ocupa as 2 colunas */
    margin: 0;
    color: #3a3f47;
    /* chapado */
    font-size: 0.7rem;
    line-height: 1.5;
    text-align: center;
}

.benefit__text3 {
    grid-column: 1 / -1;
    /* ocupa as 2 colunas */
    margin: 0;
    color: #3a3f47;
    /* chapado */
    font-size: 0.7rem;
    line-height: 1.5;

}

/* Responsividade */
@media (max-width: 900px) {
    .benefits {
        grid-template-columns: 1fr;
    }

    .benefit__number-tile {
        inline-size: 72px;
        block-size: 72px;
        border-radius: 14px;
    }

    .benefit__body {
        grid-template-columns: 48px 1fr;
        /* um pouco menor no mobile */
    }
}

/* CTA centralizado */
.about__cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(16px, 4vw, 28px);
}

/* Responsividade */
@media (max-width: 900px) {
    .about__top {
        grid-template-columns: 1fr;
    }

    .about__media {
        order: -1;
        /* vídeo primeiro no mobile, se preferir troque para 0 */
    }

    .benefits {
        grid-template-columns: 1fr;
    }

    .benefit {
        grid-template-columns: 72px 1fr;
    }

    .benefit__number-tile {
        inline-size: 72px;
        block-size: 72px;
        border-radius: 14px;
    }
}

/* Integra com seu botão já ajustado (fundo branco + texto em degradê via span) */
.btn-ghost2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    border-radius: 4px;
    background: linear-gradient(to right, #05A6FF 10%, #8800F8);
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-ghost__text2 {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    /* fallback chapado */
}

.btn-ghost2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.btn-ghost2:active {
    transform: translateY(0);
}

/* ==============================
   Seção Programação
============================== */
.schedule {
    /* bloco vertical e alinhamento inicial igual ao hero/about */
    padding-block: clamp(28px, 6vw, 60px);
}

.schedule__inner {
    padding-inline-start: calc(var(--logo-offset) + var(--header-pad-x));
    padding-inline-end: calc(var(--nav-offset) + var(--header-pad-x));
    color: #fff;
    /* textos chapados (brancos) sobre o gradiente do body */
}

.schedule__title {
    margin: 0 0 clamp(18px, 3vw, 28px);
    font-size: clamp(22px, 3.6vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    /* branco, como no mock */
    /* Se quiser o título em degradê, descomente as linhas abaixo:
    background-image: var(--brand-grad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    */
}

/* Grid de 2 colunas (Painéis | Cronograma) */
.schedule__grid {
    display: grid;
    grid-template-columns: 1.15fr 0fr;
    /* leve destaque para Painéis */
    gap: clamp(20px, 4vw, 48px);
    align-items: start;
}

/* Subtítulos das colunas */
.schedule__subtitle {

    margin: 0;
    /* Remove margem inferior para alinhar melhor */
    font-weight: 800;
    color: #fff;
    font-size: clamp(32px, 2.4vw, 20px);
}

.schedule__item {

    display: flex;
    align-items: center;
    /* Alinha verticalmente */
    gap: 10px;
    /* Espaço entre a imagem e o texto */

}

.schedule__item img {

    display: block;

    width: auto;

}

.online-access img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== Painéis (lista com ícones placeholders) ===== */

.panels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    /* espaço entre os itens */
    margin-top: 20px;
}

.panel-item {
    display: grid;
    grid-template-columns: auto 1fr;
    /* ícone + conteúdo */
    gap: 12px 16px;
    align-items: start;
    color: var(--white);
    margin-bottom: 20px;
}

/* Placeholder de ícone (quadradinho arredondado) */
.icon-placeholder {
    background-color: var(--white-16);
    border-radius: 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.icon-placeholder--md {
    width: 44px;
    height: 44px;
}

/* Se usar como background-image */
.icon-placeholder--case1 {
    background-image: url('img/icone ads.png');
}

.icon-placeholder--case2 {
    background-image: url('img/icons/case2.svg');
}

.icon-placeholder--case3 {
    background-image: url('img/icons/case3.svg');
}

.icon-placeholder--case4 {
    background-image: url('img/icons/case4.svg');
}

.icon-placeholder--case1,
.icon-placeholder--case2,
.icon-placeholder--case3,
.icon-placeholder--case4 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

/* Conteúdo de texto */
.panel-item__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.panel-item__meta,
.panel-item__desc {
    margin: 2px 0 0 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.panel-item__meta strong,
.panel-item__desc strong {
    font-weight: 700;
}

.panel-item__meta {
    color: var(--white);
}

.panel-item__desc {
    color: var(--white-70);
}

.divider {
    color: var(--white-60);
    margin: 0 .4ch;
}

/* Responsivo */
@media (min-width: 768px) {
    .section-gradient {
        padding: 28px;
    }

    .panels {
        gap: 16px;
    }

    .panel-item__title {
        font-size: 1.05rem;
    }

    .panel-item__meta,
    .panel-item__desc {
        font-size: 1rem;
    }
}

/* ===== Cronograma (timeline) ===== */
/* Container do cronograma: alinhar itens ao conteúdo, sem esticar */
/* Container do cronograma: encolhe para a largura do maior item */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    gap: 10px;

    width: max-content;
    /* largura = maior linha (hora + texto) */
    max-width: 100%;
    /* não ultrapassa o container pai */
    justify-content: start;
    /* alinha ao início */
}

/* Cada linha ocupa 100% da largura definida pelo container (maior linha) */
.timeline__row {
    display: grid;
    grid-template-columns: max-content max-content;
    /* hora | texto medem pelo conteúdo */
    column-gap: 12px;

    width: 100%;
    /* todas as linhas ficam com a mesma largura */
    padding-block: 10px;

    /* a borda agora termina exatamente no final do texto mais longo */
    border-bottom: 1px solid #fff;
}

/* Hora não quebra (mantém compacto) */
.timeline__time {
    font-weight: 800;
    color: #fff;
    font-size: clamp(14px, 2.2vw, 16px);
    white-space: nowrap;
}

/* Descrição pode não quebrar no desktop para manter a medida precisa */
.timeline__desc {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(14px, 1.9vw, 16px);
    line-height: 1.45;
    white-space: nowrap;
    /* mantém a linha mais compacta */
    margin-right: 30px;
}

/* Opcional: remova a borda da última linha
  .timeline__row:last-child { border-bottom: none; }
  */

/* Responsividade: em telas estreitas, deixe ocupar a largura toda e permitir quebra */
@media (max-width: 600px) {
    .timeline {
        width: 100%;
        /* agora ocupa toda a largura disponível */
    }

    .timeline__row {
        grid-template-columns: max-content 1fr;
        /* hora fixa + texto flexível */
    }

    .timeline__desc {
        white-space: normal;
        /* permite quebra de linha para caber */
    }
}

/* ==============================
   Seção Online Access
============================== */
.online-access {
    padding-block: clamp(24px, 5vw, 56px);

    /* ALINHAMENTO: igual ao hero */
    padding-inline-start: calc(var(--logo-offset) + var(--header-pad-x));
    padding-inline-end: calc(var(--nav-offset) + var(--header-pad-x));

    background: #fff;
    color: #1b1f23;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}


.online-access__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 4vw, 60px);
    align-items: start;
}

/* Título com gradiente */
.online-access__title {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px;
    background-image: linear-gradient(to right, #05A6FF, #8800F8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.online-access__title span {
    font-weight: 800;
    display: block;
}

/* Ícone + texto lado a lado */
.online-access__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.icon-placeholderfooter {
    flex-shrink: 0;
    /* não deixa diminuir */
    background: #eee;
    /* só pra visualização */
    border-radius: 8px;
    /* se quiser cantos arredondados */
}

.icon-placeholderfooter--lg {
    inline-size: 90px;
    block-size: 90px;
    border-radius: 10px;
    border: 2px solid #ff2b2b;
    /* borda vermelha */
    background: #fff;

}




.online-access__content {
    flex: 1;
}

.online-access__text {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.55;
    color: #3a3f47;
}

.online-access__text strong {
    font-weight: 700;
    color: #000;
}

/* FAQ */
.faq__title {
    font-size: clamp(32px, 2.2vw, 28px);
    margin-bottom: 16px;
    background-image: linear-gradient(to right, #05A6FF, #8800F8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq__item {
    border-radius: 8px;
    background: #f5f5f5;
    overflow: hidden;
}

.faq__item summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 500;
    color: #1b1f23;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq__item summary::after {
    content: "›";
    font-size: 1.2rem;
    transform: rotate(0);
    transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
    transform: rotate(90deg);
}

.faq__item p {
    padding: 0 18px 14px;
    font-size: 0.95rem;
    color: #3a3f47;
}

/* Responsividade */
@media (max-width: 900px) {
    .online-access__container {
        grid-template-columns: 1fr;
    }

    .online-access__row {
        flex-direction: row;
    }
}

/* ==============================
   Footer
============================== */
/* Footer geral */
.footer {
    background: #fff;
    color: #1b1f23;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-block: clamp(1px, 5vw, 30px);
    padding-inline-start: calc(var(--logo-offset) + var(--header-pad-x));
    padding-inline-end: calc(var(--nav-offset) + var(--header-pad-x));
    border-top: 1px solid #ddd;
    /* opcional */
}

/* Topo: logo + sociais */
.footer__top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Logo */
.footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer__logo {

    height: 2rem;
    /* mesma altura do texto */
    width: auto;
    /* mantém proporção */
    block-size: auto;
}

.footer__brand-text {
    font-size: 2rem;
    font-weight: 700;
    background-image: linear-gradient(to right, #05A6FF, #8800F8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

/* Redes sociais */
.footer__socials a {
    display: inline-flex;
    margin-left: 8px;
}

.footer__socials img {
    inline-size: 32px;
    block-size: 32px;
}

/* Divider full width */
.footer__divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0 -9999px;
    /* força até a borda da tela */
    padding: 0;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    /* ou space-around se preferir espaçamento igual nas laterais */
    align-items: center;
    flex-wrap: wrap;
    /* para quebrar em telas menores */
    gap: 16px;
    /* garante espaço entre os itens em wrap */
}

/* Copyright */
.footer__copy {
    margin: 0;
    font-size: 1.5rem;
    color: #3a3f47;
}

/* Links */
.footer__links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: initial;
    /* empurra o nav para o final da linha */
}

.footer__links a {
    text-decoration: none;
    color: #1b1f23;
    font-weight: 600;
}

.footer__links span {
    color: #3a3f47;
}

.footer {
    position: relative;
}

.footer__divider {
    position: absolute;
    left: 0;
    width: 100vw;
    /* largura total da tela */
    height: 1px;
    /* espessura da linha */
    background-color: #000;
    /* cor da linha */
    margin: 0;
    /* remove espaçamentos */
    top: 50%;
    /* ou ajuste para a posição desejada */
}

/* ==============================
   Modal overlay e container
============================== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    /* top/left/right/bottom 0 */
    background-color: rgba(0, 0, 0, 0.6);
    padding: 60px 60px;
    /* padding horizontal menor em telas pequenas */
    overflow-y: auto;
}

.modal-content {
    background: #fff;
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    margin: 40px auto;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.25);
    font-family: "GloboNovaRegular", sans-serif;
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

/* Animação */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cabeçalho do modal */
.modal-content>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 10%;
    background: linear-gradient(to right, #05A6FF 10%, #8800F8);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.h1modal {
    color: white;
    font-size: 3rem;

    padding-right: 10%;
    margin-right: 10%;
}

.close-button {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

/* ==============================
   Formulário
============================== */
.diversidade {
    color: #000;
    font-family: "GloboNovaRegular", sans-serif;
    font-size: 32px;
    margin-bottom: 10px;
}

#dataLabForm {
    font-family: "GloboNovaRegular", sans-serif;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Arial', sans-serif;

}


#dataLabForm .modal__title {
    font-size: clamp(16px, 2.2vw, 40px);
    font-weight: 400;
    margin-bottom: 16px;
    background-image: linear-gradient(to right, #05A6FF, #8800F8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Labels e inputs */
.info_pessoais {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    color: #000000;
    font-weight: 400;
    margin-bottom: 10px;
    font-family: "GloboNovaRegular", sans-serif;
}

#dataLabForm input,
#dataLabForm select {
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid #CCC;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #F5F5F5;
    font-family: "GloboNovaRegular", sans-serif;
}

#dataLabForm select:focus {}

/* Botão de envio */
#dataLabForm button {
    display: inline-block;

    background: linear-gradient(to right, #05A6FF 10%, #8800F8);
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
    width: auto;
    white-space: nowrap;
    margin-bottom: 20px;
}



#dataLabForm button:hover {
    opacity: 0.9;
}

/* ===== base do fieldset/legend ===== */

.form_item {
    font-family: "GloboNovaRegular", sans-serif;
    font-size: 20px;
    color: #000;

}

.radio-grid {
    font-family: "GloboNovaRegular", sans-serif;
    font-weight: 400;
    font-size: 18px;
    display: grid;
    color: #000;
    grid-template-columns: repeat(2, 1fr);
    /* 2 colunas */
    column-gap: 24px;
    /* espaço entre colunas */
    row-gap: 8px;
    /* espaço entre linhas */
    justify-items: start;
    margin-top: 20px;
    margin-bottom: 40px;
    padding-right: 4%;
}

.radio-grid2 {
    font-family: "GloboNovaRegular", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #000;
    display: flex;
    /* ativa flexbox */
    flex-direction: column;
    /* empilha os itens verticalmente */
    gap: 12px;
    /* espaço entre cada label */
    margin-top: 20px;
    margin-bottom: 40px;
}


.form_info {
    font-family: "GloboNovaRegular", sans-serif;
    font-size: 14px;
    color: #000;
    margin-bottom: 40px;
}

.btn-submit {
    padding: 10px;
    max-width: 200px;
    text-align: center;
    align-items: center;
    font-family: "GloboNovaRegular", sans-serif;
    font-size: 20px;
}

/* Overlay do modal */
#feedbackModal {
    display: none;
    /* padrão oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    color: #000;
    padding: 20%;
}

/* Conteúdo interno do modal */
#feedbackModal .modal-content {
    background: white;
    border-radius: 12px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    text-align: center;
    position: relative;
}

/* Botão de fechar */
#feedbackModal .close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s ease;
}

#feedbackModal .close-button:hover {
    color: #9b5de5;
    /* efeito hover */
}

/* Ícone de sucesso */
#feedbackModal .success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(90deg, #3f87f5, #9b5de5);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15%;
    margin-top: 10%;
}

/* Títulos e textos */
#feedbackModal h2 {
    margin-bottom: 5%;
}

#feedbackModal p {
    margin-bottom: 5%;
}

#feedbackModal p:last-child {
    margin-bottom: 0;
}

#feedbackModal p.bold {
    font-weight: bold;
}

.termos {
    color: #000;
    font-family: "GloboNovaRegular", sans-serif;
    margin-top: 10px;
    margin-bottom: 20px;
}


@media (max-width: 480px) {
    .radio-grid {
        display: flex;
        /* ativa flexbox */
        flex-direction: column;
    }

    .logoimg {
        margin-left: 0;
    }
}