/* =========================================================
   TK Corporativo — "Despacho"
   Company formation, bookkeeping, tax filings and visas. The
   people reading this are about to hand over their legal
   existence in Mexico, so the page is cool, ruled and quiet —
   closer to a filing than to a brochure. No rounded corners,
   no glow, no colour but navy.
   ========================================================= */

:root {
  --main: #101B2B;
  --bg: #F4F5F7;
  --bg-dark: #E9EBEF;
  --bg-soft: #FFFFFF;

  --second: #0E2A4E;        /* navy — the only accent */
  --third: #7C879A;         /* steel — labels and kickers */
  --gold: #0E2A4E;

  --key-green: #0E2A4E;
  --key-navy: #7C879A;
  --key-red: #0E2A4E;

  --line: rgba(16, 27, 43, 0.18);
  --line-soft: rgba(16, 27, 43, 0.10);
  --dim: rgba(16, 27, 43, 0.72);
  --dimmer: rgba(16, 27, 43, 0.50);

  --accent-line: rgba(14, 42, 78, 0.34);
  --accent-soft: rgba(14, 42, 78, 0.06);
  --hdr-bg: rgba(244, 245, 247, 0.94);
  --hover-bg: rgba(16, 27, 43, 0.05);
  --shadow: 0 16px 40px rgba(16, 27, 43, 0.16);
  --ph: rgba(16, 27, 43, 0.36);
  --scrim: linear-gradient(180deg, rgba(10,18,30,.66) 0%, rgba(10,18,30,.34) 46%, rgba(10,18,30,.82) 100%);
  --glow-top: none;
  --glow-tile: none;
  --glow-cta: none;

  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Hiragino Sans", "Hiragino Sans GB", "Yu Gothic", "Microsoft YaHei", "PingFang SC", "PingFang TC",
    "Apple SD Gothic Neo", "Malgun Gothic", "Nirmala UI", "Noto Sans", sans-serif;
  --font-header: "Spectral", "Noto Serif Devanagari", "Times New Roman",
    "Hiragino Mincho ProN", "Yu Mincho", "Songti SC", "Apple SD Gothic Neo",
    "Nanum Myeongjo", serif;

  --radius: 0px;
  --h-weight: 400;
  --h-track: -0.2px;
}

h1, h2, h3, h4 { font-weight: var(--h-weight); letter-spacing: var(--h-track); line-height: 1.18; }
h1 em, .lede em { font-style: italic; color: var(--second); }
.main-header { font-size: clamp(2rem, 4vw, 3.2rem); }
.lede { font-size: 1.02rem; line-height: 1.9; }

/* Labels set like the headings on a form */
.kicker, .f label, .clist h4, .ftr h5, .row__n {
  font-family: var(--font-body);
  letter-spacing: 0.3em;
  color: var(--third);
  font-weight: 400;
}

/* Sections separated by a rule rather than a change of colour —
   the page reads as one continuous document. */
.section--soft { background: var(--bg-dark); border-block: 1px solid var(--line-soft); }
.phero { background: var(--bg); border-bottom: 1px solid var(--line); }

/* Boxed, bordered, squared: everything looks like it could be stamped */
.cats, .tiles, .stats, .sites { background: var(--line-soft); }
.cat, .tile, .stat, .site { background: var(--bg-soft); }
.tile::before { display: none; }
.tile:hover { background: #FFFFFF; }
.tile h3 { font-size: 1.6rem; }
.cat h4 { font-size: 1.4rem; }
.cat__es { color: var(--third); }
.stat b { font-weight: 400; color: var(--second); }

/* The stage table is the centre of this site */
.rows { border-top: 2px solid var(--second); margin-top: 48px; }
.rows .row { border-bottom: 1px solid var(--line-soft); }
.row__t { font-size: 1.45rem; }
.row__d { font-weight: 300; }

.btn { border-radius: 0; }
.btn--solid { background: var(--second); border-color: var(--second); color: #FFFFFF; }

.ptable table { min-width: 720px; }
.ptable th {
  background: var(--second); color: #F4F5F7;
  border-bottom: 0; letter-spacing: .18em;
}
.ptable td { color: var(--main); }
.ptable td.k { font-family: var(--font-header); font-size: 1.08rem; white-space: normal; }
.ptable td.num { color: var(--second); font-weight: 500; }
.ptable tbody tr:nth-child(even) td { background: rgba(16, 27, 43, 0.028); }

/* The disclaimer about licensed professionals is load-bearing here,
   so it is given the weight of a clause rather than a footnote. */
.note {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--second);
}
.note h4 { font-family: var(--font-header); }

.imgcard { border: 1px solid var(--line); filter: saturate(.86) contrast(1.02); }

.pull { background: var(--second); border-block: 0; }
.pull p { color: #F4F5F7; font-style: italic; }
.pull span { color: #A9C2DE; }

.quote { background: var(--bg-dark); }
.quote blockquote { font-style: italic; font-weight: 300; }

/* Dark navy footer closes the document */
.ftr { background: var(--second); border-top: 0; }
.ftr, .ftr li, .ftr ul a, .ftr__blurb, .ftr__btm { color: rgba(244, 245, 247, 0.66); }
.ftr h5 { color: rgba(244, 245, 247, 0.46); }
.ftr .brand__n { color: #FFFFFF; }
.ftr .brand__s { color: rgba(244, 245, 247, 0.54); }
.ftr__top { border-bottom-color: rgba(244, 245, 247, 0.16); }
.ftr ul a:hover, .ftr ul a.on { color: #A9C2DE; }

.tri i:nth-child(1) { background: var(--second); }
.tri i:nth-child(2) { background: var(--third); }
.tri i:nth-child(3) { background: var(--second); }

.stat span, .tile__sub { color: var(--dim); }