/* ========================================
   GLED.AI - RESPONSIVE MOBILE STYLES
   Arquivo: responsive-mobile.css
   Data: Janeiro 2025
   Breakpoints: Mobile-first approach
   Zero regressão em ≥ 992px
   ======================================== */

/* ========================================
   BASE MOBILE E SAFE AREAS
   ======================================== */
@supports (padding: max(0px)) {
  body { 
    padding-left: max(0px, env(safe-area-inset-left)); 
    padding-right: max(0px, env(safe-area-inset-right)); 
  }
  header, footer { 
    padding-bottom: max(0px, env(safe-area-inset-bottom)); 
  }
}

/* ========================================
   TIPOGRAFIA FLUIDA MOBILE
   ======================================== */
@media (max-width: 575.98px) {
  :root {
    --fs-h1: clamp(22px, 6vw, 28px);
    --fs-h2: clamp(18px, 5.2vw, 24px);
    --fs-h3: clamp(16px, 4.8vw, 20px);
    --fs-body: clamp(14px, 4.2vw, 16px);
    --fs-small: clamp(12px, 3.5vw, 14px);
  }
  
  h1 { font-size: var(--fs-h1); line-height: 1.2; }
  h2 { font-size: var(--fs-h2); line-height: 1.3; }
  h3 { font-size: var(--fs-h3); line-height: 1.3; }
  body, p, li { font-size: var(--fs-body); line-height: 1.5; }
  .small, small { font-size: var(--fs-small); }
}

/* ========================================
   BASE MOBILE - PHONES GRANDES
   ======================================== */
@media (max-width: 991.98px) {
    /* Previne overflow horizontal */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    html, body {
        overflow-x: hidden;
        width: 100%;
    }
    
  /* Imagens e vídeos responsivos */
  img, video, canvas { 
    max-width: 100%; 
    height: auto; 
    object-fit: contain; /* Mostra imagem inteira sem cortar */
    object-position: center; /* Centraliza a imagem */
  }
  
  /* Containers com padding adequado */
  .container, .wrap, .section { 
    padding-left: 16px; 
    padding-right: 16px; 
  }
  
  /* Grids em 1 coluna por padrão */
  .grid, .cards, .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Evita sombras estourando */
  .hero, header, footer { 
    overflow: hidden; 
    }
}

/* ========================================
   CORREÇÃO DESKTOP - MENU LATERAL
   ======================================== */
@media (min-width: 992px) {
  /* Esconde botão de menu mobile no desktop/tablet */
  .m-nav-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Corrige o menu lateral no desktop */
  .side_menu ul {
    writing-mode: vertical-lr !important; /* Mantém rotação no desktop */
    height: 50rem !important;
    max-width: calc(100vh - 150px) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 3.125rem !important;
  }
  
  .side_menu ul li a {
    transform: scale(-1) !important;
    line-height: 1 !important;
    font-size: 0.625rem !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2rem !important;
    font-weight: 400 !important;
  }
  
  /* Remove ícone hambúrguer que aparece no menu lateral */
  .side_menu .menu_click,
  .side_menu .icon,
  .side_menu i,
  .side_menu .hamburger,
  .side_menu [class*="menu"],
  .side_menu [class*="icon"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ========================================
   HEADER E NAVEGAÇÃO MOBILE
   ======================================== */
@media (max-width: 991.98px) {
    .main-header {
        position: relative;
        z-index: 1000;
    }
    
    .header_container {
    display: flex;
    justify-content: space-between;
        align-items: center;
    padding: 12px 16px;
    position: relative;
    }
    
    /* Logo responsivo */
    .logo {
    flex: 0 0 auto;
    }
    
    .logo img {
        max-width: 120px;
    height: auto;
  }
  
  /* Menu hambúrguer */
  .m-nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }
  
  .m-nav-toggle:hover,
  .m-nav-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1);
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  
  .m-nav-toggle[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  /* Menu off-canvas */
  .m-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(10px);
    z-index: 9999;
    transition: right 0.3s ease;
    padding: 80px 20px 20px;
    overflow-y: auto;
  }
  
  .m-nav[aria-hidden="false"] {
    right: 0;
  }
  
  .m-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .m-nav li {
    margin-bottom: 8px;
  }
  
  .m-nav a {
    display: block;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    min-height: 44px;
        display: flex;
        align-items: center;
  }
  
  .m-nav a:hover,
  .m-nav a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    outline: 2px solid #fff;
    outline-offset: -2px;
  }
  
  /* Backdrop */
  .m-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
        width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .m-nav-backdrop.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Esconde menu desktop */
  .side_menu {
    display: none;
  }
}

/* ==== SIDE MENU — MOBILE ONLY (≤ 991.98px) ==== */
@media (max-width: 991.98px){
  /* Garante que o menu exista e apareça no fluxo da página */
  .side_menu{
    display: block !important;          /* caso esteja display:none no mobile */
    visibility: visible !important;
    position: static !important;        /* evita ficar fora da tela */
        width: 100%;
    max-width: 100%;
    margin: 16px 0;
    overflow: visible;
  }

  /* Normaliza a lista para coluna */
  .side_menu ul{
    display: flex !important;
        flex-direction: column;
    gap: 0;                              /* divisória fará o espaçamento visual */
        padding: 0;
    margin: 0;
    list-style: none;                    /* remove bullets */
    writing-mode: horizontal-tb !important; /* Corrige rotação do texto */
    height: auto !important;             /* Remove altura fixa */
    max-width: 100% !important;          /* Remove largura máxima */
    }
    
  /* Cada item ocupa a largura toda e ganha divisória */
  .side_menu li{
    display: block;
    width: 100%;
        margin: 0;
    border-bottom: 1px solid rgba(255,255,255,.12); /* divisória sutil no tema escuro */
  }
  .side_menu li:last-child{
    border-bottom: none;
  }

  /* Links com área de toque adequada e seta à direita */
  .side_menu a{
    display: flex;
        align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;                  /* padding padronizado */
        text-decoration: none;
    line-height: 1.2;
    min-height: 44px;                    /* acessibilidade touch */
    -webkit-tap-highlight-color: transparent;
  }

  /* Seta (caso queira manter a indicação de navegação) */
  .side_menu a::after{
    content: "→";
    opacity: .75;
    transition: transform .18s ease, opacity .18s ease;
    flex: 0 0 auto;
  }
  .side_menu a:hover,
  .side_menu a:focus-visible{
    outline: none;                       /* confia no foco global do site */
  }
  .side_menu a:hover::after,
  .side_menu a:focus-visible::after,
  .side_menu a:active::after{
    transform: translateX(2px);
    opacity: .95;
  }

  /* Esconde separadores de layout horizontal do desktop (pontos/dots) */
  .side_menu .sep,
  .side_menu .dot,
  .side_menu .bullet{
        display: none !important;
  }
  /* Se o separador for pseudo-elemento do LI, neutraliza aqui */
  .side_menu li::before{
    content: none !important;
  }

  /* Evita qualquer overflow lateral causado por transform/sombras */
  .side_menu, .side_menu *{
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ====== CARDS — MOBILE ONLY (≤ 991.98px) ====== */
@media (max-width: 991.98px){

  /* 1) Containers de cards viram 1 coluna com gap consistente */
  :is(.cards, .cards-grid, .grid-cards, .posts-grid, .catalog-grid, .trilhas, [class*="cards"], [class*="grid-cards"]){
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;         /* harmonia entre cards */
    margin: 0;                     /* zera ruídos de margens herdadas */
  }

  /* 2) Card ocupa 100% e não "salta" no hover */
  :is(.card, .course-card, .blog-card, [class*="card"]){
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    transform: none !important;
  }
  :is(.card, .course-card, .blog-card, [class*="card"]):hover{
    transform: none !important;    /* neutraliza animações de hover no mobile */
  }

  /* 3) Imagens sempre responsivas */
  :is(.card, .course-card, .blog-card, [class*="card"]) img{
    display: block;
        width: 100%;
    height: auto;
        max-width: 100%;
  }

  /* 4) Tipografia e blocos internos com respiro */
  :is(.card, .course-card, .blog-card, [class*="card"]) :is(h3,h4,h5){
    margin: 6px 0 8px;
    line-height: 1.25;
  }
  :is(.card, .course-card, .blog-card, [class*="card"]) .card-body{
    padding: 12px 0 0;            /* texto não "cola" na imagem */
  }

  /* 5) Remove botões/ícones de hover (setas circulares etc.) só no mobile */
  :is(.card, .course-card, .blog-card, [class*="card"]) 
  :is(.btn-circle, .cta-circle, .hover-btn, .hover-cta, .card-cta, .cta, .button--floating, .button-fab){
    display: none !important;
  }

  /* Overlays de hover (se existirem) também somem no mobile */
  :is(.card, .course-card, .blog-card, [class*="card"]) 
  :is(.hover-overlay, .card-hover, .image-overlay, .on-hover){
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 6) Evita qualquer overflow lateral causado por sombras/posicionamentos */
  :is(.cards, .cards-grid, .grid-cards, .trilhas) *{
    box-sizing: border-box;
    max-width: 100%;
    }
}

/* ========================================
   PHONES MÉDIOS
   ======================================== */
@media (max-width: 767.98px) {
  .hero-title { 
    margin-bottom: 12px; 
  }
  
  .btn { 
    min-height: 44px; 
    padding: 12px 16px; 
    font-size: 16px;
  }
  
  .header_container {
    padding: 10px 12px;
  }
  
  .logo img {
    max-width: 100px;
  }
}

/* ========================================
   PHONES PEQUENOS
   ======================================== */
@media (max-width: 575.98px) {
  .card { 
        border-radius: 12px;
    padding: 14px; 
  }
  
  .card img { 
    border-radius: 10px; 
  }
  
  .header_container {
    padding: 8px 12px;
  }
  
  .logo img {
    max-width: 90px;
  }
  
  .m-nav {
        width: 100%;
    right: -100%;
    }
}

/* ========================================
   ULTRA-PEQUENOS
   ======================================== */
@media (max-width: 359.98px) {
  .header_container { 
    padding-left: 8px; 
    padding-right: 8px; 
  }
  
  .logo img {
    max-width: 80px;
  }
  
  .m-nav {
    padding: 60px 16px 16px;
    }
}

/* ========================================
   CARDS E GRIDS MOBILE
   ======================================== */
@media (max-width: 991.98px) {
    /* Grid de cards em 1 coluna */
  .col_item,
  .item_div,
  .blog_sec .col_item {
        width: 100%;
        max-width: 100%;
  }
  
  /* Cards com padding adequado */
  .item_div,
  .card,
  .blog_content {
    padding: 16px;
    margin-bottom: 16px;
        border-radius: 12px;
  }
  
  /* Remove sombras que estouram */
  .item_div,
  .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Imagens responsivas nos cards */
  .item_div img,
  .card img,
  .blog_content img {
        width: 100%;
    height: auto;
        object-fit: contain; /* Mostra a imagem inteira sem cortar */
        object-position: center; /* Centraliza a imagem */
        border-radius: 8px;
  }
}

/* 2 colunas para telas ≥ 576px se couber */
@media (min-width: 576px) and (max-width: 991.98px) {
  .grid-2-cols {
    grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ========================================
   FORMULÁRIOS MOBILE
   ======================================== */
@media (max-width: 991.98px) {
    .form-group {
    margin-bottom: 16px;
  }
  
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea,
  select {
        width: 100%;
        min-height: 44px;
    padding: 12px 16px;
    font-size: 16px; /* Previne zoom no iOS */
        border-radius: 8px;
    border: 1px solid #ddd;
        box-sizing: border-box;
  }
  
  textarea {
    min-height: 120px;
        resize: vertical;
    }
    
  .btn,
  button[type="submit"],
  input[type="submit"] {
        width: 100%;
        min-height: 44px;
    padding: 12px 16px;
    font-size: 16px;
        border-radius: 8px;
    border: none;
        cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .btn:focus,
  button:focus,
  input[type="submit"]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }
  
  /* Labels acima dos inputs */
  label {
        display: block;
    margin-bottom: 8px;
        font-weight: 600;
    color: #333;
  }
  
  /* Inputs com inputmode apropriado */
  input[type="tel"] {
    inputmode: tel;
  }
  
  input[type="email"] {
    inputmode: email;
  }
  
  input[type="number"] {
    inputmode: numeric;
    }
}

/* ========================================
   HOVER EFFECTS MOBILE FALLBACK
   ======================================== */
@media (max-width: 991.98px) {
  /* Remove hover effects que causam jump */
  .card:hover,
  .item_div:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Fallback para touch */
  .card:active,
  .item_div:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  /* ========================================
     MELHORAR ESPAÇAMENTO ENTRE LINHAS - SEÇÃO "QUAL SEU MODELO IDEAL?"
     ======================================== */
  
  /* Títulos dos cards da seção "Qual seu modelo ideal?" */
  .service_sec .for_mob_scrll .col_item .item_div h3,
  .service_sec .for_mob_scrll .col_item .item_div h4 {
    line-height: 1.4 !important; /* Melhor espaçamento para títulos multilinhas */
    margin-bottom: 16px !important; /* Espaçamento adequado após o título */
  }
  
  /* Descrições dos cards da seção "Qual seu modelo ideal?" */
  .service_sec .for_mob_scrll .col_item .item_div .img_content p,
  .service_sec .for_mob_scrll .col_item .item_div p {
    line-height: 1.6 !important; /* Melhor espaçamento para descrições longas */
    margin-bottom: 12px !important; /* Espaçamento entre parágrafos */
  }
  
  /* Botões com feedback visual */
  .btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* ========================================
   LANGUAGE SELECTOR MOBILE
   ======================================== */
@media (max-width: 991.98px) {
  .language-selector {
    position: relative;
    display: inline-block;
  }
  
  .language-selector select {
        min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
        cursor: pointer;
  }
  
  .language-selector select:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }
}

/* ========================================
   UTILITIES MOBILE
   ======================================== */
@media (max-width: 991.98px) {
  .m-stack {
        display: flex;
        flex-direction: column;
    gap: 16px;
  }
  
  .m-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .m-hide {
    display: none !important;
  }
  
  .m-show {
    display: block !important;
  }
  
  .m-text-center {
        text-align: center;
    }
    
  .m-text-left {
    text-align: left;
  }
  
  .m-full-width {
        width: 100%;
    }
    
  .m-no-padding {
        padding: 0;
    }
    
  .m-no-margin {
        margin: 0;
    }
}

/* ========================================
   CORREÇÃO ESPECÍFICA CARDS "FICOU NA DÚVIDA?" - MOBILE STRICT
   ======================================== */
@media (max-width: 480px) {

  /* 0) Grid/Seção — gap harmônico entre cards */
  .duvida-grid,
  .ficou-na-duvida-grid,
  .fix-202510-duvida-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;                 /* ajuste fino do espaçamento entre cards */
    padding-inline: 0;
  }

  /* 1) Card — respiro interno consistente e textos à esquerda */
  .duvida-card,
  .ficou-na-duvida-card,
  .fix-202510-duvida-card {
    padding: 16px;
        border-radius: 12px;
    text-align: left;
    position: relative;
  }

  /* 2) TAG "Mais recente" — fix definitivo no mobile
        - prioridade alta (!important)
        - empilhamento acima de quaisquer overlays
        - sem blend/filters/transforms
        - espaçamento inferior visível (respiro até o título)
  */
  .badge-mais-recente,
  .chip-mais-recente,
  .fix-202510-badge-mais-recente {
    position: relative;
    z-index: 3;                 /* acima de pseudo-elementos */
    isolation: isolate;         /* impede blend inesperado */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 9999px;

    background: #FFC107 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    margin-top: 4px;
    margin-bottom: 6px;         /* <-- reduz ainda mais o espaço entre tag e título para maior harmonia */

    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
        opacity: 1 !important;
    pointer-events: auto;
  }

  /* 2.a) Neutraliza qualquer efeito de :hover no MOBILE que troque cor/opacidade */
  .duvida-card:hover .badge-mais-recente,
  .ficou-na-duvida-card:hover .badge-mais-recente,
  .fix-202510-duvida-card:hover .fix-202510-badge-mais-recente {
    background: #FFC107 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Se o sumiço vinha de pseudo-elementos/overlays, desligue no mobile */
  .duvida-card::before,
  .duvida-card::after,
  .ficou-na-duvida-card::before,
  .ficou-na-duvida-card::after,
  .fix-202510-duvida-card::before,
  .fix-202510-duvida-card::after {
    content: none !important;
  }

  /* 3) TÍTULO — melhor quebra de linha e leitura, não colado na tag */
  .duvida-card .title,
  .ficou-na-duvida-card .title,
  .fix-202510-duvida-card .title {
    margin: 0;                  /* zera resíduos */
    margin-top: 0;              /* já temos o spacing na tag */
    margin-bottom: 4px;
    line-height: 1.4;           /* melhor espaçamento entre linhas para títulos multilinhas */
    font-weight: 800;
    font-size: clamp(18px, 5vw, 24px) !important; /* Aumenta significativamente o tamanho dos títulos */
    overflow-wrap: anywhere;    /* evita overflow em palavras longas */
    word-break: normal;
    hyphens: auto;
    text-align: left !important; /* Alinha à esquerda como na referência */
  }
}

/* MOBILE "robusto": também cobre dispositivos sem hover e com toque */
@media (max-width: 480px) and (hover: none), (pointer: coarse) {
  .duvida-card:hover .badge-mais-recente,
  .ficou-na-duvida-card:hover .badge-mais-recente,
  .fix-202510-duvida-card:hover .fix-202510-badge-mais-recente {
    background: #FFC107 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 1 !important;
    }
}

/* ========================================
   CORREÇÃO IMAGEM SERVIÇOS E ESPAÇAMENTO "SERVIÇOS" - MOBILE ONLY
   ======================================== */
@media (max-width: 480px) {

  /* 1) Corrigir recorte da imagem no mobile */
  .servico-card img,
  .card-servico img,
  .fix-202510-servico-img {
        width: 100%;
    height: auto !important;        /* mantém proporção natural */
    object-fit: contain !important; /* mostra imagem inteira */
    object-position: center top !important; /* centraliza sem cortar o topo */
    border-radius: 8px;             /* mantém harmonia visual */
  }

  /* 2) Ajustar espaçamento do texto "SERVIÇOS" */
  .servico-label,
  .card-servico-label,
  .fix-202510-servico-label {
    display: block;
        text-align: center;
    padding-top: 10px !important;   /* aumenta o espaço acima */
    padding-bottom: 2px;
    font-weight: 600;
    letter-spacing: 0.05em;
    }
}

/* ========================================
   SUBSTITUIÇÃO DE LOGOS - MOBILE ONLY
   ======================================== */
@media (max-width: 991.98px) {
  /* Header logo - substituir logo.svg por logo-g-ai.png */
  .header_container .logo img {
    content: url('../logo/logo-g-ai.png') !important;
    max-width: 120px !important;
    height: auto !important;
  }
  
  /* Mobile header logo */
  .logo_for_mob img {
    content: url('../logo/logo-g-ai.png') !important;
    max-width: 100px !important;
    height: auto !important;
  }
  
  /* Footer logo */
  .mob_footer .logo img {
    content: url('../logo/logo-g-ai.png') !important;
    max-width: 120px !important;
    height: auto !important;
  }
  
  /* Substituir texto "Audento" por "Gled.AI" */
  .audento span {
    content: "Gled.AI" !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600 !important;
  }
  
  /* Remover botão "Próxima página" da lateral direita */
  .scroll_button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Corrigir dropdown do seletor de idioma no mobile */
  .language-selector {
    position: relative !important;
    margin-left: 8px !important;
  }
  
  .language-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important; /* Alinha à direita para não sair da tela */
    left: auto !important; /* Remove left: 0 */
    min-width: 140px !important;
    max-width: calc(100vw - 32px) !important; /* Limita largura máxima */
    transform: translateY(-10px) !important;
    z-index: 9999 !important; /* Garante que fique acima de outros elementos */
  }
  
  .language-dropdown.show {
    transform: translateY(0) !important;
  }
  
  /* Garantir que o dropdown não saia da tela */
  .language-selector {
    overflow: visible !important;
  }
  
  /* Ajustar posicionamento em telas muito pequenas */
@media (max-width: 480px) {
    .language-dropdown {
      right: -10px !important; /* Pequeno ajuste para telas muito pequenas */
      min-width: 120px !important;
    }
  }
  
  /* Centralizar título da home e diminuir margem com Trilhas de conhecimento */
  .fix-202510-hero-title {
    text-align: center !important; /* Centraliza o título */
    margin-bottom: 20px !important; /* Reduz margem inferior */
  }
  
  /* Diminuir margem superior da seção Trilhas de conhecimento */
  .sec_head {
    margin-top: 10px !important; /* Reduz margem superior */
  }
  
  .sec_head h2 {
    text-align: center !important; /* Centraliza o subtítulo também */
    margin-bottom: 15px !important; /* Reduz margem inferior */
  }
  
  /* Centralizar texto descritivo da seção Trilhas de conhecimento */
  .content_div p {
    text-align: center !important; /* Centraliza o texto descritivo */
    line-height: 1.6 !important; /* Melhora a legibilidade */
    margin-bottom: 20px !important; /* Espaçamento adequado */
    }
  
  /* Centralizar textos da seção FAQ */
  .blog_sec .content_div .sec_head {
    text-align: center !important;
  }
  
  .blog_sec .content_div .sec_head .for_mob {
    text-align: center !important;
  }
  
  .blog_sec .content_div .sec_head h2 {
    text-align: center !important;
  }
  
  .blog_sec .content_div p {
    text-align: center !important;
  }
}

/* ========================================
   TRILHAS DE CONHECIMENTO - MOBILE ONLY (≤ 991.98px)
   ======================================== */
@media (max-width: 991.98px) {
  /* Grid das trilhas em 1 coluna com espaçamento harmônico */
  .fix-202510-trilhas-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Cards das trilhas ocupam 100% da largura */
  .fix-202510-card-trilha {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    background: #282828 !important;
    border: 2px solid #606060 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Remove botões/overlays de hover dos cards das trilhas */
  .fix-202510-card-trilha .go_to_website,
  .fix-202510-card-trilha .icon-r_arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Remove qualquer overlay de hover */
  .fix-202510-card-trilha::before,
  .fix-202510-card-trilha::after {
    content: none !important;
  }
  
  /* Neutraliza efeitos de hover no mobile */
  .fix-202510-card-trilha:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Títulos das trilhas com espaçamento adequado */
  .fix-202510-card-trilha .port_head {
    margin-bottom: 16px !important;
  }
  
  .fix-202510-card-trilha .port_head h2 {
    font-size: clamp(18px, 4.5vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #fff !important;
  }
  
  /* Imagens das trilhas responsivas */
  .fix-202510-card-trilha figure {
    margin: 0 0 16px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  
  .fix-202510-card-trilha figure img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 12px !important;
    object-fit: contain !important; /* Mostra a imagem inteira sem cortar */
    object-position: center !important; /* Centraliza a imagem */
  }
  
  /* Conteúdo das trilhas com espaçamento adequado */
  .fix-202510-card-trilha .port_content {
    margin: 0 !important;
  }
  
  .fix-202510-card-trilha .port_content p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    color: #ccc !important;
  }
}

/* ========================================
   HOVER APENAS EM DISPOSITIVOS COM HOVER (desktop/tablet com mouse)
   ======================================== */
@media (hover: hover) {
  /* Manter efeitos hover originais apenas em desktop/tablet */
  .blog_sec .col_item .item_div:hover .blog_content .update {
    background-color: #FEB913 !important;
  }
  
  .blog_sec .col_item .item_div:hover .blog_content span {
    background-color: #fff !important;
    color: #FEB913 !important;
  }
  
  .blog_sec .col_item .item_div:hover .blog_content .figure {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
  }
}

/* ========================================
   SEÇÃO "FICOU NA DÚVIDA" - MOBILE ONLY (≤ 991.98px)
   ======================================== */
@media (max-width: 991.98px) {
  /* Container 1 coluna com gap */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin: 0;
  }

  /* Card com moldura arredondada, padding e fundo */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.card, .duvida-card, .faq-card, [class*="card"]) {
    position: relative;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px;
    border-radius: 22px;
    background: #0e0e0e;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
    overflow: hidden;
  }

  /* Título grande e forte, com clamp */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.card, .duvida-card, .faq-card, [class*="card"]) :is(h2,h3) {
    font-weight: 800;
    line-height: 1.15;
    margin: 12px 0 6px;
    font-size: clamp(22px, 7vw, 32px);
  }

  /* Esconder mídias/overlays só nesta seção no mobile */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.card, .duvida-card, .faq-card, [class*="card"])
  :is(img, .thumb, .card-thumb, .media, .hover-overlay, .on-hover) {
    display: none !important;
  }

  /* Selo "Mais recente" em pill */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.badge, .tag, .pill, .label, .mais-recente) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    min-height: 36px;
    border-radius: 999px;
    font-weight: 800;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.1;
    /* use a mesma cor amarela do tema; se existir var, reutilize */
    background: var(--gled-yellow, #FFB800);
    color: #111; /* ou a cor atual do tema para contraste */
  }
}

/* ==== Ficou na dúvida — remover espaço extra (MOBILE ONLY) ==== */
@media (max-width: 991.98px){

  /* 1) Empilhar conteúdo com gap controlado e altura "auto" */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.card, .duvida-card, .faq-card, [class*="card"]){
    display: flex;
    flex-direction: column;
    gap: 10px;                 /* aproxima selo, título e demais textos */
    min-height: auto !important;
    height: auto !important;
  }

  /* 2) Se existir wrapper de mídia/thumbnail com aspect-ratio/padding-top,
        neutralizar no mobile para não criar espaço fantasma */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.media, .card-media, .thumb, .image-wrapper, .card-thumb){
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
  }

  /* 3) Selo/pill e título com margens enxutas */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.badge, .tag, .pill, .label, .mais-recente){
    margin: 0 0 20px 0 !important;   /* espaçamento adequado para separar do título */
  }

  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.card, .duvida-card, .faq-card, [class*="card"]) :is(h2,h3){
    margin: 0 !important;          /* remove margens grandes herdadas */
  }

  /* 4) Zerar espaços de wrappers internos que possam empurrar o conteúdo */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.card-header, .card-body, .card-content){
    margin: 0 !important;
    padding-top: 0 !important;
  }
}

/* ==== Ficou na dúvida — Mobile only: remover imagem e vãos ==== */
@media (max-width: 991.98px){

  /* Escopo da seção — use o que existir; prefira data-section="ficou-duvida" */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"]){
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important; /* harmonia entre cards */
  }

  /* Card ajustado ao conteúdo */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.card, .duvida-card, .faq-card, [class*="card"]){
    display: flex;
    flex-direction: column;
    gap: 10px;               /* aproxima selo/título/texto */
    height: auto !important;
    min-height: auto !important;
    overflow: hidden;
  }

  /* REMOVER IMAGEM E WRAPPERS DE MÍDIA NO MOBILE (elimina o vão) */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.media, .card-media, .thumb, .image-wrapper, .card-thumb, .figure, .cover){
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
  }
  /* Se a imagem estiver diretamente no card */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(img, picture, video){
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* Se usarem background-image no wrapper, neutralizar */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.media, .card-media, .thumb, .image-wrapper, .card-thumb, .figure, .cover){
    background: none !important;
    background-image: none !important;
  }
  /* Overlays/pseudo-elementos que criem espaço */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.media, .card-media, .thumb, .image-wrapper, .card-thumb)::before,
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.media, .card-media, .thumb, .image-wrapper, .card-thumb)::after{
    content: none !important;
  }

  /* Margens/paddings enxutos nos blocos internos */
  :is([data-section="ficou-duvida"], .ficou-duvida, [class*="duvida"], [class*="dúvida"])
  :is(.card-header, .card-body, .card-content){
    margin: 0 !important;
    padding-top: 0 !important;
  }
}

/* ===== FAQ — MOBILE ONLY (≤ 991.98px) ===== */
@media (max-width: 991.98px){

  /* Container do FAQ (prefira data-section="faq" para escopo seguro) */
  :is([data-section="faq"], .faq, .faq-section, [class*="faq"]){
    /* aproxima da descrição anterior */
    margin-top: 8px !important;
  }

  /* Se houver um botão/CTA imediatamente antes do FAQ, crie um respiro curto */
  :is(.btn, .button, .cta-btn, .cta-area, .cta-row) + :is([data-section="faq"], .faq, .faq-section, [class*="faq"]){
    margin-top: 12px !important;   /* espaço pequeno e harmônico */
  }

  /* Lista do FAQ em 1 coluna com gaps consistentes */
  :is([data-section="faq"], .faq, .faq-section, [class*="faq"]) :is(ul, .faq-list, .accordion, .items){
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;          /* espaço entre perguntas */
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* Cada item do FAQ com padding e borda atual suavizada */
  :is([data-section="faq"], .faq, .faq-section, [class*="faq"]) :is(li, .faq-item, .accordion-item){
    border-radius: 18px;
    padding: 14px 16px;
    /* mantém o estilo existente; se houver sombra/borda, não altere cor */
    min-height: auto;
  }

  /* Cabeçalho/pergunta: margens enxutas e toque confortável */
  :is([data-section="faq"], .faq, .faq-section, [class*="faq"]) :is(.faq-title, .accordion-header, h3, h4){
    margin: 0 0 4px 0 !important;
    line-height: 1.4; /* melhor espaçamento entre linhas para títulos multilinhas */
  }

  /* Conteúdo/resposta colapsável (quando aberto) com respiro curto */
  :is([data-section="faq"], .faq, .faq-section, [class*="faq"]) :is(.faq-content, .accordion-panel, .content){
    margin-top: 6px;
  }

  /* Zera possíveis grandes paddings/margens do wrapper que criavam o vão */
  :is([data-section="faq"], .faq, .faq-section, [class*="faq"]) :is(.section, .wrap, .container, .faq-wrap){
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ===== FAQ HARMÔNICO E ESTRUTURADO - MOBILE ONLY (≤ 991.98px) ===== */
@media (max-width: 991.98px){

  /* Container principal do FAQ com espaçamento harmônico */
  .blog_sec .col_item.fix-202510-faq-grid.fix-202510-duvida-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Cards do FAQ com estrutura harmônica */
  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card {
    background: #0e0e0e !important;
    border: 2px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 22px !important;
    padding: 20px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: auto !important;
    height: auto !important;
    box-shadow: none !important;
  }

  /* Conteúdo interno do card com estrutura organizada */
  .blog_sec .col_item .item_div .blog_content.fix-202510-faq-summary.fix-202510-duvida-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Garantir que a label "Mais recente" sempre fique acima do título */
  .blog_sec .col_item .item_div .blog_content.fix-202510-faq-summary.fix-202510-duvida-content label.update.fix-202510-badge-mais-recente {
    order: 1 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .blog_sec .col_item .item_div .blog_content.fix-202510-faq-summary.fix-202510-duvida-content h3.title {
    order: 2 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Forçar ordem específica para todos os elementos dentro do card */
  .blog_sec .col_item .item_div .blog_content.fix-202510-faq-summary.fix-202510-duvida-content .figure {
    order: 3 !important;
  }

  .blog_sec .col_item .item_div .blog_content.fix-202510-faq-summary.fix-202510-duvida-content .date_rtime {
    order: 4 !important;
  }

  /* Selo "Mais recente" com design pill harmônico */
  .blog_sec .col_item .item_div .blog_content label.update.fix-202510-badge-mais-recente {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FEB913 !important;
    color: #111 !important;
    font-weight: 800 !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    margin: 0 !important;
    width: fit-content !important;
    line-height: 1.1 !important;
  }

  /* Títulos das perguntas com tipografia harmônica */
  .blog_sec .col_item .item_div .blog_content h3.title {
    font-size: clamp(18px, 5vw, 24px) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important; /* Melhor espaçamento entre linhas para títulos multilinhas */
    color: #fff !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Remover elementos desnecessários no mobile */
  .blog_sec .col_item .item_div .blog_content .figure,
  .blog_sec .col_item .item_div .blog_content .scene,
  .blog_sec .col_item .item_div .blog_content figure {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .blog_sec .col_item .item_div .blog_content .date_rtime {
    display: none !important;
  }

  /* Link do card sem decoração */
  .blog_sec .col_item .item_div .blog_content a {
    text-decoration: none !important;
    color: inherit !important;
  }

  /* CTA "Fale com um especialista" com espaçamento harmônico */
  .blog_sec .col_item a._link.fix-202510-cta {
    margin-top: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: clamp(16px, 4.2vw, 18px) !important;
  }

  /* CTA "Descubra" centralizado igual ao "Fale com um especialista" */
  .protfolio_sec .content_div a._link.fix-202510-cta {
    margin-top: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: clamp(16px, 4.2vw, 18px) !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .blog_sec .col_item a._link.fix-202510-cta .icon {
    background: #FEB913 !important;
    color: #111 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }

  /* Ícone do botão "Descubra" com mesmo estilo */
  .protfolio_sec .content_div a._link.fix-202510-cta .icon {
    background: #FEB913 !important;
    color: #111 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }

  /* HIERARQUIA VISUAL FORÇADA - MOBILE ONLY */
  /* Garantir que a label "Mais recente" SEMPRE fique acima do título */
  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card .blog_content.fix-202510-faq-summary.fix-202510-duvida-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* Remove gap geral para controle específico */
  }

  /* Ordem específica para cada elemento */
  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card .blog_content.fix-202510-faq-summary.fix-202510-duvida-content label.update.fix-202510-badge-mais-recente {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FEB913 !important;
    color: #111 !important;
    font-weight: 800 !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    margin: 0 0 20px 0 !important; /* Adiciona margem inferior para separar do título */
    width: fit-content !important;
    line-height: 1.1 !important;
    position: static !important; /* Força posicionamento estático para respeitar margens */
    top: auto !important; /* Remove posicionamento absoluto */
    z-index: 10 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
  }

  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card .blog_content.fix-202510-faq-summary.fix-202510-duvida-content h3.title {
    order: 2 !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important; /* Melhor espaçamento entre linhas para títulos multilinhas */
    color: #fff !important;
    margin: 0 !important; /* Remove margem superior, o espaçamento vem do badge */
    text-align: left !important;
  }

  /* Elementos ocultos com ordem específica */
  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card .blog_content.fix-202510-faq-summary.fix-202510-duvida-content .figure {
    order: 3 !important;
    display: none !important;
  }

  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card .blog_content.fix-202510-faq-summary.fix-202510-duvida-content .date_rtime {
    order: 4 !important;
    display: none !important;
  }

  /* GARANTIA MÁXIMA PARA ELEMENTOS "MAIS RECENTE" - MOBILE ONLY */
  /* Força máxima prioridade e visibilidade */
  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card .blog_content.fix-202510-faq-summary.fix-202510-duvida-content label.update.fix-202510-badge-mais-recente {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    isolation: auto !important;
    contain: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    perspective: none !important;
    transform-style: flat !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }

  /* Neutraliza qualquer hover/active que possa afetar a visibilidade */
  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card .blog_content.fix-202510-faq-summary.fix-202510-duvida-content label.update.fix-202510-badge-mais-recente:hover,
  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card .blog_content.fix-202510-faq-summary.fix-202510-duvida-content label.update.fix-202510-badge-mais-recente:active,
  .blog_sec .col_item .item_div.fix-202510-faq-card.fix-202510-duvida-card .blog_content.fix-202510-faq-summary.fix-202510-duvida-content label.update.fix-202510-badge-mais-recente:focus {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    background: #FEB913 !important;
    color: #111 !important;
  }

  /* CORREÇÃO CRÍTICA: Sobrescrever posicionamento absoluto do main.min.css */
  /* O arquivo principal aplica position: absolute ao .update no mobile, causando sobreposição */
  .blog_sec .col_item .item_div .blog_content .update {
    position: static !important;
    top: auto !important;
    margin: 0 0 20px 0 !important;
  }

  /* SOLUÇÃO DIRETA E ESPECÍFICA - MOBILE ONLY */
  /* Aplicar diretamente nos elementos específicos */
  .fix-202510-badge-mais-recente {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FEB913 !important;
    color: #111 !important;
    font-weight: 800 !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    margin: 0 0 20px 0 !important; /* Adiciona margem inferior para separar do título */
    width: fit-content !important;
    line-height: 1.1 !important;
    order: 1 !important;
    position: static !important; /* Força posicionamento estático para respeitar margens */
    top: auto !important; /* Remove posicionamento absoluto */
  }

  .fix-202510-duvida-content h3.title {
    font-size: clamp(18px, 5vw, 24px) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important; /* Melhor espaçamento entre linhas para títulos multilinhas */
    color: #fff !important;
    margin: 0 !important; /* Remove margem superior, o espaçamento vem do badge */
    text-align: left !important;
    order: 2 !important;
  }

  .fix-202510-duvida-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .fix-202510-duvida-content .figure {
    display: none !important;
    order: 3 !important;
  }

  .fix-202510-duvida-content .date_rtime {
    display: none !important;
    order: 4 !important;
  }
}