/*
 * Resto del CSS embebido en BR2.dc.html (todo lo que no son custom properties).
 * Mismos selectores y mismas reglas que el <style> original; los valores que
 * coinciden con un token de tokens.css fueron reescritos con var(...).
 * Los valores que aparecen una sola vez en el archivo original se dejaron
 * literales (no se inventó ningún token nuevo para ellos).
 */

@import './tokens.css';

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--neutral-bg);
  min-height: 100vh;
  color: var(--ink-navy);
}

.center {
  text-align: center;
}

.island {
  text-align: center;
  margin: 1rem 0
}

/* Site chrome: fixed header, main offset, footer band — identical on all 4 pages */
.ds-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  display: flex;
  align-items: center;
  background: var(--neutral-bg-translucent);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-width) solid var(--neutral-border);
  z-index: var(--z-header);
}
.ds-site-main {
  padding-top: 76px;
}
.ds-site-footer {
  border-top: var(--border-width) solid var(--neutral-border);
  padding-top: var(--space-56);
  padding-bottom: var(--space-56);
}
.ds-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-24);
}
.ds-footer-nav {
  display: flex;
  gap: var(--space-32);
}
.ds-footer-copyright {
  font-size: 13px;
  color: var(--ink-faint);
}
/* CTA banner above the footer's bottom row — home closes with .ds-shell-wide's own closing section instead, so this only appears on About/Services */
.ds-footer-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16);
  padding: 3rem 0 0;
}
.ds-footer-cta-heading {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--ink-navy);
  margin: 0;
}

/* Reusable mono kicker/eyebrow label (section overline, case-study labels, form field labels) */
.ds-kicker {
  font-family: var(--font-mono);
  font-size: var(--font-size-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Reusable section heading (H2 above a content block) — margin set per section */
.ds-section-title {
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
a {
  color: var(--ledger-blue);
  text-decoration: none;
}
a:hover {
  color: var(--ledger-blue-hover);
}
::selection {
  background: var(--ledger-blue);
  color: var(--white);
}
input,
textarea {
  font-family: var(--font-sans);
}
/* Auditoría WCAG: el placeholder sin regla propia queda en manos del color
   por defecto del navegador (no auditable ni garantizado — Firefox además
   aplica opacity:0.54 por defecto, bajando el contraste igual aunque se fije
   el color). Se fija explícitamente a --ink-muted (7.21:1 sobre --white/
   --neutral-bg, ya verificado) y se anula la opacity. */
::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
/* Borde base de los campos del form de contacto (Contact.ts). Vive en una
   clase, no en el style inline de cada input, a propósito: contactForm.js
   marca campos inválidos vía field.style.borderColor, y necesita poder
   limpiar ese override (borderColor = '') sin destruir el resto del borde —
   ver comentario en Contact.ts. */
.ds-form-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-base);
  background: var(--white);
  padding: 14px var(--space-16);
  font-size: var(--font-size-15);
  color: var(--ink-navy);
  border: var(--border-width) solid var(--neutral-input-border);
}
input:focus,
textarea:focus {
  outline: var(--border-width-focus) solid var(--ledger-blue);
  outline-offset: 1px;
  border-color: var(--ledger-blue);
}
a:focus-visible,
button:focus-visible {
  outline: var(--border-width-focus) solid var(--ledger-blue);
  outline-offset: 2px;
}
.ds-wordmark,
.ds-nav-link,
.ds-inline-link,
.ds-display-link,
.ds-contact-link {
  cursor: pointer;
  text-decoration: none;
}
.ds-wordmark {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-navy);
}
.ds-nav-link:hover {
  color: var(--ledger-blue);
}
.ds-inline-link:hover {
  color: var(--ledger-blue-hover);
  border-color: var(--ledger-blue-hover);
}

/* Hover underline sweep — independent of the active-page border-bottom indicator */
.ds-nav-link {
  position: relative;
}
.ds-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--border-width);
  background: var(--ledger-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.ds-nav-link:hover::after,
.ds-nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* Watermark numerals gain presence when their row is hovered */
.ds-service-row-flex {
  transition: background-color var(--duration-slow) ease;
}
.ds-service-row-number {
  transition:
    color var(--duration-slow) ease,
    opacity var(--duration-slow) ease;
}
.ds-service-row-flex:hover .ds-service-row-number {
  color: var(--neutral-border);
}

@media (prefers-reduced-motion: reduce) {
  .ds-nav-link::after {
    transition: none;
  }
  .ds-service-row-flex,
  .ds-service-row-number {
    transition: none;
  }
}
.ds-display-link:hover {
  color: var(--ledger-blue-hover);
}
.ds-contact-link {
  color: var(--ink-navy);
}
.ds-contact-link:hover {
  color: var(--ledger-blue);
}
/* Button base: standard/global properties shared by every variant (.primary, .ghost) */
.ds-btn {
  cursor: pointer;
  transition:
    background var(--duration-fast),
    color var(--duration-fast),
    border-color var(--duration-fast);
}
.ds-btn.primary {
  color: var(--white);
  background: var(--ledger-blue);
}
.ds-btn.primary:hover {
  background: var(--ledger-blue-hover);
  color: var(--white);
}
.ds-btn.ghost {
  color: var(--ledger-blue);
  background: transparent;
  border: var(--border-width) solid var(--ledger-blue);
}
.ds-btn.ghost:hover {
  color: var(--white);
  background: var(--ledger-blue);
}
.ds-btn.ghost.ds-nav-link--active {
  cursor: default;
}
.ds-btn.ghost.ds-nav-link--active:hover {
  background: var(--white);
  color: var(--ledger-blue);
  transform: none;
}
.ds-form-success {
  display: none;
  font-size: var(--font-size-15);
  padding: 14px var(--space-16);
  border-radius: var(--radius-base);
  border-width: var(--border-width);
  border-style: solid;
}
.ds-form-success.is-visible {
  display: block;
}
.invisible {
  visibility: hidden;
}

/* Estados de feedback del formulario de contacto (auditoría UX/UI, Bloque 4:
   Doherty/estado del sistema — enviando/éxito/error, no solo éxito).
   Se aplican sobre el mismo #contact-success (.ds-form-success), por eso
   ese elemento ya no trae color/fondo/borde en su style inline: estas
   clases los definen para poder alternar entre los 3 estados.
   Sin token de color de error en tokens.css todavía: el estado de error se
   distingue con borde --ink-navy + texto en negrita, no con un rojo
   inventado — ver contactForm.js. */
.ds-form-status--sending {
  color: var(--ink-muted);
  background: var(--neutral-bg);
  border-color: var(--neutral-input-border);
}
.ds-form-status--success {
  color: var(--ink-navy);
  background: var(--success-bg);
  border-color: var(--ledger-blue);
}
.ds-form-status--error {
  color: var(--ink-navy);
  background: var(--neutral-bg);
  border-color: var(--ink-navy);
  font-weight: var(--font-weight-semibold);
}

/* FAQ accordion (home) */
.ds-faq-section {
  padding-top: var(--space-100);
  padding-bottom: var(--space-100);
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-faq-title {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}
.ds-faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.ds-faq-item {
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-faq-item-heading {
  margin: 0;
}
.ds-faq-question {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-20) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--font-size-17);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-navy);
  font-family: inherit;
  min-height: 44px;
}
.ds-faq-icon {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--ledger-blue);
  flex-shrink: 0;
}
.ds-faq-answer {
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0 0 24px;
  max-width: 640px;
}

/* Diagnóstico IA (home) */
.ds-diagnostic-section {
  padding-top: var(--space-100);
  padding-bottom: 40px;
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-diagnostic-title {
  margin: 0 0 16px;
}
.ds-diagnostic-lede {
  font-size: var(--font-size-17);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0 0 8px;
  max-width: 520px;
}
.ds-diagnostic-note {
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--ink-faint);
  margin: 0 0 24px;
  max-width: 520px;
}
.ds-diagnostic-link {
  display: inline-block;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  min-height: 44px;
  line-height: 44px;
}

/* Closing CTA (home) */
.ds-closing-section {
  padding-top: 160px;
  padding-bottom: var(--space-140);
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-closing-lede {
  font-size: var(--font-size-17);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0 0 14px;
}
.ds-closing-heading {
  margin: 0;
}
.ds-closing-display-link {
  font-size: clamp(40px, 8vw, 120px);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--font-weight-extrabold);
  color: var(--ledger-blue);
}

/* Mensaje de error específico por campo (contactForm.js: validateField). */
.ds-field-error {
  display: none;
  font-size: var(--font-size-13);
  color: var(--ink-error);
  font-weight: var(--font-weight-regular);
  margin-top: 6px;
}
.ds-field-error.is-visible {
  display: block;
}

/* Layout shells */
.ds-shell-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-48);
  padding-right: var(--space-48);
  box-sizing: border-box;
}
.ds-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-48);
  padding-right: var(--space-48);
  box-sizing: border-box;
}
.ds-header-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-48);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Header nav */
.ds-nav-panel {
  display: flex;
  align-items: center;
  gap: var(--space-40);
}
.ds-nav {
  display: flex;
  align-items: center;
  gap: var(--space-40);
}
/* Auditoría WCAG (target size, mínimo 44x44px): 8px 0 de padding + line-height
   del texto de 14px daba ~33px de alto real de click/tap. Se sube a 14px 0
   (mismo valor que ya usaba el override mobile de .ds-nav-link, no se
   inventa uno nuevo) para superar 44px sin tocar el tamaño de fuente ni el
   color visible del texto. Efecto secundario visual aceptado y documentado:
   el ::after (subrayado hover) y el border-bottom (subrayado de página
   activa) están anclados al borde inferior de la caja CON padding, así que
   quedan un poco más lejos del texto que antes. */
.ds-nav-link {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  padding: 14px 0;
  color: var(--ink-muted);
  border-bottom: var(--border-width) solid transparent;
}
/* Current-page indicator in the primary nav (Home/Soluciones/Quiénes Somos/Contacto) */
.ds-nav-link--active {
  color: var(--ink-navy);
  border-bottom-color: var(--ledger-blue);
}
.ds-header-cta {
  display: inline-block;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  /* Auditoría WCAG (target size): 10px 20px daba ~37px de alto. 14px 20px
     (mismo valor que ya usaba el override mobile) supera 44px. */
  padding: 14px var(--space-20);
  border-radius: var(--radius-base);
}
.ds-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  width: 44px;
  height: 44px;
  background: none;
  /* Auditoría WCAG: --neutral-border daba 1.20:1 como borde de este control
     (falla 3:1) — se usa --neutral-input-border, ya corregido en tokens.css
     para contraste de UI, en vez de --neutral-border (que se deja intacto
     para los divisores decorativos que sí siguen usándolo). */
  border: var(--border-width) solid var(--neutral-input-border);
  border-radius: var(--radius-base);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.ds-nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-navy);
}

/* Hero grid (home) */
.ds-hero-section {
  position: relative;
  padding-top: 120px;
}
.ds-year-label {
  position: absolute;
  left: 8px;
  top: 120px;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: var(--font-size-12);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.ds-hero-heading {
  display: contents;
}
.ds-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-24);
}
.ds-hero-kicker {
  display: block;
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  color: var(--ink-muted);
  margin: 0 0 4px;
  letter-spacing: var(--tracking-snug);
}
.ds-hero-title-line {
  display: block;
  font-size: clamp(40px, 8vw, 120px);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--font-weight-extrabold);
  margin: 0;
  color: var(--ink-navy);
}
.ds-hero-line-1 {
  grid-column: 1 / 9;
}
.ds-hero-line-2 {
  grid-column: 5 / 13;
  text-align: right;
  color: var(--ledger-blue);
  margin-top: -1.1em;
}
.ds-hero-copy {
  grid-column: 8 / 13;
  margin-top: 36px;
  justify-self: end
  text-align: right;
}
.ds-hero-lede {
  font-size: var(--font-size-17);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0 0 18px;
}
.ds-hero-cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-semibold);
  color: var(--ledger-blue);
  border-bottom: var(--border-width) solid var(--ledger-blue);
  padding-bottom: 2px;
}

/* Manifesto quote (home) */
.ds-manifesto {
  position: relative;
  margin-top: var(--space-120);
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
  border-top: var(--border-width) solid var(--neutral-border);
  border-bottom: var(--border-width) solid var(--neutral-border);
  overflow: hidden;
}
.ds-manifesto-mark {
  font-family: var(--font-mono);
  font-size: clamp(90px, 15vw, 220px);
  line-height: var(--line-height-flat);
  color: var(--neutral-watermark);
  position: absolute;
  left: 32px;
  top: -8px;
  z-index: var(--z-watermark);
  user-select: none;
}
.ds-manifesto-text {
  position: relative;
  z-index: var(--z-content);
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-medium);
  color: var(--ink-navy);
  margin: 0;
  max-width: 820px;
}
.ds-manifesto-text-muted {
  color: var(--ink-faint);
  font-weight: var(--font-weight-regular);
}

/* Problem statement (home) — tension block between manifesto and services */
.ds-problem-section {
  padding-top: var(--space-100);
  padding-bottom: var(--space-100);
}
.ds-problem-content {
  max-width: 760px;
}
.ds-problem-kicker {
  margin: 0 0 24px;
}
.ds-problem-statement {
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: var(--font-weight-medium);
  color: var(--ink-navy);
  margin: 0 0 20px;
}
.ds-problem-cause {
  font-size: var(--font-size-17);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0;
}

/* Services list (home) */
.ds-services-section {
  padding-top: var(--space-100);
  padding-bottom: 40px;
}
.ds-services-teaser-intro {
  font-size: var(--font-size-17);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0 0 40px;
  max-width: 480px;
}
.ds-services-teaser-cta {
  display: inline-block;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  min-height: 44px;
  line-height: 44px;
  margin-top: var(--space-24);
}
.ds-service-row-flex {
  position: relative;
  border-top: var(--border-width) solid var(--neutral-border);
  display: flex;
  overflow: hidden;
}
.ds-service-row-flex--start {
  padding: 76px 0;
  justify-content: flex-start;
}
.ds-service-row-flex--end {
  padding: 44px 0;
  justify-content: flex-end;
}
.ds-service-row-number {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-watermark);
  line-height: var(--line-height-flat);
  z-index: var(--z-watermark);
  font-size: 150px;
}
.ds-service-row-number--left {
  left: 0;
}
.ds-service-row-number--right {
  right: 0;
}
.ds-service-row-flex--start .ds-service-row-number--left {
  display: none;
}
.ds-service-row-flex--start .ds-service-row-number--right {
  display: block;
}
.ds-service-row-flex--end .ds-service-row-number--left {
  display: block;
}
.ds-service-row-flex--end .ds-service-row-number--right {
  display: none;
}
.ds-service-row-content {
  position: relative;
  z-index: var(--z-content);
  max-width: 480px;
}
.ds-service-row-flex--start .ds-service-row-content {
  text-align: left;
}
.ds-service-row-flex--end .ds-service-row-content {
  text-align: right;
}
.ds-service-row-title {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 10px;
}
.ds-service-row-desc {
  font-size: 15.5px;
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0;
}

/* Team photo (home) */
.ds-team-row {
  margin: var(--space-120) auto 0;
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.ds-team-copy {
  width: 100%;
  max-width: 340px;
  align-self: center;
  padding: 0 var(--space-48) 0 0;
}
/* La foto crece para ocupar el espacio restante de la fila, siempre dentro
   del ancho de .ds-shell-wide (antes: 58vw, relativo al viewport completo —
   se salía del contenedor de 1200px en pantallas anchas). */
.ds-team-row .sc-host-x {
  flex: 1 1 auto;
  min-width: 0;
}
.ds-team-statement {
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink-navy);
  margin: 0;
  font-weight: var(--font-weight-medium);
}

/* Placeholder image blocks (home team photo, about team/office photos) — same
   dashed-border/watermark treatment, only width/height vary per spot */
.ds-image-placeholder {
  background: var(--neutral-watermark);
  border: 1px dashed var(--neutral-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: var(--space-24);
}
.ds-image-placeholder--home-team {
  width: 100%;
  height: 560px;
}
.ds-image-placeholder--about-team {
  width: 100%;
  height: 420px;
}
.ds-image-placeholder--about-office {
  width: 100%;
  height: 460px;
}
.ds-image-placeholder-label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: var(--line-height-base);
  color: var(--ink-faint);
  max-width: 32ch;
}
.ds-image-real {
  object-fit: cover;
  display: block;
}
.ds-home-team-section {
  padding-top: 80px;
  padding-bottom: var(--space-140);
  border-top: var(--border-width) solid var(--neutral-border);
}

/* Método (home) — deliberately different rhythm from the Services rows: foreground numerals, block grid, not a list */
.ds-method-section {
  padding-top: var(--space-140);
  padding-bottom: var(--space-100);
}
.ds-method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-56) var(--space-64);
}
.ds-method-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 10px;
}
.ds-method-desc {
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0;
  max-width: 36ch;
}
.ds-method-number {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: var(--font-weight-semibold);
  color: var(--ledger-blue);
  line-height: var(--line-height-flat);
  margin-bottom: var(--space-16);
}

/* Closing CTA (home) */
.ds-closing-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-24);
  align-items: end;
}
.ds-closing-copy {
  grid-column: 7 / 13;
  justify-self: end;
  text-align: right;
  max-width: 360px;
  margin-bottom: var(--space-24);
}
.ds-closing-heading-col {
  grid-column: 1 / 13;
}

.reduce10 {
  font-size: calc(clamp(40px, 8vw, 120px) * 0.9);
}

/* Services page: asymmetric horizontal intro, not the vertical kicker+h1+paragraph stack */
.ds-services-intro-section {
  padding-top: 120px;
  padding-bottom: 64px;
}
.ds-services-title {
  font-size: clamp(36px, 6.5vw, 76px);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--font-weight-extrabold);
  line-height: 0.98;
  margin: 0;
  max-width: 640px;
}
.ds-services-intro-lede {
  font-size: var(--font-size-17);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0;
  max-width: 340px;
}
.ds-services-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-48);
  flex-wrap: wrap;
}
.ds-services-groups-section {
  padding-bottom: var(--space-140);
}
.ds-service-group {
  margin-bottom: var(--space-64);
}
.ds-service-group-title {
  margin: 0 0 var(--space-8);
}
.ds-service-row {
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: var(--space-40);
  padding: 44px 0;
  align-items: baseline;
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-service-row-index {
  font-family: var(--font-mono);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
  color: var(--ledger-blue);
}
.ds-service-context-label {
  font-size: 13px;
  line-height: var(--line-height-base);
  color: var(--ink-faint);
  margin: 0 0 var(--space-8);
}
.ds-service-title {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-8);
}
.ds-service-audience {
  font-size: var(--font-size-14);
  line-height: var(--line-height-base);
  color: var(--ink-faint);
  margin: 0;
}
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.ds-service-outcome {
  font-size: 16px;
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0;
}

/* About page: inverted intro (small lead-in text, then the dominant statement) + split grids */
.ds-about-intro-section {
  padding-top: 130px;
  padding-bottom: 72px;
}
.ds-about-intro-lead {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: var(--line-height-base);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-faint);
  max-width: 230px;
  margin: 0;
}
.ds-about-title {
  font-size: clamp(32px, 6vw, 64px);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  margin: 0;
  max-width: 620px;
}
.ds-about-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-48);
  flex-wrap: wrap-reverse;
}
.ds-about-intro .ds-page-title {
  text-align: right;
}
.ds-about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-80);
  align-items: center;
}
.ds-about-split-section {
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-about-split-title {
  font-size: 32px;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-bold);
  margin: 0 0 20px;
  line-height: 1.15;
}
.ds-about-split-text {
  font-size: var(--font-size-17);
  line-height: var(--line-height-relaxed);
  color: var(--ink-muted);
  margin: 0 0 20px;
}
.ds-about-split-text--last {
  margin: 0;
}
.ds-values-section {
  padding-top: var(--space-100);
  padding-bottom: var(--space-100);
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-values-title {
  margin: 0 0 56px;
}
.ds-value-card-title {
  font-size: 19px;
  font-weight: var(--font-weight-semibold);
  margin: 0 0 12px;
}
.ds-value-card-text {
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0;
}
.ds-about-office {
  padding-top: 80px;
  padding-bottom: var(--space-140);
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--border-width);
  background: var(--neutral-border);
  border: var(--border-width) solid var(--neutral-border);
}
.ds-value-card {
  background: var(--neutral-bg);
  padding: 40px;
}

/* Client outcomes / case studies (home) — reuses .ds-values-grid/.ds-value-card from About */
.ds-outcomes-section {
  padding-top: var(--space-100);
  padding-bottom: 40px;
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-outcomes-title {
  margin: 0 0 56px;
}
.ds-case-title {
  font-size: 19px;
  font-weight: var(--font-weight-semibold);
  margin: 0 0 16px;
}
.ds-case-label {
  margin: 0 0 4px;
}
.ds-case-text {
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0 0 16px;
}
.ds-case-result {
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--ledger-blue);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

/* Contact page: asymmetric split (narrower info column, wider form) instead of an even 1fr/1fr like About */
.ds-contact-section {
  padding-top: var(--space-140);
  padding-bottom: var(--space-140);
}
.ds-contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-100);
}
.ds-contact-title {
  font-size: clamp(34px, 5.5vw, 58px);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-flat);
  margin: 0 0 24px;
}
.ds-contact-lede {
  font-size: 18px;
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0 0 var(--space-56);
  max-width: 420px;
}
.ds-contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ds-contact-field-label {
  margin-bottom: 6px;
}
.ds-contact-value {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
}
.ds-contact-phone-row {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.ds-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.ds-form-label {
  display: block;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--ink-muted);
  margin-bottom: var(--space-8);
}
.ds-form-textarea {
  font-family: inherit;
  resize: vertical;
}
.ds-form-submit-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ds-submit-btn {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  padding: 16px 28px;
  border: none;
  border-radius: var(--radius-base);
  width: fit-content;
}
.ds-form-disclaimer {
  font-size: 13px;
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0;
}

/* Problemas reales (home, Sprint 1) — lista de síntomas bajo el statement de la sección */
.ds-problem-list {
  list-style: none;
  margin: var(--space-40) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16) var(--space-40);
  max-width: 900px;
}
.ds-problem-list li {
  position: relative;
  padding-left: var(--space-20);
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
}
.ds-problem-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ledger-blue);
}

/* Cómo pensamos (home, Sprint 1) — reusa .ds-service-row (Soluciones) sin la 3ª columna de resultado */
.ds-service-row--duo {
  grid-template-columns: 64px 1fr;
}

/* Proceso (home, Sprint 1) — línea de proceso limpia, sin cajas independientes */
.ds-process-section {
  padding-top: var(--space-140);
  padding-bottom: var(--space-140);
  border-top: var(--border-width) solid var(--neutral-border);
  text-align: center;
}
.ds-process-kicker {
  margin: 0 0 var(--space-64);
}
.ds-process-flow {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ds-process-step {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-navy);
}
/* Flecha decorativa entre pasos vía CSS (no un <li> aparte) — evita que el
   accordion de lectura de listas cuente 9 ítems en vez de 5, y la sintaxis
   content: "↓" / "" le da nombre accesible vacío al generated content. */
.ds-process-step:not(:last-child)::after {
  content: '↓' / '';
  display: block;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 20px;
  margin: var(--space-24) 0;
}

/* Capacidades (home, Sprint 1) — respaldo técnico agrupado por categoría, sin logos de tecnologías */
.ds-capabilities-section {
  padding-top: var(--space-100);
  padding-bottom: var(--space-100);
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-capabilities-title {
  margin: 0 0 56px;
}
.ds-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 var(--space-24);
}
.ds-capability-item {
  border-top: var(--border-width) solid var(--neutral-border);
  padding: var(--space-24) 0;
}
.ds-capability-title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-8);
}
.ds-capability-text {
  font-size: var(--font-size-14);
  line-height: var(--line-height-base);
  color: var(--ink-muted);
  margin: 0;
}

/* Equipo (home, Sprint 1) — 3 especialistas, reusa .ds-value-card (About) como celda */
.ds-team-section {
  padding-top: var(--space-100);
  padding-bottom: var(--space-100);
  border-top: var(--border-width) solid var(--neutral-border);
}
.ds-team-section-title {
  margin: 0 0 56px;
}
.ds-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--border-width);
  background: var(--neutral-border);
  border: var(--border-width) solid var(--neutral-border);
}
.ds-team-grid .ds-eyebrow {
  margin-top: var(--space-16);
}

/* Tablet: 768-1023px — ver --breakpoint-tablet en tokens.css (no usable dentro de @media) */
@media (max-width: 1023px) {
  .ds-shell-wide,
  .ds-shell,
  .ds-header-inner {
    padding-left: var(--space-32);
    padding-right: var(--space-32);
  }
  .ds-team-copy {
    margin-right: var(--space-32);
  }
  .ds-about-split {
    gap: var(--space-48);
  }
  .ds-contact-grid {
    gap: var(--space-56);
  }
  .ds-capabilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ds-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: <=767px — ver --breakpoint-mobile en tokens.css (no usable dentro de @media) */
@media (max-width: 767px) {
  .ds-shell-wide,
  .ds-shell,
  .ds-header-inner {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
  }

  .ds-nav-toggle {
    display: flex;
  }
  .ds-nav-panel {
    display: none;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--neutral-bg);
    border-bottom: var(--border-width) solid var(--neutral-border);
    padding: var(--space-8) var(--space-20) var(--space-24);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .ds-nav-panel.is-open {
    display: flex;
  }
  .ds-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .ds-nav .ds-nav-link {
    padding: var(--space-14) 0;
    font-size: var(--font-size-16);
    box-shadow: var(--shadow-inset-underline);
  }
  .ds-header-cta {
    margin-top: var(--space-16);
    text-align: center;
    padding: var(--space-14) var(--space-20);
    box-sizing: border-box;
    min-height: 44px;
  }

  .ds-hero-grid,
  .ds-closing-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .ds-hero-line-1,
  .ds-hero-line-2,
  .ds-hero-copy,
  .ds-closing-copy,
  .ds-closing-heading-col {
    grid-column: auto;
  }
  .ds-hero-line-2 {
    text-align: left;
    margin-top: var(--space-8);
  }
  .ds-hero-copy {
    margin-top: var(--space-24);
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
  .ds-service-row-number {
    font-size: 64px;
  }
  .ds-service-row-flex {
    justify-content: flex-start !important;
  }
  .ds-service-row-content {
    text-align: left !important;
    max-width: none !important;
  }
  .ds-method-grid {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .ds-manifesto-mark {
    font-size: clamp(64px, 24vw, 120px) !important;
    left: 12px !important;
  }

  .ds-closing-copy {
    text-align: left;
    margin-bottom: var(--space-32);
    max-width: none;
  }

  .ds-team-row {
    flex-direction: column;
    margin-top: var(--space-64);
  }
  .ds-team-copy {
    width: 100%;
    max-width: none;
    margin-right: 0;
    padding: 0 0 var(--space-32);
    text-align: left;
  }
  .ds-team-row .sc-host-x {
    width: 100% !important;
    height: 320px !important;
  }
  .ds-about-split .sc-host-x {
    height: 280px !important;
  }
  .ds-about-office .sc-host-x {
    height: 260px !important;
  }

  .ds-service-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-28) 0;
  }
  .ds-services-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
  }
  .ds-services-intro p {
    max-width: none;
  }

  .ds-about-split {
    grid-template-columns: 1fr;
  }
  .ds-values-grid {
    grid-template-columns: 1fr;
  }
  .ds-about-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }
  .ds-about-intro .ds-page-title {
    text-align: left;
  }

  .ds-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-56);
  }

  .ds-problem-list {
    grid-template-columns: 1fr;
  }
  .ds-process-section {
    padding-top: var(--space-100);
    padding-bottom: var(--space-100);
  }
  .ds-capabilities-grid {
    grid-template-columns: 1fr;
  }
  .ds-team-grid {
    grid-template-columns: 1fr;
  }
}