/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------    GENERALES    ---------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------ */

/* Estilos para el cuerpo */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2e6ff; /* Morado claro para el fondo de la página */
}

/* ------------------------------------------------------------------------------------------------------------------------------ */

/* Estilos para el header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url('Imagenes/Fondos/fondo1.jpg');
    background-size: cover;
    background-position: center;
    color: #ffffff; /* Texto en blanco */
    text-align: center;
    padding: 5px 0;
    z-index: 999; /* Establece un valor alto para asegurarte de que esté por encima de otras capas */
    
}


/* Estilos para la imagen del header */
header img {
    position: absolute;
    top: 10px; /* Ajusta según sea necesario */
    left: 20px; /* Ajusta según sea necesario */
    width: 90px; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Cambia el cursor al pasar por encima del logo */
}

/* ------------------------------------------------------------------------------------------------------------------------------ */

/* Estilos para el main */
main {
    padding: 20px;
    margin-top: 80px; /* Ajusta según el tamaño del logo y el espacio del encabezado */
}

/* ------------------------------------------------------------------------------------------------------------------------------ */

/* Estilos para el pie de página */
footer {
    background-color: #6a0dad; /* Morado oscuro */
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    z-index: 998; 
}

/* Estilos para la imagen del pie de página */
footer img {
    margin-top: 10px;
    width: 100px;
    height: auto;
}

/* ------------------------------------------------------------------------------------------------------------------------------ */

/* Estilos para una sección */
section {
    background-color: #fff; /* Fondo blanco */
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
}

/* ------------------------------------------------------------------------------------------------------------------------------ */

/* Estilos para h2 */
h2 {
    color: #6a0dad; /* Morado oscuro */
    font-size: 35px;
    text-align: center;
}


/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------     SOBRE MI    ---------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------ */

#sobre-mi {
    text-align: center;
    padding: 20px 0 50px 0;
}

/* Estilos para dividir en 2 sobre mi */
.contenido-sobre-mi {
    display: flex;
    flex-direction: row; /* Cambiamos a fila */
    align-items: center;
    justify-content: center; /* Centramos horizontalmente */
    max-width: 800px;
    margin: 0 auto;
    margin-top: 20px; /* Ajuste para separar el título de la imagen */
}

/* Estilos para imagen sobre mi */
.imagen-sobre-mi {
    max-width: 200px; /* Tamaño máximo de la imagen */
    max-height: 200px;
    border: 2px solid #6a0dad; /* Borde de 2 píxeles sólido de color morado oscuro */
    border-radius: 10px; /* Bordes redondeados */
    cursor: pointer;
    margin-right: 40px; /* Mueve la imagen un poco hacia la izquierda */
    margin-left: 30px;
}

/* Estilos para texto sobre mi */
.texto-sobre-mi {
    text-align: justify; /* Justificar el texto */
    padding-left: 20px; /* Ajuste para separar la imagen del texto */
    padding-right: 30px; /* Ajuste para separar la imagen del texto */
    flex-grow: 1; /* Hace que el área de texto ocupe todo el espacio restante */
}

/* Estilos para p sobre mi */
.texto-sobre-mi p {
    color: #000000; /* Texto en negro */
    max-width: 500px; /* Establece el ancho máximo del texto */
}


/* ------------------------------------------------------------------------------------------------------------------------------ */
/* -------------------------------------------------    QUÉ OFREZCO    ---------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------ */

#que-ofrezco {
    padding: 20px; /* Añade espacio alrededor de la sección */
    margin-right: 10px;
}

/* Estilos para título qué ofrezco */
.titulo-seccion {
    margin-bottom: 20px; /* Añade espacio entre el título y las imágenes */
}

/* Estilos para las imágenes qué ofrezco */
.imagenes-seccion {
    display: flex;
    justify-content: space-between; /* Distribuye equitativamente las imágenes horizontalmente */
}

/* Estilos para cada imagen qué ofrezco */
.contenido-que-ofrezco {
    width: calc(25% - 10px); /* Divide el ancho en 4 partes iguales y resta el espacio entre ellas */
    display: flex; /* Utiliza flexbox para alinear verticalmente el contenido */
    flex-direction: column; /* Apila el contenido verticalmente */
    justify-content: center; /* Alinea el contenido verticalmente en el centro */
    align-items: center; /* Centra horizontalmente el contenido */
    overflow: hidden; /* Oculta cualquier parte del contenido que exceda el contenedor */
    position: relative; /* Establece la posición relativa para que el contenido interno se pueda posicionar de manera absoluta */
    text-align: center; /* Centra horizontalmente el contenido */
}

/* Estilos para tamaño imágen qué ofrezco */
.imagen-que-ofrezco {
    max-width: 100%; /* Ajusta el ancho máximo de la imagen al tamaño del contenedor */
    max-height: 100px; /* Establece la altura máxima de la imagen */
    filter: drop-shadow(0 0 3px #0007); /* Funciona para png con fondos transparentes*/
}

/* Estilos para h5 que ofrezco*/
.contenido-que-ofrezco h5 {
    font-size: 20px;
}

/* Estilos para p que ofrezco*/
.contenido-que-ofrezco p {
    margin: 0; /* Elimina el margen por defecto del h5 y el p */
    margin-bottom: 30px;
}

.importante {
    font-weight: bold;
}

/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------    OPINIONES    ---------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------ */

#testimonios {
    text-align: center;
    padding: 20px 0;
    font-size: 25px;
}

/* Estilos para el título opiniones */
.titulo-testimonio {
    margin-bottom: 20px;
}

/* Estilos para cada testimonio */
.testimonio {
    display: inline-block;
    vertical-align: top;
    width: 42%; /* Ancho de cada testimonio */
    margin: 10px; /* Espacio entre testimonios */
    padding: 15px;
    background-color: #f2e6ff; /* Morado clarito */
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    font-size: 18px;
}

/* Estilos para cada testimonio */
.testimonio blockquote {
    font-style: italic;
    margin-bottom: 10px;
}

/* Estilos para el nombre del cliente */
.testimonio .cliente {
    font-weight: bold;
    font-size: 16px;
}


/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------    CONTACTO     ---------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------ */

#contacto {
    text-align: center;
    padding: 20px 0;
}

/* Estilos para título contacto */
.titulo-contacto {
    margin-bottom: 20px;
}

/* Estilos para división columnas contacto*/
.informacion-contacto {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* Estilos para cada columna contacto */
.columna {
    flex: 1;
    margin: 0 10px;
}

/* Estilos para h5 contacto */
.columna h5 {
    font-size: 16px;
}

/* Estilos para p contacto */
.columna p {
    margin: 0; /* Elimina el margen por defecto del h5 y el p */
    font-size: 16px;
}

/* Estilos para botón contacto */
.boton-contacto {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Estilos para botón contacto */
.boton {
    padding: 10px 20px;
    background-color: #6a0dad; /* Morado oscuro */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    letter-spacing: 2px; /* Distancia entre letras */ 
    font-weight: bold;
    font-size: 20px;
}

/* Estilos para botón al pasar el ratón contacto */
.boton:hover {
    background-color: #4b0780; /* Morado más oscuro al pasar el mouse */
}

/* ------------------------------------------------------------------------------------------------------------------------------ */
/* -------------------------------------------------    FORMULARIO     ---------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------ */

.formulario {

    width: 75vh;
    padding: 20px 50px;
    background-color: #ffffff;
    border-radius: 10px;
    margin: 0 auto; /* Centra horizontalmente */

}

label {
    display: block;
    margin: 4px;
    margin-bottom: 0;
    color: #6a0dad; /* Morado oscuro */
    font-weight: bold;
    font-size: 18px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f2f2f2; /* Color de fondo gris claro */
}

input[type="submit"] {
    background-color: #6a0dad;
    font-size: 16px;
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 2px; /* Distancia entre letras */ 
    font-weight: bold;
    display: block; /* Convertir el botón en un bloque para aplicar estilos de centrado */
    margin: 0 auto; /* Centrar horizontalmente */
}

input[type="submit"]:hover {
    background-color: #4b0780;
    margin: 0 auto;
}

/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------    TALLERES     ---------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------ */

#taller {
    text-align: justify; /* Centra el contenido horizontalmente */
}

.titulo-taller{
    margin-bottom: 20px; /* Espacio debajo del título */
    text-align: center; /* Centra el contenido horizontalmente */
}

.contenido-taller {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
}

.texto-taller {
    width: 50%; /* Ancho del texto */
    padding: 0 20px; /* Espacio alrededor del texto */
}

.imagen-taller {
    width: 50%; /* Ancho de la imagen */
    padding: 0 20px; /* Espacio alrededor de la imagen */
    text-align: center; /* Centra el contenido horizontalmente */
}

.imagen-taller img {
    max-width: 100%; /* Asegura que la imagen no exceda el contenedor */
    height: auto; /* Mantiene la proporción de aspecto de la imagen */
    max-height: 300px; /* Establece la altura máxima de la imagen */
    
}

.proximo-taller {
    margin-bottom: 20px; /* Espacio debajo del título */
    font-size: 18px;
    text-align: center; /* Centra el contenido horizontalmente */
}

/* Estilos para botón taller */
.boton-taller {
    text-align: center; /* Centra el contenido horizontalmente */
    letter-spacing: 2px; /* Distancia entre letras */ 
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
}

.proximo-taller {
    text-align: center;
    margin-top: 20px;
}

.fechas-taller {
    display: flex;
    justify-content: center;
    gap: 120px; /* Espacio entre columnas */
    margin-top: 10px;
}

.fecha {
    border: 1px solid #4b0780;
    padding: 10px;
    border-radius: 5px;
}


/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------    MÓVILES     ---------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* Estilos para dispositivos móviles */
@media only screen and (max-width: 600px) {
    /* Ajustes para dispositivos móviles */

    h2 {
        font-size: 30px;
    }

    header h1 {
        margin-left: 28px;
    }

    /* Estilos para la imagen del header */
    header img {
        width: 60px; /* Ajusta el tamaño según sea necesario */
        margin-top: 10px;
        left: 10px; /* Cambia el valor según sea necesario */
    }

    .header-titulo {
        width: 70%; /* Cambia el valor según sea necesario */
        margin: 0 auto; /* Centra horizontalmente el título */
        right: 20px;
        margin-left: 70px;
    }

    .header-imagen-grande {
        width: 75px; /* Ajusta el tamaño según sea necesario */
        margin-top: 2px;
    }

    /* Estilos para la imagen del pie de página */
    footer img {
        width: 80px;
    }

    /* Cambiar la dirección de flexión en la sección "Sobre mí" */
    .contenido-sobre-mi {
        flex-direction: column;
    }

    .imagen-sobre-mi {
        margin: 20px 20px;
    }

    .texto-sobre-mi {
        padding: 0 40px;
    }

    .imagenes-seccion {
        flex-direction: column;
        margin: auto;
    }

    .contenido-que-ofrezco {
        width: 75%;
        margin: 10px auto;

    }

    /* Ajustar el tamaño de la imagen en la sección "Qué te ofrezco" */
    .imagen-que-ofrezco{
        max-width: 150px; /* Ajusta el tamaño de la imagen según sea necesario */
        max-height: 150px; /* Ajusta la altura máxima de la imagen */
    }

    .informacion-contacto {
        flex-direction: column;
    }

    .columna {
        margin-bottom: 25px;
    }

    .columna h5 {
        margin: 0;
        margin-bottom: 13px;
    }

    .contenido-taller {
        flex-direction: column;
    }

    .texto-taller {
        width: 90%; /* Ancho del texto */
        margin-right: 10px;
        margin-bottom: 20px;
    }

    .imagen-taller {
        width: 90%;
    }

    .proximo-taller {
        margin-bottom: 10px; /* Espacio debajo del título */
    }

    /* Ajustar el ancho del formulario */
    .formulario {
        width: 90%; /* Ajusta el ancho del formulario según sea necesario */
        padding: 20px; /* Ajusta los márgenes del formulario */
    }

    .testimonio {
        width: 70%; /* Ancho de cada testimonio */
        font-size: 18px;
    }

    .fechas-taller {
        display: block; /* Cambia a diseño en bloque para dispositivos móviles */
    }

    .fecha {
        
        font-size: 16px;
        width: 95%; /* Cada fecha ocupará todo el ancho del contenedor */
        margin-bottom: 15px; /* Espacio entre las cajas */
    }

}