/* ============================================================
   AUTSECURITY CONSULTING — MAIN STYLESHEET
   ============================================================ */

/* ── VARIABLES ───────────────────────────────────────────── */
:root {
  --bg:          #07090f;
  --bg2:         #0c0f1a;
  --bg-card:     #10131f;
  --bg-card-h:   #151827;
  --red:         #e81c24;
  --red-bright:  #ff2d36;
  --red-dim:     #8a1015;
  --red-glow:    rgba(232,28,36,0.25);
  --red-border:  rgba(232,28,36,0.2);
  --text:        #d0d8f0;
  --text-dim:    #5a6080;
  --text-muted:  #3a405a;
  --white:       #f0f4ff;
  --border:      rgba(232,28,36,0.12);
  --font-h:      'Inter', sans-serif;
  --font-b:      'Inter', sans-serif;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --r:           12px;
  --r-lg:        20px;
}

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

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}

::selection { background: rgba(232,28,36,0.35); color:#fff; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius:3px; }

a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { max-width:100%; display:block; }

/* ── UTILITY ─────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.accent    { color: var(--red); }

.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:8px; border:none;
  font-family:var(--font-b); font-size:.9rem; font-weight:600;
  cursor:pointer; transition:all .3s var(--ease);
  text-decoration:none; white-space:nowrap;
}
.btn-primary {
  background: var(--red);
  color:#fff;
  box-shadow: 0 0 0 rgba(232,28,36,0);
}
.btn-primary:hover {
  background: var(--red-bright);
  transform:translateY(-2px);
  box-shadow: 0 8px 30px var(--red-glow);
}
.btn-glow {
  animation: pulse-red 3s ease-in-out infinite;
}
@keyframes pulse-red {
  0%,100% { box-shadow: 0 0 0 rgba(232,28,36,0.4); }
  50%      { box-shadow: 0 0 22px rgba(232,28,36,0.6), 0 0 45px rgba(232,28,36,0.25); }
}
.btn-ghost {
  background:transparent;
  color:var(--white);
  border:1.5px solid rgba(240,244,255,0.25);
}
.btn-ghost:hover {
  border-color: var(--red);
  color: var(--red);
  transform:translateY(-2px);
}
.btn-block { width:100%; justify-content:center; }

.section { padding: 100px 0; }
.section-dark { background: var(--bg2); }

.section-header {
  text-align:center;
  margin-bottom:64px;
}
.section-header .section-tag {
  display:inline-block;
  font-family:var(--font-h);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--red);
  border:1px solid var(--red-border);
  padding:5px 14px;
  border-radius:40px;
  margin-bottom:16px;
  background: rgba(232,28,36,0.06);
}
.section-header h2 {
  font-family:var(--font-h);
  font-size:clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight:800;
  color: var(--white);
  margin-bottom:16px;
  letter-spacing:-.03em;
}
.section-header p {
  font-size:1.05rem;
  color: var(--text-dim);
  max-width:620px;
  margin:0 auto;
}

/* ── LOADER ──────────────────────────────────────────────── */
#loader {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
#loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }

.loader-inner { text-align:center; }
.loader-brand {
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:32px; gap:2px;
  animation: flicker 1.5s ease-in-out infinite alternate;
}
.loader-brand-main {
  font-family: var(--font-h);
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -.01em;
  text-shadow: 0 0 30px rgba(232,28,36,0.5), 0 0 60px rgba(232,28,36,0.2);
}
.loader-brand-sub {
  font-family: var(--font-h);
  font-size: clamp(.75rem, 2vw, 1.1rem);
  font-weight: 400;
  color: var(--red);
  letter-spacing: .1em;
  text-transform: uppercase;
}
@keyframes flicker {
  from { opacity:.8; filter: drop-shadow(0 0 10px var(--red)); }
  to   { opacity:1;  filter: drop-shadow(0 0 22px var(--red-bright)); }
}
.loader-bar-track {
  width:220px; height:3px;
  background:rgba(232,28,36,0.15);
  border-radius:2px; margin:0 auto 16px; overflow:hidden;
}
.loader-bar {
  height:100%; width:0;
  background: linear-gradient(90deg, var(--red-dim), var(--red-bright));
  border-radius:2px;
  animation: loadbar 2s var(--ease) forwards;
}
@keyframes loadbar { to { width:100%; } }
.loader-text {
  font-family:var(--font-h);
  font-size:.65rem; letter-spacing:.08em;
  color: var(--red); text-transform:uppercase;
}
.loader-dots { animation: dots 1.2s steps(3,end) infinite; }
@keyframes dots {
  0%   { content:''; }
  33%  { content:'.'; }
  66%  { content:'..'; }
  100% { content:'...'; }
}

/* ── NAVBAR ──────────────────────────────────────────────── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(7,9,15,0);
  backdrop-filter:blur(0);
  border-bottom:1px solid transparent;
  transition:all .4s var(--ease);
}
#navbar.scrolled {
  background:rgba(7,9,15,0.9);
  backdrop-filter:blur(12px);
  border-bottom-color: var(--border);
}
.nav-container {
  max-width:1200px; margin:0 auto; padding:0 24px;
  height:70px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-brand { display:flex; align-items:center; text-decoration:none; }
.nav-logo-text {
  font-family: var(--font-h);
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.nav-logo-accent {
  color: var(--red);
  font-weight: 400;
}
.nav-links {
  display:flex; align-items:center; gap:6px;
}
.nav-link {
  font-size:.85rem; font-weight:500; color: var(--text-dim);
  padding:8px 14px; border-radius:6px;
  transition:all .25s var(--ease);
  position:relative;
}
.nav-link::after {
  content:''; position:absolute; bottom:4px; left:14px; right:14px;
  height:1.5px; background:var(--red);
  transform:scaleX(0); transition:transform .25s var(--ease);
}
.nav-link:hover { color:var(--white); }
.nav-link:hover::after { transform:scaleX(1); }
.nav-cta-link {
  font-size:.85rem; font-weight:600; color:var(--red);
  padding:9px 20px; border-radius:7px;
  border:1.5px solid var(--red-border);
  transition:all .25s var(--ease);
}
.nav-cta-link:hover {
  background:var(--red); color:#fff;
  box-shadow: 0 0 18px var(--red-glow);
}
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-toggle span {
  width:24px; height:2px; background:var(--text);
  border-radius:2px; transition:all .3s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── HERO ────────────────────────────────────────────────── */
#hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(232,28,36,0.07) 0%, transparent 70%),
              radial-gradient(ellipse 60% 80% at 10% 80%, rgba(100,10,130,0.06) 0%, transparent 70%),
              var(--bg);
}
#particleCanvas {
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
}
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(135deg, rgba(7,9,15,0.5) 0%, rgba(7,9,15,0.1) 50%, rgba(7,9,15,0.7) 100%);
}
.hero-content {
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; padding:120px 24px 80px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.hero-left { display:flex; flex-direction:column; gap:20px; }

.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-h); font-size:.6rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-dim);
  border:1px solid var(--border);
  padding:7px 16px; border-radius:40px;
  background:rgba(232,28,36,0.05);
  width:fit-content;
}
.badge-pulse {
  width:8px; height:8px; border-radius:50%;
  background:var(--red);
  box-shadow: 0 0 0 0 rgba(232,28,36,0.6);
  animation: badge-blink 2s ease-in-out infinite;
}
@keyframes badge-blink {
  0%   { box-shadow: 0 0 0 0 rgba(232,28,36,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(232,28,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,28,36,0); }
}

.hero-title {
  font-family:var(--font-h);
  font-size:clamp(2.2rem, 5vw, 4rem);
  font-weight:900; line-height:1.05;
  color:var(--white);
  letter-spacing:-.03em;
}
.hero-sub-title {
  font-family:var(--font-h);
  font-size:clamp(1rem, 2.5vw, 1.9rem);
  font-weight:300; color:var(--red);
  letter-spacing:.02em;
}

/* Glitch Effect */
.glitch {
  position:relative; display:inline-block;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position:absolute; top:0; left:0; width:100%; height:100%;
  font-family:inherit; font-size:inherit; font-weight:inherit;
  color:inherit;
}
.glitch::before {
  clip-path: polygon(0 0,100% 0,100% 35%,0 35%);
  transform: translate(-3px);
  animation: glitch-top 4s infinite 1s;
  color: #ff0040;
}
.glitch::after {
  clip-path: polygon(0 65%,100% 65%,100% 100%,0 100%);
  transform: translate(3px);
  animation: glitch-bot 4s infinite 1s;
  color: #00d4ff;
}
@keyframes glitch-top {
  0%,92%,100% { transform:translate(0); opacity:0; }
  94%         { transform:translate(-4px,1px); opacity:.9; }
  96%         { transform:translate(4px,-1px); opacity:.9; }
  98%         { transform:translate(0); opacity:0; }
}
@keyframes glitch-bot {
  0%,92%,100% { transform:translate(0); opacity:0; }
  94%         { transform:translate(4px,-1px); opacity:.9; }
  96%         { transform:translate(-4px,1px); opacity:.9; }
  98%         { transform:translate(0); opacity:0; }
}

.hero-typewriter {
  font-size:1.1rem; color:var(--red); font-weight:500;
  min-height:1.7em;
}
.tw-cursor {
  color:var(--red);
  animation: blink-cursor .75s steps(1) infinite;
}
@keyframes blink-cursor { 50% { opacity:0; } }

.hero-description {
  font-size:1rem; color:var(--text-dim); max-width:520px; line-height:1.75;
}

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

.hero-stats {
  display:flex; align-items:center; gap:20px; padding-top:10px;
}
.hstat { text-align:center; }
.hstat span {
  font-family:var(--font-h); font-size:1.5rem; font-weight:800; color:var(--red);
  display:block;
}
.hstat p { font-size:.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.hstat-div { width:1px; height:36px; background:var(--border); }

/* ── CYBER LOCK ──────────────────────────────────────────── */
.cyber-lock {
  width:220px; height:220px; border-radius:50%;
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at center,
    rgba(232,28,36,0.14) 0%,
    rgba(12,15,26,0.92) 55%,
    rgba(7,9,15,0.98) 100%);
  border:1.5px solid rgba(232,28,36,0.25);
  box-shadow:
    0 0 0 1px rgba(232,28,36,0.1),
    inset 0 0 40px rgba(232,28,36,0.06);
  animation: float 6s ease-in-out infinite;
  flex-shrink:0;
}

/* anillo interior pulsante */
.cyber-lock-ring {
  position:absolute; inset:12px; border-radius:50%;
  border:1px solid rgba(232,28,36,0.15);
  animation: lock-ring-pulse 3s ease-in-out infinite;
}
@keyframes lock-ring-pulse {
  0%,100% { border-color:rgba(232,28,36,0.12); transform:scale(1); }
  50%      { border-color:rgba(232,28,36,0.35); transform:scale(1.04); }
}

/* ícono candado */
.cyber-lock-icon {
  font-size:72px;
  color:var(--red);
  position:relative; z-index:2;
  filter:
    drop-shadow(0 0 8px rgba(232,28,36,0.9))
    drop-shadow(0 0 22px rgba(232,28,36,0.5))
    drop-shadow(0 0 50px rgba(232,28,36,0.2));
  animation: lock-glow 2.8s ease-in-out infinite;
}
@keyframes lock-glow {
  0%,100% {
    filter:
      drop-shadow(0 0 6px rgba(232,28,36,0.8))
      drop-shadow(0 0 18px rgba(232,28,36,0.4));
    transform: scale(1);
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(232,28,36,1))
      drop-shadow(0 0 38px rgba(232,28,36,0.75))
      drop-shadow(0 0 70px rgba(232,28,36,0.3));
    transform: scale(1.06);
  }
}

/* líneas de circuito */
.cyber-circuits { position:absolute; inset:0; border-radius:50%; }
.cc {
  position:absolute;
  background: linear-gradient(to var(--dir, right), var(--red), transparent);
  opacity:.55;
}
/* líneas cardinales */
.cc-top    { width:1.5px; height:28px; top:0;   left:50%; transform:translateX(-50%); --dir:bottom; background:linear-gradient(to bottom,transparent,var(--red)); }
.cc-bottom { width:1.5px; height:28px; bottom:0; left:50%; transform:translateX(-50%); --dir:top;    background:linear-gradient(to top,transparent,var(--red)); }
.cc-right  { height:1.5px; width:28px; right:0;  top:50%;  transform:translateY(-50%); --dir:left;   background:linear-gradient(to left,transparent,var(--red)); }
.cc-left   { height:1.5px; width:28px; left:0;   top:50%;  transform:translateY(-50%); --dir:right;  background:linear-gradient(to right,transparent,var(--red)); }
/* líneas diagonales */
.cc-tl { width:1px; height:22px; top:22px;    left:22px;          transform:rotate(45deg);  background:linear-gradient(to bottom,transparent,rgba(232,28,36,.5)); }
.cc-tr { width:1px; height:22px; top:22px;    right:22px;         transform:rotate(-45deg); background:linear-gradient(to bottom,transparent,rgba(232,28,36,.5)); }
.cc-bl { width:1px; height:22px; bottom:22px; left:22px;          transform:rotate(-45deg); background:linear-gradient(to top,transparent,rgba(232,28,36,.5)); }
.cc-br { width:1px; height:22px; bottom:22px; right:22px;         transform:rotate(45deg);  background:linear-gradient(to top,transparent,rgba(232,28,36,.5)); }

/* nodos (puntos) al final de líneas */
.cc-node {
  position:absolute;
  width:5px; height:5px; border-radius:50%;
  background:var(--red);
  box-shadow: 0 0 6px var(--red), 0 0 12px rgba(232,28,36,0.5);
  animation: node-blink 2.8s ease-in-out infinite;
}
.n-top    { top:24px;    left:50%; transform:translateX(-50%); animation-delay:.0s; }
.n-right  { right:24px;  top:50%;  transform:translateY(-50%); animation-delay:.7s; }
.n-bottom { bottom:24px; left:50%; transform:translateX(-50%); animation-delay:1.4s; }
.n-left   { left:24px;   top:50%;  transform:translateY(-50%); animation-delay:2.1s; }
@keyframes node-blink {
  0%,100% { opacity:.4; transform:translateX(-50%) scale(1); }
  50%     { opacity:1;   transform:translateX(-50%) scale(1.5); }
}
.n-right.cc-node  { animation-name: node-blink-y; }
.n-left.cc-node   { animation-name: node-blink-y; animation-delay:2.1s; }
@keyframes node-blink-y {
  0%,100% { opacity:.4; transform:translateY(-50%) scale(1); }
  50%     { opacity:1;   transform:translateY(-50%) scale(1.5); }
}

/* badge de estado */
.cyber-status {
  position:absolute; bottom:-28px; left:50%; transform:translateX(-50%);
  font-family:var(--font-h); font-size:.5rem; font-weight:700;
  letter-spacing:.1em; color:rgba(232,28,36,0.7); white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.cs-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--red);
  box-shadow: 0 0 6px var(--red);
  animation: badge-blink 2s ease-in-out infinite;
}

/* Hero Right — logo portada con anillos */
.hero-right { display:flex; justify-content:center; align-items:center; }
.hero-img-frame {
  position:relative; width:360px; height:360px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero-portada {
  width:220px; height:220px; object-fit:contain; object-position:center; border-radius:50%;
  position:relative; z-index:3;
  filter: drop-shadow(0 0 30px rgba(232,28,36,0.5));
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-14px); }
}
.hero-img-ring {
  position:absolute; border-radius:50%; border:1px solid;
  animation: spin-ring linear infinite;
}
.ring-1 {
  width:265px; height:265px;
  border-color: rgba(232,28,36,0.35);
  animation-duration:15s;
  border-top-color:var(--red);
}
.ring-2 {
  width:305px; height:305px;
  border-color: rgba(232,28,36,0.15);
  animation-duration:25s; animation-direction:reverse;
  border-right-color: rgba(232,28,36,0.5);
}
.ring-3 {
  width:345px; height:345px;
  border-color: rgba(232,28,36,0.07);
  animation-duration:35s;
  border-bottom-color: rgba(232,28,36,0.3);
}
@keyframes spin-ring { to { transform:rotate(360deg); } }

.hero-scan-line {
  position:absolute; width:90%; height:2px; z-index:4;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: scan 4s linear infinite;
}
@keyframes scan {
  0%   { top:10%; opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:.6; }
  100% { top:90%; opacity:0; }
}

.scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:bounce-hint 2s ease-in-out infinite;
}
@keyframes bounce-hint {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(-6px); }
}
.scroll-mouse {
  width:22px; height:36px; border:1.5px solid rgba(232,28,36,0.4);
  border-radius:12px; display:flex; justify-content:center; padding:5px;
}
.scroll-dot {
  width:4px; height:8px; background:var(--red);
  border-radius:2px; animation:scroll-d 1.8s ease-in-out infinite;
}
@keyframes scroll-d {
  0%   { transform:translateY(0); opacity:1; }
  100% { transform:translateY(14px); opacity:0; }
}
.scroll-hint span { font-size:.65rem; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; }

/* ── SECTORES ─────────────────────────────────────────────── */
.sectores-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:24px;
}
.sector-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px 24px;
  transition:all .35s var(--ease);
  position:relative; overflow:hidden;
}
.sector-card::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at top left, rgba(232,28,36,0.06), transparent 70%);
  opacity:0; transition:opacity .35s;
}
.sector-card:hover {
  border-color: rgba(232,28,36,0.5);
  transform:translateY(-6px);
  box-shadow: 0 16px 40px rgba(232,28,36,0.12), 0 0 0 1px rgba(232,28,36,0.15);
}
.sector-card:hover::before { opacity:1; }

.sector-icon-wrap {
  width:54px; height:54px; border-radius:14px;
  background:rgba(232,28,36,0.1);
  border:1px solid var(--red-border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.sector-icon-wrap i { font-size:1.4rem; color:var(--red); }
.sector-card h3 {
  font-family:var(--font-h); font-size:.95rem; font-weight:700;
  color:var(--white); margin-bottom:10px;
}
.sector-card p { font-size:.85rem; color:var(--text-dim); line-height:1.65; margin-bottom:16px; }
.sector-tags { display:flex; flex-wrap:wrap; gap:6px; }
.sector-tags span {
  font-size:.65rem; font-weight:600; letter-spacing:.06em;
  color:var(--red); border:1px solid var(--red-border);
  padding:3px 10px; border-radius:20px;
  background:rgba(232,28,36,0.05);
}

/* ── SERVICIOS ────────────────────────────────────────────── */
.servicios-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:24px;
}
.service-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px 28px;
  transition:all .35s var(--ease);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.service-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--red-dim), var(--red-bright));
  transform:scaleX(0); transition:transform .35s var(--ease);
  transform-origin:left;
}
.service-card:hover {
  border-color:rgba(232,28,36,0.4);
  transform:translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,28,36,0.12);
}
.service-card:hover::after { transform:scaleX(1); }

.svc-icon-wrap {
  width:60px; height:60px; border-radius:16px;
  background:rgba(232,28,36,0.1);
  border:1px solid var(--red-border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  transition:all .3s var(--ease);
}
.service-card:hover .svc-icon-wrap {
  background:rgba(232,28,36,0.18);
  box-shadow: 0 0 18px rgba(232,28,36,0.25);
}
.svc-icon-wrap i { font-size:1.5rem; color:var(--red); }
.service-card h3 {
  font-family:var(--font-h); font-size:1rem; font-weight:700;
  color:var(--white); margin-bottom:12px;
}
.service-card > p { font-size:.88rem; color:var(--text-dim); line-height:1.7; margin-bottom:20px; }
.svc-features {
  display:flex; flex-direction:column; gap:8px; margin-bottom:24px; flex:1;
}
.svc-features li {
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; color:var(--text-dim);
}
.svc-features li i { color:var(--red); font-size:.7rem; flex-shrink:0; }
.svc-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:600; color:var(--red);
  transition:gap .25s var(--ease);
  margin-top:auto;
}
.svc-link:hover { gap:14px; }

/* ── FRAMEWORKS ───────────────────────────────────────────── */
.fw-tabs { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }

.fw-tab-buttons {
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.fw-tab-btn {
  font-family:var(--font-b); font-size:.8rem; font-weight:600;
  color:var(--text-dim); background:none; border:none;
  padding:14px 20px; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:all .25s var(--ease); white-space:nowrap;
}
.fw-tab-btn:hover { color:var(--white); }
.fw-tab-btn.active { color:var(--red); border-bottom-color:var(--red); }

.fw-tab-panel { display:none; padding:32px; }
.fw-tab-panel.active { display:block; }

.fw-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}
.fw-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:24px 20px;
  transition:all .3s var(--ease);
}
.fw-card:hover {
  border-color:rgba(232,28,36,0.35);
  transform:translateY(-3px);
  box-shadow: 0 8px 25px rgba(232,28,36,0.08);
}
.fw-badge {
  display:inline-block; font-family:var(--font-h); font-size:.6rem;
  font-weight:700; letter-spacing:.1em; padding:4px 12px;
  border-radius:20px; margin-bottom:12px; text-transform:uppercase;
}
.fw-badge.owasp   { background:rgba(0,119,200,0.15);  color:#2ea0f0; border:1px solid rgba(0,119,200,0.2);  }
.fw-badge.ptes    { background:rgba(0,200,100,0.1);   color:#00c864; border:1px solid rgba(0,200,100,0.2);  }
.fw-badge.osstmm  { background:rgba(180,80,220,0.1);  color:#c450e8; border:1px solid rgba(180,80,220,0.2); }
.fw-badge.nist    { background:rgba(255,160,0,0.1);   color:#ffb020; border:1px solid rgba(255,160,0,0.2);  }
.fw-badge.iso     { background:rgba(232,28,36,0.1);   color:var(--red); border:1px solid var(--red-border); }
.fw-badge.mitre   { background:rgba(200,30,30,0.12);  color:#ff4040; border:1px solid rgba(200,30,30,0.2);  }

.fw-card h4 {
  font-family:var(--font-h); font-size:.82rem; font-weight:700;
  color:var(--white); margin-bottom:8px;
}
.fw-card p { font-size:.8rem; color:var(--text-dim); line-height:1.6; }

/* ── METODOLOGÍA ──────────────────────────────────────────── */
.timeline {
  display:flex; flex-direction:column;
  position:relative;
  max-width:780px; padding-left:90px;
}
.timeline::before {
  content:''; position:absolute; left:24px; top:10px; bottom:10px; width:2px;
  background: linear-gradient(180deg, transparent, var(--red-dim) 8%, var(--red) 50%, var(--red-dim) 92%, transparent);
}
.tl-item {
  display:flex; align-items:flex-start;
  padding-bottom:52px; position:relative;
}
.tl-item:last-child { padding-bottom:0; }

.tl-side {
  position:absolute; left:-66px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.tl-num {
  font-family:var(--font-h); font-size:.6rem; font-weight:900;
  color:var(--red-dim); letter-spacing:.08em;
}
.tl-icon {
  width:50px; height:50px; border-radius:50%;
  background:var(--bg-card);
  border:2px solid var(--red);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 18px rgba(232,28,36,0.3);
  position:relative; z-index:1;
  transition:all .3s var(--ease);
}
.tl-item:hover .tl-icon {
  box-shadow: 0 0 28px rgba(232,28,36,0.6);
  transform:scale(1.08);
}
.tl-icon i { color:var(--red); font-size:1rem; }

.tl-content { flex:1; }
.tl-content h3 {
  font-family:var(--font-h); font-size:1rem; font-weight:700;
  color:var(--white); margin-bottom:10px;
}
.tl-content p { font-size:.87rem; color:var(--text-dim); line-height:1.75; }

/* ── WHY US ───────────────────────────────────────────────── */
.stats-row {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px; margin-bottom:60px;
}
.stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px 20px;
  text-align:center; transition:all .35s var(--ease);
}
.stat-card:hover {
  border-color:rgba(232,28,36,0.45);
  box-shadow: 0 0 30px rgba(232,28,36,0.1);
  transform:translateY(-4px);
}
.stat-icon { margin-bottom:14px; }
.stat-icon i { font-size:1.8rem; color:var(--red); }
.stat-num-wrap {
  display:flex; justify-content:center; align-items:baseline; gap:3px;
  margin-bottom:8px;
}
.stat-num {
  font-family:var(--font-h); font-size:2.4rem; font-weight:900; color:var(--white);
}
.stat-sym { font-family:var(--font-h); font-size:1.4rem; font-weight:700; color:var(--red); }
.stat-card p { font-size:.8rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }

.diff-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.diff-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:28px 24px;
  transition:all .35s var(--ease);
}
.diff-card:hover {
  border-color:rgba(232,28,36,0.35);
  transform:translateY(-4px);
  box-shadow: 0 12px 30px rgba(232,28,36,0.08);
}
.diff-card i { font-size:1.4rem; color:var(--red); margin-bottom:14px; display:block; }
.diff-card h4 {
  font-family:var(--font-h); font-size:.82rem; font-weight:700;
  color:var(--white); margin-bottom:10px;
}
.diff-card p { font-size:.83rem; color:var(--text-dim); line-height:1.65; }

/* ── CONTACTO ─────────────────────────────────────────────── */
.contact-layout {
  display:grid; grid-template-columns:1fr 1.5fr; gap:50px; align-items:start;
}
.contact-info h3 {
  font-family:var(--font-h); font-size:1.2rem; color:var(--white); margin-bottom:12px;
}
.contact-info > p { font-size:.9rem; color:var(--text-dim); margin-bottom:32px; line-height:1.7; }

.contact-items { display:flex; flex-direction:column; gap:20px; margin-bottom:28px; }
.contact-item { display:flex; align-items:flex-start; gap:16px; }
.ci-icon {
  width:42px; height:42px; flex-shrink:0; border-radius:10px;
  background:rgba(232,28,36,0.08); border:1px solid var(--red-border);
  display:flex; align-items:center; justify-content:center;
}
.ci-icon i { color:var(--red); font-size:.9rem; }
.contact-item span { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); display:block; margin-bottom:3px; }
.contact-item p { font-size:.9rem; color:var(--text); }

.contact-social { display:flex; gap:10px; margin-bottom:28px; }
.contact-social a {
  width:40px; height:40px; border-radius:10px;
  background:var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:.9rem;
  transition:all .25s var(--ease);
}
.contact-social a:hover {
  border-color:var(--red); color:var(--red);
  box-shadow: 0 0 12px rgba(232,28,36,0.2);
}
.contact-nda {
  display:flex; align-items:flex-start; gap:12px;
  background:rgba(232,28,36,0.05); border:1px solid var(--red-border);
  border-radius:var(--r); padding:14px 16px;
}
.contact-nda i { color:var(--red); margin-top:2px; flex-shrink:0; }
.contact-nda p { font-size:.8rem; color:var(--text-dim); line-height:1.5; }

.contact-form-box {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.form-field:last-of-type { margin-bottom:20px; }
.form-field label { font-size:.75rem; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.form-field input,
.form-field select,
.form-field textarea {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:8px; padding:11px 14px;
  color:var(--white); font-family:var(--font-b); font-size:.88rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  outline:none; resize:none;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color:var(--text-muted); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color:var(--red);
  box-shadow: 0 0 0 3px rgba(232,28,36,0.12);
}
.form-field select option { background:var(--bg2); }
.form-msg { margin-top:14px; font-size:.85rem; text-align:center; min-height:20px; }
.form-msg.success { color:#2ecc71; }
.form-msg.error   { color:var(--red); }

/* ── FOOTER ───────────────────────────────────────────────── */
#footer {
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:70px 0 0;
}
.footer-inner {
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px;
  padding-bottom:60px;
}
.footer-brand-text {
  display:flex; flex-direction:column; gap:1px;
  margin-bottom:14px;
}
.footer-brand-main {
  font-family: var(--font-h);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -.01em;
}
.footer-brand-sub {
  font-family: var(--font-h);
  font-size: .6rem;
  font-weight: 400;
  color: var(--red);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer-brand > p { font-size:.85rem; color:var(--text-dim); margin-bottom:4px; }
.footer-motto { font-style:italic; color:var(--text-muted) !important; font-size:.8rem !important; }

.footer-col h4 {
  font-family:var(--font-h); font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); margin-bottom:18px;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a {
  font-size:.83rem; color:var(--text-dim);
  transition:color .2s;
}
.footer-col ul li a:hover { color:var(--red); }

.footer-badges { display:flex; flex-wrap:wrap; gap:8px; }
.footer-badges span {
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); border:1px solid var(--text-muted);
  padding:3px 10px; border-radius:20px;
  transition:all .2s;
}
.footer-badges span:hover { color:var(--red); border-color:var(--red-border); }

.footer-bottom {
  border-top:1px solid var(--border); padding:22px 24px;
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-bottom p { font-size:.78rem; color:var(--text-muted); }

/* ── FLOATING CTA ─────────────────────────────────────────── */
.floating-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: #fff;
  padding: 14px 22px;
  border-radius: 50px;
  font-family: var(--font-b);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(232,28,36,0.45);
  animation: pulse-red 3s ease-in-out infinite;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.floating-cta:hover {
  background: var(--red-bright);
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(232,28,36,0.65);
}
.floating-cta i { font-size: 1rem; flex-shrink: 0; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .diff-grid { grid-template-columns:repeat(2,1fr); }
  .stats-row { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 900px) {
  .hero-content { grid-template-columns:1fr; gap:40px; padding-top:100px; }
  .hero-right { order:-1; }
  .hero-img-frame { width:260px; height:260px; }
  .cyber-lock { width:160px; height:160px; }
  .cyber-lock-icon { font-size:52px; }
  .ring-1 { width:195px; height:195px; }
  .ring-2 { width:228px; height:228px; }
  .ring-3 { width:260px; height:260px; }
  .timeline { padding-left:70px; }
  .tl-side { left:-48px; }
  .tl-icon { width:42px; height:42px; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .contact-layout { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  .section { padding:70px 0; }
  .nav-links { display:none; flex-direction:column; gap:0; position:fixed; top:70px; left:0; right:0; background:rgba(7,9,15,0.98); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:16px 0; }
  .nav-links.open { display:flex; }
  .nav-links li { width:100%; }
  .nav-link, .nav-cta-link { display:block; padding:14px 24px; border-radius:0; font-size:.9rem; }
  .nav-toggle { display:flex; }
  .servicios-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .diff-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:30px; }
  .footer-bottom { flex-direction:column; gap:6px; text-align:center; }
  .fw-tab-buttons { overflow-x:auto; flex-wrap:nowrap; }
  .fw-tab-btn { flex-shrink:0; }
}

@media (max-width: 480px) {
  .hero-stats { flex-direction:column; gap:12px; }
  .hstat-div { width:60px; height:1px; }
  .sectores-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr; }
  .loader-logo { width:240px; }
  .timeline { padding-left:58px; }
  .tl-side { left:-38px; }
  .tl-icon { width:36px; height:36px; }
  .tl-icon i { font-size:.8rem; }
  .floating-cta span { display:none; }
  .floating-cta { padding:16px; border-radius:50%; bottom:20px; right:20px; }
}