:root{
  --navy-dark:#0a1220;
  --navy-mid:#16233c;
  --navy-light:#2a3f63;
  --text-light:#e7ebf2;
  --text-muted:#b7c1d6;
  --rule:#3a4a6b;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

#acerca{
  background: linear-gradient(rgba(73, 159, 245, 0.181), rgba(1, 1, 58, 0.438));
  background-size: cover;
  background-position: center;
}

#more-text{
  display: none;
}

#contact{
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

body{
  background-image: url("../images/background_img.jpg");
  background-size: cover;
  background-position: center;
  color:var(--text-light);
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
}

.presentation{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#contact {
  min-height: 100dvh;
  padding: 60px 0;
}

.contact-intro {
  text-align: center;
  margin-top: 16px;
}

.contact-card {
  max-width: 600px;
  margin: 32px auto 0;
  padding: 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  text-align: left;
  color: #222;
}

.container p{
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contact-card .form-control {
  border-radius: 10px;
  padding: 12px 14px;
}

.contact-card .form-control:focus {
  border-color: #1b10ea;
  box-shadow: 0 0 0 0.2rem rgba(27, 16, 234, 0.2);
}

.contact-card textarea {
  resize: vertical;
}

#contact-btn {
  min-width: 140px;
}

#contact-status {
  margin-top: 16px;
  font-weight: 500;
}

.currenSelector{
  cursor:pointer;
}

#contact-status.success { color: #198754; }
#contact-status.error   { color: #dc3545; }

.hero-copier{
  height: 500px;
  max-width: 700px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hero-copy.container {
  height: 500px;
  max-width: 700px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#sub-content1,
#sub-content2{
  width: 100%;
}

#sub-content2 p{
  max-width: 900px;
  margin: 0 auto 16px;
}

#sub-content1 img {
  max-width: 100%;
  max-height: 460px;
  height: auto;
  display: block;
  margin: 0 auto;
}

#myChart{
  width: 100%;
  height: 100%;
}

.ex_chart{
  padding-top: 30px;
  max-width: 100dvw;
  overflow-x: hidden;
}

.buttons{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(700px + 160px);   
  max-width: 95%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.buttons button{
  pointer-events: auto;
}

.container{
  text-align: center;
}

.chart-container{
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 350px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
header{
  padding:36px 6% 20px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}

.brand img{
  width: 40%;
}


nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:26px;
  margin-top:28px;
}

.flags{
  display:flex;
  gap:6px;
  margin-right:10px;
}

.flags span{
  font-size:20px;
  line-height:1;
}

nav a{
  color:var(--text-light);
  border-bottom:2px solid transparent;
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  padding-bottom:4px;
  text-decoration:none;
  text-transform:uppercase;
  transition:border-color .2s ease, color .2s ease;
}

nav a:hover,
nav a:focus-visible{
  color:#ffffff;
  border-bottom-color:#5b6f96;
}

.nav-divider{
  width:1px;
  height:16px;
  background:var(--rule);
}

p{
  text-align: justify;
}

header hr{
  border:none;
  border-top:1px solid var(--rule);
  margin-top:26px;
}

/* ---------- Hero ---------- */
main.hero{
  display:grid;
  grid-template-columns:minmax(220px,420px) 1fr;
  gap:6%;
  align-content: center;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
  padding:60px 6% 70px;
}

.pdf-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 16px;
}

.pdf-wrap iframe {
  display: block;
  width: 100%;
  height: 80dvh;
  min-height: 400px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.pdf-download {
  text-align: center;
  margin-top: 16px;
}

.globe-wrap{
  display:flex;
  justify-content:center;
}

.globe-wrap svg{
  width:100%;
  max-width:320px;
  height:auto;
  color:#f4f6fa;
  opacity:.95;
}

.hero-copy h2{
  font-size:clamp(24px,3vw,32px);
  font-weight:400;
  letter-spacing:.5px;
  margin-bottom:18px;
}

.hero-copy .rule{
  width:100%;
  height:1px;
  background:linear-gradient(90deg,var(--rule),transparent);
  margin-bottom:22px;
}

.hero-copy p{
  color:var(--text-muted);
  font-size:15px;
  line-height:1.7;
  margin-bottom:16px;
  max-width:70ch;
}

.read-more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  color:var(--text-light);
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  margin-top:10px;
  text-transform:uppercase;
}

.read-more .circle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:1px solid var(--text-light);
  border-radius:50%;
}

.read-more:hover .circle{
  background:var(--text-light);
  color:var(--navy-dark);
}

.spacing{
  padding: 50px;
}

/* ---------- Footer ---------- */
footer{
  background:#000000;
  border-top:1px solid var(--rule);
  padding:34px 6%;
}

.footer_item{
  color: #e7ebf2;
  align-items: center;
}

.footer_item p{
  text-align: center;
}

.footer_item img{
  min-width: 0;
  max-width: 100%;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:28px;
  max-width:1200px;
  margin:0 auto;
}

.socials{
  display:flex;
  gap:12px;
  margin-top:10px;
}

.socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:1px solid var(--rule);
  border-radius:50%;
  color:var(--text-muted);
}

.socials a:hover{
  color:#fff;
  border-color:#fff;
}

@keyframes fadeOut {
    from{
      opacity: 1;
    }
    to{
      opacity: 0;
    }
}

.fadeOut{
  opacity: 1;
  animation: fadeOut 1s ease-out forwards;
}

@keyframes fadeIn {
    from{
      opacity: 0;
    }
    to{
      opacity: 1;
    }
}

.fadeIn {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@media (max-width:720px){
  main.hero{
    grid-template-columns:1fr;
    text-align:center;
    width: 100%;
  }
  .brand img{
    width: 100%;
  }

  .globe-wrap img{
    max-width:220px;
  }

  .hero-copy p{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-copy.container {
    height: 650px;
  }
  .footer_item img{
    min-width: 0;
    max-width: 80%;
  }
}