/* Asegura que el box-sizing sea consistente en todos los elementos */
* {
  box-sizing: border-box;
}

/* Las reglas html, body que controlan el scroll y las transiciones de Fancybox
   DEBEN estar en tu style.css principal, no aquí. Si no las tienes,
   asegúrate de que tu style.css las contenga, tal como te las proporcioné antes.
   (No se incluyen aquí para evitar duplicidad).
*/


/* Contenedor principal de la página single-moda */
.single-moda {
  max-width: 1200px; /* Ancho máximo del contenido principal */
  margin: 0 auto;    /* Centrar el contenido */
  padding: 2rem;     /* Relleno interno */
}

/* Estilos para el botón/enlace "Volver" */
.single-moda .volver {
  margin-bottom: 1rem;
}

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

/* Estilos para el título principal del proyecto de moda */
.titulo-moda {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

/* ==============================================
   Sección 1: Editorial y Descripción
   (Diseñado para 2 columnas si AMBOS campos existen, o 1 columna si solo uno existe)
============================================== */
.editorial-descripcion-moda {
  /* Este section solo define el padding y margen de la sección */
  display: flex; /* Aseguramos que sea un bloque normal */
  max-width: 1200px;
  margin: 0 auto 4rem auto;
  padding: 0 2rem; /* Añadimos padding para que el contenido no toque los bordes */
}

/* Contenedor Flexbox para las dos columnas (si ambos campos tienen contenido) */
.contenido-editorial-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 */
  max-width: 1000px; /* Ancho máximo para el contenido de las dos columnas */
  margin: 0 auto; /* Centrar el contenido flex */
}

.editorial-moda-content { /* Clase para la columna izquierda (si el campo ACF 'editorial_proyecto_de_moda' existe) */
  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;
}

.descripcion-moda-content { /* Clase para la columna derecha (si el campo ACF 'descripcion_proyecto_de_moda' es la segunda columna) */
  flex: 1 1 55%; /* Columna derecha: 55% de ancho base */
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* Estilo para el caso en que solo exista el campo 'descripcion_proyecto_de_moda'
   y no haya campo 'editorial_proyecto_de_moda' para la primera columna.
   En este caso, este div ocupará todo el ancho y se centrará. */
.descripcion-moda-content-principal {
  display: block; /* Asegura que sea un bloque para que margin:auto funcione */
  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 */
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}


/* Estilos para los párrafos dentro de las descripciones WYSIWYG */
.editorial-moda-content p:last-child,
.descripcion-moda-content p:last-child,
.descripcion-moda-content-principal p:last-child {
  margin-bottom: 0; /* Eliminar margen inferior del último párrafo */
}
.editorial-moda-content p,
.descripcion-moda-content p,
.descripcion-moda-content-principal p {
    margin-bottom: 1em; /* Espacio entre párrafos */
}



/* ==============================================
   Sección 2 y 3: Estilos generales para subtítulos con líneas
============================================== */
.subtitulo-seccion-moda {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  text-align: center;
  margin: 4rem 0 3rem;
  font-family: 'Playfair Display', serif;
  color: #111;
  font-weight: normal;
}

.subtitulo-seccion-moda .linea {
  content: "";
  display: inline-block;
  height: 1px;
  background-color: #000;
  margin: 0 1rem;
  flex-grow: 1;
  max-width: 150px;
}

/* ==============================================
   Sección 2: Carrusel (Swiper.js) - Proceso de Creación
   *** AJUSTES PARA ALTURA, PUNTOS Y FLECHAS DENTRO Y CENTRADO DE IMAGEN ***
============================================== */
.proceso-creacion-moda {
  margin-bottom: 4rem;
  /* text-align: center; // Se puede mantener o quitar, el centrado lo controlará el swiper */
}
.swiper-proceso-creacion {
  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-proceso-creacion 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;
}



/* ==============================================
   Sección 3: Resultado Final (Grid Masonry)
============================================== */
.resultado-final-moda {
  margin-bottom: 4rem;
}

.resultado-final-moda .masonry-wrapper {
  width: 100%;
  margin-bottom: 0;
  position: relative;
  display: block;
}

.galeria-resultado-final {
  margin: 0 auto;
  position: relative;
  display: block;
}

/* Ítems individuales del grid de Resultado Final */
.item-galeria-resultado {
  width: calc((100% - 40px) / 3);
  margin-bottom: 20px;
}

/* Ítems de doble ancho en el grid de Resultado Final */
.item-galeria-resultado.item-double-width-resultado {
  width: calc((200% - 20px) / 3);
}

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

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


/* ==============================================
   Responsive para Single Moda
============================================== */
@media (max-width: 1024px) {
  /* Sección 1 */
  .editorial-descripcion-moda {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1rem;
  }
  .editorial-moda-content,
  .descripcion-moda-content {
    flex: 1 1 100%;
  }
  .editorial-moda-content {
    border-left: none;
    border-top: 2px solid #000;
    padding-left: 0;
    padding-top: 1rem;
  }
  .descripcion-moda-content-principal {
      text-align: center;
      padding: 0 1rem;
  }

  /* Sección 2: Carrusel */
  .swiper-proceso-creacion {
    height: 500px; /* Ajusta altura en tablet */
  }

  /* Sección 2 y 3: Título con líneas */
  .subtitulo-seccion-moda {
    font-size: 1.5rem;
  }
  .subtitulo-seccion-moda .linea {
    max-width: 80px;
  }

  /* Sección 3 Grid */
  .item-galeria-resultado {
    width: calc((100% - 20px) / 2);
  }
  .item-galeria-resultado.item-double-width-resultado {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .titulo-moda {
    font-size: 1.5rem;
  }
  .single-moda {
    padding: 1rem;
  }

  /* Sección 1 */
  .editorial-descripcion-moda {
    padding: 0 1rem;
    text-align: center;
  }
  .descripcion-moda-content-principal {
    text-align: center;
  }
  .editorial-moda-content,
  .descripcion-moda-content {
    text-align: center;
  }

  /* Sección 2: Carrusel */
  .swiper-proceso-creacion {
    height: 400px; /* Ajusta altura en móvil */
  }

  /* Sección 2 y 3: Título con líneas */
  .subtitulo-seccion-moda {
    font-size: 1.2rem;
    margin: 3rem 0 2rem;
  }
  .subtitulo-seccion-moda .linea {
    max-width: 50px;
  }

  /* Sección 3 Grid */
  .item-galeria-resultado {
    width: 100%;
  }
  .item-galeria-resultado.item-double-width-resultado {
    width: 100%;
  }
}