: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;
}

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

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


/* 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 */
}

.legal-section {
  padding-top: var(--md);
  /* padding-bottom: var(--md); */
  /* background-image: url('../images/others/hero-bg.svg'); /* si quieres conservarlo */
  /* background-repeat: no-repeat; */
  background-size: 100% 100%; 
  background-color: #ecfbf7;
  align-items: center;
  padding-bottom: var(--md);
  flex: 1;
}

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

.full-vh{
height: 100vh;
}

.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;
}

.half-equal{
width: 50%;
}


.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;
}

/* 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;
}



.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;
}

.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;
}

.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;
  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;;
}

}