/**
 * Design system de la app movil, no el del sitio de marketing: la landing es la
 * antesala de la app y la continuidad visual reduce el abandono.
 *
 * Reglas no negociables de CLAUDE.md aplicadas aca:
 *   - Texto minimo 17px en contenido operativo
 *   - Touch targets de 64px en botones primarios
 *   - Un solo CTA primario por pantalla
 *   - Iconos siempre con etiqueta de texto visible
 *   - Naranja para CTA de adquisicion (lime queda para lo transaccional)
 */

/* Fuentes autohospedadas. Sora y DM Sans son SIL OFL, redistribuibles sin
   costo. Los TTF de origen son los mismos que consume la app movil, via
   @expo-google-fonts. Ver tools/build_fonts.py */
@font-face {
    font-family: 'Sora';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Sora-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Sora-ExtraBold.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/DMSans-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/DMSans-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/DMSans-Bold.woff2') format('woff2');
}

:root {
    --lime: #6DD900;
    --lime-dark: #60BF00;
    --orange: #EE5A27;
    --orange-dark: #D44A1B;
    --near-black: #1A1A1A;
    --grey-600: #5A5A5A;
    --grey-300: #D6D6D6;
    --grey-100: #F4F4F2;
    --white: #FFFFFF;

    --radius: 12px;
    --wrap: 640px;
}

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

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

body {
    margin: 0;
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;              /* minimo no negociable */
    line-height: 1.55;
    color: var(--near-black);
    background: var(--white);
}

a { color: inherit; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
}

/* Enlace de salto para lectores de pantalla y navegacion por teclado. */
.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 12px;
    top: 12px;
    z-index: 10;
    padding: 12px 16px;
    background: var(--near-black);
    color: var(--white);
    border-radius: var(--radius);
}

/* ---------- Header ---------- */

.site-header {
    border-bottom: 1px solid var(--grey-300);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
}
.site-header__logo img {
    display: block;
    height: 34px;
    width: auto;
}
.lang-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius);
    font-weight: 500;
    text-decoration: none;
}
.lang-toggle:hover { border-color: var(--near-black); }

/* ---------- Hero ---------- */

.hero { padding: 40px 20px 8px; }

.hero__title {
    margin: 0 0 12px;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.hero__subtitle {
    margin: 0 0 28px;
    font-size: 19px;
    color: var(--grey-600);
}

.notice {
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--grey-100);
    border: 1px solid var(--grey-300);
    font-size: 17px;
}
.notice--webview {
    background: #FFF6E8;
    border-color: #F0C98A;
}

/* ---------- Botones de tienda ---------- */

.stores {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
    align-items: flex-start;
}

.store-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* El margen izquierdo iguala al padding del .store-badge, para que la leyenda
   arranque a la misma altura que el arte del badge y no 12px antes. */
.store-item__caption {
    margin: 0 0 4px 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Badge oficial de la tienda.
 *
 * El arte no se toca: ni recolorear, ni recortar, ni rotar, ni animar. Solo se
 * escala por ancho respetando la proporcion (width/height van en el <img>).
 *
 * Se iguala el ancho, no el alto: las dos artes tienen proporciones distintas
 * (Apple 2.99:1, Google 3.37:1) y con el mismo alto la columna quedaba
 * despareja. A 160px de ancho el alto sale 53px (Apple) y 48px (Google).
 *
 * El padding de 12px es el espacio libre que exigen las dos guias de marca: un
 * cuarto de la altura del badge de Google, que es el mas chico de los dos. Por
 * eso tampoco hay fondo de color ni borde detras del badge.
 *
 * min-height 64px mantiene el touch target del design system aunque el badge
 * mida menos. */
.store-badge {
    display: inline-flex;
    align-items: center;
    min-height: 64px;
    padding: 12px;
    border-radius: var(--radius);
    background: transparent;
    text-decoration: none;
}
.store-badge img {
    display: block;
    width: 160px;
    height: auto;
    max-width: 100%;
}
.store-badge:hover { background: var(--grey-100); }

.store-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    min-height: 64px;             /* touch target no negociable */
    padding: 12px 20px;
    border: 2px solid var(--near-black);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--near-black);
    text-decoration: none;
    font-weight: 500;
}
.store-btn:hover { background: var(--grey-100); }
.store-item .store-btn { width: 100%; }

.store-btn__icon { flex: 0 0 auto; }

.store-btn__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.store-btn__label {
    font-size: 18px;
    font-weight: 700;
}
.store-btn__sub {
    font-size: 15px;
    opacity: 0.75;
}

/* Estado mientras la ficha de tienda no es publica. El badge queda visible pero
   inerte; nunca enlazamos a un 404. */
.store-btn--coming {
    border-color: var(--grey-300);
    color: var(--grey-600);
    background: var(--grey-100);
    cursor: default;
}
.store-btn--coming:hover { background: var(--grey-100); }

.store-btn__ribbon {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--near-black);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

:focus-visible {
    outline: 3px solid var(--lime-dark);
    outline-offset: 2px;
}

/* ---------- Beneficios ---------- */

.benefits {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
.benefits li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}
.benefits li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 12px;
    height: 7px;
    border-left: 2.5px solid var(--lime-dark);
    border-bottom: 2.5px solid var(--lime-dark);
    transform: rotate(-45deg);
}

/* ---------- QR de escritorio ---------- */

.qr-desktop {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    margin-bottom: 32px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius);
}
.qr-desktop img {
    flex: 0 0 auto;
    display: block;
}
.qr-desktop__hint {
    margin: 0;
    font-size: 17px;
    color: var(--grey-600);
}
.qr-desktop[hidden] { display: none; }

/* ---------- Aviso anti-fraude ---------- */

.antifraud {
    padding-top: 8px;
    padding-bottom: 40px;
}
.antifraud__heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--orange);
}
.antifraud__body {
    margin: 0;
    padding: 16px 18px;
    border-left: 4px solid var(--orange);
    background: var(--grey-100);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 17px;
}

/* ---------- Footer ---------- */

.site-footer {
    padding: 28px 0 40px;
    border-top: 1px solid var(--grey-300);
    font-size: 17px;
    color: var(--grey-600);
}
.site-footer p { margin: 0 0 8px; }
.site-footer a { font-weight: 500; }
.site-footer__support a {
    color: var(--near-black);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
/* nowrap en cada enlace para que "Terminos y Condiciones" no se parta a la
   mitad cuando el contenedor se angosta. */
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer__links a { white-space: nowrap; }
.site-footer__rights { font-size: 15px; }

/* ---------- Pantallas chicas ---------- */

@media (max-width: 480px) {
    .hero { padding-top: 28px; }
    .hero__title { font-size: 29px; }
    .hero__subtitle { font-size: 18px; }
    .qr-desktop { flex-direction: column; text-align: center; }

    /* En pantalla angosta la cinta no entra al lado de la etiqueta: superpuesta
       tapaba el final del texto. Baja a una segunda linea dentro del boton,
       alineada con la etiqueta (28px del icono + 14px del gap). */
    .store-btn { flex-wrap: wrap; }
    .store-btn__ribbon {
        margin: 6px 0 0 42px;
    }
}