*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-family: "Inter", system-ui, sans-serif; color: #eef0ff; line-height: 1.55;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(255,63,180,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(57,255,136,.12), transparent 60%),
    #070a1c;
  min-height: 100vh;
}
.top { text-align: center; padding: 72px 16px 40px; max-width: 760px; margin: auto; }
.kicker { text-transform: uppercase; letter-spacing: .3em; font-size: .8rem; font-weight: 800; color: #3ee6ff; margin: 6px 0 14px; }
h1 { margin: 0 0 .3em; font-weight: 400; }
/* Mismo logotipo de texto que en las plantillas */
.logo-type { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.logo-sub {
  font-family: "Fredoka", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(1rem, 3.2vw, 1.6rem); color: #fff; text-shadow: 0 0 4px #ff5cc8, 0 0 12px rgba(255,60,190,.7);
}
.logo-script {
  font-family: "Yellowtail", cursive; font-size: clamp(4rem, 13vw, 7.5rem); color: #fff6c9; margin-top: -.05em;
  text-shadow: 0 0 2px #ffd54a, 0 0 8px #ffd54a, 0 0 22px rgba(255,170,40,.75), 0 0 48px rgba(255,170,40,.5);
}
.intro { color: #b5bbdc; font-size: 1.08rem; margin: 0; }
.picks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px;
  max-width: 1200px; margin: 0 auto; padding: 24px 16px 72px;
}
.pick {
  display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden;
  background: #0f1433; border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pick:hover, .pick:focus-visible { transform: translateY(-6px); border-color: rgba(255,63,180,.6); box-shadow: 0 0 34px rgba(255,63,180,.25); outline: none; }
.thumb { aspect-ratio: 16 / 10; background: #050713; overflow: hidden; display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .4s; }
.thumb.cover img { object-fit: cover; padding: 0; }
.pick:hover .thumb img { transform: scale(1.05); }
.pick-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.num { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #ff3fb4; font-weight: 800; }
.pick h2 { margin: .2em 0 .4em; font-size: 1.5rem; }
.pick p { color: #aab1d6; margin: 0 0 18px; font-size: .95rem; flex: 1; }
.sw { display: flex; gap: 8px; margin-bottom: 18px; }
.sw i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); }
.go { font-weight: 700; color: #39ff88; }
footer { text-align: center; color: #7f86ad; padding: 0 16px 40px; font-size: .9rem; }