@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.servicios-page {
    padding: 6rem 0;
}

.moving {
    position: relative;
    margin-bottom: 6rem;
}

.ml11 {
    display: inline-block;
    position: relative;
}

.ml11 .text-wrapper {
    position: absolute;
    white-space: nowrap;
}

.ml11 .letter {
    display: inline-block;
    opacity: 0;
    font-size: clamp(2rem, 8vw, 6rem);
    font-family: var(--fuente-secundaria);
}

.mis-servicios-titulo,
.mis-servicios-descripcion {
    text-align: center;
    color: var(--blanco);
}


/* Estilos para los detalles de servicios */
.servicio-detalle {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    width: min(95%, 120rem);
    margin: 4rem auto;
  }
  
  .servicio-detalle-imagen {
    background-size: cover;
    background-position: center;
    border-radius: 2rem;
    position: relative;
    min-height: 400px; /* Asegúrate de tener un alto mínimo o establece un alto fijo */
    width: 100%; /* Ajusta el ancho si es necesario */
    background-size: cover;
    background-position: center;
    border-radius: 2rem;
    position: relative;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-timing-function: ease-out;
  }
  
  /* Asegura que la imagen se ajuste al contenido en pantallas más grandes */
  @media (min-width: 768px) {
    .servicio-detalle {
      grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas más grandes */
      align-items: stretch; /* Estira los items para que tengan la misma altura */
    }
  
    .servicio-detalle:nth-child(odd) {
      grid-template-columns: 1fr 1fr; /* Imagen a la derecha */
    }
  
    .servicio-detalle:nth-child(even) {
      grid-template-columns: 1fr 1fr; /* Imagen a la izquierda */
      direction: rtl; /* Intercambia el orden de los elementos */
    }
  
    .servicio-detalle:nth-child(even) > * {
      direction: ltr; /* Restablece la dirección del texto para el contenido */
    }
  
    .servicio-detalle-imagen {
      height: 100%; /* Altura completa basada en el contenido */
    }
  }
  .servicio-detalle-imagen {
    /* Otras propiedades */
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    /* No añadir animation-name aquí */
  }

#diseno-desarrollo-web {
    background-image: url('./../img/diseño-web.webp');
}

#diseno-grafico {
    background-image: url('./../img/diseñografico-servicio.webp');
}

#seo-auditoria {
    background-image: url('./../img/seo.webp');
}

#sem {
  background-image: url('./../img/sem.webp');
}

.boton-servicio {
    margin-top: 2rem;
    display: block;
}

@media (min-width: 768px) {
    .boton-servicio {
        display: inline-block;
    }
}

.listado-caracteristicas {
    list-style: none; /* Elimina los marcadores predeterminados */
    padding-left: 0; /* Elimina el padding izquierdo predeterminado si es necesario */
  }
  
  .listado-caracteristicas li::before {
    content: '•'; 
    color: var(--primario); 
    display: inline-block; 
    width: 1em; 
    margin-left: -1em; 
    margin-right: 0.5em;
    text-align: right; 
  }
  
/* CTA */
.cta {
    text-align: center;
    background-image: url('./../img/fondo-cta.webp'); 
    background-size: cover;
    background-position: center;
    padding: 5rem 2rem;
    text-align: center;
    color: #fff;
    position: relative;
}

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

.cta h3, .cta p, .cta h4, .cta a {
    position: relative;
    z-index: 2;
}

.cta h4 {
    margin-top: 2rem;
}

/* Otros servicios */
.otros-servicios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (min-width: 768px) {
  .otros-servicios-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.otros-servicios-icono {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.otros-servicios-icono h3 {
  font-size: 22px;
}