:root {
    
              --primary-blue: #1c6ba4;
              --dark-blue: #0f4b7a;
              --cyan: #00d2ff;
              --gli-cyan: #00d4ff;
              --cyan-border: #42d1e0;
              --gli-blue: #0d83c9;
              --gli-dark-blue: #002236;
    
              /* --gli-blue: #0d83c9;
                --gli-cyan: #00d4ff;
                --dark-blue: #0f4b7a;
                --cyan: #00d2ff;
                --gli-dark-blue: #002236;
                --dark-blue: #0f4b7a; */
          }
      
      
      /* --- HERO SECTION --- */
        .hero-section {
            padding: 60px 20px 80px 20px;
            text-align: center;
            /* Textura sutil de agua para el fondo */
            /* background: linear-gradient(to bottom, rgba(0, 132, 200, 1) 0%, rgba(0, 132, 200, 0.9) 100%), 
                        url('https://via.placeholder.com/1920x1080/0084c8/0084c8?text=Water+Texture') center/cover; */
        }
        .hero-title {
            font-size: 6rem;
            font-weight: 900;
            letter-spacing: 2px;
            text-shadow: 3px 3px 10px rgba(0,0,0,0.3);
            margin-bottom: 10px;
        }
        .hero-subtitle {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 40px;
        }
        .hero-question {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 20px;
        }
        .hero-desc {
            font-size: 0.95rem;
            font-weight: bold;
            max-width: 900px;
            margin: 0 auto;
            line-height: 1.4;
        }

        /* --- GRID DE SERVICIOS --- */
        .service-block {
            padding: 50px 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            transition: background-color 0.3s ease;
            min-height: 280px;
        }
        
        .service-content {
            display: flex;
            align-items: center;
            max-width: 500px;
            width: 100%;
        }

        .service-img {
            max-width: 110px;
            max-height: 180px;
            object-fit: contain;
            margin-right: 30px;
            /* filter: drop-shadow(5px 10px 15px rgba(0,0,0,0.4)); */
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        /* Efecto Hover: Zoom a la imagen */
        .service-block:hover .service-img {
            transform: scale(1.1) rotate(3deg);
        }

        .service-text {
            text-align: left;
        }
        .service-text h3 {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 10px;
        }
        .service-text p {
            font-size: 0.85rem;
            font-weight: bold;
            line-height: 1.3;
            margin-bottom: 15px;
        }
        .service-pill {
            display: inline-block;
            border: 2px solid var(--gli-cyan);
            border-radius: 20px;
            padding: 6px 20px;
            font-size: 0.8rem;
            font-weight: bold;
            background-color: transparent;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .service-block:hover .service-pill {
            background-color: var(--gli-cyan);
            color: var(--gli-dark-blue);
        }

        /* Fondos específicos */
        .bg-sauces { background-color: var(--bg-sauces); }
        .bg-coffee { background-color: var(--bg-coffee); }
        .bg-sodas { background-color: var(--bg-sodas); }
        .bg-juices { background-color: var(--bg-juices); }
        
        /* Simulación de textura de agua en los bloques inferiores */
        .water-texture {
            background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('https://via.placeholder.com/1000x500/004a8e/0068a9?text=Water');
            background-blend-mode: overlay;
            background-size: cover;
            background-position: center;
        }


           .brand-text {
            font-size: 0.8rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: 0.5px;
        }



        /* Ajustes Mobile */
        @media (max-width: 768px) {
            .hero-title { font-size: 3.5rem; }
            .service-content { flex-direction: column; text-align: center; }
            .service-img { margin-right: 0; margin-bottom: 20px; }
            .service-text { text-align: center; }
        }


        @media (max-width:480px) {
        .service-text{
        font-size: 20px;
            text-align: center;
            word-break:break-all !important;
            overflow-wrap: break-word !important;
        }
        .service-content{
            width: 95%;
        }

        .service-pill {
            display: inline-block;
            border: 2px solid var(--gli-cyan);
            border-radius: 20px;
            padding: 6px 20px;
            font-size: 0.8rem;
            font-weight: bold;
            background-color: transparent;
            transition: all 0.3s ease !important;
            cursor: pointer;
        }


        .service-block {
            padding: 50px 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            transition: background-color 0.3s ease !important;
            min-height: 280px;
        }

        .service-block:hover .service-pill {
            background-color: var(--gli-cyan) !important;
            color: var(--gli-dark-blue) !important;
        } 
                      
    }