/* =========================================================
   ANDAMIO CODE · MOBILE APP LAYER — INICIO (index.html)
   ========================================================= */
@media (max-width: 767px) {

    .hero { padding: calc(var(--app-bar-h) + var(--app-safe-top) + 28px) 0 6px; }

    .hero-inner { align-items: flex-start; text-align: left; }

    .hero h1 {
        font-size: clamp(2.05rem, 9.4vw, 2.6rem);
        line-height: 1.04;
        letter-spacing: -0.04em;
        margin-bottom: 16px;
    }

    .hero h1 .text-gradient { display: block; padding-bottom: 2px; }

    /* Misma fuente que el nombre de la marca en el app bar, en blanco pleno */
    .hero > .hero-inner > p {
        font-family: 'Copperplate', 'Copperplate Gothic Light', 'Copperplate Gothic Bold', serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.01em;
        color: var(--color-text);
        margin-bottom: 14px;
    }

    /* Tres textos cortos: el último deja aire antes de los botones */
    .hero > .hero-inner > p:last-of-type { margin-bottom: 24px; }

    [data-theme="dark"] .hero > .hero-inner > p { color: #ffffff; }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        max-width: none;
        margin-bottom: 14px;
    }

    /* Widget de métricas */
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        padding: 16px 0;
        background: var(--app-surface);
        border: 1px solid var(--app-line);
        border-radius: var(--app-radius);
    }

    .hero-stats .stat { min-width: 0; padding: 0 14px; text-align: left; }
    .hero-stats .stat + .stat { border-left: 1px solid var(--app-line); }
    .hero-stats .num { font-size: 22px; line-height: 1.1; background: var(--app-grad-text); -webkit-background-clip: text; background-clip: text; }
    .hero-stats .label { font-size: 9.5px; line-height: 1.35; letter-spacing: 0.07em; margin-top: 6px; }

    /* Módulos: carrusel horizontal con snap */
    .container.modules-section { padding: 30px 0 4px; }

    .home-preview {
        display: flex;
        gap: 12px;
        padding: 0 var(--app-gutter) 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--app-gutter);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        counter-reset: modulo;
    }

    .home-preview::-webkit-scrollbar { display: none; }

    .preview-card {
        position: relative;
        flex: 0 0 80%;
        scroll-snap-align: start;
        padding: 20px;
        border-radius: var(--app-radius);
        background: var(--app-surface);
        border-color: var(--app-line);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        counter-increment: modulo;
    }

    .preview-card::before { display: none; }

    .glass-card:hover { transform: none; border-color: var(--app-line); }
    .glass-card:active { transform: scale(0.98); }

    .preview-card .icon {
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        margin-bottom: 26px;
        font-size: 22px;
        border-radius: 15px;
        background: var(--app-surface-2);
        border: 1px solid var(--app-line-2);
    }

    .preview-card h3 { font-size: 18px; margin-bottom: 8px; }
    .preview-card p { font-size: 13.5px; line-height: 1.55; }
}