:root {
    --red: #e61f22;
    --white: #ffffff;
    --gray-xs-light: #f7f7f7;
    --gray-light: #dfdfdf;
    --gray-dark: #2e2e2e;
    --black: #1c1c1c
}

* {
    position: relative;
    vertical-align: middle;
    font-family: sans-serif;
    box-sizing: border-box;
    font-size: 16px;
}

body {
    background: var(--gray-xs-light);
}

body,
ul {
    margin: 0;
    padding: 0;
}

header {
    position: sticky;
    top: 0;
    padding: 0 16px;
    background: var(--white);
    box-shadow: 1px 0 16px rgba(0, 0, 0, .15);
    z-index: 10;
}

header::before {
    content: '';
    width: 100%;
    height: 56px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0, var(--white) 33%);
    z-index: 10;
}

header>* {
    display: inline-block;
}

header nav {
    width: calc(100% + 32px);
    margin: 0 0 0 -16px;
    padding: 0 16px;
    overflow-x: scroll;
    overflow-y: hidden;
}

header nav ul {
    width: max-content;
}

header nav ul::after {
    content: '';
    width: 48px;
    height: 24px;
    background: linear-gradient(90deg, rgba(230, 31, 34, 0) 0%, var(--red) 100%);
    position: sticky;
    top: 8px;
    right: -16px;
    display: inline-block;
}

img {
    width: 100%;
}

a {
    text-decoration: none;
    color: currentColor;
}

b {
    vertical-align: bottom;
}

input,
select,
textarea {
    min-height: 36px;
    border-radius: 8px;
    padding: 0 8px;
    background: var(--gray-xs-light);
    border: 2px solid var(--gray-light)
}

hr {
    margin: 4px 0 2px;
}

button {
    border: none;
    background: transparent;
    border-radius: 8px;
}

.button {
    padding: 8px;
    margin: 0 4px;
}

.close {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 12px;
    right: 12px;
}

.comment,
#comments output {
    display: block;
    margin: 16px 0;
    width: 100%;
}

.fb-comments iframe {
    width: 100% !important;
}

#comments output:not(.active) {
    display: none;
}

#totop,
#share,
#zoom {
    position: fixed;
    right: 16px;
    bottom: 72px;
    width: 48px;
    height: 48px;
    padding: 12px 16px 14px;
    background: var(--gray-dark);
    box-shadow: 0 8px 16px rgb(0, 0, 0, .4);
    z-index: 9;
}

.grupoWhats{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #E5E5E5;
    border-radius: 5px;
    width: 100%;
    margin: 20px 0;
    text-decoration: none !important;
    max-width: 315px;
}

.grupoWhats h5{
    font-size: 11px;
    font-family: "lato-bold", sans-serif;
    line-height: 16px;
    color: #2fb140;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.grupoWhats h6{
    margin: 0;
    font-size: 11px;
    font-family: "lato-bold", sans-serif;
    color: #333333;
}

.tnoGoogleNews {
    width: 50%;
    display: flex;
    width: fit-content;
    text-decoration: unset !important;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #E5E5E5;
    border-radius: 5px;
}
.tnoGoogleNews img {
    width: 30px;
}
.tnoGoogleNews h2 {
    color: #333333;
    font-size: 12px;
    line-height: 16px;
    margin: 0 auto;
    text-align: left;
    font-weight: bold;
}



#share {
    background: var(--red);
}

#share *,
#zoom * {
    vertical-align: middle !important;
}

#share.ajust {
    bottom: 140px;
}

#zoom {
    right: unset;
    left: 16px;
}

.reverse {
    transform: rotate(180deg);
}

nav [role=menubar] li {
    font-weight: 700;
    display: inline-block;
    margin: 12px 12px 12px 0;
}

#feed article {
    background: var(--white);
    margin: 16px 0;
    overflow: hidden;
}

#feed article:first-of-type {
    margin: 0 0 16px;
}

#feed section:first-of-type article:first-of-type {
    margin: 0;
}

#feed article :not([role=img]):not(a) {
    padding: 8px 12px;
}

#feed article iframe {
    padding: 0 !important
}

#feed article a {
    display: block;
}

#feed article h2 {
    font-size: 19px;
    margin: 0;
    line-height: 1.4;
}

#feed article :not(svg)[role=img] {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 2px var(--gray-xs-light);
}

#feed article :not(svg)[role=img] {
    height: 50vh;
}

#feed article .taxonomy,
#article article .taxonomy {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    position: absolute;
    z-index: 1;
}

#feed article.video .taxonomy {
    display: none;
}

#feed article.video iframe {
    z-index: 3;
}

#feed article .play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    position: absolute;
    bottom: 16px;
    left: 12px;
    padding: 12px !important;
    background: var(--white);
    z-index: 2;
}

#feed article .play svg {
    width: 40px;
    padding: 0;
    display: block;
}

#feed article.expand :not(svg)[role=img]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 100%);
}

#feed article.expand :not(svg)[role=img] {
    max-height: 200px;
    display: block;
}

#feed article.expand .taxonomy {
    padding: 6px 8px;
    top: 16px;
    left: 16px;
    background: var(--red);
    color: var(--white);
}

#feed article.compact :not(svg)[role=img] {
    border-radius: 8px;
    max-height: 100px;
    max-width: 140px;
    margin: 12px;
    display: inline-block;
}

#feed article.compact h2 {
    font-size: 17px;
    width: calc(100% - 170px);
    padding: 40px 12px 0 0;
    vertical-align: top;
    max-height: 120px;
    overflow: hidden;
    display: -webkit-inline-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#feed article.compact .taxonomy {
    top: 4px;
    left: 152px;
    max-width: 206px;
    color: var(--red);
}

#article article {
    background: var(--white);
    padding: 0 12px;
    z-index: 1;
}

#article article * {
    vertical-align: baseline;
}

#article article .taxonomy {
    padding: 0 8px;
    margin: 24px 0 0;
    min-height: 25.6px;
    line-height: 25.6px;
    background: var(--red);
    color: var(--white);
    position: relative;
    display: inline-block;
}

#article article h1 {
    font-size: 24px;
    max-width: 90vw;
}

#article article small,
#article article small *,
#article article time,
#article article figcaption,
#article article .author,
#article article .caption {
    font-size: 13px;
    opacity: .6;
}

#article article small * {
    opacity: 1;
}

#article article figcaption *,
#article article .caption * {
    font-size: 13px;
}

#article article .author {
    display: block;
    opacity: 1;
}

#article article figcaption.source,
#article article .caption {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 4px;
    font-weight: 700;
    border-radius: 4px;
    background: var(--white);
    max-width: 90%;
}

#article article figcaption.source svg,
#article article .caption svg {
    width: 14px;
    vertical-align: text-top;
}

#article article figure,
#article article video,
#article article .video {
    margin: 24px 0;
    border-radius: 8px;
    overflow: hidden;
}

#article article figure{
    margin: 24px 0 10px;
}

#recommendation,
#recommendation * {
    z-index: 0;
}

.subtitle{
    font-weight: 400;
    line-height: 20px;
} 

.tn-legend:empty{
    height: 1px;
    display: block;
    margin: 13px 0 0;
}

.tn-legend {
    font-size: 14px;
    margin: 0 0 24px 0;
    display: block;
}

.tn-copyright{
    position: absolute;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 0 0 5px 0;
    bottom: 56px!important;
    right: 12px;
    background: rgba(255,255,255,.7);
}

.cards .tn-legend {
    white-space: nowrap;
    max-width: 93%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #FFF;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 1 !important;
    margin: 0 !important;
}

.cards .tn-copyright{
    bottom: unset !important;
    top: 24px;
}

#article article figure img {
    border-radius: 8px;
}

#article article video,
#article article .video {
    max-width: 100%;
    display: block;
}

#article article p {
    line-height: 1.8;
    letter-spacing: .2px;
}

#article article a {
    color: var(--red);
    font-weight: 700;
    text-decoration: underline;
}

#article article table {
    max-width: calc(100vW - 24px);
    border-radius: 8px;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    overflow-y: hidden;
}

#article article th,
#article article td {
    text-align: left;
    padding: 8px;
    max-width: 100vw;
}

#article article tr:nth-child(even) {
    background-color: #f2f2f2
}

#article article iframe {
    width: 100%;
    min-height: 206px;
    border: none;
    border-radius: 8px;
}

#article article .ads-feed iframe {
    min-height: unset;
    border-radius: 0;
}

#article #tags {
    margin: 24px 0 32px;
    line-height: 32px;
}

#article #tags b {
    display: block;
}

#article .tag {
    border: 1px solid var(--gray-light);
    border-radius: 8px;
    padding: 2px 8px;
    margin: 4px 0;
    display: inline-block;
    text-decoration: none;
    text-transform: lowercase;
}

#article-body .widget {
    padding: 0 0 16px;
    display: block;
}

.carousel-card {
    width: 100%;
    padding: 12px 8px;
    overflow-x: scroll;
    overflow-y: hidden;
    background: var(--gray-light);
}

.carousel-card .cards {
    width: max-content;
}

.carousel-card .cards * {
    color: #333;
}

.carousel-card .cards>* {
    margin: -140px 6px -8px;
    padding: 12px;
    background: var(--white);
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 16px rgba(0, 0, 0, .04);
}

.carousel-card .cards.compact>* {
    height: 128px;
    width: 172px;
}

.carousel-card .cards.expand>* {
    max-width: 411px;
    height: 320px;
    padding: 0;
}

.carousel-card i {
    width: 28px;
    height: 28px;
    background: var(--red);
    display: inline-block;
    margin: 0 8px 0 0;
    padding: 6px;
    border-radius: 6px;
}

.carousel-card i * {
    vertical-align: super;
}

.carousel-card b {
    font-size: 32px;
    display: block;
    color: var(--red);
}

.carousel-card img {
    border-radius: 8px;
}

.carousel-card select {
    display: block;
    padding: 8px;
    margin: 12px 0;
    border-radius: 8px;
    width: 100%;
}

.carousel-card.image {
    background: transparent;
    margin: 12px 0 0 -12px;
    padding: 12px 8px 0;
    width: 100vw
}

.carousel-card.image figure {
    background: var(--gray-dark);
    margin: 0 !important
}

.carousel-card.image figure .count {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    margin: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--white);
}

.carousel-card.image li {
    min-width: 360px;
    margin: -206px 6px -8px;
    padding: 12px 0;
}

.card-title {
    width: calc(100% - 36px);
    display: inline-block;
    font-weight: 700;
}

.card-description {
    margin: 8px 0 0 0;
    display: block;
}

.cards.compact::after {
    content: '';
    width: 48px;
    height: 140px;
    background: linear-gradient(90deg, rgba(223, 223, 223, 0) 0, var(--gray-light) 80%);
    position: sticky;
    top: -6px;
    right: -16px;
    display: inline-block;
}

.image .cards::after {
    content: '';
    width: 48px;
    height: 206px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, var(--white) 80%);
    position: sticky;
    top: -6px;
    right: -16px;
    display: inline-block;
}

#bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--white);
    z-index: 10;
}

#bottom-bar nav {
    width: calc(100% + 32px);
    margin: 0 0 0 -16px;
    padding: 0 16px;
    overflow: hidden;
    text-align: center;
    box-shadow: -1px 0 16px rgba(0, 0, 0, .15);
}

#bottom-bar nav[role=menubar] li {
    margin: 8px 12px 12px;
}

#bottom-bar nav button::after {
    content: attr(aria-label);
    display: block;
    font-size: 12px;
}

footer {
    min-height: 64px;
    padding: 0 8px 64px;
    background: var(--black);
    color: var(--white);
    fill: var(--white);
    text-align: center;
    z-index: 1;
}

footer .logo img {
    display: block;
    max-width: 128px;
    margin: 56px auto 24px;
    z-index: 1;
}

footer h3 {
    margin: 48px 0 8px;
}

#tool {
    float: right;
    position: unset;
}

#search-bar {
    position: absolute;
    left: 12px;
    top: 8px;
    height: 40px;
    border: 2px solid var(--red);
    padding: 0 8px;
    width: calc(100% - 128px);
    z-index: 10;
}

#search-bar:not(.active) {
    display: none;
}

#toggle,
#search {
    height: 40px;
    margin: 8px 0 0 8px;
    padding: 8px;
    z-index: 10;
}

#toggle svg,
#search svg {
    width: 20px;
    height: 20px;
}

#menu-toggle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    padding: 72px 16px;
    overflow-y: scroll;
    z-index: 5;
}

#menu-toggle:not(.active) {
    display: none;
}

#menu-toggle li,
.menu-footer li {
    padding: 12px 0;
    font-weight: 700;
    border-bottom: 2px solid var(--gray-light);
    list-style: none;
}

.menu-footer li {
    border-color: var(--gray-dark);
    font-weight: 400;
}

#menu-toggle li[aria-expanded] svg {
    display: inline-block;
    width: 12px;
    height: 16px;
    position: absolute;
    right: 24px;
}

#menu-toggle li[aria-expanded=true] {
    padding: 12px 24px
}

#menu-toggle li.submenu,
#menu-footer li.submenu {
    border-bottom: none;
    background: var(--gray-xs-light);
    padding: 0 24px;
}

#menu-toggle li.submenu:not(.active),
#menu-footer li.submenu:not(.active) {
    display: none;
}

#socials {
    text-align: center;
    border: none !important;
}

#socials a {
    width: 24px;
    display: inline-block;
    margin: 0 12px;
}

#socials svg {
    max-width: 24px;
}

#socials .phone {
    width: 100%;
    padding: 8px 16px;
    margin: 0;
    color: var(--red);
}

#socials .phone svg {
    margin: 4px 12px 4px 0;
}

#social-list {
    padding: 24px;
    display: block;
    text-align: center;
}

#social-list li {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 12px;
}

.widget {
    padding: 8px 12px;
    margin: 16px 0;
    background: var(--white);
    display: block;
}

.widget img {
    padding: 8px 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
}

.widget h2 {
    font-size: 18px;
    width: 100%;
    display: inline-block;
}

#related a {
    text-decoration: none !important;
    padding: 16px 0;
    display: block;
    border-bottom: 2px solid var(--gray-light);
}

#related a:last-child {
    border: none;
}

#related a>* {
    vertical-align: text-top;
}

#related a svg {
    width: 16px;
    height: 24px;
    display: inline-block;
    transform: rotate(-90deg);
}

#related a h3 {
    margin: 0;
    display: inline-block;
    margin: 0 0 0 8px;
    width: calc(90vw - 40px);
}

#blogs-columns li {
    list-style: none;
    padding: 8px 16px;
}

#blogs-columns .columns-img {
    width: 64px;
    height: 64px;
    display: inline-block;
    border-radius: 50%;
}

#blogs-columns .columns-info {
    max-width: calc(100% - 72px);
    padding: 0 12px;
    display: inline-block;
}

#blogs-columns .columns-title {
    font-size: 12px;
    margin: 12px 0 0;
    opacity: .8;
    text-transform: uppercase;
}

#blogs-columns .columns-article {
    margin: 12px 0;
}

#most-read li {
    position: relative;
    list-style: none;
    padding: 16px 12px;
}

#most-read li a {
    font-size: 15px;
    width: calc(100% - 40px);
    float: right;
}

#most-read li span {
    color: var(--gray-light);
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
}

#most-read li span::before {
    content: '';
    position: absolute;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, var(--white) 100%);
    width: 100%;
    height: 64px;
}

#last-news output {
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

#last-news .related {
    display: none;
}

.has-toggle #barrauol {
    display: none;
}

.logo {
    margin: 8px 0;
    max-width: 100px;
    max-height: 40px;
    height: auto;
    z-index: 10;
}

.main-cl,
.main-cl * {
    color: var(--red);
    fill: var(--red)
}

.main-bg,
.button {
    background: var(--red);
    color: var(--white);
    fill: var(--white);
}

.main-bn,
.main-bg *,
#social-list li * {
    color: var(--white);
    fill: #fff
}

#feed article .time,
#feed article .locale {
    display: inline-block;
    font-size: 13px;
    opacity: .6;
}

#feed article .time {
    padding: 8px 0 8px 12px;
}

#feed article .time::before {
    content: attr(data-timeago);
    margin-left: 4px;
}

#feed article .time::after {
    content: "\2014\00a0";
    margin-left: 4px;
}

#feed article.expand .time,
#feed article.compact .time {
    padding: 0 0 16px 12px
}

#feed article .locale {
    padding: 8px 12px 8px 4px;
}

#feed article.expand .locale,
#feed article.compact .locale {
    padding: 0 12px 16px 4px
}

#feed article.related {
    margin: 0;
    padding: 8px 12px;
}

#feed article.related a:before {
    content: '';
    background: var(--red);
    width: 6px;
    height: 16px;
    display: inline-block;
    border-radius: 3px;
    vertical-align: middle;
}

#feed article.related h2 {
    font-size: 16px;
    font-weight: 400;
    display: inline;
    vertical-align: middle;
}

.share {
    fill: var(--white);
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    position: absolute;
    top: 150px;
    right: 4px;
    z-index: 1;
}

#feed article.compact:not(:last-of-type) {
    margin: 0;
}

#feed article.compact:last-of-type {
    margin-top: 0;
}

#feed article.compact .share {
    fill: #000;
    top: 0;
    right: 4px;
    opacity: .6;
}

.share svg {
    width: 100%;
    margin: 0 !important;
}

[class^=ads] {
    background: var(--gray-light);
    display: flex;
    align-items: center;
    z-index: 2;
}

[class^=ads]>* {
    width: auto;
    display: block !important;
    margin: 0 auto;
}

[class^=ads]>[role=img] {
    font-size: 0;
}

[class^=ads] .reminder {
    text-align: center;
    width: 100%;
    height: 16px;
    position: absolute;
    top: -15px;
    left: 0;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    z-index: 10;
    background: var(--gray-xs-light);
    opacity: .9;
}

.ads-feed {
    margin: 16px 0;
}

#article .ads-feed {
    margin: 28px 0 16px -12px;
    width: 100vw;
}

#article .ads-feed:last-of-type {
    margin: 16px 0 16px -12px;
}

#article .ads-feed:last-of-type .reminder {
    display: none !important;
}

.ads-footer img {
    max-height: 60px;
}

dialog[open] {
    position: fixed;
    bottom: 0;
    left: 0;
    border-radius: 12px 12px 0 0;
    border: none;
    display: block;
    padding: 16px 24px 48px;
    margin: 0 auto;
    height: auto;
    width: 100%;
    background: var(--white);
    box-shadow: 0 0 16px rgba(0, 0, 0, .2);
    z-index: 10;
}

dialog:not([open]) {
    display: none;
}

dialog h3 {
    font-size: 18px;
}

dialog output a {
    display: block;
    padding: 12px 0;
    font-weight: 700;
}

dialog output a svg {
    width: 16px;
    vertical-align: text-top;
    margin: 0 0 0 12px;
}

.snippet,
[role=group] li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .5px;
}

.pseud-none::before,
.pseud-none::after {
    display: none;
}

[onclick] {
    cursor: pointer;
}

#live {
    padding: 0 0 0 16px;
}

#live::after,
#live::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    height: 8px;
    width: 8px;
    border-radius: 50%;
}

#live::before {
    background: #920202;
    z-index: 1;
}

#live::after {
    background: var(--white);
    animation: pulse 1s infinite;
    z-index: 0;
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .7
    }
    100% {
        -webkit-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

[style*="--aspect-ratio"]> :first-child {
    width: 100%;
}

[style*="--aspect-ratio"]>img {
    height: auto !important;
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }
    [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }
    [style*="--aspect-ratio"]> :first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
}

@media only screen and (min-width: 1024px) {}