/* ==========================================================================
   tswksa.com — tipografía por idioma.

   La landing que mandó el cliente venía en tres copias completas del DOM, una
   por idioma, y las tres NO eran el mismo marcado con el texto cambiado: 36 de
   las 171 etiquetas traían estilos distintos. No era ruido, era trabajo
   tipográfico deliberado — en chino y en árabe las versaletes con tracking
   ancho no se leen, los cuerpos de texto piden más interlínea, y los números
   de teléfono y los correos necesitan aislarse del sentido de escritura.

   Al colapsar las tres copias en una, esas diferencias tenían que ir a algún
   lado. Están aquí: cada clase declara el inglés, y `html[lang="zh"]` y
   `html[lang="ar"]` sólo sobrescriben lo que de verdad cambia.

   EL GRUESO DE ESTE ARCHIVO ESTÁ GENERADO a partir de las tres copias del
   cliente, no escrito a mano. Si hay que cambiar tipografía de un idioma, se
   cambia aquí; context/index.html queda como la fuente original y no se
   vuelve a procesar.

   Dos cosas se normalizaron al hacerlo, porque el archivo del cliente las
   trataba distinto sin razón visible:

     - el eyebrow de la sección de contacto perdía la mono en chino mientras
       los otros cinco la conservaban
     - la quinta tarjeta de servicios usaba un tamaño de cuerpo distinto en
       árabe que las otras cuatro

   El resto del maquetado —rejillas, paddings, bordes, colores— sigue en los
   atributos style= del HTML, tal como venía. No se tocó.
   ========================================================================== */

/* EL ATRIBUTO hidden TIENE QUE GANAR SIEMPRE.
   
   El navegador aplica [hidden] { display: none } desde su hoja de agente de
   usuario, que es la que pierde contra cualquier otra. Dos cosas de este
   sitio la vencían sin que se notara:
   
     - el <form> lleva display:flex en su atributo style=, que viene de la
       maqueta del cliente. Tras un envío correcto el código hacía
       form.hidden = true y el formulario SEGUÍA EN PANTALLA, vacío y con el
       botón atascado en «Sending…» junto al panel verde. Se vio en las
       capturas del envío real, no en las pruebas: la prueba leía la propiedad
       .hidden —que sí valía true— en vez de mirar si se veía.
     - `.tsw-consent .tsw-err { display: block }` hacía lo mismo con el hueco
       del error del consentimiento, que ocupaba una línea vacía aun oculto.
   
   Una regla y se acaba la categoría entera de defecto. */
[hidden] { display: none !important; }

/* Lo único que el cliente traía en un <style> del <head>. */
body { margin: 0; background: #f7f5f1; }
a { color: #1f5b4d; text-decoration: none; }
a:hover { color: #1c1a16; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; }

/* El envoltorio traía dir="rtl" en la copia árabe; ahora lo lleva <html> y la
   propiedad lógica hace el resto. */
html[dir="rtl"] .page { text-align: start; }

/* --------------------------------------------------------- enlace de salto */

.skip-link {
  /* Se esconde recortándolo, NO mandándolo a -9999px. Con inset a un lado,
     en árabe el lado es el otro y el enlace se sale por la derecha
     empujando el ancho del documento entero. Recortar no tiene lado. */
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 10;
  background: #1c1a16;
  color: #f7f5f1;
  /* Sin padding mientras está escondido: con box-sizing de contenido, los
     12x18 de relleno le daban 37x25 reales a una caja declarada de 1x1. */
  padding: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
.skip-link:focus {
  width: auto;
  height: auto;
  padding: 12px 18px;
  overflow: visible;
  clip-path: none;
  color: #f7f5f1;
}

/* ------------------------------------------------------ selector de idioma

   El estado activo va en aria-pressed y no en una clase: con un solo DOM el
   botón encendido cambia en caliente, y un lector de pantalla necesita saber
   cuál está pulsado de todas formas. En las tres copias del cliente esto era
   un background distinto en cada archivo. */

.lang-btn {
  border: none;
  background: transparent;
  color: #4a463e;
  padding: 8px 13px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.lang-btn--zh {
  font-family: 'Noto Serif SC', serif;
  font-size: 12px;
  letter-spacing: normal;
  border-inline-start: 1px solid #cfc9bb;
}
.lang-btn--ar {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px;
  letter-spacing: normal;
  border-inline-start: 1px solid #cfc9bb;
}
.lang-btn[aria-pressed="true"] {
  background: #1f5b4d;
  color: #f7f5f1;
}

/* ------------------------------------------------------------- sin script */

.noscript {
  margin: 0 0 8px;
  padding: 14px 16px;
  border: 1px solid #cfc9bb;
  background: #f7f5f1;
  font-size: 13.5px;
  line-height: 1.7;
  color: #4a463e;
}

/* ==========================================================================
   Desde aquí, generado. Ver la cabecera.
   ========================================================================== */

.page {
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  color: #1c1a16;
  background: #f7f5f1;
}
html[lang="zh"] .page {
  font-family: 'Noto Serif SC','Helvetica Neue',Helvetica,Arial,sans-serif;
}
html[lang="ar"] .page {
  font-family: 'IBM Plex Sans Arabic','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.brand-sub {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6e6a60;
}
html[lang="zh"] .brand-sub {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: none;
}
html[lang="ar"] .brand-sub {
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: normal;
  text-transform: none;
}

.nav {
  display: flex;
  gap: 26px;
  font-size: 13px;
  color: #4a463e;
  flex-wrap: wrap;
}
html[lang="zh"] .nav {
  font-size: 13.5px;
}
html[lang="ar"] .nav {
  font-size: 14px;
}

.nav-cta {
  background: #1c1a16;
  color: #f7f5f1;
  padding: 11px 18px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
html[lang="zh"] .nav-cta {
  font-size: 13px;
  letter-spacing: normal;
}
html[lang="ar"] .nav-cta {
  font-size: 13.5px;
  letter-spacing: normal;
}

.eyebrow {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1f5b4d;
}
html[lang="zh"] .eyebrow {
  letter-spacing: 0.18em;
  text-transform: none;
}
html[lang="ar"] .eyebrow {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
}

.eyebrow-inverse {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8fbcae;
}
html[lang="zh"] .eyebrow-inverse {
  letter-spacing: 0.18em;
  text-transform: none;
}
html[lang="ar"] .eyebrow-inverse {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
}

.hero-title {
  margin: 0;
  font-family: 'Newsreader',Georgia,serif;
  font-weight: 300;
  font-size: clamp(38px,5vw,62px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
html[lang="zh"] .hero-title {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(32px,4.4vw,54px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: wrap;
}
html[lang="ar"] .hero-title {
  font-family: inherit;
  font-size: clamp(32px,4.4vw,54px);
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: wrap;
}

.hero-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #4a463e;
  max-width: 52ch;
}
html[lang="zh"] .hero-lede {
  line-height: 1.9;
  max-width: 34em;
}
html[lang="ar"] .hero-lede {
  font-size: 16.5px;
  line-height: 1.95;
  max-width: 40ch;
}

.btn-primary {
  background: #1f5b4d;
  color: #f7f5f1;
  padding: 15px 26px;
  font-size: 13.5px;
}
html[lang="zh"] .btn-primary {
  font-size: 14px;
}
html[lang="ar"] .btn-primary {
  font-size: 14.5px;
}

.btn-ghost {
  border: 1px solid #1c1a16;
  color: #1c1a16;
  padding: 15px 26px;
  font-size: 13.5px;
}
html[lang="zh"] .btn-ghost {
  font-size: 14px;
}
html[lang="ar"] .btn-ghost {
  font-size: 14.5px;
}

.stat-cell {
  padding: 36px 24px 38px;
  border-inline-start: 1px solid #ded9cd;
}

.stat-label {
  margin-top: 10px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6e6a60;
}
html[lang="zh"] .stat-label {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
}
html[lang="ar"] .stat-label {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
}

.about-title {
  margin: 0;
  font-family: 'Newsreader',Georgia,serif;
  font-weight: 300;
  font-size: clamp(28px,3.2vw,40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
html[lang="zh"] .about-title {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(26px,3vw,38px);
  line-height: 1.35;
  letter-spacing: normal;
}
html[lang="ar"] .about-title {
  font-family: inherit;
  font-size: clamp(26px,3.2vw,40px);
  line-height: 1.35;
  letter-spacing: normal;
}

.about-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #4a463e;
}
html[lang="zh"] .about-body {
  line-height: 1.95;
}
html[lang="ar"] .about-body {
  font-size: 15px;
  line-height: 2;
}

.pullquote {
  font-family: 'Newsreader',Georgia,serif;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.45;
}
html[lang="zh"] .pullquote {
  font-family: inherit;
  font-weight: inherit;
  font-size: 18px;
}
html[lang="ar"] .pullquote {
  font-family: inherit;
  font-weight: inherit;
  font-size: 18px;
}

.services-title {
  margin: 20px 0 0;
  font-family: 'Newsreader',Georgia,serif;
  font-weight: 300;
  font-size: clamp(28px,3.4vw,42px);
  line-height: 1.15;
  max-width: 20ch;
}
html[lang="zh"] .services-title {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(26px,3.2vw,40px);
  line-height: 1.35;
  max-width: 20em;
}
html[lang="ar"] .services-title {
  font-family: inherit;
  font-size: clamp(26px,3.2vw,40px);
  line-height: 1.35;
  max-width: 24ch;
}

.card-title {
  font-family: 'Newsreader',Georgia,serif;
  font-size: 23px;
}
html[lang="zh"] .card-title {
  font-family: inherit;
  font-size: 20px;
}
html[lang="ar"] .card-title {
  font-family: inherit;
  font-size: 20px;
}

.card-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #4a463e;
}
html[lang="zh"] .card-body {
  font-size: 13.5px;
  line-height: 1.9;
}
html[lang="ar"] .card-body {
  font-size: 14px;
  line-height: 1.95;
}

.process-title {
  margin: 20px 0 0;
  font-family: 'Newsreader',Georgia,serif;
  font-weight: 300;
  font-size: clamp(28px,3.4vw,42px);
  line-height: 1.15;
  max-width: 22ch;
}
html[lang="zh"] .process-title {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(26px,3.2vw,40px);
  line-height: 1.35;
  max-width: none;
}
html[lang="ar"] .process-title {
  font-family: inherit;
  font-size: clamp(26px,3.2vw,40px);
  line-height: 1.35;
  max-width: none;
}

.step-label {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1f5b4d;
}
html[lang="zh"] .step-label {
  text-transform: none;
}
html[lang="ar"] .step-label {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.step-title {
  margin-top: 12px;
  font-family: 'Newsreader',Georgia,serif;
  font-size: 22px;
}
html[lang="zh"] .step-title {
  font-family: inherit;
  font-size: 19px;
}
html[lang="ar"] .step-title {
  font-family: inherit;
  font-size: 19px;
}

.step-body {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: #4a463e;
}
html[lang="zh"] .step-body {
  font-size: 13.5px;
  line-height: 1.9;
}
html[lang="ar"] .step-body {
  font-size: 14px;
  line-height: 1.95;
}

.sectors-title {
  margin: 20px 0 0;
  font-family: 'Newsreader',Georgia,serif;
  font-weight: 300;
  font-size: clamp(28px,3.2vw,40px);
  line-height: 1.15;
}
html[lang="zh"] .sectors-title {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(26px,3vw,38px);
  line-height: 1.35;
}
html[lang="ar"] .sectors-title {
  font-family: inherit;
  font-size: clamp(26px,3vw,38px);
  line-height: 1.35;
}

.sector-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 14px 24px;
  font-size: 14px;
  color: #3e3a33;
}
html[lang="zh"] .sector-grid {
  font-size: 14.5px;
}
html[lang="ar"] .sector-grid {
  font-size: 15px;
}

.form-title {
  margin: 18px 0 0;
  font-family: 'Newsreader',Georgia,serif;
  font-weight: 300;
  font-size: clamp(26px,3.2vw,40px);
  line-height: 1.2;
}
html[lang="zh"] .form-title {
  font-family: inherit;
}
html[lang="ar"] .form-title {
  font-family: inherit;
}

.contact-title {
  margin: 20px 0 0;
  font-family: 'Newsreader',Georgia,serif;
  font-weight: 300;
  font-size: clamp(30px,3.6vw,44px);
  line-height: 1.12;
  max-width: 18ch;
}
html[lang="zh"] .contact-title {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(28px,3.4vw,42px);
  line-height: 1.3;
  max-width: 16em;
}
html[lang="ar"] .contact-title {
  font-family: inherit;
  font-size: clamp(28px,3.4vw,42px);
  line-height: 1.3;
  max-width: 20ch;
}

.contact-lede {
  margin: 20px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #c9c3b6;
  max-width: 46ch;
}
html[lang="zh"] .contact-lede {
  line-height: 1.9;
  max-width: 30em;
}
html[lang="ar"] .contact-lede {
  font-size: 15px;
  line-height: 1.95;
  max-width: 44ch;
}

.contact-label {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8a296;
  margin-bottom: 7px;
}
html[lang="zh"] .contact-label {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: none;
}
html[lang="ar"] .contact-label {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
}

.contact-value {
  font-size: 16px;
}
html[lang="zh"] .contact-value {
  font-size: 15px;
}
html[lang="ar"] .contact-value {
  font-size: 15px;
}

.footer-legal {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a857a;
}
html[lang="zh"] .footer-legal {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: none;
}
html[lang="ar"] .footer-legal {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
}
