:root{
  --bg:#0b1220;
  --panel:#0f1b33;
  --card:#0c172d;
  --text:#eaf0ff;
  --muted:#b9c6e6;
  --line:rgba(255,255,255,.08);
  --accent:#74c0fc; /* azul clínico */
  --accent2:#63e6be; /* verde laboratorio */
  --shadow: 0 18px 55px rgba(0,0,0,.35);
  --radius: 18px;
  --max: 1160px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(116,192,252,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(99,230,190,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), #070c16 55%, #060a13);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.hr{height:1px;background:var(--line);margin:22px 0}
.badge{
  display:inline-flex;gap:8px;align-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:8px 12px;border-radius:999px;
  color:var(--muted);font-size:13px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);cursor:pointer;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
  font-weight:600;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.btn.primary{
  border-color:rgba(116,192,252,.35);
  background:linear-gradient(135deg, rgba(116,192,252,.18), rgba(99,230,190,.10));
}
.btn.ghost{background:transparent}
.pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  background:rgba(0,0,0,.18);
  color:var(--muted);
}
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(11,18,32,.55);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:14px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.logo{
  width:34px;height:34px;border-radius:12px;
  background:linear-gradient(135deg, rgba(116,192,252,.95), rgba(99,230,190,.85));
  box-shadow:0 12px 40px rgba(116,192,252,.20);
}
.navlinks{display:flex;gap:14px;flex-wrap:wrap}
.navlinks a{
  color:var(--muted);
  padding:10px 10px;border-radius:10px;
}
.navlinks a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.hero{
  padding:46px 0 22px;
}
.heroGrid{
  display:grid;grid-template-columns: 1.25fr .75fr;gap:20px;
  align-items:stretch;
}
@media (max-width: 980px){.heroGrid{grid-template-columns:1fr}}
.hCard{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  padding:26px;
  position:relative;
  overflow:hidden;
}
.hCard:before{
  content:"";
  position:absolute;inset:-40px -40px auto auto;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(116,192,252,.28), transparent 60%);
  filter:blur(2px);
}
.hTitle{font-size:40px;line-height:1.05;margin:12px 0 10px;letter-spacing:-.6px}
@media (max-width:560px){.hTitle{font-size:32px}}
.hSub{color:var(--muted);font-size:16px;line-height:1.6;max-width:62ch}
.hActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.kpi{
  display:grid;gap:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  padding:18px;
}
.kpi h3{margin:0;font-size:14px;color:var(--muted);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.kpi .big{font-size:22px;font-weight:800}
.grid{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.grid{grid-template-columns:1fr}}
.card{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  padding:16px;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-1px);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.card h4{margin:0 0 8px;font-size:16px}
.card p{margin:0;color:var(--muted);line-height:1.5;font-size:14px}
.section{padding:22px 0}
.sectionTitle{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.sectionTitle h2{margin:0;font-size:18px;letter-spacing:.2px}
.sectionTitle span{color:var(--muted);font-size:13px}
footer{
  border-top:1px solid var(--line);
  padding:24px 0 40px;
  color:var(--muted);
}
.input, select, textarea{
  width:100%;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
  padding:12px 12px;border-radius:12px;
  outline:none;
}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 800px){.formGrid{grid-template-columns:1fr}}
.table{
  width:100%;border-collapse:collapse;
  border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
}
.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}
.table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px;background:rgba(255,255,255,.03)}
.table tr:hover td{background:rgba(255,255,255,.03)}
.small{font-size:12px;color:var(--muted)}
/* HERO background molecular */
.hero--molecular{
  position: relative;
  padding: 64px 0 26px;
}

.hero--molecular::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,.55) 55%, rgba(11,18,32,.70) 100%),
    url("../img/hero-molecular.png");
  background-size: cover;
  background-position: center right;
  filter: saturate(1.05) contrast(1.05);
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hero--molecular .heroInner{
  position: relative;
  padding: 22px;
}

@media (max-width: 980px){
  .hero--molecular::before{
    background-position: center;
  }
}/* ===== HERO molecular: animation layer ===== */

.hero--molecular{
  position: relative;
  padding: 64px 0 26px;
  border-radius: 22px;
  overflow: hidden;
}

/* Imagen de fondo (parallax por CSS vars) */
.hero--molecular::before{
  content:"";
  position:absolute;
  inset:0;

  /* Vars para mover el fondo sin reflow */
  --mx: 50%;
  --my: 50%;

  background:
    linear-gradient(90deg, rgba(11,18,32,.86) 0%, rgba(11,18,32,.56) 55%, rgba(11,18,32,.74) 100%),
    url("../img/hero-molecular.png");
  background-size: 110%;
  background-position: var(--mx) var(--my);
  filter: saturate(1.05) contrast(1.05);
  transform: translateZ(0);
  will-change: background-position;
}

/* Bruma / partículas (solo CSS) */
.hero--molecular::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(120px 120px at 20% 30%, rgba(116,192,252,.20), transparent 60%),
    radial-gradient(160px 160px at 80% 20%, rgba(99,230,190,.14), transparent 65%),
    radial-gradient(220px 220px at 70% 80%, rgba(116,192,252,.12), transparent 70%),
    radial-gradient(140px 140px at 30% 85%, rgba(255,255,255,.07), transparent 70%);
  filter: blur(1px);
  opacity: .9;
  animation: heroDrift 10s ease-in-out infinite alternate;
  transform: translateZ(0);
}

@keyframes heroDrift{
  0%   { transform: translate3d(-1.5%, -1.2%, 0) scale(1.01); opacity:.75; }
  100% { transform: translate3d( 1.5%,  1.2%, 0) scale(1.03); opacity:.95; }
}

/* Contenido por encima */
.hero--molecular .heroInner{
  position: relative;
  padding: 22px;
  z-index: 2;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero--molecular::after{ animation: none; }
  .hero--molecular::before{ background-position: 50% 50%; }
}
/* ===== HERO VIDEO BACKGROUND ===== */
.hero--video{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 64px 0 26px;
}

/* Apaga cualquier background anterior (la imagen) */
.hero--video::before,
.hero--video::after{
  content: none !important;
}

.heroVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center right;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
  z-index: 0;
}

/* Overlay para contraste: evita que el texto se pierda */
.heroOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 35%, rgba(11,18,32,.90) 0%, rgba(11,18,32,.70) 55%, rgba(11,18,32,.50) 100%),
    linear-gradient(90deg, rgba(11,18,32,.88) 0%, rgba(11,18,32,.70) 55%, rgba(11,18,32,.52) 100%);
  z-index: 1;
}

/* Contenido arriba del overlay */
.hero--video .heroInner{
  position: relative;
  z-index: 2;
  padding: 22px;
}

/* Glass cards con base sólida (cero encimado) */
.hero--video .hCard,
.hero--video .kpi{
  background: rgba(8, 14, 26, .78) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px);
}

/* Mobile: centra un poco más */
@media (max-width: 980px){
  .heroVideo{ object-position: center; }
}

/* Reduce motion: si el usuario prefiere menos animación, ocultamos video */
@media (prefers-reduced-motion: reduce){
  .heroVideo{ display:none; }
  .heroOverlay{
    background:
      radial-gradient(900px 520px at 18% 35%, rgba(11,18,32,.92) 0%, rgba(11,18,32,.75) 55%, rgba(11,18,32,.55) 100%),
      linear-gradient(90deg, rgba(11,18,32,.92) 0%, rgba(11,18,32,.78) 55%, rgba(11,18,32,.60) 100%);
  }
}