/* =====================================================================
   Sitio en construcción — estilos
   Cambiá TODOS los colores desde el bloque :root de acá abajo.
   Para que UN dominio se vea distinto sin tocar este archivo compartido,
   poné un override en el <style> del index.html de ese dominio.
   ===================================================================== */

:root{
  /* ---- Paleta (lo que se toca) ---- */
  --bg-1:#1e293b;              /* gradiente: arriba          */
  --bg-2:#0f172a;              /* gradiente: base/abajo      */
  --accent:#38bdf8;            /* color de marca (badge, dominio, punto) */
  --accent-2:#818cf8;          /* segundo color (barra)      */
  --text:#e2e8f0;              /* texto principal            */
  --muted:#94a3b8;             /* texto secundario           */
  --border:rgba(56,189,248,.35);/* borde del badge           */
  --track:rgba(148,163,184,.2); /* fondo de la barrita        */

  /* ---- Ajustes finos (normalmente no se tocan) ---- */
  --radius:999px;
  --maxw:560px;
}

/* Semillas de paleta — copiá una al :root del index.html para variar:
   Cálida:   --accent:#f59e0b; --accent-2:#ef4444; --bg-1:#292524; --bg-2:#1c1917;
   Verde:    --accent:#34d399; --accent-2:#10b981; --bg-1:#064e3b; --bg-2:#022c22;
   Violeta:  --accent:#a78bfa; --accent-2:#ec4899; --bg-1:#2e1065; --bg-2:#1e1b4b;
   Clara:    --accent:#2563eb; --accent-2:#7c3aed; --bg-1:#f8fafc; --bg-2:#e2e8f0; --text:#0f172a; --muted:#475569; --track:rgba(15,23,42,.12);
*/

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%, var(--bg-1), var(--bg-2) 70%);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:24px; text-align:center;
}

.card{ max-width:var(--maxw); animation:fade .8s ease both; }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--border);
  padding:8px 14px; border-radius:var(--radius); margin-bottom:28px;
}
.dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 1.6s infinite; }

h1{ font-size:clamp(28px,6vw,44px); line-height:1.12; margin-bottom:16px; font-weight:700; }
h1 .domain{ color:var(--accent); word-break:break-word; }

p{ color:var(--muted); font-size:clamp(15px,2.6vw,18px); line-height:1.6; margin-bottom:28px; }

.bar{ width:220px; max-width:70%; height:6px; border-radius:var(--radius); background:var(--track); margin:0 auto 28px; overflow:hidden; }
.bar span{ display:block; height:100%; width:40%; border-radius:var(--radius); background:linear-gradient(90deg, var(--accent), var(--accent-2)); animation:slide 2.2s ease-in-out infinite; }

.foot{ font-size:13px; color:var(--muted); }
.foot a{ color:var(--text); text-decoration:none; border-bottom:1px solid rgba(226,232,240,.3); }

@keyframes fade{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
@keyframes slide{ 0%{transform:translateX(-60%);} 50%{transform:translateX(160%);} 100%{transform:translateX(-60%);} }
@media (prefers-reduced-motion:reduce){ .dot,.bar span,.card{ animation:none; } }