/* ==========================================================================
   SISTEMA VISUAL SOLUCIONESPRO — capa comun para las 9 paginas
   Ver docs/16-tarea-estilo-visual.md
   Estas variables NO tocan ninguna etiqueta generica (body, h1, p, a):
   se pueden cargar en cualquier pagina sin alterar su diseno actual.
   ========================================================================== */
:root {
  /* Puntos de ruptura del sitio: cuatro, no doce.
     Base (desde 320px) · sm 600 · md 900 · lg 1200. Siempre mobile first (min-width). */
  --sp-bp-sm: 600px;
  --sp-bp-md: 900px;
  --sp-bp-lg: 1200px;

  /* Escala de espaciado unica */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;

  /* Tipografia fluida: el mismo tamano crece con la pantalla, sin saltos */
  --sp-text-label: .8125rem;
  --sp-text-body: 1.0625rem;
  --sp-text-subtitle: 1.125rem;
  --sp-text-title: clamp(1.75rem, 2.6vw, 2.25rem);
  --sp-text-display: clamp(2.5rem, 4.5vw, 3.75rem);

  /* Contenedor */
  --sp-max: 1120px;
  --sp-gutter: var(--sp-4);

  /* Objetivo tactil minimo recomendado */
  --sp-touch: 44px;
}

@media (min-width: 900px) {
  :root { --sp-gutter: var(--sp-6); }
}

/* Utilidades opcionales: cada pagina las adopta cuando quiera, sin obligacion. */
.sp-container { width: min(var(--sp-max), calc(100% - (var(--sp-gutter) * 2))); margin-inline: auto; }
.sp-stack > * + * { margin-top: var(--sp-5); }
.sp-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .sp-grid--2, .sp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Bloques anchos (tablas, codigo, diagramas): se desplazan dentro de su caja,
   nunca arrastran la pagina entera. */
.sp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* SolucionesPro: cabecera y pie comunes para páginas HTML estáticas. */
:root {
  --sp-azul: rgb(47, 124, 255); --sp-azul-hover: rgb(31, 82, 169); --sp-azul-suave: rgb(217, 231, 255);
  --sp-naranja: rgb(241, 124, 32); --sp-verde: rgb(78, 186, 154); --sp-gris: rgb(105, 118, 139);
  --sp-blanco: rgb(255, 255, 255); --sp-oscuro: rgb(43, 45, 66); --sp-borde: rgba(43, 45, 66, 0.16);
  --sp-sombra: 0 10px 28px rgba(43, 45, 66, 0.12);
  --sp-fuente-texto: "Mulish", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-fuente-titulo: "Syne", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.sp-header, .sp-footer, .sp-header *, .sp-footer * {
  box-sizing: border-box;
}
.sp-header, .sp-footer {
  width: 100%;
  font-family: var(--sp-fuente-texto);
  color: var(--sp-oscuro);
  background: var(--sp-blanco);
}
.sp-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--sp-borde);
  box-shadow: 0 4px 18px rgba(43, 45, 66, 0.06);
}
.sp-header__inner, .sp-footer__inner {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}
.sp-header__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.sp-brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--sp-oscuro);
  font-family: var(--sp-fuente-titulo);
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.sp-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.sp-nav__link, .sp-menu__summary, .sp-mobile__summary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  color: var(--sp-oscuro);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.sp-nav__link, .sp-menu__summary {
  padding: 0 12px;
}
.sp-brand:hover, .sp-nav__link:hover, .sp-menu__summary:hover, .sp-mobile__summary:hover {
  color: var(--sp-azul-hover);
  background: var(--sp-azul-suave);
}
.sp-menu {
  position: relative;
}
.sp-menu__summary, .sp-mobile__summary {
  cursor: pointer;
  list-style: none;
}
.sp-menu__summary::-webkit-details-marker, .sp-mobile__summary::-webkit-details-marker {
  display: none;
}
.sp-menu__summary::after, .sp-mobile__summary::after {
  content: "▾";
  margin-left: 7px;
  font-size: 0.72rem;
}
.sp-menu[open] .sp-menu__summary::after, .sp-mobile[open] .sp-mobile__summary::after {
  content: "▴";
}
.sp-menu__panel, .sp-mobile__panel {
  padding: 8px;
  border: 1px solid var(--sp-borde);
  border-radius: 8px;
  background: var(--sp-blanco);
  box-shadow: var(--sp-sombra);
}
.sp-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
}
.sp-menu__panel a, .sp-mobile__panel a, .sp-footer a {
  color: var(--sp-oscuro);
  text-decoration: none;
}
.sp-menu__panel a, .sp-mobile__panel a, .sp-mobile__panel span {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
}
.sp-menu__panel a:hover, .sp-mobile__panel a:hover, .sp-footer a:hover {
  color: var(--sp-azul-hover);
  background: var(--sp-azul-suave);
}
.sp-paso, .sp-cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 800;
}
.sp-paso {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(241, 124, 32, 0.42);
  border-radius: 999px;
  color: var(--sp-oscuro);
  background: rgba(241, 124, 32, 0.12);
  font-size: 0.82rem;
}
.sp-cta {
  min-height: 42px;
  justify-content: center;
  padding: 0 16px;
  border: 2px solid var(--sp-naranja);
  border-radius: 8px;
  color: var(--sp-blanco);
  background: var(--sp-naranja);
  font-size: 0.92rem;
  line-height: 1.1;
  text-decoration: none;
}
.sp-cta:hover {
  border-color: var(--sp-azul-hover);
  background: var(--sp-azul-hover);
}
.sp-mobile {
  display: none;
  margin-left: auto;
}
.sp-mobile__summary {
  padding: 0 12px;
  border: 1px solid var(--sp-borde);
}
.sp-mobile__panel {
  position: absolute;
  top: 72px;
  right: 16px;
  left: 16px;
}
.sp-mobile__group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--sp-borde);
}
.sp-mobile__label {
  color: var(--sp-gris);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.76rem;
}
.sp-footer {
  margin-top: 48px;
  border-top: 1px solid var(--sp-borde);
  color: var(--sp-blanco);
  background: var(--sp-oscuro);
}
.sp-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
  padding: 34px 0;
}
.sp-footer__title {
  margin: 0 0 12px;
  color: var(--sp-blanco);
  font-family: var(--sp-fuente-titulo);
  font-size: 1rem;
  font-weight: 800;
}
.sp-footer__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-footer a {
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  color: var(--sp-blanco);
  font-weight: 700;
}
.sp-footer__text, .sp-footer__legal {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}
.sp-footer__legal {
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
/* Indicador de foco. WCAG 2.1 (1.4.11) pide 3:1 contra el fondo de al lado, y el
   fondo no es el mismo en los dos sitios: la cabecera es clara y cambia con el
   esquema, el pie es oscuro siempre. Por eso cada uno lleva su color.
   El verde da 2,38:1 sobre la cabecera clara, asi que ahi no sirve. */
.sp-header a:focus-visible, .sp-header summary:focus-visible {
  outline: 3px solid var(--sp-azul-hover); /* 7,40:1 sobre cabecera clara */
  outline-offset: 3px;
}
.sp-footer a:focus-visible {
  outline: 3px solid var(--sp-verde); /* 5,66:1 sobre el pie oscuro */
  outline-offset: 3px;
}
@media (prefers-color-scheme: dark) {
  /* La cabecera pasa a fondo oscuro: el azul oscuro caeria a 1,82:1. */
  .sp-header a:focus-visible, .sp-header summary:focus-visible { outline-color: var(--sp-verde); }
  .sp-header { border-bottom-color: rgba(255, 255, 255, 0.16); color: var(--sp-blanco); background: var(--sp-oscuro); }
  .sp-brand, .sp-nav__link, .sp-menu__summary, .sp-mobile__summary { color: var(--sp-blanco); }
  .sp-menu__panel, .sp-mobile__panel { border-color: rgba(255, 255, 255, 0.18); background: rgb(34, 36, 54); }
  .sp-menu__panel a, .sp-mobile__panel a { color: var(--sp-blanco); }
  .sp-paso { color: var(--sp-blanco); background: rgba(241, 124, 32, 0.18); }
}
@media (max-width: 900px) {
  .sp-header__inner { min-height: 64px; gap: 12px; }
  .sp-nav { display: none; }
  .sp-mobile { display: block; }
  .sp-mobile__panel { top: 64px; }
  .sp-footer__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   ACCESIBILIDAD TACTIL Y LEGIBILIDAD — va al final a proposito:
   las reglas de los componentes de arriba definen alturas menores y, con la
   misma especificidad, gana la ultima. Aqui se garantiza el minimo.
   ========================================================================== */
.sp-header a,
.sp-header summary,
.sp-footer a,
.sp-mobile__panel a {
  min-height: var(--sp-touch);
  display: inline-flex;
  align-items: center;
}

/* Ningun texto de navegacion por debajo de 16px: en movil es el minimo comodo. */
.sp-header a,
.sp-header summary,
.sp-footer a,
.sp-nav__link,
.sp-menu__summary,
.sp-menu__panel a,
.sp-mobile__panel a,
.sp-mobile__summary {
  font-size: 1rem;
}

/* El indicador de paso y el aviso legal si pueden ser menores: no son de lectura. */
.sp-paso, .sp-footer .sp-legal, .sp-mobile__label { font-size: var(--sp-text-label); }

/* El boton de accion de la barra usa el naranja de marca. Con texto blanco se queda
   en 2,75:1 y no cumple AA; con el azul oscuro del sitio sube a 4,87:1 y conserva
   el naranja, que es lo que lo hace visible en la barra. */
.sp-cta {
  color: rgb(43, 45, 66);
  font-weight: 800;
}
.sp-cta:hover,
.sp-cta:focus-visible {
  background: rgb(216, 106, 22);
  color: rgb(43, 45, 66);
}