/* ==========================================================================
   Axiota Technical Discoveries — hoja única
   Los colores y tipografías salen de los brand kits oficiales de Multimin y
   Lactipro (2026), no del design system que generó Claude Design: ese avisa de
   que sus hexes están «inferred from public materials» y, en efecto, fallaban.
   Cada token lleva el rol que le asigna su kit.
   ========================================================================== */


:root {
  /* Azules estructurales — Multimin Brand Kit, con su rol textual:
       #20419A axiota-navy  «primary · H1, banners, headers»
       #1B2A6B shield-navy  «depth · H2, MULTIMIN shield, "MULTI" lockup»
       #488DBD steel-blue   «secondary · H3, section labels, soft links»
       #1878B8 cta-blue     «action · buttons, active links, CTAs»
     Las bandas de chrome (barra de utilidad, hero de portada, pie) van en navy
     porque el kit se lo asigna a «banners, headers»; el diseño las traía en
     steel-blue, que además solo daba 3,6:1 con texto blanco. El steel-blue no
     aparece: sus dos slots aquí (rótulo «Technical Discoveries» y enlaces
     suaves) son texto de 12-14 px, donde 3,6:1 no llega al AA. */
  --ax-navy:       #20419A;   /* bandas de chrome y CTA del ROI Calculator */
  --ax-shield:     #1B2A6B;   /* superficies y texto de Multimin + hover del CTA */
  --ax-cta:        #1878B8;   /* acción: chip del calculador y filetes de acento */

  /* Lactipro — Lactipro Brand Kit. Degrada los verdes oliva («greens are
     demoted to a documented supporting role only») y deja el teal como
     identidad: #1F8A8A acento primario, #176B6B su versión pressed y #3FB089 el
     «bright pop accent on dark surfaces». Las superficies usan #176B6B porque
     el jade con texto blanco da 2,7:1; y el #1F8A8A no aparece porque como
     texto sobre blanco da 4,1:1 y aquí todo acento es texto pequeño o filete. */
  --lp-surface:    #176B6B;   /* bandas y cabecera de tarjeta Lactipro */
  --lp-pop:        #3FB089;   /* filete lateral y pop sobre superficie oscura */

  /* Neutros — Axiota Brand Kit (--fg1/2/3, --cream, --line, --line2), los seis
     valores exactos. Se prefieren a la rampa de texto del kit de Multimin
     (#3D3D3E/#5E6366/#8C8C8C) porque su nivel terciario da 3,0:1 sobre blanco y
     aquí los metadatos son de 11 px.
     OJO con el resto de ese kit: declara que su paleta está «matched to the live
     site by eye», así que sus azules (--navy #0F2545, --sky #5BA9D6) y sus
     fuentes (Poppins + Source Serif 4) NO se usan: manda el kit de Multimin,
     que asigna rol a cada azul y coincide con el ROI Calculator. */
  --fg-1: #0F1A2E;
  --fg-2: #2C3A52;
  --fg-3: #5A6478;
  --bg-page: #FFFFFF;
  --bg-soft: #F6F1E7;
  --border-1: #E3DCCC;
  --border-2: #D9D2C0;

  /* Tipografía de los kits: display Avenir LT Std (comercial, solo si está
     instalada) con Jost como sustituto libre; texto en Calibri con Carlito
     auto-alojada, su clon libre métricamente compatible. Ver assets/fonts.css. */
  --font-display: 'Avenir LT Std', 'Jost', 'Century Gothic', system-ui, sans-serif;
  --font-body: 'Calibri', 'Carlito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Elevación y movimiento (DS) */
  --shadow-lifted: 0 8px 24px rgba(15, 37, 69, 0.12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base: 240ms;

  --content-max: 1200px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ax-navy);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Todas las superficies navy necesitan el foco en blanco, no solo las bandas:
   la barra de utilidad y el pie también van en --ax-navy, y ahí un outline navy
   daba 1:1 (invisible) en 6 de los 14 enlaces de cada página. */
.band :focus-visible,
.utility :focus-visible,
.site-footer :focus-visible { outline-color: #FFFFFF; }

img { max-width: 100%; }
.mega-e { font-style: italic; }

/* Encabezados que solo existen para dar estructura al documento: la navegación
   por encabezados es el atajo principal de un lector de pantalla y sin ellos no
   llevaba a ninguna parte. No se ven, no cambian el diseño. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: oculto hasta que recibe el foco con el tabulador. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 0 0 12px 12px;
  background: var(--ax-navy);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { top: 0; outline-color: #FFFFFF; }
/* «Always carry the ® superscript at first and most prominent use»
   (Multimin Brand Kit). Valores del lockup del propio kit. */
.r { font-size: 0.42em; vertical-align: super; font-weight: 400; line-height: 1; }

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

/* ---------------- Barra de utilidad ---------------- */

.utility {
  background: var(--ax-navy);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.utility > .wrap {
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  row-gap: 6px;
}
.utility a { white-space: nowrap; }
.utility a:hover { text-decoration: underline; }
.utility-links { display: flex; gap: 22px; flex-wrap: wrap; row-gap: 6px; }

/* ---------------- Cabecera ---------------- */

.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-2);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header > .wrap {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  row-gap: 12px;
}
.brand { display: flex; align-items: center; gap: 16px; }
/* El lockup oficial incluye el descriptor «Animal Health» en dos líneas: a los
   34px del diseño (pensados para un wordmark de una línea) el descriptor queda
   ilegible, así que sube a 48px. */
.brand img { height: 48px; width: auto; display: block; }
.brand-sub {
  padding-left: 16px;
  border-left: 1px solid var(--border-2);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 26px; font-size: 14px; flex-wrap: wrap; row-gap: 10px; }
.nav-link {
  white-space: nowrap;
  color: var(--fg-2);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.nav-link.lactipro:hover,
.nav-link.lactipro[aria-current='page'] { color: var(--lp-surface); border-bottom-color: var(--lp-pop); }
.nav-link.multimin:hover,
.nav-link.multimin[aria-current='page'] { color: var(--ax-shield); border-bottom-color: var(--ax-cta); }

.btn-roi {
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--ax-navy);
  color: #FFFFFF;
  font-weight: 500;
  transition: background var(--dur-base) var(--ease-out);
}
.btn-roi:hover { background: var(--ax-shield); }

/* ---------------- Bandas de cabecera de sección ---------------- */

.band { color: #FFFFFF; }
.band.home     { background: var(--ax-navy); }
.band.lactipro { background: var(--lp-surface); }
.band.multimin { background: var(--ax-shield); }

.band > .wrap { padding-top: 56px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 16px; }
.band.compact > .wrap { padding-top: 40px; padding-bottom: 34px; gap: 12px; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.band h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 820px;
  text-wrap: pretty;
}
.band.compact h1 { font-size: clamp(30px, 3.6vw, 46px); }

.back-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.back-link:hover { text-decoration: underline; }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-num { font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1; }
.stat-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

.band-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  row-gap: 10px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.band-meta a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.band-meta a:hover { text-decoration: underline; }

/* ---------------- Tarjetas de plataforma (home) ---------------- */

.platforms {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px var(--gutter) 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.platform-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.platform-card:hover { box-shadow: var(--shadow-lifted); }

.platform-head { padding: 22px 26px 20px; display: flex; flex-direction: column; gap: 6px; color: #FFFFFF; }
.platform-card.lactipro .platform-head { background: var(--lp-surface); }
.platform-card.multimin .platform-head { background: var(--ax-shield); }
.platform-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.platform-name { font-family: var(--font-display); font-size: 30px; font-weight: 600; }

.platform-body { padding: 20px 26px 22px; flex: 1; font-size: 15px; line-height: 1.55; color: var(--fg-2); }

.platform-foot {
  padding: 12px 26px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.platform-foot .go { font-weight: 600; }
.platform-card.lactipro .platform-foot .go { color: var(--lp-surface); }
.platform-card.multimin .platform-foot .go { color: var(--ax-shield); }

/* ---------------- Banda del ROI Calculator ---------------- */

.roi-band { border-top: 1px solid var(--border-1); background: var(--bg-soft); }
.roi-band > .wrap { padding-top: 44px; padding-bottom: 72px; }
.roi-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  background: var(--ax-navy);
  border-left: 6px solid #FFFFFF;
  border-radius: 12px;
  padding: 32px 36px;
  color: #FFFFFF;
  transition: background var(--dur-base) var(--ease-out);
}
.roi-cta:hover { background: var(--ax-shield); }
.roi-copy { display: flex; flex-direction: column; gap: 8px; }
.roi-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.roi-text { font-size: 15px; line-height: 1.6; max-width: 560px; }
.roi-btn {
  padding: 13px 24px;
  border-radius: 12px;
  background: var(--ax-cta);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

/* ---------------- Fichas de publicación ---------------- */

.library {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 36px var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.doc {
  display: grid;
  grid-template-columns: 300px 1fr;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.doc:hover { box-shadow: var(--shadow-lifted); }
.doc.lactipro { border-left: 6px solid var(--lp-pop); }
.doc.multimin { border-left: 6px solid var(--ax-cta); }

.doc-cover {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  background: #FFFFFF;
  border-right: 1px solid var(--border-1);
}
.doc-cover img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
}

.doc-main { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.doc-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.doc.lactipro .doc-kicker, .doc.lactipro .doc-open { color: var(--lp-surface); }
.doc.multimin .doc-kicker { color: var(--ax-shield); }
.doc.multimin .doc-open { color: var(--ax-shield); }
.doc-title {
  margin: 0;                 /* es un <h3>: el margen por defecto rompería el gap del flex */
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-1);
  text-wrap: pretty;
}
.doc-summary { font-size: 15px; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.doc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  row-gap: 8px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-1);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.doc-open { font-weight: 600; }

/* ---------------- Página de publicación ---------------- */

.article {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px var(--gutter) 72px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
}
.article h2 {
  margin: 40px 0 12px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg-1);
  text-wrap: pretty;
}
.article h2:first-child { margin-top: 0; }
.article p { margin: 0 0 14px; text-wrap: pretty; }
.article ul { margin: 0 0 14px; padding-left: 22px; }
.article li { margin-bottom: 6px; }

/* Autoría y procedencia: es la señal de que esto es ciencia y no un folleto,
   así que va en cuerpo legible, no en la letra pequeña gris del pie de ficha. */
.article-byline {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-1);
}
.article-authors { margin: 0 0 8px; font-size: 16px; color: var(--fg-1); font-weight: 600; }
.article-affil { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--fg-3); }
.article-source { margin: 10px 0 0; font-size: 14px; color: var(--fg-3); }

/* Tabla de resultados: cifras a la derecha para poder compararlas de un vistazo. */
.rtable-scroll { overflow-x: auto; margin: 0 0 18px; }
.rtable {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 15px;
}
.rtable caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.rtable th, .rtable td { padding: 9px 12px; border-bottom: 1px solid var(--border-1); }
.rtable thead th {
  border-bottom: 2px solid var(--border-2);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: right;
}
.rtable thead th:first-child, .rtable tbody th { text-align: left; }
.rtable tbody th { font-weight: 600; color: var(--fg-1); }
.rtable td { text-align: right; font-variant-numeric: tabular-nums; }
.rtable .ns { color: var(--fg-3); }

/* Nota al pie del artículo: qué es esto y qué no es. */
.article-note {
  margin-top: 36px;
  padding: 18px 20px;
  background: var(--bg-soft);
  border-left: 4px solid var(--border-2);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
}
.article-note p { margin: 0 0 8px; }
.article-note p:last-child { margin: 0; }

.article-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.btn-pdf {
  padding: 12px 22px;
  border-radius: 12px;
  background: var(--ax-navy);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  transition: background var(--dur-base) var(--ease-out);
}
.btn-pdf:hover { background: var(--ax-shield); }
.article.lactipro .btn-pdf { background: var(--lp-surface); }
.article.lactipro .btn-pdf:hover { background: var(--ax-shield); }

/* ---------------- Pie ---------------- */

.site-footer {
  margin-top: auto;
  background: var(--ax-navy);
  color: #FFFFFF;
  padding: 40px 0 32px;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  row-gap: 18px;
}
.footer-mark { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 26px; row-gap: 12px; font-size: 13px; letter-spacing: 0.06em; }
.footer-links a { white-space: nowrap; }
.footer-links a:hover { text-decoration: underline; }
.footer-legal {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px;
  line-height: 1.6;
}
.footer-legal p { margin: 0; max-width: 820px; }
.footer-legal p + p { margin-top: 8px; }

/* ---------------- Responsive ---------------- */

@media (max-width: 860px) {
  .doc { grid-template-columns: 1fr; }
  .doc-cover { min-height: 240px; border-right: none; border-bottom: 1px solid var(--border-1); }
  .roi-cta { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .roi-btn { justify-self: start; }
  .stats { gap: 32px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .brand-sub { display: none; }
  .brand img { height: 40px; }
  .nav { gap: 18px; width: 100%; }
  .band > .wrap { padding-top: 40px; padding-bottom: 36px; }
  .platforms { padding-top: 32px; }
}

/* Con zoom al 400% (la condición de WCAG 1.4.10: 320x256 CSS px) la cabecera
   fija ocupaba 162 de los 256 px de alto, dejando 94 útiles. Cuando el viewport
   es muy bajo deja de ser sticky. */
@media (max-height: 420px) {
  .site-header { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  .utility, .site-header, .roi-band, .site-footer { display: none; }
  .doc { break-inside: avoid; }
}