* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: radial-gradient(circle at 50% 40%, #1e1e1e, #000);
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.coming-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2.5rem;
  padding: 2rem 1.25rem 3rem;
}

.logo {
  position: relative;
  width: min(380px, 70vw);
  display: flex;
  justify-content: center;
}
.logo-img { width: 100%; height: auto; display: block; }
.logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  body { background: radial-gradient(circle at 50% 40%, #222, #000); }
  .logo-light { display: none; }
  .logo-dark { display: block; }
}

.title {
  font-weight: 700;
  letter-spacing: .25em;
  font-size: clamp(1.8rem, 4.5vw, 3.5rem);
  margin: 0;
}

.socials {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.social-link {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff10;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
  transition: background .35s, transform .35s;
  text-decoration: none;
}
.social-link svg { width: 28px; height: 28px; fill: #fff; transition: transform .5s, fill .4s; }
.social-link[aria-label="Facebook"] svg path { fill: #fff; }
.social-link[aria-label="Instagram"] svg path { fill: #fff; }
.social-link[aria-label="YouTube"] svg path { fill: #fff; }
.social-link[aria-label="Threads"] svg path { fill: #fff; }
.social-link[aria-label="WhatsApp"] svg path { fill: #fff; }

/* Hover aplica color corporativo (menos Instagram que ya tiene su gradiente) */
.social-link:hover[aria-label="Facebook"] svg path { fill: #1877F2; }
.social-link:hover[aria-label="YouTube"] svg path { fill: #FF0000; }
.social-link:hover[aria-label="Instagram"] svg path { fill: #ff6196; }
.social-link:hover[aria-label="Threads"] svg path { fill: #ffffff; }
.social-link:hover[aria-label="WhatsApp"] svg path { fill: #25D366; }
.social-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,#ff5f6d,#ffc371);
  opacity: 0;
  transition: opacity .4s;
  mix-blend-mode: overlay;
}
.social-link:hover, .social-link:focus-visible {
  background: #ffffff22;
  transform: translateY(-4px);
}
.social-link:hover::after, .social-link:focus-visible::after { opacity: .35; }
.social-link:hover svg, .social-link:focus-visible svg { transform: scale(1.12); }

.footer {
  font-size: .75rem;
  text-align: center;
  padding: .75rem 1rem 1.25rem;
  opacity: .7;
  font-weight: 400;
}

@media (max-width: 520px) {
  .social-link { width: 48px; height: 48px; }
  .social-link svg { width: 24px; height: 24px; }
  .coming-wrapper { gap: 2rem; }
}