/**
 * 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;
}

/* ── Efecto rollo de película (1.4.0) ──
   El banner del centro ocupa casi todo el ancho y a los lados asoma una franja de los
   vecinos. Sin JavaScript la pista ya arranca centrada en el primer banner (el que lleva
   «is-active» desde el servidor): se ve entero. Con JavaScript la posición llega en
   píxeles, en línea, y manda sobre esta. El sitio puede cambiar las dos variables. */
.fhs--rollo{
  --fhs-ancho:86%;
  --fhs-hueco:14px;
}
.fhs--rollo .fhs__track{
  gap:var(--fhs-hueco);
  transform:translateX(calc((100% - var(--fhs-ancho)) / 2));
}
.fhs--rollo .fhs__slide{
  flex:0 0 var(--fhs-ancho);
  border-radius:16px;
  overflow:hidden;
  opacity:.55;
  transform:scale(.94);
  transition:opacity .5s ease,transform .5s ease;
  cursor:pointer;
}
.fhs--rollo .fhs__slide.is-active{
  opacity:1;
  transform:scale(1);
  cursor:auto;
}
/* Un clic en lo que asoma a los lados lleva a ese banner. Las copias del bucle son
   inertes y el clic las atraviesa hasta el visor: la mano se pone también ahí. */
.fhs.fhs--rollo .fhs__viewport{
  cursor:pointer;
  /* El gesto horizontal es del slider: sin esto, deslizar hacia la derecha en una pantalla
     táctil puede disparar el «atrás» del navegador. El desplazamiento vertical de la página
     y el zoom con dos dedos siguen siendo del navegador. */
  touch-action:pan-y pinch-zoom;
}
/* Un solo banner vigente (1.4.1): no hay vecinos a los que ir, así que sin la mano. */
.fhs.fhs--uno .fhs__viewport{cursor:auto}
/* Salto sin transición: al volver de una copia al banner real y al recolocar. */
.fhs--rollo.is-salto .fhs__track,
.fhs--rollo.is-salto .fhs__slide{transition:none}
/* Foco del teclado en el banner del centro. Las esquinas redondeadas (overflow:hidden)
   recortan el recuadro de foco del enlace, que se pinta por fuera: sin esto no se ve dónde
   está el teclado. El anillo va por dentro y en dos tonos, para que destaque sobre
   cualquier imagen. Donde el navegador no entiende :has(), se usa :focus-within. */
.fhs--rollo .fhs__slide:has(.fhs__link:focus-visible)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  box-shadow:inset 0 0 0 4px var(--fhs-activo),inset 0 0 0 7px #1B3049;
  pointer-events:none;
}
@supports not selector(:has(*)){
  .fhs--rollo .fhs__slide:focus-within::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    border-radius:inherit;
    box-shadow:inset 0 0 0 4px var(--fhs-activo),inset 0 0 0 7px #1B3049;
    pointer-events:none;
  }
}
@media (max-width:680px){
  .fhs--rollo{--fhs-ancho:92%}
}

/* ── Reset de botones ──
   Los temas y Elementor aplican sus propios estilos a <button> con alta
   especificidad (bordes, relleno, fondo), y deformarían los controles.
   Aquí se neutralizan antes de aplicar los estilos del slider. */
.fhs button.fhs__btn,
.fhs button.fhs__dot,
.fhs button.fhs__pause{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:0 !important;
  outline:0;
  margin:0 !important;
  padding:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  font:inherit;
  line-height:1 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-decoration:none !important;
  cursor:pointer;
  box-shadow:none;
}

/* ── Flechas ── */
.fhs button.fhs__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.94) !important;
  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 button.fhs__btn,
.fhs button.fhs__btn:focus-visible{opacity:1}
.fhs button.fhs__btn:hover{
  background:#fff !important;
  transform:translateY(-50%) scale(1.07);
}
.fhs button.fhs__btn--prev{left:18px;right:auto}
.fhs button.fhs__btn--next{right:18px;left:auto}
.fhs button.fhs__btn svg{
  width:22px;height:22px;
  stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  display:block;
}

/* ── 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 button.fhs__dot{
  width:14px !important;
  height:14px !important;
  flex:0 0 auto;
  border-radius:50% !important;
  background:rgba(255,255,255,.5) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:background-color .22s ease,width .22s ease;
}
.fhs button.fhs__dot:hover{background:rgba(255,255,255,.85) !important}
.fhs button.fhs__dot[aria-current="true"]{
  background:var(--fhs-activo) !important;
  width:34px !important;
  border-radius:100px !important;
}

.fhs button.fhs__pause{
  width:38px !important;
  height:38px !important;
  flex:0 0 auto;
  border-radius:50% !important;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.35) !important;
  color:#fff;
  transition:background-color .2s ease;
}
.fhs button.fhs__pause:hover{background:rgba(0,0,0,.6) !important}
.fhs button.fhs__pause svg{
  width:14px;height:14px;
  fill:currentColor;stroke:none;
  display:block;
}

/* ── Franja con texto (1.3.0) ── */
.fhs__bar--cap{
  left:0;right:0;bottom:0;transform:none;
  border-radius:0;justify-content:space-between;gap:20px;
  padding:14px 22px;
}
.fhs__ctrls{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.fhs__cap{display:grid;gap:2px;min-width:0;color:#fff}
.fhs__cap-k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.fhs__cap-t{font-size:18px;font-weight:700;line-height:1.2}
.fhs__cap-s{font-size:14px;opacity:.85}
.fhs__cap-s:empty{display:none}
.fhs__cap.is-swap .fhs__cap-t,.fhs__cap.is-swap .fhs__cap-s{animation:fhs-sube .45s ease both}
@keyframes fhs-sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fhs__num{font-size:12px;font-weight:700;letter-spacing:.1em;color:#fff;white-space:nowrap}
.fhs__cta{
  display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:100px;
  background:var(--fhs-activo);color:#1B3049;font-weight:700;font-size:14px;text-decoration:none;
  white-space:nowrap;
}
.fhs__cta:hover{filter:brightness(1.05)}

/* Foco visible reforzado */
.fhs :focus-visible{
  outline:4px solid var(--fhs-activo);
  outline-offset:3px;
  border-radius:8px;
}
/* Foco en la sección entera (1.4.1): va ahí con las flechas del teclado cuando el banner
   nuevo no tiene enlace. El contenedor del hero recorta todo lo que sale de la sección, y el
   recuadro de foco se pinta por fuera: el anillo va por dentro, como el de los banners. */
.fhs[tabindex="-1"]:focus-visible::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:inherit;
  box-shadow:inset 0 0 0 4px var(--fhs-activo),inset 0 0 0 7px #1B3049;
  pointer-events:none;
}

.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 button.fhs__btn{display:none}   /* en táctil se navega deslizando */
  .fhs__bar{bottom:12px;gap:11px;padding:8px 14px}
  .fhs button.fhs__dot{width:11px !important;height:11px !important}
  .fhs button.fhs__dot[aria-current="true"]{width:26px !important}
  .fhs button.fhs__pause{width:34px !important;height:34px !important}
  .fhs__bar--cap{flex-direction:column;align-items:flex-start;padding:12px 16px}
  /* Si el botón, los puntos, el contador y la pausa no caben en una fila, saltan de línea
     en vez de salirse de la pantalla (1.4.1). Donde caben, nada cambia. */
  .fhs__ctrls{width:100%;justify-content:space-between;flex-wrap:wrap;row-gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .fhs__track{transition-duration:.01ms}
  .fhs--fade .fhs__slide{transition-duration:.01ms}
  .fhs--rollo .fhs__slide{transition:none}
  .fhs__cap.is-swap .fhs__cap-t,.fhs__cap.is-swap .fhs__cap-s{animation:none}
}