body {
  overflow-x: hidden;
}

/* -------------------------------------------------------------------------- */
/* CONTENEDOR PRINCIPAL */
/* -------------------------------------------------------------------------- */

.container-p {
  background: linear-gradient(rgba(0, 156, 163, 0.7), rgba(0, 156, 163, 0.7)),
              url('images/register/Backgroundlogin.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 160px 20px 80px; 
  min-height: 130vh !important; 
}

/* -------------------------------------------------------------------------- */
/* TITULOS */
/* -------------------------------------------------------------------------- */

.titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  margin-bottom: 40px;
  width: 100%;
}

/* TITULO 1 */
.titles .title1 {
  background: white;
  color: #009ca3;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 4px;

  width: 100%; 
  max-width: 100%;
  margin-right: 50px;        
  margin-left: 0;

  padding: 15px 60px;

  border-radius: 0 50px 50px 0;
  text-align: center;
}

/* TITULO 2 */
.titles .title2 {
  background: #f7aa00;
  color: white;
  font-size: 26px;
  letter-spacing: 2px;

  width: 100%; 
  max-width: 100%;
  margin-left: 50px;         
  margin-right: 0;

  padding: 12px 60px;

  border-radius: 50px 0 0 50px;
  text-align: center;
}
/* TITULO 3 */
.titles .title3 {
  color: white;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;

  text-align: center;
  max-width: 650px;
}

/* -------------------------------------------------------------------------- */
/* FORMULARIO */
/* -------------------------------------------------------------------------- */

.form-container {
  background-color: white;
  padding: 40px;

  border-radius: 40px;
  width: 100%;
  max-width: 750px;

  border: 5px solid #ccc;
  color: #009ca3;

  margin-bottom: 60px;
  font-family: Arial, sans-serif;
}

/* LABELS */
.form-container label {
  display: block;
  margin: 10px 0 5px;
}

/* INPUTS */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container select {
  width: 100%;
  padding: 12px;
  margin: 10px 0;

  border: 2px solid #009ca3;
  border-radius: 20px;

  font-size: 15px;
  color: #009ca3;
  background-color: white;
  outline: none;
}

/* FOCUS */
.form-container input:focus,
.form-container select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #009ca3;
}

/* BOTÓN */
.form-container input[type="submit"] {
  width: 100%;
  background-color: #f7aa00;
  color: white !important;

  font-size: 16px;
  font-weight: bold;

  border: none;
  border-radius: 40px;
  padding: 14px;

  cursor: pointer;
  transition: 0.3s;
  margin-top: 20px;
}

.form-container input[type="submit"]:hover {
  background-color: #005459;
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------- */
/* CHECKBOX */
/* -------------------------------------------------------------------------- */

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* -------------------------------------------------------------------------- */
/* IMAGENES */
/* -------------------------------------------------------------------------- */

.images {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.images img {
  width: 300px;
  max-width: 100%;
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE - TABLET (991px) */
/* -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .titles .title1 {
      font-size: 22px;          
    }

    .titles .title2 {
      font-size: 18px;
    }

  .titles .title3 {
    font-size: 16px;
  }

  /* Tamaño de imágenes */
  .images img {
    width: 200px;
    max-width:250px;
  }
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE - CELULAR (575px) */
/* -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

  /* TAMAÑOS DE TÍTULOS (más grandes y legibles en celular) */
  .titles .title1 {
    font-size: 18px;           /* ← más grande que antes */
    
  }

  .titles .title2 {
    font-size: 15px;
   
  }

  .titles .title3 {
    font-size: 14px;
  }

  /* Tamaño de imágenes */
  .images img {
    width: 100px;
  }
}