/* =====================================================================
   Sitio en construcción — Valeria Vázquez Salvi · Arquitecta
   Adaptado de la base genérica (~/Desktop/proximamente/en-construccion/).
   Paleta y tipografía = marca-valeria-vazquez.md §2-3.
   ===================================================================== */

:root{
  /* ---- Paleta de marca ---- */
  --bg-1:#F3ECE0;
  --bg-2:#E9E2D4;
  --accent:#C15F3C;              /* terracota */
  --accent-2:#C79A3E;            /* ocre */
  --text:#574F46;                /* tinta */
  --muted:#7c7266;
  --border:rgba(193,95,60,.32);
  --track:rgba(87,79,70,.15);

  --radius:999px;
  --maxw:560px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Archivo",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --bg-1:#241E18; --bg-2:#1d1813; --text:#efe7d9; --muted:#b6ab9a; --track:rgba(239,231,217,.14); }
}

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

body{
  font-family:var(--sans);
  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;
  -webkit-font-smoothing:antialiased;
}

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

.logo{ width:220px; margin:0 auto 30px; }
.logo img{ width:100%; display:block; }
.logo .on-dark{ display:none; }
@media (prefers-color-scheme:dark){
  .logo .on-light{ display:none; }
  .logo .on-dark{ display:block; }
}

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

h1{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,5.4vw,40px); line-height:1.16; margin-bottom:16px; letter-spacing:-.01em; }
h1 .domain{ font-style:italic; color:var(--accent); word-break:break-word; }

p{ color:var(--muted); font-size:clamp(14.5px,2.4vw,16.5px); line-height:1.65; margin-bottom:28px; }

.bar{ width:200px; max-width:70%; height:5px; border-radius:var(--radius); background:var(--track); margin:0 auto 30px; 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); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(87,79,70,.3); }

.social{ margin-top:22px; font-size:13px; color:var(--muted); }
.social a{ color:var(--text); text-decoration:none; font-weight:600; }

@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; } }