*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body{
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

h1, h2, h3{
    color: #043351;
}


/** header **/

header{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0;
    background: #ffffff;
}

nav{
    width: 85%; 
}

nav img{
    width: 70px;
}

/**** Hero **/

.hero {
  background-image: url('../images/computer-work.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;  
  height: 450px;
  width: 100%;  
  /* overlay */
  position: relative;
  display: flex;
  justify-content: center; 
  align-items: center;     
  color: #ffffff;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 11, 49, 0.7); 
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2; 
  padding: 20px;
}

.hero-content h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #ffffff;
}

.hero-content p{
    font-size: 1.8rem;
}


/**** section titulos **/


.container-titulos{
    width: 100%;
    background: #f7f7f7;
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.container-titulos .container-items{
    width: 70%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
   
}

.container-titulos p{
    color: #333 ;
}


/**** formulario ********/

.form-container { 
    width: 100%;
    padding: 70px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.form-container form{
    max-width: 800px;
    padding: 30px; 
    border: 1px solid #e1e1e1; 
    border-radius: 12px; 
    background-color: #f7f7f7;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}



/* media queries */  

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .form-container form{ width: 90%; } 
}

/* Móviles */
@media (max-width: 767px) {
    .form-container form{ width: 95%; padding: 20px} 
    .container-titulos .container-items{width: 85%;}
    .hero{height: 280px;}
    .hero-content h2 {font-size: 1.8rem}
    .hero-content p{font-size: 1.2rem}
    nav img{width: 60px;
}
}

/* Campos de texto y selects */

input[type="text"], 
input[type="tel"], 
input[type="email"], 
select, 
textarea { 
    width: 100%; 
    margin-bottom: 20px; 
    padding: 12px; 
    box-sizing: border-box; 
    border: 1px solid #ccc; 
    border-radius: 6px; 
    font-size: 18px;
}

/* Etiquetas generales */

label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    color: #333;
}

/* Grupos de Radio (Áreas y Autorización) */

.radio-group { 
    margin-bottom: 20px; 
    text-align: left; 
}

.radio-options label { 
    display: block; 
    font-weight: normal; 
    margin-bottom: 10px; 
    cursor: pointer;
    font-size: 18px;
}

/* Radios de Autorización */
.radio-options-inline {
    display: flex;
    gap: 20px;
    justify-content: flex-start; 
    margin-top: 5px;
}

.radio-options-inline label {
    font-weight: normal;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-options-inline input[type="radio"],
.radio-options input[type="radio"] {
    width: auto;
    margin-right: 8px;
    transform: scale(1.3);
    cursor: pointer;  
}

button { 
    width: 100%; 
    padding: 15px; 
    background: #043351; 
    color: white; 
    border: none; 
    border-radius: 6px; 
    font-size: 18px; 
    font-weight: bold;
    cursor: pointer; 
    transition: background 0.3s;
}

button:hover { background: #12568a; }
button:disabled { background: #ccc; }