/* ==========================================================================
   COMERCLARO APP LANDING PAGE STYLES (ISOLATED)
   ========================================================================== */

/* ANIMATIONS */
@keyframes alFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes alPing {
    75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes alPulse {
    50% { opacity: .5; }
}

/* BASE */
.al-main {
    position: relative;
    min-height: calc(100vh - 140px);
    background-color: rgba(248, 250, 252, 0.5); /* slate-50/50 */
    padding: 3rem 0 6rem 0;
    transition: background-color 0.3s;
    overflow: hidden;
}
html.dark .al-main {
    background-color: #050507;
}

.al-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}
@media (min-width: 640px) { .al-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .al-container { padding: 0 2rem; } }

/* BACKGROUND BLOBS */
.al-bg-blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.al-blob {
    position: absolute;
    width: 600px;
    height: 600px;
    filter: blur(120px);
    border-radius: 50%;
}
.al-blob-top {
    top: -10%; right: -5%;
    background-color: rgba(16, 185, 129, 0.1); /* emerald-500/10 */
}
.al-blob-bottom {
    bottom: -10%; left: -5%;
    background-color: rgba(59, 130, 246, 0.1); /* blue-500/10 */
}
html.dark .al-blob-top { background-color: rgba(16, 185, 129, 0.05); }
html.dark .al-blob-bottom { background-color: rgba(59, 130, 246, 0.05); }

@media (min-width: 768px) {
    .al-main { padding-top: 5rem; }
    .al-blob { width: 800px; }
}

/* HERO SECTION */
.al-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 6rem;
    animation: alFadeUp 0.6s ease-out forwards;
}
@media (min-width: 1024px) {
    .al-hero { grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 8rem; }
}

.al-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    order: 2;
}
@media (min-width: 1024px) {
    .al-hero-content { align-items: flex-start; text-align: left; order: 1; }
}

/* BADGE */
.al-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background-color: #d1fae5;
    color: #059669;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #bbf7d0;
}
html.dark .al-badge {
    background-color: rgba(6, 78, 59, 0.3);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.2);
}
.al-badge-indicator { position: relative; display: flex; width: 0.625rem; height: 0.625rem; }
.al-badge-ping { position: absolute; inset: 0; border-radius: 50%; background-color: #34d399; opacity: 0.75; animation: alPing 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.al-badge-dot { position: relative; display: inline-flex; border-radius: 50%; width: 0.625rem; height: 0.625rem; background-color: #10b981; }

/* HERO TEXT */
.al-title {
    font-size: 3rem;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
    background: linear-gradient(to bottom right, #1e293b, #059669, #3b82f6);
    -webkit-background-clip: text;
    color: transparent;
}
html.dark .al-title { background: linear-gradient(to bottom right, #ffffff, #34d399, #60a5fa); -webkit-background-clip: text; }
@media (min-width: 768px) { .al-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .al-title { font-size: 4.5rem; } }

.al-description {
    font-size: 1.125rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.625;
    margin-bottom: 2.5rem;
    max-width: 42rem;
}
html.dark .al-description { color: #94a3b8; }
@media (min-width: 768px) { .al-description { font-size: 1.25rem; } }

/* BUTTONS */
.al-actions { width: 100%; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
@media (min-width: 640px) { .al-actions { flex-direction: row; width: auto; } }

.al-btn-download {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background-color: #0f172a;
    color: #ffffff;
    border-radius: 1.5rem;
    font-weight: 900;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2);
    overflow: hidden;
    width: 100%;
}
html.dark .al-btn-download { background-color: #ffffff; color: #0f172a; box-shadow: 0 20px 25px -5px rgba(255, 255, 255, 0.1); }
@media (min-width: 640px) { .al-btn-download { width: auto; } }

.al-btn-hover-layer {
    position: absolute; inset: 0; background: linear-gradient(to right, #10b981, #34d399);
    opacity: 0; transition: opacity 0.3s;
}
.al-btn-download:hover { transform: translateY(-4px); }
.al-btn-download:active { transform: scale(0.95); }
.al-btn-download:hover .al-btn-hover-layer { opacity: 1; }

.al-btn-icon, .al-btn-text { position: relative; z-index: 10; transition: color 0.3s; }
.al-btn-icon { font-size: 1.5rem; }
.al-btn-download:hover .al-btn-icon, .al-btn-download:hover .al-btn-text { color: #ffffff; }

.al-ios-notice {
    margin-top: 2rem; display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1.25rem; border-radius: 1rem;
    background-color: #f1f5f9; border: 1px solid #e2e8f0;
    color: #94a3b8; font-size: 0.875rem; font-weight: 600;
}
html.dark .al-ios-notice { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.05); color: #64748b; }
.al-ios-notice i { font-size: 1.5rem; }

/* 3D PHONE MOCKUP */
.al-hero-visual {
    position: relative; display: flex; justify-content: center; align-items: center;
    perspective: 1000px; order: 1;
}
@media (min-width: 1024px) { .al-hero-visual { order: 2; } }

.al-phone-glow {
    position: absolute; width: 80%; height: 80%;
    background: linear-gradient(to top right, #34d399, #3b82f6);
    border-radius: 50%; filter: blur(80px); opacity: 0.2; animation: alPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
html.dark .al-phone-glow { opacity: 0.3; }

.al-phone-mockup {
    position: relative; width: 280px; height: 580px;
    background-color: #0f172a; border-radius: 3rem; border: 8px solid #1e293b;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.5); overflow: hidden;
    transform: rotate(-2deg); transition: transform 0.5s;
}
.al-phone-mockup:hover { transform: rotate(0); }
@media (min-width: 768px) { .al-phone-mockup { width: 320px; height: 650px; } }

.al-phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 33.33%; height: 24px; background-color: #1e293b; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; z-index: 20; }
.al-phone-screen { position: absolute; inset: 0; background-color: #ffffff; z-index: 10; display: flex; flex-direction: column; }
html.dark .al-phone-screen { background-color: #09090b; }

.al-phone-header { height: 5rem; background-color: #10b981; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1rem; color: #ffffff; font-weight: 900; font-size: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.al-phone-body { flex: 1; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

.al-phone-scanner { width: 100%; height: 12rem; background-color: #f1f5f9; border-radius: 1rem; display: flex; align-items: center; justify-content: center; border: 2px dashed #cbd5e1; position: relative; overflow: hidden; }
html.dark .al-phone-scanner { background-color: rgba(255, 255, 255, 0.05); border-color: #334155; }
.al-scanner-bg { position: absolute; inset: 0; background-color: rgba(16, 185, 129, 0.1); animation: alPulse 2s infinite; }
.al-scanner-icon { font-size: 2.25rem; color: #94a3b8; }
.al-scanner-laser { position: absolute; width: 100%; height: 2px; background-color: #10b981; top: 50%; transform: translateY(-50%); box-shadow: 0 0 10px rgba(16, 185, 129, 0.8); }

.al-skeleton-title { width: 75%; height: 1.5rem; background-color: #e2e8f0; border-radius: 9999px; }
.al-skeleton-text { width: 50%; height: 1rem; background-color: #f1f5f9; border-radius: 9999px; }
html.dark .al-skeleton-title { background-color: rgba(255, 255, 255, 0.1); }
html.dark .al-skeleton-text { background-color: rgba(255, 255, 255, 0.05); }

.al-skeleton-cards { margin-top: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.al-card { height: 6rem; border-radius: 1rem; border: 1px solid; }
.al-card-red { background-color: #fef2f2; border-color: #fee2e2; }
.al-card-green { background-color: #ecfdf5; border-color: #d1fae5; }
html.dark .al-card-red { background-color: rgba(127, 29, 29, 0.2); border-color: rgba(127, 29, 29, 0.3); }
html.dark .al-card-green { background-color: rgba(6, 78, 59, 0.2); border-color: rgba(6, 78, 59, 0.3); }

/* SECTIONS COMMONS */
.al-section-header { text-align: center; margin-bottom: 3.5rem; }
@media (min-width: 768px) { .al-section-header { margin-bottom: 4rem; } }
.al-section-header h2 { font-size: 1.875rem; font-weight: 900; color: #0f172a; margin-bottom: 1rem; }
html.dark .al-section-header h2 { color: #ffffff; }
@media (min-width: 768px) { .al-section-header h2 { font-size: 2.25rem; } }
.al-section-header p { font-size: 1rem; color: #64748b; font-weight: 500; max-width: 42rem; margin: 0 auto; }
html.dark .al-section-header p { color: #94a3b8; }
@media (min-width: 768px) { .al-section-header p { font-size: 1.125rem; } }

/* FEATURES */
.al-features-section { margin-bottom: 6rem; }
@media (min-width: 768px) { .al-features-section { margin-bottom: 8rem; } }
.al-features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .al-features-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .al-features-grid { grid-template-columns: repeat(3, 1fr); } }

.al-feature-card {
    background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 2rem; padding: 2rem; border: 1px solid #e2e8f0;
    box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.2); transition: transform 0.3s;
}
html.dark .al-feature-card { background-color: rgba(24, 24, 27, 0.6); border-color: rgba(255, 255, 255, 0.05); box-shadow: none; }
.al-feature-card:hover { transform: translateY(-4px); }

.al-feature-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem; border: 1px solid; transition: transform 0.3s; }
.al-feature-card:hover .al-feature-icon { transform: scale(1.1); }
.al-icon-green { background-color: #ecfdf5; color: #10b981; border-color: #d1fae5; }
.al-icon-blue { background-color: #eff6ff; color: #3b82f6; border-color: #dbeafe; }
.al-icon-amber { background-color: #fffbeb; color: #f59e0b; border-color: #fef3c7; }
html.dark .al-icon-green { background-color: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); }
html.dark .al-icon-blue { background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); }
html.dark .al-icon-amber { background-color: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); }

.al-feature-card h3 { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin-bottom: 0.75rem; }
html.dark .al-feature-card h3 { color: #ffffff; }
.al-feature-card p { color: #64748b; font-weight: 500; line-height: 1.625; }
html.dark .al-feature-card p { color: #94a3b8; }

/* PRIVACY */
.al-privacy-section { margin-bottom: 6rem; }
@media (min-width: 768px) { .al-privacy-section { margin-bottom: 8rem; } }
.al-privacy-card {
    background: linear-gradient(to bottom right, #0f172a, #1e293b);
    border-radius: 2.5rem; padding: 2rem; border: 1px solid #334155;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden;
}
html.dark .al-privacy-card { background: linear-gradient(to bottom right, #09090b, #18181b); border-color: rgba(255, 255, 255, 0.1); }
@media (min-width: 768px) { .al-privacy-card { padding: 3rem; } }

.al-privacy-glow { position: absolute; top: 0; right: 0; width: 16rem; height: 16rem; background-color: rgba(16, 185, 129, 0.2); filter: blur(80px); border-radius: 50%; pointer-events: none; }
.al-privacy-inner { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 2rem; align-items: center; justify-content: space-between; }
@media (min-width: 768px) { .al-privacy-inner { flex-direction: row; } }

.al-privacy-text { flex: 1; text-align: center; }
@media (min-width: 768px) { .al-privacy-text { text-align: left; } }
.al-privacy-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1.5rem; background-color: rgba(16, 185, 129, 0.2); color: #34d399; margin-bottom: 1.5rem; border: 1px solid rgba(16, 185, 129, 0.3); font-size: 1.875rem; }
.al-privacy-text h3 { font-size: 1.5rem; font-weight: 900; color: #ffffff; margin-bottom: 1rem; }
@media (min-width: 768px) { .al-privacy-text h3 { font-size: 1.875rem; } }
.al-privacy-text p { color: #cbd5e1; font-weight: 500; line-height: 1.625; max-width: 42rem; }

.al-privacy-stats { width: 100%; background-color: rgba(0, 0, 0, 0.3); padding: 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html.dark .al-privacy-stats { background-color: rgba(255, 255, 255, 0.05); }
@media (min-width: 768px) { .al-privacy-stats { width: auto; } }

.al-stat-score { font-size: 3rem; font-weight: 900; color: #34d399; margin-bottom: 0.5rem; }
.al-stat-score span { font-size: 1.875rem; color: #64748b; }
.al-stat-label { font-size: 0.875rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.al-stat-link { display: inline-block; padding: 0.5rem 1.5rem; background-color: rgba(16, 185, 129, 0.2); color: #34d399; border-radius: 9999px; font-weight: 700; font-size: 0.875rem; text-decoration: none; transition: background-color 0.3s; }
.al-stat-link:hover { background-color: rgba(16, 185, 129, 0.3); }

/* STEPS */
.al-steps-section { max-width: 56rem; margin: 0 auto; }
.al-steps-wrapper { position: relative; }
.al-steps-line { display: none; position: absolute; top: 3rem; left: 0; width: 100%; height: 0.25rem; background-color: #e2e8f0; border-radius: 9999px; z-index: 0; }
html.dark .al-steps-line { background-color: rgba(255, 255, 255, 0.05); }
@media (min-width: 768px) { .al-steps-line { display: block; } }

.al-steps-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; position: relative; z-index: 10; }
@media (min-width: 768px) { .al-steps-grid { grid-template-columns: repeat(3, 1fr); } }

.al-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.al-step-number { width: 6rem; height: 6rem; border-radius: 50%; background-color: #ffffff; border: 4px solid #f1f5f9; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; font-size: 1.875rem; font-weight: 900; margin-bottom: 1.5rem; }
html.dark .al-step-number { background-color: #18181b; border-color: #202024; }
.al-step-blue { color: #3b82f6; }
.al-step-amber { color: #f59e0b; }
.al-step-green { color: #10b981; }

.al-step h4 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; }
html.dark .al-step h4 { color: #ffffff; }
.al-step p { color: #64748b; font-size: 0.875rem; font-weight: 500; }
html.dark .al-step p { color: #94a3b8; }
.al-step code { background-color: #f1f5f9; padding: 0.125rem 0.5rem; border-radius: 0.25rem; color: #334155; }
html.dark .al-step code { background-color: rgba(255, 255, 255, 0.1); color: #cbd5e1; }