/* =========================================================
BASE DO SITE
========================================================= */
@import url("./variaveis.css");
@import url("./base.css");
@import url("./layout.css");
@import url("./botoes.css");
@import url("./cards.css");
@import url("./imagens.css");
@import url("./paginas.css");
@import url("./responsivo.css");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: #0d1117;
color: #fff;
line-height: 1.6;
}

a {
transition: 0.3s ease;
}

/* =========================================================
BOTÕES
========================================================= */
.btn-principal {
display: inline-block;
background: #f1b53b;
color: #111 !important;
padding: 14px 28px;
border-radius: 10px;
text-decoration: none;
font-weight: 700;
font-size: 15px;
transition: 0.3s ease;
}

/* =========================================================
TAGS
========================================================= */
.tag {
display: inline-block;
background: rgba(241, 181, 59, 0.12);
color: #f1b53b;
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
margin-bottom: 12px;
border-radius: 999px;
border: 1px solid rgba(241, 181, 59, 0.35);
}

/* =========================================================
CARDS DE ASTROFOTOGRAFIA
========================================================= */
.cards-astro {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin: 30px 0 40px;
}

.card-astro {
display: block;
text-decoration: none;
color: inherit;
background: rgba(255, 255, 255, 0.04);
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: 0.3s ease;
cursor: pointer;
}

.card-astro {
transform: translateY(-6px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
border-color: rgba(241, 181, 59, 0.5);
}

.card-astro img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
}

.card-astro h3 {
font-size: 18px;
margin: 15px;
}

.card-astro p {
font-size: 14px;
color: #d1d5db;
margin: 0 15px 20px;
}

/* =========================================================
FERRAMENTAS
========================================================= */
.bloco-ferramentas {
margin-top: 40px;
}

.bloco-ferramentas h2 {
font-size: 28px;
margin-bottom: 10px;
}

.intro-ferramentas {
margin-bottom: 25px;
color: #d1d5db;
line-height: 1.6;
}

.grid-ferramentas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}

.card-ferramenta {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 22px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
transition: 0.3s ease;
}

.card-ferramenta {
transform: translateY(-4px);
border-color: rgba(241, 181, 59, 0.45);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.card-ferramenta h3 {
font-size: 20px;
margin-bottom: 12px;
}

.card-ferramenta p {
font-size: 15px;
line-height: 1.6;
color: #d1d5db;
margin-bottom: 18px;
}

.botao-ferramenta {
display: inline-block;
background: #f1b53b;
color: #111 !important;
text-decoration: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 700;
transition: 0.3s ease;
}

.botao-ferramenta {
background: #ffd166;
color: #111 !important;
}

.caixa-info {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #f1b53b; /* destaque amarelo */
  padding: 18px 20px;
  margin: 25px 0;
  border-radius: 12px;
  box-shadow: var(--sombra-card);
}

.caixa-info p {
  margin: 0;
  color: var(--cor-texto-secundario);
  line-height: 1.7;
}

/* =========================================================
STELLARIUM
========================================================= */
.bloco-stellarium {
margin: 40px 0;
}

.card-stellarium {
background: rgba(255, 255, 255, 0.04);
color: #fff;
border-radius: 16px;
padding: 24px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-stellarium h2 {
font-size: 28px;
margin-bottom: 10px;
}

.card-stellarium p {
color: #d1d5db;
margin-bottom: 15px;
}

.frame-stellarium {
width: 100%;
height: 520px;
margin-top: 20px;
border-radius: 14px;
overflow: hidden;
background: #000;
border: 1px solid rgba(255, 255, 255, 0.12);
}

.frame-stellarium iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}

.aviso-stellarium {
margin-top: 12px;
font-size: 14px;
color: #d1d5db;
}

.aviso-stellarium a {
color: #f1b53b;
font-weight: 700;
text-decoration: none;
}

.aviso-stellarium a {
color: #fff;
}

/* =========================================================
FASES DA LUA
========================================================= */
.bloco-fases-lua {
margin: 40px 0;
}

/* evita a primeira seção grudar no card de introdução */
.bloco-ferramentas {
margin-top: 45px;
}

/* =========================================================
FORMULÁRIOS DAS FERRAMENTAS
========================================================= */
.calculadora-500,
.ferramenta-form {
display: grid;
gap: 14px;
margin-top: 22px;
}

.calculadora-500 label,
.ferramenta-form label {
color: #fff;
font-weight: 700;
font-size: 15px;
}

.calculadora-500 input,
.calculadora-500 select,
.ferramenta-form input,
.ferramenta-form select {
width: 100%;
padding: 13px 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.15);
background: #0d1117;
color: #fff;
font-size: 15px;
}

.calculadora-500 input,
.calculadora-500 select,
.ferramenta-form input,
.ferramenta-form select {
outline: none;
border-color: #f1b53b;
box-shadow: 0 0 0 3px rgba(241, 181, 59, 0.18);
}

/* =========================================================
RESULTADOS DAS FERRAMENTAS
========================================================= */
.resultado-500,
.resultado-ferramenta,
#resultado500,
#resultadoPoluicao {
margin-top: 16px;
padding: 16px;
border-radius: 12px;
background: rgba(241, 181, 59, 0.08);
border: 1px solid rgba(241, 181, 59, 0.3);
color: #d1d5db;
line-height: 1.6;
}

.resultado-500 strong,
.resultado-ferramenta strong,
#resultado500 strong,
#resultadoPoluicao strong {
color: #f1b53b;
}
/* IMAGENS DOS CARDS DA PÁGINA ARTIGOS - SEM CORTE */
.grid-home .card img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
border-radius: 12px;
margin: 0 0 18px 0;
}