/*--------------------------------------------------------------
# Reglas para ampliar la página web dejando un borde de 40px
--------------------------------------------------------------*/
/* Estas reglas modifican los contenedores principales para que ocupen más espacio */
.container-fluid {
  padding-left: 40px !important;
  padding-right: 40px !important;
  max-width: 100% !important;
}

.container, .container-xl {
  max-width: calc(100% - 80px) !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Asegurar que el header respete los nuevos márgenes */
.header .header-container {
  margin-left: 40px !important;
  margin-right: 40px !important;
  max-width: calc(100% - 80px) !important;
}

/* Mantener responsive en dispositivos móviles */
@media (max-width: 768px) {
  .container, .container-xl, .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .header .header-container {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}

/* Reducir el tamaño de la foto en la sección Acerca de */
.about .about-image img {
  max-width: 40% !important; /* Reduce el tamaño al 70% del original */
  height: auto !important; /* Mantiene la proporción */
  display: block !important; /* Asegura que la imagen se comporte como bloque */
  margin: 0 auto !important; /* Centra la imagen si es necesario */
}



/* Reducir el tamaño de la imagen específica misc-1.webp al 50% */
img[src*="assets/img/misc/misc-1.webp"] {
  max-width: 70% !important; /* Reduce el tamaño al 50% del original */
  height: auto !important; /* Mantiene la proporción */
  display: block !important; /* Asegura que la imagen se comporte como bloque */
  margin: 0 auto !important; /* Centra la imagen */
}

/* Ajustar la imagen en la sección de llamada a la acción si es necesario */
.call-to-action .content-right img[src*="misc-1.webp"] {
  max-width: 70% !important; /* Asegura que la imagen se reduzca al 50% */
  margin: 0 auto !important; /* Centra la imagen */
}

/* Mantener responsive para dispositivos móviles */
@media (max-width: 768px) {
  .about .about-image img {
    max-width: 65% !important; /* Un poco más grande en móviles para mejor visibilidad */
  }
  
  .about .about-image .experience-badge {
    right: 5% !important; /* Ajusta la posición en móviles */
  }
  
  img[src*="assets/img/misc/misc-1.webp"] {
    max-width: 70% !important; /* Un poco más grande en móviles para mejor visibilidad */
  }
}
/* Ajusta este valor según la altura real de tu header */
:target {
  scroll-margin-top: 70px; /* O un poco más, por ejemplo, 80px, para un mejor espaciado */
}

/* Si quieres un efecto más sutil, puedes aplicar esto a cada sección */
#hero{
  scroll-margin-top: 70px; /* Asegúrate de que este valor sea igual o mayor que la altura de tu header */
},
#about,
#services,
#portfolio,
#faq,
#contact {
  scroll-margin-top: 70px; /* Asegúrate de que este valor sea igual o mayor que la altura de tu header */
}

/*--------------------------------------------------------------
# Secciones de Blog (General para index.html y blog.html)
--------------------------------------------------------------*/
/* Estilos específicos para la sección blog-hero con carrusel (AHORA Swiper) */
.blog-hero {
  width: 100%;
  height: 60vh; /* Ajusta la altura del carrusel. Puedes cambiarlo a tu gusto, por ejemplo, 50vh, 400px. */
  position: relative;
  overflow: hidden;
  display: flex; /* Mantenemos flex para centrar contenido del carrusel */
  align-items: center;
  justify-content: center;
  background-color: var(--surface-color); /* Color de fondo por si la imagen no carga */
  /* IMPORTANTE: Añade este padding-top para que el contenido del carrusel no quede debajo del menú */
  padding-top: 120px ; 
	padding-bottom: 0px ;/* AJUSTA ESTE VALOR según la altura de tu header. Prueba 100px, 120px, 150px, etc. */
}

/* ESTILOS PARA SWIPER.JS */
/* Apunta directamente a las clases de Swiper */
.blog-hero .swiper {
  width: 100%;
  height: 100%; /* Asegura que el contenedor swiper ocupe toda la altura de .blog-hero */
}

.blog-hero .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.blog-hero .swiper-slide {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center; /* Centra verticalmente el contenido */
  justify-content: center;
}

/* Si estás usando <img> directamente en lugar de background-image dentro de swiper-slide */
.blog-hero .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Estilos para el texto del caption del carrusel (mantenemos el nombre de clase "carousel-caption" del HTML) */
.blog-hero .carousel-caption {
  background-color: rgba(0, 0, 0, 0.4); /* Fondo semitransparente para el texto */
  padding: 25px 30px; /* Ajusta el padding del recuadro de texto */
  border-radius: 8px;
  max-width: 90%; /* Limita el ancho del caption */
  text-align: center;
  bottom: auto; /* Deshabilita la posición fija de bottom */
  top: 50%; /* Centra verticalmente el caption */
  left: 50%;
  transform: translate(-50%, -50%); /* Ajusta el centro exacto */
  color: #fff; /* Color de texto predeterminado para el caption */
  z-index: 2; /* Asegura que el caption esté por encima de la imagen */
}

.blog-hero .carousel-caption h1 { /* Para el título "Blog" principal */
  font-size: 3.5rem; /* Tamaño de fuente para el título "Blog" */
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--accent-color); 
  /*text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);  Sombra para mejor legibilidad */
}

.blog-hero .carousel-caption p.breadcrumbs { /* Para la frase "Home / Blog" */
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--contrast-color); 
  /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);  Sombra para mejor legibilidad */
}

/* Colores específicos para el texto del caption (si los necesitas) */
/* Si no necesitas que el texto del caption cambie de color por slide, puedes eliminar estas reglas */
/* .blog-hero .swiper-slide:nth-child(1) .carousel-caption h1,
.blog-hero .swiper-slide:nth-child(1) .carousel-caption p.breadcrumbs {
    color: #333;
}

.blog-hero .swiper-slide:nth-child(2) .carousel-caption h5,
.blog-hero .swiper-slide:nth-child(2) .carousel-caption p {
    color: #fff;
} */


---

## Estilos de los Botones de Navegación del Slider Swiper (Flechas)

Estos son los cambios clave para lograr el círculo amarillo y la flecha blanca.

```css
.blog-hero .swiper-button-prev,
.blog-hero .swiper-button-next {
  /* Propiedades del círculo/contenedor del botón */
  width: 44px; /* Tamaño del círculo */
  height: 44px; /* Tamaño del círculo */
  border-radius: 50%; /* Hacerlo circular */
  background-color: transparent; /* Fondo transparente por defecto */
  border: 1px solid var(--accent-color); /* **Borde amarillo** */
  color: var(--color-white); /* Este color se aplicará al ícono (la flecha) directamente */

  /* Posicionamiento y visualización */
  position: absolute; /* Swiper.js ya maneja la posición, pero lo reiteramos */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out; /* Transición suave para todos los cambios */
}

/* Posicionamiento específico para las flechas izquierda y derecha */
.blog-hero .swiper-button-prev {
  left: 20px;
}

.blog-hero .swiper-button-next {
  right: 20px;
}

/* Eliminar el ícono de flecha predeterminado de Swiper */
/* Esto es crucial si Swiper inyecta sus propios SVGs o content en ::after */
.blog-hero .swiper-button-prev::after,
.blog-hero .swiper-button-next::after {
  content: none; /* Elimina cualquier ícono predeterminado de Swiper */
}

/* Estilo para los Íconos de Bootstrap (bi bi-chevron-left/right) */
/* Dado que los iconos de Bootstrap se añaden directamente como clases al div del botón,
   el color del texto del botón (.swiper-button-prev/next) se aplica a la pseudoclase ::before
   que Bootstrap Icons usa para renderizar el ícono. */
.blog-hero .swiper-button-prev.bi::before,
.blog-hero .swiper-button-next.bi::before {
  color: var(--color-white); /* **Asegura que la flecha sea blanca** */
  font-size: 1.2rem; /* Tamaño de la flecha */
  line-height: 1; /* Ayuda a centrar el ícono verticalmente */
}


/* Efecto HOVER para los botones */
.blog-hero .swiper-button-prev:hover,
.blog-hero .swiper-button-next:hover {
  background-color: var(--accent-color); /* **Fondo amarillo/dorado al pasar el ratón** */
  border-color: var(--accent-color); /* El borde también se vuelve amarillo */
  /* Puedes añadir un pequeño efecto de transformación si lo deseas, por ejemplo: */
  /* transform: translateY(-50%) translateX(-2px); para el prev */
  /* transform: translateY(-50%) translateX(2px); para el next */
}

/* Asegura que la flecha permanezca blanca al pasar el ratón */
.blog-hero .swiper-button-prev:hover.bi::before,
.blog-hero .swiper-button-next:hover.bi::before {
  color: var(--color-white); /* La flecha sigue siendo blanca en hover */
}

.blog-hero .swiper-pagination {
  position: absolute;
  bottom: 20px; /* Posición de los indicadores */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  justify-content: center;
}

.blog-hero .swiper-pagination .swiper-pagination-bullet {
  background-color: var(--contrast-color); /* Color de los puntos inactivos */
  opacity: 1;
  margin: 0 5px;
  width: 10px; /* Tamaño de los puntos */
  height: 10px;
  transition: background-color 0.3s ease;
}

.blog-hero .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color); /* Color del punto activo (tu amarillo/dorado) */
  opacity: 1;
}

@media (max-width: 768px) {
  .blog-hero {
    height: 40vh; /* Reduce la altura en pantallas más pequeñas */
    padding-top: 90px; /* Ajusta este padding para móviles */
  }

  .blog-hero .carousel-caption { /* Mantenemos el nombre de clase del HTML */
    padding: 15px 20px;
    max-width: 90%;
  }

  .blog-hero .carousel-caption h1 {
    font-size: 2.5rem;
  }

  .blog-hero .carousel-caption p.breadcrumbs {
    font-size: 0.9rem;
  }

  .blog-hero .swiper-button-prev,
  .blog-hero .swiper-button-next {
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
  }

  .blog-hero .swiper-pagination {
    bottom: 10px;
  }
}

@media (max-width: 576px) {
  .blog-hero {
    height: 30vh; /* Aún más pequeña en móviles */
    padding-top: 80px; /* Ajusta este padding para móviles muy pequeños */
  }

  .blog-hero .carousel-caption {
    /* Puedes decidir ocultar el caption o hacerlo muy pequeño */
    /* display: none !important; */
    padding: 10px 15px;
  }

  .blog-hero .carousel-caption h1 {
    font-size: 1.8rem;
  }

  .blog-hero .carousel-caption p.breadcrumbs {
    font-size: 0.8rem;
    display: none; /* Podrías ocultar las breadcrumbs en pantallas muy pequeñas si no hay espacio */
  }

  .blog-hero .swiper-button-prev,
  .blog-hero .swiper-button-next {
    display: none; /* Ocultar flechas en móviles muy pequeños si no hay espacio */
  }
}

/* --- Estilos personalizados para Páginas de Detalle de Servicio (margenes.css) --- */

/* 1. Eliminar las rayas del pseudo-elemento ::after en la sección superior (Page Title) */
/* Esta regla anula el patrón de rayas que encontramos en main.css */
.service-details-page .page-title::after {
  background-image: none !important; /* ¡Esta es la clave para quitar las rayas! */
}

/* Opcional: Asegurar un color de fondo sólido para el Page Title */
/* Esto es útil si las rayas ocultaban un fondo que ahora quieres visible, o si necesitas un color específico */
.service-details-page .page-title {
  background-color: var(--background-color); /* Usa la variable de color de fondo global de tu tema */
  /* Si prefieres un color fijo (ej. el mismo negro/gris oscuro de tu header), puedes poner: */
  /* background-color: #1A1A1A; */
}


/* 2. Ajuste de Ancho: "40px de cada borde de pantalla" y Responsive */
/* Las reglas que ya tienes en margenes.css para .container, .container-xl, .container-fluid
   ya están aplicando un padding de 40px (o 20px en móvil) y un max-width.
   Asegúrate de que estas reglas sean las que quieres aplicar GLOBALMENTE a todos los contenedores.
   Si SÓLO quieres que esto aplique a las páginas de detalle de servicio, deberíamos ser más específicos.
   
   Dada la estructura que ya tienes en margenes.css, el siguiente código es para el padding-top
   y para asegurar la visibilidad del contenido bajo el header. */

/* 3. Asegurar que el contenido no quede debajo de la barra del menú (header fijo) */
/* Aplica un padding superior al cuerpo de las páginas de servicio
   para empujar el contenido por debajo del header fijo. */
.service-details-page {
  padding-top: 85px; /* Valor base para escritorio, ajusta si es necesario */
}

/* Ajuste del padding-top para móviles si el header cambia de altura */
@media (max-width: 991.98px) { /* Este breakpoint es común para tabletas y móviles */
  .service-details-page {
    padding-top: 70px; /* Valor sugerido para móviles, basado en tu scroll-margin-top móvil de 76px */
  }
}
/* --- Asegurar clicabilidad y visibilidad del enlace "Home" en breadcrumbs de Service Details --- */

/* Apuntamos al enlace dentro de las migas de pan en las páginas de servicio */
.service-details-page .breadcrumbs a {
  pointer-events: auto !important; /* Asegura que se pueda hacer clic */
  position: relative !important;   /* Lo coloca en su propia pila para z-index */
  z-index: 10;                    /* Lo eleva por encima de posibles overlays */
  color: var(--accent-color); /* Asegura que el color del texto sea visible (ej. blanco o claro) */
                                /* O usa un color específico: color: #FFFFFF; */
}

/* Asegurar que el elemento principal de las migas de pan también esté visible si es necesario */
.service-details-page .breadcrumbs {
  position: relative; /* Asegura un contexto de apilamiento */
  z-index: 5;         /* Lo eleva un poco si toda la sección estaba cubierta */
}

/* --- Restaurar color amarillo/acentuado al pasar el ratón por el enlace "Home" del breadcrumb --- */
.service-details-page .breadcrumbs a:hover,
.service-details-page .breadcrumbs a:focus {
  color: var(--default-color) !important; /* Usa tu color de acento (amarillo/dorado) */
  /* Si no funciona con var(--accent-color), puedes probar con el código hexadecimal directo del amarillo, ej: #FFD700 */
}

* Estilos para el contenedor del Swiper si necesita un ancho máximo */
/* .service-details-slider {
    max-width: 900px; /* Ajusta según el ancho deseado de tu contenido principal */
/* margin-left: auto;
    margin-right: auto;
} */

/* Regla crucial: Asegurar que el slide ocupe su mitad del espacio */
.service-details-slider .swiper-slide {
    /*
     * Calcula el ancho. Con two slides, cada uno necesita aproximadamente el 50%
     * (100% / 2). Restamos el spaceBetween que se aplica entre ellos.
     * Swiper maneja esto internamente con `width: calc(...)` si no hay conflictos,
     * pero si está pequeño, una sobrescritura podría ser necesaria.
     * !important se usa para forzar la anulación de estilos del plugin.
     */
    width: calc(50% - var(--swiper-space-between, 30px) / 2) !important; /* Si Swiper no lo calcula bien, fórceselo */
    /* Prueba a cambiar el 30px por el valor de spaceBetween que pongas en el JSON */
    /* O simplemente: */
    /* width: 50% !important; */

    flex-shrink: 0 !important; /* Evita que se encojan */
    /* Elimina cualquier padding interno del slide que esté encogiendo la imagen */
    padding: 0 !important; /* O ajusta a un valor muy pequeño si necesitas un borde */
}

.service-details-slider .portfolio-item {
    width: 100% !important; /* Asegura que el item ocupe todo el ancho del slide */
    height: 100% !important; /* Si quieres que los items tengan la misma altura */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service-details-slider .portfolio-item img {
    width: 100% !important; /* La imagen debe ocupar el 100% de su contenedor */
    height: auto !important; /* Mantiene la proporción */
    object-fit: cover !important; /* Asegura que la imagen cubra el área sin distorsionarse */
}

/* Asegurar que las imágenes no tienen un max-width global de 100px como en la imagen que me enviaste antes */
.service-details-slider .portfolio-item img {
    max-width: none !important; /* Anula cualquier max-width que la esté limitando */
}