/* Marca / título */
.brand h1 {
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 14px;   /* << aumenta la separación con la descripción */
}

/* Nav principal */
nav.main-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 100px;      /* << espacio extra entre menú y el título */
}

/* =========================
   RESET Y BASE
   ========================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter, system-ui, Arial;color:#eaeaea;background:#0b0b0b}
a{color:inherit;text-decoration:none}

/* =========================
   NAV Y HEADER
   ========================= */
header.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2));backdrop-filter:blur(3px);padding:10px 20px}
.nav-inner{max-width:1500px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:30px;position:relative}
nav.main-nav{display:flex;gap:18px;align-items:center}
nav.main-nav a{padding:8px 12px;border-radius:8px;transition:background .18s ease}
nav.main-nav a:hover{background:rgba(255,255,255,0.06)}

.brand{position:absolute;left:50%;transform:translateX(-50%);text-align:center;max-width:60%}
.brand h1{font-size:28px;letter-spacing:2px;margin-bottom:6px}
.brand p{font-size:12px;opacity:0.9;line-height:1.4;margin-top:6px}

/* =========================
   SECCIONES
   ========================= */
main{max-width:1100px;margin:28px auto;padding:12px}
.section-hero{position:relative;border-radius:10px;overflow:hidden;margin-bottom:18px;height:110px}
.section-hero::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.5)}
.section-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(0deg, rgba(40,40,40,0.95) 15%, rgba(40,40,40,0.6) 40%, rgba(40,40,40,0.1) 80%)}
.section-hero .container{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding:14px}
.section-hero h2{margin:0;color:#fff;font-size:20px}

/* =========================
   TARJETAS
   ========================= */
.card-row{display:flex;gap:16px;align-items:center;padding:16px 8px}
.card-row img{max-width:200px;width:100%;height:auto;border-radius:8px;object-fit:cover}

.personaje{display:flex;gap:18px;align-items:flex-start}
.personaje .meta{flex:1}
.personaje h3{margin-bottom:6px}
.personaje p{line-height:1.4}

.idea{display:flex;gap:18px;align-items:flex-start}
.idea .texto{flex:1}

.separator{height:1px;background:rgba(255,255,255,0.06);margin:8px 0;border-radius:2px}

/* Curiosidades */
.curiosidades ul{padding-left:1.2rem;margin-top:8px}
.curiosidades li{margin:8px 0}

/* Responsivo */
@media (max-width:760px){
  .personaje, .idea{flex-direction:column}
  .brand{position:static;transform:none;padding:10px 0;max-width:100%}
  .nav-inner{justify-content:space-between}
}

/* Animaciones */
.fade-in{opacity:0;transform:translateY(10px);transition:all .6s ease}
.fade-in.visible{opacity:1;transform:none}

/* Footer */
footer{padding:18px;text-align:center;color:#999;font-size:13px}

/* Logo fijo arriba a la izquierda */
.logo {
  position: fixed;
  top: 10px;     /* distancia desde arriba */
  left: 10px;    /* distancia desde la izquierda */
  z-index: 1000; /* por encima de todo */
}

.logo img {
  width: 50px;   /* ajusta el tamaño del logo */
  height: auto;
  border-radius: 6px; /* opcional, redondear bordes */
}