/* ── Hero ─────────────────────────────────── */
    .plans-hero{background:var(--yellow-bg);padding:56px 0 40px;text-align:center;border-bottom:1px solid var(--yellow);position:relative;overflow:hidden}
    .plans-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -20%,rgba(247,197,0,.18),transparent);pointer-events:none}
    .toggle-wrap{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:28px;margin-bottom:8px}
    .toggle-row{display:inline-flex;background:var(--gray-100);border-radius:50px;padding:4px;gap:2px}
    .toggle-btn{padding:9px 26px;border-radius:50px;font-size:14px;font-weight:700;cursor:pointer;color:var(--gray-500);background:transparent;border:none;font-family:'Nunito',sans-serif;transition:all .25s}
    .toggle-btn.on{background:var(--white);color:var(--black);box-shadow:0 2px 10px rgba(0,0,0,.10)}
    .save-badge{background:var(--green);color:var(--white);font-size:11px;font-weight:700;padding:2px 9px;border-radius:50px;margin-left:6px;vertical-align:middle}

    /* ── Magic Cards ───────────────────────────── */
    .plans-section{padding:56px 0 72px}
    .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}

    .plan-card{
      background:var(--white);
      border-radius:20px;
      padding:36px 30px;
      border:2px solid var(--gray-100);
      position:relative;
      overflow:hidden;
      transition:border-color .3s, box-shadow .3s, transform .25s;
      --mx:50%;--my:50%;
    }
    /* Spotlight glow layer */
    .plan-card::before{
      content:'';
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      background:radial-gradient(280px circle at var(--mx) var(--my), rgba(247,197,0,.55), transparent 65%);
      opacity:0;
      transition:opacity .35s;
      pointer-events:none;
      z-index:0;
    }
    .plan-card:hover::before{opacity:1}
    .plan-card:hover{border-color:rgba(247,197,0,.6);box-shadow:0 12px 48px rgba(247,197,0,.18)}
    .plan-card > *{position:relative;z-index:1}

    .plan-card.featured{
      border-color:var(--yellow);
      box-shadow:0 12px 48px rgba(247,197,0,.28);
      transform:scale(1.04);
      z-index:2;
      background:linear-gradient(160deg,#fffbea 0%,#fff 50%);
    }
    .plan-card.featured::before{
      background:radial-gradient(280px circle at var(--mx) var(--my), rgba(247,197,0,.7), transparent 65%);
    }

    .plan-ribbon{
      position:absolute;top:-14px;left:50%;transform:translateX(-50%);
      background:var(--yellow);color:var(--black);
      font-family:'Nunito',sans-serif;font-size:11px;font-weight:900;letter-spacing:1.5px;
      text-transform:uppercase;padding:5px 20px;border-radius:50px;white-space:nowrap;
      box-shadow:0 4px 12px rgba(247,197,0,.4);
    }
    .plan-ribbon svg{vertical-align:middle;margin-right:4px}

    .plan-name{
      font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;
      color:var(--gray-400);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:16px;
    }
    .plan-price-row{display:flex;align-items:baseline;gap:2px;margin-bottom:4px}
    .price-cur{font-size:18px;font-weight:700;color:var(--gray-500)}
    .price-val{font-family:'Nunito',sans-serif;font-size:56px;font-weight:900;color:var(--black);line-height:1}
    .price-cts{font-size:22px;font-weight:700;color:var(--black);align-self:flex-end;padding-bottom:7px}
    .price-period{font-size:13px;color:var(--gray-400);margin-bottom:20px}
    .plan-sep{height:1px;background:var(--gray-100);margin:18px 0}

    /* ── Cascade Checkmarks ───────────────────── */
    .plan-feat{
      display:flex;align-items:flex-start;gap:10px;
      margin-bottom:12px;font-size:14px;color:var(--black);font-weight:500;
      opacity:0;transform:translateX(-12px);
      transition:opacity .4s ease, transform .4s ease;
    }
    .plan-feat.cascaded{opacity:1;transform:translateX(0)}
    .plan-feat.off{color:var(--gray-300)}
    .plan-feat.off .fc-svg{opacity:.35}

    .fc-svg{width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center}
    .fc-svg.yes{background:rgba(34,197,94,.12)}
    .fc-svg.no{background:var(--gray-100)}

    /* ── Guarantee ─────────────────────────────── */
    .guarantee{
      background:var(--yellow-bg);border:2px dashed var(--yellow);
      border-radius:16px;padding:20px 28px;
      display:flex;align-items:center;gap:16px;margin-top:32px;
    }
    .guarantee-text{font-size:14px;color:var(--gray-500);line-height:1.6}

    /* ── FAQ ───────────────────────────────────── */
    .faq-section{background:var(--white);padding:64px 0}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
    .faq-item{border:1.5px solid var(--gray-100);border-radius:14px;overflow:hidden;transition:border-color .2s}
    .faq-item:hover{border-color:var(--yellow)}
    .faq-q{
      padding:18px 22px;font-size:14px;font-weight:700;color:var(--black);
      cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;
    }
    .faq-q:hover{background:var(--gray-50)}
    .faq-a{padding:0 22px;font-size:14px;color:var(--gray-500);line-height:1.7;max-height:0;overflow:hidden;transition:all .35s}
    .faq-item.open .faq-a{max-height:240px;padding:0 22px 18px}
    .faq-arrow{transition:transform .35s;flex-shrink:0;color:var(--gray-400)}
    .faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--black)}

    /* ── Modal ─────────────────────────────────── */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(4px)}
    .modal-overlay.open{opacity:1;pointer-events:all}
    .modal{background:var(--white);border-radius:22px;padding:38px;width:490px;max-width:92vw;transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
    .modal-overlay.open .modal{transform:translateY(0) scale(1)}
    .modal-title{font-family:'Nunito',sans-serif;font-size:22px;font-weight:900;margin-bottom:4px}
    .modal-sub{font-size:14px;color:var(--gray-400);margin-bottom:24px}
    .sim-hint{background:var(--yellow-bg);border:1px solid var(--yellow);border-radius:12px;padding:13px 18px;font-size:13px;margin-bottom:22px;color:var(--black);font-weight:600}

    /* ── Annual tip ─────────────────────────────── */
    #annual-tip{font-size:13px;color:var(--gray-500);font-weight:600;padding:8px 16px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:50px}

    /* ── Price flip animation ───────────────────── */
    .price-val, .price-cts{
      display:inline-block;
      transition:transform .25s ease, opacity .25s ease;
    }
    .price-flipping{transform:translateY(-6px);opacity:0}

    /* ── Responsividade Planos ────────────────── */
    @media (max-width: 980px) {
      .plans-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 480px;
        margin: 0 auto;
      }
      .plan-card.featured {
        transform: none;
      }
      .plan-card {
        padding: 30px 24px;
      }
      .plan-ribbon {
        top: -1px;
        border-radius: 0 0 12px 12px;
      }
      .faq-grid {
        grid-template-columns: 1fr;
      }
      .plans-hero { padding: 40px 0 32px; }
      .plans-section { padding: 36px 0 48px; }
      .guarantee {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 20px;
      }
    }

    @media (max-width: 640px) {
      .plans-hero h1 { font-size: 1.5rem; }
      .plans-hero .subtitle { font-size: 14px; }
      .toggle-wrap { flex-direction: column; gap: 10px; }
      .toggle-btn { padding: 8px 20px; font-size: 13px; }
      .plans-grid { max-width: 100%; }
      .plan-card { padding: 28px 20px; border-radius: 16px; }
      .price-val { font-size: 44px; }
      .price-cts { font-size: 18px; }
      .plan-feat { font-size: 13px; }
      .faq-q { padding: 14px 16px; font-size: 13px; }
      .faq-a { padding: 0 16px; font-size: 13px; }
      .faq-item.open .faq-a { padding: 0 16px 14px; }

      /* Modal → bottom sheet */
      .modal-overlay { align-items: flex-end; }
      .modal {
        width: 100%;
        max-width: 100%;
        border-radius: 22px 22px 0 0;
        padding: 28px 20px 36px;
        max-height: 88vh;
        overflow-y: auto;
        transform: translateY(100%) scale(1);
      }
      .modal-overlay.open .modal { transform: translateY(0) scale(1); }
      .modal::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: var(--gray-200);
        border-radius: 50px;
        margin: 0 auto 18px;
      }
    }

    @media (max-width: 380px) {
      .plans-hero { padding: 32px 0 24px; }
      .plan-card { padding: 22px 16px; }
      .price-val { font-size: 38px; }
      .guarantee { padding: 16px; }
      .guarantee-text { font-size: 13px; }
    }