/* =========================================================
TRATAMENTO DE DADOS DOS PACIENTES
Hospital Dr. Adolfo Bezerra de Menezes
========================================================= */


/* =========================================================
RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter', sans-serif;

    color:#13233b;

    background:#fff;

    overflow-x:hidden;

    line-height:1.6;
}

.container{
    width:90%;
    max-width:1300px;

    margin:0 auto;
}

section{
    padding:70px 0;
}


/* =========================================================
HERO
========================================================= */

.hero-dados{

    min-height:62vh;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            rgba(19,35,59,.76),
            rgba(19,35,59,.76)
        ),
        url("../Imagens/teste1.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content{
    color:#fff;
}

.hero-content span{

    display:inline-block;

    margin-bottom:18px;

    color:#67cbbf;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;
}

.hero-content h1{

    max-width:900px;

    margin-bottom:22px;

    font-size:58px;
    font-weight:800;

    line-height:1.1;
}

.hero-content p{

    max-width:760px;

    font-size:19px;

    line-height:1.8;

    opacity:.96;
}


/* =========================================================
INTRODUÇÃO
========================================================= */

.introducao-dados{

    padding:75px 0 55px;

    background:#fff;
}

.titulo-central{

    max-width:850px;

    margin:0 auto;

    text-align:center;
}

.titulo-central span{

    display:block;

    margin-bottom:14px;

    color:#67cbbf;

    font-size:13px;
    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;
}

.titulo-central h2{

    margin-bottom:18px;

    color:#13233b;

    font-size:40px;
    font-weight:800;

    line-height:1.25;
}

.titulo-central p{

    color:#667085;

    font-size:17px;

    line-height:1.8;
}


/* =========================================================
SEÇÕES
========================================================= */

.dados-section{

    padding:70px 0;

    background:#fff;
}

.fundo-claro{

    background:#f7f9fb;
}


/* =========================================================
TÍTULO DA SEÇÃO
========================================================= */

.titulo-secao{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:35px;

    padding-bottom:20px;

    border-bottom:1px solid #e5edf1;
}

.titulo-secao > span{

    width:42px;
    height:42px;

    min-width:42px;

    display:flex;

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

    border-radius:50%;

    background:#67cbbf;

    color:#fff;

    font-size:14px;
    font-weight:800;
}

.titulo-secao small{

    display:block;

    margin-bottom:6px;

    color:#67cbbf;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.7px;

    text-transform:uppercase;
}

.titulo-secao h2{

    color:#13233b;

    font-size:31px;
    font-weight:800;

    line-height:1.25;
}


/* =========================================================
TEXTOS
========================================================= */

.texto-dados{

    max-width:900px;

    margin-bottom:25px;

    color:#59697a;

    font-size:16px;

    line-height:1.85;
}

.texto-dados p{
    margin-bottom:15px;
}


/* =========================================================
DESTAQUE
========================================================= */

.destaque-dados{

    max-width:900px;

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:22px;

    border:1px solid #dceceb;

    border-radius:14px;

    background:#f5fbfa;
}

.destaque-icone{

    width:38px;
    height:38px;

    min-width:38px;

    display:flex;

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

    border-radius:50%;

    background:#67cbbf;

    color:#fff;

    font-weight:800;
}

.destaque-dados strong{

    display:block;

    margin-bottom:5px;

    color:#13233b;

    font-size:15px;
}

.destaque-dados p{

    color:#667085;

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
ORIGENS
========================================================= */

.origens-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:25px;
}

.origem-card{

    padding:28px;

    background:#fff;

    border:1px solid #e3ebef;

    border-radius:15px;

    box-shadow:0 5px 18px rgba(19,35,59,.045);

    transition:.25s;
}

.origem-card:hover{

    transform:translateY(-4px);

    border-color:#67cbbf;

    box-shadow:0 10px 25px rgba(19,35,59,.08);
}

.origem-icone{

    width:50px;
    height:50px;

    display:flex;

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

    margin-bottom:18px;

    border-radius:12px;

    background:rgba(103,203,191,.10);

    font-size:24px;
}

.origem-card h3{

    margin-bottom:9px;

    color:#13233b;

    font-size:17px;
    font-weight:700;
}

.origem-card p{

    color:#667085;

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
OBSERVAÇÃO
========================================================= */

.observacao-dados{

    padding:22px;

    border-left:4px solid #67cbbf;

    background:#fff;

    border-radius:0 12px 12px 0;

    box-shadow:0 3px 12px rgba(19,35,59,.04);
}

.observacao-dados strong{

    display:block;

    margin-bottom:7px;

    color:#13233b;

    font-size:15px;
}

.observacao-dados p{

    color:#667085;

    font-size:14px;

    line-height:1.75;
}


/* =========================================================
CATEGORIAS DE DADOS
========================================================= */

.categorias-dados{

    display:grid;

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

    gap:18px;
}

.categoria-dado{

    display:flex;

    gap:18px;

    padding:25px;

    background:#fff;

    border:1px solid #e3ebef;

    border-radius:14px;

    box-shadow:0 4px 15px rgba(19,35,59,.035);
}

.categoria-numero{

    width:40px;
    height:40px;

    min-width:40px;

    display:flex;

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

    border-radius:9px;

    background:rgba(103,203,191,.12);

    color:#58beb2;

    font-size:12px;
    font-weight:800;
}

.categoria-dado h3{

    margin-bottom:7px;

    color:#13233b;

    font-size:17px;
}

.categoria-dado p{

    color:#667085;

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
UTILIZAÇÃO
========================================================= */

.utilizacao-grid{

    display:grid;

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

    gap:18px;
}

.utilizacao-card{

    padding:25px;

    background:#fff;

    border:1px solid #e3ebef;

    border-radius:14px;

    box-shadow:0 4px 15px rgba(19,35,59,.035);

    transition:.25s;
}

.utilizacao-card:hover{

    transform:translateY(-4px);

    border-color:#67cbbf;
}

.utilizacao-icone{

    width:46px;
    height:46px;

    display:flex;

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

    margin-bottom:17px;

    border-radius:11px;

    background:rgba(103,203,191,.10);

    font-size:21px;
}

.utilizacao-card h3{

    margin-bottom:8px;

    color:#13233b;

    font-size:16px;
}

.utilizacao-card p{

    color:#667085;

    font-size:13px;

    line-height:1.7;
}


/* =========================================================
PRONTUÁRIO
========================================================= */

.destaque-section{

    padding:75px 0;

    background:#13233b;
}

.prontuario-card{

    display:flex;

    align-items:flex-start;

    gap:30px;

    padding:40px;

    border-radius:20px;

    background:#fff;
}

.prontuario-icone{

    width:65px;
    height:65px;

    min-width:65px;

    display:flex;

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

    border-radius:16px;

    background:rgba(103,203,191,.12);

    font-size:30px;
}

.prontuario-conteudo > span{

    display:block;

    margin-bottom:8px;

    color:#67cbbf;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.7px;
}

.prontuario-conteudo h2{

    max-width:850px;

    margin-bottom:18px;

    color:#13233b;

    font-size:30px;
    font-weight:800;

    line-height:1.3;
}

.prontuario-conteudo > p{

    max-width:850px;

    margin-bottom:14px;

    color:#667085;

    font-size:15px;

    line-height:1.8;
}

.base-legal{

    margin-top:25px;

    padding:20px;

    border-radius:12px;

    background:#f5f9fa;
}

.base-legal strong{

    display:block;

    margin-bottom:6px;

    color:#13233b;

    font-size:14px;
}

.base-legal p{

    color:#667085;

    font-size:13px;

    line-height:1.7;
}


/* =========================================================
RESPOSTA
========================================================= */

.resposta-card{

    display:grid;

    grid-template-columns:100px 1fr;

    gap:25px;

    align-items:start;

    max-width:1050px;

    padding:30px;

    border:1px solid #dfeaec;

    border-radius:16px;

    background:#f8fbfb;
}

.resposta-sim{

    padding:12px;

    text-align:center;

    border-radius:10px;

    background:#67cbbf;

    color:#fff;

    font-size:15px;
    font-weight:800;
}

.resposta-card p{

    margin-bottom:14px;

    color:#667085;

    font-size:15px;

    line-height:1.8;
}

.nao-comercializa{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:20px;

    padding:16px;

    border-radius:10px;

    background:#fff;

    border:1px solid #e1eceb;
}

.nao-comercializa span{

    font-size:20px;
}

.nao-comercializa strong{

    color:#13233b;

    font-size:14px;
}


/* =========================================================
COMPARTILHAMENTO
========================================================= */

.compartilhamento-intro{

    max-width:900px;

    margin-bottom:28px;
}

.compartilhamento-intro p{

    margin-bottom:12px;

    color:#667085;

    font-size:15px;

    line-height:1.8;
}

.compartilhamento-grid{

    display:grid;

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

    gap:18px;
}

.compartilhamento-card{

    padding:25px;

    background:#fff;

    border:1px solid #e3ebef;

    border-radius:14px;
}

.compartilhamento-numero{

    display:inline-flex;

    width:35px;
    height:35px;

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

    margin-bottom:15px;

    border-radius:50%;

    background:#13233b;

    color:#67cbbf;

    font-size:12px;
    font-weight:800;
}

.compartilhamento-card h3{

    margin-bottom:8px;

    color:#13233b;

    font-size:16px;
}

.compartilhamento-card p{

    color:#667085;

    font-size:13px;

    line-height:1.7;
}


/* =========================================================
SEGURANÇA
========================================================= */

.seguranca-section{

    padding:75px 0;

    background:#13233b;

    color:#fff;
}

.seguranca-header{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:40px;
}

.seguranca-header > span{

    width:42px;
    height:42px;

    min-width:42px;

    display:flex;

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

    border-radius:50%;

    background:#67cbbf;

    color:#fff;

    font-size:14px;
    font-weight:800;
}

.seguranca-header small{

    display:block;

    margin-bottom:7px;

    color:#67cbbf;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.7px;
}

.seguranca-header h2{

    max-width:850px;

    color:#fff;

    font-size:32px;
    font-weight:800;

    line-height:1.25;
}

.seguranca-conteudo{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;
}

.seguranca-principal{

    padding:30px;

    border:1px solid rgba(255,255,255,.10);

    border-radius:16px;

    background:rgba(255,255,255,.045);
}

.seguranca-icone{

    width:55px;
    height:55px;

    display:flex;

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

    margin-bottom:18px;

    border-radius:13px;

    background:rgba(103,203,191,.14);

    font-size:25px;
}

.seguranca-principal h3{

    margin-bottom:12px;

    color:#fff;

    font-size:20px;
}

.seguranca-principal p{

    margin-bottom:13px;

    color:#d8e0e6;

    font-size:14px;

    line-height:1.8;
}

.seguranca-lista{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.seguranca-item{

    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:16px;

    border-radius:10px;

    background:rgba(255,255,255,.045);
}

.seguranca-item span{

    width:25px;
    height:25px;

    min-width:25px;

    display:flex;

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

    border-radius:50%;

    background:#67cbbf;

    color:#fff;

    font-size:12px;
    font-weight:800;
}

.seguranca-item p{

    color:#d8e0e6;

    font-size:13px;

    line-height:1.6;
}

.seguranca-final{

    margin-top:25px;

    padding:20px;

    border-left:3px solid #67cbbf;

    background:rgba(255,255,255,.045);

}

.seguranca-final p{

    color:#d8e0e6;

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
LGPD
========================================================= */

.lgpd-section{

    padding:55px 0;

    background:#f7fafb;
}

.lgpd-card{

    display:flex;

    align-items:center;

    gap:22px;

    padding:30px;

    border:1px solid #e1eceb;

    border-radius:16px;

    background:#fff;

    box-shadow:0 6px 20px rgba(19,35,59,.05);
}

.lgpd-icone{

    width:60px;
    height:60px;

    min-width:60px;

    display:flex;

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

    border-radius:15px;

    background:rgba(103,203,191,.11);

    color:#58beb2;

    font-size:28px;
}

.lgpd-card span{

    display:block;

    margin-bottom:5px;

    color:#67cbbf;

    font-size:11px;
    font-weight:700;

    letter-spacing:1.6px;
}

.lgpd-card h2{

    margin-bottom:7px;

    color:#13233b;

    font-size:23px;
    font-weight:800;
}

.lgpd-card p{

    color:#667085;

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
RESPONSIVO
========================================================= */

@media(max-width:1100px){

    .utilizacao-grid,
    .compartilhamento-grid{

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

}


@media(max-width:900px){

    .hero-content h1{
        font-size:48px;
    }

    .origens-grid{

        grid-template-columns:1fr;
    }

    .seguranca-conteudo{

        grid-template-columns:1fr;
    }

}


@media(max-width:768px){

    section{
        padding:55px 0;
    }

    .hero-dados{
        min-height:55vh;
    }

    .hero-content h1{
        font-size:40px;
    }

    .hero-content p{
        font-size:17px;
    }

    .titulo-central h2{
        font-size:32px;
    }

    .titulo-secao h2{
        font-size:26px;
    }

    .categorias-dados{

        grid-template-columns:1fr;
    }

    .prontuario-card{

        flex-direction:column;

        padding:28px;
    }

    .resposta-card{

        grid-template-columns:1fr;
    }

    .seguranca-header h2{
        font-size:27px;
    }

    .lgpd-card{

        align-items:flex-start;
    }

}


@media(max-width:550px){

    .hero-content h1{
        font-size:34px;
    }

    .hero-content p{
        font-size:16px;
    }

    .titulo-central h2{
        font-size:27px;
    }

    .titulo-central p{
        font-size:15px;
    }

    .utilizacao-grid,
    .compartilhamento-grid{

        grid-template-columns:1fr;
    }

    .titulo-secao{

        gap:12px;
    }

    .titulo-secao > span{

        width:36px;
        height:36px;

        min-width:36px;

        font-size:12px;
    }

    .titulo-secao h2{

        font-size:23px;
    }

    .categoria-dado{

        padding:20px;
    }

    .prontuario-conteudo h2{

        font-size:24px;
    }

    .seguranca-header h2{

        font-size:24px;
    }

    .lgpd-card{

        flex-direction:column;

        padding:25px;
    }

}