/* ==========================================================
   PENGIM-PENJAM DARK OVERRIDE
   Objetivo: fondo negro, texto blanco, rojo corporativo.
   Tipografía: Outfit para toda la web.
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap');

:root {
    --pengim-black: #000000;
    --pengim-white: #ffffff;
    --pengim-red: #f44336;
    --pengim-red-hover: #f55044;
    --pengim-border: rgba(255,255,255,0.18);
}

/* ==========================================================
   BASE GLOBAL
========================================================== */

html,
body,
.site,
.site-content,
#site-wrapper,
#content,
#content.site-content,
#main,
#primary,
.content-area,
.site-main,
.cherry-site-wrapper,
.cherry-page-wrapper {
    background: var(--pengim-black) !important;
    background-color: var(--pengim-black) !important;
    color: var(--pengim-white) !important;
}

body,
p,
li,
td,
th,
span,
div,
input,
textarea,
select,
button {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.entry-title,
.post-title,
.portfolio-title,
.service-title,
.cherry-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500;
    color: var(--pengim-white) !important;
}

/* ==========================================================
   TEXTOS Y ENLACES
========================================================== */

p,
li,
td,
th,
label,
.entry-content,
.entry-content p,
.entry-content li,
.site-content,
.site-content p,
.site-content li {
    color: var(--pengim-white) !important;
}

a,
a:visited {
    color: var(--pengim-red) !important;
}

a:hover,
a:focus {
    color: var(--pengim-red-hover) !important;
}

/* ==========================================================
   FONDOS GENERALES DEL TEMA
========================================================== */

.container,
.container-fluid,
.row,
.site-content,
.content-area,
.entry-content,
.entry-meta,
.post,
.page,
article,
section,
aside,
.widget,
.cherry-widget,
.motopress-wrapper,
.motopress-row,
.motopress-clmn,
.motopress-code-obj {
    background-color: transparent !important;
}

/* ==========================================================
   FOOTER
========================================================== */

#static-area-footer-top,
#static-area-footer-top *,
.site-footer,
.site-footer *,
.footer-area,
.footer-area *,
#footer,
#footer * {
    color: var(--pengim-white) !important;
}

#static-area-footer-top,
.site-footer,
.footer-area,
#footer {
    background: var(--pengim-black) !important;
    background-color: var(--pengim-black) !important;
}

/* ==========================================================
   COMPONENTES CON FONDO CLARO/GRIS DEL TEMA
========================================================== */

.well,
.panel,
.panel-default,
.thumbnail,
blockquote,
table,
thead,
tbody,
tfoot,
tr,
td,
th,
.cherry-box,
.cherry-services,
.cherry-banner,
.cherry-posts-list,
.portfolio-wrap,
.portfolio-container,
.portfolio-list,
.portfolio-item {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--pengim-white) !important;
    border-color: var(--pengim-border) !important;
}

/* ==========================================================
   FORMULARIOS
========================================================== */

input,
textarea,
select {
    background: var(--pengim-black) !important;
    background-color: var(--pengim-black) !important;
    color: var(--pengim-white) !important;
    border-color: var(--pengim-border) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255,255,255,0.65) !important;
}

/* ==========================================================
   BOTONES
========================================================== */

button,
input[type="submit"],
input[type="button"],
.btn,
.button {
    background: var(--pengim-red) !important;
    background-color: var(--pengim-red) !important;
    color: var(--pengim-white) !important;
    border-color: var(--pengim-red) !important;
    font-family: 'Outfit', sans-serif !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover {
    background: var(--pengim-red-hover) !important;
    background-color: var(--pengim-red-hover) !important;
    border-color: var(--pengim-red-hover) !important;
    color: var(--pengim-white) !important;
}

/* ==========================================================
   HEADER TOP
========================================================== */

#static-area-header-top {
    background: #000000 !important;
    background-color: #000000 !important;
    padding: 0 !important;
}

/* ==========================================================
   ENLACES SIEMPRE BLANCOS
========================================================== */

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus,
a:focus-visible,
a:visited:hover {
    color: #ffffff !important;
    text-decoration: none;
}

.current-menu-item > a,
.current_page_item > a,
.current-menu-parent > a,
.current-page-ancestor > a,
.current-menu-ancestor > a,
.menu-item.current-menu-item > a,
.menu-item.current_page_item > a,
.menu-item.current-menu-parent > a,
.menu-item.current-page-ancestor > a,
.menu-item.current-menu-ancestor > a {
    color: #ffffff !important;
}

a:hover,
.menu a:hover,
.sf-menu a:hover,
.main-navigation a:hover {
    color: #ffffff !important;
}



/* ==========================================================
   TIPOGRAFÍA GLOBAL (CIA CLARÍCIA)
========================================================== */

html,
body,
body *,
input,
textarea,
select,
button,
h1,h2,h3,h4,h5,h6{
    font-family:'Outfit',sans-serif !important;
    font-weight:500 !important;
}

/* ==========================================================
   FUENTE GLOBAL ÚNICA - OUTFIT 500
========================================================== */

html,
body,
body *,
body *:before,
body *:after,
input,
textarea,
select,
button,
option {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
}

/* Títulos */
h1,h2,h3,h4,h5,h6,
.entry-title,
.site-title,
.post-title,
.page-title,
.widget-title,
.cherry-title,
.portfolio-title,
.service-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
}

/* Menús */
.menu a,
.sf-menu a,
#menu-primary a,
#menu-secondary a,
.main-navigation a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
}

/* Formularios */
input,
textarea,
select,
button {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
}