/* ==========================================================================
   GPE Network — Slider de portada

   Se carga solo en la portada (lo decide inc/slider.php), así que no pesa
   en el resto del sitio. Usa los mismos tokens que todo lo demás: si
   cambias la paleta en tokens.css, el slider cambia con ella.

   Transición por fundido, no por desplazamiento: aguanta mejor imágenes de
   proporciones distintas y no rompe si una diapositiva es más alta.
   ========================================================================== */

.gpe-slider {
  position: relative;
  isolation: isolate;
  background: var(--gpe-carbon);
  color: #fff;
  overflow: hidden;
}

/* Altura: cómoda en móvil, generosa en escritorio, nunca más alta que la
   pantalla menos el header. */
.gpe-slider__viewport {
  position: relative;
  display: grid;
  min-height: clamp(28rem, 76vh, 46rem);
}

/* Todas las diapositivas ocupan la misma celda del grid y se funden. */
.gpe-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity   var(--gpe-dur-slow) var(--gpe-ease-out),
    visibility 0s linear var(--gpe-dur-slow);
}

.gpe-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity   var(--gpe-dur-slow) var(--gpe-ease-out),
    visibility 0s;
}

/* --- Imagen de fondo ------------------------------------------------------ */
.gpe-slide__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(140deg, var(--gpe-wine-dark), var(--gpe-carbon) 55%, var(--gpe-emerald-dark));
}

.gpe-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Velo doble: uno vertical para asentar el texto abajo, otro plano para
   garantizar contraste AA sobre cualquier foto. */
.gpe-slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 16, 17, 0.92) 0%, rgba(15, 16, 17, 0.55) 38%, rgba(15, 16, 17, 0.15) 70%, rgba(15, 16, 17, 0.25) 100%),
    linear-gradient(to right, rgba(15, 16, 17, 0.45), rgba(15, 16, 17, 0.05));
}

/* --- Texto ---------------------------------------------------------------- */
.gpe-slide__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: var(--gpe-s9);
  padding-bottom: clamp(5rem, 11vw, 8.5rem);
}

/* Ojo: aquí no se puede usar «ch», porque se calcularía sobre el tamaño de
   texto de este contenedor (16px) y no sobre el del titular, que es mucho
   mayor. El resultado sería una columna de tres palabras de ancho. */
.gpe-slide__content {
  max-width: min(52rem, 100%);
}

.gpe-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--gpe-s4);
  font-family: var(--gpe-font-sans);
  font-size: var(--gpe-fs-xs);
  font-weight: 600;
  letter-spacing: var(--gpe-track-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.gpe-slide__eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--gpe-emerald);
  flex: none;
}

/* Escala propia del slider: un punto por debajo del hero, para que un
   titular largo siga cabiendo sin empujar los controles fuera de pantalla. */
.gpe-slide__title {
  margin: 0;
  max-width: 20ch;              /* aquí sí: «ch» sobre el tamaño del titular */
  font-family: var(--gpe-font-serif);
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 600;
  line-height: var(--gpe-lh-tight);
  letter-spacing: var(--gpe-track-tight);
  text-wrap: balance;
  color: #fff;
}

.gpe-slide__text {
  margin: var(--gpe-s5) 0 0;
  max-width: 54ch;
  font-size: var(--gpe-fs-md);
  line-height: var(--gpe-lh-body);
  color: rgba(255, 255, 255, 0.86);
}

.gpe-slide__actions {
  margin: var(--gpe-s6) 0 0;
}

/* Botón claro sobre foto oscura. */
.gpe-btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--gpe-carbon);
  --btn-bd: #fff;
}

.gpe-btn--light:hover {
  --btn-bg: var(--gpe-snow);
  --btn-bd: var(--gpe-snow);
  color: var(--gpe-carbon);
}

/* --- Controles ------------------------------------------------------------ */
.gpe-slider__controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1.5rem, 3.5vw, 2.75rem);
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gpe-s5);
}

.gpe-slider__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gpe-slider__dot {
  --dot-w: 1.5rem;
  appearance: none;
  border: 0;
  background: none;
  padding: 0.5rem 0.15rem;
  cursor: pointer;
  line-height: 0;
}

.gpe-slider__dot span {
  display: block;
  width: var(--dot-w);
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
  transition: background var(--gpe-dur) var(--gpe-ease), width var(--gpe-dur) var(--gpe-ease);
}

.gpe-slider__dot:hover span { background: rgba(255, 255, 255, 0.62); }

.gpe-slider__dot.is-active span {
  --dot-w: 3rem;
  background: #fff;
}

.gpe-slider__arrows {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gpe-slider__arrow {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--gpe-dur-fast) var(--gpe-ease), border-color var(--gpe-dur-fast) var(--gpe-ease);
}

.gpe-slider__arrow:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
}

.gpe-slider__arrow:focus-visible,
.gpe-slider__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* El icono de pausa / reanudar cambia según el estado del carrusel. */
.gpe-slider__icon-play  { display: none; }
.gpe-slider.is-paused .gpe-slider__icon-play  { display: block; }
.gpe-slider.is-paused .gpe-slider__icon-pause { display: none; }

/* --- Barra de avance ------------------------------------------------------ */
.gpe-slider__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
}

.gpe-slider__progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gpe-emerald);
  transform: scaleX(0);
  transform-origin: left center;
}

.gpe-slider__progress span.is-running {
  transform: scaleX(1);
  transition: transform linear var(--slider-duration, 7000ms);
}

/* --- Una sola diapositiva ------------------------------------------------- */
.gpe-slider--single .gpe-slide {
  opacity: 1;
  visibility: visible;
}

/* --- Móvil ---------------------------------------------------------------- */
@media (max-width: 40rem) {
  .gpe-slider__viewport { min-height: clamp(24rem, 82vh, 34rem); }
  .gpe-slide__content   { max-width: none; }
  .gpe-slide__inner     { padding-bottom: 6.5rem; }

  .gpe-slider__controls {
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .gpe-slider__arrow { width: 2.5rem; height: 2.5rem; }
}

/* --- Sin JavaScript ------------------------------------------------------- */
/* Si el script no llega a cargar, al menos se ve la primera diapositiva y
   los controles no quedan de adorno inútil. */
.no-js .gpe-slider__controls,
.no-js .gpe-slider__progress { display: none; }

/* --- Movimiento reducido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gpe-slide,
  .gpe-slide.is-active { transition: none; }
  .gpe-slider__progress { display: none; }
  .gpe-slider__dot span { transition: none; }
}

/* --- Impresión ------------------------------------------------------------ */
@media print {
  .gpe-slider__controls,
  .gpe-slider__progress { display: none !important; }
  .gpe-slider { background: none; color: var(--gpe-carbon); }
  .gpe-slide  { opacity: 1 !important; visibility: visible !important; }
}