body {
  font-family: Calibri, sans-serif;
  color: #444444;
  text-align: center;
  max-width: 900px;      /* límite máximo para pantallas grandes */
  width: 90%;            /* ocupa el 90% del ancho disponible */
  height: auto;
  background-color: #994946;
  margin: 0 auto;        /* centra horizontalmente */
  overflow-y: auto;      /* permite scroll si el contenido lo requiere */
  box-sizing: border-box; /* evita problemas de padding con el ancho */
}

/* --- CABECERA --- */
#cabecera {
  position: relative;              /* Las imágenes absolutas se posicionan sobre este contenedor */
  display: flex;
  justify-content: center;         /* Centra el contenido horizontalmente */
  align-items: center;             /* Centra verticalmente la imagen superpuesta */
  max-width: 900px;                /* Mismo límite que el body */
  width: 100%;                     /* Ocupa todo el ancho disponible dentro del body */
  margin: 0 auto;                  /* Centrado horizontal */
  padding: 0;
  box-sizing: border-box;
}

/* --- Imagen de fondo --- */
.imagen-fondo {
  width: 100%;                     /* Se adapta al ancho del contenedor */
  height: auto;                    /* Mantiene proporciones */
  display: block;                  /* Quita espacios extra debajo de la imagen */
  border-radius: 6px 6px 0 0;      /* Borde redondeado superior (opcional) */
}

/* --- Imagen superpuesta (logo de la Facultad) --- */
.imagen-superpuesta {
  position: absolute;
  right: clamp(6px, 2vw, 15px);    /* margen adaptable a diferentes tamaños */
  top: 50%;
  transform: translateY(-50%);     /* Centrado vertical */
  width: clamp(60px, 12vw, 100px); /* tamaño adaptativo */
  height: auto;
  z-index: 2;
  transition: transform 0.3s ease;
}

.imagen-superpuesta:hover {
  transform: translateY(-50%) scale(1.05); /* leve efecto al pasar el mouse */
}

/* --- Responsive: ajuste de proporciones en móviles --- */
@media (max-width: 600px) {
  #cabecera {
    flex-direction: column;        /* Apila las imágenes si el ancho es muy pequeño */
  }

  .imagen-superpuesta {
    position: static;              /* Quita posicionamiento absoluto */
    transform: none;
    margin-top: 8px;
    width: 80px;
  }
}



/* --- Navegador general --- */
.navegador {
  background: #891F1F;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  position: sticky;
  top: 0;
  padding: clamp(4px, 1vw, 8px) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 1000;
}

/* --- Contenedor de enlaces --- */
.nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(4px, 1.2vw, 12px);
  transition: all 0.3s ease;
}

/* --- Enlaces individuales --- */
.nav-link {
  text-decoration: none;
  padding: clamp(6px, 1.5vw, 12px) clamp(10px, 2vw, 18px);
  color: white;
  border-radius: 6px;
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.nav-link:hover {
  color: #891F1F;
  background-color: #FFFFFF;
  transform: scale(1.03);
}

/* --- Botón hamburguesa --- */
.menu-toggle {
  display: none;
  font-size: clamp(24px, 4vw, 30px);
  background: none;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

/* --- Responsive: menú vertical con animación --- */
@media (max-width: 800px) {
  .navegador {
    justify-content: space-between;
    padding: clamp(8px, 2vw, 12px) 20px;
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    /* --- ANIMACIÓN --- */
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #891F1F;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0; /* se ajusta dinámicamente al abrir */
    max-height: 0; /* menú cerrado */
    overflow: hidden; /* oculta el contenido al cerrar */
    transition: max-height 0.4s ease-out, padding 0.3s ease;
  }

  /* Cuando el menú está activo (se abre) */
  .nav-links.active {
    display: flex;
    max-height: 500px; /* altura suficiente para todos los enlaces */
    padding: clamp(8px, 2vw, 12px) 0;
    transition: max-height 0.5s ease-in, padding 0.3s ease;
  }

  .nav-link {
    display: block;
    width: 90%;
    text-align: center;
    margin: clamp(3px, 1vw, 6px) 0;
    font-size: clamp(1rem, 3.5vw, 1.4rem);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: clamp(8px, 2vw, 12px);
  }

  .nav-link:hover {
    background-color: #fff;
    color: #891F1F;
  }
}

/* --- Extra: pantallas muy pequeñas (p. ej. 320px) --- */
@media (max-width: 400px) {
  .nav-link {
    font-size: clamp(1rem, 4vw, 1.3rem);
    width: 95%;
  }

  .menu-toggle {
    font-size: clamp(22px, 5vw, 26px);
  }
}

#imagen1 {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* === 1. Aplica el mismo formato general del cuerpo-inicio a todos los cuerpos === */
.cuerpo {
  background-color: #ffffff;
  text-align: center;
  margin: 0 auto;
  padding: 10px 20px;
  max-width: 900px;
  box-sizing: border-box;
  border-radius: 8px;        /* opcional: bordes suaves */
}

/*=== 2. Estilo uniforme para títulos h3 dentro del cuerpo ===*/
.cuerpo h3 {
  color: #891F1F;           /* Mantenemos el color base */
  background-color: #f9f9f9; /* Un fondo muy claro para que el h3 se distinga */
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  letter-spacing: 0.5px;
  padding: 10px 15px;       /* Espaciado interno para que el texto no toque los bordes */
  border: 1px solid #ddd;   /* Borde muy claro y sutil */
  border-radius: 4px;       /* Esquinas ligeramente redondeadas para un look moderno */
  
  /* /*Esto crea la sombra que da el efecto de "sombreado en algunas partes" */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); 
}

/* === 3. Estilo para listas dentro del cuerpo === */
.cuerpo ul {
  list-style-position: inside; /* evita sangrías excesivas */
  padding-left: 0;             /* quita margen interno */
  margin: 0 auto;
  text-align: justify;            /* mantiene legibilidad en párrafos largos */
  max-width: 95%;
}

/* === 4. Estilo para los elementos de lista === */
.cuerpo ul li {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid #eee; /* separador visual sutil */
  transition: color 0.3s ease;
}

/* === 5. Efecto hover en los elementos de lista === */
.cuerpo ul li:hover {
  cursor: default;
  background-color: #f9dcdc;
  transition: background-color 0.3s ease;
  border-radius: 8px;
}

/* === Estilos para la sección de contacto === */
.cuerpo a {
  color: #891F1F;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.cuerpo a:hover {
  color: #992f2f;
  text-decoration: underline;
}

.mapa {
  margin-top: 15px;
  border: 2px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  max-width: 100%;
}

/* En móviles el mapa se ajusta al ancho */
@media (max-width: 600px) {
  .mapa iframe {
    height: 250px;
  }
}

/* === 6. Responsive: ajuste en pantallas pequeñas === */
@media (max-width: 600px) {
  .cuerpo {
    padding: 8px 12px;
  }

  .cuerpo h3 {
    font-size: 1.1rem;
  }

  .cuerpo ul li {
    font-size: 0.95rem;
    padding: 0.6em;
  }
  .mapa iframe {
    height: 250px;
  }
}


#cuerpo-inicio {
  text-align: center;             /* Centra el texto */
  max-width: 900px;               /* Ancho máximo, igual que el body */
  margin: 0 auto;                 /* Centra horizontalmente el contenedor */
  padding: 2em 1em;               /* Espaciado interno adaptable */
  background-color: #ffffff;      /* Fondo blanco limpio */
  border-radius: 10px;            /* Bordes redondeados suaves */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra sutil */
  color: #444444;                 /* Color general del texto */
  font-family: Calibri, sans-serif;
}

/* Cada bloque de información */
#cuerpo-inicio section {
  margin-bottom: 2em;             /* Espacio entre bloques */
}

/* Encabezados */
#cuerpo-inicio h3 {
  color: #992f2f;                 /* Tono rojo oscuro coherente con tu fondo */
  font-size: 1.2em;
  margin-bottom: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.05em;         /* Un leve espaciado entre letras */
}

/* Párrafos */
#cuerpo-inicio p {
  margin: 0;
  font-size: 1.2em;
  line-height: 1.5em;             /* Mejor legibilidad */
}

/* 🪄 Efecto visual sutil al pasar el mouse (opcional) */
#cuerpo-inicio section:hover {
  background-color: #f9dcdc;
  transition: background-color 0.3s ease;
  border-radius: 8px;
}

/* 📱 Responsividad: ajustes automáticos en pantallas pequeñas */
@media (max-width: 768px) {
  #cuerpo-inicio {
    max-width: 95%;               /* Ocupa casi todo el ancho en móviles */
    padding: 1.5em 0.8em;
    box-shadow: none;             /* Quita sombra para hacerlo más liviano */
  }

  #cuerpo-inicio h3 {
    font-size: 1.1em;
  }

  #cuerpo-inicio p {
    font-size: 0.95em;
  }

  #cuerpo-inicio section {
    margin-bottom: 1.2em;
  }
}




#pie {
  text-align: center;
  clear: both;
  color: white;
  margin: 20px auto 0 auto;
  padding: 15px 0;
  max-width: 900px;
  width: 90%;
  box-sizing: border-box;
  font-size: clamp(0.9rem, 2vw, 1rem);
}

#hero {
  width: 100%;
  height: 200px; /* Ajustá según gusto */
  background-image: url("fotos/imagen1.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2.5px 15px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2em;
}

/* Redes Sociales */
.redes-sociales {
  list-style: none;
  padding: 0;
  margin: 0;
}

.red-item {
  display: flex;
  align-items: center;   /* centra verticalmente icono + texto */
  gap: 10px;
  margin: 0.8em 0;
}

.icono-red {
  display: block;
}

.icono-wsp {
  width: 28px;
  height: 28px;
}

.icono-ig {
  width: 28px;   /* ← compensación para el padding interno del PNG */
  height: 28px;
}

.redes-sociales a {
  text-decoration: none;
  font-size: 1em;
  color: #4a4a4a;
  font-weight: 600;
}

.redes-sociales a:hover {
  color: #992f2f;
}