/* =====================================================================
   HERO SLIDER — Crediexpres home (page 2848)
   4 slides cinematográficos · fade + slide + Ken Burns
   Color acento via CSS custom property --slide-accent
   ===================================================================== */

.hero-slider {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  background: #050912;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  --slide-accent: #1E5FFF;
}

/* Track holds all slides absolutely positioned */
.hero-slider-track {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ===== Slide ===== */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* Solo opacity + visibility — sin transform scale (= patrón conocenos para fade suave) */
  transition: opacity 1.4s ease,
              visibility 0s linear 1.4s;
  pointer-events: none;
  will-change: opacity;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s ease,
              visibility 0s linear 0s;
  pointer-events: auto;
}
.hero-slide.is-leaving {                          /* sale con fade out 2s sincronizado con blur out (= conocenos) */
  opacity: 0;
  visibility: visible;
  transition: opacity 2s ease,
              visibility 0s linear 2s;
}

/* Per-slide accent color via data-accent attr */
.hero-slide[data-accent="blue"]   { --slide-accent: #1E5FFF; }
.hero-slide[data-accent="cyan"]   { --slide-accent: #06B6D4; }
.hero-slide[data-accent="orange"] { --slide-accent: #F97316; }
.hero-slide[data-accent="green"]  { --slide-accent: #10B981; }

/* ===== Background image + Ken Burns + crossfade blur =====
 * Patrón inspirado en hero conocenos (conocenos-hero.js): zoom continuo
 * + filter blur en transiciones para look cinematic premium.
 */
.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.04);
  filter: blur(8px);                                  /* pre-estado: blurred al entrar */
  transition: filter 1.4s ease;
  will-change: transform, filter;
}
.hero-slide.is-active .hero-slide-bg {
  filter: blur(0);
  animation: hero-kenburns 9s ease-out forwards;
}
.hero-slide.is-leaving .hero-slide-bg {
  filter: blur(14px);                                 /* sale con blur más fuerte */
  transition: filter 2s ease;
}
@keyframes hero-kenburns {
  0%   { transform: scale(1.04) translateX(0); }
  100% { transform: scale(1.15) translateX(-2%); }     /* Δ11% — igual al scale max de Conócenos. El blur 14px en salida enmascara el brinco. */
}

/* ===== Overlay gradient for legibility ===== */
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(5,9,18,.88) 0%, rgba(5,9,18,.68) 35%, rgba(5,9,18,.30) 60%, rgba(5,9,18,.55) 100%),
    radial-gradient(ellipse at 25% 35%, rgba(0,0,0,0) 0%, rgba(5,9,18,.45) 70%);
  pointer-events: none;
}

/* Vignette at edges */
.hero-slide-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

/* ===== Slide content ===== */
.hero-slide-content {
  position: relative;
  z-index: 2;
  max-width: none;                                     /* full-width container, padding controla el inset */
  margin: 0;
  padding: 200px clamp(40px, 6vw, 120px) 130px;        /* desktop ~115-120px, mobile ~40px, fluid intermedio */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===== Kicker ===== */
.hero-slide .kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 24px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(20px);
}
.hero-slide.is-active .kicker {
  animation: hero-fade-up .8s .2s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-slide .kicker .num {
  font-family: var(--font-titulo, 'Outfit', sans-serif);
  font-size: 2.2rem;
  color: var(--slide-accent);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  transition: color .5s ease;
}

/* ===== H1 ===== */
.hero-slide h1 {
  font-size: clamp(2.5rem, 6.8vw, 5.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  color: #fff;
  margin: 0 0 28px;
  max-width: 900px;
  text-wrap: balance;
}
.hero-slide h1 .accent {
  color: var(--slide-accent);
  transition: color .5s ease;
}

/* All slides use the same CSS keyframe animation for the H1 */
.hero-slide h1 {
  opacity: 0;
  transform: translateY(28px);
}
.hero-slide.is-active h1 {
  animation: hero-fade-up 1s .35s cubic-bezier(.2,.7,.2,1) forwards;
}

/* ===== Subtitle ===== */
.hero-slide .hero-slide-sub {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: rgba(255,255,255,.82);
  line-height: 1.55;
  max-width: 600px;
  margin: 0 0 36px;
}
.hero-slide .hero-slide-sub {
  opacity: 0;
  transform: translateY(20px);
}
.hero-slide.is-active .hero-slide-sub {
  animation: hero-fade-up .9s .55s cubic-bezier(.2,.7,.2,1) forwards;
}

/* ===== Stats row ===== */
.hero-slide-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 640px;
  margin: 0 0 36px;
}
.hero-slide-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 16px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(20px);
}
.hero-slide.is-active .hero-slide-stat {
  animation: hero-fade-up .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-slide.is-active .hero-slide-stat:nth-child(1) { animation-delay: .7s; }
.hero-slide.is-active .hero-slide-stat:nth-child(2) { animation-delay: .8s; }
.hero-slide.is-active .hero-slide-stat:nth-child(3) { animation-delay: .9s; }
.hero-slide-stat .v {
  display: block;
  font-family: var(--font-titulo, 'Outfit', sans-serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.hero-slide-stat .v.accent { color: var(--slide-accent); transition: color .5s ease; }
.hero-slide-stat .l {
  display: block;
  font-size: .78rem;
  color: rgba(255,255,255,.62);
  margin-top: 6px;
  letter-spacing: .04em;
}

/* ===== CTA ===== */
.hero-slide-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
}
.hero-slide.is-active .hero-slide-cta-row {
  animation: hero-fade-up .8s 1.05s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--slide-accent);
  color: #fff;
  padding: 18px 32px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: .01em;
  transition: transform .25s ease, box-shadow .25s ease, background .5s ease;
  box-shadow: 0 8px 28px -8px color-mix(in srgb, var(--slide-accent) 50%, transparent);
  border: none;
  cursor: pointer;
}
.hero-slide-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 36px -8px color-mix(in srgb, var(--slide-accent) 65%, transparent);
}
.hero-slide-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  padding: 17px 28px;
  border-radius: 14px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s;
}
.hero-slide-cta-secondary:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-2px);
}

@keyframes hero-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Rate ticker — overlay below header, on top of hero image ===== */
.rate-ticker-wrap {
  position: absolute;
  top: 80px;            /* below header — JS adjusts dynamically */
  left: 0;
  right: 0;
  z-index: 5;           /* below header (which is usually 99+) */
  width: 100%;
  pointer-events: auto;
}
.rate-ticker {
  position: relative;
  background: linear-gradient(180deg, rgba(5,9,18,.78) 0%, rgba(10,19,38,.55) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.04);
  overflow: hidden;
  height: 44px;
  display: flex;
  align-items: center;
  width: 100%;
}
.rate-ticker-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: .82rem;
  color: rgba(255,255,255,.78);
  letter-spacing: .01em;
  /* Animation is now JS-driven via requestAnimationFrame for pixel-perfect seamless loop */
  /* iOS Safari fix 2026-06-30: ocultar hasta que JS haya medido + arrancado animation.
     Sin esto, las 2 halves se renderizan superpuestas en x=0 antes del primer frame. */
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  transition: opacity .25s ease-out;
}
.rate-ticker-track.is-ready { opacity: 1; }
.rate-ticker-half {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}
.rate-ticker:hover .rate-ticker-track { animation-play-state: paused; }
@keyframes rate-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.rate-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}
.rate-item .bank {
  color: #06B6D4;
  font-weight: 700;
  letter-spacing: .03em;
}
.rate-item .sep {
  opacity: .35;
  padding: 0 4px;
}
.rate-ticker-sep {
  opacity: .25;
  padding: 0 4px;
  user-select: none;
}

@media (max-width: 768px) {
  .rate-ticker-wrap { top: 60px; }
  .rate-ticker { height: 42px; }
  /* 2026-06-25 — font aumentado de .72rem a .82rem para legibilidad mobile */
  .rate-ticker-track { font-size: .82rem; animation-duration: 30s; }
  .rate-item { padding: 0 14px; gap: 6px; }
  .rate-item { padding: 0 12px; gap: 6px; }
}

/* ===== Controls =====
 * position:static asegura que .hero-dots (position:absolute hijo) se posicione
 * respecto al .hero-slider (full viewport) en lugar del controls (recortado).
 * Las flechas .hero-arrow tienen su propio position:absolute y siguen funcionando
 * porque .hero-slider tiene position:relative implícito (isolation:isolate).
 */
.hero-slider-controls {
  position: static;
  display: block;
  z-index: 10;
  pointer-events: none;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;                    /* sobre slides (que están en stacking implícito) */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
  transition: background .25s, transform .25s, border-color .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.hero-arrow:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  transform: translateY(-50%) scale(1.08);
}
.hero-arrow-prev { left: 24px; }
.hero-arrow-next { right: 24px; }

/* Flechas ocultas — navegación solo via dots + autoplay + swipe */
.hero-arrow { display: none !important; }

.hero-dots {
  position: absolute;
  right: 120px;
  bottom: 140px;
  top: auto;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
  z-index: 25;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.5);
  cursor: pointer;
  padding: 0;
  transition: all .35s ease;
}
.hero-dot:hover {
  background: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.7);
}
.hero-dot.is-active {
  background: var(--slide-accent, #1E5FFF);
  border-color: var(--slide-accent, #1E5FFF);
  transform: scale(1.45);
  box-shadow: 0 0 12px color-mix(in srgb, var(--slide-accent, #1E5FFF) 60%, transparent);
}

.hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.06);
  z-index: 11;
  overflow: hidden;
}
.hero-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--slide-accent, #1E5FFF);
  transition: background .5s ease;
}
.hero-slider.is-playing .hero-progress-bar {
  animation: hero-progress 7.5s linear forwards;        /* match SLIDE_DURATION en hero-slider.js */
}
@keyframes hero-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .hero-slide-content {
    padding: 95px 24px 60px;
    min-height: 100dvh;
    justify-content: center;
  }
  .hero-slide .kicker { font-size: .78rem; letter-spacing: .22em; margin-bottom: 16px; }
  .hero-slide .kicker .num { font-size: 1.9rem; }
  .hero-slide h1 {
    font-size: clamp(2.9rem, 12vw, 4.2rem);
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: -.035em;
  }
  .hero-slide .hero-slide-sub {
    font-size: 1.08rem;
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .hero-slide-stats {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    gap: 10px;
    margin-bottom: 28px;
  }
  .hero-slide-stat:nth-child(3) {
    grid-column: span 2;
  }
  .hero-slide-stat .v { font-size: 1.2rem; }
  .hero-slide-stat .l { font-size: .72rem; }

  /* Hide CTAs on mobile per Luis (item 3) */
  .hero-slide-cta-row { display: none !important; }

  /* Hide arrow controls on mobile per Luis (item 4) — keep dots + swipe gestures */
  .hero-arrow { display: none !important; }

  .hero-dots {
    flex-direction: row;
    right: auto;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    gap: 10px;
  }
  .hero-dot { width: 8px; height: 8px; }
  .hero-dot.is-active {
    width: 24px;
    border-radius: 6px;
    transform: none;
  }
}

/* Reduce motion: disable Ken Burns + slide zoom + blur, keep fades short */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero-slide-bg { animation: none; transform: scale(1.04); filter: none; }
  .hero-slide-bg,
  .hero-slide.is-leaving .hero-slide-bg { filter: none !important; }
  .hero-slide,
  .hero-slide.is-leaving,
  .hero-slide.is-active .kicker,
  .hero-slide.is-active h1,
  .hero-slide.is-active .hero-slide-sub,
  .hero-slide.is-active .hero-slide-stat,
  .hero-slide.is-active .hero-slide-cta-row { animation: none !important; transition: opacity .3s ease !important; opacity: 1 !important; transform: none !important; }
  .hero-slide:not(.is-active) { opacity: 0 !important; }
  .hero-slider.is-playing .hero-progress-bar { animation: none; width: 0; }
}