/* =========================================================================
   Componente: Slider centros  [ciaries_slider_centros]
   ========================================================================= */

.c-centros {
  --c-centros-from: var(--dark, #083e40);
  --c-centros-to: var(--secondary, #c6923a);
  --c-centros-dot: #b5e6e4;
  --c-centros-dot-active: var(--accent, #12a5ab);
  --c-centros-text: var(--light, #f6f4ec);
  --c-centros-radius: calc(12 / 1440 * 100vw);
  --c-centros-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'dots  media'
    'desc  media'
    'title title';
  column-gap: calc(60 / 1440 * 100vw);
  padding: calc(44 / 1440 * 100vw) calc(36 / 1440 * 100vw) calc(64 / 1440 * 100vw) calc(60 / 1440 * 100vw);
  border-radius: var(--c-centros-radius);
  background: linear-gradient(70deg, var(--c-centros-from) 30%, var(--c-centros-to) 115%);
  color: var(--c-centros-text);
  overflow: hidden;
  isolation: isolate;
}

/* ---- Dots ----------------------------------------------------------------
   Selectores con .c-centros delante: Salient aplica a todos los button
   (body[data-button-style*="slightly_rounded"] button) su propia transición sin
   width y un radio de 4px; así los superamos. */
.c-centros .c-centros__dots {
  grid-area: dots;
  display: flex;
  gap: calc(8 / 1440 * 100vw);
  align-self: start;
}

.c-centros .c-centros__dot {
  --dot-ease: cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  width: calc(38 / 1440 * 100vw);
  /* Altura en píxeles enteros: con decimales el relleno dejaba una línea del fondo */
  height: calc(8 / 1440 * 100vw);
  height: max(6px, round(calc(8 / 1440 * 100vw), 1px));
  padding: 0;
  border: 0;
  /* Salient fuerza 4px con !important en todos los button (estilo "slightly rounded") */
  border-radius: 999px !important;
  background: var(--c-centros-dot);
  cursor: pointer;
  overflow: hidden;
  transition:
    width 0.7s var(--dot-ease),
    opacity 0.3s;
}

/* zona de toque más grande sin cambiar el tamaño visual */
.c-centros .c-centros__dot::before {
  content: '';
  position: absolute;
  inset: -12px -4px;
}

.c-centros .c-centros__dot:hover {
  opacity: 0.8;
}

.c-centros .c-centros__dot:focus-visible {
  outline: 2px solid var(--c-centros-text);
  outline-offset: 3px;
}

.c-centros .c-centros__dot.is-active {
  width: calc(84 / 1440 * 100vw);
}

/* Relleno: se recorta con clip-path redondeado (no scaleX, que aplastaba el redondeo).
   Sobresale 1px por cada lado; el overflow del dot lo recorta y tapa cualquier resto. */
.c-centros .c-centros__dot-fill {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--c-centros-dot-active);
  clip-path: inset(0 0 0 0 round 999px);
  opacity: 0;
  transition: opacity 0.35s var(--dot-ease);
}

.c-centros .c-centros__dot.is-active .c-centros__dot-fill {
  opacity: 1;
  transition: none;
}

/* Con autoplay, la barra activa hace de temporizador */
.c-centros[data-autoplay='true'] .c-centros__dot.is-active .c-centros__dot-fill {
  animation: c-centros-progress var(--c-centros-interval, 6s) linear forwards;
}

.c-centros.is-paused .c-centros__dot.is-active .c-centros__dot-fill,
.c-centros:hover .c-centros__dot.is-active .c-centros__dot-fill,
.c-centros:has(:focus-visible) .c-centros__dot.is-active .c-centros__dot-fill {
  animation-play-state: paused;
}

@keyframes c-centros-progress {
  from {
    clip-path: inset(0 100% 0 0 round 999px);
  }
  to {
    clip-path: inset(0 0 0 0 round 999px);
  }
}

/* ---- Capas apiladas (todas las slides en la misma celda) ------------------ */
.c-centros__desc,
.c-centros__media,
.c-centros__title {
  display: grid;
}

.c-centros__item {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(16 / 1440 * 100vw));
  transition:
    opacity 0.6s var(--c-centros-ease),
    transform 0.8s var(--c-centros-ease),
    visibility 0s linear 0.8s;
}

.c-centros__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.15s, 0.15s, 0s;
}

/* ---- Descripción ---------------------------------------------------------- */
.c-centros__desc {
  grid-area: desc;
  align-content: start;
  padding-top: calc(110 / 1440 * 100vw);
}

.c-centros__desc .c-centros__item {
  max-width: 12em;
  font-family: var(--primary-font, sans-serif);
  font-size: calc(22 / 1440 * 100vw);
  font-weight: 400;
  line-height: 1.2;
  color: inherit;
  padding: 0;
}

/* ---- Imagen --------------------------------------------------------------- */
.c-centros__media {
  grid-area: media;
  aspect-ratio: 642 / 495;
  border-radius: calc(10 / 1440 * 100vw);
  overflow: hidden;
}

.c-centros__figure {
  transform: scale(1.04);
  transition:
    opacity 0.8s var(--c-centros-ease),
    transform 1.2s var(--c-centros-ease),
    visibility 0s linear 1.2s;
}

.c-centros__figure.is-active {
  transform: none;
  transition-delay: 0s;
}

.c-centros__img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* ---- Título --------------------------------------------------------------- */
.c-centros__title {
  grid-area: title;
  margin-top: calc(22 / 1440 * 100vw);
}

.c-centros__title .c-centros__item {
  font-family: var(--secondary-font, serif);
  font-size: calc(46 / 1440 * 100vw);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: inherit;
  padding: 0;
}

/* ---- Móvil ---------------------------------------------------------------- */
@media (max-width: 1000px) {
  .c-centros {
    --c-centros-radius: calc(12 / 390 * 100vw);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      'dots'
      'media'
      'desc'
      'title';
    row-gap: calc(20 / 390 * 100vw);
    padding: calc(24 / 390 * 100vw) calc(20 / 390 * 100vw) calc(32 / 390 * 100vw);
    background: linear-gradient(160deg, var(--c-centros-from) 35%, var(--c-centros-to) 130%);
  }

  .c-centros .c-centros__dots {
    gap: calc(6 / 390 * 100vw);
  }
  .c-centros .c-centros__dot {
    width: calc(22 / 390 * 100vw);
    height: calc(6 / 390 * 100vw);
    height: max(5px, round(calc(6 / 390 * 100vw), 1px));
  }
  .c-centros .c-centros__dot.is-active {
    width: calc(48 / 390 * 100vw);
  }

  .c-centros__media {
    border-radius: calc(8 / 390 * 100vw);
  }

  .c-centros__desc {
    padding-top: 0;
  }
  .c-centros__desc .c-centros__item {
    max-width: none;
    font-size: calc(20 / 390 * 100vw);
  }

  .c-centros__title {
    margin-top: 0;
  }
  .c-centros__title .c-centros__item {
    font-size: calc(44 / 390 * 100vw);
  }

  .c-centros__item {
    transform: translateY(calc(10 / 390 * 100vw));
  }
}

/* ---- Movimiento reducido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .c-centros__item,
  .c-centros__figure,
  .c-centros .c-centros__dot {
    transform: none !important;
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }

  .c-centros[data-autoplay] .c-centros__dot.is-active .c-centros__dot-fill {
    animation: none;
    clip-path: inset(0 0 0 0 round 999px);
  }
}