body.popup-active #notification-container {
      display: none !important;
    }

    /* Posição e comportamento padrão das notificações */
    #notification-container {
      position: fixed !important;
      bottom: 16px !important;
      left: 16px !important;
      right: auto !important;
      max-width: 320px !important;
      z-index: 999 !important; /* abaixo do overlay do popup (9999) */
      pointer-events: none; /* não intercepta cliques */
    }

    #notification-container > div { pointer-events: none; }
    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 300;
      src: url(fonts/normal_1.woff2);
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 300;
      src: url(fonts/normal.woff2);
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 300;
      src: url(fonts/normal_2.woff2);
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 300;
      src: url(fonts/normal_3.woff2);
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 300;
      src: url(fonts/normal_4.woff2);
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 400;
      src: url(fonts/normal.woff2);
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 400;
      src: url(fonts/normal_4.woff2);
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 400;
      src: url(fonts/normal_1.woff2);
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 400;
      src: url(fonts/normal_2.woff2);
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 400;
      src: url(fonts/normal_3.woff2);
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      src: url(fonts/normal_1.woff2);
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      src: url(fonts/normal_4.woff2);
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      src: url(fonts/normal.woff2);
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      src: url(fonts/normal_3.woff2);
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      src: url(fonts/normal_2.woff2);
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 600;
      src: url(fonts/normal_3.woff2);
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 600;
      src: url(fonts/normal_4.woff2);
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 600;
      src: url(fonts/normal_2.woff2);
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 600;
      src: url(fonts/normal_1.woff2);
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 600;
      src: url(fonts/normal.woff2);
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 700;
      src: url(fonts/normal_1.woff2);
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 700;
      src: url(fonts/normal.woff2);
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 700;
      src: url(fonts/normal_2.woff2);
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 700;
      src: url(fonts/normal_4.woff2);
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 700;
      src: url(fonts/normal_3.woff2);
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 800;
      src: url(fonts/normal.woff2);
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 800;
      src: url(fonts/normal_2.woff2);
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 800;
      src: url(fonts/normal_1.woff2);
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 800;
      src: url(fonts/normal_4.woff2);
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 800;
      src: url(fonts/normal_3.woff2);
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 900;
      src: url(fonts/normal_4.woff2);
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 900;
      src: url(fonts/normal_3.woff2);
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 900;
      src: url(fonts/normal_2.woff2);
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 900;
      src: url(fonts/normal_1.woff2);
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
      font-display: swap;
    }

    @font-face {
      font-family: Montserrat;
      font-style: normal;
      font-weight: 900;
      src: url(fonts/normal.woff2);
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
      font-display: swap;
    }
  </style>

  <!-- CSS para padronizar tamanhos, bordas e espaçamentos -->
  <style>
    /* Container padrão para vídeo e primeira imagem */
    .content-section .video-container,
    .content-section .photo-container {
      width: 388px;
      height: 670px;
      overflow: hidden;
    }

    /* Elementos internos preenchem o container */
    .content-section .video-container video,
    .content-section .photo-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Novo container para a segunda imagem: 350x670 */
    .content-section .photo-container2 {
      width: 350px;
      height: 670px;
      overflow: hidden;
      /* Altere o valor de margin-left para mover horizontalmente a segunda imagem:
           Valor positivo move para a direita; valor negativo para a esquerda */
      margin-left: 7px;
    }

    .content-section .photo-container2 img {
      width: 100%;
      height: 100%;
      /* Alterado de 120% para 100% para garantir bordas arredondadas */
      object-fit: cover;
    }

    /* Aplica bordas arredondadas em ambas as imagens */
    .content-section .photo-container img,
    .content-section .photo-container2 img {
      border-radius: 15px;
    }

    /* Espaçamento vertical para o segundo container */
    .second-photo-section {
      margin-top: 10px;
      /* ajuste conforme necessário */
    }

    .old-price {
      text-decoration: line-through;
      text-decoration-color: rgba(255, 255, 255, 0.7);
      font-size: 13px;
      margin-right: 4px;
    }

    .top-bar {
      background: #ff6b3d;
      padding: 3px 0;
      margin-bottom: 0;
    }

    .top-bar-content {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 50px;
      color: white;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    .top-bar-content span {
      font-size: 12px;
    }

    /* Estiliza o aviso de promoção para ficar mais profissional */
    .privacy-logo {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    /* Pulse para indicador verde das notificações */
    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    .pulse {
      animation: pulse 2s infinite;
    }

    /* Promotions */
    .promotions {
      margin-top: 1.5rem;
    }

    .promotions-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      cursor: pointer;
    }

    .promotions-header h4 {
      font-size: 0.875rem;
      font-weight: 500;
    }

    .chevron {
      color: var(--gray-400);
      transition: transform 0.3s ease;
    }

    /* Content Tabs */
    .content-tabs {
      /* margin-bottom: 2rem; */
    }

    .tabs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 1rem;
    }

    .tab {
      padding: 0.75rem;
      text-align: center;
      font-size: 0.875rem;
      background-color: var(--gray-100);
      border: none;
      cursor: pointer;
      transition: background-color 0.2s;
      color: var(--gray-600);
    }

    .tab.active {
      background-color: var(--orange-50);
      color: var(--orange-500);
      font-weight: 500;
    }

    .tab:first-child.active {
      box-shadow: inset -1px 0 0 var(--orange-200);
    }

    .tab:last-child.active {
      box-shadow: inset 1px 0 0 var(--orange-200);
    }

    .tab-content {
      display: none;
    }

    /* Pricing panel (Assinaturas) */
    .pricing-panel {
      background: #ffffff;
      border: 1px solid #ececec;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
      max-width: 380px;
    }

    .pricing-panel h3 {
      font-size: 18px;
      font-weight: 700;
      color: #111827;
      margin: 0 0 10px 0;
    }

    .tag-popular {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #fff1e6;
      color: #b45309;
      font-weight: 700;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      margin-bottom: 10px;
    }

    /* Badge promocional fora da tag principal, alinhada ao lado */
    .header-promo {
      margin-left: 8px;
      vertical-align: middle;
      display: inline-flex;
    }

  .pricing-panel a { text-decoration: none; }
  .pricing-panel a:hover { text-decoration: none; }
  /* Garantir que nenhum texto nos botões/links fique sublinhado */
  .plan-primary,
  .plan-primary:hover,
  .plan-primary:focus,
  .plan-primary:active,
  .plan-primary:visited,
  .plan-outline,
  .plan-outline:hover,
  .plan-outline:focus,
  .plan-outline:active,
  .plan-outline:visited,
  .footer-cta a,
  .footer-cta a:hover,
  .footer-cta a:focus,
  .footer-cta a:active,
  .footer-cta a:visited { text-decoration: none !important; }
  .plan-primary *, .plan-outline * { text-decoration: none !important; }

    .plan-primary {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: linear-gradient(180deg, #ff7a1a 0%, #ff6b3d 100%);
      color: #ffffff;
      border: none;
      border-radius: 10px;
      padding: 14px 16px;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(255, 107, 61, 0.28);
      transition: transform 0.06s ease, box-shadow 0.25s ease;
      font-weight: 800;
      position: relative;
      overflow: hidden;
      text-decoration: none;
    }

    .plan-primary:hover {
      box-shadow: 0 14px 30px rgba(255, 107, 61, 0.38);
      transform: translateY(-1px);
      text-decoration: none;
    }

    .plan-primary:active { transform: translateY(1px); }

    .plan-primary .plan-title { font-size: 16px; letter-spacing: 0.3px; text-decoration: none; }
  .plan-primary .plan-price { font-size: 20px; letter-spacing: 0.3px; text-decoration: none; text-shadow: 0 1px 0 rgba(0,0,0,0.18); }
    .plan-primary .plan-price::after { content: "  →"; font-weight: 900; }
  .plan-primary .mini-badge { margin-left: 4px; }

    /* shimmer */
    .plan-primary::before {
      content: "";
      position: absolute;
      top: 0; left: -60%;
      width: 40%; height: 100%;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%);
      transform: skewX(-20deg);
      animation: shimmer 2.4s infinite;
    }

    @keyframes shimmer {
      0% { left: -60%; }
      100% { left: 120%; }
    }

    .perk-chip {
      display: inline-block;
      margin-top: 8px;
      background: #ffe8d9;
      color: #7c2d12;
      border-radius: 999px;
      padding: 6px 10px;
      font-weight: 800;
      font-size: 12px;
    }

    .plan-outline {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap; /* evita quebra para segunda linha */
      gap: 12px;
      background: #ffffff;
      border: 1px solid #f5b490;
      border-radius: 10px;
      padding: 12px 14px;
      margin-top: 10px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .plan-outline:hover {
      border-color: #ff6b3d;
      box-shadow: 0 6px 16px rgba(255, 107, 61, 0.12);
    }

    .plan-outline .left {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #111827;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap; /* evita quebra entre rótulo e badge */
      min-width: 0; /* permite encolher quando o espaço é curto */
    }

    .plan-outline .right {
      color: #111827;
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap; /* mantém o preço em uma linha */
      flex: 0 0 auto; /* não deixa o preço encolher a ponto de quebrar */
    }

    .mini-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
      background: #f3f4f6;
      border-radius: 999px;
      white-space: nowrap; /* badge não quebra */
    }

    .plan-label { white-space: nowrap; }

    @media (max-width: 380px) {
      .plan-outline { padding: 10px 12px; }
      .plan-outline .left { gap: 6px; }
      .mini-badge { font-size: 11px; padding: 2px 6px; }
      .plan-label { font-size: 14px; }
      .plan-outline .right { font-size: 14px; }
    }

    /* Telas extra estreitas: reserva espaço para o preço e limita a largura da seção esquerda */
    @media (max-width: 360px) {
      .plan-outline .left { max-width: calc(100% - 96px); } /* ~96px reservados ao preço */
      .plan-outline { gap: 8px; }
    }
    @media (max-width: 320px) {
      .plan-outline .left { max-width: calc(100% - 88px); }
      .plan-label { font-size: 13px; }
      .plan-outline .right { font-size: 13px; }
      .mini-badge { font-size: 10px; padding: 2px 5px; }
    }

    .mini-badge.best {
      background: #fff1e6;
      color: #b45309;
    }

    .mini-badge.premium {
      background: #e9f5ff;
      color: #0b62a4;
    }

    /* Mini-badge verde clarinho para 'Promocional' */
    .mini-badge.promo {
      background: #ecfdf5; /* verde bem claro */
      color: #047857;     /* verde escuro para contraste */
    }

    /* Footer CTA container */
    .footer-cta {
      max-width: 380px;
      margin: 28px auto 16px;
      padding: 0 16px;
    }

    /* Notification container (bottom-right) */
    #notification-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      max-width: 320px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      pointer-events: none; /* permite clicar através quando não sobre toasts */
    }
    #notification-container > div { pointer-events: auto; }

    /* Destaque para o plano recomendado (3 Meses) */
    .plan-outline.featured {
      border-color: #ff6b3d;
      background: #fff7f3;
      box-shadow: 0 8px 20px rgba(255, 107, 61, 0.12);
    }

    /* Ícone sutil no plano em destaque */
    .plan-outline.featured .left::before {
      content: "\1F451"; /* 👑 */
      display: inline-block;
      margin-right: 6px;
      font-size: 16px;
    }

    /* Chevron color override for this card */
    .chevron { color: #9ca3af; }

    .trust-inline {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      color: #6b7280;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;      /* evita quebra de linha */
      flex-wrap: nowrap;        /* mantém tudo em uma linha */
    }
    .trust-inline span { white-space: nowrap; }
    .trust-inline i { color: #10b981; margin-right: 4px; }
    @media (max-width: 380px) { .trust-inline { font-size: 11px; gap: 6px; } }
    @media (max-width: 340px) { .trust-inline { font-size: 10px; gap: 4px; } }

    /* ===== Feed style gallery (cards) ===== */
  .feed-gallery { max-width: 560px; margin: 18px auto 0; padding: 0 6px; }
    .feed-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .feed-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(16,24,40,0.04);
      contain: content; /* isola pintura/layout para melhorar performance */
      content-visibility: auto; /* evita pintar fora da viewport em navegadores compatíveis */
      contain-intrinsic-size: 640px; /* reserva altura aproximada para evitar CLS */
    }
  @media (max-width: 600px) { .feed-card { box-shadow: 0 1px 1px rgba(0,0,0,0.06); } }
  .feed-header { display: flex; align-items: center; gap: 10px; padding: 10px; }
  .feed-avatar { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; }
  .feed-head-text { display: flex; flex-direction: column; line-height: 1.1; flex: 1 1 auto; min-width: 0; }
  .feed-name { font-weight: 700; color: #111827; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feed-handle { color: #6b7280; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feed-media { position: relative; width: 100%; aspect-ratio: 9/16; background: #f3f4f6; }
  .feed-media .locked-media { width: 100%; height: 100%; object-fit: cover; filter: none; }
  /* Promove o vídeo para camada própria em mobile, reduzindo jank */
  @media (max-width: 600px) {
    .feed-media .locked-media { backface-visibility: hidden; transform: translateZ(0); will-change: transform; }
  }
    .lock-bubble {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 68px; height: 68px; border-radius: 999px; background: rgba(255,255,255,0.92);
      display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,0.12);
      color: #9ca3af; font-size: 22px;
    }
    @media (max-width: 600px) {
      .lock-bubble { box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
    }
    .stats-pill {
      position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 12px;
      background: rgba(17,24,39,0.65); color: #fff; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
    }
    .stats-pill i { margin-right: 6px; }
    .feed-footer { display: flex; align-items: center; justify-content: space-around; padding: 10px; color: #6b7280; }
    .feed-footer i { font-size: 16px; }
  /* Força 1 coluna em todas as larguras */
  @media (max-width: 680px) { .feed-grid { grid-template-columns: 1fr; } }
  @media (max-width: 360px) {
    .feed-name { font-size: 12px; }
    .feed-handle { font-size: 11px; }
    .feed-header { gap: 8px; padding: 8px; }
  }

    .tab-content.active {
      display: block;
      /* display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px */
    }

    /* Estilos para o container de navegação */
    .nav-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      max-width: 1200px;
      margin: 0 auto;
      height: 70px;
      /* Altura do container */
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Estilos para o logo */
    .logo {
      width: 175px; /* largura máxima do espaço do logo */
      height: 70px; /* altura do espaço do logo */
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto; /* Centraliza horizontalmente */
      overflow: hidden; /* evita vazamento visual */
    }

    .logo img {
      height: 100%;          /* respeita a altura do container */
      width: auto;           /* mantém proporção */
      max-width: 100%;       /* não estoura lateralmente */
      object-fit: contain;   /* garante encaixe sem cortar */
      display: block;
    }

    /* Estilos para o container direito */
    .right-container {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    /* Estilos para o container de busca */
    .search-container {
      display: flex;
      align-items: center;
      width: 300px;
      /* Largura do campo de busca */
      height: 40px;
      /* Altura do campo de busca */
    }

    .search-container input {
      width: 100%;
      height: 100%;
      padding: 0 15px;
      border: 1px solid #ddd;
      border-radius: 20px;
      font-size: 14px;
    }

    .search-button {
      width: 40px;
      /* Largura do botão de busca */
      height: 40px;
      /* Altura do botão de busca */
      border: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Estilos para os ícones de navegação */
    .nav-icons {
      display: flex;
      gap: 15px;
    }

    .icon-button {
      width: 40px;
      /* Largura dos botões de ícone */
      height: 40px;
      /* Altura dos botões de ícone */
      border: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background-color 0.3s;
    }

    .icon-button:hover {
      background-color: #f5f5f5;
    }

    /* Estilos para o menu mobile */
    .menu-mobile {
      display: none;
      /* Esconde em desktop */
      width: 30px;
      height: 30px;
      border: none;
      background: none;
      cursor: pointer;
      padding: 0;
    }

    /* Media query para dispositivos móveis */
    @media (max-width: 768px) {
      .nav-container {
        height: 60px;
        padding: 10px 15px;
      }

      .logo {
        width: 140px; /* menor no mobile */
        height: 56px;
        overflow: hidden; /* reforça que não vaze no mobile */
      }

      .search-container {
        display: none;
        /* Esconde a busca em mobile */
      }

      .nav-icons {
        display: none;
        /* Esconde os ícones em mobile */
      }

      .menu-mobile {
        display: block;
        /* Mostra o menu mobile */
      }
    }

    /* Ajustes do aviso no topo para mobile */
    @media (max-width: 600px) {
      .top-bar-content {
        gap: 10px;
        justify-content: center;
        padding: 0 10px;
      }

      /* Esconde a imagem lateral no topo no mobile para evitar quebra */
      .top-bar-content > img {
        display: none;
      }

      .privacy-logo {
        font-size: 12px;
        padding: 6px 14px;
        background: rgba(255, 255, 255, 0.14);
      }
    }

    /* Estilos para os botões de assinatura */
    .subscription-button {
      background: linear-gradient(135deg, #ff6b3d 0%, #ff8f5f 100%);
      color: white;
      border: none;
      border-radius: 12px;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      max-width: 320px;
      margin: 12px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 6px rgba(255, 107, 61, 0.1);
      position: relative;
      overflow: hidden;
      animation: pulse 2s infinite;
    }

    .subscription-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent);
      transition: 0.5s;
    }

    .subscription-button:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 20px rgba(255, 107, 61, 0.3);
    }

    .subscription-button:hover::before {
      left: 100%;
    }

    .subscription-button:active {
      transform: translateY(0) scale(0.98);
      box-shadow: 0 2px 4px rgba(255, 107, 61, 0.1);
    }

    .subscription-button span {
      display: inline-block;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .subscription-button span:first-child {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .subscription-button span:last-child {
      font-size: 14px;
      opacity: 0.95;
      font-weight: 500;
    }

    /* Estilos para o botão do popup */
    .subscription-button-popup {
      background: linear-gradient(135deg, #ff6b3d 0%, #ff8f5f 100%);
      color: white;
      border: none;
      border-radius: 12px;
      padding: 16px 32px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      max-width: 320px;
      margin: 12px auto 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 6px rgba(255, 107, 61, 0.1);
      position: relative;
      overflow: hidden;
      animation: pulse 2s infinite;
    }

    .subscription-button-popup::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent);
      transition: 0.5s;
    }

    .subscription-button-popup:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 20px rgba(255, 107, 61, 0.3);
    }

    .subscription-button-popup:hover::before {
      left: 100%;
    }

    .subscription-button-popup:active {
      transform: translateY(0) scale(0.98);
      box-shadow: 0 2px 4px rgba(255, 107, 61, 0.1);
    }

    .subscription-button-popup span {
      display: inline-block;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .subscription-button-popup span:first-child {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .subscription-button-popup span:last-child {
      font-size: 14px;
      opacity: 0.95;
      font-weight: 500;
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 4px 6px rgba(255, 107, 61, 0.1);
      }

      50% {
        box-shadow: 0 4px 15px rgba(255, 107, 61, 0.4);
      }

      100% {
        box-shadow: 0 4px 6px rgba(255, 107, 61, 0.1);
      }
    }

    /* Espaço extra abaixo do botão "Mostrar mais" */
    .bio-toggle { display: inline-block; margin-bottom: 16px; }