@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;
}

.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 {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 4px;
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(210, 44, 33, 0.10);
  border: 1px solid rgba(210, 44, 33, 0.26);
  color: var(--color-red-hover);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 900;
  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;
  font-size: 1.08rem;
  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);
}

.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;
  }

  .hero .visual-card {
    position: static;
    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,
  .tech-grid {
    grid-template-columns: repeat(2, 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,
  .tech-grid,
  .capabilities,
  .mini-dashboard {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: auto;
  }

  .cta {
    padding: 30px;
  }
}