/* ============================================================ CUPOLAND — Página do Lando Sistema visual "sticker" (mesma linguagem da extensão) ============================================================ */ :root { /* Roxo Cupoland — cor principal */ --roxo: #44426e; --roxo-ink: #2e2c4e; /* bordas, sombras, títulos */ --roxo-deep: #201f38; --roxo-500: #5f5d9e; --roxo-100: #e4e4f0; --roxo-50: #f0f0f7; --lilas: #f4f2fb; /* fundo da página */ /* Coral / laranja — só destaques */ --coral: #f0764e; --coral-600: #e85a2c; --coral-100: #ffe3d6; --laranja-50: #fdf4ec; --laranja-700: #b85d16; /* Azul do Lando */ --azul: #2b6ce4; --white: #ffffff; --text: #2e2c4e; /* títulos */ --body: #56546f; /* corpo */ /* Sombras duras roxas (assinatura sticker) */ --pop-sm: 3px 4px 0 var(--roxo-ink); --pop: 4px 6px 0 var(--roxo-ink); --pop-lg: 6px 9px 0 var(--roxo-ink); --radius: 20px; --radius-sm: 14px; --maxw: 1140px; --font-display: 'Fredoka', system-ui, sans-serif; --font-body: 'Nunito', system-ui, sans-serif; --ease: cubic-bezier(.22, 1, .36, 1); } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } /* NÃO colocar overflow (clip/hidden/auto) no : quebra o position:sticky do header. O scroll lateral no mobile já é contido pelo overflow-x:hidden do body abaixo (que não afeta o sticky). */ html { scroll-behavior: smooth; scroll-padding-top: 86px; } body { font-family: var(--font-body); color: var(--body); background: var(--lilas); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Campo de estrelas de fundo: atmosfera espacial global atrás de todo o conteúdo. Fica fixo na viewport (leve profundidade ao rolar), aparece nas áreas claras (lilás) e é coberto pelas seções opacas — nunca sobre texto. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1.6px 1.6px at 6% 14%, rgba(68, 66, 110, .40), transparent 60%), radial-gradient(1.3px 1.3px at 14% 42%, rgba(68, 66, 110, .30), transparent 60%), radial-gradient(2.2px 2.2px at 23% 24%, rgba(240, 118, 78, .34), transparent 60%), radial-gradient(1.2px 1.2px at 19% 72%, rgba(68, 66, 110, .28), transparent 60%), radial-gradient(1.5px 1.5px at 31% 58%, rgba(68, 66, 110, .32), transparent 60%), radial-gradient(1.3px 1.3px at 38% 88%, rgba(68, 66, 110, .26), transparent 60%), radial-gradient(1.6px 1.6px at 47% 18%, rgba(68, 66, 110, .38), transparent 60%), radial-gradient(1.2px 1.2px at 54% 66%, rgba(240, 118, 78, .28), transparent 60%), radial-gradient(2px 2px at 62% 34%, rgba(68, 66, 110, .34), transparent 60%), radial-gradient(1.4px 1.4px at 69% 80%, rgba(68, 66, 110, .28), transparent 60%), radial-gradient(1.5px 1.5px at 77% 22%, rgba(68, 66, 110, .36), transparent 60%), radial-gradient(1.2px 1.2px at 84% 60%, rgba(240, 118, 78, .26), transparent 60%), radial-gradient(1.7px 1.7px at 90% 38%, rgba(68, 66, 110, .38), transparent 60%), radial-gradient(1.3px 1.3px at 94% 76%, rgba(68, 66, 110, .28), transparent 60%), radial-gradient(1.2px 1.2px at 88% 90%, rgba(68, 66, 110, .24), transparent 60%), radial-gradient(1.4px 1.4px at 11% 90%, rgba(68, 66, 110, .26), transparent 60%); } img { max-width: 100%; display: block; } picture { display: contents; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); color: var(--text); line-height: 1.12; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); } h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); } h3 { font-size: 1.2rem; font-weight: 600; } p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } .text-azul { color: var(--azul); } /* ---------- Acessibilidade ---------- */ .skip-link { position: absolute; left: 12px; top: -60px; background: var(--roxo); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 200; transition: top .2s; font-weight: 700; } .skip-link:focus { top: 12px; } a:focus-visible, button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { position: relative; padding: 84px 0; } .section--tint { background: var(--roxo-50); } .section__head { max-width: 640px; margin: 0 auto 52px; text-align: center; } .section__sub { font-size: 1.1rem; margin-top: 12px; } .section__note { color: var(--roxo-500); font-weight: 600; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } /* ---------- Eyebrow ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--roxo); background: var(--white); border: 2px solid var(--roxo-ink); border-radius: 999px; padding: 5px 14px; margin-bottom: 18px; box-shadow: var(--pop-sm); } .eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); } .eyebrow--cupoia img { display: block; } .eyebrow--light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: #fff; box-shadow: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; padding: 12px 22px; border-radius: 999px; cursor: pointer; border: 2px solid var(--roxo-ink); box-shadow: var(--pop-sm); transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s; white-space: nowrap; } .btn:hover { transform: translate(-1px, -2px); box-shadow: var(--pop); } .btn:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--roxo-ink); } .btn--primary { background: var(--coral); color: #fff; } .btn--primary:hover { background: var(--coral-600); } .btn--outline { background: var(--white); color: var(--roxo); } .btn--outline:hover { background: var(--roxo-50); } .btn--lg { padding: 15px 30px; font-size: 1.08rem; } /* ---------- Cards ---------- */ .card { background: var(--white); border: 2px solid var(--roxo-ink); border-radius: var(--radius); box-shadow: var(--pop); padding: 26px; } .cards-grid { display: grid; gap: 24px; } .cards-grid--5 { grid-template-columns: repeat(5, 1fr); } .cards-grid--expr { grid-template-columns: repeat(5, 1fr); } .cards-grid--where { grid-template-columns: repeat(4, 1fr); } /* ---------- HEADER ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid var(--roxo-100); transition: box-shadow .25s, border-color .25s; } .site-header.is-scrolled { box-shadow: 0 6px 22px rgba(46, 44, 78, .1); border-color: var(--roxo-ink); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand__mark { width: 40px; height: 40px; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--roxo-ink); letter-spacing: -.02em; } .nav { display: flex; align-items: center; gap: 28px; } .nav > a:not(.btn) { font-family: var(--font-display); font-weight: 500; color: var(--roxo-ink); font-size: .98rem; position: relative; padding: 4px 0; } .nav > a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2.5px; background: var(--coral); border-radius: 2px; transition: width .25s var(--ease); } .nav > a:not(.btn):hover::after { width: 100%; } .nav__cta { padding: 9px 18px; font-size: .95rem; } .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; background: var(--white); border: 2px solid var(--roxo-ink); border-radius: 12px; box-shadow: var(--pop-sm); cursor: pointer; align-items: center; justify-content: center; } .nav-toggle span { width: 20px; height: 2.5px; background: var(--roxo-ink); border-radius: 2px; transition: .25s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ---------- HERO ---------- */ .hero { position: relative; padding: 72px 0 96px; overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; position: relative; z-index: 2; } .hero__sub { font-size: 1.22rem; max-width: 30ch; margin-top: 6px; } .hero__mission { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--roxo); background: var(--white); border: 2px solid var(--roxo-ink); border-left-width: 6px; border-left-color: var(--coral); border-radius: var(--radius-sm); box-shadow: var(--pop-sm); padding: 14px 20px; margin-top: 26px; display: inline-block; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hero__art { position: relative; display: flex; justify-content: center; } /* Lando dentro de um "portal" arredondado */ .lando-portal { position: relative; border: 3px solid var(--roxo-ink); border-radius: 32px; box-shadow: var(--pop-lg); overflow: hidden; background: radial-gradient(120% 120% at 70% 0%, #5b57a0 0%, #3a3860 55%, #26244a 100%); display: grid; place-items: center; width: 100%; max-width: 380px; aspect-ratio: 1; } .lando-portal img { position: relative; z-index: 1; width: 92%; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .3)); } .lando-portal--hero { max-width: 420px; } .lando-portal--cta { max-width: 240px; border-radius: 28px; } /* Estrelas dentro do portal removidas: vazavam sobre as artes de fundo transparente (empolgado etc.). O clima de galáxia fica por conta do .stars no fundo da seção. */ .badge-float { position: absolute; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--roxo); background: var(--white); border: 2px solid var(--roxo-ink); border-radius: 999px; padding: 7px 13px; box-shadow: var(--pop-sm); } .badge-float svg { color: var(--coral); } .badge-float--radar { top: 8%; right: 2%; animation: floaty 3.4s ease-in-out infinite; } /* ---------- Espaço: estrelas / órbitas / planetas ---------- */ .stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1.6px 1.6px at 12% 20%, rgba(68, 66, 110, .35), transparent 60%), radial-gradient(1.4px 1.4px at 82% 30%, rgba(68, 66, 110, .28), transparent 60%), radial-gradient(2px 2px at 45% 12%, rgba(240, 118, 78, .35), transparent 60%), radial-gradient(1.3px 1.3px at 70% 72%, rgba(68, 66, 110, .3), transparent 60%), radial-gradient(1.5px 1.5px at 25% 82%, rgba(68, 66, 110, .25), transparent 60%), radial-gradient(1.3px 1.3px at 92% 60%, rgba(240, 118, 78, .28), transparent 60%); } .stars--dark { background: radial-gradient(1.6px 1.6px at 12% 20%, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(1.4px 1.4px at 82% 30%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(2px 2px at 45% 15%, rgba(255, 200, 160, .8), transparent 60%), radial-gradient(1.3px 1.3px at 70% 72%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(1.5px 1.5px at 25% 82%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1.3px 1.3px at 92% 60%, rgba(203, 203, 228, .6), transparent 60%); } .orbit { position: absolute; border: 2px dashed rgba(95, 93, 158, .28); border-radius: 50%; z-index: 0; animation: spin 60s linear infinite; } .orbit--1 { width: 340px; height: 340px; top: -80px; right: -60px; } .orbit--2 { width: 200px; height: 200px; bottom: -70px; left: -50px; animation-duration: 45s; animation-direction: reverse; } .planet { position: absolute; border-radius: 50%; z-index: 0; box-shadow: inset -6px -6px 0 rgba(0, 0, 0, .12); } .planet--1 { width: 26px; height: 26px; background: var(--coral); top: 22%; left: 6%; animation: floaty 5s ease-in-out infinite; } .planet--2 { width: 60px; height: 60px; background: linear-gradient(135deg, #6d6ab0, #44426e); top: 14%; right: 8%; opacity: .5; } /* ---------- Timeline (origem) ---------- */ .timeline { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .timeline__item { position: relative; padding-top: 40px; min-width: 0; } .timeline__num { position: absolute; top: -20px; left: 22px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #fff; background: var(--roxo); border: 2px solid var(--roxo-ink); border-radius: 12px; width: 46px; height: 46px; display: grid; place-items: center; box-shadow: var(--pop-sm); } .timeline__item h3 { margin-bottom: 10px; } /* ---------- Value cards ---------- */ .value-card { text-align: left; } .value-card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; background: var(--roxo-50); border: 2px solid var(--roxo-ink); border-radius: 14px; color: var(--roxo); } .value-card__icon svg { width: 26px; height: 26px; } .value-card h3 { margin-bottom: 8px; } .value-card p { font-size: .96rem; } /* ---------- Radar (Cupo IA) ---------- */ .grid-2--radar { align-items: center; } .radar-visual { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 0 auto; border: 3px solid var(--roxo-ink); border-radius: 50%; box-shadow: var(--pop-lg); background: radial-gradient(circle at 50% 50%, #2e2c4e 0%, #201f38 100%); overflow: hidden; display: grid; place-items: center; } .radar__ring { position: absolute; border: 1.5px solid rgba(143, 106, 230, .35); border-radius: 50%; width: 66%; height: 66%; } .radar__ring--2 { width: 33%; height: 33%; border-color: rgba(143, 106, 230, .5); } .radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(240, 118, 78, .55) 0deg, rgba(240, 118, 78, 0) 60deg, transparent 360deg); animation: spin 4s linear infinite; } .radar__blip { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(240, 118, 78, .6); animation: blip 2.6s ease-out infinite; } .radar__blip--1 { top: 26%; left: 64%; } .radar__blip--2 { top: 62%; left: 34%; animation-delay: .9s; } .radar__blip--3 { top: 70%; left: 68%; animation-delay: 1.7s; } .radar__lando { position: relative; z-index: 2; width: 54%; height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4)); } .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 20px; } .trio__item { background: var(--white); border: 2px solid var(--roxo-ink); border-radius: var(--radius-sm); box-shadow: var(--pop-sm); padding: 14px 12px; text-align: center; } .trio__role { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--roxo-500); font-weight: 700; } .trio__item strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--roxo-ink); margin: 3px 0; } .trio__desc { display: block; font-size: .78rem; color: var(--body); } .bridge { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--roxo-ink); border-left: 4px solid var(--coral); padding-left: 16px; font-style: italic; } /* ---------- Expressões ---------- */ .expr-card { text-align: center; display: flex; flex-direction: column; align-items: center; } .expr-card__face { width: 104px; height: 104px; border-radius: 22px; overflow: hidden; border: 2px solid var(--roxo-ink); box-shadow: var(--pop-sm); margin-bottom: 14px; background: radial-gradient(120% 120% at 60% 0%, #5b57a0, #2e2c4e); display: grid; place-items: center; } .expr-card__face img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); } .expr-card__quote { font-family: var(--font-display); font-weight: 500; color: var(--roxo-ink); font-size: 1.02rem; margin: 12px 0 8px; } .expr-card__use { font-size: .86rem; color: var(--body); } .tag { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--roxo-ink); } .tag--empolgado { background: var(--laranja-50); color: var(--laranja-700); } .tag--desconfiado { background: #eef4fe; color: #1a459a; } .tag--apaixonado { background: #ffe3d6; color: var(--coral-600); } .tag--travesso { background: var(--roxo-50); color: var(--roxo); } .tag--decepcionado { background: #f3f3f6; color: #6b6a80; } /* ---------- Como o Lando fala (chat) ---------- */ .grid-2--flip .chat { order: 2; } .chat { display: flex; flex-direction: column; gap: 14px; } .bubble { display: flex; align-items: center; gap: 12px; background: var(--white); border: 2px solid var(--roxo-ink); border-radius: 18px; border-bottom-left-radius: 6px; box-shadow: var(--pop-sm); padding: 12px 16px; } .bubble:nth-child(even) { margin-left: 28px; } .bubble__ava { width: 34px; height: 34px; flex-shrink: 0; } .bubble p { margin: 0; font-weight: 600; color: var(--roxo-ink); font-size: .98rem; } /* ---------- Onde o Lando aparece ---------- */ .where-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 16px; } .where-card__icon { display: grid; place-items: center; width: 54px; height: 54px; background: var(--roxo-50); border: 2px solid var(--roxo-ink); border-radius: 16px; color: var(--roxo); } .where-card__icon svg { width: 26px; height: 26px; } .where-card h3 { font-size: 1rem; } /* ---------- Compromisso ---------- */ .commitment { background: radial-gradient(130% 100% at 80% -10%, #4a477e 0%, #2e2c4e 55%, #201f38 100%); overflow: hidden; text-align: center; } .commitment__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; } .commitment h2 { color: #fff; } .commitment p { color: #d5d3e8; font-size: 1.12rem; } .commitment__closing { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: #fff !important; margin-top: 24px; background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .25); border-radius: var(--radius-sm); padding: 18px 24px; display: inline-block; } /* ---------- CTA final ---------- */ .cta-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; background: radial-gradient(120% 140% at 12% 20%, #55529a 0%, #3a3860 45%, #2a284c 100%); border: 3px solid var(--roxo-ink); border-radius: 30px; box-shadow: var(--pop-lg); padding: 44px 48px; } .cta-card__art { position: relative; z-index: 2; } .cta-card__text { position: relative; z-index: 2; } .cta-card h2 { color: #fff; } .cta-card p { color: #d5d3e8; font-size: 1.12rem; margin-top: 10px; max-width: 46ch; } .cta-card__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } .cta-card .lando-portal--cta { background: radial-gradient(120% 120% at 60% 0%, #6d6ab0, #2e2c4e); } /* ---------- FOOTER ---------- */ .site-footer { background: var(--white); border-top: 2px solid var(--roxo-ink); padding-top: 56px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; } .footer__tag { font-family: var(--font-display); font-weight: 500; color: var(--roxo); margin-top: 14px; max-width: 28ch; } .socials { display: flex; gap: 10px; margin-top: 18px; } .socials a { display: grid; place-items: center; width: 42px; height: 42px; color: var(--roxo); background: var(--white); border: 2px solid var(--roxo-ink); border-radius: 12px; box-shadow: var(--pop-sm); transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s; } .socials a:hover { transform: translate(-1px, -2px); box-shadow: var(--pop); background: var(--coral); color: #fff; border-color: var(--roxo-ink); } .footer__col { display: flex; flex-direction: column; gap: 10px; } .footer__col h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--roxo-500); margin-bottom: 4px; } .footer__col a { color: var(--body); font-weight: 600; transition: color .2s; } .footer__col a:hover { color: var(--coral-600); } .footer__bottom { border-top: 2px solid var(--roxo-100); padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 8px; } .footer__disclaimer { font-size: .82rem; color: var(--roxo-500); margin: 0; } .footer__copy { font-size: .82rem; color: var(--body); margin: 0; font-weight: 600; } /* ============================================================ Animações ============================================================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes blip { 0% { box-shadow: 0 0 0 0 rgba(240, 118, 78, .6); opacity: 1; } 70% { box-shadow: 0 0 0 14px rgba(240, 118, 78, 0); opacity: .5; } 100% { box-shadow: 0 0 0 0 rgba(240, 118, 78, 0); opacity: 1; } } /* ============================================================ Responsivo ============================================================ */ @media (max-width: 980px) { .cards-grid--5, .cards-grid--expr { grid-template-columns: repeat(3, 1fr); } .cards-grid--where { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px; background: var(--white); border-bottom: 2px solid var(--roxo-ink); padding: 16px 24px 24px; box-shadow: 0 16px 30px rgba(46, 44, 78, .16); transform: translateY(-130%); transition: transform .3s var(--ease); z-index: 90; } .nav.is-open { transform: translateY(0); } .nav > a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--roxo-100); } .nav__cta { margin-top: 10px; justify-content: center; } .nav-toggle { display: flex; } .hero { padding: 24px 0 56px; } .hero__inner { grid-template-columns: 1fr; text-align: center; gap: 8px; } .hero__text { order: 2; display: flex; flex-direction: column; align-items: center; } .hero__sub { max-width: 40ch; } .hero__art { order: 1; margin-bottom: 24px; } /* botões do hero: largura uniforme, empilhados e centralizados no mobile */ .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; } .grid-2 { grid-template-columns: 1fr; gap: 32px; } .grid-2--flip .chat { order: 0; } .timeline { grid-template-columns: minmax(0, 1fr); gap: 34px; } .cta-card { grid-template-columns: 1fr; text-align: center; padding: 40px 28px; } .cta-card__art { justify-self: center; } .cta-card p { margin-left: auto; margin-right: auto; } .cta-card__actions { justify-content: center; } .bubble:nth-child(even) { margin-left: 0; } } @media (max-width: 620px) { .section { padding: 60px 0; } .cards-grid--5, .cards-grid--expr, .cards-grid--where { grid-template-columns: 1fr 1fr; } .trio { grid-template-columns: 1fr; gap: 24px; } .footer__grid { grid-template-columns: 1fr; gap: 30px; } h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); } } @media (max-width: 420px) { .cards-grid--5, .cards-grid--expr, .cards-grid--where { grid-template-columns: 1fr; } .container { padding: 0 18px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .orbit, .radar__sweep, .radar__blip, .badge-float--radar, .planet--1 { animation: none; } .btn, .socials a { transition: none; } }