/* ===============================
   CTA – BLOQUE FINAL (CORREGIDO)
   ✅ Sin duplicados
   Colores: #011077 (azul) #000000 (negro) #FFFFFF (blanco)
================================ */

.cta{
  width:100%;
  background:#FFFFFF;
  padding:80px 20px;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
}

.cta__container{
  width:100%;
  max-width:1200px;

  /* ✅ Mantengo tu azul sólido (sin degradado) */
  background:#011077;

  border-radius:60px;
  padding:80px 40px 70px;

  text-align:center;
  box-sizing:border-box;

  /* ✅ para reveal */
  position:relative;
  overflow:hidden;
}

/* TEXTO */
.cta__text{
  margin:0 0 46px;
  color:#FFFFFF;

  font-size:42px;
  font-weight:800;
  line-height:1.25;
}

/* ===============================
   BOTÓN CTA – BURBUJAS / LÍQUIDO
================================ */
.cta__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#FFFFFF;
  color:#000000;

  text-decoration:none;
  font-size:28px;
  font-weight:800;

  padding:22px 70px;
  border-radius:999px;

  border:none;
  outline:none;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  position:relative;
  overflow:hidden;
  isolation:isolate;
  z-index:0;

  /* color del líquido */
  --flow:#000000;

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

/* ===============================
   BURBUJAS
================================ */
.cta__button::before,
.cta__button::after{
  content:"";
  position:absolute;
  bottom:-10%;
  width:50%;
  height:140%;

  background:var(--flow);
  border-radius:50%;

  transform:translateY(120%) scale(1);
  transition:transform .45s ease;

  z-index:-1;
  pointer-events:none;
}

.cta__button::before{ left:0; }
.cta__button::after{ left:50%; transition-delay:.12s; }

/* ===============================
   HOVER
================================ */
.cta__button:hover{
  color:#FFFFFF;
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(0,0,0,.35);
}

.cta__button:hover::before,
.cta__button:hover::after{
  transform:translateY(0) scale(1.6);
}

/* CLICK */
.cta__button:active{
  transform:translateY(1px);
}

/* ===============================
   ✅ EFECTO DE ENTRADA (REVEAL)
   Se activa cuando .cta tiene .is-visible
================================ */

/* Estado inicial (oculto) */
.cta .cta__container,
.cta .cta__text,
.cta .cta__button{
  opacity:0;
  transform:translateY(22px);
  filter:blur(7px);
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.2,.9,.2,1),
    filter .9s ease;
}

/* Estado visible */
.cta.is-visible .cta__container,
.cta.is-visible .cta__text,
.cta.is-visible .cta__button{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Cascada */
.cta.is-visible .cta__container{ transition-delay:.05s; }
.cta.is-visible .cta__text{ transition-delay:.16s; }
.cta.is-visible .cta__button{ transition-delay:.30s; }

/* ===============================
   RESPONSIVE
================================ */
@media (max-width:950px){
  .cta{
    padding:60px 16px;
  }

  .cta__container{
    border-radius:40px;
    padding:60px 24px 52px;
  }

  .cta__text{
    font-size:30px;
    line-height:1.35;
    margin-bottom:34px;
  }

  .cta__button{
    font-size:22px;
    padding:18px 54px;
  }
}

@media (max-width:480px){
  .cta{
    padding:52px 14px;
  }

  .cta__container{
    border-radius:28px;
    padding:52px 18px 44px;
  }

  .cta__text{
    font-size:24px;
    line-height:1.35;
    margin-bottom:26px;
  }

  .cta__button{
    width:100%;
    max-width:320px;
    margin:0 auto;

    font-size:20px;
    padding:16px 20px;
  }
}