:root{
    --blue-900:#0B2A4A;
    --blue-700:#14508F;
    --blue-600:#1B5FAE;
    --blue-500:#2C74C9;
    --blue-100:#E7EFFA;
    --green-500:#3FAE7A;
    --green-100:#E4F5EC;
    --bg:#F6F9FC;
    --surface:#FFFFFF;
    --gray-900:#132234;
    --gray-600:#5B6B7C;
    --gray-300:#D7E0EA;
    --radius:14px;
    --shadow-sm: 0 1px 2px rgba(11,42,74,0.06);
    --shadow-md: 0 12px 30px -12px rgba(11,42,74,0.18);
    --shadow-lg: 0 24px 60px -20px rgba(11,42,74,0.25);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  section[id]{ scroll-margin-top:92px; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--gray-900);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Space Grotesk',sans-serif;
    margin:0;
    letter-spacing:-0.02em;
  }
  .mono{
    font-family:'JetBrains Mono',monospace;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- HEADER ---------- */
  header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(246,249,252,0.97);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(11,42,74,0.06);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    height:76px;
  }
  .logo{
    font-size:1.28rem;
    font-weight:700;
    color:var(--blue-700);
    display:flex;
    align-items:center;
    gap:2px;
    letter-spacing:-0.01em;
  }
  .logo .tag{
    color:var(--green-500);
    font-family:'JetBrains Mono',monospace;
    font-weight:500;
    font-size:1.05rem;
    margin-left:2px;
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:105px 0px 110px;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:-2px;
    z-index:0;
    background:
      linear-gradient(120deg, rgba(9,32,58,0.97) 8%, rgba(11,42,74,0.93) 48%, rgba(20,80,143,0.85) 100%),
      url('../fondos/hero-bg.jpg') center 38% / cover no-repeat;
  }
  @media (max-width:640px){
    .hero{ padding:56px 0 64px; }
  }
  .hero-bg-grid{
    position:absolute;
    inset:0;
    z-index:1;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, black 10%, transparent 75%);
    animation: gridDrift 40s linear infinite;
  }
  @keyframes gridDrift{
    0%{background-position:0 0, 0 0;}
    100%{background-position:56px 112px, 112px 56px;}
  }
  .hero-glow{
    position:absolute;
    top:-160px; right:-160px;
    width:520px; height:520px;
    z-index:1;
    background:radial-gradient(circle, rgba(63,174,122,0.28), transparent 70%);
    border-radius:50%;
    filter:blur(10px);
  }
  .hero-inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
  }
  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr; gap:48px;}
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono',monospace;
    font-size:0.78rem;
    color:#EAF2FF;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.22);
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:24px;
    backdrop-filter:blur(6px);
  }
  .eyebrow .dot{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--green-500);
    box-shadow:0 0 0 0 rgba(63,174,122,0.5);
    animation:pulseDot 2.2s ease-in-out infinite;
  }
  @keyframes pulseDot{
    0%{box-shadow:0 0 0 0 rgba(63,174,122,0.45);}
    70%{box-shadow:0 0 0 8px rgba(63,174,122,0);}
    100%{box-shadow:0 0 0 0 rgba(63,174,122,0);}
  }
  .hero h1{
    font-size:clamp(2.3rem, 4.4vw, 3.4rem);
    line-height:1.08;
    color:#FFFFFF;
    font-weight:700;
    text-shadow:0 2px 20px rgba(0,0,0,0.18);
  }
  .hero h1 span{color:#8FD2AE;}
  .hero p.lead{
    margin-top:22px;
    font-size:1.06rem;
    line-height:1.7;
    color:rgba(255,255,255,0.82);
    max-width:520px;
  }
  .hero-actions{
    margin-top:34px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  @media (max-width:480px){
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-actions a{ text-align:center; }
  }
  .btn-primary{
    background:var(--blue-600);
    color:#fff;
    padding:14px 28px;
    border-radius:10px;
    font-weight:600;
    font-size:0.95rem;
    box-shadow:var(--shadow-md);
    transition:transform .2s ease, box-shadow .2s ease;
    display:inline-block;
  }
  .btn-primary:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
  .btn-ghost{
    padding:14px 24px;
    border-radius:10px;
    font-weight:600;
    font-size:0.95rem;
    color:#fff;
    border:1.5px solid rgba(255,255,255,0.4);
    transition:border-color .2s ease, background .2s ease;
  }
  .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.12);}

  /* hero visual: animated code/chart signature */
  .hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .panel{
    position:relative;
    background:var(--surface);
    border-radius:18px;
    box-shadow:var(--shadow-lg);
    border:1px solid rgba(11,42,74,0.06);
    padding:26px 26px 22px;
    width:100%;
    max-width:440px;
  }
  @media (max-width:480px){
    .panel{ padding:20px 18px 18px; max-width:100%; }
    .code-tag{ display:none; }
    .panel-stat{ flex-direction:column; gap:10px; }
  }
  .panel-topbar{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:18px;
  }
  .panel-topbar span{
    width:9px;height:9px;border-radius:50%;
    background:var(--gray-300);
  }
  .panel-topbar span:nth-child(1){background:#F0A5A5;}
  .panel-topbar span:nth-child(2){background:#F3D18E;}
  .panel-topbar span:nth-child(3){background:var(--green-500);}
  svg.chart{width:100%; height:auto; display:block; overflow:visible;}
  .chart-line{
    fill:none;
    stroke:var(--blue-500);
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:420;
    stroke-dashoffset:420;
    animation:drawLine 2.4s cubic-bezier(.4,0,.2,1) forwards .3s;
  }
  @keyframes drawLine{ to{ stroke-dashoffset:0; } }
  .chart-area{
    opacity:0;
    animation:fadeIn 1.2s ease forwards 1.6s;
  }
  @keyframes fadeIn{ to{opacity:1;} }
  .chart-dot{
    fill:var(--blue-600);
    opacity:0;
    animation:popIn .5s ease forwards;
  }
  @keyframes popIn{
    from{opacity:0; transform:scale(0);}
    to{opacity:1; transform:scale(1);}
  }
  .code-tag{
    position:absolute;
    font-family:'JetBrains Mono',monospace;
    font-size:0.78rem;
    color:var(--green-500);
    background:var(--green-100);
    padding:5px 10px;
    border-radius:8px;
    box-shadow:var(--shadow-sm);
    animation:floaty 5s ease-in-out infinite;
  }
  .code-tag.c1{ top:-14px; left:-18px; animation-delay:.2s;}
  .code-tag.c2{ bottom:6px; right:-22px; color:var(--blue-600); background:var(--blue-100); animation-delay:1.2s;}
  @keyframes floaty{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  .panel-stat{
    display:flex;
    justify-content:space-between;
    margin-top:18px;
    padding-top:16px;
    border-top:1px dashed var(--gray-300);
  }
  .panel-stat div{font-size:0.72rem; color:var(--gray-600);}
  .panel-stat strong{
    display:block;
    font-family:'Space Grotesk',sans-serif;
    font-size:1.15rem;
    color:var(--blue-900);
    margin-top:2px;
  }

  /* ---------- SECTION HEADS ---------- */
  .section{ padding:96px 0; }
  @media (max-width:640px){
    .section{ padding:56px 0; }
  }
  .section-head{
    max-width:640px;
    margin:0 0 52px;
  }
  .section-head .kicker{
    font-family:'JetBrains Mono',monospace;
    font-size:0.78rem;
    color:var(--blue-600);
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:10px;
    display:block;
  }
  .section-head h2{
    font-size:clamp(1.6rem,3vw,2.2rem);
    color:var(--blue-900);
  }
  .section-head p{
    margin-top:14px;
    color:var(--gray-600);
    line-height:1.7;
    font-size:1rem;
  }

  /* ---------- COMO TRABAJAMOS ---------- */
  .process{
    position:relative;
  }
  .process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
  }
  @media (max-width:900px){
    .process-grid{grid-template-columns:1fr; gap:28px;}
  }
  .process-grid::before{
    content:"";
    position:absolute;
    top:26px; left:0; right:0;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--gray-300) 0 8px, transparent 8px 16px);
  }
  @media (max-width:900px){ .process-grid::before{display:none;} }
  .process-step{
    position:relative;
    padding:0 20px 0 0;
    opacity:0;
    transform:translateY(16px);
    animation:stepIn .6s ease forwards;
  }
  .process-step:nth-child(1){animation-delay:.05s;}
  .process-step:nth-child(2){animation-delay:.15s;}
  .process-step:nth-child(3){animation-delay:.25s;}
  .process-step:nth-child(4){animation-delay:.35s;}
  @keyframes stepIn{ to{opacity:1; transform:translateY(0);} }
  .step-num{
    width:52px; height:52px;
    border-radius:50%;
    background:var(--surface);
    border:1.5px solid var(--blue-500);
    color:var(--blue-700);
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono',monospace;
    font-weight:500;
    font-size:0.95rem;
    position:relative;
    z-index:2;
    margin-bottom:22px;
    transition:background .25s ease, color .25s ease, transform .25s ease;
  }
  .process-step:hover .step-num{
    background:var(--blue-600);
    color:#fff;
    transform:translateY(-3px);
  }
  .process-step h3{
    font-size:1.05rem;
    color:var(--blue-900);
    margin-bottom:8px;
  }
  .process-step p{
    font-size:0.92rem;
    color:var(--gray-600);
    line-height:1.6;
    max-width:230px;
  }

  /* ---------- SERVICIOS ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }
  @media (max-width:760px){ .services-grid{grid-template-columns:1fr;} }
  .service-card{
    background:var(--surface);
    border:1px solid rgba(11,42,74,0.08);
    border-radius:var(--radius);
    padding:32px 30px;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    position:relative;
    overflow:hidden;
  }
  .service-card::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:4px; height:100%;
    background:var(--blue-500);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .32s ease;
  }
  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:transparent;
  }
  .service-card:hover::before{ transform:scaleY(1); }
  .service-icon{
    width:44px; height:44px;
    border-radius:10px;
    background:var(--blue-100);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
    transition:background .28s ease, transform .28s ease;
  }
  .service-card:hover .service-icon{ background:var(--green-100); transform:rotate(-6deg); }
  .service-icon svg{ width:22px; height:22px; stroke:var(--blue-600); transition:stroke .28s ease;}
  .service-card:hover .service-icon svg{ stroke:var(--green-500); }
  .service-card h3{
    font-size:1.12rem;
    color:var(--blue-900);
    margin-bottom:14px;
  }
  .service-card ul{
    margin:0; padding:0;
    list-style:none;
  }
  .service-card li{
    font-size:0.9rem;
    color:var(--gray-600);
    line-height:1.6;
    padding-left:18px;
    position:relative;
    margin-bottom:9px;
  }
  .service-card li::before{
    content:"";
    position:absolute;
    left:0; top:8px;
    width:6px; height:6px;
    border-radius:2px;
    background:var(--green-500);
  }
  .service-card li:last-child{margin-bottom:0;}

  /* ---------- CONTACTO ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:48px;
    align-items:start;
  }
  @media (max-width:860px){
    .contact-grid{ grid-template-columns:1fr; gap:40px; }
  }
  .contact-info h3{
    font-size:1.2rem;
    color:var(--blue-900);
    margin-bottom:14px;
  }
  .contact-info p{
    color:var(--gray-600);
    line-height:1.75;
    font-size:0.98rem;
  }
  .contact-detail{
    margin-top:28px;
    padding:18px 20px;
    background:var(--surface);
    border:1px solid rgba(11,42,74,0.08);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .contact-detail .mono{
    font-size:0.72rem;
    color:var(--blue-600);
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .contact-detail strong{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.05rem;
    color:var(--blue-900);
  }
  .contact-form{
    background:var(--surface);
    border:1px solid rgba(11,42,74,0.08);
    border-radius:var(--radius);
    padding:34px;
    box-shadow:var(--shadow-md);
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  @media (max-width:480px){
    .contact-form{ padding:24px 20px; }
  }
  .form-row{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .form-row label{
    font-size:0.85rem;
    font-weight:600;
    color:var(--blue-900);
  }
  .form-row input,
  .form-row textarea{
    font-family:'Inter',sans-serif;
    font-size:0.95rem;
    color:var(--gray-900);
    background:var(--bg);
    border:1.5px solid var(--gray-300);
    border-radius:10px;
    padding:12px 14px;
    resize:vertical;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .form-row input:focus,
  .form-row textarea:focus{
    outline:none;
    border-color:var(--blue-500);
    box-shadow:0 0 0 3px rgba(44,116,201,0.15);
  }
  .form-row input::placeholder,
  .form-row textarea::placeholder{
    color:#9AACBC;
  }
  .form-submit{
    border:none;
    cursor:pointer;
    width:100%;
    text-align:center;
  }

  footer{
    background:var(--blue-900);
    border-top:1px solid rgba(255,255,255,0.08);
    padding:32px 0;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  @media (max-width:480px){
    .footer-inner{ flex-direction:column; text-align:center; }
  }
  .footer-inner .logo{ color:#fff; font-size:1.05rem; }
  .footer-inner .logo .tag{ color:var(--green-500); }
  .footer-inner p{
    color:rgba(255,255,255,0.5);
    font-size:0.82rem;
    margin:0;
    font-family:'JetBrains Mono',monospace;
  }

  /* fade-in on scroll */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.visible{
    opacity:1;
    transform:translateY(0);
  }