/* ===== HOME estilo Apple ===== */
.home { max-width: 1080px; margin: 0 auto; }

/* Hero */
.home-hero {
    text-align: center;
    padding: var(--space-10) var(--space-4) var(--space-8);
}
.home-eyebrow {
    font-size: var(--font-size-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}
.home-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0 auto var(--space-4);
    max-width: 15ch;
}
.home-hero-sub {
    font-size: clamp(1.0625rem, 2.5vw, 1.3125rem);
    line-height: var(--leading-snug);
    color: var(--color-text-secondary);
    max-width: 46ch;
    margin: 0 auto var(--space-6);
}
.home-hero-cta {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}
.home-hero-stats {
    display: flex;
    gap: var(--space-2) var(--space-5);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
.home-hero-stats b { color: var(--color-primary); font-weight: var(--weight-semibold); }

/* Reanudar viaje (ruta guardada reciente) */
.home-resume {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 420px;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius-lg);
    background: var(--color-accent-soft);
    color: var(--color-primary);
    text-decoration: none;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home-resume:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.home-resume[hidden] { display: none; }
.home-resume-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    flex-shrink: 0;
}
.home-resume-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.home-resume-text b { font-weight: var(--weight-semibold); }
.home-resume-text small { color: var(--color-text-secondary); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-resume-arrow { color: var(--color-accent); }

/* Banda destacada TeslAdvisor */
.home-feature {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6);
    margin: var(--space-4) var(--space-4) var(--space-8);
    background: linear-gradient(135deg, #0a0a0a, #1d1d1f);
    color: #fff;
    border-radius: var(--border-radius-2xl);
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.home-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); color: #fff; text-decoration: none; }
.home-feature-icon {
    flex-shrink: 0;
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: var(--border-radius-lg);
    background: rgba(255,255,255,0.12);
    font-size: 28px; color: #fff;
}
.home-feature-body { flex: 1; min-width: 0; }
.home-feature-eyebrow { font-size: var(--font-size-xs); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.home-feature h2 { font-size: var(--font-size-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin: 2px 0 4px; }
.home-feature p { color: rgba(255,255,255,0.75); font-size: var(--font-size-base); }
.home-feature-stats { margin-top: var(--space-2); font-size: var(--font-size-sm); color: rgba(255,255,255,0.85); }
.home-feature-stats b { color: #fff; }
.home-feature-go {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; background: var(--color-accent); color: #fff; font-size: 16px;
    transition: transform var(--transition-fast);
}
.home-feature:hover .home-feature-go { transform: translateX(3px); }

/* Grid de secciones */
.home-section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-snug);
    margin: 0 var(--space-4) var(--space-4);
}
.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    padding: 0 var(--space-4);
}
.home-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--color-secondary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-xl);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.home-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
    text-decoration: none;
    color: inherit;
}
.home-card-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--border-radius);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 20px;
    margin-bottom: var(--space-4);
}
.home-card-icon img { width: 26px; height: 26px; object-fit: contain; }
.home-card h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    margin-bottom: var(--space-2);
}
.home-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-snug);
    flex: 1;
}
.home-card-stats {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-top: var(--space-4);
}
.home-chip {
    font-size: var(--font-size-xs);
    font-weight: var(--weight-medium);
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    background: var(--color-surface);
    color: var(--color-gray-700);
}
.home-chip.accent { background: var(--color-accent-soft); color: var(--color-accent); }
.home-card-go {
    margin-top: var(--space-4);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--font-size-sm); font-weight: var(--weight-semibold);
    color: var(--color-accent);
}
.home-card:hover .home-card-go { gap: 10px; }
.home-card.is-soon { opacity: 0.75; cursor: default; }
.home-card.is-soon:hover { transform: none; box-shadow: none; border-color: var(--color-gray-200); }
.home-card .soon-tag {
    align-self: flex-start; margin-top: var(--space-4);
    font-size: var(--font-size-xs); font-weight: var(--weight-semibold);
    padding: 4px 10px; border-radius: var(--border-radius-full);
    background: var(--color-gray-100); color: var(--color-gray-600);
}

/* Bloque "sobre" / colaborar */
.home-about {
    margin: var(--space-16) var(--space-4) var(--space-8);
    padding: var(--space-10) var(--space-6);
    background: var(--color-surface);
    border-radius: var(--border-radius-2xl);
    text-align: center;
}
.home-about h2 { font-size: var(--font-size-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); }
.home-about p { color: var(--color-text-secondary); max-width: 52ch; margin: 0 auto var(--space-5); line-height: var(--leading-normal); }

/* Aparición suave (el contenido es visible aunque no haya animación) */
@keyframes homeReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.home-reveal { animation: homeReveal 0.5s var(--ease-apple) both; }

@media (max-width: 640px) {
    .home-hero { padding-top: var(--space-6); }
    .home-hero-cta .btn { flex: 1; }
    .home-feature { flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5); }
    .home-feature-go { order: 3; }
    .home-grid { grid-template-columns: 1fr; }
}

/* Modo oscuro: la banda negra se eleva a gris para no fundirse con el fondo negro de la página (texto sigue en blanco) */
:root[data-theme="dark"] .home-feature {
    background: linear-gradient(135deg, var(--color-gray-50), var(--color-gray-100));
}