/* Estilos generales */
:root {
  /* Colores */
  --color-morado: #1a052d; /* Morado oscuro */
  --color-verde: #6cf3ce; /* Verde */
  --color-fucsia: #ff4361; /* Fucsia*/
  --color-gris-claro: #f5f5f5; /* Gris claro */

  /* Tipografías */
  --fuente-montserrat: "Montserrat", sans-serif;
  --fuente-krona: "Krona One", sans-serif;
}

* {
  box-sizing: border-box;
  text-decoration: none;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-size: 1.6rem; /* 1.6rem = 16px */
  margin: 0;
  padding: 0;
  background-color: var(--color-morado);
}



/* Oculta el header y el menú desplegable en dispositivos grandes */
.header-movil {
  display: none;
}

.menu-desplegable-movil {
  display: none;
}

/* Mostrar solo en pantallas de 768px o menos (móviles) */
@media (max-width: 768px) {

  /* Estilos del header en móviles */
  .header-movil {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rem;
      background: rgba(26, 5, 45, 0.9); /* Fondo semi-transparente */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      position: fixed;
      top: -2px;
      left: 0;
      width: 100%;
      z-index: 900;
      transform: translateY(0); /* Por defecto, visible */
      transition: transform 0.8s ease-in-out; /* Transición suave */

  }

  /* Logotipo dentro del header móvil */
  .logo-movil img {
      width: 60px;
      height: auto;
  }

  /* Icono del menú hamburguesa en móviles */
  .menu-icon-movil i {
      font-size: 35px;
      color: var(--color-verde); /* Color del ícono */
      cursor: pointer; /* Cursor tipo pointer para indicar que es clickeable */
  }

  /* Menú desplegable para móvil */
  .menu-desplegable-movil {
      position: fixed;
      top: 0;
      right: -100%; /* Inicialmente fuera de la pantalla */
      height: 100%;
      width: 250px;
      background-color: var(--color-morado); /* Color de fondo oscuro */
      color: white; /* Color del texto en blanco */
      display: flex;
      flex-direction: column; /* Organiza el menú en columna */
      justify-content: center; /* Centra verticalmente los elementos */
      align-items: center; /* Centra horizontalmente los elementos */
      transition: right 0.3s ease-in-out; /* Transición suave cuando el menú aparece */
      z-index: 1000; /* Asegura que el menú esté sobre otros elementos */
  }

  .menu-desplegable-movil ul {
      list-style: none; /* Elimina los estilos de lista por defecto */
      padding: 0; /* Elimina los rellenos internos de la lista */
  }

  .menu-desplegable-movil ul li {
      margin: 25px 0; /* Espaciado vertical entre ítems del menú */
  }

  .menu-desplegable-movil ul li a {
      color: var(--color-gris-claro);
      font-family: var(--fuente-montserrat);
      font-weight: 500;
      font-size: 1.8rem;
      text-decoration: none; /* Elimina el subrayado de los enlaces */
      display: flex; /* Flexbox para alinear íconos y texto */
      align-items: center; /* Alinea verticalmente el contenido */
  }

  .menu-desplegable-movil ul li a:hover {
    color: var(--color-fucsia);
}


  .menu-desplegable-movil ul li a i {
      margin-right: 1.4rem; /* Espaciado entre ícono y texto */
  }

  /* Estado cuando el menú está activo (visible) */
  .menu-desplegable-movil.active {
      right: 0; /* Mueve el menú a la pantalla */
  }

  /* Ícono de cerrar el menú en móviles */
  .close-icon-movil {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 35px;
      cursor: pointer;
      color: var(--color-verde); /* Color del icono de cerrar */
  }

  /* Capa de fondo oscuro semi-transparente cuando el menú está activo */
  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      z-index: 950; /* Detrás del menú pero sobre el contenido */
      display: none; /* Oculto por defecto */
  }

  /* Mostrar la capa de fondo cuando el menú está activo */
  .menu-desplegable-movil.active ~ .overlay {
      display: block;
  }

}


/* Inicio del header y menú */
.header {
  display: flex;
  align-items: center;
  padding: 1.5rem 6rem;
  color: var(--color-gris-claro);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
  
}

/* Cambios cuando se hace scroll */
.header.scrolled {
background: rgba(26, 5, 45, 0.9); /* Fondo semi-transparente */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1rem 6rem;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
}

/* Ocultar logotipo y mostrar ícono */
.logo-escritorio{
  width: 7rem;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}


.icono-escritorio{
width: 4rem;
height: auto;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
position: relative; /* Para permitir ajustes con left */
left: -60px; /* Ajusta según necesites */
}

/* Cuando el header está scrolleado */
.header.scrolled .logo-escritorio {
opacity: 0; /* Solo desaparece */
}

.header.scrolled .icono-escritorio {
opacity: 1; /* Aparece en el lugar del logotipo */
}



.nav-contenedor {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0.7rem;
  border-radius: 2rem;
  position: relative;
  /* Fondo con efecto de vidrio */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-contenedor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2rem;
  padding: 2px; /* Ancho del borde degradado */
  background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.nav-contenedor > * {
  position: relative;
  z-index: 1;
}

.nav-menu ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  position: relative;
  padding: 0.5rem 1rem;
  color: var(--color-gris-claro);
  font-family: var(--fuente-montserrat);
  font-weight: 500;
  font-size: 1.6rem;
}

.nav-menu a:hover {
  color: var(--color-morado);
  font-weight: 500;
}

.nav-menu a:hover::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 2rem;
  background: linear-gradient(45deg, #ff4361, #ff4361, #6cf3ce, #6cf3ce);
  z-index: -1;
}

.btn-contacto {
  padding: 0.6rem 1.3rem;
  background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361);
  color: var(--color-morado);
  border-radius: 2rem;
  font-family: var(--fuente-montserrat);
  font-size: 1.6rem;
  font-weight: 500;
  transition: background 0.2s ease-in-out;
}

.btn-contacto:hover {
  background: linear-gradient(45deg, #ff4361, #ff4361, #6cf3ce, #6cf3ce);
}


/* Oculta el fondo del botón "Contáctanos" cuando la clase está activa */
.nav-contenedor.hide-contact-bg .btn-contacto {
  background: transparent;
  color: var(--color-gris-claro);
}


/* Responsive monitor 27pulg menu header */
@media screen and (min-width: 1920px) {
  .header {
    padding: 3rem 14rem;
  }
  
}

/* Fin del header y menú escritorio */


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

}

/* Contenedor de tarjetas oculto inicialmente */
.contenedor-tarjetas {
  position: fixed; /* Cambia de absolute a fixed */
  top: calc(100% + 10px); /* Aparece justo debajo del header */
  left: 6rem;
  right: 6rem;
  width: calc(100% - 12rem);
  padding: 40px;
  border-radius: 2rem;
  z-index: 900; /* Asegúrate de que esté debajo del menú sticky */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  opacity: 0;
  transform: translateY(-20px);
  visibility: hidden; /* Inicialmente oculto */
  pointer-events: none; /* Desactiva la interacción */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contenedor-tarjetas::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2rem;
padding: 2px; /* Ancho del borde degradado */
background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
z-index: -1;
}

.contenedor-tarjetas.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* Tarjeta */
.tarjeta {
padding: 25px;
position: relative;
border-radius: 2rem 10rem 2rem 2rem;
overflow: hidden;

/* Fondo con efecto de vidrio */
background: rgba(255, 255, 255, 0);

/* Asegura que todas las tarjetas tengan la misma altura */
display: flex;
flex-direction: column; /* Alinea elementos verticalmente */
justify-content: flex-start; /* Alinea los elementos al inicio */
}

.tarjeta::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2rem 10rem 2rem 2rem;
padding: 2px; /* Ancho del borde degradado */
background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
z-index: -1;
}

/* Efecto al pasar el cursor por una tarjeta */
.tarjeta:hover {
  background: #1a052d;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
  }
  
  

/* Título con altura fija */
.titulo-tarjeta {
font-family: var(--fuente-krona);
font-weight: 500;
font-size: 2rem;
color: var(--color-gris-claro); /* Negro */
min-height: 5rem; /* Altura mínima para títulos */
display: flex;
align-items: center; /* Centra verticalmente */
margin: 0; /* Evita márgenes extra */
}

/* Línea divisoria */
.linea-tarjeta {
margin-top: 0.5rem;
margin-bottom: 1rem;
border: none;
height: 1.5px; /* Grosor de la línea */
width: 100%;
background: linear-gradient(to right, #6cf3ce, #6cf3ce, #ff4361, #ff4361); /* Degradado */
opacity: 1; /* Mantén el degradado visible */
}

/* Descripción */
.descripcion-tarjeta {
font-family: var(--fuente-montserrat);
font-weight: 400;
font-size: 1.4rem;
color: var(--color-gris-claro);
line-height: 1.4;
}

/* TASK SERVICIOS */

.servicios-task-menu {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 1rem;
}

.btn-tarjetas-menu {
display: flex; /* Activa Flexbox */
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
padding: 6px 12px;
font-family: var(--fuente-montserrat);
font-size: 1.1rem;
font-weight: 400;
border-radius: 2rem;
text-decoration: none;
text-align: center;

/* Fondo con efecto de vidrio */
background: rgba(255, 0, 0, 0);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--color-gris-claro);
position: relative; /* Necesario para usar ::before */
}

.btn-tarjetas-menu::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2rem;
padding: 1.3px; /* Ancho del borde degradado */
background: linear-gradient(
  to right,
  #6cf3ce,
  #6cf3ce,
  #6cf3ce,
  #ff4361,
  #ff4361,
  #ff4361
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
z-index: -1;
}

.btn-tarjetas-menu > * {
position: relative;
z-index: 1;
}






/* Responsive monitor 27pulg menu header */
@media screen and (min-width: 1920px) {
.contenedor-tarjetas {
  position: fixed; /* Cambia de absolute a fixed */
  top: calc(100% + 10px); /* Aparece justo debajo del header */
  left: 14rem;
  right: 14rem;
  width: calc(100% - 28rem);
  padding: 50px;
  border-radius: 2rem;
  z-index: 900; /* Asegúrate de que esté debajo del menú sticky */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 50px;
  opacity: 0;
  transform: translateY(-20px);
  visibility: hidden; /* Inicialmente oculto */
  pointer-events: none; /* Desactiva la interacción */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


}