/* FirmaCR
   ────────────────────────────────────────────────────────────────────────────
   Restrained: a white ground, near-black ink, and one blue — the app's own icon
   blue — reserved for things you can act on. Nothing is coloured for decoration.
   The document the app produces carries the visual weight, so the page can stay
   quiet and let it be the proof. */

:root {
    /* Neutrals sit at almost zero chroma, leaning very slightly to the accent's
       hue rather than warm-by-default. */
    --page: oklch(99.2% 0.0012 264);
    --panel: oklch(97.2% 0.0028 264);
    --ink: oklch(19% 0.014 264);
    --ink-soft: oklch(43% 0.014 264);
    --ink-faint: oklch(54% 0.012 264);   /* 4.9:1 on --page, measured */
    --line: oklch(91.5% 0.004 264);
    --line-soft: oklch(94.5% 0.003 264);

    --accent: oklch(48% 0.17 264);
    --accent-deep: oklch(40% 0.16 264);
    --accent-wash: oklch(96% 0.02 264);

    --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
    --body: Archivo, "Helvetica Neue", Helvetica, sans-serif;

    --pad: clamp(1.25rem, 4.5vw, 4rem);
    --stack: clamp(4.5rem, 9vw, 8.5rem);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --z-header: 100;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.028em;
    margin: 0;
    text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: 68rem; margin: 0 auto; padding-inline: var(--pad); }
.narrow { max-width: 46rem; margin-inline: auto; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.masthead {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: oklch(99.2% 0.0012 264 / 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line-soft);
}
.masthead .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.85rem;
}
.mark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.mark img { width: 24px; height: 24px; border-radius: 6px; }

.masthead nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 1.9rem); }
.masthead nav a {
    font-size: 0.875rem;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 180ms var(--ease);
}
.masthead nav a:hover { color: var(--ink); }
@media (max-width: 36rem) { .masthead nav a:not(.button-sm) { display: none; } }

.button-sm {
    background: var(--accent);
    color: #fff !important;
    padding: 0.45rem 0.9rem;
    border-radius: 7px;
    font-weight: 500;
}
.button-sm:hover { background: var(--accent-deep); }

/* ── Portada ────────────────────────────────────────────────────────────── */

.hero {
    padding-block: clamp(3.5rem, 9vw, 7rem) 0;
    text-align: center;
}
.hero h1 {
    font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.5rem);
    max-width: 17ch;
    margin-inline: auto;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede {
    margin: clamp(1.25rem, 2.4vw, 1.75rem) auto 0;
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 52ch;
}

.get {
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}
.button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.85rem 1.5rem;
    border-radius: 9px;
    transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.button:hover { background: var(--accent-deep); transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button svg { width: 16px; height: 16px; }
.get small { font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.5; }

/* The document is the proof; it sits under the copy and is cropped by the
   section end, so the page continues into it rather than framing it. */
.sheet {
    margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
    max-width: 50rem;
    max-height: clamp(17rem, 40vw, 28rem);
    overflow: hidden;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 24px 60px -32px oklch(19% 0.02 264 / 0.4);
}
.sheet img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ── Franja de datos ────────────────────────────────────────────────────── */

.facts {
    border-block: 1px solid var(--line-soft);
    background: var(--panel);
}
.facts .wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(1.5rem, 3vw, 2rem);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
.facts b { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 52rem) { .facts .wrap { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; } }

/* ── Secciones ──────────────────────────────────────────────────────────── */

section.band { padding-block: var(--stack); }
section.band h2 {
    font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem);
    max-width: 20ch;
    margin-bottom: 1rem;
}
section.band .intro {
    font-size: clamp(1rem, 0.98rem + 0.25vw, 1.125rem);
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0;
}

.steps {
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    display: grid;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.step { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.step .n {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent);
    margin-bottom: 0.6rem;
}
.step h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.45rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }

.showcase {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}
.showcase h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); margin-bottom: 0.7rem; }
.showcase p { color: var(--ink-soft); margin: 0 0 0.75rem; font-size: 0.9375rem; }
.showcase p:last-child { margin-bottom: 0; }
.showcase figure { margin: 0; }
.showcase img {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}
.showcase figcaption { margin-top: 0.65rem; font-size: 0.8125rem; color: var(--ink-faint); }
@media (max-width: 58rem) { .showcase { grid-template-columns: minmax(0, 1fr); } }

/* ── Especificaciones ───────────────────────────────────────────────────── */

.specs dl {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: 0;
    border-top: 1px solid var(--line);
}
@media (max-width: 46rem) { .specs dl { grid-template-columns: minmax(0, 1fr); } }
.specs div {
    padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
    border-bottom: 1px solid var(--line);
}
.specs dt { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.3rem; }
.specs dd { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }
.specs a { color: var(--accent); text-underline-offset: 2px; }

/* ── Cierre ─────────────────────────────────────────────────────────────── */

.close {
    background: var(--accent-wash);
    border-top: 1px solid var(--line-soft);
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
    text-align: center;
}
.close h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); max-width: 18ch; margin: 0 auto 1rem; }
.close p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto 2rem; }

footer {
    border-top: 1px solid var(--line-soft);
    padding-block: clamp(2rem, 4vw, 2.75rem);
    font-size: 0.8125rem;
    color: var(--ink-faint);
}
footer .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
footer p { margin: 0; max-width: 48ch; line-height: 1.55; }
footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
footer a { color: var(--ink-soft); }
footer a:hover { color: var(--ink); }

/* ── Movimiento ─────────────────────────────────────────────────────────── */

/* One arrival on the fold that carries the message. The element is rendered
   first and then moved, so a headless render or a background tab never ships
   the hero blank. */
@keyframes rise {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: none; }
}
.hero h1, .hero .lede, .hero .get, .sheet { animation: rise 650ms var(--ease) both; }
.hero .lede { animation-delay: 70ms; }
.hero .get { animation-delay: 140ms; }
.sheet { animation-delay: 200ms; animation-duration: 800ms; }

@media (prefers-reduced-motion: reduce) {
    .hero h1, .hero .lede, .hero .get, .sheet { animation: none; }
    .button:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .masthead { background: var(--page); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    :root { --ink-soft: oklch(32% 0.016 264); --ink-faint: oklch(40% 0.014 264); --line: oklch(78% 0.008 264); }
}