/* =====================================================================
   Páginas: apps, ficha de app, contacto, privacidad y términos.
   Usa los tokens de site.css; sin colores nuevos salvo los de las tiendas.
   ===================================================================== */

/* lo que el script esconde con [hidden] gana sobre los display de componentes */
.app-page [hidden],
.store-btn[hidden] {
    display: none !important;
}

/* ---------- ícono de app (squircle) ---------- */
.app-icon {
    width: 96px;
    height: 96px;
    border-radius: 22.5%;
    object-fit: cover;
    background: var(--surface);
}

/* ---------- botones de tienda ---------- */
.store-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 18px 0 14px;
    border-radius: var(--r-md);
    background: #0A0D18;
    color: #FFFFFF;
    font: 600 1.0625rem/1.05 var(--sans);
    letter-spacing: -0.01em;
    text-decoration: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .16s var(--ease), background-color .2s var(--ease);
}

.store-btn svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.store-btn small {
    display: block;
    font-size: 13px; /* lo que se lee no baja de 13px */
    font-weight: 500;
    letter-spacing: .01em;
    opacity: .8;
}

a.store-btn[href]:hover {
    color: #FFFFFF;
}

/* al presionar responde en el acto; "Muy pronto" no tiene href y no se presiona */
a.store-btn[href]:active {
    transform: scale(0.97);
    transition-duration: .1s;
}

@media (hover: hover) and (pointer: fine) {
    a.store-btn[href]:hover {
        background: #232838;
    }
}

.store-btn.is-soon {
    background: var(--tile);
    color: var(--ink-2);
    cursor: default;
}

/* la etiqueta "Nueva" del estante no hereda el color ni el tamaño de .app span */
.app .app-new {
    color: #2B2300;
    font-size: 11px;
    line-height: 1.5;
}

.all-apps {
    padding-top: clamp(40px, 5vw, 64px);
}

/* ---------- apps: portada con pantalla de inicio ---------- */
.apps-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.home-stage {
    position: relative;
    display: grid;
    justify-items: center;
    padding: var(--s-4) 0;
}

.home-phone {
    width: min(290px, 78vw);
    padding: 10px;
    border-radius: 48px;
    background: oklch(0.22 0.03 265);
    transform: rotate(2.5deg);
}

.home-screen {
    position: relative;
    aspect-ratio: 9 / 18.5;
    border-radius: 38px;
    overflow: hidden;
    padding: 70px 18px 0;
    background: #1B3A9E;
}

.home-island {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 88px;
    height: 26px;
    margin-left: -44px;
    border-radius: var(--r-pill);
    background: #000;
}

.home-screen::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 110px;
    height: 5px;
    margin-left: -55px;
    border-radius: var(--r-pill);
    background: oklch(1 0 0 / .75);
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-grid li {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
}

.home-grid img {
    width: 62px;
    height: 62px;
    border-radius: 22.5%;
    object-fit: cover;
    box-shadow: 0 6px 16px -4px oklch(0 0 0 / .45); /* taste-skill-ignore: ícono que flota sobre el fondo azul (excepción del dueño) */
}

.home-grid span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    color: #F4F6FF;
}

.home-notes {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 34px;
    display: grid;
    gap: 8px;
}

.home-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: oklch(0.985 0.005 265 / .94);
    color: #0B1B5C;
    line-height: 1.25;
}

.home-note:last-child {
    transform: scale(.94);
    opacity: .85;
}

.home-note img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: 0 0 auto;
}

.home-note small {
    display: block;
    font-size: 10.5px;
    color: #4A5578;
}

.home-note strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
}

.home-caption {
    margin-top: var(--s-5);
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

@media (max-width: 900px) {
    .apps-hero .page-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-phone {
        width: min(250px, 66vw);
    }

    .home-stage {
        padding: 0;
    }

    .home-caption {
        margin-top: var(--s-4);
    }
}

/* ---------- apps: fichas ---------- */
.app-rows {
    display: grid;
    gap: var(--s-4);
}

.app-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, .92fr);
    gap: var(--s-5) var(--s-6);
    align-items: start;
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--r-lg);
    background: var(--tile);
    scroll-margin-top: 110px;
}

.app-row h3 {
    font: 800 var(--fs-xl)/1.15 var(--display);
    letter-spacing: -0.02em;
    margin-top: var(--s-1);
}

.app-row .app-new {
    font-family: var(--sans);
    letter-spacing: 0;
    vertical-align: 5px;
}

.app-row-pitch {
    margin: var(--s-2) 0 var(--s-3);
    font-size: var(--fs-lg);
    line-height: 1.45;
    color: var(--ink);
}

.app-row-main > p:not(.app-row-pitch) {
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.app-row .stack {
    margin-top: var(--s-4);
    font-size: var(--fs-sm);
}

.app-row .stack strong {
    font-weight: 500;
}

/* la lista va junta: sin el relleno que antes dejaba sitio a las líneas */
.app-row .stack li,
.app-body .stack li {
    padding: 2px 0;
}

.app-row-side {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: #fff;
}

.app-row-side > p:not(.side-title):not(.app-row-links) {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-4);
}

.side-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

.side-title .muted {
    color: var(--ink-3);
    font-weight: 500;
}

.app-row-links {
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.app-row-links a,
.more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.app-row-links a:hover,
.more-link:hover {
    text-decoration: underline;
}

.app-row-links svg,
.more-link svg {
    width: 16px;
    height: 16px;
    transition: transform .2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .app-row-links a:hover svg,
    .more-link:hover svg {
        transform: translateX(3px);
    }
}

@media (max-width: 1000px) {
    .app-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .app-row .app-icon {
        width: 72px;
        height: 72px;
    }

    .app-row-side {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .app-row {
        grid-template-columns: 1fr;
        gap: var(--s-4);
    }

    .app-row .app-icon {
        width: 64px;
        height: 64px;
    }

    .app-row-side {
        grid-column: auto;
    }
}

/* ---------- ficha de una app ---------- */
/* lo que sigue va sobre el mismo fondo: menos aire abajo para no dejar un hueco */
.app-hero {
    padding-bottom: clamp(24px, 3vw, 40px);
}

.js .app-page:not(.is-ready) .app-head {
    visibility: hidden;
}

.app-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-4) var(--s-7);
    align-items: start;
}

.app-head .app-icon {
    width: 128px;
    height: 128px;
}

.app-head .app-icon[hidden] + .app-head-text {
    grid-column: 1 / -1;
}

.app-head h1 {
    margin-bottom: var(--s-2);
}

.app-dev {
    margin-bottom: var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--link);
}

.app-head .lede {
    margin-bottom: var(--s-5);
}

.app-actions {
    display: grid;
    gap: var(--s-3);
    justify-items: start;
}

.smart-btn {
    min-height: 58px;
    padding: 0 var(--s-6) 0 var(--s-5);
    text-align: left;
}

.smart-btn svg {
    width: 22px;
    height: 22px;
}

.smart-btn span {
    display: grid;
    gap: 4px;
    font-size: var(--fs-base);
}

.smart-btn small {
    font-size: 13px;
    font-weight: 500;
    opacity: .85;
}

/* cifras separadas por espacio, sin líneas */
.app-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) var(--s-8);
    margin: var(--s-7) 0 0;
}

.app-stats > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.app-stats dt {
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.app-stats dd {
    margin: 0;
    font: 800 var(--fs-lg)/1.2 var(--display);
    letter-spacing: -0.01em;
    color: var(--ink);
}

@media (max-width: 640px) {
    .app-head {
        grid-template-columns: 1fr;
    }

    .app-head .app-icon {
        width: 96px;
        height: 96px;
    }

    .app-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-4);
        margin-top: var(--s-6);
    }
}

/* capturas */
/* sigue al encabezado sobre el mismo fondo: arranca cerca */
.shots-section {
    padding: clamp(24px, 3vw, 40px) 0 var(--s-6);
}

.shots-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-3) var(--s-5);
    margin-bottom: var(--s-6);
}

.shots-nav {
    display: flex;
    gap: var(--s-2);
}

.shots-track {
    display: flex;
    gap: var(--s-4);
    margin: 0 0 var(--s-3);
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden; /* el carrusel solo se mueve de lado */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.shots-track::-webkit-scrollbar {
    display: none;
}

.shots-track li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.shot {
    display: block;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--tile);
    cursor: zoom-in;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.shot:active {
    transform: scale(0.98);
    transition-duration: .1s;
}

@media (hover: hover) and (pointer: fine) {
    .shot:hover {
        opacity: .92;
    }
}

.shot img {
    width: auto;
    height: clamp(380px, 48vw, 520px);
    max-width: none;
}

/* lo que hace + información */
.app-about {
    padding: clamp(48px, 6vw, 72px) 0 clamp(56px, 7vw, 96px);
}

.other-apps {
    padding-top: clamp(56px, 7vw, 96px);
}

.app-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--s-7) var(--s-9);
    align-items: start;
}

.app-body h2 {
    margin-bottom: var(--s-4);
}

.app-body .stack {
    margin: var(--s-5) 0;
}

.app-body .stack strong {
    font-weight: 500;
}

.app-for {
    margin-bottom: var(--s-5);
    color: var(--ink-2);
}

.app-for strong {
    color: var(--ink);
}

.app-body .btn svg,
.more-link svg {
    width: 16px;
    height: 16px;
}

.store-desc {
    margin-top: var(--s-8);
}

.store-desc h3 {
    margin-bottom: var(--s-3);
}

.store-text {
    position: relative;
    max-width: 66ch;
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.store-text p + p {
    margin-top: var(--s-3);
}

.store-text.is-clamped {
    max-height: 13.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 65%, transparent); /* taste-skill-ignore: máscara que desvanece el texto recortado, no es un relleno */
    mask-image: linear-gradient(#000 65%, transparent); /* taste-skill-ignore: igual que la línea de arriba */
}

.more-toggle {
    margin-top: var(--s-3);
    border: 0;
    background: none;
    font: 700 var(--fs-sm)/1.4 var(--sans);
    cursor: pointer;
}

.info-card {
    padding: var(--s-6);
    border-radius: var(--r-lg);
    background: var(--tile);
}

.info-card h2 {
    font: 700 var(--fs-lg)/1.3 var(--sans);
    letter-spacing: -0.01em;
    margin-bottom: var(--s-3);
}

.info-card dl {
    margin: 0;
}

.info-card dl > div {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-2) 0;
    font-size: var(--fs-sm);
}

.info-card dt {
    color: var(--ink-3);
}

.info-card dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
}

@media (max-width: 900px) {
    .app-body {
        grid-template-columns: 1fr;
    }
}

/* novedades */
.whats-new {
    padding: clamp(48px, 6vw, 80px) 0;
}

.whats-new .shots-head {
    margin-bottom: var(--s-4);
}

.release-notes {
    max-width: 68ch;
    white-space: pre-line;
    color: var(--ink-2);
}

.more-link {
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* lightbox */
.lightbox {
    width: min(1100px, 100vw);
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.lightbox[open] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-6) var(--s-4);
}

.lightbox::backdrop {
    background: oklch(0.12 0.03 265 / .9);
    animation: lb-fade .2s var(--ease);
}

/* el visor entra desde 0.95 con opacidad, nunca desde cero */
.lightbox[open] figure {
    animation: lb-in .22s var(--ease);
}

@keyframes lb-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes lb-fade {
    from {
        opacity: 0;
    }
}

.lightbox figure {
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    min-height: 0;
    margin: 0;
}

.lightbox img {
    max-height: calc(100dvh - 120px);
    width: auto;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3); /* taste-skill-ignore: la captura flota dentro del diálogo */
}

.lightbox figcaption {
    margin: 0;
    color: oklch(0.85 0.02 265);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.lb-arrow {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: oklch(1 0 0 / .14);
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color .2s var(--ease), transform .16s var(--ease);
}

.lb-arrow:active {
    transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
    .lb-arrow:hover {
        background: oklch(1 0 0 / .26);
    }
}

.lb-arrow svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 640px) {
    .lightbox[open] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        padding: var(--s-7) var(--s-3) var(--s-4);
    }

    .lightbox figure {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .lb-prev { grid-row: 2; justify-self: end; }
    .lb-next { grid-row: 2; justify-self: start; }
}

/* ---------- contacto ---------- */
/* el encabezado ya deja aire: la sección empieza cerca */
.contact-main {
    padding-top: clamp(16px, 2vw, 24px);
}

/* datos de contacto: separados por espacio, sin el relleno que dejaba sitio a las líneas */
.contact-main .contact-list li {
    padding: var(--s-2) 0;
}

/* los campos van en blanco dentro de la superficie del formulario */
.contact-main .field input,
.contact-main .field select,
.contact-main .field textarea {
    background: #fff;
}

.topic-links a {
    text-decoration: none;
}

.topic-links a:hover {
    text-decoration: underline;
}

.contact-title {
    font-size: var(--fs-xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--s-2);
}

.contact-list span {
    color: var(--ink);
    font-weight: 600;
}

.contact-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
}

.topics li {
    display: flex;
    flex-direction: column;
}

.topics h3 {
    margin-bottom: var(--s-2);
}

.topic-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    margin-top: auto;
    padding-top: var(--s-3);
    font-weight: 700;
}

.industry-pick {
    margin-top: var(--s-8);
}

.industry-pick h3 {
    margin-bottom: var(--s-4);
}

.pick-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0 0 var(--s-4);
    padding: 0;
    list-style: none;
}

.pick-list a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-4) 0 var(--s-3);
    border-radius: var(--r-pill);
    background: var(--tile);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease);
}

.pick-list a:active {
    transform: scale(0.97);
    transition-duration: .1s;
}

@media (hover: hover) and (pointer: fine) {
    .pick-list a:hover {
        background: var(--tile-hover);
        color: var(--link);
    }
}

.pick-list svg {
    width: 18px;
    height: 18px;
    color: var(--link);
}

.faq-wrap {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--s-6) var(--s-9);
    align-items: start;
}

.faq-wrap h2 {
    margin-bottom: var(--s-4);
}

@media (max-width: 900px) {
    .faq-wrap {
        grid-template-columns: 1fr;
    }
}

/* ---------- textos legales ---------- */
.legal-date {
    display: block;
    margin-top: var(--s-3);
    font-size: var(--fs-sm);
    color: var(--ink-3);
}

.legal {
    padding-top: clamp(16px, 2vw, 24px);
}

.legal-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--s-7) var(--s-9);
    align-items: start;
}

.legal-toc {
    position: sticky;
    top: 104px;
    font-size: var(--fs-sm);
}

.legal-toc p {
    margin-bottom: var(--s-3);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

.legal-toc ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.legal-toc a {
    display: block;
    padding: 6px 0;
    color: var(--ink-2);
    text-decoration: none;
    line-height: 1.35;
}

.legal-toc a:hover {
    color: var(--link);
}

.legal .prose > section {
    scroll-margin-top: 104px;
}

.legal .prose > section:first-child h2 {
    margin-top: 0;
}

.legal .prose strong {
    color: var(--ink);
}

@media (max-width: 900px) {
    .legal-grid {
        grid-template-columns: 1fr;
    }

    .legal-toc {
        position: static;
        padding: var(--s-5);
        border-radius: var(--r-md);
        background: var(--tile);
    }
}

@media (max-width: 560px) {
    .store-row {
        gap: var(--s-2);
    }

    .store-btn {
        padding: 0 12px 0 10px;
        gap: 8px;
    }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    a.store-btn[href]:active,
    .shot:active,
    .lb-arrow:active,
    .pick-list a:active {
        transform: none;
    }

    .lightbox[open] figure,
    .lightbox::backdrop {
        animation: none;
    }

    .app-row-links svg,
    .more-link svg {
        transition: none;
    }
}