/* Estilos Básicos */
* {
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
:root {
    font-size:100%;
    transition: font-size 0.3s ease;
    --fondo-claro: #fff;
    --texto-claro:#666;
    --fondo-oscuro:#222222;
    --texto-oscuro:#ffffff;
}
body.dark-mode {
    a {
        color:#005f5f !Important;
    }
    background-color: var(--fondo-oscuro);
    color: var(--texto-oscuro);
    div, section, .header, .header a, footer, .quienes-somos-text p, article  {
        background-color:var(--fondo-oscuro) !important;
        color:var(--texto-oscuro) !important;
    }
    .footer-text a, h1, h2,h3, h4, button, .trabajamos p, .comedores-columna2 p, .politica p, #politica p{
        color: var(--texto-oscuro) !important;
        
    }
    .caja-sec1 {
        background-image: url(../img/comida-para-bebe-inv.png) !important;
        z-index:1000;
        background-color: transparent !important;
        
    }
    .caja-sec2 {
        background-image: url(../img/gorra-inv.png) !important;
        z-index:1000;
        background-color: transparent !important;
    }
    .caja-sec3 {
        background-image: url(../img/deportes-inv.png) !important;
        z-index:1000;
        background-color: transparent !important;
    }
    .texto-consulta, .consulta-text, .boton-consulta, .dieta, .clientes-text, .ob-fut-text, .centro-cli {
        background-color: transparent !important;
        p, h2 {
            color: var(--texto-oscuro) !important;
        }
    }
    .fondo-sup, .clientes-fondosup, .clientes-fondoinf, .fondo-inf {
        background-color:#666565 !important;
    }

    
}

body {
    margin:0;
    padding:0;
    font-family: Open Sans, Arial, sans-serif;
    transition: background-color 0.5s, color 0,3s;
    font-size: 14px;
    color: var(--texto-claro);
    background-color: var(--fondo-claro);
    line-height: 1.7em;
    font-weight: 500;
    background-size: cover !important;
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6 {
    color: #666565;
    padding-bottom: 10px;
    line-height: 1em;
    font-weight: 500;
}


/* Cabecera Fija */
.header {
    font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
    line-height: 23px;
    font-weight: 600;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	height:140px;
    background-color: white;
    color: black;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
	transition: all 0.3s ease;
    z-index: 9999;
}
#logo {
	height: 170px;
	transition: all 0.3s ease;
	
}

.logo a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar ul {
    margin: 0;
    padding: 0 100px;
    list-style: none;
    display: flex;
    gap: 50px;
    li a.navbar-link.active {
        color:#7ad3d0 !important;
    }
}

.navbar a {
    color: black;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
}
.navbar-link.active {
    color:#7ad3d0
}

.navbar a:hover {
    color: #f4a261;
}

/* Ocultar checkbox y hamburguesa */
.menu-toggle, .hamburger {
    display: none;
}

/* --- Responsive Media Query (Móviles) --- */
@media (max-width: 768px) {
    div {
        margin-right: 0px;
    }
    .columna img {
        position: relative;
        min-width: 0px;
        margin-left:-40px !important;
    }
    .columna {
        padding:0;
        margin:0;
    }

    #logo  {
        height: 130px !important;
    }
    body {
        font-size: 12px;
        width: 100%;
        height: auto;
    }
    .hamburger {
        display: block;
        cursor: pointer;
        font-size: 1.5rem;
    }

    .navbar {
        display: none;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #333;
        padding: 1rem 0;
        text-align: center;
        background-color:white
    }

    .navbar ul {
        flex-direction: column;
        gap: 10px;
    }

    /* Mostrar menú cuando checkbox está marcado */
    .menu-toggle:checked ~ .navbar {
        display: block;
    }
}

/* Espaciado para que el contenido no quede debajo del header */
.content {
    padding-top: 100px; 
    padding-left: 40px;
}
.com, .ser {
    
    display:flex;
    flex-direction: column;
    position: relative;
    width: 100%;

}
.comedores, .servicios  {
    padding-top: 282px;
    align-items: center;
    background-color: rgba(20, 20, 20, 0.59);
    background-blend-mode: overlay;
    background-image:url(../img/IMG-20180524-WA0020.jpg);
    background-repeat: no-repeat;
    background-position-x: 30%;
    background-position-y: 20%;
    background-size: cover;
    width: 100%;
    height: 520px;
    display: block;
}
.comedores h1, .servicios h1 {
    color: #fff !important;
    padding-left: 10%;
    padding-top:6%;
    font-weight: 600;
    font-size: 48px;
}
@media (max-width: 968px) {
    .comedores h1, .servicios h1 {
        font-size: 30px;
        padding-left: 20px;
        padding-top: 20px;
    }
    .comedores, .servicios {
        background-position-x: center;
        background-position-y: top;
        height:auto;
    }
}
.comedores-columnas, .servicios-columnas {
    background-color:rgb(255, 255, 255);
    width: 100%;
    margin: 0;
    display: flex;  
    gap: 30px;
    padding-left: 18%;
    padding-right: 18%;
    margin-top:150px;
    margin-bottom: 90px;

}

    

.comedores-columna1, .servicios-columna1{
    flex: 1;
    position: relative;
    max-height: 80%;
    width: auto;
    
}
.comedores-columna1 img, .servicios-columna1 img {
    position: relative;
    max-width: 80%;
    max-height: auto;
    min-width:220px;

}
.comedores-columna2, .servicios-columna2 {
    flex: 1;
    padding-left: 40px;
    padding-right: 40px;
}


.adorno-comedor {
    text-align:left;
    width: auto;
   
}
.adorno-comedor blockquote h2{
    font-weight: 400;
    font-size: 37px;
    line-height: 1.1em;
    color: #333;
    padding-bottom: 15px;
    padding-top:8px;
}

.adorno-comedor blockquote {
    margin: 20px 0 30px;
    border-left: 5px solid;
    padding-left: 20px;
    border-width: 8px;
    border-color: #f9ce6e;
}
.comedores-columna2 p {
    padding-bottom: 0.5em;
    font-weight:500;
    line-height: 1.5;
    text-align: justify;
    letter-spacing: 0.02em;
    color:#666;
    margin-bottom:10px
}
@media (max-width:720px) {
    .comedores-columnas {
        flex-direction: column;
        align-items:center;
    }
    .comedores{
        margin-top:160px;

    }
    .comedores-columna2 {
        padding:0;
        display:flex;
        flex-direction:column;
    }
    .contenedor {
        margin-top: 20px;
    }
}
.dieta {
    align-items:center;
    word-wrap: break-word;


}

.dieta h2 {
        font-size: 48px;
        color: #fff !important;
        text-align: center;
        line-height: 1em;
        font-weight: 500;
}
@media (max-width:720px) {
    .dieta h2 {
        font-weight: 300;
        font-size:34px
    }
}
/* Contenedor principal del slider */

.swiper .swiper-hero {
    width: 100%;
    height: 650px;

}


/* Contenedor que une todas las imágenes */
.swiper-wrapper { /* 100% por cada imagen (3 imágenes) */
    background-color: white;
	transition: transform 0.5s;
    
}

/* Estilo individual de cada slide */

.swiper-slide img {
    margin-top: 120px;
    width: 100%;
    height: 560px;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio sin deformarse */
}
.swiper-hero .swiper-slide {
    align-items: center;
    position: relative; /* Necesario para posicionar el texto encima */
    height: 650px;
}

/* Estilo para el texto centrado */
.text-center {
    text-align: center;
    opacity:0;
    position: absolute;
    left:50%;
    bottom: 40%;
    transform: translateX(-50%) translateY(50px); /* Centrado absoluto */
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semi-transparente */
    padding: 30px;
    border-radius: 10px;
    transition: all 0.8s ease-out;
    z-index:10;           
}
.swiper-slide-active .text-center {
    bottom: 40%;
    opacity: 1;
    transform: translateX(-50) translateY(0);
    transition-delay: 0.6s; /* Retraso para que la animación inicie al cambiar */
}
.text-center p {
    font-size:25px;
}
.text-center h2 {
    font-size: 35px;
    color:#ffffff
}
/* Navegación de la galería */

.swiper-hero .swiper-button-next, 
.swiper-hero .swiper-button-prev {
    height: 40px;
    width: 40px;
    border-radius:  6px;
    margin-bottom: 50px;
    color: #0f9fc4;
    --swiper-navigation-top-offset: 60%;
    --swiper-navigation-sides-offset: 4px;
}

.section-quienes {
    padding: 50px, 0;
    background-color:white;
    width: 100%;
    margin: 0;
}
.quienes-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0  auto;
    max-width: 1920px; 

}
.columna, .columna2{
    padding: 40px;
    min-width: 300px;
    flex:1;
    
    
}
.columna img {
    max-width: 80%;
    height: auto;
    padding-left: 10%;
    margin-top: 7%;
    min-width:400px;
}
@media (max-width: 768px) {
    .columna img {

        max-width: 100%;
        height: auto;
        padding-top: 70px;
        min-width:280px;
    }
}
.columna2 {
    max-width: 100%;
    padding: 40px ;
    background-color:white;
    position: left;
    padding-top: 80px;
}
@media (max-width: 768px) {
    .columna2 {
        padding:10px;

        h3 {
            font-size:12px;
            text-align:right;
        }
    }
}

.columna2 p {
    max-width:550px;
    font-size:larger;
    line-height: 1.5;
    text-align:justify;
    letter-spacing: 0.06em;

}

.adorno {
    box-shadow: inset 40px 0px 0px 0px #f9ce6e;
    height: 7px;
    width: 120px;
    margin: 0 0 30px;
    position: relative;
    box-sizing: content-box;

}
.adorno2 {
    font-size: 20px;
    color: #007572;
    font-family: FontAwesome !important;
    font-weight: 400 !important;
    content: attr(data-icon);
    width: 32px;
    display: table-cell;
}
.h3-wrapper {
    margin-top: -22px;   /* sube hasta quedar a la misma altura del divider */
    margin-left: 30px;  /* salta a la derecha del "punto" dorado (40px) + separador (120px) - un poco */
}
       
.contenedor {
    display:flex;
    margin-top:80px;
}
.boton {
    background-color: rgb(152, 182, 193);
    border: none;
    color: rgb(19, 13, 87);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 28px 2px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
 }
 .boton:hover {
  /*Darker Green*/
  background-color: #b1b8f0;
  /*agregamos la sombra*/
  box-shadow:0px 6px 15px 1px #90b7dc,
             0px 2px 8px 2px #aac7e3;
  transform: scale(1.05);
}

.adorno {
  position: relative;
  width: 120px;
  height: 7px;
  background: none;
  margin-bottom: 30px;
  /* El "punto" amarillo dorado a la izquierda */
  box-shadow: rgb(250, 203, 103) 40px 0px 0px 0px inset;
}

/* La línea horizontal que atraviesa el centro */
.adorno::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid rgb(250, 203, 103); /* orange-300 */
  z-index: 10;
}
@media (max-width: 768px) {
    .adorno {
        width: 80px;
        box-shadow: rgb(250, 203, 103) 30px 0px 0px 0px inset;
    }
    .adorno::before {
        width: 80%;
        height: 1px;
    }
}
.nombre {
  color: rgb(253, 186, 116);
  font-size: 1rem;
  line-height: 1rem;
  padding-bottom: 2px;
  word-break: break-word;
  box-sizing: border-box;
  margin-top:18px;
  margin-left:14px;
}
/*estilo seccion contacto*/
.contenedor-contacto {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-top: 114px;
    align-items: center;
    background-color: rgba(0,0,0,0.59)!important;
    padding-bottom: 3%;
    background-blend-mode: overlay;
    background-image:url(../img/happy-chid.jpg) ;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: center;
    background-size: cover;
}

.contenedor-texto  {
  
    width: 80%;
    max-width: 1080px;
    margin: auto;
    position: relative;
    padding: 25px 0;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}
.contenedor-con p {
    color: #fff !important;
    margin-bottom: 2.75%;
    text-align: center;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.2em;
    word-wrap:break-word;
    animation-timing-function: linear;
  
    animation-duration: .2s;
}

.contenedor-con {
    float: left;
    position: relative;
    z-index: 2;
}
.section-servicios {
    gap:20px;
    box-sizing:border-box;
    justify-content: center;
    padding-top: 80px; 
    padding-left:15%;           
    padding-bottom: 4%;
    padding-right:15%;
    display: flex;
    flex-direction: column;
    background-color: rgb(233, 240, 237);
    background-size: cover;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI5MCUiIHZpZXdCb3g9IjAgMCAxMjgwIDE0MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZjhmOWZhIj48cGF0aCBkPSJNMCAwdjEwMGMyMCAxNy4zIDQwIDI5LjUxIDgwIDI5LjUxIDUxLjc5IDAgNzQuNjktNDguNTcgMTUxLjc1LTQ4LjU3IDczLjcyIDAgOTEgNTQuODggMTkxLjU2IDU0Ljg4QzU0My45NSAxMzUuOCA1NTQgMTQgNjY1LjY5IDE0YzEwOS40NiAwIDk4Ljg1IDg3IDE4OC4yIDg3IDcwLjM3IDAgNjkuODEtMzMuNzMgMTE1LjYtMzMuNzMgNTUuODUgMCA2MiAzOS42MiAxMTUuNiAzOS42MiA1OC4wOCAwIDU3LjUyLTQ2LjU5IDExNS00Ni41OSAzOS44IDAgNjAgMjIuNDggNzkuODkgMzkuNjlWMHoiLz48L2c+PC9zdmc+");

}
.section-sevicios1 {
  padding-top: 17px !important;
  margin-top: 1px !important;
  margin-right: 20px !important;
  margin-left: 20px!important;
  z-index: 5;
  padding-bottom: 2%;
  padding-left: 20px;
  padding-right: 20px;

}
.section-servicios1 p {
    font-size:larger;
    line-height: 1.5;
    text-align:left;
    letter-spacing: 0.02em;


}
.section-servicios2Cajas {
    
    display: flex;
    padding-top: 10px;
    padding-bottom:10px;
    padding-left:3px;
    background-color:transparent;
    gap:9%;
    min-height:55vh;
}
@media (max-width: 968px) {
    .section-sevicios1 {
        padding-top: 17px !important;
        margin-top: 1px !important;
        margin-right: 20px !important;
        margin-left: 20px!important;
        z-index: 5;
        padding-bottom: 2%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .section-sevicios1 p {
        font-size:16px;
    }
    .section-servicios2Cajas {
        flex-direction: column;
        gap:10px;
        padding: 30px 0;

    }
}
.caja {
    display:flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: initial;
    background-position: right 0px top;
    background-image: url(https://idellaservicios.es/wp-content/uploads/2022/12/tutor-08.png);
    background-color: #f0ecec;
    border-radius: 15px 15px 15px 15px;;    
    box-shadow: 0px -1px 17px 4px rgba(12, 113, 195, 0.13);
    width:30.3%;
    height: 525px;
    align-items: center;
    gap:25px;
    overflow: hidden

}
@media (max-width: 980px) {
    .caja {
        width:100%;
        height: auto;
    }
}
.caja-sec1, .caja-sec2, .caja-sec3 {
    flex:1;
    width:42%;
    max-height: 30%;
    margin-top: 50px;
    background-repeat: no-repeat;
    background-size: 75% auto;
    background-position: center;
}
@media (max-width: 980px) {
    .caja-sec1, .caja-sec2, .caja-sec3 {
        width: 20%;
        padding-top: 222px;
    }
}
.texto-caja {
    flex:1;
    justify-content: center;
    display: flex;
    flex-direction: column; 
    max-width: 300px;
    text-align: center;
    margin-top: -110px;

}
.texto-caja h3 {
    margin-top: 65px;
    font-size: 18px;
    color: #2a3749 !important;
    line-height: 1.5em;
}
.texto-caja p {
    margin:15px;
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    word-wrap: break-word;
}  
@media (max-width: 980px) {
    .texto-caja {
        max-width: none;
        height:auto;
    }
    .texto-caja h3 {
        font-size: 17px;
        line-height:1.1em;
        padding-top:50px;
    }
}
/*servicios-principal*/
.ser  {
    display:flex;
    position: relative;
    width: 100%;

}
.servicios{
    padding-top: 282px;
    align-items: center;
    background-color: rgba(20, 20, 20, 0.59);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-position-y: 50px;
    background-size: cover;
    width: 100%;
    height: 550px;
    display: flex;

}
.servicios-columna2 h2 {
    font-weight: 400;
    font-size: 50px;
    color: #2a3749 !important;
    line-height: 1.3em;
}
.servicios-columna2 p {
    font-family: 'PT Sans', Helvetica, Arial, Lucida, sans-serif;
    font-size: 16px;
    line-height: 1.8em;
}
@media (max-width: 768px) {
    .ser {
        display:flex;
        padding:0;
        margin:0;
        width:auto;
    }
    .servicios-columna2 h2 {
        font-size: 18px;
        font-weight:10px;
        
    }
    .servicios{
        margin-top: 120px;
        background-position-x: center;
        background-position-y: top;
        height:auto;
        flex-direction: column;
    }
    .servicios-columnas {
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        gap: 50px;
    }
    
}

.section-garantia {
    width: 100%;
    height: 550px;
}

.garantia {
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    background-blend-mode: overlay;
    background-image: url(data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjIpIiBoZWlnaHQ9IjgwcHgiIHdpZHRoPSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAsOFYwSDhBOCw4LDAsMCwxLDAsOFpNODAsOFYwSDcyQTgsOCwwLDAsMCw4MCw4Wk0wLDcydjhIOEE4LDgsMCwwLDAsMCw3MlpNNDAsMzJhOCw4LDAsMSwwLDgsOEE4LDgsMCwwLDAsNDAsMzJaTTgwLDcyYTgsOCwwLDAsMC04LDhoOFoiLz48L3N2Zz4=), url(../img/slider-02.jpg);
    background-color: rgba(0, 0, 0, 0.59);
    background-repeat: repeat,no-repeat;
    background-position-x: 0px, center;
    background-position-y: 0, center;
    background-size: 33px auto, cover;
    height: 100%;

    
}

.fondo-garantia {
    left: 0px; 
    right:0;   
    position:relative;

}

.garantia-text {
    display:flex;
    flex-direction: column;
    text-align: center;
    color: white;
    width: 80%;
    padding-top:3px;
    padding-bottom:16px;
    padding-left:190px;
    padding-right:20px;
    max-height: 580px;
}

.garantia-text h2 {
    display:flex;
    color:#F8F9FA;
    justify-content: center;
    font-size: 35px; 
    line-height: 1.2em;
    font-weight: 500;
    padding-bottom:25px;
    margin-top:20px;
}
.garantia-text p {
    padding: 1em;
    font-size: 16px;
    line-height: 1.4em;
    text-align:center;


}
/*garantia*/
@media (max-width: 768px) {
    .section-garantia {
        height: 690px;
    }
    .garantia {
        height: auto;
        margin:0;

    }
    
    .garantia-text {
        h2 {
        padding-top:  10px;
        font-size: 18px;
        margin-left: 10%;
        }
        p {
            font-size:12px;
            padding-top:1px;
            margin-left: 10%;
        }
    }
    .fondo-garantia {
        width:100%;
        margin:0px;
    }
}

.objetivos-container {
    padding: 20px;
    position: relative;
    background-color: #fff;
    background-position-x: 50%;
    background-position-y: center;
    background-size: cover;
}

.titulo-objetivos h2 {
    font-weight: 300;
    font-size: 39px;
    line-height: 1.3em;
    text-align: center;
    transition: color 300ms ease 0ms;
    margin-bottom: 40px;
    margin-top: 214px;
}

.objetivos-columna {
    width: 90%;
    max-width: 1280px;
    display: flex;
    gap: 65px;
    margin:auto;
    position:relative;
    padding-top:40px;
}

.cajabloque {
    float: left;
    position: relative;
    z-index: 2;
    min-height: 1px;
    mix-blend-mode: unset !important;
    text-align: left;
    animation-timing-function: linear;
    animation-duration: .2s;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    word-wrap: break-word;
    width: 100%;
}
.icono {
    display: inline-block;
    margin-bottom: 30px;
    line-height: 20px;
    max-width: 100%;
    font-family: 'ETmodules';
    font-size:20px;
    color: #ffffff;
    font-weight: 400;
    border-radius: 100% 100% 100% 100%;
    overflow: hidden;
    border-width: 3px;
    border-color: #F8F9FA;
    padding-top: 27px;
    padding-right: 29px;
    padding-bottom: 27px;
    padding-left: 29px;
    background-color: #007aff;

    img {
        filter: invert(93%) sepia(90%) saturate(5632%) hue-rotate(180deg) brightness(108%) contrast(115%);
        width:22px;
    }
}
.caja-texto {
    font-size:small;
    font-weight:400;

}
@media (max-width: 768px) {
    .titulo-objetivos h2{
        font-size: 26px;
    }
    .objetivos-columna {
     flex-direction: column;
    }
    .caja-bloque {
        float:none;
        flex-direction: column;

    }
    .icono {
        flex-direction: column;
    }
    
}
.clientes { 
    background-color: #f8f9fa;
    position: relative;
    background-position-x: 50%;
    background-position-y: center;
    background-size: cover;
    background-repeat: no-repeat;

}


.clientes-fondosup {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxODBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0zMjAgMjhDMTYwIDI4IDgwIDQ5IDAgNzBWMGgxMjgwdjcwYy04MCAyMS0xNjAgNDItMzIwIDQyLTMyMCAwLTMyMC04NC02NDAtODR6Ii8+PC9nPjwvc3ZnPg==);    
    background-size: 100% 180px;
    top: 0px;
    z-index: 1;
    transform: scale(1,1);
    position: absolute;
    pointer-events: none;
    height:180px;
    width:100%;
    left: 0;
    right: 0;
    display:block;
}
.clientes-centro {
    display:flex;
    z-index:5;
    align-items:center;
    max-width: 1280px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap:20px;
    padding-top:90px;
    
}
.clientes-text{
    flex:1 1 45%;
    z-index:5;
    padding-left: 50px;
    
    
    h2 {
    text-align:left;
    line-height: 1.em;
    font-weight: 300;
    font-size:26px;
    margin-top:0;
    padding-bottom:40px;
     }
}
.clientes-imagen{
    flex: 1 1 45%;
    z-index:5;
     img {
        display: block;
        position:relative;
        max-width: 100%;
        height: auto;
        
    }

}
.clientes-lista {
    list-style: none;
    padding:0;
    margin:0;
}
.clientes-lista li {
    display: flex;
    align-items: center;
    margin-bottom: 11px;
    font-size: 1rem;
    h4 {
        margin-top:12px;
        color:#666
    }
        
}

.clientes-lista img {
    width: 20px;
    filter: invert(87%) sepia(12%) saturate(1057%) hue-rotate(78deg) brightness(82%) contrast(88%);
    margin-right: 10px;
    flex-shrink: 0;
    
}
.clientes-fondoinf {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyODJweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0xMjgwIDE0MFYwUzk5My40NiAxNDAgNjQwIDEzOSAwIDAgMCAwdjE0MHoiLz48L2c+PC9zdmc+);
    background-size: 100% 282px;
    bottom: 0;
    height: 282px;
    z-index:1;
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100%;
    left: 0;
    right: 0;
    transform: scale(1,1);

}

    

@media (max-width: 768px) {
    .clientes {
        margin-top: 10px;
        padding-top: 20px;
        
        }
    .clientes-text h4 {
        font-size: 13px;
        }

    .clientes-centro {
        flex-direction: column;
        flex-wrap: nowrap;
        }
    .clientes-imagen {
        margin-top: 20px;
        padding: 10px;
        }
}

.actividades {
    padding-bottom:10px;
    padding-top:145px;
    position: relative;
    background-color: #fff;
    background-position-x: 50%;
    background-position-y: center;
    background-size: 100%;
    background-size: cover;
    display:flex;
    justify-content: center;
    box-sizing: border-box;
    gap: 100px;

}
.imagen-depor {
    display: flex;
    align-items: center;
    animation-timing-function: linear;
    animation-duration: .2s;

}
.imagen-depor img {
    padding-top:55px;
    width: 560px;
    height:auto;
    position: relative;
    max-width: 100%;
    flex:1;
}
.text-depor {
    display: flex;
    width: 27.25%;
    padding-top: 142px;
    padding-bottom: 30px;
    flex-direction: column;
    text-align: justify;

}
.text-depor h1 {
    padding-bottom:25px;
    line-height: 1.3em;
    font-weight: 300;
    font-size:28px;
    color:#333

}
@media (max-width: 768px) {
    .actividades {
        flex-direction: column;
        margin-top:40px;
    }
    .text-depor {
        margin-top:10px;
        width:100%;
        padding-right:35px;
        padding-left:25px;
        h1 {
            font-size:20px;
        }
    }
    .imagen-depor img {
        width: 100%;
        height:auto;
        padding-top: 50px;
        padding-right:10%;
    }

}
/*objetivos*/
.objetivos-fut {
    background-repeat: no-repeat;
    background-image: url("/img/escuela-extraescolar-de-futbol.jpg")!important;
    background-position-x: center;
    background-position-y: top 20%;
    background-blend-mode: overlay;
    padding-top: 120px;
    padding-bottom: 98px;
    background-color: rgba(10, 10, 10, 0.55) !important;
    background-size: cover;
    position: relative;
    display: block;
    margin-top:120px;
    padding-left:18%;
    padding-right:18%;

}

.ob-fut-text {
    padding-top:27px;
    width:80%;
    position:relative;
    mix-blend-mode: unset !important;

}
.ob-fut-text p {
    float: left;
    position: relative;
    z-index: 2;
    min-height: 1px;
    color: #fff !important;
    animation-timing-function: linear;
    animation-duration: .2s;
    font-weight: light;
    font-size: 20px;
    text-align: center;
    word-wrap: break-word;
}
@media (max-width: 768px) {
    .objetivos-fut {
        padding-top: 120px;
        background-position-x: center;
        background-position-y: top;
        padding-left: 20px;
        padding-right: 10px;
        margin-right: 10px;
    }
    .ob-fut-text p {
        font-size: 16px;
    }
}
/*que*/
.que {
    padding-top: 148px;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    gap: 125px;
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom:120px;
}
.que-imagen {
    flex: 1 1 40%;
    max-width: 500px;
    height: auto;
    width: 100%;   
    display: block;             

}
.que-texto {
    flex: 1 1 40%;
    max-width: 520px;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 9px !important;
}
.que-texto h2 {
    font-weight: 100;
    line-height: 1em;
    font-size: 26px;
    padding-bottom:10px;
}
.que-tabla {
    margin-top: 10px;
    text-align: left;
    word-wrap: break-word;
    list-style: none;
    padding-left:0;
}
.que-tabla li {
    display:inline-block;
    margin-bottom:20px;
    position: relative;
    padding-left: 35px;
}
.que-tabla li::before {
    content:'';  
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iNTEyLjAwMDAwMHB0IiBoZWlnaHQ9IjUxMi4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDUxMi4wMDAwMDAgNTEyLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsNTEyLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIKZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTIzMzAgNTAwNCBjLTE5IC0yIC04MiAtMTEgLTE0MCAtMjAgLTkxMSAtMTM2IC0xNjc5IC03OTAgLTE5NjQKLTE2NzIgLTg4IC0yNzEgLTExMSAtNDMwIC0xMTEgLTc1MiAwIC0yMDEgNCAtMjc4IDE4IC0zNjUgODkgLTUzNCAzMDkgLTk3Mwo2NzYgLTEzNDggMzcxIC0zODEgODQxIC02MjMgMTM4NiAtNzE0IDE1NyAtMjYgNTczIC0yNiA3MzAgMCA1MzIgODkgOTY5IDMwOAoxMzQ0IDY3MiAzODYgMzc1IDYyNyA4NDIgNzE4IDEzOTAgMjYgMTU3IDI2IDU3MyAwIDczMCAtOTEgNTQ4IC0zMzIgMTAxNQotNzE4IDEzOTAgLTEzOCAxMzQgLTIyMCAyMDAgLTM3MCAyOTggLTMwMCAxOTYgLTU5NyAzMTAgLTk2OSAzNzMgLTkxIDE1IC01MTUKMjggLTYwMCAxOHogbTU4NSAtMjMzIGM0ODIgLTgxIDg4MSAtMjg2IDEyMjUgLTYzMSAzNTEgLTM1MSA1NTYgLTc1NCA2MzcKLTEyNTUgMjQgLTE1NCAyNCAtNDk3IC0xIC02NTAgLTgxIC01MDMgLTI4NSAtOTA0IC02MzYgLTEyNTUgLTM0OSAtMzUwIC03NTQKLTU1NSAtMTI1NSAtNjM3IC0xNjUgLTI2IC01MDYgLTI0IC02NzUgNSAtNDkyIDg0IC04OTEgMjkwIC0xMjM1IDYzNiAtMzQzCjM0NSAtNTQzIDczNiAtNjI3IDEyMjYgLTE4IDEwMyAtMjIgMTY1IC0yMiAzNTAgMCAxODUgNCAyNDcgMjIgMzUwIDg0IDQ4OQoyODUgODgzIDYyNyAxMjI2IDM1MCAzNTIgNzcwIDU2NSAxMjU1IDYzOCAxNTQgMjMgMTc3IDI0IDM4MCAyMCAxMjMgLTIgMjI1Ci0xMCAzMDUgLTIzeiIvPgo8cGF0aCBkPSJNMjM5MyA0NTc5IGMtMjIxIC0xNyAtNDk1IC05MSAtNzAyIC0xODkgLTc1MiAtMzYwIC0xMjEzIC0xMTQ4Ci0xMTUxIC0xOTczIDU1IC03MzUgNDk3IC0xMzc5IDExNjEgLTE2OTEgNDE2IC0xOTYgOTE4IC0yNDQgMTM1NCAtMTMxIDQ1NAoxMTggODUwIDM4MiAxMTI1IDc1MCAyNjcgMzU4IDQwMyA3NjcgNDAzIDEyMTUgMCA0NTAgLTEzNCA4NTMgLTQwNCAxMjE1IC0zNDkKNDY4IC04ODIgNzYwIC0xNDcxIDgwNSAtMTQ1IDExIC0xNjUgMTEgLTMxNSAtMXogbTUxMSAtMjM4IGMzMDYgLTYzIDU5MiAtMjAxCjgyNyAtMzk4IDMwNSAtMjU2IDUxOCAtNjE1IDYwNSAtMTAyMiAzNSAtMTU5IDQ0IC00MzQgMjAgLTYwMSAtMTEwIC03ODAgLTY4MwotMTM4NSAtMTQ1OCAtMTU0MiAtOTggLTIwIC0xNDMgLTIzIC0zMzggLTIzIC0xOTggMCAtMjM5IDMgLTM0MCAyNCAtNjYwIDEzNgotMTE3OSA1OTQgLTEzODQgMTIyMyAtNjYgMjAwIC04MSAzMDQgLTgxIDU1OCAwIDE5NSAzIDI0MCAyMyAzMzggOTEgNDUzIDMzOAo4NDYgNjk3IDExMTEgMTI0IDkyIDE3MiAxMjEgMzA1IDE4NSAxNzUgODQgMzU5IDEzOSA1NDggMTY1IDExNiAxNiA0NjIgNSA1NzYKLTE4eiIvPgo8cGF0aCBkPSJNMzM0NyAzNDY1IGMtMjEgLTggLTYwIC0zMCAtODUgLTQ5IC0yNiAtMTkgLTI2NSAtMjUzIC01MzIgLTUyMApsLTQ4NCAtNDg2IC0yMTYgMjE0IGMtMjQ0IDI0MiAtMjU4IDI1MSAtMzkwIDI1MSAtOTUgMCAtMTY5IC0zMyAtMjM0IC0xMDYKLTc1IC04NCAtOTggLTIwNSAtNjEgLTMyMSAxNiAtNDkgNDUgLTgwIDM2NCAtNDAxIDI0NCAtMjQ2IDM2MSAtMzU2IDM5NiAtMzc1CjQ0IC0yNCA2MSAtMjcgMTQ1IC0yNyA4MCAwIDEwMiA0IDE0MCAyNCA2NSAzNCAxMzA4IDEyNzYgMTM0NyAxMzQ1IDI1IDQ2IDI4CjYwIDI4IDE0NiAwIDc4IC00IDEwMyAtMjIgMTQwIC0yOSA1OSAtOTQgMTI0IC0xNTIgMTUyIC01OCAyOCAtMTg2IDM1IC0yNDQKMTN6IG0xNzkgLTIyOSBjMzggLTM4IDQ0IC03OCAyMCAtMTI0IC0yMiAtNDAgLTEyMzcgLTEyNDkgLTEyNjQgLTEyNTcgLTYyCi0xOCAtNzQgLTggLTQxNSAzMzMgLTMyMiAzMjMgLTMyNyAzMjggLTMyNyAzNjkgMCA3NyA3NCAxMjkgMTQyIDEwMCAxOCAtOQoxMzQgLTExNyAyNjMgLTI0NyAxMjcgLTEyNyAyNDMgLTIzOCAyNTkgLTI0NyA2OSAtMzYgNTUgLTQ4IDY1NiA1NTMgNTQwIDUzOAo1NTcgNTU0IDU5NCA1NTQgMzAgMCA0NSAtNyA3MiAtMzR6Ii8+CjwvZz4KPC9zdmc+Cg==);
    background-position: center;
    background-size: cover;
    width:20px;
    height:20px;
    left:0;
    top:10px;
    position: absolute;
    transform: translateY(-50%);
    filter: invert(87%) sepia(12%) saturate(1057%) hue-rotate(78deg) brightness(82%) contrast(88%);
}
 .que-tabla h4 {
    display: inline-block;
    font-size: 15px;

}
.que p {
    margin-left: 4px;
    text-align: justify;
    text-transform: lowercase;
    

}
.que p::first-letter {
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .que {
        flex-direction: column;
        align-items: center;
        gap:35px;
        }
    }
    .que-imagen, .que-texto {
        max-width: none;
        padding-right: 34px;
        margin-left: 25px;
    }
    .que-imagen img {
        width: 80%;
        height: auto;
        margin-left: 10%;
    }
    .que-texto h2 {
        font-size: 20px;
    }
    .que-tabla h4{
        font-size: 12px;
    }
    .que-tabla li {
        padding-right:10px;
        p {
            padding-right:10px;
        }
    }
/*clientes*/
.fondo-sup{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxODBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0zMjAgMjhDMTYwIDI4IDgwIDQ5IDAgNzBWMGgxMjgwdjcwYy04MCAyMS0xNjAgNDItMzIwIDQyLTMyMCAwLTMyMC04NC02NDAtODR6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 100% 180px;
    top: 0px;
    height: 180px;
    z-index: 1;
    transform: scale(1,1);
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100%;
    left: 0;
    right: 0;
}
.fondo-inf{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyODJweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNlOGU4ZTgiPjxwYXRoIGQ9Ik0xMjgwIDE0MFYwUzk5My40NiAxNDAgNjQwIDEzOSAwIDAgMCAwdjE0MHoiLz48L2c+PC9zdmc+);
    background-size: 100% 282px;
    bottom: 0;
    height: 282px;
    z-index: 1;
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100%;
    left: 0;
    right: 0;
    transform: scale(1,1);
}
.centro-cli {
    align-items:center;
    z-index: 5;
    display: flex;
    width: 95%;
    max-width: 1080px;
    margin: auto;
    position: relative;
    gap:105px;
    padding-top:120px;
    padding-bottom:60px;
}
.clientes-imagen {
    Position: relative;

}
.clientes-lista1 li {
    display:inline-block;
    margin-bottom:20px;
    position: relative;
    padding-left: 35px;
}
.clientes-lista1 li::before {
    content:'';  
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iNTEyLjAwMDAwMHB0IiBoZWlnaHQ9IjUxMi4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDUxMi4wMDAwMDAgNTEyLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsNTEyLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIKZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTIzMzAgNTAwNCBjLTE5IC0yIC04MiAtMTEgLTE0MCAtMjAgLTkxMSAtMTM2IC0xNjc5IC03OTAgLTE5NjQKLTE2NzIgLTg4IC0yNzEgLTExMSAtNDMwIC0xMTEgLTc1MiAwIC0yMDEgNCAtMjc4IDE4IC0zNjUgODkgLTUzNCAzMDkgLTk3Mwo2NzYgLTEzNDggMzcxIC0zODEgODQxIC02MjMgMTM4NiAtNzE0IDE1NyAtMjYgNTczIC0yNiA3MzAgMCA1MzIgODkgOTY5IDMwOAoxMzQ0IDY3MiAzODYgMzc1IDYyNyA4NDIgNzE4IDEzOTAgMjYgMTU3IDI2IDU3MyAwIDczMCAtOTEgNTQ4IC0zMzIgMTAxNQotNzE4IDEzOTAgLTEzOCAxMzQgLTIyMCAyMDAgLTM3MCAyOTggLTMwMCAxOTYgLTU5NyAzMTAgLTk2OSAzNzMgLTkxIDE1IC01MTUKMjggLTYwMCAxOHogbTU4NSAtMjMzIGM0ODIgLTgxIDg4MSAtMjg2IDEyMjUgLTYzMSAzNTEgLTM1MSA1NTYgLTc1NCA2MzcKLTEyNTUgMjQgLTE1NCAyNCAtNDk3IC0xIC02NTAgLTgxIC01MDMgLTI4NSAtOTA0IC02MzYgLTEyNTUgLTM0OSAtMzUwIC03NTQKLTU1NSAtMTI1NSAtNjM3IC0xNjUgLTI2IC01MDYgLTI0IC02NzUgNSAtNDkyIDg0IC04OTEgMjkwIC0xMjM1IDYzNiAtMzQzCjM0NSAtNTQzIDczNiAtNjI3IDEyMjYgLTE4IDEwMyAtMjIgMTY1IC0yMiAzNTAgMCAxODUgNCAyNDcgMjIgMzUwIDg0IDQ4OQoyODUgODgzIDYyNyAxMjI2IDM1MCAzNTIgNzcwIDU2NSAxMjU1IDYzOCAxNTQgMjMgMTc3IDI0IDM4MCAyMCAxMjMgLTIgMjI1Ci0xMCAzMDUgLTIzeiIvPgo8cGF0aCBkPSJNMjM5MyA0NTc5IGMtMjIxIC0xNyAtNDk1IC05MSAtNzAyIC0xODkgLTc1MiAtMzYwIC0xMjEzIC0xMTQ4Ci0xMTUxIC0xOTczIDU1IC03MzUgNDk3IC0xMzc5IDExNjEgLTE2OTEgNDE2IC0xOTYgOTE4IC0yNDQgMTM1NCAtMTMxIDQ1NAoxMTggODUwIDM4MiAxMTI1IDc1MCAyNjcgMzU4IDQwMyA3NjcgNDAzIDEyMTUgMCA0NTAgLTEzNCA4NTMgLTQwNCAxMjE1IC0zNDkKNDY4IC04ODIgNzYwIC0xNDcxIDgwNSAtMTQ1IDExIC0xNjUgMTEgLTMxNSAtMXogbTUxMSAtMjM4IGMzMDYgLTYzIDU5MiAtMjAxCjgyNyAtMzk4IDMwNSAtMjU2IDUxOCAtNjE1IDYwNSAtMTAyMiAzNSAtMTU5IDQ0IC00MzQgMjAgLTYwMSAtMTEwIC03ODAgLTY4MwotMTM4NSAtMTQ1OCAtMTU0MiAtOTggLTIwIC0xNDMgLTIzIC0zMzggLTIzIC0xOTggMCAtMjM5IDMgLTM0MCAyNCAtNjYwIDEzNgotMTE3OSA1OTQgLTEzODQgMTIyMyAtNjYgMjAwIC04MSAzMDQgLTgxIDU1OCAwIDE5NSAzIDI0MCAyMyAzMzggOTEgNDUzIDMzOAo4NDYgNjk3IDExMTEgMTI0IDkyIDE3MiAxMjEgMzA1IDE4NSAxNzUgODQgMzU5IDEzOSA1NDggMTY1IDExNiAxNiA0NjIgNSA1NzYKLTE4eiIvPgo8cGF0aCBkPSJNMzM0NyAzNDY1IGMtMjEgLTggLTYwIC0zMCAtODUgLTQ5IC0yNiAtMTkgLTI2NSAtMjUzIC01MzIgLTUyMApsLTQ4NCAtNDg2IC0yMTYgMjE0IGMtMjQ0IDI0MiAtMjU4IDI1MSAtMzkwIDI1MSAtOTUgMCAtMTY5IC0zMyAtMjM0IC0xMDYKLTc1IC04NCAtOTggLTIwNSAtNjEgLTMyMSAxNiAtNDkgNDUgLTgwIDM2NCAtNDAxIDI0NCAtMjQ2IDM2MSAtMzU2IDM5NiAtMzc1CjQ0IC0yNCA2MSAtMjcgMTQ1IC0yNyA4MCAwIDEwMiA0IDE0MCAyNCA2NSAzNCAxMzA4IDEyNzYgMTM0NyAxMzQ1IDI1IDQ2IDI4CjYwIDI4IDE0NiAwIDc4IC00IDEwMyAtMjIgMTQwIC0yOSA1OSAtOTQgMTI0IC0xNTIgMTUyIC01OCAyOCAtMTg2IDM1IC0yNDQKMTN6IG0xNzkgLTIyOSBjMzggLTM4IDQ0IC03OCAyMCAtMTI0IC0yMiAtNDAgLTEyMzcgLTEyNDkgLTEyNjQgLTEyNTcgLTYyCi0xOCAtNzQgLTggLTQxNSAzMzMgLTMyMiAzMjMgLTMyNyAzMjggLTMyNyAzNjkgMCA3NyA3NCAxMjkgMTQyIDEwMCAxOCAtOQoxMzQgLTExNyAyNjMgLTI0NyAxMjcgLTEyNyAyNDMgLTIzOCAyNTkgLTI0NyA2OSAtMzYgNTUgLTQ4IDY1NiA1NTMgNTQwIDUzOAo1NTcgNTU0IDU5NCA1NTQgMzAgMCA0NSAtNyA3MiAtMzR6Ii8+CjwvZz4KPC9zdmc+Cg==);
    background-position: center;
    background-size: cover;
    width:20px;
    height:20px;
    left:0;
    top:10px;
    position: absolute;
    transform: translateY(-50%);
    filter: invert(87%) sepia(12%) saturate(1057%) hue-rotate(78deg) brightness(82%) contrast(88%);




}
@media (max-width: 768px) {
    .centro-cli {
        flex-direction: column;
        gap:20px;
        margin-top: 100px;
    }
    .clientes-imagen img{

        height:auto;
    }
    .clientes-text {
        width:100%;
    }
    .clientes-lista1 {
        padding-left:0;
        padding-right:10px;
    }
}

/*contacto*/
.contenedor-con {
    display:flex;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    
}
.con-contacto {
    z-index: 2;
    color: #fff !important;
    background-color: rgba(0,0,0,0.59)!important;
    padding-bottom: 3%;
    background-blend-mode: overlay;
    background-image:url(../img/8a1b329b-85d4-440c-b9bf-105f28387cdf_16-9-discover-aspect-ratio_default_0.jpg);
    background-repeat: no-repeat;
    background-position-x: top;
    background-position-y: center;
    background-size: cover;
    margin-top: 120px;
    height: 500px;
    display: flex;
    
}
.con-contacto h1 {
    padding-top: 19%;
    padding-left: 10%;
    font-size: 70px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.5em;
    color:#F8F9FA
}
.contacto1 {
    display: flex;
    justify-content: center;
    gap: 160px;
    padding-top: 160px;
    background-color: #ffffff !important;
    width: 100%;
    max-width: 1080px;
    margin: auto;
    position: relative;
}
.contacto11 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 54%;
}
.contacto11 h1 {
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1em;
    color: #333;
    padding-bottom: 15px;
    padding-top:8px;
}
.contacto12 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    position: relative;
    z-index: 5;
    min-height: 1px;
    float: left;
    mix-blend-mode: unset !important;
}
@media (max-width: 768px) {
    .con-contacto h1 {
        font-size: 40px;
        margin-left: -19px
    }
    .contacto1 {
        display: flex;
        flex-direction: column;
        h1 {
            font-size: 21px;
        }
        


    }
    .contacto11 {
        flex-direction: column;



        .contenedor {

            h3 {
                font-size:15px;
                text-align:right;
            }
        }
        
    }
    .h3-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        padding-top:4px;
    }
}
.correo {
    margin-top: 60px;
    display: flex;
    gap: 20px;
    a {
        color: #007572;
        text-decoration: none;
        font-size: 12px;
        font-weight: 100;
        &:hover {
            text-decoration: underline;
        }
    }

}
@media (max-width: 768px) {

    .contenedor {
        flex-direction: column;
        margin-bottom:80px;

    }
    .correo {
        flex-direction: column;
        text-align: center;
    }
}
.contacto12-imagen {
    width: 100%;
    z-index: 1;
    position: absolute !important;
    top: -10px;
    bottom: auto;
    left: -115px;
    right: auto;
    text-align: left;
    margin-left: 15px;
    animation-timing-function: linear;
    animation-duration: .2s;
}
.formulario-contenedor {
    padding: 1rem;
    position: relative;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    h3 {
    font-size: 20px;
    color: #2a3749 !important;
    line-height: 1.5em;
    text-align:center;
    margin-bottom:1rem;
    }
}
.formulario {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px 1.25rem;

    
    input:not([type="checkbox"]), textarea, label {
       
    resize: none;
    width: 100%;
    border-radius: 2px;
    font-size: 14px;
    border-width: 2px;
    background: transparent;
    border: 1px solid #e9e9e9;
    padding: 12px;
    color: #4e4e4e;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    outline: none;
    }
    input:focus, textarea:focus {
    border-color: #007572;
     background-color: #f0f0f0;
     color: #333;
     box-shadow: 0 0 5px rgba(0, 117, 114, 0.5);
     }
}
.button {
    width: 100%;
    border-radius: 2px;
    background-color: #007572 !important;
    color: #fff !important;
    font-size: 16px;
    padding: 9px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    border: none;
    cursor: pointer;
    text-align: center;
}

.button:focus {
    background-color: #005f5f;
}
.button:disabled {
            background-color: #a0c5ed;
            cursor: not-allowed;
        }

    
@media (max-width: 780px) {
    .formulario-contenedor{
        grid-template-columns: 1fr 1fr;
    }
    .formulario input, .formulario textarea {
        width: 100%;
    }
    
}
@media (max-width: 768px) {
    .contacto1 {
        flex-direction: column;
        gap: 20px;
        padding-top: 120px;
        padding-left:35px;
        padding-right:0px;
    }
    .contacto12-imagen {
        position: relative !important;
        top: auto;
        left: auto;
        margin-left: 0;
    }
    .contacto11 {
        width: 100%;
    }
}
.wpcf7-spinner {
    display: none !important;
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    position: relative;
}
.wpcf7-spinner::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 100%;
    animation: spinner-rotate 0.75s linear infinite;
}
.politica-privacidad {
    display: flex;
    align-items:baseline;
    gap: 10px;
    margin: 20px ;
    font-size: 0.9rem;
    color: #666;
    a {
    color: #007572;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
        }
    }
    input[type="checkbox"] {
      margin-right: 5px;
      margin-top:4px;
      cursor: pointer;
    }
    
}
@media (max-width: 768px) {
    .poitica-privacidad label{
        font-size: 0.8rem;
    
    }
     .politica-privacidad input[type="checkbox"] {
        margin-top: 0;
    }
     .politica-privacidad a {
        margin-top: 5px;

    }
    label {
        font-size: 0.8rem;
    }
}

.aviso-privacidad {
    margin-top: 20px;
    font-size: 1rem;
    text-align: center;
    color: #888585;
    display: block;
    font-weight: 0.1em;

}
.fondo-contacto {
    background-color: rgba(231, 231, 231, 0.59)!important;
    background-image:url(../img/decoded.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: top;
    background-blend-mode: overlay;
    margin: 0;
    height: 14vw;
    width: 100%;
    z-index: 1;
    transform: scale(1, -1);
}
.contacto3 {
    display: flex;
    justify-content: left;
    width: 100%;
    margin:auto;
    position: relative;
    z-index: 5;
}
 /* Mensajes de respuesta */
#mensaje-respuesta {
            margin-top: 6px;
            padding: 17px;
            border-radius: 4px;
            display: none;
        }
.exito { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.spinner {
    display: none;
    width:16px;
    height: 16px;
    border: 2px solid rgba(255,255,255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 2.5s ease-in-out infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}