.elementor-5654412 .elementor-element.elementor-element-f4a3cd9{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5654412 .elementor-element.elementor-element-f4a3cd9.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-5654412 .elementor-element.elementor-element-8c52ca0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-5654412 .elementor-element.elementor-element-f4a3cd9{--width:100%;}}/* Start custom CSS */<style>
/* ==========================================================
   AJUSTE LAYOUT LANDING DISEÑO WEB
   Creacions Gràfiques
   ========================================================== */

/*
 * Sacamos la landing del ancho limitado que pueda imponer
 * Elementor / Salient y hacemos que ocupe el viewport completo.
 */
.cgw-page{
    width:90vw !important;
    max-width:none !important;

    position:relative !important;
    left:50% !important;
    right:50% !important;

    margin-left:-50vw !important;
    margin-right:-50vw !important;

    overflow:hidden !important;
}

/*
 * Ampliamos el contenido interior.
 * Antes estaba limitado a 1180px.
 */
.cgw-page .cgw-wrap{
    width:calc(100% - 80px) !important;
    max-width:1380px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/*
 * Un poco más de aire entre el header general
 * de Creacions Gràfiques y el hero.
 */
.cgw-page .cgw-hero{
    padding-top:155px !important;
    padding-bottom:82px !important;
}

/*
 * Hero algo más equilibrado en pantallas grandes.
 */
.cgw-page .cgw-hero-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(480px,.98fr) !important;
    gap:80px !important;
}

/*
 * Controlamos el ancho del texto para que el H1
 * siga teniendo el aspecto editorial actual.
 */
.cgw-page .cgw-hero-grid > div:first-child{
    max-width:680px;
}

/*
 * El mockup puede respirar más al aumentar
 * el ancho general de la landing.
 */
.cgw-page .cgw-browser{
    width:100%;
}

/* ================= TABLET ================= */

@media (max-width:1100px){

    .cgw-page .cgw-wrap{
        width:calc(100% - 56px) !important;
    }

    .cgw-page .cgw-hero-grid{
        grid-template-columns:1fr 1fr !important;
        gap:48px !important;
    }

    .cgw-page .cgw-hero{
        padding-top:80px !important;
    }
}

/* ================= TABLET / MÓVIL ================= */

@media (max-width:900px){

    .cgw-page .cgw-hero-grid{
        grid-template-columns:1fr !important;
        gap:55px !important;
    }

    .cgw-page .cgw-hero-grid > div:first-child{
        max-width:720px;
    }

    .cgw-page .cgw-hero-grid > div:last-child{
        width:100%;
        max-width:680px;
        margin:0 auto;
    }

    .cgw-page .cgw-hero{
        padding-top:72px !important;
        padding-bottom:60px !important;
    }
}

/* ================= MÓVIL ================= */

@media (max-width:600px){

    .cgw-page .cgw-wrap{
        width:calc(100% - 36px) !important;
    }

    .cgw-page .cgw-hero{
        padding-top:55px !important;
        padding-bottom:48px !important;
    }

    .cgw-page .cgw-hero-grid{
        gap:42px !important;
    }

    .cgw-page .cgw-h1{
        font-size:clamp(42px,12vw,58px) !important;
        line-height:1.02 !important;
    }

    .cgw-page .cgw-lead{
        font-size:17px !important;
        line-height:1.65 !important;
    }

    .cgw-page .cgw-hero-cta{
        width:100%;
    }

    .cgw-page .cgw-hero-cta .cgw-btn{
        justify-content:center;
    }

    .cgw-page .cgw-float--wp{
        right:8px !important;
    }

    .cgw-page .cgw-float--seo{
        left:8px !important;
    }
}
</style>/* End custom CSS */