body {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 16px; /* Tamaño de fuente base */
    line-height: 1.6; /* Espaciado entre líneas */
    color: #412871; /* Gris medio para un diseño elegante */
}

.blockquote {
    background: #FFFFFF;
    border-left: 15px solid #de3d33;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #000000;
}

.blockquote-footer {
    color: #FFFFFF;
    margin-top: 10px;
    font-size: 0.9rem;
    font-style: italic;
    background: linear-gradient(to bottom, #422a72);
}


.imagen-separada {
    width:400px;
    height:286px; 
    margin-left: 100px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: bold; /* Letras más gruesas para títulos */
    color: #412871; /* Azul acero oscuro */
    margin-bottom: 10px;
}
/* Estilo base de la imagen */
/* Estilo base de la imagen */
/* Estilo base de la imagen */
.efecto-imagen-degradado {
    border-radius: 20px; /* Esquinas redondeadas */
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Transición suave */
    position: relative;
    z-index: 0; /* Controla el nivel para manejar superposiciones */
    width: 100%; /* La imagen ocupa todo el ancho disponible */
    height: auto; /* Ajuste proporcional de la altura */
}

    /* Degradado al pasar el mouse */
    .efecto-imagen-degradado:hover {
        transform: scale(1.05); /* Aumenta ligeramente el tamaño */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
        z-index: 1;
    }

        /* Contenedor del efecto con degradado */
        .efecto-imagen-degradado:hover::before {
            content: "";
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            background: linear-gradient(45deg, #2A3F54, #4F83CC); /* Degradado azul acero */
            border-radius: 25px; /* Borde más redondeado */
            z-index: -1; /* Coloca el borde degradado detrás de la imagen */
            transition: opacity 0.4s ease; /* Transición suave para el borde */
            opacity: 1;
        }

/* Seccion de Redes Sociales */
.social-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    box-shadow: 0px 0px 15px #00000027;
    padding: 15px 10px;
    border-radius: 5em;
}

.social-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 10px;
    background-color: #fff;
    box-shadow: 0px 0px 4px #00000027;
    transition: 0.3s;
}

    .social-button:hover {
        background-color: #f2f2f2;
        box-shadow: 0px 0px 6px 3px #00000027;
    }

.social-buttons svg {
    transition: 0.3s;
    height: 20px;
}

.facebook {
    background-color: #3b5998;
}

    .facebook svg {
        fill: #f2f2f2;
    }

    .facebook:hover svg {
        fill: #3b5998;
    }

.tiktok {
    background-color: #000000;
}

    .tiktok svg {
        fill: #f2f2f2;
        width: 20px;
        height: 20px;
    }

    .tiktok:hover svg {
        fill: #000000;
    }


.instagram {
    background-color: #c13584;
}

    .instagram svg {
        fill: #f2f2f2;
    }

    .instagram:hover svg {
        fill: #c13584;
    }





@media (max-width: 768px) {
    .efecto-imagen-degradado {
        border-radius: 15px; /* Esquinas menos redondeadas en móvil */
    }

        .efecto-imagen-degradado:hover::before {
            border-radius: 20px; /* Ajusta el borde degradado en móvil */
        }

    .imagen-separada {
        width: 200px;
        height: 180px;
        margin-left: 70px;
        margin-bottom: 20px;
    }


    img.efecto-imagen-degradado {
        max-width: 100%; /* La imagen se ajusta al ancho del dispositivo */
        height: auto; /* Mantiene la proporción de la imagen */
    }
}