/* =============================================================================
 * Auto Parqueo — marketing site design system
 *
 * The tokens below are transcribed from AutoParkingFrontend/src/index.css, which
 * is itself a copy of the mobile app's app_colors.dart. Three surfaces, one
 * palette: a visitor who lands here, signs up, and opens the app should never
 * feel like they changed product.
 *
 * Plain CSS with custom properties — no Tailwind, no build step — because this
 * project deliberately has no Node. AssetMapper serves these files directly.
 * Keeping every value as a custom property is what lets the light/dark pair
 * below exist without duplicating a single rule.
 * ========================================================================== */

/* Inter, self-hosted rather than pulled from a CDN. A Google Fonts link would
 * hand every visitor's IP to a third party, which the privacy page would then
 * have to declare — 48 KB is a cheaper price than that paragraph. */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;                 /* text paints immediately in the fallback */
    font-weight: 100 900;               /* one file covers the whole weight axis */
    src: url("../fonts/inter-latin-wght-normal-Gz7AlRl.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ---- Brand: parking amber ------------------------------------------- */
    --primary-100: #ffecb3;
    --primary-300: #ffd54f;
    --primary-500: #ffc107;
    --primary-700: #ffa000;
    --primary-900: #ff6f00;

    /* ---- Brand: asphalt -------------------------------------------------- */
    --asphalt-100: #cfd8dc;
    --asphalt-300: #90a4ae;
    --asphalt-500: #607d8b;
    --asphalt-700: #455a64;
    --asphalt-800: #37474f;
    --asphalt-900: #263238;

    /* ---- Light surfaces (warm cream, matching the app) -------------------- */
    color-scheme: light;
    --background: #fffdf5;
    --surface: #fffefb;
    --surface-container: #fbf7ee;
    --surface-container-high: #f6f0e2;
    --foreground: #1b1b1f;
    --muted: #666c78;
    --border-app: #e7e0d0;

    /* --border-app is a decorative hairline: card edges, section rules, the
     * header underline. WCAG does not hold those to a ratio, and darkening them
     * would turn an airy page into a wireframe. A border that is the *only*
     * thing identifying a control (the ghost button, the language switcher, a
     * table cell) is a different job and needs 3:1, so it gets its own token. */
    --border-control: #93876b;

    /* Accent foregrounds are the darkened variants the app already verified at
     * 4.5:1 or better against --surface. Do not substitute primary-500 here: it
     * fails contrast on cream and the text turns to mush.
     *
     * --accent draws the focus ring, which WCAG holds to 3:1 against whatever it
     * sits on. The old #ff8f00 managed 2.01 on --surface-container-high, so a
     * keyboard user got an amber-on-cream outline they could barely find. */
    --accent: #c46e00;
    --accent-soft: rgba(255, 143, 0, 0.12);
    --accent-fg: #7a4100;

    --success: #2e7d32;
    --danger: #c62828;

    /* ---- Type scale: named roles, never t-shirt sizes -------------------- */
    --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --text-overline: 0.6875rem;   /* 11px, uppercase eyebrow labels          */
    --text-micro: 0.75rem;        /* 12px, helper text and legal fine print  */
    --text-body: 0.9375rem;       /* 15px, the default                       */
    --text-subtitle: 1.0625rem;   /* 17px, card and section headings         */
    --text-title: 1.5rem;         /* 24px, h2                                */
    --text-display: 1.875rem;     /* 30px, h1 on phones                      */
    --text-display-lg: 2.5rem;    /* 40px                                    */
    --text-display-xl: 3.25rem;   /* 52px, the hero headline on desktop      */

    /* ---- Elevation and shape -------------------------------------------- */
    --shadow-card: 0 1px 2px rgba(28, 25, 23, 0.04), 0 1px 3px rgba(28, 25, 23, 0.06);
    --shadow-pop: 0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.05);
    --radius-card: 0.875rem;
    --radius-pill: 999px;

    /* ---- Layout ---------------------------------------------------------- */
    /* --content-width is the READING measure, not the outer box. .container
     * adds the gutter back on top via calc(), which makes the two independent:
     * content = (content-width + 2*gutter) - 2*gutter, so the gutter cancels
     * exactly and stepping it below never moves the 1048px desktop measure.
     * Defining it as the outer box instead — the obvious way — means every
     * gutter change silently retunes every paragraph's line length. */
    --content-width: 65.5rem;   /* 1048px of content */
    --gutter: 1.25rem;          /* 20px, phones */
    --section-gap: 4.5rem;
}

/* The site follows the operating system. No toggle, no localStorage, no
 * flash-of-wrong-theme: a page a visitor sees once has not earned a preference
 * of its own, and with sessions off there is nowhere to store one anyway. */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background: #0e0e11;
        --surface: #1a1a1f;
        --surface-container: #232228;
        --surface-container-high: #2e2c36;
        --foreground: #e9e5ec;
        --muted: #9b99a6;
        --border-app: #35333f;
        --border-control: #767390;

        --accent: #ffb300;
        --accent-soft: rgba(255, 179, 0, 0.16);
        --accent-fg: #ffd54f;

        --success: #4ade80;
        --danger: #f87171;

        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.48), 0 2px 4px rgba(0, 0, 0, 0.36);
    }
}

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

body,
h1, h2, h3, h4,
p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
}

html {
    font-size: 16px;
    /* Anchor links land below the sticky header instead of underneath it. */
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: inherit;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.2em;
}

/* One visible focus style everywhere. Stripping outlines without replacing them
 * makes the site unusable by keyboard and fails any accessibility audit. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3 {
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 700;
    text-wrap: balance;         /* no orphan word stranded on its own line */
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-title); }
h3 { font-size: var(--text-subtitle); }

@media (min-width: 48rem) {
    h1 { font-size: var(--text-display-lg); }
}

@media (min-width: 64rem) {
    h1 { font-size: var(--text-display-xl); }
}

p {
    text-wrap: pretty;
    max-width: 65ch;            /* past this, a line gets measurably harder to read */
}

.eyebrow {
    font-size: var(--text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent-fg);
}

.lead {
    font-size: var(--text-subtitle);
    color: var(--muted);
    max-width: none;
}

.fine-print {
    font-size: var(--text-micro);
    color: var(--muted);
}

/* ---- Layout primitives -------------------------------------------------- */
.container {
    width: 100%;
    max-width: calc(var(--content-width) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* The gutter was a flat 20px from a 320px phone to a 2560px monitor, so a
 * tablet had text 20px off the screen edge. It steps twice, on breakpoints the
 * file already uses. Both target :root so the calc() above re-resolves. */
@media (min-width: 48rem) {
    :root {
        --gutter: 2rem;         /* 32px, tablets */
    }
}

@media (min-width: 64rem) {
    :root {
        --gutter: 2.5rem;       /* 40px, small desktop and up */
    }
}

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

.section--tint {
    background: var(--surface-container);
}

.stack > * + * {
    margin-block-start: 1rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-app);
    border-radius: 0 0 var(--radius-card) 0;
}

.skip-link:focus {
    left: 0;
}

/* Read by screen readers, invisible on screen. For section labels that would be
 * redundant to sighted users but leave a heading-level gap without them. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: normal;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
    min-height: 44px;           /* below this, touch targets start failing on phones */
    white-space: normal;
    text-align: center;
}

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

.btn:active {
    transform: translateY(0);
}

/* Dark text on amber. The ramp is bright enough that white text on it fails
 * contrast outright; this pairing is inherited from the app. */
.btn--primary {
    background: var(--primary-500);
    color: #1b1b1f;
    box-shadow: var(--shadow-card);
}

.btn--primary:hover {
    background: var(--primary-700);
    box-shadow: var(--shadow-pop);
}

.btn--ghost {
    background: transparent;
    border-color: var(--border-control);
    color: var(--foreground);
}

.btn--ghost:hover {
    background: var(--surface-container-high);
}

/* ---- Cards -------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border-app);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

/* ---- Site header -------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--background) 88%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--border-app);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 700;
    text-decoration: none;
    margin-inline-end: auto;
}

.site-header__logo {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
    color: var(--foreground);
}

/* On phones the nav collapses to the language switcher and the CTA. A burger
 * menu would need JavaScript to serve five links; the footer already carries
 * the full list. */
@media (max-width: 47.99rem) {
    .site-nav__links {
        display: none;
    }
}

/* ---- Language switcher -------------------------------------------------- */
.lang-switch {
    display: inline-flex;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-pill);
    overflow: hidden;
    font-size: var(--text-micro);
    font-weight: 600;
}

.lang-switch a {
    padding: 0.375rem 0.75rem;
    text-decoration: none;
    color: var(--muted);
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

.lang-switch a[aria-current='true'] {
    background: var(--accent-soft);
    color: var(--accent-fg);
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
    margin-block-start: var(--section-gap);
    padding-block: 3rem 2rem;
    background: var(--surface-container);
    border-block-start: 1px solid var(--border-app);
    font-size: var(--text-micro);
}

/* Three columns, same orphan shape as .steps: auto-fit sat on 2 between 464px
 * and 672px and left Soporte alone on a half-width row. Explicit breakpoint
 * rather than a bounded max-width range, so the switch does not move when
 * --gutter steps below. */
.site-footer__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .site-footer__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.site-footer h2 {
    font-size: var(--text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-block-end: 0.75rem;
}

.site-footer ul {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

.site-footer a {
    color: var(--foreground);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer__legal {
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--border-app);
    color: var(--muted);
}

/* ---- Long-form legal pages ---------------------------------------------- */
.prose {
    max-width: 100%;
}

/* max-width: none here let legal copy run the full 1048px content column — 105
 * characters a line at desktop, against the 65ch this file sets globally for a
 * reason. Past ~75 the eye loses the return sweep and re-reads the line it just
 * finished. .prose itself stays full width so a table can still use it. */
.prose p,
.prose li {
    max-width: 65ch;
}

.prose h2 {
    margin-block: 2.5rem 0.75rem;
    font-size: var(--text-subtitle);
}

.prose h3 {
    margin-block: 1.5rem 0.5rem;
    font-size: var(--text-body);
}

.prose ul,
.prose ol {
    margin-block: 0.75rem;
    padding-inline-start: 1.25rem;
    display: grid;
    gap: 0.375rem;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

/* :not(.btn) matters. This rule is one class + one type, so it outweighs the
 * single class on .btn--primary and used to repaint every button label inside a
 * legal page. In dark mode --accent-fg is #ffd54f, which on the amber button
 * fill scored 1.16:1 — the label was there, and invisible. */
.prose a:not(.btn) {
    color: var(--accent-fg);
    font-weight: 500;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1rem;
    font-size: var(--text-micro);
}

.prose th,
.prose td {
    border: 1px solid var(--border-control);
    padding: 0.625rem 0.75rem;
    text-align: start;
    vertical-align: top;
}

.prose th {
    background: var(--surface-container-high);
    font-weight: 600;
}

/* A wide table scrolls inside its own box; the page body never scrolls
 * sideways. */
.table-scroll {
    overflow-x: auto;
}

/* ---- Motion ------------------------------------------------------------- */
/* Everything animated on this site is decorative. A visitor who asked their OS
 * to reduce motion gets the final frame, not a slower version of the ride. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}