/* =====================================================
   FPUC — Página: Home (front-page.php)
   -----------------------------------------------------
   Hero de portada y su carrusel.

   Sólo var(--fpuc-*): ni un hex ni un tamaño literal.
   ===================================================== */


/* El hero de portada lleva el header encima, así que necesita aire arriba. */
.fpuc-hero--home { padding-top: calc(var(--fpuc-space-9) + var(--fpuc-header-height)); }
/* 32ch ≈ 880px al tamaño h1, que es lo que mide el bloque de título en el
   diseño (2 líneas). Con menos rompe en 3. */
.fpuc-hero--home .fpuc-hero__title {
  max-width: 32ch;
  font-size: var(--fpuc-text-h1);
  line-height: var(--fpuc-leading-h1);
  text-transform: none;
}

/* --- Programas ---------------------------------------------------------
   El título va en versales y con más tracking que el resto de secciones
   (y1930). Se hace por CSS y no escribiendo "PROGRAMAS" en el campo: así en
   el admin se lee normal y cambiar el criterio no obliga a reeditar textos. */
.fpuc-home-programas .fpuc-section-header__title {
  text-transform: uppercase;
  letter-spacing: var(--fpuc-tracking-caps);
}

/* --- Carrusel del hero -------------------------------------------------
   Los slides se apilan en la misma celda de grid y se cruzan con opacidad,
   así el alto lo marca el slide más alto y no salta al cambiar. */
.fpuc-hero-slider { position: relative; }

.fpuc-hero-slider__track { display: grid; }
.fpuc-hero-slider__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 400ms ease;
}
.fpuc-hero-slider__slide.is-active { opacity: 1; visibility: visible; }

/* Con un solo slide no hay transición que hacer. */
.fpuc-hero-slider:not(.is-multi) .fpuc-hero-slider__slide {
  opacity: 1;
  visibility: visible;
}

.fpuc-hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--fpuc-radius-pill);
  background: color-mix(in srgb, var(--fpuc-white) 15%, transparent);
  color: var(--fpuc-text-on-dark);
  font-size: var(--fpuc-text-h3);
  line-height: var(--fpuc-leading-none);
  cursor: pointer;
  transition: background-color var(--fpuc-transition);
  z-index: 2;
}
.fpuc-hero-slider__arrow:hover { background: color-mix(in srgb, var(--fpuc-white) 30%, transparent); }
.fpuc-hero-slider__arrow:focus-visible {
  outline: 3px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}
.fpuc-hero-slider__arrow--prev { left: var(--fpuc-space-5); }
.fpuc-hero-slider__arrow--next { right: var(--fpuc-space-5); }

.fpuc-hero-slider__dots {
  position: absolute;
  left: 50%;
  bottom: var(--fpuc-space-7);
  transform: translateX(-50%);
  display: flex;
  gap: var(--fpuc-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}
.fpuc-hero-slider__dot {
  width: 28px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: var(--fpuc-radius-pill);
  background: var(--fpuc-white);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity var(--fpuc-transition);
}
.fpuc-hero-slider__dot.is-active { opacity: 1; }
.fpuc-hero-slider__dot:focus-visible {
  outline: 2px solid var(--fpuc-focus-ring);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .fpuc-hero-slider__arrow { width: 40px; height: 40px; }
  .fpuc-hero-slider__arrow--prev { left: var(--fpuc-space-2); }
  .fpuc-hero-slider__arrow--next { right: var(--fpuc-space-2); }
}

/* Sin animación para quien la haya desactivado en el sistema. */
@media (prefers-reduced-motion: reduce) {
  .fpuc-hero-slider__slide { transition: none; }
}