/* Strix Coding - overrides propios.
   Se carga AL FINAL para ganar al CSS del tema (regla docs/best-practices.md).
   OJO: cargar al final solo DESEMPATA a igual especificidad. Para ganarle a una
   regla del tema hay que igualar o superar su selector; cada override al tema
   lleva anotada su especificidad. */

/* ---------------------------------------------------------------------------
   ESCALA TIPOGRAFICA
   Todos los peldanos salen del template, no son numeros inventados:
     50/32/26/22/20/16  el <style title="dynamic-css"> del HTML (h2/h3/h4/h5/h6/body)
     13                 .themeht-btn y .theme-title h6 (shortcodes.css)
     12                 .portfolio-cat a (shortcodes.css:700)

   Los INTERLINEADOS van sin unidad a proposito. El tema los declara en pixeles
   ABSOLUTOS (body 26px, h3 42px, h4 36px), asi que todo lo que baja de tamano
   sin declarar line-height hereda el px viejo: el nombre de los testimonios
   estaba a 16px con 36px de interlineado (ratio 2.25). Medidos en el navegador
   habia 12 elementos asi.
   Regla practica: si una regla de este archivo declara font-size, declara
   line-height. Las unicas excepciones legitimas son .sx-tm-avatar (centra con
   place-items) y .sx-tm-quote::before (ya trae line-height:1).

   16px x 1.625 = 26px EXACTOS, el mismo interlineado que ya se heredaba: por eso
   subir el cuerpo de 14.5 a 16 no cambia la altura de los parrafos.
   --------------------------------------------------------------------------- */
:root {
  /* tamanos */
  --sx-t-h2: clamp(32px, 3.5vw, 50px); /* extremos en escalon: 32 = h3, 50 = h2 */
  --sx-t-banner: 22px;                 /* = h5 */
  --sx-t-card: 20px;                   /* = h6 */
  --sx-t-body: 16px;                   /* = body */
  --sx-t-ui: 13px;                     /* = .themeht-btn */
  --sx-t-chip: 12px;                   /* = .portfolio-cat a */

  /* interlineados, SIN unidad */
  --sx-lh-h2: 1.2;      /* = 60/50, el ratio h2 exacto del tema */
  --sx-lh-title: 1.35;
  --sx-lh-body: 1.625;  /* = 26/16, el ratio body exacto del tema */
  --sx-lh-cap: 1.5;
  --sx-lh-flat: 1;      /* pildoras y chips */

  --sx-ls-h2: -0.02em;
  --sx-ls-eyebrow: 0.18em;
  --sx-ls-caps: 0.08em; /* UN tracking para todo lo que va en MAYUSCULAS */

  --sx-w-title: 600;
  --sx-w-ui: 500;
  --sx-w-chip: 600;

  --sx-sans: Sora, sans-serif;
  --sx-disp: "Plus Jakarta Sans", sans-serif;

  --sx-navy: #001733;
  --sx-blue: #0052cc;      /* azul sobre fondo CLARO */
  --sx-blue-dk: #003d99;
  --sx-blue-lt: #6f9bff;   /* azul sobre fondo OSCURO (tarjetas navy, hero) */
  --sx-blue-lt-hi: #9dbcff;
  --sx-mut: #5c6470;
  --sx-mut-dark: #a7b1c6;  /* secundario sobre navy */

  --sx-ease: cubic-bezier(.61, 1, .88, 1); /* la del tema (.arrow-button) */
}

/* ---------------------------------------------------------------------------
   MENU PRINCIPAL
   Al anadir "Resources" el menu llego a 7 items y a 1440 la barra se partia en
   dos lineas: los items sumaban 546px y los margenes del tema (10px por lado)
   otros 140 = 686, exactamente el ancho disponible. "Blogs" se movio dentro de
   Resources para volver a 6, pero el margen se deja en 7px como colchon: con 6
   items entraba justo, y cualquier rotulo mas largo lo habria vuelto a partir.
   Asi no se toca el tamano de letra (13px, que es un escalon del tema).

   El apretujon a 1200px NO es de este cambio: viene del template y se comporta
   igual en la beta desplegada, que aun tiene el menu anterior (medido).
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .main-nav > ul > li { margin: 0 7px; }
}

/* El bloque del telefono traia un borde derecho que lo separaba del boton de
   rejilla del header. Ese boton se quito (no se usaba y abria un panel con un
   segundo formulario), asi que la linea quedaba separando el telefono de nada. */
#site-header .header-number { border-right: 0; padding-right: 0; }

/* ---------------------------------------------------------------------------
   PIEZAS COMPARTIDAS por las secciones propias
   .sx-head es UNA clase para las 4 cabeceras (servicios, contacto, testimonios,
   blog). Antes eran 4 nombres distintos con reglas identicas copiadas: eso ERA
   el duplicado, por eso se renombran en vez de agrupar los selectores.
   --------------------------------------------------------------------------- */
.sx-eyebrow {
  display: block; /* en el hero es un <span>: sin esto el ::after no rompe linea */
  margin: 0 0 14px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-chip);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: var(--sx-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sx-blue);
}

/* La rayita va a la IZQUIERDA por defecto (hero y bloque del isotipo, que son
   de alineacion izquierda) y se centra solo dentro de .sx-head. Asi build.py no
   tiene que emitir ninguna clase modificadora. */
.sx-eyebrow::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--sx-blue);
  margin: 12px 0 0;
}

.sx-head .sx-eyebrow::after { margin-inline: auto; } /* (0,2,0) */

.sx-lead {
  margin: 18px auto 0;
  max-width: 56ch;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-head {
  max-width: 720px;
  margin: 0 auto 52px;
  text-align: center;
}

.sx-head h2 {
  margin: 0;
  font-family: var(--sx-disp);
  font-weight: var(--sx-w-title);
  font-size: var(--sx-t-h2);
  line-height: var(--sx-lh-h2);
  letter-spacing: var(--sx-ls-h2);
  color: var(--sx-navy);
  text-wrap: balance;
  /* Lo mismo que hace el tema en `.theme-title h2` (shortcodes.css:38) y por la
     misma razon: title-text.js anima las palabras desde x:-30 durante 0.8s, y
     sin esto asoman fuera del contenedor. */
  overflow: hidden;
}

.sx-head h2 span { color: var(--sx-blue); }

/* El .elementor-container del tema es flex en fila: sin esto la cabecera y la
   rejilla se colocan una al lado de la otra en vez de apilarse. */
.sx-svc-section .elementor-container,
.sx-ct-section .elementor-container,
.sx-tm-section .elementor-container,
.sx-bl-section .elementor-container {
  display: block;
}

/* ---------------------------------------------------------------------------
   HERO
   El h1 del template estaba dimensionado a 100px para "Next-Gen IT Solutions",
   dos lineas cortas. El titular nuevo es mucho mas largo: a ese tamano ocupaba
   5 lineas (550px) y empujaba el parrafo fuera de pantalla. Se reescala para
   que entre y el cuerpo siga visible sin hacer scroll.
   Es la UNICA excepcion consciente a la escala junto con el marquee: no hay
   peldano del tema entre 50 y 80, y 80 reproduce el problema que se arreglo.
   --------------------------------------------------------------------------- */
/* Elementor genera `.elementor-19 .elementor-element.elementor-element-1b6f845 h1`
   en post-19.css, con especificidad (0,3,1). Hay que SUPERARLA, no empatarla:
   cargar custom.css al final solo desempata. Aqui van 4 clases -> (0,4,1). */
.elementor-section.elementor-element-a2db513 .elementor-element-1b6f845 .banner-content h1 {
  font-size: clamp(34px, 4.4vw, 66px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* El eyebrow del hero usa el mismo tratamiento que las otras 5 secciones.
   build.py lo convierte de <h6 class="mb-3 animated2"> a
   <span class="sx-eyebrow animated2">: sobre `span` el tema no tiene ninguna
   regla, mientras que `.banner-content p` (0,1,1) le habria ganado a
   .sx-eyebrow (0,1,0). Y `mb-3` se quita alli, no se sobrescribe aqui: es
   `margin-bottom: 1rem !important`.
   El azul cambia porque va sobre la foto oscura: #0052cc da 2.5:1 de contraste
   sobre el overlay #031948 (falla AA); #6f9bff da 6.3:1. No es un color nuevo,
   es el que ya usan las tarjetas navy de servicios. */
.banner-text .sx-eyebrow { color: var(--sx-blue-lt); }            /* (0,2,0) */
.banner-text .sx-eyebrow::after { background: var(--sx-blue-lt); }

/* El parrafo del hero venia a 18px del tema (`.banner-content p`), que no es un
   escalon. A 20 = h6 y sigue leyendose como entradilla. */
.banner-text .banner-inner p {
  font-size: var(--sx-t-card);
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Seccion "el isotipo como ventana"
   El markup lo inyecta inject_owl_section() en website/.tools/build.py.
   NO ocultar aqui las piezas: el estado inicial lo pone GSAP. Si el JS no corre,
   la seccion se ve entera sin animar, en vez de quedarse invisible.
   --------------------------------------------------------------------------- */
.sx-owl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 60px;
  align-items: center;
}

.sx-owl-art { min-width: 0; }

.sx-owl-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* las piezas entran desde fuera del viewBox */
}

.sx-owl-copy { min-width: 0; }

.sx-owl-title {
  margin: 0 0 24px;
  font-family: var(--sx-disp);
  font-weight: var(--sx-w-title);
  font-size: var(--sx-t-h2);
  line-height: var(--sx-lh-h2);
  letter-spacing: var(--sx-ls-h2);
  color: var(--sx-navy);
  text-wrap: balance;
  overflow: hidden; /* igual que .sx-head h2: title-text.js anima desde x:-30 */
}

/* Combinador HIJO, no descendiente. El eyebrow del isotipo ahora vive dentro de
   .sx-owl-copy, y `.sx-owl-copy p` (0,1,1) le ganaria a `.sx-eyebrow` (0,1,0)
   imponiendole este margen. */
.sx-owl-copy > p {
  margin: 0 0 18px;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
}

.sx-owl-btn,
.sx-owl-btn:visited {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 30px;
  border-radius: 100px;
  background: var(--sx-blue);
  color: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
}

.sx-owl-btn:hover,
.sx-owl-btn:focus {
  background: var(--sx-blue-dk);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   RITMO VERTICAL DE LA PAGINA
   Medido de contenido a contenido (no de caja a caja), los huecos entre
   secciones estaban en 0, 30, 56, 63, 100, 112 y 165px: sin ritmo, y los
   grandes se leian como paginas a medio llenar.
   Objetivo: 80px parejos entre todas las secciones = 40 abajo + 40 arriba.
   --------------------------------------------------------------------------- */
.sx-svc-section,
.sx-ct-section,
.sx-tm-section,
.sx-pj-section,
.sx-bl-section {
  padding: 40px 0;
}

/* El bloque del isotipo abre la pagina despues del hero. */
.sx-owl { padding: 80px 0 40px; }

/* Las dos bandas de marquee traian 120/30 y 0/0. La de 120 arriba era la que
   dejaba 165px despues de los testimonios.
   La segunda banda SI tiene regla propia de Elementor en post-19.css
   (`.elementor-19 .elementor-element.elementor-element-9a8e954`, 0-3-0), asi que
   hay que superarla; la primera no la tiene y basta con la clase. */
.elementor-element-ca7f2db { padding: 40px 0; }

.elementor-section.elementor-top-section.elementor-element-9a8e954 { padding: 40px 0; }

/* El portfolio no traia padding: sin esto quedaba pegado a las bandas. */
.elementor-element-8d4bccd { padding: 40px 0; }

/* ---------------------------------------------------------------------------
   FOOTER
   El tema deja `margin-bottom: 50px` en el footer (franja blanca al final de la
   pagina) y `padding: 100px 0`, o sea 150px muertos debajo del copyright.
   El copyright debe cerrar la pagina.
   --------------------------------------------------------------------------- */
footer.footer {
  margin-bottom: 0;
  padding-bottom: 0;
  /* El tema abria con 100px. Medido, el contenido de la fila mide 289px: 100
     arriba mas los 80 de abajo eran 180px de aire para 289 de contenido. 56 deja
     al footer separado del blog sin que parezca media pagina vacia. */
  padding-top: 56px;
}

/* El tema deja 80px entre la fila y la barra del copyright. */
footer.footer .primary-footer { margin-bottom: 32px; }

footer.footer .secondary-footer { padding: 18px 0; }

/* El tema le mete otros 30px por arriba a la fila del copyright: con eso la
   barra medía 93px para un solo renglon de 26. */
footer.footer .secondary-footer-inner { padding-top: 0; }

footer.footer .copyright {
  margin: 0;
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-cap);
}

/* --- Tipografia del footer -------------------------------------------------
   Medido en el navegador, aqui convivian cinco tamanos que no caen en ningun
   escalon (24, 14.5, 14) y dos familias: los titulos de widget en Sora y todos
   los demas titulos del sitio en Plus Jakarta. Se alinea con la escala general.

   La jerarquia de color pasa a ser una regla y no un accidente:
     enlaces  -> blanco        (igual que "Useful Links" y "Our Services")
     texto    -> #c7d2e4       (tagline y direccion, que no son enlaces)
   Antes el correo y el telefono de la marca iban en #c7d2e4 mientras los
   enlaces de al lado iban en blanco, siendo el mismo rol. */
footer.footer .widget-title {
  font-family: var(--sx-disp);      /* era Sora; el resto de titulos del sitio va en PJS */
  font-size: var(--sx-t-banner);    /* 24 -> 22 = h5 del template */
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
}

footer.footer .newsletter-form input,
footer.footer input[type="email"] {
  font-size: var(--sx-t-body);      /* 14 -> 16: escala, y de paso Safari iOS deja de hacer zoom */
  line-height: var(--sx-lh-cap);
}

/* --- Bloque de marca con la mascota (primera columna) ------------------------
   El markup lo genera rebuild_footer_brand() en build.py.
   La mascota es un WebP que YA trae el navy, el arco y las ondas, con los bordes
   difuminados a transparente en el propio archivo: por eso se funde con el
   footer sin mask-image y sin que se vea el rectangulo. Su navy (0,12,43) no es
   exactamente el del footer (0,23,51) — el desvanecido es lo que lo disimula. */
.sx-fb {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* La mascota se sale de su caja por la izquierda: en el mockup arranca pegada al
   borde. `flex: 0 0 auto` + margen negativo, para que no le robe ancho al texto. */
.sx-fb-mascot {
  flex: 0 0 auto;
  width: 190px;
  height: auto;
  margin: -26px 0 -34px -34px;
  pointer-events: none;
}

.sx-fb-txt { min-width: 0; }

.sx-fb-logo {
  display: inline-block;
  margin-bottom: 14px;
}

.sx-fb-logo img { width: 168px; height: auto; }

/* la rayita azul del mockup, bajo el logotipo */
.sx-fb-logo::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--sx-blue);
  margin-top: 14px;
}

.sx-fb-tag {
  margin: 0 0 18px;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: #c7d2e4;
}

.sx-fb-tag span { color: var(--sx-blue-lt); }

.sx-fb-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.sx-fb-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.sx-fb-ico {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--sx-blue-lt);
  line-height: 0;
}

/* Los tres son enlaces: direccion (a la ficha de Google), correo y telefono. */
.sx-fb-list a {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  font-weight: var(--sx-w-ui);
  color: #fff;
}

.sx-fb-list a:hover { color: var(--sx-blue-lt); }

/* Reparto de las 3 columnas del footer.
   Bootstrap solo reparte en doceavos (25 / 33.3 / 41.6%) y ninguna combinacion
   servia: la altura del footer la fija "Our Services", y su item mas largo
   ("Custom Software Development") mide 258px en una linea. Con las columnas a
   4/4/4 la sublista se quedaba en 200px, los 6 servicios caian a 2 lineas y el
   footer se iba a 441px de alto con medio contenedor vacio.
   31 / 40 / 29 da 446 / 576 / 418: la marca cabe justa, "Our Services" pasa a
   una linea por item y el newsletter conserva sitio para el campo. */
@media (min-width: 1200px) {
  .primary-footer .sx-fcol { width: 31%; }
  .primary-footer .sx-flinks { width: 40%; }
  .primary-footer .sx-fnews { width: 29%; }

  /* dentro de los enlaces: la lista corta estrecha, los servicios anchos */
  .primary-footer .sx-flinks > .row > div:first-child { width: 38%; }
  .primary-footer .sx-flinks > .row > div:last-child { width: 62%; }
}

/* En movil la columna baja a ~315px: con la mascota al lado, al texto le
   quedaban 129px y la direccion se deshacia. Se apilan. */
@media (max-width: 640px) {
  .sx-fb { display: block; }
  .sx-fb-mascot { display: block; width: 150px; margin: -14px 0 6px -20px; }
}

/* ---------------------------------------------------------------------------
   SERVICIOS — tarjetas navy con imagen arriba (diseno del mockup).
   El markup lo genera rebuild_services_section() en website/.tools/build.py.
   El navy y el azul salen de 01-client/branding/palette.md, no del mockup.
   --------------------------------------------------------------------------- */
.sx-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.sx-svc {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #0f121c;
  box-shadow: 0 14px 34px rgba(0, 23, 51, 0.1);
  transition: transform .45s var(--sx-ease), box-shadow .45s;
}

.sx-svc-img {
  aspect-ratio: 4 / 3;
  overflow: hidden; /* = .service-image del tema (theme-style.css:201) */
  /* la linea azul que separa foto y cuerpo en el mockup */
  border-bottom: 3px solid #0400c3;
  transition: border-color .45s;
}

/* PANEO lateral, no zoom. Es la regla que el tema comparte entre
   .portfolio-item, .service-item, .team-member y .post-card
   (theme-style.css:202): la imagen se monta 40px mas ancha, desplazada -30px, y
   al hover vuelve a su sitio. `max-width:none` hace falta porque Elementor
   impone `.elementor img { max-width: 100% }` (0,1,1). */
.sx-svc-img img {
  max-width: none;
  width: calc(100% + 40px);
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translate3d(-30px, 0, 0);
  transition: transform .85s;
}

.sx-svc-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
}

.sx-svc-ico {
  display: block;
  color: var(--sx-blue-lt);
  margin: 0 0 16px;
  transition: color .45s;
}

.sx-svc h4 {
  margin: 0 0 10px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  font-weight: var(--sx-w-title);
  line-height: var(--sx-lh-title);
  color: #fff;
  transition: color .45s;
}

.sx-svc p {
  margin: 0 0 20px;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut-dark);
}

.sx-svc-cta,
.sx-svc-cta:visited {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  letter-spacing: 0; /* caja mixta: sin tracking. Ver el bloque de botones */
  color: var(--sx-blue-lt);
}

.sx-svc-cta em {
  display: inline-block;
  font-style: normal;
  transition: transform .25s ease;
}

/* El hover lo dispara la TARJETA entera, no cada pieza: asi el gesto es uno solo
   y no depende de que el raton caiga justo sobre el enlace. */
.sx-svc:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(0, 23, 51, 0.18); }
.sx-svc:hover .sx-svc-img { border-bottom-color: var(--sx-blue-lt); }
.sx-svc:hover .sx-svc-img img { transform: translate3d(0, 0, 0); }
.sx-svc:hover .sx-svc-ico { color: #fff; }   /* = .service-item.style-1:hover .service-icon */
.sx-svc:hover h4 { color: var(--sx-blue-lt); } /* = shortcodes.css:551 */
.sx-svc:hover .sx-svc-cta { color: var(--sx-blue-lt-hi); }
.sx-svc:hover .sx-svc-cta em { transform: translateX(4px); }

/* Entrada escalonada (la aplica custom.js). Ocultar es opt-in desde JS: si no
   corre, las tarjetas se ven. */
.sx-svc-grid.sx-armed .sx-svc { opacity: 0; }

/* ---------------------------------------------------------------------------
   CONTACTO
   --------------------------------------------------------------------------- */
.sx-ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}

.sx-ct-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-ct-item {
  display: flex;
  gap: 18px;
  padding-bottom: 30px;
  position: relative;
}

/* la linea que une los iconos en el mockup */
.sx-ct-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 56px;
  bottom: 8px;
  width: 1px;
  background: #dfe6f2;
}

.sx-ct-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e9f0fd;
  color: var(--sx-blue);
}

.sx-ct-txt h4 {
  margin: 4px 0 6px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
  transition: color .45s;
}

.sx-ct-txt p {
  margin: 0 0 8px;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-ct-txt a {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  font-weight: var(--sx-w-ui);
  color: var(--sx-blue);
}

.sx-ct-txt a:hover { color: var(--sx-blue-dk); }

/* El medallon se pinta al pasar por CUALQUIER punto del metodo, no solo por el
   icono. Mismo gesto que `.service-item.style-1:hover .service-icon` del tema. */
.sx-ct-item:hover .sx-ct-ico { background: var(--sx-blue); color: #fff; }
.sx-ct-item:hover .sx-ct-txt h4 { color: var(--sx-blue); }

.sx-ct-form {
  background: #fff;
  border: 1px solid #e6ebf3;
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 16px 40px rgba(0, 23, 51, 0.06);
}

.sx-ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.sx-ct-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: 1.4;
  font-weight: var(--sx-w-ui);
  color: var(--sx-navy);
}

/* 16px no es solo consistencia: Safari en iOS hace zoom automatico al enfocar
   cualquier campo de menos de 16px. */
.sx-ct-form input,
.sx-ct-form select,
.sx-ct-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  background: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-cap);
  font-weight: 400;
  color: var(--sx-navy);
}

.sx-ct-form textarea { resize: vertical; min-height: 120px; }

.sx-ct-form input::placeholder,
.sx-ct-form textarea::placeholder { color: #9aa4b5; }

.sx-ct-form input:focus,
.sx-ct-form select:focus,
.sx-ct-form textarea:focus {
  outline: none;
  border-color: var(--sx-blue);
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

.sx-ct-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-cap);
  /* Era #6b7484: 4.35:1 sobre el gris de seccion, por debajo del 4.5 de AA.
     `--sx-mut` es el secundario de la paleta y da 5.52:1. Ver check-contrast.js. */
  color: var(--sx-mut);
}

.sx-ct-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--sx-blue); }
.sx-ct-note a { color: var(--sx-blue); font-weight: var(--sx-w-ui); }

.sx-ct-send {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border: 0;
  border-radius: 100px;
  background: var(--sx-navy);
  color: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s, transform .35s;
}

.sx-ct-send svg { transition: transform .35s; }
.sx-ct-send:hover { background: var(--sx-blue); transform: translateY(-2px); }
.sx-ct-send:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   TESTIMONIOS
   --------------------------------------------------------------------------- */
.sx-tm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.sx-tm {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e9edf4;
  border-radius: 16px;
  padding: 26px 24px 28px;
  box-shadow: 0 12px 30px rgba(0, 23, 51, 0.05);
  transition: transform .45s var(--sx-ease), box-shadow .45s, border-color .45s;
}

.sx-tm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.sx-tm-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sx-navy);
  color: #fff;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  font-weight: var(--sx-w-title);
  transition: background .45s;
}

.sx-tm-who { flex: 1 1 auto; min-width: 0; }

/* 16px y no 20 como los titulos de tarjeta: el nombre vive en un flex
   `align-items:center` junto al avatar de 46px. A 16/1.4 la pila nombre+empresa
   mide 43.9px y cabe dentro del avatar (la fila sigue midiendo 46); a 20/1.35
   mide 48.5 y el avatar deja de mandar, que es la alineacion sobre la que se
   diseno la tarjeta. Medido: la cabecera pasa de 59px a 46px. */
.sx-tm-who h4 {
  margin: 0 0 2px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-body);
  line-height: 1.4;
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-tm-who p {
  margin: 0;
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-cap);
  /* Era #7b8496: 3.47:1 sobre el gris de seccion, el peor del sitio. El nombre
     del cliente es lo que da credibilidad al testimonio; no puede ser el texto
     mas dificil de leer de la pagina. `--sx-mut` da 5.52:1. */
  color: var(--sx-mut);
}

.sx-tm-stars {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  color: #f5b301;
}

.sx-tm-quote { position: relative; }

.sx-tm-quote::before {
  content: "\201C";
  position: absolute;
  left: -2px;
  top: -14px;
  font-family: Georgia, serif;
  font-size: 50px;
  line-height: 1;
  color: #c3d5f2;
  transition: color .45s;
}

/* Sello de Google abajo a la derecha, como en el mockup.
   `margin-top: auto` lo empuja al fondo de la tarjeta: con un margen fijo
   quedaba pegado al final de la cita y caia a distinta altura en cada tarjeta,
   segun cuantas lineas tuviera el texto. */
.sx-tm-google {
  display: block;
  align-self: flex-end;
  margin-top: auto;
  padding-top: 18px;
  line-height: 0;
}

.sx-tm-quote p {
  margin: 0;
  padding-left: 24px;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: #4d5665;
}

.sx-tm:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 23, 51, 0.14);
  border-color: #cbd9f0;
}

.sx-tm:hover .sx-tm-avatar { background: var(--sx-blue); }
.sx-tm:hover .sx-tm-quote::before { color: var(--sx-blue); }

/* ---------------------------------------------------------------------------
   PAGINAS DE SERVICIO
   Las genera build_service_page() en build.py, una por entrada de SERVICE_PAGES.
   Sustituyen el <main> entero, incluida la franja de titulo del template, asi
   que aqui hay que poner el contenedor: el ancho se iguala al de las secciones
   del home (medido, 1416px con 12 de padding) para que no desalineen.
   --------------------------------------------------------------------------- */
.sx-sv-wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 12px;
}

.sx-sv-section { padding: 48px 0; }

/* Cabecera sin tanto aire cuando no lleva eyebrow */
.sx-head--tight { margin-bottom: 38px; }

/* --- botones compartidos de la pagina ---

   EL `:visited` NO ES DECORATIVO, ARREGLA UN BUG REAL.
   `base.css` del tema trae `a:visited { color: var(--themeht-text-color) }`, que
   es navy. Ese selector vale (0,1,1) y una clase suelta como `.sx-btn` solo
   (0,1,0): en cuanto el visitante ha pasado por la pagina a la que apunta el
   boton, el tema le pisa el color y lo pinta de NAVY SOBRE AZUL. Ilegible.

   Es traicionero porque no se ve nunca en pruebas: un navegador limpio no tiene
   historial, asi que el fallo solo aparece en el navegador de quien ya ha
   navegado el sitio — el cliente, justamente. Se caza forzando el pseudoestado
   (CSS.forcePseudoState por CDP), no mirando la pagina.

   Afectaba a 8 clases de enlace propias; las 8 llevan ya su `:visited`. Al crear
   un enlace NUEVO con color propio, declararlo tambien aqui. Es la Leccion #2 del
   proyecto otra vez: al sobrescribir algo del tema hay que igualar o superar su
   selector, que cargar de ultimo solo desempata. */
.sx-btn,
.sx-btn:visited {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 100px;
  background: var(--sx-blue);
  color: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  transition: background .35s, transform .35s;
}

.sx-btn:hover { background: var(--sx-blue-dk); color: #fff; transform: translateY(-2px); }

.sx-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  color: var(--sx-navy);
}

.sx-btn-ghost em { font-style: normal; display: inline-block; transition: transform .25s ease; }
.sx-btn-ghost:hover { color: var(--sx-blue); }
.sx-btn-ghost:hover em { transform: translateX(4px); }

/* Boton de CONTORNO. Existe porque combinar `.sx-btn .sx-btn-ghost` daba fondo
   azul con texto navy: -ghost es un enlace de texto y, al ir despues en el
   archivo, su color le ganaba al blanco de .sx-btn. Se veia ilegible. */
.sx-btn-outline,
.sx-btn-outline:visited {
  display: inline-block;
  padding: 13px 28px;
  border: 1px solid var(--sx-blue);
  border-radius: 100px;
  background: transparent;
  color: var(--sx-blue);
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  transition: background .3s, color .3s;
}

.sx-btn-outline:hover { background: var(--sx-blue); color: #fff; }

/* --- 1. hero --- */
/* El degradado tiene que llegar a BLANCO antes de donde empieza la foto: las
   dos imagenes del mockup vienen sobre fondo blanco y si el fondo de la seccion
   sigue siendo azulado ahi, se ve el rectangulo de la imagen. La foto arranca al
   48% del ancho, asi que el blanco entra al 44%. */
.sx-sv-hero {
  padding: 56px 0 64px;
  background: linear-gradient(100deg, #e8effa 0%, #f2f6fd 30%, #fff 44%);
}

.sx-sv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.sx-sv-hero h1 {
  margin: 0 0 18px;
  font-family: var(--sx-disp);
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.16;
  letter-spacing: var(--sx-ls-h2);
  font-weight: 700;
  color: var(--sx-navy);
}

.sx-sv-lead {
  margin: 0 0 28px;
  max-width: 46ch;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-sv-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

.sx-sv-hero-img img { display: block; width: 100%; height: auto; }

/* --- 2. que es --- */
.sx-sv-what-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sx-sv-what,
.sx-sv-rel {
  padding: 30px 26px 32px;
  border: 1px solid #e9edf4;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  transition: transform .45s var(--sx-ease), box-shadow .45s, border-color .45s;
}

.sx-sv-ico { display: block; color: var(--sx-blue); margin: 0 0 18px; line-height: 0; }
.sx-sv-what .sx-sv-ico, .sx-sv-rel .sx-sv-ico, .sx-sv-incl .sx-sv-ico { text-align: center; }
.sx-sv-what .sx-sv-ico svg, .sx-sv-rel .sx-sv-ico svg { margin-inline: auto; }

.sx-sv-what h3,
.sx-sv-rel h3 {
  margin: 0 0 10px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-sv-what p,
.sx-sv-rel p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-sv-what:hover,
.sx-sv-rel:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 23, 51, .12);
  border-color: #d6e1f4;
}

/* --- 3. mas que una web ---
   Fondo blanco por la misma razon que el hero: la captura del dashboard viene
   sobre blanco y sobre el gris del tema se le veria la caja. */
.sx-sv-more { background: #fff; }

.sx-sv-more-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.sx-sv-more-copy p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-sv-more-img img { display: block; width: 100%; height: auto; }

/* --- 4. que incluye --- */
.sx-sv-incl-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.sx-sv-incl {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 14px 24px;
  border: 1px solid #e9edf4;
  border-radius: 14px;
  background: #fff;
  transition: transform .45s var(--sx-ease), box-shadow .45s, border-color .45s;
}

.sx-sv-incl h3 {
  margin: 0;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-body);
  line-height: 1.45;
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-sv-incl:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(0, 23, 51, .12);
  border-color: #d6e1f4;
}

/* --- 5. como ayudamos (banda navy) --- */
.sx-sv-how {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(140deg, #041634 0%, #0a2050 55%, #05173a 100%);
  padding: 46px 40px 44px;
  text-align: center;
  overflow: hidden;
}

.sx-sv-how h2 {
  margin: 0 0 12px;
  font-family: var(--sx-disp);
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.25;
  font-weight: var(--sx-w-title);
  color: #fff;
}

.sx-sv-how-sub {
  margin: 0 auto 40px;
  max-width: 56ch;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: #b9c6dc;
}

.sx-sv-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

/* la linea punteada que une los 4 pasos, a la altura de los numeros */
.sx-sv-steps::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 12.5%;
  right: 12.5%;
  border-top: 1px dashed rgba(255, 255, 255, .28);
}

.sx-sv-step { position: relative; text-align: center; }

.sx-sv-num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  /* 38px con el numero a 13 se leia diminuto dentro de una banda de 1140px */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sx-blue);
  color: #fff;
  font-family: var(--sx-sans);
  font-size: 16px;
  line-height: var(--sx-lh-flat);
  font-weight: 600;
}

.sx-sv-step-ico { display: block; color: var(--sx-blue-lt); margin: 20px 0 14px; line-height: 0; }
.sx-sv-step-ico svg { margin-inline: auto; }

.sx-sv-step h3 {
  margin: 0 0 8px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: 1.35;
  font-weight: var(--sx-w-title);
  color: #fff;
}

.sx-sv-step p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: 1.6;
  color: #a9b8d0;
}

/* --- 6. otros servicios --- */
.sx-sv-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sx-sv-rel { display: flex; flex-direction: column; }

.sx-sv-rel-cta,
.sx-sv-rel-cta:visited {
  margin-top: 18px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  color: var(--sx-blue);
}

.sx-sv-rel-cta em { font-style: normal; display: inline-block; transition: transform .25s ease; }
.sx-sv-rel:hover .sx-sv-rel-cta em { transform: translateX(4px); }

/* --- tarjetas de "More From Strix Coding", con foto ---
   Eran icono + titulo + texto, todo centrado, y quedaban planas al lado del
   resto de la pagina. Ahora abren con la FOTO del servicio al que llevan (la
   misma de la rejilla del home, no hay imagenes nuevas) y toman prestada la
   linea azul de 3px que ya separa foto y cuerpo en esas tarjetas: el visitante
   reconoce el patron.

   El texto pasa a ir a la IZQUIERDA. Centrado funcionaba con el icono solo, pero
   debajo de una foto a sangre el bloque centrado se ve flotando.

   Las reglas van DESPUES del bloque que comparten `.sx-sv-what` y `.sx-sv-rel`,
   con la misma especificidad (0,1,0): ahi el orden si desempata. La variante
   `--foto` existe para que una tarjeta sin foto (destino que no sea un servicio)
   siga saliendo centrada, como antes. */
.sx-sv-rel--foto { padding: 0; overflow: hidden; text-align: left; }

.sx-sv-rel-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 3px solid #0400c3;
}

.sx-sv-rel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--sx-ease);
}

.sx-sv-rel--foto:hover .sx-sv-rel-img img { transform: scale(1.06); }

/* El icono se monta a caballo sobre el borde de la foto: da profundidad y
   conserva el icono que ya tenia cada tarjeta. */
.sx-sv-rel--foto .sx-sv-ico {
  width: 54px;
  height: 54px;
  margin: -27px 0 14px 24px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 18px rgba(0, 23, 51, .14);
  text-align: left;
}

.sx-sv-rel--foto .sx-sv-ico svg { width: 26px; height: 26px; margin: 0; }

.sx-sv-rel--foto h3,
.sx-sv-rel--foto p { padding-inline: 24px; }
.sx-sv-rel--foto .sx-sv-rel-cta { padding: 0 24px 26px; }

@media (prefers-reduced-motion: reduce) {
  .sx-sv-rel-img img { transition: none; }
  .sx-sv-rel--foto:hover .sx-sv-rel-img img { transform: none; }
}

/* --- 7. cierre --- */
.sx-sv-end { text-align: center; padding-bottom: 64px; }
.sx-sv-end .sx-head { margin-bottom: 26px; }

@media (max-width: 1199px) {
  .sx-sv-incl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 26px; }
  .sx-sv-steps::before { display: none; }   /* en 2 filas la linea no une nada */
}

@media (max-width: 991px) {
  .sx-sv-section { padding: 34px 0; }
  .sx-sv-hero { padding: 36px 0 44px; }
  .sx-sv-hero-grid, .sx-sv-more-grid { grid-template-columns: 1fr; gap: 30px; }
  .sx-sv-what-grid, .sx-sv-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-sv-how { padding: 36px 24px 34px; }
}

@media (max-width: 640px) {
  .sx-sv-what-grid, .sx-sv-rel-grid { grid-template-columns: 1fr; }
  .sx-sv-incl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-sv-steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-sv-what, .sx-sv-rel, .sx-sv-incl, .sx-btn,
  .sx-btn-ghost em, .sx-sv-rel-cta em { transition: none; }
  .sx-sv-what:hover, .sx-sv-rel:hover, .sx-sv-incl:hover, .sx-btn:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   CONTACT US
   El bloque central (metodos + formulario) es el MISMO del home: lo genera
   build_contact_section(), aqui con el desplegable de presupuesto.
   --------------------------------------------------------------------------- */
/* Mismo truco que en el hero de las paginas de servicio: el degradado tiene que
   llegar a BLANCO PURO donde cae la foto, porque la imagen trae fondo blanco y
   si debajo hay gris se ve su rectangulo. */
.sx-cp-hero {
  padding: 44px 0 30px;
  background: linear-gradient(100deg, #e8effa 0%, #f2f6fd 26%, #fff 42%);
}

.sx-cp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: center;
}

.sx-cp-hero h1 {
  margin: 0 0 18px;
  font-family: var(--sx-disp);
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.14;
  letter-spacing: var(--sx-ls-h2);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
  text-wrap: balance;
}

.sx-cp-hero h1 span { color: var(--sx-blue); }

.sx-cp-hero-art { position: relative; }

.sx-cp-hero-art img { display: block; width: 100%; height: auto; }

/* El badge "READY TO HELP" YA viene dibujado dentro de la imagen, asi que no se
   pinta otro encima: se quedaban los dos superpuestos. Se conserva en el HTML
   solo para lectores de pantalla, que no ven el que esta en el pixel. */
.sx-cp-badge {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- que pasa despues --- */
.sx-cp-next { padding: 40px 0; }

.sx-cp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sx-cp-step {
  padding: 26px 24px 28px;
  border: 1px solid #e9edf4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 23, 51, .05);
  transition: transform .45s var(--sx-ease), box-shadow .45s, border-color .45s;
}

.sx-cp-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 23, 51, .13);
  border-color: #d6e1f4;
}

.sx-cp-step-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.sx-cp-num {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sx-blue);
  color: #fff;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-body);
  line-height: 1;
  font-weight: var(--sx-w-title);
}

.sx-cp-step-ico { color: var(--sx-blue); line-height: 0; }

.sx-cp-step h3 {
  margin: 0 0 8px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-cp-step p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

/* --- prefieres vernos --- */
.sx-cp-visit { padding: 40px 0; }

.sx-cp-visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}

/* NO se incrusta un mapa real: seria una peticion a un servidor externo y el
   sitio es 100% autocontenido. Se dibuja una tarjeta con la direccion y el boton
   abre Google Maps. */
.sx-cp-map {
  position: relative;
  aspect-ratio: 3 / 2;
  min-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e6ecf6;
  display: flex;
  align-items: flex-end;
  padding: 22px;
}

.sx-cp-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* El pin cae sobre la manzana resaltada, no en el centro geometrico de la caja */
.sx-cp-map-pin {
  position: absolute;
  left: 49.5%;
  top: 45%;
  transform: translate(-50%, -100%);
  color: var(--sx-blue);
  line-height: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 23, 51, .28));
}

/* z-index: el SVG del mapa esta posicionado y, sin esto, pinta ENCIMA de la
   tarjeta (los elementos posicionados van por delante de los que no lo estan). */
.sx-cp-map-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 12px 28px rgba(0, 23, 51, .12);
}

.sx-cp-map-card h4 {
  margin: 0 0 6px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-body);
  line-height: 1.4;
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-cp-map-card p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-cp-visit-copy h2 {
  margin: 0 0 14px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-h2);
  line-height: var(--sx-lh-h2);
  letter-spacing: var(--sx-ls-h2);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-cp-visit-copy h2 span { color: var(--sx-blue); }
.sx-cp-visit-copy .sx-lead { margin-left: 0; margin-right: 0; }

.sx-cp-vis-list {
  margin: 26px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.sx-cp-vis-list li { display: flex; gap: 14px; align-items: flex-start; }

.sx-cp-vis-ico { flex: 0 0 auto; margin-top: 2px; color: var(--sx-blue); line-height: 0; }

.sx-cp-vis-list h4 {
  margin: 0 0 3px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-body);
  line-height: 1.4;
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-cp-vis-list p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

/* --- FAQ corta --- */
.sx-cp-faq { padding: 40px 0; }
.sx-cp-faq-list { max-width: 860px; margin: 0 auto; }

.sx-cp-faq-more {
  max-width: 860px;
  margin: 22px auto 0;
  text-align: center;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-cp-faq-more a { color: var(--sx-blue); font-weight: var(--sx-w-ui); }
.sx-cp-faq-more a:hover { color: var(--sx-blue-dk); }

/* --- cierre --- */
.sx-cp-end { padding: 20px 0 60px; }

.sx-cp-end-grid {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 34px 38px;
  border-radius: 20px;
  background: var(--sx-navy);
}

.sx-cp-end-ico {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.sx-cp-end-copy { flex: 1 1 auto; min-width: 0; }

.sx-cp-end-copy h2 {
  margin: 0 0 8px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-banner);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: #fff;
}

.sx-cp-end-copy h2 span { color: var(--sx-blue-lt); }

.sx-cp-end-copy p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: #c7d2e4;
}

@media (max-width: 991px) {
  .sx-cp-hero-grid, .sx-cp-visit-grid { grid-template-columns: 1fr; gap: 30px; }
  .sx-cp-steps { grid-template-columns: 1fr; }
  .sx-cp-next, .sx-cp-visit, .sx-cp-faq { padding: 30px 0; }
  .sx-cp-end-grid { flex-wrap: wrap; gap: 18px; padding: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-cp-step { transition: none; }
  .sx-cp-step:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   GRACIAS (/thank-you/) — a donde cae el formulario al enviarse.
   El markup lo genera build_thanks_page() en build.py. Los tres pasos de abajo
   REUTILIZAN las clases de /contact/ (.sx-cp-next / .sx-cp-steps): aqui solo se
   ajusta el aire de la seccion.
   --------------------------------------------------------------------------- */
.sx-ty-section { padding: 54px 0 34px; }

.sx-ty-card {
  /* 254,254,254 y no #fff: es EXACTAMENTE el blanco del fondo de ty-mascot.jpg.
     Con #fff la diferencia es de un solo nivel, pero se ve el rectangulo de la
     foto — la misma nota que ya avisaba en service-images.py. */
  --sx-ty-bg: #fefefe;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 40px 38px;
  border-radius: 28px;
  background: var(--sx-ty-bg);
  box-shadow: 0 22px 50px rgba(0, 23, 51, .10);
  text-align: center;
}

.sx-ty-art {
  display: block;
  width: 230px;
  height: auto;
  /* El original deja aire propio arriba y abajo: sin recortarlo la tarjeta
     parece tener el doble de padding que la caja de texto. Abajo se recorta
     menos que arriba porque ahi va la sombra de los pies, y pegada al eyebrow
     los dos se leen como un solo bloque. */
  margin: -18px auto 4px;
}

/* La rayita del eyebrow va a la izquierda por defecto (0,1,0); aqui la tarjeta
   es centrada y este selector (0,2,0) le gana. */
.sx-ty-card .sx-eyebrow::after { margin-inline: auto; }

.sx-ty-title {
  margin: 0 0 14px;
  font-family: var(--sx-disp);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.14;
  letter-spacing: var(--sx-ls-h2);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
  text-wrap: balance;
}

.sx-ty-title span { color: var(--sx-blue); }

.sx-ty-lead {
  margin: 0 auto 26px;
  max-width: 52ch;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-ty-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.sx-ty-note {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

/* El color va en el <span> y no en el <a>: `a, a:visited` de base.css impone
   navy y no se deja sobrescribir ni con !important. */
.sx-ty-note a span { color: var(--sx-blue); font-weight: 500; }
.sx-ty-note a:hover span { color: var(--sx-blue-dk); }

.sx-ty-next { padding-top: 16px; }

@media (max-width: 991px) {
  .sx-ty-section { padding: 34px 0 20px; }
  .sx-ty-card { padding: 30px 22px 30px; border-radius: 22px; }
  .sx-ty-art { width: 180px; }
  .sx-ty-next { padding-top: 6px; }
}

/* ---------------------------------------------------------------------------
   FAQ — 7 grupos, 40 preguntas
   Markup con <details>/<summary> nativo, no el acordeon de Elementor: no
   depende de JS y ya viene accesible por teclado y lector de pantalla.
   El atributo `name` en <details> hace que dentro de cada grupo solo una este
   abierta a la vez (acordeon exclusivo, sin una linea de JavaScript). Donde no
   este soportado, simplemente se pueden abrir varias: degrada bien.
   --------------------------------------------------------------------------- */
.sx-faq-page { padding: 40px 0 60px; }

.sx-faq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 46px;
}

.sx-faq-chip {
  padding: 10px 20px;
  border: 1px solid #e2e8f3;
  border-radius: 100px;
  background: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  color: var(--sx-navy);
  transition: background .3s, color .3s, border-color .3s;
}

.sx-faq-chip:hover { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }

.sx-faq-group { max-width: 860px; margin: 0 auto 52px; }

/* `scroll-margin-top` para que el header pegajoso no tape el titulo al saltar
   desde los chips. */
.sx-faq-group { scroll-margin-top: 110px; }

.sx-faq-group h2 {
  margin: 0 0 22px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-banner);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-faq-list {
  border: 1px solid #e9edf4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 23, 51, .05);
}

.sx-faq-item + .sx-faq-item { border-top: 1px solid #eef2f8; }

.sx-faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
  transition: color .3s;
}

/* fuera el triangulo por defecto, en los dos motores */
.sx-faq-item summary::-webkit-details-marker { display: none; }
.sx-faq-item summary::marker { content: ""; }

.sx-faq-item summary:hover { color: var(--sx-blue); }
.sx-faq-item[open] summary { color: var(--sx-blue); }

/* el signo +/- dibujado con dos barras, sin icono ni fuente */
.sx-faq-mark {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: auto;
  margin-top: 3px;
}

/* CHEVRON, no "+": asi lo pide el mockup de /faq/. Se cambia para los DOS
   acordeones del sitio (la FAQ larga y la corta de /contact/) — son el mismo
   componente y tenerlos con marcador distinto no tendria sentido.
   Va dibujado con bordes en vez de un SVG: son 6 lineas y hereda el color. */
.sx-faq-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--sx-blue);
  border-bottom: 2px solid var(--sx-blue);
  border-radius: 0 0 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .3s var(--sx-ease);
}

.sx-faq-item[open] .sx-faq-mark::before {
  transform: translate(-50%, -20%) rotate(-135deg);
}

.sx-faq-ans { padding: 0 62px 22px 24px; }

.sx-faq-ans p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

@media (max-width: 640px) {
  .sx-faq-item summary {
    padding: 17px 18px;
    gap: 12px;
    font-size: var(--sx-t-body);
    line-height: var(--sx-lh-title);
  }
  .sx-faq-ans { padding: 0 18px 18px; }
  .sx-faq-group h2 { font-size: var(--sx-t-card); line-height: var(--sx-lh-title); }
}

@media (prefers-reduced-motion: reduce) {
  .sx-faq-chip, .sx-faq-item summary,
  .sx-faq-mark::before, .sx-faq-mark::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   ABOUT — "Our Story"
   Las genera apply_about_layout() en build.py. Se INSERTAN al principio de
   /about/, no sustituyen nada.
   --------------------------------------------------------------------------- */
.sx-st-section .elementor-container,
.sx-pr-section .elementor-container { display: block; }

.sx-st-section, .sx-pr-section { padding: 40px 0; }

.sx-st-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.sx-st-photo {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 23, 51, .16);
}

.sx-st-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* La cabecera compartida va centrada; aqui la seccion es a dos columnas y el
   texto arranca a la izquierda. */
.sx-head--left {
  max-width: none;
  margin: 0 0 22px;
  text-align: left;
}

.sx-head--left .sx-eyebrow::after { margin-inline: 0; }

.sx-st-copy > p {
  margin: 0 0 16px;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-st-copy > p strong { color: var(--sx-navy); font-weight: 600; }

.sx-st-signers {
  display: flex;
  gap: 34px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #e6ebf3;
}

.sx-st-signer + .sx-st-signer {
  padding-left: 34px;
  border-left: 1px solid #e6ebf3;
}

.sx-st-name {
  margin: 0 0 2px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-body);
  line-height: 1.4;
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-st-role {
  margin: 0;
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-cap);
  color: var(--sx-blue);
}

/* ---------------------------------------------------------------------------
   ABOUT — "The meaning behind S.T.R.I.X."
   Rehecho en HTML/CSS a proposito: los PNG de 03-content/media traen la tarjeta
   entera horneada (circulo, icono, titulo y descripcion), y usarlos dejaria todo
   ese texto dentro de una imagen.
   --------------------------------------------------------------------------- */
.sx-pr-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.sx-pr {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 20px 30px;
  border: 1px solid #e9edf4;
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 55%);
  transition: transform .45s var(--sx-ease), box-shadow .45s, border-color .45s;
}

/* El disco con la letra. El anillo punteado y el resplandor son CSS, no imagen. */
.sx-pr-disc {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sx-navy);
  box-shadow: 0 0 0 6px rgba(0, 82, 204, .10), 0 14px 30px rgba(0, 23, 51, .22);
  margin-bottom: 26px;
}

/* anillo punteado exterior, con el punto azul del mockup */
.sx-pr-disc::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1px dashed #c3cfe2;
}

/* El punto va SOBRE el anillo punteado, no flotando fuera.
   Geometria: el disco mide 108, asi que su centro esta en 54,54; el anillo es
   `inset: -13px`, o sea radio 54+13 = 67. Colocado a 45 grados arriba-derecha,
   el centro del punto cae en 54 + 67·cos45 = 101.4 y 54 - 67·cos45 = 6.6.
   Restando su propio radio (4) salen las coordenadas de abajo.
   Antes iba en top:-16/right:16 y quedaba suelto, fuera del circulo. */
.sx-pr-disc::after {
  content: "";
  position: absolute;
  top: 2.6px;
  left: 97.4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sx-blue);
  box-shadow: 0 0 0 3px #fff;   /* corta la linea punteada por debajo */
}

.sx-pr-letter {
  font-family: var(--sx-disp);
  font-size: 50px;
  line-height: 1;
  font-weight: var(--sx-w-title);
  color: #fff;
}

.sx-pr-ico {
  display: block;
  color: var(--sx-blue);
  margin-bottom: 18px;
  line-height: 0;
}

.sx-pr h3 {
  margin: 0;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: 1.3;
  font-weight: var(--sx-w-title);
  letter-spacing: 0.06em;
  color: var(--sx-navy);
  /* SIN text-transform a proposito: subiria la "e" de "eXCELLENCE", que en el
     mockup va en minuscula. Los titulos vienen ya escritos en su caja. */
}

/* la rayita azul bajo el titulo */
.sx-pr h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--sx-blue);
  margin: 14px auto 16px;
}

.sx-pr p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-pr:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 23, 51, .13);
  border-color: #d6e1f4;
}

@media (max-width: 1199px) {
  .sx-pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .sx-st-section, .sx-pr-section { padding: 30px 0; }
  .sx-st-grid { grid-template-columns: 1fr; gap: 34px; }
  /* La foto es un retrato 2:3 y aqui se recorta a 16/10: con el 50% por defecto
     la ventana cae a la altura del pecho y DECAPITA a los dos fundadores. Las
     caras van entre el 18% y el 34% del alto original, asi que el recorte tiene
     que arrancar arriba: 22% deja un poco de aire sobre las cabezas y corta a
     media altura del torso. */
  .sx-st-photo img { aspect-ratio: 16 / 10; object-position: 50% 22%; }
  .sx-pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .sx-pr-grid { grid-template-columns: 1fr; }
  .sx-st-signers { flex-direction: column; gap: 16px; }
  .sx-st-signer + .sx-st-signer { padding-left: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-pr { transition: none; }
  .sx-pr:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   NUESTROS PROYECTOS
   El markup lo genera build_projects_section() en build.py.

   OJO con la rejilla: el filtrado lo hace el Isotope del tema, que posiciona
   los .grid-item en ABSOLUTO. Por eso aqui NO se puede usar CSS grid — las
   tarjetas van con float y ancho en %, que es lo que Isotope sabe medir.
   --------------------------------------------------------------------------- */
.sx-pj-section .elementor-container { display: block; }

.sx-pj-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 40px;
}

.sx-pj-filter button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border: 1px solid #e2e8f3;
  border-radius: 100px;
  background: #fff;
  color: var(--sx-navy);
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  cursor: pointer;
  transition: background .35s, color .35s, border-color .35s, box-shadow .35s;
}

.sx-pj-filter button svg { flex: 0 0 auto; color: var(--sx-blue); transition: color .35s; }

.sx-pj-filter button:hover {
  border-color: var(--sx-blue);
  box-shadow: 0 6px 18px rgba(0, 82, 204, .12);
}

/* `is-checked` la mueve theme-script.js al pulsar; el primero la trae del HTML */
.sx-pj-filter button.is-checked {
  background: var(--sx-blue);
  border-color: var(--sx-blue);
  color: #fff;
}

.sx-pj-filter button.is-checked svg { color: #fff; }

.sx-pj-grid {
  margin: 0 -13px;
}

/* clearfix: los .grid-item van flotados hasta que Isotope los posiciona */
.sx-pj-grid::after { content: ""; display: block; clear: both; }

.sx-pj-grid .grid-sizer { width: 33.3333%; }

.sx-pj {
  float: left;
  width: 33.3333%;
  padding: 0 13px 26px;
}

.sx-pj-img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

/* mismo paneo que servicios y blog: un solo lenguaje de imagen en toda la pagina */
.sx-pj-img img {
  max-width: none;
  width: calc(100% + 40px);
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translate3d(-30px, 0, 0);
  transition: transform .85s;
}

.sx-pj-body {
  position: relative;
  background: #fff;
  border: 1px solid #e9edf4;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 20px 74px 24px 22px; /* hueco a la derecha para la flecha */
  box-shadow: 0 12px 30px rgba(0, 23, 51, .05);
  transition: border-color .45s, box-shadow .45s;
}

.sx-pj-cat {
  display: block;
  margin: 0 0 7px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-chip);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  color: var(--sx-blue);
}

.sx-pj h4 {
  margin: 0 0 8px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
  transition: color .45s;
}

/* Isotope coloca los items en absoluto y NO los estira: con fitRows la fila
   toma la altura del mas alto, pero cada tarjeta conserva la suya. Medido, las
   descripciones ocupan de 2 a 4 lineas segun el ancho, asi que las tarjetas
   quedaban en 151/177/203px. Se reserva el espacio de la mas larga.
   Si cambia el contenido hay que volver a medir: este numero depende del texto,
   no de la maqueta. */
.sx-pj p {
  margin: 0;
  min-height: calc(3 * var(--sx-t-body) * var(--sx-lh-body));
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-pj-go,
.sx-pj-go:visited {
  position: absolute;
  right: 20px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #d9e4f7;
  background: #fff;
  color: var(--sx-blue);
  transition: background .35s, color .35s, border-color .35s, transform .35s;
}

.sx-pj:hover .sx-pj-img img { transform: translate3d(0, 0, 0); }
.sx-pj:hover .sx-pj-body { border-color: #d6e1f4; box-shadow: 0 24px 48px rgba(0, 23, 51, .14); }
.sx-pj:hover h4 { color: var(--sx-blue); }
.sx-pj:hover .sx-pj-go { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
.sx-pj-go:hover { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   BLOG
   --------------------------------------------------------------------------- */
.sx-bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.sx-bl {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e9edf4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 23, 51, 0.05);
  transition: transform .45s var(--sx-ease), box-shadow .45s, border-color .45s;
}

.sx-bl-img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* Mismo paneo que las tarjetas de servicio (y que el tema). Antes esta imagen
   hacia scale(1.05) y la de servicios no hacia nada: dos gestos distintos para
   el mismo componente. */
.sx-bl-img img {
  max-width: none;
  width: calc(100% + 40px);
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translate3d(-30px, 0, 0);
  transition: transform .85s;
}

.sx-bl-cat {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 5px 13px;
  border-radius: 99px;
  background: var(--sx-blue);
  color: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-chip);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  transition: background .45s;
}

.sx-bl-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
}

.sx-bl-body h4 {
  margin: 0 0 18px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  font-weight: var(--sx-w-title);
  line-height: var(--sx-lh-title);
}

.sx-bl-body h4 a { color: var(--sx-navy); }
.sx-bl-body h4 a:hover { color: var(--sx-blue); }

.sx-bl-cta,
.sx-bl-cta:visited {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  letter-spacing: 0; /* caja mixta */
  color: var(--sx-blue);
}

.sx-bl-cta em,
.sx-bl-all em {
  display: inline-block;
  font-style: normal;
  transition: transform 0.25s ease;
}

.sx-bl:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 23, 51, 0.14);
  border-color: #d6e1f4;
}

.sx-bl:hover .sx-bl-img img { transform: translate3d(0, 0, 0); }
.sx-bl:hover .sx-bl-body h4 a { color: var(--sx-blue); }
.sx-bl:hover .sx-bl-cat { background: var(--sx-navy); }
.sx-bl:hover .sx-bl-cta em,
.sx-bl-all:hover em { transform: translateX(4px); }

.sx-bl-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  padding: 26px 30px;
  border-radius: 16px;
  background: #eef3fb;
}

.sx-bl-foot-ico {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dbe6f8;
  color: var(--sx-blue);
}

.sx-bl-foot > div { flex: 1 1 auto; min-width: 0; }

.sx-bl-foot h3 {
  margin: 0 0 4px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-banner);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-bl-foot p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-bl-all,
.sx-bl-all:visited {
  flex: 0 0 auto;
  padding: 13px 26px;
  border: 1px solid var(--sx-blue);
  border-radius: 100px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  color: var(--sx-blue);
  transition: background .35s, color .35s;
}

.sx-bl-all:hover { background: var(--sx-blue); color: #fff; }

/* Entradas escalonadas (las aplica custom.js). Ocultar es opt-in desde JS. */
.sx-tm-grid.sx-armed .sx-tm,
.sx-bl-grid.sx-armed .sx-bl { opacity: 0; }

/* ---------------------------------------------------------------------------
   SECCIONES DEL TEMPLATE que siguen en el home
   --------------------------------------------------------------------------- */
/* Portfolio. El tema NO le pone font-size al titulo: cae al `h4` global del
   dynamic-css (26px/36px), un 30% mas grande que los titulos de tarjeta del
   resto de la pagina. Cubre style-1 y style-2, y afecta tambien a
   /portfolio/index.html.
   post-19.css no tiene ninguna regla para la seccion 8d4bccd, asi que (0,2,1)
   basta para el titulo; el chip SI tiene competidor
   (`.portfolio-desc .portfolio-cat a`, 0,2,1) y hay que superarlo con (0,3,1). */
.portfolio-item .portfolio-desc h4 {
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
}

.portfolio-item .portfolio-desc .portfolio-cat a {
  font-size: var(--sx-t-chip);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  letter-spacing: var(--sx-ls-caps);
}

/* Marquee. Tipografia DECORATIVA: 100/80/48 no son peldanos de la escala de
   texto y no pretenden serlo.
   El tema ya traia el escalon de 80px (theme-style.css:638) pero lo colgo de
   `.marquee-section`, una clase que no existe en ninguna de las 18 paginas
   (grep = 0), asi que nunca se aplicaba y las dos bandas se quedaban en 100px
   hasta en moviles de 375px. `.marquee-wrap` si es ancestro real -> (0,3,1)
   gana al (0,2,1) del tema. */
@media (max-width: 991px) {
  .marquee-wrap .marquee-text.style3 span { font-size: 80px; line-height: 100px; }
  .marquee-wrap .marquee-text.style3 i { font-size: 32px; line-height: 1; }
}

@media (max-width: 640px) {
  .marquee-wrap .marquee-text.style3 span { font-size: 48px; line-height: 1.15; }
  .marquee-wrap .marquee-text.style3 i { font-size: 22px; line-height: 1; margin: 0 22px; }
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .sx-svc-section, .sx-ct-section, .sx-tm-section, .sx-pj-section, .sx-bl-section { padding: 30px 0; }
  .sx-pj, .sx-pj-grid .grid-sizer { width: 50%; }
  .sx-pj-filter { margin-bottom: 30px; gap: 9px; }
  .sx-pj-filter button { padding: 9px 16px; }
  /* en 2 columnas la tarjeta es mas estrecha y la descripcion mas larga se va a
     4 lineas */
  .sx-pj p { min-height: calc(4 * var(--sx-t-body) * var(--sx-lh-body)); }
  .sx-owl { padding: 56px 0 30px; }
  .elementor-element-ca7f2db, .elementor-element-9a8e954,
  .elementor-element-8d4bccd { padding: 30px 0; }
  .sx-head { margin-bottom: 38px; }
  .sx-ct-grid { grid-template-columns: 1fr; gap: 36px; }
  .sx-svc-grid, .sx-tm-grid, .sx-bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .sx-bl-foot { flex-wrap: wrap; }
  .sx-owl-grid { grid-template-columns: 1fr; gap: 36px; }

  /* En desktop el bloque va a dos columnas y su texto alinea a la izquierda,
     contra el isotipo. Al apilarse pierde esa referencia y queda como la UNICA
     seccion del home alineada a la izquierda: las otras cinco (servicios,
     contacto, testimonios, proyectos, blog) centran eyebrow, titulo y bajada.
     La rayita del eyebrow se centra con `.sx-owl-copy .sx-eyebrow::after`
     (0,2,0), que le gana al margen izquierdo de `.sx-eyebrow::after` (0,1,0). */
  .sx-owl-copy { text-align: center; }
  .sx-owl-copy .sx-eyebrow::after { margin-inline: auto; }

  /* Reserva 2 lineas de titulo. En 2 columnas unos titulos ocupan 2 lineas y
     otros 1, asi que el icono y la descripcion arrancaban a distinta altura
     dentro de la MISMA fila. Medido: las 6 tarjetas pasan de 506/506/481/481/
     506/506 a 529 parejas. En desktop NO hace falta (todos los titulos caben en
     una linea) y solo anadiria 27px de aire muerto. */
  .sx-svc h4 { min-height: calc(2 * var(--sx-t-card) * var(--sx-lh-title)); }
}

@media (max-width: 640px) {
  .sx-svc-grid, .sx-tm-grid, .sx-bl-grid { grid-template-columns: 1fr; }
  .sx-pj, .sx-pj-grid .grid-sizer { width: 100%; }
  .sx-ct-row { grid-template-columns: 1fr; }
  .sx-ct-form { padding: 22px; }
  .sx-bl-foot { padding: 22px; }
  .sx-bl-all { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   ACCESIBILIDAD — un solo bloque para todo el movimiento propio.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sx-svc, .sx-tm, .sx-bl,
  .sx-svc-img, .sx-svc-img img, .sx-bl-img img, .sx-pj-img img,
  .sx-svc-ico, .sx-svc h4, .sx-svc-cta em, .sx-bl-cta em, .sx-bl-all em, .sx-bl-all,
  .sx-bl-cat, .sx-ct-ico, .sx-ct-txt h4, .sx-ct-send, .sx-ct-send svg,
  .sx-tm-avatar, .sx-tm-quote::before,
  .sx-pj-body, .sx-pj h4, .sx-pj-go, .sx-pj-filter button, .sx-pj-filter button svg {
    transition: none;
  }

  .sx-svc:hover, .sx-tm:hover, .sx-bl:hover, .sx-ct-send:hover,
  .sx-pj-go:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   REDES SOCIALES — botones aun sin perfil.
   Se piden visibles desde ya (Facebook, Google, Yelp, LinkedIn) aunque dos no
   tengan URL todavia. build.py los emite SIN href, asi que no navegan; aqui solo
   se corrige el cursor, que sin href se vuelve el de texto sobre el icono.
   Al pegar la URL en SOCIAL_LINKS el boton pasa a ser enlace y esta regla deja
   de aplicarle sola.
   --------------------------------------------------------------------------- */
.social-icons li a[data-social-pending] { cursor: default; }

/* ---------------------------------------------------------------------------
   HEADER — bloque de telefono con el icono propio.
   Lo emite rebuild_header_number() en build.py. El template usaba un glifo de
   fuente (`.header-number i`, 34px) y ahora es un SVG, asi que el tamano lo
   fija el propio <svg> y aqui solo van color y separacion.

   EL ANCHO DEL HEADER ES JUSTO. Medido a 1440, con la fila en 1389px:
     logo 230 + menu + telefono + boton 173.
   El rotulo nuevo ("Let's talk about your project") mide 77px mas que el del
   template ("Free Consultant:") y ademas "About us" estrena desplegable. Con
   eso el header se rompia: "CONTACT US" partia en dos lineas, los chevrons
   caian debajo de su rotulo y la barra crecia de 90px a 116.

   LA CAUSA NO ERA EL ANCHO TOTAL. Diffeando el alto de cada descendiente entre
   el caso sano y el roto, el que crecia era el BOTON: "GET A QUOTE" se partia
   dentro de `.themeht-btn` (50px -> 76) y arrastraba toda la fila. De paso el
   logo se encogia de 230 a 179. Dos fallos latentes del template que aparecen en
   cuanto el header aprieta; se arreglan abajo con `white-space` y `flex-shrink`.

   Con eso arreglado, el limite real (boton dentro de la fila, items en una linea):
     rotulo en 1 linea  -> hasta  8px de margen entre items
     rotulo en 2 lineas -> hasta 12px
     rotulo en 1 linea y sin "Contact Us" en el menu -> hasta 18px
   Elegido por el cliente: rotulo en UNA linea con el menu completo, o sea 8px.
   Es apretado (el template traia 7) pero es su decision, tomada viendo las tres.

   Si entra un septimo item o se alarga otro rotulo, REPETIR la medida: aqui no
   queda holgura (a 8px sobran 9px hasta el borde de la fila).
   --------------------------------------------------------------------------- */
.header-number .sx-hn-ico {
  display: inline-flex;
  color: var(--themeht-primary-color);
  margin-right: 8px;
  flex: none;
}

.header-number .sx-hn-ico svg { width: 34px; height: 34px; }

/* El rotulo va de una pieza, en UNA linea. */
.header-number > div span {
  font-size: 11px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Los rotulos del MENU tampoco se parten: en dos lineas el item se descuadra
   contra el resto de la fila y los chevrons caen debajo del texto. */
#menu-main-menu > li { margin: 0 8px; }
#menu-main-menu > li > a { white-space: nowrap; }

/* Los dos fallos del template que rompian la barra al apretar (ver la nota):
   el texto del boton se partia por dentro, y el logo se dejaba encoger. */
.header-right .themeht-btn,
.header-right .themeht-btn span { white-space: nowrap; }

#header-wrap .navbar-brand { flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   OUR FOUNDERS
   La genera build_founders_page() en build.py. Dos fichas, la banda navy con el
   isotipo y el cierre. Los adornos del mockup (la trama de puntos y la escuadra
   junto a cada retrato) son CSS, no imagenes: son formas planas y como PNG
   serian dos peticiones mas por ficha.
   --------------------------------------------------------------------------- */
.sx-fd-section { padding: 90px 0 100px; }

/* Los adornos (trama de puntos y escuadra) sobresalen ~26px por la izquierda de
   cada retrato. Con el padding normal del wrap (12px) el de la PRIMERA columna
   se salia de la pantalla y quedaba cortado: medido a 1440, llegaba hasta x=-14.
   Se le da a la seccion entera un padding mayor para que quepan; se aplica al
   wrap y no solo a la rejilla para que la banda navy y el cierre sigan
   alineados con las fichas. */
.sx-fd-section .sx-sv-wrap { padding-inline: 38px; }

.sx-fd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 54px 46px;
  margin-top: 54px;
}

.sx-fd {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  align-items: start;
}

/* El retrato lleva por detras la trama de puntos (arriba a la izquierda) y la
   escuadra abierta (abajo a la izquierda). Van en el envoltorio y no en el <img>
   para poder desbordarlo sin recortarse. */
.sx-fd-photo { position: relative; }

.sx-fd-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.sx-fd-photo::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -22px;
  width: 92px;
  height: 62px;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 11px 11px;
  color: rgba(0, 82, 204, 0.32);
}

.sx-fd-photo::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 20px;
  width: 34px;
  height: 76px;
  border-left: 2px solid rgba(0, 82, 204, 0.45);
  border-bottom: 2px solid rgba(0, 82, 204, 0.45);
  border-bottom-left-radius: 10px;
}

.sx-fd-copy h3 {
  font-family: var(--sx-disp);
  font-size: 26px;              /* = h4 del tema */
  line-height: var(--sx-lh-title);
  font-weight: 700;
  color: var(--sx-navy);
  margin-bottom: 6px;
}

.sx-fd-role {
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: 600;
  color: var(--sx-blue);
  margin-bottom: 16px;
}

.sx-fd-copy p:last-child {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
  margin-bottom: 0;
}

/* --- banda navy con el isotipo y los dos pilares --- */
.sx-fd-band {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
  margin-top: 64px;
  padding: 40px 48px;
  border-radius: 20px;
  background: linear-gradient(120deg, #001024 0%, var(--sx-navy) 45%, #062a5c 100%);
}

.sx-fd-band-owl { display: inline-flex; color: var(--sx-blue-lt); }

.sx-fd-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

/* La separacion entre los dos pilares es una linea, como en el mockup. Va en el
   segundo y no como `border-right` del primero para que al apilarse en movil
   desaparezca sola. */
.sx-fd-pillar + .sx-fd-pillar {
  padding-left: 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.sx-fd-pillar h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}

.sx-fd-pillar-ico { display: inline-flex; color: var(--sx-blue-lt); flex: none; }

.sx-fd-pillar p {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut-dark);
  margin-bottom: 0;
}

/* --- cierre --- */
.sx-fd-end { text-align: center; margin-top: 72px; }

.sx-fd-end h2 {
  font-family: var(--sx-disp);
  font-size: var(--sx-t-h2);
  line-height: var(--sx-lh-h2);
  letter-spacing: var(--sx-ls-h2);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
  margin-bottom: 26px;
}

.sx-fd-end .sx-btn { display: inline-flex; align-items: center; gap: 10px; }
.sx-fd-end .sx-btn em { font-style: normal; transition: transform .25s ease; }
.sx-fd-end .sx-btn:hover em { transform: translateX(4px); }

@media (max-width: 1199px) {
  /* Una ficha por fila: a 2 columnas el texto baja de ~40 caracteres por linea. */
  .sx-fd-grid { grid-template-columns: 1fr; gap: 46px; }
  .sx-fd { grid-template-columns: 280px 1fr; }
}

@media (max-width: 767px) {
  .sx-fd-section { padding: 60px 0 70px; }
  .sx-fd { grid-template-columns: 1fr; gap: 22px; }
  .sx-fd-photo { max-width: 300px; }
  /* Los adornos se van: pegados al borde del movil se salen de la pantalla. */
  .sx-fd-photo::before, .sx-fd-photo::after { display: none; }

  .sx-fd-band { grid-template-columns: 1fr; gap: 26px; padding: 32px 26px; }
  .sx-fd-pillars { grid-template-columns: 1fr; gap: 26px; }
  .sx-fd-pillar + .sx-fd-pillar {
    padding-left: 0;
    padding-top: 26px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .sx-fd-end { margin-top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-fd-end .sx-btn em { transition: none; }
  .sx-fd-end .sx-btn:hover em { transform: none; }
}

/* ---------------------------------------------------------------------------
   PORTADAS PROPIAS DE LA FRANJA DE TITULO (/about/ y /our-founders/)
   La clase `sx-cover` la pone apply_page_cover() en build.py. Solo la llevan las
   paginas con ilustracion propia; las que siguen con la foto del demo no se
   tocan.

   En ESCRITORIO vale el encuadre del tema (`background-position: top center`):
   la ilustracion es apaisada, la mascota cae a la derecha y el titulo sobre el
   navy despejado de la izquierda. Justo para lo que estan hechas.

   En MOVIL no vale. Medido a 390: la franja es de 335x396 (vertical, 0.85:1) y
   la ilustracion es 2.5:1, asi que `cover` la escala por altura y solo deja ver
   la tira central — el 34% — que es fondo vacio: la mascota se queda fuera.
   Se recoloca a `78% top` para que entre, y el texto baja al pie con el padding,
   porque centrado se le montaba encima.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-title.sx-cover {
    background-position: 78% top;
    padding: 200px 0 40px;
  }
}

/* ---------------------------------------------------------------------------
   BLOG — articulo
   Lo genera build_blog_post() en build.py, una entrada por articulo. Vienen 38,
   asi que aqui no debería hacer falta tocar nada mas: los bloques del cuerpo
   (h2, p, callout, ul, quote) ya estan contemplados.
   --------------------------------------------------------------------------- */
.sx-bp-section { padding: 30px 0 40px; }

/* El articulo va en su propio panel BLANCO. Sin el, el texto quedaba apoyado
   directamente sobre el gris del body y, justo debajo del header (que es blanco),
   el corte de color se veia seco. Ademas asi hace juego con las cajas del
   sidebar, que ya eran blancas: el bloque entero se lee como una unidad.
   Es el mismo recurso que usa el tema en `.page-title` — panel redondeado sobre
   el fondo — asi que no introduce un patron nuevo. */
.sx-bp-panel {
  padding: 36px 40px 40px;
  border: 1px solid #e9edf4;
  border-radius: 20px;
  background: #fff;
}

.sx-bp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 54px;
  align-items: start;
}

/* --- cabecera del articulo --- */
.sx-bp-back {
  /* `flex` + `width: fit-content` y no `inline-flex`: en linea, el chip de
     categoria se le pegaba al lado en vez de bajar a su propia linea. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  color: var(--sx-blue);
}

.sx-bp-back em { font-style: normal; transition: transform .25s ease; }
.sx-bp-back:hover { color: var(--sx-blue-dk); }
.sx-bp-back:hover em { transform: translateX(-4px); }

.sx-bp-cat {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: 8px;
  background: #e8f0ff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-chip);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  color: var(--sx-blue-dk);
}

.sx-bp h1 {
  font-family: var(--sx-disp);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: var(--sx-lh-h2);
  letter-spacing: var(--sx-ls-h2);
  font-weight: 700;
  color: var(--sx-navy);
  margin-bottom: 12px;
}

.sx-bp-deck {
  font-size: var(--sx-t-banner);
  line-height: var(--sx-lh-title);
  color: var(--sx-mut);
  margin-bottom: 22px;
}

.sx-bp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid #e9edf4;
  margin-bottom: 30px;
}

.sx-bp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  color: var(--sx-mut);
}

.sx-bp-meta-ico { display: inline-flex; color: var(--sx-blue); }

.sx-bp-hero { border-radius: 16px; overflow: hidden; margin-bottom: 34px; }
.sx-bp-hero img { width: 100%; height: auto; display: block; }

/* --- cuerpo --- */
.sx-bp-body h2 {
  font-family: var(--sx-disp);
  font-size: 26px;              /* = h4 del tema */
  line-height: var(--sx-lh-title);
  font-weight: 600;
  color: var(--sx-navy);
  margin: 34px 0 14px;
}

.sx-bp-body h2:first-child { margin-top: 0; }

.sx-bp-body p {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
  margin-bottom: 14px;
}

.sx-bp-body a { color: var(--sx-blue); text-decoration: underline; }
.sx-bp-body strong { color: var(--sx-navy); font-weight: 600; }

.sx-bp-list { margin: 0 0 18px; padding-left: 20px; }
.sx-bp-list li {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
  margin-bottom: 8px;
}

/* La caja azul del mockup: el remate de cada seccion. */
.sx-bp-callout {
  display: flex;
  gap: 14px;
  margin: 26px 0;
  padding: 22px 24px;
  border-left: 3px solid var(--sx-blue);
  border-radius: 0 12px 12px 0;
  background: #eef4ff;
}

.sx-bp-callout-ico { flex: none; color: var(--sx-blue); line-height: 1; margin-top: 1px; }
.sx-bp-callout-ico .bi { font-size: 22px; }

.sx-bp-callout p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  font-weight: 600;
  color: var(--sx-blue-dk);
}

.sx-bp-quote {
  margin: 26px 0;
  padding-left: 20px;
  border-left: 3px solid var(--sx-blue);
  font-family: var(--sx-disp);
  font-size: var(--sx-t-banner);
  line-height: var(--sx-lh-title);
  color: var(--sx-navy);
}

/* --- sidebar --- */
.sx-bs { display: grid; gap: 22px; position: sticky; top: 110px; }

.sx-bs-box {
  padding: 24px;
  border: 1px solid #e9edf4;
  border-radius: 16px;
  background: #fff;
}

.sx-bs-box h4 {
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  color: var(--sx-navy);
  margin: 0 0 8px;
}

/* la rayita azul bajo el rotulo, como en el resto de cabeceras del sitio */
.sx-bs-box h4::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--sx-blue);
}

.sx-bs-logo { width: 168px; height: auto; margin: 16px 0 12px; display: block; }

.sx-bs-box p {
  margin: 12px 0 0;
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-bs-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-chip);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  color: var(--sx-blue);
}

.sx-bs-cta em { font-style: normal; transition: transform .25s ease; }
.sx-bs-cta:hover em { transform: translateX(4px); }

.sx-bs-cats { list-style: none; margin: 16px 0 0; padding: 0; }

.sx-bs-cats li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eef1f6;
  font-size: var(--sx-t-body);
  color: var(--sx-navy);
}

.sx-bs-cats li:last-child { border-bottom: 0; padding-bottom: 0; }

.sx-bs-num {
  flex: none;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 20px;
  background: #eef4ff;
  font-size: var(--sx-t-chip);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  text-align: center;
  color: var(--sx-blue-dk);
}

.sx-bs-recent { list-style: none; margin: 16px 0 0; padding: 0; }
.sx-bs-recent li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef1f6; }

.sx-bs-recent a { display: flex; gap: 12px; align-items: flex-start; }

.sx-bs-recent img {
  flex: none;
  width: 84px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
}

.sx-bs-rc {
  display: block;
  margin-bottom: 4px;
  font-family: var(--sx-sans);
  font-size: 10px;
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  color: var(--sx-blue);
}

.sx-bs-rt {
  display: block;
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-cap);
  font-weight: 600;
  color: var(--sx-navy);
}

.sx-bs-rd {
  display: block;
  margin-top: 3px;
  font-size: var(--sx-t-chip);
  line-height: var(--sx-lh-flat);
  color: var(--sx-mut);
}

.sx-bs-recent a:hover .sx-bs-rt { color: var(--sx-blue); }

.sx-bs-form { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.sx-bs-form input {
  flex: 1 1 150px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  color: var(--sx-navy);
  background: #fff;
}

.sx-bs-form input:focus { outline: 2px solid var(--sx-blue); outline-offset: 1px; }

.sx-bs-form button {
  flex: none;
  padding: 11px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--sx-navy);
  font-family: var(--sx-sans);
  font-size: var(--sx-t-chip);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background .3s;
}

.sx-bs-form button:hover { background: var(--sx-blue); }

.sx-bs-social { margin-top: 18px; }
.sx-bs-social li a { background: #f2f5fa; }

/* texto solo para lectores de pantalla (la etiqueta del campo de email) */
.sx-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- banda de cierre --- */
.sx-bp-end { padding: 0 0 64px; }

.sx-bp-end-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 30px 34px;
  border-radius: 18px;
  background: #eef4ff;
}

.sx-bp-end-ico {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #fff;
  color: var(--sx-blue);
}

.sx-bp-end-ico .bi { font-size: 28px; line-height: 1; }

.sx-bp-end-copy h2 {
  font-family: var(--sx-disp);
  font-size: var(--sx-t-banner);
  line-height: var(--sx-lh-title);
  font-weight: 600;
  color: var(--sx-navy);
  margin-bottom: 4px;
}

.sx-bp-end-copy p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-bp-end .sx-btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.sx-bp-end .sx-btn em { font-style: normal; transition: transform .25s ease; }
.sx-bp-end .sx-btn:hover em { transform: translateX(4px); }

@media (max-width: 991px) {
  /* El sidebar baja debajo del articulo: a menos de 992 la columna de 340px deja
     el texto por debajo de 45 caracteres por linea. */
  .sx-bp-grid { grid-template-columns: 1fr; gap: 40px; }
  .sx-bs { position: static; }
}

@media (max-width: 767px) {
  .sx-bp-section { padding: 22px 0 30px; }
  .sx-bp-panel { padding: 26px 22px 30px; border-radius: 16px; }
  .sx-bp-end-grid { grid-template-columns: 1fr; text-align: center; padding: 26px 22px; }
  .sx-bp-end-ico { margin-inline: auto; }
  .sx-bp-end .sx-btn { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-bp-back em, .sx-bs-cta em, .sx-bp-end .sx-btn em, .sx-bs-form button { transition: none; }
  .sx-bp-back:hover em, .sx-bs-cta:hover em, .sx-bp-end .sx-btn:hover em { transform: none; }
}

/* Frase destacada dentro del cuerpo: en el Word del cliente son los parrafos que
   van enteros en negrita. Se marcan con peso y color, no con caja: en un
   articulo hay 8-9 y otras tantas cajas azules lo volverian ilegible. */
.sx-bp-body .sx-bp-emph {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  font-weight: 600;
  color: var(--sx-navy);
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------------------
   BLOG — listado (/blog/)
   Lo genera build_blog_index() en build.py a partir de BLOG_ARTICLES. Filtros,
   buscador y paginacion son de cliente (custom.js).
   --------------------------------------------------------------------------- */
/* La ilustracion ES el hero entero: trae el fondo, el portatil y el hueco de la
   izquierda donde va el texto. Por eso manda SU proporcion (1919x820) en vez de
   un alto fijo: con `cover` y una altura inventada, el navegador la recortaba y
   se comia el portatil por abajo. */
.sx-bi-hero {
  aspect-ratio: 1919 / 820;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sx-bi-hero .sx-sv-wrap { display: flex; align-items: center; height: 100%; }

/* El texto ocupa la mitad izquierda: es el hueco que la ilustracion deja libre. */
.sx-bi-hero-copy { max-width: 460px; padding: 40px 0; }

.sx-bi-hero-copy .sx-eyebrow { text-align: left; }
.sx-bi-hero-copy .sx-eyebrow::after { margin-inline: 0; }

.sx-bi-hero-copy h1 {
  font-family: var(--sx-disp);
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: var(--sx-lh-h2);
  letter-spacing: var(--sx-ls-h2);
  font-weight: 700;
  color: var(--sx-navy);
  margin-bottom: 16px;
}

.sx-bi-hero-copy h1 span { color: var(--sx-blue); }

.sx-bi-hero-copy .sx-lead {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
  margin: 0;
  text-align: left;
}

.sx-bi-section { padding: 70px 0 80px; }

/* --- barra de filtros --- */
.sx-bi-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0 30px;
}

.sx-bi-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.sx-bi-chip {
  padding: 9px 18px;
  border: 1px solid #dbe3f0;
  border-radius: 100px;
  background: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  color: var(--sx-navy);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.sx-bi-chip:hover { border-color: var(--sx-blue); color: var(--sx-blue); }
.sx-bi-chip.is-on { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }

.sx-bi-search { position: relative; flex: 0 1 300px; }

.sx-bi-search input {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border: 1px solid #dbe3f0;
  border-radius: 100px;
  background: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  color: var(--sx-navy);
}

.sx-bi-search input:focus { outline: 2px solid var(--sx-blue); outline-offset: 1px; }

/* la lupa, dibujada en CSS para no cargar otro icono */
.sx-bi-search::before {
  content: "";
  position: absolute;
  left: 17px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border: 1.8px solid var(--sx-mut);
  border-radius: 50%;
}

.sx-bi-search::after {
  content: "";
  position: absolute;
  left: 27px; top: 50%;
  width: 6px; height: 1.8px;
  margin-top: 3px;
  background: var(--sx-mut);
  transform: rotate(45deg);
}

/* --- rejilla --- */
.sx-bi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.sx-bi-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e9edf4;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: transform .45s var(--sx-ease), box-shadow .45s;
}

.sx-bi-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0, 23, 51, .12); }

.sx-bi-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }

.sx-bi-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--sx-ease);
}

.sx-bi-card:hover .sx-bi-img img { transform: scale(1.06); }

.sx-bi-cat {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--sx-blue);
  font-family: var(--sx-sans);
  font-size: 10px;
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-chip);
  letter-spacing: var(--sx-ls-caps);
  text-transform: uppercase;
  color: #fff;
}

.sx-bi-body { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 22px; }

.sx-bi-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.sx-bi-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sx-t-chip);
  line-height: var(--sx-lh-flat);
  color: var(--sx-mut);
}

.sx-bi-meta svg { color: var(--sx-blue); flex: none; }

.sx-bi-body h3 {
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: 600;
  margin-bottom: 10px;
}

.sx-bi-body h3 a { color: var(--sx-navy); }
.sx-bi-card:hover h3 a { color: var(--sx-blue); }

.sx-bi-body p {
  flex: 1;
  margin: 0 0 16px;
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-bi-more,
.sx-bi-more:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  color: var(--sx-blue);
}

.sx-bi-more em { font-style: normal; transition: transform .25s ease; }
.sx-bi-card:hover .sx-bi-more em { transform: translateX(4px); }

.sx-bi-vacio {
  margin: 40px 0 0;
  text-align: center;
  font-size: var(--sx-t-body);
  color: var(--sx-mut);
}

/* --- paginacion --- */
.sx-bi-pag { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 46px; }

.sx-bi-pag button {
  min-width: 42px;
  padding: 10px 14px;
  border: 1px solid #dbe3f0;
  border-radius: 10px;
  background: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  color: var(--sx-navy);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.sx-bi-pag button:hover:not(:disabled) { border-color: var(--sx-blue); color: var(--sx-blue); }
.sx-bi-pag button.is-on { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
.sx-bi-pag button:disabled { opacity: .45; cursor: default; }
.sx-bi-pag .sx-bi-hueco { border: 0; background: none; cursor: default; }

@media (max-width: 1199px) {
  .sx-bi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* La ilustracion se va: a este ancho `cover` solo dejaria ver un trozo del
     portatil por detras del texto, y el titular perderia contraste. */
  .sx-bi-hero { background-image: none !important; background: #eef3fb; aspect-ratio: auto; }
  .sx-bi-hero .sx-sv-wrap { height: auto; }
  .sx-bi-hero-copy { max-width: none; padding: 40px 0 36px; }
  .sx-bi-section { padding: 44px 0 56px; }
  .sx-bi-grid { grid-template-columns: 1fr; }
  .sx-bi-bar { flex-direction: column; align-items: stretch; }
  .sx-bi-search { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-bi-card, .sx-bi-img img, .sx-bi-more em { transition: none; }
  .sx-bi-card:hover { transform: none; }
  .sx-bi-card:hover .sx-bi-img img { transform: none; }
  .sx-bi-card:hover .sx-bi-more em { transform: none; }
}

/* Cierre firmado por un fundador ("Final Thoughts from..."). Es el unico punto
   del articulo donde habla una persona y no la marca, asi que se saca del hilo
   del texto y se presenta como una cita.

   SIN RETRATO, a peticion del cliente: el titular ya dice quien firma y con que
   cargo, y el avatar competia con el texto en vez de acompañarlo. */
.sx-bp-author {
  position: relative;
  margin: 40px 0 8px;
  padding: 30px 36px 30px 84px;
  border-radius: 16px;
  border-left: 3px solid var(--sx-blue);
  background: #f6f9ff;
}

.sx-bp-author-quo {
  position: absolute;
  left: 30px;
  top: 18px;
  font-family: var(--sx-disp), Georgia, serif;
  font-size: 68px;
  line-height: 1;
  font-weight: 700;
  color: #c9d9f7;
}

.sx-bp-body .sx-bp-author h2 {
  margin: 0 0 18px;
  font-size: 21px;
  line-height: var(--sx-lh-title);
}

.sx-bp-author p {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
  margin-bottom: 14px;
}

/* el primer parrafo entra mas alto: es el que sostiene la cita */
.sx-bp-author .sx-bp-author-lead {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--sx-navy);
}

.sx-bp-author p:last-child { margin-bottom: 0; }

@media (max-width: 575px) {
  .sx-bp-author { padding: 26px 22px 26px 22px; }
  .sx-bp-author-quo { position: static; display: block; font-size: 48px; margin-bottom: -14px; }
}

/* ---------------------------------------------------------------------------
   PAGINAS LEGALES (privacidad y terminos)
   Las genera build_legal_page(); el texto llega del Word del cliente y no se
   toca. El mockup venia en dorado y serif; aqui va con la paleta y las fuentes
   del sitio (navy + azul, Sora y Plus Jakarta Sans).
   --------------------------------------------------------------------------- */
.sx-lg-hero { padding: 56px 0 40px; text-align: center; }

/* El filete del eyebrow solo se centra dentro de `.sx-head` (ahi esta la regla
   con `margin-inline: auto`); aqui el eyebrow va suelto y salia pegado a la
   izquierda mientras el texto iba centrado. */
.sx-lg-hero .sx-eyebrow { text-align: center; }
.sx-lg-hero .sx-eyebrow::after { margin-inline: auto; }

.sx-lg-hero h1 {
  font-family: var(--sx-disp);
  font-size: clamp(34px, 4vw, 54px);
  line-height: var(--sx-lh-h2);
  letter-spacing: var(--sx-ls-h2);
  font-weight: 700;
  color: var(--sx-navy);
  margin-bottom: 12px;
}

.sx-lg-fecha {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
  margin-bottom: 22px;
}

/* filete con el escudo en medio, como en el mockup */
.sx-lg-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
  color: var(--sx-blue);
}

.sx-lg-sep span { width: 110px; height: 1px; background: #dbe3f0; }

.sx-lg-lema {
  font-family: var(--sx-disp);
  font-size: var(--sx-t-banner);
  line-height: var(--sx-lh-title);
  font-weight: 500;
  color: var(--sx-navy);
  margin: 0;
}

/* `position: sticky` NO FUNCIONA si un ancestro tiene `overflow` distinto de
   visible, y el tema pone `overflow-x: hidden` en `body` y en `.page-wrapper`
   (para cortar desbordes horizontales). Resultado: el indice de esta pagina y el
   sidebar de los articulos declaraban `sticky` y no se pegaban.

   `clip` corta igual el desborde pero NO crea contenedor de scroll, asi que
   sticky vuelve a funcionar. Verificado: el indice queda a 110px del borde al
   bajar y sigue sin haber scroll horizontal. */
body,
.page-wrapper { overflow-x: clip; }

.sx-lg-section { padding: 0 0 70px; }

.sx-lg-grid {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

/* --- indice --- */
.sx-lg-toc {
  position: sticky;
  top: 110px;
  padding: 24px 22px;
  border: 1px solid #e9edf4;
  border-radius: 16px;
  background: #fff;
}

.sx-lg-toc-h {
  margin: 0 0 14px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: 600;
  color: var(--sx-navy);
}

/* El scroll va en la LISTA, no en la caja. Con 45 secciones (los terminos) el
   indice no cabe en pantalla; poniendole el scroll a la caja entera, el rotulo
   "Table of Contents" se iba con el y aparecia cortado por arriba. */
.sx-lg-toc ol {
  list-style: none;
  margin: 0;
  padding: 0 6px 0 0;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* barra de scroll discreta, que si no se come el ancho util */
.sx-lg-toc ol::-webkit-scrollbar { width: 5px; }
.sx-lg-toc ol::-webkit-scrollbar-thumb { background: #d7dfec; border-radius: 4px; }
.sx-lg-toc ol::-webkit-scrollbar-track { background: transparent; }

.sx-lg-toc a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 9px;
  border-left: 2px solid transparent;
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-cap);
  color: var(--sx-mut);
  transition: background .25s, color .25s, border-color .25s;
}

.sx-lg-toc a:hover { background: #f3f7ff; color: var(--sx-navy); }

.sx-lg-toc-n {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #eef4ff;
  font-size: var(--sx-t-chip);
  line-height: 22px;
  font-weight: var(--sx-w-chip);
  text-align: center;
  color: var(--sx-blue-dk);
  transition: background .25s, color .25s;
}

/* seccion en pantalla: lo marca el scrollspy de custom.js */
.sx-lg-toc a.is-on {
  background: #f3f7ff;
  border-left-color: var(--sx-blue);
  color: var(--sx-navy);
  font-weight: 600;
}

.sx-lg-toc a.is-on .sx-lg-toc-n { background: var(--sx-blue); color: #fff; }

/* --- cuerpo --- */
/* El cuerpo va en su propio panel BLANCO. Sin el, el indice flotaba en su caja
   y el texto legal quedaba apoyado directamente sobre el gris del fondo: los dos
   lados de la misma pagina con tratamiento distinto. Es el mismo recurso que en
   el articulo del blog. */
/* La MEDIDA DE LINEA se limita a proposito. Medido a 1440, el panel daba 996px
   de ancho: 110 caracteres por linea, muy por encima de los 65-80 comodos. En un
   documento legal, que se lee entero y con atencion, eso cansa mucho.
   Medido: 9.05px por caracter, asi que 44rem (704px) deja ~78. El panel sigue
   ancho; lo que se acota es la linea de texto. */
.sx-lg-body > p,
.sx-lg-txt > p,
.sx-lg-txt > h3,
.sx-lg-list { max-width: 44rem; }

.sx-lg-body {
  padding: 34px 38px 38px;
  border: 1px solid #e9edf4;
  border-radius: 20px;
  background: #fff;
}

.sx-lg-body > p {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
  margin-bottom: 16px;
}

.sx-lg-sec { padding-top: 30px; margin-top: 30px; border-top: 1px solid #eef1f6; }
.sx-lg-sec:first-of-type { border-top: 0; margin-top: 8px; }

/* `scroll-margin` para que el ancla no quede debajo del header al saltar */
.sx-lg-sec { scroll-margin-top: 120px; }

.sx-lg-sec h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--sx-disp);
  font-size: 24px;
  line-height: var(--sx-lh-title);
  font-weight: 600;
  color: var(--sx-navy);
  margin-bottom: 14px;
}

.sx-lg-n {
  flex: none;
  font-size: 26px;
  font-weight: 700;
  color: var(--sx-blue);
}

.sx-lg-txt h3 {
  margin: 20px 0 8px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: 600;
  color: var(--sx-navy);
}

.sx-lg-txt p {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
  margin-bottom: 14px;
}

.sx-lg-txt p:last-child { margin-bottom: 0; }

.sx-lg-list { margin: 0 0 16px; padding-left: 20px; }

.sx-lg-list li {
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
  margin-bottom: 7px;
}

/* --- banda de cierre --- */
.sx-lg-end { padding: 0 0 70px; }

.sx-lg-end-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 34px 38px;
  border-radius: 20px;
  background: linear-gradient(120deg, #001024 0%, var(--sx-navy) 48%, #062a5c 100%);
}

.sx-lg-end-ico {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--sx-blue-lt);
}

.sx-lg-end h2 {
  font-family: var(--sx-disp);
  font-size: var(--sx-t-banner);
  line-height: var(--sx-lh-title);
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.sx-lg-end p {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut-dark);
}

.sx-lg-end .sx-btn { white-space: nowrap; }

@media (max-width: 991px) {
  /* El indice pasa arriba y deja de ser sticky: en tablet la columna de 290px
     dejaba el texto legal por debajo de 45 caracteres por linea. */
  .sx-lg-grid { grid-template-columns: 1fr; gap: 32px; }
  .sx-lg-toc { position: static; max-height: none; }
}

@media (max-width: 767px) {
  .sx-lg-hero { padding: 38px 0 26px; }
  .sx-lg-body { padding: 26px 22px 30px; border-radius: 16px; }
  .sx-lg-sep span { width: 60px; }
  .sx-lg-end-grid { grid-template-columns: 1fr; text-align: center; padding: 28px 22px; }
  .sx-lg-end-ico { margin-inline: auto; }
  .sx-lg-end .sx-btn { justify-self: center; }
}

/* ---------------------------------------------------------------------------
   OUR PROJECTS  (/projects/)
   El markup lo genera build_projects_page() en build.py.

   La rejilla NO se redefine: son las mismas .sx-pj-* del bloque del home (ver
   "NUESTROS PROYECTOS"), porque el filtrado lo hace el mismo Isotope y quiere
   items flotados. Aqui solo va lo que cambia en el estado "Coming Soon".

   Los dos botones de esta pagina van en NAVY y no en el azul del resto del
   sitio: asi los pinta el mockup del cliente. Es la unica pagina con ese
   tratamiento; si se decide unificar, se quita `.sx-btn--navy` y ya.
   --------------------------------------------------------------------------- */
.sx-btn--navy,
.sx-btn--navy:visited { background: var(--sx-navy); }
.sx-btn--navy:hover { background: var(--sx-blue); }

/* la flecha, con el mismo patron que /our-founders/ y el cierre del articulo */
.sx-pjp-hero .sx-btn,
.sx-pjp-end .sx-btn { display: inline-flex; align-items: center; gap: 10px; }
.sx-pjp-hero .sx-btn em,
.sx-pjp-end .sx-btn em { font-style: normal; transition: transform .25s ease; }
.sx-pjp-hero .sx-btn:hover em,
.sx-pjp-end .sx-btn:hover em { transform: translateX(4px); }

/* --- hero --- */
/* Mismo degradado que el hero de /contact/: tiene que llegar a BLANCO PURO
   donde cae la foto, porque el original trae fondo blanco y sobre gris se le
   veria el rectangulo. */
.sx-pjp-hero {
  padding: 44px 0 34px;
  border-bottom: 1px solid #e9eef7;
  background: linear-gradient(100deg, #e9f0fa 0%, #f2f6fd 24%, #fff 40%);
}

.sx-pjp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 36px;
  align-items: center;
}

.sx-pjp-hero h1 {
  margin: 0 0 18px;
  font-family: var(--sx-disp);
  font-size: clamp(34px, 3.9vw, 54px);
  line-height: 1.12;
  letter-spacing: var(--sx-ls-h2);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
  text-wrap: balance;
}

.sx-pjp-hero .sx-btn { margin-top: 28px; }

.sx-pjp-hero-art img { display: block; width: 100%; height: auto; }

/* --- barra de filtros --- */
/* Mas callada que la del home: el mockup la quiere en texto plano y solo la
   activa como pildora. Se sube a 16px (--sx-t-body, un peldano real de la
   escala) porque sin recuadro ni icono, a 13px se leia como pie de foto. */
.sx-pjp-work { padding: 40px 0 20px; }

.sx-pjp-filter { gap: 4px; margin-bottom: 34px; }

.sx-pjp-filter button {
  padding: 12px 20px;
  border-color: transparent;
  background: transparent;
  font-size: var(--sx-t-body);
  font-weight: 400;
}

.sx-pjp-filter button:hover {
  border-color: transparent;
  box-shadow: none;
  color: var(--sx-blue);
}

.sx-pjp-filter button.is-checked {
  background: #fff;
  border-color: #c2d0f5;
  color: var(--sx-navy);
  font-weight: var(--sx-w-ui);
}

/* --- tarjetas "Coming Soon" --- */
/* Los 9 marcadores son mockups de dispositivo sobre fondo liso, no fotos de
   escena: el paneo de las tarjetas del home (width + 40px y translate) le
   cortaria el portatil por un lado. */
.sx-pj--soon .sx-pj-img img,
.sx-pj--soon:hover .sx-pj-img img {
  width: 100%;
  transform: none;
}

/* Las tarjetas de servicios y blog van a 16/10, pero estos mockups vienen a
   ~1.9:1 —que es ademas lo que mide la tarjeta en el mockup de la pagina—. A
   16/10 el `cover` se comia el 17% del ancho y cortaba el movil de las tres que
   lo llevan pegado al borde. */
.sx-pj--soon .sx-pj-img { aspect-ratio: 1.9; }

/* sin flecha, asi que el hueco de la derecha sobra */
.sx-pj--soon .sx-pj-body {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 9px;
  align-items: center;
  padding: 20px 22px 22px;
}

.sx-pj-owl {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e9f0fd;
  color: var(--sx-blue);
}

.sx-pj--soon h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

/* las 9 tarjetas dicen lo mismo y ocupan 2 lineas: no hay que reservar 3 como
   en el home, donde cada descripcion es distinta */
.sx-pj--soon p {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
}

.sx-pj-badge {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  padding: 8px 17px;
  border-radius: 100px;
  background: #e9f0fd;
  color: var(--sx-blue);
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
}

/* no hay enlace, asi que el titulo tampoco se ilumina al pasar por encima */
.sx-pj--soon:hover h3 { color: var(--sx-navy); }

/* --- banda de cierre --- */
.sx-pjp-end { padding: 26px 0 66px; }

.sx-pjp-end-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 0.95fr) auto;
  align-items: center;
  gap: 30px;
  padding: 28px 34px;
  border: 1px solid #dde6f8;
  border-radius: 20px;
  background: #f5f8fe;
}

.sx-pjp-end-owl {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e5edfc;
  color: var(--sx-blue);
}

/* pegada al titular: la barrita del eyebrow separaria las dos lineas */
.sx-pjp-end-copy .sx-eyebrow { margin-bottom: 8px; }
.sx-pjp-end-copy .sx-eyebrow::after { display: none; }

.sx-pjp-end-copy h2 {
  margin: 0;
  font-family: var(--sx-disp);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.22;
  letter-spacing: var(--sx-ls-h2);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-pjp-end-body {
  margin: 0;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-pjp-end .sx-btn { white-space: nowrap; }

@media (max-width: 1199px) {
  .sx-pjp-end-panel { grid-template-columns: auto minmax(0, 1fr); row-gap: 22px; }
  .sx-pjp-end-body { grid-column: 2; }
  .sx-pjp-end .sx-btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 991px) {
  .sx-pjp-hero { padding: 30px 0 26px; }
  .sx-pjp-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .sx-pjp-hero-art { max-width: 560px; }
  .sx-pjp-work { padding: 30px 0 14px; }
  .sx-pjp-filter { gap: 2px; margin-bottom: 26px; }
  .sx-pjp-filter button { padding: 10px 14px; }
}

/* En movil las 6 etiquetas se partian en tres filas centradas y desiguales, que
   ademas empujaban la rejilla media pantalla hacia abajo. Se pasa a tira
   horizontal: una sola linea que se arrastra, sangrada hasta el borde para que
   se vea que hay mas a la derecha. */
@media (max-width: 767px) {
  .sx-pjp-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -12px;
    padding-inline: 12px;
  }
  .sx-pjp-filter::-webkit-scrollbar { display: none; }
  .sx-pjp-filter button { flex: 0 0 auto; }

  .sx-pjp-end-panel { grid-template-columns: 1fr; text-align: center; padding: 26px 22px; }
  .sx-pjp-end-owl { margin-inline: auto; width: 78px; height: 78px; }
  .sx-pjp-end-body,
  .sx-pjp-end .sx-btn { grid-column: 1; }
  .sx-pjp-end .sx-btn { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-pjp-hero .sx-btn em,
  .sx-pjp-end .sx-btn em { transition: none; }
  .sx-pjp-hero .sx-btn:hover em,
  .sx-pjp-end .sx-btn:hover em { transform: none; }
}

/* ---------------------------------------------------------------------------
   LEGALES EN LA BARRA DE COPYRIGHT
   Los pone add_footer_legal() en build.py. Colgaban del menu "Useful Links",
   donde no habia quien los encontrara: ultimos de una lista de ocho, entre
   enlaces de seccion. Aqui van donde los busca todo el mundo.

   Van en LA MISMA LINEA que el copyright, no debajo: copyright a la izquierda y
   legales a la derecha, que es lo de siempre en un pie. Debajo sumaban 20px de
   alto al footer para dos enlaces.

   El tema centra esa fila con `.row.text-center` (0,2,0), asi que el reparto se
   hace convirtiendo `.col` en flex desde un selector mas fuerte (0,3,1).
   --------------------------------------------------------------------------- */
footer.footer .secondary-footer .col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
}

.sx-legal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
}

/* EL COLOR LO LLEVA EL <span>, NO EL <a>.
   `base.css` trae `a, a:visited { color: var(--themeht-text-color) }`, que es
   navy, y el color de `:visited` NO hay forma de sobrescribirlo: probado en el
   navegador subiendo especificidad (0,2,1), con `nav.sx-legal-bar a:visited` y
   hasta con `!important` — el navegador se queda con el navy del tema. Sobre el
   footer navy eso deja los dos enlaces INVISIBLES en cuanto el visitante ha
   entrado una vez a la pagina.
   `:visited` solo tine el <a>, no a sus hijos, asi que el texto va envuelto en
   un <span> (lo pone add_footer_legal en build.py) y el color se aplica ahi.
   Es el mismo problema que documenta check-visited.js — que ojo, NO lo caza:
   solo mira `a[class]` y estos enlaces no llevan clase. */
.sx-legal-bar a {
  position: relative;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
}

.sx-legal-bar a > span {
  color: var(--sx-mut-dark);
  transition: color .3s;
}

.sx-legal-bar a:hover > span { color: #fff; }

/* separador entre enlaces, dibujado y no un caracter: asi no se lee en voz alta */
.sx-legal-bar a + a::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .22);
}

/* En movil no caben en una linea: se apilan y se centran, como el resto del pie */
@media (max-width: 575px) {
  footer.footer .secondary-footer .col {
    justify-content: center;
    gap: 8px;
  }
  .sx-legal-bar { justify-content: center; gap: 8px 16px; }
  .sx-legal-bar a + a::before { left: -8px; }
}

/* ---------------------------------------------------------------------------
   FAQ  (/faq/)
   El markup lo genera build_faq_page() en build.py.

   La pagina dejo de ser 7 bloques con <h2> y paso a lista PLANA con buscador y
   filtros: los grupos del cliente son ahora los chips de arriba. El acordeon en
   si (.sx-faq-item, .sx-faq-ans, .sx-faq-mark) NO se redefine — es el mismo que
   ya usaba la FAQ corta de /contact/, y sigue estando ahi.
   --------------------------------------------------------------------------- */
/* Toda la pagina va en una caja mas estrecha que el resto del sitio: en el
   mockup el contenido ocupa el 87% del ancho, no el 98% de `.sx-sv-wrap`. Se
   aplica a las cuatro secciones para que hero, lista, recursos y cierre queden
   en la misma columna. */
.sx-fq-wrap { max-width: 1272px; }

/* --- hero --- */
/* Mismo truco que /contact/ y /projects/: el degradado tiene que llegar a
   BLANCO PURO donde cae la ilustracion, que trae fondo claro propio; sobre gris
   se le veria el rectangulo. */
.sx-fq-hero {
  padding: 40px 0 26px;
  background: linear-gradient(100deg, #eaf0fb 0%, #f3f7fd 26%, #fff 44%);
}

.sx-fq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 32px;
  align-items: center;
}

.sx-fq-hero h1 {
  margin: 0 0 18px;
  font-family: var(--sx-disp);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.14;
  letter-spacing: var(--sx-ls-h2);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
  text-wrap: balance;
}

.sx-fq-hero-art img { display: block; width: 100%; height: auto; }

/* --- buscador --- */
.sx-fq-list-section { padding: 8px 0 40px; }

.sx-fq-search {
  position: relative;
  margin: 0 0 22px;
}

.sx-fq-search-ico {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: #93a3bb;
  pointer-events: none;
}

.sx-fq-search input {
  width: 100%;
  padding: 17px 22px 17px 56px;
  border: 1px solid #e2e8f3;
  border-radius: 14px;
  background: #fff;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-flat);
  color: var(--sx-navy);
  box-shadow: 0 6px 20px rgba(0, 23, 51, .04);
  transition: border-color .3s, box-shadow .3s;
}

.sx-fq-search input::placeholder { color: #93a3bb; }

.sx-fq-search input:focus {
  outline: none;
  border-color: var(--sx-blue);
  box-shadow: 0 6px 22px rgba(0, 82, 204, .12);
}

/* la X nativa de <input type=search> en Chrome desentona con el resto */
.sx-fq-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- chips de tema --- */
.sx-fq-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 30px;
}

.sx-fq-chip {
  padding: 10px 20px;
  border: 1px solid #e2e8f3;
  border-radius: 100px;
  background: #fff;
  color: var(--sx-navy);
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}

.sx-fq-chip:hover {
  border-color: var(--sx-blue);
  box-shadow: 0 6px 18px rgba(0, 82, 204, .12);
}

.sx-fq-chip.is-on {
  background: var(--sx-blue);
  border-color: var(--sx-blue);
  color: #fff;
}

/* --- lista --- */


/* La pregunta ocupa toda la caja, pero la RESPUESTA no: a 1248px de ancho
   saldrian ~150 caracteres por linea y no hay quien la lea. El mockup solo
   ensena las preguntas cerradas, asi que esto no se ve ahi. */
.sx-fq-block .sx-faq-ans p { max-width: 92ch; }

.sx-fq-vacio {
  margin: 26px 0 0;
  text-align: center;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

/* --- recursos --- */
.sx-fq-res-section { padding: 26px 0 40px; }

.sx-fq-res-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.sx-fq-res {
  padding: 26px 24px 24px;
  border: 1px solid #e9edf4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 23, 51, .05);
  transition: border-color .4s, box-shadow .4s, transform .4s;
}

.sx-fq-res:hover {
  border-color: #d6e1f4;
  box-shadow: 0 24px 48px rgba(0, 23, 51, .12);
  transform: translateY(-3px);
}

.sx-fq-res-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #eaf1fd;
  color: var(--sx-blue);
}

.sx-fq-res h3 {
  margin: 0 0 8px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-card);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-fq-res p {
  margin: 0 0 16px;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

/* El color lo llevan los HIJOS, no el <a>: `a:visited` del tema lo pasaria de
   azul a navy en cuanto se visita el destino. Sobre blanco se leeria igual,
   pero seria el mismo enlace de dos colores segun el historial de cada uno.
   Mismo patron que los legales del footer; lo caza check-visited.js. */
.sx-fq-res-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-flat);
  font-weight: var(--sx-w-ui);
}

.sx-fq-res-cta > span,
.sx-fq-res-cta > em { color: var(--sx-blue); }

.sx-fq-res-cta em { font-style: normal; transition: transform .25s ease; }
.sx-fq-res:hover .sx-fq-res-cta em { transform: translateX(4px); }

/* --- banda de cierre --- */
.sx-fq-end { padding: 0 0 62px; }

.sx-fq-end-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  align-items: end;
  gap: 20px;
  padding: 40px 44px 0;
  border-radius: 20px;
  background: #eef4fd;
  overflow: hidden;
}

.sx-fq-end-copy { padding-bottom: 40px; }

.sx-fq-end-copy h2 {
  margin: 0 0 12px;
  font-family: var(--sx-disp);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.22;
  letter-spacing: var(--sx-ls-h2);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

.sx-fq-end-copy p {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: var(--sx-t-body);
  line-height: var(--sx-lh-body);
  color: var(--sx-mut);
}

.sx-fq-end .sx-btn { display: inline-flex; align-items: center; gap: 10px; }
.sx-fq-end .sx-btn em { font-style: normal; transition: transform .25s ease; }
.sx-fq-end .sx-btn:hover em { transform: translateX(4px); }

/* La mascota ASOMA por el borde inferior del panel: se alinea abajo y se deja
   que el panel la recorte. Su fondo es casi blanco y el del panel azul palido,
   asi que se funde con un degradado en vez de cortar en seco. */
.sx-fq-end-owl {
  display: block;
  width: 100%;
  height: auto;
  align-self: end;
  mix-blend-mode: multiply;
}

@media (max-width: 991px) {
  .sx-fq-hero { padding: 28px 0 20px; }
  .sx-fq-hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .sx-fq-hero-art { max-width: 460px; margin-inline: auto; }
  .sx-fq-res-grid { grid-template-columns: 1fr; }
  .sx-fq-end-panel { grid-template-columns: 1fr; padding: 32px 28px 0; }
  .sx-fq-end-copy { padding-bottom: 0; }
  .sx-fq-end-owl { max-width: 320px; margin-inline: auto; }
}

@media (max-width: 640px) {
  .sx-fq-search input { padding: 15px 18px 15px 50px; }
  .sx-fq-search-ico { left: 18px; }
  .sx-fq-chips { gap: 8px; margin-bottom: 24px; }
  .sx-fq-chip { padding: 9px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-fq-res, .sx-fq-res-cta em, .sx-fq-end .sx-btn em { transition: none; }
  .sx-fq-res:hover { transform: none; }
  .sx-fq-res:hover .sx-fq-res-cta em,
  .sx-fq-end .sx-btn:hover em { transform: none; }
}

/* UN BLOQUE POR GRUPO: el titulo va FUERA de la tarjeta, separando cada
   seccion. Es como estaba la pagina antes del rediseno; con los 7 titulos
   dentro de una sola tarjeta, las 40 preguntas se leian como un acordeon sin
   fin. custom.js esconde el bloque entero cuando no le queda ninguna pregunta.
   La tarjeta la sigue poniendo `.sx-faq-list`, ahora una por grupo. */
.sx-fq-block + .sx-fq-block { margin-top: 44px; }

.sx-fq-block h2 {
  margin: 0 0 18px;
  font-family: var(--sx-disp);
  font-size: var(--sx-t-banner);
  line-height: var(--sx-lh-title);
  font-weight: var(--sx-w-title);
  color: var(--sx-navy);
}

/* Pie de la seccion de proyectos del home: sin el, las 6 tarjetas "Coming Soon"
   son un callejon sin salida. Mismo gesto que el pie de la seccion del blog. */
.sx-pj-foot { margin-top: 14px; text-align: center; }
.sx-pj-foot .sx-btn { display: inline-flex; align-items: center; gap: 10px; }
.sx-pj-foot .sx-btn em { font-style: normal; transition: transform .25s ease; }
.sx-pj-foot .sx-btn:hover em { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .sx-pj-foot .sx-btn em { transition: none; }
  .sx-pj-foot .sx-btn:hover em { transform: none; }
}

/* Aviso de los formularios que aun no envian (newsletter). Lo inserta
   custom.js al pulsar; ver el bloque FORMULARIOS de build.py. */
.sx-form-inerte {
  margin: 10px 0 0;
  font-family: var(--sx-sans);
  font-size: var(--sx-t-ui);
  line-height: var(--sx-lh-cap);
  color: var(--sx-mut-dark);
}

.sx-bs-news .sx-form-inerte { color: var(--sx-mut); }