/* ============================================================
   MODULAR AI — design tokens
   Concept: arquitectura técnica / plano de obra ("blueprint")
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#0E1A24;         /* fondo principal, azul casi negro de plano */
  --ink-2:#132433;       /* superficies elevadas */
  --ink-3:#1B3040;       /* bordes / líneas de plano */
  --paper:#EDE7D9;       /* papel / texto principal claro */
  --paper-dim:#93A5B1;   /* texto secundario */
  --line:#2E4A5C;        /* líneas técnicas sutiles */
  --cyan:#7FE7D1;        /* tinta de plano — acento primario */
  --amber:#E8A33D;       /* acento de acción / obra */
  --amber-dim:#7A5A28;
  --danger:#E2664D;

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --radius: 2px; /* casi recto — regla de dibujo técnico, no de app consumer */
  --container: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

::selection{background:var(--cyan); color:var(--ink);}

:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:18px; height:1px;
  background:var(--cyan);
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--paper);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:transparent;
  color:var(--paper);
  transition:border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{border-color:var(--cyan); color:var(--cyan); transform:translateY(-1px);}
.btn-primary{
  background:var(--cyan);
  border-color:var(--cyan);
  color:var(--ink);
  font-weight:600;
}
.btn-primary:hover{
  background:#96f0dd;
  color:var(--ink);
  border-color:#96f0dd;
}
.btn-amber{
  background:var(--amber);
  border-color:var(--amber);
  color:var(--ink);
  font-weight:600;
}
.btn-amber:hover{background:#f3b452; border-color:#f3b452;}

/* dimension-line divider, like an architectural measurement */
.dim{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--paper-dim);
  font-family:var(--mono);
  font-size:12px;
}
.dim .tick{width:1px; height:8px; background:var(--line);}
.dim .rule{flex:1; height:1px; background:var(--line);}

.card{
  background:var(--ink-2);
  border:1px solid var(--ink-3);
  border-radius:var(--radius);
  padding:28px;
}

.grid-bg{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.18;
}

/* corner brackets — signature motif, echoes a CAD selection/crop marker */
.crosshair{position:relative;}
.crosshair::before,.crosshair::after,
.crosshair span::before,.crosshair span::after{
  content:'';
  position:absolute;
  width:14px; height:14px;
  border-color:var(--cyan);
  border-style:solid;
  opacity:.6;
}
.crosshair::before{top:-1px; left:-1px; border-width:1px 0 0 1px;}
.crosshair::after{top:-1px; right:-1px; border-width:1px 1px 0 0;}
.crosshair span::before{bottom:-1px; left:-1px; border-width:0 0 1px 1px;}
.crosshair span::after{bottom:-1px; right:-1px; border-width:0 1px 1px 0;}

@media (max-width:860px){
  .wrap{padding:0 20px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}