:root{
    --bg:#060B18;
    --bg2:#0A1226;
    --panel:#0E1730;
    --panel-2:#121D3B;
    --blue:#2F7BFF;
    --cyan:#35D0FF;
    --green:#17D66B;
    --lime:#B6FF3D;
    --gold:#FFC400;
    --orange:#FF7A1A;
    --text:#EAF1FF;
    --text-soft:#8FA0C4;
    --text-dim:#5E6D91;
    --line: rgba(150,180,255,0.14);
    --line-strong: rgba(150,180,255,0.28);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;
    background-image:radial-gradient(circle, rgba(150,180,255,0.05) 1px, transparent 1px);
    background-size:28px 28px;
  }
  h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600;margin:0;letter-spacing:-0.01em;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  a{color:inherit;}
  :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
  .glow-text{text-shadow:0 0 24px currentColor;}

  header.site{position:sticky;top:0;z-index:50;background:rgba(6,11,24,0.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
  .navbar{max-width:1180px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;}
  .logo{display:flex;align-items:center;gap:10px;}
  .logo img{height:30px;filter:drop-shadow(0 0 10px rgba(47,123,255,0.5));}
  .logo span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:0.02em;}
  nav.links{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:var(--text-soft);}
  nav.links a{text-decoration:none;}
  nav.links a:hover{color:var(--cyan);}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;font-size:14.5px;font-weight:600;border-radius:8px;text-decoration:none;font-family:'Inter';border:1.5px solid transparent;transition:all .15s;}
  .btn-electric{background:var(--blue);color:#fff;box-shadow:0 0 0 1px rgba(47,123,255,0.4), 0 8px 24px rgba(47,123,255,0.35);}
  .btn-electric:hover{background:var(--cyan);box-shadow:0 0 0 1px rgba(53,208,255,0.5), 0 8px 28px rgba(53,208,255,0.4);}
  .btn-ghost{border-color:var(--line-strong);color:var(--text);}
  .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}
  .btn-gold{background:var(--gold);color:#1a1300;box-shadow:0 8px 24px rgba(255,196,0,0.28);}
  .btn-gold:hover{filter:brightness(1.08);}

  /* HERO */
  .hero{padding:74px 0 90px;position:relative;overflow:hidden;}
  .hero::before{
    content:"";position:absolute;top:-200px;right:-150px;width:600px;height:600px;border-radius:50%;
    background:radial-gradient(circle, rgba(47,123,255,0.22), transparent 70%);pointer-events:none;
  }
  .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;position:relative;z-index:1;}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--cyan);margin-bottom:20px;}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);}
  .hero h1{font-size:46px;line-height:1.14;color:var(--text);margin-bottom:20px;}
  .hero p.lead{font-size:17.5px;color:var(--text-soft);max-width:44ch;margin-bottom:32px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
  .hero-phones{display:flex;gap:24px;flex-wrap:wrap;font-size:14.5px;color:var(--text-dim);border-top:1px solid var(--line);padding-top:20px;}
  .hero-phones strong{color:var(--text);}

  .readout{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:30px;}
  .readout-top{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text-dim);letter-spacing:0.05em;margin-bottom:22px;}
  .readout-top .live{display:flex;align-items:center;gap:6px;color:var(--green);}
  .readout-top .live .d{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
  .readout-icon{display:flex;justify-content:center;padding:10px 0 22px;}
  .readout-icon img{width:130px;filter:drop-shadow(0 0 26px rgba(47,123,255,0.45));}
  .readout-rows{border-top:1px solid var(--line);}
  .readout-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;}
  .readout-row span:first-child{color:var(--text-dim);}
  .readout-row span:last-child{color:var(--text);font-weight:600;}

  section{padding:92px 0;}
  .kicker{color:var(--cyan);font-size:13px;font-weight:700;letter-spacing:0.03em;margin-bottom:10px;}
  .section-head{max-width:640px;margin-bottom:48px;}
  .section-head h2{font-size:31px;line-height:1.28;color:var(--text);}
  .section-head p{margin-top:14px;color:var(--text-soft);font-size:16px;}

  /* STATS */
  .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
  .stat-cell{background:var(--panel);padding:32px 28px;position:relative;}
  .stat-cell::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));}
  .stat-cell .num{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;color:var(--gold);text-shadow:0 0 20px rgba(255,196,0,0.35);}
  .stat-cell p{font-size:14px;color:var(--text-soft);margin-top:10px;}
  .stats-foot{font-size:12.5px;color:var(--text-dim);margin-top:20px;}

  /* ABOUT */
  .about{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center;}
  .about-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;text-align:center;}
  .about-panel img{width:110px;filter:drop-shadow(0 0 20px rgba(47,123,255,0.4));margin-bottom:14px;}
  .about-panel span{font-size:12.5px;color:var(--text-dim);}
  .about-text p{color:var(--text-soft);font-size:16px;margin:0 0 16px;}
  .about-text .lead-q{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:22px;color:var(--text);line-height:1.4;margin:0 0 20px;letter-spacing:-0.01em;}

  /* SERVICIOS as data-panel rows */
  .service-row{
    display:grid;grid-template-columns:5px 1fr 1.3fr;gap:24px;
    padding:24px 22px;margin-bottom:2px;background:var(--panel);border-radius:10px;align-items:start;
  }
  .service-row .bar{border-radius:3px;box-shadow:0 0 12px currentColor;height:100%;min-height:44px;}
  .service-row:nth-child(1) .bar{background:var(--blue);color:var(--blue);}
  .service-row:nth-child(2) .bar{background:var(--green);color:var(--green);}
  .service-row:nth-child(3) .bar{background:var(--lime);color:var(--lime);}
  .service-row:nth-child(4) .bar{background:var(--orange);color:var(--orange);}
  .service-row:nth-child(5) .bar{background:var(--gold);color:var(--gold);}
  .service-row h3{font-size:18px;margin-bottom:6px;color:var(--text);}
  .service-row p{margin:0;color:var(--text-soft);font-size:14.5px;}

  /* CAE */
  .cae{background:var(--bg2);}
  .cae-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:10px;position:relative;}
  .cae-node{position:relative;padding:0 20px 0 0;}
  .cae-node .dot{width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);margin-bottom:16px;}
  .cae-node .line{position:absolute;top:5px;left:12px;right:-8px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--line));}
  .cae-node:last-child .line{display:none;}
  .cae-node h3{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:6px;}
  .cae-node span{font-size:13.5px;color:var(--text-dim);}
  .cae-callout{margin-top:44px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
  .cae-callout p{font-family:'Space Grotesk';font-weight:600;font-size:18.5px;margin:0;max-width:50ch;color:var(--text);}

  /* FOTOVOLTAICA */
  .pv-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;}
  .pv-cell{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center;}
  .pv-cell .n{width:32px;height:32px;border-radius:50%;background:rgba(47,123,255,0.15);color:var(--cyan);font-family:'Space Grotesk';font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 0 12px rgba(53,208,255,0.25);}
  .pv-cell h3{font-size:14.5px;font-weight:600;color:var(--text);margin:0;}

  /* EMPRESAS */
  .sector-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
  .sector-tag{font-size:13.5px;font-weight:500;padding:9px 16px;border-radius:8px;border:1px solid var(--line-strong);color:var(--text-soft);}
  .empresas-cta{margin-top:36px;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:32px 32px;border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
  .empresas-cta p{font-family:'Space Grotesk';font-size:19px;font-weight:600;margin:0;max-width:38ch;}

  /* VALORES */
  .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .value{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;}
  .value .ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .value:nth-child(1) .ico{background:rgba(47,123,255,0.15);box-shadow:0 0 14px rgba(47,123,255,0.25);}
  .value:nth-child(2) .ico{background:rgba(23,214,107,0.15);box-shadow:0 0 14px rgba(23,214,107,0.25);}
  .value:nth-child(3) .ico{background:rgba(255,122,26,0.15);box-shadow:0 0 14px rgba(255,122,26,0.25);}
  .value:nth-child(4) .ico{background:rgba(255,196,0,0.15);box-shadow:0 0 14px rgba(255,196,0,0.25);}
  .value .ico svg{width:16px;height:16px;stroke:var(--text);fill:none;stroke-width:2;}
  .value h3{font-size:16.5px;margin-bottom:8px;color:var(--text);font-weight:600;}
  .value p{font-size:14px;color:var(--text-soft);margin:0;}

  /* PROCESO */
  .proc-rail{position:relative;padding-top:8px;}
  .rail-line{height:2px;background:linear-gradient(90deg,var(--blue),var(--green),var(--lime),var(--orange),var(--gold));border-radius:2px;margin-bottom:26px;}
  .steps-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
  .step{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 14px;}
  .step .n{font-family:'Space Grotesk';font-weight:700;font-size:18px;color:var(--cyan);}
  .step h3{font-size:12.5px;font-weight:600;margin-top:8px;color:var(--text);}

  /* CONTACT */
  .contact{background:var(--bg2);}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
  .contact-phones{display:flex;flex-direction:column;gap:8px;margin:22px 0 0;font-size:17px;}
  .form-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
  .form-row.full{grid-template-columns:1fr;}
  label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:6px;}
  input,textarea{width:100%;border:none;border-bottom:1.5px solid var(--line-strong);background:transparent;padding:8px 0;font-family:'Inter';font-size:14.5px;color:var(--text);}
  input:focus,textarea:focus{outline:none;border-bottom-color:var(--cyan);}
  .form-submit{width:100%;justify-content:center;margin-top:20px;display:flex;}

  footer{padding:30px 0;font-size:13px;color:var(--text-dim);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
  footer img{height:24px;opacity:0.85;}

  /* ============================================================
     Reestructuración — utilidades, navegación móvil, formulario y
     breakpoints responsive. La paleta y el layout de escritorio se
     mantienen intactos: sólo se adaptan a pantallas pequeñas.
     ============================================================ */

  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }

  /* Los <img> llevan width/height para evitar saltos de layout (CLS);
     aquí fijamos una dimensión y dejamos la otra proporcional. */
  .logo img{height:30px;width:auto;}
  .readout-icon img{width:130px;height:auto;}
  .about-panel img{width:110px;height:auto;}
  footer img{height:24px;width:auto;}

  button.btn{cursor:pointer;font-family:'Inter',sans-serif;}
  button.btn:disabled{opacity:.6;cursor:not-allowed;}

  /* --- Botón de menú (sólo visible en móvil) --- */
  .nav-toggle{
    display:none;width:42px;height:42px;padding:0;
    border:1px solid var(--line-strong);border-radius:8px;background:transparent;
    cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;
  }
  .nav-toggle span{position:relative;}
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{
    display:block;width:18px;height:2px;background:var(--text);border-radius:2px;
    transition:transform .18s ease,background .18s ease;
  }
  .nav-toggle span::before,
  .nav-toggle span::after{content:"";position:absolute;left:0;}
  .nav-toggle span::before{top:-6px;}
  .nav-toggle span::after{top:6px;}
  .nav-toggle[aria-expanded="true"] span{background:transparent;}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

  /* --- Campo "Adjuntar factura" --- */
  .file-field{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px;}
  .file-field input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
  .file-trigger{
    display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:8px;
    border:1.5px solid var(--line-strong);color:var(--text);
    font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s;
  }
  .file-trigger:hover{border-color:var(--cyan);color:var(--cyan);}
  .file-field input[type="file"]:focus-visible + .file-trigger{outline:2px solid var(--cyan);outline-offset:3px;}
  .file-name{font-size:13px;color:var(--text-soft);word-break:break-all;}

  /* --- Validación de campos --- */
  input.invalid,textarea.invalid{border-bottom-color:var(--orange);}
  .field-error{display:none;margin:6px 0 0;font-size:12px;color:var(--orange);}
  .field-error.show{display:block;}

  /* --- Estado de envío --- */
  .form-status{display:none;margin-top:16px;font-size:13.5px;align-items:center;gap:10px;line-height:1.5;}
  .form-status.show{display:flex;}
  .form-status.is-ok{color:var(--green);}
  .form-status.is-error{color:var(--orange);}
  .spinner{
    width:16px;height:16px;flex-shrink:0;border-radius:50%;
    border:2px solid var(--line-strong);border-top-color:var(--cyan);
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ======================= Responsive ======================= */

  /* Tablet / móvil ancho — acompaña al colapso de grids a 900px */
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .about{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:1fr;}
    .service-row{grid-template-columns:5px 1fr;}
    .cae-flow{grid-template-columns:1fr 1fr;row-gap:26px;}
    .cae-node .line{display:none;}
    .values-grid{grid-template-columns:1fr 1fr;}
    .steps-grid{grid-template-columns:1fr 1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}

    .navbar{position:relative;flex-wrap:wrap;}
    .nav-toggle{display:flex;}
    .navbar > .btn-electric{display:none;}
    nav.links{
      display:none;position:absolute;top:100%;left:0;right:0;
      flex-direction:column;gap:0;padding:8px 32px 16px;
      background:var(--bg);border-bottom:1px solid var(--line);
      box-shadow:0 24px 40px rgba(0,0,0,0.4);
    }
    nav.links.open{display:flex;}
    nav.links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--text);}
    nav.links a:last-child{border-bottom:none;}

    .cae-callout,.empresas-cta{flex-direction:column;align-items:flex-start;}
  }

  /* Tablet */
  @media(max-width:768px){
    .wrap{padding:0 20px;}
    .navbar{padding:14px 20px;}
    nav.links{padding-left:20px;padding-right:20px;}
    section{padding:64px 0;}
    .hero{padding:48px 0 62px;}
    .hero-grid{gap:36px;}
    .hero h1{font-size:34px;}
    .hero p.lead{font-size:16px;}
    .section-head{margin-bottom:34px;}
    .section-head h2{font-size:25px;}
    .about-text .lead-q{font-size:20px;}
    .readout{padding:24px;}
    .cae-flow{grid-template-columns:1fr 1fr;}
  }

  /* Móvil (probado a 375–414px) */
  @media(max-width:480px){
    .wrap{padding:0 16px;}
    .navbar{padding:12px 16px;}
    nav.links{padding-left:16px;padding-right:16px;}
    .logo span{font-size:15px;}
    .hero{padding:40px 0 52px;}
    .hero h1{font-size:27px;}
    .hero p.lead{font-size:15.5px;}
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{justify-content:center;}
    .hero-phones{gap:10px;}
    section{padding:54px 0;}
    .section-head h2{font-size:21px;}
    .stat-cell{padding:26px 22px;}
    .stat-cell .num{font-size:28px;}
    .values-grid,.steps-grid,.cae-flow{grid-template-columns:1fr;}
    .service-row{padding:20px 18px;gap:18px;}
    .cae-node{padding-right:0;}
    .form-card{padding:22px 20px;}
    .contact-phones{font-size:15.5px;}
  }