/* ===== Landings de apps — compartido. Tema por app via clase en . ===== */ .app-erudito { --app-accent:#6366f1; --app-accent-2:#818cf8; --app-glow:rgba(99,102,241,.25); --app-chip-bg:rgba(99,102,241,.12); --app-chip-border:rgba(99,102,241,.32); } .app-studygob { --app-accent:#f0c75e; --app-accent-2:#6366f1; --app-glow:rgba(240,199,94,.18); --app-chip-bg:rgba(240,199,94,.10); --app-chip-border:rgba(240,199,94,.30); --app-btn-bg-2:#d9a93f; --app-btn-text:#1c1503; } .app-petlifeseven { --app-accent:#F9AA33; --app-accent-2:#4A6572; --app-glow:rgba(249,170,51,.20); --app-chip-bg:rgba(249,170,51,.12); --app-chip-border:rgba(249,170,51,.32); } .app-fleetone { --app-accent:#3B82F6; --app-accent-2:#F59E0B; --app-glow:rgba(59,130,246,.22); --app-chip-bg:rgba(59,130,246,.12); --app-chip-border:rgba(59,130,246,.32); --app-btn-text:#06101f; } .app-page { padding-top: 4.5rem; } /* ----- Hero ----- */ .app-hero { position: relative; overflow: hidden; padding: 4rem 0 5rem; } .app-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 75% 15%, var(--app-glow), transparent 60%); } .app-hero-inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; } .app-identity { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; } .app-icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--shadow-lg); } .app-name { font-size: 1.5rem; font-weight: 700; } .app-hero h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); margin-bottom: 1rem; } .app-sub { font-size: 1.125rem; max-width: 46ch; margin-bottom: 2rem; } .app-cta-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .play-badge img { height: 64px; width: auto; } .badge-soon { display: inline-flex; align-items: center; padding: .5rem 1rem; font-size: .8125rem; font-weight: 500; color: var(--app-accent); background: var(--app-chip-bg); border: 1px solid var(--app-chip-border); border-radius: var(--radius-full); } .btn-app { background: linear-gradient(135deg, var(--app-btn-bg-1, var(--app-accent)), var(--app-btn-bg-2, var(--app-accent-2))); color: var(--app-btn-text, #fff); box-shadow: var(--shadow-md), 0 0 24px var(--app-glow); } .btn-app:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), 0 0 34px var(--app-glow); } /* Mockup de teléfono (hero) */ .phone { width: 264px; margin: 0 auto; overflow: hidden; border: 10px solid #20202c; border-radius: 38px; background: #000; box-shadow: var(--shadow-xl), 0 0 60px var(--app-glow); animation: app-float 6s ease-in-out infinite; } .phone img { width: 100%; display: block; } @keyframes app-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Pantalla simulada (apps sin capturas) */ .mock-ui { background: #0F0F0F; aspect-ratio: 9 / 19; padding: 1.4rem 1rem; display: flex; flex-direction: column; gap: .9rem; } .mock-title { color: #f8fafc; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; } .mock-row { background: #1A1A1A; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .7rem .8rem; } .mock-row span { color: #e2e8f0; font-size: .72rem; } .mock-bar { height: 6px; border-radius: 3px; margin-top: .45rem; background: linear-gradient(90deg, var(--app-accent), var(--app-accent-2)); } /* ----- Chips ----- */ .app-chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } .chip { padding: .45rem 1rem; font-size: .8125rem; color: var(--color-text); background: var(--app-chip-bg); border: 1px solid var(--app-chip-border); border-radius: var(--radius-full); } /* ----- Secciones ----- */ .app-section { padding: 4.5rem 0; } .app-section-alt { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } /* ----- Funcionalidades ----- */ .app-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .app-feature { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; transition: transform var(--transition-normal), border-color var(--transition-normal); } .app-feature:hover { transform: translateY(-4px); border-color: var(--app-chip-border); } .app-feature svg { width: 28px; height: 28px; stroke: var(--app-accent); fill: none; stroke-width: 1.8; margin-bottom: 1rem; } .app-feature h3 { font-size: 1.0625rem; margin-bottom: .5rem; } .app-feature p { font-size: .9375rem; } /* ----- Galería de capturas ----- */ .app-gallery { display: flex; align-items: flex-start; gap: 1.25rem; margin-top: 2.5rem; padding: .5rem .25rem 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-border-light) transparent; } .shot { flex: 0 0 auto; width: 218px; scroll-snap-align: start; border: 6px solid #20202c; border-radius: 24px; overflow: hidden; background: #000; } .shot img { width: 100%; height: auto; } .app-gallery::-webkit-scrollbar { height: 8px; } .app-gallery::-webkit-scrollbar-thumb { background: var(--color-border-light); border-radius: 4px; } .app-gallery:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 4px; } /* ----- Diferenciador ----- */ .app-diff { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; background: linear-gradient(135deg, var(--app-chip-bg), transparent); border: 1px solid var(--app-chip-border); border-radius: var(--radius-xl); padding: 2.5rem; } .app-diff svg { width: 44px; height: 44px; stroke: var(--app-accent); fill: none; stroke-width: 1.6; } .app-diff h3 { margin-bottom: .5rem; } /* ----- CTA final ----- */ .app-cta-final { text-align: center; padding: 5rem 0; } .app-cta-final h2 { margin-bottom: .75rem; } .app-cta-final .app-cta-row { justify-content: center; margin-top: 2rem; } .qr-box { width: 148px; margin: 2.5rem auto 0; padding: .75rem; background: #fff; border-radius: var(--radius-md); } .qr-box img { width: 100%; display: block; } .qr-caption { margin-top: .75rem; font-size: .8125rem; color: var(--color-text-muted); } /* ----- Hub /apps/ ----- */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .hub-card { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: transform var(--transition-normal), border-color var(--transition-normal); } .hub-card:hover { transform: translateY(-6px); border-color: var(--color-border-light); } .hub-card .app-icon { width: 56px; height: 56px; border-radius: 14px; } .hub-card h3 { font-size: 1.125rem; } .hub-card p { font-size: .9375rem; flex-grow: 1; } .hub-link { color: var(--color-primary-light); font-size: .9375rem; font-weight: 500; } /* ----- Responsive / accesibilidad ----- */ @media (max-width: 968px) { .app-hero-inner { grid-template-columns: 1fr; text-align: center; } .app-identity, .app-cta-row, .app-chips { justify-content: center; } .app-sub { margin-inline: auto; } .app-features-grid { grid-template-columns: repeat(2, 1fr); } .app-diff { grid-template-columns: 1fr; text-align: center; } .app-diff svg { margin: 0 auto; } } @media (max-width: 640px) { .app-features-grid { grid-template-columns: 1fr; } .phone { width: 230px; } } @media (prefers-reduced-motion: reduce) { .phone { animation: none; } }