/* ============================================
   MIRA WASTE — "Muy pronto"
   Mismo design system del sitio principal
   ============================================ */

:root{
  --bg-deep:     #060d18;
  --bg-mid:      #091221;
  --bg-card:     #0c1828;
  --accent:      #00bcd4;
  --accent-dim:  rgba(0,188,212,0.08);
  --accent-glow: rgba(0,188,212,0.28);
  --white:       #f0f4f8;
  --white-60:    rgba(240,244,248,0.60);
  --white-35:    rgba(240,244,248,0.35);
  --white-12:    rgba(240,244,248,0.06);
  --border:      rgba(0,188,212,0.16);
  --border-dim:  rgba(240,244,248,0.06);

  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --ease: 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--white);
  min-height:100vh;
  overflow-x:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ── Skip link (accesibilidad) ── */
.skip-link{
  position:absolute;left:-999px;top:0;
  background:var(--accent);color:var(--bg-deep);
  padding:10px 16px;z-index:200;border-radius:6px;
  font-family:var(--font-display);font-weight:600;
}
.skip-link:focus{ left:16px; top:16px; }

/* ── Particle canvas ── */
#particle-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:0.32;
}

/* ── Ambient glow ── */
.glow{
  position:fixed;
  width:640px;height:640px;
  border-radius:50%;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter:blur(40px);
  opacity:0.35;
  pointer-events:none;
  z-index:0;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0.28;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:0.4;transform:translate(-50%,-50%) scale(1.06)}
}

/* ── Scan line ── */
.scanline{
  position:fixed;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.5;
  z-index:1;
  animation:scan 7s linear infinite;
  pointer-events:none;
}
@keyframes scan{
  0%{top:-2%}
  100%{top:102%}
}

/* ── Main card ── */
.wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:760px;
  margin:0 24px;
  padding:48px 64px 40px;
  background:rgba(12,24,40,0.55);
  backdrop-filter:blur(18px);
  border:1px solid var(--border);
  border-radius:14px;
  text-align:center;
  box-shadow:0 0 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
  opacity:0;
  animation:rise 0.9s cubic-bezier(0.25,0.46,0.45,0.94) 0.15s forwards;
}
@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Logo mark ── */
.logo-slot{
  width:192px;height:192px;
  margin:0 auto 28px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  border:1px solid var(--border);
  background:radial-gradient(circle, var(--accent-dim) 0%, transparent 75%);
  padding:29px;
}
.logo-slot::before{
  content:'';
  position:absolute;inset:-1px;
  border-radius:50%;
  border:1px solid transparent;
  border-top-color:var(--accent);
  opacity:0.5;
  animation:spin 5s linear infinite;
}
.logo-slot img{
  width:100%;height:100%;
  object-fit:contain;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}

.bajada{
  font-family:var(--font-display);
  font-size:0.98rem;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--white-60);
  margin-bottom:25px;
}

.headline{
  font-family:var(--font-display);
  font-size:1.78rem;
  font-weight:600;
  letter-spacing:0.01em;
  line-height:1.3;
  margin-bottom:12px;
}
.headline em{ color:var(--accent); font-style:normal }

.subtext{
  font-weight:300;
  font-size:1.06rem;
  color:var(--white-60);
  line-height:1.65;
  max-width:460px;
  margin:0 auto 34px;
}

/* ── Actions ── */
.actions{
  display:flex;
  gap:11px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11.5px 23px;
  border-radius:8px;
  font-family:var(--font-display);
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:all var(--ease);
  cursor:pointer;
  border:1px solid transparent;
}
.btn svg{ width:17px;height:17px; flex-shrink:0 }
.btn-primary{
  background:var(--accent);
  color:var(--bg-deep);
}
.btn-primary:hover,.btn-primary:focus-visible{
  box-shadow:0 0 24px var(--accent-glow);
  transform:translateY(-1px);
}
.btn-ghost{
  border-color:var(--border);
  color:var(--white-60);
  background:transparent;
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.footer-line{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.1em;
  color:var(--white-35);
  border-top:1px solid var(--border-dim);
  padding-top:21px;
}

@media (max-width:480px){
  .wrap{ padding:44px 24px 32px }
  .headline{ font-size:1.5rem }
}

@media (prefers-reduced-motion: reduce){
  .glow,.scanline,.logo-slot::before,.wrap{ animation:none }
  .wrap{ opacity:1; transform:none }
}