/* ===== 4. EL CARRUSEL (El marco "cortador") ===== */
.carousel {
    position: relative;
    width: 90vw;          /* Ocupa el 90% del ancho de la pantalla */
    max-width: 1200px;    /* Pero no más de 1200px */
    height: 500px;        /* Altura fija */
    overflow: hidden;     /* ¡ESTO ES LO QUE CORTA LA OTRA IMAGEN! */
    border-radius: 20px;
    background: #000;  
    margin-left: 55px;
    margin-top: 30px;   /* Fondo negro por si la imagen tarda en cargar */
}

/* EL TRACK (La fila infinita de fotos) */
.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
}

/* CADA SLIDE (Obligamos a que mida lo mismo que el carrusel) */
.slide {
    flex: 0 0 100%;       /* NO permite que la imagen se estire o se achique */
    width: 100%;          /* Mide el 100% de la caja .carousel */
    height: 100%;
    position: relative;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* La imagen se adapta sin deformarse */
    display: block;
}

/* ===== 5. TEXTO Y BOTONES ===== */


.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
background: transparent;
    border: none;
    color: white;
    font-size: 30px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}


.prev { left: 20px; }
.next { right: 20px; }



/* ALERTA DE MAYOR DE EDAD*/

/* ALERTA DE MAYOR DE EDAD*/

#age-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
}

/* imagen fondo */

.age-bg{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* capa roja */

#age-overlay::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(104, 0, 0, 0.605);
  z-index:2;
}

/* caja */

.age-box {
  position: relative;
  z-index:3;   /* IMPORTANTE */
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(6px);
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  max-width: 400px;
  color: white;
  border: 2px solid white;
}

/* botones */

.age-box button {
  margin: 10px;
  padding: 12px 25px;
  cursor: pointer;
  border-radius: 30px;
  border: 2px solid white;
  background: transparent;
  color: white;
  transition: 0.3s;
}

.age-box button:hover{
  background:white;
  color:#900;
}