/* FlowOut — site principal · v2 (escuro, formato da apresentação FlowOut Voice) Fundo escuro com algumas seções claras (off-white frio, nunca creme). Títulos: uma parte em branco (grafite no claro) + outra com o degradê. Botões e quadros: borda em cor vibrante da paleta; o botão se preenche com a cor da borda. Poppins no site, Arial só na fonética. */ @font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(../fonts/poppins-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-500-normal.woff2) format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(../fonts/poppins-latin-600-normal.woff2) format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url(../fonts/poppins-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url(../fonts/poppins-latin-800-normal.woff2) format("woff2"); } :root { --bg: #1a1918; --bg2: #211f1d; --surface: #252321; --deep: #121110; --text: #ffffff; --muted: #c9c6c1; --faint: #8f8b86; --line: rgba(255,255,255,.1); --light: #F2F3F5; --light-card: #ffffff; --graphite: #2A2B2E; --lmuted: #55575C; --lline: #DADCE0; --teal-deep: #224B51; --teal: #45BABD; --violet: #6D73A6; --magenta: #972B8A; --terra: #CC6F4E; --amber: #F7A71C; --gradient: linear-gradient(90deg, #224B51 0%, #45BABD 20%, #6D73A6 40%, #972B8A 60%, #CC6F4E 80%, #F7A71C 100%); --gradient-dark: linear-gradient(90deg, #45BABD 0%, #6D73A6 28%, #972B8A 55%, #CC6F4E 78%, #F7A71C 100%); --gradient-light: linear-gradient(90deg, #224B51 0%, #2f9396 20%, #6D73A6 42%, #972B8A 64%, #C0603F 84%, #D98A0A 100%); --gradient-diag: linear-gradient(135deg, #45BABD 0%, #6D73A6 30%, #972B8A 58%, #CC6F4E 80%, #F7A71C 100%); --font: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --phon: Arial, "Liberation Sans", "Arimo", sans-serif; --gut: max(16px, 4vw); --r: 16px; --ease: cubic-bezier(.16, 1, .3, 1); /* cor da vez (bordas, botões, números) */ --c: var(--teal); --on: #121110; --lg: linear-gradient(90deg, #45BABD, #6D73A6); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.62; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; } ::selection { background: var(--magenta); color: #fff; } :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 8px; } .skip { position: absolute; left: -999px; top: 8px; background: #000; color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 200; } .skip:focus { left: 12px; } /* ---------- cores (uma classe define borda, preenchimento e degradê local) ---------- */ .c-teal { --c: var(--teal); --on: #121110; --lg: linear-gradient(90deg, #45BABD 0%, #7fd6d8 45%, #6D73A6 100%); } .c-violet { --c: var(--violet); --on: #ffffff; --lg: linear-gradient(90deg, #45BABD 0%, #6D73A6 50%, #972B8A 100%); } .c-magenta { --c: var(--magenta); --on: #ffffff; --lg: linear-gradient(90deg, #6D73A6 0%, #b03aa2 45%, #CC6F4E 100%); } .c-terra { --c: var(--terra); --on: #ffffff; --lg: linear-gradient(90deg, #972B8A 0%, #CC6F4E 50%, #F7A71C 100%); } .c-amber { --c: var(--amber); --on: #121110; --lg: linear-gradient(90deg, #CC6F4E 0%, #F7A71C 55%, #F7A71C 100%); } /* ---------- largura: títulos usam a tela inteira; texto corrido em colunas ---------- */ .wrap { width: 100%; padding-inline: var(--gut); } /* margem esquerda de 15% em todas as seções (padrão da página) */ @media (min-width: 1100px) { .wrap { padding-left: 15vw; } } @media (min-width: 961px) and (max-width: 1099px) { .wrap { padding-left: 9vw; } } .cols { columns: 2 30ch; column-gap: clamp(28px, 4vw, 64px); } .cols.three { columns: 3 26ch; } .cols > * { break-inside: avoid; } .cols p { margin: 0 0 14px; } .measure { max-width: 62ch; } /* ---------- tipografia ---------- */ h1, h2, h3 { margin: 0; line-height: 1.06; letter-spacing: -.015em; text-wrap: balance; } h1 { font-size: clamp(1.8rem, 3.75vw, 3.9rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 2.85vw, 2.7rem); font-weight: 800; } h3 { font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 700; line-height: 1.25; } p { margin: 0 0 14px; } .g { background: var(--gradient-dark); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .light .g { background-image: var(--gradient-light); } .eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .eyebrow::before { content: ""; width: 30px; height: 3px; border-radius: 3px; background: var(--amber); } .lead { font-size: clamp(1.05rem, 1.35vw, 1.25rem); color: var(--muted); max-width: 62ch; } .muted { color: var(--muted); } .small { font-size: .88rem; } .tag { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c); padding-bottom: 3px; border-bottom: 1.5px solid var(--c); margin-bottom: 16px; } /* ---------- seções ---------- */ .section { position: relative; padding-block: clamp(64px, 9vw, 128px); background: var(--bg); } .section.alt { background: var(--bg2); } .section.tight { padding-block: clamp(48px, 6vw, 88px); } .sec-head { margin-bottom: clamp(32px, 4.5vw, 64px); } .sec-head h2 { max-width: none; } .sec-head .cols { margin-top: 22px; max-width: 1100px; } .sec-head.wide h2 { max-width: none; } .sec-head .lead { margin-top: 18px; } /* seção clara: off-white frio, texto grafite */ .light { background: var(--light) !important; color: var(--graphite); --muted: var(--lmuted); --line: var(--lline); --surface: var(--light-card); } .light .eyebrow { color: var(--lmuted); } /* botão "Início" em todas as seções */ .to-home { position: absolute; top: clamp(18px, 2.4vw, 32px); right: var(--gut); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px 10px 15px; border-radius: 999px; border: 2px solid var(--teal); background: rgba(69,186,189,.1); color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 700; letter-spacing: .04em; transition: background-color .2s, color .2s; } .to-home svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .to-home:hover, .to-home:active, .to-home:focus-visible { background: var(--teal); color: #121110; } .light .to-home { color: var(--graphite); border-color: #2f9396; } .light .to-home:hover { background: #2f9396; color: #fff; } /* ---------- botões: borda colorida, preenchimento da mesma cor ao passar/clicar ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: .98rem; text-decoration: none; text-align: center; border: 2px solid var(--c); background: transparent; color: var(--text); transition: background-color .25s var(--ease), color .25s var(--ease), transform .15s ease; } .btn:hover, .btn:focus-visible, .btn:active, .btn[aria-current="page"] { background: var(--c); color: var(--on); } .btn:active { transform: scale(.97); } .btn svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; } .light .btn { color: var(--graphite); } .light .btn:hover, .light .btn:focus-visible, .light .btn:active { color: var(--on); } /* botão com borda degradê (WhatsApp principal) */ .btn.grad-b { border-color: transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient-diag) border-box; } .section.alt .btn.grad-b { background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--gradient-diag) border-box; } .light .btn.grad-b { background: linear-gradient(var(--light), var(--light)) padding-box, var(--gradient-diag) border-box; } .btn.grad-b:hover, .btn.grad-b:focus-visible, .btn.grad-b:active { background: var(--gradient-diag) border-box; color: #121110; } .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(40px, 6vh, 72px) max(150px, 22vh); overflow: hidden; isolation: isolate; background: var(--bg); } .hero.sub { min-height: 80svh; padding-block: clamp(32px, 5vh, 56px) max(118px, 15vh); } .wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26%; z-index: -1; opacity: .75; pointer-events: none; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); gap: clamp(32px, 5vw, 96px); align-items: center; width: 100%; } .logo-big { width: clamp(220px, 27vw, 460px); height: auto; margin: 0 0 clamp(22px, 3.5vh, 40px); } .logo-mid { width: clamp(160px, 15vw, 250px); height: auto; margin: 0 0 clamp(22px, 3.5vh, 40px); } .hero h1 { max-width: none; } .hero .lead { margin-top: 26px; } .hero-note { margin-top: 20px; font-size: .9rem; color: var(--faint); } /* coluna de menu à direita */ .menu-col { display: grid; gap: 12px; } .menu-col .mlabel { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px 4px; } .mbtn { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; border-radius: 14px; border: 2px solid var(--c); color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.02rem; background: rgba(26,25,24,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); } .mbtn .n { font-size: .72rem; font-weight: 700; color: var(--c); letter-spacing: .08em; min-width: 2ch; transition: color .25s; } .mbtn .lbl { flex: 1; } .mbtn .arr { transition: transform .25s var(--ease); } .mbtn:hover, .mbtn:focus-visible, .mbtn:active, .mbtn[aria-current="page"] { background: var(--c); color: var(--on); transform: translateX(-4px); } .mbtn:hover .n, .mbtn:focus-visible .n, .mbtn:active .n, .mbtn[aria-current="page"] .n { color: var(--on); } .mbtn:hover .arr { transform: translateX(4px); } .mbtn.wa { border-color: transparent; background: linear-gradient(#1f1d1c, #1f1d1c) padding-box, var(--gradient-diag) border-box; margin-top: 6px; } .mbtn.wa svg { width: 20px; height: 20px; fill: currentColor; } .mbtn.wa:hover, .mbtn.wa:focus-visible, .mbtn.wa:active { background: var(--gradient-diag) border-box; color: #121110; } @media (max-width: 960px) { .hero, .hero.sub { min-height: auto; padding-block: 56px 72px; } .hero-grid { grid-template-columns: minmax(0, 1fr); } .menu-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .menu-col .mlabel { grid-column: 1 / -1; } .mbtn { padding: 13px 14px; font-size: .95rem; } .mbtn.wa { grid-column: 1 / -1; } .wave { height: 45%; } } @media (max-width: 440px) { .mbtn .n { display: none; } .mbtn { padding: 12px 13px; font-size: .92rem; } } /* menu flutuante (aparece quando o hero sai da tela) */ .fab { position: fixed; top: 14px; left: 14px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; border: 2px solid transparent; background: linear-gradient(#1a1918, #1a1918) padding-box, var(--gradient-diag) border-box; color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .1em; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); } .fab img { width: 74px; height: auto; } .fab.show { opacity: 1; transform: none; pointer-events: auto; } .overlay { position: fixed; inset: 0; z-index: 70; background: rgba(14,13,12,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: flex-start; justify-content: flex-end; padding: 72px var(--gut) 24px; overflow-y: auto; } .overlay .menu-col { width: min(360px, 100%); grid-template-columns: minmax(0, 1fr); } .overlay .menu-col .mbtn.wa { grid-column: auto; } .overlay .close { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--teal); background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; } .overlay .close:hover { background: var(--teal); color: #121110; } /* ---------- quadros: sempre com borda em cor vibrante ---------- */ .grid { display: grid; gap: clamp(16px, 1.6vw, 24px); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1180px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .g3, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .g2, .g3, .g4, .g5 { grid-template-columns: minmax(0, 1fr); } } .card { position: relative; background: var(--surface); border: 1.5px solid var(--c); border-radius: var(--r); padding: clamp(24px, 2.2vw, 34px) clamp(22px, 2vw, 30px); min-width: 0; overflow: hidden; } .card h3 { margin-bottom: 10px; } .card p { color: var(--muted); font-size: .98rem; } .card p:last-child { margin-bottom: 0; } .card .actions { margin-top: 22px; } .dots { position: absolute; top: 14px; right: 14px; width: 54px; height: 54px; color: var(--c); background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px); background-size: 13.5px 13.5px; opacity: .5; pointer-events: none; } /* números grandes com o degradê local da cor do quadro */ .num { display: block; font-size: clamp(2.8rem, 5.4vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: var(--lg); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; } .num.sm { font-size: clamp(1.9rem, 3vw, 2.6rem); } .stat p { margin: 0; } /* caminhos (home / para você) */ .path { display: flex; flex-direction: column; min-height: 340px; text-decoration: none; color: inherit; transition: transform .3s var(--ease); } .path h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.12; margin: 4px 0 14px; } .path p { max-width: 44ch; } .path .btn { margin-top: auto; align-self: flex-start; } .path:hover { transform: translateY(-4px); } .path:hover .btn { background: var(--c); color: var(--on); } /* passos numerados */ .steps { list-style: none; margin: 0; padding: 0; } .steps .card .num { font-size: clamp(2.2rem, 3.4vw, 3.2rem); } /* ---------- telefone com a app real ---------- */ .phone { position: relative; max-width: 310px; margin: 0 auto; border-radius: 36px; padding: 9px; border: 2px solid transparent; background: linear-gradient(#0e0d0c, #0e0d0c) padding-box, var(--gradient-diag) border-box; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); } .phone img { border-radius: 27px; width: 100%; } .st { font-weight: 700; font-size: 1.25em; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .nat { display: inline-block; padding: 1px 10px; border-radius: 999px; border: 1.5px solid var(--teal); color: var(--teal); font-weight: 700; font-size: .72rem; letter-spacing: .02em; } .split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 96px); align-items: center; } .split.rev { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } @media (max-width: 960px) { .split, .split.rev { grid-template-columns: minmax(0, 1fr); } .phone { max-width: 260px; } } /* demo da fonética */ .demo { background: var(--deep); border: 1.5px solid var(--c); border-radius: var(--r); padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; color: #fff; } .demo .en { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.08; margin: 0 0 16px; } .demo .ph { font-family: var(--phon); font-size: clamp(1.7rem, 3.2vw, 2.7rem); margin: 10px 0 12px; word-break: keep-all; overflow-wrap: normal; } .demo .tr { color: #c9c6c1; margin: 0; } /* sequência OUÇA → TENTE */ .flow-seq { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 10px; padding: 0; list-style: none; } .flow-seq li { font-weight: 700; font-size: .82rem; letter-spacing: .1em; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--c); } /* ---------- componentes ---------- */ .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .checks li { position: relative; padding-left: 34px; } .checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--teal); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2345BABD' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 11-11-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; } .light .checks li::before { border-color: #2f9396; } /* relatório (exemplo) */ .report { background: var(--light-card); color: var(--graphite); border: 1.5px solid var(--c); border-radius: var(--r); padding: clamp(22px, 2.4vw, 34px); box-shadow: 0 30px 60px -34px rgba(0,0,0,.35); min-width: 0; } .report .rh { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; border-bottom: 1px solid var(--lline); padding-bottom: 12px; margin-bottom: 16px; } .report .rh b { font-size: 1.05rem; } .report .ex { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid var(--terra); color: #a24f31; border-radius: 999px; padding: 2px 10px; } .report .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .report .kpi { border: 1.5px solid var(--c); border-radius: 12px; padding: 14px 16px; } .report .kpi .num { font-size: clamp(2.2rem, 3.6vw, 3rem); margin-bottom: 4px; } .report .kpi span { font-size: .84rem; color: var(--lmuted); } .report table { width: 100%; border-collapse: collapse; font-size: .92rem; } .report th, .report td { text-align: left; padding: 9px 6px; border-bottom: 1px solid #ECEDF0; } .report th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lmuted); font-weight: 700; } .bar { display: inline-flex; gap: 3px; vertical-align: middle; } .bar i { width: 18px; height: 8px; border-radius: 3px; background: #E4E6EA; } .bar i.on { background: var(--c); } .report .foc { margin: 16px 0 0; font-size: .9rem; border-left: 3px solid var(--amber); padding: 4px 0 4px 12px; } /* parceiros */ .partner { display: flex; gap: 18px; align-items: center; text-decoration: none; color: inherit; } .partner img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; background: #fff; flex: 0 0 auto; } .partner b { display: block; font-size: 1.05rem; color: var(--text); } .light .partner b { color: var(--graphite); } .partner span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.45; } .partner:hover { background: color-mix(in srgb, var(--c) 10%, var(--surface)); } /* fundador */ .founder { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 96px); align-items: center; } .founder .photo { border-radius: 22px; padding: 3px; background: var(--gradient-diag); } .founder img { border-radius: 19px; width: 100%; aspect-ratio: 720 / 645; object-fit: cover; } .founder .name { font-size: clamp(1.7rem, 3.2vw, 2.8rem); font-weight: 800; margin: 4px 0 22px; line-height: 1.1; } @media (max-width: 860px) { .founder { grid-template-columns: minmax(0, 1fr); } .founder .photo { max-width: 420px; } } /* planos */ .plan { display: flex; flex-direction: column; } .plan .who { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c); } .plan h3 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); margin: 6px 0 6px; } .plan .sum { color: var(--muted); margin-bottom: 18px; } .plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 9px; font-size: .95rem; color: var(--muted); } .plan li { padding-left: 22px; position: relative; } .plan li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); } .plan .btn { margin-top: auto; align-self: flex-start; } /* temário */ .syllabus { list-style: none; padding: 0; margin: 0; } .syllabus .card { padding-top: 22px; } .syllabus .num { font-size: clamp(2rem, 2.8vw, 2.6rem); margin-bottom: 10px; } .syllabus b { display: block; font-size: 1.05rem; margin-bottom: 4px; } .syllabus span { color: var(--muted); font-size: .93rem; } /* apps */ .app-col { display: flex; flex-direction: column; min-width: 0; } .app-title { font-size: clamp(1.4rem, 2.1vw, 2.2rem); font-weight: 800; line-height: 1.1; margin: 0 0 clamp(14px, 1.4vw, 22px); } .app-col .appcard { flex: 1; } .appcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 230px); gap: clamp(20px, 2.4vw, 36px); align-items: start; } .appcard .phone { width: 100%; max-width: 230px; margin: 0; align-self: center; } .appcard ul, .appcard p { font-size: .93rem; } @media (max-width: 1100px) { .appcard { grid-template-columns: minmax(0, 1fr); } .appcard .phone { max-width: 240px; margin: 0 auto; } } .appcard h3 { font-size: clamp(1.25rem, 1.7vw, 1.8rem); margin: 4px 0 14px; } .appcard ul { margin: 0 0 18px; padding-left: 1.1em; color: var(--muted); } .appcard li { margin-bottom: 8px; break-inside: avoid; } .appcard li b { color: var(--text); } .soon { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--amber); color: var(--amber); margin-left: 8px; vertical-align: middle; } @media (max-width: 860px) { .apps-2 { grid-template-columns: minmax(0, 1fr); } } /* FAQ */ .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } @media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } } .faq details { background: var(--surface); border: 1.5px solid var(--c); border-radius: 14px; } .faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; font-weight: 700; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 22px; top: 12px; font-size: 1.6rem; font-weight: 500; color: var(--c); } .faq details[open] summary::after { content: "–"; } .faq details > div { padding: 0 22px 20px; color: var(--muted); } .faq a { color: var(--teal); } /* princípios */ .principles { list-style: none; margin: 0; padding: 0; } .principles .card { display: flex; flex-direction: column; } .principles .num { font-size: clamp(2rem, 2.8vw, 2.6rem); } .principles p { font-size: 1.12rem; font-weight: 600; color: var(--text); line-height: 1.35; margin: 0; } .light .principles p { color: var(--graphite); } /* fechamento */ .closing h2 { max-width: 20ch; } .closing .lead { margin-top: 20px; } /* textos legais em colunas */ .legal { columns: 3 30ch; column-gap: clamp(32px, 4vw, 64px); column-rule: 1px solid var(--line); } .legal h2 { font-size: 1.2rem; margin: 0 0 10px; break-after: avoid; color: var(--teal); letter-spacing: 0; } .legal section { break-inside: avoid; margin-bottom: 28px; } .legal p, .legal li { color: var(--muted); font-size: .96rem; } .legal ul { padding-left: 1.1em; margin: 0 0 14px; } .legal a { color: var(--teal); } /* ---------- rodapé ---------- */ .site-foot { background: var(--deep); color: var(--muted); padding: 64px 0 32px; font-size: .92rem; border-top: 1px solid var(--line); } .site-foot a { color: #fff; text-decoration: none; } .site-foot a:hover { color: var(--teal); } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; } .foot-grid .flogo { width: 180px; margin-bottom: 16px; } @media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } } .site-foot h4 { color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; } .site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .foot-bottom { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: .82rem; color: var(--faint); } /* WhatsApp flutuante (páginas B2C) */ .wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); } .wa-float svg { width: 28px; height: 28px; fill: #fff; } /* ---------- textura e cursor (iguais à apresentação Voice) ---------- */ .grain { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; } .cursor-dot { position: fixed; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--teal); pointer-events: none; z-index: 999; transform: translate(-50%, -50%); transition: width .2s, height .2s, opacity .2s; opacity: 0; } .cursor-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #b6ecec 0%, var(--teal) 55%, var(--teal-deep) 100%); transition: width .2s, height .2s; } .cursor-dot.on { opacity: 1; } .cursor-dot.is-hover { width: 46px; height: 46px; } .cursor-dot.is-hover::before { width: 9px; height: 9px; } @media (pointer: coarse), (max-width: 860px) { .cursor-dot { display: none; } } /* revelar ao rolar */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .reveal { opacity: 1; transform: none; } } /* títulos sempre em 2 linhas no computador: parte branca na 1ª, degradê na 2ª (o JS ajusta o tamanho se não couber) */ @media (min-width: 961px) { h1 .ta, h1 .g, h2 .ta, h2 .g { display: block; width: fit-content; white-space: nowrap; } } /* seta "role para ver mais" no hero */ .scroll-cue { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 40px); transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .scroll-cue .ring { width: 48px; height: 48px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient-diag) border-box; display: flex; align-items: center; justify-content: center; animation: cue 2.2s var(--ease) infinite; transition: background .25s; } .scroll-cue svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .scroll-cue:hover .ring, .scroll-cue:focus-visible .ring { background: var(--gradient-diag) border-box; } .scroll-cue:hover svg { stroke: #121110; } .scroll-cue:hover { color: #fff; } @keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @media (max-width: 960px) { .hero { flex-direction: column; } .scroll-cue { order: 2; position: relative; left: auto; bottom: auto; transform: none; margin: 36px auto 0; grid-column: 1 / -1; } .scroll-cue .txt { display: none; } } /* botão fixo "Topo" (todas as páginas; fica acima do WhatsApp quando ele existe) */ .to-top { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: 56px; height: 56px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-decoration: none; color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 2px solid transparent; background: linear-gradient(#1a1918, #1a1918) padding-box, var(--gradient-diag) border-box; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease), background .25s; } .to-top.has-wa { bottom: 84px; } .to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: -2px; } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover, .to-top:focus-visible, .to-top:active { background: var(--gradient-diag) border-box; color: #121110; } /* redes sociais */ .social { display: flex; gap: 12px; margin-top: 18px; } .soc { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--c); display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: background-color .25s, color .25s; } .soc svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; } .soc svg .f { fill: currentColor; stroke: none; } .soc:hover, .soc:focus-visible, .soc:active { background: var(--c); color: var(--on); } .light .soc { color: var(--graphite); } .menu-col .social { margin-top: 6px; justify-content: flex-start; } @media (max-width: 960px) { .menu-col .social { grid-column: 1 / -1; } } .site-foot .soc { color: #fff; } /* ===== v3 (05/10/2026): Especificação v3 FINAL, seção 15 ===== */ /* títulos de seção em pílula, no site todo */ .eyebrow { gap: 8px; padding: 6px 16px; border: 1.5px solid var(--amber); border-radius: 999px; color: var(--text); letter-spacing: .12em; font-size: .74rem; line-height: 1.3; } .eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-diag); } .light .eyebrow { color: var(--graphite); border-color: #D98A0A; } .hero .eyebrow { margin-bottom: 20px; } /* Home: Dois caminhos */ .big-path { font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.01em; margin: 6px 0 12px; color: var(--c); } .light .big-path { color: var(--graphite); } .path-sub { font-size: 1.12rem !important; font-weight: 600; color: inherit !important; margin-bottom: 10px; } /* Aulas: FlowOut Apps como benefício e Business */ .app-benefit { margin: -8px 0 22px !important; padding: 10px 14px; border-radius: 12px; border: 1.5px dashed var(--c); font-size: .9rem !important; color: var(--text) !important; } .light .app-benefit { color: var(--graphite) !important; } .app-benefit b { color: var(--c); } .business-row { margin-top: clamp(16px, 1.6vw, 24px); display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; } .business-row h3 { margin: 4px 0 8px; } .business-row .actions { margin-top: 0 !important; } @media (max-width: 860px) { .business-row { grid-template-columns: minmax(0, 1fr); } } .lesson-intro { margin: -8px 0 clamp(28px, 3.4vw, 48px); } .lesson-intro p { color: var(--muted); font-size: 1.04rem; } /* Cursos: a frase cresce */ .grow p { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 700; margin: 0 0 6px !important; color: #fff !important; } .grow .w1 { color: #45BABD; } .grow .w2 { color: #F7A71C; } .grow p.done { color: #FF47C6 !important; font-weight: 800; } .grow .goal { display: inline-block; margin-top: 12px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FF47C6; border: 1.5px solid #FF47C6; border-radius: 999px; padding: 4px 12px; } .light .syllabus .card { background: #fff; } .light .syllabus .num { font-size: clamp(2.6rem, 3.6vw, 3.4rem); background: linear-gradient(135deg, var(--c) 0%, color-mix(in srgb, var(--c) 55%, #ffffff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .light .syllabus span { color: var(--lmuted); } .incl .card { padding: 20px 20px; } .incl h3 { font-size: 1.02rem; margin-bottom: 6px; } .incl p { font-size: .9rem !important; } /* Apps: nome do produto, layout 75/25 com Novidades */ .product { display: block; font-size: clamp(3rem, 8vw, 6.4rem); line-height: .95; letter-spacing: -.02em; } .apps-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 48px); align-items: start; } .news { position: sticky; top: 24px; } .news-in { border: 1.5px solid var(--line); border-radius: var(--r); padding: 20px 18px; background: var(--surface); max-height: calc(100vh - 48px); overflow: auto; } .news-list h4 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; } .news-list h4:first-child { margin-top: 4px; } .news-item { padding: 12px 0; border-top: 1px solid var(--line); } .news-item .nt { display: block; font-weight: 700; font-size: .98rem; line-height: 1.35; text-decoration: none; color: var(--text); transition: color .2s ease; } a.nt:hover, a.nt:focus-visible { color: var(--amber); } .news-item .nb { margin: 6px 0 0; font-size: .88rem; color: var(--muted); } .news-item .na { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; } .news-item.locked .nt::before { content: "🔒 "; } .news-item .lk { margin: 8px 0 0; font-size: .84rem; color: var(--muted); } .news-item .lk a { color: var(--amber); font-weight: 700; } .apps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .como { margin-bottom: 26px; } .como .card h3 { font-size: 1.02rem; } .como .card p { font-size: .9rem; } .flag { font-size: 1.05em; } @media (max-width: 1180px) { .apps-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 960px) { .apps-layout { grid-template-columns: minmax(0, 1fr); } .news { position: static; } .news-in { max-height: none; } } /* Apps: planos */ .tiers { align-items: stretch; } .tier { padding-top: 26px; } .tier .who { font-size: 1.5rem !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 800; color: var(--graphite) !important; } .tier .price { margin: 8px 0 2px !important; display: flex; align-items: baseline; gap: 4px; color: var(--graphite) !important; } .tier .price .cur { font-weight: 700; font-size: 1rem; } .tier .price .val { font-weight: 800; font-size: clamp(2.2rem, 3vw, 2.8rem); line-height: 1; } .tier .price .per { font-size: .9rem; color: var(--lmuted); } .tier .fl { font-size: .86rem !important; margin-bottom: 12px !important; } .tier .ai { font-size: .9rem !important; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, #ffffff); color: var(--graphite) !important; margin-bottom: 16px !important; } .tier .ai.off { background: #EEF0F2; color: var(--lmuted) !important; } .tier.is-pop { border-width: 3px; box-shadow: 0 24px 50px -28px rgba(217,138,10,.6); } .pop { position: absolute; top: 0; right: 18px; transform: translateY(-1px); background: var(--amber); color: #121110; font-size: .66rem; font-weight: 800; letter-spacing: .12em; padding: 5px 12px; border-radius: 0 0 10px 10px; } .tier-note { margin-top: 18px; } .light .business-row { background: #fff; } .caps { text-transform: uppercase; } /* Sugestões */ .sug-split { align-items: start; } .sug-form { display: grid; gap: 14px; } .sug-form label { display: grid; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--muted); } .sug-form select, .sug-form input, .sug-form textarea { font: inherit; font-size: .98rem; color: var(--text); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; width: 100%; min-width: 0; } .sug-form textarea { resize: vertical; min-height: 120px; } .sug-form select:focus, .sug-form input:focus, .sug-form textarea:focus { outline: none; border-color: var(--amber); } .sug-form .f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sug-form .btn { margin-top: 4px; } .sug-msg { margin: 0; font-size: .92rem; min-height: 1.4em; } .sug-msg.ok { color: var(--teal); } .sug-msg.err { color: #FF8A6B; } @media (max-width: 600px) { .sug-form .f2 { grid-template-columns: minmax(0, 1fr); } } .apps-layout .apps-2 { grid-template-columns: minmax(0, 1fr); } .apps-layout .appcard { grid-template-columns: minmax(0, 1fr) minmax(180px, 230px); } .como { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .como { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apps-layout .appcard { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .como { grid-template-columns: minmax(0, 1fr); } } .flag svg { width: 1.6em; height: 1.05em; vertical-align: -.18em; border-radius: 2px; margin-left: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); } /* ===== Versão clara / escura (botão no canto; padrão: clara) — 05/10/2026 ===== */ html[data-theme="light"] .hero { --bg: #F2F3F5; --bg2: #E8EAEE; --surface: #FFFFFF; --deep: #E3E5EA; --text: #2A2B2E; --muted: #55575C; --faint: #6B6E74; --line: #DADCE0; color-scheme: light; background: var(--bg); color: var(--text); } html[data-theme="light"] .hero .g { background-image: var(--gradient-light); } html[data-theme="light"] .hero .mbtn { background: rgba(255,255,255,.72); } html[data-theme="light"] .hero .mbtn:hover, html[data-theme="light"] .hero .mbtn:focus-visible, html[data-theme="light"] .hero .mbtn:active, html[data-theme="light"] .hero .mbtn[aria-current="page"] { background: var(--c); color: var(--on); } html[data-theme="light"] .hero .mbtn.wa { background: linear-gradient(#fff, #fff) padding-box, var(--gradient-diag) border-box; } html[data-theme="light"] .hero .mbtn.wa:hover, html[data-theme="light"] .hero .mbtn.wa:focus-visible { background: var(--gradient-diag) border-box; color: #fff; } html[data-theme="light"] .hero .scroll-cue svg { stroke: var(--text); } html[data-theme="light"] .hero .scroll-cue:hover, html[data-theme="light"] .hero .scroll-cue:focus-visible { color: var(--text); } html[data-theme="light"] .hero .scroll-cue:hover svg, html[data-theme="light"] .hero .scroll-cue:focus-visible svg { stroke: #fff; } html[data-theme="light"] .hero .btn.grad-b { background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient-diag) border-box; } html[data-theme="light"] .hero .btn.grad-b:hover, html[data-theme="light"] .hero .btn.grad-b:focus-visible { background: var(--gradient-diag) border-box; color: #fff; } /* botão de tema */ .theme-tg { position: absolute; top: 14px; right: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 2px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient-diag) border-box; color: var(--text); font: 700 .74rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px -12px rgba(0,0,0,.45); transition: transform .2s var(--ease); } .theme-tg:hover, .theme-tg:focus-visible { transform: translateY(-2px); background: var(--gradient-diag) border-box; color: #fff; } .theme-tg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-tg .to-dark, .theme-tg .to-light { display: none; align-items: center; gap: 8px; } html[data-theme="light"] .theme-tg .to-dark, html:not([data-theme="light"]) .theme-tg .to-light { display: inline-flex; } @media (max-width: 600px) { .theme-tg { top: 12px; right: 12px; } } /* Frase do hero: texto sob o logo, não parece botão */ .hero .eyebrow { border: 0; padding: 0; border-radius: 0; font-size: clamp(.82rem, 1.1vw, 1rem); letter-spacing: .16em; color: var(--text); } .hero .eyebrow::before { width: 28px; height: 3px; border-radius: 3px; } /* Títulos de seção (pílula) com fundo cheio na cor da borda */ .eyebrow, .light .eyebrow { background: var(--amber); border-color: var(--amber); color: #121110; } .eyebrow::before { background: #121110; } .hero .eyebrow { background: none; color: var(--text); } .hero .eyebrow::before { background: var(--gradient-diag); } /* Rótulo acima de OUÇA · GRAVE · COMPARE */ .seq-label { margin: 26px 0 0; font-weight: 700; font-size: .95rem; } .seq-label + .flow-seq { margin-top: 12px; } /* Botão "Conhecer as apps" ao lado do celular, 25% sobre ele */ .phone-wrap { position: relative; width: fit-content; margin: 0 auto; } .phone-wrap .phone { margin: 0; } .btn.phone-cta { position: absolute; top: 50%; left: 0; transform: translate(-75%, -50%); z-index: 3; background: var(--amber); border-color: var(--amber); color: #121110; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); } .btn.phone-cta:hover, .btn.phone-cta:focus-visible { background: #ffbb3d; border-color: #ffbb3d; color: #121110; transform: translate(-75%, calc(-50% - 2px)); } @media (max-width: 960px) { .btn.phone-cta { top: auto; bottom: 0; left: 50%; transform: translate(-50%, 50%); } .btn.phone-cta:hover, .btn.phone-cta:focus-visible { transform: translate(-50%, calc(50% - 2px)); } .phone-wrap { margin-bottom: 30px; } } /* Pergunta final dentro do bloco de perguntas frequentes */ .faq-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: clamp(28px, 3vw, 44px); padding-top: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--line); } .faq-cta h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin: 0 0 6px; } .faq-cta p { margin: 0; max-width: 60ch; } /* Ondas animadas antes do rodapé */ .foot-wave { position: relative; height: clamp(90px, 12vw, 150px); background: var(--deep); isolation: isolate; overflow: hidden; } .foot-wave .wave { height: 100%; z-index: 0; opacity: .8; } .foot-wave + .site-foot { border-top: 0; } /* WhatsApp sempre visível, com o Topo em cima */ .wa-float { z-index: 56; } /* Navegação de cada seção: Voltar + Início */ .sec-nav { position: absolute; top: clamp(18px, 2.4vw, 32px); right: var(--gut); z-index: 3; display: flex; gap: 10px; } .sec-nav .to-home { position: static; } .to-back { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px 10px 12px; border-radius: 999px; border: 2px solid var(--violet); background: rgba(109,115,166,.12); color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 700; letter-spacing: .04em; transition: background-color .2s, color .2s; } .to-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .to-back:hover, .to-back:active, .to-back:focus-visible { background: var(--violet); color: #fff; } .light .to-back { color: var(--graphite); } /* Botão flutuante: logo = página inicial, MENU = abre o menu */ .fab { gap: 0; padding: 0; overflow: hidden; } .fab-home { display: flex; align-items: center; padding: 10px 10px 10px 12px; border-right: 1px solid rgba(255,255,255,.18); } .fab-home:hover, .fab-home:focus-visible { background: rgba(255,255,255,.08); } .fab-menu { all: unset; cursor: pointer; padding: 10px 18px 10px 12px; color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .1em; } .fab-menu:hover, .fab-menu:focus-visible { background: rgba(255,255,255,.08); } @media (max-width: 600px) { .sec-nav { top: 10px; gap: 8px; } .to-back, .sec-nav .to-home { padding: 6px 13px 6px 10px; font-size: .8rem; } .to-back svg, .sec-nav .to-home svg { width: 15px; height: 15px; } } /* Apps: idioma grande, botão Testar o app grande e cheio */ .tag.app-lang { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(1.5rem, 2.85vw, 2.7rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.06; margin-bottom: 14px; padding-bottom: 8px; border-bottom-width: 3px; } .tag.app-lang .flag svg { width: 1.2em; height: auto; } .app-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 14px 30px; border-radius: 999px; background: var(--c); color: var(--on); font-size: clamp(1.25rem, 1.7vw, 1.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); transition: transform .2s var(--ease), filter .2s; } .app-cta:hover, .app-cta:focus-visible { transform: translateY(-2px); filter: brightness(1.1); } .como .como-cta { background: var(--amber); border-color: var(--amber); color: #121110; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .como .como-cta .cta-t { font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 800; text-transform: uppercase; line-height: 1.05; margin: 0 0 4px; color: #121110; } .como .como-cta a { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-radius: 999px; background: #121110; color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; } .como .como-cta a:hover, .como .como-cta a:focus-visible { background: #2a2826; } /* Botão Admin no menu (área da equipe) */ .admin-link { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; } .admin-link:hover, .admin-link:focus-visible { border-color: var(--teal); color: var(--text); background: rgba(69,186,189,.12); } .aluno-main .app-cta { margin-top: 14px; } /* ---------- conversão (v12): botão principal preenchido, frase embaixo do botão, barra no celular, prova social ---------- */ .btn.fill { background: var(--c); color: var(--on); } .btn.fill:hover, .btn.fill:focus-visible { filter: brightness(1.08); } .btn.grad-b.fill, .section.alt .btn.grad-b.fill, .light .btn.grad-b.fill, html[data-theme="light"] .hero .btn.grad-b.fill { background: var(--gradient-diag) border-box; color: #121110; } .cta-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; } .cta-note { font-size: .8rem; color: var(--faint); padding-left: 6px; line-height: 1.3; } .light .cta-note { color: #5b5753; } .card .cta-stack { width: 100%; } @media (max-width: 560px) { .hero .cta-stack, .hero .cta-stack .btn { width: 100%; } .cta-note { padding-left: 0; } } .m-bar { display: none; } @media (max-width: 760px) { .m-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(18,17,16,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.12); transform: translateY(110%); transition: transform .3s var(--ease); } .m-bar.show { transform: none; } .m-bar .btn { flex: 1 1 0; min-height: 46px; padding: 8px 12px; font-size: .9rem; color: #fff; } .m-bar .btn.fill { color: var(--on); } .m-bar .btn svg { display: none; } .m-bar .btn { white-space: nowrap; } body.has-mbar .wa-float { bottom: 84px; } body.has-mbar .to-top.has-wa { bottom: 152px; } body.has-mbar .to-top:not(.has-wa) { bottom: 84px; } .wa-float, .to-top { transition: opacity .3s, transform .3s var(--ease), bottom .3s var(--ease), background .25s; } } .proof .stat .num { margin-bottom: 8px; } .depo-wrap { position: relative; margin-top: clamp(20px, 2vw, 32px); } .depo-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px; scrollbar-width: thin; overscroll-behavior-x: contain; } .depo-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 12px; } .depo { --c: var(--teal); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 26px 24px 22px; border-radius: 22px; border: 1.5px solid var(--c); background: var(--bg2); } .light .depo { background: #fff; } .depo blockquote { margin: 0; font-size: 1rem; line-height: 1.6; } .depo blockquote::before { content: "\201C"; display: block; font-size: 3.2rem; line-height: .55; font-weight: 800; color: var(--c); margin-bottom: 4px; } .depo figcaption { display: flex; align-items: center; gap: 14px; } .depo img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--c); } .depo b { display: block; font-size: .98rem; } .depo small { display: block; color: var(--faint); font-size: .82rem; line-height: 1.35; } .light .depo small { color: #6b6762; } .depo-nav { display: flex; justify-content: flex-start; gap: 10px; margin-top: 6px; } .depo-nav button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; } .light .depo-nav button { border-color: #d6d2cc; } .depo-nav button:hover { border-color: var(--teal); color: var(--teal); } @media (max-width: 960px) { .depo-row { grid-auto-columns: 72%; } } @media (max-width: 560px) { .depo-row { grid-auto-columns: 86%; gap: 14px; } .depo-nav { display: none; } } @media (max-width: 760px) { .proof .grid.g3.proof-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .proof .proof-nums .stat { padding: 16px 12px; } .proof .proof-nums .stat .num { font-size: 2.1rem; margin-bottom: 6px; } .proof .proof-nums .stat p { font-size: .74rem; line-height: 1.3; } .proof .proof-nums .dots { display: none; } } .proof-emp { margin: clamp(16px,1.6vw,22px) 0 0; max-width: 70ch; color: var(--muted); } .light .proof-emp { color: #57534e; } /* Sou aluno: caixa das apps em destaque (verde-água da paleta) */ .card.aluno-apps { background: var(--teal); border-color: var(--teal); color: #121110; } .card.aluno-apps h3 { color: #121110; font-size: clamp(1.25rem, 1.8vw, 1.6rem); } .card.aluno-apps p { color: #1d3436; } .card.aluno-apps .dots { opacity: .35; } .app-btns { display: grid; gap: 10px; margin-top: 18px; } .app-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 999px; background: #121110; color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background-color .2s, transform .15s; } .app-btn:hover, .app-btn:focus-visible { background: #2a2826; } .app-btn:active { transform: scale(.98); } .app-btn .fl { width: 30px; height: 20px; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.25); } .app-btn span:nth-of-type(1) { flex: 1 1 auto; min-width: 0; } /* Menu: botão "Sou aluno" em destaque, diferente dos outros */ .menu-col .mbtn.aluno-btn { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px; border: 0 !important; border-radius: 16px; background: linear-gradient(120deg, #972B8A 0%, #CC6F4E 60%, #F7A71C 100%) !important; color: #fff !important; box-shadow: 0 12px 26px -12px rgba(151,43,138,.7); text-decoration: none; } .menu-col .mbtn.aluno-btn:hover, .menu-col .mbtn.aluno-btn:focus-visible { filter: brightness(1.07); transform: translateY(-1px); } .menu-col .mbtn.aluno-btn .ab-ico { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; } .menu-col .mbtn.aluno-btn .ab-ico svg { width: 24px; height: 24px; fill: #fff; } .menu-col .mbtn.aluno-btn .ab-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .menu-col .mbtn.aluno-btn b { font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; } .menu-col .mbtn.aluno-btn small { font-size: .78rem; opacity: .92; font-weight: 500; } .menu-col .mbtn.aluno-btn .arr, .menu-col .mbtn.aluno-btn b, .menu-col .mbtn.aluno-btn small { color: #fff !important; } /* ===== Área do aluno (painel /aluno/ e Minha conta) — mesmo sistema de tema do site (html[data-theme]) ===== */ html[data-theme="light"] .section.hub { background: var(--light); color: var(--graphite); --text: var(--graphite); --muted: var(--lmuted); --line: var(--lline); --surface: var(--light-card); } html[data-theme="light"] .section.hub .btn { color: var(--graphite); } html[data-theme="light"] .section.hub .btn.fill { color: var(--on); } html[data-theme="light"] .section.hub .to-home { color: var(--graphite); border-color: #2f9396; } html[data-theme="light"] .section.hub .sug-form select, html[data-theme="light"] .section.hub .sug-form input { background: #fff; color: var(--graphite); } .hub-name { overflow-wrap: anywhere; } .hub-user { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .hub-user[hidden] { display: none; } .hub-langs { display: inline-flex; gap: 4px; padding: 4px; border: 1.5px solid var(--line); border-radius: 999px; } .hub-langs button { font: inherit; font-size: .85rem; font-weight: 600; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; } .hub-langs button[aria-pressed="true"] { background: var(--teal); color: #121110; } .hub-link { font: inherit; font-weight: 600; font-size: .95rem; color: inherit; background: none; border: 0; padding: 8px 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; } .hub-login { max-width: 520px; margin-inline: auto; } .hub-form h3 { margin-bottom: 4px; } .hub-form .small { font-size: .85rem; } .hub-train { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .hub-train legend { font-weight: 600; font-size: .92rem; margin-bottom: 8px; padding: 0; } .hub-train .opt { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; } .hub-train .opt input { width: auto !important; accent-color: var(--teal); } .hub-train .opt:has(input:checked) { border-color: var(--teal); } .hub .fl, .hub-user .fl { width: 30px; height: 20px; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(127,127,127,.35); } .hub-block + .hub-block { margin-top: clamp(32px, 4vw, 56px); } #hubTrainBox + .hub-block { margin-top: clamp(24px, 3vw, 40px); } .hub-h { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 18px; } .hub-app { display: flex; flex-direction: column; } .hub-app .actions { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; } .hub-app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .hub-app-top .fl { width: 42px; height: 28px; border-radius: 4px; } .hub-tier { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .hub-tier small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .hub-tier b { font-size: 1.25rem; color: var(--c); } html[data-theme="light"] .hub-tier b { color: var(--graphite); } .hub-mk[hidden] { display: none; } .hub-trainq h3 { margin-bottom: 16px; } .hub-train-btns { display: flex; flex-wrap: wrap; gap: 10px; } .hub-train-btns .btn { min-height: 48px; padding: 10px 20px; } .hub-news { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .hub-news-item { border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px 20px; background: var(--surface); } .hub-news-item h3 { font-size: 1.05rem; margin-bottom: 6px; } .hub-news-item p { color: var(--muted); font-size: .93rem; margin-bottom: 8px; } .hub-news-item a { font-weight: 700; color: inherit; } .hub-help { margin-top: clamp(32px, 4vw, 48px); } .hub-help a { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-weight: 600; min-height: 44px; } .hub-help svg { width: 22px; height: 22px; fill: currentColor; } .hub-acc-wrap { max-width: 760px; } .hub-dl { margin: 0; display: grid; gap: 0; } .hub-dl > div { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--line); align-items: center; } .hub-dl > div:first-child { border-top: 0; padding-top: 0; } .hub-dl dt { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .hub-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 8px; } .hub-edit { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } .hub-edit input { font: inherit; flex: 1 1 180px; min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); } .hub-edit .btn { min-height: 44px; padding: 8px 18px; } .hub-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--c); font-weight: 600; font-size: .9rem; } .hub-pill .fl { width: 24px; height: 16px; } .hub-fix { margin: 18px 0 0; } .hub-fix a { color: inherit; font-weight: 700; } .hub-acc-wrap > .actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 600px) { .hub-dl > div { grid-template-columns: 1fr; gap: 6px; } .hub-app .actions .btn, .hub-mk .actions .btn, .hub-acc .actions .btn { flex: 1 1 100%; } .hub-user { gap: 8px 14px; } } #hubGo[hidden]{display:none} /* Minha conta: painel no meio do topo (texto · painel · menu); margem esquerda pela metade */ /* com o painel aberto, a margem esquerda do topo fica só 25% menor (15vw → 11,25vw; 9vw → 6,75vw); tamanhos não mudam */ @media (min-width: 1100px) { :is(.acc-page, .hub-open) .hero .wrap.hero-grid { padding-left: 11.25vw; } } @media (min-width: 961px) and (max-width: 1099px) { :is(.acc-page, .hub-open) .hero .wrap.hero-grid { padding-left: 6.75vw; } } :is(.acc-page, .hub-open) .hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(250px, 330px); gap: clamp(24px, 3vw, 56px); } :is(.acc-page, .hub-open) .hero-main { align-self: center; } .acc-page .hub-user .hub-link[href="/aluno/conta/"] { display: none; } :is(.acc-page, .hub-open) .scroll-cue { display: none; } .acc-mid { position: relative; z-index: 2; min-width: 0; } .acc-mid .hub-accard { padding: clamp(20px, 2vw, 28px); } .acc-mid .hub-fix { margin-top: 14px; font-size: .92rem; } .acc-mid .actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; } .acc-mid .actions .btn { min-height: 46px; padding: 10px 22px; } .acc-mid .hub-dl > div { grid-template-columns: minmax(110px, 30%) 1fr; padding: 12px 0; } .acc-name { font-size: 1.15rem; font-weight: 800; } html[data-theme="light"] .hero .acc-name { background-image: var(--gradient-light); } .acc-lang { display: inline-flex; align-items: center; gap: 10px; } .acc-lang + .acc-lang { margin-left: 14px; } .acc-lang .fl { width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(127,127,127,.35); } .acc-tiles { display: flex; flex-wrap: wrap; gap: 32px; } .acc-app { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; } .acc-app small { font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; } .acc-tile { display: grid; place-items: center; width: 82px; height: 72px; border-radius: 10px; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease; } .acc-tile:hover, .acc-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); } .acc-tile .fl { width: 54px; height: 36px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(127,127,127,.35); } .acc-tile-en { background: #3a3937; border: 1.5px solid #F7A71C; } .acc-tile-es { background: #E9F5F6; border: 1.5px solid #45BABD; } .hub-edit input { background: #fff; color: #2A2B2E; border-color: #972B8A; } html:not([data-theme="light"]) .hub-edit input { background: #2a2826; color: #fff; border-color: rgba(255,255,255,.35); } @media (max-width: 1440px) { :is(.acc-page, .hub-open) .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); } .acc-mid { grid-column: 1; grid-row: 2; } :is(.acc-page, .hub-open) .hero .menu-col { grid-column: 2; grid-row: 1 / span 2; } } @media (max-width: 960px) { :is(.acc-page, .hub-open) .hero-grid { grid-template-columns: minmax(0, 1fr); } .acc-mid, :is(.acc-page, .hub-open) .hero .menu-col { grid-column: 1; grid-row: auto; } } @media (max-width: 480px) { .acc-tiles { grid-template-columns: minmax(0, 1fr); } .acc-mid .hub-dl > div { grid-template-columns: 1fr; } } /* Painel do aluno: tudo num painel só, no meio do topo */ .painel-page .hub-user .hub-link[href="/aluno/conta/"] { display: inline-flex; } .acc-up { font-size: .78rem; font-weight: 700; color: inherit; text-underline-offset: 3px; min-height: 28px; display: inline-flex; align-items: center; } .acc-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; } .acc-sub { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .acc-txt { font-weight: 500; font-size: .95rem; color: var(--muted); } .acc-btn { min-height: 44px !important; padding: 8px 20px !important; font-size: .92rem; } .acc-news { display: block; font-size: .93rem; } .acc-news a { color: inherit; font-weight: 700; } .acc-mid .hub-trainq { padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .acc-mid .hub-trainq h3 { font-size: 1.05rem; margin-bottom: 12px; } .acc-mid .hub-form h3 { font-size: 1.25rem; } .acc-mid .hub-form .btn { width: 100%; } /* painel do aluno aberto pelo botão SOU ALUNO (em qualquer página) */ .hub-pop { animation: hubIn .35s var(--ease, ease) both; } @keyframes hubIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hub-pop { animation: none; } } .hub-phead { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .hub-phead[hidden] { display: none; } .hub-hello { margin: 0; font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; letter-spacing: -.01em; } .hub-hello .ta { color: var(--text); } html[data-theme="light"] .hero .hub-hello .g { background-image: var(--gradient-light); } .hub-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; } .acc-mid .hub-accard { position: relative; } .hub-open .aluno-btn { outline: 3px solid color-mix(in srgb, #972B8A 45%, transparent); outline-offset: 2px; } /* com o painel aberto, o título da página quebra linha (mesmo tamanho) em vez de passar por baixo do painel */ .hub-open .hero h1 .ta, .hub-open .hero h1 .g { white-space: normal; width: auto; } .hub-open .hero-main { min-width: 0; overflow-wrap: break-word; } /* Celular: título das seções 5% menor */ @media (max-width: 600px) { .section .sec-head h2, .section .eyebrow + h2 { font-size: 1.425rem; } } /* Painel do aluno v2: bandeiras de idioma, "Hoje quero treinar", quadrados de Reposições e Dashboard */ .hub-flags { position: absolute; top: 20px; right: 62px; z-index: 3; display: flex; align-items: center; gap: 4px; } .hub-flags[hidden] { display: none; } .acc-page .hub-flags { position: static; margin-bottom: 6px; } .hub-flags button { line-height: 0; padding: 3px; border: 1.5px solid transparent; border-radius: 6px; background: none; cursor: pointer; opacity: .5; transition: opacity .15s ease; } .hub-flags button:hover, .hub-flags button:focus-visible { opacity: 1; } .hub-flags button[aria-pressed="true"] { opacity: 1; border-color: var(--teal); } .hub-flags .fl { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(127,127,127,.35); } .acc-mid .hub-hello { padding-right: 150px; } .hub-trainp { margin-top: 16px; padding: 16px 18px 14px; border-radius: 14px; background: rgba(255,255,255,.07); } html[data-theme="light"] .hero .hub-trainp { background: #E9EBEF; } .hub-train-t { margin: 0 0 14px; font-size: .95rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .hub-train-t .ta { color: var(--text); } html[data-theme="light"] .hero .hub-train-t .g { background-image: var(--gradient-light); } .hub-tt { display: flex; flex-wrap: wrap; gap: 28px; } .hub-ttile { width: 116px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .hub-ttile b { font-size: .95rem; font-weight: 800; line-height: 1; } .acc-tile-es .g { background-image: var(--gradient-light); } .hub-sqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .hub-sq { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 84px; padding: 14px 16px; border: 1.5px solid var(--c); border-radius: 14px; background: color-mix(in srgb, var(--c) 12%, transparent); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease; } .hub-sq:hover, .hub-sq:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); } .hub-sq b { font-size: 1.02rem; font-weight: 800; } .hub-sq small { font-size: .8rem; color: var(--muted); font-weight: 600; } .hub-newsl { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; } .hub-newsl[hidden] { display: none; } @media (max-width: 480px) { .hub-sqs { grid-template-columns: 1fr; } .hub-tt { gap: 18px; } } .hub-ttile.acc-tile-en b.g { background-image: linear-gradient(90deg, #45BABD, #6D73A6, #972B8A, #CC6F4E, #F7A71C) !important; } /* Dashboard do aluno (exemplo) */ .dash { display: flex; flex-direction: column; gap: 18px; } .dash-banner { padding: 12px 16px; border-radius: 12px; border: 1.5px dashed var(--amber); font-size: .92rem; } .dash-banner b { background: var(--amber); color: #121110; padding: 2px 8px; border-radius: 6px; margin-right: 8px; letter-spacing: .08em; font-size: .78rem; } .dash-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; } .dash-hello { margin: 0 0 10px; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 800; line-height: 1.1; } .dash-chips, .dash-actions, .dash-acc-actions { display: flex; flex-wrap: wrap; gap: 8px; } .dash-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1.5px solid var(--c); font-size: .8rem; font-weight: 700; white-space: nowrap; } .dash-chip .fl { width: 20px; height: 13px; border-radius: 2px; } .dash-kpis { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .card.dash-kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; } .dash-kpi small, .dash-sub { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .dash-kpi b { font-size: 1.25rem; line-height: 1.2; } .dash-kpi span:not(.dots) { color: var(--muted); font-size: .9rem; } .dash-link { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: .9rem; color: inherit; } .dash-grid { display: grid; gap: 14px; } .dash-grid.g2a { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .dash-grid.g2b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dash h3 { font-size: 1.15rem; margin-bottom: 8px; } .dash-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; padding-right: 56px; } .dash-h h3 { margin: 0; } .dash-note { color: var(--muted); font-size: .86rem; margin: 6px 0 12px; } .dash-legend { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); } .dash-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-left: 6px; } .dash-legend i.prev, .dash-bar.prev { background: color-mix(in srgb, var(--muted) 45%, transparent); } .dash-legend i.now, .dash-bar.now { background: var(--teal); } .dash-skill { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; margin: 10px 0; } .dash-skill-n { font-weight: 700; font-size: .92rem; } .dash-track { display: flex; flex-direction: column; gap: 3px; } .dash-bar { display: flex; align-items: center; justify-content: flex-end; height: 12px; border-radius: 0 4px 4px 0; min-width: 18px; } .dash-bar i { font-style: normal; font-size: .68rem; font-weight: 800; padding-right: 4px; color: #121110; } .dash-bar.prev i { color: var(--text); } .dash-focus { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--teal) 12%, transparent); } .dash-focus small { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .dash-focus p { margin: 4px 0 0; color: inherit !important; font-size: .95rem; } .dash-quote { margin: 8px 0 10px; font-size: 1.02rem; line-height: 1.5; } .dash-sign { font-weight: 700; color: var(--muted); font-size: .88rem; } .dash-list { list-style: none; margin: 0 0 10px; padding: 0; } .dash-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .93rem; } .dash-list li:first-child { border-top: 0; } .dash-list li > span:first-child { display: flex; flex-direction: column; min-width: 0; } .dash-list small { color: var(--muted); font-size: .8rem; } .dash-list a { color: inherit; font-weight: 700; font-size: .85rem; } .dash-mat li > span:last-child { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .dash-acc li > span:last-child { display: inline-flex; align-items: center; gap: 6px; text-align: right; } .dash-acc .fl { width: 20px; height: 13px; border-radius: 2px; vertical-align: -2px; margin-right: 4px; } .dash-apps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 10px; } .dash-prog { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 10px 0; font-size: .9rem; } .dash-ptrack { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; } .dash-pfill { display: block; height: 100%; border-radius: 999px; background: var(--c); } .dash-week { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; height: 120px; margin-top: 10px; } .dash-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .dash-colbar { width: 100%; max-width: 26px; background: var(--teal); border-radius: 4px 4px 0 0; } .dash-col small { font-size: .72rem; color: var(--muted); font-weight: 700; } .dash-goal { font-weight: 700; font-size: 1rem; color: inherit !important; } .dash-steps { list-style: none; padding: 0; margin: 10px 0; } .dash-steps li { position: relative; padding: 6px 0 6px 28px; font-size: .92rem; } .dash-steps li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); } .dash-steps li.ok::before { background: var(--teal); border-color: var(--teal); } .dash-acc-actions { margin-top: 8px; } .dash-acc-actions .btn, .dash-actions .btn { min-height: 44px; padding: 8px 18px; font-size: .9rem; } @media (max-width: 1000px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid.g2a, .dash-grid.g2b { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .dash-kpis { grid-template-columns: minmax(0, 1fr); } .dash-apps { grid-template-columns: minmax(0, 1fr); } } /* Diagnóstico para RH */ .diag { --d-ok: #12A4A9; --d-trava: #CC7F0A; --d-evita: #BA4FAC; max-width: 1100px; } html[data-theme="light"] .diag, .light .diag { --d-ok: #0E979C; --d-trava: #C27A06; --d-evita: #972B8A; } .diag-step { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .diag-ctx { margin-bottom: 34px; display: grid; gap: 18px; } .diag-q { border: 0; margin: 0; padding: 0; } .diag-q legend { font-weight: 700; margin-bottom: 10px; padding: 0; } .diag-opts { display: flex; flex-wrap: wrap; gap: 8px; } .diag-opt { font: inherit; font-size: .9rem; font-weight: 600; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; } .diag-opt:hover { border-color: var(--teal); } .diag-opt[aria-pressed="true"] { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 18%, var(--surface)); } .diag-opt.diag-ok[aria-pressed="true"] { border-color: var(--d-ok); background: color-mix(in srgb, var(--d-ok) 22%, var(--surface)); } .diag-opt.diag-trava[aria-pressed="true"] { border-color: var(--d-trava); background: color-mix(in srgb, var(--d-trava) 22%, var(--surface)); } .diag-opt.diag-evita[aria-pressed="true"] { border-color: var(--d-evita); background: color-mix(in srgb, var(--d-evita) 22%, var(--surface)); } .diag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .diag-item { padding: 16px 18px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--surface); } .diag-item.done { border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); } .diag-item-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .diag-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gradient-diag); color: #121110; font-weight: 800; font-size: .9rem; } .diag-item-h b { font-size: 1.02rem; } .diag-bar { position: sticky; bottom: 12px; z-index: 5; margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); box-shadow: 0 16px 40px -20px rgba(0,0,0,.5); } .diag-prog { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; font-weight: 700; font-size: .9rem; } .diag-ptrack { flex: 1; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 25%, transparent); overflow: hidden; } .diag-ptrack span { display: block; height: 100%; width: 0; background: var(--gradient); transition: width .25s ease; } .diag-bar .btn[disabled] { opacity: .45; cursor: not-allowed; } .diag-res-top, .diag-rep-h { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; } .diag-h { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.08; margin-bottom: 12px; } .diag-lead { color: var(--muted); font-size: 1.05rem; max-width: 60ch; } .diag-chart { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; } .diag-donut { width: 210px; height: 210px; } .dn { fill: none; stroke-width: 26; } .dn-ok { stroke: var(--d-ok); } .dn-trava { stroke: var(--d-trava); } .dn-evita { stroke: var(--d-evita); } .dn-big { text-anchor: middle; font-size: 38px; font-weight: 800; fill: currentColor; } .dn-of { font-size: 18px; font-weight: 700; fill: var(--muted); } .dn-lbl { text-anchor: middle; font-size: 12px; font-weight: 700; letter-spacing: .08em; fill: var(--muted); text-transform: uppercase; } .diag-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .diag-legend li { display: flex; align-items: center; gap: 10px; font-weight: 600; } .diag-legend i { width: 14px; height: 14px; border-radius: 4px; } .diag-legend b { margin-left: auto; padding-left: 14px; font-size: 1.1rem; } .lg-ok { background: var(--d-ok); } .lg-trava { background: var(--d-trava); } .lg-evita { background: var(--d-evita); } .diag-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 30px 0; } .diag-bignum { padding: 18px 20px; border-radius: var(--r); border: 1.5px solid var(--c); background: var(--surface); } .diag-bignum .num, .diag-mod-n .num { display: block; font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 800; line-height: 1; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .diag-bignum .num, .light .diag-bignum .num, .light .diag-mod-n .num { background-image: var(--gradient-light); } .diag-bignum p { margin: 8px 0 0; color: var(--muted); } .diag-bignum p b { color: var(--text); } .diag-sub { margin: 10px 0 14px; font-size: 1.25rem; } .diag-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .card.diag-mod { display: flex; flex-direction: column; gap: 4px; padding: 18px; } .diag-mod small { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .diag-mod > b { font-size: 1rem; line-height: 1.25; padding-right: 40px; } .diag-mod-pt { font-size: .85rem; color: var(--muted); } .diag-mod-n { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 6px; } .diag-mod-n .num { display: inline; font-size: 2.6rem; } .diag-mod-n > span:last-child { color: var(--muted); font-weight: 700; font-size: .85rem; } .diag-mod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .86rem; } .diag-mod li { display: flex; flex-direction: column; gap: 3px; } .st { align-self: flex-start; display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: #121110; } .st-ok { background: var(--d-ok); } .st-trava { background: var(--d-trava); } .st-evita { background: var(--d-evita); color: #fff; } .diag-form-box { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; padding: clamp(20px, 3vw, 34px); border-radius: var(--r); border: 1.5px solid var(--amber); background: var(--surface); } .diag-form-box h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 10px; } .diag-form-box p { color: var(--muted); } .diag-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .diag-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; } .diag-form input:not([type=checkbox]), .diag-form select { font: inherit; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); } .diag-form .diag-consent { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; font-size: .86rem; color: var(--muted); } .diag-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal); } .diag-consent a { color: inherit; font-weight: 700; } .diag-form .btn, .diag-form .sug-msg { grid-column: 1 / -1; } .diag-again { margin-top: 18px; } .diag-rep-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; } .diag-rep-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .diag-rep-item { padding: 18px 20px; border-radius: var(--r); border: 1.5px solid var(--c); background: var(--surface); break-inside: avoid; } .diag-rep-t { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .diag-rep-t b { font-size: 1.05rem; } .diag-rep-item p { font-size: .93rem; margin: 0 0 8px; color: var(--muted); } .diag-rep-item p b { color: var(--text); } .diag-rep-item small { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .diag-rep-foot { margin-top: 26px; padding: 18px 20px; border-radius: var(--r); border: 1.5px dashed var(--line); } .diag-rep-foot p { margin: 0 0 6px; } .diag-promo { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 24px; align-items: end; } .diag-promo .sec-head { margin-bottom: 0; } .diag-hint { margin-top: 22px; text-align: center; font-weight: 600; } .diag-hint a { color: inherit; font-weight: 800; } @media (max-width: 1000px) { .diag-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .diag-res-top, .diag-rep-h, .diag-form-box, .diag-promo { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .diag-big, .diag-mods, .diag-rep-list, .diag-form { grid-template-columns: minmax(0, 1fr); } .diag-opt { flex: 1 1 100%; text-align: left; } .diag-ctx .diag-opt { flex: 0 1 auto; } } @media print { .diag-page header, .diag-page .hero, .diag-page footer, .diag-page .site-foot, .diag-page .foot-wave, .diag-page .fab, .diag-page .mbar, .diag-page .to-top, .diag-page .wa-float, .diag-page .sec-nav, .diag-page .to-home, .diag-rep-actions, .diag-again, .diag-page #hubTpl { display: none !important; } .diag-page .section { padding: 0 !important; background: #fff !important; color: #222 !important; } .diag { --d-ok: #0E979C; --d-trava: #C27A06; --d-evita: #972B8A; --muted: #555; --text: #222; --surface: #fff; --line: #ccc; } .diag-rep-list { grid-template-columns: 1fr 1fr; } .diag-rep-item { box-shadow: none; } .diag .g, .diag-h .g { -webkit-print-color-adjust: exact; print-color-adjust: exact; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .diag-bignum .num, .diag-mod-n .num { background-image: linear-gradient(135deg, #45BABD 0%, #6D73A6 35%, #972B8A 60%, #F7A71C 100%) !important; } .diag-bignum .num { display: inline-block; font-size: clamp(3.4rem, 6vw, 5rem); } .diag-mod-n .num { display: inline-block; } /* Painel do aluno v3: dashboard grande à esquerda dentro do painel das apps; botão explícito de cancelar aula */ .hub-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } .hub-dash { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 150px; padding: 18px 20px; border-radius: 14px; border: 1.5px solid var(--violet); background: var(--surface, #fff); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease; } html[data-theme="light"] .hero .hub-dash { background: #fff; } .hub-dash:hover, .hub-dash:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(0,0,0,.45); } .hub-dash-t { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.1; } .hub-dash-t .ta { color: var(--text); } html[data-theme="light"] .hero .hub-dash-t .g { background-image: var(--gradient-light); } .hub-dash small { font-size: .85rem; color: var(--muted); font-weight: 600; } .hub-dash-go { margin-top: 6px; font-weight: 800; font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; } .hub-apps-col .hub-tt { gap: 14px; } .hub-apps-col .hub-ttile { width: 100px; height: 88px; } .hub-cancel { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--magenta, #972B8A); background: color-mix(in srgb, #972B8A 10%, transparent); color: inherit; text-decoration: none; } .hub-cancel b { display: block; font-size: 1.02rem; } .hub-cancel small { display: block; font-size: .82rem; color: var(--muted); font-weight: 600; margin-top: 2px; } .hub-cancel-btn { flex: none; min-height: 44px !important; padding: 8px 22px !important; } .hub-cancel:hover .hub-cancel-btn { filter: brightness(1.06); } @media (max-width: 560px) { .hub-main { grid-template-columns: minmax(0, 1fr); } .hub-dash { min-height: 110px; } .hub-cancel { flex-direction: column; align-items: flex-start; } .hub-cancel-btn { width: 100%; } } /* v3.1: dashboard em amarelo vivo ocupando o espaço ao lado das apps */ .hub-main { grid-template-columns: auto minmax(0, 1fr); } .hub-dash, html[data-theme="light"] .hero .hub-dash { background: var(--amber); border-color: var(--amber); color: #121110; min-height: 0; } .hub-dash-t, .hub-dash small, .hub-dash-go { color: #121110; } .hub-dash-t { font-size: clamp(1.5rem, 2.4vw, 2rem); } .hub-dash small { opacity: .85; font-size: .95rem; } @media (max-width: 560px) { .hub-main { grid-template-columns: minmax(0, 1fr); } .hub-dash { min-height: 120px; } } /* v3.2: dashboard branco, título em degradê centralizado, borda em degradê, botão redondo Abrir; cancelar aula branco com borda e botão teal */ .hub-main { grid-template-columns: minmax(0, 1fr) auto; } .hub-dash, html[data-theme="light"] .hero .hub-dash { align-items: center; justify-content: center; text-align: center; gap: 16px; min-height: 160px; color: #121110; border: 2.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gradient-diag) border-box; } .hub-dash-t, .hero .hub-dash-t { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: #121110; } .hub-dash-t .ta { color: #121110; } .hub-dash-t .g, .hero .hub-dash-t .g, html[data-theme="light"] .hero .hub-dash-t .g { background-image: var(--gradient-light); -webkit-background-clip: text; background-clip: text; color: transparent; } .hub-dash-go { margin: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 28px; border-radius: 999px; background: var(--gradient-light); color: #fff; font-weight: 800; font-size: .95rem; text-decoration: none; letter-spacing: .02em; } .hub-dash:hover .hub-dash-go { filter: brightness(1.08); } .hub-cancel, html[data-theme="light"] .hero .hub-cancel { background: #fff; border: 2px solid var(--teal); color: #121110; } .hub-cancel b { color: #121110; } .hub-cancel small { color: #4a4a4a; } @media (max-width: 560px) { .hub-main { grid-template-columns: minmax(0, 1fr); } .hub-dash { min-height: 130px; } } /* dashboard real do aluno (/aluno/conta/), seção clara */ .dash-real .section.light .card { background: #fff; } .dash-real .dash-hello .ta { color: var(--graphite); } .dash-real .dash-list b { font-weight: 700; } .dash-real .dash-list .fl { width: 20px; height: 13px; border-radius: 2px; vertical-align: -1px; } .dash-real .dash-appscard .acc-tiles { display: flex; gap: 18px; margin: 6px 0 4px; } .dash-real .dash-link { font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 4px; } .dash-real .card h3 { margin: 0 0 10px; } .dash-real .card .dash-sub { margin: 14px 0 4px; } .dash-real .dash-acc-actions { margin-top: 8px; } .dash-soon { padding: 14px 18px; border-radius: 14px; border: 1.5px dashed var(--amber); font-size: .93rem; } .dash-soon b { display: inline-block; background: var(--amber); color: #121110; padding: 2px 10px; border-radius: 6px; letter-spacing: .06em; font-size: .78rem; text-transform: uppercase; } .dash-soon ul { margin: 8px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; } .dash-soon li { margin: 2px 0; } .dash-nosheet { padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--lline, #ddd); } @media (max-width: 700px) { .dash-soon ul { columns: 1; } .dash-real .dash-actions { width: 100%; } .dash-real .dash-actions .btn { flex: 1 1 auto; } } /* no dashboard o topo é curto (sem o menu grande) para o conteúdo aparecer logo */ .dash-real .hero { min-height: 0; padding-block: clamp(28px, 4vh, 44px) 56px; } .dash-real .hero .menu-col { display: none; } .dash-real .hero-grid { grid-template-columns: minmax(0, 1fr); } .dash-real .hero .logo-mid { max-width: 170px; } .dash-real .hero h1 { font-size: clamp(2rem, 4vw, 3rem); } .dash-real .hero h1 .g { display: inline; } .dash-real #dash { padding-top: 8px; } .dash-real #dash .wrap { padding-top: 64px; } /* relatório em PDF: fundo branco em todas as páginas, sem o grão nem o link de pular, logo no topo */ .diag-print-logo { display: none; } @media print { html, body, .diag-page main { background: #fff !important; } .diag-page .grain, .diag-page .skip, .diag-page .cursor-dot { display: none !important; } .diag-page .section::before, .diag-page .section::after, .diag-page .wrap::before, .diag-page .wrap::after { display: none !important; } .diag-print-logo { display: block; width: 150px; height: auto; margin: 0 0 14px; } .diag-rep-item { break-inside: avoid; } } /* dashboard: aulas com material (abre e fecha), calendário do mês, material por nível, redes */ .dash-list li.dash-acc-li { display: block; padding: 0; } .dash-acc-li summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; } .dash-acc-li summary::-webkit-details-marker { display: none; } .dash-acc-li summary > span:first-child { display: flex; flex-direction: column; min-width: 0; } .dash-acc-li summary > span:last-child { display: inline-flex; align-items: center; gap: 8px; } .dash-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 2px 0; transition: transform .2s; opacity: .7; } .dash-acc-li details[open] .dash-caret { transform: rotate(-135deg); margin-top: 4px; } .dash-acc-li summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; } .dash-files { list-style: none; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--teal) 9%, transparent); } .dash-files li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border: 0 !important; font-size: .9rem; } .dash-files a { word-break: break-word; } .dash-acc-li .dash-note { margin: 0 0 10px; } .dash-wide { grid-column: 1 / -1; } .cal-nav { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; } .cal-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--teal); background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; } .cal-nav button:disabled { opacity: .3; cursor: default; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 6px; } .cal-wd { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 2px; } .cal-d { min-height: 62px; border-radius: 8px; border: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 3px; font-size: .72rem; } .cal-empty { border: 0; } .cal-n { font-weight: 700; font-size: .8rem; } .cal-d.is-today { border: 2px solid var(--teal); } .cal-d.is-hol { background: color-mix(in srgb, #C27A06 14%, transparent); } .cal-ev { display: block; border-radius: 5px; padding: 1px 4px; font-style: normal; font-weight: 700; color: #fff; line-height: 1.35; } .ev-aula { background: #0E979C; } .ev-rep { background: #972B8A; } .ev-fer { background: #C27A06; } .ev-livre { background: repeating-linear-gradient(135deg, #8a8580 0 4px, #a8a39e 4px 8px); } .ev-canc { background: transparent; color: #B4532A; border: 1.5px solid #B4532A; text-decoration: line-through; } .cal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; font-size: .8rem; } .cal-legend li { display: inline-flex; align-items: center; gap: 6px; } .cal-legend .cal-ev { width: 14px; height: 10px; padding: 0; } .cal-notes { margin: 10px 0 0; padding-left: 18px; font-size: .85rem; color: var(--muted); } .lvl-filter { margin: 4px 0 8px; } .lvl-filter button { cursor: pointer; background: transparent; color: inherit; font-family: inherit; } .lvl-filter button.on { background: var(--teal); color: #121110; } .lvl-k { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .7rem !important; } .lvl-new { background: var(--amber); color: #121110; border-radius: 4px; padding: 0 5px; font-size: .68rem; letter-spacing: .04em; } .lvl-body { font-size: .85rem; color: var(--muted); white-space: pre-line; } .lvl-list li > span:last-child, .soc-list li > span:last-child { flex: none; } .soc-n { font-weight: 800; font-size: .7rem !important; letter-spacing: .06em; text-transform: uppercase; } .soc-instagram { color: #972B8A !important; } .soc-linkedin { color: #0E6F9C !important; } @media (max-width: 600px) { .cal-d { min-height: 44px; padding: 3px; } .cal-ev { height: 6px; padding: 0; } .cal-ev span { display: none; } .cal-legend .cal-ev { height: 10px; } } /* topo da home: dois cartões para escolher o caminho */ .hero-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 640px; } .hpath { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 44px 16px 18px; border-radius: 16px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease; } .hpath:hover, .hpath:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.5); } .hpath small { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c); } html[data-theme="light"] .hpath.c-teal small { color: #1f7f82; } html[data-theme="light"] .hpath.c-amber small { color: #A86500; } .hpath b { font-size: 1.15rem; line-height: 1.2; } .hpath span { font-size: .86rem; color: var(--muted); line-height: 1.4; } .hpath i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 800; font-size: 1.3rem; color: var(--c); } @media (max-width: 560px) { .hero-paths { grid-template-columns: minmax(0, 1fr); } } /* caso hod / Grupo hub */ .case { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .case-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } .case-quotes figure { margin: 0; padding: 18px; border-radius: 16px; border: 1.5px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 14px; } .case-quotes blockquote { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.45; } .case-quotes figcaption { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); } .case-quotes figcaption b { display: block; color: var(--text); } .case-quotes img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } @media (max-width: 860px) { .case, .case-quotes { grid-template-columns: minmax(0, 1fr); } } /* material gratuito */ .mat-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; } .mat-prev img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 50px -28px rgba(0,0,0,.45); border: 1px solid rgba(0,0,0,.08); } .mat-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .mat-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .92rem; } .mat-form input[type="text"], .mat-form input:not([type]), .mat-form input[type="email"] { padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--line); font: inherit; background: var(--surface); color: inherit; } .mat-perfil { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .mat-perfil legend { font-weight: 600; font-size: .92rem; margin-bottom: 4px; } .mat-perfil label, .mat-consent { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-weight: 400 !important; } .mat-consent { font-size: .82rem !important; } .mat-perfil input, .mat-consent input { margin-top: 4px; width: auto; } .mat-ok h3 { margin-top: 0; } @media (max-width: 860px) { .mat-grid { grid-template-columns: minmax(0, 1fr); } .mat-prev { order: 2; } } .mat-perfil input[type="radio"], .mat-consent input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; width: 18px; height: 18px; flex: none; accent-color: #0E979C; } .case { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-lbl { margin: 26px 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #C2508F; } .light .case-lbl { color: #972B8A; } @media (max-width: 700px) { .case { grid-template-columns: minmax(0, 1fr); } } .case-quotes.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; } .case-quotes.one blockquote { font-size: 1.2rem; } /* ---- Assinar agora (FlowOut Apps) ---- */ .btn.pay { white-space: nowrap; padding: 12px 18px; background: var(--c); border-color: var(--c); color: var(--on) !important; width: 100%; min-height: 56px; font-size: 1.05rem; font-weight: 800; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--c) 80%, transparent); cursor: pointer; font-family: inherit; } .btn.pay:hover, .btn.pay:focus-visible { background: #ffffff; color: var(--graphite) !important; border-color: var(--c); } .btn.pay:disabled { opacity: .6; cursor: wait; } .pay-stack { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } .plan .pay-stack .btn { align-self: stretch; margin-top: 0; } .pay-wa { font-size: .86rem; text-align: center; color: var(--lmuted) !important; text-decoration: underline; text-underline-offset: 3px; } .pay-wa:hover { color: var(--graphite) !important; text-decoration-color: var(--c); } .pay-dlg { --c: var(--pc, #972B8A); --on: var(--pon, #ffffff); width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 0; border-radius: 22px; padding: 0; background: #ffffff; color: var(--graphite); box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); overflow-y: auto; overscroll-behavior: contain; } .pay-dlg::backdrop { background: rgba(18,17,16,.62); } .pay-form { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 22px; border-top: 6px solid var(--c); } .pay-form .eyebrow { margin: 0; color: var(--lmuted); background: none !important; padding: 0 !important; border: 0 !important; } .pay-form .eyebrow::before { display: none !important; } .pay-form h3 { margin: 0 0 4px; font-size: 1.45rem; color: var(--graphite); } .pay-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--lmuted); cursor: pointer; } .pay-x:hover { background: #f2f3f5; color: var(--graphite); } .pay-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: .9rem; color: var(--graphite); } .pay-form input[type=text], .pay-form input:not([type]), .pay-form input[type=email] { font: inherit; font-weight: 500; padding: 12px 14px; border: 1.5px solid var(--lline); border-radius: 12px; background: #fff; color: var(--graphite); } .pay-form input:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); } .pay-form small { font-weight: 500; color: var(--lmuted); font-size: .78rem; } .pay-lang { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; } .pay-lang legend { font-weight: 700; font-size: .9rem; margin-bottom: 6px; } .pay-lang label { flex: 1 1 0; flex-direction: row; } .pay-lang input { position: absolute; opacity: 0; pointer-events: none; } .pay-lang span { flex: 1; text-align: center; padding: 10px 12px; border: 2px solid var(--lline); border-radius: 999px; cursor: pointer; font-weight: 700; } .pay-lang input:checked + span { border-color: var(--c); background: var(--c); color: var(--on); } .pay-lang input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); } .pay-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #ffffff); } .pay-price > span { font-size: .9rem; color: var(--lmuted); } .pay-price b { font-size: 1.5rem; color: var(--graphite); margin-left: auto; } .pay-price em { width: 100%; font-style: normal; font-size: .82rem; font-weight: 700; color: var(--graphite); } .pay-form .pay-terms { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; font-size: .84rem; } .pay-terms input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--c); flex: 0 0 auto; } .pay-terms a { color: var(--graphite); text-decoration-color: var(--c); text-decoration-thickness: 2px; } .pay-note { margin: 0; font-size: .8rem; color: var(--lmuted); text-align: center; } .pay-msg { margin: 0; font-size: .88rem; font-weight: 700; min-height: 1.2em; text-align: center; } .pay-msg.err { color: #c4005f; } .pay-msg.ok { color: var(--graphite); } .pay-lang span { white-space: nowrap; display: flex; align-items: center; justify-content: center; } @media (max-width: 420px) { .pay-lang span { font-size: .86rem; padding: 10px 6px; } .pay-form { padding: 24px 18px 20px; } } /* ---- auditoria B2B (out/2026) ---- */ .menu-col .theme-tg { position: static; margin: 0; align-self: center; box-shadow: none; white-space: nowrap; padding: 8px 12px 8px 10px; letter-spacing: .04em; } .hpath.primary { background: var(--c); border-color: var(--c); color: #121110; padding-top: 20px; padding-bottom: 20px; box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--c) 90%, transparent); } .hpath.primary small, html[data-theme="light"] .hpath.primary small { color: #121110; opacity: .8; } .hpath.primary b { font-size: 1.3rem; } .hpath.primary span { color: #121110; opacity: .85; } .hpath.primary i { color: #121110; } .hpath.ghost { background: transparent; border-width: 1.5px; align-self: end; } .hpath.ghost b { font-size: 1rem; } .hero-link { display: inline-block; margin-top: 14px; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 4px; } .logo-strip { padding: 22px 0 26px; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); background: var(--bg); } .logo-strip p { margin: 0 0 14px; text-align: center; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ls-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px clamp(24px, 5vw, 64px); } .ls-row a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-weight: 800; font-size: 1rem; } .ls-row img { width: 80px; height: 80px; border-radius: 16px; object-fit: contain; background: #fff; } @media (max-width: 560px) { .ls-row { gap: 14px 22px; } .ls-row a span { display: none; } } .diag-inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 40px); align-items: center; margin-top: clamp(28px, 3.5vw, 48px); padding: clamp(20px, 3vw, 34px); border-radius: 22px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 9%, var(--light-card, #fff)); color: var(--graphite); } .diag-inline h3 { margin: 6px 0 8px; font-size: clamp(1.2rem, 2vw, 1.55rem); color: var(--graphite); } .diag-inline .eyebrow { margin: 0; } .di-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; } .di-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: .84rem; color: var(--graphite); } .di-form input { font: inherit; font-weight: 500; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--lline); border-radius: 12px; background: #fff; color: var(--graphite); } .di-form input:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); } .di-form .btn { grid-column: 1 / -1; min-height: 52px; } @media (max-width: 860px) { .diag-inline { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .di-form { grid-template-columns: minmax(0, 1fr); } } .diag-inline .muted { color: var(--lmuted) !important; } .wa-float[data-tip]::before { content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: 8px 12px; border-radius: 10px; background: #121110; color: #fff; font: 600 .8rem/1.2 var(--font); box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .wa-float[data-tip]:hover::before, .wa-float[data-tip]:focus-visible::before { opacity: 1; transform: translate(0, -50%); } @media (hover: none) { .wa-float[data-tip]::before { display: none; } } .hero-paths { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .hpath-alt { justify-self: start; font-size: .95rem; color: inherit; text-decoration: none; padding: 4px 2px; } .hpath-alt b { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 4px; } .hpath-alt:hover b { color: var(--amber); } .di-next { grid-column: 1 / -1; margin: 2px 0 0; font-size: .82rem; line-height: 1.45; color: var(--lmuted); } .di-next b { color: var(--graphite); } /* ===== menu novo (out/2026): Sou aluno no degradê FlowOut, botões metálicos, sem "Falar com a FlowOut" (o WhatsApp é o ícone verde) ===== */ .menu-col .mbtn .lbl { display: flex; flex-direction: column; line-height: 1.25; } .menu-col .mbtn .lbl small { font-weight: 500; font-size: .74rem; opacity: .78; margin-top: 2px; } .menu-col .mbtn:not(.aluno-btn) { background: linear-gradient(180deg, #ffffff 0%, #eef0f3 38%, #dfe3e8 52%, #f3f4f6 100%) !important; color: #2A2B2E !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.08); } html:not([data-theme="light"]) .hero .menu-col .mbtn:not(.aluno-btn), .overlay .menu-col .mbtn:not(.aluno-btn) { background: linear-gradient(180deg, #3a3835 0%, #2b2927 45%, #222120 55%, #302e2b 100%) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.3); } .menu-col .mbtn:not(.aluno-btn):hover, .menu-col .mbtn:not(.aluno-btn):focus-visible, .menu-col .mbtn:not(.aluno-btn)[aria-current="page"] { background: var(--c) !important; color: var(--on) !important; } .menu-col .mbtn.aluno-btn { justify-content: center; min-height: 54px; background: linear-gradient(90deg, #224B51 0%, #45BABD 20%, #6D73A6 40%, #972B8A 60%, #CC6F4E 80%, #F7A71C 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.15); position: relative; overflow: hidden; } .menu-col .mbtn.aluno-btn::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events: none; } .menu-col .mbtn.aluno-btn .ab-txt { flex: 0 0 auto; } .menu-col .mbtn.aluno-btn .ab-ico { width: 30px; height: 30px; background: none; } /* Instagram, LinkedIn e tema: pequenos, embaixo à esquerda do topo */ .menu-col .social.msoc { gap: 8px; margin: 0; } .menu-col .msoc .soc { width: 30px; height: 30px; border-width: 1.5px; } .menu-col .msoc .soc svg { width: 15px; height: 15px; } .menu-col .msoc .theme-tg { position: static; width: 30px; height: 30px; padding: 0; justify-content: center; border-width: 1.5px; } .menu-col .msoc .theme-tg span { font-size: 0; gap: 0; } .menu-col .msoc .theme-tg svg { width: 15px; height: 15px; } @media (min-width: 961px) { .hero .menu-col .social.msoc { position: absolute; left: 7.5vw; bottom: 104px; z-index: 6; } } /* bandeiras do idioma: pequenas, canto superior direito */ .lang-flags { position: absolute; top: 22px; right: calc(var(--gut) * 1.5); z-index: 6; display: flex; gap: 8px; } .lflag { all: unset; cursor: pointer; width: 28px; height: 20px; border-radius: 5px; overflow: hidden; display: block; opacity: .85; box-shadow: 0 0 0 1.5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.08); } .lflag svg { width: 100%; height: 100%; display: block; } .lflag.on { opacity: 1; box-shadow: 0 0 0 2px var(--teal); } .lflag:hover, .lflag:focus-visible { opacity: 1; } .soon-toast { position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 14px; background: #1f1e1c; color: #fff; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.3); } .soon-toast button { font: inherit; font-weight: 700; border: 0; border-radius: 10px; padding: 6px 14px; background: var(--teal); color: #121110; cursor: pointer; } /* ===== página inicial (out/2026) ===== */ .home-v2 .hero .wrap.hero-grid { padding-left: 7.5vw; padding-right: calc(var(--gut) * 1.5); align-items: end; } .home-v2 .brand-blk { width: 30vw; margin: 0 0 11vh 6vw; display: flex; flex-direction: column; align-items: flex-end; } .home-v2 .brand-blk .logo-big { width: 100%; max-width: none; height: auto; margin: 0; } .home-v2 .brand-blk .eyebrow { margin: 4px 0 0; font-weight: 500; color: var(--faint); font-size: .72rem; } .home-v2 .brand-blk .eyebrow::before { display: none; } .home-v2 .hero h1 { margin: 0 0 0 6vw; font-size: clamp(1.8rem, 3.74vw, 3.2rem); line-height: 1.06; } .home-v2 .hero .menu-col { gap: 14px; margin-bottom: -7vh; } @media (max-width: 960px) { .home-v2 .hero .wrap.hero-grid { padding-left: 20px; padding-right: 20px; gap: 34px; } .home-v2 .brand-blk { width: 56vw; margin: 10px 0 40px 6vw; } .home-v2 .brand-blk .eyebrow { white-space: nowrap; font-size: .5rem; letter-spacing: .05em; text-align: right; } .home-v2 .hero h1 { font-size: 1.66rem; } .home-v2 .hero .menu-col { margin-bottom: 0; grid-template-columns: 1fr; gap: 10px; } .home-v2 .hero .menu-col .mbtn { min-height: 62px; } .lang-flags { top: 14px; right: 20px; } } /* Para empresas e Para mim: botões cheios de cor (metálicos) para chamar mais atenção */ html body .menu-col .mbtn.mbtn.c-teal.c-teal:not(.aluno-btn), html body .menu-col .mbtn.mbtn.c-amber.c-amber:not(.aluno-btn) { background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 48%, rgba(0,0,0,.04) 52%, rgba(255,255,255,.12) 100%), var(--c) !important; color: #121110 !important; border-color: var(--c) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.18) !important; } html body .menu-col .mbtn.mbtn.c-teal.c-teal:not(.aluno-btn) small, html body .menu-col .mbtn.mbtn.c-amber.c-amber:not(.aluno-btn) small { opacity: .85; } html body .menu-col .mbtn.mbtn.c-teal.c-teal:not(.aluno-btn):hover, html body .menu-col .mbtn.mbtn.c-amber.c-amber:not(.aluno-btn):hover, html body .menu-col .mbtn.mbtn.c-teal.c-teal:not(.aluno-btn):focus-visible, html body .menu-col .mbtn.mbtn.c-amber.c-amber:not(.aluno-btn):focus-visible { filter: brightness(1.07); } /* Para empresas e Para mim lado a lado */ html body .menu-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } html body .menu-col > * { grid-column: 1 / -1; } html body .menu-col > .mbtn.c-teal:not(.aluno-btn), html body .menu-col > .mbtn.c-amber:not(.aluno-btn) { grid-column: auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 84px; transform: none; justify-content: flex-start; padding-top: 16px; } html body .menu-col > .mbtn.c-teal:not(.aluno-btn) .arr, html body .menu-col > .mbtn.c-amber:not(.aluno-btn) .arr { position: absolute; right: 14px; bottom: 10px; font-size: 1.2rem; } html body .menu-col > .mbtn.c-teal:not(.aluno-btn) .lbl, html body .menu-col > .mbtn.c-amber:not(.aluno-btn) .lbl { font-size: 1.12rem; } html body .menu-col > .mbtn.c-teal, html body .menu-col > .mbtn.c-amber { position: relative; padding-right: 34px; } @media (max-width: 440px) { html body .menu-col > .mbtn.c-teal .lbl small, html body .menu-col > .mbtn.c-amber .lbl small { font-size: .72rem; } } /* home: menu no meio (vertical) e com o dobro de margem à direita */ @media (min-width: 961px) { .home-v2 .hero .wrap.hero-grid { padding-right: calc(var(--gut) * 4.5); } .home-v2 .hero .menu-col { align-self: center; margin-bottom: 0; } } /* UX etapa 1 (21/10/2026): menu Empresas | Para mim | Apps | Sou aluno — Apps com o mesmo estilo cheio, na linha de baixo, de borda a borda */ html body .menu-col .mbtn.mbtn.c-violet.c-violet:not(.aluno-btn) { background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 48%, rgba(0,0,0,.04) 52%, rgba(255,255,255,.12) 100%), var(--c) !important; color: #fff !important; border-color: var(--c) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(0,0,0,.18); min-height: 64px; transform: none; } html body .menu-col .mbtn.mbtn.c-violet.c-violet:not(.aluno-btn) .lbl { font-size: 1.12rem; } html body .menu-col .mbtn.mbtn.c-violet.c-violet:not(.aluno-btn):hover, html body .menu-col .mbtn.mbtn.c-violet.c-violet:not(.aluno-btn):focus-visible { filter: brightness(1.07); } html body .menu-col > .mbtn.aluno-btn { margin-top: 4px; } /* UX2 (21/10/2026) */ .como-ol { display: contents; list-style: none; margin: 0; padding: 0; } .diag-b2b .di-go { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .diag-b2b .di-go .btn { min-height: 52px; justify-content: center; } .diag-b2b .di-kit { font-weight: 700; font-size: .9rem; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; } .biz-line { margin: clamp(16px, 1.6vw, 24px) 0 0; text-align: center; font-weight: 600; color: inherit; font-size: 1.02rem; } .biz-line a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } /* UX3 (21/10/2026): portada de escritorio */ @media (min-width: 1200px) { .home-v2 .hero .brand-blk { width: 36vw; } .home-v2 .hero h1 { font-size: calc(36vw / 10.2); line-height: 1.04; } .home-v2 .hero h1 .ta, .home-v2 .hero h1 .g { white-space: nowrap; } .hero .hero-grid { grid-template-columns: minmax(0, 1fr) clamp(340px, 23vw, 470px); gap: clamp(24px, 3vw, 64px); } .hero .menu-col { width: 100%; gap: clamp(12px, .9vw, 18px); } .hero .menu-col .mlabel { font-size: clamp(.74rem, .62vw, .95rem); } .hero .menu-col .mbtn { font-size: clamp(1.02rem, 1.12vw, 1.45rem); padding: clamp(15px, 1.25vw, 24px) clamp(18px, 1.35vw, 26px); border-radius: clamp(14px, 1vw, 20px); } .hero .menu-col .mbtn.aluno-btn { min-height: clamp(60px, 4.4vw, 86px); font-size: clamp(1rem, 1.05vw, 1.35rem); } } /* UX3: orbes de la portada */ .hero-orbs { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .hero-orbs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .42; will-change: transform; } .hero-orbs .o1 { width: 44vw; height: 44vw; left: 12vw; top: -8vw; background: radial-gradient(circle at 40% 40%, #45BABD, rgba(109,115,166,.75) 45%, transparent 70%); animation: orb1 26s ease-in-out infinite alternate; } .hero-orbs .o2 { width: 36vw; height: 36vw; right: 6vw; top: 18vh; background: radial-gradient(circle at 50% 50%, #972B8A, rgba(204,111,78,.6) 50%, transparent 70%); opacity: .34; animation: orb2 32s ease-in-out infinite alternate; } .hero-orbs .o3 { width: 26vw; height: 26vw; left: 38vw; bottom: -6vw; background: radial-gradient(circle at 50% 50%, #F7A71C, rgba(204,111,78,.5) 50%, transparent 70%); opacity: .26; animation: orb3 22s ease-in-out infinite alternate; } @keyframes orb1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14vw, 10vh) scale(1.12); } 100% { transform: translate(26vw, -4vh) scale(.95); } } @keyframes orb2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16vw, 8vh) scale(.9); } 100% { transform: translate(-6vw, -10vh) scale(1.1); } } @keyframes orb3 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-18vw, -12vh) scale(1.15); } 100% { transform: translate(12vw, -6vh) scale(1); } } html[data-theme="light"] .hero-orbs i { opacity: .22; } /* UX3: la franja de empresas centrada en la página */ .logo-strip .wrap { padding-left: var(--gut) !important; padding-right: var(--gut) !important; } @media (max-width: 760px) { .hero-orbs i { filter: blur(40px); } .hero-orbs .o1 { width: 90vw; height: 90vw; left: -20vw; } .hero-orbs .o2 { width: 70vw; height: 70vw; } .hero-orbs .o3 { width: 60vw; height: 60vw; left: 20vw; } } @media (prefers-reduced-motion: reduce) { .hero-orbs i { animation: none; } } /* Apps: 5 planos (21/10/2026) */ .tiers5 { gap: clamp(12px, 1.2vw, 20px); } @media (min-width: 1181px) { .tiers5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .tiers5 .plan { padding-left: clamp(16px, 1.3vw, 26px); padding-right: clamp(16px, 1.3vw, 26px); } .tiers5 .plan .price { white-space: nowrap; } .tiers5 .plan .price .val { font-size: clamp(1.7rem, 2.15vw, 2.6rem); } .tiers5 .plan .price .per { font-size: .8rem; } .tiers5 .plan .pay-stack { width: 100%; } .tiers5 .plan .pay-stack .btn, .tiers5 .plan > .btn { width: 100%; box-sizing: border-box; justify-content: center; gap: 8px; padding-left: 10px; padding-right: 10px; font-size: clamp(.86rem, .85vw, 1rem); white-space: nowrap; } .tiers5 .plan .pay-stack .btn svg { width: 18px; height: 18px; fill: currentColor; } .c-orange { --c: #FF8800; --on: #121110; --lg: linear-gradient(90deg, #F7A71C 0%, #FF8800 100%); } /* Apps: promo cupom 60% (21/10/2026) */ .promo-head { text-align: center; margin: 0 auto 26px; max-width: 70ch; } .promo-head h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; color: var(--graphite); margin: 0 0 6px; } .promo-head p { color: var(--lmuted); margin: 0; } .promo-head.norm { margin-top: clamp(48px, 6vw, 84px); } .tier.promo { position: relative; } .tier.promo .off { order: 0; display: table; margin: 0 auto 10px; transform: rotate(-3deg); background: var(--c); color: var(--on); font-weight: 800; font-size: .95rem; line-height: 1.05; padding: 6px 10px; border-radius: 10px; text-align: center; box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); } .tier.promo .off small { display: inline; margin-left: 4px; font-size: .68rem; font-weight: 700; } .tier.promo.is-pop .pop { left: 14px !important; right: auto !important; transform: none !important; } .tier.promo .dots { display: none; } .tier.promo .tot { margin: 4px 0 0; color: var(--graphite); font-size: .92rem; text-align: center; } .tier.promo .price { justify-content: center; white-space: nowrap; } .tier.promo .price .x { font-weight: 800; font-size: clamp(1.05rem, 1.3vw, 1.4rem); } .tier.promo .pk { margin: 4px 0 0; font-size: .78rem; color: var(--lmuted); text-align: center; line-height: 1.3; } .tier.promo .pk2 { margin: 2px 0 16px; font-size: .74rem; color: var(--lmuted); text-align: center; } /* Diagnóstico: título grande, texto chico, botones como el menú, panel gris claro (21/10/2026) */ .dg-small { font-size: .9rem; line-height: 1.5; color: var(--muted); max-width: 58ch; margin: 14px 0 22px; } .dg-small b { color: var(--text); font-weight: 700; } html[data-theme="light"] .dg-small b { color: var(--graphite); } .btn.gl-teal, .btn.gl-violet, #diagGo, .diag-opt { --gl: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 48%, rgba(0,0,0,.04) 52%, rgba(255,255,255,.12) 100%); } .btn.gl-teal, #diagGo, .diag-ctx .diag-opt { background: var(--gl), #45BABD !important; border-color: #45BABD !important; color: #121110 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.18); } .btn.gl-violet, .diag-item .diag-opt { background: var(--gl), #6D73A6 !important; border-color: #6D73A6 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(0,0,0,.18); } .btn.gl-teal:hover, .btn.gl-violet:hover, #diagGo:hover, .diag-opt:hover { filter: brightness(1.07); } #diagGo[disabled] { opacity: .5; } .diag-opt[aria-pressed="true"] { outline: 3px solid #2A2B2E; outline-offset: 2px; } .diag-opt[aria-pressed="true"]::before { content: "✓ "; font-weight: 800; } #diagApp { --muted: #5b5753; --line: #cfd4da; --surface: #E2E5E9; --text: #2A2B2E; color: #2A2B2E; background: #F1F2F4; border-radius: 24px; padding: clamp(18px, 3vw, 40px); box-shadow: 0 20px 50px -30px rgba(0,0,0,.6); } #diagApp .g { background-image: var(--gradient-light); } #diagApp { --d-ok: #0E979C; --d-trava: #C27A06; --d-evita: #972B8A; } #diagApp .diag-ctx, #diagApp .diag-item, #diagApp .diag-bar { background: #E2E5E9; border: 1px solid #d3d7dc; border-radius: 18px; } #diagApp .diag-ctx { padding: clamp(16px, 2vw, 24px); } #diagApp .diag-step { color: #5b5753; } #diagApp .diag-bar { background: #E2E5E9; } @media (max-width: 560px) { #diagApp { padding: 12px; border-radius: 18px; } #diagApp .diag-ctx, #diagApp .diag-item { padding: 12px; } } .demo .ph .ph-du { color: #F7A71C !important; -webkit-text-fill-color: #F7A71C !important; background: none !important; font-weight: 800; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; font-size: 1.12em; } /* Para mim: comparador (auditoría UX) */ .cmp-card { display: flex; flex-direction: column; } .cmp-card .cmp-h { font-size: 1.35rem; margin: 0 0 14px; } .cmp-card dl { margin: 0 0 22px; display: grid; gap: 0; flex: 1; } .cmp-r { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); min-height: 74px; } .cmp-r dt { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); } .cmp-r dd { margin: 0; font-size: .95rem; } .cmp-card .btn { align-self: stretch; } .hero .actions .btn.hero-diag { align-self: flex-start; min-height: 52px; } .founder-lead { font-size: 1.05rem; line-height: 1.6; margin: 6px 0 16px; max-width: 62ch; } .principles .ex { font-size: .86rem; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); } /* testimonios: largos recortados con «Ler completo» (el texto no cambia) */ .depo blockquote.clip { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .depo .more { align-self: flex-start; font: inherit; font-size: .85rem; font-weight: 700; background: none; border: 0; padding: 4px 0; color: var(--c); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-top: -12px; } /* «Conhecer as apps» fuera del celular, arriba (pedido 21/10) */ .phone-wrap { display: flex; flex-direction: column; align-items: center; } .btn.phone-cta, .btn.phone-cta:hover, .btn.phone-cta:focus-visible { position: static !important; transform: none !important; order: -1; margin: 0 0 18px; } /* contraste AA (auditoría UX): etiquetas chicas de color más oscuras en fondo claro y más claras en fondo oscuro */ .light .cmp-r dt, .light .depo .more, .light .card .tag, .light .card .who:not(.tier .who) { color: color-mix(in srgb, var(--c) 58%, #000) !important; } .section:not(.light) .card .tag, .section:not(.light) .plan .who, .section:not(.light) .app-lang, .section:not(.light) .depo .more, .section:not(.light) .app-benefit b, .section:not(.light) .app-benefit strong, .case-lbl { color: color-mix(in srgb, var(--c, #C2508F) 55%, #fff) !important; } /* Apps: cupom + valor normal chiquito (22/10/2026) */ .cup-box { max-width: 520px; margin: 0 auto 30px; text-align: center; } .cup-box label { display: block; font-weight: 800; color: var(--graphite); margin-bottom: 8px; } .cup-row { display: flex; gap: 10px; justify-content: center; flex-wrap: nowrap; } @media (max-width: 480px) { .cup-row { flex-wrap: wrap; } .cup-row .btn { flex: 1 1 100%; } } .cup-row input { flex: 1 1 auto; min-width: 0; min-height: 52px; border-radius: 999px; border: 2px solid #cfd4da; padding: 0 20px; font: inherit; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #fff; color: #2A2B2E; } .cup-row input:focus { outline: 3px solid #45BABD; outline-offset: 2px; } .cup-row .btn { min-width: 130px; } .cup-row #cupOff { border-color: #6D73A6; color: #2A2B2E; } .cup-msg { min-height: 1.4em; margin: 8px 0 0; font-weight: 700; font-size: .92rem; } .cup-msg.ok { color: #0E7C80; } .cup-msg.err { color: #972B8A; } .tier.promo .norm { margin: 2px 0 0; font-size: .74rem; color: #6b6f75; text-align: center; } .tier.promo.cup-on .off { outline: 3px solid #2A2B2E; outline-offset: 2px; } /* textos: párrafos cortos y angostos (22/10/2026) */ .sec-head .lead, .section p.lead, .hero .lead, .hero-main .lead, .dg-small, .founder-lead { max-width: 46ch !important; } .sec-head h2, .hero h1 { max-width: none; } /* Apps: cupom em cada plano, valor normal destacado, 60% OFF chamativo, mais respiro (22/10/2026) */ .tier.promo .off { font-size: 1.45rem !important; font-weight: 900; padding: 10px 18px !important; border-radius: 14px !important; margin: 4px auto 16px !important; transform: rotate(-3deg); box-shadow: 0 10px 22px -8px var(--c); letter-spacing: .01em; animation: offPulse 2.4s ease-in-out infinite; } .tier.promo .off small { display: block !important; margin: 2px 0 0 !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } @keyframes offPulse { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(-3deg) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .tier.promo .off { animation: none; } } .tier.promo .tot { margin: 6px 0 2px !important; } .tier.promo .price { margin: 4px 0 14px !important; } .tier.promo .norm { margin: 0 0 16px !important; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, #fff); border: 1.5px dashed var(--c); color: color-mix(in srgb, var(--c) 60%, #000) !important; font-size: .8rem !important; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .tier.promo .norm .nl { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; } .tier.promo .norm s { font-weight: 700; font-size: .95rem; text-decoration-thickness: 2px; } .tier.promo .pk { margin: 0 0 4px !important; line-height: 1.45 !important; } .tier.promo .pk2 { margin: 0 0 20px !important; } .tier.promo ul { margin-bottom: 22px !important; gap: 12px !important; } .cup-in { position: relative; margin: 0 0 4px; } .cup-in input { width: 100%; box-sizing: border-box; min-height: 46px; border-radius: 999px; border: 2px solid var(--c); padding: 0 52px 0 16px; font: inherit; font-size: .88rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #fff; color: #2A2B2E; } .cup-in input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; color: #6b6f75; } .cup-in input:focus { outline: 3px solid color-mix(in srgb, var(--c) 45%, #fff); outline-offset: 1px; } .cup-in input:disabled { background: color-mix(in srgb, var(--c) 10%, #fff); } .cup-ok { all: unset; box-sizing: border-box; position: absolute; right: 5px; top: 5px; transform: none !important; box-shadow: none !important; outline: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--c); color: var(--on, #121110); font-size: 1.1rem; font-weight: 900; cursor: pointer; display: grid; place-items: center; } .cup-ok.off { background: #fff; color: #2A2B2E; border: 2px solid var(--c); } .cup-ok:hover { filter: brightness(1.08); } .cup-ok:focus { outline: none; } .cup-ok:focus-visible { outline: 2px solid #2A2B2E; outline-offset: 2px; } .tier.promo .cup-msg { min-height: 1.3em; margin: 4px 0 12px; font-size: .78rem; font-weight: 700; text-align: center; } .tier.promo .cup-msg.ok { color: color-mix(in srgb, var(--c) 60%, #000); } .tier.promo .cup-msg.err { color: #972B8A; } /* pago planes nuevos (PK_PLANS2) */ .p2-sum { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, #fff); border: 1.5px dashed var(--c); font-size: .86rem; line-height: 1.5; color: var(--graphite); } .p2-sum s { color: #6b6f75; } #p2Go { background: var(--c) !important; border-color: var(--c) !important; color: var(--on, #fff) !important; opacity: 1; } #p2Go:disabled { opacity: .55; } /* Apps: los 2 apps arriba, en el lugar del menú (22/10/2026) */ .hero .wrap.apps-hero { grid-template-columns: minmax(260px, .6fr) minmax(0, 1.75fr); gap: clamp(24px, 2.6vw, 48px); padding-inline: clamp(16px, 2.6vw, 44px); align-items: center; } .apps-hero .hero-main .lead { max-width: 34ch; } .hero-apps .ha-t { font-size: clamp(1.5rem, 2.2vw, 2.3rem); line-height: 1.08; margin: 0 0 16px; } .hero-apps .ha-t .ta { display: block; } .ha-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); } .happ { display: grid; grid-template-columns: minmax(0, 1fr) clamp(118px, 9vw, 160px); gap: 14px; align-items: center; padding: 18px 18px 18px 22px; } .happ .tag.app-lang { font-size: clamp(1.15rem, 1.55vw, 1.6rem); margin-bottom: 8px; gap: 8px; } .happ h3 { font-size: clamp(1rem, 1.15vw, 1.2rem); margin: 2px 0 10px; } .happ ul { margin: 0 0 10px; padding-left: 1.05em; color: var(--muted); font-size: .8rem; line-height: 1.4; } .happ li { margin-bottom: 6px; } .happ li b { color: var(--text); } .happ .happ-for { font-size: .78rem; color: var(--muted); margin: 0 0 12px; line-height: 1.4; } .happ .phone { width: 100%; max-width: 160px; margin: 0; padding: 6px; border-radius: 24px; } .happ .phone img { border-radius: 18px; } .happ-btns { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: fit-content; } .happ .app-cta { margin: 0; padding: 10px 20px; font-size: clamp(1rem, 1.15vw, 1.2rem); justify-content: center; } .happ-plan { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--amber); color: var(--text); font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .2s, color .2s; } .happ-plan:hover, .happ-plan:focus-visible { background: var(--amber); color: #121110; } @media (min-width: 1101px) { .apps-hero h1 .product { font-size: clamp(2.6rem, 4.3vw, 5.6rem); } } @media (max-width: 1500px) { .happ li br, .happ .happ-for br { display: none; } } @media (max-width: 1100px) { .hero .wrap.apps-hero { grid-template-columns: minmax(0, 1fr); } .apps-hero .hero-main .lead { max-width: 52ch; } } @media (max-width: 860px) { .ha-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 420px) { .happ { grid-template-columns: minmax(0, 1fr); } .happ .phone { max-width: 170px; margin: 0 auto; } } /* caja «Testar o app» en el verde del 01 */ .como .como-cta.c-teal { background: var(--teal); border-color: var(--teal); } /* Como treinar no app */ .treino { padding-top: clamp(40px, 5vw, 72px); } .treino-ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); } .treino-ol li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 20px; border: 2px solid var(--c); border-radius: var(--r); background: var(--surface); } .treino-ol li:not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * clamp(12px, 1.4vw, 22px)); top: 50%; transform: translate(50%, -50%); color: var(--c); font-weight: 800; font-size: 1.2rem; z-index: 2; } .treino-ol .tn { position: absolute; top: 14px; right: 16px; font-weight: 800; font-size: 1.5rem; color: var(--c); line-height: 1; } .treino-ol .ti { width: 40px; height: 40px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .treino-ol b { font-size: clamp(.95rem, 1.05vw, 1.3rem); white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; color: var(--c); } .treino-ol .tx { font-size: .9rem; color: var(--muted); line-height: 1.4; } @media (max-width: 1100px) { .treino-ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } .treino-ol li::after { display: none; } } @media (max-width: 620px) { .treino-ol { grid-template-columns: minmax(0, 1fr); } .treino-ol .tx br { display: none; } } /* ===== PK_TOPNAV · 24/10/2026: barra de menu fixa no topo + Para mim com os 3 caminhos + topos mais curtos ===== */ html { scroll-padding-top: 72px; } .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 65; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 clamp(14px, 2.4vw, 40px); background: rgba(26,25,24,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.1); transform: translateY(-100%); transition: transform .3s var(--ease); } .topnav.show { transform: none; } .topnav .tn-logo { display: flex; align-items: center; flex: 0 0 auto; } .topnav .tn-logo img { width: 96px; height: auto; display: block; } .topnav .tn-links { display: flex; align-items: center; gap: 8px; margin-left: auto; } .topnav .tn-a { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--c); color: var(--text); text-decoration: none; font-size: .86rem; font-weight: 700; transition: background-color .2s, color .2s; } .topnav .tn-a:hover, .topnav .tn-a:focus-visible, .topnav .tn-a[aria-current="page"] { background: var(--c); color: var(--on); } .topnav .tn-aluno { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 132px; height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: linear-gradient(120deg, #972B8A 0%, #CC6F4E 60%, #F7A71C 100%); color: #fff; text-decoration: none; font-size: .84rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .topnav .tn-aluno svg { width: 18px; height: 18px; fill: #fff; } .topnav .tn-aluno:hover, .topnav .tn-aluno:focus-visible { filter: brightness(1.08); } .topnav .tn-menu { display: none; height: 38px; min-width: 84px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--teal); background: transparent; color: var(--text); font: inherit; font-size: .84rem; font-weight: 800; letter-spacing: .06em; cursor: pointer; } .topnav .tn-menu:hover, .topnav .tn-menu:focus-visible { background: var(--teal); color: #121110; } html[data-theme="light"] .topnav { background: rgba(242,243,245,.94); border-bottom-color: #DADCE0; --text: #2A2B2E; } html[data-theme="light"] .topnav .tn-logo img { filter: none; } body.has-topnav .fab { display: none !important; } body.tn-int { padding-top: 60px; } body.tn-int .lang-flags { top: 14px; } @media (max-width: 960px) { .topnav { height: 56px; gap: 8px; } .topnav .tn-links .tn-a { display: none; } .topnav .tn-menu { display: inline-flex; align-items: center; justify-content: center; } .topnav .tn-aluno { min-width: 0; padding: 0 12px; } .topnav .tn-logo img { width: 84px; } body.tn-int { padding-top: 56px; } html { scroll-padding-top: 66px; } } @media (max-width: 380px) { .topnav .tn-aluno span { display: none; } } /* páginas internas: o menu grande do topo sai (a barra fixa substitui); redes e cor do topo continuam */ body.tn-int:not(.hub-open) .hero.sub .menu-col > .mlabel, body.tn-int:not(.hub-open) .hero.sub .menu-col > .mbtn { display: none !important; } body.tn-int:not(.hub-open) .hero.sub .hero-grid:not(.apps-hero):not(.has-paths) { grid-template-columns: minmax(0, 1fr); } body.tn-int:not(.hub-open) .hero.sub .menu-col { display: contents; } body.tn-int .hero.sub { min-height: auto; padding-block: clamp(28px, 4vh, 48px) clamp(96px, 12vh, 128px); } @media (min-width: 961px) { body.tn-int .hero.sub { padding-bottom: 168px; } } body.tn-int .hero.sub .scroll-cue { bottom: 14px; } body.tn-int .hero.sub .logo-mid { margin-bottom: clamp(14px, 2.4vh, 26px); } /* Para mim: texto alinhado com o ícone do Instagram e os 3 caminhos no lugar do menu */ .hero-paths { display: grid; gap: 14px; align-content: center; max-width: none; grid-template-columns: minmax(0, 1fr); } .hpath { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px; text-decoration: none; color: inherit; min-height: 0; transition: transform .25s var(--ease), background-color .25s; } .hpath .hp-txt { display: flex; flex-direction: column; min-width: 0; } .hpath .tag { margin-bottom: 8px; align-self: flex-start; } .hpath .hp-t { font-size: clamp(1.15rem, 1.5vw, 1.5rem); font-weight: 800; line-height: 1.15; color: var(--text); } .hpath .hp-p { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: var(--muted); max-width: 46ch; } .hpath .btn { width: 200px; min-height: 46px; padding: 10px 16px; font-size: .92rem; } .hpath:hover { transform: translateY(-3px); } .hpath:hover .btn, .hpath:focus-visible .btn { background: var(--c); color: var(--on); } .hub-open .hero-paths { display: none; } @media (min-width: 961px) { body.tn-int .hero.sub:has(.has-paths) { min-height: calc(100svh - 60px); } .hero .wrap.hero-grid.has-paths { padding-left: 7.5vw; padding-right: calc(var(--gut) * 1.5); grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 72px); } } @media (max-width: 960px) { .hero-paths { margin-top: 0; } } @media (max-width: 560px) { .hpath { grid-template-columns: minmax(0, 1fr); padding: 18px; } .hpath .btn { width: 100%; } } /* Apps: «Como ter acesso» antes dos planos */ .acc3 .card { display: flex; flex-direction: column; } .acc3 .card p + p { margin-top: 8px; } .acc3 .card .btn { margin-top: auto; align-self: stretch; } .acc3 .card p:last-of-type { margin-bottom: 22px; } /* PK_EMPSPLIT · 24/10/2026: Empresas em 2 colunas (texto | botões) */ .hero-split .hero-side { display: flex; flex-direction: column; gap: 14px; align-self: center; justify-self: start; width: min(100%, 380px); } .hero-split .hero-side .btn { width: 100%; min-height: 56px; } .hero-split .hero-side .hero-note { margin: 4px 0 0; font-size: .82rem; line-height: 1.6; color: var(--faint); } .hero-split .hero-main .lead { max-width: 30ch; } @media (min-width: 961px) { .hero .wrap.hero-grid.has-paths.hero-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .hero-split .hero-side { justify-self: center; } } /* ===== PK_NAV2 · 24/10/2026: blocos do topo alinhados com o Instagram, Empresas/Diagnóstico/off-ON em 2 colunas ===== */ @media (min-width: 961px) { body.tn-int .hero.sub .wrap.hero-grid:not(.apps-hero) { padding-left: 7.5vw; padding-right: calc(var(--gut) * 1.5); } } .hero-split .lead2 { margin-top: 14px; } .hero-split .hero-main .lead { max-width: 44ch; } .diag-box { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2vw, 32px); } .diag-box .eyebrow { margin: 0; font-size: .72rem !important; letter-spacing: .12em !important; } .diag-box h2 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.06; } .diag-box h2 .ta, .diag-box h2 .g { display: block; } .diag-box > p:not(.eyebrow) { margin: 0; color: var(--muted); } .diag-box .btn { width: 100%; min-height: 54px; margin-top: 6px; } .hero-split .hero-side { gap: 18px; width: min(100%, 440px); } .di-form.di-col { grid-template-columns: minmax(0, 1fr); gap: 12px; } .diag-form-box .di-form label { color: var(--text); } .diag-form-box .di-next { color: var(--muted); font-size: .8rem; line-height: 1.5; margin: 2px 0 0; } html[data-theme="light"] .hero .diag-form-box .di-form input { border-color: #DADCE0; } /* Como começamos: texto | 1-2 / 3-4 */ .como2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 72px); align-items: center; } .como2 .sec-head { margin-bottom: 0; } .como2 .muted { margin-top: 14px; max-width: 46ch; } .como-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); list-style: none; margin: 0; padding: 0; } .como-grid .card, .fmt3 .card { display: flex; flex-direction: column; } .ver { margin-top: auto; align-self: stretch; min-height: 46px; padding: 10px 16px; font-size: .92rem; } .como-grid .card p, .fmt3 .card p { margin-bottom: 18px; } @media (max-width: 960px) { .como2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .como-grid { grid-template-columns: minmax(0, 1fr); } } /* Para mim: 2 botões na tarjeta das aulas */ .hpath .hp-btns { display: flex; flex-direction: column; gap: 10px; } .hpath .hp-btns .btn { width: 200px; } .hpath .hp-btns .btn:hover, .hpath .hp-btns .btn:focus-visible { background: var(--c); color: var(--on); } div.hpath:hover { transform: none; } div.hpath:hover .btn { background: transparent; color: var(--text); } div.hpath .hp-btns .btn:hover { background: var(--c); color: var(--on); } @media (max-width: 560px) { .hpath .hp-btns .btn { width: 100%; } } /* off-ON: «Comece com o que já sabe» na coluna da direita */ .grow-side .sec-head { margin-bottom: 14px; } .grow-side .h-sm { font-size: clamp(1.5rem, 2.2vw, 2.2rem); } .grow-side .lead { font-size: 1rem; } /* menu «Conhecer o conteúdo» */ .cmenu { position: relative; display: inline-block; } .cmenu > summary { list-style: none; cursor: pointer; } .cmenu > summary::-webkit-details-marker { display: none; } .cmenu .cm-ar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--c); color: var(--on); font-size: .9rem; margin-left: 4px; transition: transform .2s; } .cmenu[open] .cm-ar { transform: rotate(180deg); } .cmenu .cm-list { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 300px; display: grid; gap: 4px; padding: 8px; border-radius: 16px; border: 1.5px solid var(--c); background: var(--bg, #1a1918); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); } .cmenu .cm-list a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: .95rem; } .cmenu .cm-list a:hover, .cmenu .cm-list a:focus-visible { background: var(--c); color: var(--on); } @media print { .topnav { display: none !important; } body.tn-int { padding-top: 0 !important; } } /* PK_AULAHERO · 24/10/2026: Aulas com «Como é uma aula» na coluna da direita */ .hero-split .hero-side.aula-side { width: min(100%, 640px); gap: 12px; } .aula-side .eyebrow { margin: 0; } .aula-side .h-sm { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.08; } .aula-side .h-sm .ta, .aula-side .h-sm .g { display: block; } .aula-side .as-lead { margin: 0 0 6px; color: var(--muted); max-width: 52ch; } .aula-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; } .aula-steps .card { padding: 16px 18px; } .aula-steps .card .num { font-size: 1.6rem; } .aula-steps .card h3 { margin: 4px 0 4px; font-size: 1.05rem; } .aula-steps .card p { margin: 0; font-size: .9rem; } .aula-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); gap: 12px; } .aula-acts .btn { width: 100%; padding-inline: 12px; } @media (max-width: 1500px) { .aula-acts { grid-template-columns: minmax(0, 260px); } } @media (max-width: 560px) { .aula-steps { grid-template-columns: minmax(0, 1fr); } .aula-acts { grid-template-columns: minmax(0, 1fr); } } /* ===== PK_NAV4 · 24/10/2026 ===== */ /* margens: esquerda = direita = linha do ícone do Instagram (7,5vw), em todas as páginas menos a inicial */ @media (min-width: 961px) { body.tn-int .wrap { padding-left: 7.5vw !important; padding-right: 7.5vw !important; } body.tn-int .hero.sub .wrap.hero-grid:not(.apps-hero) { padding-left: 7.5vw !important; padding-right: 7.5vw !important; } body.tn-int .section > .sec-nav, body.tn-int .lang-flags { right: 7.5vw; } } /* off-ON: menu do conteúdo na coluna da direita */ .cmenu-side { display: flex; flex-direction: column; gap: 12px; } .cmenu-side .mlabel { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 0 2px 4px; } .cmenu-col { display: grid; gap: 10px; } .mbtn2 { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 12px 20px; border-radius: 14px; border: 1.5px solid var(--c); color: var(--text); text-decoration: none; font-weight: 700; font-size: 1rem; background: rgba(26,25,24,.45); transition: background-color .2s, color .2s; } .mbtn2 .arr { transition: transform .2s; } .mbtn2:hover, .mbtn2:focus-visible { background: var(--c); color: var(--on); } .mbtn2:hover .arr { transform: translateX(4px); } html[data-theme="light"] .hero .mbtn2 { background: rgba(255,255,255,.7); } html[data-theme="light"] .hero .mbtn2:hover { background: var(--c); color: var(--on); } .cmenu-side .btn.wide { width: 100%; min-height: 56px; margin-top: 6px; } /* Apps: «Escolha o seu FlowOut Apps» | «60% de desconto / com cupom» */ .plan-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(26px, 3vw, 40px); } .plan-top .sec-head { margin-bottom: 0; } .plan-top .promo-head { text-align: left; margin: 0; max-width: none; } .plan-top .promo-head h3 { margin: 0 0 10px; line-height: 1; } .plan-top .promo-head .pm-big { display: block; font-size: clamp(2rem, 3.4vw, 4rem); font-weight: 800; background: linear-gradient(90deg, #F7A71C 0%, #E8893A 55%, #CC6F4E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; white-space: nowrap; } .plan-top .promo-head .pm-sub { display: block; font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 800; color: var(--graphite); margin-top: 6px; } .light .plan-top .promo-head .pm-big { background-image: linear-gradient(90deg, #E8930F 0%, #D9772F 55%, #C0603F 100%); } @media (max-width: 960px) { .plan-top { grid-template-columns: minmax(0, 1fr); } } /* off-ON «Do material para a fala»: celular alinhado com a base da última caixa (ajustado pelo JS) */ #incluido .split { align-items: start; } #incluido .phone.fit img { width: auto; max-width: 100%; object-fit: contain; } /* PK_HOME5 · 24/10/2026: inicial com blocos curtos (método e apps) e 3 depoimentos */ .short2 .card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 40px); } .short2 .card h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.06; } .short2 .card h2 .ta, .short2 .card h2 .g { display: block; } .short2 .card p:not(.eyebrow) { margin: 0 0 8px; max-width: 46ch; } .short2 .card .eyebrow { margin: 0; align-self: flex-start; } .short2 .card .btn { align-self: flex-start; min-width: 240px; margin-top: auto; } .depo-more { justify-content: center; margin-top: clamp(20px, 2vw, 32px); } .depo-more .btn { min-width: 260px; } @media (max-width: 560px) { .short2 .card .btn, .depo-more .btn { width: 100%; min-width: 0; } } /* PK_HERONAV · 24/10/2026: Voltar + Início no topo das páginas internas, bandeiras ao lado */ body.tn-int .hero .hero-nav { position: absolute; top: 14px; right: 7.5vw; z-index: 7; } body.tn-int .hero .hero-nav .to-home { position: static; } @media (min-width: 961px) { body.tn-int .hero .lang-flags { top: 22px; right: calc(7.5vw + 250px); } } @media (max-width: 960px) { body.tn-int .hero .hero-nav { top: 10px; right: 16px; } body.tn-int .hero .lang-flags { top: 14px; left: 16px; right: auto; } body.tn-int .hero .hero-main { padding-top: 44px; } } body.tn-int .hero.sub { padding-top: 76px !important; } @media (max-width: 960px) { body.tn-int .hero.sub { padding-top: 64px !important; } body.tn-int .hero .hero-main { padding-top: 0; } } /* PK_DOTS · 24/10/2026: pontinhos das seções à direita */ .sec-dots { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; flex-direction: column; gap: 12px; } .sec-dots a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 22px; height: 22px; text-decoration: none; } .sec-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(160,160,160,.75); background: transparent; transition: transform .2s, background-color .2s, border-color .2s; } .sec-dots a.past i { border-color: var(--dc); } .sec-dots a.on i { background: var(--dc); border-color: var(--dc); transform: scale(1.45); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc) 22%, transparent); } .sec-dots .sd-lab { position: absolute; right: 28px; white-space: nowrap; padding: 5px 10px; border-radius: 8px; background: #1f1d1c; color: #fff; font-size: .78rem; font-weight: 700; border: 1px solid var(--dc); opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s, transform .2s; } .sec-dots a:hover .sd-lab, .sec-dots a:focus-visible .sd-lab { opacity: 1; transform: none; } @media (max-width: 600px) { .sec-dots { right: 4px; gap: 8px; } .sec-dots a { width: 16px; height: 16px; } .sec-dots i { width: 8px; height: 8px; } } @media print { .sec-dots { display: none !important; } } /* off-ON: atalhos entre as seções do conteúdo */ .sec-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: clamp(28px, 3vw, 44px); } .sec-links .btn { width: 100%; min-height: 48px; font-size: .9rem; padding: 10px 14px; } /* PK_HEROBOX · 24/10/2026: quadro do hero de Empresas alinhado com os pontinhos */ .hero-side.hb-on { position: relative; } .hero-side.hb-on .diag-box { display: flex; flex-direction: column; justify-content: center; } .hero-side.hb-on .diag-box .btn { align-self: stretch; } /* PK_BEN · 24/10/2026: off-ON, Benefício com o menu do conteúdo na coluna da direita (igual ao hero) */ .ben-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: clamp(28px, 5vw, 96px); align-items: center; justify-content: space-between; } .ben-split .sec-head { margin-bottom: 0; } @media (max-width: 900px) { .ben-split { grid-template-columns: minmax(0, 1fr); } } /* PK_LOGOS · 24/10/2026: empresas parceiras dentro do hero (Empresas) e de Depoimentos (Início), sem faixa solta */ .hero-logos { margin-top: 18px; } .hero-logos p, .proof-logos p { margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .hero-logos .ls-row { justify-content: flex-start; gap: 12px 26px; } .hero-logos .ls-row img { width: 46px; height: 46px; border-radius: 11px; } .hero-logos .ls-row a { font-size: .92rem; gap: 10px; } .proof-logos { margin: clamp(26px, 3vw, 40px) 0 clamp(22px, 2.6vw, 34px); text-align: center; } .proof-logos .ls-row img { width: 60px; height: 60px; border-radius: 13px; } @media (max-width: 560px) { .hero-logos .ls-row a span, .proof-logos .ls-row a span { display: inline; } } .foot-bottom { flex-wrap: wrap; gap: 6px 18px; } /* PK_GRAMFAQ · 24/10/2026: Aulas, «E a gramática?» com 2 depoimentos ao lado; FAQ com o título à esquerda e as perguntas numa coluna à direita */ .gram-split, .faq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .gram-split .sec-head, .faq-split .sec-head { margin-bottom: 0; } .gram-split .lead, .faq-split .lead { max-width: 42ch; } .gram-quotes { display: grid; gap: 16px; } .gq { margin: 0; padding: 22px 24px; border-radius: 16px; border: 1.5px solid var(--c); background: var(--surface); } .gq blockquote { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.6; } .gq blockquote::before { content: "“"; display: block; font-size: 2.6rem; line-height: .8; font-weight: 800; color: var(--c); margin-bottom: 4px; } .gq figcaption { display: flex; align-items: center; gap: 12px; } .gq img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c); } .gq b { display: block; font-size: .95rem; } .gq small { color: var(--muted); font-size: .8rem; } .faq.faq-one { grid-template-columns: minmax(0, 1fr); } @media (max-width: 900px) { .gram-split, .faq-split { grid-template-columns: minmax(0, 1fr); } } .gram-split .lead, .faq-split .lead { margin-top: 18px; } /* PK_MATSIDE · 24/10/2026: Material gratuito, o botão do kit no meio da coluna da direita */ .hero-split .hero-side.mat-side { align-self: center; justify-self: center; width: min(100%, 340px); } .mat-side .cta-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .mat-side .cta-note { text-align: center; } @media (min-width: 961px) { .mat-split .hero-main h1 { font-size: clamp(2.1rem, 3.5vw, 3.6rem); } } /* PK_CLOSESPLIT · 24/10/2026: seções finais com a coluna da direita preenchida (Sobre e Para mim) */ .close-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: clamp(28px, 5vw, 96px); align-items: center; justify-content: space-between; } .close-split .sec-head { margin-bottom: 0; } .close-card { display: flex; flex-direction: column; gap: 10px; } .close-card h3 { margin: 0; } .close-card p { margin: 0; } .close-card .btn { margin-top: 8px; width: 100%; min-height: 52px; } @media (max-width: 900px) { .close-split { grid-template-columns: minmax(0, 1fr); } } .close-card .eyebrow { align-self: flex-start; } /* PK_I18N */ /* PK_I18N_CSS · 24/10/2026: versões EN e ES */ .ha-grid:has(> .happ:only-child) { grid-template-columns: minmax(0, 1fr) !important; } .apps-layout:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr) !important; } .usd-per { font-size: .5em; font-weight: 700; margin-left: 2px; } a.lflag { display: block; } /* PK_COLORHIER: tarjetas del panel del alumno que no son avisos → celeste; el amarillo queda para avisos */ .c-sky { --c: #20a8ff; --on: #121110; --lg: linear-gradient(90deg, #45BABD 0%, #20a8ff 100%); } /* PK_APPSPLIT 25/10/2026: /apps/ = hub con tiles; una página por app; /apps/planos/ */ .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-tile .happ-txt { display: flex; flex-direction: column; height: 100%; justify-content: center; } .ap-tile .happ-for { font-size: .86rem; } .ap-tlogo { display: block; margin: 0 0 12px; } .ap-tlogo img { height: clamp(42px, 3.6vw, 58px); width: auto; display: block; } .ap-tlogo .ap-logo-l { display: none; } html[data-theme="light"] .ap-tlogo .ap-logo-l { display: block; } html[data-theme="light"] .ap-tlogo .ap-logo-d { display: none; } .ap-tlogo-v img { height: clamp(64px, 5.4vw, 84px); } .ap-hlogo { margin-bottom: 16px; } .ap-hlogo img { height: clamp(60px, 5.4vw, 90px); } .ap-tile-ic { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; } .ap-tile-n { display: flex; align-items: center; gap: 10px; font-size: clamp(1.1rem, 1.3vw, 1.35rem) !important; } .ap-tile-n img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; } .ap-hero .wrap.apps-hero { grid-template-columns: minmax(0, 1fr) clamp(230px, 22vw, 330px); } .ap-hero-sm .wrap.apps-hero { grid-template-columns: minmax(0, 1fr); } .ap-main h1 { font-size: clamp(2.2rem, 4.2vw, 4.6rem); line-height: 1.02; margin: 6px 0 14px; } .ap-main h1 .ta { display: block; } .ap-main .lead { max-width: 52ch !important; } .ap-logo { height: clamp(80px, 7vw, 110px); width: auto; display: block; margin-bottom: 12px; } .ap-logo-l { display: none; } html[data-theme="light"] .ap-logo-l { display: block; } html[data-theme="light"] .ap-logo-d { display: none; } .ap-feat { margin: 18px 0 20px; padding: 18px 22px; max-width: 640px; } .ap-feat ul:not(.xapp-help) { margin: 0; padding-left: 1.1em; line-height: 1.45; } .ap-feat ul:not(.xapp-help) li { margin-bottom: 8px; } .ap-feat ul br { display: none; } .ap-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; } .ap-cta .app-cta { margin: 0; } .ap-cta .happ-plan { padding: 12px 24px; font-size: 1rem; } .ap-phone .phone { max-width: 330px; margin: 0 auto; } .ap-steps { list-style: none; margin: 0 0 clamp(36px, 4vw, 64px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); } .ap-step { display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: clamp(16px, 1.6vw, 24px); } .ap-step .phone { max-width: 240px; width: 100%; margin: 0 auto; border-radius: 26px; padding: 6px; } .ap-step .phone img { border-radius: 20px; display: block; } .ap-step .ap-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: var(--on); font-weight: 800; margin-bottom: 8px; } .ap-step h3 { margin: 0 0 8px; font-size: clamp(1.1rem, 1.3vw, 1.35rem); } .ap-step p { margin: 0 0 8px; color: var(--muted); line-height: 1.45; max-width: 46ch; } .ap-step p b { color: var(--text); } .section .ap-cta { justify-content: center; margin-top: clamp(28px, 3vw, 48px); } .ap-news { max-width: 820px; margin: 0 auto; } .xapp-st { margin: 0 0 8px; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; } .xapp-help { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .xapp-help li { position: relative; padding-left: 32px; line-height: 1.4; } .xapp-help li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: var(--on); font-size: .8rem; font-weight: 800; display: grid; place-items: center; } .xapp-inst { font-size: .92rem; font-weight: 600; } @media (max-width: 1100px) { .ap-hero .wrap.apps-hero { grid-template-columns: minmax(0, 1fr); } .ap-phone .phone { max-width: 260px; } } @media (max-width: 900px) { .ap-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .ap-step { scroll-snap-align: start; } } @media (max-width: 700px) { .ap-grid { grid-template-columns: minmax(0, 1fr); } } .ap-inst { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--c, var(--teal)); color: var(--text); font-weight: 700; font-size: 1rem; text-decoration: none; } .ap-inst:hover, .ap-inst:focus-visible { background: var(--c, var(--teal)); color: var(--on, #121110); } .ap-igrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); } .ap-icard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 16px; border: 1px solid var(--c); border-radius: 16px; background: var(--surface); } .ap-icard .ap-tlogo { margin: 0; height: 52px; display: flex; align-items: center; justify-content: center; } .ap-icard .ap-tlogo img { height: 40px; } .ap-ilab { margin: 0; font-size: .92rem; font-weight: 600; color: var(--muted); } .ap-ibtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 150px; min-height: 44px; margin-top: 4px; padding: 8px 18px; border: 1px solid var(--c); border-radius: 999px; color: var(--text); font-size: .92rem; font-weight: 700; text-decoration: none; } .ap-ibtn:hover, .ap-ibtn:focus-visible { background: var(--c); color: var(--on); } @media (max-width: 1000px) { .ap-igrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .ap-igrid { grid-template-columns: minmax(0, 1fr); } } /* PK_APPCOLORS: un color por app (Guisho 25/10/2026): verde, amarillo, azul, rosa */ .c-lime { --c: #BACC05; --on: #121110; --lg: linear-gradient(90deg, #45BABD 0%, #BACC05 100%); } .c-yellow { --c: #FFB000; --on: #121110; --lg: linear-gradient(90deg, #FF8800 0%, #FFB000 100%); } .c-pink { --c: #FF47C6; --on: #121110; --lg: linear-gradient(90deg, #972B8A 0%, #FF47C6 100%); } /* PK_ICARDWHITE 26/10/2026: logos de los apps sobre fondo blanco en las tarjetas de instalar (visibles en tema claro y oscuro) */ .ap-icard .ap-tlogo { background: #fff; border-radius: 12px; padding: 8px 16px; height: 60px; width: 100%; box-sizing: border-box; } .ap-icard .ap-tlogo img { height: 40px; max-width: 100%; object-fit: contain; } .ap-icard .ap-tlogo .ap-logo-l, html[data-theme="light"] .ap-icard .ap-tlogo .ap-logo-l, html[data-theme="dark"] .ap-icard .ap-tlogo .ap-logo-l { display: block; } .ap-icard .ap-tlogo .ap-logo-d, html[data-theme="light"] .ap-icard .ap-tlogo .ap-logo-d, html[data-theme="dark"] .ap-icard .ap-tlogo .ap-logo-d { display: none; } /* PK_PLANOSNOHERO 26/10/2026: sin el hero de /apps/planos; banderas arriba a la izquierda de la sección de planes */ #planos-apps > .lang-flags { top: 26px; left: 7.5vw; right: auto; } @media (max-width: 960px) { #planos-apps > .lang-flags { top: 18px; left: 16px; right: auto; } } /* PK_PLANCTA 26/10/2026: en las páginas de cada app, «Ver os planos» es el botón destacado (color del app, con brillo) y «Abrir o app» queda al lado, con borde del mismo color */ .ap-cta .ap-plancta { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--c), 0 10px 30px -8px var(--c), 0 0 28px -6px var(--c); animation: apGlow 2.4s ease-in-out infinite; } .ap-cta .ap-plancta::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: apShine 3s ease-in-out infinite; z-index: -1; pointer-events: none; } @keyframes apShine { 0%, 55% { left: -60%; } 100% { left: 130%; } } @keyframes apGlow { 0%, 100% { box-shadow: 0 0 0 1px var(--c), 0 10px 30px -8px var(--c), 0 0 22px -8px var(--c); } 50% { box-shadow: 0 0 0 1px var(--c), 0 12px 36px -6px var(--c), 0 0 36px -2px var(--c); } } .ap-cta .ap-opencta { border-color: var(--c); } .ap-cta .ap-opencta:hover, .ap-cta .ap-opencta:focus-visible { background: var(--c); color: var(--on, #121110); } @media (prefers-reduced-motion: reduce) { .ap-cta .ap-plancta, .ap-cta .ap-plancta::after { animation: none; } } /* PK_FLAGBAR 26/10/2026: banderas en la barra de arriba, a la derecha de «Sou aluno» (todo el sitio); Voltar/Início alineados con el borde derecho de la barra */ .topnav .tn-flags { position: static !important; top: auto !important; right: auto !important; left: auto !important; display: flex; align-items: center; gap: 6px; margin-left: 6px; z-index: auto; } .topnav .tn-flags .lflag { width: 26px; height: 18px; } @media (max-width: 420px) { .topnav .tn-flags { gap: 4px; margin-left: 2px; } .topnav .tn-flags .lflag { width: 22px; height: 15px; } } body.tn-int .sec-nav, body.tn-int .hero .hero-nav, body.tn-int .section > .sec-nav { right: clamp(14px, 2.4vw, 40px) !important; left: auto !important; } /* PK_APHERO2: páginas de cada app — texto y celular más cerca del centro; botones un poco más abajo */ @media (min-width: 1101px) { .ap-hero .wrap.apps-hero:has(> .ap-phone) { grid-template-columns: minmax(0, 720px) clamp(230px, 22vw, 330px); justify-content: center; column-gap: clamp(48px, 7vw, 140px); } } .ap-hero .ap-main .ap-cta { margin-top: clamp(22px, 3vh, 34px); } @media (max-width: 420px) { .topnav .tn-links { gap: 6px; } .topnav .tn-menu { min-width: 0; padding: 0 10px; } .topnav .tn-aluno { padding: 0 10px; gap: 6px; } .topnav .tn-logo img { width: 72px; } } @media (max-width: 420px) { .topnav .tn-aluno { white-space: nowrap; font-size: .7rem; letter-spacing: .02em; } .topnav .tn-aluno svg { width: 15px; height: 15px; } } /* PK_APHERO3 26/10/2026: «Instalar no celular» a la derecha del celular (computadora), con flecha de descarga afuera del botón */ .ap-inst-side { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; } .ap-inst-side[hidden] { display: none; } .ap-inst-side .ap-inst { white-space: nowrap; } .ap-inst-arr { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--c, var(--teal)); animation: apArr 1.6s ease-in-out infinite; } .ap-inst-arr svg { width: 20px; height: 20px; fill: none; stroke: var(--c, var(--teal)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @keyframes apArr { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .ap-inst-arr { animation: none; } } /* PK_FULLSEC 26/10/2026: páginas de los apps — cada sección ocupa el alto de la pantalla (computadora y celular), contenido centrado; la línea en movimiento queda al pie del hero */ body.tn-int:has(.ap-hero) main > .hero.sub, body.tn-int:has(.ap-hero) main > .section { min-height: calc(100svh - 60px); display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; box-sizing: border-box; } body.tn-int:has(.ap-hero) main > .hero.sub { padding-bottom: clamp(80px, 10vh, 120px) !important; } body.tn-int:has(.ap-hero) main > .hero.sub > .wrap, body.tn-int:has(.ap-hero) main > .section > .wrap { width: 100%; } body.tn-int:has(.ap-hero) .hero.sub .wave { height: clamp(80px, 12vh, 120px); } html:has(body.tn-int .ap-hero) { scroll-snap-type: y proximity; scroll-padding-top: 60px; } @media (max-width: 960px) { body.tn-int:has(.ap-hero) main > .hero.sub, body.tn-int:has(.ap-hero) main > .section { min-height: calc(100svh - 56px); } html:has(body.tn-int .ap-hero) { scroll-padding-top: 56px; } } /* PK_SEEMORE 26/10/2026: «Ver mais ↓» centrado sobre la línea en movimiento */ .ap-more { all: unset; box-sizing: border-box; position: absolute; left: 50%; bottom: clamp(26px, 5vh, 52px); transform: translateX(-50%); z-index: 5; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 16px 4px; border-radius: 999px; color: var(--text); font: 700 .82rem/1.2 Poppins, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .ap-more svg { width: 26px; height: 26px; fill: none; stroke: var(--c, var(--teal)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: apArr 1.6s ease-in-out infinite; } .ap-more:hover, .ap-more:focus-visible { color: var(--c, var(--teal)); } @media (prefers-reduced-motion: reduce) { .ap-more svg { animation: none; } } /* PK_ACCWHITE 26/10/2026: «Como ter acesso» — paneles con fondo blanco y texto oscuro (los 3 idiomas, tema claro y oscuro) */ #acesso .acc3 > .card { background: #fff !important; color: #1d1c1b; --text: #1d1c1b; } #acesso .acc3 > .card h3, #acesso .acc3 > .card p, #acesso .acc3 > .card b { color: #1d1c1b; } #acesso .acc3 > .card p { color: #444; } #acesso .acc3 > .card .btn { color: #1d1c1b; } #acesso .acc3 > .card .btn:hover, #acesso .acc3 > .card .btn:focus-visible { color: var(--on, #121110); } /* PK_ACCSPLIT 26/10/2026: «Como ter acesso» (izquierda) + «Instale os apps» (derecha) en una sola sección de 2 columnas */ #acesso .acc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; } #acesso .acc-col .sec-head { margin-bottom: clamp(18px, 2.4vw, 30px); } #acesso .acc-col#instalar { scroll-margin-top: 80px; } #acesso .acc3 { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; } #acesso .acc3 > .card { padding: 20px 22px; } #acesso .acc3 > .card h3 { margin: 0 0 14px; } #acesso .acc3 > .card p { margin: 0 0 8px; } #acesso .acc3 > .card .btn { background: var(--c) !important; border: 1.5px solid var(--c) !important; color: var(--on, #121110) !important; margin-top: 10px; } #acesso .acc3 > .card .btn:hover, #acesso .acc3 > .card .btn:focus-visible { background: transparent !important; color: #1d1c1b !important; } #acesso .ap-igrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; } #acesso .ap-icard { background: #fff !important; padding: 18px 16px; gap: 12px; } #acesso .ap-icard .ap-tlogo { background: transparent; padding: 0; } #acesso .ap-icard .ap-ilab { color: #444; } #acesso .ap-icard .ap-ibtn { background: var(--c); border: 1.5px solid var(--c); color: var(--on, #121110); } #acesso .ap-icard .ap-ibtn:hover, #acesso .ap-icard .ap-ibtn:focus-visible { background: transparent; color: #1d1c1b; } @media (max-width: 960px) { #acesso .acc-split { grid-template-columns: minmax(0, 1fr); } } /* PK_ACCSPLIT2 26/10/2026: paneles de acceso 30% más angostos y centrados en su columna; tiles de instalar más altos, alineados abajo con los de acceso */ @media (min-width: 961px) { #acesso .acc-split { align-items: stretch; } #acesso .acc3 { width: 70%; margin-inline: auto; } #acesso .acc-col#instalar { display: flex; flex-direction: column; } #acesso .acc-col#instalar .ap-igrid { flex: 1 1 auto; grid-auto-rows: 1fr; } #acesso .acc-col#instalar .ap-icard { justify-content: center; } } @media (min-width: 961px) { #acesso .acc-col { display: flex; flex-direction: column; } #acesso .acc-col .acc3 { flex: 1 1 auto; grid-auto-rows: 1fr; } #acesso .acc3 > .card, #acesso .ap-icard { margin: 0 !important; } #acesso .acc-col .sec-head { min-height: 0; } } #acesso .reveal { transform: none !important; opacity: 1 !important; } /* ===== PK_SITE_V3 · 27/10/2026 (computadora) ===== 1) cada sección ocupa la pantalla entera (no se ve la siguiente), contenido centrado 2) en los bloques de 2 columnas: espacio entre bloques = margen izquierdo = margen derecho (7,5vw) 3) bloques más grandes: el de la derecha llena su columna (+ letra más grande), el de la izquierda también crece */ @media (min-width: 961px) { html { scroll-padding-top: 60px; } body.tn-int main > .hero.sub, body.tn-int main > .section { min-height: calc(100svh - 60px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } body.tn-int main > .section { padding-block: clamp(64px, 8vh, 80px) clamp(28px, 4vh, 44px) !important; } body.tn-int main > .hero.sub > .wrap, body.tn-int main > .section > .wrap { width: 100%; } body.tn-int .wrap { padding-left: 7.5vw !important; padding-right: 7.5vw !important; } body.tn-int .sec-head { margin-bottom: clamp(20px, 3vh, 40px); } /* topo de 2 columnas (Aulas, off-ON, Empresas, Diagnóstico, Material) */ body.tn-int .hero .wrap.hero-grid.has-paths.hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 7.5vw !important; } body.tn-int .hero-split .hero-side, body.tn-int .hero-split .hero-side.aula-side, body.tn-int .hero-split .hero-side.mat-side { width: 100% !important; justify-self: stretch !important; } body.tn-int .hero-split .hero-main h1 { font-size: clamp(2.6rem, 4.6vw, 4.9rem); } body.tn-int .hero-split .hero-main .lead { font-size: clamp(1.15rem, 1.45vw, 1.5rem); max-width: 40ch; } body.tn-int .hero-split .hero-main .actions .btn { min-height: 60px; font-size: 1.08rem; } body.tn-int .hero-split .hero-side .btn, body.tn-int .hero-split .hero-side .mbtn2 { min-height: 64px; font-size: 1.12rem; } body.tn-int .hero-split .hero-side .eyebrow { font-size: .95rem; } /* «Como é uma aula» (derecha): +50% */ body.tn-int .aula-side .h-sm { font-size: clamp(2rem, 2.9vw, 3rem); } body.tn-int .aula-side .as-lead { font-size: 1.2rem; max-width: none; } body.tn-int .aula-steps { gap: 16px; } body.tn-int .aula-steps .card { padding: 22px 24px; } body.tn-int .aula-steps .card .num { font-size: 2.3rem; } body.tn-int .aula-steps .card h3 { font-size: 1.4rem; } body.tn-int .aula-steps .card p { font-size: 1.12rem; line-height: 1.5; } /* bloques de 2 columnas dentro de las secciones */ body.tn-int :is(.split, .gram-split, .faq-split, .sug-split, .ben-split, .close-split, .como2, .founder, .mat-grid, .acc-split, .plan-top) { column-gap: 7.5vw !important; } body.tn-int :is(.split, .gram-split, .faq-split, .sug-split, .ben-split, .close-split, .como2, .founder, .mat-grid, .acc-split) > :not(.phone):not(.phone-wrap):not(img):not(figure) { justify-self: stretch; max-width: none; min-width: 0; } body.tn-int .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Aulas: tarjetas de «Como é uma aula» sin pasar del alto de la pantalla */ body.tn-int .aula-steps .card { padding: 18px 22px; } body.tn-int .aula-steps .card p { font-size: 1.05rem; line-height: 1.45; } body.tn-int .aula-side .h-sm { font-size: clamp(1.9rem, 2.6vw, 2.7rem); } /* off-ON · «O que está incluído»: 6 tarjetas en 3 columnas y el celular del alto de la pantalla */ body.tn-int #incluido .split { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } body.tn-int #incluido .grid.incl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.tn-int #incluido .grid.incl .card { padding: 18px 18px; } body.tn-int #incluido .phone { max-width: min(310px, calc((100svh - 200px) * .47)); } body.tn-int #incluido .sec-head .lead { max-width: 62ch; } /* off-ON · temario: 10 partes en una pantalla */ body.tn-int .syllabus.g5 { gap: 14px; } body.tn-int .syllabus.g5 .card { padding: 16px 18px; } body.tn-int .syllabus.g5 .card .num { font-size: 2rem; } /* Aulas · planos: las 4 tarjetas en una pantalla */ body.tn-int #planos .plan ul { gap: 5px; font-size: .9rem; margin-bottom: 14px; } body.tn-int #planos .plan .sum { margin-bottom: 10px; } body.tn-int #planos .plan h3 { font-size: clamp(1.5rem, 2vw, 2rem); } /* Aulas · planos (más compacto para entrar en una pantalla) */ body.tn-int #planos .sec-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7.5vw; align-items: end; margin-bottom: 22px; } body.tn-int #planos .sec-head .eyebrow { grid-column: 1 / -1; } body.tn-int #planos .sec-head .lead { margin: 0 0 8px; } body.tn-int #planos .plan { padding: 20px 22px; } body.tn-int #planos .plan ul { gap: 3px; font-size: .86rem; line-height: 1.35; } body.tn-int #planos .plan .sum { font-size: .9rem; line-height: 1.4; } body.tn-int #planos .plan .app-benefit { font-size: .84rem; line-height: 1.4; padding: 10px 12px; margin-bottom: 12px; } body.tn-int #planos .plan .btn { min-height: 46px; } body.tn-int .hero.sub:has(.hero-split) { padding-bottom: 136px !important; } body.tn-int #planos .sec-head h2 { font-size: clamp(2rem, 3vw, 3.1rem); } body.tn-int #planos .plan h3 { margin: 2px 0 4px; } body.tn-int #planos .grid.g4 { gap: 14px; } body.tn-int main > #planos.section { padding-block: 52px 22px !important; } body.tn-int #planos .plan ul { font-size: .84rem; } body.tn-int #planos .plan .who { font-size: .68rem; } /* temario y «incluido» del off-ON */ body.tn-int main > #temario.section { padding-block: 56px 24px !important; } body.tn-int #temario .sec-head h2 { font-size: clamp(2rem, 3vw, 3.1rem); } body.tn-int main > #incluido.section { padding-block: 56px 24px !important; } body.tn-int #incluido .sec-head { margin-bottom: 16px; } body.tn-int #incluido .sec-head h2 { font-size: clamp(2rem, 3vw, 3.1rem); } body.tn-int #incluido .grid.incl .card p { font-size: .88rem; line-height: 1.45; } body.tn-int #incluido .sec-head .lead { font-size: 1.05rem; line-height: 1.55; } body.tn-int #incluido .actions { margin-top: 14px; } body.tn-int #incluido .grid.incl .card h3 { font-size: 1rem; } body.tn-int #incluido .sec-head .lead { max-width: none; } body.tn-int #incluido .grid.incl .card { padding: 14px 16px; } body.tn-int #incluido .grid.incl .card p { font-size: .85rem; } body.tn-int #planos .plan ul { font-size: .82rem; line-height: 1.32; } body.tn-int #planos .plan { padding: 18px 20px; } body.tn-int main > #incluido.section { padding-block: 44px 16px !important; } body.tn-int #incluido .grid.incl { gap: 12px; } body.tn-int #incluido .actions .btn { min-height: 48px; } body.tn-int #incluido .sec-head h2 { font-size: clamp(1.9rem, 2.7vw, 2.8rem); } body.tn-int #incluido .sec-head .lead { margin-top: 10px; } /* páginas de cada app · «Como funciona»: celulares del alto que entra en la pantalla */ body.tn-int .ap-steps { margin-bottom: 16px; } body.tn-int .ap-step .phone { max-width: min(190px, calc((100svh - 610px) * .46)) !important; } body.tn-int .ap-step .ap-step-t p { font-size: .88rem !important; line-height: 1.4 !important; } body.tn-int .ap-step { padding: 18px 20px !important; } body.tn-int .ap-step .ap-step-t h3 { margin: 6px 0 4px; } body.tn-int .ap-step .ap-step-t p { font-size: .92rem; line-height: 1.45; } /* Empresas · casos y números */ body.tn-int :is(#caso, #caso-2) .sec-head .lead { max-width: 70ch; } body.tn-int :is(#caso, #caso-2) .case .card { padding: 18px 22px; } body.tn-int main > .section.proof { padding-block: 52px 22px !important; } body.tn-int .proof .sec-head { margin-bottom: 18px; } body.tn-int .proof-nums .card { padding: 16px 20px; } /* Sobre · principios */ body.tn-int .principles .card { padding: 18px 20px; } body.tn-int .principles .card p { font-size: .92rem; line-height: 1.45; } body.tn-int main > .section:has(.ap-steps) { padding-block: 52px 20px !important; } body.tn-int .section:has(.ap-steps) .sec-head { margin-bottom: 16px; } body.tn-int .section:has(.ap-steps) .sec-head h2 { font-size: clamp(1.9rem, 2.6vw, 2.7rem); } body.tn-int .ap-step .ap-num { width: 32px; height: 32px; font-size: .85rem; } body.tn-int .ap-steps:has(> li:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr) !important; } body.tn-int .ap-step .ap-step-t p { font-size: .86rem !important; } body.tn-int :is(#caso, #caso-2) { padding-block: 52px 20px !important; } body.tn-int :is(#caso, #caso-2) .sec-head { margin-bottom: 16px; } body.tn-int :is(#caso, #caso-2) .sec-head h2 { font-size: clamp(1.9rem, 2.7vw, 2.8rem); } body.tn-int .proof .sec-head h2 { font-size: clamp(1.9rem, 2.7vw, 2.8rem); } body.tn-int .proof .depo-wrap .card { padding: 16px 20px; } body.tn-int main > .section.proof { padding-block: 30px 6px !important; } body.tn-int .proof .proof-nums { gap: 12px; } body.tn-int .proof .proof-emp { margin: 10px 0; } body.tn-int .proof .depo-wrap :is(p, blockquote) { font-size: .92rem; line-height: 1.45; } body.tn-int .proof .sec-head .lead { margin-top: 8px; } body.tn-int .proof .proof-nums .card :is(b, strong, .n) { font-size: clamp(1.6rem, 2.2vw, 2.2rem); } } /* ===== PK_SITE_V4 (27/10/2026): planos de los apps entran en una pantalla (computadora) ===== */ @media (min-width: 961px) { body.tn-int #planos-apps { padding-top: 64px; padding-bottom: 24px; } #planos-apps .plan-top { margin-bottom: 14px; gap: 7.5vw; align-items: end; } #planos-apps .plan-top .sec-head { margin-bottom: 0; } #planos-apps .plan-top h2 { font-size: clamp(1.6rem, 2.3vw, 2.2rem); margin: 4px 0 6px; } #planos-apps .plan-top .lead { font-size: .9rem; line-height: 1.45; margin: 0; max-width: 46ch; } #planos-apps .promo-head h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin: 0 0 4px; line-height: 1.1; } #planos-apps .promo-head p { font-size: .88rem; line-height: 1.45; margin: 0; } #planos-apps .tiers5 .plan { padding-top: 14px; padding-bottom: 14px; } #planos-apps .tiers5 .plan .who { font-size: 1.15rem; } #planos-apps .tiers5 .plan .sum { font-size: .82rem; margin: 2px 0 6px; min-height: 0; } #planos-apps .tiers5 .plan .off { transform: scale(.78); margin: -4px auto -6px; } #planos-apps .tiers5 .plan .tot { font-size: .8rem; margin: 2px 0 0; } #planos-apps .tiers5 .plan .price { margin: 0 0 2px; } #planos-apps .tiers5 .plan .price .val { font-size: clamp(1.4rem, 1.7vw, 2rem); } #planos-apps .tiers5 .plan .norm { padding: 3px 6px; margin: 2px 0 6px; font-size: .78rem; } #planos-apps .tiers5 .plan .norm .nl { display: inline; margin-right: 6px; font-size: .62rem; } #planos-apps .tiers5 .plan .pk, #planos-apps .tiers5 .plan .pk2 { display: none; } #planos-apps .tiers5 .plan .fl, #planos-apps .tiers5 .plan .ai { font-size: .78rem; margin: 2px 0 6px; padding-top: 4px; padding-bottom: 4px; } #planos-apps .tiers5 .plan ul { font-size: .8rem; line-height: 1.32; margin: 6px 0 8px; } #planos-apps .tiers5 .plan ul li { margin: 0 0 5px; } #planos-apps .tiers5 .plan .cup-in { margin: 4px 0 2px; } #planos-apps .tiers5 .plan .cup-in input { padding-top: 7px; padding-bottom: 7px; font-size: .8rem; } #planos-apps .tiers5 .plan .cup-msg { margin: 0; min-height: 0; } #planos-apps .tiers5 .plan .pay-stack .btn, #planos-apps .tiers5 .plan > .btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; margin-top: auto; } #planos-apps .tier-note { margin: 8px 0 0; } } @media (min-width: 961px) { body #planos-apps .tiers5 .plan .off { transform: none; font-size: .78em; padding: 6px 14px; margin: 2px auto 6px; } body #planos-apps .tiers5 .plan .price { margin: 0 0 4px; } body #planos-apps .tiers5 .plan .norm { margin: 0 0 6px; padding: 3px 6px; } body #planos-apps .tiers5 .plan .norm .nl { display: inline; margin: 0 6px 0 0; } body #planos-apps .tiers5 .plan ul { margin: 4px 0 8px; } body #planos-apps .tiers5 .plan ul li { margin-bottom: 4px; } body #planos-apps .tiers5 .plan .pk2 { margin: 0; } body #planos-apps .business-row { margin-top: 10px; padding: 10px 18px; display: flex; align-items: center; gap: 20px; } body #planos-apps .business-row h3 { font-size: 1rem; margin: 0; display: inline; } body #planos-apps .business-row p { display: inline; margin: 0 0 0 10px; font-size: .85rem; } body #planos-apps .business-row .tag { margin-right: 10px; } body #planos-apps .business-row .actions { margin: 0 0 0 auto; } body #planos-apps .business-row .actions .btn { min-height: 38px; padding-top: 6px; padding-bottom: 6px; } } @media (min-width: 961px) { body #planos-apps .tier.promo .off { font-size: 1.05rem !important; padding: 6px 12px !important; margin: 2px auto 6px !important; } body #planos-apps .tier.promo .off small { display: inline !important; margin: 0 0 0 6px !important; font-size: .62rem !important; } body #planos-apps .tier.promo .norm { margin: 0 0 6px !important; padding: 3px 6px !important; font-size: .76rem !important; } body #planos-apps .tier.promo .norm .nl { display: inline !important; margin: 0 6px 0 0 !important; } body #planos-apps .tier.promo .price { margin: 0 0 4px !important; } } /* ===== PK_SITE_V5 (27/10/2026): planos de los apps, segunda compactación ===== */ @media (min-width: 961px) { body #planos-apps { padding-top: 58px !important; padding-bottom: 18px !important; } body #planos-apps .plan-top { margin-bottom: 10px; } body #planos-apps .plan-top .eyebrow { margin: 0 0 2px; } body #planos-apps .plan-top h2 { font-size: clamp(1.45rem, 2vw, 1.95rem); margin: 2px 0 4px; line-height: 1.1; } body #planos-apps .plan-top .lead { font-size: .84rem; line-height: 1.38; max-width: 58ch; } body #planos-apps .promo-head h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: clamp(1.25rem, 1.7vw, 1.65rem); margin: 0 0 2px; } body #planos-apps .promo-head h3 .pm-sub { font-size: .55em; } body #planos-apps .promo-head p { font-size: .82rem; line-height: 1.38; } body #planos-apps .tiers5 .plan { padding: 12px 14px !important; } body #planos-apps .tiers5 .plan .who { font-size: 1.05rem; } body #planos-apps .tiers5 .plan .sum { font-size: .76rem; line-height: 1.3; margin: 1px 0 4px; } body #planos-apps .tiers5 .plan ul { font-size: .74rem; line-height: 1.26; margin: 2px 0 6px; } body #planos-apps .tiers5 .plan ul li { margin-bottom: 2px; } body #planos-apps .tiers5 .plan .pay-stack .btn, body #planos-apps .tiers5 .plan > .btn { min-height: 36px; padding-top: 6px; padding-bottom: 6px; } body #planos-apps .tier-note { margin: 6px 0 0; font-size: .78rem; } body #planos-apps .business-row { margin-top: 8px; padding: 6px 16px; } body #planos-apps .business-row .dots { display: none; } body #planos-apps .business-row p { font-size: .8rem; } } @media (min-width: 961px) { body #planos-apps .plan-top h2 .ta, body #planos-apps .plan-top h2 .g { display: inline !important; } body #planos-apps .plan-top .eyebrow { line-height: 1.2; } body #planos-apps .promo-head h3 .pm-big { font-size: 1em !important; line-height: 1.1 !important; } body #planos-apps .tiers5 .plan .norm { display: flex !important; justify-content: center; align-items: baseline; gap: 6px; line-height: 1.25 !important; } body #planos-apps .business-row > div:not(.actions) { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } body #planos-apps .business-row > div:not(.actions) p { display: block !important; margin: 0 !important; flex: 1; line-height: 1.3; } body #planos-apps .business-row h3 { white-space: nowrap; } body #planos-apps .business-row .actions .btn { min-height: 34px; } } @media (min-width: 961px) { body #planos-apps .tiers5 .plan .norm { flex-direction: row !important; } body #planos-apps .tiers5 .plan .cup-in input { padding-top: 5px !important; padding-bottom: 5px !important; } body #planos-apps .tiers5 .plan .cup-in .cup-ok { min-height: 0; padding-top: 4px; padding-bottom: 4px; } } @media (min-width: 961px) { body #planos-apps .tiers5 .plan.is-pop { padding-top: 24px !important; } } @media (min-width: 961px) { body #planos-apps .tiers5 .plan .norm, body #planos-apps .tiers5 .plan .norm s, body #planos-apps .tiers5 .plan .norm .nl { white-space: nowrap !important; } body #planos-apps .tiers5 .plan .norm .nl { letter-spacing: .04em !important; } } /* ===== PK_SITE_V5b: home · depoimentos entra en una pantalla (computadora) ===== */ @media (min-width: 961px) { body .section.proof { padding-top: 60px !important; padding-bottom: 28px !important; } body .section.proof .sec-head { margin-bottom: 22px !important; } body .section.proof .sec-head h2 .ta, body .section.proof .sec-head h2 .g { display: inline !important; } body .section.proof .sec-head h2 { font-size: clamp(1.8rem, 2.6vw, 2.5rem) !important; } body .section.proof .proof-nums .stat { padding: 14px 22px !important; display: flex; align-items: center; gap: 16px; } body .section.proof .proof-nums .stat .num { font-size: clamp(2.4rem, 3.4vw, 3.2rem) !important; line-height: 1 !important; margin: 0 !important; flex: none; } body .section.proof .proof-nums .stat p { margin: 0 !important; line-height: 1.35; } body .section.proof .proof-logos { margin: 16px 0 12px !important; } body .section.proof .depo-wrap { margin-top: 10px !important; } body .section.proof .depo { padding: 18px 22px 16px !important; } } @media (min-width: 961px) { body .section.proof .proof-nums .stat .dots { display: none; } } /* ===== PK_SITE_V5c: /apps/ y /aluno/ entran en una pantalla (computadora) ===== */ @media (min-width: 961px) { body .hero.sub:has(.ap-grid) { padding-top: 62px !important; padding-bottom: 96px !important; } body .hero.sub:has(.ap-grid) .ha-t { margin-bottom: 14px !important; } body .hero.sub:has(.ap-grid) .ha-t .ta, body .hero.sub:has(.ap-grid) .ha-t .g { display: inline !important; } body .hero.sub:has(.ap-grid) .ap-grid { gap: 16px !important; } body .hero.sub:has(.ap-grid) .ap-tile { padding-top: 16px !important; padding-bottom: 16px !important; } body .hero.sub:has(.sug-form) { padding-top: 62px !important; padding-bottom: 110px !important; } body .hero.sub:has(.sug-form) .hero-main { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); column-gap: 7vw; align-items: start; max-width: none; } body .hero.sub:has(.sug-form) .hero-main > * { grid-column: 1; } body .hero.sub:has(.sug-form) .hero-main > .actions { grid-column: 2; grid-row: 1 / span 6; margin-top: 0 !important; align-self: center; } body .hero.sub:has(.sug-form) .hero-main > .actions .sug-form { width: 100%; max-width: none; } } @media (min-width: 961px) { body .hero.sub:has(.ap-grid) { padding-bottom: 120px !important; } body .hero.sub:has(.ap-grid) .ap-tile { padding-top: 14px !important; padding-bottom: 14px !important; } body .hero.sub:has(.ap-grid) .ap-tlogo { margin-bottom: 6px !important; height: 42px; } body .hero.sub:has(.ap-grid) .ap-tlogo img { max-height: 42px; width: auto; } body .hero.sub:has(.ap-grid) .app-lang { margin-bottom: 4px !important; } body .hero.sub:has(.ap-grid) .happ-txt h3 { margin-bottom: 4px !important; } body .hero.sub:has(.ap-grid) .happ-for { margin-bottom: 8px !important; } body .hero.sub:has(.ap-grid) .phone { max-height: 240px; } body .hero.sub:has(.ap-grid) .phone img { max-height: 226px; object-fit: cover; object-position: top; } } /* ===== PK_SITE_V5d: /apps/planos · cómo tener acceso entra en una pantalla ===== */ @media (min-width: 961px) { body #acesso { padding-top: 64px !important; padding-bottom: 28px !important; } body #acesso .sec-head { margin-bottom: 16px !important; } body #acesso .sec-head h2 { font-size: clamp(1.7rem, 2.4vw, 2.3rem) !important; } body #acesso .sec-head h2 .ta, body #acesso .sec-head h2 .g { display: inline !important; } body #acesso .sec-head .lead { font-size: .92rem !important; margin-top: 4px !important; } body #acesso .acc3 { gap: 12px !important; align-content: start; } body #acesso .acc3 .card { padding: 16px 20px !important; } body #acesso .acc3 .card h3 { margin-bottom: 6px !important; } body #acesso .acc3 .card p { margin-top: 0 !important; margin-bottom: 6px !important; line-height: 1.4; } body #acesso .acc3 .card .btn { margin-top: 8px !important; min-height: 40px; padding-top: 8px !important; padding-bottom: 8px !important; } body #acesso .ap-igrid { align-content: start !important; align-items: start !important; gap: 12px !important; } body #acesso .ap-icard { min-height: 0 !important; height: auto !important; padding: 22px 16px !important; } } @media (min-width: 961px) { body #acesso .acc3, body #acesso .ap-igrid { grid-template-rows: none !important; grid-auto-rows: auto !important; } body #acesso .acc3 .card { height: auto !important; } } @media (min-width: 961px) { body #mais { padding-bottom: 116px !important; } } /* ===== PK_SITE_V5e: diagnóstico · preguntas en dos columnas (computadora) ===== */ @media (min-width: 1100px) { body #diag .diag { max-width: 1220px !important; } body #diag .diag-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 12px; } body #diag .diag-list > li { margin: 0 !important; } } @media (min-width: 1100px) { body #diag .diag-list .diag-opts { flex-wrap: nowrap !important; gap: 6px !important; } body #diag .diag-list .diag-opt { font-size: .74rem !important; padding: 7px 10px !important; white-space: nowrap; } body #diag .diag-list .diag-item { padding-top: 10px !important; padding-bottom: 10px !important; } } @media (min-width: 1100px) { body #diag .diag-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } body #diag .diag-list .diag-opts { flex-wrap: wrap !important; } } /* ===== PK_EQ (27/10/2026): casos hod y Grupo hub uno al lado del otro; FAQ de Empresas con título a la izquierda ===== */ .case-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } @media (min-width: 961px) { .case-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 7.5vw; align-items: start; } .case-cols .sec-head { margin-bottom: 14px !important; } .case-cols .sec-head h2 { font-size: clamp(1.5rem, 2.1vw, 2.1rem) !important; } .case-cols .sec-head .lead { font-size: .92rem !important; line-height: 1.45; max-width: none !important; } .case-cols .case { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } .case-cols .case .case-step { padding: 14px 18px !important; } .case-cols .case .case-step p { font-size: .86rem; line-height: 1.45; margin: 4px 0 0; } .case-cols .case-lbl { margin: 14px 0 8px !important; } .case-cols .case-quotes, .case-cols .case-quotes figure { max-width: none !important; width: 100% !important; } .case-cols .case-quotes figure { padding: 14px 18px !important; } .case-cols .case-quotes blockquote { font-size: .95rem !important; line-height: 1.45; } body #caso { padding-top: 60px !important; padding-bottom: 32px !important; } .faq-split .faq-pdf { margin: 18px 0 0 !important; text-align: left !important; } body .acc-split .acc3 { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } body .hero.sub:has(.sug-form) .hero-main { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 7.5vw !important; } } @media (min-width: 961px) { body #faq .faq-one { gap: 8px !important; row-gap: 8px !important; } body #faq .faq-one details > summary { padding-top: 11px !important; padding-bottom: 11px !important; font-size: .95rem; } body #faq .faq-one details { margin: 0 !important; } } @media (min-width: 961px) { body .hero.sub:has(.sug-form) .hero-main > .actions { justify-self: stretch !important; width: 100% !important; max-width: none !important; } body .hero.sub:has(.sug-form) .hero-main > .actions .sug-form { max-width: none !important; width: 100% !important; } } /* PK_EQ: la home usa los mismos márgenes que las páginas internas (7,5vw a cada lado) */ @media (min-width: 1101px) { body.home-v2 main > .section > .wrap { padding-left: 7.5vw !important; padding-right: 7.5vw !important; } } @media (min-width: 1101px) { body .legal { column-gap: 7.5vw !important; } body #diag .diag-list { column-gap: 40px !important; } } @media (min-width: 961px) { body .hero.sub:has(.sug-form) .hero-main > .actions > * { flex: 1 1 auto !important; max-width: none !important; width: 100% !important; } } @media (min-width: 1101px) { body #diag .diag-list .diag-opts { flex-wrap: nowrap !important; gap: 5px !important; } body #diag .diag-list .diag-opt { font-size: .68rem !important; padding: 6px 8px !important; letter-spacing: 0 !important; } } @media (min-width: 1101px) { html:not([lang^="pt"]) body #diag .diag-list .diag-opts { flex-wrap: wrap !important; } } @media (min-width: 961px) { body #faq .faq-one summary::after { top: 50% !important; transform: translateY(-50%); line-height: 1; } } @media (min-width: 961px) { body .section.proof { padding-top: 50px !important; padding-bottom: 24px !important; } body .hero.sub:has(.ap-grid) { padding-bottom: 108px !important; } body.home-v2 #mais { padding-top: 96px !important; padding-bottom: 96px !important; } } /* PK_EQ: la etiqueta de «Planos» no se estira a todo el ancho */ body .sec-head > p.eyebrow { justify-self: start; width: max-content; max-width: 100%; } @media (min-width: 1101px) { body #planos .sec-head > p:not(.eyebrow) { justify-self: end; text-align: right; } } /* ===== PK_OFFON (28/10/2026): página del curso off-ON, como las de los apps ===== */ .oo-lead { font-size: clamp(1.2rem, 2vw, 1.6rem) !important; } .oo-feat ul li { font-size: clamp(1rem, 1.3vw, 1.2rem); } .oo-steps { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .oo-steps li { border: 1px solid var(--c); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--c) 6%, transparent); } .oo-steps .tn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #141312; font-weight: 800; font-size: 1.1rem; } .oo-steps b { font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.15; } .oo-steps .tx { font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.35; min-height: 2.7em; } .oo-steps img { width: 100%; height: 170px; object-fit: cover; object-position: top; border-radius: 12px; margin-top: auto; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: #fff; } .oo-steps img.oo-ph { object-fit: cover; object-position: top; } .oo-nums .stat .num { font-size: clamp(3rem, 5vw, 4.5rem) !important; } .oo-nums .stat p { font-size: clamp(1.05rem, 1.3vw, 1.25rem) !important; } .oo-index { margin: 18px 0 22px; } .oo-index img { width: 100%; max-width: 760px; display: block; margin: 0 auto; border-radius: 14px; border: 1px solid var(--line, #333); } @media (min-width: 961px) { body #quanto-dura .oo-index img { max-height: 250px; width: auto; } body #como-funciona .oo-steps img { height: 230px; } } @media (max-width: 900px) { .oo-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 560px) { .oo-steps { grid-template-columns: minmax(0, 1fr); } .oo-steps img { height: 200px; } } /* PK_CUPOM_MAIL (28/10/2026): cupón por email en /es y /en/apps/planos */ .cp-form{margin-top:14px;max-width:620px;text-align:left;gap:10px;color:inherit}.cp-form .cp-t{margin:0;font-weight:800;font-size:.98rem;color:inherit} .cp-form .f2{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.cp-form label{color:inherit;opacity:.9} .cp-form input[name]{background:transparent!important;color:inherit!important;border:1.5px solid currentColor!important;opacity:.85;padding:9px 12px!important} .cp-form .cp-ck{display:flex;gap:8px;align-items:center;font-weight:500}.cp-form .cp-ck input{width:auto;accent-color:#F7A71C}.cp-form .btn{margin-top:0;justify-content:center;min-height:44px} @media (max-width:720px){.cp-form .f2{grid-template-columns:minmax(0,1fr)}} .cp-ov{position:fixed;inset:0;z-index:2147483600;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}.cp-box{position:relative;width:min(420px,100%);background:#fff;color:#1A1A1A;border-radius:18px;padding:24px 20px 18px;box-shadow:0 18px 40px rgba(0,0,0,.35);font-family:Poppins,Arial,sans-serif}.cp-x{position:absolute;top:8px;right:10px;border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer;padding:4px 8px}.cp-q{margin:0 26px 14px 0;font-weight:700;font-size:1.02rem}.cp-bs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cp-bs .btn{width:100%;justify-content:center;min-height:46px}.cp-bs:has(>:only-child){grid-template-columns:1fr}.cp-box .sug-msg{color:#BF4B2C;margin:8px 0 0} .cp-box .btn:not(.fill){color:#1A1A1A!important;background:transparent!important}.cp-box .btn.fill{color:#1A1A1A!important}