@font-face {
    font-family: 'Benton Sans';
    src: url('/wp-content/themes/portalBPO/fonts/benton-sans/BentonSansBBVA-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'BentonSansBBVA-Medium';
    src: url('/wp-content/themes/portalBPO/fonts/benton-sans/BentonSansBBVA-Medium.ttf') format('truetype');
    font-weight: 500; 
    font-style: normal;
}
@font-face {
    font-family: 'BentonSansBBVA-Book';
    src: url('/wp-content/themes/portalBPO/fonts/benton-sans/BentonSansBBVA-Book.ttf') format('truetype');
    font-weight: 350; 
    font-style: normal;
}
@font-face {
    font-family: 'Benton Sans';
    src: url('/wp-content/themes/portalBPO/fonts/benton-sans/BentonSansBBVA-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'BentonSansBBVA-Bold';
    src: url('/wp-content/themes/portalBPO/fonts/benton-sans/BentonSansBBVA-Bold.ttf') format('truetype');
    font-weight: 700; 
    font-style: normal;
}
@font-face {
    font-family: 'Tiempos Headline';
    src: url('/wp-content/themes/portalBPO/fonts/tiempos-headline/TiemposHeadline-Regular.woff2') format('woff2'),
         url('/wp-content/themes/portalBPO/fonts/tiempos-headline/TiemposHeadline-Regular.woff') format('woff'),
         url('/wp-content/themes/portalBPO/fonts/tiempos-headline/TiemposHeadline-Regular.ttf') format('truetype'),
         url('/wp-content/themes/portalBPO/fonts/tiempos-headline/TiemposHeadline-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Tiempos Headline';
    src: url('/wp-content/themes/portalBPO/fonts/tiempos-headline/TiemposHeadline-Bold.woff2') format('woff2'),
         url('/wp-content/themes/portalBPO/fonts/tiempos-headline/TiemposHeadline-Bold.woff') format('woff'),
         url('/wp-content/themes/portalBPO/fonts/tiempos-headline/TiemposHeadline-Bold.ttf') format('truetype'),
         url('/wp-content/themes/portalBPO/fonts/tiempos-headline/TiemposHeadline-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
/* --- Contenedor Principal --- */
.ss-site-main {
    padding: 0; 
    margin: 0;
    padding-top: 1px; 
    margin-top: -1px; 
}

.ss-container {
    width: 90%;
    max-width: 1296px;
    margin: 0 auto;
}

/* --- Banner Hero --- */
.ss-hero-banner {
    position: relative;
    width: 100%; 
    max-width: 1270px;
    height: 250px; 
    margin: 40px auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0; 
}

/* --- Imagen de Fondo --- */
.ss-hero-banner .ss-banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; 
    z-index: 1;
}
/* --- Wrapper (Capa oscura + Contenido) --- */
.ss-hero-banner .ss-banner-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, rgb(16 48 123 / 51%), rgb(10 37 100 / 56%));
    
}


/* --- Título --- */
.ss-hero-banner .ss-banner-title {
    position: relative;
    z-index: 3;
    color: #ffffff !important;
    font-family: 'Tiempos Headline',sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important; 
    text-align: center !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
    margin: 0 !important;
    width: 100%;
}
@media (min-width: 992px) and (max-width: 1280px) {
    .ss-hero-banner {
        width: 90%;
        margin-left: 54px;
    }

}

/* --- Responsive (Móviles) --- */
@media (max-width: 991px) {
    .ss-hero-banner {
        height: 200px; 
        width: 90%;
        border-radius: 16px;
        margin: 20px;
    }

    .ss-hero-banner .ss-banner-title {
        font-size: 40px !important; 
        padding: 0 20px; 
    }  
}
@media (min-width: 768px) and (max-width: 991px) {
    .ss-hero-banner {
        width: 94%;
        margin-right: 20px;
        margin-left: 23px;
    }
}

/* --- ESTILOS DEL ENVOLTORIO (Fondo y Sombra) --- */
.security-section-wrapper {
    background-color: #ffffff;
    padding-top: 24px;
    padding-bottom: 24px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 16px;
    max-width: 1268px;
    width: 100%;
}

.custom-header-width {
    max-width: 1268px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    border-radius: 16px;
}
@media (max-width: 991px) {
    .custom-header-width {
        padding-left: 20px;
        padding-right: 20px;
        position: relative;
        margin-bottom: -90px;
    }
    .mb-5 {
    margin-bottom: 0rem !important;
    }
    .security-section-wrapper {
        padding-top: 10px;
        padding-bottom: 79px;
        background-color: #ffffff;
        position: relative;
        box-shadow: 0 .125rem .25rem rgba(255, 255, 255, 0.075) !important;
        margin-left: 15px;
        width: 92%;
    }
    .security-image {
    max-width: 80%;
    height: auto;
    margin-right: 10px;
    margin-top: -26px;
}
}

.text-content-area h1 {
    font-size: 40px; 
    color: #070E46;
    margin-bottom: 24px;
    line-height: 1.2;
    font-family: 'Tiempos Headline', sans-serif;
    font-weight: 700;
    margin-left: 24px;
    width: 93%;
}

.text-content-area p {
    font-size: 20px;
    color: #070E46;
    line-height: 1.6;
    font-family: 'BentonSansBBVA-Book', sans-serif;
    margin-left: 24px;
    width: 80%;
    }

/* --- AJUSTE DE IMAGEN --- */
.security-image {
    max-width: 60%;
    height: auto;
    margin-right: 98px;
}

@media (max-width: 576px) {
    .text-content-area h1 {
       font-size: 40px;
        text-align: left;
        margin-left: -4px;
        width: 100%;
    
    }
     .text-content-area p {
        text-align: left;
        font-size: 20px;
        width: 93%;
        margin-left: -4px;
    }
}
@media (min-width: 992px) and (max-width: 1280px) {
    .security-section-wrapper{
         max-width: 926px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .text-content-area h1 {
        text-align: left;
        margin-left: -4px;
        width: 94%;
        font-size: 40px;
    }
    .text-content-area p {
        text-align: left;
        margin-left: -4px;
        width: 90%;

    }
    .security-section-wrapper{
         width: 94% !important;
         margin-right: 20px;
        margin-left: 23px;
    }
    .security-image{
        max-width: 60%;
        height: auto;
        margin-right: 58px;
    }
    .custom-header-width {
        padding-left: 1px;
        padding-right: 16px;
        position: relative;
        margin-bottom: -29px;
        margin-left: 23px;
        width: 96% !important;

    }
    .py-5 {
        padding-top: 3rem !important;
        padding-bottom: 0rem !important;
    }
    .mb-5 {
        margin-bottom: 0rem !important;
    }
}

/* --- ESTILOS GENERALES DE LA SECCIÓN --- */
.crime-section {
    background-color: #f7f7f7; 
}

/* --- BREADCRUMBS (Menú de navegación) --- */
.breadcrumb-container {
    font-family: 'Benton Sans', sans-serif;
    font-size: 15.01px;
    border-bottom: 1px solid #001391;
}

.breadcrumb-item {
    cursor: pointer;
    font-weight: 500;
    text-decoration: none; 
}

/* Estado activo (Pestaña seleccionada) */
.breadcrumb-item.active {
    color: #070E46;
    border-bottom: 2px solid #070E46; 
    padding-bottom: 9px; 
    display: inline-block;
    margin-bottom: -1px; 
    font-family: 'BentonSansBBVA-Medium', sans-serif;
}

/* Colores específicos para los tabs de fraude y estafa */
.breadcrumb-item.fraude-electronico.active {
    color: #070E46 !important;
    border-bottom: 2px solid #070E46 !important;
}
.breadcrumb-item.estafa.active {
    color: #070E46 !important;
    border-bottom: 2px solid #070E46 !important;
}
.breadcrumb-item.fraude-electronico:not(.active) {
    color: #001391 !important;
    border-bottom: none !important;
    font-family: 'BentonSansBBVA-Medium', sans-serif !important;
}
.breadcrumb-item.estafa:not(.active) {
    color: #001391 !important;
    border-bottom: none !important;
    font-family: 'BentonSansBBVA-Medium', sans-serif !important;

}

/* Enlaces inactivos (Pestaña no seleccionada) */
a.breadcrumb-item {
    color: inherit !important;
    transition: color 0.3s ease;
    font-family: inherit !important;
}
.text-muted {
    color: #001391 !important;
    font-family: 'BentonSansBBVA-Medium', sans-serif;
}


a.breadcrumb-item:hover {
    color: #070E46; 
}

.main-title {
    font-family: 'Tiempos Headline', sans-serif;
    font-size: 48px;
    color: #070E46;
    font-weight: 700;
    margin-top: 20px;
}

.text-primary {
    color: #001391 !important; 
    font-family: 'BentonSansBBVA-Medium', sans-serif;
    font-size: 15.01px !important;
}

.crime-subtitle {
    font-family: 'BentonSansBBVA-Medium', sans-serif;
    font-size: 24px !important;
    color: #070E46 !important;
    margin-bottom: 16px;
}

.crime-desc {
    font-family: 'BentonSansBBVA-Book', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #070E46;
    margin-bottom: 32px !important;
}

/* --- LISTAS (Bullets) --- */
.list-unstyled li {
    color: #070E46;
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
    font-family: 'BentonSansBBVA-Medium', sans-serif;
    font-weight: 500 !important;
}
.list-unstyledd li {
    color: #070E46;
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-family: 'BentonSansBBVA-Book', sans-serif;
}

/* Ajuste para los textos descriptivos dentro de los li */
.list-unstyled li p {
    font-size: 15.01px;
    color: #070E46!important; 
    font-family: 'BentonSansBBVA-Book', sans-serif;
    margin-top: 2px;
}

.list-unstyledli{
    color: #070E46;
    display: block;
    margin-bottom: 4px;
    font-size: 15.01px;
    font-family: 'BentonSansBBVA-Book', sans-serif;
}
.mt-1 {
    margin-top: 0.25rem !important;
    position: relative;
    top: -5px;
}
ol, ul {
    padding-left: 0rem !important;
}

.p-4 {
    padding: 0rem !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .main-title {
        font-size: 32px;
    }
    .crime-subtitle {
    font-size: 21px;
    
}
}
@media (min-width: 992px) and (max-width: 1280px) {
    .custom-header-width {
    max-width: 926px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #content-fraude .main-title {
        font-size: 32px;
        margin-bottom: 1.5rem !important;
    }
    #content-estafa .main-title {
        font-size: 32px;
        margin-bottom: 1.5rem !important;
    }
    .crime-subtitle {
        font-size: 15px;
        }
    

}

/* SECCIÓN: VÍCTIMA DE FRAUDE */
.victim-card {
    background-color: #001391;
    color: #FFFFFF;
    border-radius: 16px;
    padding: 24px 24px ;
    overflow: hidden;
}

.victim-title {
    font-family: 'Tiempos Headline', sans-serif;
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: #FFFFFF;
    font-weight: 700; 
    width: 95%;
}

.victim-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    font-family: 'BentonSansBBVA-Book', sans-serif;
}


.victim-list > li {
    font-size: 15px;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    font-family: 'BentonSansBBVA-Book', sans-serif;
    width: 90%;

}

.victim-list ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
    color: #FFFFFF;
    font-family: 'BentonSansBBVA-Book', sans-serif;
}

.victim-list ul li {
    font-size: 15px;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    font-family: 'BentonSansBBVA-Book', sans-serif;
    margin-left: 22px;
}

/* Texto adicional */
.victim-sub-text {
    font-size: 15px;
    margin-top: 0.5rem;
    padding-left: 0;
    font-family: 'BentonSansBBVA-Book', sans-serif;
    color: #FFFFFF;
}

/* Enlaces */
.victim-link {
    color: #FFFFFF;
    text-decoration: underline;
    font-family: 'BentonSansBBVA-Book', sans-serif;
}

.victim-link:hover {
    opacity: 0.8;
}

/* Imagen */
.rounded-custom {
    border-radius: 16px;
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    aspect-ratio: 15 / 11;
}
@media (min-width: 992px) and (max-width: 1280px) { 
.rounded-custom{
    aspect-ratio: 8 / 11;
}
}



/* RESPONSIVE */
@media (max-width: 991px) {
    .victim-card {
        padding: 1rem;
        margin-bottom: 80px;
    }
    
    .victim-title {
        font-size: 40px;
        text-align: left;
    }

    .col-lg-6.text-center.text-lg-end {
        margin-top: 2rem;
    }
    .p-4 {
    padding: 0rem !important; 
}
.rounded-custom {
    position: relative;
    top: -29px;
}
    
}