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

body {
   min-height: 100dvh; /* 100% de la altura de la ventana*/
   width: 100%; /* 100% del ancho de la ventana */
   background-color: #f4f4f4;

   font-family: Arial, sans-serif;
   line-height: 1.6;/* aumenta la separación entre líneas de texto */	
   color: #333;

   display: flex;
   flex-direction: column;
}

.container {
   width: 90%;
   max-width: 1200px;/*evita que el ancho sea mayor a 1200px*/
   margin: 0 auto;/*sin margen y centrado*/
   padding: 0 20px;
}

.form-container {
   flex: 1;/*ocupa todo el espacio disponible*/
   display: flex;
   align-items: center;/*centra verticalmente*/
   justify-content: center;/*centra horizontalmente*/
   width: 100%;
   min-height: 100%;

   margin-block: 50px;/*margen superior e inferior*/
}

a {
   text-decoration: none; /*quita el subrayado de los enlaces*/
   color: inherit;
}

ul {
   list-style: none; /*quita los puntos de las listas*/
}

/* Navegación */
.navbar {
   background-color: #f8f8f8;
   padding: 16px 0;/*arriba y abajo, izquierda y derecha*/
   height: 100px;
}

.nav-container {
   display: flex;
   justify-content: space-between;/*alinea de izquierda a derecha*/
   align-items: center;
}

.navbar-brand {
   font-size: 1.5rem;/*equivalente a 24px*/
   font-weight: bold;
   color: #0066cc;
}

.nav-menu {
   display: flex;
   align-items: center;
}

.nav-item {
   margin-left: 1.5rem;
}

.nav-link {
   color: #333;
}

.nav-link.btn {
   background-color: #0066cc;
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 5px;
}

/* Hero section */
.hero {
   background-color: #f0f0f0;
   padding: 4rem 0;
}

.hero-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.hero-text {
   flex: 1;
   padding-right: 2rem;
}

.hero-image {
   flex: 1;
}

.hero h1 {
   font-size: 2.5rem;
   margin-bottom: 1rem;
}

.hero p {
   font-size: 1.1rem;
   margin-bottom: 1.5rem;/*margen inferior*/
}

.btn {
   display: inline-block;/*en linea pero altura y ancho propios*/
   background-color: #0066cc;
   color: white;
   padding: 0.75rem 1.5rem;
   border-radius: 5px;
   font-size: 1rem;
}

/* Características */
.features {
   padding: 4rem 0;
}

.features h2 {
   text-align: center;
   margin-bottom: 2rem;
}

.feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   /*repite las columnas con un ancho mínimo de 250px y un ancho máximo de 1fr*/
   gap: 2rem;/*espacio entre elementos*/
}

.feature {
   text-align: center;
}

.feature-icon {
   font-size: 3rem;
   color: #0066cc;
   margin-bottom: 1rem;
}

/* Cómo funciona */
.how-it-works {
   background-color: #f0f0f0;
   padding: 4rem 0;
}

.how-it-works h2 {
   text-align: center;
   margin-bottom: 2rem;
}

.steps {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;
}

.step {
   background-color: white;
   padding: 1.5rem;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);/*sombra*/
}

/* Call to Action */
.cta {
   padding: 4rem 0;
   text-align: center;
}

.cta h2 {
   margin-bottom: 1.5rem;
}

/* Footer */
.footer {
   background-color: #333;
   color: white;
   padding: 2rem 0;
}

.footer-content {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.footer-links {
   display: flex;
   gap: 1rem;
}

.footer hr {
   margin: 1rem 0;
   border: none;
   border-top: 1px solid #555;
}

.footer-bottom {
   text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
   .hero-content {
      flex-direction: column;
   }

   .hero-text,
   .hero-image {
      padding: 0;
      margin-bottom: 2rem;
   }
}

.login-container,
.register-container {
   background-color: white;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   width: 300px;
}

h2 {
   text-align: center;
   color: #333;
}

input[type="email"],
input[type="password"],
input[type="text"] {
   width: 100%;
   padding: 10px;
   margin: 10px 0;
   border: 1px solid #ddd;
   border-radius: 4px;
   box-sizing: border-box;
}

input[type="submit"] {
   width: 100%;
   padding: 10px;
   background-color: #4CAF50;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

input[type="submit"]:hover {
   background-color: #45a049;
}

.remember-me {
   margin: 10px 0;
}

.register-link {
   text-align: center;
   margin-top: 10px;
}

.login-link {
   text-align: center;
   margin-top: 10px;
}