/*
 Theme Name:   Parrilla Julve - Hello Elementor Child (Porto Style)
 Theme URI:    https://parrillajulveradiologas.com
 Description:  Child theme de Hello Elementor que replica el diseño Porto del sitio Parrilla Julve Radiólogas
 Author:       Parrilla Julve
 Author URI:   https://parrillajulveradiologas.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  parrillajulve-child
*/

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (Porto Variables → Elementor)
   ========================================================================== */

:root {
  /* --- Colores principales --- */
  --pj-primary:          #192b55;
  --pj-primary-dark-5:   #142242;
  --pj-primary-dark-10:  #0e182e;
  --pj-primary-light-5:  #1f3569;
  --pj-primary-light-10: #253f7d;
  --pj-primary-inverse:  #ffffff;

  --pj-secondary:          #0e152f;
  --pj-secondary-dark-5:   #0a0f21;
  --pj-secondary-inverse:  #ffffff;

  --pj-tertiary:         #060c23;
  --pj-quaternary:       #383f48;

  --pj-accent:           #efac97;  /* salmon/peach */
  --pj-accent-alt:       #F69497;  /* pink accent */
  --pj-link-blue:        #3467ef;  /* bright blue links */

  --pj-dark:             #212529;
  --pj-dark-inverse:     #ffffff;
  --pj-light:            #ffffff;

  /* --- Colores de texto --- */
  --pj-body-color:       #000000;
  --pj-heading-color:    #0e152f;
  --pj-heading-alt:      #222529;
  --pj-text-muted:       #777777;
  --pj-text-light:       #999999;

  /* --- Fondos --- */
  --pj-bg-body:          #ffffff;
  --pj-bg-gray-1:        #f4f4f4;
  --pj-bg-gray-2:        #f7f7f7;
  --pj-bg-gray-3:        #fbfbfb;
  --pj-bg-breadcrumb:    #efac97;
  --pj-bg-footer:        #0e152f;

  /* --- Bordes --- */
  --pj-border-light:     #e7e7e7;
  --pj-border-input:     rgba(0, 0, 0, 0.08);
  --pj-border-normal:    rgba(0, 0, 0, 0.06);

  /* --- Layout --- */
  --pj-container-width:  1236px;
  --pj-grid-gutter:      30px;
  --pj-column-spacing:   15px;

  /* --- Tipografía --- */
  --pj-font-primary:     'Poppins', sans-serif;
  --pj-font-alt:         'Shadows Into Light', cursive;
  --pj-body-fs:          14px;
  --pj-body-lh:          26px;
  --pj-body-fw:          400;

  /* --- Sombras --- */
  --pj-shadow-sm:        0 5px 8px rgba(0, 0, 0, 0.06);
  --pj-shadow-md:        0 20px 80px rgba(0, 0, 0, 0.09);
  --pj-shadow-lg:        0 30px 90px rgba(0, 0, 0, 0.08);
  --pj-shadow-hover:     10px 10px 74px -15px rgba(0, 0, 0, 0.4);

  /* --- Transiciones --- */
  --pj-transition:       0.3s ease;
}


/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */

body {
  font-family: var(--pj-font-primary);
  font-size: var(--pj-body-fs);
  font-weight: var(--pj-body-fw);
  line-height: var(--pj-body-lh);
  color: var(--pj-body-color);
  background-color: var(--pj-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--pj-primary);
  text-decoration: none;
  transition: color var(--pj-transition);
}

a:hover {
  color: var(--pj-accent);
  text-decoration: none;
}


/* ==========================================================================
   3. TIPOGRAFÍA - HEADINGS
   ========================================================================== */

h1, .elementor-heading-title.elementor-size-xxl {
  font-family: var(--pj-font-primary);
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: var(--pj-heading-color);
}

h2, .elementor-heading-title.elementor-size-xl {
  font-family: var(--pj-font-primary);
  font-weight: 700;
  font-size: 30px;
  line-height: 40px;
  color: var(--pj-heading-color);
}

h3, .elementor-heading-title.elementor-size-large {
  font-family: var(--pj-font-primary);
  font-weight: 700;
  font-size: 25px;
  line-height: 32px;
  color: var(--pj-heading-color);
}

h4, .elementor-heading-title.elementor-size-medium {
  font-family: var(--pj-font-primary);
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  color: var(--pj-heading-color);
}

h5, .elementor-heading-title.elementor-size-small {
  font-family: var(--pj-font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: var(--pj-heading-color);
}

h6 {
  font-family: var(--pj-font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--pj-heading-color);
}


/* ==========================================================================
   4. HEADER (Porto → Elementor Header Builder)
   ========================================================================== */

/* --- Barra superior (Top Bar) --- */
.pj-header-top,
.elementor-section.pj-header-top {
  border-bottom: 1px solid var(--pj-border-light);
  background: transparent;
  min-height: 40px;
}

.pj-header-top .elementor-widget-text-editor,
.pj-header-top .elementor-icon-list-text {
  font-size: 14px;
  color: var(--pj-text-light);
}

.pj-header-top .elementor-icon-list-icon i {
  font-size: 1.5em;
  color: var(--pj-text-light);
}

.pj-header-top a {
  color: var(--pj-text-light);
}

.pj-header-top a:hover {
  color: var(--pj-link-blue);
}

/* --- Botón "Reserva una cita" --- */
.pj-btn-cita,
.elementor-button.pj-btn-cita {
  background-color: var(--pj-primary) !important;
  color: var(--pj-primary-inverse) !important;
  font-family: var(--pj-font-primary);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 1rem 1.6rem;
  border-radius: 0;
  border: none;
  transition: background-color var(--pj-transition);
}

.pj-btn-cita:hover,
.elementor-button.pj-btn-cita:hover {
  background-color: var(--pj-primary-dark-5) !important;
}

/* --- Header Principal --- */
.pj-header-main,
.elementor-section.pj-header-main {
  background: #ffffff;
  padding: 0;
}

/* --- Logo --- */
.pj-header-main .elementor-widget-image img,
.pj-header-main .elementor-widget-site-logo img {
  max-width: 200px;
  height: auto;
}

/* --- Navegación principal (Elementor Nav Menu) --- */
.pj-nav .elementor-nav-menu > li > a,
.pj-header-main .elementor-nav-menu--main > .elementor-item {
  font-family: var(--pj-font-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.5px;
  text-transform: capitalize;
  color: var(--pj-primary);
  padding: 40px 15px;
  transition: color var(--pj-transition);
}

.pj-nav .elementor-nav-menu > li > a:hover,
.pj-header-main .elementor-nav-menu--main > .elementor-item:hover {
  color: var(--pj-primary);
}

.pj-nav .elementor-nav-menu > li.current-menu-item > a,
.pj-header-main .elementor-item.elementor-item-active {
  color: var(--pj-accent);
}

/* --- Submenú --- */
.pj-nav .elementor-nav-menu--dropdown li a,
.elementor-nav-menu--dropdown .elementor-item {
  font-family: var(--pj-font-primary);
  font-size: 12.8px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: #000000;
  padding: 8px 15px;
}

.pj-nav .elementor-nav-menu--dropdown li a:hover,
.elementor-nav-menu--dropdown .elementor-item:hover {
  color: var(--pj-accent);
  background-color: var(--pj-primary);
}

/* --- Header Sticky --- */
.pj-header-sticky.elementor-sticky--effects .elementor-nav-menu--main > .elementor-item {
  padding-top: 25px;
  padding-bottom: 25px;
}

.pj-header-sticky.elementor-sticky--effects .elementor-widget-image img,
.pj-header-sticky.elementor-sticky--effects .elementor-widget-site-logo img {
  max-width: 125px;
}

.pj-header-sticky.elementor-sticky--effects {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   5. PAGE TOP / BREADCRUMBS (Porto Page Header)
   ========================================================================== */

.pj-page-top,
.elementor-section.pj-page-top {
  background-color: var(--pj-bg-breadcrumb);
  padding: 20px 0;
}

.pj-page-top .elementor-heading-title {
  font-size: 2.1875rem;
  font-weight: 700;
  color: #ffffff;
  padding-bottom: 0;
  line-height: 1.25;
}

.pj-page-top .elementor-breadcrumbs,
.pj-page-top .pj-breadcrumb {
  font-size: 13px;
  color: #ffffff;
  text-align: right;
}

.pj-page-top .elementor-breadcrumbs a {
  color: #ffffff;
  opacity: 0.8;
}

.pj-page-top .elementor-breadcrumbs a:hover {
  opacity: 1;
}


/* ==========================================================================
   6. CONTENIDO PRINCIPAL
   ========================================================================== */

/* --- Container Elementor → Porto width --- */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--pj-container-width);
}

/* --- Padding principal --- */
.pj-main-content {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* --- Secciones con triángulo decorativo (Porto triangle) --- */
.pj-section-triangle {
  position: relative;
  overflow: hidden !important;
}

.pj-section-triangle::before {
  content: '';
  position: absolute;
  z-index: 6;
  background: #fff;
  top: 104%;
  height: 15rem;
  right: 50%;
  width: 50%;
  transform-origin: 100% 0;
  transform: translateY(-50%) skewY(4.7deg);
}

.pj-section-triangle::after {
  content: '';
  position: absolute;
  z-index: 6;
  background: #fff;
  top: 104%;
  height: 15rem;
  left: 50%;
  width: 50%;
  transform-origin: 0 0;
  transform: translateY(-50%) skewY(-4.7deg);
}


/* ==========================================================================
   7. BOTONES (Porto → Elementor)
   ========================================================================== */

/* --- Botón primario --- */
.elementor-button.pj-btn-primary,
.pj-btn-primary {
  background-color: var(--pj-primary);
  color: var(--pj-primary-inverse);
  font-family: var(--pj-font-primary);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 0;
  border: none;
  padding: 1rem 1.6rem;
  transition: all var(--pj-transition);
}

.elementor-button.pj-btn-primary:hover,
.pj-btn-primary:hover {
  background-color: var(--pj-primary-dark-5);
  transform: translateY(-2px);
}

/* --- Botón bordes (outline) --- */
.elementor-button.pj-btn-borders,
.pj-btn-borders {
  background: transparent;
  color: var(--pj-primary);
  border: 2px solid var(--pj-border-light);
  padding: 1.25em 3.75em;
  font-weight: 400;
  transition: all var(--pj-transition);
}

.elementor-button.pj-btn-borders:hover,
.pj-btn-borders:hover {
  border-color: var(--pj-link-blue);
  color: var(--pj-link-blue);
}

/* --- Botón "Leer más" estilo Porto --- */
.pj-read-more,
.pj-read-more .elementor-button {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--pj-link-blue) !important;
  font-weight: 700;
  font-size: 1em;
  text-transform: uppercase;
}

.pj-read-more:hover,
.pj-read-more .elementor-button:hover {
  text-decoration: underline !important;
}

/* --- Botón moderno (grande) --- */
.elementor-button.pj-btn-modern-lg {
  font-size: 0.8rem;
  padding: 1.25em 2em;
  text-transform: uppercase;
}


/* ==========================================================================
   8. CARDS Y BOXES DE SERVICIO (Porto Icon Boxes → Elementor)
   ========================================================================== */

/* --- Porto Icon Box → Elementor Icon Box --- */
.pj-service-card .elementor-icon-box-wrapper {
  height: 100%;
  padding: 2rem;
  background: #ffffff;
  box-shadow: var(--pj-shadow-md);
  transition: box-shadow var(--pj-transition), transform var(--pj-transition);
}

.pj-service-card .elementor-icon-box-wrapper:hover {
  box-shadow: var(--pj-shadow-hover);
  transform: translate3d(0, -15px, 0);
}

.pj-service-card .elementor-icon-box-icon {
  margin-bottom: 2.5rem;
}

.pj-service-card .elementor-icon-box-icon i {
  color: var(--pj-primary);
  font-size: 1.2em;
}

.pj-service-card .elementor-icon-box-title {
  margin: 2rem 0 1.5rem !important;
  font-size: 1.3125rem;
  text-transform: capitalize;
  letter-spacing: 0;
}

.pj-service-card .elementor-icon-box-description {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--pj-text-muted);
}

/* --- Info Boxes (custom-info-boxes Porto) --- */
.pj-info-box {
  text-align: center;
}

.pj-info-box .elementor-icon {
  width: 1em;
  text-align: center;
}

.pj-info-box .elementor-icon-box-title {
  margin: 2rem 0 1.5rem !important;
}


/* ==========================================================================
   9. SECCIÓN "¿QUIÉNES SOMOS?" (Home)
   ========================================================================== */

.pj-about-section .elementor-heading-title {
  font-family: var(--pj-font-primary);
  font-weight: 700;
  color: var(--pj-heading-color);
}

.pj-about-section .elementor-divider-separator {
  border-color: var(--pj-accent);
}


/* ==========================================================================
   10. BLOG / POSTS
   ========================================================================== */

.pj-blog-card,
.pj-blog-card .elementor-post {
  box-shadow: var(--pj-shadow-lg);
  padding: 1.5rem;
  margin-bottom: 3rem;
}

.pj-blog-card .elementor-post__title {
  font-weight: 700;
  margin-top: 1rem;
}

.pj-blog-card .elementor-post__meta-data {
  display: inline-block;
  font-size: 0.8em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.pj-blog-card .elementor-post__read-more {
  background: none !important;
  border: none;
  padding: 0;
  color: var(--pj-link-blue) !important;
  font-size: 1em !important;
  font-weight: 700;
}

.pj-blog-card .elementor-post__read-more:hover {
  text-decoration: underline;
}


/* ==========================================================================
   11. MIEMBROS / EQUIPO (Porto Members → Elementor)
   ========================================================================== */

.pj-member-card {
  text-align: center;
  padding: 1rem;
  background: #ffffff;
  box-shadow: var(--pj-shadow-md);
  height: 100%;
}

.pj-member-card .elementor-image-box-img,
.pj-member-card .elementor-widget-image img {
  background: var(--pj-bg-gray-1);
  text-align: center;
}

.pj-member-card .elementor-image-box-title,
.pj-member-card h4 {
  margin: 1.5rem 0 0 !important;
  font-size: 1.3125rem;
  text-transform: capitalize;
  letter-spacing: 0;
}

.pj-member-card .elementor-image-box-description,
.pj-member-card p {
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pj-text-muted);
  margin: 0 0 1rem !important;
  line-height: 1.6;
}

.pj-member-card .pj-view-more {
  display: inline-block;
  font-weight: 400 !important;
  border: 2px solid var(--pj-border-light);
  padding: 0.25rem 1.5rem;
  transition: 0.2s;
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
}

.pj-member-card .pj-view-more:after {
  content: ' +';
}

.pj-member-card .pj-view-more:hover {
  border-color: var(--pj-link-blue);
  color: var(--pj-link-blue) !important;
}


/* ==========================================================================
   12. CONTACTO
   ========================================================================== */

/* --- Iconos de info de contacto --- */
.pj-contact-info .elementor-icon-box-wrapper {
  text-align: center;
}

.pj-contact-info .elementor-icon-box-icon i {
  font-size: 2rem;
  color: var(--pj-primary);
}

.pj-contact-info .elementor-icon-box-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pj-contact-info .elementor-icon-box-description {
  font-size: 0.875rem;
  color: var(--pj-text-muted);
}

/* --- Formulario de contacto --- */
.pj-contact-form .wpcf7-form .form-control,
.pj-contact-form input[type="text"],
.pj-contact-form input[type="email"],
.pj-contact-form textarea {
  padding: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.85;
  color: #495057;
  background: var(--pj-bg-gray-1);
  border: none;
  box-shadow: none;
  font-family: var(--pj-font-primary);
}

.pj-contact-form input[type="text"]:focus,
.pj-contact-form input[type="email"]:focus,
.pj-contact-form textarea:focus {
  background: var(--pj-bg-gray-2);
  outline: none;
}


/* ==========================================================================
   13. FOOTER (Porto → Elementor Footer Builder)
   ========================================================================== */

.pj-footer,
.elementor-section.pj-footer {
  background-color: var(--pj-bg-footer);
  color: var(--pj-text-muted);
}

.pj-footer .elementor-heading-title,
.pj-footer .elementor-widget-heading .elementor-heading-title {
  font-size: 1.4em;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
}

.pj-footer a {
  color: #ffffff;
  transition: color var(--pj-transition);
}

.pj-footer a:hover {
  color: var(--pj-accent);
}

.pj-footer .elementor-icon-list-text {
  font-size: 0.875rem;
  color: #ffffff;
}

.pj-footer .elementor-divider-separator {
  border-color: rgba(255, 255, 255, 0.1);
}

/* --- Footer Main border --- */
.pj-footer-main {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 3.25rem;
  padding-bottom: 1rem;
}

/* --- Social links en footer --- */
.pj-footer .elementor-social-icons-wrapper .elementor-icon {
  width: 38px;
  height: 38px;
  font-size: 1.2em;
  margin-right: 0.5rem;
}

/* --- Footer copyright / bottom bar --- */
.pj-footer-bottom {
  padding: 1rem 0;
  font-size: 0.875rem;
  color: var(--pj-text-muted);
}

/* --- Logos compañías footer --- */
.pj-footer-logos img {
  max-height: 60px;
  width: auto;
  opacity: 0.8;
}

.pj-footer-logos img:hover {
  opacity: 1;
}


/* ==========================================================================
   14. SLIDER / HERO (Revolution Slider → Elementor Slides/Hero)
   ========================================================================== */

.pj-hero-section {
  position: relative;
  overflow: hidden;
}

.pj-hero-section .elementor-slide-heading {
  font-family: 'Sora', var(--pj-font-primary);
  font-weight: 700;
  font-size: 38px;
  line-height: 48px;
  color: #ffffff;
  text-align: right;
}

.pj-hero-section .elementor-slide-description {
  font-family: var(--pj-font-primary);
  font-size: 26px;
  line-height: 32px;
  text-transform: uppercase;
  color: #ffffff;
}

.pj-hero-section .elementor-slide-button {
  font-family: var(--pj-font-primary);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1em 2.5em;
  background-color: var(--pj-primary);
  color: #ffffff;
  border: 1px solid var(--pj-primary);
}

.pj-hero-section .elementor-slide-button:hover {
  background-color: var(--pj-primary-dark-5);
}


/* ==========================================================================
   15. FORMULARIOS GENÉRICOS
   ========================================================================== */

body .form-control,
.form-control:focus {
  background: var(--pj-bg-gray-2);
  border: none;
  box-shadow: none;
}

input[type="text"],
input[type="email"],
textarea {
  padding: 12px;
  font-family: var(--pj-font-primary);
}

input[type="submit"],
button[type="submit"] {
  text-transform: uppercase;
}


/* ==========================================================================
   16. WIDGETS SIDEBAR
   ========================================================================== */

.pj-sidebar .elementor-widget-heading .elementor-heading-title {
  font-size: 1.5em;
  text-transform: none;
  margin-bottom: 1.5rem;
}

.pj-sidebar .elementor-widget + .elementor-widget {
  padding-top: 30px;
  border-top: 1px solid var(--pj-border-normal);
  margin-top: 30px;
}


/* ==========================================================================
   17. PAGINACIÓN
   ========================================================================== */

.pj-pagination .page-numbers,
.elementor-pagination .page-numbers {
  width: 3.75rem !important;
  height: 3.75rem;
  line-height: 3.75rem;
  background: #ffffff;
  border: 1px solid #dee2e6;
  font-size: 1.25rem;
  padding: 0;
  border-radius: 2rem !important;
  margin: 0 0.25rem;
  text-align: center;
  display: inline-block;
  color: var(--pj-primary);
  transition: all var(--pj-transition);
}

.pj-pagination .page-numbers.current,
.pj-pagination .page-numbers:hover,
.elementor-pagination .page-numbers.current {
  background: var(--pj-primary);
  color: #ffffff;
  border-color: var(--pj-primary);
}


/* ==========================================================================
   18. EFECTOS HOVER Y BOX SHADOW (Porto effects)
   ========================================================================== */

.pj-hover-effect {
  transition: box-shadow 0.3s, transform 0.3s;
}

.pj-hover-effect:hover {
  box-shadow: var(--pj-shadow-hover);
  transform: translate3d(0, -15px, 0);
}

.pj-box-shadow {
  box-shadow: var(--pj-shadow-md);
}


/* ==========================================================================
   19. PROGRESS BARS (Porto → Elementor)
   ========================================================================== */

.pj-progress .elementor-progress-bar {
  border-radius: 0;
  background-color: var(--pj-primary);
}


/* ==========================================================================
   20. WHATSAPP BUTTON (qlwapp)
   ========================================================================== */

.qlwapp-toggle {
  --qlwapp-scheme-icon-size: 60px;
  --qlwapp-scheme-icon-font-size: 24px;
}


/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 1265px) {
  .pj-header-top .elementor-column.elementor-col-50:first-child {
    display: none !important;
  }
}

@media (max-width: 991px) {
  :root {
    --pj-column-spacing: 30px;
  }

  .pj-header-main .elementor-widget-image img,
  .pj-header-main .elementor-widget-site-logo img {
    max-width: 200px;
  }

  .pj-nav .elementor-nav-menu > li > a {
    padding: 30px 14px;
  }

  .pj-page-top .elementor-breadcrumbs {
    text-align: center;
    margin-bottom: 5px;
  }

  .pj-page-top .elementor-heading-title {
    text-align: center;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .pj-header-main .elementor-widget-image img,
  .pj-header-main .elementor-widget-site-logo img {
    max-width: 125px;
  }

  h1 { font-size: 33.43px; }
  h2 { font-size: 27.86px; }
  h3 { font-size: 23.21px; }
}

@media (max-width: 575px) {
  :root {
    --pj-body-fs: 13px;
    --pj-body-lh: 24px;
    --pj-column-spacing: 20px;
  }

  body {
    font-size: var(--pj-body-fs);
    line-height: var(--pj-body-lh);
  }
}


/* ==========================================================================
   22. UTILIDADES
   ========================================================================== */

.pj-text-uppercase { text-transform: uppercase; }
.pj-text-capitalize { text-transform: capitalize; }
.pj-fw-400 { font-weight: 400; }
.pj-fw-500 { font-weight: 500; }
.pj-fw-600 { font-weight: 600; }
.pj-fw-700 { font-weight: 700; }
.pj-fw-800 { font-weight: 800; }
.pj-font-alt { font-family: var(--pj-font-alt); }
.pj-bg-primary { background-color: var(--pj-primary); }
.pj-bg-secondary { background-color: var(--pj-secondary); }
.pj-bg-accent { background-color: var(--pj-accent); }
.pj-bg-gray { background-color: var(--pj-bg-gray-1); }
.pj-bg-gray-2 { background-color: var(--pj-bg-gray-2); }
.pj-color-primary { color: var(--pj-primary); }
.pj-color-accent { color: var(--pj-accent); }
.pj-color-white { color: #ffffff; }
.pj-color-muted { color: var(--pj-text-muted); }