:root {
  --azul-oscuro: #011f4b;
  --azul-medio1: #03396c;
  --azul-medio2: #005b96;
  --azul-claro: #6497b1;
  --azul-palido: #b3cde0;
  --blanco: #ffffff;
  --sombra: rgba(0, 0, 0, 0.2);
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--azul-palido);
  color: #222;
  overflow-x: hidden;
}

/* Navbar */
.navbar {
  background-color: var(--azul-medio1) !important;
}

.navbar .navbar-brand img { filter: invert(1); width: 50px; height: 50px; }
.nav-link { color: var(--blanco) !important; transition: color 0.3s ease; }
.nav-link:hover, .nav-link.active { color: var(--azul-palido) !important; text-decoration: underline; }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul-medio2));
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--blanco);
}
.hero-logo-invert { filter: invert(1); width: 150px; height: 150px; }
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Orgullo Institucional */
.orgullo-section {
  background-color: var(--azul-claro);
  color: var(--blanco);
}
.orgullo-card { border-radius: 1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.orgullo-card:hover { transform: translateY(-6px); box-shadow: 0 6px 20px var(--sombra); }

/* Timeline */
.timeline-wrapper { position: relative; overflow: hidden; max-width: 100%; padding: 1rem 0; }
.timeline-track { display: flex; transition: transform 0.7s ease-in-out; }
.timeline-card { background: var(--blanco); border-radius: 1rem; min-width: 270px; max-width: 270px; height: 250px; margin: 0 8px; flex-shrink: 0; box-shadow: 0 4px 10px var(--sombra); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.timeline-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px var(--sombra); }

/* Botones Timeline */
.timeline-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--azul-medio1); color: var(--blanco); border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, transform 0.2s; }
.timeline-btn:hover { background-color: var(--azul-medio2); transform: scale(1.1); }
.timeline-btn.left { left: -20px; }
.timeline-btn.right { right: -20px; }

/* Galería */
.galeria-img { transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
.galeria-img:hover { transform: scale(1.05); box-shadow: 0 8px 20px var(--sombra); }

/* Botón Volver Arriba */
.btn-up { position: fixed; bottom: 25px; right: 25px; background-color: var(--azul-medio2); color: var(--blanco); border: none; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.4s ease; box-shadow: 0 4px 10px var(--sombra); z-index: 1000; }
.btn-up:hover { background-color: var(--azul-medio1); }
.btn-up.show { opacity: 1; visibility: visible; }

/* Footer */
footer { background-color: var(--azul-oscuro); padding: 20px 0; color: var(--blanco); }
footer a { color: var(--blanco); transition: color 0.3s; }
footer a:hover { color: var(--azul-palido); }

/* Responsivo */
@media (max-width: 768px) {
  .timeline-card { min-width: 230px; max-width: 230px; height: 220px; }
  .timeline-btn.left { left: 5px; }
  .timeline-btn.right { right: 5px; }
  .orgullo-section p.lead { font-size: 1rem; }
  .orgullo-card { margin-bottom: 1rem; }
  .hero h1 { font-size: 1.8rem; }
  .hero p.lead { font-size: 1rem; }
  .hero .btn { font-size: 0.9rem; padding: 0.5rem 1rem; }
}

/* Logo navbar invertido y hero en móviles */
@media (max-width: 576px) {
  .navbar .navbar-brand img,
  .hero-logo-invert {
    filter: invert(1);
    width: 50px; /* navbar */
  }

  .hero-logo-invert {
    width: 120px; /* hero */
    height: 120px;
  }
}

@media (max-width: 768px) {
  .timeline-card {
    min-width: 230px;
    max-width: 230px;
    height: 220px;
  }
  .timeline-btn.left {
    left: 5px;
  }
  .timeline-btn.right {
    right: 5px;
  }
}