@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*section 3*/
.QuickAccess{
    width: 100%;
    min-height: 101vh;
    background-image: url('../img/sections/seccion3.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 40px 0;   
  }
  .slider-titleQuick::before{
    content: "";
    display: inline-block;
    width: 50px;
    height: 12px;
    background-color: #ebbe32;
    margin-right:30px;
    vertical-align: middle;
}
.slider-titleQuick {
    font-size: 3em;
    font-weight: bolder;
    color: #04553a;
    font-family: "Titillium Web", sans-serif;
    text-shadow: 3px 3px 6px rgba(87, 82, 82, 0.19);
    text-align: center;
    width: 100%;
    margin: 0px auto 80px auto;
}

.Contentimgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  font-family: "Poppins", sans-serif;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 350px;
  position: relative;
}

/* Imagen circular */
.image-wrapper {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 3px 6px 19px rgba(0, 0, 0, 0.66);
  
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.image-wrapper img:hover{
  transform: scale(1.05);
  filter: brightness(1.1) saturate(1.1);
}
  /* Estilo común para títulos */
.title a {
  font-weight: 700;
  font-size: 20px;
 text-decoration:none;
  color: #000;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 3px 6px 19px rgba(0, 0, 0, 0.66);
  background: -moz-linear-gradient(8deg, hsl(30.9, 59.3%, 65.3%) 0%, hsl(0, 0%, 100%) 100%);
  background: linear-gradient(8deg, hsl(30.9, 59.3%, 65.3%) 0%, hsl(0, 0%, 100%) 100%);
  background: -webkit-linear-gradient(8deg, hsl(30.9, 59.3%, 65.3%) 0%, hsl(0, 0%, 100%) 100%);
}
.title a:hover {
  color: rgb(4, 85, 58);
  transition: all 0.3s ease;
}
/* Reutilizamos nombres anteriores, pero con estilos nuevos */
.title-top-left {
  position: absolute;
  top: 30%;          /* mitad vertical */
  left: -6vw;       /* fuera del borde izquierdo */
  transform: translateY(-50%); /* centrado vertical real */
  z-index: 10;
  width: 150px;
  text-align: center;
  padding: 8px 12px;
}

.title-bottom-center {
  margin-top: -1vh;
}

.title-top-right {
 position: absolute;
  top: 30%;
  right: -8vw;       /* fuera del borde derecho */
  transform: translateY(-50%);
  z-index: 10;
}



/* 🔄 Ajustes para pantallas pequeñas */

@media (max-width: 1410px) {
  .Contentimgs {
    gap: 30px;
  }
  .item {
    width: 300px;
  }

  .image-wrapper {
    width: 300px;
    height: 300px;
  }
  .title-top-left {
    position: absolute;
    top: 30%;          /* mitad vertical */
    left: -9vw;       /* fuera del borde izquierdo */
    transform: translateY(-50%); /* centrado vertical real */
    z-index: 10;
    width: 150px;
    text-align: center;
    padding: 8px 12px;
  }


  .title-top-right {
    position: absolute;
    top: 30%;
    right: -12vw;       /* fuera del borde derecho */
    transform: translateY(-50%);
    z-index: 10;
  }

} 

@media (max-width: 1300px) {
  
  .title-top-left {
    left: -6vw;       /* fuera del borde izquierdo */
  }
  .title{
    font-size: 16px;
    width:120px;
  }

  .title-top-right {
    right: -6vw;       /* fuera del borde derecho */
  }

} 
@media (max-width: 1130px) {
  .Contentimgs {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-bottom: 80px; /* ✅ Añadimos espacio al final del contenedor */ 
  }
  .item {
    width: 350px;
  }

  .image-wrapper {
    width: 350px;
    height: 350px;
  }
  
} 
  
@media (max-width: 914px) {
  .item {
    width: 300px;
  }

  .image-wrapper {
    width: 300px;
    height: 300px;
  }

  .title {
    font-size: 0.8rem;
    padding: 4px 10px;
    width: 100px;
  }

  .title-top-left {
    left: -10vw;
  }

  .title-top-right {
    right: -10vw;
  }
}