/* Reset general de márgenes y paddings y ajuste de box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Incluye padding y border en el tamaño total del elemento */
}

/* Altura completa para html y body */
html, body {
  height: 100%;
}

/* Estilos generales del body */
body {
  font-family: 'Arial', sans-serif; /* Fuente principal */
  background-color: #C4DAFA; /* Color de fondo */
  display: flex; /* Usar flexbox para layout */
  flex-direction: column; /* Colocar header, main y footer en columna */
  min-height: 100vh; /* Altura mínima de pantalla completa */
}

/* Header delgado */
header {
  background-color: #005187; /* Color de fondo azul oscuro */
  padding: 10px 20px; /* Espaciado interno */
}

/* Contenido del header (logo + título) */
.encabezado {
  display: flex;
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  gap: 15px; /* Espacio entre elementos */
}

.logo {
  height: 50px; /* Altura del logo */
}

header h1 {
  font-size: 32px; /* Tamaño del título */
  color: white; /* Color del texto */
}

/* Menú horizontal para escritorio */
nav.nav {
  display: flex; /* Flexbox para los links */
  justify-content: center; /* Centrado horizontal */
  background-color: #84B6F4; /* Fondo azul claro */
  padding: 15px 30px; /* Espaciado interno */
  gap: 30px; /* Espacio entre links */
  flex-wrap: wrap; /* Permitir que los links se ajusten en varias líneas si es necesario */
}

/* Estilos de los enlaces */
nav a {
  color: white; /* Color del texto */
  text-decoration: none; /* Quita subrayado */
  font-size: 20px; /* Tamaño de texto */
  padding: 12px 20px; /* Espaciado interno */
  border-radius: 8px; /* Bordes redondeados */
  transition: background-color 0.3s; /* Transición suave al cambiar color de fondo */
  font-weight: bold; /* Negrita */
}

/* Hover sobre enlaces */
nav a:hover {
  background-color: #bddae5; /* Fondo azul claro */
  color: #005187; /* Texto azul oscuro */
}

/* Contenido principal */
main.contenido {
  display: flex; /* Flexbox para alinear imagen y texto */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  padding: 40px 20px; /* Espaciado interno */
  gap: 40px; /* Espacio entre elementos */
  flex-wrap: wrap; /* Permitir que se ajusten en varias líneas */
  flex: 1; /* Ocupa todo el espacio disponible */
}

/* Texto dentro del contenido */
.texto {
  max-width: 600px; /* Máximo ancho */
  text-align: justify; /* Justificado */
}

.texto h2 {
  font-size: 34px; /* Tamaño de subtítulo */
  color: #005187; /* Color azul oscuro */
  margin-bottom: 20px; /* Espacio inferior */
}

.texto p {
  font-size: 18px; /* Tamaño de párrafo */
  line-height: 1.6; /* Altura de línea */
  margin-bottom: 10px; /* Espacio inferior */
}

/* Imagen dentro del contenido */
.imagen {
  width: 100%; /* Ancho completo del contenedor */
  max-width: 400px; /* Ancho máximo */
  height: auto; /* Mantener proporción */
  border-radius: 10px; /* Bordes redondeados */
}

/* Footer */
footer {
  background-color: #84B6F4; /* Fondo azul claro */
  color: white; /* Color del texto */
  text-align: center; /* Centrado de texto */
  padding: 10px; /* Espaciado interno */
  margin-top: auto; /* Se pega al final del body */
}

/* Botón para menú hamburguesa (mobile) */
.menu-toggle {
  display: none; /* Oculto por defecto */
  position: fixed; /* Fijo en pantalla */
  top: 15px; /* Separación superior */
  right: 15px; /* Separación derecha */
  font-size: 30px; /* Tamaño del ícono */
  background: none; /* Sin fondo */
  border: none; /* Sin borde */
  color: white; /* Color del ícono */
  z-index: 1000; /* Por encima de todo */
  cursor: pointer; /* Cursor puntero */
}

/* RESPONSIVE: Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  nav.nav {
    display: none; /* Ocultar menú por defecto */
    flex-direction: column; /* Links en columna */
    position: fixed; /* Fijo en pantalla */
    top: 70px; /* Posición desde arriba */
    right: 10px; /* Posición desde la derecha */
    background-color: #84B6F4; /* Fondo azul claro */
    padding: 20px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 10px #999; /* Sombra */
    z-index: 999; /* Encima de otros elementos */
  }

  nav.nav.show {
    display: flex; /* Mostrar menú al activar clase 'show' */
  }

  .menu-toggle {
    display: block; /* Mostrar botón hamburguesa */
  }

  main.contenido {
    flex-direction: column; /* Contenido en columna */
    text-align: center; /* Centrado */
  }

  .texto {
    text-align: justify; /* Texto justificado */
  }
}