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

body{
font-family: Candara, sans-serif;
background:#f5f5f5;
color:#222;
line-height:1.6;
}

/* NAVBAR */

nav, .topnav {
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
background:white;
box-shadow:0 2px 5px rgba(1,87,23,0.5);
}

nav ul, .topnav ul{
list-style:none;
font-size:1.0pc;
display:flex;
padding: 5;
margin: 10;
gap:20px;
}

nav a, .topnav a{
text-decoration:none;
color:#053d16;
font-weight:bold;
font-family:'Times New Roman', serif;
font-size:1.2em;
}

.logo{
font-size:1.7em;
font-weight: normal;
font-weight:bold;
color:#2d6a4f;
}

/* HERO */

.hero{
background:url("imagens/leopardodeamur.jpg") no-repeat center center;
background-size:cover;
height:100vh;
display:flex;
color: #f5f5f5;
flex-direction:column;
justify-content:space-between;

}

.hero-text{
font-family:'Candara', sans-serif;
font-size:1.5em;
line-height:3;
text-align: center;
margin-bottom: 120px;
margin-bottom: 30px;
}

.hero-text h1{
font-family:'Times New Roman', serif;
font: size 2.5em;
font-weight:bold;
letter-spacing:2px;
color:white;
text-transform:uppercase;
margin: bottom 20px;

}

.btn{
background:#e1a147;
padding:12px 50px;
color:white;
text-decoration:none;
border-radius:70px;
font-weight:bold;
}

/* SOBRE */

.sobre{
padding:60px 20px;
font-family:'Candara', serif;
text-align:center;
font-weight: 900;
max-width:900px;
margin:auto;
}

/* CONTAINER */

.container{
padding:40px 20px;
max-width:1700px;
margin:auto;
margin-bottom: 30px;

}

/* CARDS */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
gap:70px;
font-family:'Cambria', serif;

}

.card{
background:rgb(197,216,201);
border-radius:50px;
box-shadow:0 4px 10px rgba(0,0,0,0.25);
overflow:hidden;
transition:0.3s;
text-decoration: none;
color: #222;

}

.card img{
width:100%;
height:200px;
object-fit:cover;
}

h1{
 margin-bottom: 40px;
}

.card h3{
margin:20px;
text-align:center;
font-family:'Cambria', serif;
font-size:1.3rem;
font-weight:bold;

}

.card p{
margin:0 15px 20px;
font-family:'Cambria', serif;
font-size:1rem;
font-weight:bold;
text-align:center;

}

.card:hover{
transform:translateY(-8px);
margin-bottom: 30px;

}

.li{
font-weight:bold;

}


/* PÁGINA DOS ANIMAIS */

.animal-page{
display:flex;
align-items:center;
justify-content:center;
gap:60px;
max-width:1100px;
margin:60px auto;
padding:20px;
}

.animal-img{
flex:1;
}


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


.animal-img img{
width:100%;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.animal-text{
flex:1;
}

.animal-text h1{
font-size:40px;
margin-bottom:10px;
}

.mapa h2{
text-align: center;
font-size:40px;
margin-bottom:10px;
}

.animal-text h3{
font-size:20px;
margin-bottom:10px;
color: crimson;
}

.subtitulo{
color:#2d6a4f;
font-weight:bold;
margin-bottom:20px;
font-size:18px;
}

.animal-text p{
line-height:1.6;
margin-bottom:15px;
font-weight:bold;

}

.mapa iframe{
width:100%;
height:400px;
border-radius:10px;
border:none;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* BOTÃO VOLTAR */

.voltar{
display:inline-block;
margin-top:20px;
background:#2d6a4f;
color:white;
padding:10px 20px;
text-decoration:none;
border-radius:6px;
font-weight:bold;
}

/* FOOTER */

footer{
text-align:center;
padding:20px;
background:#468907;
color:white;
margin-top:40px;
}

/* CURIOSIDADES */

.curiosidade{
margin-top:15px;
font-style:italic;
color:#1b4332;
font-weight:bold;
}

.btn-curiosidade{
background:#2d6a4f;
color:white;
border:none;
padding:10px 20px;
border-radius:20px;
cursor:pointer;
margin-top:10px;
}

/* POPULAÇÃO */

.populacao{
width:100%;
height:20px;
background:#ddd;
border-radius:20px;
overflow:hidden;
margin-top:10px;
}

.barra{
height:100%;
background:#e63946;
}

/* BOTÃO MAPA */

.btn-mapa{
display:block;
margin:20px auto;
padding:10px 20px;
background:#e1a147;
border:none;
color:white;
font-weight:bold;
border-radius:20px;
cursor:pointer;
}

/* SCROLL ANIMATION */

.reveal{
opacity:0;
transform:translateY(40px);
transition:0.8s;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* INTRO */

.intro{
max-width:800px;
margin:auto;
text-align:center;
font-size:1.2em;
margin-bottom:40px;
}

/* AMEAÇAS */

.ameacas{
background:#eef6f1;
padding:60px 20px;
text-align:center;
}

.ameaça-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
max-width:1200px;
margin:auto;
}

.ameaça{
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

.ameaça:hover{
transform:translateY(-8px);
}

/* AÇÕES */

.ajuda{
padding:60px 20px;
text-align:center;
}

.acoes{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:40px;
max-width:1000px;
margin:auto;
}

.acao{
background:#c5d8c9;
padding:30px;
border-radius:20px;
font-size:1.2em;
font-weight:bold;
}


/* IMPACTO */
/* Estilo específico para o botão Impacto Humano */
#impactoBtn {
    background-color: #e63946;      /* cor de fundo */
    color: #ffffff;                  /* cor da letra */
    font-family: 'Candara', sans-serif; /* fonte da letra */
    font-size: 1.2rem;               /* tamanho da letra */
    font-weight: bold;               /* peso da letra */
    padding: 12px 30px;              /* espaço interno */
    border-radius: 30px;             /* cantos arredondados */
    border: 2px solid #d62828;      /* borda opcional */
    cursor: pointer;                 /* cursor ao passar o mouse */
    transition: 0.3s all;            /* animação suave */
}

#impactoBtn:hover {
    background-color: #d62828;       /* muda ao passar o mouse */
    color: #ffedda;                  /* cor da letra ao passar o mouse */
    transform: scale(1.05);          /* leve zoom */
}

/* LINHA TEMPORAL ESPÉCIES */

.linha-tempo{
background:#eef6f1;
padding:30px;
border-radius:20px;
text-align:center;
margin-bottom:50px;
}

.texto-tempo{
max-width:700px;
margin:20px auto;
font-size:1.1em;
}

#estado-atual{
margin-top:20px;
font-weight:bold;
color:#9b2226;
}

/* Conservação - harmonização */
.container {
    padding: 50px 20px;
    max-width: 1100px;
    margin: auto;
    background: rgb(197, 216, 201, 0.2);
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.descricao {
    font-family: 'Cambria', serif;
    font-size: 1.2rem;
    margin-bottom: 20px;
    line-height: 1.8;
    text-align: justify;
}

.ameaças {
    margin: 20px 0;
    padding-left: 20px;
    font-weight: bold;
}

.ameaças li {
    margin-bottom: 10px;
}

body.ano-1950 {
  background-color: #ffffff; /* tom mais “passado” */
}

body.ano-presente {
  background-color: #ffffff; /* tom mais “presente” */
}
.btn-container {
    text-align: center;
    margin-top: 30px;
}

.teleporte {
    width: 80px;
    height: 80px;
    margin: 30px auto 0;
    border-radius: 50%;
    background: radial-gradient(circle, #2d6a4f, #053d16);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.teleporte.ativo {
    opacity: 1;
    transform: scale(1.2);
}
/* TELETRANSPORTE */
/* Notificação de transição */
.notificacao {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(45, 106, 79, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    flex-direction: column;
    text-align: center;
    color: white;
    padding: 20px;
    font-family: 'Cambria', serif;
}

.notificacao.ativo {
    opacity: 1;
    pointer-events: all;
}

.notificacao p {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.notificacao .btn {
    padding: 10px 25px;
    font-size: 1rem;
    border-radius: 50px;
    background: #e1a147;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

/* Teleporte visual */
.teleporte {
    width: 80px;
    height: 80px;
    margin: 100px auto 0;
    border-radius: 100%;
    background: (circle, #2d6a4f, #053d16);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.teleporte.ativo {
    opacity: 1;
    transform: scale(1.3);
}

/* Notificação estilo moderno */
.notificacao {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: #e1a147;
    color: #fff;
    padding: 25px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 999;
}

.notificacao.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

.notificacao .btn {
    margin-top: 15px;
    padding: 8px 20px;
    border-radius: 15px;
    background: #053d16;
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

/* Botão Impacto Humano */
#impactoBtn {
    background-color: #e63946;
    color: white;
    font-family: 'Candara', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 30px;
    border: 2px solid #d62828;
    cursor: pointer;
    transition: 0.3s all;
}

#impactoBtn:hover {
    background-color: #d62828;
    color: #ffedda;
    transform: scale(1.05);
}

/* Notificação estilo fade */
.notificacao {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: #4a524c;
    color: #fff;
    padding: 25px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 999;
}

.notificacao.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

.notificacao .btn {
    margin-top: 15px;
    padding: 10px 25px;
    border-radius: 50px;
    background: #e1a147;
    color: #053d16;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

/* Responsivo */
@media (max-width:768px){
    body {
        font-size: 14px;
    }
    .container {
        padding: 20px;
    }
    #impactoBtn {
        width: 80%;
        font-size: 1rem;
        padding: 10px;
    }
    .notificacao {
        width: 90%;
        padding: 20px;
    }
}
@keyframes flash{
from{opacity:0.3;}
to{opacity:1;}
}

/* RESPONSIVO PARA TELEMÓVEL */

@media (max-width:768px){

nav, .topnav{
flex-direction:column;
align-items:center;
padding:15px;
}


nav ul, .topnav ul{
flex-direction:column;
align-items:center;
gap:10px;
margin-top:10px;
}

.logo{
margin-bottom:10px;
}

/* HERO */

.hero{
height:auto;
padding:60px 20px;
text-align:center;
}

.hero-text{
font-size:1.2em;
line-height:1.6;
margin-bottom:40px;
}

.hero-text h1{
font-size:1.8em;
}

/* CARDS */

.cards{
grid-template-columns:1fr;
gap:30px;
}

/* PÁGINA DOS ANIMAIS */

.animal-page{
flex-direction:column;
gap:30px;
text-align:center;
margin:30px auto;
}

.animal-img img{
width:100%;
}

.animal-text h1{
font-size:28px;
}

.mapa iframe{
height:250px;
}

.container{
padding:20px;
}

.sobre{
padding:40px 15px;
}

footer{
font-size:14px;
padding:15px;
}

}