:root {
    --header-color: #ffffff;
    --footer-color: #1B2034;
    --logo-color: #df0d26;
    --texto-blanco: #F4F4F4;
    --texto-oscuro: #212529;
    --primary-color: #091970;
}

body {
    background-color: #F4F4F4;
    color: var(--texto-oscuro);
    font-size: 16px;
    line-height: 1.25;
}


/*#################*/
/*----- HEADER -----*/
header {
    background-color: rgba(0, 0, 0, 0.85);
}
header .website-m-layout {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}
header .encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
header a {
    text-decoration: none;
    color: var(--header-color);
}
header ul {
    margin: 0px;
    list-style: none;
    padding: 0px;
    display: flex;
}
header nav > ul > li {
    padding: 5px 15px;
    display: flex;
    align-items: center;
}
header nav > ul > li > a:hover {
    text-decoration: none;
    color: #c5c5c5;
}
header .website-logo {
    color: var(--logo-color);
    font-size: 1.6rem;
    width: 220px;
}


/*############################*/
/*----------- MAIN -----------*/
.x-hoja {
    width: 80%;
    margin: 0 auto;
}
.x-article {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.x-expandir-vertical {
    padding: 55px 0px 55px 0px;
}
.x-grid-col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.x-contenedor-img {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}
.x-contenedor-about {
    padding-left: 50px;
}
.x-about-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.x-catalogo-preview {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
}
.x-iptv-preview {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, 1fr);
}
.x-marca-preview {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
}

.x-catalogo-preview > .x-plataforma,
.x-marca-preview > .x-plataforma,
.x-iptv-preview > .x-plataforma {
    width: 100%;
    height: 100%;
}
.x-catalogo-preview > .x-plataforma img,
.x-marca-preview > .x-plataforma img,
.x-iptv-preview > .x-plataforma img {
    width: 100%;
}
.x-marca-preview > div {
    background-color: #ffffff;
    box-shadow: 0px 0px 7px 0px #c5c5c5;
}

.x-testimonios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.x-perfil-redondo {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.x-perfil-redondo > img {width: 100%;}


/*############################*/
/*----------- FOOTER -----------*/
footer {
    background-color: var(--footer-color);
    color: var(--header-color);
}
footer p {
    margin-bottom: 0.2rem;
}
footer ul {
    list-style-type: none;
    padding-left: 0rem;
    color: var(--header-color);
}
footer a {
    text-decoration: double;
    color: var(--header-color);
}
footer a:hover {
    text-decoration: underline;
    color: #c5c5c5;
}


/*############################*/
/*----------- GENERAL -----------*/
.bg-inicio {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)), url(/static/img/fondos/streaming-1.webp);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 550px;
    min-height: 550px;
    color: var(--header-color);
}
.bg-catalogo {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/static/img/fondos/hombre-viendo-servicio-streaming.webp);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--texto-blanco);
}
.bg-info-iptv {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/static/img/fondos/info-iptv-jovenes-amigos-divirtiendose.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    color: var(--texto-blanco);
}
.bg-afiliado {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/static/img/fondos/glenn-carstens-peters.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    color: var(--texto-blanco);
}
.x-card-link {
    background-color: white;
    padding: 30px;
    text-decoration: none;
    color: var(--texto-oscuro);
}
.x-img-icon {
    height: 40px;
}
.x-img-100 {
    width: 100%;
}
.x-whatsapp {
    background-color: #0D9816;
    overflow: hidden;
    border-radius: 50%;
    padding: 12px;
}
.x-email {
    background-color: #D54649;
    overflow: hidden;
    border-radius: 50%;
    padding: 12px;
}

.x-color-gris {background-color: rgba(28, 32, 53, 0.1);}

.x-d-flex-jc {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

.x-d-flex-jc-ac {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.x-grid-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.titulo-1 {font-size: 3rem;}
.titulo-2 {font-size: 2.5rem;}
.titulo-3 {font-size: 2rem;}
.titulo-4 {font-size: 1.5rem;}

.texto-1 {font-size: 1.8rem; /*28px*/}
.texto-2 {font-size: 1.5rem; /*24px*/}
.texto-3 {font-size: 1.3rem; /*20px*/}
.texto-4 {font-size: 1.1rem; /*18px*/}

.w-layout-60 {width: 60%;}
.h-layout-100 {height: 100%;}

.x-enviar-email {
    display: flex;
    border: 1px solid #ffffff;
    border-radius: 6px;
    padding: 4px;
}
.x-enviar-email input {
    width: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    color: #ffffff;
}
.x-btn {
    display: inline-block;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.x-btn-blanco {
    color: var(--footer-color);
    background-color: #ffffff;
    border-color: #ffffff;
}
.x-btn-rojo {
    color: #ffffff;
    background-color: var(--logo-color);
    border-color: var(--logo-color);
}
.x-btn-primary {
    background-color: var(--primary-color);
    color: white;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.x-form,
.x-form-afiliado {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
}
.x-form input {
    background-color: #f4f4f4;
    border: none;
    border-radius: 5px;
    padding: 0.9rem 0.7rem;
    width: 100%;
}


@media screen and (max-width: 1200px) {
    .x-catalogo-preview {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (max-width: 970px) {
    .x-hoja {
        width: 90%;
        margin: 0 auto;
    }
    .x-catalogo-preview {
        grid-template-columns: repeat(4, 1fr);
    }
    .x-article {
        width: 100%;
    }
    .x-iptv-preview {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 870px) {
    body {
        font-size: 14px;
    }
    .x-nav {
        display: block;
    }
    header .encabezado {
        flex-direction: column;
        height: auto;
    }
    .x-about-preview {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .x-contenedor-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .x-contenedor-about {
        padding-left: 0px;
        padding-top: 15px;
    }
}

@media screen and (max-width: 680px) {
    .x-hoja {
        width: 95%;
        margin: 0 auto;
    }
    .x-expandir-vertical{
        padding: 40px 0px 40px 0px;
    }
    .x-catalogo-preview {
        grid-template-columns: repeat(3, 1fr);
    }
    .x-grid-footer {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }
    .x-iptv-preview {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 550px) {
    .x-testimonios {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 20px;
    }
    header ul {
        flex-direction: column;
        align-items: center;
    }
    .x-form {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .x-form-afiliado {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}