/* ==========================================================
   Banner deslizante de la portada (estilo Moderna Pro)
   ========================================================== */
.slider-sec { padding: 12px var(--gutter) 0; }
.slider {
  position: relative; max-width: 1400px; margin-inline: auto; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); display: grid; min-height: min(760px, calc(100svh - 96px)); background: var(--ink);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.55);
}
/* las diapositivas se apilan en la misma celda: el banner crece con el texto más largo y nunca lo corta */
.slide { position: relative; grid-area: 1 / 1; display: flex; align-items: center; padding-block: clamp(84px, 9vh, 120px) clamp(112px, 12vh, 140px); opacity: 0; visibility: hidden; transition: opacity 1s cubic-bezier(.2,.7,.2,1), visibility 0s 1s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s cubic-bezier(.2,.7,.2,1), visibility 0s; z-index: 1; }
.slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s linear; z-index: -2; }
.slide.is-active .slide__img { transform: scale(1); }
.slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,14,12,.82) 0%, rgba(14,14,12,.55) 45%, rgba(14,14,12,.1) 85%), linear-gradient(0deg, rgba(14,14,12,.55), transparent 40%); }
.slide__content { position: relative; max-width: 760px; padding: 0 clamp(24px, 6vw, 88px); color: #fff; }
.slide__content > * { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.slide.is-active .slide__content > * { opacity: 1; transform: none; }
.slide.is-active .slide__content > :nth-child(2) { transition-delay: .12s; }
.slide.is-active .slide__content > :nth-child(3) { transition-delay: .24s; }
.slide.is-active .slide__content > :nth-child(4) { transition-delay: .36s; }
.slide__tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); font-size: 16px; font-weight: 600; margin-bottom: 18px; }
.slide__title { color: #fff; font-size: clamp(48px, 5.6vw, 92px); line-height: .94; margin: 0 0 20px; text-wrap: balance; }
.slide__lead { font-size: clamp(19px, 1.4vw,23px); color: rgba(255,255,255,.9); max-width: 520px; margin: 0 0 28px; }
.slide__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* controles */
.slider__bar { position: absolute; z-index: 3; left: clamp(24px, 6vw, 88px); right: clamp(18px, 3vw, 32px); bottom: 26px; display: flex; align-items: center; gap: 20px; }
.slider__dots { display: flex; gap: 8px; }
.slider__dots button { width: 46px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.slider__dots i { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
.slider__dots i::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.slider__dots button[aria-selected="true"] i::after { animation: slidefill var(--dur, 6s) linear forwards; }
.slider.is-paused .slider__dots button[aria-selected="true"] i::after { animation-play-state: paused; }
.slider.is-static .slider__dots button[aria-selected="true"] i::after { animation: none; transform: none; }
@keyframes slidefill { to { transform: scaleX(1); } }
.slider__count { color: rgba(255,255,255,.75); font-size: 16.5px; font-weight: 600; }
.slider__count b { color: #fff; font-size: 20px; }
.slider__arrows { margin-left: auto; display: flex; gap: 10px; }
.slider__arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); backdrop-filter: blur(10px); color: #fff; font-size: 21px; cursor: pointer; transition: background .25s, transform .25s; }
.slider__arrow:hover { background: rgba(255,255,255,.25); transform: scale(1.06); }

/* bloque "¿Por dónde empezar?" debajo del banner */
.hero--ruta { min-height: 0; padding-block: clamp(80px, 9vw, 120px); }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide__img, .slide__content > * { transition: none !important; }
  .slide__img { transform: none; }
}
@media (max-width: 760px) {
  .slider-sec { padding: 8px 10px 0; }
  .slider { min-height: min(640px, calc(100svh - 90px)); border-radius: 22px; }
  .slide { align-items: flex-end; padding-block: 88px 92px; }
  .slide::before { background: linear-gradient(0deg, rgba(14,14,12,.9) 0%, rgba(14,14,12,.55) 55%, rgba(14,14,12,.15) 100%); }
  .slide__content { padding: 0 22px; }
  .slide__title { font-size: clamp(42px, 12.5vw, 64px); }
  .slide__ctas .btn { flex: 1 1 100%; }
  .slider__bar { left: 22px; right: 16px; bottom: 22px; gap: 12px; }
  .slider__dots button { width: 26px; }
  .slider__count { display: none; }
  .slider__arrow { width: 42px; height: 42px; }
}