/* ÁBACO Suite · lo propio de la portada de abaco.software.
   Lo común (tokens, cabecera, héroe, tarjetas, pie…) está en /suite/suite.css, igual en las 13 herramientas.
   Sin estilos en línea: el sitio se sirve con una política de contenido que no los admite. */

.s-saltar { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--superficie); padding: 8px 12px; border-radius: var(--radio-control); }
.s-saltar:focus { left: 8px; top: 8px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 80px; }

/* Héroe */
.ab-heroe h1 em, .s-demo h2 em, .s-titulo--claro em { color: var(--gestion); }
.s-antetitulo { color: var(--marino-200); }
.s-cuentas { display: inline-flex; gap: 4px; }
.s-cuentas span { width: 8px; height: 12px; border-radius: 4px; background: var(--gestion); }
.s-cuentas span:nth-child(2) { background: var(--inversiones); }
.s-cuentas span:nth-child(3) { background: var(--solar); }

.s-constelacion { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; justify-self: center; }
.s-constelacion svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-orbita { fill: none; stroke: rgba(185, 205, 227, .2); stroke-width: 1; stroke-dasharray: 3 7; }
.s-orbita--dentro { stroke: rgba(185, 205, 227, .1); stroke-dasharray: none; }
.s-rayos line { stroke: rgba(185, 205, 227, .26); stroke-width: 1.2; }
.s-punto--divisas { fill: var(--divisas); }
.s-punto--empleo { fill: var(--empleo); }
.s-punto--licita { fill: var(--licita); }
.s-punto--campo { fill: var(--campo); }
.s-punto--solar { fill: var(--solar); }
.s-nodo { position: absolute; display: block; width: 11.3%; border-radius: 22%; transition: transform .2s; }
.s-nodo:hover { transform: scale(1.08); }
.s-nodo img { display: block; width: 100%; height: auto; border-radius: 22%; box-shadow: 0 0 0 4px var(--marino-900), 0 10px 24px rgba(0, 0, 0, .35); }
.s-nodo--1 { left: 44.35%; top: 4.13%; }
.s-nodo--2 { left: 64.46%; top: 9.52%; }
.s-nodo--3 { left: 79.17%; top: 24.24%; }
.s-nodo--4 { left: 84.57%; top: 44.35%; }
.s-nodo--5 { left: 79.17%; top: 64.46%; }
.s-nodo--6 { left: 64.46%; top: 79.17%; }
.s-nodo--7 { left: 44.35%; top: 84.57%; }
.s-nodo--8 { left: 24.24%; top: 79.17%; }
.s-nodo--9 { left: 9.52%; top: 64.46%; }
.s-nodo--10 { left: 4.13%; top: 44.35%; }
.s-nodo--11 { left: 9.52%; top: 24.24%; }
.s-nodo--12 { left: 24.24%; top: 9.52%; }
.s-nodo--centro { left: 40%; top: 40%; width: 20%; }
.s-nodo--centro img { box-shadow: 0 0 0 8px rgba(112, 192, 255, .14), 0 0 0 16px rgba(112, 192, 255, .06), 0 18px 44px rgba(0, 0, 0, .45); }
.s-constelacion__rotulo { position: absolute; left: 0; right: 0; top: 63%; text-align: center; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 650; color: var(--apagado-oscuro); }

/* Cifras de la suite */
.s-hechos { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.s-hechos__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.s-hechos__rejilla > div { padding: 32px 24px; border-left: 1px solid var(--borde); }
.s-hechos__rejilla > div:last-child { border-right: 1px solid var(--borde); }
.s-hechos b { display: block; font-family: var(--font-titular); font-weight: 500; font-size: 48px; line-height: 52px; color: var(--tinta); }
.s-hechos p { margin: 6px 0 0; color: var(--apagado); font-size: 14px; line-height: 21px; }

/* Secciones */
.s-seccion { padding-top: 96px; padding-bottom: 96px; }
.s-seccion > .ab-antetitulo { margin: 0; }
.s-titulo { font-size: 44px; line-height: 50px; margin-top: 12px; max-width: 18em; }
.s-entradilla { color: var(--apagado); font-size: 18px; line-height: 28px; max-width: 42em; margin: 16px 0 0; }

/* Las herramientas */
.s-grupo__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 56px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.s-grupo__cabeza h3 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 650; }
.s-grupo__cabeza p { margin: 0; color: var(--apagado); font-size: 14px; }
.s-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.s-herramienta { display: flex; flex-direction: column; }
.s-herramienta__nombre { display: block; font-size: 17px; line-height: 24px; font-weight: 650; color: var(--tinta); }
.s-herramienta__desc { display: block; flex-grow: 1; color: var(--apagado); }
.s-herramienta__pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }
.s-herramienta .ab-ir { font-weight: 600; font-size: 14px; color: var(--marino-600); white-space: nowrap; }
.s-conecta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.s-conecta__rotulo { font-size: 12px; color: var(--apagado); white-space: nowrap; }
.s-conecta__logos { display: flex; align-items: center; gap: 3px; }
.s-conecta__logos img { width: 20px; height: 20px; border-radius: 22%; }
.s-mas { margin-left: 2px; font-size: 12px; font-weight: 600; color: var(--apagado); }

/* Cómo se conectan */
.s-oscura { background: var(--marino-950); color: var(--sobre-oscuro); }
.s-antetitulo-claro { color: var(--marino-200); }
.s-titulo--claro { color: #fff; }
.s-entradilla--clara { color: var(--apagado-oscuro); }
.s-historias { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 40px; }
.s-historia { padding: 24px; }
.s-historia h3 { margin: 0 0 20px; font-size: 17px; line-height: 24px; font-weight: 650; color: #fff; }
.s-historia ol { list-style: none; margin: 0; padding: 0; }
.s-paso { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.s-paso:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 38px; bottom: 2px; width: 2px; border-radius: 2px; background: rgba(185, 205, 227, .22); }
.s-paso img { width: 32px; height: 32px; border-radius: 22%; }
.s-paso b { display: block; font-size: 14px; line-height: 18px; color: #fff; }
.s-paso b + span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 20px; color: var(--apagado-oscuro); }

/* Una sola cuenta */
.s-cuenta { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 56px; align-items: center; }
.s-cuenta .s-entradilla { margin-bottom: 28px; }
.s-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.s-puntos li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.s-puntos .ab-cifra-texto { color: var(--marino-600); font-weight: 600; }
.s-permiso-marco { display: flex; justify-content: center; }
.s-permiso { width: 100%; max-width: 440px; padding: 32px; box-shadow: var(--sombra-2); }
.s-permiso__logos { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--apagado); font-weight: 700; }
.s-permiso__logos img { border-radius: 22%; }
.s-permiso h3 { font-size: 20px; line-height: 26px; }
.s-permiso p { margin: 10px 0 18px; }
.s-permiso p b { color: var(--tinta); }
.s-permiso .ab-cifra-texto { font-size: 12px; }
.s-permiso ul { margin: 0; padding: 16px 18px; list-style: none; display: grid; gap: 10px; background: var(--marino-50); border-radius: var(--radio-control); font-size: 14px; line-height: 20px; }
.s-permiso .s-permiso__nota { margin: 18px 0 0; font-size: 13px; line-height: 20px; }

/* Principios */
.s-principios-banda { background: var(--superficie); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.s-principios { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 40px; }
.s-principios > div { padding: 28px 24px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--lienzo); }
.s-principios span { display: block; font-family: var(--font-titular); font-style: italic; font-size: 40px; line-height: 40px; color: var(--marino-400); }
.s-principios h3 { margin: 20px 0 8px; font-size: 17px; line-height: 24px; font-weight: 650; }
.s-principios p { margin: 0; color: var(--apagado); }

/* Demostración */
.s-demo__dentro { position: relative; padding-top: 88px; padding-bottom: 88px; display: grid; gap: 24px; justify-items: start; }
.s-demo h2 { margin: 0; max-width: 18em; font-family: var(--font-titular); font-weight: 500; font-size: 44px; line-height: 50px; color: #fff; }
.s-demo p { margin: 0; max-width: 40em; color: var(--apagado-oscuro); font-size: 18px; line-height: 28px; }
.s-chips { gap: 8px; }
.s-chip { height: 36px; padding: 0 14px 0 6px; font-size: 14px; }
.s-chip img { width: 24px; height: 24px; }

/* Pie de la suite: los cuatro grupos */
.s-pie { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px; }
.s-pie__grupo a { display: flex; align-items: center; gap: 10px; }
.s-pie__grupo img { width: 22px; height: 22px; border-radius: 22%; flex: none; }

/* Móvil */
@media (max-width: 760px) {
  .s-titulo, .s-demo h2 { font-size: 34px; line-height: 40px; }
  .s-seccion { padding-top: 64px; padding-bottom: 64px; }
  .s-historias { grid-template-columns: 1fr; }
  .s-cuenta { grid-template-columns: 1fr; gap: 40px; }
  .s-hechos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-hechos__rejilla > div { padding: 22px 16px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
  .s-hechos b { font-size: 36px; line-height: 40px; }
}
@media (max-width: 640px) {
  .s-solo-ancho { display: none; }
}