/* ============================================================================
PAGE.CSS — shared styles for secondary pages
(tokenizar, realos, institucional, legal, faq, invertir, ...)
Inherits tokens + utilities from main.css.
Institutional / capital-markets aesthetic — fine borders, mono labels,
italic em accents (no decorative gradients).
========================================================================== */
.page { background: var(--bg); color: var(--text); }
.page--dark { background: var(--ink); color: white; }
/* Buttons on dark surfaces (whole .page--dark body OR a dark .ph hero on a
light .page body) — flip to white primary so they stay visible. */
.page--dark .btn--primary,
.ph:not(.ph--light) .btn--primary {
background: white;
color: var(--ink);
border-color: white;
}
.page--dark .btn--primary:hover,
.ph:not(.ph--light) .btn--primary:hover {
background: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.88);
}
.page--dark .btn--ghost,
.ph:not(.ph--light) .btn--ghost {
background: transparent;
border: 1px solid rgba(255,255,255,0.20);
color: white;
}
.page--dark .btn--ghost:hover,
.ph:not(.ph--light) .btn--ghost:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.40);
}
/* Solid nav on secondary pages (no hero parallax behind) */
.nav--solid {
background: rgba(11, 12, 15, 0.86);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav--solid .nav__link.is-current {
color: white;
}
.nav--solid .nav__link.is-current::after {
content: "";
position: absolute;
left: 14px; right: 14px;
bottom: 6px;
height: 1px;
background: var(--peach);
opacity: 0.85;
}
.nav--solid .nav__link { position: relative; }
/* ============================================================================
PAGE HERO (ph) — top section of every secondary page.
Big editorial title, lots of air, no gradient text on em.
========================================================================== */
.ph {
position: relative;
padding: 220px 40px 140px;
background: var(--ink);
color: white;
overflow: hidden;
}
/* Optional photo backdrop layer driven by `data-page-bg="/path/to.jpg"`.
Shows the country/asset photo prominently with a soft darkening layer
on top for legibility. Premium institutional feel. */
/* Real ![]()
backdrop, injected by page.js when data-page-bg is set.
Replaces the previous ::after pseudo-element which had cross-origin
rendering issues in some screenshot/preview environments. */
.ph__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: contrast(1.05) brightness(0.55) saturate(0.88);
z-index: 0;
pointer-events: none;
}
.ph--light .ph__bg {
filter: contrast(0.98) brightness(0.95) saturate(0.92);
opacity: 0.7;
}
/* Soft darken layer — keeps text legible without hiding the photo. */
.ph[data-page-bg]::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 80% 10%, rgba(244,201,127,0.06), transparent 50%),
linear-gradient(110deg, rgba(11,12,15,0.78) 0%, rgba(11,12,15,0.55) 60%, rgba(11,12,15,0.35) 100%);
pointer-events: none;
z-index: 1;
}
.ph::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 85% 8%, rgba(244,201,127,0.06), transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(244,201,127,0.025), transparent 50%);
pointer-events: none;
}
.ph__inner { position: relative; z-index: 2; }
.ph::after {
/* fine architectural rule line under the title block */
content: "";
position: absolute;
left: 40px; right: 40px;
bottom: 0;
height: 1px;
background: rgba(255,255,255,0.08);
pointer-events: none;
}
.ph--gradient { background: linear-gradient(180deg, var(--ink) 0%, #14161B 100%); }
.ph--light {
background: var(--bg);
color: var(--text);
}
.ph--light::before { display: none; }
.ph--light::after { background: var(--border); }
.ph__inner {
position: relative;
max-width: var(--max);
margin: 0 auto;
text-align: left;
}
.ph__inner .eyebrow { margin-bottom: 28px; }
.ph__title {
font-size: clamp(44px, 6vw, 96px);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.96;
color: white;
margin-bottom: 32px;
max-width: 18ch;
}
.ph__title em {
font-style: normal;
font-weight: inherit;
color: inherit;
}
.ph--light .ph__title { color: var(--text); }
.ph__title--dark { color: var(--text); }
.ph__sub {
font-size: clamp(16px, 1.3vw, 21px);
line-height: 1.55;
color: rgba(255,255,255,0.66);
max-width: 62ch;
margin: 0 0 40px;
font-weight: 400;
letter-spacing: -0.005em;
}
.ph--light .ph__sub { color: var(--text-2); }
.ph__sub--dark { color: var(--text-2); }
.ph__ctas {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
}
/* Optional meta row — mono key/value pairs sitting under the lede.
*/
.ph__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px 40px;
margin-top: 56px;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.10);
max-width: 880px;
}
.ph--light .ph__meta { border-top-color: var(--border); }
.ph__meta > div {
display: flex;
flex-direction: column;
gap: 6px;
}
.ph__meta span {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.ph--light .ph__meta span { color: var(--text-3); }
.ph__meta strong {
font-weight: 600;
font-size: 15px;
letter-spacing: -0.01em;
color: white;
}
.ph--light .ph__meta strong { color: var(--text); }
/* Legacy ghost-dark button kept for compatibility */
.btn--ghost-dark {
background: transparent;
color: var(--text);
border: 1px solid var(--border-strong);
}
.btn--ghost-dark:hover { border-color: var(--text); background: rgba(11,12,15,0.04); }
/* ============================================================================
PAGE HERO — split layout with side visualization (used by realos, institucional)
========================================================================== */
.ph--with-viz { padding-bottom: 100px; }
.ph__inner--split {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 80px;
align-items: center;
}
.ph__copy { min-width: 0; }
/* RealOS topology */
.ro-map {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 560px;
justify-self: end;
}
.ro-map__svg {
width: 100%;
height: 100%;
display: block;
}
@keyframes roPulse {
0%, 100% { stroke-dashoffset: 0; opacity: 0.45; }
50% { stroke-dashoffset: -28; opacity: 0.85; }
}
.ro-rays line {
animation: roPulse 3.6s ease-in-out infinite;
}
.ro-rays line:nth-child(2) { animation-delay: 0.3s; }
.ro-rays line:nth-child(3) { animation-delay: 0.6s; }
.ro-rays line:nth-child(4) { animation-delay: 0.9s; }
.ro-rays line:nth-child(5) { animation-delay: 1.2s; }
.ro-rays line:nth-child(6) { animation-delay: 1.5s; }
.ro-rays line:nth-child(7) { animation-delay: 1.8s; }
.ro-rays line:nth-child(8) { animation-delay: 2.1s; }
@keyframes roNodePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
.ro-node circle:nth-child(2) {
transform-origin: center;
animation: roNodePulse 2.8s ease-in-out infinite;
animation-delay: var(--ro-delay, 0s);
}
/* Institucional asset stack visual */
.inst-viz {
position: relative;
width: 100%;
max-width: 540px;
aspect-ratio: 600 / 720;
justify-self: end;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 4px;
overflow: hidden;
box-shadow:
0 30px 80px -30px rgba(244,201,127,0.18),
0 10px 30px -10px rgba(0,0,0,0.55);
}
.inst-viz__svg { width: 100%; height: 100%; display: block; }
@keyframes instScan {
0% { transform: translateY(-180px); opacity: 0; }
10% { opacity: 0.7; }
50% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(420px); opacity: 0; }
}
.inst-scan {
transform-origin: center;
animation: instScan 8s ease-in-out infinite;
}
@keyframes instLayerFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.inst-layer {
transform-origin: center;
animation: instLayerFloat 6s ease-in-out infinite;
}
.inst-layer[data-i="2"] { animation-delay: 0.4s; }
.inst-layer[data-i="3"] { animation-delay: 0.8s; }
.inst-layer[data-i="4"] { animation-delay: 1.2s; }
.inst-layer[data-i="5"] { animation-delay: 1.6s; }
@media (max-width: 900px) {
.ph__inner--split { grid-template-columns: 1fr; gap: 50px; }
.ro-map { max-width: 380px; margin: 0 auto; justify-self: center; }
.inst-viz { max-width: 420px; margin: 0 auto; justify-self: center; }
}
/* ============================================================================
TK-FLOW — Tokenization centerpiece (pinned scroll, 4 phases)
========================================================================== */
.tk-flow {
position: relative;
background: var(--ink);
color: white;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
}
.tk-flow__pin {
height: 100vh;
min-height: 720px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px;
}
.tk-flow__layout {
position: relative;
width: 100%;
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 80px;
align-items: center;
}
.tk-flow__stage {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 640px;
justify-self: center;
}
.tk-flow__bg,
.tk-flow__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.tk-flow__bg { z-index: 0; }
.tk-flow__svg { z-index: 1; }
/* Phase visibility — controlled by JS via data-phase on .tk-flow */
.tk-flow__svg [data-tk] {
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
transform-origin: 400px 400px;
}
.tk-flow[data-phase="0"] .tk-flow__svg [data-tk="asset"] { opacity: 1; }
.tk-flow[data-phase="1"] .tk-flow__svg [data-tk="asset"] { opacity: 0.55; }
.tk-flow[data-phase="1"] .tk-flow__svg [data-tk="legal"] { opacity: 1; }
.tk-flow[data-phase="2"] .tk-flow__svg [data-tk="asset"] { opacity: 0.18; transform: scale(0.96); }
.tk-flow[data-phase="2"] .tk-flow__svg [data-tk="legal"] { opacity: 0; transform: translateX(-40px); }
.tk-flow[data-phase="2"] .tk-flow__svg [data-tk="grid"] { opacity: 1; }
.tk-flow[data-phase="3"] .tk-flow__svg [data-tk="asset"] { opacity: 0; }
.tk-flow[data-phase="3"] .tk-flow__svg [data-tk="grid"] { opacity: 0.65; transform: scale(0.42); }
.tk-flow[data-phase="3"] .tk-flow__svg [data-tk="wallets"] { opacity: 1; }
/* Captions — only the active one is visible */
.tk-flow__copy { position: relative; min-height: 360px; }
.tk-cap {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
}
.tk-flow[data-phase="0"] .tk-cap[data-phase="0"],
.tk-flow[data-phase="1"] .tk-cap[data-phase="1"],
.tk-flow[data-phase="2"] .tk-cap[data-phase="2"],
.tk-flow[data-phase="3"] .tk-cap[data-phase="3"] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.tk-cap__num {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--peach);
display: inline-flex;
align-items: center;
gap: 12px;
}
.tk-cap__num::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.tk-cap .h2 {
font-size: clamp(40px, 4.5vw, 72px);
color: white;
margin: 0;
}
.tk-cap p {
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.6;
color: rgba(255,255,255,0.66);
max-width: 52ch;
margin: 0;
}
/* Phase indicator dots */
.tk-flow__progress {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 22px;
z-index: 5;
}
.tk-flow__dot {
width: 28px;
height: 1px;
background: rgba(255,255,255,0.18);
transition: background 0.3s ease, height 0.3s ease;
}
.tk-flow[data-phase="0"] .tk-flow__dot[data-phase="0"],
.tk-flow[data-phase="1"] .tk-flow__dot[data-phase="1"],
.tk-flow[data-phase="2"] .tk-flow__dot[data-phase="2"],
.tk-flow[data-phase="3"] .tk-flow__dot[data-phase="3"] {
background: var(--peach);
}
@media (max-width: 900px) {
.tk-flow__pin { height: auto; min-height: 0; padding: 90px 20px; }
.tk-flow__layout { grid-template-columns: 1fr; gap: 50px; }
.tk-flow__stage { max-width: 460px; margin: 0 auto; }
.tk-flow__copy { min-height: 280px; }
.tk-cap .h2 { font-size: clamp(32px, 8vw, 48px); }
.tk-flow__progress { position: static; transform: none; margin: 30px auto 0; justify-content: center; }
}
/* ============================================================================
PSEC — generic page section
========================================================================== */
.psec {
padding: 140px 40px 140px;
background: var(--paper);
color: var(--text); /* override .page--dark white-on-white bug */
}
.psec--light { background: var(--bg); color: var(--text); }
/* Make sure light psec sections always have dark text, even inside .page--dark */
.psec:not(.psec--dark) h2,
.psec:not(.psec--dark) h3,
.psec:not(.psec--dark) p,
.psec:not(.psec--dark) .h2 {
color: var(--text);
}
.psec:not(.psec--dark) p { color: var(--text-2); }
.psec--dark {
background: var(--ink);
color: white;
position: relative;
overflow: hidden;
}
.psec--dark::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(244,201,127,0.04), transparent 60%);
pointer-events: none;
}
.psec > * { position: relative; }
.psec__head {
max-width: var(--max);
margin: 0 auto 72px;
text-align: left;
}
.psec__head--center { text-align: center; }
.psec__head--center .lede { margin-left: auto; margin-right: auto; }
.psec__head .eyebrow { margin-bottom: 20px; }
.psec__head .h2 { margin-bottom: 26px; max-width: 22ch; }
.psec__head--center .h2 { margin-left: auto; margin-right: auto; }
.psec__head .lede { max-width: 64ch; }
/* ============================================================================
CARD GRID
========================================================================== */
.card-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
gap: 0;
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.psec--dark .card-grid {
border-top-color: rgba(255,255,255,0.10);
border-left-color: rgba(255,255,255,0.10);
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* ============================================================================
INFO CARDS — institutional grid: cells with thin internal rules,
mono SVG icons, no rounded chips
========================================================================== */
.info-card {
background: transparent;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius: 0;
padding: 40px 32px 44px;
display: flex;
flex-direction: column;
gap: 14px;
transition: background 0.25s ease;
}
.psec--dark .info-card {
border-right-color: rgba(255,255,255,0.10);
border-bottom-color: rgba(255,255,255,0.10);
}
.info-card:hover {
background: rgba(11,12,15,0.025);
}
.psec--dark .info-card:hover {
background: rgba(255,255,255,0.025);
}
.info-card__icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: 6px;
color: var(--text);
margin-bottom: 18px;
}
.info-card__icon svg { width: 20px; height: 20px; stroke-width: 1.4; }
.psec--dark .info-card__icon {
border-color: rgba(255,255,255,0.22);
color: white;
}
.info-card h3 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.15;
color: var(--text);
}
.psec--dark .info-card h3 { color: white; }
.info-card p {
font-size: 14.5px;
line-height: 1.6;
color: var(--text-2);
max-width: 38ch;
}
.psec--dark .info-card p { color: rgba(255,255,255,0.62); }
.info-card--muted { opacity: 0.62; }
.info-card--muted:hover { opacity: 0.9; }
/* ============================================================================
BENEFIT CARD — numbered, monospace gestures
========================================================================== */
.benefit-card {
background: transparent;
border-right: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
border-radius: 0;
padding: 40px 30px 44px;
display: flex;
flex-direction: column;
gap: 14px;
transition: background 0.25s ease;
}
.benefit-card:hover { background: rgba(255,255,255,0.025); }
.psec--light .benefit-card,
.psec:not(.psec--dark) .benefit-card {
border-right-color: var(--border);
border-bottom-color: var(--border);
}
.psec--light .benefit-card:hover,
.psec:not(.psec--dark) .benefit-card:hover {
background: rgba(11,12,15,0.025);
}
.benefit-card__num {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--peach);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
background: transparent;
width: auto;
height: auto;
border-radius: 0;
padding: 0;
}
.benefit-card__num::before {
content: "";
width: 24px;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.psec--light .benefit-card__num,
.psec:not(.psec--dark) .benefit-card__num { color: var(--peach-deep); }
.benefit-card h3 {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.022em;
color: white;
}
.psec--light .benefit-card h3,
.psec:not(.psec--dark) .benefit-card h3 { color: var(--text); }
.benefit-card p {
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.62);
max-width: 36ch;
}
.psec--light .benefit-card p,
.psec:not(.psec--dark) .benefit-card p { color: var(--text-2); }
/* ============================================================================
CAP CARDS (RealOS capabilities)
========================================================================== */
.cap-card {
background: transparent;
border-right: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
border-radius: 0;
padding: 32px 26px 36px;
display: flex;
flex-direction: column;
gap: 12px;
transition: background 0.25s ease;
}
.cap-card:hover { background: rgba(255,255,255,0.025); }
.cap-card__icon {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid rgba(255,255,255,0.22);
border-radius: 6px;
color: white;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
margin-bottom: 14px;
}
.cap-card__icon svg { width: 18px; height: 18px; stroke-width: 1.4; }
.cap-card h3 {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.018em;
color: white;
}
.cap-card p {
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,0.6);
}
/* ============================================================================
PROC — process steps as a typographic ledger
========================================================================== */
.proc {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: 1px solid var(--border);
}
.psec--dark .proc { border-top-color: rgba(255,255,255,0.10); }
.proc-step {
background: transparent;
border-right: 1px solid var(--border);
border-radius: 0;
padding: 36px 26px 40px;
display: flex;
flex-direction: column;
gap: 10px;
transition: background 0.25s ease;
}
.psec--dark .proc-step { border-right-color: rgba(255,255,255,0.10); }
.proc-step:last-child { border-right: none; }
.proc-step:hover { background: rgba(11,12,15,0.025); }
.psec--dark .proc-step:hover { background: rgba(255,255,255,0.025); }
.proc-step__n {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--peach-deep);
margin-bottom: 14px;
text-transform: uppercase;
}
.psec--dark .proc-step__n { color: var(--peach); }
.proc-step h3 {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.022em;
line-height: 1.2;
}
.proc-step p {
font-size: 13.5px;
line-height: 1.6;
color: var(--text-2);
}
.psec--dark .proc-step p { color: rgba(255,255,255,0.6); }
/* When proc has 4 steps */
.psec .proc:has(.proc-step:nth-child(4):last-child) {
grid-template-columns: repeat(4, 1fr);
}
/* ============================================================================
STACK — RealOS architecture (4 layers)
========================================================================== */
.stack {
max-width: 980px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--border);
}
.psec--dark .stack { border-top-color: rgba(255,255,255,0.10); }
.stack-layer {
background: transparent;
border-bottom: 1px solid var(--border);
border-radius: 0;
padding: 32px 8px;
display: grid;
grid-template-columns: 80px 1.4fr 2.2fr;
align-items: baseline;
gap: 32px;
transition: background 0.25s ease;
}
.psec--dark .stack-layer { border-bottom-color: rgba(255,255,255,0.10); }
.stack-layer:hover { background: rgba(11,12,15,0.02); }
.psec--dark .stack-layer:hover { background: rgba(255,255,255,0.02); }
.stack-layer__num {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--peach-deep);
text-transform: uppercase;
}
.psec--dark .stack-layer__num { color: var(--peach); }
.stack-layer__name {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.022em;
}
.stack-layer p {
font-size: 14px;
color: var(--text-2);
line-height: 1.6;
max-width: 56ch;
}
.psec--dark .stack-layer p { color: rgba(255,255,255,0.62); }
.stack-layer--core .stack-layer__name { color: var(--peach); }
/* ============================================================================
RISK CARDS
========================================================================== */
.risk-card {
background: transparent;
border-right: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
border-radius: 0;
padding: 36px 32px 40px;
transition: background 0.25s ease;
}
.risk-card:hover { background: rgba(255,255,255,0.025); }
.psec--light .risk-card,
.psec:not(.psec--dark) .risk-card {
border-right-color: var(--border);
border-bottom-color: var(--border);
}
.risk-card h3 {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.022em;
color: white;
margin-bottom: 10px;
}
.psec--light .risk-card h3,
.psec:not(.psec--dark) .risk-card h3 { color: var(--text); }
.risk-card p {
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.62);
max-width: 44ch;
}
.psec--light .risk-card p,
.psec:not(.psec--dark) .risk-card p { color: var(--text-2); }
/* ============================================================================
DISCLAIM — long-form disclaimers
========================================================================== */
.disclaim {
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--border);
}
.disclaim p {
font-size: 15px;
line-height: 1.7;
color: var(--text-2);
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
padding: 24px 4px;
}
.disclaim strong { color: var(--text); font-weight: 600; }
.disclaim em { font-style: italic; color: var(--text); }
/* ============================================================================
CTA STRIP — closing CTA at end of pages
========================================================================== */
.cta-strip {
background: var(--ink);
color: white;
padding: 140px 40px 140px;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
}
.cta-strip::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(244,201,127,0.05), transparent 60%);
pointer-events: none;
}
.cta-strip__inner {
position: relative;
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.cta-strip__inner .h2 { margin-bottom: 26px; }
.cta-strip__inner .lede { margin: 0 auto 40px; }
/* ============================================================================
CTA FORM — full-width form section
========================================================================== */
.cta-form {
background: var(--ink);
color: white;
padding: 140px 40px 140px;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
}
.cta-form::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 100% 0%, rgba(244,201,127,0.05), transparent 50%);
pointer-events: none;
}
.cta-form__inner {
position: relative;
max-width: 720px;
margin: 0 auto;
text-align: left;
}
.cta-form__inner .eyebrow { margin-bottom: 20px; }
.cta-form__inner .h2 { margin-bottom: 26px; max-width: 18ch; }
.cta-form__inner .lede { margin: 0 0 44px; }
.cta-form__form {
display: flex;
flex-direction: column;
gap: 14px;
text-align: left;
border-top: 1px solid rgba(255,255,255,0.10);
padding-top: 32px;
}
.cta-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.input {
width: 100%;
height: 56px;
padding: 0 18px;
background: transparent;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 6px;
color: white;
font-size: 15px;
font-family: inherit;
letter-spacing: -0.005em;
transition: border-color 0.2s ease, background 0.2s ease;
}
.input:focus {
outline: none;
border-color: rgba(255,255,255,0.55);
background: rgba(255,255,255,0.025);
}
.input::placeholder { color: rgba(255,255,255,0.42); }
.input--area {
height: auto;
padding: 18px 18px;
resize: vertical;
min-height: 120px;
line-height: 1.55;
}
select.input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
padding-right: 44px;
}
.cta-form__form .btn {
margin-top: 14px;
align-self: flex-start;
justify-content: center;
}
.cta-form__small {
font-size: 12px;
font-family: var(--font-mono);
letter-spacing: 0.02em;
color: rgba(255,255,255,0.42);
text-align: left;
margin-top: 10px;
}
.cta-form__success { display: none; }
.cta-form__form.done .cta-form__default { display: none; }
.cta-form__form.done .cta-form__success { display: inline; }
.cta-form__form.done .input { opacity: 0.5; pointer-events: none; }
/* ============================================================================
FAQ — accordion preguntas frecuentes
========================================================================== */
.faq-section { padding: 110px 40px 140px; }
.faq {
max-width: 920px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 64px;
}
.faq__group { display: flex; flex-direction: column; gap: 0; }
.faq__group-title {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--peach-deep);
padding-bottom: 16px;
margin-bottom: 0;
border-bottom: 1px solid var(--border-strong);
display: inline-flex;
align-items: center;
gap: 12px;
}
.faq__group-title::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.faq-item {
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
overflow: hidden;
transition: background 0.2s ease;
}
.faq-item:hover { background: rgba(11,12,15,0.02); }
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 26px 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-size: 17px;
font-weight: 500;
letter-spacing: -0.018em;
color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__plus {
width: 24px; height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--text);
border-radius: 0;
font-size: 18px;
font-weight: 300;
flex-shrink: 0;
transition: transform 0.25s ease;
font-family: var(--font-mono);
}
.faq-item[open] .faq-item__plus { transform: rotate(45deg); }
.faq-item__body {
padding: 0 4px 26px;
font-size: 14.5px;
line-height: 1.7;
color: var(--text-2);
max-width: 70ch;
}
.faq-item__body a {
color: var(--peach-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ============================================================================
MOBILE — secondary pages
========================================================================== */
@media (max-width: 1024px) {
.ph { padding: 130px 22px 80px; }
.ph__inner { text-align: left; }
.ph__title { font-size: clamp(36px, 9vw, 56px); max-width: none; }
.ph__sub { font-size: 15px; margin-bottom: 28px; }
.ph__ctas { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
.ph__ctas .btn { width: 100%; justify-content: center; }
.ph__meta { gap: 18px 24px; margin-top: 40px; padding-top: 22px; }
.psec { padding: 90px 20px 90px; }
.psec__head { margin-bottom: 48px; }
.psec__head .h2 { max-width: none; }
.card-grid--2,
.card-grid--3,
.card-grid--4 {
grid-template-columns: 1fr;
border-left: none;
border-top: 1px solid var(--border);
}
.psec--dark .card-grid--2,
.psec--dark .card-grid--3,
.psec--dark .card-grid--4 {
border-top-color: rgba(255,255,255,0.10);
}
.info-card,
.benefit-card,
.cap-card,
.risk-card {
border-right: none;
padding: 32px 4px 36px;
}
.proc { grid-template-columns: 1fr; }
.proc-step {
border-right: none;
border-bottom: 1px solid var(--border);
padding: 28px 4px 32px;
}
.psec--dark .proc-step { border-bottom-color: rgba(255,255,255,0.10); }
.proc-step:last-child { border-bottom: none; }
.stack-layer {
grid-template-columns: 1fr;
gap: 8px;
padding: 26px 4px;
}
.cta-strip { padding: 90px 20px 90px; }
.cta-form { padding: 90px 20px 90px; }
.cta-form__inner { text-align: left; }
.cta-form__row { grid-template-columns: 1fr; }
.input { height: 52px; font-size: 15px; }
.cta-form__form .btn { align-self: stretch; }
.disclaim p { font-size: 14px; padding: 22px 4px; }
.faq-section { padding: 70px 20px 90px; }
.faq { gap: 44px; }
.faq-item summary { padding: 22px 4px; font-size: 15.5px; }
.faq-item__body { padding: 0 4px 22px; font-size: 14px; }
}
/* ============================================================================
PHASE 14 — Mobile coherence (page.css)
========================================================================== */
@media (max-width: 1024px) {
/* PAGE HERO — centered */
.ph {
padding: 130px 22px 80px;
text-align: center;
}
.ph__inner { text-align: center; }
.ph__inner--split {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.ph__copy { text-align: center; align-items: center; }
.ph__copy .eyebrow { justify-content: center; }
.ph__title {
font-size: clamp(34px, 9vw, 52px);
letter-spacing: -0.035em;
line-height: 1.05;
max-width: 18ch;
margin-left: auto;
margin-right: auto;
}
.ph__sub {
font-size: 15.5px;
max-width: 42ch;
margin: 0 auto 28px;
}
.ph__ctas {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
.ph__ctas .btn { width: 100%; justify-content: center; }
/* Side viz: drop below copy, centered */
.ro-map,
.inst-viz {
max-width: 380px !important;
margin: 16px auto 0 !important;
justify-self: center !important;
}
/* PAGE-HERO PHOTO BACKDROP — tone down on mobile so text wins */
.ph[data-page-bg]::after { opacity: 0.10 !important; }
.ph[data-page-bg]::before {
background:
radial-gradient(ellipse at 50% 0%, rgba(244,201,127,0.05), transparent 50%),
linear-gradient(180deg, rgba(11,12,15,0.78) 0%, rgba(11,12,15,0.94) 100%) !important;
}
/* PSEC — heading center + max-width */
.psec { padding: 80px 22px; }
.psec__head {
text-align: center;
margin-bottom: 44px;
}
.psec__head .h2 { margin-left: auto; margin-right: auto; }
.psec__head .eyebrow { justify-content: center; }
.psec__head .lede { margin-left: auto; margin-right: auto; max-width: 42ch; }
/* CARD GRID — single column, no left/right border (top only) */
.card-grid--2,
.card-grid--3,
.card-grid--4 {
grid-template-columns: 1fr;
border-left: none;
}
.info-card,
.benefit-card,
.cap-card,
.risk-card {
border-right: none;
padding: 28px 4px 32px;
text-align: left;
}
/* Keep card icon and number left-aligned (institutional, not centered) */
/* PROC steps */
.proc {
grid-template-columns: 1fr !important;
border-top: 1px solid var(--border);
}
.proc-step {
border-right: none !important;
border-bottom: 1px solid var(--border);
padding: 26px 4px 30px;
text-align: left;
}
.proc-step:last-child { border-bottom: none; }
.psec--dark .proc-step { border-bottom-color: rgba(255,255,255,0.10); }
/* STACK (RealOS) */
.stack-layer {
grid-template-columns: 1fr;
gap: 6px;
padding: 22px 4px;
}
/* CTA STRIP / FORM */
.cta-strip { padding: 80px 22px; text-align: center; }
.cta-form { padding: 80px 22px; }
.cta-form__inner { text-align: center; }
.cta-form__inner .h2 { margin-left: auto; margin-right: auto; }
.cta-form__inner .lede { margin-left: auto; margin-right: auto; }
.cta-form__form {
text-align: left;
max-width: 420px;
margin: 0 auto;
}
.cta-form__row { grid-template-columns: 1fr; gap: 12px; }
.cta-form__form .btn { align-self: stretch; }
.cta-form__small { text-align: center; }
/* DISCLAIM */
.disclaim p { text-align: left; padding: 22px 4px; }
/* FAQ */
.faq-section { padding: 60px 22px 90px; }
.faq { gap: 36px; }
.faq__group-title { justify-content: flex-start; }
.faq-item summary { padding: 18px 4px; font-size: 15px; }
.faq-item__body { padding: 0 4px 18px; font-size: 14px; }
/* TK-FLOW — graphic sticky on top, captions stacked below */
.tk-flow__pin {
height: auto;
min-height: 0;
padding: 70px 22px 90px;
display: block;
}
.tk-flow__layout {
display: flex;
flex-direction: column;
gap: 0;
text-align: center;
}
.tk-flow__stage {
max-width: 360px;
margin: 0 auto 30px;
width: 100%;
position: sticky;
top: 90px;
z-index: 2;
}
.tk-flow__copy {
min-height: 0;
text-align: center;
align-items: center;
position: relative;
display: flex;
flex-direction: column;
gap: 56px; /* breathing room between phases */
}
/* All captions visible, stacked. The graphic above switches phase as the
user scrolls past each one. */
.tk-cap {
position: relative;
inset: auto;
opacity: 1;
transform: none;
pointer-events: auto;
align-items: center;
text-align: center;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 60vh;
justify-content: center;
}
.tk-cap__num { justify-content: center; }
.tk-cap .h2 { font-size: clamp(28px, 7.5vw, 42px); margin: 0 auto; max-width: 18ch; }
.tk-cap p { margin: 0 auto; max-width: 42ch; font-size: 15px; }
.tk-flow__progress {
display: none; /* mono dots not needed on mobile flow */
}
/* Ensure SVG fills properly */
.tk-flow__svg, .tk-flow__bg, .ro-map__svg, .inst-viz__svg {
width: 100%;
height: 100%;
display: block;
}
}
@media (max-width: 390px) {
.ph__title { font-size: clamp(30px, 8.5vw, 42px); }
.psec__head .h2 { font-size: clamp(28px, 8vw, 40px); }
.ro-map, .inst-viz { max-width: 320px !important; }
.tk-flow__stage { max-width: 320px; }
}
/* ============================================================================
PHASE 16 — Interactive pyramid (institucional)
Pinned-scroll experience: 5 stacked blocks on the left,
captions on the right step through and highlight the active block.
========================================================================== */
.pyr {
position: relative;
background: var(--ink);
color: white;
border-top: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
}
.pyr::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(244,201,127,0.06), transparent 55%),
radial-gradient(ellipse at 80% 50%, rgba(120,137,165,0.05), transparent 55%);
pointer-events: none;
}
.pyr__pin {
height: 100vh;
min-height: 720px;
display: flex;
align-items: center;
padding: 0 40px;
position: relative;
}
.pyr__layout {
position: relative;
width: 100%;
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
/* LEFT — pyramid stage */
.pyr__stage {
position: relative;
width: 100%;
max-width: 540px;
justify-self: center;
}
.pyr__stack {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
perspective: 800px;
}
.pyr-block {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(180deg, rgba(31,34,41,0.95), rgba(15,17,21,0.95));
border: 1px solid rgba(255,255,255,0.10);
border-radius: 6px;
padding: 22px 28px;
color: rgba(255,255,255,0.55);
transition:
width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.45s ease,
background 0.45s ease,
color 0.45s ease,
box-shadow 0.45s ease,
opacity 0.45s ease;
opacity: 0.45;
will-change: transform, width;
}
/* Pyramid widths: top is narrowest, base is widest */
.pyr-block[data-i="1"] { width: 56%; }
.pyr-block[data-i="2"] { width: 68%; }
.pyr-block[data-i="3"] { width: 80%; }
.pyr-block[data-i="4"] { width: 92%; }
.pyr-block[data-i="5"] { width: 100%; }
.pyr-block__num {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.40);
transition: color 0.45s ease;
}
.pyr-block__name {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.018em;
color: rgba(255,255,255,0.85);
transition: color 0.45s ease;
}
/* Active block — scaled, glowing, gold accents */
.pyr[data-i="1"] .pyr-block[data-i="1"],
.pyr[data-i="2"] .pyr-block[data-i="2"],
.pyr[data-i="3"] .pyr-block[data-i="3"],
.pyr[data-i="4"] .pyr-block[data-i="4"],
.pyr[data-i="5"] .pyr-block[data-i="5"] {
opacity: 1;
transform: translateZ(0) scale(1.04);
background: linear-gradient(180deg, rgba(63,46,17,0.95), rgba(31,22,8,0.95));
border-color: rgba(244,201,127,0.55);
box-shadow:
0 30px 60px -20px rgba(244,201,127,0.25),
0 0 0 1px rgba(244,201,127,0.20) inset;
}
.pyr[data-i="1"] .pyr-block[data-i="1"] .pyr-block__num,
.pyr[data-i="2"] .pyr-block[data-i="2"] .pyr-block__num,
.pyr[data-i="3"] .pyr-block[data-i="3"] .pyr-block__num,
.pyr[data-i="4"] .pyr-block[data-i="4"] .pyr-block__num,
.pyr[data-i="5"] .pyr-block[data-i="5"] .pyr-block__num { color: var(--peach); }
.pyr[data-i="1"] .pyr-block[data-i="1"] .pyr-block__name,
.pyr[data-i="2"] .pyr-block[data-i="2"] .pyr-block__name,
.pyr[data-i="3"] .pyr-block[data-i="3"] .pyr-block__name,
.pyr[data-i="4"] .pyr-block[data-i="4"] .pyr-block__name,
.pyr[data-i="5"] .pyr-block[data-i="5"] .pyr-block__name { color: white; }
.pyr__caption-mono {
margin-top: 28px;
text-align: center;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.3em;
color: rgba(255,255,255,0.35);
}
/* RIGHT — stepping captions */
.pyr__copy {
position: relative;
min-height: 360px;
}
.pyr-step {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
}
.pyr[data-i="0"] .pyr-step[data-i="0"],
.pyr[data-i="1"] .pyr-step[data-i="1"],
.pyr[data-i="2"] .pyr-step[data-i="2"],
.pyr[data-i="3"] .pyr-step[data-i="3"],
.pyr[data-i="4"] .pyr-step[data-i="4"],
.pyr[data-i="5"] .pyr-step[data-i="5"] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.pyr-step__num {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--peach);
display: inline-flex;
align-items: center;
gap: 12px;
text-transform: uppercase;
}
.pyr-step__num::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.pyr-step .h2 {
font-size: clamp(34px, 4vw, 56px);
margin: 0;
color: white;
}
.pyr-step p {
font-size: clamp(15px, 1.15vw, 18px);
line-height: 1.6;
color: rgba(255,255,255,0.66);
max-width: 50ch;
margin: 0;
}
/* Mobile pyramid — sticky stage on top, captions stacked below */
@media (max-width: 900px) {
.pyr__pin {
height: auto;
min-height: 0;
padding: 80px 22px;
display: block;
}
.pyr__layout {
grid-template-columns: 1fr;
gap: 28px;
}
.pyr__stage {
max-width: 360px;
margin: 0 auto;
position: sticky;
top: 90px;
z-index: 2;
}
.pyr-block {
padding: 16px 20px;
border-radius: 5px;
}
.pyr-block__name { font-size: 15px; }
.pyr__caption-mono { display: none; }
.pyr__copy {
min-height: 0;
display: flex;
flex-direction: column;
gap: 50px;
text-align: center;
}
.pyr-step {
position: relative;
inset: auto;
opacity: 1;
transform: none;
pointer-events: auto;
align-items: center;
text-align: center;
padding: 0;
min-height: 56vh;
justify-content: center;
display: flex;
}
.pyr-step__num { justify-content: center; }
.pyr-step .h2 {
font-size: clamp(28px, 7.5vw, 40px);
margin: 0 auto;
max-width: 18ch;
}
.pyr-step p { margin: 0 auto; max-width: 42ch; font-size: 15px; }
}
/* ============================================================================
IPHONES — 3-phone showcase under invertir hero
========================================================================== */
.iphones {
background: var(--bg);
padding: 60px 40px 80px;
border-bottom: 1px solid var(--border);
}
.iphones__inner {
max-width: var(--max);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.iphones__row {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
width: 100%;
}
.iphones__phone {
flex-shrink: 0;
}
/* Side phones tilt slightly + scaled smaller, center phone is the hero */
.iphones__phone--side {
transform: scale(0.86);
opacity: 0.92;
transition: transform 0.4s ease;
}
.iphones__row > .iphones__phone--side:first-child { transform: scale(0.86) rotate(-3deg); }
.iphones__row > .iphones__phone--side:last-child { transform: scale(0.86) rotate(3deg); }
.iphones__phone--center {
z-index: 2;
transform: translateY(-12px);
filter: drop-shadow(0 30px 60px rgba(11,12,15,0.18));
}
.iphones__caption {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.iphones__caption .eyebrow { justify-content: center; }
.iphones__caption p {
font-size: clamp(15px, 1.2vw, 18px);
color: var(--text-2);
letter-spacing: -0.005em;
margin: 0;
max-width: 38ch;
}
/* ============================================================================
IPHONES — PNG stack (mobile-only) + 3 phones row (desktop-only)
========================================================================== */
/* Default: desktop shows 3 phones, hides PNG stack */
.iphones__stack { display: none; }
.iphones__notif-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--bg-dark, #0B0C0F);
color: var(--accent, #F4C97F);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display, -apple-system, "SF Pro Display", sans-serif);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
}
.iphones__notif-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.iphones__notif-lbl {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-2, #8A919E);
}
.iphones__notif-val {
font-family: var(--font-display, -apple-system, "SF Pro Display", sans-serif);
font-size: 17px;
font-weight: 700;
color: var(--text, #0B0C0F);
letter-spacing: -0.01em;
}
/* Mobile: hide 3-phone row, show edge-to-edge PNG with floating notif */
@media (max-width: 1024px) {
.iphones {
padding: 0 0 36px !important;
background:
radial-gradient(ellipse at 50% 50%, rgba(244,201,127,0.16) 0%, transparent 60%),
var(--bg);
overflow: hidden;
position: relative;
}
.iphones__inner {
gap: 20px;
max-width: 100%;
padding: 0;
}
.iphones__row { display: none !important; }
.iphones__stack {
display: block;
position: relative;
width: 100%;
max-width: 100%;
margin: 0;
}
.iphones__img {
display: block;
width: 100%;
height: auto;
}
.iphones__notif {
position: absolute;
z-index: 5;
top: 12%;
left: 6%;
display: flex;
align-items: center;
gap: 11px;
padding: 11px 14px 11px 11px;
background: #fff;
border-radius: 14px;
box-shadow:
0 22px 44px -10px rgba(11,12,15,0.32),
0 6px 14px -4px rgba(11,12,15,0.10);
transform: rotate(-4deg);
}
.iphones__notif-icon {
width: 36px;
height: 36px;
border-radius: 10px;
font-size: 18px;
}
.iphones__notif-lbl { font-size: 9px; letter-spacing: 0.14em; }
.iphones__notif-val { font-size: 14px; }
.iphones__caption {
margin-top: 8px;
padding: 0 22px;
text-align: center;
}
.iphones__caption .eyebrow { font-size: 12px; }
.iphones__caption p { font-size: 16px; line-height: 1.5; }
}
/* ============================================================================
DIVERSIFY — "tu S/ 100 va a varios proyectos" visual
========================================================================== */
.diversify {
background: var(--bg);
padding: 120px 40px;
border-bottom: 1px solid var(--border);
}
.diversify__inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
}
.diversify__head .eyebrow { margin-bottom: 18px; }
.diversify__head h2 {
margin: 0 0 24px;
}
.diversify__head h2 em {
font-style: normal;
color: var(--peach-deep);
}
.diversify__head .lede {
margin: 0 0 28px;
max-width: 46ch;
}
.diversify__cta {
margin-top: 12px;
}
/* The visual: source S/100 → 4 allocation rows */
.diversify__viz {
display: flex;
flex-direction: column;
gap: 14px;
background: var(--bg-warm);
border: 1px solid var(--border);
border-radius: 24px;
padding: 28px;
box-shadow: 0 30px 60px -20px rgba(11,12,15,0.10);
}
.alloc-row {
display: grid;
grid-template-columns: 90px 1fr auto;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 14px;
position: relative;
}
.alloc-row::before {
content: "";
position: absolute;
left: 0; top: 12%; bottom: 12%;
width: 4px;
border-radius: 0 4px 4px 0;
}
.alloc-row--re::before { background: #2D6BB8; }
.alloc-row--agro::before { background: #4F8F4A; }
.alloc-row--frq::before { background: var(--peach-deep); }
.alloc-row__amt {
font-family: var(--font-display, -apple-system, "SF Pro Display", sans-serif);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
}
.alloc-row__name {
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.alloc-row__cat {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
text-align: right;
}
/* Mobile / tablet */
@media (max-width: 1024px) {
.diversify {
padding: 48px 18px;
}
.diversify__inner {
grid-template-columns: 1fr;
gap: 24px;
}
.diversify__head .lede { max-width: none; font-size: 15px; line-height: 1.5; }
.diversify__viz {
padding: 12px;
border-radius: 16px;
gap: 6px;
}
.alloc-row {
grid-template-columns: 60px 1fr;
grid-template-rows: auto auto;
gap: 2px 10px;
padding: 8px 10px;
}
.alloc-row__amt {
grid-row: 1 / 3;
grid-column: 1;
align-self: center;
font-size: 15px;
}
.alloc-row__name {
grid-row: 1;
grid-column: 2;
font-size: 12.5px;
}
.alloc-row__cat {
grid-row: 2;
grid-column: 2;
text-align: left;
font-size: 8.5px;
}
}
@media (max-width: 600px) {
.diversify { padding: 36px 14px; }
.diversify__head h2 { font-size: clamp(26px, 7vw, 36px); }
.diversify__head .lede { font-size: 13.5px; }
}
/* ============================================================================
¿POR QUÉ REAL? — 4 pilares (retail or B2B variant)
========================================================================== */
.why {
background: var(--bg);
padding: 120px 40px;
border-bottom: 1px solid var(--border);
}
.why--dark {
background: var(--ink);
border-bottom-color: rgba(255,255,255,0.06);
}
.why__head {
max-width: var(--max);
margin: 0 auto 56px;
text-align: center;
}
.why__head .eyebrow { justify-content: center; margin-bottom: 18px; }
.why__head h2 { margin: 0 0 18px; }
.why__head .lede { margin: 0 auto; max-width: 56ch; }
.why__grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.why-card {
position: relative;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px 24px 26px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.why-card:hover {
transform: translateY(-2px);
border-color: rgba(11,12,15,0.18);
box-shadow: 0 30px 60px -20px rgba(11,12,15,0.10);
}
.why-card--dark {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.85);
}
.why-card--dark:hover {
border-color: rgba(255,255,255,0.18);
background: rgba(255,255,255,0.05);
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.40);
}
.why-card__icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(11,12,15,0.04);
border: 1px solid var(--border);
color: var(--text);
margin-bottom: 6px;
}
.why-card--dark .why-card__icon {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.10);
color: var(--peach);
}
.why-card__h3 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
color: var(--text);
}
.why-card--dark .why-card__h3 { color: #fff; }
.why-card__p {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
letter-spacing: -0.005em;
}
.why-card--dark .why-card__p { color: rgba(255,255,255,0.66); }
/* Mobile / tablet */
@media (max-width: 1024px) {
.why { padding: 56px 22px; }
.why__head { margin-bottom: 28px; }
.why__grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.why-card {
padding: 16px 14px 14px;
border-radius: 12px;
}
.why-card__icon { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 12px; }
.why-card__h3 { font-size: 14px; line-height: 1.25; margin-bottom: 6px; }
.why-card__p { font-size: 12.5px; line-height: 1.4; }
}
@media (max-width: 600px) {
.why { padding: 44px 16px; }
.why-card { padding: 14px 12px; }
.why-card__icon { width: 28px; height: 28px; margin-bottom: 8px; }
.why-card__h3 { font-size: 13px; }
.why-card__p { font-size: 12px; }
}
/* ============================================================================
PROMESA — retail vs empresas (split block)
========================================================================== */
.promise {
background: var(--ink);
padding: 120px 40px;
}
.promise__inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.promise-card {
position: relative;
padding: 44px 36px 36px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
display: flex;
flex-direction: column;
gap: 16px;
transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.promise-card:hover {
border-color: rgba(255,255,255,0.20);
background: rgba(255,255,255,0.05);
transform: translateY(-2px);
}
.promise-card--biz {
background:
radial-gradient(ellipse at top right, rgba(244,201,127,0.10), transparent 60%),
rgba(255,255,255,0.03);
border-color: rgba(244,201,127,0.20);
}
.promise-card .eyebrow { justify-content: flex-start; }
.promise-card__h {
font-family: var(--font-sans);
font-size: clamp(24px, 2.4vw, 30px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.18;
margin: 0;
color: #fff;
}
.promise-card__p {
font-size: 15.5px;
line-height: 1.55;
color: rgba(255,255,255,0.66);
margin: 0 0 8px;
letter-spacing: -0.005em;
}
.promise-card .btn { align-self: flex-start; }
@media (max-width: 1024px) {
.promise { padding: 48px 18px; }
.promise__inner {
grid-template-columns: 1fr;
gap: 12px;
}
.promise-card {
padding: 22px 18px 20px;
border-radius: 14px;
}
.promise-card__h { font-size: 19px; margin-bottom: 8px; }
.promise-card__p { font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
.promise-card .eyebrow { margin-bottom: 12px; }
}
@media (max-width: 600px) {
.promise { padding: 36px 14px; }
.promise-card { padding: 18px 16px; }
}
/* ============================================================================
SPOTLIGHT 5-card variant — used on /tokenizar (5 asset categories)
========================================================================== */
.spotlight__grid--5 {
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-auto-flow: row;
}
.spotlight__grid--5 .spot-card:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
}
.spotlight__grid--5 .spot-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.spotlight__grid--5 .spot-card:nth-child(3) { grid-column: 3; grid-row: 1; }
.spotlight__grid--5 .spot-card:nth-child(4) { grid-column: 2; grid-row: 2; }
.spotlight__grid--5 .spot-card:nth-child(5) { grid-column: 3; grid-row: 2; }
@media (max-width: 1024px) {
.spotlight__grid--5 {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.spotlight__grid--5 .spot-card:nth-child(n) {
grid-column: 1;
grid-row: auto;
}
}
/* ============================================================================
FLOW DIAGRAM — line-drawn 4-step process visualization
Activo → SPV → Token → Inversionista
========================================================================== */
.flow-diagram {
max-width: 1200px;
margin: 64px auto 0;
padding: 32px 24px;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
gap: 0;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--paper);
}
.psec--dark .flow-diagram {
border-color: rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
}
.flow-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 8px 12px;
color: var(--text);
}
.psec--dark .flow-step { color: white; }
.flow-step__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 14px;
color: var(--text);
margin-bottom: 14px;
background: var(--bg-warm);
}
.psec--dark .flow-step__icon {
border-color: rgba(255,255,255,0.14);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.85);
}
.flow-step__icon svg { width: 28px; height: 28px; }
.flow-step--accent .flow-step__icon {
border-color: var(--peach-deep);
background: var(--peach-soft);
color: var(--peach-deep);
}
.psec--dark .flow-step--accent .flow-step__icon {
border-color: var(--peach);
background: rgba(244,201,127,0.10);
color: var(--peach);
}
.flow-step__label {
font-family: var(--font-sans);
font-size: 14.5px;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.flow-step__sub {
font-size: 12px;
line-height: 1.45;
color: var(--text-2);
max-width: 22ch;
}
.psec--dark .flow-step__sub { color: rgba(255,255,255,0.55); }
.flow-arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-3);
padding: 0 4px;
}
.flow-arrow svg { width: 60px; height: 14px; }
.psec--dark .flow-arrow { color: rgba(255,255,255,0.32); }
@media (max-width: 1024px) {
.flow-diagram {
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 0;
padding: 22px 18px;
margin: 40px 22px 0;
max-width: none;
}
.flow-step { padding: 14px 8px; }
.flow-step__sub { max-width: 28ch; }
.flow-arrow {
transform: rotate(90deg);
padding: 4px 0;
}
.flow-arrow svg { width: 32px; height: 10px; }
}
/* ============================================================================
ASSETS BLOCK — compact two-column section (inmobiliario + agro)
replaces the 8+8 card grid for cleaner scanning on landings
========================================================================== */
.assets-block {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
}
.assets-col {
display: flex;
flex-direction: column;
gap: 14px;
}
.assets-col__h {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.015em;
color: white;
margin: 0;
}
.psec--light .assets-col__h { color: var(--text); }
.assets-col__p {
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,0.66);
margin: 0 0 6px;
}
.psec--light .assets-col__p { color: var(--text-2); }
.assets-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.assets-list li {
font-size: 14.5px;
line-height: 1.55;
color: rgba(255,255,255,0.78);
padding: 12px 0 12px 18px;
border-top: 1px solid rgba(255,255,255,0.08);
position: relative;
}
.assets-list li::before {
content: "";
position: absolute;
left: 0;
top: 22px;
width: 8px;
height: 1px;
background: var(--peach);
}
.assets-list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.psec--light .assets-list li {
color: var(--text-2);
border-color: var(--border);
}
.psec--light .assets-list li:last-child { border-color: var(--border); }
.assets-list li strong {
color: white;
font-weight: 600;
}
.psec--light .assets-list li strong { color: var(--text); }
.assets-foot {
max-width: var(--max);
margin: 36px auto 0;
font-size: 13.5px;
font-family: var(--font-mono);
letter-spacing: 0.03em;
color: rgba(255,255,255,0.55);
text-align: center;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.assets-foot strong {
color: rgba(255,255,255,0.85);
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: -0.005em;
}
.psec--light .assets-foot {
color: var(--text-3);
border-top-color: var(--border);
}
.psec--light .assets-foot strong { color: var(--text); }
@media (max-width: 1024px) {
.assets-block {
grid-template-columns: 1fr;
gap: 40px;
}
.assets-col__h { font-size: 19px; }
.assets-col__p { font-size: 14.5px; }
.assets-list li { font-size: 14px; padding: 10px 0 10px 16px; }
.assets-list li::before { top: 19px; }
.assets-foot { font-size: 12.5px; margin-top: 28px; padding-top: 18px; }
}
/* ============================================================================
COUNTRY LINKS — minimalist text links (no buttons, no borders, no cells)
========================================================================== */
.country-links {
background: var(--ink-2);
padding: 80px 40px 90px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.country-links__inner {
max-width: var(--max);
margin: 0 auto;
}
.country-links__inner .eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.country-links__inner .h2 { margin: 0 0 14px; }
.country-links__inner .lede { margin: 0 0 36px; max-width: 56ch; }
/* Active markets — larger, with peach dot */
.country-links__group { margin-bottom: 32px; }
.country-links__group:last-child { margin-bottom: 0; }
.country-links__group-lbl {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.country-links__grid--active {
grid-template-columns: 1fr;
row-gap: 10px;
}
.country-links__grid--active li { position: relative; padding-left: 18px; }
.country-links__grid--active li::before {
content: "";
position: absolute;
left: 0; top: 0.6em;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--peach);
}
.country-links__grid--active a {
font-size: 16px;
color: rgba(255,255,255,0.85);
}
.country-links__grid--soon { opacity: 0.7; }
.country-links__grid--soon a { font-size: 14px; color: rgba(255,255,255,0.55); }
.country-links__grid--soon a:hover { color: rgba(255,255,255,0.85); }
.country-links__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 48px;
row-gap: 14px;
}
.country-links__grid li { padding: 0; }
.country-links__grid a {
display: inline-block;
padding: 0;
color: rgba(255,255,255,0.68);
text-decoration: none;
font-size: 14.5px;
letter-spacing: -0.005em;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.country-links__grid a:hover {
color: white;
border-bottom-color: rgba(255,255,255,0.4);
}
@media (max-width: 1024px) {
.country-links { padding: 50px 22px 60px; }
.country-links__grid {
grid-template-columns: 1fr 1fr;
column-gap: 24px;
row-gap: 12px;
}
.country-links__grid a { font-size: 14px; }
}
@media (max-width: 480px) {
.country-links__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================================
HERO sub short — used on the homepage to keep the subtitle as a tagline
========================================================================== */
.hero__sub--short {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.66) !important;
max-width: none !important;
margin-bottom: 36px !important;
}
@media (max-width: 1024px) {
.hero__sub--short { font-size: 12px; letter-spacing: 0.14em; }
}
/* ============================================================================
LEADERSHIP page — three founders
========================================================================== */
.leaders {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--border);
}
.leader {
display: grid;
grid-template-columns: 320px 1fr;
gap: 64px;
padding: 72px 0;
border-bottom: 1px solid var(--border);
align-items: center;
}
.leader--reverse { grid-template-columns: 1fr 320px; }
.leader--reverse .leader__photo { order: 2; }
.leader--reverse .leader__body { order: 1; }
.leader__photo {
position: relative;
width: 100%;
aspect-ratio: 1 / 1.15;
background:
radial-gradient(ellipse at 50% 30%, rgba(244,201,127,0.14), transparent 65%),
linear-gradient(180deg, var(--bg-warm), var(--paper));
border: 1px solid var(--border);
border-radius: 8px;
display: grid;
place-items: center;
overflow: hidden;
}
.leader__photo::before {
/* mono dotted texture so the placeholder reads as intentional */
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at center, rgba(11,12,15,0.08) 1px, transparent 1.5px);
background-size: 18px 18px;
opacity: 0.7;
}
.leader__photo-initials {
position: relative;
z-index: 1;
font-family: var(--font-mono);
font-size: 56px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--text-3);
}
.leader__body {
display: flex;
flex-direction: column;
gap: 14px;
}
.leader__role {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--peach-deep);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
}
.leader__role::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.leader__name {
font-size: clamp(34px, 3.6vw, 56px);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.05;
color: var(--text);
margin: 0;
}
.leader__body p {
font-size: clamp(15px, 1.15vw, 17.5px);
line-height: 1.6;
color: var(--text-2);
max-width: 56ch;
margin: 0;
}
.leader__chips {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 0;
padding: 0;
}
.leader__chips li {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 3px;
}
@media (max-width: 900px) {
.leader,
.leader--reverse {
grid-template-columns: 1fr;
gap: 28px;
padding: 48px 0;
text-align: center;
}
.leader--reverse .leader__photo { order: 1; }
.leader--reverse .leader__body { order: 2; }
.leader__photo { max-width: 280px; margin: 0 auto; }
.leader__role { justify-content: center; }
.leader__body { align-items: center; }
.leader__body p { max-width: 42ch; margin: 0 auto; }
.leader__chips { justify-content: center; }
}
/* ============================================================================
PRESS page — about + media kit + contact
========================================================================== */
.press-about {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.press-about__col {
padding: 36px 32px 40px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.press-about__h3 {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--peach-deep);
margin-bottom: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.press-about__h3::before {
content: "";
width: 24px;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.press-about__col p {
font-size: 15.5px;
line-height: 1.65;
color: var(--text-2);
margin: 0;
}
.press-about__col strong { color: var(--text); font-weight: 600; }
.press-stats {
max-width: var(--max);
margin: 64px auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
}
.press-stat {
padding: 32px 24px;
border-right: 1px solid var(--border);
}
.press-stat:last-child { border-right: none; }
.press-stat__num {
font-size: clamp(28px, 3vw, 44px);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text);
margin-bottom: 6px;
}
.press-stat__lbl {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
}
.mediakit-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid rgba(255,255,255,0.10);
border-left: 1px solid rgba(255,255,255,0.10);
}
.mediakit-card {
display: grid;
grid-template-columns: 56px 1fr;
gap: 24px;
padding: 36px 32px;
border-right: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
background: transparent;
color: white;
transition: background 0.25s ease, border-color 0.3s ease;
align-items: start;
}
.mediakit-card:hover {
background: rgba(255,255,255,0.025);
border-color: rgba(244,201,127,0.30);
}
.mediakit-card__icon {
width: 48px; height: 48px;
border: 1px solid rgba(255,255,255,0.22);
border-radius: 6px;
display: grid;
place-items: center;
color: white;
}
.mediakit-card__icon svg { width: 22px; height: 22px; }
.mediakit-card__body {
display: flex;
flex-direction: column;
gap: 10px;
}
.mediakit-card h3 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.025em;
color: white;
margin: 0;
}
.mediakit-card p {
font-size: 14.5px;
line-height: 1.55;
color: rgba(255,255,255,0.62);
margin: 0;
max-width: 38ch;
}
.mediakit-card__cta {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--peach);
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.mediakit-card__arrow {
display: inline-flex;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
border: 1px solid rgba(244,201,127,0.45);
border-radius: 50%;
font-size: 11px;
transition: transform 0.25s ease;
}
.mediakit-card:hover .mediakit-card__arrow { transform: translateY(2px); }
.press-contact {
max-width: 880px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.press-contact__card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 32px 28px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
transition: border-color 0.3s ease, transform 0.3s ease;
}
.press-contact__card:hover {
border-color: var(--peach-deep);
transform: translateY(-3px);
}
.press-contact__lbl {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--peach-deep);
}
.press-contact__email {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.018em;
color: var(--text);
}
.press-contact__hint {
font-size: 13.5px;
color: var(--text-2);
}
@media (max-width: 900px) {
.press-about { grid-template-columns: 1fr; border-left: none; }
.press-about__col { border-right: none; padding: 30px 4px; }
.press-stats { grid-template-columns: 1fr 1fr; }
.press-stat:nth-child(2) { border-right: none; }
.mediakit-grid { grid-template-columns: 1fr; border-left: none; }
.mediakit-card { border-right: none; padding: 28px 4px; }
.press-contact { grid-template-columns: 1fr; }
}
/* ============================================================================
PHASE 18 — Institucional hero with darker custom photo
========================================================================== */
.ph--inst-hero[data-page-bg]::after {
/* Show the buildings but VERY dark — barely visible silhouette */
filter: grayscale(0.20) contrast(1.20) brightness(0.42);
opacity: 0.32;
mix-blend-mode: normal;
}
.ph--inst-hero[data-page-bg]::before {
background:
radial-gradient(ellipse at 50% 0%, rgba(244,201,127,0.05), transparent 55%),
linear-gradient(180deg,
rgba(11,12,15,0.72) 0%,
rgba(11,12,15,0.86) 60%,
rgba(11,12,15,0.96) 100%);
}
/* ============================================================================
PYRAMID COLOR PALETTE — each pillar a distinct accent
========================================================================== */
.pyr-block[data-i="1"] { --p-accent: #F4C97F; --p-bg: rgba(63,46,17,0.95); } /* dorado */
.pyr-block[data-i="2"] { --p-accent: #6FA8FF; --p-bg: rgba(20,32,63,0.95); } /* azul */
.pyr-block[data-i="3"] { --p-accent: #FF8FB3; --p-bg: rgba(63,20,40,0.95); } /* rosa */
.pyr-block[data-i="4"] { --p-accent: #6BD49B; --p-bg: rgba(15,48,32,0.95); } /* verde */
.pyr-block[data-i="5"] { --p-accent: #B58FE0; --p-bg: rgba(36,22,55,0.95); } /* morado */
/* Active block uses its own accent color (replaces the universal gold) */
.pyr[data-i="1"] .pyr-block[data-i="1"],
.pyr[data-i="2"] .pyr-block[data-i="2"],
.pyr[data-i="3"] .pyr-block[data-i="3"],
.pyr[data-i="4"] .pyr-block[data-i="4"],
.pyr[data-i="5"] .pyr-block[data-i="5"] {
background: linear-gradient(180deg, var(--p-bg), rgba(11,12,15,0.95)) !important;
border-color: color-mix(in srgb, var(--p-accent) 60%, transparent) !important;
box-shadow:
0 30px 60px -20px color-mix(in srgb, var(--p-accent) 30%, transparent),
0 0 0 1px color-mix(in srgb, var(--p-accent) 25%, transparent) inset !important;
}
.pyr[data-i="1"] .pyr-block[data-i="1"] .pyr-block__num,
.pyr[data-i="2"] .pyr-block[data-i="2"] .pyr-block__num,
.pyr[data-i="3"] .pyr-block[data-i="3"] .pyr-block__num,
.pyr[data-i="4"] .pyr-block[data-i="4"] .pyr-block__num,
.pyr[data-i="5"] .pyr-block[data-i="5"] .pyr-block__num {
color: var(--p-accent) !important;
}
/* The right-side step caption __num gets the matching accent */
.pyr[data-i="1"] .pyr-step[data-i="1"] .pyr-step__num,
.pyr[data-i="2"] .pyr-step[data-i="2"] .pyr-step__num,
.pyr[data-i="3"] .pyr-step[data-i="3"] .pyr-step__num,
.pyr[data-i="4"] .pyr-step[data-i="4"] .pyr-step__num,
.pyr[data-i="5"] .pyr-step[data-i="5"] .pyr-step__num {
color: var(--p-accent);
}
.pyr[data-i="1"] { --p-current: #F4C97F; }
.pyr[data-i="2"] { --p-current: #6FA8FF; }
.pyr[data-i="3"] { --p-current: #FF8FB3; }
.pyr[data-i="4"] { --p-current: #6BD49B; }
.pyr[data-i="5"] { --p-current: #B58FE0; }
/* ============================================================================
PYRAMID — mobile fix. Replace sticky-stage approach (it was unreliable)
with a simple stacked layout: pyramid on top, all 5 step cards below,
each one in its own bordered card with the matching accent.
========================================================================== */
@media (max-width: 900px) {
.pyr__pin {
height: auto;
min-height: 0;
padding: 70px 22px 80px;
display: block;
}
.pyr__layout {
display: flex;
flex-direction: column;
gap: 40px;
}
/* Always show all blocks at full opacity on mobile (no scroll-driven highlight) */
.pyr__stage {
position: static;
max-width: 360px;
margin: 0 auto;
}
.pyr-block {
opacity: 1;
transform: none;
}
/* On mobile every block keeps its own accent color always-on */
.pyr-block[data-i="1"] {
background: linear-gradient(180deg, var(--p-bg), rgba(11,12,15,0.95));
border-color: color-mix(in srgb, #F4C97F 50%, transparent);
}
.pyr-block[data-i="2"] {
background: linear-gradient(180deg, var(--p-bg), rgba(11,12,15,0.95));
border-color: color-mix(in srgb, #6FA8FF 50%, transparent);
}
.pyr-block[data-i="3"] {
background: linear-gradient(180deg, var(--p-bg), rgba(11,12,15,0.95));
border-color: color-mix(in srgb, #FF8FB3 50%, transparent);
}
.pyr-block[data-i="4"] {
background: linear-gradient(180deg, var(--p-bg), rgba(11,12,15,0.95));
border-color: color-mix(in srgb, #6BD49B 50%, transparent);
}
.pyr-block[data-i="5"] {
background: linear-gradient(180deg, var(--p-bg), rgba(11,12,15,0.95));
border-color: color-mix(in srgb, #B58FE0 50%, transparent);
}
.pyr-block[data-i="1"] .pyr-block__num { color: #F4C97F; }
.pyr-block[data-i="2"] .pyr-block__num { color: #6FA8FF; }
.pyr-block[data-i="3"] .pyr-block__num { color: #FF8FB3; }
.pyr-block[data-i="4"] .pyr-block__num { color: #6BD49B; }
.pyr-block[data-i="5"] .pyr-block__num { color: #B58FE0; }
.pyr-block[data-i="1"] .pyr-block__name,
.pyr-block[data-i="2"] .pyr-block__name,
.pyr-block[data-i="3"] .pyr-block__name,
.pyr-block[data-i="4"] .pyr-block__name,
.pyr-block[data-i="5"] .pyr-block__name { color: white; }
/* Caption stack: skip the intro (data-i=0) on mobile, show all 5 actual
pillars as small cards in a vertical column. */
.pyr__copy {
min-height: 0;
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.pyr-step {
position: relative;
inset: auto;
opacity: 1;
transform: none;
pointer-events: auto;
padding: 24px 22px;
background: rgba(20,22,27,0.6);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 8px;
text-align: left;
align-items: flex-start;
min-height: 0;
gap: 12px;
}
/* Apply accent border per step */
.pyr-step[data-i="1"] { border-left: 3px solid #F4C97F; }
.pyr-step[data-i="2"] { border-left: 3px solid #6FA8FF; }
.pyr-step[data-i="3"] { border-left: 3px solid #FF8FB3; }
.pyr-step[data-i="4"] { border-left: 3px solid #6BD49B; }
.pyr-step[data-i="5"] { border-left: 3px solid #B58FE0; }
.pyr-step[data-i="0"] { display: none; }
.pyr-step__num { justify-content: flex-start; }
.pyr-step[data-i="1"] .pyr-step__num { color: #F4C97F; }
.pyr-step[data-i="2"] .pyr-step__num { color: #6FA8FF; }
.pyr-step[data-i="3"] .pyr-step__num { color: #FF8FB3; }
.pyr-step[data-i="4"] .pyr-step__num { color: #6BD49B; }
.pyr-step[data-i="5"] .pyr-step__num { color: #B58FE0; }
.pyr-step .h2 {
font-size: clamp(20px, 5.5vw, 26px);
margin: 0;
text-align: left;
max-width: none;
}
.pyr-step p {
font-size: 14.5px;
margin: 0;
text-align: left;
max-width: none;
}
}
/* ============================================================================
CATPAGE — asset category pages (inmobiliario / agroexportacion / franquicias)
========================================================================== */
.catpage-photos {
background: var(--ink);
padding: 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
}
.catpage-photos__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.catpage__photo {
aspect-ratio: 4 / 3;
overflow: hidden;
background: #14161B;
}
.catpage__photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.10) contrast(1.04) saturate(1.05);
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
.catpage__photo:hover img {
transform: scale(1.04);
filter: grayscale(0) contrast(1.05) saturate(1.10);
}
/* Example cards grid (3 sample projects) */
.catpage-ex-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 0 40px;
}
.catpage-ex {
position: relative;
background: #14161B;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
overflow: hidden;
isolation: isolate;
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}
.catpage-ex:hover {
transform: translateY(-4px);
border-color: rgba(244,201,127,0.40);
}
.catpage-ex__photo {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center;
filter: grayscale(0.20) contrast(1.05) brightness(0.55) saturate(1.05);
transition: transform 1.2s ease;
}
.catpage-ex:hover .catpage-ex__photo { transform: scale(1.05); }
.catpage-ex__overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(11,12,15,0.20) 0%, rgba(11,12,15,0.65) 50%, rgba(11,12,15,0.95) 100%);
}
.catpage-ex__body {
position: relative; z-index: 2;
padding: 28px 26px;
display: flex; flex-direction: column; gap: 10px;
}
.catpage-ex__tag {
display: inline-flex;
align-self: flex-start;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--peach);
padding: 5px 10px;
border: 1px solid rgba(244,201,127,0.30);
border-radius: 3px;
margin-bottom: 6px;
}
.catpage-ex h3 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: white;
margin: 0;
}
.catpage-ex__loc {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.catpage-ex p {
font-size: 13.5px;
line-height: 1.55;
color: rgba(255,255,255,0.7);
margin: 0;
}
.catpage-ex__yield {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.14);
}
.catpage-ex__yield span {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.catpage-ex__yield strong {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--peach);
}
@media (max-width: 900px) {
/* Hide the 4-thumbnail strip on mobile — the premium hero photo alone is
enough; the cramped 2×2 thumbnails was reading "ugly" on small screens. */
.catpage-photos { display: none; }
.catpage-photos__row { grid-template-columns: repeat(2, 1fr); }
.catpage-ex-grid {
grid-template-columns: 1fr;
padding: 0 20px;
}
.catpage-ex { min-height: 360px; }
.catpage-ex__body { padding: 24px 20px; }
}
/* ============================================================================
HOME — bank comparison, testimonials, spotlight disclaimer, mobile accordion
(added for usuario-común / mobile pass — copy & legal driven)
========================================================================== */
/* Small disclaimer under the dark spotlight grid */
.spotlight__note {
max-width: 760px;
margin: 40px auto 0;
text-align: center;
font-size: 12.5px;
line-height: 1.55;
color: rgba(255,255,255,0.45);
}
/* ---- Bank comparison (own light section + table) ---- */
.bankcompare {
background: var(--bg-warm);
padding: 120px 40px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.bankcompare__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.bankcompare .eyebrow { justify-content: center; margin-bottom: 22px; }
.bankcompare .h2 { margin: 0 auto 20px; }
.bankcompare .lede { margin: 0 auto 44px; }
.bankcompare__table {
border: 1px solid var(--border-strong);
border-radius: 14px;
overflow: hidden;
background: var(--paper);
text-align: left;
}
.bankcompare__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 18px 26px;
border-bottom: 1px solid var(--border);
font-size: 16px;
color: var(--text-2);
}
.bankcompare__row:last-child { border-bottom: none; }
.bankcompare__row span small {
display: block;
font-size: 12.5px;
color: var(--text-3);
font-weight: 400;
margin-top: 2px;
}
.bankcompare__row--head {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
background: var(--bg);
}
.bankcompare__rate { font-weight: 600; color: var(--text); white-space: nowrap; text-align: right; }
.bankcompare__row--ref { background: var(--bg); }
.bankcompare__row--ref,
.bankcompare__row--ref .bankcompare__rate { color: var(--text-3); font-weight: 500; }
.bankcompare__row--real {
background: var(--ink);
color: #fff;
padding-top: 22px;
padding-bottom: 22px;
}
.bankcompare__row--real span small { color: rgba(255,255,255,0.55); }
.bankcompare__rate--accent { color: var(--peach) !important; font-size: 18px; font-weight: 700; }
.bankcompare__note {
max-width: 720px;
margin: 26px auto 0;
font-size: 12.5px;
line-height: 1.55;
color: var(--text-3);
text-align: center;
}
/* ---- Testimonials (light section, 3 placeholder cards) ---- */
.testimonials {
background: var(--bg);
padding: 120px 40px;
border-top: 1px solid var(--border);
}
.testimonials__head { max-width: var(--max); margin: 0 auto 56px; text-align: center; }
.testimonials__head .eyebrow { justify-content: center; margin-bottom: 20px; }
.testimonials__head .h2 { margin: 0 auto; }
.testimonials__grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.testi-card {
margin: 0;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 22px;
}
.testi-card__quote {
margin: 0;
font-size: 17px;
line-height: 1.6;
color: var(--text);
letter-spacing: -0.01em;
}
.testi-card__quote::before { content: "\201C"; color: var(--peach-deep); font-weight: 700; }
.testi-card__by {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
margin-top: auto;
}
.testi-card__by span { color: var(--text-3); }
.testimonials__note {
max-width: 640px;
margin: 40px auto 0;
text-align: center;
font-size: 12.5px;
line-height: 1.55;
color: var(--text-3);
}
/* ---- Spotlight chevron (hidden on desktop, shown in mobile accordion) ---- */
.spot-card__chev { display: none; }
@media (max-width: 768px) {
.bankcompare { padding: 64px 18px; }
.bankcompare .lede { margin-bottom: 28px; }
.bankcompare__row { padding: 14px 16px; font-size: 14px; gap: 12px; }
.bankcompare__row span small { font-size: 11.5px; }
.bankcompare__rate { font-size: 14px; }
.bankcompare__rate--accent { font-size: 15px; }
.testimonials { padding: 64px 18px; }
.testimonials__head { margin-bottom: 36px; }
.testimonials__grid { grid-template-columns: 1fr; gap: 14px; }
.testi-card { padding: 24px 22px; gap: 16px; }
.testi-card__quote { font-size: 15.5px; }
/* ---- Mobile accordion for the 5 asset categories (home only) ---- */
.spotlight__grid--5.is-accordion {
display: flex !important;
flex-direction: column;
gap: 8px !important;
min-height: 0 !important;
}
.spotlight__grid--5.is-accordion .spot-card,
.spotlight__grid--5.is-accordion .spot-card--lg {
min-height: 0 !important;
border-radius: 10px;
cursor: pointer;
}
.spotlight__grid--5.is-accordion .spot-card__overlay {
background: linear-gradient(90deg, rgba(11,12,15,0.62), rgba(11,12,15,0.82));
}
.spotlight__grid--5.is-accordion .spot-card--lg::before { display: none; }
/* Collapsed summary row: category name + chevron */
.spotlight__grid--5.is-accordion .spot-card__body {
flex-direction: row;
align-items: center;
padding: 15px 44px 15px 18px !important;
gap: 10px;
min-height: 0;
}
.spotlight__grid--5.is-accordion .spot-card__tag {
margin: 0;
border: none;
padding: 0;
background: none;
color: #fff;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.01em;
text-transform: none;
}
.spotlight__grid--5.is-accordion .spot-card h3,
.spotlight__grid--5.is-accordion .spot-card p,
.spotlight__grid--5.is-accordion .spot-card__yield,
.spotlight__grid--5.is-accordion .spot-card__more { display: none; }
.spotlight__grid--5.is-accordion .spot-card__chev {
display: flex;
position: absolute;
top: 15px;
right: 14px;
align-items: center;
height: 20px;
color: rgba(255,255,255,0.65);
transition: transform 0.3s ease;
z-index: 3;
pointer-events: none;
}
/* Open state */
.spotlight__grid--5.is-accordion .spot-card.is-open .spot-card__body {
flex-direction: column;
align-items: flex-start;
padding: 18px 18px 22px !important;
gap: 12px;
}
.spotlight__grid--5.is-accordion .spot-card.is-open h3 { display: block; font-size: 22px !important; margin: 0; }
.spotlight__grid--5.is-accordion .spot-card.is-open p { display: block; font-size: 13.5px; color: rgba(255,255,255,0.75); max-width: none; }
.spotlight__grid--5.is-accordion .spot-card.is-open .spot-card__yield { display: flex; width: 100%; margin-top: 2px; padding-top: 14px; }
.spotlight__grid--5.is-accordion .spot-card.is-open .spot-card__more { display: inline-flex; }
.spotlight__grid--5.is-accordion .spot-card.is-open .spot-card__chev { transform: rotate(180deg); }
}