/* =========================================================
   FS ORÇAMENTOS - planos-inline.css
   CSS principal extraído de planos.html
   ========================================================= */

:root {
      --fs-marrom: #3e2723;
      --fs-marrom-2: #2c1b17;
      --fs-creme: #f4ece1;
      --fs-creme-2: #fffaf0;
      --fs-amarelo: #ffc400;
      --fs-verde: #22c55e;
      --fs-vermelho: #dc2626;
      --fs-azul: #2563eb;
      --fs-borda: #e0d6c8;
    }

    body {
      background:
        radial-gradient(circle at top left, rgba(255,196,0,0.16), transparent 30%),
        linear-gradient(180deg, #2c2c2c 0%, #1f1f1f 100%);
      min-height: 100vh;
      color: var(--fs-marrom);
    }

    .pagina-planos {
      max-width: 1180px;
      margin: 0 auto;
      padding: 28px 14px 50px;
    }

    .planos-hero {
      background: linear-gradient(135deg, #fff8dc, var(--fs-creme));
      border-radius: 26px;
      padding: 34px 26px;
      border-top: 6px solid var(--fs-amarelo);
      box-shadow: 0 18px 46px rgba(0,0,0,0.28);
      text-align: center;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }

    .planos-hero::before {
      content: "";
      position: absolute;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: rgba(255,196,0,0.18);
      top: -100px;
      right: -90px;
    }

    .planos-hero-conteudo {
      position: relative;
      max-width: 880px;
      margin: 0 auto;
    }

    .tag-planos {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: var(--fs-marrom);
      color: var(--fs-amarelo);
      border: 1px solid var(--fs-amarelo);
      border-radius: 999px;
      padding: 8px 15px;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .planos-hero h1 {
      margin: 0 0 12px;
      color: var(--fs-marrom);
      font-size: 36px;
      line-height: 1.15;
    }

    .planos-hero p {
      margin: 0 auto;
      color: #5d4037;
      font-size: 17px;
      line-height: 1.55;
      max-width: 820px;
    }

    .planos-acoes-hero {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
    }

    .btn-hero-planos {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px;
      padding: 13px 20px;
      font-weight: 900;
      text-decoration: none;
      cursor: pointer;
      border: 2px solid var(--fs-marrom);
      transition: .2s ease;
    }

    .btn-hero-principal {
      background: var(--fs-amarelo);
      color: var(--fs-marrom);
    }

    .btn-hero-secundario {
      background: #ffffff;
      color: var(--fs-marrom);
    }

    .btn-hero-planos:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(0,0,0,0.18);
    }

    .status-plano-box {
      display: none;
      max-width: 780px;
      margin: 0 auto 24px;
      background: #ffffff;
      color: var(--fs-marrom);
      border-radius: 18px;
      padding: 18px;
      border-left: 7px solid var(--fs-amarelo);
      box-shadow: 0 10px 26px rgba(0,0,0,0.18);
      font-weight: 800;
      line-height: 1.45;
      text-align: center;
    }

    .status-plano-box.status-ok {
      background: #eaf7ed;
      color: #14532d;
      border-left-color: var(--fs-verde);
    }

    .status-plano-box.status-alerta {
      background: #fff8e1;
      color: #5d4037;
      border-left-color: var(--fs-amarelo);
    }

    .status-plano-box.status-erro {
      background: #fff1f1;
      color: #991b1b;
      border-left-color: var(--fs-vermelho);
    }

    .btn-login-status-plano {
      margin-top: 14px;
      background: var(--fs-amarelo);
      color: var(--fs-marrom);
      border: 2px solid var(--fs-marrom);
      border-radius: 12px;
      padding: 11px 16px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(0,0,0,0.14);
    }



    .teste-premium-card {
      max-width: 880px;
      margin: 0 auto 22px;
      background: linear-gradient(135deg, #3e2723, #2c1b17);
      color: #fff8dc;
      border: 2px solid var(--fs-amarelo);
      border-radius: 22px;
      padding: 20px;
      box-shadow: 0 14px 34px rgba(0,0,0,0.24);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: center;
    }


    .teste-premium-card.teste-premium-topo {
      margin-top: 18px;
      margin-bottom: 24px;
    }

    .teste-premium-card h3 {
      margin: 0 0 6px;
      color: var(--fs-amarelo);
      font-size: 22px;
    }

    .teste-premium-card p {
      margin: 0;
      color: #fff3c4;
      line-height: 1.45;
      font-weight: 700;
    }

    .teste-premium-card small {
      display: block;
      margin-top: 8px;
      color: #f7d56b;
      font-weight: 800;
    }

    .btn-teste-premium {
      min-width: 220px;
      border: 2px solid #ffffff;
      background: var(--fs-amarelo);
      color: var(--fs-marrom);
      border-radius: 999px;
      padding: 14px 18px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(0,0,0,0.24);
      transition: .2s ease;
    }

    .btn-teste-premium:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 14px 26px rgba(0,0,0,0.28);
    }

    .btn-teste-premium:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    @media (max-width: 720px) {
      .teste-premium-card {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .btn-teste-premium {
        width: 100%;
      }
    }

    .comparativo-section {
      background: var(--fs-creme);
      border-radius: 24px;
      padding: 24px;
      border-top: 6px solid var(--fs-amarelo);
      box-shadow: 0 14px 38px rgba(0,0,0,0.24);
      margin-bottom: 24px;
    }

    .section-topo {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 22px;
    }

    .section-topo h2 {
      margin: 0 0 8px;
      color: var(--fs-marrom);
      font-size: 30px;
    }

    .section-topo p {
      margin: 0;
      color: #6d4c41;
      font-size: 15px;
      line-height: 1.5;
    }

    .comparativo-wrapper {
      width: 100%;
      overflow-x: auto;
      border-radius: 16px;
      border: 1px solid var(--fs-borda);
      background: #ffffff;
    }

    .tabela-comparativo {
      width: 100%;
      min-width: 920px;
      border-collapse: collapse;
      background: #ffffff;
    }

    .tabela-comparativo th {
      background: var(--fs-marrom);
      color: var(--fs-amarelo);
      padding: 15px;
      text-align: left;
      font-size: 14px;
      text-transform: uppercase;
    }

    .tabela-comparativo th:nth-child(2),
    .tabela-comparativo th:nth-child(3),
    .tabela-comparativo th:nth-child(4),
    .tabela-comparativo td:nth-child(2),
    .tabela-comparativo td:nth-child(3),
    .tabela-comparativo td:nth-child(4) {
      text-align: center;
    }

    .tabela-comparativo td {
      padding: 14px 15px;
      border-bottom: 1px solid #eeeeee;
      color: var(--fs-marrom);
      font-size: 15px;
      font-weight: 700;
    }

    .tabela-comparativo tr:nth-child(even) {
      background: #fffaf0;
    }

    .sim {
      color: #15803d;
      font-weight: 900;
    }

    .nao {
      color: #dc2626;
      font-weight: 900;
    }

    .planos-pix-section {
      background: linear-gradient(135deg, #fffaf0, var(--fs-creme));
      border-radius: 24px;
      padding: 32px 24px;
      border-top: 6px solid var(--fs-amarelo);
      box-shadow: 0 14px 38px rgba(0,0,0,0.24);
      margin-bottom: 24px;
    }

    .planos-pix-topo {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 28px;
    }

    .tag-plano-pix {
      display: inline-block;
      background: var(--fs-marrom);
      color: var(--fs-amarelo);
      border: 1px solid var(--fs-amarelo);
      border-radius: 999px;
      padding: 7px 15px;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .planos-pix-topo h2 {
      margin: 0 0 10px;
      font-size: 32px;
      color: var(--fs-marrom);
    }

    .planos-pix-topo p {
      margin: 0;
      color: #6d4c41;
      font-size: 16px;
      line-height: 1.55;
    }

    .planos-pix-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      align-items: stretch;
    }

    .plano-pix-card {
      position: relative;
      background: #ffffff;
      border-radius: 20px;
      padding: 26px 22px;
      border: 1px solid #eadfce;
      border-top: 6px solid var(--fs-amarelo);
      box-shadow: 0 10px 26px rgba(0,0,0,0.14);
      text-align: center;
      transition: .2s ease;
    }

    .plano-pix-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 34px rgba(0,0,0,0.20);
    }

    .plano-pix-card.destaque {
      transform: scale(1.04);
      border: 2px solid var(--fs-amarelo);
      box-shadow: 0 18px 42px rgba(0,0,0,0.24);
    }

    .plano-pix-card.destaque:hover {
      transform: scale(1.04) translateY(-3px);
    }

    .plano-pix-selo {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--fs-marrom);
      color: var(--fs-amarelo);
      border: 1px solid var(--fs-amarelo);
      border-radius: 999px;
      padding: 6px 13px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .plano-pix-periodo {
      font-size: 23px;
      font-weight: 900;
      color: var(--fs-marrom);
      margin-bottom: 8px;
    }

    .plano-pix-preco {
      font-size: 34px;
      font-weight: 900;
      color: var(--fs-marrom);
      margin-bottom: 8px;
    }

    .plano-pix-economia {
      display: inline-block;
      background: #dcfce7;
      color: #166534;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .plano-pix-card p {
      color: #6d4c41;
      font-size: 14px;
      line-height: 1.45;
      min-height: 44px;
      margin: 0 0 18px;
    }

    .plano-pix-card button {
      width: 100%;
      border: none;
      background: var(--fs-amarelo);
      color: var(--fs-marrom);
      border-radius: 13px;
      padding: 14px 16px;
      font-weight: 900;
      cursor: pointer;
      border: 2px solid var(--fs-marrom);
      box-shadow: 0 8px 18px rgba(0,0,0,0.16);
      transition: .2s ease;
      text-transform: uppercase;
    }

    .plano-pix-card button:hover {
      background: #ffffff;
      transform: translateY(-1px);
    }

    .plano-pix-card button:disabled {
      opacity: .65;
      cursor: not-allowed;
      transform: none;
      background: #ddd;
      color: #666;
      border-color: #999;
    }

    .plano-pix-beneficios {
      margin-top: 28px;
      background: var(--fs-marrom);
      color: #ffffff;
      border-radius: 18px;
      border: 2px solid var(--fs-amarelo);
      padding: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .plano-pix-beneficios strong {
      width: 100%;
      color: var(--fs-amarelo);
      font-size: 18px;
    }

    .plano-pix-beneficios span {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,196,0,0.35);
      color: #f4ece1;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 700;
    }



    .planos-pix-section.premium-section {
      background: linear-gradient(135deg, #fff8e1, #f4ece1);
      border-top-color: var(--fs-amarelo);
    }

    .premium-section .tag-plano-pix,
    .premium-section .plano-pix-selo {
      background: #111827;
      color: var(--fs-amarelo);
    }

    .premium-section .plano-pix-card {
      border-top-color: #111827;
    }

    .premium-section .plano-pix-card.destaque {
      border-color: #111827;
    }

    .premium-aviso {
      margin-top: 18px;
      padding: 14px;
      border-radius: 14px;
      background: #fff8e1;
      border-left: 6px solid var(--fs-amarelo);
      color: var(--fs-marrom);
      font-size: 14px;
      line-height: 1.5;
      font-weight: 800;
      text-align: center;
    }

    .faq-section {
      background: var(--fs-creme);
      border-radius: 24px;
      padding: 26px 24px;
      border-top: 6px solid var(--fs-amarelo);
      box-shadow: 0 14px 38px rgba(0,0,0,0.24);
      margin-bottom: 24px;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .faq-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 17px;
      border-left: 6px solid var(--fs-amarelo);
      box-shadow: 0 8px 20px rgba(0,0,0,0.10);
    }

    .faq-card strong {
      display: block;
      color: var(--fs-marrom);
      font-size: 16px;
      margin-bottom: 7px;
    }

    .faq-card p {
      margin: 0;
      color: #6d4c41;
      font-size: 14px;
      line-height: 1.45;
    }

    .modal-pix-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.76);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 19000;
      padding: 16px;
    }

    .modal-pix-card {
      width: min(100%, 520px);
      max-height: 92vh;
      overflow-y: auto;
      background: var(--fs-creme);
      color: var(--fs-marrom);
      border-radius: 18px;
      border-top: 5px solid var(--fs-amarelo);
      box-shadow: 0 24px 70px rgba(0,0,0,0.55);
    }

    .modal-pix-topo {
      background: var(--fs-marrom);
      color: var(--fs-amarelo);
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .modal-pix-topo strong {
      display: block;
      font-size: 18px;
    }

    .modal-pix-topo span {
      display: block;
      color: #f4ece1;
      font-size: 12px;
      margin-top: 3px;
    }

    .modal-pix-topo button {
      background: var(--fs-vermelho);
      color: #ffffff;
      border: none;
      border-radius: 9px;
      width: 34px;
      height: 34px;
      font-size: 22px;
      font-weight: bold;
      cursor: pointer;
      flex-shrink: 0;
    }

    .pix-loading,
    .pix-erro {
      margin: 18px;
      padding: 16px;
      border-radius: 12px;
      font-weight: 800;
      text-align: center;
    }

    .pix-loading {
      background: #fff8e1;
      border-left: 5px solid var(--fs-amarelo);
      color: #5d4037;
    }

    .pix-erro {
      background: #fff1f1;
      border-left: 5px solid var(--fs-vermelho);
      color: #991b1b;
    }

    .pix-conteudo {
      padding: 18px;
    }

    .pix-resumo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 16px;
    }

    .pix-resumo div {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px;
      border-left: 5px solid var(--fs-amarelo);
    }

    .pix-resumo small {
      display: block;
      color: #6d4c41;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .pix-resumo strong {
      display: block;
      color: var(--fs-marrom);
      font-size: 18px;
    }

    .pix-qrcode-box {
      background: #ffffff;
      border-radius: 16px;
      padding: 16px;
      text-align: center;
      border: 1px solid #eadfce;
      margin-bottom: 14px;
    }

    .pix-qrcode-box img {
      max-width: 260px;
      width: 100%;
      height: auto;
    }

    .pix-label {
      display: block;
      font-weight: 900;
      color: var(--fs-marrom);
      margin-bottom: 7px;
    }

    #pix-copia-cola {
      width: 100%;
      min-height: 105px;
      resize: vertical;
      border-radius: 12px;
      border: 1px solid #d7ccc8;
      padding: 12px;
      box-sizing: border-box;
      font-family: monospace;
      font-size: 12px;
      color: var(--fs-marrom);
    }

    .pix-acoes {
      display: flex;
      gap: 10px;
      margin-top: 14px;
    }

    .pix-acoes button {
      flex: 1;
      border-radius: 10px;
      padding: 12px;
      font-weight: 900;
      cursor: pointer;
      border: 2px solid var(--fs-amarelo);
      background: var(--fs-amarelo);
      color: var(--fs-marrom);
    }

    .pix-acoes button.secundario {
      background: var(--fs-marrom);
      color: var(--fs-amarelo);
    }

    .pix-aviso {
      margin: 14px 0 0;
      color: #6d4c41;
      font-size: 13px;
      line-height: 1.4;
      text-align: center;
    }

    footer {
      text-align: center;
      color: #bdbdbd;
      padding: 26px 10px;
      font-size: 13px;
    }

    footer a {
      color: var(--fs-amarelo);
      text-decoration: none;
    }

    @media (max-width: 900px) {
      .planos-pix-grid {
        grid-template-columns: 1fr;
      }

      .plano-pix-card.destaque,
      .plano-pix-card.destaque:hover {
        transform: none;
      }

      .faq-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 650px) {
      .pagina-planos {
        padding: 20px 10px 40px;
      }

      .planos-hero {
        padding: 26px 16px;
        border-radius: 20px;
      }

      .planos-hero h1 {
        font-size: 28px;
      }

      .section-topo h2,
      .planos-pix-topo h2 {
        font-size: 25px;
      }

      .comparativo-section,
      .planos-pix-section,
  

    .planos-pix-section.premium-section {
      background: linear-gradient(135deg, #fff8e1, #f4ece1);
      border-top-color: var(--fs-amarelo);
    }

    .premium-section .tag-plano-pix,
    .premium-section .plano-pix-selo {
      background: #111827;
      color: var(--fs-amarelo);
    }

    .premium-section .plano-pix-card {
      border-top-color: #111827;
    }

    .premium-section .plano-pix-card.destaque {
      border-color: #111827;
    }

    .premium-aviso {
      margin-top: 18px;
      padding: 14px;
      border-radius: 14px;
      background: #fff8e1;
      border-left: 6px solid var(--fs-amarelo);
      color: var(--fs-marrom);
      font-size: 14px;
      line-height: 1.5;
      font-weight: 800;
      text-align: center;
    }

    .faq-section {
        padding: 22px 14px;
        border-radius: 18px;
      }

      .pix-resumo,
      .pix-acoes {
        grid-template-columns: 1fr;
        flex-direction: column;
      }
    }