@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --bgColor: #F0FEFC;
  --txtColor: #0b1020;
  --verdePrincipal: #2bb573;
  --azulClaro: #2890A3;
  --darkBlue: #1D6469;
  --gray: #bfd1ce;

  /* Tipografia base */
  --fs-body: 16px;
  --ratio: 1.25;

  /* Escala tipográfica */
  --fs--2: calc(var(--fs-body) / (var(--ratio) * var(--ratio))); /* ≈ 10px */
  --fs--1: calc(var(--fs-body) / var(--ratio));                  /* ≈ 13px */
  --fs-0:  var(--fs-body);                                       /* 16px */
  --fs-1:  calc(var(--fs-body) * var(--ratio));                  /* 20px */
  --fs-2:  calc(var(--fs-1) * var(--ratio));                     /* 25px */
  --fs-3:  calc(var(--fs-2) * var(--ratio));                     /* 31px */
  --fs-4:  calc(var(--fs-3) * var(--ratio));                     /* 39px */
  --fs-5:  calc(var(--fs-4) * var(--ratio));                     /* 49px */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  font-feature-settings: "lnum";
  overflow-x: hidden;
  transition: all 0.2s;
}

body {
  margin: 0;
  padding: 0 !important;
  font-size: var(--fs-0);
  line-height: 1.6;
  background-color: var(--bgColor);
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: contain;
  color: var(--txtColor);
  transition: all 0.3s !important;
}

section { padding: 8rem 0; }

@media (max-width: 767.98px) { section { padding: 4rem 0; } }
@media (max-width: 480px) { :root { --fs-body: 14px; } }
@media (min-width: 1280px) { :root { --fs-body: 18px; } }

.bg-dark {
  background-color: var(--txtColor) !important;
  color: var(--bgColor);
}
footer img.logo-footer {filter: saturate(0) brightness(2);}

.bg {
  background: url(../img/hero-bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: -1;
  position: absolute;
  min-height: 100vh;
  height: 100%;
  width: 100vw;
  top: 0;
  left: 0;
  mix-blend-mode: overlay;
}



/* ================================================================== TEXTO ================================================================== */
p { margin: 0 0 0.8em; }
.small { font-size: var(--fs--1); line-height: 1.5; }

h1, .display-1 { font-size: var(--fs-5); line-height: 1.3; }
h2, .display-2 { font-size: var(--fs-3); line-height: 1.4; }
h3 { font-size: var(--fs-2); line-height: 1.2; color: var(--verdePrincipal); font-weight: 700; }
h4 { font-size: var(--fs-1); line-height: 1.25; margin: 0 0 1em; }

a { color: var(--verdePrincipal); }
a:hover { color: var(--azulClaro); }

@media (max-width: 767.98px) {
  h1, .display-1 { font-size: var(--fs-3); }
  h2, .display-2 { font-size: var(--fs-2); }
}

/* ================================================================== FORM/BTN ================================================================== */
button, .btn, input, select {
  font-size: var(--fs-0);
  line-height: 1.2;
  padding: 0.75em 1em;
}

button:focus,
.btn:focus,
.navbar-toggler:focus,
.navbar-toggler:hover {
  outline: none !important;
  box-shadow: none !important;
}

.btn {
  justify-content: center;
  align-items: center;
  font-weight: 500 !important;
}

.btn.btn-secondary {
  background: #f9f9f938;
  border: 0;
  border-radius: 1000px;
  color: var(--bgColor);
  padding: 1rem 2rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 9px #ffffff1f;
  transition: all;
}
.btn.btn-secondary:hover, 
.btn.btn-secondary:focus { 
  background: var(--gray);
  color: var(--txtColor);
  box-shadow: 0 0 2px var(--azulClaro);
}

.btn.btn-primary {
  background: var(--gray);
  border: 0;
  border-radius: 1000px;
  color: var(--txtColor);
  padding: 1rem 2rem;
  opacity: 0.8;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 3px var(--gray);
  transition: all;
}
.btn.btn-primary:hover, 
.btn.btn-primary:focus { 
  background: var(--verdePrincipal);
  opacity: 1;
  box-shadow: 0 0 3px var(--verdePrincipal);
}

.btn-rounded {
  padding: 0.75rem !important;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-link {
    background: #f9f9f930;
    border: 0;
    border-radius: 0;
    color: var(--bgColor);
    backdrop-filter: blur(4px);
    transition: all;
    overflow: hidden;
}

.page-link:focus,
.page-link:hover {
    color: var(--txtColor);
    background-color: var(--bgColor);
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--verdePrincipal);
    border-color: initial;
}

li.page-item.disabled {
    display: none;
}
/* ================================================================== INPUTS ================================================================== */
.form-floating > label {
  top: -2px;
  padding: 1rem 1.5rem;
  font-weight: 400;
}
input#floatingInput {
  padding-left: 1.5rem;
  background: transparent;
  border-radius: 1000px;
}
input#floatingInput:focus {
  background: var(--gray);
  border-color: var(--gray);
  color: var(--txtColor);
  outline: none !important;
  box-shadow: none !important;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  font-weight: 700;
  color: var(--txtColor);
}



/* ================================================================== CARDS/MODAL ================================================================== */
.card {
  background: #f9f9f930;
  border: 0;
  border-radius: 1rem;
  color: var(--bgColor);
  backdrop-filter: blur(4px);
  transition: all;
  overflow: hidden;
}
.card-body { padding: 2rem; }

.modal { background-color: rgba(11, 16, 32, 0.5); }
.modal .btn.btn-primary {
  background: var(--verdePrincipal);
  color: var(--txtColor);
  box-shadow: none;
}
.modal .btn.btn-primary:hover { background: var(--gray); }

.btn-close {
  background: transparent url(../fonts/btn-close.svg) center / 1em auto no-repeat !important;
  opacity: 1;
}

/* ================================================================== MENU ================================================================== */
.navbar-dark .navbar-nav .nav-link {
  color: var(--bgColor);
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--bgColor);
  text-decoration: underline;
}
.navbar-nav button img { filter: invert(1) saturate(0); }
.navbar-nav button:focus img,
.navbar-nav button:hover img { filter: none; }

nav#navbar {
  background-color: #0b1020e0 !important;
  backdrop-filter: blur(4px);
  padding-right: 0 !important;
  opacity: 0;
  transition: all 0.2s;
}
nav#navbar.scroll { opacity: 1; }

/* ================================================================== SECTIONS ================================================================== */
#s-hero {
  height: 100vh;
  padding: 0 0 2rem;
  background: url(../img/s-hero.webp) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
#s-hero .card { margin-top: 15vh; }
#s-hero .bg {
  background: url(../img/hero-bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
  position: absolute;
  min-height: 100vh;
  height: 100%;
  width: 100vw;
  top: 0;
  left: 0;
  mix-blend-mode: hard-light;
  backdrop-filter: blur(4px);
  opacity: 0.8;
}
#s-hero .container-fluid {
  z-index: 10;
  position: relative;
}

#s-destaque { min-height: 80vh; }
#s-bio .btn-rounded {
  height: 30px;
  width: 30px;
  padding: 0.3rem !important;
}

@media (max-width: 767.98px) {
  #s-hero {
    min-height: 100vh;
    height: auto;
    padding-top: 6rem;
  }
  .nav-link { border-top: solid 1px; }
  .bg {
    bottom: 0;
    right: 0;
    mix-blend-mode: overlay;
    transform: rotate(180deg);
  }
  #s-hero a { width: 40px; height: 40px; }
}