:root {
            --brand-red: #ab0134;
            --brand-dark: #1a1a1a;
        }
        body { font-family: 'Inter', sans-serif; }
        .hero-bg {
            background-size: cover;
            background-position: center;
        }
        /* Estilos para el Slider */
        .testimonial-slider {
            display: flex;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .testimonial-item {
            min-width: 100%;
        }
        @media (min-width: 768px) {
            .testimonial-item {
                min-width: 33.333%;
            }
        }
        .glass-card {
            background: #ffffff; /* Tarjetas color blanco */
            transition: all 0.3s ease;
        }
        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }
        
        /* Contenedor relativo para posicionar el icono DENTRO */
        .form-input-group {
            position: relative;
            width: 100%;
        }
        
        /* Icono posicionado absolutamente dentro del padding del input */
        .form-input-group i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            transition: color 0.2s ease;
            pointer-events: none;
            z-index: 10;
        }

        /* Ajuste para el icono en el textarea */
        .form-input-group.textarea-group i {
            top: 1.25rem;
            transform: none;
        }

        /* Cambio de color al hacer focus */
        .custom-input:focus + i {
            color: #ab0134;
        }

        .custom-input {
            width: 100%;
            padding: 0.875rem 1rem 0.875rem 2.75rem; /* Padding izquierdo extra para el icono */
            background-color: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            outline: none;
            transition: all 0.2s ease;
            display: block;
            appearance: none; /* Para el select custom */
        }

        .custom-input:focus {
            background-color: #fff;
            border-color: #ab0134;
            box-shadow: 0 0 0 4px rgba(171, 1, 52, 0.1);
        }

        .bg-brand { background-color: #ab0134; }
        .text-brand { color: #ab0134; }
        .border-brand { border-color: #ab0134; }
        .hover-bg-brand:hover { background-color: #8c012a; }

        .btn-shine {
            position: relative;
            overflow: hidden;
        }
        .btn-shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            transition: 0.5s;
        }
        .btn-shine:hover::after {
            left: 120%;
        }

        /* Estilos específicos para logotipos de marcas */
        .brand-logo-img {
            width: auto;
            filter: grayscale(100%) opacity(0.7);
            transition: all 0.3s ease;
        }
        .brand-logo-img:hover {
            filter: grayscale(0%) opacity(1);
        }


        /*
        * Overrides
        */

            @media (min-width: 900px) {
               html {  zoom: 90%!important; }
            }

        .form-input-group svg{
             position: absolute;
             top: 15px;
             left: 10px;
        }

        section{
            max-width: 95%;
            margin: 0 auto;
        }

           .hero-bg-img {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('resources/hero.jpg');
           }

           .hero-bg{
               padding-bottom: 5rem!important;
               padding-top: 5rem!important;
    
            }
    
           .hero-bg>div>div:nth-child(1) {
                 background: #282828c4;
                 padding: 30px;
                 border-radius: 15px;
            }

              /* .py-24.bg-gray-200.overflow-hidden {
                
                 background: url(resources/team.png);
                 background-color: #353535d6;
                 background-blend-mode: hue;
            
              }*/

           .section-w{ background:  #f9fafb!important;}
            

            .py-24.bg-gray-200.overflow-hidden h2
            {
                color: whitesmoke!important;
            }


            .form2{
                 background-blend-mode: hue!important;
                 background-color: #1f2937e0!important;
                 margin-bottom: 10px;;
    
            }

            .extra-w{
             max-width: 99%!important;

            }
           

            input, select{
                  background: whitesmoke!important;
                  color: black!important;
            }

         .brand-logo-img {
    height: 100px !important;
    width: 100px !important;
    margin: 30px 55px;
}

     #brands-title {
         color: #8f042ee8!important;
     }

     footer{
        padding: 2rem!important;
        background: whitesmoke!important;
     }


     #mceCarousel{
         width: 102%!important;
         left: -1%!important;
     }

     .mce-prev{
        left: 50px!important;
     }

     .mce-next{
        right: 50px!important;
     }


     .mce-btn{
        border-radius: 15px!important;
        background: #ab0134!important;
        background-color: #ab0134!important;

     }

     #header-cta{
        text-align: center!important;
     }


     @media (max-width: 399px) {
         
         /* Tus estilos aquí */
         #ratings{
            width: 90%!important;
            margin: 0 auto;
         }

         #header-cta{
            padding: 15px!important;
        }

        #contacto{
            padding: 25px!important;
        }
          
   }