/* --- CSS ORIGINAL --- */
*{box-sizing:border-box;margin:0;padding:0;font-family:"Inter",sans-serif}

body{
 background:#fdfdfd;
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:2rem 1rem;
}

.container{
 display:flex;
 flex-direction:column;
 align-items:center;
 background:#fff;
 border-radius:.7rem;
 max-width:1300px;
 width:100%;
 margin:0 auto;
 padding:2rem 3rem;
 box-shadow:0 6px 30px rgba(0,0,0,.04);
}

header{width:100%}
nav{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:1rem;
 padding:0 0.5rem;
 max-width:1200px;
 margin:0 auto;
}
.logo h1{font-size:1.8rem; margin:0}
nav ul{
 list-style:none;
 display:flex;
 gap:1.5rem;
 align-items:center;
}

a {
  color: #0060ED;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

main{
 width:100%;
 max-width:1200px;
 margin:4rem auto;
 padding:0 1.5rem;
}

h2{line-height:1.2;font-size:clamp(1.6rem,3vw,2.6rem);margin-bottom:1rem}
.lead{font-size:clamp(1.5rem,2vw,1.9rem);max-width:900px;margin-bottom:1rem}
.sub-lead{font-size:clamp(.95rem,1.6vw,1.15rem);max-width:900px;margin-bottom:1.25rem}

.cta{
 cursor:pointer;
 color:#fff;
 font-size:1rem;
 padding:.8rem 1rem;
 border-radius:.8rem;
 border:none;
 background:#0060ED;
 margin:.75rem 0 1.25rem 0;
 text-decoration: none; 
 display: inline-block; 
 text-align: center;
}
.cta:hover {
    background: #004cb8;
    text-decoration: none;
    color: #fff;
}

.benefits{
 display:flex;
 gap:2rem;
 width:100%;
 justify-content:center;
 align-items:flex-start;
 flex-wrap:wrap;
}

/* * Regra para a página SERVICES (2x2) 
 * e regra base para ABOUT (que será sobrescrita)
 */
.benefits > div{flex:1 1 400px; max-width:550px}


.item{display:flex;gap:.8rem;align-items:center;margin:.5rem 0}
.item > i{color:#0060ed;width:18px}

#results > h2 {font-size:clamp(1.6rem,3vw,2.6rem);margin:2rem 0;}
.results{list-style:none;display:flex;gap:1.25rem;flex-wrap:wrap;align-items:stretch;margin-top:1.25rem}
.result-item{flex:1 1 200px;text-align:center;padding:.5rem}
.result-item span{font-size:clamp(1.4rem,3vw,2.6rem);font-weight:500;display:block}

.contact{width:100%;max-width:1200px;margin:2rem 0;padding:1rem 1.25rem;border-radius:8px}
.contact form{display:flex;flex-direction:column;gap:.6rem}
.contact label{font-size:.95rem; font-weight: 500;}
.contact input,.contact textarea{
 padding:.7rem;border:1px solid #ccc;border-radius:6px;font-size:0.95rem;width:100%
}
.contact textarea{min-height:120px;resize:vertical}
.contact button{
 padding:.85rem;background:#333;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:1rem
}
.contact button:hover{background:#555}

@media (max-width: 992px){
 .container{padding:1.25rem}
 main{padding:0 1rem;margin:1.25rem auto}
 nav{padding:0}
 .lead,.sub-lead{max-width:100%}
 .benefits{gap:1rem}

 /* * Regra de reset para SERVICES (1 coluna em telas menores) 
  */
 .benefits > div{flex:1 1 100%; max-width:600px}
 
 /* * ### MUDANÇA ADICIONADA AQUI ###
  * Regras de reset para ABOUT em telas menores
  * Garante que o item 2 (que ficará à direita)
  * volte a ser centralizado e 100% da largura.
  */
 #about-page .benefits {
    align-items: center; /* Centraliza a coluna no mobile */
 }
 #about-page .benefits > div {
    width: 100%;
    max-width: 600px; 
    align-self: auto !important; /* Reseta o alinhamento do item 2 */
 }
}

@media (max-width: 600px){
 body{align-items:flex-start;padding:1rem}
 .container{padding:1rem;border-radius:.5rem}
 nav ul{gap:1rem}
 .cta{width:100%}
 h2{font-size:1.4rem}
}

@media (max-width: 520px){
   .logo > h1 {
       font-size: 1.1rem;
   }
  nav ul li {
   font-size: 0.8rem;
  }
}

/* --- NOVAS CLASSES (DAS VERSÕES ANTERIORES) --- */

/* == Services Page == */
.service-card {
    padding: 1rem .5rem;
}
.service-card h4 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #152CBA; 
}
.service-card h4 i {
    color: #0060ED; 
    font-size: 1.6rem;
    width: 24px;
    text-align: center;
}
.service-card p {
    margin-bottom: 1rem;
    color: #333;
    line-height: 1.6;
}
.service-card ul {
    list-style: disc;
    padding-left: 1.5rem; 
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #333;
}
.service-card .card-footer-text {
    font-weight: 500;
    color: #111;
    margin-top: 1.5rem;
    font-style: italic;
}
.page-cta-section {
    text-align: center;
    margin: 4rem auto 1rem auto;
    padding: 2.5rem 1rem;
    border-top: 1px solid #eee;
    width: 100%;
}
.page-cta-section h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

/* == About Page == */
#about-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.about-intro p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 900px;
    margin-bottom: 1.25rem;
    color: #333;
}
.about-section {
    padding: 0 .5rem;
}
.about-section h3 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #152CBA;
}
.about-section h3 i {
    color: #0060ED;
    font-size: 1.8rem;
    width: 30px;
    text-align: center;
}
.about-section p, .about-section ul {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #333;
}
.about-section ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* == Contact Page == */
#contact-page h2 {
    text-align: center;
}
.contact-button-override {
    width: 100%; 
    background: #0060ED !important; 
    font-size: 1rem !important;
    padding: .8rem 1rem !important;
}
.contact-button-override:hover {
    background: #004cb8 !important;
}
.contact-direct {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}
.contact-direct p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

#about-page .benefits {
    flex-direction: column;      /* Empilha os 3 itens verticalmente */
    justify-content: flex-start; /* Alinha a coluna ao topo */
    gap: 2.5rem;                 /* Aumenta o espaço entre os itens */
}

#about-page .benefits > div {
    flex: 0 1 auto; /* Remove o 'flex-grow' e 'flex-basis' da regra .benefits > div */
    width: 100%;     /* Define uma largura para os blocos */
    max-width: 1500px; /* Define uma largura máxima */
}