/* =====================================================
   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)); }
/* Un 20 % bajo el h1 (55 → 44px). El ch se encoge con la letra, así que
   40ch mantienen los ≈880px del bloque de título del diseño (2 líneas). */
.fpuc-hero--home .fpuc-hero__title {
  max-width: 40ch;
  font-size: calc(var(--fpuc-text-h1) * 0.8);
  line-height: var(--fpuc-leading-h1);
  text-transform: none;
}
/* Velo más denso que el de proyectos (55 %): 75 % sobre la foto. */
.fpuc-hero--home::before {
  background: color-mix(in srgb, var(--fpuc-overlay) 75%, transparent);
}

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

/* Tarjetas de programa: título semibold, dos veces un 20 % bajo el tamaño
   de tarjeta y luego un 15 % arriba (40 → 32 → 25.6 → 29.4px). Sólo aquí;
   las de imagen de Nosotros siguen igual. */
.fpuc-home-programas .fpuc-card--image .fpuc-card__title {
  font-size: calc(var(--fpuc-text-h2-sm) * 0.736);
  font-weight: var(--fpuc-weight-semibold);
}
/* En vez de partir en cada palabra (el min-content general), un ancho tope:
   así "en Educación" va junta y los nombres de dos palabras siguen en dos
   líneas. Medido en Signika 600: "en Educación" 5.73em, "Permanencia en"
   6.90em, la palabra más ancha ("Permanencia") 5.63em. 6.3em cae en medio. */
.fpuc-home-programas .fpuc-card--image .fpuc-card__body.has-accent .fpuc-card__title {
  width: auto;
  max-width: 6.3em;
}
/* Velo un 20 % más oscuro que el general (85 % abajo → nada al 70 % de alto):
   abajo llega al 100 % y ya no se aclara del todo, arriba queda un 20 %. */
.fpuc-home-programas .fpuc-card--image::before {
  background: linear-gradient(to top,
    var(--fpuc-overlay) 0%,
    color-mix(in srgb, var(--fpuc-overlay) 20%, transparent) 100%);
}

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


/* --- Plataforma Conócete -----------------------------------------------
   La línea gris que cierra la sección es `fpuc-section--divider`, en la
   plantilla: cruza la pantalla entera, así que no hay nada que ajustar aquí. */

/* El panel lleva más aire por dentro que el resto (96 arriba y abajo en el
   diseño, contra los 64 del componente). */
.fpuc-home-plataforma .fpuc-panel { padding-block: var(--fpuc-space-9); }

/* La bajada va en negrita y a medida corta: en el diseño cae en tres líneas,
   no en dos que crucen el panel entero. Si el texto cambia desde el admin, la
   medida es lo único que hay que mover. */
.fpuc-home-plataforma .fpuc-panel__text {
  max-width: 32ch;
  font-size: var(--fpuc-text-22);
  font-weight: var(--fpuc-weight-semibold);
}

/* Los dos botones van uno al lado del otro, sin partirse. */
.fpuc-home-plataforma .fpuc-panel__actions .fpuc-btn { white-space: nowrap; }

/* --- Noticias ----------------------------------------------------------
   Fecha más apretada, titular en versales y semibold cortado a tres líneas,
   y el botón centrado. El titular reserva siempre sus tres líneas, así los
   botones quedan a la misma altura aunque un título sea más corto. */
.fpuc-home-noticias .fpuc-card--news .fpuc-card__date {
  letter-spacing: var(--fpuc-tracking-caps);
}
.fpuc-home-noticias .fpuc-card--news .fpuc-card__title {
  font-weight: var(--fpuc-weight-semibold);
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: calc(3em * var(--fpuc-leading-title));
}
.fpuc-home-noticias .fpuc-card--news .fpuc-btn { justify-self: center; }

@media (max-width: 900px) {
  /* El apilado del componente baja el padding a 29; estas reglas ganan por
     especificidad, así que hay que devolverlo aquí. */
  .fpuc-home-plataforma .fpuc-panel { padding-block: var(--fpuc-space-6); }
  .fpuc-home-plataforma .fpuc-panel__text { font-size: var(--fpuc-text-body-lg); }
}