/* ============================================================
   Makian Técnicas — hoja compartida
   Una sola sans neutra en todo el sitio.
   Monoespaciada exclusivamente en .spec (tablas de especificación).
   ============================================================ */

:root{
  /* 60 — fondo */
  --bg:#F6F3EE;
  --surface:#FFFFFF;
  --line:#E4DED4;

  /* 30 — tinta */
  --ink:#1E1C1A;        /* 15,4:1 sobre el fondo */
  --ink-body:#57524B;   /*  7,0:1 */
  /* El encargo especifica #8C867C, pero sobre --bg da 3,26:1 y no llega al AA que
     pide la propia lista de aceptación. Se oscurece lo mínimo para pasar (4,85:1)
     manteniendo el mismo tono. Si se quiere el valor exacto del encargo, solo puede
     usarse en elementos decorativos, nunca en texto. */
  --ink-muted:#6F6A61;
  --ink-muted-brief:#8C867C;

  /* 10 — acento */
  --accent:#2E5A4B;
  --accent-dark:#24483C;
  --accent-tint:#E8EFEA;

  /* Colores de señal. Solo existen dentro de #umbral («El umbral es tuyo»),
     donde sí van como relleno porque ahí el color es el contenido. En ningún
     otro sitio de la web aparecen, ni como relleno ni como borde. */
  --sig-ok:#7FA86A;
  --sig-warn:#D9A441;
  --sig-reject:#C4674A;

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo",Consolas,"DejaVu Sans Mono",monospace;

  --gut:clamp(16px,3.4vw,56px);
  --maxw:1200px;      /* contenido */
  --lectura:680px;    /* prosa de argumento */

  /* Espaciado con contraste (sección 11 del encargo): el hueco entre
     secciones es casi cuatro veces el hueco de dentro, para que se note
     dónde acaba un bloque y empieza otro. */
  --aire-bloque:60px;   /* x2 entre secciones = 120px */
  --aire-dentro:32px;
  --aire-ficha:28px;    /* x2 = 56px en fichas de producto */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-body);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;   /* ni un correo largo desborda a 360px */
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
/* ancho de lectura: prosa de argumento, nunca centrada a pelo */
.wrap-lect{max-width:var(--lectura); margin:0; padding:0 var(--gut)}

/* ---------- tipografía ---------- */
h1,h2,h3{margin:0; color:var(--ink); font-weight:500; line-height:1.15; letter-spacing:-.005em}
h1{font-size:clamp(30px,4vw,50px); line-height:1.1}
h2{font-size:clamp(24px,2.6vw,36px)}
h3{font-size:19px; line-height:1.3; letter-spacing:0}
.lede{font-size:clamp(16px,1.1vw,18px); line-height:1.6; max-width:62ch}
.lede + .lede{margin-top:14px}
.tiny{font-size:13.5px; line-height:1.6; color:var(--ink-muted); margin-top:14px}
.tiny a{color:var(--accent)}
strong{color:var(--ink); font-weight:600}

.kicker{display:block; font-size:14.5px; color:var(--ink-muted); margin-bottom:12px}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.skip{position:absolute; left:-9999px; top:0; z-index:80; background:var(--accent); color:#fff; padding:10px 16px; font-size:15px}
.skip:focus{left:var(--gut)}

/* ---------- acciones ---------- */
.btn{
  display:inline-block; font-size:15.5px; text-decoration:none; padding:13px 22px;
  background:var(--accent); color:#FFFFFF; border:1px solid var(--accent);
  transition:background .15s; cursor:pointer; font-family:inherit;
}
.btn:hover{background:var(--accent-dark); border-color:var(--accent-dark)}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--line)}
.btn.ghost:hover{background:var(--accent-tint); border-color:var(--accent)}
.more{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--accent); font-size:15.5px; border-bottom:1px solid var(--line); padding-bottom:2px;
}
.more:hover{border-bottom-color:var(--accent)}
.more::after{content:"→"}

.sec-foot{
  margin-top:clamp(26px,3vw,40px); padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between;
}
.sec-foot p{font-size:15px; max-width:60ch}
.mt{margin-top:26px}

/* ============================================================
   CABECERA
   ============================================================ */
.head{background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.head-in{display:flex; align-items:center; gap:26px; min-height:76px}
.brand{display:flex; align-items:center; text-decoration:none; margin-right:auto}
.brand img{width:168px; height:auto}
.mainnav{display:flex; gap:26px}
.mainnav a{font-size:15.5px; text-decoration:none; color:var(--ink-body); padding:8px 0; border-bottom:2px solid transparent}
.mainnav a:hover{color:var(--ink)}
.mainnav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
.navtoggle{display:none; background:transparent; border:1px solid var(--line); color:var(--ink); font:inherit; font-size:15px; padding:9px 14px; cursor:pointer}

@media (max-width:1120px){
  .head-in{gap:18px}
  .mainnav{gap:18px}
  .mainnav a{font-size:14.5px}
  .brand img{width:148px}
}
@media (max-width:940px){
  .navtoggle{display:block; order:3}
  .head-in{flex-wrap:wrap; min-height:0; padding:12px 0; gap:12px}
  .head .btn{order:2; padding:11px 15px; font-size:14px}
  .mainnav{
    order:4; flex-basis:100%; flex-direction:column; gap:0;
    border-top:1px solid var(--line); padding:4px 0 10px; display:none;
  }
  .mainnav.open{display:flex}
  .mainnav a{padding:13px 0; border-bottom:1px solid var(--line)}
  .mainnav a[aria-current="page"]{border-bottom-color:var(--line)}
}
@media (max-width:420px){
  .brand img{width:126px}
  .head .btn{font-size:13px; padding:10px 12px}
}

/* ============================================================
   BLOQUES DE PÁGINA
   ============================================================ */
.page-head{padding:clamp(36px,5vw,68px) 0 clamp(28px,3.6vw,48px); border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(28px,3.2vw,44px)}
.page-head .lede{margin-top:18px}
.crumb{font-size:14px; color:var(--ink-muted); margin-bottom:18px}
.crumb a{text-decoration:none; color:var(--ink-muted)}
.crumb a:hover{color:var(--accent)}

section{padding:var(--aire-bloque) 0; border-bottom:1px solid var(--line)}
section.alt{background:var(--surface)}
.sec-head{max-width:72ch; margin-bottom:var(--aire-dentro)}
.sec-head .lede{margin-top:14px}

/* ---------- tres anchos, y nunca dos seguidos iguales ----------
   data-w lo pone el generador y build/verificar.js comprueba que no
   haya dos secciones consecutivas con el mismo valor. */
section[data-w="lect"] > .wrap > *{max-width:var(--lectura); margin-inline:auto}
section[data-w="lect"] > .wrap > .arg{max-width:none}
section[data-w="full"]{padding-left:0; padding-right:0}
section[data-w="full"] > .cinta-bleed{max-width:none; padding:0}

/* asimetría en las secciones de argumento: titular pegado a la izquierda
   mientras el contenido pasa por delante */
.arg{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 var(--gut)}
.arg-h{grid-column:1 / span 3; position:sticky; top:100px; align-self:start}
.arg-h .sec-head{margin-bottom:0}
.arg-b{grid-column:4 / span 9; max-width:var(--lectura)}
/* con ancla el bloque ocupa las nueve columnas; solo la prosa se queda
   en ancho de lectura, para que la rejilla no se comprima a la mitad */
.arg-b.ancla{max-width:none}
.arg-b.ancla > .lede{max-width:var(--lectura)}
/* la frase que antes era titular: sigue siendo la idea del bloque, pero
   dentro del cuerpo, donde caben ocho palabras sin partirse en seis líneas */
.destacado{font-size:clamp(19px,1.7vw,23px); color:var(--ink); line-height:1.35; margin-bottom:22px}
.arg-b > * + *{margin-top:var(--aire-dentro)}
@media (max-width:900px){
  .arg{grid-template-columns:1fr; gap:var(--aire-dentro) 0}
  .arg-h{grid-column:1; position:static}
  .arg-b{grid-column:1; max-width:none}
}

.cols-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,48px); align-items:start}
@media (max-width:760px){ .cols-2{grid-template-columns:1fr} }

/* ---------- fotografía ---------- */
.shot{margin:0}
.shot img{width:100%; background:var(--surface)}
.shot figcaption{margin-top:10px; font-size:13.5px; color:var(--ink-muted)}

/* ---------- marcador de contenido pendiente ---------- */
.pend{
  background:var(--accent-tint); color:var(--accent);
  border:1px solid #CFE0D6; padding:22px 24px;
}
.pend-t{font-size:13px; letter-spacing:.02em}
.pend-q{font-size:17px; margin-top:8px; font-weight:600}
.pend-d{font-size:14.5px; line-height:1.6; margin-top:10px; max-width:58ch}
.pend-inline{color:var(--accent)}
.foot-pend{font-size:14px; color:var(--ink-muted); margin-top:10px; max-width:34ch}

/* ---------- home: la cinta es el hero ----------
   40 % de texto y 60 % de cinta. Entra completo en 900px de alto:
   copy ~300 + cinta ~300 + mando ~60. Sin fotografía: la que había
   era stock de banco de imágenes y el pie afirmaba que era una planta
   de cliente, lo cual se cargaba el argumento del resto del sitio. */
.hero{
  display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(24px,3vw,52px); align-items:center;
  border-bottom:1px solid var(--line);
  padding:clamp(30px,4vw,54px) 0;
  padding-left:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  padding-right:var(--gut);
}
.hero-copy h1{font-size:clamp(30px,3.6vw,46px); line-height:1.08}
.hero-sub{margin-top:20px; font-size:clamp(16px,1.15vw,18.5px); line-height:1.55; max-width:34ch; color:var(--ink-body)}
.hero-copy .btn{margin-top:28px}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr; padding-left:var(--gut); gap:28px}
}

/* Hero de una columna, con la tira de datos debajo y a todo el ancho.
   En la columna del 60 % el teléfono se partía en dos líneas. */
.hero-plano{display:block; padding-right:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)))}
.hero-plano .hero-copy{max-width:62ch}
.hero-plano .hero-sub{max-width:60ch}

/* ---------- familias ---------- */
.fam-ancha{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line); background:var(--surface);
}
.fam-col{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  padding:clamp(20px,2.4vw,30px); border-left:1px solid var(--line);
}
.fam-col:first-child{border-left:0}
.fam-col:hover{background:var(--accent-tint)}
.fam-num{font-size:clamp(38px,4.4vw,56px); line-height:1; color:var(--accent); font-weight:500; letter-spacing:-.02em}
.fam-nom{font-size:19px; color:var(--ink); margin-top:6px}
.fam-txt{font-size:14.5px; color:var(--ink-body); line-height:1.5}
@media (max-width:760px){
  .fam-ancha{grid-template-columns:1fr}
  .fam-col{border-left:0; border-top:1px solid var(--line)}
  .fam-col:first-child{border-top:0}
}

.fams{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.4vw,32px)}
@media (max-width:900px){ .fams{grid-template-columns:1fr} }
.fam{background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column}
.fam-media .pend{border:0; border-bottom:1px solid #CFE0D6}
.fam-media .shot img{aspect-ratio:4/3; object-fit:cover}
.fam-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1}
.fam-body h2,.fam-body h3{font-size:21px}
.fam-body a{text-decoration:none}
.fam-body h2 a:hover,.fam-body h3 a:hover{color:var(--accent)}
.fam-body p{font-size:15px}
.fam-list{margin:0; padding-left:20px; font-size:15px}
.fam-list li{margin:6px 0}
.fam-list a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line)}
.fam-list a:hover{border-bottom-color:var(--accent)}
.fam-n{margin-top:auto; padding-top:12px; font-size:13.5px; color:var(--ink-muted); border-top:1px solid var(--line)}

/* ---------- listado de productos de una familia ---------- */
.prods{border-top:1px solid var(--line)}
.prod{
  display:flex; gap:24px; align-items:center; justify-content:space-between;
  padding:26px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.prod-body{max-width:64ch}
.prod-body h2{font-size:22px}
.prod-body h2 a{text-decoration:none}
.prod-body h2 a:hover{color:var(--accent)}
.prod-body p{font-size:15.5px; margin-top:8px}
.prod-spec{font-size:14px; color:var(--ink-muted)}
.prod-go{
  flex:none; text-decoration:none; color:var(--accent); font-size:15.5px;
  border:1px solid var(--line); padding:11px 18px;
}
.prod-go:hover{background:var(--accent-tint); border-color:var(--accent)}

/* ---------- ficha de producto ---------- */
.ficha{padding:var(--aire-bloque) 0 var(--aire-ficha); border-bottom:1px solid var(--line)}
/* en las fichas el ritmo es más corto: 56px entre bloques, no 120 */
.ficha ~ section{padding:var(--aire-ficha) 0}
.ficha-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,3.4vw,52px); align-items:start}
@media (max-width:900px){ .ficha-in{grid-template-columns:1fr} }
.ficha-copy h1{margin-bottom:20px}
.ficha-copy p{font-size:16.5px; margin-bottom:14px}
.ficha-links{margin-top:24px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px 26px}
.ficha-media .shot img{border:1px solid var(--line)}

.benef{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px)}
.benef p{font-size:15.5px; padding-top:18px; border-top:2px solid var(--accent)}
@media (max-width:820px){ .benef{grid-template-columns:1fr} }

.contact-direct{margin-top:24px; display:flex; flex-wrap:wrap; gap:14px}
.siblings{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:12px 20px}
.siblings a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); font-size:15.5px}
.siblings a:hover{border-bottom-color:var(--accent)}

/* ---------- etiquetas ---------- */
.tags{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px}
.tags li{border:1px solid var(--line); background:var(--surface); padding:8px 14px; font-size:14.5px; color:var(--ink)}
.tags.big li{padding:12px 20px; font-size:16px}
.tags.mt{margin-top:6px}

.bullets{margin:14px 0 0; padding-left:20px; font-size:15.5px}
.bullets li{margin:8px 0}

/* ---------- tablas de especificación (única zona con monoespaciada) ---------- */
.spec{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line)}
.spec caption{text-align:left; padding:0 0 12px; font-size:14.5px; color:var(--ink-muted)}
.spec th,.spec td{text-align:left; padding:13px 16px; border-top:1px solid var(--line); vertical-align:top; font-size:15px}
.spec thead th{border-top:0; color:var(--ink); font-weight:600; font-size:14px; white-space:nowrap}
.spec tbody th{font-weight:600; color:var(--ink); white-space:nowrap}
.spec td{font-family:var(--mono); font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.spec td.txt{font-family:var(--sans); font-size:15px; color:var(--ink-body); white-space:normal}
.spec tbody tr:nth-child(even) th,.spec tbody tr:nth-child(even) td{background:rgba(228,222,212,.24)}

.tablescroll{overflow-x:auto; border:1px solid var(--line); background:var(--surface)}
.tablescroll .spec{border:0; min-width:640px}

/* ---------- /sectores: hero con diagrama ---------- */
.hero-sec .hero-copy .more{margin-top:24px}
.hero-diagrama{min-width:0}
.diagrama{margin:0}
.diagrama svg{display:block; width:100%; height:auto}
.dg-q{font-family:var(--sans); font-size:16px; fill:var(--ink-body)}
.dg-guia{fill:none; stroke:var(--line); stroke-width:1.5}
.dg-caja{fill:none; stroke:var(--line); stroke-width:1.5}
.dg-cab{fill:var(--accent-tint); stroke:none}
.dg-sep{fill:none; stroke:var(--line); stroke-width:1.5}
.dg-t{font-family:var(--sans); font-size:17px; font-weight:500; fill:var(--accent)}
.dg-i{font-family:var(--sans); font-size:14.5px; fill:var(--ink)}
.dg-k{font-family:var(--sans); font-size:13px; fill:var(--ink-muted)}
.dg-c{font-family:var(--sans); font-size:13.5px; fill:var(--ink-body)}
.dg-pt{fill:var(--ink-muted)}
.diagrama figcaption{margin-top:14px; font-size:13.5px; color:var(--ink-muted); max-width:56ch}

/* ---------- /sectores: selector por tipo ---------- */
.pestanas{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--aire-dentro)}
.pestanas button{
  font:inherit; font-size:15px; color:var(--ink-body); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:10px 20px; cursor:pointer;
}
.pestanas button:hover{border-color:var(--accent); color:var(--accent)}
.pestanas button[aria-selected="true"]{
  background:var(--accent); border-color:var(--accent); color:#FFFFFF;
}
.pestanas button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* sin JS se ven las cinco apiladas, así que cada una lleva separación */
.ficha-sec{padding:0; border:0}
.ficha-sec + .ficha-sec{margin-top:var(--aire-dentro); padding-top:var(--aire-dentro); border-top:1px solid var(--line)}
.ficha-sec > h3{font-size:20px; margin-bottom:18px}
.ficha-sec-in{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,48px); align-items:start}
@media (max-width:760px){ .ficha-sec-in{grid-template-columns:1fr} }
.ficha-sec h4{font-size:15px; font-weight:600; color:var(--ink); margin-bottom:12px}
.ficha-sec p{font-size:15.5px; line-height:1.6}

/* el punto dice si el defecto se ve por fuera o no: es el dato clave */
.df-lista{margin:0; padding:0; list-style:none}
.df{position:relative; padding-left:20px; font-size:15.5px; margin:9px 0; display:block}
.df::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%;
}
.df-fuera::before{background:var(--sig-ok)}
.df-dentro::before{background:var(--sig-warn)}
.df-leyenda{margin-top:16px; display:flex; flex-wrap:wrap; gap:6px 20px}
.df-leyenda .df{font-size:13.5px; color:var(--ink-muted); margin:0; display:inline-block}

/* el puente a producto: es lo que convierte la página en venta */
.puente{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:15px; color:var(--ink-body);
}
.puente a{
  color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.puente a:hover{border-bottom-color:var(--accent)}
.puente a + a{margin-left:6px}
.puente a + a::before{content:"· "; color:var(--ink-muted); border:0; margin-right:6px}

/* ---------- listas de definición ---------- */
.deflist{margin:14px 0 0; border-top:1px solid var(--line)}
.deflist .row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:15.5px}
.deflist dt{color:var(--ink-body)}
.deflist dd{margin:0; color:var(--ink); text-align:right}
.deflist a{color:var(--accent)}

/* ---------- /servicio: tira de cifras del hero ---------- */
/* Tira de datos. La usan el hero de /servicio (3) y el de /empresa (4).
   Solo lleva datos verificables: si algo está por confirmar, se dice. */
.tira,.sla-tira{
  margin:clamp(24px,3vw,36px) 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.tira-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tira li,.sla-tira li{background:var(--bg); min-width:0}
.tira a,.sla-tira a{display:block; padding:18px 20px; text-decoration:none; height:100%}
.tira a:hover,.sla-tira a:hover{background:var(--accent-tint)}
.tira-k,.sla-k{display:block; font-size:14px; color:var(--ink-body)}
.tira-v,.sla-v{
  display:block; margin-top:6px; font-size:clamp(24px,2.4vw,30px); line-height:1.1;
  color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums;
}
/* el teléfono no es una cifra corta: cabe pero no a 30px */
.tira-v{overflow-wrap:anywhere; font-size:clamp(20px,1.9vw,26px)}
/* mientras el dato no esté confirmado, el hueco se ve como hueco */
.sla-tira .sla-v,.sla-caja .sla-v:not(.sla-dato){color:var(--accent); font-size:17px; font-weight:500}
.tira-d,.sla-d{display:block; margin-top:6px; font-size:13.5px; color:var(--ink-body); line-height:1.45}
@media (max-width:1000px){ .tira-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .tira,.sla-tira,.tira-4{grid-template-columns:1fr} }
.hero-datos{min-width:0}

/* ---------- /servicio: tarjetas de tiempos ---------- */
.sla-cajas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:var(--aire-dentro)}
@media (max-width:760px){ .sla-cajas{grid-template-columns:1fr} }
.sla-caja{background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:20px; min-width:0}
.sla-caja .sla-k{font-size:15px; color:var(--ink)}
/* cuando lleguen los datos, la cifra va aquí a 36px */
.sla-caja .sla-dato{font-size:36px; color:var(--ink); font-variant-numeric:tabular-nums}

/* ---------- /servicio: cuatro etapas numeradas sobre una línea ----------
   Aquí sí se numera: es una secuencia real y con orden obligatorio. */
.etapas{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px);
}
.etapa{position:relative; padding-top:46px}
/* la línea que une los nodos pasa por el centro de los círculos */
.etapa::before{
  content:""; position:absolute; left:0; right:calc(-1 * clamp(18px,2.2vw,30px)); top:15px;
  height:2px; background:var(--line);
}
.etapa:last-child::before{right:0}
.etapa-n{
  position:absolute; top:0; left:0; width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:#FFFFFF; display:grid; place-items:center;
  font-size:15px; font-weight:500;
}
.etapas h3{margin-bottom:8px}
.etapas p{font-size:15px}
@media (max-width:1000px){
  .etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapa::before{right:0}
}
@media (max-width:600px){ .etapas{grid-template-columns:1fr} }

/* ---------- /servicio: raíl vertical de la línea temporal ---------- */
.rail{margin:0; padding:0; list-style:none; position:relative}
.rail::before{
  content:""; position:absolute; left:5px; top:8px; bottom:8px;
  width:2px; background:var(--line);
}
.hito{position:relative; padding:0 0 30px 30px}
.hito:last-child{padding-bottom:0}
.hito::before{
  content:""; position:absolute; left:0; top:6px;
  width:10px; height:10px; border-radius:50%; background:var(--accent);
}
.hito-cuando{display:block; font-size:15px; font-weight:500; color:var(--accent); margin-bottom:4px}
.hito-cuerpo h3{font-size:18px; margin-bottom:6px}
.hito-cuerpo p{font-size:15px; line-height:1.6}

/* ---------- mapa de zonas ---------- */
.mapa-in{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,3vw,48px); align-items:center}
@media (max-width:820px){ .mapa-in{grid-template-columns:1fr} }
.mapa{margin:0; background:var(--surface); border:1px solid var(--line); padding:clamp(14px,2vw,26px)}
.mapa svg{display:block; width:100%; height:auto; max-height:420px}
.mp-borde{fill:none; stroke:var(--ink-muted); stroke-width:1.2; opacity:.55}
.mp-zona{fill:var(--accent-tint); stroke:var(--accent); stroke-width:1.2}
/* halo del color del fondo para que la etiqueta no se lea encima de una
   frontera. paint-order pinta el trazo por debajo del relleno. */
.mp-rot{
  font-family:var(--sans); font-size:13px; fill:var(--ink); dominant-baseline:middle;
  stroke:var(--surface); stroke-width:4; paint-order:stroke fill; stroke-linejoin:round;
}
.mapa figcaption{margin-top:12px; font-size:13px; color:var(--ink-muted)}
.mapa-lado > * + *{margin-top:16px}

/* ---------- compromisos ---------- */
.commit{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,32px)}
.commit > div{padding-top:18px; border-top:1px solid var(--line)}
.commit h3{margin-bottom:10px}
.commit p{font-size:15px}
@media (max-width:1000px){ .commit{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .commit{grid-template-columns:1fr} }

/* ---------- mapa de zonas ---------- */
.mapa-in{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(24px,3vw,48px); align-items:center}
@media (max-width:820px){ .mapa-in{grid-template-columns:1fr} }
.mapa{background:var(--surface); border:1px solid var(--line); padding:clamp(14px,2vw,26px)}
.mapa svg{display:block; width:100%; height:auto; max-height:420px}

/* ============================================================
   «El umbral es tuyo» v3 — la cinta es el hero.
   Sin banda blanca: el bloque va sobre el fondo de página para no
   partirla en dos. Las cifras van dentro del SVG, al final de su rama.
   ============================================================ */
.hero-cinta{min-width:0}
.cinta-in{background:transparent; overflow:hidden}
.cinta-svg{display:block; width:100%; height:auto}

/* En móvil el texto de dentro del SVG se queda en 7 px: se recorta el dibujo
   por donde empiezan las cifras y estas se dan en HTML, a tamaño real. */
.cinta-movil{display:none}
@media (max-width:760px){
  .cinta-svg{width:142%}          /* recorta el viewBox en x = 558 */
  .cn-cifra{display:none}
  .cinta-movil{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 24px; margin-top:16px;
  }
  .cinta-movil > div{display:flex; flex-direction:column; gap:3px}
  .cinta-movil .k{font-size:14px; color:var(--ink-body)}
  .cinta-movil .v{font-size:30px; color:var(--ink); line-height:1.1}
  .cinta-movil .v b{font-weight:500; font-variant-numeric:tabular-nums}
  .cinta-movil .d{font-size:13px; color:var(--ink-body); line-height:1.45}
  .cinta-movil .d b{color:var(--ink); font-weight:600}
}
@media (max-width:420px){
  .cinta-movil{grid-template-columns:1fr; gap:14px}
}

/* --- dibujo --- */
.cn-banda rect{fill:#EDE7DD}
.cn-rayas path{fill:none; stroke:#DCD3C5; stroke-width:1.4}
.cn-linea .cn-caida{stroke:var(--ink-muted); stroke-width:1.2; stroke-dasharray:2 5; opacity:.6}
.cn-linea path{fill:none; stroke:var(--ink-muted); stroke-width:1.8}
.cn-linea .cn-cuna{fill:var(--ink-muted); stroke:none}
.cn-boca path{fill:none; stroke:var(--ink-muted); stroke-width:1.8}
.cn-cono path{fill:var(--accent); opacity:.08; stroke:none}
.cn-cabezal rect{fill:var(--bg); stroke:var(--accent); stroke-width:1.8}
.cn-cabezal .cn-lente{fill:var(--accent); stroke:none}
.cn-cabezal .cn-mira{fill:none; stroke:var(--accent); stroke-width:1; stroke-dasharray:3 4; opacity:.55}
.cn-rotulo text{font-family:var(--sans); font-size:15px; fill:var(--ink-muted)}

/* cifras dentro del dibujo, al final de cada rama */
.cn-cifra text{font-family:var(--sans)}
.cn-cifra .c-k{font-size:17px; fill:var(--ink-body)}
.cn-cifra .c-v{font-size:42px; fill:var(--ink); font-weight:500; letter-spacing:-.02em}
.cn-cifra .c-u{font-size:16px; fill:var(--ink-body); font-weight:400; letter-spacing:0}
.cn-cifra .c-d{font-size:15px; fill:var(--ink-body)}

/* --- piezas: aquí el color es el contenido, por eso va en relleno --- */
.pz-cruda{fill:#CFC7B9}
.pz-vista{fill:none}
.pz[data-st="ok"] .pz-vista{fill:var(--sig-ok)}
.pz[data-st="pasa"] .pz-vista{fill:var(--sig-warn)}
.pz[data-st="rechazo"] .pz-vista{fill:var(--sig-reject)}
/* El bueno tirado comparte destino con el rechazo pero no apariencia: es el
   error caro y lleva un aspa encima. El borde punteado que llevaba antes se
   leía como rueda dentada a este tamaño. */
.pz[data-st="caro"] .pz-vista{fill:var(--sig-reject)}
.pz-x{display:none; fill:none; stroke:var(--bg); stroke-width:2.4; stroke-linecap:round}
.pz[data-st="caro"] .pz-x{display:block}

/* Una sola animación con retardo negativo hace las dos cosas: coloca la
   pieza donde va y la mueve. Se acota a .cn-piezas para que las muestras
   de la leyenda y de la tabla no se muevan ni empiecen transparentes. */
.cn-piezas .pz{animation:recorrido 12s linear infinite; animation-delay:calc(var(--k) * -12s)}

@keyframes recorrido{
  0%{transform:translate(0px,0px)}
  64%{transform:translate(326px,0px)}        /* del inicio al bifurcador */
  100%{transform:translate(471px,var(--ry))}  /* y por su rama */
}
/* El color aparece al cruzar el cabezal. No hay animación de opacidad que
   sincronizar: cada juego de piezas está recortado a su lado de la línea. */

/* Arranca en marcha. Se puede parar a mano, y con reduce se queda
   quieta sola: la animación sigue aplicada, solo que en pausa, que es
   lo que mantiene bien colocadas las piezas. */
.cinta-in.parada .cn-piezas .pz{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .cn-piezas .pz{animation-play-state:paused}
}

/* --- mando --- */
.firma-mando{
  margin-top:18px; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px 20px; align-items:center;
}
.firma-mando label{font-size:15px; color:var(--ink-body); white-space:nowrap}
.firma-mando input[type=range]{width:100%; margin:0; accent-color:var(--accent); height:32px; cursor:pointer}
.firma-mando input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.firma-eti{display:flex; align-items:baseline; gap:9px; white-space:nowrap}
.firma-eti b{font-size:24px; color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; min-width:2.2ch; text-align:right}
.firma-eti span{font-size:14.5px; color:var(--ink-body)}
.marcha{
  font:inherit; font-size:13.5px; color:var(--ink-body); background:transparent;
  border:1px solid var(--line); padding:7px 13px; cursor:pointer; white-space:nowrap;
}
.marcha:hover{background:var(--accent-tint); border-color:var(--accent); color:var(--accent)}
/* sin movimiento posible, el botón no promete lo que no puede dar */
@media (prefers-reduced-motion:reduce){ .marcha{display:none} }
@media (max-width:620px){
  .firma-mando{grid-template-columns:1fr auto; gap:8px 14px}
  .firma-mando input[type=range]{grid-column:1 / -1}
}

/* muestra de estado en leyendas y tablas */
.mstr{width:14px; height:14px; flex:none; display:inline-block; vertical-align:-2px; margin-right:9px}
.mstr .mstr-p[data-st="ok"]{fill:var(--sig-ok)}
.mstr .mstr-p[data-st="pasa"]{fill:var(--sig-warn)}
.mstr .mstr-p[data-st="rechazo"]{fill:var(--sig-reject)}
.mstr-x path{fill:none; stroke:var(--sig-reject); stroke-width:2.2; stroke-linecap:round}

.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- reparto del lote: cuatro tarjetas ----------
   minmax(0,1fr) y no 1fr: con 1fr el min-width:auto de la pista deja que el
   contenido empuje la rejilla y vuelve a desbordar. Ese era el fallo. */
.reparto{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:640px){ .reparto{grid-template-columns:1fr} }
.rp{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:20px; min-width:0;
}
.rp-k{display:flex; align-items:center; font-size:15px; font-weight:500; color:var(--ink)}
.rp-v{margin-top:10px; font-size:32px; font-weight:500; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums}
.rp-d{margin-top:10px; font-size:14px; line-height:1.5; color:var(--ink-body)}
/* los dos aciertos van con borde normal; los dos errores son lo que hay que mirar */
.rp-err{border-left-width:3px}
.rp-err[data-st="pasa"]{border-left-color:var(--sig-warn)}
.rp-err[data-st="caro"]{border-left-color:var(--sig-reject)}

/* ---------- gráfico del reentrenamiento ---------- */
.grafico{margin:0}
.grafico svg{display:block; width:100%; height:auto; background:var(--surface); border:1px solid var(--line)}
.gr-eje path{fill:none; stroke:var(--line); stroke-width:1.5}
.gr-rot text{font-family:var(--sans); font-size:14px; fill:var(--ink-muted)}
.gr-rot .gr-y{font-size:14px; fill:var(--ink-body)}
.gr-area{fill:var(--accent-tint)}
.gr-linea{fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round}
.gr-pt circle{fill:var(--accent)}
.grafico figcaption{margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--ink-muted)}

/* ---------- línea de hitos de servicio ---------- */
.hito-linea{margin-bottom:var(--aire-dentro)}
.hito-linea svg{display:block; width:100%; height:auto}
.hl-eje{fill:none; stroke:var(--line); stroke-width:2}
.hl-marca circle{fill:var(--accent)}
.hl-tic path{fill:none; stroke:var(--line); stroke-width:1.5}
.hl-rot text{font-family:var(--sans); font-size:15px; fill:var(--ink-body)}
@media (max-width:700px){ .hito-linea{display:none} }

/* ---------- descargas ---------- *//* ---------- descargas ---------- */
.downloads{border-top:1px solid var(--line)}
.dl{display:grid; grid-template-columns:1fr auto auto; gap:14px 26px; align-items:center; padding:17px 0; border-bottom:1px solid var(--line)}
.dl .t{color:var(--ink); font-size:16px}
.dl .t span{display:block; font-size:14px; color:var(--ink-muted); margin-top:4px}
.dl .fmt{font-size:13.5px; color:var(--ink-muted); white-space:nowrap}
.dl a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); font-size:15.5px; white-space:nowrap}
.dl a:hover{border-bottom-color:var(--accent)}
@media (max-width:620px){ .dl{grid-template-columns:1fr auto} .dl .fmt{grid-column:1; margin-top:-8px} }

/* ---------- formulario ---------- */
.form{max-width:760px}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px}
.field{display:flex; flex-direction:column; gap:7px}
.field.wide{grid-column:1/-1}
.field label{font-size:14.5px; color:var(--ink-body)}
.field input,.field textarea{
  font:inherit; font-size:16px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); padding:12px 14px; width:100%; border-radius:0;
}
.field input:focus,.field textarea:focus{border-color:var(--accent); outline:2px solid var(--accent); outline-offset:1px}
.field ::placeholder{color:var(--ink-muted)}
.form-send{margin-top:22px; display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center}
.form-send .tiny{margin-top:0}
@media (max-width:620px){ .form-grid{grid-template-columns:1fr} }

.contacto-in{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,3.4vw,56px); align-items:start}
@media (max-width:860px){ .contacto-in{grid-template-columns:1fr} }
.contacto-side h2,.contacto-in h2{margin-bottom:16px}

/* ---------- prosa legal ---------- */
.prosa{max-width:74ch; margin-inline:auto}
.prosa h2{font-size:22px; margin:34px 0 12px}
.prosa h2:first-child{margin-top:0}
.prosa p{font-size:16.5px; margin-bottom:14px}
.prosa a{color:var(--accent)}
.prosa .pend{margin-bottom:18px}

/* ============================================================
   PIE
   ============================================================ */
.foot{background:var(--surface); border-top:1px solid var(--line); padding:clamp(38px,4.4vw,60px) 0 34px}
.foot-top{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,2.6vw,44px); padding-bottom:32px; border-bottom:1px solid var(--line)}
@media (max-width:900px){ .foot-top{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .foot-top{grid-template-columns:1fr} }
.foot .brand img{width:150px}
.foot-h{font-size:15px; color:var(--ink); font-weight:600; margin:0 0 14px}
.foot-claim{font-size:14.5px; color:var(--ink-body); margin:16px 0; max-width:38ch}
.foot ul{margin:0; padding:0; list-style:none}
.foot li{margin:8px 0}
.foot a{color:var(--ink-body); text-decoration:none; font-size:15px}
.foot a:hover{color:var(--accent)}
.foot ul.plain li{color:var(--ink-body); font-size:15px}
.foot address{font-style:normal; font-size:15px; line-height:1.7; color:var(--ink-body)}
.foot .support{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.foot .support .k{font-size:13.5px; color:var(--ink-muted)}
.foot .support .v{font-size:20px; color:var(--ink); margin-top:5px}
.foot .support .v a{font-size:20px; color:var(--ink)}
.foot .support .h{margin-top:8px}
.foot-bot{padding-top:24px; display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; font-size:14px; color:var(--ink-muted)}
.foot-bot .certs{display:flex; flex-wrap:wrap; gap:8px 18px}
.foot-bot .legal{display:flex; flex-wrap:wrap; gap:8px 18px}
.foot-bot .legal a{font-size:14px}
.lang{margin-left:auto; display:flex; align-items:center; border:1px solid var(--line)}
.lang a,.lang span{padding:7px 12px; font-size:14px; text-decoration:none; color:var(--ink-body)}
.lang [aria-current="true"]{background:var(--accent-tint); color:var(--accent)}
.lang [aria-disabled="true"]{color:var(--ink-muted); cursor:not-allowed}
@media (max-width:760px){ .lang{margin-left:0} }

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *:not(.pz){animation:none!important}
  *{transition:none!important}
  html{scroll-behavior:auto}
}