/* #0c5a9f #ea9051 #5f56c1 */

/* :root {
  --primary: #0c5a9f;
  --secondary: #143056;
  --accent: #5d7491;
  --muted: #9dadbf;
  --light: #e1e6eb;
} */

:root {
  --primary: #0067b8;
  --secondary: #143056;
  --accent: #5d7491;
  --muted: #9dadbf;
  --light: #e1e6eb;
  --bg: #f7f9fc;
  --ink: #0c1a2e;
}

.text-primary { color: var(--primary) !important; }
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background-color: var(--primary); color: #fff; }


.header{
  padding-top: 30px;
}

/* 
.navbar{ 
  background: radial-gradient(1000px 600px at 15% 20%, color-mix(in srgb, var(--primary) 70%, #ffffff 30%), var(--secondary) 60%),
              linear-gradient(135deg, color-mix(in srgb, var(--primary) 70%, var(--secondary) 30%), var(--secondary));              
} */

/* Hero in blue gradient */

/* .hero-section{ 
  background: radial-gradient(1200px 450px at 0% 0%, var(--light), #fff 60%),
              radial-gradient(1000px 350px at 100% 100%, #fff, var(--light) 60%);              
} */
/* .hero-section{ 
  background: radial-gradient(1000px 600px at 15% 20%, color-mix(in srgb, var(--primary) 70%, #ffffff 30%), var(--secondary) 60%),
              linear-gradient(135deg, color-mix(in srgb, var(--primary) 70%, var(--secondary) 30%), var(--secondary));              
} */
.hero-logo { filter: drop-shadow(0 8px 20px rgba(85, 160, 230, 0.08)); }
.service-card { border: 1px solid rgba(0,0,0,.06); }
.service-icon { width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:26px; }

.stat { background: #fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:24px 12px; box-shadow:0 4px 16px rgba(0,0,0,.04); }
.stat-value { font-size: 2rem; color: var(--secondary); font-weight: 800; }
.stat-label { color: #556; }

.cta-section { background: linear-gradient(90deg, var(--primary), var(--secondary)); }

.footer-section { background: linear-gradient(90deg, var(--primary), var(--secondary)); }

#mainNav.navbar { transition: all .2s ease; }
#mainNav.navbar.scrolled { padding-top:.25rem; padding-bottom:.25rem; box-shadow:0 .5rem 5rem rgba(0,0,0,.05)!important; }


/* grafico hero*/
.hero-section .board { border-radius: 16px; background: #fff; }
.board-header { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:0px solid rgba(0,0,0,.06); }
.board-header .dots i { display:inline-block; width:8px; height:8px; border-radius:50%; background:#dfe7f2; margin-left:4px; }
.board-body { padding: 1rem; }
.kpis { display:grid; grid-template-columns: repeat(3,1fr); gap:.75rem; margin-bottom: .75rem; }
.kpi .label { color:#6b7a90; font-size:.85rem; }
.kpi .val { font-weight:800; font-size:1.1rem; color: var(--secondary); }

.chart-line polyline { fill:none; stroke: #ea9051; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: lineDraw 3.6s ease infinite; }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
.chart-bars { display:flex; gap:.5rem; align-items:flex-end; height: 80px; }
.chart-bars .bar { flex:1; height: calc(var(--val) * 1%); background: linear-gradient(180deg, #0c5a9f, #5d7491); border-radius: 6px 6px 2px 2px; transform: translateY(10px); opacity: .0; animation: barUp .8s ease forwards; }
.chart-bars .bar:nth-child(1) { animation-delay:.15s }
.chart-bars .bar:nth-child(2) { animation-delay:.25s }
.chart-bars .bar:nth-child(3) { animation-delay:.35s }
.chart-bars .bar:nth-child(4) { animation-delay:.45s }
.chart-bars .bar:nth-child(5) { animation-delay:.55s }
@keyframes barUp { to { transform: translateY(0); opacity: 1; } }

/* Animations */
.fade-up{opacity:0; transform: translateY(10px); animation: fadeUp .8s forwards var(--delay,0s)}
@keyframes fadeUp{to{opacity:1; transform:none}}
.fade-in{opacity:0; animation: fadeIn .8s forwards var(--delay,0s)}
@keyframes fadeIn{to{opacity:1}}
.float-up{animation: floatUp .9s ease-out both .15s}
@keyframes floatUp{from{opacity:0; transform: translateY(16px)} to{opacity:1; transform:none}}

/* Parallax layers */
/* .parallax-layer{ position:absolute; inset:auto; width:40vmax; height:40vmax; border-radius:50%; filter: blur(60px); opacity:.25; }
.parallax-layer.layer-1{ top:-10vmax; left:-10vmax; background: #0c5a9f; }
.parallax-layer.layer-2{ bottom:-12vmax; right:-8vmax; background: #143056; }
.parallax-layer.layer-3{ top:30%; right:35%; width:28vmax; height:28vmax; background:#5d7491; opacity:.2; } */
.parallax-layer{ position:absolute; inset:auto; width:40vmax; height:40vmax; border-radius:50%; filter: blur(60px); opacity:.25; }
.parallax-layer.layer-1{ top:-10vmax; left:-10vmax; background: #fff; }
.parallax-layer.layer-2{ bottom:-12vmax; right:-8vmax; background: #fff; }
.parallax-layer.layer-3{ top:30%; right:35%; width:28vmax; height:28vmax; background:#fff; opacity:.2; }

/* Microinteractions */
.btn-animate{ position:relative; overflow:hidden; transition: transform .15s ease, box-shadow .2s ease; }
.btn-animate:hover{ transform: translateY(-1px); box-shadow:0 8px 22px rgba(12,90,159,.25); }
.btn-animate:active{ transform: translateY(0); }
.btn-animate .ripple{ position:absolute; border-radius:999px; transform:scale(0); background: rgba(255,255,255,.45); animation:ripple .6s ease-out; pointer-events:none; }
@keyframes ripple{ to{ transform:scale(14); opacity:0; } }

.service-card{ transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover{ transform: translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.08); }
.service-card .service-icon{ transition: transform .2s ease; }
.service-card:hover .service-icon{ transform: translateY(-2px) rotate(-2deg); }

@media (prefers-reduced-motion: reduce){ .btn-animate, .service-card { transition:none; } }