/* Contenedores */

.bloque {
    margin: 0 0 60px 0;
}

.bloque .container {
    padding: 54px 30px;
}

.bloque.sin-padding-lateral .container {
    padding: 54px 15px;
}

.bloque.sin-margen-vertical {
    margin: 0 0 0 0;
}

.bloque .titular {
    padding: 0 0 60px 0;
}

@media (max-width: 991px) {
    .bloque {
        margin: 0 0 60px 0;
    }

    .bloque .container {
        padding: 30px 30px;
    }

    .bloque .titular {
        display: flex;
        justify-content: center;
        padding: 0 0 30px 0;
    }

    .bloque .titular h2 {
        display: block;
        width: min-content;
    }
}


/* Contenidos patrocinados */

#contenidos-patrocinados .titular {
    padding: 0 0 48px 0;
}

#bloques-contenidos-patrocinados a,
#bloques-contenidos-patrocinados a:hover,
#bloques-contenidos-patrocinados a:visited {
    color: #717171;
}


/* Artículo patrocinado */

#articulo-patrocinado p {
    font-size: 16px;
}

#articulo-patrocinado .container {
    background-color: #C3D1D9;
    border-radius: 20px;
}

#articulo-patrocinado .titular {
    text-align: center;
}

#articulo-patrocinado h2 {
    border-bottom: 2px solid #E32A46;
    display: inline-block;
}

#articulo-patrocinado .btn-group {
    width: 100%;
}

#articulo-patrocinado .btn {
    border-color: #647684;
    color: #647684;
}

#articulo-patrocinado .btn-check:checked+.btn {
    background-color: #647684;
    color: #ffffff;
}

@media (max-width: 991px) {
    #articulo-patrocinado .btn-group {
        flex-direction: column;
        gap: 15px;
    }

    #articulo-patrocinado .btn {
        border-radius: var(--bs-btn-border-radius);
    }
}


/* Branded content */

#branded-content {
    
}

#branded-content p {
    font-size: 16px;
}

#branded-content .container {
    background-color: #E8CDA2;
    border-radius: 20px;
}

#branded-content .titular {
    text-align: center;
}

#branded-content h2 {
    border-bottom: 2px solid #E32A46;
    display: inline-block;
}

#branded-content .btn-primary {
    display: block;
    margin: 0 auto;
    background-color: #D65266;
    border-color: #D65266;
}

#branded-content .btn-primary:hover {
    background-color: #D65266;
    border-color: #D65266;
}

#branded-content .btn-primary svg {
    margin-right: 10px;
}

@media (max-width: 991px) {
    #articulo-patrocinado {
        background-color: #C3D1D9;
    }

    #branded-content {
        background-color: #E8CDA2;
    }
}


/* Tarjetas */

.tarjeta {
    border-radius: 10px;
    box-shadow: 0px 2px 8px 0px rgba(99,99,99,0.2);
}

.tarjeta.con-padding {
    padding: 30px;
}

.tarjetas {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.tarjetas .tarjeta {
    width: calc(33.333% - 30px);
    text-align: center;
}

.tarjetas .tarjeta .texto {
    color: #717171;
    font-size: 16px;
}

.tarjetas .tarjeta .texto h3 {
    font-family: 'Merriweather', serif;
    font-size: 20px;
    line-height: 1.2;
    padding: 0 0 15px 0;
    margin: 0;
    text-transform: none;
    color: #000;
    font-weight: normal;
}

@media (max-width: 991px) {
    .tarjetas {
        gap: 15px;
    }

    .tarjetas .tarjeta {
        width: 100%;
    }
}


/* Clave resultado */

.bloque.clave-resultado .container {
    background-color: #F7F7F7;
    border-radius: 20px;
    padding: 30px 30px;
}

.bloque.clave-resultado .container .icono-texto {
    display: flex;
    flex-wrap: wrap;
}

.bloque.clave-resultado .container .icono-texto .icono {
    width: 33.333%;
    padding: 0 50px 0 0;
}

.bloque.clave-resultado .container .icono-texto .icono svg {
    margin: 0 0 0 auto;
    display: block;
}

.bloque.clave-resultado .container .icono-texto .texto {
    width: 50%;
    font-size: 26px;
    line-height: 1.2;
    display: flex;
    position: relative;
}

.bloque.clave-resultado .container .icono-texto .texto > div {
    height: fit-content;
    align-self: center;
}

.bloque.clave-resultado .container .icono-texto .texto::before {
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    top: 10px;
    background-image: url(../img/comillas_00.svg);
    width: 58px;
    height: 47px;
}

@media (max-width: 991px) {
    .bloque.clave-resultado {
        background-color: #F7F7F7;
    }

    .bloque.clave-resultado .container {
        padding: 30px 30px 60px 30px;
    }

    .bloque.clave-resultado .container .icono-texto .icono {
        width: 100%;
        padding: 0 0 60px 0;
    }

    .bloque.clave-resultado .container .icono-texto .icono svg {
        margin: 0 auto;
    }

    .bloque.clave-resultado .container .icono-texto .texto {
        width: 100%;
        text-align: center;
    }

    .bloque.clave-resultado .container .icono-texto .texto::before {
        top: -10px;
    }
}


/* Por dónde empezar */

#por-donde-empezar {
    padding: 0 0 60px 0;
}

#por-donde-empezar h3 {
    font-family: 'Merriweather', serif;
    font-size: 20px;
    line-height: 1.2;
    padding: 0 0 15px 0;
    margin: 0;
    text-transform: none;
    color: #000;
    font-weight: normal;
}

@media (max-width: 991px) {
    #por-donde-empezar {
        text-align: center;
    }

    #por-donde-empezar .flecha {
        padding: 15px 0 0 0;
    }
}


/* Tablas */

.table.table-borderless {

}

.table.table-borderless tr td {
    color: #717171;
    padding-top: 15px;
    padding-bottom: 15px;
}

.table.table-borderless tr td:first-child {
    padding-left: 30px;
}

/*.table.table-borderless tr td:last-child {
    padding-right: 30px;
}*/

.table.table-borderless caption {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;
    font-size: 11px;
    color: #717171;
}


/* Tabla de tarifas web */

#tabla-tarifas-web {

}

#tabla-tarifas-web .titular {
    text-align: center;
    position: relative;
    padding-bottom: 30px;
}

#tabla-tarifas-web .titular h2 {
    border-bottom: 2px solid #E32A46;
    display: inline-block;
}

#tabla-tarifas-web .titular .leyenda {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

#tabla-tarifas-web tr th {
    text-align: center;
}

#tabla-tarifas-web tr:first-child th {
    font-size: 20px;
    padding: 0;
}

#tabla-tarifas-web tr td {
    text-align: center;
}

#tabla-tarifas-web tr td:first-child {
    text-align: left;
}

#tabla-tarifas-web tr:last-child td {
    font-weight: bold;
}

.fondo-p {
    background-color: #F1E1C7;
}

.fondo-s {
    background-color: #C3D1D9;
}

#tabla-tarifas-web th {
    background-color: #F1E1C7;
}

#tabla-tarifas-web tr:nth-child(2n) td {
    background-color: #F1E1C7;
}

#tabla-tarifas-web tr:first-child th:nth-child(3),
#tabla-tarifas-web tr:nth-child(2n) th:nth-child(5),
#tabla-tarifas-web tr:nth-child(2n) th:nth-child(6),
#tabla-tarifas-web tr:nth-child(2n) td:nth-child(5),
#tabla-tarifas-web tr:nth-child(2n) td:nth-child(6) {
    background-color: #C3D1D9;
}

#tabla-tarifas-web tr:first-child th {
    padding-top: 20px;
}

#tabla-tarifas-web tr:first-child th:first-child {
    border-top-left-radius: 20px;
}

#tabla-tarifas-web tr:first-child th:last-child {
    border-top-right-radius: 20px;
}

#tabla-tarifas-web tr:last-child td:first-child {
    border-bottom-left-radius: 20px;
}

#tabla-tarifas-web tr:last-child td:last-child {
    border-bottom-right-radius: 20px;
}


#tabla-tarifas-web tr td {
    position: relative;
}

#tabla-tarifas-web tr td:first-child {
    padding-left: 40px;
}

#tabla-tarifas-web tr th:first-child::before,
#tabla-tarifas-web tr td:first-child::before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    display: block;
    width: 20px;
    height: 100%;
    background-color: #F1E1C7;
}

#tabla-tarifas-web tr:last-child td:first-child::before {
    display: none;
}

#tabla-tarifas-web tr th:last-child,
#tabla-tarifas-web tr td:last-child {
    padding-right: 40px;
}

#tabla-tarifas-web tr th:last-child::before,
#tabla-tarifas-web tr td:last-child::before {
    position: absolute;
    right: 0;
    top: 0;
    content: ' ';
    display: block;
    width: 20px;
    height: 100%;
    background-color: #C3D1D9;
}

#tabla-tarifas-web tr:last-child td:last-child::before {
    display: none;
}

#tabla-tarifas-web-desktop {
    display: block;
}

#tabla-tarifas-web-mobile {
    display: none;
}

.tabla-desplegable {
    padding: 15px;
}

.tabla-desplegable.branded-content {
    background-color: #E8CDA2;
}

.tabla-desplegable.articulo-patrocinado {
    margin-top: 15px;
    background-color: #B9CEE0;
}

.tabla-desplegable .up {
    display: none;
}

.tabla-desplegable .down {
    display: block;
}

.tabla-desplegable .cols {
    display: none;
}

.tabla-desplegable .abierta .up {
    display: block;
}

.tabla-desplegable .abierta .down {
    display: none;
}

.tabla-desplegable .abierta .cols {
    display: flex;
}

.tabla-desplegable h3 {
    color: #000000;
    font-size: 20px;
    text-transform: none;
    text-align: center;
}

.tabla-desplegable .fila {
    background-color: #ffffff;
    color: #717171;
}

.tabla-desplegable .barra-titulo {
    display: block;
    text-decoration: none;
    position: relative;
    padding: 15px 15px 0 15px;
    border-bottom: 1px solid #CED4DA;
}

.tabla-desplegable .fila.abierta .barra-titulo {
    border-bottom: 0 none;
}

.tabla-desplegable .barra-titulo .caret {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
}

.tabla-desplegable .barra-titulo .caret img {
    width: 15px;
    height: auto;
}

.tabla-desplegable .titulo {
    padding: 0 0 10px 0;
    text-align: center;
    color: #717171;
}

.tabla-desplegable .fila.abierta .titulo {
    border-bottom: 1px solid #CED4DA;
}

.tabla-desplegable .nombre {
    color: #000000;
    font-weight: bold;
}

.tabla-desplegable .valor {
    padding: 10px 0 0 0;
}

.tabla-desplegable .cols  {
    border-bottom: 1px solid #CED4DA;
}

.tabla-desplegable .cols > div {
    flex: 1;
    text-align: center;
    padding: 10px 0;
}

.tabla-desplegable .totales {
    display: flex;
    text-align: center;
    padding: 15px;
    background-color: #ffffff;
    margin: 15px 0 0 0;
}

.tabla-desplegable .total {
    flex: 1;
    font-weight: bold;
    color: #717171;
}

@media (max-width: 991px) {
    #tabla-tarifas-web .container {
        padding-right: 0;
        padding-left: 0;
        overflow: hidden;
    }

    #tabla-tarifas-web .titular {
        display: block;
    }

    #tabla-tarifas-web .titular .leyenda {
        position: relative;
        right: inherit;
        top: inherit;
        padding: 15px 0 0 0;
    }

    #tabla-tarifas-web-desktop {
        display: none;
    }

    #tabla-tarifas-web-mobile {
        display: block;
    }
}


/* Extras y Portales verticales */

#extras-y-portales-verticales {
    padding: 0 0 60px 0;
}

#extras-y-portales-verticales h3 {
    font-family: 'Merriweather', serif;
    font-size: 20px;
    line-height: 1.2;
    padding: 0 0 15px 0;
    margin: 0;
    text-transform: none;
    color: #000;
    font-weight: normal;
}

.tarjeta.extras > div {
    padding: 30px 30px 0 30px;
}

.tarjeta.extras td:nth-child(2) {
    text-align: right;
}


.tarjeta.portales-verticales {
    display: flex;
    flex-wrap: wrap;
}

.tarjeta.portales-verticales .icono-texto {
    width: 30%;
    padding: 20px 15px 15px 15px;
    text-align: center;
}

#extras-y-portales-verticales .tarjeta.portales-verticales .icono-texto .texto {
    padding-top: 20px;
}

.tarjeta.portales-verticales .tabla {
    width: 70%;
}

.tarjeta.portales-verticales .tabla .titulo {
    padding: 30px 0 15px 70px;
}

.tarjeta.portales-verticales .tabla td:nth-child(3) {
    text-align: right;
}

.tarjeta.portales-verticales .tabla td:first-child {
    padding-left: 15px;
}

.tarjeta.portales-verticales .tabla td:last-child {
    padding-left: 15px;
}

@media (max-width: 991px) {
    #extras-y-portales-verticales {
        padding: 0 0 30px 0;
    }

    #extras-y-portales-verticales .d-flex {
        margin-bottom: 15px;
    }

    .tarjeta.portales-verticales .icono-texto {
        width: 100%;
    }

    .tarjeta.portales-verticales .tabla {
        width: 100%;
    }
}


/* Gráfico de tarta */

.grafico-tarta {
    position: relative;
    padding: 60px 0 60px 0;
    margin-bottom: 30px;
}

.grafico-tarta svg {
    position: absolute;
    height: 30%;
    width: auto;
}

.grafico-tarta .icono-m {
    left: 32%;
    top: calc(50% - 30% / 2);
}

.grafico-tarta .icono-h {
    right: 32%;
    top: calc(50% - 30% / 2);
}

.grafico-tarta .ct-series-a .ct-slice-pie {
    fill: #D65266;
}

.grafico-tarta .ct-series-b .ct-slice-pie {
    fill: #A23748;
}

.grafico-tarta .porcentaje {
    position: absolute;
    color: #717171;
    text-align: center;
}

.grafico-tarta .porcentaje .valor {
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

.grafico-tarta .porcentaje .etiqueta {
    font-size: 16px;
}

.grafico-tarta .porcentaje.h {
    right: 0;
    top: 0;
}

.grafico-tarta .porcentaje.m {
    left: 0;
    bottom: 0;
}


/* Gráfico de barras */

.grafico-barras {
    color: #717171;
    font-size: 16px;
    margin-bottom: 30px;
}

.grafico-barras .fila {
    display: flex;
    padding: 0 0 10px 0;
    width: 100%;
}

.grafico-barras .etiqueta {
    width: 20%;
    text-align: right;
    padding: 0 10px 0 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}

.grafico-barras .fila .valores {
    width: 20%;
    text-align: right;
    padding: 10px 10px 0 0;
}

.grafico-barras .fila .barra {
    width: 80%;
}

.grafico-barras .fila .barra .color {
    height: 40px;
}

.grafico-barras .fila:nth-child(2) .barra .color { background-color: #E7E9EC; }
.grafico-barras .fila:nth-child(3) .barra .color { background-color: #CED4DA; }
.grafico-barras .fila:nth-child(4) .barra .color { background-color: #B8BFC6; }
.grafico-barras .fila:nth-child(5) .barra .color { background-color: #A4ACB3; }
.grafico-barras .fila:nth-child(6) .barra .color { background-color: #939BA2; }
.grafico-barras .fila:nth-child(7) .barra .color { background-color: #777D83; }

.grafico-barras .fila .escala {
    width: 80%;
    display: flex;
    border-top: 1px solid #717171;
}

.grafico-barras .fila .escala .t {
    width: calc(100% / 6);
}


/* Nuestros datos */

#nuestros-datos .container {
    padding: 25px 0 0 0;
}

#barra-nuestros-datos .container {
    padding: 24px 0 33px 0;
    background-color: #F7F7F7;
}

#barra-nuestros-datos .titular {
    text-align: center;
    padding: 0;
    position: relative;
}

#barra-nuestros-datos .titular h2 {
    border-bottom: 2px solid #E32A46;
    display: inline-block;
}

#barra-nuestros-datos .titular a {
    position: absolute;
    right: 30px;
    top: 0;
}

#barra-nuestros-datos .titular a svg {
    transform: rotate(180deg);
}

#nuestros-datos.abierto #barra-nuestros-datos .titular a svg {
    transform: rotate(0deg);
}

#contenido-nuestros-datos {
    display: none;
}

#nuestros-datos.abierto #contenido-nuestros-datos {
    display: block;
}

#nuestros-datos h3 {
    text-align: center;
    font-family: 'Merriweather', serif;
    color: #000000;
    font-size: 20px;
    padding: 0 0 25px 0;
    text-transform: none;
}

#nuestros-datos .tarjeta {
    font-size: 16px;
    color: #717171;
    padding: 15px;
    display: flex;
    justify-content: center;
    margin: 0 20%;
}

#nuestros-datos .tarjeta .icono {
    padding: 0 30px 0 0;
}

#nuestros-datos .tarjeta .dato {
    text-align: center;
}

#nuestros-datos .tarjeta .dato .cifra {
    font-size: 32px;
    font-weight: bold;
}

#datos-audiencia-portales-verticales .tarjeta {
    padding: 10px 0 0 0;
}

.portales-verticales.tarjeta a, 
.portales-verticales.tarjeta a:hover, 
.portales-verticales.tarjeta a:visited {
    color: #717171;
    font-weight: bold;
}

#datos-audiencia-portales-verticales .table.table-borderless tr td:first-child {
    padding-left: 15px;
}

#datos-audiencia-portales-verticales .table.table-borderless tr:first-child th {
    background-color: #ffffff;
    text-align: center;
}

#datos-audiencia-portales-verticales .table.table-borderless tr:first-child th:nth-child(3),
#datos-audiencia-portales-verticales .table.table-borderless tr:first-child th:nth-child(4) {
    border-bottom: 1px solid #979797;
}

#datos-audiencia-portales-verticales .table.table-borderless tr td:nth-child(3),
#datos-audiencia-portales-verticales .table.table-borderless tr td:nth-child(4) {
    text-align: right;
    font-weight: bold;
}

#datos-audiencia-portales-verticales tr:first-child th {
    --bs-table-bg-type: #ffffff;
}

#datos-audiencia-portales-verticales .table.table-borderless caption {
    padding-top: 15px;
    padding-bottom: 0;
    padding-left: 15px;
}

#datos-redes-sociales .lista-redes {
    display: flex;
    flex-wrap: wrap;
}

#datos-redes-sociales .lista-redes .red {
    flex: 1;
    text-align: center;
}

#datos-redes-sociales .lista-redes .red {
    padding: 0 15px 30px 15px;
}

#datos-redes-sociales .lista-redes .red .icono {
    padding: 0 0 15px 0;
}

#datos-redes-sociales .lista-redes .red .datos {
    color: #717171;
}

#datos-redes-sociales .lista-redes .red .datos .cifra {
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

@media (max-width: 991px) {
    #nuestros-datos .container {
        padding-right: 30px;
        padding-left: 30px;
    }

    #barra-nuestros-datos .titular {
        display: flex;
    }

    #barra-nuestros-datos .titular h2 {
        display: block;
    }

    #barra-nuestros-datos .titular a {
        display: block;
        position: relative;
        right: inherit;
        top: inherit;
        margin-left: auto;
    }

    #nuestros-datos .tarjeta {
        margin: 0 0 30px 0;
        overflow: hidden;
    }

    #nuestros-datos .tarjeta table td:first-child {
        padding-left: 15px;
    }

#datos-audiencia-portales-verticales table th:last-child,
#datos-audiencia-portales-verticales table td:last-child {
        display: none;
    }
}


/* Modal braded content */

#modal-branded-content h3 {
    font-size: 16px;
    line-height: 1;
    margin: 0;
    color: #717171;
    text-transform: none;
}

#modal-branded-content .contenido.desktop {
    display: block;
}

#modal-branded-content .contenido.mobile {
    display: none;
}

#modal-branded-content .contenido {
    position: relative;
}

#modal-branded-content .contenido img {
    display: block;
    width: 100%;
    height: auto;
}

#modal-branded-content .contenido .marcador {
    position: absolute;
}

#modal-branded-content .contenido.desktop .marcador-1 {
    left: 45%;
    top: 4%;
}
#modal-branded-content .contenido.desktop .marcador-2 {
    left: 25%;
    top: 21%;
}
#modal-branded-content .contenido.desktop .marcador-3 {
    left: 65%;
    top: 33%;
}
#modal-branded-content .contenido.desktop .marcador-4 {
    left: 15%;
    top: 45%;
}
#modal-branded-content .contenido.desktop .marcador-5 {
    left: 26%;
    top: 63%;
}
#modal-branded-content .contenido.desktop .marcador-6 {
    left: 60%;
    top: 73%;
}
#modal-branded-content .contenido.desktop .marcador-7 {
    left: 18%;
    top: 89%;
}

#modal-branded-content .contenido.mobile .marcador-1 {
    left: 32%;
    top: 4%;
}
#modal-branded-content .contenido.mobile .marcador-2 {
    left: 32%;
    top: 20%;
}
#modal-branded-content .contenido.mobile .marcador-3 {
    left: 32%;
    top: 48%;
}
#modal-branded-content .contenido.mobile .marcador-4 {
    left: 32%;
    top: 37%;
    display: none;
}
#modal-branded-content .contenido.mobile .marcador-5 {
    left: 32%;
    top: 70%;
}
#modal-branded-content .contenido.mobile .marcador-6 {
    left: 32%;
    top: 84%;
}
#modal-branded-content .contenido.mobile .marcador-7 {
    left: 32%;
    top: 91%;
}

@media (max-width: 991px) {
    #modal-branded-content .contenido.desktop {
        display: none;
    }

    #modal-branded-content .contenido.mobile {
        display: block;
    }
}