/* ==================================================
   Variables y estructura general
================================================== */

.slider {
  --carousel-blue: #CEEBEE;
  --carousel-blue-light: #EAF7F9;
  --carousel-blue-soft: #DDF1F5;
  --carousel-navy: #2C306C;
  --carousel-accent: #585684;
  --carousel-accent-dark: #45436F;
  --carousel-white: #FFFFFF;
  --carousel-dot-size: 18px;

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 8px auto;

  overflow: hidden;

  font: 16px/1.5 Roboto, "Helvetica Neue", Arial, sans-serif;

  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slider,
.slider *,
.slider *::before,
.slider *::after {
  box-sizing: border-box;
}

.slider * {
  margin: 0;
  padding: 0;
}

.slider-container,
.carousel-topics-panel,
.carousel-body,
.slides,
.slide,
.slide-grid,
.slide-copy,
.slide-media {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.slide-copy,
.slide-media {
  overflow: hidden;
}

.slide-media img {
  max-width: 100%;
  height: auto;
}

/* ==================================================
   Contenedor principal
================================================== */

.slider-container {
  position: relative;

  width: 100%;
  max-width: 100%;

  overflow: hidden;

  border: 2px solid rgba(95, 143, 205, .32);
  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      #EDF8FA 0%,
      #DDEFF5 42%,
      #D1E8F3 72%,
      #D8E6F8 100%
    );

  box-shadow:
    0 10px 26px rgba(44, 48, 108, .11),
    inset 0 0 0 5px rgba(255, 255, 255, .48);
}

/* ==================================================
   Panel superior
================================================== */

.carousel-topics-panel {
  position: relative;

  width: calc(100% - 52px);

  margin: 18px auto 0;
  padding: 14px 22px 16px;

  overflow: hidden;

  border: 1px solid rgba(96, 151, 210, .34);
  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .56) 0%,
      rgba(235, 247, 251, .62) 100%
    );

  box-shadow:
    0 6px 14px rgba(44, 48, 108, .07),
    inset 0 1px 0 rgba(255, 255, 255, .85);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.carousel-topics-title {
  position: relative;
  z-index: 2;

  margin-bottom: 10px;

  color: var(--carousel-navy);

  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
}

/* ==================================================
   Decoración superior
================================================== */

.carousel-topics-decoration {
  position: absolute;
  right: 0;
  bottom: 0;

  width: 36%;
  height: 85%;

  opacity: .28;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 78% 38%,
      transparent 0 24px,
      rgba(69, 122, 182, .22) 25px 27px,
      transparent 28px
    ),
    radial-gradient(
      circle at 90% 38%,
      transparent 0 15px,
      rgba(69, 122, 182, .18) 16px 18px,
      transparent 19px
    ),
    linear-gradient(
      to top,
      rgba(77, 132, 188, .22) 0 2px,
      transparent 2px
    );

  mask-image:
    linear-gradient(
      to left,
      #000 0%,
      rgba(0, 0, 0, .9) 60%,
      transparent 100%
    );

  -webkit-mask-image:
    linear-gradient(
      to left,
      #000 0%,
      rgba(0, 0, 0, .9) 60%,
      transparent 100%
    );
}

/* ==================================================
   Etiquetas
================================================== */

.carousel-topics {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 100%;

  overflow: hidden;
}

.carousel-topics-track {
  display: flex;
  flex-wrap: wrap;

  align-items: stretch;
  justify-content: flex-start;

  gap: 8px 12px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow: hidden;
}

.carousel-topic {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 35px;

  padding: 7px 16px;

  border: 1px solid rgba(73, 104, 160, .20);
  border-radius: 8px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .94) 0%,
      rgba(247, 250, 253, .92) 100%
    );

  color: var(--carousel-navy);

  box-shadow:
    0 3px 7px rgba(44, 48, 108, .08);

  cursor: pointer;

  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
  white-space: nowrap;

  transition:
    color .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.carousel-topic:hover {
  border-color: rgba(88, 86, 132, .48);

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #EEF2FA 100%
    );

  box-shadow:
    0 5px 11px rgba(44, 48, 108, .13);

  transform: translateY(-1px);
}

.carousel-topic.is-active {
  border-color: var(--carousel-navy);

  background:
    linear-gradient(
      135deg,
      #354E9A 0%,
      #283E87 50%,
      #172E74 100%
    );

  color: #FFFFFF;

  box-shadow:
    0 6px 13px rgba(29, 47, 116, .27);

  transform: translateY(-1px);
}

.carousel-topic:focus-visible {
  outline: 3px solid rgba(44, 48, 108, .28);
  outline-offset: 3px;
}

/* ==================================================
   Área principal
================================================== */

.carousel-body {
  position: relative;

  width: 100%;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(230, 247, 250, .96) 0%,
      rgba(203, 233, 241, .92) 48%,
      rgba(196, 220, 241, .90) 100%
    );
}

.carousel-body::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .28;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(44, 48, 108, .04) 0 1px,
      transparent 1px 11px
    );
}

/* ==================================================
   Decoración del área principal
================================================== */

.carousel-body-decoration {
  position: absolute;
  inset: 0;

  pointer-events: none;

  overflow: hidden;
}

.carousel-body-decoration::before {
  content: "";

  position: absolute;
  left: -90px;
  bottom: -90px;

  width: 310px;
  height: 310px;

  opacity: .26;

  background:
    radial-gradient(
      circle at center,
      transparent 0 52%,
      rgba(83, 150, 197, .18) 53% 54%,
      transparent 55% 65%,
      rgba(83, 150, 197, .15) 66% 67%,
      transparent 68%
    );
}

.carousel-body-decoration::after {
  content: "";

  position: absolute;
  right: -100px;
  bottom: -140px;

  width: 360px;
  height: 360px;

  border: 1px solid rgba(88, 86, 132, .12);
  border-radius: 50%;

  box-shadow:
    0 0 0 24px rgba(88, 86, 132, .025),
    0 0 0 48px rgba(88, 86, 132, .022),
    0 0 0 72px rgba(88, 86, 132, .018);
}

/* ==================================================
   Slides
================================================== */

.slides {
  position: relative;
  z-index: 2;

  width: 100%;

  padding: 4px 30px 0;
}

.slide {
  display: none;

  width: 100%;
  max-width: 100%;
}

.slide.is-active {
  display: block;
}

.slide-grid {
  display: grid;

  grid-template-columns: 1fr;

  grid-template-areas:
    "copy"
    "media";

  align-items: center;

  gap: clamp(16px, 2.4vw, 34px);

  min-height: 330px;

  padding:
    18px
    8px
    10px;

  opacity: 0;
  transform: translateY(10px);
}

.carousel-ready .slide.is-active .slide-grid {
  animation: carousel-slide-in .45s ease forwards;
}

@keyframes carousel-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ==================================================
   Escritorio: 60% texto y 40% imagen
================================================== */

@media (min-width: 1024px) {
  .slide-grid {
    grid-template-columns:
      minmax(0, 3fr)
      minmax(0, 2fr);

    grid-template-areas:
      "copy media";

    min-height: 340px;

    padding:
      22px
      12px
      12px;
  }
}

/* ==================================================
   Texto del anuncio
================================================== */

.slide-copy {
  grid-area: copy;

  width: 100%;
  max-width: 760px;

  padding-left: clamp(4px, 2vw, 28px);

  justify-self: start;
}

.slide-title {
  margin-bottom: 10px;

  color: #183781;

  font-family: "Arial Black", Arial, sans-serif;

  font-size:
    clamp(
      1.45rem,
      2.1vw,
      2.15rem
    );

  font-weight: 700;
  line-height: 1.1;

  letter-spacing: -.3px;
}

.slide-text {
  max-width: 66ch;

  margin-bottom: 6px;

  color: #244078;

  font-size:
    clamp(
      .88rem,
      1vw,
      1rem
    );

  line-height: 1.45;

  text-align: left;

  overflow-wrap: anywhere;
}

/* ==================================================
   Botón del anuncio
================================================== */

.slide-link,
.slide-link:link,
.slide-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-top: 12px;
  padding: 10px 18px;

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      #344E9A 0%,
      #1C3A87 100%
    );

  color: #FFFFFF !important;

  box-shadow:
    0 7px 15px rgba(28, 58, 135, .22);

  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;

  transition:
    background-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.slide-link:hover,
.slide-link:focus,
.slide-link:active {
  color: #FFFFFF !important;

  box-shadow:
    0 9px 19px rgba(28, 58, 135, .28);

  transform: translateY(-1px);
}

.slide-link:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .88);
  outline-offset: 3px;
}

.slide-link-arrow {
  font-size: 1.45rem;
  font-weight: 400;
  line-height: .8;
}

/* ==================================================
   Imagen
================================================== */

.slide-media {
  grid-area: media;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
}

.slide-media img {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 330px;

  border-radius: 13px;

  object-fit: contain;

  box-shadow:
    0 9px 21px rgba(27, 52, 91, .18);
}

/* ==================================================
   Controles inferiores
================================================== */

.slider-footer {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 22px;

  width: 100%;

  padding:
    4px
    22px
    18px;
}

/* ==================================================
   Botón reproducir/pausar
================================================== */

.carousel-play-toggle {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 38px;

  margin: 0;
  padding: 8px 16px;

  border: 1px solid rgba(43, 75, 134, .18);
  border-radius: 999px;

  background-color: rgba(255, 255, 255, .94);
  color: var(--carousel-navy);

  box-shadow:
    0 4px 10px rgba(44, 48, 108, .11);

  cursor: pointer;

  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1;
}

.carousel-play-toggle:hover {
  background-color: #FFFFFF;

  box-shadow:
    0 6px 14px rgba(44, 48, 108, .15);
}

.carousel-play-toggle:focus-visible {
  outline: 3px solid rgba(44, 48, 108, .26);
  outline-offset: 3px;
}

.carousel-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 14px;

  color: #1D438B;

  font-size: .76rem;
  line-height: 1;
}

/* ==================================================
   Indicadores
================================================== */

.slider-controls {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;

  align-items: center;
  justify-content: center;

  gap: 10px;

  width: auto;

  margin: 0;
  padding: 0;
}

.slider .slider-dot {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: block !important;

  flex:
    0
    0
    var(--carousel-dot-size) !important;

  width: var(--carousel-dot-size) !important;
  min-width: var(--carousel-dot-size) !important;
  max-width: var(--carousel-dot-size) !important;

  height: var(--carousel-dot-size) !important;
  min-height: var(--carousel-dot-size) !important;
  max-height: var(--carousel-dot-size) !important;

  aspect-ratio: 1 / 1;

  margin: 0 !important;
  padding: 0 !important;

  border:
    2px
    solid
    rgba(255, 255, 255, .86) !important;

  border-radius: 50% !important;

  background-color:
    rgba(255, 255, 255, .94) !important;

  background-image: none !important;

  box-shadow:
    0 2px 7px rgba(33, 59, 112, .16);

  cursor: pointer;

  font-size: 0 !important;
  line-height: 0 !important;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.slider .slider-dot:hover {
  transform: scale(1.12);
}

.slider .slider-dot.is-active {
  border-color:
    rgba(255, 255, 255, .92) !important;

  background-color: #244894 !important;

  box-shadow:
    0
    0
    0
    3px
    rgba(36, 72, 148, .16);
}

.slider .slider-dot:focus-visible {
  outline:
    3px
    solid
    rgba(44, 48, 108, .30);

  outline-offset: 3px;
}

/* ==================================================
   Móvil y tablet vertical
================================================== */

@media (max-width: 1023.98px) {
  /* Contenedor principal */

  .slider {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 8px auto !important;

    overflow: hidden !important;
  }

  .slider-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    border-radius: 18px;

    overflow: hidden !important;
  }

  .carousel-body,
  .slides,
  .slide,
  .slide-grid,
  .slide-copy,
  .slide-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Panel superior */

  .carousel-topics-panel {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-width: 0 !important;

    margin: 8px auto 0;
    padding: 12px 10px;

    border-radius: 16px;

    overflow: hidden;
  }

  .carousel-topics-title {
    margin-bottom: 9px;

    font-size: 1.05rem;
  }

  /* Etiquetas apiladas en varias filas */

  .carousel-topics {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow: visible;
  }

  .carousel-topics-track {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: stretch;
    justify-content: flex-start;

    gap: 8px;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow: visible;
  }

  .carousel-topic {
    flex: 0 1 auto !important;

    max-width: 100%;
    min-width: 0;
    min-height: 36px;

    padding: 8px 13px;

    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Anuncio en una sola columna */

  .slides {
    padding:
      4px
      12px
      0 !important;

    overflow: hidden !important;
  }

  .slide {
    overflow: hidden !important;
  }

  .slide-grid {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-areas:
      "copy"
      "media" !important;

    gap: 16px;

    min-height: 0 !important;

    padding:
      16px
      0
      8px !important;

    overflow: hidden !important;
  }

  .slide-copy {
    grid-area: copy;

    padding-left: 0 !important;

    justify-self: stretch;

    overflow: visible !important;
  }

  .slide-title,
  .slide-text {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-wrap: anywhere;
    word-break: normal;
  }

  .slide-title {
    margin-bottom: 9px;

    font-size:
      clamp(
        1.4rem,
        5.8vw,
        1.9rem
      );
  }

  .slide-text {
    font-size: .92rem;
  }

  /* Imagen debajo del contenido */

  .slide-media {
    grid-area: media;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    margin-top: 2px;

    overflow: hidden !important;
  }

  .slider .slide-media img {
    display: block !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    max-height:
      clamp(
        220px,
        65vw,
        360px
      ) !important;

    margin:
      0
      auto
      0
      0 !important;

    border-radius: 13px;

    object-fit: contain !important;
    object-position: left top !important;
  }

  /* Controles inferiores */

  .slider-footer {
    flex-wrap: wrap;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 12px;

    padding:
      8px
      12px
      16px;
  }

  .slider-controls {
    max-width: 100%;

    gap: 8px;
  }
}

/* ==================================================
   Teléfonos pequeños
================================================== */

@media (max-width: 575.98px) {
  .slider {
    --carousel-dot-size: 15px;
  }

  .carousel-topics-panel {
    width: calc(100% - 14px);
    max-width: calc(100% - 14px);
  }

  .carousel-topic {
    min-height: 35px;

    padding: 7px 12px;

    font-size: .78rem;
  }

  .slide-title {
    font-size:
      clamp(
        1.35rem,
        7.5vw,
        1.8rem
      );
  }

  .slide-link,
  .slide-link:link,
  .slide-link:visited {
    padding: 9px 15px;

    font-size: .9rem;
  }

  .carousel-play-toggle {
    min-height: 38px;

    padding: 8px 12px;
  }

  .carousel-play-text {
    display: none;
  }

  .carousel-play-toggle {
    width: 38px;
    min-width: 38px;
  }

  .slider-controls {
    gap: 7px;
  }
}

/* ==================================================
   Pantallas muy pequeñas
================================================== */

@media (max-width: 359.98px) {
  .slider {
    --carousel-dot-size: 13px;
  }

  .slider-controls {
    gap: 6px;
  }
}

/* ==================================================
   Movimiento reducido
================================================== */

@media (prefers-reduced-motion: reduce) {
  .carousel-topic,
  .slide-grid,
  .slide-link,
  .slider-dot {
    transition: none !important;
    animation: none !important;
  }

  .slide.is-active .slide-grid {
    opacity: 1;
    transform: none;
  }
}