/* Landthor — primitivas compartidas. Depende de assets/tokens.css.

   El boton tenia seis definiciones distintas repartidas entre landing.css,
   header.css y estilos en linea de la home, con cuatro paddings y cuatro
   tamanos de letra para el mismo componente. Aqui hay una sola, con
   variantes. header.css conserva la suya a proposito: la cabecera no depende
   de los tokens de la pagina que la aloja, para que sea identica en todas. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.2;
  padding: 16px 30px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0d00;               /* 14.5:1 sobre el naranja; #fff daba 2.26:1 */
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

/* Secundario sobre papel */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-2px);
}

/* Secundario sobre la banda --accent-soft del cierre */
.btn--ghost-soft {
  background: transparent;
  color: var(--ink);
  border-color: rgba(41, 56, 70, 0.25);
}
.btn--ghost-soft:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-2px);
}

/* Invertido, para bandas oscuras */
.btn--invert {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--invert:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0d00;
}

.btn--sm { font-size: var(--fs-sm); padding: 11px 20px; }
.btn--lg { font-size: var(--fs-lg); padding: 18px 34px; }

/* --- Antetitulo --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow--on-ink { color: var(--accent-on-ink); }

/* --- Enlace de texto --- */
.link {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.link:hover { color: var(--accent-2); border-bottom-color: currentColor; }

/* Apagado, para el pie */
.link--muted { color: var(--warm); }
.link--muted:hover { color: var(--accent-ink); }

/* --- Tarjetas de rejilla a hueso, con borde compartido --- */
.card {
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px;
  background: var(--paper);
  padding: 36px 30px;
  transition: background var(--dur) ease;
}
.card:hover { background: var(--paper-2); }
.card--on-ink {
  border-color: var(--on-ink-line);
  background: var(--ink);
}
.card--on-ink:hover { background: var(--ink-2); }

/* --- Accesibilidad --- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-size: var(--fs-md);
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* --- Banda de logotipos del stack (home). Estaba duplicada byte a byte
   entre el <style> de la home y landing.css, donde ademas no la usaba nadie. --- */
.lt-stack-section{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);overflow:hidden;}
.lt-stack-shell{max-width:1240px;margin:0 auto;padding:24px 32px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:38px;}
.lt-stack-label{font-family:var(--font-mono);font-size:var(--fs-3xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--warm);white-space:nowrap;}
.lt-logo-marquee{min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.lt-logo-track{display:flex;width:max-content;animation:lt-marquee 28s linear infinite;will-change:transform;}
.lt-logo-group{display:flex;align-items:center;gap:52px;padding-right:52px;}
.lt-logo-item{width:92px;flex:0 0 92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.lt-logo-mark{width:42px;height:38px;object-fit:contain;display:block;}
.lt-logo-name{font-family:var(--font-mono);font-size:var(--fs-3xs);color:var(--warm);white-space:nowrap;}

/* --- CIERRE DE CONTACTO ---------------------------------------------------
   Estaba centrado sobre una banda crema, con dos botones: en el punto de
   maxima intencion se ofrecia una salida hacia el caso de exito, un destino
   que la pagina ya habia ofrecido dos veces antes. Ahora es una banda oscura
   partida en dos, con un solo destino y con lo que pasa despues escrito, que
   es la objecion real de quien no conoce a la empresa.
   No hay formulario porque no hay servicio de formularios contratado ni
   pagina de privacidad publicada, y montar uno sin base juridica seria peor
   que el mailto. Se dice en la propia seccion en lugar de disimularlo. */
.lt-contact { position: relative; z-index: 2; background: var(--ink); color: var(--on-ink); border-top: 1px solid var(--line); }
.lt-contact-grid { max-width: var(--maxw); margin: 0 auto; padding: clamp(72px,9vh,104px) var(--gutter); display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(40px,5vw,80px); align-items: start; }
.lt-contact-copy { grid-column: 1 / 7; }
.lt-contact-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.015em; margin: 0 0 18px; text-wrap: balance; }
.lt-contact-lead { font-size: var(--fs-lg); color: var(--on-ink-soft); margin: 0 0 36px; max-width: 46ch; text-wrap: pretty; }
.lt-contact-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--on-ink-line); }
.lt-contact-steps li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--on-ink-line); }
.lt-contact-steps .n { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.12em; color: var(--accent-on-ink); padding-top: 3px; }
.lt-contact-steps strong { display: block; font-weight: 600; font-size: var(--fs-base); margin-bottom: 3px; }
.lt-contact-steps p { margin: 0; font-size: var(--fs-sm); color: var(--on-ink-mute); text-wrap: pretty; }

.lt-contact-action { grid-column: 8 / 13; border-left: 1px solid var(--on-ink-line); padding-left: clamp(28px,3vw,48px); }
.lt-contact-label { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-mute); margin: 0 0 12px; }
.lt-contact-mail { display: inline-block; font-family: var(--font-serif); font-size: clamp(1.35rem,1.4vw + 0.9rem,1.9rem); color: var(--on-ink); text-decoration: none; border-bottom: 1px solid var(--on-ink-line); padding-bottom: 2px; margin-bottom: 28px; transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; overflow-wrap: anywhere; }
.lt-contact-mail:hover { color: var(--accent-on-ink); border-bottom-color: var(--accent-on-ink); }
.lt-contact-action .btn { width: 100%; }
.lt-contact-sla { font-size: var(--fs-sm); color: var(--on-ink-soft); margin: 16px 0 0; }
.lt-contact-note { font-size: var(--fs-sm); color: var(--on-ink-mute); margin: 14px 0 0; text-wrap: pretty; }

@media (max-width: 900px) {
  .lt-contact-grid { grid-template-columns: 1fr; gap: 40px; padding: 64px var(--gutter); }
  .lt-contact-copy, .lt-contact-action { grid-column: 1 / -1; }
  .lt-contact-action { border-left: 0; border-top: 1px solid var(--on-ink-line); padding-left: 0; padding-top: 32px; }
}