/* AYAME — Quienes Somos (solo slider de imágenes, compacto, contain) */

.q-slider{ width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; margin:12px 0 6px }
.q-slides{
  width:100%; max-width:760px;
  height:200px; /* móvil */
  position:relative; overflow:hidden;
  border-radius:14px; border:1px solid #242424;
  background:#0f0f0f;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
@media (min-width:480px){ .q-slides{ height:220px } }
@media (min-width:760px){ .q-slides{ height:240px } }
@media (min-width:1024px){ .q-slides{ height:260px } }

.q-slides input{ display:none }
.q-slide{
  width:100%; height:100%;
  position:absolute; top:0; left:0;
  opacity:0; transition:opacity .6s ease;
  display:flex; align-items:center; justify-content:center; padding:8px;
}
.q-slide img{
  width:100%; height:100%;
  object-fit:contain; object-position:center center;
  display:block;
}

/* Mapeo exacto: 4 radios -> 4 slides */
#q-radio1:checked ~ .q-slide:nth-of-type(1){ opacity:1 }
#q-radio2:checked ~ .q-slide:nth-of-type(2){ opacity:1 }
#q-radio3:checked ~ .q-slide:nth-of-type(3){ opacity:1 }
#q-radio4:checked ~ .q-slide:nth-of-type(4){ opacity:1 }

.q-nav-manual{ display:flex; gap:8px; justify-content:center; align-items:center }
.q-btn{ width:9px; height:9px; border-radius:50%; border:2px solid rgba(255,255,255,.85); cursor:pointer }
.q-btn:hover{ transform:scale(1.05) }

.q-nav-auto{ position:absolute; width:100%; left:0; bottom:6px; display:flex; justify-content:center; gap:4px }
.q-nav-auto > div{ width:16px; height:2px; background:rgba(255,255,255,.35); border-radius:2px }