/* ============================= */
/* BASE */
/* ============================= */

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background-color: #111;
  color: #eaeaea;
  animation: fadeInPage 0.6s ease;
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 40px;
}

.nav {
  position: fixed;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 50px;
  z-index: 9999;
}


.nav a {
  color: #bbb;
  text-decoration: none;
  margin-left: 20px;
  font-size: 14px;
}

.nav a:hover {
  color: #fff;
}

/* ============================= */
/* UMBRAL */
/* ============================= */

 .umbral {
  
   max-width: 700px;
  
   margin: 120px auto 120px auto;
  
   text-align: center;
  
   line-height: 1.8;
  
   font-size: 18px;
 
}

 .umbral h1 {
  
   font-weight: normal;
  
   letter-spacing: 2px;
 
}

 

.umbral em {
  
   display: block;
  
   margin-bottom: 40px;
  
   font-style: italic;
  
   font-size: 14px;
  
   letter-spacing: 1px;
 }

 .umbral p {
   font-size: 18px;
   line-height: 1.8;
   margin-bottom: 30px;
   color: #ddd;
 }

/* ============================= */
/* ESTACIONES */
/* ============================= */

.estacion {
  margin: 160px 0;
  padding: 180px 20px;
  text-align: center;
}

.estacion h2 {
  margin-bottom: 100px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #888;
}

.estacion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1100px;
  margin: 0 auto;
}

.texto-estacion p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #bdbdbd;
  margin-bottom: 20px;
}

/* Ritmo personalizado */

.estacion-uno {
  padding-top: 220px;
  padding-bottom: 200px;
}

.estacion-dos {
  margin-top: 140px;
  margin-bottom: 140px;
}

.estacion-tres {
  margin-top: 160px;
  margin-bottom: 120px;
}

.estacion-cuatro {
  margin-top: 200px;
  margin-bottom: 260px;
}

/* ============================= */
/* MICRO-TRANSICIÓN */
/* ============================= */

/* ============================= */
/* OBRAS */
/* ============================= */

.obra {
  max-width: 900px;
  margin: 0 auto 120px auto;
  text-align: center;
}

.obra h2 {
  font-size: 1.1rem;
  font-weight: normal;
  margin-bottom: 10px;
}

.ficha {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #777;
  margin-bottom: 50px;
}

.obra img {
  width: 100%;
  height: auto;
  display: block;
  margin: 40px auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.obra img.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in */


/* ============================= */
/* CIERRE SUAVE */
/* ============================= */

.cierre {
  margin-top: 240px;
  margin-bottom: 300px;
  text-align: center;
  font-size: 0.9rem;
  color: #777;
  letter-spacing: 0.08em;
}

/* Ajuste fino ficha técnica */
.obra .ficha,
.obra-ficha {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-bottom: 40px;
  opacity: 0.7;
}

/* Mayor separación entre ficha e imagen */


/* Pausa antes de cada nueva estación */
.estacion + .estacion {
  margin-top: 240px;
}

.cierre {
  text-align: center;
  margin: 280px 0 200px 0;
  font-size: 0.9rem;
  color: #777;
  letter-spacing: 0.08em;
}

.bio {
  padding: 200px 20px 160px 20px;
  display: flex;
  justify-content: center;
}

.bio-container {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.85;
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeBio 1s ease forwards;
}

.bio h1 {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 2px;
  margin-bottom: 90px;
  text-align: left;
}

.bio p {
  text-align: left;
  margin-bottom: 28px;
  color: #cfcfcf;
}

@keyframes fadeBio {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  padding: 100px 20px 120px 20px;
}

footer {
  text-align: center;
  padding: 60px 0 40px 0;
  font-size: 13px;
  color: #777;
}

.hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;

  background-image: url("../images/descenso.jpg");
  background-size: cover;
  background-position: center;
}

.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.65);
  z-index: 1;
}

.hero-content h1 {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 2.5px;
  color: #f2f2f2;
  margin-bottom: 28px;
}

.hero-content h2 {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 2px;
  color: #a8a8a8;
}

.hero-content {
  opacity: 0;
  transform: translateY(20px);
  animation: aparecer 1.6s ease forwards;
  position: relative;
  z-index: 2;
}


@keyframes aparecer{
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.declaracion {
  padding: 180px 20px 160px 20px;
  display: flex;
  justify-content: center;
}

.declaracion-container {
  max-width: 720px;
  line-height: 1.85;
  text-align: left;
}

.declaracion h1 {
  font-size: 17px;
  letter-spacing: 2px;
  margin-bottom: 100px;
  font-weight: 400;
}


.declaracion p {
  font-size: 15px;
  margin-bottom: 30px;
  color: #d0d0d0;
}


/* ----------------------------- */
/* RESPONSIVE */
/* ----------------------------- */

@media (max-width: 1100px) {

  .estacion-grid {
    gap: 60px;
    padding: 0 40px;
  }

}

@media (max-width: 900px) {

  .estacion {
    padding: 140px 0;
  }

  .estacion-grid {
    grid-template-columns: 1fr;
    gap: 120px;
  }

  .obra {
    width: 88%;
    margin: 0 auto;
  }
 
  .obra img {
    width: 100%;
    height: auto;
    display: block;
    margin: 40px auto;
    opacity: 1;
    margin-top:30px;
  }

  .estacion h2 {
    margin-bottom: 80px;
  }

  .micro-transicion {
   font-size: 13px;
   color: #777;
   text-align: center;
   font-style: italic;
   letter-spacing: 1px;
   margin: 120px auto 40px auto;
   max-width: 720px;
  }
 }

@media (max-width: 600px) {

 .estacion {
    padding: 120px 0;
 }

 .obra {
  width: 86%;
 }

 .estacion h2 {
   font-size: 12px;
   letter-spacing: 1.5px;
 }

 .obra h3 {
   font-size: 15px;
 }

 .ficha {
   font-size: 12px;
 }

 .micro-transicion {
    width: 86%;
  }

}

@media (max-width: 900px) {

  .declaracion-container {
    width: 88%;
  }

}

.expo{
  font-size:0.9rem;
  letter-spacing:0.1em;
  color:#777;
  margin-top:20px;
}

@media (max-width: 600px) {

  .declaracion-container {
    width: 86%;
  }

  .declaracion p {
    font-size: 14px;
  }

img {
  max-width:100%;
  height:auto;
  opacity: 1 !important;
  display: block !important;
}

.catalogo {
  margin-top: 100px;
  text-align: center;
}

.catalogo h2 {
  font-weight: normal;
  letter-spacing: 2px;
  margin: 20px 0;
}

.boton-pdf {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  border: 1px solid #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.boton-pdf:hover {
  background-color: #fff;
  color: #000;
}

}