/* ==========================================================
   PÁGINA DO ARTIGO
   ========================================================== */

.article-page {
      background: #f7f8fa;
      min-height: 100vh;
      padding: 60px 0 80px;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

.article-container {
      max-width: 980px;
}


/* ==========================================================
   CARD PRINCIPAL
   ========================================================== */

.article-card {
      background: #ffffff;
      border-radius: 24px;
      overflow: hidden;

      box-shadow:
            0 10px 40px rgba(0, 0, 0, 0.06);
}


/* ==========================================================
   CABEÇALHO
   ========================================================== */

.article-header {
      padding-bottom: 0;
}


/* ==========================================================
   IMAGEM DE DESTAQUE
   ========================================================== */

.artigo-imagem-destaque {
      width: 100%;
      overflow: hidden;
      background: #eef0f2;
}

.artigo-imagem-destaque img {
      display: block;

      width: 100%;
      height: 480px;

      object-fit: cover;

      transition: transform 0.6s ease;
}

.artigo-imagem-destaque:hover img {
      transform: scale(1.02);
}


/* ==========================================================
   CONTEÚDO DO CABEÇALHO
   ========================================================== */

.article-header-content {
      max-width: 820px;

      margin: 0 auto;

      padding: 48px 40px 36px;
}


/* ==========================================================
   CATEGORIA
   ========================================================== */

.article-category {
      display: inline-flex;

      align-items: center;

      margin-bottom: 18px;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 0.75rem;

      font-weight: 800;

      letter-spacing: 0.12em;

      color: #0d6efd;
}


/* ==========================================================
   TÍTULO
   ========================================================== */

.article-head {
      margin: 15px 0 15px 0;

      font-family:
            Merriweather,
            Georgia,
            serif;

      font-size: clamp(1.1rem,
                  2vw,
                  1.5rem);

      line-height: 1.10;

      letter-spacing: -0.035em;

      font-weight: 700;

      color: #17202a;
}



.article-title {
      margin: 0 0 20px;

      font-family:
            Merriweather,
            Georgia,
            serif;

      font-size: clamp(2.1rem,
                  5vw,
                  3.5rem);

      line-height: 1.16;

      letter-spacing: -0.035em;

      font-weight: 900;

      color: #17202a;
}


/* ==========================================================
   META
   ========================================================== */

.article-meta {
      display: flex;

      flex-wrap: wrap;

      align-items: center;

      gap: 10px;

      margin-bottom: 24px;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 0.88rem;

      color: #7a838d;
}

.article-meta-separator {
      opacity: 0.35;
}


/* ==========================================================
   RESUMO
   ========================================================== */

.article-summary {
      margin-top: 10px;

      padding: 18px 20px;

      border-left: 4px solid #0d6efd;

      border-radius: 0 12px 12px 0;

      background: #f5f8ff;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 1.08rem;

      line-height: 1.75;

      color: #53606d;
}


/* ==========================================================
   ESPAÇO PARA ADSENSE
   ========================================================== */

.article-ad {
      display: flex;

      align-items: center;

      justify-content: center;

      min-height: 90px;

      margin: 0 40px 30px;

      color: #adb5bd;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 0.75rem;
}


/* ==========================================================
   CONTEÚDO DO ARTIGO
   ========================================================== */

.article-content {
      max-width: 760px;

      margin: 0 auto;

      padding: 10px 40px 50px;

      font-family:
            Merriweather,
            Georgia,
            serif;

      font-size: 1.08rem;

      line-height: 1.95;

      color: #29323a;
}


/* ==========================================================
   PARÁGRAFOS
   ========================================================== */

.article-content p {
      margin: 0 0 1.6rem;
}


/* ==========================================================
   TÍTULOS
   ========================================================== */

.article-content h2 {
      margin-top: 3.5rem;
      margin-bottom: 1.2rem;

      font-family:
            Merriweather,
            Georgia,
            serif;

      font-size: 1.85rem;

      line-height: 1.35;

      font-weight: 900;

      color: #17202a;
}

.article-content h3 {
      margin-top: 2.7rem;
      margin-bottom: 1rem;

      font-family:
            Merriweather,
            Georgia,
            serif;

      font-size: 1.4rem;

      font-weight: 700;

      color: #17202a;
}


/* ==========================================================
   LINKS
   ========================================================== */

.article-content a {
      color: #0d6efd;

      font-weight: 600;

      text-decoration-thickness: 1px;

      text-underline-offset: 4px;
}

.article-content a:hover {
      color: #084298;
}


/* ==========================================================
   LISTAS
   ========================================================== */

.article-content ul,
.article-content ol {
      margin: 0 0 1.8rem;

      padding-left: 1.8rem;
}

.article-content li {
      margin-bottom: 0.7rem;
}


/* ==========================================================
   BLOCKQUOTE
   ========================================================== */

.article-content blockquote {
      margin: 2.5rem 0;

      padding: 24px 28px;

      border-left: 4px solid #0d6efd;

      border-radius: 0 14px 14px 0;

      background: #f7f9fc;

      color: #596571;

      font-style: italic;
}


/* ==========================================================
   IMAGENS DENTRO DO TEXTO
   ========================================================== */

.article-content img {
      display: block;

      max-width: 100%;

      height: auto;

      margin: 2.5rem auto;

      border-radius: 14px;
}


/* ==========================================================
   TABELAS
   ========================================================== */

.article-content table {
      width: 100%;

      margin: 2rem 0;

      border-collapse: collapse;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 0.95rem;
}

.article-content th,
.article-content td {
      padding: 12px;

      border: 1px solid #dee2e6;

      text-align: left;
}

.article-content th {
      background: #f8f9fa;

      font-weight: 700;
}


/* ==========================================================
   CÓDIGO
   ========================================================== */

.article-content pre {
      overflow-x: auto;

      margin: 2rem 0;

      padding: 20px;

      border-radius: 14px;

      background: #1e293b;

      color: #f8fafc;

      font-family:
            Consolas,
            Monaco,
            monospace;

      font-size: 0.9rem;

      line-height: 1.7;
}


/* ==========================================================
   CTA DO SISTEMA
   ========================================================== */

.article-system-cta {
      display: flex;

      align-items: flex-start;

      gap: 24px;

      margin: 20px 40px 50px;

      padding: 32px;

      border: 1px solid #dfe6ef;

      border-radius: 20px;

      background:
            linear-gradient(135deg,
                  #f8fafc,
                  #eef4ff);
}


/* ==========================================================
   ÍCONE CTA
   ========================================================== */

.article-system-icon {
      display: flex;

      align-items: center;

      justify-content: center;

      flex-shrink: 0;

      width: 58px;
      height: 58px;

      border-radius: 16px;

      background: #0d6efd;

      font-size: 1.7rem;

      box-shadow:
            0 8px 20px rgba(13,
                  110,
                  253,
                  0.2);
}


/* ==========================================================
   CTA CONTEÚDO
   ========================================================== */

.article-system-content {
      flex: 1;
}

.article-system-label {
      display: block;

      margin-bottom: 6px;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 0.72rem;

      font-weight: 800;

      letter-spacing: 0.1em;

      color: #0d6efd;
}

.article-system-content h2 {
      margin: 0 0 10px;

      font-family:
            Merriweather,
            Georgia,
            serif;

      font-size: 1.55rem;

      font-weight: 900;

      color: #17202a;
}

.article-system-content p {
      margin: 0 0 20px;

      font-family:
            Inter,
            Arial,
            sans-serif;

      line-height: 1.7;

      color: #5f6b76;
}


/* ==========================================================
   BOTÃO CTA
   ========================================================== */

.article-system-button {
      display: inline-flex;

      align-items: center;

      gap: 10px;

      padding: 11px 18px;

      border-radius: 10px;

      background: #0d6efd;

      color: #ffffff !important;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 0.9rem;

      font-weight: 700;

      text-decoration: none !important;

      transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
}

.article-system-button:hover {
      transform: translateY(-2px);

      box-shadow:
            0 8px 20px rgba(13,
                  110,
                  253,
                  0.25);
}

.article-system-button span {
      font-size: 1.1rem;
}




/* ==========================================================
   LAYOUT DO PORTAL
   ========================================================== */

.portal-container {
      max-width: 1280px;
}

.portal-layout {
      display: grid;

      grid-template-columns:
            minmax(0, 1fr) 340px;

      gap: 32px;

      align-items: start;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.portal-sidebar {
      display: flex;

      flex-direction: column;

      gap: 28px;
}


/* ==========================================================
   WIDGET
   ========================================================== */

.sidebar-widget {
      padding: 24px;

      border: 1px solid #e8ebef;

      border-radius: 18px;

      background: #ffffff;

      box-shadow:
            0 8px 30px rgba(0,
                  0,
                  0,
                  0.04);
}


/* ==========================================================
   TÍTULO DA SIDEBAR
   ========================================================== */

.sidebar-title {
      position: relative;

      margin-bottom: 22px;

      padding-bottom: 14px;

      border-bottom: 1px solid #e9ecef;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 1.05rem;

      font-weight: 800;

      color: #17202a;
}

.sidebar-title::after {
      content: "";

      position: absolute;

      bottom: -1px;
      left: 0;

      width: 48px;
      height: 3px;

      border-radius: 5px;

      background: #0d6efd;
}


/* ==========================================================
   ARTIGO RECENTE
   ========================================================== */

.recent-post {
      display: grid;

      grid-template-columns:
            95px minmax(0, 1fr);

      gap: 14px;

      padding: 16px 0;

      border-bottom:
            1px solid #eef0f2;
}

.recent-post:first-child {
      padding-top: 0;
}

.recent-post:last-child {
      padding-bottom: 0;

      border-bottom: 0;
}


/* ==========================================================
   IMAGEM
   ========================================================== */

.recent-post-image {
      display: block;

      width: 95px;
      height: 76px;

      overflow: hidden;

      border-radius: 10px;

      background: #eef0f2;
}

.recent-post-image img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition: transform 0.3s ease;
}

.recent-post:hover .recent-post-image img {
      transform: scale(1.06);
}


/* ==========================================================
   TÍTULO
   ========================================================== */

.recent-post-content h3 {
      margin: 0 0 8px;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 0.93rem;

      font-weight: 700;

      line-height: 1.4;
}

.recent-post-content h3 a {
      color: #202832;

      text-decoration: none;

      transition: color 0.2s ease;
}

.recent-post-content h3 a:hover {
      color: #0d6efd;
}


/* ==========================================================
   DATA
   ========================================================== */

.recent-post-date {
      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 0.75rem;

      color: #9098a1;
}


/* ==========================================================
   PUBLICIDADE SIDEBAR
   ========================================================== */

.sidebar-ad {
      display: flex;

      align-items: center;

      justify-content: center;

      min-height: 280px;

      border: 1px dashed #dfe3e8;

      border-radius: 16px;

      background: #ffffff;

      font-family:
            Inter,
            Arial,
            sans-serif;

      font-size: 0.7rem;

      color: #adb5bd;
}



/* ======================================================
   AVALIAÇÃO DO ARTIGO
====================================================== */

.article-rating {
      margin-top: 50px;
      margin-bottom: 45px;
      padding: 32px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      text-align: center;
}

.article-rating-header h2 {
      margin: 0 0 8px;
      font-family: 'Merriweather', serif;
      font-size: 28px;
      font-weight: 700;
      color: #111827;
}

.article-rating-header p {
      margin: 0 0 25px;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: #64748b;
}

.article-rating-buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
}

.article-rating-buttons button {
      min-width: 145px;
      padding: 11px 18px;
      border-radius: 10px;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 600;
      transition: all 0.2s ease;
}

.article-rating-buttons button:hover {
      transform: translateY(-2px);
}

.article-rating-buttons button:disabled {
      opacity: 0.65;
      cursor: wait;
}

#totalGostei,
#totalNaoGostei {
      margin-left: 5px;
      font-weight: 700;
}

#resultadoAvaliacao {
      min-height: 22px;
      margin-top: 18px !important;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
}




/* ======================================================
   COMENTÁRIOS DO ARTIGO
====================================================== */

.article-comments {
      margin-top: 45px;
      margin-bottom: 45px;
      padding: 35px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
}

.article-comments-header {
      margin-bottom: 28px;
}

.article-comments-header h2 {
      margin: 0 0 8px;
      font-family: 'Merriweather', serif;
      font-size: 28px;
      font-weight: 700;
      color: #111827;
}

.article-comments-header p {
      margin: 0;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: #64748b;
}

.comment-form {
      max-width: 850px;
}

.comment-form-group {
      margin-bottom: 20px;
}

.comment-form-group label {
      display: block;
      margin-bottom: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
}

.comment-form-group label span {
      font-weight: 400;
      color: #94a3b8;
}

.comment-form-group input,
.comment-form-group textarea {
      width: 100%;
      padding: 13px 15px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      background: #ffffff;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: #1e293b;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form-group textarea {
      min-height: 150px;
      resize: vertical;
}

.comment-form-group input::placeholder,
.comment-form-group textarea::placeholder {
      color: #94a3b8;
}

.comment-form-group input:focus,
.comment-form-group textarea:focus {
      border-color: #0d6efd;
      box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.10);
}

.comment-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 22px;
      border: 0;
      border-radius: 10px;
      background: #0d6efd;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comment-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(13, 110, 253, 0.18);
}

.comment-notice {
      margin: 14px 0 0;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: #64748b;
}



/* ======================================================
   COMENTÁRIOS APROVADOS
====================================================== */

.approved-comments {
      margin-top: 45px;
      margin-bottom: 45px;
      padding: 32px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
}

.approved-comments-header {
      margin-bottom: 28px;
}

.approved-comments-header h3 {
      margin: 0 0 8px;
      font-family: 'Merriweather', serif;
      font-size: 26px;
      font-weight: 700;
      color: #111827;
}

.approved-comments-header p {
      margin: 0;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: #64748b;
}

.approved-comments-list {
      display: flex;
      flex-direction: column;
      gap: 18px;
}

.approved-comment {
      padding: 22px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
}

.approved-comment-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
}

.approved-comment-avatar {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 50%;
      background: #0d6efd;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      font-size: 17px;
      font-weight: 700;
}

.approved-comment-name {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
}

.approved-comment-date {
      margin-top: 2px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: #94a3b8;
}

.approved-comment-text {
      padding-left: 56px;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      line-height: 1.7;
      color: #475569;
}





















/* ==========================================================
   RESPONSIVIDADE
   ========================================================== */

@media (max-width: 768px) {

      .article-page {
            padding: 25px 0 50px;
      }


      .article-container {
            padding: 0 12px;
      }


      .article-card {
            border-radius: 16px;
      }


      .artigo-imagem-destaque img {
            height: 320px;
      }


      .article-header-content {
            padding: 32px 24px 28px;
      }


      .article-title {
            font-size: 2.15rem;

            letter-spacing: -0.025em;
      }


      .article-summary {
            font-size: 1rem;

            padding: 18px;
      }


      .article-ad {
            margin-left: 24px;
            margin-right: 24px;
      }


      .article-content {
            padding: 10px 24px 35px;

            font-size: 1rem;

            line-height: 1.85;
      }


      .article-content h2 {
            font-size: 1.55rem;

            margin-top: 2.7rem;
      }


      .article-content h3 {
            font-size: 1.25rem;
      }


      .article-system-cta {
            margin: 10px 24px 35px;

            padding: 24px;

            gap: 18px;
      }


      .article-system-content h2 {
            font-size: 1.3rem;
      }


.approved-comments {
      margin-top: 30px;
      margin-bottom: 30px;
      padding: 22px 16px;
      border-radius: 14px;
}

.approved-comments-header {
      margin-bottom: 22px;
}

.approved-comments-header h3 {
      font-size: 21px;
      line-height: 1.4;
}

.approved-comments-header p {
      font-size: 14px;
      line-height: 1.6;
}

.approved-comments-list {
      gap: 14px;
}

.approved-comment {
      padding: 18px 15px;
      border-radius: 12px;
}

.approved-comment-author {
      gap: 10px;
      margin-bottom: 14px;
}

.approved-comment-avatar {
      width: 40px;
      height: 40px;
      font-size: 15px;
}

.approved-comment-name {
      font-size: 14px;
}

.approved-comment-date {
      font-size: 11px;
}

.approved-comment-text {
      padding-left: 0;
      font-size: 14px;
      line-height: 1.7;
}









}


@media (max-width: 480px) {

      .article-page {
            padding-top: 15px;
      }


      .article-container {
            padding: 0 8px;
      }


      .artigo-imagem-destaque img {
            height: 230px;
      }


      .article-header-content {
            padding: 26px 18px 24px;
      }


      .article-title {
            font-size: 1.8rem;

            line-height: 1.2;
      }


      .article-meta {
            font-size: 0.8rem;
      }


      .article-content {
            padding-left: 18px;
            padding-right: 18px;

            font-size: 0.98rem;
      }


      .article-content h2 {
            font-size: 1.4rem;
      }


      .article-system-cta {
            flex-direction: column;

            margin-left: 18px;
            margin-right: 18px;

            padding: 20px;
      }


      .article-system-icon {
            width: 50px;
            height: 50px;
      }

            .sidebar-widget {
                  padding: 20px;
            }
      
      
            .recent-post {
                  grid-template-columns:
                        90px minmax(0, 1fr);
            }
      
      
            .recent-post-image {
                  width: 90px;
                  height: 72px;
            }
      
      
            .recent-post-content h3 {
                  font-size: 0.87rem;
            }

}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 991px) {

      .portal-layout {
            grid-template-columns: 1fr;
      }


      .portal-sidebar {
            max-width: 100%;
      }


      .recent-post {
            grid-template-columns:
                  120px minmax(0, 1fr);
      }


      .recent-post-image {
            width: 120px;
            height: 90px;
      }


      .sidebar-ad {
            min-height: 150px;
      }

}