/*
  Quick Services — Base
  Reset ligero + tipografía base + utilidades propias.
  Bootstrap solo aporta grid/breakpoints/utilities de layout — el aspecto visual vive aquí.
*/

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--qs-paper-000);
  color: var(--qs-ink-900);
  font-family: var(--qs-font-display);
  font-size: var(--qs-fs-body);
  line-height: var(--qs-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--qs-cyan); }

/* Tipografía — escala del Manual §09 */
h1, .qs-display {
  font-family: var(--qs-font-display);
  font-weight: var(--qs-fw-display);
  font-size: clamp(2.4rem, 5vw + 1rem, 4rem);
  line-height: 0.92;
  letter-spacing: var(--qs-ls-display);
  margin: 0;
}

h1.qs-h1, .qs-h1 {
  font-weight: var(--qs-fw-h1);
  font-size: clamp(1.9rem, 3vw + 1rem, 2.5rem);
  line-height: 1.1;
  letter-spacing: var(--qs-ls-h1);
  margin: 0;
}

h2 {
  font-weight: var(--qs-fw-h2);
  font-size: clamp(1.5rem, 2.2vw + 1rem, 1.875rem);
  line-height: 1.2;
  letter-spacing: var(--qs-ls-h2);
  margin: 0;
}

h3 {
  font-weight: var(--qs-fw-h3);
  font-size: var(--qs-fs-h3);
  line-height: var(--qs-lh-h3);
  letter-spacing: 0;
  margin: 0;
}

h4 {
  font-weight: var(--qs-fw-h4);
  font-size: var(--qs-fs-h4);
  line-height: var(--qs-lh-h4);
  margin: 0;
}

p { margin: 0; }
.qs-body-l { font-size: var(--qs-fs-body-l); line-height: var(--qs-lh-body-l); }
.qs-caption { font-size: var(--qs-fs-caption); line-height: var(--qs-lh-caption); color: var(--qs-ink-500); }

.qs-mono {
  font-family: var(--qs-font-mono);
}
.qs-label {
  font-family: var(--qs-font-mono);
  font-size: var(--qs-fs-label);
  line-height: var(--qs-lh-label);
  font-weight: var(--qs-fw-label);
  letter-spacing: var(--qs-ls-label);
  text-transform: uppercase;
}

.qs-measure { max-width: 68ch; }

/* Contenedor propio: el margen del Manual (40px desktop / 20px mobile), Bootstrap solo aporta col-*/
.qs-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--qs-margin-mobile);
  max-width:90%;
}
@media (min-width: 992px) {
  .qs-container { padding-inline: var(--qs-margin-desktop); }
}

/* Superficies — alternancia por sección, decisión de shape §2 */
.qs-surface-black { background: var(--qs-black); color: var(--qs-white); }
.qs-surface-white  { background: var(--qs-white); color: var(--qs-ink-900); }
.qs-surface-magenta{ background: var(--qs-magenta); color: var(--qs-white); }
.qs-surface-black a:hover,
.qs-surface-magenta a:hover { color: var(--qs-cyan); }

/* Compensación de texto claro sobre negro/magenta — mismo tamaño, más aire */
.qs-surface-black .qs-body-l,
.qs-surface-magenta .qs-body-l {
  line-height: 1.65;
  letter-spacing: 0.005em;
}

/* Foco visible — accesibilidad, anillo turquesa (Manual §13) */
:focus-visible {
  outline: 2px solid var(--qs-cyan);
  outline-offset: 2px;
}
.qs-surface-black :focus-visible,
.qs-surface-magenta :focus-visible {
  outline-color: var(--qs-cyan);
}

/* Skip link */
.qs-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--qs-white);
  color: var(--qs-black);
  padding: var(--qs-space-2) var(--qs-space-3);
  z-index: 2000;
  font-family: var(--qs-font-mono);
  font-size: var(--qs-fs-label);
}
.qs-skip-link:focus {
  left: var(--qs-space-2);
  top: var(--qs-space-2);
}

/* Líneas de velocidad — Manual §10. Horizontal, 1:1 trazo/espacio, sangrada por un borde, un solo color. */
.qs-lines {
  --qs-lines-color: var(--qs-magenta);
  --qs-lines-stroke: var(--qs-lines-stroke-digital);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--qs-lines-color) 0,
    var(--qs-lines-color) var(--qs-lines-stroke),
    transparent var(--qs-lines-stroke),
    transparent calc(var(--qs-lines-stroke) * 2)
  );
}
.qs-lines--cyan { --qs-lines-color: var(--qs-cyan); }
.qs-lines--white { --qs-lines-color: var(--qs-white); }
.qs-lines--black { --qs-lines-color: var(--qs-black); }
.qs-lines--watermark { opacity: var(--qs-opacity-watermark); }
.qs-lines--editorial { --qs-lines-stroke: var(--qs-lines-stroke-editorial); }

.qs-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.qs-section {
  padding-block: var(--qs-space-6);
}
@media (max-width: 767.98px) {
  .qs-section { padding-block: var(--qs-space-5); }
  .qs-container { max-width: 100%; }
}

/* Las secciones fuera del viewport no se pintan hasta que hacen falta. */
main > section:not(:first-child),
footer { content-visibility: auto; contain-intrinsic-size: auto 760px; }

@media(max-width:767.98px){
  main > section:not(:first-child),
  footer{content-visibility:visible;contain-intrinsic-size:none}
}