/* ===== CTA Parallax ===== */
:root{
  /* Cambia aquí la imagen de fondo */
  --cta-image: url("../../images/misc/fondo-3.webp");
}

.section-cta{
  position: relative;
  /* Parallax “clásico” en desktop */
  background-image: var(--cta-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;        /* parallax */
  /* Altura cómoda y respira arriba/abajo */
  min-height: clamp(420px, 68vh, 740px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Overlay sutil (degradado + oscurecimiento) */
.section-cta::before{
  content:"";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,6,21,.15) 0%, rgba(4,6,21,.55) 100%),
    radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.20) 0%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}

/* Contenido centrado */
.section-cta .cta-inner{
  position: relative;
  text-align: center;
  color: #fff;
  padding: clamp(28px, 4vw, 48px) 0;
  max-width: 1100px;
}

/* Título y texto */
.section-cta .cta-title{
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: .96;
  font-size: clamp(38px, 7.2vw, 70px);
  text-shadow: 0 6px 28px rgba(0,0,0,.35);

  /* --- INICIO DE CAMBIOS --- */
  /* 1. Usar Flexbox para alinear texto + imagen */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center;     /* Centra el contenido verticalmente */
  gap: 0.1em;             /* Espacio entre "Únete a la" y la imagen */
  /* --- FIN DE CAMBIOS --- */
}
.section-cta .cta-text{
  margin: 35px auto clamp(22px, 3.6vw, 36px);
  max-width: 70ch;
  opacity: .95;
  font-size: clamp(20px, 2.1vw, 20px);
}

/* Botones centrados (reusa tus estilos .btn-main / .btn-line) */
.section-cta .cta-actions{
  display: inline-flex;
  gap: 18px;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
}

/* Afinado visual de los dos botones juntos (misma altura) */
.section-cta .btn-main{ padding: 14px 28px; }
.section-cta .btn-main.btn-line{ padding: 12px 28px; }

/* --- INICIO DE CAMBIOS --- */
/* Regla única y limpia para la imagen */
.sinergia-cta {
    height: 40px;
    width: auto;
    display: inline-block;
}

/* iOS / Android: desactivar background-attachment:fixed (mejor perf.) */
@supports (-webkit-touch-callout: none) {
  .section-cta{
    background-attachment: scroll;
    background-position: center;
  }
}
@media (max-width: 720px){
  .section-cta .cta-actions{
    gap: 12px;
    flex-direction: column;  /* 1. Apila los botones */
    align-items: center;     /* 2. Centra los botones apilados */
  }
  
  .section-cta .btn-main,
  .section-cta .btn-main.btn-line{
    padding: 12px 28px;      /* 3. Ajusta el padding para que se vean bien */
    font-size: 24px;
    white-space: nowrap;
    width: fit-content;      /* 4. El ancho se ajusta al texto */
    
    /* 5. ¡IMPORTANTE! Esto anula los bordes "partidos" 
          y los hace completamente redondeados */
    border-radius: 50px !important; 
  }

  .sinergia-cta {
    height: 25px;
    width: auto;
    display: inline-block;
  }
}