/* Solutions XBRL · estilos del sitio
   Colores tomados del Validador XBRL de Solutions (index.html del validador) */
:root {
  --tinta: #170333;
  --tinta-2: #4a3d63;
  --suave: #6b6182;
  --fondo: #f6f5fa;
  --papel: #ffffff;
  --linea: #e4e0ee;
  --linea-2: #cfc8e0;
  --magenta: #d60b85;
  --violeta: #794aad;
  --azul: #0699df;
  --grad: linear-gradient(90deg, var(--magenta), var(--violeta) 55%, var(--azul));
  --noche: #0d2a4f;
  --noche-2: #133763;
  --noche-borde: #23497a;
  --cielo: #9cc3f0;
  --cielo-texto: #c8d9ef;
  --ok: #0f7b4a;
  --ok-fondo: #e6f5ee;
  --aviso: #9a5b00;
  --titulos: 'Sora', system-ui, sans-serif;
  --texto: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --ancho: 1200px;
  --radio: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--texto);
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violeta); }
a:hover { color: var(--tinta); }
h1, h2, h3 { font-family: var(--titulos); margin: 0; }
p { margin: 0; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: 24px; }
.franja { height: 4px; background: var(--grad); }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 16px; z-index: 100; background: var(--papel); padding: 8px 12px; border-radius: 8px; }
.eyebrow { font-family: var(--mono); font-size: 14px; color: var(--violeta); margin-bottom: 12px; }
.seccion { padding-block: 96px; }
.seccion--blanca { background: var(--papel); }
.titulo-seccion { font-weight: 700; font-size: clamp(30px, 4vw, 40px); line-height: 1.15; letter-spacing: -0.01em; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border-radius: 12px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  border: 1px solid transparent; transition: transform .15s, background .15s;
}
.boton:hover { transform: translateY(-1px); }
.boton--primario { background: var(--tinta); color: #fff; }
.boton--primario:hover { background: #2a0e55; color: #fff; }
.boton--secundario { background: var(--papel); color: var(--tinta); border-color: var(--linea-2); }
.boton--secundario:hover { border-color: var(--violeta); color: var(--tinta); }
.boton--claro { background: #fff; color: var(--tinta); }
.boton--borde-claro { color: #fff; border-color: #5b4a7a; }
.boton--borde-claro:hover { color: #fff; border-color: #fff; }
.boton--chico { min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Encabezado */
.encabezado { background: var(--papel); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 50; }
.encabezado__fila { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.encabezado__logo img { height: 44px; width: auto; }
.menu { display: flex; gap: 22px; flex: 1; justify-content: center; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--magenta); }
.encabezado__acciones { display: flex; gap: 10px; }
.menu-boton { display: none; margin-left: auto; background: none; border: 1px solid var(--linea); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; color: var(--tinta); }

@media (max-width: 1000px) {
  .menu-boton { display: inline-flex; align-items: center; justify-content: center; }
  .menu, .encabezado__acciones { display: none; }
  .encabezado__fila { flex-wrap: wrap; }
  .encabezado.abierto .menu { display: flex; flex-direction: column; gap: 0; width: 100%; order: 3; }
  .encabezado.abierto .menu a { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .encabezado.abierto .encabezado__acciones { display: flex; width: 100%; order: 4; padding-bottom: 8px; }
}

/* Portada */
.portada { background: var(--papel); }
.portada__fila { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-block: 56px 24px; }
.portada__texto { flex: 1 1 480px; min-width: 0; }
.portada h1 { font-weight: 700; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 20px; }
.portada__bajada { font-size: 18px; line-height: 1.6; color: var(--tinta-2); max-width: 560px; margin-bottom: 32px; }
.portada__visual { flex: 1 1 420px; min-width: 0; padding-bottom: 40px; }
.codigo {
  background: var(--tinta); border-radius: var(--radio); padding: 24px 24px 28px; margin-right: 56px;
  font-family: var(--mono); font-size: 13px; line-height: 1.75; color: #d9d2ea; overflow-x: auto;
}
.codigo .t { color: #a99bc4; } .codigo .c { color: #f36bb6; } .codigo .v { color: #7cc8f2; } .codigo .d { color: #fff; }
.codigo .i1 { padding-left: 18px; } .codigo .i2 { padding-left: 36px; }
.resultado {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 22px 24px; margin: -48px 0 0 64px; position: relative; box-shadow: 0 18px 40px rgba(23,3,51,.10);
}
.resultado__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.resultado__archivo { font-size: 13px; color: var(--suave); }
.pildora { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.pildora--ok { background: var(--ok-fondo); color: var(--ok); }
.resultado ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--tinta-2); }
.resultado li { display: flex; gap: 10px; }
.si { color: var(--ok); } .ojo { color: var(--aviso); font-weight: 600; }
@media (max-width: 560px) { .codigo { margin-right: 0; } .resultado { margin: -32px 0 0 16px; } }

/* Recorrido */
.recorrido { border-block: 1px solid var(--linea); }
.recorrido ol { list-style: none; margin: 0; padding-block: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.recorrido li { display: flex; flex-direction: column; gap: 6px; }
.recorrido .num { font-family: var(--mono); font-size: 13px; }
.recorrido li:nth-child(1) .num { color: #d60b85; } .recorrido li:nth-child(2) .num { color: #b0218f; }
.recorrido li:nth-child(3) .num { color: #794aad; } .recorrido li:nth-child(4) .num { color: #4a6fc2; }
.recorrido li:nth-child(5) .num { color: #0679b8; }
.recorrido strong { font-family: var(--titulos); font-weight: 600; font-size: 17px; }
.recorrido span:last-child { font-size: 14px; color: var(--tinta-2); }
@media (max-width: 800px) { .recorrido ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Roles */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.rol { border: 1px solid var(--linea); border-radius: var(--radio); padding: 32px; display: flex; flex-direction: column; gap: 16px; background: var(--papel); }
.rol h3 { font-weight: 600; font-size: 22px; line-height: 1.3; }
.rol ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; color: var(--tinta-2); }
.rol a { margin-top: auto; font-weight: 600; font-size: 15px; }
.etiqueta { align-self: flex-start; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.etiqueta--magenta { background: #fbe6f2; color: #9c0761; }
.etiqueta--violeta { background: #efe8f7; color: #5a3488; }
.etiqueta--azul { background: #e3f3fc; color: #04628f; }
@media (max-width: 900px) { .roles { grid-template-columns: 1fr; } }

/* Xéfiro */
.xefiro { background: var(--noche); color: #fff; padding-block: 104px; }
.xefiro__cabeza { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; margin-bottom: 64px; }
.xefiro__cabeza img { width: 168px; height: 168px; flex: 0 0 auto; }
.xefiro__cabeza > div { flex: 1 1 520px; min-width: 0; }
.xefiro .eyebrow { color: var(--cielo); }
.xefiro h2 { font-weight: 700; font-size: 48px; letter-spacing: .04em; margin-bottom: 16px; }
.xefiro__bajada { font-size: 19px; line-height: 1.6; color: #dbe7f7; max-width: 640px; }
.xefiro h3 { font-family: var(--texto); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cielo); margin-bottom: 20px; }
.modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 48px; }
.modulo {
  display: flex; gap: 18px; align-items: center; padding: 20px; border-radius: var(--radio);
  background: var(--noche-2); border: 1px solid var(--noche-borde); text-decoration: none; color: #fff;
  transition: border-color .15s, transform .15s;
}
.modulo:hover { border-color: var(--cielo); color: #fff; transform: translateY(-2px); }
.modulo img { width: 84px; height: 84px; flex: 0 0 auto; margin: -16px 0 -8px -8px; }
.modulo strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: 19px; }
.modulo span { display: block; font-size: 14px; line-height: 1.45; color: var(--cielo-texto); margin-top: 4px; }
@media (max-width: 900px) { .modulos { grid-template-columns: 1fr; } }

/* Herramientas */
.cabeza-doble { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.cabeza-doble > div { flex: 1 1 520px; min-width: 0; }
.cabeza-doble > p { flex: 1 1 360px; font-size: 16px; line-height: 1.6; color: var(--tinta-2); }
.herramientas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.herramienta {
  display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--radio);
  background: var(--papel); border: 1px solid var(--linea); text-decoration: none; color: var(--tinta);
  transition: border-color .15s;
}
.herramienta:hover { border-color: var(--violeta); color: var(--tinta); }
.herramienta strong { font-family: var(--titulos); font-weight: 600; font-size: 19px; }
.herramienta span { font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
.herramienta .accion { margin-top: auto; font-weight: 600; color: var(--violeta); }
.herramienta .pronto { margin-top: auto; font-size: 14px; color: var(--suave); }
@media (max-width: 1000px) { .herramientas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .herramientas { grid-template-columns: 1fr; } }

/* Sostenibilidad */
.sost { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.sost > div:first-child { flex: 1 1 520px; min-width: 0; }
.sost .eyebrow { color: var(--ok); }
.sost__texto { font-size: 17px; line-height: 1.65; color: var(--tinta-2); margin: 20px 0 28px; }
.sost__cajas { flex: 1 1 400px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sost__caja { padding: 24px; border-radius: var(--radio); background: #eef7f2; }
.sost__caja strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: 17px; color: #0b5a37; margin-bottom: 8px; }
.sost__caja span { font-size: 14px; color: #2f4a3c; }

/* Nosotros */
.nosotros { border-top: 1px solid var(--linea); }
.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.pilar { border-top: 2px solid; padding-top: 20px; }
.pilar:nth-child(1) { border-color: var(--magenta); } .pilar:nth-child(2) { border-color: var(--violeta); } .pilar:nth-child(3) { border-color: var(--azul); }
.pilar strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: 20px; margin-bottom: 10px; }
.pilar p { font-size: 15px; line-height: 1.6; color: var(--tinta-2); }
@media (max-width: 800px) { .pilares { grid-template-columns: 1fr; } }

/* Llamado */
.llamado { border-radius: 20px; background: var(--tinta); padding: 56px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.llamado > div:first-child { flex: 1 1 520px; min-width: 0; }
.llamado h2 { font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; color: #fff; margin-bottom: 12px; }
.llamado p { font-size: 17px; color: #d9d2ea; }
@media (max-width: 560px) { .llamado { padding: 32px 24px; } }

/* Pie */
.pie { background: var(--papel); border-top: 1px solid var(--linea); font-size: 15px; }
.pie__columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 56px 32px; }
.pie__columnas > div { display: flex; flex-direction: column; gap: 10px; }
.pie__columnas img { height: 40px; width: auto; align-self: flex-start; margin-bottom: 4px; }
.pie__columnas p { color: var(--tinta-2); line-height: 1.6; }
.pie__titulo { font-weight: 600; }
.pie a { color: var(--tinta-2); text-decoration: none; }
.pie a:hover { color: var(--violeta); text-decoration: underline; }
.pie__base { border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 32px; font-size: 14px; color: var(--suave); }
.pie__base a { color: var(--suave); }
@media (max-width: 800px) { .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pie__columnas { grid-template-columns: 1fr; } }
.pie a { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ===== Página de inicio v2: los dos lados ===== */
.lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.lado { border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.lado--pide { background: #fbe6f2; }
.lado--entrega { background: #e3f3fc; }
.lado__tag { font-family: var(--mono); font-size: 15px; }
.lado--pide .lado__tag { color: #9c0761; }
.lado--entrega .lado__tag { color: #04628f; }
.lado h3 { font-size: 26px; line-height: 1.25; }
.lado p:not(.lado__tag) { font-size: 17px; line-height: 1.6; color: var(--tinta-2); margin-bottom: 8px; }
@media (max-width: 800px) { .lados { grid-template-columns: 1fr; } .lado { padding: 28px; } }

.formas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.forma { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); transition: border-color .15s, transform .15s; }
.forma:hover { border-color: var(--violeta); color: var(--tinta); transform: translateY(-2px); }
.forma strong { font-family: var(--titulos); font-weight: 600; font-size: 22px; }
.forma span { font-size: 16px; line-height: 1.55; color: var(--tinta-2); }
.forma .accion { margin-top: auto; font-weight: 600; color: var(--violeta); }
.forma--xefiro { background: var(--noche); border-color: var(--noche); color: #fff; }
.forma--xefiro:hover { border-color: var(--cielo); color: #fff; }
.forma--xefiro img { width: 96px; height: 96px; margin: -56px 0 0 -8px; }
.forma--xefiro span { color: var(--cielo-texto); }
.forma--xefiro .accion { color: #fff; }
@media (max-width: 900px) { .formas { grid-template-columns: 1fr; } .forma--xefiro img { margin-top: 0; } }

/* ===== Portada: escena formulario <-> dato ===== */
.escena { flex: 1 1 500px; min-width: 0; }
.escena svg { width: 100%; height: auto; display: block; overflow: visible; }
.e-tag { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.e-titulo { font-family: var(--titulos); font-weight: 600; font-size: 18px; }
.e-label { font-family: var(--texto); font-size: 14px; }
.e-celda { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.e-valor { font-family: var(--titulos); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; }
.e-chip text { font-family: var(--mono); font-size: 12px; }
.e-ok { font-family: var(--texto); font-weight: 600; font-size: 13px; }
.e-flecha { font-family: var(--texto); font-size: 14px; font-weight: 500; }
.escena .cambia { transition: opacity .35s; }
.escena .oculto { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .e-punto { display: none; } }
.e-code text { font-family: var(--mono); font-size: 13px; }
.e-dato { font-size: 15px; font-weight: 500; }
.e-res { font-family: var(--texto); font-size: 14px; }
.e-res2 { font-family: var(--texto); font-size: 13px; }

/* Botones de la portada: título + descripción, tono claro */
.boton-doble { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 20px; border-radius: 12px; background: #efe8f7; border: 1px solid #ddd0ef; color: var(--tinta); text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.boton-doble strong { font-weight: 600; font-size: 16px; }
.boton-doble span { font-size: 13px; color: var(--tinta-2); }
.boton-doble:hover { background: #e4d8f3; border-color: var(--violeta); color: var(--tinta); transform: translateY(-1px); }
.botones-dobles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 600px; }
@media (max-width: 560px) { .botones-dobles { grid-template-columns: 1fr; } }
.lados-sec { padding-block: 24px 80px; }
.lados-sec .lados { margin-top: 32px; }
.lado .boton { align-self: flex-end; margin-top: auto; }
.lados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lado { padding: 32px; }
.lado h3 { font-size: 22px; }
.lado p:not(.lado__tag) { font-size: 16px; }
.lado--analiza { background: #efe8f7; }
.lado--analiza .lado__tag { color: #5a3488; }
@media (max-width: 1000px) { .lados { grid-template-columns: 1fr; } }

/* Botones dobles: que se vean como botones */
.boton-doble { flex-direction: row; align-items: center; gap: 14px; padding: 14px 14px 14px 20px; border: 1.5px solid #cdbbe8; box-shadow: 0 2px 0 #cdbbe8, 0 8px 18px rgba(121,74,173,.12); cursor: pointer; }
.boton-doble__texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.boton-doble__flecha { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--violeta); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; }
.boton-doble:hover { box-shadow: 0 2px 0 var(--violeta), 0 12px 24px rgba(121,74,173,.2); }
.boton-doble:hover .boton-doble__flecha { transform: translateX(3px); background: var(--tinta); }
.boton-doble:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--violeta); }
.boton-doble:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.boton-doble .boton-doble__flecha { color: #fff; width: 34px; height: 34px; }
.botones-dobles { max-width: 640px; }
.boton-doble { padding: 14px 12px 14px 18px; gap: 10px; }

/* Botones de los recuadros: blancos, con flecha del color de cada lado */
.lado__boton { align-self: flex-end; margin-top: auto; display: inline-flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 12px; background: #fff; color: var(--tinta); font-weight: 600; font-size: 15px; text-decoration: none; border: 1.5px solid var(--acento-borde); box-shadow: 0 2px 0 var(--acento-borde), 0 8px 18px rgba(23,3,51,.08); transition: transform .15s, box-shadow .15s; }
.lado__flecha { width: 32px; height: 32px; border-radius: 50%; background: var(--acento); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s; }
.lado__boton:hover { color: var(--tinta); transform: translateY(-1px); box-shadow: 0 2px 0 var(--acento), 0 12px 24px rgba(23,3,51,.14); }
.lado__boton:hover .lado__flecha { transform: translateX(3px); }
.lado__boton:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--acento); }
.lado__boton:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.lado--pide { --acento: #d60b85; --acento-borde: #f2b6d8; }
.lado--entrega { --acento: #0679b8; --acento-borde: #a9d8f2; }
.lado--analiza { --acento: #794aad; --acento-borde: #cdbbe8; }

/* Inicio: franja Xéfiro con dos familias */
.xefiro2 { background: var(--noche); color: #fff; padding-block: 72px; }
.xefiro2__cabeza { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; margin-bottom: 40px; }
.xefiro2__cabeza img { width: 132px; height: 132px; flex: 0 0 auto; }
.xefiro2__cabeza > div { flex: 1 1 480px; min-width: 0; }
.xefiro2 .eyebrow { color: var(--cielo); }
.xefiro2 h2 { font-weight: 700; font-size: clamp(30px, 4vw, 40px); margin-bottom: 12px; }
.xefiro2__cabeza p:last-child { font-size: 18px; line-height: 1.6; color: #dbe7f7; max-width: 640px; }
.familias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; }
.familia { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: var(--noche-2); border: 1px solid var(--noche-borde); color: #fff; text-decoration: none; transition: border-color .15s, transform .15s; }
.familia:hover { border-color: var(--cielo); color: #fff; transform: translateY(-2px); }
.familia__para { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cielo); }
.familia__titulo { display: flex; align-items: center; gap: 12px; }
.familia__titulo img { width: 72px; height: 72px; margin: -12px 0 -12px -8px; }
.familia__titulo strong { font-family: var(--titulos); font-weight: 600; font-size: 26px; }
.familia > p:not(.familia__para) { font-size: 16px; line-height: 1.6; color: var(--cielo-texto); }
.familia__modulos { display: flex; gap: 6px; }
.familia__modulos img { width: 44px; height: 44px; }
.familia__accion { margin-top: auto; font-weight: 600; color: #fff; }
@media (max-width: 800px) { .familias { grid-template-columns: 1fr; } }
.servicios { padding-block: 72px; }
.servicios .formas { margin-top: 32px; }

/* Fondos: los tres lados con fondo propio; Xéfiro en claro */
.lados-sec { background: var(--fondo); padding-block: 64px 72px; border-top: 1px solid var(--linea); }
.lado__boton { background: #fff; }
.xefiro2 { background: var(--papel); color: var(--tinta); }
.xefiro2 .eyebrow { color: #0679b8; }
.xefiro2__cabeza p:last-child { color: var(--tinta-2); }
.familia { background: #eef4fb; border-color: #d3e2f3; color: var(--tinta); }
.familia:hover { border-color: #0679b8; color: var(--tinta); }
.familia__para { color: #04628f; }
.familia > p:not(.familia__para) { color: var(--tinta-2); }
.familia__accion { color: #0679b8; }
.xefiro2 .boton--claro { background: var(--tinta); color: #fff; }
.xefiro2 .boton--claro:hover { background: #2a0e55; color: #fff; }

/* Inicio: Xéfiro vertical a la derecha, tres aplicaciones a la izquierda */
.xefiro3 { background: var(--papel); padding-block: 72px; }
.xefiro3__rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.xefiro3__apps { display: flex; flex-direction: column; gap: 18px; }
.app { display: flex; gap: 18px; align-items: center; padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); border-left: 0; text-decoration: none; color: var(--tinta); box-shadow: inset 5px 0 0 var(--acento), 0 6px 18px rgba(23,3,51,.05); transition: transform .15s, box-shadow .15s; }
.app:hover { color: var(--tinta); transform: translateX(3px); box-shadow: inset 5px 0 0 var(--acento), 0 10px 24px rgba(23,3,51,.1); }
.app img { width: 88px; height: 88px; flex: 0 0 auto; }
.app strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: 22px; margin: 2px 0 6px; }
.app p:not(.app__para) { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.app__para { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.app--prepara { --acento: #0679b8; }
.app--analiza { --acento: #794aad; }
.app--recibe { --acento: #d60b85; }
.suite { border-radius: 24px; padding: 36px; background: linear-gradient(160deg, #eef4fb, #f3eefa); border: 1px solid #dfe3f1; display: flex; flex-direction: column; gap: 14px; }
.suite__simbolo { width: 150px; height: 150px; margin: -8px 0 0 -10px; }
.suite .eyebrow { margin-bottom: 0; color: #0679b8; }
.suite h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 38px); }
.suite__texto { font-size: 17px; line-height: 1.6; color: var(--tinta-2); }
.suite__modulos { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.suite__modulos li { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; }
.suite__modulos img { width: 40px; height: 40px; }
.suite .boton { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { .xefiro3__rejilla { grid-template-columns: 1fr; } .suite { order: -1; } }
@media (max-width: 480px) { .app { flex-direction: column; align-items: flex-start; } }
.xefiro3__apps .app { flex: 1; }
.suite__simbolo { margin: -6px 0 0 0; }

/* Xéfiro más bajo: símbolo junto al título y módulos en 3 columnas */
.xefiro3 { padding-block: 56px; }
.suite { padding: 28px; gap: 12px; }
.suite__cabeza { display: flex; align-items: center; gap: 16px; }
.suite__cabeza .suite__simbolo { width: 88px; height: 88px; margin: 0; }
.suite__texto { font-size: 16px; }
.suite__modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin: 4px 0 8px; }
.suite__modulos li { font-size: 14px; gap: 8px; }
.suite__modulos img { width: 34px; height: 34px; }
.suite__motor { width: 34px; height: 34px; border-radius: 9px; background: var(--noche); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.xefiro3__apps { gap: 14px; }
.app { padding: 16px 20px; gap: 16px; }
.app img { width: 68px; height: 68px; }
.app strong { font-size: 20px; margin: 0 0 4px; }
.app p:not(.app__para) { font-size: 14.5px; }

/* Xéfiro a la izquierda, aplicaciones a la derecha */
.xefiro3__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.xefiro3__rejilla .suite { order: -1; }

/* Módulos de la suite más grandes y centrados */
.suite__modulos { gap: 14px 8px; margin: 10px 0 14px; justify-items: center; }
.suite__modulos li { flex-direction: column; gap: 6px; font-size: 14px; text-align: center; }
.suite__modulos img { width: 56px; height: 56px; }
.suite { justify-content: space-between; }
/* Servicios con viñetas */
.forma__lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; color: var(--tinta-2); }
.forma__lista li::marker { color: var(--violeta); }
.forma__mas { list-style: none; margin-left: -20px; padding-left: 20px; color: var(--violeta); font-weight: 600; letter-spacing: .1em; }

/* ===== Página /xefiro/ (prefijo xf-) ===== */
.xf-portada { background: var(--papel); }
.xf-portada__fila { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-block: 56px 64px; }
.xf-portada__texto { flex: 1 1 480px; min-width: 0; }
.xf-portada h1 { font-weight: 700; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 20px; }
.xf-mapa { flex: 1 1 420px; min-width: 0; border-radius: 24px; padding: 28px; background: linear-gradient(160deg, #eef4fb, #f3eefa); border: 1px solid #dfe3f1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.xf-mapa__simbolo { width: 112px; height: 112px; margin-top: -6px; }
.xf-mapa__etapas { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 10px; }
.xf-mapa__etapas a { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--linea); box-shadow: inset 4px 0 0 var(--acento); text-decoration: none; color: var(--tinta); transition: transform .15s, box-shadow .15s; }
.xf-mapa__etapas a:hover { color: var(--tinta); transform: translateX(3px); box-shadow: inset 4px 0 0 var(--acento), 0 8px 18px rgba(23,3,51,.08); }
.xf-mapa__num { font-family: var(--mono); font-size: 13px; color: var(--acento); }
.xf-mapa__etapas strong { font-family: var(--titulos); font-weight: 600; font-size: 16px; flex: 1; }
.xf-mapa__iconos { display: flex; gap: 2px; }
.xf-mapa__iconos img { width: 34px; height: 34px; }
.xf-e1, .xf-etapa--1 { --acento: #d60b85; }
.xf-e2, .xf-etapa--2 { --acento: #0679b8; }
.xf-e3, .xf-etapa--3 { --acento: #b0218f; }
.xf-e4, .xf-etapa--4 { --acento: #794aad; }

.xf-motor-sec { background: var(--fondo); border-top: 1px solid var(--linea); padding-block: 64px; }
.xf-motor { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 36px; padding: 36px; border-radius: 24px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 12px 32px rgba(23,3,51,.06); position: relative; overflow: hidden; }
.xf-motor::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.xf-motor__icono { width: 120px; height: 120px; flex: 0 0 auto; }
.xf-motor__texto { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.xf-motor__texto .eyebrow { margin: 0; }
.xf-motor h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 36px); }
.xf-motor__texto > p:not(.eyebrow) { font-size: 16.5px; line-height: 1.6; color: var(--tinta-2); }
.xf-motor__nota { font-size: 14.5px !important; }
.xf-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xf-chips li { font-family: var(--mono); font-size: 13px; padding: 5px 12px; border-radius: 999px; background: #efe8f7; color: #5a3488; }
.xf-motor__boton { flex: 0 0 auto; }

.xf-etapa { padding-block: 64px; border-top: 1px solid var(--linea); }
.xf-etapa--1, .xf-etapa--3 { background: var(--papel); }
.xf-etapa--2, .xf-etapa--4 { background: var(--fondo); }
.xf-etapa__cabeza { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
.xf-etapa__num { font-family: var(--mono); font-size: 15px; color: #fff; background: var(--acento); border-radius: 12px; min-width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.xf-etapa__cabeza h2 { font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin-bottom: 6px; }
.xf-etapa__cabeza p { font-size: 16px; color: var(--tinta-2); }
.xf-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.xf-fichas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xf-ficha { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); box-shadow: inset 0 4px 0 var(--acento), 0 6px 18px rgba(23,3,51,.04); scroll-margin-top: 96px; }
.xf-ficha img { width: 72px; height: 72px; flex: 0 0 auto; margin: -6px 0 0 -6px; }
.xf-ficha h3 { font-weight: 600; font-size: 21px; }
.xf-ficha__rol { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); margin: 2px 0 8px !important; }
.xf-ficha p:not(.xf-ficha__rol) { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.xf-ficha:target { border-color: var(--acento); box-shadow: inset 0 4px 0 var(--acento), 0 0 0 5px color-mix(in srgb, var(--acento) 18%, transparent), 0 12px 28px rgba(23,3,51,.10); }
@media (max-width: 1000px) { .xf-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .xf-fichas, .xf-fichas--2 { grid-template-columns: 1fr; } }

.xf-servicios { padding-block: 72px; border-top: 1px solid var(--linea); }
.xf-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.xf-svc__item { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 18px; background: var(--fondo); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; scroll-margin-top: 96px; }
.xf-svc__item img { width: 56px; height: 56px; flex: 0 0 auto; margin: -4px 0 0 -4px; }
.xf-svc__icono { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px; background: var(--tinta); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.xf-svc__icono--ok { background: var(--ok); }
.xf-svc__item h3 { font-weight: 600; font-size: 19px; margin-bottom: 6px; }
.xf-svc__item p { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.xf-svc__item .accion { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--violeta); }
.xf-svc__item--enlace { transition: border-color .15s, transform .15s; }
.xf-svc__item--enlace:hover { color: var(--tinta); border-color: var(--ok); transform: translateY(-2px); }
@media (max-width: 900px) { .xf-svc { grid-template-columns: 1fr; } }

.xf-rutas-sec { padding-block: 72px; border-top: 1px solid var(--linea); }
.xf-rutas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.xf-ruta { border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 96px; }
.xf-ruta h3 { font-size: 24px; line-height: 1.25; }
.xf-ruta--sup { background: #fbe6f2; --acento: #d60b85; --acento-borde: #f2b6d8; }
.xf-ruta--sup .lado__tag { color: #9c0761; }
.xf-ruta--rep { background: #e3f3fc; --acento: #0679b8; --acento-borde: #a9d8f2; }
.xf-ruta--rep .lado__tag { color: #04628f; }
.xf-pasos { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 12px; counter-reset: paso; }
.xf-pasos li { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.75); position: relative; }
.xf-pasos li:not(:last-child)::after { content: ""; position: absolute; left: 56px; bottom: -12px; width: 2px; height: 12px; background: var(--acento); opacity: .45; }
.xf-pasos__iconos { grid-row: 1 / span 2; display: flex; gap: 0; justify-content: center; }
.xf-pasos__iconos img { width: 44px; height: 44px; margin-left: -6px; }
.xf-pasos__iconos img:first-child { margin-left: 0; }
.xf-pasos__ok { width: 36px; height: 36px; margin: 4px 0 0 2px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.xf-pasos strong { font-family: var(--titulos); font-weight: 600; font-size: 17px; }
.xf-pasos li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
@media (max-width: 900px) { .xf-rutas { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .xf-pasos li { grid-template-columns: 1fr; row-gap: 6px; } .xf-pasos__iconos { grid-row: auto; justify-content: flex-start; } .xf-pasos li::after { display: none; } }

.xf-uso { padding-block: 72px; border-top: 1px solid var(--linea); }
.xf-uso .formas { margin-top: 32px; }
.xf-uso .forma:not(.xf-obra) { cursor: default; }
.xf-uso .forma:not(.xf-obra):hover { transform: none; border-color: var(--linea); }
.xf-obra { background: repeating-linear-gradient(135deg, #fff, #fff 14px, #f8f5fc 14px, #f8f5fc 28px); border: 1.5px dashed #cdbbe8; }
.xf-obra:hover { transform: none; border-color: #cdbbe8; }
.xf-obra__tag { font-family: var(--mono); font-size: 13px !important; color: var(--aviso) !important; }
.xf-obra .accion { text-decoration: none; }
.xf-obra .accion:hover { color: var(--tinta); }
.xf-motor__texto > p.xf-chips__titulo { font-size: 14px; font-style: italic; color: var(--suave); margin-top: 4px; }
.xf-chips__titulo + .xf-chips { margin-top: -4px; }
.xf-servicios__bajada { font-size: 17px; line-height: 1.6; color: var(--tinta-2); margin-top: 12px; max-width: 680px; }
.xf-formas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .xf-formas--2 { grid-template-columns: 1fr; } }

/* ===== Página /supervisores/ (prefijo sp-) ===== */
.sp-eyebrow { color: #9c0761; }
.sp-tarjeta { flex: 1 1 400px; min-width: 0; border-radius: 24px; padding: 32px; background: #fbe6f2; border: 1px solid #f2b6d8; }
.sp-tarjeta__tag { font-family: var(--mono); font-size: 14px; color: #9c0761; margin-bottom: 16px !important; }
.sp-tarjeta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-tarjeta li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgba(156,7,97,.08); }
.sp-ok { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.sp-tarjeta strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: 17px; margin-bottom: 2px; }
.sp-tarjeta li span:not(.sp-ok) { font-size: 15px; line-height: 1.5; color: var(--tinta-2); }

.sp-cambio { padding-block: 72px; border-top: 1px solid var(--linea); }
.sp-pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.sp-par { display: grid; grid-template-rows: auto auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--linea); background: #fff; }
.sp-par p { padding: 18px 22px; font-size: 16px; line-height: 1.5; }
.sp-par span { display: block; font-family: var(--mono); font-size: 12.5px; margin-bottom: 4px; }
.sp-par__antes { color: var(--suave); background: #f8f7fb; border-bottom: 1px dashed var(--linea-2); }
.sp-par__antes span { color: var(--suave); }
.sp-par__despues { color: var(--tinta); font-weight: 500; box-shadow: inset 4px 0 0 var(--magenta); }
.sp-par__despues span { color: #9c0761; font-weight: 400; }
@media (max-width: 800px) { .sp-pares { grid-template-columns: 1fr; } }

.sp-recorrido { padding-block: 72px; border-top: 1px solid var(--linea); }
.sp-pasos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sp-pasos li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); box-shadow: inset 0 4px 0 var(--magenta), 0 6px 18px rgba(23,3,51,.04); }
.sp-pasos li:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--magenta); font-weight: 700; font-size: 18px; }
.sp-pasos__num { font-family: var(--mono); font-size: 13px; color: #9c0761; }
.sp-pasos__iconos { display: flex; }
.sp-pasos__iconos img { width: 56px; height: 56px; margin-left: -8px; }
.sp-pasos__iconos img:first-child { margin-left: -4px; }
.sp-pasos strong { font-family: var(--titulos); font-weight: 600; font-size: 20px; }
.sp-pasos p { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.sp-pasos a { margin-top: auto; font-weight: 600; font-size: 14.5px; color: var(--violeta); text-decoration: none; }
.sp-pasos a:hover { color: var(--tinta); }
.sp-nota { margin-top: 24px !important; padding: 16px 20px; border-radius: 14px; background: var(--fondo); font-size: 15.5px; color: var(--tinta-2); }
.sp-nota a { font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 1000px) { .sp-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-pasos li::after { display: none; } }
@media (max-width: 560px) { .sp-pasos { grid-template-columns: 1fr; } }

.sp-consultoria { padding-block: 72px; border-top: 1px solid var(--linea); scroll-margin-top: 80px; }
.sp-servicios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.sp-servicio { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); }
.sp-servicio__tag { font-family: var(--mono); font-size: 13px; color: var(--violeta); }
.sp-servicio h3 { font-weight: 600; font-size: 19px; line-height: 1.3; }
.sp-servicio p { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
@media (max-width: 1000px) { .sp-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-servicios { grid-template-columns: 1fr; } }

.sp-inicio-sec { padding-block: 64px; border-top: 1px solid var(--linea); }
.sp-inicio { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; padding: 36px; border-radius: 24px; background: linear-gradient(160deg, #fbe6f2, #f3eefa); border: 1px solid #f2d3e6; }
.sp-inicio > div { flex: 1 1 520px; min-width: 0; }
.sp-inicio .eyebrow { color: #9c0761; }
.sp-inicio h2 { font-weight: 700; font-size: clamp(24px, 3vw, 30px); margin-bottom: 10px; }
.sp-inicio p:not(.eyebrow) { font-size: 16.5px; line-height: 1.6; color: var(--tinta-2); }

/* Supervisores: flujo entre el supervisor y quien reporta (v2: 9 pasos, 7 columnas, más bajo) */
.sp-flujo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto auto 46px auto; column-gap: 18px; margin: 32px 0 36px; padding-inline: 14px; }
.sp-carril { grid-column: 1 / -1; margin-inline: -14px; border-radius: 18px; }
.sp-carril--sup { grid-row: 1 / 3; background: #fbe6f2; border: 1px solid #f2d3e6; }
.sp-carril--rep { grid-row: 4; background: #e3f3fc; border: 1px solid #c8e6f6; }
.sp-carril__nombre { font-family: var(--mono); font-size: 13px; }
.sp-carril__nombre--sup { grid-row: 1; grid-column: 1 / -1; color: #9c0761; padding-top: 10px; }
.sp-carril__nombre--rep { grid-row: 4; grid-column: 1; align-self: center; color: #04628f; }
.sp-nodo { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 9px 11px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 4px 12px rgba(23,3,51,.05); font-size: 12.5px; line-height: 1.35; color: var(--tinta-2); }
.sp-nodo strong { font-family: var(--titulos); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--tinta); }
.sp-nodo__cab { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-bottom: 2px; }
.sp-nodo__num { font-family: var(--mono); font-size: 12px; color: var(--suave); }
.sp-nodo__ic { display: flex; }
.sp-nodo__ic img { width: 24px; height: 24px; margin-left: -3px; }
.sp-der::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 13px; color: var(--acento-flujo, #d60b85); }
.sp-n1, .sp-n2, .sp-motor, .sp-n6, .sp-n7, .sp-n9 { grid-row: 2; margin: 6px 0 12px; }
.sp-n1 { grid-column: 1; } .sp-n2 { grid-column: 2; } .sp-motor { grid-column: 3; } .sp-n6 { grid-column: 4 / 6; } .sp-n7 { grid-column: 6; } .sp-n9 { grid-column: 7; }
.sp-n3, .sp-n4, .sp-n5, .sp-n8 { grid-row: 4; margin: 12px 0; --acento-flujo: #0679b8; }
.sp-n3 { grid-column: 2; } .sp-n4 { grid-column: 3; } .sp-n5 { grid-column: 4; } .sp-n8 { grid-column: 5; }
.sp-motor { align-items: center; text-align: center; justify-content: center; background: var(--tinta); border-color: var(--tinta); color: #d9d2ea; box-shadow: 0 8px 20px rgba(23,3,51,.18); }
.sp-motor img { width: 40px; height: 40px; margin-bottom: 2px; }
.sp-motor strong { color: #fff; }
.sp-conector { grid-row: 3; position: relative; justify-self: center; width: 2px; margin: -12px 0; z-index: 1; }
.sp-conector span { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.sp-conector--baja::after { content: ""; position: absolute; bottom: -2px; left: -5px; border: 6px solid transparent; border-top: 8px solid currentColor; border-bottom: 0; }
.sp-conector--sube::after { content: ""; position: absolute; top: -2px; left: -5px; border: 6px solid transparent; border-bottom: 8px solid currentColor; border-top: 0; }
.sp-c-catalogo { grid-column: 2; background: #d60b85; color: #d60b85; }
.sp-c-catalogo span { color: #9c0761; }
.sp-c-envio { grid-column: 4; background: #0679b8; color: #0679b8; }
.sp-c-envio span { color: #04628f; }
.sp-c-respuesta { grid-column: 5; background: #d60b85; color: #d60b85; }
.sp-c-respuesta span { color: #9c0761; }
@media (max-width: 1000px) {
  .sp-flujo { display: flex; flex-direction: column; gap: 8px; padding: 0; }
  .sp-carril, .sp-conector, .sp-carril__nombre { display: none; }
  .sp-nodo { margin: 0 !important; }
  .sp-der::after { display: none; }
  .sp-motor { flex-direction: row; gap: 10px; text-align: left; justify-content: flex-start; }
  .sp-n1 { order: 1; } .sp-n2 { order: 2; } .sp-n3 { order: 3; } .sp-n4 { order: 4; } .sp-n5 { order: 5; } .sp-n6 { order: 6; } .sp-n7 { order: 7; } .sp-n8 { order: 8; } .sp-n9 { order: 9; } .sp-motor { order: 10; }
}

/* Supervisores v3: sección propia del flujo y pares «Antes → Con XBRL» más claros */
.sp-flujo-sec { padding-block: 72px; border-top: 1px solid var(--linea); }
.sp-flujo-sec__bajada { font-size: 17px; line-height: 1.6; color: var(--tinta-2); margin-top: 12px; max-width: 720px; }
.sp-pares { grid-template-columns: 1fr; gap: 14px; }
.sp-par { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); grid-template-rows: auto; align-items: stretch; border: 0; background: none; overflow: visible; border-radius: 0; }
.sp-par p { display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; border-radius: 14px; }
.sp-par__tag { display: inline-flex !important; align-items: center; gap: 8px; margin-bottom: 6px !important; }
.sp-par__tag b { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.sp-par__antes { background: #efedf3; border: 1.5px dashed #bdb5cc; border-bottom: 1.5px dashed #bdb5cc; color: #6b6182; }
.sp-par__antes .sp-par__tag b { background: #9a90ad; }
.sp-par__flecha { align-self: center; justify-self: center; width: 34px; height: 34px; border-radius: 50%; background: var(--magenta); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 4px 10px rgba(214,11,133,.3); }
.sp-par__despues { background: #fff; border: 1.5px solid #f2b6d8; box-shadow: inset 5px 0 0 var(--magenta), 0 6px 16px rgba(156,7,97,.08) !important; color: var(--tinta); }
.sp-par__despues .sp-par__tag b { background: var(--ok); }
@media (max-width: 800px) {
  .sp-par { grid-template-columns: 1fr; row-gap: 6px; }
  .sp-par__flecha { transform: rotate(90deg); width: 28px; height: 28px; }
}
.sp-par .sp-par__flecha { display: inline-flex; font-family: var(--texto); font-size: 18px; line-height: 1; margin: 0; }
@media (max-width: 800px) { .sp-pares { gap: 26px; } }

/* Supervisores: destacado de integración */
.sp-destacado { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-top: 32px; padding: 30px 32px; border-radius: 22px; background: #fff; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), var(--grad); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 14px 34px rgba(121,74,173,.14); }
.sp-destacado__iconos { display: grid; grid-template-columns: repeat(2, 56px); gap: 4px; flex: 0 0 auto; }
.sp-destacado__iconos img { width: 56px; height: 56px; }
.sp-destacado__texto { flex: 1 1 420px; min-width: 0; }
.sp-destacado__tag { font-family: var(--mono); font-size: 13.5px; color: var(--violeta); margin-bottom: 6px !important; }
.sp-destacado h3 { font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; margin-bottom: 8px; }
.sp-destacado__texto > p:last-child { font-size: 17px; line-height: 1.55; color: var(--tinta-2); }
.sp-destacado .boton-doble { flex: 0 0 auto; }
.sp-llamado__tag { font-family: var(--mono); font-size: 13.5px; color: #f36bb6 !important; margin-bottom: 10px !important; }

/* ===== Página /supervisados/ (clase .sd en <main>: reutiliza sp- en azul) ===== */
.sd .sp-eyebrow, .sd .sp-tarjeta__tag, .sd .sp-pasos__num, .sd .sp-par__despues .sp-par__tag { color: #04628f; }
.sd .sp-tarjeta { background: #e3f3fc; border-color: #b5dcf2; }
.sd .sp-tarjeta li { box-shadow: 0 6px 16px rgba(4,98,143,.08); }
.sd .sp-par__flecha { background: var(--azul); box-shadow: 0 4px 10px rgba(6,153,223,.3); }
.sd .sp-par__despues { border-color: #b5dcf2; box-shadow: inset 5px 0 0 var(--azul), 0 6px 16px rgba(4,98,143,.08) !important; }
.sd .sp-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sd .sp-pasos li { box-shadow: inset 0 4px 0 var(--azul), 0 6px 18px rgba(23,3,51,.04); }
.sd .sp-pasos li:not(:last-child)::after { color: var(--azul); }
.sd .sp-llamado__tag { color: #7cc8f0 !important; }
@media (max-width: 1000px) { .sd .sp-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sd .sp-pasos { grid-template-columns: 1fr; } }

/* ===== Menú: grupo desplegable (Actualidad) ===== */
.menu__grupo { position: relative; display: flex; }
.menu__grupo > a::after { content: "▾"; margin-left: 5px; font-size: 11px; color: var(--suave); }
.menu__sub { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 60; min-width: 190px; flex-direction: column; padding: 8px; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 14px 30px rgba(23,3,51,.12); }
.menu__grupo:hover .menu__sub, .menu__grupo:focus-within .menu__sub { display: flex; }
.menu .menu__sub a { padding: 9px 12px; border-bottom: 0; border-radius: 8px; font-size: 14.5px; white-space: nowrap; }
.menu .menu__sub a:hover { background: var(--fondo); }
@media (max-width: 1000px) {
  .encabezado.abierto .menu__grupo { flex-direction: column; }
  .menu__sub, .menu__grupo:hover .menu__sub { display: flex; position: static; transform: none; min-width: 0; padding: 0 0 0 18px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .encabezado.abierto .menu .menu__sub a { padding: 10px 0; border-radius: 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; color: var(--tinta-2); }
  .menu .menu__sub a:hover { background: none; }
}

/* ===== Página /actualidad/ (prefijo ac-) ===== */
.ac-temas-sec { padding-block: 72px; border-top: 1px solid var(--linea); }
.ac-temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ac-tema { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); box-shadow: inset 0 4px 0 var(--violeta), 0 6px 18px rgba(23,3,51,.04); scroll-margin-top: 90px; }
.ac-tema h3 { font-weight: 600; font-size: 21px; }
.ac-tema p { font-size: 15.5px; line-height: 1.55; color: var(--tinta-2); }
.ac-aviso { margin-top: auto !important; padding-top: 8px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px !important; color: var(--aviso) !important; }
.ac-aviso a { font-family: var(--texto); font-weight: 600; color: var(--violeta); text-decoration: none; }
.ac-aviso__punto { width: 9px; height: 9px; border-radius: 50%; background: #f0a020; box-shadow: 0 0 0 4px #fdf0d8; }
@media (max-width: 900px) { .ac-temas { grid-template-columns: 1fr; } }

/* ===== Página /analisis/ (clase .an en <main>: reutiliza sp- en violeta) ===== */
.an .sp-eyebrow, .an .sp-tarjeta__tag, .an .sp-pasos__num, .an .sp-par__despues .sp-par__tag { color: #5a3488; }
.an .sp-tarjeta { background: #efe8f7; border-color: #d9c8ee; }
.an .sp-tarjeta li { box-shadow: 0 6px 16px rgba(90,52,136,.08); }
.an .sp-par__flecha { background: var(--violeta); box-shadow: 0 4px 10px rgba(121,74,173,.3); }
.an .sp-par__despues { border-color: #d9c8ee; box-shadow: inset 5px 0 0 var(--violeta), 0 6px 16px rgba(90,52,136,.08) !important; }
.an .sp-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an .sp-pasos li { box-shadow: inset 0 4px 0 var(--violeta), 0 6px 18px rgba(23,3,51,.04); }
.an .sp-pasos li:not(:last-child)::after { color: var(--violeta); }
.an .sp-llamado__tag { color: #c4a6ea !important; }
@media (max-width: 1000px) { .an .sp-pasos { grid-template-columns: 1fr; } }
.an-enlaces { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.an-enlaces a { margin-top: 0 !important; }

/* ===== Página /contacto/ (prefijo ct-) ===== */
.ct-canales-sec { padding-block: 72px; border-top: 1px solid var(--linea); }
.ct-canales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ct-canal { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 6px 18px rgba(23,3,51,.04); scroll-margin-top: 96px; }
.ct-canal:target { border-color: var(--violeta); box-shadow: 0 0 0 5px rgba(121,74,173,.16), 0 12px 28px rgba(23,3,51,.10); }
.ct-canal__ic { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--grad); margin-bottom: 6px; }
.ct-canal h3 { font-weight: 600; font-size: 20px; }
.ct-canal p { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.ct-canal__enlaces { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ct-canal__enlaces a { font-weight: 600; font-size: 15px; color: var(--violeta); text-decoration: none; overflow-wrap: anywhere; }
.ct-canal__enlaces a:hover { color: var(--tinta); }
.ct-pistas { margin-top: 32px; padding: 30px 32px; border-radius: 22px; background: #fff; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), var(--grad); background-origin: border-box; background-clip: padding-box, border-box; }
.ct-pistas h2 { font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 18px; }
.ct-pistas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ct-pistas strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.ct-pistas li span { font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
@media (max-width: 1000px) { .ct-canales, .ct-pistas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ct-canales, .ct-pistas ul { grid-template-columns: 1fr; } }

/* Contacto: formulario */
.ct-form-sec { padding-block: 72px; border-top: 1px solid var(--linea); scroll-margin-top: 80px; }
.ct-form-caja { display: flex; flex-wrap: wrap; gap: 32px 48px; padding: 36px; border-radius: 24px; background: #fff; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), var(--grad); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 14px 34px rgba(121,74,173,.12); }
.ct-form-intro { flex: 1 1 260px; min-width: 0; }
.ct-form-intro h2 { font-weight: 700; font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; }
.ct-form-intro p:not(.sp-destacado__tag) { font-size: 16.5px; line-height: 1.6; color: var(--tinta-2); }
.ct-form { flex: 3 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.ct-campo { display: flex; flex-direction: column; gap: 6px; }
.ct-campo--ancho { grid-column: 1 / -1; }
.ct-campo label { font-weight: 600; font-size: 14.5px; }
.ct-form b { color: var(--magenta); font-weight: 600; }
.ct-campo input, .ct-campo select, .ct-campo textarea { font: inherit; font-size: 16px; color: var(--tinta); padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--linea-2); background: var(--fondo); transition: border-color .15s, background .15s; width: 100%; }
.ct-campo textarea { resize: vertical; min-height: 130px; }
.ct-campo input:focus, .ct-campo select:focus, .ct-campo textarea:focus { outline: none; border-color: var(--violeta); background: #fff; box-shadow: 0 0 0 4px rgba(121,74,173,.14); }
.ct-campo.ct-error input, .ct-campo.ct-error select, .ct-campo.ct-error textarea { border-color: var(--magenta); }
.ct-autoriza { flex-direction: row; align-items: flex-start; gap: 12px; }
.ct-autoriza input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--violeta); }
.ct-autoriza label { font-weight: 400; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.ct-autoriza.ct-error label { color: #9c0761; }
.ct-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-form__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ct-form__pie .boton-doble { cursor: pointer; font: inherit; }
.ct-form__pie .boton-doble[disabled] { opacity: .6; cursor: wait; }
.ct-form__nota { font-size: 13.5px; color: var(--suave); }
.ct-form__estado { grid-column: 1 / -1; font-size: 15.5px; line-height: 1.55; }
.ct-form__estado:empty { display: none; }
.ct-form__estado.es-ok { padding: 16px 20px; border-radius: 14px; background: var(--ok-fondo); color: var(--ok); font-weight: 500; }
.ct-form__estado.es-error { padding: 16px 20px; border-radius: 14px; background: #fbe6f2; color: #9c0761; }
.ct-form__estado a { font-weight: 600; color: inherit; }
@media (max-width: 640px) { .ct-form { grid-template-columns: 1fr; } .ct-form-caja { padding: 24px; } }

/* ===== Página /datos-personales/ (prefijo dp-) ===== */
.dp-sec { padding-block: 64px 88px; border-top: 1px solid var(--linea); }
.dp-rejilla { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
.dp-indice { position: sticky; top: 96px; padding: 22px 22px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); }
.dp-indice__tag { font-family: var(--mono); font-size: 13px; color: var(--violeta); margin-bottom: 10px !important; }
.dp-indice ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.4; }
.dp-indice li::marker { color: var(--suave); font-size: 13px; }
.dp-indice a { color: var(--tinta-2); text-decoration: none; }
.dp-indice a:hover { color: var(--violeta); }
.dp-texto { max-width: 760px; padding: 40px 44px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 6px 18px rgba(23,3,51,.04); }
.dp-texto h2 { font-weight: 700; font-size: 23px; line-height: 1.25; margin: 40px 0 14px; scroll-margin-top: 96px; }
.dp-texto h2:first-child { margin-top: 0; }
.dp-texto h3 { font-weight: 600; font-size: 17px; margin: 26px 0 10px; }
.dp-texto p, .dp-texto li { font-size: 16px; line-height: 1.7; color: var(--tinta-2); }
.dp-texto p { margin-bottom: 14px; }
.dp-texto strong { color: var(--tinta); font-weight: 600; }
.dp-texto ul, .dp-texto ol { margin: 0 0 18px; padding-left: 24px; display: grid; gap: 8px; }
.dp-texto li::marker { color: var(--violeta); }
.dp-texto a { color: var(--violeta); font-weight: 500; }
.dp-ficha { margin: 0 0 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dp-ficha div { padding: 14px 16px; border-radius: 12px; background: var(--fondo); }
.dp-ficha dt { font-family: var(--mono); font-size: 12.5px; color: var(--suave); margin-bottom: 2px; }
.dp-ficha dd { margin: 0; font-weight: 500; color: var(--tinta); overflow-wrap: anywhere; }
@media (max-width: 1000px) { .dp-rejilla { grid-template-columns: 1fr; } .dp-indice { position: static; } }
@media (max-width: 640px) { .dp-texto { padding: 26px 20px; } .dp-ficha { grid-template-columns: 1fr; } }

/* Contacto: tono de fondo por canal */
.ct-canal:nth-child(1) { --ct: #0f7b4a; --ct-fondo: #e8f6ef; --ct-borde: #bfe5d1; }
.ct-canal:nth-child(2) { --ct: #0679b8; --ct-fondo: #e6f4fc; --ct-borde: #bfe1f4; }
.ct-canal:nth-child(3) { --ct: #c20a79; --ct-fondo: #fceaf4; --ct-borde: #f3c4df; }
.ct-canal:nth-child(4) { --ct: #794aad; --ct-fondo: #f1ebf8; --ct-borde: #dccdef; }
.ct-canal { background: var(--ct-fondo); border-color: var(--ct-borde); box-shadow: inset 0 4px 0 var(--ct), 0 6px 18px rgba(23,3,51,.04); transition: transform .15s, box-shadow .15s; }
.ct-canal:hover { transform: translateY(-2px); box-shadow: inset 0 4px 0 var(--ct), 0 12px 26px rgba(23,3,51,.08); }
.ct-canal__ic { background: var(--ct); }
.ct-canal .sp-servicio__tag, .ct-canal__enlaces a { color: var(--ct); }
.ct-canal__enlaces a:hover { color: var(--tinta); }

/* ===== Página /nosotros/ (clase .ns en <main>, prefijo ns-) ===== */
.ns-intro { max-width: 760px; font-size: 18px; line-height: 1.6; color: var(--tinta-2); margin-top: 12px; }
.ns-trayectoria { max-width: 760px; margin-top: 32px; }
.ns-lados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.ns-lado { --ns: var(--violeta); display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); color: inherit; text-decoration: none; box-shadow: inset 0 4px 0 var(--ns), 0 6px 18px rgba(23,3,51,.04); transition: transform .15s, box-shadow .15s; }
.ns-lado:hover { transform: translateY(-2px); box-shadow: inset 0 4px 0 var(--ns), 0 12px 26px rgba(23,3,51,.08); }
.ns-lado--sup { --ns: var(--magenta); } .ns-lado--rep { --ns: var(--azul); } .ns-lado--ana { --ns: var(--violeta); }
.ns-lado h3 { font-weight: 600; font-size: 21px; }
.ns-lado p { font-size: 15.5px; line-height: 1.55; color: var(--tinta-2); }
.ns-lado .sp-servicio__tag, .ns-lado__ir { color: var(--ns); }
.ns-lado__ir { margin-top: auto; font-weight: 600; font-size: 15px; }
@media (max-width: 900px) { .ns-lados { grid-template-columns: 1fr; } }
.ns-principios .sp-servicio { --ns: var(--magenta); --ns-fondo: #fdf3f9; --ns-borde: #f2c4df; background: var(--ns-fondo); border-color: var(--ns-borde); box-shadow: inset 0 4px 0 var(--ns), 0 6px 18px rgba(23,3,51,.04); }
.ns-principios .sp-servicio:nth-child(3n+2) { --ns: var(--violeta); --ns-fondo: #f6f1fb; --ns-borde: #dccdef; }
.ns-principios .sp-servicio:nth-child(3n) { --ns: var(--azul); --ns-fondo: #eff8fd; --ns-borde: #bfe2f5; }
.ns-principios .sp-servicio:nth-child(6) { --ns: #4b2f8f; --ns-fondo: #f3f1fa; --ns-borde: #d3cbea; box-shadow: inset 0 4px 0 transparent, 0 6px 18px rgba(23,3,51,.04); background: linear-gradient(90deg, #d60b85, #794aad, #0699df) top / 100% 4px no-repeat, var(--ns-fondo); }
.ns-principios .sp-servicio__tag { color: var(--ns); }
.ns-principios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ns-principios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ns-principios { grid-template-columns: 1fr; } }
.ns-linea { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; position: relative; }
.ns-linea::before { content: ""; position: absolute; left: 0; right: 0; top: 37px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d60b85, #794aad, #0699df); }
.ns-linea li { position: relative; display: flex; flex-direction: column; gap: 30px; }
.ns-linea li::before { content: ""; position: absolute; left: 0; top: 30px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--violeta); }
.ns-linea__anio { font-family: var(--mono); font-size: 15px; color: var(--violeta); }
.ns-linea h3 { font-weight: 600; font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.ns-linea p { font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
@media (max-width: 1000px) {
  .ns-linea { grid-template-columns: 1fr; gap: 0; max-width: 640px; }
  .ns-linea::before { left: 7px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; background: linear-gradient(180deg, #d60b85, #794aad, #0699df); }
  .ns-linea li { gap: 4px; padding: 12px 0 12px 34px; }
  .ns-linea li::before { left: 1px; top: 16px; }
}

/* ===== Página /herramientas/ (prefijo hr-, reutiliza .ns-lado y .ac-) ===== */
.hr-accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hr-accesos .ns-lado img, .hr-ic { width: 56px; height: 56px; }
.hr-ic { display: grid; place-items: center; border-radius: 14px; background: #efe8f7; color: var(--violeta); }
.hr-descargas { max-width: 760px; }
@media (max-width: 1100px) { .hr-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hr-accesos { grid-template-columns: 1fr; } }
.hr-grupo + .hr-grupo { margin-top: 48px; }
.hr-grupo > h2 { font-weight: 700; font-size: 24px; margin-bottom: 20px; }
.hr-modulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hr-modulo { display: flex; flex-direction: column; gap: 8px; }
.hr-modulo__sub { font-family: var(--mono); font-size: 13px; color: var(--ns); }
.hr-pedir { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: #fff; background: var(--ns); text-decoration: none; box-shadow: 0 2px 0 rgba(23,3,51,.18), 0 6px 14px rgba(23,3,51,.12); transition: transform .15s; }
.hr-pedir:hover { transform: translateY(-1px); }
@media (max-width: 1100px) { .hr-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hr-modulos { grid-template-columns: 1fr; } }