/* ==========================================================================
   NEXTZHOP SIGNATURE - LANDING CANVAS (V45.0 - EDITORIAL TESLA EDITION)
   Ubicación: /assets/css/landing-canvas.css
   Lógica: Diseño Inmersivo, Premium Glassmorphism, Rounded UI, Inter Typography.
   ========================================================================== */

/* 🛡️ SELLO DE RENDIMIENTO NATIVO */
::-webkit-scrollbar { display: none; }
html, body { margin: 0; padding: 0; background-color: var(--hub-bg-app); color: var(--hub-text-main); scroll-behavior: smooth; }
.nz-hidden { display: none !important; }
.nz-flex { display: flex !important; }

.nz-text-stroke { -webkit-text-stroke: 1.5px var(--hub-text-main); color: transparent; }

/* ==========================================================================
   1. CHASIS PERIMETRAL (HEADER INMERSIVO)
   ========================================================================== */
.nz-landing-header { 
    width: 100%; 
    height: calc(60px + env(safe-area-inset-top)); 
    padding: env(safe-area-inset-top) 24px 0 24px;
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: 100;
    background-color: transparent; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    pointer-events: none; 
}

.nz-header-logo, .nz-header-actions {
    pointer-events: auto;
}

.nz-header-logo { 
    font-family: 'Inter', sans-serif;
    font-weight: 700; 
    font-size: 1.25rem; 
    letter-spacing: 0.05em; 
    color: #ffffff; 
}

.nz-header-actions { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
}

/* Botón Glassmorphism para el Header */
.nz-header-glass-btn {
    background: rgba(255,255,255,0.1); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff; 
    border: 1px solid rgba(255,255,255,0.05);
    padding: 8px 24px; 
    min-height: 36px; 
    font-size: 11px; 
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 20px; /* Estilo píldora suave */
    transition: all 0.3s ease; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
}
.nz-header-glass-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-1px);
}

/* ==========================================================================
   2. CARRUSEL DE AUTORIDAD Y SECCIONES
   ========================================================================== */
.nz-tesla-carousel { 
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    gap: 16px; 
    padding: 0 24px 40px; 
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.nz-tesla-carousel::-webkit-scrollbar { display: none; }
.nz-tesla-card { scroll-snap-align: center; }

/* Matriz de Funciones */
.nz-feature-card {
    display: grid;
    grid-template-columns: 1fr;
    background: #0a0a0a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}
.nz-feature-img-wrap { width: 100%; }
.nz-feature-img {
    width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
    background: #111; display: block; filter: grayscale(20%);
}
.nz-feature-content { padding: 40px 24px; display: flex; flex-direction: column; justify-content: center; }

@media (min-width: 768px) {
    .nz-feature-card { grid-template-columns: 1fr 1fr; min-height: 400px; }
    .nz-feature-img-wrap { height: 100%; }
    .nz-feature-img { height: 100%; aspect-ratio: auto; }
    .nz-feature-content { padding: 60px; }
    .nz-feature-card:nth-child(even) .nz-feature-img-wrap { order: 2; }
    .nz-feature-card:nth-child(even) .nz-feature-content { order: 1; }
}

/* ==========================================================================
   3. ANIMACIONES CORE
   ========================================================================== */
.reveal-item { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
}
.reveal-item.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

@keyframes nzPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.nz-animate-pulse {
    animation: nzPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==========================================================================
   4. MODALES (TESLA EDITORIAL EDITION)
   ========================================================================== */

.nz-modal-overlay { 
    position: fixed; 
    inset: 0; 
    z-index: 150; 
    background-color: #000; 
    display: flex; 
    flex-direction: column; 
}

/* Fondo inmersivo con desenfoque de cristal (Frosted Glass) */
.nz-paywall-overlay { 
    position: fixed; 
    inset: 0; 
    z-index: 200; 
    background-color: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(24px) saturate(120%); 
    -webkit-backdrop-filter: blur(24px) saturate(120%); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 24px; 
}

/* El Chasis del Modal Automotriz (Suave, Premium) */
#hard-paywall .nz-hub-modal-content {
    background: rgba(18, 18, 18, 0.85); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 20px; /* Bordes redondeados elegantes */
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    width: 100%; 
    max-width: 24rem; 
    position: relative; 
    padding: 32px; 
    box-sizing: border-box;
}

/* Pestañas de Navegación (Segmented Control / iOS & Tesla style) */
#hard-paywall .nz-hub-filter-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px; /* Píldora interior */
    outline: none;
}
#hard-paywall .nz-hub-filter-tab:hover {
    color: rgba(255,255,255,0.8);
}
#hard-paywall .nz-hub-filter-tab.active {
    color: #fff;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 🛡️ SHIELD: Inputs (Cápsulas limpias, sin esquinas agresivas) */
#hard-paywall .nz-hub-input {
    background: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 12px !important; /* Borde curvo */
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    
    /* Tipografía limpia */
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
#hard-paywall .nz-hub-input:focus {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.02) !important; /* Glow sutil */
    outline: none !important;
}
#hard-paywall .nz-hub-input::placeholder {
    color: rgba(255,255,255,0.3) !important;
}

/* Botón de Acción Principal (Sólido y Elegante) */
#hard-paywall .nz-btn-primary {
    width: 100% !important; /* 🚀 FALTABA ESTO: Expansión total */
    display: block !important; /* 🚀 FALTABA ESTO: Comportamiento de bloque */
    box-sizing: border-box !important; /* 🚀 FALTABA ESTO: Evita desbordamiento con el padding */
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 14px !important;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}
#hard-paywall .nz-btn-primary:not(:disabled):hover {
    transform: scale(0.98); /* Efecto de presión física */
    opacity: 0.9 !important;
}
#hard-paywall .nz-btn-primary:disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    background: rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.5) !important;
}