*{ 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif; /* Or a similar clean sans-serif font */
}
.contanedor{ 
    display: block;
    max-width: 1800px;
    margin: 0 auto;
    height: 100%;
}    

.cont-p4{
    display: block;
    padding: 2rem 4rem;
}

header{
    display: block;
    height: 80vh;
    background: yellow;
    color: black;
    position: relative;
    & video{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;  
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }
    & picture{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;  
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;

        & img{
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
    & .cont-header{
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -70%);
        z-index: 2;
        text-align: center;

        & h1{
            font-size: clamp(1.4rem, 2.5vw, 3.5rem);
            color: white;
            margin-bottom: 3rem;
            text-shadow: 3px 6px 2px #000;
        }

        & button{
            padding: 1rem 2.5rem;
            background: #bd8e3e;
            border-radius: 12px;
            border:none;
            box-shadow: 3px 6px 22px 3px #3d3d3d;
            font-size: clamp(1rem, 2vw, 1.3em);

            & a{
                text-decoration: none;
                color: inherit;
            }
        }
    }
}

main{
    display: block;
}

.cont-grey{
    display: block;
    min-height: 50vh;
    height: 100%;
    background: #e6e6e6;
    color: #000;
}
.cont-white{
    display: block;
    min-height: 50dvh;
    height: 100%;
    background: white;
    color: #000;
}
.cont-white-grey{
    display: block;
    min-height: 50dvh;
    height: 100%;
    background: #c3c3c333;
    color: #000;
}
.cont-blackGrey{
    display: block;
    min-height: 50vh;
    height: 100%;
    background: #363636;
    color: #fff;
}

.cont-black{
    background: black;
}

/* sectionees */
.cont-tradea{
    background: url(../imagenes/secciones/seccion-fondo.jpg) no-repeat;
    background-size: 100% 100%, contain;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    min-height: 50dvh;
    position: relative;
    padding: 6rem 0rem;

    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, #000000, #000000b7, #000000b7, #000000);
        z-index: 1;
    }

    & .cont-Uno-title{
        text-align: center; margin: 2rem 0 0rem; color: #ffffff;
        position: relative;z-index: 3;

        & h1{
            font-size: clamp(2rem, 5vw, 3rem); /* Large, prominent title */
            color: #ffffff; /* Pure white for emphasis */
            margin-bottom: 10px;
            font-weight: bold;
        }

        & p{
            font-size: clamp(1.2rem, 2.5vw, 1.5rem); /* Medium, subtle description */
            color: #cccccc; /* Slightly lighter grey for description */
            margin-bottom: 1rem;
        }
    }

    & .cont-Uno{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 3;
    
        & .cont-Uno-text{
            width:100%;
            color: white;
            padding: 2rem 10rem;
            border-radius: 12px;
            display: grid;
            grid-template-rows: 1fr 1fr auto;
            gap: 4%;

            & .cont-Uno-text-top{
                padding: 4rem 3rem;
                background: #000000b7;
                border-radius: 12px;
                box-shadow: 0px 0px 7px -1px #ffffffa6;

                & h1{
                    font-size: clamp(2rem, 5vw, 2.5rem);
                    font-weight: bold;
                    padding-bottom: 1rem;
                }

                & p{
                    font-size: clamp(1rem, 2.5vw, 1.2rem);
                    line-height: 1.8rem;
                    font-weight: 100;
                    color: #ffffffbb;
                }
            }
            & .cont-Uno-text-bottom{
                padding: 4rem 3rem;
                background: #000000b7;
                border-radius: 12px;
                box-shadow: 0px 0px 7px -1px #ffffffa6;

                & h1{
                    font-size: clamp(2rem, 5vw, 2.5rem);
                    font-weight: bold;
                    padding-bottom: 1rem;
                }

                & ul{
                    list-style: none;
                    padding-left: 4rem;
                    margin: 0rem 0 1rem;
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    font-size: clamp(1rem, 2.5vw, 1.2rem);
                    line-height: 1.8rem;
                    font-weight: 100;
                    color: #ffffffbb;

                    & li{
                        font-size: 1em; 
                        color: #f0f0f0;
                        margin-bottom: 10px;
                        position: relative;
                        padding-left: 5px;   
                    }
                    & li::before {
                        content: '\2022'; /* Unicode for a solid bullet point */
                        color: #bd8e3e; /* A bright accent color for the bullet (e.g., light blue/cyan) */
                        font-weight: bold;
                        display: inline-block;
                        width: 1em;
                        margin-left: -1em;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                }
                & p{
                    font-size: clamp(1rem, 2.5vw, 1.2rem);
                    line-height: 1.8rem;
                    font-weight: 100;
                    color: #ffffffbb;
                }
                
            }
            & .cont-Uno-button{
                display: flex;
                justify-content: center;
                align-items: center;
                & a{
                    border: 1px solid #ffffff; padding: 0.75rem 2.25rem; border-radius: 6px;  color: white;
                    text-decoration: none;
                    width: fit-content;
                    margin: 1rem auto;
                    font-weight: bold;
                    font-size: clamp(1.5rem, 2vw, 1.5rem);
                    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
                    background: #000000b7;
                    &:hover{
                        background: #bd8e3e;
                        color: black;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

.cont-Dos-title{
    padding: 4rem 0rem 0rem;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'CDT-text CDT-Img';
    align-items: center;
    & .cont-Dos-title-text{
        grid-area: CDT-text;
        text-align: start;
        & h1{
            font-size: clamp(2rem, 5vw, 3.5rem);
            color: black;
        }
        & p{
            padding: 1.4rem 0;
        }
        & a{
            text-decoration: none;
            color: inherit;
            display: flex;
            justify-content: center;
            width: 100%;
            & span{
                background: #c3c3c3;
                padding: 1.15rem 3.25rem; border-radius: 6px;

            }

            & span:hover{
                background: #bd8e3e;
                color: black;
                cursor: pointer;
            }
        }
    }
    & .cont-Dos-title-img{
        grid-area: CDT-Img;
        padding: 1rem 3rem;
    }

}

.cont-Dos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    gap: 1.5rem;
    min-height: 50vh;
    padding: 2rem 0 4rem;

    & .Cont-Dos-Bloques{
        width: 100%;
        height: 100%;
        position: relative;
        padding: 2rem 1.5rem 1rem;
        border-radius: 40px;
        display: grid;
        grid-template-rows: 1fr auto 1fr;
        align-items: center;
        justify-content: center;
        text-align: center;
        transition: 0.3s ease-in-out;
        box-shadow: 0px 0px 0px 2px #ffffff;
        background: #ffffff55;

        & .CDB-icono{
            /* background: #979797; */
            /* border-radius: 50%; */
            width: 80px; height: 80px;
            margin: 0 auto;

            & img{
                width: 100%;
                height: 100%;
                object-fit: scale-down;
            }
        }
        
        & .CDB-text{
            color: black;
            padding: 0.5rem 0;
            font-weight: bold;
        }

        & p{
            color: #000000b7;
            text-align: center;
            font-size: clamp(0.8rem, 2vw, 1.1rem);
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            height: auto;
        }

        &:hover{
            background-color: #ffffff;
            box-shadow: 0px 0px 0px 2px #ffbb00;
            transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s all;
            cursor: pointer;
            transform: scale(1.01, 1.01);
        }
    }
}

.Cont-cuentas{
    padding: 3rem 0 5rem;
    
    & .cont-Tres-title{
        width: 100%; padding: 4rem 0 1rem 4rem; display: block; text-align: center;
        margin: 0 auto 2rem;
        & h1{
            font-size: clamp(2rem, 5vw, 3.5rem);
        }
    }
    
    & .cont-Tres{
        padding:2rem 0rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
        gap: 2%;
    
        & .cont-tres-Bloques{
            display: flex;
            justify-content:space-between;
            align-items:center;
            position:relative;
            flex-direction: column;
            background: #fff;
            padding: 4rem 0rem;
            border-radius: 12px;
            transition: 0.3s ease-in-out;
    
            & .ctb-text{
                font-size: clamp(1.5rem, 2vw, 1.5rem);
                transform: translate(4%, 15%);
                min-width: 30%;
                text-align: center;
                width: fit-content;
                padding: 0.75rem 3rem;
                color: #000;
                text-transform: uppercase;
                font-weight: bold;
                border-radius: 12px;
                transition: 0.3s ease-in-out;
                box-shadow: 0px 0px 4px 2px #363636;
                margin-bottom: 1.2rem;
                background: #bd8e3e;
                color:#ffffff;
                
            }
            
            & .ctb-context{
                height: fit-content;
                width: calc(100% - 2%);
                z-index: 2;
                padding: 1.5rem 0;
                font-size: clamp(1.5rem, 2vw, 1.5rem);
                border-radius: 0 0 12px 12px;
                opacity: 1;
    
                & ul{
                    list-style: none;
                    padding-left: 0;
                    & li{
                        padding: 1rem 3rem;
                        color: #ffbb00;
                        font-weight: bold;
                        transition: color 0.3s ease-in-out;
                        font-size: clamp(0.8rem, 2.2vw, 1.1rem);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background: #fff;
                        margin-bottom: 0.5rem;
    
                        & h5{
                            font-weight: bold;
                            color: #7e7e7e;
                            font-size: clamp(0.8rem, 2vw, 1.1rem);
                            margin-bottom: 0;
                            background: transparent !important;
                        }

                        & P{
                            padding: 0;
                            margin: 0;
                        }
                    }
                    & :nth-child(2n+1){
                        background: #c3c3c355;
                    }
                } 
            }

            .ctb-button{
                padding: 0.5rem 2.25rem;
                border-radius: 12px;
                border: 1px solid #000000;
                box-shadow: 0px 0px 0px 2px rgba(255, 255, 255);
                color: #000000;
                text-decoration: none;
                transition: 0.4s ease-in-out;
                
                & a{
                    text-decoration: none;
                    color: #000;
                    font-weight: bold;
                    font-size: clamp(1rem, 2vw, 1.1rem);
                }
            }           
            &:hover {
                background: #0000001f;
                transition: 0.3s ease-in-out;
                box-shadow: 0px 0px 0px 2px rgba(255, 255, 255);
                transform: scale(1.02, 1.02);

                & .ctb-text{
                    transform: translate(0, 0);
                    background: #bd8e3e;
                    color: #fff;
                }

                & .ctb-button{
                    background: #bd8e3e;
                    border: 1px solid #ffffff;
                    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255);
                    & a{
                        color: #fff;
                    }
                }
            }
        }
    }
}

.cont-Cuatro{
    position: relative;
    height: 70vh;
    background: linear-gradient(0deg, #000000, #363636);

    & .Cont-Cuatro-Content{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
        grid-template-rows: 1fr;

        & .Cont-Cuatro-Textos{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2;
            padding: 4rem 0;
            & .Cont-Cuatro-Title{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                & h1{
                    color: white;
                    font-size: clamp(2rem, 5vw, 3.5rem);
                }
            }

            & .Cont-Cuatro-contenido{
                padding: 0.75rem 1rem;
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
                gap: 2%;
                & li{
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    padding: 1rem 0.5rem;
                    background: #000000b7;
                    border-radius: 12px;
                    box-shadow: 0px 0px 7px -1px #ffffffa6;
                    text-align: center;
                    margin-bottom: 1.5rem;
                    & h3{
                        padding: 0.5rem 0 0.75rem;
                        color: #bd8e3e;
                        width: 100%;
                        border-bottom: 1px solid #c3c3c3;
                    }
                    & p{
                        width: 100%;
                    }
                }
            }

            & .Cont-Cuatro-button{
                border: 1px solid #ffffff;
                border-radius: 10px;
                & a{
                    text-decoration: none;
                    color: #fff;
                    padding: 0.75rem 2.25rem;
                    display: block;
                    border-radius: 10px;
                }
                & :hover{
                    cursor: pointer;
                    background: #bd8e3e;
                }
            }
        }
        
        & .Cont-Cuatro-Img{
            z-index: 1;
            border-radius: 24px;
            padding: 2rem 0.5rem;
            width: 100%;
            & picture{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                & img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    border-radius: 24px;
                }
            }
        }
    }
}

.Cont-Academy{
    padding: 3.5em 0; width: 100%;
    
    & .Cont-Academy-tradea{
        display:flex; 
        align-items: center; 
        flex-direction: column; 
        height: max-content; 
        width: 100%; 
        padding: 3em; 
        border-radius: 12px; 
        color:white; 
        background: linear-gradient(to right, transparent 0%, #0002033f 10%, #000000 30% 70%, #0002033f 90%, transparent 100%), url('../imagenes/plata/plata-2.jpg') no-repeat center/cover;

        & h1{
            font-size: clamp(1.5rem, 5vw, 3.5rem);
        }

        & a{
            max-width: fit-content; margin: 1rem auto 0; padding: 0.75rem 4.25rem; border-radius: 12px; border: 1px solid #ffffff; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255); color: #ffffff; text-decoration: none;
            font-size: clamp(1rem, 2vw, 1.5rem);
        }
    }
}

footer{
    align-items: center;
    height: 100%;
    background: #000000;
    color: white;
    padding: 4rem 0;

    & .cont-footer{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
        grid-template-areas: "cont-footer-left cont-footer-right";
        min-height: 50dvh;
        align-items: center;

        & .cont-footer-left{
            grid-area: cont-footer-left;
            display: grid;
            grid-template-rows: auto 1fr auto;
            padding: 2rem;
            & .cont-footer-left-logo{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 2rem;
                & picture{
                    width: 100%;
                    height: 100px;
                    display: flex;
                    justify-content: start;
                    & img{
                        width: 100%;
                        height: 100%;
                        aspect-ratio: 1/1;
                        object-fit: contain;
                    }
                }
                & .redesSociales{
                    width: 100%;
                    height: fit-content;
                    display: flex;
                    justify-content: end;
                    gap: 1rem;
                    margin: 0;
                    padding: 0;
                    & li{
                        list-style: none;
                        display: flex;
                        align-items: center;
                        transition: background 0.3s ease-in-out;

                        &:hover{
                            background: #bd8e3e;
                            border-radius: 12px;
                        }
                        & a{
                            color: white;
                            text-decoration: none;
                            transition: color 0.3s ease-in-out;
                            padding: 0.5rem;
                            &:hover{
                                color: #bd8e3e;
                            }
                            & img{
                                width: clamp(1.8rem, 2vw, 2.5rem);
                                height: clamp(1.8rem, 2vw, 2.5rem);;
                                aspect-ratio: 1/1;
                                object-fit: contain;
                            }
                        }
                    }
                }
            }
            & .cont-footer-left-direction{
                padding: 2rem 0;
                border-top: 1px solid #ffffff88;
                border-bottom: 1px solid #ffffff88;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
                grid-template-rows: 1fr;
                height: 100%;
                & a{
                    color: white;
                    transition: color 0.3s ease-in-out;
                    text-decoration: none;
                    &:hover{
                        color: #bd8e3e;
                    }
                }
                & .cont-footer-left-direction-left{
                    display: grid;
                    grid-template-rows: repeat(3, auto);
                    & ul{
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;
                        font-size: clamp(1.5rem, 2vw, 1.5rem);
                        font-weight: bold;
                        color: #bd8e3e;
                        height: fit-content;
                        margin-bottom: 1rem;
                        
                        & caption{
                            line-height: 1rem;
                            font-weight: bold;
                        }
                        & li{
                            font-size: clamp(1rem, 2vw, 1.5rem);
                            line-height: 1.5rem;
                            color: #ffffff88;
                            transition: color 0.3s ease-in-out;
                            padding: 0.7rem 0;
                            font-weight: normal;
                            display: flex;
                            flex-direction: column;
                            gap: 1rem;
                            &:hover{
                                color: white;
                            }
                        }
                    }   
                }
                & .cont-footer-left-direction-right{
                    display: grid;
                    grid-template-rows: repeat(2, auto);

                    & ul{
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;
                        font-size: clamp(1.5rem, 2vw, 1.5rem);
                        font-weight: bold;
                        color: #bd8e3e;

                        & caption{
                            line-height: 1.2rem;
                            font-weight: bold;
                            margin-bottom: 1rem;
                        }
                        & li{
                            font-size: clamp(1rem, 2vw, 1.2rem);
                            line-height: 1.5rem;
                            color: #ffffff88;
                            transition: color 0.3s ease-in-out;
                            padding: 0.7rem 0;
                            &:hover{
                                color: white;
                            }
                        }
                    }
                    & p{
                        font-size: clamp(1.2rem, 2vw, 1.4rem);
                        line-height: 1.5rem;
                        margin-bottom: 1.5rem;
                    }
                    & article{
                        padding: 0.75rem 2.20rem;
                        border: 1px solid #ffffff88;
                        height: fit-content;
                        width: fit-content;
                        &:hover{
                            background:#bd8e3e;
                            transition: background 0.3s ease-in-out;
                            cursor: pointer;
                        }
                    }
                }
            }
            & .cont-footer-left-contact{
                padding: 2rem 0;
                display: flex;
                justify-content: space-between;
                & a{
                    width: 100%;
                    color: white;
                    text-decoration: none;
                    transition: color 0.3s ease-in-out;
                    font-size: clamp(1.5rem, 2vw, 1.5rem);
                    font-weight: bold;
                    &:hover{
                        color: #bd8e3e;
                    }
                    & img{
                        width: clamp(1.8rem, 2vw, 2.5rem);
                        height: clamp(1.8rem, 2vw, 2.5rem);
                        aspect-ratio: 1/1;
                        object-fit: contain;
                    }
                }
            }
        }
        
        & .cont-footer-right{
            grid-area: cont-footer-right;
            box-shadow: 0px 0px 0px 2px #ffffff;
            padding: 3rem;
            height: fit-content;

            & input, textarea{
                width: 100%;
                padding: 1rem;
                border-radius: 0px;
                border: none;
                background: #ffffff48;
                color: white;
                resize: none;

            }
            & input::placeholder, textarea::placeholder{
                color: white;
            }
        }
    }
}

.cont-PiePagina{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    padding: 1.5rem 0rem;
    background: #585858;
    color: white;

    & .cont-PiePagina__Links{
        display: flex;
        justify-content: space-between;

        & a{
            width: fit-content;
            display: flex;
            gap: 1.5rem;
            text-decoration: none;
            padding: 0.2rem 1rem;
            color: white;
            background: transparent;
        }

        & .showPrivacyBtn{
            width: fit-content;
            display: flex;
            gap: 1.5rem;
            text-decoration: none;
            padding: 0.2rem 1rem;
            color: white;
            background: transparent;
            border: 0;
        }
    }
}

.dialog {
    width: 40%;
    transform: translate(70%, 100%);
    max-width: 1368px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    & h2{
        text-align: center;
        padding:1rem 0;
    }
    & .privacy-content{
        padding: 1rem;
        line-height: 1.8rem;
        & p{
            margin-bottom: 1rem;
            text-align:justify;
        }
    }
}

.dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.dialog-close {
    float: right;
    background: none;
    border: none;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    cursor: pointer;
    color: red;
    font-weight: bold;
    padding: 1rem 1rem 0 0;
}

@media (max-width: 1024px) {
    .contanedor{
        max-width: 900px;
        width: 100%;
    }

    .cont-Dos{
        grid-template-columns: repeat(auto-fit, minmax(35%, 1fr));
    }
    
    .Cont-cuentas {
        & .cont-Tres {
            grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
        }
    }
    
    .cont-tradea {
        & .cont-Uno {
            & .cont-Uno-text {
                padding: 2rem 3rem;
            }
        }
    }

    .cont-Cuatro {
        height: 100%;
        padding: 1rem 2rem;
        & .Cont-Cuatro-Content {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(2, auto);
            & .Cont-Cuatro-Img {
                & picture {
                    padding: 3rem;
                    & img {
                        width: 100%;
                    }
                }
            }
        }
    }

    .Cont-Academy{
        padding: 3.5em 2rem;
    }

    footer{
        padding: 2rem 1rem;
        & .cont-footer{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(2, auto);
            grid-template-areas: 'cont-footer-right' 'cont-footer-left';
        }
    }

}    

@media (max-width: 992px) {
    .contanedor{
        max-width: 800px;
        width: 100%;
    }

    .dialog{
        width: 90%;
        transform: translate(0px, 0px);
        margin: 2rem auto;
        padding: 0.5rem;
    }
}

@media (max-width: 768px) {
    .contanedor{
        max-width: 640px;
        width: 100%;
    }

    header {
        & .cont-header {
            width: 90%;
        }
    }

    .Cont-cuentas{
        padding-bottom: 3rem 0;
        & .cont-Tres{
            padding:2rem 1rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
            gap: 1%;
            & .cont-tres-Bloques{
                & .ctb-text {
                    font-size: clamp(1.2rem, 2vw, 2rem);
                }
                & .ctb-context {
                    transform: translate(0, 0);
                }
                & .ctb-button {
                    font-size: clamp(0.8rem, 2vw, 1.1rem);
                }
            }
        }

        & .cont-Tres-title {
            padding: 4rem 0 1rem;
            margin-bottom: 0rem;
            text-align: center;
        }
    }
}

@media (max-width: 480px) {
    .cont-p4{
        padding: 1rem;
    }

    .contanedor{
        max-width: 400px;
        width: 100%;
    }

    .cont-Uno{
        flex-direction: column;
    }

    .cont-Dos-title{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 'CDT-Img' 'CDT-text';
        padding: 2rem 0rem;

        & .cont-Dos-title-img{
            padding: 1rem;
        }
    }

    .cont-Dos{
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        & .Cont-Dos-Bloques{
            height: 100%;
            border-radius: 20px;
            padding: 0.25rem 1rem;
            grid-template-rows: auto 1fr auto;

            & .CDB-icono {
                width: 100px;
                height: 100px;
                padding: 1.5rem 1rem;
            }

            & .CDB-fondo {
                & img {
                    border-radius: 20px;
                }
            }
        }
    }

    .Cont-cuentas{
        .cont-Tres{
            & .cont-tres-Bloques{
                padding: 1.75rem 1rem;
                & .ctb-context {
                    /* transform: translate(0, 0); */
                    & ul {
                        & li {
                            padding: 1rem;
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }

    .cont-tradea {
        padding: 3rem 1rem;
        & .cont-Uno {
            & .cont-Uno-text {
                padding: 2rem 0rem;
                gap: 0%;
                grid-template-rows: repeat(3, auto);
                & .cont-Uno-text-top {
                    padding: 1.5rem;
                    margin-bottom: 1rem;
                    height: fit-content;
                    & h1 {
                        text-align: center;
                    }
                }
                & .cont-Uno-text-bottom {
                    padding: 1.5rem;
                    margin-bottom: 1rem;
                    height: fit-content;
                    & ul {
                        list-style: none;
                        padding-left: 2rem;
                    }
                }
            }
        }
    }

    .cont-Cuatro {
        height: 100%;
        padding: 1rem;
        & .Cont-Cuatro-Content {
            & .Cont-Cuatro-Textos {
                padding: 2rem 0rem;
                & .Cont-Cuatro-Title {
                    padding: 2rem 0rem 0;
                    text-align: left;
                }
                & .Cont-Cuatro-contenido {
                    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
                    padding: 0rem;
                    gap: 0%;
                }
            }
            & .Cont-Cuatro-Img {
                & picture {
                    padding: 0;
                    & img {
                        width: 100%;
                    }
                }
            }
        }
    }

    .Cont-Academy {
        padding: 3rem 1rem;
        & .Cont-Academy-tradea {
            padding: 3rem 1.2rem;
            & h1{
                padding: 1rem 0rem 1rem;
            }
        }
    }

    footer{
        & .cont-footer{
            & .cont-footer-left {
                padding: 3rem 0rem;
                & .cont-footer-left-logo {
                    flex-direction: column;
                    padding-bottom: 1rem;
                    & .redesSociales {
                        padding: 1.75rem 0 0;
                        justify-content: center;
                    }
                }
                & .cont-footer-left-direction {
                    padding: 1rem 0rem;
                    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
                    gap: 0%
                }

                & .cont-footer-left-contact {
                    padding: 1.5rem 0rem;
                    flex-direction: column;
                    gap: 1rem;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    & a {
                        display: flex;
                        justify-content: space-between;
                        font-size: clamp(1rem, 1.8vw, 1.3rem);
                    }
                }
            }

            & .cont-footer-right{
                padding: 1.5rem;
                box-shadow: 0px 0px 0px 2px #ffffff88;
            }

            & .footer-listas{
                flex-direction: column;
                text-align: center;
                padding: 1rem;
            }
        }
    }

    .cont-PiePagina{
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem 0rem;

        & .cont-PiePagina__Links{
            padding-top: 1rem;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }
}

@media (max-width: 320px) {
    .contanedor{
        max-width: 300px;
        width: 100%;
    }
}