@charset "UTF-8";

body{
    background: #FFF4E6 ;
    
}

select{
    width: 170px; /*largura*/
    height: 25px; /*Altura*/
}

div.container{
    width: 90%;           /* largura do quadrado */
    margin: 80px auto 0 auto;      /* espaço entre a margem superior do site */
    padding: 20px 20px 5px 20px; /* cima | direita | baixo | esquerda - espaço interno*/
    background-color: #FFF7ED; /* cor do fundo */
    border: 2px solid #d3d3d3; /* borda */
    border-radius: 10px;  /* bordas arredondadas (opcional) */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* sombra leve */
    padding-bottom: 10px;
    height: 600px;
   
}

div.containerformulario{
    width: 30%;  /* largura do container em relação ao elemento pai */
    margin-left: 30px;   /* Cria um espaço externo do lado esquerdo.
       Afasta o container do lado esquerdo do site
       ou de outros elementos. */
    padding: 30px;  /* Cria um espaço interno.
       Afasta o conteúdo (textos, inputs)
       das bordas do container. */
    border-radius: 10px;   /* Arredonda os cantos do container.
       Quanto maior o valor, mais arredondado fica. */
    background-color:#FFF0E0;  /* Define a cor de fundo do container.
       Aqui você escolheu um tom de rosa. */
    flex-direction: column; /*um embaixo do outro*/
    text-align: left; /*coloca o conteúdo do formulário a esquerda*/
     min-height: auto;    /* deixa a altura crescer só conforme o conteúdo */
  
}

#mensagem{
    height: 50px;     /* altura ideal: nem pequeno, nem grande */
}   

div.containerformulario h1{
    text-align: center; /*Centraliza o texto*/
    color: #6F4E37;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
}

div.containerformulario label{
    display: block;          /* força ficar em cima */
    margin-bottom: 6px;      /* espaço entre nome e campo */
    font-weight: 500;
    margin-left: 30px; /*usei para mover o label*/
    margin-right: 30px; /*usei para mover o label*/
    color: #6F4E37;
    font-weight: bold; /*negrito*/
}


div.containerformulario input,
div.containerformulario select {
    width: 80%;          /* largura do campo em relação ao formulário */
    padding: 10px;       /* espaço interno dentro do campo (altura e conforto) */
    margin-bottom: 20px; /* espaço entre um campo e outro */
    border-radius: 8px;  /* deixa as bordas arredondadas */
    border: 1px solid #ccc; /* cor e espessura da borda */
    
}

div.containerformulario input:focus,
div.containerformulario select:focus{
    border-color: #FF9F43;
    /* muda a cor da borda quando o campo está selecionado */

    outline: none;
    /* remove a borda azul padrão do navegador */

    box-shadow: 0 0 5px rgba(255, 159, 67, 0.5);
    /* cria um brilho suave ao redor do campo */
}

div.containermenu{
    display: flex;
    flex-direction: column; /* título em cima, menu embaixo */
    align-items: flex-start; /* tudo alinhado à esquerda */
    width: 100%;
    margin: -40px -20px 20px -20px; /* anula o padding do container */  /* espaço externo: cima | direita | baixo | esquerda */
    padding-top: 10px;    /* espaço interno ENTRE o topo do container e o conteúdo */
    padding-bottom: 0px;  /* espaço interno ENTRE a parte de baixo do container e o conteúdo */
    padding-left: 40px;   /* espaço interno ENTRE o lado esquerdo e o conteúdo */
    padding-right: 2px;  /* espaço interno ENTRE o lado direito e o conteúdo */
    background-color:#FFE2C6 ;
    border-radius: 10px 10px 0 0;   /* Arredonda os cantos do container.
       Quanto maior o valor, mais arredondado fica. */
    
    
}

div.containermenu h2{
    color: #6F4E37;
    display: flex;          /* imagem e texto lado a lado */
    align-items: center;    /* alinha verticalmente */
    gap: 10px;  
    font-size: 26px;            /* espaço entre a pata e o texto */
    font-family: 'Poppins', sans-serif;
}

div.containermenu header{
    display: flex; /* Ativa o Flexbox.
   Faz com que os elementos filhos (título e menu)
   fiquem organizados em linha, lado a lado. */
    align-items: center;   /* Alinha os itens na vertical.
   Deixa o texto do título e o menu
   centralizados na altura do container. */
    justify-content: space-between;   /* Cria um espaço entre os itens.
   Joga o primeiro elemento (título) para a esquerda
   e o último elemento (menu) para a direita. */
    width: 100%; /* Faz o header ocupar toda a largura disponível.
   Assim o Flexbox consegue separar corretamente
   o título de um lado e o menu do outro. */
}

.topo{
    display: flex;            /* coloca os elementos lado a lado */
    align-items: center;      /* alinha imagem e texto no centro vertical */
    gap: 10px;                /* espaço entre a pata e o texto */
}

nav#menu {
    display: block; /*Um bloco pode flutuar na tela*/
   
   
}

nav#menu ul{
    display: flex;
    align-items: center;
    list-style: none; /*Sumir com marcadores*/
    text-transform: uppercase; /*Letras do menu maiúsculas*/
    position: relative; /*fica dentro do container*/
    margin: 0;
    padding: 0;
    font-weight: bold;
    
   
}   

nav#menu li{
    display: inline-block; /*Faz com que o bloco seja exibido na mesma linha*/
    padding: 5px; /*vai criar um espaço dentro da caixa*/
    margin: 30px; /*espaço fora da caixa*/
   
}

nav#menu a{
    color: #6F4E37; /*Cor do link*/
    text-decoration: none; /*para tirar o sublinhado do link*/
    transition: color 0.3s ease;
    /* transition → animação suave
       color → cor do texto
       0.3s → tempo da animação
       ease → suaviza a mudança */
}

nav#menu a:hover{
    color: #F28C28;
    /* muda a cor do texto quando passa o mouse */
}

div.containerformulario input{
    border-radius: 7px;
    width: 80%; /*largura do campo*/
    height: 20px; /*altura*/
    padding: 5px; /*espaço interno (melhora aparência)*/
    margin-left: 30px; /*centralizar o campo*/
    margin-right: 30px; /*centralizar o campo*/
    
}

div.containerformulario select{
    border-radius: 7px;
    width: 83%;
    height: 20%;
    padding: 2%;
    margin-left: 30px;
    margin-right: 30px;
}

div.containerformulario button{
    width: 40%;
    height: 40px;
    border-radius: 20px;
    font-family: Arial, sans-serif; /*tipo da letra*/
    color: white;     /* cor da letra */
    font-size: 16px; /*tamanho da letra*/
    background-color: #FF9F43; /*cor do botão*/
    border: none;
    font-weight: bold; /*controla o “peso” da letra - bold → deixa em negrito*/
    margin-left: 120px;
    margin-right: 30px;
       transition: background-color 0.3s ease;
    /* transition → ativa animação suave
       background-color → propriedade que vai animar
       0.3s → duração da animação (0.3 segundos)
       ease → deixa a animação começar e terminar suavemente */
}

div.containerformulario button:hover{
    background-color: #F28C28;
    /* muda a cor do botão quando o mouse passa por cima */
}

.logo-pata{
    width: 50px;   /* controla o tamanho */
    height: auto;  /* mantém a proporção */
    
}


div.foto-catdog{
    width: 600px;   /* controla o tamanho */
    display: flex;   /* ativa flexbox dentro da div da imagem */
    justify-content: flex-end;   /* empurra a imagem para a direita */
    margin-left: 100px;         /* afasta a div do lado esquerdo do formulário */  
    align-self: flex-start; /* sobe a imagem */
    margin-top: -160px;  /* sobe a imagem visualmente */
}


div.foto-catdog img{
    max-width: 100%; /* impede a imagem de ultrapassar o tamanho da div */
    height: auto;  /* mantém a proporção (não estica a imagem) */
    display: block;  /* remove pequenos espaços embaixo */
}

div.conteudo{
    display: flex;              /* coloca lado a lado */
   justify-content: flex-start; /* mantém os elementos próximos */
    gap: 50px;                   /* espaço entre formulário e imagem */
    align-items: flex-start;     /* alinha pelo topo */

}