@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
  --max-width: 1290px; 
  --bleeding: 0 1.5rem; 
  --cl-gradient: linear-gradient(
    90deg, 
    rgb(8, 25, 120) 0%, 
    rgb(2, 42, 136) 40%, 
    rgb(2, 42, 136) 60%, 
    rgb(8, 25, 120) 100%);
  --cl-neutral-10: rgb(42, 42, 42);;
  --cl-neutral-20: rgb(41, 41, 41);
  --cl-neutral-80: rgba(255, 255, 255, 0.7);
  --cl-neutral-100:rgb(255, 255, 255);
    --cl-primary-10: rgb(5, 17, 84);
  --cl-primary-20: rgb(2, 42, 136);
  --cl-primary-40: rgb(15, 56, 162);
  --cl-primary: rgb(56, 82, 194);
  --cl-primary-60: rgb(74, 114, 226);
  --cl-primary-80: rgb(138, 169, 255);
  --cl-primary-90: rgb(168, 191, 255);
  --cl-primary-100: rgb(216, 226, 255);
  --cl-secondary-20: rgb(229, 96, 5);
  --cl-secondary-40: rgb(245, 122, 5);  
  --cl-secondary: rgb(251, 148, 39);
  --cl-secondary-60: rgb(255, 173, 87); 
  --cl-secondary-80: rgb(254, 205, 153);  
  --ff-title: 'Plus Jakarta Sans', sans-serif;
  --ff-text: 'Plus Jakarta Sans', sans-serif;
  --fs-xxl: 3rem;
  --fs-xl: 2rem;
  --fs-l: 1.5rem; 
  --fs-m: 1rem; 
  --fs-s: 0.875rem;
  --fs-xs: 0.75rem; 
  --fw-regular: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
  --transition: all 0.2s cubic-bezier(0, 0, 1, 1);
}

@media(min-width:768px){
  :root {
    --bleeding: 0 2rem; 
  }
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--cl-primary-10);
}

body {
  background: var(--cl-gradient);
  font-family: var(--ff-text);
  font-size: var(--fs-m);
  font-optical-sizing: auto;
  color: var( --cl-neutral-80);
}

ul {
  list-style: none;
}


p,
ul li {
  color: var(--cl-neutral-80);
}

p span {
  color: var(--cl-neutral-100);
}

a,
a:visited,
a:hover,
a:focus
 {
	color: var(--cl-neutral-80);
  text-decoration: none;
}

a:hover {
  color: var(--cl-neutral-100);
}

a:focus {
	outline: none;
}

header {
  background-color: var(--cl-primary-10);
  border-bottom: 1px solid var(--cl-primary-80);
  box-shadow: var(--dark-shadow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99; /* z-index-ver */
}

.nav > div{
  display: grid;
  grid-template-columns: 1fr;
  padding: 1rem 2.5rem;
}

.nav .nav-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav .nav-brand a{
  height: 40px;
}

.nav .nav-brand svg {
  width: 40px;
  height: auto;
  fill: var(--cl-neutral-100);
}

.nav-menu {
  height: 0;
  overflow: hidden;
  transition: var(--transition); /* transition-ver */
}

.nav-menu ul{
  text-align: center;
}

.nav-menu ul li.cta {
  display: none;
}

.nav-menu ul li a{
  cursor: pointer;
  display: block;
  padding: 1rem 2rem;
  color: var(--cl-primary-80);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: var(--transition);
} 

.nav-menu ul li a:hover{
  color: var(--cl-secondary-60);
}

.nav-menu ul li a:focus {
  outline: none;
}

.nav-toggle {
  cursor: pointer;
  display: inline-block;
  content: '';
  width: 30px;
  height: 30px;
  background-color: transparent;
  background-image: url(img/menu-icon.svg);
  background-size: 30px 30px;
  background-position: center;
  transition: var(--transition); /* transition-ver */
  border: none;
}

@media(min-width: 768px){
  header {
    position: relative;
  }

  nav{
    z-index: 98; /* z-index-ver */
    background-color: var(--cl-primary-10);
    display: block;
    padding: 0;
    position: fixed;
    top: -100px;
    left: 0;
    right: 0;
    width: 100%;

    /* min-height: var(--nav-pd); */
    min-height: 50px; /* ver */

    border-bottom: 2px solid var(--cl-primary-60);
    box-shadow: var(--light-shadow);
    transition: var(--transition); /* transition-ver */
  }

  .nav > div {
    width: 100%;
    max-width: var(--max-width);
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin: 0 auto;
    padding: var(--bleeding);
  }

  .nav-brand{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .nav-brand img {
    width: 40px;
  }
 
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    height: auto !important;

    /* min-height: var(--pd-nav); */
    min-height: 50px; /* ver */
  }

  .nav-menu ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;

    /* min-height: var(--pd-nav); */
    min-height: 50px; /* ver */
    padding: 0.5rem 0;
  }

  .nav-menu ul li{
    padding: 0;
    margin: 0;
    padding: 0 .25rem;
    border-bottom: none;
  }

  .nav-menu ul li.cta {
    padding: 0 0 0 1.5rem;
    display: inline-block;
  }

  .nav-menu ul li a{
    padding: 0.25rem 0.5rem;
    margin: 0;
  }

  .nav-menu ul li.cta a{
    background-color: var(--cl-primary-80);
    font-weight: var(--fw-semi-bold);
    color: var(--cl-primary-10);
    border: 1px solid transparent;
    border-radius: 4px;
    transition: var(--transition);
  }

  .nav-menu ul li.cta a:hover{
    background-color:transparent;
    color: var(--cl-secondary-60);
    border: 1px solid var(--cl-secondary-60);
  }
}

.hero {
  /* min-height: 100vh; */
  min-height: 60vh; /* ver */

  background: url(img/bkg-img.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-bottom: 1px solid var(--cl-primary-60);
}

.hero .container {
  /* min-height: 100vh; */
  min-height: 60vh; /* ver */

  display: flex;
  flex-direction: column;
  justify-content: center;

}

.hero-header{
  display: none;
}

.hero-brand svg {
  /* display: none; */
  width: 80px;
  aspect-ratio: 1 / 1;
}

.hero-brand svg {
  fill: var(--cl-neutral-100); 
}

.hero-nav-menu {
  display: none;
}

.hero-nav-menu li {
  display: inline-block;
  margin: 0 0.5rem;

  background-image:
  linear-gradient(90deg, rgba(256, 256, 256, 0.8), transparent);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: var(--transition);
}

.hero-nav-menu li.cta {
  margin: 0 0 0 1.5rem;
}

.hero-nav-menu li:hover{
  background-image:
  linear-gradient(90deg, var(--cl-secondary-60), var(--cl-secondary-60));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: left bottom;
}

.hero-nav-menu li.cta:hover {
  background-image: none;
  background-size: 0;
}

.hero-nav-menu li a,
.hero-cta a {
  cursor: pointer;
  font-size: 1rem;
  color: var(--cl-neutral-100);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: var(--transition); /* transition-ver */
  line-height: 2em;
}

.hero-nav-menu li.cta a,
.hero-cta a{
  background-image: none;
  padding: .5rem 1rem;
  border: 2px solid var(--cl-neutral-100);
  border-radius: 6px;
  transition: var(--transition); /* transition-ver */
}

.hero-nav-menu li:hover a,
.hero-cta:hover a {
  color: var(--cl-secondary-60);
}

.hero-nav-menu li.cta a:hover,
.hero-cta:hover a{
  border: 2px solid var(--cl-secondary);
  color: var(--cl-secondary);
}

.hero-content {
  display: block;
  padding: 6rem 0 3rem 0;
  text-align: center;
}

.hero-statement {
  width: 100%;
  color: var(--cl-secondary-80);
} 

.hero-statement h1 {
  font-size: 1.8rem;
  font-family: var(--ff-title);
  line-height: 1.1em;
  margin-bottom: 0.5em;
}

.hero-statement h1 span {
  color: var(--cl-secondary);
}

.hero-statement p {
  max-width: inherit;
  font-size: 1.1rem;
  line-height: 1.5em;
  margin-bottom: 1em;
  color: var(--cl-neutral-100);
}

.hero-statement p span{
  color: var(--cl-neutral-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}

.hero-cta {
  display: none;
}

@media(min-width:768px) {
  .hero {
    min-height: 80vh;
  }

  .hero .container {
    min-height: 80vh;
    padding: 1.5rem 2.5rem;

    justify-content: inherit;

    display: grid;
    grid-template-columns: inherit;
    grid-template-rows: 5rem 1fr 5rem;
  }
  
  .hero-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  
  .hero-nav-menu {
    display: block;
  }

  
  .hero-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    text-align: left;
  }
  
  .hero-statement {
    width: calc(100% / 1.5);
  } 
  
  .hero-statement h1 {
    font-size: 3rem;
  }
  
  .hero-statement p {
    max-width: 60ch;
    font-size: 1.3rem;
  }

  
  .hero-cta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  
  
  .hero-cta a {
    font-size: 1.25rem;
    color: var(--cl-neutral-100);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}

section:not(.hero) {
  /* margin: var(--mg-section) */
  margin-bottom: 4rem; /* ver */
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--bleeding);
  display: block;
  grid-template-columns: 40% 60%;
}

.section-header /*.sticky-container*/ {
  /* padding: var(--pd-section) 0 0 0; */
  padding: 3rem 0 0 0; /* ver */
  /* margin: 0; */
  margin: 0 0 3rem 0; /* ver */
  position: relative;
  background-image: url(img/logo-mobile.svg);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 60%; 
}

.section-header .sticky-content {
  display: flex;
  flex-direction: row;
  position: sticky;
  top: 0;
}

.section-header h2 {
  padding-right: 0;

  position: relative;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: top left;
  transition: color 0.2s cubic-bezier(0, 0, 1, 1); /* ver */

  font-family: var(--ff-title);
  font-size: 3rem;
  color: var(--cl-primary-90);
  line-height: 1em;
  text-transform: uppercase;
}


.section-header h2.active {
  color: var(--cl-secondary);
}

.section-header p {
  padding: 0 0 0 1.5rem;
  margin: 0 0 0 3rem;
  position: inherit;
  top: 0;

  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;

  font-size: 1rem;
  color: rgba(256, 256, 256, 0.7);

  line-height: 1.4em;
  margin-bottom: 1em;
}

.section-header span {
  color: rgba(256, 256, 256, 0.7);
  transition: color 0.2s cubic-bezier(0, 0, 1, 1);
}

.section-header span.active {
  color: var(--cl-neutral-100);
  font-weight: var(--fw-semi-bold);
}

@media(min-width:768px){

  .container{
    padding: 4rem 2rem 2rem 2rem;
    display: grid;
  }

  .section-header {
    padding: 0;
    margin: 0;
    background-size: 100%; 
    background-image: url(img/logo-desktop.svg);
  }

  .section-header .sticky-content {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: sticky;
    /* top: var(--pd-section); */
    top: 50px; /* ver */
    left: 0;
  }
  
  .section-header h2 {
   font-size: 5rem; 
   /* padding-right: 0; */ 
   padding-right: 50px; /* ver */
  }
  
  .section-header p {
    padding: 50px 2rem 0 1rem;
    margin: 0 0 0 6rem;
    position: absolute;
    top: 0;
    font-size: 1.25rem;
  } /* ver */
}

.section-content {
  padding: 0;
}

.section-content .items-container {
  /* padding: var(--pd-items-container-mob); */
  padding: 0 0.5rem; /* ver */
}

.section-content .items-container:not(:first-child) {
  padding-top: 3rem;
}

.section-content h3 {
  font-size: 2rem;
  letter-spacing: auto;
  color: rgba(256, 256, 256, 0.8);
  line-height: 1.2em; /* necesario para separar el underline del texto */ /* ver */
  margin: 0 0 3rem 0;
  transition: var(--transition); /* ver */
  position: relative;
}

.section-content h3:after {
  content: '';
  position: absolute;

  bottom: -0.75rem;
  left: 0;

  width: 100%;
  height: 3px;

  background-image: linear-gradient(45deg, var(--cl-secondary-60), transparent);
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: left bottom;
  transition: var(--transition); /* ver */
}

.section-content h3.active {
  color: var(--cl-secondary-60);
}

.section-content h3.active:after {
  background-size: 100% 3px;
}

.section-content ul.items-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  --gap: 2rem; /* ver */
  gap: var(--gap); /* ver */
  /* gap: var(--gap-items); */ /* nos falta esta variable ver */
}

.section-content ul li.item {

  width: 100%;
  padding: 0 1.5rem 1rem 1.5rem;

  background-image:
  linear-gradient(0deg, rgba(256, 256, 256, 0.8), transparent), 
  linear-gradient(45deg, rgba(256, 256, 256, 0.8), transparent);
  background-repeat: no-repeat;
  background-size: 2px 60%, 50% 2px;
  background-position: left bottom, left bottom;

  position: relative;
  transition: background-size 0.2s cubic-bezier(0, 0, 1, 1); /* ver */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.section-content ul li:hover {
  background-size: 2px 60%, 50% 2px;
}

.section-content ul li:after {
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
  background-color: var(--cl-primary-20);
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: center;
  border: 2px solid rgba(256, 256, 256, 0.8);
  border-radius: 50%;
  position: absolute;
  left: -8px;
  bottom: -8px;
  transform: scale(1) rotate(45deg);
  transition: transform 0.2s cubic-bezier(0, 0, 1, 1); /* ver */
}

.section-content ul li:hover:after {
  background-image: none;
  border:  2px solid rgba(256, 256, 256, 0.8);
  transform: none;
}

.section-content .preview {
  padding-bottom: 0.5rem;
}

.section-content .preview h4 {
  margin-bottom: 0.5em;
  font-size: 1.25rem;
  font-weight: var(--fw-semi-bold);
  color: var(--cl-neutral-100);
  /* letter-spacing: 0.08em; */
  letter-spacing: 0.05em; /* ver */
  text-transform: uppercase;
  line-height: 1.4em;
  transition: color 0.2s cubic-bezier(0, 0, 1, 1); /* ver */
}

.section-content li:hover .preview h4{
  cursor: pointer;
  /* color: var(--cl-secondary-60); */
  color: var(--cl-secondary-80); /* ver */
}

@media(hover: none){

  .section-content .preview p {
    padding-top: 1rem;
  }

  .section-content h4 {
    position: relative;
  }

  .who .section-content h4 {
    font-size: 1rem;
    display: inline-block;
  }

  .section-content h4:after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 100%;
    height: 3px;
    background-image: linear-gradient(45deg, var(--cl-secondary-80), transparent);
    background-repeat: no-repeat;
    background-size: 0% 3px;
    background-position: left bottom;
    transition: var(--transition); /* ver */
  }

  .section-content h4.active {
    color: var(--cl-secondary-80);
  }

  .section-content h4.active:after {
    background-size: 100% 3px;
  }
}

.section-content .preview p {
  font-size: var(--fs-m);
  color: var(--cl-neutral-80);
  line-height: 1.4rem;
}

.section-content .read-more {
  opacity: 1;
  display: block;
  margin-bottom: 0.5rem;

  font-size: var(--fs-xs);
  font-weight: var(--fw-semi-bold);

  /* color: var(--cl-secondary-80); */
  color: var(--cl-secondary-60); /* ver */
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: right;
  
  transition: opacity 0.2s cubic-bezier(0, 0, 1, 1); /* ver */
}

.section-content li:hover .read-more {
  opacity: 1;
}

@media(min-width:768px){

  .section-content{
    padding: 0;
  }

  .section-content .items-container {
    /* padding: var(--pd-items-container); */

    /* ver */
    padding: 35px 2rem 0 2rem; /*--------Better alignment with top 35px instead of 50px----------*/
  }

  .section-content h3 {
    /* margin: 0 0 3rem 0; ??? */ /* ver */
    font-size: 3rem;
  }

  .section-content ul.items-list {
    flex-direction: row;
  }

  .section-content ul li.item {
    width: calc(100% / 2 - calc(var(--gap) / 2 * 1));
    padding: 0 1.5rem 1rem 1.5rem;
  }

  .section-content ul li:hover {
    background-size: 2px 100%, 100% 2px;
  }

  .section-content ul li:hover:after {
    background-image: url(img/arrow.svg);
    border: 1px solid #ffffff;
    transform: scale(2) rotate(-45deg);
  }

  .section-content .read-more {
    cursor: pointer;
    text-align: left;
    opacity: 0;
  }  
}



















.what .section-header {
  margin: 0 0 6rem 0;
}

@media(min-width:768px){
  .what .section-header {
    margin: 0 0 3rem 0;
  }
}

.who .container {
  grid-template-columns: 60% 40%;
  grid-template-areas: "section-content section-header";
}

.who .section-header /*.sticky-container */ { 
  grid-area: section-header;
}

.who .sticky-content {
  grid-area: section-content;
}

.who ul.items-list {
  display: flex;
}

.who ul li.item {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-image: none;
}

.who ul li.item:after {
  display: none;
}

.who .featured-image {
  width: 100%;
  padding: 0 0 1rem 0;
  order: 1;
}

.who .featured-image img{
  max-width: 100%;
  height: auto;
}

.who .item-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  order: 2;
}

.who .preview {
  text-align: center;
}
.who .preview p:after {
  content: ""; 
  display: block; 
  margin: 0 auto; 
  width: 20%; 
  padding-top: 0.5rem;
  border-bottom: 1px solid #A8BFFF;
  border-bottom: 1px solid var(--cl-primary-90);
}

.who .contact-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 1rem 0 0.5rem 0;
}

.who .contact-links a{
  display: inline-block;
  content:'';
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center;
  transition: var(--transition);
}

.who .contact-links a.telephone{
  background-image: url(img/telephone.svg);
}
.who .contact-links a.email{
  background-image: url(img/mail.svg);
}
.who .contact-links a.telephone:hover{
  background-image: url(img/telephone-hover.svg);
}
.who .contact-links a.email:hover{
  background-image: url(img/mail-hover.svg);
}

.who .read-more {
  text-align: center;
}

@media(min-width:768px) {

  .who ul.items-list {
    flex-direction: row;
  }
  
  .who ul li.item {
    width: 100%;
    padding: 0 1.5rem 1rem 1.5rem;
    display: flex;
    flex-direction: row;
    background-image: linear-gradient(0deg, rgba(256, 256, 256, 0.8), transparent), linear-gradient(45deg, rgba(256, 256, 256, 0.8), transparent);
  }

  .who ul li.item:after {
    display: inline-block;
  }
  
  .who .featured-image {
    width: 50%;
    padding: 0;
    order: 2;
  }
  
  .who .featured-image img{
    max-width: 100%;
    height: auto;
  }
  
  .who .item-content {
    width: 50%;
    order: 1;
  }

  .who .preview {
    text-align: left;
    padding-right: 1.5rem;
  }

  .who .preview p:after { 
    display: none;
  }

  .who .contact-links {
    justify-content: left;
  }

  .who .read-more {
    text-align: left;
    padding-right: 1.5rem;
  }
}

.why .section-content ul.items-list {
  flex-direction: column;
  /* gap: var(--gap-items); */ /* ver */
  gap: 3rem;
  margin-bottom: 3rem;
}

.why .section-content ul li.item {
  width: 100%;
}


.why .item-content .preview span.info{
  color: var(--cl-primary-80);
}

.why .second ul.items-list{
  gap: 1.5rem;
}

.why .second ul li{
  background: none;
  padding: 0;
}

.why .second ul li:after{
  background: none;
  border: none;
}

.why .second .preview p:before {
  display: inline-block;
  content: '';
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border: 2px solid var(--cl-neutral-100);
  border-radius: 50%;
  transition: var(--transition);
}

.why .second .preview:hover  p:before {
  /* cursor: pointer; */
  border: 2px solid var(--cl-secondary-60);
}

@media(min-width:768px) {
  .why .section-content ul.items-list {
    margin-bottom: 0rem;
  }
}

footer {
  background-color: var(--cl-primary-20);
  border-top: 2px solid var(--cl-primary);
}

footer .container {
  padding: 0;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 
  "form"
  "logo"
  "statement"
  "social";
}

.fform {
  grid-area: form;
  padding: 3rem 2rem;
  text-align: center;
}

.fform > * {
  display: block;
}

.fform p {
  margin-bottom: .5rem;
  text-align: center;
  color: var(--cl-neutral-80);
  letter-spacing: 0.05em;
}

.input-wrapper {
  margin-bottom: .5rem;
  text-align: left;
}

.input-wrapper input{
  cursor: pointer;
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--cl-neutral-80);
  background-color: transparent;
  font-size: var(--fs-s);
  line-height: 2rem;
}

.input-wrapper:last-of-type{
  margin-bottom: 1.5rem;
}

.input-wrapper input:focus,
.input-wrapper input:valid {
  outline: none;
  background-color: var(--cl-neutral-80);
}

footer form .button {
  background-color: transparent;
  padding: .5rem 2rem;
  border: 2px solid var(--cl-secondary-60);
  border-radius: 6px;
  
  font-size: 1rem;
  color: var(--cl-secondary-60);
  text-transform: uppercase;
  letter-spacing: 1px;

  transition: var(--transition);
}

footer form .button:focus,
footer form .button:valid {
  outline: none;
}

footer form .button:hover {
  background-color: var(--cl-primary-90);
  border: 2px solid var(--cl-primary-90);
  color: var(--cl-primary-40);
  font-weight: bold;
}

.flogo { 
  background-color: var(--cl-primary-10);
  grid-area: logo;
  align-self: center;
  padding: 1.5rem 0;
  text-align: center;
}

.flogo svg {
  max-width: 100px;
  margin-bottom: 1rem;
}

.flogo svg path {
  fill: var(--cl-neutral-100); 
}

.flogo a{
  font-size: 2rem;
  color: var(--cl-neutral-100);
  letter-spacing: 1px;
  text-decoration: none;
}


.flogo .logo-statement {
  font-size: 1.3rem;
  font-weight: var(--fw-semi-bold);
  color: var(--cl-neutral-100);
  padding: 0 1.5rem
}

footer .container .fstatement {
  padding: 2rem 0 0 0;
}

.fstatement {
  background-color: transparent;
  grid-area: statement;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  color: var(--cl-primary-80);
}

.fstatement p {
  color: var(--cl-primary-80);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fsocial { 
  background-color: var(--cl-primary-20);
  grid-area: social;
  display: block;
  padding:  0 1rem 2rem 1rem;
}

.fsocial ul {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 1.5rem;

  height: 100%;
}

.fsocial li {
  padding: 1rem 0 0.75rem 0;
}

.fsocial li a {
  display: block;
}

.item-icon{
  background-color: transparent;
  width: 30px;
  height: 30px;
}

.fsocial a{
  display: inline-block;
  content:'';
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center;
  transition: var(--transition);
}

.fsocial a.facebook{
  background-image: url(img/icon-facebook.svg);
}
.fsocial a.facebook:hover{
  background-image: url(img/icon-facebook-hover.svg);
}

.fsocial a.twitter{
  background-image: url(img/icon-x.svg);
}
.fsocial a.twitter:hover{
  background-image: url(img/icon-x-hover.svg);
}

.fsocial a.linkedin{
  background-image: url(img/icon-linkedin.svg);
}
.fsocial a.linkedin:hover{
  background-image: url(img/icon-linkedin.svg);
}

/* .fsocial a.instagram{
  background-image: url(img/icon-instagram.svg);
}
.fsocial a.instagram:hover{
  background-image: url(img/icon-instagram-hover.svg);
} */

footer .copyright {
 padding: 3rem 1rem;
}

.copyright { 
  background-color: var(--cl-primary-10);
  grid-area: copyright;
  text-align: center;
}

.copyright-title {
  color: var(--cl-secondary-80);
}

.copyright p {
  color: var(--cl-primary-80);
  letter-spacing: .5px;
}

@media(min-width:768px){

  footer .container {
    max-width: var(--max-width);
    padding: var(--bleeding);
    padding-top: 0;
    padding-bottom: 0;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 
      "form statement logo"
      "form social logo";
  }

  .fform {
    padding-right: 1.5rem ;
    text-align: left;
  }

  .fform p{
    text-align: left;
  }

  .fsocial {
    background-color: var(--cl-primary-10);
  }

  .fstatement {
    background-color: var(--cl-primary-10);
    grid-area: statement;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  
    color: var(--cl-neutral-100);
  }

  .flogo {
    background-color: transparent;
    padding-left: 1.5rem;
  }

  .flogo svg,
  .flogo svg path,
  .flogo svg polygon {
    fill:var(--cl-neutral-100);
  }

  .flogo a{
    display: block;
    font-size: 1.5rem;
    color: var(--cl-neutral-20);
    font-weight: var(--fw-bold);
  }

  .flogo .logo-statement {
    font-weight: var(--fw-semi-bold);
    color: var(--cl-neutral-100);
  }

}

.top-link {
  background-color: var(--cl-primary);
  width: 3rem;
  height: 3rem;

  position: fixed;
  right: 1rem;
  bottom: 1rem;

  border: 2px solid var(--cl-secondary-80);
  border-radius: 50%;

  opacity: 0;
  transition: var(--transition);
}

.top-link:after {
  display: inline-block;
  content: '';
  width: 44px;
  height: 44px;
  
  background-image: url(img/arrow-top.svg);
  background-position: center;
  background-size: 30px 30px;
  background-repeat: no-repeat;
}

.top-link:focus{
 outline: none;
}

.show {
  opacity: 1;
}

@media(max-width:768px){
  .top-link {
    display: none;
  }
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(5, 17, 84, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s 0s, visibility 0s 0.2s; /* VER */
  overflow-y:auto;
}

.modal.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0s, visibility 0s 0s; /* VER */
}

.modal-container {
  position: relative;
  width: 82%;
  max-width: 600px;
  margin: 130px auto;
  padding: 3rem 1.5rem 2rem 1.5rem;
  background: var(--cl-neutral-100);
  outline: 2px solid #4A72E2;
  outline-offset: 0;
  text-align: left;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* VER */
  transform: translateY(-20px);
  backface-visibility: hidden;
  transition-property: transform;
  transition-duration: 0.1s;
}

.is-visible .modal-container {
  transform: translateY(0);
}

.modal-container:after {
  display: inline-block;
  width: 40px;
  height: 40px;
  content: "";
  background-color: var(--cl-primary-20);
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: center;
  border: 2px solid var(--cl-primary-80);
  border-radius: 50%;
  position: absolute;
  top: -20px;
  right: -20px;
  transform: scale(1) rotate(45deg);
  transition: transform 0.2s cubic-bezier(0, 0, 1, 1); /* ver */
}

.modal-container .modal-close {
  position: absolute;
  top: -13px;
  right: -17px;
  width: 30px;
  height: 30px;
  z-index: 99;
}

.modal-container .modal-close::before, 
.modal-container .modal-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 25px;
  height: 3px;
  background-color: var(--cl-primary-80);
}
.modal-container .modal-close::before {
  transform: rotate(45deg);
  left: 0px;
}

.modal-container .modal-close::after {
  transform: rotate(-45deg);
  right: 10;
}

@media only screen and (min-width: 768px) {
  .modal-container {
    margin: 8em auto;
  }
}

@media(min-width:768px){
  .modal-container {
    padding: 5rem 4rem 3rem 4rem;
    outline-offset: 1rem;
  }


  .modal-container:after {
    width: 40px;
    height: 40px;
    background-size: 12px 12px;
    top: -36px;
    right: -36px;
  }


  .modal-container .modal-close {
    top: -30px;
    right: -34px;
    width: 30px;
    height: 30px;
  }  
}

.modal-content p {
  padding: 0 0 1rem 0;
  color: var(--cl-neutral-10);
  font-weight: var(--fw-semi-bold);
  line-height: 1.4rem;
}

.modal-content p:nth-last-child(-n + 2){
  margin-bottom: 2rem;
}

.modal-content p a {
  color: var(--cl-secondary);
}

.modal-button {
  text-align: center;
}

.modal-button button {
  cursor: pointer;
  background-color: var(--cl-neutral-100);
  border: 2px solid var(--cl-secondary);
  border-radius: 4px;
  min-width: 100px;
  padding: 1rem 1.5rem;
  transition: var(--transition);
  font-size: 1.1rem;
  color: var(--cl-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.modal-button button:hover {
  background-color:var(--cl-secondary);
  color: var(--cl-neutral-100);
}