:root{
    --navy-deep:#0A192F;
    --navy-raised:#11223C;
    --navy-line:#26405F;
    --ember:#FF4D00;
    --ember-light:#FFA83D;
    --ember-deep:#C4451B;
    --steel:#5EC6E8;
    --steel-dim:#2B6E96;
    --paper:#F4F3EF;
    --paper-dim:#9FB0C7;
    --ink-on-ember:#180E08;
    /* ---- light-section palette (Gris Acero / Blanco Puro, per brand soul) ---- */
    --acero:#E0E0E0;
    --paper-pure:#FFFFFF;
    --ink-dim:#48586F;
    --acero-line:#CBD1D7;
    --ember-onlight:#A8380F;
    --font-display:'Montserrat',-apple-system,sans-serif;
    --font-body:'Open Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--navy-deep);
    color:var(--paper);
    font-family:var(--font-body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    padding-inline:0;
  }
  img{max-width:100%;}
  [hidden]{display:none!important;}

  a{color:inherit;}
  .wrap{
    max-width:1120px;
    margin-inline:auto;
    padding-inline:clamp(20px,5vw,40px);
  }

  h1,h2,h3{font-family:var(--font-display);font-weight:800;text-wrap:balance;margin:0;letter-spacing:.2px;}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ember-light);
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
  }
  .eyebrow::before{content:"";width:28px;height:1.5px;background:var(--ember);display:inline-block;}

  /* ---- draft strip ---- */
  .draft-strip{
    background:#08111f;border-bottom:1px solid var(--navy-line);
    text-align:center;padding:7px 14px;
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
    color:var(--paper-dim);
  }

  /* ---- nav ---- */
  nav{
    position:sticky;top:0;z-index:100;
    background:rgba(10,24,48,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--navy-line);
  }
  nav .wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding-block:14px;}

  /* animated signal line along the bottom of the nav — pure CSS (no SVG viewBox
     to stretch), so it reads identically at any width, mobile included, and keeps
     the header feeling "alive" the whole time the visitor is browsing. */
  nav::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background-image:repeating-linear-gradient(90deg,var(--steel) 0 7px,transparent 7px 18px);
    background-size:18px 100%;
    opacity:.55;
    box-shadow:0 0 6px rgba(94,198,232,.6);
    animation:nav-signal-flow 2.6s linear infinite;
    pointer-events:none;
  }
  @keyframes nav-signal-flow{ to{ background-position:-18px 0; } }

  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
  .brand-text{display:flex;flex-direction:column;gap:3px;align-items:flex-start;}
  .brand-mark{
    font-family:var(--font-display);font-weight:800;font-size:1.28rem;letter-spacing:.045em;
    color:var(--paper);line-height:1;
    animation:brand-neon-breathe 3.6s ease-in-out infinite;
  }
  @keyframes brand-neon-breathe{
    0%,100%{text-shadow:0 0 7px rgba(94,198,232,.4),0 0 16px rgba(255,77,0,.18);}
    50%{text-shadow:0 0 13px rgba(94,198,232,.7),0 0 26px rgba(255,77,0,.4);}
  }
  .navlinks{display:flex;gap:19px;font-size:.82rem;}
  .navlinks a{text-decoration:none;color:var(--paper-dim);transition:color .15s;white-space:nowrap;}
  .navlinks a:hover{color:var(--paper);}
  .nav-cta{
    background:var(--ember);color:var(--ink-on-ember);
    font-weight:600;font-size:.84rem;
    padding:9px 16px;border-radius:2px;text-decoration:none;
    white-space:nowrap;
  }
  .nav-actions{display:flex;align-items:center;gap:12px;}
  @media (max-width:1040px){ .navlinks{display:none;} }

  /* ---- mobile menu toggle ---- */
  .nav-toggle{
    display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:40px;height:40px;flex-shrink:0;
    background:transparent;border:1px solid var(--navy-line);border-radius:3px;
    cursor:pointer;padding:0;
  }
  .nav-toggle span{display:block;width:18px;height:2px;background:var(--paper);transition:transform .25s ease,opacity .2s ease;}
  .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.active span:nth-child(2){opacity:0;}
  .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media (max-width:1040px){ .nav-toggle{display:flex;} }

  .mobile-menu{display:none;}
  @media (max-width:1040px){
    .mobile-menu{
      display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;
      background:var(--navy-raised);border-bottom:1px solid var(--navy-line);
    }
    .mobile-menu.open{grid-template-rows:1fr;}
  }
  .mobile-menu-inner{overflow:hidden;display:flex;flex-direction:column;}
  .mobile-menu-inner a{
    text-decoration:none;color:var(--paper-dim);font-size:.95rem;
    padding:15px clamp(20px,5vw,40px);border-top:1px solid var(--navy-line);
    transition:color .15s,background .15s;
  }
  .mobile-menu-inner a:first-child{border-top:none;}
  .mobile-menu-inner a:hover,.mobile-menu-inner a:active{color:var(--paper);background:rgba(94,198,232,.05);}
  .mobile-menu-inner a.mobile-cta{color:var(--ember-light);font-weight:600;}

  section{padding-block:clamp(56px,9vw,96px);position:relative;}
  .alt{background:var(--navy-raised);}

  /* ---- light "breather" sections — same brand, gris acero/blanco puro ---- */
  .light{background:var(--acero);color:var(--navy-deep);}
  .light::before{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--ember) 15%,var(--steel) 50%,var(--ember) 85%,transparent);
    opacity:.65;pointer-events:none;
  }
  .light .eyebrow{color:var(--ember-onlight);}
  .light .eyebrow::before{background:var(--ember-onlight);}
  .light h1,.light h2,.light h3,.light h4{color:var(--navy-deep);}
  .light .section-sub{color:var(--ink-dim);}
  .divider{
    height:1px;
    background:linear-gradient(90deg,transparent,var(--navy-line) 15%,var(--navy-line) 85%,transparent);
  }

  /* circuit motif */
  .circuit{position:absolute;inset:0;pointer-events:none;opacity:.35;overflow:hidden;}

  /* ---- hero ---- */
  .hero{padding-block:clamp(80px,14vw,140px) clamp(60px,10vw,90px);overflow:hidden;}
  .hero .wrap{position:relative;z-index:2;}
  .hero-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:48px;align-items:center;}
  @media (max-width:860px){.hero-grid{grid-template-columns:1fr;}}
  .hero h1{font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.02;}
  .hero h1 em{font-style:normal;color:var(--ember);}
  .hero p.lead{font-size:1.08rem;color:var(--paper-dim);max-width:52ch;margin-top:22px;}
  .cta-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:34px;}
  .btn-primary{
    background:var(--ember);color:var(--ink-on-ember);font-weight:700;
    padding:14px 26px;border-radius:2px;text-decoration:none;font-size:.95rem;
    box-shadow:0 10px 30px -12px rgba(232,98,47,.55);
  }
  .btn-ghost{color:var(--paper-dim);text-decoration:none;font-size:.92rem;border-bottom:1px solid var(--navy-line);padding-bottom:2px;}
  .btn-ghost:hover{color:var(--paper);border-color:var(--paper-dim);}

  .wordmark-box{
    border:1px solid var(--navy-line);background:rgba(255,255,255,.02);
    padding:22px 22px 20px;border-radius:3px;
  }
  .wordmark-legend{font-family:var(--font-mono);font-size:.72rem;color:var(--paper-dim);margin-top:16px;display:grid;gap:6px;}
  .wordmark-legend b{color:var(--paper);font-weight:500;}

  /* ---- acerca de ---- */
  .about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--navy-line);border-radius:3px;overflow:hidden;margin-top:40px;}
  @media (max-width:820px){.about-grid{grid-template-columns:1fr;}}
  .about-card{padding:30px 28px;border-left:1px solid var(--navy-line);}
  .about-card:first-child{border-left:none;}
  @media (max-width:820px){.about-card{border-left:none;border-top:1px solid var(--navy-line);} .about-card:first-child{border-top:none;}}
  .about-card h3{font-size:1.15rem;color:var(--ember-light);margin-bottom:12px;}
  .about-card p{color:var(--paper-dim);font-size:.94rem;margin:0;}
  .about-card .tag-line{font-family:var(--font-display);font-size:1.6rem;color:var(--paper);font-weight:700;line-height:1.15;margin-top:6px;}

  h2.section-title{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:22ch;}
  .section-sub{color:var(--paper-dim);max-width:58ch;margin-top:14px;font-size:1rem;}
  .section-head{margin-bottom:44px;}

  /* ---- mision/vision/valores ---- */
  .mvv-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px;}
  @media (max-width:760px){.mvv-row{grid-template-columns:1fr;}}
  .mvv-card{
    background:var(--navy-deep);border:1px solid var(--navy-line);border-radius:3px;
    padding:26px 26px 24px;
  }
  .mvv-card .eyebrow{margin-bottom:12px;}
  .mvv-card p{color:var(--paper-dim);font-size:.95rem;margin:0;}

  .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;}
  @media (max-width:860px){.values-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.values-grid{grid-template-columns:1fr;}}
  .value-card{
    background:var(--navy-deep);border:1px solid var(--navy-line);border-radius:3px;
    padding:20px;
  }
  .value-card.wolf{border-top:2px solid var(--steel);}
  .value-card.phoenix{border-top:2px solid var(--ember);}
  .value-card h4{font-family:var(--font-body);font-weight:700;font-size:.98rem;color:var(--paper);margin:0 0 8px;}
  .value-card p{font-size:.86rem;color:var(--paper-dim);margin:0;}

  .light .mvv-card,.light .value-card{background:var(--paper-pure);border-color:var(--acero-line);}
  .light .mvv-card p,.light .value-card p{color:var(--ink-dim);}
  .light .value-card h4{color:var(--navy-deep);}

  /* ---- dualidad ---- */
  .duality{padding-top:clamp(56px,9vw,96px);}
  .duality-panels{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:44px;background:var(--navy-line);border-radius:4px;overflow:hidden;}
  @media (max-width:820px){.duality-panels{grid-template-columns:1fr;}}
  .panel{background:var(--navy-deep);padding:38px 34px;}
  .panel.wolf{background:linear-gradient(165deg,#0d2038,#0A192F 60%);}
  .panel.phoenix{background:linear-gradient(165deg,#241207,#0A192F 60%);}
  .panel h3{font-size:1.5rem;color:var(--paper);margin-bottom:6px;}
  .panel .panel-kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;}
  .panel.wolf .panel-kicker{color:var(--steel);}
  .panel.phoenix .panel-kicker{color:var(--ember-light);}
  .svc-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px;}
  .svc-list li{padding-top:16px;border-top:1px solid var(--navy-line);}
  .svc-list li:first-child{padding-top:0;border-top:none;}
  .svc-list .svc-name{font-weight:600;color:var(--paper);font-size:.98rem;display:flex;align-items:center;gap:8px;}
  .svc-list .svc-name.new::after{content:"nuevo";font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;background:var(--ember);color:var(--ink-on-ember);padding:2px 7px;border-radius:2px;font-weight:600;}
  .svc-list p{margin:6px 0 0;color:var(--paper-dim);font-size:.88rem;}

  /* ---- proceso ---- */
  .process-row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px;}
  @media (max-width:900px){.process-row{grid-template-columns:1fr 1fr;row-gap:36px;}}
  @media (max-width:560px){.process-row{grid-template-columns:1fr;}}
  .process-row::before{
    content:"";position:absolute;top:22px;left:11%;right:11%;height:1px;
    background:linear-gradient(90deg,transparent,var(--navy-line) 8%,var(--navy-line) 92%,transparent);
    z-index:0;
  }
  @media (max-width:900px){.process-row::before{display:none;}}
  .process-step{position:relative;z-index:1;}
  .process-num{
    width:44px;height:44px;border-radius:50%;
    border:1px solid var(--navy-line);background:var(--navy-deep);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:.82rem;
    margin-bottom:18px;transition:border-color .25s ease,box-shadow .25s ease;
  }
  .process-step:nth-child(odd) .process-num{color:var(--steel);}
  .process-step:nth-child(even) .process-num{color:var(--ember-light);}
  .process-step:hover .process-num{border-color:currentColor;box-shadow:0 0 16px -4px currentColor;}
  .process-step h4{font-family:var(--font-body);font-size:1.02rem;font-weight:700;color:var(--paper);margin:0 0 8px;}
  .process-step p{font-size:.88rem;color:var(--paper-dim);margin:0;}

  /* ---- primeros trabajos ---- */
  .trabajos-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
  .car-nav{display:flex;gap:10px;}
  .car-btn{
    width:40px;height:40px;border-radius:50%;flex-shrink:0;
    border:1px solid var(--navy-line);background:var(--navy-deep);color:var(--paper-dim);
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
    transition:border-color .2s ease,color .2s ease,box-shadow .2s ease;
  }
  .car-btn:hover{border-color:var(--steel);color:var(--steel);box-shadow:0 0 14px -4px var(--steel);}
  .car-btn svg{width:16px;height:16px;}

  .carousel-track{
    display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,340px);
    gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-top:40px;padding-bottom:16px;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:var(--navy-line) transparent;
  }
  @media (min-width:880px){
    .carousel-track{grid-auto-columns:unset;grid-template-columns:repeat(5,1fr);overflow-x:visible;}
  }
  .carousel-track::-webkit-scrollbar{height:6px;}
  .carousel-track::-webkit-scrollbar-thumb{background:var(--navy-line);border-radius:3px;}

  .job-card{
    scroll-snap-align:start;border:1px solid var(--navy-line);border-radius:4px;
    overflow:hidden;background:var(--navy-deep);display:flex;flex-direction:column;
  }
  .job-photo{
    position:relative;aspect-ratio:3/4;overflow:hidden;background:#08111f;
    cursor:zoom-in;
  }
  .job-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
  .job-photo.contain img{object-fit:contain;}
  .job-photo:hover img,.job-photo:focus-visible img{transform:scale(1.07);}
  .job-photo:focus-visible{outline:2px solid var(--steel);outline-offset:-2px;}
  .job-zoom-hint{
    position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
    background:rgba(8,17,31,.72);border:1px solid var(--navy-line);
    display:flex;align-items:center;justify-content:center;color:var(--paper);
    opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease;
    pointer-events:none;
  }
  .job-zoom-hint svg{width:15px;height:15px;}
  .job-photo:hover .job-zoom-hint,.job-photo:focus-visible .job-zoom-hint{opacity:1;transform:translateY(0);}
  .job-scan{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 42%,rgba(94,198,232,.4) 49%,rgba(94,198,232,.1) 53%,transparent 60%);
    transform:translateX(-130%);
  }
  .job-card.scan-play .job-scan{animation:jobScan 1s ease-out .1s 1;}
  @keyframes jobScan{ to{ transform:translateX(130%); } }
  .job-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
  .job-eyebrow{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ember-light);}
  .job-body h4{font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--paper);margin:0;}
  .job-body p{font-size:.86rem;color:var(--paper-dim);margin:0;line-height:1.55;}
  .job-meta{font-family:var(--font-mono);font-size:.64rem;color:var(--steel);margin-top:2px;}
  .trabajos-note{margin-top:22px;font-size:.82rem;color:var(--paper-dim);}
  .trabajos-note b{color:var(--paper);font-weight:600;}

  .light .car-btn{background:var(--paper-pure);border-color:var(--acero-line);color:var(--ink-dim);}
  .light .car-btn:hover{border-color:var(--steel-dim);color:var(--steel-dim);box-shadow:0 0 14px -4px var(--steel-dim);}
  .light .job-card{background:var(--paper-pure);border-color:var(--acero-line);}
  .light .job-photo{background:var(--acero);}
  .light .job-eyebrow{color:var(--ember-onlight);}
  .light .job-body h4{color:var(--navy-deep);}
  .light .job-body p{color:var(--ink-dim);}
  .light .job-meta{color:var(--steel-dim);}
  .light .trabajos-note{color:var(--ink-dim);}
  .light .trabajos-note b{color:var(--navy-deep);}

  /* ---- lightbox ---- */
  .lightbox{
    position:fixed;inset:0;z-index:200;background:rgba(5,11,22,.94);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:clamp(20px,6vw,60px);gap:16px;
  }
  .lightbox-img{max-width:min(92vw,900px);max-height:72vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
  .lightbox-caption{font-family:var(--font-body);font-size:.92rem;color:var(--paper-dim);max-width:60ch;text-align:center;margin:0;}
  .lightbox-close{
    position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
    background:var(--navy-deep);border:1px solid var(--navy-line);color:var(--paper);
    display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;line-height:1;
    transition:border-color .2s ease,color .2s ease;
  }
  .lightbox-close:hover{border-color:var(--steel);color:var(--steel);}

  /* ---- por que ---- */
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;}
  @media (max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.why-grid{grid-template-columns:1fr;}}
  .why-card{padding:0;}
  .why-num{font-family:var(--font-mono);font-size:.72rem;color:var(--steel);letter-spacing:.08em;margin-bottom:10px;}
  .why-card h4{font-family:var(--font-body);font-size:1.02rem;font-weight:700;color:var(--paper);margin:0 0 8px;}
  .why-card p{font-size:.88rem;color:var(--paper-dim);margin:0;}
  .why-card.highlight{border-left:2px solid var(--ember);padding-left:16px;}
  .why-card.highlight .why-num{color:var(--ember-light);}

  /* ---- faq ---- */
  .faq-list{margin-top:40px;border-top:1px solid var(--navy-line);max-width:78ch;}
  .faq-item{border-bottom:1px solid var(--navy-line);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    display:flex;align-items:center;gap:18px;padding:22px 2px;color:var(--paper);
    font-family:var(--font-body);font-size:1rem;font-weight:600;transition:color .2s ease;
  }
  .faq-q:hover{color:var(--steel);}
  .faq-num{font-family:var(--font-mono);font-size:.72rem;color:var(--steel);flex-shrink:0;width:26px;}
  .faq-q-text{flex:1;}
  .faq-icon{width:18px;height:18px;flex-shrink:0;position:relative;transition:transform .25s ease;}
  .faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--paper-dim);transition:background .2s ease;}
  .faq-icon::before{width:14px;height:1.5px;transform:translate(-50%,-50%);}
  .faq-icon::after{width:1.5px;height:14px;transform:translate(-50%,-50%);}
  .faq-item.open .faq-icon{transform:rotate(45deg);}
  .faq-item.open .faq-icon::before,.faq-item.open .faq-icon::after{background:var(--ember-light);}
  .faq-item.open .faq-q{color:var(--ember-light);}
  .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
  .faq-item.open .faq-a{grid-template-rows:1fr;}
  .faq-a-inner{overflow:hidden;}
  .faq-a-inner p{margin:0 0 24px 44px;color:var(--paper-dim);font-size:.92rem;max-width:60ch;line-height:1.62;}

  /* ---- cta final ---- */
  .final-cta{
    text-align:left;
    background:radial-gradient(circle at 15% 20%,rgba(232,98,47,.18),transparent 55%),var(--navy-raised);
    border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line);
  }
  .final-cta h2{font-size:clamp(1.9rem,4.4vw,3rem);max-width:18ch;}
  .final-cta .section-sub{max-width:46ch;}

  footer{padding-block:40px;}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
  footer .navlinks{font-size:.82rem;}
  .foot-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--paper-dim);}

  ::selection{background:var(--ember);color:var(--ink-on-ember);}

  /* ---- technical grid backdrop (echoes the logo artwork) ---- */
  .grid-bg{
    background-image:
      linear-gradient(rgba(94,198,232,.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(94,198,232,.06) 1px,transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 40%,transparent 85%);
            mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 40%,transparent 85%);
  }
  .light .grid-bg{
    background-image:
      linear-gradient(rgba(10,25,47,.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(10,25,47,.06) 1px,transparent 1px);
  }

  /* ---- neon brand mark / logo ---- */
  .logo-mark{display:block;border-radius:4px;filter:drop-shadow(0 0 14px rgba(255,77,0,.25)) drop-shadow(0 0 22px rgba(94,198,232,.15));}
  .nav-logo{
    height:46px;width:auto;border-radius:3px;flex-shrink:0;
    animation:logo-neon-breathe 3.6s ease-in-out infinite;
  }
  @keyframes logo-neon-breathe{
    0%,100%{filter:drop-shadow(0 0 5px rgba(94,198,232,.4)) drop-shadow(0 0 12px rgba(255,77,0,.22));}
    50%{filter:drop-shadow(0 0 10px rgba(94,198,232,.7)) drop-shadow(0 0 20px rgba(255,77,0,.45));}
  }

  @keyframes ring-pulse{
    0%,100%{box-shadow:0 0 0 0 var(--ring-color,rgba(94,198,232,.55)),0 0 24px 4px var(--ring-color,rgba(94,198,232,.35));}
    50%{box-shadow:0 0 0 6px transparent,0 0 40px 10px var(--ring-color,rgba(94,198,232,.55));}
  }
  .avatar{
    width:min(230px,60vw);aspect-ratio:1;border-radius:50%;
    overflow:hidden;position:relative;margin-bottom:22px;
    border:2px solid var(--ring-color,var(--steel));
    animation:ring-pulse 3.6s ease-in-out infinite;
  }
  .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .avatar.wolf{--ring-color:rgba(94,198,232,.6);}
  .avatar.phoenix{--ring-color:rgba(255,77,0,.55);}

  @keyframes btn-glow{
    0%,100%{box-shadow:0 10px 30px -12px rgba(255,77,0,.55);}
    50%{box-shadow:0 10px 34px -8px rgba(255,77,0,.85);}
  }
  .btn-primary{animation:btn-glow 2.8s ease-in-out infinite;}

  @keyframes dash-flow{ to{ stroke-dashoffset:-200; } }
  .circuit path.flow,.section-circuit path.flow{stroke-dasharray:6 10;animation:dash-flow 5s linear infinite;}
  .panel-circuit path.flow{animation:dash-flow 4s linear infinite;}

  @keyframes soft-flicker{
    0%,100%{opacity:1;}
    92%{opacity:1;}
    94%{opacity:.7;}
    96%{opacity:1;}
  }
  .hero h1 em{animation:soft-flicker 6s ease-in-out infinite;}

  /* ---- scroll reveal (subtle, safe fallback: visible if JS never runs) ---- */
  .reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease;}
  .reveal.reveal-hidden{opacity:0;transform:translateY(16px);}
  .reveal.reveal-visible{opacity:1;transform:translateY(0);}

  /* ---- card hover micro-interactions ---- */
  .about-card,.mvv-card,.value-card,.why-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
  .about-card:hover{background:rgba(94,198,232,.035);}
  .mvv-card:hover{transform:translateY(-3px);border-color:var(--steel-dim);box-shadow:0 14px 30px -18px rgba(94,198,232,.5);}
  .value-card:hover{transform:translateY(-3px);border-color:var(--navy-line);box-shadow:0 14px 26px -16px rgba(0,0,0,.45);}
  .value-card.wolf:hover{box-shadow:0 14px 26px -14px rgba(94,198,232,.35);}
  .value-card.phoenix:hover{box-shadow:0 14px 26px -14px rgba(255,77,0,.3);}
  .why-card{padding-top:2px;}
  .why-card:hover .why-num{color:var(--ember-light);}
  .svc-list li{transition:padding-left .25s ease;}
  .svc-list li:hover{padding-left:6px;}
  .svc-list li:hover .svc-name{color:var(--ember-light);}
  .panel.wolf .svc-list li:hover .svc-name{color:var(--steel);}

  @keyframes border-breathe{
    0%,100%{box-shadow:-2px 0 0 0 var(--ember),0 0 0 0 rgba(255,77,0,0);}
    50%{box-shadow:-2px 0 0 0 var(--ember),0 0 18px 0 rgba(255,77,0,.35);}
  }
  .why-card.highlight{animation:border-breathe 4.2s ease-in-out infinite;}

  /* ---- footer link sweep ---- */
  footer .navlinks a{position:relative;}
  footer .navlinks a::after{
    content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;
    background:var(--ember-light);transition:width .3s ease;
  }
  footer .navlinks a:hover::after{width:100%;}

  /* ---- ambient section circuitry ---- */
  .section-circuit{position:absolute;inset:0;pointer-events:none;opacity:.22;overflow:hidden;}

  /* style A — constellation / node network (Acerca de Itzalo) */
  .node-net{position:absolute;inset:0;pointer-events:none;opacity:.5;overflow:hidden;}
  @keyframes node-pulse{
    0%,100%{opacity:.35;r:2.6;}
    50%{opacity:1;r:3.6;}
  }
  .node-net circle.node{animation:node-pulse 3.4s ease-in-out infinite;}

  /* style B — PCB dot-grid texture, full-section wash (Misión/Visión/Valores) */
  .grid-bg{position:absolute;inset:0;pointer-events:none;}

  /* style C — per-panel circuitry (Dualidad): angular traces on wolf, vein-like flow on phoenix */
  .panel{position:relative;overflow:hidden;}
  .panel-circuit{position:absolute;inset:0;pointer-events:none;opacity:.28;}

  /* style D — horizontal data ticker (¿Por qué Itzalo?) */
  .ticker{position:absolute;left:0;right:0;top:0;width:100%;height:100%;pointer-events:none;opacity:.5;overflow:hidden;}
  @keyframes ticker-flow{ to{ stroke-dashoffset:-160; } }
  .ticker .tick{stroke-dasharray:2 14;animation:ticker-flow 9s linear infinite;}

  /* style E — radiating signal rings (CTA final) */
  .signal-rings{position:absolute;pointer-events:none;opacity:.5;}
  @keyframes ring-expand{
    0%{transform:scale(.7);opacity:.55;}
    100%{transform:scale(1.5);opacity:0;}
  }
  .signal-rings circle{animation:ring-expand 4s cubic-bezier(.2,.6,.4,1) infinite;transform-origin:center;}
  .signal-rings circle:nth-child(2){animation-delay:1.3s;}
  .signal-rings circle:nth-child(3){animation-delay:2.6s;}

  /* style F — traveling signal pulse along the process connector line (Cómo trabajamos) */
  .process-pulse{
    position:absolute;top:22px;left:11%;width:8px;height:8px;margin:-4px 0 0 -4px;
    border-radius:50%;background:var(--ember-light);z-index:1;pointer-events:none;
    box-shadow:0 0 8px 2px rgba(255,168,61,.7),0 0 18px 5px rgba(255,77,0,.3);
    animation:process-pulse-travel 4.6s ease-in-out infinite;
  }
  @keyframes process-pulse-travel{
    0%{left:11%;opacity:0;}
    10%{opacity:1;}
    90%{opacity:1;}
    100%{left:89%;opacity:0;}
  }
  @media (max-width:900px){ .process-pulse{display:none;} }

  /* style G — camera-focus reticle field (Primeros trabajos): nods to the photo evidence in the carousel */
  .af-field{position:absolute;inset:0;pointer-events:none;opacity:.5;overflow:hidden;color:var(--steel);}
  .light .af-field{color:#9AA6B4;opacity:.7;}
  @keyframes af-pulse{
    0%,100%{opacity:.2;}
    50%{opacity:.85;}
  }
  .af-field use{animation:af-pulse 4s ease-in-out infinite;}

  /* style H — slow radar sweep (FAQ): searching for your answer */
  .radar-sweep{
    position:absolute;inset:0;pointer-events:none;overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 70% 65% at 82% 20%,#000 0%,transparent 72%);
            mask-image:radial-gradient(ellipse 70% 65% at 82% 20%,#000 0%,transparent 72%);
  }
  .radar-sweep::before{
    content:"";position:absolute;left:calc(82% - 340px);top:calc(20% - 340px);width:680px;height:680px;
    background:conic-gradient(from 0deg,transparent 0deg,rgba(94,198,232,.35) 18deg,transparent 55deg,transparent 360deg);
    animation:radar-spin 7s linear infinite;
  }
  @keyframes radar-spin{ to{ transform:rotate(360deg); } }