/* ==========================================================================
   HERO.CSS - Estilos para la sección principal de DaruPay
   ========================================================================== */

.hero-section {
  position: relative;
  /* antes: padding: clamp(4rem, 10vw, 8rem) 0; */
  padding: 2rem 0; /* mucho más compacto arriba y abajo */
  overflow: hidden;
  background-color: var(--bg-primary);
}

/* 1. EFECTOS DE FONDO (BLOBS ANIMADOS)
   ========================================================================== */
.hero-background-effects {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.blob-effect {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  animation: blob-move 25s infinite alternate ease-in-out;
}

.blob-1 {
  width: 450px;
  height: 450px;
  top: -10%;
  left: -20%;
  background: var(--dp-green-500);
  animation-duration: 22s;
}

.blob-2 {
  width: 400px;
  height: 400px;
  bottom: -15%;
  right: -15%;
  background: var(--dp-green-600);
  animation-duration: 28s;
  animation-delay: -5s;
}

.blob-3 {
  width: 300px;
  height: 300px;
  top: 20%;
  right: 10%;
  background: var(--dp-green-500);
  opacity: 0.15;
  animation-duration: 20s;
  animation-delay: -2s;
}

@keyframes blob-move {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(80px, -40px) scale(1.2); }
  100% { transform: translate(0, 0) scale(1); }
}


/* 2. CONTENIDO DEL HERO
   ========================================================================== */
.hero-content {
  position: relative;
  z-index: 1;
}

.hero-text-column {
  text-align: center;
}
@media (min-width: 992px) {
  .hero-text-column {
    text-align: left;
  }
}

.hero-section h1 {
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.hero-section .hero-subheading {
  font-size: 1.15rem;
  max-width: 45ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .hero-section .hero-subheading {
    margin-left: 0;
    margin-right: 0;
  }
}

.hero-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
@media (min-width: 992px) {
  .hero-cta-buttons {
    justify-content: flex-start;
  }
}

/* Columna visual de la derecha */
.hero-visual-column {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* baja la imagen hacia abajo */
  margin-top: 0; /* antes tenía 4rem */
}
@media (min-width: 992px) {
  .hero-visual-column {
    margin-top: 0; /* forzar que nunca agregue espacio */
  }
}

/* 3. NUEVOS ESTILOS PARA LA IMAGEN PRINCIPAL
   ========================================================================== */
.hero-image {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.3));
  animation: gentle-float 8s infinite ease-in-out;
}

@keyframes gentle-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}


/* 4. ANIMACIONES DE ENTRADA
   ========================================================================== */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards ease-out;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ====================================================================== */
/* === PASARELA EN COLUMNA DERECHA (inyectada por JS) =================== */
/* ====================================================================== */

/* El scroller vive DENTRO de .hero-visual-column para no tocar los botones */
.hero-visual-column .logo-scroller{
  position:absolute;
  inset:auto 0 24%;           /* bottom 24%, centrado horizontalmente */
  z-index: 1;                 /* detrás de la imagen, delante del fondo */
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent, white 12%, white 88%, transparent);
  mask-image:linear-gradient(to right, transparent, white 12%, white 88%, transparent);
  width: 100%;
  bottom: 55%;
}

.hero-visual-column .scroller__inner{
  display:flex;
  gap:4rem;
  width:max-content;
  animation:scroll 20s linear infinite reverse; /* ← izquierda → derecha */
  filter:grayscale(1) brightness(2.5) contrast(.5);
  opacity:.85;
}

.hero-visual-column .scroller__inner img {
  height: 70px;  
  max-width: 200px; 
  object-fit: contain; 
}

.hero-visual-column .logo-breb{ height:40px; width:100px; }

/* keyframes originales; al usar reverse el sentido es LTR */
@keyframes scroll{ to{ transform: translateX(calc(-50% - 2rem)); } }

/* Capas: imagen por encima del scroller */
.hero-visual-column .hero-image{ position:relative; z-index: 2; }

/* ==========================================================================
   HERO — RESPONSIVE PATCH (añadir al final)
   Hace que el hero, la imagen y la pasarela respondan bien en todas las
   pantallas sin tocar tu HTML ni JS.
   ========================================================================== */

/* 0) Tokens simples para ajustar rápido */
:root{
  --hero-py-sm: 1.25rem;   /* padding vertical en móviles */
  --hero-py-md: 1.75rem;
  --hero-py-lg: 2.25rem;
  --scroller-bottom-sm: 18%;
  --scroller-bottom-md: 28%;
  --scroller-bottom-lg: 35%;
}

/* 1) Padding del hero por breakpoint (compacto, armónico) */
.hero-section{
  padding: var(--hero-py-sm) 0;
}
@media (min-width: 768px){
  .hero-section{ padding: var(--hero-py-md) 0; }
}
@media (min-width: 992px){
  .hero-section{ padding: var(--hero-py-lg) 0; }
}

/* 2) Imagen: escala fluida y siempre por encima del scroller */
.hero-image{
  width: clamp(220px, 36vw, 520px);   /* ancho fluido */
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

/* 3) Pasarela (dentro de la columna derecha) posicionada por breakpoint */
.hero-visual-column .logo-scroller{
  bottom: var(--scroller-bottom-sm);  /* base: un poco más baja en móviles */
  width: 100%;
}
@media (min-width: 768px){
  .hero-visual-column .logo-scroller{ bottom: var(--scroller-bottom-md); }
}
@media (min-width: 992px){
  .hero-visual-column .logo-scroller{ bottom: var(--scroller-bottom-lg); }
}

/* 4) Tamaño de logos fluido (más grandes en desktop, compactos en mobile) */
.hero-visual-column .scroller__inner img,
.hero-visual-column .scroller__inner svg{
  height: clamp(28px, 5vw, 72px);   /* ← ajusta aquí si los quieres aún más grandes */
  max-width: clamp(80px, 18vw, 220px);
  object-fit: contain;
}

/* 5) Máscara adaptativa para bordes (más suave en móviles) */
.hero-visual-column .logo-scroller{
  -webkit-mask-image: linear-gradient(to right, transparent, white 8%, white 92%, transparent);
          mask-image: linear-gradient(to right, transparent, white 8%, white 92%, transparent);
}
@media (min-width: 768px){
  .hero-visual-column .logo-scroller{
    -webkit-mask-image: linear-gradient(to right, transparent, white 12%, white 88%, transparent);
            mask-image: linear-gradient(to right, transparent, white 12%, white 88%, transparent);
  }
}

/* 6) Alineaciones: texto centrado en móvil, imagen “al piso” para compacidad */
.hero-visual-column{
  align-items: flex-end;  /* baja la imagen para compactar el bloque */
}
@media (min-width: 992px){
  .hero-visual-column{ align-items: center; } /* en desktop re-centramos */
}

/* 7) Reduce motion: si el usuario lo prefiere, pausa el carrusel */
@media (prefers-reduced-motion: reduce){
  .hero-visual-column .scroller__inner{ animation-play-state: paused; }
}