/* ============================================================
   MAYIEX-626 Systems, Inc.
   HTML + CSS a mano, sin build. Orden: tokens → reset → shell →
   tipografía → secciones → utilidades.

   El verde NO es de la matriz: es de las marcas (Factorix #0a8658,
   Fendiri #008f5c, que son casi el mismo verde) y sólo aparece en la
   sección de marcas. La matriz es tinta y latón; la neutra comparte el
   hue 197 del teal del grupo, desaturado, y el acento es su
   complemento. Por eso armoniza sin convertirse en una hermana más.
   ============================================================ */
:root{
  color-scheme: light dark;

  --mx-paper:        #eef1f2;
  --mx-paper-raised: #f8f9fa;
  --mx-paper-sunk:   #e2e7e9;
  --mx-band:         #0f1c22;

  --mx-ink:          #15252b;
  --mx-ink-muted:    #45575f;
  --mx-band-ink:     #e8eced;
  --mx-band-muted:   #aab6bb;

  /* Dos reglas, y no son intercambiables: la decorativa divide, la
     fuerte bordea algo clickeable y por eso cruza 3:1. */
  --mx-rule:         #c8d1d5;
  --mx-rule-strong:  #6c7d84;

  --mx-accent:       #7B5A17;
  --mx-accent-press: #5E4512;
  --mx-accent-solid: #6A4E18;
  --mx-accent-soft:  #f1e6d0;
  --mx-accent-lit:   #D4B06A;

  --mx-brand-green:     #0A8658;  /* marca y filete; NO texto: 4.05:1 */
  --mx-brand-green-ink: #076E4A;  /* el único verde que pasa AA como texto */

  --mx-focus: var(--mx-accent);

  --mx-r-chip: 2px;
  --mx-r-panel: 10px;
  --mx-r-button: 4px;

  --mx-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --mx-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mx-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --mx-step--1: clamp(0.8125rem, 0.792rem + 0.093vw, 0.875rem);
  --mx-step-0:  clamp(1rem,      0.969rem + 0.139vw, 1.094rem);
  --mx-step-1:  clamp(1.1875rem, 1.125rem + 0.278vw, 1.375rem);
  --mx-step-2:  clamp(1.375rem,  1.25rem  + 0.556vw, 1.75rem);
  --mx-step-3:  clamp(1.6875rem, 1.458rem + 1.019vw, 2.375rem);
  --mx-step-4:  clamp(1.125rem,  0.792rem + 1.481vw, 2.125rem);
  --mx-step-5:  clamp(2.125rem,  1.417rem + 3.148vw, 4.25rem);

  --mx-shell: min(100% - 2rem, 68rem);
  --acento: var(--mx-accent);   /* lo leen los SVG del logotipo */
}

/* Oscuro por preferencia del sistema. El :not() deja que un
   data-theme="light" explícito gane sobre la preferencia. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --mx-paper:        #111a1d;
    --mx-paper-raised: #182328;
    --mx-paper-sunk:   #0c1316;
    --mx-band:         #0c1316;   /* en oscuro el zócalo se HUNDE, no se aclara */

    --mx-ink:          #e6e9ea;
    --mx-ink-muted:    #9baab0;
    --mx-band-ink:     #e6e9ea;
    --mx-band-muted:   #9baab0;

    --mx-rule:         #2c363a;
    --mx-rule-strong:  #637279;

    --mx-accent:       #D4B06A;
    --mx-accent-press: #E7C98F;
    --mx-accent-solid: #D4B06A;
    --mx-accent-soft:  #1e2a2b;
    --mx-accent-lit:   #D4B06A;

    --mx-brand-green:     #34D399;
    --mx-brand-green-ink: #34D399;

    --acento: #D4B06A;
  }
}

/* Mismo cuerpo para el toggle manual. Son dos copias a propósito: CSS
   plano no puede compartir un cuerpo entre un @media y un selector.
   Si tocás una, tocá la otra — van pegadas por eso. */
:root[data-theme="dark"]{
  --mx-paper:        #111a1d;
  --mx-paper-raised: #182328;
  --mx-paper-sunk:   #0c1316;
  --mx-band:         #0c1316;

  --mx-ink:          #e6e9ea;
  --mx-ink-muted:    #9baab0;
  --mx-band-ink:     #e6e9ea;
  --mx-band-muted:   #9baab0;

  --mx-rule:         #2c363a;
  --mx-rule-strong:  #637279;

  --mx-accent:       #D4B06A;
  --mx-accent-press: #E7C98F;
  --mx-accent-solid: #D4B06A;
  --mx-accent-soft:  #1e2a2b;
  --mx-accent-lit:   #D4B06A;

  --mx-brand-green:     #34D399;
  --mx-brand-green-ink: #34D399;

  --acento: #D4B06A;
}

/* ---------- reset mínimo ---------- */
*, *::before, *::after{ box-sizing: border-box; }
/* clip, NO hidden: `hidden` mata position:sticky en toda la página.
   Hace falta porque las secciones a sangre usan 100vw, que en
   Windows/Android incluye la barra de scroll. */
html{ overflow-x: clip; }
body{
  margin: 0;
  -webkit-text-size-adjust: 100%;
  font-family: var(--mx-sans);
  font-size: var(--mx-step-0);
  line-height: 1.6;
  color: var(--mx-ink);
  background: var(--mx-paper);
}
img, svg{ max-width: 100%; height: auto; display: block; }

:where(a, button, summary, [tabindex]):focus-visible{
  outline: 2px solid var(--mx-focus);
  outline-offset: 2px;
  border-radius: var(--mx-r-chip);
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- shell y ritmo vertical ----------
   Las secciones no llevan margen propio: el espaciado vive en el
   hermano adyacente. Así no hay dos reglas peleándose el padding. */
.mx-shell{ width: var(--mx-shell); margin-inline: auto; }
.mx-seccion + .mx-seccion{ margin-block-start: clamp(3.5rem, 2rem + 6vw, 7rem); }

/* ---------- tipografía ---------- */
.mx-display{
  font-family: var(--mx-serif); font-weight: 400;
  font-size: var(--mx-step-5); line-height: 1.04;
  letter-spacing: -.015em; max-width: 24ch; text-wrap: balance;
  margin: 0;
}
.mx-h2{
  font-family: var(--mx-serif); font-weight: 400;
  font-size: var(--mx-step-3); line-height: 1.14;
  letter-spacing: -.01em; max-width: 30ch; text-wrap: balance;
  margin: 0 0 1rem;
}
.mx-h3{
  font-family: var(--mx-serif); font-weight: 700;
  font-size: var(--mx-step-2); line-height: 1.2; margin: 0 0 .5rem;
}
.mx-lead{
  font-family: var(--mx-serif); font-weight: 400;
  font-size: var(--mx-step-1); line-height: 1.62;
  max-width: 46ch; margin: 1.25rem 0 0;
}
.mx-body{ max-width: 66ch; text-wrap: pretty; }
.mx-fine{ font-size: var(--mx-step--1); line-height: 1.55; color: var(--mx-ink-muted); }

/* La mono es una CITA: sólo donde reproducimos una cadena que escribió
   una máquina (el descriptor, un domicilio registrado, un dominio).
   Nunca como etiqueta ni como «estilo de dato chico». */
.mx-quoted{
  font-family: var(--mx-mono); font-weight: 500;
  font-size: var(--mx-step-4); letter-spacing: .01em;
  font-variant-ligatures: none;
  user-select: all;   /* un clic selecciona la cadena entera */
}

a{ color: var(--mx-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover{ color: var(--mx-accent-press); }

/* ---------- encabezado ---------- */
.mx-top{ padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); }
.mx-top svg{ width: 180px; color: var(--mx-ink); }

/* ---------- héroe ---------- */
.mx-hero{ padding-block: clamp(.5rem, 0rem + 2vw, 2rem) 0; }
.mx-hero-grid{ display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); }
@media (min-width: 880px){
  .mx-hero-grid{ grid-template-columns: minmax(0,1fr) 19rem; }
}

/* En móvil el renglón SUBE sobre la prosa: quien llega asustado desde
   el teléfono tiene que ver la cadena antes de leer un párrafo. */
.mx-hero-col{ display: flex; flex-direction: column; gap: 1.5rem; }
.mx-hero-texto{ order: 2; }
.mx-hero-renglon{ order: 1; }
@media (min-width: 880px){
  .mx-hero-texto{ order: 1; }
  .mx-hero-renglon{ order: 2; }
}

/* El device central: la fila del resumen de tarjeta, reproducida, con
   el fondo grabado a líneas cruzadas. El guilloché es el lenguaje
   gráfico de los certificados de acciones y del dinero — y esta
   empresa es exactamente esas dos cosas. */
.mx-renglon{
  background-color: var(--mx-band);
  color: var(--mx-band-ink);
  border-block: 1px solid color-mix(in oklab, var(--mx-accent-lit) 45%, transparent);
  border-radius: var(--mx-r-chip);
  padding: clamp(.875rem, .5rem + 1.7vw, 1.5rem);
  /* Dos familias de líneas a ±68° con periodos coprimos (7 y 11) para
     que el enrejado no forme bandas de moiré. */
  background-image:
    repeating-linear-gradient( 68deg,
      color-mix(in oklab, var(--mx-accent-lit) 18%, transparent) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-68deg,
      color-mix(in oklab, var(--mx-accent-lit) 12%, transparent) 0 1px, transparent 1px 11px);
}
.mx-renglon .mx-quoted{ display: block; }
.mx-renglon .mx-comercial{
  font-family: var(--mx-mono); font-weight: 400;
  font-size: var(--mx-step--1); color: var(--mx-band-muted);
  margin-bottom: .4rem;
}
@media (prefers-contrast: more){
  .mx-renglon{ background-image: none; }  /* se va la textura, queda el dato */
}
.mx-renglon-pie{ margin: .6rem 0 0; }

/* Columna de hechos. Regla dura: si un dato no se puede verificar, no
   entra acá. Una página cuyo trabajo es resultar verificable no puede
   tener datos decorativos mezclados con datos ciertos. */
.mx-ficha{
  /* align-self: la ficha se mide por su contenido; sin esto se estira a la
     altura de la fila de la grilla y deja un hueco al pie. */
  display: grid; gap: 1.15rem; align-content: start; align-self: start; margin: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--mx-paper-raised);
  border: 1px solid var(--mx-rule);
  border-radius: var(--mx-r-panel);
}
.mx-ficha dt{
  font-family: var(--mx-sans); font-weight: 600;
  font-size: var(--mx-step--1); color: var(--mx-ink-muted); margin-bottom: .2rem;
}
.mx-ficha dd{ margin: 0; font-family: var(--mx-serif); font-size: var(--mx-step-0); }
.mx-ficha dd.es-cita{
  font-family: var(--mx-mono); font-weight: 400; font-size: var(--mx-step--1);
  background: var(--mx-accent-soft); color: var(--mx-ink);
  border-radius: var(--mx-r-chip); padding: .18em .45em;
  display: inline-block; user-select: all;
}

/* ---------- marcas: los únicos dos paneles del sitio ---------- */
.mx-marcas{ display: grid; gap: 1.25rem; }
@media (min-width: 760px){ .mx-marcas{ grid-template-columns: 1fr 1fr; } }
.mx-marca{
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--mx-paper-raised);
  border: 1px solid var(--mx-rule);
  border-radius: var(--mx-r-panel);
  display: flex; flex-direction: column; gap: .35rem;
}
/* Las dos marcas no se distinguen por color: son casi el mismo verde.
   Se distinguen por DEVICE. Factorix lleva renglones de libro mayor;
   Fendiri, los dots de registro de imprenta que ya usa su propio CSS. */
.mx-device{ height: 14px; margin-bottom: 1rem; }
.mx-device--libro{
  background-image: repeating-linear-gradient(to bottom,
    var(--mx-brand-green) 0 1px, transparent 1px 5px);
  width: 56px;
}
.mx-device--dots{
  background-image: radial-gradient(circle at center, var(--mx-brand-green) 1.5px, transparent 1.6px);
  background-size: 9px 9px; width: 56px;
}
.mx-marca-rol{
  font-family: var(--mx-sans); font-weight: 600; font-size: var(--mx-step--1);
  color: var(--mx-brand-green-ink);
}
.mx-marca p{ margin: .5rem 0 0; }
.mx-marca .mx-dominio{ margin-top: auto; padding-top: 1rem; }

/* ---------- servicios: lo más liviano de la página, a propósito ----
   Vestir «diseño y servicios» como una grilla de tarjetas con iconos
   convertiría una sociedad matriz en una agencia. */
.mx-servicios{ list-style: none; margin: 0; padding: 0; max-width: 66ch; }
.mx-servicios li{ padding-block: 1.1rem; border-top: 1px solid var(--mx-rule); }
.mx-servicios li:last-child{ border-bottom: 1px solid var(--mx-rule); }
.mx-servicios h3{
  font-family: var(--mx-sans); font-weight: 600; font-size: var(--mx-step-0);
  margin: 0 0 .15rem;
}
.mx-servicios p{ margin: 0; color: var(--mx-ink-muted); }

/* ---------- zócalo: pagos + pie comparten un solo fondo oscuro ------
   Papel arriba, piedra abajo. De ahí sale la sensación de solidez: de
   la composición, no de los adjetivos. */
.mx-zocalo{
  background: var(--mx-band);
  color: var(--mx-band-ink);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  margin-block-start: clamp(4rem, 2rem + 7vw, 8rem);
}
.mx-zocalo a{ color: var(--mx-accent-lit); }
.mx-zocalo .mx-h2, .mx-zocalo .mx-fine{ color: inherit; }
.mx-zocalo .mx-fine{ color: var(--mx-band-muted); }
.mx-pagos{ padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.mx-firma{
  font-family: var(--mx-mono); font-weight: 500;
  font-size: var(--mx-step-1); letter-spacing: .02em;
  color: var(--mx-accent-lit); margin: 1.75rem 0 0;
}
.mx-pie{
  border-top: 1px solid color-mix(in oklab, var(--mx-accent-lit) 40%, transparent);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.mx-pie-grid{ display: grid; gap: 2rem; }
@media (min-width: 760px){ .mx-pie-grid{ grid-template-columns: 1fr 1fr; } }
.mx-pie svg{ width: 320px; color: var(--mx-band-ink); margin-bottom: 1.25rem; }
.mx-pie address{ font-style: normal; }
.mx-pie-legal{ margin-top: 2rem; }

/* ---------- selector de idioma ----------
   Tres páginas estáticas, no un toggle por JavaScript: un buscador y un
   visitante sin JS tienen que ver el idioma que pidieron. */
.mx-langs{ display: flex; gap: .75rem; align-items: baseline; font-size: var(--mx-step--1); }
.mx-langs a{ color: var(--mx-ink-muted); text-decoration: none; }
.mx-langs a:hover{ color: var(--mx-accent); text-decoration: underline; }
.mx-langs [aria-current="page"]{ color: var(--mx-ink); font-weight: 600; }
.mx-top-grid{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }