/* 
    © 2025 Lucero Emmanuel ING
    Este proyecto es una muestra de portafolio personal.
    No está autorizado su uso comercial ni la redistribución sin permiso.
*/

/* Estilos generales para el body y html */
/* body,
html {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
} */

.main-container {
  position: relative; /* Esto asegura que el contenedor principal esté por encima de otros elementos */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3; /* Z-index asegurará que este contenedor esté por encima del fondo */
  text-align: center;
}

.titulo {
  font-family: "Roboto", "Berlin Sans", sans-serif;
  font-size: 3.5vw;
  text-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.7);
  text-align: center;
  white-space: nowrap;
  color: white;
  margin: 0;
  margin-top: 6.5vh;
  padding: 0;
  width: 100%;
  position: relative; /* Esto coloca el título en su propia capa */
  z-index: 4; /*título por encima de los otros elementos */
  cursor: default;
}

.cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Contenedor para el resto de los elementos */
.text-box,
.contenedor {
  position: relative;
  z-index: 2; /* Asegura que estos estén debajo del título, pero por encima del fondo */
}

.text-box {
  width: 80%;
  min-height: 25vh; /* Se mantiene el alto base */
  height: auto; /* Ahora crece si la letra crece */
  margin: 7vh 0 9vh 0;
  font-size: clamp(1rem, 1.65vw, 3rem);
  text-align: justify;
  font-family: Arial, sans-serif;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  border: none;
  border-radius: 0.75vw;
  padding: 2vw;
  resize: none;
  box-sizing: border-box;
  transition:
    border 0.5s ease-in-out,
    transform 1.5s ease-in-out,
    filter 0.6s ease,
    box-shadow 0.3s ease-in-out;
  overflow: hidden;
}

/* Efecto al pasar el ratón sobre el rectángulo */
.text-box:hover {
  background-color: rgba(
    0,
    0,
    0,
    0.6
  ); /* Cambia el color de fondo al pasar el ratón */
  transform: scale(1.025); /* Ejemplo de efecto transformado en hover */
  box-shadow: 0 0 7px rgba(134, 134, 134, 0.7); /* Sombra más grande al pasar el ratón */
}

/* Contenedor para los enlaces */
.contenedor {
  display: flex;
  flex-direction: row; /* Los rectángulos estarán en fila por defecto en pantallas grandes */
  justify-content: center; /* Centra los enlaces horizontalmente */
  gap: 4vw; /* Espaciado entre los enlaces */
  width: 80%; /* 80% del ancho de la pantalla */
  z-index: 2;
  box-sizing: border-box; /* Asegura que el padding y el border no afecten el tamaño */
}

/* Rectángulos */
.rectangle-link {
  width: 22vw; /* 22% del ancho de la pantalla */
  height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Ajuste del espaciado entre la imagen y el texto */
.rectangle-text {
  margin-top: 4vh;
  font-size: 1.7vw;
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
}

.rectangle {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  border-radius: 1vw;
  color: white;
  font-size: 2vw;
  transition:
    border 0.5s ease-in-out,
    transform 1.5s ease-in-out,
    filter 0.6s ease,
    box-shadow 0.3s ease-in-out;
}

/* Efecto al pasar el ratón sobre el rectángulo */
.rectangle:hover {
  background-color: rgba(
    0,
    0,
    0,
    0.6
  ); /* Cambia el color de fondo al pasar el ratón */
  transform: scale(1.025); /* Ejemplo de efecto transformado en hover */
  box-shadow: 0 0 7px rgba(134, 134, 134, 0.7); /* Sombra más grande al pasar el ratón */
}

/* Estilo para las imágenes dentro de los rectángulos */
.rectangle img {
  width: 40%;
  height: 40%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition:
    transform 5s,
    filter 0.6s ease,
    box-shadow 0.3s ease-in-out;
}

/* Efecto al pasar el ratón sobre el rectángulo */
.rectangle:hover img {
  transform: rotateY(360deg);
  filter: drop-shadow(0 0 4vw rgba(255, 255, 255, 0.6)) brightness(1.5);
}

.whatsapp-float {
  position: fixed;
  bottom: 2.5vh;
  right: 2.5vw;
  height: 70px;
  width: 70px; /* estado inicial */
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 0 6px rgba(134, 134, 134, 0.5);
  transition:
    width 1s ease,
    background-color 0.6s ease,
    transform 1.2s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

/* Hover → expansión */
.whatsapp-float:hover {
  width: 210px;
  background-color: rgba(0, 0, 0, 1);
  transform: scale(1.025);
  box-shadow: 0 0 7px rgba(134, 134, 134, 0.7);
}

.whatsapp-icon {
  min-width: 70px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-icon img {
  width: 55%;
  height: 55%;
  object-fit: contain;

  transition:
    transform 5s,
    filter 0.6s ease;
}

.whatsapp-float:hover .whatsapp-icon img {
  transform: rotateY(360deg);
  filter: drop-shadow(0 0 4vw rgba(255, 255, 255, 0.6)) brightness(1.5);
}

.whatsapp-text {
  white-space: nowrap;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;

  opacity: 0;
  transform: translateX(-10px);

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.whatsapp-float:hover .whatsapp-text {
  opacity: 1;
  transform: translateX(0);
}

.whatsapp-float,
.whatsapp-float * {
  text-decoration: none;
}

/* Media query para pantallas*/
@media (max-width: 1200px) {
  .text-box {
    font-size: 1.75vw;
  }

  .rectangle img {
    width: 37.5%;
  }
}

@media (max-width: 1100px) {
  .text-box {
    font-size: 1.7vw;
  }
}

@media (max-width: 1000px) {
  .text-box {
    font-size: 1.8vw;
  }

  .rectangle img {
    width: 35%;
  }
}

@media (max-width: 900px) {
  .text-box {
    font-size: 2vw;
  }

  .whatsapp-float {
    width: 65px;
    height: 65px;
  }

  .whatsapp-float:hover {
    width: 190px;
  }

  .whatsapp-icon {
    min-width: 65px;
    height: 65px;
  }
}

@media (max-width: 800px) {
  .hexagon-pattern {
    content: url("IMG/miTramadoMovil.svg"); /* Imagen para pantallas menores o iguales a 800px */
  }

  .titulo {
    margin-top: 6vh;
    font-size: 4vw;
  }

  /* //eeeee */
  .text-box {
    font-size: 2.1vw;
    margin: 5vh 0 5vh 0;
  }

  /* Cambiar el contenedor de los rectángulos a dos filas (2 columnas) */
  .contenedor {
    display: grid; /* grid  para controlar mejor las columnas */
    grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
    gap: 4vw; /* Ajustar el espacio entre las filas y columnas eeeeee*/
    width: 80%; /* El contenedor sigue teniendo el mismo tamaño que el text-box */
    margin: 0 auto; /* Centrar el contenedor en la pantalla */
  }

  .rectangle-text {
    font-size: 2.7vw;
  }

  /* Ajustar el tamaño de los rectángulos */
  .rectangle-link {
    width: 100%; /* Ahora cada rectángulo ocupa el 100% del ancho de la columna */
    height: 20vh; /* Mantener la altura de los rectángulos eeeeeeee*/
  }

  .rectangle img {
    width: 27.5%;
  }

  .whatsapp-float {
    width: 65px;
    height: 55px;
  }
}

@media (max-width: 700px) {
  .text-box {
    font-size: 2.3vw;
  }

  .rectangle img {
    width: 30%;
  }

  .whatsapp-float:hover {
    width: 185px;
  }
}

@media (max-width: 600px) {
  .titulo {
    margin-top: 6vh;
    font-size: 4.5vw;
  }

  .text-box {
    font-size: 2.6vw;
    height: 23vh;
  }

  .rectangle img {
    width: 27.5%;
  }

  .rectangle-text {
    /* eeee */
    font-size: 3.1vw;
  }

  /* eeeeeee */
  .whatsapp-float {
    width: 60px;
    height: 52.5px;
  }

  .whatsapp-icon {
    min-width: 60px;
    height: 60px;
  }
}

@media (max-width: 550px) {
  .text-box {
    font-size: 2.7vw;
  }
}

/* Media query para pantallas de 480px o menos */
@media (max-width: 480px) {
  .titulo {
    margin-top: 5vh;
    font-size: 4.75vw;
  }

  .text-box {
    font-size: 2.9vw;
    min-height: 22.5vh;
    margin: 3.5vh 0 2vh 0;
  }

  /* Cambiar el contenedor de los rectángulos a una columna */
  .contenedor {
    display: grid; /*grid para apilar los elementos */
    grid-template-columns: 1fr; /* Solo una columna */
    gap: 0vw; /* Mayor espaciado entre los rectángulos eeeeeeeeee*/
    width: 80%; /* Mantener el mismo ancho que el text-box */
    margin: 0 auto; /* Centrar el contenedor */
  }

  /* //eeeeee */
  .rectangle {
    height: 90%;
  }

  .rectangle-text {
    margin-top: 2.25vh;
    font-size: 3.5vw;
  }

  /* Cada rectángulo ocupa todo el ancho del contenedor */
  .rectangle-link {
    height: 13vh; /* Ajustar la altura si es necesario */
  }

  .rectangle img {
    width: 20%;
  }

  .whatsapp-float {
    width: 52.5px;
    height: 45px;
    right: 1.5vw;
  }

  .whatsapp-float:hover {
    width: 165px;
  }

  .whatsapp-icon {
    min-width: 50px;
    height: 50px;
  }

  .whatsapp-icon:hover {
    padding-left: 5px;
  }

  .whatsapp-text {
    font-size: 1.05rem;
  }
}

@media (max-width: 440px) {
  .text-box {
    font-size: 3.1vw;
  }
}

@media (max-width: 390px) {
  .text-box {
    font-size: 3.3vw;
  }

  .rectangle img {
    /* eeeeeee */
    width: 19%;
  }
}

@media (max-width: 340px) {
  .text-box {
    font-size: 3.6vw;
  }
}

@media (max-width: 300px) {
  .text-box {
    font-size: 3.8vw;
  }
}