/* --- BLOQUE (slider + caption abajo) --- */
.galeria-bloque {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* centra slider y texto */
}

.galeria-caption {
  width: 100%;
  clear: both;
}

/* --- SLIDER --- */
.galeria-slider {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

/* radios ocultos */
.galeria-slider input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* viewport = recorta para que se vea 1 sola imagen */
.galeria-slider .viewport {
  width: 100%;
  overflow: hidden;
  border-radius: 8px; /* opcional */
}

/* track */
.galeria-slider .slides {
  display: flex;
  width: 100%;
  transition: transform 0.35s ease;
}

/* cada slide ocupa TODO el ancho del viewport (1 por vez) */
.galeria-slider .slide {
  flex: 0 0 100%;
  width: 100%;
}

.galeria-slider img {
  width: 100%;
  height: 420px; /* ajustá */
  object-fit: cover;
  display: block;
}

/* mover 1 por vez */
#g1:checked ~ .viewport .slides {
  transform: translateX(0%);
}
#g2:checked ~ .viewport .slides {
  transform: translateX(-100%);
}
#g3:checked ~ .viewport .slides {
  transform: translateX(-200%);
}
#g4:checked ~ .viewport .slides {
  transform: translateX(-300%);
}
#g5:checked ~ .viewport .slides {
  transform: translateX(-400%);
}
#g6:checked ~ .viewport .slides {
  transform: translateX(-500%);
}

/* --- FLECHAS --- */
.galeria-slider .nav label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 28px;
  border-radius: 999px;
  z-index: 2;
}

.galeria-slider .nav .prev {
  left: 12px;
}
.galeria-slider .nav .next {
  right: 12px;
}

/* ocultar todas y mostrar solo las del slide activo */
.galeria-slider .nav .prev,
.galeria-slider .nav .next {
  display: none;
}

#g1:checked ~ .nav .p1,
#g1:checked ~ .nav .n1 {
  display: grid;
}
#g2:checked ~ .nav .p2,
#g2:checked ~ .nav .n2 {
  display: grid;
}
#g3:checked ~ .nav .p3,
#g3:checked ~ .nav .n3 {
  display: grid;
}
#g4:checked ~ .nav .p4,
#g4:checked ~ .nav .n4 {
  display: grid;
}
#g5:checked ~ .nav .p5,
#g5:checked ~ .nav .n5 {
  display: grid;
}
#g6:checked ~ .nav .p6,
#g6:checked ~ .nav .n6 {
  display: grid;
}

/* --- DOTS --- */
.galeria-slider .dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.galeria-slider .dots label {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* dot activo */
#g1:checked ~ .dots label[for="g1"],
#g2:checked ~ .dots label[for="g2"],
#g3:checked ~ .dots label[for="g3"],
#g4:checked ~ .dots label[for="g4"],
#g5:checked ~ .dots label[for="g5"],
#g6:checked ~ .dots label[for="g6"] {
  background: rgba(0, 0, 0, 0.65);
}

.text-image-block{
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

/* 1191px para abajo -> todo en vertical */
@media (max-width: 1191px){
  /* Caso 1: bloque flex custom */
  .text-image-block{
    flex-direction: column;
    align-items: stretch;
  }

  .text-image-block > div{
    width: 100%;
    min-width: 0 !important;
  }

  .text-image-block img{
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
  }

  /* Caso 2: row con cols (tipo bootstrap) */
  .text-image-row{
    display: flex;
    flex-direction: column;
  }

  .text-image-row > [class*="col-"]{
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .text-image-row .w-100{
    width: 100%;
  }

  .text-image-row img{
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
  }
}