@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2-variations"),
       url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2-variations"),
       url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  /* Paleta base — exacta:
       Carbón #191919 (gris) · Bermejo #D22C21 (rojo) · Negro #000000 · Blanco #FFFFFF */
  --color-bg: #191919;
  --color-bg-soft: #262626;
  --color-panel: #000000;
  --color-panel-2: #141414;
  --color-text: #FFFFFF;
  --color-muted: #B8B8B8;
  --color-muted-2: #7C7C7C;
  --color-red: #D22C21;        /* Bermejo (HSL 3°, 73%, 48%) */
  --color-red-hover: #E24F46;  /* Bermejo aclarado a L≈58% */
  --color-red-dark: #9B1F18;   /* Bermejo oscurecido a L≈35% */
  --color-border: #3A3A3A;
  --color-border-soft: rgba(255, 255, 255, 0.08);
  --shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.35);
  --shadow-red: 0 0 44px rgba(210, 44, 33, 0.16);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --max-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Compensa la barra fija al saltar a un ancla. Las secciones ya tienen
     padding superior propio, así que basta un valor pequeño para que el
     título quede justo debajo de la barra y no oculto tras ella */
  scroll-padding-top: 40px;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(210, 44, 33, 0.045), transparent 30%),
    radial-gradient(circle at 90% 5%, rgba(210, 44, 33, 0.025), transparent 26%),
    linear-gradient(180deg, #202020 0%, var(--color-bg) 44%, #171717 100%);
  color: var(--color-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 82%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.20), transparent 30%, rgba(0, 0, 0, 0.24));
  pointer-events: none;
}

a {
  color: var(--color-red);
  text-decoration: none;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--color-red-hover);
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
  display: block;
}

.container {
  width: min(var(--max-width), calc(100% - 40px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-red);
  color: #fff;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.84);
  border-bottom: 1px solid var(--color-border-soft);
  backdrop-filter: blur(16px);
}

.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.035em;
  font-size: 1.08rem;
}

.brand:hover {
  color: #fff;
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: 36px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  color: var(--color-text);
  font-size: 0.94rem;
  font-weight: 700;
}

.nav-links a:hover {
  color: var(--color-red-hover);
  text-decoration: none;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background-color: var(--color-red);
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(210, 44, 33, 0.22);
}

.nav-cta:hover {
  background-color: var(--color-red);
  color: #fff !important;
}

.menu-button {
  display: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
}

.hero {
  position: relative;
  padding: 72px 0 52px;
}

.hero-grid {
  position: relative;
  display: block;
}

.hero-grid::after {
  content: "";
  display: block;
  clear: both;
}

.hero-copy {
  display: block;
}

.hero-copy::before {
  content: "";
  float: right;
  width: min(520px, 46%);
  height: 500px;
  margin-top: 40px;
  margin-left: 58px;
  margin-bottom: 18px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--color-red);
  box-shadow: 0 0 18px rgba(210, 44, 33, 0.8);
}

h1,
h2,
h3 {
  margin: 0;
  color: #fff;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

h1 {
  max-width: 850px;
  font-size: clamp(3.05rem, 7.3vw, 5.35rem);
}

.hero h1 {
  max-width: none;
}

/* Efecto máquina de escribir del Hero (OpenSource / Privada / Auditable) */
.typewriter {
  display: inline-block;
  min-height: 1em;
  vertical-align: top;
  border-right: 2px solid var(--color-red);
  padding-right: 2px;
  white-space: nowrap;
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 50% { border-color: var(--color-red); }
  50.01%, 100% { border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter { animation: none; border-right: 0; padding-right: 0; }
}

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

h2 {
  max-width: 800px;
  font-size: clamp(2.35rem, 5vw, 4.25rem);
}

h3 {
  font-size: 1.28rem;
  letter-spacing: -0.035em;
}

.red {
  color: var(--color-red);
  text-shadow: 0 0 30px rgba(210, 44, 33, 0.20);
}

.lead {
  max-width: 710px;
  margin: 24px 0 0;
  color: #D7D7D7;
  font-size: clamp(1.04rem, 2vw, 1.28rem);
}

.hero .lead {
  max-width: none;
  width: 100%;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 850;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.button-primary {
  background-color: var(--color-red);
  color: #fff;
  box-shadow: 0 16px 32px rgba(210, 44, 33, 0.23);
}

.button-primary:hover {
  background-color: var(--color-red);
  color: #fff;
}

.button-secondary {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-color: var(--color-border);
}

.button-secondary:hover {
  color: #fff;
  border-color: var(--color-red);
  background: rgba(210, 44, 33, 0.08);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.hero-trust li {
  padding: 8px 11px;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-muted);
  font-size: 0.86rem;
}

.visual-card {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    var(--color-panel);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.hero .visual-card {
  position: absolute;
  top: 40px;
  right: 0;
  width: min(520px, 46%);
  margin: 0;
}

.visual-card::before {
  content: "";
  position: absolute;
  inset: -120px -120px auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(210, 44, 33, 0.24), transparent 66%);
  pointer-events: none;
}

.terminal {
  padding: 18px;
}

.terminal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-muted-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
}

.dots {
  display: flex;
  gap: 7px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #707070;
}

.dot:nth-child(1) {
  background: var(--color-red);
}

.dot:nth-child(2) {
  background: #707070;
}

.dot:nth-child(3) {
  background: #A0A0A0;
}

.terminal-body {
  margin: 0;
  padding: 18px 2px 0;
  color: #eaeaea;
  font-family: "DejaVu Sans Mono", "Liberation Mono", Consolas, "Courier New", monospace;
  font-size: clamp(0.8rem, 1.35vw, 0.93rem);
  line-height: 1.52;
  font-variant-ligatures: none;
}

.prompt-block {
  position: relative;
  margin: 0 0 8px;
  padding-left: 22px;
}

.prompt-block + .prompt-block {
  margin-top: 8px;
}

.prompt-block.prompt-spaced {
  margin-top: 8px;
}

.prompt-block::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 12px;
  height: 1.52em;
  border-left: 2px solid #D8D8D8;
  border-top: 2px solid #D8D8D8;
  border-bottom: 2px solid #D8D8D8;
}

.prompt-line {
  display: block;
  min-height: 1.52em;
}

.terminal-body .root,
.terminal-body .cwd {
  color: var(--color-red);
  font-weight: 850;
}

.terminal-body .user {
  color: #707070;
  font-weight: 850;
}

.terminal-body .command {
  color: #eaeaea;
}

.terminal-body .output {
  margin: 0;
  line-height: 1.52;
}

.terminal-body .ok {
  color: #f2f2f2;
}

.terminal-body .muted {
  color: #858585;
}

/* Animación de la terminal del Hero: las órdenes se teclean y, al ejecutarse,
   aparecen sus líneas de salida. Solo se ejecuta con JS activo y cuando el
   usuario no ha pedido reducir el movimiento; en cualquier otro caso la
   terminal se muestra completa y estática. */
@media (prefers-reduced-motion: no-preference) {
  .js .terminal-body .prompt-block,
  .js .terminal-body .output-group {
    display: none;
  }

  .js .terminal-body .prompt-block.is-active,
  .js .terminal-body .output-group.is-active {
    display: block;
  }
}

/* Cursor de bloque parpadeante mientras se teclea una orden */
.terminal-body .command {
  transition: opacity 0.1s ease;
}

.terminal-body .command.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--color-red);
  animation: term-caret 1s steps(1) infinite;
}

@keyframes term-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Parpadeo final de la última orden (ospal): sus líneas se atenúan y vuelven */
.terminal-body .prompt-block.is-flash-off .command {
  opacity: 0.12;
}

.mini-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 18px 18px;
}

.metric {
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.metric strong {
  display: block;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.1;
}

.metric span {
  color: var(--color-muted-2);
  font-size: 0.78rem;
}

.section {
  padding: 60px 0;
}

.section-tight {
  padding-top: 8px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}

.section-head p {
  max-width: 540px;
  margin: 0;
  color: var(--color-muted);
}

.section-head-stacked {
  display: block;
}

.section-head-stacked h2 {
  width: 100%;
  max-width: none;
}

.section-head-stacked p {
  max-width: none;
  margin-top: 16px;
}

.intro-panel {
  padding: 34px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(210, 44, 33, 0.08), transparent 34%),
    var(--color-panel);
  box-shadow: var(--shadow-soft);
}

.intro-panel p {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #D8D8D8;
  font-size: 1.08rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Las 4 cajas aparecen una tras otra al entrar en pantalla (efecto Parrot OS) */
.js .cards.reveal-ready .card {
  opacity: 0;
  transform: scale(0.5);
}

.cards.is-revealed .card {
  animation: card-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--card-order, 0) * 0.1s);
}

.card:nth-child(2) { --card-order: 1; }
.card:nth-child(3) { --card-order: 2; }
.card:nth-child(4) { --card-order: 3; }

@keyframes card-reveal {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .js .cards.reveal-ready .card { opacity: 1; transform: none; }
  .cards.is-revealed .card { animation: none; }
}

.card {
  position: relative;
  min-height: 260px;
  padding: 26px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--color-panel);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  inset: auto 24px 0 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(210, 44, 33, 0.86), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.card:hover::after {
  opacity: 1;
}

.card h3 {
  max-width: 100%;
  margin: 0 auto 4px;
  /* Mismo color, fuente y tamaño que los títulos de las tecnologías (los h3 de
     ".tech-link h3"): blanco, fuente Inter heredada, tamaño base de h3 (1.28rem)
     e interletraje -0.035em. Sin recuadro rojo de fondo. */
  color: #fff;
  letter-spacing: -0.035em;
  text-align: center;
}

.card p {
  margin: 14px 0 0;
  color: var(--color-muted);
}

.card ul {
  margin: 16px 0 0;
  padding-left: 18px;
  color: var(--color-muted);
}

.card li + li {
  margin-top: 7px;
}

.card a {
  display: inline-flex;
  margin-top: 18px;
  font-weight: 850;
}

.black-band {
  position: relative;
  padding: 54px 0;
  background:
    linear-gradient(90deg, rgba(210, 44, 33, 0.08), transparent 28%, rgba(210, 44, 33, 0.05)),
    #0A0A0A;
  border-block: 1px solid var(--color-border-soft);
  overflow: hidden;
}

.black-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}

.value-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.value-item {
  --order: 0;
  position: relative;
  min-height: 280px;
  padding: 18px 24px 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  background: rgba(255, 255, 255, 0.035);
}

.value-item:nth-child(2) { --order: 1; }
.value-item:nth-child(3) { --order: 2; }
.value-item:nth-child(4) { --order: 3; }
.value-item:nth-child(5) { --order: 4; }
.value-item:nth-child(6) { --order: 5; }

/* Borde rojo que se traza alrededor de cada caja, una tras otra */
.value-item::before,
.value-item::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-radius: var(--radius-md);
  box-sizing: border-box;
  pointer-events: none;
}

.value-item::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
}

.value-item::after {
  right: -1px;
  bottom: -1px;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
}

.value-grid.is-drawn .value-item::before {
  animation: draw-top-right 0.6s ease forwards;
  animation-delay: calc(var(--order) * 0.22s);
}

.value-grid.is-drawn .value-item::after {
  animation: draw-bottom-left 0.6s ease forwards;
  animation-delay: calc(var(--order) * 0.22s);
}

@keyframes draw-top-right {
  0%   { width: 0;    height: 0;    border-top-color: var(--color-red); border-right-color: transparent; }
  50%  { width: 100%; height: 0;    border-top-color: var(--color-red); border-right-color: var(--color-red); }
  100% { width: 100%; height: 100%; border-top-color: var(--color-red); border-right-color: var(--color-red); }
}

@keyframes draw-bottom-left {
  0%   { width: 0;    height: 0;    border-bottom-color: var(--color-red); border-left-color: transparent; }
  50%  { width: 100%; height: 0;    border-bottom-color: var(--color-red); border-left-color: var(--color-red); }
  100% { width: 100%; height: 100%; border-bottom-color: var(--color-red); border-left-color: var(--color-red); }
}

@media (prefers-reduced-motion: reduce) {
  .value-grid.is-drawn .value-item::before,
  .value-grid.is-drawn .value-item::after {
    animation: none;
    width: 100%;
    height: 100%;
  }
  .value-grid.is-drawn .value-item::before {
    border-top-color: var(--color-red);
    border-right-color: var(--color-red);
  }
  .value-grid.is-drawn .value-item::after {
    border-bottom-color: var(--color-red);
    border-left-color: var(--color-red);
  }
}

.value-item strong {
  display: block;
  color: #fff;
  /* Misma tipografía y color que los títulos de las tecnologías (los h3 de
     ".tech-link h3"): tamaño, interletraje e interlineado idénticos, y
     centrados dentro de su caja. */
  font-size: 1.28rem;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-align: center;
  margin-bottom: 18px;
}

.value-item p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.96rem;
}

.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 28px;
  align-items: stretch;
}

.panel {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.panel-inner {
  padding: 32px;
}

.panel p {
  color: var(--color-muted);
}

.capabilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.capabilities li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: #E6E6E6;
}

.capabilities li::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 14px rgba(210, 44, 33, 0.75);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.product {
  padding: 24px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    #101010;
}

.product-type {
  display: inline-flex;
  margin-bottom: 16px;
  border: 1px solid rgba(210, 44, 33, 0.30);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--color-red-hover);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.product p {
  margin: 12px 0 0;
  color: var(--color-muted);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.tech {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 220px;
  padding: 28px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    #101010;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
  text-align: center;
  position: relative;
}

/* Revelado tipo "escáner": una línea roja recorre cada caja de arriba a
   abajo descubriéndola, escalonadas al entrar en pantalla */
.js .tech-grid.reveal-ready .tech {
  opacity: 0;
  clip-path: inset(0 0 100% 0 round var(--radius-md));
}

.tech-grid.is-revealed .tech {
  animation: tech-scan 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--tech-order, 0) * 0.08s);
}

.tech-grid .tech::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-red), transparent);
  box-shadow: 0 0 14px 2px rgba(210, 44, 33, 0.65);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.tech-grid.is-revealed .tech::before {
  animation: tech-scan-line 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--tech-order, 0) * 0.08s);
}

.tech-grid .tech:nth-child(1)  { --tech-order: 0; }
.tech-grid .tech:nth-child(2)  { --tech-order: 1; }
.tech-grid .tech:nth-child(3)  { --tech-order: 2; }
.tech-grid .tech:nth-child(4)  { --tech-order: 3; }
.tech-grid .tech:nth-child(5)  { --tech-order: 4; }
.tech-grid .tech:nth-child(6)  { --tech-order: 5; }
.tech-grid .tech:nth-child(7)  { --tech-order: 6; }
.tech-grid .tech:nth-child(8)  { --tech-order: 7; }
.tech-grid .tech:nth-child(9)  { --tech-order: 8; }
.tech-grid .tech:nth-child(10) { --tech-order: 9; }
.tech-grid .tech:nth-child(11) { --tech-order: 10; }
.tech-grid .tech:nth-child(12) { --tech-order: 11; }

@keyframes tech-scan {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0 round var(--radius-md)); }
  1%   { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0 round var(--radius-md)); }
}

@keyframes tech-scan-line {
  0%   { top: 0;    opacity: 0; }
  10%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .tech-grid.reveal-ready .tech { opacity: 1; clip-path: none; }
  .tech-grid.is-revealed .tech,
  .tech-grid.is-revealed .tech::before { animation: none; }
  .tech-grid .tech::before { display: none; }
}

.tech-logo {
  display: block;
  width: 64px;
  height: 92px;
  object-fit: contain;
  margin: 0 auto 26px;
  filter: drop-shadow(0 0 22px rgba(210, 44, 33, 0.22));
}

.tech-logo-suricata {
  width: 70px;
}

.tech-logo-zeek {
  width: 130px;
}

.tech-logo-secot {
  width: 86px;
}

.tech-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.tech-link h3 {
  transition: color 0.2s ease;
}

.tech-link:hover h3,
.tech-link:focus-visible h3 {
  color: var(--color-red);
}

/* OpenMediaVault dispone de una versión abreviada (OMV) de su nombre que solo
   se muestra en la vista móvil. */
.tech-name-short {
  display: none;
}

.tech p {
  margin: 12px 0 0;
  color: var(--color-muted);
}

.report {
  height: 100%;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--color-panel);
}

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--color-border-soft);
}

.severity {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(210, 44, 33, 0.14);
  color: var(--color-red-hover);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.finding {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.finding:last-child {
  border-bottom: 0;
}

.finding-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 850;
}

.finding p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.94rem;
}

.tag {
  display: inline-flex;
  border: 1px solid rgba(210, 44, 33, 0.28);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--color-red-hover);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  white-space: nowrap;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.post {
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  background: #101010;
}

.post time,
.post .category {
  color: var(--color-muted-2);
  font-size: 0.86rem;
}

.post h3 {
  margin-top: 10px;
}

.post p {
  color: var(--color-muted);
}

.cta {
  position: relative;
  padding: 58px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 80% 20%, rgba(210, 44, 33, 0.20), transparent 28%),
    linear-gradient(135deg, #0A0A0A, #171717 56%, #000000);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-soft);
}

/* La caja de contacto se despliega desde el centro hacia los lados */
.js .cta.reveal-ready {
  opacity: 0;
  clip-path: inset(0 50% 0 50% round var(--radius-lg));
}

.cta.is-revealed {
  animation: cta-unfold 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cta-unfold {
  0%   { opacity: 0; clip-path: inset(0 50% 0 50% round var(--radius-lg)); }
  1%   { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0 round var(--radius-lg)); }
}

@media (prefers-reduced-motion: reduce) {
  .js .cta.reveal-ready { opacity: 1; clip-path: none; }
  .cta.is-revealed { animation: none; }
}

.cta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
}

/* El botón de contacto se ajusta al ancho de su contenido (la dirección de
   correo más el relleno lateral) y no se estira a todo el ancho de la celda.
   Cuando la fila pasa a una sola columna en pantallas estrechas, queda
   centrado horizontalmente. */
.cta-row .button {
  justify-self: center;
}

.cta h2 {
  font-size: clamp(2.03rem, 4.6vw, 3.93rem);
}

.cta p {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--color-muted);
}

footer {
  padding: 38px 0;
  border-top: 1px solid var(--color-border-soft);
  background: #000000;
  color: var(--color-muted-2);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--color-muted);
}



@media (max-width: 1180px) {
  .hero-copy::before {
    display: none;
  }

  /* La tarjeta debe ser «relative» (no «static») para seguir siendo el bloque
     contenedor de su glow decorativo «.visual-card::before» (que es absolute).
     Si fuera «static», el glow se anclaría al viewport, escaparía del
     «overflow: hidden» de la tarjeta y sobresaldría ~106 px por la derecha,
     provocando desbordamiento horizontal en móvil (la franja vacía visible al
     hacer pinch-zoom). «relative» sin desplazamientos no altera el flujo. */
  .hero .visual-card {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin-top: 34px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 26px;
  }
}

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

@media (max-width: 980px) {
  .split,
  .cta-row {
    grid-template-columns: 1fr;
  }

  .visual-card {
    max-width: 680px;
  }

  .hero .visual-card {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 34px;
  }

  .cards-3,
  .blog-grid,
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* La rejilla de tecnologías pasa de 4 a 3 columnas (nunca 2 ni 1), de modo
     que se mantengan tres tecnologías por línea también en pantallas estrechas
     y en móviles. */
  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .container {
    width: min(var(--max-width), calc(100% - 28px));
  }

  .nav {
    min-height: 68px;
  }

  .menu-button {
    display: inline-flex;
  }

  .nav-links {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 78px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: #000000;
    box-shadow: var(--shadow-soft);
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    display: block;
    padding: 12px;
    border-radius: 12px;
  }

  .nav-cta {
    border-radius: 12px;
  }

  .hero {
    padding: 48px 0 36px;
  }

  /* En móviles y ventanas estrechas escalamos el título del hero con el ancho
     de la pantalla (vw) para que "Ciberseguridad" —la palabra más larga— llegue
     casi hasta el borde derecho sin cortarse. El título queda en dos líneas
     ("Sistemas, IA y" / "Ciberseguridad") más la palabra del efecto máquina de
     escribir.
     Medido con la fuente Inter a peso 700 y letter-spacing -0.055em: ~13.3vw es
     el límite exacto en el que "Ciberseguridad" toca el borde; usamos 13.0vw
     para dejar un pequeño margen de seguridad y que no se corte.
     El tope de 5.1rem (se alcanza hacia ~628px de ancho) evita que el título
     siga creciendo sin control en las ventanas más amplias de este rango. */
  .hero h1 {
    font-size: clamp(2.2rem, 13.0vw, 5.1rem);
  }

  .section {
    padding: 44px 0;
  }

  .section-head {
    display: block;
  }

  .section-head p {
    margin-top: 16px;
  }

  /* En la vista móvil igualamos el tamaño de los títulos de las secciones de
     servicios ("Cuatro áreas de soluciones") y de tecnologías ("Tecnologías
     implementadas") al de la sección de contacto ("Cuéntanos qué necesitas"),
     que usa una escala ligeramente menor que el resto de los h2. */
  #servicios h2,
  #tecnologias h2 {
    font-size: clamp(2.03rem, 4.6vw, 3.93rem);
  }

  .cards,
  .cards-3,
  .blog-grid,
  .value-grid,
  .product-grid,
  .capabilities,
  .mini-dashboard {
    grid-template-columns: 1fr;
  }

  /* En móviles mantenemos las tres tecnologías por línea, pero reducimos el
     tamaño de las cajas, los logos, las tipografías y el espaciado para que
     quepan con holgura sin descender nunca a dos ni a una sola por línea.
     Además ocultamos las descripciones: solo se muestran el logo y el título. */
  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .tech {
    min-height: auto;
    padding: 16px 10px;
  }

  .tech-logo {
    width: 44px;
    height: 60px;
    margin: 0 auto 14px;
  }

  .tech-logo-suricata {
    width: 48px;
  }

  .tech-logo-zeek {
    width: 88px;
  }

  .tech-logo-secot {
    width: 58px;
  }

  .tech-link h3 {
    font-size: 0.95rem;
  }

  /* En móvil mostramos el nombre abreviado (OMV) en lugar del completo para
     que el título quepa en la caja más pequeña. */
  .tech-name-full {
    display: none;
  }

  .tech-name-short {
    display: inline;
  }

  .tech p {
    display: none;
  }

  .card {
    min-height: auto;
  }

  .cta {
    padding: 30px;
  }
}