/* ======================
   Colores principales
====================== */
:root {
  --azul-oscuro: #0A192F;
  --azul-medio: #112240;
  --azul-suave: #1E3A5F;
  --turquesa: #64FFDA;
  --dorado: #FFD166;
  --texto-claro: #E6F1FF;
}

/* ======================
   Base
====================== */
body {
  font-family: 'Open Sans', sans-serif;
  background: var(--azul-oscuro);
  color: var(--texto-claro);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

/* ======================
   Header y navegación
====================== */
header {
  background: var(--azul-medio);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 2em;
  color: var(--turquesa);
}

header .logo {
  width: 55px;
  height: 55px;
  border-radius: 12%;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

nav ul li a {
  color: var(--texto-claro);
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

nav ul li a:hover {
  color: var(--turquesa);
}

/* ======================
   Secciones
====================== */
section {
  background: var(--azul-suave);
  padding: 50px 25px;
  max-width: 900px;
  margin: 30px auto;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

section h2 {
  color: var(--turquesa);
  margin-bottom: 20px;
}

/* ======================
   Carrusel
====================== */
.gallery {
  background: var(--azul-suave);
  max-width: 850px;
  margin: 40px auto;
  border-radius: 12px;
  overflow: hidden;
}

.gallery-cell {
  width: 70%;
  margin-right: 10px;
  border-radius: 10px;
  overflow: hidden;
}

.gallery-cell img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 10px;
}

/* ======================
   Botones de descarga
====================== */
a.descargar {
  display: inline-block;
  margin: 10px 10px 10px 0;
  padding: 12px 20px;
  background: var(--turquesa);
  color: #0A192F;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: 0.3s;
}

a.descargar:hover {
  background: var(--dorado);
  transform: translateY(-2px);
}

/* ======================
   Redes sociales
====================== */
.redes a {
  margin-right: 15px;
  text-decoration: none;
  font-size: 1.2em;
  color: var(--turquesa);
  transition: 0.3s;
}

.redes a:hover {
  color: var(--dorado);
}

/* ======================
   LINKS ÚTILES (nuevo estilo blanco/negro)
====================== */
#links ul {
  list-style: none;
  padding: 0;
}

#links ul li {
  margin-bottom: 10px;
}

#links ul li a {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

#links ul li a:hover {
  background: var(--dorado);
  color: #000;
  transform: translateY(-2px);
}

/* ======================
   Footer
====================== */
footer {
  text-align: center;
  padding: 25px 20px;
  background: var(--azul-medio);
  color: var(--texto-claro);
}

/* ======================
   Animación tipo cortina
====================== */
.intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--azul-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

.intro-text {
  font-size: 3.5em;
  color: var(--turquesa);
  letter-spacing: 5px;
  font-weight: bold;
  opacity: 0;
  animation: fadeInText 2s ease 1s forwards;
}

.curtain {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--azul-oscuro);
  transform: translateY(0);
  animation: openCurtain 2.5s ease forwards;
}

@keyframes openCurtain {
  0% { transform: translateY(0); }
  80% { transform: translateY(-100%); }
  100% { transform: translateY(-100%); display: none; }
}

@keyframes fadeInText {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.intro-screen.hide {
  animation: fadeOutIntro 1s ease forwards;
}

@keyframes fadeOutIntro {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* ======================
   Responsivo
====================== */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }

  nav ul {
    flex-wrap: wrap;
  }

  .gallery-cell img {
    height: 250px;
  }

  #links ul li a {
    display: block;
    text-align: center;
  }
}