:root{
  --navy:#0b1733;
  --navy-2:#0e1e5b;
  --teal:#16c3a8;
  --teal-neon:#12d8ce;
  --gold:#cba135;
  --green:#2f9e44;
  --text:#eaf0ff;
  --muted:#b6c0e3;
  --card:#0f1e39cc;
  --card-stroke:#2a3b66;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%
}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background: var(--navy);
  background-image: url("../img/background.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter: saturate(140%) blur(8px);
  background:linear-gradient(to bottom, rgba(10,16,32,.85), rgba(10,16,32,.35));
  border-bottom:1px solid #1c2b52;
}

.container-fluid{
  width:min(1160px, 92%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 0;
}

.logo{
  height:90px; 
  width:auto;
}

.navbar-brand{
  margin: 0!important;
  padding: 0!important;
  font-size: 1em;
  color:var(--text);
  font-weight: 600;
  opacity: .9;
}

.navbar-brand:hover{
  color:var(--text);
}

.nav-item a{
  color:var(--text);
  text-decoration:none;
  margin:-10px 14px 0px 14px;
  font-weight:600;
  opacity:.9;
}

.nav-item a:hover{
  text-decoration: underline;
}

.hero{
  position:relative; 
  isolation:isolate;
  padding: clamp(56px, 8vw, 100px) 0 72px;
}

.hero-sobre{
  position:relative; 
  isolation:isolate;
  padding: clamp(56px, 8vw, 100px) 0 72px;
  background: url(/assets/img/hero-sobre.png) no-repeat;
  mask-image: radial-gradient(circle at center, black 10%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 75%, transparent 100%); /* Vendor prefix for compatibility */
  background-size: cover;
  background-position:0 60%;
}

.hero-agendar{
  position:relative; 
  isolation:isolate;
  padding: clamp(132px, 8vw, 100px) 0 120px;
  background: url(/assets/img/hero_agendar.png) no-repeat;
  mask-image: radial-gradient(circle at center, black 10%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 75%, transparent 100%); /* Vendor prefix for compatibility */
  background-size: cover;
  background-position:0 22%;
}

.hero-contato h1{
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}

.hero-contato p{
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: larger;
}

.agendar{
  width: 60%;
  margin: 0 auto;
  text-align: center;
}

.agendar h3{
  font-weight: 600;
  text-align: center;
  color: var(--teal-neon);
}

.bg-overlay{
  position:absolute; 
  inset:0; 
  z-index:-1;
  background:
    radial-gradient(1200px 600px at 75% 40%, rgba(22,195,168,.18), transparent 60%),
    radial-gradient(700px 400px at 20% 20%, rgba(203,161,53,.20), transparent 70%);
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:48px; 
  align-items:center;
}

.hero-copy h1{
  font-family: Montserrat, sans-serif;
  font-weight:800; line-height:1.1;
  font-size: clamp(28px, 4.2vw, 56px);
  margin:0 0 14px;
}

.hero-copy h3{
  font-family: Montserrat, sans-serif;
  font-weight:800; line-height:1.1;
  
}

.hero-copy p{
  color:var(--muted);
  margin:0 0 22px;
  font-size:clamp(15px, 1.5vw, 18px);
}
.cta-row{
  display:flex; 
  margin-top: 50px;
  gap:12px; 
  flex-wrap:wrap;
}

.hero-art{
  position:relative;
  display:flex;
  justify-content:center;
}

.drop{
  width:min(420px, 100%); height:auto; filter: drop-shadow(0 30px 40px rgba(203,161,53,.35));
  /*animation: float 5s ease-in-out infinite;*/
}
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-8px) }
}

.section{
  padding:72px 0;
}

.section.alt{
  background: linear-gradient(180deg, rgba(10,16,32,.0), rgba(10,16,32,.35));
}

.cards{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(4, 1fr);
}

.card{
  background:var(--card);
  border:1px solid var(--card-stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

.card img{
  align-self: center;
  margin-bottom:8px
}

.card h3{
  margin:4px 0 6px;
  font-family:Montserrat, sans-serif;
  color: var(--text);
  font-size: 1.4em;
  font-weight: 600;
  text-align: center;
}

.card p{
  margin:0;
  color:var(--muted);
  text-align:center;
}

.grid-2{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:start
}

.grid-2-solutions{
  display:grid;
  grid-template-columns:0.1fr .9fr;
  gap:28px;
  align-items:start;
  margin: 35px 0 15px 0px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.solutions-title h1{
  font-weight:bolder;
  margin-bottom: 15px;
  text-align: center;
  margin-bottom: 25px;
}

.solutions-grid{
  display:grid;
  grid-template-columns: 0.4fr .6fr;
  gap:48px; 
  align-items:center;
}

.solutions h4{
  font-weight: 800;
  margin-bottom: 10px;
}

.form{
  background:var(--card); border:1px solid var(--card-stroke);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)
}

.form h2{
  margin:0 0 12px
}

.form label{
  display:block;
  font-size:14px;
  color:var(--muted);
  margin:10px 0 6px;
}

.form input,.form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #2b3b63;
  background:#0b1633; color:var(--text); outline:none;
}

.form input:focus,.form textarea:focus{
  border-color:#3dd2bf;
}

#beneficios{
  background:var(--card);
}

#beneficios h1{
  font-weight: bolder;
}

#beneficios h3{
  font-weight: bolder;
  padding-bottom: 10px;
}

.sobre h1{
  font-weight: 800;
  text-align: center;
  text-indent: 1.1;
}

.sobre p{
  text-align: justify;
}

.missao h4{
  font-weight: 800;
  margin-bottom: 10px;
}

.missao p, li{
  text-align: justify;
  font-weight: 500;
  margin-bottom: 10px;
}

.faca-parte h1{
  font-weight: 800;
  margin-bottom: 0.7em;
}

.faca-parte p{
  font-weight: 500;
  text-align: justify;
  color: var(--text);
}

.faca-parte>.card{
  margin-bottom: 20px;
}

.faca-parte h4{
  color: var(--text);
  font-weight: 600;
}

.contato{
  margin-top: -90px;
}

.contato h3{
  font-weight: 800;
  color: var(--teal-neon);
}

.contato p{
  text-align: start;
  font-weight: 600;
}

.card-info {
  background: radial-gradient(circle at top left, rgba(25, 196, 184, 0.14), transparent 60%),
              rgba(3, 19, 54, 0.96);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(16, 70, 120, 0.8);
}

/* Caixa do formulário */
.contato-form-wrapper {
  background: radial-gradient(circle at top right, var(--navy-2), transparent 60%),
              rgba(3, 16, 45, 0.96);
  border-radius: var(--radius);
  padding: 28px 26px 32px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(19, 56, 110, 0.8);
}

.contato-form-wrapper h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.contato-form-wrapper p {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--muted);
}

/* Formulário */
.contato-form .form-group {
  margin-bottom: 16px;
}

.contato-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--muted);
}

.contato-form input,.contato-form textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(38, 89, 150, 0.9);
  background: rgba(4, 20, 52, 0.95);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.contato-form input::placeholder,
.contato-form textarea::placeholder {
  color: rgba(181, 192, 223, 0.6);
}

.contato-form input:focus,.contato-form textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal-neon);
  background: rgba(2, 16, 45, 0.95);
}

.partners{
  text-align:center;
}

.partners .logos{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:14px
}

.logo-pill{
  border:1px solid var(--card-stroke); background:var(--card);
  padding:10px 14px; border-radius:999px
}

.site-footer{
  border-top:1px solid #1c2b52;
  padding:15px 0;
  background:#0a1226;
  text-align: center;
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  align-items:center;
}

.footer-links{
  list-style:none;
  padding:0; 
  margin:0; 
  display:grid; 
  gap:6px;
}

.footer-links a{
  color:var(--muted);
  text-decoration:none;
}

.social{
  opacity:.6;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px; text-decoration:none;
  font-weight:700; letter-spacing:.2px; transition: transform .12s ease, filter .2s ease;
  border:1px solid transparent;
}

.btn:hover{
  transform: translateY(-1px);
  filter:brightness(1.05);
}

.btn.primary{
  background: linear-gradient(90deg, var(--green), var(--gold));
  color:#0a0f1e;
}

.btn.secondary{
  background:transparent;
  border-color:#2b3b63;
  color:var(--text);
}

.btn.ghost{
  border-color:#2b3b63;
  padding:10px 14px;
  text-decoration: none!important;
}

@media (max-width: 980px){
  .hero-grid, .grid-2, .grid-3, .solutions-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .nav a{margin:0 8px}
  .hero-art{order:-1}
}

@media (max-width: 620px){
  .cards{grid-template-columns:1fr}
}

@media (max-width:980px){
  .agendar{width: 100%;}
}