:root{
  --navy:#071d32;
  --blue:#254a68;
  --gold:#bc9864;
  --yellow:#efc96e;
  --ink:#1e405b;
  --max:1180px;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  color:var(--ink);
  font-family:Montserrat,Arial,sans-serif;
  line-height:1.55;
}

.wrap{
  width:min(var(--max),calc(100% - 48px));
  margin:auto;
}

img{
  display:block;
  max-width:100%;
}


/* HERO */

.hero{
  min-height:525px;
  display:grid;
  align-items:center;
  position:relative;
  isolation:isolate;
  background:var(--navy) url("images/BANNER-PRINCIPAL.jpg") center/cover no-repeat;
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(
    90deg,
    rgba(5,25,44,.96),
    rgba(5,25,44,.72) 50%,
    rgba(5,25,44,.16)
  );
}

.hero h1{
  margin:0;
  color:#fff;
  font:500 clamp(3rem,6vw,5.7rem)/1 "Cormorant Garamond",Georgia,serif;
}

.hero h1 i{
  display:inline-block;
  width:210px;
  height:4px;
  margin:0 0 .22em 25px;
  background:#fff;
  border-radius:3px;
}

.hero h1 strong{
  color:#f2cd71;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero p{
  display:inline-block;
  margin:28px 0 0;
  padding:4px 20px 8px;
  color:#fff;
  background:rgba(1,11,22,.9);
  font-size:clamp(1.3rem,2.5vw,2.2rem);
  font-weight:300;
}


/* INTRO */

.intro{
  padding:62px 0 30px;
}

.intro-inner{
  display:grid;
  grid-template-columns:1.55fr .65fr;
  align-items:center;
  gap:45px;
}

.intro-inner p{
  margin:0;
  font-size:clamp(1.05rem,1.8vw,1.36rem);
}

.intro-inner span{
  display:block;
  height:2px;
  margin-top:18px;
  background:var(--ink);
}

.intro-inner img{
  width:330px;
  aspect-ratio:1.14;
  object-fit:cover;
  box-shadow:14px 14px 0 var(--blue);
}

.intro-label{
  width:min(500px,90%);
  margin:0 0 18px;
  padding:10px max(24px,calc((100vw - var(--max))/2));
  color:#fff;
  background:linear-gradient(90deg,var(--blue),var(--navy));
  font-size:1.35rem;
}

.intro-bottom{
  font-size:clamp(1.05rem,1.8vw,1.36rem);
}


/* DOCUMENTS */

.documents{
  padding:38px 0 50px;
  color:#fff;
  background:linear-gradient(135deg,#2a506f,#16364f);
}

.documents h2{
  margin:0 0 34px;
  text-align:center;
  font-size:clamp(1.1rem,1.8vw,1.35rem);
  font-weight:400;
}

.documents h2 strong{
  color:var(--yellow);
}

.document-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.document{
  min-height:145px;
  display:grid;
  grid-template-columns:50px 1fr 135px;
  align-items:center;
  background:var(--navy);
  opacity:.2;
  transform:scale(.98);
  transition:.65s;
  outline:none;
  cursor:pointer;
}

.document:first-child{
  grid-column:1/-1;
}

.document.is-active,
.document:hover,
.document:focus-visible{
  opacity:1;
  transform:scale(1);
}

.document:focus-visible{
  box-shadow:0 0 0 3px var(--yellow);
}

.document>span{
  align-self:stretch;
  display:grid;
  place-items:center;
  margin:-12px 0 -12px -20px;
  background:var(--gold);
  font-size:1.4rem;
  font-weight:600;
}

.document>div{
  padding:18px 22px;
}

.document h3{
  display:inline;
  margin:0;
  font-size:1.15rem;
}

.document p{
  display:inline;
  margin:0;
  font-size:1rem;
}

.document img{
  width:120px;
  height:120px;
  padding:16px;
  object-fit:contain;
  background:#06192b;
}


/* DOCUMENT CONTROLS */

.doc-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:30px;
}

.doc-controls button{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  color:#fff;
  background:transparent;
  cursor:pointer;
}

.doc-controls button:hover{
  color:var(--blue);
  background:#fff;
}

.doc-dots{
  display:flex;
  gap:8px;
}

.doc-dots span{
  width:8px;
  height:8px;
  border-radius:10px;
  background:rgba(255,255,255,.4);
  transition:.3s;
}

.doc-dots span.is-active{
  width:25px;
  background:var(--yellow);
}


/* PROCESS */

.process{
  padding:62px 0 48px;
}

.process-inner{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:50px;
  align-items:center;
}

.process-inner img{
  width:300px;
  box-shadow:-14px 14px 0 var(--blue);
}

.process p{
  margin:0 0 25px;
  font-size:clamp(1rem,1.7vw,1.25rem);
}


/* CTA */

.cta{
  margin-top:38px;
  padding:12px 24px;
  color:#fff;
  background:linear-gradient(90deg,var(--blue),var(--navy));
  text-align:center;
  font-size:clamp(1rem,1.7vw,1.3rem);
}

.cta strong{
  color:var(--yellow);
}


/* TABLET */

@media(max-width:850px){

  .intro-inner{
    grid-template-columns:1fr 250px;
  }

  .document{
    grid-template-columns:45px 1fr 100px;
  }

  .document img{
    width:95px;
    height:95px;
  }

  .process-inner{
    grid-template-columns:240px 1fr;
  }

}


/* MOBILE */

@media(max-width:640px){

  .wrap{
    width:min(100% - 30px,var(--max));
  }

  .hero{
    min-height:420px;
    background-position:62% center;
  }

  .hero h1 i{
    display:block;
    width:100px;
    height:3px;
    margin:18px 0;
  }

  .hero h1 strong{
    font-size:.8em;
  }

  .intro-inner{
    grid-template-columns:1fr;
  }

  .intro-inner img{
    width:78%;
    margin:auto;
  }

  .intro-label{
    margin-top:42px;
  }

  .document-grid{
    grid-template-columns:1fr;
  }

  .document:first-child{
    grid-column:auto;
  }

  .document{
    grid-template-columns:40px 1fr 78px;
  }

  .document>span{
    margin:-8px 0 -8px -8px;
  }

  .document>div{
    padding:15px 12px;
  }

  .document h3,
  .document p{
    font-size:.86rem;
  }

  .document img{
    width:74px;
    height:74px;
    padding:10px;
  }

  .process-inner{
    grid-template-columns:1fr;
  }

  .process-inner img{
    width:70%;
    margin:auto;
  }

  .cta{
    margin-top:30px;
  }

}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

  .document,
  .doc-dots span{
    transition:none;
  }

}