/* ==========================================================================
   MASIG v2 — Design tokens: technical drawing / blueprint system
   ========================================================================== */
:root{
  --paper:      #F5F7F8;
  --paper-line: #D6E0E5;
  --ink:        #13212C;
  --ink-soft:   #4B5C66;
  --blue-deep:  #0F3A5C;
  --blue:       #1F6FA8;
  --blue-bright:#3B93D1;
  --red:        #C3341F;
  --white:      #FFFFFF;
  --sheet-dark: #0B1F2E;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --wrap: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.68,.32,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

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

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-family: var(--font-display); font-weight:600; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
.mono{ font-family: var(--font-mono); }

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

:focus-visible{ outline: 2.5px solid var(--red); outline-offset: 3px; }

/* ==========================================================================
   Crop marks (page corners) — signature framing device
   ========================================================================== */
.crop{ position: fixed; width: 22px; height: 22px; z-index: 600; pointer-events:none; }
.crop::before, .crop::after{ content:''; position:absolute; background: var(--ink); opacity:.55; }
.crop::before{ width:100%; height:1.5px; top:50%; }
.crop::after{ height:100%; width:1.5px; left:50%; }
.crop--tl{ top:14px; left:14px; }
.crop--tr{ top:14px; right:14px; }
.crop--bl{ bottom:14px; left:14px; }
.crop--br{ bottom:14px; right:14px; }
@media (max-width: 700px){ .crop{ display:none; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  padding: .9em 1.9em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn--primary{ background: var(--red); color: var(--white); }
.btn--primary:hover{ background:#a82c1a; transform: translateY(-2px); }
.btn--outline{ border-color: var(--ink); color: var(--ink); }
.btn--outline:hover{ background: var(--ink); color: var(--white); }
.sheet--ink .btn--outline{ border-color: rgba(255,255,255,.5); color: var(--white); }
.sheet--ink .btn--outline:hover{ background: rgba(255,255,255,.12); }
.btn--wide{ width:100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  padding: 20px 0;
  background: rgba(245,247,248,.97);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), padding .3s var(--ease);
}
.site-header.is-scrolled{ border-color: var(--paper-line); padding: 13px 0; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand-logo{ height: 38px; width:auto; transition: height .3s var(--ease); }
.is-scrolled .brand-logo{ height: 32px; }

.main-nav{ display:flex; align-items:center; gap: 30px; }
.main-nav a{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink);
  display:flex; align-items:center; gap:6px;
}
.main-nav a span{ color: var(--blue); font-size:.7rem; }
.main-nav a:not(.nav-cta):hover{ color: var(--red); }
.nav-cta{
  font-family: var(--font-display); font-weight:600; text-transform:none;
  border: 1.5px solid var(--red);
  color: var(--red) !important;
  padding: .5em 1.2em;
  border-radius: var(--radius);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-cta:hover{ background: var(--red); color: var(--white) !important; }

.nav-toggle{ display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; padding: 6px; }
.nav-toggle span{ width:24px; height:1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* ==========================================================================
   Sheets — shared section chrome
   ========================================================================== */
.sheet{ position: relative; padding: 130px 0 90px; border-bottom: 1px solid var(--paper-line); }
.sheet--tight{ padding: 90px 0; }
.sheet--ink{ background: var(--sheet-dark); color: rgba(255,255,255,.82); border-bottom-color: rgba(255,255,255,.08); }
.sheet--ink p{ color: rgba(255,255,255,.72); }

.sheet-index{
  position:absolute; top: 24px; right: 32px;
  font-family: var(--font-mono); font-size: .75rem; color: var(--ink-soft);
  letter-spacing: .04em;
}
.sheet-index span{ color: var(--blue); }
.sheet-index--light{ color: rgba(255,255,255,.55); }
.sheet-index--light span{ color: var(--blue-bright); }

.sheet-head{ max-width: 720px; margin-bottom: 52px; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--blue);
  display:flex; align-items:center; gap:.6em;
  margin: 0 0 16px;
}
.eyebrow-mark{ color: var(--red); font-size: 1.1em; }
.eyebrow--light{ color: var(--blue-bright); }
.sheet-title{
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
  font-weight: 600;
}
.sheet-title--light{ color: var(--white); }
.sheet-sub{ margin-top: 14px; font-size: 1.02rem; color: var(--ink-soft); max-width: 62ch; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding-top: 150px; overflow:hidden; }
.grid-field{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 90%);
  opacity: .7;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items:center;
}
.hero-title{
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.05;
  max-width: 12ch;
  margin-bottom: 22px;
  color: var(--ink);
}
.ink-red{ color: var(--red); }
.hero-lede{ font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--ink-soft); max-width: 46ch; margin-bottom: 32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-figure{ position:relative; }
.hero-figure svg{ width:100%; height:auto; }
.bp-line{ stroke: var(--blue); stroke-width: 1.4; }
.bp-thin{ stroke-width: 1; }
.bp-line-red{ stroke: var(--red); stroke-width: 1.6; fill:none; }
.bp-label{ font-family: var(--font-mono); font-size: 12px; fill: var(--ink-soft); }
.bp-label--sm{ font-size: 10px; fill: var(--ink-soft); opacity:.7; }
#blueprintSvg path.bp-line, #blueprintSvg circle.bp-line, #blueprintSvg line.bp-line,
#blueprintSvg circle.bp-line-red{
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 2.6s var(--ease) forwards;
}
#blueprintSvg circle[stroke-dasharray]{ animation-delay: .1s; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){
  #blueprintSvg *{ animation: none !important; stroke-dashoffset: 0 !important; }
}

/* dimension stat strip */
.dim-strip{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 70px;
  border-top: 1.5px solid var(--ink);
}
.dim-item{
  position:relative; padding: 22px 20px 0;
  border-right: 1px solid var(--paper-line);
}
.dim-item:last-child{ border-right:0; }
.dim-item::before{
  content:''; position:absolute; top:-5px; left:0; width:1.5px; height:10px; background: var(--ink);
}
.dim-value{ font-family: var(--font-display); font-size: 2rem; font-weight:700; color: var(--ink); }
.dim-value--text{ font-size: 1.35rem; }
.dim-plus{ font-family: var(--font-display); font-size: 1.2rem; color: var(--red); }
.dim-label{ display:block; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); margin-top: 6px; }

/* ==========================================================================
   Title block — signature reusable component
   ========================================================================== */
.title-block{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(4, 1fr);
  border: 1.5px solid var(--ink);
  margin-top: 26px;
  background: var(--white);
}
.wrap-block{ max-width: var(--wrap); margin-left:auto; margin-right:auto; }
.tb-cell{
  padding: 12px 18px; border-right: 1px solid var(--paper-line); border-top: 1px solid var(--paper-line);
  display:flex; flex-direction:column; gap: 4px; justify-content:center;
}
.tb-cell:first-child, .tb-cell:nth-child(4n+1){ border-top:0; }
.tb-cell:last-child{ border-right:0; }
.tb-cell--wide{ grid-column: span 2; }
.tb-k{ font-family: var(--font-mono); font-size: .66rem; letter-spacing:.05em; text-transform:uppercase; color: var(--blue); }
.tb-v{ font-size: .92rem; color: var(--ink); }
.tb-v a:hover{ color: var(--red); }

/* ==========================================================================
   Nosotros
   ========================================================================== */
.about-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:start; }
.about-copy p{ font-size: 1.03rem; color: var(--ink-soft); }
.about-copy p + p{ margin-top: 1.1em; margin-bottom: 1.6em; }

.framed-photo{ position:relative; margin: 0; border: 1.5px solid var(--ink); }
.framed-photo img{ display:block; width:100%; }
.framed-photo figcaption{
  padding: 10px 14px; font-size: .82rem; color: var(--ink-soft); border-top: 1px solid var(--paper-line);
  background: var(--white);
}
.framed-photo figcaption .mono{ color: var(--blue); margin-right: 6px; }

.crosshair{ position:absolute; width:16px; height:16px; }
.crosshair::before, .crosshair::after{ content:''; position:absolute; background: var(--red); }
.crosshair::before{ width:100%; height:1px; top:50%; }
.crosshair::after{ height:100%; width:1px; left:50%; }
.crosshair--tl{ top:8px; left:8px; }
.crosshair--br{ bottom:8px; right:8px; }

.detail-views{ display:grid; gap: 0; border: 1px solid var(--paper-line); }
.detail-view{ position:relative; padding: 26px 26px 24px 64px; border-top: 1px solid var(--paper-line); }
.detail-view:first-child{ border-top:0; }
.detail-letter{
  position:absolute; left: 22px; top: 26px;
  width: 30px; height:30px; border: 1.5px solid var(--blue); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size: .85rem; color: var(--blue);
}
.detail-view h3{ font-size: 1.1rem; margin-bottom: 6px; }
.detail-view p{ color: var(--ink-soft); font-size: .95rem; }

/* ==========================================================================
   Servicios — BOM table
   ========================================================================== */
.bom-table{ width:100%; border-collapse: collapse; }
.bom-table thead th{
  text-align:left; font-family: var(--font-mono); font-size: .72rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--blue-bright); padding: 0 16px 14px; border-bottom: 1.5px solid rgba(255,255,255,.3);
}
.bom-table thead th:first-child{ width: 70px; }
.bom-table thead th:last-child{ width: 160px; }
.bom-table td{
  padding: 22px 16px; border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: top;
}
.bom-table td:first-child{ font-size: 1.1rem; color: var(--blue-bright); }
.bom-table td:last-child{ color: rgba(255,255,255,.55); font-size: .85rem; }
.bom-table strong{ display:block; color: var(--white); font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 4px; font-weight:600; }
.bom-table span{ display:block; font-size: .92rem; color: rgba(255,255,255,.65); max-width: 52ch; }
.bom-table tbody tr{ transition: background .25s var(--ease); }
.bom-table tbody tr:hover{ background: rgba(59,147,209,.06); }

/* ==========================================================================
   Calidad / ISO stamp
   ========================================================================== */
.quality-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items:center; }
.quality-copy p{ color: var(--ink-soft); font-size: 1.02rem; }
.quality-copy p + p{ margin-top: 1em; }
.spec-list{ margin-top: 20px; display:grid; gap: 12px; }
.spec-list li{ display:flex; gap: 12px; align-items:baseline; color: var(--ink-soft); font-size: .95rem; }
.spec-list li .mono{ color: var(--red); font-size: .8rem; }

.stamp-wrap{ display:flex; justify-content:center; }
.stamp{ width: 100%; max-width: 320px; }
.stamp-ring{ fill:none; stroke: var(--blue-deep); stroke-width: 2; }
.stamp-ring--thin{ stroke-width: 1; stroke-dasharray: 3 4; opacity:.6; }
.stamp-text{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 2px; fill: var(--blue-deep); }
.stamp-iso{ font-family: var(--font-display); font-size: 28px; font-weight:700; fill: var(--ink); }
.stamp-number{ font-family: var(--font-mono); font-size: 17px; fill: var(--red); }
.stamp-check{ fill:none; stroke: var(--red); stroke-width: 4; stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   Galería
   ========================================================================== */
.gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery-item{
  position:relative; margin:0; border: 1px solid var(--paper-line); background: var(--white); cursor: zoom-in;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gallery-item:hover{ border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 16px 30px rgba(15,58,92,.12); }
.gallery-item .crosshair{ opacity:0; transition: opacity .25s var(--ease); }
.gallery-item:hover .crosshair{ opacity:1; }
.gallery-item img{ width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; }
.gallery-item figcaption{
  padding: 10px 14px; font-size: .82rem; color: var(--ink-soft); border-top: 1px solid var(--paper-line);
  display:flex; gap:8px;
}
.gallery-item figcaption .mono{ color: var(--blue); }

.lightbox{
  position: fixed; inset:0; z-index: 900; background: rgba(11,31,46,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease);
  padding: 40px;
}
.lightbox.is-open{ opacity:1; visibility: visible; }
.lightbox img{ max-width: 90vw; max-height: 86vh; border: 2px solid var(--white); }
.lightbox-close{
  position: absolute; top: 24px; right: 28px; background:none; border:0; color:#fff;
  font-size: 2.4rem; line-height:1; cursor:pointer;
}

/* ==========================================================================
   Clientes — index list
   ========================================================================== */
.client-index{
  display:grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--paper-line);
}
.client-index li{
  display:flex; align-items:center; gap: 14px;
  padding: 16px 20px; border-top: 1px solid var(--paper-line); border-right: 1px solid var(--paper-line);
  font-size: .98rem; color: var(--ink);
  transition: background .2s var(--ease);
}
.client-index li:nth-child(-n+2){ border-top:0; }
.client-index li:nth-child(even){ border-right:0; }
.client-index li:hover{ background: var(--white); }
.client-index li .mono{ color: var(--blue); font-size: .82rem; width: 24px; flex-shrink:0; }

/* ==========================================================================
   Contacto
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:start; }
.contact-form{
  background: var(--white); border: 1.5px solid var(--ink);
  padding: 34px; display:grid; gap: 20px;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form label{ display:flex; flex-direction:column; gap: 8px; }
.contact-form span{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color: var(--blue); }
.contact-form input, .contact-form textarea{
  font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
  border: 1.5px solid var(--paper-line); border-radius: var(--radius); background: var(--paper);
  transition: border-color .25s var(--ease), background .25s var(--ease);
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--blue); background: var(--white); outline:none; }
.form-note{ font-size: .78rem; color: var(--ink-soft); text-align:center; }

.title-block--contact{ background: transparent; border-color: rgba(255,255,255,.35); }
.title-block--contact .tb-cell{ border-color: rgba(255,255,255,.15); }
.title-block--contact .tb-k{ color: var(--blue-bright); }
.title-block--contact .tb-v{ color: rgba(255,255,255,.88); }
.title-block--contact .tb-v a:hover{ color: var(--red); }
.map-cell{ padding:0; }
.map-cell iframe{ width:100%; height: 200px; border:0; filter: grayscale(.3) invert(.92) contrast(.9); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--sheet-dark); color: rgba(255,255,255,.65); padding: 56px 0 30px; }
.footer-inner{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; align-items:start; }
.footer-logo{ height: 40px; margin-bottom: 14px; }
.footer-brand p{ font-size:.86rem; }
.footer-nav{ display:grid; gap: 10px; align-content:start; font-family: var(--font-mono); font-size:.82rem; }
.footer-nav a:hover{ color: var(--red); }
.footer-meta{ font-size: .82rem; display:grid; gap:6px; justify-items:start; }
@media (min-width: 701px){ .footer-meta{ justify-items:end; text-align:right; } }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.bom-table tbody tr.reveal{ transform: translateX(-14px); }
.bom-table tbody tr.reveal.is-visible{ transform: translateX(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-figure{ max-width: 360px; margin: 0 auto; }
  .about-grid, .quality-grid, .contact-grid{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .dim-strip{ grid-template-columns: repeat(2, 1fr); }
  .dim-item:nth-child(2){ border-right:0; }
  .title-block{ grid-template-columns: repeat(2, 1fr); }
  .tb-cell:nth-child(2n+1){ border-left:0; }
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-meta{ justify-items:start; text-align:left; }
  .bom-table thead{ display:none; }
  .bom-table td{ display:block; padding: 6px 0; border-bottom:0; }
  .bom-table tr{ display:block; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .bom-table td:first-child{ font-size: .85rem; color: var(--blue-bright); }
}

@media (max-width: 700px){
  .wrap{ padding: 0 22px; }
  .main-nav{
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    background: var(--paper); flex-direction:column; align-items:flex-start;
    padding: 100px 32px 40px; gap: 26px;
    transform: translateX(100%); transition: transform .4s var(--ease);
    box-shadow: -20px 0 50px rgba(0,0,0,.15);
    border-left: 1px solid var(--paper-line);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); }

  .hero{ padding-top: 120px; }
  .sheet{ padding: 96px 0 70px; }
  .sheet-index{ top: 18px; right: 22px; font-size: .68rem; }
  .gallery{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .form-row{ grid-template-columns: 1fr; }
  .client-index{ grid-template-columns: 1fr; }
  .client-index li:nth-child(2){ border-top:1px solid var(--paper-line); }
  .client-index li{ border-right:0; }
  .title-block{ grid-template-columns: 1fr; }
  .tb-cell{ border-right:0 !important; border-top: 1px solid var(--paper-line) !important; }
  .tb-cell:first-child{ border-top:0 !important; }
}