* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  text-decoration: none;
  transition: 0.2s linear;

  -webkit-tap-highlight-color: transparent;
  
}

body {
  background-color: #faedf0;
  padding-top: 100px;
}

/* --- FUNDO ARTÍSTICO EXCLUSIVO (LINE ART BOTÂNICA E MÍSTICA) --- */
body::before {
    content: '';
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; 
    pointer-events: none; 

    /* Injetamos 4 artes em SVG diretamente no código */
    background-image: 
        /* 1. Rosa em botão (Esquerda Superior) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FF3B7C' stroke-width='0.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30,80 C32,65 25,50 35,40 C45,30 30,15 45,10 C60,5 65,25 55,35 C45,45 65,40 70,55 C75,70 50,85 45,95 M35,40 C20,35 15,50 28,55 Z M55,35 C70,30 80,45 65,50 Z' /%3E%3C/svg%3E"),
        /* 2. Rosa mística desabrochando (Direita Inferior) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FF3B7C' stroke-width='0.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50,50 C48,46 52,44 54,46 C56,48 54,52 49,51 C43,49 45,41 53,39 C61,37 65,46 59,54 C51,62 40,54 41,43 C43,31 57,28 66,37 C75,46 66,63 50,65 C31,67 26,49 35,34 C45,17 69,21 74,41 C79,63 57,77 40,73 C20,69 15,44 29,27 C45,7 74,12 81,32 C88,55 69,82 45,80' /%3E%3C/svg%3E"),
        /* 3. Ramo delicado caindo (Direita Superior) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FF3B7C' stroke-width='0.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30,90 Q45,50 70,10 M70,10 Q60,25 45,30 Q50,20 70,10 M55,50 Q40,55 35,70 Q45,65 55,50 M65,30 Q75,45 90,40 Q80,35 65,30' /%3E%3C/svg%3E"),
        /* 4. Centelhas / Estrelas Místicas (Esquerda Inferior) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FF3B7C' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50,10 Q50,45 15,50 Q50,55 50,90 Q50,55 85,50 Q50,45 50,10 Z M20,20 Q20,30 10,30 Q20,30 20,40 Q20,30 30,30 Q20,30 20,20 Z M80,80 Q80,90 70,90 Q80,90 80,100 Q80,90 90,90 Q80,90 80,80 Z' /%3E%3C/svg%3E");
    
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    
    /* Configuração de tamanho para Computadores (As novas artes são menores para dar proporção) */
    background-size: 700px, 600px, 400px, 200px;
    
    /* Espalhamento das 4 artes pela tela do monitor */
    background-position: 
        -200px -150px, /* Rosa Esquerda */
        112% 115%,     /* Rosa Direita */
        95% 10%,       /* Ramo Topo Direito */
        5% 85%;        /* Estrelas Baixo Esquerda */
    
    opacity: 0.05; 
    transition: all 0.5s ease;
}

html, body {
  width: 100%;
  max-width: 100vw; /* Trava a largura máxima na largura da tela */
  overflow-x: hidden; /* O SEGREDO: Esconde qualquer coisa que tente vazar para a direita ou esquerda */
  margin: 0;
  
}

.logoflor {
  width: 100px;
  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.2));
  transition: all 0.3s ease;

}

section {
  padding: 3rem 2rem;
  margin: 0 auto;
  max-width: 1200px;

}

.header {
  font-family: "Nunito Sans", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);

}

.header section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding: 10px 10px;
  max-width: 1600px;
}

.header nav {
  transform: translateX(-90px);
}


.navbar a {
  margin: 0 1rem;
  font-size: 25px;
  color: #000
}

.navbar a:hover {
  color: rgb(226, 5, 108);

}

.segundadiv {
  display: flex;
  justify-content: center;
  /* Centraliza na horizontal */
  align-items: center;
  /* Centraliza na vertical */
  min-height: 100vh;
  /* Garante que o body ocupe 100% da altura da tela */
  flex-direction: column;
  /* Empilha os elementos de cima para baixo */
  margin: 0;
}

.tag-novidades {
  /* 1. Criando o Contorno */
  border: 1px solid #e2d1d6;
  /* Cria uma linha fina de 1px sólida em um tom rosa/cinza clarinho */

  /* 2. O Formato de Pílula */
  border-radius: 50px;
  /* Um valor alto (como 50px ou 99px) força as laterais a ficarem como um meio-círculo perfeito */

  /* 3. O Espaçamento (Respiro) */
  padding: 8px 20px;
  /* Adiciona 8px de espaço em cima/embaixo e 20px nas laterais, para a borda não grudar no texto */

  /* 4. Alinhamento (Opcional, mas recomendado) */
  display: inline-flex;
  /* Mantém a largura ajustada ao conteúdo */
  align-items: center;
  /* Centraliza o ícone e o texto verticalmente */
  gap: 8px;
  /* Cria um pequeno espaço entre o ícone e a frase */

  /* Estilo do texto */
  color: #4a5568;
  /* Cor cinza escura para a fonte */
  font-size: 14px;

  background-color: #ffff;
  /* Deixa a letra um pouco menor */

  transform: scale(1.5);
}

.versos {

  /* 1. Cria o fundo com a transição de cores (do rosa pro roxo) */
  background: linear-gradient(to right, #FF3B7C, #A838FF);

  /* 2. Manda o fundo respeitar o formato das letras */
  -webkit-background-clip: text;
  background-clip: text;

  /* 3. Deixa a cor original da letra transparente para o fundo aparecer */
  -webkit-text-fill-color: transparent;
  color: transparent;

}

.descriprincipal {
  /* 1. O Alinhamento */
  text-align: center;
  /* Centraliza as palavras */

  /* 2. O Segredo da Quebra de Linha (A restrição de largura) */
  max-width: 650px;
  /* Impede que a caixa passe desse tamanho. É isso que força o texto a descer para a próxima linha! */
  margin: 0 auto;
  /* Centraliza a própria "caixa" do parágrafo no meio da tela */

  /* 3. Estilo e Espaçamento */
  color: #4a5568;
  /* Uma cor cinza escuro, mais suave que o preto puro */
  font-size: 25px;
  /* Um tamanho legível e confortável */
  line-height: 1.6;
  /* Aumenta o espaço entre as linhas de texto para não ficar "embolado" */

  /* 4. Respiro (Margens) */
  margin-top: 10px;
  /* Afasta um pouco do título acima */
  margin-bottom: 40px;
  /* Cria um bom espaço para os botões que vêm logo abaixo */
}

.texto-principal {
  /* 1. Alinhamento */
  text-align: center;
  /* Centraliza o texto no meio da página */

  /* 2. Tamanho e Fonte */
  font-size: 80px;
  /* Deixa o texto bem grande (você pode ajustar entre 48px e 64px) */
  font-family: 'Merriweather', 'Playfair Display', serif;
  /* Usa uma fonte clássica com serifa */
  font-weight: 500;
  /* Define a espessura da letra (nem muito fina, nem muito em negrito) */
  color: #1a202c;
  /* Uma cor escura (quase preta) para o texto de cima */

  /* 3. Disposição e Espaçamento */
  line-height: 1.2;
  /* Este é o segredo! Diminui o espaço entre a linha de cima e a de baixo */
  margin-top: 24px;
  /* Dá um respiro entre o título e a tag de novidades acima dele */
  margin-bottom: 24px;
  /* Dá um respiro entre o título e o parágrafo descritivo abaixo */
}


.lupaimg {
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3 ease;
  cursor: pointer;
}

.lupaimg:hover {
  box-shadow: 0px 0px 8px #faedf0;
  background-color: rgba(250, 237, 240, 0.5);
}

/* Essa é a regra que resolve o seu problema! */
.logo-container {
  display: flex;
  /* Coloca os elementos lado a lado */
  align-items: center;
  /* Centraliza o ícone e o texto verticalmente */
  gap: 5px;
  /* Cria um espaço entre o ícone rosa e o texto */
}

/* Ajustes para o texto não criar espaços indesejados */
.logo-textos {
  display: flex;
  flex-direction: column;
  /* Garante que o título fique em cima do subtítulo */
  font-family: 'Merriweather', 'Playfair Display', serif;
  font-weight: 300px;
}

.logo-textos h4 {
  margin: 0;
  /* Tira a margem padrão para o título não empurrar o layout */
  font-size: 30px;
  color: #1a202c;
  /* Cor escura para o nome principal */
  font-weight: normal;
}

.logo-textos p {
  margin: 0;
  /* Tira a margem padrão do subtítulo */
  font-size: 20px;
  color: #718096;
  /* Cor cinza claro para o subtítulo */
}


.botaoUM {
  /* 1. Cores e Fundo */
  background-image: linear-gradient(to right, #FF3B7C, #A838FF);
  /* Uma cor rosa vibrante próxima à da imagem */
  color: #ffffff;
  /* Texto branco para contraste */
  text-decoration: none;
  /* Remove o sublinhado do link */
  border: none;
  /* Garante que não haja borda padrão */

  /* 2. Tipografia */
  font-family: sans-serif;
  /* Ou a fonte já definida para o seu site */
  font-weight: 600;
  /* Peso da fonte ligeiramente em negrito para destaque */
  font-size: 16px;
  /* Tamanho da fonte confortável */
  text-align: center;
  /* Centraliza o texto dentro do botão */
  display: inline-block;
  /* Permite o uso de padding e margens corretamente */

  /* 3. Espaçamento (Padding) e Formato (Border-Radius) */
  padding: 12px 24px;
  /* Espaço generoso entre o texto e a borda */
  border-radius: 50px;
  /* Cria cantos perfeitamente arredondados (efeito pílula) */

  /* 4. A Sombra (Box-Shadow) para Profundidade */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  /* Sombra suave para "flutuar" */

  /* 5. Transições para Efeitos de Hover */
  transition: transform 0.3s ease;
  /* Animação suave para mudanças */
  cursor: pointer;
  /* Garante que o cursor do mouse mude para indicar clicável */

}

.botaoUM:hover {
  transform: scale(1.05);
}


.botaoDois {
  background-color: #ffffff;
  text-decoration: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  ;
  border: 1px solid #e2d1d6;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  display: inline-block;
  color: #333333;
  padding: 12px 24px;
  border-radius: 50px;
}

.botaoDois:visited {
  color: #333333;
}

.botaoDois:hover {
  /* 1. A borda "acende" ficando rosa */
  border-color: #fd6699;

  /* 2. O truque do brilho: uma sombra rosa com bastante desfoque e transparência */
  /* Os valores são: Deslocamento X, Deslocamento Y, Desfoque, Cor */
  box-shadow: 0px 0px 15px rgba(222, 59, 255, 0.4);
}

.botaoUM,
.botaoDois {

  font-size: 18px;
  /* Aumente o espaçamento interno (ex: de 12px 24px para 16px 32px) */
  padding: 20px 32px;
  cursor: pointer;

}

.classebotoes {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.MinhasSentimentos {
  text-align: center;
  margin-bottom: 30px;

}

.divMinhasPoesias {
  text-align: center;
  margin-bottom: 50px;
}

.divMinhasPoesias h2 {
  font-family: serif;
  /* Usa a mesma fonte elegante do título principal */
  font-size: 50px;
  /* Tamanho do título */
  color: #1a202c;
  /* Cor escura (quase preta) para contraste */
  font-weight: normal;
  /* Deixa a fonte serifada um pouco mais suave */
  margin-bottom: 12px;
  /* Espaço entre o título e o subtítulo */
  margin-top: 0;
}

.divMinhasPoesias p {
  font-family: sans-serif;
  /* Fonte reta, mais limpa */
  font-size: 20px;
  /* Tamanho legível */
  color: #718096;
  /* Aquele tom de cinza elegante da sua imagem */
  margin: 0;
  /* Remove margens extras para não afastar demais do título */
}

/* 1. CONFIGURANDO A POSIÇÃO (A Bandeja) */
.container-dos-cards {
  display: grid;
  /* Cria 3 colunas de tamanhos iguais que ocupam o espaço disponível */
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  /* A distância entre os futuros cards */
  width: 100%;
  max-width: 1200px;
  /* Limita o tamanho total para não esticar na tela toda */
  margin: 0 auto;
  /* Centraliza a bandeja na tela */
  padding: 0 20px;
  /* Uma margem de segurança para telas de celular */
  margin-left: -50px;

}

.card-esqueleto {
    /* 1. O Fundo e a Borda (Recuperando a caixa branca) */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    
    /* 2. Organização Interna do Texto */
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 30px 25px;
    box-sizing: border-box;
    
    /* 3. Tamanho e Animação */
    flex: 1;
    min-height: 300px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* 4. O Segredo para a linha colorida funcionar sem quebrar as bordas */
    position: relative; 
    overflow: hidden; 
}



/* 2. Cria a fita colorida no topo (Degradê Padrão) */
.card-esqueleto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px; /* A espessura da linha */
    background: linear-gradient(to right, #df42b1, #9b51e0); /* Rosa para roxo padrão */
}

/* 3. As Cores Específicas por Tag (Os Degradês de Personalidade) */
.card-esqueleto.tema-amor::before {
    background: linear-gradient(to right, #FF3B7C, #d118b8); /* Rosa vibrante para Laranja */
}

.card-esqueleto.tema-misterio::before {
    background: linear-gradient(to right, #9b51e0, #3498db); /* Roxo místico para Azul noite */
}

.card-esqueleto.tema-natureza::before {
    background: linear-gradient(to right, #11998e, #38ef7d); /* Verde esmeralda para Verde claro */
}

.card-esqueleto.tema-alma::before {
    background: linear-gradient(to right, #2980B9, #6DD5FA); /* Azul profundo para Azul celeste */
}

.card-esqueleto.tema-misterio::before {
    background: linear-gradient(to right, #da0e56, #e412f3); /* Roxo profundo para Dourado */
}

.card-esqueleto:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.ultimobotao {
  text-align: center;
  margin: 60px 0;
}

.botao-ver-todas {

  /* Cores e Fontes */
  background-color: #ffffff;
  color: #333333;
  /* Um tom de cinza bem escuro, mais suave que o preto puro */
  font-size: 16px;
  font-weight: 500;
  font-family: sans-serif;
  font-weight: 600;


  /* Formato e Espaçamento */
  padding: 14px 36px;
  /* 14px em cima/embaixo e 36px nas laterais */
  border: 1px solid #e2d1d6;
  /* Borda cinza bem clarinha, como na imagem */
  border-radius: 50px;
  /* Um valor alto aqui garante o formato de "pílula" */

  /* Opcional: Uma sombra muito leve para dar profundidade */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  /* Prepara o botão para uma animação suave ao passar o mouse */
  transition: all 0.3s ease;
}

.botao-ver-todas:hover {
  background-color: #fdfdfd;
  border-color: #fd6699;

  /* 2. O truque do brilho: uma sombra rosa com bastante desfoque e transparência */
  /* Os valores são: Deslocamento X, Deslocamento Y, Desfoque, Cor */
  box-shadow: 0px 0px 15px rgba(222, 59, 255, 0.4);
  transform: translateY(-2px);
}

.rodape-site {
  background-color: #ffffff;
  padding: 60px 40px;
  width: 100%;
  color: #333333;
}


.rodape-colunas {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.coluna {
  flex: 1;
}

.titulo-rodape {
  font-size: 30px;
  color: #2c3e50;
  margin-bottom: 16px;
  font-weight: 500;
}

.texto-rodape {
  font-size: 20px;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

.rede-sociais {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  display: flex;
  transform: translateX(-30px);
  
}

.rede-sociais a {
  margin: 0;
  padding: 0;
  display: inline-block;
 
}

.icone-social {
  width: 110px;
  height: auto;

  transition: transform 0.3s ease;
}

.icone-social:hover {
  transform: scale(1.1);
}

.lista-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-links a {
  text-decoration: none;
  color: #666666;
  font-size: 20px;
  transition: color 0.3s ease;
}

.lista-links a:hover {
  color: #ff1493;
}

.coluna-meio {
  transform: translateX(80px)
}

.linha-divisoria {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 40px auto;
  width: 100%;
  max-width: 1200px;
}

.rodape-creditos {

  text-align: center;

}

/* Limita a largura da página e centraliza tudo na tela */
.container-sobre {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
  margin-top: 6%;
}

/* --- ESTILOS DO CABEÇALHO --- */
.cabecalho-pagina {
  text-align: center;
  margin-bottom: 50px;
}

.badge-autor {
  display: inline-block;
  border: 1px solid #e2d1d6;
  /* Borda rosa clarinha */
  border-radius: 50px;
  /* Formato de pílula */
  padding: 6px 16px;
  font-size: 14px;
  color: #666666;
  margin-bottom: 15px;
  background: #ffffff;
  transform: scale(1.3);
}

.titulo-principal {
  font-size: 42px;
  color: #2c3e50;
  /* Cinza escuro elegante */
  margin: 0;
  font-weight: normal;
  /* Tira o negrito pesadão do h1 */
  transform: scale(1.3);
}

.destaque-rosa {
  background: linear-gradient(to right, #FF3B7C, #A838FF);
  /* A cor rosa/roxa da palavra "Mim" */
  font-weight: 600;
  -webkit-background-clip: text;
  background-clip: text;

  /* 3. Deixa a cor original da letra transparente para o fundo aparecer */
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- ESTILOS DAS DUAS COLUNAS --- */
.layout-duas-colunas {
  display: flex;
  gap: 60px;
  /* O grande espaço entre a foto e o texto */
  align-items: flex-start;
  /* Alinha tudo pelo centro verticalmente */
}

/* Por enquanto, divide o espaço 50/50 entre as duas colunas */
.coluna-imagem,
.coluna-texto {
  flex: 1;
}

/* --- ESTILOS DA TIPOGRAFIA DO TEXTO --- */

/* A citação com a linha lateral (Blockquote) */
.citacao-autora {
  margin: 0 0 30px 0;
  padding-left: 20px;
  /* Empurra o texto para não encostar na linha */
  border-left: 3px solid #df42b1;
  /* A linha vertical rosa! */
  font-size: 22px;
  font-style: italic;
  color: #444444;
  line-height: 1.5;
  /* Dica: Use uma fonte Serif (com serifa) aqui se tiver configurado no seu projeto */
}

/* Os parágrafos normais */
.coluna-texto p {
  font-size: 16px;
  color: #666666;
  line-height: 1.8;
  /* Espaçamento entre as linhas para leitura confortável */
  margin-bottom: 20px;
  /* Espaço entre um parágrafo e outro */
  text-align: justify;
}

.coluna-texto strong {
  color: #333333;
  /* Deixa o nome em negrito um pouco mais escuro */
}

.coluna-texto {
  transform: scale(1.3);
  margin-top: 10%;
}

.foto-autora {

  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 16%;
  border: 10px solid #ffffff;
  display: block;

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

/* Diz para o corpo do site usar a animação quando carregar */
segundadiv,
main,
footer {
  animation: surgimentoSuave 0.6s ease-in-out;
}

/* Cria a regra da animação (do invisível para o visível) */
@keyframes surgimentoSuave {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/* --- A CAIXA BRANCA PRINCIPAL --- */
.caixa-inspiracoes {
  background-color: #ffffff;
  border-radius: 20px;
  /* Arredonda as pontas da caixa grande */
  padding: 50px;
  /* Dá um respiro generoso dentro da caixa */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  /* Sombra super suave e elegante */
  margin-top: 130px;
  /* Afasta a caixa do texto da biografia que está acima */
  margin-bottom: 50px;
  border: #e2d1d6;

}

/* --- O TÍTULO --- */
.titulo-inspiracoes {
  text-align: center;
  font-size: 32px;
  color: #2c3e50;
  /* Aquele tom de azul/cinza escuro */
  margin-bottom: 50px;
  font-weight: normal;
}

/* --- O ALINHAMENTO DAS 3 COLUNAS --- */
.grid-inspiracoes {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  /* Espaço entre as 3 colunas */
}

/* --- CADA ITEM INDIVIDUAL --- */
.item-inspiracao {
  flex: 1;
  /* Força as 3 colunas a terem exatamente o mesmo tamanho */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centraliza tudo (ícone, título e texto) */
  text-align: center;
}

/* --- OS CÍRCULOS COM OS ÍCONES --- */
.icone-inspiracao {
  width: 70px;
  height: 70px;
  background-color: #ffeef6;
  /* Fundo rosa bem clarinho */
  border-radius: 50%;
  /* Faz virar uma bolinha perfeita */

  /* Centraliza o emoji dentro da bolinha */
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 30px;
  /* Tamanho do emoji */
  margin-bottom: 20px;
}

/* --- OS TEXTOS DOS ITENS --- */
.item-inspiracao h4 {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 12px;
}

.item-inspiracao p {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  margin: 0;
  /* Remove a margem padrão para não desalinhar */
}



/*Configurações do arquivo (Ler.html)

/* --- CONTAINER GERAL --- */
.container-biblioteca {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

.cabecalho-biblioteca {
  text-align: center;
  margin-bottom: 60px;
}

/* --- TIPOGRAFIA DO TÍTULO --- */
.titulo-biblioteca {
  font-size: 48px;
  color: #2c3e50;
  font-weight: normal;
  margin-bottom: 15px;
}

/* O TRUQUE DO GRADIENTE NO TEXTO */
/* O TRUQUE DO GRADIENTE NO TEXTO */
.texto-gradiente {
  background: linear-gradient(to right, #df42b1, #9b51e0);

  background-clip: text;
  /* A versão oficial (padrão) que o editor está pedindo */
  -webkit-background-clip: text;
  /* A versão específica para Chrome/Safari */
  -webkit-text-fill-color: transparent;

  font-weight: bold;
}


.subtitulo-biblioteca {
  font-size: 18px;
  color: #666666;
  margin-bottom: 40px;
}

/* --- A BARRA DE BUSCA --- */
.caixa-busca {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  max-width: 600px;
  /* Largura máxima da barra */
  margin: 0 auto;
  /* Centraliza a barra na tela */
  padding: 15px 25px;
  border-radius: 50px;
  /* Formato de pílula */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  /* Sombra elegante */
  border: 1px solid #e2d1d6;
}

.icone-lupa {
  margin-right: 15px;
}

/* O CAMPO DE DIGITAÇÃO EM SI */
.campo-digitacao {
  flex: 1;
  /* Faz o campo ocupar todo o espaço restante da barra branca */
  border: none;
  /* Tira a borda padrão */
  font-size: 16px;
  color: #333333;
  background: transparent;
}

/* Tira a borda azul/preta que aparece quando o usuário clica para digitar */
.campo-digitacao:focus {
  outline: none;
}

/* Estiliza o texto cinza clarinho do "placeholder" */
.campo-digitacao::placeholder {
  color: #a0a0a0;
}


#main-content {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#main-content.escondido {
    opacity: 0;
}


/* =========================================
   PÁGINA DE LEITURA DE POESIAS
   ========================================= */

/* 1. Container Principal */
.container-leitura {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    /* Reutilizando a sua animação que já existe! */
    animation: surgimentoSuave 0.6s ease-in-out; 
}

/* 2. Botão de Voltar */
.btn-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4a5568;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 40px;
    transition: color 0.3s ease;
}

.btn-voltar:hover {
    color: #FF3B7C;
}

/* 3. Cabeçalho (Tag, Título e Data) */
.cabecalho-poema {
    text-align: center;
    margin-bottom: 30px;
}

.tag-poema {
    /* Gradiente rosa do seu site */
    background: linear-gradient(to right, #FF3B7C, #A838FF);
    color: #ffffff;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 20px;
}

.titulo-poema {
    font-family: 'Merriweather', 'Playfair Display', serif;
    font-size: 48px;
    color: #1a202c;
    margin: 0 0 15px 0;
    font-weight: normal;
}

.meta-info {
    color: #718096;
    font-size: 14px;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

/* Linha rosa decorativa abaixo da data */
.linha-enfeite {
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, #FF3B7C, #A838FF);
    margin: 30px auto;
    border-radius: 5px;
}

/* 4. O Card Branco (Onde fica o texto do poema) */
.caixa-poema {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    max-width: 700px;
    margin: 0 auto 40px auto;
    text-align: center;
}

.corpo-poema {
    /* Usando a fonte serifada para dar aquele ar de livro */
    font-family: 'Merriweather', 'Playfair Display', serif;
    font-size: 18px;
    color: #2c3e50;
    line-height: 2; /* Espaço bem generoso entre as linhas */

    text-align: left;
    display: inline-block;

    max-width: 400px;
}

/* 5. Botões de Ação na parte de baixo (Favoritar, Compartilhar) */
.acoes-poema {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 80px;
}

.btn-acao {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e2d1d6;
    background-color: #ffffff;
    color: #4a5568;
}

.btn-acao.rosa {
    background: #FF3B7C;
    color: white;
    border: none;
    box-shadow: 0px 4px 10px rgba(255, 59, 124, 0.2);
}

.btn-acao.rosa:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 15px rgba(255, 59, 124, 0.4);
}

.btn-acao:hover:not(.rosa) {
    border-color: #FF3B7C;
    color: #FF3B7C;
    transform: translateY(-2px);
}

/* Botão redondinho de Salvar (Marcador) */
.btn-icone {
    padding: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}


/* 1. Ajustando a caixa principal para organizar os itens em coluna */
.card-esqueleto {
    display: flex;
    flex-direction: column;
    text-align: left; /* Tira o alinhamento central padrão */
    padding: 30px 25px; /* Adiciona o respiro interno do card */
    box-sizing: border-box; /* Garante que o padding não quebre o tamanho do card */
}

/* 2. A Tag colorida ("Amor") */
.card-tag {
    background-color: #FF3B7C;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 50px;
    align-self: flex-start; /* Faz a tag não esticar até o fim do card */
    margin-bottom: 15px;
}

/* 3. O Título */
.card-titulo {
    font-family: 'Merriweather', 'Playfair Display', serif;
    font-size: 22px;
    color: #1a202c;
    font-weight: normal;
    margin: 0 0 12px 0;
}

/* 4. O Resumo em itálico */
.card-resumo {
    font-size: 14px;
    color: #718096;
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex-grow: 1; /* O SEGREDO: Se o texto for curto, isso empurra os itens de baixo para o rodapé do card! */
}

/* 5. A linha divisória super fina */
.card-linha {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin-bottom: 15px;
    width: 100%;
}

/* 6. A data e o tempo de leitura */
.card-meta {
    display: flex;
    gap: 15px; /* Espaço entre a data e o relógio */
    font-size: 13px;
    color: #a0aec0;
    margin-bottom: 25px;
}

/* 7. O Link final */
.card-link {
    color: #FF3B7C;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-top: auto;
    transition: color 0.3s ease;
}

/* =========================================
   PÁGINA DE CONTATO
   ========================================= */

.container-contato {                                               
    max-width: 1100px;           
    margin: 60px auto;
    padding: 0 20px;
    animation: surgimentoSuave 0.6s ease-in-out;
}

.layout-contato {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.coluna-info {
    flex: 1; /* Ocupa um espaço menor que o formulário */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.coluna-formulario {
    flex: 1.3; /* Dá um pouco mais de largura para o formulário respirar */
}

/* Cards Genéricos (Esquerda e Direita) */
.card-contato, .card-form {
    background: #ffffff;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid #f8f8f8;
}

/* Caixa de Citação (Fundo sutilmente colorido) */
.citacao-contato {
    background: linear-gradient(135deg, #fdf5f7 0%, #f6eff8 100%);
    border: none;
}

.citacao-contato p {
    font-family: 'Merriweather', 'Playfair Display', serif;
    font-size: 18px;
    font-style: italic;
    color: #2c3e50;
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.citacao-contato span {
    font-size: 14px;
    color: #FF3B7C;
    font-weight: 600;
}

/* Títulos das caixas menores */
.titulo-card-contato {
    font-size: 16px;
    color: #2c3e50;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 25px;
}

/* Estrutura dos Ícones e Textos */
.item-contato {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.item-contato:last-child {
    margin-bottom: 0;
}

.icone-contato {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.icone-contato.rosa {
    background-color: #ffeef6;
    color: #FF3B7C;
}

.icone-contato.roxo {
    background-color: #f6eff8;
    color: #A838FF;
}

.texto-contato {
    display: flex;
    flex-direction: column;
}

.texto-contato strong {
    font-size: 11px;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.texto-contato span {
    font-size: 15px;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 4px;
}

.texto-contato small {
    font-size: 12px;
    color: #718096;
}

/* =========================================
   ESTILOS DO FORMULÁRIO DE CONTATO
   ========================================= */

.card-form h2 {
    font-family: 'Merriweather', 'Playfair Display', serif;
    font-size: 26px;
    color: #2c3e50;
    margin: 0 0 5px 0;
    font-weight: normal;
}

.subtitulo-form {
    font-size: 13px;
    color: #a0aec0;
    margin-bottom: 35px;
}

.form-linha {
    display: flex;
    gap: 20px;
}

.form-linha .form-grupo {
    flex: 1; /* Faz os campos dividirem o espaço 50/50 na mesma linha */
}

.form-grupo {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.form-grupo label {
    font-size: 11px;
    color: #718096;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* Estilização das caixas de input (texto, email, dropdown e textarea) */
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: #2c3e50;
    font-family: 'Nunito Sans', sans-serif;
    transition: all 0.3s ease;
}

/* Efeito ao clicar no campo para escrever */
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    outline: none;
    border-color: #FF3B7C;
    box-shadow: 0 0 0 3px rgba(255, 59, 124, 0.1);
}

.form-grupo textarea {
    resize: vertical; /* Permite que o utilizador aumente a caixa apenas para baixo */
}

/* Botão Gradiente */
.botao-enviar-form {
    width: 100%;
    background: linear-gradient(to right, #FF3B7C, #A838FF);
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Nunito Sans', sans-serif;
    margin-top: 10px;
}

.botao-enviar-form:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(168, 56, 255, 0.25);
}


/* =========================================
   NOTIFICAÇÃO PERSONALIZADA (TOAST)
   ========================================= */

#notificacao-toast {
    position: fixed;
    bottom: 30px; 
    right: 30px;
    background-color: #ffffff;
    border-left: 4px solid #FF3B7C; /* Linha rosa da identidade */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 16px 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999; /* Garante que fica por cima de tudo no site */
    
    font-family: 'Nunito Sans', sans-serif;
    color: #2c3e50;
    font-weight: 600;
    font-size: 15px;
    
    /* Prepara a animação empurrando a caixa para fora do ecrã */
    transform: translateX(150%);
    /* Transição com um leve efeito de "salto" elástico */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Quando esta classe for adicionada pelo JS, a caixa entra no ecrã */
#notificacao-toast.mostrar {
    transform: translateX(0);
}

/* Estilo alternativo caso dê algum erro no envio */
#notificacao-toast.erro {
    border-left-color: #e74c3c;
}


/* --- Ajustes Exclusivos para o Rodapé no Computador --- */
@media (min-width: 769px) {
    
    .rodape-colunas {
        max-width: 1050px; /* O SEGREDO: Encolhe a "bandeja" do rodapé, aproximando as colunas do centro */
        margin: 0 auto; /* Mantém a bandeja perfeitamente centralizada na tela */
        gap: 120px; /* Um respiro agradável entre a coluna da esquerda e a da direita */
    }

    .divBlog {
        flex: 1; 
    }

    .coluna .texto-rodape {
        max-width: 400px; 
    }

    /* Corrige o alinhamento dos ícones sociais em relação ao texto "Conecte-se" */
    .rede-sociais {
        transform: none; /* Anula o puxão para a esquerda que existia no código original */
        margin-left: -30px;
    }
}


/* =========================================
   RESPONSIVIDADE E ADAPTAÇÃO DE TELAS
   ========================================= */

/* 1. Laptops e Notebooks médios (<= 1024px) */
@media (max-width: 1024px) {
    /* Ajusta o grid para 2 colunas e remove a margem forçada */
    .container-dos-cards {
        grid-template-columns: repeat(2, 1fr);
        margin-left: 0;
        padding: 0 20px;
    }

    /* Empilha seções que dividiam espaço lado a lado */
    .layout-duas-colunas,
    .layout-contato,
    .grid-inspiracoes {
        flex-direction: column;
        align-items: center;
    }

    /* Remove deslocamentos forçados (transforms) que quebram a tela */
    .coluna-texto,
    .badge-autor,
    .titulo-principal {
        transform: none;
        margin-top: 20px;
    }

    .foto-autora {
        max-width: 80%; /* Evita que a foto fique gigante no tablet */
    }
    
    /* Centraliza o menu retirando o distanciamento horizontal */
    .header nav {
        transform: none; 
    }
}

/* 2. Mobile Grande e Tablets (<= 768px) */
@media (max-width: 768px) {
    /* Cabeçalho: Esconde a lupa e reorganiza logo e links em coluna */
    .icons {
        display: none;
    }

    

    .header section {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 15px 0;
        width: 100%;
        margin-left: -5px;
    }

    .segundadiv {
      min-height: auto;
      padding-top: 120px;
      padding-bottom: 20px;
    }

    .logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-left: -30px;
    }

    .header nav {
      transform: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 20px;
      width: 100%;
    }

    .navbar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .navbar a {
        font-size: 18px;
        margin: 0;
    }

    /* Tipografia: Reduz títulos grandes para caber na tela */
    .texto-principal {
        font-size: 42px;
    }


    .divMinhasPoesias h2, 
    .titulo-biblioteca,
    .titulo-poema {
        font-size: 32px;
    }


    /* --- Aproximando os cards da barra de pesquisa --- */
    
    .container-biblioteca {
        margin-bottom: 10px; /* Corta a margem gigante que empurrava a parte de baixo para longe */
    }
    
    .cabecalho-biblioteca {
        margin-bottom: 15px; /* Reduz o espaço logo abaixo da barra de busca */
    }

    section.MinhasSentimentos {
        padding-top: 0; /* Remove completamente o espaço vazio no topo da seção dos cards */
        margin-top: 0;
    }

    

    /* Estrutura: Cards passam a ocupar a largura total (1 coluna) */
    .container-dos-cards {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0 20px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    section {
      padding-left: 15px;
      padding-right: 15px;
    }

    .container-dos-cards {
      padding: 0;
      gap: 20px;
    }

    .card-esqueleto {
        width: 100%; 
        min-width: 0;
        max-width: 350%;
        box-sizing: border-box;
        margin: 0 auto;

    }

    .container-sobre {
      margin-top: 110px;
      padding: 0 20px;
      
    }

    .foto-autora {
      margin: 0 auto;
      max-width: 85%;
    }

    .badge-autor {
      transform: scale(1);
      margin-bottom: 20px;
    }

    .cabecalho-biblioteca {
      margin-bottom: 20px;
    }

    .section.MinhasSentimentos {
      padding-top: 10px;
    }

    .container-biblioteca {
      margin-bottom: 0;
    }

    /* Botões: Ocupam 100% da tela para facilitar o toque (Thumb Zone) */
    .classebotoes {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        gap: 15px;
    }

    .botaoUM, .botaoDois {
        width: 100%;
        box-sizing: border-box;
    }

    /* Rodapé: Centraliza todos os blocos de texto e ícones */
    .rodape-colunas {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .rodape-site {
      padding: 40px 0;
      width: 100%;
      box-sizing: border-box;
    }

    .rodape-colunas {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 35px;
    }

    .coluna {
      width: 100%;
      box-sizing: border-box;
    }

    .titulo-rodape {
      font-size: 24px;
      margin-bottom: 12px;
    }

    .texto-rodape {
      text-align: justify;
      font-size: 15px;
      line-height: 1.6;
      width: 100%;
      white-space: normal;
      
      
    }

    .lista-links a {
      width: 16px;
    }

    .rede-sociais {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      width: 100%;
      margin-top: 15px;
      transform: none !important;
    }

    .icone-social {
      width: 80px;
      height: auto;
      margin: 0;
    }

    .rodape-creditos {
      padding: 0 20px;
    }

    .rodape-creditos p {
      font-size: 13px;
      line-height: 1.5;
      white-space: normal;
    }

    .coluna-meio, .rede-sociais {
        transform: none;
    }

    .rede-sociais {
        justify-content: center;
        margin-top: 15px;
    }

    /* Formulário: Campos lado a lado agora ficam empilhados */
    .form-linha {
        flex-direction: column;
        gap: 0;
    }

    /* --- Correção do alinhamento da tela inicial (Hero) --- */
    
    .segundadiv {
        width: 100%;
        max-width: 100vw; /* Impede a tela de criar espaços fantasmas nas laterais */
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center; /* Força o alinhamento interno */
    }

    .tag-novidades {
        transform: scale(1); /* O SEGREDO: Tira o scale(1.5) do computador que estava estourando a tela */
        margin: 0 auto; /* Força o botão de novidades ir para o meio */
        display: inline-flex; /* Mantém o formato mas permite centralização perfeita */
    }

    .texto-principal {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        /* Caso ainda fique grande, use 36px aqui */
        font-size: 38px; 
    }

    .descriprincipal {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }


    .caixa-inspiracoes {
      padding: 30px 20px;
    }

    .titulo-inspiracoes {
      display: none;
    }
}

/* 3. Mobile Pequeno (<= 480px) */
@media (max-width: 480px) {
    /* Ajustes refinados para telas bem estreitas */
    .texto-principal {
        font-size: 32px;
    }

    .logo-textos h4 {
        font-size: 24px;
    }

    .logo-textos p {
        font-size: 16px;
    }
    
    /* Reduz o respiro interno do card de poesia para dar mais espaço ao texto */
    .caixa-poema {
        padding: 20px 15px;
    }

    .rodape-site {
        padding: 40px 20px;
    }
}