/* CABECERA PROMOCIÓN (home Cityo) — fija; medidas del Figma de 1920 px y 896 px expresadas en vw/em */
.promo-cab {
    --promo-bg: #0e120e;
    --promo-acento: #d6fe51;
    --promo-boton: #4dcf66;
    position: relative;
    overflow: hidden;
    background: var(--promo-bg);
    color: #fff;
    height: clamp(520px, 35.3125vw, 678px);
}
.promo-cab__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    pointer-events: none;
}
.promo-cab__media video,
.promo-cab__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
}
.promo-cab__contenido {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
    padding: 0 24px 0 clamp(24px, 10.4167vw, 200px);
}
.promo-cab .promo-cab__etiqueta {
    display: inline-block;
    background: var(--promo-acento);
    color: var(--promo-bg);
    font-family: 'Unica-Bold' !important;
    font-weight: normal;
    font-size: clamp(11px, .85vw, 16px);
    letter-spacing: .06em !important;
    text-transform: uppercase;
    line-height: normal;
    padding: .4em 1em;
    border-radius: 50px;
}
.promo-cab .promo-cab__titulo {
    margin: 0;
    color: #fff;
    font-family: 'Unica-Bold' !important;
    font-weight: normal;
    font-size: clamp(36px, 4vw, 76px);
    line-height: .92;
    letter-spacing: -.03em !important;
}
.promo-cab .promo-cab__titulo span {
    display: block;
    font-family: 'Unica-Bold' !important;
    font-weight: normal;
    letter-spacing: -.03em !important;
}
.promo-cab .promo-cab__titulo .promo-cab__acento {
    color: var(--promo-acento);
}
.promo-cab .promo-cab__sub {
    margin: 0;
    color: #d1efd3;
    font-weight: 500;
    font-size: clamp(14px, 1.15vw, 22px);
    line-height: 1.43;
}
.promo-cab .promo-cab__sub--mov {
    display: none;
}
.promo-cab .promo-cab__btn {
    display: inline-block;
    margin-top: 6px;
    background: var(--promo-boton);
    color: #fff;
    font-weight: 700;
    font-size: clamp(14px, 1.1vw, 21px);
    line-height: normal;
    padding: .846em 1.54em;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
}
.promo-cab .promo-cab__btn:hover,
.promo-cab .promo-cab__btn:focus {
    background: #3fbf58;
    color: #fff;
}
@media (max-width: 767px) {
    .promo-cab {
        --promo-arte: 150.45vw; /* alto del vídeo de móvil a ancho completo (896x1348) */
        height: auto; /* la altura la marca el contenido: arte + texto + margen inferior; el fondo se recorta por abajo */
    }
    .promo-cab__media,
    .promo-cab__media video,
    .promo-cab__media img {
        object-position: center top;
    }
    .promo-cab__contenido {
        justify-content: flex-start;
        gap: clamp(14px, 2.67vw, 22px);
        height: auto;
        padding: calc(var(--promo-arte) * .456) 8% clamp(28px, 9vw, 64px) 8%;
    }
    .promo-cab .promo-cab__etiqueta {
        font-size: clamp(10px, 2.3vw, 15px);
    }
    .promo-cab .promo-cab__titulo {
        font-size: clamp(32px, 10.2vw, 68px);
    }
    .promo-cab .promo-cab__sub {
        font-size: clamp(15px, 4.2vw, 22px);
        line-height: normal;
    }
    .promo-cab .promo-cab__sub--esc {
        display: none;
    }
    .promo-cab .promo-cab__sub--mov {
        display: block;
    }
    .promo-cab .promo-cab__btn {
        margin-top: 4vw;
        font-size: clamp(15px, 4.2vw, 22px);
        padding: .857em 1.43em;
    }
}
/* .fw-700 solo se añade para librarlos de la regla global de unica.css (Unica-Regular !important); aquí anulamos su 700 */
.promo-cab .promo-cab__etiqueta.fw-700,
.promo-cab .promo-cab__titulo span.fw-700 {
    font-family: 'Unica-Bold' !important;
    font-weight: normal !important;
}
/* Escritorio estrecho: el fondo se empuja a la derecha (recortando por ese lado) para que el arte no pise el texto */
@media (min-width: 768px) and (max-width: 1472px) {
    .promo-cab__media {
        left: auto;
        right: calc(max(0px, 1250px - 100vw) * -1);
        width: 1473px; /* 520 px de alto * 1920/678 */
    }
}
/* Black Friday: su arte llega casi al borde derecho, así que en escritorio estrecho no se desplaza (se cortaría):
   se reduce el fondo para que el arte quepa entre el texto y el borde, y se difuminan sus bordes sobre el fondo oscuro */
@media (min-width: 768px) and (max-width: 1250px) {
    .promo-cab--black-friday .promo-cab__media {
        --bf-ancho: clamp(700px, calc((100vw - 10.4vw - max(356px, 39.6vw) - 24px) / .41), 1473px);
        left: auto;
        right: 0;
        top: 50%;
        width: var(--bf-ancho);
        height: calc(var(--bf-ancho) * .35313);
        transform: translateY(-50%);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 12%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent), linear-gradient(to right, transparent, #000 12%);
        mask-composite: intersect;
    }
}