/* ============================================================
   Hecorix — sistema de diseño web
   Fuente de verdad: Marca\_VIGENTE\ (Normas Núcleo v1.2)

   ESTADO DE CONFORMIDAD — ver el informe de auditoría en _auditoria/
   - Tipografía: CONFORME a Decisiones §20 (Space Grotesk + Inter, autoalojadas).
   - Color: CONFORME a Paleta v1.2, en tema oscuro. El modo oscuro se aprueba
     con esta web como pantalla de validación (Normas §13.1, 08/08/2026).
   - Logo: CONFORME. SVG del juego compacto UI v1.2 sobre zona clara (§13.3).
   - Pendiente: naming de producto, a la espera de la verificación de
     anterioridades (Naming §8).

   REGLA: ningún hex fuera del bloque de paleta de abajo. Los valores de
   transparencia se construyen con color-mix() sobre esos mismos tokens.
   ============================================================ */

/* ---------- Tipografía autoalojada (Decisiones §20.1) ----------
   Subconjunto latino de los ficheros variables de 03_Tipografia\,
   licencia SIL OFL 1.1. Sustituye a la carga desde Google Fonts. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/spacegrotesk-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Paleta Hecorix v1.2 ----------------------------------------
   Espejo de Marca\_VIGENTE\02_Color\hecorix-tokens.css. Si cambia alli,
   cambia aqui. No se escribe ningun hex fuera de este bloque. */
:root {
  /* Marca */
  --hx-azul:          #0E2968;
  --hx-blanco:        #FFFFFF;

  /* Acentos aprobados (Paleta §2) */
  --hx-turquesa:      #19B6A5;
  --hx-turquesa-osc:  #087F73;
  --hx-ambar:         #F2A93B;
  --hx-ambar-osc:     #A85D00;
  --hx-coral:         #E85D5D;   /* SOLO semantico: error, riesgo */
  --hx-coral-osc:     #C84545;

  /* Azules del isotipo (Paleta §3, uso restringido) */
  --hx-iso-1:         #1254D3;
  --hx-iso-3:         #1A6BF2;
  --hx-iso-5:         #2F98FD;
  --hx-iso-7:         #40B8FF;
  --hx-iso-8:         #42BEFF;

  /* Neutros (Paleta §4) */
  --hx-n50:           #F6F8FB;
  --hx-n100:          #EDF1F7;
  --hx-n400:          #9AA6B8;
  --hx-n600:          #4C5769;

  /* ---------- Roles semanticos - TEMA OSCURO ----------------------------
     Valores del bloque [data-theme="dark"] de hecorix-tokens.css, validados
     sobre esta web como la pantalla real que pedia Normas §13.1. */
  --hx-bg:            #0A1224;
  --hx-surface:       #121C33;
  --hx-surface-alt:   #1A2743;
  --hx-border:        #24324F;
  --hx-border-strong: #354566;

  --hx-text:          #E8EDF6;   /* 15,89:1 sobre bg */
  --hx-text-muted:    var(--hx-n400);
  --hx-primary:       var(--hx-iso-5);
  --hx-primary-hover: var(--hx-iso-7);
  --hx-on-primary:    var(--hx-azul);      /* 4,58:1 sobre primary */
  --hx-success:       var(--hx-turquesa);
  --hx-warning:       var(--hx-ambar);
  --hx-on-warning:    var(--hx-azul);      /* 6,85:1 */
  --hx-danger:        var(--hx-coral);
  --hx-focus:         var(--hx-iso-5);

  /* Zona clara para el logo a color sobre fondo oscuro (Normas §13.3).
     Blanco puro: es el fondo canónico del acabado Color según Normas §5.2
     («fondo blanco o claro neutro») y da al wordmark azul corporativo sus
     13,67:1, el máximo que alcanza la marca. El azulado --hx-n100 del banner
     restaba legibilidad al wordmark a tamaño de interfaz. */
  --hx-zona-clara:    var(--hx-blanco);

  /* ---------- Alias de la web -------------------------------------------
     Capa de compatibilidad: mantiene los nombres que ya usa este CSS
     apuntando a roles de marca. Se iran retirando. */
  --noche:      var(--hx-bg);
  --noche-2:    var(--hx-surface);
  --azul:       var(--hx-primary);
  --cian:       var(--hx-iso-8);
  --hielo:      var(--hx-text);
  --muted:      var(--hx-text-muted);
  --pizarra:    var(--hx-n600);    /* SOLO sobre fondo claro */
  --verde:      var(--hx-success); /* la marca no tiene verde: el positivo es turquesa */
  --ambar:      var(--hx-warning);
  --rojo:       var(--hx-danger);

  --line:        color-mix(in srgb, var(--hx-border-strong) 60%, transparent);
  --line-strong: color-mix(in srgb, var(--hx-border-strong) 95%, transparent);

  --accent: var(--hx-primary);
  --accent-soft: color-mix(in srgb, var(--hx-primary) 12%, transparent);

  /* Decisiones §20.1: titulares Space Grotesk, cuerpo Inter */
  --font-titular: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-texto:   "Inter", "Segoe UI", system-ui, sans-serif;
  --font: var(--font-texto);   /* alias heredado: botones, campos y body */
  --radius: 12px;
  --radius-sm: 8px;
  --container: 1120px;
  --speed: 180ms;
}

/* Acentos por producto (data-accent en <body>). Todos de la paleta aprobada y
   todos verificados >= 4,5:1 sobre --hx-surface. Los nombres de valor se
   mantienen hasta cerrar la arquitectura madre-producto (Naming §9). */
body[data-accent="cian"]   { --accent: var(--hx-iso-8);    --accent-soft: color-mix(in srgb, var(--hx-iso-8) 10%, transparent); }
body[data-accent="azul"]   { --accent: var(--hx-iso-5);    --accent-soft: color-mix(in srgb, var(--hx-iso-5) 12%, transparent); }
body[data-accent="verde"]  { --accent: var(--hx-turquesa); --accent-soft: color-mix(in srgb, var(--hx-turquesa) 10%, transparent); }
body[data-accent="ambar"]  { --accent: var(--hx-ambar);    --accent-soft: color-mix(in srgb, var(--hx-ambar) 10%, transparent); }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 104px; }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hielo);
  background: var(--noche);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--hx-iso-8) 35%, transparent); color: var(--hielo); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cian); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--hx-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Tipografía ---------- */

/* Jerarquía de Decisiones §20.2: H1 Bold · H2 Semibold · H3 Medium */
h1, h2, h3, .display, .h2, .h3 {
  font-family: var(--font-titular);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1, .display { font-weight: 700; }
h2, .h2 { font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3, .h3 { font-weight: 500; font-size: 1.4rem; }

.display { font-size: clamp(2.2rem, 5.2vw, 3.5rem); }

.lead { font-size: 1.125rem; color: var(--muted); max-width: 62ch; }
.small { font-size: 0.85rem; }
.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cian);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--cian);
  opacity: 0.7;
}

/* Eyebrow con el acento de la página de producto */
body[data-accent] .eyebrow { color: var(--accent); }
body[data-accent] .eyebrow::before { background: var(--accent); }

/* ---------- Layout ---------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: clamp(4rem, 9vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }

.section__head { max-width: 640px; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section__head p { color: var(--muted); margin-top: 0.85rem; }

.divider { border: 0; border-top: 1px solid var(--line); }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--hx-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav__in {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 88px;
}

/* ---------- Zona clara del logo (Normas §13.3) ----------------------------
   La norma no admite el logo completo en color sobre fondo oscuro: no existe
   fondo oscuro que dé contraste suficiente a la vez al wordmark azul
   (#0E2968, exige luminancia de fondo >= 0,18) y al lóbulo claro
   (#42BEFF, exige <= 0,12). El rango es vacío. La salida aprobada es una zona
   realmente clara dentro de la composición, como en el banner oscuro del kit
   v2.0. Aquí toma forma de pastilla; en el banner, de arco.
   El logo es el SVG del juego compacto UI v1.2, en una sola pieza. */

.nav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 10px 20px;
  background: var(--hx-zona-clara);
  border-radius: 999px;
  transition: box-shadow var(--speed) ease;
}
.nav__brand:hover {
  text-decoration: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-zona-clara) 28%, transparent);
}
/* 168px de ancho, un 17 % por encima de los 143px iniciales: a ese tamaño la
   H del wordmark pasa de 19,5 a 23 px y el texto se lee sin esfuerzo. El
   mínimo de Normas §6 son 140px, pero el mínimo es un suelo, no un objetivo.
   La variante de móvil la resuelve <picture> en el HTML, no el CSS: si la
   hoja de estilos llega cacheada, dos <img> alternados por CSS se verían
   los dos a la vez. */
.nav__logo { width: 168px; height: 47px; }

.nav__links {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.nav__links a {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color var(--speed) ease;
}
.nav__links a:hover { color: var(--hielo); text-decoration: none; }
.nav__links a[aria-current="page"] { color: var(--hielo); }

.nav .btn { flex-shrink: 0; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--speed) ease, border-color var(--speed) ease,
              color var(--speed) ease, transform var(--speed) ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--hx-primary); color: var(--hx-on-primary); }
.btn--primary:hover { background: var(--hx-primary-hover); }

.btn--ghost {
  background: transparent;
  color: var(--hielo);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--cian); color: var(--cian); }

.btn--ambar { background: var(--hx-warning); color: var(--hx-on-warning); }
.btn--ambar:hover { filter: brightness(1.08); }

.btn--sm { padding: 0.55rem 1.05rem; font-size: 0.9rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  /* La rejilla vive ahora en .hero::after — ver sistema de movimiento */
}
.hero::before {
  /* Halo radial azul */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 90% at 70% 10%, color-mix(in srgb, var(--hx-iso-3) 22%, transparent), transparent 65%);
  pointer-events: none;
}
.hero__in {
  position: relative;
  padding-block: clamp(4.5rem, 11vw, 8rem) clamp(4rem, 9vw, 6.5rem);
  max-width: 760px;
}
.hero__in .lead { margin-top: 1.25rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

/* Variante producto: halo con el acento */
body[data-accent="cian"]  .hero::before { background: radial-gradient(ellipse 70% 90% at 70% 10%, color-mix(in srgb, var(--hx-iso-8) 14%, transparent), transparent 65%); }
body[data-accent="verde"] .hero::before { background: radial-gradient(ellipse 70% 90% at 70% 10%, color-mix(in srgb, var(--hx-turquesa) 16%, transparent), transparent 65%); }
body[data-accent="ambar"] .hero::before { background: radial-gradient(ellipse 70% 90% at 70% 10%, color-mix(in srgb, var(--hx-ambar) 14%, transparent), transparent 65%); }

/* Auditoría: degradado cian→azul en detalles */
body[data-accent="degradado"] { --accent: var(--hx-iso-8); --accent-soft: color-mix(in srgb, var(--hx-iso-8) 10%, transparent); }
body[data-accent="degradado"] .hero::before {
  background: radial-gradient(ellipse 60% 80% at 30% 0%, color-mix(in srgb, var(--hx-iso-8) 14%, transparent), transparent 60%),
              radial-gradient(ellipse 60% 80% at 85% 30%, color-mix(in srgb, var(--hx-iso-3) 18%, transparent), transparent 60%);
}
body[data-accent="degradado"] .eyebrow {
  background: linear-gradient(90deg, var(--hx-iso-8), var(--hx-iso-3) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body[data-accent="degradado"] .eyebrow::before { background: var(--cian); }

/* ---------- Franja de autoridad ---------- */

.authority {
  border-bottom: 1px solid var(--line);
  background: var(--noche-2);
}
.authority__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 3rem;
  padding-block: 1.4rem;
}
.authority__tag {
  font-weight: 600;
  font-size: 1rem;
  color: var(--hielo);
}
.authority__exp { color: var(--muted); font-size: 0.9rem; }

/* ---------- Cards de producto ---------- */

.grid-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--noche-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 2px solid var(--card-accent, var(--azul));
  transition: transform var(--speed) ease, border-color var(--speed) ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--card-accent, var(--azul));
}
.card--nova   { --card-accent: var(--cian); }
.card--atlas  { --card-accent: var(--azul); }
.card--auditoria {
  background:
    linear-gradient(var(--noche-2), var(--noche-2)) padding-box,
    linear-gradient(90deg, var(--hx-iso-8), var(--hx-iso-3)) border-box;
  border: 1px solid var(--line);
  border-top: 2px solid transparent;
  --card-accent: var(--cian);
}
.card--vigia  { --card-accent: var(--verde); }
.card--fragua { --card-accent: var(--ambar); }

.card__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__name { font-size: 1.25rem; color: var(--hielo); }
.card__tagline { font-size: 0.95rem; font-weight: 500; color: var(--card-accent, var(--cian)); }
.card__desc { font-size: 0.9rem; color: var(--muted); flex-grow: 1; }

.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card__link:hover { text-decoration: none; }

/* ---------- Badges de estado ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.badge--early { color: var(--hx-iso-8); border-color: color-mix(in srgb, var(--hx-iso-8) 40%, transparent); }
.badge--early::before { background: var(--cian); }
.badge--prod { color: var(--hielo); border-color: color-mix(in srgb, var(--hx-success) 55%, transparent); }
.badge--prod::before { background: var(--verde); }

/* ---------- Banda Fragua ---------- */

.fragua-band {
  position: relative;
  overflow: hidden;
  background: var(--noche-2);
  border-block: 1px solid var(--line);
}
.fragua-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 100% at 15% 100%, color-mix(in srgb, var(--hx-ambar) 13%, transparent), transparent 60%);
  pointer-events: none;
}
.fragua-band .container { position: relative; }
.fragua-band .eyebrow { color: var(--ambar); }
.fragua-band .eyebrow::before { background: var(--ambar); }

/* ---------- Pasos numerados (método) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.step {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.25rem;
}
.step__num {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ambar);
}
.step h3 { font-size: 1.15rem; margin-top: 0.4rem; }
.step p { font-size: 0.92rem; color: var(--muted); margin-top: 0.5rem; }

/* ---------- Bloque capacidades ---------- */

.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.capability {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.25rem;
}
.capability h3 { font-size: 1.1rem; }
.capability h3::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 0.9rem;
}
.capability p { font-size: 0.92rem; color: var(--muted); margin-top: 0.5rem; }

/* ---------- Placeholder de capturas ---------- */

.shot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-width: 880px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

/* Capturas reales (sustituyen al placeholder — ver MANUAL_WEB_HECORIX.md §1) */
.shot {
  max-width: 880px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.shot img { width: 100%; height: auto; }
.shot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* ---------- Casos (Fragua) ---------- */

.case {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
}
.case:last-of-type { border-bottom: 1px solid var(--line); }
.case__title { font-size: 1.05rem; font-weight: 700; }
.case__body dl { display: grid; gap: 0.6rem; }
.case__body dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar);
}
.case__body dd { font-size: 0.95rem; color: var(--muted); margin-bottom: 0.4rem; }

/* ---------- Listas con criterio ---------- */

.check-list { list-style: none; display: grid; gap: 0.8rem; }
.check-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.85;
}

/* ---------- Nota estratégica ---------- */

.note-strategic {
  border-left: 3px solid var(--ambar);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 500;
}

/* ---------- CTA final ---------- */

.cta-final {
  text-align: center;
  border-top: 1px solid var(--line);
}
.cta-final h2 { max-width: 18ch; margin-inline: auto; }
.cta-final p { color: var(--muted); max-width: 52ch; margin: 1rem auto 0; }
.cta-final .btn { margin-top: 2rem; }

/* ---------- Formulario ---------- */

.form { display: grid; gap: 1.35rem; max-width: 640px; }

.field { display: grid; gap: 0.45rem; }
.field label { font-weight: 500; font-size: 0.95rem; }
.field .hint { font-size: 0.82rem; color: var(--muted); }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  background: var(--noche-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--hielo);
  font-family: var(--font);
  font-size: 0.95rem;
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cian);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-focus) 30%, transparent);
}

.field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.field--check input {
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  accent-color: var(--azul);
  flex-shrink: 0;
}
.field--check label { font-weight: 400; font-size: 0.9rem; color: var(--muted); }

/* Honeypot: fuera de vista para humanos, visible para bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Prosa (legales, sobre) ---------- */

.prose { max-width: 720px; }
.prose h2 { margin-top: 2.5rem; margin-bottom: 0.9rem; font-size: 1.35rem; }
.prose h3 { margin-top: 1.8rem; margin-bottom: 0.6rem; font-size: 1.1rem; }
.prose p, .prose li { color: var(--muted); }
.prose p + p { margin-top: 1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-block: 1rem; display: grid; gap: 0.5rem; }
.prose strong { color: var(--hielo); font-weight: 600; }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--noche-2);
  padding-block: 3rem 2.5rem;
}
.footer__in {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  justify-content: space-between;
  align-items: flex-start;
}
.footer__brand { display: grid; gap: 0.9rem; justify-items: start; }
/* En el footer hay altura de sobra (quedaban 110px sin usar), así que el
   lockup vertical va a 180px de ancho: la H del wordmark sube de 23,3 a
   35 px y la pieza deja de perderse. El mínimo de Normas §6 son 100px.
   Radio de caja, no pastilla: la pieza es casi cuadrada y una pastilla la
   deformaría ópticamente. */
.footer__brand-mark {
  display: inline-flex;
  padding: 22px 26px;
  background: var(--hx-zona-clara);
  border-radius: var(--radius);
}
.footer__brand-mark img { width: 180px; height: 190px; }
.footer__tagline { font-size: 0.88rem; color: var(--muted); max-width: 34ch; }
.footer__nav { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer__col { display: grid; gap: 0.55rem; align-content: start; }
.footer__col span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.footer__col a { font-size: 0.88rem; color: var(--muted); }
.footer__col a:hover { color: var(--hielo); text-decoration: none; }
.footer__legal {
  width: 100%;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---------- Utilidades ---------- */

.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.text-center { text-align: center; }

.alert {
  border: 1px solid color-mix(in srgb, var(--hx-success) 50%, transparent);
  background: color-mix(in srgb, var(--hx-success) 8%, transparent);
  color: var(--hielo);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
}

/* Variante de error del aviso del formulario (sustituye al style inline) */
.alert--error {
  border-color: color-mix(in srgb, var(--hx-danger) 50%, transparent);
  background: color-mix(in srgb, var(--hx-danger) 8%, transparent);
}

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

@media (max-width: 1024px) {
  .grid-products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .grid-products,
  .steps,
  .capabilities,
  .shot-grid { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; gap: 0.75rem; }
  .authority__in { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}

/* La marca ampliada (208px con su pastilla) + enlaces + CTA necesitan 756px
   de contenido. Por debajo de 820px los enlaces se pliegan, o se apretarían
   contra el logo. Antes este corte estaba en 720px, cuando la marca ocupaba
   menos. */
@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__in { justify-content: space-between; }
}

@media (max-width: 720px) {
  .hero__actions .btn { width: 100%; }
  .footer__in { flex-direction: column; }
}

@media (max-width: 480px) {
  /* Con el CTA visible no cabe el lockup. <picture> ya sirve el isotipo aquí;
     el CSS solo ajusta la caja, que si no heredaría los 143x40 del lockup.
     36px está por encima del mínimo de 32px del isotipo (Normas §6). */
  .nav__logo { width: 36px; height: 36px; }
  .nav__brand { padding: 8px; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .card:hover, .btn:hover { transform: none; }
}

/* ============================================================
   SISTEMA DE MOVIMIENTO
   Decisiones deja el manual de motion en la lista de pendientes (punto 8),
   así que esto sienta criterio, igual que hizo el modo oscuro.

   REGLA DE GOBIERNO: cada efecto vive en un sitio. El fondo animado solo
   en el hero; los haces solo en la banda Fragua y el CTA final; el
   resplandor de tarjeta solo en hover; los contadores solo donde hay
   cifras verificables. Nada se acumula sobre lo mismo.

   PRESUPUESTO: cero JavaScript salvo los contadores (~20 líneas, y sin
   ellos se ve la cifra final). Todo bajo prefers-reduced-motion.
   ============================================================ */

@property --hx-angulo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---------- 1. Hero: rejilla + cruces + deriva ----------
   Combina la rejilla de líneas que ya existía con una capa de cruces más
   marcadas, cada tres celdas, que deriva en sentido contrario y muy lento.
   El resultado es papel milimetrado técnico, no un fondo decorativo.

   Excepción documentada a la regla de "ningún hex fuera de la paleta": un
   data URI no admite var(), así que el trazo lleva el valor literal de
   --hx-iso-8. Si cambia el token, cambiar también aquí. */

/* La rejilla se mueve a un pseudo-elemento propio: la máscara radial que la
   desvanece no debe tocar el texto del hero. El ::before ya lo ocupa el halo. */
.hero { background-image: none; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Cpath d='M84 79v10M79 84h10' stroke='%2342BEFF' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(color-mix(in srgb, var(--hx-iso-8) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hx-iso-8) 5%, transparent) 1px, transparent 1px);
  background-size: 168px 168px, 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 60% 20%, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 80% at 60% 20%, #000 35%, transparent 80%);
}

/* El contenido siempre por encima de las capas de fondo */
.hero__in,
.fragua-band .container,
.cta-final .container { position: relative; z-index: 1; }

/* 18s por celda: unos 9 px/s. Los 45s anteriores daban 3,7 px/s y medidos
   en pantalla no se percibian: el ojo los leia como un fondo fijo. Sutil no
   es lo mismo que invisible, y 3,7 px/s cae del lado invisible. */
@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: hx-deriva-rejilla 18s linear infinite; }
}

@keyframes hx-deriva-rejilla {
  to { background-position: -168px 168px, 56px -56px, 56px -56px; }
}

/* ---------- 2. Constelación: trazos que se dibujan y nodos que laten ----------
   Es el sistema gráfico auxiliar de la marca —el patrón del banner oscuro y
   de la imagen Open Graph— en movimiento. No es un fondo prestado. */

.constelacion {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: min(56%, 680px);
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.85;
}
.constelacion svg { width: 100%; height: 100%; }

.constelacion .hx-linea {
  fill: none;
  stroke: var(--hx-iso-5);
  stroke-width: 1;
  stroke-opacity: 0.28;
}
.constelacion .hx-nodo {
  fill: var(--hx-iso-7);
  fill-opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
  .constelacion .hx-linea {
    stroke-dasharray: var(--hx-largo, 300);
    stroke-dashoffset: var(--hx-largo, 300);
    animation: hx-trazar 2.6s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: var(--hx-retardo, 0s);
  }
  .constelacion .hx-nodo {
    transform-box: fill-box;
    transform-origin: center;
    animation: hx-latir 5s ease-in-out infinite;
    animation-delay: var(--hx-retardo, 0s);
  }
}

@keyframes hx-trazar { to { stroke-dashoffset: 0; } }
@keyframes hx-latir {
  0%, 100% { fill-opacity: 0.35; transform: scale(1); }
  50%      { fill-opacity: 0.8;  transform: scale(1.35); }
}

/* ---------- 3. Haces de luz: banda Fragua y CTA final ----------
   Un solo haz que barre muy lento. Solo en estas dos zonas. */

.fragua-band, .cta-final { position: relative; overflow: hidden; }

.fragua-band::after, .cta-final::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -60%;
  left: -30%;
  width: 45%;
  height: 220%;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--hx-haz, var(--hx-iso-5)) 9%, transparent),
    transparent);
}
.fragua-band { --hx-haz: var(--hx-ambar); }

@media (prefers-reduced-motion: no-preference) {
  .fragua-band::after, .cta-final::after { animation: hx-barrido 14s ease-in-out infinite; }
}

@keyframes hx-barrido {
  0%       { transform: translateX(0) rotate(18deg); opacity: 0; }
  15%      { opacity: 1; }
  85%      { opacity: 1; }
  100%     { transform: translateX(260%) rotate(18deg); opacity: 0; }
}

/* ---------- 4. Tarjetas: borde cónico + resplandor, solo en hover ----------
   Mezcla las dos referencias: el gradiente que recorre el borde y el halo
   difuso del color de acento. En reposo la tarjeta no se mueve. */

.card { isolation: isolate; }

.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--speed) ease;
  background: conic-gradient(from var(--hx-angulo),
    transparent 0deg,
    var(--card-accent, var(--hx-primary)) 55deg,
    transparent 130deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

.card:hover {
  box-shadow: 0 12px 40px -12px color-mix(in srgb, var(--card-accent, var(--hx-primary)) 45%, transparent);
}
.card:hover::before { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .card:hover::before { animation: hx-girar 3s linear infinite; }
}

@keyframes hx-girar { to { --hx-angulo: 360deg; } }

/* ---------- 5. Cifras: franja de métricas ---------- */

.metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-block: clamp(2rem, 5vw, 3rem);
  border-block: 1px solid var(--line);
}
.metrica__valor {
  font-family: var(--font-titular);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  color: var(--hx-text);
  font-variant-numeric: tabular-nums;
}
.metrica__valor span { color: var(--accent); }
.metrica__pie { color: var(--muted); font-size: 0.92rem; margin-top: 0.5rem; max-width: 26ch; }

@media (max-width: 720px) {
  .metricas { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- 6. Revelado al entrar en pantalla ----------
   CSS puro con animation-timeline. Donde no hay soporte no pasa nada:
   el contenido se ve, sin animar. Nunca se aplica al hero. */

@supports (animation-timeline: view()) {
  .section__head,
  .card,
  .capability,
  .step,
  .case,
  .metrica,
  .shot-placeholder,
  .note-strategic,
  .check-list li {
    animation: hx-revelar linear both;
    animation-timeline: view();
    /* Se completa en cuanto el elemento acaba de entrar. Con "cover 28%"
       un bloque alto o cercano al pie podía no alcanzar nunca el final del
       rango y quedarse invisible. */
    animation-range: entry 10% entry 100%;
  }

  /* Con movimiento reducido el revelado no se apaga: se queda en fundido
     puro. Lo que provoca mareo es el desplazamiento espacial, no la
     opacidad, así que la página sigue teniendo vida sin hacer daño. */
  @media (prefers-reduced-motion: reduce) {
    .section__head,
    .card,
    .capability,
    .step,
    .case,
    .metrica,
    .shot-placeholder,
    .note-strategic,
    .check-list li { animation-name: hx-revelar-suave; }
  }
}

@keyframes hx-revelar {
  from { opacity: 0; filter: blur(6px); transform: translateY(18px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

@keyframes hx-revelar-suave {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 7. Botones: brillo que barre + avance ----------
   Combina las dos referencias, pero solo al pasar por encima: un brillo
   que cruza una vez y un desplazamiento mínimo. Nada en bucle. */

.btn { position: relative; overflow: hidden; }

.btn--primary::after,
.btn--ambar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-100%);
  background: linear-gradient(100deg,
    transparent 30%,
    color-mix(in srgb, var(--hx-blanco) 38%, transparent) 50%,
    transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after,
  .btn--ambar:hover::after { animation: hx-brillo 750ms ease-out; }
}

@keyframes hx-brillo { to { transform: translateX(100%); } }

/* El nombre de la tarjeta avanza un punto al pasar por encima */
.card__name { transition: transform var(--speed) ease; }
.card:hover .card__name { transform: translateX(2px); }

/* ---------- Movimiento reducido: nada se mueve ---------- */

/* ---------- Movimiento reducido ----------
   Se apaga el movimiento espacial —lo que puede provocar mareo o migraña—
   y se conservan los cambios de opacidad y de estado, que son seguros.
   WCAG 2.2.2 (nivel A) además exige poder detener cualquier movimiento
   automático de más de 5 s: la deriva del fondo y los haces son infinitos,
   así que aquí tienen que parar sin excepción. */
@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .constelacion .hx-linea,
  .constelacion .hx-nodo,
  .fragua-band::after,
  .cta-final::after,
  .card:hover::before,
  .btn--primary:hover::after,
  .btn--ambar:hover::after { animation: none !important; }

  /* La constelación se ve dibujada y quieta, no desaparece */
  .constelacion .hx-linea { stroke-dashoffset: 0; }

  /* El resplandor de la tarjeta sigue apareciendo al pasar por encima:
     es un cambio de estado, no un movimiento continuo */
  .card:hover::before { opacity: 1; }

  /* Sin desplazamiento en hover */
  .card:hover { transform: none; }
  .card:hover .card__name { transform: none; }
}

/* ============================================================
   BLOQUES DE CONTENIDO
   ============================================================ */

/* ---------- Bento del ecosistema ----------
   Los tamanos reflejan la jerarquia de ramas del posicionamiento §5.1:
   los productos de despacho ocupan mas; inventarios, rama 2, ocupa menos. */

.grid-products--bento { grid-template-columns: repeat(3, 1fr); }
.grid-products--bento .card--auditoria { grid-column: span 2; }
.grid-products--bento .card--atlas     { grid-column: span 2; }

@media (max-width: 1024px) {
  .grid-products--bento { grid-template-columns: repeat(2, 1fr); }
  .grid-products--bento .card--auditoria,
  .grid-products--bento .card--atlas { grid-column: span 2; }
}
@media (max-width: 820px) {
  .grid-products--bento { grid-template-columns: 1fr; }
  .grid-products--bento .card--auditoria,
  .grid-products--bento .card--atlas { grid-column: auto; }
}

/* ---------- Orbita de integraciones ----------
   Hecorix en el centro; alrededor, lo que el despacho ya usa. Sin logos de
   terceros: solo el nombre generico de cada herramienta. */

.orbita {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}

.orbita__anillo {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
}
.orbita__anillo--fuera  { inset: 0; }
.orbita__anillo--dentro { inset: 22%; border-style: solid; border-color: var(--line); }

.orbita__centro {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  background: var(--hx-zona-clara);
  border-radius: 50%;
}
.orbita__centro img { width: 72px; height: 72px; }

.orbita__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  margin: -1.4rem 0 0 -75px;
  padding: 0.5rem 0.7rem;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--hx-text);
  background: var(--hx-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transform: rotate(var(--a)) translateX(min(38vw, 240px)) rotate(calc(-1 * var(--a)));
}

@media (max-width: 720px) {
  /* En movil la orbita no cabe: se convierte en lista */
  .orbita { aspect-ratio: auto; display: grid; gap: 0.6rem; }
  .orbita__anillo { display: none; }
  .orbita__centro { position: static; margin: 0 auto 1rem; }
  .orbita__item {
    position: static;
    width: auto;
    margin: 0;
    transform: none;
    text-align: left;
  }
}

/* ---------- Metodo en linea de tiempo ---------- */

.ruta {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.ruta__paso {
  position: relative;
  padding: 0 0 2rem 3.25rem;
  border-left: 1px solid var(--line-strong);
}
.ruta__paso:last-child { border-left-color: transparent; padding-bottom: 0; }
.ruta__paso::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.ruta__num {
  display: block;
  font-family: var(--font-titular);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.ruta__paso h3 { font-size: 1.2rem; }
.ruta__paso p { color: var(--muted); font-size: 0.95rem; margin-top: 0.4rem; max-width: 62ch; }

/* ---------- Tabla comparativa ---------- */

.tabla-comparativa { overflow-x: auto; }
.tabla-comparativa table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.tabla-comparativa th,
.tabla-comparativa td {
  text-align: left;
  vertical-align: top;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line);
}
.tabla-comparativa thead th {
  font-family: var(--font-titular);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line-strong);
}
.tabla-comparativa tbody th {
  font-weight: 600;
  color: var(--hx-text);
  width: 20%;
}
.tabla-comparativa td { color: var(--muted); }
.tabla-comparativa tbody tr:last-child th,
.tabla-comparativa tbody tr:last-child td { border-bottom: 0; }
/* La ultima columna es la respuesta de Hecorix: se destaca */
.tabla-comparativa td:last-child {
  color: var(--hx-text);
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   DIAGRAMA DE FLUJO DE PRODUCTO
   Sustituye al hueco de capturas. No simula una pantalla: describe el
   proceso real, que es lo que el spec §4.8 permite y lo que de verdad
   entiende un socio director.
   ============================================================ */

.flujo {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.flujo__fase {
  position: relative;
  padding: 1.75rem 1.25rem 1.25rem;
  border-top: 2px solid var(--line-strong);
}

/* Nodo sobre la linea, en el color de acento del producto */
.flujo__fase::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 1.25rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* Conector entre fases */
.flujo__fase:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -2px;
  left: calc(1.25rem + 10px);
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.5;
}

.flujo__tag {
  font-family: var(--font-titular);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.flujo__fase h3 { font-size: 1.05rem; }
.flujo__fase p { font-size: 0.9rem; color: var(--muted); margin-top: 0.45rem; }

/* Pulso que recorre el flujo, para que se lea la direccion */
@media (prefers-reduced-motion: no-preference) {
  .flujo__fase::before { animation: hx-pulso-fase 6s ease-in-out infinite; }
  .flujo__fase:nth-child(2)::before { animation-delay: .4s; }
  .flujo__fase:nth-child(3)::before { animation-delay: .8s; }
  .flujo__fase:nth-child(4)::before { animation-delay: 1.2s; }
  .flujo__fase:nth-child(5)::before { animation-delay: 1.6s; }
}

@keyframes hx-pulso-fase {
  0%, 70%, 100% { transform: scale(1);   opacity: .55; }
  12%           { transform: scale(1.9); opacity: 1; }
}

@media (max-width: 900px) {
  /* En pantallas estrechas el flujo se lee de arriba abajo */
  .flujo { grid-auto-flow: row; }
  .flujo__fase {
    border-top: 0;
    border-left: 2px solid var(--line-strong);
    padding: 0 0 1.75rem 1.75rem;
  }
  .flujo__fase::before { top: 4px; left: -6px; }
  .flujo__fase:not(:last-child)::after {
    top: 14px;
    bottom: 0;
    left: -2px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--accent), transparent);
  }
  .flujo__fase:last-child { border-left-color: transparent; padding-bottom: 0; }
}

/* ============================================================
   CALCULADORA DE HORAS
   ============================================================ */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.calc__campos { display: grid; gap: 1.25rem; }
.calc__campos .field label { font-weight: 600; }

.calc__salida {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.calc__dato {
  background: var(--hx-surface);
  padding: 1.5rem 1.4rem;
}
.calc__dato--principal {
  grid-column: span 2;
  background: var(--accent-soft);
}

.calc__cifra {
  font-family: var(--font-titular);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.05;
  color: var(--hx-text);
  font-variant-numeric: tabular-nums;
}
.calc__dato--principal .calc__cifra {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: var(--accent);
}
.calc__pie { color: var(--muted); font-size: 0.88rem; margin-top: 0.4rem; max-width: 30ch; }

.calc__nota {
  max-width: 720px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 2.5rem);
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .calc__salida { grid-template-columns: 1fr; }
  .calc__dato--principal { grid-column: auto; }
}

/* ============================================================
   POSICIONES Y RITMOS
   Estos valores estaban como atributos style en el HTML. Ahi obligaban a
   permitir 'unsafe-inline' en la politica de seguridad, y ademas el spec §7
   prohibe los estilos inline sin excepcion documentada.
   ============================================================ */

.constelacion .hx-linea:nth-of-type(1) { --hx-largo: 210; --hx-retardo: .1s; }
.constelacion .hx-linea:nth-of-type(2) { --hx-largo: 260; --hx-retardo: .3s; }
.constelacion .hx-linea:nth-of-type(3) { --hx-largo: 240; --hx-retardo: .5s; }
.constelacion .hx-linea:nth-of-type(4) { --hx-largo: 300; --hx-retardo: .4s; }
.constelacion .hx-linea:nth-of-type(5) { --hx-largo: 280; --hx-retardo: .7s; }
.constelacion .hx-linea:nth-of-type(6) { --hx-largo: 250; --hx-retardo: .9s; }
.constelacion .hx-linea:nth-of-type(7) { --hx-largo: 290; --hx-retardo: 1.1s; }
.constelacion .hx-linea:nth-of-type(8) { --hx-largo: 230; --hx-retardo: .8s; }
.constelacion .hx-linea:nth-of-type(9) { --hx-largo: 200; --hx-retardo: 1.3s; }

.constelacion .hx-nodo:nth-of-type(1) { --hx-retardo: .2s; }
.constelacion .hx-nodo:nth-of-type(2) { --hx-retardo: .9s; }
.constelacion .hx-nodo:nth-of-type(3) { --hx-retardo: .5s; }
.constelacion .hx-nodo:nth-of-type(4) { --hx-retardo: 1.4s; }
.constelacion .hx-nodo:nth-of-type(5) { --hx-retardo: .7s; }
.constelacion .hx-nodo:nth-of-type(6) { --hx-retardo: 1.1s; }
.constelacion .hx-nodo:nth-of-type(7) { --hx-retardo: .3s; }
.constelacion .hx-nodo:nth-of-type(8) { --hx-retardo: 1.6s; }


.orbita__item--gestion { --a: -90deg; }
.orbita__item--excel { --a: -30deg; }
.orbita__item--correo { --a: 30deg; }
.orbita__item--carpetas { --a: 90deg; }
.orbita__item--factura { --a: 150deg; }
.orbita__item--portales { --a: 210deg; }

/* ============================================================
   SISTEMA DE MOVIMIENTO — SEGUNDA CAPA (19/08/2026)
   Añadida para la publicación de hecorix.com. Mismo presupuesto que la
   primera: CSS nativo siempre que se pueda, JavaScript solo donde el
   navegador no ofrece alternativa, y todo degradando a estático.

   Nada de aquí es imprescindible para leer la página. Si el navegador no
   entiende scroll-timeline, view-transition o background-clip, lo que se ve
   es el estado final —el correcto— sin animar.
   ============================================================ */

/* ---------- 8. Redes ----------
   Pastillas, no iconos sueltos: el texto acompaña al símbolo porque un
   glifo solo obliga a adivinar. El SVG va en línea en el HTML para que la
   CSP pueda seguir prohibiendo img-src externo. */

.social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }

.social__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--muted);
  transition: color var(--speed) ease, border-color var(--speed) ease,
              transform var(--speed) ease, box-shadow var(--speed) ease;
}
.social__link svg { flex-shrink: 0; }
.social__link:hover {
  text-decoration: none;
  color: var(--hielo);
  border-color: var(--cian);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--hx-iso-8) 70%, transparent);
}

/* ---------- 9. Barra de progreso de lectura ----------
   Vive en el ::after de la barra de navegación, así que no añade ni un nodo
   al HTML. Se apoya en scroll(root) — cero JavaScript, cero listeners. */

@supports (animation-timeline: scroll()) {
  .nav::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
    background: linear-gradient(90deg, var(--hx-iso-3), var(--hx-iso-8));
    animation: hx-progreso linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes hx-progreso { to { transform: scaleX(1); } }

/* ---------- 10. La barra se condensa al bajar ----------
   88px de alto en reposo, 64px en cuanto se empieza a leer. El recorrido se
   agota en los primeros 160px de scroll, que es el gesto en el que el ojo
   todavía está mirando arriba.

   Se apaga con movimiento reducido: aunque lo dispare el scroll y no un
   temporizador, sigue siendo desplazamiento espacial. */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav__in,
    .nav__brand,
    .nav__logo {
      animation: linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 160px;
    }
    .nav__in   { animation-name: hx-nav-alto; }
    .nav__brand { animation-name: hx-nav-marca; }
    .nav__logo  { animation-name: hx-nav-logo; }
    .nav        { transition: box-shadow 240ms ease; }
  }
}

@keyframes hx-nav-alto  { to { height: 64px; } }
@keyframes hx-nav-marca { to { padding: 7px 14px; } }
/* 140px es el mínimo de Normas §6 para el lockup horizontal: la barra
   condensada se queda justo en el suelo permitido, nunca por debajo. */
@keyframes hx-nav-logo  { to { width: 140px; height: 39px; } }

/* ---------- 11. Transiciones entre páginas ----------
   View Transitions en modo multipágina. El navegador funde el documento que
   sale con el que entra; la barra y el pie se mantienen porque llevan
   view-transition-name propio. Donde no está soportado, la navegación es la
   de toda la vida y no falta nada. */

@view-transition { navigation: auto; }

.nav    { view-transition-name: hx-nav; }
.footer { view-transition-name: hx-footer; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: hx-vt-sale 190ms cubic-bezier(.4,0,1,1) both;
  }
  ::view-transition-new(root) {
    animation: hx-vt-entra 320ms cubic-bezier(0,0,.2,1) both;
  }
}

@keyframes hx-vt-sale  { to { opacity: 0; transform: translateY(-8px); } }
@keyframes hx-vt-entra { from { opacity: 0; transform: translateY(14px); } }

/* Con movimiento reducido la transición no se elimina —un corte seco es
   peor— sino que se reduce a un fundido sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: hx-revelar-suave 120ms linear reverse both; }
  ::view-transition-new(root) { animation: hx-revelar-suave 160ms linear both; }
}

/* ---------- 12. Titular del hero: reflejo que cruza ----------
   El texto sigue siendo texto: se selecciona, se lee con lector de pantalla
   y se puede copiar. Solo cambia cómo se pinta.

   El @supports es obligatorio, no cosmético: sin recorte de fondo,
   color: transparent dejaría el H1 invisible. */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero .display {
    background-image: linear-gradient(100deg,
      var(--hx-text) 0%,
      var(--hx-text) 38%,
      var(--hx-iso-8) 50%,
      var(--hx-text) 62%,
      var(--hx-text) 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero .display { animation: hx-reflejo 7s ease-in-out infinite; }
  }
}

/* Un barrido cada siete segundos. Con los once anteriores el titular pasaba
   el 82 % del tiempo quieto y quien llegaba a la pagina no llegaba a ver
   ninguno. Sigue habiendo reposo suficiente para que no parezca un letrero. */
@keyframes hx-reflejo {
  0%, 55%, 100% { background-position: 100% 0; }
  22%           { background-position: 0% 0; }
}

/* ---------- 13. Parallax de puntero en el hero ----------
   Las variables las escribe assets/hecorix.js; aquí solo se consumen. Si el
   script no carga, valen 0 y no se mueve nada.

   El desplazamiento es deliberadamente corto (14px como mucho): lo que se
   busca es sensación de profundidad, no un efecto de feria. */

.hero { --hx-mx: 0; --hx-my: 0; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .constelacion svg {
    transform: translate3d(calc(var(--hx-mx) * 14px), calc(var(--hx-my) * 10px), 0);
    transition: transform 420ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }
  .hero::before {
    transform: translate3d(calc(var(--hx-mx) * -22px), calc(var(--hx-my) * -16px), 0);
    transition: transform 620ms cubic-bezier(.22,.61,.36,1);
  }
  /* La rejilla se mueve al revés y menos: es el plano más lejano. */
  .hero::after {
    translate: calc(var(--hx-mx) * -6px) calc(var(--hx-my) * -5px);
    transition: translate 760ms cubic-bezier(.22,.61,.36,1);
  }
}

/* ---------- 15. La pila de la forja: tres planos en 3D ----------
   Los tres pasos de Fragua dejan de ser tres tarjetas planas y pasan a ser
   tres placas apiladas en profundidad, como las capas de un proceso que se
   monta una sobre otra. El conjunto gira con el scroll.

   Perspectiva corta a propósito (1400px, no 600): con perspectiva agresiva
   el texto de las placas del fondo se deforma y deja de leerse. Aquí el 3D
   se nota y el texto sigue siendo texto plano bajo el cursor.

   No hay WebGL ni librería: transform-style: preserve-3d y tres translateZ. */

.forja { perspective: 1400px; perspective-origin: 60% 40%; }

.forja__pila {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  transform-style: preserve-3d;
  /* En reposo la pila esta recta. La inclinacion es un estado de entrada,
     nunca un estado final: una pieza detenida en una pose intermedia se lee
     como algo roto, no como diseno. */
  transform: none;
}

.forja__placa {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--noche-2) 92%, transparent);
  box-shadow: 0 26px 60px -34px color-mix(in srgb, var(--hx-azul) 90%, transparent);
  transform-style: preserve-3d;
}
/* Cada placa un poco más cerca que la anterior: el proceso avanza hacia
   quien lee. Son 26px de separación, suficientes para leer la profundidad
   sin que la de arriba tape a la de abajo. */
.forja__placa:nth-child(1) { transform: translateZ(0); }
.forja__placa:nth-child(2) { transform: translateZ(26px); }
.forja__placa:nth-child(3) { transform: translateZ(52px); }

.forja__num {
  font-family: var(--font-titular);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.forja__placa h3 { margin-bottom: 0.5rem; }
/* :not() para no pisar el color de acento de .forja__num: como selector de
   tipo, `.forja__placa p` gana por especificidad a la clase sola. */
.forja__placa p:not(.forja__num) { color: var(--muted); }

/* El canto iluminado del borde superior: es lo que convence de que la placa
   tiene grosor. Sin él, el 3D se lee como una sombra mal puesta. */
.forja__placa::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 65%, transparent), transparent);
}

/* El giro lo conduce el scroll: entra girada y se endereza al pasar por el
   centro de la pantalla. Es un solo transform sobre el contenedor, así que
   cuesta lo mismo que no hacerlo. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .forja__pila {
      animation: hx-forjar linear both;
      animation-timeline: view();
      /* Todo el giro se agota mientras la pila termina de entrar por abajo.
         En cuanto esta completamente en pantalla ya esta recta, asi que no
         hay forma de pararse a mirarla y encontrarla a medio girar. Es el
         mismo criterio que usan los revelados de la seccion 6. */
      /* Escrito en dos propiedades y no en el atajo: `animation-range:
         entry 10% entry 100%` lo normaliza el navegador a `entry 10%` y el
         final se pierde, con lo que el giro se estiraba hasta mucho despues
         de haber entrado. Separadas, el rango queda como se pretende. */
      animation-range-start: entry 10%;
      animation-range-end: entry 100%;
    }
  }
}

@keyframes hx-forjar {
  from { transform: rotateX(18deg) rotateY(-28deg) scale(0.93); }
  to   { transform: rotateX(0)     rotateY(0)      scale(1); }
}

/* En móvil no hay 3D: la perspectiva sobre una columna estrecha corta las
   placas contra los bordes y el texto pierde tamaño aparente. Se ven como
   tres tarjetas normales, que es lo que tienen que ser ahí. */
@media (max-width: 720px) {
  .forja { perspective: none; }
  .forja__pila { transform: none; animation: none !important; }
  .forja__placa:nth-child(n) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .forja__pila { animation: none !important; }
}

/* ---------- 16. Entrada del hero ----------
   Medido sobre la version anterior: en los dos primeros segundos —que es
   cuando se decide si una pagina esta viva— lo unico que se movia era la
   rejilla, a 3,7 px/s, y el titular estaba en su fase de reposo. La pagina
   se percibia congelada aunque tecnicamente no lo estuviera.

   Esto lo arregla en el unico sitio donde importa: la primera pantalla. El
   contenido del hero entra escalonado al cargar, de arriba abajo, y termina
   en 900 ms. No se repite nunca.

   Si el navegador pide movimiento reducido, la regla no llega a aplicarse y
   el hero aparece ya colocado: no hay estado intermedio invisible. */

@media (prefers-reduced-motion: no-preference) {
  .hero__in > * {
    animation: hx-entrar 620ms cubic-bezier(.22,.61,.36,1) both;
  }
  .hero__in > *:nth-child(1) { animation-delay:  40ms; }
  .hero__in > *:nth-child(2) { animation-delay: 140ms; }
  .hero__in > *:nth-child(3) { animation-delay: 260ms; }
  .hero__in > *:nth-child(4) { animation-delay: 340ms; }
  .hero__in > *:nth-child(5) { animation-delay: 420ms; }
}

@keyframes hx-entrar {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 17. Pulsos que recorren la constelacion ----------
   Las lineas ya se dibujaban al cargar, pero una vez dibujadas se quedaban
   quietas para siempre. Ahora un punto de luz recorre cada trazo en bucle:
   es lo que convierte un diagrama en un sistema en marcha, y es literalmente
   lo que vendemos —datos que pasan de una herramienta a otra.

   Sin JavaScript y sin offset-path: un guion corto de 12 unidades dentro de
   un patron de 300 recorre el trazo al desplazar el dashoffset. Cada linea
   lleva su propio retardo, el mismo que ya usaba para dibujarse, asi que los
   pulsos salen desfasados y no marchan en formacion. */

.constelacion .hx-pulso {
  fill: none;
  stroke: var(--hx-iso-8);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 12 300;
  stroke-dashoffset: 312;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .constelacion .hx-pulso {
    animation: hx-fluir 5.5s cubic-bezier(.55,0,.45,1) infinite;
    /* Arrancan despues de que su linea se haya terminado de dibujar: un
       pulso sobre un trazo a medio dibujar se lee como un fallo. */
    animation-delay: calc(var(--hx-retardo, 0s) + 2.4s);
  }
}

@keyframes hx-fluir {
  0%        { stroke-dashoffset: 312; opacity: 0; }
  12%       { opacity: 0.95; }
  70%       { opacity: 0.95; }
  85%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* Con movimiento reducido no hay pulsos: son movimiento continuo y no
   aportan informacion que no este ya en las lineas dibujadas. */
@media (prefers-reduced-motion: reduce) {
  .constelacion .hx-pulso { display: none; }
  .hero__in > * { animation: none !important; }
}

/* Los pulsos son <path> igual que los trazos, asi que en el orden del SVG
   ocupan las posiciones 10 a 18. Se les repite el retardo de la linea que
   recorren para que cada pulso salga cuando su trazo ya esta dibujado. */
.constelacion .hx-pulso:nth-of-type(10) { --hx-retardo: .1s; }
.constelacion .hx-pulso:nth-of-type(11) { --hx-retardo: .3s; }
.constelacion .hx-pulso:nth-of-type(12) { --hx-retardo: .5s; }
.constelacion .hx-pulso:nth-of-type(13) { --hx-retardo: .4s; }
.constelacion .hx-pulso:nth-of-type(14) { --hx-retardo: .7s; }
.constelacion .hx-pulso:nth-of-type(15) { --hx-retardo: .9s; }
.constelacion .hx-pulso:nth-of-type(16) { --hx-retardo: 1.1s; }
.constelacion .hx-pulso:nth-of-type(17) { --hx-retardo: .8s; }
.constelacion .hx-pulso:nth-of-type(18) { --hx-retardo: 1.3s; }

/* ---------- Demo de flujo (HECORIX Auditoría) ----------
   Pregunta -> producto -> resultado, con los mismos tokens que .note-strategic
   y .card: nada de color ni sombra nuevos, solo una caja que ya se lee como
   parte del sistema. */

.demo-flujo {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: 2rem 1.75rem;
  background: var(--noche-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.demo-flujo__pregunta {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--hielo);
}
.demo-flujo__flecha {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}
.demo-flujo__resultado {
  margin-top: 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.demo-flujo__ref { font-size: 1.15rem; font-weight: 700; color: var(--hielo); }
.demo-flujo__meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }
.demo-flujo__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 0.9rem;
}
.demo-flujo__tags li { padding-left: 1.3rem; font-size: 0.85rem; }

/* ---------- FAQ (details/summary nativo) ----------
   Sin JS: <details> ya da apertura, teclado y foco correctos gratis. El
   marcador nativo se sustituye por un "+" que gira, con las mismas
   transiciones (--speed) que el resto de la web. */

.faq__item {
  border-top: 1px solid var(--line);
  padding-block: 1.1rem;
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  color: var(--hielo);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform var(--speed) ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin-top: 0.75rem; color: var(--muted); font-size: 0.95rem; }

@media (max-width: 720px) {
  .demo-flujo { padding: 1.5rem 1.25rem; }
}