/* CSS HEX */
:root {
--apricot: #f29772;
--cape-cod: #3f494b;
--early-dawn: #fff8ea;
--rose-bud: #fbbfa1;
--natural-gray: #979387;
--stark-white: #eaddc7;
--tacao: #f5a687;
--manhattan: #f5b195;

/* PALETA 2 – Pastéis Frios */
--ice-blue:      #DDEAF4;
--soft-cyan:     #B6E3DF;
--opal-green:    #A3CDBE;
--sage-gray:     #8FA9A1;
--lavender-mist: #DCD7F2;
--soft-lilac:    #C8BDEB;
--blue-gray:     #6F7C85;
--pale-mint:     #E8F6F1;

/* PALETA – Tons Rosas */
--rose-blush:      #F7D6DD;   /* rosa muito claro, quase neutro */
--soft-rose:       #F4B9C8;   /* rosa pastel suave */
--mauve-mist:      #E9A5BA;   /* rosa médio levemente arroxeado */
--vintage-pink:    #D88A9F;   /* rosa mais encorpado, porém ainda pastel */
--old-rose:        #C07A89;   /* rosa queimado */
--dusty-mauve:     #A46C78;   /* rosa seco azinzentado */
--rose-gray:       #7C6168;   /* tom de apoio, fundo ou texto escuro */
--blush-cream:     #FCECEF;   /* fundo rosado muito claro */
}

/* garantir que a página tenha 100% da altura */
html, body {
    height: 100%;
}

/* transformar o body (classe pageTeste) em container flex vertical */
body.pageTeste {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* fazer a div principal ocupar todo o espaço restante */
div[name="principal"] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* permite que filhos rolem corretamente */
}

/* tornar a área de conteúdo flexível e rolável se necessário */
div[name="conteudo"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

h1 {
  font-size: 2rem;  /* 32px */
  color: var(--cape-cod)!important;
}
p {
  font-size: 1.1rem;  
  color: var(--cape-cod)!important;
  text-align: justify;
  text-indent: 30px;
}
nav {
  display: flex;
  justify-content: center; 
  gap: 2rem;
  padding: 1rem;
  flex-wrap: wrap;
}
img {
  max-width: 100%;
  height: auto;
}

.container {
   width: 100%;
   max-width: 100px;
   margin: auto;
   padding: 1rem;
}
.nav-link {
    background-color: var(--manhattan)!important;
    border-radius: 12px;
    padding: 0.5rem;
    width: 100%;
    height: 3rem;
    color: var(--rose-gray)!important;
    
}
button.active{
    background-color: var(--early-dawn)!important;
    color: var(--apricot)!important;
    border: 2px solid var(--apricot)!important;
}

.page1{
    background-color: var(--early-dawn)!important;
    color: var(--rose-gray) !important;
    border-color: var(--rose-gray)!important;    
}
.pageTeste{
    background-color: var(--manhattan)!important;
    color: var(--cape-cod);
    border-color: var(--rose-gray)!important;    
}
.page1 button{
    background-color: var(--apricot);
    color: var(--stark-white);
    border: none;
    ;
}

.modal button{
    background-color: var(--rose-gray);
    color: white;
    border: none;
}
.card {  
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 16px rgba(0,0,0,0.05);  
}

.cardHab{
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  color: black;
  border:1px solid var(--rose-gray);   
}
.cardHab p{
  font-size: 0.8rem;
  margin: 0;
}

.modal{
  white-space: pre-line;
}

.legenda{
  font-size: 0.7rem;
  color: var(--natural-gray);
  margin-top: 0.5rem;
}

#conteudo {
  max-height: 77vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px; 
}

/* Telas grandes */
@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
}

/* Tablets */
@media (max-width: 992px) {
  h1 { font-size: 2rem; }
  .container { padding: 1.5rem; }
}

/* Celulares grandes */
@media (max-width: 768px) {
  nav { gap: 1rem; }
  h1 { font-size: 1.7rem; }
}

/* Celulares pequenos */
@media (max-width: 480px) {
  h1 { font-size: 1.4rem; }
  button { width: 100%; }
  .container { padding: 1rem; }
}

@media (min-width: 992px) {
    .my-grid .coluna-1 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .my-grid .coluna-2,
    .my-grid .coluna-3 {
        flex: 0 0 30%;
        max-width: 30%;
    }
}