/* ============================================
        GLOBAL STYLES
        ============================================ */
    * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
    }

    body {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
         color: #333;
         overflow-x: hidden;
    }

    body::before {
         content: '';
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: #2B5480;
         z-index: 9999;
         animation: pageLoad 1s ease-out forwards;
         pointer-events: none;
    }

    /* ============================================
        ANIMATIONS
        ============================================ */
    @keyframes pageLoad {
         to {
              opacity: 0;
              visibility: hidden;
         }
    }

    @keyframes float {
         0%, 100% { transform: translate(0, 0); }
         50% { transform: translate(-20px, -20px); }
    }

    /* ============================================
        SCROLL REVEAL
        ============================================ */
    .scroll-reveal {
         opacity: 0;
         transform: translateY(30px);
         transition: all 0.8s ease-out;
    }

    .scroll-reveal.active {
         opacity: 1;
         transform: translateY(0);
    }

    /* ============================================
        HEADER & NAVIGATION
        ============================================ */
    header {
         background: white;
         border-bottom: 1px solid #e6eef3;
    }

    nav {
         max-width: 1200px;
         margin: 0 auto;
         padding: 12px 24px;
         display: flex;
         align-items: center;
         justify-content: space-between;
    }

    .logo {
         display: flex;
         align-items: center;
         justify-content: center;
         transition: transform 0.3s;
    }

    .logo img {
         height: 90px;
         width: auto;
    }

    .logo:hover {
         transform: scale(1.05);
    }

    .nav-links {
         display: flex;
         gap: 30px;
         list-style: none;
         align-items: center;
    }

    .nav-links a {
         text-decoration: none;
         color: #666;
         font-size: 14px;
         transition: color 0.3s;
         position: relative;
    }

    .nav-links a::after {
         content: '';
         position: absolute;
         bottom: -5px;
         left: 0;
         width: 0;
         height: 2px;
         background: #2c5f7f;
         transition: width 0.3s;
    }

    .nav-links a:hover::after {
         width: 100%;
    }

    .nav-links a:hover {
         color: #2c5f7f;
    }

    .nav-links .btn-contact {
         background: #e8f4f8;
         color: #2c5f7f;
         padding: 10px 25px;
         border-radius: 5px;
         transition: all 0.3s;
    }

    .nav-links .btn-contact::after {
         display: none;
    }

    .nav-links .btn-contact:hover {
         background: #2c5f7f;
         color: white;
         transform: translateY(-2px);
         box-shadow: 0 4px 8px rgba(43, 84, 128, 0.2);
    }

    /* ============================================
        HERO SECTION
        ============================================ */
    .hero {
         background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fc 100%);
         padding: 100px 50px;
         position: relative;
         overflow: hidden;
    }

    .hero::before {
         content: '';
         position: absolute;
         top: -60%;
         right: -10%;
         width: 600px;
         height: 600px;
         background: radial-gradient(circle, rgba(74, 144, 197, 0.1) 0%, transparent 70%);
         animation: float 6s ease-in-out infinite;
    }

    .hero-content {
         max-width: 1400px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 60px;
         align-items: center;
    }

    .hero-text {
         text-align: left;
    }

    .hero-text h1 {
         font-size: 48px;
         color: #1a1a1a;
         margin-bottom: 20px;
         line-height: 1.2;
    }

    .hero-text p {
         font-size: 16px;
         color: #666;
         margin-bottom: 30px;
         line-height: 1.6;
    }

   .hero-image {
         width: 100%;
         max-width: 500px;
         height: 350px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto;
    }

    .hero-img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 10px;
    }

    /* ============================================
        BUTTONS
        ============================================ */
    .btn-primary {
         background: #2c5f7f;
         color: white;
         padding: 15px 35px;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: all 0.3s;
         position: relative;
         overflow: hidden;
    }

    .btn-primary::before {
         content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         width: 0;
         height: 0;
         background: rgba(255, 255, 255, 0.2);
         border-radius: 50%;
         transform: translate(-50%, -50%);
         transition: width 0.5s, height 0.5s;
    }

    .btn-primary:hover::before {
         width: 300px;
         height: 300px;
    }

    .btn-primary:hover {
         background: #1e4560;
         transform: translateY(-2px);
         box-shadow: 0 8px 16px rgba(43, 84, 128, 0.3);
    }

    .btn-secondary {
         background: #2c5f7f;
         color: white;
         padding: 12px 40px;
         border: none;
         border-radius: 5px;
         font-size: 15px;
         cursor: pointer;
         display: block;
         margin: 30px auto 0;
         transition: all 0.3s;
    }

    .btn-secondary:hover {
         background: #1e4560;
         transform: translateY(-2px);
         box-shadow: 0 8px 16px rgba(43, 84, 128, 0.3);
    }

    /* ============================================
        INFO SECTION
        ============================================ */
    .info-section {
         background: linear-gradient(180deg, white 0%, #f8fbfd 100%);
         padding: 80px 50px;
    }

    .info-content {
         max-width: 1400px;
         margin: 0 auto;
    }

    .info-header {
         text-align: center;
         margin-bottom: 30px;
    }

    .info-header h2 {
         font-size: 32px;
         color: #1a1a1a;
         margin-bottom: 20px;
    }

    .info-header p {
         font-size: 15px;
         color: #666;
         line-height: 1.7;
         max-width: 900px;
         margin: 0 auto;
    }

    /* ============================================
        OFFERINGS SECTION
        ============================================ */
    .offerings-title {
         text-align: center;
         font-size: 28px;
         color: #1a1a1a;
         margin: 60px 0 40px;
    }

    .offerings-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 60px;
         align-items: center;
         background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fc 100%);
         padding: 60px;
         border-radius: 15px;
         box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

   .offerings-image {
  max-width: 600px;
  height: 300px;
  border-radius: 15px;
  overflow: hidden;
}

.offerings-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
    

    .offerings-list {
         list-style: none;
    }

    .offerings-list li {
         display: flex;
         align-items: flex-start;
         gap: 15px;
         margin-bottom: 25px;
         font-size: 15px;
         color: #333;
         line-height: 1.6;
         transition: transform 0.3s;
    }

    .offerings-list li:hover {
         transform: translateX(10px);
    }

    .offerings-list li i {
         color: #4a90c5;
         font-size: 18px;
         margin-top: 2px;
         flex-shrink: 0;
    }

    .offerings-detail {
         background: white;
         padding: 50px;
         border-radius: 15px;
         box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    .offerings-detail h2 {
         font-size: 28px;
         color: #1a1a1a;
         margin-bottom: 30px;
         text-align: center;
    }

    .offerings-columns {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 20px;
    }

    .offerings-detail ul {
         list-style: none;
    }

    .offerings-detail li {
         display: flex;
         align-items: flex-start;
         gap: 12px;
         margin-bottom: 18px;
         font-size: 15px;
         color: #333;
         line-height: 1.6;
    }

    .offerings-detail li i {
         color: #4a90c5;
         font-size: 16px;
         margin-top: 3px;
         flex-shrink: 0;
    }

    /* ============================================
        REMOTE ACCESS SECTION
        ============================================ */
    .remote-access {
         background: linear-gradient(135deg, #e8f4f8 0%, #d0e8f2 50%, #f0f8fc 100%);
         padding: 80px 50px;
         text-align: center;
         position: relative;
         overflow: hidden;
    }

    .remote-access::before {
         content: '';
         position: absolute;
         bottom: -50%;
         left: -10%;
         width: 600px;
         height: 600px;
         background: radial-gradient(circle, rgba(74, 144, 197, 0.1) 0%, transparent 70%);
         animation: float 8s ease-in-out infinite;
    }

    .remote-access-content {
         max-width: 800px;
         margin: 0 auto;
         position: relative;
         z-index: 1;
    }

    .remote-icon {
         width: 80px;
         height: 80px;
         background: linear-gradient(135deg, #4a90c5 0%, #2c5f7f 100%);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 30px;
         transition: transform 0.3s;
         box-shadow: 0 10px 30px rgba(43, 84, 128, 0.2);
    }

    .remote-icon:hover {
         transform: rotate(360deg);
    }

    .remote-icon i {
         font-size: 40px;
         color: white;
    }

    .remote-access h2 {
         font-size: 32px;
         color: #1a1a1a;
         margin-bottom: 20px;
    }

    .remote-access p {
         font-size: 16px;
         color: #666;
         line-height: 1.7;
    }

    /* ============================================
        CTA SECTION
        ============================================ */
    .cta-section {
         background: linear-gradient(180deg, white 0%, #f8fbfd 100%);
         padding: 80px 50px;
    }

    .cta-content {
         max-width: 1400px;
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 60px;
    }

    .cta-text {
         flex: 1;
    }

    .cta-icon {
         width: 80px;
         height: 80px;
         background: linear-gradient(135deg, #e8f4f8 0%, #d0e8f2 100%);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 20px;
         transition: transform 0.3s;
    }

    .cta-icon:hover {
         transform: scale(1.1);
    }

    .cta-icon i {
         font-size: 35px;
         color: #4a90c5;
    }

    .cta-text h2 {
         font-size: 36px;
         color: #1a1a1a;
         margin-bottom: 15px;
         line-height: 1.3;
    }

    .cta-text p {
         font-size: 16px;
         color: #666;
         line-height: 1.6;
    }

    .cta-button {
         flex-shrink: 0;
    }

    .cta-button .btn-primary {
         padding: 18px 45px;
         font-size: 18px;
    }

    .cta-service {
         background: linear-gradient(135deg, #e8f4f8 0%, #d0e8f2 100%);
         padding: 60px 40px;
         border-radius: 15px;
         text-align: center;
         margin-top: 60px;
    }

    .cta-service h3 {
         font-size: 28px;
         color: #1a1a1a;
         margin-bottom: 15px;
         font-weight: 600;
    }

    .cta-service p {
         font-size: 16px;
         color: #666;
         margin-bottom: 30px;
         max-width: 700px;
         margin-left: auto;
         margin-right: auto;
    }

    .cta-service .btn-primary {
         padding: 15px 40px;
         font-size: 16px;
         font-weight: 600;
    }

    /* ============================================
        ABOUT SECTION
        ============================================ */
    .about-section {
         background: linear-gradient(135deg, #f8fbfd 0%, white 50%, #e8f4f8 100%);
         padding: 100px 50px;
    }

    .about-content {
         max-width: 1000px;
         margin: 0 auto;
         text-align: center;
    }

    .about-content h1 {
         font-size: 42px;
         color: #1a1a1a;
         margin-bottom: 30px;
    }

    .about-content > p {
         font-size: 16px;
         color: #666;
         line-height: 1.8;
         margin-bottom: 60px;
    }

    .mission-vision {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 40px;
         margin-top: 60px;
    }

    .mv-card {
         background: white;
         padding: 50px 40px;
         border-radius: 15px;
         text-align: center;
         transition: all 0.3s;
         box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    }

    .mv-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 15px 40px rgba(43, 84, 128, 0.15);
    }

    .mv-icon {
         width: 80px;
         height: 80px;
         background: linear-gradient(135deg, #4a90c5 0%, #2c5f7f 100%);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 25px;
    }

    .mv-icon i {
         font-size: 35px;
         color: white;
    }

    .mv-card h3 {
         font-size: 28px;
         color: #1a1a1a;
         margin-bottom: 20px;
    }

    .mv-card p {
         font-size: 15px;
         color: #666;
         line-height: 1.7;
    }

    /* ============================================
        CONTACT SECTION
        ============================================ */
    .contact-section {
         background: linear-gradient(180deg, #f8fbfd 0%, white 100%);
         padding: 100px 50px;
    }

    .contact-container {
         max-width: 1200px;
         margin: 0 auto;
    }

    .contact-container h1 {
         font-size: 42px;
         color: #1a1a1a;
         text-align: center;
         margin-bottom: 15px;
    }

    .contact-subtitle {
         text-align: center;
         color: #666;
         font-size: 16px;
         margin-bottom: 60px;
    }

    .contact-content {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 60px;
         align-items: center;
    }

    .contact-form {
         background: white;
         padding: 40px;
         border-radius: 15px;
         box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    }

    .form-group {
         margin-bottom: 25px;
    }

    .form-group label {
         display: block;
         margin-bottom: 8px;
         color: #333;
         font-size: 14px;
         font-weight: 500;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
         width: 100%;
         padding: 12px 15px;
         border: 1px solid #ddd;
         border-radius: 5px;
         font-size: 14px;
         transition: border-color 0.3s;
         font-family: inherit;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
         outline: none;
         border-color: #4a90c5;
    }

    .form-group textarea {
         resize: vertical;
         min-height: 120px;
    }

    .submit-btn {
         width: 100%;
         background: #2c5f7f;
         color: white;
         padding: 15px;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: all 0.3s;
    }

    .submit-btn:hover {
         background: #1e4560;
         transform: translateY(-2px);
         box-shadow: 0 8px 16px rgba(43, 84, 128, 0.3);
    }
.contact-image {
     height: 600px;
     border-radius: 15px;
     overflow: hidden;
}

.contact-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 15px;
}

    .form-message {
         margin-top: 15px;
         padding: 12px;
         border-radius: 5px;
         display: none;
    }

    .form-message.success {
         background: #d4edda;
         color: #155724;
         border: 1px solid #c3e6cb;
    }

    .form-message.error {
         background: #f8d7da;
         color: #721c24;
         border: 1px solid #f5c6cb;
    }

    /* ============================================
        SERVICES SECTION
        ============================================ */
    .services-section {
         background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fc 50%, #d0e8f2 100%);
         padding: 100px 50px;
    }

    .services-container {
         max-width: 1200px;
         margin: 0 auto;
    }

    .services-container h1 {
         font-size: 42px;
         color: #1a1a1a;
         text-align: center;
         margin-bottom: 15px;
    }

    .services-subtitle {
         text-align: center;
         color: #666;
         font-size: 16px;
         margin-bottom: 60px;
    }

    .services-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 30px;
    }

    .service-card {
         background: white;
         padding: 40px;
         border-radius: 15px;
         box-shadow: 0 5px 20px rgba(0,0,0,0.08);
         transition: all 0.3s;
         cursor: default;
    }

    .service-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 15px 40px rgba(43, 84, 128, 0.15);
    }

    .service-icon {
         width: 60px;
         height: 60px;
         background: linear-gradient(135deg, #4a90c5 0%, #2c5f7f 100%);
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 20px;
    }

    .service-icon i {
         font-size: 28px;
         color: white;
    }

    .service-card h3 {
         font-size: 20px;
         color: #1a1a1a;
         margin-bottom: 15px;
         line-height: 1.4;
    }

    .service-card p {
         font-size: 14px;
         color: #666;
         line-height: 1.7;
         margin-bottom: 20px;
    }

    .service-link {
         color: #2c5f7f;
         text-decoration: none;
         font-weight: 500;
         display: inline-flex;
         align-items: center;
         gap: 8px;
         transition: gap 0.3s;
         cursor: pointer;
         position: relative;
         z-index: 10;
    }

    .service-link:hover {
         gap: 12px;
    }

    .service-card-wide {
         grid-column: 1 / -1;
         display: grid;
         grid-template-columns: auto 1fr auto;
         gap: 30px;
         align-items: center;
         text-align: left;
    }

    .service-card-wide .service-icon {
         margin-bottom: 0;
    }

    .service-card-wide h3 {
         margin-bottom: 0;
    }

    .service-card-wide p {
         grid-column: 2;
         margin-bottom: 0;
    }

    .service-card-wide .service-link {
         grid-column: 3;
         grid-row: 1 / 3;
         align-self: center;
    }

    /* ============================================
        SERVICE DETAIL SECTION
        ============================================ */
    .service-detail {
         background: linear-gradient(180deg, #f8fbfd 0%, white 100%);
         padding: 100px 50px;
    }

    .service-detail-container {
         max-width: 1200px;
         margin: 0 auto;
    }

    .service-detail-hero {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 60px;
         align-items: center;
         margin-bottom: 80px;
    }

    .service-detail-hero h1 {
         font-size: 38px;
         color: #1a1a1a;
         margin-bottom: 25px;
         line-height: 1.3;
    }

    .service-detail-hero p {
         font-size: 16px;
         color: #666;
         line-height: 1.8;
    }

   .service-detail-image {
     height: 350px;
     border-radius: 15px;
     overflow: hidden;
}

.service-detail-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 15px;

}


/* imagen para servidores.html */
.service-detail-image-large {
     height: 350px;  
}
    

    .features-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 30px;
         margin-bottom: 60px;
    }

    .feature-card {
         background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fc 100%);
         padding: 30px;
         border-radius: 10px;
         text-align: center;
         transition: all 0.3s;
    }

    .feature-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 30px rgba(43, 84, 128, 0.1);
    }

    .feature-icon {
         width: 50px;
         height: 50px;
         background: linear-gradient(135deg, #4a90c5 0%, #2c5f7f 100%);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 15px;
    }

    .feature-icon i {
         font-size: 22px;
         color: white;
    }

    .feature-card h4 {
         font-size: 16px;
         color: #1a1a1a;
         margin-bottom: 10px;
    }

    .feature-card p {
         font-size: 13px;
         color: #666;
         line-height: 1.6;
    }

    /* ============================================
        FOOTER
        ============================================ */
    footer {
         background: white;
         padding: 60px 50px 30px;
         border-top: 1px solid #e0e0e0;
    }

    .footer-content {
         max-width: 1400px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 60px;
         margin-bottom: 40px;
    }

    .footer-contact h3 {
         font-size: 28px;
         color: #1a1a1a;
         margin-bottom: 20px;
    }

    .footer-contact p {
         font-size: 15px;
         color: #666;
         line-height: 1.8;
         margin-bottom: 5px;
    }

    .footer-logo {
         display: flex;
         flex-direction: column;
         align-items: flex-end;
         justify-content: center;
    }

    .footer-logo-img {
         width: auto;
         height: 300px;
         background: #d0e8f2;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #2c5f7f;
         font-size: 14px;
         margin-bottom: 15px;
     
    }

    .footer-bottom {
         text-align: center;
         color: #999;
         font-size: 13px;
         padding-top: 20px;
         border-top: 1px solid #e0e0e0;
    }

    /* ============================================
        RESPONSIVE - TABLET (1024px)
        ============================================ */
    @media (max-width: 1024px) {
         .hero-content,
         .offerings-container,
         .footer-content,
         .mission-vision,
         .contact-content,
         .service-detail-hero {
              grid-template-columns: 1fr;
         }

         .services-grid,
         .features-grid,
         .offerings-columns {
              grid-template-columns: 1fr;
         }

         .cta-content {
              flex-direction: column;
              text-align: center;
         }

         .cta-icon {
              margin: 0 auto 20px;
         }

         .footer-logo {
              align-items: center;
         }

         .hero-text h1 {
              font-size: 36px;
         }

         .nav-links {
              gap: 20px;
         }
    }

    /* ============================================
        RESPONSIVE - MOBILE (768px)
        ============================================ */
    @media (max-width: 768px) {
         header {
              padding: 15px 25px;
         }

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

         .nav-links .btn-contact {
              padding: 8px 20px;
         }

         .hero,
         .info-section,
         .remote-access,
         .cta-section,
         .about-section,
         .contact-section,
         .services-section,
         .service-detail {
              padding: 50px 25px;
         }

         .hero-text h1 {
              font-size: 32px;
         }

         .hero-text p {
              font-size: 15px;
         }

         .info-header h2,
         .remote-access h2,
         .about-content h1,
         .contact-container h1,
         .services-container h1 {
              font-size: 28px;
         }

         .cta-text h2 {
              font-size: 26px;
         }

         .offerings-title {
              font-size: 24px;
         }

         .offerings-container,
         .contact-form,
         .offerings-detail {
              padding: 30px 25px;
         }

         .service-card-wide {
              grid-template-columns: 1fr;
              text-align: center;
         }
         
         .service-card-wide .service-icon {
              margin-bottom: 20px;
         }
         
         .service-card-wide h3 {
              margin-bottom: 15px;
         }
         
         .service-card-wide p {
              grid-column: 1;
              margin-bottom: 20px;
         }
         
         .service-card-wide .service-link {
              grid-column: 1;
              grid-row: auto;
         }

         .cta-service {
              padding: 40px 25px;
         }
         
         .cta-service h3 {
              font-size: 24px;
         }
         
         .cta-service p {
              font-size: 15px;
         }
    }

    /* ============================================
        RESPONSIVE - SMALL MOBILE (480px)
        ============================================ */
    @media (max-width: 480px) {
         .logo {
              width: 120px;
              height: 40px;
              font-size: 12px;
         }

         .nav-links a:not(.btn-contact) {
              display: none;
         }

         .hero-text h1 {
              font-size: 26px;
         }

         .cta-text h2 {
              font-size: 22px;
         }

         .service-card,
         .mv-card {
              padding: 30px 25px;
         }
    }