/* ============================================================================
   SPARTANE · sistema de diseño v3 — 26 sep 2026
   HEREDA del sitio anterior (tokens medidos con Playwright sobre spartane.ai el
   2026-08-09) y lo sube de registro: misma familia, misma paleta, mismas
   píldoras y sombras; más aire, más jerarquía y más disciplina de dato.

     DM Sans, una sola familia · tinta #0A1628 · cuerpo #5B6674
     azul #2563EB (enlace y acento) · teal #0D9488 (secundario, del logotipo)
     blanco dominante · #F4F6F9 en secciones alternas · oscuro puntual
     radios 8 · 20 · 24 · 999 · sombra rgba(2,6,23,.08) 0 22px 60px

   Versiones anteriores: sistema.v1.css (latón) · sistema.v2.css (serif marino)
   ========================================================================= */

.sp {
  /* 01 · Color — los del sitio, sin inventar ninguno */
  --sp-tinta: #0A1628;    --sp-tinta-2: #5B6674;  --sp-tinta-3: #8B96A5;
  --sp-papel: #FFFFFF;    --sp-seccion: #F4F6F9;
  --sp-linea: #E4E8EE;    --sp-linea-2: #EFF2F6;
  --sp-azul: #2563EB;     --sp-azul-osc: #1D4ED8; --sp-azul-claro: #93B4FF;
  --sp-teal: #0D9488;     --sp-teal-claro: #2DD4BF;
  --sp-oscuro: #0A1628;   --sp-oscuro-2: #132339;
  --sp-alerta: #92600A;

  /* 02 · Tipografía — una sola familia, como el sitio */
  --sp-fuente: 'DM Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --sp-t8: clamp(2.5rem, 5.4vw, 4.25rem);     /* H1 · 68px arriba */
  --sp-t7: clamp(2rem, 3.8vw, 3.25rem);       /* H2 · 52px arriba */
  --sp-t6: clamp(1.625rem, 2.6vw, 2.25rem);
  --sp-t5: 1.375rem; --sp-t4: 1.1875rem; --sp-t3: 1.0625rem;
  --sp-t2: .9375rem; --sp-t1: .8125rem; --sp-t0: .75rem;

  /* 03 · Retícula */
  --sp-max: 1440px; --sp-margen: 24px; --sp-medida: 66ch; --sp-canal: 32px;
  --sp-e1:4px; --sp-e2:8px; --sp-e3:12px; --sp-e4:16px; --sp-e5:24px;
  --sp-e6:32px; --sp-e7:48px; --sp-e8:72px; --sp-e9:112px;

  /* 04 · Geometría — los cuatro radios del sitio */
  --sp-r-chico: 8px; --sp-r: 20px; --sp-r-grande: 24px; --sp-r-pildora: 999px;
  --sp-borde: 1px solid var(--sp-linea);
  --sp-sombra: 0 22px 60px rgba(2, 6, 23, .08);
  --sp-sombra-chica: 0 8px 24px rgba(2, 6, 23, .06);
  --sp-transicion: 200ms cubic-bezier(.4, 0, .2, 1);

  background: var(--sp-papel); color: var(--sp-tinta);
  font-family: var(--sp-fuente); font-size: 1.15rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
@media (min-width:640px)  { .sp { --sp-margen: 40px } }
@media (min-width:1080px) { .sp { --sp-margen: 64px } }

.sp *, .sp *::before, .sp *::after { box-sizing: border-box }
.sp h1,.sp h2,.sp h3,.sp h4,.sp p,.sp ul,.sp ol,.sp figure,.sp dl { margin:0 }
.sp ul,.sp ol { padding:0; list-style:none }
.sp a { color: inherit; text-decoration: none }
.sp a:focus-visible,.sp button:focus-visible { outline:2px solid var(--sp-azul); outline-offset:3px }
.sp table { border-collapse: collapse; width: 100% }
.sp img { max-width:100% }

.sp-salto { position:absolute; left:-9999px; top:0; background:var(--sp-oscuro); color:#fff;
  padding:var(--sp-e3) var(--sp-e5); font-size:var(--sp-t2); z-index:60;
  border-radius:var(--sp-r-chico) }
.sp-salto:focus { left:var(--sp-margen); top:var(--sp-e3) }

/* ---------------------------------------------------------------------------
   Retícula y secciones. El sitio alterna blanco y #F4F6F9: sin filetes.
   ------------------------------------------------------------------------ */
.sp-wrap { max-width:var(--sp-max); margin-inline:auto; padding-inline:var(--sp-margen) }
.sp-seccion { padding-block:var(--sp-e8) }
@media (min-width:1080px){ .sp-seccion { padding-block:var(--sp-e9) } }
.sp-seccion.sp-suave { background:var(--sp-seccion) }
.sp-mayor-menor,.sp-menor-mayor,.sp-tercios,.sp-mitades {
  display:grid; gap:var(--sp-e7) var(--sp-canal); align-items:start }
@media (min-width:1080px){
  .sp-mayor-menor { grid-template-columns:7fr 5fr; gap:var(--sp-e9) }
  .sp-menor-mayor { grid-template-columns:5fr 7fr; gap:var(--sp-e9) }
  .sp-tercios     { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .sp-mitades     { grid-template-columns:1fr 1fr; gap:var(--sp-e9) }
}

/* Banda oscura: puntual, como en el sitio — CTA y cierres, no fondo general */
.sp-oscuro { background:var(--sp-oscuro); color:#E8ECF2 }
.sp-oscuro .sp-antetitulo { background:rgba(255,255,255,.08); color:#BFD0E8 }
.sp-oscuro .sp-fuente { color:#8FA0B8 }
.sp-oscuro .sp-portada,.sp-oscuro .sp-titular,.sp-oscuro .sp-cifra-valor,
.sp-oscuro .sp-texto,.sp-oscuro .sp-subtitulo { color:#FFFFFF }
.sp-oscuro .sp-entradilla,.sp-oscuro .sp-dato { color:#A9B8CC }
.sp-oscuro .sp-lista li { border-bottom-color:rgba(255,255,255,.10) }
.sp-oscuro .sp-lista strong { color:#fff }
.sp-oscuro .sp-tabla th,.sp-oscuro .sp-tabla td { border-bottom-color:rgba(255,255,255,.10) }
.sp-oscuro .sp-tabla thead th { border-bottom-color:rgba(255,255,255,.28); color:#BFD0E8 }
.sp-oscuro .sp-tabla tbody th { color:#fff }
.sp-oscuro .sp-capa .n { color:var(--sp-teal-claro) }
.sp-oscuro .sp-guion li::before { color:var(--sp-teal-claro); background:rgba(45,212,191,.12) }
.sp-oscuro .sp-cifra { border-top-color:var(--sp-teal-claro) }

/* ---------------------------------------------------------------------------
   Tipografía. Titular grande y apretado; cuerpo tranquilo. Es el rasgo que
   más define al sitio y el que más se nota cuando falta.
   ------------------------------------------------------------------------ */
.sp-antetitulo { display:inline-block; background:var(--sp-seccion);
  border-radius:var(--sp-r-pildora); padding:7px 16px;
  font-size:var(--sp-t1); letter-spacing:.02em; font-weight:700;
  color:var(--sp-tinta-2); margin-bottom:var(--sp-e5) }

.sp-portada { font-size:var(--sp-t8); line-height:1.0; letter-spacing:-.045em;
  font-weight:800; max-width:20ch; text-wrap:balance }
.sp-titular { font-size:var(--sp-t7); line-height:1.04; letter-spacing:-.04em;
  font-weight:800; max-width:24ch; text-wrap:balance }
.sp-subtitulo { font-size:var(--sp-t5); line-height:1.2; font-weight:700;
  letter-spacing:-.02em; text-wrap:balance }
.sp-entradilla { font-size:var(--sp-t4); line-height:1.6; color:var(--sp-tinta-2);
  max-width:var(--sp-medida) }
.sp-texto { max-width:var(--sp-medida); color:var(--sp-tinta-2) }
.sp-dato { font-size:var(--sp-t2); color:var(--sp-tinta-2) }
.sp-cita { font-size:var(--sp-t5); line-height:1.35; font-weight:600;
  letter-spacing:-.02em; color:var(--sp-tinta) }

/* El aire entre jerarquías lo fija el par, no una clase suelta */
.sp-portada + .sp-entradilla, .sp-portada + .sp-texto { margin-top:var(--sp-e6) }
.sp-titular  + .sp-entradilla, .sp-titular  + .sp-texto { margin-top:var(--sp-e5) }
@media (min-width:1080px){
  .sp-portada + .sp-entradilla { margin-top:var(--sp-e7) }
  .sp-titular  + .sp-entradilla { margin-top:var(--sp-e6) }
}

.sp-fuente { font-size:var(--sp-t1); color:var(--sp-tinta-3); font-weight:500;
  letter-spacing:0; text-transform:none }
.sp-fuente a { color:var(--sp-tinta-2); border-bottom:1px solid var(--sp-linea) }
.sp-fuente a:hover { color:var(--sp-azul); border-bottom-color:var(--sp-azul) }

/* ---------------------------------------------------------------------------
   Componentes
   ------------------------------------------------------------------------ */

/* La fecha que gobierna la página: píldora clara, sin contador */
.sp-fecha { display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  background:var(--sp-seccion); border-radius:var(--sp-r-pildora);
  padding:10px 20px; font-size:var(--sp-t2); color:var(--sp-tinta-2) }
.sp-fecha b { font-weight:700; color:var(--sp-tinta); font-variant-numeric:tabular-nums }
.sp-oscuro .sp-fecha { background:rgba(255,255,255,.08); color:#A9B8CC }
.sp-oscuro .sp-fecha b { color:#fff }

.sp-cifra { display:block; border-top:3px solid var(--sp-azul); padding-top:var(--sp-e4) }
.sp-cifra-valor { font-size:clamp(2.25rem,3.4vw,3rem); font-weight:800; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; display:block; line-height:1 }
.sp-cifra-rotulo { display:block; margin-top:var(--sp-e3); max-width:32ch;
  color:var(--sp-tinta-2); font-size:var(--sp-t2); line-height:1.5 }
.sp-cifra .sp-fuente { display:block; margin-top:var(--sp-e3) }

.sp-tabla { font-size:var(--sp-t2); font-variant-numeric:tabular-nums }
.sp-tabla caption { text-align:left; font-size:var(--sp-t1); color:var(--sp-tinta-2);
  padding-bottom:var(--sp-e4); font-weight:700 }
.sp-tabla th,.sp-tabla td { padding:var(--sp-e4) var(--sp-e5) var(--sp-e4) 0;
  border-bottom:var(--sp-borde); text-align:left; vertical-align:top; line-height:1.5 }
.sp-tabla thead th { border-bottom:2px solid var(--sp-tinta); font-size:var(--sp-t1);
  color:var(--sp-tinta-2); font-weight:700 }
.sp-tabla tbody th { font-weight:700; color:var(--sp-tinta); white-space:nowrap }
.sp-tabla tbody tr { transition:background var(--sp-transicion) }
.sp-tabla tbody tr:hover { background:var(--sp-seccion) }
.sp-oscuro .sp-tabla tbody tr:hover { background:rgba(255,255,255,.04) }
.sp-tabla tr.sp-ahora th:first-child { box-shadow:inset 3px 0 0 var(--sp-azul);
  padding-left:14px }   /* el filete tapaba el primer carácter de la fecha */

/* CTA en píldora, como el sitio */
.sp-boton { display:inline-flex; align-items:center; gap:10px;
  background:var(--sp-tinta); color:#fff; padding:15px 28px;
  font-size:var(--sp-t2); font-weight:700; border-radius:var(--sp-r-pildora);
  transition:background var(--sp-transicion), box-shadow var(--sp-transicion) }
.sp-boton:hover { background:#16243C; box-shadow:var(--sp-sombra-chica) }
.sp a.sp-boton { color:#fff }
.sp-boton.sp-claro { background:#fff; color:var(--sp-tinta); border:1px solid var(--sp-linea) }
.sp a.sp-boton.sp-claro { color:var(--sp-tinta) }
.sp-boton.sp-claro:hover { border-color:var(--sp-tinta-3); background:#fff }
.sp-oscuro a.sp-boton { background:#fff; color:var(--sp-tinta) }
.sp-oscuro a.sp-boton.sp-claro { background:transparent; color:#fff; border-color:rgba(255,255,255,.28) }
.sp-oscuro a.sp-boton.sp-claro:hover { border-color:#fff }

.sp-lista li { padding:var(--sp-e5) 0; border-bottom:1px solid var(--sp-linea-2);
  max-width:var(--sp-medida); color:var(--sp-tinta-2) }
.sp-lista li:last-child { border-bottom:0 }
.sp-lista strong { color:var(--sp-tinta); font-weight:700 }

.sp-pasos { display:grid; gap:var(--sp-e6) var(--sp-canal) }
@media (min-width:640px){ .sp-pasos { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1080px){ .sp-pasos { grid-template-columns:repeat(4,1fr) } }
.sp-paso { background:#fff; border:var(--sp-borde); border-radius:var(--sp-r);
  padding:var(--sp-e6) var(--sp-e5); transition:box-shadow var(--sp-transicion) }
.sp-paso:hover { box-shadow:var(--sp-sombra-chica) }
.sp-paso b { display:block; font-size:var(--sp-t1); color:var(--sp-azul);
  margin-bottom:var(--sp-e3); font-weight:700 }
.sp-paso strong { display:block; font-size:var(--sp-t4); font-weight:700;
  letter-spacing:-.02em; line-height:1.25 }
.sp-paso p { margin-top:var(--sp-e3); font-size:var(--sp-t2); color:var(--sp-tinta-2); line-height:1.55 }
.sp-oscuro .sp-paso { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12) }
.sp-oscuro .sp-paso b { color:var(--sp-teal-claro) }
.sp-oscuro .sp-paso strong { color:#fff }
.sp-oscuro .sp-paso p { color:#A9B8CC }

/* Tarjeta de industria: la tesis manda, las tres puertas al pie */
.sp-sectores { display:grid; gap:var(--sp-e5) }
@media (min-width:700px){ .sp-sectores { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1150px){ .sp-sectores { grid-template-columns:repeat(3,1fr) } }
.sp-sector { background:#fff; border:var(--sp-borde); border-radius:var(--sp-r-grande);
  padding:var(--sp-e6); display:flex; flex-direction:column; min-height:330px;
  transition:transform var(--sp-transicion), box-shadow var(--sp-transicion) }
.sp-sector:hover { transform:translateY(-4px); box-shadow:var(--sp-sombra) }
.sp-sector .n { font-size:var(--sp-t1); color:var(--sp-azul); font-weight:700 }
.sp-sector h3 { font-size:var(--sp-t4); font-weight:700; margin-top:var(--sp-e3);
  letter-spacing:-.02em; line-height:1.25; text-wrap:balance }
.sp-sector .tesis { font-size:var(--sp-t2); line-height:1.6; color:var(--sp-tinta-2);
  margin-top:var(--sp-e4); flex:1 }
.sp-sector .marca-fecha { display:inline-block; margin-top:var(--sp-e5);
  background:var(--sp-seccion); border-radius:var(--sp-r-pildora); padding:5px 14px;
  font-size:var(--sp-t1); color:var(--sp-tinta-2); font-weight:700; align-self:flex-start }
.sp-sector-puertas { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:var(--sp-e5); padding-top:var(--sp-e5); border-top:1px solid var(--sp-linea-2);
  font-size:var(--sp-t1); font-weight:700 }
.sp-sector-puertas a { color:var(--sp-tinta-2); white-space:nowrap;
  transition:color var(--sp-transicion) }
.sp-sector-puertas a:first-child { color:var(--sp-azul) }
.sp-sector-puertas a:first-child::after { content:" →" }
.sp-sector-puertas a:hover { color:var(--sp-tinta) }
.sp-sector-puertas a + a::before { content:"·"; color:var(--sp-linea);
  margin-right:8px; font-weight:400 }

/* Agenda */
.sp-capa { background:#fff; border:var(--sp-borde); border-radius:var(--sp-r-grande);
  padding:var(--sp-e6); transition:box-shadow var(--sp-transicion) }
.sp-capa:hover { box-shadow:var(--sp-sombra-chica) }
.sp-capa .n { font-size:var(--sp-t1); color:var(--sp-azul); font-weight:700 }
.sp-oscuro .sp-capa { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12) }
.sp-corte { background:var(--sp-seccion); border-radius:var(--sp-r-grande);
  padding:var(--sp-e7); max-width:var(--sp-medida) }
.sp-corte h3 { font-size:var(--sp-t5); font-weight:700; letter-spacing:-.02em }
.sp-corte p { margin-top:var(--sp-e3); font-size:var(--sp-t2); color:var(--sp-tinta-2) }

/* Guion de la demo: número en círculo */
.sp-guion { counter-reset: paso; display:grid; gap:var(--sp-e6); max-width:var(--sp-medida) }
.sp-guion li { counter-increment: paso; display:grid;
  grid-template-columns:48px 1fr; gap:var(--sp-e5); align-items:start }
.sp-guion li::before { content: counter(paso, decimal-leading-zero);
  width:44px; height:44px; display:grid; place-items:center; border-radius:var(--sp-r-pildora);
  background:rgba(37,99,235,.10); color:var(--sp-azul);
  font-size:var(--sp-t2); font-weight:800 }

/* Nav */

/* Anclas: el nav es pegajoso, asi que el destino tiene que dejarle sitio.
   Sin esto, cada enlace del indice «En esta pagina» deja su propio titular
   escondido detras de la barra. Medido sobre una pagina real, del mismo
   origen: 360->237, 430->208, 640->179, 820->179, 1080->192, 1280->144,
   1600->78. El nav se parte en dos filas en todos los anchos menos el mayor,
   asi que esto no es un arreglo de movil: en escritorio tambien se perdian
   144 px. Si el nav cambia de alto, estos numeros se vuelven a medir. */
html { scroll-padding-top:252px }
@media (min-width:640px)  { html { scroll-padding-top:196px } }
@media (min-width:1080px) { html { scroll-padding-top:208px } }
@media (min-width:1280px) { html { scroll-padding-top:160px } }
@media (min-width:1600px) { html { scroll-padding-top:96px } }

.sp-nav { background:rgba(255,255,255,.92); position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--sp-linea-2) }
.sp-nav-fila { display:flex; align-items:center; gap:var(--sp-e6); flex-wrap:wrap;
  padding-block:var(--sp-e4); min-height:76px }
.sp-marca img { display:block; height:34px; width:auto }
.sp-nav-enlaces { display:flex; gap:var(--sp-e5); flex-wrap:wrap; margin-left:auto;
  font-size:var(--sp-t2); align-items:center; font-weight:500 }
.sp-nav-enlaces a { color:var(--sp-tinta-2); transition:color var(--sp-transicion) }
.sp-nav-enlaces a:hover,.sp-nav-enlaces a[aria-current='page'] { color:var(--sp-tinta) }
.sp-nav-enlaces a.sp-nav-cta { background:var(--sp-tinta); color:#fff; padding:11px 22px;
  border-radius:var(--sp-r-pildora); font-weight:700 }
.sp-nav-enlaces a.sp-nav-cta:hover { background:#16243C; color:#fff }

/* Pie */
.sp-pie { background:var(--sp-oscuro); color:#A9B8CC; padding-block:var(--sp-e8) }
.sp-pie a { color:#CBD7E6 } .sp-pie a:hover { color:#fff }
.sp-pie .sp-marca img { height:30px }
.sp-pie-cols { display:grid; gap:var(--sp-e7); margin-top:var(--sp-e6) }
@media (min-width:640px){ .sp-pie-cols { grid-template-columns:1fr 1fr } }
@media (min-width:900px){ .sp-pie-cols { grid-template-columns:2fr 1fr 1fr 1fr } }
/* La quinta columna —Ayuda— sólo cuando hay ancho para que quepa sin apretar
   las otras cuatro. Por debajo envuelve a una segunda fila, que es correcto:
   el pie no tiene por qué caber en una sola línea. */
@media (min-width:1180px){ .sp-pie-cols { grid-template-columns:2fr 1fr 1fr 1fr 1fr } }
.sp-pie h4 { font-size:var(--sp-t1); color:#7F90A8; margin-bottom:var(--sp-e4); font-weight:700 }
.sp-pie li { padding:6px 0; font-size:var(--sp-t2) }
.sp-pie-legal { border-top:1px solid rgba(255,255,255,.10); margin-top:var(--sp-e7);
  padding-top:var(--sp-e5); font-size:var(--sp-t1); color:#7F90A8 }
.sp-pendiente { color:#F6C177; font-weight:700 }

/* Hero: el sitio lo hace a dos columnas con una tarjeta a la derecha */
.sp-hero { position:relative; overflow:hidden; background:var(--sp-papel) }
.sp-hero .sp-wrap { position:relative; z-index:2 }
.sp-hero::after { content:""; position:absolute; top:-20%; right:-10%;
  width:60%; height:120%; border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.07) 0%, rgba(13,148,136,.05) 45%, transparent 70%);
  pointer-events:none }
.sp-hero.sp-oscuro { background:var(--sp-oscuro) }
.sp-hero.sp-oscuro::after { background:radial-gradient(circle, rgba(45,212,191,.16) 0%, rgba(37,99,235,.10) 45%, transparent 70%) }

/* Panel de dato del hero: la «tarjeta» del sitio, con su sombra grande */
.sp-panel { background:#fff; border:var(--sp-borde); border-radius:var(--sp-r-grande);
  box-shadow:var(--sp-sombra); padding:var(--sp-e7) }
.sp-panel > * + * { margin-top:var(--sp-e6) }
.sp-oscuro .sp-panel { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);
  color:#E8ECF2; box-shadow:none }
.sp-oscuro .sp-panel .sp-dato, .sp-oscuro .sp-panel .sp-cifra-rotulo { color:#A9B8CC }

/* Formulario */
.sp-forma { display:flex; gap:var(--sp-e3); flex-wrap:wrap; max-width:var(--sp-medida) }
.sp-forma input[type=email] { flex:1 1 240px; font:inherit; font-size:var(--sp-t2);
  padding:15px 20px; border:var(--sp-borde); border-radius:var(--sp-r-pildora);
  background:#fff; color:var(--sp-tinta) }
.sp-forma input[type=email]:focus-visible { outline:2px solid var(--sp-azul); outline-offset:2px }
.sp-forma button { font:inherit; font-size:var(--sp-t2); font-weight:700; cursor:pointer;
  background:var(--sp-tinta); color:#fff; border:0; border-radius:var(--sp-r-pildora);
  padding:15px 28px; transition:background var(--sp-transicion) }
.sp-forma button:hover { background:#16243C }
.sp-forma .hp { position:absolute; left:-9999px; top:-9999px }
.sp-forma-ok { display:none; font-size:var(--sp-t2); color:var(--sp-teal); font-weight:700 }
.sp-forma[data-listo] .sp-forma-ok { display:block }
.sp-forma[data-listo] input, .sp-forma[data-listo] button { display:none }
.sp-forma-err { display:none; font-size:var(--sp-t2); color:var(--sp-alerta); font-weight:700 }
.sp-forma[data-error] .sp-forma-err { display:block }

.sp-caminos { display:flex; gap:var(--sp-e4); flex-wrap:wrap; align-items:center }
.sp-caminos .o { font-size:var(--sp-t1); color:var(--sp-tinta-3) }

/* Descarga del brochure */
.sp-descarga { display:inline-flex; align-items:center; gap:12px;
  font-size:var(--sp-t2); font-weight:700; color:var(--sp-azul) }
.sp-descarga::before { content:"↓"; display:grid; place-items:center;
  width:36px; height:36px; border-radius:var(--sp-r-pildora);
  background:rgba(37,99,235,.10); flex:0 0 auto }
.sp-descarga:hover { color:var(--sp-azul-osc) }
.sp-oscuro .sp-descarga { color:var(--sp-teal-claro) }
.sp-oscuro .sp-descarga::before { background:rgba(45,212,191,.14) }

/* Modo interno */
.sp-solo-interno { display:none }
.sp[data-interno] .sp-solo-interno { display:revert }

/* Utilidades */
.sp-e2{margin-top:var(--sp-e2)} .sp-e3{margin-top:var(--sp-e3)} .sp-e4{margin-top:var(--sp-e4)}
.sp-e5{margin-top:var(--sp-e5)} .sp-e6{margin-top:var(--sp-e6)} .sp-e7{margin-top:var(--sp-e7)}
.sp-e8{margin-top:var(--sp-e8)}
.sp-solo-lector { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

@media (prefers-reduced-motion: reduce){
  .sp *,.sp *::before,.sp *::after { transition:none!important; animation:none!important }
  .sp-sector:hover { transform:none }
}

@media print {
  .sp { background:#fff; color:#000; font-size:10.5pt }
  .sp-nav,.sp-salto,.sp-boton,.sp-forma,.sp-caminos { display:none!important }
  .sp-seccion { padding-block:16pt; break-inside:avoid }
  .sp-oscuro { background:#fff!important; color:#000!important }
  .sp-oscuro .sp-titular,.sp-oscuro .sp-cifra-valor { color:#000!important }
  .sp-portada { font-size:26pt } .sp-titular { font-size:18pt }
  .sp a[href^='http']::after { content:' (' attr(href) ')'; font-size:8pt; word-break:break-all }
  .sp-tabla tr,.sp-capa,.sp-sector { break-inside:avoid }
}

/* ---------------------------------------------------------------------------
   Componentes de las diez portadas — 26 sep 2026
   ------------------------------------------------------------------------ */

/* Índice editorial: las 19 tesis como el sumario de un informe */
.sp-indice li { display:grid; grid-template-columns:56px 1fr; gap:var(--sp-e5);
  padding:var(--sp-e5) 0; border-bottom:1px solid var(--sp-linea); align-items:start }
@media (min-width:900px){ .sp-indice li { grid-template-columns:56px 22ch 1fr auto;
  align-items:baseline } }
.sp-indice .n { font-size:var(--sp-t4); font-weight:800; color:var(--sp-azul);
  font-variant-numeric:tabular-nums }
.sp-indice .s { font-size:var(--sp-t4); font-weight:700; letter-spacing:-.02em }
.sp-indice .t { color:var(--sp-tinta-2); font-size:var(--sp-t2); line-height:1.55 }
.sp-indice .f { font-size:var(--sp-t1); color:var(--sp-tinta-3); white-space:nowrap; font-weight:700 }
.sp-indice li:hover .s { color:var(--sp-azul) }
.sp-oscuro .sp-indice li { border-bottom-color:rgba(255,255,255,.12) }
.sp-oscuro .sp-indice .s { color:#fff }
.sp-oscuro .sp-indice .t { color:#A9B8CC }

/* Confrontación: lo que hace hoy contra lo que tendrá que probar */
.sp-versus { display:grid; border:var(--sp-borde); border-radius:var(--sp-r-grande);
  overflow:hidden; margin-top:var(--sp-e7) }
@media (min-width:900px){ .sp-versus { grid-template-columns:1fr 1fr } }
.sp-versus > div { padding:var(--sp-e7) }
.sp-versus .hoy { background:var(--sp-seccion) }
.sp-versus .manana { background:#fff }
@media (min-width:900px){ .sp-versus .manana { border-left:1px solid var(--sp-linea) } }
.sp-versus h3 { font-size:var(--sp-t1); font-weight:700; color:var(--sp-tinta-2);
  margin-bottom:var(--sp-e5) }
.sp-versus .manana h3 { color:var(--sp-azul) }
.sp-versus li { padding:var(--sp-e4) 0; border-bottom:1px solid var(--sp-linea-2);
  font-size:var(--sp-t2); line-height:1.55 }
.sp-versus li:last-child { border-bottom:0 }

/* La pregunta, a pantalla */
.sp-pregunta { font-size:clamp(2.5rem,7vw,5.5rem); line-height:1.0; letter-spacing:-.05em;
  font-weight:800; max-width:17ch; text-wrap:balance }

/* Familias regulatorias */
.sp-familias { display:grid; gap:var(--sp-e6) var(--sp-canal); margin-top:var(--sp-e7) }
@media (min-width:800px){ .sp-familias { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1200px){ .sp-familias { grid-template-columns:repeat(3,1fr) } }
.sp-familia { border-top:3px solid var(--sp-azul); padding-top:var(--sp-e5) }
.sp-familia .l { font-size:var(--sp-t1); font-weight:800; color:var(--sp-azul) }
.sp-familia h3 { font-size:var(--sp-t4); font-weight:700; letter-spacing:-.02em;
  margin-top:var(--sp-e2); line-height:1.25 }
.sp-familia .norma { font-size:var(--sp-t2); color:var(--sp-tinta-2); margin-top:var(--sp-e3) }
.sp-familia ul { margin-top:var(--sp-e4); border-top:1px solid var(--sp-linea-2) }
.sp-familia li { padding:7px 0; font-size:var(--sp-t2); color:var(--sp-tinta-2) }
.sp-familia li a:hover { color:var(--sp-azul) }

/* Autodiagnóstico */
.sp-test { background:#fff; border:var(--sp-borde); border-radius:var(--sp-r-grande);
  box-shadow:var(--sp-sombra); padding:var(--sp-e7); max-width:56ch }
.sp-test .p { font-size:var(--sp-t4); font-weight:700; letter-spacing:-.02em; line-height:1.3 }
.sp-test .ops { display:flex; gap:var(--sp-e3); flex-wrap:wrap; margin-top:var(--sp-e5) }
.sp-test button { font:inherit; font-size:var(--sp-t2); font-weight:700; cursor:pointer;
  background:#fff; border:1px solid var(--sp-linea); border-radius:var(--sp-r-pildora);
  padding:13px 24px; transition:all var(--sp-transicion); color:var(--sp-tinta) }
.sp-test button:hover { border-color:var(--sp-tinta); box-shadow:var(--sp-sombra-chica) }
.sp-test .paso { display:none } .sp-test .paso[data-activo] { display:block }
.sp-test .avance { font-size:var(--sp-t1); color:var(--sp-tinta-3); font-weight:700;
  margin-bottom:var(--sp-e4) }
.sp-test .veredicto { font-size:var(--sp-t4); line-height:1.5 }
.sp-test .veredicto b { color:var(--sp-azul) }

/* Cifra de consecuencia (portada del costo) */
.sp-consecuencia { border-top:3px solid var(--sp-tinta); padding-top:var(--sp-e5) }
.sp-consecuencia .q { font-size:var(--sp-t4); font-weight:700; letter-spacing:-.02em;
  line-height:1.3 }
.sp-consecuencia p { margin-top:var(--sp-e3); font-size:var(--sp-t2); color:var(--sp-tinta-2);
  line-height:1.55 }
.sp-consecuencia .ind { display:inline-block; margin-top:var(--sp-e4); font-size:var(--sp-t1);
  color:var(--sp-azul); font-weight:700 }

/* Una sola industria a pantalla */
.sp-unica { display:grid; gap:var(--sp-e7) }
@media (min-width:1080px){ .sp-unica { grid-template-columns:1.4fr 1fr; gap:var(--sp-e9) } }
.sp-unica .tesis-grande { font-size:clamp(1.75rem,3.4vw,2.75rem); line-height:1.2;
  letter-spacing:-.03em; font-weight:700; text-wrap:balance }

/* Barra de comparación de las diez (sólo revisión) */
.sp-cmp { background:var(--sp-oscuro); color:#8FA0B8; font-size:var(--sp-t1) }
.sp-cmp .sp-wrap { display:flex; gap:var(--sp-e4); flex-wrap:wrap; align-items:center;
  padding-block:10px }
.sp-cmp a { color:#8FA0B8; font-weight:700 }
.sp-cmp a:hover, .sp-cmp a[aria-current="page"] { color:#fff }
.sp-cmp span { color:var(--sp-teal-claro); font-weight:700 }

/* --- portada editorial: parrilla de titulares --------------------------- */
.sp-editorial { display:grid; gap:0 var(--sp-e7) }
@media (min-width:680px){ .sp-editorial { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .sp-editorial { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.sp-editorial a { display:block; border-top:1px solid var(--sp-linea);
  padding:var(--sp-e5) 0 var(--sp-e7); color:inherit }
.sp-editorial .rubro { font-size:var(--sp-t1); letter-spacing:.08em;
  text-transform:uppercase; font-weight:700; color:var(--sp-azul) }
.sp-editorial h3 { font-size:var(--sp-t5); line-height:1.22; letter-spacing:-.02em;
  font-weight:700; color:var(--sp-tinta); margin-top:var(--sp-e3);
  text-wrap:balance; transition:color var(--sp-transicion) }
.sp-editorial .leer { display:inline-block; margin-top:var(--sp-e4);
  font-size:var(--sp-t2); font-weight:700; color:var(--sp-tinta-3);
  transition:color var(--sp-transicion) }
.sp-editorial a:hover h3, .sp-editorial a:hover .leer { color:var(--sp-azul) }
.sp-ed-lider .rubro-claro { font-size:var(--sp-t1); letter-spacing:.08em;
  text-transform:uppercase; font-weight:700; color:var(--sp-teal-claro) }

/* === capa 3 · suites ==================================================== */
.sp-suite-cab { display:grid; gap:var(--sp-e5); align-items:start }
@media (min-width:760px){ .sp-suite-cab { grid-template-columns:auto 1fr; gap:var(--sp-e6) } }
.sp-suite-marca svg { display:block; border-radius:18px }

/* indice de suites */
.sp-suites { display:grid; gap:var(--sp-e5) }
@media (min-width:700px){ .sp-suites { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1100px){ .sp-suites { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.sp-suite-t { display:flex; gap:var(--sp-e4); align-items:flex-start; padding:var(--sp-e5);
  border:var(--sp-borde); border-radius:var(--sp-r-grande); background:#fff; color:inherit;
  transition:box-shadow var(--sp-transicion), transform var(--sp-transicion) }
.sp-suite-t:hover { box-shadow:var(--sp-sombra); transform:translateY(-2px) }
.sp-suite-t .m { flex:0 0 auto }
.sp-suite-t .m svg { display:block; border-radius:14px }
.sp-suite-t .c { min-width:0 }
.sp-suite-t .fam { display:block; font-size:var(--sp-t1); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sp-azul) }
.sp-suite-t b { display:block; color:var(--sp-tinta); font-size:var(--sp-t4); line-height:1.25;
  letter-spacing:-.02em; margin-top:6px; text-wrap:balance }
.sp-suite-t .q { display:block; font-size:var(--sp-t2); color:var(--sp-tinta-2); margin-top:8px }
.sp-suite-t .ir { display:block; font-size:var(--sp-t2); font-weight:700; color:var(--sp-azul);
  margin-top:var(--sp-e4) }

/* procesos y subprocesos */
.sp-procesos { display:grid; gap:var(--sp-e5) }
@media (min-width:860px){ .sp-procesos { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.sp-proceso { border-top:3px solid var(--sp-tinta); padding-top:var(--sp-e5) }
.sp-proceso h3 { font-size:var(--sp-t4); font-weight:700; letter-spacing:-.02em; color:var(--sp-tinta) }
.sp-proceso ol { margin:var(--sp-e4) 0 0; padding:0; list-style:none; counter-reset:sp }
.sp-proceso li { counter-increment:sp; padding:12px 0 12px 30px; position:relative;
  border-bottom:1px solid var(--sp-linea-2) }
.sp-proceso li:last-child { border-bottom:0 }
.sp-proceso li::before { content:counter(sp,decimal-leading-zero); position:absolute; left:0; top:13px;
  font-size:var(--sp-t1); font-weight:700; color:var(--sp-tinta-3) }
.sp-proceso li.corte::before { color:var(--sp-azul) }
.sp-proceso li.corte b::after { content:'·  se arma a mano'; font-weight:500; color:var(--sp-azul);
  font-size:var(--sp-t1); margin-left:8px; letter-spacing:.02em }
.sp-proceso li b { display:block; color:var(--sp-tinta); font-size:var(--sp-t3) }
.sp-proceso li span { display:block; font-size:var(--sp-t2); color:var(--sp-tinta-2); margin-top:2px }

/* diagrama de los tres flujos */
.sp-diagrama { width:100%; height:auto; margin-top:var(--sp-e7); overflow:visible }
.sp-diagrama .d-tit { font:700 15px var(--sp-fuente); fill:var(--sp-tinta); letter-spacing:-.01em }
.sp-diagrama .d-pie { font:500 12px var(--sp-fuente); fill:var(--sp-tinta-3) }
.sp-diagrama .d-carril { fill:var(--sp-seccion) }
.sp-diagrama .d-carril-tit { font:700 13px var(--sp-fuente); fill:var(--sp-tinta) }
.sp-diagrama .d-paso { fill:#fff; stroke:var(--sp-linea); stroke-width:1.5 }
.sp-diagrama .d-paso.d-corte { stroke:var(--sp-azul); stroke-width:2 }
.sp-diagrama .d-paso-tit { font:700 12px var(--sp-fuente); fill:var(--sp-tinta) }
.sp-diagrama .d-paso-det { font:500 11px var(--sp-fuente); fill:var(--sp-tinta-2) }
.sp-diagrama .d-punto { fill:var(--sp-azul) }
.sp-diagrama .d-flecha { stroke:var(--sp-tinta-3); stroke-width:1.5; fill:none }

/* matrices */
.sp-tabla-scroll { overflow-x:auto; margin-top:var(--sp-e5) }
.sp-matriz { border-collapse:collapse; width:100%; min-width:560px; font-size:var(--sp-t2) }
.sp-matriz th { text-align:left; font-size:var(--sp-t1); letter-spacing:.08em; text-transform:uppercase;
  color:var(--sp-tinta-3); font-weight:700; padding:0 var(--sp-e5) var(--sp-e3) 0;
  border-bottom:2px solid var(--sp-linea) }
.sp-matriz td { padding:var(--sp-e4) var(--sp-e5) var(--sp-e4) 0;
  border-bottom:1px solid var(--sp-linea-2); vertical-align:top; color:var(--sp-tinta-2) }
.sp-matriz td:first-child { color:var(--sp-tinta); font-weight:700 }
.sp-matriz tr.destacado td { background:var(--sp-seccion) }
.sp-chip { display:inline-block; margin-left:10px; background:var(--sp-azul); color:#fff;
  border-radius:999px; padding:2px 10px; font-size:var(--sp-t0); font-weight:700;
  letter-spacing:.04em; vertical-align:middle }

/* modulos */
.sp-modulos { display:grid; gap:var(--sp-e5) }
@media (min-width:700px){ .sp-modulos { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .sp-modulos { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.sp-modulo { border:var(--sp-borde); border-radius:var(--sp-r-medio); padding:var(--sp-e5);
  background:#fff }
.sp-modulo.critico { border-color:var(--sp-azul) }
.sp-modulo h3 { font-size:var(--sp-t4); font-weight:700; letter-spacing:-.02em; color:var(--sp-tinta);
  text-wrap:balance }
.sp-modulo .que { font-size:var(--sp-t2); color:var(--sp-tinta-2); margin-top:var(--sp-e3) }
.sp-modulo .fuga { font-size:var(--sp-t2); color:var(--sp-tinta); margin-top:var(--sp-e4);
  padding-top:var(--sp-e4); border-top:1px solid var(--sp-linea-2) }
.sp-modulo .fuga span { display:block; font-size:var(--sp-t1); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sp-azul); margin-bottom:4px }

/* roles con entrada de un clic */
.sp-roles { display:grid; gap:var(--sp-e4) }
@media (min-width:700px){ .sp-roles { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .sp-roles { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.sp-rol { display:block; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--sp-r-medio); padding:var(--sp-e5); color:#C7D2E1;
  transition:background var(--sp-transicion), border-color var(--sp-transicion) }
.sp-rol:hover { background:rgba(255,255,255,.10); border-color:var(--sp-teal-claro) }
.sp-rol .r { font-size:var(--sp-t1); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sp-teal-claro) }
.sp-rol b { display:block; color:#fff; font-size:var(--sp-t4); letter-spacing:-.02em; margin-top:6px }
.sp-rol .t { display:block; font-size:var(--sp-t2); margin-top:6px }
.sp-rol .ir { display:block; font-size:var(--sp-t2); font-weight:700; color:#fff;
  margin-top:var(--sp-e4) }

/* descargas de brochures */
.sp-descargas { display:grid; gap:0; margin-top:var(--sp-e6) }
.sp-descarga-fila { display:flex; gap:var(--sp-e5); align-items:center; padding:var(--sp-e5) 0;
  border-bottom:1px solid var(--sp-linea); color:inherit }
.sp-descarga-fila:last-child { border-bottom:0 }
.sp-descarga-fila:hover b { color:var(--sp-azul) }
.sp-descarga-fila .m { flex:0 0 auto }
.sp-descarga-fila .m svg { display:block; border-radius:12px }
.sp-descarga-fila .c { flex:1; min-width:0 }
.sp-descarga-fila .fam { display:block; font-size:var(--sp-t1); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sp-azul) }
.sp-descarga-fila b { display:block; color:var(--sp-tinta); font-size:var(--sp-t4);
  letter-spacing:-.02em; margin-top:4px; transition:color var(--sp-transicion) }
.sp-descarga-fila .q { display:block; font-size:var(--sp-t2); color:var(--sp-tinta-2); margin-top:4px }
.sp-descarga-fila .d { flex:0 0 auto; font-size:var(--sp-t2); font-weight:700; color:var(--sp-azul);
  white-space:nowrap }
@media (max-width:640px){
  .sp-descarga-fila { flex-wrap:wrap; gap:var(--sp-e4) }
  .sp-descarga-fila .d { width:100% }
}

/* la cita heredaba tinta oscura sobre fondo oscuro */
.sp-oscuro .sp-cita { color:#fff }
.sp-oscuro .sp-subtitulo { color:#fff }
.sp-oscuro .sp-matriz td:first-child { color:#fff }
.sp-oscuro .sp-matriz td { color:#C7D2E1; border-bottom-color:rgba(255,255,255,.10) }
.sp-oscuro .sp-matriz th { color:#8FA0B8; border-bottom-color:rgba(255,255,255,.18) }
.sp-subtitulo + .sp-tabla-scroll { margin-top:var(--sp-e4) }

/* formulario de varios campos (la sp-forma corta es de un solo correo) */
.sp-forma-larga { display:grid; gap:6px; max-width:420px }
.sp-forma-larga label { font-size:var(--sp-t1); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sp-tinta-3); margin-top:var(--sp-e4) }
.sp-forma-larga label:first-of-type { margin-top:0 }
.sp-forma-larga input, .sp-forma-larga select { font:inherit; font-size:var(--sp-t2);
  padding:13px 16px; border:var(--sp-borde); border-radius:12px; background:#fff;
  color:var(--sp-tinta); width:100%; max-width:100% }
.sp-forma-larga input:focus-visible, .sp-forma-larga select:focus-visible {
  outline:2px solid var(--sp-azul); outline-offset:2px }
.sp-forma-larga button { justify-self:start; font:inherit; font-size:var(--sp-t2);
  font-weight:700; cursor:pointer; background:var(--sp-tinta); color:#fff; border:0;
  border-radius:var(--sp-r-pildora); padding:14px 26px;
  transition:background var(--sp-transicion) }
.sp-forma-larga button:hover { background:#16243C }
.sp-forma-larga button:disabled { background:var(--sp-teal); cursor:default }

/* la fila de descarga ofrece los dos formatos */
.sp-descarga-fila .c a { color:inherit }
.sp-descarga-fila .c a:hover b { color:var(--sp-azul) }
.sp-descarga-fila .d { display:flex; gap:var(--sp-e4) }
.sp-descarga-fila .d a { color:var(--sp-azul); font-weight:700 }
.sp-descarga-fila .d a:hover { text-decoration:underline }

/* el hero y la seccion que le sigue no suman dos veces el mismo aire */
.sp-hero { padding-bottom:var(--sp-e7) }
.sp-hero + .sp-seccion { padding-top:var(--sp-e7) }
.sp-hero + .sp-seccion > .sp-wrap > .sp-descargas:first-child,
.sp-hero + .sp-seccion > .sp-wrap > .sp-suites:first-child,
.sp-hero + .sp-seccion > .sp-wrap > .sp-sectores:first-child { margin-top:0 }

/* dos entradillas seguidas son dos párrafos, no un bloque */
.sp-entradilla + .sp-entradilla { margin-top:var(--sp-e5) }

/* === cabecera de sección editorial ======================================
   El patrón de una firma de consultoría: filete, rúbrica corta, titular
   corto a la izquierda y la bajada a la derecha. Nada de eslóganes dentro
   de una píldora. */
.sp-masthead { border-top:2px solid var(--sp-tinta); padding-top:var(--sp-e5);
  display:grid; gap:var(--sp-e5) }
@media (min-width:900px){
  .sp-masthead { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:var(--sp-e8); align-items:end }
}
.sp-masthead .rubro { font-size:var(--sp-t1); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sp-azul) }
.sp-masthead h2 { font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1; letter-spacing:-.045em;
  font-weight:800; color:var(--sp-tinta); margin-top:var(--sp-e4); text-wrap:balance }
.sp-masthead .dek { font-size:var(--sp-t4); line-height:1.5; color:var(--sp-tinta-2);
  max-width:46ch }
.sp-masthead .dek strong { color:var(--sp-tinta); font-weight:700 }
.sp-oscuro .sp-masthead { border-top-color:rgba(255,255,255,.28) }
.sp-oscuro .sp-masthead h2 { color:#fff }
.sp-oscuro .sp-masthead .rubro { color:var(--sp-teal-claro) }
.sp-oscuro .sp-masthead .dek { color:#C7D2E1 }
.sp-oscuro .sp-masthead .dek strong { color:#fff }

/* === contención de ancho en teléfono ====================================
   Una rejilla de una columna toma como mínimo el min-content de su
   contenido, y eso ensancha la página entera cuando algo dentro no puede
   partirse. Se fija el mínimo en cero y se quita el margen del body. */
body { margin:0 }
.sp, .sp-wrap { max-width:100% }
.sp-sectores, .sp-suites, .sp-editorial, .sp-modulos, .sp-roles, .sp-procesos,
.sp-mitades, .sp-tercios, .sp-mayor-menor, .sp-menor-mayor, .sp-masthead,
.sp-versus, .sp-familias, .sp-pasos, .sp-descargas, .sp-pie-cols, .sp-caminos {
  grid-template-columns:minmax(0,1fr) }
@media (min-width:680px){ .sp-editorial { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .sp-editorial { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:700px){
  .sp-suites, .sp-modulos, .sp-roles { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sp-pasos { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (min-width:1080px){
  .sp-modulos, .sp-roles { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .sp-pasos { grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media (min-width:1100px){ .sp-suites { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:860px){ .sp-procesos { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:900px){
  .sp-pie-cols { grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) }
  .sp-versus { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sp-masthead { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }
}
@media (min-width:760px){
  .sp-mitades, .sp-tercios, .sp-mayor-menor, .sp-menor-mayor { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (min-width:1000px){
  .sp-tercios { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .sp-mayor-menor { grid-template-columns:1.4fr 1fr }
  .sp-menor-mayor { grid-template-columns:1fr 1.4fr }
}
.sp-sectores > *, .sp-suites > *, .sp-editorial > *, .sp-modulos > *, .sp-roles > *,
.sp-procesos > *, .sp-mitades > *, .sp-tercios > *, .sp-masthead > * { min-width:0 }
.sp-nav-fila, .sp-nav-enlaces, .sp-pie-cols > * { min-width:0; max-width:100% }

/* la barra de navegación en teléfono: dos filas y el botón a lo ancho */
.sp-nav-enlaces { flex:1 1 auto; min-width:0 }
@media (max-width:820px){
  .sp-nav-fila { gap:var(--sp-e3) var(--sp-e4); padding-block:var(--sp-e3); min-height:0 }
  .sp-nav-enlaces { width:100%; margin-left:0; gap:6px var(--sp-e5);
    row-gap:6px; align-items:center }
  .sp-nav-enlaces > a { font-size:var(--sp-t2) }
  .sp-nav-enlaces .sp-nav-cta { width:100%; text-align:center; margin-top:4px }
}

/* las utilidades de espacio deben ganar sobre el margen propio del componente */
.sp .sp-e3 { margin-top:var(--sp-e3) }
.sp .sp-e4 { margin-top:var(--sp-e4) }
.sp .sp-e5 { margin-top:var(--sp-e5) }
.sp .sp-e6 { margin-top:var(--sp-e6) }
.sp .sp-e7 { margin-top:var(--sp-e7) }
.sp .sp-e8 { margin-top:var(--sp-e8) }

/* === el archivo de análisis ============================================ */
.sp-articulo { max-width:760px }
.sp-articulo .sp-texto { font-size:var(--sp-t3); line-height:1.65; color:var(--sp-tinta-2) }
.sp-articulo .sp-texto strong { color:var(--sp-tinta) }
.sp-destacado { border-left:3px solid var(--sp-azul); background:var(--sp-seccion);
  border-radius:0 var(--sp-r-medio) var(--sp-r-medio) 0; padding:var(--sp-e5) var(--sp-e6);
  margin-top:var(--sp-e6) }
.sp-destacado p { font-size:var(--sp-t4); line-height:1.5; color:var(--sp-tinta); font-weight:600 }
.sp-destacado .sp-antetitulo { margin-bottom:var(--sp-e3) }
.sp-lista-num { list-style:none; margin:0; padding:0; counter-reset:ln }
.sp-lista-num li { counter-increment:ln; padding:var(--sp-e5) 0 var(--sp-e5) 44px;
  position:relative; border-bottom:1px solid var(--sp-linea-2); font-size:var(--sp-t3);
  line-height:1.55; color:var(--sp-tinta-2) }
.sp-lista-num li::before { content:counter(ln,decimal-leading-zero); position:absolute;
  left:0; top:calc(var(--sp-e5) + 2px); font-size:var(--sp-t1); font-weight:700;
  color:var(--sp-azul) }
.sp-lista-num li b { color:var(--sp-tinta) }
.sp-tension { border-top:3px solid var(--sp-tinta); padding-top:var(--sp-e4);
  margin-top:var(--sp-e6) }
.sp-tension h3 { font-size:var(--sp-t4); letter-spacing:-.02em; color:var(--sp-tinta) }
.sp-tension p { font-size:var(--sp-t2); color:var(--sp-tinta-2); margin-top:var(--sp-e3) }
.sp-tension p span { font-weight:700; color:var(--sp-tinta-3); text-transform:uppercase;
  font-size:var(--sp-t1); letter-spacing:.06em }

/* bloque de relación al pie de cada pieza */
.sp-relacion { display:grid; gap:var(--sp-e7); border-top:2px solid var(--sp-tinta);
  padding-top:var(--sp-e6) }
@media (min-width:820px){ .sp-relacion { grid-template-columns:1fr 1fr } }
.sp-rel-lista { list-style:none; margin:var(--sp-e4) 0 0; padding:0 }
.sp-rel-lista li { border-bottom:1px solid var(--sp-linea-2) }
.sp-rel-lista a { display:block; padding:var(--sp-e4) 0; color:inherit }
.sp-rel-lista a span { display:block; font-size:var(--sp-t1); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--sp-azul) }
.sp-rel-lista a b { color:var(--sp-tinta); font-size:var(--sp-t3); font-weight:700 }
.sp-rel-lista a:hover b { color:var(--sp-azul) }

/* hub de industria */
.sp-piezas { display:grid; gap:var(--sp-e5) }
@media (min-width:760px){ .sp-piezas { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1100px){ .sp-piezas { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.sp-pieza { display:block; border:var(--sp-borde); border-radius:var(--sp-r-medio);
  background:#fff; padding:var(--sp-e5); color:inherit;
  transition:box-shadow var(--sp-transicion), transform var(--sp-transicion) }
.sp-pieza:hover { box-shadow:var(--sp-sombra); transform:translateY(-2px) }
.sp-pieza .t { font-size:var(--sp-t1); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sp-azul) }
.sp-pieza b { display:block; color:var(--sp-tinta); font-size:var(--sp-t4); line-height:1.3;
  letter-spacing:-.02em; margin-top:var(--sp-e3); text-wrap:balance }
.sp-pieza .d { display:block; font-size:var(--sp-t2); color:var(--sp-tinta-2);
  margin-top:var(--sp-e3) }

/* índice del archivo */
.sp-archivo { display:grid; gap:0 }
.sp-arch { display:flex; gap:var(--sp-e5); align-items:flex-start;
  padding:var(--sp-e5) 0; border-bottom:1px solid var(--sp-linea) }
.sp-arch:last-child { border-bottom:0 }
.sp-arch .m { flex:0 0 auto } .sp-arch .m svg { display:block; border-radius:10px }
.sp-arch .c { min-width:0 }
.sp-arch .tit b { color:var(--sp-tinta); font-size:var(--sp-t4); letter-spacing:-.02em }
.sp-arch .tit:hover b { color:var(--sp-azul) }
.sp-arch .enl { font-size:var(--sp-t2); color:var(--sp-tinta-3); margin-top:var(--sp-e3);
  line-height:1.9 }
.sp-arch .enl a { color:var(--sp-tinta-2); border-bottom:1px solid var(--sp-linea) }
.sp-arch .enl a:hover { color:var(--sp-azul); border-bottom-color:var(--sp-azul) }

/* referencias y subtítulos de artículo */
.sp-h2-art { font-size:var(--sp-t5); font-weight:800; letter-spacing:-.02em;
  color:var(--sp-tinta); text-wrap:balance }
.sp-articulo sup { line-height:0 }
.sp-articulo sup a { color:var(--sp-azul); font-weight:700; font-size:.72em;
  border-bottom:0 }
.sp-refs { border-top:2px solid var(--sp-tinta); padding-top:var(--sp-e5) }
.sp-refs ol { margin:var(--sp-e4) 0 0; padding-left:22px }
.sp-refs li { font-size:var(--sp-t2); color:var(--sp-tinta-2); padding:6px 0;
  line-height:1.55 }
.sp-refs li::marker { color:var(--sp-azul); font-weight:700 }
.sp-refs li:target { background:var(--sp-seccion); border-radius:8px;
  padding-left:8px }
.sp-refs em { font-style:italic }

/* ---------------------------------------------- contrato de pagina v4 */
.sp .sp-brief{margin:0 0 2.2rem;padding:1.5rem 1.7rem;border-left:3px solid var(--sp-azul);
  background:var(--sp-seccion);border-radius:0 10px 10px 0}
.sp .sp-brief-t{margin:0 0 .7rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--sp-azul)}
.sp .sp-brief ul{margin:0;padding-left:1.1rem;display:grid;gap:.55rem}
.sp .sp-brief li{font-size:1.02rem;line-height:1.5;color:var(--sp-tinta)}
.sp .sp-indice{margin:0 0 2.4rem;padding:1.2rem 0;border-top:1px solid var(--sp-linea);
  border-bottom:1px solid var(--sp-linea)}
.sp .sp-indice p{margin:0 0 .6rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--sp-tinta-3)}
.sp .sp-indice ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.sp .sp-indice a{font-size:.95rem;color:var(--sp-azul);text-decoration:none;
  border-bottom:1px solid transparent}
.sp .sp-indice a:hover{border-bottom-color:var(--sp-azul)}
.sp .sp-miga{font-size:.8rem;color:var(--sp-tinta-3);margin:0 0 1.2rem}
.sp .sp-miga a{color:var(--sp-tinta-3);text-decoration:none}
.sp .sp-miga a:hover{color:var(--sp-azul)}
.sp .sp-miga span{opacity:.5;margin:0 .45rem}
.sp .sp-v4-cifra{margin:2rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--sp-teal)}
.sp .sp-v4-cifra b{display:block;font-size:clamp(2rem,5vw,3rem);line-height:1;font-weight:800;
  letter-spacing:-.02em;color:var(--sp-oscuro)}
.sp .sp-v4-cifra figcaption{margin-top:.6rem}
.sp .sp-v4-cifra figcaption span{display:block;font-size:1rem;color:var(--sp-tinta);max-width:44ch}
.sp .sp-v4-cifra figcaption em{display:block;margin-top:.35rem;font-size:.78rem;font-style:normal;
  color:var(--sp-tinta-3)}
.sp .sp-faq{margin:3rem 0 0}
.sp .sp-faq-i{border-top:1px solid var(--sp-linea);padding:.1rem 0}
.sp .sp-faq-i:last-of-type{border-bottom:1px solid var(--sp-linea)}
.sp .sp-faq-i summary{cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;
  font-weight:600;font-size:1.05rem;color:var(--sp-oscuro);position:relative}
.sp .sp-faq-i summary::-webkit-details-marker{display:none}
.sp .sp-faq-i summary::after{content:"+";position:absolute;right:.2rem;top:.95rem;
  font-size:1.3rem;font-weight:400;color:var(--sp-azul)}
.sp .sp-faq-i[open] summary::after{content:"\2013"}
.sp .sp-faq-i>div{padding:0 0 1.2rem;max-width:68ch}
.sp .sp-faq-i>div p{margin:0 0 .7rem;font-size:1rem;line-height:1.62;color:var(--sp-tinta)}
.sp .sp-v4-descarga{margin:2.6rem 0;padding:1.4rem 1.6rem;display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;background:var(--sp-oscuro);border-radius:12px}
.sp .sp-v4-descarga .sp-antetitulo{color:rgba(255,255,255,.6)}
.sp .sp-v4-descarga-t{margin:.2rem 0 .2rem;color:#fff;font-weight:600;font-size:1.05rem;max-width:44ch}
.sp .sp-v4-descarga .sp-fuente{color:rgba(255,255,255,.55);margin:0}
.sp .sp-firma{margin:2.6rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--sp-linea)}
.sp .sp-firma-t{margin:.3rem 0 .5rem;font-weight:600;color:var(--sp-oscuro);max-width:60ch}
.sp .sp-firma .sp-fuente{max-width:76ch}
@media (max-width:640px){
  .sp .sp-indice ol{flex-direction:column;gap:.5rem}
  .sp .sp-v4-descarga{flex-direction:column;align-items:flex-start}
}

/* indice: marcado propio, que no hereda el ancho de las listas del articulo */
.sp .sp-indice{margin:0 0 2.4rem}
.sp .sp-indice ol{display:block;margin:0;padding:0;list-style:none}
.sp .sp-indice ol li{display:inline-block;vertical-align:top;width:auto;max-width:34ch;
  margin:0 1.6rem .5rem 0;padding:0;border:0;counter-increment:none}
.sp .sp-indice ol li::before{content:none}
.sp .sp-indice ol li a{white-space:normal;display:inline}
@media (max-width:640px){
  .sp .sp-indice ol li{display:block;max-width:none;margin:0 0 .5rem}
}

.sp .sp-v4-descarga .sp-antetitulo{background:transparent;border:0;padding:0;margin:0 0 .35rem;
  color:rgba(255,255,255,.62)}

/* ------------------------------------------------ capturas de la capa sistemas */
.sp .sp-captura{margin:2.2rem 0;border:1px solid var(--sp-linea);border-radius:12px;
  overflow:hidden;background:var(--sp-seccion)}
.sp .sp-captura img{display:block;width:100%;height:auto}
.sp .sp-captura figcaption{padding:.85rem 1.1rem;font-size:.9rem;line-height:1.5;
  color:var(--sp-tinta-3);display:flex;gap:.9rem;justify-content:space-between;
  align-items:baseline;flex-wrap:wrap;border-top:1px solid var(--sp-linea)}
.sp .sp-captura-marca{flex:0 0 auto;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--sp-tinta-3);
  border:1px solid var(--sp-linea);border-radius:999px;padding:.2rem .6rem}
.sp-oscuro .sp-captura{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.sp-oscuro .sp-captura figcaption{color:#8FA0B8;border-top-color:rgba(255,255,255,.14)}

/* la cifra dura de las fichas de industria: si no se ve, no es contundente */
.sp .sp-capa .sp-cifra-dura{display:block;font-size:clamp(2.1rem,4.2vw,3.1rem);
  line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--sp-oscuro);
  margin:0 0 .55rem}
.sp .sp-capa .sp-cifra-dura + .sp-subtitulo{margin-top:0}

/* El catalogo fisico del diccionario: va plegado porque es para el lector que
   audita, no para el que decide. Abierto de origen tapaba la pagina entera. */
.sp .sp-catalogo{border:1px solid var(--sp-linea);border-radius:12px;padding:0 1.4rem;margin:1.4rem 0}
.sp .sp-catalogo summary{cursor:pointer;padding:1.1rem 0;font-weight:600;color:var(--sp-oscuro)}
.sp .sp-catalogo[open] summary{border-bottom:1px solid var(--sp-linea);margin-bottom:1rem}
.sp .sp-catalogo table{font-size:.86rem}
.sp .sp-catalogo code{font-size:.84rem;background:var(--sp-seccion);padding:.1rem .35rem;border-radius:4px}