/* Variables y estilos generales (sin cambios) */

/* Definición de la Identidad Visual */
:root {
    --fondo-institucional: #9e5c4e; /* El color exacto que solicitaste */
    --guinda: #800020;
    --oro: #b19b23;
}

body {
    background-color: var(--fondo-institucional) !important;
    margin: 0;
    padding: 0;
    /* Esto asegura que el color cubra toda la pantalla incluso si hay poco contenido */
    min-height: 100vh; 
}

/* Tip Pro: Asegúrate de que las secciones de Bootstrap no tengan fondos sólidos */
section {    background-color: transparent !important;
}


:root {
--color-guinda: #66081f;
  --color-amarillo: #e9a751;
  --color-texto-claro: #F5F5F5;
  --color-texto-oscuro: #333;

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ca4747;
}
/* Estilos para la barra superior */
.top-bar {
  background-color: var(--color-guinda);
  color: var(--color-amarillo);
  padding: 0.5rem 0;
  font-size: 0.9rem;
}
/* Estilos para la barra superior */
.top-bar {
  background-color: var(--color-guinda);
  color: var(--color-amarillo);
  padding: 0.5rem 0;
  font-size: 0.9rem;
}

.top-bar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: flex-end; /* Alinea los enlaces a la derecha */
  gap: 2rem;
}

.top-link {
  color: var(--color-texto-claro);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
  display: flex; /* Nuevo: para alinear el icono y el texto */
  align-items: center; /* Nuevo: para centrar verticalmente */
}

.top-link i {
  margin-right: 0.5rem; /* Nuevo: espacio entre el icono y el texto */
  font-size: 1.1rem; /* Nuevo: tamaño del icono */
}

.top-link:hover {
  color: var(--color-amarillo);
}

.top-bar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: flex-end; /* Alinea los enlaces a la derecha */
  gap: 2rem;
}

.top-link {
  color: var(--color-texto-claro);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.top-link:hover {
  color: var(--color-amarillo);
}

.header {
  background-color: var(--color-guinda);
  padding: 1.5rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: var(--color-texto-claro);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.logo {
  display: flex;
  align-items: left;
}

.logo-img {
  width: 40px;
  height: 60px;
  margin-right: 15px;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-amarillo);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-item {
  margin-left: 2rem;
  position: relative;
}

.nav-link {
  text-decoration: none;
  color: var(--color-texto-claro);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-amarillo);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--color-amarillo);
}

.nav-link:hover::after {
  width: 100%;
}

/* Estilos para el menú desplegable */
.dropdown-menu {
  display: none; /* Oculto por defecto */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-guinda);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border-top: 2px solid var(--color-amarillo);
}

.dropdown-menu.open {
  display: block; /* Muestra el menú cuando tiene la clase "open" */
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-link {
  display: block;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  color: var(--color-texto-claro);
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

.dropdown-link:hover {
  background-color: var(--color-amarillo);
  color: var(--color-guinda);
}
/* Estilos para la galería de imágenes */
.slider-container {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden; /* Oculta las imágenes fuera del contenedor */
  border: 4px solid var(--color-guinda);
  border-left: none;
  border-right: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Animación de deslizamiento */
}

.slide {
  min-width: 100%; /* Cada imagen ocupa el 100% del ancho del contenedor */
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* Estilos para los botones de navegación */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(128, 0, 32, 0.6); /* Guinda semi-transparente */
  color: var(--color-texto-claro);
  border: none;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease;
}

.slider-btn:hover {
  background-color: rgba(128, 0, 32, 0.8);
}

.prev-btn {
   left: 10px;
  border-radius: 0 8px 8px 0;
}

.next-btn {
  right: 10px;
  border-radius: 8px 0 0 8px;
}
/* Estilos para el footer */
.footer {
  background-color: var(--color-guinda);
  color: var(--color-texto-claro);
  padding: 3rem 2rem;
  font-family: 'Arial', sans-serif;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-section {
  flex: 1;
  min-width: 200px;
}

.footer-section h3 {
  color: var(--color-amarillo);
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.footer-section p, .footer-section ul {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-link {
  color: var(--color-texto-claro);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--color-amarillo);
}

.footer-section ul li {
  margin-bottom: 0.75rem;
}

/* Estilos de los iconos de redes sociales */
.social-icons {
  display: flex;
  gap: 1.5rem;
}

.social-link {
  color: var(--color-texto-claro);
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.social-link:hover {
  color: var(--color-amarillo);
}

/* Estilos de la sección inferior */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 3rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.7);
}
/* Estilos para la sección de 4 partes */
.four-part-section {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 2rem;
  text-align: center;
}

.section-header {
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2.8rem;
  color: var(--color-guinda);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 80px;
  height: 4px;
  background-color: var(--color-amarillo);
  border-radius: 2px;
}

.subtitle {
  font-size: 1.2rem;
  color: var(--color-texto-oscuro);
  max-width: 800px;
  margin: 0 auto;
}

.four-part-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 4 columnas en pantallas grandes, adaptable */
  gap: 2.5rem;
}

.part-item {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.part-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.part-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%; /* Para que las imágenes sean circulares */
  border: 4px solid var(--color-amarillo);
  margin-bottom: 1.5rem;
  transition: border-color 0.3s ease;
}

.part-item:hover .part-img {
  border-color: var(--color-guinda);
}

.part-item h3 {
  font-size: 1.5rem;
  color: var(--color-guinda);
  margin-bottom: 1rem;
}

.part-item p {
  font-size: 1rem;
  color: var(--color-texto-oscuro);
  line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-header h2 {
    font-size: 2.2rem;
  }
  .subtitle {
    font-size: 1.1rem;
  }
  .four-part-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .section-header h2 {
    font-size: 1.8rem;
  }
  .subtitle {
    font-size: 1rem;
  }
  .part-item {
    padding: 1.5rem;
  }
  .part-img {
    width: 100px;
    height: 100px;
  }
}
/* Estilos para la sección de dos partes */
.two-part-section {
  background-color: #f5f5f5; /* Un gris claro para el fondo */
  padding: 5rem 2rem;
}

.two-part-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* En pantallas grandes, las divisiones son una al lado de la otra */
@media (min-width: 992px) {
  .two-part-content {
    flex-direction: row;
    align-items: center;
  }
}

.content-left {
  flex: 1;
  padding-right: 2rem;
}

.content-left h2 {
  font-size: 2.5rem;
  color: var(--color-guinda);
  margin-bottom: 1rem;
}

.content-left .subtitle {
  font-size: 1.2rem;
  color: var(--color-amarillo);
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.content-left p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-texto-oscuro);
  margin-bottom: 1rem;
  text-align: justify;
}

.content-right {
  flex: 1;
  text-align: center;
}

.section-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.cta-button {
  display: inline-block;
  background-color: var(--color-amarillo);
  color: var(--color-guinda);
  padding: 0.8rem 2rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 1.5rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
  background-color: var(--color-guinda);
  color: var(--color-amarillo);
}
/* Estilos para la sección de Programas Sociales */
.social-programs {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 2rem;
  text-align: center;
}

.programs-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas fijas en una fila */
  gap: 2rem;
  margin-top: 3rem;
  overflow-x: auto; /* Permite el desplazamiento horizontal en móviles */
  padding-bottom: 1rem; /* Espacio para la barra de desplazamiento */
}

.program-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-width: 280px; /* Asegura un ancho mínimo para cada tarjeta */
}

.program-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.card-bg-yellow, .card-bg-guinda {
  padding: 2rem;
  color: #fff;
  position: relative;
}

.card-bg-yellow {
  background-color: var(--color-amarillo);
  color: var(--color-guinda);
}

.card-bg-guinda {
  background-color: var(--color-guinda);
  color: var(--color-amarillo);
}

.card-bg-yellow h3, .card-bg-guinda h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.program-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
}

.card-content {
  padding: 3rem 1.5rem 1.5rem;
  text-align: center;
}

.card-content p {
  font-size: 0.95rem;
  color: var(--color-texto-oscuro);
  line-height: 1.6;
}
/* Estilos para la barra de imágenes lineal */
.logo-carousel {
  width: 100%;
  overflow: hidden; /* Oculta el contenido que se sale del carrusel */
  padding: 2rem 0;
  background-color: #ffffff; /* Fondo claro para los logos */
  white-space: nowrap; /* Evita que los elementos se envuelvan */
}

.carousel-track {
  display: flex;
  animation: scroll 30s linear infinite; /* Animación de desplazamiento */
}

.carousel-item {
  display: inline-block;
  margin: 0 2rem;
  width: 150px;
  height: auto;
  filter: grayscale(100%); /* Efecto blanco y negro para los logos */
  opacity: 0.6;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.carousel-item:hover {
  filter: grayscale(0%); /* Vuelve a color al pasar el mouse */
  opacity: 1;
}

/* Define la animación de desplazamiento */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Desplaza el 50% del ancho del carrusel */
  }
}

/* Opcional: Detener la animación al pasar el mouse por encima */
.logo-carousel:hover .carousel-track {
  animation-play-state: paused;
}
/* Estilos para la barra de imágenes lineal */
.logo-carousel {
  width: 100%;
  overflow: hidden;
  padding: 2rem 0;
  background-color: #ffffff; /* Fondo claro para los logos */
}

/* Nuevo contenedor para centrar el carrusel */
.centered-wrapper {
  max-width: 1400px;
  margin: 0 auto;
}

.carousel-track {
  display: flex;
  animation: scroll 30s linear infinite;
  white-space: nowrap; /* Evita que los elementos se envuelvan */
}

.carousel-item {
  display: inline-block;
  margin: 0 2rem;
  width: 150px;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.carousel-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Define la animación de desplazamiento */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Opcional: Detener la animación al pasar el mouse por encima */
.logo-carousel:hover .carousel-track {
  animation-play-state: paused;
}
/* Estilos para la sección de ubicación */
.location-section {
  max-width: 1400px;
  margin: 4rem auto;
  padding: 0 2rem;
  text-align: center;
}

.map-container {
  width: 100%;
  height: 500px;
  margin-top: 2rem;
  border: 4px solid var(--color-guinda);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.map-container iframe {
  width: 100%;
  height: 100%;
}

.address-info {
  margin-top: 2rem;
  font-size: 1.1rem;
  color: var(--color-texto-oscuro);
}

.address-info p {
  margin: 0.5rem 0;
}
/* Estilos para la sección de servicios */
.services-section {
  max-width: 1400px;
  margin: 4rem auto;
  padding: 0 2rem;
  text-align: center;
}

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.service-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.service-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.service-content {
  padding: 1.5rem;
}

.service-content h3 {
  font-size: 1.5rem;
  color: var(--color-guinda);
  margin-bottom: 0.75rem;
}

.service-content p {
  font-size: 0.95rem;
  color: var(--color-texto-oscuro);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.service-link {
  display: inline-block;
  color: var(--color-guinda);
  text-decoration: none;
  font-weight: bold;
  border: 2px solid var(--color-guinda);
  padding: 0.5rem 1.5rem;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.service-link:hover {
  background-color: var(--color-guinda);
  color: #fff;
}
/* Estilos para la sección de noticias */
.news-section {
  max-width: 1400px;
  margin: 4rem auto;
  padding: 0 2rem;
  text-align: center;
}

.news-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.news-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.news-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.news-content {
  padding: 1.5rem;
}

.news-date {
  font-size: 0.85rem;
  color: #777;
  display: block;
  margin-bottom: 0.5rem;
}

.news-content h3 {
  font-size: 1.5rem;
  color: var(--color-guinda);
  margin-bottom: 0.75rem;
}

.news-content p {
  font-size: 1rem;
  color: var(--color-texto-oscuro);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.read-more-link {
  display: inline-block;
  color: var(--color-guinda);
  text-decoration: none;
  font-weight: bold;
  border-bottom: 2px solid var(--color-guinda);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.read-more-link:hover {
  color: var(--color-amarillo);
  border-color: var(--color-amarillo);
}
/* Estilos para la sección de noticias */
.news-section {
  max-width: 1400px;
  margin: 4rem auto;
  padding: 4rem 2rem; /* Aumenta el padding vertical para que el degradado se vea mejor */
  text-align: center;
  /* Nuevo estilo de fondo degradado */
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(32, 5, 12, 0.1)); /* Degradado suave */
  border-radius: 15px; /* Bordes redondeados para un look moderno */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Sombra sutil para destacar la sección */
}

.news-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.news-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.news-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.news-content {
  padding: 1.5rem;
}

.news-date {
  font-size: 0.85rem;
  color: #777;
  display: block;
  margin-bottom: 0.5rem;
}

.news-content h3 {
  font-size: 1.5rem;
  color: var(--color-guinda);
  margin-bottom: 0.75rem;
}

.news-content p {
  font-size: 1rem;
  color: var(--color-texto-oscuro);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.read-more-link {
  display: inline-block;
  color: var(--color-guinda);
  text-decoration: none;
  font-weight: bold;
  border-bottom: 2px solid var(--color-guinda);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.read-more-link:hover {
  color: var(--color-amarillo);
  border-color: var(--color-amarillo);
}
.top-bar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between; /* Alinea los elementos a los extremos */
  align-items: center; /* Centra verticalmente */
}

.top-links {
  display: flex;
  gap: 2rem;
}

.date-display {
  color: var(--color-amarillo);
  font-weight: bold;
}
/* Estilos para la barra superior */
.top-bar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem; /* Más espacio vertical para el nuevo diseño */
  display: flex;
  flex-direction: column; /* Apila los elementos verticalmente */
  align-items: center; /* Centra los elementos horizontalmente */
  gap: 0.5rem; /* Espacio entre la fecha y los enlaces */
}

/* El resto de tu CSS para .top-bar y los enlaces se mantiene igual */

.top-links {
  display: flex;
  gap: 2rem;
  /* Ya no necesita justify-content: flex-end; porque el contenedor padre lo centra */
}

.date-display {
  color: var(--color-amarillo);
  font-weight: bold;
}
/* Estilos para la barra superior */
.top-bar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Alinea los elementos a la derecha */
  gap: 0.5rem;
}

/* El resto de tu CSS se mantiene sin cambios */

.top-links {
  display: flex;
  gap: 2rem;
}

.date-display {
  color: var(--color-amarillo);
  font-weight: bold;
}

/* --- Estilos para la Página "Nosotros" --- */

/* Hero Section */
.about-hero {
    background-image: url('https://via.placeholder.com/1920x600/800020/FFD700?text=Sobre+Nosotros'); /* Imagen de fondo llamativa */
    background-size: cover;
    background-position: center;
    color: var(--color-texto-claro);
    text-align: center;
    padding: 8rem 2rem;
    position: relative;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Capa oscura para mejor legibilidad */
    z-index: 1;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.about-hero-content h1 {
    font-size: 3.8rem;
    margin-bottom: 1.5rem;
    color: var(--color-amarillo);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.about-hero-content p {
    font-size: 1.5rem;
    line-height: 1.6;
}

/* Intro Section */
.about-intro {
    padding: 5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.intro-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .intro-container {
        flex-direction: row;
        justify-content: space-between;
    }
    .intro-text, .intro-image {
        flex: 1;
    }
    .intro-text {
        padding-right: 3rem;
        text-align: left;
    }
}

.intro-text h2 {
    font-size: 2.8rem;
    color: var(--color-guinda);
    margin-bottom: 1.5rem;
    position: relative;
}

.intro-text h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 4px;
    background-color: var(--color-amarillo);
    border-radius: 2px;
}

.intro-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-texto-oscuro);
    margin-bottom: 1rem;
}

.intro-image img {
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Mission, Vision, Values Section */
.mission-vision-values {
    background-color: #f9f9f9;
    padding: 5rem 2rem;
    text-align: center;
}

.mision-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.mision-item {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mision-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.mision-item .icon-large {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
}

.mision-item .guinda-color {
    color: var(--color-guinda);
}
.mision-item .amarillo-color {
    color: var(--color-amarillo);
}

.mision-item h3 {
    font-size: 1.8rem;
    color: var(--color-guinda);
    margin-bottom: 1rem;
}

.mision-item p, .mision-item ul {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-texto-oscuro);
}

.mision-item ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.mision-item ul li::before {
    content: "\2022"; /* Bullet point */
    color: var(--color-amarillo);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* What We Do Section */
.what-we-do {
    padding: 5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.what-we-do-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .what-we-do-container {
        flex-direction: row-reverse; /* Imagen a la derecha, texto a la izquierda */
        justify-content: space-between;
    }
    .what-we-do-text, .what-we-do-image {
        flex: 1;
    }
    .what-we-do-text {
        padding-left: 3rem;
        text-align: left;
    }
}

.what-we-do-text h2 {
    font-size: 2.8rem;
    color: var(--color-guinda);
    margin-bottom: 1.5rem;
    position: relative;
}

.what-we-do-text h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 4px;
    background-color: var(--color-amarillo);
    border-radius: 2px;
}

.what-we-do-text p, .what-we-do-text ul {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-texto-oscuro);
    margin-bottom: 1rem;
}

.what-we-do-text ul {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

.what-we-do-text ul li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1.8em;
}

.what-we-do-text ul li strong {
    color: var(--color-guinda);
}

.what-we-do-text ul li::before {
    content: "\f058"; /* Check-circle icon from Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--color-amarillo);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
}

.what-we-do-image img {
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Team Section */
.team-section {
    background-color: #f5f5f5;
    padding: 5rem 2rem;
    text-align: center;
}

.team-container {
    max-width: 1400px;
    margin: 3rem auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
}

.team-member {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.member-photo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--color-amarillo);
    margin-bottom: 1.5rem;
}

.team-member h3 {
    font-size: 1.6rem;
    color: var(--color-guinda);
    margin-bottom: 0.5rem;
}

.team-member p {
    font-size: 1.05rem;
    color: #555;
}

/* Botón de Llamada a la Acción (Ya lo tienes, pero aquí un recordatorio) */
.cta-button {
    display: inline-block;
    background-color: var(--color-amarillo);
    color: var(--color-guinda);
    padding: 0.8rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 2rem; /* Ajustado para más espacio */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
    background-color: var(--color-guinda);
    color: var(--color-amarillo);
}

/* Media Queries para Responsive Design */
@media (max-width: 768px) {
    .about-hero-content h1 {
        font-size: 2.5rem;
    }
    .about-hero-content p {
        font-size: 1.2rem;
    }
    .intro-text h2, .what-we-do-text h2 {
        font-size: 2.2rem;
        text-align: center;
    }
    .intro-text h2::after, .what-we-do-text h2::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .intro-text, .what-we-do-text {
        padding-right: 0;
        padding-left: 0;
    }
    .mision-item {
        padding: 2rem;
    }
    .mision-item .icon-large {
        font-size: 3rem;
    }
    .team-member {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .about-hero-content h1 {
        font-size: 2rem;
    }
    .about-hero-content p {
        font-size: 1rem;
    }
    .intro-text h2, .what-we-do-text h2 {
        font-size: 1.8rem;
    }
    .mision-item h3, .team-member h3 {
        font-size: 1.4rem;
    }
    .mision-item p, .what-we-do-text p, .team-member p {
        font-size: 0.9rem;
    }
}
/* Sección de Introducción */
.intro-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-texto-oscuro);
  margin-bottom: 1rem;
  text-align: justify; /* Alinea el texto de manera justificada */
}

/* Misión, Visión y Valores */
.mision-item p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-texto-oscuro);
  text-align: justify; /* Alinea el texto de manera justificada */
}

/* Sección "¿Qué Hacemos?" */
.what-we-do-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-texto-oscuro);
  margin-bottom: 1rem;
  text-align: justify; /* Alinea el texto de manera justificada */
}
/* --- Estilos para la Página "Visión y Misión" --- */

/* Hero Section */
.page-hero {
    background-size: cover;
    background-position: center;
    color: var(--color-texto-claro);
    text-align: center;
    padding: 8rem 2rem;
    position: relative;
}

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

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.hero-content h1 {
    font-size: 3.8rem;
    margin-bottom: 1.5rem;
    color: var(--color-amarillo);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 1.5rem;
    line-height: 1.6;
}

/* Secciones de Contenido */
.mission-section, .vision-section {
    padding: 5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.section-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .section-container {
        flex-direction: row;
        justify-content: space-between;
    }
    .text-content, .image-content {
        flex: 1;
    }
    .text-content {
        padding-right: 3rem;
    }
    .vision-section .section-container {
        flex-direction: row-reverse; /* Alterna la posición de la imagen y el texto */
    }
    .vision-section .text-content {
        padding-left: 3rem;
        padding-right: 0;
    }
}

.text-content h2 {
    font-size: 2.8rem;
    color: var(--color-guinda);
    margin-bottom: 1.5rem;
    text-align: left;
    position: relative;
}

/* Efecto Dinámico en Título */
.dynamic-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 4px;
    background-color: var(--color-amarillo);
    border-radius: 2px;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.5s ease-in-out;
}

.dynamic-heading:hover::after {
    transform: scaleX(1.2);
}

.text-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-texto-oscuro);
    margin-bottom: 1rem;
    text-align: justify; /* Mantiene la justificación */
}

.image-content img {
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Call to Action */
.cta-section {
    text-align: center;
    padding: 3rem 2rem;
}

/* Media Queries */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content p {
        font-size: 1.2rem;
    }
    .text-content h2 {
        font-size: 2.2rem;
        text-align: center;
    }
    .dynamic-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .text-content {
        padding-right: 0;
        padding-left: 0;
    }
}
/* --- Estilos para listas con formato de la página --- */
.styled-list {
  list-style: none; /* Elimina las viñetas predeterminadas */
  padding: 0;
  margin: 1.5rem 0; /* Espaciado superior e inferior */
  color: var(--color-texto-oscuro);
  text-align: justify;
}

.styled-list li {
  margin-bottom: 0.8rem; /* Espacio entre los elementos de la lista */
  line-height: 1.7; /* Interlineado para mejor legibilidad */
  position: relative;
  padding-left: 1.8rem; /* Espacio para colocar la viñeta personalizada */
}

/* Viñeta personalizada con el color de tu paleta */
.styled-list li::before {
  content: "\2022"; /* Código para un punto de viñeta */
  font-family: Arial, sans-serif; /* Puedes cambiar esto si usas una fuente de iconos */
  font-weight: bold;
  color: var(--color-guinda); /* Color de la viñeta */
  font-size: 1.2rem;
  position: absolute;
  left: 0;
}

/* Página Visión y Misión */

/* Secciones de Contenido (Misión y Visión) */
.image-content img {
    width: 80%;
    max-width: 400px; /* Reducido de 600px */
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Para la sección del Equipo, si quieres reducir las fotos de los miembros */
.team-member .member-photo {
    width: 120px; /* Reducido de 150px */
    height: 120px; /* Reducido de 150px */
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--color-amarillo);
    margin-bottom: 1.5rem;
}

/* --- Estilos para la Página de Directorio --- */

/* Sección de la Imagen Principal (Hero) */
.board-hero {
    padding: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.board-hero-content {
    position: relative;
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.board-hero-content:hover {
    transform: translateY(-8px);
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.hero-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    background-color: rgba(128, 0, 32, 0.8); /* Fondo semitransparente guinda */
    color: var(--color-texto-claro);
}

.hero-text-overlay h1 {
    font-size: 2rem;
    color: var(--color-amarillo);
    margin: 0;
}

.hero-text-overlay p {
    font-size: 1.2rem;
    margin: 0;
}

/* Sección de Miembros del Directorio */
.board-members-section {
    padding: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
    justify-items: center; /* Centra los elementos de la cuadrícula */
}

.member-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.member-photo {
    width: 100%;
    height: 300px; /* Altura fija para que todas las fotos se vean iguales */
    object-fit: cover; /* Para que la imagen cubra el contenedor sin distorsionarse */
}

.member-info {
    padding: 1.5rem;
}

.member-info h3 {
    font-size: 1.4rem;
    color: var(--color-guinda);
    margin-bottom: 0.5rem;
}

.member-info p {
    font-size: 1rem;
    color: #555;
}

/* Media Queries para diseño responsivo */
@media (max-width: 768px) {
    .hero-text-overlay h1 {
        font-size: 1.5rem;
    }
    .hero-text-overlay p {
        font-size: 1rem;
    }
    .member-photo {
        height: 250px;
    }
}
/* Sección de Miembros del Directorio */
.board-members-section {
    padding: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

/* Sección de Miembros del Directorio */
.board-members-section {
    padding: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.members-grid {
    display: grid;
    grid-template-columns: 1fr; /* Muestra los elementos en una sola columna */
    gap: 2.5rem;
    margin-top: 3rem;
    justify-items: center; /* Centra los elementos de la cuadrícula */
}

.member-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center; /* Centra el contenido de la tarjeta */
    width: 300px; /* Ancho fijo para la tarjeta */
}

.member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.member-photo {
    width: 200px; /* Tamaño del círculo */
    height: 200px;
    border-radius: 50%; /* Propiedad clave para hacerla circular */
    object-fit: cover; /* Centra y recorta la imagen para llenar el círculo */
    object-position: center; /* Asegura un centrado perfecto de la imagen dentro del círculo */
    border: 4px solid var(--color-amarillo); /* Borde de color de la paleta */
    margin-top: 2rem; /* Espacio superior */
    margin-bottom: 1rem; /* Espacio inferior */
}

.member-info {
    padding: 1.5rem;
}

.member-info h3 {
    font-size: 1.4rem;
    color: var(--color-guinda);
    margin-bottom: 0.5rem;
}

.member-info p {
    font-size: 1rem;
    color: #555;
}

/* --- Estilos para la Sección de Funcionarios --- */

.officials-section {
  padding: 5rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.officials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  justify-items: center;
}

.official-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.official-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.official-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* Hace la imagen circular */
  object-fit: cover;
  object-position: center;
  border: 4px solid var(--color-amarillo);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.official-info {
  padding: 1.5rem;
}

.official-info h3 {
  font-size: 1.4rem;
  color: var(--color-guinda);
  margin-bottom: 0.5rem;
}

.official-info p {
  font-size: 1rem;
  color: #555;
}

/* Media Queries para Responsive Design */
@media (max-width: 768px) {
  .officials-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .official-photo {
    width: 120px;
    height: 120px;
  }
  .official-info h3 {
    font-size: 1.2rem;
  }
  .official-info p {
    font-size: 0.9rem;
  }
}
/* --- Estilos para la Sección de Funcionarios --- */

.officials-section {
  padding: 5rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.officials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  justify-items: center;
}

.official-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%; /* La tarjeta ocupa el 100% del ancho de su columna en la cuadrícula */
}

.official-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.official-info {
  padding: 2rem 1.5rem;
}

.official-info h3 {
  font-size: 1.4rem;
  color: var(--color-guinda);
  margin-bottom: 0.5rem;
}

.official-info p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.official-email {
  color: var(--color-amarillo);
  font-weight: bold;
}
/* Sección de Miembros del Directorio */
.board-members-section {
    padding: 4rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Muestra los elementos en columnas, de forma horizontal */
    gap: 2.5rem;
    margin-top: 3rem;
    justify-items: center;
}

/* El resto de tus estilos para .member-card, .member-info, etc., se mantienen sin cambios */
/* --- Estilos de Estadísticas de Población --- */
.stats-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.stats-container {
    max-width: 800px;
    margin: 0 auto;
}

.stats-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.stats-subtitle {
    font-size: 1.2rem;
    color: #777;
    margin-bottom: 40px;
}

.progress-item {
    margin-bottom: 25px;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.label-text {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
}

.label-percent {
    font-weight: bold;
    font-size: 1.2rem;
    color: #000;
}

.progress-bar-bg {
    width: 100%;
    height: 12px;
    background-color: #f0f0f0;
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    width: 0; /* Empieza en 0 para la animación */
    background: linear-gradient(90deg, var(--color-guinda) 70%, var(--color-amarillo) 100%);
    border-radius: 6px;
    transition: width 1.5s ease-out; /* Velocidad de la animación */
}
/* --- Estilos de Estadísticas Ajustados --- */
.stats-section {
    /* Reducimos el padding de 60px a 12px (un 80% menos de espacio vertical) */
    padding: 12px 20px; 
    
    /* Reducimos la intensidad del blanco usando transparencia (80% transparente) */
    /* Esto permite que se vea el fondo que haya detrás de esta sección */
    background-color: rgba(255, 255, 255, 0.2); 
    
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    /* Opcional: añadimos un margen pequeño para separar de otras secciones */
    margin: 10px 0;
}

.stats-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Ajustamos también los márgenes de los títulos para que todo sea más compacto */
.stats-title {
    font-size: 1.8rem; /* Un poco más pequeño para armonizar */
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.stats-subtitle {
    font-size: 1rem;
    color: #777;
    margin-bottom: 20px; /* Reducido de 40px */
}

.progress-item {
    margin-bottom: 15px; /* Reducido de 25px para ahorrar espacio */
}
:root {
    --guinda: #800020;
    --oro: #FFD700;
    --texto-oscuro: #2c3e50;
}

/* Navegación */
.custom-nav {
    background-color: var(--guinda);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.custom-nav .nav-link {
    color: white !important;
    font-weight: 500;
    transition: 0.3s;
}

.custom-nav .nav-link:hover {
    color: var(--oro) !important;
}

/* Hero Section */
.hero-funeraria {
    height: 70vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=2070') no-repeat center center/cover;
}

/* Tarjetas de Servicio */
.service-card {
    border: none;
    transition: all 0.4s ease;
    border-bottom: 4px solid transparent;
}

.service-card:hover {
    transform: translateY(-10px);
    border-bottom: 4px solid var(--oro);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.icon-maroon {
    color: var(--guinda);
}

/* Botones */
.btn-gold {
    background-color: var(--oro);
    color: var(--guinda);
    font-weight: bold;
    border: none;
    padding: 12px 30px;
}

.btn-gold:hover {
    background-color: #e6c300;
    color: black;
}

.btn-contacto {
    background-color: var(--oro);
    color: var(--guinda) !important;
    border-radius: 20px;
    padding: 8px 20px !important;
    margin-left: 15px;
}

/* Galería */
.gallery-item img {
    cursor: pointer;
    transition: 0.3s;
}

.gallery-item img:hover {
    filter: brightness(70%);
    transform: scale(1.02);
}
/* --- Estilos de la Sección de Planes --- */

.plan-card {
    background: #fff;
    border-radius: 15px;
    padding: 40px 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(128, 0, 32, 0.15);
    border-color: var(--oro);
}

/* Plan Destacado (Intermedio) */
.plan-card.featured {
    background-color: var(--guinda);
    color: white;
    transform: scale(1.05);
    z-index: 1;
    border: none;
}

.plan-card.featured .plan-header h3 { color: var(--oro); }
.plan-card.featured .plan-category { color: #f8f9fa; }
.plan-card.featured .plan-features li { color: #eee; }

.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--oro);
    color: var(--guinda);
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Tipografía de Precios */
.plan-header h3 {
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--guinda);
}

.plan-price {
    margin: 30px 0;
    font-family: 'Arial', sans-serif;
}

.plan-price .currency { font-size: 1.5rem; vertical-align: top; font-weight: 600; }
.plan-price .amount { font-size: 3.5rem; font-weight: 800; line-height: 1; }
.plan-price .base { display: block; font-size: 0.8rem; opacity: 0.7; }

/* Lista de Beneficios */
.plan-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
    flex-grow: 1;
}

.plan-features li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 0.95rem;
}

.plan-card.featured .plan-features li { border-bottom: 1px solid rgba(255,255,255,0.1); }

.plan-features li i {
    margin-right: 10px;
    color: #28a745; /* Verde para checks */
}

.plan-features li.disabled {
    opacity: 0.4;
    text-decoration: line-through;
}

.plan-features li.disabled i { color: #dc3545; }

/* Botones Personalizados */
.btn-outline-maroon {
    border: 2px solid var(--guinda);
    color: var(--guinda);
    font-weight: bold;
    border-radius: 25px;
    width: 100%;
    transition: 0.3s;
}

.btn-outline-maroon:hover {
    background: var(--guinda);
    color: white;
}
/* --- Estilos PDF y Pagos --- */

/* Contenedor de descarga */
.download-container {
    background-color: #fdfdfd;
    border: 1px dashed var(--guinda);
}

.btn-pdf {
    background-color: #dc3545; /* Rojo PDF estándar */
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-pdf:hover {
    background-color: var(--guinda);
    color: var(--oro);
    transform: scale(1.05);
}

/* Métodos de Pago */
.text-maroon {
    color: var(--guinda);
    font-weight: 700;
}

.payment-methods {
    opacity: 0.8;
}

.method-item {
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
}

.method-item i {
    transition: color 0.3s;
}

.method-item:hover i {
    color: var(--guinda);
}

.digital-pay .badge {
    padding: 10px 15px;
    font-size: 1rem;
    border-radius: 8px;
}

.bg-purple { background-color: #6f42c1; } /* Color característico de Yape */
/* 1. Aplicar fondo a TODA la página */
body {
    background-color: hsl(14, 52%, 64%) !important; /* Gris muy claro y elegante */
    margin: 0;
    padding: 0;
}

/* 2. Hacer que las secciones sean transparentes para que se vea el fondo del body */
section {
    background-color: transparent !important;
}

/* 3. Mantener las tarjetas en blanco para que "salten" a la vista */
.service-card, .plan-card, .download-container {
    background-color: #c77575 !important;
    border: 1px solid rgba(0,0,0,0.05); /* Un borde casi invisible para dar definición */
}

/* 4. Ajuste para el Plan Destacado (este sí debe mantener su color guinda) */
.plan-card.featured {
    background-color: var(--guinda) !important;
    color: white !important;
}
/* --- Estilos de la Tabla de Contacto --- */

.contact-table-card {
    border: none;
    border-radius: 15px;
    overflow: hidden; /* Para que los bordes de la tabla sigan el radio de la tarjeta */
    background-color: white;
}

.table-maroon {
    background-color: var(--guinda);
    color: var(--oro);
}

.table-maroon th {
    padding: 15px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border: none;
}

.table tbody tr {
    transition: background-color 0.3s;
}

.contact-link {
    color: var(--guinda);
    text-decoration: none;
    font-weight: 600;
}

.contact-link:hover {
    color: #a00028;
    text-decoration: underline;
}

/* Botón de WhatsApp específico para la tabla */
.btn-whatsapp {
    background-color: #25d366;
    color: white;
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: 0.3s;
}

.btn-whatsapp:hover {
    background-color: #128c7e;
    color: white;
    transform: scale(1.05);
}

.table td {
    padding: 15px;
    color: #444;
}
:root {
    --guinda: #800020;
    --oro: #FFD700;
    --fondo-gris: #f1718d;
}

body {
    background-color: var(--fondo-gris) !important;
}

/* Hero para Alquileres */
.hero-rentals {
    height: 40vh;
    background: linear-gradient(rgba(128, 0, 32, 0.8), rgba(128, 0, 32, 0.8)), 
                url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1000');
    background-size: cover;
    background-position: center;
}

/* Tarjetas de Inmuebles */
.property-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.property-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(128,0,32,0.1);
}

.property-card img {
    height: 200px;
    object-fit: cover;
}

.property-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--oro);
    color: var(--guinda);
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.75rem;
    z-index: 2;
}

.price-tag {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--guinda);
}

.text-maroon { color: var(--guinda); }

.bg-maroon-light {
    background-color: rgba(128, 0, 32, 0.05);
}
/* --- Mejoras de Inmuebles --- */

.specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    font-size: 0.85rem;
    color: #555;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.property-type {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75rem;
    color: white;
    z-index: 10;
}

.property-type.office { background-color: #004a99; } /* Azul Profesional */
.property-type.apartment { background-color: #28a745; } /* Verde Hogar */

.price-box {
    margin-top: 15px;
}

.price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--guinda);
}

.price::after {
    content: " /mes";
    font-size: 0.8rem;
    color: #888;
}

/* Botón personalizado Guinda */
.btn-maroon {
    background-color: var(--guinda);
    color: white;
    border: none;
}

.btn-maroon:hover, .btn-maroon.active {
    background-color: #600018;
    color: var(--oro);
}

.btn-outline-maroon {
    border: 1px solid var(--guinda);
    color: var(--guinda);
}
/* Cuadrícula de características */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    font-size: 0.8rem;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
}

/* Etiquetas flotantes */
.property-type {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    z-index: 5;
}

.property-type.office { background-color: #0056b3; } /* Azul para oficinas */
.property-type.apartment { background-color: #28a745; } /* Verde para departamentos */

/* Precio destacado */
.price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--guinda);
}
.price::after {
    content: " /mes";
    font-size: 0.75rem;
    font-weight: normal;
    color: #666;
}
/* 1. Aplicar fondo a TODA la página */
body {
    background-color: #e0b1c1 !important; /* Gris muy claro y elegante */
    margin: 0;
    padding: 0;
}

/* 2. Hacer que las secciones sean transparentes para que se vea el fondo del body */
section {
    background-color: transparent !important;
}

/* 3. Mantener las tarjetas en blanco para que "salten" a la vista */
.service-card, .plan-card, .download-container {
    background-color: #dfdadb !important;
    border: 1px solid rgba(0,0,0,0.05); /* Un borde casi invisible para dar definición */
}

/* 4. Ajuste para el Plan Destacado (este sí debe mantener su color guinda) */
.plan-card.featured {
    background-color: var(--guinda) !important;
    color: white !important;
}

/* Hero para Cochera */
.hero-cochera {
    height: 40vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('https://images.unsplash.com/photo-1545179605-1296651e9d43?auto=format&fit=crop&w=1200');
    background-size: cover;
    background-position: center;
}

/* Tarjetas de Tarifas */
.parking-card {
    border: none;
    border-radius: 15px;
    background-color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.parking-card:hover {
    transform: translateY(-10px);
}

.featured-parking {
    background-color: var(--guinda) !important;
    position: relative;
    transform: scale(1.05);
}

.popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--oro);
    color: var(--guinda);
    padding: 4px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8rem;
}

.price-tag {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--guinda);
    margin: 15px 0;
}

.featured-parking .price-tag { color: var(--oro); }

.text-maroon { color: var(--guinda); }
.text-oro { color: var(--oro); }

/* Galería */
.gallery-img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.gallery-img:hover {
    filter: brightness(80%);
}

.bg-maroon-light {
    background-color: rgba(128, 0, 32, 0.03);
}

/* --- Margen y Contenedor --- */
.container {
    max-width: 1050px !important; /* Más margen a los lados */
}

/* --- Estilo de Títulos Blancos --- */
.header-badge {
    background-color: var(--guinda);
    display: inline-block;
    padding: 12px 35px;
    border-radius: 50px 0 50px 0; /* Diseño vistoso */
    box-shadow: 4px 4px 0px var(--oro);
    margin-bottom: 20px;
}

.header-badge h2, .header-badge h1 {
    color: white !important;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

/* --- Títulos Blancos en Bloques Guinda --- */
.header-badge {
    background-color: var(--guinda);
    padding: 15px 40px;
    border-radius: 8px;
    border-left: 8px solid var(--oro); /* Detalle elegante en oro */
    display: inline-block;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.header-badge h2 {
    color: var(--blanco-puro) !important;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Estilo Único para Tarjetas de Cochera --- */
.card-modalidad {
    background-color: var(--beis-tarjeta) !important; /* Solo el fondo de la tarjeta */
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.card-modalidad:hover {
    transform: translateY(-10px);
}

/* --- Títulos Blancos en Bloques Guinda --- */
.header-box-guinda {
    background-color: var(--guinda);
    padding: 12px 30px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 35px;
}

.header-box-guinda h2 {
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0;
}

/* Texto dentro de la tarjeta beis */
.card-modalidad h4 {
    color: var(--guinda);
    font-weight: 700;
}

.price-text {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--guinda);
}
/* --- Galería Novedosa --- */

.gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 250px; /* Altura estándar para las pequeñas */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.5s ease;
}

/* La foto grande ocupa más espacio */
.gallery-item.featured {
    height: 515px; 
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

/* Efecto de superposición (Overlay) */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(128, 0, 32, 0.9)); /* Gradiente Guinda */
    color: white;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
}

.gallery-overlay span {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
}

/* Animaciones al pasar el mouse */
.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover {
    box-shadow: 0 15px 35px rgba(128, 0, 32, 0.3);
    cursor: pointer;
}

:root {
    --guinda: #800020;
    --oro: #ff5100bd;
    --fondo-platino: #e46565;
    --beis-tarjeta: #66050a;
}

body {
    background-color: var(--fondo-platino) !important;
    font-family: 'Segoe UI', sans-serif;
}

/* --- Márgenes Amplios --- */
.container {
    max-width: 1100px !important;
}

/* --- Hero Section --- */
.hero-san-juan {
    height: 50vh;
    background: linear-gradient(rgba(128, 0, 32, 0.7), rgba(0, 0, 0, 0.6)), 
                url('https://images.unsplash.com/photo-1516706562776-08fd19b910e6?auto=format&fit=crop&w=1200');
    background-size: cover;
    background-position: center;
}

.header-box-main {
    background: rgba(128, 0, 32, 0.85);
    padding: 40px;
    border-radius: 20px;
    display: inline-block;
    border-bottom: 5px solid var(--oro);
}

.text-oro { color: var(--oro); }

/* --- Títulos Blancos en Bloques Guinda --- */
.header-box-guinda {
    background-color: var(--guinda);
    padding: 15px 40px;
    border-radius: 8px;
    display: inline-block;
}

.header-box-guinda h2 {
    color: rgb(20, 20, 20) !important;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- Tarjetas Beis --- */
.card-servicio-beis {
    background-color: var(--beis-tarjeta) !important;
    border: none;
    border-radius: 20px;
    transition: 0.3s;
}

.card-servicio-beis:hover {
    transform: translateY(-10px);
}

.border-oro-top {
    border-top: 5px solid var(--oro) !important;
}

.text-maroon { color: var(--guinda); }

/* --- Galería --- */
.gallery-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.gallery-wrapper img {
    width: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(128, 0, 32, 0.85);
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.gallery-wrapper:hover img {
    transform: scale(1.1);
}

/* --- Navbar Custom --- */
.custom-nav {
    background-color: var(--guinda);
}

.btn-contacto-oro {
    background-color: var(--oro);
    color: var(--guinda) !important;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: bold;
}

/*--- Cabecera de Asilo ---*/
/* --- Ajuste de Título en el Header --- */

.titulo-grande-plomo {
    color: #E0E0E0 !important; /* Plomo Claro / Light Gray */
    font-size: 4.1rem !important; /* Tamaño Grande Extra */
    font-weight: 150;
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 5px;
}

.subtitulo-grande-plomo {
    color: #D3D3D3 !important; /* Plomo Claro ligeramente más intenso */
    font-size: 4.3rem !important; /* Tamaño Grande */
    font-weight: 400;
    font-style: italic;
    margin-top: 0;
}

/* Ajuste del contenedor para soportar texto más grande */
.header-box-main {
    background: rgba(128, 0, 32, 0.9); /* Fondo Guinda más sólido para lectura */
    padding: 60px 80px;
    border-radius: 20px;
    display: inline-block;
    border-bottom: 8px solid var(--oro);
    max-width: 90%; /* Asegura que no se desborde en móviles */
}

/* Media Query para que no se rompa en celulares */
@media (max-width: 768px) {
    .titulo-grande-plomo { font-size: 3rem !important; }
    .subtitulo-grande-plomo { font-size: 2rem !important; }
}

/* --- Estilos para la Sección del Asilo San Juan de Dios --- */

/* Variables de color basadas en la imagen */
:root {
    --asilo-guinda-bg: rgba(60, 15, 20, 0.92); /* Color guinda oscuro con transparencia */
    --asilo-oro-icon: #cda45e; /* Color dorado para iconos y separador */
    --asilo-texto-blanco: #ffffff;
}

.asilo-servicios-section {
    position: relative;
    /* IMPORTANTE: Reemplaza 'ruta/a/tu/imagen-ancianos.jpg' por tu imagen real */
    background: linear-gradient(var(--asilo-guinda-bg), var(--asilo-guinda-bg)), url('https://placedog.net/1200/800?grayscale'); /* Imagen de ejemplo */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto parallax opcional */
    color: var(--asilo-texto-blanco);
    padding: 80px 0; /* Espaciado superior e inferior */
    min-height: 600px; /* Altura mínima para asegurar buen impacto */
}

/* Título principal */
.asilo-title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-size: 2.5rem;
}

/* Separador dorado */
.gold-divider {
    height: 4px;
    width: 80px;
    background-color: var(--asilo-oro-icon);
    margin-bottom: 25px;
    border-radius: 2px;
}

/* Subtítulo */
.asilo-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 50px;
    opacity: 0.9;
}

/* Íconos de servicio */
.service-icon {
    color: var(--asilo-oro-icon);
    font-size: 3.5rem; /* Tamaño grande como en la imagen */
    margin-bottom: 15px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Texto de los ítems de servicio */
.service-item p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    max-width: 180px;
    margin: 0 auto; /* Centrar el texto si es de varias líneas */
}

/* Pequeño efecto hover para dar dinamismo (opcional) */
.service-item:hover .service-icon {
    transform: translateY(-5px);
}

/* Ajustes responsivos para móviles */
@media (max-width: 768px) {
    .asilo-title {
        font-size: 1.8rem;
    }
    .service-icon {
        font-size: 2.8rem;
    }
    .asilo-servicios-section {
        padding: 50px 0;
    }
}
/* --- Estilos para la Sección del Asilo San Juan de Dios --- */

/* Variables de color */
:root {
    /* Guinda oscuro con transparencia (90%) para oscurecer la foto de fondo */
    --asilo-guinda-bg: rgba(60, 15, 20, 0.9); 
    --asilo-oro-icon: #cda45e; /* Color dorado */
    --asilo-texto-blanco: #ffffff;
}

.asilo-servicios-section {
    position: relative;
    /* AQUÍ ESTÁ LA CLAVE DEL FONDO: */
    /* 1. Capa de color guinda semitransparente */
    /* 2. Imagen de fondo (Foto de ancianos) */
    background: linear-gradient(var(--asilo-guinda-bg), var(--asilo-guinda-bg)), 
                url('https://images.unsplash.com/photo-1573348722427-f1d6819fdf98?auto=format&fit=crop&w=1200&q=80'); 
    
    /* Asegura que la imagen cubra toda la sección sin deformarse */
    background-size: cover;
    /* Centra la imagen */
    background-position: center;
    /* Mantiene la imagen fija al hacer scroll (efecto elegante) */
    background-attachment: fixed; 
    
    color: var(--asilo-texto-blanco);
    padding: 100px 0; /* Más espacio arriba y abajo */
}

/* Título principal */
.asilo-title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    font-size: 3rem; /* Tamaño aumentado para impacto */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra para mejor lectura */
}

/* Separador dorado */
.gold-divider {
    height: 4px;
    width: 100px;
    background-color: var(--asilo-oro-icon);
    margin-bottom: 30px;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Subtítulo */
.asilo-subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 60px;
    opacity: 0.95;
}

/* Íconos de servicio */
.service-icon {
    color: var(--asilo-oro-icon);
    font-size: 4rem; /* Iconos más grandes */
    margin-bottom: 20px;
    display: inline-block;
    transition: all 0.3s ease;
    /* Sombra sutil al icono para que resalte */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* Texto de los ítems de servicio */
.service-item p {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    max-width: 200px;
    margin: 0 auto;
}

/* Efecto hover: el icono sube y brilla un poco */
.service-item:hover .service-icon {
    transform: translateY(-10px);
    color: #e0c080; /* Dorado más claro al pasar el mouse */
}

/* Ajustes para celulares */
@media (max-width: 768px) {
    .asilo-servicios-section { padding: 60px 0; }
    .asilo-title { font-size: 2rem; }
    .asilo-subtitle { font-size: 1.2rem; margin-bottom: 40px; }
    .service-icon { font-size: 3rem; margin-bottom: 15px; }
    .service-item p { font-size: 0.95rem; }
    /* Desactiva el fondo fijo en móviles para mejor rendimiento */
    .asilo-servicios-section { background-attachment: scroll; }
}

/*--- galeria asilo ---*/
/* --- Estilos de la Galería Vistosa --- */

:root {
    /* Colores institucionales (mismos del diseño anterior) */
    --asilo-guinda-dark: #3c0f14; 
    --asilo-guinda-overlay: rgba(60, 15, 20, 0.85); /* Guinda translúcido */
    --asilo-oro: #cda45e;
}

.asilo-gallery-section {
    background-color: #f8f9fa; /* Fondo gris muy claro para que resalten las fotos */
}

/* Título y separador */
.text-guinda { color: var(--asilo-guinda-dark); }

.gold-divider-small {
    height: 3px;
    width: 60px;
    background-color: var(--asilo-oro);
    border-radius: 2px;
}

/* --- Tarjeta de Galería (El contenedor principal) --- */
.gallery-card {
    position: relative;
    border-radius: 15px; /* Bordes redondeados elegantes */
    overflow: hidden; /* Esencial para que la imagen no se salga al hacer zoom */
    cursor: pointer;
    height: 280px; /* Altura fija para uniformidad */
}

/* --- Wrapper de la Imagen y Efecto Zoom --- */
.gallery-img-wrapper {
    height: 100%;
    width: 100%;
}

.gallery-card img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* Asegura que la foto llene el espacio sin deformarse */
    transition: transform 0.5s ease; /* Suavidad del zoom */
}

/* Al pasar el mouse sobre la tarjeta, la imagen hace zoom */
.gallery-card:hover img {
    transform: scale(1.1);
}

/* --- Capa Superpuesta (Overlay) --- */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fondo guinda translúcido */
    background-color: var(--asilo-guinda-overlay);
    /* Centrar el contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Estado inicial: invisible y ligeramente desplazado hacia abajo */
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

/* Contenido dentro del overlay (icono y texto) */
.overlay-content {
    transform: translateY(20px); /* Empieza un poco más abajo */
    transition: all 0.4s 0.1s ease-in-out; /* 0.1s de retraso para efecto cascada */
}

/* Icono dorado */
.overlay-icon {
    font-size: 2.5rem;
    color: var(--asilo-oro);
}

/* --- Efectos Hover (Cuando el mouse entra) --- */

/* 1. Aparece el fondo guinda */
.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

/* 2. El contenido sube a su posición original y aparece */
.gallery-card:hover .overlay-content {
    transform: translateY(0);
}

:root {
    --guinda: #800020;
    --oro: #FFD700;
    --plomo-claro: #7e0606;
    --fondo-platino: #8f0d0d;
}

/* --- Layout de Imagen Superpuesta --- */
.image-stack {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    align-items: center;
}

.image-stack__item--top {
    grid-column: 1 / span 10;
    grid-row: 1;
    z-index: 1;
}

.image-stack__item--bottom {
    grid-column: 4 / -1;
    grid-row: 1;
    height: 100%;
    border: 8px solid var(--oro);
    border-radius: 20px;
    margin-top: 40px; /* Desfase visual */
}

/* --- Estilo de Texto --- */
.badge-institucional {
    background-color: var(--guinda);
    color: white;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

.titulo-seccion-plomo {
    color: #4A4A4A; /* Un plomo oscuro para contraste */
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
}

.text-guinda-claro {
    color: var(--guinda);
}

.valor-item {
    background: white;
    padding: 15px;
    border-radius: 12px;
    border-left: 4px solid var(--oro);
    transition: 0.3s;
}

.valor-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.text-gold {
    color: var(--oro);
    font-size: 1.2rem;
}
p {
    text-align: justify;
    text-justify: inter-word; /* Mejora el espaciado entre palabras */
}

/* --- Botón --- */
.btn-guinda-grande {
    background-color: var(--guinda);
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.btn-guinda-grande:hover {
    background-color: #5d0017;
    color: var(--oro);
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 768px) {
    .titulo-seccion-plomo { font-size: 2.2rem; }
    .image-stack__item--bottom { display: none; } /* Simplificar en móvil */
}

/* --- comedor --- */
:root {
    --guinda: #800020;
    --oro: #FFD700;
    --fondo-platino: #bb5a5a;
    --beis-suave: #f5f5dc;
    --plomo-claro: #E0E0E0;
}

body {
    background-color: var(--fondo-platino) !important;
    font-family: 'Montserrat', sans-serif;
}

/* --- Justificado Global para párrafos --- */
.text-justified {
    text-align: justify;
    text-justify: inter-word;
}

/* --- Hero Section --- */
.hero-comedor {
    height: 70vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('https://images.unsplash.com/photo-1547573854-74d2a71d0826?auto=format&fit=crop&w=1200');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.header-glass {
    background: rgba(128, 0, 32, 0.85);
    border-radius: 30px;
    border: 2px solid var(--oro);
    display: inline-block;
}

.titulo-grande-plomo {
    color: var(--plomo-claro) !important;
    font-size: 4.5rem;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
}

.subtitulo-oro {
    color: var(--oro);
    font-size: 1.8rem;
    font-style: italic;
}

.divider-oro {
    width: 100px;
    height: 4px;
    background-color: var(--oro);
    border-radius: 5px;
}

/* --- Layout Stacked (Imágenes superpuestas) --- */
.stack-layout {
    position: relative;
    padding-bottom: 30px;
}

.img-main {
    position: relative;
    z-index: 2;
    width: 90%;
}

.box-decor {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80%;
    height: 80%;
    background-color: var(--oro);
    z-index: 1;
    border-radius: 20px;
    transform: translate(20px, 20px);
}

/* --- Estilos de Tarjetas Beis --- */
.card-beis-comedor {
    background-color: var(--beis-suave) !important;
    border: none;
    border-radius: 25px;
    transition: 0.4s;
}

.card-beis-comedor:hover {
    transform: translateY(-15px);
    background-color: #fff !important;
}

.border-oro-top { border-top: 6px solid var(--oro) !important; }

.header-badge-guinda {
    background-color: var(--guinda);
    color: white;
    padding: 15px 40px;
    border-radius: 5px;
    display: inline-block;
}

.text-guinda { color: var(--guinda); }
.bg-guinda { background-color: var(--guinda); }
.text-oro { color: var(--oro); }

.badge-guinda {
    background-color: var(--guinda);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
}

.btn-oro {
    background-color: var(--oro);
    color: var(--guinda) !important;
    font-weight: bold;
    border-radius: 50px;
    padding: 8px 25px;
    transition: 0.3s;
}

.btn-oro:hover {
    background-color: white;
    transform: scale(1.05);
}
body {
    background-color: #CC7F70 !important;
    color: #000000 !important; /* Fuerza el color negro en toda la página */
}

/* Asegúrate de que los párrafos también hereden el negro */
p, span, h1, h2, h3, h4, h5, h6 {
    color: #111111 !important;
}
h3{
    text-align: center;
}

/* ---- galeria comedor --- */
:root {
    --fondo-terraco: #CC7F70;
    --guinda: #800020;
    --oro: #FFD700;
}

/* Aplicar el fondo Terracota a la sección */
.galeria-novedosa {
    background-color: var(--fondo-terraco);
}

/* Título con estilo de placa guinda */
.badge-guinda-title {
    background-color: var(--guinda);
    padding: 15px 40px;
    border-radius: 5px;
    display: inline-block;
    border-bottom: 4px solid var(--oro);
}

/* El Item de la Galería */
.galeria-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Bordes muy redondeados */
    border: 5px solid rgba(255, 255, 255, 0.3); /* Borde blanco translúcido */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    cursor: pointer;
    height: 300px;
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Overlay de Vidrio (Glassmorphism) */
.galeria-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 0, 32, 0.7); /* Fondo guinda transparente */
    backdrop-filter: blur(5px); /* Desenfoque de vidrio */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Oculto por defecto */
    transition: all 0.4s ease;
    padding: 20px;
}

/* Texto negro por defecto en la página (pero blanco dentro de la tarjeta para legibilidad) */
.galeria-info h5, .galeria-info p {
    color: white !important;
    text-align: center;
}

.text-gold {
    color: var(--oro);
    font-size: 2rem;
}

/* --- Efectos Hover --- */

/* La imagen hace zoom */
.galeria-item:hover img {
    transform: scale(1.2) rotate(2deg);
}

/* Aparece la info de vidrio */
.galeria-item:hover .galeria-info {
    opacity: 1;
}

/* Brillo en el borde al pasar el mouse */
.galeria-item:hover {
    border-color: var(--oro);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* casa de refugio */
/* PALETA DE COLORES */
:root {
    --fondo-terraco: #CC7F70;
    --guinda: #800020;
    --guinda-dark: #5a0016;
    --oro: #FFD700;
    --plomo: #E0E0E0;
}

body {
    background-color: var(--fondo-terraco);
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}

/* NAVBAR */
.navbar {
    background-color: var(--guinda) !important;
}
.btn-emergencia {
    background-color: var(--oro);
    color: var(--guinda) !important;
    font-weight: bold;
    border-radius: 50px;
    padding: 5px 20px;
}

/* TEXTO JUSTIFICADO */
.text-justified {
    text-align: justify;
    text-justify: inter-word;
}

/* HERO */
.hero-classic {
    height: 70vh;
    background: linear-gradient(rgba(128, 0, 32, 0.7), rgba(0, 0, 0, 0.6)), 
                url('https://images.unsplash.com/photo-1509099836639-18ba1795216d?auto=format&fit=crop&w=1200');
    background-size: cover;
    background-position: center;
}
.header-content h1 { font-family: 'Playfair Display', serif; }

/* ELEMENTOS VISUALES */
.divider-oro {
    width: 100px;
    height: 4px;
    background-color: var(--oro);
}
.border-oro-thick {
    border: 10px solid var(--oro);
}

/* TARJETAS */
.bg-dark-guinda { background-color: var(--guinda-dark); }
.text-plomo { color: var(--plomo); }

.card-classic {
    background-color: #f8f9fa; /* Gris muy claro/beis para contraste */
    border: none;
    border-radius: 15px;
    transition: transform 0.3s ease;
}
.card-classic:hover {
    transform: translateY(-10px);
}
.border-top-gold { border-top: 6px solid var(--oro) !important; }

/* GALERÍA 3x3 */
.gallery-frame {
    overflow: hidden;
    border-radius: 10px;
    height: 250px;
    border: 3px solid var(--oro);
}
.gallery-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.gallery-frame:hover img {
    transform: scale(1.1);
}

.btn-guinda-classic {
    background-color: var(--guinda);
    color: white;
    border: 1px solid var(--oro);
    padding: 10px 30px;
    transition: 0.3s;
}
.btn-guinda-classic:hover {
    background-color: white;
    color: var(--guinda);
}
/*--- color blanco --- */
/* Color blanco específico para el header de la Casa de Refugio */
.hero-classic h1, 
.hero-classic h5, 
.hero-classic p {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Sombra para mayor legibilidad */
}

/* Mantener el divisor en oro para que no pierda elegancia */
.hero-classic .divider-oro {
    background-color: var(--oro) !important;
}

/* ---- color del header y footer --- */
/* Color del texto para el Header */
header, 
header h1, 
header h2, 
header h3,
header h5, 
header p, 
header span,
header a href,
header i,
header .nav-link {
    color: #FFFFFF !important;
}
body,
body span {
    color: #ffffff !important;
}

/* Color del texto para el Footer */
footer, 
footer h3,
footer p, 
footer span, 
footer a {
    color: #FFFFFF !important;
}
footer p {
    text-align: center;
}
/* Opcional: Asegurar que los enlaces del menú cambien de color al pasar el mouse */
header .nav-link:hover {
    color: var(--oro) !important; /* Resalta en dorado al pasar el mouse */
}



:root {
    --terracota: #CC7F70;
    --guinda: #800020;
    --oro: #FFD700;
}

.galeria-pro {
    background-color: var(--terracota);
}

.galeria-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: crosshair; /* Cursor novedoso */
    background: #000;
}

/* Tamaños proporcionales */
.large-card { height: 515px; }
.mid-card { height: 250px; }

.galeria-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    opacity: 0.9;
}

/* Overlay con Glassmorphism */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 0, 32, 0.4); /* Guinda transparente */
    backdrop-filter: blur(0px); /* Sin desenfoque al inicio */
    display: flex;
    align-items: flex-end;
    padding: 25px;
    opacity: 0;
    transition: all 0.5s ease;
}

.overlay-text {
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

.overlay-text h3, .overlay-text h4 {
    color: white;
    font-weight: 800;
    margin: 0;
}

.overlay-text p {
    color: var(--oro);
    font-size: 0.9rem;
    margin-top: 5px;
}

/* --- ESTADOS DINÁMICOS (HOVER) --- */

.galeria-card:hover img {
    transform: scale(1.1) rotate(1deg); /* Zoom y rotación sutil */
    opacity: 0.7;
}

.galeria-card:hover .card-overlay {
    opacity: 1;
    backdrop-filter: blur(8px); /* Efecto cristal al hover */
}

.galeria-card:hover .overlay-text {
    transform: translateY(0);
}

/* Efecto de borde brillante */
.galeria-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,215,0,0.2), transparent);
    transform: skewX(-25deg);
    transition: 0.7s;
}

.galeria-card:hover::after {
    left: 125%;
}
/* --- convocatoria ---*/
:root {
    --guinda: #800020;
    --blanco: #ffffff;
    --verde-doc: #138d41;
    --naranja-doc: #ffc107;
    --gris-borde: #dee2e6;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
}

/* Encabezado */
.header-row {
    background-color: var(--blanco);
    border-top: 3px solid var(--guinda);
}

.header-row th {
    color: #333;
    font-weight: 800;
    padding: 15px 5px;
    border-bottom: 2px solid var(--gris-borde);
    text-transform: uppercase;
}

/* Fila de Nota */
.nota-row {
    background-color: #f8f9fa;
}

.text-guinda {
    color: var(--guinda);
}

/* Estilos de tabla */
.table-bordered > :not(caption) > * > * {
    border-width: 1px;
    border-color: var(--gris-borde);
}

tbody tr:hover {
    background-color: #fdfdfd;
}

/* Botones de Documentos (Réplica de la imagen) */
.btn-doc {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: bold;
    color: white !important;
    border-radius: 4px;
    text-decoration: none;
    min-width: 90px;
    line-height: 1.2;
    text-align: center;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-doc i {
    font-size: 18px;
    margin-right: 5px;
}

.btn-verde {
    background-color: var(--verde-doc);
    background-color: #0e6b31;
}

.btn-verde:hover {
    background-color: #0e6b31;
}

.btn-naranja {
    background-color: var(--naranja-doc);
    background-color: #e0a800;
    color: #000 !important; /* Texto oscuro para mejor contraste con amarillo */
}

.btn-naranja:hover {
    background-color: #e0a800;
}

.small-caps {
    font-variant: small-caps;
}

/* --- banner logistica --*/
/* --- Estilos para la sección Hero Logística --- */

.hero-logistica {
    /* Define la altura de la sección. 50vh significa el 50% de la altura de la pantalla */
    min-height: 50vh;
    position: relative;
    /*
       EL TRUCO DE LA TRANSPARENCIA:
       Usamos un 'linear-gradient' de color negro semitransparente (rgba 0,0,0,0.5)
       encima de la imagen de fondo. El 0.5 es el 50% de opacidad.
    */
    background: linear-gradient(
        rgba(0, 0, 0, 0.5), /* Capa oscura al 50% */
        rgba(0, 0, 0, 0.5)
    ),
    /* Reemplaza esta URL por la imagen de logística que prefieras */
    url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1200');

    /* Asegura que la imagen cubra todo el espacio sin deformarse */
    background-size: cover;
    /* Centra la imagen */
    background-position: center center;
    background-repeat: no-repeat;
}

/* Opcional: Añadir una pequeña sombra al texto para mejorar aún más la lectura */
.hero-logistica h1 {
    text-shadow: 2px 2px 8px rgba(243, 236, 236, 0.7);
    color: #ffffff; /* Esto cambia el texto a blanco */
    letter-spacing: 2px; /* Espaciado entre letras para un look más elegante */
}

/* Ajuste para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .hero-logistica {
        min-height: 40vh; /* Un poco menos alto en móviles */
    }
    .hero-logistica h1 {
        font-size: 2.5rem; /* Reducir un poco el tamaño del texto en móviles */
    }
}
/* -- patrimonia --*/
/* Paleta de colores */
:root {
    --guinda: #800020;
    --texto-oscuro: #333333;
    --azul-link: #0056b3;
}

.container-patrimonial {
    max-width: 1000px;
    background-color: #ffffff;
}

.titulo-control {
    font-size: 2.5rem;
    font-weight: 400;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.banner-guinda {
    background-color: var(--guinda);
    color: white;
    border-radius: 4px;
}

.text-justify {
    text-align: justify;
}

.contenido-texto p, .contenido-texto li {
    font-size: 0.95rem;
    color: var(--texto-oscuro);
    line-height: 1.6;
}

/* Sección Archivos */
.archivos-titulo {
    font-weight: 600;
    margin-bottom: 5px;
}

.divider-guinda {
    width: 150px;
    height: 3px;
    background-color: var(--guinda);
    margin-top: 5px;
}

/* Tabla y Links */
.table thead th {
    font-size: 0.9rem;
    padding: 12px;
}

.link-documento {
    color: var(--azul-link);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.link-documento:hover {
    text-decoration: underline;
}

/* Ajustes de bordes para que coincidan con la imagen */
.table-bordered td, .table-bordered th {
    border: 1px solid #444 !important;
}

/* --- contacto ---*/
:root {
    --terracota: #CC7F70;
    --guinda: #800020;
    --oro: #FFD700;
}

body.bg-terracota {
    background-color: var(--terracota);
}

/* HERO CONTACTO */
.hero-contacto {
    min-height: 40vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('https://images.unsplash.com/photo-1523966211575-eb4a01e7dd51?w=1200');
    background-size: cover;
    background-position: center;
    border-bottom: 6px solid var(--oro);   
}

.texto-sombra {
    color: white; /* Añade esta línea */
    text-shadow: 3px 3px 10px rgba(0,0,0,0.8);

}
.hero-contacto h1 {
    color: #ffffff !important; /* El !important asegura que nada lo sobrescriba */
}
.hero-contacto p{
    color: #ffffff !important; /* El !important asegura que nada lo sobrescriba */
    text-align: center;
}

/* ESTILOS DE FORMULARIO */
.bg-guinda {
    background-color: var(--guinda) !important;
}

.text-oro {
    color: var(--oro) !important;
}

.custom-input {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    transition: 0.3s;
}

.custom-input:focus {
    border-color: var(--guinda);
    box-shadow: 0 0 0 0.25rem rgba(128, 0, 32, 0.15);
}

.btn-guinda-impact {
    background-color: var(--guinda);
    color: white;
    font-weight: bold;
    border: 2px solid var(--guinda);
    transition: 0.4s;
}

.btn-guinda-impact:hover {
    background-color: transparent;
    color: var(--guinda);
    transform: translateY(-3px);
}

.text-justify {
    text-align: justify;
}
.container p{
     color: #ffffff !important; /* El !important asegura que nada lo sobrescriba */
}
.container h6{
     color: #ffffff !important; /* El !important asegura que nada lo sobrescriba */
}