/* ============================================================
   TRIXIO CORP — trixio.io
   Paleta: azul marino (tecnología), fría, sin oro, 1 solo acento
   ============================================================ */
/* ------------------------------------------------------------------
   TEMAS
   La marca es oscura de origen, así que el oscuro es el tema base.
   El claro entra por preferencia del sistema o por el conmutador,
   y [data-theme] siempre gana sobre la preferencia del sistema.
   Todos los pares de color de ambos temas están verificados en AA.
   ------------------------------------------------------------------ */
:root{
  /* Azul marino: el fondo es marino profundo y el texto blanco azulado.
     Un solo acento —azul eléctrico— según la disciplina de marca. */
  --bg:#070D1C;
  --panel:#0D1730;
  --panel2:#0A1226;
  --line:#18233D;
  --line2:#233053;
  /* Borde de controles: 3:1 mínimo, porque en los botones fantasma el borde es la
     única señal de que son botones (WCAG 1.4.11). */
  --line-control:#63749A;
  --cyan:#5B95FF;          /* acento sobre fondo */
  --accent-solid:#5B95FF;  /* relleno de botón primario */
  --accent-on:#070D1C;     /* texto sobre ese relleno */
  --indigo:#8AA5FF;
  --steel:#8E9FC2;
  --text:#E9EEF9;
  --muted:#9BA9C6;
  --faint:#8593B2;
  --glow:.35;              /* intensidad de sombras de color */
  --grid:rgba(190,214,255,.03);
  --scrim:rgba(7,13,28,.82); /* fondo del header translúcido */
  --marca-bg:#070D1C;        /* fondo de los logotipos de cliente: fijo en ambos temas */
  /* Relieve de los contenedores */
  --sombra:0 2px 5px rgba(0,0,0,.52), 0 16px 40px rgba(0,0,0,.48);
  --sombra-alta:0 6px 14px rgba(0,0,0,.58), 0 32px 72px rgba(0,0,0,.62);
  --luz:inset 0 1px 0 rgba(233,238,249,.085);
  --sans:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme:dark;
}

/* Paleta clara — se define una sola vez y se reutiliza en los dos selectores */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#F3F6FC; --panel:#FFFFFF; --panel2:#F9FBFF;
    --line:#E0E7F3; --line2:#CEDAEC; --line-control:#7486AD;
    --cyan:#1A47C4; --accent-solid:#1A47C4; --accent-on:#FFFFFF;
    --indigo:#3A4FCC; --steel:#4F5F86;
    --text:#0E1B3A; --muted:#41527A; --faint:#4A5C86;
    --glow:.20; --grid:rgba(14,27,58,.04); --scrim:rgba(243,246,252,.86); --marca-bg:#0B1424;
    --sombra:0 2px 5px rgba(14,27,58,.08), 0 14px 34px rgba(14,27,58,.13);
    --sombra-alta:0 6px 14px rgba(14,27,58,.12), 0 30px 64px rgba(14,27,58,.19);
    --luz:inset 0 1px 0 rgba(255,255,255,.95);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F3F6FC; --panel:#FFFFFF; --panel2:#F9FBFF;
  --line:#E0E7F3; --line2:#CEDAEC; --line-control:#7486AD;
  --cyan:#1A47C4; --accent-solid:#1A47C4; --accent-on:#FFFFFF;
  --indigo:#3A4FCC; --steel:#4F5F86;
  --text:#0E1B3A; --muted:#41527A; --faint:#4A5C86;
  --glow:.20; --grid:rgba(14,27,58,.04); --scrim:rgba(243,246,252,.86); --marca-bg:#0B1424;
  --sombra:0 2px 5px rgba(14,27,58,.08), 0 14px 34px rgba(14,27,58,.13);
  --sombra-alta:0 6px 14px rgba(14,27,58,.12), 0 30px 64px rgba(14,27,58,.19);
  --luz:inset 0 1px 0 rgba(255,255,255,.95);
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{
  font-family:var(--ui);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:color-mix(in srgb,var(--cyan) 28%,transparent)}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--scrim);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;display:block}
.brand .wordmark{
  font-family:var(--sans);font-weight:600;font-size:22px;
  letter-spacing:-.6px;color:var(--text);
}
.brand .wordmark i{font-style:normal;color:var(--cyan)}
.nav{display:flex;align-items:center;gap:26px;margin-left:24px}
.nav a{
  font-size:13.5px;font-weight:500;color:var(--muted);
  letter-spacing:.02em;white-space:nowrap;
}
.nav a:hover{color:var(--text);text-decoration:none}
.nav a.cta{
  color:var(--accent-on);background:var(--accent-solid);
  padding:8px 16px;border-radius:8px;font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nav a.cta:hover{transform:translateY(-1px);box-shadow:0 4px 18px color-mix(in srgb,var(--accent-solid) calc(var(--glow)*100%),transparent)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-control);border-radius:8px;
  color:var(--text);font-size:18px;width:38px;height:38px;cursor:pointer}
.header-right{display:flex;align-items:center;gap:18px}

/* ---------- Controles de idioma y tema ---------- */
.header-tools{display:flex;align-items:center;gap:10px}
.langsel{
  /* line-control y no line2: los botones inactivos se distinguen sólo por este
     contorno, así que necesita los 3:1 de un control (WCAG 1.4.11). */
  display:flex;border:1px solid var(--line-control);border-radius:8px;overflow:hidden;
}
.langsel button{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  background:none;border:none;color:var(--muted);
  padding:7px 9px;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.langsel button + button{border-left:1px solid var(--line-control)}
.langsel button:hover{color:var(--text);background:color-mix(in srgb,var(--steel) 10%,transparent)}
.langsel button[aria-pressed="true"]{
  color:var(--accent-on);background:var(--accent-solid);font-weight:700;
}
.themebtn{
  width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line-control);border-radius:8px;
  color:var(--text);cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.themebtn:hover{border-color:var(--steel);background:color-mix(in srgb,var(--steel) 10%,transparent)}
.themebtn svg{width:17px;height:17px;display:block}
/* Un solo botón muestra el ícono del tema al que se va a cambiar. */
.themebtn .i-sun{display:none}
.themebtn .i-moon{display:block}
:root[data-theme="light"] .themebtn .i-sun{display:block}
:root[data-theme="light"] .themebtn .i-moon{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .themebtn .i-sun{display:block}
  :root:not([data-theme="dark"]) .themebtn .i-moon{display:none}
}

/* Foco visible propio: el anillo por defecto se pierde sobre un fondo tan oscuro. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:88px 0 72px;
  background:
    radial-gradient(1100px 700px at 78% -10%, color-mix(in srgb,var(--cyan) 7%,transparent), transparent 60%),
    radial-gradient(900px 640px at 0% 110%, color-mix(in srgb,var(--indigo) 7%,transparent), transparent 60%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px);
}
.hero .wrap{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) 380px;
  gap:48px;align-items:center;
}
.hero-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.hero-kicker::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);
}
h1{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(34px,5.2vw,58px);
  line-height:1.08;letter-spacing:-1.5px;
  margin-bottom:22px;
}
h1 .hl{color:var(--cyan)}
.hero-sub{
  font-size:17px;color:var(--muted);max-width:56ch;margin-bottom:32px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:10px;letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--accent-solid);color:var(--accent-on)}
.btn-primary:hover{box-shadow:0 6px 24px color-mix(in srgb,var(--accent-solid) calc(var(--glow)*100%),transparent)}
.btn-ghost{border:1px solid var(--line-control);color:var(--text)}
.btn-ghost:hover{border-color:var(--steel);background:color-mix(in srgb,var(--steel) 8%,transparent)}
.hero-figure{position:relative;display:flex;align-items:center;justify-content:center}
.hero-figure svg{width:340px;height:340px;filter:drop-shadow(0 18px 44px color-mix(in srgb,var(--cyan) 12%,transparent))}
.hero-figure .hud{
  position:absolute;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--faint);text-transform:uppercase;
}
.hero-figure .hud.tl{top:0;left:6px}
.hero-figure .hud.br{bottom:0;right:6px;color:var(--cyan)}

/* ---------- Ticker ---------- */
.ticker{
  border-bottom:1px solid var(--line);
  padding:14px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.ticker span{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);
  white-space:nowrap;padding-right:52px;
}
.ticker span b{color:var(--steel);font-weight:400}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
}

/* ---------- Sections ---------- */
section.block{padding:84px 0;border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:44px;max-width:760px}
.sec-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:14px;
}
h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(26px,3.6vw,38px);
  letter-spacing:-1px;line-height:1.15;margin-bottom:14px;
}
.sec-sub{color:var(--muted);font-size:16px}

/* ---------- Cards: activos ---------- */
.grid-assets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:16px;
  padding:26px;position:relative;overflow:hidden;
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--line2)}
.card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--indigo));
  opacity:0;transition:opacity .18s ease;
}
.card:hover::after{opacity:1}
.card .icon{
  width:46px;height:46px;border-radius:12px;
  border:1px solid var(--line2);background:var(--panel2);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.card .icon svg{width:26px;height:26px}
.card h3{
  font-family:var(--sans);font-weight:600;font-size:19px;
  letter-spacing:-.3px;margin-bottom:8px;
}
.card p{font-size:14px;color:var(--muted)}
.card .tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
  display:block;margin-top:16px;
}

/* ---------- Board / Web3 ---------- */
.board-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}
.board-note{
  border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--indigo) 6%,transparent);
  padding:22px 26px;display:flex;gap:16px;align-items:flex-start;
}
.board-note .nd{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:7px;
  background:var(--indigo);box-shadow:0 0 12px var(--indigo);
}
.board-note p{font-size:14.5px;color:var(--muted)}
.board-note b{color:var(--text);font-weight:600}

/* ---------- Proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{
  border:1px solid var(--line);border-radius:16px;padding:24px;
  background:var(--panel2);counter-increment:step;position:relative;
}
.step::before{
  content:"0" counter(step);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--cyan);display:block;margin-bottom:14px;
}
.step h3{font-family:var(--sans);font-weight:600;font-size:16.5px;margin-bottom:8px;letter-spacing:-.2px}
.step p{font-size:13.5px;color:var(--muted)}

/* ---------- FAQ + Glosario ---------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.qa{
  border:1px solid var(--line);border-radius:14px;background:var(--panel2);
  padding:18px 22px;transition:border-color .18s ease;
  align-self:start; /* al abrir una, la vecina no se estira para igualar la altura */
}
.qa[open]{border-color:var(--line2)}
.qa summary{
  font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.2px;
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:12px;
  color:var(--text);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{
  content:"+";font-family:var(--mono);font-size:16px;color:var(--cyan);
  flex-shrink:0;line-height:1.4;transition:transform .18s ease;
}
.qa[open] summary::before{content:"−"}
.qa summary:hover{color:var(--cyan)}
.qa p{font-size:14px;color:var(--muted);margin-top:12px;padding-left:24px}

.glossary{
  margin-top:22px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));padding:22px 26px;
}
.glossary summary{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);cursor:pointer;list-style:none;
}
.glossary summary::-webkit-details-marker{display:none}
.glossary summary::after{content:" ▸";transition:none}
.glossary[open] summary::after{content:" ▾"}
.gl{margin-top:22px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 34px}
.gl dt{
  font-family:var(--sans);font-weight:600;font-size:15px;
  color:var(--text);margin-bottom:5px;letter-spacing:-.2px;
}
.gl dd{font-size:13.5px;color:var(--muted);line-height:1.6}

/* ---------- Sociedad ---------- */
.company{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:44px;align-items:start}
.company-copy p{color:var(--muted);font-size:15.5px;margin-bottom:16px}
.company-copy p b{color:var(--text)}
.legal-card{
  border:1px solid var(--line2);border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  overflow:hidden;
}
.legal-card .lc-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}
.legal-card .lc-head .ok{color:var(--cyan)}
.legal-card dl{padding:8px 20px 14px}
.legal-card .row{
  display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.legal-card .row:last-child{border-bottom:none}
.legal-card dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);flex-shrink:0;padding-top:2px;
}
.legal-card dd{font-size:14px;text-align:right;color:var(--text)}
.legal-card dd.mono{font-family:var(--mono);font-size:13px;letter-spacing:.04em}
/* El correo sale de la fuente monoespaciada: ahí el arroba se pega a la letra siguiente */
.legal-card dd.mono a{font-family:var(--ui);letter-spacing:.01em}
.legal-links{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{padding:44px 0 36px}
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:28px;flex-wrap:wrap;margin-bottom:28px;
}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand .mark{width:26px;height:26px}
.foot-brand .wordmark{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.5px}
.foot-brand .wordmark i{font-style:normal;color:var(--cyan)}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-nav a{font-size:13px;color:var(--muted)}
.foot-nav a:hover{color:var(--text);text-decoration:none}
.foot-legal{
  border-top:1px solid var(--line);padding-top:22px;
  font-size:12.5px;color:var(--faint);
}
.foot-legal p{margin-bottom:8px}
.foot-legal .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted)}

/* ---------- Páginas legales ---------- */
.doc{padding:64px 0 84px;max-width:820px;margin:0 auto}
.doc-header{margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.doc-header .sec-kicker{margin-bottom:10px}
.doc-header .meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--faint);text-transform:uppercase;margin-top:10px;
}
.doc h2{font-size:clamp(24px,3.4vw,34px)}
.doc h3{
  font-family:var(--sans);font-weight:600;font-size:19px;
  letter-spacing:-.3px;margin:34px 0 12px;
}
.doc p, .doc li{font-size:15px;color:var(--muted);margin-bottom:12px}
.doc ul{padding-left:22px;margin-bottom:14px}
.doc li{margin-bottom:6px}
.doc b, .doc strong{color:var(--text)}
/* Bloques por idioma de los documentos legales.
   Sin JavaScript se ven los tres: el texto completo queda accesible para
   cualquier revisor o robot, que es justamente el propósito de estas páginas. */
.lang-block[hidden]{display:none}
.js .lang-block + .lang-block{margin-top:0}
.lang-block + .lang-block::before{
  content:attr(lang);
  display:block;margin:56px 0 34px;padding-top:26px;
  border-top:1px solid var(--line2);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);
}
.js .lang-block + .lang-block::before{content:none;margin:0;padding:0;border:none}

.lang-divider{
  margin:56px 0 40px;display:flex;align-items:center;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);
}
.lang-divider::before,.lang-divider::after{
  content:"";flex:1;height:1px;background:var(--line2);
}
.doc .idbox{
  border:1px solid var(--line2);border-radius:12px;background:var(--panel2);
  padding:18px 22px;margin:16px 0 22px;
  font-family:var(--mono);font-size:13px;line-height:2;color:var(--text);
}
/* min-width fijado sobre la etiqueta más larga ("N.º de registro fiscal (EIN):") para que
   la columna de valores quede alineada en ambos idiomas. */
.doc .idbox span{color:var(--faint);display:inline-block;min-width:248px;padding-right:8px}
.backlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--muted);margin-bottom:28px;
}
.backlink:hover{color:var(--text);text-decoration:none}

/* ---------- Reveal animation ---------- */
/* Sólo se ocultan si el JS que los vuelve a mostrar está corriendo (clase .js en <html>).
   Sin JavaScript, o si el observador nunca llega a ejecutarse, el contenido se ve igual. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .js .reveal.on{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grid-assets{grid-template-columns:repeat(2,1fr)}
  .board-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .faq{grid-template-columns:1fr}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .hero-figure svg{width:260px;height:260px}
  .company{grid-template-columns:1fr}
}
/* 960px: la nav horizontal más los controles de idioma y tema dejan de entrar
   bastante antes de lo que parece, y en portugués las etiquetas son más largas.
   Las reglas del panel van prefijadas con .js: sin JavaScript no hay nada que
   abra el menú, así que la nav se muestra apilada en vez de quedar inalcanzable. */
@media (max-width:960px){
  .js .nav{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:10px 24px 18px;
  }
  .js .nav.open{display:flex}
  .nav{
    flex-wrap:wrap;gap:14px 18px;margin-left:16px;
  }
  .nav a{padding:12px 0;font-size:15px}
  /* Sin JS la nav se despliega dentro del header, que deja de tener altura fija
     para no recortarla. */
  html:not(.js) .site-header .wrap{
    height:auto;min-height:64px;flex-wrap:wrap;padding-top:10px;padding-bottom:12px;
  }
  html:not(.js) .header-right{flex-wrap:wrap;gap:12px}
  .js .nav a{border-bottom:1px solid var(--line)}
  .js .nav a.cta{margin-top:14px;text-align:center;border-bottom:none}
  .js .nav-toggle{display:block}
  .header-right{gap:10px}
  .langsel button{padding:7px 7px}
  .grid-assets,.board-grid,.steps,.faq,.gl{grid-template-columns:1fr}
  section.block{padding:60px 0}
  .hero{padding:60px 0 52px}
  .legal-card .row{flex-direction:column;gap:2px}
  .legal-card dd{text-align:left}
  .doc .idbox span{display:block;min-width:0}
}

/* Sombra de apoyo del emblema: en fondo claro una sombra negra al 32% se lee
   como una mancha, así que se aligera. */
.drop{opacity:.32}
:root[data-theme="light"] .drop{opacity:.05}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .drop{opacity:.05}
}

/* ---------- Sello de marca del pie ----------
   El emblema con la leyenda de derechos reservados: cierra la página con la
   marca en vez de con un dato fiscal. */
.seal{
  display:inline-flex;align-items:center;gap:11px;
  margin:18px 0 14px;padding:10px 16px 10px 12px;
  border:1px solid var(--line2);border-radius:999px;
  background:color-mix(in srgb,var(--panel) 60%,transparent);
}
.seal-mark{width:26px;height:26px;flex-shrink:0;opacity:.95}
.seal-txt{display:flex;flex-direction:column;line-height:1.25}
.seal-txt b{
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:-.2px;color:var(--text);
}
.seal-txt i{
  font-style:normal;font-family:var(--mono);
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
@media (max-width:520px){
  .seal{margin:16px 0 12px}
  .seal-txt i{letter-spacing:.1em}
}

/* ---------- Proyectos en ejecución (clientes) ---------- */
.pj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pj{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:18px;padding:28px;
  display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease;
}
.pj:hover{border-color:var(--line-control);transform:translateY(-2px)}
.pj-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.pj-badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);border:1px solid var(--line2);border-radius:999px;padding:5px 11px;
}
.pj-state{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
.pj-state i{
  width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);flex-shrink:0;
}
.pj h3{
  font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:-.8px;
  margin-bottom:8px;
}
.pj-claim{font-size:15px;color:var(--text);font-weight:500;margin-bottom:12px}
.pj p{font-size:14.5px;color:var(--muted);line-height:1.65}
.pj-data{
  margin:20px 0 18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;
}
.pj-data div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.pj-data dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);flex-shrink:0;
}
.pj-data dd{font-size:13.5px;color:var(--text);text-align:right;font-weight:500}
.pj-link{
  margin-top:auto;align-self:flex-start;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--cyan);border-bottom:1px solid transparent;padding-bottom:2px;
}
.pj-link:hover{border-bottom-color:var(--cyan);text-decoration:none}
.pj-note{
  margin-top:24px;padding:20px 24px;
  border:1px solid var(--line2);border-radius:14px;
  background:color-mix(in srgb,var(--indigo) 6%,transparent);
  font-size:14.5px;color:var(--muted);line-height:1.65;
}
.pj-note b{color:var(--text);font-weight:600}
@media (max-width:820px){
  .pj-grid{grid-template-columns:1fr}
  .pj{padding:24px}
  .pj h3{font-size:26px}
}

/* Ilustración del activo dentro de cada tarjeta de proyecto */
.pj-figura{
  margin:-4px 0 18px;border:1px solid var(--line);border-radius:14px;
  background:
    repeating-linear-gradient(0deg,transparent 0 21px,var(--grid) 21px 22px),
    repeating-linear-gradient(90deg,transparent 0 21px,var(--grid) 21px 22px),
    var(--panel2);
  overflow:hidden;
}
.pj-figura svg{display:block;width:100%;height:auto}

/* ---------- Recorrido del activo (activo → token) ---------- */
.flujo{
  list-style:none;margin:0 0 34px;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
}
.flujo-paso{
  position:relative;padding:26px 22px 24px;
  border-right:1px solid var(--line);
}
.flujo-paso:last-child{border-right:none}
/* Conector: marca la dirección de izquierda a derecha */
.flujo-paso:not(:last-child)::after{
  content:"";position:absolute;top:64px;right:-7px;z-index:2;
  width:12px;height:12px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 4px var(--panel),0 0 12px var(--cyan);
}
.flujo-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--faint);display:block;margin-bottom:12px;
}
.flujo-ico{
  width:74px;height:74px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);border-radius:14px;background:var(--panel2);
}
.flujo-ico svg{width:52px;height:52px;display:block}
.flujo-paso h4{
  font-family:var(--sans);font-size:16px;font-weight:600;
  letter-spacing:-.2px;margin-bottom:7px;color:var(--text);
}
.flujo-paso p{font-size:13.5px;color:var(--muted);line-height:1.6}
@media (max-width:900px){
  .flujo{grid-template-columns:repeat(2,1fr)}
  .flujo-paso:nth-child(2){border-right:none}
  .flujo-paso:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .flujo-paso:nth-child(2)::after{display:none}
}
@media (max-width:560px){
  .flujo{grid-template-columns:1fr}
  .flujo-paso{border-right:none;border-bottom:1px solid var(--line)}
  .flujo-paso:last-child{border-bottom:none}
  .flujo-paso::after{display:none !important}
}

/* Alegorías de activo: más grandes que un ícono, para que la tarjeta respire imagen */
.icon-lg{
  width:60px;height:60px;border-radius:14px;
  border:1px solid var(--line2);background:var(--panel2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;transition:border-color .2s ease,transform .2s ease;
}
.icon-lg svg{width:40px;height:40px;display:block}
.card:hover .icon-lg{border-color:var(--cyan);transform:translateY(-2px)}

/* Marca visual de cada etapa; la serie se lee como una línea de tiempo */
.steps{position:relative}
.step-ico{
  width:46px;height:46px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);border-radius:12px;background:var(--panel);
}
.step-ico svg{width:28px;height:28px;display:block}
.step{display:flex;flex-direction:column}
.step::before{position:absolute;top:24px;right:22px;margin:0}

/* ---------- Pila Web3 ---------- */
.pila{
  margin:0 0 26px;padding:22px 24px 16px;
  border:1px solid var(--line);border-radius:18px;
  background:
    repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px),
    linear-gradient(180deg,var(--panel),var(--panel2));
}
.pila svg{display:block;width:100%;height:auto}
.pila figcaption{
  position:relative;height:26px;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
/* Cada etiqueta se ancla al centro de su pieza del diagrama (x/880 del viewBox),
   no a una grilla regular: si no, quedan corridas respecto del dibujo. */
.pila figcaption span{
  position:absolute;top:14px;transform:translateX(-50%);white-space:nowrap;
}
.pila figcaption span:nth-child(1){left:8%}
.pila figcaption span:nth-child(2){left:30.7%}
.pila figcaption span:nth-child(3){left:54.5%}
.pila figcaption span:nth-child(4){left:80.7%}
@media (max-width:640px){
  .pila{padding:16px 14px 12px}
  .pila figcaption{
    position:static;height:auto;display:grid;grid-template-columns:repeat(2,1fr);
    gap:10px;font-size:9px;text-align:center;
  }
  .pila figcaption span{position:static;transform:none}
}

/* Marca del cliente en su tarjeta. Fondo marino fijo en los dos temas: los
   logotipos vienen en blanco y en verde lima, y necesitan un fondo estable. */
.pj-marca{
  display:flex;align-items:center;justify-content:center;gap:20px;
  height:76px;margin:0 0 14px;padding:0 20px;
  border:1px solid var(--line2);border-radius:12px;
  background:var(--marca-bg);
}
.pj-marca img{height:44px;width:auto;display:block;object-fit:contain}
.pj-marca-doble img{height:40px}
.pj-marca-doble .wm{height:26px}
@media (max-width:520px){
  .pj-marca{height:66px;gap:14px}
  .pj-marca img{height:34px}
  .pj-marca-doble .wm{height:22px}
}

/* Foto del activo: mismo marco que la ilustración, para que las dos tarjetas
   se lean parejas aunque una lleve foto y la otra dibujo. */
.pj-foto{padding:0;background:var(--marca-bg)}
.pj-foto img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
/* Estado "en vivo": el punto late para distinguirlo de un proyecto por salir */
.pj-live i{animation:latir 2.4s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){.pj-live i{animation:none}}

/* Salto al contenido: invisible hasta que se llega con el teclado */
.skip{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip:focus{
  position:fixed;left:24px;top:12px;z-index:100;width:auto;height:auto;
  background:var(--accent-solid);color:var(--accent-on);
  padding:11px 18px;border-radius:8px;font-weight:600;font-size:14px;
}

/* ---------- Correcciones de la auditoría de UX ---------- */

/* Renglones de hasta 156 caracteres en los bloques que más importa leer */
.pj-note{max-width:78ch}
.board-note p{max-width:78ch}

/* Tipografía por debajo de 11px en datos que sí se leen */
.card .tag,.pj-badge,.pj-data dt,.legal-card dt{font-size:11px}

/* El arroba se pegaba a la letra siguiente y se leía "infoatrixio.io" */
.legal-card dd.mono{letter-spacing:.06em}

@media (max-width:960px){
  /* Objetivos táctiles: los tres controles del encabezado estaban por debajo de 44px */
  .langsel button{padding:12px 14px;min-height:44px}
  .themebtn{width:44px;height:44px}
  .js .nav-toggle{width:44px;height:44px}
  .qa summary{padding:10px 0;min-height:44px}
  .pj-link,.foot-nav a{display:inline-block;padding:13px 0}
}
/* El botón va primero en el DOM (para que el teclado entre al menú al abrirlo),
   pero visualmente sigue a la derecha. */
.nav-toggle{order:2}

/* Dibujo a línea del cliente: viene con el papel transparente y el trazo negro,
   así que en tema oscuro se invierte para que el trazo quede claro. */
.pj-linea{background:var(--panel2);padding:0}
.pj-linea img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
:root[data-theme="dark"] .pj-linea img{filter:invert(1) brightness(1.05)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pj-linea img{filter:invert(1) brightness(1.05)}
}

/* ============================================================
   RELIEVE DE LOS CONTENEDORES
   Cada bloque se despega del fondo con una sombra propia del tema.
   En oscuro la sombra sola casi no se percibe, así que se acompaña
   con una luz tenue en el borde superior (--luz), que es lo que da
   la sensación de volumen sobre el marino.
   ============================================================ */
.card,
.step,
.qa,
.legal-card,
.pj,
.flujo,
.pila,
.board-note,
.pj-note,
.glosario{
  box-shadow:var(--sombra), var(--luz);
}

/* Al pasar el puntero, los bloques que invitan a interactuar suben un poco más */
.card,.pj,.qa{transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.card:hover,
.pj:hover,
.qa:hover{
  box-shadow:var(--sombra-alta), var(--luz);
  transform:translateY(-3px);
}
.qa[open]{box-shadow:var(--sombra-alta), var(--luz)}

/* El documento legal también se despega del fondo */
.doc .idbox{box-shadow:var(--sombra), var(--luz)}

/* La banda de marca del cliente lleva su propio fondo oscuro: una sombra
   proyectada la ensuciaría, así que sólo recibe profundidad hacia adentro. */
.pj-marca{box-shadow:inset 0 2px 10px rgba(0,0,0,.35)}

@media (prefers-reduced-motion:reduce){
  .card,.pj,.qa{transition:none}
  .card:hover,.pj:hover,.qa:hover{transform:none}
}