/*
 * Alisio · landing
 *
 * Los valores de marca (colores, tipografía, radios, sombras y degradado) siguen el estilo
 * visual de la app móvil de Alisio. El origen de cada token está documentado en el README.
 *
 * Contraste AA: textos y fondos se han elegido para superar 4,5:1.
 */

/* ───────────────────────── Fuente (autoalojada, OFL 1.1) ───────────────────────── */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans-var.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* ───────────────────────── Tokens ───────────────────────── */

:root {
    --color-primary: #6B3340;          /* blanco encima: 9,67:1 */
    --color-ink: #212745;
    --color-text: #1A202C;
    --color-text-secondary: #4A5568;
    --color-surface: #FFFFFF;
    --color-card: #F0F4FD;
    --color-border: #E2E8F0;
    --color-sky: #CEDCF7;

    --gradient-screen: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 10%, var(--color-sky) 100%);

    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
    --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
    --fs-h3: 1.25rem;
    --fs-body-lg: 1.0625rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.8125rem;

    --radius-s: 8px;
    --radius-l: 16px;
    --radius-full: 9999px;

    --shadow-l: 0 8px 20px -4px rgb(0 0 0 / 9.4%), 0 16px 32px rgb(0 0 0 / 4%);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --container: 72rem;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

    /* Rejilla común a hero y secciones: texto + columna fija de captura, para que
       los bordes de texto, tarjetas y capturas coincidan en vertical entre secciones */
    --media-col: clamp(16rem, 28vw, 22rem);
    --split-gap: clamp(2rem, 5vw, 5rem);

    /* Cabecera: su alto se deriva del ancho del logo y de la proporción real de la imagen (240×157) */
    --logo-width: 96px;
    --header-height: calc(var(--space-5) + var(--logo-width) * 157 / 240);
}

/* ───────────────────────── Base ───────────────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-surface);
}

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

h1,
h2,
h3 {
    margin: 0;
    color: var(--color-ink);
    line-height: 1.2;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

main:focus {
    outline: none;   /* destino del enlace de salto: recibe el foco, no necesita marco */
}

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

/* Enlace para saltar al contenido: invisible hasta que recibe el foco con teclado */
.skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    font-weight: 700;
    color: var(--color-surface);
    background: var(--color-primary);
    border-radius: var(--radius-s);
    transform: translateY(-200%);
}

.skip-link:focus-visible {
    transform: none;
    outline-color: var(--color-ink);
}

/* ───────────────────────── Componentes ───────────────────────── */

/* Insignias oficiales de las stores, al mismo alto (la de Google, recortada de su margen) */
.stores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.stores a {
    display: block;
    border-radius: var(--radius-s);
}

.stores img {
    width: auto;
    max-width: none;
    height: 48px;
}

/* Captura de la app dentro de un marco de móvil */
.media {
    display: flex;
    justify-content: center;   /* ancho definido: el width en % de la captura no colapsa antes de cargar */
    margin: 0;
}

.phone {
    width: min(100%, 260px);
    height: auto;
    border: 6px solid var(--color-ink);
    border-radius: 32px;
    background: var(--color-surface);
    box-shadow: var(--shadow-l);
}

/* Sección tipo */
.section {
    padding-block: var(--space-8);
}

.section--tinted {
    background: var(--color-card);
}

.section__title {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: -0.3px;
}

.section__lead {
    max-width: 40rem;
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
}

/* Tarjetas a un lado y una captura al otro */
.split {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

.cards {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.card {
    position: relative;
    padding: var(--space-5);
    background: var(--color-card);
    border-radius: var(--radius-l);
}

.section--tinted .card {
    background: var(--color-surface);
}

.card__title {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
}

.card p {
    margin-top: var(--space-1);
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
}

/* Variante numerada: los números los dibuja CSS sobre la <ol> */
.cards--numbered {
    counter-reset: card;
}

.cards--numbered .card {
    padding-left: calc(var(--space-5) + 3rem);
    counter-increment: card;
}

.cards--numbered .card::before {
    content: counter(card);
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-weight: 700;
    color: var(--color-surface);
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

@media (min-width: 48rem) {
    .phone {
        width: min(100%, 300px);
    }

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

    .split {
        grid-template-columns: minmax(0, 1fr) var(--media-col);
        gap: var(--split-gap);
    }

    /* Captura a la izquierda; el orden del HTML (texto primero) no cambia */
    .split--reverse {
        grid-template-columns: var(--media-col) minmax(0, 1fr);
    }

    .split--reverse > .media {
        order: -1;
    }

    /* La captura se pega al borde exterior del contenedor: así texto, tarjetas y capturas
       empiezan y acaban en las mismas líneas verticales en las tres secciones */
    .media {
        justify-content: flex-end;
    }

    .split--reverse > .media {
        justify-content: flex-start;
    }
}

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

/* La cabecera flota sobre el hero para que el degradado arranque desde arriba del todo */
.site-header {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 10;
}

.site-header__inner {
    display: flex;
    align-items: center;
    padding-top: var(--space-5);
}

.site-header__brand {
    display: block;
    border-radius: var(--radius-s);
}

.site-header__brand img {
    width: var(--logo-width);
}

/* ───────────────────────── Hero ───────────────────────── */

.hero {
    padding-top: var(--header-height);
    padding-bottom: var(--space-8);
    background: var(--gradient-screen);
}

.hero__inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    padding-top: var(--space-4);
}

.hero__content {
    display: grid;
    gap: var(--space-4);
}

.hero__title {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.hero__title span {
    display: block;
    color: var(--color-primary);
}

.hero__lead {
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.hero__support {
    color: var(--color-text-secondary);
}

.hero .stores {
    margin-top: var(--space-2);
}

@media (min-width: 48rem) {
    .hero {
        padding-bottom: var(--space-9);
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr) var(--media-col);
        gap: var(--split-gap);
        padding-top: var(--space-7);
    }
}

/* ───────────────────────── Pie ───────────────────────── */

.site-footer {
    padding-block: var(--space-7);
    border-top: 1px solid var(--color-border);
}

.site-footer__inner {
    display: grid;
    gap: var(--space-5);
    justify-items: center;
    text-align: center;
}

.site-footer__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-5) var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
}

.logo-gobcan {
    width: 96px;
}

/* Imagen de 343px de origen: nunca se amplía por encima de su tamaño real */
.logo-funding {
    width: 343px;
}

.site-footer__note {
    max-width: 40rem;
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
}