:root {
  /** GLOBALES **/
  --ruta: url("..");
  --colorPrincipal: #fe0000;
  --colorSecundario: #fe0000;
  --fuenteTitulos: "Ubuntu", sans-serif;
  --fuenteParrafos: "Ubuntu", sans-serif;

  /** MENÚ **/
  --textoMenu: black;
  --selectecMenu: black;
  --lineaMenu: #fe0000;

  /** SECCIÓN HEADER **/
  --barraHeader: #ffffff00;
  --barraMenu: #ffffff00;
  --telefonosColor: #ffffff;
  --alturaHeader: -22rem;
  --alturaHeaderMobile: -33rem;
  --fondoSticky: white;

  /** FOOTER **/
  --barraFooter: #fe0000;
  --colorTextoBarraFooter: #fff;
  --fondoFooter: #fe0000;
  --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;
}

/** Globales **/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  font-family: var(--fuenteTitulos);
  margin: calc(var(--separacion) / 2) 0;
  line-height: 1;
  color: var(--colorPrincipal);
}
h1 {
  font-size: 2.8rem;
}
h2 {
  font-size: 2.6rem;
}
h3 {
  font-size: 2.2rem;
}
h4,
h5,
h6 {
  font-size: 2.2rem;
}
@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.8rem;
  }
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
.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 0.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(--colorPrincipal);
  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: 14rem;
  }
  .contenedor {
    width: 80%;
  }
}
.telefono-sticky a {
  color: #ffffff;
}
.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: white !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.8rem;
  color: var(--textoMenu);
  text-decoration: none;
  line-height: 1.5;
  padding: 5px 14px;
  transition: background 0.4s;
  font-weight: 400;
  text-shadow: 2px 2px 10px #26262682;
  text-transform: capitalize;
}

#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-bottom: solid 2px var(--lineaMenu);
}

#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: 2;
  position: relative;
  transition: background-color 0.5s;
}
.logo img {
  width: 40%;
  transition: width 1s;
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .logo img {
    display: inline;
    margin: 0;
  }
}
.logosticky {
  width: 30% !important;
  transition: width 1s;
}
.logos-kit {
  margin-top: 50px;
}
.logo-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
}
@media (min-width: 768px) {
  .logo-menu {
    flex-direction: row;
    justify-content: space-between;
  }
}
.sf-menu {
  display: none;
}
.mobile-nav {
  display: inline-block;
  margin: 3rem 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: 60rem !important;
  margin: -1.6rem 0 0 -4rem;
}

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

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

/*SOLO TEXTO*/
.solo-texto {
  padding: 10% 10% 3%;
  background-color: #ffffff;
}
.solo-texto h1,
.solo-texto h2 {
  text-align: center;
  color: VAR(--colorPrincipal);
  font-weight: 700;
}
.solo-texto p {
  text-align: center;
}
/**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;
}
@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: 8% 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: 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;
}
@media (min-width: 768px) {
  .mitad-texto {
    padding: 2rem;
  }
}
.foto-mitad-izquierda,
.foto-mitad-derecha {
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

.principal.texto-foto-grid {
  background-color: #fff;
  padding: 5%;
}
.principal.texto-foto-grid.invertido {
  background-color: #fff;
  padding: 5%;
}
.mitad-texto h1,
.mitad-texto h2 {
  color: var(--colorSecundario);
  text-align: center;
  font-weight: 700;
}
.mitad-texto p {
  text-align: center;
}
@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: 10rem 5rem;
  }
  .foto-mitad-derecha,
  .foto-mitad-izquierda {
    margin: 0 30px 30px 0;
    border-radius: 30rem 0;
    box-shadow: 2px 2px 30px #dedede;
  }

  /* 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: center;
  min-height: 60rem;
  padding: 10rem 0;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .texto-inferior {
    min-height: 60rem;
  }
}
.texto-inferior h1,
.texto-inferior h2 {
  color: #fff;
  text-align: center;
  max-width: 100%;
}
.texto-inferior p {
  color: #fff;
  text-align: center;
}
.inferior {
  position: relative;
}

.inferior::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/*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 {
  background-size: cover;
  background-attachment: scroll;
  padding: 200px 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: #000;
  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;
  }

  @media (min-width: 1200px) {
    .texto-inferior-izquierda,
    .texto-inferior-derecha {
      margin-right: 65px;
    }
  }
}

.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 h2 {
  margin: 0;
  color: #fff;
  text-shadow: 2px 2px 7px rgba(20, 20, 20, 0.4);
}
.texto-inferior-izquierda h1 {
  color: VAR(--colorPrincipal);
  font-weight: 700;
}
.texto-inferior-derecha p {
  color: #fff;
  text-shadow: 2px 2px 7px rgba(20, 20, 20, 0.6);
}
.texto-inferior-izquierda p {
  color: #000;
}
/**CONTENEDOR ICONOS**/
/**CONTENEDOR ICONOS**/
.iconos {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1rem;
}

.icono {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;

  background: #000;
  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: 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: 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: 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;
  }
}

.contenedor-copias .icono {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  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;
  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: rgba(0, 0, 0, 0.7);
}
.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 {
  background-color: #eee;
  padding: 10% 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: center;
  height: 100%;
  background: #fff;
  padding-bottom: 10%;
  border-bottom: 1rem solid var(--colorPrincipal);
}
.card-foto {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  min-height: 55rem;
  width: 100%;
}
.card-contenido {
  background: #fff;
  width: 100%;
  text-align: center;
  padding: 2rem;
}
.servicios-cards h1,
.servicios-cards h2 {
  color: #000;
  text-align: center;
  max-width: 100%;
}
.servicios-cards p {
  color: #000;
  text-align: center;
}
.card-contenido h2,
.card-contenido h3,
.card-contenido h4 {
  color: var(--colorPrincipal);
  text-align: center;
  font-size: 2.4rem;
  border-bottom: 2px solid var(--colorPrincipal);
  margin: 5%;
  padding-bottom: 5%;
}
.card-contenido p {
  color: #000;
  text-align: center;
}

/** SECCION CONTACTO **/
.contacto {
  background-color: #eeeeee;
  padding: 6rem 0; /* Espaciado base para móviles */
}

@media (min-width: 768px) {
  .contacto {
    padding: 10rem 0; /* Mayor espaciado para pantallas grandes */
  }
}

.contenedor-contacto {
  display: flex;
  flex-direction: column-reverse; /* Diseño en columna para móviles */
  gap: 2rem; /* Espaciado uniforme */
}

@media (min-width: 768px) {
  .contenedor-contacto {
    flex-direction: row; /* Cambia a diseño en fila en pantallas grandes */
    justify-content: space-around;
  }
}

.formulario,
.mapa {
  width: 100%; /* Ocupa todo el ancho disponible */
}

.mapa iframe {
  height: 400px; /* Altura adecuada para móviles */
  width: 100%;
}

@media (min-width: 768px) {
  .mapa iframe {
    height: 550px; /* Mayor altura para pantallas grandes */
  }
}

/** FOOTER **/
.footer {
  background-color: var(--fondoFooter);
  color: var(--colorTextoFooter);
  padding: 3rem 0 2rem 0; /* Espaciado base para móviles */
}

@media (min-width: 768px) {
  .footer {
    padding: 3rem 0 0 0; /* Ajuste para pantallas grandes */
  }
}

.footer a {
  color: var(--colorTextoFooter);
}

.contenedor-footer {
  text-align: center;
  padding-bottom: 2rem;
}

.textos-legales-contenedor {
  display: flex;
  flex-direction: column; /* Base para móviles */
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .contenedor-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Diseño en rejilla */
    grid-template-rows: 1fr;
  }
  .nombre-empresa {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .direccion {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .horario {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .contacto-redes {
    grid-column: 3/4;
    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 {
    flex-direction: row; /* Cambia a diseño horizontal */
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
}

.nombre-empresa p {
  text-transform: uppercase;
  text-align: center;
  font-family: var(--fuenteTitulos);
  font-size: 2rem;
}

.redes {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.contacto-redes {
  text-align: center;
}

.contacto-redes a {
  font-size: 2.5rem; /* Tamaño de íconos */
}

.textos-legales {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.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;
  }
}

/*PÁGINAS SECUNDARIAS (AVISO LEGAL, AGRADECIMIENTO...*/
.secundarias .agradecimiento {
  padding: 10rem 0;
}
.secundarias .agradecimiento {
  font-size: 2rem;
  text-align: center;
}
.agradecimiento i {
  font-size: 5rem;
  color: green;
}
.secundarias .legal {
  padding: 10% 5%;
}
.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, 0.8);
  width: 100%;
  height: auto;
  margin: 0px;
  border-radius: none;
  transition: background 0.4s, color 0.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 0.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, 0.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 0.4s, color 0.4s;
  width: 100%;
  color: #fff;
  text-transform: uppercase;
  border-radius: 0.5rem;
  font-weight: 300 !important;
}
.contactForm .form-submit-button:hover {
  background: var(--colorSecundario) !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, 0.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: 0.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 0.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 /* var(--colorPrincipal) */;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem;
}
.contenedor-seccion-contacto.mitad-texto-contacto h1,
.contenedor-seccion-contacto .mitad-texto h2 {
  color: #fff;
  text-align: center;
}
.mitad-texto-contacto p {
  color: var(--colorPrincipal);
  font-size: 2rem;
  text-align: center;
  font-weight: 400;
}
.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;
  }
  .contenedor-seccion-contacto {
    width: 80%;
  }

  .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.6rem;
  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;
}

/* Estilos para listas generales */
ul {
  list-style: none; /* Elimina los puntos de la lista */
  padding: 0; /* Elimina el padding por defecto */
  margin: 0; /* Elimina el margen por defecto */
}

li {
  margin-bottom: 1rem; /* Espaciado entre elementos de la lista */
}

/* Estilos específicos para sublistas (listas dentro de listas) */
ul ul {
  margin-left: 1.5rem; /* Indentación para sublistas */
}

/* Estilos para la lista de nivel superior */
ul > li {
  font-weight: bold; /* Hace en negrita los ítems principales */
}

/* Estilos para listas en pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  ul {
    padding-left: 0; /* Asegura que no haya padding extra */
  }

  li {
    text-align: left; /* Alinea los elementos de la lista a la izquierda */
  }

  ul ul {
    margin-left: 0; /* Quita la indentación en sublistas en pantallas pequeñas */
  }
}

/* Estilos para listas en pantallas más grandes */
@media (min-width: 769px) {
  li {
    font-weight: bold; /* Mantiene el texto en negrita para pantallas grandes */
  }

  ul ul {
    margin-left: 2rem; /* Más espacio en las sublistas para pantallas grandes */
  }
}

/* Estilos adicionales para mejorar la presentación de listas */
ul > li:before {
  content: "•"; /* Agrega un punto en los elementos de la lista */
  margin-right: 8px; /* Espacio entre el punto y el texto */
  color: var(
    --color-punto,
    #333
  ); /* Color para el punto (se puede personalizar) */
}

ul ul > li {
  color: #666; /* Color más suave para los elementos secundarios */
}

/* Asegura que el contenido de las listas no se desborde */
ul,
li {
  word-wrap: break-word;
}

/**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;
}

@media (min-width: 769px) {
  .menu-principal {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}