.elementor-246084 .elementor-element.elementor-element-23eb22e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-50c40df */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

#osoji-landing-white {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    width: 100% !important;
    min-height: 100vh !important;
    background-color: #FFFFFF !important;
    color: #111827 !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

#osoji-landing-white *, 
#osoji-landing-white *::before, 
#osoji-landing-white *::after {
    box-sizing: border-box !important;
}

/* NAVBAR SUPERIOR LUMINOSO */
#osoji-landing-white .landing-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 30 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 40px !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, transparent 100%) !important;
}

#osoji-landing-white .landing-logo {
    height: 30px !important;
    width: auto !important;
    object-fit: contain !important;
}

#osoji-landing-white .btn-header-login {
    background-color: #E60000 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(230,0,0,0.2) !important;
}

#osoji-landing-white .btn-header-login:hover {
    background-color: #CC0000 !important;
}

/* SECCIÓN HERO CON PERSPECTIVA TIPO NETFLIX */
#osoji-landing-white .hero-section {
    position: relative !important;
    height: 80vh !important;
    min-height: 520px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 80px 20px 0 20px !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #F3F4F6 !important;
    overflow: hidden !important;
    perspective: 1000px !important;
}

/* MURO DE RECETAS EN 3D CORREGIDO PARA CUBRIR 100% DEL ANCHO/ALTO */
#osoji-landing-white .hero-bg-wall {
    position: absolute !important;
    top: -40% !important;
    left: -40% !important;
    width: 180% !important;
    height: 240% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    transform: rotateX(16deg) rotateY(-12deg) rotateZ(-6deg) scale(1.3) !important;
    opacity: 0.75 !important; /* Mayor visibilidad para que se note la variedad */
    z-index: 0 !important;
}

#osoji-landing-white .hero-bg-row {
    display: flex !important;
    gap: 16px !important;
    width: 100% !important;
}

#osoji-landing-white .hero-bg-row.offset {
    transform: translateX(-10%) !important;
}

#osoji-landing-white .hero-bg-row img {
    width: 260px !important;
    height: 146px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* VIÑETA Y DEGRADADO DE LECTURA EQUILIBRADO */
#osoji-landing-white .hero-overlay-white {
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at center, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0.98) 100%) !important;
    z-index: 5 !important;
}

#osoji-landing-white .hero-text-container {
    position: relative !important;
    z-index: 10 !important;
    max-width: 800px !important;
}

#osoji-landing-white .hero-badge {
    background-color: #FEE2E2 !important;
    color: #E60000 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#osoji-landing-white .hero-title {
    font-size: 46px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin: 0 0 16px 0 !important;
    color: #111827 !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 2px 10px rgba(255,255,255,0.8) !important;
}

#osoji-landing-white .hero-subtitle {
    font-size: 17px !important;
    color: #1F2937 !important;
    margin: 0 0 28px 0 !important;
    font-weight: 600 !important;
}

/* CALL TO ACTION PRINCIPAL */
#osoji-landing-white .cta-box {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    max-width: 520px !important;
    margin: 0 auto !important;
}

#osoji-landing-white .cta-input {
    flex: 1 !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    border: 1px solid #D1D5DB !important;
    background-color: #FFFFFF !important;
    color: #111827 !important;
    font-size: 14px !important;
    outline: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

#osoji-landing-white .cta-input:focus {
    border-color: #E60000 !important;
}

#osoji-landing-white .btn-cta-submit {
    background-color: #E60000 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(230,0,0,0.3) !important;
}

#osoji-landing-white .btn-cta-submit:hover {
    background-color: #CC0000 !important;
}

/* CATÁLOGO PREVIEW EN BLANCO */
#osoji-landing-white .catalog-preview {
    padding: 40px 40px 60px 40px !important;
    background-color: #FFFFFF !important;
}

#osoji-landing-white .catalog-row-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#osoji-landing-white .catalog-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 44px !important;
}

@media (max-width: 768px) {
    #osoji-landing-white .catalog-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #osoji-landing-white .hero-title {
        font-size: 30px !important;
    }
}

#osoji-landing-white .preview-card {
    background-color: #FFFFFF !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    cursor: pointer !important;
    border: 1px solid #E5E7EB !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#osoji-landing-white .preview-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}

#osoji-landing-white .preview-img-box {
    position: relative !important;
    padding-top: 56.25% !important;
    overflow: hidden !important;
    background-color: #F3F4F6 !important;
}

#osoji-landing-white .preview-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#osoji-landing-white .card-category-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 15 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

#osoji-landing-white .badge-red { background-color: #E60000 !important; color: #FFFFFF !important; }
#osoji-landing-white .badge-green { background-color: #059669 !important; color: #FFFFFF !important; }
#osoji-landing-white .badge-amber { background-color: #F59E0B !important; color: #FFFFFF !important; }
#osoji-landing-white .badge-purple { background-color: #7C3AED !important; color: #FFFFFF !important; }

#osoji-landing-white .preview-lock-overlay {
    position: absolute !important;
    inset: 0 !important;
    background-color: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(2px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #E60000 !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    z-index: 20 !important;
}

#osoji-landing-white .preview-card:hover .preview-lock-overlay {
    opacity: 1 !important;
}

#osoji-landing-white .preview-card-body {
    padding: 14px !important;
}

/* MODAL LOGIN POPUP */
#osoji-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(17, 24, 39, 0.6) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

#osoji-modal-overlay.active {
    display: flex !important;
}

#osoji-modal-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 420px !important;
    padding: 32px !important;
    position: relative !important;
    box-shadow: 0 20px 30px rgba(0,0,0,0.1) !important;
}

#osoji-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: none !important;
    border: none !important;
    color: #9CA3AF !important;
    font-size: 20px !important;
    cursor: pointer !important;
}

#osoji-modal-card h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
    color: #111827 !important;
}

#osoji-modal-card p {
    font-size: 13px !important;
    color: #6B7280 !important;
    margin: 0 0 20px 0 !important;
}

#osoji-modal-card .form-group {
    margin-bottom: 14px !important;
}

#osoji-modal-card label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
}

#osoji-modal-card input {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 10px !important;
    border: 1px solid #D1D5DB !important;
    background-color: #F9FAFB !important;
    color: #111827 !important;
    font-size: 13px !important;
    outline: none !important;
}

#osoji-modal-card input:focus {
    border-color: #E60000 !important;
    background-color: #FFFFFF !important;
}

#osoji-modal-card .btn-modal-submit {
    width: 100% !important;
    background-color: #E60000 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    box-shadow: 0 2px 8px rgba(230,0,0,0.2) !important;
}/* End custom CSS */