:root{
  --txt:#ffffff;
  --muted:rgba(255,255,255,.78);
  --accent:#22d3ee;
  --ring:rgba(34,211,238,.35);
  --ok:#10b981;
  --error:#ef4444;
  --card-bg: rgba(0,0,0,.34);
  --card-bd: rgba(255,255,255,.12);
}
*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  color:var(--txt);
  background:#0b1020;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utils */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

.wrap{ min-height:100dvh; display:grid; place-items:center; padding:clamp(16px,4vw,48px) }
.card{
  width:min(920px,100%);
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  padding:clamp(20px,5vw,44px);
}

/* Header centrado */
header{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:4px;
}
.brand{
  display:flex;
  align-items:center;
  gap:clamp(14px,3vw, 28px);
  text-decoration:none;
  color:inherit;
}
.logo-img{
  height: clamp(120px, 15vw, 220px);
  width: auto;
  display: block;
}
.brand-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:center;
}
.name{ font-size:clamp(28px,4.5vw,40px); font-weight:800; letter-spacing:.4px; margin:0 }
.slogan{ font-size:clamp(14px,1.8vw,16px); color:var(--muted) }

/* Hero */
.hero{ display:grid; }
.title{ font-weight:900; font-size:clamp(32px,6vw,56px); line-height:1; text-align:center; }
.subtitle{ font-size:clamp(16px,2.2vw,20px); color:var(--muted) }
.typewrap{ display:inline-grid }
.type{ border-right:2px solid var(--accent); white-space:nowrap; overflow:hidden }
.cursor{ display:inline-block; width:2px; background:var(--accent); animation: blink 1s step-end infinite }
@keyframes blink{ 50%{ opacity:0 } }

/* Grid panels */
.grid{ display:grid; gap:22px; grid-template-columns:1fr; margin-top:18px }
@media (min-width:860px){ .grid{ grid-template-columns: 1.1fr .9fr } }
.panel{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:18px; padding:18px }

/* Form */
form{ display:grid; gap:12px }
label{ font-weight:600 }
.field{ display:grid; gap:8px }
input, button, textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.3);
  color:var(--txt);
  font-size:16px;
}
input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.55) }
input:focus, textarea:focus{ outline:none; box-shadow:0 0 0 6px var(--ring); border-color:var(--accent) }
button{
  cursor:pointer; font-weight:800; letter-spacing:.4px; border:none;
  background:linear-gradient(135deg, #22d3ee, #3b82f6);
  transition:filter .15s ease, transform .15s ease;
}
button:hover{ filter:brightness(1.05) }
button:active{ transform:translateY(1px) }
button[disabled]{ opacity:.6; cursor:not-allowed }
.hint{ font-size:13px; color:var(--muted) }
.consent{ display:flex; align-items:flex-start; gap:10px; font-size:14px }
.consent input[type="checkbox"]{ width:auto; margin-top:4px }

a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: 10px;
}

/* Contacto */
.contact{ display:grid; gap:12px }
.contact a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; text-decoration:none; color:var(--txt);
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12)
}
.contact small{ color:var(--muted) }

.icon{
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: .95;
}
.contact a { gap: 12px; }         /* ya lo tienes, esto solo reafirma el espacio */
.contact a:hover .icon { opacity: 1; transform: translateY(-0.5px); }
.icon { transition: opacity .15s ease, transform .15s ease; }
.contact a[href*="wa.me"] .icon { color: #25D366; }   /* WhatsApp */
.contact a[href*="instagram.com"] .icon { color: #E1306C; } /* Instagram */

/* Status */
.status{ margin-top:10px; font-size:0.95rem; display:none;}
.status.ok{ color:var(--ok) }
.status.err{ color:var(--error) }

/* Footer */
footer{ margin-top:26px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:13px }
.legal a{ color:var(--muted) }

/* Countdown — limpio y centrado */
.countdown{
  display:none;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
}
.countdown strong{ color:var(--txt); font-weight:700 }
.countdown .sep{ opacity:.5; padding:0 4px }
.countdown a{
  color:var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.countdown a:hover{ filter:brightness(1.1) }