/* ==========================================================================
   style.css — Igor Barral
   Bootstrap 5, Google Fonts (Space Grotesk + Inter) e estilos customizados
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

/* ---------- estilos customizados ---------- */
    :root{
      --primary:#f5c842;
      --primary-dark:#e0af1c;
      --primary-ink:#20221c;
      --font-display:'Space Grotesk',sans-serif;
      --font-body:'Inter',sans-serif;
    }

    html[data-theme="light"]{
      --bg:#ffffff;
      --surface:#f7f7f5;
      --card:#ffffff;
      --border:#e7e5df;
      --text:#1c1d1f;
      --text-muted:#6b6d73;
      --shadow:0 10px 30px -15px rgba(20,20,20,.10);
    }
    html[data-theme="dark"]{
      --bg:#14151a;
      --surface:#1a1c22;
      --card:#1e2027;
      --border:#2c2f38;
      --text:#eef0f3;
      --text-muted:#9aa0ac;
      --shadow:0 10px 30px -15px rgba(0,0,0,.5);
    }

    *{ scroll-behavior:smooth; }
    body{
      background:var(--bg);
      color:var(--text);
      font-family:var(--font-body);
      transition:background .2s, color .2s;
    }
    h1,h2,h3,h4,h5{ font-family:var(--font-display); letter-spacing:-0.01em; font-weight:700; }
    a{ color:var(--primary-dark); text-decoration:none; }
    html[data-theme="dark"] a{ color:var(--primary); }

    .text-muted-2{ color:var(--text-muted) !important; }
    .bg-surface{ background:var(--surface); }
    .border-soft{ border-color:var(--border) !important; }

    .eyebrow{
      display:inline-flex; align-items:center; gap:.5rem;
      font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
      color:var(--primary-dark); margin-bottom:.75rem;
    }
    html[data-theme="dark"] .eyebrow{ color:var(--primary); }
    .eyebrow::before{ content:""; width:16px; height:2px; background:var(--primary); display:inline-block; border-radius:2px; }

    /* ---------- navbar ---------- */
    .navbar-main{
      background:var(--bg);
      border-bottom:1px solid var(--border);
    }
    .navbar-main .navbar-brand{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--text) !important; }
    .navbar-main .navbar-brand span{ color:var(--primary-dark); }
    html[data-theme="dark"] .navbar-main .navbar-brand span{ color:var(--primary); }
    .navbar-main .nav-link{ color:var(--text-muted) !important; font-weight:500; padding:.6rem 1rem !important; }
    .navbar-main .nav-link:hover{ color:var(--text) !important; }
    .navbar-main .nav-link.cta{
      background:var(--primary); color:var(--primary-ink) !important; border-radius:8px; font-weight:600; margin-left:.4rem;
    }
    .navbar-main .nav-link.cta:hover{ background:var(--primary-dark); }
    .theme-toggle{
      border:1px solid var(--border); background:var(--surface); color:var(--text);
      width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      font-size:1rem; margin-left:.5rem; cursor:pointer;
    }
    .theme-toggle:hover{ border-color:var(--primary); }

    /* ---------- buttons ---------- */
    .btn-brand{ background:var(--primary); border:none; color:var(--primary-ink); font-weight:600; }
    .btn-brand:hover{ background:var(--primary-dark); color:var(--primary-ink); }
    .btn-outline-brand{ border:1px solid var(--border); color:var(--text); background:transparent; font-weight:600; }
    .btn-outline-brand:hover{ border-color:var(--primary-dark); color:var(--primary-dark); background:var(--surface); }
    html[data-theme="dark"] .btn-outline-brand:hover{ color:var(--primary); }

    /* ---------- hero ---------- */
    .hero{ padding:5.5rem 0 4.5rem; }
    .hero h1{ font-size:2.85rem; line-height:1.16; }
    .hero .accent{ color:var(--primary-dark); }
    html[data-theme="dark"] .hero .accent{ color:var(--primary); }
    .badge-soft{
      display:inline-flex; align-items:center; gap:.5rem;
      background:var(--surface); border:1px solid var(--border); border-radius:30px;
      padding:.4rem .9rem; font-size:.82rem; font-weight:500; color:var(--text-muted);
    }
    .badge-dot{ width:8px; height:8px; border-radius:50%; background:#3bc17a; display:inline-block; }

    .stat-item h3{ font-size:1.7rem; margin-bottom:0; color:var(--text); }
    .stat-item small{ color:var(--text-muted); }

    /* browser mockup */
    .browser-mock{
      background:var(--card); border:1px solid var(--border); border-radius:14px;
      box-shadow:var(--shadow); overflow:hidden;
    }
    .browser-bar{
      background:var(--surface); border-bottom:1px solid var(--border);
      padding:.65rem 1rem; display:flex; align-items:center; gap:.5rem;
    }
    .browser-bar .dots span{ width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px; }
    .browser-url{
      background:var(--bg); border:1px solid var(--border); border-radius:6px;
      font-size:.72rem; color:var(--text-muted); padding:.2rem .7rem; margin-left:.5rem; flex:1;
    }
    .browser-body{ padding:1.4rem; }
    .mock-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
    .mock-logo{ width:70px; height:10px; border-radius:4px; background:var(--border); }
    .mock-pill{ width:60px; height:22px; border-radius:6px; background:var(--primary); }
    .mock-line{ height:10px; border-radius:4px; background:var(--border); }
    .mock-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.9rem; }
    .mock-dot{ width:34px; height:34px; border-radius:8px; background:rgba(245,200,66,.35); }

    /* ---------- sections ---------- */
    .section{ padding:5rem 0; }
    .section-title-wrap{ max-width:620px; }

    /* ---------- service cards ---------- */
    .svc-card{
      background:var(--card); border:1px solid var(--border); border-radius:16px;
      padding:2rem; height:100%; transition:.2s transform, .2s box-shadow, .2s border-color;
    }
    .svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--primary); }
    .svc-icon{
      width:52px; height:52px; border-radius:12px; background:rgba(245,200,66,.18);
      display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.1rem;
    }
    .tag-pill{
      font-size:.74rem; color:var(--text-muted); background:var(--surface); border:1px solid var(--border);
      padding:.2rem .65rem; border-radius:20px; display:inline-block; margin:.15rem .25rem 0 0;
    }

    /* ---------- process ---------- */
    .step-card{ text-align:center; padding:1rem; }
    .step-num{
      width:48px; height:48px; border-radius:50%; background:var(--primary); color:var(--primary-ink);
      display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 1rem;
    }

    /* ---------- pricing ---------- */
    .pricing-toggle-wrap{ display:flex; justify-content:center; align-items:center; gap:.75rem; margin-bottom:3rem; font-size:.9rem; font-weight:500; }
    .pricing-toggle-wrap .active{ color:var(--text); }
    .pricing-toggle-wrap span{ color:var(--text-muted); }
    .form-switch .form-check-input{ width:2.6em; height:1.4em; background-color:var(--border); border-color:var(--border); cursor:pointer; }
    .form-switch .form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); }
    .badge-discount{ background:rgba(245,200,66,.18); color:var(--primary-dark); border:1px solid rgba(245,200,66,.4); font-weight:600; }
    html[data-theme="dark"] .badge-discount{ color:var(--primary); }

    .price-card{
      background:var(--card); border:1px solid var(--border); border-radius:18px;
      padding:2.2rem; height:100%; position:relative;
    }
    .price-card.featured{ border:2px solid var(--primary); box-shadow:var(--shadow); }
    .popular-tag{
      position:absolute; top:-14px; left:50%; transform:translateX(-50%);
      background:var(--primary); color:var(--primary-ink); font-size:.74rem; font-weight:700;
      padding:.3rem 1rem; border-radius:20px; white-space:nowrap;
    }
    .plan-icon{ font-size:1.6rem; }
    .plan-name{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin:.6rem 0 .5rem; }
    .plan-sub{ color:var(--text-muted); font-size:.9rem; min-height:64px; }
    .price-value{ font-size:2.2rem; font-weight:700; }
    .price-value sup{ font-size:1rem; color:var(--text-muted); top:-1em; font-weight:600; }
    .price-value .cents{ font-size:.95rem; color:var(--text-muted); font-weight:500; }
    .price-note{ font-size:.8rem; color:var(--text-muted); }
    .price-note .original{ text-decoration:line-through; margin-right:.4rem; }
    .plan-features{ list-style:none; padding:0; margin:1.4rem 0; font-size:.91rem; }
    .plan-features li{ padding:.45rem 0; display:flex; gap:.6rem; align-items:flex-start; border-bottom:1px solid var(--border); }
    .plan-features li:last-child{ border-bottom:none; }
    .plan-features li.dim{ color:var(--text-muted); }
    .plan-features .yes{ color:var(--primary-dark); font-weight:700; }
    html[data-theme="dark"] .plan-features .yes{ color:var(--primary); }
    .plan-features .no{ color:var(--text-muted); }

    .addon-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.5rem; height:100%; }
    .addon-price{ color:var(--primary-dark); font-weight:600; font-size:.87rem; margin-top:.6rem; }
    html[data-theme="dark"] .addon-price{ color:var(--primary); }

    .accordion-clean .accordion-item{ background:var(--card); border:1px solid var(--border); margin-bottom:.7rem; border-radius:12px !important; overflow:hidden; }
    .accordion-clean .accordion-button{ background:var(--card); color:var(--text); font-weight:600; font-size:.94rem; box-shadow:none; }
    .accordion-clean .accordion-button:not(.collapsed){ background:var(--card); color:var(--primary-dark); }
    html[data-theme="dark"] .accordion-clean .accordion-button:not(.collapsed){ color:var(--primary); }
    html[data-theme="dark"] .accordion-clean .accordion-button::after{ filter:invert(1) grayscale(1); }
    .accordion-clean .accordion-body{ color:var(--text-muted); font-size:.9rem; }

    /* ---------- projects / blog ---------- */
    .kicker{ font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-dark); }
    html[data-theme="dark"] .kicker{ color:var(--primary); }
    .blog-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.7rem; height:100%; display:block; color:var(--text); transition:.2s; }
    .blog-card:hover{ border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow); }
    .blog-date{ color:var(--text-muted); font-size:.78rem; }

    /* ---------- contact ---------- */
    .channel-link{ display:flex; gap:1rem; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem 1.2rem; color:var(--text); margin-bottom:.8rem; }
    .channel-link:hover{ border-color:var(--primary); }
    .channel-icon{ width:42px; height:42px; border-radius:10px; background:rgba(245,200,66,.18); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--primary-dark); }
    html[data-theme="dark"] .channel-icon{ color:var(--primary); }

    .contact-form-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.8rem; box-shadow:var(--shadow); }
    .form-control, .form-select{ background:var(--bg); border:1px solid var(--border); color:var(--text); }
    .form-control:focus, .form-select:focus{ background:var(--bg); color:var(--text); border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(245,200,66,.2); }
    .form-control::placeholder{ color:var(--text-muted); }
    .form-label{ font-size:.85rem; font-weight:600; color:var(--text); }

    footer{ border-top:1px solid var(--border); background:var(--surface); padding:3rem 0 1.5rem; }
    footer a{ color:var(--text-muted); }
    footer a:hover{ color:var(--primary-dark); }
    html[data-theme="dark"] footer a:hover{ color:var(--primary); }
    .footer-brand span{ color:var(--primary-dark); }
    html[data-theme="dark"] .footer-brand span{ color:var(--primary); }

    @media (max-width:767px){
      .hero{ padding:3rem 0 2rem; }
      .hero h1{ font-size:2.1rem; }
      .section{ padding:3.5rem 0; }
    }