/* ============================
   SECCIÓN COMENZAR
============================ */
#comenzar {
  position: relative;
  background: url('/img/comenzar.jpg') center/cover no-repeat;
  padding: 75px 0; /* ← AJUSTA AQUÍ altura */
  color: #fff;
  overflow: hidden;
}

#comenzar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65); /* más oscuro */
  z-index: 0;
}

/* Contenedor en fila */
.comenzar-content {
  position: relative;
  z-index: 1;

  display: flex;
  justify-content: space-between; /* texto izquierda / botón derecha */
  align-items: center;            /* alineados verticalmente */
  gap: 10px;                     /* antes 30px → ahora más cerca */

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Texto */
.comenzar-texto {
  max-width: 60%;
}

.comenzar-texto p {
  font-size: 1.4rem; /* 🔥 AUMENTA EL TAMAÑO DEL TEXTO */
  line-height: 1.6;
}

/* ============================
   BOTÓN BRILLANTE
============================ */
.btn-brillante {
  display: inline-block;
  padding: 14px 35px;
  font-size: 1.2rem;
  color: #fff;
  background: #0083a3;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px #0083a3;
  animation: pulso 1.6s infinite;
  white-space: nowrap; /* evita que se rompa el botón */
}

@keyframes pulso {
  0% { box-shadow: 0 0 10px #0083a3; }
  50% { box-shadow: 0 0 22px #00cfff; }
  100% { box-shadow: 0 0 10px #0083a3; }
}

.btn-brillante::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transform: skewX(-25deg);
  animation: brillo 2.5s infinite;
}

@keyframes brillo {
  0% { left: -100%; }
  50% { left: 120%; }
  100% { left: 120%; }
}
/* ============================
   RESPONSIVE: SECCIÓN COMENZAR
============================ */

/* Tablets */
@media (max-width: 992px) {
  .comenzar-content {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .comenzar-texto {
    max-width: 100%;
  }

  .btn-brillante {
    align-self: center;
  }
}

/* Celulares */
@media (max-width: 600px) {
  #comenzar {
    padding: 55px 0; /* un poco menos alto en móviles */
  }

  .btn-brillante {
    padding: 12px 28px;
    font-size: 1.05rem;
  }

  .comenzar-content {
    padding: 0 25px;
  }
}