/* =========================================================
   Guitipay — v3  (redesign completo)
   Nova identidade visual. Mantém apenas os textos e as
   cores base da marca: azul #00A6FB e verde #00BB56.
   ========================================================= */

:root {
    --cyan:       #00A6FB;
    --cyan-600:   #0582CA;
    --cyan-700:   #0466A8;
    --green:      #00BB56;
    --navy:       #0A1023;
    --navy-800:   #131a30;
    --navy-700:   #1d2742;
    --ink:        #0A1023;
    --slate:      #4a5673;
    --mist:       #8a93a8;
    --line:       #e6ebf3;
    --paper:      #ffffff;
    --paper-2:    #f4f8fd;
    --halo:       rgba(0, 166, 251, .14);

    --radius:     18px;
    --radius-lg:  28px;
    --radius-xl:  36px;
    --shadow:     0 24px 60px -20px rgba(10, 16, 35, .22);
    --shadow-sm:  0 8px 24px -12px rgba(10, 16, 35, .18);
    --maxw:       1200px;

    --font:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --display:    "Sora", var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--slate);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-600); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--cyan-700); }

h1, h2, h3, h4, h5 {
    font-family: var(--display);
    color: var(--ink);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 .5em;
    font-weight: 700;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h4 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }
strong { color: var(--ink); font-weight: 600; }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
}

.section { padding: 120px 0; }
.section--tight { padding: 88px 0; }
.bg-mist { background: var(--paper-2); }
.bg-navy { background: var(--navy); color: rgba(255, 255, 255, .72); }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan-600);
}
.kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--cyan);
    border-radius: 2px;
}
.bg-navy .kicker { color: var(--cyan); }

.headline { max-width: 720px; margin: 0 0 64px; }
.headline.center { margin-left: auto; margin-right: auto; text-align: center; }
.headline p { font-size: 1.15rem; color: var(--mist); margin-bottom: 0; }
.headline .kicker { margin-bottom: 20px; }

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--cyan);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    font-family: var(--font);
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .01em;
    border: 0;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn--primary { box-shadow: 0 10px 22px -12px rgba(10, 16, 35, .4); }
.btn--primary:hover { background: var(--cyan-600); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .4); }
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    border: 1.5px solid var(--line);
}
.btn--ghost:hover { border-color: var(--cyan); --btn-fg: var(--cyan-700); }
.bg-navy .btn--ghost,
.hero .btn--ghost,
.page-banner .btn--ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, .22); }
.bg-navy .btn--ghost:hover,
.hero .btn--ghost:hover { border-color: var(--cyan); --btn-fg: #fff; }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
}
.site-header .brand img { width: 140px; }
.primary-nav { display: flex; align-items: center; gap: 36px; }
.primary-nav a {
    font-size: .96rem;
    font-weight: 500;
    color: var(--slate);
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav .btn { padding: 12px 24px; }

.burger {
    display: none;
    width: 46px; height: 46px;
    border: 0; background: none; cursor: pointer;
    color: var(--ink);
}
.burger span, .burger span::before, .burger span::after {
    content: ""; display: block;
    width: 24px; height: 2px;
    background: currentColor; border-radius: 2px;
    margin: 0 auto;
    transition: transform .25s ease, opacity .2s ease;
}
.burger span { position: relative; }
.burger span::before { position: absolute; top: -7px; }
.burger span::after  { position: absolute; top: 7px; }
.burger.open span { background: transparent; }
.burger.open span::before { transform: translateY(7px) rotate(45deg); }
.burger.open span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background: var(--navy) url(../images/hero.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    color: rgba(255, 255, 255, .82);
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* leve reforço — o gradiente principal já está embutido na imagem */
    background: linear-gradient(90deg, rgba(10, 16, 35, .45) 0%, rgba(10, 16, 35, .12) 38%, rgba(10, 16, 35, 0) 58%);
    pointer-events: none;
}
.hero .wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 600px;
    padding-top: 120px;
    padding-bottom: 120px;
}
.hero-copy { max-width: 540px; }
.hero h1 { color: #fff; margin-bottom: 24px; font-weight: 700; }
.hero h1 .light { font-weight: 400; color: rgba(255, 255, 255, .82); }
.hero .kicker { color: var(--cyan); margin-bottom: 24px; }
.hero-lead { font-size: 1.2rem; max-width: 480px; margin-bottom: 38px; color: rgba(255, 255, 255, .78); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 44px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-metrics div span {
    display: block;
    font-family: var(--display);
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
}
.hero-metrics div small { font-size: .85rem; color: rgba(255, 255, 255, .6); }

/* ---------- Steps ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    counter-reset: step;
}
.step {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 40px 30px 34px;
    box-shadow: var(--shadow-sm);
}
.step::before {
    counter-increment: step;
    content: "0" counter(step);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cyan);
    letter-spacing: .05em;
}
.step h4 { margin: 14px 0 8px; }
.step p { margin: 0; font-size: .98rem; color: var(--mist); }
.steps-aside p { color: var(--mist); }

/* ---------- Bento solutions ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}
.tile {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px;
    background: var(--paper);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.tile-icon {
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 15px;
    background: var(--halo);
    color: var(--cyan-600);
    font-size: 1.35rem;
    margin-bottom: 20px;
}
.tile h4 { margin-bottom: 8px; }
.tile p { margin: 0; color: var(--mist); font-size: .97rem; }
.tile--wide { grid-column: span 3; }
.tile--half { grid-column: span 3; }
.tile--feature {
    grid-column: span 3;
    background: linear-gradient(165deg, var(--navy) 0%, var(--navy-700) 100%);
    color: rgba(255, 255, 255, .74);
}
.tile--feature h4 { color: #fff; }
.tile--feature .tile-icon { background: rgba(255,255,255,.12); color: #fff; }
@media (min-width: 861px) {
    .tile--wide { grid-column: span 4; }
    .tile--feature { grid-column: span 2; }
    .tile--half { grid-column: span 3; }
}

/* ---------- Integrations ---------- */
.marquee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px 72px;
    padding: 52px 0 0;
}
.marquee img {
    max-height: 60px;
    max-width: 190px;
    width: auto;
    filter: grayscale(1);
    opacity: .85;
    transition: opacity .2s ease, filter .2s ease;
}
.marquee img:hover { filter: none; opacity: 1; }

@media (max-width: 620px) {
    .marquee { gap: 32px 48px; }
    .marquee img { max-height: 48px; max-width: 150px; }
}

/* ---------- Split (personalized) ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.split-media img {
    border-radius: var(--radius-xl);
    background: var(--paper-2);
}
.split .btn { margin-top: 24px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-row { border-top: 1px solid var(--line); }
.faq-row:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 4px;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--ink);
    cursor: pointer;
}
.faq-q .sign {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    position: relative;
    border-radius: 50%;
    background: var(--halo);
}
.faq-q .sign::before, .faq-q .sign::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 2px;
    background: var(--cyan-700);
    transform: translate(-50%, -50%);
    transition: transform .2s ease, opacity .2s ease;
}
.faq-q .sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-row.open .sign::after { opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.faq-a-in { padding: 0 4px 28px; color: var(--mist); }
.faq-a-in p { margin: 0; }

/* ---------- CTA band ---------- */
.cta {
    position: relative;
    border-radius: var(--radius-xl);
    padding: 72px;
    background: var(--navy);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .74);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    overflow: hidden;
}
.cta h3 { color: #fff; margin-bottom: 6px; }
.cta p { margin: 0; }
.cta .btn { position: relative; z-index: 1; }

/* ---------- Page banner ---------- */
.page-banner {
    background: linear-gradient(180deg, #0d1428 0%, var(--navy) 100%);
    color: rgba(255, 255, 255, .7);
    padding: 96px 0 80px;
}
.page-banner h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0; }
.page-banner .kicker { color: var(--cyan); margin-bottom: 18px; }

/* ---------- Contact form ---------- */
.form-shell {
    max-width: 780px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 46px;
    box-shadow: var(--shadow-sm);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.fld input, .fld select {
    font-family: var(--font);
    font-size: 1rem;
    padding: 14px 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--paper-2);
    color: var(--ink);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.fld input:focus, .fld select:focus {
    outline: none;
    border-color: var(--cyan);
    background: #fff;
    box-shadow: 0 0 0 4px var(--halo);
}
.form-shell .btn { width: 100%; }

/* ---------- Legal prose ---------- */
.prose { max-width: 820px; margin: 0 auto; }
.prose h3 { margin-top: 0; }
.prose h4 { margin-top: 2em; font-size: 1.2rem; }
.prose h5 { margin-top: 1.4em; font-size: 1.02rem; color: var(--ink); }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }
.prose a { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--navy);
    color: var(--mist);
    padding: 88px 0 72px;
}
.site-footer h5 {
    font-family: var(--font);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 18px;
}
.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 11px; }
.site-footer .footer-top a { color: rgba(255, 255, 255, .68); }
.site-footer .footer-top a:hover { color: #fff; }
.footer-brand img { width: 140px; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: .92; }
.footer-brand p { max-width: 300px; font-size: .95rem; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .8);
}
.footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: #fff; }

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 32px;
}
.footer-legal p { margin: 0; font-size: .88rem; }
.heart { color: #ff5a6a; }
.asaas-selo { display: inline-block; line-height: 0; }
.asaas-selo img { width: 160px; transition: opacity .3s ease; }
.asaas-selo:hover img { opacity: .8; }
.asaas-disclosure {
    margin: 32px 0 0;
    font-size: 11.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .5);
    text-align: justify;
    text-align-last: center;
    hyphens: auto;
}
.asaas-disclosure strong { color: rgba(255, 255, 255, .78); font-weight: 600; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .primary-nav {
        position: fixed;
        inset: 78px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 12px 28px 26px;
        transform: translateY(-135%);
        transition: transform .3s ease;
        box-shadow: var(--shadow);
    }
    .primary-nav.open { transform: none; }
    .primary-nav a { padding: 15px 0; border-bottom: 1px solid var(--line); }
    .primary-nav .btn { margin-top: 14px; }
    .burger { display: block; }

    .hero { background-position: center; }
    .hero::after {
        background: linear-gradient(180deg, rgba(10, 16, 35, .58) 0%, rgba(10, 16, 35, .38) 40%, rgba(10, 16, 35, .84) 100%);
    }
    .hero .wrap { padding-top: 96px; padding-bottom: 96px; }
    .hero-copy { max-width: none; }
    .split { grid-template-columns: 1fr; gap: 36px; }
    .steps { grid-template-columns: 1fr; }
    .bento { grid-template-columns: 1fr; }
    .tile, .tile--wide, .tile--half, .tile--feature { grid-column: auto; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 620px) {
    .section { padding: 80px 0; }
    .hero-metrics { flex-wrap: wrap; gap: 24px; }
    .cta { padding: 44px 28px; }
    .form-shell { padding: 28px; }
    .grid-2 { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-legal { flex-direction: column; align-items: flex-start; }
}