/* Asegura que el box-sizing sea consistente */
* {
  box-sizing: border-box;
}

/* Elimina TODAS las reglas html, body que estaban aquí.
   Ahora deben estar SOLO en style.css */


.single-fotografia {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.single-fotografia .volver {
  margin-bottom: 1rem;
}

.single-fotografia .volver a {
  text-decoration: none;
  color: #555;
  font-weight: 500;
}

.titulo-fotografia {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

/* Masonry wrapper (aislado del resto) */
.masonry-wrapper {
  width: 100%;
  margin-bottom: 3rem;
}

/* Masonry grid */
.galeria-fotografia {
  margin: 0 auto;
  position: relative; /* Añadir esta regla si no estaba ya */
  display: block; /* Añadir esta regla si no estaba ya */
}

/* Masonry items (ancho para UNA columna) */
.item-galeria {
  width: calc((100% - 40px) / 3); /* Ancho para 3 columnas con 20px de gutter */
  margin-bottom: 20px; /* Gutter vertical */
}

/* --- NUEVO CSS para items de DOBLE ANCHO --- */
.item-galeria.item-double-width {
  width: calc((200% - 20px) / 3); /* Ocupa 2 columnas + el gutter entre ellas */
}
/* --- FIN NUEVO CSS --- */


.item-galeria img {
  width: 100%;
  height: auto; /* Mantiene la proporción de la imagen, CRUCIAL para el efecto Pinterest */
  border-radius: 10px;
  display: block;
  transition: transform 0.3s ease;
}

.item-galeria:hover img {
  transform: scale(1.03);
}

/* Texto posterior (sin cambios) */
.editorial-descripcion {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  clear: both;
  padding-top: 2rem;
}

.cita-editorial {
  flex: 1 1 40%;
  font-style: italic;
  font-size: 1.1rem;
  border-left: 3px solid #000;
  padding-left: 1rem;
}

.descripcion-editorial {
  flex: 1 1 55%;
  font-size: 1rem;
  line-height: 1.6;
}
.single-fotografia { /* Esto es redundante con el selector de arriba, pero lo mantengo si lo necesitas */
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

/* ==============================================
   Sección 2: Carrusel (Swiper.js) - Proceso de Creación
   *** AJUSTES PARA ALTURA, PUNTOS Y FLECHAS DENTRO Y CENTRADO DE IMAGEN ***
============================================== */
.carrusel_fotografias {
  margin-bottom: 4rem;
  /* text-align: center; // Se puede mantener o quitar, el centrado lo controlará el swiper */
}
.swiper-carrusel_fotografias {
  width: 100% !important; /* Asegura que ocupe todo el ancho disponible */
  height: 600px !important; /* Establece una altura fija para el carrusel (ajusta según tus fotos) */
  position: relative !important; /* CRUCIAL para posicionar flechas y puntos DENTRO */
  overflow: hidden !important; /* Asegura que las imágenes no desborden si son más grandes que la altura */
  border-radius: 8px; /* Opcional: bordes redondeados al contenedor del carrusel */
  margin: 0 auto !important; /* Centrar el contenedor Swiper si es más pequeño que 100% width */

  /* Propiedades Swiper customizadas para tamaño de navegación (flechas) */
  --swiper-navigation-size: 30px;
}
/* Asegurarse de que el wrapper se adapte a la altura del slide activo */
.swiper-wrapper {
  height: 100% !important; /* Ocupa el 100% de la altura de .swiper-proceso-creacion */
  display: flex !important; /* Asegura que el wrapper sea un contenedor flex */
  align-items: center !important; /* Centrar verticalmente todos los slides */
  //justify-content: center !important; /* Centrar horizontalmente los slides (aunque cada slide ya centra su imagen) */
  transition-property: transform, height !important; /* Permite transicionar la altura */
}
.swiper-slide {
  width: 100% !important; /* Cada slide ocupa el 100% del ancho del wrapper */
  height: 100% !important; /* Cada slide ocupa el 100% de la altura del wrapper */
  display: flex !important; /* Asegura que cada slide sea un contenedor flex */
  justify-content: center !important; /* Centrar horizontalmente la imagen dentro del slide */
  align-items: center !important; /* Centrar verticalmente la imagen dentro del slide */
}
.swiper-carrusel_fotografias img {
  max-width: 100% !important;
  max-height: 100% !important; /* La imagen se ajustará a la altura fija del slide */
  height: auto !important;      /* Mantiene la proporción */
  display: block !important;
  object-fit: contain !important; /* Asegura que la imagen se vea completa (con barras si es necesario) */
  border-radius: 8px;
}

/* Ajustar posición de los puntos de paginación (AHORA DENTRO) */
.swiper-pagination {
    position: absolute !important;
    bottom: 15px !important; /* Distancia desde la parte inferior del slider */
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 10 !important;
}
/* Estilos de paginación de Swiper (puntos) */
.swiper-pagination-bullet {
  background-color: #fff !important;
  opacity: 0.8 !important;
}
.swiper-pagination-bullet-active {
  background-color: #fff !important;
  opacity: 1 !important;
  transform: scale(1.2);
}


/* Estilos de navegación de Swiper (flechas) */
.swiper-button-prev,
.swiper-button-next {
  color: #fff !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 2rem !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .item-galeria {
    width: calc((100% - 20px) / 2); /* Ancho para 2 columnas con 20px de gutter */
  }

  /* --- NUEVO CSS RESPONSIVE para items de DOBLE ANCHO --- */
  .item-galeria.item-double-width {
    width: 100%; /* Ocupa las 2 columnas */
  }
  /* --- FIN NUEVO CSS RESPONSIVE --- */
    /* Sección 2: Carrusel */
  .swiper-carrusel_fotografias {
    height: 500px; /* Ajusta altura en tablet */
  }
}

@media (max-width: 768px) {
  .editorial-descripcion {
    flex-direction: column;
  }

  .cita-editorial,
  .descripcion-editorial {
    flex: 1 1 100%;
    border-left: none;
    border-top: 2px solid #000;
    padding-top: 1rem;
  }

  .titulo-fotografia {
    font-size: 1.5rem;
  }

  .item-galeria {
    width: 100%; /* En móvil, todos los ítems ocupan 1 columna (100%) */
  }

  /* --- NUEVO CSS RESPONSIVE para items de DOBLE ANCHO (en móvil) --- */
  .item-galeria.item-double-width {
    width: 100%; /* Sigue ocupando el 100% */
  }
  /* --- FIN NUEVO CSS RESPONSIVE --- */
    /* Sección 2: Carrusel */
  .swiper-carrusel_fotografias {
    height: 400px; /* Ajusta altura en móvil */
  }
}