/*
Theme Name: Desafío y Aventura
Theme URI: http://www.masterpol.es
Description: Desafío y Aventura
Author: Temujin.es | Jonatan Sandoval Alarcón
Author URI: https://www.temujin.es
Version: 1.0 - Simplificado
*/

:root {
    --rojo: #be0000;
    --gris: #333333;
    --gris_claro: #777777;
    --texto: #555555;
}
@font-face {
    font-family: 'fuente';
    src: url('fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'fuente';
    src: url('fonts/HarmonyOS_Sans_SC_Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'fuente';
    src: url('fonts/HarmonyOS_Sans_SC_Bold.ttf') format('truetype');
    font-weight: 600 700;
    font-style: normal;
}
@font-face {
    font-family: 'fuente';
    src: url('fonts/HarmonyOS_Sans_SC_Black.ttf') format('truetype');
    font-weight: 800 900;
    font-style: normal;
}


*{
    font-family: 'fuente', Arial, sans-serif;
    box-sizing:border-box;
}
h1, h2, h3, h4, h5, h6{
    color:var(--gris);
    margin:0;
    padding:0;
}
h1{
    float:left;
    margin-top:20px;
    font-size:36px;
    width:100%;
}
p{
    font-size:16px;
}
.wrap{
    max-width: 98dvw;
    margin:0 auto;
    width:1440px;
}

a{
    color:var(--rojo);
}

body{
    margin: 0;
    padding: 0;
    font-size:14px;
    box-sizing:border-box;
}

header{
    position:relative;
    float:left;
    width:100%;
    margin:0 auto;
    border-bottom: 5px solid var(--rojo);
    padding-top: 12px;
    
    .logo{
        box-sizing:border-box;
        float:left;
        position: relative;
        
        
        img{
            height: 40px;
            margin: 6px 0;
            &.assembled_in_europe{
                position:absolute;
                height: 12px;
                left:0;
                bottom: -26px;
            }
        }
    }
    .logo_tuv{
        float:left;
        margin-left: 12px;
        img{
            height: 40px;
            margin: 6px 0;
        }
    }

    nav{
        float:right;
        clear: right;
        ul{
            list-style:none;
            li{
                margin-left:12px;
                display:inline-flex;
                a{
                    text-decoration:none;
                    color:var(--gris);
                    text-transform:uppercase;
                    font-weight:bold;
                    font-size:16px;
                }
            }
        }
    }
    ul.lang-selector{
        float:right;
        clear:right;
        list-style:none;
        margin:0;
        padding:0;
        display:flex;
        align-items:center;
        gap:12px;
        li{
            display:inline-flex;
            a{
                display:inline-flex;
                opacity:0.5;
                transition:opacity .2s;
                &:hover{ opacity:1; }
                img{ height:20px !important; width:auto !important; border-radius:2px; }
            }
            &.current-lang a{ opacity:1; }
        }
    }
}

.main{
    float:left;
    width:100%;
    margin:0 auto;
    .placa_induccion{
        margin-bottom:40px;
        h2{
            float:left;
            clear:both;
            font-size:28px;
            padding-bottom:10px;
            margin-bottom:10px;
            border-bottom: 1px solid #ff0000;
        }
        h3{
            float:left;
            clear:both;
            font-size:24px;
            padding-bottom:12px;
            color:var(--gris_claro);
        }
        > div{
            margin:0;
            padding:0;
            &:first-child{
                height: 100%;
                padding:30px 20px;
            }
        }
        .planaflex26{
            margin-top:40px;
            float:left;
            width:100%;
            font-size:24px !important;
            color:var(--texto);
            p{
                font-size:24px !important;
            }
        }
        figure{
            position: relative;
            margin-left:-100px;
            &::after{
                content: '';
                position: absolute;
                inset: 0 60% 0 0;
                background: linear-gradient(to right, white, transparent);
                pointer-events: none;
            }
        }
    }

    .etiquetas{
        padding: 0 20px;
        gap:0;
    }

    .descubre_plana{
        margin:40px auto;
        > div:first-child{
            padding-left:0;
            height:100%;
        }
        h2{
            clear:both;
            font-size:28px;
            padding-bottom:10px;
            margin-bottom:10px;
            border-bottom: 1px solid #ff0000;
        }
        p{
            font-weight:500;
            padding:0;
            float:left;
            width:100%;
            clear:both;
            font-size: 18px;
            color: var(--texto);
            line-height:1.5;
        }
    }

    .pg2026_flex{
        margin:24px auto 32px;
        width: 720px;
        max-width: 96dvw;
        font-weight:500;
        clear:both;
        font-size: 18px;
        color: var(--texto);
        line-height:1.5;
    }
    hr.wp-block-separator{
        margin: 16px auto;
        max-width: 500px;
        color: #ccc;
        border-top:1px solid;
    }
    .contacta_info{
        font-size:24px;
        font-weight: 600;
    }

}

footer{
    float:left;
    margin-top:60px;
    width:100%;
    background-color:var(--gris);
    padding:40px 0;
    .wrap{
        > div{
            margin:0 auto;
            display:inline-flex;
            gap:40px;
            width: 100%;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-content: flex-end;
            align-items: flex-end;
            a{
                text-decoration:none;
                color:white;
                font-size:16px;
            }
            .menu_inferior{
                display:inline-flex;
                gap:20px;
                ul{
                    display:inline-flex;
                    gap:20px;
                    margin: 0;
                    padding: 0;
                }
                li{
                    list-style:none;
                }
                a{
                    font-size:16px;
                }
            }
            .rrss{
                display:inline-flex;
                gap:20px;
                a{
                    i{ font-size:20px }
                }
            }
            .logo{
                img{
                    height:40px;
                }
            }
        }
    }
}

.under_construction{
    font-size:24px;
    color:var(--texto);
    text-align:center;
    img{
        margin-top:40px;
        height:120px;
        clear:both;
    }
}