/* =====================================================================
   TimeTac BLOG restyle — SPANISH only
   Covers BOTH:
     · Blog overview / index page (body.blog)
     · Single blog post (body.single-post)
     · Category / archive pages (body.archive)
   Matches the Recursos design: Inter + Plus Jakarta Sans,
   light-gray cards with rounded corners, black headings, dark gray body.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;700;800&display=swap");
/* =====================================================================
   1) TOKENS + PAGE BG  (all blog page variants)
   ===================================================================== */
body.single-post:lang(es),
body.blog:lang(es),
body.archive:lang(es),
body.home:lang(es) {
--ttn-font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
--ttn-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--ttn-black: #1F1F1F;
--ttn-text-body: #374151;
--ttn-text-muted: #6B7280;
--ttn-bg-page: #F1F1F2;
--ttn-bg-card: #EFEFEF;
--ttn-bg-card-inner:#FFFFFF;
--ttn-border-light: #E5E5E7;
--ttn-primary: #0064DE;
--ttn-primary-hover: #0052B8;
--ttn-dark-blue: #003B9E;
--ttn-dark-blue-2: #00357A;
--ttn-r-card-sm: 16px;
--ttn-r-card: 24px;
--ttn-r-card-lg: 32px;
--ttn-r-pill: 100px;
--ttn-ls-tight: -0.02em;
--ttn-ls-tighter: -0.04em;
background-color: var(--ttn-bg-page) !important;
/* font-family is intentionally NOT set on body — would cascade into
       the nav/header and trigger hyphenation. Scoped to .content below. */
}
/* =====================================================================
   2) BASE TYPOGRAPHY  (scoped to .content so nav stays untouched)
   ===================================================================== */
body.single-post:lang(es) .content,
body.blog:lang(es) .content,
body.archive:lang(es) .content,
body.home:lang(es) .content {
font-family: var(--ttn-font-body) !important;
color: var(--ttn-text-body) !important;
}
body.single-post:lang(es) .content,
body.single-post:lang(es) .content p,
body.single-post:lang(es) .content li,
body.single-post:lang(es) .content span,
body.single-post:lang(es) .content article,
body.blog:lang(es) .content,
body.blog:lang(es) .content p,
body.blog:lang(es) .content li,
body.blog:lang(es) .content span,
body.archive:lang(es) .content,
body.archive:lang(es) .content p,
body.archive:lang(es) .content li,
body.archive:lang(es) .content span,
body.home:lang(es) .content,
body.home:lang(es) .content p,
body.home:lang(es) .content li,
body.home:lang(es) .content span {
font-family: var(--ttn-font-body) !important;
color: var(--ttn-text-body) !important;
line-height: 1.6;
}
body.single-post:lang(es) .content h1,
body.single-post:lang(es) .content h2,
body.single-post:lang(es) .content h3,
body.single-post:lang(es) .content h4,
body.single-post:lang(es) .content h5,
body.single-post:lang(es) .content h6,
body.single-post:lang(es) .content .h1,
body.single-post:lang(es) .content .h2,
body.single-post:lang(es) .content .h3,
body.single-post:lang(es) .content .h4,
body.single-post:lang(es) .content .h5,
body.single-post:lang(es) .content .h6,
body.blog:lang(es) .content h1,
body.blog:lang(es) .content h2,
body.blog:lang(es) .content h3,
body.blog:lang(es) .content h4,
body.blog:lang(es) .content h5,
body.blog:lang(es) .content h6,
body.blog:lang(es) .content .h1,
body.blog:lang(es) .content .h2,
body.blog:lang(es) .content .h3,
body.blog:lang(es) .content .h4,
body.blog:lang(es) .content .h5,
body.blog:lang(es) .content .h6,
body.archive:lang(es) .content h1,
body.archive:lang(es) .content h2,
body.archive:lang(es) .content h3,
body.archive:lang(es) .content h4,
body.archive:lang(es) .content h5,
body.archive:lang(es) .content h6,
body.home:lang(es) .content h1,
body.home:lang(es) .content h2,
body.home:lang(es) .content h3,
body.home:lang(es) .content h4,
body.home:lang(es) .content h5,
body.home:lang(es) .content h6 {
font-family: var(--ttn-font-display) !important;
color: var(--ttn-black) !important;
font-weight: 800 !important;
letter-spacing: var(--ttn-ls-tight);
line-height: 1.15;
text-wrap: balance;
word-break: normal !important;
}
body.single-post:lang(es) .content h1,
body.blog:lang(es) .content h1,
body.archive:lang(es) .content h1,
body.home:lang(es) .content h1 { font-size: clamp(36px, 4vw, 48px); margin-bottom: 24px; }
body.single-post:lang(es) .content h2,
body.blog:lang(es) .content h2,
body.archive:lang(es) .content h2,
body.home:lang(es) .content h2 { font-size: clamp(28px, 3vw, 36px); margin: 40px 0 16px; }
body.single-post:lang(es) .content h3,
body.blog:lang(es) .content h3,
body.archive:lang(es) .content h3,
body.home:lang(es) .content h3 { font-size: clamp(22px, 2.5vw, 28px); margin: 32px 0 12px; }
body.single-post:lang(es) .content h4,
body.blog:lang(es) .content h4,
body.archive:lang(es) .content h4,
body.home:lang(es) .content h4 { font-size: clamp(20px, 2vw, 24px); margin: 24px 0 8px; }
/* Links */
body.single-post:lang(es) .content a,
body.blog:lang(es) .content a,
body.archive:lang(es) .content a,
body.home:lang(es) .content a {
color: var(--ttn-primary) !important;
text-decoration: underline;
text-underline-offset: 3px;
}
body.single-post:lang(es) .content a:hover,
body.blog:lang(es) .content a:hover,
body.archive:lang(es) .content a:hover,
body.home:lang(es) .content a:hover {
color: var(--ttn-primary-hover) !important;
}
/* =====================================================================
   3) BLOG OVERVIEW HERO  (.blog-header → light-gray rounded card)
   The current HTML has class="bg-primary text-white text-center blog-header"
   on the outer container-fluid. We kill the blue bg and re-skin the
   inner .container as the rounded card.
   ===================================================================== */
/* Outer container-fluid: kill top padding entirely so the hero card
   sits right at the end of the nav spacer. Bottom padding kept small
   to separate from the next section. Bootstrap's .py-xl-7 / .py-5
   would otherwise add 48-96px on top — explicitly overridden here.    */
body.blog:lang(es) .content .blog-header,
body.archive:lang(es) .content .blog-header,
body.home:lang(es) .content .blog-header {
background: transparent !important;
color: var(--ttn-black) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: clamp(16px, 2vw, 40px) !important;
padding-right: clamp(16px, 2vw, 40px) !important;
}
/* Inner .container becomes the rounded card — match the nav's 1500px
   max-width and dial the padding back significantly.                    */
body.blog:lang(es) .content .blog-header > .container,
body.archive:lang(es) .content .blog-header > .container,
body.home:lang(es) .content .blog-header > .container {
background: var(--ttn-bg-card) !important;
border-radius: var(--ttn-r-card-lg) !important;
padding: 48px 48px !important;
color: var(--ttn-black) !important;
max-width: 1500px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.blog:lang(es) .content .blog-header h1,
body.archive:lang(es) .content .blog-header h1,
body.home:lang(es) .content .blog-header h1 {
font-size: clamp(36px, 4.5vw, 56px) !important;
color: var(--ttn-black) !important;
text-shadow: none !important;
margin-bottom: 16px !important;
line-height: 1.1 !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
word-break: normal !important;
}
body.blog:lang(es) .content .blog-header p,
body.archive:lang(es) .content .blog-header p,
body.home:lang(es) .content .blog-header p {
color: var(--ttn-text-body) !important;
font-size: 18px;
line-height: 1.5;
max-width: 720px;
margin-left: auto;
margin-right: auto;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
word-break: normal !important;
}
@media (max-width: 768px) {
body.blog:lang(es) .content .blog-header > .container,
body.archive:lang(es) .content .blog-header > .container,
body.home:lang(es) .content .blog-header > .container {
padding: 32px 24px !important;
}
}
/* =====================================================================
   4) BLOG OVERVIEW — cards grid section
   ===================================================================== */
/* Wrap the grid section with a bit of breathing room (no bg though) */
body.blog:lang(es) .content > .container-fluid.py-5,
body.archive:lang(es) .content > .container-fluid.py-5,
body.home:lang(es) .content > .container-fluid.py-5 {
background: transparent !important;
padding-top: 32px !important;
padding-bottom: 64px !important;
}
/* Sidebar (col-lg-3) on the overview gets the same rounded card treatment */
@media (min-width: 992px) {
body.blog:lang(es) .content > .container-fluid.py-5 .container > .row,
body.archive:lang(es) .content > .container-fluid.py-5 .container > .row,
body.home:lang(es) .content > .container-fluid.py-5 .container > .row {
display: flex !important;
align-items: flex-start;
gap: 24px;
margin-left: 0;
margin-right: 0;
}
body.blog:lang(es) .content > .container-fluid.py-5 .container > .row > .col-lg-3,
body.archive:lang(es) .content > .container-fluid.py-5 .container > .row > .col-lg-3,
body.home:lang(es) .content > .container-fluid.py-5 .container > .row > .col-lg-3 {
order: 1;
flex: 0 0 26%;
max-width: 26%;
margin-left: 0 !important;
padding: 0 !important;
background: var(--ttn-bg-card);
border-radius: var(--ttn-r-card-lg);
padding: 32px !important;
}
body.blog:lang(es) .content > .container-fluid.py-5 .container > .row > .col-lg-8,
body.archive:lang(es) .content > .container-fluid.py-5 .container > .row > .col-lg-8,
body.home:lang(es) .content > .container-fluid.py-5 .container > .row > .col-lg-8 {
order: 2;
flex: 1 1 auto;
max-width: none;
padding: 0 !important;
}
}
/* =====================================================================
   5) BLOG POST CARDS  (.card.blog-post — used both on overview + related)
   ===================================================================== */
body.single-post:lang(es) .content .card.blog-post,
body.blog:lang(es) .content .card.blog-post,
body.archive:lang(es) .content .card.blog-post,
body.home:lang(es) .content .card.blog-post {
background: var(--ttn-bg-card-inner) !important;
border-radius: var(--ttn-r-card) !important;
border: 0 !important;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
margin-bottom: 24px !important;
}
body.single-post:lang(es) .content .card.blog-post:hover,
body.blog:lang(es) .content .card.blog-post:hover,
body.archive:lang(es) .content .card.blog-post:hover,
body.home:lang(es) .content .card.blog-post:hover {
transform: translateY(-4px);
box-shadow: 0 14px 36px rgba(0, 59, 158, .1);
}
body.single-post:lang(es) .content .card.blog-post .card-img-top,
body.blog:lang(es) .content .card.blog-post .card-img-top,
body.archive:lang(es) .content .card.blog-post .card-img-top,
body.home:lang(es) .content .card.blog-post .card-img-top {
border-radius: var(--ttn-r-card) var(--ttn-r-card) 0 0 !important;
height: 220px;
object-fit: cover;
width: 100%;
}
body.single-post:lang(es) .content .card.blog-post .card-body,
body.blog:lang(es) .content .card.blog-post .card-body,
body.archive:lang(es) .content .card.blog-post .card-body,
body.home:lang(es) .content .card.blog-post .card-body {
padding: 24px !important;
}
body.single-post:lang(es) .content .card.blog-post .card-title,
body.blog:lang(es) .content .card.blog-post .card-title,
body.archive:lang(es) .content .card.blog-post .card-title,
body.home:lang(es) .content .card.blog-post .card-title {
font-family: var(--ttn-font-display) !important;
font-weight: 800 !important;
color: var(--ttn-black) !important;
font-size: 20px !important;
line-height: 1.25 !important;
margin: 0 0 12px !important;
text-decoration: none !important;
}
body.single-post:lang(es) .content .card.blog-post a,
body.blog:lang(es) .content .card.blog-post a,
body.archive:lang(es) .content .card.blog-post a,
body.home:lang(es) .content .card.blog-post a {
text-decoration: none !important;
color: var(--ttn-black) !important;
}
body.single-post:lang(es) .content .card.blog-post .card-text,
body.blog:lang(es) .content .card.blog-post .card-text,
body.archive:lang(es) .content .card.blog-post .card-text,
body.home:lang(es) .content .card.blog-post .card-text {
font-size: 15px !important;
color: var(--ttn-text-body) !important;
line-height: 1.55 !important;
margin-bottom: 12px !important;
}
body.single-post:lang(es) .content .card.blog-post .card-link,
body.blog:lang(es) .content .card.blog-post .card-link,
body.archive:lang(es) .content .card.blog-post .card-link,
body.home:lang(es) .content .card.blog-post .card-link {
font-size: 13px !important;
color: var(--ttn-text-muted) !important;
}
body.blog:lang(es) .content .card.blog-post .card-body a.text-black-50,
body.archive:lang(es) .content .card.blog-post .card-body a.text-black-50,
body.home:lang(es) .content .card.blog-post .card-body a.text-black-50 {
color: var(--ttn-primary) !important;
font-size: 13px;
text-decoration: none !important;
}
body.blog:lang(es) .content .card.blog-post .card-body a.text-black-50:hover,
body.archive:lang(es) .content .card.blog-post .card-body a.text-black-50:hover,
body.home:lang(es) .content .card.blog-post .card-body a.text-black-50:hover {
text-decoration: underline !important;
}
/* =====================================================================
   6) PAGINATION  (#nav-below)
   ===================================================================== */
body.blog:lang(es) .content #nav-below,
body.archive:lang(es) .content #nav-below,
body.home:lang(es) .content #nav-below {
margin-top: 32px !important;
}
body.blog:lang(es) .content #nav-below .nav-links span,
body.blog:lang(es) .content #nav-below .nav-links a,
body.archive:lang(es) .content #nav-below .nav-links span,
body.archive:lang(es) .content #nav-below .nav-links a,
body.home:lang(es) .content #nav-below .nav-links span,
body.home:lang(es) .content #nav-below .nav-links a {
font-family: var(--ttn-font-display) !important;
font-weight: 700 !important;
color: var(--ttn-black) !important;
border-color: var(--ttn-border-light) !important;
}
body.blog:lang(es) .content #nav-below .nav-links span.current,
body.archive:lang(es) .content #nav-below .nav-links span.current,
body.home:lang(es) .content #nav-below .nav-links span.current {
color: #fff !important;
background: var(--ttn-black);
border-color: var(--ttn-black) !important;
}
body.blog:lang(es) .content #nav-below .nav-links a:hover,
body.archive:lang(es) .content #nav-below .nav-links a:hover,
body.home:lang(es) .content #nav-below .nav-links a:hover {
color: var(--ttn-primary) !important;
border-color: var(--ttn-primary) !important;
}
/* =====================================================================
   7) SIDEBAR (.col-lg-3) — also on overview + single
   ===================================================================== */
body.single-post:lang(es) .content .col-lg-3 h1,
body.single-post:lang(es) .content .col-lg-3 h2,
body.single-post:lang(es) .content .col-lg-3 h3,
body.single-post:lang(es) .content .col-lg-3 h4,
body.single-post:lang(es) .content .col-lg-3 h5,
body.single-post:lang(es) .content .col-lg-3 h6,
body.blog:lang(es) .content .col-lg-3 h1,
body.blog:lang(es) .content .col-lg-3 h2,
body.blog:lang(es) .content .col-lg-3 h3,
body.blog:lang(es) .content .col-lg-3 h4,
body.blog:lang(es) .content .col-lg-3 h5,
body.blog:lang(es) .content .col-lg-3 h6,
body.archive:lang(es) .content .col-lg-3 h1,
body.archive:lang(es) .content .col-lg-3 h2,
body.archive:lang(es) .content .col-lg-3 h3,
body.archive:lang(es) .content .col-lg-3 h4,
body.archive:lang(es) .content .col-lg-3 h5,
body.archive:lang(es) .content .col-lg-3 h6,
body.home:lang(es) .content .col-lg-3 h1,
body.home:lang(es) .content .col-lg-3 h2,
body.home:lang(es) .content .col-lg-3 h3,
body.home:lang(es) .content .col-lg-3 h4,
body.home:lang(es) .content .col-lg-3 h5,
body.home:lang(es) .content .col-lg-3 h6 {
font-size: 20px !important;
margin-bottom: 16px !important;
}
body.single-post:lang(es) .content .col-lg-3 ul,
body.blog:lang(es) .content .col-lg-3 ul,
body.archive:lang(es) .content .col-lg-3 ul,
body.home:lang(es) .content .col-lg-3 ul {
list-style: none;
padding: 0;
margin: 0;
}
body.single-post:lang(es) .content .col-lg-3 li,
body.single-post:lang(es) .content .col-lg-3 p,
body.blog:lang(es) .content .col-lg-3 li,
body.blog:lang(es) .content .col-lg-3 p,
body.archive:lang(es) .content .col-lg-3 li,
body.archive:lang(es) .content .col-lg-3 p,
body.home:lang(es) .content .col-lg-3 li,
body.home:lang(es) .content .col-lg-3 p {
font-size: 15px;
line-height: 1.5;
margin-bottom: 12px;
}
body.single-post:lang(es) .content .col-lg-3 a,
body.blog:lang(es) .content .col-lg-3 a,
body.archive:lang(es) .content .col-lg-3 a,
body.home:lang(es) .content .col-lg-3 a {
color: var(--ttn-text-body) !important;
text-decoration: none;
}
body.single-post:lang(es) .content .col-lg-3 a:hover,
body.blog:lang(es) .content .col-lg-3 a:hover,
body.archive:lang(es) .content .col-lg-3 a:hover,
body.home:lang(es) .content .col-lg-3 a:hover {
color: var(--ttn-primary) !important;
text-decoration: underline;
}
/* =====================================================================
   7b) SINGLE-POST OUTER WRAPPER — kill Bootstrap's .py-7 (96px) that
   was creating a huge gap below the nav. Hero/card sits right below
   the nav spacer with no extra outer padding.
   ===================================================================== */
body.single-post:lang(es) .content > .container-fluid:first-child {
background: var(--ttn-bg-page) !important;
padding-top: 0 !important;
padding-bottom: 32px !important;
}
/* =====================================================================
   8) SINGLE-POST-ONLY: article + sidebar two-card layout
   ===================================================================== */
@media (min-width: 992px) {
body.single-post:lang(es) .content > .container-fluid:first-child .container > .row:first-child {
display: flex !important;
align-items: flex-start;
gap: 24px;
margin-left: 0;
margin-right: 0;
}
body.single-post:lang(es) .content > .container-fluid:first-child .container > .row:first-child > .col-12.col-lg-3 {
order: 1;
flex: 0 0 26%;
max-width: 26%;
margin-left: 0 !important;
padding: 0 !important;
}
body.single-post:lang(es) .content > .container-fluid:first-child .container > .row:first-child > .col-12.col-lg-8 {
order: 2;
flex: 1 1 auto;
max-width: none;
padding: 0 !important;
}
}
body.single-post:lang(es) .content > .container-fluid:first-child .container > .row:first-child > .col-12.col-lg-8 {
background: var(--ttn-bg-card);
border-radius: var(--ttn-r-card-lg);
padding: 56px !important;
}
@media (max-width: 991.98px) {
body.single-post:lang(es) .content > .container-fluid:first-child .container > .row:first-child > .col-12.col-lg-8 {
padding: 32px 24px !important;
margin-bottom: 24px;
}
}
body.single-post:lang(es) .content > .container-fluid:first-child .container > .row:first-child > .col-12.col-lg-3 {
background: var(--ttn-bg-card);
border-radius: var(--ttn-r-card-lg);
padding: 32px !important;
}
/* =====================================================================
   9) SINGLE-POST: article internals (breadcrumb, lead, image, etc.)
   ===================================================================== */
body.single-post:lang(es) .content > .container-fluid:first-child .col-lg-8 > p:first-child {
font-size: 15px;
color: var(--ttn-text-muted) !important;
margin-bottom: 32px;
}
body.single-post:lang(es) .content > .container-fluid:first-child .col-lg-8 > p:first-child a {
color: var(--ttn-text-body) !important;
text-decoration: underline;
}
body.single-post:lang(es) .content > .container-fluid:first-child .col-lg-8 > p:first-child span.mx-2 {
color: var(--ttn-text-muted) !important;
margin: 0 8px !important;
}
body.single-post:lang(es) .content article > p:nth-of-type(1) {
font-size: 16px;
color: var(--ttn-text-muted) !important;
margin-bottom: 24px;
}
body.single-post:lang(es) .content article .lead,
body.single-post:lang(es) .content article p.lead {
font-family: var(--ttn-font-body) !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
color: var(--ttn-text-body) !important;
margin: 24px 0 32px;
}
body.single-post:lang(es) .content article img.wp-post-image,
body.single-post:lang(es) .content article .wp-post-image {
border-radius: var(--ttn-r-card) !important;
margin: 16px 0 32px;
display: block;
max-width: 100%;
height: auto;
}
body.single-post:lang(es) .content article ul:not(.list-unstyled),
body.single-post:lang(es) .content article ol {
padding-left: 22px;
margin-bottom: 24px;
}
body.single-post:lang(es) .content article ul:not(.list-unstyled) li,
body.single-post:lang(es) .content article ol li {
margin-bottom: 10px;
}
body.single-post:lang(es) .content article ~ hr,
body.single-post:lang(es) .content .col-lg-8 hr {
border: 0 !important;
border-top: 1px solid var(--ttn-border-light) !important;
background: none !important;
margin: 40px 0 !important;
opacity: 1;
}
body.single-post:lang(es) .content .icon-link.social-share i {
color: var(--ttn-black) !important;
transition: color .15s ease;
}
body.single-post:lang(es) .content .icon-link.social-share:hover i {
color: var(--ttn-primary) !important;
}
body.single-post:lang(es) .content article .sub-heading-border:before {
display: none !important;
}
body.single-post:lang(es) .content article strong,
body.single-post:lang(es) .content article b {
color: var(--ttn-black) !important;
font-family: var(--ttn-font-body) !important;
font-weight: 700 !important;
}
/* =====================================================================
   10) BOTTOM CTA  (.container-fluid.bg-primary) — single only for now
   ===================================================================== */
body.single-post:lang(es) .content > .container-fluid.bg-primary {
background: transparent !important;
padding: 32px 16px !important;
}
body.single-post:lang(es) .content > .container-fluid.bg-primary > .container {
background: linear-gradient(135deg, var(--ttn-dark-blue-2) 0%, var(--ttn-dark-blue) 100%) !important;
border-radius: var(--ttn-r-card-lg) !important;
padding: 64px 56px !important;
color: #fff !important;
max-width: 1140px;
}
body.single-post:lang(es) .content > .container-fluid.bg-primary h1,
body.single-post:lang(es) .content > .container-fluid.bg-primary h2,
body.single-post:lang(es) .content > .container-fluid.bg-primary h3,
body.single-post:lang(es) .content > .container-fluid.bg-primary p,
body.single-post:lang(es) .content > .container-fluid.bg-primary .h3,
body.single-post:lang(es) .content > .container-fluid.bg-primary .h6 {
color: #fff !important;
}
body.single-post:lang(es) .content > .container-fluid.bg-primary p {
color: rgba(255,255,255,.85) !important;
}
body.single-post:lang(es) .content > .container-fluid.bg-primary .sub-heading-border {
padding-left: 0 !important;
}
body.single-post:lang(es) .content > .container-fluid.bg-primary .sub-heading-border:before {
display: none !important;
}
body.single-post:lang(es) .content > .container-fluid.bg-primary .btn-secondary,
body.single-post:lang(es) .content > .container-fluid.bg-primary a.btn.btn-secondary {
background: #fff !important;
color: var(--ttn-black) !important;
border: 0 !important;
border-radius: var(--ttn-r-pill) !important;
padding: 12px 28px !important;
font-family: var(--ttn-font-display) !important;
font-weight: 700 !important;
box-shadow: none !important;
text-decoration: none !important;
}
body.single-post:lang(es) .content > .container-fluid.bg-primary .btn-secondary:hover {
background: #f2f2f2 !important;
color: var(--ttn-black) !important;
}