*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica, sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;
    
}

        /* Opcional: Estilos para el contenedor del mapa */
        .map-container {
            width: 100%;
            max-width: 800px; /* Ancho máximo para el mapa */
            margin: 20px auto; /* Centrar el mapa */
            border: 1px solid #ccc;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        }

        .mapa 
        {
            margin-top: 5px;
            margin-bottom: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        /* Asegúrate de que el iframe sea responsive */
        .map-container iframe {
            width: 100%;
            height: 450px; /* Altura por defecto, puedes ajustarla */
            border: 0;
        }
/* Estilos base (Mobile First: para pantallas pequeñas por defecto) */
.main-header {
    background-color:#7b3a0eb5;
    display: flex;
    flex-direction: column; /* Apila el título y el menú verticalmente en móvil */
    align-items: flex-start; /* Alinea los elementos a la izquierda del header */
    padding: 15px 20px; /* Padding general del header, 20px a izquierda y derecha */
    width: 100%; /* Asegura que ocupe el 100% del ancho del padre */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
    padding-top: 25px;
    padding-bottom: 35px;
    
}

.header-left {
    width: 100%; /* El título ocupa todo el ancho disponible */
    text-align: left; /* Alinea el título a la izquierda */
    margin-bottom: 15px; /* Espacio debajo del título antes del menú */
}

.site-title {
    color: #fff; /* Asegura buen contraste con tu imagen de fondo */
    margin: 0;
    font-size: 2em;
}

.main-nav {
    width: 50%; /* El menú de navegación ocupa todo el ancho disponible */
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* MENÚ SIEMPRE VISIBLE */
    flex-direction: row; /* **CAMBIO CRÍTICO**: Apila los enlaces del menú horizontalmente en móvil */
    flex-wrap: wrap; /* **NUEVO**: Permite que los enlaces se envuelvan a la siguiente línea si no caben */
    justify-content: first baseline; /* **NUEVO**: Alinea los elementos del menú a la izquierda en móvil */
    gap: 15px; /* **NUEVO**: Espacio entre los ítems del menú, más moderno que margin-left */
}

.nav-list li {
    margin-bottom: 0; /* Asegura que no haya margen inferior, ya que están en línea */
}

.nav-list a {
    text-decoration: none;
    color: white; /* **NUEVO**: Tono chocolate para las letras */
    background-color:#472e1db5; /* Fondo transparente por defecto */
    padding: 2px 8px; /* Más padding para un área de clic cómoda */
    display: block; /* Hace que el área de clic del enlace sea más grande */
    font-weight: bold; /* **NUEVO**: Letras más gruesas (negrita) */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el efecto hover */
    border-radius: 5px; /* Opcional: bordes ligeramente redondeados */
}

.nav-list a:hover {
    background-color: #fff; /* **NUEVO**: Fondo blanco al pasar el ratón */
    color: #472e1db5; /* **NUEVO**: El texto sigue siendo chocolate (o puedes cambiarlo si quieres otro color al hover) */
}
a
    {
     color: #8f3c05b5;
     text-decoration: none;
    }
a :hover
    {
     color: #472e1db5;  
     background-color: #fff; /* **NUEVO**: Fondo blanco al pasar el ratón */
  
    }

/* Media Queries */

/* Tablet (desde 768px de ancho) */
@media (min-width: 768px) {
    .main-header {
        flex-direction: row; /* Coloca el título y el menú en la misma fila */
        justify-content: space-between; /* Espacia el título a la izquierda y el menú a la derecha */
        align-items: center; /* Centra verticalmente los elementos en la fila */
    }

    .header-left {
        width: 50%; /* Título 50% del ancho */
        text-align: left; /* Alinea el título a la izquierda */
        margin-bottom: 0;
    }

    .main-nav {
        width: 60%; /* Navegación 50% del ancho */
    }

    .nav-list {
        flex-direction: row; /* Muestra los elementos de navegación horizontalmente */
        justify-content: flex-end; /* Alinea los elementos del menú a la derecha */
        gap: 10px; /* **NUEVO**: Ajusta el espacio entre ítems para tablet/escritorio */
        flex-wrap: wrap;
    }
}

 
/* Escritorio (desde 1024px de ancho) */
@media (min-width: 1024px) {
    .header-left {
        width: 40%; /* Título 60% del ancho */
    }

    .main-nav {
        width: 60%; /* Navegación 40% del ancho */
    }

    .nav-list {
        gap: 10px; /* **NUEVO**: Ajusta el espacio entre ítems para escritorio */
    }
}
div.foto-juanma
{
    background-image: src="fotos/fotosJuanma/familiaAlfareriaHernandez.jpg" ;
}
h1
{
    font-family: didot;
    font-size: 40px;
    font-weight: bold;
}
h2
{
    text-align: center;
    color: white;
    background-color: #472e1db5;
    padding: 25px;
   
}
h3
{
     text-align: center;
     color: #9a4402ea; 
     padding: 25px;
}
p.marron
{
    background-color: #472e1db5;
    color: white;
}
p 
{
    margin: 1rem 1.5rem;
    padding: 1rem;
}

/* Contenedor de la galería */
.contenedor-galeria {
    display: grid;
    gap: 20px; /* Espacio entre las columnas y filas */
    padding: 20px;
    max-width: 1200px; /* Ancho máximo para el contenedor de la galería */
    margin: 0 auto; /* Centrar el contenedor */
}

/* Estilos para cada elemento de la galería */
.galeria {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    background-color: darkgray;

}

.galeria img {
    max-width: 100%;
    height: auto;
    display: block; /* Elimina espacio extra debajo de la imagen */
    margin: 0 auto 10px auto; /* Centrar imagen y añadir margen inferior */
    
}

.galeria h3 {
    margin-top: 10px;
    color: #555;
    font-size: 1.2em;
}

.galeria p {
    font-size: 0.9em;
    color: #666;
    
}

/* Media Queries para diseño responsivo */

/* Vista en Ordenador (3 columnas) - Ancho de pantalla de 1024px o más */
@media (min-width: 1024px) {
    .contenedor-galeria {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
    }
}

/* Vista en Tablet (2 columnas) - Ancho de pantalla entre 600px y 1023px */
@media (min-width: 600px) and (max-width: 1023px) {
    .contenedor-galeria {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
    }
}

/* Vista en Móvil (1 columna) - Ancho de pantalla de hasta 599px */
@media (max-width: 599px) {
    .contenedor-galeria {
        grid-template-columns: 1fr; /* Una sola columna */
    }
}

/*-*/
.contenedor-libro-imagenes {
    display: flex; /* Usamos flexbox para una disposición en línea */
    flex-wrap: wrap; /* Permite que las imágenes salten a la siguiente línea si no caben */
    justify-content: center; /* Centra las imágenes horizontalmente */
    gap: 15px; /* Espacio entre las imágenes */
    padding: 20px;
    max-width: 1000px; /* Ancho máximo para el contenedor */
    margin: 0 auto; /* Centrar el contenedor */
}

.contenedor-libro-imagenes img {
    max-width: 100%; /* Asegura que la imagen no desborde su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    flex: 1 1 auto; /* Permite que las imágenes crezcan y se encojan */
    /* Ancho base inicial para cada imagen en pantallas grandes */
    min-width: 200px; /* Un ancho mínimo para que no se hagan demasiado pequeñas */
    object-fit: contain; /* Ajusta la imagen dentro de su contenedor sin recortar */
    border: 1px solid #eee; /* Borde sutil para las imágenes */
    padding: 5px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.05);
}


/* Media Queries para diseño responsivo de las imágenes del libro */

/* Ordenador (una fila flexible, similar al original pero responsivo) */
@media (min-width: 1024px) {
    .contenedor-libro-imagenes img {
        /* Puedes ajustar estos valores si quieres un control más preciso de las proporciones */
        /* Por ejemplo, podrías querer un flex-basis específico para cada imagen si sus anchos originales eran muy variados */
        flex-basis: calc(25% - 15px); /* Aproximadamente 4 imágenes por fila, descontando el gap */
        background-color: #6d6d6d;
    }
     .contenedor-libro-imagenes img:nth-child(1) { flex-basis: 22%; } /* Ajustar si quieres anchos específicos como en tu HTML original */
     .contenedor-libro-imagenes img:nth-child(2) { flex-basis: 22%; }
     .contenedor-libro-imagenes img:nth-child(3) { flex-basis: 18%; }
     .contenedor-libro-imagenes img:nth-child(4) { flex-basis: 10.2%; }
     /* La combinación de flex-basis y flex-wrap hará que se organicen en una fila
        mientras respetan los anchos relativos si el espacio lo permite.
        Si prefieres que simplemente se distribuyan uniformemente sin los anchos específicos,
        puedes usar solo flex-basis: calc(25% - 15px); para todas. */
}
/* --- Estilos para Video Responsivo --- */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 (altura / ancho = 9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    /* CAMBIOS AQUÍ */
    max-width: 99%; /* El video ocupará como máximo el 99% del ancho de la pantalla */
    margin: 20px auto; /* Centrar el video horizontalmente */
    /* FIN DE CAMBIOS */
    background-color: #000; /* Fondo negro mientras carga o si no hay video */
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* --- Estilos para .contenedor (imágenes a la izquierda, texto a la derecha) --- */
.contenedor {
    width: 100%;
    display: flex; /* Usa Flexbox para colocar los elementos */
    flex-direction: column; /* Por defecto, en móviles, se apilan verticalmente */
    gap: 20px; /* Espacio entre las columnas */
    padding: 20px;
    max-width: 1200px; /* Limita el ancho para que no se estire demasiado */
    margin: 20px auto; /* Centra el contenedor y añade margen vertical */
    align-items: center; /* Centyra los elementos */
}

.contenedor-texto-interno {
    flex: 2; /* El texto ocupa el doble de espacio que las imágenes */
    min-width: 250px; /* Ancho mínimo para la columna de texto */
}

/* Media Query para .contenedor en pantallas de ordenador y tablet */
@media (min-width: 768px) {
    .contenedor {
        flex-direction: row; /* En pantallas grandes, las imágenes y el texto se colocan en fila */
        align-items: flex-start; /* Alinea los elementos en la parte superior */
    }
}
/* Estilos generales para la sección */
.videoTexto {
    display: flex;
    flex-direction: row; /* Horizontal en pantallas grandes */
    align-items: flex-start;
    gap: 20px; /* Espacio entre vídeo y texto */
    flex-wrap: wrap; /* Permite que en pantallas pequeñas se apilen */
  }
  
 
  
  /* El texto ocupa el resto del espacio */
  .texto {
    flex: 1 1 55%;
    min-width: 300px;
    background-color: #f0e6dd;
  }
  
  /* Para pantallas pequeñas, apilar los elementos */
  @media (max-width: 768px) {
    .video-texto {
      flex-direction: column;
    }
  }

  .videoTexto {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px; /* Espacio entre vídeo y texto */
  flex-wrap: wrap; /* Permite que en pantallas pequeñas se apilen */
  max-height: calc(100%); /* Para limitar la altura al tamaño del vídeo */
  overflow: hidden; /* Oculta el desbordamiento para mantener la altura */
  position: relative;
  background-color: #f0e6dd;
}

/* El contenedor del vídeo mantiene su tamaño y proporción */
.video {
  flex: 1 1 40%;/* Se ajusta en tamaño */ 
  width: 100%; /* Ajusta según prefieras */
  min-width: 300px; /* Para pantallas pequeñas */
  justify-content: center;
}

img
{
    width: 100%;
}
.video video {
    width: 100%;
    height: auto; /* Mantiene la proporción del video */
    display: block; /* Elimina espacio extra debajo del video */
    max-width: 99%; /* El video ocupará como máximo el 99% del ancho de la pantalla */
    margin: 0 auto; /* Centrar el video horizontalmente dentro de su contenedor .video */
    background-color: #000; /* Fondo negro mientras carga o si no hay video */
  }
  
  
.video iframe
  {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      justify-content: center;
  }

/* El texto ocupa el resto del espacio y pasa debajo cuando pasa la altura del vídeo */
.texto {
  flex: 1 1 auto;
  min-width: 300px;
}

/* En pantallas pequeñas, apilar los elementos */
@media (max-width: 768px) {
  .videoTexto {
    flex-direction: column;
    max-height: none; /* Permite que el contenido fluya libremente */
  }
}
iframe
{
    width: 100%;
}
.imagen-con-caption {
    width: 100%; /* O el ancho que quieras para el contenedor de la imagen */
    max-width: 90%; /* Un ancho máximo para que no sea enorme en pantallas grandes */
    margin: 20px auto; /* Centrar la imagen y darle un poco de espacio */
    text-align: center; /* Centrar el pie de foto */
}

.imagen-con-caption img {
    max-width: 100%; /* La imagen no debe desbordar su contenedor */
    height: auto; /* Mantiene la proporción */
    display: block; /* Elimina espacios extras debajo de la imagen */
}

.imagen-con-caption .pequeña {
    margin-top: 10px; /* Espacio entre la imagen y el texto */
    font-size: 0.9em; /* Ajusta el tamaño de fuente si es necesario */
    color: #666; /* Un color más suave para el pie de foto */
}