/* =====================================================
   PORFIRIONEWS 1.1
   Projeto Atlas
   MÓDULO 1 - BASE
===================================================== */

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

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

/* =====================================================
   PALETA OFICIAL
===================================================== */

:root{

    --cor-principal:#c62828;
    --cor-principal-hover:#a32020;

    --preto:#111111;

    --texto:#222222;

    --texto-claro:#666666;

    --cinza:#f5f5f5;

    --borda:#e5e5e5;

    --azul-clima:#eef7ff;

    --verde:#2e7d32;

    --laranja:#ef6c00;

    --vermelho:#d32f2f;

    --raio:10px;

    --sombra:0 5px 18px rgba(0,0,0,.08);

    --transicao:.25s;

}

/* =====================================================
   BODY
===================================================== */

body{

    font-family:"Inter",Arial,sans-serif;

    background:#fff;

    color:var(--texto);

    line-height:1.6;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transicao);

}

/* =====================================================
   CONTAINER PRINCIPAL
===================================================== */

main{

    width:min(1300px,95%);

    margin:35px auto 60px;

}

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

header{

    background:var(--preto);

    padding:18px 35px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    flex-wrap:wrap;

}

.logo img{

    height:82px;

}

/* =====================================================
   MENU
===================================================== */

nav{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

    flex-wrap:wrap;

}

nav a{

    color:#fff;

    font-size:14px;

    font-weight:700;

    letter-spacing:.3px;

    white-space:nowrap;

}

nav a:hover{

    color:var(--cor-principal);

}

/* =====================================================
   BUSCA
===================================================== */

header form{

    display:flex;

    gap:6px;

}

header input{

    width:240px;

    padding:11px 14px;

    border:none;

    border-radius:6px;

    outline:none;

}

header button{

    padding:11px 18px;

    border:none;

    border-radius:6px;

    background:var(--cor-principal);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:var(--transicao);

}

header button:hover{

    background:var(--cor-principal-hover);

}

/* =====================================================
   TÍTULOS
===================================================== */

h1,h2,h3{

    line-height:1.2;

}

hr{

    border:none;

    border-top:1px solid var(--borda);

    margin:45px 0;

}

/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media(max-width:900px){

header{

    justify-content:center;

}

nav{

    justify-content:flex-start;

    overflow-x:auto;

    flex-wrap:nowrap;

    padding-bottom:5px;

    scrollbar-width:none;

}

nav::-webkit-scrollbar{

    display:none;

}

header input{

    width:190px;

}

}

@media(max-width:600px){

header{

    padding:18px;

}

.logo img{

    height:65px;

}

header form{

    width:100%;

}

header input{

    flex:1;

    width:auto;

}

}

/* =====================================================
   PORFIRIONEWS 1.1
   Projeto Atlas
   MÓDULO 2 - CENTRAL DO TEMPO
===================================================== */

.barra-servicos{

    background:var(--azul-clima);

    border-bottom:4px solid #9fd3ff;

    border-radius:0 0 12px 12px;

    box-shadow:var(--sombra);

    padding:18px 25px;

    margin-bottom:35px;

}

.linha-clima{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.bloco-temperatura{

    display:flex;

    align-items:center;

    gap:18px;

}

.icone{

    font-size:56px;

    line-height:1;

    animation:flutuar 4s ease-in-out infinite;

}

@keyframes flutuar{

    0%{transform:translateY(0);}

    50%{transform:translateY(-4px);}

    100%{transform:translateY(0);}

}

.graus{

    font-size:54px;

    font-weight:800;

    line-height:1;

    color:var(--preto);

}

.sensacao{

    margin-top:6px;

    font-size:15px;

    color:var(--cor-principal);

    font-weight:700;

}

.cidade{

    margin-top:6px;

    font-size:15px;

    color:var(--texto-claro);

}

.bloco-info{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    justify-content:flex-end;

}

.bloco-info span{

    background:#ffffff;

    padding:10px 16px;

    border-radius:25px;

    font-size:14px;

    font-weight:600;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.linha-alerta{

    margin-top:18px;

    padding-top:15px;

    border-top:1px solid rgba(0,0,0,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    font-size:15px;

    font-weight:600;

}

.hora{

    color:var(--texto-claro);

    white-space:nowrap;

}


/* ---------- Responsividade ---------- */

@media(max-width:900px){

.linha-clima{

    flex-direction:column;

    align-items:flex-start;

}

.bloco-info{

    justify-content:flex-start;

}

.linha-alerta{

    flex-direction:column;

    align-items:flex-start;

}

.graus{

    font-size:42px;

}

.icone{

    font-size:46px;

}

}

@media(max-width:600px){

.barra-servicos{

    padding:15px;

}

.bloco-info{

    gap:10px;

}

.bloco-info span{

    padding:8px 12px;

    font-size:13px;

}

}

/* =====================================================
   PORFIRIONEWS 1.1
   Projeto Atlas
   MÓDULO 3 - HOME
===================================================== */

/* ===============================
   MANCHETE PRINCIPAL
=============================== */

.manchete-principal{

    margin-bottom:45px;

}

.tag{

    display:inline-block;

    background:var(--cor-principal);

    color:#fff;

    padding:6px 12px;

    border-radius:5px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:15px;

}

.imagem-manchete{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:12px;

    margin-bottom:20px;

}

.manchete-principal h1{

    font-size:46px;

    line-height:1.15;

    margin-bottom:18px;

}

.manchete-principal h1 a{

    color:var(--preto);

}

.manchete-principal h1 a:hover{

    color:var(--cor-principal);

}

.manchete-principal p{

    font-size:21px;

    color:var(--texto-claro);

    line-height:1.5;

}

/* ===============================
   NOTÍCIAS SECUNDÁRIAS
=============================== */

.grid-secundarias{

    display:grid;

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

    gap:30px;

    margin-bottom:45px;

}

.card-secundaria{

    transition:var(--transicao);

}

.card-secundaria:hover{

    transform:translateY(-4px);

}

.card-secundaria img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:10px;

    margin-bottom:14px;

}

.card-secundaria h2{

    font-size:28px;

    line-height:1.25;

    margin-bottom:12px;

}

.card-secundaria h2 a{

    color:var(--preto);

}

.card-secundaria h2 a:hover{

    color:var(--cor-principal);

}

.card-secundaria p{

    color:var(--texto-claro);

    font-size:17px;

}

/* ===============================
   ÚLTIMAS NOTÍCIAS
=============================== */

.grid-ultimas{

    display:grid;

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

    gap:22px;

    margin-top:25px;

}

.card-noticia{

    background:#fff;

    border:1px solid var(--borda);

    border-radius:10px;

    overflow:hidden;

    transition:var(--transicao);

}

.card-noticia:hover{

    transform:translateY(-4px);

    box-shadow:var(--sombra);

}

.imagem-card{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

}

.card-noticia .categoria{

    display:inline-block;

    margin:14px 14px 8px;

    color:var(--cor-principal);

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

}

.card-noticia h2{

    font-size:19px;

    line-height:1.35;

    margin:0 14px 16px;

}

.card-noticia h2 a{

    color:var(--preto);

}

.card-noticia h2 a:hover{

    color:var(--cor-principal);

}

.card-noticia p{

    display:none;

}

/* ===============================
   MAIS LIDAS
=============================== */

.mais-lidas{

    margin-top:25px;

    padding-left:25px;

}

.mais-lidas li{

    margin-bottom:14px;

    font-size:18px;

}

.mais-lidas a{

    color:var(--preto);

}

.mais-lidas a:hover{

    color:var(--cor-principal);

}

/* ===============================
   RESPONSIVIDADE
=============================== */

@media(max-width:1200px){

.grid-ultimas{

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

}

}

@media(max-width:900px){

.manchete-principal h1{

    font-size:36px;

}

.grid-secundarias{

    grid-template-columns:1fr;

}

.grid-ultimas{

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

}

}

@media(max-width:600px){

.grid-ultimas{

    grid-template-columns:1fr;

}

.card-noticia h2{

    font-size:20px;

}

}

/* =====================================================
   PORFIRIONEWS 1.1
   Projeto Atlas
   MÓDULO 4 - PÁGINA DA NOTÍCIA
===================================================== */

/* ===========================
   ARTIGO
=========================== */

.pagina-noticia{

    max-width:850px;

    margin:0 auto;

}

/* Categoria */

.pagina-noticia .categoria{

    display:inline-block;

    background:var(--cor-principal);

    color:#fff;

    padding:6px 12px;

    border-radius:5px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;

}

/* Título */

.pagina-noticia h1{

    font-size:48px;

    line-height:1.15;

    margin-bottom:18px;

}

/* Subtítulo */

.pagina-noticia h3{

    font-size:24px;

    line-height:1.5;

    color:#555;

    font-style:italic;

    font-weight:400;

    margin:25px 0;

}

/* Autor */

.meta-noticia{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    align-items:center;

    color:#777;

    font-size:15px;

    margin-bottom:25px;

}

.meta-noticia strong{

    color:#222;

}

/* Foto */

.imagem-noticia{

    width:100%;

    border-radius:12px;

    margin:30px 0;

}

/* Texto */

.conteudo-noticia{

    font-size:22px;

    line-height:1.9;

    color:#222;

}

.conteudo-noticia p{

    margin-bottom:22px;

}

.conteudo-noticia h2{

    margin:40px 0 20px;

}

.conteudo-noticia h3{

    margin:35px 0 18px;

    font-style:normal;

    color:#222;

}

.conteudo-noticia img{

    width:100%;

    border-radius:10px;

    margin:30px 0;

}

/* Links */

.conteudo-noticia a{

    color:var(--cor-principal);

    font-weight:600;

}

.conteudo-noticia a:hover{

    text-decoration:underline;

}

/* Compartilhar */

.compartilhar{

    margin:45px 0;

    padding:20px;

    background:#fafafa;

    border:1px solid var(--borda);

    border-radius:10px;

}

.compartilhar h3{

    margin-bottom:15px;

}

.compartilhar a{

    display:inline-block;

    margin-right:12px;

    padding:10px 16px;

    background:var(--cor-principal);

    color:#fff;

    border-radius:6px;

    font-weight:600;

}

.compartilhar a:hover{

    background:var(--cor-principal-hover);

}

/* Leia também */

.leia-tambem{

    margin-top:45px;

}

.leia-tambem li{

    margin-bottom:12px;

    font-size:18px;

}

.leia-tambem a{

    color:#222;

}

.leia-tambem a:hover{

    color:var(--cor-principal);

}

/* Responsividade */

@media(max-width:900px){

.pagina-noticia{

    max-width:100%;

}

.pagina-noticia h1{

    font-size:36px;

}

.pagina-noticia h3{

    font-size:21px;

}

.conteudo-noticia{

    font-size:20px;

}

}

@media(max-width:600px){

.pagina-noticia h1{

    font-size:30px;

}

.conteudo-noticia{

    font-size:19px;

    line-height:1.8;

}

.meta-noticia{

    font-size:14px;

}

}

/* =====================================================
   PORFIRIONEWS 1.1
   Projeto Atlas
   MÓDULO 5 - DASHBOARD
===================================================== */

.dashboard{

    width:min(1200px,95%);

    margin:40px auto;

}

.dashboard h1{

    font-size:40px;

    margin-bottom:15px;

}

.cards-dashboard{

    display:grid;

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

    gap:20px;

    margin:35px 0;

}

.card-dashboard{

    background:#fff;

    border:1px solid var(--borda);

    border-radius:12px;

    padding:28px;

    text-align:center;

    transition:var(--transicao);

    box-shadow:var(--sombra);

}

.card-dashboard:hover{

    transform:translateY(-4px);

}

.card-dashboard .icone{

    font-size:42px;

    margin-bottom:15px;

}

.card-dashboard h2{

    font-size:36px;

    margin-bottom:8px;

    color:var(--cor-principal);

}

.card-dashboard p{

    color:var(--texto-claro);

    font-size:15px;

}

.botao-dashboard{

    display:inline-block;

    background:var(--cor-principal);

    color:#fff;

    padding:12px 18px;

    margin:8px 8px 0 0;

    border-radius:8px;

    font-weight:600;

}

.botao-dashboard:hover{

    background:var(--cor-principal-hover);

}

@media(max-width:900px){

.cards-dashboard{

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

}

}

@media(max-width:600px){

.cards-dashboard{

    grid-template-columns:1fr;

}

.botao-dashboard{

    display:block;

    text-align:center;

}

}

/* =====================================================
   PORFIRIONEWS 1.1
   Projeto Atlas
   MÓDULO 6 - RODAPÉ
===================================================== */

footer{

    margin-top:70px;

    background:#111;

    color:#ddd;

    padding:40px 20px;

    text-align:center;

}

footer a{

    color:#fff;

    margin:0 8px;

}

footer a:hover{

    color:var(--cor-principal);

}

footer p{

    margin-top:18px;

    font-size:14px;

    color:#999;
}
footer .logo img{

    width:180px;

    height:auto;

    margin:0 auto 20px;

}

footer{

    padding:30px 20px;

}

/* =====================================================
   RODAPÉ
===================================================== */

.rodape{

    background:#111;

    color:#ddd;

    text-align:center;

    padding:35px 20px;

    margin-top:70px;

}

.logo-rodape{

    width:180px;

    height:auto;

    margin:0 auto 20px;

}

.rodape h3{

    color:#fff;

    font-size:28px;

    margin-bottom:10px;

}

.rodape p{

    max-width:700px;

    margin:8px auto;

    line-height:1.7;

}

.rodape a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.rodape a:hover{

    color:var(--cor-principal);

}

@media(max-width:600px){

.logo-rodape{

    width:140px;

}

.rodape{

    padding:25px 15px;

}

}

/* =====================================================
   UTILIDADES
===================================================== */

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}