/* 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-ilustracion {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

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

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

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

/* Masonry wrapper */
.masonry-wrapper {
  width: 100%;
  margin-bottom: 3rem;
  position: relative;
  display: block;
}

/* Masonry grid para ilustración */
.galeria-ilustracion { /* La clase del div de la galería */
  margin: 0 auto;
  position: relative;
  display: block;
}

/* Masonry items para ilustración */
.item-galeria-ilustracion { /* La clase de cada item de la galería */
  width: calc((100% - 40px) / 3);
  margin-bottom: 20px;
}

.item-galeria-ilustracion.item-double-width-ilustracion {
  width: calc((200% - 20px) / 3);
}

.item-galeria-ilustracion img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  transition: transform 0.3s ease;
}

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

/* ==============================================================
   Descripción posterior de Ilustración - Contenedor principal de la sección
   (Este es el que tendrá las columnas)
============================================================== */
.descripcion-ilustracion-seccion {
  padding-top: 2rem;
  max-width: 1000px; /* Un ancho algo mayor para las dos columnas */
  margin: 0 auto;
  /* Ya no aplicamos flexbox aquí directamente */
  /* El display:flex se aplicará a .contenido-descripcion-flex */
}

/* Nuevo contenedor para las dos columnas (Editorial y Descripción) */
.contenido-descripcion-flex {
    display: flex;        /* Activamos Flexbox */
    flex-wrap: wrap;      /* Permite que las columnas se apilen en pantallas pequeñas */
    justify-content: space-between; /* Distribuye el espacio entre columnas */
    gap: 2rem;            /* Espacio entre las columnas */
}

/* Estilos para el Editorial (columna izquierda) */
.editorial-ilustracion-content {
    flex: 1 1 40%; /* Columna izquierda: 40% de ancho base */
    font-style: italic;
    font-size: 1.1rem;
    border-left: 3px solid #000;
    padding-left: 1rem;
    line-height: 1.6;
    color: #555;
}

/* Estilos para la Descripción (columna derecha) */
.descripcion-contenido-texto {
    flex: 1 1 55%; /* Columna derecha: 55% de ancho base */
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    text-align: left;
}

/* Estilo para el caso en que solo se muestre una columna centrada */
.contenido-descripcion-single-col {
    display: block; /* Asegura que sea un bloque para margin:auto */
    max-width: 800px; /* Ancho máximo para el texto centrado */
    margin: 0 auto; /* Centra el contenido si está solo */
    padding: 0 1rem; /* Pequeño padding interno */
    text-align: center; /* Centra el texto */
}
.contenido-descripcion-single-col .descripcion-contenido-texto,
.contenido-descripcion-single-col .editorial-ilustracion-content {
    text-align: center; /* Asegura el centrado si solo hay una columna */
}


/* Estilos para los párrafos dentro de las descripciones WYSIWYG */
.editorial-ilustracion-content p,
.descripcion-contenido-texto p,
.contenido-descripcion-single-col p { /* También para la columna única */
    margin-bottom: 1em;
}
.editorial-ilustracion-content p:last-child,
.descripcion-contenido-texto p:last-child,
.contenido-descripcion-single-col p:last-child {
    margin-bottom: 0;
}
/* ==============================================
   Sección 2: Carrusel (Swiper.js) - Proceso de Creación
   *** AJUSTES PARA ALTURA, PUNTOS Y FLECHAS DENTRO Y CENTRADO DE IMAGEN ***
============================================== */
.carrusel_ilustraciones {
  margin-bottom: 4rem;
  /* text-align: center; // Se puede mantener o quitar, el centrado lo controlará el swiper */
}
.swiper-carrusel_ilustraciones {
  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_ilustraciones 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 para Single Ilustración */
@media (max-width: 1024px) {
  .item-galeria-ilustracion {
    width: calc((100% - 20px) / 2);
  }
  .item-galeria-ilustracion.item-double-width-ilustracion {
    width: 100%;
  }

  /* Responsive para la sección de descripción (apilar en tablet) */
  .contenido-descripcion-flex {
    flex-direction: column; /* Apilar las columnas */
    gap: 1.5rem; /* Espacio entre las secciones apiladas */
    max-width: 800px; /* Ancho para el contenido apilado */
    margin: 0 auto; /* Centrar el contenido apilado */
  }
  .editorial-ilustracion-content,
  .descripcion-contenido-texto {
    flex: 1 1 100%; /* Ocupan todo el ancho */
  }
  .editorial-ilustracion-content { /* Ajuste de borde para tablet */
    border-left: none;
    border-top: 2px solid #000;
    padding-left: 0;
    padding-top: 1rem;
  }
  .descripcion-contenido-texto {
      text-align: left; /* Mantener la alineación en móvil */
  }
  .contenido-descripcion-single-col { /* Asegura que la columna única también se adapte */
      text-align: center;
      padding: 0 1rem;
  }
    /* Sección 2: Carrusel */
  .swiper-carrusel_ilustraciones {
    height: 500px; /* Ajusta altura en tablet */
  }
}

@media (max-width: 768px) {
  .titulo-ilustracion {
    font-size: 1.5rem;
  }
  .item-galeria-ilustracion {
    width: 100%;
  }
  .item-galeria-ilustracion.item-double-width-ilustracion {
    width: 100%;
  }
  /* Responsive para la sección de descripción (móvil) */
  .descripcion-ilustracion-seccion {
    padding: 1rem;
  }
  .contenido-descripcion-flex {
    gap: 1rem;
  }
  .editorial-ilustracion-content,
  .descripcion-contenido-texto {
      text-align: left; /* Mantener la alineación en móvil */
  }
  .contenido-descripcion-single-col {
      text-align: center;
  }
    /* Sección 2: Carrusel */
  .swiper-carrusel_ilustraciones {
    height: 400px; /* Ajusta altura en móvil */
  }
}