/* ─────────────────────────────────────────
   ROOT  &  RESET
───────────────────────────────────────── */
:root {
  /* Backgrounds — dark charcoal palette */
  --bg-base:       #1c1c1e;
  --bg-raised:     #242426;
  --bg-card:       #2a2a2d;
  --bg-card-hover: #303035;
  --bg-overlay:    rgba(28,28,30,0.92);

  /* Blue gradient — NO purple anywhere */
  --blue-0:   #00183a;
  --blue-1:   #003880;
  --blue-2:   #0057c2;
  --blue-3:   #1a7fe8;
  --blue-4:   #4da3ff;
  --blue-5:   #a8d0ff;

  /* Single icon/accent colour */
  --accent:   #4da3ff;

  /* Text */
  --text-hi:   #f4f4f5;
  --text-med:  #a1a1aa;
  --text-lo:   #52525b;

  /* Borders */
  --border:   rgba(255,255,255,0.07);
  --border-hi:rgba(77,163,255,0.28);

  /* Status */
  --green: #22c55e;
  --amber: #f59e0b;
  --red:   #ef4444;

  /* Typography — Helvetica Neue system stack */
  --font-display: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  /* Misc */
  --radius:   6px;
  --radius-lg:12px;
  --ease:     cubic-bezier(.22,1,.36,1);
  --shadow-card: 0 2px 20px rgba(0,0,0,.55);
  --shadow-glow: 0 0 40px rgba(77,163,255,.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-hi);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* ─────────────────────────────────────────
   NEURAL CANVAS BG
───────────────────────────────────────── */
.canvas-container {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
#neuralCanvas { width: 100%; height: 100%; }

.gradient-overlay {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 75% -10%, rgba(0,87,194,.16) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 110%, rgba(0,56,128,.20) 0%, transparent 70%);
}

/* ─────────────────────────────────────────
   LAYOUT
───────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 2; }
section { padding: 6rem 0; }

.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(77,163,255,.30);
  padding: .3rem .9rem; border-radius: 2px; margin-bottom: 1rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem,3vw,2.6rem);
  font-weight: 300; letter-spacing: -.025em; line-height: 1.15;
  margin-bottom: 1rem;
}
.section-title strong { font-weight: 700; }
.section-desc {
  font-size: 1rem; font-weight: 300; line-height: 1.8;
  color: var(--text-med); max-width: 580px; margin: 0 auto;
}

/* ─────────────────────────────────────────
   GLASS CARD
───────────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius-lg);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.glass-card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-glow);
  transform: translateY(-3px);
}

/* ─────────────────────────────────────────
   OUTLINE ICON SYSTEM  (single colour = --accent)
───────────────────────────────────────── */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ico svg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-box {
  width: 52px; height: 52px;
  border: 1px solid rgba(77,163,255,.25);
  border-radius: var(--radius);
  background: rgba(77,163,255,.05);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.glass-card:hover .ico-box { background: rgba(77,163,255,.10); border-color: rgba(77,163,255,.45); }

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .85rem 2rem; border: none; border-radius: var(--radius);
  cursor: pointer; transition: all .25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue-2) 0%, var(--blue-3) 100%);
  color: #fff;
  box-shadow: 0 4px 24px rgba(26,127,232,.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--blue-3) 0%, var(--blue-4) 100%);
  box-shadow: 0 6px 32px rgba(77,163,255,.45);
  transform: translateY(-2px);
}
.btn-secondary {
  background: transparent; color: var(--text-hi);
  border: 1px solid rgba(255,255,255,.18);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline {
  background: transparent; color: var(--accent);
  border: 1px solid rgba(77,163,255,.45);
}
.btn-outline:hover { background: rgba(77,163,255,.08); border-color: var(--accent); }

/* ─────────────────────────────────────────
   GRADIENT TEXT
───────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--blue-3) 0%, var(--blue-4) 60%, var(--blue-5) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────
   REVEAL ANIMATION
───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.active { opacity: 1; transform: none; }

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
nav { padding: 1.3rem 0; transition: background .3s var(--ease), padding .3s var(--ease); }
nav.scrolled {
  background: var(--bg-overlay);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: .85rem 0;
}
nav .container { display: flex; align-items: center; justify-content: space-between; }

.logo { display: flex; align-items: center; gap: .7rem; }
.logo img { height: 34px; width: auto; object-fit: contain; }
.logo span {
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links li a {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-med); padding: .5rem .85rem;
  transition: color .2s; border-radius: 4px;
}
.nav-links li a:hover { color: var(--text-hi); }

.menu-toggle {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--radius); padding: .4rem .55rem; cursor: pointer; color: var(--text-hi);
}
.menu-toggle svg { stroke: var(--text-hi); }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 9rem 0 5rem; position: relative; overflow: hidden;
}

/* Decorative blurred blobs */
.hero::before {
  content: '';
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,87,194,.22) 0%, transparent 70%);
  top: -120px; right: -100px; pointer-events: none; z-index: 1;
}

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue-5);
  border: 1px solid rgba(168,208,255,.25);
  padding: .35rem 1rem; border-radius: 2px; margin-bottom: 1.5rem;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem,5.5vw,4.4rem);
  font-weight: 300; letter-spacing: -.03em; line-height: 1.08;
  margin-bottom: 1.5rem;
}
.hero-title strong { font-weight: 800; display: block; }

.hero-desc {
  font-size: 1.05rem; font-weight: 300; line-height: 1.85;
  color: var(--text-med); max-width: 460px; margin-bottom: 2.2rem;
}

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

.hero-stats { display: flex; gap: 2.5rem; }
.stat-item h3 {
  font-family: var(--font-display);
  font-size: 2.1rem; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--blue-3), var(--blue-4));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-item p {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-lo);
  margin-top: .3rem;
}

/* Hero visual */
.hero-visual {
  position: relative; height: 480px;
  display: flex; align-items: center; justify-content: center;
}
.visual-sphere {
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(0,87,194,.35) 0%, rgba(0,24,58,.10) 75%);
  border: 1px solid rgba(77,163,255,.18);
  box-shadow: 0 0 90px rgba(26,127,232,.22), 0 0 0 1px rgba(77,163,255,.06);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100%{ box-shadow: 0 0 80px rgba(26,127,232,.2),  0 0 0 1px rgba(77,163,255,.06); }
  50%    { box-shadow: 0 0 130px rgba(77,163,255,.38), 0 0 0 1px rgba(77,163,255,.15); }
}

/* Orbit rings */
.orbit {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(77,163,255,.10);
  pointer-events: none;
  animation: spin linear infinite;
}
.orbit-1 { width: 370px; height: 370px; animation-duration: 18s; }
.orbit-2 { width: 440px; height: 440px; border-style: dashed; opacity: .5; animation-duration: 28s; animation-direction: reverse; }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Hero logo watermark */
.hero-logo-bg {
  position: absolute; right: -20px; bottom: 20px;
  width: 200px; opacity: .04; pointer-events: none; z-index: 0;
}
.hero-logo-bg img { width: 100%; filter: invert(1); }

.visual-card {
  position: absolute; display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.2rem; min-width: 190px; z-index: 5;
}
.visual-card-1 { top: 10%; left: -8%; }
.visual-card-2 { bottom: 12%; right: -8%; }
.vc-info span {
  display: block; font-size: .65rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-lo);
}
.vc-info strong { font-family: var(--font-display); font-size: .82rem; font-weight: 600; }

/* ─────────────────────────────────────────
   SERVICIOS
───────────────────────────────────────── */
.services-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(320px,1fr));
  gap:1.75rem;
  max-width:1000px;
  margin:0 auto;
}
@media(max-width:768px){ .services-grid{ grid-template-columns:1fr; } }

.service-card{
  position:relative;
  overflow:hidden;
  padding:2.5rem;
  min-height:320px;
}
.service-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.035), transparent 42%);
  pointer-events:none;
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .65rem;
}
.service-card > p { font-size: .88rem; color: var(--text-med); margin-bottom: 1.4rem; line-height: 1.75; }
.feat-list { padding: 0; }
.feat-list li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; color: var(--text-lo);
  padding: .42rem 0; border-bottom: 1px solid var(--border);
}
.feat-list li:last-child { border-bottom: none; }
.feat-list li::before {
  content: ''; flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .7;
}

/* ─────────────────────────────────────────
   INTELIGENCIA POLÍTICA
───────────────────────────────────────── */
.politica-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
@media(max-width:900px){ .politica-layout{ grid-template-columns:1fr; } }

.politica-info .section-tag { display: inline-block; margin-bottom: .8rem; }
.politica-info h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem,2.8vw,2.3rem); font-weight: 300; letter-spacing: -.025em;
  margin-bottom: 1.2rem; line-height: 1.2;
}
.politica-info > p { font-size: .95rem; color: var(--text-med); line-height: 1.85; margin-bottom: 2rem; }

.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
@media(max-width:560px){ .pf-grid{ grid-template-columns:1fr; } }

.pf-item {
  padding: 1.2rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.pf-item:hover { border-color: var(--border-hi); }
.pf-item-head {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .5rem;
}
.pf-item h4 {
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
}
.pf-item p { font-size: .78rem; color: var(--text-lo); line-height: 1.65; }

/* Dashboard */
.dashboard-mockup { padding: 1.5rem; font-size: .78rem; }
.dash-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border);
}
.dash-title {
  font-family: var(--font-display); font-size: .65rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.dash-status {
  font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  color: var(--green); border: 1px solid rgba(34,197,94,.28);
  padding: .2rem .6rem; border-radius: 2px;
  animation: blink 2.5s ease-in-out infinite;
}
.dash-grid { display: grid; grid-template-columns:1fr 1fr; gap: .9rem; margin-bottom: 1.1rem; }
.dash-card {
  background: rgba(0,0,0,.22); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
}
.dash-card h4 {
  font-family: var(--font-display); font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-lo); margin-bottom: .55rem;
}
.metric-row { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .65rem; }
.metric-val {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1;
}
.metric-change { font-size: .68rem; font-weight: 600; }
.metric-up { color: var(--green); }
.metric-accent { color: var(--accent); }
.s-bar { height: 5px; border-radius: 3px; overflow: hidden; display: flex; margin-bottom: .55rem; }
.s-bar-pos { background: var(--blue-3); }
.s-bar-neu { background: var(--amber); }
.s-bar-neg { background: var(--red); }
.s-labels { display: flex; justify-content: space-between; font-size: .62rem; color: var(--text-lo); }
.dash-map-title {
  font-family: var(--font-display); font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-lo); margin-bottom: .55rem;
}
.map-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.map-wrap img { width: 100%; opacity: .65; }
.radar-sweep {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 0%, rgba(26,127,232,.22) 15%, transparent 15%);
  animation: sweep 3.5s linear infinite; border-radius: 50%;
}
@keyframes sweep { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.feed-title {
  font-family: var(--font-display); font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-lo);
  margin: 1.1rem 0 .5rem;
}
.feed-list { max-height: 150px; overflow: hidden; }
.feed-item {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: var(--text-med);
  padding: .32rem 0; border-bottom: 1px solid var(--border);
}
.feed-item:last-child { border-bottom: none; }
.feed-time { color: var(--text-lo); flex-shrink: 0; margin-left: .6rem; font-size: .6rem; }

/* ─────────────────────────────────────────
   PORTFOLIO
───────────────────────────────────────── */
.portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-bottom: 2rem; }
@media(max-width:700px){ .portfolio-grid{ grid-template-columns:1fr; } }

.portfolio-card { padding: 1.75rem; display: flex; flex-direction: column; }
.portfolio-tag {
  display: inline-block;
  font-family: var(--font-display); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(77,163,255,.28);
  padding: .22rem .65rem; border-radius: 2px; margin-bottom: .9rem;
  align-self: flex-start;
}
.portfolio-card h3 {
  font-family: var(--font-display); font-size: .98rem; font-weight: 600;
  letter-spacing: -.01em; margin-bottom: .6rem;
}
.portfolio-card p { font-size: .85rem; color: var(--text-med); line-height: 1.75; flex: 1; }
.portfolio-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.portfolio-impact { font-size: .75rem; color: var(--text-lo); display: flex; align-items: center; gap: .4rem; }
.portfolio-link {
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  transition: color .2s; display: flex; align-items: center; gap: .3rem;
}
.portfolio-link:hover { color: var(--blue-5); }

/* Team collaboration banner — realistic treatment */
.collab-banner {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); margin-top: .5rem;
}
.collab-banner img {
  width: 100%; height: 380px; object-fit: cover;
  filter: brightness(.55) saturate(.75) contrast(1.1);
  transition: filter .5s var(--ease);
}
.collab-banner:hover img { filter: brightness(.65) saturate(.85) contrast(1.05); }

/* Film grain overlay for realism */
.collab-banner::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay; pointer-events: none;
}

/* Vignette + colour grade */
.collab-overlay {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to right,  rgba(0,24,58,.72) 0%, rgba(0,24,58,.18) 45%, transparent 70%),
    linear-gradient(to top,    rgba(0,0,0,.55)   0%, transparent 50%);
}

/* Cinematic blue grade strip */
.collab-grade {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(135deg, rgba(0,57,128,.20) 0%, transparent 60%);
  mix-blend-mode: screen;
}

/* Logo badge */
.collab-logo-badge {
  position: absolute; left: 2.5rem; bottom: 2rem; z-index: 6;
  display: flex; align-items: center; gap: 1rem;
}
.collab-logo-badge img {
  height: 44px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.collab-logo-text {
  border-left: 1px solid rgba(255,255,255,.25); padding-left: 1rem;
}
.collab-logo-text em {
  display: block; font-family: var(--font-display); font-style: normal;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(168,208,255,.7); margin-bottom: .2rem;
}
.collab-logo-text strong {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  letter-spacing: .04em; color: #fff;
}

/* Control-room data HUD */
.collab-hud {
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
  z-index: 6; display: flex; flex-direction: column; gap: .5rem;
}
.hud-pill {
  background: rgba(0,24,58,.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(77,163,255,.3); border-radius: 4px;
  padding: .38rem .9rem;
  font-family: var(--font-display); font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.hud-pill span { color: var(--accent); margin-right: .4rem; }
.hud-live { color: var(--green); }

/* Letterbox bars (cinematic) */
.collab-letterbox-top,
.collab-letterbox-bot {
  position: absolute; left: 0; right: 0; z-index: 5;
  height: 22px; background: rgba(0,0,0,.65); pointer-events: none;
}
.collab-letterbox-top { top: 0; }
.collab-letterbox-bot { bottom: 0; }



/* ─────────────────────────────────────────
   STARK-STYLE CONTROL ROOM UPGRADE
   sober holographic overlays + live operations grid
───────────────────────────────────────── */
.collab-banner {
  min-height: 460px;
  background: radial-gradient(circle at 50% 55%, rgba(77,163,255,.12), rgba(3,8,14,.96) 62%);
  box-shadow: 0 28px 90px rgba(0,0,0,.48), inset 0 0 0 1px rgba(168,208,255,.06);
}
.collab-banner > img {
  height: 460px;
  opacity: .34;
  filter: brightness(.42) saturate(.7) contrast(1.18) !important;
}
.stark-control-stage {
  position:absolute; inset:0; z-index:6; pointer-events:none;
  display:grid; grid-template-columns: 1fr minmax(280px, 420px) 1fr;
  align-items:center; gap:1.2rem; padding:4.4rem 2rem 3.6rem;
}
.stark-grid-floor {
  position:absolute; left:8%; right:8%; bottom:22px; height:42%; z-index:1;
  background:
    linear-gradient(rgba(77,163,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,163,255,.14) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(520px) rotateX(68deg);
  transform-origin: bottom center;
  opacity:.32; filter: blur(.15px);
  mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 82%);
}
.stark-core {
  position:relative; width:min(38vw, 360px); aspect-ratio:1; margin:auto; z-index:4;
  border-radius:50%;
  background: radial-gradient(circle, rgba(168,208,255,.16) 0 4%, transparent 5% 100%);
}
.stark-core::before, .stark-core::after { content:''; position:absolute; inset:0; border-radius:50%; }
.stark-core::before {
  border:1px solid rgba(77,163,255,.36);
  box-shadow: 0 0 44px rgba(77,163,255,.18), inset 0 0 34px rgba(77,163,255,.10);
  animation: starkPulse 3.6s ease-in-out infinite;
}
.stark-core::after {
  inset:14%; border:1px dashed rgba(168,208,255,.28);
  animation: starkSpin 15s linear infinite;
}
.stark-ring { position:absolute; inset:24%; border-radius:50%; border:1px solid rgba(77,163,255,.22); animation: starkSpin 10s linear infinite reverse; }
.stark-scan {
  position:absolute; inset:7%; border-radius:50%;
  background: conic-gradient(from 20deg, transparent 0 63%, rgba(77,163,255,.25) 71%, transparent 79% 100%);
  animation: starkSpin 4s linear infinite;
  mix-blend-mode:screen;
}
.stark-core-label {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72%; text-align:center;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em;
}
.stark-core-label b { display:block; font-size:.72rem; color:#fff; margin-bottom:.45rem; }
.stark-core-label span { font-size:.56rem; color:rgba(168,208,255,.72); }
.stark-panel {
  position:relative; z-index:5; padding:1rem;
  border:1px solid rgba(77,163,255,.24); border-radius:12px;
  background:linear-gradient(135deg, rgba(6,16,30,.62), rgba(255,255,255,.045));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
}
.stark-panel::before {
  content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(168,208,255,.12), transparent);
  transform:translateX(-100%); animation: panelSweep 6s ease-in-out infinite;
}
.stark-panel h5 {
  font-family:var(--font-display); font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-5); margin-bottom:.7rem;
}
.stark-metric { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.48rem 0; border-top:1px solid rgba(255,255,255,.06); }
.stark-metric span { font-size:.62rem; color:rgba(255,255,255,.48); letter-spacing:.08em; text-transform:uppercase; }
.stark-metric strong { font-family:var(--font-display); font-size:.82rem; color:#fff; font-weight:600; }
.stark-panel-left { justify-self:end; transform:translateY(-22px); width:min(30vw, 270px); }
.stark-panel-right { justify-self:start; transform:translateY(28px); width:min(32vw, 300px); }
.stark-feed-line { display:flex; gap:.55rem; align-items:flex-start; padding:.42rem 0; border-top:1px solid rgba(255,255,255,.06); font-size:.68rem; color:rgba(255,255,255,.68); line-height:1.45; }
.stark-feed-line i { width:6px; height:6px; margin-top:.35rem; border-radius:50%; background:var(--accent); box-shadow:0 0 14px rgba(77,163,255,.8); flex:0 0 auto; }
.stark-beam { position:absolute; height:1px; background:linear-gradient(90deg, transparent, rgba(77,163,255,.48), transparent); transform-origin:center; opacity:.5; z-index:3; }
.stark-beam.b1 { width:34%; left:23%; top:36%; transform:rotate(-14deg); }
.stark-beam.b2 { width:32%; right:20%; top:61%; transform:rotate(12deg); }
.stark-beam.b3 { width:26%; left:36%; bottom:25%; transform:rotate(2deg); opacity:.32; }
@keyframes starkSpin { to { transform:rotate(360deg); } }
@keyframes starkPulse { 0%,100%{ transform:scale(.98); opacity:.72 } 50%{ transform:scale(1.03); opacity:1 } }
@keyframes panelSweep { 0%,70%{ transform:translateX(-110%); } 100%{ transform:translateX(110%); } }
@media(max-width:860px){
  .collab-banner{ min-height:560px; }
  .collab-banner > img{ height:560px; }
  .stark-control-stage{ grid-template-columns:1fr; padding:4.5rem 1.2rem 3.2rem; }
  .stark-panel-left,.stark-panel-right{ width:100%; max-width:360px; justify-self:center; transform:none; }
  .stark-core{ width:260px; order:-1; }
  .stark-beam{ display:none; }
}

/* ─────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; margin-bottom: 3rem; }
@media(max-width:700px){ .testimonials-grid{ grid-template-columns:1fr; } }

.testimonial-card { padding: 2rem; }
.stars {
  font-size: .8rem; letter-spacing: .25em; color: var(--accent);
  margin-bottom: 1rem;
}
.quote {
  font-size: .9rem; font-weight: 300; font-style: italic;
  color: var(--text-med); line-height: 1.85; margin-bottom: 1.5rem;
}
.author strong {
  display: block; font-family: var(--font-display); font-size: .85rem; font-weight: 600;
  margin-bottom: .2rem;
}
.author span { font-size: .75rem; color: var(--text-lo); }

.test-cta { text-align: center; }
.test-cta p { font-size: .98rem; color: var(--text-med); margin-bottom: 1.5rem; }

/* ─────────────────────────────────────────
   TIMELINE  —  full-width parallax image
───────────────────────────────────────── */
#timeline { padding: 0; overflow: hidden; }

/* Full-bleed parallax hero banner */
.tl-parallax {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 520px; position: relative; overflow: hidden;
}
.tl-parallax-img {
  position: absolute; top: -15%; left: 0; right: 0; bottom: -15%;
  width: 100%; height: 130%; object-fit: cover;
  filter: brightness(.28) saturate(.55);
  will-change: transform;
  transition: transform 0s linear;
}

/* Gradient overlays */
.tl-parallax-overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to right, rgba(0,24,58,.82) 0%,  rgba(0,24,58,.45) 45%, transparent 80%),
    linear-gradient(to top,   rgba(0,0,0,.5) 0%,     transparent 50%);
}
.tl-parallax-blue {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(135deg, rgba(0,57,128,.25) 0%, transparent 60%);
  mix-blend-mode: screen;
}

/* Content inside parallax */
.tl-parallax-content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center;
}
.tl-parallax-content .container { width: 100%; }
.tl-hero-text .section-tag { display: inline-block; margin-bottom: 1rem; }
.tl-hero-text h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem,4.5vw,3.8rem); font-weight: 200; letter-spacing: -.03em;
  line-height: 1.1; color: #fff; margin-bottom: 1rem;
}
.tl-hero-text h2 strong { font-weight: 800; display: block; }
.tl-hero-text p {
  font-size: 1rem; font-weight: 300; line-height: 1.8;
  color: rgba(255,255,255,.6); max-width: 480px;
}

/* Manatie logo watermark on parallax */
.tl-logo-wm {
  position: absolute; right: 4%; bottom: 8%; z-index: 6; pointer-events: none;
  opacity: .08;
}
.tl-logo-wm img { height: 110px; filter: invert(1); }

/* Bottom fade into timeline body */
.tl-parallax::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; z-index: 7;
  background: linear-gradient(to bottom, transparent, var(--bg-base));
}

/* Timeline body */
.tl-body { padding: 5rem 0 6rem; }

/* Vertical spine */
.tl-spine { position: relative; max-width: 860px; margin: 0 auto; }
.tl-spine::before {
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(77,163,255,.28) 20%, rgba(77,163,255,.28) 80%, transparent);
  transform: translateX(-50%);
}
.tl-item { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0; margin-bottom: 3.5rem; align-items: start; }
.tl-item:nth-child(odd)  .tl-content { grid-column: 1; grid-row: 1; text-align: right; padding-right: 2.5rem; }
.tl-item:nth-child(odd)  .tl-dot     { grid-column: 2; grid-row: 1; }
.tl-item:nth-child(odd)  .tl-empty   { grid-column: 3; grid-row: 1; }
.tl-item:nth-child(even) .tl-content { grid-column: 3; grid-row: 1; text-align: left; padding-left: 2.5rem; }
.tl-item:nth-child(even) .tl-dot     { grid-column: 2; grid-row: 1; }
.tl-item:nth-child(even) .tl-empty   { grid-column: 1; grid-row: 1; }

.tl-dot {
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 1.6rem;
}
.tl-dot-inner {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue-3); border: 2px solid var(--accent);
  box-shadow: 0 0 14px rgba(77,163,255,.55);
}

.tl-content { padding-top: .85rem; }
.tl-period {
  display: block; font-family: var(--font-display); font-size: .62rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}
.tl-content h3 {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  letter-spacing: -.01em; margin-bottom: .5rem;
}
.tl-content p { font-size: .85rem; color: var(--text-med); line-height: 1.75; margin-bottom: .9rem; }
.tl-list { }
.tl-list li {
  font-size: .78rem; color: var(--text-lo);
  display: flex; align-items: center; gap: .5rem; padding: .3rem 0;
  border-top: 1px solid var(--border);
}
.tl-item:nth-child(odd) .tl-list li { flex-direction: row-reverse; }
.tl-list li::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); opacity: .6; flex-shrink: 0;
}

@media(max-width:700px){
  .tl-spine::before { left: 14px; }
  .tl-item { grid-template-columns: 28px 1fr; }
  .tl-item:nth-child(odd)  .tl-content,
  .tl-item:nth-child(even) .tl-content { grid-column: 2; text-align: left; padding: 0 0 0 1.5rem; }
  .tl-item:nth-child(odd)  .tl-dot,
  .tl-item:nth-child(even) .tl-dot     { grid-column: 1; }
  .tl-item:nth-child(odd)  .tl-empty,
  .tl-item:nth-child(even) .tl-empty   { display: none; }
  .tl-item:nth-child(odd) .tl-list li  { flex-direction: row; }
}

/* ─────────────────────────────────────────
   CONTACT
───────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:2.5rem; } }

.contact-left h3 {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.01em; margin-bottom: .75rem;
}
.contact-left > p { font-size: .88rem; color: var(--text-lo); line-height: 1.8; margin-bottom: 2.2rem; }

.cdetail { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.cdetail:last-of-type { border-bottom: none; }
.cdetail-text h4 {
  font-family: var(--font-display); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-lo); margin-bottom: .3rem;
}
.cdetail-text a, .cdetail-text p {
  font-size: .9rem; color: var(--text-hi);
  transition: color .2s;
}
.cdetail-text a:hover { color: var(--accent); }

.social-label {
  font-family: var(--font-display); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-lo);
  margin: 1.8rem 0 .8rem;
}
.social-row { display: flex; gap: .75rem; }
.social-btn {
  width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.social-btn:hover { border-color: var(--accent); background: rgba(77,163,255,.08); }
.social-btn svg { stroke: var(--text-med); transition: stroke .2s; }
.social-btn:hover svg { stroke: var(--accent); }

.contact-form-wrap { padding: 2.5rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block; font-family: var(--font-display); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-lo); margin-bottom: .5rem;
}
.form-input {
  width: 100%; background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .85rem 1rem;
  font-family: var(--font-body); font-size: .9rem; color: var(--text-hi);
  outline: none; resize: vertical; transition: border-color .2s var(--ease);
}
.form-input::placeholder { color: var(--text-lo); }
.form-input:focus { border-color: rgba(77,163,255,.45); }
textarea.form-input { min-height: 120px; }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border); padding: 4rem 0 2rem;
  background: rgba(0,0,0,.22);
}
.footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
@media(max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:500px){ .footer-top{ grid-template-columns:1fr; } }

.footer-brand .logo { margin-bottom: 1rem; }
.footer-brand p { font-size: .83rem; color: var(--text-lo); line-height: 1.75; max-width: 270px; }

/* Footer logo watermark */
.footer-brand { position: relative; }
.footer-wm {
  position: absolute; right: 0; top: 0;
  opacity: .04; pointer-events: none;
}
.footer-wm img { height: 80px; filter: invert(1); }

.footer-col h4 {
  font-family: var(--font-display); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-med); margin-bottom: 1.1rem;
}
.footer-links li { margin-bottom: .6rem; }
.footer-links a { font-size: .83rem; color: var(--text-lo); transition: color .2s; }
.footer-links a:hover { color: var(--text-hi); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2rem; border-top: 1px solid var(--border);
  font-size: .72rem; color: var(--text-lo); flex-wrap: wrap; gap: .5rem;
}
.footer-bottom-logo { display: flex; align-items: center; gap: .5rem; }
.footer-bottom-logo img { height: 18px; opacity: .35; filter: invert(1); }

/* ─────────────────────────────────────────
   MOBILE NAV DRAWER
───────────────────────────────────────── */
@media(max-width:860px){
  .menu-toggle { display: flex; }
  .nav-links {
    position: fixed; top: 0; right: -100%; bottom: 0; width: 280px;
    background: rgba(28,28,30,.97); backdrop-filter: blur(24px);
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 0; padding: 2rem; border-left: 1px solid var(--border);
    transition: right .35s var(--ease); z-index: 300;
  }
  .nav-links.open { right: 0; }
  .nav-links li { width: 100%; }
  .nav-links li a {
    display: block; padding: .85rem 0; border-bottom: 1px solid var(--border); font-size: .85rem;
  }
  .nav-links li:last-child a,
  .nav-links li:last-child button { margin-top: 1.5rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
}

/* ─────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: rgba(77,163,255,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(77,163,255,.45); }


/* ─────────────────────────────────────────
   VARIANTE PREMIUM IMMERSIVE / PARALLAX
   Conserva textos, logo y tipografía original
───────────────────────────────────────── */
:root{
  --champagne:#d8c49a;
  --champagne-soft:rgba(216,196,154,.48);
  --ink:#0c0d10;
  --glass-lux:rgba(255,255,255,.055);
  --glass-lux-strong:rgba(255,255,255,.09);
  --lux-border:rgba(216,196,154,.22);
}
body{
  background:
    radial-gradient(circle at 20% 5%, rgba(216,196,154,.08), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(77,163,255,.12), transparent 30%),
    linear-gradient(180deg,#111318 0%,#18191d 44%,#0e1014 100%);
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
}
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.immersive-stage{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; perspective:1200px;}
.lux-orb{position:absolute; border-radius:999px; filter:blur(34px); opacity:.68; transform:translate3d(0,0,0); will-change:transform;}
.lux-orb-a{width:360px;height:360px;left:-90px;top:12%;background:radial-gradient(circle, rgba(216,196,154,.18), transparent 67%);}
.lux-orb-b{width:520px;height:520px;right:-160px;top:4%;background:radial-gradient(circle, rgba(77,163,255,.16), transparent 68%);}
.lux-orb-c{width:420px;height:420px;left:50%;bottom:3%;background:radial-gradient(circle, rgba(0,87,194,.11), transparent 72%);}
.gold-line{position:absolute;height:1px;width:44vw;background:linear-gradient(90deg,transparent,var(--champagne-soft),transparent);opacity:.65;will-change:transform;}
.gold-line-a{top:24%;right:4%;transform:rotate(-22deg);}
.gold-line-b{bottom:18%;left:2%;transform:rotate(18deg);}
.gradient-overlay{background:radial-gradient(ellipse 70% 60% at 75% -10%,rgba(77,163,255,.12) 0%,transparent 70%),radial-gradient(ellipse 60% 60% at 12% 105%,rgba(216,196,154,.08) 0%,transparent 70%);}
nav.scrolled{background:rgba(10,12,16,.72);border-bottom:1px solid var(--lux-border);box-shadow:0 18px 60px rgba(0,0,0,.26);}
.logo img{filter:drop-shadow(0 12px 26px rgba(0,0,0,.36));}
.nav-links li a:hover{color:var(--champagne);}
.hero{isolation:isolate;}
.hero::before{background:radial-gradient(circle,rgba(216,196,154,.13) 0%,transparent 70%);transform:translateZ(0);}
.hero::after{content:'';position:absolute;left:50%;top:50%;width:min(80vw,900px);height:min(80vw,900px);border:1px solid rgba(216,196,154,.09);border-radius:999px;transform:translate(-50%,-50%);z-index:1;pointer-events:none;}
.hero-grid{position:relative;z-index:3;}
.hero-badge,.section-tag,.portfolio-tag{border-color:var(--lux-border);color:var(--champagne);background:rgba(216,196,154,.045);backdrop-filter:blur(16px);}
.hero-badge-dot{background:var(--champagne);box-shadow:0 0 18px rgba(216,196,154,.7);}
.hero-title,.section-title,.tl-hero-text h2{letter-spacing:-.055em;}
.gradient-text{background:linear-gradient(135deg,#fff 0%,var(--champagne) 42%,var(--blue-4) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-desc,.section-desc{color:rgba(244,244,245,.72);}
.btn-primary{background:linear-gradient(135deg,#f4e5bb 0%,#b99d62 55%,#6e5a31 100%);color:#111318;box-shadow:0 12px 42px rgba(216,196,154,.22);}
.btn-primary:hover{background:linear-gradient(135deg,#fff0c8 0%,#d8c49a 62%,#9d8248 100%);box-shadow:0 18px 54px rgba(216,196,154,.34);}
.btn-secondary,.btn-outline{border-color:var(--lux-border);color:#f4f4f5;background:rgba(255,255,255,.025);backdrop-filter:blur(14px);}
.btn-secondary:hover,.btn-outline:hover{border-color:rgba(216,196,154,.58);color:var(--champagne);background:rgba(216,196,154,.06);}
.glass-card,.pf-item,.dash-card,.collab-banner,.contact-form-wrap{
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border:1px solid var(--lux-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 28px 90px rgba(0,0,0,.28);
}
.glass-card:hover{border-color:rgba(216,196,154,.46);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 34px 100px rgba(0,0,0,.38),0 0 44px rgba(216,196,154,.1);}
.ico svg{stroke:var(--champagne);}
.ico-box{border-color:var(--lux-border);background:rgba(216,196,154,.045);}
.service-card,.portfolio-card,.testimonial-card,.dashboard-mockup{transform-style:preserve-3d;}
.service-card::before,.portfolio-card::before,.testimonial-card::before,.dashboard-mockup::before,.contact-form-wrap::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 28%,transparent 70%,rgba(216,196,154,.08));
  opacity:.55;
}
.service-card,.portfolio-card,.testimonial-card,.dashboard-mockup,.contact-form-wrap{position:relative;overflow:hidden;}
.visual-sphere{background:radial-gradient(circle at 34% 28%,rgba(216,196,154,.32),rgba(77,163,255,.12) 48%,rgba(0,24,58,.06) 76%);border-color:var(--lux-border);box-shadow:0 0 100px rgba(216,196,154,.14),0 0 120px rgba(26,127,232,.16);}
.orbit{border-color:rgba(216,196,154,.16);}
.visual-card{background:rgba(15,17,22,.58);border-color:var(--lux-border);box-shadow:0 24px 70px rgba(0,0,0,.28);}
.stat-item h3{background:linear-gradient(135deg,#fff,var(--champagne));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
section{position:relative;}
section:not(.hero)::before{content:'';position:absolute;left:50%;top:0;width:min(1120px,calc(100% - 40px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(216,196,154,.18),transparent);}
.collab-banner img,.tl-parallax-img{filter:brightness(.38) saturate(.75) contrast(1.08) sepia(.08);}
.collab-overlay,.tl-parallax-overlay{background:linear-gradient(to right,rgba(12,13,16,.82),rgba(12,13,16,.25) 54%,transparent 86%),linear-gradient(to top,rgba(0,0,0,.72),transparent 58%);}
.tl-dot-inner{background:var(--champagne);border-color:#fff2c5;box-shadow:0 0 18px rgba(216,196,154,.62);}
.footer-bottom-logo img,.footer-wm img,.tl-logo-wm img,.hero-logo-bg img{filter:invert(1) sepia(.15);}
[data-parallax-card]{will-change:transform;transition:transform .12s linear;}
.reveal{transform:translateY(34px) scale(.985);}
.reveal.active{transform:translateY(0) scale(1);}
@media(max-width:860px){.immersive-stage{opacity:.55}.hero::after{width:120vw;height:120vw}.gold-line{display:none}}


/* ─────────────────────────────────────────
   VARIANTE EDITORIAL CON IMÁGENES SOBRIAS
   Imágenes de apoyo: editorial, sobrias, con overlay premium
───────────────────────────────────────── */
.editorial-visual-strip{
  display:grid; grid-template-columns:1.15fr .85fr; gap:1.25rem; margin:0 0 3rem;
}
.editorial-photo,
.editorial-photo-card{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  border:1px solid var(--lux-border);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 32px 100px rgba(0,0,0,.28);
  min-height:260px;
  isolation:isolate;
}
.editorial-photo::before,
.editorial-photo-card::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(120deg,rgba(12,13,16,.84),rgba(12,13,16,.18) 48%,rgba(12,13,16,.66)),
    radial-gradient(circle at 18% 12%,rgba(216,196,154,.18),transparent 34%);
}
.editorial-photo::after,
.editorial-photo-card::after{
  content:'';position:absolute;inset:16px;z-index:3;pointer-events:none;border:1px solid rgba(216,196,154,.16);border-radius:calc(var(--radius-lg) - 4px);
}
.editorial-photo img,
.editorial-photo-card img{
  position:absolute;inset:0;width:100%;height:118%;object-fit:cover;
  filter:brightness(.62) saturate(.72) contrast(1.05) sepia(.08);
  transform:translateY(var(--imgShift,0px)) scale(1.04);
  transition:filter .5s var(--ease),transform .12s linear;
  will-change:transform;
}
.editorial-photo:hover img,
.editorial-photo-card:hover img{filter:brightness(.72) saturate(.84) contrast(1.04) sepia(.05);}
.editorial-photo-content{position:absolute;left:2rem;right:2rem;bottom:1.8rem;z-index:4;}
.editorial-photo-kicker{display:block;font-family:var(--font-display);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);margin-bottom:.55rem;}
.editorial-photo-title{font-family:var(--font-display);font-size:clamp(1.35rem,2.5vw,2.3rem);font-weight:300;letter-spacing:-.04em;line-height:1.12;color:#fff;max-width:560px;}
.editorial-photo-small{min-height:260px;}
.editorial-photo-small .editorial-photo-title{font-size:1.08rem;max-width:300px;}
.editorial-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin:2.25rem 0 0;}
.editorial-photo-card{min-height:360px;}
.editorial-photo-card .editorial-photo-content{bottom:1.5rem;left:1.5rem;right:1.5rem;}
.editorial-photo-card .editorial-photo-title{font-size:1.15rem;}
.editorial-side-image{margin-top:2rem;min-height:320px;}
.portfolio-editorial{margin-bottom:2rem;}
@media(max-width:900px){
  .editorial-visual-strip,.editorial-duo{grid-template-columns:1fr;}
  .editorial-photo,.editorial-photo-card{min-height:300px;}
}
@media(max-width:560px){
  .editorial-photo-content{left:1.25rem;right:1.25rem;bottom:1.25rem;}
  .editorial-photo::after,.editorial-photo-card::after{inset:10px;}
}



/* ─────────────────────────────────────────
   LIVE MEXICO RADAR + CHAT SIMULATION
───────────────────────────────────────── */
.live-intel-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: .9rem;
  margin-top: .8rem;
}
.mexico-radar {
  position: relative;
  min-height: 250px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(77,163,255,.18);
  background:
    radial-gradient(circle at 50% 52%, rgba(77,163,255,.20), transparent 34%),
    linear-gradient(180deg, rgba(0,24,58,.48), rgba(0,0,0,.32));
  box-shadow: inset 0 0 40px rgba(77,163,255,.08);
}
.mexico-radar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(77,163,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,163,255,.065) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 50% 50%, black 0 64%, transparent 82%);
  opacity: .75;
}
.radar-map-svg {
  position: absolute;
  inset: 8% 7% 7%;
  width: 86%;
  height: 85%;
  filter: drop-shadow(0 0 18px rgba(77,163,255,.24));
  opacity: .92;
}
.radar-map-svg path {
  fill: rgba(77,163,255,.08);
  stroke: rgba(168,208,255,.55);
  stroke-width: 1.2;
}
.radar-ring {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(77,163,255,.18);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.radar-ring.r1 { width: 34%; aspect-ratio: 1; }
.radar-ring.r2 { width: 58%; aspect-ratio: 1; }
.radar-ring.r3 { width: 82%; aspect-ratio: 1; }
.radar-sweep-live {
  position: absolute;
  left: 50%; top: 50%;
  width: 86%; aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(77,163,255,.0) 0deg, rgba(77,163,255,.28) 38deg, rgba(77,163,255,.0) 78deg);
  animation: radarSpin 4s linear infinite;
  mix-blend-mode: screen;
}
@keyframes radarSpin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
.radar-blip {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(77,163,255,.55), 0 0 18px rgba(77,163,255,.85);
  animation: blipPulse 2.2s ease-out infinite;
}
.radar-blip::after {
  content: attr(data-label);
  position: absolute;
  left: 12px; top: -7px;
  font-family: var(--font-display);
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,244,245,.72);
  white-space: nowrap;
}
@keyframes blipPulse {
  0% { box-shadow: 0 0 0 0 rgba(77,163,255,.55), 0 0 18px rgba(77,163,255,.85); opacity: 1; }
  75% { box-shadow: 0 0 0 18px rgba(77,163,255,0), 0 0 18px rgba(77,163,255,.6); opacity: .78; }
  100% { box-shadow: 0 0 0 0 rgba(77,163,255,0), 0 0 18px rgba(77,163,255,.85); opacity: 1; }
}
.radar-readout {
  position: absolute;
  left: .9rem; bottom: .8rem; right: .9rem;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  z-index: 4;
}
.readout-pill {
  flex: 1;
  padding: .45rem .55rem;
  border-radius: 4px;
  border: 1px solid rgba(77,163,255,.18);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  font-size: .58rem;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.readout-pill strong { display:block; color: var(--text-hi); font-size:.78rem; letter-spacing:0; margin-top:.12rem; }
.live-chat-panel {
  border: 1px solid rgba(77,163,255,.16);
  background: rgba(255,255,255,.025);
  border-radius: var(--radius);
  padding: .8rem;
  min-height: 250px;
  overflow: hidden;
  position: relative;
}
.live-chat-panel::after {
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:42px;
  background: linear-gradient(to bottom, transparent, rgba(18,18,22,.92));
  pointer-events:none;
}
.chat-head {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.6rem; margin-bottom:.6rem;
  border-bottom:1px solid var(--border);
  font-family:var(--font-display);
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.chat-dot { color: var(--green); animation: blink 1.8s ease-in-out infinite; }
.chat-stream {
  display:flex;
  flex-direction:column;
  gap:.52rem;
  animation: chatFloat 9s linear infinite;
}
@keyframes chatFloat {
  0%, 12% { transform: translateY(0); }
  85%, 100% { transform: translateY(-38px); }
}
.chat-msg {
  padding:.55rem .65rem;
  border-radius: 6px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.055);
  font-size:.67rem;
  line-height:1.45;
  color:var(--text-med);
}
.chat-msg b { color: var(--blue-5); font-weight:600; }
.chat-time { display:block; margin-top:.25rem; color:var(--text-lo); font-size:.56rem; }
@media(max-width:900px){ .live-intel-grid{ grid-template-columns:1fr; } }



/* ─────────────────────────────────────────
   MANATIE HOLOGRAPHIC PLANET — pure HTML/CSS/SVG
───────────────────────────────────────── */
.hero-visual { perspective: 1200px; }
.visual-sphere { display:none; }
.hero-logo-bg { display:none; }
.manatie-planet{
  position:absolute;
  width:min(48vw,560px);
  height:min(48vw,560px);
  min-width:360px; min-height:360px;
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d;
  animation: planetFloat 8s ease-in-out infinite;
}
.planet-aura{
  position:absolute; inset:5%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(77,163,255,.18), rgba(216,196,154,.06) 42%, transparent 68%);
  filter:blur(8px); opacity:.9;
}
.planet-orbit{position:absolute;border-radius:50%;border:1px solid rgba(216,196,154,.18);box-shadow:0 0 45px rgba(77,163,255,.08);}
.planet-orbit-a{inset:3%; animation:planetOrbit 22s linear infinite;}
.planet-orbit-b{inset:12%; border-style:dashed; border-color:rgba(77,163,255,.18); animation:planetOrbit 34s linear infinite reverse;}
.planet-orbit-a::before,.planet-orbit-b::before{
  content:''; position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 18px rgba(77,163,255,.95),0 0 36px rgba(216,196,154,.35);
  top:12%; left:18%;
}
.planet-satellite{position:absolute; width:1px; height:1px; border-radius:50%; background:#d8c49a; box-shadow:0 0 14px 3px rgba(216,196,154,.5); z-index:4;}
.sat-a{top:18%; right:19%; animation:satPulse 3.2s ease-in-out infinite;}
.sat-b{bottom:22%; left:17%; animation:satPulse 4.1s ease-in-out infinite .7s;}
.planet-core{
  position:relative; width:78%; height:78%; border-radius:50%; overflow:hidden;
  border:1px solid rgba(216,196,154,.28);
  background:radial-gradient(circle at 38% 30%, rgba(216,196,154,.13), rgba(8,32,58,.22) 43%, rgba(0,0,0,.25) 78%);
  box-shadow:inset 0 0 80px rgba(0,0,0,.58), inset 0 0 42px rgba(77,163,255,.18), 0 0 95px rgba(77,163,255,.22), 0 0 130px rgba(216,196,154,.10);
}
.planet-core::before{
  content:''; position:absolute; inset:-12%; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(77,163,255,.24) 32deg, rgba(216,196,154,.11) 48deg, transparent 74deg);
  animation:planetSweep 5s linear infinite; mix-blend-mode:screen; z-index:5; pointer-events:none;
}
.planet-core::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(90deg, rgba(255,255,255,.12), transparent 22%, transparent 70%, rgba(0,0,0,.32));
  mix-blend-mode:overlay; pointer-events:none; z-index:6;
}
.planet-radar{position:absolute; inset:13%; border-radius:50%; border:1px solid rgba(77,163,255,.12); z-index:3;}
.planet-radar::before,.planet-radar::after{content:''; position:absolute; inset:16%; border-radius:50%; border:1px solid rgba(216,196,154,.10);}
.planet-radar::after{inset:32%; border-color:rgba(77,163,255,.13);}
.planet-svg{position:absolute; inset:0; width:100%; height:100%; z-index:4; animation:planetRotate 46s linear infinite;}
.planet-grid-lines ellipse{fill:none; stroke:rgba(77,163,255,.25); stroke-width:1;}
.planet-grid-lines ellipse:nth-child(even){stroke:rgba(216,196,154,.18);}
 .planet-contours path{fill:rgba(216,196,154,.075); stroke:rgba(216,196,154,.72); stroke-width:1.05; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(216,196,154,.28));}
.planet-contours .coast-secondary{fill:none; stroke:rgba(77,163,255,.32); stroke-width:.75; opacity:.75;}
.planet-contours .land-glow{fill:rgba(77,163,255,.045); stroke:rgba(216,196,154,.42); stroke-width:.65;}
.planet-city-lights circle{fill:#d8c49a; opacity:.82; filter:drop-shadow(0 0 5px rgba(216,196,154,.95));}
.planet-city-lights circle:nth-child(2n){fill:#4da3ff; opacity:.65;}
.planet-data-lines path{fill:none; stroke:url(#mpGoldLine); stroke-width:1; stroke-dasharray:5 9; opacity:.78; animation:dashFlow 8s linear infinite;}
.planet-nodes circle{fill:#4da3ff; filter:drop-shadow(0 0 5px rgba(77,163,255,.95)); animation:nodeBlink 2.8s ease-in-out infinite;}
.planet-nodes circle:nth-child(2n){fill:#d8c49a; animation-delay:.8s;}
.planet-logo-mark{position:absolute; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; pointer-events:none;}
.planet-logo-mark img{width:42%; max-width:170px; opacity:.055; filter:brightness(1.25) contrast(1.05); transform:translateY(18px);}
.planet-live-tag{
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%); z-index:8;
  font-family:var(--font-display); font-size:.56rem; font-weight:700; letter-spacing:.16em; white-space:nowrap;
  color:rgba(168,208,255,.88); background:rgba(3,9,18,.48); border:1px solid rgba(77,163,255,.22);
  border-radius:999px; padding:.36rem .72rem; backdrop-filter:blur(14px);
}
.planet-live-tag i{display:inline-block; width:6px; height:6px; border-radius:50%; background:#29e6ff; margin-right:.42rem; box-shadow:0 0 12px rgba(41,230,255,.9);}

/* Mexico lineal focus inside holographic planet */
.planet-mexico-focus{opacity:1; filter:drop-shadow(0 0 9px rgba(216,196,154,.82)) drop-shadow(0 0 22px rgba(77,163,255,.36)); transform-origin:250px 250px;}
.planet-mexico-focus .mx-outline{fill:rgba(216,196,154,.018); stroke:#f2ddb2; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:900; stroke-dashoffset:900; animation:mxDraw 5.8s ease-in-out infinite alternate;}
.planet-mexico-focus .mx-inner{fill:none; stroke:rgba(77,163,255,.85); stroke-width:1.05; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:9 8; animation:dashFlow 7s linear infinite;}
.planet-mexico-focus .mx-pulse{fill:#29e6ff; filter:drop-shadow(0 0 7px rgba(41,230,255,.95)); animation:nodeBlink 2s ease-in-out infinite;}
.planet-mexico-focus .mx-label{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.18em;fill:#f2ddb2;opacity:.82;}
.planet-mexico-focus .mx-scan{fill:none; stroke:rgba(41,230,255,.55); stroke-width:1; stroke-dasharray:4 7; animation:dashFlow 5.5s linear infinite;}
@keyframes mxDraw{0%{stroke-dashoffset:900;opacity:.62}55%,100%{stroke-dashoffset:0;opacity:1}}

@keyframes planetFloat{0%,100%{transform:translate3d(0,0,0) rotateX(0deg)}50%{transform:translate3d(0,-14px,0) rotateX(2deg)}}
@keyframes planetOrbit{to{transform:rotate(360deg)}}
@keyframes planetSweep{to{transform:rotate(360deg)}}
@keyframes planetRotate{to{transform:rotate(360deg)}}
@keyframes dashFlow{to{stroke-dashoffset:-90}}
@keyframes nodeBlink{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes satPulse{0%,100%{opacity:.45; transform:scale(.85)}50%{opacity:1; transform:scale(1.25)}}
@media(max-width:860px){.manatie-planet{position:relative; width:360px;height:360px;min-width:300px;min-height:300px;margin:2rem auto 0}.hero-visual{display:flex!important;height:380px!important}}
@media(max-width:520px){.manatie-planet{width:310px;height:310px;min-width:280px;min-height:280px}.planet-live-tag{font-size:.48rem}}



/* FINAL HERO SPHERE — abstract rotating sphere with pulsing intelligence nodes */
.planet-contours,
.planet-mexico-focus,
.planet-city-lights{display:none!important;}
.planet-core{
  background:
    radial-gradient(circle at 35% 28%, rgba(242,221,178,.18), rgba(77,163,255,.09) 38%, rgba(3,15,30,.96) 76%),
    linear-gradient(135deg, rgba(216,196,154,.08), rgba(77,163,255,.06));
  overflow:hidden;
}
.planet-core::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 72% 28%, rgba(242,221,178,.18), transparent 16%),
    radial-gradient(circle at 28% 75%, rgba(77,163,255,.16), transparent 22%),
    linear-gradient(90deg, rgba(0,0,0,.15), transparent 42%, rgba(255,255,255,.045) 55%, rgba(0,0,0,.38));
  z-index:6;
  pointer-events:none;
  mix-blend-mode:screen;
}
.planet-grid-lines{opacity:.95; transform-origin:250px 250px; animation:planetRotate 38s linear infinite;}
.planet-grid-lines ellipse{stroke-width:1.15!important; stroke:rgba(77,163,255,.30)!important;}
.planet-grid-lines ellipse:nth-child(2n){stroke:rgba(216,196,154,.20)!important;}
.planet-data-lines path{stroke-width:1.15!important; opacity:.58!important;}
.planet-nodes circle{animation:nodeBlink 2s ease-in-out infinite;}
.planet-nodes circle:nth-child(3n){animation-delay:.4s;}
.planet-nodes circle:nth-child(4n){animation-delay:.9s;}
.planet-pulse-field{position:absolute; inset:0; z-index:8; border-radius:50%; pointer-events:none; animation:pulseFieldRotate 42s linear infinite;}
.pulse-node{position:absolute; width:7px; height:7px; border-radius:50%; background:#4da3ff; box-shadow:0 0 12px rgba(77,163,255,.95),0 0 28px rgba(77,163,255,.35); animation:softPulse 2.7s ease-in-out infinite;}
.pulse-node.gold{background:#d8c49a; box-shadow:0 0 12px rgba(216,196,154,.95),0 0 30px rgba(216,196,154,.32);}
.pulse-node::after{content:''; position:absolute; inset:-12px; border:1px solid currentColor; border-radius:50%; opacity:.28; animation:ripplePulse 2.7s ease-out infinite;}
.pulse-node.n1{left:27%; top:26%; animation-delay:0s;}
.pulse-node.n2{left:68%; top:24%; animation-delay:.5s;}
.pulse-node.n3{left:77%; top:51%; animation-delay:1s;}
.pulse-node.n4{left:59%; top:73%; animation-delay:1.5s;}
.pulse-node.n5{left:32%; top:66%; animation-delay:.8s;}
.pulse-node.n6{left:43%; top:42%; animation-delay:1.9s;}
.pulse-arc{position:absolute; left:19%; top:21%; width:62%; height:62%; border-radius:50%; border:1px solid rgba(216,196,154,.24); border-left-color:transparent; border-bottom-color:rgba(77,163,255,.24); animation:planetOrbit 9s linear infinite;}
.pulse-arc.second{left:12%; top:15%; width:76%; height:76%; border-color:rgba(77,163,255,.16); border-right-color:transparent; animation-duration:14s; animation-direction:reverse;}
.planet-logo-mark img{opacity:.075!important; transform:translateY(6px)!important;}
.planet-live-tag{letter-spacing:.16em;}
@keyframes pulseFieldRotate{to{transform:rotate(360deg)}}
@keyframes softPulse{0%,100%{transform:scale(.85);opacity:.55}45%{transform:scale(1.22);opacity:1}}
@keyframes ripplePulse{0%{transform:scale(.25);opacity:.45}100%{transform:scale(1.65);opacity:0}}



/* ─────────────────────────────────────────
   PRODUCTION REFINEMENTS
───────────────────────────────────────── */
.hero-visual, .pulse-sphere, .control-room, .dashboard-mockup { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}