/**
 * Fondecom Hero Slider — NOVA
 * Sin librerías. Los colores llegan como variables desde los ajustes.
 */

.fhs{
  --fhs-activo:#FFD558;
  --fhs-control:#3B67A1;
  --fhs-ratio:1920/784;

  position:relative;
  overflow:hidden;
  background:#1B3049;
}

.fhs__viewport{overflow:hidden}

.fhs__track{
  display:flex;
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.fhs__slide{flex:0 0 100%;min-width:0;position:relative}
.fhs__link{display:block;line-height:0}

.fhs__img{
  width:100%;
  height:auto;
  aspect-ratio:var(--fhs-ratio);
  object-fit:cover;
  display:block;
  background:#24405F;
}

/* ── Efecto fundido ── */
.fhs--fade .fhs__track{
  display:grid;
  transition:none;
}
.fhs--fade .fhs__slide{
  grid-area:1/1;
  opacity:0;
  transition:opacity .55s ease;
  pointer-events:none;
}
.fhs--fade .fhs__slide.is-active{
  opacity:1;
  pointer-events:auto;
}

/* ── Flechas ── */
.fhs__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:56px;height:56px;
  border:0;border-radius:50%;
  padding:0;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.94);
  color:var(--fhs-control);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  opacity:.92;
  transition:background-color .2s ease,transform .2s ease,opacity .2s ease;
}
.fhs:hover .fhs__btn,
.fhs__btn:focus-visible{opacity:1}
.fhs__btn:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.fhs__btn--prev{left:18px}
.fhs__btn--next{right:18px}
.fhs__btn svg{
  width:22px;height:22px;
  stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ── Barra de controles ── */
.fhs__bar{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 18px;
  border-radius:100px;
  background:rgba(17,26,36,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.fhs__dots{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.fhs__dot{
  width:14px;height:14px;
  padding:0;border:0;cursor:pointer;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:background-color .22s ease,width .22s ease;
}
.fhs__dot:hover{background:rgba(255,255,255,.8)}
.fhs__dot[aria-current="true"]{
  background:var(--fhs-activo);
  width:34px;
  border-radius:100px;
}

.fhs__pause{
  width:38px;height:38px;
  padding:0;border:0;cursor:pointer;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.32);
  color:#fff;
  transition:background-color .2s ease;
}
.fhs__pause:hover{background:rgba(0,0,0,.55)}
.fhs__pause svg{width:14px;height:14px;fill:currentColor}

/* Foco visible reforzado */
.fhs :focus-visible{
  outline:4px solid var(--fhs-activo);
  outline-offset:3px;
  border-radius:8px;
}

.fhs-aviso{
  padding:16px 20px;
  border-radius:10px;
  background:#FFF8E1;
  border:1px solid #FFD558;
  color:#6b4f0a;
  font-size:15px;
}

.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Móvil ── */
@media (max-width:767px){
  /* Si hay imagen vertical cargada, la proporción cambia */
  .fhs:has(picture source) .fhs__img{--fhs-ratio:800/1000}

  .fhs__btn{display:none}       /* en táctil se navega deslizando */
  .fhs__bar{bottom:12px;gap:11px;padding:8px 14px}
  .fhs__dot{width:11px;height:11px}
  .fhs__dot[aria-current="true"]{width:26px}
  .fhs__pause{width:34px;height:34px}
}

@media (prefers-reduced-motion:reduce){
  .fhs__track{transition-duration:.01ms}
  .fhs--fade .fhs__slide{transition-duration:.01ms}
}