:root{
--color-primary:#0f2a44;       /* azul escuro da marca */
--color-secondary:#1aa7c8;     /* azul ciano */
--color-secondary-light:#4fc3dc;
--color-bg:#f6f8fb;
--color-text:#1a1a1a;
--color-muted:#666;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body{
background:var(--color-bg);
color:var(--color-text);
line-height:1.5;
}

/* CONTAINER */

.container{
max-width:1100px;
margin:auto;
padding:20px;
}

/* HEADER */

.header{
background:white;
border-bottom:1px solid #eee;
}

.nav{
display:flex;
align-items:center;
justify-content:space-between;
}


.menu{
    display:flex;
    gap:20px;
    overflow-x:auto;       /* permite scroll horizontal */
    white-space:nowrap;    /* força os itens em linha */
    -webkit-overflow-scrolling: touch; /* scroll suave no mobile */
}
.menu::-webkit-scrollbar{
    height:6px;
}

.menu::-webkit-scrollbar-thumb{
    background:var(--color-secondary);
    border-radius:3px;
}

.menu::-webkit-scrollbar-track{
    background:transparent;
}

.menu a{
    text-decoration:none;
    color:#333;
    font-weight:500;
    font-size:14px;
}

.menu a:hover{
    color:#0073e6;
}


.logo img{
height:40px;
}

/* HERO */

.hero{
text-align:center;
padding:40px 20px;
}

.hero h1{
font-size:28px;
margin-bottom:10px;
color:var(--color-primary);
}

.hero p{
color:#555;
max-width:700px;
margin:auto;
}

/* CATEGORIAS */

.categories{
display:grid;
grid-template-columns:1fr;
gap:16px;
margin-top:20px;
}

/* CARDS */

.card{
background:white;
padding:20px;
border-radius:12px;
text-decoration:none;
color:inherit;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
transition:all .15s ease;
border-top:3px solid transparent;
}

.card:hover{
transform:translateY(-4px);
border-top:3px solid var(--color-primary);
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.card h3{
margin-bottom:8px;
color:var(--color-primary);
font-size:18px;
}

.card p{
color:var(--color-muted);
font-size:14px;
}

.card-highlight{
background:#e8e9eb;
border:none;
}


/* LINKS */

a{
color:var(--color-secondary);
}

a:hover{
color:var(--color-secondary-light);
}

/* ADS */

.ads{
margin-top:30px;
}

.ad-box{
background:white;
border:1px dashed var(--color-secondary);
padding:40px;
text-align:center;
border-radius:10px;
color:#777;
font-size:14px;
}

/* FOOTER */

.footer{
margin-top:40px;
background:white;
border-top:1px solid #eee;
text-align:center;
color:#666;
font-size:14px;
}

.footer p{
padding:20px;
}

/* RESPONSIVO */

@media(min-width:700px){

.hero h1{
font-size:36px;
}

.categories{
grid-template-columns:repeat(3,1fr);
}


/*CALCULADORAS*/
.card input{
width:100%;
padding:10px;
margin-top:6px;
margin-bottom:10px;
border:1px solid #ccc;
border-radius:6px;
}

.card button{
padding:10px 14px;
border:none;
background:#1aa7c8;
color:white;
border-radius:6px;
cursor:pointer;
}

.card button:hover{
background:#1592af;
}

}