/* CSS para las nuevas clases */
.summary-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    margin-bottom: 30px;
}

.body-article {
    width: 100%;
    background: #f0f8f9;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: wrap;
}

.summary-image {
    max-height: 250px;
    width: auto;
    object-fit: contain;
}

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

    .summary-text p {
        font-size: 1.2em;
        margin: 10px 0;
        padding: 0 10px;
    }

.summary-button {
    /* background-color: #28a745; */
    color: orange;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 10px;
}

nav#push {
    /*border-bottom: 1px solid orange;*/
    border-bottom:initial;
}

.summary-button:hover {
    outline: 1px solid #71ff71;
}

.article-content {
    padding: 20px;
    margin: initial;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none; /* Oculto por defecto */
}

    .article-content h2 {
        color: #007bff;
        margin-top: 20px;
    }

    .article-content h3 {
        margin-top: 15px;
    }

    .article-content ol {
        margin-left: 20px;
        margin-top: 10px;
    }

header:after {
    background: initial !important;
}


.article-roofing {
    display: flex;
    flex-direction: column;
    width: 1000px;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    background: #ffa50017;
    margin: 5px;
    border: 1px solid #ffa07a8f;
    border-radius: 15px;
}


    .article-roofing header, .article-roofing main {
        width: 100%;
        padding: 5px;
    }

@media (max-width: 767px) {

    .article-roofing{
        width:100%;
        border:none;
        border-radius:0;
        
    }

    .summary-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px; /* Añadir padding */
        box-sizing:border-box;
    }

    .summary-image {
        max-height: 200px; /* Ajustar la altura de la imagen */
        width: 100%; /* Asegurar que la imagen ocupe todo el ancho */
        object-fit: contain; /* Ajustar la imagen para que cubra el área */
        margin-bottom: 10px; /* Añadir margen inferior */
        filter:drop-shadow(5px 5px 10px rgba(125, 125, 125, 0.9));
    }

    .summary-text {
        display: flex;
        flex-direction: column;
        margin-top: 5px;
        padding: 0 15px;
        /*width: 40%;*/
        box-sizing:border-box;

    }

        .summary-text p {
            font-size: 1rem; /* Aumentar el tamaño de la fuente */
            margin: 10px 0;
            padding: 0 10px;
            /*width: 100%;*/
            width: calc(100% - 20px);
            color: #333; /* Color del texto */
        }

    /* Ajustar el botón si es necesario */
    .summary-button {
        margin-top: 10px;
        padding: 10px 15px;
        background-color: #28a745; /* Cambiar color si es necesario */
        color: white; /* Color del texto del botón */
        border: none;
        cursor: pointer;
        border-radius: 5px; /* Bordes redondeados para el botón */
    }

    .contact-box {
        width:100%;
    }
}