/* ============================================================
   TRAMA ESTUDIO — hoja de estilos compartida
   Concepto: dualidad "plano técnico" (azul, retícula, mono)
   frente a "papel terminado" (cálido, editorial, serif).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#10161F;
  --blueprint:#152C46;
  --blueprint-2:#1B3A5C;
  --blueprint-line:#2E4A66;
  --paper:#ECE8DD;
  --paper-2:#E2DDCE;
  --signal:#E3A23C;
  --signal-dim:#B9812E;
  --cream:#F4F1E8;
  --ink-soft:#57626C;
  --paper-ink:#2B2E27;
  --max:1120px;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'JetBrains Mono', 'SF Mono', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--paper-ink);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

img{ max-width:100%; display:block; }

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

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal-dim);
}

.eyebrow::before{ content:"// "; color:var(--ink-soft); }

.blueprint .eyebrow{ color:var(--signal); }
.blueprint .eyebrow::before{ color:#5A7A9A; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  margin:0;
  letter-spacing:-.01em;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

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

/* ---------------- Blueprint section (dark, grid, technical) ---------------- */
.blueprint{
  background-color:var(--blueprint);
  background-image:
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  background-size:42px 42px;
  background-position:center top;
  color:var(--cream);
  position:relative;
}
.blueprint::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,44,70,.15), rgba(21,44,70,.55));
  pointer-events:none;
}
.blueprint .wrap{ position:relative; z-index:1; }

/* dimension-line divider used between plan / paper sections */
.dim-divider{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--ink-soft); text-transform:uppercase;
  margin:0 auto; max-width:var(--max); padding:14px 32px;
}
.dim-divider::before, .dim-divider::after{
  content:""; flex:1; height:1px; background:var(--paper-2);
}
.dim-divider span{ white-space:nowrap; }

/* ---------------- Header / nav (directory-path style) ---------------- */
header.site{
  background:var(--ink);
  color:var(--cream);
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--blueprint-line);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.brand{
  font-family:var(--mono); font-weight:500; font-size:15px;
  letter-spacing:.02em; text-decoration:none; color:var(--cream);
  display:flex; align-items:center; gap:8px;
}
.brand .dot{ width:7px; height:7px; border-radius:50%; background:var(--signal); display:inline-block; }

/* Logo image inside the brand: keep header height unchanged */
.brand-logo{ display:block; height:34px; width:auto; transform-origin:left center; will-change:transform; }

/* Escala visual del logo sin alterar el flujo (no cambia la altura del header) */
.brand-logo--scaled{ transform:scale(1.15); }

@media (max-width:760px){
  .brand-logo{ height:28px; }
  .brand-logo--scaled{ transform:scale(1.05); }
}

/* Utility for accessible hidden text */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

nav.paths{
  display:flex; gap:2px;
  font-family:var(--mono); font-size:13px;
}
nav.paths a{
  text-decoration:none;
  color:#9FB0C0;
  padding:8px 12px;
  border-radius:3px;
  transition:color .15s ease, background .15s ease;
  white-space:nowrap;
}
nav.paths a:hover{ color:var(--cream); background:rgba(255,255,255,.06); }
nav.paths a[aria-current="page"]{
  color:var(--signal);
}
nav.paths a[aria-current="page"] .seg{ border-bottom:1px solid var(--signal); padding-bottom:2px; }

.menu-toggle{ display:none; }

@media (max-width: 760px){
  header.site .wrap{ flex-wrap:wrap; gap:10px 0; }
  nav.paths{ flex-wrap:wrap; gap:0; width:100%; padding-top:4px; }
  nav.paths a{ padding:8px 10px; font-size:12.5px; }
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.02em;
  padding:13px 22px; border-radius:3px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-solid{ background:var(--signal); color:var(--ink); }
.btn-solid:hover{ background:#EEB25C; }
.btn-outline{ border-color:var(--blueprint-line); color:var(--cream); }
.btn-outline:hover{ border-color:var(--signal); color:var(--signal); }
.btn-outline.on-paper{ color:var(--paper-ink); border-color:#B9B198; }
.btn-outline.on-paper:hover{ border-color:var(--signal-dim); color:var(--signal-dim); }

/* ---------------- Hero ---------------- */
.hero{ padding:86px 0 74px; }
.hero h1{
  font-size:clamp(34px, 5.4vw, 60px);
  line-height:1.06;
  color:var(--cream);
  max-width:15ch;
  margin-top:18px;
}
.hero h1 em{ font-style:italic; color:var(--signal); }
.hero .sub{
  margin-top:22px; max-width:46ch;
  color:#C7D2DB; font-size:16.5px;
}
.hero .actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

/* coordinate readout, decorative technical flourish */
.coords{
  font-family:var(--mono); font-size:11px; color:#5A7A9A;
  margin-top:56px; display:flex; gap:26px; flex-wrap:wrap;
}

/* ---------------- Paper sections ---------------- */
section.paper{ padding:74px 0; }
section.paper.tight{ padding:56px 0; }
section.paper h2{
  font-size:clamp(26px, 3.4vw, 38px);
  max-width:20ch;
}
.section-head{ margin-bottom:42px; }
.section-head p{ max-width:56ch; color:var(--ink-soft); margin-top:14px; font-size:15.5px; }

/* spec sheet (services list) */
.spec-list{ border-top:1px solid #C9C2AC; }
.spec-row{
  display:grid; grid-template-columns:220px 1fr;
  gap:24px; padding:26px 0; border-bottom:1px solid #C9C2AC;
}
.spec-row .k{ font-family:var(--mono); font-size:13px; color:var(--signal-dim); letter-spacing:.03em; }
.spec-row .v h3{ font-size:19px; font-weight:600; margin-bottom:8px; }
.spec-row .v p{ margin:0; color:var(--ink-soft); font-size:15px; max-width:60ch; }
@media (max-width:640px){ .spec-row{ grid-template-columns:1fr; gap:8px; } }

/* stat callouts */
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--blueprint-line); border:1px solid var(--blueprint-line);
}
.stat{ background:var(--blueprint); padding:28px 20px; }
.stat .num{ font-family:var(--serif); font-size:38px; color:var(--signal); }
.stat .label{ font-family:var(--mono); font-size:11.5px; color:#9FB0C0; margin-top:6px; letter-spacing:.04em; text-transform:uppercase; }
@media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }

/* timeline (legitimate sequence: real process order) */
.timeline{ list-style:none; margin:0; padding:0; }
.tl-item{
  display:grid; grid-template-columns:70px 1fr; gap:24px;
  padding:28px 0; border-bottom:1px solid #C9C2AC; position:relative;
}
.tl-item:first-child{ border-top:1px solid #C9C2AC; }
.tl-num{ font-family:var(--mono); color:var(--signal-dim); font-size:14px; padding-top:2px; }
.tl-item h3{ font-size:19px; margin-bottom:8px; }
.tl-item p{ margin:0; color:var(--ink-soft); font-size:15px; max-width:60ch; }

/* tag chips (stack) */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  font-family:var(--mono); font-size:12px; padding:7px 12px;
  border:1px solid #C9C2AC; border-radius:3px; color:var(--paper-ink);
}
.blueprint .chip{ border-color:var(--blueprint-line); color:#C7D2DB; }

/* project cards */
.grid-projects{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#C9C2AC; border:1px solid #C9C2AC; }
.card{ background:var(--paper); padding:34px; display:flex; flex-direction:column; gap:14px; }
.card-link{ display:flex; text-decoration:none; color:inherit; transition:background .2s ease, transform .2s ease; }
.card-link:hover{ background:rgba(24, 23, 22, 0.04); transform:translateY(-1px); }
.card .meta{ font-family:var(--mono); font-size:12px; color:var(--signal-dim); display:flex; justify-content:space-between; }
.card h3{ font-size:22px; }
.card p{ margin:0; color:var(--ink-soft); font-size:14.5px; }
@media (max-width:760px){ .grid-projects{ grid-template-columns:1fr; } }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }

.field{ margin-bottom:20px; }
.field label{
  display:block; font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-soft); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--cream); border:1px solid #C9C2AC; border-radius:3px;
  padding:12px 14px; font-family:var(--sans); font-size:15px; color:var(--paper-ink);
}
.field textarea{ resize:none; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--signal-dim); }

.contact-info dl{ margin:0; }
.contact-info .row{ padding:18px 0; border-bottom:1px solid var(--blueprint-line); }
.contact-info dt{ font-family:var(--mono); font-size:11.5px; color:var(--signal); text-transform:uppercase; letter-spacing:.05em; }
.contact-info dd{ margin:8px 0 0; font-size:16px; }

.form-note{
  font-family:var(--mono); font-size:13px; color:var(--signal-dim);
  margin-top:16px; min-height:20px;
}

/* ---------------- Footer / terminal bar ---------------- */
footer.site{
  background:var(--ink); color:#9FB0C0; padding:26px 0;
  border-top:1px solid var(--blueprint-line);
}
footer.site .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.term{ font-family:var(--mono); font-size:12.5px; }
.term .cursor{ display:inline-block; width:7px; height:13px; background:var(--signal); margin-left:2px; animation:blink 1.1s steps(1) infinite; vertical-align:-2px; }
@keyframes blink{ 50%{ opacity:0; } }
footer.site small{ font-family:var(--mono); font-size:11.5px; color:#5A7A9A; }