/* PROMAX — CV empresarial
   ============================================================================
   SISTEMA EDITORIAL

   El documento no es una pagina de recorrido con secciones distintas: es un
   impreso con una sola estructura repetida. Tres piezas lo sostienen.

   1. RETICULA. Doce columnas, medianil de 24 px (6 mm impreso), ancho maximo
      1180 px. Todo se ancla a ella: los titulos, los bloques de tarjetas y las
      fotos. Las fotos solo cambian de tramo (span-4 / span-5 / span-6 / span-7
      / span-12); nunca de tratamiento.

   2. UNA SOLA TARJETA. `.card` es el unico modulo de contenido del documento:
      misma anatomia, misma tipografia, mismos margenes en servicios, en
      disciplinas y en materiales. Lo que cambia entre secciones es cuantas caben
      en la fila, no como se ven. Esa es la armonia: la variacion es estructural,
      no estilistica.

   3. RITMO. Cada seccion abre con una regla de 2 px en tinta, el titulo a la
      izquierda (5 columnas) y el texto de entrada a la derecha (6 columnas,
      empezando en la 7). La asimetria es fija, no decorativa: da una linea de
      lectura constante y deja el aire siempre del mismo lado.

   COLOR. Papel, tinta y amarillo de marca, nada mas. El color del documento lo
   traen las fotos de obra — muros naranjas, amarillos, rosas — asi que la
   paleta grafica se mantiene sobria para no competir con ellas. El amarillo solo
   aparece en reglas, marcas y la ultima palabra de un titulo de dos o mas
   palabras; un titulo de una sola palabra se queda en tinta.

   Los tokens se repiten aqui en vez de cargar `base.css`: si cambia el amarillo
   o la tinta del sitio, hay que cambiarlos en los dos lugares.
   ============================================================================ */

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

:root {
  --bg: #f5f5f3; --ink: #111111; --ink2: #555555; --accent: #F4DB09; --accent-text: #5f5600;
  --border: rgba(17,17,17,0.12); --rule: rgba(17,17,17,0.22);
  --mono: 'Courier New', Courier, monospace;
  --display: 'Anton', Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Narrow', sans-serif;
  --pad: 40px;
  --maxw: 1180px;
  --gutter: 24px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; }

/* El cursor de cruz es parte de la identidad del sitio y se mantiene en el documento,
   pero solo cuando el script que lo mueve ya corrio: si se ocultara por CSS y el script
   fallara, el documento se quedaria sin ningun cursor visible. */
#cursor, #cursor-dot { display: none; }
html.has-cursor body, html.has-cursor .doc-bar a, html.has-cursor .doc-bar button { cursor: none; }
html.has-cursor #cursor, html.has-cursor #cursor-dot { display: block; }
#cursor { position: fixed; top: 0; left: 0; width: 24px; height: 24px; pointer-events: none; z-index: 9999; mix-blend-mode: multiply; }
#cursor svg { width: 100%; height: 100%; }
#cursor-dot { position: fixed; top: 0; left: 0; width: 4px; height: 4px; background: var(--accent); pointer-events: none; z-index: 10000; transform: translate(-50%,-50%); }
.grid-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(rgba(17,17,17,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ─── BARRA DE DOCUMENTO ─────────────────────────────────────────────────── */
.doc-bar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--pad); background: var(--bg); border-bottom: 1px solid var(--border);
}
.doc-bar-id { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink2); }
.doc-bar-actions { display: flex; align-items: center; gap: 10px; }
.doc-bar a, .doc-bar button {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; background: transparent;
  border: 1px solid var(--rule); padding: 7px 12px; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.doc-bar a:hover, .doc-bar button:hover { background: var(--ink); color: var(--bg); }
.doc-bar a:focus-visible, .doc-bar button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.doc-bar .is-primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.doc-bar .is-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ─── RETICULA ───────────────────────────────────────────────────────────── */
main { position: relative; z-index: 10; }
.sheet { padding: 0 var(--pad); }
.sheet-inner { max-width: var(--maxw); margin: 0 auto; }

.band {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  align-items: start;
}
.band + .band { margin-top: var(--gutter); }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-12 { grid-column: 1 / -1; }

section { padding: 88px 0 96px; }

/* ─── CABEZA DE SECCION ──────────────────────────────────────────────────── */
.sec-head {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);
  border-top: 2px solid var(--ink); padding-top: 26px; margin-bottom: 44px;
}
.sec-head h2 { grid-column: 1 / span 5; }
.sec-intro { grid-column: 7 / span 6; }

h2.sec-title {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.005em;
}
h2.sec-title .accent { color: var(--accent); }
.sec-lead { font-size: 14px; line-height: 1.8; color: var(--ink2); }
.sec-lead + .sec-lead { margin-top: 16px; }
.sec-lead strong { color: var(--ink); font-weight: 400; }
.sec-lead a, .note a, .client-note a, .pull a {
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent);
}
.sec-lead a:hover, .note a:hover, .client-note a:hover { background: var(--accent); }
.sec-lead a:focus-visible, .note a:focus-visible, .client-note a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* ─── PORTADA ────────────────────────────────────────────────────────────── */
.cover { padding: 60px 0 0; }
.cover-logo { display: block; height: 58px; width: auto; margin-bottom: 44px; }
/* La separacion es generosa porque el titulo va en Anton a line-height 0.88: con menos,
   la tilde de DISENO se monta sobre esta linea. */
.cover-kicker { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink2); margin-bottom: 36px; }
.cover-title {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(56px, 10.5vw, 142px); line-height: 0.88; text-transform: uppercase; letter-spacing: -0.015em;
}
.cover-title .accent { color: var(--accent); }
.cover-sub { margin-top: 32px; font-size: 15px; line-height: 1.75; max-width: 64ch; color: var(--ink); }
.cover-sub .quiet { color: var(--ink2); }

/* ─── CIFRAS ─────────────────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.stats.three { grid-template-columns: repeat(3, 1fr); }
.stat {
  padding: 18px 20px 20px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat-label { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink2); }
.stat-val {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 30px; line-height: 1.05; margin-top: 10px; text-transform: uppercase;
}
.stat-val.sm { font-size: 20px; }

/* ─── TARJETA (modulo unico) ─────────────────────────────────────────────── */
/* Los separadores van como borde de la tarjeta y no como `gap` sobre un fondo
   gris: estas rejillas cambian de numero de columnas entre pantalla e impresion,
   asi que la ultima fila puede quedar incompleta, y con la tecnica del gap ese
   hueco se pintaba como un bloque gris. */
.cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card {
  padding: 24px 22px 28px; break-inside: avoid;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.card-title {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 21px; line-height: 1.08; text-transform: uppercase; margin-bottom: 12px;
}
.card-text { font-size: 12.5px; line-height: 1.75; color: var(--ink2); }

/* ─── PASOS DEL PROCESO ──────────────────────────────────────────────────── */
/* Renglones, no columnas: el proceso se lee como una secuencia, y a cinco
   columnas el texto rompia cada dos palabras tanto en papel como en telefono. */
.steps { border-top: 1px solid var(--border); }
.step {
  display: grid; grid-template-columns: 1fr 3fr 8fr; gap: var(--gutter);
  padding: 22px 0 24px; border-bottom: 1px solid var(--border); break-inside: avoid;
}
.step-num {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 22px; line-height: 1; color: var(--accent-text);
}
.step-name {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 20px; line-height: 1.1; text-transform: uppercase;
}
.step-text { font-size: 12.5px; line-height: 1.75; color: var(--ink2); }

/* ─── FOTOS DE OBRA ──────────────────────────────────────────────────────── */
/* Las fotos son evidencia, no ambiente: siempre rectangulares, siempre sobre la
   reticula y siempre con un pie que dice que hizo PROMAX en esa imagen. */
.plate { break-inside: avoid; }
.plate img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  background: rgba(17,17,17,0.05);
}
.plate.wide img { aspect-ratio: 16 / 9; }
.plate.tall img { aspect-ratio: 3 / 4; }
/* En una banda de 7 + 5 columnas, la foto angosta lleva `match` para que las dos
   terminen en la misma linea: 15/16 es la proporcion que iguala la altura de un
   tramo de 5 columnas con la de un tramo de 7 en 4:3. Sin esto, la columna corta
   cerraba antes y dejaba un hueco a media pagina. */
.plate.match img { aspect-ratio: 15 / 16; }
.plate figcaption {
  font-size: 10.5px; line-height: 1.6; color: var(--ink2);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.plate figcaption b { color: var(--ink); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }

/* ─── PROYECTOS ──────────────────────────────────────────────────────────── */
.client-block { margin-top: 56px; }
.client-block:first-of-type { margin-top: 0; }
.client-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 2px solid var(--ink); padding-top: 14px;
}
.client-name { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.client-meta { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink2); }
.client-note { font-size: 12.5px; line-height: 1.75; color: var(--ink2); margin-top: 12px; max-width: 78ch; }

table.proj { width: 100%; border-collapse: collapse; margin-top: 20px; }
table.proj th, table.proj td { text-align: left; vertical-align: top; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--border); }
table.proj th { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink2); font-weight: 400; border-bottom: 1px solid var(--rule); }
table.proj td { font-size: 12.5px; line-height: 1.65; break-inside: avoid; }
table.proj .c-title { width: 34%; text-transform: uppercase; letter-spacing: 0.02em; }
table.proj .c-year { width: 8%; white-space: nowrap; color: var(--ink2); }
table.proj .c-scope { color: var(--ink2); }
table.proj tbody tr:last-child td { border-bottom: none; }
.client-block .band { margin-top: 28px; }

/* ─── NOTAS Y CITAS ──────────────────────────────────────────────────────── */
.pull {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 20px;
  font-size: 15px; line-height: 1.75;
}
.note { font-size: 11.5px; line-height: 1.75; color: var(--ink2); max-width: 90ch; }
.note strong { color: var(--ink); font-weight: 400; }
.mt-l { margin-top: 44px; }
.mt-m { margin-top: 28px; }

/* ─── CONTACTO Y PIE ─────────────────────────────────────────────────────── */
.contact-val { font-size: 13px; line-height: 1.6; margin-top: 10px; word-break: break-word; }
.contact-val a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.contact-val a:hover { background: var(--accent); }

.doc-foot { padding: 32px var(--pad) 48px; position: relative; z-index: 10; border-top: 1px solid var(--border); }
.doc-foot-inner {
  max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink2);
}
.doc-foot-logo { height: 34px; width: auto; display: block; }

/* ─── PANTALLA ANGOSTA ───────────────────────────────────────────────────── */
/* Limitado a `screen` a proposito: al imprimir, el ancho de la caja de pagina
   (190 mm) equivale a ~718 px, asi que sin ese `screen` la hoja impresa heredaba
   la maqueta de telefono y las tablas salian apiladas. */
@media screen and (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards.three { grid-template-columns: repeat(2, 1fr); }
  .stats, .stats.three { grid-template-columns: repeat(2, 1fr); }
  .sec-head h2 { grid-column: 1 / -1; }
  .sec-intro { grid-column: 1 / -1; }
  .sec-head { margin-bottom: 36px; }
}
@media screen and (max-width: 760px) {
  :root { --pad: 20px; --gutter: 16px; }
  /* En pantalla angosta la barra se queda en una sola linea: el identificador del
     documento sale, porque ya viene repetido en el pie. */
  .doc-bar { padding: 10px var(--pad); gap: 10px; }
  .doc-bar-id { display: none; }
  .doc-bar a, .doc-bar button { padding: 7px 9px; font-size: 8.5px; letter-spacing: 0.12em; }
  html.has-cursor body { cursor: auto; }
  html.has-cursor #cursor, html.has-cursor #cursor-dot { display: none; }
  section { padding: 56px 0 64px; }
  .cover { padding: 36px 0 0; }
  .cover-title { font-size: clamp(44px, 13vw, 72px); }
  .cards, .cards.two, .cards.three, .stats, .stats.three { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
  .span-4, .span-5, .span-6, .span-7, .span-12 { grid-column: 1 / -1; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .step-num { font-size: 16px; }
  .client-block { margin-top: 40px; }
  table.proj, table.proj tbody, table.proj tr, table.proj td { display: block; width: 100%; }
  table.proj thead { display: none; }
  table.proj tr { border-bottom: 1px solid var(--border); padding: 14px 0; }
  table.proj tr:last-child { border-bottom: none; }
  table.proj td { border-bottom: none; padding: 2px 0; }
  table.proj .c-title, table.proj .c-year, table.proj .c-scope { width: auto; }
}
@media screen and (hover: none) { html.has-cursor body { cursor: auto; } html.has-cursor #cursor, html.has-cursor #cursor-dot { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ─── IMPRESION ──────────────────────────────────────────────────────────── */
/* El CV tambien se manda como PDF, asi que la version impresa es un entregable.
   Mantiene la misma reticula de doce columnas y la misma tarjeta; solo cambia la
   escala. Cada seccion abre pagina, y dentro de la seccion lo que no se debe
   partir son las unidades de lectura: la cabeza, cada tarjeta, cada foto con su
   pie, cada bloque de cliente. */
@media print {
  @page { size: letter portrait; margin: 13mm 13mm 14mm; }
  html, body { background: #fff; cursor: auto; font-size: 8.6pt; line-height: 1.5; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :root { --gutter: 6mm; }
  .doc-bar, .grid-overlay, #cursor, #cursor-dot, .no-print { display: none !important; }
  .sheet { padding: 0; }
  .sheet-inner { max-width: none; }

  section { break-before: page; padding: 0 0 4mm; }
  /* Las secciones de cierre no abren pagina: encadenadas llenan la hoja, y por
     separado dejaban tres paginas a medio ocupar. Su cabeza viaja junto al primer
     bloque dentro de `.keep`, para que ningun titulo se quede solo al pie. */
  section.flow { break-before: auto; padding-top: 4mm; }
  .sec-head { break-after: avoid; padding-top: 5mm; margin-bottom: 8mm; }
  h2.sec-title { font-size: 21pt; }
  .sec-lead { font-size: 9.2pt; line-height: 1.6; }
  .sec-lead + .sec-lead { margin-top: 3mm; }

  .cover { padding: 0; }
  .cover-logo { height: 12mm; margin-bottom: 9mm; }
  .cover-kicker { margin-bottom: 7mm; }
  .cover-title { font-size: 42pt; }
  .cover-sub { font-size: 10pt; margin-top: 6mm; }
  /* Las fotos de ancho completo pasan a panoramicas solo en papel: en 16:9 median
     107 mm de alto y empujaban a la hoja siguiente lo que venia despues — la
     portada dejaba su imagen sola, y el proceso dejaba sola la cita del final. */
  .plate.wide img { aspect-ratio: 21 / 9; }
  /* `break-after: avoid` no es fiable en Chromium, asi que un subtitulo se mantiene
     junto a su contenido envolviendo los dos en `.keep`, que si respeta
     `break-inside: avoid` y viaja como una sola unidad. */
  .keep { break-inside: avoid; }

  .stats { break-inside: avoid; }
  .stat { padding: 3.5mm 4.5mm; }
  .stat-val { font-size: 16pt; margin-top: 2mm; }
  .stat-val.sm { font-size: 11pt; }

  .card { padding: 3mm 3.5mm; }
  /* Los datos de contacto bajan a dos columnas en papel: a cuatro, el correo no
     entraba en la caja y se partia a media palabra. */
  .cards.contact { grid-template-columns: repeat(2, 1fr); }
  .card-title { font-size: 11.5pt; margin-bottom: 2mm; }
  .card-text, .step-text, .client-note, table.proj td { font-size: 8.3pt; line-height: 1.55; }

  .step { padding: 2.5mm 0; grid-template-columns: 12mm 40mm 1fr; }
  .step-num { font-size: 13pt; }
  .step-name { font-size: 12pt; }

  .plate figcaption { font-size: 7.6pt; margin-top: 2mm; padding-top: 2mm; }
  .band + .band { margin-top: 6mm; }

  .client-block { margin-top: 8mm; break-inside: avoid; }
  .client-name { font-size: 14pt; }
  .client-note { margin-top: 2.5mm; }
  table.proj { margin-top: 4mm; }
  table.proj th, table.proj td { padding: 2mm 4mm 2mm 0; }
  .client-block .band { margin-top: 5mm; }

  .pull { font-size: 9.6pt; padding-left: 5mm; break-inside: avoid; }
  .note { font-size: 7.9pt; line-height: 1.55; break-inside: avoid; }
  .mt-l { margin-top: 5mm; }
  .mt-m { margin-top: 5mm; }
  .contact-val a, .sec-lead a, .note a, .client-note a { border-bottom: none; }

  .doc-foot { padding: 0; break-before: avoid; border-top: none; }
  .doc-foot-inner { border-top: 1px solid var(--rule); padding-top: 3mm; }
  .doc-foot-logo { height: 9mm; }
}