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

body{
  overflow-x:hidden;
  margin:0;
  padding:0;
  font-family:Arial, sans-serif;
  background:#0a0a0a;
  color:white;
}
*{
  box-sizing: border-box;
}

img{

  max-width:100%;
  height:auto;

  display:block;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top: 130px;
}
#random-news{
  display: contents;
}
/* =========================
   ANIMACIONES
========================= */

.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:all .8s ease;
}

.fade-in.show{
  opacity:1;
  transform:translateY(0);
}
.fade-section{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s ease;
}

.fade-section.show{
  opacity:1;
  transform:translateY(0);
}

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

header{
  display:flex;
  align-items:center;
  justify-content:center; /* 👈 centra el h1 */
  padding:15px 30px;
  background:black;
  position:sticky;
  top:0;
  z-index:1000;
}

/* NAV a la izquierda */
header nav{
  position:absolute;
  left:30px;
  display:flex;
  gap:15px;
}

/* TÍTULO */
header h1{
  margin:0;
}

nav a{
  margin:0 10px;
  color:#aaa;
  text-decoration:none;
  transition:.3s;
}

nav a:hover{
  color:#76ff03;
}
/* =========================
   HERO GENERAL
========================= */

.hero{
  position:relative;
  width:100%;
  height:auto;
  min-height:260px;
  padding:20px 0;
}
.hero img{
  width:100%;
  height:auto;
  display:block;
}

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

.hero-text{
  text-align:center;
  margin-top:20px;
  margin-bottom:40px;
}
.hero-full img{
  width:100%;
  height:400px; /* puedes subir a 500 si quieres */
  object-fit:cover; /* 🔥 clave para que no se deforme */
  border-radius:12px;
}
.hero-text h2{
  font-size:32px;
  margin-bottom:10px;
  position:relative;
}

.hero-text h2::after{
  content:"";
  display:block;
  width:120px;
  height:3px;
  background:#76ff03;
  margin:10px auto;
}

.hero-text p{
  color:#76ff03;
  font-size:18px;
}

/* =========================
   HERO CYBERPUNK / WUKONG
========================= */

.hero-cyber,
.hero-wukong{
  display:block !important;
  align-items:center;
  justify-content:center;
  gap:40px;
  max-width:1200px;
  margin:auto;
  padding:20px;
  box-sizing: border-box;
}

.hero-cyber img,
.hero-wukong img{
   width:100%;
  max-width:none; /* 👈 elimina el límite */
  height:400px;
  object-fit:cover;
  display:block;
  border-radius:15px;
}
.hero-small img{
  width:100%;
  max-width:700px;
  margin:auto;
  display:block;
  border-radius:12px;
}

.hero-text{
  text-align:center;
  margin-top:15px;
}
.hero-side-text{
  max-width:350px;
}

.hero-side-text h2{
  font-size:42px;
  margin-bottom:10px;
}

.hero-side-text p{
  color:#76ff03;
  font-size:22px;
}
/* =========================
   Layout general
========================= */

.layout{
  display:flex;
  align-items:flex-start; /* 👈 IMPORTANTE */
  gap:30px;
  max-width:1200px;
  margin:40px auto;
}

/* contenido izquierda */
.content{
  flex: 0 0 85%;
}

/* sidebar derecha */
.sidebar{
  flex: 0 0 20%;
  max-width:320px;
  background:#111;
  margin-top:20px;
  padding:20px;
  border-radius:15px;
  height:fit-content;

  margin-top: 30px; /* 👈 AJUSTA ESTO */
}
.sidebar-news{
  display:flex;
  flex-direction:column;
  gap:15px;
}
/* tarjetas */
.side-card{
  display:block; /* 👈 cambia de flex a bloque */
  padding:10px;
  margin-bottom:15px;
  background:#1a1a1a;
  border-radius:12px;
  overflow:hidden;
   text-align:center;

  text-decoration:none;
  color:white;
  transition:.3s;
}
.sidebar h3{
  margin-bottom:20px;
}
/* imagen */
.side-card img{
  width:100%;
  height:auto; /* 👈 clave */
  max-height:120px; /* opcional */
  object-fit:contain; /* 👈 muestra completa */
  background:#000; /* opcional, relleno */
  border-radius:10px;
}


/* texto */
.side-info h4{
  font-size:18px;
  font-weight:bold;
}

.side-info p{
  margin:2px 0 0;
  font-size:18px;
  color:#ffffff;
}

/* hover */

.side-card:hover p{
  color:black;
}
.side-card:hover{
  background:#76ff03;
  color:black;
}
/* =========================
   PAGINAS ESPECIFICAS
========================= */

.home-page .hero{
  padding:40px 0;
  background:url("https://img.freepik.com/vector-gratis/abstracto-gradiente-fondo-lineas-diagonales_23-2150539669.jpg?semt=ais_rp_progressive&w=740&q=80") no-repeat center/cover;
}

.home-page .slider img{
  object-fit:cover;
  object-position:center 60%;
}

.wukong-page{
  background:linear-gradient(to right,#0f0f0f,#1a1a1a);
}

/* =========================
   SLIDER
========================= */

.slider{
  position:relative;
  width:90%;
  max-width:900px;
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  height:450px;
}
.slider a{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease;
}
.slider a.active{
  opacity:1;
  z-index:2;
}
.slider img{
  width:100%;
  height:100%;
  object-fit:conver;

  transform: scale(1.03);
  transition: transform 6s ease;
}

.slider a.active img{
  transform: scale(1);
}
/* =========================
   BOTONES SLIDER
========================= */

.prev,
.next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.5);
  border:none;
  color:white;
  font-size:30px;
  padding:10px;
  cursor:pointer;
  z-index:4;
}

.prev{ left:10px; }
.next{ right:10px; }

.prev:hover,
.next:hover{
  background:rgba(118,255,3,.5);
}

/* =========================
   NEWS
========================= */

.news{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
  padding:60px;
  margin:40px 20px;
  background:#111;
  border-radius:20px;
}

.news h2{
  grid-column:1 / -1;
  margin-bottom:30px;
  text-align:center;
  font-size:32px;
}

/* =========================
   TARJETAS
========================= */

.card{
  text-decoration:none;
  color:white;
}

.card article{
  background:#1a1a1a;
  border-radius:15px;
  overflow:hidden;
  transition:.3s;
  border:1px solid #2a2a2a;
  position:relative;
}
.card img{
  width:100%;
  height:160px;
  object-fit:contain; /* 👈 NO corta */
}

/* texto */
.card h3{
  padding:10px 15px 0;
}

.card p{
  padding:0 15px 15px;
  color:#aaa;
}
.card article:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 10px 30px rgba(118,255,3,.3);
}

/* =========================
   NOTICIA GRANDE
========================= */

.big-news{
   margin-top:0;
  padding:20px;
  max-width:900px;
  margin:auto;
}

.big-news h2{
  font-size:32px;
  margin-bottom:20px;
}

.big-news img{
  width:100%;
  max-width:100%;   /* 👈 que use todo el ancho */
  height:auto;
  display:block;
  border-radius:12px;
}

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

.big-news p,
.news p{
  font-size:16px;
  line-height:1.8;
  letter-spacing:.5px;
  color:#ccc;
}

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

footer{
  text-align:center;
  padding:20px;
  background:black;
}

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

@media (max-width:768px){

header{
    display:flex; /* 👈 volvemos a flex */
    flex-direction:column; /* 👈 uno debajo del otro */
    align-items:center;
    text-align:center;
    gap:10px;
  }
  header nav{
  position: static; /* 👈 quita el absolute */
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 👈 permite que bajen en línea */
  gap: 10px;
}
.slider{
  width:100%;
  margin:0 auto;
  height:auto;
  aspect-ratio: 16 / 9; /* 👈 mantiene proporción */
  object-position: center center;
}
.slider img{
  width:100%;
  height:100%;
  object-fit: contain; /* 👈 NO recorta */
}

nav a{
  margin: 5px;
  font-size: 14px;
}
.hero-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-vertical .hero-side-text{
  text-align:center;
  width:100%;
  max-width:100%; /* 👈 ESTA ES LA CLAVE */
}
.hero-vertical .hero-side-text h2{
  margin:0;
}

.hero-vertical .hero-side-text p{
  margin-top:5px;
}
.hero-cyber,
.hero-wukong{
  flex-direction:column;
  display:flex;
  text-align:center;
  gap:25px;
  padding: 0 10px;
}
.wukong-page .hero-wukong img{
  width:100%;
  object-fit:cover;
  object-position:center center;
}
.hero-cyber img,
.hero-wukong img{
  width:100% !important;
  aspect-ratio: 20 / 9;
  object-fit: cover;
  max-height:300px; /* 👈 ajusta */
}
.hero-side-text{
  max-width:100%;
}

.hero-side-text h2{
  font-size:28px;
}

.hero-side-text p{
  font-size:18px;
}

.news{
  padding:20px;
}
 html{
scroll-padding-top: 150px; /* 👈 más alto porque el header crece */
}

.layout{
  flex-direction:column;
  gap:10px; /* 👈 reduce espacio */
}

.sidebar{
  margin:0;           /* 👈 elimina separación rara */
  max-width:100%;
  width:100%;
}
.content{
  flex:100%;
  max-width:100%;
}

}