/* Utility Classes */
.intro img {
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  width: 30rem;
}

.about-img{
  display: flex; /* Para permitir el centrado de la imagen dentro de este contenedor */
  justify-content: center; /* Centra la imagen horizontalmente dentro de .about-img */
  align-items: center; /* Centra la imagen verticalmente dentro de .about-img */
  padding: 0.5rem; /* Espacio opcional dentro de la columna de la imagen */
  flex-basis: 30%; /* La imagen ocupa el 30% del espacio */
  max-width: 30%;
}

.about-img img{
  max-width: 100%; /* Se ajusta al contenedor del 30% */
  height: auto;    /* Mantiene la proporción */
  aspect-ratio: 1/1; /* Asegura que la imagen sea cuadrada */
  object-fit: cover;
  border-radius: 7%;
  display: block; /* Evita espacio extra si la imagen fuera inline */
}

.intro-about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem;
  flex-basis: 70%;
  max-width: 70%;
}

.intro-about h1,
.intro-about p {
  padding-left: 0;
  margin-left: 0;
}

.intro .intro-content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el h1 y p verticalmente DENTRO de esta columna */
  padding: 0.5rem; /* Espacio opcional dentro de la columna de texto */
  max-width: 70%;
}

.intro .fila {
  display: flex;
  /* flex-wrap: wrap; // Comentado para que Bootstrap maneje el responsive con col-md-* */
  align-items: center; /* Alinear verticalmente el bloque de texto y el bloque de imagen (las columnas col-md-6) */
}

.box-icons > a > i {
  font-size: 1.5rem;
}

.me-5 span {
  font-size: 1.5rem;
  font-weight: 500;
}

.active > .page-link {
  z-index: 2;
}
.intro {
    margin: 0 0;
    flex-wrap: wrap;
}
.intro-content  h1{
  margin-bottom: 0px;
}
/* Container Styles */
.content, .list-summary{
  max-width: 100rem;
  margin: 0 5%;
  padding-left: 10rem;
  padding-right: 10rem;
  margin: 0 auto;
  
}

/* Universal box-sizing para evitar desbordamientos */
*, *::before, *::after { box-sizing: border-box; }
/* Ajuste de padding dinámico */
.content, .list-summary {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 10%;
}
.home-posts-container{
  padding: 0 10%;
}

#carouselExampleCaptions {
  margin-top: 3.5rem; /* coincide con la altura del header fijo (.site-header) */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .content, .list-summary {
    padding: 0.5rem;
  }

  .content > p {
    word-wrap: break-word;
  }

  .list-controls-container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .intro .intro-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .intro h1, .intro p {
    padding: 0.5rem 0;
    margin-bottom: 0;
  }

  .intro img {
    margin: 0;
  }

  .intro-image {
    width: 100%;
  }

  #carouselExampleCaptions {
    margin-top: 3rem; /* coincide con la altura del header fijo en móvil */
  }

  .carousel-caption > p {
    font-size: smaller;
  }

  .carousel-caption > h5 {
    font-size: medium;
  }

  .carousel-indicators {
    margin-bottom: 0;
  }

  .carousel-caption {
    padding-bottom: 0;
  }
}
/* List Page Styles */
.intro-content {
  max-width: 100%;
}

.intro-image {
  max-width: 400px;
}

.intro-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.toggle-container {
  position: absolute;
  margin: auto 0;
}

.intro-container:not(:has(.intro-image)) .toggle-container {
  position: static;
  text-align: right;
}

/* Intro layout adjustments */
.intro-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 0.5rem;
}
.intro .intro-image img {
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 768px) {
  .intro-container {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .intro-image {
    margin: auto;
  }

  .toggle-container {
    position: static;
    text-align: right;
  }
}

@media (max-width: 729px) {
  .list-summary.cuadros .summary {
    width: 100%;
    min-width: unset;
    max-width: unset;
    height: auto;
    margin-bottom: 1rem;
  }

  .list-summary.cuadros .summary-image {
    min-height: 100px;
    max-height: 100px;
  }

  .list-summary.cuadros .summary-content {
    padding: 0.5rem;
  }

  .list-summary.cuadros .summary-title {
    font-size: 0.9rem;
  }

  .list-summary.cuadros .summary-description {
    font-size: 0.8rem;
    -webkit-line-clamp: 2; /* Limita a 2 líneas en pantallas pequeñas */
    line-clamp: 2; /* Propiedad estándar */
  }
}

/* Clase para truncar texto a 3 líneas con puntos suspensivos */
.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* Propiedad estándar */
  -webkit-box-orient: vertical;
  overflow: hidden; /* necesario para que line-clamp recorte y muestre los puntos suspensivos */
}

/* Ajustes responsivos para los botones */
@media (max-width: 576px) {
  .intro-container {
    flex-direction: column;
    align-items: flex-start !important;
  }
  
  .toggle-container {
    margin-top: 1rem;
    align-self: flex-start !important;
  }
}