:root {
    /** GLOBALES **/
    --ruta: url('..');
    --colorPrincipal: #000;
    --colorSecundario: #18F394;
    --fuenteTitulos:"Inter", serif;
    --fuenteParrafos: "Inter", serif;
    
    
    /** MENÚ **/
    --textoMenu: #fff;
    --selectecMenu:  #18F394;
    --lineaMenu: #18F394;

    /** SECCIÓN HEADER **/
    --barraHeader: #000;
    --barraMenu: #000;
    --telefonosColor: #18F394;
    --alturaHeader: 0;
    --alturaHeaderMobile: 0;
    --fondoSticky: #000;

    /** FOOTER **/
    --barraFooter: #ffffff00;
    --colorTextoBarraFooter:#fff;
    --fondoFooter:#ffffff00;
    --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: 300;
  background-color:#000;

}


/** Globales **/


h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    font-family: var(--fuenteTitulos);
    margin: calc( var(--separacion) / 2 ) 0 ;
    line-height: 1;
    color: var(--colorPrincipal);
}
h1 {
    font-size: 4rem;
}
h2 {
    font-size: 3rem;
}
h3 {
    font-size: 2.8rem;
}
h4, h5, h6 {
    font-size:  2.8rem;
}
.subtitulo{
  font-size: 16px;
}
@media (min-width: 768px) {
    h1 {
        font-size: 4rem;
    }
    h2 {
        font-size: 3.6rem;
    }
  .subtitulo{
  font-size: 30px;
}
}
a {
    text-decoration: none;
}

img{
    max-width: 100%;
    display: block;
}

ul{
list-style:none;
  padding-left:0;
}
.list-item li{
padding:1rem 2rem;
  margin:0.5rem;
  background-color:#fff;
  
}
.contenedor {
    max-width: 200rem;
    width: 90%;
    margin: 0 auto;
}
#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: var(--colorSecundario);
padding: 1rem 2rem;
border-radius: 2rem 0 0 2rem;
position: fixed;
top:16rem;
right: -20rem;
opacity: 0%;
transition: right 1s, opacity 1s;
z-index: 2;
}
@media (min-width: 768px) {
    .telefono-sticky{
        top: 12rem;
    }
}
.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%;
   
  }
  
  .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.4rem;
	color: var(--textoMenu);
	text-decoration: none;
	line-height: 1.5;
	padding: 5px 14px;
	text-transform: uppercase;
	transition: background .4s;
    font-weight: 400;
}

#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 {
	
	color: var(--selectecMenu);
    border:2px solid #fff;
    
	
}

#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);
  font-weight:600;
}

.contenedor-menu{
    background-color: #000;
    z-index: 5;
    position: relative;
    transition:  background-color  .5s;
    border-radius: 0 0 2rem 2rem;
      backdrop-filter: blur(10px);
}
.logo img{
    width: 100px;
    transition: width 1s;
    display: block;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .logo img{
        display: inline;
        margin: 0 ;
    }
}
.logosticky{
width: 80px!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(--textoMenu);
    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: 45rem!important;
    margin: -1.6rem 0 0 -4rem;
    border-radius: 0 0 2rem 2rem;
}

@media (min-width: 768px) {
    .camera_fakehover {
        height: 60rem!important;
        margin: -1.6rem 0 0 -4rem;
        border-radius: 0 0 2rem 2rem;
    }
}
.slider{
    height: 60rem;
    margin: -4rem  0 0 -4rem;
    border-radius: 0 0 2rem 2rem;
}
@media (min-width: 768px) {
    .slider {
        height: 58rem;
        margin: -4rem  0 0 -4rem;
        border-radius: 0 0 2rem 2rem;
    }
}

.diy-slideshow figure figcaption {
    position: absolute;
    width: 80%;
    text-align: left;
    font-size: 3rem !important;
    color: #fff;
    top: 60% !important;
    left: 55% !important;
     bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    z-index: 2; 
    font-weight: 300;
    font-family: var(--fuenteParrafos);
  
}
@media (min-width: 768px) {
    .diy-slideshow figure figcaption {
        top: 60% !important;
        font-size: 4rem !important;
        width: 50%;
        left: 30% !important;
    }
}

/*SOLO TEXTO*/
.solo-texto{
    padding: 10% 5%;

  background-repeat: no-repeat;
   
}
.solo-texto-proyecto{
    padding: 10% 5%;
    background-color: #ffffff;
  border: 1px solid var(--colorPrincipal);
}
.solo-texto h1, h2{
        text-align: left;
    COLOR: #fff;
    
}
.solo-texto-proyecto p{
    text-align: center;
}
.solo-texto-proyecto h1, .solo-texto-proyecto h2{
    text-align: center;
    COLOR: VAR(--colorSecundario);
}
.solo-texto p{
    text-align: left;
    color: #fff;

}
/**TEXTO Y FOTO**/
.texto-foto{
    padding: 10% 5%;
}
.texto-foto h1, h2{
    text-align: center;
    color: #fff;

}
.texto-foto p{
    text-align: center;
}
.contenedor-main-foto h1,
.contenedor-main-foto h2 {
    color: #000; 
    text-align: center;
    
}
.contenedor-iconos-cajas p{
  color: #fff;
      text-align: left;
}
@media (min-width: 768px) {
    .contenedor-main-foto h1,
    .contenedor-main-foto h2 {
        text-align: left;
    }
    .contenedor-main-foto p{
        text-align: left;
    }
    .solo-texto{
        padding: 10%;
       
    }
    .solo-texto-proyecto{
        padding: 5%;
        background-color: #ffffff;
        margin: 5%;
        border: 1px solid var(--colorPrincipal);
    }
}
@media (min-width: 768px) {
    .contenedor-main-foto{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        margin-top: 0;
        }
        .contenedor-texto-main {
        flex: 2;
        }
        .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;
}
@media (min-width: 768px) {
    .contenedor-foto-main{
         margin-top: 0;
    }
}
/*SECCIÓN MITAD TEXTO MITAD FOTO*/

  .mitad-texto {
    padding: 5rem 2rem;
    text-align: center;
  }
.foto-mitad-izquierda, 
  .foto-mitad-derecha {
    background-size: contain;
    background-position: center;
    min-height: 350px;
    border-radius: 2rem;
    background-repeat: no-repeat;
  }
  @media (min-width: 768px) {
    .mitad-texto {
        padding: 2rem;
      }
    .foto-mitad-izquierda, 
  .foto-mitad-derecha {
    
    min-height: 550px;
    
  }
  }
  


  .principal.texto-foto-grid {
   
    margin: 5%;
    
     border:2px solid #fff;
    padding: 5%;
  }
  .principal.texto-foto-grid.invertido {
   
    margin: 5%;
    border:2px solid #fff;
    padding: 5%;
  }
  .mitad-texto h1{
    color: #fff;
    text-align: left;
  }
  
  .mitad-texto h2{
    color: #fff;
    text-align: left;
  }
 .mitad-texto p{
    color: #fff;
    text-align: left;
  }
  @media (min-width: 768px) {
    .mitad-texto {
       
        text-align: left;
      }
      .mitad-texto h1,
      .mitad-texto h2{
        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;
        
        border-radius: 2rem;
      }
       /* 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: left;
}
.contenido-main p{
    text-align: center;
}
@media (min-width: 768px) {
    .contenido-main h1, h2{
        
        text-align: left;
    }
    .contenido-main p{
        text-align: left;
    } 
}
.solapado{
    
    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: flex-end;
        align-items: flex-start;
        min-height: 60rem;
        padding: 15% 10% 15% 5%;
        position: relative;
        z-index: 2; 
}
@media (min-width: 768px) {
    .texto-inferior{
        min-height: 50rem;
     padding: 15% 30% 15% 5%;
    } 
}
.texto-inferior h1,
.texto-inferior h2 {
    color:#fff;
    text-align: left;
    max-width: 100%;

}
.texto-inferior p {
    color: #fff;
    text-align: left;
    

}
.inferior {
    position: relative;
    margin: 10% 5%;
    border-radius: 3rem;
  }
  
  .inferior::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(23 3 35 / 81%); 
    z-index: 1; 
    border-radius: 3rem;
  }
  
  /*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: 8% 5% 8% 40%;
        background-attachment: fixed; 
    } 
}
.texto-inferior-recuadro{
    background-color: var(--colorPrincipal);
    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:#FFF;;
    text-align: center;
    max-width: 100%;

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

}
/*FOTO DE FONDO TEXTO LATERAL*/

.contenedor-inferior-derecha,
.contenedor-inferior-izquierda
 {
    background-size: cover;
    background-attachment: scroll;
    padding: 60px 0; 
}
@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: rgba(0, 0, 0, 0.7); 
}

@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;
      
    }
    .texto-inferior-derecha p,
    .texto-inferior-izquierda p {
        color:#FFF;
          
        }
/**CONTENEDOR ICONOS**/
/**CONTENEDOR ICONOS**/
.iconos {
    display: grid;
    
    align-items: stretch;
    padding: 2rem;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    padding: 2rem;
   
    color: #fff;
    text-align: left;
    width: 100%;
      border: 1px solid #fff;
    border-radius: 2rem;
}

@media (min-width: 768px) {
    .iconos {
         grid-template-columns: 1fr 1fr 1fr;
    }
    
    .icono {
        flex: 1; 
    }
}


.contenedor-iconos-cajas .contenedor .iconos .icono {
    
    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: 3rem 0;
}

@media (min-width: 768px) {
    .servicios-iconos{
        padding: 6rem 0; 
    }
}


.servicios-iconos img{
        max-height: 60px;
        
}
.servicios-iconos h1,
.servicios-iconos h2{
    color: var(--colorPrincipal);
    text-align: left;
}
.servicios-iconos  p{
    text-align: left;
    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-fondo h1,
.servicios-iconos-fondo h2{
    text-align: center;
    color: #FFF;
    max-width: 100%;
}
.servicios-iconos-fondo  p{
    text-align: center;
    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: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.contenido {
    position: relative;
    z-index: 2; /* Este valor es superior al z-index del overlay, por lo que el contenido estará por encima del overlay oscuro */
}
.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;
    }
}

.texto-iconos {
    margin-left: 1rem;
}
.texto-iconos h3{
    font-size: 2rem;
  font-weight: 600;
  color: #fff;
  text-align: left; 
}
.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{
    background-color: #eee;
    padding: 10% 5%;
}
.contenedor-servicio-fotos{
    display: grid;
    grid-gap: 2rem;
    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);
    }
    .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);
    }
    
}

.servicio-fotos{
    flex: 1;
    display: flex
;
    /* height: 80rem; */
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 250px 5% 5% 5%;
   
    width: 100%;

}
.servicio-fotos:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255 255 255 / 56%) 46%, rgb(255 255 255 / 94%) 80%, rgba(255, 255, 255, 1) 100%);
    border-radius: 2rem 2rem 0 0 ; 
  }
  .servicio-fotos .text-wrapper {
    color: #fff;
    text-align: center;
    z-index: 2;
    position: relative;
}
  .servicios-fotos h1,
  .servicios-fotos h2{
    color: #000;
    text-align: center;
    max-width: 100%;
  }
  .servicios-fotos p{
    color: #000;
    text-align: center;
  }
  .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;
  }

/**CARDS FOTO SUPERIOR**/
.servicios-cards{
   
    padding: 5%;
}
.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(3, 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: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    gap: 20px;
    border: 1px solid #fff;
    padding: 5%;

   

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

.card-foto2{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 20rem;
    width: 100%;
}
.card-contenido{
   
    padding: 0 5%;
    text-align: left;
    color: #fff;

    /* text-decoration: underline; */

    
}
.card-contenido2{
    background: var(--colorPrincipal);
    width: 100%;
    text-align: center;
    padding: 3rem;
    
}
  .servicios-cards h1{
    color: var(--colorPrincipal);

    text-align:center;
    max-width: 100%;
  }
  
  .servicios-cards h2{
    color: #fff;
    text-align: left;
    max-width: 100%;
    font-family: var(--fuenteParrafos);
    text-transform: uppercase;
    font-weight: 500;
    /* font-size: 2rem; */
    margin-right: 15%;

  }
  .servicios-cards p{
    color: #fff;
    text-align: left;
  }
  .card-contenido h2,
  .card-contenido h3,
  .card-contenido h4{
    color: #fff;
    text-align: left;
    font-size: 2rem;

    /* border-bottom: 2px solid var(--colorPrincipal); */
    margin: 5% 0;
    /* padding-bottom: 5%;*/
    
  }
  .card-contenido p{
    /* color: #977f75;
    text-align: center;
    border: 2px solid #c7b2a9;
    border-radius: 1rem;
    margin: 5%;
    padding: 15px;*/

  }
  .card-contenido a{
    color: #fff;
    

  }
  
  
  
/**SECCION CONTACTO**/
.contacto{
    
    padding: 6rem 0;
  margin: 5%;
        border-radius: 2rem;
        backdrop-filter: blur(60px);
}
@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);
  font-weight:300;
  font-size:1.8rem!important;
}
.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{

font-family: var(--fuenteTitulos);
color: #fff;
font-size: 1.8rem;
font-weight: 500;
}

/*PÁGINAS SECUNDARIAS (AVISO LEGAL, AGRADECIMIENTO...*/
.secundarias .agradecimiento{
    padding: 10rem 0;
}
.secundarias .agradecimiento {
    font-size: 2rem;
    text-align: center;
  color: #fff;
}
.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;
    font-weight: 400!important;
    border-radius: 1rem;
    border: 1.5px solid #fff!important;;

}
.contactForm .form-submit-button:hover{
	
    background: #fff!important;
    color: var(--colorPrincipal);
}
@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: #fff;
  }
  .contactForm .gdpr_policy label a {
	color: #fff;
	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;
}

.destacado-marketing{
    color:var(--colorPrincipal);
}
.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 {
   
  }
 .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{
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
  }
  .contenedor-seccion-contacto.mitad-texto-contacto h1,
  .contenedor-seccion-contacto .mitad-texto h2{
    color: #000;
    text-align: center;
  }
  .mitad-texto-contacto p{
    color: #fff;
	font-size:2rem;
    text-align: center;
  }
  .mitad-texto-contacto a{
    color:  #fff;
	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: 0;
      }
}
.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.4rem;
     font-weight: 500; 
     letter-spacing: 1px;
    text-transform: uppercase;
    color:var(--colorSecundario)!important;
   
}
.galeria-inferior{
    margin-top: 3rem;
}
.contenedor-grid{
    margin-top:5px;
}
.contenedor-fotos-proyecto{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

/* Contenedor principal */
.tiktok-container {
    text-align: center;
    background: #ffffff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
    width: 90%;
    margin: auto;
  }
  
  /* Título */
  .tiktok-container h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
  }
  
  /* Bloque TikTok (si quieres personalizar más) */
  .tiktok-embed {
    width: 100%;
    max-width: 780px;
    min-width: 288px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
  }
  .contenedor-tiktok{
    padding: 5% 0;
  }
  .diy-slideshow{
    height:100%;
    
    }
    .diy-slideshow.zoom figure.show{
    margin:0;
    }

    .icono-logo{
        display: flex;
    justify-content: center;
    }

.fr-fic{
  width: 100px;
  height: 100px;
}
.custom-list {
    list-style: none; /* Eliminar marcadores predeterminados */
  text-align: left;
}

.custom-list li::marker {
    content: "✓ "; /* Doble flecha personalizada */
    color: #fff; /* Color marrón */
    font-size: 20px; /* Tamaño del marcador */
    font-weight: bold;
   
   
    
}
.cta{
      padding: 10px 0;
    color: #fff;
    border-radius: 2rem;
  font-weight: 500;
}
.cta:hover{
          text-decoration-line: underline;
  
}