/* ===== RESET GENERAL ===== */
/* elimina márgenes que pone el navegador por defecto */
*{
margin:0;
padding:0;
box-sizing:border-box;
}


/* ===== BODY ===== */
/* estilo general de toda la página */
body{
background-color:#A5B1B9;
font-family:Arial, Helvetica, sans-serif;
color:white;
text-align:center;
min-height:100vh;

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


/* ===== HEADER ===== */
/* parte superior donde está el logo y menú */
header{
background-color:#2b657f;
width:100%;
padding:30px 20px;
}


/* ===== LOGO ===== */
.logo{
width:45px;
}

.logo-text{
font-weight:bold;
font-size:22px;
margin-left:10px;
}

.logo-container{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:15px;
}


/* ===== TITULO ===== */
h1{
font-size:30px;
margin:15px 0;
}


/* ===== MENU ===== */
nav ul{
list-style:none;
}

nav li{
display:inline-block;
margin:0 15px;
padding:8px 15px;
background-color:#15323f;
border-radius:10px;
transition:0.3s;
}

nav li:hover{
transform:scale(1.1);
}

nav a{
text-decoration:none;
color:white;
}


/* ===== FORMULARIO ===== */
.tenedor{
background:#2b657f;
width:350px;
margin:40px auto;
padding:30px;
border-radius:20px;

box-shadow:0px 4px 10px rgba(0,0,0,0.3);
}


/* ===== INPUTS ===== */
input{
width:100%;
padding:10px;
margin-top:10px;
border:none;
border-radius:8px;
transition:0.3s;
}

input:hover{
  transform:scale(1.1);
}


/* ===== BOTON ===== */
button{
background:white;
color:#15323f;
border:none;
padding:12px 20px;
border-radius:10px;
margin-top:20px;
cursor:pointer;
font-weight:bold;

transition:0.3s;
}

button:hover{
transform:scale(1.05);
}


/* ===== CAJA INPUT TEXTO ===== */
.textoboton{
background:#15323f;
padding:15px;
border-radius:10px;
margin-bottom:20px;
}


/* ===== CAJA ARCHIVO ===== */
.archivo{
background:#15323f;
padding:15px;
border-radius:10px;
}


/* ===== TEXTO INFORMATIVO ===== */
.textoinformativo{
max-width:900px;
margin:40px auto;
padding:20px;
background-color:rgba(0,0,0,0.15);
border-radius:15px;
line-height:1.6;
font-size:18px;
}


/* ===== FOOTER ===== */
footer{
background:#2b657f;
width:100%;
padding:20px;
margin-top:40px;
}

/* AJUSTES PARA DIFERENTES TAMAÑOS DE PANTALLA */

/* Pantallas muy pequeñas (celulares compactos) */
@media (max-width:480px){
  body {
    font-size:16px;
  }

  nav li {
    display:block;
    margin:10px 0;
  }
}

/* Celulares normales */
@media (max-width:600px){
  h1 {
    font-size:22px;
  }

  form, section, article {
    width:90%;
    margin:auto;
  }
}

/* Tablets */
@media (max-width:768px){
  .info {
    flex-direction:column;
    align-items:center;
  }

  section, article {
    width:80%;
    margin:auto;
  }
}

/* Tablets grandes */
@media (max-width:900px){
  form, section, article {
    width:70%;
    margin:auto;
  }
}

/* Laptops */
@media (max-width:1024px){
  body {
    font-size:20px;
  }
}

/* Pantallas grandes */
@media (min-width:1200px){
  main {
    max-width:1200px;
    margin:auto;
  }
}