/* ============================================
   Wazo · app.css
   Landing de la app (plantilla "App (landing)").
   Master grid 12-col · contenido en cols 2-11 (mismo sistema que nosotros/legal).
   ============================================ */

.wazo-app {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--wazo-grid-gutter);
}
.wazo-app > section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--wazo-grid-gutter);
    position: relative;
}

/* ============================================
   1 · HERO · texto izq (cols 2-7) + mockup dcha (cols 8-12)
   ============================================ */
.wazo-app__hero {
    padding-block: var(--wazo-sp-section-block);
    align-items: start;                 /* texto y mockup alineados al top */
    row-gap: var(--wazo-sp-phone-lg);
}
.wazo-app__hero-content {
    grid-column: 2 / 8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wazo-sp-phone-md);
}
/* Sin imagen · el texto ocupa más ancho */
.wazo-app--no-img .wazo-app__hero-content { grid-column: 2 / 10; }

.wazo-app__hero-media {
    grid-column: 8 / 12;
    align-self: start;
}
.wazo-app__hero-media img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}

.wazo-app__eyebrow {
    font-size: var(--wazo-fs-14);
    letter-spacing: var(--wazo-ls-display);
    line-height: var(--wazo-lh-none);
    color: var(--wazo-color-text);
    opacity: 0.85;
    margin: 0;
}
.wazo-app__title {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-display-xl);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    margin: 0;
    text-wrap: balance;
}
.wazo-app__desc {
    font-size: var(--wazo-fs-16);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.60);
    max-width: 60ch;
    margin: 0;
}

/* Botones de descarga (badges oficiales o fallback estilo web) */
.wazo-app__stores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wazo-sp-phone-sm);
    margin-top: var(--wazo-sp-phone-xs);
}
.wazo-app__store {
    display: inline-flex;
    align-items: center;
    gap: var(--wazo-sp-phone-xs);
    text-decoration: none;
}
/* Variante badge · imagen oficial (sin estilo de botón) */
.wazo-app__store--badge { border-radius: 8px; overflow: hidden; }
.wazo-app__store--badge img {
    display: block;
    height: 48px;
    width: auto;
}
.wazo-app__store-icon {
    display: inline-flex;
    align-items: center;
}

/* ============================================
   2 · CARACTERÍSTICAS · título + grid de bloques
   ============================================ */
.wazo-app__features {
    padding-block: var(--wazo-sp-section-block);
    row-gap: var(--wazo-sp-section-rowgap);
}
.wazo-app__features-title {
    grid-column: 2 / 12;
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-display-lg);          /* canon h2 de sección (= cursos/sims) */
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    margin: 0;
    padding-top: var(--wazo-sp-phone-lg);
    border-top: 1px solid var(--wazo-color-ui-border);
    text-wrap: balance;
}
.wazo-app__features-grid {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wazo-grid-gutter);
}
.wazo-app__feature {
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-sm);
}
.wazo-app__feature-title {
    font-family: var(--wazo-font-sans);
    font-weight: var(--wazo-font-weight-medium);
    font-size: var(--wazo-fs-20);
    line-height: var(--wazo-lh-display);
    letter-spacing: var(--wazo-ls-display);
    color: var(--wazo-color-text);
    margin: 0;
}
.wazo-app__feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--wazo-sp-phone-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wazo-app__feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--wazo-sp-phone-xs);
    font-size: var(--wazo-fs-16);
    line-height: var(--wazo-lh-body);
    letter-spacing: var(--wazo-ls-display);
    color: rgba(255, 255, 255, 0.75);
}
.wazo-app__feature-check {
    flex-shrink: 0;
    color: var(--wazo-color-accent);
    font-size: var(--wazo-fs-14);
    line-height: var(--wazo-lh-body);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .wazo-app {
        grid-template-columns: 1fr;
        padding-inline: 16px;
    }
    .wazo-app > section { grid-template-columns: 1fr; }
    .wazo-app__hero-content,
    .wazo-app--no-img .wazo-app__hero-content,
    .wazo-app__hero-media,
    .wazo-app__features-title,
    .wazo-app__features-grid { grid-column: 1; }
    /* Hero apila: texto arriba, mockup debajo (limitado para no gigante) */
    .wazo-app__hero-media { max-width: 420px; }
}
@media (max-width: 639px) {
    .wazo-app__hero { padding-block: var(--wazo-sp-phone-lg); }
    .wazo-app__features { padding-block: var(--wazo-sp-phone-lg); }
    .wazo-app__hero-content { gap: var(--wazo-sp-phone-sm); }
    .wazo-app__features-grid { grid-template-columns: 1fr; gap: var(--wazo-sp-phone-lg); }
    .wazo-app__features-title { padding-top: var(--wazo-sp-phone-md); }
    .wazo-app__store--badge img { height: 44px; }
    .wazo-app__stores .wazo-btn { flex: 1 1 auto; }   /* botones fallback a ancho cómodo */
}