/* =========================
   SLIDER FOLLETOS (AISLADO)
========================= */

.sf {
  --sf-w: clamp(180px, 16vw, 240px);
  --sf-h: clamp(260px, 24vw, 340px);
  --sf-r: 18px;

  /* +5% adicional */
  --sf-x-1: clamp(151px, 18vw, 239px);
  --sf-x-2: clamp(277px, 33vw, 428px);

  --sf-t: 420ms;
}

/* radios ocultos */
.sf__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sf__titulo {
  position: relative;
  z-index: 10;
  text-align: center;
  margin: 0 0 24px;
  font-size: clamp(22px, 3vw, 32px);
  color: #fbfafc;
}

/* ===== SLIDER ===== */
.sf__slider {
  width: min(1100px, 96vw);
  height: auto;
  min-height: 420px;

  position: relative;

  /* clave para que no se corte la card central */
  padding: 120px 0;

  overflow: visible;

  display: grid;
  place-items: center;

  margin: 0 auto;
  margin-bottom: -40px;
}

/* overlay */
.sf__slider::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* stage */
.sf__stage {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 0px;
  margin: 0px;
}
/* cards */
.sf__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sf-w);
  height: var(--sf-h);
  border-radius: 10px;
  overflow: hidden;

  transform: translate(-50%, -50%);
  opacity: 0.2;
  filter: saturate(0.95) blur(0.2px);

  transition:
    transform var(--sf-t) cubic-bezier(0.2, 0.85, 0.2, 1),
    opacity var(--sf-t) cubic-bezier(0.2, 0.85, 0.2, 1),
    filter var(--sf-t) cubic-bezier(0.2, 0.85, 0.2, 1);

  cursor: pointer;
  user-select: none;
}

.sf__card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* antes: contain */
  display: block;
}

/* ===== POSICIONES ===== */

.sf__p0 {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 1;
  filter: saturate(1.05) blur(0);
  z-index: 5;
}

/* ===== ESTADOS POR RADIO ===== */

/* =========================
   ESTADOS POR RADIO (AJUSTADOS)
========================= */

/* s1 */
#sf-s1:checked ~ .sf__slider .sf__c1 {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 1;
  z-index: 5;
}
#sf-s1:checked ~ .sf__slider .sf__c2 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-1)) scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s1:checked ~ .sf__slider .sf__c3 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-2)) scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s1:checked ~ .sf__slider .sf__c6 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-1) * -1))
    scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s1:checked ~ .sf__slider .sf__c5 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-2) * -1))
    scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s1:checked ~ .sf__slider .sf__c4 {
  opacity: 0;
  pointer-events: none;
}

/* s2 */
#sf-s2:checked ~ .sf__slider .sf__c2 {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 1;
  z-index: 5;
}
#sf-s2:checked ~ .sf__slider .sf__c3 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-1)) scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s2:checked ~ .sf__slider .sf__c4 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-2)) scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s2:checked ~ .sf__slider .sf__c1 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-1) * -1))
    scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s2:checked ~ .sf__slider .sf__c6 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-2) * -1))
    scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s2:checked ~ .sf__slider .sf__c5 {
  opacity: 0;
  pointer-events: none;
}

/* s3 */
#sf-s3:checked ~ .sf__slider .sf__c3 {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 1;
  z-index: 5;
}
#sf-s3:checked ~ .sf__slider .sf__c4 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-1)) scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s3:checked ~ .sf__slider .sf__c5 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-2)) scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s3:checked ~ .sf__slider .sf__c2 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-1) * -1))
    scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s3:checked ~ .sf__slider .sf__c1 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-2) * -1))
    scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s3:checked ~ .sf__slider .sf__c6 {
  opacity: 0;
  pointer-events: none;
}

/* s4 */
#sf-s4:checked ~ .sf__slider .sf__c4 {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 1;
  z-index: 5;
}
#sf-s4:checked ~ .sf__slider .sf__c5 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-1)) scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s4:checked ~ .sf__slider .sf__c6 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-2)) scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s4:checked ~ .sf__slider .sf__c3 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-1) * -1))
    scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s4:checked ~ .sf__slider .sf__c2 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-2) * -1))
    scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s4:checked ~ .sf__slider .sf__c1 {
  opacity: 0;
  pointer-events: none;
}

/* s5 */
#sf-s5:checked ~ .sf__slider .sf__c5 {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 1;
  z-index: 5;
}
#sf-s5:checked ~ .sf__slider .sf__c6 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-1)) scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s5:checked ~ .sf__slider .sf__c1 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-2)) scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s5:checked ~ .sf__slider .sf__c4 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-1) * -1))
    scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s5:checked ~ .sf__slider .sf__c3 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-2) * -1))
    scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s5:checked ~ .sf__slider .sf__c2 {
  opacity: 0;
  pointer-events: none;
}

/* s6 */
#sf-s6:checked ~ .sf__slider .sf__c6 {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 1;
  z-index: 5;
}
#sf-s6:checked ~ .sf__slider .sf__c1 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-1)) scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s6:checked ~ .sf__slider .sf__c2 {
  transform: translate(-50%, -50%) translateX(var(--sf-x-2)) scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s6:checked ~ .sf__slider .sf__c5 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-1) * -1))
    scale(1.05);
  opacity: 0.75;
  z-index: 4;
}
#sf-s6:checked ~ .sf__slider .sf__c4 {
  transform: translate(-50%, -50%) translateX(calc(var(--sf-x-2) * -1))
    scale(0.78);
  opacity: 0.25;
  z-index: 3;
}
#sf-s6:checked ~ .sf__slider .sf__c3 {
  opacity: 0;
  pointer-events: none;
}

/* ===== ESTADOS POR RADIO ===== */

/* =========================
   FLECHAS – LIMPIAS Y ESTABLES
========================= */

.sf__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;

  /* área clickeable cómoda */
  width: 88px;
  height: 88px;

  display: none; /* se activan por radio */
  align-items: center;
  justify-content: center;

  cursor: pointer;
  background: transparent;
}

/* posiciones */
.sf__nav--left {
  left: 24px;
}
.sf__nav--right {
  right: 24px;
}

/* flecha */
.sf__nav span {
  font-size: 64px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;

  /* importantísimo */
  pointer-events: none;
}

/* mostrar flechas activas */
#sf-s1:checked ~ .sf__slider .sf__p1,
#sf-s1:checked ~ .sf__slider .sf__n1,
#sf-s2:checked ~ .sf__slider .sf__p2,
#sf-s2:checked ~ .sf__slider .sf__n2,
#sf-s3:checked ~ .sf__slider .sf__p3,
#sf-s3:checked ~ .sf__slider .sf__n3,
#sf-s4:checked ~ .sf__slider .sf__p4,
#sf-s4:checked ~ .sf__slider .sf__n4,
#sf-s5:checked ~ .sf__slider .sf__p5,
#sf-s5:checked ~ .sf__slider .sf__n5,
#sf-s6:checked ~ .sf__slider .sf__p6,
#sf-s6:checked ~ .sf__slider .sf__n6 {
  display: flex;
}

.sf__nav span {
  color: #fff !important;
}

.sf__slider {
  z-index: 1;
}

.sf__folleto {
  position: relative;
  z-index: 2;
}
.sf__titulo {
  position: relative;
  z-index: 10;
  text-align: center;
  margin: 0 0 24px;
  font-size: clamp(22px, 3vw, 32px);
  color: #fbfafc;
  letter-spacing: 0.08em;
  font-weight: 800;
  margin-bottom: 30px;
}

.sf-folleto-scope {
  color: initial;
}