/* Estilos base para la página informativa */
:root{
  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --accent: #0b6efd;
  --muted:#555;
  /* Opacidades configurables */
  --hero-bg-opacity: 0.6; /* opacidad del bloque central (hero-content) */
  --player-bg-opacity: 0.5; /* opacidad del reproductor embebido */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Segoe UI, Roboto, Arial, sans-serif;color:#222}
body{
  /* Fondo: imagen provista por el usuario (assets/fnexos01.png) con fallback a gradiente */
  background-image: url('../assets/fnexos01.png'), var(--bg-gradient);
  background-size: cover, auto;
  background-position: center center;
  background-repeat: no-repeat, no-repeat;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
.site-header{display:flex;justify-content:center;align-items:center;padding:28px 16px}
.logo-top{
  /* Aumentado ~40% respecto al valor base 220px -> 308px. */
  width:308px;
  /* permitimos que en pantallas pequeñas no ocupe demasiado */
  max-width:70%;
  height:auto;
  display:block;
}

.hero{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.hero-content{
  /* Fondo parcialmente transparente para dejar ver la imagen de fondo.
     La opacidad se controla con la variable --hero-bg-opacity en :root */
  background: rgba(255,255,255,var(--hero-bg-opacity));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding:28px;border-radius:12px;max-width:900px;text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.35);
  transition: background-color 200ms ease, transform 200ms ease;
}
.hero-content h1{margin:0 0 12px;font-size:clamp(20px,3.6vw,36px);color:var(--accent)}
.hero-content p{margin:0 0 12px;color:#000000;line-height:1.6}
.extra{margin-top:6px}

.socials{background:transparent;padding:18px 16px}
.socials-inner{display:flex;gap:18px;justify-content:center;align-items:center}
.social-link{color:var(--accent);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.social-link svg{display:block}

.site-footer{border-top:1px solid rgba(0,0,0,0.06);padding:14px 16px;background:transparent}
.creator{display:flex;gap:12px;align-items:center;justify-content:center}
.creator-logo{
  /* Evitar deformación: fijamos solo la altura (o solo el ancho) y dejamos
     que el otro eje se ajuste automáticamente. */
  height:40px;
  width:auto; /* mantiene la relación de aspecto original */
  max-width:120px; /* límite razonable en pantallas grandes */
  display:inline-block;
  object-fit:contain; /* por si se necesita recorte/ajuste dentro del contenedor */
}
.creator-name{font-weight:600;color:#333}

/* Responsive tweaks */
@media (max-width:480px){
  /* En móviles reducimos el logo principal para que no ocupe demasiado */
  .logo-top{width:220px;max-width:60%}
  .creator-logo{height:32px}
  .hero-content{padding:18px}
}