/**
 * ===================================================
 * © 2025 YUYAY Ltda. - yuyay.fin.ec
 * Sistema: Pagína Web
 * Versión: 2.5
 * Desarrollador: [Leonardo Verdugo Crespo - Sistemas]
 * Última modificación: 24/06/2024
 * ===================================================
 */
main {
    margin-top: 100px;/* Ajusta este valor según la altura del header para evitar la superposición */
    padding: 90px;
}

.contenedor {
    
    background: var(--background-color);
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea los títulos a la izquierda */
    max-width: 1200px;
    margin: auto;
}


.contenido {
    max-width: 1200px;
    margin-top: 40px;
    padding: 40px 20px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 80px; /* Añade separación entre la tarjeta y la imagen */
}

/* Tarjeta para el texto */
.text {
    background: #f9f9f9;
    box-shadow: 0px 20px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 50px;
    width: 100%;
    max-width: 600px;
    min-height: 500px; /* Ajusta según sea necesario */
    margin-left: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Centrar el contenido verticalmente */
    align-items: flex-start;
    text-align: justify;
    height: 100%;
}

.text h2 {
    color: #004080;
    margin-top: 0px;

}

.contenido p {
    text-align: justify;
}

/* Estilos para la imagen */
.image__about {
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center; /* Centrar la imagen */
}

.image__about img {
    width: 100%; /* Aumentar el tamaño de la imagen */
    max-width: 400px;
    height: 100%;
    object-fit: cover;
    border-radius: 10px; /* Bordes redondeados para mejor apariencia */
}

  



            /* Video dentro de la tarjeta (proporción 9:16) */
            .tiktok-card iframe {
                width: 100%;
                height: 390px; /* Mayor altura para shorts/tiktoks */
                border-radius: 8px;
            }

            /*ESTILO DE VIDEOS DE TIKTOK*/
            /* Sección de TikToks */
            .tiktoks-recientes {
                max-width: 1500px;
                margin: auto;
                padding: 50px 20px;
                display: flex;
                flex-wrap: wrap;
                justify-content: center; /* Centrar videos */
                gap: 60px; /* Espaciado entre videos */
            }

            /* Tarjeta individual de TikTok */
            .tiktok-card {
                width: 220px; /* Ancho fijo */
                height: 390px; /* Altura fija */
                background: #fff;
                border-radius: 10px;
                box-shadow: 10px 40px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                position: relative;
            }

            /* Estilizar los videos */
            .tiktok-embed {
                width: 100% !important;
                height: 100% !important;
                border-radius: 10px;
            }

            /* Ocultar cualquier texto adicional de TikTok */
            .tiktok-embed section {
                display: none !important;
            }

            /* Contenedor del botón */
.ver-mas-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

/* Estilos del botón */
.ver-mas-btn {
    display: flex;
    align-items: center;
    background-color: #0464b4; /* Fondo negro tipo TikTok */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 25px;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0px 4px 10px rgba(62, 63, 62, 0.2);
}

/* Efecto hover */
.ver-mas-btn:hover {
    background-color: #ff0050; /* Color TikTok */
    transform: scale(1.05);
}

/* Icono de TikTok */
.tiktok-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}


.box__footer .logo img{
    width: 200px;
    height: 50px;

}

.box__footer .terms{
    max-width: 350px;
    margin-top: 20px;
    font-weight: 500;
    color: #7a7a7a;
    font-size: 18px;
    text-align: justify;
}