img.imagen-circular {
    width: 300px; /* Establece un ancho fijo */
    height: 300px; /* Establece una altura fija igual al ancho */
    border-radius: 50%; /* Convierte el cuadrado en un círculo */
    object-fit: cover; /* Asegura que la imagen se recorte para llenar el círculo sin distorsionarse */
}

.circle-image {
    width: 250px;
    height: 250px;
    padding: 0%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-style:dotted;
    border-color: rgb(159, 253, 182); */
    box-shadow: 0 15px 15px rgba(94, 93, 93, 0.4);
}

.circle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circle-medium img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; /* Asegura que llene el círculo sin deformarse */
  margin: auto; /* Por si acaso, refuerza el centrado */
}


.circle-medium {
    display: block;
    width: 150px;
    height: 150px;
    padding: 0%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-style:dotted;
    border-color: rgb(159, 253, 182); */
    box-shadow: 0 15px 15px rgba(94, 93, 93, 0.4);
    opacity: 0.3;
    transition: opacity 0.3s ease; /* Transición suave */
}

.circle-medium:hover {
    opacity: .9 !important;
}

.circle-mediumnohover {
    width: 150px;
    height: 150px;
    padding: 0%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-style:dotted;
    border-color: rgb(159, 253, 182); */
    box-shadow: 0 15px 15px rgba(94, 93, 93, 0.4);
    opacity: 0.9;
    /* transition: opacity 0.3s ease;*/
}

.img-center {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: none!important;
  align-items: center!important;
  }

  .max-width-60 {
    max-width: 60%;
    height: auto;
  }


    /*clases para imagenes con boton de play. Debe indicarse la clase en el contenedor de la imágen
    no directamente en la etiqueta de la imágen*/
  /* Contenedor que envuelve la imagen */
.img-play {
  position: relative;
  display: inline-block;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

/* Triángulo de "play" */
.img-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid rgba(45, 44, 44, 0.8); /* color blanco semitransparente */
  transition: all 0.2s ease;
}

/* Efecto al pasar el mouse */
.img-play:hover::after {
  border-left-color: rgb(29, 29, 29);
  transform: translate(-40%, -50%) scale(1.1);
}
/* fin de clases para imagenes con boton de play*/

/* Clases para imágenes con texto "www" superpuesto */
.img-www {
  position: relative;
  display: inline-block;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

/* Texto centrado "www" */
.img-www::after {
  content: 'www';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(45, 44, 44, 0.8);
  font-size: 28px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  transition: all 0.2s ease;
  pointer-events: none; /* evita interferir con clics sobre el enlace */
}

/* Efecto al pasar el mouse */
.img-www:hover::after {
  color: rgb(29, 29, 29);
  transform: translate(-50%, -50%) scale(1.1);
}
/* fin de clases para imágenes con texto "www" superpuesto */


/* Contenedor (actúa como envoltura para posicionar la sombra) */
/* Contenedor principal */
.hexagon {
  position: relative;
  display: inline-block;
  width: 220px;
  height: 220px;
  cursor: pointer;
}

/* Imagen recortada en forma de hexágono */
.hexagon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(
    25% 6.7%,
    75% 6.7%,
    100% 50%,
    75% 93.3%,
    25% 93.3%,
    0% 50%
  );
  -webkit-clip-path: polygon(
    25% 6.7%,
    75% 6.7%,
    100% 50%,
    75% 93.3%,
    25% 93.3%,
    0% 50%
  );
  position: relative;
  z-index: 2;
  transition: transform 0.25s ease;
  will-change: transform;
}

/* Sombra difuminada con efecto flotante */
.hexagon::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.25);
  filter: blur(25px); /* más difuminada */
  transform: translate(-12px, 12px) scale(0.96);
  opacity: 0.8;
  clip-path: polygon(
    25% 6.7%,
    75% 6.7%,
    100% 50%,
    75% 93.3%,
    25% 93.3%,
    0% 50%
  );
  -webkit-clip-path: polygon(
    25% 6.7%,
    75% 6.7%,
    100% 50%,
    75% 93.3%,
    25% 93.3%,
    0% 50%
  );
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

/* Efecto hover: se eleva y la sombra se separa más */
.hexagon:hover img {
  transform: translateY(-8px) scale(1.02);
}
.hexagon:hover::before {
  transform: translate(-18px, 18px) scale(1);
  filter: blur(30px);
  opacity: 0.9;
}



.img-fade-round {
  display: block;
  width: 300px; /* Ajusta a tu gusto */
  height: auto;
  border-radius: 50%; /* puedes cambiarlo a 20px si no quieres círculo */
  opacity: 0.80;

  /* Fondo visible detrás del difuminado */
  background-color: white;

  /* Efecto de desvanecimiento radial */
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 60%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* Sombra suave inferior izquierda */
  box-shadow: -10px 10px 20px rgba(0,0,0,0.25);
}

.img-fade-round:hover {
  transform: scale(1.01);
  opacity: 0.90;
}

.img-fade-rect {
  display: block;
  width: 300px;       /* ajusta según necesites */
  height: 200px;      /* ajusta según necesites */
  border-radius: 10px; /* bordes redondeados suaves */
  object-fit: cover;

  /* Desvanecimiento en los bordes (rectangular) */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%),
                       linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%),
              linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  transition: opacity 0.3s ease;
}

/* Opcional: hover */
.img-fade-rect:hover {
  opacity: 0.9;
}


.circle-medium-grande img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; /* Asegura que llene el círculo sin deformarse */
  margin: auto; /* Por si acaso, refuerza el centrado */
}


.circle-medium-grande {
    display: block;
    width: 300px;
    height: 300px;
    padding: 0%;
    border-radius: 60%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-style:dotted;
    border-color: rgb(159, 253, 182); */
    box-shadow: 0 15px 15px rgba(94, 93, 93, 0.4);
    opacity: 0.3;
    transition: opacity 0.3s ease; /* Transición suave */
}

.circle-medium-grande:hover {
    opacity: .9 !important;
}

.bordes-redondeados-opaco {
    border-radius: 50px; /* Ajusta el valor según el nivel de redondeo deseado */
    overflow: hidden; /* Asegura que el contenido no sobresalga de los bordes redondeados */
    opacity: 0.45; /* Ajusta la opacidad según sea necesario */
}
.bordes-redondeados-opaco:hover {
    opacity: 0.9; /* Aumenta la opacidad al pasar el mouse */
} 


.slideshow {
  position: relative;
  width: 100%;     /* o el ancho que quieras */
  max-width: 800px; /* ejemplo */
  overflow: hidden;
}

.slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;  /* difuminado de 1 segundo */
}

.slideshow .slide.active {
  opacity: 1;
  z-index: 2;
}