/* Importación de la fuente "Symphony Script - personal use" desde un proveedor externo */
@import url(https://db.onlinewebfonts.com/c/0ee67558ce9f1e5900b0579062ed114a?family=Symphony+Script+-+personal+use); 

/* Importación de la fuente "Montserrat" desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Importación de la fuente "Lovelyn" desde un CDN externo */
@import url('https://fonts.cdnfonts.com/css/lovelyn');

#titulo-amigos{
    
    text-align: center;
}
#texto-amigos {
    
    text-align: center;
    font-family: 'Montserrat', sans-serif; /* Cambia la fuente */
}
/* Contenedor principal */
.main-content {
    display: flex;
    gap: 100px;
    padding: 20px;
    align-items: stretch; /* Asegura que ambas columnas ocupen la misma altura */
}

/* Columna izquierda (Imagen grande) */
.column-left {
    flex: 0.8; /* Proporción relativa de ancho */
    display: flex;
    justify-content: flex-end; /* Mueve la imagen hacia la derecha */
    align-items: stretch; /* La imagen llenará la altura disponible */
    margin-left: 200px;
}
#titulo-bloque-amigos{
    font-family: 'Lovelyn', sans-serif; 
    font-size: 26px;
}

#parrafo-bloque{
    font-family: 'Montserrat', sans-serif; /* Cambia la fuente */
    font-size: 20px;
}




/* Imagen grande */
.image-large {
    width: 100%; /* Ajusta el ancho */
    height: 100%; /* La imagen ocupará toda la altura del contenedor */
    object-fit: cover; /* Asegura que la imagen se ajuste bien sin deformarse */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

/* Columna derecha (Bloques) */
.column-right {
    flex: 1.2; /* Proporción relativa de ancho */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espacia uniformemente los bloques */
    gap: 30px; /* Espaciado entre los bloques */
}

/* Bloques individuales */
.block {
    width: 100%; /* Ocupa todo el ancho disponible dentro de la columna */
    max-width: 400px; /* Limita el ancho máximo */
    background: #bdb0d9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column; /* Organiza contenido en vertical */
    align-items: center; /* Centra el contenido horizontalmente */
    gap: 5px; /* Espaciado entre elementos internos */
}

/* Títulos de los bloques */
.block h2 {
    font-size: 18px;
    font-weight: 600;
    color: #553159;
    margin-bottom: 10px;
}

/* Imagen pequeña en cada bloque */
.image-small {
    width: 200px; /* Imagen más grande para destacar */
    height: 150px;
    border-radius: 5%;
    object-fit: contain;
}

/* Texto en los bloques */
.block p {
    font-size: 14px;
    color: #333;
    text-align: center; /* Centrar texto */
}

/* Botón de los bloques */
.btn-link {
    padding: 10px 15px;
    background: #553159;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    transition: background 0.3s ease;
}

.btn-link:hover {
    background: #7D6AA6;
}