/*
Theme Name: eSports
Theme URI: http://esports.onclick.es
Description: Tema para eSports
Author: OnClick Studio
Author URI: http://onclick.es
Template: soledad
Version: 1.0
*/

/* Aquí puedes agregar tus estilos personalizados */



/*-----------------------------------*/
/*MENU LATERAL*/
/*-----------------------------------*/
.penci-menu-hbg-inner .header-social.sidebar-nav-social{
	text-align: center;
}

form.pc-searchform.penci-hbg-search-form i {
    color: #fff!important;
}


/*-----------------------------------*/
/*GLOBAL*/
/*-----------------------------------*/
h3{
    font-family: "on air",sans-serif;
}


/*sticky header movil*/
.penci_navbar_mobile {
    position: fixed;
    width: 100%;
}


/*el color de fondo del overlay de busqueda*/
.header-search-style-overlay .penci-header-builder .show-search {
    background-color: #0b2739!important;
}

.header-search-style-overlay .show-search .search-results-wrapper .view-all-results{
	background-color: #1C1E21!important;
}

.header-search-style-overlay .show-search .search-results-wrapper .view-all-results{
	background-color: #066FCB!important;
}

.pcbds-overlay .view-all-results a:hover, .view-all-results a:hover {
    color: #0b2739;
}


/*el overlay de busqueda*/
.header-search-style-overlay .show-search .penci-search-form, .header-search-style-overlay .show-search form.pc-searchform {
    max-width: 950px;
}

.penci-search-results .autocomplete-suggestion .suggestion-thumb {
    max-width: 100px;
    width: 100px;
}

.penci-search-results .autocomplete-suggestion .penci-post-title {
    font-size: 14pt;
}

.search-results-wrapper .autocomplete-suggestions {
    max-height: 600px;
}

.header-search-style-overlay .penci-search-form form.penci-ajax-search .pc-eajxsearch button:after {
     color: #fff; 
}

.header-search-style-overlay .show-search .search-results-wrapper .penci-dropdown-results .autocomplete-suggestions {
    background-color: #23272b;
}

/*intentar quitar el carrusel en los thumbs del listado de posts*/
/*.list-post .penci-owl-nav{
    visibility:hidden!important;
}*/


.banner-wrapper {
    margin: 0 auto; /* centra horizontalmente */
    position: relative;
}

/*-----------------------------------*/
/*HOME*/
/*-----------------------------------*/

/*forzar etiquetas en carruseles*/
.featured-style-35 .featured-cat, .penci-featured-content .feat-text .featured-cat, .penci-mag-featured-content .cat{
	display:block!important;
}

/*formatear etiquetas*/
/*.featured-style-35 .featured-cat a,*/
.penci-featured-content .feat-text .featured-cat a, 
.penci-mag-featured-content .cat a, 
/*.penci-featured-infor .cat a.penci-cat-name, */
.penci-grid .cat a.penci-cat-name, 
/*.penci-masonry .cat a.penci-cat-name, */
/*.penci-featured-infor .cat a.penci-cat-name,*/

.home .penci-bgrid-content-on .pcbg-content-inner .pcbg-title a,

.biggrid-archive-wrapper .pcbg-content-inner .cat > a.penci-cat-name,

/*.penci-latest-posts-el .cat>a.penci-cat-name span*/
.penci-biggrid-wrapper .cat>a.penci-cat-name

{
/*	background-color:#019df4;*/
    background-color:#066FCB;
	color:#fff!important;
	font-weight:700;
	padding: 2px!important;
    padding-right: 3px !important;
    padding-left: 3px !important;
    text-transform: uppercase;
    font-family: "on air",sans-serif;
    font-size: 10px;
    line-height: 1.5;
    font-size: 10px !important;

}

/*la etiqueta concreata de categorias:*/
.home .penci-bgrid-content-on .pcbg-content-inner .pcbg-title a{
    font-size: 20px !important;

}

.pcbg-content-inner {
    width: auto!important;
}

/*etiqueta categorias en hover desdaparece el background*/
/*.pcbg-overlap-hover:hover .pcbg-title a{
    background-color:#fff!important;
    color:#0b2739!important;
}*/

/*etiquetas hover*/

.penci-featured-content .feat-text .featured-cat a:hover, 
.penci-mag-featured-content .cat a:hover, 
.penci-grid .cat a.penci-cat-name:hover,
.penci-biggrid-wrapper .cat>a.penci-cat-name:hover,
.home .pcbg-content-flex:hover .pcbg-heading .pcbg-title a
{
    background-color:#fff;
    color:#0b2739!important;
}

/*corregimos que los textos se pongan con fondo balnco en el carrusel de categorias*/
.penci-biggrid .pcbg-content-flex:hover .pcbg-heading .pcbg-title a
{
/*    background-color:transparent!important;*/
/*    color:#066fcb!important;*/
}


/*//el titulo de las etiquetas en el featured de category*/
.elementor-1090 .elementor-element.elementor-element-e9487f1 .pcbg-content-inner .pcbg-above span {
    color:#fff!important;
}

.elementor-1090 .elementor-element.elementor-element-e9487f1 .pcbg-content-inner .pcbg-above span:hover {
    color:#0b2739!important;
}

.featured-style-29 .penci-featured-content .feat-text h3:before{
	display:none;
}


/*hover de carrusel de posts con textio debajo*/
.elementor-2 .elementor-element.elementor-element-69be3fb .item-related h3 a:hover {
/*    color: #019df4!important;*/
    color: #066fcb!important;
}

/*thumb de carrusel de posts ton textio debajo*/
.item-related .item-related-inner>a {
    opacity: 0.75!important;
}
/*thumb de carrusel de posts ton textio debajo*/
.item-related .item-related-inner>a:hover {
    opacity: 1 !important;
}


/*boton de read more en carruseles*/
.penci-featured-slider-button {
    display: none !important;
}


/*.elementor-widget-penci-block-heading{
	margin-bottom:0px;
}
*/
/*separador de categporias*/
.penci-grid .cat a.penci-cat-name:after,
.cat > a.penci-cat-name:after{
	display:none;
}


/*el featured slider, quitarle el overlay solid*/
.featured-style-29 .featured-slider-overlay{
	background-color:transparent!important;

/* Añadir overlay degradado solo en parte inferior */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%; /* ajusta esta altura si quieres */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  z-index: 1;
  pointer-events: none;
  top:60%;
  opacity:1!important;
}



/*ocultar el excerpt y subtitulo en el listado de posts*/
.penci-a-post-subtitle{
    display:none;
}


/*puntitos actualidad*/
.featured-style-28 .penci-owl-carousel .swiper-horizontal>.swiper-pagination-bullets, .featured-style-28 .swiper-pagination-bullets.swiper-pagination-horizontal{
    top:420px;
}

/*darle mas altura al slider para que se vean los puntos debajo*/
.elementor-1893 .elementor-element.elementor-element-58c098bc .penci-owl-carousel{
    height:430px;
}


/*-----------------------------------*/
/*POST*/
/*-----------------------------------*/
/*quitar el icono de compartir*/
.penciicon-sharing:before {
    content: "";
}

/*image del post forzar a 100% anchura*/
.pcsb-ft .post-image{
	width: 100%;
    height: 480px;
/*    height: auto;*/
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.penci-video-format-youtube{
    height: auto!important;
}

.post-image img {
/*    width: 100%;*/
/*    max-width: max-content !important;*/
/*    height: 480px !important;*/

/*para que la foto ocupe toda la anchura he tenido que comentar las siguientes 2 lineas*/
	height: 100%!important;
    max-width: fit-content!important;

    width: auto!important; 
}

/*quitarle a la imagen el efecto rollover del caption*/
.post-image:hover .penci-featured-caption, .wp-caption:hover p.wp-caption-tex{
	transform: translateY(0)!important;
    -webkit-transform: translateY(0)!important;
    opacity: 1!important;
}

.penci-featured-caption, .wp-caption p.wp-caption-text{
	background:rgba(0, 0, 0, .5);
	color:#d3d4d3;
}


/*las putas etiquetas que aqui pilla roboto y pasa de todo*/
.elementor-1143 .elementor-element.elementor-element-3f517c8a .pctmp-term-item{
	font-family: "on air", sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

.elementor-1143 .elementor-element.elementor-element-3f517c8a .pctmp-term-item:hover{
    background-color: #fff!important;
}

.elementor-1143 .elementor-element.elementor-element-573d3641 .pctmp-term-item,
.elementor-1727 .elementor-element.elementor-element-4bf4ba43 .penci-post_tag-name,
.elementor-widget-penci-single-taxonomy .penci-post_tag-name{
	color:#fff!important;
	font-family: "on air",sans-serif!important;
    font-size: 10px!important;
}

.elementor-1143 .elementor-element.elementor-element-573d3641 .pctmp-term-item:hover,
.elementor-1727 .elementor-element.elementor-element-4bf4ba43 .penci-post_tag-name:hover,
.elementor-widget-penci-single-taxonomy .penci-post_tag-name:hover {
    background-color: #fff!important;
    border-color: #fff;
    color:#0b2739!important;
}


/*la caja de compartir*/
.tags-share-box.tags-share-box-2_3 .penci-social-share-text{
	font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #B6B7B7!important;
}
.tags-share-box{
	background-color:transparent!important;

}

.penciicon-sharing{
	display:none!important;
}

/*post relacionados*/
.single-post .penci-ilrelated-posts{
	background-color: #fff;
	border-color:#d3d4d3;
}


.single-post .pcilrp-heading span{
	color:#B6B7B7!important;
	text-transform: uppercase;
}


/*tamaño de texto en las tablas*/
@media (max-width: 480px) {

  table {

    /*font-size: 0.7em;*/ /*opcion de reducir el texto*/
    
    table-layout: auto !important; /* anula la propiedad fija */
    display: block;                /* necesario para que scroll funcione */
    overflow-x: auto;               /* añade scroll horizontal */
    white-space: nowrap;            /* evita que el texto se corte */
    border:none!important;
  }
}



/*margen despues de imagenes*/
.single-post figure{
    margin-bottom: 20px!important;
}


/*SIDEBAR del post*/
.single-post .penci-sidebar-content{
	background-color: #fff!important;
    border: 0!important;
}

.single-post .penci-menu-hbg-inner .penci-sidebar-content{
	background-color: transparent!important;
}


.single-post .widget ul.side-newsfeed li{
	border-bottom-color:#d3d4d3;
}

.single-post .widget ul.side-newsfeed li .side-item .side-item-text h4 a,.single-post  .widget a{
	color:#86888C!important;
}

.single-post .widget ul.side-newsfeed li .side-item .side-item-text h4 a:hover, .single-post .widget a:hover{
/*	color:#019df4!important;*/
    color:#066fcb!important;
}


/*publi en barra centrar*/
.publi{
    text-align:center;
}

.single-post .item-related h3 a {
    color: #86888C!important;
    font-size:16px!important;
    text-transform:none!important;
    font-family: "on air",sans-serif!important;
}

.single-post .item-related h3 a:hover {
/*    color: #019df4!important;*/
    color:#066fcb!important;
}

.single-post .penci-homepage-title.style-4 .inner-arrow:after{
	border-color:#d3d4d3;
}

.single-post .footer-subscribe{
/*	background-color:#b6b7b7;*/

}

.single-post .footer-subscribe .mc4wp-form .mdes{
/*	color:#50535a;*/
}

.single-post .footer-subscribe .widget .mc4wp-form input[type="email"], .single-post .footer-subscribe .widget .mc4wp-form input[type="text"]{
/*	color:#50535a;*/
}

.single-post .entradilla{
    font-size: 24px;
    color: #50535a;
}



body.single .post-image:hover {
    overflow: hidden;
}




/*altura fija del embed de twitch*/
#twitch-embed iframe{
    height:430px;
}



/*La etiqueta de patrocinado*/
.wp-singular .penci-sponsored-label{
   background-color: #0b2739!important;
   color: #066fcb!important;
}


/*-----------------------------------*/
/*CATEGORIAS*/
/*-----------------------------------*/


.pcbg-title a {
  display: -webkit-box;
  -webkit-line-clamp: 6; /* Número de líneas visibles */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}



/*SUBMENU STORIES*/
.subcategories-stories {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem 0;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    min-width: 100px;
    transition: color 0.3s ease;
}

.story-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 4px solid #fff;
    opacity: 0.7;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    margin-bottom: 0.5rem;
}

.story-item:hover .story-circle {
    opacity: 1;
/*    border-color: #019df4;*/
    border-color: #066fcb;
}

.story-label {
    font-size: 0.9rem;
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-weight: 600;
}

.story-item:hover .story-label {
/*    color: #019df4;*/
    color: #066fcb;
}


/*-----------------------------------*/
/*PENCI SLIDER*/
/*-----------------------------------*/
/* Carrusel de dispositivos */
.penci-slider {
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative; /* Para posicionar las flechas */
}

.slider-title {
    text-align: center; /* Centrar el texto */
    font-size: 24px; /* Tamaño de fuente */
    margin-bottom: 20px; /* Espacio debajo del título */
    color: #333; /* Color del texto */
}

.slider-wrapper {
    display: flex; /* Usar flexbox para alinear los elementos */
    transition: transform 0.5s ease; /* Animación de cambio de elementos */
}

.slider-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.slider-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


.slider-image {
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.slider-body {
  flex-grow: 1;
  padding-top: 10px;
  text-align: center;
  height: 140px;
  color: #b2b2b2;
}

.slider-footer {
  padding-top: 10px;
  text-align: center;
}

.slider-button {
  display: inline-block;
  background-color: #333;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
/*  border-radius: 4px;*/
  text-align: center;
}

.slider-item h3 {
    margin: 10px 0 5px; /* Espaciado del título */
    font-size: 18px; /* Tamaño del título */
    color:#50535a!important;
}

.caption {
    margin: 5px 0; /* Espaciado de la caption */
    font-size: 14px; /* Tamaño de la caption */
}

.button-container {
    margin-top: auto; /* Empujar el botón hacia abajo */
}

.slider-button {
    display: inline-block; /* Mostrar como bloque en línea */
    padding: 10px 20px; /* Espaciado del botón */
    background-color: #066fcb; /* Color de fondo */
    color: #fff!important; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
    margin-top: 10px; /* Espacio encima del botón */
    font-family: "OnAir – Movistar";
    font-size: 10pt;
    font-weight:700;
}

.slider-button:hover {
    background-color: #0b2739; /* Color de fondo al pasar el ratón */
    text-decoration: none!important;
}

.slider-navigation {
    position: absolute; /* Posicionar las flechas */
    top: 50%; /* Centrar verticalmente */
    transform: translateY(-50%); /* Ajustar la posición */
    width: 100%; /* Ancho completo */
    display: flex; /* Usar flexbox para alinear las flechas */
    justify-content: space-between; /* Espacio entre las flechas */
    left: 0;
}

.slider-navigation button {
    background: none; /* Sin fondo */
    border: none; /* Sin borde */
    font-size: 24px; /* Tamaño del botón */
    cursor: pointer; /* Cambiar el cursor al pasar el ratón */
    color:#d3d4d3;
}

.slider-dots {
    text-align: center; /* Centrar los puntos */
    margin-top: 10px; /* Espacio encima de los puntos */
    display: none; /* Ocultamos por defecto, el JS los mostrará si son necesarios */
}

.slider-dots span {
    display: inline-block; /* Mostrar como bloque en línea */
    width: 10px; /* Ancho del punto */
    height: 10px; /* Altura del punto */
    background-color: #ccc; /* Color del punto */
    border-radius: 50%; /* Hacerlo redondo */
    margin: 0 5px; /* Espaciado entre puntos */
    cursor: pointer; /* Cambiar el cursor al pasar el ratón */
}

.slider-dots span.active {
    background-color: #0073aa; /* Color del punto activo */
}


/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .slider-item {
        flex: 1 0 50%; /* Mostrar 2 elementos en dispositivos móviles */
    }
}

@media (max-width: 480px) {
    .slider-item {
        flex: 1 0 100%; /* Mostrar 1 elemento en pantallas muy pequeñas */
    }

    .slider-body {
        height: 100%;
    }
}