:root {
    /** GLOBALES **/
    --ruta: url('..');
    --colorPrincipal: #181818;
    --colorSecundario: #999;
    --fuenteTitulos: "Manrope", serif;
    --fuenteParrafos: "Manrope", serif;
    
    /** MENÚ **/
    --textoMenu:  #000 ;
    --selectecMenu:#000;
    --lineaMenu:var(--colorPrincipal) ;

    /** SECCIÓN HEADER **/
    --barraHeader: var(--colorPrincipal) ;
    --barraMenu: #ffffff;
    --telefonosColor: #fff;
    --alturaHeader: 0;
    --alturaHeaderMobile: 0;
    --fondoSticky: #ffffff;

    /** FOOTER **/
    --barraFooter: var(--colorPrincipal) ;
    --colorTextoBarraFooter: #fff;
    --fondoFooter: #000;
    --colorTextoFooter: #fff;
}

/*CÓDIGO PLANTILLA*/

html {
    box-sizing: border-box;
    font-size: 62.5%;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: var(--fuenteParrafos);
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400;
  background-color:var(--colorPrincipal);
}

ul{
list-style:none;
  margin-left:0;
}

/** Globales **/


h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    font-family: var(--fuenteTitulos);
    margin: calc( var(--separacion) / 2 ) 0 ;
    line-height: 1;
    color: var(--colorPrincipal);
   
}
h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2.8rem;
}
h3 {
    font-size: 2.6rem;
}
h4, h5, h6 {
    font-size:  2.2rem;
}
@media (min-width: 768px) {
    h1 {
        font-size: 4.5rem;
    }
    h2 {
        font-size: 3.5rem;
    }
}
a {
    text-decoration: none;
}
img{
    max-width: 100%;
    display: block;
}
.contenedor {
    max-width: 200rem;
    width: 90%;
    margin: 0 auto;
}
.titulin{
    font-size: 2rem;
}

.separador{
    background: var(--colorPrincipal);
    height: .7rem;
    max-width: 10rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .separador{

        margin: 0 ;
    }
}
.separador2{
    background: var(--colorPrincipal);
    height: .7rem;
    max-width: 10rem;
    margin: 0 auto;
}
.texto-bold{
    font-weight: 700;
}
.boton {
    background-color: var(--colorSecundario); 
    color: #fff;
    padding: 5px 30px;
    margin-top: 10px;
    display: inline-block;
    
    border-radius: 24px;
    transition: all .2s ease-in;
    margin: 0 auto;
    display: inline-block;
    }
.boton:hover{
    background-color: #fff; 
  	color: #000;
    box-shadow: 2px 2px 20px #dedede;
}
@media (min-width: 768px) {
    .boton {
       margin:0;
        } 
}
#scrollUp {
    bottom: 20px;
    right: 15px;
    padding: 7px 10px 10px;
    background: var(--colorPrincipal);
    color: #FFF;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    transition: background .4s;
}
#scrollUp:hover {
    background: var(--colorSecundario);
}
.whatsapp {
    position: fixed;
    z-index: 2;
    left: 10px;
    bottom: 50px;
}
.whatsapp a img {
    width: 50px;
    transition: 0.5s;
}
.whatsapp a img:hover {
    width: 60px;
}
.telefono-sticky{
background: var(--colorSecundario);
color: #fff;
padding: 1rem 2rem;
border-radius: 2rem 0 0 2rem;
position: fixed;
top: 13rem;
right: -20rem;
opacity: 0%;
transition: right 1s, opacity 1s;
z-index: 2;
}
@media (min-width: 768px) {
    .telefono-sticky{
        top: 10rem;
    }
    .contenedor {
        width: 80%;
    }
}
.telefono-sticky a{
    color:#000;
}
.telefono-sticky-aparece{
    right: 0;
    opacity: 100%;
    transition: right 1s, opacity 1s;
}
.telefono-sticky-desaparece{
    right: -20rem;
    opacity: 0;
    transition: opacity 1s;
    transition: right 1s;
}
.sticky {
    position: fixed!important;
    top: 0;
    width: 100%;
/*    background-color: var(--fondoSticky)!important; */
  }
  
  .sticky + .contenido-marketing {
    padding-top: 10rem;
  }
  .carga-fotos {
    display: none;
  }
  .cta-banner span i.fa {
    display: none;
}
/**MENÚ OLD SUPERFISH**/

#navigation .sf-menu, #navigation .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

#navigation .sf-menu li {
	position: relative;
	white-space: nowrap;
}

#navigation .sf-menu ul {
	position: absolute;
	display: none;
	z-index: 99;
}

#navigation .sf-menu > li {
	float: left;
}

#navigation .sf-menu ul {
	top: 100%;
	left: 0;
}

#navigation .sf-menu ul ul {
	top: 0;
	left: 100%;
}

#navigation .sf-menu li:hover > ul,
#navigation .sf-menu li.sfHover > ul {
	display: block;
}

#navigation .sf-menu a {
	display: block;
	position: relative;
	font-size: 1.6rem;
	color: var(--textoMenu);
	text-decoration: none;
	line-height: 1.5;
	padding: 5px 14px;
	transition: background .4s;
  font-family: var(--fuenteTitulos);
    
}

#navigation .sf-menu > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 10px;
}

#navigation .sf-menu > li:first-child::before {
	display: none;
}

#navigation .sf-menu ul {
	min-width: 200px;
	background: var(--textoMenu);
	margin-top: 15px;
}

#navigation .sf-menu ul a {
	color: var(--textoMenu);
	text-transform: capitalize;
	border-radius: 0;
}

#navigation .sf-menu li a:hover, 
#navigation .sf-menu li.sfHover > a,
#navigation .sf-menu li.active > a, 
#navigation .sf-menu li.selected > a {
	background: none;
    color: var(--selectecMenu);
    border-radius: 1rem;
}

#navigation .sf-arrows .sf-with-ul::after {
	content: '\f107';
	font-family: 'FontAwesome';
	font-size: 18px;
	position: absolute;
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
	color: #ffffff;
}

/**UTILIDADES**/
.text-center{
    text-align: center;
}
.mt-5 {
    margin-top: 5rem;
}
.mb-5 {
    margin-bottom: 5rem;
}
.menu-wrap{
    display: auto;

}
@media (min-width:768px ) {
    .menu-wrap{
        display: none;
    
    }
}
/**HEADER**/

.contenedor-telefonos{
    background-color: var(--barraHeader);
   
}
.contenedor-menu.menu-sticky{
    transition: background-color 2s;
}
.telefonos{
   display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 0;
}
@media (min-width: 768px) {
    .telefonos{
        flex-direction: row;
        justify-content: flex-end;
        gap: 2rem
    }
}
.menu-telefono{
    margin-top: 2rem
}
@media (min-width: 768px) {
    .menu-telefono{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
}
@media (min-width: 768px) {
    .telefonos{
        display: flex;
        gap: 2rem
    }
}
.telefono{
    color: var(--telefonosColor);
    font-size: 1.8rem;
}
.telefono a{
    color: var(--telefonosColor);
}

.contenedor-menu{
    background-color: var(--barraMenu);
    z-index: 100;
    position: relative;
    transition:  background-color  .5s;
}
.logo img{
    width: 100%;
    transition: width 1s;
    display: block;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .logo img{
        display: inline;
        margin: 0 ;
    }
}
.logosticky{
width: 60%!important;
transition: width 1s;
}

.logo-menu{
    display: flex;
 flex-direction: column;
 align-items: center;
 padding: 1rem 0;
 }
 @media (min-width: 768px) {
     .logo-menu{
        flex-direction: row;
        justify-content: space-between;

     }
 }
 .sf-menu {
    display: none;
}
.mobile-nav {
    display: inline-block;
    margin: 1rem 0;
}
.mobile-nav a {
    display: inline-block;
    color: var(--textoMenul);
    text-transform: uppercase;
}
 @media (min-width: 768px) {
    .sf-menu {
        display: inline-block;
    }
	 .mobile-nav {
        display: none;
        margin-top: 0;
    }
 }
 .telefono-mobile{
    color:#ffffff;
    font-size: 2rem;
    margin-bottom: 2rem;
 }
 .telefono-mobile a{
    color: #ffffff
 }
 /*FOTO ZONA DE MARKETING*/
 .camera_loader {
    display: none!important;
 }
 .camera_src {
    display: block!important;
}
 .camera_fakehover {
    height: 40rem!important;
    margin: -1.6rem 0 0 -4rem;
}

@media (min-width: 768px) {
    .camera_fakehover {
        height: 60rem!important;
        margin: -1.6rem 0 0 -4rem;
    }
}
.slider{
    height: 40rem;
    margin-top: var(--alturaHeaderMobile);
}
@media (min-width: 768px) {
    .slider {
        height: 58rem;
        margin-top: var(--alturaHeader);
    }
}

.diy-slideshow figure figcaption {
    position: absolute;
    width: 70%;
    font-size: 2.5rem !important;
    font-family: var(--fuenteTitulos);
    top: 70% !important;
    left: 40% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    z-index: 4;
    text-shadow: 2px 2px 30px #000;
    letter-spacing: 3px;
    font-weight: 700;
    
}
@media (min-width: 768px) {
    .diy-slideshow figure figcaption {
        top: 60% !important;
        font-size: 4rem !important;
        text-align: left !important; 
    }
}

body div figcaption.frase-marke1ng a.boton-marketing {
    background-color: var(--colorPrincipal);
    color: #fff;
    padding: 10px 30px;
    margin-top: 20px;
    display: inline-block;
    font-size: 2rem;
   cursor: pointer;
   }
 body div figcaption.frase-marketing a.boton-marketing:hover{
    background-color: var(--colorPrincipal); 
}
.slider .diy-slideshow.zoom figure.show {
    z-index: 3; 
}

/*SOLO TEXTO*/
.solo-texto{
    padding: 10% 5%;
    
}
.solo-texto h1, h2{
    text-align: left;
    COLOR: #fff;
}
.solo-texto h2{
    text-align: left;
    COLOR: VAR(--colorSecundario);
}
.solo-texto p{
    text-align: left;
  	COLOR: #fff;
}
.solo-texto2{
    padding: 5%;
    background-color: #ffffff;
}
.solo-texto2 h1, h2{
    text-align: left;
    COLOR: #000;
}
.solo-texto2 h2{
    text-align: left;
    COLOR: VAR(--colorSecundario);
}
.solo-texto2 p{
    text-align: left;
}
/**TEXTO Y FOTO**/
.texto-foto{
    padding: 10% 5%;
}
.texto-foto h1, h2{
    text-align: center;
    color: var(--colorSecundario);

}
.texto-foto p{
    text-align: center;
}
.contenedor-main-foto h1,
.contenedor-main-foto h2 {
    color: #000; 
    text-align: center;
    font-weight: 700;
    
}
@media (min-width: 768px) {
    .contenedor-main-foto h1,
    .contenedor-main-foto h2 {
        text-align: left;
        font-weight: 700;
    }
    .contenedor-main-foto p{
        text-align: left;
    }
    .solo-texto{
        padding: 8% 20%;
        
    }
  .solo-texto2{
        padding: 2% 20%;
        
    }
}
@media (min-width: 768px) {
    .contenedor-main-foto{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        margin-top: 0;
        }
        .contenedor-texto-main {
        flex: 1;
        }
        .contenedor-foto-main{
            flex: 1;
        }
}
.contenedor-foto-main{
    background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
     min-height: 40rem;
     margin-top: 4rem;
     border-radius: 16px;
}
@media (min-width: 768px) {
    .contenedor-foto-main{
         margin-top: 0;
         
    }
}
/*SECCIÓN MITAD TEXTO MITAD FOTO*/

  .mitad-texto {
    padding: 5rem 2rem;
    text-align: center;
  }
  @media (min-width: 768px) {
    .mitad-texto {
        padding: 2rem;
      }
  }
  .foto-mitad-izquierda, 
  .foto-mitad-derecha {
    background-size: cover;
    background-position: center;
    min-height: 400px;
    
  }
  .foto-mitad-contacto {
    background-size: cover;
    background-position: center;
    min-height: 400px;
    background-repeat: no-repeat;
    margin: 2rem;
  }

.fondo-planos{
    background-image:  url("../images/planos.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding:4rem 0;
    background-attachment: scroll; 
}
@media (min-width: 768px) {
    .fondo-planos{
        padding:10rem 0;
        background-attachment: fixed; 
    }
}
  .principal.texto-foto-grid {
    background-color: var(--colorPrincipal);
    
  }
  .principal.texto-foto-grid.invertido {
    background-color: var(--colorPrincipal);
   
  }
  .mitad-texto h1,
  .mitad-texto h2{
    color: #fff;
    text-align: left;
  }
  .mitad-texto p{
    text-align: left;
    color: #fff;
  }
  @media (min-width: 768px) {
    .mitad-texto {
        padding-left: calc((100vw - 120rem) / 4);  
        padding-right: calc((100vw - 120rem) / 4);  
        text-align: left;
      }
      
    .principal.texto-foto-grid {
        display: flex;
        flex-wrap: nowrap;
      }
      .mitad-texto, .foto-mitad-derecha, .foto-mitad-izquierda {
        flex: 1 1 50%;
        box-sizing: border-box;
        padding: 5%;
      }
      .foto-mitad-contacto {
        flex: 1 1 50%;
        box-sizing: border-box;
        padding: 5%;
      }
      .mitad-texto{
        padding: 10% 5%
       
      }
       /* Para invertir la posición */
  .principal.texto-foto-grid.invertido {
    flex-direction: row-reverse;
  }
  }
 
/*SECCIÓN FOTO SOLAPADA*/
.contenedor-main{
    display: flex;
    flex-direction: column-reverse;
 }
 @media (min-width: 768px) {
    .contenedor-main{
        display: grid;
        grid-template-columns: repeat(6, 1fr) ;
        grid-template-rows: repeat(4, 2fr);
    }
     
 }

.contenido-main{
    background-color: #fff;
    padding: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
   
}

@media (min-width: 768px) {
    .contenido-main{
        grid-column: 3 / 7;
        grid-row: 1 / 4;
    }
}
.contenido-main h1, h2{
    text-align: center;
}
.contenido-main p{
    text-align: center;
}
@media (min-width: 768px) {
    .contenido-main h1, h2{
        
        text-align: left;
    }
    .contenido-main p{
        text-align: left;
    } 
}
.solapado{
    background-color: #faf6f3;
    padding: 8rem 0;
}
.solapar{
    background-color: #FFFFFF;
    z-index: 1;
}
.solapar h1,
.solapar h2{
    color: #000;
}
.solapar p{
    color: #000;
}
.img-main{
    background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
     min-height: 50rem;
}
@media (min-width: 768px) {
    .img-main{
        grid-column: 1 / 4;
        grid-row: 2 / 5;
    } 
}
/**SECCIÓN TEXTO INFEROR**/
/*Texto encima de fondo*/

.inferior {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    
}

@media (min-width: 768px) {
    .inferior {
        background-attachment: fixed;
    }
}



.texto-inferior{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 40rem;
    padding: 20% 15% 20% 5%;
    position: relative;
    z-index: 2; 
}
@media (min-width: 768px) {
    .texto-inferior{
        min-height: 30rem;
        padding: 20% 15% 20% 20%;
    } 
}
.texto-inferior h1,
.texto-inferior h2 {
    color:(var(--colorPrincipal));
    text-align: left;
    max-width: 100%;
    
}
.texto-inferior p {
    color: #fff;
    text-align: left;
   

}
.inferior {
    position: relative;
    
  }
  
  .inferior::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #0000008c; 
    z-index: 0; 
  }
  
  /*FOTO DE FONDO INFERIOR CON RECUADRO*/
.inferior-recuadro{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 2rem;
    background-attachment: scroll; 
   
}

@media (min-width: 768px) {
    .inferior-recuadro{
        padding: 20%;
        
    } 
}
.texto-inferior-recuadro{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}
@media (min-width: 768px) {
    .texto-inferior-recuadro{
    padding: 5rem;
    }
}
.texto-inferior-recuadro h1,
.texto-inferior-recuadro h2{
    color:var(--colorPrincipal);
    text-align: center;
    max-width: 100%;

}
.texto-inferior-recuadro p {
    color:#000;
    text-align: center;

}
/*FOTO DE FONDO TEXTO LATERAL*/

.contenedor-inferior-derecha,
.contenedor-inferior-izquierda
 {
    padding: 60px 0; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll; 
}
@media (min-width: 768px) {
    .contenedor-inferior-derecha,
.contenedor-inferior-izquierda
 {
    background-attachment: fixed;
}
}
.contenedor-inferior-derecha-grid,
.contenedor-inferior-izquierda-grid {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

.texto-inferior-izquierda,
.texto-inferior-derecha {
  color: #ffffff;
  position: relative;
  z-index: 1; 
  padding: 4rem 2rem;
  text-align: center;
}
@media (min-width: 768px) {
    .texto-inferior-izquierda,
.texto-inferior-derecha {
  text-align: left;
  padding: 2rem;
}
}

.espacio-inferior-derecha,
.espacio-inferior-izquierda {
  display: none;
}

.contenedor-inferior-derecha-grid::before,
.contenedor-inferior-izquierda-grid::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #345d7fc3; 
}

@media (min-width: 768px) {
  .contenedor-inferior-derecha-grid,
  .contenedor-inferior-izquierda-grid {
    grid-template-columns: 1fr 1fr;
  }

  .texto-inferior-izquierda,
  .texto-inferior-derecha {
    padding: 0;
    color: initial;
  }

  .espacio-inferior-derecha,
  .espacio-inferior-izquierda {
    display: block;
  }

  .contenedor-inferior-derecha-grid .texto-inferior-derecha {
    grid-column: 2 / 3;
  }

  .contenedor-inferior-derecha-grid .espacio-inferior-derecha {
    grid-column: 1 / 2;
  }

  .contenedor-inferior-derecha-grid::before,
  .contenedor-inferior-izquierda-grid::before {
    display: none;  
  }
}

.texto-inferior-derecha h1,
.texto-inferior-derecha h2,
.texto-inferior-izquierda h1,
.texto-inferior-izquierda h2
 {
    margin: 0;
    color:#fff;
    font-size: 2rem;
    font-weight: 700;
      
    }
@media (min-width: 768px) {
    .texto-inferior-derecha h1,
    .texto-inferior-derecha h2,
    .texto-inferior-izquierda h1,
    .texto-inferior-izquierda h2
     {
        font-size: 3rem;
          
        } 
}
    .texto-inferior-derecha p,
    .texto-inferior-izquierda p {
        color:#FFF;
          
        }
/**CONTENEDOR ICONOS**/
/**CONTENEDOR ICONOS**/
.iconos {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    
    gap: 2rem;
}

.icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
   
    
    color: #fff;
    text-align: center;
    width: 100%;
}

@media (min-width: 768px) {
    .iconos {
        flex-direction: row; 
        justify-content: space-around;
        align-items: stretch; 
        flex-wrap: wrap;
    }
    
    .icono {
        flex: 1; 
    }
}


.contenedor-iconos-cajas .contenedor .iconos .icono {
    background-color: #000;
    color: #fff;
}
.contenedor-iconos-completo{
    background-color: #000;
}    
.contenedor-iconos-completo .contenedor .iconos .icono {
    background-color: #000000;
    color: #ffffff;
}
/*Servicios Iconos*/
.servicios-iconos{
    background-color: #fff;
    padding: 5%;
}

@media (min-width: 768px) {
    .servicios-iconos{
        padding: 5%; 
    }
}


.servicios-iconos img{
    max-height: 50px;
    max-width: 50px;
        
}
.servicios-iconos h1,
.servicios-iconos h2{
    color: var(--colorPrincipal);
    text-align: center;
}
.servicios-iconos  p{
    text-align: center;
    color: #000000;
}
.servicio-iconos p{

    color: #ffffff;
    font-size: 1.8rem;
    margin: 2rem 0 0 0;
    line-height: 1;
}
.margen-servicios-iconos{
    margin: 4rem 0;
}
.servicios-iconos .contenedor .iconos .icono {
    background-color: #fff;
    color: #fff;
}

/*ICONOS FONDO FOTOo*/
.servicios-iconos-fondo{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    padding: 3rem 0;
    color: #ffffff;
    position: relative;
}

@media (min-width: 768px) {
    .servicios-iconos-fondo{
        padding: 6rem 0; 
        background-attachment: fixed;
    }
    .servicios-iconos h1,
    .servicios-iconos h2{
        color: var(--colorPrincipal);
        text-align: left;
    }
    .servicios-iconos  p{
        text-align: left;
        color: #000000;
    }
}
.servicios-iconos-fondo h1,
.servicios-iconos-fondo h2{
    text-align: left;
    color: #FFF;
    max-width: 100%;
}
.servicios-iconos-fondo  p{
    text-align: left;
    color: #FFF;
}
.servicio-iconos-fondo p{

    color: #FFFFFF;
    font-size: 1.8rem;
    margin: 2rem 0 0 0;
    line-height: 1;
}


.servicio-iconos-fondo{
    padding: 3rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;

}
@media (min-width: 768px) {
    .servicio-iconos-fondo{
        margin-bottom: 0;
    }
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(20 20 20 / 20%);
    z-index: 0;
}

.contenido {
    position: relative;
    z-index: 10;
    padding: 5% 0;
}
.contenido-texto{
    padding: 5% 15% 5% 5%;
}
.servicios-iconos-fondo .contenedor .iconos .icono {
    background-color: transparent;
    color: #fff;
}
/**SECCIÓN ICONOS + FOTO GRID**/
.servicios-grid-grande{
    background-color: #ffffff;
    padding: 10% 5%;
}
.servicios-grid-grande h1,
.servicios-grid-grande h2{
    color: #000000;
    text-align: center;
    max-width: 100%;
}
.servicios-grid-grande p{
    color: #000000;
    text-align: center;
}
.margen-grid-grande .contenedor-copias {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.margen-grid-grande .servicio-grid-grande-foto {
    background-size: cover;
    background-position: center center;
    min-height: 25rem;
    margin-bottom: 1rem;
}

.margen-grid-grande .contenedor-copias .icono {
    width: 100%;
}

.margen-grid-grande .servicio-grid-grande-foto,
.margen-grid-grande .contenedor-copias {
    width: 100%;
}

@media (min-width: 768px) {
    .margen-grid-grande {
        display: flex;
        gap: 1rem;
    }
    
    .margen-grid-grande .servicio-grid-grande-foto,
    .margen-grid-grande .contenedor-copias {
        flex: 1;
        margin-bottom: 0; /* Remover el margin-bottom en pantallas más grandes */
    }

    .margen-grid-grande .contenedor-copias {
        grid-template-columns: 1fr 1fr;
    }
    .contenido-texto{
        padding: 0 20%;
    }
}


.contenedor-copias .icono {
    display: flex
;
    align-items: flex-start;
    justify-content: flex-start;
    
    color: #ffffff;
    
}

/**SECCIÓN ICONOS TEXTO LATERAL**/

.servicios-iconos-lateral {
    background-color: #12213d;
    padding: 10% 5%;
}
.servicios-iconos-lateral h1,
.servicios-iconos-lateral h2{
 color: #fff;
 text-align: center;
}
.servicios-iconos-lateral p{
    color: #fff;
    text-align: center;
}
.servicios-iconos-lateral .iconos-lateral{
    background-color: transparent;
}
.contenedor-servicios-iconos-lateral {
    display: flex;
    flex-direction: column;
}

.iconos-servicios-iconos-lateral {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.iconos-lateral {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: #000;
    color: #fff;
    text-align: center;
}

.icono-lateral {
    display: flex;
    align-items: center;
    justify-content: center;
}


.icono-lateral img {
    width: 66px;
    height: auto; 
}

@media (min-width: 768px) {
    .iconos-servicios-iconos-lateral {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .iconos-lateral {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex: 1 0 48%;
    }
    .icono-lateral {
        flex: 0 0 66px; 
        margin-right: 10px; 
    }
}

/**CARDS FOTO FONDO**/
.servicios-fotos{
   
    padding: 0;
}
.servicios-fotos-2{
   
    padding: 5%;
}
.contenedor-servicio-fotos{
    display: grid;
    margin: 3rem 0;


}


@media (max-width: 767px) {
    .contenedor-servicio-fotos {
        grid-template-columns: 1fr;
       
    }
    
}

@media (min-width: 768px) {
    
    .servicio-fotos-3, .servicio-fotos-6, .servicio-fotos-9, .servicio-fotos-15, .servicio-fotos-18 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .servicio-fotos-4, .servicio-fotos-8, .servicio-fotos-12, .servicio-fotos-16, .servicio-fotos-20 {
        grid-template-columns: repeat(4, 1fr);
    }
    .servicio-fotos-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 5%;
    }
    .servicio-fotos-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .servicio-fotos-7, .servicio-fotos-10, .servicio-fotos-11, .servicio-fotos-13, .servicio-fotos-14, .servicio-fotos-17, .servicio-fotos-19 {
        grid-template-columns: repeat(4, 1fr);
    }

    .servicios-fotos-2{
   
        padding: 5%;
    }
}


.servicio-fotos{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 30rem;

}
.servicio-fotos-2{
    
    display: grid;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 30rem;

}
.servicio-fotos:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(0 0 0 / 45%); 
  }
  .servicio-fotos .text-wrapper {
    color: #fff;
    text-align: center;
    z-index: 2;
    position: relative;
}
.servicio-fotos-2:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(0 0 0 / 45%); 
  }
.servicio-fotos-2 .text-wrapper {
    color: #fff;
    text-align: center;
    z-index: 2;
    position: relative;
}
  .servicios-fotos h1,
  .servicios-fotos h2{
    color: #000;
    text-align: left;
    max-width: 100%;
  }
  .servicios-fotos p{
    color: #000;
    
  }
  .servicios-fotos-2 h1,
  .servicios-fotos-2 h2{
    color: #000;
    text-align: left;
    max-width: 100%;
  }
  .servicios-fotos-2 p{
    color: #000;
    
  }
  .servicio-fotos h2,
  .servicio-fotos h3,
  .servicio-fotos h4{
    color: #fff;
    text-align: center;
    z-index: 1;
  }
  .servicio-fotos p{
    color: #fff;
    text-align: center;
    z-index: 1;
  }
  .servicio-fotos-2 h2,
  .servicio-fotos-2 h3,
  .servicio-fotos-2 h4{
    color: #fff;
    text-align: center;
    z-index: 1;
  }
  .servicio-fotos-2 p{
    color: #fff;
    text-align: center;
    z-index: 1;
  }
  .servicio-caja{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30rem;

}
/**CARDS FOTO SUPERIOR**/
.servicios-cards{
 
    
    padding: 5% 0;

}
.contenedor-servicios-cards{
    display: grid;
    grid-gap: 2rem;
    margin: 3rem 0;
    align-items: start;
}

@media (max-width: 767px) {
    .contenedor-servicios-cards {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    
    .servicio-card-3, .servicio-card-6, .servicio-card-9, .servicio-card-15, .servicio-card-18 {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .servicio-card-4, .servicio-card-8, .servicio-card-12, .servicio-card-16, .servicio-card-20 {
        grid-template-columns: repeat(4, 1fr);
    }
    .servicio-card-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .servicio-card-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .servicio-card-7, .servicio-card-10, .servicio-card-11, .servicio-card-13, .servicio-card-14, .servicio-card-17, .servicio-card-19 {
        grid-template-columns: repeat(4, 1fr);
    }
    
}


.servicio-card{
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    
  

}
.card-foto{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 100%;
    width: 100%;
}

.list-tiem > li{
background-color:#fff;
  
  margin-top: 1rem ;
  
}
.list-tiem > li p{
  padding:0.6rem 1rem;
color:#000;
}
.card-contenido{
    background: var(--colorSecundario);
    width: 100%;
    text-align: center;
    padding: 2rem;
    
    color: var(--colorPrincipal);
    
    font-family: var(--fuenteTitulos);
}
  .servicios-cards h1,
  .servicios-cards h2{
    color: fff;
    text-align: center;
    max-width: 100%;
  }
  .servicios-cards p{
    color: #fff;
    text-align: center;
  }
  .card-contenido h2,
  .card-contenido h3,
  .card-contenido h4{
    color: var(--colorPrincipal);
    text-align: center;
    font-size: 2.4rem;
    
    margin: 5%;
  }
  .card-contenido p{
    color: #000;
    text-align: center;

  }
  
/**SECCION CONTACTO**/
.contacto{
    background-color: #eeeeee;
    padding: 6rem 0;
}
@media (min-width: 768px) {
    .contacto{
        padding: 10rem 0;
    }
}
.contenedor-contacto{
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
}
@media (min-width: 768px) {
    .contenedor-contacto{
        display: flex;
        flex-direction: row;
        gap: 2rem;
        justify-content: space-around;
    }
}
.formulario, .mapa {
    width: 100%;
}

.mapa iframe{
    height: 400px;
    width: 100%;
}
@media (min-width: 768px) {
    .mapa iframe{
        height: 550px;
    }
}
/**FOOTER**/
.footer{
    background-color: var(--fondoFooter);
    color: var(--colorTextoFooter);
    padding: 3rem 0 2rem 0;
}
@media (min-width: 768px) {
    .footer{
        padding: 3rem 0 0 0;
    }  
}
.footer a{
    color: var(--colorTextoFooter);
}
.contenedor-footer{
    text-align: left;
    padding-bottom: 2rem;
}
.textos-legales-contenedor{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (min-width: 768px) {
    .contenedor-footer{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
      grid-gap:2rem;
      text-align:left;
    }
    .nombre-empresa{
        grid-column: 2/3;
        grid-row: 1/2;
    }
  .logo-footer{
    max-width:200px;
   grid-column: 1/2;
        grid-row: 2/3;
  }
    .direccion{
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .horario{
        grid-column: 3/4;
        grid-row: 2/3;
    }
    .contacto-redes{
        grid-column: 4/5;
        grid-row: 2/3;

    }
    .textos-legales{
        grid-column: 1/4;
        grid-row: 3/4;
    }
    .contenedor-enlaces{
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    .textos-legales-contenedor{
        display: flex;
        flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    }
}
.nombre-empresa p{
    text-transform: uppercase;
    /* font-weight: bold; */
    text-align: center;
    font-family: var(--fuenteTitulos);
    font-size: 2rem;
}
.redes{
    display: flex;
    justify-content: left;
    gap: 1.5rem;
    }
    .contacto-redes{
        text-align: left;
    }
    .contacto-redes a{
        font-size: 2.5rem;
    }
 
    .textos-legales{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
        background: var(--barraFooter);
        padding: 2rem 0;
        color: var(--colorTextoBarraFooter);
        }
        .textos-legales a{
            color: var(--colorTextoBarraFooter);
        } 

    .copyright{
        display: flex;
    }
    .copyright span{
        display: none;
    }
    @media (min-width: 480px) {
        .copyright span{
            display: inline;
        }
}
.titulo-columna-footer{
text-transform: uppercase;
font-family: var(--fuenteTitulos);
color: var(--colorSecundario);
font-size: 1.8rem;
font-weight: 400;
}

/*PÁGINAS SECUNDARIAS (AVISO LEGAL, AGRADECIMIENTO...*/
.secundarias .agradecimiento{
    padding: 10rem 0;
  color:#fff;
}
.secundarias .agradecimiento {
    font-size: 2rem;
    text-align: center;
}
.agradecimiento i{
    font-size: 5rem;
    color: green;
}
.secundarias .legal{
    padding: 10% 5%;
  	color:#fff;
}
.secundarias .legal h1{
    font-family: var(--fuenteParrafos);
    font-size: 2.5rem;
}
.titulo-legal{
    font-size: 2rem;
    font-weight: bold;
}
  
/*FORMULARIO CONTACTO*/

form.contactForm {
	position: relative;
	display: block;
	text-align: left;
	margin: 0 auto;
	background: none;
	border-radius: 5px;
	box-shadow: none;
	padding: 10px;
}
form.contactForm .clear {
	clear: both;
}

form.contactForm legend {
	font-weight: bold;
	padding-top: 15px;
	font-size: 16px;
	min-height: 25px;
	display: none;
}
form.contactForm legend.FormTitle {
	display: none;
}
form.contactForm .formItem {
	position:relative;
	display:block;
	padding: 0px;
	margin-bottom: 5px;
	overflow: hidden;
}
form.contactForm .formItem.fullwidth {
	width: 100%;
	padding: 0px;
	float: none;
	clear: both;
}

form.contactForm br {
	display:none;
}
form.contactForm .singleText br {
	display:inline-block;
}
form.contactForm label {
	display: none;
}
form.contactForm span.two-column {
	display: block;
	float: left;
	width: 260px;
}
form.contactForm span.two-column span {
	display: inline-block;
	width: 10px;
	text-align: center;
}
form.contactForm .text-input, form.contactForm .contactSelect, form.contactForm .datepicker {
	border: none;
	font-family: "Lato", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: normal;
	font-size: 16px;
	line-height: 30px;
	color: #333;
	padding: 5px 10px;
	outline: none !important;
	background: rgba(255,255,255,.8);
	width: 100%;
	height: auto;
	margin: 0px;
	border-radius: none;
	transition: background .4s, color .4s;
}
form.contactForm .contactSelect {
	height:30px;
	width:auto;
	line-height:30px;
	padding: 5px 10px;
}
form.contactForm .contactSelect option {
	line-height:30px;
}
form.contactForm textarea.text-input {
	height: 100px;
	overflow: auto;
	vertical-align:top;
}
form.contactForm .formItem.fullwidth textarea.text-input {
	width: 100%;
}
form.contactForm .text-input:focus, form.contactForm .datepicker:focus{
	color: #000;
	background: #fff;
}
form.contactForm input[type=radio], form.contactForm input[type=checkbox] {
	display: inline;
	width: auto;
	margin: 2px 5px 0px 0px;
	vertical-align: top;
}
form.contactForm .option {
	display: inline-block;
	padding: 5px 15px 0px 0px;
}
form.contactForm #file-uploader {
	margin: 10px 0 0;
}
form.contactForm #containerNS{
	position: relative;
	overflow: auto;
	padding: 5px 0px;
}
form.contactForm #containerNS #newsletterSubscriptionText{
	display: inline-block;
}
form.contactForm #containerNS #checkboxSubs{
	float: left;
}
form.contactForm small {
	display: block;
	font-size: 9px;
	color: #999;
}
form.contactForm .QapTcha {
	padding: 0;
	margin: 10px 0 0;
	width: auto;
	float: left;
}
form.contactForm .QapTcha #Icons {
	margin-right: 5px;
	margin-left: 5px;
}
form.contactForm .QapTcha .TxtStatus {
	display: block;
	clear: both;
	text-align: left;
	line-height: 25px;
	font-size: 11px;
	margin-bottom: 10px;
}
form.contactForm .required,
form.contactForm .QapTcha .TxtStatus.dropError {
	color: #FFF;
}
form.contactForm .QapTcha .dropError {
	color: #FFF;
}
form.contactForm .QapTcha .clr {
	display: none;
}
form.contactForm #QapTcha {
	display:block;
	margin:0px;
}
form.contactForm #messageCheckRecaptch {
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	font-family: "Lato", Arial, "Helvetica Neue", Helvetica, sans-serif;
}
form.contactForm .g-recaptcha > div {
	margin: 2px auto 5px;
}
form.contactForm .grecaptcha-badge {
	display: none;
}
form.contactForm .submitButton {
	margin: 0px;
	float: none;
}
form.contactForm input[type=submit], form.contactForm input.submit-button {
	font-family: "Lato", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 16px;
	line-height: 30px;
	font-weight: normal;
	color: #fff;
	padding: 5px 10px;
	outline: none !important;
	background:#E81304;
	border: none;
	width: 100%;
	height: auto;
	transition: background .4s;
	z-index: 5;
	cursor: pointer;
	border-radius: 3px;
}
form.contactForm input[type=submit]:hover, form.contactForm input.submit-button:hover {
	background: #AB0E03;
}
form.contactForm input.submit-button[disabled],
form.contactForm input.submit-button[disabled]:hover {
	color: rgba(255,255,255,.6);
	cursor: default;
	background-color: #999;
	box-shadow: none;
	z-index: 15;
}
form.contactForm .private_policy {
	clear: both;
	text-align: right;
}
form.contactForm .private_policy_link {
	display: inline-block;
	font-size: 12px;
	color: #000;
}

form.contactForm .id_paragraph_text_1 .infoLabel{
	display:none;
}

#ui-datepicker-div{
	z-index:20 !important;
}
.contactForm .contact-field-item .contact-field-label{
	margin-top: -10px;
padding: 2px 0px;
display: block;
font-size: 15px;
}
.contactForm .form-submit-button {
    background: var(--colorPrincipal)!important;
    padding: 1.5rem;
    border: none;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: background .4s,color .4s;
	width: 100%;
	color: #fff;
	text-transform: uppercase;
	border-radius: .5rem;
    font-weight: 300!important;

}
.contactForm .form-submit-button:hover{
	background:var(--colorPrincipal)!important;
}
@media only screen and (max-width : 480px) {
	form.contactForm {
		width: auto;
	}
	form.contactForm .formItem {
		width: 100%;
		float: none;
		padding: 0!important;
	}
	form.contactForm .text-input, form.contactForm .contactSelect, form.contactForm .datepicker, form.contactForm .formItem.fullwidth textarea.text-input{
		width: 100%;
	}
	form.contactForm .g-recaptcha,
	form.contactForm .submitButton {
		float: none;
	}
	form.contactForm .submitButton {
		margin: 5px 0;
	}
}
@media only screen and (max-width : 350px) {
	form.contactForm {
		margin-left: -15px;
		margin-right: -15px;
		border-radius: 0;
	}
}
fieldset{
	border: none;
	padding: 1rem;
}
@media (min-width: 768px) {
	fieldset{
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
		"a a"
		"b c"
		"d e"
		"f f"
		;
	}
}

#contact-field-id_name_1{
	grid-area: a;
}
#contact-field-id_phone_1{
	grid-area: b;
}
#contact-field-id_email_1{
	grid-area: c;
}
#form1-select_1{
	grid-area: d;
}
#form1-single_line_text_1{
	grid-area: e;
}
#contact-field-id_comments_1{
	grid-area: f;
}
fieldset .contact-field-label{
	display: none !important;
}
.cta-banner {
    position: relative;
    background: rgba(255,255,255,.85);
    color: #333;
    border-radius: 10px;
    padding: 10px 5px;
    text-align: center;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 20px;
}
.cta-banner span {
    position: relative;
    float: right;
    color: #333;
    font-size: 50px;
    line-height: 1;
    width: 100px;
}
.cta-banner span::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 98px;
    height: 98px;
    background: url(../images/bg-banner-cta.png) no-repeat center;
}
.cta-banner span i.fa {
    position: relative;
}
.contactForm .contact-field-item .contact-field-element .form-field {
	border: none;
	border-radius: .5rem;
	padding: 10px 10px;
  }
  .contactForm .gdpr_policy label {
	color: #000;
  }
  .contactForm .gdpr_policy label a {
	color: #000;
	text-decoration: underline;
  }
  .contactForm .g-recaptcha {
	display: grid;
	justify-content: start;
	margin-left: 1rem;
  }
  .gdpr_policy{
	margin-left: 1rem;
  }
  .contactForm .contact-field-item .contact-field-element .form-field {
    padding: 10px 10px!important;
}
.contactForm .form-submit-button {
    padding: 15px 10px!important;
}
.diy-slideshow figure figcaption {

font-family: var(--fuenteTitulos);
}
.destacado-marketing{
    color:#ecca61
}
.section-reviews{
    padding: 10% 5%;
    background-color: #f9f9f9;
}
.fila-reviews{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.review {
    flex: 0 0 23%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 3rem 1.5rem;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 10px;
}

@media (max-width: 767px) {
    .review {
        flex: 0 0 90%; 
    }
}

.titulo-reviews {
    color: #000000;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 0;

}

.texto-reviews {
    text-align: center;
    margin: 0;

}
.galeria{
    margin: 0.3rem 1rem;

}
.logo-grande{
    display: flex;
    justify-content: center;
}
.boton-pdf{
    display: flex;
    justify-content: center;
}
.boton-pdf a{
    background: #000000;
    padding: 1rem 5rem;
    color: #fff;
    text-transform: uppercase;
    transition: ease all .3s;
}
.boton-pdf a:hover{
    background: #7d272b;
}
.principal.texto-foto-grid-contacto {
    background-color: #fff;
  }
 .principal.texto-foto-grid-contacto {
        display: flex;
        flex-direction: column;
      }
@media (min-width: 768px) {
    .principal.texto-foto-grid-contacto {
        flex-direction: row;
        flex-wrap: nowrap;
      }
}
.mitad-texto-contacto{
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
  }
  .contenedor-seccion-contacto.mitad-texto-contacto h1,
  .contenedor-seccion-contacto .mitad-texto h2{
    color: var(--colorPrincipal);
    text-align: center;
  }
  .mitad-texto-contacto p{
    color: var(--colorPrincipal);
	font-size:2rem;
    text-align: center;
  }
  .mitad-texto-contacto a{
    color: var(--colorPrincipal);
	font-size:2rem;
    cursor: pointer;
  }
  @media (min-width: 768px) {
    .mitad-texto-contacto {
        padding-left: calc((100vw - 120rem) / 4);  
        padding-right: calc((100vw - 120rem) / 4);  
        text-align: left;
      }
      
      .mitad-texto-contacto {
        flex: 1 1 50%;
        box-sizing: border-box;
        min-height: 60rem;
        padding: 5%;
      }
}
.contenedor-contact{
    display: flex;
    flex-direction: column;
    padding: 3rem;
    text-align: center;
    font-size: 2rem;
}

.alinear-contacto{
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.alinear-contacto img{
    width: 4rem;
}
.contacto-datos-redes{
    margin-top: 2rem;
}
.destacado{
    font-size: 1.3rem;
    font-family: var(--fuenteTitulos);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.5px;
}
.galeria-inferior{
    margin-top: 3rem;
}
.icono-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
}
.fr-fic{
    width: 64px;
    height: 64px;
}
/* General Reset */
  
  .consulting-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    transition: background-image 1s ease-in-out;
  }
  
  .consulting-section:nth-child(1) {
    background-image: url('image1.jpg');
  }
  
  .consulting-section:nth-child(2) {
    background-image: url('image2.jpg');
  }
  
  .consulting-section:nth-child(3) {
    background-image: url('image3.jpg');
  }
  
  .content {
    text-align: center;
    max-width: 600px;
    z-index: 2;
  }
  
 
  
  .line {
    display: inline-block;
    width: 50px;
    height: 2px;
    background-color: #B0B0B0;
    margin-right: 8px;
  }
  
  
  
  .cta-button {
    background-color: #FFD700;
    color: #000;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .cta-button:hover {
    background-color: #e5b800;
  }
  
  .slider-controls {
    position: absolute;
    bottom: 20px;
    display: flex;
    gap: 8px;
  }
  
  .dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .dot.active {
    background-color: #FFD700;
  }
  
  /* Responsive Styles */
  @media (max-width: 768px) {
    
  
    .cta-button {
      font-size: 0.9rem;
    }
  }

 
  .contenedor-cuatro-columnas {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    padding: 1em;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .contenedor-cuatro-columnas {
        grid-template-columns: 1fr;
    }
}

  .columna1 p,
  .columna2 p,
  .columna3 p,
  .columna4 p{
    text-align: justify;
  }

  .foto-columna1,
  .foto-columna2,
  .foto-columna3,
  .foto-columna4{
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        height: 35rem;
  }
 .espacio-inferior{
    margin-bottom: 2rem;
 }
 .contenedor-boton{
    display: flex;
    justify-content: center;
}
@media (min-width: 768px ) {
    .contenedor-boton{
        display: flex;
        justify-content: flex-start;
    } 
}
.fondo-claro{
    background-color: #eaeef1;
}
.fondo-claro h2{
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}
.contenedor-cuatro-columnas h2{
    font-size: 1.6rem;
    font-weight: 400;
    text-transform: uppercase;
}
.contenedor-cuatro-columnas {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .columna-tarjeta {
    position: relative;
    width: 100%;
    max-width: 30rem;
    overflow: hidden;
  }
  .columna-tarjeta-big {
    position: relative;
    width: 100%;
    max-width: 50rem;
    overflow: hidden;
  }
  .tarjeta-servicio {
    position: relative;
  }
  
  .tarjeta-imagen {
    position: relative;
    width: 100%;
    height: 35rem; 
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  
  .tarjeta-titulo {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #345D7F;
    color: white;
    padding: 1rem;
    text-align: center;
    margin: 0;
    transition: transform 0.3s ease;
    z-index: 0;
    min-height: 7rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; 
  }
  
  .tarjeta-texto-oculto {
    position: absolute;
    bottom: 0;
    background-color: #345D7F;
    color: white;
    width: 100%;
    padding: 2rem;
    opacity: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(100%);
    z-index: 1;
  }
  
  .tarjeta-imagen:hover .tarjeta-titulo {
    transform: translateY(-100%);
  }
  
  .tarjeta-imagen:hover .tarjeta-texto-oculto {
    transform: translateY(0);
    opacity: 1;
  }
  
  @media (hover: none) and (pointer: coarse) {
    .tarjeta-imagen .tarjeta-titulo,
    .tarjeta-imagen .tarjeta-texto-oculto {
      cursor: pointer;
    }
  }
  .fr-fic{
    width: 64px;
    height: 64px;
}
.contenedor-card-servicios {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat (1, 1fr);
}
@media (min-width: 768px) {
    .contenedor-card-servicios {
        display: grid;
        grid-gap: 1em;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
    } 
}

.contenedor-card-un-servicio {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat (1, 1fr);
    margin-top: 1em; 

}
@media (min-width: 768px) {
    .contenedor-card-un-servicio {
        display: grid; 
        grid-template-columns: 500px;
        justify-content: center;
        align-items: center;
        margin-top: 1em; 
    
    }   
}


/**idiomas*/
nav.language {
    color: transparent;
    margin-top: 10px;
        text-align: right;
    }
    nav.language a {
        color:transparent;
    }
    nav.language a span {
        text-indent:-5000px;
        overflow:hidden
    }
    nav.language a span#lang-fr {
        display:inline-block;
        width:30px;
        height:21px;
        background:url(../images/flags.jpg) no-repeat 0 0 !important
    }
    nav.language a span#lang-es {
        display:inline-block;
        width:30px;
        height:21px;
        background:url(../images/flags.jpg) no-repeat 0 -21px !important
    }
    nav.language a span#lang-en {
        display:inline-block;
        width:30px;
        height:21px;
        background:url(../images/flags.jpg) no-repeat -31px 0 !important
    }
    nav.language a span#lang-it {
        display:inline-block;
        width:30px;
        height:21px;
        background:url(../images/flags.jpg) no-repeat -31px -21px !important
    }
    nav.language a span#lang-al {
        display:inline-block;
        width:30px;
        height:21px;
        background:url(../images/flags.jpg) no-repeat -62px 0 !important
    }
    nav.language a span#lang-pt {
        display:inline-block;
        width:30px;
        height:21px;
        background:url(../images/flags.jpg) no-repeat -62px -21px !important
    }
    nav.language a span#lang-ca {
        display:inline-block;
        width:30px;
        height:19px;
        background:url(../images/flags.jpg) no-repeat -62px -21px !important
    }
    .main-container .main-content nav.language {
        display:none
    }

.diy-slideshow .next,
.diy-slideshow .prev {
    display: none;
}
ul {
    padding: 0;
    margin: 20px ;
}

/* Estilo solo para la lista con clase 'custom-list' */
.custom-list {
    list-style: none; /* Eliminar marcadores predeterminados */
}

.custom-list li::marker {
    content: "»"; /* Doble flecha personalizada */
    color: #A16E4A; /* Color marrón */
    font-size: 20px; /* Tamaño del marcador */
    font-weight: bold;
    margin-right: 10px; /* Espaciado con el texto */
    padding-RIGHT: 10px;
    
}

.custom-list-2 {
    list-style: none; /* Eliminar marcadores predeterminados */
}

.custom-list-2 li::marker {
    content: "»"; /* Doble flecha personalizada */
    color: #fff; /* Color marrón */
    font-size: 20px; /* Tamaño del marcador */
    font-weight: bold;
    margin-right: 10px; /* Espaciado con el texto */
    padding-RIGHT: 10px;
    
}
HR{
    background-color: var(--colorPrincipal);
    height: 3px;
    border-radius: 1rem;
    border: none;
    margin: 20px 70% 20px 0;
}
.color{
    background-color: var(--colorSecundario);
   margin-top: 0;
    
}
.color h2{
   
    
}

/*GALERIA*/
.link-picture {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 5px;
}

.link-picture:after {
	content: "+";
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	line-height: 58px;
	text-align: center;
	font-size: 43px;
	font-weight: bold;
	color: #717171;
	background: #fff;
	left: -50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-360deg);
	transition: left .4s, transform .4s;
}

.link-picture:hover::after {
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
}
.caja1{
    background-color: var(--colorPrincipal);
  text-align: center;
      padding: 5%;
}
.caja2{
    background-color: var(--colorSecundario);
text-align: center;
      padding: 5%;
}

.enfasis{
    font-weight: 600;
    font-size: 1.8rem;
    /* text-transform: uppercase; */
    font-family: var(--fuenteTitulos);
    text-align: center;
    padding: 5%;
}