/* Estilos generales para el body */
body {
  padding-top: 60px; /* Espacio para que el contenido no esté detrás del navbar */
}

/* Estilos para la barra de navegación */
.navbar {
  background-color: #7b1f15 ;
}

.navbar-brand {
  color: white; /* Color del texto de la marca en el navbar */
}

.navbar-nav .nav-link {
  color: white; /* Color de los enlaces del navbar */
}

/* Menú desplegable al pasar el mouse en pantallas grandes */
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Estilos para el contenedor del Swiper */
.swiper-container-wrapper {
  max-width: 100%;     /* El Swiper ocupará el 100% del contenedor */
  margin: 0 auto;      /* Centra el Swiper horizontalmente */
  padding: 20px;       /* Añade espacio alrededor del Swiper */
}

/* Estilos del Swiper */
.swiper {
  width: 350px;         /* Ajusta el ancho del contenedor */
  height: 350px;
  max-width: 550px;    /* Limita el tamaño máximo del Swiper */
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Estilos para cada slide del Swiper */
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;        /* Ancho de cada slide */
  height: 300px;       /* Altura de cada slide */
}

/* Estilos para las imágenes dentro de los slides del Swiper */
.swiper-slide img {
  display: block;
  width: 100%;         /* Las imágenes ocupan todo el ancho del slide */
  max-height: 100%;   /* Limita la altura de las imágenes */
  object-fit: cover;   /* Ajusta las imágenes para que se recorten adecuadamente */
}

header {
  background-image: url('SobreMi.jpg');
  background-size: cover; /* La imagen cubre todo el fondo */
  background-position: center; /* Centra la imagen */
  background-attachment: fixed; /* Hace que la imagen se mantenga fija cuando se desplaza */
  color: white; /* Color blanco para que el texto resalte */
}

.header-intro {
  text-align:left;
  padding: 100px 20px; /* Espacio para que el contenido no esté pegado a los bordes */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para que el texto sea legible sobre la imagen */
}

.header-intro h1 {
  font-size: 2.5rem; /* Tamaño de la fuente del título */
  margin-bottom: 20px;
}

.header-intro p {
  font-size: 1.2rem;
  max-width: 600px; /* Limitar el ancho del párrafo */
}

article {
  padding: 40px 20px; /* Espacio alrededor del artículo */
  background-color: #f4f4f4; /* Fondo suave para el artículo */
  text-align: center; /* Centra todo el contenido del artículo */
}

article h2 {
  font-size: 2rem; /* Tamaño de fuente del título */
  margin-bottom: 20px; /* Espacio debajo del título */
  color: #333; /* Color oscuro para el título */
}

article p {
  font-size: 1.1rem; /* Tamaño de fuente de los párrafos */
  line-height: 1.6; /* Espacio entre líneas */
  color: #555; /* Color de los párrafos */
  text-align: justify; /* Alinea el texto a la izquierda */
  max-width: 800px; /* Limita el ancho del texto */
  margin: 0 auto 20px; /* Centra los párrafos y añade espacio debajo */
}

article section {
  padding: 20px;
  background-color: white;
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.article-second{
  display: flex; /* Usamos flexbox para alinear el contenido */
  justify-content: space-evenly;
  align-items: center; /*alineación vertical del swiper*/
  /* justify-content: space-between; Espacio entre el contenido del article y el aside los pone de extremo a extremo*/
}

aside {
  flex: 0 0 40%; /* El aside ocupa el 30% del ancho */
  padding: 50px; /* Espacio interno para el aside */
  background-color: rgba(0, 0, 0, 0.1); /* Fondo semi-transparente */
  border-radius: 5px; /* Bordes redondeados */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra para un efecto visual */
}

aside p {
  text-align: justify; /* Texto justificado */
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
  .article-second {
    flex-direction: column; /* Cambiar la dirección a columna */
  }

  .aside-info {
    flex-basis: 100%; /* Hacer que el aside ocupe el 100% en móvil */
    margin-top: 10px; /* Espacio entre el swiper y el aside */
  }
}

/* Font for headers (h1, h2, etc.) */
h1, h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700; /* Bold for emphasis */
}

/* Font for body text */
body, p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400; /* Regular for body text */
}

/* Option for a more artistic header */
header h1 {
  font-family: 'Great Vibes', cursive;
  font-size: 3rem; /* Larger for artistic effect */
}