/*
 * UPSEX — PAGE HERO TABLET Y PC V4
 * Mismo concepto visual móvil:
 * fondo completo, sin tarjeta blanca exterior.
 */

@media screen and (min-width:768px){

    /*
     * Fondo general completo del encabezado.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell{
        display:block!important;
        position:relative!important;

        width:100vw!important;
        max-width:none!important;
        min-height:0!important;

        margin:
            0
            0
            22px
            calc(50% - 50vw)!important;

        padding:30px 0 32px!important;

        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;

        overflow:hidden!important;

        background:
            radial-gradient(
                circle at 8% 18%,
                rgba(210,173,82,.19),
                transparent 28%
            ),
            radial-gradient(
                circle at 88% 72%,
                rgba(197,181,255,.20),
                transparent 33%
            ),
            radial-gradient(
                circle at 78% 8%,
                rgba(255,255,255,.88),
                transparent 24%
            ),
            #fffaf1!important;
    }

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell:before{
        content:""!important;
        display:block!important;

        position:absolute!important;
        inset:0!important;

        pointer-events:none!important;
        opacity:.58!important;

        background:
            radial-gradient(
                circle at 91% 72%,
                rgba(255,255,255,.95) 0 10px,
                transparent 11px
            ),
            radial-gradient(
                circle at 86% 84%,
                rgba(255,255,255,.72) 0 6px,
                transparent 7px
            )!important;
    }

    /*
     * Sin tarjeta blanca detrás.
     * Título y breadcrumb quedan directamente
     * sobre el fondo general.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card{
        position:relative!important;
        z-index:2!important;

        display:block!important;

        width:calc(100% - 56px)!important;
        max-width:1320px!important;
        min-height:0!important;

        margin:0 auto!important;
        padding:8px 0 6px!important;

        border:0!important;
        border-radius:0!important;

        background:transparent!important;
        background-image:none!important;

        box-shadow:none!important;
    }

    /*
     * Quita la línea vertical de la versión anterior.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > span.txp-v132-accent.txp-v132-accent{
        display:none!important;
    }

    /*
     * Título en el lado izquierdo.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > .txp-v132-title.txp-v132-title{
        display:block!important;

        width:100%!important;
        max-width:1100px!important;

        margin:0!important;
        padding:0!important;

        color:#4d423f!important;
        text-shadow:none!important;

        font-family:
            Manrope,
            Arial,
            sans-serif!important;

        font-size:
            clamp(31px,3.2vw,48px)!important;

        font-weight:800!important;
        line-height:1.08!important;
        letter-spacing:-.65px!important;
    }

    /*
     * Breadcrumb debajo del título,
     * alineado en el mismo lado.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > nav.txp-v132-breadcrumb.txp-v132-breadcrumb{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        flex-wrap:wrap!important;

        position:relative!important;
        inset:auto!important;

        width:auto!important;
        max-width:100%!important;
        min-width:0!important;
        min-height:48px!important;
        height:auto!important;

        margin:22px 0 0!important;
        padding:11px 18px!important;

        gap:7px 11px!important;
        column-gap:11px!important;
        row-gap:7px!important;

        border:
            1px solid
            rgba(184,138,0,.27)!important;

        border-radius:999px!important;

        background:
            rgba(255,253,248,.88)!important;

        background-image:none!important;

        box-shadow:
            0 10px 25px
            rgba(73,54,35,.06)!important;

        transform:none!important;
        opacity:1!important;
        visibility:visible!important;
    }

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > nav.txp-v132-breadcrumb.txp-v132-breadcrumb
    > a,

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > nav.txp-v132-breadcrumb.txp-v132-breadcrumb
    > .txp-v132-parent{
        display:inline-flex!important;
        align-items:center!important;

        gap:7px!important;

        margin:0!important;
        padding:0!important;

        color:#5c514e!important;

        font-family:
            Manrope,
            Arial,
            sans-serif!important;

        font-size:15px!important;
        font-weight:700!important;
        line-height:1.25!important;

        background:none!important;
        border:0!important;
        box-shadow:none!important;
        text-decoration:none!important;
    }

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    .txp-v132-breadcrumb
    > a:hover{
        color:#7A5A18!important;
    }

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    .txp-v132-breadcrumb
    .fa{
        color:#B88A00!important;
        font-size:18px!important;
        line-height:1!important;
    }

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    .txp-v132-breadcrumb
    > .txp-v132-separator{
        margin:0 2px!important;
        padding:0!important;

        color:#5f534f!important;

        font-size:20px!important;
        font-weight:500!important;
        line-height:1!important;

        background:none!important;
        border:0!important;
        transform:none!important;
    }
}

@media screen and (min-width:768px) and (max-width:991px){

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell{
        padding-top:25px!important;
        padding-bottom:27px!important;
    }

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card{
        width:calc(100% - 38px)!important;
    }

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > .txp-v132-title.txp-v132-title{
        font-size:32px!important;
    }
}

/* UPSEX_PAGE_HERO_PC_MICROAJUSTE_V5_START */

/*
 * Ajustes exclusivos de tablet y PC:
 * más margen izquierdo, mayor separación vertical,
 * INICIO en mayúscula e ícono de casa limpio.
 */
@media screen and (min-width:768px){

    /*
     * Separa título y breadcrumb del borde izquierdo.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card{
        width:calc(100% - 112px)!important;
    }

    /*
     * Aumenta solamente el espacio entre título
     * y breadcrumb.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > nav.txp-v132-breadcrumb.txp-v132-breadcrumb{
        margin-top:30px!important;
    }

    /*
     * Oculta el ícono Font Awesome defectuoso.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > nav.txp-v132-breadcrumb.txp-v132-breadcrumb
    > a:first-child
    > .fa{
        display:none!important;
    }

    /*
     * Ícono de casa SVG limpio y consistente.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > nav.txp-v132-breadcrumb.txp-v132-breadcrumb
    > a:first-child:before{
        content:""!important;

        display:block!important;
        flex:0 0 17px!important;

        width:17px!important;
        height:17px!important;

        margin:0!important;

        background:#B88A00!important;

        -webkit-mask:
            url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8z%22%2F%3E%3C%2Fsvg%3E")
            center/contain
            no-repeat!important;

        mask:
            url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8z%22%2F%3E%3C%2Fsvg%3E")
            center/contain
            no-repeat!important;
    }

    /*
     * INICIO visible en mayúscula.
     */
    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card
    > nav.txp-v132-breadcrumb.txp-v132-breadcrumb
    > a:first-child
    > span{
        text-transform:uppercase!important;
        letter-spacing:.025em!important;
        font-weight:700!important;
    }
}

/*
 * En tablet se usa un margen proporcionado
 * para no comprimir el contenido.
 */
@media screen and (min-width:768px) and (max-width:991px){

    html body.txp-v132-ready
    .txp-v132-root.txp-v132-root
    > section.txp-v132-shell.txp-v132-shell
    > div.txp-v132-card.txp-v132-card{
        width:calc(100% - 72px)!important;
    }
}

/* UPSEX_PAGE_HERO_PC_MICROAJUSTE_V5_END */