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

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --graphite:#15181B;
  --steel:#1F2327;
  --hairline:#3E4750;
  --hairline-bright:#8C9AA6;
  --orange:#FF5B1A;
  --orange-deep:#C93E0A;
  --paper:#F5F2EC;
  --paper-line:#E2DCCD;
  --ink:#1C1E20;
  --ink-soft:#5B6066;
  --white:#F7F5F1;
  --max:1180px;
  --section-pad:96px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3{font-family:'Oswald',sans-serif;font-weight:600;margin:0;letter-spacing:0.01em;}
p{margin:0;}
ul,ol,dl{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 16px;
}
.eyebrow::before{content:"// ";color:var(--hairline-bright);}
.eyebrow-on-paper{color:var(--orange-deep);}
.eyebrow-on-paper::before{color:var(--ink-soft);}

.section-inner{max-width:var(--max);margin:0 auto;padding:var(--section-pad) 32px;}
h2{font-size:clamp(24px,2.8vw,32px);max-width:22ch;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.05em;
  text-transform:uppercase;text-decoration:none;
  padding:13px 22px;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--orange);color:var(--graphite);font-weight:500;}
.btn-primary:hover{background:#ff7038;}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(247,245,241,0.3);}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{border-color:var(--orange-deep);color:var(--orange-deep);}

/* =========================================================
   MOBILE NAV DRAWER — shared across all pages
   ========================================================= */
.nav-panel-fondo{position:fixed;inset:0;background:rgba(21,24,27,0.55);display:none;z-index:60;}
.nav-panel-fondo.abierto{display:block;}
.nav-panel{
  position:fixed;top:0;right:0;height:100%;width:min(80vw,300px);
  background:var(--graphite);padding:24px 22px;
  transform:translateX(100%);transition:transform .2s ease;
  display:flex;flex-direction:column;gap:2px;
}
.nav-panel-fondo.abierto .nav-panel{transform:translateX(0);}
.nav-panel a{
  display:block;padding:14px 4px;border-bottom:1px solid var(--hairline);
  font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--white);
}
.nav-panel a.current{color:var(--orange);}
.nav-panel .cerrar-nav{
  align-self:flex-end;background:none;border:none;font-family:'IBM Plex Mono',monospace;
  font-size:12px;color:var(--hairline-bright);margin-bottom:10px;cursor:pointer;padding:6px;
}

/* =========================================================
   THE SHEET — full-viewport blueprint hero, on every page
   ========================================================= */
.lienzo{
  height:100dvh;
  min-height:560px;
  background:var(--paper);
  display:flex;
  padding:14px;
}
.hoja{
  flex:1;position:relative;
  background:var(--graphite);
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}
.hoja-grid{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(140,154,166,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,154,166,0.10) 1px, transparent 1px);
  background-size:34px 34px;
}
.marco{position:absolute;inset:12px;border:1px solid var(--hairline);pointer-events:none;z-index:1;}

.esquina{position:absolute;width:30px;height:30px;pointer-events:none;z-index:1;}
.esquina.tl{top:24px;left:24px;}
.esquina.tr{top:24px;right:24px;}
.esquina.bl{bottom:24px;left:24px;}
.esquina.br{bottom:24px;right:24px;}
.esquina line{stroke:var(--hairline-bright);stroke-width:1;}
.esquina circle{fill:var(--orange);}

.zone-top{
  position:absolute;top:9px;left:80px;right:80px;z-index:1;
  display:flex;justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--hairline);letter-spacing:0.06em;
}
.zone-left{
  position:absolute;top:80px;bottom:80px;left:9px;z-index:1;
  display:flex;flex-direction:column;justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--hairline);letter-spacing:0.06em;
}
@media (max-width:680px){.zone-top,.zone-left{display:none;}}

/* ---- top: logo + nav ---- */
.hoja-top{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 30px 0;
}
.logo-link{display:flex;align-items:center;}
.logo-img{height:20px;width:auto;display:block;}
.nav-inline{display:flex;align-items:center;gap:26px;}
.nav-inline a{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:0.03em;
  text-decoration:none;color:rgba(247,245,241,0.72);transition:color .15s ease;
}
.nav-inline a:hover{color:var(--orange);}
.nav-inline a.current{color:var(--orange);}
.nav-inline a.nav-cta{border:1px solid var(--orange);color:var(--orange) !important;padding:8px 15px;}
.nav-inline a.nav-cta:hover{background:var(--orange);color:var(--graphite) !important;}

.menu-toggle{
  display:none;width:32px;height:32px;background:none;
  border:1px solid rgba(247,245,241,0.35);position:relative;cursor:pointer;
}
.menu-toggle span{position:absolute;left:7px;right:7px;height:1.5px;background:var(--white);}
.menu-toggle span:nth-child(1){top:10px;}
.menu-toggle span:nth-child(2){top:15px;}
.menu-toggle span:nth-child(3){top:20px;}

@media (max-width:860px){
  .nav-inline{display:none;}
  .menu-toggle{display:block;}
}

/* ---- center: hero message ---- */
.hoja-center{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:24px 30px;max-width:740px;
}
.hoja-center h1{font-size:clamp(28px,4.6vw,46px);color:var(--white);line-height:1.14;}
.hoja-center .hero-sub{
  color:rgba(247,245,241,0.68);font-size:clamp(14.5px,1.8vw,16.5px);
  margin:18px 0 28px;max-width:54ch;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---- bottom: title block strip ---- */
.title-block-strip{
  position:relative;z-index:2;
  display:flex;border-top:1px solid var(--hairline);
  background:rgba(0,0,0,0.16);
}
.title-block-strip > div{
  padding:10px 16px;border-right:1px solid var(--hairline);white-space:nowrap;
}
.title-block-strip > div:last-child{
  border-right:none;flex:1;min-width:0;overflow:hidden;
}
.title-block-strip dt{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:9px;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--hairline-bright);margin-bottom:2px;
}
.title-block-strip dd{
  margin:0;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:680px){
  .title-block-strip > div{padding:8px 10px;}
  .title-block-strip dd{font-size:11px;}
  .tb-hide-mobile{display:none;}
}

/* =========================================================
   REUSABLE BELOW-THE-FOLD COMPONENTS
   ========================================================= */

/* ---- numbered list (services / process / liaison tiers) ---- */
.numbered-list{border-top:1px solid var(--paper-line);}
.numbered-row{
  display:grid;grid-template-columns:64px 1fr;gap:22px;
  padding:26px 0;border-bottom:1px solid var(--paper-line);
}
.row-no{
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--orange-deep);padding-top:3px;
}
.row-body h3{font-size:19px;margin-bottom:8px;}
.row-body p{color:var(--ink-soft);max-width:64ch;font-size:15px;}

/* ---- stat grid (why mexico) ---- */
.stat-grid{
  margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);
}
.stat-card{background:var(--paper);padding:26px 22px;}
.stat-card .tag{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--orange-deep);
  letter-spacing:0.08em;display:block;margin-bottom:10px;
}
.stat-card p{color:var(--ink-soft);font-size:14.5px;}

/* ---- chip grid (capabilities) ---- */
.chip-grid{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
.chip{
  border:1px solid var(--paper-line);background:#fff;padding:18px;
  display:flex;flex-direction:column;gap:8px;
}
.chip-code{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--orange-deep);
  background:rgba(255,91,26,0.08);display:inline-block;padding:3px 8px;width:fit-content;letter-spacing:0.04em;
}
.chip-name{font-size:15px;font-weight:500;}

/* ---- notes plate (general notes) ---- */
.notes-plate{background:var(--graphite);color:var(--white);}
.notes-plate .eyebrow{color:var(--orange);}
.notes-plate h2{color:var(--white);}
.notes-list{margin-top:28px;border-top:1px solid var(--hairline);}
.notes-list li{
  display:grid;grid-template-columns:34px 1fr;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--hairline);
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:rgba(247,245,241,0.82);
}
.notes-list .row-no{color:var(--orange);}

/* ---- case note (liaison) ---- */
.case-note{
  margin-top:40px;border-left:3px solid var(--orange);
  background:#fff;border-top:1px solid var(--paper-line);border-right:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);
  padding:26px 28px;
}
.case-note .tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--orange-deep);
  letter-spacing:0.1em;display:block;margin-bottom:12px;
}
.case-note p{font-size:15.5px;color:var(--ink);line-height:1.65;}

/* ---- sheet index (home) ---- */
.sheet-index{margin-top:44px;border-top:1px solid var(--paper-line);}
.sheet-index a{
  display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:18px;
  padding:22px 4px;border-bottom:1px solid var(--paper-line);
  text-decoration:none;color:var(--ink);transition:background .15s ease;
}
.sheet-index a:hover{background:#fff;}
.sheet-index .idx-no{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--orange-deep);}
.sheet-index .idx-title{font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;}
.sheet-index .idx-desc{display:block;font-family:'IBM Plex Sans',sans-serif;font-size:14px;color:var(--ink-soft);font-weight:400;margin-top:3px;}
.sheet-index .idx-arrow{font-family:'IBM Plex Mono',monospace;color:var(--hairline-bright);}
.sheet-index a:hover .idx-arrow{color:var(--orange);}

/* ---- contact / title block card / form ---- */
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;}
.contact-block p.lead{color:var(--ink-soft);margin:16px 0 28px;max-width:44ch;}
.title-block{border:1px solid var(--ink);max-width:400px;}
.title-block > div{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--paper-line);}
.title-block > div:last-child{border-bottom:none;}
.title-block dt{
  font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--ink-soft);padding:13px;border-right:1px solid var(--paper-line);
}
.title-block dd{margin:0;padding:13px;font-size:14.5px;}
.title-block dd a{text-decoration:none;border-bottom:1px solid var(--orange);}
.title-block .field-note{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:3px;}

.rfq-form{background:#fff;border:1px solid var(--paper-line);padding:32px;}
.field{margin-bottom:18px;}
.field label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--paper-line);background:var(--paper);
  padding:11px 12px;font-family:'IBM Plex Sans',sans-serif;font-size:14.5px;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--orange);outline-offset:1px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rfq-form textarea{resize:vertical;min-height:96px;}
.rfq-submit{width:100%;justify-content:center;border:none;}
[data-fs-error]{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#B3261E;margin-top:5px;}
[data-fs-error]:empty{display:none;margin:0;}
[data-fs-success]{
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;
  color:var(--orange-deep);background:rgba(255,91,26,0.08);border:1px solid var(--orange);
  padding:14px 16px;margin-bottom:18px;
}
[data-fs-success]:empty{display:none;margin:0;padding:0;border:none;}
#formTopError[data-fs-error]{
  font-size:13px;margin:0 0 16px;padding:12px 14px;background:rgba(179,38,30,0.06);border:1px solid #B3261E;
}
.hp-field{position:absolute;left:-9999px;top:-9999px;}

/* =========================================================
   FOOTER — shared
   ========================================================= */
.site-footer{background:var(--graphite);color:rgba(247,245,241,0.62);}
.footer-inner{
  max-width:var(--max);margin:0 auto;padding:52px 32px 28px;
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;
}
.footer-brand .logo-img{height:18px;margin-bottom:14px;}
.footer-brand p{font-size:13.5px;line-height:1.6;max-width:36ch;}
.footer-col h4{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--hairline-bright);margin-bottom:14px;
}
.footer-col a{display:block;font-size:13.5px;padding:5px 0;text-decoration:none;color:rgba(247,245,241,0.72);}
.footer-col a:hover{color:var(--orange);}
.footer-bottom{
  max-width:var(--max);margin:0 auto;padding:18px 32px 28px;
  border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.03em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  :root{--section-pad:64px;}
  .field-row{grid-template-columns:1fr;}
  .numbered-row{grid-template-columns:40px 1fr;}
  .footer-inner{grid-template-columns:1fr;gap:26px;}
}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}