/* v8 - Friendly / playful. body.v8 */
body.v8 { --bg:#f6f1ff; --ink:#1c1738; --mut:#5d5778; --tom:#ff5a3c; --sun:#ffd23f; --mint:#7fe0bb; --sky:#8fc9ff; --pink:#ffb3d1; --lil:#cdbdff; --disp:'Gabarito','Inter',sans-serif; --line:rgba(28,23,56,.16);
  background: var(--bg); color: var(--ink); font-family: 'DM Sans','Inter',sans-serif; font-size: 1.05rem; }
.v8 *::selection { background: var(--tom); color:#fff; }
.v8 .f-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.v8 h1, .v8 h2, .v8 h3 { font-family: var(--disp); color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
.v8 .site-header { background: rgba(246,241,255,.88); backdrop-filter: blur(12px); border-bottom: 0; }
.v8 .header-inner { height: 76px; max-width: 1280px; padding: 0 32px; }
.v8 .logo { color: var(--ink); font-family: var(--disp); font-weight: 800; font-size: 1.35rem; } .v8 .logo em { color: var(--tom); }
.v8 .logo svg circle, .v8 .logo svg path { stroke: var(--tom); }
.v8 .nav a:not(.btn), .v8 .nav .nav-link { color: var(--ink); font-weight: 600; font-size: .96rem; } .v8 .nav a:not(.btn):hover { color: var(--tom); }
.v8 .mega-toggle, .v8 .nav-toggle { color: var(--ink); }
.v8 .nav .btn--primary { background: var(--ink); color:#fff; border-radius: 999px; padding: 12px 24px; font-weight:700; } .v8 .nav .btn--primary:hover { background: var(--tom); }
.v8 .mega { border-top-color: var(--tom); }
@media (max-width:760px){ .v8 .nav{background:var(--bg);border-top:1px solid var(--line)} .v8 .nav a:not(.btn){border-bottom-color:var(--line)} .v8 .nav-item{border-bottom-color:var(--line)} .v8 .nav .mega a:not(.btn),.v8 .mp-items .mi-t,.v8 .mp-title span{color:var(--ink)} .v8 .mega{background:#ebe4ff} .v8 .mg-foot-label{color:var(--mut)} .v8 .nav .mega .mg-chips a:not(.btn){background:#fff;color:var(--ink);border-color:var(--line)} }
.f-kick { display:inline-block; font: 700 .86rem var(--disp); letter-spacing:.04em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; background: var(--ink); color:#fff; margin: 0 0 18px; } .f-kick--ink { background: var(--ink); } .f-kick--w { background: var(--sun); color: var(--ink); }
.f-btn { display:inline-block; padding: 17px 30px; border-radius: 999px; border: 2.5px solid var(--ink); color: var(--ink); font: 700 1.02rem var(--disp); text-decoration:none; background: transparent; cursor:pointer; box-shadow: 0 5px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .2s; will-change: transform; }
.f-btn:hover { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.f-btn--t { background: var(--tom); color:#fff; } .f-btn--ink { background: var(--ink); color:#fff; box-shadow: 0 5px 0 var(--tom); border-color: var(--ink); }
.f-link { font: 700 1.05rem var(--disp); color: var(--ink); text-decoration:none; border-bottom: 3px solid var(--tom); }
html.js [data-r] { opacity:0; transform: translateY(24px) scale(.98); transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1); } html.js [data-r].in { opacity:1; transform:none; }
.f-hero { position:relative; padding: 56px 0 80px; overflow:hidden; } .f-hero-grid { position:relative; display:grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items:center; }
.f-blob { position:absolute; border-radius: 50%; filter: blur(2px); z-index:0; } .f-blob--a { width: 420px; height:420px; background: var(--sun); right: -80px; top: -90px; opacity:.55; } .f-blob--b { width: 320px; height:320px; background: var(--mint); left: -90px; bottom: -80px; opacity:.5; }
.f-pill { display:inline-flex; align-items:center; gap:10px; padding: 9px 18px; border: 2px solid var(--ink); border-radius:999px; background:#fff; font: 600 .9rem 'DM Sans'; margin: 0 0 26px; } .f-pill .dot { width:10px; height:10px; border-radius:50%; background:#27c46b; animation: fp 2s infinite; } @keyframes fp { 70% { box-shadow: 0 0 0 9px rgba(39,196,107,0); } 0% { box-shadow: 0 0 0 0 rgba(39,196,107,.6); } }
.v8 .f-hero h1 { font-size: clamp(2.8rem, 6.2vw, 5.6rem); line-height: .98; margin: 0 0 24px; }
.f-sq { position:relative; display:inline-block; white-space: nowrap; color: var(--tom); } .f-sq svg { position:absolute; left:0; bottom:-.16em; width:100%; height:.2em; } .f-sq path { fill:none; stroke: var(--sun); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: fdraw 1.4s .5s forwards; } @keyframes fdraw { to { stroke-dashoffset: 0; } }
.f-lead { font-size: 1.22rem; line-height:1.6; color: var(--mut); max-width: 540px; margin: 0 0 30px; } .f-lead--w { color: #e9e2ff; }
.f-cta { display:flex; flex-wrap:wrap; gap: 16px; }
.f-collage { position:relative; height: 560px; }
.f-ph { position:absolute; margin:0; overflow:hidden; border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); background:#fff; will-change: transform; } .f-ph img { width:100%; height:100%; object-fit: cover; display:block; }
.f-ph--arch { left: 0; top: 30px; width: 58%; height: 78%; border-radius: 999px 999px 28px 28px; } .f-ph--circ { right: 0; top: 0; width: 44%; aspect-ratio: 1; border-radius: 50%; } .f-ph--sq { right: 6%; bottom: 0; width: 40%; height: 46%; border-radius: 28px; transform: rotate(4deg); }
.f-badge { position:absolute; left: 44%; bottom: 20px; width: 124px; height:124px; display:grid; place-items:center; background: var(--sun); border: 3px solid var(--ink); border-radius:50%; z-index:3; } .f-badge svg { position:absolute; inset:0; width:100%; height:100%; animation: fspin 16s linear infinite; } .f-badge text { font: 700 14.5px var(--disp); fill: var(--ink); letter-spacing:.06em; } .f-badge b { font-size: 1.7rem; } @keyframes fspin { to { transform: rotate(360deg); } }
.f-stk { position:absolute; z-index:4; padding: 9px 16px; border: 2.5px solid var(--ink); border-radius: 999px; font: 700 .92rem var(--disp); box-shadow: 3px 3px 0 var(--ink); } .f-stk--1 { left: 2%; bottom: 40px; background: var(--mint); transform: rotate(-6deg); } .f-stk--2 { right: 0; top: 52%; background: var(--pink); transform: rotate(5deg); }
.f-marq { background: var(--ink); padding: 18px 0; overflow:hidden; transform: rotate(-1.2deg) scale(1.03); margin: 14px 0; } .f-marq-t { display:flex; gap: 14px; width:max-content; animation: fm 45s linear infinite; } @keyframes fm { to { transform: translateX(-50%); } }
.f-marq-t span { padding: 10px 26px; border-radius: 999px; font: 800 1.5rem var(--disp); white-space:nowrap; color: var(--ink); } .c0{background:var(--tom);color:#fff!important} .c1{background:var(--sun)} .c2{background:var(--mint)} .c3{background:var(--sky)} .c4{background:var(--pink)}
.f-sec { padding: 110px 0; } .f-sec--sun { background: var(--sun); } .f-sec--mint { background: var(--mint); } .f-sec--lilac { background: var(--lil); }
.f-head { margin-bottom: 48px; } .f-head h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height:1; margin:0; } .f-head--row { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.f-bento { display:grid; grid-template-columns: repeat(6,1fr); gap: 20px; }
.f-card { position:relative; display:flex; flex-direction:column; gap:12px; min-height: 290px; padding: 28px; border: 3px solid var(--ink); border-radius: 32px; color: var(--ink); text-decoration:none; box-shadow: 7px 7px 0 var(--ink); transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s; } .f-card.s3 { grid-column: span 3; } .f-card.s2 { grid-column: span 2; }
.f-tomato { background: var(--tom); color:#fff; } .f-sun { background: var(--sun); } .f-mint { background: var(--mint); } .f-sky { background: var(--sky); } .f-pink { background: var(--pink); }
.f-card .n { font: 800 1rem var(--disp); padding: 4px 12px; border-radius:999px; background: rgba(255,255,255,.55); width:max-content; color: var(--ink); } .f-tomato .n { background: rgba(255,255,255,.9); }
.f-card b { font: 800 clamp(1.8rem, 2.8vw, 2.5rem)/1 var(--disp); letter-spacing:-.03em; } .f-card .t { line-height:1.5; max-width: 420px; } .f-tomato .t { color:#fff; }
.f-card .tags { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; } .f-card .tags i { font-style:normal; font-weight:700; font-size:.82rem; padding: 6px 12px; border: 2px solid currentColor; border-radius: 999px; }
.f-card .go { position:absolute; right: 22px; top: 20px; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background: var(--ink); color:#fff; font-size:1.3rem; transition: transform .3s; }
.f-card:hover { transform: translate(-3px,-6px) rotate(-1.2deg); box-shadow: 10px 12px 0 var(--ink); } .f-card:hover .go { transform: rotate(45deg); }
.f-tr { display:grid; grid-template-columns: .9fr 1.4fr; gap: 28px; align-items:start; } .f-tr-list { display:flex; flex-wrap:wrap; gap: 12px; }
.f-term { padding: 16px 26px; border: 3px solid var(--ink); border-radius: 999px; background:#fff; color: var(--ink); font: 800 1.2rem var(--disp); cursor:pointer; box-shadow: 0 5px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .2s, color .2s; } .f-term:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); } .f-term.on { background: var(--ink); color: var(--sun); transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.f-tr-card { background:#fff; border: 3px solid var(--ink); border-radius: 32px; padding: 40px; box-shadow: 8px 8px 0 var(--ink); min-height: 360px; display:flex; flex-direction:column; gap: 22px; }
.f-tr-pan { display:none; } .f-tr-pan.on { display:block; animation: fpop .4s cubic-bezier(.3,1.5,.5,1); } @keyframes fpop { from { opacity:0; transform: translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
.f-tr-pan h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height:1.1; margin: 0 0 18px; } .f-tr-pan .why { margin:0; font-size:1.1rem; line-height:1.55; padding: 16px 20px; background: var(--bg); border-radius: 20px; } .f-tr-pan .why b { display:inline-block; margin-right:8px; font-family: var(--disp); color: var(--tom); } .f-tr-card .f-btn { align-self:flex-start; margin-top:auto; }
.f-path { position:relative; } .f-path-svg { position:absolute; left:0; top: 40px; width:100%; height: 230px; z-index:0; } .f-path-svg path { fill:none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 14; } .f-path-svg .bg { stroke: var(--line); } .f-path-svg .fg { stroke: var(--tom); stroke-dasharray: none; }
.f-stops { position:relative; z-index:1; list-style:none; margin:0; padding: 0; display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .f-stops li { padding-top: 150px; } .f-stops li:nth-child(even) { padding-top: 220px; } .f-stops li:nth-child(1) { padding-top: 190px; }
.f-stops .num { display:grid; place-items:center; width: 64px; height:64px; border-radius:50%; background: var(--sun); border: 3px solid var(--ink); font: 800 1.6rem var(--disp); box-shadow: 4px 4px 0 var(--ink); margin-bottom: 12px; } .f-stops li:nth-child(2) .num { background: var(--mint); } .f-stops li:nth-child(3) .num { background: var(--sky); } .f-stops li:nth-child(4) .num { background: var(--pink); }
.f-stops em { display:block; font: 700 .86rem var(--disp); color: var(--tom); text-transform:uppercase; letter-spacing:.06em; } .f-stops h3 { font-size: 1.7rem; margin: 4px 0 8px; } .f-stops p { margin:0; color: var(--mut); line-height:1.55; }
.f-stickers { display:flex; flex-wrap:wrap; gap: 16px; } .f-stickers a { padding: 20px 36px; border: 3px solid var(--ink); border-radius: 999px; font: 800 clamp(1.3rem,2.6vw,2rem) var(--disp); color: var(--ink); text-decoration:none; box-shadow: 5px 5px 0 var(--ink); transform: rotate(var(--r)); transition: transform .3s cubic-bezier(.3,1.7,.5,1); } .f-stickers a.c0 { color: var(--ink) !important; } .f-stickers a:hover { transform: rotate(0) scale(1.08); }
.f-posts { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; } .f-post { display:flex; flex-direction:column; gap: 10px; padding: 14px 14px 22px; background:#fff; border: 3px solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink); text-decoration:none; color: var(--ink); transform: rotate(var(--r)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); } .f-post:hover { transform: rotate(0) translateY(-6px); }
.f-post .im { display:block; aspect-ratio: 4/3; border-radius: 18px; overflow:hidden; border: 2px solid var(--ink); } .f-post img { width:100%; height:100%; object-fit:cover; display:block; } .f-post small { font: 700 .8rem var(--disp); color: var(--tom); text-transform:uppercase; padding: 0 8px; } .f-post b { font: 800 1.35rem/1.12 var(--disp); letter-spacing:-.02em; padding: 0 8px; }
.f-faq-g { display:grid; grid-template-columns: .8fr 1.5fr; gap: 64px; align-items:start; } .f-faq-g h2 { font-size: clamp(2.4rem,5vw,4rem); line-height:1; margin:0; }
.f-faq details { background:#fff; border: 3px solid var(--ink); border-radius: 24px; margin-bottom: 14px; box-shadow: 4px 4px 0 var(--ink); } .f-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding: 22px 26px; font: 800 1.2rem/1.2 var(--disp); } .f-faq summary::-webkit-details-marker{display:none}
.f-faq summary::after { content:"+"; flex:none; display:grid; place-items:center; width: 38px; height: 38px; border-radius:50%; background: var(--sun); border: 2.5px solid var(--ink); font-size:1.4rem; transition: transform .3s; } .f-faq details[open] summary::after { content:"\2212"; background: var(--tom); color:#fff; } .f-faq p { margin:0; padding: 0 26px 24px; line-height:1.65; color: var(--mut); }
.f-contact { background: var(--ink); color:#e9e2ff; padding: 120px 0; border-radius: 48px 48px 0 0; } .f-contact-g { display:grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items:start; } .f-contact h2 { color:#fff; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height:1; margin: 0 0 22px; }
.f-ci { list-style:none; margin: 28px 0 0; padding:0; } .f-ci li { display:grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 14px 0; border-top: 1.5px dashed rgba(255,255,255,.3); line-height:1.5; } .f-ci small { color: var(--sun); font: 700 .9rem var(--disp); } .f-ci a { color:#fff; }
.f-form { display:grid; gap:18px; background: var(--bg); color: var(--ink); border: 3px solid #fff; border-radius: 32px; padding: 36px; box-shadow: 8px 8px 0 var(--tom); } .f-form label { display:grid; gap: 8px; } .f-form label span { font: 800 .95rem var(--disp); }
.f-form input, .f-form select, .f-form textarea { width:100%; padding: 15px 20px; border: 2.5px solid var(--ink); border-radius: 18px; background:#fff; color: var(--ink); font: 1rem 'DM Sans'; } .f-form input:focus, .f-form select:focus, .f-form textarea:focus { outline:0; box-shadow: 0 0 0 4px var(--sun); }
.f-r2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .f-form .hp { position:absolute; left:-9999px; height:0; overflow:hidden; } .f-form .f-btn { justify-self:start; } .f-al { padding: 14px 18px; border: 2.5px solid var(--ink); border-radius: 16px; font-weight:700; } .f-al.ok { background: var(--mint); } .f-al.bad { background: var(--pink); }
.v8 .ft { --f-bg: #1c1738; --f-lime: var(--sun); background-image:none; } .v8 .ft .ft-btn { border-radius: 999px; color: var(--ink) !important; } .v8 .ft-mark { -webkit-text-stroke:1.5px rgba(255,210,63,.45); font-family: var(--disp); }
@media (max-width: 1024px) { .f-hero-grid, .f-faq-g, .f-contact-g, .f-tr { grid-template-columns:1fr; gap: 36px; } .f-collage { height: 480px; max-width: 560px; } .f-posts { grid-template-columns: 1fr 1fr; } .f-stops { grid-template-columns: 1fr 1fr; } .f-stops li, .f-stops li:nth-child(even), .f-stops li:nth-child(1) { padding-top: 20px; } .f-path-svg { display:none; } }
@media (max-width: 760px) { .v8 .f-wrap, .v8 .header-inner { padding: 0 20px; } .f-sec { padding: 72px 0; } .f-bento { grid-template-columns:1fr; } .f-card.s3, .f-card.s2 { grid-column: span 1; } .f-posts, .f-stops { grid-template-columns:1fr; } .f-r2 { grid-template-columns:1fr; } .f-head--row { flex-direction:column; align-items:flex-start; } .f-collage { height: 400px; } .f-badge { width: 96px; height:96px; } .f-tr-card { padding: 26px 22px; } .f-contact { border-radius: 32px 32px 0 0; padding: 72px 0; } .f-form { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { html.js [data-r] { opacity:1; transform:none; transition:none; } .f-marq-t, .f-badge svg, .f-sq path { animation:none; stroke-dashoffset:0; } }