/* ===== RESET ===== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: Arial, Helvetica, sans-serif;
}

.container{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
}


/* ===== HEADER ===== */

.header{
  background:#f2f2f2;
  padding:15px 0;
  position:relative;
  z-index:1000;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}


/* ===== MENU ===== */

.menu{
  display:flex;
  list-style:none;
  gap:30px;
}

.menu a{
  text-decoration:none;
  color:#000;
  font-weight:500;
  position:relative;
  padding:5px 0;
}


/* Hover artístico elegante */

.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:#d6b86b;
  transition:0.3s;
}

.menu a:hover::after{
  width:100%;
}


/* ===== HAMBURGUESA ===== */

.menu-toggle{
  display:none;
  font-size:32px;
  cursor:pointer;
}


/* ===== HERO ===== */

.hero{
  background:#000;
  color:#fff;
  padding:80px 0 220px; /* MÁS espacio abajo */
  position:relative;
  overflow:hidden;
}

.hero-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  position:relative;
  z-index:2;
}

.hero-img img{
  width:100%;
  max-width:420px;
}

.subtitle{
  color:#d6b86b;
  letter-spacing:2px;
  margin-bottom:10px;
}

.hero-text h1{
  font-size:48px;
  margin-bottom:20px;
}

.hero-text p{
  margin-bottom:15px;
  line-height:1.6;
}

.blue{
  color:#2ea3f2;
}

.link{
  color:#2ea3f2;
  display:inline-block;
  margin-bottom:20px;
  text-decoration:none;
}

.btn{
  padding:12px 28px;
  border:2px solid #fff;
  background:transparent;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}

.btn:hover{
  background:#fff;
  color:#000;
}



/* ===== FOOTER ===== */

.footer{
  background:#111;
  color:#aaa;
  text-align:center;
  padding:30px 0;
}


/* ===== RESPONSIVE ===== */

@media(max-width:900px){

  .menu-toggle{
    display:block;
  }

  .menu{
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:#ffffff;
    flex-direction:column;
    align-items:center;
    gap:25px;

    /* OCULTO CON ANIMACIÓN */
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;

    box-shadow:0 10px 30px rgba(0,0,0,0.1);
  }

  .menu.active{
    max-height:500px;
    padding:25px 0;
  }

  .hero-content{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-img{
    margin-bottom:30px;
  }

  .arte-bg{
    font-size:160px;
    bottom:-60px;
    opacity:0.2;
  }
}

/* ===== SECCIÓN SERIES ===== */
/* ===== SECCIÓN SERIES ===== */

.series{
  background:#000;
  padding:80px 0;
}


/* GRID RESPONSIVE */

.series-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:40px;
}


/* ===== TARJETA ===== */

.card{
  background:#fff;
  padding:25px;
  position:relative;
  transition:0.35s ease;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}


/* ===== MARCO DE IMAGEN VERTICAL 🔥 */

.img-box{
  width:100%;
  aspect-ratio:4 / 5;    /* 🔥 FORMATO CUADRO */
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
  overflow:hidden;
}


/* ===== IMAGEN ===== */

.img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ===== TEXTO ===== */

.card-text h3{
  margin-bottom:10px;
  font-size:18px;
  font-weight:bold;
}

.card-text p{
  font-size:14px;
  color:#555;
  line-height:1.5;
}


/* ===== HOVER ===== */

.card:hover{
  background:#e6e6e6;
  transform:translateY(-6px);
}


/* ===== PESTAÑA LATERAL ===== */

.card::after{
  content:"";
  position:absolute;
  top:0;
  right:-14px;
  width:14px;
  height:100%;
  background:#fff;
  opacity:0;
  transition:0.3s;
  box-shadow:-10px 0 25px rgba(0,0,0,0.35);
}

.card:hover::after{
  opacity:1;
  right:0;
}


/* ===== PORTFOLIO HEADER ===== */

.portfolio-header{
  background:#e9e9e9;   /* gris claro */
  padding:70px 0;
  text-align:center;
}


/* TEXTO PEQUEÑO */

.portfolio-subtitle{
  color:#666;
  letter-spacing:2px;
  font-size:18px;
  margin-bottom:15px;
}


/* TÍTULO PRINCIPAL */

.portfolio-title{
  font-size:36px;
  font-weight:600;
  color:#222;
}



/* parallax movil*/
@media(max-width:900px){

  .parallax-expo{
    background-attachment:scroll;
    height:350px;
  }

  .parallax-content h1{
    font-size:26px;
  }

  .parallax-content h2{
    font-size:20px;
  }

}

/* ===== PARALLAX EXPOSICIÓN ===== */

.parallax-expo{
  height:450px;

  background-image:url("expo.jpg"); /* tu imagen */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  /* 🔥 EFECTO PARALLAX */
  background-attachment:fixed;

  position:relative;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;
  color:#fff;
}


/* OVERLAY OSCURO */

.parallax-expo::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}


/* TEXTO */

.parallax-content{
  position:relative;
  z-index:2;
}

.parallax-content h2{
  font-size:28px;
  letter-spacing:2px;
  margin-bottom:10px;
  font-weight:500;
}

.parallax-content h1{
  font-size:40px;
  font-weight:600;
}