:root { --bg: #f9f7f4; --fg: #2e2e2e; --muted: #6b6b6b; --accent: #9abd6a; /* AAPA Latinoamérica green */ --accent-deep: #2f5283; /* AAPA Latinoamérica ink navy */ --accent-soft: #c7dba3; --border: #e3e8ee; --surface: #ffffff; --highlight: #eef4e6; --hero-ink: #ffffff; --hero-shade-1: oklch(0.2 0.01 236.03 / 0.78); --hero-shade-2: oklch(0.30 0.04 70 / 0.45); --hero-shade-3: oklch(0.30 0.04 70 / 0.20); --collab-surface: oklch(0.32 0.05 255); --collab-hairline: rgb(255 255 255 / 0.14); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Only hides sideways overflow. With it on too there were two nested scrollers and anchor links stopped short; with `clip` the page scrolled by wheel but scrollIntoView() did nothing. */ html { overflow-x: hidden; } body { background: var(--bg); color: var(--fg); font-family: "Inter", system-ui, sans-serif; font-size: 1.08rem; line-height: 1.55; } .inner { max-width: 1240px; margin: 0 auto; padding: 0 2rem; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: clamp(560px, 82vh, 760px); display: flex; overflow: hidden; color: var(--hero-ink); background: #1a2230; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(40 101 143) 0%, rgb(40 101 143 / 70%) 42%, rgb(40 101 143 / 20%) 62%, rgb(40 101 143 / 0.08) 100%); pointer-events: none; } .hero-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(0.88); } .hero .inner { position: relative; z-index: 2; max-width: 1304px; min-height: inherit; width: 100%; display: flex; flex-direction: column; } .hero-copy { margin: auto 0; width: 100%; max-width: 48rem; display: flex; flex-direction: column; gap: 1.45rem; } .kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; opacity: 0.95; } .tag { border: 1px solid oklch(0.99 0.005 80 / 0.7); border-radius: 999px; padding: 0.05rem 0.7rem; font-size: 0.7rem; letter-spacing: 0.1em; } h1, h2, h3 { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700 !important; } h1 { font-weight: 700; font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.08; margin: 0; max-width: 36ch; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; } .hero-title-line { display: block; } .audience { width: fit-content; max-width: 100%; overflow-wrap: anywhere; background: rgb(255 255 255 / 0.82); color: #2e2e2e; font-size: clamp(1.1rem, 4.5vw, 1.75rem); line-height: 1.08; opacity: 0.96; padding: 0.08em 0.3em 0.08em 0.3em; border-radius: 0.16em; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .partner { font-size: 1rem; opacity: 0.75; } .hero-purpose { max-width: 40rem; margin: 0; font-size: 1.38rem; line-height: 1.38; opacity: 0.95; } .hero-purpose strong { color: #c3e297; } .hero-purpose { text-wrap: pretty; } .hero-lead { font-size: 1.3em; line-height: 1.5; font-weight: 500; } .hero-second { margin-top: 1.15rem; padding-left: 1.2rem; border-left: 2px solid rgb(195 226 151 / .55); font-size: .96em; opacity: .93; } .hero-list { list-style: none; padding: 0; max-width: 46rem; } .hero-list li { position: relative; padding-left: 1.7rem; font-size: 0.98rem; line-height: 1.5; margin-bottom: 0.65rem; } .hero-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } .hero-list strong { color: #c3e297; } .hero-cta { display: inline-block; margin-top: 0.4rem; background: var(--brand-blue, #3b84b9); color: #edf5fa; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1rem; text-decoration: none; padding: 0.8rem 1.5rem; border-radius: 999px; transition: background .3s ease, transform .15s, box-shadow .15s; width: fit-content; } .hero-note { margin-top: .7rem; font-size: .88rem; opacity: .85; } .hero-cta:hover { background: #fff; color: var(--accent-deep, #28658f); transform: translateY(-2px); } @media print { .hero-cta { display: none; } } .hero-cta.secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.75); } .hero-cta.secondary:hover { background: #fff; color: var(--accent-deep, #28658f); border-color: #fff; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 0.4rem; } .hero-actions .hero-cta { margin-top: 0; } @media print { .hero-actions { display: none; } } .icon-arrow { width: 1em; height: 1em; vertical-align: -0.125em; margin-left: 0.2em; flex-shrink: 0; } .hero-copy { animation: heroIn 720ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-copy { animation: none; } } h2 { text-align: left; color: #233f63; } .section-title { text-align: left; color: #233f63; font-weight: 400; font-size: 2rem; margin: 3.5rem 0 1.25rem; } .inner > .section-title:first-child { margin-top: 0; } .section-title.centered { text-align: left; margin-bottom: 2rem; } .section-title.after-hero { margin-top: 6rem; margin-bottom: 3.5rem; } /* ---------- Services ---------- */ .services-wrap { max-width: 1240px; margin: 0 auto; padding: 0 2rem; } .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } @media (max-width: 1000px) { .services { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .services { grid-template-columns: 1fr; } } .service { border: 0; border-radius: 1rem; background: #ffffff; padding: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; } .service::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; border-radius: 1rem 1rem 0 0; background: linear-gradient(0deg, rgb(0 0 0 / 0.26) 0%, rgb(0 0 0 / 0.14) 42%, rgb(0 0 0 / 0.0) 100%); pointer-events: none; z-index: 1; } .service .photo { height: 220px; border-radius: 1rem 1rem 0 0; background-position: center; background-size: cover; filter: saturate(0.9); } .service .body { padding: 1.15rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; } .service-head { position: absolute; left: 1.25rem; right: 1.25rem; bottom: calc(100% - 220px + 1.05rem); z-index: 2; display: flex; align-items: center; gap: 0.75rem; } .num { display: flex; width: 2.2rem; height: 2.2rem; border: 1.5px solid rgb(255 255 255 / 0.78); border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: #ffffff; flex-shrink: 0; background: rgb(0 0 0 / 0.12); } .service .num { display: none; } .service h3 { font-weight: 700; font-size: 1.35rem; line-height: 1.25; color: #ffffff; text-shadow: 0 2px 12px rgb(0 0 0 / 0.45); } .lead { font-weight: 600; } .service ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .service li { padding-left: 1.2rem; position: relative; } .service li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .quote { background: var(--highlight); border-radius: 0.55rem; padding: 0.8rem 1rem; font-size: 1rem; line-height: 1.4; } .quote em { font-style: normal; font-weight: 700; color: var(--accent-deep); } a { color: var(--accent-deep); } .note { font-size: 0.88rem; color: var(--muted); margin-top: auto; } .proof { font-size: 0.88rem; font-weight: 600; color: var(--accent-deep); border-top: 1px solid var(--border); padding-top: 0.7rem; margin-top: auto; } .actors { display: flex; gap: 0.5rem; flex-wrap: wrap; } .actor { border: 1px solid var(--accent); border-radius: 999px; padding: 0.15rem 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--accent-deep); background: var(--bg); } /* ---------- Live example figure ---------- */ .example { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 3rem; padding: 3rem 0 1.5rem; } .example .cols { display: block; } .shots { display: flex; flex-direction: column; gap: 1.5rem; } .shot-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; } figure.shot { border: 1px solid var(--border); background: var(--bg); box-shadow: 0 14px 34px oklch(0.35 0.05 255 / 0.14); } .shot .bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border); } .shot .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border); } .shot .url { font-size: 0.75rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.7rem; margin-left: 0.4rem; } .shot img { display: block; width: 100%; height: auto; } .example h2 { margin-top: 0; } .example p { font-size: 1.05rem; } .example p + p { margin-top: 0.75rem; } .example .go { font-weight: 600; } /* ---------- Roadmap ---------- */ .roadmap { margin-bottom: 4rem; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; } .step { padding-right: 1.25rem; position: relative; } .step + .step { padding-left: 0.25rem; } .step-line { position: absolute; top: 1.1rem; left: 0; right: 1.25rem; height: 1.5px; background: var(--border); } .step-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; position: relative; } .step h3 { font-size: 1rem; font-weight: 700; padding-right: 0.5rem; background: var(--bg); } .step .num { width: 2.05rem; height: 2.05rem; border-color: var(--accent); color: var(--accent-deep); background: var(--bg); } .step p { font-size: 0.9rem; color: var(--muted); } /* ---------- Collaboration ---------- */ .collab-band { margin-top: 0; position: relative; color: var(--hero-ink); background: var(--collab-surface); padding: 2.5rem 0; } .collab-band .section-title { margin: 0 0 1.25rem; color: var(--hero-ink); } .cta-band { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.18); display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .cta-band .cta-txt { flex: 1; min-width: 16rem; } .cta-band .cta-txt strong { display: block; font-family: "Montserrat", sans-serif; font-size: 1.1rem; } .cta-band .cta-txt span { font-size: 0.95rem; opacity: 0.9; } .cta-btn { display: inline-block; background: #adcf7e; color: #2e2e2e; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.98rem; text-decoration: none; padding: 0.75rem 1.4rem; border-radius: 999px; white-space: nowrap; transition: background .3s ease, transform .15s, box-shadow .15s; } .cta-btn:hover { background: #ffffff; transform: translateY(-1px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); } .collab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .collab-block { padding-top: 0.8rem; padding-left: 1.5rem; border-left: 1px solid rgb(255 255 255 / 0.14); } .collab-block:first-child { padding-left: 0; border-left: 0; } .collab-block h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.9rem; } .collab-block p { font-size: 0.95rem; opacity: 0.92; } .collab-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .collab-block li { font-size: 0.95rem; opacity: 0.92; line-height: 1.35; } .questions { margin-top: 1.75rem; border: 1px solid oklch(0.99 0.005 80 / 0.4); padding: 1rem 1.25rem; display: flex; gap: 1rem 2.5rem; flex-wrap: wrap; align-items: baseline; border-radius: 12px; } .questions .tag { flex-shrink: 0; border-color: oklch(0.99 0.005 80 / 0.7); } .questions p { font-size: 1rem; font-weight: 600; } /* ---------- Footer ---------- */ footer { padding: 3rem 0 2.5rem; background: #2d71a3; border-top: 1px solid var(--collab-hairline); color: var(--hero-ink); } footer .inner { display: flex; justify-content: flex-start; align-items: flex-end; gap: 2rem; flex-wrap: wrap; } .footer-brand { display: flex; align-items: center; gap: 0.85rem; flex-wrap: nowrap; } .footer-logos { display: flex; align-items: center; gap: 1rem; } .footer-logos a { display: inline-flex; align-items: center; } .footer-logos img { display: block; width: auto; object-fit: contain; opacity: 0.92; } .footer-logos a:first-child img { height: 1.55rem; } .footer-logos a:last-child img { height: 1.45rem; } .org { font-size: 0.78rem; color: oklch(0.92 0.01 80); } .credits { font-size: 0.7rem; color: oklch(0.92 0.01 80 / 0.75); width: 100%; } @media (max-width: 1000px) { .services, .collab { grid-template-columns: 1fr; } .collab-block { padding-left: 0; border-left: 0; } .roadmap { grid-template-columns: 1fr; gap: 1rem; } .step-line { display: none; } .example .cols { grid-template-columns: 1fr; } h1 { font-size: clamp(1.7rem, 7.5vw, 2.441rem); } .hero-title-line { display: inline; } } @media (max-width: 640px) { } @media print { .hero { min-height: 300px; } h1 { font-size: 24pt; } body { font-size: 9.5pt; } .services, .collab { gap: 0.75rem; } .section-title { margin: 1.25rem 0 0.6rem; } .example { padding: 1rem 0; } .collab-band { padding: 1.25rem 0; } } /* ---------- Screen showcase (pestañas) ---------- */ .example-intro { max-width: 58rem; margin: 0 0 1.75rem; text-align: left; } .example-action { max-width: 44rem; margin: 1.35rem 0 0; } .example-action .go { margin-top: 1rem; font-weight: 700; } .screen-showcase { margin-bottom: 1.75rem; display: grid; grid-template-columns: minmax(15rem, 0.2fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; } .screen-tabs { display: flex; flex-direction: column; gap: 0.75rem; } .screen-tab { appearance: none; border: 1px solid var(--border); border-radius: 0.65rem; background: var(--bg); color: var(--fg); cursor: pointer; padding: 1.1rem 1.15rem; text-align: left; font-family: inherit; transition: background 220ms ease, border-color 220ms ease; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.7rem; align-items: start; } .screen-tab:hover { border-color: var(--accent); } .screen-tab[aria-selected="true"] { background: var(--highlight); border-color: var(--accent); } .screen-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .screen-icon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; color: var(--accent-deep); } .screen-icon svg { width: 1.45rem; height: 1.45rem; } .screen-copy > strong { display: block; font-size: 1.02rem; line-height: 1.2; } .screen-tab span span, .screen-copy > span { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.9rem; line-height: 1.32; } .screen-frame { position: relative; overflow: hidden; border: 0; border-radius: 0.75rem; background: #fff; box-shadow: 0 18px 42px oklch(0.35 0.05 255 / 0.16); container-type: inline-size; } .screen-panel { display: none; } .screen-panel.is-active { display: block; animation: tabFade 900ms cubic-bezier(0.22, 1, 0.36, 1); } .screen-panel img { display: block; width: 100%; height: auto; } @keyframes tabFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .screen-showcase { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .screen-panel.is-active { animation: none; } } /* ---------- Slideshow dentro del showcase ---------- */ .slides { position: relative; } .slide { display: none; margin: 0; } .slide.is-current { display: block; animation: tabFade 320ms cubic-bezier(0.22,1,0.36,1); } .slide-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--surface); } .slide-bar .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border); } .slide-bar .url { font-size: 0.75rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.7rem; margin-left: 0.4rem; } .slide > img, .slide > .tradeinfo-static, .slide > .gateway-index, .slide > .tiproc-static { display: block; width: 100%; height: 62.5cqw; max-height: 42rem; } .slide > img { object-fit: cover; object-position: top center; } .tradeinfo-static { --ti-blue: #217dae; --ti-text: #2e3038; --ti-muted: #777f8a; background: #fff; color: var(--ti-text); font-family: "Inter", system-ui, sans-serif; overflow: hidden; } .slide > .tradeinfo-static { display: flex; flex-direction: column; } .tradeinfo-static img { display: block; width: auto; height: auto; } .ti-strip { height: 1.1rem; display: flex; align-items: center; justify-content: space-between; padding: 0 12%; border-bottom: 1px solid #e4e8ee; background: #f5f6f7; color: #4d535d; font-size: clamp(0.45rem, 0.75vw, 0.7rem); font-weight: 600; } .ti-strip span:first-child::before { content: ""; display: inline-block; width: 0.75em; height: 0.5em; margin-right: 0.35em; background: linear-gradient(#59a8df 50%, #f4cf45 0); border-radius: 1px; } .ti-langs { display: flex; gap: 1.2rem; } .ti-brandbar { min-height: 3.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.48rem 5%; background: #fff; } .ti-brand-left { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.4rem); min-width: 0; flex: 1; } .ti-menu { width: 1.1rem; display: grid; gap: 0.22rem; flex: 0 0 auto; } .ti-menu span { display: block; height: 2px; border-radius: 999px; background: #111; } .ti-logo-row { display: flex; align-items: center; gap: clamp(0.55rem, 1.15vw, 1rem); min-width: 0; } .tradeinfo-static .ti-gov { width: clamp(1.1rem, 2.2vw, 1.85rem); } .tradeinfo-static .ti-ktp { width: clamp(4.8rem, 9.4vw, 8.3rem); } .tradeinfo-static .ti-qaz { width: clamp(3.25rem, 6vw, 5.4rem); } .tradeinfo-static .ti-qta { width: clamp(3.25rem, 6.1vw, 5.1rem); } .tradeinfo-static .ti-export-logo { width: clamp(1.15rem, 2.2vw, 1.75rem); } .ti-search-pill { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid #8d9298; border-radius: 999px; padding: 0.28rem 0.8rem; color: #2f3339; font-size: clamp(0.48rem, 0.9vw, 0.72rem); font-weight: 700; white-space: nowrap; } .ti-search-pill svg { width: 1em; height: 1em; stroke-width: 2.5; opacity: 0.75; } .ti-nav { display: flex; justify-content: center; gap: clamp(1.7rem, 4vw, 4.4rem); padding: 0.6rem 2rem; border-top: 1px solid #eef1f4; border-bottom: 1px solid #e5e9ef; background: #fff; font-size: clamp(0.48rem, 0.9vw, 0.78rem); font-weight: 600; } .ti-nav.is-hidden { display: none; } .ti-hero { min-height: 0; position: relative; display: flex; align-items: center; padding: clamp(1.8rem, 5vw, 4rem) 5%; background: linear-gradient(rgb(26 25 24 / 0.18), rgb(26 25 24 / 0.18)), url("assets/tradeinfo-static/plane-hero.jpg") center / cover no-repeat; } .ti-hero-inner { width: 100%; } .ti-headline { color: #fff; font-family: "Montserrat", system-ui, sans-serif; font-size: clamp(1.35rem, 3.35vw, 2.5rem); line-height: 1.12; font-weight: 700; letter-spacing: 0; max-width: 13.5ch; margin-bottom: clamp(1.4rem, 4vw, 3.2rem); } .ti-searchbar { width: 100%; min-height: clamp(2.15rem, 4.2vw, 3.2rem); display: grid; grid-template-columns: max-content minmax(8.5rem, 1.2fr) minmax(9rem, 1.55fr) minmax(10rem, 1.75fr) auto; align-items: center; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); color: #404346; font-size: clamp(0.54rem, 1vw, 0.86rem); overflow: hidden; } .ti-searchbar > span { min-width: 0; padding: 0 0.82rem; white-space: nowrap; } .ti-searchbar > span + span { border-left: 1px solid #e7e7e9; } .ti-search-label, .ti-search-mode { color: #24272d; font-weight: 600; } .ti-search-mode, .ti-select { display: flex; align-items: center; gap: 0.45rem; } .ti-search-mode { background: #f5f5f6; border-radius: 999px; padding-block: 0.5rem !important; margin: 0.22rem; } .ti-search-mode svg, .ti-select svg { width: 0.92em; height: 0.92em; margin-left: auto; color: #a2aab5; stroke-width: 2.4; flex: 0 0 auto; } .ti-submit { width: clamp(1.7rem, 3.2vw, 2.45rem); height: clamp(1.7rem, 3.2vw, 2.45rem); padding: 0 !important; margin-right: 0.45rem; border-left: 0 !important; border-radius: 50%; display: grid; place-items: center; background: #616161; color: #fff; font-size: clamp(1rem, 2vw, 1.45rem); font-weight: 700; } .ti-submit svg { display: block; width: 46%; height: 46%; stroke-width: 2.45; } .ti-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; padding: 1rem 5% 0.75rem; background: #fff; } .tradeinfo-static > .ti-hero { flex: 1 1 auto; } .tradeinfo-static > .ti-cards, .tradeinfo-static > .ti-country-tabs { flex: 0 0 auto; } .ti-card { min-height: 3.7rem; border: 1px solid #edf0f4; border-radius: 0.45rem; display: flex; align-items: center; justify-content: center; gap: 0.62rem; color: #333941; font-size: clamp(0.72rem, 1.15vw, 0.98rem); font-weight: 700; text-transform: uppercase; } .ti-card svg { width: clamp(1rem, 2vw, 1.55rem); height: clamp(1rem, 2vw, 1.55rem); color: var(--ti-blue); stroke-width: 1.75; } .gateway-static .ti-hero { min-height: 0; align-items: center; padding: clamp(2rem, 5.5vw, 4.5rem) 14%; background: linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.16)), linear-gradient(rgb(0 50 80 / 0.12), rgb(0 50 80 / 0.12)), url("assets/tradeinfo-static/central-asia-gateway-hero.png") center / cover no-repeat; } .gateway-static .ti-hero-inner { width: 100%; } .gateway-kicker { color: #fff; font-size: clamp(0.88rem, 1.7vw, 1rem); font-weight: 600; line-height: 1.1; margin-bottom: 0.25rem; text-transform: uppercase; } .gateway-static .ti-headline { max-width: none; font-size: clamp(1.25rem, 2.55vw, 2rem); line-height: 1.08; margin-bottom: clamp(1.2rem, 3vw, 2.1rem); } .gateway-prompt { display: inline-flex; align-items: center; padding: 0.05rem 0.25rem; margin-bottom: 0.55rem; border-radius: 0.2rem; background: rgb(255 255 255 / 0.82); color: #000000; font-size: clamp(0.62rem, 1vw, 0.86rem); font-weight: 600; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .gateway-static .ti-searchbar { width: min(100%, 45rem); min-height: clamp(1.8rem, 3.45vw, 2.55rem); grid-template-columns: minmax(7rem, 1fr) minmax(8.5rem, 1.45fr) minmax(8.5rem, 1.45fr) auto; border-radius: 999px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); font-size: clamp(0.56rem, 0.92vw, 1rem); background: #fff; } .gateway-static .ti-searchbar > span { padding: 0 1rem; } .gateway-static .ti-select, .gateway-static .gateway-search-button { display: flex; align-items: center; gap: 0.45rem; } .gateway-static .gateway-search-button { width: clamp(1.45rem, 2.65vw, 2rem); height: clamp(1.45rem, 2.65vw, 2rem); padding: 0 !important; margin-right: 0.45rem; border-radius: 50%; justify-content: center; background: #616161; color: #fff; font-weight: 700; border-left: 0 !important; } .gateway-static .gateway-search-button svg { display: block; width: 46%; height: 46%; stroke-width: 2.45; } .gateway-static .ti-select svg { width: 0.88em; height: 0.88em; margin-left: auto; color: #9ba3ad; stroke-width: 2.4; flex: 0 0 auto; } .ti-country-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff; border-top: 1px solid var(--border); } .ti-country-tabs span { min-height: 4rem; display: grid; place-items: center; border-left: 1px solid var(--border); color: var(--fg); font-size: clamp(0.6rem, 1.2vw, 1.5rem); font-weight: 600; text-transform: none; letter-spacing: 0.01em; } .ti-country-tabs span:first-child { border-left: 0; } .gateway-index { background: #fff; color: #22272e; padding: 3.2rem 2rem 1.95rem; font-family: "Inter", system-ui, sans-serif; overflow: auto; } .gateway-index__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.45rem; } .gateway-index__title { display: flex; align-items: center; gap: 0.55rem; font-size: clamp(1.08rem, 1.6vw, 1.42rem); font-weight: 700; line-height: 1.2; } .gateway-index__chevron { width: 1rem; height: 1rem; stroke-width: 2.6; flex: 0 0 auto; } .gateway-index__actions { display: flex; align-items: center; gap: 1.2rem; color: #606873; font-size: clamp(0.78rem, 1vw, 0.95rem); white-space: nowrap; } .gateway-index__actions span { display: inline-flex; align-items: center; gap: 0.35rem; } .gateway-index__actions svg { width: 0.9rem; height: 0.9rem; stroke-width: 2; } .gateway-index__table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: clamp(0.95rem, 1.35vw, 1.16rem); margin-top: 1.4rem; } .gateway-index__table th:not(:first-child), .gateway-index__table td:not(:first-child) { min-width: 7.1rem; } .gateway-index__table th { background: transparent; color: #7f8ea8; font-weight: 600; text-align: center; padding: 0.45rem 0.85rem 0.6rem; line-height: 1.15; font-size: 0.7em; white-space: nowrap; } .gateway-index__table th:first-child { width: 25%; background: transparent; } .gateway-index__table td { padding: 1.2rem 1rem; border-bottom: 1px solid #e8ebef; text-align: center; vertical-align: middle; line-height: 1.25; } .gateway-index__table td:first-child { text-align: left; font-weight: 700; color: #2b3037; } .gateway-country { display: inline-flex; align-items: center; gap: 0.65rem; } .gateway-index .gateway-flag { width: 1.2rem; height: 0.9rem; border-radius: 0.2rem; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); flex: 0 0 auto; display: block; object-fit: cover; } .gateway-menu-dot { width: 1.8rem; height: 1.8rem; display: inline-grid; place-items: center; color: #111; } .gateway-menu-dot svg { width: 1.35rem; height: 1.35rem; stroke-width: 2; } @media (max-width: 760px) { .ti-strip, .ti-nav { display: none; } .ti-brandbar { padding: 0.65rem 1rem; } .ti-brand-left { gap: 0.7rem; } .ti-logo-row { gap: 0.5rem; } .ti-qaz, .ti-qta, .ti-export-logo { display: none; } .ti-hero { padding: 2rem 1.2rem; min-height: 18rem; } .ti-hero-inner { width: 100%; } .ti-searchbar { grid-template-columns: 1fr; border-radius: 1rem; } .ti-searchbar > span { padding: 0.7rem 1rem; border-left: 0 !important; border-top: 1px solid #eef1f4; } .ti-search-label { border-top: 0 !important; } .ti-submit { margin: 0.6rem 1rem 1rem auto; } .ti-cards { grid-template-columns: 1fr; padding: 1rem; gap: 0.75rem; } .gateway-static .ti-hero { padding: 2rem 1.2rem; } .gateway-static .ti-searchbar { grid-template-columns: 1fr; border-radius: 0.45rem; } .gateway-static .ti-searchbar > span { padding: 0.7rem 1rem; border-left: 0 !important; border-top: 1px solid #eef1f4; } .gateway-static .ti-searchbar > span:first-child { border-top: 0 !important; } .ti-country-tabs { grid-template-columns: 1fr; } .gateway-index { padding: 2.8rem 1rem 1rem; overflow-x: auto; } .gateway-index__table { min-width: 42rem; } .gateway-index__top { align-items: flex-start; } .gateway-index__actions { flex-wrap: wrap; justify-content: flex-end; } } /* ---------- tradeinfo.kz procedure-detail mockup ---------- */ .tiproc-static { --tp-blue-1: #2f7fb0; --tp-blue-2: #1c5f8a; --tp-orange: #ef7d3b; --tp-text: #2e3038; --tp-muted: #767c86; --tp-line: #e3e7ec; background: #f4f6f8; color: #2e3038; font-family: "Inter", system-ui, sans-serif; overflow: auto; padding: 1.5rem 1.6rem 1.8rem; } .tp-h1 { font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: #23262c; } .tp-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; } .tp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex-shrink: 0; } .tp-contact { background: #fff; border: 1px solid var(--tp-line); border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.78rem; font-weight: 600; color: #2e3038; box-shadow: 0 2px 6px rgb(0 0 0 / 0.05); } .tp-icobtn { width: 2rem; height: 2rem; border-radius: 50%; background: #fff; border: 1px solid var(--tp-line); display: grid; place-items: center; color: #3a3e46; flex-shrink: 0; } .tp-icobtn svg { width: 1rem; height: 1rem; } .tp-grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; } .tp-panel { background: #fff; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 10px rgb(0 0 0 / 0.05); } .tp-panel-head { background: var(--brand-blue); color: #fff; font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 1rem; padding: 0.6rem 1rem; } .tp-steps { padding: 0.2rem 0 0.6rem; } .tp-group-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 1rem; background: #eef1f4; font-weight: 700; font-size: 0.82rem; color: #23262c; } .tp-group-head svg { width: 0.85rem; height: 0.85rem; color: #767c86; flex-shrink: 0; } .tp-step-list { position: relative; padding: 0.5rem 1rem 0.7rem 2.6rem; } .tp-step-list::before { content: ""; position: absolute; left: 1.36rem; top: 0.2rem; bottom: 0.5rem; width: 2px; background: var(--tp-line); } .tp-step { position: relative; display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.4rem 0; font-size: 0.8rem; line-height: 1.35; } .tp-num { position: absolute; left: -1.85rem; top: 0.3rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--brand-blue); color: #fff; font-size: 0.68rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .tp-num.star { background: #fff; border: 1.5px solid var(--tp-orange); color: var(--tp-orange); } .tp-num.star svg { width: 0.7rem; height: 0.7rem; } .tp-step .tp-label { flex: 1; padding-top: 0.05rem; } .tp-optional { background: #fbe6cf; color: #a8631c; font-size: 0.6rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; margin-left: 0.4rem; } .tp-globe { width: 0.85rem; height: 0.85rem; color: var(--tp-blue-1); flex-shrink: 0; margin-top: 0.25rem; } .tp-summary { padding: 0.9rem 1rem 1.1rem; } .tp-inst-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 0.9rem; color: #23262c; margin-bottom: 0.9rem; } .tp-inst-head svg { width: 0.9rem; height: 0.9rem; color: #767c86; } .tp-inst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; } .tp-inst-card { position: relative; min-height: 8.8rem; border: 1px solid var(--tp-line); border-radius: 0.5rem; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; overflow: hidden; background: #eef3f4; } .tp-inst-badges { position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.25rem; } .tp-inst-badges span { background: var(--tp-orange); color: #fff; font-size: 0.7rem; font-weight: 600; width: 1.05rem; height: 1.05rem; border-radius: 0.25rem; display: grid; place-items: center; } .tp-inst-icon { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; background: #eef3f4; } .tp-inst-icon.is-inst { background: #e3edf4; color: var(--tp-blue-2); } .tp-inst-icon.is-company { background: #e7f0e2; color: #4a7a34; } .tp-inst-icon svg { width: 1.6rem; height: 1.6rem; } .tp-inst-icon img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .tp-inst-label { position: relative; z-index: 1; margin: 0 0.5rem 0.5rem; box-sizing: border-box; font-size: 0.6rem; line-height: 1.2; color: #23262c; padding: 0.38rem 0.45rem; border-radius: 0.36rem; background: rgb(255 255 255 / 0.84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; } .tp-inst-label-text { display: -webkit-box; max-height: 2.16rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 900px) { .tp-grid { grid-template-columns: 1fr; } .tp-inst-grid { grid-template-columns: repeat(2, 1fr); } } .slide figcaption { font-size: 0.88rem; color: var(--muted); padding: 0.7rem 0.9rem; border-top: 1px solid var(--border); background: var(--bg); } .slide-nav { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--border); background: var(--bg); } .snav { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--fg); border-radius: 50%; width: 1.9rem; height: 1.9rem; cursor: pointer; font-size: 1.1rem; line-height: 1; font-family: inherit; } .snav:hover { border-color: var(--accent); color: var(--accent-deep); } .snav:focus-visible, .sdot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sdots { display: flex; gap: 0.35rem; margin-left: 0.2rem; } .sdot { appearance: none; width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--accent); background: transparent; cursor: pointer; } .sdot.is-on { background: var(--accent-deep); border-color: var(--accent-deep); } .scount { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 0.2rem; } /* ---------- Comparacion lado a lado ---------- */ .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); } .cmp-side { background: #fff; display: flex; flex-direction: column; } .cmp-head { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--surface); } .cmp-head strong { display: block; font-size: 0.92rem; line-height: 1.25; } .cmp-badge { display: inline-block; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; letter-spacing: 0.02em; } .cmp-badge.good { color: oklch(0.42 0.10 155); background: oklch(0.94 0.04 155); } .cmp-badge.warn { color: oklch(0.45 0.11 55); background: oklch(0.94 0.05 70); } .cmp-side img { display: block; width: 100%; height: auto; } .cmp-side { align-self: start; } .cmp { align-items: start; padding: 1.1rem; gap: 1.1rem; background: var(--surface); } .cmp-side { border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; } @media (max-width: 900px) { .cmp { grid-template-columns: 1fr; } } /* ---------- Comparacion v2 ---------- */ .cmp2 { padding: 1.4rem 1.5rem 1.5rem; background: #fff; } .cmp2-head h4 { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 0.4rem; } .cmp2-head p { font-size: 0.92rem; color: var(--muted); max-width: 62ch; } .cmp2-head strong { color: var(--accent-deep); } .cmp2-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 0.4rem; } .cmp2-table th[scope="col"] { text-align: left; padding: 0 0.6rem 0.6rem; border-bottom: 2px solid var(--border); vertical-align: bottom; } .col-lbl { display: block; font-size: 0.85rem; font-weight: 700; } .col-sub { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 400; margin-top: 0.1rem; } .cmp2-table th[scope="row"] { text-align: left; font-size: 0.85rem; color: var(--muted); font-weight: 600; padding: 0.7rem 0.6rem; white-space: nowrap; } .cmp2-table td { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .cmp2-table tbody tr:last-child td, .cmp2-table tbody tr:last-child th { border-bottom: 0; } .v-a, .v-b { font-size: 1.32rem; font-weight: 700; line-height: 1.1; } .v-a { color: oklch(0.45 0.11 155); } .v-b { color: oklch(0.48 0.14 45); } .v-d { font-size: 0.78rem; color: var(--muted); } .cmp2-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.1rem; } .cs { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.85rem 1rem; } .cs-h { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.5rem; } .cs ol { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; display: grid; gap: 0.3rem; } .cs li::marker { color: var(--accent); font-weight: 700; } .cs-b li.new { font-weight: 700; color: oklch(0.48 0.14 45); } @media (max-width: 900px) { .cmp2-steps { grid-template-columns: 1fr; } .cmp2-table th[scope="col"]:last-child, .v-d { display: none; } } .cmp-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.1rem 0; } .cmp-shots figure { margin: 0; border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; } .cmp-shots figcaption { font-size: 0.78rem; font-weight: 700; color: var(--accent-deep); padding: 0.45rem 0.7rem; background: var(--surface); border-bottom: 1px solid var(--border); } .cmp-shots img { display: block; width: 100%; height: auto; } @media (max-width: 900px) { .cmp-shots { grid-template-columns: 1fr; } } /* ---------- Motion ---------- */ .hero { background-position: center calc(50% + var(--hero-y, 0px)); background-size: cover; background-repeat: no-repeat; } .reveal { opacity: 0; transform: translateY(14px); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(var(--parallax-y, 0px)); } .screen-frame { transform: translateY(var(--parallax-y, 0px)); } .service, figure.shot, .screen-frame, .collab-block, .step, .screen-tab { transition: border-color 240ms ease, box-shadow 240ms ease, opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); } a, .actor { transition: color 180ms ease, background 180ms ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } :root { --nav-height: 88px; --nav-compact-height: 60px; } body { padding-top: 0; } .hero { min-height: 100vh; min-height: 100svh; } .hero .inner { padding-top: calc(var(--nav-height) + 32px); padding-bottom: 48px; } #nar-hero { scroll-margin-top: 0; } #nar-aporta, #nar-ruta, #salidas { scroll-margin-top: calc(var(--nav-compact-height) + 24px); } /* these two anchors sit on the

, so they leave room for the eyebrow above it / #nar-practica, #resultados-evaluacion { scroll-margin-top: 140px; } .site-header { position: fixed; inset: 0 0 auto; z-index: 9400; height: var(--nav-height); padding: 0 32px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; background: transparent; border-bottom: 1px solid transparent; color: #fff; transition: height .25s ease, padding .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; } .site-header.is-scrolled { height: var(--nav-compact-height); padding-top: 0; padding-bottom: 0; background: rgb(255 255 255 / 0.82); border-bottom-color: rgb(255 255 255 / 0.75); box-shadow: 0 4px 24px rgb(30 49 75 / 0.06); backdrop-filter: blur(20px) saturate(145%); -webkit-backdrop-filter: blur(20px) saturate(145%); color: #233f63; } .site-header.is-scrolled #lang-switch button { color: #233f63; } .site-header.is-scrolled #lang-switch button.is-on { background: rgb(43 42 38 / .1); color: #233f63; } .site-header:not(.is-scrolled) #lang-switch { background: rgb(255 255 255 / .15); box-shadow: none; } .site-header:not(.is-scrolled) #lang-switch button { color: #fff; } .site-header:not(.is-scrolled) #lang-switch button.is-on { background: #fff; color: #2f5283; } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } .site-brand { font: 700 clamp(0.95rem, 1.45vw, 1.35rem)/1.3 "Montserrat", sans-serif; transition: font-size .25s ease; } .site-header.is-scrolled .site-brand { font-size: clamp(.75rem, 1.15vw, 1rem); } @media (prefers-reduced-motion: reduce) { .site-brand { transition: none; } } .site-header a { color: inherit; text-decoration: none; } .site-nav { display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 2vw, 36px); } .site-nav a { font-size: 1.08rem; white-space: nowrap; padding: 10px 0; text-underline-offset: 6px; } .site-nav a:hover { text-decoration: underline; } .site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; border-radius: 3px; } @media (max-width: 1200px) { :root { --nav-height: 120px; --nav-compact-height: 88px; } .site-header { grid-template-columns: 1fr auto; gap: 0 20px; padding: 14px 24px 8px; } .site-brand { font-size: 1.1rem; } .site-nav { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; } .site-header #lang-switch { grid-row: 1; grid-column: 2; } } @media (max-width: 540px) { :root { --nav-height: 156px; --nav-compact-height: 132px; } .site-header { padding: 12px 16px 8px; gap: 8px 12px; } .site-brand { font-size: .85rem; max-width: 260px; } .site-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .site-nav a { font-size: 1rem; padding: 6px 0; } } @media print { .site-header { display: none; } body { padding-top: 0; } } .assessment-process { background: #f9f7f5; padding: 48px 32px 60px; color: #29323a; scroll-margin-top: calc(var(--nav-compact-height) + 24px); } .assessment-processinner { max-width: 1240px; margin: 0 auto; } .assessment-process h2 { color: #233f63; font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.25; margin: 0 0 24px; } .assessment-processintro { max-width: 47rem; font-size: 1.15rem; line-height: 1.7; margin: 0 0 38px; } .assessment-processsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .assessment-processstep { border-top: 2px solid #ad492b; padding-top: 20px; } .assessment-processstep h3 { font-family: 'Inter', sans-serif; font-size: 1.3rem; line-height: 1.35; color: #2f5283; margin: 0 0 18px; } .assessment-processstep p { font-size: 1.15rem; line-height: 1.6; margin: 0; } .assessment-processnote { color: #626c77; font-size: 1.05rem; line-height: 1.65; margin: 60px 0 0; } @media (max-width: 760px) { .assessment-process { padding: 36px 24px 40px; } .assessment-processsteps { grid-template-columns: 1fr; gap: 28px; } .assessment-processintro { margin-bottom: 28px; } .assessment-processnote { margin-top: 36px; } } .assistance-note { margin-top: 28px; padding: 32px 36px; border-radius: 18px; background: #eaf0f6; color: #29323a; font-size: 1.15rem; line-height: 1.65; } .assistance-note p { margin: 0; } @media (max-width: 640px) { .assistance-note { padding: 24px; } } / ===== Language switch ===== */ #lang-switch { position: static; justify-self: end; display: flex; background: rgb(255 255 255 / 0.92); border-radius: 999px; padding: 3px; box-shadow: 0 2px 10px rgb(47 82 131 / 0.08); font: 700 0.82rem "Montserrat", sans-serif; } #lang-switch button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0.4rem 0.85rem; border-radius: 999px; color: #2f5283; letter-spacing: 0.02em; transition: background 0.2s ease, color 0.2s ease; } #lang-switch button.is-on { background: #2f5283; color: #fff; } @media (max-width: 640px) { #lang-switch { top: 10px; right: 10px; } #lang-switch button { padding: 0.32rem 0.6rem; font-size: 0.76rem; } } @media print { #lang-switch { display: none !important; } }