body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #f8f2ff; /* Fondo lila claro */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Pacifico', cursive; /* Usa la fuente Pacifico */
}
h2{
    font-weight:lighter; 
}

header {
    background: #e8d4f0; /* Lila más oscuro */
    border-bottom: 1px solid #d3bce3;
}

.btn {
    display: inline-block;
    background: #c197df;
    color: #fff;
    padding: 10px 20px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    background: #e8d4f0;
    color: #333;
}

form {
    max-width: 500px;
    margin: 20px auto;
}

input[type="text"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
}

textarea {
    height: 100px;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}


.video-contenedor {
    display: flex;
    flex-direction: column; /* Establece la dirección de los elementos a columna */
    align-items: center;
}

.video-card {
    /* Tarjetas 'invisibles' sin bordes ni fondo */
    margin: 5px; /* Ajusta según la proximidad que desees entre las tarjetas */
    width: calc(33.33% - 10px); /* Ancho fijo para cada tarjeta */
    
    /* Otros estilos que puedas necesitar, como padding, etc. */
}

.video-contenedor2 {
    display: flex;
    flex-direction: row; /* Establece la dirección de los elementos a fila */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center;
    gap:50px;
}

.nombre-falso {
    font-style: italic;
    color: #999; /* Puedes cambiar el color según tus preferencias */
}



.video-sobre-mi {
    width: 100%; /* Ocupa todo el ancho de la tarjeta */
    height: 100%; /* Ocupa toda la altura de la tarjeta */
    object-fit: cover; /* Mantiene la relación de aspecto y ajusta el video para cubrir todo el espacio */
}





.contenido-sobre-mi {
    flex: 1; /* El texto ocupará el espacio restante */
    margin-right: 20px; /* Espacio entre el texto y el video */
    text-align: justify;

}

.video-sobre-mi-vida {
    display: block; /* Cambia el display a block */
    margin: 20px auto; /* Centra el video horizontalmente */
    max-width: 50%; /* Ajusta el ancho máximo del video */
    height: auto; /* Mantiene la relación de aspecto */
}



.mensaje-contacto {
    font-size: 2.0em; 
    text-align: center; 
    margin: 10px 0; 
    font-weight:lighter; 
    color: #000000; 
    font-family: 'Pacifico', cursive; /* Usa la fuente Pacifico */
    margin-bottom: 60px;
}


#titulo-seccion h1 {
    margin: 0; /* Elimina márgenes por defecto */
    text-align: center; /* Centra el texto */
    font-size: 40px; /* Ajusta el tamaño del texto según sea necesario */
}

#titulo-multicolor span {
    background: linear-gradient(to right, #FFB6C1, #87CEEB, #98FF98);
    -webkit-background-clip: text;
    color: transparent;
    display: inline; /* Para aplicar el efecto de gradiente correctamente */
    font-size: 75px;
}


#titulo-sobre-mi {
    background: linear-gradient(to right, #FFB6C1, #87CEEB, #98FF98); /* Reemplaza con tus colores */
    color: #333; /* Color del texto */
    padding: 10px; /* Espacio alrededor del texto */
    display: inline-block; /* Para aplicar el padding correctamente */
    border-radius: 5px; /* Bordes redondeados, opcional */
}

.servicios{
    background: linear-gradient(to right, #FFB6C1, #87CEEB, #98FF98); /* Reemplaza con tus colores */
    color: #333; /* Color del texto */
    padding: 10px; /* Espacio alrededor del texto */
    display: inline-block; /* Para aplicar el padding correctamente */
    border-radius: 5px; /* Bordes redondeados, opcional */
}

.grid-collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    grid-gap: 10px; /* Espacio entre imágenes */
}

/* Las primeras 6 imágenes ocuparán las dos primeras filas */
.grid-collage img:nth-child(-n+6) {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.grid-collage img:nth-child(7) {
    grid-column: 2 / span 1; /* Posiciona en la columna deseada */
    grid-row: 3 / span 2; /* Ocupa 2 filas para mayor altura */
    width: 100%;
    height: auto;
    object-fit: contain; /* Ajusta para evitar recorte */
    max-height: none; /* Elimina restricción de altura máxima si existe */
}

/* Estilos para ajustar el tamaño real de la séptima imagen */
.imagen-tamaño-real {
    width: auto; 
    height: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

.grid-collage img {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho de la celda de la cuadrícula */
    max-height: 300px; /* Establece un largo máximo para las imágenes */
    object-fit: cover; /* Asegura que las imágenes cubran completamente sus celdas */
    height: auto; /* Mantiene la relación de aspecto */
    padding: 5px; /* Espacio alrededor de la imagen, crea el efecto de marco */
    background-color: #d185e1c9; /* Color del marco, ajusta según tus necesidades */
    box-shadow: 0px 4px 8px rgba(35, 32, 32, 0.833); /* Opcional: añade una sombra para profundidad */

}



.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px; /* Ajusta el tamaño según tus necesidades */
    width: 50px; /* Ajusta el tamaño según tus necesidades */
    
    background-size: cover;
    display: none; /* Oculta el ícono por defecto */
}



.logo img {
    height: 120px;
    width: 120px;
    margin-left: 20px;
}

.logo {
    width: 80px; /* Ajusta según el tamaño de tu logo */
    flex-shrink: 0; /* Previene que el logo se encoja */
}

nav ul {
    flex-grow: 1; /* Permite que la lista ocupe el espacio restante */
    justify-content: center; /* Centra los elementos de la lista */
    display: flex;
    margin-right: 10%;
    
}

nav ul li {
    margin: 0 10px; /* Ajusta el espaciado entre elementos de la lista */
}


nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: #c197df; /* Texto blanco */
}

section {
    padding: 20px;
    text-align: center;
}


.contenedor-imagen {
    text-align: center;
}

.imagen-sobre-mi {
    display: block; /* Asegura que la imagen no tenga espacio adicional a su alrededor */
    margin: 0 auto; /* Centra la imagen */
}

.etiqueta-imagen {
    color: black; /* Cambiar el color de la letra a negro */
    display:flexbox; /* Tamaño según el contenido */
    font-size: 0.8em; /* Tamaño de fuente más pequeño */
    border-radius: 5px;
    margin-bottom: 10px;
}

.contenido-sobre-mi {
    max-width: 800px; /* O el ancho máximo que prefieras */
    margin: 0 auto; /* Centra el contenido */
    padding: 15px; /* Añade algo de espacio interior */
}

.imagen-destacada, .imagen-sobre-mi {
    width: 35%; /* Tamaño reducido */
    height: 80%;
    display: block;
    margin: 10px auto; /* Centrado con margen */
}

.servicio {
    margin: 20px 0;
}

.galeria {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.galeria div {
    flex: 1 1 200px; /* Flexibilidad con base mínima de 200px */
    
    overflow: hidden;
}

.galeria img {
    width: 40%; /* Ajusta a tus necesidades */
    height: 40%; /* Mantiene la relación de aspecto */
    display: none; /* Oculta todas las imágenes inicialmente */
}

.foto-activa {
    display: block; /* Muestra solo la imagen activa */
}

.navbar-custom {
    background-color: #d3bce3; /* Cambia el color de fondo */
    padding-top: 0; /* Reduce el padding superior */
    padding-bottom: 0; /* Reduce el padding inferior */
    /* Otros estilos personalizados */
    
}


.contenedor-testimonios {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en filas */
    justify-content: space-around; /* Espacia los elementos uniformemente */
    margin: 0 -10px; /* Ajusta para compensar el espaciado extra de los elementos hijos */
}

.tarjeta-testimonio {
    width: 70%; /* Ajusta el ancho de cada tarjeta */
    margin: 10px; /* Espacio alrededor de cada tarjeta */
    background-color: #f8f2ff; /* Fondo lila claro, ajusta según tu esquema de color */
    border: 1px solid #d3bce3; /* Borde lila, ajusta según tu esquema de color */
    border-radius: 10px; /* Bordes redondeados */
    padding: 20px;
    width: calc(100% / 3 - 20px); /* Ajusta para tres tarjetas, restando el margen */
    margin: 10px; /* Mantén un poco de margen entre tarjetas */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave (opcional) */
}

.navbar-logo {
    max-height: 65px; /* Ajusta la altura máxima del logo */
    width: auto; /* Mantén la relación de aspecto del logo */
}

.nav-link {
    color: #393838; /* Texto blanco */
}


footer {
    background: #c197df; /* Lila más oscuro */
    color: #ffffff; /* Texto blanco */
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #c197df;
}

@media (max-width: 768px) {
    .play-icon {
        display: block; /* Muestra el ícono en dispositivos móviles */
    }

    .video-sobre-mi-vida {
        display: block; /* Cambia el display a block */
        margin: 20px auto; /* Centra el video horizontalmente */
        max-width: 100%; /* Ajusta el ancho máximo del video */
        height: auto; /* Mantiene la relación de aspecto */
    }

    .video-sobre-mi-vida video {
        width: 450px; /* Ajusta este valor según tus necesidades */
        height: auto; /* Mantiene la relación de aspecto */
    }
    
    nav ul li {
        display: block;
        margin: 10px 0;
        
    }
    body {   
        line-height: 1.2;
        font-size: 80%;
       
    }
    
    nav {   
        width: 100%; 
        
    }
    .logo img {
        height: 80px;
        width: 80px;
        margin-left: 20px;
    }

    nav ul {
        gap: 10px;
    }
    .imagen-destacada, .imagen-sobre-mi {
        width: 80%; /* Mayor tamaño para dispositivos pequeños */
    }

    .video-sobre-mi {
        max-width: 300px; /* Tamaño más pequeño en dispositivos móviles */
    }

    .contenedor-testimonios {
        display: flex;
        flex-wrap: wrap; /* Permite que los elementos se ajusten en filas */
        justify-content: space-around; /* Espacia los elementos uniformemente */
        margin: 0 -10px; /* Ajusta para compensar el espaciado extra de los elementos hijos */
    }
    
    .tarjeta-testimonio {
        width: 70%; /* Ajusta el ancho de cada tarjeta */
        margin: 10px; /* Espacio alrededor de cada tarjeta */
        background-color: #f8f2ff; /* Fondo lila claro, ajusta según tu esquema de color */
        border: 1px solid #d3bce3; /* Borde lila, ajusta según tu esquema de color */
        border-radius: 10px; /* Bordes redondeados */
        padding: 20px;
        width: calc(100% / 3 - 20px); /* Ajusta para tres tarjetas, restando el margen */
        margin: 10px; /* Mantén un poco de margen entre tarjetas */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave (opcional) */
    }

    .galeria img {
        width: 60%; /* Ajusta a tus necesidades */
        height: 60%; /* Mantiene la relación de aspecto */
        display: none; /* Oculta todas las imágenes inicialmente */
    }

   

    

    
    
}

@media (max-width: 460px) {
    .video-sobre-mi-vida {
        display: block; /* Cambia el display a block */
        margin: 20px auto; /* Centra el video horizontalmente */
        max-width: 100%; /* Ajusta el ancho máximo del video */
        height: auto; /* Mantiene la relación de aspecto */
    }

    .video-sobre-mi-vida video {
        width: 300px; /* Ajusta este valor según tus necesidades */
        height: auto; /* Mantiene la relación de aspecto */
    }
    
    .contenedor-testimonios {
        display: flex;
        flex-direction: column; /* Apila las tarjetas verticalmente */
        align-items: center; /* Centra las tarjetas horizontalmente si es necesario */
    }

    .tarjeta-testimonio {
        width: 300px; /* Las tarjetas ocupan más espacio en dispositivos móviles */
        margin: 10px auto; /* Ajusta el margen para centrar las tarjetas */
    }

    body {   
        line-height: 1.2;
        font-size: 65%;
       
    }

    .galeria img {
        width: 80%; /* Ajusta a tus necesidades */
        height: 80%; /* Mantiene la relación de aspecto */
        display: none; /* Oculta todas las imágenes inicialmente */
    }
    
}