:root {
    --dark-bg: #181c24;
    --dark-bg-light: #232836;
    --dark-surface: #222633;
    --accent: #26efab;
    --accent-sec: #18dff2;
    --white: #f7fafc;
    --gray: #b0b6c1;
    --text: #d6e1f5;
    --shadow: 0 8px 32px 0 rgba(17, 20, 32, .30);
  }


  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  body {
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  /* En todos los contenedores, evitar usar 100vw directamente */
  .container,
  .hero-content,
  #hero {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--dark-bg);
    color: var(--text);
    min-height: 100vh;
  }

  .navbar,
  .footer {
    background: var(--dark-bg-light) !important;
    border-bottom: 1px solid #242b3a;
  }

  .navbar-brand img {
    height: 48px;
  }

  .navbar-nav .nav-link {
    color: var(--accent-sec) !important;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .2s;
  }

  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link:hover {
    color: var(--accent) !important;
  }

  #hero {
    background: url('../../assets/img/code_php3.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 68vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }




  #hero .container {
    z-index: 2;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .hero-blur {
    position: absolute;
    inset: 0;
    background: rgba(17, 23, 33, .75);
    backdrop-filter: blur(4px);
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 2;
  }

  /* Glow animado en títulos de sección */
  .section-title {
    position: relative;
    color: var(--accent-sec);
    text-shadow: 0 0 18px var(--accent), 0 0 2px #fff5;
    animation: glowTitle 2.4s infinite alternate;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 2.5rem;
    text-align: center;
  }

  @keyframes glowTitle {
    0% {
      text-shadow: 0 0 14px var(--accent), 0 0 2px #fff5;
    }

    100% {
      text-shadow: 0 0 26px var(--accent-sec), 0 0 8px #fff8;
    }
  }

  /* Glow animado en botón principal Hero */
  #hero .btn-outline-light {
    position: relative;
    border-width: 2.3px;
    box-shadow: 0 0 18px 0 var(--accent-sec), 0 0 2px #fff3;
    animation: pulseGlow 1.6s infinite alternate;
  }

  @keyframes pulseGlow {
    0% {
      box-shadow: 0 0 10px 0 var(--accent-sec), 0 0 2px #fff3;
    }

    100% {
      box-shadow: 0 0 28px 0 var(--accent), 0 0 8px #fff5;
    }
  }

  /* Card neón hover con animación */
  .card,
  .testimonial-accordion-item {
    box-shadow: 0 8px 32px 0 rgba(17, 20, 32, 0.18);
    border: 1.8px solid #222633;
    border-radius: 18px;
    transition: box-shadow .2s, border .21s, transform .2s;
    background: var(--dark-surface);
  }

  .card:hover,
  .testimonial-accordion-item:hover {
    border: 2.2px solid var(--accent-sec);
    box-shadow: 0 0 32px 0 var(--accent-sec), 0 0 10px var(--accent);
    animation: neonBorder 1.4s infinite alternate;
    transform: translateY(-5px) scale(1.015);
  }

  @keyframes neonBorder {
    from {
      box-shadow: 0 0 18px 0 var(--accent-sec), 0 0 8px var(--accent);
    }

    to {
      box-shadow: 0 0 38px 0 var(--accent), 0 0 20px var(--accent-sec);
    }
  }

  .card-title,
  .about-content h2,
  .testimonial-nombre-cliente {
    color: var(--accent);
    font-weight: bold;
    letter-spacing: 1px;
  }

  .bg-secondary,
  #services,
  #testimonials,
  #contact {
    background: var(--dark-bg-light) !important;
  }

  /* Servicios */
  #services .card i {
    color: var(--accent-sec);
    margin-bottom: .8rem;
    filter: drop-shadow(0 1px 4px #21294a60);
  }

  /* Nosotros */
  .about-content {
    padding: 2rem 2rem;
    border-left: 5px solid var(--accent);
    background: var(--dark-surface);
    border-radius: 18px;
    box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s;
  }

  .about-img {
    border-radius: 18px;
    max-width: 90%;
    filter: brightness(.93) drop-shadow(0 3px 18px #0a0e17);
    transition: filter .3s;
  }

  .about-img:hover {
    filter: brightness(1.02) drop-shadow(0 2px 24px var(--accent-sec));
  }

  /* Testimonios */
  .testimonial-img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--accent);
    margin-right: 1rem;
    box-shadow: 0 2px 6px #1b1f2a60;
  }

  .testimonial-btn-ver-mas {
    font-size: .95rem;
    border: 1.5px solid var(--accent-sec);
    background: transparent;
    color: var(--accent-sec);
    border-radius: 30px;
    padding: 0.2rem 1rem;
    margin-left: 10px;
    transition: background .2s, color .2s;
  }

  .testimonial-btn-ver-mas:hover {
    background: var(--accent-sec);
    color: var(--dark-surface);
  }

  .testimonial-accordion-body {
    background: transparent;
    padding-top: 1rem;
  }

  /* Blog */
  #blog .card-img-top {
    border-radius: 12px 12px 0 0;
    height: 180px;
    object-fit: cover;
    background: #232838;
  }

  /* Contacto */
  .contact-form {
    padding: 2rem 2.5rem;
    border-left: 4px solid var(--accent);
    border-radius: 18px;
    background: var(--dark-surface);
  }

  .contact-form label {
    color: var(--accent);
    font-weight: 500;
  }

  .form-control,
  .form-control:focus {
    background: #202538;
    color: var(--white);
    border: 1.5px solid var(--accent-sec);
    border-radius: 9px;
    box-shadow: none;
  }

  .form-control:focus {
    border-color: var(--accent);
  }

  .btn-success,
  .btn-outline-light,
  .btn-outline-light:focus {
    background: linear-gradient(90deg, var(--accent-sec) 0%, var(--accent) 100%);
    color: #1a1a1a;
    border: none;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 9px;
    box-shadow: 0 2px 8px #18dff260;
    transition: background .2s, color .2s;
  }

  .btn-outline-light:hover,
  .btn-success:hover {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-sec) 100%);
    color: var(--dark-bg-light);
  }

  /* Footer */
  .footer-logo {
    max-width: 140px;
  }

  .footer {
    border-top: 1.5px solid #232836;
    margin-top: 2.5rem;
    padding: 2.5rem 0 1.5rem 0;
  }

  .footer a {
    color: var(--accent-sec);
  }

  .footer a:hover {
    color: var(--accent);
  }

  /* Flotantes */
  .whatsapp-icon {
    position: fixed;
    bottom: 82px;
    right: 18px;
    z-index: 999;
    background: #232838;
    border-radius: 50%;
    box-shadow: 0 2px 8px #18dff230;
    padding: 7px;
    transition: box-shadow .2s, transform .2s;
  }

  .whatsapp-icon i {
    color: #25D366;
    font-size: 38px;
    transition: color .15s;
  }

  .whatsapp-icon:hover {
    transform: scale(1.09);
    box-shadow: 0 4px 16px #26efab30;
  }

  .back-to-top {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 499;
    font-size: 20px;
    color: var(--white);
    background: var(--dark-bg-light);
    border-radius: 100%;
    padding: 10px 14px;
    box-shadow: 0 2px 2px #18dff230;
    display: none;
    transition: background .2s, color .2s, transform .2s;
    animation: upBtnFade 1.6s infinite alternate;
  }


  .back-to-top:hover {
    background: var(--accent);
    color: var(--dark-bg-light);
    transform: scale(1.09);
  }

  @keyframes upBtnFade {
    from {
      box-shadow: 0 0 6px 0 var(--accent-sec);
    }

    to {
      box-shadow: 0 0 22px 0 var(--accent);
    }
  }

  /* Responsive */
  @media (max-width: 991px) {

    .about-content,
    .contact-form {
      padding: 1.1rem 1.2rem;
    }
  }

  @media (max-width: 576px) {
    #hero {
      min-height: 55vh;
    }

    .about-img {
      max-width: 100%;
    }
  }


  .hero-noti-container {
    position: absolute;
    top: 26px;
    right: 30px;
    z-index: 30;
  }

  .btn-noticias {
    position: relative;
    background: var(--dark-bg-light);
    border: none;
    color: var(--accent-sec);
    font-size: 1.7rem;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    box-shadow: 0 2px 16px #0aeff440;
    transition: background 0.18s, box-shadow .22s, color .22s;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-noticias:hover,
  .btn-noticias:focus {
    color: var(--accent);
    background: var(--dark-surface);
    box-shadow: 0 0 32px var(--accent-sec), 0 0 8px var(--accent);
  }

  .badge-noti {
    position: absolute;
    top: 8px;
    right: 10px;
    background: #ff3b3b;
    /* Rojo vibrante */
    color: #fff;
    /* Blanco para contraste */
    font-size: 0.75rem;
    /* Más pequeño */
    padding: 1px 6px;
    /* Más compacto */
    padding: 2px 7px;
    border-radius: 12px;
    box-shadow: 0 0 8px #00fff570;
  }

  .panel-noticias {
    display: none;
    position: absolute;
    top: 58px;
    right: 0;
    width: 320px;
    max-width: 95vw;
    background: var(--dark-surface);
    border-radius: 13px;
    box-shadow: 0 8px 36px #181c2450;
    padding: 0.5rem 0.8rem 0.8rem 0.8rem;
    animation: fadeInNews .3s;
  }

  @keyframes fadeInNews {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .panel-header {
    font-weight: 600;
    color: var(--accent-sec);
    border-bottom: 1px solid #232836;
    padding-bottom: 0.4rem;
    margin-bottom: 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .close-panel {
    background: none;
    border: none;
    color: var(--gray);
    font-size: 1.4rem;
    cursor: pointer;
    margin-left: 6px;
    transition: color .15s;
  }

  .close-panel:hover {
    color: var(--accent-sec);
  }

  .list-noticias {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }

  .list-noticias li {
    padding: .55rem 0;
    border-bottom: 1px solid #21263660;
    font-size: .97rem;
  }

  .list-noticias li:last-child {
    border-bottom: none;
  }

  .noti-titulo {
    font-weight: 600;
    color: var(--accent-sec);
  }

  .noti-resumen {
    display: block;
    color: var(--gray);
    font-size: .93rem;
  }

  @media (max-width: 500px) {
    .hero-noti-container {
      top: 10px;
      right: 7px;
    }

    .panel-noticias {
      width: 95vw;
      left: auto;
      right: 0;
    }
  }


  .footer-logo {
    max-width: 320px;
    /* puedes ajustar height si quieres altura máxima fija */
    /* max-height: 100px; */
  }