/* =========================================================================
   MCI · Material Contra Incendios
   Sistema de diseño — editorial / industrial / arquitectónico
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Neutros */
  --ink:        #0B0B0C;
  --graphite:   #17181A;
  --graphite-2: #232427;
  --steel:      #5F6367;
  --mist:       #9AA0A6;
  --line:       #E0E0E2;
  --line-soft:  #ECECEE;
  --line-dark:  rgba(255,255,255,.15);
  --paper:      #FFFFFF;
  --paper-2:    #F1F1F2;
  --white:      #FFFFFF;

  /* Acento de seguridad */
  --red:        #C8102E;
  --red-deep:   #8E0B20;

  /* Tipografía */
  --f-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-text:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Ancho del eje variable: los titulares van estrechos, tipo rotulación técnica */
  --w-disp: 84%;

  /* Métrica */
  --gutter: clamp(20px, 5vw, 88px);
  --maxw: 1560px;
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 40px;
  --s-5: 64px; --s-6: 96px; --s-7: 140px; --s-8: 200px;

  --header-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:1100px; }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-4); }
.bleed{ width:100%; }

section{ position:relative; }
.sect{ padding-block:clamp(38px,3.8vw,62px); }
.sect--tight{ padding-block:clamp(40px,4.5vw,72px); }
.sect--dark{ background:var(--ink); color:var(--paper); }
.sect--dark .lead,.sect--dark p{ color:#B6B9BC; }
.sect--graphite{ background:var(--graphite); color:var(--paper); }
.sect--white{ background:var(--white); }
.sect--paper2{ background:var(--paper-2); }

hr.rule{ border:0; border-top:1px solid var(--line); margin:0; }
.sect--dark hr.rule,.sect--graphite hr.rule{ border-color:var(--line-dark); }

/* ---------- 4. Tipografía ---------- */
.display-xl{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp);
  font-size:clamp(2.6rem,7.6vw,7rem); line-height:.93;
  letter-spacing:-.035em; text-transform:uppercase;
}
.display-l{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp);
  font-size:clamp(1.85rem,3.9vw,3.4rem); line-height:1.02;
  letter-spacing:-.03em; text-transform:uppercase;
}
.display-m{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp);
  font-size:clamp(1.6rem,2.9vw,2.7rem); line-height:1.08;
  letter-spacing:-.022em; text-transform:uppercase;
}
.display-s{
  font-family:var(--f-display); font-weight:600; font-stretch:92%;
  font-size:clamp(1.05rem,1.35vw,1.3rem); line-height:1.25;
  letter-spacing:-.012em;
}
.lead{
  font-family:var(--f-text); font-weight:400;
  font-size:clamp(1.05rem,1.4vw,1.32rem); line-height:1.6;
  color:var(--steel); letter-spacing:-.004em;
}
.lead--sm{ font-size:clamp(1.02rem,1.15vw,1.2rem); }
.body{ color:var(--steel); font-size:1rem; line-height:1.72; max-width:62ch; }
.sect--dark .body,.sect--graphite .body{ color:#A8ACB0; }
.body + .body{ margin-top:1em; }
.label{
  font-family:var(--f-mono); font-weight:400;
  font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--steel);
}
.label--red{ color:var(--red); }
.label--light{ color:var(--mist); }
em.acc{ font-style:normal; color:var(--red); }

/* ---------- 5. Encabezado de sección ---------- */
.sect-head{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-3);
  padding-top:var(--s-3); border-top:1px solid var(--line);
}
.sect--dark .sect-head,.sect--graphite .sect-head{ border-color:var(--line-dark); }
.sect-head__meta{ display:flex; gap:var(--s-3); align-items:baseline; }
.sect-head__num{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; color:var(--red); }
@media (min-width:900px){
  .sect-head{ grid-template-columns:minmax(190px,1.2fr) minmax(0,4fr); gap:var(--s-5); }
}

/* ---------- 6. Botones ---------- */
.btn{
  --btn-fg:var(--ink); --btn-bd:var(--ink);
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 26px; border:1px solid var(--btn-bd); color:var(--btn-fg);
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--white); }
.btn:hover::after{ transform:scaleY(1); }
.btn .arw{ transition:transform .45s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }

.btn--red{ --btn-bd:var(--red); color:var(--white); background:var(--red); }
.btn--red::after{ background:var(--ink); }
.btn--red:hover{ border-color:var(--ink); }

.btn--light{ --btn-fg:var(--paper); --btn-bd:rgba(255,255,255,.4); }
.btn--light::after{ background:var(--paper); }
.btn--light:hover{ color:var(--ink); border-color:var(--paper); }

.btn--ghost{ padding-inline:0; border:0; border-bottom:1px solid var(--line); }
.btn--ghost::after{ display:none; }
.btn--ghost:hover{ color:var(--red); border-color:var(--red); }

.link-u{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  padding-bottom:6px; border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.link-u:hover{ color:var(--red); border-color:var(--red); }
.link-u .arw{ transition:transform .4s var(--ease); }
.link-u:hover .arw{ transform:translateX(5px); }
.sect--dark .link-u,.sect--graphite .link-u{ border-color:var(--line-dark); }

/* ---------- 7. Cabecera ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90; height:var(--header-h);
  display:flex; align-items:center;
  color:var(--paper);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{ background:var(--paper); color:var(--ink); border-bottom-color:var(--line); }
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header{ transition:transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); width:100%; }

.brand{ display:flex; align-items:center; gap:14px; flex:none; }
.brand__mark{
  font-family:var(--f-display); font-weight:700; font-stretch:88%; font-size:1.34rem;
  letter-spacing:-.02em; line-height:1;
}
.brand__mark .dot{ color:var(--red); }
.brand__sep{ width:1px; height:22px; background:currentColor; opacity:.28; }
.brand__txt{
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.13em; text-transform:uppercase;
  line-height:1.4; opacity:.72; max-width:180px; white-space:nowrap;
}

.nav{ display:none; }
@media (min-width:1060px){
  .nav{ display:flex; align-items:center; gap:34px; }
  .nav__item{ position:relative; }
  .nav__link{
    font-family:var(--f-mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
    display:inline-flex; align-items:center; gap:7px; padding:28px 0;
    transition:color .3s var(--ease);
  }
  .nav__link .car{ width:7px; height:7px; opacity:.6; transition:transform .35s var(--ease); }
  .nav__item:hover .nav__link{ color:var(--red); }
  .nav__item:hover .car{ transform:rotate(180deg); }
  .nav__link.is-active{ color:var(--red); }

  .mega{
    position:absolute; top:100%; left:-28px; min-width:600px;
    background:var(--white); border:1px solid var(--line);
    padding:34px 36px 30px; display:grid; grid-template-columns:1fr 1fr; gap:34px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    box-shadow:0 24px 60px -30px rgba(0,0,0,.35);
    color:var(--ink);
  }
  .nav__item:hover .mega,.nav__item:focus-within .mega{ opacity:1; visibility:visible; transform:translateY(0); }
  .mega__col h4{
    font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--red); padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line);
  }
  .mega__col a{
    display:block; padding:6px 0; font-size:.9rem; color:var(--steel);
    transition:color .25s var(--ease), padding-left .25s var(--ease);
  }
  .mega__col a:hover{ color:var(--ink); padding-left:6px; }
}
.header-cta{ display:none; }
@media (min-width:1060px){
  .header-cta{ display:flex; align-items:center; gap:22px; flex:none; }
  .header-tel{
    font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
    display:flex; align-items:center; gap:9px; transition:color .3s var(--ease);
  }
  .header-tel:hover{ color:var(--red); }
  .header-tel b{ font-weight:400; opacity:.5; }
  .header-cta .btn{ padding:12px 20px; }
  .site-header:not(.is-solid) .header-cta .btn{ --btn-fg:var(--paper); --btn-bd:rgba(255,255,255,.42); }
  .site-header:not(.is-solid) .header-cta .btn::after{ background:var(--paper); }
  .site-header:not(.is-solid) .header-cta .btn:hover{ color:var(--ink); }
}

/* Botón menú móvil */
.burger{ display:flex; flex-direction:column; gap:5px; padding:10px; margin-right:-10px; }
@media (min-width:1060px){ .burger{ display:none; } }
.burger span{ display:block; width:24px; height:1.5px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
body.menu-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Menú móvil */
.mobile-nav{
  position:fixed; inset:0; z-index:80; background:var(--ink); color:var(--paper);
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  overflow-y:auto; opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
body.menu-open .mobile-nav{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }
.mobile-nav__group{ border-top:1px solid var(--line-dark); padding:20px 0; }
.mobile-nav__group > a,.mobile-nav__group > .m-title{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp); text-transform:uppercase;
  font-size:1.5rem; letter-spacing:-.02em; display:block;
}
.mobile-nav__sub{ margin-top:14px; display:grid; gap:9px; }
.mobile-nav__sub a{ color:var(--mist); font-size:.94rem; }
.mobile-nav__sub a:hover{ color:var(--paper); }
.mobile-nav__foot{ margin-top:34px; display:grid; gap:14px; }
.mobile-nav__foot a{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; }

/* Barra inferior móvil */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr 1.1fr;
  background:var(--ink); color:var(--paper);
  transform:translateY(100%); transition:transform .5s var(--ease);
}
.callbar.is-in{ transform:translateY(0); }
.callbar a{
  padding:14px 8px; text-align:center;
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.14);
}
.callbar a:last-child{ border-right:0; background:var(--red); }
.callbar a span{ display:block; opacity:.5; font-size:.55rem; margin-bottom:2px; }
@media (min-width:900px){ .callbar{ display:none; } }
body.has-callbar .site-footer{ padding-bottom:70px; }

/* ---------- 8. Hero ---------- */
.hero{
  position:relative; min-height:min(100svh,1040px);
  display:flex; align-items:flex-end;
  color:var(--paper); background:var(--ink); overflow:hidden;
  padding-bottom:clamp(40px,6vw,80px); padding-top:calc(var(--header-h) + 40px);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.14) brightness(.82);
  transform:scale(1.04);
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.18) 34%,rgba(11,11,12,.86) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__grid{ display:grid; gap:var(--s-4); }
@media (min-width:1000px){
  .hero__grid{ grid-template-columns:minmax(0,7.4fr) minmax(0,3.6fr); gap:var(--s-6); align-items:end; }
}
.hero__kicker{ display:flex; align-items:center; gap:16px; margin-bottom:clamp(16px,2.4vh,32px); }
.hero__kicker .bar{ width:44px; height:1px; background:var(--red); }
.hero h1{
  margin-bottom:clamp(16px,2.2vh,30px);
  font-size:clamp(2.05rem, min(5.3vw, 7.4vh), 4.7rem);
}
.hero h1 .l2{ display:block; color:var(--mist); }
.hero__lead{ color:#D2D5D8; max-width:52ch; font-size:clamp(1rem, min(1.5vw,2.1vh), 1.34rem); }
.hero__aside{ border-top:1px solid var(--line-dark); padding-top:22px; }
.hero__aside dl{ display:grid; gap:clamp(10px,1.5vh,16px); margin:0; }
.hero__aside .row{ display:flex; justify-content:space-between; gap:20px; align-items:baseline; }
.hero__aside dt{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); }
.hero__aside dd{ margin:0; font-family:var(--f-display); font-size:1.02rem; font-weight:600; font-stretch:92%; letter-spacing:-.01em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(22px,2.8vh,38px); }
.hero__scroll{
  position:absolute; left:var(--gutter); bottom:18px; z-index:2;
  display:none; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist);
}
@media (min-width:1000px){ .hero__scroll{ display:none; } }

/* Hero interior (páginas) */
.phero{
  position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(70px,10vw,150px));
  padding-bottom:clamp(56px,7vw,110px);
}
.phero__media{ position:absolute; inset:0; z-index:0; }
.phero__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.5) contrast(1.06); }
.phero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,11,12,.72),rgba(11,11,12,.9)); }
.phero__inner{ position:relative; z-index:2; }
.phero h1{ margin:22px 0 var(--s-3); max-width:19ch; }
.phero .lead{ color:#C4C7CA; max-width:56ch; }
.crumbs{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--mist); }
.crumbs a:hover{ color:var(--paper); }
.crumbs .sep{ opacity:.4; }

/* ---------- 9. Figuras ---------- */
figure{ position:relative; }
.fig img{ width:100%; height:100%; object-fit:cover; }
.fig{ overflow:hidden; background:#E7E7E9; }
.fig--tall{ aspect-ratio:3/4; }
.fig--sq{ aspect-ratio:1/1; }
.fig--wide{ aspect-ratio:16/9; }
.fig--ultra{ aspect-ratio:21/9; }
.fig--mono img{ filter:grayscale(1) contrast(1.05); }
figure > figcaption{ position:relative; }
figcaption{
  margin-top:12px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
}
.sect--dark figcaption,.sect--graphite figcaption{ color:var(--mist); }
.fig-zoom img{ transition:transform 1.2s var(--ease), filter .8s var(--ease); }
.fig-zoom:hover img{ filter:grayscale(0) contrast(1.02) saturate(1.05); }
a:hover .fig-zoom img,.fig-zoom:hover img{ transform:scale(1.045); }

/* ---------- 10. Riesgo (bloque editorial) ---------- */
.risk__grid{ display:grid; gap:var(--s-5); align-items:start; }
@media (min-width:900px){
  .risk__grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--s-6); }
  .risk__media{ margin-top:var(--s-6); }
}
.statement{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp);
  text-transform:uppercase;
  font-size:clamp(1.5rem,3.1vw,2.7rem); line-height:1.08; letter-spacing:-.018em;
}
.statement em{ font-style:normal; color:var(--red); }

/* ---------- 11. Cifras ---------- */
.stats{ display:grid; gap:0; border-top:1px solid var(--line); }
.sect--dark .stats{ border-color:var(--line-dark); }
.stat{ padding:26px 0; border-bottom:1px solid var(--line); }
.sect--dark .stat{ border-color:var(--line-dark); }
@media (min-width:760px){
  .stats{ grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
  .sect--dark .stats{ border-bottom-color:var(--line-dark); }
  .stat{ border-bottom:0; border-right:1px solid var(--line); padding:30px 28px 30px 0; }
  .sect--dark .stat{ border-right-color:var(--line-dark); }
  .stat:last-child{ border-right:0; }
  .stat + .stat{ padding-left:28px; }
}
.stat__n{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp);
  font-size:clamp(2.4rem,4.4vw,4rem); line-height:1; letter-spacing:-.04em;
  display:flex; align-items:baseline; gap:4px;
}
.stat__n sup{ font-size:.34em; top:-1.1em; color:var(--red); letter-spacing:0; }
.stat__t{ margin-top:12px; max-width:26ch; }

/* ---------- 12. Áreas / servicios ---------- */
.area{ border-top:1px solid var(--line); }
.sect--dark .area{ border-color:var(--line-dark); }
.area__inner{ display:grid; gap:var(--s-4); padding-block:clamp(40px,5vw,72px); align-items:start; }
@media (min-width:960px){
  .area__inner{ grid-template-columns:minmax(0,.9fr) minmax(0,3.4fr) minmax(0,4.2fr); gap:var(--s-5); }
  .area--rev .area__inner{ grid-template-columns:minmax(0,.9fr) minmax(0,4.2fr) minmax(0,3.4fr); }
  .area--rev .area__num{ grid-column:1; grid-row:1; }
  .area--rev .area__media{ grid-column:2; grid-row:1; }
  .area--rev .area__body{ grid-column:3; grid-row:1; }
}
.area__num{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; color:var(--red); padding-top:8px; }
.area__body h3{ margin-bottom:18px; }
.area__list{ margin-top:26px; display:grid; gap:0; }
.area__list li{
  display:flex; gap:14px; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--line-soft);
  font-size:.92rem; color:var(--steel);
}
.sect--dark .area__list li{ border-color:rgba(255,255,255,.1); color:#A8ACB0; }
.area__list li::before{ content:""; flex:none; width:5px; height:5px; background:var(--red); transform:translateY(-3px); }
.area__cta{ margin-top:30px; }
.area__media .fig{ aspect-ratio:4/3; }
@media (min-width:960px){ .area__media .fig{ aspect-ratio:3/3.4; } }

/* Índice de áreas (home) */
.index-list{ border-top:1px solid var(--line); }
.index-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-3);
  align-items:center; padding:clamp(22px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line); position:relative;
  transition:padding-left .5s var(--ease);
}
.index-row:hover{ padding-left:16px; }
.index-row:hover .index-row__t{ color:var(--red); }
.index-row__t{ transition:color .4s var(--ease); }
.index-row__n{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; color:var(--red); width:34px; }
.index-row__t{ font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp); text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.35rem,2.9vw,2.5rem); line-height:1.05; }
.index-row__d{ display:none; }
@media (min-width:900px){
  .index-row{ grid-template-columns:52px minmax(0,4fr) minmax(0,3.4fr) auto; }
  .index-row__d{ display:block; color:var(--steel); font-size:.92rem; max-width:40ch; }
}
.index-row__arw{ color:var(--steel); transition:transform .5s var(--ease), color .4s; }
.index-row:hover .index-row__arw{ transform:translateX(8px); color:var(--red); }

/* ---------- 13. Proceso ---------- */
.process{ display:grid; gap:0; border-top:1px solid var(--line-dark); }
@media (min-width:820px){ .process{ grid-template-columns:repeat(4,1fr); } }
.process__step{ padding:30px 0; border-bottom:1px solid var(--line-dark); }
@media (min-width:820px){
  .process__step{ border-bottom:0; border-right:1px solid var(--line-dark); padding:36px 30px 46px 0; }
  .process__step + .process__step{ padding-left:30px; }
  .process__step:last-child{ border-right:0; }
}
.process__n{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; color:var(--red); }
.process__step h4{ margin:18px 0 12px; font-family:var(--f-display); font-weight:600; font-stretch:92%; text-transform:uppercase; letter-spacing:-.018em; font-size:1.16rem; }

/* ---------- 14. Trayectoria ---------- */
.tl{ border-top:1px solid var(--line); }
.tl__row{ display:grid; gap:var(--s-2); padding:clamp(16px,1.7vw,22px) 0; border-bottom:1px solid var(--line); }
@media (min-width:820px){ .tl__row{ grid-template-columns:minmax(140px,1fr) minmax(0,2.2fr) minmax(0,3fr); gap:var(--s-5); align-items:baseline; } }
.tl__y{ font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp); text-transform:uppercase; font-size:clamp(1.5rem,2.6vw,2.2rem); letter-spacing:-.035em; line-height:1; }
.tl__y span{ color:var(--red); }
.tl__t{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; letter-spacing:-.012em; }
.tl__d{ color:var(--steel); font-size:.93rem; }

/* ---------- 15. Sedes ---------- */
.locs{ display:grid; gap:var(--s-5); }
@media (min-width:960px){ .locs{ grid-template-columns:minmax(0,4.6fr) minmax(0,5.4fr); gap:var(--s-6); align-items:center; } }
.loc{ border-top:1px solid var(--line-dark); padding-top:24px; }
.loc + .loc{ margin-top:var(--s-5); }
.loc__h{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.loc h3{ font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp); text-transform:uppercase; letter-spacing:-.025em; font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:1; }
.loc__meta{ margin-top:18px; display:grid; gap:9px; font-size:.94rem; color:#A8ACB0; }
.loc__meta a:hover{ color:var(--paper); }
.loc__tel{ font-family:var(--f-mono); font-size:1.02rem; letter-spacing:.02em; color:var(--paper); }
.map{ width:100%; height:auto; max-height:min(46vh,380px); margin-inline-start:auto; }
.map .land{ fill:none; stroke:rgba(255,255,255,.24); stroke-width:.9; }
.map .pt{ fill:var(--red); }
.map .halo{ fill:none; stroke:var(--red); stroke-width:.8; opacity:.5; }
.map .lbl{ fill:var(--paper); font-family:var(--f-mono); font-size:7px; letter-spacing:.12em; text-transform:uppercase; }

/* ---------- 16. Normativa ---------- */
.norms{ border-top:1px solid var(--line); }
.norm{ border-bottom:1px solid var(--line); }
.norm__btn{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-3);
  align-items:center; text-align:left; padding:clamp(22px,2.4vw,30px) 0;
}
.norm__code{ font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp); letter-spacing:-.02em; font-size:clamp(1.15rem,2vw,1.6rem); min-width:96px; text-transform:uppercase; }
.norm__t{ color:var(--steel); font-size:.95rem; }
.norm__ico{ position:relative; width:15px; height:15px; flex:none; }
.norm__ico::before,.norm__ico::after{ content:""; position:absolute; background:var(--red); transition:transform .45s var(--ease); }
.norm__ico::before{ top:7px; left:0; width:15px; height:1.5px; }
.norm__ico::after{ left:7px; top:0; width:1.5px; height:15px; }
.norm[open] .norm__ico::after{ transform:scaleY(0); }
.norm__panel{ padding-bottom:34px; display:grid; gap:var(--s-3); }
@media (min-width:820px){ .norm__panel{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:var(--s-5); padding-left:120px; } }
.norm__docs{ display:grid; gap:0; }
.norm__docs a{ display:flex; justify-content:space-between; gap:16px; align-items:center; padding:11px 0; border-top:1px solid var(--line-soft); font-size:.9rem; color:var(--steel); transition:color .3s; }
.norm__docs a:hover{ color:var(--red); }

/* ---------- 17. Extintores ---------- */
.prod-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:640px){ .prod-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .prod-grid{ grid-template-columns:repeat(6,1fr); } }
.prod{ background:var(--white); padding:20px 16px 18px; text-align:center; transition:background .4s var(--ease); }
.prod:hover{ background:var(--paper); }
.prod img{ width:100%; height:140px; object-fit:contain; margin-bottom:18px; transition:transform .6s var(--ease); }
.prod:hover img{ transform:scale(1.05); }
.prod__n{ font-family:var(--f-display); font-weight:600; font-size:.94rem; letter-spacing:-.012em; }
.prod__m{ margin-top:6px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--steel); }

.spec{ display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:760px){ .spec{ grid-template-columns:repeat(2,1fr); column-gap:var(--s-6); } }
.spec__row{ display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:.93rem; }
.spec__row dt{ color:var(--steel); }
.spec__row dd{ margin:0; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em; text-align:right; }

/* ---------- 18. Banda CTA ---------- */
.cta-band{ background:var(--red); color:#fff; }
.cta-band .label--red{ color:rgba(255,255,255,.72); }
.cta-band .body{ color:rgba(255,255,255,.88); }
.cta-band .btn--red{ background:#fff; color:var(--ink); border-color:#fff; }
.cta-band .btn--red::after{ background:var(--ink); }
.cta-band .btn--red:hover{ color:#fff; border-color:var(--ink); }
.cta-band .btn--light{ --btn-fg:#fff; --btn-bd:rgba(255,255,255,.55); }
.cta-band .btn--light::after{ background:#fff; }
.cta-band .btn--light:hover{ color:var(--red); border-color:#fff; }
.cta-band__inner{ display:grid; gap:var(--s-4); padding-block:clamp(48px,5.5vw,90px); }
@media (min-width:900px){ .cta-band__inner{ grid-template-columns:minmax(0,6fr) minmax(0,4fr); gap:var(--s-6); align-items:end; } }
.cta-band h2{ max-width:16ch; }
.cta-band .actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- 19. Formulario ---------- */
.form{ display:grid; gap:22px; }
@media (min-width:700px){ .form__two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } }
.field{ position:relative; }
.field label{ display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:9px; }
.field input,.field textarea,.field select{
  width:100%; padding:13px 0; border:0; border-bottom:1px solid var(--line);
  background:transparent; font-family:var(--f-text); font-size:1rem; color:var(--ink);
  border-radius:0; transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-bottom-color:var(--red); }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:.82rem; color:var(--steel); line-height:1.55; }
.check input{ margin-top:3px; accent-color:var(--red); flex:none; width:15px; height:15px; }
.check a{ text-decoration:underline; text-underline-offset:3px; }
.form-note{ font-size:.74rem; color:var(--mist); line-height:1.6; }

/* ---------- 20. Contacto / tarjetas sede ---------- */
.ccard{ border-top:1px solid var(--line); padding-top:26px; }
.ccard h3{ font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp); text-transform:uppercase; letter-spacing:-.028em; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1; }
.ccard__rows{ margin-top:22px; display:grid; gap:0; }
.ccard__row{ display:grid; grid-template-columns:96px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:.94rem; }
.ccard__row dt{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); padding-top:4px; }
.ccard__row dd{ margin:0; }
.ccard__row a:hover{ color:var(--red); }

/* ---------- 21. Certificados ---------- */
.certs{ display:grid; gap:0; border-top:1px solid var(--line-dark); }
@media (min-width:700px){ .certs{ grid-template-columns:1fr 1fr; column-gap:var(--s-6); } }
.cert{ display:flex; gap:16px; align-items:baseline; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.93rem; color:#A8ACB0; }
.cert__c{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.11em; color:var(--red); flex:none; min-width:74px; }

/* ---------- 22. Pie ---------- */
.site-footer{ background:var(--ink); color:var(--paper); padding-top:clamp(46px,5vw,76px); }
.footer-top{ display:grid; gap:var(--s-5); padding-bottom:var(--s-5); }
@media (min-width:900px){ .footer-top{ grid-template-columns:minmax(0,3.4fr) minmax(0,2fr) minmax(0,2fr) minmax(0,2.6fr); gap:var(--s-5); } }
.footer-brand .brand__mark{ font-size:2.4rem; }
.footer-brand p{ margin-top:18px; color:var(--mist); font-size:.9rem; max-width:34ch; line-height:1.65; }
.fcol h4{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); margin-bottom:18px; }
.fcol a{ display:block; padding:5px 0; font-size:.9rem; color:#C4C7CA; transition:color .3s, padding-left .3s var(--ease); }
.fcol a:hover{ color:var(--paper); padding-left:5px; }
.fcol .tel{ font-family:var(--f-mono); font-size:1rem; }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:16px 30px; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line-dark); padding-block:26px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mist);
}
.footer-bottom nav{ display:flex; flex-wrap:wrap; gap:22px; }
.footer-bottom a:hover{ color:var(--paper); }

/* ---------- 23. Reveals ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s; } .rv-d2{ transition-delay:.18s; } .rv-d3{ transition-delay:.27s; }
.rv-img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.25s var(--ease); }
.rv-img.in{ clip-path:inset(0 0 0 0); }
.rv-line{ transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease); }
.rv-line.in{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .rv,.rv-img,.rv-line{ opacity:1; transform:none; clip-path:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- 24. Utilidades ---------- */
.mt-1{ margin-top:var(--s-1); } .mt-2{ margin-top:var(--s-2); } .mt-3{ margin-top:var(--s-3); }
.mt-4{ margin-top:var(--s-4); } .mt-5{ margin-top:clamp(20px,2.1vw,32px); } .mt-6{ margin-top:clamp(26px,2.8vw,42px); }
.mb-3{ margin-bottom:var(--s-3); } .mb-4{ margin-bottom:var(--s-4); } .mb-5{ margin-bottom:var(--s-5); }
.maxw-sm{ max-width:44ch; } .maxw-md{ max-width:58ch; } .maxw-lg{ max-width:72ch; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; z-index:200; padding:12px 20px; background:var(--red); color:#fff; font-family:var(--f-mono); font-size:.7rem; }
.skip:focus{ left:var(--gutter); top:12px; }

/* ---------- 25. details/summary ---------- */
summary{ list-style:none; cursor:pointer; }
summary::-webkit-details-marker{ display:none; }
summary::marker{ content:""; }
.norm summary:hover .norm__code{ color:var(--red); }
.norm__code{ transition:color .3s var(--ease); }
.norm__docs a .label{ white-space:nowrap; }
.norm__docs a .arw{ margin-left:6px; }

/* Móvil pequeño: la marca se reduce a la sigla */
@media (max-width:520px){
  .brand__sep,.brand__txt{ display:none; }
  .brand__mark{ font-size:1.24rem; }
}

/* =========================================================================
   26. Rediseño de la home bajo el hero
   ========================================================================= */

:root{
  /* margen izquierdo alineado al contenedor aunque el bloque sea a sangre */
  --pad-x: max(var(--gutter), calc(50vw - (var(--maxw) / 2) + var(--gutter)));
}

/* Imagen a sangre de borde a borde */
.bleed-x{ width:100vw; margin-left:calc(50% - 50vw); height:clamp(220px,30vh,340px); overflow:hidden; }

/* --- Encabezado de sección: regla de ancho completo + titular grande --- */
.shead{
  position:relative;
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3);
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.shead::after{ content:""; position:absolute; left:0; bottom:-1px; height:2px; width:70px; background:var(--red); }
.shead__meta::before{ content:""; display:inline-block; width:26px; height:2px; background:var(--red); margin-right:14px; transform:translateY(-3px); }
.sect--dark .shead,.sect--graphite .shead{ border-color:var(--line-dark); }
.shead__meta{ display:flex; align-items:baseline; gap:18px; }
.shead__n{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; color:var(--red); }
.shead__l{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.17em;
           text-transform:uppercase; color:var(--steel); }
.sect--dark .shead__l,.sect--graphite .shead__l{ color:var(--mist); }
.shead__r{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.13em;
           text-transform:uppercase; color:var(--mist); text-align:right; display:none; }
@media (min-width:760px){ .shead__r{ display:block; } }
.stitle{ margin-top:clamp(14px,1.5vw,24px); max-width:22ch; }
.stitle--wide{ max-width:none; }
.sintro{ margin-top:clamp(14px,1.5vw,22px); max-width:58ch; }

/* --- Manifiesto --- */
.manifesto{ background:var(--paper); padding-block:clamp(50px,6vw,96px); }
.manifesto__grid{ display:grid; gap:var(--s-5); }
@media (min-width:900px){
  .manifesto__grid{ grid-template-columns:minmax(0,7fr) minmax(0,3fr); gap:var(--s-6); align-items:end; }
}
.manifesto .bar{ display:block; width:56px; height:2px; background:var(--red); margin-bottom:clamp(28px,3.4vw,46px); }
.manifesto__stmt{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp);
  text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.85rem); line-height:1.06; letter-spacing:-.02em;
  max-width:24ch;
}
.manifesto__stmt em{ font-style:normal; color:var(--red); }
.manifesto__aside{ border-top:1px solid var(--line); padding-top:20px; }
.manifesto__aside .body{ max-width:34ch; }

/* --- Banda de cifras --- */
.figs{ background:transparent; }
.figs__grid{ display:grid; border-top:1px solid var(--line); }
.fig-item{ padding:26px 0; border-bottom:1px solid var(--line); }
@media (min-width:720px){
  .figs__grid{ grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
  .fig-item{ border-bottom:0; border-right:1px solid var(--line); padding:22px 26px 22px 0; }
  .fig-item + .fig-item{ padding-left:30px; }
  .fig-item:last-child{ border-right:0; }
}
.fig-item__n{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp);
  font-size:clamp(2.8rem,5.6vw,5rem); line-height:.9; letter-spacing:-.045em;
  display:flex; align-items:baseline; gap:3px;
}
.fig-item__n sup{ font-size:.3em; top:-1.4em; color:var(--red); letter-spacing:0; }
.fig-item__t{ margin-top:14px; border-top:2px solid var(--red); padding-top:12px; max-width:24ch; font-size:.9rem; color:var(--steel); max-width:24ch; line-height:1.6; }

/* --- Texto a dos columnas (editorial) --- */
.cols2{ column-gap:var(--s-6); }
@media (min-width:820px){ .cols2{ column-count:2; } }
.cols2 p{ break-inside:avoid; color:var(--steel); line-height:1.72; }
.cols2 p + p{ margin-top:1.05em; }

/* --- Pie de foto en el margen --- */
.capline{
  display:flex; gap:16px; align-items:baseline; margin-top:16px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
}
.capline::before{ content:""; flex:none; width:34px; height:1px; background:var(--red); transform:translateY(-4px); }
.sect--dark .capline,.sect--graphite .capline{ color:var(--mist); }

/* --- Método: pasos con número fantasma --- */
.steps{ display:grid; gap:0; }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ position:relative; padding:34px 0 30px; border-top:1px solid var(--line-dark); }
@media (min-width:860px){
  .step{ padding:38px 26px 40px 0; border-right:1px solid var(--line-dark); }
  .step + .step{ padding-left:26px; }
  .step:last-child{ border-right:0; }
}

.step h4{ margin:0 0 12px; font-family:var(--f-display); font-weight:600; font-stretch:92%;
          text-transform:uppercase; letter-spacing:-.018em; font-size:1.1rem; }
.step p{ color:#A0A4A8; font-size:.92rem; line-height:1.65; }
.step::after{
  content:""; position:absolute; left:0; top:-1px; width:0; height:2px; background:var(--red);
  transition:width 1.1s var(--ease);
}
.steps.in .step::after{ width:100%; }
.steps.in .step:nth-child(2)::after{ transition-delay:.14s; }
.steps.in .step:nth-child(3)::after{ transition-delay:.28s; }
.steps.in .step:nth-child(4)::after{ transition-delay:.42s; }

/* --- Áreas con imagen a sangre --- */
.zone{ border-top:1px solid var(--line); }
.zone__inner{
  display:grid; gap:var(--s-4);
  padding-block:clamp(34px,3.8vw,62px);
  padding-left:var(--pad-x); padding-right:var(--gutter);
}
@media (min-width:960px){
  .zone__inner{ grid-template-columns:minmax(0,4.3fr) minmax(0,5.7fr);
                gap:clamp(32px,3.6vw,64px); align-items:center; padding-right:0; }
  .zone--rev .zone__inner{ padding-left:0; padding-right:var(--pad-x);
                           grid-template-columns:minmax(0,5.7fr) minmax(0,4.3fr); }
  .zone--rev .zone__body{ grid-column:2; grid-row:1; }
  .zone--rev .zone__media{ grid-column:1; grid-row:1; }
}
.zone__n{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; color:var(--red);
          display:flex; align-items:center; gap:12px; }
.zone__n::before{ content:""; width:26px; height:2px; background:var(--red); }
.zone__body h3{ margin:18px 0 16px; }
.zone__list{ margin-top:26px; border-top:1px solid var(--line-soft); }
.zone__list li{
  display:flex; gap:14px; align-items:baseline; padding:10px 0;
  border-bottom:1px solid var(--line-soft); font-size:.92rem; color:var(--steel);
}
.zone__list li::before{ content:""; flex:none; width:5px; height:5px; background:var(--red); transform:translateY(-3px); }
.zone__media .fig{ aspect-ratio:4/3; }
@media (min-width:960px){ .zone__media .fig{ aspect-ratio:1.22/1; } }

/* --- Normativa: banda tipográfica --- */
.codes{ border-top:1px solid var(--line); }
.code-row{
  display:grid; gap:var(--s-2); align-items:baseline;
  padding:clamp(18px,2vw,26px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease);
}
.code-row:hover{ padding-left:14px; }
.code-row:hover .code-row__c{ color:var(--red); }
.code-row__c{ transition:color .4s var(--ease); }
@media (min-width:860px){
  .code-row{ grid-template-columns:minmax(0,2.5fr) minmax(0,7.5fr); gap:var(--s-5); }
}
.code-row__c{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp); text-transform:uppercase;
  font-size:clamp(2rem,4.4vw,4rem); line-height:.95; letter-spacing:-.04em;
}
.code-row__d{ color:var(--steel); font-size:.95rem; line-height:1.7; max-width:56ch; }
.code-row__d b{ display:block; color:var(--ink); font-weight:600; font-size:.86rem;
                font-family:var(--f-mono); letter-spacing:.08em; margin-bottom:8px; }

/* --- Trayectoria con año grande --- */
.tl--big .tl__y{ font-size:clamp(1.9rem,3.6vw,3.2rem); letter-spacing:-.045em; }
@media (min-width:820px){
  .tl--big .tl__row{ grid-template-columns:minmax(190px,1.5fr) minmax(0,2fr) minmax(0,3.2fr); }
}

/* --- Certificados en claro --- */
.certs--light{ border-top:1px solid var(--line); }
.certs--light .cert{ border-bottom:1px solid var(--line-soft); color:var(--steel); }

/* --- Extintores: ficha de clases de fuego --- */
.classes{ border-top:1px solid var(--line); }
.class-row{ display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:baseline;
            padding:13px 0; border-bottom:1px solid var(--line-soft); }
.class-row__k{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; color:var(--red); }
.class-row__t{ font-size:.92rem; color:var(--steel); }
.class-row__t b{ color:var(--ink); font-weight:600; }

/* Imagen a sangre */
.bleed-img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }

/* =========================================================================
   27. Mosaico de instalaciones + miniaturas del método
   ========================================================================= */
.gal{ display:grid; gap:3px; grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .gal{ grid-template-columns:repeat(4,1fr); } }
.gal figure{ position:relative; aspect-ratio:3/2; overflow:hidden; background:#E7E7E9; margin:0; }
.gal img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transition:transform 1s var(--ease), filter .8s var(--ease);
}
.gal figure:hover img{ transform:scale(1.05); filter:grayscale(0) contrast(1.02) saturate(1.05); }
.gal figcaption{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:26px 14px 12px;
  color:#fff; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase;
  background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.78));
}
.gal figcaption::before{
  content:""; display:block; width:20px; height:2px; background:var(--red); margin-bottom:8px;
}

/* Miniatura en cada paso del método */
.step__img{ display:block; aspect-ratio:16/10; overflow:hidden; background:#1c1d20; margin-bottom:20px; }
.step__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.9);
                transition:transform 1s var(--ease), filter .8s var(--ease); }
.step:hover .step__img img{ transform:scale(1.05); filter:grayscale(0) contrast(1.02); }
@media (min-width:860px){ .step{ padding-top:26px; } }

/* Banda de dos fotos en la trayectoria */
.duo{ display:grid; gap:3px; grid-template-columns:1fr; }
@media (min-width:700px){ .duo{ grid-template-columns:1.4fr 1fr; height:clamp(280px,32vw,440px); } }
.duo figure{ position:relative; overflow:hidden; background:#E7E7E9; aspect-ratio:16/10; margin:0; }
@media (min-width:700px){ .duo figure{ aspect-ratio:auto; height:100%; } }
.duo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05);
          transition:transform 1s var(--ease), filter .8s var(--ease); }
.duo figure:hover img{ transform:scale(1.04); filter:grayscale(0) contrast(1.02); }
.duo figcaption{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:30px 18px 14px; color:#fff;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.8));
}
.duo figcaption::before{ content:""; display:block; width:22px; height:2px; background:var(--red); margin-bottom:8px; }

/* Etiqueta roja para destacar un dato dentro de una sección */
.tag-red{
  display:inline-flex; align-items:center; gap:10px; padding:7px 13px;
  background:var(--red); color:#fff;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
}

/* Titular + entradilla en dos columnas: ocupa el ancho, sin hueco muerto */
.sblock{ display:grid; gap:16px; margin-top:clamp(14px,1.5vw,24px); }
@media (min-width:900px){
  .sblock{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
           gap:clamp(36px,4.4vw,72px); align-items:end; }
}
.sblock h2{ max-width:none; }
.sblock + .syscards,.sblock + .sectors{ margin-top:clamp(20px,2.2vw,32px)!important; }
.sblock .lead{ max-width:52ch; padding-bottom:6px; }

/* =========================================================================
   28. Capa comercial: necesidades, confianza, sectores, clientes, formulario
   ========================================================================= */

/* Claim de marca bajo el H1 */
.hero__claim{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp);
  text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(.82rem,1.05vw,1.02rem); line-height:1.3;
  color:var(--paper); margin:0 0 clamp(14px,1.8vh,22px);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.hero__claim span{ color:var(--red); }
.hero__claim::before{ content:""; width:22px; height:2px; background:var(--red); flex:none; }
.hero__tert{ margin-top:16px; }

/* Bloques de necesidad bajo el hero */
.needs{ background:var(--white); border-bottom:1px solid var(--line); }
.needs__grid{ display:grid; }
@media (min-width:820px){ .needs__grid{ grid-template-columns:repeat(4,1fr); } }
.need{
  display:block; padding:26px 24px 24px 0; border-top:1px solid var(--line);
  position:relative; transition:padding-left .45s var(--ease);
}
@media (min-width:820px){
  .need{ border-top:0; border-right:1px solid var(--line); padding:30px 26px 30px 0; }
  .need + .need{ padding-left:26px; }
  .need:last-child{ border-right:0; }
}
.need::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--red);
  transition:width .5s var(--ease);
}
@media (min-width:820px){ .need::before{ top:-1px; } }
.need:hover::before{ width:100%; }
.need__k{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--red); }
.need__t{
  display:block; margin:14px 0 12px; font-family:var(--f-display); font-weight:600; font-stretch:92%;
  font-size:1.06rem; line-height:1.25; letter-spacing:-.012em; max-width:18ch;
}
.need__c{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--steel); transition:color .35s var(--ease);
}
.need:hover .need__c{ color:var(--red); }
.need:hover .need__c .arw{ transform:translateX(5px); }
.need__c .arw{ transition:transform .4s var(--ease); }

/* Franja de acreditaciones */
.trust{ background:var(--ink); color:var(--paper); }
.trust__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px;
  padding-block:18px;
}
.trust__lead{
  font-family:var(--f-display); font-weight:600; font-stretch:92%; text-transform:uppercase;
  font-size:.86rem; letter-spacing:-.005em; display:flex; align-items:center; gap:12px;
}
.trust__lead::before{ content:""; width:9px; height:9px; background:var(--red); }
.trust__list{ display:flex; flex-wrap:wrap; gap:10px 20px; }
.trust__list span{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mist);
}
.trust__list span b{ color:var(--paper); font-weight:400; }

/* Sectores */
.sectors{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (min-width:640px){ .sectors{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .sectors{ grid-template-columns:repeat(4,1fr); } }
.sector{
  background:var(--white); padding:22px 20px 22px; display:block; position:relative;
  transition:background .4s var(--ease);
}
.sector:hover{ background:var(--paper-2); }
.sector h3{
  margin:0 0 10px; position:relative; padding-top:16px; font-family:var(--f-display); font-weight:600; font-stretch:92%;
  font-size:1.08rem; line-height:1.22; letter-spacing:-.012em;
}
.sector h3::before{ content:""; position:absolute; top:0; left:0; width:22px; height:2px; background:var(--red); }
.sector p{ color:var(--steel); font-size:.88rem; line-height:1.6; }
.sector__arw{ margin-top:16px; display:block; color:var(--line); transition:color .4s, transform .4s var(--ease); }
.sector:hover .sector__arw{ color:var(--red); transform:translateX(6px); }

/* Clientes */
.clients__strip{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:560px){ .clients__strip{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .clients__strip{ grid-template-columns:repeat(6,1fr); } }
.client{
  background:var(--white); aspect-ratio:2/1; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
  color:#B9BABC; text-align:center; padding:10px;
}

/* Preguntas frecuentes en la home */
.qlist{ display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:820px){ .qlist{ grid-template-columns:repeat(2,1fr); column-gap:var(--s-5); } }
.qlist a{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
  font-size:.95rem; color:var(--graphite); transition:color .35s var(--ease), padding-left .35s var(--ease);
}
.qlist a:hover{ color:var(--red); padding-left:8px; }
.qlist .arw{ flex:none; color:var(--line); transition:color .35s; }
.qlist a:hover .arw{ color:var(--red); }

/* Formulario cualificado */
.lead-form{ background:var(--paper-2); }
.lead-form__grid{ display:grid; gap:var(--s-5); }
@media (min-width:960px){
  .lead-form__grid{ grid-template-columns:minmax(0,6fr) minmax(0,4fr); gap:clamp(40px,5vw,86px); }
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:10px 15px; border:1px solid var(--line); background:var(--white);
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--steel); cursor:pointer;
  transition:border-color .3s var(--ease), color .3s, background .3s;
}
.chip:hover span{ border-color:var(--ink); color:var(--ink); }
.chip input:checked + span{ background:var(--red); border-color:var(--red); color:#fff; }
.chip input:focus-visible + span{ outline:2px solid var(--red); outline-offset:2px; }
.lead-form .field input,.lead-form .field select,.lead-form .field textarea{ background:transparent; }
.aside-card{ border-top:2px solid var(--red); padding-top:22px; }
.aside-card + .aside-card{ margin-top:var(--s-4); }
.aside-card h3{
  font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp); text-transform:uppercase;
  font-size:clamp(1.3rem,2vw,1.8rem); line-height:1; letter-spacing:-.025em;
}
.aside-card__tel{ display:block; margin-top:14px; font-family:var(--f-mono); font-size:1.15rem; letter-spacing:.02em; }
.aside-card__tel:hover{ color:var(--red); }
.aside-card p{ margin-top:10px; color:var(--steel); font-size:.9rem; line-height:1.6; }

/* Tira roja de contacto directo */
.redstrip{ background:var(--red); color:#fff; }
.redstrip__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 30px;
  padding-block:26px;
}
.redstrip__t{
  font-family:var(--f-display); font-weight:600; font-stretch:92%; text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.25rem); letter-spacing:-.008em;
}
.redstrip__tels{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; }
.redstrip__tels a{
  font-family:var(--f-mono); font-size:.95rem; letter-spacing:.03em;
  display:flex; align-items:center; gap:9px; padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.4); transition:border-color .3s;
}
.redstrip__tels a:hover{ border-bottom-color:#fff; }
.redstrip__tels a b{ font-weight:400; opacity:.65; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; }

/* Listas técnicas sobre fondo oscuro */
.sect--graphite .zone__list,.sect--dark .zone__list{ border-color:rgba(255,255,255,.14); }
.sect--graphite .zone__list li,.sect--dark .zone__list li{ border-color:rgba(255,255,255,.1); color:#A8ACB0; }
@media (min-width:820px){ .zone__list--2{ columns:2; column-gap:var(--s-5); } .zone__list--2 li{ break-inside:avoid; } }


/* =========================================================================
   29. Sistemas en tarjetas — sustituye al índice + los cuatro bloques largos
   ========================================================================= */
.syscards{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (min-width:760px){ .syscards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1240px){ .syscards{ grid-template-columns:repeat(4,1fr); } }
.syscard{ background:var(--white); display:flex; flex-direction:column; transition:background .4s var(--ease); }
.syscard:hover{ background:var(--paper-2); }
.syscard__fig{ aspect-ratio:16/10; overflow:hidden; background:#E7E7E9; }
.syscard__fig img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05);
  transition:transform 1s var(--ease), filter .8s var(--ease);
}
.syscard:hover .syscard__fig img{ transform:scale(1.05); filter:grayscale(0) contrast(1.02); }
.syscard__body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.syscard h3::before{ content:""; position:absolute; top:0; left:0; width:22px; height:2px; background:var(--red); }
.syscard h3{
  margin:0 0 10px; position:relative; padding-top:16px; font-family:var(--f-display); font-weight:600; font-stretch:var(--w-disp);
  text-transform:uppercase; font-size:1.22rem; line-height:1.05; letter-spacing:-.02em;
}
.syscard > .syscard__body > p{ color:var(--steel); font-size:.86rem; line-height:1.55; }
.syscard ul{ margin:14px 0 18px; border-top:1px solid var(--line-soft); }
.syscard li{
  display:flex; gap:10px; align-items:baseline; padding:7px 0;
  border-bottom:1px solid var(--line-soft); font-size:.8rem; color:var(--steel); line-height:1.4;
}
.syscard li::before{ content:""; flex:none; width:4px; height:4px; background:var(--red); transform:translateY(-2px); }
.syscard .link-u{ margin-top:auto; align-self:flex-start; font-size:.62rem; }