/* ==========================================
   HEADER
========================================== */

.header-site {
    position: relative;
    width: 100%;
    z-index: 99999;

    background-color: transparent;

    opacity: 1;
    visibility: visible;

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* ==========================================
   DESKTOP
========================================== */

@media (min-width: 1025px) {

    .header-site.header-fixo {
        position: fixed;

        top: 0;
        left: 0;
        width: 100%;

        background-color: #ffffff;

        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.10);

        opacity: 1;
        visibility: visible;
    }

}

    /*
     * Reserva o espaço do header quando ele
     * passa para position: fixed.
     */
    body.header-fixo-ativo {
        padding-top: var(--altura-header);
    }

}


/* ==========================================
   TABLET E CELULAR
========================================== */

@media (max-width: 1024px) {

    .header-site,
    .header-site.header-fixo {

        position: relative;

        top: auto;
        left: auto;

        width: 100%;

        opacity: 1 !important;
        visibility: visible !important;

        background-color: transparent;

        box-shadow: none;

        transform: none;

        animation: none !important;
    }

}



/* Template HFE usado no rodapé */
.hfe-footer-template {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove espaçamento do container do Astra */
.site-footer .ast-container,
.site-footer .ast-builder-grid-row-container,
.site-footer .ast-builder-grid-row {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================
   CONTROLE DA EXIBIÇÃO DO MENU COM A LIGHTBOX
========================================== */

/* Menu fixo */
.header-site {
    z-index: 99999;
}

/* Lightbox do Elementor */
.elementor-lightbox {
    z-index: 100000 !important;
}

/* ==========================================
   AJUSTE DAS ÂNCORAS COM HEADER FIXO
========================================== */

@media (min-width: 1025px) {

    .elementor-menu-anchor {
        scroll-margin-top: 120px;
    }

    /* Caso a âncora esteja em um container/seção */
    [id] {
        scroll-margin-top: 120px;
    }
}

  @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700&display=swap');


/* ==========================================
   GRID DAS MODALIDADES
========================================== */

.redecare-modalidades-grid {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 28px;

    font-family: "Roboto Condensed", Arial, sans-serif;

    box-sizing: border-box;
}


/* ==========================================
   CAIXINHA
========================================== */

.redecare-modalidade-card {
    position: relative;
    width: 100%;

    /* MENOS TRANSPARENTE */
    background: rgba(255, 255, 255, 0.85);

    border-radius: 20px;
    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.10);

    transition: all 0.3s ease;
}


.redecare-modalidade-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(0,0,0,0.16);
}


/* ==========================================
   IMAGEM
========================================== */

.redecare-modalidade-image {

    position: relative;

    width: 100%;

    height: 210px;

    overflow: hidden;

    border-radius: 20px 20px 0 0;
}


.redecare-modalidade-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.redecare-modalidade-card:hover
.redecare-modalidade-image img {

    transform: scale(1.05);
}


/* ==========================================
   ÍCONE REDONDO
========================================== */

.redecare-modalidade-icon {

    position: absolute;

    left: 50%;

    bottom: -30px;

    transform: translateX(-50%);

    width: 76px;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #12385E;

    border: 4px solid #FFFFFF;

    border-radius: 50%;

    color: #FFFFFF;

    font-family: Arial, sans-serif;

    font-size: 32px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.15);

    z-index: 3;
}


/* ==========================================
   CONTEÚDO
========================================== */

.redecare-modalidade-content {

    padding: 55px 25px 28px;

    text-align: center;

    /* IMPORTANTE:
       também transparente */
    background: transparent;

    border-radius: 0 0 20px 20px;
}


/* ==========================================
   TÍTULO DO CARD
========================================== */

.redecare-modalidade-content h3 {

    margin: 0;

    padding: 0;

    color: #12385E;

    font-family: "Roboto Condensed", Arial, sans-serif;

    font-size: 21px;

    font-weight: 700;

    line-height: 1.2;
}


/* ==========================================
   DIVISOR
========================================== */

.redecare-card-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 120px;

    margin: 12px auto 17px;

    gap: 8px;
}


.redecare-card-divider span {

    flex: 1;

    height: 2px;

    background: #C1272D;
}


.redecare-card-divider strong {

    color: #C1272D;

    font-family: Arial, sans-serif;

    font-size: 21px;

    font-weight: 400;

    line-height: 1;
}


/* ==========================================
   TEXTO
========================================== */

.redecare-modalidade-content p {

    margin: 0;

    padding: 0;

    color: #24364D;

    font-family: "Roboto Condensed", Arial, sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.5;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1100px) {

    .redecare-modalidades-grid {

        grid-template-columns: repeat(2, 1fr);

        max-width: 800px;

        gap: 28px;
    }
}


/* ==========================================
   TABLET PEQUENO
========================================== */

@media (max-width: 700px) {

    .redecare-modalidades-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .redecare-modalidade-image {

        height: 190px;
    }

    .redecare-modalidade-content {

        padding-left: 18px;

        padding-right: 18px;
    }

    .redecare-modalidade-content h3 {

        font-size: 19px;
    }

    .redecare-modalidade-content p {

        font-size: 16px;
    }
}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 550px) {

    .redecare-modalidades-grid {

        grid-template-columns: 1fr;

        gap: 25px;

        width: 100%;
    }

    .redecare-modalidade-image {

        height: 220px;
    }

    .redecare-modalidade-content {

        padding: 55px 25px 30px;
    }

    .redecare-modalidade-content h3 {

        font-size: 21px;
    }

    .redecare-modalidade-content p {

        font-size: 17px;
    }
}

/* =========================================================
   REDECARE - RODAPÉ INFERIOR
   Azul + onda vermelha + conteúdo
   ========================================================= */

.redecare-footer-bottom {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0B3156;
    color: #ffffff;
    font-family: "Roboto Condensed", Arial, sans-serif;
}

/* =========================================================
   FONTE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700&display=swap');


/* =========================================================
   ONDA
   ========================================================= */

.redecare-wave {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 115px;

    z-index: 1;
    overflow: hidden;

    line-height: 0;
}

.redecare-wave svg {
    display: block;

    width: 100%;
    height: 100%;
}


/*
   Faixa vermelha
   Ela fica ligeiramente acima da área azul.
*/

.redecare-wave-red {
    fill: #C1272D;
}


/*
   Área azul que cobre parte do vermelho,
   deixando somente uma linha vermelha visível.
*/

.redecare-wave-blue {
    fill: #0B3156;
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.redecare-footer-content {
    position: relative;
    z-index: 5;

    max-width: 1200px;

    min-height: 430px;

    margin: 0 auto;

    padding: 155px 40px 35px;

    box-sizing: border-box;
}


/* =========================================================
   MARCAS D'ÁGUA
   ========================================================= */

.redecare-watermark-left {
    position: absolute;

    left: 10px;
    bottom: 35px;

    width: 230px;

    opacity: 0.07;

    pointer-events: none;
}

.redecare-watermark-right {
    position: absolute;

    right: 0;
    bottom: 30px;

    width: 250px;

    opacity: 0.07;

    pointer-events: none;
}


/* =========================================================
   SLOGAN
   ========================================================= */

.redecare-slogan {
    position: relative;

    text-align: center;

    z-index: 3;
}

.redecare-slogan h2 {
    margin: 0;

    color: #ffffff;

    font-family: "Roboto Condensed", Arial, sans-serif;

    font-size: 34px;

    font-weight: 400;

    line-height: 1.2;
}

.redecare-slogan p {
    margin: 8px 0 0;

    color: #C1272D;

    font-family: "Roboto Condensed", Arial, sans-serif;

    font-size: 23px;

    font-weight: 400;

    font-style: italic;

    line-height: 1.3;
}


/* =========================================================
   DIVISOR COM CORAÇÃO
   ========================================================= */

.redecare-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 70%;

    max-width: 800px;

    margin: 40px auto 35px;

    gap: 14px;
}

.redecare-divider-line {
    flex: 1;

    height: 1px;

    background: rgba(255,255,255,0.35);
}

.redecare-divider-heart {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: rgba(255,255,255,0.75);

    font-size: 25px;

    font-family: Arial, sans-serif;

    line-height: 1;
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.redecare-copyright {
    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 900px;

    margin: 0 auto;

    gap: 30px;

    color: rgba(255,255,255,0.90);

    font-family: "Roboto Condensed", Arial, sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.5;
}

.redecare-copyright-left {
    text-align: left;
}

.redecare-copyright-right {
    text-align: right;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .redecare-wave {
        height: 100px;
    }

    .redecare-footer-content {
        min-height: 400px;

        padding: 135px 30px 35px;
    }

    .redecare-slogan h2 {
        font-size: 31px;
    }

    .redecare-slogan p {
        font-size: 21px;
    }

    .redecare-divider {
        width: 80%;
    }

    .redecare-watermark-left {
        width: 180px;
        left: -20px;
    }

    .redecare-watermark-right {
        width: 190px;
        right: -20px;
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .redecare-wave {
        height: 85px;
    }

    .redecare-footer-content {
        min-height: 390px;

        padding: 115px 20px 30px;
    }

    .redecare-slogan h2 {
        font-size: 27px;

        line-height: 1.25;
    }

    .redecare-slogan p {
        font-size: 18px;

        line-height: 1.4;

        margin-top: 8px;
    }

    .redecare-divider {
        width: 100%;

        margin-top: 30px;
        margin-bottom: 28px;

        gap: 10px;
    }

    .redecare-divider-heart {
        width: 28px;
        height: 28px;

        font-size: 21px;
    }

    .redecare-copyright {
        flex-direction: column;

        gap: 8px;

        text-align: center;

        font-size: 12px;
    }

    .redecare-copyright-left,
    .redecare-copyright-right {
        text-align: center;
    }

    .redecare-watermark-left {
        width: 140px;

        left: -35px;

        bottom: 15px;
    }

    .redecare-watermark-right {
        width: 150px;

        right: -35px;

        bottom: 15px;
    }

}


/* =========================================================
   CELULAR PEQUENO
   ========================================================= */

@media (max-width: 380px) {

    .redecare-footer-content {
        padding-top: 105px;
    }

    .redecare-slogan h2 {
        font-size: 24px;
    }

    .redecare-slogan p {
        font-size: 16px;
    }

    .redecare-copyright {
        font-size: 11px;
    }

}