:root {
--xxs: 0.4em;
--xs: 1em;
--sm: 2em;
--md: 4em;
--lg: 8em;
--xl: 16em;
--xxl: 32em;
/* Colors */
--blue--dark: #1d174c;
--blue--light: #dad6f0;
--blue--mid: #686487;
--green-dark: #376b5e;
--green-light: #ecfbf7;
--green-mid: #7cf1d4;
--white: #ffffff;
/* Font */
--main-font:"Comfortaa";
--h1:3em;
--h2:2.5em;
--h3:1.5em;
--h4:3.5em;
--p:1em;
--p2:1.2em;
--p3:1.2em;
}

* {
    border-radius: var(--xs);
box-sizing: border-box;
}

/* Body */

a {
  text-decoration: none;
}

html{
    overflow-x: hidden;
    scroll-behavior: smooth;
    
}

.body{
font-family: var(--main-font);
font-size: 1vw;
line-height: 1.5;
margin: 0px;
margin: 0px;
font-size: 16px;
box-sizing: border-box;
overflow-x: hidden;

}

/* Font classes */

h1{
font-size: var(--h1);
font-weight: 400;
margin: 0px;
line-height: 1.2em;
}

h2{
font-size: var(--h2);
font-weight: 300;
margin: 0px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.1rem; /* Espacio entre el icono y el texto */
}

h3{
font-size: var(--h3);
font-weight: 300;
margin: 0px;
}

h4 {
  padding-left: 100px;
  font-size: var(--h4);
  font-weight: 500;
  margin: 10px 0px;
  white-space: nowrap;
}

p{
font-size: var(--p);
font-weight: 300;
margin: 5px 5px 5px 0px ;
max-width: 550px;
}

.p2 {
  font-size: var(--p2);
  font-weight: 500;
  margin: 0px 0px 0px 0px;
  max-width: 750px;
  padding-right: 0px;
}


.p3 {
  font-size: var(--p3);
  font-weight: 500;
  margin: 0px 0px 0px 0px;
  max-width: 750px;
  padding-right: 0px;
}

.text-image-container {
  display: flex;
  align-items: center; /* Centra verticalmente */
  gap: 2rem; /* Espacio entre texto e imagen */
}

.text-content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente el contenido dentro */
}

.imagelogo {
  width: 200px; /* Ajusta según necesidad */
  height: auto;
}

.h1.centered {
text-align: center;
max-width: 1000px;
}

.p.centered {
font-size: var(--p);
text-align: center;
max-width: 900px;
}


/* Modules */   

section{ margin-top: var(--lg);
}

.contenido {
  max-width: 1500px;
  margin: 0 auto;
  padding-left: 20px; /* espacio interno izquierdo */
  padding-right: 20px; /* espacio interno derecho */
}

.hero {
background-position: top center;
background-image: url('../images/others/hero-bg.svg');
background-repeat: no-repeat;
background-size: cover;
justify-content: center;
align-items: flex-end;
height: 90vh;
padding:var(--xs);
display: flex;
position: relative;
margin-top: 0px;
overflow: visible;
margin-bottom: -100px;
}

.aboutus-explain {
background-position: top center;
background-image: url('../images/others/hero-bg.svg');
overflow: visible;
margin-bottom: 50px;

}

.img-hero{
width: 100%;
max-width: 450px;
}

.master-container {
padding-right: var(--md);
padding-left: var(--md);
}

/* Components */
.nav-bar {
z-index: 10;
border-radius: 0px, var(--xs), var(--xs), 0px;
padding: var(--xs) var(--sm);
background-color: #ffffffe6;
border-bottom-right-radius: var(--sm);
border-bottom-left-radius: var(--sm);
justify-content: space-between;
align-items: center;
width: 100%;
display: flex;
position: fixed;
}

.button-primary {
padding: var(--xxs) var(--sm);
grid-column-gap: 8px;
background-image: linear-gradient(90deg, #57bfd7, #7fefd1);
border: 4px solid #fff;
border-radius: var(--xl);
flex: 0 auto;
justify-content: center;
align-items: center;
width: auto;
height: auto;
max-width: 180px;
display: flex;
box-shadow: 0 4px 4px #00000040;
font-size: var(--p);
color: var(--blue--dark);
font-family: var(--main-font);
transition: all 0.3s ease-in-out;
}

.button-primary:hover{
filter: brightness(1.5); 
}

.button-nav {
/*padding: var(--xs) var(--sm);*/
padding: 5px;
border-radius: var(--xl);
justify-content: space-between;
align-items: center;
width: auto;
height: auto;
min-height: 1px;
max-height: 10px;
display: flex;
text-decoration: none;
color: var(--blue--dark);
margin-right: 15px;
}

.text {
color: #212121;
margin-top: 0;
margin-bottom: 0;
font-family: Comfortaa, sans-serif;
font-size: 1em;
font-weight: 500;
line-height: 100%;
text-decoration: none;
}

.image {
object-fit: contain;
width: 16px;
}

.logo{
height: auto;
min-height: 32px;
max-height: 36px;
border-radius: 0px;
}

.section-icon {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

.logo.bg{
min-height: 32px;
max-height: 56px;
}

.card {
flex-flow: column;
flex-grow: 1;
height: 50vh;
display: flex;
overflow: clip;
box-shadow: 0 2px 5px #00000021;
min-height: 320px;
}

.card.third{
width: 33%;
}

.card-image{
background-image: url('../images/imgs/card-flex-1.jpg');
background-position: 50%;
background-size: cover;
flex: 1;
justify-content: center;
align-items: flex-end;
height: auto;
display: flex;
}

.card-image.f-first{
background-image: url('../images/imgs/card-flex-1.jpg');
}

.card-image.f-second{
background-image: url('../images/imgs/card-flex-2.jpg');
}

.card-image.f-third{
background-image: url('../images/imgs/card-flex-3.jpg');
}

.card-image.g-first{
background-image: url('../images/imgs/card-grid-1.jpg');
}

.card-image.g-second{
background-image: url('../images/imgs/card-grid-2.jpg');
}

.card-image.g-third{
background-image: url('../images/imgs/card-grid-3.jpg');
}

.card-image.g-fourth{
background-image: url('../images/imgs/card-grid-4.jpg');
}

.textblock-card {
background-color: #fff0;
background-image: linear-gradient(#0000, #ffffff8c 19%, #ffffffc9 31%, #fff 52%);
flex-flow: column;
flex: 1;
justify-content: center;
align-items: flex-start;
height: auto;
padding: var(--lg) var(--sm) var(--sm) var(--sm); 
display: flex;
}

.line{
height:2px;
background-image: linear-gradient(90deg, #57bfd7, #7fefd1);
max-width: var(--md);
width: 100%;
}

.line.fill{
max-width:none;
}

/* Flexs */
.flex-cards {
justify-content: center;
align-items: center;
display: flex;
flex-direction: row;
gap: var(--xs);
}

.flex-layout{
display: flex;
flex-direction: row;
align-items: center;
}

.flex{
display: flex;
}

.flex.wrap{
flex-wrap: wrap;
}

.flex.column{
flex-direction: column;
}

.flex.center{
justify-content: center;
align-items: center;
}

.flex.left{
justify-content: left;
align-items: left;
}

.flex.gap-xs{
gap: var(--xs);
}

.flex.gap-sm{
gap: var(--sm);
}

.flex.gap-md{
gap: var(--md);
}

.flex.gap-lg{
gap: var(--lg);
}

.flex.padding{
padding: var(--sm);
}

.flex.grow{
flex-grow: 1;
}

.flex.wrap{
  flex-wrap: wrap;
}


.block-title{
grid-column-gap: var(--sm);
justify-content: left;
align-items: center;
width: 100%;
display: flex;
margin-bottom: var(--xs)
}

/* Grid */

.grid-item{
padding: var(--md);
display: flex;
justify-content: center;
align-items: center;
}

.grid-item.nopad{
padding: var(--xxs);
}

.grid-container{
display: grid;
grid-template-rows: auto auto; 
grid-template-columns: 1fr 1fr; 
grid-auto-columns: 1fr;
}

.grid-item_img{
background-image: url('../images/imgs/img-layout.jpg');
background-position: 50%;
background-size: cover;
min-height: 260px;
}

.grid-item_flex{
min-height: 260px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--xs);
gap: var(--xxs);
}

/* Horizontal-scroll */

.scroll-container{
width: 100%;
overflow-x: auto;
position: relative;
}

.scroll-container::-webkit-scrollbar{
width: 0;
}

.inner{
display: flex;
gap: var(--sm);
width: auto;
padding: var(--xxs);

}

.item-scroll{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-image: linear-gradient( var(--green-light) 48%, var(--green-mid) );
min-width: 240px;
padding: var(--md);
}

.tool-icon{
width: var(--md);
max-height:var(--sm)
}

.tool{
display: flex; 
justify-content: center;
align-items: center;
background-color: var(--green-light);
width: 100%;
height: 100%;
padding: var(--xs) var(--sm);
}

.tool-icon{
width: var(--lg);
}

/* Animation */

.floating {
    animation: float 4s ease-in-out infinite;
}

.scroll-auto{
    animation: scroll 15s linear infinite;;
}

/* Form */

.field{ 
border-radius: 8px;    
border: 1px var(--green-dark);
box-shadow: 0 1px 1px var(--blue--mid);
padding: var(--xs);
min-height: 40px;
}

.message-field{
min-height: 200px;
border-radius: 8px;    
border: 2px var(--green-dark);
box-shadow: 0 1px 1px var(--blue--mid);
padding: var(--xs);
resize: both;
overflow: auto;
}

.block-form textarea {
  margin-top: 5px; 
  padding: var(--xs);
  font-size: 0.9rem;
  border: 2px var(--green-dark);
  box-shadow: 0 1px 1px var(--blue--mid);
  border-radius: 10px;
  width: 100%;
  max-width: 1333px;
  min-width: 1333px;
  max-height: 300px;
  box-sizing: border-box;
}

.block-form small {
  color: #666;
  font-size: 0.9rem;
  /* margin-top: -10px; */
}

.field:focus{
border: var(--blue--dark);
}

.block-form {
padding: var(--md);
background-color: var(--green-light);
}

.split{
flex-grow: 1;
min-width: 200px;
min-width: 200px;}


select {
  font-family: inherit;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fdfdfd;
  color: #333;
}

.flag-icon {
  width: 21px;
  height: auto;
}


/* Scroll */


  .logos-blockchain {
    overflow: hidden;
    padding: var(--sm) 0;
    background: white;
    white-space: nowrap;
    position: relative;
    background-color: var(--green-light);
  }
  
  .logos:before,
  .logos:after {
    position: absolute;
    top: 0;
    width: 500px;
    height: 100%;
    content: "";
    z-index: 2;
  }
  
  .logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  }
  
  .logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  }
  
  .logos:hover .logos-slide {
    animation-play-state: paused;
  }
  
  .logos-slide {
    display: inline-block;
    animation: 35s slide infinite linear;
  }
  
  .logos-slide img {
    height: 80px;
    margin: 0 40px;
  }


/* Hovers */

.button-primary:hover {
  filter: brightness(120%);
  transition: 0.5s;
}

.button-nav:hover {
  color: var(--green-mid);
  transition: 0.5s;
}

.card-tool:hover{
  background-color: var(--green-mid);
  transition: 0.5s;
}

.card-image:hover{
  filter: brightness(120%);
  transition: 0.5s;
}

/* Others */

.display{
  display: block;
}

.text-grey{
  color: var(--blue--mid);
}

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

.half-equal{
width: 50%;
}

.text-virtops{
color: var(--blue-dark);
font-family: Comfortaa;
font-size: 2.1em;
font-weight: 500;
}
  
.text-virtops:hover{
  color: var(--green-mid);
  font-family: Comfortaa;
  font-size: 2.1em;
  font-weight: 500;
  transition: 0.5s;
}

.form-bold{
font-weight: bold
}

.form-link {
  color: var(--green-dark);
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
}

.form-link:hover {
  text-decoration: none; /* evita subrayado */
  color: var(--green-mid);
  transition: 0.5s;
}

.margin-top-safe{
height: none;
}

.white-gradient {
padding: var(--sm) var(--md) var(--md);
background-image: linear-gradient(180deg, #fff0, #ffffffab 18%, var(--white) 40%);
flex-flow: column;
justify-content: flex-end;
align-items: center;
width: 100%;
display: flex;
height: auto;
margin-bottom: -1px
}

.h3{
font-size: var(--font--h3);
margin-top: 0;
margin-bottom: 0;
}

.card-tool{
background-color: var(--green-light);
padding: var(--sm);
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
min-width: 200px;
}

.scroll{
padding-left: var(--md);
}

.plisadoraabout{
  width: 100%;
  max-width: 380px; 
  min-width: 250px;
  /* left: -70px; */
  position: relative;
  z-index: 0;
  opacity: 0.8;
}

.flex.aladerecha{
  right: -250px;
  position: relative;
  z-index: 1;
}

.rrss-button{
width: 40px;
height: 40px;
}

.full-vh{
height: 100vh;
}

.ornat-stripe{
margin-top: var(--md);
border-radius: 0px;
height: var(--md);
width: 100%;
background-image: url('../images/imgs/hero.jpg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
justify-content: center;
}

/* .footer{
padding: var(--sm) var(--sm);
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
} */

.footer {
  padding: var(--sm) var(--sm);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /*align-items: flex-end;  Para fleft-side y fright-side */
  align-items: center;
  position: relative;
  padding-top: 30px;
  padding-bottom: 10px;
}

/* Lados */

.fright-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem; /* o lo que necesites */
}


.fleft-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* fcenter-side ahora ocupa todo el ancho y se baja */
.fcenter-side {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: -25px; */ /* Pequeño espacio desde los otros elementos */
}

.logo-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fcenter-side img {
  height: 50px;
}

.fcenter-side .fcopyright {
  font-size: 0.7rem;
  color: var(--blue-dark);
  margin-top: -4px;
  text-align: center;
}

/* Redes sociales */
.fsocial-icons {
  display: flex;
  gap: 0.4rem;
}

/* Tamaño de iconos RRSS */
.frrss-button {
  width: 34px;
  height: auto;
}

/* Links legales */

.flegal-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem; /* Espaciado entre enlaces */
  margin-bottom: 0.5rem;
}

.flegal-links a {
  color: var(--blue-dark);
  text-decoration: none;
  font-size: 0.9rem;
  cursor: pointer;
}

.flegal-links a:hover {
  text-decoration: none; /* evita subrayado */
  color: var(--green-mid);
  transition: 0.5s;
}



/* Media queries */


@media screen and (max-width: 800px){

  .display{
    display: none;
  }

  .logo{
    max-height: 28px;
  }

  .img-hero{
    width: 115%;
    max-width: none;

  }

.margin-top-safe{
    height: 220px;
    background-color: var(--green-light);
    }

.master-container {
padding-right: var(--xs);
padding-left: var(--xs);
}

.scroll{
padding-left: var(--xs);
}

.flex-layout {
flex-direction: column;
align-items: center;
}



.scroll-auto{
  animation: scroll 8s linear infinite;;
}

.half-equal{
width: 100%;
height: 50vh;
}
}




@media screen and (max-width: 650px) {
  
.body {
font-size: 3vw;
line-height: 1.3;
}

.logo{
  max-height: 24px;
}

.img-hero{
  width: 140%;
  max-width: none;

}

.flex.padding{
    justify-content: center;
padding: 0px;
}

.block-title{
margin-bottom: var(--sm);
}

.master-container {
padding-right: var(--xs);
padding-left: var(--xs);
}

p{
font-size: 1.1em;
}

.textblock-card {
min-height: 0px;
}

.flex-layout{
gap: var(--md);
}

.card{
height: 400px;
}

.card.third{ width: 100%;
}

.plisadora{
max-width: var(--xl)
}

.flex-cards {
flex-direction: column;
}
.grid-container{
grid-template-rows: auto; 
grid-template-columns: 1fr; 
}

}

@media screen and (max-width: 430px) {
.body{
  font-size: 14px;
}

.message-field{
  min-height: 200px;
}

.block-form{
  padding: var(--xs);
}

.button-primary{
  max-width: none;
}

.logo{
  min-height: 20px;
}

.scroll-auto{
  animation: scroll 1s linear infinite;;
}

}