/* CUERPO PRINCIPAL */
main {
    background-color: var(--color-fondo);
    padding: 2rem 1rem;
    flex: 1;
    max-width: 93.75rem;    
    margin: 5rem auto 0; 
}


main section {
    display: block; 
    margin-block: 4rem;
    scroll-margin-top: 5.625rem;
}

main h1 {
    color: var(--color-texto);

}

main p {
    color: var(--color-texto);
}

@media (max-width: 48rem){
    main{
        padding: 1.25rem;
    }
}

@media (max-width: 48rem) {
    main {
        padding: 1rem;
        margin: 4rem auto 0;
    }
    
    main section {
        margin-block: 2rem;  /* REDUCIDO de 4rem */
    }
    
    h1 {
        font-size: 2rem;  /* 32px en lugar de 40px */
    }
    
    p {
        font-size: 1rem;  /* 16px en lugar de 20px */
    }
}

.title-decoration {
    display: block;
    height: 30px;      /* Altura fija para mantener la escala de los cuadros */
    margin-left: 0;    /* Asegura que no haya márgenes extra */
}

.diagonal-fade {
    width: 100%;           /* Ocupa todo el ancho disponible */
    max-width: 800px;      /* Pero no más de su tamaño original */
    height: auto;          /* Permite que la altura se ajuste */
    aspect-ratio: 800 / 30; /* Mantiene la proporción del viewBox original */

    /* Tu máscara actual */
    -webkit-mask-image: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;

    mask-image: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%);
    mask-repeat: no-repeat;
    mask-size: cover;
}



.destacada{
    color:var(--color-principal);
    font-weight: 700;
}