/* sinalib public site — same visual identity as prototipo.html. Light theme only: prototipo's dark tokens are scoped to the phone mockup, and the page chrome itself is always light. Accent = brand green. */ :root { --azul: #1A3A8F; --azul-esc: #0D2260; --azul-cl: #EEF2FF; --cinza: #6B7A99; --bg: #F7F8FC; --surface: #FFFFFF; --surface-2: #F2F4FA; --text: #1A2340; --border: #E8EBF5; --stage-bg: linear-gradient(150deg, #EEF2FF 0%, #ECFAF3 100%); --accent: #2DBD7E; --accent-strong: #1C9C63; --accent-soft: #ECFAF3; --accent-soft-bd: #BCEBD3; --accent-deep: #15724A; --accent-contrast: #FFFFFF; --accent-rgb: 45, 189, 126; --gold: #E0A63A; --gold-soft: #FBF3E1; --gold-bd: #F0DBAC; --gold-deep: #A9761A; --shadow-sm: 0 4px 16px rgba(26, 58, 143, .06); --shadow-md: 0 12px 32px rgba(26, 58, 143, .10); --shadow-lg: 0 24px 60px rgba(13, 34, 96, .16); --radius: 20px; } /* Dark theme — prototipo's device dark tokens, opt-in via the header toggle (data-theme="dark" on ). Not automatic, so it never surprises. */ :root[data-theme="dark"] { --azul: #6E92F0; --azul-esc: #060B1C; --azul-cl: #1B2748; --cinza: #93A0BE; --bg: #090F22; --surface: #131C37; --surface-2: #0F1730; --text: #ECF0FA; --border: #25324F; --stage-bg: linear-gradient(150deg, #1A2448 0%, #112A20 100%); --accent: #34D38F; --accent-strong: #46DD9C; --accent-soft: #112A1F; --accent-soft-bd: #234F39; --accent-deep: #79E7B0; --accent-contrast: #062013; --accent-rgb: 52, 211, 143; --gold: #F0C25E; --gold-soft: #2A2213; --gold-bd: #4C3E1D; --gold-deep: #F3D08A; --shadow-sm: 0 4px 16px rgba(0, 0, 0, .30); --shadow-md: 0 12px 32px rgba(0, 0, 0, .40); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55); } :root[data-theme="dark"] .view-error, :root[data-theme="dark"] .auth-err { color: #F5A3A3; } /* ── reset & base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Author `display` rules (e.g. .btn's inline-flex) outrank the UA sheet's [hidden] rule, so the attribute silently stops working. Restore it. */ [hidden] { display: none !important; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.3px; color: var(--text); } .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 2rem; } .muted { color: var(--cinza); } .empty { padding: 40px 0; text-align: center; color: var(--cinza); } /* ── header ── */ .site-header { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; gap: 1.5rem; height: 68px; } .brand { display: inline-flex; align-items: center; gap: .55rem; } .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(150deg, var(--accent) 0%, var(--accent-strong) 100%); color: #fff; font-weight: 800; font-size: 18px; box-shadow: 0 6px 16px rgba(var(--accent-rgb), .32); } .brand-word { font-size: 1.25rem; font-weight: 800; color: var(--azul); letter-spacing: -.4px; } .nav-links { display: flex; align-items: center; gap: 1.6rem; margin-left: 1rem; margin-right: auto; } .nav-link { font-size: .9rem; font-weight: 600; color: var(--text); transition: color .2s; } .nav-link:hover, .nav-link.active { color: var(--accent-strong); } .theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text); transition: border-color .2s, color .2s, transform .15s; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; } .auth-slot { display: flex; align-items: center; gap: .6rem; } .user-chip { display: inline-flex; align-items: center; gap: .5rem; padding: 4px 12px 4px 4px; border-radius: 100px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: .85rem; border: 1.5px solid var(--border); transition: border-color .2s, background .2s; } .user-chip:hover { border-color: var(--accent-soft-bd); background: var(--accent-soft); } .uc-ph { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; } .uc-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── buttons (pill, prototipo identity) ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 100px; border: 1.5px solid transparent; font: inherit; font-weight: 700; font-size: .88rem; line-height: 1; white-space: nowrap; transition: transform .18s ease, box-shadow .25s ease, background .2s, color .2s, border-color .2s; } .btn-accent { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 8px 22px rgba(var(--accent-rgb), .35); } .btn-accent:hover { background: var(--accent-strong); transform: translateY(-2px); } .btn-outline { border-color: var(--border); color: var(--text); background: var(--surface); } .btn-outline:hover, .btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--cinza); } .btn-sm { padding: .5rem 1rem; font-size: .82rem; } .btn-block { width: 100%; } .btn:disabled { opacity: .6; cursor: default; transform: none; } /* ── inputs ── */ .input { width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: .95rem; transition: border-color .2s, box-shadow .2s; } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16); } .field { margin-bottom: 1rem; } .field-lbl { display: block; margin-bottom: .4rem; font-weight: 700; font-size: .82rem; } .search-input { border-radius: 100px; } /* ── badges / chips (pills) ── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; border: 1px solid transparent; } .badge-soon { background: var(--gold-soft); color: var(--gold-deep); border-color: var(--gold-bd); } .badge-video { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-soft-bd); } .badge-muted { background: var(--surface-2); color: var(--cinza); border-color: var(--border); } .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; } .chip { padding: .5rem .9rem; border-radius: 100px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: .8rem; transition: border-color .2s, background .2s, color .2s, transform .15s; } .chip:hover { border-color: var(--accent-soft-bd); transform: translateY(-1px); } .chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); box-shadow: 0 6px 16px rgba(var(--accent-rgb), .3); } /* ── feedback ── */ .loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--cinza); } .spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--accent); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .view-error { padding: 1rem 1.1rem; border-radius: 14px; background: color-mix(in srgb, #E23D3D 8%, var(--surface)); border: 1px solid color-mix(in srgb, #E23D3D 30%, var(--border)); color: #B02020; font-weight: 600; } .link-more { font-weight: 700; color: var(--accent-deep); } .link-more:hover { color: var(--accent-strong); } .back-link { display: inline-block; margin-bottom: 1.1rem; font-weight: 700; color: var(--cinza); } .back-link:hover { color: var(--accent-strong); } /* ── sections ── */ .section { padding: 2.4rem 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; } .section-head h2 { font-size: 1.35rem; font-weight: 800; } /* ── hero ── */ .hero { margin-top: 1.6rem; padding: 3rem 2.4rem; border-radius: 28px; background: radial-gradient(900px 400px at 20% 0%, rgba(var(--accent-rgb), .12), transparent 60%), var(--stage-bg); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); } .hero-inner { max-width: 660px; } .hero-kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; color: var(--accent-deep); } .hero-title { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -1px; line-height: 1.08; margin: .7rem 0 .8rem; } .hero-title .hl { color: var(--accent-strong); } .hero-sub { font-size: 1.05rem; color: var(--cinza); margin-bottom: 1.6rem; line-height: 1.7; } .hero-search { display: flex; gap: .6rem; max-width: 560px; } .hero-search .search-input { flex: 1; } /* ── category grid ── */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; } .cat-card { display: flex; align-items: center; gap: .8rem; padding: 1.1rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px; color: var(--text); transition: transform .18s, box-shadow .18s, border-color .18s; } .cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--accent-soft-bd); } .cat-emoji { font-size: 1.7rem; line-height: 1; } .cat-label { font-size: .95rem; font-weight: 800; letter-spacing: -.2px; } /* ── CTA cards ── */ .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .cta-card { display: block; padding: 1.6rem; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s; } .cta-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-soft-bd); } .cta-card h3 { margin: .6rem 0 .3rem; font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; } .cta-card p { margin: 0; color: var(--cinza); font-size: .92rem; } .cta-emoji { font-size: 1.9rem; } .cta-accent { background: linear-gradient(140deg, var(--accent-soft) 0%, var(--surface) 85%); border-color: var(--accent-soft-bd); } /* ── glossary ── */ .glossary-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .glossary-head h1 { font-size: 1.7rem; font-weight: 800; } .glossary-search { flex: 1; min-width: 220px; max-width: 380px; } .sign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .8rem; } .sign-card { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; padding: 1.1rem .9rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; color: var(--text); transition: transform .18s, box-shadow .18s, border-color .18s; } .sign-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--accent-soft-bd); } /* title as a bubble, top-center */ .sign-bubble { max-width: 100%; padding: .45rem 1rem; border-radius: 100px; background: var(--accent-soft); border: 1.5px solid var(--accent-soft-bd); color: var(--accent-deep); font-weight: 800; font-size: .95rem; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* descriptive info directly below the bubble */ .sign-card-info { display: flex; flex-direction: column; align-items: center; gap: .4rem; } .sign-card-cat { font-size: .74rem; font-weight: 700; color: var(--cinza); } .sign-hand { margin-top: auto; font-size: 2.4rem; line-height: 1; opacity: .5; filter: drop-shadow(0 6px 10px rgba(13, 34, 96, .14)); } /* ── sign detail ── */ .sign-detail { padding-top: 1.6rem; } .sign-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; align-items: start; } .sign-media { position: sticky; top: 88px; } .sign-info { min-width: 0; } .sign-video { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); background: #000; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); object-fit: contain; } .sign-video-empty { display: grid; place-content: center; justify-items: center; gap: .5rem; background: var(--stage-bg); color: var(--cinza); font-weight: 700; border-radius: var(--radius); border: 1.5px solid var(--border); } .sign-video-empty span { font-size: 3rem; filter: drop-shadow(0 10px 18px rgba(13, 34, 96, .2)); } .sign-video-empty p { margin: 0; } .sign-title-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .4rem; } .sign-title-row h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); font-weight: 800; letter-spacing: -.6px; } .sign-cat-link { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-soft-bd); padding: 4px 10px; border-radius: 100px; } .sign-desc { font-size: 1rem; color: var(--cinza); line-height: 1.6; margin-top: .5rem; } .sign-hint { display: flex; gap: .6rem; margin: 1rem 0; padding: .8rem 1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); color: var(--cinza); font-size: .9rem; } .sign-hint strong { color: var(--text); } .params-title { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent-strong); margin: 1.5rem 0 .8rem; } .params { display: grid; gap: .5rem; margin: 0; } .param { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: 13px; } .param dt { color: var(--cinza); font-weight: 700; font-size: .88rem; } .param dd { margin: 0; font-weight: 800; font-size: .88rem; text-align: right; } /* ── auth / profile ── */ .auth-view { display: flex; justify-content: center; } .auth-card { width: 100%; max-width: 420px; padding: 2rem; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--border); box-shadow: var(--shadow-md); } .auth-card h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: .3rem; } .auth-lead { color: var(--cinza); margin-bottom: 1.4rem; font-size: .95rem; } .auth-err { min-height: 20px; color: #B02020; font-size: .85rem; font-weight: 600; margin: .3rem 0 .8rem; } .auth-err.ok { color: var(--accent-deep); } .auth-forgot { text-align: right; margin-top: .6rem; font-size: .85rem; } .auth-forgot a { color: var(--cinza); font-weight: 600; } .auth-forgot a:hover { color: var(--accent-strong); } .auth-alt { margin-top: 1.2rem; text-align: center; color: var(--cinza); font-size: .9rem; } .auth-alt a { color: var(--accent-deep); font-weight: 700; } .profile-meta { display: grid; gap: .6rem; padding: 1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 1.4rem; } .profile-meta > div { display: flex; justify-content: space-between; gap: 1rem; } .pm-label { color: var(--cinza); font-weight: 700; font-size: .9rem; } .pm-value { font-weight: 800; font-size: .9rem; } .verify-note { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1rem; border-radius: 14px; margin-bottom: 1.4rem; font-size: .88rem; font-weight: 600; background: color-mix(in srgb, #E2A93D 10%, var(--surface)); border: 1px solid color-mix(in srgb, #E2A93D 35%, var(--border)); } /* ── translator ── */ .translator-view { max-width: 820px; margin: 0 auto; } .translator-hero { text-align: center; padding: 1.4rem 0 .5rem; } .translator-hero .badge { margin-bottom: .8rem; } .translator-hero h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -.8px; margin-bottom: .7rem; } .translator-lead { font-size: 1.05rem; color: var(--cinza); max-width: 640px; margin: 0 auto; line-height: 1.7; } .translator-steps { display: grid; gap: .8rem; margin: 2rem 0; } .tstep { display: flex; gap: 1rem; padding: 1.2rem; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); } .tstep-num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); border: 1.5px solid var(--accent-soft-bd); color: var(--accent-deep); font-weight: 800; } .tstep h3 { margin-bottom: .3rem; font-size: 1.05rem; font-weight: 800; } .tstep p { margin: 0; color: var(--cinza); font-size: .92rem; } .translator-cta { text-align: center; padding: 2.2rem; border-radius: var(--radius); background: var(--stage-bg); border: 1.5px solid var(--border); } .translator-cta h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: .5rem; } .translator-cta p { color: var(--cinza); max-width: 520px; margin: 0 auto 1.4rem; } /* ── alphabet practice (translator, live) ── */ .translator-live { max-width: 1040px; } .practice { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.1rem; margin: 2rem 0 1.6rem; align-items: start; } .practice-stage { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--stage-bg); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); aspect-ratio: 4 / 3; } /* The preview is mirrored so it reads like a mirror; detection runs on the RAW frame, so this is presentation only and does not affect landmarks. */ .cam-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; background: #000; } .practice-stage.live .cam-video { display: block; } .practice-stage.live .cam-empty { display: none; } .cam-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; color: var(--cinza); text-align: center; padding: 1.5rem; } .cam-empty span { font-size: 2.2rem; } .cam-empty p { margin: 0; font-size: .92rem; max-width: 260px; } .cam-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; background: color-mix(in srgb, var(--surface) 88%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(6px); } .cam-status { flex: 1; min-width: 0; font-size: .82rem; font-weight: 600; color: var(--cinza); } .cam-status.ok { color: var(--accent-deep); } .cam-status.err { color: #C0392B; } :root[data-theme="dark"] .cam-status.err { color: #F5A3A3; } .practice-side { display: grid; gap: 1rem; } .target-card, .guess-card { border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); padding: 1rem; } .target-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; } .target-cap { font-size: .78rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--cinza); } .target-letter { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--azul); } .ref-wrap { border-radius: 12px; overflow: hidden; background: var(--surface-2); } .ref-video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .ref-video-empty { display: grid; place-content: center; justify-items: center; gap: .3rem; color: var(--cinza); } .ref-video-empty span { font-size: 1.6rem; } .ref-video-empty p { margin: 0; font-size: .82rem; } .guess-row { display: flex; align-items: center; gap: .8rem; } .guess-letter { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; font-size: 1.8rem; font-weight: 800; line-height: 1; background: var(--surface-2); border: 1.5px solid var(--border); color: var(--cinza); transition: background .15s, color .15s, border-color .15s; } .guess-letter.committed { background: var(--accent-soft); border-color: var(--accent-soft-bd); color: var(--accent-deep); } .guess-meter { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .guess-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .12s linear; } .guess-tops { list-style: none; display: flex; gap: .5rem; margin: .7rem 0 0; padding: 0; } .guess-tops li { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: .3rem; padding: .3rem .4rem; border-radius: 9px; background: var(--surface-2); font-size: .8rem; } .guess-tops b { color: var(--cinza); font-weight: 700; } .feedback { margin: .8rem 0 0; font-size: .9rem; font-weight: 600; color: var(--cinza); min-height: 1.4em; } .feedback.ok { color: var(--accent-deep); } .strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; } .strip-head h2 { font-size: 1.2rem; font-weight: 800; } .strip-score { font-size: .86rem; color: var(--cinza); } .strip-score b { color: var(--accent-deep); } .letter-strip { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem; } .lchip { width: 44px; height: 44px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 800; background: var(--surface); border: 1.5px solid var(--border); color: var(--text); transition: transform .12s, border-color .12s, background .12s, color .12s; } .lchip:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); } .lchip.active { background: var(--azul); border-color: var(--azul); color: #fff; } .lchip.done { background: var(--accent-soft); border-color: var(--accent-soft-bd); color: var(--accent-deep); } .lchip.done.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .translator-note { padding: 1.2rem 1.4rem; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); margin-bottom: 1.6rem; } .translator-note h3 { font-size: 1rem; font-weight: 800; margin-bottom: .4rem; } .translator-note p { margin: 0; color: var(--cinza); font-size: .9rem; } /* ── footer ── */ .site-footer { margin-top: auto; border-top: 1px solid var(--border); background: var(--surface); } .foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.6rem 2rem; } .foot-brand { display: inline-flex; align-items: center; gap: .5rem; } .foot p { margin: 0; color: var(--cinza); flex: 1; min-width: 200px; font-size: .88rem; } .foot-right { color: var(--cinza); font-size: .88rem; } /* ── responsive ── */ @media (max-width: 760px) { .container { padding: 0 1.1rem; } .nav { flex-wrap: wrap; height: auto; padding-top: .6rem; padding-bottom: .4rem; gap: .8rem; } .nav-links { order: 3; width: 100%; margin: 0; gap: 1.1rem; overflow-x: auto; padding-bottom: .3rem; } .cta-grid { grid-template-columns: 1fr; } .sign-layout { grid-template-columns: 1fr; } .sign-media { position: static; } .hero { padding: 2rem 1.4rem; } .hero-search { flex-direction: column; } .practice { grid-template-columns: 1fr; } .lchip { width: 40px; height: 40px; font-size: .92rem; } }