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

:root {
  /*--purple-100: hsl(254,88%,90%);
  --purple-500: hsl(256,67%,59%);
  --yellow-100: hsl(31,66%,93%);
  --yellow-500: hsl(39,100%,71%);
  --white: hsl(39,0%,100%);
  --black: hsl(0,0%,7%);
  --family: "DM Sans";
  --fs: 18px;*/
  --purple-100: hsl(254, 20%, 44%); /*hsl(254,88%,90%); /* contenido en linea */
  --purple-500: hsl(255, 27%, 26%); /*hsl(256,67%,59%); /* kuu y otros proyectos*/
  --yellow-100: hsl(254, 21%, 56%); /*hsl(31,66%,93%); /* andres*/
  --yellow-500: hsl(251, 27%, 32%); /*hsl(39,100%,71%); /*contacto y tiktok esto es tambien el color del text accent*/
  --yellow-350: hsl(39,100%,71%); /*text accent*/
  --white: hsl(0,0%,7%); /*fondo de diapo instagram?*/
  --black: hsl(39,0%,100%); /* texto puede ser? */
  --family: "DM Sans";
  --fs: 18px;
}

body {
/*  background-color: #f2f2f2;
  min-height: 100vh;
  font-family: "DM Sans";
  font-size: --fs;
  line-height: 1;*/
  background-color: #18122B; /*#f2f2f2; /* color de fondo */
  min-height: 100vh;
  font-family: "DM Sans";
  font-size: --fs;
  line-height: 1;
  color: white; /* color del texto?*/
}

a:link {
  color: #99E690; /* Contraste 12.13*/
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #ffc0cb; /* Contraste 11.77*/
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #ffcb6b; /* Contraste 12.07*/
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #FFD900; /* Contraste 13.08*/
  background-color: transparent;
  text-decoration: underline;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  grid-template-areas: "box1 box2 box2 box3" "box1 box2 box2 box3" "box1 box2 box2 box3" "box1 box2 box2 box3" "box1 box5 box6 box3" "box4 box5 box6 box3" "box4 box5 box6 box3" "box4 box7 box8 box8" "box4 box7 box8 box8" "box4 box7 box8 box8";
  max-width: 1280px;
}

/*img {
  max-width: 225px;
}*/

.bento-grid__item--pfp {
  max-width: 165px!important;
  margin-left: auto!important;
  margin-right: auto!important;
}

.bento-grid__item--obj {
    max-height: 85px!important;
    max-width: 125px!important;
}

.svg-container {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;    /* Centra verticalmente */
  margin-top: 2rem;
  margin-bottom: 1rem;  
}

.svg-container2 {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  margin-top: 1rem;
  margin-bottom: 1rem;  
}

.svg-container3 {
  display: flex;
  justify-content: left;
  gap: 4px; /*espacio entre iconos*/
  align-items: center; /* centra verticalmente*/ 
}

.svg-container4 {
  display: flex;
  justify-content: left;
  gap: 4px; /*espacio entre iconos*/
  align-items: center; /* centra verticalmente*/ 
}

.svg-center {
  width: 50px;
  height: 50px;
}

.svg-center2 {
  width: 75px;
  height: 75px;
}

.svg-center3 {
  width: 35px;
  margin-top: 3rem;
  justify-content: left; 
} /* gmail */

.svg-center4 {
  width: 35px;
  justify-content: left; 
} /* tiktok */

.svg-center4 {
  width: 35px;
  margin-top: 3rem;
  justify-content: left; 
} /* whatsapp */

.svg-center5 {
  width: 30px;
  /*margin-top: 1rem;*/
  justify-content: left;
  display: inline-block; 
} /* instagram */

.svg-center6 {
  width: 15px;
  /*margin-top: 1rem;*/
  justify-content: left;
  display: inline-block; 
} /* verificado ig */

.svg-center7 {
  width: 30px;
  justify-content: left;
  display: inline-block; 
} /* tiktok */

.svg-center8 {
  width: 15px;
  justify-content: left;
  display: inline-block; 
} /* verificado tiktok*/

.svg-center9 {
  width: 155px;
  display: inline-block; 
} /*drive*/

@media (max-width: 960px) {
  .svg-center9 {
    width: 100px;
  } /*drive*/
}

.svg-center10 {
  width: 255px;
} /*otros*/

.bento-grid {
  display: grid;
  place-content: center;
  max-width: 100%;
}

.bento-grid__item {
  position: relative;
  border-radius: 1rem;
  background-color: var(--yellow-100);
  padding: 15px;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 4px 10px rgba(255, 255, 255, 0.15); /* Sombra blanca con 25% de opacidad */
  /*  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra negra */
}
.bento-grid__item:first-child {
  grid-area: box1;
  justify-content: space-around;
}
.bento-grid__item:first-child img {
  margin-top: 1rem;
}
.bento-grid__item:first-child em {
  color: var(--purple-500);
}
.bento-grid__item:nth-child(2) {
  grid-area: box2;
  align-items: center;
  justify-content: space-evenly;
  color: var(--black);
  background-color: var(--purple-500);
  text-align: center;
}
.bento-grid__item:nth-child(2) span {
  color: var(--yellow-350);
}
.bento-grid__item:nth-child(3) {
  grid-area: box3;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  flex-direction: column;
  align-content: space-evenly;
  padding-right: 15px;
  background-color: var(--purple-100);
}
.bento-grid__item:nth-child(3) img {
  justify-self: center;
}
.bento-grid__item:nth-child(4) {
  grid-area: box4;
  justify-content: space-evenly;
  background-color: var(--yellow-500);
}
.bento-grid__item:nth-child(5) {
  grid-area: box5;
  justify-content: center;
  background-color: var(--purple-100);
}
.bento-grid__item:nth-child(6) {
  grid-area: box6;
  justify-content: center;
  /*padding-top: 2rem;*/
  background-color: var(--yellow-500);
}
.bento-grid__item:nth-child(6) img {
  /*border-top-left-radius: 15px;*/
  /*border-top-right-radius: 15px;*/
}
.bento-grid__item:nth-child(7) {
  grid-area: box7;
  justify-content: space-around;
  align-items: start;
  padding: 30px;
  background-color: var(--yellow-100);
}

.bento-grid__item:nth-child(8) {
  grid-area: box8;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  color: var(--black);
  background-color: var(--purple-500);
  align-items: center;
}
.bento-grid__item:nth-child(8) h2 {
  align-self: center;
}
.bento-grid__item-emphasis {
  color: var(--yellow-350);
}

.lg-text {
  font-size: 2.5rem;
  font-weight: 500;
}

.xlg-text {
  font-size: 3rem;
  font-weight: 500;
}

.sm-text {
  font-size: 1rem;
  font-weight: 500;
}

.med-text {
  font-size: 2.1rem;
  font-weight: 500;
}

.attribution {
  text-align: center;
  font-size: 0.55rem;
}

/*@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

* {
  animation: fadeInUp 1.4s ease-out forwards;
}*/

.gallery-link {
  text-decoration: none; /* Quita subrayado */
  color: inherit; /* Usa el color del texto del padre */
  display: block; /* Asegura que ocupe todo el espacio */
}


/* Limitar el tamaño máximo de la galería en altura */
.bento-grid__item.gallery-box2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 226px; /* Limita la altura máxima de la galería */
  border-radius: 15px; /* Redondea los bordes */
  overflow: hidden; /* Asegura que las imágenes no sobresalgan */
  cursor: pointer;  /*Cambia el cursor a una mano indicando que es clickeable */
}

/* Contenedor de la galería */
.gallery-container {
  width: 100%;
  height: 300px; /* Altura fija */
  overflow: hidden; /* Oculta imágenes fuera del contenedor */
  position: relative;
}

/* La galería con las imágenes que se mueven automáticamente */
.gallery-images2 {
  display: flex;
  width: calc(20 * 300px * 2); /* Ajusta el tamaño basado en 20 imágenes duplicadas */
  animation: slideGallery2 60s linear infinite; /* Movimiento más lento y sin cortes */
  /*animation: none !important;*/
}

/* Cada imagen dentro de la galería */
.gallery-images2 img {
  width: 300px; /* Tamaño estándar */
  height: 300px;
  object-fit: cover; /* Ajusta la imagen sin deformarla */
}

/* Animación para hacer que las imágenes se desplacen de forma continua */
@keyframes slideGallery2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-20 * 300px)); } /* Se mueve solo el tamaño de 20 imágenes */
}


/*@media (max-width: 960px) {
  .gallery-images2 {
    animation: none!important;  /* Desactiva la animación para móviles
}

* {
  animation: none!important; /* Desactiva la animación en móviles
}
}*/


/*@media (max-width: 760px) {
  .gallery-images2 {
    animation: none!important;  /* Desactiva la animación para móviles
}

* {
  animation: none!important; /* Desactiva la animación en móviles 
}
}*/