*{
    font-family: "Open Sans", sans-serif;
}

:root {
  --Primrias-Azul: #351C77;
  --Neutros-Cinza: #646464;
  --Primrias-Vermelho: #EE2507;
  --branco: #F5F3F0;
  --preto: #000;
  --sombra: 4px 4px 20px 2px #56596759;
}

.form-control:focus {
    box-shadow: none;
}

.btn-padrao{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--Primrias-Azul);
    font-family: "Fredoka", sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: transform 0.3s ease;

    svg{
        width: 16px;
        height: 16px;
        color: var(--Primrias-Vermelho);
        transition: transform 0.3s ease;
    }

    &:hover svg{
        transform: translateX(4px);
    }
    &:hover{
        color: var(--Primrias-Vermelho);
    }
}


/* Espaço da admin bar do WordPress (ver add_theme_support('admin-bar') no functions.php) */
body.admin-bar{
    padding-top: 32px;

    @media (max-width: 782px){
        padding-top: 46px;
    }
}

header{
    .nav-item{
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;

        &:hover{
            color:#EE2507;
        }

        /* Entre 1280px e 1535px o menu desktop fica mais apertado: reduz levemente a fonte para não quebrar */
        @media (min-width: 1280px) and (max-width: 1535px){
            font-size: 15px;
        }
    }

    /*
        O style.css da raiz zera margin de <ul> e força "color: inherit" em a:hover/a:visited.
        Como esses resets ficam fora das @layer do Tailwind, eles sobrescrevem as utilities,
        por isso margens e cores desses elementos ficam definidas aqui.
    */
    .redes-sociais{
        margin-inline-start: 2rem;

        &.redes-sociais--mobile{
            margin: 1.5rem 0 1rem;
        }
    }

    .submenu-item,
    .social-link{
        color: #351C77;

        &:hover,
        &:focus-visible{
            color: #EE2507;
        }
    }
}

h2{
    margin-bottom: 20px;
    color: var(--Primrias-Azul);
    font-family: "Fredoka", sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.96px;
    text-transform: uppercase;
}

h3{
    color: var(--Primrias-Vermelho, var(--Ao-Primria, #EE2507));
    text-align: center;
    font-family: "Fredoka", sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 20px 0;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.footer{
    /* border-top: 3px solid var(--Primrias-Azul); */
    background: #fff;
    color: var(--Primrias-Azul);

    .footer__topo{
        display: grid;
        grid-template-columns: 1.6fr 2fr 0.9fr;
        gap: 32px 40px;
        padding: 28px 0 36px;
    }

    .footer__logo-redes{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px 48px;
    }

    .footer__logo{
        width: 100px;
        height: auto;
    }

    .footer__redes{
        display: flex;
        align-items: center;
        gap: 14px;

        a{
            display: flex;
            color: var(--Primrias-Vermelho);
            transition: color 0.3s ease, transform 0.3s ease;

            &:hover{
                color: var(--Primrias-Azul);
                transform: translateY(-2px);
            }
        }

        svg{
            width: 20px;
            height: 20px;
        }
    }

    .footer__localizacao{
        margin-top: 32px;

        /* Endereço em uma linha só no desktop, como no layout */
        @media (min-width: 1280px){
            .footer__item{
                white-space: nowrap;
            }
        }
    }

    .footer__titulo{
        margin-bottom: 12px;
        color: var(--Primrias-Azul);
        font-family: "Fredoka", sans-serif;
        font-size: 15px;
        font-weight: 600;
    }

    /* Linha com ícone vermelho + texto (endereço, telefone, e-mail) */
    .footer__item{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        color: var(--Primrias-Azul);
        line-height: 1.4;
        font-family: "Fredoka", sans-serif;
        font-size: 14px;
        font-weight: 400;

        svg{
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            color: var(--Primrias-Vermelho);
        }
    }

    a.footer__item:hover{
        color: var(--Primrias-Vermelho);
    }

    .footer__links{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;

        li + li{
            margin-top: 16px;
        }

        a{
            color: var(--Primrias-Azul);
            font-family: "Fredoka", sans-serif;
            font-size: 15px;
            font-weight: 600;
            transition: color 0.3s ease;

            &:hover{
                color: var(--Primrias-Vermelho);
            }
        }
    }

    /* Barra inferior: copyright + assinatura Alfama */
    .footer__base{
        border-top: 1px solid #E5E5E5;

        .container{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px 24px;
            padding-top: 16px;
            padding-bottom: 16px;
        }

        p{
            color: var(--Primrias-Azul);
            font-size: 13px;
        }

        p a{
            color: inherit;

            &:hover{
                color: var(--Primrias-Vermelho);
            }
        }

        img{
            display: block;
            width: 96px;
            height: auto;
        }
    }

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

        .footer__marca{
            grid-column: 1 / -1;
        }
    }

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

        .footer__links{
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* Espaço para os botões flutuantes não cobrirem a barra inferior */
        .footer__base .container{
            justify-content: center;
            padding-bottom: 24px;
            text-align: center;
        }
    }
}


/* ==========================================================================
   Seções Internas 
   ========================================================================== */

   #cabecalho {
        --cabecalho-waves-altura: 70px;

        position: relative;
        display: flex;
        align-items: center;
        min-height: 450px;
        padding: 40px 0 calc(var(--cabecalho-waves-altura) + 20px);
        overflow: hidden;
        text-align: center;
        background-color: #fff;

        /*
            Foto de fundo: a bg-sobre.png tem ~20% de área transparente na base,
            então a camada se estende abaixo da section (cortada pelo overflow) para a foto cobrir tudo
        */
        &::before {
            content: "";
            position: absolute;
            inset: 0 0 -25% 0;
            background: var(--cabecalho-bg) center top / cover no-repeat;
        }

        /* Escurece levemente a foto para o texto branco ficar legível */
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background: rgba(0, 0, 0, 0.35);
        }

        @media (max-width: 768px) {
            --cabecalho-waves-altura: 40px;

            min-height: 220px;

            h1 {
                @media (max-width: 768px) {
                    font-size: 32px !important;
                }
            }

        }

        .container {
            position: relative;
            z-index: 3;
            width: 100%;
        }

        .breadcrumb-cabecalho {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 16px;
            color: #fff;
            font-family: "Fredoka", sans-serif;
            font-size: 15px;

            /* O "*{font-family}" global pega li/a diretamente, por isso a fonte é repetida aqui */
            li,
            a {
                font-family: "Fredoka", sans-serif;
            }

            li {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            a {
                color: #fff;
                transition: color 0.3s ease;

                &:hover {
                    color: var(--Primrias-Vermelho);
                }
            }

            img {
                width: 20px;
                height: 20px;
            }

            .destaque {
                font-weight: 600;
            }
        }

        h1 {
            color: #fff;
            font-family: "Fredoka", sans-serif;
            font-size: 32px;
            font-weight: 600;
            line-height: 1.15;
            text-transform: uppercase;

            @media (max-width: 768px) {
                font-size: 26px;
            }
        }

        /* Waves animadas na base (mesma técnica do banner da home) */
        .cabecalho-waves {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            z-index: 2;
            height: var(--cabecalho-waves-altura);
            pointer-events: none;

            svg {
                display: block;
                width: 100%;
                height: 100%;
            }

            use {
                animation: cabecalho-waves-mover 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
            }

            @media (prefers-reduced-motion: reduce) {
                use {
                    animation: none;
                }
            }
        }

        .cabecalho-waves__primaria {
            fill: var(--Primrias-Azul);
            animation-duration: 13s;
            animation-delay: -2s;
        }

        /* #351C77 a 20% sobre branco, em cor sólida */
        .cabecalho-waves__clara {
            fill: #D7D2E4;
            animation-duration: 10s;
            animation-delay: -3s;
        }

        .cabecalho-waves__branca {
            fill: #fff;
            animation-duration: 20s;
            animation-delay: -4s;
        }
    }

    @keyframes cabecalho-waves-mover {
        0% {
            transform: translate3d(-90px, 0, 0);
        }

        100% {
            transform: translate3d(85px, 0, 0);
        }
    }

   /*
    Onda de uma cor só, gerada por alfama_onda() (functions.php) — funciona em qualquer página.
    Usada nas sections "modalidades" e "parceiros". O pai precisa de position: relative.
    */
    :root{
        --onda-altura: 40px;

        @media (max-width: 768px){
            --onda-altura: 24px;
        }
    }

    .onda{
        position: absolute;
        left: 0;
        right: 0;
        z-index: 2;
        height: var(--onda-altura);
        pointer-events: none;

        svg{
            display: block;
            width: 100%;
            height: 100%;
            fill: #fff;
        }

        .onda__path{
            animation: banner-waves-mover 18s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
        }

        @media (prefers-reduced-motion: reduce){
            .onda__path{
                animation: none;
            }
        }
    }

    /* Movimento lateral das ondas (usado também pelas waves do banner e do "Fale Conosco" na home) */
    @keyframes banner-waves-mover {
        0% {
            transform: translate3d(-90px, 0, 0);
        }

        100% {
            transform: translate3d(85px, 0, 0);
        }
    }

    /* No topo a onda fica "de cabeça para baixo", descendo sobre o fundo azul claro */
    .onda--topo{
        top: -1px;
        transform: scaleY(-1);
    }

    .onda--base{
        bottom: -1px;
    }

    #modalidades{
        /* Fundo azul bem claro da área de esportes */
        --modalidades-bg: #F1F5FE;

        position: relative;

        .modalidades-esportes{
            position: relative;
            padding: calc(var(--onda-altura) + 24px) 0 48px;
            background: var(--modalidades-bg);

            h2{
                margin-bottom: 36px;
                color: var(--Primrias-Azul);
                font-family: "Fredoka", sans-serif;
                font-size: 32px;
                font-weight: 600;
                line-height: 1.15;
                text-align: center;
                text-transform: uppercase;
            }
        }

        /* Cada slide é um grupo de 6: grade 2x3 no mobile/tablet */
        .swiperModalidades .swiper-slide{
            /* Flex centralizado: a linha com menos itens (ex.: 3 de 6) fica no meio, com itens do mesmo tamanho */
            --modalidades-colunas: 2;
            --modalidades-gap-x: 16px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 28px var(--modalidades-gap-x);

            .item-modalidade{
                width: calc((100% - (var(--modalidades-colunas) - 1) * var(--modalidades-gap-x)) / var(--modalidades-colunas));
            }
        }

        /* Desktop: carrossel desativado; os grupos viram linhas de 6 */
        @media (min-width: 1024px){
            .swiperModalidades .swiper-wrapper{
                display: grid;
                gap: 32px;
                transform: none !important;
            }

            .swiperModalidades .swiper-slide{
                --modalidades-colunas: 6;
                --modalidades-gap-x: 32px;
                width: 100% !important;
                margin: 0 !important;

                /* Desktop: nome sempre em uma linha. O item cresce só o necessário (min-width) e os demais
                   da mesma linha encolhem para compensar (flex-shrink), sem jogar ninguém para a linha de baixo */
                .item-modalidade{
                    /* -1px de folga: com a soma exata em 100%, o arredondamento de subpixel jogava o 6º item para baixo */
                    flex: 0 1 calc((100% - (var(--modalidades-colunas) - 1) * var(--modalidades-gap-x)) / var(--modalidades-colunas) - 1px);
                    width: auto;
                    min-width: max-content;
                    white-space: nowrap;
                }

                /* Telas de 1024px a 1279px: menos espaço e fonte um pouco menor para os 6 caberem na linha */
                @media (max-width: 1279px){
                    --modalidades-gap-x: 12px;

                    .item-modalidade{
                        gap: 8px;
                        font-size: 15px;
                        letter-spacing: 0.5px;
                    }
                }
            }

            .scrollbar-modalidades{
                display: none;
            }
        }

        .item-modalidade{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            color: var(--Primrias-Azul);
            font-family: "Fredoka", sans-serif;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 1px;

            svg{
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                color: var(--Primrias-Vermelho);
            }

            /* Ícone enviado pelo ACF (imagem) ocupa o mesmo espaço do SVG padrão */
            img{
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                object-fit: contain;
            }
        }

        /* Barra de progresso do carrossel (só aparece quando há rolagem — no desktop o Swiper a oculta) */
        .scrollbar-modalidades{
            position: relative;
            left: auto;
            bottom: auto;
            width: 100%;
            height: 4px;
            margin-top: 32px;
            border-radius: 4px;
            background: #DCDFEA;

            .swiper-scrollbar-drag{
                border-radius: 4px;
                background: var(--Primrias-Azul);
            }
        }

        /* Galeria */
        .galeria-modalidades{
            position: relative;

            .link-galeria-modalidades{
                display: block;
                overflow: hidden;
                cursor: zoom-in;

                &:hover img{
                    transform: scale(1.04);
                }
            }

            img{
                display: block;
                width: 100%;
                aspect-ratio: 16 / 6;
                object-fit: cover;
                transition: transform 0.5s ease;
            }
        }

        @media (max-width: 1023px){
            .modalidades-esportes h2{
                font-size: 26px;
            }

            .item-modalidade{
                justify-content: flex-start;
                font-size: 16px;
            }
        }

        @media (max-width: 767px){
            .galeria-modalidades img{
                aspect-ratio: 4 / 3;
            }
        }
    }

    #estrutura{
        padding: 80px 0;


        .text-estrutura{
            font-size: 16px;
            color: var(--Neutros-Cinza, #646464);
            font-family: "Fredoka", sans-serif;
            font-weight: 400;
            line-height: 24px;
        }

        /* Foto com moldura ondulada azul clara (mesmo estilo do vídeo da section "sobre") */
        .moldura-estrutura{
            display: block;
            padding: 8px;
            aspect-ratio: 16 / 10;
            background: rgba(53, 28, 119, 0.15);
            clip-path: url(#estrutura-blob);

            img{
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                clip-path: url(#estrutura-blob);
                transition: transform 0.5s ease;
            }

            &:hover img{
                transform: scale(1.04);
            }
        }

        /* Barra de rolagem + "Ver estrutura" (mesmo padrão da section "segmentos") */
        .rodape-estrutura{
            display: flex;
            align-items: center;
            gap: 24px;
            margin-top: 36px;
        }

        .scrollbar-estrutura{
            position: relative;
            left: auto;
            bottom: auto;
            flex: 1;
            width: auto;
            height: 4px;
            border-radius: 4px;
            background: linear-gradient(#E5E5E5, #E5E5E5) center / 100% 1px no-repeat;

            .swiper-scrollbar-drag{
                border-radius: 4px;
                background: var(--Primrias-Azul);
            }
        }

        .ver-estrutura{
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            color: var(--Primrias-Azul);
            font-family: "Fredoka", sans-serif;
            font-size: 16px;
            font-weight: 600;

            svg{
                width: 16px;
                height: 16px;
                color: var(--Primrias-Vermelho);
                transition: transform 0.3s ease;
            }

            &:hover svg{
                transform: translateX(4px);
            }
        }

        @media (max-width: 768px){
            padding: 60px 0;

            .titulo-estrutura{
                font-size: 28px;
            }

            .text-estrutura{
                font-size: 15px;
            }
        }
    }

    #parceiros{
        position: relative;
        padding: calc(var(--onda-altura) + 40px) 0 calc(var(--onda-altura) + 48px);
        background: #F1F5FE;

        /* Título e texto: mesmo estilo da section "estrutura" */
        .titulo-parceiros{
            margin-bottom: 24px;
            color: var(--Primrias-Azul);
            font-family: "Fredoka", sans-serif;
            font-size: 36px;
            font-weight: 600;
            line-height: 1.1;
            text-transform: uppercase;
        }

        .text-parceiros{
            color: var(--Neutros-Cinza, #646464);
            font-family: "Fredoka", sans-serif;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px; /* 150% */
        }

        .logo-parceiro{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;

            img{
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
                object-fit: contain;
                transition: transform 0.3s ease;
            }

            &:hover img{
                transform: scale(1.05);
            }
        }

        /* Barra de progresso: linha fina cinza com o trecho ativo em azul */
        .scrollbar-parceiros{
            position: relative;
            left: auto;
            bottom: auto;
            width: 100%;
            height: 4px;
            margin-top: 32px;
            border-radius: 4px;
            background: linear-gradient(#B9BCC8, #B9BCC8) center / 100% 1px no-repeat;

            .swiper-scrollbar-drag{
                border-radius: 4px;
                background: var(--Primrias-Azul);
            }
        }

        @media (max-width: 768px){
            .titulo-parceiros{
                font-size: 28px;
            }

            .text-parceiros{
                font-size: 15px;
            }

            .logo-parceiro{
                height: 80px;
            }
        }
    }

/* ==========================================================================
   Fale Conosco (template-parts/_cta-fale.php) — usado em várias páginas
   ========================================================================== */

    #cta-fale{
        position: relative;

        /* Ondas do topo: fundo branco atrás, camada roxa clara e camada roxa principal emendando no conteúdo */
        .cta-fale__ondas{
            height: 110px;
            margin-bottom: -1px; /* evita fresta entre a onda e o bloco roxo */
            background: #fff;

            svg{
                display: block;
                width: 100%;
                height: 100%;
            }

            path{
                animation: banner-waves-mover 16s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
            }

            @media (prefers-reduced-motion: reduce){
                path{
                    animation: none;
                }
            }
        }

        .cta-fale__onda-clara{
            fill: #5E4891;
            animation-duration: 11s;
            animation-delay: -3s;
        }

        .cta-fale__onda-principal{
            fill: var(--Primrias-Azul);
            animation-duration: 17s;
            animation-delay: -6s;
        }

        .cta-fale__conteudo{
            padding: 0 0 calc(var(--onda-altura) + 40px);
            background: var(--Primrias-Azul);
        }

        .titulo-cta-fale{
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0 0 28px;
            color: #fff;
            font-family: "Fredoka", sans-serif;
            font-size: 28px;
            font-weight: 600;
            text-transform: uppercase;

            svg{
                width: 28px;
                height: 28px;
                flex-shrink: 0;
            }
        }

        /* Desktop: 3 campos + botão na mesma linha; termos embaixo */
        .form-cta-fale{
            display: grid;
            grid-template-columns: 1.2fr 0.9fr 1fr auto;
            align-items: end;
            gap: 20px 18px;
        }

        .campo-cta-fale{
            display: flex;
            flex-direction: column;
            gap: 10px;

            label{
                font-family: "Fredoka", sans-serif;
                color: var(--Neutros-Branco, var(--Superfcie-Primria, #FFF));
                font-size: 20px;
                font-weight: 500;
                letter-spacing: 2px;
            }

            input{
                width: 100%;
                height: 44px;
                padding: 0 20px;
                border: 2px solid transparent;
                border-radius: 9999px;
                background: #fff;
                color: #333;
                font-size: 14px;
                outline: none;
                transition: border-color 0.3s ease;
                font-family: "Fredoka", sans-serif;


                &::placeholder{
                    color: #8A8A8A;
                }

                &:focus{
                    border-color: var(--Primrias-Vermelho);
                }
            }
        }

        .btn-cta-fale{
            height: 44px;
            padding: 0 24px;
            border-radius: 9999px;
            background: #fff;
            color: var(--Primrias-Azul);
            font-family: "Fredoka", sans-serif;
            font-size: 15px;
            font-weight: 600;
            white-space: nowrap;
            transition: background-color 0.3s ease, color 0.3s ease;

            &:hover,
            &:focus-visible{
                background: var(--Primrias-Vermelho);
                color: #fff;
            }
        }

        .termos-cta-fale{
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            color: var(--Neutros-Branco, var(--Superfcie-Primria, #FFF));
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 1.6px;


            input{
                flex-shrink: 0;
                width: 18px;
                height: 18px;
                accent-color: var(--Primrias-Vermelho);
                cursor: pointer;
            }
            span{
                font-family: "Fredoka", sans-serif;
            }
        }

        /* Variação com "Mensagem" ($cta_mensagem): e-mail vai até o fim da 1ª linha; mensagem + botão na 2ª */
        .form-cta-fale--mensagem{
            .campo-cta-fale:nth-child(3){
                grid-column: 3 / -1;
            }

            .campo-cta-fale--mensagem{
                grid-column: 1 / 4;
            }
        }

        @media (max-width: 1023px){
            .form-cta-fale{
                grid-template-columns: 1fr 1fr;
            }

            .campo-cta-fale:first-child{
                grid-column: 1 / -1;
            }

            .form-cta-fale--mensagem{
                .campo-cta-fale:nth-child(3){
                    grid-column: auto;
                }

                .campo-cta-fale--mensagem{
                    grid-column: 1 / -1;
                }
            }

            /* Botão vai para depois dos termos e ocupa a largura toda */
            .btn-cta-fale{
                grid-column: 1 / -1;
                order: 1;
            }
        }

        @media (max-width: 640px){
            .cta-fale__ondas{
                height: 60px;
            }

            .form-cta-fale{
                grid-template-columns: 1fr;
            }

            .titulo-cta-fale{
                font-size: 24px;
            }

            .campo-cta-fale label{
                font-size: 16px;
            }
        }
    }


/* ==========================================================================
   Card de notícia do blog (template-parts/_card-blog.php) — home e página do Blog
   ========================================================================== */
.card-blog{
    /* Imagem: moldura azul clara aparecendo no topo + zoom suave no hover do card */
    .moldura{
        position: relative;
        display: block;
        margin-top: 10px;

        &::before{
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(53, 28, 119, 0.12);
            clip-path: url(#blog-blob);
            transform: translateY(-10px);
        }
    }

    .moldura__imagem{
        position: relative;
        display: block;
        aspect-ratio: 16 / 11;
        clip-path: url(#blog-blob);
    }

    .img-blog{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    &:hover .img-blog{
        transform: scale(1.06);
    }

    .info-blog{
        padding-top: 14px;
    }

    .categoria-data{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        margin-bottom: 14px;
    }

    .categoria{
        padding: 4px 8px;
        border-radius: 4px;
        background: var(--Primrias-Azul);
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
    }

    .data{
        color: var(--Neutros-Cinza);
        font-size: 13px;
        font-weight: 600;
    }

    .titulo-noticia-blog{
        margin-bottom: 10px;
        color: var(--Primrias-Azul);
        font-family: "Fredoka", sans-serif;
        font-size: 24px;
        font-weight: 600;

        a{
            color: inherit;
            font: inherit; /* o "*{font-family}" global trocaria a Fredoka pela Open Sans */
            transition: color 0.3s ease;

            &:hover{
                color: var(--Primrias-Vermelho);
            }
        }
    }

    .resumo-blog{
        margin-bottom: 18px;
        color: var(--Neutros-Cinza);
        font-size: 15px;
        font-family: "Fredoka", sans-serif;
        font-weight: 400;
        line-height: 150%; /* 24px */
    }

    @media (max-width: 768px){
        .titulo-noticia-blog{
            font-size: 20px;
        }
    }
}


/* ==========================================================================
   Card de atalho em pílula roxa (Área do Aluno e páginas de segmento)
   ========================================================================== */
.card-acesso {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
    padding: 20px 24px;
    border-radius: 9999px;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--Primrias-Azul);
    color: #fff !important;
    text-align: center;
    transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;

    /* Curva clara no canto superior direito */
    &::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -60%;
        right: -12%;
        width: 55%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        pointer-events: none;
    }

    /* color explícito: o "a:hover { color: inherit }" do style.css da raiz deixaria o texto preto */
    &:hover,
    &:focus-visible {
        background-color: var(--Primrias-Vermelho);
        box-shadow: 0 10px 24px -8px rgba(238, 37, 7, 0.5);
        color: #fff;
    }

    svg {
        width: 26px;
        height: 26px;
    }

    span {
        font-family: "Fredoka", sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2;
    }
}

@media (max-width: 768px) {
    .card-acesso {
        min-height: 100px;

        span {
            font-size: 18px;
        }
    }
}

/* ==========================================================================
   Botão "Acesso do Usuário" (header)
   Fechado: pílula roxa. Aberto: bloco vermelho que expande para baixo com os itens.
   ========================================================================== */
:root{
    --acesso-vermelho: #BE0000;
}

/* Mesma duração e curva para a borda do botão e para a lista: as duas animações andam juntas */
:root{
    --acesso-tempo: 0.35s;
    --acesso-curva: cubic-bezier(0.4, 0, 0.2, 1);
    --acesso-raio: 28px; /* >= metade da altura do botão, então fechado continua pílula */
}

.btn-acesso{
    position: relative;
    z-index: 2; /* fica por cima da lista, que começa atrás da metade de baixo do botão */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 14px 28px;
    border: 0;
    /* Raio finito (não 9999px): assim a transição até 0 é contínua do início ao fim */
    border-radius: var(--acesso-raio);
    background: var(--Primrias-Azul);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-radius var(--acesso-tempo) var(--acesso-curva),
        box-shadow var(--acesso-tempo) var(--acesso-curva);

    &:hover{
        background: var(--Primrias-Vermelho);
    }

    &:focus{
        outline: none;
    }

    &:focus-visible{
        outline: 2px solid #fff;
        outline-offset: -4px;
    }

    .seta-acesso{
        transition: transform var(--acesso-tempo) var(--acesso-curva);
    }
}

.item-acesso{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease;

    /* Branco em todos os estados: o style.css da raiz força "color: inherit" em a:hover/:focus/:visited */
    &,
    &:link,
    &:visited,
    &:hover,
    &:focus,
    &:active{
        color: #fff;
    }

    &:hover,
    &:focus-visible{
        background: rgba(255, 255, 255, 0.12);
        outline: none;
    }

    svg{
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        color: #fff;
    }
}

/* Desktop: a lista fica por cima do conteúdo (não empurra o header) */
.acesso-usuario{
    position: relative;
    min-width: 260px;

    /*
        A lista começa na metade do botão (atrás dele). Assim, enquanto os cantos de baixo do botão
        vão de arredondado para reto, o vermelho da lista já preenche o espaço — sem "degrau".
    */
    .menu-acesso{
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 0;
        right: 0;
        display: grid;
        grid-template-rows: 0fr;
        padding-top: 26px; /* = metade do botão, fica escondido atrás dele */
        border-radius: 0 0 var(--acesso-raio) var(--acesso-raio);
        background: var(--acesso-vermelho);
        color: #fff;
        visibility: hidden;
        transition:
            grid-template-rows var(--acesso-tempo) var(--acesso-curva),
            box-shadow var(--acesso-tempo) var(--acesso-curva),
            visibility 0s var(--acesso-tempo);
    }

    .menu-acesso__itens{
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-height: 0;
        overflow: hidden;
        padding: 0 14px;
        opacity: 0;
        transition:
            padding var(--acesso-tempo) var(--acesso-curva),
            opacity 0.2s ease;
    }

    /* Aberto */
    &.aberto{
        .btn-acesso{
            border-radius: var(--acesso-raio) var(--acesso-raio) 0 0;
            background: var(--acesso-vermelho);
            box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35); /* linha clara entre o botão e os itens */
        }

        .seta-acesso{
            transform: rotate(180deg);
        }

        .menu-acesso{
            grid-template-rows: 1fr;
            visibility: visible;
            box-shadow: 0 16px 28px -12px rgba(0, 0, 0, 0.4);
            transition:
                grid-template-rows var(--acesso-tempo) var(--acesso-curva),
                box-shadow var(--acesso-tempo) var(--acesso-curva),
                visibility 0s;
        }

        .menu-acesso__itens{
            padding: 14px 14px 18px;
            opacity: 1;
            transition:
                padding var(--acesso-tempo) var(--acesso-curva),
                opacity 0.25s ease 0.1s; /* os itens aparecem quando o bloco já começou a abrir */
        }
    }

    /* Fechando: o botão só volta ao roxo depois que a lista recolheu (evita cantos vermelhos sobre o roxo) */
    &.fechando .btn-acesso{
        background: var(--acesso-vermelho);
    }
}

/*
    Mobile/tablet (menu hambúrguer): mesmo componente e mesma animação do desktop,
    mas a lista fica no fluxo (empurra as redes sociais para baixo) em vez de flutuar.
    A margem negativa mantém a lista começando atrás da metade de baixo do botão.
*/
.acesso-usuario--mobile{
    min-width: 0;

    .menu-acesso{
        position: relative;
        top: auto;
        margin-top: -26px;
    }
}

@media (prefers-reduced-motion: reduce){
    .acesso-usuario .menu-acesso,
    .acesso-usuario .menu-acesso__itens,
    .btn-acesso{
        transition: none;
    }
}

/* Ícone do card de atalho enviado pelo ACF (imagem/SVG): mesmo tamanho do SVG padrão e sempre branco */
.card-acesso .icone-acesso{
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}


/* ==========================================================================
   Mobile: título → imagem → texto (seções de duas colunas texto + imagem)
   Uso: linha .titulo-midia-mobile com as colunas .bloco-texto (h2 + textos) e .bloco-midia (imagem).
   A coluna de texto "se desfaz" (display: contents) para o título e os textos virarem itens da
   linha flex e poderem ser reordenados em volta da imagem. Tablet e desktop não mudam.
   Usado em: Sobre o Colégio (história e metodologia) e Nossos Segmentos (infantil ao médio).
   ========================================================================== */
@media (max-width: 767px){
    .titulo-midia-mobile{
        row-gap: 0;

        .bloco-texto{
            display: contents;

            > *{
                order: 3;
                width: 100%;
                padding-inline: 16px; /* mesmo respiro do px-4 da coluna */
            }

            > h2{
                order: 1;
            }
        }

        .bloco-midia{
            order: 2;
            margin-bottom: 28px;
        }
    }
}


/* ==========================================================================
   Formulários com envio (Fale Conosco e Trabalhe Conosco)
   ========================================================================== */

/* Honeypot: fora da tela (não usar display:none, alguns robôs ignoram campos ocultos assim) */
.campo-honeypot{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Mensagem de retorno: ocupa a linha inteira do grid e fica por último (depois do botão no tablet) */
.form-retorno{
    grid-column: 1 / -1;
    order: 2;
    margin: 0;
    font-family: "Fredoka", sans-serif;
    font-size: 15px;
    font-weight: 500;

    &:empty{
        display: none;
    }
}

/* Fale Conosco: fundo roxo → texto branco; Trabalhe Conosco: fundo azul claro → roxo/vermelho */
.form-cta-fale .form-retorno{
    color: #fff;

    &.form-retorno--erro{
        color: #FFD2CC;
    }
}

.form-trabalhe .form-retorno{
    color: var(--Primrias-Azul);

    &.form-retorno--erro{
        color: var(--Primrias-Vermelho);
    }
}

/* Botão enquanto envia */
.js-form-envio.enviando button[type="submit"]{
    opacity: 0.6;
    cursor: wait;
}


/* ==========================================================================
   Modal da Home (footer.php): card roxo que fica vermelho no hover
   ========================================================================== */
.modal-home{
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;

    &[hidden]{
        display: none;
    }

    &.aberto{
        opacity: 1;
    }
}

.modal-home__fundo{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.modal-home__caixa{
    position: relative;
    width: 100%;
    max-width: 440px;
    transform: translateY(16px) scale(0.97);
    transition: transform 0.3s ease;

    .modal-home.aberto &{
        transform: none;
    }
}

.modal-home__card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 280px;
    padding: 48px 32px 56px;
    border-radius: 48px;
    overflow: hidden;
    isolation: isolate;
    background: var(--Primrias-Azul);
    color: #fff;
    text-align: center;
    transition: background-color 0.4s ease;

    /* Curva clara no canto inferior esquerdo */
    &::before{
        content: "";
        position: absolute;
        z-index: -1;
        left: -25%;
        bottom: -55%;
        width: 75%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
    }

    /* color explícito: o "a:hover { color: inherit }" do style.css da raiz deixaria o texto escuro */
    &:hover,
    &:focus-visible{
        background: var(--Primrias-Vermelho);
        color: #fff;
    }
}

.modal-home__subtitulo{
    font-family: "Fredoka", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.modal-home__titulo{
    font-family: "Fredoka", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

/* Dois ícones decorativos no canto inferior esquerdo */
.modal-home__icones{
    position: absolute;
    left: 28px;
    bottom: 18px;

    svg{
        position: absolute;
        width: 28px;
        height: 28px;
        color: rgba(255, 255, 255, 0.2);

        &:first-child{ left: 0; bottom: 34px; }
        &:last-child{ left: 34px; bottom: 0; }
    }
}

.modal-home__fechar{
    position: absolute;
    top: 22px;
    right: 26px;
    display: flex;
    padding: 4px;
    color: #fff;
    cursor: pointer;

    svg{
        width: 22px;
        height: 22px;
    }

    &:hover{
        opacity: 0.75;
    }
}

@media (max-width: 480px){
    .modal-home__card{
        min-height: 230px;
        border-radius: 36px;
    }

    .modal-home__titulo{
        font-size: 36px;
    }

    .modal-home__subtitulo{
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce){
    .modal-home,
    .modal-home__caixa{
        transition: none;
    }
}

/* Foco do teclado no "X" do modal: contorno branco discreto */
.modal-home__fechar:focus{
    outline: none;
}

.modal-home__fechar:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 6px;
}