:root{
    --navy-950:#081025;
    --navy-900:#0a1a3a;
    --navy-800:#122a52;
    --navy-700:#1b3868;
    --green:#7ec13e;
    --green-dark:#5fa029;
    --paper:#f6f7fa;
    --white:#ffffff;
    --ink:#0f1a30;
    --slate:#5b6478;
    --line:#e3e6ee;
    --radius:14px;
    --maxw:1200px;
    --shadow:0 12px 34px -14px rgba(10,26,58,0.28);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    margin:0;
    line-height:1.08;
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  img{max-width:100%;display:block;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-weight:500;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;border-radius:999px;
    font-weight:600;font-size:15px;
    cursor:pointer;border:none;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--green);color:var(--navy-950);}
  .btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(126,193,62,.55);}
  .btn-ghost{background:rgba(255,255,255,.08);color:var(--white);border:1px solid rgba(255,255,255,.28);}
  .btn-ghost:hover{background:rgba(255,255,255,.16);}
  .btn-outline-dark{background:transparent;color:var(--navy-900);border:1.5px solid var(--navy-900);}
  .btn-outline-dark:hover{background:var(--navy-900);color:var(--white);}
  section{position:relative;}

  /* ---------- HEADER ---------- */
  header{
    position:sticky;top:0;z-index:200;
    background:rgba(8,16,37,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav{
    max-width:var(--maxw);margin:0 auto;padding:16px 32px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  .brand{display:flex;align-items:center;gap:11px;}
  .brand-mark{
    width:38px;height:38px;border-radius:10px;
    background:linear-gradient(145deg,#ffb020,#e6432f);
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk';font-weight:700;color:var(--navy-950);font-size:19px;
    flex-shrink:0;
  }
  .brand-text{color:var(--white);line-height:1.15;}
  .brand-text strong{font-family:'Space Grotesk';font-size:18px;letter-spacing:.02em;font-weight:700;display:block;}
  .brand-text span{font-size:10.5px;color:#9fb0d1;letter-spacing:.03em;}
  .nav-links{display:flex;align-items:center;gap:34px;}
  .nav-links a{
    color:#dbe3f4;font-size:14.5px;font-weight:500;
    position:relative;padding:6px 0;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
    background:var(--green);transition:width .2s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-actions{display:flex;align-items:center;gap:12px;}
  .nav-toggle{display:none;background:none;border:none;color:var(--white);font-size:26px;cursor:pointer;}

  /* ---------- HERO ---------- */
  .hero{
    background-image: url('./banner.png');
	
    color:var(--white);
    overflow:hidden;
    padding:88px 0 64px;
  }
  .hero-grid{
    display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  }
  #network-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none;}
  .hero-copy{position:relative;z-index:2;}
  .hero h1{font-size:clamp(34px,4.2vw,54px);font-weight:700;margin-bottom:20px;}
  .hero h1 em{color:var(--green);font-style:normal;}
  .hero p.lead{font-size:17.5px;color:#c3cee6;max-width:520px;margin-bottom:32px;line-height:1.6;}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px;}
  .hero-stats{display:flex;gap:34px;flex-wrap:wrap;}
  .hero-stats div strong{font-family:'Space Grotesk';font-size:26px;display:block;color:var(--white);}
  .hero-stats div span{font-size:12.5px;color:#8fa0c4;}

  .hero-panel{
    position:relative;z-index:2;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);
    border-radius:20px;padding:26px;
    backdrop-filter:blur(6px);
  }
  .hero-panel img{border-radius:12px;width:100%;height:220px;object-fit:cover;margin-bottom:18px;}
  .hero-feat-list li{
    display:flex;align-items:center;gap:12px;
    padding:11px 0;border-top:1px solid rgba(255,255,255,.1);
    font-size:14.5px;color:#e6ecfb;
  }
  .hero-feat-list li:first-child{border-top:none;}
  .hero-feat-list .ico{
    width:30px;height:30px;border-radius:9px;flex-shrink:0;
    background:rgba(126,193,62,.16);color:var(--green);
    display:flex;align-items:center;justify-content:center;font-size:15px;
  }

  /* ---------- SOLUTIONS STRIP ---------- */
  .solutions-strip{background:var(--paper);padding:0;}
  .strip-inner{
    display:grid;grid-template-columns:repeat(5,1fr);
    max-width:var(--maxw);margin:0 auto;
  }
  .strip-item{
    padding:30px 20px;text-align:center;border-right:1px solid var(--line);
  }
  .strip-item:last-child{border-right:none;}
  .strip-item .ico{
    width:46px;height:46px;border-radius:12px;margin:0 auto 12px;
    background:var(--navy-900);color:var(--green);
    display:flex;align-items:center;justify-content:center;font-size:20px;
  }
  .strip-item strong{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px;}
  .strip-item span{font-size:12.5px;color:var(--slate);}

  .tailor-band{
    background:#eaf5df;border-top:1px solid #d9ecc6;border-bottom:1px solid #d9ecc6;
    padding:20px 0;
  }
  .tailor-inner{
    max-width:var(--maxw);margin:0 auto;padding:0 32px;
    display:flex;align-items:center;gap:16px;font-size:15px;color:#2c3a1e;
  }
  .tailor-inner .ico{
    width:38px;height:38px;border-radius:10px;background:var(--green);
    color:var(--navy-950);display:flex;align-items:center;justify-content:center;
    flex-shrink:0;font-size:17px;
  }
  .tailor-inner strong{color:var(--navy-950);}

  /* ---------- SECTION HEADER ---------- */
  .section{padding:96px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head .eyebrow{color:var(--green-dark);margin-bottom:12px;display:block;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:16px;}
  .section-head p{color:var(--slate);font-size:16px;line-height:1.6;}
  .on-dark .section-head p{color:#b7c2dd;}
  .on-dark .section-head .eyebrow{color:var(--green);}
  .on-dark .section-head h2{color:var(--white);}

  /* ---------- NOSOTROS ---------- */
  #nosotros{background:var(--white);}
  .about-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:64px;}
  .about-top p{color:var(--slate);font-size:16px;line-height:1.7;margin-bottom:28px;}
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .pillar{background:var(--paper);border-radius:var(--radius);padding:24px;border:1px solid var(--line);}
  .pillar .ico{width:38px;height:38px;border-radius:10px;background:var(--navy-900);color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:17px;}
  .pillar h4{font-size:15.5px;margin-bottom:8px;}
  .pillar p{font-size:13.5px;color:var(--slate);line-height:1.55;}

  .values-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;margin-bottom:64px;}
  .values-list li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);}
  .values-list li:first-child{border-top:none;}
  .values-list .num{font-family:'IBM Plex Mono';font-size:12px;color:var(--green-dark);padding-top:2px;flex-shrink:0;width:24px;}
  .values-list h4{font-size:15px;margin-bottom:4px;}
  .values-list p{font-size:13.5px;color:var(--slate);line-height:1.5;}

  .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:6px;}
  .timeline::before{content:"";position:absolute;top:22px;left:5%;right:5%;height:2px;background:var(--line);}
  .tl-item{position:relative;text-align:center;padding-top:0;}
  .tl-dot{width:44px;height:44px;border-radius:50%;background:var(--navy-900);color:var(--green);
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px;position:relative;z-index:2;
    font-family:'IBM Plex Mono';font-size:13px;font-weight:600;border:4px solid var(--white);}
  .tl-item strong{display:block;font-size:14.5px;margin-bottom:6px;}
  .tl-item p{font-size:12.5px;color:var(--slate);padding:0 10px;line-height:1.5;}

  /* ---------- SERVICIOS ---------- */
  #servicios{background:var(--navy-950);color:var(--white);}
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .svc-card{
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius);
    padding:28px;
    transition:transform .2s ease, border-color .2s ease;
  }
  .svc-card:hover{transform:translateY(-4px);border-color:rgba(126,193,62,.5);}
  .svc-card .ico{
    width:46px;height:46px;border-radius:12px;background:rgba(126,193,62,.15);
    color:var(--green);display:flex;align-items:center;justify-content:center;
    font-size:21px;margin-bottom:18px;
  }
  .svc-card .tag{
    font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.08em;
    color:var(--green);text-transform:uppercase;margin-bottom:8px;display:block;
  }
  .svc-card h3{font-size:18.5px;margin-bottom:12px;font-weight:600;}
  .svc-card ul{margin-top:14px;}
  .svc-card li{
    font-size:13.5px;color:#c3cee6;padding:7px 0;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;gap:9px;align-items:flex-start;
  }
  .svc-card li:first-child{border-top:none;}
  .svc-card li::before{content:"✓";color:var(--green);flex-shrink:0;font-weight:700;font-size:12px;margin-top:1.5px;}

  .badges-row{
    margin-top:60px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;
    border-top:1px solid rgba(255,255,255,.1);padding-top:40px;
  }
  .badge-item{text-align:center;padding:0 12px;}
  .badge-item .ico{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--green);color:var(--green);
    display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:18px;}
  .badge-item span{font-size:13px;font-weight:600;color:var(--white);}

  /* ---------- CONTACTO ---------- */
  #contacto{background:var(--paper);}
  .contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;}
  .contact-info li{
    display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line);
  }
  .contact-info li:first-child{border-top:none;}
  .contact-info .ico{
    width:44px;height:44px;border-radius:11px;background:var(--navy-900);color:var(--green);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:19px;
  }
  .contact-info h4{font-size:14px;color:var(--slate);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
  .contact-info p{font-size:16.5px;font-weight:600;color:var(--ink);}
  .contact-info small{display:block;font-size:12.5px;color:var(--slate);font-weight:400;margin-top:2px;}

  .why-panel{background:var(--navy-950);border-radius:20px;padding:36px;color:var(--white);}
  .why-panel h3{font-size:20px;margin-bottom:24px;}
  .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  .why-item{display:flex;gap:12px;align-items:flex-start;}
  .why-item .ico{width:34px;height:34px;border-radius:9px;background:rgba(126,193,62,.15);color:var(--green);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;}
  .why-item strong{display:block;font-size:14px;margin-bottom:3px;}
  .why-item p{font-size:12.5px;color:#aab6d3;line-height:1.5;}
  .why-cta{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .why-cta p{font-size:14px;color:#c3cee6;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy-950);color:#8fa0c4;padding:44px 0 26px;border-top:1px solid rgba(255,255,255,.08);}
  .foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-bottom:28px;}
  .foot-links{display:flex;gap:26px;flex-wrap:wrap;}
  .foot-links a{font-size:13.5px;color:#c3cee6;}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);}

  .whatsapp-float{
    position:fixed;bottom:26px;right:26px;z-index:300;
    width:56px;height:56px;border-radius:50%;
    background:var(--green);color:var(--navy-950);
    display:flex;align-items:center;justify-content:center;
    font-size:26px;box-shadow:0 10px 26px -8px rgba(126,193,62,.6);
  }

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:980px){
    .hero-grid{grid-template-columns:1fr;}
    .strip-inner{grid-template-columns:repeat(3,1fr);}
    .strip-item:nth-child(3){border-right:none;}
    .about-top,.values-grid,.contact-grid{grid-template-columns:1fr;gap:36px;}
    .pillars{grid-template-columns:1fr;}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .badges-row{grid-template-columns:repeat(3,1fr);row-gap:26px;}
    .timeline{grid-template-columns:repeat(2,1fr);row-gap:30px;}
    .timeline::before{display:none;}
    .why-grid{grid-template-columns:1fr;}
  }
  @media(max-width:680px){
    .nav-links{
      position:fixed;top:70px;left:0;right:0;bottom:0;
      background:var(--navy-950);flex-direction:column;align-items:flex-start;
      padding:28px 32px;gap:22px;transform:translateX(100%);
      transition:transform .25s ease;
    }
    .nav-links.open{transform:translateX(0);}
    .nav-toggle{display:block;}
    .nav-actions .btn-ghost{display:none;}
    .strip-inner{grid-template-columns:repeat(2,1fr);}
    .strip-item:nth-child(3){border-right:1px solid var(--line);}
    .strip-item:nth-child(2n){border-right:none;}
    .services-grid{grid-template-columns:1fr;}
    .badges-row{grid-template-columns:repeat(2,1fr);}
    .hero-cta{flex-direction:column;align-items:stretch;}
    .hero-cta .btn{justify-content:center;}
    .section{padding:64px 0;}
    .wrap{padding:0 20px;}
    .nav{padding:14px 20px;}
  }

/* ================= SERVICE DETAIL PAGES ================= */
.breadcrumb{background:var(--paper);border-bottom:1px solid var(--line);}
.breadcrumb-inner{max-width:var(--maxw);margin:0 auto;padding:14px 32px;font-size:13.5px;color:var(--slate);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.breadcrumb-inner a{color:var(--navy-700);font-weight:600;}
.breadcrumb-inner a:hover{color:var(--green-dark);}

.svc-hero{
  background:linear-gradient(100deg, rgba(8,16,37,.94) 0%, rgba(8,16,37,.72) 42%, rgba(8,16,37,.34) 100%), var(--hero-img) center/cover no-repeat;
  color:#fff;padding:72px 0 56px;
}
.svc-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:start;}
.svc-hero .eyebrow{color:var(--green);margin-bottom:14px;display:block;}
.svc-hero h1{font-size:clamp(30px,4vw,46px);margin-bottom:16px;}
.svc-hero h1 .accent{color:var(--green);}
.svc-hero .lead{font-size:16.5px;color:#c3cee6;line-height:1.65;max-width:560px;margin-bottom:10px;}
.svc-hero-badges{display:flex;flex-direction:column;gap:0;}
.svc-hero-badges li{
  display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);
}
.svc-hero-badges li:first-child{border-top:none;}
.svc-hero-badges .ico{width:36px;height:36px;border-radius:10px;background:rgba(126,193,62,.18);color:var(--green);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.svc-hero-badges strong{display:block;font-size:14px;}
.svc-hero-badges span{font-size:12.5px;color:#a9b6d6;}
.svc-hero-cta{margin-top:26px;}

.stat-strip{background:var(--white);border-bottom:1px solid var(--line);}
.stat-strip-inner{max-width:var(--maxw);margin:0 auto;padding:26px 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px;}
.stat-item{display:flex;align-items:center;gap:12px;}
.stat-item .ico{width:42px;height:42px;border-radius:11px;background:var(--navy-900);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.stat-item strong{display:block;font-size:15px;color:var(--ink);}
.stat-item span{font-size:12px;color:var(--slate);}

.svc-body{padding:80px 0;background:var(--white);}
.svc-cols{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:44px;align-items:start;}
.svc-col h3{font-size:19px;margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--line);}

.icon-col-list li{display:flex;gap:13px;padding:16px 0;border-top:1px solid var(--line);}
.icon-col-list li:first-child{border-top:none;padding-top:0;}
.icon-col-list .ico{width:34px;height:34px;border-radius:9px;background:var(--paper);color:var(--green-dark);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;}
.icon-col-list h4{font-size:14.5px;margin-bottom:4px;}
.icon-col-list p{font-size:12.8px;color:var(--slate);line-height:1.5;}

.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.mini-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;}
.mini-card .ico{width:34px;height:34px;border-radius:9px;background:var(--navy-900);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:15px;}
.mini-card strong{display:block;font-size:12.8px;line-height:1.3;}
.mini-card small{font-size:11px;color:var(--slate);display:block;margin-top:3px;line-height:1.4;}

.benefit-list li{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);}
.benefit-list li:first-child{border-top:none;padding-top:0;}
.benefit-list .ico{width:30px;height:30px;border-radius:50%;background:rgba(126,193,62,.14);color:var(--green-dark);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13.5px;}
.benefit-list h4{font-size:14px;margin-bottom:3px;}
.benefit-list p{font-size:12.5px;color:var(--slate);line-height:1.5;}

.process-flow{display:flex;justify-content:space-between;gap:8px;margin:36px 0;flex-wrap:wrap;}
.process-step{flex:1;min-width:130px;text-align:center;position:relative;}
.process-step .circle{width:56px;height:56px;border-radius:50%;border:2px solid var(--navy-900);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;background:var(--paper);}
.process-step strong{display:block;font-size:12px;letter-spacing:.03em;color:var(--green-dark);margin-bottom:6px;}
.process-step p{font-size:12.5px;color:var(--slate);line-height:1.5;padding:0 6px;}
.process-arrow{align-self:center;color:var(--line);font-size:20px;padding-top:16px;}

.tag-band{
  margin:56px 0 0;background:var(--navy-950);border-radius:18px;padding:26px 32px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.tag-band p{font-size:16px;}
.tag-band strong{color:var(--green);}
.tag-band-badges{display:flex;gap:26px;flex-wrap:wrap;}
.tag-band-badges div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#c3cee6;}
.tag-band-badges .ico{width:28px;height:28px;border-radius:8px;background:rgba(126,193,62,.15);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}

.svc-footer-band{background:var(--navy-950);color:#fff;padding:34px 0;}
.svc-footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.svc-footer-contact{display:flex;gap:34px;flex-wrap:wrap;}
.svc-footer-contact div{display:flex;align-items:center;gap:10px;font-size:14px;color:#dbe3f4;}
.svc-footer-contact .ico{color:var(--green);font-size:16px;}

.svc-switcher{background:var(--paper);border-top:1px solid var(--line);padding:22px 0;}
.svc-switcher-inner{max-width:var(--maxw);margin:0 auto;padding:0 32px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.svc-switcher-inner span.lbl{font-size:12.5px;color:var(--slate);font-weight:600;margin-right:6px;}
.pill{
  font-size:12.8px;padding:8px 15px;border-radius:999px;background:var(--white);border:1px solid var(--line);
  color:var(--ink);font-weight:500;transition:all .15s ease;
}
.pill:hover{border-color:var(--green);color:var(--green-dark);}
.pill.active{background:var(--navy-950);color:#fff;border-color:var(--navy-950);}

@media(max-width:980px){
  .svc-hero-grid{grid-template-columns:1fr;}
  .svc-cols{grid-template-columns:1fr;}
  .stat-strip-inner{justify-content:flex-start;}
}
@media(max-width:680px){
  .mini-grid{grid-template-columns:1fr 1fr;}
  .process-flow{flex-direction:column;}
  .process-arrow{display:none;}
  .tag-band{flex-direction:column;align-items:flex-start;}
  .svc-footer-inner{flex-direction:column;align-items:flex-start;}
}

.logo-disetel {
    width: 400px;
    height: 150px;
}

/* =========================================================
   VARIABLES
========================================================= */

:root {
    --green: #3a9d24;
    --green-dark: #28791a;
    --blue: #063d82;
    --blue-dark: #032e66;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    width: 100%;
    height: 92px;

    background: #ffffff;

    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #dddddd;

    position: relative;
    z-index: 1000;
}

.nav-container {
    width: calc(100% - 120px);
    max-width: 1150px;

    height: 100%;
    margin: auto;

    display: flex;
    align-items: center;

    gap: 35px;
}


/* =========================================================
   LOGO
========================================================= */

.brand {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.brand img {
    width: 245px;
    height: auto;
}


/* =========================================================
   MENU
========================================================= */

.nav-links {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 38px;
}

.nav-links a {
    position: relative;

    color: #151515;

    font-size: 16px;
    font-weight: 500;

    padding: 35px 0;

    transition: color .2s ease;
}

.nav-links a:hover {
    color: #06439b;
}

.nav-links a.active {
    color: #06439b;
    font-weight: 700;
}

.nav-links a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 21px;

    height: 2px;

    background: #06439b;
}


/* =========================================================
   WHATSAPP
========================================================= */

.nav-actions {
    display: flex;
    align-items: center;

    gap: 12px;
}

.whatsapp-btn {
    width: 160px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    background: #318037;

    color: white;

    border-radius: 7px;

    font-size: 16px;
    font-weight: 600;

    transition: all .2s ease;
}

.whatsapp-btn:hover {
    background: #24682b;

    transform: translateY(-1px);
}

.whatsapp-icon {
    width: 22px;
    height: 22px;

    border: 2px solid white;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    width: 100%;

    min-height: 318px;

    overflow: hidden;

    background: #063d82;
}


/* =========================================================
   BACKGROUND
========================================================= */

.hero-background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: 0;
}


/* =========================================================
   OVERLAY
========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 48, 104, .94) 0%,
            rgba(3, 55, 115, .82) 35%,
            rgba(4, 65, 130, .25) 65%,
            rgba(3, 55, 115, .15) 100%
        );
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    position: relative;

    z-index: 2;

    width: calc(100% - 120px);
    max-width: 1150px;

    min-height: 318px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   TEXTO
========================================================= */

.hero-copy {
    width: 58%;

    color: white;

    padding: 20px 0;
}

.hero-copy h1 {
    margin: 0 0 14px;

    font-size: clamp(34px, 3.3vw, 48px);

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -1px;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, .25);
}

.hero-copy p {
    max-width: 610px;

    margin-bottom: 18px;

    font-size: 20px;

    line-height: 1.35;

    color: #ffffff;
}


/* =========================================================
   BOTON
========================================================= */

.hero-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 205px;

    height: 42px;

    padding: 0 25px;

    background: #3caa24;

    color: #ffffff;

    border-radius: 6px;

    font-size: 16px;

    font-weight: 700;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, .25);

    transition: all .2s ease;
}

.hero-button:hover {
    background: #2e8b1b;

    transform: translateY(-1px);
}


/* =========================================================
   PANEL DERECHO
========================================================= */

.hero-features {
    width: 310px;

    min-height: 318px;

    margin-right: 0;

    padding: 30px 28px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 66, 135, .94),
            rgba(4, 51, 109, .96)
        );

    border-left: 1px solid rgba(255, 255, 255, .18);

    box-shadow:
        -10px 0 30px rgba(0, 0, 0, .08);
}


/* =========================================================
   FEATURE
========================================================= */

.feature-item {
    display: flex;

    align-items: center;

    gap: 15px;

    color: white;

    font-size: 17px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   ICONOS
========================================================= */

.feature-icon {
    width: 34px;
    min-width: 34px;

    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 27px;

    font-weight: 400;

    color: #20a9ff;
}

.energy-icon {
    color: #ffe500;

    font-size: 29px;
}

.chart-icon {
    color: #10b9ff;

    font-size: 30px;
}

.gear-icon {
    color: #19c5ff;

    font-size: 30px;
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.nav-toggle {
    display: none;

    width: 42px;
    height: 42px;

    border: 0;

    background: transparent;

    cursor: pointer;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;

    background: #222;

    border-radius: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .nav-container,
    .hero-content {
        width: calc(100% - 50px);
    }

    .brand img {
        width: 210px;
    }

    .nav-links {
        gap: 22px;
    }

    .nav-links a {
        font-size: 15px;
    }

    .hero-features {
        width: 270px;
    }

    .feature-item {
        font-size: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .site-header {
        height: 76px;
    }

    .nav-container {
        width: calc(100% - 25px);
    }

    .brand img {
        width: 175px;
    }

    .nav-toggle {
        display: flex;
    }

    .whatsapp-btn {
        width: 42px;
        height: 42px;

        min-width: 42px;

        padding: 0;

        border-radius: 50%;
    }

    .whatsapp-btn span:last-child {
        display: none;
    }

    .nav-links {
        position: absolute;

        top: 76px;
        left: 0;

        width: 100%;

        margin: 0;

        padding: 10px 20px 20px;

        background: white;

        flex-direction: column;

        gap: 0;

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        transition: .25s ease;

        box-shadow:
            0 8px 15px rgba(0, 0, 0, .1);
    }

    .nav-links.open {
        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }

    .nav-links a {
        width: 100%;

        padding: 14px 10px;
    }

    .nav-links a.active::after {
        display: none;
    }


    /* HERO */

    .hero {
        min-height: auto;
    }

    .hero-background {
        min-height: 500px;

        object-fit: cover;

        object-position: center;
    }

    .hero-content {
        width: calc(100% - 35px);

        min-height: 500px;

        padding: 35px 0;

        flex-direction: column;

        align-items: stretch;

        justify-content: center;

        gap: 25px;
    }

    .hero-copy {
        width: 100%;
    }

    .hero-copy h1 {
        font-size: 35px;
    }

    .hero-copy p {
        font-size: 17px;
    }

    .hero-features {
        width: 100%;

        min-height: auto;

        padding: 22px;

        gap: 15px;

        background: rgba(3, 53, 112, .94);
    }

    .feature-item {
        font-size: 15px;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 500px) {

    .brand img {
        width: 155px;
    }

    .hero-copy h1 {
        font-size: 30px;
    }

    .hero-copy p {
        font-size: 16px;
    }

    .hero-features {
        padding: 18px;
    }

}