/* Reset mínimo */
* { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }

/* Contenedor del slider */
.slider {
  position: relative;
  width: 100%;
  overflow: hidden; /* ocultar overflow visual */
}

/* Estilo por defecto (ancho) */
.slider-wide .slide img {
  width: 100%;
  height: 60vh;        /* más baja, panorámica */
  object-fit: cover;
}

/* Estilo para galería alta */
.slider-tall .slide img {
  width: 75%;        
  height: 95vh;      
  margin: 0 auto;    
  object-fit: cover; /* cubre espacios con la imagen */
}

/* Pista desplazable con scroll-snap */
.track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;             /* animación suave al hacer scroll */
  -webkit-overflow-scrolling: touch;   /* iOS */
  scrollbar-width: none;               /* Firefox */
}
.track::-webkit-scrollbar { display: none; } /* Chrome */

/* Cada slide ocupa el 100% del ancho del contenedor */
.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
}
.slide img {
  width: 100%;
  max-height: 60vh;        
  object-fit: cover;   
}

.slide p{
    align-items: center;
}

.slide p.caption{
    width: 100%;
    font-weight: bold;
    margin-top: 1em;
    font-size: 1rem;
    font-family: "Belleza", sans-serif;
    text-align: center;
} 

/* Flechas visibles, con botón circular y triángulo interno */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px; height:56px;              /* botón con tamaño real */
  background:rgba(1,1,1,0);           /* disco de fondo para contraste */
  border-radius:50%;
  cursor:pointer;
  border:none;
  z-index:99;                          /* por encima de la pista */
  display:flex; align-items:center; justify-content:center;
}

.arrow.prev{ left:16px; }
.arrow.next{ right:16px; }

/* Triángulo interior (la flecha) */
.arrow.prev::before,
.arrow.next::before{
  content:"";
  display:block;
  width:0; height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
}
.arrow.prev::before{  border-right:18px solid gray;  margin-left:4px; }
.arrow.next::before{  border-left:18px solid gray;   margin-right:4px; }

/* Hover solo cambia el color, no márgenes */
.arrow.prev:hover::before { border-right-color: rgba(0,0,0,0.3); }
.arrow.next:hover::before { border-left-color: rgba(0,0,0,0.3); }

/* Asegura que la pista no tape las flechas */
.track{ position:relative; z-index:0;}

/* Indicadores */
.indicators {
  position: absolute;
  left: 50%; 
  bottom: 0px;
  transform: translateX(-50%);
  display: flex; 
  gap: 18px;
}
.indicators button {
  width: 12px; 
  height: 12px; 
  border-radius: 50%;
  border: none; 
  background: rgba(0,0,0,.3);
  cursor: pointer;
}
.indicators button[aria-current="true"] { background: rgba(0,0,0,.5); }
.indicators button:hover { background: rgba(0,0,0,.5); }

/* Responsive: flechas se escalan en pantallas pequeñas */
@media (max-width: 768px) {
  .slide img { height: 50vh; }
  .arrow.prev { 
    border-right-width: 6vw; 
    border-top-width: 6vw; 
    border-bottom-width: 6vw; 
  }
  .arrow.next { 
    border-left-width: 6vw; 
    border-top-width: 6vw; 
    border-bottom-width: 6vw; 
  }

  /* Estilo para galería alta */
  .slider-tall .slide img {
  width: 100%;        
  height: 50vh;      
  margin: 0 auto;    
  object-fit: cover; /* cubre espacios con la imagen */
}

/* Estilo por defecto (ancho) */
.slider-wide .slide img {
  width: 100%;
  height: 25vh;        /* más baja, panorámica */
  object-fit: cover;
}

.arrow{
  transform:translateY(-120%);
}

.arrow.prev::before{  border-right:18px solid white;  margin-left:-50px; }
.arrow.next::before{  border-left:18px solid white;   margin-right:-50px; }

.arrow.prev:hover::before { border-right-color: white; }
.arrow.next:hover::before { border-left-color: white; }

}