*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Poppins', sans-serif;
    }

    body{
      background:#f5f7fa;
      color:#fff;
      overflow-x:hidden;
    }

    :root{
      --azul:#002D62;
      --gris-oscuro:#3C3F41;
      --gris:#A0A0A0;
      --blanco:#ffffff;
    }

    html{
      scroll-behavior:smooth;
    }

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

    header{
      width:100%;
      background:linear-gradient(90deg, var(--azul), var(--gris-oscuro));
      padding:20px 8%;
      position:fixed;
      top:0;
      z-index:1000;
      backdrop-filter: blur(10px);
      box-shadow:0 5px 20px rgba(0,0,0,0.2);
    }

    .navbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:15px;
    }

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

    .logo h1{
      font-size:28px;
      letter-spacing:2px;
      color:var(--blanco);
    }

    .menu{
      display:flex;
      gap:35px;
    }

    .menu a{
      text-decoration:none;
      color:white;
      font-weight:500;
      transition:0.3s;
    }

    .menu a:hover{
      color:var(--gris);
    }

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

    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:140px 8% 80px;
      background:
      linear-gradient(rgba(0,45,98,0.85), rgba(60,63,65,0.92)),
      url('img/hero-bg.jpg');
      background-size:cover;
      background-position:center;
    }

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

    .hero-text h2{
      font-size:60px;
      line-height:1.1;
      margin-bottom:20px;
    }

    .hero-text span{
      color:var(--gris);
    }

    .hero-text p{
      font-size:18px;
      line-height:1.8;
      margin-bottom:35px;
      color:#e4e4e4;
    }

    .hero-buttons{
      display:flex;
      gap:20px;
      flex-wrap:wrap;
    }

    .btn{
      padding:15px 35px;
      border-radius:50px;
      text-decoration:none;
      font-weight:600;
      transition:0.3s;
      display:inline-block;
    }

    .btn-primary{
      background:var(--blanco);
      color:var(--azul);
    }

    .btn-primary:hover{
      background:var(--gris);
      color:white;
      transform:translateY(-3px);
    }

    .btn-secondary{
      border:2px solid white;
      color:white;
    }

    .btn-secondary:hover{
      background:white;
      color:var(--azul);
    }

    .hero-image img{
      width:100%;
      max-width:500px;
      filter:drop-shadow(0 10px 30px rgba(0,0,0,0.5));
    }

    /* ========================= */
    /* SECTION TITLE */
    /* ========================= */

    .section-title{
      text-align:center;
      margin-bottom:60px;
    }

    .section-title h2{
      color:var(--azul);
      font-size:42px;
      margin-bottom:10px;
    }

    .section-title p{
      color:#555;
      font-size:18px;
    }

    /* ========================= */
    /* PRODUCTOS */
    /* ========================= */

    .products{
      padding:100px 8%;
      background:white;
    }

    .product-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
      gap:30px;
    }

    .product-card{
      background:#fff;
      border-radius:25px;
      overflow:hidden;
      box-shadow:0 10px 30px rgba(0,0,0,0.08);
      transition:0.3s;
    }

    .product-card:hover{
      transform:translateY(-10px);
    }

    .product-card img{
      width:100%;
      height:250px;
      object-fit:cover;
    }

    .product-content{
      padding:25px;
    }

    .product-content h3{
      color:var(--azul);
      margin-bottom:10px;
    }

    .product-content p{
      color:#555;
      line-height:1.6;
    }

    /* ========================= */
    /* SERVICIOS */
    /* ========================= */

    .services{
      padding:100px 8%;
      background:linear-gradient(135deg, var(--azul), var(--gris-oscuro));
    }

    .services .section-title h2,
    .services .section-title p{
      color:white;
    }

    .service-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      gap:30px;
    }

    .service-card{
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.1);
      border-radius:25px;
      padding:35px;
      text-align:center;
      backdrop-filter:blur(10px);
      transition:0.3s;
    }

    .service-card:hover{
      transform:translateY(-10px);
      background:rgba(255,255,255,0.12);
    }

    .service-card img{
      width:200px;
      margin-bottom:20px;
      border-radius: 25px;
      border: 3px solid rgba(0, 0, 0, 0.7);
    }

    .service-card h3{
      margin-bottom:15px;
      font-size:24px;
    }

    .service-card p{
      color:#e1e1e1;
      line-height:1.7;
    }

    /* ========================= */
    /* BENEFICIOS */
    /* ========================= */

    .benefits{
      padding:100px 8%;
      background:#f4f4f4;
    }

    .benefit-container{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      gap:30px;
    }

    .benefit-box{
      background:white;
      padding:40px;
      border-radius:20px;
      box-shadow:0 10px 25px rgba(0,0,0,0.06);
      text-align:center;
    }

    .benefit-box h3{
      color:var(--azul);
      margin-bottom:15px;
    }

    .benefit-box p{
      color:#555;
      line-height:1.6;
    }

    /* ========================= */
    /* CONTACTO */
    /* ========================= */

    .contact{
      padding:100px 8%;
      background:
      linear-gradient(rgba(0,45,98,0.92), rgba(0,45,98,0.92)),
      url('img/contact-bg.jpg');
      background-size:cover;
      background-position:center;
      text-align:center;
    }

    .contact h2{
      font-size:42px;
      margin-bottom:20px;
    }

    .contact p{
      max-width:700px;
      margin:auto;
      margin-bottom:40px;
      line-height:1.8;
      color:#f1f1f1;
    }

    /* ========================= */
    /* FOOTER */
    /* ========================= */

    footer{
      background:#111;
      padding:30px;
      text-align:center;
      color:#bbb;
      font-size:14px;
    }

/* ========================= */
/* RESPONSIVE                */
/* ========================= */

@media(max-width:950px){
    .hero-container{ grid-template-columns:1fr; text-align:center; }
    .hero-text h2{ font-size:45px; }
    .hero-buttons{ justify-content:center; }
    
    /* En lugar de ocultar el menú (display: none), solo reducimos la separación */
    .menu { gap: 15px; }
}

@media(max-width:600px){
    .hero-text h2{ font-size:36px; }
    .section-title h2{ font-size:32px; }
    
    /* Ajustes específicos para que quepa todo en el celular */
    .navbar { 
        flex-wrap: wrap; /* Permite que los elementos se acomoden si falta espacio */
        justify-content: center; /* Centra el logo y el menú */
        gap: 10px;
    }
    .logo h1 { font-size: 10px; } /* Logo un poco más pequeño */
    
    .menu { width: 100%; justify-content: center; } /* Centra los botones */
    .menu a { font-size: 10px; } /* Letra un poco más pequeña */
    
    .cart-icon { 
        padding: 8px 15px; 
        font-size: 13px; 
    }
}

        /* ========================= */
        /* ESTILOS EXTRA PARA CARRITO*/
        /* ========================= */
        .precio-destacado { font-size: 24px; font-weight: 700; color: var(--azul); margin: 15px 0; }
        .btn-agregar { width: 100%; text-align: center; margin-top: 15px; font-size: 16px; }
        .cart-icon { background: var(--azul); color: var(--blanco); padding: 10px 20px; border-radius: 50px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
        .cart-inicio {padding: 10px 20px; border-radius: 50px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
        .cart-icon:hover { background: var(--gris); color: var(--azul); }

/* ============================================================ */
/* ESTILOS CORREGIDOS Y FUERTES PARA EL CARRITO (MODAL)         */
/* ============================================================ */

/* 1. EL CONTENEDOR NEGRO DE FONDO (Debe estar oculto y fijo) */
div#cart-modal.cart-modal {
    position: fixed !important; /* Lo saca del flujo de la página */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 45, 98, 0.8) !important; /* Azul Chuzz transparente */
    display: none !important; /* OCULTO POR DEFECTO */
    justify-content: flex-end !important; /* Empuja el contenido a la derecha */
    z-index: 99999 !important; /* Super alto para que nada lo tape */
    overflow: hidden !important;
}

/* Cuando JS agrega 'active', se muestra */
div#cart-modal.cart-modal.active {
    display: flex !important;
}

/* 2. EL PANEL BLANCO LATERAL QUE SE DESLIZA */
div#cart-modal .cart-content {
    background-color: #ffffff !important;
    width: 100% !important;
    max-width: 400px !important; /* Ancho fijo en PC */
    height: 100% !important;
    padding: 30px !important;
    overflow-y: auto !important; /* Scroll interno si hay muchos productos */
    position: relative !important;
    color: #3C3F41 !important; /* Tu gris oscuro */
    box-shadow: -5px 0 20px rgba(0,0,0,0.2) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Corrección para dispositivos móviles */
@media(max-width: 600px) {
    div#cart-modal .cart-content {
        max-width: 100% !important;
    }
}

/* 3. BOTÓN CERRAR (X) */
div#cart-modal .close-cart {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    font-size: 35px !important;
    cursor: pointer !important;
    color: #A0A0A0 !important; /* Tu gris */
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
    z-index: 10 !important;
}
div#cart-modal .close-cart:hover { color: #ff4757 !important; }

/* 4. TÍTULO DEL CARRITO */
div#cart-modal h2 {
    color: #002D62 !important; /* Tu azul */
    margin-bottom: 25px !important;
    margin-top: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

/* 5. CADA FILA DE PRODUCTO DENTRO DEL CARRITO */
div#cart-modal .cart-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    border-bottom: 1px solid #eee !important;
    padding: 15px 0 !important;
    width: 100% !important;
}

/* ============================================================ */
/* ¡LA CORRECCIÓN CRÍTICA PARA LA IMAGEN GIGANTE!              */
/* Reemplaza o asegura que esta regla exista para el carrito  */
/* ============================================================ */
div#cart-modal .cart-item img {
    width: 70px !important;      /* ANCHO FIJO Y PEQUEÑO */
    height: 70px !important;     /* ALTO FIJO */
    object-fit: cover !important; /* No deforma la imagen */
    border-radius: 10px !important;
    margin: 0 !important;        /* Quita márgenes externos */
    padding: 0 !important;
    display: block !important;
    max-width: 70px !important;  /* Doble seguridad */
}

/* 6. INFO DEL PRODUCTO (Texto) */
div#cart-modal .cart-item-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
div#cart-modal .cart-item-info h4 {
    font-size: 15px !important;
    margin: 0 0 5px 0 !important;
    color: #002D62 !important;
    font-weight: 600 !important;
}
div#cart-modal .cart-item-info p {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #3C3F41 !important;
}

/* 7. BOTÓN ELIMINAR (X) */
div#cart-modal .btn-eliminar {
    background-color: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: bold !important;
    transition: 0.3s !important;
}
div#cart-modal .btn-eliminar:hover { background-color: #e04050 !important; }

/* 8. SECCIÓN TOTAL Y BOTÓN WHATSAPP */
div#cart-modal .cart-total-section {
    margin-top: auto !important; /* Empuja esto al fondo del panel blanco */
    border-top: 2px solid #eee !important;
    padding-top: 20px !important;
}
div#cart-modal .cart-total-section h3 {
    color: #002D62 !important;
    margin: 0 0 15px 0 !important;
    font-size: 20px !important;
}