* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}

@media (max-width: 834px) {
    * {
        font-size: 12px;
    }
}

:root {
    /*--fonts*/
    --font-principal: "Poppins", sans-serif;
    --font-secundary: "Geist", sans-serif;
    /*--color fonts*/
    --font-color-primary: #fff;
    /*--backgrounds*/
    --body-bg-color: #010409;
    --widget-bg-color: #0d1117;
    --lines-color: #2f353d;
    /*--background buttons*/
    --btn-bg-purple: #ab05f8;
    --btn-bg-purple-hover: #e300f8;
    --btn-bg-green: #238636;
    --btn-bg-green-hover: #1ca738;
}

/*Fonts

.afacad-flux-<uniquifier> {
  font-family: "Afacad Flux", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;

    Poppins", sans-serif
}*/

html {
    scroll-behavior: smooth;
}
body {
    color: #fff;
    background-color: var(--body-bg-color);
}

body.variant-mkt {
    color: #000;
    background-color: #faf7fa;
    display: flex;
}

#root {
    width: calc(100vw - 350px);
    height: auto;
}

.noscroll {
    overflow: hidden;
}

header {
    width: 100%;
    height: 80px;
    margin-top: 10px;
}

header.landing-mkt {
    display: none;
}

section {
    width: 100%;
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}
.cmedia {
    max-width: 1165px;
    height: auto;
    padding-left: 5vw;
    padding-right: 5vw;
    margin: auto;
}
main {
    width: 100%;
    min-height: calc(100vh - 200px);
    height: auto;
}

main.mkt {
    max-width: 768px;
    min-height: 100vh;
    padding-top: 30px;
}

aside.main-mkt {
    min-width: 350px;
    height: calc(100vh - 10px);
    position: sticky;
    top: 10px;
    padding: 15px;
    border-right: 1px solid #40224e;
}

@media (max-width: 834px) {
    #root {
        width: 100vw;
    }

    main.mkt {
        min-height: calc(100vh - 90px);
    }

    header.landing-mkt {
        display: block;
    }

    aside.main-mkt {
        display: none;
    }
}

a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
    font-size: 1rem;
}
button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.btn-type-1 {
    background-color: #ffd500;
    color: #18181b;
    padding: 10px 20px;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 60px;
}

.btn-type-2 {
    background-color: var(--btn-bg-purple);
    color: #fff;
    padding: 10px 20px;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
}

.btn-type-3 {
    background-color: #552e68;
    color: #fff;
    padding: 10px 20px;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
}

.btn-type-1:hover {
    border-left: 4px solid rgb(255, 123, 0);
    border-bottom: 4px solid rgb(255, 123, 0);
}

.btn-type-2:hover {
    background-color: var(--btn-bg-purple-hover);
}

.btn-type-3:hover {
    background-color: #7b4296;
}

.btn-addon-type-1 {
    margin-left: 1.5rem;
}

.btn-addon-type-2 {
    border-radius: 60px;
}

.btn-addon-type-2-v1 {
    border-radius: 60px;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.btn-addon-2-type-2 {
    font-size: 1.2rem;
    padding: 10px 35px;
}

.btn-addon-disable {
    opacity: 0.5;
}

header .cmedia {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

/*--------   menu   -----------*/

a.head-logo,
a.head-logo-mkt {
    width: auto;
    height: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0px;
    text-decoration: none;
    color: #fff;
}

#btn_contratar {
    display: none;
}

.head-logo img.icon-logo {
    display: none;
    height: 100%;
}

.head-logo img.logotipo {
    height: 60%;
}

.head-logo-mkt img.logotipo-mkt {
    height: 60%;
}

header button {
    display: none;
    color: #fff;
    width: 52px;
    height: 52px;
    cursor: pointer;
    border: none;
}

header button i {
    color: #fff;
    font-size: 2rem;
}

header button.bars.gray i {
    color: #999999;
}

.menubox {
    width: 80%;
    height: 80px;
    display: flex;
    justify-content: flex-end;
}

.menubox ul {
    width: 100%;
    height: auto;
    display: flex;
    list-style: none;
    justify-content: flex-end;
    align-items: center;
}

.menubox ul.menu-mkt {
    display: none;
}

.menubox ul li {
    display: inline-block;
    line-height: 40px;
    position: relative;
    text-align: center;
}

.menubox ul li a {
    color: #fff;
    font-size: 1rem;
    padding: 0px 20px;
    text-decoration: none;
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    white-space: nowrap;
}

.menubox ul li canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 5px;
    background-color: #fff;
    transition: all 0.5s;
}

.overlay-menu {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 7;
}

@media (max-width: 834px) {
    header {
        height: 60px;
    }

    header .btn-box-contratar {
        position: absolute;
        top: 10px;
        right: 60px;
        height: 60px;
        display: flex;
        align-items: center;
    }

    a.head-logo {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 1px solid #9999;
        padding: 5px;
        justify-content: center;
        background-color: var(--body-bg-color);
    }

    a.head-logo img.icon-logo {
        display: block;
    }

    a.head-logo img.logotipo {
        display: none;
    }

    .head-logo img {
        height: 100%;
    }

    .head-logo-mkt img.logotipo-mkt {
        height: 80%;
    }

    header button.main {
        display: block;
        position: absolute;
        top: 10px;
        right: 0;
        z-index: 100;
    }

    header button.bars {
        display: block;
        position: absolute;
        top: 10px;
        right: 0;
        z-index: 100;
    }

    .menubox {
        position: absolute;
        background: #292b38;
        top: 0;
        right: 0;
        width: 0;
        overflow: hidden;
        height: 100vh;
        transition: all 500ms ease;
        margin-right: 0;
        z-index: 99;
    }

    .menubox.variant-1 {
        background-color: #7e0ab4;
    }

    .menubox ul {
        width: 100%;
        height: auto;
        background: #292b38;
        justify-content: flex-start;
        flex-direction: column;
        margin-top: 60px;
    }

    .menubox.variant-1 ul {
        background-color: #7e0ab4;
    }

    .menubox ul.menu-mkt {
        display: flex;
    }

    .menubox ul li {
        text-align: left;
        width: 100%;
    }

    .menubox ul li a {
        font-size: 1.3rem;
    }
}

/*----------------- FORMS STYLE -------------------*/

.logotipo-login {
    width: 60px;
    height: auto;
    margin: auto;
    margin-bottom: 6px;
}

.logotipo-login img {
    width: 100%;
    height: auto;
}

h3.brand-login {
    font-family: var(--font-principal);
    font-weight: 600;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

form {
    padding: 2rem;
    background-color: var(--widget-bg-color);
    border-radius: calc(0.5rem - 2px);
    border: 1px solid var(--lines-color);
}

form .grupo-input {
    width: 100%;
    margin-bottom: 1rem;
}

form label {
    display: block;
    font-family: var(--font-principal);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

input,
select {
    width: 100%;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    background-color: transparent;
    border: 2px solid var(--lines-color);
    color: var(--font-color-primary);
    background-color: var(--body-bg-color);
    font-size: 0.85rem;
    padding: 0.5rem;
    border-radius: calc(0.5rem - 2px);
}

input:focus {
    outline: none;
    border: 2px solid #13aaf5;
}

button[type="submit"] {
    margin-top: 1.5rem;
    width: 100%;
    font-weight: 500;
    background-color: var(--btn-bg-green);
    color: var(--font-color-primary);
    font-family: var(--font-principal);
    font-size: 0.9rem;
    padding: 0.45rem;
    border-radius: calc(0.5rem - 2px);
}

/*--------FORM LOGIN ------*/

form.login {
    width: 300px;
    margin: auto;
}

/*---------------- SECTION PORTADA -------------------*/

section.portada {
    padding-top: 100px;
}

.portada-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section.portada h1 {
    font-family: "Poppins", sans-serif;
    font-size: 3rem;
    font-weight: 600;
    line-height: 3rem;
    margin-bottom: 1rem;
}

section.portada h1 span {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: #e2e2e2;
}

section.portada .contenido {
    width: 70%;
    position: relative;
}

section.portada .buttons {
    margin-top: 40px;
}

section.portada img.image-portada {
    width: 25%;
    height: auto;
}

@media (max-width: 1024px) {
    section.portada {
        padding-top: 0;
    }
    .portada-container {
        flex-direction: column-reverse;
    }

    section.portada h1 {
        text-align: center;
    }
    section.portada img.image-portada {
        margin-bottom: 2.2rem;
    }

    section.portada .buttons {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    section.portada .contenido {
        width: 90%;
    }

    .portada-container h1.title-cotizador {
        text-align: left;
    }

    section.portada img.image-portada {
        width: 40%;
    }

    section.portada h1 {
        font-size: 2.5rem;
    }
}

/*--------------------- SECTION SERVICIOS -------------------*/

section.servicios .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

section.servicios .card-grid .card {
    width: 100%;
    height: auto;
    border-radius: 20px;
    aspect-ratio: 1/0.5;
    padding: 20px;
    position: relative;
    border: 2px solid #18181b;
}

section.servicios .card-grid .card:hover {
    border: 2px solid #838383;
}

section.servicios .card-grid .card-jade {
    background-image: url("../img/bg-jade.png");
    background-repeat: no-repeat;
    background-size: cover;
}

section.servicios .card-grid .card-purple {
    background-image: url("../img/bg-purple.png");
    background-repeat: no-repeat;
    background-size: cover;
}

section.servicios .card-grid .card-blue {
    background-image: url("../img/bg-blue.png");
    background-repeat: no-repeat;
    background-size: cover;
}

section.servicios .card-grid .card:nth-child(2n) {
    transform: translateY(80px);
}

section.servicios .card h2 {
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2rem;
    margin-bottom: 1.2rem;
    color: #fff;
}

section.servicios .card p {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
}

section.servicios .card span {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: #ffd500;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    section.servicios {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    section.servicios .card-grid {
        grid-template-columns: 350px;
    }

    section.servicios .card-grid .card:nth-child(2n) {
        transform: translateY(0);
    }
}

@media (max-width: 440px) {
    section.servicios .card-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

/*--------------- SECTION ACCESO -------------------*/

section.acceso .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

section.acceso .item {
    padding: 20px;
    background-color: var(--widget-bg-color);
}

section.acceso .item .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1.5rem;
}

section.acceso .item .icon-purple {
    width: 50px;
    height: 50px;
    border: 2px solid #b851e8;
    background-color: #40224e;
    border-radius: 5px;
    margin-right: 1.5rem;
}

section.acceso .item h2 {
    font-family: var(--font-principal);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2rem;
    color: #fff;
}

section.acceso .item p {
    color: #ffd500;
    font-family: var(--font-principal);
    font-weight: 500;
    font-size: 1rem;
}

section.acceso .item .button-container {
    width: 100%;
    aspect-ratio: 1/0.5;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    section.acceso .card-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 250px);
    }

    section.acceso .item p {
        font-size: 1.1rem;
    }

    section.acceso .item .button-container {
        aspect-ratio: auto;
        margin-top: 3rem;
    }
}

/*---------------- ICONOS & ADDONS PAGE SECTIONS -----------------------*/

.icon-portada {
    position: absolute;
    top: 0;
    left: calc(-50px - 1.5rem);
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-right: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-portada-min {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-right: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

img.icon-sections {
    width: 80%;
    height: auto;
}

img.icon-sections-height {
    height: 60%;
    width: auto;
}

.icon-portada-addon-yellow {
    border: 2px solid #eebd53;
    background-color: #4e4022;
}

.icon-portada-addon-purple {
    border: 2px solid #b851e8;
    background-color: #40224e;
}

.icon-portada-addon-cian {
    border: 2px solid #13aaf5;
    background-color: #084359;
}

@media (max-width: 1024px) {
    .icon-portada {
        display: none;
    }
}

/*---- ADDONS PORTADA ------*/

.addon-sections-portada {
    /*background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 70%,
        rgba(12, 12, 15, 1) 100%
    );*/
    margin-bottom: 3rem;
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .addon-sections-portada {
        margin-bottom: 0;
    }
}

/*---------------- PAGE SECTIONS SERVICIOS ----------------------*/

section.sections-info .flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

section.sections-info img {
    width: 35%;
}

section.sections-info .grid {
    width: 55%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 3.5rem;
}

section.sections-info .item h2 {
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6rem;
    margin-bottom: 1.2rem;
    color: #fff;
}

section.sections-info .item p {
    font-family: "Roboto", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #ccc;
}

@media (max-width: 576px) {
    section.sections-info img {
        display: none;
    }

    section.sections-info .grid {
        width: 100%;
    }
}

/*----------- BORDER SECTION END ---------------*/

section.end-section {
    padding-top: 0;
    max-width: 1250px;
    height: 80px;
    margin: auto;
    border-radius: 70px;
}

.end-section-addon-yellow {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 40%,
        rgba(78, 64, 34, 1) 100%
    );
    border-bottom: 2px solid #eebd53;
}

.end-section-addon-purple {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 40%,
        rgba(64, 34, 78, 1) 100%
    );
    border-bottom: 2px solid #b851e8;
}

.end-section-addon-cian {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 40%,
        rgba(8, 67, 89, 1) 100%
    );
    border-bottom: 2px solid #13aaf5;
}

/*-------------------- COTIZADOR -----------------------*/

.grid-cotizador.cmedia {
    padding-left: 0;
    padding-right: 0;
}

.grid-cotizador {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.grid-cotizador .item {
    border: 1px solid var(--lines-color);
    background-color: var(--widget-bg-color);
    padding: 1.5rem;
    aspect-ratio: 1/1.05;
}

.grid-cotizador .item .imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1/0.5;
}

.grid-cotizador .item .imagen img {
    height: 40%;
    width: auto;
}

.grid-cotizador .item h3 {
    font-family: "Poppins", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2rem;
    margin-bottom: 1.2rem;
    color: #fff;
}

.grid-cotizador .item p {
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #ccc;
}

.grid-cotizador .item-addon-web:hover {
    border: 1px solid #ffd500;
}

.grid-cotizador .item-addon-marketing:hover {
    border: 1px solid #b851e8;
}

.grid-cotizador .item-addon-branding:hover {
    border: 1px solid #13aaf5;
}

@media (max-width: 1024px) {
    .grid-cotizador.cmedia {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

@media (max-width: 834px) {
    .grid-cotizador {
        grid-template-columns: 1fr;
    }

    .grid-cotizador .item {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        aspect-ratio: auto;
    }

    .grid-cotizador .item .imagen {
        aspect-ratio: auto;
        width: 20%;
        height: 100%;
    }

    .grid-cotizador .item .imagen img {
        height: 30px;
        width: auto;
    }

    .grid-cotizador .item p {
        font-size: 0.9rem;
    }
}

/*-------------------- COTIZADOR OPCIONES ------------------*/

span.title-indicaciones {
    color: #fff;
    display: block;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.grid-cotizador-opciones {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.5rem;
}

.grid-cotizador-opciones label {
    display: block;
    width: 100%;
    padding: 1rem;
    background-color: var(--widget-bg-color);
    border: 1px solid var(--lines-color);
    cursor: pointer;
    position: relative;
}

.grid-cotizador-opciones label .flex {
    display: flex;
}

.grid-cotizador-opciones label:hover {
    border: 1px solid #b851e8;
}

.grid-cotizador-opciones input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.grid-cotizador-opciones .checkmark {
    position: absolute;
    top: 1.6rem;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #999;
    transform: translateX(70%);
    border-radius: 50%;
    border: 1px solid #fff;
}

.grid-cotizador-opciones input:checked ~ .checkmark {
    background-color: #b851e8;
}

.grid-cotizador-opciones label span.text {
    display: block;
    margin-left: 3rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 1.2rem;
    transform: translateY(-10px);
}

.grid-cotizador-opciones label p {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: #ccc;
    font-size: 1rem;
    margin-left: 3rem;
    margin-top: 5px;
}

.grid-cotizador-opciones .buttons {
    display: flex;
    justify-content: center;
}

@media (max-width: 834px) {
    .grid-cotizador-opciones .checkmark {
        transform: translateX(50%);
    }
}

/*---------------------- SECTION PORTAFOLIO ------------------*/

section.section-portafolio .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

section.section-portafolio .title-box .title {
    display: flex;
    align-items: center;
}

section.section-portafolio .title h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: #fff;
}

section.portafolio-web .grid-web {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.5rem;
}

section.portafolio-web .grid-web .item {
    display: flex;
    flex-wrap: wrap;
}

section.portafolio-web .item .imagen {
    width: 60%;
    padding: 15px;
    background-color: #141414;
    border: 2px solid #303030;
    border-bottom: none;
}

section.portafolio-web .item .imagen img {
    width: 100%;
    height: auto;
}

section.portafolio-web .item .imagen span.sitio {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1rem;
}

section.portafolio-web .item .imagen span.url {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #ccc;
}

section.portafolio-web .item .contenido {
    width: 40%;
    padding: 3rem;
    background-color: #212121;
    border: 2px solid #303030;
}

section.portafolio-web .item .contenido h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

section.portafolio-web .item .contenido p {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #ccc;
}

section.portafolio-web .item .buttons {
    margin-top: 1.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 680px) {
    section.portafolio-web .item .imagen,
    section.portafolio-web .item .contenido {
        width: 100%;
    }
}

/*-- section portafolio marketing --*/

section.portafolio-mkt {
    margin-top: 2rem;
}

section.portafolio-mkt .container {
    width: 100%;
    height: auto;
    margin-top: 1.5rem;
}

section.portafolio-mkt .container span.title {
    display: block;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

section.portafolio-mkt .grid-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 1.5rem;
}

section.portafolio-mkt .grid-images img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 12px;
}

.image-popup {
    position: fixed;
    overflow: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    animation: 500ms fadeIn;
    display: none;
    align-items: center;
    justify-content: center;
}

.image-popup img {
    width: 40vw;
    height: auto;
}

.image-popup .content {
    position: relative;
}

.image-popup span.close-content i {
    position: absolute;
    top: 0;
    right: -45px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 680px) {
    section.portafolio-mkt .grid-images {
        grid-template-columns: repeat(2, 1fr);
    }
    .image-popup img {
        width: 100vw;
    }
    .image-popup span.close-content i {
        right: 20px;
        top: -35px;
    }

    .image-popup span.close-popup i {
        display: block;
    }
}
/*------------------- FOOTER -----------------------------*/

footer {
    min-height: 120px;
    padding-bottom: 30px;
    padding-top: 15px;
}

.cmedia-footer {
    max-width: 1250px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

footer ul.menu-footer {
    width: calc(100% - 100px - 1.5rem);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

footer ul.menu-footer li {
    list-style: none;
    padding: 10px 2rem;
}

footer ul.menu-footer a {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #ccc;
    white-space: nowrap;
}

.box-redes-container {
    width: 100px;
    height: auto;
}

.box-redes-container span {
    display: block;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #ccc;
    width: 100%;
    text-align: right;
}

.box-redes-container .box-redes {
    display: flex;
    justify-content: flex-end;
}

.box-redes-container a {
    color: #ccc;
    margin-left: 8px;
}

.box-redes-container a i {
    font-size: 1.2rem;
}

@media (max-width: 1250px) {
    .cmedia-footer {
        padding-right: 5vw;
    }
}

@media (max-width: 576px) {
    footer ul.menu-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*-------------------HEADER MKT -------------------*/

#btn_back {
    height: 80%;
    width: auto;
    margin-right: 8px;
    display: none;
    align-items: center;
}

#btn_back i {
    font-size: 2rem;
}

/*------------------ LANDING MKT ------------------*/

section.section-landmkt {
    padding-top: 0;
    padding-bottom: 0;
}

section.section-landmkt .cmedia {
    max-width: 100%;
}

section.section-landmkt:nth-child(2n) {
    padding-bottom: 30px;
}

.image-box-component img {
    width: 100%;
}

.image-box-component {
    width: 100%;
}

section.section-landmkt .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

section.section-landmkt .title-box .title {
    display: flex;
    align-items: center;
}

section.section-landmkt .icon-size {
    width: 35px;
    height: 35px;
    margin-right: 1.2rem;
}

section.section-landmkt .title span {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #40224e;
}

section.section-landmkt .container-flex {
    padding-top: 1.2rem;
    width: 100%;
}

section.section-landmkt .container-flex.variant-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section.section-landmkt .container-flex h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.65rem;
}

section.section-landmkt .container-flex span {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    color: #40224e;
}

section.section-landmkt .container-flex p {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.5rem;
    color: #40224e;
}

section.section-landmkt .container-flex .image-box {
    width: 450px;
}

section.section-landmkt .container-flex img.banner {
    width: 100%;
}

section.section-landmkt .container-flex span.variant-title {
    font-weight: 700;
    font-size: 1.4rem;
}

section.section-landmkt .container-flex span.variant-title.variant-1 {
    display: block;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 1.2rem;
}

section.section-landmkt .container-flex.variant-2 .container {
    min-width: 445px;
    margin-right: 1.5rem;
}

section.section-landmkt .container-flex.variant-2 .container {
    min-width: 100%;
}
section.section-landmkt .container-flex.variant-2 {
    display: block;
}

section.section-landmkt .container-flex.variant-2 a {
    display: none;
}

section.section-landmkt .container-flex.variant-2 .container {
    margin-bottom: 1.3rem;
    margin-right: 0;
}

section.section-landmkt .container-flex.variant-2 .image-box {
    display: block;
    margin: auto;
}

section.section-landmkt .container-flex span.variant-title {
    text-align: center;
    font-size: 1.7rem;
    margin-top: 0.5rem;
}

section.section-landmkt .container-flex p {
    text-align: center;
}

@media (min-width: 834px) {
    section.section-landmkt .container-flex h2 {
        font-size: 1.8rem;
        line-height: 1.65rem;
    }

    .image-box-component {
        display: none;
    }

    section.section-landmkt .container-flex span {
        font-size: 1rem;
    }
    section.section-landmkt .container-flex p,
    section.section-landmkt .container-flex span.variant-title {
        font-size: 1.2rem;
    }

    section.section-landmkt .container-flex p {
        text-align: left;
    }

    section.section-landmkt .container-flex.variant-2 .image-box {
        margin: 0;
    }

    section.section-landmkt .container-flex.variant-1 a {
        display: none;
    }

    section.section-landmkt .container-flex.variant-2 a {
        display: block;
    }
}

@media (max-width: 576px) {
    section.section-landmkt .title-box {
        display: none;
    }

    section.section-landmkt .container-flex .image-box {
        width: 100%;
    }
}

@media (max-width: 375px) {
    section.section-landmkt .container-flex h2 {
        font-size: 1.7rem;
        line-height: 1.45rem;
    }
}

/*------ ASIDE MAIN-MKT (MENU) --------------*/

nav.main-mkt,
nav.main-mkt ul {
    width: 100%;
}

nav.main-mkt ul li {
    list-style: none;
    width: 100%;
    height: 40px;
    padding-left: 1.5rem;
    border-radius: 8px;
}

nav.main-mkt ul li:hover {
    background-color: #d9cede;
}

nav.main-mkt ul li:last-child {
    border: 1px solid #552e68;
    margin-top: 0.85rem;
}

nav.main-mkt ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-principal);
    font-weight: 400;
    font-size: 0.9rem;
}

nav.main-mkt ul li.active {
    background-color: #40224e;
}

nav.main-mkt ul li.active a {
    color: #fff;
}

/*----- TABS SERVICES LANDINGMKT -----*/

section.section-tabs-services {
    padding-top: 0;
}

.section-tabs-services .wrapper {
    width: 100%;
    height: auto;
}

.section-tabs-services .tabs {
    width: 100%;
    height: auto;
    margin-top: 30px;
    font-size: 15px;
    padding: 0px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    position: relative;
    /*overflow-x: scroll;*/
    scroll-behavior: smooth;
}

.section-tabs-services .tabs button {
    background-color: transparent;
    outline: none;
    cursor: pointer;
    color: #552e68;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
    /*transition-duration: 0.35s;*/
    width: 23%;
    border: 1px solid #552e68;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 12px;
    margin-bottom: 15px;
    text-align: center;
}

.section-tabs-services .tabs button:hover {
    outline: 1px solid #40224e;
}

.section-tabs-services .tabs button.active {
    color: #fff;
    background-color: #552e68;
}

.section-tabs-services .tabs button i {
    margin-right: 5px;
}

/* webkit Firefox */

.section-tabs-services .tabs {
    scrollbar-width: thin;
    scrollbar-color: gray--lighter transparent;
}

.section-tabs-services .tabs:-webkit-scrollbar {
    width: 11px;
}

.section-tabs-services .tabs:-webkit-scrollbar-track {
    background: transparent;
}

.section-tabs-services .tabs:-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 3px solid transparent;
}

/* webkit browsers */
.section-tabs-services .tabs::-webkit-scrollbar,
.section-tabs-services .tabs::-webkit-scrollbar-thumb {
    height: 0px;
    border-radius: 13px;
    background-clip: padding-box;
    border: 10px solid transparent;
}

.section-tabs-services .tabs::-webkit-scrollbar {
    background-color: #ababab;
}

.section-tabs-services .tabs::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 0 10px;
}

.section-tabs-services .tabcontent {
    display: none;
    margin-top: 1.5rem;
}

/*--TABS CONTENT --*/

.section-tabs-services .container-only-flex {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.section-tabs-services .container-title {
    width: 250px;
}

.section-tabs-services .container-title h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
}

.section-tabs-services .container-title span {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #40224e;
}

.section-tabs-services canvas.line {
    width: calc(100% - 250px);
    height: 2px;
    background-color: #999999;
}

@media (max-width: 768px) {
    .section-tabs-services {
        display: none;
    }
}

/*--------MENU-PC LANDING-MKT -------*/

section.section-menu-pc .container-flex-sb {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

section.section-menu-pc a {
    width: calc(50% - 10px);
    border: 1px solid #696969;
    border-radius: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: #552e68;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
}

section.section-menu-pc a:hover {
    outline: 1px solid #552e68;
}

section.section-menu-pc a.variant-1 {
    width: 100%;
    text-align: center;
}

section.section-menu-pc a p {
    font-family: var(--font-secundary);
    font-size: 0.85rem;
    font-weight: 400;
    color: #000;
}

@media (max-width: 834px) {
    section.section-menu-pc {
        display: none;
    }
}

/*---- MENU-MOBILE LANDINGMKT -----*/

.section-menu-mobile {
    padding-top: 0;
    display: none;
}

.section-menu-mobile nav.menu-nav {
    width: 100%;
    display: grid;
    height: 250px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    gap: 15px;
}

.section-menu-mobile nav.menu-nav a {
    width: 100%;
    border: 1px solid #696969;
    border-radius: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: #552e68;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.section-menu-mobile nav.menu-nav a p {
    text-align: center;
    font-size: 1rem;
}

.section-menu-mobile nav.menu-nav a span {
    font-size: 1.3rem;
}

.btn-box-whats {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-box-whats p {
    width: 100%;
    text-align: center;
    font-family: var(--font-principal);
    font-size: 1rem;
    font-weight: 400;
    color: #292b38;
}

.btn-box-whats .btn-type-3 {
    background-color: #008269;
    width: 50%;
    text-align: center;
}

.btn-box-whats .btn-type-3 i {
    margin-right: 6px;
    font-size: 1.3rem;
    transform: translateY(2px);
}

@media (min-width: 834px) {
    .btn-box-whats {
        display: none;
    }
}

@media (max-width: 834px) {
    .section-menu-mobile {
        display: block;
    }
}

/*-------------- COMPONENTS-SERVICES -----------*/

section.section-landmkt.variant-3 {
    background: linear-gradient(
        0deg,
        rgba(64, 34, 78, 1) 77%,
        rgba(255, 255, 255, 0) 100%
    );
}

.container-sections-landmkt {
    width: 100%;
    padding: 30px 0;
}

.title-sections-landmkt {
    width: 100%;
}

.title-sections-landmkt h3 {
    width: 100%;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1.45rem;
    text-align: center;
}

.title-sections-landmkt span {
    display: block;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    color: #40224e;
    width: 100%;
    text-align: center;
}

.title-sections-landmkt span.subtitle {
    font-size: 1.2rem;
}

.title-sections-landmkt p {
    font-family: var(--font-secundary);
    font-weight: 400;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 12px;
}

.title-sections-landmkt p span {
    font-family: var(--font-principal);
    font-weight: 400;
    font-size: 1.2rem;
    display: inline;
    color: #000;
}

@media (min-width: 836px) {
    section.section-landmkt.variant-3 {
        background: transparent;
    }

    .container-sections-landmkt {
        padding-top: 1.2rem;
    }

    .title-sections-landmkt h3,
    .title-sections-landmkt p,
    .title-sections-landmkt span {
        text-align: left;
    }

    .title-sections-landmkt p {
        font-size: 1rem;
    }
}

.widget-component-1 {
    width: 100%;
    border-radius: 16px;
    padding: 30px 15px 15px 15px;
    border: 1px solid #b8a3c2;
    background-color: #fff;
    margin-bottom: 25px;
}

.widget-component-1.variant-2 {
    padding-top: 0px;
}

.widget-component-1 .container-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-component-1 .container-title h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.6rem;
}

.widget-component-1 .container-title h4 span {
    font-size: 1.4rem;
    color: #000;
    padding-right: 2rem;
}

.widget-component-1 .container-title p {
    color: #40224e;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 2rem;
}

.widget-component-1 .container-title p span {
    font-size: 1.4rem;
}

.widget-component-1 .container-title h4 span.type-2 {
    font-size: 1.2rem;
    line-height: 1rem;
}

.widget-component-1 span.tag {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.2rem 0.8rem;
    background-color: #40224e;
    color: #fff;
    border-radius: 100px;
    display: inline-block;
    margin-top: 0.8rem;
}

.widget-component-1 ul.list-faqs {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 12px;
}

.widget-component-1 ul.list-faqs li {
    margin-bottom: 0.25rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0.35rem;
    line-height: 1.2rem;
}

.widget-component-1 ul.list-faqs li:last-child {
    margin-bottom: 0;
}

.widget-component-1 p.info-r {
    padding: 12px;
    background-color: #faf7fa;
    border-radius: 5px;
    border: 1px solid #b8a3c2;
    font-size: 1rem;
    font-family: var(--font-secundary);
    font-optical-sizing: auto;
    font-weight: 400;
}
.widget-component-1 p.info-r span {
    font-size: 0.9rem;
    font-weight: 600;
}
.widget-component-1 span.feature {
    color: #40224e;
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin: 1rem 0;
}

.widget-component-1 ul.feature {
    padding-left: 12px;
}

.widget-component-1 ul.feature li {
    font-family: var(--font-secundary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

@media (min-height: 836px) {
    .widget-component-1 {
        padding: 30px;
    }
}

@media (max-width: 836px) {
    .widget-component-1 ul.list-faqs li,
    .widget-component-1 p.info-r,
    .widget-component-1 ul.feature li {
        font-size: 1.2rem;
    }

    .widget-component-1 p.info-r span {
        font-size: 1.1rem;
    }

    .widget-component-1 span.tag {
        font-size: 1.1rem;
    }
    .widget-component-1 span.feature {
        font-size: 1.2rem;
    }
}

section.section-btns {
    padding-bottom: 0;
    padding-top: 0;
    background-color: #40224e;
}

.box-btns-sections-package {
    height: auto;
    background-color: #fff;
    width: 100%;
    border-radius: 35px 35px 0 0;
    padding-bottom: 30px;
    padding-top: 30px;
}

.btn-box-package p {
    width: 100%;
    text-align: center;
    font-family: var(--font-principal);
    font-size: 1.3rem;
    line-height: 1.2rem;
    font-weight: 400;
    color: #292b38;
    margin: 10px 5vw;
}

.btn-box-package {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
    flex-wrap: wrap;
}

.btn-box-package .btn-type-3 {
    width: 50%;
    text-align: center;
}

.btn-box-package .btn-type-3.variant-2 {
    background-color: #fff;
    color: #40224e;
}

.btn-box-whats.variant-2 {
    position: relative;
}

.btn-box-whats.variant-3 {
    position: relative;
    bottom: 0;
    margin-bottom: 1rem;
}

.btn-box-whats.variant-3 a {
    display: inline-block;
    width: auto;
}

.btn-box-whats.variant-3.type-2 {
    display: flex;
    justify-content: center;
    margin-top: 100px;
}

.btn-box-whats.variant-3.type-2 a {
    width: 80%;
}

@media (min-height: 836px) {
    section.section-btns,
    .box-btns-sections-package {
        background-color: transparent;
    }
    .btn-box-whats.variant-3 {
        display: block;
    }

    .btn-box-whats.variant-3.type-2 {
        display: flex;
    }
}

@media (max-width: 375px) {
    .widget-component-1 .container-title h4 {
        font-size: 1.7rem;
        line-height: 1.6rem;
    }

    .widget-component-1 .container-title h4 span {
        font-size: 1.2rem;
    }
}

/*------------- PAGE PREGUNTAR FRECUENTES -------------*/

ul.questions {
    width: 100%;
    margin-top: 30px;
}

ul.questions li {
    margin-bottom: 25px;
    padding: 12px;
    background-color: #faf7fa;
    border-radius: 5px;
    border: 1px solid #b8a3c2;
    list-style: none;
}

ul.questions li h5 {
    font-family: var(--font-principal);
    font-size: 1.3rem;
    line-height: 1.35rem;
    font-weight: 500;
    margin-bottom: 15px;
}

ul.questions li p {
    font-family: var(--font-secundary);
    font-size: 1.2rem;
    font-weight: 400;
}

@media (min-width: 834px) {
    ul.questions li h5,
    ul.questions li p {
        font-size: 1rem;
    }
}

/*------------------ PAGE LANDIGN PORTAFOLIO ------------*/

main.mkt.variant-1 {
    max-width: 1165px;
}

.landmkt-portafolio .cmedia {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.landmkt-portafolio .image {
    max-width: 32%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}

.landmkt-portafolio .image img {
    width: 100%;
    object-fit: cover;
}

@media (max-width: 576px) {
    .landmkt-portafolio .image {
        max-width: 100%;
        margin-bottom: 20px;
    }
}

/*------------------- PAGE CONTRATACIÓN --------------*/

section.section-hire .container-package {
    border: 1px solid #552e68;
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 30px;
    max-width: 576px;
}

section.section-hire .container-package span.title {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--font-principal);
    font-weight: 600;
    font-size: 1.2rem;
    color: #292929;
}

section.section-hire .container-package .grid {
    display: grid;
    grid-template-columns: 2fr 0.7fr;
    grid-template-rows: auto;
    gap: 1.2rem;
}

section.section-hire .container-package .grid p,
section.section-hire .container-package .grid span {
    font-family: var(--font-principal);
    font-size: 1rem;
    font-weight: 400;
}

section.section-hire p.concept {
    font-family: var(--font-principal);
    font-weight: 600;
    font-size: 1.2rem;
    margin-top: 1.2rem;
    text-align: center;
}

section.section-hire p.concept span {
    color: #40224e;
    font-size: 1.4rem;
}

section.section-hire p.concept span.number {
    font-size: 1.4rem;
}

section.section-hire p.des {
    font-family: var(--font-principal);
    font-weight: 600;
    color: #40224e;
    font-size: 1.3rem;
    margin-bottom: 30px;
}

section.section-hire .container-payment {
    max-width: 768px;
    margin-bottom: 30px;
}

section.section-hire .container-payment .widget {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

section.section-hire .container-payment .widget:last-child {
    margin-bottom: 0;
}

section.section-hire .container-payment .concept {
    width: 40%;
}

section.section-hire .container-payment .data {
    width: 60%;
}

section.section-hire .container-payment .data button {
    height: 100%;
    background-color: #e2e2e2;
    margin-left: 6px;
    border-radius: 6px;
    padding: 0 8px;
}

section.section-hire .container-payment .data button i {
    font-size: 1.1rem;
}

section.section-hire .container-payment span {
    font-family: var(--font-principal);
    font-weight: 400;
    font-size: 1.5rem;
}

section.section-hire .container-payment span.alert {
    font-family: var(--font-principal);
    font-weight: 500;
    font-size: 0.85rem;
    background-color: #c5f7de;
    margin-left: 6px;
    border-radius: 6px;
    padding: 0 8px;
    opacity: 0;
    transition: all 500ms ease;
}

section.section-hire .container-payment span.alert.active {
    opacity: 1;
}

@media (min-width: 834px) {
    section.section-hire .container-payment span {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    section.section-hire .container-payment .concept {
        width: 100%;
        margin-bottom: 8px;
    }

    section.section-hire .container-payment .data {
        width: 100%;
    }

    section.section-hire .container-payment .concept span {
        font-weight: 500;
        font-size: 1.4rem;
    }
}