/* ============================================================
   GRUPO INARCO S.A.S. — sistema de diseño
   Concepto de capa: papel de plano técnico (claro) con dos
   tramos "tinta" (oscuros) de apertura y cierre; divisores en
   forma de cinta métrica, tomados del propio isotipo de la marca
   (la "i" de Inarco es una regla). Tema único, de marca fija.
   ============================================================ */

:root{
  color-scheme: light;

  /* — Color — */
  --ink:        #15191D;   /* carbón casi negro, con matiz azulado */
  --ink-soft:   #2B3138;   /* carbón secundario, texto sobre ink */
  --paper:      #F3F2EC;   /* fondo neutro frío, no crema cálido */
  --paper-raise:#FFFFFF;   /* superficie elevada sobre paper */
  --concrete:   #DEDAD0;   /* borde/panel "concreto" */
  --concrete-2: #C8C3B6;   /* concreto más oscuro, hairlines fuertes */
  --steel:      #4B5560;   /* acento frío secundario, texto/íconos */
  --orange:     #EF8023;   /* naranja de marca, tomado del logo */
  --orange-dim: #C96515;   /* naranja oscurecido, hover/active */
  --orange-soft:#F6B46A;   /* naranja claro, washes/focos suaves */

  --text-on-ink:   #F3F2EC;
  --text-on-ink-dim: #AEB3B8;

  /* — Tipografía — */
  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.75rem;
  --text-2xl:  clamp(2rem, 1.55rem + 2vw, 2.85rem);
  --text-3xl:  clamp(2.75rem, 1.7rem + 4.6vw, 5rem);

  /* — Espaciado — */
  --gutter: clamp(20px, 5vw, 56px);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 136px;

  --radius: 3px;
  --container: 1180px;
}

/* — Reset puntual sobre el de la plataforma — */
*,*::before,*::after{ box-sizing: border-box; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: 0.002em;
  margin: 0;
  text-wrap: balance;
}
p{ margin: 0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }
.icon{
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; flex: none;
}
.icon-sm{ width:18px; height:18px; }
.icon-lg{ width:32px; height:32px; }
.tabular{ font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* — Layout primitives — */
.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{
  padding-block: var(--sp-9);
}
.section--tight{ padding-block: var(--sp-7); }
.section--ink{ background: var(--ink); color: var(--text-on-ink); }
.section--raise{ background: var(--paper-raise); }

.grid{ display:grid; gap: var(--sp-6); }
.cols-2{ grid-template-columns: repeat(2,1fr); }
.cols-3{ grid-template-columns: repeat(3,1fr); }
.cols-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){
  .cols-3, .cols-4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .cols-2, .cols-3, .cols-4{ grid-template-columns: 1fr; }
}

.eyebrow{
  display:flex; align-items:center; gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: var(--text-xs);
  color: var(--steel);
  margin-bottom: var(--sp-4);
}
.section--ink .eyebrow{ color: var(--text-on-ink-dim); }
.eyebrow .idx{ color: var(--orange); }
.hero-home .eyebrow{ color: var(--orange-soft); }
.page-hero-simple .eyebrow{ color: var(--orange-soft); }

.lead{
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: 54ch;
  line-height: 1.5;
}
.section--ink .lead{ color: var(--text-on-ink-dim); }

/* — Regla/cinta métrica: divisor de marca — */
.ruler{
  height: 18px;
  width: 100%;
  background-repeat: repeat-x;
  background-size: 110px 18px;
  background-position: left center;
  opacity: 0.9;
}
.ruler--dark{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 18'%3E%3Cg stroke='%2315191D' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M1 18V11M12 18V14M23 18V11M34 18V14M45 18V11M56 18V4M67 18V11M78 18V14M89 18V11M100 18V14'/%3E%3C/g%3E%3C/svg%3E");
}
.ruler--light{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 18'%3E%3Cg stroke='%23EF8023' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M1 18V11M12 18V14M23 18V11M34 18V14M45 18V11M56 18V4M67 18V11M78 18V14M89 18V11M100 18V14'/%3E%3C/g%3E%3C/svg%3E");
}

/* — Botones — */
.btn{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--f-body); font-weight: 600; font-size: var(--text-sm);
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--orange); color: #1A1105;
}
.btn-primary:hover{ background: var(--orange-dim); color: var(--text-on-ink); }
.btn-outline{
  border-color: var(--concrete-2); color: var(--ink);
  background: transparent;
}
.btn-outline:hover{ border-color: var(--ink); background: var(--paper-raise); }
.section--ink .btn-outline, .page-hero .btn-outline{ border-color: #3A4249; color: var(--text-on-ink); }
.section--ink .btn-outline:hover, .page-hero .btn-outline:hover{ border-color: var(--text-on-ink); background: #1D2227; }
.btn-ghost{ color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.btn-ghost .icon{ transition: transform .15s ease; }
.btn-ghost:hover .icon{ transform: translateX(3px); }
.section--ink .btn-ghost{ color: var(--text-on-ink); }

/* ============================================================
   Encabezado / navegación de pestañas reales
   ============================================================ */
.site-header{
  position: sticky; top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: rgba(243,242,236,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--concrete-2);
}
/* backdrop-filter establishes a containing block for fixed-position
   descendants, which collapsed the mobile nav overlay to a sliver.
   Drop it while the menu is open so .main-nav sizes against the viewport. */
body.nav-open .site-header{ backdrop-filter: none; background: var(--paper); }
.header-inner{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 76px;
  display: flex; align-items: center; gap: var(--sp-6);
}
.brand{ display:flex; align-items:center; flex: none; }
.brand img{ height: 54px; width: auto; }
@media (max-width: 640px){
  .brand img{ height: 44px; }
}

.main-nav{
  display: flex; align-items: stretch; gap: var(--sp-2);
  margin-inline: auto;
}
.main-nav a{
  display:flex; align-items:center;
  height: 76px;
  padding-inline: var(--sp-3);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--steel);
  border-top: 3px solid transparent;
  position: relative;
  transition: color .15s ease;
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a[aria-current="page"]{
  color: var(--ink);
  border-top-color: var(--orange);
}
.main-nav a[aria-current="page"]::after{
  content:"";
  position:absolute; left: var(--sp-3); right: var(--sp-3); bottom: 10px; height: 2px;
  background: var(--concrete-2);
}

.header-cta{ flex: none; }
.nav-toggle{
  display:none; flex:none; width: 44px; height: 44px;
  align-items:center; justify-content:center;
  border: 1px solid var(--concrete-2); border-radius: var(--radius);
}

@media (max-width: 920px){
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .main-nav{
    position: fixed; inset: 76px 0 0 0;
    margin: 0;
    flex-direction: column; align-items: stretch;
    background: var(--paper);
    padding: var(--sp-4) var(--gutter);
    gap: 0;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .main-nav.is-open{
    opacity: 1; transform: translateY(0); visibility: visible;
  }
  .main-nav a{
    height: auto; padding-block: var(--sp-4);
    border-top: 0; border-bottom: 1px solid var(--concrete);
    font-size: var(--text-lg); font-family: var(--f-display); font-weight: 700;
  }
  .main-nav a[aria-current="page"]::after{ display:none; }
  .main-nav .header-cta-mobile{ margin-top: var(--sp-5); display:flex; }
}
@media (min-width: 921px){
  .main-nav a.header-cta-mobile{ display:none; }
}

/* ============================================================
   Héroe — tramo de página (cada página trae el suyo)
   ============================================================ */
.page-hero{
  background: var(--ink);
  color: var(--text-on-ink);
  padding-top: var(--sp-9);
  position: relative;
  overflow: clip;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(243,242,236,0.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(243,242,236,0.05) 0 1px, transparent 1px 64px);
  pointer-events: none;
}
.page-hero .wrap{ position: relative; }
.page-hero-simple .wrap{ z-index: 1; }
.page-hero-simple::after{
  content:"";
  position:absolute; inset:0 0 0 auto; z-index:0;
  width: min(620px, 56%); height:100%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20720%20480%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28243%2C242%2C236%2C0.16%29%22%20stroke-width%3D%221.4%22%3E%0A%20%20%20%20%3Crect%20x%3D%22380%22%20y%3D%2278%22%20width%3D%22300%22%20height%3D%22352%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22366%22%20y1%3D%2278%22%20x2%3D%22694%22%20y2%3D%2278%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22380%22%20y1%3D%22138%22%20x2%3D%22680%22%20y2%3D%22138%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22380%22%20y1%3D%22198%22%20x2%3D%22680%22%20y2%3D%22198%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22380%22%20y1%3D%22258%22%20x2%3D%22680%22%20y2%3D%22258%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22380%22%20y1%3D%22318%22%20x2%3D%22680%22%20y2%3D%22318%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22380%22%20y1%3D%22378%22%20x2%3D%22680%22%20y2%3D%22378%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22430%22%20y1%3D%2278%22%20x2%3D%22430%22%20y2%3D%22430%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22480%22%20y1%3D%2278%22%20x2%3D%22480%22%20y2%3D%22430%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22530%22%20y1%3D%2278%22%20x2%3D%22530%22%20y2%3D%22430%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22580%22%20y1%3D%2278%22%20x2%3D%22580%22%20y2%3D%22430%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22630%22%20y1%3D%2278%22%20x2%3D%22630%22%20y2%3D%22430%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20stroke%3D%22rgba%28239%2C128%2C35%2C0.30%29%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22430%22%20x2%3D%22168%22%20y2%3D%2296%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2260%22%20y1%3D%2296%22%20x2%3D%22382%22%20y2%3D%2296%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%2296%22%20x2%3D%22128%22%20y2%3D%2284%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2260%22%20y1%3D%2296%22%20x2%3D%2278%22%20y2%3D%22118%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%2260%22%20y1%3D%2296%22%20x2%3D%2278%22%20y2%3D%2274%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%2296%22%20x2%3D%22146%22%20y2%3D%22118%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%2296%22%20x2%3D%22190%22%20y2%3D%22118%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22300%22%20y1%3D%2296%22%20x2%3D%22300%22%20y2%3D%22240%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22294%22%20y1%3D%22234%22%20x2%3D%22300%22%20y2%3D%22240%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22306%22%20y1%3D%22234%22%20x2%3D%22300%22%20y2%3D%22240%22/%3E%0A%20%20%20%20%3Crect%20x%3D%22288%22%20y%3D%22240%22%20width%3D%2224%22%20height%3D%2216%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20stroke%3D%22rgba%28243%2C242%2C236%2C0.14%29%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22180%22%20x2%3D%22140%22%20y2%3D%22210%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22210%22%20x2%3D%22140%22%20y2%3D%22240%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22240%22%20x2%3D%22140%22%20y2%3D%22270%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22270%22%20x2%3D%22140%22%20y2%3D%22300%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22300%22%20x2%3D%22140%22%20y2%3D%22330%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22330%22%20x2%3D%22140%22%20y2%3D%22360%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22360%22%20x2%3D%22140%22%20y2%3D%22390%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22180%22%20x2%3D%22196%22%20y2%3D%22210%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22210%22%20x2%3D%22196%22%20y2%3D%22240%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22240%22%20x2%3D%22196%22%20y2%3D%22270%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22270%22%20x2%3D%22196%22%20y2%3D%22300%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22300%22%20x2%3D%22196%22%20y2%3D%22330%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22330%22%20x2%3D%22196%22%20y2%3D%22360%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22360%22%20x2%3D%22196%22%20y2%3D%22390%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20stroke%3D%22rgba%28243%2C242%2C236%2C0.22%29%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22458%22%20x2%3D%22680%22%20y2%3D%22458%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22168%22%20y1%3D%22450%22%20x2%3D%22168%22%20y2%3D%22466%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22300%22%20y1%3D%22450%22%20x2%3D%22300%22%20y2%3D%22466%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22430%22%20y1%3D%22450%22%20x2%3D%22430%22%20y2%3D%22466%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22530%22%20y1%3D%22450%22%20x2%3D%22530%22%20y2%3D%22466%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22630%22%20y1%3D%22450%22%20x2%3D%22630%22%20y2%3D%22466%22/%3E%0A%20%20%20%20%3Cline%20x1%3D%22680%22%20y1%3D%22450%22%20x2%3D%22680%22%20y2%3D%22466%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E")
    no-repeat right center / contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  pointer-events: none;
}
@media (max-width: 920px){
  .page-hero-simple::after{ width: 72%; opacity:.7; }
}
@media (max-width: 640px){
  .page-hero-simple::after{ display:none; }
}

.hero-home{
  padding-bottom: var(--sp-9);
  background: var(--ink);
}

/* — Carrusel de fondo del hero — */
.hero-slider{ position:absolute; inset:0; overflow:clip; }
.hero-slide{
  position:absolute; inset:0;
  background-size: cover; background-position: center right;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.is-active{ opacity: 1; z-index: 1; }
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover; object-position: center right;
}
.hero-slider::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  background-image: linear-gradient(90deg, rgba(21,25,29,.97) 0%, rgba(21,25,29,.90) 34%, rgba(21,25,29,.58) 62%, rgba(21,25,29,.32) 100%);
}
@media (max-width: 760px){
  .hero-slide{ background-position: center 30%; }
  .hero-video{ object-position: center 30%; }
  .hero-slider::after{
    background-image: linear-gradient(180deg, rgba(21,25,29,.80) 0%, rgba(21,25,29,.94) 55%, rgba(21,25,29,.99) 100%);
  }
}
.hero-nav{
  position:absolute; z-index:3; bottom: var(--sp-6); right: var(--sp-6);
  display:flex; gap: var(--sp-3);
}
.hero-nav button{
  width:44px; height:44px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(243,242,236,0.35);
  background: rgba(21,25,29,0.4);
  color: var(--text-on-ink);
  backdrop-filter: blur(4px);
  transition: background-color .15s ease, border-color .15s ease;
}
.hero-nav button:hover{ background: var(--orange); border-color: var(--orange); color: #1A1105; }
.hero-nav button:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 640px){
  .hero-nav{ bottom: var(--sp-5); right: var(--sp-5); }
  .hero-nav button{ width:38px; height:38px; }
}
.hero-home .hero-head{
  max-width: 920px;
  position: relative; z-index: 4;
}
.hero-home .stat-strip{ position: relative; z-index: 4; }
.hero-home h1{
  font-size: var(--text-3xl);
  letter-spacing: 0.001em;
  margin-bottom: var(--sp-5);
}
.hero-home .lead{ max-width: 56ch; margin-bottom: var(--sp-7); color: var(--text-on-ink-dim); }
.hero-actions{ display:flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-8); }

.stat-strip{
  display:grid; grid-template-columns: repeat(3,auto);
  gap: var(--sp-8);
  border-top: 1px solid #2A3137;
  padding-top: var(--sp-6);
}
.stat-strip .stat-num{
  font-family: var(--f-mono); font-size: var(--text-2xl); font-weight: 600;
  color: var(--orange-soft);
  display:block;
}
.stat-strip .stat-label{
  font-size: var(--text-xs); color: var(--text-on-ink-dim);
  margin-top: var(--sp-1);
}
@media (max-width: 640px){
  .stat-strip{ grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-7); }
}

.page-hero-simple{ padding-block: var(--sp-8) var(--sp-9); }
.page-hero-simple h1{ font-size: clamp(2.5rem, 2rem + 2.6vw, 3.6rem); margin-bottom: var(--sp-4); }
.page-hero-simple .lead{ color: var(--text-on-ink-dim); }
.hero-facts{
  margin-top: var(--sp-7);
  display:flex; gap: var(--sp-8); flex-wrap: wrap;
  border-top: 1px solid #2A3137; padding-top: var(--sp-5);
}
.hero-facts dt{ font-family: var(--f-mono); font-size: var(--text-xs); color: var(--text-on-ink-dim); }
.hero-facts dd{ margin: var(--sp-1) 0 0; font-weight: 600; }

/* ============================================================
   Tarjetas / paneles
   ============================================================ */
.panel{
  background: var(--paper-raise);
  border: 1px solid var(--concrete-2);
  border-radius: var(--radius);
  padding: var(--sp-6);
}
.panel-flat{
  border-top: 1px solid var(--concrete-2);
  padding-top: var(--sp-5);
}

.fact-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6);
  border-top: 2px solid var(--orange);
  padding-top: var(--sp-5);
}
.fact-grid dt{ font-family: var(--f-mono); font-size: var(--text-xs); color: var(--steel); }
.fact-grid dd{ margin: var(--sp-1) 0 0; font-family: var(--f-display); font-size: var(--text-lg); font-weight: 700; }
@media (max-width: 640px){ .fact-grid{ grid-template-columns: 1fr; gap: var(--sp-4); } }

.service-card{
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--concrete-2);
  background: var(--paper-raise);
  border-top: 3px solid var(--orange);
  display:flex; flex-direction:column; gap: var(--sp-4);
}
.service-card .icon{ color: var(--orange); }
.service-card h3{ font-size: var(--text-xl); }
.service-card p{ color: var(--ink-soft); font-size: var(--text-sm); }
.service-card .count{
  font-family: var(--f-mono); font-size: var(--text-xs); color: var(--steel);
  margin-top: auto;
}

.value-card{ display:flex; gap: var(--sp-4); align-items:flex-start; }
.value-card .icon{ color: var(--orange); margin-top: 2px; }
.value-card h3{ font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.value-card p{ color: var(--ink-soft); font-size: var(--text-sm); }

.process-list{ display:flex; flex-direction:column; }
.process-step{
  display:grid; grid-template-columns: 64px 1fr; gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--concrete-2);
}
.process-step:last-child{ border-bottom: 1px solid var(--concrete-2); }
.process-step .num{
  font-family: var(--f-mono); font-size: var(--text-xl); color: var(--orange); font-weight: 600;
}
.process-step h3{ font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.process-step p{ color: var(--ink-soft); max-width: 58ch; }
@media (max-width: 640px){
  .process-step{ grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* — Franja de clientes — */
.client-wall{
  display:grid; grid-template-columns: repeat(5,1fr); gap: 1px;
  background: var(--concrete-2);
  border: 1px solid var(--concrete-2);
}
.client-wall li{
  background: var(--paper-raise);
  aspect-ratio: 1.6 / 1;
  display:flex; align-items:center; justify-content:center;
  padding: var(--sp-5);
}
.client-wall img{ max-height: 54px; width: auto; filter: grayscale(1) contrast(1.05); opacity: .72; transition: filter .15s ease, opacity .15s ease; }
.client-wall li:hover img{ filter:none; opacity: 1; }
@media (max-width: 900px){ .client-wall{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .client-wall{ grid-template-columns: repeat(2,1fr); } }

/* — Proyecto destacado — */
.project-feature{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8);
  align-items: center;
}
.project-art{
  aspect-ratio: 4/3;
  background: var(--ink);
  position: relative;
  overflow: clip;
  display:flex; align-items:flex-end;
}
.project-art::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, rgba(243,242,236,0.06) 0 1px, transparent 1px 36px),
                     repeating-linear-gradient(0deg, rgba(243,242,236,0.06) 0 1px, transparent 1px 36px);
}
.project-art.has-photo{
  background-image:
    linear-gradient(0deg, rgba(21,25,29,.88) 0%, rgba(21,25,29,.15) 45%, rgba(21,25,29,.05) 100%),
    url('assets/proyecto-cto-mindefensa.jpg');
  background-size: cover;
  background-position: center;
}
.project-art.has-photo::before{ display:none; }
.project-art .tag{
  position: relative;
  margin: var(--sp-5);
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--orange-soft);
  border: 1px solid #3A4249;
  padding: var(--sp-2) var(--sp-3);
}
.project-copy .kicker{
  font-family: var(--f-mono); font-size: var(--text-xs); color: var(--steel); margin-bottom: var(--sp-3);
}
.project-copy h3{ font-size: var(--text-2xl); margin-bottom: var(--sp-4); }
.project-copy p{ color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--sp-5); }
@media (max-width: 820px){ .project-feature{ grid-template-columns: 1fr; } }

/* — Carrusel de proyecto (varias fotos de una misma obra) — */
.project-carousel{
  aspect-ratio: 4/3;
  background: var(--ink);
  position: relative;
  overflow: clip;
}
.project-carousel .pcar-slide{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity .8s ease;
}
.project-carousel .pcar-slide.is-active{ opacity: 1; z-index: 1; }
.project-carousel::after{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image: linear-gradient(0deg, rgba(21,25,29,.88) 0%, rgba(21,25,29,.12) 45%, rgba(21,25,29,.02) 100%);
}
.project-carousel .tag{
  position: relative; z-index:3;
  margin: var(--sp-5);
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--orange-soft);
  border: 1px solid #3A4249;
  padding: var(--sp-2) var(--sp-3);
  display:inline-block;
}
.project-carousel .pcar-nav{
  position:absolute; z-index:4; bottom: var(--sp-5); right: var(--sp-5);
  display:flex; gap: var(--sp-2);
}
.project-carousel .pcar-nav button{
  width:38px; height:38px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(243,242,236,0.35);
  border-radius: 999px;
  background: rgba(21,25,29,0.45);
  color: var(--paper);
  backdrop-filter: blur(4px);
  transition: background-color .15s ease, border-color .15s ease;
}
.project-carousel .pcar-nav button:hover{ background: var(--orange); border-color: var(--orange); color: #1A1105; }
.project-carousel .pcar-nav button:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }
.project-carousel .pcar-dots{
  position:absolute; z-index:4; bottom: var(--sp-5); left: var(--sp-5);
  display:flex; gap: var(--sp-2); align-items:center;
}
.project-carousel .pcar-dots span{
  width:6px; height:6px; border-radius:50%;
  background: rgba(243,242,236,0.4);
  transition: background-color .2s ease, width .2s ease;
  cursor: pointer;
}
.project-carousel .pcar-dots span.is-active{ background: var(--orange); width:16px; border-radius:3px; }

/* — CTA band — */
.cta-band{
  background: var(--orange);
  color: #1A1105;
  padding-block: var(--sp-8);
}
.cta-band .wrap{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-6); flex-wrap: wrap;
}
.cta-band h2{ font-size: var(--text-2xl); max-width: 18ch; }
.cta-band .btn-primary{ background: var(--ink); color: var(--text-on-ink); }
.cta-band .btn-primary:hover{ background: #000; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background: var(--ink); color: var(--text-on-ink);
  padding-top: var(--sp-8);
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--sp-7);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid #2A3137;
}
.footer-brand img{ height: 56px; margin-bottom: var(--sp-4); }
.footer-brand p{ color: var(--text-on-ink-dim); font-size: var(--text-sm); max-width: 32ch; }
.footer-col h4{
  font-family: var(--f-mono); font-size: var(--text-xs); font-weight: 600;
  color: var(--text-on-ink-dim); margin-bottom: var(--sp-4);
}
.footer-col ul{ display:flex; flex-direction:column; gap: var(--sp-3); }
.footer-col a{ font-size: var(--text-sm); color: var(--text-on-ink); }
.footer-col a:hover{ color: var(--orange-soft); }
.footer-contact li{ display:flex; gap: var(--sp-3); align-items:flex-start; font-size: var(--text-sm); color: var(--text-on-ink-dim); }
.footer-contact .icon{ color: var(--orange); margin-top: 2px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap: var(--sp-4); flex-wrap: wrap;
  padding-block: var(--sp-5);
  font-size: var(--text-xs); color: var(--text-on-ink-dim);
}
.footer-bottom a:hover{ color: var(--text-on-ink); }
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   Utilidades de página interna (servicios, nosotros, etc.)
   ============================================================ */
.service-group{ padding-block: var(--sp-8); border-top: 1px solid rgba(239,128,35,.28); }
.service-group:first-of-type{ border-top: 0; }
.service-group-head{
  display:grid; grid-template-columns: 96px 1fr; gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  align-items: start;
}
.service-group-head .icon{ color: var(--orange); margin-bottom: var(--sp-3); }
.service-group-head h2{ font-size: var(--text-2xl); text-align: left; }
@media (max-width: 760px){
  .service-group-head{ grid-template-columns: 1fr; }
}
.service-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3) var(--sp-7); }
.service-list li{
  display:flex; gap: var(--sp-3); align-items:flex-start;
  padding-block: var(--sp-3);
  border-top: 1px solid rgba(239,128,35,.22);
  font-size: var(--text-sm);
}
.service-list li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:8px; background: var(--orange);
}
@media (max-width: 640px){ .service-list{ grid-template-columns: 1fr; } }

.timeline{ display:flex; flex-direction:column; }
.timeline-item{
  display:grid; grid-template-columns: 110px 1fr; gap: var(--sp-6);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--concrete-2);
}
.timeline-item .year{ font-family: var(--f-mono); color: var(--orange-dim); font-size: var(--text-lg); font-weight:600; }
.timeline-item h3{ font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.timeline-item p{ color: var(--ink-soft); max-width: 56ch; }

.policy-copy h2{ font-size: var(--text-xl); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.policy-copy h2:first-child{ margin-top: 0; }
.policy-copy p{ color: var(--ink-soft); max-width: 72ch; margin-bottom: var(--sp-3); }
.policy-copy strong{ color: var(--ink); }

/* — Contacto — */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); align-items:start; }
@media (max-width: 880px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-info li{ display:flex; gap: var(--sp-4); padding-block: var(--sp-5); border-top: 1px solid var(--concrete-2); }
.contact-info li:first-child{ border-top: 0; }
.contact-info .icon{ color: var(--orange); margin-top: 2px; }
.contact-info h3{ font-size: var(--text-sm); font-family: var(--f-mono); color: var(--steel); margin-bottom: var(--sp-2); font-weight: 500; }
.contact-info p{ font-size: var(--text-base); font-weight: 600; }
.contact-info .copy-btn{
  margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--steel);
  display:inline-flex; gap: var(--sp-1); align-items:center; font-family: var(--f-mono);
}
.contact-info .copy-btn:hover{ color: var(--orange-dim); }

.field{ display:flex; flex-direction:column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field label{ font-size: var(--text-xs); font-family: var(--f-mono); color: var(--steel); }
.field input, .field textarea, .field select{
  font: inherit; font-size: var(--text-base);
  padding: 12px 14px;
  background: var(--paper-raise);
  border: 1.5px solid var(--concrete-2);
  border-radius: var(--radius);
  color: var(--ink);
}
.field input:focus, .field textarea:focus{ border-color: var(--orange); }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }
.form-note{ font-size: var(--text-xs); color: var(--steel); margin-top: var(--sp-3); }
.field-trap{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.field-check-note{ color: var(--steel); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field-check.is-invalid input{ border-color: #C0392B; }
.field-check-error{
  display:none; color:#C0392B; font-size: var(--text-xs); margin-top: calc(var(--sp-2) * -1);
}
.field-check.is-invalid .field-check-error{ display:block; }
.form-success{
  display:none;
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--orange); background: #FDF1E4;
  font-size: var(--text-sm);
}
.form-success.is-visible{ display:block; }

.map-link{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  padding: var(--sp-5); margin-top: var(--sp-6);
  border: 1px solid var(--concrete-2); background: var(--paper-raise);
}
.map-link .icon{ color: var(--orange); }

/* — Tarjeta de mapa estilizado (Contacto) — */
.map-card{
  display:block;
  margin-top: var(--sp-6);
  border: 1px solid var(--concrete-2);
  overflow: clip;
  background: var(--ink);
  transition: border-color .15s ease;
}
.map-card:hover{ border-color: var(--orange); }
.map-card-art{ display:block; width:100%; height:auto; aspect-ratio: 640/300; }
.map-card-pulse{
  fill: rgba(239,128,35,0.35);
  transform-origin: 345px 150px;
  animation: map-pulse 2.6s ease-out infinite;
}
@keyframes map-pulse{
  0%{ transform: scale(1); opacity:.8; }
  100%{ transform: scale(3.2); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .map-card-pulse{ animation: none; opacity:.5; }
}
.map-card-info{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-5);
  background: var(--paper-raise);
}
.map-card-tag{
  display:block; font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--steel); margin-bottom: var(--sp-1);
}
.map-card-address{ display:block; font-weight: 600; font-size: var(--text-base); }
.map-card-info{ position: relative; }
.map-card-cta{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--orange-dim);
  white-space: nowrap;
}
.map-card-cta .icon{ color: var(--orange); transition: transform .15s ease; }
.map-card:hover .map-card-cta .icon{ transform: translateX(3px); }

/* ============================================================
   Botón flotante "volver arriba"
   ============================================================ */
.back-to-top{
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 50;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--ink);
  color: var(--text-on-ink);
  box-shadow: 0 8px 20px rgba(21,25,29,0.28);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .15s ease;
}
.back-to-top .icon{ width: 20px; height: 20px; }
.back-to-top.is-visible{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.back-to-top:hover{ background: var(--orange); }
.back-to-top:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
@media (max-width: 640px){
  .back-to-top{
    right: var(--sp-4);
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    width: 44px; height: 44px;
  }
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: opacity .15s linear, visibility .15s linear; }
}