/* ==========================================================================
   Cadmetry — sistema de diseno del sitio publico
   --------------------------------------------------------------------------
   Los nombres de token (--graphite, --laser, --paper...) son los mismos que
   ya usaba la landing y la app, para que marca y producto no se separen.
   Se evita color-mix() a proposito: cada mezcla que hace falta esta escrita
   como token explicito, asi la hoja funciona tambien en navegadores viejos
   (y el entregable tiene que abrirse en cualquiera, sin servidor).
   ========================================================================== */

:root {
  /* --- Tinta y papel --- */
  --graphite: #27313D;
  --graphite-soft: #5B6570;
  --graphite-faint: #68717B;
  --laser: #FF2E2E;
  --laser-ink: #B3160F;
  --paper: #F3F4F5;
  --paper-deep: #E7E9EB;
  --surface: #FFFFFF;
  --surface-sunken: #FAFBFB;
  --line: #DCE0E3;
  --line-strong: #C4CAD0;
  --line-hair: rgba(39, 49, 61, 0.075);

  /* --- Mezclas precalculadas (sustituyen a color-mix) --- */
  --laser-08: rgba(255, 46, 46, 0.08);
  --laser-16: rgba(255, 46, 46, 0.16);
  --laser-24: rgba(255, 46, 46, 0.24);
  --laser-35: rgba(255, 46, 46, 0.35);
  --on-dark-soft: rgba(243, 244, 245, 0.72);
  --on-dark-faint: rgba(243, 244, 245, 0.42);
  --on-dark-line: rgba(243, 244, 245, 0.16);
  --shadow-sm: 0 1px 2px rgba(39, 49, 61, 0.05);
  --shadow-md: 0 4px 16px rgba(39, 49, 61, 0.07);
  --shadow-lg: 0 18px 48px rgba(39, 49, 61, 0.12);

  /* --- Tipografia --- */
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Ritmo: todo multiplo de 4px, como una hoja de plano --- */
  --u: 4px;
  --gap: 28px;
  --radius: 3px;
  --radius-lg: 6px;
  --wrap: 1120px;
  --nav-h: 68px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --graphite: #EDEEF0;
    --graphite-soft: #9AA4AD;
    --graphite-faint: #848D97;
    --laser: #FF4A42;
    --laser-ink: #FFB4AF;
    --paper: #161C22;
    --paper-deep: #10151A;
    --surface: #1F262E;
    --surface-sunken: #1A2027;
    --line: #313941;
    --line-strong: #454F59;
    --line-hair: rgba(237, 238, 240, 0.09);
    --laser-08: rgba(255, 74, 66, 0.10);
    --laser-16: rgba(255, 74, 66, 0.18);
    --laser-24: rgba(255, 74, 66, 0.26);
    --laser-35: rgba(255, 74, 66, 0.38);
    --on-dark-soft: rgba(237, 238, 240, 0.70);
    --on-dark-faint: rgba(237, 238, 240, 0.40);
    --on-dark-line: rgba(237, 238, 240, 0.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --graphite: #EDEEF0;
  --graphite-soft: #9AA4AD;
  --graphite-faint: #848D97;
  --laser: #FF4A42;
  --laser-ink: #FFB4AF;
  --paper: #161C22;
  --paper-deep: #10151A;
  --surface: #1F262E;
  --surface-sunken: #1A2027;
  --line: #313941;
  --line-strong: #454F59;
  --line-hair: rgba(237, 238, 240, 0.09);
  --laser-08: rgba(255, 74, 66, 0.10);
  --laser-16: rgba(255, 74, 66, 0.18);
  --laser-24: rgba(255, 74, 66, 0.26);
  --laser-35: rgba(255, 74, 66, 0.38);
  --on-dark-soft: rgba(237, 238, 240, 0.70);
  --on-dark-faint: rgba(237, 238, 240, 0.40);
  --on-dark-line: rgba(237, 238, 240, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
}

/* La banda va oscura en los dos temas, asi que su tinta NO puede ser --paper:
   en tema oscuro --paper es casi negro y el texto desaparecia (1,08:1). Se
   define una tinta propia, fija, y se usa en todo lo que va sobre la banda. */
:root {
  --band-bg: #27313D;
  --on-band: #F3F4F5;
  --on-band-soft: rgba(243, 244, 245, 0.78);
  --on-band-faint: rgba(243, 244, 245, 0.64);
  --on-band-line: rgba(243, 244, 245, 0.22);
}
:root[data-theme="dark"] .band,
:root:not([data-theme="light"]) .band {
  --band-bg: #10161C;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* La retícula de plano: dos rejillas de hairlines, una fina y una gruesa.
   Va en un pseudoelemento fijo para que no participe del scroll y no cueste
   repintado en el resto del documento. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-hair) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
  opacity: 0.85;
}

body > * { position: relative; z-index: 1; }

img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; display: block; }

a { color: inherit; }

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

::selection { background: var(--laser); color: #fff; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.008em; }
h4 { font-size: 0.98rem; font-weight: 700; letter-spacing: 0; }

h1 em, h2 em { font-style: normal; color: var(--laser); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--graphite-soft);
  max-width: 52ch;
}

.mono {
  font-family: var(--mono);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
}

.small { font-size: 0.88rem; }
.soft { color: var(--graphite-soft); }
.faint { color: var(--graphite-faint); }

/* Etiqueta tecnica: el "campo" de una hoja de plano. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-soft);
  margin: 0 0 16px;
}

.eyebrow--laser { color: var(--laser-ink); }

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--laser);
  box-shadow: 0 0 0 3px var(--laser-24);
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .eyebrow .dot { animation: beat 2.4s var(--ease) infinite; }
}

@keyframes beat {
  0%, 100% { box-shadow: 0 0 0 3px var(--laser-24); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 46, 46, 0); }
}

/* ==========================================================================
   Maquetacion
   ========================================================================== */

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

.wrap--narrow { max-width: 760px; }

section { padding: clamp(56px, 8vw, 104px) 0; }
section.tight { padding: clamp(36px, 5vw, 64px) 0; }
section + section { padding-top: 0; }
section.ruled { border-top: 1px solid var(--line); padding-top: clamp(56px, 8vw, 104px); }

.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { grid-template-columns: 1.04fr 1fr; align-items: center; gap: clamp(32px, 5vw, 64px); }
.split--wide-art { grid-template-columns: 1fr 1.15fr; }

.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Cabecera de seccion, con una cota que "mide" el ancho del titular:
   es el motivo grafico de la marca aplicado a la tipografia. */
.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p.lede { margin-top: 14px; }

.section-head .measure {
  display: block;
  height: 9px;
  margin-top: 18px;
  width: 100%;
  max-width: 260px;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  position: relative;
}

.section-head .measure::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--line-strong);
  transform: scaleX(var(--drawn, 0));
  transform-origin: left center;
  transition: transform 0.9s var(--ease);
}

/* ==========================================================================
   Botones y enlaces de accion
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease),
              background-color 0.15s var(--ease), border-color 0.15s var(--ease),
              color 0.15s var(--ease);
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  background: var(--laser);
  color: #fff;
  box-shadow: 0 6px 20px var(--laser-35);
}
.btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px var(--laser-35);
}
.btn--primary:active:not(:disabled) { transform: translateY(0); }

.btn--solid {
  background: var(--graphite);
  color: var(--paper);
}
.btn--solid:hover:not(:disabled) { background: var(--laser); color: #fff; }

.btn--outline {
  background: transparent;
  color: var(--graphite);
  border-color: var(--line-strong);
}
.btn--outline:hover:not(:disabled) { border-color: var(--laser); color: var(--laser-ink); }

.btn--sm { padding: 9px 16px; font-size: 0.9rem; }
.btn--block { width: 100%; }

/* Enlace subrayado que se "traza" al pasar por encima. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  color: var(--graphite);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--laser), var(--laser));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.28s var(--ease), color 0.15s var(--ease);
}
.link:hover { background-size: 100% 2px; color: var(--laser-ink); }
.link--shown { background-size: 100% 1px; }

.arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow, .link:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   Tarjeta con marcas de registro en las esquinas
   ========================================================================== */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}

.card--sunken { background: var(--surface-sunken); }
.card--pad-lg { padding: clamp(26px, 4vw, 40px); }

/* Las cuatro escuadras de esquina: dos gradientes por pseudoelemento,
   colocados en las cuatro esquinas. Puramente decorativo. */
.card--ticks::before,
.card--ticks::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  border-color: var(--line-strong);
  border-style: solid;
  border-width: 0;
  transition: border-color 0.2s var(--ease);
}
.card--ticks::before {
  top: 7px; left: 7px;
  border-top-width: 1px; border-left-width: 1px;
}
.card--ticks::after {
  bottom: 7px; right: 7px;
  border-bottom-width: 1px; border-right-width: 1px;
}
.card--ticks:hover::before, .card--ticks:hover::after { border-color: var(--laser); }

.card__n {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--laser);
  display: block;
  margin-bottom: 14px;
}

.card h3 { margin-bottom: 8px; }
.card p { color: var(--graphite-soft); font-size: 0.95rem; }

/* Rejilla de tarjetas pegadas, separadas solo por hairline: se lee como
   una tabla de despiece, no como cajas flotando. */
.sheet {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sheet > * {
  background: var(--surface);
  padding: 24px 22px;
  margin: 0;
}
.sheet--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sheet--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sheet--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ==========================================================================
   Piezas de dato
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--graphite-soft);
  white-space: nowrap;
}
.pill--laser { border-color: var(--laser); color: var(--laser-ink); background: var(--laser-08); }

.stat { display: block; }
.stat b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--graphite);
}
.stat b .u { font-size: 0.5em; color: var(--graphite-faint); margin-left: 3px; }
.stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--graphite-soft);
  line-height: 1.4;
}

/* Lista de especificaciones: clave a la izquierda, valor en mono a la
   derecha, con un puntillado de union — como una hoja de datos tecnica. */
.spec { margin: 0; }
.spec div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.spec div:last-child { border-bottom: 0; }
.spec dt { flex: none; font-size: 0.92rem; color: var(--graphite-soft); }
.spec dd {
  margin: 0 0 0 auto;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: right;
}
.spec .fill {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-3px);
  min-width: 12px;
}

.check {
  list-style: none;
  margin: 0;
  padding: 0;
}
.check li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: var(--graphite-soft);
}
.check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--laser);
  border-bottom: 2px solid var(--laser);
  transform: rotate(-45deg);
}
.check li b { color: var(--graphite); font-weight: 600; }
.check--muted li::before { border-color: var(--line-strong); }

/* ==========================================================================
   Banda de contraste
   ========================================================================== */

.band {
  background: var(--band-bg);
  color: var(--on-band);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 60px) clamp(24px, 4vw, 52px);
  position: relative;
  overflow: hidden;
}
.band h2, .band h3, .band h4 { color: var(--on-band); }
.band p { color: var(--on-band-soft); }
.band .eyebrow { color: var(--on-band-faint); }
.band .btn--outline { color: var(--on-band); border-color: var(--on-band-line); }
.band .btn--outline:hover { border-color: var(--on-band); color: var(--on-band); background: rgba(243, 244, 245, 0.08); }
.band .spec div { border-color: var(--on-band-line); }
.band .spec dt { color: var(--on-band-soft); }
.band .stat b { color: var(--on-band); }
.band .spec dd { color: var(--on-band); }
.band .stat span { color: var(--on-band-soft); }

/* Retícula sobre la banda, mas marcada que la del papel. */
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(243, 244, 245, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243, 244, 245, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}
.band > * { position: relative; }

/* ==========================================================================
   Navegacion
   ========================================================================== */

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--graphite);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.18s var(--ease);
}
.skip:focus { top: 12px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.topbar.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.topbar__in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand .logo { height: 26px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.nav a.navlink {
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--graphite-soft);
  padding: 8px 12px;
  border-radius: var(--radius);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
  white-space: nowrap;
}
.nav a.navlink:hover { color: var(--graphite); background: var(--paper-deep); }
.nav a.navlink[aria-current="page"] { color: var(--graphite); }
.nav a.navlink[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 5px;
  background: var(--laser);
}

.navtools { display: flex; align-items: center; gap: 8px; margin-left: 8px; flex: none; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--graphite-soft);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.iconbtn:hover { color: var(--graphite); border-color: var(--line-strong); }
.iconbtn svg { width: 17px; height: 17px; display: block; }

/* Selector de idioma: desplegable nativo con <details>.
   Nativo y no un menu a base de JavaScript porque asi se abre tambien con el
   JavaScript desactivado, responde al teclado sin codigo propio, y sigue
   funcionando abriendo el fichero desde el disco. Los cinco enlaces van al
   MISMO documento en la carpeta del otro idioma, no a la portada. */
.langpick { position: relative; flex: none; }

.langpick > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--graphite-soft);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.langpick > summary::-webkit-details-marker { display: none; }
.langpick > summary:hover { color: var(--graphite); border-color: var(--line-strong); }
.langpick[open] > summary { color: var(--graphite); border-color: var(--line-strong); }

.langpick__globe { display: flex; }
.langpick__globe svg { width: 16px; height: 16px; display: block; }
.langpick__caret {
  width: 13px;
  height: 13px;
  display: block;
  opacity: 0.7;
  transition: transform 0.18s var(--ease);
}
.langpick[open] .langpick__caret { transform: rotate(180deg); }

.langpick__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  min-width: 172px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.langpick__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  padding: 0 11px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--graphite-soft);
}
.langpick__menu a:hover { background: var(--paper-deep); color: var(--graphite); }
.langpick__menu a[aria-current="true"] { background: var(--graphite); color: var(--paper); }
.langpick__menu a[aria-current="true"] .faint { color: var(--on-band-soft); }
.langpick__menu .mono { font-size: 0.7rem; letter-spacing: 0.06em; }

.burger { display: none; }

.drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 12px 0 20px;
}
.drawer.is-open { display: block; }
.drawer a {
  display: block;
  padding: 13px 4px;
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer a[aria-current="page"] { color: var(--laser-ink); }
.drawer .btn { margin-top: 18px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 7vw, 88px); }
.hero h1 { margin-bottom: 20px; }
.hero .lede { margin-bottom: 30px; }
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Zonas interactivas (lienzos de medicion)
   ========================================================================== */

.stage {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stage__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-hair) 1px, transparent 1px);
  background-size: 32px 32px;
}

.stage svg, .stage canvas { display: block; width: 100%; height: auto; position: relative; }

/* Lectura de coordenadas al estilo barra de estado de un CAD. */
.readout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  padding: 9px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--graphite-soft);
}
.readout b { color: var(--graphite); font-weight: 600; }
.readout .k { color: var(--graphite-faint); font-weight: 500; }
.readout .live { color: var(--laser-ink); }

.stage--cursor { cursor: crosshair; }

/* Tiradores arrastrables. El area tactil es mayor que el circulo visible. */
.handle { cursor: grab; touch-action: none; }
.handle:active { cursor: grabbing; }
.handle circle.hit { fill: transparent; }
.handle circle.knob {
  fill: var(--surface);
  stroke: var(--laser);
  /* SIN stroke-width: el modulo lo pasa en unidades de usuario del SVG (30
     sobre un viewBox en milimetros). Fijarlo en px aqui dejaba el aro en
     0,27 px en pantalla -- y 'unset' es peor, porque cae a 1 px. */
  transition: r 0.12s var(--ease);
}
.handle:hover circle.knob, .handle:focus-visible circle.knob { fill: var(--laser-16); }
.handle.is-drag circle.knob { fill: var(--laser); }
.handle circle.core { fill: var(--laser); }

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
}
.toolbar .grow { margin-left: auto; }

.chip {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--graphite-soft);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--line-strong); color: var(--graphite); }
.chip[aria-pressed="true"] {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--paper);
}

/* Geometria dentro de los SVG interactivos */
.g-outline { fill: var(--laser-08); stroke: var(--graphite); stroke-width: 2.5; stroke-linejoin: round; }
.g-outline--open { fill: none; }
.g-cut { fill: var(--paper); stroke: var(--graphite); stroke-width: 1.6; }
.g-hair { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.g-dim { fill: none; stroke: var(--graphite-faint); stroke-width: 1; }
.g-laser { fill: none; stroke: var(--laser); stroke-width: 1.6; }
.g-arc { fill: none; stroke: var(--laser); }
.g-node { fill: var(--graphite); }
/* SIN font-size a proposito: el CSS gana siempre a un atributo de
   presentacion del SVG, asi que fijarlo aqui aplastaba el font-size que cada
   modulo calcula para su viewBox (una etiqueta de 128 unidades acababa
   dibujada a 11 px, o sea 3x1 px en pantalla). El tamano lo pone quien
   dibuja, que es el unico que sabe la escala de su lienzo. */
.g-label {
  font-family: var(--mono);
  font-weight: 600;
  fill: var(--graphite-soft);
}
.g-label--ink { fill: var(--graphite); }
.g-label--laser { fill: var(--laser-ink); }
.g-plate { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }

/* transform-box: fill-box es imprescindible. Sin el, transform-origin:center
   se resuelve contra el viewBox del SVG y no contra el propio elemento, asi
   que la animacion de escala DESPLAZA el reticulo en vez de latir en su
   sitio: acababa dibujado en la esquina del lienzo en lugar de sobre el
   vertice resuelto. */
.reticle {
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .reticle--pulse { animation: pulse 2.2s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.16); }
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 7px;
}
.field .hint {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--graphite-faint);
  margin-top: 6px;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--graphite);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 11px 13px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--graphite-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--laser);
  box-shadow: 0 0 0 3px var(--laser-16);
}
textarea { min-height: 128px; resize: vertical; }
input[type="number"] { font-family: var(--mono); font-weight: 600; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--line-strong);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--laser);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px var(--laser-35);
}
input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--line-strong);
  border-radius: 2px;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--laser);
  border: 2px solid var(--surface);
}

.msg {
  padding: 13px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface-sunken);
  font-size: 0.92rem;
}
.msg--ok { border-color: var(--laser); background: var(--laser-08); }

/* ==========================================================================
   Acordeon (details nativo, sin JS)
   ========================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 19px 2px;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--laser-ink); }
.faq summary .sign {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 5px;
  position: relative;
}
.faq summary .sign::before,
.faq summary .sign::after {
  content: "";
  position: absolute;
  background: var(--laser);
  transition: transform 0.22s var(--ease);
}
.faq summary .sign::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.faq summary .sign::after { top: 0; bottom: 0; left: 7px; width: 1.5px; }
.faq details[open] summary .sign::after { transform: scaleY(0); }
.faq details > div {
  padding: 0 2px 22px 29px;
  color: var(--graphite-soft);
  font-size: 0.96rem;
  max-width: 68ch;
}

/* ==========================================================================
   Comparativa de los dos recorridos
   --------------------------------------------------------------------------
   Antes esto era un deslizador arrastrable que recortaba una de las dos
   columnas con clip-path. Sobre texto no funciona: el corte cae a media
   palabra y en movil las dos columnas se pintan una encima de otra. Un
   deslizador vale para comparar dos imagenes; para comparar dos listas, dos
   columnas y una linea roja en medio dicen lo mismo sin romperse.
   ========================================================================== */

.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.versus__side {
  padding: clamp(22px, 3.5vw, 38px);
  min-width: 0;
}
.versus__side--a { background: var(--surface-sunken); }
.versus__side--b {
  background: var(--surface);
  border-left: 2px solid var(--laser);
}

/* Total de cada recorrido: es el dato que cierra la comparacion. */
.versus__total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
}
.versus__total b { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.versus__total span { font-size: 0.78rem; color: var(--graphite-soft); }
.versus__side--b .versus__total b { color: var(--laser-ink); }

@media (max-width: 700px) {
  .versus { grid-template-columns: 1fr; }
  .versus__side--b { border-left: 0; border-top: 2px solid var(--laser); }
}

/* ==========================================================================
   Precio
   ========================================================================== */

.price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 18px; }
.price b {
  font-family: var(--mono);
  font-size: 2.7rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price span { color: var(--graphite-soft); font-size: 0.92rem; }

.card--feature { border-color: var(--graphite); box-shadow: var(--shadow-md); }
.card--feature .ribbon {
  position: absolute;
  top: -1px;
  right: -1px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  background: var(--graphite);
  color: var(--paper);
  border-bottom-left-radius: var(--radius);
}

/* ==========================================================================
   Pie
   ========================================================================== */

.foot { border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 64px) 0 40px; margin-top: 40px; }
.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}
.foot .logo { height: 22px; width: auto; display: block; margin-bottom: 14px; }
.foot h4 {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-faint);
  margin-bottom: 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot a {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--graphite-soft);
  transition: color 0.15s var(--ease);
}
.foot a:hover { color: var(--laser-ink); }
.foot__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--graphite-faint);
}

/* ==========================================================================
   Aparicion al hacer scroll
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .rise {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .rise.is-in { opacity: 1; transform: none; }
  .rise-2 { transition-delay: 0.08s; }
  .rise-3 { transition-delay: 0.16s; }
  .rise-4 { transition-delay: 0.24s; }
  .rise-5 { transition-delay: 0.32s; }

  /* Trazado de linea: el SVG se "dibuja" como lo haria un plotter. */
  .draw {
    stroke-dasharray: var(--len, 1200);
    stroke-dashoffset: var(--len, 1200);
    transition: stroke-dashoffset 1.5s var(--ease);
  }
  .is-in .draw, .draw.is-in { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.center .lede, .center .section-head { margin-left: auto; margin-right: auto; }
.center .measure { margin-left: auto; margin-right: auto; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; }
.mt-lg { margin-top: clamp(28px, 4vw, 48px); }
.hide { display: none !important; }

/* Franja de material: usa los patrones SVG tileables como fondo. */
.swatch {
  height: 78px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background-repeat: repeat;
  background-size: 120px 120px;
  color: var(--graphite);
}

/* ==========================================================================
   Adaptacion a pantallas
   ========================================================================== */

@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet--4, .sheet--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .split, .split--wide-art { grid-template-columns: 1fr; }
  .split .art { order: -1; }
  .g3, .sheet--3 { grid-template-columns: 1fr; }
  .sheet--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  :root { --gap: 18px; }
  .wrap { padding: 0 18px; }
  body::before { background-size: 64px 64px, 64px 64px; }
  h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .g2, .g4, .sheet--4 { grid-template-columns: 1fr; }
  .sheet--5 { grid-template-columns: 1fr; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .foot__grid { grid-template-columns: 1fr; gap: 26px; }
  .readout { font-size: 0.7rem; gap: 10px; padding: 8px 10px; }
  .price b { font-size: 2.2rem; }
}

/* ==========================================================================
   Impresion: la web es tambien un dossier que un taller puede imprimir.
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; }
  body::before, .topbar, .drawer, .skip, .toolbar, .readout, .versus__handle { display: none !important; }
  .band { background: #fff !important; color: #000 !important; border: 1px solid #000; }
  .band h2, .band p { color: #000 !important; }
  section { padding: 18px 0 !important; break-inside: avoid; }
  .card, .sheet { border-color: #999 !important; box-shadow: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
  .rise { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Piezas concretas de pagina
   ========================================================================== */

/* Barra de lectura dentro del flujo, no flotando sobre el dibujo. */
.readout--flow {
  position: static;
  border-top: 1px solid var(--line);
}

/* Lienzo del laboratorio: touch-action none para que arrastrar un punto en
   movil no haga scroll de la pagina a la vez. */
.lab__svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  touch-action: none;
}

/* El boton de entrar de la barra estorba cuando aparece el menu hamburguesa:
   ya esta dentro del cajon. */
@media (max-width: 860px) {
  .hide-sm { display: none !important; }
}

/* En el visor de acabados, los dos mandos deben poder partir la fila. */
.toolbar label { min-width: 0; }

/* Portada de pagina interior: solo titular y entradilla. Se aprieta a
   proposito para que la pieza interactiva de debajo entre en pantalla sin
   hacer scroll -- es lo que la pagina viene a demostrar. */
.hero--lead { padding-bottom: clamp(16px, 2.2vw, 28px); }
.hero--lead .section-head { margin-bottom: 0; }
.hero--lead h1 { margin-bottom: 14px; }

/* Dos mandos en la misma barra necesitan aire entre ellos: sin esto, el
   valor del primero queda pegado al rotulo del segundo y se leen juntos. */
.toolbar { column-gap: 26px; }
.toolbar > .chip, .toolbar > .pill { margin-right: -18px; }
.toolbar label + label {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}

/* section.tight le ganaba en especificidad a "section + section", asi que
   dos secciones seguidas sumaban los dos rellenos y dejaban un socavon de
   120 px. Se repite la regla al final con la misma fuerza. */
section + section.tight,
section + section.hero { padding-top: 0; }
.hero--lead + section.tight { padding-top: clamp(10px, 1.8vw, 22px); }

/* El visor de secciones de canto es una tira ancha y baja: sin tope, un
   viewBox cuadrado se estira a 600 px de alto y deja el dibujo perdido en
   medio de un descampado. */
[data-edge-view] svg { max-height: 340px; margin: 0 auto; }

/* En tema oscuro la banda quedaba a 1,08:1 contra la pagina: el borde era
   invisible y la seccion parecia flotar sin caja. */
:root[data-theme="dark"] .band,
:root:not([data-theme="light"]) .band { border: 1px solid var(--line); }

/* Los SVG incrustados por el compilador son elementos en linea, no <img>:
   sin esto arrastran el hueco de la linea base y se descuadran del sitio
   donde estaba la imagen. */
.cadm-asset { display: block; height: auto; }


/* ==========================================================================
   Correcciones de contraste y de objetivo tactil
   ========================================================================== */

/* El rojo de marca sobre blanco da 3,70:1 y el minimo para texto es 4,5:1.
   No se toca --laser (es la marca): el boton usa una version mas oscura solo
   como fondo, y el rojo de marca sigue mandando en aros, cotas y acentos. */
:root { --laser-btn: #D2201C; }
:root[data-theme="dark"],
:root:not([data-theme="light"]) { --laser-btn: #E6221E; }

.btn--primary { background: var(--laser-btn); }

/* El numero de paso y los distintivos en mono iban en --laser sobre blanco:
   mismo problema, y aqui el texto es pequeno. --laser-ink da 6,28:1. */
.card__n { color: var(--laser-ink); }

/* En una barra de herramientas los controles se pulsan con el pulgar. */
@media (max-width: 860px) {
  .toolbar .chip,
  .toolbar button { min-height: 44px; }
  .toolbar input[type="range"] { height: 44px; }
}



/* ==========================================================================
   Idiomas dentro del cajon del menu movil
   ========================================================================== */

.drawer__langs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.drawer__langs a {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--graphite-soft);
}
.drawer__langs a[aria-current="true"] {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--paper);
}

/* ==========================================================================
   Filas de clave/valor en pantalla estrecha
   --------------------------------------------------------------------------
   La fila de .spec era un flex con la clave a flex:none y el valor alineado
   a la derecha: no podia encogerse. En espanol entraba por los pelos, pero
   en frances y portugues los valores son mas largos y la fila se salia del
   ancho de la pantalla (hasta 55 px de desborde horizontal en la pagina de
   tarifas). Ademas una direccion de correo es un token que no parte solo.
   A partir de aqui la clave puede encoger, el valor parte palabra si hace
   falta, y por debajo de 560 px la fila se apila: la guia de puntos sobra
   cuando el valor va debajo de su clave.
   ========================================================================== */

.spec dt { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
.spec dd { min-width: 0; overflow-wrap: break-word; }
.spec .fill { min-width: 0; }
.spec a { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .spec div { flex-wrap: wrap; row-gap: 2px; }
  .spec .fill { display: none; }
  .spec dd {
    flex: 1 1 100%;
    margin-left: 0;
    text-align: left;
    color: var(--graphite);
  }
}


/* El interrogante de la tarifa es la cifra de la tarjeta: se dimensiona como
   un precio, no como un signo de puntuacion perdido en medio. */
.price b.price__q {
  font-size: clamp(3.4rem, 7vw, 4.6rem);
  line-height: 0.9;
  color: var(--graphite);
}


/* ==========================================================================
   Encabezados que hacen de rotulo
   --------------------------------------------------------------------------
   Tres secciones interactivas no tenian titulo propio, asi que la pagina
   saltaba de h1 a h3 -- mala senal para un buscador y para un lector de
   pantalla. Ahora el titulo que pinta el modulo es el h2 de su seccion, y
   estas reglas le devuelven el aspecto que tenia: en un caso el de un h3
   normal, en el otro el de una etiqueta tecnica.
   ========================================================================== */

h2[data-edge-title],
h2[data-flow-title] {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.008em;
}

h2.eyebrow {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Los controles de la cabecera se pulsan con el pulgar: 36 px se queda corto
   frente al minimo recomendado de 44. */
@media (max-width: 860px) {
  .iconbtn { width: 44px; height: 44px; }
  .langpick > summary { height: 44px; padding: 0 10px 0 11px; }
  .brand { padding: 9px 0; }
}

/* En las secciones interiores la ilustracion va delante del texto en movil,
   porque introduce lo que se explica debajo. En el HERO no: lo primero que
   tiene que leer alguien que llega desde el movil es el titular, no el
   diagrama. Se anula ahi la inversion. */
@media (max-width: 860px) {
  .hero .art { order: 0; }
  .hero__meta { margin-top: 22px; padding-top: 18px; }
}