@charset "UTF-8";

/* ===================================================================
 *
 *  PagaMe — stylesheet
 *
 *  No framework and no vendor CSS. The icons are inline SVG in the markup,
 *  so the page carries no icon font at all.
 *
 *  TOC:
 *  # tokens
 *  # reset and base
 *  # typography
 *  # layout primitives
 *  # buttons
 *  # reveal on scroll
 *  # header
 *  # hero
 *  # hero illustration
 *  # about
 *  # how it works (stats + steps)
 *  # features
 *  # pricing
 *  # download
 *  # footer
 *  # back to top
 *  # legal page
 *  # 404
 *
 *  Every colour, size and spacing step is a custom property in # tokens,
 *  so changing the palette means editing :root and nothing else.
 *
 * ------------------------------------------------------------------- */


/* ===================================================================
 * # tokens
 * ------------------------------------------------------------------- */

:root {
    /* Brand -- from the app's lib/theme/colors.dart. The accent there is
       marked PROVISIONAL (plan §12.1); when the app settles it, these three
       and the rgba() tints below that repeat it are the whole change. */
    --c-primary:        #6C5CE7;    /* accentPrimary; 4.9:1 under white text */
    --c-primary-hover:  #5A4BD1;
    --c-primary-deep:   #463AAE;
    /* the primary fails contrast on dark grounds (3.9:1); this is its
       stand-in there -- accentPrimaryLight, 7.8:1 on --c-dark */
    --c-accent:         #A29BFE;

    /* Balance semantics, the app's own: green = they owe you, coral = you
       owe. Used only in the hero illustration, always next to its words. */
    --c-owed:           #2ECC71;
    --c-owe:            #FF6B5E;

    /* neutrals -- the dark ones are the app's surfaces (bgPrimary, bgCard,
       bgCardAlt, divider), so the hero and the footer look like the product */
    --c-ink:            #111318;
    --c-body:           #3d434d;
    --c-muted:          #5f6672;
    --c-line:           #e4e4ee;
    --c-surface:        #ffffff;
    --c-surface-tint:   #f6f5fb;
    --c-dark:           #0F1115;
    --c-dark-soft:      #1A1D23;
    --c-dark-alt:       #23262D;
    --c-dark-line:      #2A2E36;
    --c-on-dark:        #ffffff;
    --c-on-dark-muted:  rgba(205, 209, 215, .78);

    /* type -- Montserrat is the app's typeface (bundled in its assets/fonts),
       so headings and chrome speak with the product's voice. Body copy is
       Nunito Sans, the same pairing as the aBolsillo landing. */
    --f-sans:  "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --f-head:  "Montserrat", var(--f-sans);

    /* A fluid scale: no step needs its own media query. */
    --t-xs:    0.875rem;                                        /* 14 */
    --t-sm:    1rem;                                            /* 16 */
    --t-base:  clamp(1.0625rem, 1rem    + 0.30vw, 1.125rem);    /* 17 -> 18 */
    --t-lg:    clamp(1.25rem,   1.10rem + 0.60vw, 1.5rem);      /* 20 -> 24 */
    --t-xl:    clamp(1.375rem,  1.15rem + 0.90vw, 1.75rem);     /* 22 -> 28 */
    --t-2xl:   clamp(1.75rem,   1.40rem + 1.40vw, 2.5rem);      /* 28 -> 40 */
    --t-3xl:   clamp(2.125rem,  1.50rem + 2.60vw, 3.4rem);      /* 34 -> 55 */
    --t-4xl:   clamp(2.25rem,   1.50rem + 3.60vw, 4rem);        /* 36 -> 64 */

    /* spacing, on a 4px rhythm */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.5rem;
    --s-6:  2rem;
    --s-7:  2.5rem;
    --s-8:  3rem;
    --s-9:  4rem;
    --s-10: 5rem;
    --s-11: 6rem;
    --s-12: 8rem;

    /* Section rhythm. Where two sections meet, the lower one takes 55% of it,
       because otherwise the two pads stack into half a screen of nothing. */
    --s-section: clamp(4.5rem, 2rem + 7.5vw, 9.5rem);

    /* The app's radii are 16 for cards and 12 for buttons; the site keeps
       pill buttons, as the aBolsillo landing does. */
    --radius:      16px;
    --radius-sm:   12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(17, 19, 24, .05);
    --shadow-md: 0 6px 24px -8px rgba(17, 19, 24, .16);
    --shadow-lg: 0 18px 48px -18px rgba(17, 19, 24, .34);

    --wrap:      1240px;
    --wrap-hero: 1340px;
    --wrap-text: 780px;

    --header-h: 92px;

    --ease: cubic-bezier(.2, .7, .3, 1);

    /* No photograph behind the cover or the stats: there is none yet that is
       ours. Light from the accent over the app's background stands in. */
    --hero-glow:
        radial-gradient(70% 60% at 82% 18%, rgba(108, 92, 231, .34) 0%, transparent 62%),
        radial-gradient(60% 55% at 6% 96%, rgba(46, 204, 113, .10) 0%, transparent 60%),
        radial-gradient(45% 40% at 96% 92%, rgba(255, 107, 94, .08) 0%, transparent 60%);

    --stats-glow:
        radial-gradient(80% 120% at 0% 0%, rgba(108, 92, 231, .40) 0%, transparent 60%),
        radial-gradient(70% 120% at 100% 100%, rgba(162, 155, 254, .18) 0%, transparent 60%);
}


/* ===================================================================
 * # reset and base
 * ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Every in-page anchor clears the fixed header without JS. */
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background-color: var(--c-surface);
    color: var(--c-body);
    font-family: var(--f-sans);
    font-size: var(--t-base);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--c-primary); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--c-primary-hover); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.u-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ===================================================================
 * # typography
 * ------------------------------------------------------------------- */

h1, h2, h3, h4 {
    margin: 0 0 var(--s-4);
    font-family: var(--f-head);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--c-ink);
}

h3, h4 { font-weight: 700; }

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); text-wrap: balance; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--c-ink); }

/* the section intro: a heading with a lead paragraph under it */
.section-head {
    max-width: var(--wrap-text);
    margin: 0 auto var(--s-10);
    text-align: center;
}

.section-head--spaced { margin-top: var(--s-11); }

.section-head .lead {
    font-size: var(--t-lg);
    color: var(--c-muted);
    margin-bottom: 0;
}

/* the short accent rule that opens a section */
.section-head::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 0 auto var(--s-6);
    background-color: var(--c-primary);
    border-radius: var(--radius-pill);
}


/* ===================================================================
 * # layout primitives
 * ------------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

/* 16px gutters on a phone, so a 360px screen keeps 328px of text. */
@media (max-width: 520px) {
    .wrap { padding-inline: var(--s-4); }
}

.section { padding-block: var(--s-section); }

.s-hero + .section,
.section + .section { padding-top: calc(var(--s-section) * .55); }

.grid { display: grid; gap: var(--s-5); }

@media (min-width: 700px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 940px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 700px) and (max-width: 939px) {
    .grid--3,
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}


/* ===================================================================
 * # buttons
 * ------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-6);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background-color: transparent;
    font-family: var(--f-head);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s var(--ease),
                border-color .18s var(--ease),
                color .18s var(--ease),
                transform .18s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
    background-color: var(--c-primary);
    color: #fff;
}

.btn--primary:hover {
    background-color: var(--c-primary-hover);
    color: #fff;
}

.btn--lg { padding: var(--s-4) var(--s-7); font-size: var(--t-base); }

.btn--block { display: flex; width: 100%; }


/* ===================================================================
 * # reveal on scroll
 *
 * The class is added by js/app.js through an IntersectionObserver. With JS
 * off, or with reduced motion asked for, everything is simply visible.
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .5s var(--ease), transform .5s var(--ease);
    }

    .js .reveal.is-in {
        opacity: 1;
        transform: none;
    }
}


/* ===================================================================
 * # header
 * ------------------------------------------------------------------- */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}

/* Transparent over the dark hero, solid once it leaves it. The wordmark is
   light, so the header can never sit transparent over a white page -- which
   is why the inner pages force the solid state. */
.site-header.is-stuck,
.page-inner .site-header {
    background-color: var(--c-dark);
    box-shadow: var(--shadow-md);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

/* There is no logo artwork in the app yet (it still ships Flutter's default
   launcher icon), so the mark is inline SVG and the wordmark is live text in
   Montserrat, the one face this page always loads. When the app gets a logo,
   both are replaced by a copy of it. */
.site-logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--c-on-dark);
}

.site-logo:hover { color: var(--c-on-dark); }

.site-logo__mark { width: 34px; height: 34px; }

.site-logo__word {
    font-family: var(--f-head);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.site-logo__word span { color: var(--c-accent); }

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

.site-nav__list a {
    font-family: var(--f-head);
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--c-on-dark-muted);
    white-space: nowrap;
}

.site-nav__list a:hover,
.site-nav__list .is-current a {
    color: var(--c-on-dark);
}

.site-nav__cta .btn { padding-inline: var(--s-5); }

.nav-toggle {
    display: none;
    margin-left: auto;
    padding: var(--s-2);
    border: 0;
    background: none;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--c-on-dark);
    transition: transform .22s var(--ease), opacity .22s var(--ease);
}

.nav-toggle__bars { position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* Below 900px the logo, the nav items and the CTA stop fitting on one line,
   and the CTA is the piece a visitor needs most -- so the whole nav moves
   into the drop-down rather than the button being dropped from the row. */
@media (max-width: 900px) {
    .nav-toggle { display: block; }

    /* Hidden by opacity, offset and visibility rather than `display: none`,
       so it can animate; `visibility` keeps it out of the tab order. */
    .site-nav {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        display: block;
        gap: 0;
        padding: var(--s-5);
        background-color: var(--c-dark);
        box-shadow: var(--shadow-lg);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .22s var(--ease),
                    transform .22s var(--ease),
                    visibility .22s;
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav__list a {
        display: block;
        padding: var(--s-3) var(--s-2);
        font-size: var(--t-base);
        border-bottom: 1px solid var(--c-dark-line);
    }

    .site-nav__cta {
        margin-top: var(--s-4);
    }

    .site-nav__cta .btn { display: flex; width: 100%; }
}


/* ===================================================================
 * # hero
 * ------------------------------------------------------------------- */

.s-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + var(--s-9)) var(--s-9);
    background-color: var(--c-dark);
    background-image: var(--hero-glow);
    color: var(--c-on-dark-muted);
    overflow: hidden;
}

.s-hero__inner {
    display: grid;
    gap: var(--s-9);
    align-items: center;
    max-width: var(--wrap-hero);
}

/* Two columns only once the headline has room to keep its two lines. */
@media (min-width: 1080px) {
    .s-hero__inner {
        grid-template-columns: minmax(560px, 1fr) minmax(320px, 440px);
        gap: var(--s-10);
    }
}

/* The app is not on the store yet, and the page says so before the slogan
   rather than after it. */
.s-hero__beta {
    display: inline-block;
    margin-bottom: var(--s-4);
    padding: var(--s-1) var(--s-3);
    border: 1px solid rgba(162, 155, 254, .45);
    border-radius: var(--radius-pill);
    font-family: var(--f-head);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-accent);
    background-color: rgba(162, 155, 254, .10);
}

.s-hero h1 {
    color: var(--c-on-dark);
    margin-bottom: var(--s-5);
    text-wrap: balance;
}

.s-hero__lead {
    max-width: 52ch;
    font-size: var(--t-lg);
    color: var(--c-on-dark-muted);
    margin-bottom: var(--s-7);
}

.s-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: var(--s-5);
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--f-head);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-on-dark-muted);
}

.s-hero__scroll:hover { color: var(--c-accent); }

/* A slow 4px drift on the arrow only: the parent carries translateX(-50%)
   for its centring, and animating its transform would undo that. The
   keyframe starts and ends at 0, so the reduced-motion collapse in # reset
   lands on neutral. */
@keyframes hero-scroll-hint {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

.s-hero__scroll svg {
    animation: hero-scroll-hint 2.4s ease-in-out infinite;
}

@media (min-width: 1080px) and (min-height: 760px) {
    .s-hero__scroll { display: flex; }
}


/* ===================================================================
 * # hero illustration
 *
 * A group screen drawn in markup, in the app's own surfaces and balance
 * colours. It is an illustration, not a screenshot: there are no store
 * screenshots yet. The figures add up -- four people, three expenses split
 * equally, and the balance is the sum of the three deltas -- because a
 * visitor who checks the arithmetic of a money app will find a wrong sum.
 * ------------------------------------------------------------------- */

.mock {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding: var(--s-5);
    border: 1px solid var(--c-dark-line);
    border-radius: 28px;
    background-color: var(--c-dark-soft);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7),
                0 0 0 8px rgba(255, 255, 255, .03);
    font-family: var(--f-head);
    color: var(--c-on-dark);
    line-height: 1.3;
}

.mock__head {
    display: grid;
    gap: 2px;
    margin-bottom: var(--s-5);
}

.mock__group { font-size: 1.125rem; font-weight: 700; }

.mock__people { font-size: .8125rem; color: var(--c-on-dark-muted); }

.mock__balance {
    display: grid;
    gap: var(--s-1);
    margin-bottom: var(--s-5);
    padding: var(--s-5);
    border-radius: var(--radius);
    background-color: var(--c-dark-alt);
}

.mock__label {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-on-dark-muted);
}

.mock__amount {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mock .is-owed { color: var(--c-owed); }
.mock .is-owe  { color: var(--c-owe); }

.mock__list { display: grid; }

.mock__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding-block: var(--s-3);
    border-top: 1px solid var(--c-dark-line);
}

.mock__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
}

.mock__icon svg { width: 20px; height: 20px; }

.mock__icon--food { background-color: rgba(255, 107, 94, .14); color: #FF8A7F; }
.mock__icon--car  { background-color: rgba(162, 155, 254, .14); color: var(--c-accent); }
.mock__icon--cart { background-color: rgba(46, 204, 113, .14); color: var(--c-owed); }

.mock__what {
    display: grid;
    min-width: 0;
    font-size: .9375rem;
    font-weight: 600;
}

.mock__what small {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--c-on-dark-muted);
}

.mock__delta {
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.mock__settle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
    border-radius: var(--radius-pill);
    background-color: var(--c-primary);
    font-weight: 700;
}

.mock__chip {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, .16);
    font-size: .8125rem;
    font-weight: 600;
}

/* On a narrow phone the three-column row runs out of room before the copy
   does; the amount drops under the description instead of shrinking. */
@media (max-width: 380px) {
    .mock { padding: var(--s-4); }
    .mock__row { grid-template-columns: auto 1fr; }
    .mock__delta { grid-column: 2; }
}


/* ===================================================================
 * # about
 * ------------------------------------------------------------------- */

/* Four cards in a grid. Below 700px the grid becomes a swipeable row using
   scroll-snap, the one width where paging genuinely helps. */
@media (min-width: 700px) {
    .about-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
    .about-cards { grid-template-columns: repeat(4, 1fr); }
}

/* A column flexbox, not a centred grid: the head and the paragraph stack
   from the top, and extra height from a taller sibling falls below the text. */
.about-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--s-7);
    background-color: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.about-card__head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.about-card__icon { flex: none; }

.about-card h3 {
    font-size: var(--t-lg);
    color: var(--c-primary-hover);
    margin-bottom: 0;
}

.about-card p { margin-bottom: 0; font-size: var(--t-base); }

@media (max-width: 699px) {
    .about-cards {
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--s-3);
        margin-inline: calc(var(--s-4) * -1);
        padding-inline: var(--s-4);
        scroll-padding-inline: var(--s-4);
        scrollbar-width: thin;
    }

    .about-card { scroll-snap-align: start; padding: var(--s-6); }
}


/* ===================================================================
 * # how it works (stats + steps)
 * ------------------------------------------------------------------- */

.s-how { background-color: var(--c-surface-tint); }

.stats-band {
    position: relative;
    display: grid;
    gap: var(--s-8);
    padding: var(--s-11) var(--s-7);
    border-radius: var(--radius);
    background-color: var(--c-dark);
    background-image: var(--stats-glow);
    text-align: center;
    overflow: hidden;
}

@media (min-width: 700px) {
    .stats-band { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .stats-band { padding: var(--s-9) var(--s-5); }
}

.stat__num {
    display: block;
    font-family: var(--f-head);
    font-size: var(--t-4xl);
    font-weight: 900;
    line-height: 1;
    color: var(--c-accent);
}

.stat__label {
    display: block;
    max-width: 30ch;
    margin: var(--s-3) auto 0;
    font-size: var(--t-sm);
    color: var(--c-on-dark-muted);
}

/* Two columns, not four: each step is a sentence, not a label. The number is
   a solid disc in the brand colour, to the left of the text. */
.steps {
    counter-reset: step;
    display: grid;
    gap: var(--s-9) var(--s-8);
    max-width: 1080px;
    margin: var(--s-10) auto 0;
}

@media (min-width: 780px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
}

.step {
    counter-increment: step;
    position: relative;
    padding-left: 84px;
    list-style: none;
}

.step::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -2px;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--c-primary);
    color: #fff;
    font-family: var(--f-head);
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1;
}

.step h3 {
    font-size: var(--t-lg);
    margin-bottom: var(--s-3);
}

.step p { font-size: var(--t-base); margin-bottom: 0; }

@media (max-width: 520px) {
    .step { padding-left: 64px; }
    .step::before { width: 46px; height: 46px; font-size: var(--t-base); }
}


/* ===================================================================
 * # features
 * ------------------------------------------------------------------- */

.feature {
    padding: var(--s-7);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background-color: var(--c-surface);
    transition: border-color .2s var(--ease),
                box-shadow .2s var(--ease),
                transform .2s var(--ease);
}

.feature:hover {
    border-color: rgba(108, 92, 231, .35);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

@media (max-width: 520px) {
    .feature { padding: var(--s-6); }
}

/* A final card left alone on its row reads as an accident. When the count
   leaves a remainder of one, the last card spans the row instead. */
@media (min-width: 940px) {
    .grid--3 > .feature:last-child:nth-child(3n + 1) {
        grid-column: 1 / -1;
    }

    .grid--3 > .feature:last-child:nth-child(3n + 1) p {
        max-width: 62ch;
    }
}

/* One icon treatment for both card families. */
.feature__icon,
.about-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    background-color: rgba(108, 92, 231, .10);
    color: var(--c-primary-hover);
}

.feature__icon { margin-bottom: var(--s-4); }

.feature__icon svg,
.about-card__icon svg { width: 24px; height: 24px; }

.feature h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }

.feature p { font-size: var(--t-base); margin-bottom: 0; }


/* ===================================================================
 * # pricing
 * ------------------------------------------------------------------- */

/* One plan, because there is one: the app has no Premium and no price
   (plan §7). A second card saying "coming soon" would announce a product
   nobody has decided to build. */
.plans {
    max-width: 460px;
    margin-inline: auto;
}

.plan {
    display: flex;
    flex-direction: column;
    padding: var(--s-7) var(--s-6);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background-color: var(--c-surface);
}

.plan--featured {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: var(--shadow-md);
    color: rgba(255, 255, 255, .9);
}

.plan--featured .plan__name { color: rgba(255, 255, 255, .78); }
.plan--featured .plan__price { color: #ffffff; }
.plan--featured .plan__per { color: rgba(255, 255, 255, .78); }
.plan--featured .plan__features svg { color: #ffffff; }

.plan--featured .btn--primary {
    background-color: #ffffff;
    color: var(--c-primary-deep);
}

.plan--featured .btn--primary:hover {
    background-color: var(--c-primary-deep);
    color: #ffffff;
}

.plan__name {
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: var(--s-3);
}

.plan__price {
    font-family: var(--f-head);
    font-size: var(--t-3xl);
    font-weight: 900;
    line-height: 1;
    color: var(--c-ink);
    margin-bottom: var(--s-1);
}

.plan__per {
    font-size: var(--t-sm);
    color: var(--c-muted);
    margin-bottom: var(--s-6);
}

.plan__features {
    display: grid;
    gap: var(--s-3);
    margin-bottom: var(--s-7);
    font-size: var(--t-base);
}

.plan__features li {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
}

.plan__features svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 5px;
    color: var(--c-primary);
}

.plan .btn { margin-top: auto; }


/* ===================================================================
 * # download
 * ------------------------------------------------------------------- */

.s-download { background-color: var(--c-surface-tint); }

.download-cta { text-align: center; }

.badge-play {
    display: inline-block;
    line-height: 0;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.badge-play:hover { transform: translateY(-2px); }

.badge-play img { width: 200px; height: auto; }

/* Not a link until the listing exists. Dimmed rather than hidden, so the
   section still says where the app will be. When the beta is published this
   becomes `<a class="badge-play" href="...">` and the rule stops matching. */
.badge-play.is-soon { opacity: .55; cursor: default; }
.badge-play.is-soon:hover { transform: none; }

.download-note {
    max-width: 50ch;
    margin: var(--s-5) auto 0;
    font-size: var(--t-sm);
    color: var(--c-muted);
}


/* ===================================================================
 * # footer
 * ------------------------------------------------------------------- */

.site-footer {
    padding-block: var(--s-10) var(--s-6);
    background-color: var(--c-dark);
    color: var(--c-on-dark-muted);
    font-size: var(--t-base);
}

.site-footer h4 {
    font-size: var(--t-sm);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-on-dark);
    margin-bottom: var(--s-4);
}

.site-footer a { color: var(--c-on-dark-muted); }
.site-footer a:hover { color: var(--c-accent); }

.footer-grid {
    display: grid;
    gap: var(--s-8);
}

@media (min-width: 700px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer-links { display: grid; gap: var(--s-2); }

.footer-bottom {
    margin-top: var(--s-9);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-dark-line);
    font-size: var(--t-xs);
    color: var(--c-on-dark-muted);
}


/* ===================================================================
 * # back to top
 *
 * Qualified with `.site-footer a` on purpose: the anchor lives in the
 * footer, where `.site-footer a` (0,1,1) would otherwise win over a bare
 * `.to-top` and paint the arrow muted. That bug shipped on aBolsillo.
 * ------------------------------------------------------------------- */

.site-footer a.to-top {
    position: fixed;
    right: var(--s-5);
    bottom: var(--s-5);
    z-index: 40;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background-color: var(--c-primary);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}

.site-footer a.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.site-footer a.to-top:hover { background-color: var(--c-primary-hover); color: #fff; }
.site-footer a.to-top svg { width: 18px; height: 18px; }


/* ===================================================================
 * # legal page
 * ------------------------------------------------------------------- */

/* The inner pages have no hero, so their first section clears the fixed
   header on its own. */
.page-inner .section:first-of-type { padding-top: calc(var(--header-h) + var(--s-9)); }

.legal-updated {
    margin-top: var(--s-4);
    font-size: var(--t-sm);
    color: var(--c-muted);
}

.legal-toc {
    max-width: 860px;
    margin: 0 auto var(--s-9);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--c-line);
}

.legal-toc ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
}

.legal-toc a {
    display: inline-block;
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    font-size: var(--t-sm);
    color: var(--c-body);
}

.legal-toc a:hover { border-color: var(--c-primary); color: var(--c-primary); }

.legal-doc {
    max-width: 800px;
    margin: 0 auto var(--s-11);
    scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

.legal-doc:last-child { margin-bottom: 0; }

.legal-doc__title {
    font-size: var(--t-2xl);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
    border-bottom: 2px solid var(--c-primary);
}

.legal-lead {
    font-size: var(--t-lg);
    color: var(--c-muted);
    margin-bottom: var(--s-7);
}

.legal-doc h3 {
    margin-top: var(--s-8);
    margin-bottom: var(--s-3);
    font-size: var(--t-lg);
}

.legal-doc h4 {
    margin-top: var(--s-5);
    margin-bottom: var(--s-2);
    font-size: var(--t-base);
    color: var(--c-primary-hover);
}

.legal-doc p,
.legal-doc ul { margin-bottom: var(--s-4); }

.legal-doc ul { padding-left: var(--s-5); }

.legal-doc li {
    list-style: disc;
    margin-bottom: var(--s-2);
}

/* Long addresses (the support mail) must wrap on a phone, not push the page
   sideways. */
.legal-doc a { overflow-wrap: anywhere; }

/* Who the responsable del tratamiento is (Ley 1581 de 2012). It sits before
   clause 1 and is deliberately unnumbered, so clause numbers never shift. */
.legal-responsible {
    margin-bottom: var(--s-7);
    padding: var(--s-5) var(--s-6);
    border-left: 3px solid var(--c-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: var(--c-surface-tint);
}

.legal-responsible__label {
    margin-bottom: var(--s-1);
    font-family: var(--f-head);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-primary-hover);
}

.legal-responsible__name {
    margin-bottom: var(--s-3);
    font-family: var(--f-head);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--c-ink);
}

.legal-doc .legal-responsible__data {
    margin-bottom: var(--s-3);
    padding-left: 0;
}

.legal-doc .legal-responsible__data li { list-style: none; }

.legal-doc .legal-responsible__note {
    margin-bottom: 0;
    font-size: var(--t-sm);
    color: var(--c-muted);
}

@media (max-width: 520px) {
    .legal-responsible { padding: var(--s-4) var(--s-5); }
}


/* ===================================================================
 * # 404
 * ------------------------------------------------------------------- */

.s-404 {
    display: grid;
    place-items: center;
    min-height: 70svh;
    text-align: center;
}

.s-404 p { max-width: 46ch; margin-inline: auto; color: var(--c-muted); }

.s-404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-6);
}

.s-404__links a {
    display: inline-block;
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    font-size: var(--t-sm);
    color: var(--c-body);
}

.s-404__links a:hover { border-color: var(--c-primary); color: var(--c-primary); }