:root {
    /* Color */
    --white-color: rgb(255,255,255);
    --dark-color: rgb(0,0,0);
    --pri-color: rgb(249, 206, 7);
    --sec-color: rgb(252, 16, 104);
    --ter-color: #1f0441;
    --qua-color: #fcab10;
    --qui-color: #0ce3e8;

    /* font */
    --font-size-s: .45rem;
    --font-size-n: .9rem;
    --font-size-m: 1.12rem;
    --font-size-l: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.3rem;

    /* font-weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /*border radius */
    --border-radius-s: 8px;
    --border-radius-m: 30px;
    --border-radius-circle: 50%;

    /* site max */
    --site-max-width: 100%;
}

@font-face {
    font-family: 'False';
    src: url(../font/False.ttf);
}

#box3 {
    display: flex;              /* Alinha as divs .planos lado a lado */
    justify-content: space-evenly; /* Espaça os planos uniformemente */
    gap: 20px;                  /* Espaço entre os planos */
    flex-wrap: wrap;            /* Quebra linha em telas menores */
    padding: 20px;              /* Padding ajustado para o container */
    margin: 0 auto;             /* Centraliza o container na página */
    max-width: 100%;          /* Limita a largura total para melhor controle */
    box-sizing: border-box;
}

#box3 .area {
    flex: 1;
    min-width: 320px;

    font-size: var(--font-size-n);
    border-radius: 25px;        /* Apenas um border-radius (o último sobrescreve) */
    padding: 15px;              /* Padding interno ajustado */
    display: flex;              /* Flex para organizar conteúdo interno */
    flex-direction: column;     /* Coloca título, lista e botão em coluna */
    align-items: center;        /* Centraliza horizontalmente os filhos */
    border: 2px solid var(--pri-color);
}

#box3 .area h2 {
    color: var(--pri-color);
    text-align: center;
    font-family: 'False';
    margin: 15px 0;             /* Margem simétrica em cima e embaixo */
    font-size: var(--font-size-xl);
    background-color: transparent;
}

#box3 .area ul {
    list-style: none;           /* Remove marcadores padrão */
    padding: 0;
    margin: 0;                  /* Remove margem padrão */
    width: 100%;                /* Ocupa toda a largura da div */
}
  
#box3 .area ul li {
    display: flex;              /* Flex para organizar imagem e texto */
    flex-direction: column;     /* Coloca imagem e texto em coluna */
    align-items: center;        /* Centraliza a imagem horizontalmente */
    margin-bottom: 15px;        /* Espaço abaixo do item */
}
  
#box3 .area img {
    max-width: 100%;            /* Garante que a imagem não exceda o container */
    height: auto;               /* Mantém a proporção */
    width: auto;                /* Permite que a largura se ajuste */
    margin: 0 auto 8px auto;    /* Centraliza a imagem com margem inferior */
    display: block;             /* Faz a imagem ser um bloco para centralização */
    flex-shrink: 0;             /* Impede compressão excessiva */
}
  
#box3 .area span {
    font-size: var(--font-size-m);
    text-align: left;           /* Alinha o texto à esquerda */
    width: 100%;                /* Garante que o texto ocupe a largura disponível */
}

#subtitulo {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

#subtitulo h4 {
    width: 100%;
    margin: 20px 0 10px 0;        
    font-size: var(--font-size-xxl);         
    text-align: center;
    font-family: 'False';
    color: var(--pri-color);
}

#subtitulo h6 {
    margin: 0 0 20px 0;         /* Margem inferior para separar dos parágrafos */
    font-size: var(--font-size-l);           /* Tamanho ajustado */
    text-align: center;         /* Centraliza o subtítulo */
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--pri-color);
}

@media (max-width: 1100px) and (orientation: portrait) {
    .area br {
        display: none;
    }

    #box3 .area {
        min-width: 500px;
        margin: 15px;
    }

    #box3 .area ul li {
      align-items: center;        /* Centraliza a imagem horizontalmente */
      justify-content: center;
      margin: 60px;
    }

    #box3 .area span {
        font-size: 2.5rem;
        align-items: center;
        justify-content: center;
    }

    #box3 .area img {
        max-width: 100%;
        margin-bottom: 30px;
    }

    #box3 .area h2 {
        font-size: 2.5rem;
        margin-top: 30px;
        margin-bottom: -30px;
    }
    #subtitulo h4 {
        font-size: 5rem;
    }
    #subtitulo h6 {
        font-size: 2rem;
    }
}

@media (max-width: 1100px) and (orientation: landscape) {
    #box3 .area {
        min-width: 250px;
        margin: 15px;
    }

    .area br {
        display: block;
    }
}