@charset "UTF-8";

<style type="text/css">
/* Oculta el layout por defecto */
body > table {
  display:none!important;
}

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

body {
  font-family:'Arial',sans-serif;
  background:linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(https://img.mfcimg.com/photos2/393/39335959/480-723-227-614-14616756.jpg) center/cover no-repeat fixed;
  color:#f0f0f0;
}

/* HERO */
.hero {
  position:relative;
  height:60vh;
  min-height:400px;
  background-size:cover;
  background-position:center;
}

.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9));
}

.hero-content {
  position:relative;
  z-index:1;
  text-align:center;
  top:50%;
  transform:translateY(-50%);
  padding:0 20px;
}

.hero-content h1 {
  font-size:3rem;
  color:#ff33cc;
  text-shadow:0 0 10px #ff66cc;
  letter-spacing:4px;
}

.hero-content h2 {
  font-size:2rem;
  color:#ddd;
  margin-top:10px;
  text-shadow:0 0 8px #ff99cc;
}

/* FRASE DE BIENVENIDA con corazones y brillitos */
.welcome {
  position:relative;
  text-align:center;
  margin:20px auto;
  font-size:1.2rem;
  color:#ffd6f7;
  text-shadow:0 0 6px #ff99cc;
  max-width:800px;
}

.welcome::before {
  content:"??? ";
}

.welcome::after {
  content:" ???";
}

/* INTRO */
.intro {
  max-width:800px;
  margin:40px auto;
  font-style:italic;
  font-size:1rem;
  text-align:center;
  color:#ccc;
  padding:0 20px;
}

/* CALL-TO-ACTION (Tip Menu) */
.cta {
  background:#111;
  padding:30px 20px;
  text-align:center;
  margin-top:20px;
}

.cta h3 {
  font-size:1.5rem;
  color:#33ffcc;
  margin-bottom:20px;
  text-shadow:0 0 6px #33ffcc;
}

.tip-menu {
  display:inline-grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:15px;
  max-width:800px;
  margin:0 auto;
}

.tip {
  background:linear-gradient(135deg,#ff3399,#ff66cc);
  padding:15px;
  border-radius:12px;
  font-weight:bold;
  box-shadow:0 0 12px #ff99cc;
  transition:transform .3s,box-shadow .3s;
}

.tip:hover {
  transform:translateY(-5px);
  box-shadow:0 0 20px #fff;
}

/* Resto de secciones (Fans, Badge, Gallery) */
.fans {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:40px;
  margin:40px 20px;
}

.column {
  flex:1 1 200px;
}

.column h4 {
  color:#ff33cc;
  text-shadow:0 0 5px #ff66cc;
  margin-bottom:10px;
}

.column li {
  list-style:none;
  margin-bottom:6px;
  font-size:.9rem;
  color:#ddd;
}

.badge {
  position:relative;
  width:200px;
  height:200px;
  margin:30px auto;
  background:radial-gradient(circle at center,#222,#000);
  border:4px solid #33ffcc;
  border-radius:50%;
  box-shadow:0 0 15px #33ffcc;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.badge::before {
  content:"FAN CLUB";
  position:absolute;
  top:25px;
  width:100%;
  font-size:.8rem;
  color:#fff;
  letter-spacing:2px;
}

.badge span {
  font-size:2.5rem;
  color:#33ffcc;
  font-weight:bold;
}

.badge small {
  position:absolute;
  bottom:25px;
  font-size:.8rem;
  color:#fff;
}

.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:15px;
  max-width:900px;
  margin:40px auto;
  padding:0 20px;
}

.thumb {
  position:relative;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 0 8px #000;
}

.thumb img {
  width:100%;
  display:block;
}

.duration {
  position:absolute;
  bottom:8px;
  right:8px;
  background:rgba(0,0,0,0.7);
  padding:4px 8px;
  border-radius:4px;
  font-size:.85rem;
  color:#fff;
}

/* Responsive */
@media(max-width:600px) {
  .hero-content h1 {
    font-size:2.2rem;
  }

  .hero-content h2 {
    font-size:1.5rem;
  }

  .welcome {
    font-size:1rem;
  }
}